@flightlesslabs/dodo-ui 0.19.0 → 1.0.0--beta-1

package/dist/components/Form/InputEnclosure/InputEnclosure.scss

@@ -0,0 +1,105 @@
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
+  --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-500);
+
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
+  --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
+  --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
+  --dodo-ui-InputEnclosure-safe-border-color: var(--dodo-color-safe-600);
+
+  --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
+  --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
+}
+
+// ----------------------------------------
+// SCSS maps
+// ----------------------------------------
+$sizes: (
+  small: var(--dodo-ui-element-height-small),
+  normal: var(--dodo-ui-element-height-normal),
+  large: var(--dodo-ui-element-height-large),
+);
+
+$roundness: (
+  1: var(--dodo-ui-element-roundness-1),
+  2: var(--dodo-ui-element-roundness-2),
+  3: var(--dodo-ui-element-roundness-3),
+  pill: 999px,
+);
+
+// Visual states → border colors
+$states: (
+  focused: var(--dodo-ui-InputEnclosure-focus-border-color),
+  error: var(--dodo-ui-InputEnclosure-error-border-color),
+);
+
+// ----------------------------------------
+// Component CSS
+// ----------------------------------------
+.dodo-ui-InputEnclosure {
+  display: flex;
+  overflow: hidden;
+  color: var(--dodo-color-neutral-800);
+  transition:
+    border-color 150ms,
+    background-color 150ms,
+    color 150ms;
+  border: 0;
+
+  &.outline {
+    border-style: solid;
+    border-width: var(--dodo-ui-element-border-width);
+    border-color: var(--dodo-ui-InputEnclosure-border-color);
+  }
+
+  // ----------------------------------------
+  // Visual states (focused, error)
+  // ----------------------------------------
+  @each $state, $color in $states {
+    &.#{$state} {
+      border-color: $color;
+    }
+  }
+
+  // ----------------------------------------
+  // Disabled
+  // ----------------------------------------
+  &.disabled {
+    cursor: not-allowed;
+    background-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+    color: var(--dodo-ui-InputEnclosure-disabled-color);
+    border-color: var(--dodo-ui-InputEnclosure-disabled-bg);
+  }
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    @each $name, $height in $sizes {
+      &--#{$name} {
+        height: $height;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        border-radius: $radius;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,126 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import InputEnclosure from './InputEnclosure.svelte';
+import { componentSizeOptions } from '../../../attributes/size.js';
+import { componentRoundnessOptions } from '../../../attributes/roundness.js';
+// ------------------------------
+// Storybook ArgTypes
+// ------------------------------
+export const storyInputEnclosureArgTypes = {
+    // ------------------------------
+    // 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' },
+    },
+    ref: { 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,
+});
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default (Outlined)">
+  <input placeholder="Type something…" />
+</Story>
+
+<Story name="No Outline" args={{ outline: false }}>
+  <input placeholder="No outline…" />
+</Story>
+
+<Story name="Focused" args={{ focused: true }}>
+  <input placeholder="Focused state…" />
+</Story>
+
+<Story name="Error" args={{ error: true }}>
+  <input placeholder="Error state…" />
+</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>
+  <input placeholder="Disabled state…" disabled />
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <input placeholder="Large input…" />
+</Story>
+
+<Story name="Pill Shape" args={{ roundness: 'pill' }}>
+  <input placeholder="Pill shaped input…" />
+</Story>
+
+<Story name="With Before (Icon Prefix)" asChild>
+  <InputEnclosure>
+    {#snippet before()}
+      <span style="color: #888;">🔍</span>
+    {/snippet}
+
+    <input placeholder="Search…" />
+  </InputEnclosure>
+</Story>
+
+<Story name="With After (Suffix Text)" asChild>
+  <InputEnclosure>
+    {#snippet after()}
+      <span style="color: #888;">.com</span>
+    {/snippet}
+
+    <input placeholder="Website" />
+  </InputEnclosure>
+</Story>

package/dist/{stories/developer tools/components/InputEnclosure/InputEnclosure.stories.svelte.d.ts → components/Form/InputEnclosure/InputEnclosure.stories.svelte.d.ts}

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

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

@@ -0,0 +1,42 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import './InputEnclosure.scss';
+import InputAffix from './InputAffix.svelte';
+/**
+ * InputEnclosure component runtime props.
+ *
+ * These props are destructured from `$props()` and mapped to
+ * CSS utility classes that control visual appearance.
+ */
+let { children, size = 'normal', roundness = 1, outline = true, class: className = '', disabled = false, error = false, focused = false, before, after, ref = $bindable(), ...restProps } = $props();
+/**
+ * Computed class list for the InputEnclosure component.
+ */
+const classes = $derived([
+    'dodo-ui-InputEnclosure',
+    `size--${size}`,
+    `roundness--${roundness}`,
+    outline && 'outline',
+    focused && 'focused',
+    error && 'error',
+    disabled && 'disabled',
+    className,
+].filter(Boolean));
+</script>
+
+<div {...restProps} class={classes.join(' ')} bind:this={ref}>
+  {#if before}
+    <InputAffix placement="before">
+      {@render before()}
+    </InputAffix>
+  {/if}
+
+  {@render children?.()}
+
+  {#if after}
+    <InputAffix placement="after">
+      {@render after()}
+    </InputAffix>
+  {/if}
+</div>

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

@@ -0,0 +1,64 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Shared base props for the InputEnclosure component.
+ *
+ * These props apply to the root <div> wrapper that visually encloses
+ * form controls such as inputs, selects, or custom fields.
+ */
+interface InputEnclosureBaseProps {
+    /** InputEnclosure contents (typically an input or control slot) */
+    children?: Snippet;
+    /** Reference to the underlying root div element */
+    ref?: HTMLDivElement;
+    /** 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 */
+    class?: string;
+    /** Disabled visual state of the enclosure */
+    disabled?: boolean;
+    /**
+     * Error visual state.
+     *
+     * When true, applies error styling (e.g. red border).
+     * Intended for validation errors.
+     */
+    error?: boolean;
+    /**
+     * Focused visual state.
+     *
+     * When true, applies focus styling to the enclosure.
+     * Useful when the enclosed input is focused but focus
+     * styling is handled at the wrapper level.
+     */
+    focused?: boolean;
+    /**
+     * Content rendered before the input (e.g. icon, prefix, button).
+     *
+     * This content is rendered inside an internal affix wrapper.
+     */
+    before?: Snippet;
+    /**
+     * Content rendered after the input (e.g. clear button, suffix, icon).
+     *
+     * This content is rendered inside an internal affix wrapper.
+     */
+    after?: Snippet;
+}
+/**
+ * InputEnclosure component props.
+ *
+ * Renders a semantic <div> wrapper around form controls.
+ * Inherits all native HTML div attributes (e.g. id, style, data-*, aria-*).
+ */
+export type InputEnclosureProps = InputEnclosureBaseProps & HTMLAttributes<HTMLDivElement>;
+import './InputEnclosure.scss';
+import type { ComponentSize } from '../../../attributes/size.js';
+import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+declare const InputEnclosure: import("svelte").Component<InputEnclosureProps, {}, "ref">;
+type InputEnclosure = ReturnType<typeof InputEnclosure>;
+export default InputEnclosure;

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,148 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import TextInput from './TextInput.svelte';
+import { componentSizeOptions } from '../../../attributes/size.js';
+import { componentRoundnessOptions } from '../../../attributes/roundness.js';
+// ------------------------------
+// Storybook ArgTypes
+// ------------------------------
+export const storyTextInputArgTypes = {
+    children: {
+        table: { disable: true },
+        control: false,
+    },
+    // ------------------------------
+    // Core
+    // ------------------------------
+    ref: { table: { category: 'API', subcategory: 'Base' } },
+    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">
+  <TextInput placeholder="Type something…" />
+</Story>
+
+<Story name="Focused" args={{ focused: true }}>
+  <TextInput placeholder="Focused state…" />
+</Story>
+
+<Story name="Error" args={{ error: true }}>
+  <TextInput placeholder="Error state…" />
+</Story>
+
+<Story name="Disabled" args={{ disabled: true }}>
+  <TextInput placeholder="Disabled state…" />
+</Story>
+
+<Story name="Large" args={{ size: 'large' }}>
+  <TextInput placeholder="Large input…" />
+</Story>
+
+<Story name="Pill Shape" args={{ roundness: 'pill' }}>
+  <TextInput placeholder="Pill shaped input…" />
+</Story>
+
+<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>

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,44 @@
+<script lang="ts" module>export {};
+</script>
+
+<script lang="ts">import './TextInput.scss';
+import InputEnclosure from '../InputEnclosure/InputEnclosure.svelte';
+let { ref = $bindable(), size = 'normal', roundness = 1, outline = true, class: className = '', disabled = false, error = false, focused: forcedFocused = false, before, after, onfocus, onblur, ...restProps } = $props();
+/**
+ * Local focus state used to drive InputEnclosure focus styling.
+ */
+let isFocused = $state(false);
+function handleFocus(event) {
+    isFocused = true;
+    onfocus?.(event);
+}
+function handleBlur(event) {
+    isFocused = false;
+    onblur?.(event);
+}
+/**
+ * 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,67 @@
+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;
+    /** 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 './TextInput.scss';
+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;

package/dist/components/Form/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Button, } from './Button/Button.svelte';
+export { default as TextInput, } from './TextInput/TextInput.svelte';
+export { default as InputEnclosure, type InputEnclosureProps, } from './InputEnclosure/InputEnclosure.svelte';

package/dist/components/Form/index.js

@@ -0,0 +1,11 @@
+export { default as Button,
+// type ButtonAsButtonProps,
+// type ButtonAsAnchorProps,
+// type ButtonProps,
+ } from './Button/Button.svelte';
+export { default as TextInput,
+// type TextInputEvent,
+// type TextInputFocusEvent,
+// type TextInputProps,
+ } from './TextInput/TextInput.svelte';
+export { default as InputEnclosure, } from './InputEnclosure/InputEnclosure.svelte';