@flightlesslabs/dodo-ui-date 0.2.0

package/src/lib/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/src/lib/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/src/lib/components/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/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/src/lib/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/src/lib/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/src/lib/index.ts

@@ -0,0 +1,16 @@
+/**
+ * DatePicker component and related prop types.
+ */
+export {
+  default as DatePicker,
+  type DatePickerProps,
+} from './components/DatePicker/DatePicker.svelte';
+
+export { type DatePickerInputProps } from './components/DatePicker/DatePickerInput/DatePickerInput.svelte';
+
+export { type DatePickerPopupProps } from './components/DatePicker/DatePickerPopup/DatePickerPopup.svelte';
+
+/**
+ * Calendar component and related prop types.
+ */
+export { default as Calendar, type CalendarProps } from './components/Calendar/Calendar.svelte';

package/src/lib/storybook-types.ts

@@ -0,0 +1,182 @@
+type ControlType =
+  | 'object'
+  | 'boolean'
+  | 'check'
+  | 'inline-check'
+  | 'radio'
+  | 'inline-radio'
+  | 'select'
+  | 'multi-select'
+  | 'number'
+  | 'range'
+  | 'file'
+  | 'color'
+  | 'date'
+  | 'text';
+
+interface ControlBase {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+  /** @see https://storybook.js.org/docs/api/arg-types#controltype */
+  type?: ControlType;
+  disable?: boolean;
+}
+
+type Control =
+  | ControlType
+  | false
+  | (ControlBase &
+      (
+        | ControlBase
+        | {
+            type: 'color';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors */
+            presetColors?: string[];
+          }
+        | {
+            type: 'file';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlaccept */
+            accept?: string;
+          }
+        | {
+            type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
+            /** @see https://storybook.js.org/docs/api/arg-types#controllabels */
+            labels?: {
+              [options: string]: string;
+            };
+          }
+        | {
+            type: 'number' | 'range';
+            /** @see https://storybook.js.org/docs/api/arg-types#controlmax */
+            max?: number;
+            /** @see https://storybook.js.org/docs/api/arg-types#controlmin */
+            min?: number;
+            /** @see https://storybook.js.org/docs/api/arg-types#controlstep */
+            step?: number;
+          }
+      ));
+
+type ConditionalTest =
+  | {
+      truthy?: boolean;
+    }
+  | {
+      exists: boolean;
+    }
+  | {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      eq: any;
+    }
+  | {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      neq: any;
+    };
+type ConditionalValue =
+  | {
+      arg: string;
+    }
+  | {
+      global: string;
+    };
+type Conditional = ConditionalValue & ConditionalTest;
+
+interface Args {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [name: string]: any;
+}
+
+interface SBBaseType {
+  required?: boolean;
+  raw?: string;
+}
+type SBScalarType = SBBaseType & {
+  name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+};
+type SBArrayType = SBBaseType & {
+  name: 'array';
+  value: SBType;
+};
+type SBObjectType = SBBaseType & {
+  name: 'object';
+  value: Record<string, SBType>;
+};
+type SBEnumType = SBBaseType & {
+  name: 'enum';
+  value: (string | number)[];
+};
+type SBIntersectionType = SBBaseType & {
+  name: 'intersection';
+  value: SBType[];
+};
+type SBUnionType = SBBaseType & {
+  name: 'union';
+  value: SBType[];
+};
+type SBOtherType = SBBaseType & {
+  name: 'other';
+  value: string;
+};
+
+type SBType =
+  | SBScalarType
+  | SBEnumType
+  | SBArrayType
+  | SBObjectType
+  | SBIntersectionType
+  | SBUnionType
+  | SBOtherType;
+
+interface InputType {
+  /** @see https://storybook.js.org/docs/api/arg-types#control */
+  control?: Control;
+  /** @see https://storybook.js.org/docs/api/arg-types#description */
+  description?: string;
+  /** @see https://storybook.js.org/docs/api/arg-types#if */
+  if?: Conditional;
+  /** @see https://storybook.js.org/docs/api/arg-types#mapping */
+  mapping?: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  };
+  /** @see https://storybook.js.org/docs/api/arg-types#name */
+  name?: string;
+  /** @see https://storybook.js.org/docs/api/arg-types#options */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options?: readonly any[];
+  /** @see https://storybook.js.org/docs/api/arg-types#table */
+  table?: {
+    [key: string]: unknown;
+    /** @see https://storybook.js.org/docs/api/arg-types#tablecategory */
+    category?: string;
+    /** @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue */
+    defaultValue?: {
+      summary?: string;
+      detail?: string;
+    };
+    /** @see https://storybook.js.org/docs/api/arg-types#tabledisable */
+    disable?: boolean;
+    /** @see https://storybook.js.org/docs/api/arg-types#tablesubcategory */
+    subcategory?: string;
+    /** @see https://storybook.js.org/docs/api/arg-types#tabletype */
+    type?: {
+      summary?: string;
+      detail?: string;
+    };
+  };
+  /** @see https://storybook.js.org/docs/api/arg-types#type */
+  type?: SBType | SBScalarType['name'];
+  /**
+   * @deprecated Use `table.defaultValue.summary` instead.
+   * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultValue?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+export type ArgTypes<TArgs = Args> = {
+  [name in keyof TArgs]: InputType;
+};
+
+export type StoryBookArgTypes = Partial<ArgTypes<Args>>;

package/src/lib/styles/global/_breakpoints.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+
+$breakpoints-default: (
+  sm: 40rem,
+  md: 48rem,
+  lg: 64rem,
+  xl: 80rem,
+  xxl: 96rem,
+);
+
+$breakpoints: () !default;
+
+$breakpoints: map.merge($breakpoints-default, $breakpoints);
+
+@function breakpoint($key) {
+  @if not map.has-key($breakpoints, $key) {
+    @error "Invalid breakpoint: #{$key}";
+  }
+  @return map.get($breakpoints, $key);
+}
+
+@mixin up($key) {
+  @media (min-width: breakpoint($key)) {
+    @content;
+  }
+}
+
+@mixin down($key) {
+  @media (max-width: breakpoint($key)) {
+    @content;
+  }
+}
+
+@mixin between($min, $max) {
+  @media (min-width: breakpoint($min)) and (max-width: breakpoint($max)) {
+    @content;
+  }
+}

package/src/lib/styles/main.scss

@@ -0,0 +1,2 @@
+@use '../components/Calendar/Calendar.scss';
+@use '../components/DatePicker/DatePicker.scss';

package/src/lib/test/setup.ts

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/vitest';
+import { vi } from 'vitest';
+
+// mock matchMedia globally
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  })),
+});