sdaia-ui 1.0.1 → 1.0.2

package/src/components/DatePicker/DatePicker.tsx

@@ -1,923 +0,0 @@
-'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';