sdaia-ui 1.0.1

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,923 @@
+'use client';
+
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { cn } from '../../lib/cn';
+
+import { Button } from '../Button';
+import { TextInput } from '../TextInput';
+import { DateCell } from '../DateCell';
+import { DateTab } from '../DateTab';
+import { CalendarHeader } from '../CalendarHeader';
+
+import type {
+  DatePickerLabels,
+  DatePickerProps,
+  DatePickerPickerMode,
+  DatePickerPreset,
+  DateRange,
+} from './DatePicker.types';
+import {
+  ROOT,
+  ROOT_MOBILE,
+  TOP_ROW,
+  PRESET_ASIDE,
+  CALENDARS_ROW,
+  CALENDAR_PANE,
+  CALENDAR_PANE_COMPACT,
+  CALENDAR_PANE_MOBILE,
+  DAY_HEADER_CELL,
+  DAY_HEADER_CELL_MOBILE,
+  DATE_CELL_MOBILE_OVERRIDE,
+  CALENDAR_GRID,
+  PICKER_GRID,
+  PICKER_TAB,
+  PICKER_SCROLL,
+  PICKER_FADE,
+  BOTTOM_PANEL,
+  DATE_INPUTS_ROW,
+  DATE_INPUT_DASH,
+  ACTIONS_ROW_DESKTOP,
+  ACTIONS_ROW_MOBILE,
+  MOBILE_PRESETS_ROW,
+  MOBILE_PRESET_CHIP_BASE,
+  MOBILE_PRESET_CHIP_IDLE,
+  MOBILE_PRESET_CHIP_ACTIVE,
+} from './DatePicker.variants';
+
+/* ═══ Constants ═══════════════════════════════════════════════════ */
+
+const DEFAULT_LABELS: DatePickerLabels = {
+  cancel: 'Cancel',
+  submit: 'Submit',
+  startDate: 'Start date',
+  endDate: 'End date',
+  dayHeaders: ['Su', 'Mo', 'Tu', 'We', 'Thu', 'Fr', 'Sa'],
+  monthNames: [
+    'January', 'February', 'March', 'April',
+    'May', 'June', 'July', 'August',
+    'September', 'October', 'November', 'December',
+  ],
+  monthNamesShort: [
+    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
+    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec',
+  ],
+  preset: {
+    'today': 'Today',
+    'yesterday': 'Yesterday',
+    'this-week': 'This week',
+    'last-week': 'Last week',
+    'this-month': 'This month',
+    'last-month': 'Last month',
+    'this-year': 'This year',
+    'last-year': 'Last year',
+    'all-time': 'All time',
+  },
+  previousMonth: 'Previous month',
+  nextMonth: 'Next month',
+  selectMonth: 'Select month',
+  selectYear: 'Select year',
+  presetPlaceholder: 'Today',
+};
+
+const PRESET_ORDER: DatePickerPreset[] = [
+  'today', 'yesterday', 'this-week', 'last-week',
+  'this-month', 'last-month', 'this-year', 'last-year', 'all-time',
+];
+
+const YEAR_RANGE_BEFORE = 6;
+const YEAR_RANGE_AFTER = 5;
+
+/**
+ * Breakpoint (in CSS pixels) below which the menu auto-switches to the
+ * compact mobile layout. Chosen at 1024 px because the desktop dual
+ * layout needs ~1000 px to render without overflowing — anything below
+ * that forces a horizontal page scrollbar. Consumers that want finer
+ * control (e.g. rendering in a narrow modal on a wide screen) can
+ * override by passing an explicit `mobile` prop.
+ */
+const MOBILE_BREAKPOINT = 1024;
+
+/**
+ * Returns `true` once the viewport is below {@link MOBILE_BREAKPOINT}.
+ * Initial render always returns `false` so SSR output matches the first
+ * client render — the hook flips on mount and on every resize.
+ */
+function useIsMobileViewport(): boolean {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    setIsMobile(mql.matches);
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, []);
+
+  return isMobile;
+}
+
+/* ═══ Date helpers ═══════════════════════════════════════════════ */
+
+function startOfDay(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+
+function isSameDay(a: Date | null, b: Date | null): boolean {
+  if (!a || !b) return false;
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function isToday(d: Date): boolean {
+  return isSameDay(d, new Date());
+}
+
+function daysInMonth(year: number, month: number): number {
+  return new Date(year, month + 1, 0).getDate();
+}
+
+function firstWeekday(year: number, month: number): number {
+  return new Date(year, month, 1).getDay();
+}
+
+function addMonths(year: number, month: number, delta: number): { year: number; month: number } {
+  const total = year * 12 + month + delta;
+  return { year: Math.floor(total / 12), month: ((total % 12) + 12) % 12 };
+}
+
+function formatDate(d: Date | null, monthsShort: string[]): string {
+  if (!d) return '';
+  return `${monthsShort[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+}
+
+function getPresetRange(preset: DatePickerPreset): DateRange {
+  const now = new Date();
+  const today = startOfDay(now);
+
+  switch (preset) {
+    case 'today':
+      return { start: today, end: today };
+    case 'yesterday': {
+      const y = new Date(today);
+      y.setDate(y.getDate() - 1);
+      return { start: y, end: y };
+    }
+    case 'this-week': {
+      const day = today.getDay();
+      const s = new Date(today);
+      s.setDate(s.getDate() - day);
+      return { start: s, end: today };
+    }
+    case 'last-week': {
+      const day = today.getDay();
+      const s = new Date(today);
+      s.setDate(s.getDate() - day - 7);
+      const e = new Date(s);
+      e.setDate(e.getDate() + 6);
+      return { start: s, end: e };
+    }
+    case 'this-month':
+      return {
+        start: new Date(today.getFullYear(), today.getMonth(), 1),
+        end: today,
+      };
+    case 'last-month': {
+      const s = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+      const e = new Date(today.getFullYear(), today.getMonth(), 0);
+      return { start: s, end: e };
+    }
+    case 'this-year':
+      return { start: new Date(today.getFullYear(), 0, 1), end: today };
+    case 'last-year':
+      return {
+        start: new Date(today.getFullYear() - 1, 0, 1),
+        end: new Date(today.getFullYear() - 1, 11, 31),
+      };
+    case 'all-time':
+      return { start: new Date(2000, 0, 1), end: today };
+  }
+}
+
+/* ═══ Internal: Calendar pane ════════════════════════════════════ */
+
+interface CalendarPaneProps {
+  /** Current view year. */
+  year: number;
+  /** Current view month (0–11). */
+  month: number;
+  /** Mode — day grid, month picker, or year picker. */
+  mode: DatePickerPickerMode;
+  /** Change mode (user clicked header / picked a value). */
+  onModeChange: (mode: DatePickerPickerMode) => void;
+  /** Change view year/month (prev/next buttons). */
+  onViewChange: (year: number, month: number) => void;
+  selectedStart: Date | null;
+  selectedEnd: Date | null;
+  hoverDate: Date | null;
+  rangeEnabled: boolean;
+  mobile: boolean;
+  compact: boolean;
+  minDate?: Date;
+  maxDate?: Date;
+  labels: DatePickerLabels;
+  onDateClick: (date: Date) => void;
+  onDateHover: (date: Date | null) => void;
+}
+
+function CalendarPane({
+  year,
+  month,
+  mode,
+  onModeChange,
+  onViewChange,
+  selectedStart,
+  selectedEnd,
+  hoverDate,
+  rangeEnabled,
+  mobile,
+  compact,
+  minDate,
+  maxDate,
+  labels,
+  onDateClick,
+  onDateHover,
+}: CalendarPaneProps) {
+  const { monthNames, dayHeaders } = labels;
+
+  const handlePrev = () => {
+    const { year: y, month: m } = addMonths(year, month, -1);
+    onViewChange(y, m);
+  };
+  const handleNext = () => {
+    const { year: y, month: m } = addMonths(year, month, 1);
+    onViewChange(y, m);
+  };
+
+  /* Build the 6×7 day grid ─────────────────────────────────── */
+  const cells = useMemo(() => {
+    const fw = firstWeekday(year, month);
+    const curDays = daysInMonth(year, month);
+    const prev = addMonths(year, month, -1);
+    const prevDays = daysInMonth(prev.year, prev.month);
+    const list: { date: Date; inCurrentMonth: boolean }[] = [];
+
+    for (let i = fw - 1; i >= 0; i--) {
+      list.push({
+        date: new Date(prev.year, prev.month, prevDays - i),
+        inCurrentMonth: false,
+      });
+    }
+    for (let d = 1; d <= curDays; d++) {
+      list.push({ date: new Date(year, month, d), inCurrentMonth: true });
+    }
+    const next = addMonths(year, month, 1);
+    let fillDay = 1;
+    while (list.length < 42) {
+      list.push({
+        date: new Date(next.year, next.month, fillDay++),
+        inCurrentMonth: false,
+      });
+    }
+    return list;
+  }, [year, month]);
+
+  /* ── Build the years shown in the year picker ─────────────── */
+  const years = useMemo(() => {
+    const arr: number[] = [];
+    for (let y = year - YEAR_RANGE_BEFORE; y <= year + YEAR_RANGE_AFTER; y++) {
+      arr.push(y);
+    }
+    return arr;
+  }, [year]);
+
+  /* ── Resolve a single cell's DateCell variant + range flags ─
+   *
+   * Normalise the range bounds so the logic works identically whether
+   * the user selects forward (earlier → later) or reverse (later →
+   * earlier during hover preview). Extensions are then trivial:
+   *   - earliest cell  → no leading (start) extension
+   *   - latest cell    → no trailing (end) extension
+   *   - cells strictly between → both extensions
+   */
+  const resolveCellProps = (date: Date, inCurrentMonth: boolean) => {
+    const disabled = Boolean(
+      (minDate && date.getTime() < startOfDay(minDate).getTime()) ||
+      (maxDate && date.getTime() > startOfDay(maxDate).getTime()),
+    );
+
+    const isConfirmedStart = isSameDay(date, selectedStart);
+    const isConfirmedEnd = isSameDay(date, selectedEnd);
+    const isSelectedEndpoint = isConfirmedStart || isConfirmedEnd;
+
+    /* Preview-end: when the user has picked a start but not yet a finish,
+     * the date they're hovering acts as the provisional end so the band
+     * follows the cursor. Only applies while hoverDate differs from the
+     * start; hovering the start cell itself collapses the preview. */
+    const previewEnd =
+      rangeEnabled &&
+      selectedStart &&
+      !selectedEnd &&
+      hoverDate &&
+      !isSameDay(hoverDate, selectedStart)
+        ? hoverDate
+        : null;
+    const effectiveEnd = selectedEnd ?? previewEnd;
+
+    /* Normalised bounds (earliest/latest) so direction of selection
+     * doesn't matter. */
+    const bounds =
+      selectedStart && effectiveEnd
+        ? (() => {
+            const a = selectedStart.getTime();
+            const b = effectiveEnd.getTime();
+            return { earliest: Math.min(a, b), latest: Math.max(a, b) };
+          })()
+        : null;
+
+    const t = date.getTime();
+    const isEarliest = bounds !== null && t === bounds.earliest;
+    const isLatest = bounds !== null && t === bounds.latest;
+    const isInRange =
+      bounds !== null && t >= bounds.earliest && t <= bounds.latest;
+    const isSingleCellRange =
+      bounds !== null && bounds.earliest === bounds.latest;
+
+    const showBand = Boolean(
+      rangeEnabled && isInRange && !isSingleCellRange,
+    );
+
+    /* Variant — disabled > selected > today > next/previous > default. */
+    let variant:
+      | 'default' | 'active' | 'today' | 'selected' | 'next-previous';
+    if (isSelectedEndpoint) variant = 'selected';
+    else if (isToday(date) && inCurrentMonth) variant = 'today';
+    else if (!inCurrentMonth) variant = 'next-previous';
+    else variant = 'default';
+
+    return {
+      variant,
+      disabled,
+      range: showBand,
+      rangeStart: showBand && !isEarliest,
+      rangeEnd: showBand && !isLatest,
+    };
+  };
+
+  /* ── Render ─────────────────────────────────────────────── */
+  const paneClass = mobile
+    ? CALENDAR_PANE_MOBILE
+    : compact
+      ? CALENDAR_PANE_COMPACT
+      : CALENDAR_PANE;
+
+  return (
+    <div
+      className={cn(paneClass, PICKER_FADE)}
+      data-slot="date-picker-calendar-pane"
+      data-mode={mode}
+    >
+      <CalendarHeader
+        month={monthNames[month]}
+        year={String(year)}
+        mobile={mobile}
+        center={!mobile && compact}
+        onMonthClick={() => onModeChange(mode === 'month' ? 'calendar' : 'month')}
+        onYearClick={() => onModeChange(mode === 'year' ? 'calendar' : 'year')}
+        onLabelClick={() => onModeChange(mode === 'month' ? 'calendar' : 'month')}
+        onPrevious={handlePrev}
+        onNext={handleNext}
+        previousLabel={labels.previousMonth}
+        nextLabel={labels.nextMonth}
+        monthMenuLabel={labels.selectMonth}
+        yearMenuLabel={labels.selectYear}
+      />
+
+      {mode === 'calendar' && (
+        <>
+          {/* Day headers */}
+          <div className={CALENDAR_GRID} role="row" aria-hidden="true">
+            {dayHeaders.map((d, i) => (
+              <div
+                key={i}
+                className={mobile ? DAY_HEADER_CELL_MOBILE : DAY_HEADER_CELL}
+              >
+                {d}
+              </div>
+            ))}
+          </div>
+          {/* Days */}
+          <div className={CALENDAR_GRID} role="grid">
+            {cells.map(({ date, inCurrentMonth }, i) => {
+              const props = resolveCellProps(date, inCurrentMonth);
+              /* Clip the 24 px range-band extensions at the row edges:
+               * col 0 (Sunday)   → no leading  (`rangeStart`) extension
+               * col 6 (Saturday) → no trailing (`rangeEnd`)   extension
+               * Logical `start-*` / `end-*` on the band inside DateCell
+               * make this work correctly in both LTR and RTL. */
+              const col = i % 7;
+              return (
+                <DateCell
+                  key={`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}-${i}`}
+                  date={date.getDate()}
+                  variant={props.variant}
+                  disabled={props.disabled}
+                  range={props.range}
+                  rangeStart={props.rangeStart && col > 0}
+                  rangeEnd={props.rangeEnd && col < 6}
+                  className={mobile ? DATE_CELL_MOBILE_OVERRIDE : undefined}
+                  onClick={() => onDateClick(date)}
+                  onMouseEnter={() => onDateHover(date)}
+                  onMouseLeave={() => onDateHover(null)}
+                  aria-label={date.toDateString()}
+                />
+              );
+            })}
+          </div>
+        </>
+      )}
+
+      {mode === 'month' && (
+        <div className={PICKER_GRID} role="grid" aria-label={labels.selectMonth}>
+          {monthNames.map((name, i) => (
+            <DateTab
+              key={name}
+              selected={i === month}
+              className={PICKER_TAB}
+              onClick={() => {
+                onViewChange(year, i);
+                onModeChange('calendar');
+              }}
+            >
+              {name}
+            </DateTab>
+          ))}
+        </div>
+      )}
+
+      {mode === 'year' && (
+        <div className={PICKER_SCROLL}>
+          <div className={PICKER_GRID} role="grid" aria-label={labels.selectYear}>
+            {years.map((y) => (
+              <DateTab
+                key={y}
+                selected={y === year}
+                className={PICKER_TAB}
+                onClick={() => {
+                  onViewChange(y, month);
+                  onModeChange('calendar');
+                }}
+              >
+                {y}
+              </DateTab>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ═══ Main component ═════════════════════════════════════════════ */
+
+/**
+ * DatePicker
+ *
+ * Responsive date picker composed entirely from design-system primitives:
+ *   • CalendarHeader — month / year dropdown triggers + prev / next arrows
+ *   • DateCell       — every day cell (variants, range, disabled, RTL)
+ *   • DateTab        — month / year picker items
+ *   • Button         — Cancel / Submit actions
+ *   • TextInput      — read-only Start / End date fields
+ *   • IconFactory    — all icons (no `@/public/*` imports)
+ *
+ * Layouts
+ * ───────
+ *   `type="dual"` + desktop      two calendars side-by-side with a preset sidebar
+ *   `type="single"` + desktop    one calendar, no presets, no actions (can be re-enabled)
+ *   `mobile`                     single calendar, preset-as-select, stacked actions
+ *
+ * Micro-interactions
+ * ──────────────────
+ *   • Month / year dropdowns — click header to swap the pane into a DateTab grid.
+ *     The swap fades via `transition-opacity`.
+ *   • Range hover preview — once a start is picked, hovering future dates
+ *     extends the range band so users can see the selection before clicking.
+ *   • All inner controls own their own hover / focus / pressed states.
+ *
+ * Fresh-project compatibility
+ * ───────────────────────────
+ *   Imports are all design-system internal (`../`), no `@/public/*` aliases.
+ *   Every color, spacing, radius, and typography value maps to a token (or
+ *   is hardcoded rgba with the Figma variable name referenced in a comment
+ *   in `DatePicker.variants.ts`).
+ */
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  function DatePicker(
+    {
+      type = 'dual',
+      mobile: mobileProp,
+      range = false,
+
+      value,
+      rangeValue,
+      defaultValue = null,
+      defaultRangeValue = { start: null, end: null },
+
+      onChange,
+      onRangeChange,
+      onSubmit,
+      onCancel,
+
+      presets,
+      showActions,
+      showDateInputs,
+      showSecondMonth,
+
+      minDate,
+      maxDate,
+      labels: labelsOverride,
+      presetFooter,
+      dir,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* ── Merge label overrides ──────────────────────────────── */
+    const labels: DatePickerLabels = useMemo(
+      () => ({
+        ...DEFAULT_LABELS,
+        ...labelsOverride,
+        preset: { ...DEFAULT_LABELS.preset, ...(labelsOverride?.preset ?? {}) },
+      }),
+      [labelsOverride],
+    );
+
+    const isDual = type === 'dual';
+
+    /* ── Resolve mobile layout ──────────────────────────────────
+     * If the consumer passes `mobile` explicitly we honour it.
+     * Otherwise we auto-switch based on viewport so the picker never
+     * forces a horizontal page scrollbar at phone / small-tablet widths.
+     */
+    const autoMobile = useIsMobileViewport();
+    const mobile = mobileProp ?? autoMobile;
+
+    /* ── Resolve preset visibility ──────────────────────────── */
+    const resolvedPresets: DatePickerPreset[] | null = useMemo(() => {
+      if (presets === false) return null;
+      if (Array.isArray(presets)) return presets;
+      // Default: presets on for `type="dual"` at any viewport. Desktop
+      // renders them as a left sidebar; mobile renders a horizontal
+      // scrollable chip row above the calendar.
+      return isDual ? PRESET_ORDER : null;
+    }, [presets, isDual]);
+
+    const resolvedShowActions = showActions ?? isDual;
+    const resolvedShowInputs = showDateInputs ?? isDual;
+    const resolvedShowSecondMonth = showSecondMonth ?? isDual;
+
+    /* ── Selection state (controlled / uncontrolled) ────────── */
+    const controlledSingle = value !== undefined;
+    const controlledRange = rangeValue !== undefined;
+
+    const [internalSingle, setInternalSingle] = useState<Date | null>(
+      defaultValue,
+    );
+    const [internalRange, setInternalRange] = useState<DateRange>(
+      defaultRangeValue,
+    );
+
+    const selected: DateRange = range
+      ? controlledRange
+        ? rangeValue!
+        : internalRange
+      : {
+          start: controlledSingle ? value ?? null : internalSingle,
+          end: controlledSingle ? value ?? null : internalSingle,
+        };
+
+    const setSelection = useCallback(
+      (next: DateRange) => {
+        if (range) {
+          if (!controlledRange) setInternalRange(next);
+          onRangeChange?.(next);
+        } else {
+          if (!controlledSingle) setInternalSingle(next.start);
+          onChange?.(next.start);
+        }
+      },
+      [range, controlledRange, controlledSingle, onRangeChange, onChange],
+    );
+
+    /* ── View state (current month displayed) ───────────────── */
+    const initialRef = useRef(false);
+    const now = new Date();
+    const [viewYear, setViewYear] = useState(
+      selected.start?.getFullYear() ?? now.getFullYear(),
+    );
+    const [viewMonth, setViewMonth] = useState(
+      selected.start?.getMonth() ?? now.getMonth(),
+    );
+    if (!initialRef.current) initialRef.current = true;
+
+    /* ── Picker mode (one per pane) ─────────────────────────── */
+    const [leftMode, setLeftMode] = useState<DatePickerPickerMode>('calendar');
+    const [rightMode, setRightMode] = useState<DatePickerPickerMode>('calendar');
+
+    /* ── Hover date for range preview ───────────────────────── */
+    const [hoverDate, setHoverDate] = useState<Date | null>(null);
+
+    /* ── Active preset ──────────────────────────────────────── */
+    const [activePreset, setActivePreset] = useState<DatePickerPreset | null>(
+      null,
+    );
+
+    /* ── Handlers ───────────────────────────────────────────── */
+    const handleDateClick = useCallback(
+      (date: Date) => {
+        if (range) {
+          const { start, end } = selected;
+          if (!start || (start && end)) {
+            setSelection({ start: date, end: null });
+          } else if (date.getTime() < start.getTime()) {
+            setSelection({ start: date, end: start });
+          } else {
+            setSelection({ start, end: date });
+          }
+        } else {
+          setSelection({ start: date, end: date });
+        }
+        setActivePreset(null);
+      },
+      [range, selected, setSelection],
+    );
+
+    const handlePresetClick = useCallback(
+      (p: DatePickerPreset) => {
+        const r = getPresetRange(p);
+        setActivePreset(p);
+        setSelection(r);
+        if (r.start) {
+          setViewYear(r.start.getFullYear());
+          setViewMonth(r.start.getMonth());
+        }
+      },
+      [setSelection],
+    );
+
+    const handleSubmit = useCallback(() => {
+      const { start, end } = selected;
+      if (start) {
+        onSubmit?.({ start, end: end ?? start });
+      }
+    }, [selected, onSubmit]);
+
+    /* ── Derived: right pane year/month ─────────────────────── */
+    const right = addMonths(viewYear, viewMonth, 1);
+
+    /* ── Render: preset aside ───────────────────────────────── */
+    const renderPresetAside = () => {
+      if (!resolvedPresets || mobile) return null;
+      return (
+        <aside className={PRESET_ASIDE} data-slot="date-picker-presets">
+          {resolvedPresets.map((p) => (
+            <DateTab
+              key={p}
+              selected={activePreset === p}
+              onClick={() => handlePresetClick(p)}
+              data-slot="date-picker-preset"
+              data-active={activePreset === p || undefined}
+              className="w-full"
+            >
+              {labels.preset[p]}
+            </DateTab>
+          ))}
+          {presetFooter}
+        </aside>
+      );
+    };
+
+    /* ── Render: date inputs + actions row ──────────────────── */
+    const renderBottomPanel = (forMobile: boolean): ReactNode => {
+      if (!resolvedShowInputs && !resolvedShowActions) return null;
+
+      const inputs = resolvedShowInputs && (
+        <div className={DATE_INPUTS_ROW}>
+          <TextInput
+            value={formatDate(selected.start, labels.monthNamesShort)}
+            placeholder={labels.startDate}
+            readOnly
+            aria-label={labels.startDate}
+          />
+          {range && (
+            <>
+              <span aria-hidden="true" className={DATE_INPUT_DASH}>–</span>
+              <TextInput
+                value={formatDate(selected.end, labels.monthNamesShort)}
+                placeholder={labels.endDate}
+                readOnly
+                aria-label={labels.endDate}
+              />
+            </>
+          )}
+        </div>
+      );
+
+      const actions = resolvedShowActions && (
+        <div className={forMobile ? ACTIONS_ROW_MOBILE : ACTIONS_ROW_DESKTOP}>
+          {!forMobile && <div />}
+          <div className="flex items-center gap-spacing-md">
+            <Button variant="secondary-outline" size="md" onClick={onCancel}>
+              {labels.cancel}
+            </Button>
+            <Button
+              variant="primary"
+              size="md"
+              onClick={handleSubmit}
+              disabled={!selected.start}
+              fullWidth={forMobile}
+            >
+              {labels.submit}
+            </Button>
+          </div>
+        </div>
+      );
+
+      if (forMobile) {
+        return (
+          <>
+            {inputs}
+            {actions}
+          </>
+        );
+      }
+
+      return (
+        <div className={BOTTOM_PANEL} data-slot="date-picker-bottom">
+          {inputs}
+          {actions}
+        </div>
+      );
+    };
+
+    /* ────────────────────────────────────────────────────────── */
+    /* Mobile layout                                               */
+    /* ────────────────────────────────────────────────────────── */
+    if (mobile) {
+      return (
+        <div
+          ref={ref}
+          data-slot="date-picker"
+          data-layout="mobile"
+          className={cn(ROOT_MOBILE, className)}
+          dir={dir}
+          {...rest}
+        >
+          {resolvedPresets && (
+            <div
+              className={MOBILE_PRESETS_ROW}
+              role="tablist"
+              aria-label="Date range presets"
+              data-slot="date-picker-presets-mobile"
+            >
+              {resolvedPresets.map((p) => {
+                const isActive = activePreset === p;
+                return (
+                  <button
+                    key={p}
+                    type="button"
+                    role="tab"
+                    aria-selected={isActive}
+                    onClick={() => handlePresetClick(p)}
+                    data-slot="date-picker-preset"
+                    data-active={isActive || undefined}
+                    className={cn(
+                      MOBILE_PRESET_CHIP_BASE,
+                      isActive
+                        ? MOBILE_PRESET_CHIP_ACTIVE
+                        : MOBILE_PRESET_CHIP_IDLE,
+                    )}
+                  >
+                    {labels.preset[p]}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+
+          <CalendarPane
+            year={viewYear}
+            month={viewMonth}
+            mode={leftMode}
+            onModeChange={setLeftMode}
+            onViewChange={(y, m) => {
+              setViewYear(y);
+              setViewMonth(m);
+            }}
+            selectedStart={selected.start}
+            selectedEnd={range ? selected.end : selected.start}
+            hoverDate={hoverDate}
+            rangeEnabled={range}
+            mobile
+            compact={false}
+            minDate={minDate}
+            maxDate={maxDate}
+            labels={labels}
+            onDateClick={handleDateClick}
+            onDateHover={setHoverDate}
+          />
+
+          {renderBottomPanel(true)}
+        </div>
+      );
+    }
+
+    /* ────────────────────────────────────────────────────────── */
+    /* Desktop layout                                              */
+    /* ────────────────────────────────────────────────────────── */
+    return (
+      <div
+        ref={ref}
+        data-slot="date-picker"
+        data-layout={isDual ? 'dual' : 'single'}
+        className={cn(ROOT, className)}
+        dir={dir}
+        {...rest}
+      >
+        <div className={TOP_ROW}>
+          {renderPresetAside()}
+
+          <div className="flex flex-col">
+            <div className={CALENDARS_ROW}>
+              <CalendarPane
+                year={viewYear}
+                month={viewMonth}
+                mode={leftMode}
+                onModeChange={setLeftMode}
+                onViewChange={(y, m) => {
+                  setViewYear(y);
+                  setViewMonth(m);
+                }}
+                selectedStart={selected.start}
+                selectedEnd={range ? selected.end : selected.start}
+                hoverDate={hoverDate}
+                rangeEnabled={range}
+                mobile={false}
+                compact={isDual && resolvedShowSecondMonth}
+                minDate={minDate}
+                maxDate={maxDate}
+                labels={labels}
+                onDateClick={handleDateClick}
+                onDateHover={setHoverDate}
+              />
+
+              {isDual && resolvedShowSecondMonth && (
+                <CalendarPane
+                  year={right.year}
+                  month={right.month}
+                  mode={rightMode}
+                  onModeChange={setRightMode}
+                  onViewChange={(y, m) => {
+                    /* Right pane changes always re-anchor the left pane so
+                       they stay consecutive. */
+                    const { year: ly, month: lm } = addMonths(y, m, -1);
+                    setViewYear(ly);
+                    setViewMonth(lm);
+                  }}
+                  selectedStart={selected.start}
+                  selectedEnd={range ? selected.end : selected.start}
+                  hoverDate={hoverDate}
+                  rangeEnabled={range}
+                  mobile={false}
+                  compact
+                  minDate={minDate}
+                  maxDate={maxDate}
+                  labels={labels}
+                  onDateClick={handleDateClick}
+                  onDateHover={setHoverDate}
+                />
+              )}
+            </div>
+
+            {renderBottomPanel(false)}
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+DatePicker.displayName = 'DatePicker';