@flightlesslabs/dodo-ui 0.22.2 → 0.24.0

package/dist/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 '../../../attributes/variant.js';
-  import { componentRoundnessOptions } from '../../../attributes/roundness.js';
-  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
-  // ------------------------------
-  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/dist/components/Layout/Card/Card.stories.svelte.d.ts

@@ -1,22 +0,0 @@
-import Card from './Card.svelte';
-import type { CardProps } from './Card.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-export declare const storyCardArgTypes: Partial<ArgTypes<CardProps>>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Card: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Card = InstanceType<typeof Card>;
-export default Card;

package/dist/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/dist/components/Layout/Grid/Column/Column.stories.svelte.d.ts

@@ -1,22 +0,0 @@
-import Column from './Column.svelte';
-import type { GridColumnProps } from './Column.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-export declare const storyColumnArgTypes: Partial<ArgTypes<GridColumnProps>>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Column: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Column = InstanceType<typeof Column>;
-export default Column;

package/dist/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/dist/components/Layout/Grid/Grid.stories.svelte.d.ts

@@ -1,22 +0,0 @@
-import Grid from './Grid.svelte';
-import type { GridProps } from './Grid.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-export declare const storyGridArgTypes: Partial<ArgTypes<GridProps>>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Grid: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Grid = InstanceType<typeof Grid>;
-export default Grid;

package/dist/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/dist/components/Layout/Grid/Row/Row.stories.svelte.d.ts

@@ -1,22 +0,0 @@
-import Row from './Row.svelte';
-import type { GridRowProps } from './Row.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-export declare const storyRowArgTypes: Partial<ArgTypes<GridRowProps>>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Row: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Row = InstanceType<typeof Row>;
-export default Row;

package/dist/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 '../../../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/dist/components/Layout/Theme/Theme.stories.svelte.d.ts

@@ -1,25 +0,0 @@
-import Theme from './Theme.svelte';
-import type { ThemeProps } from './Theme.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-/**
- * Storybook controls for Theme
- */
-export declare const ThemeArgTypes: Partial<ArgTypes<ThemeProps>>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Theme: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Theme = InstanceType<typeof Theme>;
-export default Theme;

package/dist/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;
-```