@comitor/ui 2.0.0 → 3.0.0

package/dist/components/ui/time-picker.js

@@ -0,0 +1,1618 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { Clock } from "lucide-react";
+import * as React from "react";
+import { useComitorLabels, useComitorLocale } from "../../i18n/locale-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useAsRef } from "../../lib/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { useLazyRef } from "../../lib/use-lazy-ref.js";
+import { VisuallyHiddenInput } from "../../lib/visually-hidden-input.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
+const ROOT_NAME = "TimePicker";
+const LABEL_NAME = "TimePickerLabel";
+const INPUT_GROUP_NAME = "TimePickerInputGroup";
+const INPUT_NAME = "TimePickerInput";
+const TRIGGER_NAME = "TimePickerTrigger";
+const CONTENT_NAME = "TimePickerContent";
+const COLUMN_NAME = "TimePickerColumn";
+const COLUMN_ITEM_NAME = "TimePickerColumnItem";
+const HOUR_NAME = "TimePickerHour";
+const MINUTE_NAME = "TimePickerMinute";
+const SECOND_NAME = "TimePickerSecond";
+const PERIOD_NAME = "TimePickerPeriod";
+const CLEAR_NAME = "TimePickerClear";
+const DEFAULT_STEP = 1;
+const DEFAULT_SEGMENT_PLACEHOLDER = "--";
+const SEGMENTS = ["hour", "minute", "second", "period"];
+const PERIODS = ["AM", "PM"];
+function focusFirst(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidateRef of candidates) {
+    const candidate = candidateRef.current;
+    if (!candidate) continue;
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function sortNodes(items) {
+  return items.sort((a, b) => {
+    const elementA = a.ref.current;
+    const elementB = b.ref.current;
+    if (!elementA || !elementB) return 0;
+    const position = elementA.compareDocumentPosition(elementB);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  });
+}
+function getIs12Hour(locale) {
+  const testDate = new Date(2e3, 0, 1, 13, 0, 0);
+  const formatted = new Intl.DateTimeFormat(locale, {
+    hour: "numeric"
+  }).format(testDate);
+  return /am|pm/i.test(formatted) || !formatted.includes("13");
+}
+function parseTimeString(timeString) {
+  if (!timeString) return null;
+  const parts = timeString.split(":");
+  if (parts.length < 2) return null;
+  const result = {};
+  if (parts[0] && parts[0] !== DEFAULT_SEGMENT_PLACEHOLDER) {
+    const hour = Number.parseInt(parts[0], 10);
+    if (!Number.isNaN(hour) && hour >= 0 && hour <= 23) {
+      result.hour = hour;
+    }
+  }
+  if (parts[1] && parts[1] !== DEFAULT_SEGMENT_PLACEHOLDER) {
+    const minute = Number.parseInt(parts[1], 10);
+    if (!Number.isNaN(minute) && minute >= 0 && minute <= 59) {
+      result.minute = minute;
+    }
+  }
+  if (parts[2] && parts[2] !== DEFAULT_SEGMENT_PLACEHOLDER) {
+    const second = Number.parseInt(parts[2], 10);
+    if (!Number.isNaN(second) && second >= 0 && second <= 59) {
+      result.second = second;
+    }
+  }
+  if (result.hour === void 0 && result.minute === void 0 && result.second === void 0) {
+    return null;
+  }
+  return result;
+}
+function formatTimeValue(value, showSeconds) {
+  const hourStr = value.hour !== void 0 ? value.hour.toString().padStart(2, "0") : DEFAULT_SEGMENT_PLACEHOLDER;
+  const minuteStr = value.minute !== void 0 ? value.minute.toString().padStart(2, "0") : DEFAULT_SEGMENT_PLACEHOLDER;
+  const secondStr = value.second !== void 0 ? value.second.toString().padStart(2, "0") : DEFAULT_SEGMENT_PLACEHOLDER;
+  if (showSeconds) {
+    return `${hourStr}:${minuteStr}:${secondStr}`;
+  }
+  return `${hourStr}:${minuteStr}`;
+}
+function to12Hour(hour24) {
+  const period = hour24 >= 12 ? "PM" : "AM";
+  const hour = hour24 % 12 || 12;
+  return { hour, period };
+}
+function to24Hour(hour12, period) {
+  if (hour12 === 12) {
+    return period === "PM" ? 12 : 0;
+  }
+  return period === "PM" ? hour12 + 12 : hour12;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function getPeriodLabel(value, labels) {
+  if (value === "AM") return labels.am;
+  if (value === "PM") return labels.pm;
+  return value;
+}
+function getPeriodFromKey(key, labels) {
+  const lowerKey = key.toLowerCase();
+  if (lowerKey === "a" || lowerKey === "1") return "AM";
+  if (lowerKey === "p" || lowerKey === "2") return "PM";
+  if (lowerKey.length !== 1) return null;
+  if (lowerKey === labels.am.charAt(0).toLowerCase()) return "AM";
+  if (lowerKey === labels.pm.charAt(0).toLowerCase()) return "PM";
+  return null;
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React.useContext(StoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useStore(selector, ogStore) {
+  const contextStore = React.useContext(StoreContext);
+  const store = ogStore ?? contextStore;
+  if (!store) {
+    throw new Error(`\`useTimePicker\` ph\u1EA3i \u0111\u01B0\u1EE3c g\u1ECDi b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  const getSnapshot = React.useCallback(() => selector(store.getState()), [store, selector]);
+  return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const TimePickerContext = React.createContext(null);
+function useTimePickerContext(consumerName) {
+  const context = React.useContext(TimePickerContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function TimePicker(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    open,
+    defaultOpen,
+    onOpenChange,
+    openOnFocus = false,
+    inputGroupClickAction = "focus",
+    min,
+    max,
+    hourStep = DEFAULT_STEP,
+    minuteStep = DEFAULT_STEP,
+    secondStep = DEFAULT_STEP,
+    segmentPlaceholder = DEFAULT_SEGMENT_PLACEHOLDER,
+    locale: localeProp,
+    labels: labelsProp,
+    name,
+    asChild,
+    disabled = false,
+    invalid = false,
+    readOnly = false,
+    required = false,
+    showSeconds = false,
+    className,
+    children,
+    id,
+    ...rootProps
+  } = props;
+  const { locale: providerLocale } = useComitorLocale();
+  const locale = localeProp ?? providerLocale;
+  const instanceId = React.useId();
+  const rootId = id ?? instanceId;
+  const inputGroupId = React.useId();
+  const labelId = React.useId();
+  const triggerId = React.useId();
+  const inputGroupRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const [inputGroup, setInputGroup] = React.useState(null);
+  const isFormControl = inputGroup ? !!inputGroup.closest("form") : true;
+  const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+  const stateRef = useLazyRef(() => ({
+    value: valueProp ?? defaultValue ?? "",
+    open: open ?? defaultOpen ?? false,
+    openedViaFocus: false
+  }));
+  const propsRef = useAsRef({ onValueChange, onOpenChange });
+  const store = React.useMemo(() => {
+    return {
+      subscribe: (cb) => {
+        listenersRef.current.add(cb);
+        return () => listenersRef.current.delete(cb);
+      },
+      getState: () => stateRef.current,
+      setState: (key, value2) => {
+        if (Object.is(stateRef.current[key], value2)) return;
+        if (key === "value" && typeof value2 === "string") {
+          stateRef.current.value = value2;
+          propsRef.current.onValueChange?.(value2);
+        } else if (key === "open" && typeof value2 === "boolean") {
+          stateRef.current.open = value2;
+          propsRef.current.onOpenChange?.(value2);
+          if (!value2) {
+            stateRef.current.openedViaFocus = false;
+          }
+        } else {
+          stateRef.current[key] = value2;
+        }
+        store.notify();
+      },
+      notify: () => {
+        for (const cb of listenersRef.current) {
+          cb();
+        }
+      }
+    };
+  }, [listenersRef, stateRef, propsRef]);
+  const value = useStore((state) => state.value, store);
+  useIsomorphicLayoutEffect(() => {
+    if (valueProp !== void 0) {
+      store.setState("value", valueProp);
+    }
+  }, [valueProp]);
+  useIsomorphicLayoutEffect(() => {
+    if (open !== void 0) {
+      store.setState("open", open);
+    }
+  }, [open]);
+  const storeOpen = useStore((state) => state.open, store);
+  const onPopoverOpenChange = React.useCallback((newOpen) => store.setState("open", newOpen), [store]);
+  const is12Hour = React.useMemo(() => getIs12Hour(locale), [locale]);
+  const normalizedPlaceholder = React.useMemo(() => {
+    if (typeof segmentPlaceholder === "string") {
+      return {
+        hour: segmentPlaceholder,
+        minute: segmentPlaceholder,
+        second: segmentPlaceholder,
+        period: segmentPlaceholder
+      };
+    }
+    return {
+      hour: segmentPlaceholder.hour ?? DEFAULT_SEGMENT_PLACEHOLDER,
+      minute: segmentPlaceholder.minute ?? DEFAULT_SEGMENT_PLACEHOLDER,
+      second: segmentPlaceholder.second ?? DEFAULT_SEGMENT_PLACEHOLDER,
+      period: segmentPlaceholder.period ?? DEFAULT_SEGMENT_PLACEHOLDER
+    };
+  }, [segmentPlaceholder]);
+  const labels = useComitorLabels("timePicker", labelsProp);
+  const rootContext = React.useMemo(
+    () => ({
+      id: rootId,
+      inputGroupId,
+      labelId,
+      triggerId,
+      inputGroupRef,
+      triggerRef,
+      openOnFocus,
+      inputGroupClickAction,
+      onInputGroupChange: setInputGroup,
+      disabled,
+      readOnly,
+      required,
+      invalid,
+      showSeconds,
+      is12Hour,
+      minuteStep,
+      secondStep,
+      hourStep,
+      segmentPlaceholder: normalizedPlaceholder,
+      labels,
+      min,
+      max
+    }),
+    [
+      rootId,
+      inputGroupId,
+      labelId,
+      triggerId,
+      openOnFocus,
+      inputGroupClickAction,
+      disabled,
+      readOnly,
+      required,
+      invalid,
+      showSeconds,
+      is12Hour,
+      minuteStep,
+      secondStep,
+      hourStep,
+      normalizedPlaceholder,
+      labels,
+      min,
+      max
+    ]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(TimePickerContext.Provider, { value: rootContext, children: /* @__PURE__ */ jsx(Popover, { open: storeOpen, onOpenChange: onPopoverOpenChange, children: /* @__PURE__ */ jsx(
+      RootPrimitive,
+      {
+        "data-slot": "time-picker",
+        "data-disabled": disabled ? "" : void 0,
+        "data-invalid": invalid ? "" : void 0,
+        ...rootProps,
+        className: cn("relative", className),
+        children
+      }
+    ) }) }) }),
+    isFormControl && /* @__PURE__ */ jsx(
+      VisuallyHiddenInput,
+      {
+        type: "hidden",
+        control: inputGroup,
+        name,
+        value,
+        disabled,
+        readOnly,
+        required
+      }
+    )
+  ] });
+}
+function TimePickerLabel(props) {
+  const { asChild, className, ...labelProps } = props;
+  const { labelId } = useTimePickerContext(LABEL_NAME);
+  const LabelPrimitive = asChild ? Slot : "label";
+  return /* @__PURE__ */ jsx(
+    LabelPrimitive,
+    {
+      "data-slot": "time-picker-label",
+      ...labelProps,
+      id: labelId,
+      className: cn(
+        "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )
+    }
+  );
+}
+const TimePickerInputGroupContext = React.createContext(null);
+function useTimePickerInputGroupContext(consumerName) {
+  const context = React.useContext(TimePickerInputGroupContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${INPUT_GROUP_NAME}\``);
+  }
+  return context;
+}
+function TimePickerInputGroup(props) {
+  const {
+    onPointerDown: onPointerDownProp,
+    onClick: onClickProp,
+    asChild,
+    className,
+    style,
+    ref,
+    ...inputGroupProps
+  } = props;
+  const {
+    inputGroupId,
+    labelId,
+    onInputGroupChange,
+    disabled,
+    readOnly,
+    invalid,
+    segmentPlaceholder,
+    labels,
+    inputGroupRef,
+    triggerRef,
+    inputGroupClickAction
+  } = useTimePickerContext(INPUT_GROUP_NAME);
+  const store = useStoreContext(INPUT_GROUP_NAME);
+  const composedRef = useComposedRefs(ref, inputGroupRef, onInputGroupChange);
+  const inputRefsMap = React.useRef(/* @__PURE__ */ new Map());
+  const onInputRegister = React.useCallback((segment, ref2) => {
+    inputRefsMap.current.set(segment, ref2);
+  }, []);
+  const onInputUnregister = React.useCallback((segment) => {
+    inputRefsMap.current.delete(segment);
+  }, []);
+  const getNextInput = React.useCallback((currentSegment) => {
+    const segmentOrder = ["hour", "minute", "second", "period"];
+    const currentIndex = segmentOrder.indexOf(currentSegment);
+    if (currentIndex === -1 || currentIndex === segmentOrder.length - 1) {
+      return null;
+    }
+    for (let i = currentIndex + 1; i < segmentOrder.length; i++) {
+      const nextSegment = segmentOrder[i];
+      if (nextSegment) {
+        const nextRef = inputRefsMap.current.get(nextSegment);
+        if (nextRef?.current) {
+          return nextRef;
+        }
+      }
+    }
+    return null;
+  }, []);
+  const onPointerDown = React.useCallback(
+    (event) => {
+      onPointerDownProp?.(event);
+      if (disabled || readOnly || event.defaultPrevented) return;
+      const target = event.target;
+      if (target.tagName === "INPUT" || target.closest("input")) {
+        return;
+      }
+      if (triggerRef.current?.contains(target)) {
+        return;
+      }
+      event.preventDefault();
+    },
+    [onPointerDownProp, disabled, readOnly, triggerRef]
+  );
+  const onClick = React.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (disabled || readOnly || event.defaultPrevented) return;
+      const target = event.target;
+      if (target.tagName === "INPUT" || target.closest("input")) {
+        return;
+      }
+      if (triggerRef.current?.contains(target)) {
+        return;
+      }
+      if (inputGroupClickAction === "open") {
+        store.setState("open", true);
+      } else {
+        const activeElement = document.activeElement;
+        const isInputAlreadyFocused = activeElement && activeElement.tagName === "INPUT" && inputGroupRef.current?.contains(activeElement);
+        if (!isInputAlreadyFocused) {
+          for (const segment of SEGMENTS) {
+            const inputRef = inputRefsMap.current.get(segment);
+            if (inputRef?.current) {
+              inputRef.current.focus();
+              inputRef.current.select();
+              break;
+            }
+          }
+        }
+      }
+    },
+    [onClickProp, disabled, readOnly, inputGroupClickAction, store, triggerRef, inputGroupRef]
+  );
+  const inputGroupContextValue = React.useMemo(
+    () => ({
+      onInputRegister,
+      onInputUnregister,
+      getNextInput
+    }),
+    [onInputRegister, onInputUnregister, getNextInput]
+  );
+  const InputGroupPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(TimePickerInputGroupContext.Provider, { value: inputGroupContextValue, children: /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
+    InputGroupPrimitive,
+    {
+      role: "group",
+      id: inputGroupId,
+      "aria-labelledby": labelId,
+      "data-slot": "time-picker-input-group",
+      "data-disabled": disabled ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
+      ...inputGroupProps,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: khung ô đi theo `Input` của gói (ô ngày của `DatePicker` là
+         * một `Input`, và hai thứ này hay đứng chung một hàng biểu mẫu): `h-9` thay `h-10`,
+         * bỏ `shadow-xs`, hover đậm viền `--control-edge-strong`, focus viền
+         * `--primary-ink` + quầng `ring-2 ring-ring/50` KHÔNG offset (quy ước họ ô nhập —
+         * xem `InputGroup`), lỗi viền `--destructive-ink`. Số đo ở chú thích đầu `input.tsx`.
+         */
+        "flex h-9 w-full cursor-text items-center gap-0.5 rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground transition-colors duration-150 ease-out outline-none hover:border-control-edge-strong",
+        "has-[input:focus]:border-primary-ink has-[input:focus]:ring-2 has-[input:focus]:ring-ring/50",
+        invalid && "border-destructive-ink hover:border-destructive-ink has-[input:focus]:border-destructive-ink has-[input:focus]:ring-destructive/30",
+        /*
+         * ⚠ Khác thượng nguồn: bản gốc ghép `disabled && "cursor-not-allowed opacity-50"` —
+         * lớp gắn VÔ ĐIỀU KIỆN vào chuỗi, nên `pnpm lint:a11y` đo viền/chữ lúc NGHỈ đã nhân
+         * 50% (viền 1,75:1, chữ 3,49:1 ✗). Neo vào `:disabled` gốc của các ô con (cổng miễn
+         * trừ đúng nhánh này — WCAG 1.4.3/1.4.11 không đòi tương phản cho control vô hiệu);
+         * `disabled` ở gốc khoá MỌI ô nên hai cách cho cùng kết quả. Thêm `bg-muted` theo `Input`.
+         */
+        "has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-muted has-[input:disabled]:opacity-50",
+        className
+      ),
+      style: {
+        "--time-picker-hour-input-width": `${segmentPlaceholder.hour.length}ch`,
+        "--time-picker-minute-input-width": `${segmentPlaceholder.minute.length}ch`,
+        "--time-picker-second-input-width": `${segmentPlaceholder.second.length}ch`,
+        // ⚠ Khác thượng nguồn: tính cả độ dài nhãn buổi (`labels.am`/`labels.pm`) — bản gốc
+        // chỉ có "AM"/"PM" 2 ký tự nên ghim sàn 2; nhãn do app đặt có thể dài hơn.
+        "--time-picker-period-input-width": `${Math.max(segmentPlaceholder.period.length, labels.am.length, labels.pm.length, 2) + 0.5}ch`,
+        ...style
+      },
+      ref: composedRef,
+      onPointerDown,
+      onClick
+    }
+  ) }) });
+}
+function TimePickerInput(props) {
+  const {
+    segment,
+    onBlur: onBlurProp,
+    onChange: onChangeProp,
+    onClick: onClickProp,
+    onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp,
+    disabled: disabledProp,
+    readOnly: readOnlyProp,
+    className,
+    style,
+    ref,
+    ...inputProps
+  } = props;
+  const { is12Hour, showSeconds, disabled, readOnly, invalid, segmentPlaceholder, labels, openOnFocus } = useTimePickerContext(INPUT_NAME);
+  const store = useStoreContext(INPUT_NAME);
+  const inputGroupContext = useTimePickerInputGroupContext(INPUT_NAME);
+  const isDisabled = disabledProp || disabled;
+  const isReadOnly = readOnlyProp || readOnly;
+  const value = useStore((state) => state.value);
+  const timeValue = parseTimeString(value);
+  const inputRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, inputRef);
+  useIsomorphicLayoutEffect(() => {
+    if (segment) {
+      inputGroupContext.onInputRegister(segment, inputRef);
+      return () => inputGroupContext.onInputUnregister(segment);
+    }
+  }, [inputGroupContext, segment]);
+  const getSegmentValue = React.useCallback(() => {
+    if (!timeValue) {
+      if (!segment) return "";
+      return segmentPlaceholder[segment];
+    }
+    switch (segment) {
+      case "hour": {
+        if (timeValue.hour === void 0) return segmentPlaceholder.hour;
+        if (is12Hour) {
+          return to12Hour(timeValue.hour).hour.toString().padStart(2, "0");
+        }
+        return timeValue.hour.toString().padStart(2, "0");
+      }
+      case "minute":
+        if (timeValue.minute === void 0) return segmentPlaceholder.minute;
+        return timeValue.minute.toString().padStart(2, "0");
+      case "second":
+        if (timeValue.second === void 0) return segmentPlaceholder.second;
+        return timeValue.second.toString().padStart(2, "0");
+      case "period": {
+        if (!timeValue || timeValue.hour === void 0) return segmentPlaceholder.period;
+        return to12Hour(timeValue.hour).period;
+      }
+      default:
+        return "";
+    }
+  }, [timeValue, segment, is12Hour, segmentPlaceholder]);
+  const [editValue, setEditValue] = React.useState(getSegmentValue());
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [pendingDigit, setPendingDigit] = React.useState(null);
+  React.useEffect(() => {
+    if (!isEditing) {
+      setEditValue(getSegmentValue());
+      setPendingDigit(null);
+    }
+  }, [getSegmentValue, isEditing]);
+  const updateTimeValue = React.useCallback(
+    (newSegmentValue, shouldCreateIfEmpty = false) => {
+      const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER;
+      if (!newSegmentValue || newSegmentValue === placeholder) return;
+      if (!timeValue && !shouldCreateIfEmpty) return;
+      const currentTime = timeValue ?? {};
+      const newTime = { ...currentTime };
+      switch (segment) {
+        case "hour": {
+          const displayHour = Number.parseInt(newSegmentValue, 10);
+          if (!Number.isNaN(displayHour)) {
+            if (is12Hour) {
+              const clampedHour = clamp(displayHour, 1, 12);
+              let currentPeriod;
+              if (timeValue?.period !== void 0) {
+                currentPeriod = timeValue.period;
+              } else if (timeValue?.hour !== void 0) {
+                currentPeriod = to12Hour(timeValue.hour).period;
+              } else {
+                const now = /* @__PURE__ */ new Date();
+                currentPeriod = to12Hour(now.getHours()).period;
+              }
+              const hour24 = to24Hour(clampedHour, currentPeriod);
+              newTime.hour = hour24;
+              if (timeValue?.period !== void 0) {
+                newTime.period = timeValue.period;
+              }
+            } else {
+              newTime.hour = clamp(displayHour, 0, 23);
+            }
+          }
+          break;
+        }
+        case "minute": {
+          const minute = Number.parseInt(newSegmentValue, 10);
+          if (!Number.isNaN(minute)) {
+            newTime.minute = clamp(minute, 0, 59);
+          }
+          break;
+        }
+        case "second": {
+          const second = Number.parseInt(newSegmentValue, 10);
+          if (!Number.isNaN(second)) {
+            newTime.second = clamp(second, 0, 59);
+          }
+          break;
+        }
+        case "period": {
+          if (newSegmentValue === "AM" || newSegmentValue === "PM") {
+            newTime.period = newSegmentValue;
+            if (timeValue && timeValue.hour !== void 0) {
+              const currentDisplay = to12Hour(timeValue.hour);
+              newTime.hour = to24Hour(currentDisplay.hour, newSegmentValue);
+            }
+          }
+          break;
+        }
+      }
+      const newValue = formatTimeValue(newTime, showSeconds);
+      store.setState("value", newValue);
+    },
+    [timeValue, segment, is12Hour, showSeconds, store, segmentPlaceholder]
+  );
+  const onBlur = React.useCallback(
+    (event) => {
+      onBlurProp?.(event);
+      if (event.defaultPrevented) return;
+      setIsEditing(false);
+      const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER;
+      if (editValue && editValue !== placeholder && editValue.length > 0) {
+        let valueToUpdate = editValue;
+        if (segment !== "period") {
+          if (editValue.length === 2) {
+            valueToUpdate = editValue;
+          } else if (editValue.length === 1) {
+            const numValue = Number.parseInt(editValue, 10);
+            if (!Number.isNaN(numValue)) {
+              valueToUpdate = numValue.toString().padStart(2, "0");
+            }
+          }
+        }
+        updateTimeValue(valueToUpdate, true);
+        queueMicrotask(() => {
+          const currentTimeValue = parseTimeString(store.getState().value);
+          if (currentTimeValue) {
+            const now = /* @__PURE__ */ new Date();
+            const newTime = { ...currentTimeValue };
+            let needsUpdate = false;
+            if (newTime.hour === void 0) {
+              newTime.hour = now.getHours();
+              needsUpdate = true;
+            }
+            if (newTime.minute === void 0) {
+              newTime.minute = now.getMinutes();
+              needsUpdate = true;
+            }
+            if (showSeconds && newTime.second === void 0) {
+              newTime.second = now.getSeconds();
+              needsUpdate = true;
+            }
+            if (needsUpdate) {
+              const newValue = formatTimeValue(newTime, showSeconds);
+              store.setState("value", newValue);
+            }
+          }
+        });
+      }
+      setEditValue(getSegmentValue());
+      setPendingDigit(null);
+    },
+    [onBlurProp, editValue, updateTimeValue, getSegmentValue, segment, segmentPlaceholder, showSeconds, store]
+  );
+  const onChange = React.useCallback(
+    (event) => {
+      onChangeProp?.(event);
+      if (event.defaultPrevented) return;
+      let newValue = event.target.value;
+      const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER;
+      if (editValue === placeholder && newValue.length > 0 && newValue !== placeholder) {
+        newValue = newValue.replace(new RegExp(`^${placeholder}`), "");
+      }
+      if (segment === "period") {
+        const newPeriod = getPeriodFromKey(newValue.charAt(0), labels);
+        if (newPeriod) {
+          setEditValue(newPeriod);
+          updateTimeValue(newPeriod, true);
+          queueMicrotask(() => {
+            inputRef.current?.select();
+          });
+        }
+        return;
+      }
+      if (segment === "hour" || segment === "minute" || segment === "second") {
+        newValue = newValue.replace(/\D/g, "");
+      }
+      if (newValue.length > 2) {
+        newValue = newValue.slice(0, 2);
+      }
+      if (segment === "hour" || segment === "minute" || segment === "second") {
+        const numValue = Number.parseInt(newValue, 10);
+        if (!Number.isNaN(numValue) && newValue.length > 0) {
+          if (pendingDigit !== null && newValue.length === 1) {
+            const twoDigitValue = pendingDigit + newValue;
+            const combinedNum = Number.parseInt(twoDigitValue, 10);
+            if (!Number.isNaN(combinedNum)) {
+              const paddedValue = combinedNum.toString().padStart(2, "0");
+              setEditValue(paddedValue);
+              updateTimeValue(paddedValue, true);
+              setPendingDigit(null);
+              queueMicrotask(() => {
+                if (segment) {
+                  const nextInputRef = inputGroupContext.getNextInput(segment);
+                  if (nextInputRef?.current) {
+                    nextInputRef.current.focus();
+                    nextInputRef.current.select();
+                  }
+                }
+              });
+              return;
+            }
+          }
+          const maxFirstDigit = segment === "hour" ? is12Hour ? 1 : 2 : 5;
+          const firstDigit = Number.parseInt(newValue[0] ?? "0", 10);
+          const shouldAutoAdvance = firstDigit > maxFirstDigit;
+          if (newValue.length === 1) {
+            if (shouldAutoAdvance) {
+              const paddedValue = numValue.toString().padStart(2, "0");
+              setEditValue(paddedValue);
+              updateTimeValue(paddedValue, true);
+              setPendingDigit(null);
+              queueMicrotask(() => {
+                if (segment) {
+                  const nextInputRef = inputGroupContext.getNextInput(segment);
+                  if (nextInputRef?.current) {
+                    nextInputRef.current.focus();
+                    nextInputRef.current.select();
+                  }
+                }
+              });
+            } else {
+              const paddedValue = numValue.toString().padStart(2, "0");
+              setEditValue(paddedValue);
+              setPendingDigit(newValue);
+              queueMicrotask(() => {
+                inputRef.current?.select();
+              });
+            }
+          } else if (newValue.length === 2) {
+            const paddedValue = numValue.toString().padStart(2, "0");
+            setEditValue(paddedValue);
+            updateTimeValue(paddedValue, true);
+            setPendingDigit(null);
+            queueMicrotask(() => {
+              if (segment) {
+                const nextInputRef = inputGroupContext.getNextInput(segment);
+                if (nextInputRef?.current) {
+                  nextInputRef.current.focus();
+                  nextInputRef.current.select();
+                }
+              }
+            });
+          }
+        } else if (newValue.length === 0) {
+          setEditValue("");
+          setPendingDigit(null);
+        }
+      }
+    },
+    [
+      segment,
+      updateTimeValue,
+      onChangeProp,
+      editValue,
+      is12Hour,
+      inputGroupContext,
+      pendingDigit,
+      segmentPlaceholder,
+      labels
+    ]
+  );
+  const onClick = React.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      event.currentTarget.select();
+    },
+    [onClickProp]
+  );
+  const onFocus = React.useCallback(
+    (event) => {
+      onFocusProp?.(event);
+      if (event.defaultPrevented) return;
+      setIsEditing(true);
+      setPendingDigit(null);
+      if (openOnFocus && !store.getState().open) {
+        store.setState("openedViaFocus", true);
+        store.setState("open", true);
+      }
+      queueMicrotask(() => event.target.select());
+    },
+    [onFocusProp, openOnFocus, store]
+  );
+  const onKeyDown = React.useCallback(
+    (event) => {
+      onKeyDownProp?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+        event.preventDefault();
+        const goToPrevious = event.key === "ArrowLeft";
+        const inputGroup = inputRef.current?.closest('[data-slot="time-picker-input-group"]');
+        if (inputGroup && inputRef.current) {
+          const allInputs = Array.from(inputGroup.querySelectorAll('input[type="text"]'));
+          const currentIdx = allInputs.indexOf(inputRef.current);
+          if (currentIdx !== -1) {
+            const targetIdx = goToPrevious ? Math.max(0, currentIdx - 1) : Math.min(allInputs.length - 1, currentIdx + 1);
+            const targetInput = allInputs[targetIdx];
+            if (targetInput && targetInput !== inputRef.current) {
+              targetInput.focus();
+              targetInput.select();
+            }
+          }
+        }
+        return;
+      }
+      if (event.key === "Backspace" || event.key === "Delete") {
+        const input = inputRef.current;
+        if (input && input.selectionStart === 0 && input.selectionEnd === input.value.length) {
+          event.preventDefault();
+          const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER;
+          setEditValue(placeholder);
+          setPendingDigit(null);
+          if (timeValue) {
+            const newTime = { ...timeValue };
+            switch (segment) {
+              case "hour":
+                delete newTime.hour;
+                break;
+              case "minute":
+                delete newTime.minute;
+                break;
+              case "second":
+                delete newTime.second;
+                break;
+              case "period":
+                delete newTime.period;
+                break;
+            }
+            if (newTime.hour !== void 0 || newTime.minute !== void 0 || newTime.second !== void 0 || newTime.period !== void 0) {
+              const newValue = formatTimeValue(newTime, showSeconds);
+              store.setState("value", newValue);
+            } else {
+              store.setState("value", "");
+            }
+          } else {
+            store.setState("value", "");
+          }
+          queueMicrotask(() => {
+            inputRef.current?.select();
+          });
+          return;
+        }
+      }
+      if (segment === "period") {
+        const newPeriodFromKey = getPeriodFromKey(event.key, labels);
+        if (newPeriodFromKey) {
+          event.preventDefault();
+          setEditValue(newPeriodFromKey);
+          updateTimeValue(newPeriodFromKey, true);
+          queueMicrotask(() => {
+            inputRef.current?.select();
+          });
+        } else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+          event.preventDefault();
+          const placeholder = segmentPlaceholder.period;
+          const currentPeriod = editValue === placeholder || editValue === "" ? "AM" : editValue;
+          const newPeriod = currentPeriod === "AM" || currentPeriod === "A" ? "PM" : "AM";
+          setEditValue(newPeriod);
+          updateTimeValue(newPeriod, true);
+          queueMicrotask(() => {
+            inputRef.current?.select();
+          });
+        }
+        return;
+      }
+      if (event.key === "Tab") {
+        const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER;
+        if (editValue && editValue.length > 0 && editValue !== placeholder) {
+          if (editValue.length === 2) {
+            updateTimeValue(editValue, true);
+          } else if (editValue.length === 1) {
+            const numValue = Number.parseInt(editValue, 10);
+            if (!Number.isNaN(numValue)) {
+              const paddedValue = numValue.toString().padStart(2, "0");
+              updateTimeValue(paddedValue, true);
+            }
+          }
+        }
+        return;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER;
+        if (editValue && editValue.length > 0 && editValue !== placeholder) {
+          if (editValue.length === 2) {
+            updateTimeValue(editValue, true);
+          } else if (editValue.length === 1) {
+            const numValue = Number.parseInt(editValue, 10);
+            if (!Number.isNaN(numValue)) {
+              const paddedValue = numValue.toString().padStart(2, "0");
+              updateTimeValue(paddedValue, true);
+            }
+          }
+        }
+        queueMicrotask(() => {
+          inputRef.current?.select();
+        });
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setEditValue(getSegmentValue());
+        inputRef.current?.blur();
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER;
+        if (editValue === placeholder || editValue === "") {
+          const defaultValue = segment === "hour" ? is12Hour ? 12 : 0 : 0;
+          const formattedValue = defaultValue.toString().padStart(2, "0");
+          setEditValue(formattedValue);
+          updateTimeValue(formattedValue, true);
+          queueMicrotask(() => {
+            inputRef.current?.select();
+          });
+          return;
+        }
+        const currentValue = Number.parseInt(editValue, 10);
+        if (!Number.isNaN(currentValue)) {
+          let newValue;
+          switch (segment) {
+            case "hour":
+              if (is12Hour) {
+                newValue = currentValue === 12 ? 1 : currentValue + 1;
+              } else {
+                newValue = currentValue === 23 ? 0 : currentValue + 1;
+              }
+              break;
+            case "minute":
+            case "second":
+              newValue = currentValue === 59 ? 0 : currentValue + 1;
+              break;
+            default:
+              return;
+          }
+          const formattedValue = newValue.toString().padStart(2, "0");
+          setEditValue(formattedValue);
+          updateTimeValue(formattedValue, true);
+          queueMicrotask(() => {
+            inputRef.current?.select();
+          });
+        }
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        const placeholder = segment ? segmentPlaceholder[segment] : DEFAULT_SEGMENT_PLACEHOLDER;
+        if (editValue === placeholder || editValue === "") {
+          const defaultValue = segment === "hour" ? is12Hour ? 12 : 23 : 59;
+          const formattedValue = defaultValue.toString().padStart(2, "0");
+          setEditValue(formattedValue);
+          updateTimeValue(formattedValue, true);
+          queueMicrotask(() => {
+            inputRef.current?.select();
+          });
+          return;
+        }
+        const currentValue = Number.parseInt(editValue, 10);
+        if (!Number.isNaN(currentValue)) {
+          let newValue;
+          switch (segment) {
+            case "hour":
+              if (is12Hour) {
+                newValue = currentValue === 1 ? 12 : currentValue - 1;
+              } else {
+                newValue = currentValue === 0 ? 23 : currentValue - 1;
+              }
+              break;
+            case "minute":
+            case "second":
+              newValue = currentValue === 0 ? 59 : currentValue - 1;
+              break;
+            default:
+              return;
+          }
+          const formattedValue = newValue.toString().padStart(2, "0");
+          setEditValue(formattedValue);
+          updateTimeValue(formattedValue, true);
+          queueMicrotask(() => {
+            inputRef.current?.select();
+          });
+        }
+      }
+    },
+    [
+      onKeyDownProp,
+      editValue,
+      segment,
+      is12Hour,
+      getSegmentValue,
+      updateTimeValue,
+      showSeconds,
+      timeValue,
+      store,
+      segmentPlaceholder,
+      labels
+    ]
+  );
+  if (segment === "period" && !is12Hour) return null;
+  const displayValue = isEditing ? editValue : getSegmentValue();
+  const segmentWidth = segment ? `var(--time-picker-${segment}-input-width)` : "2ch";
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "text",
+      inputMode: segment === "period" ? "text" : "numeric",
+      autoComplete: "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: false,
+      translate: "no",
+      "aria-label": labels[segment],
+      "aria-invalid": invalid || void 0,
+      ...inputProps,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      className: cn(
+        "inline-flex h-full items-center justify-center border-0 bg-transparent text-center text-sm tabular-nums transition-colors outline-none focus:bg-transparent disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      style: { width: segmentWidth, ...style },
+      ref: composedRef,
+      value: segment === "period" ? getPeriodLabel(displayValue, labels) : displayValue,
+      onBlur,
+      onChange,
+      onClick,
+      onFocus,
+      onKeyDown
+    }
+  );
+}
+function TimePickerTrigger(props) {
+  const { className, children, disabled: disabledProp, ref, ...triggerProps } = props;
+  const { triggerId, disabled, labels, triggerRef } = useTimePickerContext(TRIGGER_NAME);
+  const isDisabled = disabledProp || disabled;
+  const composedRef = useComposedRefs(ref, triggerRef);
+  return /* @__PURE__ */ jsx(
+    PopoverTrigger,
+    {
+      type: "button",
+      id: triggerId,
+      "data-slot": "time-picker-trigger",
+      disabled: isDisabled,
+      ref: composedRef,
+      ...triggerProps,
+      className: cn(
+        // ⚠ Khác thượng nguồn: thêm viền focus theo khuôn `Button` của gói — bản gốc không có kiểu
+        // focus nào, và viền mặc định của trình duyệt bị lớp nền `outline-ring/50` pha còn gold 50%.
+        "ml-auto flex items-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:pointer-events-none [&>svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Clock, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.openPicker })
+      ] })
+    }
+  );
+}
+const TimePickerGroupContext = React.createContext(null);
+function useTimePickerGroupContext(consumerName) {
+  const context = React.useContext(TimePickerGroupContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${CONTENT_NAME}\``);
+  }
+  return context;
+}
+function TimePickerContent(props) {
+  const {
+    side = "bottom",
+    align = "start",
+    sideOffset = 6,
+    className,
+    onOpenAutoFocus: onOpenAutoFocusProp,
+    onInteractOutside: onInteractOutsideProp,
+    ...contentProps
+  } = props;
+  const store = useStoreContext(CONTENT_NAME);
+  const { openOnFocus, inputGroupRef } = useTimePickerContext(CONTENT_NAME);
+  const columnsRef = React.useRef(/* @__PURE__ */ new Map());
+  const onColumnRegister = React.useCallback((column) => {
+    columnsRef.current.set(column.id, column);
+  }, []);
+  const onColumnUnregister = React.useCallback((id) => {
+    columnsRef.current.delete(id);
+  }, []);
+  const getColumns = React.useCallback(() => {
+    const columns = Array.from(columnsRef.current.entries()).map(([id, { ref, getSelectedItemRef, getItems }]) => ({
+      id,
+      ref,
+      getSelectedItemRef,
+      getItems
+    })).filter((c) => c.ref.current !== null);
+    return sortNodes(columns);
+  }, []);
+  const groupContextValue = React.useMemo(
+    () => ({
+      getColumns,
+      onColumnRegister,
+      onColumnUnregister
+    }),
+    [getColumns, onColumnRegister, onColumnUnregister]
+  );
+  const onOpenAutoFocus = React.useCallback(
+    (event) => {
+      onOpenAutoFocusProp?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      const { openedViaFocus } = store.getState();
+      if (openedViaFocus) {
+        store.setState("openedViaFocus", false);
+        return;
+      }
+      const columns = getColumns();
+      const firstColumn = columns[0];
+      if (!firstColumn) return;
+      const items = firstColumn.getItems();
+      const selectedItem = items.find((item) => item.selected);
+      const candidateRefs = selectedItem ? [selectedItem.ref, ...items.map((item) => item.ref)] : items.map((item) => item.ref);
+      focusFirst(candidateRefs, false);
+    },
+    [onOpenAutoFocusProp, getColumns, store]
+  );
+  const onInteractOutside = React.useCallback(
+    (event) => {
+      onInteractOutsideProp?.(event);
+      if (event.defaultPrevented) return;
+      if (openOnFocus && inputGroupRef.current) {
+        const target = event.target;
+        if (!(target instanceof Node)) return;
+        const isInsideInputGroup = inputGroupRef.current.contains(target);
+        if (isInsideInputGroup) {
+          event.preventDefault();
+        }
+      }
+    },
+    [onInteractOutsideProp, openOnFocus, inputGroupRef]
+  );
+  return /* @__PURE__ */ jsx(TimePickerGroupContext.Provider, { value: groupContextValue, children: /* @__PURE__ */ jsx(
+    PopoverContent,
+    {
+      "data-slot": "time-picker-content",
+      side,
+      align,
+      sideOffset,
+      ...contentProps,
+      className: cn("flex w-auto max-w-(--radix-popover-trigger-width) p-0", className),
+      onOpenAutoFocus,
+      onInteractOutside
+    }
+  ) });
+}
+const TimePickerColumnContext = React.createContext(null);
+function useTimePickerColumnContext(consumerName) {
+  const context = React.useContext(TimePickerColumnContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong m\u1ED9t c\u1ED9t (\`${COLUMN_NAME}\`)`);
+  }
+  return context;
+}
+function TimePickerColumn(props) {
+  const { children, className, ref, ...columnProps } = props;
+  const columnId = React.useId();
+  const columnRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, columnRef);
+  const itemsRef = React.useRef(/* @__PURE__ */ new Map());
+  const groupContext = useTimePickerGroupContext(COLUMN_NAME);
+  const onItemRegister = React.useCallback(
+    (value, ref2, selected) => {
+      itemsRef.current.set(value, { ref: ref2, selected });
+    },
+    []
+  );
+  const onItemUnregister = React.useCallback((value) => {
+    itemsRef.current.delete(value);
+  }, []);
+  const getItems = React.useCallback(() => {
+    const items = Array.from(itemsRef.current.entries()).map(([value, { ref: ref2, selected }]) => ({
+      value,
+      ref: ref2,
+      selected
+    })).filter((item) => item.ref.current);
+    return sortNodes(items);
+  }, []);
+  const getSelectedItemRef = React.useCallback(() => {
+    const items = getItems();
+    return items.find((item) => item.selected)?.ref ?? null;
+  }, [getItems]);
+  useIsomorphicLayoutEffect(() => {
+    groupContext.onColumnRegister({
+      id: columnId,
+      ref: columnRef,
+      getSelectedItemRef,
+      getItems
+    });
+    return () => groupContext.onColumnUnregister(columnId);
+  }, [groupContext, columnId, getSelectedItemRef, getItems]);
+  const columnContextValue = React.useMemo(
+    () => ({
+      getItems,
+      onItemRegister,
+      onItemUnregister
+    }),
+    [getItems, onItemRegister, onItemUnregister]
+  );
+  return /* @__PURE__ */ jsx(TimePickerColumnContext.Provider, { value: columnContextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "listbox",
+      ref: composedRef,
+      "data-slot": "time-picker-column",
+      ...columnProps,
+      className: cn("flex flex-col gap-1 p-1 not-last:border-r", className),
+      children
+    }
+  ) });
+}
+function TimePickerColumnItem(props) {
+  const { value, selected = false, format = "numeric", className, children, ref, ...itemProps } = props;
+  const itemRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, itemRef);
+  const columnContext = useTimePickerColumnContext(COLUMN_ITEM_NAME);
+  const groupContext = useTimePickerGroupContext(COLUMN_ITEM_NAME);
+  useIsomorphicLayoutEffect(() => {
+    columnContext.onItemRegister(value, itemRef, selected);
+    return () => columnContext.onItemUnregister(value);
+  }, [columnContext, value, selected]);
+  useIsomorphicLayoutEffect(() => {
+    if (selected && itemRef.current) {
+      itemRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [selected]);
+  const onClick = React.useCallback(
+    (event) => {
+      itemProps.onClick?.(event);
+      if (event.defaultPrevented) return;
+      itemRef.current?.focus();
+    },
+    [itemProps.onClick]
+  );
+  const onKeyDown = React.useCallback(
+    (event) => {
+      itemProps.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        event.preventDefault();
+        const items = columnContext.getItems().sort((a, b) => {
+          if (typeof a.value === "number" && typeof b.value === "number") {
+            return a.value - b.value;
+          }
+          return 0;
+        });
+        const currentIndex = items.findIndex((item) => item.value === value);
+        let nextIndex;
+        if (event.key === "ArrowUp") {
+          nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        } else {
+          nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        }
+        const nextItem = items[nextIndex];
+        nextItem?.ref.current?.focus();
+        nextItem?.ref.current?.click();
+      } else if ((event.key === "Tab" || event.key === "ArrowLeft" || event.key === "ArrowRight") && groupContext) {
+        event.preventDefault();
+        queueMicrotask(() => {
+          const columns = groupContext.getColumns();
+          if (columns.length === 0) return;
+          const currentColumnIndex = columns.findIndex((c) => c.ref.current?.contains(itemRef.current) ?? false);
+          if (currentColumnIndex === -1) return;
+          const goToPrevious = event.key === "ArrowLeft" || event.key === "Tab" && event.shiftKey;
+          const nextColumnIndex = goToPrevious ? currentColumnIndex > 0 ? currentColumnIndex - 1 : columns.length - 1 : currentColumnIndex < columns.length - 1 ? currentColumnIndex + 1 : 0;
+          const nextColumn = columns[nextColumnIndex];
+          if (nextColumn?.ref.current) {
+            const items = nextColumn.getItems();
+            const selectedItem = items.find((item) => item.selected);
+            const candidateRefs = selectedItem ? [selectedItem.ref, ...items.map((item) => item.ref)] : items.map((item) => item.ref);
+            focusFirst(candidateRefs, false);
+          }
+        });
+      }
+    },
+    [itemProps.onKeyDown, columnContext, groupContext, value]
+  );
+  const formattedValue = typeof value === "number" && format === "2-digit" ? value.toString().padStart(2, "0") : value.toString();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      ...itemProps,
+      ref: composedRef,
+      "data-selected": selected ? "" : void 0,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: focus đi theo khuôn `Checkbox`/`Calendar` của gói (`focus-visible`,
+         * có offset — mục đang chọn tô nền vàng, quầng vàng dính sát nền vàng thì không thấy);
+         * mục đang chọn dùng cặp token của control BẬT `--control-on` / `--control-check` thay
+         * `bg-primary text-primary-foreground` — cùng lý do và số đo với ô ngày đang chọn của
+         * `Calendar` (chú thích đầu `calendar.tsx`). Hover chỉ áp cho mục CHƯA chọn
+         * (`not-data-selected:`) thay vì để `data-selected:hover:` ghi đè lại: cùng kết quả trên
+         * màn hình, nhưng cách cũ khiến `pnpm lint:a11y` ghép chữ hover `--accent-foreground`
+         * với nền mục đang chọn (1,39:1 ở dark) — một cặp không bao giờ xuất hiện.
+         */
+        "w-full rounded px-3 py-1.5 text-left text-sm not-data-selected:hover:bg-accent not-data-selected:hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "data-selected:bg-control-on data-selected:text-control-check",
+        className
+      ),
+      onClick,
+      onKeyDown,
+      children: children ?? formattedValue
+    }
+  );
+}
+function TimePickerHour(props) {
+  const { asChild, format = "numeric", className, ...hourProps } = props;
+  const { is12Hour, hourStep, showSeconds, disabled, readOnly, labels } = useTimePickerContext(HOUR_NAME);
+  const store = useStoreContext(HOUR_NAME);
+  const value = useStore((state) => state.value);
+  const timeValue = parseTimeString(value);
+  const hours = Array.from(
+    {
+      length: is12Hour ? Math.ceil(12 / hourStep) : Math.ceil(24 / hourStep)
+    },
+    (_, i) => {
+      if (is12Hour) {
+        const hour = i * hourStep % 12;
+        return hour === 0 ? 12 : hour;
+      }
+      return i * hourStep;
+    }
+  );
+  const onHourSelect = React.useCallback(
+    (displayHour2) => {
+      if (disabled || readOnly) return;
+      const now2 = /* @__PURE__ */ new Date();
+      const currentTime = timeValue ?? {};
+      let hour24 = displayHour2;
+      if (is12Hour) {
+        let currentPeriod;
+        if (timeValue?.period !== void 0) {
+          currentPeriod = timeValue.period;
+        } else if (timeValue?.hour !== void 0) {
+          currentPeriod = to12Hour(timeValue.hour).period;
+        } else {
+          currentPeriod = to12Hour(now2.getHours()).period;
+        }
+        hour24 = to24Hour(displayHour2, currentPeriod);
+      }
+      const newTime = { ...currentTime, hour: hour24 };
+      if (timeValue && timeValue.period !== void 0) {
+        newTime.period = timeValue.period;
+      }
+      if (newTime.minute === void 0) {
+        newTime.minute = now2.getMinutes();
+      }
+      if (showSeconds && newTime.second === void 0) {
+        newTime.second = now2.getSeconds();
+      }
+      const newValue = formatTimeValue(newTime, showSeconds);
+      store.setState("value", newValue);
+    },
+    [timeValue, showSeconds, is12Hour, disabled, readOnly, store]
+  );
+  const now = /* @__PURE__ */ new Date();
+  const referenceHour = timeValue?.hour ?? now.getHours();
+  const displayHour = is12Hour ? to12Hour(referenceHour).hour : referenceHour;
+  const HourPrimitive = asChild ? Slot : TimePickerColumn;
+  return /* @__PURE__ */ jsx(
+    HourPrimitive,
+    {
+      "data-slot": "time-picker-hour",
+      "aria-label": labels.hour,
+      ...hourProps,
+      className: cn("scrollbar-none flex max-h-[200px] flex-col gap-1 overflow-y-auto p-1", className),
+      children: hours.map((hour) => /* @__PURE__ */ jsx(
+        TimePickerColumnItem,
+        {
+          value: hour,
+          selected: displayHour === hour,
+          format,
+          onClick: () => onHourSelect(hour)
+        },
+        hour
+      ))
+    }
+  );
+}
+function TimePickerMinute(props) {
+  const { asChild, format = "2-digit", className, ...minuteProps } = props;
+  const { minuteStep, showSeconds, disabled, readOnly, labels } = useTimePickerContext(MINUTE_NAME);
+  const store = useStoreContext(MINUTE_NAME);
+  const value = useStore((state) => state.value);
+  const timeValue = parseTimeString(value);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+  const onMinuteSelect = React.useCallback(
+    (minute) => {
+      if (disabled || readOnly) return;
+      const now2 = /* @__PURE__ */ new Date();
+      const currentTime = timeValue ?? {};
+      const newTime = { ...currentTime, minute };
+      if (newTime.hour === void 0) {
+        newTime.hour = now2.getHours();
+      }
+      if (showSeconds && newTime.second === void 0) {
+        newTime.second = now2.getSeconds();
+      }
+      const newValue = formatTimeValue(newTime, showSeconds);
+      store.setState("value", newValue);
+    },
+    [timeValue, showSeconds, disabled, readOnly, store]
+  );
+  const MinutePrimitive = asChild ? Slot : TimePickerColumn;
+  const now = /* @__PURE__ */ new Date();
+  const referenceMinute = timeValue?.minute ?? now.getMinutes();
+  return /* @__PURE__ */ jsx(
+    MinutePrimitive,
+    {
+      "data-slot": "time-picker-minute",
+      "aria-label": labels.minute,
+      ...minuteProps,
+      className: cn("scrollbar-none flex max-h-[200px] flex-col gap-1 overflow-y-auto p-1", className),
+      children: minutes.map((minute) => /* @__PURE__ */ jsx(
+        TimePickerColumnItem,
+        {
+          value: minute,
+          selected: referenceMinute === minute,
+          format,
+          onClick: () => onMinuteSelect(minute)
+        },
+        minute
+      ))
+    }
+  );
+}
+function TimePickerSecond(props) {
+  const { asChild, format = "2-digit", className, ...secondProps } = props;
+  const { secondStep, disabled, readOnly, labels } = useTimePickerContext(SECOND_NAME);
+  const store = useStoreContext(SECOND_NAME);
+  const value = useStore((state) => state.value);
+  const timeValue = parseTimeString(value);
+  const seconds = Array.from({ length: Math.ceil(60 / secondStep) }, (_, i) => i * secondStep);
+  const onSecondSelect = React.useCallback(
+    (second) => {
+      if (disabled || readOnly) return;
+      const now2 = /* @__PURE__ */ new Date();
+      const currentTime = timeValue ?? {};
+      const newTime = { ...currentTime, second };
+      if (newTime.hour === void 0) {
+        newTime.hour = now2.getHours();
+      }
+      if (newTime.minute === void 0) {
+        newTime.minute = now2.getMinutes();
+      }
+      const newValue = formatTimeValue(newTime, true);
+      store.setState("value", newValue);
+    },
+    [timeValue, disabled, readOnly, store]
+  );
+  const SecondPrimitive = asChild ? Slot : TimePickerColumn;
+  const now = /* @__PURE__ */ new Date();
+  const referenceSecond = timeValue?.second ?? now.getSeconds();
+  return /* @__PURE__ */ jsx(
+    SecondPrimitive,
+    {
+      "data-slot": "time-picker-second",
+      "aria-label": labels.second,
+      ...secondProps,
+      className: cn("scrollbar-none flex max-h-[200px] flex-col gap-1 overflow-y-auto p-1", className),
+      children: seconds.map((second) => /* @__PURE__ */ jsx(
+        TimePickerColumnItem,
+        {
+          value: second,
+          selected: referenceSecond === second,
+          format,
+          onClick: () => onSecondSelect(second)
+        },
+        second
+      ))
+    }
+  );
+}
+function TimePickerPeriod(props) {
+  const { asChild, className, ...periodProps } = props;
+  const { is12Hour, showSeconds, disabled, readOnly, labels } = useTimePickerContext(PERIOD_NAME);
+  const store = useStoreContext(PERIOD_NAME);
+  const value = useStore((state) => state.value);
+  const timeValue = parseTimeString(value);
+  const onPeriodToggle = React.useCallback(
+    (period) => {
+      if (disabled || readOnly) return;
+      const now2 = /* @__PURE__ */ new Date();
+      const currentTime = timeValue ?? {};
+      const currentHour = currentTime.hour !== void 0 ? currentTime.hour : now2.getHours();
+      const currentDisplay = to12Hour(currentHour);
+      const new24Hour = to24Hour(currentDisplay.hour, period);
+      const newTime = { ...currentTime, hour: new24Hour };
+      if (newTime.minute === void 0) {
+        newTime.minute = now2.getMinutes();
+      }
+      if (showSeconds && newTime.second === void 0) {
+        newTime.second = now2.getSeconds();
+      }
+      const newValue = formatTimeValue(newTime, showSeconds);
+      store.setState("value", newValue);
+    },
+    [timeValue, showSeconds, disabled, readOnly, store]
+  );
+  if (!is12Hour) return null;
+  const now = /* @__PURE__ */ new Date();
+  const referenceHour = timeValue?.hour ?? now.getHours();
+  const currentPeriod = to12Hour(referenceHour).period;
+  const PeriodPrimitive = asChild ? Slot : TimePickerColumn;
+  return /* @__PURE__ */ jsx(
+    PeriodPrimitive,
+    {
+      "data-slot": "time-picker-period",
+      "aria-label": labels.period,
+      ...periodProps,
+      className: cn("flex flex-col gap-1 p-1", className),
+      children: PERIODS.map((period) => /* @__PURE__ */ jsx(
+        TimePickerColumnItem,
+        {
+          value: period,
+          selected: currentPeriod === period,
+          onClick: () => onPeriodToggle(period),
+          children: getPeriodLabel(period, labels)
+        },
+        period
+      ))
+    }
+  );
+}
+function TimePickerSeparator(props) {
+  const { asChild, children, ...separatorProps } = props;
+  const SeparatorPrimitive = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(SeparatorPrimitive, { "aria-hidden": "true", "data-slot": "time-picker-separator", ...separatorProps, children: children ?? ":" });
+}
+function TimePickerClear(props) {
+  const { asChild, className, children, disabled: disabledProp, ...clearProps } = props;
+  const { disabled, readOnly, labels } = useTimePickerContext(CLEAR_NAME);
+  const store = useStoreContext(CLEAR_NAME);
+  const isDisabled = disabledProp || disabled;
+  const onClick = React.useCallback(
+    (event) => {
+      clearProps.onClick?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      if (disabled || readOnly) return;
+      store.setState("value", "");
+    },
+    [clearProps.onClick, disabled, readOnly, store]
+  );
+  const ClearPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    ClearPrimitive,
+    {
+      type: "button",
+      "data-slot": "time-picker-clear",
+      disabled: isDisabled,
+      ...clearProps,
+      className: cn(
+        // Viền focus theo khuôn `Button` — xem `TimePickerTrigger`.
+        "inline-flex items-center justify-center rounded-sm text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      onClick,
+      children: children ?? labels.clear
+    }
+  );
+}
+export {
+  TimePicker,
+  TimePickerClear,
+  TimePickerContent,
+  TimePickerHour,
+  TimePickerInput,
+  TimePickerInputGroup,
+  TimePickerLabel,
+  TimePickerMinute,
+  TimePickerPeriod,
+  TimePickerSecond,
+  TimePickerSeparator,
+  TimePickerTrigger,
+  useStore as useTimePicker
+};
+//# sourceMappingURL=time-picker.js.map