@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

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

@@ -0,0 +1,119 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Switch from './Switch.svelte';
+  import type { SwitchProps } from './Switch.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';
+
+  /**
+   * Storybook controls for Switch
+   */
+  export const SwitchArgTypes: Partial<ArgTypes<SwitchProps>> = {
+    // ------------------------------
+    // 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 Switch',
+      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: Switch,
+    tags: ['autodocs'],
+    argTypes: SwitchArgTypes,
+  });
+
+  let myValue = $state<boolean>(true);
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default" args={{ id: 'Default' }}>Check this text</Story>
+
+<Story name="Checked" asChild>
+  <Switch id="Checked" bind:checked={myValue}>Check this text</Switch>
+</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="OnChange (Actions)"
+  args={{
+    id: 'OnChange_Action',
+    onCheckedChange: (checked: boolean) => {
+      alert('OnChange');
+      console.log('OnChange', checked);
+    },
+  }}
+>
+  Check this text
+</Story>
+
+<Story name="Primary" args={{ id: 'Primary', color: 'primary' }}>Check this text</Story>
+
+<Story name="Large" args={{ id: 'Large', size: 'large' }}>Check this text</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>Check this text</Story>
+
+<Story name="Safe" args={{ id: 'Safe', color: 'safe' }}>Check this text</Story>
+
+<Story name="Danger / Outline" args={{ id: 'Danger-Outline', color: 'danger' }}>
+  Check this text
+</Story>
+
+<Story name="Light Theme" asChild>
+  <Theme type="light">
+    <Switch id="Light_Theme">Check this text</Switch>
+  </Theme>
+</Story>
+
+<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
+  <Theme type="dark">
+    <Switch id="Dark_Theme">Check this text</Switch>
+  </Theme>
+</Story>

package/dist/{stories/components/Form/Checkbox/Events/Events.stories.svelte.d.ts → components/Form/Switch/Switch.stories.svelte.d.ts}

@@ -1,3 +1,10 @@
+import Switch from './Switch.svelte';
+import type { SwitchProps } from './Switch.svelte';
+import type { ArgTypes } from 'storybook/internal/csf';
+/**
+ * Storybook controls for Switch
+ */
+export declare const SwitchArgTypes: Partial<ArgTypes<SwitchProps>>;
 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;
@@ -11,8 +18,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Events: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const Switch: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Events = InstanceType<typeof Events>;
-export default Events;
+type Switch = InstanceType<typeof Switch>;
+export default Switch;

package/dist/components/Form/Switch/Switch.svelte

