chore: alpha 0.4.0-x

README.md

@@ -18,7 +18,7 @@ Website: [Oku Website](https://oku-ui.com)
 
 Please read our [contributing guide](https://github.com/oku-ui/primitives/blob/master/CONTRIBUTING.md)
 
-# TODO Components - 8/28
+# TODO Components - 17/28
 
 Enter the component you want most in the components, leave the emojis and follow.
 
@@ -27,33 +27,33 @@ Enter the component you want most in the components, leave the emojis and follow
 | Component | Description | Status | Docs |
 | --- | --- | --- | --- |
 | [Accordion](https://github.com/oku-ui/primitives/issues/3) | A group of collapsible panels | 🚧 In Progress | -  |
-| [Alert Dialog](https://github.com/oku-ui/primitives/issues/4) | A modal dialog that interrupts the user's workflow to get a response | Not Started | -  |
+| [Alert Dialog](https://github.com/oku-ui/primitives/issues/4) | A modal dialog that interrupts the user's workflow to get a response | 🚧 In Progress  | -  |
 | [Aspect Ratio](https://oku-ui.com/primitives/components/aspect-ratio) | <span><a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio "><img src="https://img.shields.io/npm/v/@oku-ui/aspect-ratio.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio"><img src="https://img.shields.io/npm/dm/@oku-ui/aspect-ratio.svg?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a> </span> | <span> <a href="https://oku-ui.com/primitives/components/aspect-ratio"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 | [Avatar](https://oku-ui.com/primitives/components/avatar) | <span><a href="https://www.npmjs.com/package/@oku-ui/avatar "><img src="https://img.shields.io/npm/v/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/avatar"><img src="https://img.shields.io/npm/dm/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"></a></span> | <span> <a href="https://oku-ui.com/primitives/components/avatar"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
 | [Checkbox](https://oku-ui.com/primitives/components/checkbox) | <span><a href="https://www.npmjs.com/package/@oku-ui/checkbox "><img src="https://img.shields.io/npm/v/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/checkbox"> <img src="https://img.shields.io/npm/dm/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/checkbox"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
 | [Collapsible](https://oku-ui.com/primitives/components/collapsible) | <span><a href="https://www.npmjs.com/package/@oku-ui/collapsible "><img src="https://img.shields.io/npm/v/@oku-ui/collapsible?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/collapsible"> <img src="https://img.shields.io/npm/dm/@oku-ui/collapsible?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/collapsible"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
 | [Context Menu](https://github.com/oku-ui/primitives/issues/8) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
-| [Dialog](https://github.com/oku-ui/primitives/issues/9) | A modal dialog that interrupts the user's workflow to get a response | Not Started | -  |
+| [Dialog](https://github.com/oku-ui/primitives/issues/9) | A modal dialog that interrupts the user's workflow to get a response |  🚧 In Progress  | -  |
 | [Dropdown Menu](https://github.com/oku-ui/primitives/issues/10) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
 | [Form](https://github.com/oku-ui/primitives/issues/11) | A group of form controls | Not Started | -  |
-| [Hover Card](https://github.com/oku-ui/primitives/issues/12) | A card that appears when a user hovers over an element | Not Started | -  |
+| [Hover Card](https://github.com/oku-ui/primitives/issues/12) | A card that appears when a user hovers over an element |  🚧 In Progress  | -  |
 | [Label](https://oku-ui.com/primitives/components/label) | <span><a href="https://www.npmjs.com/package/@oku-ui/label "><img src="https://img.shields.io/npm/v/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/label"> <img src="https://img.shields.io/npm/dm/@oku-ui/label?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/label"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> |
 | [Menubar](https://github.com/oku-ui/primitives/issues/13) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
 | [Navigation Menu](https://github.com/oku-ui/primitives/issues/14) | A menu that appears when a user interacts with an element's trigger | Not Started | -  |
-| [Popover](https://github.com/oku-ui/primitives/issues/15) | A card that appears when a user hovers over an element | Not Started | -  |
+| [Popover](https://oku-ui.com/primitives/components/popover) | <span><a href="https://www.npmjs.com/package/@oku-ui/popover "><img src="https://img.shields.io/npm/v/@oku-ui/popover?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/popover"> <img src="https://img.shields.io/npm/dm/@oku-ui/popover?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/popover"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 | [Progress](https://oku-ui.com/primitives/components/progress) | <span><a href="https://www.npmjs.com/package/@oku-ui/progress "><img src="https://img.shields.io/npm/v/@oku-ui/progress?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/progress"> <img src="https://img.shields.io/npm/dm/@oku-ui/progress?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/progress"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
-| [Radio Group](https://github.com/oku-ui/primitives/issues/17) | A group of radio buttons | 🚧 In Progress | -  |
-| [Scroll Area](https://github.com/oku-ui/primitives/issues/18) | A scrollable area | Not Started | -  |
+| [Radio Group](https://oku-ui.com/primitives/components/radio-group) | <span><a href="https://www.npmjs.com/package/@oku-ui/radio-group "><img src="https://img.shields.io/npm/v/@oku-ui/radio-group?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/radio-group"> <img src="https://img.shields.io/npm/dm/@oku-ui/radio-group?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/radio-group"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Scroll Area](https://github.com/oku-ui/primitives/issues/18) | A scrollable area | 🚧 In Progress  | -  |
 | [Select](https://github.com/oku-ui/primitives/issues/19) | A control that allows users to select one or more items from a list of options | 🚧 In Progress | -  |
 | [Separator](https://oku-ui.com/primitives/components/separator) | <span><a href="https://www.npmjs.com/package/@oku-ui/separator "><img src="https://img.shields.io/npm/v/@oku-ui/separator?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/separator"> <img src="https://img.shields.io/npm/dm/@oku-ui/separator?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/separator"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
-| [Slider](https://github.com/oku-ui/primitives/issues/21) | A control that allows users to input numeric values in a given range | 🚧 In Progress | -  |
-| [Switch](https://github.com/oku-ui/primitives/issues/22) | A control that allows users to switch between two mutually exclusive options | 🚧 In Progress | -  |
-| [Tabs](https://github.com/oku-ui/primitives/issues/23) | A group of tabs | 🚧 In Progress | -  |
-| [Toast](https://github.com/oku-ui/primitives/issues/24) | A non-modal dialog that appears and disappears from the screen |  | -  |
+| [Slider](https://oku-ui.com/primitives/components/slider) | <span><a href="https://www.npmjs.com/package/@oku-ui/slider "><img src="https://img.shields.io/npm/v/@oku-ui/slider?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/slider"> <img src="https://img.shields.io/npm/dm/@oku-ui/slider?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/slider"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Switch](https://oku-ui.com/primitives/components/switch) | <span><a href="https://www.npmjs.com/package/@oku-ui/switch "><img src="https://img.shields.io/npm/v/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/switch"> <img src="https://img.shields.io/npm/dm/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/slider"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Tabs](https://oku-ui.com/primitives/components/tabs) | <span><a href="https://www.npmjs.com/package/@oku-ui/tabs "><img src="https://img.shields.io/npm/v/@oku-ui/tabs?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/tabs"> <img src="https://img.shields.io/npm/dm/@oku-ui/tabs?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/slider"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Toast](https://oku-ui.com/primitives/components/toast) | <span><a href="https://www.npmjs.com/package/@oku-ui/toast "><img src="https://img.shields.io/npm/v/@oku-ui/toast?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toast"> <img src="https://img.shields.io/npm/dm/@oku-ui/toast?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/toast"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 | [Toggle](https://oku-ui.com/primitives/components/toggle) | <span><a href="https://www.npmjs.com/package/@oku-ui/toggle "><img src="https://img.shields.io/npm/v/@oku-ui/toggle?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toggle"> <img src="https://img.shields.io/npm/dm/@oku-ui/toggle?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/toggle"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
-| [Toggle Group](https://github.com/oku-ui/primitives/issues/26) | A group of toggle buttons | 🚧 In Progress | -  |
-| [Toolbar](https://github.com/oku-ui/primitives/issues/27) | A group of toolbar buttons | 🚧 In Progress | -  |
-| [Tooltip](https://github.com/oku-ui/primitives/issues/28) | A card that appears when a user hovers over an element | Not Started | -  |
+| [Toggle Group](https://oku-ui.com/primitives/components/toggle-group) | <span><a href="https://www.npmjs.com/package/@oku-ui/toggle-group "><img src="https://img.shields.io/npm/v/@oku-ui/toggle-group?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toggle-group"> <img src="https://img.shields.io/npm/dm/@oku-ui/toggle-group?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/slider"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Toolbar](https://oku-ui.com/primitives/components/toolbar) | <span><a href="https://www.npmjs.com/package/@oku-ui/toolbar "><img src="https://img.shields.io/npm/v/@oku-ui/toolbar?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/toolbar"> <img src="https://img.shields.io/npm/dm/@oku-ui/switch?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/toolbar"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
+| [Tooltip](https://oku-ui.com/primitives/components/tooltip) | <span><a href="https://www.npmjs.com/package/@oku-ui/tooltip "><img src="https://img.shields.io/npm/v/@oku-ui/tooltip?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/tooltip"> <img src="https://img.shields.io/npm/dm/@oku-ui/tooltip?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/tooltip"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 [Primitives](https://oku-ui.com/primitives) | <span><a href="https://www.npmjs.com/package/@oku-ui/primitives "><img src="https://img.shields.io/npm/v/@oku-ui/primitives?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/primitives"> <img src="https://img.shields.io/npm/dm/@oku-ui/primitives?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/primitives"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span> |
 
 ## Community

packages/components/arrow/README.md

@@ -1,4 +1,6 @@
-# `arrow`
+# Arrow
+Arrow component is a primitive component that can be used to create arrows.
+
 
 <span><a href="https://www.npmjs.com/package/@oku-ui/arrow "><img src="https://img.shields.io/npm/v/@oku-ui/arrow?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/arrow"> <img src="https://img.shields.io/npm/dm/@oku-ui/arrow?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/arrow"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
 

packages/components/arrow/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oku-ui/arrow",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.4.0-alpha.9",
   "license": "MIT",
   "source": "src/index.ts",
   "funding": "https://github.com/sponsors/productdevbook",

packages/components/aspect-ratio/README.md

@@ -1,4 +1,8 @@
-# `aspect-ratio`
+# Aspect Ratio
+Displays content within a desired ratio.
+
+![@oku-ui/aspect-ratio](./.github/assets/oku-aspect-ratio.jpg)
+
 
 <span><a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio "><img src="https://img.shields.io/npm/v/@oku-ui/aspect-ratio?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/aspect-ratio"> <img src="https://img.shields.io/npm/dm/@oku-ui/aspect-ratio?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/aspect-ratio"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
 
@@ -8,6 +12,4 @@
 $ pnpm add @oku-ui/aspect-ratio
 ```
 
-## Usage
-
-soon docs
+[Documentation](https://oku-ui.com/primitives/components/aspect-ratio)

packages/components/aspect-ratio/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oku-ui/aspect-ratio",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.4.0-alpha.9",
   "license": "MIT",
   "source": "src/index.ts",
   "funding": "https://github.com/sponsors/productdevbook",

packages/components/avatar/README.md

@@ -1,4 +1,7 @@
-# `avatar`
+# Avatar
+An image element with a fallback for representing the user.
+
+![@oku-ui/avatar](./.github/assets/oku-avatar.jpg)
 
 <span><a href="https://www.npmjs.com/package/@oku-ui/avatar "><img src="https://img.shields.io/npm/v/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/avatar"> <img src="https://img.shields.io/npm/dm/@oku-ui/avatar?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/avatar"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
 
@@ -8,6 +11,4 @@
 $ pnpm add @oku-ui/avatar
 ```
 
-## Usage
-
-soon docs
+[Documentation](https://oku-ui.com/primitives/components/avatar)

packages/components/avatar/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oku-ui/avatar",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.4.0-alpha.9",
   "license": "MIT",
   "source": "src/index.ts",
   "funding": "https://github.com/sponsors/productdevbook",

packages/components/checkbox/README.md

@@ -1,4 +1,8 @@
-# `@oku-ui/checkbox`
+# Checkbox
+A control that allows the user to toggle between checked and not checked.
+
+
+![@oku-ui/checkbox](./.github/assets/oku-checkbox.jpg)
 
 <span><a href="https://www.npmjs.com/package/@oku-ui/checkbox "><img src="https://img.shields.io/npm/v/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/checkbox"> <img src="https://img.shields.io/npm/dm/@oku-ui/checkbox?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/checkbox"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
 
@@ -8,5 +12,4 @@
 $ pnpm add @oku-ui/checkbox
 ```
 
-## Usage
-...
+[Documentation](https://oku-ui.com/primitives/components/checkbox)

packages/components/checkbox/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oku-ui/checkbox",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.4.0-alpha.9",
   "license": "MIT",
   "source": "src/index.ts",
   "funding": "https://github.com/sponsors/productdevbook",

packages/components/collapsible/README.md

@@ -1,4 +1,7 @@
-# `@oku-ui/collapsible`
+# Collapsible
+An interactive component which expands/collapses a panel.
+
+![@oku-ui/collapsible](./.github/assets/oku-collapsible.jpg)
 
 <span><a href="https://www.npmjs.com/package/@oku-ui/collapsible "><img src="https://img.shields.io/npm/v/@oku-ui/collapsible?style=flat&colorA=18181B&colorB=28CF8D" alt="Version"></a> </span> | <span> <a href="https://www.npmjs.com/package/@oku-ui/collapsible"> <img src="https://img.shields.io/npm/dm/@oku-ui/collapsible?style=flat&colorA=18181B&colorB=28CF8D" alt="Downloads"> </a> </span> | <span> <a href="https://oku-ui.com/primitives/components/collapsible"><img src="https://img.shields.io/badge/Open%20Documentation-18181B" alt="Website"></a> </span>
 
@@ -8,5 +11,4 @@
 $ pnpm add @oku-ui/collapsible
 ```
 
-## Usage
-...
+[Documentation](https://oku-ui.com/primitives/components/collapsible)

packages/components/collapsible/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oku-ui/collapsible",
   "type": "module",
-  "version": "0.2.4",
+  "version": "0.4.0-alpha.9",
   "license": "MIT",
   "source": "src/index.ts",
   "funding": "https://github.com/sponsors/productdevbook",