@flightlesslabs/dodo-ui-date 0.2.0

package/dist/components/DatePicker/DatePicker.stories.svelte

@@ -0,0 +1,136 @@
+<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 { CalendarDate, type DateValue } from '@internationalized/date';
+  import { componentSizeOptions, componentRoundnessOptions, Theme } from '@flightlesslabs/dodo-ui';
+
+  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-date';
+
+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/dist/components/DatePicker/DatePicker.stories.svelte.d.ts

@@ -0,0 +1,22 @@
+import DatePicker from './DatePicker.svelte';
+import type { DatePickerProps } from './DatePicker.svelte';
+import type { ArgTypes } from 'storybook/internal/csf';
+export declare const storyDatePickerArgTypes: Partial<ArgTypes<DatePickerProps>>;
+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;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const DatePicker: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DatePicker = InstanceType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/DatePicker/DatePicker.svelte

@@ -0,0 +1,134 @@
+<script lang="ts" module>
+  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';
+  import type { ComponentSize, ComponentRoundnessShape } from '@flightlesslabs/dodo-ui';
+
+  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/dist/components/DatePicker/DatePicker.svelte.d.ts

@@ -0,0 +1,63 @@
+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;
+};
+import { type DateFieldInputProps, type DatePickerRootPropsWithoutHTML, type DatePickerTriggerProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { DatePickerFormat } from './DatePickerInput/utils.js';
+import { type DatePickerPopupProps } from './DatePickerPopup/DatePickerPopup.svelte';
+import type { ComponentSize, ComponentRoundnessShape } from '@flightlesslabs/dodo-ui';
+declare const DatePicker: import("svelte").Component<DatePickerProps, {}, "value" | "open">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/components/DatePicker/DatePickerInput/DatePickerInput.svelte

@@ -0,0 +1,95 @@
+<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 Icon from '@iconify/svelte';
+  import Segments from './Segments.svelte';
+  import type { DatePickerFormat } from './utils.js';
+  import type { ComponentSize, ComponentRoundnessShape } from '@flightlesslabs/dodo-ui';
+  import { InputEnclosure } from '@flightlesslabs/dodo-ui';
+
+  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/dist/components/DatePicker/DatePickerInput/DatePickerInput.svelte.d.ts

@@ -0,0 +1,22 @@
+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;
+};
+import { type DateFieldInputProps, type DatePickerTriggerProps } from 'bits-ui';
+import type { DatePickerFormat } from './utils.js';
+import type { ComponentSize, ComponentRoundnessShape } from '@flightlesslabs/dodo-ui';
+declare const DatePickerInput: import("svelte").Component<DatePickerInputProps, {}, "">;
+type DatePickerInput = ReturnType<typeof DatePickerInput>;
+export default DatePickerInput;

package/dist/components/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/dist/components/DatePicker/DatePickerInput/Segments.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type DatePickerFormat, type DateSegment } from './utils.js';
+type Props = {
+    segments: DateSegment[];
+    dateFormat: DatePickerFormat;
+};
+declare const Segments: import("svelte").Component<Props, {}, "">;
+type Segments = ReturnType<typeof Segments>;
+export default Segments;

package/dist/components/DatePicker/DatePickerInput/utils.d.ts

@@ -0,0 +1,10 @@
+import type { SegmentPart } from 'bits-ui';
+export type DateSegment = {
+    part: SegmentPart;
+    value: string;
+};
+export type FormatToken = 'dd' | 'mm' | 'yyyy' | 'hh' | 'min' | 'ss';
+type Separator = '/' | '-' | '.' | ' ';
+export type DatePickerFormat = `${FormatToken}${Separator}${FormatToken}${Separator}${FormatToken}` | `${FormatToken}${Separator}${FormatToken}` | `${FormatToken}`;
+export declare function formatSegments(segments: DateSegment[], format: DatePickerFormat): DateSegment[];
+export {};

package/dist/components/DatePicker/DatePickerInput/utils.js

@@ -0,0 +1,26 @@
+// ---- Formatter ----
+export function formatSegments(segments, format) {
+    const segmentMap = Object.fromEntries(segments.map((s) => [s.part, s]));
+    const tokens = format.match(/dd|mm|yyyy|hh|min|ss|./g) ?? [];
+    return tokens.map((token) => {
+        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/dist/components/DatePicker/DatePickerPopup/CalendarGrid.svelte

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

package/dist/components/DatePicker/DatePickerPopup/CalendarGrid.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type CalendarRootSnippetProps } from 'bits-ui';
+declare const CalendarGrid: import("svelte").Component<CalendarRootSnippetProps, {}, "">;
+type CalendarGrid = ReturnType<typeof CalendarGrid>;
+export default CalendarGrid;

package/dist/components/DatePicker/DatePickerPopup/DatePickerPopup.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+  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';
+  import { type CardProps, useThemeContext } from '@flightlesslabs/dodo-ui';
+  let {
+    roundness = 1,
+    outline = false,
+    class: className = '',
+    theme: cardTheme,
+    color = 'default',
+    variant = 'text',
+    shadow = 2,
+    active = false,
+    sideOffset = 10,
+    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/dist/components/DatePicker/DatePickerPopup/DatePickerPopup.svelte.d.ts

@@ -0,0 +1,6 @@
+export type DatePickerPopupProps = DatePickerContentProps & Omit<CardProps, 'children' | 'ref'>;
+import { type DatePickerContentProps } from 'bits-ui';
+import { type CardProps } from '@flightlesslabs/dodo-ui';
+declare const DatePickerPopup: import("svelte").Component<DatePickerPopupProps, {}, "">;
+type DatePickerPopup = ReturnType<typeof DatePickerPopup>;
+export default DatePickerPopup;

package/dist/components/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/dist/components/DatePicker/DatePickerPopup/Header.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Header: import("svelte").Component<Record<string, never>, {}, "">;
+type Header = ReturnType<typeof Header>;
+export default Header;