docs(:pencil:)

- Restructuring docs
- Adding uncontrolled/controlled guides
- Adding sorting to prop table
- etc.

Author: atomicpages

docs/docs/api/checkbox.mdx

@@ -0,0 +1,22 @@
+---
+id: checkbox
+title: Checkbox API
+---
+
+import PropsTable from '../../src/components/PropsTable';
+
+## `Checkbox` API
+
+<PropsTable displayName="Checkbox" />
+
+## `useCheckboxState` API
+
+<PropsTable displayName="useCheckboxState" />
+
+### `useCheckboxState` Return
+
+| Name       | Type                                                 | Description                                                                                                   |
+| ---------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `state`    | `string` \| `boolean` \| `any[]`                     | The state object of the checkbox. This can be a boolean or an array of items.                                 |
+| `setState` | `React.Dispatch<React.SetStateAction<typeof state>>` | The React dispatch function from `useState` or a reference to `this.setState`                                 |
+| `onChange` | `React.ChangeEventHandler<HTMLInputElement>`         | The change handler to be called by the input control when a change event fires. This calls `setState` for you |

docs/docs/api/radio.mdx

@@ -0,0 +1,22 @@
+---
+id: radio
+title: Radio API
+---
+
+import PropsTable from '../../src/components/PropsTable';
+
+## `Radio` API
+
+<PropsTable displayName="Radio" />
+
+## `useRadioState` API
+
+<PropsTable displayName="useRadioState" />
+
+### `useRadioState` Return
+
+| Name       | Type                                                 | Description                                                                                                   |
+| ---------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `state`    | `string` \| `boolean`                                | The state object of the radio. This can be a boolean or an array of items.                                    |
+| `setState` | `React.Dispatch<React.SetStateAction<typeof state>>` | The React dispatch function from `useState` or a reference to `this.setState`                                 |
+| `onChange` | `React.ChangeEventHandler<HTMLInputElement>`         | The change handler to be called by the input control when a change event fires. This calls `setState` for you |

docs/docs/api/switch.mdx

@@ -0,0 +1,10 @@
+---
+id: switch
+title: Switch API
+---
+
+import PropsTable from '../../src/components/PropsTable';
+
+## `Switch` API
+
+<PropsTable displayName="Switch" />

docs/docs/checkbox.mdx

@@ -0,0 +1,57 @@
+---
+id: checkbox
+title: Checkbox
+sidebar_label: Checkbox
+---
+
+At the heart and soul of every application is at least one checkbox. It might be a terms and conditions agreement,
+"Do not sell" CCPA notice, or something else; whatever it is, `pretty-checkbox-react` (PCR) has your back.
+
+## Shapes, Variants, & States
+
+There's no "one size fits all" for input controls like Checkbox.
+Thankfully, PCR allows you to represent Checkbox in various ways via the `shape` and `variant` prop
+for pre-bundled fun. See the [`shapes`](getting-started/shapes-size) docs for more details.
+
+```jsx live
+<>
+    <Checkbox>Regular</Checkbox>
+    <Checkbox shape="curve" variant="thick">Thick Curve</Checkbox>
+    <Checkbox shape="round" variant="fill">Fill Round</Checkbox>
+</>
+```
+
+### Disabled &amp; Locked
+
+Of course `disabled` is supported, but there's also a secondary state called `locked`.
+See the [states](getting-started/states) docs for more details.
+
+```jsx live
+<>
+    <Checkbox>Regular</Checkbox>
+    <Checkbox disabled>Disabled</Checkbox>
+    <Checkbox locked>Locked</Checkbox>
+</>
+```
+
+### Scalability
+
+Out of the box, PCR offers a `bigger` prop to make all input controls just a tad bit larger.
+For more fine-grained control check out the [size docs](getting-started/shapes-size#size).
+
+```jsx live
+<>
+    <Checkbox>Regular</Checkbox>
+    <Checkbox bigger>Bigger</Checkbox>
+</>
+```
+
+## Uncontrolled
+
+## Controlled
+
+## Indeterminate
+
+Building a wickedly awesome control that needs `indeterminate`, or tri-state support?
+PCR has you covered for controlled and uncontrolled components.
+

docs/docs/checkbox/checkbox.mdx

@@ -1,14 +1,14 @@
 ---
-id: installation
+id: get-started
 title: Get Started
-sidebar_label: Installation
+slug: /
 ---
 
-Pretty Checkbox React (PCR for short) is a small, a11y friendly implementation of Pretty Checkbox :star: with easy as pie usage :pie:
+Pretty Checkbox React (PCR for short) is a small, a11y friendly implementation of Pretty Checkbox :star: with easy as pie usage :pie:.
 
 ## Installation
 
-First, make sure `react` and `react-dom` 16.9+  are installed:
+Awesome much? I think yes! To get PCR, first make sure `react` and `react-dom` 16.9+  are installed:
 
 ```sh
 npm i react react-dom
@@ -22,7 +22,7 @@ npm i @djthoms/pretty-checkbox pretty-checkbox-react
 
 ## Usage
 
-Pretty Checkbox React exposes three components as [named exports](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) that are importable in your super groovy development environment:
+Pretty Checkbox React exposes three components as [named exports](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) that are importable in your fancy development environment:
 
 -   `Checkbox`
 -   `Radio`