@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/date-picker.js

@@ -1,247 +1,21 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useRef, useState } from "react";
-import { Calendar, CalendarClock, ChevronDown, ChevronLeft, ChevronRight, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarClock, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { dirOf, horizontalStep } from "../lib/direction.js";
-import { addDaysIso, monthKey, pad, parseIsoDate } from "../lib/dates.js";
-import {
-  DEFAULT_DATE_PICKER_LABELS,
-  DEFAULT_PICKER_SHEET_LABELS,
-  useKitDateFormatter,
-  useKitLabels,
-  useKitLocale
-} from "../i18n/kit-labels.js";
+import { addDaysIso } from "../lib/dates.js";
+import { useKitLocale } from "../i18n/kit-labels.js";
 import { splitTriggerAria } from "./trigger-aria.js";
-import { Button, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
-import { FOCUS_RING_WIDTH } from "./focus-ring.js";
-import { FieldBox, FieldLabelLine, LABEL_ABOVE_BOX, useFieldMessages } from "./field-parts.js";
-import { FullBleedDialog } from "./full-bleed-dialog.js";
-import { usePhoneLayout } from "../hooks/use-breakpoint.js";
-import { DEFAULT_MINI_CALENDAR_LABELS, MiniCalendar } from "./mini-calendar.js";
-import { DEFAULT_MONTH_PICKER_LABELS } from "./month-picker.js";
-import { Popover } from "./popover.js";
+import { FIELD_BASE } from "./field-base.js";
+import { FieldBox, useFieldMessages } from "./field-parts.js";
 import { Tooltip } from "./tooltip.js";
-function formatDate(iso, locale, options) {
-  return parseIsoDate(iso)?.toLocaleDateString(locale, options) ?? "";
-}
-function useTriggerFormat(source, locale, formatOptions, formatValue) {
-  const fromProvider = useKitDateFormatter();
-  if (formatValue) return formatValue;
-  return (iso) => {
-    if (formatOptions === void 0 && fromProvider) {
-      const text = fromProvider(iso, { unit: "day", source, locale, weekday: source === "datePicker" });
-      if (text) return text;
-    }
-    return formatDate(iso, locale, formatOptions);
-  };
-}
-function CustomTrigger({
-  render,
-  attrs,
-  valueId
-}) {
-  return render(attrs, valueId);
-}
-const VALUE_TRUNCATE = "truncate-until-large";
-function DateFieldTrigger({
-  open,
-  toggle,
-  triggerRef,
-  triggerText,
-  hasValue,
-  labelledBy,
-  valueId,
-  padded,
-  disabled,
-  invalid,
-  required,
-  panelId,
-  aria,
-  renderTrigger
-}) {
-  const wasOpen = useRef(false);
-  useEffect(() => {
-    const justClosed = wasOpen.current && !open;
-    wasOpen.current = open;
-    if (!justClosed) return;
-    const active = document.activeElement;
-    if (!active || active === document.body) triggerRef.current?.focus();
-  }, [open, triggerRef]);
-  const isInvalid = Boolean(invalid) || aria["aria-invalid"] === true || aria["aria-invalid"] === "true";
-  const attrs = {
-    ref: triggerRef,
-    type: "button",
-    disabled,
-    onClick: toggle,
-    // The name has to carry the VALUE. A bare `aria-label={label}` — which is what
-    // this was — replaces the button's text outright, so the one field in the form
-    // whose entire job is to show a date announced "Due date" and stopped there,
-    // and a screen-reader user could not read back what they had picked without
-    // opening the calendar and hunting for the selected day.
-    //
-    // Two ids rather than one composed string (`common.fieldValue`): "label: value"
-    // is a sentence, and a name reference is spoken as the two texts in order with
-    // no punctuation to translate at all. The hidden twin of the FieldLabel lives
-    // in DateField, next to the label it copies.
-    id: aria.id,
-    "aria-labelledby": aria["aria-label"] && !aria["aria-labelledby"] ? void 0 : labelledBy,
-    "aria-label": aria["aria-label"],
-    "aria-describedby": aria["aria-describedby"],
-    // `role="combobox"` on a button that opens a calendar is the APG date-picker
-    // shape, and it is what makes the next two lines legal: `button` supports
-    // neither `aria-expanded` nor `aria-invalid`, so the previous markup set an
-    // invalid state that announced nothing (ESLint's `role-supports-aria-props`).
-    //
-    // `aria-haspopup="dialog"` is now honest — it was not when this comment first
-    // said so. `Popover` gained a real `role="dialog"` in the same wave, so the
-    // trigger's promise and the panel's role finally agree. The phone sheet is a
-    // `role="dialog"` too, and carries the same id.
-    role: "combobox",
-    "aria-haspopup": "dialog",
-    "aria-controls": panelId,
-    "aria-expanded": open,
-    "aria-invalid": isInvalid || void 0,
-    "aria-required": required,
-    className: cn(
-      FIELD_TRIGGER,
-      "pe-9",
-      padded && FIELD_FLOATING_PAD,
-      disabled && "cursor-not-allowed opacity-50",
-      // An `aria-invalid` from a Field spread paints too, as on Input and AmountInput.
-      isInvalid && FIELD_INVALID
-    )
-  };
-  if (renderTrigger) return /* @__PURE__ */ jsx(CustomTrigger, { render: renderTrigger, attrs, valueId });
-  return /* @__PURE__ */ jsx("button", { ...attrs, children: /* @__PURE__ */ jsx("span", { id: valueId, className: cn(VALUE_TRUNCATE, !hasValue && "text-[var(--text-placeholder)]"), children: triggerText || "\xA0" }) });
-}
-const popoverFrame = (body, actions) => actions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-  body,
-  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-2 border-t border-[var(--border)] pt-2", children: actions })
-] }) : body;
-function DateField({
-  triggerText,
-  hasValue,
-  label,
-  disabled,
-  clearable,
-  clearLabel,
-  panelLabel,
-  className,
-  width,
-  onClear,
-  invalid,
-  sheet = false,
-  sheetBackCloses = true,
-  renderTrigger,
-  labelHint,
-  children,
-  // The trigger's, not the wrapper's: `Field`'s render-prop spreads it with the id
-  // pair, and a required date read as optional while it sat on the role-less div.
-  // Taken here rather than in `splitTriggerAria`, which MonthPicker shares.
-  "aria-required": ariaRequired,
-  ...rest
-}) {
-  const showClear = Boolean(clearable && hasValue && !disabled);
-  const [aria, wrapperRest] = splitTriggerAria(rest);
-  const rootRef = useRef(null);
-  const [dir, setDir] = useState("ltr");
-  const id = useId();
-  const labelId = `${id}-label`;
-  const valueId = `${id}-value`;
-  const panelId = `${id}-panel`;
-  const named = typeof label === "string";
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const sheetTriggerRef = useRef(null);
-  const closeSheet = () => setSheetOpen(false);
-  const sheetLabels = useKitLabels("pickerSheet", DEFAULT_PICKER_SHEET_LABELS);
-  const sheetFrame = (body, actions) => /* @__PURE__ */ jsx(
-    FullBleedDialog,
-    {
-      open: true,
-      onClose: closeSheet,
-      id: panelId,
-      "aria-label": panelLabel,
-      header: panelLabel,
-      closeLabel: sheetLabels.close,
-      backCloses: sheetBackCloses,
-      dir,
-      onMouseDown: (e) => e.stopPropagation(),
-      footer: actions,
-      children: body
-    }
-  );
-  const fieldTrigger = ({
-    open,
-    toggle,
-    ref
-  }) => /* @__PURE__ */ jsx(
-    DateFieldTrigger,
-    {
-      open,
-      toggle: () => {
-        setDir(dirOf(rootRef.current));
-        toggle();
-      },
-      triggerRef: ref,
-      triggerText,
-      hasValue,
-      labelledBy: [
-        aria["aria-labelledby"],
-        named ? labelId : !aria["aria-labelledby"] && aria.id ? aria.id : void 0,
-        valueId
-      ].filter(Boolean).join(" "),
-      aria,
-      panelId,
-      valueId,
-      padded: label !== void 0,
-      disabled,
-      invalid,
-      required: ariaRequired,
-      renderTrigger
-    }
-  );
-  return (
-    // The caller's attributes land here, on the field's own box — the trigger inside is
-    // named by `aria-labelledby` and must keep the id pair it is given.
-    // At Large a labelled box is a grid: the label above, the calendar glyph and the
-    // clear × measured against the trigger's row (LABEL_ABOVE_BOX, 0.33 §10.17).
-    /* @__PURE__ */ jsxs("div", { ...wrapperRest, ref: rootRef, className: cn("relative", label !== void 0 && LABEL_ABOVE_BOX, className), children: [
-      label !== void 0 && /* @__PURE__ */ jsx(FieldLabelLine, { label, hint: labelHint }),
-      named && /* @__PURE__ */ jsx("span", { id: labelId, "aria-hidden": true, className: "sr-only-fixed", children: label }),
-      sheet ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        fieldTrigger({ open: sheetOpen, toggle: () => setSheetOpen((v) => !v), ref: sheetTriggerRef }),
-        sheetOpen && children(closeSheet, sheetFrame)
-      ] }) : /* @__PURE__ */ jsx(
-        Popover,
-        {
-          width,
-          panelId,
-          labels: { panel: panelLabel },
-          dir,
-          trigger: fieldTrigger,
-          children: (close) => children(close, popoverFrame)
-        }
-      ),
-      showClear ? /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": clearLabel,
-          onClick: onClear,
-          className: "absolute end-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
-          children: /* @__PURE__ */ jsx(X, { className: "size-4" })
-        }
-      ) : /* @__PURE__ */ jsx(
-        Calendar,
-        {
-          "aria-hidden": true,
-          className: "pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]"
-        }
-      )
-    ] })
-  );
-}
+import {
+  DateField,
+  useDatePickerLabels,
+  useTriggerFormat,
+  withEndHint
+} from "./date-field.js";
+import { PanelCalendar } from "./jump-calendar.js";
+import { DateRangePicker } from "./date-range-picker.js";
 const STEP_ROW_STACK_AT_LARGE = cn(
   "large:max-sm:flex-wrap large:max-sm:gap-y-2",
   "large:max-sm:[&>[data-slot=date-step-field]]:order-first large:max-sm:[&>[data-slot=date-step-field]]:basis-full",
@@ -268,295 +42,19 @@ function StepButton({
         FIELD_BASE,
         // FIELD_BASE is `block w-full` for text inputs; a step button is neither, and
         // px-3 would make it wider than it needs to be. twMerge lets these win.
-        "relative flex h-full w-10 shrink-0 items-center justify-center px-0 text-[var(--text-muted)]",
-        "hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+        "relative flex h-full w-10 shrink-0 items-center justify-center px-0 text-muted",
+        "hover:bg-hover hover:text-secondary",
         // Dimmed ICON, not a dimmed box: at 40% opacity the whole button — border
         // included — faded out of the group and read as a broken, detached control.
-        "disabled:cursor-not-allowed disabled:text-[var(--text-placeholder)] disabled:opacity-60 disabled:hover:bg-[var(--bg-surface)]",
+        "disabled:cursor-not-allowed disabled:text-placeholder disabled:opacity-60 disabled:hover:bg-surface",
+        // A part of a joined row: FIELD_BASE's 2px focus line, whole at 125 % (K5, the
+        // note above this function).
         className
       ),
       children: /* @__PURE__ */ jsx(Icon, { className: cn("size-4", mirror && "rtl:-scale-x-100") })
     }
   ) });
 }
