@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

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

@@ -0,0 +1,94 @@
+<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,
+    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', `size--${size}`, 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}
+    {...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

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { DatePicker, type CalendarRootSnippetProps, type Month } 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>

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

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import type { CardProps } from '$lib/components/Layout/Card/Card.svelte';
+  import { useThemeContext } from '$lib/components/Layout/Theme/ThemeSystem/context.js';
+
+  export type DatePickerPopupProps = DatePickerContentProps & Omit<CardProps, 'children' | 'ref'>;
+</script>
+
+<script lang="ts">
+  import { DatePicker, type DatePickerContentProps } from 'bits-ui';
+  import Header from './Header.svelte';
+  import CalendarGrid from './CalendarGrid.svelte';
+  let {
+    roundness = 1,
+    outline = false,
+    class: className = '',
+    theme: cardTheme,
+    color = 'default',
+    variant = 'text',
+    shadow = 2,
+    active = false,
+    sideOffset = 6,
+    align = 'end',
+    ...restProps
+  }: DatePickerPopupProps = $props();
+
+  const themeContext = useThemeContext();
+  const theme = $derived(cardTheme ? cardTheme : themeContext.theme);
+
+  const popupClasses = $derived(
+    [
+      'dodo-ui-Card',
+      'dodo-ui-Calendar',
+      `color--${color}`,
+      `variant--${variant}`,
+      `roundness--${roundness}`,
+      `dodo-shadow-${shadow}`,
+      outline && 'outline',
+      active && 'active',
+      theme ? `dodo-theme--${theme}` : '',
+      className,
+    ].filter(Boolean),
+  );
+</script>
+
+<DatePicker.Content class={popupClasses.join(' ')} {...restProps} {sideOffset} {align}>
+  <DatePicker.Calendar>
+    {#snippet children(calendarRootSnippetProps)}
+      <Header />
+      <CalendarGrid {...calendarRootSnippetProps} />
+    {/snippet}
+  </DatePicker.Calendar>
+</DatePicker.Content>

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

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import Icon from '@iconify/svelte';
+  import { DatePicker } from 'bits-ui';
+
+  const triggerClasses = $derived(
+    [
+      'dodo-ui-Button',
+      'compact',
+      'size--normal',
+      'variant--text',
+      'color--primary',
+      'roundness--1',
+    ].filter(Boolean),
+  );
+</script>
+
+<DatePicker.Header>
+  <DatePicker.PrevButton class={triggerClasses.join(' ')}>
+    <Icon icon="material-symbols:chevron-left-rounded" />
+  </DatePicker.PrevButton>
+  <DatePicker.Heading />
+  <DatePicker.NextButton class={triggerClasses.join(' ')}>
+    <Icon icon="material-symbols:chevron-right-rounded" />
+  </DatePicker.NextButton>
+</DatePicker.Header>

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

@@ -0,0 +1,12 @@
+// ----------------------------------------
+// FormField styles
+// ----------------------------------------
+
+.dodo-ui-FormField {
+  display: block;
+
+  .FormField__Label {
+    margin-bottom: 6px;
+    display: block;
+  }
+}

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

@@ -0,0 +1,43 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FormField from './FormField.svelte';
+  import type { FormFieldProps } from './FormField.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+  import TextInput from '../TextInput/TextInput.svelte';
+
+  /**
+   * Storybook controls for FormField
+   */
+  export const FormFieldArgTypes: Partial<ArgTypes<FormFieldProps>> = {
+    class: { table: { category: 'API', subcategory: 'Base' } },
+    label: {
+      table: { category: 'API', subcategory: 'Base' },
+    },
+    for: {
+      table: { category: 'API', subcategory: 'Base' },
+    },
+  };
+
+  const { Story } = defineMeta({
+    component: FormField,
+    tags: ['autodocs'],
+    argTypes: FormFieldArgTypes,
+  });
+</script>
+
+<!-- ------------------------------ -->
+<!-- Stories -->
+<!-- ------------------------------ -->
+
+<Story name="Basic" args={{ label: 'Name:', for: 'name' }}>
+  <TextInput placeholder="Type something…" name="name" />
+</Story>
+
+<Story name="CustomLabel" asChild>
+  <FormField for="name2">
+    {#snippet label()}
+      Custom Label
+    {/snippet}
+    <TextInput placeholder="Type something…" name="name2" />
+  </FormField>
+</Story>

package/src/lib/components/Form/FormField/FormField.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import Label from '../Label/Label.svelte';
+
+  /**
+   * Public props for FormField
+   */
+  export interface FormFieldProps {
+    /** Custom CSS class names */
+    class?: string;
+
+    /** Slot content */
+    children?: Snippet;
+
+    /** text label */
+    label?: string | Snippet;
+
+    /** label for */
+    for?: string;
+  }
+</script>
+
+<script lang="ts">
+  let { class: className = '', for: htmlFor, children, label }: FormFieldProps = $props();
+
+  /**
+   * Computed class list
+   */
+  const classes = $derived(['dodo-ui-FormField', className].filter(Boolean));
+</script>
+
+<div class={classes.join(' ')}>
+  {#if label && typeof label === 'string'}
+    <Label for={htmlFor} class="FormField__Label">
+      {label}
+    </Label>
+  {:else if label && typeof label !== 'string'}
+    <Label for={htmlFor} class="FormField__Label">
+      {@render label?.()}
+    </Label>
+  {/if}
+
+  {@render children?.()}
+</div>

package/src/lib/components/Form/InputEnclosure/InputAffix.svelte

@@ -0,0 +1,52 @@
+<script lang="ts" module>
+  import type { ComponentSize } from '$lib/attributes/size.js';
+  import type { Snippet } from 'svelte';
+
+  /**
+   * InputAffix props.
+   *
+   * Internal-only component used by InputEnclosure to render
+   * leading or trailing content (e.g. icons, buttons, prefixes/suffixes).
+   *
+   * This component is not part of the public API.
+   */
+  export interface InputAffixProps {
+    /** Content rendered inside the affix (icon, button, text, etc.) */
+    children?: Snippet;
+
+    /** Visual size token (e.g. small, normal, large) */
+    size?: ComponentSize;
+
+    /**
+     * Placement of the affix relative to the input.
+     *
+     * - "before": renders before the input control
+     * - "after": renders after the input control
+     */
+    placement: 'before' | 'after';
+  }
+</script>
+
+<script lang="ts">
+  let { children, size = 'normal', placement }: InputAffixProps = $props();
+
+  /**
+   * Computed class list for the InputAffix.
+   */
+  const classes = $derived(
+    ['dodo-ui-InputAffix', `size--${size}`, `placement--${placement}`].filter(Boolean),
+  );
+</script>
+
+<span class={classes.join(' ')}>
+  {@render children?.()}
+</span>
+
+<style lang="scss">
+  .dodo-ui-InputAffix {
+    display: inline-flex;
+    height: 100%;
+    align-items: center;
+    position: relative;
+  }
+</style>

package/src/lib/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/src/lib/components/Form/InputEnclosure/InputEnclosure.stories.svelte

@@ -0,0 +1,152 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import InputEnclosure from './InputEnclosure.svelte';
+  import type { InputEnclosureProps } from './InputEnclosure.svelte';
+  import type { ArgTypes } from 'storybook/internal/csf';
+
+  import { componentSizeOptions } from '$lib/attributes/size.js';
+  import { componentRoundnessOptions } from '$lib/attributes/roundness.js';
+  import Theme from '$lib/components/Layout/Theme/Theme.svelte';
+
+  // ------------------------------
+  // Storybook ArgTypes
+  // ------------------------------
+  export const storyInputEnclosureArgTypes: Partial<ArgTypes<InputEnclosureProps>> = {
+    // ------------------------------
+    // 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' },
+    },
+    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>
+
+<Story name="Light Theme" asChild>
+  <Theme type="light">
+    <InputEnclosure>
+      <input placeholder="Type something…" />
+    </InputEnclosure>
+  </Theme>
+</Story>
+
+<Story name="Dark Theme" asChild globals={{ backgrounds: { value: 'dark' } }}>
+  <Theme type="dark">
+    <InputEnclosure>
+      <input placeholder="Type something…" />
+    </InputEnclosure>
+  </Theme>
+</Story>