v1.4.1 updates

docs/border/border-color.mdx

@@ -48,6 +48,108 @@ import { bdr } from "nativeflowcss";
               ></div>
             </td>
           </tr>
+          <tr>
+            <td>{`bdr.b_color_${key}`}</td>
+            <td>
+              <code>{`{ borderBottomColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.l_color_${key}`}</td>
+            <td>
+              <code>{`{ borderLeftColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.r_color_${key}`}</td>
+            <td>
+              <code>{`{ borderRightColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.t_color_${key}`}</td>
+            <td>
+              <code>{`{ borderTopColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.s_color_${key}`}</td>
+            <td>
+              <code>{`{ borderStartColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
+          <tr>
+            <td>{`bdr.e_color_${key}`}</td>
+            <td>
+              <code>{`{ borderEndColor: '${value}' }`}</code>
+            </td>
+            <td>
+              <div
+                style={{
+                  width: "20px",
+                  border: `1px solid #606770`,
+                  margin: "auto",
+                  height: "20px",
+                  backgroundColor: `${value}`,
+                }}
+              ></div>
+            </td>
+          </tr>
         </React.Fragment>
       ))}
     </tbody>
@@ -61,6 +163,12 @@ Custom properties are usually rendered using `_(customValue)`
 | Object                   | Native Properties              |
 | ------------------------ | ------------------------------ |
 | bdr.color_(customColor) | `{ borderColor: customColor }` |
+| bdr.b_color_(customColor) | `{ borderBottomColor: customColor }` |
+| bdr.l_color_(customColor) | `{ borderLeftColor: customColor }` |
+| bdr.r_color_(customColor) | `{ borderRightColor: customColor }` |
+| bdr.t_color_(customColor) | `{ borderTopColor: customColor }` |
+| bdr.s_color_(customColor) | `{ borderStartColor: customColor }` |
+| bdr.e_color_(customColor) | `{ borderEndColor: customColor }` |
 
 ## Colors
 

docs/border/border-radius.mdx

@@ -28,7 +28,7 @@ import { bdr } from "nativeflowcss";
 | bdr.rounded_xl      | `{ borderRadius: 12 }`                                                      |
 | bdr.rounded_2xl     | `{ borderRadius: 16 }`                                                      |
 | bdr.rounded_3xl     | `{ borderRadius: 24 }`                                                      |
