@flightlesslabs/dodo-ui 0.19.1 → 0.21.0

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,131 @@
+<script lang="ts" module>
+  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>;
+</script>
+
+<script lang="ts">
+  import type { ComponentSize } from '../../../attributes/size.js';
+  import type { ComponentRoundnessShape } from '../../../attributes/roundness.js';
+  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<HTMLDivElement>(),
+    ...restProps
+  }: InputEnclosureProps = $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,63 @@
+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 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/Label/Label.scss

@@ -0,0 +1,9 @@
+// ----------------------------------------
+// Label styles
+// ----------------------------------------
+
+.dodo-ui-Label {
+  font-size: inherit;
+  color: inherit;
+  font-weight: inherit;
+}

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

@@ -0,0 +1,31 @@
+<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/{stories/components → components}/Form/Label/Label.stories.svelte.d.ts

@@ -1,4 +1,10 @@
 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;

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

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Public props for Label
+   */
+  export interface LabelProps extends LabelRootProps {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Slot content */
+    children?: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import { Label as LabelBitUi, type LabelRootProps } from 'bits-ui';
+
+  let {
+    class: className = '',
+    children,
+    ref = $bindable(null),
+    ...restProps
+  }: LabelProps = $props();
+
+  /**
+   * Computed class list
+   */
+  const classes = $derived(['dodo-ui-Label', className].filter(Boolean));
+</script>
+
+<LabelBitUi.Root {...restProps} class={classes.join(' ')} bind:ref>
+  {@render children?.()}
+</LabelBitUi.Root>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+/**
+ * Public props for Label
+ */
+export interface LabelProps extends LabelRootProps {
+    /** Custom CSS class names */
+    class?: string;
+    /** Slot content */
+    children?: Snippet;
+}
+import { type LabelRootProps } from 'bits-ui';
+declare const Label: import("svelte").Component<LabelProps, {}, "ref">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/Form/RadioGroup/Radio/Radio.scss

@@ -0,0 +1,106 @@
+// ----------------------------------------
+// SCSS maps
+// ----------------------------------------
+
+$roundness: (
+  1: calc(var(--dodo-ui-element-roundness-1) / 2),
+  2: calc(var(--dodo-ui-element-roundness-2) / 2),
+  3: calc(var(--dodo-ui-element-roundness-3) / 2),
+  pill: 999px,
+  full: 50%,
+);
+
+// ----------------------------------------
+// Radio styles
+// ----------------------------------------
+
+.dodo-ui-Radio {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  color: var(--dodo-color-neutral-800);
+
+  .CheckEnclosure {
+    cursor: pointer;
+    transition: background-color 70ms;
+    text-decoration: none;
+    margin: 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-family: inherit;
+    background-color: var(--dodo-color-neutral-100);
+    border-style: solid;
+    border-width: var(--dodo-ui-element-border-width);
+    border-color: transparent;
+    color: inherit;
+    letter-spacing: 0.3px;
+    padding: 0;
+  }
+
+  .CheckComponentLabel {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-left: var(--dodo-ui-space);
+  }
+
+  .CheckComponentCheckContainer {
+    display: flex;
+    align-items: center;
+  }
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    &--normal {
+      font-size: 1rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-normal) / 1.55);
+        width: calc(var(--dodo-ui-element-height-normal) / 1.55);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 0.9rem;
+      }
+    }
+
+    &--small {
+      font-size: 0.9rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-small) / 1.55);
+        width: calc(var(--dodo-ui-element-height-small) / 1.55);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 0.7rem;
+      }
+    }
+
+    &--large {
+      font-size: 1.1rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-large) / 1.55);
+        width: calc(var(--dodo-ui-element-height-large) / 1.55);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 1.145rem;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        .CheckEnclosure {
+          border-radius: $radius;
+        }
+      }
+    }
+  }
+}

package/dist/components/Form/RadioGroup/Radio/Radio.stories.svelte

