@godxjp/ui 20.2.1 → 22.0.0

package/dist/components/data-entry/date-picker.js

@@ -1,26 +1,37 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
+import { ArrowRight, CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
-import { toIsoDate } from "../../lib/datetime/parse.js";
 import {
   formatPickerDate,
+  parseIsoPeriod,
   parsePickerDate,
   pickerDateAllowed,
-  pickerPeriodStart
+  pickerPeriodStart,
+  toIsoPeriod
 } from "../../lib/datetime/picker-format.js";
 import { Button } from "../general/button.js";
 import { Flex } from "../layout/flex.js";
 import { TimePicker } from "./time-picker.js";
 import { useControlledLatch } from "../../lib/hooks.js";
-import { pickFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
+import { pickFieldA11y, pickGroupFieldA11y, useFieldIdentity } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
 import { resolveAllowClear } from "./control-surface.js";
+import { CONTROL_STATUS_CHROME_CLASS, CONTROL_VARIANT_CHROME_CLASS } from "./control-appearance.js";
 import { Input } from "./input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import { Calendar } from "./calendar.js";
 const ISO_HINT = "yyyy-mm-dd";
+const PERIOD_PICKERS = /* @__PURE__ */ new Set(["month", "quarter", "year"]);
+const PERIOD_COLUMNS = 3;
+const PERIOD_HINT = {
+  date: ISO_HINT,
+  week: "yyyy-Www",
+  month: "yyyy-mm",
+  quarter: "yyyy-mm",
+  year: "yyyy"
+};
 function DatePicker(props) {
   const {
     value: valueProp,
@@ -44,8 +55,11 @@ function DatePicker(props) {
     maxDate,
     showWeek,
     showTime,
+    defaultPickerValue,
+    pickerValue,
     presets,
     multiple = false,
+    range = false,
     picker = "date",
     order = true,
     needConfirm = Boolean(showTime),
@@ -60,17 +74,23 @@ function DatePicker(props) {
     status,
     variant,
     ref,
-    ...ariaProps
+    ...rest
   } = props;
+  const { allowEmpty = [true, true], ...ariaProps } = rest;
   const format = formatProp ?? (typeof showTime === "object" && showTime.showSeconds ? "yyyy-MM-dd HH:mm:ss" : void 0);
   const { t } = useTranslation();
   const { dayPickerLocale, locale } = usePickerLocales(localeProp);
+  const isPeriod = PERIOD_PICKERS.has(picker);
+  const disabledEdges = Array.isArray(disabled) ? disabled : [Boolean(disabled), Boolean(disabled)];
+  const allDisabled = disabledEdges[0] && disabledEdges[1];
+  const anyDisabled = disabledEdges[0] || disabledEdges[1];
+  const edgeDisabled = (edge) => disabledEdges[edge === "from" ? 0 : 1];
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
-  const open = !disabled && (openProp ?? internalOpen);
+  const open = !allDisabled && (openProp ?? internalOpen);
   const [pending, setPending] = React.useState();
   const [hasPending, setHasPending] = React.useState(false);
   const setOpen = (next) => {
-    if (disabled && next) return;
+    if (allDisabled && next) return;
     if (openProp === void 0) setInternalOpen(next);
     onOpenChange?.(next);
     if (!next) {
@@ -85,41 +105,91 @@ function DatePicker(props) {
   const minimum = minDate ?? fromDate;
   const maximum = maxDate ?? toDate;
   const allowed = (date) => pickerDateAllowed(date, minimum, maximum, disabledDate);
-  const display = (date) => Array.isArray(date) ? date.map((day) => formatPickerDate(day, format, locale)).join(", ") : formatPickerDate(date, format, locale, Boolean(showTime));
-  const parse = (text2) => parsePickerDate(text2, format, parseFormat, Boolean(showTime));
-  const fieldA11y = pickFieldA11y(ariaProps);
+  const display = (date) => format || showTime ? formatPickerDate(date, format, locale, Boolean(showTime)) : toIsoPeriod(date, picker);
+  const displayAll = (date) => Array.isArray(date) ? date.map((day) => display(day)).join(", ") : display(date);
+  const parse = (text2) => parsePickerDate(text2, format, parseFormat, Boolean(showTime)) ?? parseIsoPeriod(text2, picker);
+  const periodDate = (date) => pickerPeriodStart(date, picker, dayPickerLocale);
+  const fieldA11y = range ? pickGroupFieldA11y(ariaProps) : pickFieldA11y(ariaProps);
   const identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
   const resolvedName = name ?? identity.name;
   const resolvedField = fieldA11y["data-field"] ?? identity["data-field"];
   const reactId = React.useId();
-  const dialogId = `${id ?? reactId}-dialog`;
+  const rootId = id ?? reactId;
+  const dialogId = `${rootId}-dialog`;
+  const fromId = `${rootId}-from`;
+  const toId = `${rootId}-to`;
   const isControlled = useControlledLatch(valueProp !== void 0);
-  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [internalValue, setInternalValue] = React.useState(
+    defaultValue
+  );
   const value = isControlled ? valueProp : internalValue;
   const working = hasPending ? pending : value;
-  const selectedDate = Array.isArray(working) ? working[0] : working;
-  const [viewYear, setViewYear] = React.useState((selectedDate ?? /* @__PURE__ */ new Date()).getFullYear());
-  const periodDate = (date) => pickerPeriodStart(date, picker, dayPickerLocale);
+  const rangeValue = range ? working : void 0;
+  const selectedDate = range ? rangeValue?.from : Array.isArray(working) ? working[0] : working;
   const emit = (next) => {
     if (!isControlled) setInternalValue(next);
-    if (props.multiple)
-      props.onValueChange?.(Array.isArray(next) ? next : next ? [next] : void 0);
-    else props.onValueChange?.(Array.isArray(next) ? next[0] : next);
+    const onValueChange = props.onValueChange;
+    if (range) onValueChange?.(next);
+    else if (multiple) onValueChange?.(Array.isArray(next) ? next : next ? [next] : void 0);
+    else onValueChange?.(Array.isArray(next) ? next[0] : next);
   };
-  const [text, setText] = React.useState(() => display(value));
+  const committedSingle = range ? void 0 : value;
+  const committedRange = range ? value : void 0;
+  const [text, setText] = React.useState(() => range ? "" : displayAll(committedSingle));
+  const [fromText, setFromText] = React.useState(() => display(committedRange?.from));
+  const [toText, setToText] = React.useState(() => display(committedRange?.to));
+  const committedFrom = committedRange?.from;
+  const committedTo = committedRange?.to;
   React.useEffect(() => {
-    setText(
-      Array.isArray(value) ? value.map((date) => formatPickerDate(date, format, locale)).join(", ") : formatPickerDate(value, format, locale, Boolean(showTime))
-    );
-  }, [value, format, locale, showTime]);
-  const resolvedPlaceholder = placeholder ?? t("dataEntry.datePicker.placeholder") ?? ISO_HINT;
+    if (range) {
+      setFromText(display(committedFrom));
+      setToText(display(committedTo));
+    } else {
+      setText(displayAll(committedSingle));
+    }
+  }, [range, value, committedFrom, committedTo, format, locale, showTime]);
+  const valueAnchor = range ? committedRange?.from : Array.isArray(committedSingle) ? committedSingle[0] : committedSingle;
+  const [internalView, setInternalView] = React.useState(
+    () => defaultPickerValue ?? valueAnchor
+  );
+  const viewAnchor = pickerValue ?? internalView ?? /* @__PURE__ */ new Date();
+  const viewYear = viewAnchor.getFullYear();
+  const setViewAnchor = (next) => {
+    if (pickerValue === void 0) setInternalView(next);
+  };
+  const setViewYear = (year) => setViewAnchor(new Date(year, viewAnchor.getMonth(), 1));
+  React.useEffect(() => {
+    if (open) setInternalView(defaultPickerValue ?? valueAnchor);
+  }, [open]);
+  const resolvedPlaceholder = placeholder ?? (isPeriod ? t("dataEntry.monthPicker.placeholder") : range ? t("dataEntry.dateRangePicker.placeholder") : t("dataEntry.datePicker.placeholder")) ?? PERIOD_HINT[picker];
+  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
+  const showClear = clearControl.enabled && !anyDisabled && (range ? allowEmpty.every(Boolean) && Boolean(committedRange?.from || committedRange?.to) : text !== "");
   const clear = () => {
     emit(void 0);
     setText("");
+    setFromText("");
+    setToText("");
   };
-  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
-  const showClear = clearControl.enabled && text !== "" && !disabled;
+  const validRange = (next) => Boolean(
+    next && (next.from ? allowed(next.from) : allowEmpty[0]) && (next.to ? allowed(next.to) : allowEmpty[1])
+  );
   const choose = (input) => {
+    if (range) {
+      let next = input;
+      if (anyDisabled && next)
+        next = {
+          from: disabledEdges[0] ? committedRange?.from : next.from,
+          to: disabledEdges[1] ? committedRange?.to : next.to
+        };
+      if (next?.from && !allowed(next.from) || next?.to && !allowed(next.to)) return;
+      if (order && next?.from && next.to && next.from > next.to)
+        next = { from: next.to, to: next.from };
+      if (needConfirm) {
+        setPending(next);
+        setHasPending(true);
+      } else emit(next);
+      return;
+    }
     let date = input;
     if (Array.isArray(date)) {
       if (date.some((day) => !allowed(day))) return;
@@ -129,7 +199,8 @@ function DatePicker(props) {
       if (!allowed(date) || !needConfirm && !timeAllowed(date)) return;
       if (multiple) {
         const current = Array.isArray(working) ? working : [];
-        date = current.some((day) => +day === +date) ? current.filter((day) => +day !== +date) : [...current, date];
+        const picked = date;
+        date = current.some((day) => +day === +picked) ? current.filter((day) => +day !== +picked) : [...current, picked];
         if (order) date.sort((a, b) => +a - +b);
       }
     }
@@ -138,7 +209,7 @@ function DatePicker(props) {
       setHasPending(true);
     } else {
       emit(date);
-      setText(display(date));
+      setText(displayAll(date));
     }
   };
   const commit = (raw) => {
@@ -149,22 +220,410 @@ function DatePicker(props) {
     const parsed = parse(raw);
     if (parsed && allowed(parsed)) choose(parsed);
   };
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    (format || showTime || multiple || needConfirm || preserveInvalidOnBlur) && resolvedName ? /* @__PURE__ */ jsx(
+  const commitEdge = (edge, raw) => {
+    if (edgeDisabled(edge)) return;
+    const trimmed = raw.trim();
+    const parsed = parse(trimmed);
+    if (trimmed && (!parsed || !allowed(parsed))) return;
+    if (!trimmed && !allowEmpty[edge === "from" ? 0 : 1]) return;
+    const base = working;
+    const next = { from: base?.from, to: base?.to, [edge]: parsed && periodDate(parsed) };
+    choose(next.from || next.to ? next : void 0);
+  };
+  const keyHandlers = (onEnter) => ({
+    onKeyDown: (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpen(true);
+      } else if (event.key === "Enter") {
+        event.preventDefault();
+        onEnter();
+      } else if (event.key === "Escape" && open) {
+        setOpen(false);
+      }
+    }
+  });
+  const enterSingle = () => {
+    const parsed = parse(text);
+    if (parsed && allowed(parsed) && timeAllowed(parsed)) {
+      const next = periodDate(parsed);
+      emit(next);
+      setText(display(parsed));
+    }
+    setOpen(false);
+  };
+  const enterEdge = (edge) => () => {
+    commitEdge(edge, edge === "from" ? fromText : toText);
+    setOpen(false);
+  };
+  const displayIsCanonical = !format && !showTime && !multiple && !needConfirm && !preserveInvalidOnBlur && picker === "date";
+  const isoValue = (date) => showTime ? date?.toISOString() ?? "" : toIsoPeriod(date, picker);
+  const hiddenFields = displayIsCanonical ? null : range ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        disabled: allDisabled,
+        name: `${resolvedName}_from`,
+        value: isoValue(committedRange?.from)
+      }
+    ),
+    /* @__PURE__ */ jsx(
       "input",
       {
         type: "hidden",
-        disabled,
-        name: resolvedName,
-        value: showTime ? (Array.isArray(value) ? value[0] : value)?.toISOString() ?? "" : Array.isArray(value) ? value.map(toIsoDate).join(",") : toIsoDate(value)
+        disabled: allDisabled,
+        name: `${resolvedName}_to`,
+        value: isoValue(committedRange?.to)
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "hidden",
+      disabled: allDisabled,
+      name: resolvedName,
+      value: Array.isArray(committedSingle) ? committedSingle.map((day) => isoValue(day)).join(",") : isoValue(committedSingle)
+    }
+  );
+  const periodCells = picker === "quarter" ? 4 : 12;
+  const periodPage = (year) => Array.from(
+    { length: periodCells },
+    (_, index) => picker === "year" ? new Date(year + index, 0, 1) : new Date(year, index * (picker === "quarter" ? 3 : 1), 1)
+  );
+  const periodDateAt = (index) => periodPage(viewYear)[index];
+  const periodRow = (row) => Array.from({ length: PERIOD_COLUMNS }, (_, column) => row * PERIOD_COLUMNS + column).filter(
+    (index) => index < periodCells
+  );
+  const pageStep = picker === "year" ? periodCells : 1;
+  const prevDisabled = !pickerDateAllowed(
+    periodPage(viewYear - pageStep)[periodCells - 1],
+    minimum,
+    void 0
+  );
+  const nextDisabled = !pickerDateAllowed(periodPage(viewYear + pageStep)[0], void 0, maximum);
+  const periodLabel = (date, index) => picker === "year" ? new Intl.DateTimeFormat(locale, { year: "numeric" }).format(date) : picker === "quarter" ? t("dataEntry.datePicker.quarter", { quarter: index + 1 }) ?? `Q${index + 1}` : new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
+  const periodPick = (date) => {
+    if (!range) {
+      choose(date);
+      if (!needConfirm && !multiple) setOpen(false);
+      return;
+    }
+    const base = working;
+    const pendingFrom = base?.from && !base.to ? base.from : void 0;
+    if (!pendingFrom) {
+      choose({ from: date, to: void 0 });
+      return;
+    }
+    choose({ from: pendingFrom, to: date });
+    if (!needConfirm) setOpen(false);
+  };
+  const periodPanel = /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-nav", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "icon-sm",
+          disabled: prevDisabled,
+          "aria-label": t("dataEntry.monthPicker.previousYear") ?? "Previous year",
+          className: "ui-month-picker-nav-button",
+          onClick: () => setViewYear(viewYear - pageStep),
+          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "ui-month-picker-icon", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ui-month-picker-nav-label", "aria-live": "polite", children: new Intl.NumberFormat(locale, { useGrouping: false }).format(viewYear) }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "icon-sm",
+          disabled: nextDisabled,
+          "aria-label": t("dataEntry.monthPicker.nextYear") ?? "Next year",
+          className: "ui-month-picker-nav-button",
+          onClick: () => setViewYear(viewYear + pageStep),
+          children: /* @__PURE__ */ jsx(ChevronRight, { className: "ui-month-picker-icon", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": String(viewYear), className: "ui-month-picker-grid", children: Array.from({ length: Math.ceil(periodCells / PERIOD_COLUMNS) }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "ui-month-picker-row", children: periodRow(row).map((index) => {
+      const date = periodDateAt(index);
+      const selected = range ? [rangeValue?.from, rangeValue?.to].some(
+        (edge) => edge && +periodDate(edge) === +date
+      ) : (Array.isArray(working) ? working : working ? [working] : []).some(
+        (day) => +periodDate(day) === +date
+      );
+      const inRange = range && rangeValue?.from && rangeValue.to ? +date > +periodDate(rangeValue.from) && +date < +periodDate(rangeValue.to) : false;
+      return /* @__PURE__ */ jsx("div", { role: "gridcell", className: "ui-month-picker-gridcell", children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: selected ? "default" : inRange ? "secondary" : "ghost",
+          size: "sm",
+          "aria-pressed": selected,
+          disabled: !allowed(date),
+          className: "ui-month-picker-cell",
+          onClick: () => periodPick(date),
+          children: periodLabel(date, index)
+        }
+      ) }, index);
+    }) }, row)) })
+  ] });
+  const calendarBounds = [
+    ...minimum ? [{ before: minimum }] : [],
+    ...maximum ? [{ after: maximum }] : [],
+    ...disabledDate ? [disabledDate] : []
+  ];
+  const calendarShared = {
+    // The day grid takes its month from the SAME anchor the period grid uses, so `pickerValue` and
+    // `defaultPickerValue` mean one thing at every granularity.
+    month: viewAnchor,
+    onMonthChange: setViewAnchor,
+    locale: dayPickerLocale,
+    cellRender,
+    showWeekNumber: showWeek,
+    startMonth: minimum,
+    endMonth: maximum,
+    showToday,
+    showClose,
+    onClose: () => setOpen(false)
+  };
+  const dayPanel = range ? /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      mode: "range",
+      selected: rangeValue,
+      numberOfMonths: 2,
+      onSelect: (next) => {
+        choose(next);
+        setFromText(display(next?.from));
+        setToText(display(next?.to));
+      },
+      disabled: calendarBounds,
+      ...calendarShared
+    }
+  ) : multiple ? /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      mode: "multiple",
+      selected: Array.isArray(working) ? working : [],
+      onSelect: choose,
+      disabled: (day) => !allowed(day),
+      ...calendarShared
+    }
+  ) : /* @__PURE__ */ jsx(
+    Calendar,
+    {
+      mode: "single",
+      selected: selectedDate,
+      onSelect: (date) => {
+        if (date && showTime && selectedDate)
+          date.setHours(
+            selectedDate.getHours(),
+            selectedDate.getMinutes(),
+            selectedDate.getSeconds()
+          );
+        choose(date);
+        if (!needConfirm && !multiple) setOpen(false);
+      },
+      disabled: calendarBounds,
+      ...calendarShared
+    }
+  );
+  const trailing = showClear ? /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      tabIndex: -1,
+      "aria-label": clearControl.label,
+      onClick: (event) => {
+        event.stopPropagation();
+        event.currentTarget.closest("div")?.querySelector("input:not([type=hidden])")?.focus();
+        clear();
+      },
+      className: range ? "text-muted-foreground hover:text-foreground shrink-0" : "ui-control-inline-affix-action",
+      children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(
+        X,
+        {
+          className: range ? "ui-month-picker-icon" : "ui-control-inline-affix-icon",
+          "aria-hidden": "true"
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      disabled: allDisabled,
+      tabIndex: -1,
+      "aria-label": (isPeriod ? t("dataEntry.monthPicker.openGrid") : range ? t("dataEntry.dateRangePicker.openCalendar") : t("dataEntry.datePicker.openCalendar")) ?? "Open calendar",
+      className: range ? "text-muted-foreground hover:text-foreground shrink-0" : "ui-control-inline-affix-action",
+      children: /* @__PURE__ */ jsx(
+        CalendarIcon,
+        {
+          className: range ? "ui-month-picker-icon" : "ui-control-inline-affix-icon",
+          "aria-hidden": "true"
+        }
+      )
+    }
+  ) });
+  const panel = /* @__PURE__ */ jsxs(
+    PopoverContent,
+    {
+      id: dialogId,
+      role: "dialog",
+      "aria-label": (isPeriod ? t("dataEntry.monthPicker.openGrid") : t("dataEntry.datePicker.openCalendar")) ?? "Calendar",
+      className: isPeriod ? "ui-month-picker-panel" : "ui-control-panel-flush",
+      side: placement.startsWith("top") ? "top" : "bottom",
+      align: placement.endsWith("end") ? "end" : "start",
+      onOpenAutoFocus: (event) => event.preventDefault(),
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        presets?.length ? /* @__PURE__ */ jsx(Flex, { wrap: true, gap: "xs", pad: "sm", children: presets.map((preset, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            type: "button",
+            onClick: () => {
+              const picked = typeof preset.value === "function" ? preset.value() : preset.value;
+              if (range) {
+                if (!validRange(picked)) return;
+                choose(picked);
+                return;
+              }
+              if (!allowed(picked)) return;
+              choose(picked);
+              if (!needConfirm && !multiple) setOpen(false);
+            },
+            children: preset.label
+          },
+          index
+        )) }) : null,
+        isPeriod ? periodPanel : dayPanel,
+        showTime ? /* @__PURE__ */ jsx(Flex, { pad: "sm", children: /* @__PURE__ */ jsx(
+          TimePicker,
+          {
+            ...typeof showTime === "object" ? showTime : {},
+            "aria-label": t("dataEntry.timePicker.openPicker"),
+            value: selectedDate ? [
+              selectedDate.getHours(),
+              selectedDate.getMinutes(),
+              ...typeof showTime === "object" && showTime.showSeconds ? [selectedDate.getSeconds()] : []
+            ].map((n) => String(n).padStart(2, "0")).join(":") : "",
+            onValueChange: (time) => {
+              if (!time) return;
+              const date = new Date(selectedDate ?? /* @__PURE__ */ new Date());
+              const [h, m, sec = 0] = time.split(":").map(Number);
+              date.setHours(h, m, sec, 0);
+              choose(date);
+            }
+          }
+        ) }) : null,
+        needConfirm ? /* @__PURE__ */ jsx(Flex, { pad: "sm", justify: "end", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            disabled: range ? !validRange(rangeValue) : !selectedDate || !allowed(selectedDate) || !timeAllowed(selectedDate),
+            onClick: () => {
+              if (range ? validRange(rangeValue) : selectedDate && allowed(selectedDate)) {
+                emit(working);
+                if (range) {
+                  setFromText(display(rangeValue?.from));
+                  setToText(display(rangeValue?.to));
+                } else {
+                  setText(displayAll(working));
+                }
+                setOpen(false);
+              }
+            },
+            children: t("dataEntry.timePicker.confirm")
+          }
+        ) }) : null,
+        renderExtraFooter?.()
+      ]
+    }
+  );
+  if (range) {
+    const edgeInput = (edge) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: edge === "from" ? fromId : toId,
+        "data-field": resolvedField ? `${resolvedField}_${edge}` : void 0,
+        name: displayIsCanonical && resolvedName ? `${resolvedName}_${edge}` : void 0,
+        ref: edge === "from" ? ref : void 0,
+        readOnly: inputReadOnly,
+        "aria-readonly": inputReadOnly || void 0,
+        value: edge === "from" ? fromText : toText,
+        disabled: edgeDisabled(edge),
+        placeholder: resolvedPlaceholder,
+        inputMode: "numeric",
+        autoComplete: "off",
+        "aria-label": (edge === "from" ? t("dataEntry.dateRangePicker.from") : t("dataEntry.dateRangePicker.to")) ?? edge,
+        className: "ui-month-picker-input",
+        ...keyHandlers(enterEdge(edge)),
+        onChange: (event) => {
+          if (edge === "from") setFromText(event.target.value);
+          else setToText(event.target.value);
+          commitEdge(edge, event.target.value);
+        },
+        onBlur: (event) => {
+          if (preserveInvalidOnBlur) return;
+          const parsed = parse(event.target.value);
+          const accepted = parsed && allowed(parsed) ? parsed : void 0;
+          const fallback = edge === "from" ? committedRange?.from : committedRange?.to;
+          const next = accepted ? display(accepted) : display(fallback);
+          if (edge === "from") setFromText(next);
+          else setToText(next);
+        }
       }
