@flightlesslabs/dodo-ui 0.21.0 → 0.22.1

package/dist/utils/time/date-creator/createDateFactory/createDateFactory.mdx

@@ -1,5 +1,3 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
 # createDateFactory
 
 A **factory function** that creates a `createDate` utility with an optional custom `dayjs` instance.
@@ -15,13 +13,9 @@ This allows advanced users to:
 
 ## 📦 Import
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import { createDateFactory } from '@flightlesslabs/dodo-ui';
-`}
-/>
+```
 
 ---
 
@@ -29,18 +23,14 @@ import { createDateFactory } from '@flightlesslabs/dodo-ui';
 
 ### Default Factory
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import { createDateFactory } from '@flightlesslabs/dodo-ui';
 
 const { createDate } = createDateFactory();
 
 const now = createDate();
 console.log(now.format());
-`}
-/>
+```
 
 ---
 
@@ -59,10 +49,7 @@ Instead of relying on global `dayjs.extend`, you can:
 
 ### Inject your own configured instance
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
@@ -73,8 +60,7 @@ dayjs.extend(timezone);
 const { createDate } = createDateFactory(dayjs);
 
 const date = createDate("2025-01-01", "YYYY-MM-DD");
-`}
-/>
+```
 
 ---
 
@@ -99,29 +85,20 @@ The factory wraps your `dayjs` instance and preserves:
 
 ## 📥 Returned API
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 {
   createDate: Function,
   dayjs: DayjsInstance
 }
-`}
-/>
-
----
+```
 
 ## 🧪 Example: Multiple Factories
 
