@flightlesslabs/dodo-ui 0.22.0 → 0.22.2

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/Grid/Grid.stories.svelte

@@ -7,6 +7,14 @@
   import Card from '../Card/Card.svelte';
   import Row from './Row/Row.svelte';
 
+  const description = `
+  a set of components for your basic "12 column grid" needs
+
+ \`\`\`ts
+ import { Grid, Column, Row } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+ `;
+
   // ------------------------------
   // Storybook ArgTypes
   // ------------------------------
@@ -26,6 +34,13 @@
     component: Grid,
     tags: ['autodocs'],
     argTypes: storyGridArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 

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

@@ -5,6 +5,14 @@
   import type { ArgTypes } from 'storybook/internal/csf';
   import { componentThemeOptions } from '$lib/attributes/theme.js';
 
+  const description = `
+    Wrap your app at the root with Theme to provide a consistent light or dark class (based on system or override) to all child components
+
+ \`\`\`ts
+ import { Theme } from '@flightlesslabs/dodo-ui';
+ \`\`\`
+ `;
+
   /**
    * Storybook controls for Theme
    */
@@ -25,6 +33,13 @@
     component: Theme,
     tags: ['autodocs'],
     argTypes: ThemeArgTypes,
+    parameters: {
+      docs: {
+        description: {
+          component: description,
+        },
+      },
+    },
   });
 </script>
 
@@ -32,8 +47,7 @@
 <!-- Stories -->
 <!-- ------------------------------ -->
 
-<!-- Wrap your app at the root with Theme to provide a consistent light or dark class (based on system or override) to all child components. -->
-<Story name="Auto"></Story>
+<Story name="Default"></Story>
 
 <Story name="Light" args={{ type: 'light' }}></Story>
 

package/src/lib/components/Layout/Theme/ThemeSystem/index.mdx

@@ -1,5 +1,3 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
 # 🎨 Theme System
 
 A lightweight theme system built using context + local store.
@@ -8,25 +6,17 @@ A lightweight theme system built using context + local store.
 
 ### 📦 Import
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import { useThemeContext } from '@flightlesslabs/dodo-ui';
-`}
-/>
+```
 
 Provides access to the active theme.
 
 ### Usage
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const { theme } = useThemeContext();
-`}
-/>
+```
 
 ## 🏪 Theme Store
 
@@ -34,20 +24,12 @@ Global theme state.
 
 ### 📦 Import
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import { useThemeStore } from '@flightlesslabs/dodo-ui';
-`}
-/>
+```
 
 ### Read
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const theme = useThemeStore.theme;
-`}
-/>
+```

package/src/lib/utils/time/date-creator/createDate/createDate.mdx

@@ -1,5 +1,3 @@
-import { Source } from '@storybook/addon-docs/blocks';
-
 # createDate
 
 A centralized date factory built on top of `dayjs`.
@@ -8,78 +6,55 @@ This utility ensures **consistent parsing, timezone handling, and validation** a
 
 ## 📦 Import
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 import { createDate } from '@flightlesslabs/dodo-ui';
-`}
-/>
+```
 
 ## 🚀 Basic Usage
 
 ### Current Date
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const now = createDate();
 console.log(now.format());
-`}
-/>
+```
+
 
 ### Parse a Date
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const date = createDate("01-02-2025", "DD-MM-YYYY");
 console.log(date.format());
-`}
-/>
+```
 
 ## 🌍 Timezone & UTC
 
 ### UTC Mode
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const utcDate = createDate("2025-01-01T12:00:00Z", undefined, {
   utc: true,
 });
-`}
-/>
+```
 
 ### Timezone Conversion
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 const indiaTime = createDate("01-01-2025", "DD-MM-YYYY", {
   timezone: "Asia/Kolkata",
 });
-`}
-/>
+```
 
 ## ⚙️ Options
 
-<Source
-  dark
-  language="ts"
-  code={`
+```ts
 interface CreateDateOptions {
   timezone?: string;
   utc?: boolean;
   strict?: boolean;
   throwOnInvalid?: boolean;
 }
-`}
-/>
+```
 
 ## 🔁 Behavior Priority
 

package/src/lib/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/src/lib/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
+```