@flightlesslabs/dodo-ui 0.21.0 → 0.22.1

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

@@ -3,12 +3,6 @@ export type SelectOption = {
     value: string;
     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'>;
 export type SelectProps = BaseProps & {
     /** Visual size token (e.g. small, normal, large) */

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

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

@@ -8,6 +8,14 @@
   import { componentRoundnessOptions } from '../../../attributes/roundness.js';
   import Theme from '../../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/dist/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/dist/components/Form/UtilityButton/UtilityButton.stories.svelte

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

@@ -1,9 +1,4 @@
 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;
@@ -22,30 +17,8 @@ interface UtilityButtonBaseProps {
     /** Accessible label (required for icon-only UtilityButtons) */
     '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;
 import type { ComponentSize } from '../../../attributes/size.js';
 import type { ComponentColor } from '../../../attributes/color.js';

package/dist/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/dist/components/Info/Calendar/Calendar.stories.svelte

@@ -11,6 +11,14 @@
   import { componentThemeColorsOptions } from '../../../attributes/theme.js';
   import { ComponentShadowOptions } from '../../../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/dist/components/Layout/Card/Card.stories.svelte

@@ -8,6 +8,14 @@
   import { ComponentShadowOptions } from '../../../attributes/shadow.js';
   import { componentThemeColorsOptions } from '../../../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/dist/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) */

package/dist/components/Layout/Card/Card.svelte.d.ts

@@ -25,7 +25,7 @@ export interface CardProps {
     outline?: boolean;
     /** 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) */
     variant?: ComponentVariant;

package/dist/components/Layout/Grid/Column/Column.scss

@@ -0,0 +1,78 @@
+// Grid-Column
+@use '../../../../styles/global/breakpoints' as breakpoints;
+@use 'sass:math';
+@use 'sass:map';
+
+// ----------------------------------------
+// Config
+// ----------------------------------------
+
+$grid-columns: 12;
+
+$breakpoint-keys: (default, sm, md, lg, xl, xxl);
+
+// ----------------------------------------
+// Function
+// ----------------------------------------
+
+@function col($n) {
+  @return math.div(100%, $grid-columns) * $n;
+}
+
+// ----------------------------------------
+// Column map
+// ----------------------------------------
+
+$column-size: ();
+
+@for $i from 1 through $grid-columns {
+  $column-size: map.set($column-size, $i, col($i));
+}
+
+// ----------------------------------------
+// Mixin (core logic)
+// ----------------------------------------
+
+@mixin column-styles($bp) {
+  @each $name, $size in $column-size {
+    &--#{$name} {
+      @if $bp == default {
+        width: $size;
+        flex: initial;
+      } @else {
+        @include breakpoints.up($bp) {
+          width: $size;
+          flex: initial;
+        }
+      }
+    }
+  }
+
+  &--flex {
+    @if $bp == default {
+      flex: 1;
+    } @else {
+      @include breakpoints.up($bp) {
+        flex: 1;
+      }
+    }
+  }
+}
+
+// ----------------------------------------
+// Component
+// ----------------------------------------
+
+.dodo-ui-Grid-Column {
+  display: block;
+  min-width: 0;
+  padding: calc(var(--dodo-ui-space) * var(--Grid-gap));
+
+  &.column-size {
+    @each $bp in $breakpoint-keys {
+      &--#{$bp} {
+        @include column-styles($bp);
+      }
+    }
+  }
+}