docs(:pencil:) Docs docs docs

- Updating colors
- Finalizing docs
- Giving some love

docs/docs/basic-concepts/shapes.mdx

@@ -77,7 +77,7 @@ There's no limitation with mix-n-matching shapes. We can create round checkboxes
 
 ### Switch Shapes
 
-Switch is different from checkbox and radio controls in terms of shapes. There three availale: `p-outline`, `p-fill`, and `p-slim` alongside the `p-switch` class on the root div.
+Switch is different from checkbox and radio controls in terms of shapes. There are three shapes availale: `p-outline`, `p-fill`, and `p-slim` alongside the `p-switch` class on the root div.
 
 ```html {1,8,15}
 <div class="pretty p-switch">

docs/docs/basic-concepts/states.md

@@ -90,11 +90,41 @@ Pretty Checkbox allows you to show/hide different labels using nothing but CSS u
     </div>
 </div>
 
-### Toggle with Icons
+### Without Border
 
-Mix n' match icons with toggle, just be sure you review the [icons](icons) guide before proceeding!
+Using `p-plain` to skip the border:
 
-```html {1,3,7}
+```html {1}
+<div class="pretty p-icon p-toggle p-plain">
+    <input type="checkbox" />
+    <div class="state p-on">
+        <i class="icon mdi mdi-wifi"></i>
+        <label>Wifi on</label>
+    </div>
+    <div class="state p-off">
+        <i class="icon mdi mdi-wifi-off"></i>
+        <label>Wifi off</label>
+    </div>
+</div>
+```
+
+<div className="pretty p-icon p-toggle p-plain">
+    <input type="checkbox" />
+    <div className="state p-on">
+        <i className="icon mdi mdi-wifi"></i>
+        <label>Wifi on</label>
+    </div>
+    <div className="state p-off">
+        <i className="icon mdi mdi-wifi-off"></i>
+        <label>Wifi off</label>
+    </div>
+</div>
+
+### Mo' Toggle
+
+Mix n' match icons with toggle, just be sure you review the [icons](icons) guide before proceeding! Make it extra fancy by adding [colors](colors), too!
+
+```html {1,13,25}
 <div class="pretty p-icon p-toggle">
     <input type="checkbox" />
     <div class="state p-on">
@@ -106,6 +136,30 @@ Mix n' match icons with toggle, just be sure you review the [icons](icons) guide
         <label>OFF</label>
     </div>
 </div>
+
+<div class="pretty p-icon p-toggle p-plain">
+    <input type="checkbox" />
+    <div class="state p-success-o p-on">
+        <i class="icon mdi mdi-eye"></i>
+        <label>Show preview</label>
+    </div>
+    <div class="state p-off">
+        <i class="icon mdi mdi-eye-off"></i>
+        <label>Hide preview</label>
+    </div>
+</div>
+
+<div class="pretty p-icon p-toggle p-plain">
+    <input type="checkbox" />
+    <div class="state p-warning-o p-off">
+        <i class="icon mdi mdi-play"></i>
+        <label>Playing...</label>
+    </div>
+    <div class="state p-on p-info-o">
+        <i class="icon mdi mdi-pause"></i>
+        <label>Paused</label>
+    </div>
+</div>
 ```
 
 <div className="pretty p-icon p-toggle">
@@ -119,3 +173,27 @@ Mix n' match icons with toggle, just be sure you review the [icons](icons) guide
         <label>OFF</label>
     </div>
 </div>
+
+ <div className="pretty p-icon p-toggle p-plain">
+    <input type="checkbox" />
+    <div className="state p-success-o p-on">
+        <i className="icon mdi mdi-eye"></i>
+        <label>Show preview</label>
+    </div>
+    <div className="state p-off">
+        <i className="icon mdi mdi-eye-off"></i>
+        <label>Hide preview</label>
+    </div>
+</div>
+
+<div className="pretty p-icon p-toggle p-plain">
+    <input type="checkbox" />
+    <div className="state p-warning-o p-off">
+        <i className="icon mdi mdi-play"></i>
+        <label>Playing...</label>
+    </div>
+    <div className="state p-on p-info-o">
+        <i className="icon mdi mdi-pause"></i>
+        <label>Paused</label>
+    </div>
+</div>

docs/docs/checkbox.mdx