-const monthIndex = (key) => Number(key.slice(0, 4)) * 12 + Number(key.slice(5, 7)) - 1;
-const keyOfIndex = (index) => `${String(Math.floor(index / 12)).padStart(4, "0")}-${pad(index % 12 + 1)}`;
-const shiftKey = (key, delta) => keyOfIndex(monthIndex(key) + delta);
-const firstOfKey = (key) => new Date(Number(key.slice(0, 4)), Number(key.slice(5, 7)) - 1, 1);
-const upperFirst = (text, locale) => text.charAt(0).toLocaleUpperCase(locale) + text.slice(1);
-const MONTH_COLUMNS = 3;
-function openingMonth(from, to, lo, hi) {
-  const start = parseIsoDate(from) ?? parseIsoDate(to) ?? /* @__PURE__ */ new Date();
-  if (lo && start < lo) return monthKey(lo);
-  if (hi && start > hi) return monthKey(hi);
-  return monthKey(start);
-}
-function PanelCalendar({ monthJump, ...calendar }) {
-  return monthJump ? /* @__PURE__ */ jsx(JumpCalendar, { ...calendar }) : /* @__PURE__ */ jsx(MiniCalendar, { ...calendar });
-}
-function JumpCalendar({
-  from = "",
-  to = "",
-  mode = "range",
-  locale,
-  min,
-  max,
-  labels,
-  onSelect,
-  focusOnOpen
-}) {
-  const calendarText = useKitLabels("miniCalendar", DEFAULT_MINI_CALENDAR_LABELS, labels);
-  const monthText = useKitLabels("monthPicker", DEFAULT_MONTH_PICKER_LABELS);
-  const id = useId();
-  const captionId = `${id}-caption`;
-  const hintId = `${id}-hint`;
-  const captionRef = useRef(null);
-  const monthsRef = useRef(null);
-  const lo = min ? parseIsoDate(min) : null;
-  const hi = max ? parseIsoDate(max) : null;
-  const minKey = lo ? monthKey(lo) : null;
-  const maxKey = hi ? monthKey(hi) : null;
-  const outOfBounds = (key) => Boolean(minKey && key < minKey || maxKey && key > maxKey);
-  const clampKey = (key) => minKey && key < minKey ? minKey : maxKey && key > maxKey ? maxKey : key;
-  const [view, setView] = useState("days");
-  const [shown, setShown] = useState(() => openingMonth(from, to, lo, hi));
-  const [dayGrid, setDayGrid] = useState(() => ({ key: 0, focus: Boolean(focusOnOpen) }));
-  const [active, setActive] = useState(shown);
-  const [lastValue, setLastValue] = useState({ from, to });
-  if (lastValue.from !== from || lastValue.to !== to) {
-    const changed = lastValue.from !== from ? from : to;
-    setLastValue({ from, to });
-    const next = parseIsoDate(changed) ?? parseIsoDate(from) ?? parseIsoDate(to);
-    const key = next ? monthKey(next) : null;
-    if (key && (key !== shown || view === "months")) {
-      setShown(key);
-      setView("days");
-      setDayGrid((d) => ({ key: d.key + 1, month: key, focus: false }));
-    }
-  }
-  const pendingFocus = useRef(null);
-  useEffect(() => {
-    const key = pendingFocus.current;
-    if (!key) return;
-    pendingFocus.current = null;
-    monthsRef.current?.querySelector(`[data-month="${key}"]`)?.focus();
-  });
-  const showMonth = (key) => {
-    setShown(key);
-    setDayGrid((d) => ({ ...d, month: key }));
-  };
-  const openMonths = () => {
-    const start = clampKey(shown);
-    pendingFocus.current = start;
-    setActive(start);
-    setView("months");
-  };
-  const closeMonths = (focusCaption) => {
-    setView("days");
-    setDayGrid((d) => ({ ...d, month: shown, focus: false }));
-    if (focusCaption) captionRef.current?.focus();
-  };
-  const pick = (key) => {
-    setShown(key);
-    setView("days");
-    setDayGrid((d) => ({ key: d.key + 1, month: key, focus: true }));
-  };
-  const moveActive = (key, focus) => {
-    if (focus) pendingFocus.current = key;
-    setActive(key);
-  };
-  const inDays = view === "days";
-  const escapeToDays = (e) => {
-    if (e.key !== "Escape" || inDays) return;
-    e.preventDefault();
-    e.stopPropagation();
-    closeMonths(true);
-  };
-  const onMonthKeyDown = (e) => {
-    if (e.key === "Escape") return escapeToDays(e);
-    const step = horizontalStep(e.key, e.currentTarget);
-    const col = monthIndex(active) % 12 % MONTH_COLUMNS;
-    let delta;
-    switch (step ? "horizontal" : e.key) {
-      case "horizontal":
-        delta = step;
-        break;
-      case "ArrowUp":
-        delta = -MONTH_COLUMNS;
-        break;
-      case "ArrowDown":
-        delta = MONTH_COLUMNS;
-        break;
-      case "Home":
-        delta = -col;
-        break;
-      case "End":
-        delta = MONTH_COLUMNS - 1 - col;
-        break;
-      case "PageUp":
-        delta = -12;
-        break;
-      case "PageDown":
-        delta = 12;
-        break;
-      default:
-        return;
-    }
-    e.preventDefault();
-    if (delta !== 0) moveActive(shiftKey(active, delta), true);
-  };
-  const year = Number(active.slice(0, 4));
-  const prevYearBlocked = Boolean(minKey && year - 1 < Number(minKey.slice(0, 4)));
-  const nextYearBlocked = Boolean(maxKey && year + 1 > Number(maxKey.slice(0, 4)));
-  const prevBlocked = !inDays && prevYearBlocked;
-  const nextBlocked = !inDays && nextYearBlocked;
-  const longName = useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
-  const shortNames = useMemo(() => {
-    const fmt = new Intl.DateTimeFormat(locale, { month: "short" });
-    return Array.from({ length: 12 }, (_, i) => upperFirst(fmt.format(new Date(2e3, i, 1)), locale));
-  }, [locale]);
-  const caption = inDays ? upperFirst(longName.format(firstOfKey(shown)), locale) : new Intl.DateTimeFormat(locale, { year: "numeric" }).format(new Date(year, 0, 1));
-  const fromDate = parseIsoDate(from);
-  const toDate = parseIsoDate(to);
-  const fromKey = fromDate ? monthKey(fromDate) : null;
-  const toKey = toDate ? monthKey(toDate) : null;
-  const low = fromKey ?? toKey;
-  const high = toKey ?? fromKey;
-  const currentKey = monthKey(/* @__PURE__ */ new Date());
-  const arrow = "rounded p-1 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-disabled:hover:bg-transparent";
-  return /* @__PURE__ */ jsxs("div", { className: "select-none", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-1 pb-1", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": inDays ? calendarText.previousMonth : monthText.previousYear,
-          "aria-disabled": prevBlocked || void 0,
-          onClick: () => {
-            if (inDays) showMonth(shiftKey(shown, -1));
-            else if (!prevBlocked) moveActive(shiftKey(active, -12), false);
-          },
-          onKeyDown: escapeToDays,
-          className: arrow,
-          children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true })
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "button",
-        {
-          ref: captionRef,
-          type: "button",
-          "aria-expanded": !inDays,
-          "aria-describedby": inDays ? hintId : void 0,
-          onClick: inDays ? openMonths : () => closeMonths(false),
-          onKeyDown: escapeToDays,
-          className: "inline-flex min-w-0 items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
-          children: [
-            /* @__PURE__ */ jsx("span", { id: captionId, "aria-live": "polite", className: "truncate", children: caption }),
-            /* @__PURE__ */ jsx(
-              ChevronDown,
-              {
-                "aria-hidden": true,
-                className: cn("size-3.5 shrink-0 text-[var(--text-muted)]", !inDays && "rotate-180")
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": inDays ? calendarText.nextMonth : monthText.nextYear,
-          "aria-disabled": nextBlocked || void 0,
-          onClick: () => {
-            if (inDays) showMonth(shiftKey(shown, 1));
-            else if (!nextBlocked) moveActive(shiftKey(active, 12), false);
-          },
-          onKeyDown: escapeToDays,
-          className: arrow,
-          children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 rtl:-scale-x-100", "aria-hidden": true })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("span", { id: hintId, hidden: true, children: monthText.panel }),
-    inDays ? /* @__PURE__ */ jsx(
-      MiniCalendar,
-      {
-        mode,
-        from,
-        to,
-        locale,
-        min,
-        max,
-        labels,
-        onSelect,
-        focusOnOpen: dayGrid.focus,
-        hideNavigation: true,
-        month: dayGrid.month,
-        onMonthChange: showMonth
-      },
-      dayGrid.key
-    ) : /* @__PURE__ */ jsx("div", { ref: monthsRef, role: "grid", "aria-labelledby": captionId, className: "grid gap-1", children: Array.from({ length: 12 / MONTH_COLUMNS }, (_, row) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-3 gap-1", children: Array.from({ length: MONTH_COLUMNS }, (_2, c) => {
-      const index = row * MONTH_COLUMNS + c;
-      const key = keyOfIndex(year * 12 + index);
-      const disabled = outOfBounds(key);
-      const selected = low !== null && high !== null && key >= low && key <= high;
-      const end = key === fromKey || key === toKey;
-      const current = key === currentKey;
-      return /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          role: "gridcell",
-          "data-month": key,
-          tabIndex: key === active ? 0 : -1,
-          "aria-label": monthText.month(longName.format(firstOfKey(key))),
-          "aria-selected": selected,
-          "aria-disabled": disabled || void 0,
-          "aria-current": current ? "date" : void 0,
-          onClick: () => {
-            if (!disabled) pick(key);
-          },
-          onKeyDown: onMonthKeyDown,
-          className: cn(
-            // 44px rows: the touch-target size, and four of them stand as tall
-            // as a month of days, so the panel does not jump as the views swap.
-            "h-11 rounded px-1 text-sm tabular-nums transition-colors",
-            FOCUS_RING_WIDTH,
-            "focus-visible:outline-none focus-visible:ring-inset",
-            // A --brand ring on a --brand fill exists only in the DOM.
-            end && !disabled ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
-            disabled ? "cursor-not-allowed text-[var(--text-placeholder)]" : end ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : selected ? "bg-[var(--brand-bg)] font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
-            current && !selected && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]"
-          ),
-          children: shortNames[index]
-        },
-        c
-      );
-    }) }, row)) })
-  ] });
-}
-function useDatePickerLabels(clearLabel, stepLabels, todayLabel) {
-  const prev = stepLabels?.prev;
-  const next = stepLabels?.next;
-  const fromProps = useMemo(() => {
-    const out = {};
-    if (clearLabel !== void 0) out.clear = clearLabel;
-    if (prev !== void 0) out.previousDay = prev;
-    if (next !== void 0) out.nextDay = next;
-    if (todayLabel !== void 0) out.today = todayLabel;
-    return out;
-  }, [clearLabel, prev, next, todayLabel]);
-  return useKitLabels("datePicker", DEFAULT_DATE_PICKER_LABELS, fromProps);
-}
-function withEndHint(field, hint) {
-  if (hint === void 0) return field;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: field }),
-    /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: hint })
-  ] });
-}
 function DatePicker(props) {
   const {
     value,
@@ -584,6 +82,8 @@ function DatePicker(props) {
     // Named so it reaches the field (and so its trigger) when a step/today row is the
     // root and takes the rest of the caller's props.
     "aria-required": ariaRequired,
+    // The trigger's, wherever the rest go (API-3).
+    ref,
     ...rest
   } = props;
   const locale = useKitLocale(localeProp);
@@ -602,6 +102,7 @@ function DatePicker(props) {
     DateField,
     {
       ...wrapped ? triggerAria : rest,
+      fieldRef: ref,
       "aria-describedby": messages.describedBy,
       "aria-required": ariaRequired,
       label,
@@ -675,6 +176,8 @@ function DatePicker(props) {
           // the trigger, which raising the trigger alone covered. Hover raises nothing: it
           // changes no border, and would let a hovered › cover a focused field's edge.
           "[&>*:focus-within]:z-20 [&>*:active]:z-20 [&>*:has([aria-invalid=true])]:z-10",
+          // …and its line is 2px, so no side of it reads half-strength at 125 % (live #394,
+          // fourth round): FIELD_BASE's inset ring, which every part of the row carries.
           STEP_ROW_STACK_AT_LARGE,
           className
         ),
@@ -718,245 +221,6 @@ function DatePicker(props) {
   );
   return /* @__PURE__ */ jsx(FieldBox, { below: messages.below, reserve, children: withEndHint(row, endHint) });
 }
-function markedPreset(presets, from, to, activeId, controlled) {
-  const matches = (p) => p.from === from && p.to === to;
-  if (activeId != null) {
-    const byId = presets.findIndex((p) => p.id === activeId && matches(p));
-    if (byId !== -1 || controlled) return byId;
-  } else if (controlled) {
-    return -1;
-  }
-  return presets.findIndex(matches);
-}
-function PresetColumn({
-  presets,
-  marked,
-  label,
-  onPick,
-  sheet
-}) {
-  return (
-    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule
-    // between it and the calendar has to follow it in a right-to-left UI.
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "group",
-        "aria-label": label,
-        className: sheet ? "grid grid-cols-2 gap-0.5" : "flex w-32 shrink-0 flex-col gap-0.5 border-e border-[var(--border)] pe-2",
-        children: presets.map((p, i) => {
-          const selected = i === marked;
-          return /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-pressed": selected,
-              "data-preset": p.id,
-              onClick: () => onPick(p),
-              className: cn(
-                "rounded px-2 text-start",
-                // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).
-                sheet ? "min-h-11 py-2 text-sm" : "py-1.5 text-xs",
-                selected ? "bg-[var(--bg-active)] font-medium text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
-              ),
-              children: p.label
-            },
-            p.id ?? i
-          );
-        })
-      }
-    )
-  );
-}
-function RangePanel({
-  from,
-  to,
-  presets,
-  activeId,
-  controlled,
-  commit,
-  close,
-  frame,
-  sheet,
-  commitRange,
-  calendarProps,
-  labels,
-  renderDraftSummary
-}) {
-  const drafting = commit === "apply";
-  const [draft, setDraft] = useState({
-    from,
-    to,
-    presetId: activeId ?? void 0
-  });
-  const shown = drafting ? draft : { from, to, presetId: activeId ?? void 0 };
-  const marked = presets ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled) : -1;
-  const complete = Boolean(draft.from && draft.to);
-  const summary = drafting && renderDraftSummary ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] }) : null;
-  const picker = /* @__PURE__ */ jsx(
-    PanelCalendar,
-    {
-      ...calendarProps,
-      focusOnOpen: true,
-      from: shown.from,
-      to: shown.to,
-      onSelect: (f, t) => {
-        if (drafting) {
-          setDraft({ from: f, to: t, presetId: void 0 });
-          return;
-        }
-        commitRange(f, t, void 0);
-        if (f && t) close();
-      }
-    }
-  );
-  const calendar = drafting && renderDraftSummary ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-    summary != null && /* @__PURE__ */ jsx("div", { "aria-live": "polite", "data-draft-summary": "", className: "text-xs text-[var(--text-muted)]", children: summary }),
-    picker
-  ] }) : picker;
-  const body = presets && presets.length > 0 ? /* @__PURE__ */ jsxs("div", { className: sheet ? "flex flex-col gap-3" : "flex gap-3", children: [
-    /* @__PURE__ */ jsx(
-      PresetColumn,
-      {
-        sheet,
-        presets,
-        marked,
-        label: labels.presets,
-        onPick: (p) => {
-          if (drafting) {
-            setDraft({ from: p.from, to: p.to, presetId: p.id });
-            return;
-          }
-          commitRange(p.from, p.to, p.id);
-          close();
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: calendar })
-  ] }) : calendar;
-  if (!drafting) return frame(body);
-  return frame(
-    body,
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", className: sheet ? "flex-1" : void 0, onClick: close, children: labels.cancel }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          className: sheet ? "flex-1" : void 0,
-          disabled: !complete,
-          onClick: () => {
-            if (!complete) return;
-            commitRange(draft.from, draft.to, draft.presetId);
-            close();
-          },
-          children: labels.apply
-        }
-      )
-    ] })
-  );
-}
-function DateRangePicker(props) {
-  const {
-    from,
-    to,
-    onChange,
-    locale: localeProp,
-    placeholder,
-    min,
-    max,
-    formatOptions,
-    formatValue,
-    separator = " \u2013 ",
-    presets,
-    preset,
-    commit = "immediate",
-    renderTrigger,
-    sheetBackCloses,
-    renderDraftSummary,
-    calendarLabels,
-    monthJump,
-    label,
-    clearable,
-    clearLabel,
-    disabled,
-    invalid,
-    hint,
-    error,
-    ...rest
-  } = props;
-  const locale = useKitLocale(localeProp);
-  const text = useDatePickerLabels(clearLabel, void 0, void 0);
-  const render = useTriggerFormat("dateRangePicker", locale, formatOptions, formatValue);
-  const messages = useFieldMessages({
-    hint,
-    error,
-    invalid,
-    describedBy: rest["aria-describedby"],
-    ariaInvalid: rest["aria-invalid"]
-  });
-  const [ownPreset, setOwnPreset] = useState(void 0);
-  const controlled = preset !== void 0;
-  const activeId = controlled ? preset : ownPreset;
-  const a = from ? render(from) : "";
-  const b = to ? render(to) : "";
-  const triggerText = from ? to ? `${a}${separator}${b}` : `${a}${separator}\u2026` : placeholder ?? "";
-  const hasPresets = Boolean(presets && presets.length > 0);
-  const sheet = usePhoneLayout();
-  const commitRange = (f, t, presetId) => {
-    setOwnPreset(presetId);
-    if (presetId === void 0) onChange(f, t);
-    else onChange(f, t, presetId);
-  };
-  const field = /* @__PURE__ */ jsx(
-    DateField,
-    {
-      ...rest,
-      "aria-describedby": messages.describedBy,
-      label,
-      labelHint: messages.labelHint,
-      clearable,
-      clearLabel: text.clear,
-      panelLabel: text.rangePanel,
-      disabled,
-      invalid: messages.isInvalid,
-      width: hasPresets ? "27.5rem" : void 0,
-      hasValue: Boolean(from || to),
-      triggerText,
-      onClear: () => commitRange("", "", void 0),
-      sheet,
-      sheetBackCloses,
-      renderTrigger: renderTrigger && ((triggerProps, valueId) => renderTrigger({
-        triggerProps,
-        valueProps: { id: valueId },
-        open: triggerProps["aria-expanded"],
-        from,
-        to,
-        preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],
-        text: triggerText
-      })),
-      children: (close, frame) => /* @__PURE__ */ jsx(
-        RangePanel,
-        {
-          from,
-          to,
-          presets,
-          activeId,
-          controlled,
-          commit,
-          close,
-          frame,
-          sheet,
-          commitRange,
-          calendarProps: { locale, min, max, labels: calendarLabels, monthJump },
-          labels: text,
-          renderDraftSummary
-        }
-      )
-    }
-  );
-  return /* @__PURE__ */ jsx(FieldBox, { below: messages.below, reserve: "error" in props || "hint" in props, children: withEndHint(field, label === void 0 ? messages.labelHint : void 0) });
-}
 export {
   DatePicker,
   DateRangePicker