@flightlesslabs/dodo-ui 0.19.0 → 0.20.0

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;
+  }
+}

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

@@ -0,0 +1,172 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import RadioGroup from './RadioGroup.svelte';
+  import type { RadioGroupProps } from './RadioGroup.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import Radio from './Radio/Radio.svelte';
+  import Theme from '../../Layout/Theme/Theme.svelte';
+
+  /**
+   * Storybook controls for RadioGroup
+   */
+  export const RadioGroupArgTypes: Partial<ArgTypes<RadioGroupProps>> = {
+    // ------------------------------
+    // 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' } },
+    orientation: {
+      control: { type: 'select' },
+      options: ['horizontal', 'vertical'],
+      table: {
+        category: 'API',
+        subcategory: 'Base',
+        defaultValue: { summary: 'vertical' },
+      },
+    },
+  };
+
+  const { Story } = defineMeta({
+    component: RadioGroup,
+    tags: ['autodocs'],
+    argTypes: RadioGroupArgTypes,
+  });
+
+  let myValue = $state<string>('3');
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<!-- ------------------------------ -->
+<!-- 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>
+
+<Story name="Selected" asChild>
+  <RadioGroup id="Selected" bind:value={myValue}>
+    <Radio id="Selected-1" value="1">One</Radio>
+    <Radio id="Selected-2" value="2">Two</Radio>
+    <Radio id="Selected-3" value="3">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="Horizontal" asChild>
+  <RadioGroup orientation="horizontal" id="Horizontal">
+    <Radio id="Horizontal-1" value="1">One</Radio>
+    <Radio id="Horizontal-2" value="2">Two</Radio>
+    <Radio id="Horizontal-3" value="3">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="Solid" asChild>
+  <RadioGroup id="Solid" value="1">
+    <Radio id="Solid-1" value="1" variant="solid">One</Radio>
+    <Radio id="Solid-2" value="2" variant="solid">Two</Radio>
+    <Radio id="Solid-3" value="3" variant="solid">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="NoOutline" asChild>
+  <RadioGroup id="NoOutline" value="1">
+    <Radio id="NoOutline-1" value="1" outline={false}>One</Radio>
+    <Radio id="NoOutline-2" value="2" outline={false}>Two</Radio>
+    <Radio id="NoOutline-3" value="3" outline={false}>Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="Disabled" asChild>
+  <RadioGroup disabled id="Disabled" value="1">
+    <Radio id="Disabled-1" value="1">One</Radio>
+    <Radio id="Disabled-2" value="2">Two</Radio>
+    <Radio id="Disabled-3" value="3">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="DisabledRadio" asChild>
+  <RadioGroup id="DisabledRadio" value="2">
+    <Radio id="DisabledRadio-1" value="1" disabled>One (disabled)</Radio>
+    <Radio id="DisabledRadio-2" value="2">Two</Radio>
+    <Radio id="DisabledRadio-3" value="3">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="Primary" asChild>
+  <RadioGroup id="Primary" value="1">
+    <Radio id="Primary-1" value="1" color="primary">One</Radio>
+    <Radio id="Primary-2" value="2" color="primary">Two</Radio>
+    <Radio id="Primary-3" value="3" color="primary">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="Large" asChild>
+  <RadioGroup id="Large" value="1">
+    <Radio id="Large-1" value="1" size="large">One</Radio>
+    <Radio id="Large-2" value="2" size="large">Two</Radio>
+    <Radio id="Large-3" value="3" size="large">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="Safe" asChild>
+  <RadioGroup id="Safe" value="1">
+    <Radio id="Safe-1" value="1" color="safe">One</Radio>
+    <Radio id="Safe-2" value="2" color="safe">Two</Radio>
+    <Radio id="Safe-3" value="3" color="safe">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="Danger" asChild>
+  <RadioGroup id="Danger" value="1">
+    <Radio id="Danger-1" value="1" color="danger">One</Radio>
+    <Radio id="Danger-2" value="2" color="danger">Two</Radio>
+    <Radio id="Danger-3" value="3" color="danger">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="onValueChange (Actions)" asChild>
+  <RadioGroup
+    id="onValueChange"
+    value="1"
+    onValueChange={(value: string) => {
+      alert('onValueChange');
+      console.log('onValueChange', value);
+    }}
+  >
+    <Radio id="onValueChange-1" value="1">One</Radio>
+    <Radio id="onValueChange-2" value="2">Two</Radio>
+    <Radio id="onValueChange-3" value="3">Three</Radio>
+  </RadioGroup>
+</Story>
+
+<Story name="Light Theme" asChild>
+  <Theme type="light">
+    <RadioGroup value="1">
+      <Radio id="Light_theme-1" value="1">One</Radio>
+      <Radio id="Light_theme-2" value="2">Two</Radio>
+      <Radio id="Light_theme-3" value="3">Three</Radio>
+    </RadioGroup>
+  </Theme>
+</Story>
+
+<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
+  <Theme type="dark">
+    <RadioGroup value="1">
+      <Radio id="Dark_theme-1" value="1">One</Radio>
+      <Radio id="Dark_theme-2" value="2">Two</Radio>
+      <Radio id="Dark_theme-3" value="3">Three</Radio>
+    </RadioGroup>
+  </Theme>
+</Story>

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

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

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

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

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

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

package/dist/components/Form/Select/Select.scss