@@ -136,22 +136,78 @@ There are five animations classes available that can be added to the root div: `
 
 ## Indeterminate
 
-Pretty checkbox supports indeterminate states, too althoughn you'll need to use a little javascript to make this happen:
+Pretty checkbox supports indeterminate states, too although you'll need to use a little javascript to make this happen:
 
-```js
+```js title="toggleIndeterminate.js"
 // checkbox: HTMLInputElement
 // indeterminate: boolean
 function toggleIndeterminate(checkbox, indeterminate) {
     if (checkbox) {
         checkbox.indeterminate = indeterminate;
 
         // don't forget a11y
-        checkbox.setAttribute(
-            'aria-checked',
-            indeterminate ? 'mixed' : checkbox.checked
-        );
+        checkbox.setAttribute('aria-checked', indeterminate ? 'mixed' : checkbox.checked);
     }
 }
 ```
 
+### Indeterminates with React
+
+One way we can make this work is by exposing an `indeterminate` prop and passing a `ref` to the `HTMLInputElement`, the main point here is we want our effect to run whenever `indeterminate` changes:
+
+```jsx title="Checkbox.jsx"
+import React from 'react';
+
+function Checkbox({ children, indeterminate, color = '', className = '', ...rest }) {
+    const ref = React.useRef(null);
+
+    React.useEffect(() => {
+        if (ref.current) {
+            ref.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+
+    return (
+        <div className={`pretty ${className}`} {...rest}>
+            <input type="checkbox" ref={ref} />
+            <div className={`state ${color}`}>
+                <label>{children}</label>
+            </div>
+        </div>
+    );
+}
+```
+
 <IndeterminateCheckbox />
+
+### Indeterminates with React Class
+
+Not on the hooks train yet 🚂 ? No biggie. Just remember we can register side effects in `componentDidMount` since it's called whenever props or state changes :wink:
+
+```jsx title="Checkbox.jsx"
+import React from 'react';
+
+export class Checkbox extends React.Component {
+    constructor(props) {
+        super(props);
+        this.ref = React.createRef();
+    }
+
+    componentDidMount() {
+        if (this.ref.current) {
+            this.ref.current.indeterminate = this.props.indeterminate;
+        }
+    }
+
+    render() {
+        return (
+            <div className={`pretty ${this.props.className}`}>
+                <input type="checkbox" ref={this.ref} />
+                <div className={`state ${this.props.color}`}>
+                    <label>{this.props.children}</label>
+                </div>
+            </div>
+        );
+    }
+}
+```

docs/docs/getting-started.md

@@ -18,15 +18,15 @@ yarn add @djthoms/pretty-checkbox
 Pretty checkbox works well with modern bundlers such as parcel or webpack (via `css-loader`):
 
 ```js
-import 'pretty-checkbox';
+import '@djthoms/pretty-checkbox';
 
 // rest of your app
 ```
 
 If you want to import the `scss` source you can do that, too:
 
 ```js
-import 'pretty-checkbox/src/pretty-checkbox.scss';
+import '@djthoms/pretty-checkbox/src/pretty-checkbox.scss';
 ```
 
 ### Sass Usage
@@ -38,7 +38,7 @@ At the heart of Pretty Checkbox is Sass. If you're using `.sass` or `.scss` in y
 :::
 
 ```scss
-@import '~/pretty-checkbox/src/pretty-checkbox';
+@import '~@djthoms/pretty-checkbox/src/pretty-checkbox';
 ```
 
 ### Regular ol' HTML
@@ -54,10 +54,24 @@ And of course you can use a CDN and embed in your html file using the `link` tag
 Once pretty checkbox styles have been added, just add a little bit of markup and we're in business 👩‍💻
 
 ```jsx live
-<div className="pretty p-default">
-    <input type="checkbox" />
-    <div className="state">
-        <label>Check</label>
+<>
+    <div className="pretty p-default">
+        <input type="checkbox" />
+        <div className="state">
+            <label>Checkbox</label>
+        </div>
     </div>
-</div>
+    <div className="pretty p-default p-round">
+        <input type="radio" />
+        <div className="state">
+            <label>Radio</label>
+        </div>
+    </div>
+    <div className="pretty p-switch">
+        <input type="checkbox" />
+        <div className="state">
+            <label>Switch</label>
+        </div>
+    </div>
+</>
 ```