-<Source
-  dark
-  language="ts"
-  code={`
+
+```ts
 const factoryA = createDateFactory(dayjsA);
 const factoryB = createDateFactory(dayjsB);
 
 factoryA.createDate("2025-01-01");
 factoryB.createDate("2025-01-01");
-`}
-/>
+```

package/dist/utils/time/timeout/timeout.mdx

@@ -1,5 +1,3 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
 # timeout
 
 A simple utility to delay execution using Promises.
@@ -10,25 +8,19 @@ Useful for **pausing async workflows**, **simulating delays**, or **controlling
 
 ## 📦 Import
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import { timeout } from '@flightlesslabs/dodo-ui';
-`}
-/>
+```
 
 ---
 
 ## 🚀 Basic Usage
 
-<Source
-  dark
-  language="ts"
-  code={`
+
+
+```ts
 await timeout(1000); // waits 1 second
-`}
-/>
+```
 
 ---
 
@@ -36,30 +28,22 @@ await timeout(1000); // waits 1 second
 
 You can optionally pass a value that will be returned after the delay.
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const result = await timeout(500, "done");
 
 console.log(result); // "done"
-`}
-/>
+```
 
 ---
 
 ## ⚙️ API
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 function timeout<T = void>(
   milliseconds: number,
   value?: T
 ): Promise<T>
-`}
-/>
+```
 
 ---
 
@@ -81,13 +65,9 @@ function timeout<T = void>(
 
 If a negative duration is provided, the promise will reject:
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 await timeout(-1); // ❌ throws Error
-`}
-/>
+```
 
 ---
 
@@ -103,10 +83,7 @@ await timeout(-1); // ❌ throws Error
 
 ### Async Flow
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 async function run() {
   console.log("Start");
 
@@ -114,8 +91,7 @@ await timeout(1000);
 
 console.log("End");
 }
-`}
-/>
+```
 
 ---
 
@@ -131,4 +107,8 @@ console.log(data.success); // true
 `}
 />
 
----
+```ts
+const data = await timeout(300, { success: true });
+
+console.log(data.success); // true
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flightlesslabs/dodo-ui",
-  "version": "0.21.0",
+  "version": "0.22.1",
   "scripts": {
     "scss:global": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/global/index.scss dist/styles/global.css\"",
     "scss:components": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/components.scss dist/styles/components.css\"",

package/src/lib/Home.mdx

@@ -1,4 +1,3 @@
-import { Source } from '@storybook/addon-docs/blocks';
 import item from '../../package.json?raw';
 
 <main style={{ textAlign: 'center' }}>
@@ -20,58 +19,48 @@ import item from '../../package.json?raw';
 <br />
 <br />
 
-## Install
+## 🚀 Installation
 
-<Source
-  dark
-  language="bash"
-  code={`
+
+```bash
 pnpm add bits-ui @internationalized/date @flightlesslabs/dodo-ui
-`}
-/>
+```
 
 We are using **bits-ui@{JSON.parse(item).devDependencies['bits-ui']}** internally
 
-## Add css
+## 🎨 Add Styles
 
-Add global css in your `+layout.svelte` file
+Import global styles in your root component. use the root layout (`+layout.svelte`) for SvelteKit.
 
-<Source
-  dark
-  language="js"
-  code={`
+```ts
 import '@flightlesslabs/dodo-ui/styles/global.css';
 import '@flightlesslabs/dodo-ui/styles/components.css';
-`}
-/>
+```
+
+## 🌗 Theme Setup
 
-## Theme
+Wrap your application with the [Theme](?path=/docs/components-layout-theme--docs) component at the root level.
 
-We recommend that the [Theme](?path=/docs/components-layout-theme--docs) component should be imported in the `_layout.svelte` (SvelteKit) or any other root location.
 
-<Source
-  dark
-  language="js"
-  code={`
-import { Theme } '@flightlesslabs/dodo-ui';
+```ts
+import { Theme } from '@flightlesslabs/dodo-ui';
 
- <Theme>
-  // Content will go here
- </Theme>
-`}
-/>
+<Theme global>
+  <!-- Your app -->
+</Theme>
+```
 
-## Use it!
+Recommended: Place this in your root layout (`+layout.svelte`) for SvelteKit.
 
-Lets import [Button](?path=/docs/components-form-button--docs) component. Checkout documentation for [Button](?path=/docs/components-form-button--docs)
+✨ Usage
 
-<Source
-  dark
-  language="js"
-  code={`
+Start by importing components like [Button](?path=/docs/components-form-button--docs).
+
+```ts
 import { Button } '@flightlesslabs/dodo-ui';
-`}
-/>
+
+<Button>Hello</Button>
+```
 
 ## Explore more
 

package/src/lib/components/Form/Button/Button.stories.svelte

@@ -9,6 +9,13 @@
   import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
   import Theme from '$lib/components/Layout/Theme/Theme.svelte';
 
+  const description = `
+ A flexible Button component based on bits-ui [button](https://bits-ui.com/docs/components/button).
+ \`\`\`ts
+ import { Button } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+`;
+
   // ------------------------------
   // Storybook ArgTypes
   // ------------------------------
@@ -95,6 +102,13 @@
     component: Button,
     tags: ['autodocs'],
     argTypes: storyButtonArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 
@@ -102,9 +116,17 @@
 <!-- Stories -->
 <!-- ------------------------------ -->
 
-<Story name="Primary">Click me!</Story>
+<Story name="Default">Click me!</Story>
 
-<Story name="Neutral" args={{ color: 'neutral', variant: 'text', outline: true }}>Click me!</Story>
+<Story
+  name="Link Button"
+  args={{
+    href: 'https://www.w3schools.com/tags/tag_a.asp',
+    target: '_blank',
+  }}
+>
+  Click me!
+</Story>
 
 <Story
   name="OnClick (Actions)"
@@ -119,34 +141,22 @@
   Click me
 </Story>
 
-<Story name="Outline" args={{ outline: true, variant: 'text' }}>Click me!</Story>
+<Story name="Color" args={{ color: 'safe' }}>Click me</Story>
 
-<Story name="Large Button" args={{ size: 'large' }}>Large</Story>
+<Story name="Text" args={{ variant: 'text' }}>Click me!</Story>
 
-<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
+<Story name="Outline" args={{ variant: 'text', outline: true }}>Click me!</Story>
 
-<Story name="Safe" args={{ color: 'safe' }}>Safe</Story>
+<Story name="Size" args={{ size: 'large' }}>Click me!</Story>
 
-<Story name="Danger / Outline" args={{ color: 'danger', variant: 'text', outline: true }}>
-  Danger
-</Story>
+<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
 
-<Story name="Submit Button" args={{ type: 'submit' }}>Submit Form</Story>
+<Story name="Submit Button" args={{ type: 'submit' }}>Click me!</Story>
 
 <Story name="Full Width" args={{ fullWidth: true }}>Click me!</Story>
 
 <Story
-  name="Link Button"
-  args={{
-    href: 'https://www.w3schools.com/tags/tag_a.asp',
-    target: '_blank',
-  }}
->
-  External Link
-</Story>
-
-<Story
-  name="Icon Only (A11y Example)"
+  name="Compact"
   args={{
     compact: true,
     'aria-label': 'Add item',
@@ -157,12 +167,12 @@
 
 <Story name="Light Theme" asChild>
   <Theme type="light">
-    <Button>Hello</Button>
+    <Button>Click me!</Button>
   </Theme>
 </Story>
 
 <Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
   <Theme type="dark">
-    <Button>Hello</Button>
+    <Button>Click me!</Button>
   </Theme>
 </Story>

package/src/lib/components/Form/Button/Button.svelte

@@ -46,24 +46,8 @@
    */
   export type ButtonAsButtonProps = ButtonBaseProps & ButtonAsButtonPropsBase;
 
-  /**
-   * Button component props (anchor variant).
-   *
-   * Renders an <a> element when `href` is provided.
-   * Inherits all native HTML anchor attributes, except `type`.
-   */
   export type ButtonAsAnchorProps = ButtonBaseProps & ButtonAsAnchorPropsBase;
 
-  /**
-   * Button component props.
-   *
-   * Renders a semantic <button> by default, or an <a> element when `href` is provided.
-   * Supports design-system tokens for size, color, variant, and roundness.
-   *
-   * This type is a discriminated union:
-   * - When `href` is present, anchor props are enabled and button-only props are disabled.
-   * - When `href` is absent, button props are enabled and anchor-only props are disabled.
-   */
   export type ButtonProps = ButtonAsButtonProps | ButtonAsAnchorProps;
 </script>
 
@@ -77,12 +61,6 @@
   import type { ButtonAsButtonProps as ButtonAsButtonPropsBase } from './ButtonAsButton.svelte';
   import ButtonAsButton from './ButtonAsButton.svelte';
 
-  /**
-   * Button component runtime props.
-   *
-   * These props are destructured from `$props()` and mapped to the underlying
-   * Bits UI Button root component, with semantic rendering based on `href`.
-   */
   let {
     size = 'normal',
     color = 'primary',
@@ -100,9 +78,6 @@
     ...restProps
   }: ButtonProps = $props();
 
-  /**
-   * Computed class list for the Button component.
-   */
   const classes = $derived(
     [
       'dodo-ui-Button',

package/src/lib/components/Form/Checkbox/Checkbox.stories.svelte

@@ -9,6 +9,14 @@
   import Theme from '$lib/components/Layout/Theme/Theme.svelte';
   import { componentVariantOptions } from '$lib/attributes/variant.js';
 
+  const description = `
+ A simple Checkbox component based on bits-ui [checkbox](https://bits-ui.com/docs/components/checkbox).
+
+ \`\`\`ts
+ import { Checkbox } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+`;
+
   /**
    * Storybook controls for Checkbox
    */
@@ -62,6 +70,13 @@
     component: Checkbox,
     tags: ['autodocs'],
     argTypes: CheckboxArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 
   let myValue = $state<boolean>(true);
@@ -73,18 +88,10 @@
 
 <Story name="Default" args={{ id: 'Default' }}>Check this text</Story>
 
-<Story name="Checked" asChild>
+<Story name="Controlled" asChild>
   <Checkbox id="Checked" bind:checked={myValue}>Check this text</Checkbox>
 </Story>
 
-<Story name="Solid" args={{ id: 'Solid', variant: 'solid', checked: true }}>Check this text</Story>
-
-<Story name="NoOutline" args={{ id: 'Outline', outline: false }}>Check this text</Story>
-
-<Story name="Indeterminate" args={{ id: 'indeterminate', indeterminate: true }}>
-  Check this text
-</Story>
-
 <Story
   name="OnChange (Actions)"
   args={{
@@ -98,17 +105,19 @@
   Check this text
 </Story>
 
-<Story name="Primary" args={{ id: 'Primary', color: 'primary' }}>Check this text</Story>
+<Story name="Indeterminate" args={{ id: 'indeterminate', indeterminate: true }}>
+  Check this text
+</Story>
 
-<Story name="Large" args={{ id: 'Large', size: 'large' }}>Check this text</Story>
+<Story name="Color" args={{ id: 'Safe', color: 'safe' }}>Check this text</Story>
 
-<Story name="Disabled" args={{ disabled: true }}>Check this text</Story>
+<Story name="Solid" args={{ id: 'Solid', variant: 'solid', checked: true }}>Check this text</Story>
 
-<Story name="Safe" args={{ id: 'Safe', color: 'safe' }}>Check this text</Story>
+<Story name="NoOutline" args={{ id: 'Outline', outline: false }}>Check this text</Story>
 
-<Story name="Danger / Outline" args={{ id: 'Danger-Outline', color: 'danger' }}>
-  Check this text
-</Story>
+<Story name="Size" args={{ id: 'Size', size: 'large' }}>Check this text</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>Check this text</Story>
 
 <Story name="Light Theme" asChild>
   <Theme type="light">

package/src/lib/components/Form/Checkbox/Checkbox.svelte

@@ -53,9 +53,6 @@
     ...restProps
   }: CheckboxProps = $props();
 
-  /**
-   * Computed class list
-   */
   const classes = $derived(
     [
       'dodo-ui-Checkbox',

package/src/lib/components/Form/DatePicker/DatePicker.stories.svelte

@@ -9,6 +9,15 @@
   import { CalendarDate, type DateValue } from '@internationalized/date';
   import Theme from '$lib/components/Layout/Theme/Theme.svelte';
 
+  const description = `
+ A sleek, plug and play Date Picker based on bits-ui [date-picker](https://bits-ui.com/docs/components/date-picker).
+ \`\`\`ts
+ import { DatePicker } from '@flightlesslabs/dodo-ui';
+
+import { CalendarDate, type DateValue } from '@internationalized/date';
+ \`\`\`
+`;
+
   // ------------------------------
   // Storybook ArgTypes
   // ------------------------------
@@ -86,6 +95,14 @@
     component: DatePicker,
     tags: ['autodocs'],
     argTypes: storyDatePickerArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+        story: { height: '420px' },
+      },
+    },
   });
 
   let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
@@ -97,11 +114,18 @@
 
 <Story name="Default" />
 
-<!-- let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7)); [docs](https://bits-ui.com/docs/components/date-picker) -->
-<Story name="Selected" asChild>
+<Story name="Controlled" asChild>
   <DatePicker bind:value={myValue} />
 </Story>
 
+<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
+
+<Story name="Date Format" args={{ dateFormat: 'mm/dd/yyyy' }} />
+
+<Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
+
+<Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
+
 <Story name="Light Theme" asChild>
   <Theme type="light">
     <DatePicker />

package/src/lib/components/Form/DatePicker/DatePickerPopup/DatePickerPopup.svelte

@@ -18,7 +18,7 @@
     variant = 'text',
     shadow = 2,
     active = false,
-    sideOffset = 6,
+    sideOffset = 10,
     align = 'end',
     ...restProps
   }: DatePickerPopupProps = $props();

package/src/lib/components/Form/FormField/FormField.stories.svelte

@@ -5,6 +5,13 @@
   import type { ArgTypes } from 'storybook/internal/csf';
   import TextInput from '../TextInput/TextInput.svelte';
 
+  const description = `
+ a form control for input tags and more.
+ \`\`\`ts
+ import { FormField } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+`;
+
   /**
    * Storybook controls for FormField
    */
@@ -22,6 +29,13 @@
     component: FormField,
     tags: ['autodocs'],
     argTypes: FormFieldArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 
@@ -29,15 +43,6 @@
 <!-- Stories -->
 <!-- ------------------------------ -->
 
-<Story name="Basic" args={{ label: 'Name:', for: 'name' }}>
+<Story name="Defualt" args={{ label: 'Name:', for: 'name' }}>
   <TextInput placeholder="Type something…" name="name" />
 </Story>
-
-<Story name="CustomLabel" asChild>
-  <FormField for="name2">
-    {#snippet label()}
-      Custom Label
-    {/snippet}
-    <TextInput placeholder="Type something…" name="name2" />
-  </FormField>
-</Story>

package/src/lib/components/Form/FormField/FormField.svelte

@@ -23,9 +23,6 @@
 <script lang="ts">
   let { class: className = '', for: htmlFor, children, label }: FormFieldProps = $props();
 
-  /**
-   * Computed class list
-   */
   const classes = $derived(['dodo-ui-FormField', className].filter(Boolean));
 </script>