@flightlesslabs/dodo-ui 0.21.0 → 0.22.1

package/dist/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/dist/components/Form/Button/Button.stories.svelte

@@ -9,6 +9,13 @@
   import { componentRoundnessOptions } from '../../../attributes/roundness.js';
   import Theme from '../../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/dist/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/dist/components/Form/Button/Button.svelte.d.ts

@@ -33,23 +33,7 @@ interface ButtonBaseProps {
  * Inherits all native HTML button attributes.
  */
 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;
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentColor } from '../../../attributes/color.js';

package/dist/components/Form/Checkbox/Checkbox.stories.svelte

@@ -9,6 +9,14 @@
   import Theme from '../../Layout/Theme/Theme.svelte';
   import { componentVariantOptions } from '../../../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/dist/components/Form/Checkbox/Checkbox.svelte

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

package/dist/components/Form/DatePicker/DatePicker.stories.svelte

@@ -9,6 +9,15 @@
   import { CalendarDate, type DateValue } from '@internationalized/date';
   import Theme from '../../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/dist/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/dist/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/dist/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>
 

package/dist/components/Form/InputEnclosure/InputEnclosure.stories.svelte

@@ -8,6 +8,17 @@
   import { componentRoundnessOptions } from '../../../attributes/roundness.js';
   import Theme from '../../Layout/Theme/Theme.svelte';
 
+  const description = `
+  An extensive wrappwer for input boxes.
+
+ \`\`\`ts
+ import { InputEnclosure } from '@flightlesslabs/dodo-ui';
+
+ // apply 'InputBox' class to the input
+  <input class="InputBox" />
+ \`\`\`
+ `;
+
   // ------------------------------
   // Storybook ArgTypes
   // ------------------------------
@@ -80,6 +91,13 @@
     component: InputEnclosure,
     tags: ['autodocs'],
     argTypes: storyInputEnclosureArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 
@@ -87,7 +105,7 @@
 <!-- Stories -->
 <!-- ------------------------------ -->
 
-<Story name="Default (Outlined)">
+<Story name="Default">
   <input placeholder="Type something…" class="InputBox" />
 </Story>
 
@@ -111,14 +129,10 @@
   <input placeholder="Large input…" class="InputBox" />
 </Story>
 
-<Story name="Pill Shape" args={{ roundness: 'pill' }}>
-  <input placeholder="Pill shaped input…" class="InputBox" />
-</Story>
-
 <Story name="With Before (Icon Prefix)" asChild>
   <InputEnclosure>
     {#snippet before()}
-      <span style="color: #888;">🔍</span>
+      <span style="color: #888; padding-left: 8px">🔍</span>
     {/snippet}
 
     <input placeholder="Search…" class="InputBox" />
@@ -128,7 +142,7 @@
 <Story name="With After (Suffix Text)" asChild>
   <InputEnclosure>
     {#snippet after()}
-      <span style="color: #888;">.com</span>
+      <span style="color: #888; padding-right: 8px">.com</span>
     {/snippet}
 
     <input placeholder="Website" class="InputBox" />

package/dist/components/Form/InputEnclosure/InputEnclosure.svelte

@@ -2,12 +2,6 @@
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
-  /**
-   * Shared base props for the InputEnclosure component.
-   *
-   * These props apply to the root <div> wrapper that visually encloses
-   * form controls such as inputs, selects, or custom fields.
-   */
   interface InputEnclosureBaseProps {
     /** InputEnclosure contents (typically an input or control slot) */
     children?: Snippet;
@@ -62,12 +56,6 @@
     after?: Snippet;
   }
 
-  /**
-   * InputEnclosure component props.
-   *
-   * Renders a semantic <div> wrapper around form controls.
-   * Inherits all native HTML div attributes (e.g. id, style, data-*, aria-*).
-   */
   export type InputEnclosureProps = InputEnclosureBaseProps & HTMLAttributes<HTMLDivElement>;
 </script>
 
@@ -76,12 +64,6 @@
   import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
   import InputAffix from './InputAffix.svelte';
 
-  /**
-   * InputEnclosure component runtime props.
-   *
-   * These props are destructured from `$props()` and mapped to
-   * CSS utility classes that control visual appearance.
-   */
   let {
     children,
     size = 'normal',
@@ -97,9 +79,6 @@
     ...restProps
   }: InputEnclosureProps = $props();
 
-  /**
-   * Computed class list for the InputEnclosure component.
-   */
   const classes = $derived(
     [
       'dodo-ui-InputEnclosure',

package/dist/components/Form/InputEnclosure/InputEnclosure.svelte.d.ts

@@ -1,11 +1,5 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';
-/**
- * Shared base props for the InputEnclosure component.
- *
- * These props apply to the root <div> wrapper that visually encloses
- * form controls such as inputs, selects, or custom fields.
- */
 interface InputEnclosureBaseProps {
     /** InputEnclosure contents (typically an input or control slot) */
     children?: Snippet;
@@ -49,12 +43,6 @@ interface InputEnclosureBaseProps {
      */
     after?: Snippet;
 }
-/**
- * InputEnclosure component props.
- *
- * Renders a semantic <div> wrapper around form controls.
- * Inherits all native HTML div attributes (e.g. id, style, data-*, aria-*).
- */
 export type InputEnclosureProps = InputEnclosureBaseProps & HTMLAttributes<HTMLDivElement>;
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';

package/dist/components/Form/Select/Select.stories.svelte

@@ -8,6 +8,14 @@
   import { componentRoundnessOptions } from '../../../attributes/roundness.js';
   import Theme from '../../Layout/Theme/Theme.svelte';
 
+  const description = `
+ A searchable Select component based on bits-ui [combobox](https://bits-ui.com/docs/components/combobox).
+
+ \`\`\`ts
+ import { Select } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+`;
+
   const options = [
     { value: 'one', label: 'One' },
     { value: 'two', label: 'Two' },
@@ -118,6 +126,13 @@
     args: {
       options,
     },
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 
   let myValue = $state<string | undefined>(options[1].value);
@@ -131,12 +146,10 @@
 
 <Story name="Searchable" args={{ searchable: true, placeholder: 'Search a number' }} />
 
-<Story name="Selected" asChild>
+<Story name="Controlled" asChild>
   <Select {options} bind:value={myValue} />
 </Story>
 
-<Story name="Disabled" args={{ placeholder: 'Select an option', disabled: true }} />
-
 <Story
   name="OnChange (Actions)"
   args={{
@@ -147,6 +160,8 @@
   }}
 />
 
+<Story name="Disabled" args={{ placeholder: 'Select an option', disabled: true }} />
+
 <Story name="Light Theme" asChild>
   <Theme type="light">
     <Select {options} />

package/dist/components/Form/Select/Select.svelte

@@ -6,12 +6,6 @@
     label: string;
   };
 
-  /**
-   * Shared base props for the Select component.
-   *
-   * These props control the visual wrapper (InputEnclosure) and
-   * common text-input behaviors.
-   */
   type BaseProps = Omit<ComboboxSingleRootPropsWithoutHTML, 'type'> &
     Omit<SelectSingleRootPropsWithoutHTML, 'type'>;