@flightlesslabs/dodo-ui 0.22.1 → 0.23.0

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

@@ -1,162 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import TextInput from './TextInput.svelte';
-  import type { TextInputProps } from './TextInput.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-
-  import { componentSizeOptions } from '../../../attributes/size.js';
-  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
-  // ------------------------------
-  export const storyTextInputArgTypes: Partial<ArgTypes<TextInputProps>> = {
-    children: {
-      table: { disable: true },
-      control: false,
-    },
-
-    // ------------------------------
-    // Core
-    // ------------------------------
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    placeholder: {
-      control: { type: 'text' },
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    value: {
-      control: { type: 'text' },
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    name: { table: { category: 'API', subcategory: 'Base' } },
-
-    // ------------------------------
-    // State
-    // ------------------------------
-    disabled: {
-      control: { type: 'boolean' },
-      description: 'Disabled state of the input',
-      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
-    },
-    focused: {
-      control: { type: 'boolean' },
-      description: 'Force focused visual state',
-      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
-    },
-    error: {
-      control: { type: 'boolean' },
-      description: 'Error visual state',
-      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
-    },
-
-    // ------------------------------
-    // Appearance
-    // ------------------------------
-    size: {
-      control: { type: 'select' },
-      options: componentSizeOptions,
-      description: 'Visual size token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
-    },
-    roundness: {
-      control: { type: 'select' },
-      options: componentRoundnessOptions,
-      description: 'Border radius token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: '1' } },
-    },
-    outline: {
-      control: { type: 'boolean' },
-      description: 'Render outlined enclosure',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'true' } },
-    },
-
-    // ------------------------------
-    // Slots (Snippets)
-    // ------------------------------
-    before: {
-      table: { category: 'API', subcategory: 'Slots' },
-      description: 'Content rendered before the input',
-    },
-    after: {
-      table: { category: 'API', subcategory: 'Slots' },
-      description: 'Content rendered after the input',
-    },
-
-    // ------------------------------
-    // Events
-    // ------------------------------
-    onfocus: { table: { category: 'API', subcategory: 'Events' }, action: 'focus' },
-    onblur: { table: { category: 'API', subcategory: 'Events' }, action: 'blur' },
-    oninput: { table: { category: 'API', subcategory: 'Events' }, action: 'input' },
-    onchange: { table: { category: 'API', subcategory: 'Events' }, action: 'change' },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: TextInput,
-    tags: ['autodocs'],
-    argTypes: storyTextInputArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default" args={{ placeholder: 'Type something…' }} />
-
-<Story name="Focused" args={{ placeholder: 'Focused state…', focused: true }} />
-
-<Story name="Error" args={{ placeholder: 'Error state…', error: 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; padding-left: 8px">🔍</span>
-    {/snippet}
-  </TextInput>
-</Story>
-
-<Story name="With After (Suffix Text)" asChild>
-  <TextInput placeholder="Website">
-    {#snippet after()}
-      <span style="color: #888; padding-right: 8px">.com</span>
-    {/snippet}
-  </TextInput>
-</Story>
-
-<Story name="Light Theme" asChild>
-  <Theme type="light">
-    <TextInput placeholder="Type something…" />
-  </Theme>
-</Story>
-
-<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
-  <Theme type="dark">
-    <TextInput placeholder="Type something…" />
-  </Theme>
-</Story>

package/dist/components/Form/TextInput/TextInput.stories.svelte.d.ts

@@ -1,22 +0,0 @@
-import TextInput from './TextInput.svelte';
-import type { TextInputProps } from './TextInput.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-export declare const storyTextInputArgTypes: Partial<ArgTypes<TextInputProps>>;
-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 TextInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type TextInput = InstanceType<typeof TextInput>;
-export default TextInput;

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

@@ -1,163 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import UtilityButton from './UtilityButton.svelte';
-  import type { UtilityButtonProps } from './UtilityButton.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import { componentColorOptions } from '../../../attributes/color.js';
-  import { componentSizeOptions } from '../../../attributes/size.js';
-  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
-  // ------------------------------
-  export const storyUtilityButtonArgTypes: Partial<ArgTypes<UtilityButtonProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: { table: { category: 'API', subcategory: 'Base' } },
-    href: {
-      control: { type: 'text' },
-      description: 'Render as Anchor when provided',
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-      description: 'Disable interactions',
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    type: { table: { category: 'API', subcategory: 'Base' } },
-
-    // ------------------------------
-    // Appearance
-    // ------------------------------
-    color: {
-      control: { type: 'select' },
-      options: componentColorOptions,
-      description: 'Color theme token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'primary' } },
-    },
-    size: {
-      control: { type: 'select' },
-      options: componentSizeOptions,
-      description: 'Visual size token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
-    },
-    roundness: {
-      control: { type: 'select' },
-      options: componentRoundnessOptions,
-      description: 'Border radius token',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    compact: {
-      control: { type: 'boolean' },
-      description: 'Compact spacing (icon buttons)',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    outline: {
-      control: { type: 'boolean' },
-      description: 'Render outlined style',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-
-    // ------------------------------
-    // Accessibility
-    // ------------------------------
-    'aria-label': {
-      control: { type: 'text' },
-      description: 'Accessible label (required for icon-only buttons)',
-      table: { category: 'API', subcategory: 'Accessibility' },
-    },
-
-    // ------------------------------
-    // Events (Svelte-style)
-    // ------------------------------
-    onclick: { table: { category: 'API', subcategory: 'Events' }, action: 'click' },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: UtilityButton,
-    tags: ['autodocs'],
-    argTypes: storyUtilityButtonArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default">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('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="Size" args={{ size: 'large' }}>Click me!</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>Click me!</Story>
-
-<Story name="Submit Button" args={{ type: 'submit' }}>Click me!</Story>
-
-<Story
-  name="Compact"
-  args={{
-    compact: true,
-    'aria-label': 'Add item',
-  }}
->
-  +
-</Story>
-
-<Story name="Light Theme" asChild>
-  <Theme type="light">
-    <UtilityButton>Click me!</UtilityButton>
-  </Theme>
-</Story>
-
-<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
-  <Theme type="dark">
-    <UtilityButton>Click me!</UtilityButton>
-  </Theme>
-</Story>

package/dist/components/Form/UtilityButton/UtilityButton.stories.svelte.d.ts

@@ -1,22 +0,0 @@
-import UtilityButton from './UtilityButton.svelte';
-import type { UtilityButtonProps } from './UtilityButton.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-export declare const storyUtilityButtonArgTypes: Partial<ArgTypes<UtilityButtonProps>>;
-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 UtilityButton: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type UtilityButton = InstanceType<typeof UtilityButton>;
-export default UtilityButton;

package/dist/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 '../../../attributes/roundness.js';
-  import { CalendarDate, type DateValue } from '@internationalized/date';
-  import Theme from '../../Layout/Theme/Theme.svelte';
-  import { componentVariantOptions } from '../../../attributes/variant.js';
-  import { cardColorOptions } from '../../Layout/Card/Card.svelte';
-  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
-  // ------------------------------
-  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/dist/components/Info/Calendar/Calendar.stories.svelte.d.ts

@@ -1,22 +0,0 @@
-import Calendar from './Calendar.svelte';
-import type { CalendarProps } from './Calendar.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-export declare const storyCalendarArgTypes: Partial<ArgTypes<CalendarProps>>;
-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 Calendar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Calendar = InstanceType<typeof Calendar>;
-export default Calendar;

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;