@eifi1/ui-kit 0.8.1 → 0.10.0

package/dist/components/date-picker.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, RefObject } from 'react';
 import { MiniCalendarProps } from './mini-calendar.js';
 
 /**
@@ -43,6 +43,32 @@ interface DatePickerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "onC
      *  Usually unnecessary now: the calendar reads `miniCalendar` from the provider. */
     calendarLabels?: MiniCalendarProps["labels"];
 }
+/**
+ * Everything the kit's own trigger button carries, handed to a custom one
+ * ({@link DateRangePickerProps.renderTrigger}) to spread onto its `<button>`. Spread
+ * it WHOLE: the ref is how focus comes back when the panel closes, the id pair and
+ * `aria-labelledby` are the 0.5.1 naming (an external `<label htmlFor>`, a form
+ * library's `aria-describedby`), and `role`/`aria-haspopup`/`aria-controls`/
+ * `aria-expanded` are what tell a screen reader this opens a calendar and whether it
+ * is open. `className` is the kit's field look (42px with a label, `pe-9` for the
+ * glyph the field draws at its end) — merge yours after it with `cn`.
+ */
+interface DateTriggerAttributes {
+    ref: RefObject<HTMLButtonElement | null>;
+    type: "button";
+    id?: string;
+    role: "combobox";
+    "aria-haspopup": "dialog";
+    "aria-controls": string;
+    "aria-expanded": boolean;
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: true;
+    disabled?: boolean;
+    onClick: () => void;
+    className: string;
+}
 interface DatePickerProps extends DatePickerBaseProps {
     /** ISO "YYYY-MM-DD", or "" for empty. */
     value: string;
@@ -138,10 +164,70 @@ interface DateRangePickerProps extends DatePickerBaseProps {
     preset?: string | null;
     /** See {@link DateRangeCommit}. Default `"immediate"`. */
     commit?: DateRangeCommit;
+    /**
+     * Draw the trigger yourself. keksdose's report range field
+     * (reports/report-range-field.tsx, "Why this is app-level") is why: its trigger
+     * NAMES the active preset ("Last 3 months", the window as a muted suffix) where the
+     * kit's shows two dates, sits inside a Tooltip, and is squared off on one side so the
+     * granularity control can join it flush at the field's 42px.
+     *
+     * Spread `props.triggerProps` onto a `<button>` whole and put `props.valueProps` on
+     * the element that shows the value — see {@link DateTriggerAttributes} for what each
+     * part is for. The field around it (label, hidden name twin, clear/calendar glyph,
+     * popover or phone sheet) is unchanged.
+     */
+    renderTrigger?: (props: DateRangeTriggerRenderProps) => ReactNode;
+    /**
+     * Below {@link PHONE_QUERY} the panel opens as a full-screen sheet (`FullBleedDialog`)
+     * with presets in a grid above the calendar and Apply pinned in the footer, instead
+     * of the 440px popover that hung off a 360px screen (keksdose's report range field,
+     * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back
+     * dismisses the sheet; off for a caller whose commit rewrites the URL with
+     * `replaceState` in the same tick — keksdose's `?preset/from/to` — where the router
+     * would overwrite the sheet's history marker.
+     */
+    sheetBackCloses?: boolean;
+    /**
+     * With `commit="apply"`: a line above the calendar saying what Apply would commit —
+     * keksdose's report range writes "Custom · 1 Mar 2026 – …" there
+     * (report-range-field.tsx), the one place a preset armed and then nudged by a day is
+     * seen to have become "Custom", and a half-made range to still lack its end. Called
+     * with the DRAFT on every change, in the popover and the phone sheet alike; `preset`
+     * is the preset the column marks for it (none once a day was picked by hand), `to` is
+     * `""` until the second click. The line is a polite live region, so a screen reader
+     * hears the draft change as the calendar is used.
+     *
+     * Ignored in `"immediate"` mode, where there is no draft: every click is the value.
+     */
+    renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;
+}
+/** What {@link DateRangePickerProps.renderDraftSummary} is called with. */
+interface DateRangeDraftSummary {
+    from: string;
+    to: string;
+    /** The preset the column marks for the draft, if any. */
+    preset: DateRangePickerPreset | undefined;
+}
+/** What {@link DateRangePickerProps.renderTrigger} is called with. */
+interface DateRangeTriggerRenderProps {
+    /** Spread onto the `<button>`, whole. Merge your class after `triggerProps.className`. */
+    triggerProps: DateTriggerAttributes;
+    /** Put on the element showing the value: the trigger is named "label, value" by
+     *  reference to this id. Without it the name is the label alone. */
+    valueProps: {
+        id: string;
+    };
+    open: boolean;
+    from: string;
+    to: string;
+    /** The preset the column marks for the committed range, if any — the one to name. */
+    preset: DateRangePickerPreset | undefined;
+    /** What the kit's own trigger would show: the formatted range, or the placeholder. */
+    text: string;
 }
 /** Two-date range picker: click a start then an end; closes once both are set.
  *  With `presets`, a column of named ranges is shown beside the calendar; with
  *  `commit="apply"` the panel drafts and commits on Apply (see {@link DateRangeCommit}). */
-declare function DateRangePicker({ from, to, onChange, locale: localeProp, placeholder, min, max, formatOptions, formatValue, separator, presets, preset, commit, calendarLabels, label, clearable, clearLabel, disabled, invalid, ...rest }: DateRangePickerProps): react.JSX.Element;
+declare function DateRangePicker({ from, to, onChange, locale: localeProp, placeholder, min, max, formatOptions, formatValue, separator, presets, preset, commit, renderTrigger, sheetBackCloses, renderDraftSummary, calendarLabels, label, clearable, clearLabel, disabled, invalid, ...rest }: DateRangePickerProps): react.JSX.Element;
 
-export { DatePicker, type DatePickerProps, type DateRangeCommit, DateRangePicker, type DateRangePickerPreset, type DateRangePickerProps };
+export { DatePicker, type DatePickerProps, type DateRangeCommit, type DateRangeDraftSummary, DateRangePicker, type DateRangePickerPreset, type DateRangePickerProps, type DateRangeTriggerRenderProps, type DateTriggerAttributes };

package/dist/components/date-picker.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Calendar, CalendarClock, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
@@ -7,17 +7,27 @@ import { dirOf } from "../lib/direction.js";
 import { addDaysIso, parseIsoDate } from "../lib/dates.js";
 import {
   DEFAULT_DATE_PICKER_LABELS,
+  DEFAULT_PICKER_SHEET_LABELS,
   useKitLabels,
   useKitLocale
 } from "../i18n/kit-labels.js";
 import { splitTriggerAria } from "./trigger-aria.js";
-import { Button, FieldLabel, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
+import { Button, FieldLabel, FIELD_BASE, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID, PHONE_QUERY } from "./ui.js";
+import { FullBleedDialog } from "./full-bleed-dialog.js";
+import { useMediaQuery } from "../hooks/use-media-query.js";
 import { MiniCalendar } from "./mini-calendar.js";
 import { Popover } from "./popover.js";
 import { Tooltip } from "./tooltip.js";
 function formatDate(iso, locale, options) {
   return parseIsoDate(iso)?.toLocaleDateString(locale, options) ?? "";
 }
+function CustomTrigger({
+  render,
+  attrs,
+  valueId
+}) {
+  return render(attrs, valueId);
+}
 function DateFieldTrigger({
   open,
   toggle,
@@ -30,7 +40,8 @@ function DateFieldTrigger({
   disabled,
   invalid,
   panelId,
-  aria
+  aria,
+  renderTrigger
 }) {
   const wasOpen = useRef(false);
   useEffect(() => {
@@ -40,33 +51,54 @@ function DateFieldTrigger({
     const active = document.activeElement;
     if (!active || active === document.body) triggerRef.current?.focus();
   }, [open, triggerRef]);
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref: triggerRef,
-      type: "button",
-      disabled,
-      onClick: toggle,
-      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",
-      "aria-haspopup": "dialog",
-      "aria-controls": panelId,
-      "aria-expanded": open,
-      "aria-invalid": invalid || aria["aria-invalid"] === true || aria["aria-invalid"] === "true" || void 0,
-      className: cn(
-        FIELD_TRIGGER,
-        "pe-9",
-        padded && FIELD_FLOATING_PAD,
-        disabled && "cursor-not-allowed opacity-50",
-        invalid && FIELD_INVALID
-      ),
-      children: /* @__PURE__ */ jsx("span", { id: valueId, className: cn("truncate", !hasValue && "text-[var(--text-placeholder)]"), children: triggerText || "\xA0" })
-    }
-  );
+  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": invalid || aria["aria-invalid"] === true || aria["aria-invalid"] === "true" || void 0,
+    className: cn(
+      FIELD_TRIGGER,
+      "pe-9",
+      padded && FIELD_FLOATING_PAD,
+      disabled && "cursor-not-allowed opacity-50",
+      invalid && 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("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,
@@ -79,6 +111,9 @@ function DateField({
   width,
   onClear,
   invalid,
+  sheet = false,
+  sheetBackCloses = true,
+  renderTrigger,
   children,
   ...rest
 }) {
@@ -91,44 +126,73 @@ function DateField({
   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,
+      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.
     /* @__PURE__ */ jsxs("div", { ...wrapperRest, ref: rootRef, className: cn("relative", className), children: [
       label !== void 0 && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
       named && /* @__PURE__ */ jsx("span", { id: labelId, "aria-hidden": true, className: "sr-only-fixed", children: label }),
-      /* @__PURE__ */ jsx(
+      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: ({ 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
-            }
-          ),
-          children: (close) => children(close)
+          trigger: fieldTrigger,
+          children: (close) => children(close, popoverFrame)
         }
       ),
       showClear ? /* @__PURE__ */ jsx(
@@ -338,7 +402,8 @@ function PresetColumn({
   presets,
   marked,
   label,
-  onPick
+  onPick,
+  sheet
 }) {
   return (
     // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule
@@ -348,7 +413,7 @@ function PresetColumn({
       {
         role: "group",
         "aria-label": label,
-        className: "flex w-32 shrink-0 flex-col gap-0.5 border-e border-[var(--border)] pe-2",
+        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(
@@ -359,7 +424,9 @@ function PresetColumn({
               "data-preset": p.id,
               onClick: () => onPick(p),
               className: cn(
-                "rounded px-2 py-1.5 text-start text-xs",
+                "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
@@ -379,9 +446,12 @@ function RangePanel({
   controlled,
   commit,
   close,
+  frame,
+  sheet,
   commitRange,
   calendarProps,
-  labels
+  labels,
+  renderDraftSummary
 }) {
   const drafting = commit === "apply";
   const [draft, setDraft] = useState({
@@ -392,7 +462,8 @@ function RangePanel({
   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 calendar = /* @__PURE__ */ jsx(
+  const summary = drafting && renderDraftSummary ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] }) : null;
+  const picker = /* @__PURE__ */ jsx(
     MiniCalendar,
     {
       ...calendarProps,
@@ -409,10 +480,15 @@ function RangePanel({
       }
     }
   );
-  const body = presets && presets.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+  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,
@@ -428,15 +504,16 @@ function RangePanel({
     ),
     /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: calendar })
   ] }) : calendar;
-  if (!drafting) return body;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+  if (!drafting) return frame(body);
+  return frame(
     body,
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-[var(--border)] pt-2", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", onClick: close, children: labels.cancel }),
+    /* @__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;
@@ -447,7 +524,7 @@ function RangePanel({
         }
       )
     ] })
-  ] });
+  );
 }
 function DateRangePicker({
   from,
@@ -463,6 +540,9 @@ function DateRangePicker({
   presets,
   preset,
   commit = "immediate",
+  renderTrigger,
+  sheetBackCloses,
+  renderDraftSummary,
   calendarLabels,
   label,
   clearable,
@@ -481,6 +561,7 @@ function DateRangePicker({
   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 = useMediaQuery(PHONE_QUERY, false);
   const commitRange = (f, t, presetId) => {
     setOwnPreset(presetId);
     if (presetId === void 0) onChange(f, t);
@@ -500,7 +581,18 @@ function DateRangePicker({
       hasValue: Boolean(from || to),
       triggerText,
       onClear: () => commitRange("", "", void 0),
-      children: (close) => /* @__PURE__ */ jsx(
+      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,
@@ -510,9 +602,12 @@ function DateRangePicker({
           controlled,
           commit,
           close,
+          frame,
+          sheet,
           commitRange,
           calendarProps: { locale, min, max, labels: calendarLabels },
-          labels: text
+          labels: text,
+          renderDraftSummary
         }
       )
     }