@comitor/ui 2.1.0 → 3.0.1

package/dist/components/ui/time-picker.d.ts

@@ -56,16 +56,21 @@ interface TimePickerProps extends DivProps {
     /** Chữ giữ chỗ của ô trống — một chuỗi cho mọi ô, hoặc từng ô. Mặc định `"--"`. */
     segmentPlaceholder?: SegmentPlaceholder;
     /**
-     * Locale BCP 47 quyết định đồng hồ 12 hay 24 giờ — CHỈ vậy, không dịch nhãn (xem `labels`).
+     * Locale BCP 47 quyết định đồng hồ 12 hay 24 giờ — CHỈ vậy, không dịch nhãn (nhãn theo
+     * `ComitorLocaleProvider`, xem `labels`).
      *
-     * ⚠ Khác thượng nguồn: mặc định `"vi-VN"` (đồng hồ 24 giờ) thay vì locale của môi trường chạy.
-     * Muốn 12 giờ: `locale="en-US"` kèm `labels={{ am: "AM", pm: "PM" }}`. Muốn theo trình duyệt:
-     * truyền `navigator.language` — nhưng chỉ sau khi hydrate, vì server không biết giá trị đó.
+     * Không truyền thì lấy `locale` của `ComitorLocaleProvider`: không có provider → `"en"` → 12 giờ
+     * ("AM"/"PM"); `"vi"` → 24 giờ; `"en-GB"` → 24 giờ. Trước `3.0.0` mặc định cứng là `"vi-VN"`.
+     *
+     * ⚠ Khác thượng nguồn: bản gốc để `undefined`, tức theo locale của MÔI TRƯỜNG CHẠY — xem chú
+     * thích ở chỗ đọc prop này trong `TimePicker`. Muốn theo trình duyệt: truyền `navigator.language`
+     * — nhưng chỉ sau khi hydrate, vì server không biết giá trị đó.
      */
     locale?: string;
     /**
-     * Chuỗi hiển thị và nhãn trình đọc màn hình (tên từng ô, "SA"/"CH", tên nút mở, nút xoá) —
-     * mặc định tiếng Việt, xem `DEFAULT_TIME_PICKER_LABELS`. Thêm so với thượng nguồn.
+     * Chuỗi hiển thị và nhãn trình đọc màn hình (tên từng ô, nhãn buổi, tên nút mở, nút xoá). Không
+     * truyền thì theo namespace `timePicker` của `ComitorLocaleProvider` (mặc định tiếng Anh). Thêm
+     * so với thượng nguồn.
      */
     labels?: Partial<TimePickerLabels>;
     name?: string;

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

@@ -3,6 +3,7 @@ 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";
@@ -10,7 +11,6 @@ import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effec
 import { useLazyRef } from "../../lib/use-lazy-ref.js";
 import { VisuallyHiddenInput } from "../../lib/visually-hidden-input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./popover.js";
-import { DEFAULT_TIME_PICKER_LABELS } from "./time-picker-constants.js";
 const ROOT_NAME = "TimePicker";
 const LABEL_NAME = "TimePickerLabel";
 const INPUT_GROUP_NAME = "TimePickerInputGroup";
@@ -26,7 +26,6 @@ const PERIOD_NAME = "TimePickerPeriod";
 const CLEAR_NAME = "TimePickerClear";
 const DEFAULT_STEP = 1;
 const DEFAULT_SEGMENT_PLACEHOLDER = "--";
-const DEFAULT_LOCALE = "vi-VN";
 const SEGMENTS = ["hour", "minute", "second", "period"];
 const PERIODS = ["AM", "PM"];
 function focusFirst(candidates, preventScroll = false) {
@@ -167,7 +166,7 @@ function TimePicker(props) {
     minuteStep = DEFAULT_STEP,
     secondStep = DEFAULT_STEP,
     segmentPlaceholder = DEFAULT_SEGMENT_PLACEHOLDER,
-    locale = DEFAULT_LOCALE,
+    locale: localeProp,
     labels: labelsProp,
     name,
     asChild,
@@ -181,6 +180,8 @@ function TimePicker(props) {
     id,
     ...rootProps
   } = props;
+  const { locale: providerLocale } = useComitorLocale();
+  const locale = localeProp ?? providerLocale;
   const instanceId = React.useId();
   const rootId = id ?? instanceId;
   const inputGroupId = React.useId();
@@ -257,10 +258,7 @@ function TimePicker(props) {
       period: segmentPlaceholder.period ?? DEFAULT_SEGMENT_PLACEHOLDER
     };
   }, [segmentPlaceholder]);
-  const labels = React.useMemo(
-    () => ({ ...DEFAULT_TIME_PICKER_LABELS, ...labelsProp }),
-    [labelsProp]
-  );
+  const labels = useComitorLabels("timePicker", labelsProp);
   const rootContext = React.useMemo(
     () => ({
       id: rootId,