@@ -0,0 +1,102 @@
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-SelectPopup-color: var(--dodo-color-black);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-SelectPopup-color: var(--dodo-color-neutral-800);
+}
+
+// Select
+.dodo-ui-Select {
+  button[data-combobox-trigger] {
+    font-size: 1.5em;
+  }
+
+  input[data-combobox-input] {
+    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 {
+      input[data-combobox-input] {
+        font-size: 1rem;
+        padding: 0 calc(var(--dodo-ui-space-small) * 2);
+      }
+
+      button[data-combobox-trigger] {
+        margin: 0 calc(var(--dodo-ui-space) / 2.5);
+      }
+    }
+
+    &--small {
+      input[data-combobox-input] {
+        padding: 0 var(--dodo-ui-space);
+        font-size: 0.9rem;
+      }
+
+      button[data-combobox-trigger] {
+        margin: 0 calc(var(--dodo-ui-space--small) / 2.5);
+      }
+    }
+
+    &--large {
+      input[data-combobox-input] {
+        font-size: 1.1rem;
+        padding: 0 calc(var(--dodo-ui-space) * 2);
+      }
+
+      button[data-combobox-trigger] {
+        margin: 0 calc(var(--dodo-ui-space--large) / 2.5);
+      }
+    }
+  }
+}
+
+.SelectPopup {
+  --SelectPopup-width-default: calc(
+    var(--dodo-ui-element-height-normal) / 1.2 + var(--bits-combobox-anchor-width) +
+      var(--dodo-ui-space)
+  );
+
+  width: var(--SelectPopup-width, var(--SelectPopup-width-default));
+  height: var(--SelectPopup-height, initial);
+  min-width: var(--SelectPopup-min-width, var(--SelectPopup-width-default));
+  min-height: var(--SelectPopup-min-height, initial);
+  max-width: var(--SelectPopup-max-width, initial);
+  max-height: var(--SelectPopup-max-height, 400px);
+  color: var(--dodo-ui-SelectPopup-color);
+
+  [data-combobox-item] {
+    padding: var(--dodo-ui-space);
+
+    &[data-selected] {
+      background-color: var(--dodo-color-primary-100);
+    }
+
+    &[data-highlighted] {
+      background-color: var(--dodo-color-primary-200);
+    }
+  }
+
+  [data-combobox-scroll-down-button],
+  [data-combobox-scroll-up-button] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+  }
+}

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

@@ -0,0 +1,160 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Select from './Select.svelte';
+  import type { SelectProps } from './Select.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 options = [
+    { value: 'one', label: 'One' },
+    { value: 'two', label: 'Two' },
+    { value: 'three', label: 'Three' },
+    { value: 'four', label: 'Four' },
+    { value: 'five', label: 'Five' },
+    { value: 'six', label: 'Six' },
+    { value: 'seven', label: 'Seven' },
+    { value: 'eight', label: 'Eight' },
+    { value: 'nine', label: 'Nine' },
+    { value: 'ten', label: 'Ten' },
+    { value: 'eleven', label: 'Eleven' },
+    { value: 'twelve', label: 'Twelve' },
+    { value: 'thirteen', label: 'Thirteen' },
+    { value: 'fourteen', label: 'Fourteen' },
+    { value: 'fifteen', label: 'Fifteen' },
+    { value: 'sixteen', label: 'Sixteen' },
+    { value: 'seventeen', label: 'Seventeen' },
+    { value: 'eighteen', label: 'Eighteen' },
+    { value: 'nineteen', label: 'Nineteen' },
+    { value: 'twenty', label: 'Twenty' },
+    { value: 'twentyOne', label: 'Twenty One' },
+    { value: 'twentyTwo', label: 'Twenty Two' },
+    { value: 'twentyThree', label: 'Twenty Three' },
+    { value: 'twentyFour', label: 'Twenty Four' },
+    { value: 'twentyFive', label: 'Twenty Five' },
+  ];
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storySelectArgTypes: Partial<ArgTypes<SelectProps>> = {
+    // ------------------------------
+    // Core
+    // ------------------------------
+    class: { table: { category: 'API', subcategory: 'Base' } },
+    value: {
+      control: { type: 'text' },
+      table: { category: 'API', subcategory: 'Base' },
+    },
+    name: { table: { category: 'API', subcategory: 'Base' } },
+    options: { table: { category: 'API', subcategory: 'Base' } },
+    searchable: {
+      control: { type: 'boolean' },
+      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',
+    },
+  };
+
+  // ------------------------------
+  // Storybook Meta
+  // ------------------------------
+  const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    args: {
+      options,
+    },
+  });
+
+  let myValue = $state<string | undefined>(options[1].value);
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default" args={{ placeholder: 'Select an option' }} />
+
+<Story name="Searchable" args={{ searchable: true, placeholder: 'Search a number' }} />
+
+<Story name="Selected" asChild>
+  <Select {options} bind:value={myValue} />
+</Story>
+
+<Story name="Disabled" args={{ placeholder: 'Select an option', disabled: true }} />
+
+<Story
+  name="OnChange (Actions)"
+  args={{
+    onValueChange: (val: string) => {
+      alert('OnChange');
+      console.log('OnChange', val);
+    },
+  }}
+/>
+
+<Story name="Light Theme" asChild>
+  <Theme type="light">
+    <Select {options} />
+  </Theme>
+</Story>
+
+<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
+  <Theme type="dark">
+    <Select {options} popupProps={{ theme: 'dark' }} />
+  </Theme>
+</Story>

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

@@ -1,7 +1,7 @@
-import Select, { type SelectOption } from './Select.svelte';
-import type { StoryBookArgTypes } from '../../../../storybook-types.js';
-export declare const storySelectArgTypes: StoryBookArgTypes;
-export declare const selectOptions: SelectOption[];
+import Select from './Select.svelte';
+import type { SelectProps } from './Select.svelte';
+import type { ArgTypes } from 'storybook/internal/csf';
+export declare const storySelectArgTypes: Partial<ArgTypes<SelectProps>>;
 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;