@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

package/src/lib/components/Form/Checkbox/Checkbox.scss

@@ -0,0 +1,105 @@
+// ----------------------------------------
+// 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,
+);
+
+// ----------------------------------------
+// Checkbox styles
+// ----------------------------------------
+
+.dodo-ui-Checkbox {
+  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.6);
+        width: calc(var(--dodo-ui-element-height-normal) / 1.6);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 1.7rem;
+      }
+    }
+
+    &--small {
+      font-size: 0.9rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-small) / 1.6);
+        width: calc(var(--dodo-ui-element-height-small) / 1.6);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 1.5rem;
+      }
+    }
+
+    &--large {
+      font-size: 1.1rem;
+      .CheckEnclosure {
+        height: calc(var(--dodo-ui-element-height-large) / 1.6);
+        width: calc(var(--dodo-ui-element-height-large) / 1.6);
+      }
+
+      .CheckComponentCheckContainer {
+        font-size: 2.2rem;
+      }
+    }
+  }
+
+  // ----------------------------------------
+  // Roundness
+  // ----------------------------------------
+  &.roundness {
+    @each $name, $radius in $roundness {
+      &--#{$name} {
+        .CheckEnclosure {
+          border-radius: $radius;
+        }
+      }
+    }
+  }
+}

package/src/lib/components/Form/Checkbox/Checkbox.stories.svelte