-| bdr.rounded_ful`    | `{ borderRadius: 9999 }`                                                    |
+| bdr.rounded_full    | `{ borderRadius: 9999 }`                                                    |
 | bdr.rounded_s_none  | `{ borderStartStartRadius: 0` , <br /> `borderEndStartRadius: 0 }`          |
 | bdr.rounded_s_sm    | `{ borderStartStartRadius: 2` , <br /> `borderEndStartRadius: 2 }`          |
 | bdr.rounded_s       | `{ borderStartStartRadius: 4` , <br /> `borderEndStartRadius: 4 }`          |
@@ -62,7 +62,7 @@ import { bdr } from "nativeflowcss";
 | bdr.rounded_r_md    | `{ borderTopRightRadius: 6` , <br /> `borderBottomRightRadius: 6 }`         |
 | bdr.rounded_r_lg    | `{ borderTopRightRadius: 8` , <br /> `borderBottomRightRadius: 8 }`         |
 | bdr.rounded_r_xl    | `{ borderTopRightRadius: 12` , <br /> `borderBottomRightRadius: 12 }`       |
-| bdr.rounded_r_2x    | `{ borderTopRightRadius: 16` , <br /> `borderBottomRightRadius: 16 }`       |
+| bdr.rounded_r_2xl   | `{ borderTopRightRadius: 16` , <br /> `borderBottomRightRadius: 16 }`       |
 | bdr.rounded_r_3xl   | `{ borderTopRightRadius: 24` , <br /> `borderBottomRightRadius: 24 }`       |
 | bdr.rounded_r_full  | `{ borderTopRightRadius: 9999` , <br /> `borderBottomRightRadius: 9999 }`   |
 | bdr.rounded_b_none  | `{ borderBottomRightRadius: 0` , <br /> `borderBottomLeftRadius: 0 }`       |

docs/effects/backface-visibility.mdx

@@ -0,0 +1,22 @@
+---
+id: backface-visibility
+title: Backface Visibility
+description: Control whether the back face of a view is visible.
+slug: /backface-visibility
+sidebar_position: 7
+---
+
+Control whether the back face of a view is visible.
+
+## Import
+
+```js title="src/screens/Component.js"
+import { fx } from "nativeflowcss";
+```
+
+## Properties
+
+| Object           | Native Properties                    |
+| ---------------- | ------------------------------------ |
+| fx.backface      | `{ backfaceVisibility: 'visible' }`  |
+| fx.backface_none | `{ backfaceVisibility: 'hidden' }`   |

docs/effects/elevation.mdx

@@ -23,7 +23,6 @@ The [Shadow property](/docs/shadow) works in a similar way, but supports Android
 
 | Object          | Native Properties   |
 | --------------- | ------------------- |
-| fx.elevation_0  | `{ elevation: 0 }`  |
 | fx.elevation_1  | `{ elevation: 1 }`  |
 | fx.elevation_2  | `{ elevation: 2 }`  |
 | fx.elevation_3  | `{ elevation: 3 }`  |

docs/effects/pointer-events.mdx

@@ -0,0 +1,22 @@
+---
+id: pointer-events
+title: Pointer Events
+description: Control whether a view receives touch events.
+slug: /pointer-events
+sidebar_position: 6
+---
+
+Control whether a view receives touch events.
+
+## Import
+
+```js title="src/screens/Component.js"
+import { fx } from "nativeflowcss";
+```
+
+## Properties
+
+| Object      | Native Properties            |
+| ----------- | ---------------------------- |
+| fx.box_auto | `{ pointerEvents: 'auto' }`  |
+| fx.box_none | `{ pointerEvents: 'none' }`  |

docs/getting-started/editor-setup.mdx

@@ -1,17 +1,15 @@
 ---
 id: editor-setup
 title: Editor Setup
-description: I love my life
+description: Set up the NativeFlow CodeSense extension in VS Code.
 slug: /editor-setup
 sidebar_position: 2
 ---
 
-TODO: Write a VS Code Extension for auto-importing the UI components being used in teh project
-
 ## VS Code Extension
 
-Download the VS Code Extension [NativeFlow Intellisense](https://something.com) or build it from the source from the [GitHub Repository](https://github.com/nativeflowteam/intellisense)
+![NativeFlow CodeSense banner](https://ik.imagekit.io/jayowiee/github/nativeflow/codesense/banner.png?updatedAt=1777886417117)
+
+Install [NativeFlow CodeSense](https://marketplace.visualstudio.com/items?itemName=jayowiee.nativeflowcss-codesense) from the VS Code Marketplace, or build it from source in the [CodeSense GitHub repository](https://github.com/nativeflowteam/codesense).
 
-:::caution
-Owner is a deadass college student so he'll build this later, Thanks for being patient :p
-:::
+It provides NativeFlow utility autocompletion, hover details, diagnostics, quick fixes, and color previews for JSX/TSX workflows.

docs/layout/direction.mdx

@@ -0,0 +1,23 @@
+---
+id: direction
+title: Direction
+description: Set writing direction for layout flow.
+slug: /direction
+sidebar_position: 7
+---
+
+Set writing direction for layout flow.
+
+## Import
+
+```js title="src/screens/Component.js"
+import { direction } from "nativeflowcss";
+```
+
+## Properties
+
+| Object            | Native properties          |
+| ----------------- | -------------------------- |
+| direction.inherit | `{ direction: 'inherit' }` |
+| direction.ltr     | `{ direction: 'ltr' }`     |
+| direction.rtl     | `{ direction: 'rtl' }`     |

docs/layout/object-fit.mdx

@@ -11,7 +11,7 @@ Define how content/images fits within containers.
 ## Import
 
 ```js title="src/screens/Component.js"
