@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/data-entry/control-appearance.js

@@ -0,0 +1,39 @@
+function controlAppearanceAttributes({
+  status,
+  variant,
+  "aria-invalid": ariaInvalid
+}) {
+  return {
+    "data-status": status,
+    "data-variant": variant,
+    "aria-invalid": ariaInvalid ?? (status === "error" ? true : void 0)
+  };
+}
+const CONTROL_VARIANT_CHROME_CLASS = {
+  outlined: "border-input bg-background",
+  filled: "ui-control--filled",
+  borderless: "ui-control--borderless"
+};
+const CONTROL_STATUS_CHROME_CLASS = "data-[status=error]:border-destructive data-[status=warning]:border-warning";
+function countCodePoints(value) {
+  return [...value].length;
+}
+function resolveControlCount(config, value) {
+  if (!config || config.show === false) return null;
+  const strategy = config.strategy ?? countCodePoints;
+  const count = strategy(value);
+  const max = config.max;
+  return {
+    count,
+    max,
+    exceeded: max != null && count > max,
+    content: config.formatter ? config.formatter({ value, count, max }) : max == null ? String(count) : `${count} / ${max}`
+  };
+}
+export {
+  CONTROL_STATUS_CHROME_CLASS,
+  CONTROL_VARIANT_CHROME_CLASS,
+  controlAppearanceAttributes,
+  countCodePoints,
+  resolveControlCount
+};

package/dist/components/data-entry/control-surface.d.ts

@@ -0,0 +1,61 @@
+import type * as React from "react";
+import type { AllowClearProp, ControlStatusProp, ControlVariantProp, MaxTagPlaceholderProp, SizeProp } from "../../props/vocabulary/index.js";
+/**
+ * The DOM attributes that put a control on the `variant` × `status` × `size` matrix owned by
+ * `.ui-control-surface` in `src/styles/control.css`.
+ *
+ * Written once, here, rather than five times: every member of the select family (Select,
+ * SearchSelect, Cascader, TreeSelect, TagInput) states the antd surface contract the same way, and
+ * a per-component copy is how the five drift apart. Each default (`outlined`, `md`) emits NO
+ * attribute at all, so a control that says nothing keeps the exact DOM it had.
+ */
+export declare function controlSurfaceAttrs(props: {
+    variant?: ControlVariantProp;
+    status?: ControlStatusProp;
+    size?: SizeProp;
+}): {
+    "data-variant"?: ControlVariantProp;
+    "data-status"?: ControlStatusProp;
+    "data-size"?: SizeProp;
+};
+/**
+ * `status="error"` must also reach assistive tech, so it folds into `aria-invalid`.
+ *
+ * antd's own `status="error"` is a pure recolour — a state announced by hue alone, which WCAG 2.2
+ * SC 1.4.1 does not accept. An `aria-invalid` arriving from `FormField` always wins: the field's
+ * validation state is the authority, and a `status` prop must never be able to talk it down.
+ */
+export declare function resolveAriaInvalid<T extends React.AriaAttributes["aria-invalid"]>(ariaInvalid: T, status: ControlStatusProp | undefined): T | true | undefined;
+/** The normalised clear affordance: whether to offer it, with what icon, under what label. */
+export type ResolvedAllowClear = {
+    enabled: boolean;
+    clearIcon?: React.ReactNode;
+    label?: string;
+};
+/**
+ * Reconcile antd's `allowClear` with this library's own `clearable`.
+ *
+ * `allowClear` wins when present because it is the more specific statement — the object form
+ * carries an icon and a label that `clearable` has no way to express. `clearable` remains the
+ * name every existing call site uses, and keeps its `true` default.
+ */
+export declare function resolveAllowClear(allowClear: AllowClearProp | undefined, clearable: boolean | undefined, fallbackLabel?: string): ResolvedAllowClear;
+/**
+ * Apply antd's `maxTagCount` / `maxTagPlaceholder` to a list of selected values.
+ *
+ * Returns the values that stay visible plus the overflow node, so the three call sites (Cascader,
+ * TreeSelect, TagInput) agree on what "+2" means. `maxTagCount` is only honoured when it is a
+ * non-negative number — `undefined` shows everything, which is the antd default.
+ *
+ * `overflow` is `undefined` when the consumer supplied no `maxTagPlaceholder`: the fallback wording
+ * is a COUNT, and a count has to go through `t()` + `Intl.PluralRules` at the call site rather than
+ * be concatenated here.
+ */
+export declare function applyMaxTagCount<T extends {
+    value: string;
+    label: React.ReactNode;
+}>(items: T[], maxTagCount: number | undefined, maxTagPlaceholder: MaxTagPlaceholderProp | undefined): {
+    visible: T[];
+    omitted: T[];
+    overflow: React.ReactNode | undefined;
+};

