@flightlesslabs/dodo-ui 0.22.2 → 0.24.0

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

@@ -1,132 +0,0 @@
-<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';
-
-  const description = `
- A simple Checkbox component based on bits-ui [checkbox](https://bits-ui.com/docs/components/checkbox).
-
- \`\`\`ts
- import { Checkbox } from '@flightlesslabs/dodo-ui';
- \`\`\`
-`;
-
-  /**
-   * 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,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-      },
-    },
-  });
-
-  let myValue = $state<boolean>(true);
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default" args={{ id: 'Default' }}>Check this text</Story>
-
-<Story name="Controlled" asChild>
-  <Checkbox id="Checked" bind:checked={myValue}>Check this text</Checkbox>
-</Story>
-
-<Story
-  name="OnChange (Actions)"
-  args={{
-    id: 'OnChange_Action',
-    onCheckedChange: (checked: boolean) => {
-      alert('OnChange');
-      console.log('OnChange', checked);
-    },
-  }}
->
-  Check this text
-</Story>
-
-<Story name="Indeterminate" args={{ id: 'indeterminate', indeterminate: true }}>
-  Check this text
-</Story>
-
-<Story name="Color" args={{ id: 'Safe', color: 'safe' }}>Check this text</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="Size" args={{ id: 'Size', size: 'large' }}>Check this text</Story>
-
-<Story name="Disabled" args={{ disabled: true }}>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/DatePicker/DatePicker.scss

@@ -1,55 +0,0 @@
-.dodo-ui-DatePicker {
-  button[data-popover-trigger] {
-    font-size: 1.4em;
-  }
-
-  [data-date-field-input] {
-    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 {
-      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 {
-      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 {
-      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

@@ -1,139 +0,0 @@
-<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';
-
-  const description = `
- A sleek, plug and play Date Picker based on bits-ui [date-picker](https://bits-ui.com/docs/components/date-picker).
- \`\`\`ts
- import { DatePicker } from '@flightlesslabs/dodo-ui';
-
-import { CalendarDate, type DateValue } from '@internationalized/date';
- \`\`\`
-`;
-
-  // ------------------------------
-  // 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,
-    parameters: {
-      docs: {
-        description: {
-          component: description,
-        },
-        story: { height: '420px' },
-      },
-    },
-  });
-
-  let myValue = $state<DateValue>(new CalendarDate(2026, 4, 7));
-</script>
-
-<!-- ------------------------------ -->
-<!-- Stories -->
-<!-- ------------------------------ -->
-
-<Story name="Default" />
-
-<Story name="Controlled" asChild>
-  <DatePicker bind:value={myValue} />
-</Story>
-
-<Story name="Starts On Sunday" args={{ weekStartsOn: 0 }} />
-
-<Story name="Date Format" args={{ dateFormat: 'mm/dd/yyyy' }} />
-
-<Story name="Min Date" args={{ minValue: new CalendarDate(2026, 4, 7) }} />
-
-<Story name="Max Date" args={{ maxValue: new CalendarDate(2026, 4, 7) }} />
-
-<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

@@ -1,136 +0,0 @@
-<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
-  bind:open
-  {weekdayFormat}
-  {weekStartsOn}
-  {fixedWeeks}
->
-  <DatepickerInput
-    {size}
-    {roundness}
-    {outline}
-    class={className}
-    {disabled}
-    {error}
-    {dateFieldInputProps}
-    {datePickerTriggerProps}
-    focused={forcedFocused}
-    {before}
-    {after}
-    {placeholder}
-    {dateFormat}
-  />
-  <DatePickerPopup {...popupProps} />
-</DatePickerBitsUi.Root>

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

@@ -1,96 +0,0 @@
-<script lang="ts" module>
-  import type { Snippet } from 'svelte';
-
-  export type DatePickerInputProps = {
-    size?: ComponentSize;
-    roundness?: ComponentRoundnessShape;
-    outline?: boolean;
-    class?: string;
-    error?: boolean;
-    focused?: boolean;
-    before?: Snippet;
-    after?: Snippet;
-    placeholder?: string;
-    dateFieldInputProps?: DateFieldInputProps;
-    datePickerTriggerProps?: DatePickerTriggerProps;
-    disabled?: boolean;
-    dateFormat?: DatePickerFormat;
-  };
-</script>
-
-<script lang="ts">
-  import { DatePicker, type DateFieldInputProps, type DatePickerTriggerProps } from 'bits-ui';
-  import type { ComponentSize } from '$lib/attributes/size.js';
-  import type { ComponentRoundnessShape } from '$lib/attributes/roundness.js';
-  import Icon from '@iconify/svelte';
-  import Segments from './Segments.svelte';
-  import InputEnclosure from '../../InputEnclosure/InputEnclosure.svelte';
-  import type { DatePickerFormat } from './utils.js';
-
-  let {
-    size = 'normal',
-    class: className = '',
-    disabled = false,
-    error = false,
-    focused: forcedFocused = false,
-    placeholder,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    after,
-    dateFieldInputProps,
-    datePickerTriggerProps,
-    dateFormat = 'dd/mm/yyyy',
-    ...restProps
-  }: DatePickerInputProps = $props();
-
-  let isFocused = $state(false);
-
-  function handleFocus() {
-    isFocused = true;
-  }
-
-  function handleBlur() {
-    isFocused = false;
-  }
-
-  const classes = $derived(['dodo-ui-DatePicker', className].filter(Boolean));
-
-  const triggerClasses = $derived(
-    [
-      'dodo-ui-UtilityButton',
-      `size--${size}`,
-      'compact',
-      'color--primary',
-      'roundness--full',
-      error && 'error',
-      disabled && 'disabled',
-    ].filter(Boolean),
-  );
-</script>
-
-<InputEnclosure
-  {size}
-  {disabled}
-  {error}
-  class={classes.join(' ')}
-  focused={forcedFocused || isFocused}
-  {...restProps}
->
-  <DatePicker.Input
-    onfocus={handleFocus}
-    onblur={handleBlur}
-    {placeholder}
-    class="InputBox"
-    {...dateFieldInputProps}
-  >
-    {#snippet children({ segments })}
-      <Segments {segments} {dateFormat} />
-    {/snippet}
-  </DatePicker.Input>
-
-  {#snippet after()}
-    <DatePicker.Trigger class={triggerClasses.join(' ')} {...datePickerTriggerProps}>
-      <Icon icon="material-symbols:calendar-month-sharp" />
-    </DatePicker.Trigger>
-    {@render after?.()}
-  {/snippet}
-</InputEnclosure>

package/src/lib/components/Form/DatePicker/DatePickerInput/Segments.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-  import { DatePicker } from 'bits-ui';
-  import { formatSegments, type DatePickerFormat, type DateSegment } from './utils.js';
-
-  type Props = {
-    segments: DateSegment[];
-    dateFormat: DatePickerFormat;
-  };
-
-  let { segments, dateFormat }: Props = $props();
-</script>
-
-{#each formatSegments(segments, dateFormat) as { part, value }, i (part + i)}
-  <DatePicker.Segment {part}>
-    {value}
-  </DatePicker.Segment>
-{/each}

package/src/lib/components/Form/DatePicker/DatePickerInput/utils.ts

@@ -1,55 +0,0 @@
-import type { SegmentPart } from 'bits-ui';
-
-// ---- Segment Types ----
-export type DateSegment = {
-  part: SegmentPart;
-  value: string;
-};
-
-// ---- Supported format tokens ----
-export type FormatToken = 'dd' | 'mm' | 'yyyy' | 'hh' | 'min' | 'ss';
-
-// ---- Optional: stricter format typing ----
-type Separator = '/' | '-' | '.' | ' ';
-
-export type DatePickerFormat =
-  | `${FormatToken}${Separator}${FormatToken}${Separator}${FormatToken}`
-  | `${FormatToken}${Separator}${FormatToken}`
-  | `${FormatToken}`;
-
-// ---- Formatter ----
-export function formatSegments(segments: DateSegment[], format: DatePickerFormat): DateSegment[] {
-  const segmentMap: Partial<Record<SegmentPart, DateSegment>> = Object.fromEntries(
-    segments.map((s) => [s.part, s]),
-  );
-
-  const tokens = format.match(/dd|mm|yyyy|hh|min|ss|./g) ?? [];
-
-  return tokens.map((token): DateSegment => {
-    switch (token) {
-      case 'dd':
-        return segmentMap.day ?? { part: 'day', value: '' };
-
-      case 'mm':
-        return segmentMap.month ?? { part: 'month', value: '' };
-
-      case 'yyyy':
-        return segmentMap.year ?? { part: 'year', value: '' };
-
-      case 'hh':
-        return segmentMap.hour ?? { part: 'hour', value: '' };
-
-      case 'min':
-        return segmentMap.minute ?? { part: 'minute', value: '' };
-
-      case 'ss':
-        return segmentMap.second ?? { part: 'second', value: '' };
-
-      default:
-        return {
-          part: 'literal',
-          value: token,
-        };
-    }
-  });
-}

package/src/lib/components/Form/DatePicker/DatePickerPopup/CalendarGrid.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { DatePicker, type CalendarRootSnippetProps } from 'bits-ui';
-
-  let { months, weekdays }: CalendarRootSnippetProps = $props();
-</script>
-
-<div class="CalendarGrid">
-  {#each months as month (month.value)}
-    <DatePicker.Grid>
-      <DatePicker.GridHead>
-        <DatePicker.GridRow>
-          {#each weekdays as day (day)}
-            <DatePicker.HeadCell>
-              <div>{day.slice(0, 2)}</div>
-            </DatePicker.HeadCell>
-          {/each}
-        </DatePicker.GridRow>
-      </DatePicker.GridHead>
-      <DatePicker.GridBody>
-        {#each month.weeks as weekDates (weekDates)}
-          <DatePicker.GridRow>
-            {#each weekDates as date (date)}
-              <DatePicker.Cell {date} month={month.value}>
-                <DatePicker.Day>
-                  <div></div>
-                  {date.day}
-                </DatePicker.Day>
-              </DatePicker.Cell>
-            {/each}
-          </DatePicker.GridRow>
-        {/each}
-      </DatePicker.GridBody>
-    </DatePicker.Grid>
-  {/each}
-</div>