-import { aspect } from "nativeflowcss";
+import { object_fit } from "nativeflowcss";
 ```
 
 ## Properties

docs/layout/overflow.mdx

@@ -18,5 +18,5 @@ import { overflow } from "nativeflowcss";
 
 | Object            | Native properties         |
 | ----------------- | ------------------------- |
-| overflow .visible | `{ overflow: 'visible' }` |
-| overflow .visible | `{ overflow: 'visible' }` |
+| overflow.visible | `{ overflow: 'visible' }` |
+| overflow.hidden  | `{ overflow: 'hidden' }`  |

docs/layout/position.mdx

@@ -1,8 +1,8 @@
 ---
-id: postition
+id: position
 title: Position
 description: Set absolute or relative positioning for elements.
-slug: /postition
+slug: /position
 sidebar_position: 5
 ---
 

docs/shadow/shadow-offset.mdx

@@ -28,12 +28,12 @@ import { shadow } from "nativeflowcss";
       </tr>
     </thead>
     <tbody>
-      {[...Array(25).keys()].map((i) => (
+      {[...Array(5).keys()].map((i) => (
         <React.Fragment key={i + 1}>
           <tr>
-            <td>{`shadow.offset_${i}`}</td>
+            <td>{`shadow.offset_${i + 1}`}</td>
             <td>
-              <code>{`{ shadowOffset: { width: ${i}, height: ${i} } }`}</code>
+              <code>{`{ shadowOffset: { width: ${i + 1}, height: ${i + 1} } }`}</code>
             </td>
           </tr>
         </React.Fragment>

docs/shadow/shadow-opacity.mdx

@@ -28,12 +28,12 @@ import { shadow } from "nativeflowcss";
       </tr>
     </thead>
     <tbody>
-      {[...Array(25).keys()].map((i) => (
+      {[...Array(24).keys()].map((i) => (
         <React.Fragment key={i + 1}>
           <tr>
-            <td>{`shadow.opacity_${i}`}</td>
+            <td>{`shadow.opacity_${i + 1}`}</td>
             <td>
-              <code>{`{ shadowOpacity: ${i} }`}</code>
+              <code>{`{ shadowOpacity: ${i + 1} }`}</code>
             </td>
           </tr>
         </React.Fragment>

docs/shadow/shadow-radius.mdx

@@ -6,8 +6,6 @@ slug: /shadow-radius
 sidebar_position: 2
 ---
 
-import React from "react";
-
 Define the blur radius of the shadow.
 >★ represents it's an iOS-only prop
 
@@ -19,28 +17,18 @@ import { shadow } from "nativeflowcss";
 
 ## Properties
 
-<div class="scrollable-box">
-  <table>
-    <thead>
-      <tr>
-        <th>Object</th>
-        <th>Native Properties</th>
-      </tr>
-    </thead>
-    <tbody>
-      {[...Array(25).keys()].map((i) => (
-        <React.Fragment key={i + 1}>
-          <tr>
-            <td>{`shadow.rounded_${i}`}</td>
-            <td>
-              <code>{`{ shadowRadius: ${i} }`}</code>
-            </td>
-          </tr>
-        </React.Fragment>
-      ))}
-    </tbody>
-  </table>
-</div>
+| Object             | Native Properties         |
+| ------------------ | ------------------------- |
+| shadow.rounded_none | `{ shadowRadius: 0 }`    |
+| shadow.rounded_xs   | `{ shadowRadius: 1 }`    |
+| shadow.rounded_sm   | `{ shadowRadius: 2 }`    |
+| shadow.rounded_md   | `{ shadowRadius: 3 }`    |
+| shadow.rounded_base | `{ shadowRadius: 4 }`    |
+| shadow.rounded_lg   | `{ shadowRadius: 8 }`    |
+| shadow.rounded_xl   | `{ shadowRadius: 12 }`   |
+| shadow.rounded_2xl  | `{ shadowRadius: 16 }`   |
+| shadow.rounded_3xl  | `{ shadowRadius: 24 }`   |
+| shadow.rounded_full | `{ shadowRadius: 9999 }` |
 
 ## Custom Shadow Opacity
 

docs/sizing/height.mdx

@@ -50,4 +50,4 @@ Custom properties are usually rendered using `_(customValue)`
 
 | Object                       | Native Properties              |
 | ---------------------------- | ------------------------------ |
-| h.h_(customValue)  | `{ height: customValue }` |
+| h.w_(customValue)  | `{ height: customValue }` |