package/dist/components/data-entry/control-surface.js

@@ -0,0 +1,39 @@
+function controlSurfaceAttrs(props) {
+  return {
+    "data-variant": props.variant && props.variant !== "outlined" ? props.variant : void 0,
+    "data-status": props.status,
+    "data-size": props.size && props.size !== "md" ? props.size : void 0
+  };
+}
+function resolveAriaInvalid(ariaInvalid, status) {
+  if (ariaInvalid !== void 0) return ariaInvalid;
+  return status === "error" ? true : void 0;
+}
+function resolveAllowClear(allowClear, clearable, fallbackLabel) {
+  if (allowClear !== void 0) {
+    if (typeof allowClear === "boolean") {
+      return { enabled: allowClear, label: fallbackLabel };
+    }
+    return {
+      enabled: true,
+      clearIcon: allowClear.clearIcon,
+      label: allowClear.label ?? fallbackLabel
+    };
+  }
+  return { enabled: clearable !== false, label: fallbackLabel };
+}
+function applyMaxTagCount(items, maxTagCount, maxTagPlaceholder) {
+  if (maxTagCount === void 0 || maxTagCount < 0 || items.length <= maxTagCount) {
+    return { visible: items, omitted: [], overflow: void 0 };
+  }
+  const visible = items.slice(0, maxTagCount);
+  const omitted = items.slice(maxTagCount);
+  const overflow = typeof maxTagPlaceholder === "function" ? maxTagPlaceholder(omitted.map(({ value, label }) => ({ value, label }))) : maxTagPlaceholder;
+  return { visible, omitted, overflow };
+}
+export {
+  applyMaxTagCount,
+  controlSurfaceAttrs,
+  resolveAllowClear,
+  resolveAriaInvalid
+};

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

@@ -6,4 +6,4 @@ export type { DatePickerProp, DatePickerProp as DatePickerProps, } from "../../p
  * `yyyy-MM-dd` string (the international standard): it is form-submittable (give it a `name`),
  * screen-reader friendly, and e2e-testable by simply filling the input.
  */
-export declare function DatePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, allowClear, ...ariaProps }: DatePickerProp): React.JSX.Element;
+export declare function DatePicker(props: DatePickerProp): React.JSX.Element;

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

