@flightlesslabs/dodo-ui 0.22.1 → 0.23.0

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

@@ -1,134 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Calendar from './Calendar.svelte';
-  import type { CalendarProps } from './Calendar.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
-  import { CalendarDate, type DateValue } from '@internationalized/date';
-  import Theme from '$lib/components/Layout/Theme/Theme.svelte';
-  import { componentVariantOptions } from '$lib/attributes/variant.js';
-  import { cardColorOptions } from '$lib/components/Layout/Card/Card.svelte';
-  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
-  // ------------------------------
-  export const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    value: {
-      control: { type: 'text' },
-      table: { category: 'API', subcategory: 'Base' },
-    },
-
-    // ------------------------------
-    // State
-    // ------------------------------
-    disabled: {
-      control: { type: 'boolean' },
-      description: 'Disabled state of the input',
-      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
-    },
-
-    // ------------------------------
-    // Appearance
-    // ------------------------------
-    shadow: {
-      control: { type: 'select' },
-      options: ComponentShadowOptions,
-      description: 'Component Shadow',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
-    },
-    color: {
-      control: { type: 'select' },
-      options: cardColorOptions,
-      description: 'Color theme token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
-    },
-    variant: {
-      control: { type: 'select' },
-      options: componentVariantOptions,
-      description: 'Visual variant of the card',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
-    },
-    roundness: {
-      control: { type: 'select' },
-      options: componentRoundnessOptions,
-      description: 'Border radius token',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    outline: {
-      control: { type: 'boolean' },
-      description: 'Render outlined style',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    active: {
-      control: { type: 'boolean' },
-      description: 'Add mouse hover and active effects',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    theme: {
-      control: { type: 'select' },
-      options: componentThemeColorsOptions,
-      description: 'Theme color',
-      table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
-    },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: Calendar,
-    tags: ['autodocs'],
-    argTypes: storyCalendarArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-
-  let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default" />
-
-<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 />
-  </Theme>
-</Story>
-
-<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
-  <Theme type="dark">
-    <Calendar />
-  </Theme>
-</Story>

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

@@ -1,113 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Card, { cardColorOptions } from './Card.svelte';
-  import type { CardProps } from './Card.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import { componentVariantOptions } from '$lib/attributes/variant.js';
-  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
-  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
-  // ------------------------------
-  export const storyCardArgTypes: Partial<ArgTypes<CardProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: { table: { category: 'API', subcategory: 'Base' } },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-
-    // ------------------------------
-    // Appearance
-    // ------------------------------
-    shadow: {
-      control: { type: 'select' },
-      options: ComponentShadowOptions,
-      description: 'Component Shadow',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
-    },
-    color: {
-      control: { type: 'select' },
-      options: cardColorOptions,
-      description: 'Color theme token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'default' } },
-    },
-    variant: {
-      control: { type: 'select' },
-      options: componentVariantOptions,
-      description: 'Visual variant of the card',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
-    },
-    roundness: {
-      control: { type: 'select' },
-      options: componentRoundnessOptions,
-      description: 'Border radius token',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    outline: {
-      control: { type: 'boolean' },
-      description: 'Render outlined style',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    active: {
-      control: { type: 'boolean' },
-      description: 'Add mouse hover and active effects',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    theme: {
-      control: { type: 'select' },
-      options: componentThemeColorsOptions,
-      description: 'Theme color',
-      table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'undefined' } },
-    },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: Card,
-    tags: ['autodocs'],
-    argTypes: storyCardArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default"><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>
-
-<Story name="Solid" args={{ color: 'primary', variant: 'solid' }}><p>Hello there</p></Story>
-
-<Story name="Outline" args={{ outline: true, shadow: 0 }}><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>
-</Story>
-
-<Story name="Dark Theme" args={{ theme: 'dark' }} globals={{ backgrounds: { value: 'dark' } }}>
-  <p>Hello there</p>
-</Story>

package/src/lib/components/Layout/Grid/Column/Column.stories.svelte

@@ -1,66 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Column, { gridColumnSizeOptions } from './Column.svelte';
-  import type { GridColumnProps } from './Column.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-
-  // ------------------------------
-  // Storybook ArgTypes
-  // ------------------------------
-  export const storyColumnArgTypes: Partial<ArgTypes<GridColumnProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: { table: { category: 'API', subcategory: 'Base' } },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-
-    // ------------------------------
-    // Size
-    // ------------------------------
-    size: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size', defaultValue: { summary: '12' } },
-    },
-    sm: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-    md: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-    lg: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-    xl: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-    xxl: {
-      control: { type: 'select' },
-      options: gridColumnSizeOptions,
-      table: { category: 'API', subcategory: 'Size' },
-    },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: Column,
-    tags: ['autodocs'],
-    argTypes: storyColumnArgTypes,
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default">Hello there</Story>

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

@@ -1,192 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Grid from './Grid.svelte';
-  import type { GridProps } from './Grid.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import Column from './Column/Column.svelte';
-  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
-  // ------------------------------
-  export const storyGridArgTypes: Partial<ArgTypes<GridProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: { table: { category: 'API', subcategory: 'Base' } },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    gap: { table: { category: 'API', subcategory: 'Base', defaultValue: { summary: '1' } } },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: Grid,
-    tags: ['autodocs'],
-    argTypes: storyGridArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<!-- Basic 12 column grid -->
-<Story name="Default">
-  <Column sm={4}>Hello there</Column>
-  <Column sm={4}>Hello there</Column>
-  <Column sm={4}>Hello there</Column>
-  <Column sm={4}>Hello there</Column>
-  <Column sm={4}>Hello there</Column>
-</Story>
-
-<Story name="Example">
-  <Column sm={4}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={4}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={4}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={4}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-</Story>
-
-<Story name="Grid Row">
-  <Row>
-    <Column sm={6} md={4} lg={3}>
-      <Card color="primary">
-        <p>Hello there</p>
-      </Card>
-    </Column>
-    <Column sm={6} md={4} lg={3}>
-      <Card color="primary">
-        <p>Hello there</p>
-      </Card>
-    </Column>
-    <Column sm={6} md={4} lg={3}>
-      <Card color="primary">
-        <p>Hello there</p>
-      </Card>
-    </Column>
-  </Row>
-  <Row>
-    <Column sm={6} md={4} lg={3}>
-      <Card color="primary">
-        <p>Hello there</p>
-      </Card>
-    </Column>
-    <Column sm={6} md={4} lg={3}>
-      <Card color="primary">
-        <p>Hello there</p>
-      </Card>
-    </Column>
-    <Column sm={6} md={4} lg={3}>
-      <Card color="primary">
-        <p>Hello there</p>
-      </Card>
-    </Column>
-  </Row>
-</Story>
-
-<Story name="Gap" args={{ gap: 2 }}>
-  <Column sm={4}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={4}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={4}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={4}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-</Story>
-
-<Story name="Responsive">
-  <Column sm={6} md={4} lg={3}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={6} md={4} lg={3}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={6} md={4} lg={3}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={6} md={4} lg={3}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={6} md={4} lg={3}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column sm={6} md={4} lg={3}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-</Story>
-
-<Story name="Flex">
-  <Column md="flex">
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column md={2}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-  <Column md={2}>
-    <Card color="primary">
-      <p>Hello there</p>
-    </Card>
-  </Column>
-</Story>

package/src/lib/components/Layout/Grid/Row/Row.stories.svelte

@@ -1,39 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Row from './Row.svelte';
-  import type { GridRowProps } from './Row.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import Column from '../Column/Column.svelte';
-
-  // ------------------------------
-  // Storybook ArgTypes
-  // ------------------------------
-  export const storyRowArgTypes: Partial<ArgTypes<GridRowProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: { table: { category: 'API', subcategory: 'Base' } },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: Row,
-    tags: ['autodocs'],
-    argTypes: storyRowArgTypes,
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default">
-  <Column sm={4}>Hello there</Column>
-  <Column sm={4}>Hello there</Column>
-  <Column sm={4}>Hello there</Column>
-  <Column sm={4}>Hello there</Column>
-  <Column sm={4}>Hello there</Column>
-</Story>

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

@@ -1,54 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Theme from './Theme.svelte';
-  import type { ThemeProps } from './Theme.svelte';
-  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
-   */
-  export const ThemeArgTypes: Partial<ArgTypes<ThemeProps>> = {
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    type: {
-      control: { type: 'select' },
-      options: componentThemeOptions,
-      description: 'Theme color type: auto by defualt',
-      table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'auto' } },
-    },
-    global: {
-      table: { category: 'API', subcategory: 'Base' },
-    },
-  };
-
-  const { Story } = defineMeta({
-    component: Theme,
-    tags: ['autodocs'],
-    argTypes: ThemeArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default"></Story>
-
-<Story name="Light" args={{ type: 'light' }}></Story>
-
-<Story name="Dark" args={{ type: 'dark' }} globals={{ backgrounds: { value: 'dark' } }}></Story>

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

@@ -1,35 +0,0 @@
-# 🎨 Theme System
-
-A lightweight theme system built using context + local store.
-
-## 🧩 Theme Context
-
-### 📦 Import
-
-```ts
-import { useThemeContext } from '@flightlesslabs/dodo-ui';
-```
-
-Provides access to the active theme.
-
-### Usage
-
-```ts
-const { theme } = useThemeContext();
-```
-
-## 🏪 Theme Store
-
-Global theme state.
-
-### 📦 Import
-
-```ts
-import { useThemeStore } from '@flightlesslabs/dodo-ui';
-```
-
-### Read
-
-```ts
-const theme = useThemeStore.theme;
-```