@flightlesslabs/dodo-ui 0.22.0 → 0.22.1

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>
 

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

@@ -8,6 +8,17 @@
   import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
   import Theme from '$lib/components/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/src/lib/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 '$lib/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/src/lib/components/Form/Select/Select.stories.svelte

@@ -8,6 +8,14 @@
   import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
   import Theme from '$lib/components/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/src/lib/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'>;
 

package/src/lib/components/Form/Switch/Switch.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 Switch/toggle component based on bits-ui [switch](https://bits-ui.com/docs/components/switch).
+
+ \`\`\`ts
+ import { Switch } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+`;
+
   /**
    * Storybook controls for Switch
    */
@@ -62,6 +70,13 @@
     component: Switch,
     tags: ['autodocs'],
     argTypes: SwitchArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 
   let myValue = $state<boolean>(true);
@@ -73,7 +88,7 @@
 
 <Story name="Default" args={{ id: 'Default' }}>Check this text</Story>
 
-<Story name="Checked" asChild>
+<Story name="Controlled" asChild>
   <Switch id="Checked" bind:checked={myValue}>Check this text</Switch>
 </Story>
 
@@ -94,18 +109,12 @@
   Check this text
 </Story>
 
-<Story name="Primary" args={{ id: 'Primary', color: 'primary' }}>Check this text</Story>
+<Story name="Color" args={{ id: 'Safe', color: 'safe' }}>Check this text</Story>
 
 <Story name="Large" args={{ id: 'Large', size: 'large' }}>Check this text</Story>
 
 <Story name="Disabled" args={{ disabled: true }}>Check this text</Story>
 
-<Story name="Safe" args={{ id: 'Safe', color: 'safe' }}>Check this text</Story>
-
-<Story name="Danger / Outline" args={{ id: 'Danger-Outline', color: 'danger' }}>
-  Check this text
-</Story>
-
 <Story name="Light Theme" asChild>
   <Theme type="light">
     <Switch id="Light_Theme">Check this text</Switch>

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

@@ -8,6 +8,14 @@
   import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
   import Theme from '$lib/components/Layout/Theme/Theme.svelte';
 
+  const description = `
+  Input box with powers ⚡
+
+ \`\`\`ts
+ import { TextInput } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+`;
+
   // ------------------------------
   // Storybook ArgTypes
   // ------------------------------
@@ -99,6 +107,13 @@
     component: TextInput,
     tags: ['autodocs'],
     argTypes: storyTextInputArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 
@@ -112,16 +127,16 @@
 
 <Story name="Error" args={{ placeholder: 'Error state…', error: true }} />
 
-<Story name="Disabled" args={{ placeholder: 'Disabled state…', disabled: true }} />
-
 <Story name="Large" args={{ placeholder: 'Type something…', size: 'large' }} />
 
 <Story name="Pill Shape" args={{ placeholder: 'Type something…', roundness: 'pill' }} />
 
+<Story name="Disabled" args={{ placeholder: 'Disabled state…', disabled: true }} />
+
 <Story name="With Before (Prefix Icon)" asChild>
   <TextInput placeholder="Search…">
     {#snippet before()}
-      <span style="color: #888;">🔍</span>
+      <span style="color: #888; padding-left: 8px">🔍</span>
     {/snippet}
   </TextInput>
 </Story>
@@ -129,19 +144,7 @@
 <Story name="With After (Suffix Text)" asChild>
   <TextInput placeholder="Website">
     {#snippet after()}
-      <span style="color: #888;">.com</span>
-    {/snippet}
-  </TextInput>
-</Story>
-
-<Story name="With Before + After" asChild>
-  <TextInput placeholder="Amount">
-    {#snippet before()}
-      <span style="opacity: 0.6;">$</span>
-    {/snippet}
-
-    {#snippet after()}
-      <span style="opacity: 0.6;">USD</span>
+      <span style="color: #888; padding-right: 8px">.com</span>
     {/snippet}
   </TextInput>
 </Story>

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

@@ -112,9 +112,6 @@
     onblur?.(event as TextInputFocusEvent);
   }
 
-  /**
-   * Computed class list for the InputEnclosure component.
-   */
   const classes = $derived(['dodo-ui-TextInput', className].filter(Boolean));
 </script>
 

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

@@ -8,6 +8,14 @@
   import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
   import Theme from '$lib/components/Layout/Theme/Theme.svelte';
 
+  const description = `
+ A flexible small sized button component based on bits-ui [button](https://bits-ui.com/docs/components/button).
+
+ \`\`\`ts
+ import { UtilityButton } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+`;
+
   // ------------------------------
   // Storybook ArgTypes
   // ------------------------------
@@ -83,6 +91,13 @@
     component: UtilityButton,
     tags: ['autodocs'],
     argTypes: storyUtilityButtonArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 
@@ -90,65 +105,59 @@
 <!-- Stories -->
 <!-- ------------------------------ -->
 
-<!-- A Button to be used with other components. -->
-<Story name="Primary">Click me!</Story>
+<Story name="Default">Click me!</Story>
 
-<Story name="Neutral" args={{ color: 'neutral', 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)"
   args={{
     onclick: (e: Event) => {
       const target = e.target as HTMLButtonElement;
-      alert('UtilityButton Clicked');
-      console.log('UtilityButton Clicked', target);
+      alert('Button Clicked');
+      console.log('Button Clicked', target);
     },
   }}
 >
   Click me
 </Story>
 
+<Story name="Color" args={{ color: 'safe' }}>Click me</Story>
+
 <Story name="Outline" args={{ outline: true }}>Click me!</Story>
 
-<Story name="Large UtilityButton" args={{ size: 'large' }}>Large</Story>
+<Story name="Size" args={{ size: 'large' }}>Click me!</Story>
 
 <Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
 
-<Story name="Safe" args={{ color: 'safe' }}>Safe</Story>
+<Story name="Submit Button" args={{ type: 'submit' }}>Click me!</Story>
 
-<Story name="Danger / Outline" args={{ color: 'danger', outline: true }}>Danger</Story>
+<Story
+  name="Compact"
+  args={{
+    compact: true,
+    'aria-label': 'Add item',
+  }}
+>
+  +
+</Story>
 
 <Story name="Light Theme" asChild>
   <Theme type="light">
-    <UtilityButton>Hello</UtilityButton>
+    <UtilityButton>Click me!</UtilityButton>
   </Theme>
 </Story>
 
 <Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
   <Theme type="dark">
-    <UtilityButton>Hello</UtilityButton>
+    <UtilityButton>Click me!</UtilityButton>
   </Theme>
 </Story>
-
-<Story name="Submit UtilityButton" args={{ type: 'submit' }}>Submit Form</Story>
-
-<Story
-  name="Link UtilityButton"
-  args={{
-    href: 'https://www.w3schools.com/tags/tag_a.asp',
-    target: '_blank',
-  }}
->
-  External Link
-</Story>
-
-<Story
-  name="Icon Only (A11y Example)"
-  args={{
-    compact: true,
-    roundness: 'full',
-    'aria-label': 'Add item',
-  }}
->
-  +
-</Story>