-    ) : null,
+    );
+    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      hiddenFields,
+      /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "group",
+          id: rootId,
+          ...fieldA11y,
+          "data-field": resolvedField,
+          "data-size": size,
+          "data-status": status,
+          "data-variant": variant,
+          "aria-disabled": allDisabled ? true : void 0,
+          "data-disabled": allDisabled ? "" : void 0,
+          "data-state": open ? "open" : "closed",
+          className: cn(
+            "ui-control ui-control-composite-field",
+            "aria-invalid:border-destructive",
+            CONTROL_VARIANT_CHROME_CLASS[variant ?? "outlined"],
+            CONTROL_STATUS_CHROME_CLASS,
+            className
+          ),
+          onClick: () => {
+            if (!allDisabled) setOpen(true);
+          },
+          children: [
+            edgeInput("from"),
+            /* @__PURE__ */ jsx(ArrowRight, { className: "ui-month-picker-separator-icon", "aria-hidden": "true" }),
+            edgeInput("to"),
+            trailing,
+            panel
+          ]
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    hiddenFields,
     /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         Input,
         {
-          id,
-          name: format || showTime || multiple || needConfirm || preserveInvalidOnBlur ? "" : resolvedName,
+          id: rootId,
+          name: displayIsCanonical ? resolvedName : "",
           ref,
           size,
           status,
@@ -172,7 +631,7 @@ function DatePicker(props) {
           readOnly: inputReadOnly || multiple,
           "data-field": resolvedField,
           value: text,
-          disabled,
+          disabled: allDisabled,
           placeholder: resolvedPlaceholder,
           inputMode: "numeric",
           autoComplete: "off",
@@ -181,50 +640,11 @@ function DatePicker(props) {
           "aria-haspopup": "dialog",
           "aria-controls": open ? dialogId : void 0,
           ...fieldA11y,
-          trailingIcon: /* @__PURE__ */ jsx("span", { className: "ui-time-picker-affix", children: showClear ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              tabIndex: -1,
-              "aria-label": clearControl.label,
-              onClick: (event) => {
-                event.stopPropagation();
-                event.currentTarget.closest("div")?.querySelector("input:not([type=hidden])")?.focus();
-                clear();
-              },
-              className: "ui-control-inline-affix-action",
-              children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
-            }
-          ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled,
-              tabIndex: -1,
-              "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Open calendar",
-              className: "ui-control-inline-affix-action",
-              children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
-            }
-          ) }) }),
+          trailingIcon: /* @__PURE__ */ jsx("span", { className: "ui-time-picker-affix", children: trailing }),
           onClick: () => {
-            if (!disabled) setOpen(true);
-          },
-          onKeyDown: (event) => {
-            if (event.key === "ArrowDown") {
-              event.preventDefault();
-              setOpen(true);
-            } else if (event.key === "Enter") {
-              const parsed = parse(text);
-              if (parsed && allowed(parsed) && timeAllowed(parsed)) {
-                const next = periodDate(parsed);
-                emit(next);
-                setText(display(parsed));
-                setOpen(false);
-              }
-            } else if (event.key === "Escape" && open) {
-              setOpen(false);
-            }
+            if (!allDisabled) setOpen(true);
           },
