@flightlesslabs/dodo-ui 0.21.0 → 0.22.1

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>

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

@@ -1,11 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
 
-  /**
-   * Shared base props for the UtilityButton component.
-   *
-   * These props apply to both the <UtilityButton> and <a> render modes.
-   */
   interface UtilityButtonBaseProps {
     /** UtilityButton contents */
     children?: Snippet;
@@ -32,32 +27,10 @@
     'aria-label'?: string;
   }
 
-  /**
-   * UtilityButton component props (UtilityButton variant).
-   *
-   * Renders a semantic <UtilityButton> element when `href` is not provided.
-   * Inherits all native HTML UtilityButton attributes.
-   */
   export type UtilityButtonAsButtonProps = UtilityButtonBaseProps & ButtonAsButtonPropsBase;
 
-  /**
-   * UtilityButton component props (anchor variant).
-   *
-   * Renders an <a> element when `href` is provided.
-   * Inherits all native HTML anchor attributes, except `type`.
-   */
   export type UtilityButtonAsAnchorProps = UtilityButtonBaseProps & ButtonAsAnchorPropsBase;
 
-  /**
-   * UtilityButton component props.
-   *
-   * Renders a semantic <UtilityButton> 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 UtilityButton-only props are disabled.
-   * - When `href` is absent, UtilityButton props are enabled and anchor-only props are disabled.
-   */
   export type UtilityButtonProps = UtilityButtonAsButtonProps | UtilityButtonAsAnchorProps;
 </script>
 
@@ -70,12 +43,6 @@
   import ButtonAsButton from '../Button/ButtonAsButton.svelte';
   import type { ButtonAsButtonProps as ButtonAsButtonPropsBase } from '../Button/ButtonAsButton.svelte';
 
-  /**
-   * UtilityButton component runtime props.
-   *
-   * These props are destructured from `$props()` and mapped to the underlying
-   * Bits UI UtilityButton root component, with semantic rendering based on `href`.
-   */
   let {
     size = 'normal',
     color = 'primary',
@@ -91,9 +58,6 @@
     ...restProps
   }: UtilityButtonProps = $props();
 
-  /**
-   * Computed class list for the UtilityButton component.
-   */
   const classes = $derived(
     [
       'dodo-ui-UtilityButton',

package/src/lib/components/Info/Calendar/Calendar.scss

@@ -1,3 +1,5 @@
+@use '../../../styles/global/breakpoints' as breakpoints;
+
 // ----------------------------------------
 // Theme tokens (global CSS variables)
 // ----------------------------------------
@@ -13,11 +15,14 @@
 
 .dodo-ui-Calendar {
   font-size: 1rem;
-  padding: var(--dodo-ui-space);
   color: var(--dodo-color-neutral-900);
   display: inline-flex;
   flex-direction: column;
 
+  @include breakpoints.up('sm') {
+    padding: var(--dodo-ui-space);
+  }
+
   [data-calendar-header] {
     display: flex;
     justify-content: space-between;
@@ -32,9 +37,9 @@
     font-weight: 500;
   }
 
-  [data-calendar-next-button],
-  [data-calendar-prev-button] {
-    font-size: 1.45rem;
+  button[data-calendar-next-button],
+  button[data-calendar-prev-button] {
+    font-size: 1.4em;
   }
 
   [data-calendar-grid] {
@@ -124,14 +129,19 @@
         bottom: 0.2em;
       }
     }
-  }
 
-  [data-outside-month] {
-    color: var(--dodo-color-neutral-400);
+    &[data-outside-month],
+    &[data-disabled] {
+      color: var(--dodo-color-neutral-400);
 
-    &:hover {
-      background-color: initial;
-      border-color: transparent;
+      &:hover {
+        background-color: initial;
+        border-color: transparent;
+      }
+
+      &[data-today] {
+        background-color: initial;
+      }
     }
   }
 }

package/src/lib/components/Info/Calendar/Calendar.stories.svelte

@@ -11,6 +11,14 @@
   import { componentThemeColorsOptions } from '$lib/attributes/theme.js';
   import { ComponentShadowOptions } from '$lib/attributes/shadow.js';
 
+  const description = `
+ a plug and play Calendar component based on bits-ui [calendar](https://bits-ui.com/docs/components/calendar).
+
+ \`\`\`ts
+ import { Calendar } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+`;
+
   // ------------------------------
   // Storybook ArgTypes
   // ------------------------------
@@ -85,6 +93,13 @@
     component: Calendar,
     tags: ['autodocs'],
     argTypes: storyCalendarArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 
   let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
@@ -96,10 +111,16 @@
 
 <Story name="Default" />
 
-<Story name="Selected" asChild>
+<Story name="Controlled" asChild>
   <Calendar bind:value={myValue} />
 </Story>
 
+<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
+
+<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">
     <Calendar />

package/src/lib/components/Layout/Card/Card.stories.svelte

@@ -8,6 +8,14 @@
   import { ComponentShadowOptions } from '$lib/attributes/shadow.js';
   import { componentThemeColorsOptions } from '$lib/attributes/theme.js';
 
+  const description = `
+a simple, customizable, and re-usable card component
+
+ \`\`\`ts
+ import { Card } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+ `;
+
   // ------------------------------
   // Storybook ArgTypes
   // ------------------------------
@@ -70,6 +78,13 @@
     component: Card,
     tags: ['autodocs'],
     argTypes: storyCardArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 
@@ -79,7 +94,7 @@
 
 <Story name="Default"><p>Hello there</p></Story>
 
-<Story name="Primary" args={{ color: 'primary' }}><p>Hello there</p></Story>
+<Story name="Color" args={{ color: 'safe' }}><p>Hello there</p></Story>
 
 <Story name="Active" args={{ color: 'primary', active: true }}><p>Hello there</p></Story>
 
@@ -87,7 +102,7 @@
 
 <Story name="Outline" args={{ outline: true, shadow: 0 }}><p>Hello there</p></Story>
 
-<Story name="FixedSize" args={{ height: '200px', width: '250px' }}><p>Hello there</p></Story>
+<Story name="Fixed Size" args={{ height: '200px', width: '250px' }}><p>Hello there</p></Story>
 
 <Story name="Light Theme" args={{ theme: 'light' }}>
   <p>Hello there</p>

package/src/lib/components/Layout/Card/Card.svelte

@@ -40,7 +40,7 @@
     /** Add mouse hover and active effects */
     active?: boolean;
 
-    /** Custom CSS class names applied to the InputEnclosure */
+    /** Custom CSS class names applied to the Card */
     class?: string;
 
     /** Visual variant (e.g. solid, text) */