@@ -0,0 +1,97 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Public props for Switch
+   */
+  export type SwitchProps = SwitchRootProps & {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Slot content */
+    children?: Snippet;
+
+    /** Visual size token */
+    size?: ComponentSize;
+
+    /** Color theme token */
+    color?: ComponentColor;
+
+    /** Border radius token (0–3, "pill") */
+    roundness?: ComponentRoundnessShape;
+
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+
+    /** Add a border around the button */
+    outline?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import { Switch as SwitchBitUi, type SwitchRootProps } from 'bits-ui';
+  import Label from '../Label/Label.svelte';
+  import type { ComponentSize } from '../../../attributes/size.js';
+  import type { ComponentColor } from '../../../attributes/color.js';
+  import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+  import type { ComponentVariant } from '../../../attributes/variant.js';
+
+  let {
+    class: className = '',
+    children,
+    name,
+    size = 'normal',
+    color = 'neutral',
+    roundness = 'pill',
+    id,
+    outline = true,
+    variant = 'text',
+    checked = $bindable(false),
+    ref = $bindable(null),
+    ...restProps
+  }: SwitchProps = $props();
+
+  /**
+   * Computed class list
+   */
+  const classes = $derived(
+    [
+      'dodo-ui-Switch',
+      `size--${size}`,
+      `color--${color}`,
+      `variant--${variant}`,
+      `roundness--${roundness}`,
+      outline && 'outline',
+      className,
+    ].filter(Boolean),
+  );
+
+  const classesCheckEnclosure = $derived(
+    [
+      'CheckEnclosure',
+      'CheckEnclosureBackdrop',
+      `color--${color}`,
+      `variant--${variant}`,
+      outline && 'outline',
+    ].filter(Boolean),
+  );
+</script>
+
+<div class={classes.join(' ')}>
+  <SwitchBitUi.Root
+    {...restProps}
+    bind:checked
+    bind:ref
+    {name}
+    {id}
+    class={classesCheckEnclosure.join(' ')}
+  >
+    <SwitchBitUi.Thumb class="CheckThumb">
+      <span class="CheckThumbInternal"></span>
+    </SwitchBitUi.Thumb>
+  </SwitchBitUi.Root>
+
+  {#if children}
+    <Label class="CheckComponentLabel" for={id}>{@render children?.()}</Label>
+  {/if}
+</div>

package/dist/components/Form/Switch/Switch.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+/**
+ * Public props for Switch
+ */
+export type SwitchProps = SwitchRootProps & {
+    /** Custom CSS class names */
+    class?: string;
+    /** Slot content */
+    children?: Snippet;
+    /** Visual size token */
+    size?: ComponentSize;
+    /** Color theme token */
+    color?: ComponentColor;
+    /** Border radius token (0–3, "pill") */
+    roundness?: ComponentRoundnessShape;
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+    /** Add a border around the button */
+    outline?: boolean;
+};
+import { type SwitchRootProps } from 'bits-ui';
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { ComponentColor } from '../../../attributes/color.js';
+import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+import type { ComponentVariant } from '../../../attributes/variant.js';
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/Form/TextInput/TextInput.scss

@@ -0,0 +1,34 @@
+// ----------------------------------------
+// Component CSS
+// ----------------------------------------
+.dodo-ui-TextInput {
+  flex: 1;
+  border: 0;
+  outline: 0;
+  height: 100%;
+  background-color: transparent;
+  font-family: inherit;
+  color: inherit;
+  letter-spacing: 0.3px;
+  margin: 0;
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    &--normal {
+      font-size: 1rem;
+      padding: 0 calc(var(--dodo-ui-space-small) * 2);
+    }
+
+    &--small {
+      padding: 0 var(--dodo-ui-space);
+      font-size: 0.9rem;
+    }
+
+    &--large {
+      font-size: 1.1rem;
+      padding: 0 calc(var(--dodo-ui-space) * 2);
+    }
+  }
+}

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

@@ -0,0 +1,159 @@
+<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';
+
+  // ------------------------------
+  // 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,
+  });
+</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="Disabled" args={{ placeholder: 'Disabled state…', disabled: true }} />
+
+<Story name="Large" args={{ placeholder: 'Type something…', size: 'large' }} />
+
+<Story name="Pill Shape" args={{ placeholder: 'Type something…', roundness: 'pill' }} />
+
+<Story name="With Before (Prefix Icon)" asChild>
+  <TextInput placeholder="Search…">
+    {#snippet before()}
+      <span style="color: #888;">🔍</span>
+    {/snippet}
+  </TextInput>
+</Story>
+
+<Story name="With After (Suffix Text)" asChild>
+  <TextInput placeholder="Website">
+    {#snippet after()}
+      <span style="color: #888;">.com</span>
+    {/snippet}
+  </TextInput>
+</Story>
+
+<Story name="With Before + After" asChild>
+  <TextInput placeholder="Amount">
+    {#snippet before()}
+      <span style="opacity: 0.6;">$</span>
+    {/snippet}
+
+    {#snippet after()}
+      <span style="opacity: 0.6;">USD</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/{stories/components → components}/Form/TextInput/TextInput.stories.svelte.d.ts

@@ -1,6 +1,7 @@
 import TextInput from './TextInput.svelte';
-import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-export declare const storyTextInputArgTypes: StoryBookArgTypes;
+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;

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

@@ -0,0 +1,140 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  export type TextInputEvent = {
+    currentTarget: EventTarget & HTMLInputElement;
+  };
+
+  export type TextInputFocusEvent = FocusEvent & TextInputEvent;
+
+  /**
+   * Shared base props for the TextInput component.
+   *
+   * These props control the visual wrapper (InputEnclosure) and
+   * common text-input behaviors.
+   */
+  interface TextInputBaseProps {
+    /** Input contents are not used (TextInput manages its own <input>) */
+    children?: never;
+
+    /** Reference to the underlying input element */
+    ref?: HTMLInputElement | null;
+
+    /** Visual size token (e.g. small, normal, large) */
+    size?: ComponentSize;
+
+    /** Border radius token (e.g. 1–3, "pill") */
+    roundness?: ComponentRoundnessShape;
+
+    /** Render an outlined enclosure (shows border) */
+    outline?: boolean;
+
+    /** Custom CSS class names applied to the InputEnclosure */
+    class?: string;
+
+    /** Disabled state of the input */
+    disabled?: boolean;
+
+    /**
+     * Error visual state.
+     *
+     * When true, applies error styling to the enclosure.
+     * Intended for validation errors.
+     */
+    error?: boolean;
+
+    /**
+     * Focused visual state.
+     *
+     * When true, forces focused styling on the enclosure.
+     * Usually controlled automatically via focus/blur.
+     */
+    focused?: boolean;
+
+    /**
+     * Content rendered before the input (prefix).
+     *
+     * Use {#snippet before} in Svelte.
+     */
+    before?: Snippet;
+
+    /**
+     * Content rendered after the input (suffix).
+     *
+     * Use {#snippet after} in Svelte.
+     */
+    after?: Snippet;
+  }
+
+  /**
+   * TextInput component props.
+   *
+   * Renders a semantic <input type="text"> wrapped in InputEnclosure.
+   * Inherits all native HTML input attributes (placeholder, value, name, etc.).
+   */
+  export type TextInputProps = TextInputBaseProps & Omit<HTMLInputAttributes, 'size' | 'children'>;
+</script>
+
+<script lang="ts">
+  import type { ComponentSize } from '../../../attributes/size.js';
+  import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+  import InputEnclosure from '../InputEnclosure/InputEnclosure.svelte';
+
+  let {
+    ref = $bindable(null),
+    size = 'normal',
+    roundness = 1,
+    outline = true,
+    class: className = '',
+    disabled = false,
+    error = false,
+    focused: forcedFocused = false,
+    before,
+    after,
+    onfocus,
+    onblur,
+    ...restProps
+  }: TextInputProps = $props();
+
+  /**
+   * Local focus state used to drive InputEnclosure focus styling.
+   */
+  let isFocused = $state(false);
+
+  function handleFocus(event: FocusEvent) {
+    isFocused = true;
+    onfocus?.(event as TextInputFocusEvent);
+  }
+
+  function handleBlur(event: FocusEvent) {
+    isFocused = false;
+    onblur?.(event as TextInputFocusEvent);
+  }
+
+  /**
+   * Computed class list for the InputEnclosure component.
+   */
+  const classes = $derived(['dodo-ui-TextInput', `size--${size}`].filter(Boolean));
+</script>
+
+<InputEnclosure
+  {size}
+  {roundness}
+  {outline}
+  {disabled}
+  {error}
+  focused={forcedFocused || isFocused}
+  class={className}
+  {before}
+  {after}
+>
+  <input
+    {...restProps}
+    class={classes.join(' ')}
+    bind:this={ref}
+    {disabled}
+    onfocus={handleFocus}
+    onblur={handleBlur}
+  />
+</InputEnclosure>

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

@@ -0,0 +1,66 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type TextInputEvent = {
+    currentTarget: EventTarget & HTMLInputElement;
+};
+export type TextInputFocusEvent = FocusEvent & TextInputEvent;
+/**
+ * Shared base props for the TextInput component.
+ *
+ * These props control the visual wrapper (InputEnclosure) and
+ * common text-input behaviors.
+ */
+interface TextInputBaseProps {
+    /** Input contents are not used (TextInput manages its own <input>) */
+    children?: never;
+    /** Reference to the underlying input element */
+    ref?: HTMLInputElement | null;
+    /** Visual size token (e.g. small, normal, large) */
+    size?: ComponentSize;
+    /** Border radius token (e.g. 1–3, "pill") */
+    roundness?: ComponentRoundnessShape;
+    /** Render an outlined enclosure (shows border) */
+    outline?: boolean;
+    /** Custom CSS class names applied to the InputEnclosure */
+    class?: string;
+    /** Disabled state of the input */
+    disabled?: boolean;
+    /**
+     * Error visual state.
+     *
+     * When true, applies error styling to the enclosure.
+     * Intended for validation errors.
+     */
+    error?: boolean;
+    /**
+     * Focused visual state.
+     *
+     * When true, forces focused styling on the enclosure.
+     * Usually controlled automatically via focus/blur.
+     */
+    focused?: boolean;
+    /**
+     * Content rendered before the input (prefix).
+     *
+     * Use {#snippet before} in Svelte.
+     */
+    before?: Snippet;
+    /**
+     * Content rendered after the input (suffix).
+     *
+     * Use {#snippet after} in Svelte.
+     */
+    after?: Snippet;
+}
+/**
+ * TextInput component props.
+ *
+ * Renders a semantic <input type="text"> wrapped in InputEnclosure.
+ * Inherits all native HTML input attributes (placeholder, value, name, etc.).
+ */
+export type TextInputProps = TextInputBaseProps & Omit<HTMLInputAttributes, 'size' | 'children'>;
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+declare const TextInput: import("svelte").Component<TextInputProps, {}, "ref">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;