@godxjp/ui 20.0.0 → 20.2.0

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

@@ -3,25 +3,56 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Clock, X } from "lucide-react";
 import { usePickerLocales, useTranslation } from "../../i18n/use-translation.js";
-import { isValidHhmm, normalizeHhmm } from "../../lib/datetime/index.js";
+import { normalizeHhmm } from "../../lib/datetime/index.js";
+import { useControlledLatch } from "../../lib/hooks.js";
 import { pickFieldA11y } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
+import { resolveAllowClear } from "./control-surface.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
+import { Button } from "../general/button.js";
 import { Input } from "./input.js";
 function pad2(n) {
   return String(n).padStart(2, "0");
 }
-function buildMinutes(step) {
-  const safe = Math.min(60, Math.max(1, step));
+function buildMinutes(step, limit = 60) {
+  const safe = Number.isFinite(step) ? Math.min(limit, Math.max(1, Math.floor(step))) : 1;
   const items = [];
-  for (let m = 0; m < 60; m += safe) items.push(m);
+  for (let m = 0; m < limit; m += safe) items.push(m);
   return items;
 }
+function normalizeTime(raw, seconds = false) {
+  const match = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(am|pm)?$/i.exec(raw.trim());
+  if (!match) return seconds ? null : normalizeHhmm(raw);
+  let hour = Number(match[1]);
+  const minute = Number(match[2]);
+  const second = Number(match[3] ?? 0);
+  if (match[4]) {
+    if (hour < 1 || hour > 12) return null;
+    hour = hour % 12 + (match[4].toLowerCase() === "pm" ? 12 : 0);
+  }
+  if (hour > 23 || minute > 59 || second > 59) return null;
+  return `${pad2(hour)}:${pad2(minute)}${seconds ? `:${pad2(second)}` : ""}`;
+}
 function parseHhmm(value) {
-  const normalized = value ? normalizeHhmm(value) : null;
-  if (!normalized) return { hour: 9, minute: 0 };
-  const [h, m] = normalized.split(":").map(Number);
-  return { hour: h, minute: m };
+  const [hour, minute, second] = (normalizeTime(value ?? "", true) ?? "09:00:00").split(":").map(Number);
+  return { hour, minute, second };
+}
+function displayTime(value, pattern) {
+  if (!value || !pattern) return value;
+  const { hour, minute, second } = parseHhmm(value);
+  return pattern.replace(
+    /HH|hh|H|h|mm|ss|A|a/g,
+    (token) => ({
+      HH: pad2(hour),
+      H: String(hour),
+      hh: pad2(to12h(hour)),
+      h: String(to12h(hour)),
+      mm: pad2(minute),
+      ss: pad2(second),
+      A: hour >= 12 ? "PM" : "AM",
+      a: hour >= 12 ? "pm" : "am"
+    })[token] ?? token
+  );
 }
 function to12h(hour24) {
   const h = hour24 % 12;
@@ -31,43 +62,85 @@ function from12h(hour12, meridiem) {
   const base = hour12 % 12;
   return meridiem === "pm" ? base + 12 : base;
 }
+function useTimeRefusals(disabledTime) {
+  const rules = disabledTime?.();
+  const hours = rules?.disabledHours?.();
+  return {
+    isHourRefused: (hour) => hours?.includes(hour) ?? false,
+    isMinuteRefused: (hour, minute) => rules?.disabledMinutes?.(hour)?.includes(minute) ?? false
+  };
+}
+function isTimeRefused(value, disabledTime) {
+  if (!disabledTime) return false;
+  const normalized = normalizeTime(value, true);
+  if (!normalized) return false;
+  const [hour, minute, second] = normalized.split(":").map(Number);
+  const rules = disabledTime();
+  return (rules.disabledHours?.().includes(hour) ?? false) || (rules.disabledMinutes?.(hour).includes(minute) ?? false) || (rules.disabledSeconds?.(hour, minute).includes(second) ?? false);
+}
 function TimeColumn({
   label,
   items,
   selected,
   formatItem,
-  onSelect
+  onSelect,
+  isDisabled,
+  hideDisabled = false,
+  onScrollSelect
 }) {
   const listRef = React.useRef(null);
   React.useEffect(() => {
     listRef.current?.querySelector('[data-selected="true"]')?.scrollIntoView({ block: "center" });
   }, [selected]);
-  const moveFocus = (index) => {
+  const visible = hideDisabled && isDisabled ? items.filter((item) => !isDisabled(item)) : items;
+  React.useEffect(() => {
+    const list = listRef.current;
+    if (!list || !onScrollSelect) return;
+    const wheel = (event) => {
+      if (!event.deltaY) return;
+      event.preventDefault();
+      const step = Math.sign(event.deltaY);
+      for (let index = visible.indexOf(selected) + step; index >= 0 && index < visible.length; index += step) {
+        if (!isDisabled?.(visible[index])) {
+          onScrollSelect(visible[index]);
+          break;
+        }
+      }
+    };
+    list.addEventListener("wheel", wheel, { passive: false });
+    return () => list.removeEventListener("wheel", wheel);
+  }, [onScrollSelect, selected, visible, isDisabled]);
+  const moveFocus = (index, step) => {
     const options = listRef.current?.querySelectorAll('[role="option"]');
-    options?.[index]?.focus();
+    if (!options) return;
+    for (let at = index; at >= 0 && at < visible.length; at += step) {
+      if (isDisabled?.(visible[at])) continue;
+      options[at]?.focus();
+      return;
+    }
   };
   const onKeyDown = (e, index) => {
     switch (e.key) {
       case "ArrowDown":
         e.preventDefault();
-        moveFocus(Math.min(items.length - 1, index + 1));
+        moveFocus(Math.min(visible.length - 1, index + 1), 1);
         break;
       case "ArrowUp":
         e.preventDefault();
-        moveFocus(Math.max(0, index - 1));
+        moveFocus(Math.max(0, index - 1), -1);
         break;
       case "Home":
         e.preventDefault();
-        moveFocus(0);
+        moveFocus(0, 1);
         break;
       case "End":
         e.preventDefault();
-        moveFocus(items.length - 1);
+        moveFocus(visible.length - 1, -1);
         break;
       case "Enter":
       case " ":
         e.preventDefault();
-        onSelect(items[index]);
+        if (!isDisabled?.(visible[index])) onSelect(visible[index]);
         break;
       default:
         break;
@@ -75,8 +148,9 @@ function TimeColumn({
   };
   return /* @__PURE__ */ jsxs("div", { className: "ui-time-picker-column", children: [
     /* @__PURE__ */ jsx("div", { className: "ui-time-picker-column-heading", children: label }),
-    /* @__PURE__ */ jsx("div", { ref: listRef, role: "listbox", "aria-label": label, className: "ui-time-picker-column-scroll", children: items.map((item, index) => {
+    /* @__PURE__ */ jsx("div", { ref: listRef, role: "listbox", "aria-label": label, className: "ui-time-picker-column-scroll", children: visible.map((item, index) => {
       const isSelected = item === selected;
+      const refused = isDisabled?.(item) ?? false;
       return /* @__PURE__ */ jsx(
         "button",
         {
@@ -84,10 +158,12 @@ function TimeColumn({
           role: "option",
           "aria-selected": isSelected,
           "data-selected": isSelected,
-          tabIndex: isSelected ? 0 : -1,
+          "aria-disabled": refused || void 0,
+          "data-disabled": refused || void 0,
+          tabIndex: !refused && (isSelected || !visible.some((option) => option === selected && !isDisabled?.(option)) && index === visible.findIndex((option) => !isDisabled?.(option))) ? 0 : -1,
           className: "ui-time-picker-option",
           onClick: () => {
-            onSelect(item);
+            if (!refused) onSelect(item);
           },
           onKeyDown: (e) => onKeyDown(e, index),
           children: formatItem(item)
@@ -97,56 +173,129 @@ function TimeColumn({
     }) })
   ] });
 }
-function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
+function TimePickerPanel({
+  value,
+  minuteStep,
+  hourStep,
+  secondStep,
+  showSeconds,
+  changeOnScroll,
+  use12h,
+  disabledTime,
+  hideDisabledOptions,
+  showNow,
+  needConfirm,
+  onChange,
+  onDone
+}) {
   const { t } = useTranslation();
   const draftId = React.useId();
-  const { hour, minute } = parseHhmm(value);
+  const { isHourRefused, isMinuteRefused } = useTimeRefusals(disabledTime);
   const minutes = buildMinutes(minuteStep);
-  const snappedMinute = minutes.includes(minute) ? minute : minutes[0];
   const [draft, setDraft] = React.useState(value);
+  const [pending, setPending] = React.useState(null);
+  const working = needConfirm ? pending ?? value : value;
+  const { hour, minute, second } = parseHhmm(working);
+  const seconds = buildMinutes(secondStep);
+  const time = (h, m, s = second) => `${pad2(h)}:${pad2(m)}${showSeconds ? `:${pad2(s)}` : ""}`;
+  const snappedMinute = minutes.includes(minute) ? minute : minutes[0];
   const meridiem = hour >= 12 ? "pm" : "am";
   React.useEffect(() => {
     setDraft(value);
   }, [value]);
   const commitDraft = () => {
-    const normalized = normalizeHhmm(draft);
-    if (!normalized) return;
-    onChange(normalized);
-    onDone?.();
+    const normalized = normalizeTime(draft, showSeconds);
+    if (!normalized || isTimeRefused(normalized, disabledTime)) return;
+    choose(normalized, { done: true });
   };
-  const commit = (next) => {
+  const choose = (next, { done }) => {
+    if (isTimeRefused(next, disabledTime)) return;
+    if (needConfirm) {
+      setPending(next);
+      setDraft(next);
+      return;
+    }
+    onChange(next);
+    if (done) onDone?.();
+  };
+  const chooseHour = (nextHour) => {
+    const candidates = [snappedMinute, ...minutes.filter((m) => m !== snappedMinute)];
+    for (const nextMinute of candidates) {
+      const candidateSeconds = showSeconds ? [second, ...seconds.filter((s) => s !== second)] : [0];
+      for (const nextSecond of candidateSeconds) {
+        const next = time(nextHour, nextMinute, nextSecond);
+        if (!isTimeRefused(next, disabledTime)) {
+          choose(next, { done: false });
+          return;
+        }
+      }
+    }
+  };
+  const confirm = () => {
+    const next = normalizeTime(draft, showSeconds);
+    if (!next || isTimeRefused(next, disabledTime)) return;
     onChange(next);
     onDone?.();
   };
-  const hourItems = use12h ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const now = () => {
+    const at = /* @__PURE__ */ new Date();
+    const snapped = minutes.filter((minute2) => minute2 <= at.getMinutes()).at(-1) ?? 0;
+    return time(
+      at.getHours(),
+      snapped,
+      seconds.filter((second2) => second2 <= at.getSeconds()).at(-1) ?? 0
+    );
+  };
+  const nowValue = now();
+  const nowRefused = isTimeRefused(nowValue, disabledTime);
+  const hourItems = use12h ? buildMinutes(hourStep, 12).map((hour2) => hour2 || 12) : buildMinutes(hourStep, 24);
   const selectedHourItem = use12h ? to12h(hour) : hour;
   return /* @__PURE__ */ jsxs("div", { className: "ui-time-picker-panel", "data-hour-cycle": use12h ? "h12" : "h23", children: [
     /* @__PURE__ */ jsxs("div", { className: "divide-border flex divide-x", children: [
       /* @__PURE__ */ jsx(
         TimeColumn,
         {
+          onScrollSelect: changeOnScroll ? (h) => choose(time(use12h ? from12h(h, meridiem) : h, minute), { done: false }) : void 0,
           label: t("dataEntry.timePicker.hour"),
           items: hourItems,
           selected: selectedHourItem,
           formatItem: (h) => use12h ? String(h) : pad2(h),
+          isDisabled: (h) => isHourRefused(use12h ? from12h(h, meridiem) : h),
+          hideDisabled: hideDisabledOptions,
           onSelect: (h) => {
             const hour24 = use12h ? from12h(h, meridiem) : h;
-            onChange(`${pad2(hour24)}:${pad2(snappedMinute)}`);
+            chooseHour(hour24);
           }
         }
       ),
       /* @__PURE__ */ jsx(
         TimeColumn,
         {
+          onScrollSelect: changeOnScroll ? (m) => choose(time(hour, m), { done: false }) : void 0,
           label: t("dataEntry.timePicker.minute"),
           items: minutes,
           selected: snappedMinute,
           formatItem: (m) => pad2(m),
+          isDisabled: (m) => isMinuteRefused(hour, m),
+          hideDisabled: hideDisabledOptions,
           onSelect: (m) => {
-            commit(`${pad2(hour)}:${pad2(m)}`);
+            choose(time(hour, m), { done: !showSeconds });
           }
         }
       ),
+      showSeconds && /* @__PURE__ */ jsx(
+        TimeColumn,
+        {
+          onScrollSelect: changeOnScroll ? (s) => choose(time(hour, minute, s), { done: false }) : void 0,
+          label: t("dataEntry.timePicker.second"),
+          items: seconds,
+          selected: second,
+          formatItem: pad2,
+          hideDisabled: hideDisabledOptions,
+          isDisabled: (s) => isTimeRefused(time(hour, minute, s), disabledTime),
+          onSelect: (s) => choose(time(hour, minute, s), { done: true })
+        }
+      ),
       use12h && /* @__PURE__ */ jsx(
         TimeColumn,
         {
@@ -157,36 +306,55 @@ function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
           onSelect: (m) => {
             const nextMeridiem = m === 1 ? "pm" : "am";
             const hour24 = from12h(to12h(hour), nextMeridiem);
-            onChange(`${pad2(hour24)}:${pad2(snappedMinute)}`);
+            chooseHour(hour24);
           }
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "ui-time-picker-footer", children: /* @__PURE__ */ jsx(
-      Input,
-      {
-        id: draftId,
-        value: draft,
-        onChange: (e) => {
-          setDraft(e.target.value);
-        },
-        inputMode: "numeric",
-        autoComplete: "off",
-        placeholder: t("dataEntry.timePicker.typeLabel"),
-        "aria-label": t("dataEntry.timePicker.typeLabel"),
-        className: "text-center tabular-nums",
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            commitDraft();
+    /* @__PURE__ */ jsxs("div", { className: "ui-time-picker-footer", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: draftId,
+          value: draft,
+          onChange: (e) => {
+            setDraft(e.target.value);
+          },
+          inputMode: "numeric",
+          autoComplete: "off",
+          placeholder: t("dataEntry.timePicker.typeLabel"),
+          "aria-label": t("dataEntry.timePicker.typeLabel"),
+          className: "text-center tabular-nums",
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commitDraft();
+            }
+          },
+          onBlur: () => {
+            const normalized = normalizeTime(draft, showSeconds);
+            if (normalized) setDraft(normalized);
           }
-        },
-        onBlur: () => {
-          const normalized = normalizeHhmm(draft);
-          if (normalized) setDraft(normalized);
         }
-      }
-    ) })
+      ),
+      showNow || needConfirm ? /* @__PURE__ */ jsxs("div", { className: "ui-time-picker-footer-actions", children: [
+        showNow ? /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "link",
+            size: "sm",
+            disabled: nowRefused,
+            onClick: () => {
+              setDraft(nowValue);
+              choose(nowValue, { done: true });
+            },
+            children: t("dataEntry.timePicker.now")
+          }
+        ) : null,
+        needConfirm ? /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: confirm, children: t("dataEntry.timePicker.confirm") }) : null
+      ] }) : null
+    ] })
   ] });
 }
 function TimePicker({
@@ -199,24 +367,52 @@ function TimePicker({
   id,
   name,
   minuteStep = 5,
-  allowClear = true,
+  hourStep = 1,
+  changeOnScroll,
+  secondStep = 1,
+  showSeconds: showSecondsProp = false,
+  use12Hours,
+  format,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  inputReadOnly,
+  preserveInvalidOnBlur,
+  placement = "bottom-end",
+  renderExtraFooter,
+  size,
+  status,
+  variant,
+  ref,
+  disabledTime,
+  hideDisabledOptions,
+  showNow = true,
+  needConfirm = false,
+  allowClear,
   ...ariaProps
 }) {
   const { t } = useTranslation();
   const { timeFormat } = usePickerLocales();
-  const use12h = timeFormat === "12h";
-  const [open, setOpen] = React.useState(false);
+  const use12h = use12Hours ?? (format ? /h|a|A/.test(format) : timeFormat === "12h");
+  const showSeconds = showSecondsProp || Boolean(format?.includes("ss"));
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = !disabled && (openProp ?? internalOpen);
+  const setOpen = (next) => {
+    if (disabled && next) return;
+    if (openProp === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
   const fieldA11y = pickFieldA11y(ariaProps);
   const reactId = React.useId();
   const dialogId = `${id ?? reactId}-dialog`;
   const [internal, setInternal] = React.useState(defaultValue ?? "");
-  const isControlled = controlledValue !== void 0;
-  const value = isControlled ? controlledValue : internal;
+  const isControlled = useControlledLatch(controlledValue !== void 0);
+  const value = (isControlled ? controlledValue : internal) ?? "";
   const resolvedPlaceholder = placeholder ?? t("dataEntry.timePicker.placeholder") ?? "hh:mm";
-  const [text, setText] = React.useState(value);
+  const [text, setText] = React.useState(displayTime(value, format));
   React.useEffect(() => {
-    setText(value);
-  }, [value]);
+    setText(displayTime(value, format));
+  }, [value, format]);
   const setValue = (next) => {
     if (!isControlled) setInternal(next);
     onValueChange?.(next);
@@ -225,13 +421,20 @@ function TimePicker({
     setValue("");
     setText("");
   };
-  const showClear = allowClear && text !== "" && !disabled;
+  const clearControl = resolveAllowClear(allowClear, true, t("common.clear") ?? "Clear");
+  const showClear = clearControl.enabled && text !== "" && !disabled;
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    (format || needConfirm || preserveInvalidOnBlur) && name ? /* @__PURE__ */ jsx("input", { type: "hidden", disabled, name, value }) : null,
     /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsx(
       Input,
       {
         id,
-        name,
+        ref,
+        size,
+        status,
+        variant,
+        readOnly: inputReadOnly,
+        name: format || needConfirm || preserveInvalidOnBlur ? "" : name,
         value: text,
         disabled,
         placeholder: resolvedPlaceholder,
@@ -242,31 +445,32 @@ function TimePicker({
         "aria-haspopup": "dialog",
         "aria-controls": open ? dialogId : void 0,
         ...fieldA11y,
-        className: cn("tabular-nums", showClear && "ui-control-inline-affix-pair-affixed"),
-        trailingIcon: /* @__PURE__ */ jsxs("span", { className: "ui-time-picker-affix", children: [
-          showClear ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              tabIndex: -1,
-              "aria-label": t("common.clear") ?? "Clear",
-              onClick: clear,
-              className: "ui-control-inline-affix-action",
-              children: /* @__PURE__ */ jsx(X, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
-            }
-          ) : null,
-          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled,
-              tabIndex: -1,
-              "aria-label": t("dataEntry.timePicker.openPicker") ?? "Open time picker",
-              className: "ui-control-inline-affix-action",
-              children: /* @__PURE__ */ jsx(Clock, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
-            }
-          ) })
-        ] }),
+        className: "tabular-nums",
+        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.timePicker.openPicker") ?? "Open time picker",
+            className: "ui-control-inline-affix-action",
+            children: /* @__PURE__ */ jsx(Clock, { className: "ui-control-inline-affix-icon", "aria-hidden": "true" })
+          }
+        ) }) }),
         onClick: () => {
           if (!disabled) setOpen(true);
         },
@@ -274,45 +478,65 @@ function TimePicker({
           if (event.key === "ArrowDown") {
             event.preventDefault();
             setOpen(true);
+          } else if (event.key === "Enter") {
+            const next = normalizeTime(text, showSeconds);
+            if (next && !isTimeRefused(next, disabledTime)) {
+              setValue(next);
+              setOpen(false);
+            }
           } else if (event.key === "Escape" && open) {
             setOpen(false);
           }
         },
         onChange: (event) => {
           setText(event.target.value);
-          const normalized = normalizeHhmm(event.target.value);
-          if (normalized) setValue(normalized);
+          const normalized = normalizeTime(event.target.value, showSeconds);
+          if (normalized && (!showSeconds || /^\d{1,2}:\d{2}:\d{2}/.test(event.target.value)) && (!format || !/[aA]/.test(format) || /[ap]m$/i.test(event.target.value.trim())) && !isTimeRefused(normalized, disabledTime) && !needConfirm)
+            setValue(normalized);
         },
         onBlur: (event) => {
-          const normalized = normalizeHhmm(event.target.value);
-          setText(normalized ?? (isValidHhmm(value) ? value : ""));
+          const normalized = normalizeTime(event.target.value, showSeconds);
+          const accepted = normalized && !isTimeRefused(normalized, disabledTime) ? normalized : void 0;
+          if (!preserveInvalidOnBlur) setText(displayTime(accepted ?? value, format));
         }
       }
     ) }) }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       PopoverContent,
       {
         id: dialogId,
         role: "dialog",
         "aria-label": t("dataEntry.timePicker.openPicker") ?? "Time picker",
         className: "ui-time-picker-popover",
-        align: "end",
+        side: placement.startsWith("top") ? "top" : "bottom",
+        align: placement.endsWith("start") ? "start" : "end",
         onOpenAutoFocus: (event) => event.preventDefault(),
-        children: /* @__PURE__ */ jsx(
-          TimePickerPanel,
-          {
-            value: value || "09:00",
-            minuteStep,
-            use12h,
-            onChange: (next) => {
-              setValue(next);
-              setText(next);
-            },
-            onDone: () => {
-              setOpen(false);
+        children: [
+          /* @__PURE__ */ jsx(
+            TimePickerPanel,
+            {
+              value: (needConfirm ? normalizeTime(text, showSeconds) : void 0) || value || "09:00",
+              minuteStep,
+              hourStep,
+              changeOnScroll,
+              secondStep,
+              showSeconds,
+              use12h,
+              disabledTime,
+              hideDisabledOptions,
+              showNow,
+              needConfirm,
+              onChange: (next) => {
+                setValue(next);
+                setText(displayTime(next, format));
+              },
+              onDone: () => {
+                setOpen(false);
+              }
             }
-          }
-        )
+          ),
+          renderExtraFooter?.()
+        ]
       }
     )
   ] });

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

@@ -0,0 +1,5 @@
+import * as React from "react";
+import type { TimeRangePickerProp } from "../../props/components/data-entry.prop.js";
+export type { TimeRangePickerProp, TimeRangePickerProp as TimeRangePickerProps, } from "../../props/components/data-entry.prop.js";
+/** A range owns ordering and partial endpoints; the time controls own editing and constraints. */
+export declare function TimeRangePicker({ value: controlledValue, defaultValue, onValueChange, order, open: openProp, defaultOpen, onOpenChange, allowEmpty, name, id, placeholder, className, ref, ...props }: TimeRangePickerProp): React.JSX.Element;