@@ -1,36 +1,92 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { CalendarIcon, X } from "lucide-react";
+import { CalendarIcon, ChevronLeft, ChevronRight, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
-import { parseDateInput, toIsoDate } from "../../lib/datetime/parse.js";
+import { toIsoDate } from "../../lib/datetime/parse.js";
+import {
+  formatPickerDate,
+  parsePickerDate,
+  pickerDateAllowed,
+  pickerPeriodStart
+} 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 { cn } from "../../lib/utils.js";
+import { resolveAllowClear } from "./control-surface.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";
-function DatePicker({
-  value: valueProp,
-  defaultValue,
-  onValueChange,
-  placeholder,
-  disabled,
-  className,
-  id,
-  name,
-  locale: localeProp,
-  showToday,
-  showClose,
-  fromDate,
-  toDate,
-  allowClear = true,
-  ...ariaProps
-}) {
+function DatePicker(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    placeholder,
+    disabled,
+    className,
+    id,
+    name,
+    locale: localeProp,
+    showToday,
+    showClose,
+    fromDate,
+    toDate,
+    disabledDate,
+    cellRender,
+    allowClear,
+    format: formatProp,
+    parseFormat,
+    minDate,
+    maxDate,
+    showWeek,
+    showTime,
+    presets,
+    multiple = false,
+    picker = "date",
+    order = true,
+    needConfirm = Boolean(showTime),
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    inputReadOnly,
+    preserveInvalidOnBlur,
+    placement = "bottom-start",
+    renderExtraFooter,
+    size,
+    status,
+    variant,
+    ref,
+    ...ariaProps
+  } = props;
+  const format = formatProp ?? (typeof showTime === "object" && showTime.showSeconds ? "yyyy-MM-dd HH:mm:ss" : void 0);
   const { t } = useTranslation();
-  const { dayPickerLocale } = usePickerLocales(localeProp);
-  const [open, setOpen] = React.useState(false);
+  const { dayPickerLocale, locale } = usePickerLocales(localeProp);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = !disabled && (openProp ?? internalOpen);
+  const [pending, setPending] = React.useState();
+  const [hasPending, setHasPending] = React.useState(false);
+  const setOpen = (next) => {
+    if (disabled && next) return;
+    if (openProp === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+    if (!next) {
+      setHasPending(false);
+      setPending(void 0);
+    }
+  };
+  const timeAllowed = (date) => {
+    const rules = typeof showTime === "object" ? showTime.disabledTime?.() : void 0;
+    return !(rules?.disabledHours?.().includes(date.getHours()) || rules?.disabledMinutes?.(date.getHours()).includes(date.getMinutes()) || rules?.disabledSeconds?.(date.getHours(), date.getMinutes()).includes(date.getSeconds()));
+  };
+  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 identity = useFieldIdentity({ id, name, "data-field": fieldA11y["data-field"] });
   const resolvedName = name ?? identity.name;
@@ -40,63 +96,106 @@ function DatePicker({
   const isControlled = useControlledLatch(valueProp !== void 0);
   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 emit = (next) => {
     if (!isControlled) setInternalValue(next);
-    onValueChange?.(next);
+    if (props.multiple)
+      props.onValueChange?.(Array.isArray(next) ? next : next ? [next] : void 0);
+    else props.onValueChange?.(Array.isArray(next) ? next[0] : next);
   };
-  const [text, setText] = React.useState(() => toIsoDate(value));
+  const [text, setText] = React.useState(() => display(value));
   React.useEffect(() => {
-    setText(toIsoDate(value));
-  }, [value]);
+    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;
   const clear = () => {
     emit(void 0);
     setText("");
   };
-  const showClear = allowClear && text !== "" && !disabled;
+  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
+  const showClear = clearControl.enabled && text !== "" && !disabled;
+  const choose = (input) => {
+    let date = input;
+    if (Array.isArray(date)) {
+      if (date.some((day) => !allowed(day))) return;
+      if (order) date = [...date].sort((a, b) => +a - +b);
+    } else if (date) {
+      date = periodDate(date);
+      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];
+        if (order) date.sort((a, b) => +a - +b);
+      }
+    }
+    if (needConfirm) {
+      setPending(date);
+      setHasPending(true);
+    } else {
+      emit(date);
+      setText(display(date));
+    }
+  };
   const commit = (raw) => {
-    const trimmed = raw.trim();
-    if (trimmed === "") {
-      emit(void 0);
+    if (!raw.trim()) {
+      choose(void 0);
       return;
     }
-    if (!/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return;
-    const parsed = parseDateInput(trimmed);
-    if (parsed) {
-      emit(parsed);
-    }
+    const parsed = parse(raw);
+    if (parsed && allowed(parsed)) choose(parsed);
   };
-  return /* @__PURE__ */ jsx(Popover, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsx(
-      Input,
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    (format || showTime || multiple || needConfirm || preserveInvalidOnBlur) && resolvedName ? /* @__PURE__ */ jsx(
+      "input",
       {
-        id,
-        name: resolvedName,
-        "data-field": resolvedField,
-        value: text,
+        type: "hidden",
         disabled,
-        placeholder: resolvedPlaceholder,
-        inputMode: "numeric",
-        autoComplete: "off",
-        role: "combobox",
-        "aria-expanded": open,
-        "aria-haspopup": "dialog",
-        "aria-controls": open ? dialogId : void 0,
-        ...fieldA11y,
-        className: showClear ? "ui-control-inline-affix-pair-affixed" : void 0,
-        trailingIcon: /* @__PURE__ */ jsxs("span", { className: "ui-time-picker-affix", children: [
-          showClear ? /* @__PURE__ */ jsx(
+        name: resolvedName,
+        value: showTime ? (Array.isArray(value) ? value[0] : value)?.toISOString() ?? "" : Array.isArray(value) ? value.map(toIsoDate).join(",") : toIsoDate(value)
+      }
+    ) : null,
+    /* @__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,
+          ref,
+          size,
+          status,
+          variant,
+          readOnly: inputReadOnly || multiple,
+          "data-field": resolvedField,
+          value: text,
+          disabled,
+          placeholder: resolvedPlaceholder,
+          inputMode: "numeric",
+          autoComplete: "off",
+          role: "combobox",
+          "aria-expanded": open,
+          "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": t("common.clear") ?? "Clear",
-              onClick: clear,
+              "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: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+              children: clearControl.clearIcon ?? /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
             }
-          ) : null,
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          ) : /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -106,64 +205,196 @@ function DatePicker({
               className: "ui-control-inline-affix-action",
               children: /* @__PURE__ */ jsx(CalendarIcon, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
             }
-          ) })
-        ] }),
-        onClick: () => {
-          if (!disabled) setOpen(true);
-        },
-        onKeyDown: (event) => {
-          if (event.key === "ArrowDown") {
-            event.preventDefault();
-            setOpen(true);
-          } else if (event.key === "Escape" && open) {
-            setOpen(false);
-          }
-        },
-        onChange: (event) => {
-          setText(event.target.value);
-          commit(event.target.value);
-        },
-        onBlur: (event) => {
-          const parsed = parseDateInput(event.target.value.trim());
-          setText(parsed ? toIsoDate(parsed) : toIsoDate(value));
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        id: dialogId,
-        role: "dialog",
-        "aria-label": t("dataEntry.datePicker.openCalendar") ?? "Calendar",
-        className: "ui-control-panel-flush",
-        align: "start",
-        onOpenAutoFocus: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ jsx(
-          Calendar,
-          {
-            mode: "single",
-            selected: value,
-            defaultMonth: value,
-            onSelect: (date) => {
-              emit(date);
-              setText(toIsoDate(date));
+          ) }) }),
+          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);
-            },
-            locale: dayPickerLocale,
-            disabled: [
-              ...fromDate ? [{ before: fromDate }] : [],
-              ...toDate ? [{ after: toDate }] : []
-            ],
-            startMonth: fromDate,
-            endMonth: toDate,
-            showToday,
-            showClose,
-            onClose: () => setOpen(false)
+            }
+          },
+          onChange: (event) => {
+            setText(event.target.value);
+            commit(event.target.value);
+          },
+          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));
           }