@@ -0,0 +1,78 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Radio from './Radio.svelte';
+  import type { RadioProps } from './Radio.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 { componentVariantOptions } from '../../../../attributes/variant.js';
+  import RadioGroup from '../RadioGroup.svelte';
+
+  /**
+   * Storybook controls for Radio
+   */
+  export const RadioArgTypes: Partial<ArgTypes<RadioProps>> = {
+    // ------------------------------
+    // 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 Radio',
+      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: componentRoundnessOptions,
+      description: 'Border radius token',
+      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'full' } },
+    },
+    outline: {
+      control: { type: 'boolean' },
+      description: 'Render outlined style',
+      table: { category: 'API', subcategory: 'Appearance', defaultValue: { summary: 'true' } },
+    },
+  };
+
+  const { Story } = defineMeta({
+    component: Radio,
+    tags: ['autodocs'],
+    argTypes: RadioArgTypes,
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default" asChild>
+  <RadioGroup id="Default">
+    <Radio id="Default-1" value="1">One</Radio>
+    <Radio id="Default-2" value="2">Two</Radio>
+    <Radio id="Default-3" value="3">Three</Radio>
+  </RadioGroup>
+</Story>

package/dist/{stories/components/Form → components/Form/RadioGroup}/Radio/Radio.stories.svelte.d.ts

@@ -1,6 +1,10 @@
 import Radio from './Radio.svelte';
-import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-export declare const storyRadioArgTypes: StoryBookArgTypes;
+import type { RadioProps } from './Radio.svelte';
+import type { ArgTypes } from 'storybook/internal/csf';
+/**
+ * Storybook controls for Radio
+ */
+export declare const RadioArgTypes: Partial<ArgTypes<RadioProps>>;
 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/RadioGroup/Radio/Radio.svelte

@@ -0,0 +1,89 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Public props for Radio
+   */
+  export type RadioProps = RadioGroupItemProps & {
+    /** 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", ""full) */
+    roundness?: ComponentRoundness;
+
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+
+    /** Add a border around the button */
+    outline?: boolean;
+  };
+</script>
+
+<script lang="ts">
+  import { RadioGroup, type RadioGroupItemProps } from 'bits-ui';
+  import type { ComponentSize } from '../../../../attributes/size.js';
+  import type { ComponentColor } from '../../../../attributes/color.js';
+  import type { ComponentRoundness } from '../../../../attributes/roundness.js';
+  import type { ComponentVariant } from '../../../../attributes/variant.js';
+  import Icon from '@iconify/svelte';
+  import Label from '../../Label/Label.svelte';
+
+  let {
+    class: className = '',
+    children,
+    name,
+    size = 'normal',
+    color = 'neutral',
+    roundness = 'full',
+    id,
+    outline = true,
+    variant = 'text',
+    ...restProps
+  }: RadioProps = $props();
+
+  /**
+   * Computed class list
+   */
+  const classes = $derived(
+    [
+      'dodo-ui-Radio',
+      `size--${size}`,
+      `color--${color}`,
+      `variant--${variant}`,
+      `roundness--${roundness}`,
+      outline && 'outline',
+      className,
+    ].filter(Boolean),
+  );
+
+  const classesCheckEnclosure = $derived(
+    ['CheckEnclosure', `color--${color}`, `variant--${variant}`, outline && 'outline'].filter(
+      Boolean,
+    ),
+  );
+</script>
+
+<div class={classes.join(' ')}>
+  <RadioGroup.Item {...restProps} {name} {id} class={classesCheckEnclosure.join(' ')}>
+    {#snippet children({ checked })}
+      <div class="CheckComponentCheckContainer">
+        {#if checked}
+          <Icon icon="material-symbols:circle" />
+        {/if}
+      </div>
+    {/snippet}
+  </RadioGroup.Item>
+
+  {#if children}
+    <Label class="CheckComponentLabel" for={id}>{@render children?.()}</Label>
+  {/if}
+</div>

package/dist/components/Form/RadioGroup/Radio/Radio.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+/**
+ * Public props for Radio
+ */
+export type RadioProps = RadioGroupItemProps & {
+    /** 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", ""full) */
+    roundness?: ComponentRoundness;
+    /** Visual variant (e.g. solid, text) */
+    variant?: ComponentVariant;
+    /** Add a border around the button */
+    outline?: boolean;
+};
+import { type RadioGroupItemProps } from 'bits-ui';
+import type { ComponentSize } from '../../../../attributes/size.js';
+import type { ComponentColor } from '../../../../attributes/color.js';
+import type { ComponentRoundness } from '../../../../attributes/roundness.js';
+import type { ComponentVariant } from '../../../../attributes/variant.js';
+declare const Radio: import("svelte").Component<RadioProps, {}, "">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/Form/RadioGroup/RadioGroup.scss

@@ -0,0 +1,7 @@
+.dodo-ui-RadioGroup {
+  &[data-orientation='horizontal'] {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+}