+          ...keyHandlers(enterSingle),
           onChange: (event) => {
             setText(event.target.value);
             commit(event.target.value);
@@ -232,167 +652,12 @@ function DatePicker(props) {
           onBlur: (event) => {
             const parsed = parse(event.target.value);
             const accepted = parsed && allowed(parsed) && timeAllowed(parsed) ? parsed : void 0;
-            if (!preserveInvalidOnBlur) setText(accepted ? display(accepted) : display(value));
+            if (!preserveInvalidOnBlur)
+              setText(accepted ? display(accepted) : displayAll(committedSingle));
           }
         }
       ),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
-        {
-          id: dialogId,
-          role: "dialog",
-          "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Calendar",
-          className: "ui-control-panel-flush",
-          side: placement.startsWith("top") ? "top" : "bottom",
-          align: placement.endsWith("end") ? "end" : "start",
-          onOpenAutoFocus: (event) => event.preventDefault(),
-          children: [
-            presets?.length ? /* @__PURE__ */ jsx(Flex, { wrap: true, gap: "xs", pad: "sm", children: presets.map((preset, index) => /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                type: "button",
-                onClick: () => {
-                  const date = typeof preset.value === "function" ? preset.value() : preset.value;
-                  if (!allowed(date)) return;
-                  choose(date);
-                  if (!needConfirm && !multiple) setOpen(false);
-                },
-                children: preset.label
-              },
-              index
-            )) }) : null,
-            picker === "date" || picker === "week" ? multiple ? /* @__PURE__ */ jsx(
-              Calendar,
-              {
-                mode: "multiple",
-                selected: Array.isArray(working) ? working : [],
-                defaultMonth: selectedDate,
-                locale: dayPickerLocale,
-                onSelect: choose,
-                disabled: (day) => !allowed(day),
-                cellRender,
-                showWeekNumber: showWeek,
-                startMonth: minimum,
-                endMonth: maximum,
-                showToday,
-                showClose,
-                onClose: () => setOpen(false)
-              }
-            ) : /* @__PURE__ */ jsx(
-              Calendar,
-              {
-                mode: "single",
-                selected: selectedDate,
-                defaultMonth: selectedDate,
-                showWeekNumber: showWeek,
-                onSelect: (date) => {
-                  if (date && showTime && selectedDate)
-                    date.setHours(
-                      selectedDate.getHours(),
-                      selectedDate.getMinutes(),
-                      selectedDate.getSeconds()
-                    );
-                  choose(date);
-                  if (!needConfirm && !multiple) setOpen(false);
-                },
-                locale: dayPickerLocale,
-                disabled: [
-                  ...minimum ? [{ before: minimum }] : [],
-                  ...maximum ? [{ after: maximum }] : [],
-                  ...disabledDate ? [disabledDate] : []
-                ],
-                cellRender,
-                startMonth: minimum,
-                endMonth: maximum,
-                showToday,
-                showClose,
-                onClose: () => setOpen(false)
-              }
-            ) : /* @__PURE__ */ jsxs("div", { className: "ui-month-picker-panel", children: [
-              /* @__PURE__ */ jsxs(Flex, { justify: "between", align: "center", children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    "aria-label": t("dataEntry.monthPicker.previousYear"),
-                    onClick: () => setViewYear(viewYear - (picker === "year" ? 12 : 1)),
-                    children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: new Intl.NumberFormat(locale, { useGrouping: false }).format(viewYear) }),
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: "ghost",
-                    "aria-label": t("dataEntry.monthPicker.nextYear"),
-                    onClick: () => setViewYear(viewYear + (picker === "year" ? 12 : 1)),
-                    children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "ui-month-picker-grid", children: Array.from({ length: picker === "quarter" ? 4 : 12 }, (_, index) => {
-                const date = picker === "year" ? new Date(viewYear + index, 0, 1) : new Date(viewYear, index * (picker === "quarter" ? 3 : 1), 1);
-                const label = picker === "year" ? new Intl.DateTimeFormat(locale, { year: "numeric" }).format(date) : picker === "quarter" ? t("dataEntry.datePicker.quarter", { quarter: index + 1 }) : new Intl.DateTimeFormat(locale, { month: "short" }).format(date);
-                const selected = (Array.isArray(working) ? working : working ? [working] : []).some((day) => +periodDate(day) === +date);
-                return /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    type: "button",
-                    variant: selected ? "default" : "ghost",
-                    "aria-pressed": selected,
-                    disabled: !allowed(date),
-                    onClick: () => {
-                      choose(date);
-                      if (!needConfirm && !multiple) setOpen(false);
-                    },
-                    children: label
-                  },
-                  index
-                );
-              }) })
-            ] }),
-            showTime ? /* @__PURE__ */ jsx(Flex, { pad: "sm", children: /* @__PURE__ */ jsx(
-              TimePicker,
-              {
-                ...typeof showTime === "object" ? showTime : {},
-                "aria-label": t("dataEntry.timePicker.openPicker"),
-                value: selectedDate ? [
-                  selectedDate.getHours(),
-                  selectedDate.getMinutes(),
-                  ...typeof showTime === "object" && showTime.showSeconds ? [selectedDate.getSeconds()] : []
-                ].map((n) => String(n).padStart(2, "0")).join(":") : "",
-                onValueChange: (time) => {
-                  if (!time) return;
-                  const date = new Date(selectedDate ?? /* @__PURE__ */ new Date());
-                  const [h, m, sec = 0] = time.split(":").map(Number);
-                  date.setHours(h, m, sec, 0);
-                  choose(date);
-                }
-              }
-            ) }) : null,
-            needConfirm ? /* @__PURE__ */ jsx(Flex, { pad: "sm", justify: "end", children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                disabled: !selectedDate || !allowed(selectedDate) || !timeAllowed(selectedDate),
-                onClick: () => {
-                  if (selectedDate && allowed(selectedDate) && timeAllowed(selectedDate)) {
-                    emit(working);
-                    setText(display(working));
-                    setOpen(false);
-                  }
-                },
-                children: t("dataEntry.timePicker.confirm")
-              }
-            ) }) : null,
-            renderExtraFooter?.()
-          ]
-        }
-      )
+      panel
     ] }) })
   ] });
 }