-        )
-      }
-    )
-  ] }) }) });
+        }
+      ),
+      /* @__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?.()
+          ]
+        }
+      )
+    ] }) })
+  ] });
 }
 export {
   DatePicker

package/dist/components/data-entry/date-range-picker.d.ts

@@ -3,9 +3,9 @@ import type { DateRangePickerProp } from "../../props/components/data-entry.prop
 export type { DateRangePickerProp, DateRangePickerProp as DateRangePickerProps, } from "../../props/components/data-entry.prop.js";
 /**
  * DateRangePicker — WAI-ARIA date-range combobox rendered as ONE input-styled control
- * (Ant Design RangePicker convention): `[ from → to  ✕ 📅 ]`. The two inner fields stay
+ * (the established RangePicker convention): `[ from → to  ✕ 📅 ]`. The two inner fields stay
  * real, typeable ISO `yyyy-MM-dd` inputs (form-submittable via `${name}_from` /
  * `${name}_to`, screen-reader friendly, e2e-testable by filling either input); the
  * range calendar is the visual affordance.
  */
-export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, allowClear, ...ariaProps }: DateRangePickerProp): React.JSX.Element;
+export declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, placeholder, disabled, className, id, name, locale: localeProp, showToday, showClose, fromDate, toDate, disabledDate, cellRender, allowClear, format, parseFormat, minDate, maxDate, showWeek, presets, needConfirm, allowEmpty, order, open: openProp, defaultOpen, onOpenChange, inputReadOnly, preserveInvalidOnBlur, placement, renderExtraFooter, size, status, variant, ref, ...ariaProps }: DateRangePickerProp): React.JSX.Element;