@flightlesslabs/dodo-ui 0.22.2 → 0.23.0

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

@@ -1,132 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Checkbox from './Checkbox.svelte';
-  import type { CheckboxProps } from './Checkbox.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import { componentColorOptions } from '../../../attributes/color.js';
-  import { componentSizeOptions } from '../../../attributes/size.js';
-  import { componenRoundnessShapeOptions } from '../../../attributes/roundness.js';
-  import Theme from '../../Layout/Theme/Theme.svelte';
-  import { componentVariantOptions } from '../../../attributes/variant.js';
-
-  const description = `
- A simple Checkbox component based on bits-ui [checkbox](https://bits-ui.com/docs/components/checkbox).
-
- \`\`\`ts
- import { Checkbox } from '@flightlesslabs/dodo-ui';
- \`\`\`
-`;
-
-  /**
-   * Storybook controls for Checkbox
-   */
-  export const CheckboxArgTypes: Partial<ArgTypes<CheckboxProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: { table: { category: 'API', subcategory: 'Base' } },
-    disabled: {
-      control: { type: 'boolean' },
-      description: 'Disable interactions',
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-
-    // ------------------------------
-    // Appearance
-    // ------------------------------
-    color: {
-      control: { type: 'select' },
-      options: componentColorOptions,
-      description: 'Color theme token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'neutral' } },
-    },
-    variant: {
-      control: { type: 'select' },
-      options: componentVariantOptions,
-      description: 'Visual variant of the Checkbox',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'text' } },
-    },
-    size: {
-      control: { type: 'select' },
-      options: componentSizeOptions,
-      description: 'Visual size token',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'normal' } },
-    },
-    roundness: {
-      control: { type: 'select' },
-      options: componenRoundnessShapeOptions,
-      description: 'Border radius token',
-      table: { category: 'API', subcategory: 'Appearance' },
-    },
-    outline: {
-      control: { type: 'boolean' },
-      description: 'Render outlined style',
-      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'true' } },
-    },
-  };
-
-  const { Story } = defineMeta({
-    component: Checkbox,
-    tags: ['autodocs'],
-    argTypes: CheckboxArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-
-  let myValue = $state<boolean>(true);
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default" args={{ id: 'Default' }}>Check this text</Story>
-
-<Story name="Controlled" asChild>
-  <Checkbox id="Checked" bind:checked={myValue}>Check this text</Checkbox>
-</Story>
-
-<Story
-  name="OnChange (Actions)"
-  args={{
-    id: 'OnChange_Action',
-    onCheckedChange: (checked: boolean) => {
-      alert('OnChange');
-      console.log('OnChange', checked);
-    },
-  }}
->
-  Check this text
-</Story>
-
-<Story name="Indeterminate" args={{ id: 'indeterminate', indeterminate: true }}>
-  Check this text
-</Story>
-
-<Story name="Color" args={{ id: 'Safe', color: 'safe' }}>Check this text</Story>
-
-<Story name="Solid" args={{ id: 'Solid', variant: 'solid', checked: true }}>Check this text</Story>
-
-<Story name="NoOutline" args={{ id: 'Outline', outline: false }}>Check this text</Story>
-
-<Story name="Size" args={{ id: 'Size', size: 'large' }}>Check this text</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>Check this text</Story>
-
-<Story name="Light Theme" asChild>
-  <Theme type="light">
-    <Checkbox id="Light_Theme">Check this text</Checkbox>
-  </Theme>
-</Story>
-
-<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
-  <Theme type="dark">
-    <Checkbox id="Dark_Theme">Check this text</Checkbox>
-  </Theme>
-</Story>

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

@@ -1,25 +0,0 @@
-import Checkbox from './Checkbox.svelte';
-import type { CheckboxProps } from './Checkbox.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-/**
- * Storybook controls for Checkbox
- */
-export declare const CheckboxArgTypes: Partial<ArgTypes<CheckboxProps>>;
-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 Checkbox: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Checkbox = InstanceType<typeof Checkbox>;
-export default Checkbox;

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

@@ -1,139 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import DatePicker from './DatePicker.svelte';
-  import type { DatePickerProps } from './DatePicker.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-
-  import { componentSizeOptions } from '../../../attributes/size.js';
-  import { componentRoundnessOptions } from '../../../attributes/roundness.js';
-  import { CalendarDate, type DateValue } from '@internationalized/date';
-  import Theme from '../../Layout/Theme/Theme.svelte';
-
-  const description = `
- A sleek, plug and play Date Picker based on bits-ui [date-picker](https://bits-ui.com/docs/components/date-picker).
- \`\`\`ts
- import { DatePicker } from '@flightlesslabs/dodo-ui';
-
-import { CalendarDate, type DateValue } from '@internationalized/date';
- \`\`\`
-`;
-
-  // ------------------------------
-  // Storybook ArgTypes
-  // ------------------------------
-  export const storyDatePickerArgTypes: Partial<ArgTypes<DatePickerProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    value: {
-      control: { type: 'text' },
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    dateFormat: {
-      control: { type: 'text' },
-      table: { category: 'API', subcategory: 'Base', defaultValue: { summary: 'dd/mm/yyyy' } },
-    },
-
-    // ------------------------------
-    // 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',
-    },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: DatePicker,
-    tags: ['autodocs'],
-    argTypes: storyDatePickerArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-        story: { height: '420px' },
-      },
-    },
-  });
-
-  let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default" />
-
-<Story name="Controlled" asChild>
-  <DatePicker bind:value={myValue} />
-</Story>
-
-<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
-
-<Story name="Date Format" args={{ dateFormat: 'mm/dd/yyyy' }} />
-
-<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">
-    <DatePicker />
-  </Theme>
-</Story>
-
-<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
-  <Theme type="dark">
-    <DatePicker />
-  </Theme>
-</Story>

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

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

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