@@ -0,0 +1,123 @@
+<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 '$lib/attributes/color.js';
+  import { componentSizeOptions } from '$lib/attributes/size.js';
+  import { componenRoundnessShapeOptions } from '$lib/attributes/roundness.js';
+  import Theme from '$lib/components/Layout/Theme/Theme.svelte';
+  import { componentVariantOptions } from '$lib/attributes/variant.js';
+
+  /**
+   * 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,
+  });
+
+  let myValue = $state<boolean>(true);
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default" args={{ id: 'Default' }}>Check this text</Story>
+
+<Story name="Checked" asChild>
+  <Checkbox id="Checked" bind:checked={myValue}>Check this text</Checkbox>
+</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="Indeterminate" args={{ id: 'indeterminate', indeterminate: true }}>
+  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">
+    <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/src/lib/components/Form/Checkbox/Checkbox.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+
+  /**
+   * Public props for Checkbox
+   */
+  export type CheckboxProps = CheckboxRootProps & {
+    /** 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 { Checkbox as CheckboxBitUi, type CheckboxRootProps } from 'bits-ui';
+  import Label from '../Label/Label.svelte';
+  import Icon from '@iconify/svelte';
+  import type { ComponentSize } from '$lib/attributes/size.js';
+  import type { ComponentColor } from '$lib/attributes/color.js';
+  import type { ComponentRoundnessShape } from '$lib/attributes/roundness.js';
+  import type { ComponentVariant } from '$lib/attributes/variant.js';
+
+  let {
+    class: className = '',
+    children,
+    name,
+    size = 'normal',
+    color = 'neutral',
+    roundness = 1,
+    id,
+    outline = true,
+    variant = 'text',
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    ref = $bindable(null),
+    ...restProps
+  }: CheckboxProps = $props();
+
+  /**
+   * Computed class list
+   */
+  const classes = $derived(
+    [
+      'dodo-ui-Checkbox',
+      `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(' ')}>
+  <CheckboxBitUi.Root
+    {...restProps}
+    {name}
+    {id}
+    bind:checked
+    bind:indeterminate
+    bind:ref
+    class={classesCheckEnclosure.join(' ')}
+  >
+    {#snippet children({ checked, indeterminate })}
+      <div class="CheckComponentCheckContainer">
+        {#if indeterminate}
+          <Icon icon="material-symbols:check-indeterminate-small" />
+        {:else if checked}
+          <Icon icon="material-symbols:check-small" />
+        {/if}
+      </div>
+    {/snippet}
+  </CheckboxBitUi.Root>
+
+  {#if children}
+    <Label class="CheckComponentLabel" for={id}>{@render children?.()}</Label>
+  {/if}
+</div>

package/src/lib/components/Form/DatePicker/DatePicker.scss

@@ -0,0 +1,81 @@
+
+
+.dodo-ui-DatePicker {
+  button[data-popover-trigger] {
+    font-size: 1.4em;
+  }
+
+  [data-date-field-input] {
+    flex: 1;
+    border: 0;
+    outline: 0;
+    height: 100%;
+    background-color: transparent;
+    font-family: inherit;
+    color: inherit;
+    letter-spacing: 0.3px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  [data-date-field-segment] {
+    height: 80%;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  [data-segment='literal'] {
+    color: var(--dodo-color-neutral-500);
+  }
+
+  // ----------------------------------------
+  // Sizes
+  // ----------------------------------------
+  &.size {
+    &--normal {
+      [data-date-field-input] {
+        font-size: 1rem;
+        padding: 0 calc(var(--dodo-ui-space-small) * 2);
+      }
+
+      button[data-popover-trigger] {
+        margin: 0 calc(var(--dodo-ui-space) / 2.5);
+      }
+
+      [data-date-field-segment] {
+        padding: 0 calc(var(--dodo-ui-space) / 3);
+      }
+    }
+
+    &--small {
+      [data-date-field-input] {
+        padding: 0 var(--dodo-ui-space);
+        font-size: 0.9rem;
+      }
+
+      button[data-popover-trigger] {
+        margin: 0 calc(var(--dodo-ui-space--small) / 2.5);
+      }
+
+      [data-date-field-segment] {
+        padding: 0 calc(var(--dodo-ui-space-small) / 3);
+      }
+    }
+
+    &--large {
+      [data-date-field-input] {
+        font-size: 1.1rem;
+        padding: 0 calc(var(--dodo-ui-space) * 2);
+      }
+
+      button[data-popover-trigger] {
+        margin: 0 calc(var(--dodo-ui-space--large) / 2.5);
+      }
+
+      [data-date-field-segment] {
+        padding: 0 calc(var(--dodo-ui-space-large) / 3);
+      }
+    }
+  }
+}

package/src/lib/components/Form/DatePicker/DatePicker.stories.svelte

@@ -0,0 +1,115 @@
+<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 '$lib/attributes/size.js';
+  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
+  import { CalendarDate, type DateValue } from '@internationalized/date';
+  import Theme from '$lib/components/Layout/Theme/Theme.svelte';
+
+  // ------------------------------
+  // 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,
+  });
+
+  let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Default" />
+
+<!-- let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7)); [docs](https://bits-ui.com/docs/components/date-picker) -->
+<Story name="Selected" asChild>
+  <DatePicker bind:value={myValue} />
+</Story>
+
+<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/src/lib/components/Form/DatePicker/DatePicker.svelte

@@ -0,0 +1,129 @@
+<script lang="ts" module>
+  import type { ComponentRoundnessShape } from '$lib/attributes/roundness.js';
+  import type { ComponentSize } from '$lib/attributes/size.js';
+
+  export type DatePickerProps = DatePickerRootPropsWithoutHTML & {
+    /** 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;
+
+    /**
+     * 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;
+
+    /** Select placeholder */
+    placeholder?: string;
+
+    /**
+     * Date display format for the input segments.
+     *
+     * Controls the visual order and separators of the date parts
+     * (e.g. "dd/mm/yyyy", "mm-dd-yyyy", "yyyy.mm.dd").
+     *
+     * This only affects how the date is rendered in the input,
+     * not the internal parsing or keyboard interaction behavior
+     * of the DatePicker.
+     */
+    dateFormat?: DatePickerFormat;
+
+    /** bits ui dateFieldInputProps */
+    dateFieldInputProps?: DateFieldInputProps;
+
+    /** bits ui datePickerTriggerProps */
+    datePickerTriggerProps?: DatePickerTriggerProps;
+
+    /** Props for Popup */
+    popupProps?: DatePickerPopupProps;
+  };
+</script>
+
+<script lang="ts">
+  import {
+    DatePicker as DatePickerBitsUi,
+    type DateFieldInputProps,
+    type DatePickerRootPropsWithoutHTML,
+    type DatePickerTriggerProps,
+  } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import DatepickerInput from './DatePickerInput/DatePickerInput.svelte';
+  import type { DatePickerFormat } from './DatePickerInput/utils.js';
+  import DatePickerPopup, {
+    type DatePickerPopupProps,
+  } from './DatePickerPopup/DatePickerPopup.svelte';
+
+  let {
+    size = 'normal',
+    roundness = 1,
+    outline = true,
+    class: className = '',
+    disabled = false,
+    error = false,
+    focused: forcedFocused = false,
+    before,
+    after,
+    open = $bindable(false),
+    value = $bindable(undefined),
+    placeholder,
+    weekdayFormat = 'short',
+    fixedWeeks = true,
+    dateFieldInputProps,
+    datePickerTriggerProps,
+    weekStartsOn = 1,
+    dateFormat = 'dd/mm/yyyy',
+    popupProps,
+    ...restProps
+  }: DatePickerProps = $props();
+</script>
+
+<DatePickerBitsUi.Root {...restProps} bind:value {weekdayFormat} {weekStartsOn} {fixedWeeks}>
+  <DatepickerInput
+    {size}
+    {roundness}
+    {outline}
+    class={className}
+    {disabled}
+    {error}
+    {dateFieldInputProps}
+    {datePickerTriggerProps}
+    focused={forcedFocused}
+    {before}
+    {after}
+    {placeholder}
+    {dateFormat}
+  />
+  <DatePickerPopup {...popupProps} />
+</DatePickerBitsUi.Root>