@@ -1,48 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import FormField from './FormField.svelte';
-  import type { FormFieldProps } from './FormField.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import TextInput from '../TextInput/TextInput.svelte';
-
-  const description = `
- a form control for input tags and more.
- \`\`\`ts
- import { FormField } from '@flightlesslabs/dodo-ui';
- \`\`\`
-`;
-
-  /**
-   * Storybook controls for FormField
-   */
-  export const FormFieldArgTypes: Partial<ArgTypes<FormFieldProps>> = {
-    class: { table: { category: 'API', subcategory: 'Base' } },
-    label: {
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    for: {
-      table: { category: 'API', subcategory: 'Base' },
-    },
-  };
-
-  const { Story } = defineMeta({
-    component: FormField,
-    tags: ['autodocs'],
-    argTypes: FormFieldArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Defualt" args={{ label: 'Name:', for: 'name' }}>
-  <TextInput placeholder="Type something…" name="name" />
-</Story>

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

@@ -1,25 +0,0 @@
-import FormField from './FormField.svelte';
-import type { FormFieldProps } from './FormField.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-/**
- * Storybook controls for FormField
- */
-export declare const FormFieldArgTypes: Partial<ArgTypes<FormFieldProps>>;
-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 FormField: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type FormField = InstanceType<typeof FormField>;
-export default FormField;

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

@@ -1,166 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import InputEnclosure from './InputEnclosure.svelte';
-  import type { InputEnclosureProps } from './InputEnclosure.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 = `
-  An extensive wrappwer for input boxes.
-
- \`\`\`ts
- import { InputEnclosure } from '@flightlesslabs/dodo-ui';
-
- // apply 'InputBox' class to the input
-  <input class="InputBox" />
- \`\`\`
- `;
-
-  // ------------------------------
-  // Storybook ArgTypes
-  // ------------------------------
-  export const storyInputEnclosureArgTypes: Partial<ArgTypes<InputEnclosureProps>> = {
-    // ------------------------------
-    // Core
-    // ------------------------------
-    children: {
-      control: { type: 'text' },
-      description: 'InputEnclosure contents (typically an input or control)',
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    before: {
-      description:
-        'Content rendered before the input (prefix). Provided via {#snippet before} in Svelte.',
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    after: {
-      description:
-        'Content rendered after the input (suffix). Provided via {#snippet after} in Svelte.',
-      table: { category: 'API', subcategory: 'Base' },
-    },
-    class: { table: { category: 'API', subcategory: 'Base' } },
-
-    // ------------------------------
-    // State
-    // ------------------------------
-    disabled: {
-      control: { type: 'boolean' },
-      description: 'Disabled visual state',
-      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
-    },
-    focused: {
-      control: { type: 'boolean' },
-      description: 'Focused visual state (wrapper-level)',
-      table: { category: 'API', subcategory: 'State', defaultValue: { summary: 'false' } },
-    },
-    error: {
-      control: { type: 'boolean' },
-      description: 'Error visual state (validation)',
-      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' } },
-    },
-  };
-
-  // ------------------------------
-  // Storybook Meta
-  // ------------------------------
-  const { Story } = defineMeta({
-    component: InputEnclosure,
-    tags: ['autodocs'],
-    argTypes: storyInputEnclosureArgTypes,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default">
-  <input placeholder="Type something…" class="InputBox" />
-</Story>
-
-<Story name="No Outline" args={{ outline: false }}>
-  <input placeholder="No outline…" class="InputBox" />
-</Story>
-
-<Story name="Focused" args={{ focused: true }}>
-  <input placeholder="Focused state…" class="InputBox" />
-</Story>
-
-<Story name="Error" args={{ error: true }}>
-  <input placeholder="Error state…" class="InputBox" />
-</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>
-  <input placeholder="Disabled state…" disabled class="InputBox" />
-</Story>
-
-<Story name="Large" args={{ size: 'large' }}>
-  <input placeholder="Large input…" class="InputBox" />
-</Story>
-
-<Story name="With Before (Icon Prefix)" asChild>
-  <InputEnclosure>
-    {#snippet before()}
-      <span style="color: #888; padding-left: 8px">🔍</span>
-    {/snippet}
-
-    <input placeholder="Search…" class="InputBox" />
-  </InputEnclosure>
-</Story>
-
-<Story name="With After (Suffix Text)" asChild>
-  <InputEnclosure>
-    {#snippet after()}
-      <span style="color: #888; padding-right: 8px">.com</span>
-    {/snippet}
-
-    <input placeholder="Website" class="InputBox" />
-  </InputEnclosure>
-</Story>
-
-<Story name="Light Theme" asChild>
-  <Theme type="light">
-    <InputEnclosure>
-      <input placeholder="Type something…" class="InputBox" />
-    </InputEnclosure>
-  </Theme>
-</Story>
-
-<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
-  <Theme type="dark">
-    <InputEnclosure>
-      <input placeholder="Type something…" class="InputBox" />
-    </InputEnclosure>
-  </Theme>
-</Story>

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

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

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

@@ -1,31 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Label from './Label.svelte';
-  import type { LabelProps } from './Label.svelte';
-  import type { ArgTypes } from 'storybook/internal/csf';
-  import TextInput from '../TextInput/TextInput.svelte';
-
-  /**
-   * Storybook controls for Label
-   */
-  export const LabelArgTypes: Partial<ArgTypes<LabelProps>> = {
-    class: { table: { category: 'API', subcategory: 'Base' } },
-  };
-
-  const { Story } = defineMeta({
-    component: Label,
-    tags: ['autodocs'],
-    argTypes: LabelArgTypes,
-  });
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default">Default Label</Story>
-
-<Story name="WithTextInput" asChild>
-  <Label for="search">Search:</Label>
-  <TextInput placeholder="Search…" name="search" />
-</Story>

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

@@ -1,25 +0,0 @@
-import Label from './Label.svelte';
-import type { LabelProps } from './Label.svelte';
-import type { ArgTypes } from 'storybook/internal/csf';
-/**
- * Storybook controls for Label
- */
-export declare const LabelArgTypes: Partial<ArgTypes<LabelProps>>;
-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 Label: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Label = InstanceType<typeof Label>;
-export default Label;