@comitor/ui 2.1.0 → 3.0.1

package/dist/components/composite/date-picker.js

@@ -1,19 +1,38 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { format as formatDate, isAfter, isBefore, isValid, parse, startOfDay } from "date-fns";
-import { vi } from "date-fns/locale";
 import { CalendarDays, X } from "lucide-react";
 import { useEffect, useState } from "react";
+import { useComitorLabels, useComitorLocale } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { Calendar } from "../ui/calendar.js";
 import { Input } from "../ui/input.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
 import {
-  DEFAULT_DATE_PICKER_LABELS,
+  DEFAULT_DATE_PRESETS,
   DEFAULT_DATE_RANGE_PRESETS,
   dateFormatForLocale
 } from "./date-picker-constants.js";
+const PRESET_MESSAGE_KEY_BY_ID = {
+  today: "today",
+  yesterday: "yesterday",
+  "week-ago": "weekAgo",
+  "last-7": "last7Days",
+  "last-30": "last30Days",
+  "this-month": "thisMonth",
+  "last-month": "lastMonth"
+};
+const DEFAULT_PRESET_MESSAGE_KEYS = new Map(
+  [...DEFAULT_DATE_PRESETS, ...DEFAULT_DATE_RANGE_PRESETS].flatMap((preset) => {
+    const key = PRESET_MESSAGE_KEY_BY_ID[preset.id];
+    return key ? [[preset, key]] : [];
+  })
+);
+function presetLabel(preset, messages) {
+  const key = DEFAULT_PRESET_MESSAGE_KEYS.get(preset);
+  return key ? messages[key] : preset.label;
+}
 function isOutOfRange(date, minDate, maxDate) {
   if (minDate && isBefore(date, startOfDay(minDate))) return true;
   if (maxDate && isAfter(date, startOfDay(maxDate))) return true;
@@ -34,7 +53,7 @@ function DatePicker({
   maxDate,
   clearable = true,
   presets = false,
-  locale = vi,
+  locale: localeProp,
   dateFormat,
   labels,
   className,
@@ -42,8 +61,10 @@ function DatePicker({
   name,
   ...aria
 }) {
+  const { dateFnsLocale } = useComitorLocale();
+  const locale = localeProp ?? dateFnsLocale;
   const pattern = dateFormat ?? dateFormatForLocale(locale);
-  const label = { ...DEFAULT_DATE_PICKER_LABELS, ...labels };
+  const label = useComitorLabels("datePicker", labels);
   const [open, setOpen] = useState(false);
   const [text, setText] = useState(() => value ? formatDate(value, pattern, { locale }) : "");
   useEffect(() => {
@@ -128,7 +149,7 @@ function DatePicker({
                 onValueChange(preset.getValue());
                 setOpen(false);
               },
-              children: preset.label
+              children: presetLabel(preset, label.presets)
             },
             preset.id
           )) }),
@@ -161,22 +182,25 @@ function formatRange(range, pattern, locale) {
 function DateRangePicker({
   value,
   onValueChange,
-  placeholder = "Ch\u1ECDn kho\u1EA3ng ng\xE0y",
+  placeholder: placeholderProp,
   disabled = false,
   minDate,
   maxDate,
   clearable = true,
   presets = DEFAULT_DATE_RANGE_PRESETS,
   numberOfMonths = 2,
-  locale = vi,
+  locale: localeProp,
   dateFormat,
   labels,
   className,
   id,
   ...aria
 }) {
+  const { dateFnsLocale } = useComitorLocale();
+  const locale = localeProp ?? dateFnsLocale;
   const pattern = dateFormat ?? dateFormatForLocale(locale);
-  const text = { ...DEFAULT_DATE_PICKER_LABELS, ...labels };
+  const text = useComitorLabels("datePicker", labels);
+  const placeholder = placeholderProp ?? text.rangePlaceholder;
   const [open, setOpen] = useState(false);
   const label = formatRange(value, pattern, locale);
   const presetList = presets === false ? [] : presets;
@@ -221,7 +245,7 @@ function DateRangePicker({
                 onValueChange(preset.getValue());
                 setOpen(false);
               },
-              children: preset.label
+              children: presetLabel(preset, text.presets)
             },
             preset.id
           )) }),

package/dist/components/composite/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { format as formatDate, isAfter, isBefore, isValid, type Locale, parse, startOfDay } from \"date-fns\";\nimport { vi } from \"date-fns/locale\";\nimport { CalendarDays, X } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport type { DateRange, Matcher } from \"react-day-picker\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Calendar } from \"../ui/calendar.js\";\nimport { Input } from \"../ui/input.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover.js\";\nimport {\n  type DatePickerLabels,\n  type DatePreset,\n  type DateRangePreset,\n  DEFAULT_DATE_PICKER_LABELS,\n  DEFAULT_DATE_RANGE_PRESETS,\n  dateFormatForLocale\n} from \"./date-picker-constants.js\";\n\nexport type { DateRange };\n\nfunction isOutOfRange(date: Date, minDate?: Date, maxDate?: Date): boolean {\n  if (minDate && isBefore(date, startOfDay(minDate))) return true;\n  if (maxDate && isAfter(date, startOfDay(maxDate))) return true;\n  return false;\n}\n\n/**\n * Chặn ngày ngoài khoảng cho phép — trả về MẢNG matcher, không phải một object.\n *\n * Cạm bẫy react-day-picker: `{ before, after }` trong CÙNG một object là `DateInterval`, nghĩa là\n * \"các ngày NẰM GIỮA\" — ngược hẳn ý định. Tách thành hai matcher riêng mới ra \"trước min HOẶC sau max\".\n */\nfunction buildDisabledMatchers(minDate?: Date, maxDate?: Date): Matcher[] | undefined {\n  const matchers: Matcher[] = [];\n  if (minDate) matchers.push({ before: startOfDay(minDate) });\n  if (maxDate) matchers.push({ after: startOfDay(maxDate) });\n  return matchers.length > 0 ? matchers : undefined;\n}\n\nexport interface DatePickerProps {\n  value?: Date | null;\n  onValueChange: (value: Date | null) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Ngày nhỏ nhất / lớn nhất được chọn */\n  minDate?: Date;\n  maxDate?: Date;\n  /** Hiện nút xoá khi đã có giá trị (mặc định true) */\n  clearable?: boolean;\n  /** Cột preset bên trái lịch (mặc định ẩn) */\n  presets?: DatePreset[] | false;\n  /**\n   * Ngôn ngữ của date-fns (mặc định `vi`) — quyết định tên thứ/tháng trong lịch VÀ thứ tự\n   * ngày/tháng của ô nhập, qua `dateFormatForLocale()`.\n   *\n   * App đa ngôn ngữ phải truyền: để mặc định thì giao diện tiếng Anh vẫn hiện lịch tiếng Việt và\n   * bắt người dùng gõ `dd/MM/yyyy` — hai lỗi không có gì báo đỏ.\n   */\n  locale?: Locale;\n  /**\n   * Ghi đè định dạng gõ/hiển thị. HIẾM khi cần: bỏ trống thì nó suy từ `locale`, và đó gần như\n   * luôn là thứ đúng. Chỉ dùng khi một màn hình phải ghim cứng một định dạng bất kể ngôn ngữ.\n   */\n  dateFormat?: string;\n  labels?: Partial<DatePickerLabels>;\n  className?: string;\n  id?: string;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n  \"aria-required\"?: true;\n}\n\n/**\n * Ô chọn ngày: gõ tay `dd/MM/yyyy` HOẶC bấm lịch.\n *\n * Vì sao vẫn giữ ô gõ tay thay vì chỉ có nút mở lịch: người nhập liệu chuyên nghiệp (kế toán,\n * nhân sự) gõ nhanh hơn bấm nhiều lần, và ngày sinh năm 1975 mà bắt lật lịch 50 năm thì không\n * ai chịu nổi. Chuỗi gõ dở KHÔNG bị ghi đè trong lúc gõ; sai định dạng thì trả về giá trị cũ\n * khi rời ô, không âm thầm nuốt dữ liệu.\n */\nexport function DatePicker({\n  value,\n  onValueChange,\n  placeholder,\n  disabled = false,\n  minDate,\n  maxDate,\n  clearable = true,\n  presets = false,\n  locale = vi,\n  dateFormat,\n  labels,\n  className,\n  id,\n  name,\n  ...aria\n}: DatePickerProps) {\n  const pattern = dateFormat ?? dateFormatForLocale(locale);\n  const label = { ...DEFAULT_DATE_PICKER_LABELS, ...labels };\n\n  const [open, setOpen] = useState(false);\n  const [text, setText] = useState(() => (value ? formatDate(value, pattern, { locale }) : \"\"));\n\n  // Đồng bộ khi giá trị đổi từ bên ngoài (reset form, chọn preset, load dữ liệu về) — VÀ khi đổi\n  // ngôn ngữ giữa chừng: chuỗi đang hiện là `dd/MM/yyyy` mà ô nay chờ `MM/dd/yyyy` thì lần rời ô\n  // kế tiếp sẽ đọc sai ngày.\n  useEffect(() => {\n    setText(value ? formatDate(value, pattern, { locale }) : \"\");\n  }, [value, pattern, locale]);\n\n  const commitText = (raw: string) => {\n    const trimmed = raw.trim();\n    if (trimmed === \"\") {\n      onValueChange(null);\n      return;\n    }\n    const parsed = parse(trimmed, pattern, new Date(), { locale });\n    if (!isValid(parsed) || isOutOfRange(parsed, minDate, maxDate)) {\n      // Không hợp lệ → khôi phục hiển thị theo giá trị đang có (không đổi dữ liệu).\n      setText(value ? formatDate(value, pattern, { locale }) : \"\");\n      return;\n    }\n    onValueChange(startOfDay(parsed));\n  };\n\n  const presetList = presets === false ? [] : presets;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Input\n        id={id}\n        name={name}\n        value={text}\n        disabled={disabled}\n        placeholder={placeholder ?? pattern}\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        onChange={(event) => setText(event.target.value)}\n        onBlur={(event) => commitText(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commitText(text);\n          }\n        }}\n        className=\"pr-16\"\n        {...aria}\n      />\n\n      {/* Nút `size-6`: glyph 16px nằm giữa ô 24px nên nó thụt thêm 4px so với mép ô — cộng với\n          `pr-2` của hàng là glyph rơi đúng mốc 12px của `Select`/`Combobox`. Ba loại control này\n          hay đứng chung một cột biểu mẫu, lệch vài px là mép phải nhìn răng cưa.\n\n          `border border-transparent`: hàng nằm ngoài `Input` nên đo từ mép BORDER, còn icon nằm\n          trong ô thì đo từ mép CONTENT — mượn lại viền 1px là hai mốc trùng nhau.\n\n          Icon lấy `text-muted-foreground`: `Button variant=\"ghost\"` mặc định là `text-foreground`,\n          đậm hơn hẳn chevron của `Select` (vốn `text-muted-foreground`). Chúng là cùng một hạng\n          trang trí của ô nhập thì phải cùng một sắc. */}\n      {/* `pointer-events-none` ở hàng, `pointer-events-auto` ở từng nút: phần đệm của hàng phủ lên\n          dải sát mép phải của ô nhập, để nguyên là bấm vào đó không đặt được con trỏ vào ô. */}\n      <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center border border-transparent pr-2\">\n        {clearable && value && !disabled && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            className=\"pointer-events-auto size-6 text-muted-foreground hover:text-foreground\"\n            onClick={() => onValueChange(null)}\n          >\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">{label.clear}</span>\n          </Button>\n        )}\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"pointer-events-auto size-6 text-muted-foreground hover:text-foreground\"\n              disabled={disabled}\n            >\n              <CalendarDays aria-hidden=\"true\" className=\"size-4\" />\n              <span className=\"sr-only\">{label.openCalendar}</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"flex w-auto gap-2 p-2\">\n            {presetList.length > 0 && (\n              <div className=\"flex w-32 flex-col gap-1 border-r border-border pr-2\">\n                {presetList.map((preset) => (\n                  <Button\n                    key={preset.id}\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"justify-start\"\n                    onClick={() => {\n                      onValueChange(preset.getValue());\n                      setOpen(false);\n                    }}\n                  >\n                    {preset.label}\n                  </Button>\n                ))}\n              </div>\n            )}\n            <Calendar\n              mode=\"single\"\n              locale={locale}\n              autoFocus\n              selected={value ?? undefined}\n              defaultMonth={value ?? undefined}\n              disabled={buildDisabledMatchers(minDate, maxDate)}\n              onSelect={(date) => {\n                onValueChange(date ? startOfDay(date) : null);\n                setOpen(false);\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  );\n}\n\nexport interface DateRangePickerProps {\n  value?: DateRange | null;\n  onValueChange: (value: DateRange | null) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  clearable?: boolean;\n  /** Cột preset bên trái (mặc định DEFAULT_DATE_RANGE_PRESETS; `false` để tắt) */\n  presets?: DateRangePreset[] | false;\n  /** Số tháng hiện cùng lúc (mặc định 2 trên màn rộng) */\n  numberOfMonths?: number;\n  /** Ngôn ngữ date-fns (mặc định `vi`) — xem `DatePickerProps.locale`. */\n  locale?: Locale;\n  /** Ghi đè định dạng ngày; bỏ trống thì suy từ `locale`. */\n  dateFormat?: string;\n  labels?: Partial<DatePickerLabels>;\n  className?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n}\n\nfunction formatRange(range: DateRange | null | undefined, pattern: string, locale: Locale): string | null {\n  if (!range?.from) return null;\n  const from = formatDate(range.from, pattern, { locale });\n  if (!range.to) return from;\n  return `${from} – ${formatDate(range.to, pattern, { locale })}`;\n}\n\n/**\n * Ô chọn khoảng ngày cho báo cáo và bộ lọc danh sách: cột preset + lịch 2 tháng.\n *\n * Preset đứng trước lịch vì 9/10 lần người dùng muốn \"7 ngày qua\" chứ không phải một khoảng\n * tuỳ ý — bắt họ bấm hai lần trên lịch mỗi lần xem báo cáo là thuế lặp lại vô ích.\n */\nexport function DateRangePicker({\n  value,\n  onValueChange,\n  placeholder = \"Chọn khoảng ngày\",\n  disabled = false,\n  minDate,\n  maxDate,\n  clearable = true,\n  presets = DEFAULT_DATE_RANGE_PRESETS,\n  numberOfMonths = 2,\n  locale = vi,\n  dateFormat,\n  labels,\n  className,\n  id,\n  ...aria\n}: DateRangePickerProps) {\n  const pattern = dateFormat ?? dateFormatForLocale(locale);\n  const text = { ...DEFAULT_DATE_PICKER_LABELS, ...labels };\n\n  const [open, setOpen] = useState(false);\n  const label = formatRange(value, pattern, locale);\n  const presetList = presets === false ? [] : presets;\n\n  const showClear = clearable && Boolean(label) && !disabled;\n\n  return (\n    /* Nút xóa nằm NGOÀI trigger (anh em), không lồng trong <button> — vừa hợp lệ về HTML vừa\n       đến được bằng phím Tab. */\n    <div className=\"relative w-full\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            type=\"button\"\n            id={id}\n            variant=\"outline\"\n            disabled={disabled}\n            className={cn(\n              // `px-3` chứ không phải `px-4` của `Button`: đây là một Ô NHẬP nằm cùng cột với\n              // `Input`/`Select`/`Combobox`, và cả ba đều thụt 12px. `pr-10` = 12 + 24 (nút xóa)\n              // + 4, chỉ cần khi nút xóa có mặt.\n              \"w-full justify-start gap-2 px-3 font-normal\",\n              !label && \"text-muted-foreground\",\n              showClear && \"pr-10\",\n              className\n            )}\n            {...aria}\n          >\n            <CalendarDays aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n            <span className=\"truncate\">{label ?? placeholder}</span>\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className=\"flex w-auto flex-col gap-2 p-2 sm:flex-row\">\n          {presetList.length > 0 && (\n            <div className=\"flex flex-row flex-wrap gap-1 sm:w-36 sm:flex-col sm:border-r sm:border-border sm:pr-2\">\n              {presetList.map((preset) => (\n                <Button\n                  key={preset.id}\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start\"\n                  onClick={() => {\n                    onValueChange(preset.getValue());\n                    setOpen(false);\n                  }}\n                >\n                  {preset.label}\n                </Button>\n              ))}\n            </div>\n          )}\n          <Calendar\n            mode=\"range\"\n            locale={locale}\n            autoFocus\n            numberOfMonths={numberOfMonths}\n            selected={value ?? undefined}\n            defaultMonth={value?.from ?? undefined}\n            disabled={buildDisabledMatchers(minDate, maxDate)}\n            onSelect={(range) => onValueChange(range ?? null)}\n          />\n        </PopoverContent>\n      </Popover>\n\n      {showClear && (\n        // Cùng hình dạng với nút xóa của `DatePicker`: ô 24px ở `right-2`. Là `<Button>` thật nên\n        // có viền focus và vùng bấm đạt 24px — bản `<button>` thô trước đây chỉ 18px.\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute right-2 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n          onClick={() => onValueChange(null)}\n        >\n          <X aria-hidden=\"true\" className=\"size-3.5\" />\n          <span className=\"sr-only\">{text.clearRange}</span>\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/composite/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { format as formatDate, isAfter, isBefore, isValid, type Locale, parse, startOfDay } from \"date-fns\";\nimport { CalendarDays, X } from \"lucide-react\";\nimport { useEffect, useState } from \"react\";\nimport type { DateRange, Matcher } from \"react-day-picker\";\nimport { useComitorLabels, useComitorLocale } from \"../../i18n/locale-provider.js\";\nimport type { DatePresetMessages } from \"../../i18n/namespaces/date-picker.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Calendar } from \"../ui/calendar.js\";\nimport { Input } from \"../ui/input.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover.js\";\nimport {\n  type DatePickerLabels,\n  type DatePreset,\n  type DateRangePreset,\n  DEFAULT_DATE_PRESETS,\n  DEFAULT_DATE_RANGE_PRESETS,\n  dateFormatForLocale\n} from \"./date-picker-constants.js\";\n\nexport type { DateRange };\n\n/** `id` của preset mặc định → khoá nhãn trong namespace `datePicker.presets`. */\nconst PRESET_MESSAGE_KEY_BY_ID = {\n  today: \"today\",\n  yesterday: \"yesterday\",\n  \"week-ago\": \"weekAgo\",\n  \"last-7\": \"last7Days\",\n  \"last-30\": \"last30Days\",\n  \"this-month\": \"thisMonth\",\n  \"last-month\": \"lastMonth\"\n} satisfies Record<string, keyof DatePresetMessages>;\n\n/**\n * CHÍNH các object preset của gói → khoá nhãn của chúng. Nhận ra bằng THAM CHIẾU, không bằng `id`:\n *   · preset app tự dựng hiện đúng `label` app đưa, kể cả khi trùng `id` (\"today\") với mặc định;\n *   · app truyền lại object của gói — `presets={DEFAULT_DATE_PRESETS}` (cách DUY NHẤT để\n *     `DatePicker` có preset), hay một mảng `.filter()` từ đó — thì nhãn vẫn theo provider thay vì\n *     kẹt ở `label` tiếng Anh của hằng.\n */\nconst DEFAULT_PRESET_MESSAGE_KEYS = new Map<DatePreset | DateRangePreset, keyof DatePresetMessages>(\n  [...DEFAULT_DATE_PRESETS, ...DEFAULT_DATE_RANGE_PRESETS].flatMap((preset) => {\n    const key = PRESET_MESSAGE_KEY_BY_ID[preset.id as keyof typeof PRESET_MESSAGE_KEY_BY_ID];\n    return key ? [[preset, key] as const] : [];\n  })\n);\n\n/** Nhãn hiện ra của một preset: preset của gói theo provider, preset của app nguyên văn. */\nfunction presetLabel(preset: DatePreset | DateRangePreset, messages: DatePresetMessages): string {\n  const key = DEFAULT_PRESET_MESSAGE_KEYS.get(preset);\n  return key ? messages[key] : preset.label;\n}\n\nfunction isOutOfRange(date: Date, minDate?: Date, maxDate?: Date): boolean {\n  if (minDate && isBefore(date, startOfDay(minDate))) return true;\n  if (maxDate && isAfter(date, startOfDay(maxDate))) return true;\n  return false;\n}\n\n/**\n * Chặn ngày ngoài khoảng cho phép — trả về MẢNG matcher, không phải một object.\n *\n * Cạm bẫy react-day-picker: `{ before, after }` trong CÙNG một object là `DateInterval`, nghĩa là\n * \"các ngày NẰM GIỮA\" — ngược hẳn ý định. Tách thành hai matcher riêng mới ra \"trước min HOẶC sau max\".\n */\nfunction buildDisabledMatchers(minDate?: Date, maxDate?: Date): Matcher[] | undefined {\n  const matchers: Matcher[] = [];\n  if (minDate) matchers.push({ before: startOfDay(minDate) });\n  if (maxDate) matchers.push({ after: startOfDay(maxDate) });\n  return matchers.length > 0 ? matchers : undefined;\n}\n\nexport interface DatePickerProps {\n  value?: Date | null;\n  onValueChange: (value: Date | null) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Ngày nhỏ nhất / lớn nhất được chọn */\n  minDate?: Date;\n  maxDate?: Date;\n  /** Hiện nút xoá khi đã có giá trị (mặc định true) */\n  clearable?: boolean;\n  /**\n   * Cột preset bên trái lịch (mặc định ẩn). `DEFAULT_DATE_PRESETS` hiện nhãn theo\n   * `ComitorLocaleProvider`; preset app tự dựng hiện nguyên `label`.\n   */\n  presets?: DatePreset[] | false;\n  /**\n   * Ngôn ngữ của date-fns — quyết định tên thứ/tháng trong lịch VÀ thứ tự ngày/tháng của ô nhập\n   * (gõ, hiển thị lẫn placeholder), qua `dateFormatForLocale()`.\n   *\n   * Không truyền thì theo `ComitorLocaleProvider` (`vi` → `dd/MM/yyyy`, còn lại `enUS` →\n   * `MM/dd/yyyy`). Trước `3.0.0` mặc định cứng là `vi`, nên app tiếng Anh phải nhớ truyền.\n   */\n  locale?: Locale;\n  /**\n   * Ghi đè định dạng gõ/hiển thị. HIẾM khi cần: bỏ trống thì nó suy từ `locale`, và đó gần như\n   * luôn là thứ đúng. Chỉ dùng khi một màn hình phải ghim cứng một định dạng bất kể ngôn ngữ.\n   */\n  dateFormat?: string;\n  /** Đè nhãn `sr-only` — không truyền thì theo namespace `datePicker` của `ComitorLocaleProvider` */\n  labels?: Partial<DatePickerLabels>;\n  className?: string;\n  id?: string;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n  \"aria-required\"?: true;\n}\n\n/**\n * Ô chọn ngày: gõ tay theo định dạng của `locale` (`dd/MM/yyyy`, `MM/dd/yyyy`…) HOẶC bấm lịch.\n *\n * Vì sao vẫn giữ ô gõ tay thay vì chỉ có nút mở lịch: người nhập liệu chuyên nghiệp (kế toán,\n * nhân sự) gõ nhanh hơn bấm nhiều lần, và ngày sinh năm 1975 mà bắt lật lịch 50 năm thì không\n * ai chịu nổi. Chuỗi gõ dở KHÔNG bị ghi đè trong lúc gõ; sai định dạng thì trả về giá trị cũ\n * khi rời ô, không âm thầm nuốt dữ liệu.\n */\nexport function DatePicker({\n  value,\n  onValueChange,\n  placeholder,\n  disabled = false,\n  minDate,\n  maxDate,\n  clearable = true,\n  presets = false,\n  locale: localeProp,\n  dateFormat,\n  labels,\n  className,\n  id,\n  name,\n  ...aria\n}: DatePickerProps) {\n  const { dateFnsLocale } = useComitorLocale();\n  const locale = localeProp ?? dateFnsLocale;\n  const pattern = dateFormat ?? dateFormatForLocale(locale);\n  const label = useComitorLabels(\"datePicker\", labels);\n\n  const [open, setOpen] = useState(false);\n  const [text, setText] = useState(() => (value ? formatDate(value, pattern, { locale }) : \"\"));\n\n  // Đồng bộ khi giá trị đổi từ bên ngoài (reset form, chọn preset, load dữ liệu về) — VÀ khi đổi\n  // ngôn ngữ giữa chừng: chuỗi đang hiện là `dd/MM/yyyy` mà ô nay chờ `MM/dd/yyyy` thì lần rời ô\n  // kế tiếp sẽ đọc sai ngày.\n  useEffect(() => {\n    setText(value ? formatDate(value, pattern, { locale }) : \"\");\n  }, [value, pattern, locale]);\n\n  const commitText = (raw: string) => {\n    const trimmed = raw.trim();\n    if (trimmed === \"\") {\n      onValueChange(null);\n      return;\n    }\n    const parsed = parse(trimmed, pattern, new Date(), { locale });\n    if (!isValid(parsed) || isOutOfRange(parsed, minDate, maxDate)) {\n      // Không hợp lệ → khôi phục hiển thị theo giá trị đang có (không đổi dữ liệu).\n      setText(value ? formatDate(value, pattern, { locale }) : \"\");\n      return;\n    }\n    onValueChange(startOfDay(parsed));\n  };\n\n  const presetList = presets === false ? [] : presets;\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <Input\n        id={id}\n        name={name}\n        value={text}\n        disabled={disabled}\n        placeholder={placeholder ?? pattern}\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        onChange={(event) => setText(event.target.value)}\n        onBlur={(event) => commitText(event.target.value)}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\") {\n            event.preventDefault();\n            commitText(text);\n          }\n        }}\n        className=\"pr-16\"\n        {...aria}\n      />\n\n      {/* Nút `size-6`: glyph 16px nằm giữa ô 24px nên nó thụt thêm 4px so với mép ô — cộng với\n          `pr-2` của hàng là glyph rơi đúng mốc 12px của `Select`/`Combobox`. Ba loại control này\n          hay đứng chung một cột biểu mẫu, lệch vài px là mép phải nhìn răng cưa.\n\n          `border border-transparent`: hàng nằm ngoài `Input` nên đo từ mép BORDER, còn icon nằm\n          trong ô thì đo từ mép CONTENT — mượn lại viền 1px là hai mốc trùng nhau.\n\n          Icon lấy `text-muted-foreground`: `Button variant=\"ghost\"` mặc định là `text-foreground`,\n          đậm hơn hẳn chevron của `Select` (vốn `text-muted-foreground`). Chúng là cùng một hạng\n          trang trí của ô nhập thì phải cùng một sắc. */}\n      {/* `pointer-events-none` ở hàng, `pointer-events-auto` ở từng nút: phần đệm của hàng phủ lên\n          dải sát mép phải của ô nhập, để nguyên là bấm vào đó không đặt được con trỏ vào ô. */}\n      <div className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center border border-transparent pr-2\">\n        {clearable && value && !disabled && (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            className=\"pointer-events-auto size-6 text-muted-foreground hover:text-foreground\"\n            onClick={() => onValueChange(null)}\n          >\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">{label.clear}</span>\n          </Button>\n        )}\n        <Popover open={open} onOpenChange={setOpen}>\n          <PopoverTrigger asChild>\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              className=\"pointer-events-auto size-6 text-muted-foreground hover:text-foreground\"\n              disabled={disabled}\n            >\n              <CalendarDays aria-hidden=\"true\" className=\"size-4\" />\n              <span className=\"sr-only\">{label.openCalendar}</span>\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent align=\"end\" className=\"flex w-auto gap-2 p-2\">\n            {presetList.length > 0 && (\n              <div className=\"flex w-32 flex-col gap-1 border-r border-border pr-2\">\n                {presetList.map((preset) => (\n                  <Button\n                    key={preset.id}\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"justify-start\"\n                    onClick={() => {\n                      onValueChange(preset.getValue());\n                      setOpen(false);\n                    }}\n                  >\n                    {presetLabel(preset, label.presets)}\n                  </Button>\n                ))}\n              </div>\n            )}\n            <Calendar\n              mode=\"single\"\n              locale={locale}\n              autoFocus\n              selected={value ?? undefined}\n              defaultMonth={value ?? undefined}\n              disabled={buildDisabledMatchers(minDate, maxDate)}\n              onSelect={(date) => {\n                onValueChange(date ? startOfDay(date) : null);\n                setOpen(false);\n              }}\n            />\n          </PopoverContent>\n        </Popover>\n      </div>\n    </div>\n  );\n}\n\nexport interface DateRangePickerProps {\n  value?: DateRange | null;\n  onValueChange: (value: DateRange | null) => void;\n  /** Chữ khi chưa chọn — không truyền thì theo khoá `rangePlaceholder` của namespace `datePicker` */\n  placeholder?: string;\n  disabled?: boolean;\n  minDate?: Date;\n  maxDate?: Date;\n  clearable?: boolean;\n  /**\n   * Cột preset bên trái (mặc định `DEFAULT_DATE_RANGE_PRESETS`, nhãn theo `ComitorLocaleProvider`;\n   * `false` để tắt). Preset app tự dựng hiện nguyên `label`.\n   */\n  presets?: DateRangePreset[] | false;\n  /** Số tháng hiện cùng lúc (mặc định 2 trên màn rộng) */\n  numberOfMonths?: number;\n  /** Ngôn ngữ date-fns (mặc định theo `ComitorLocaleProvider`) — xem `DatePickerProps.locale`. */\n  locale?: Locale;\n  /** Ghi đè định dạng ngày; bỏ trống thì suy từ `locale`. */\n  dateFormat?: string;\n  /** Đè nhãn `sr-only` — không truyền thì theo namespace `datePicker` của `ComitorLocaleProvider` */\n  labels?: Partial<DatePickerLabels>;\n  className?: string;\n  id?: string;\n  \"aria-label\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n}\n\nfunction formatRange(range: DateRange | null | undefined, pattern: string, locale: Locale): string | null {\n  if (!range?.from) return null;\n  const from = formatDate(range.from, pattern, { locale });\n  if (!range.to) return from;\n  return `${from} – ${formatDate(range.to, pattern, { locale })}`;\n}\n\n/**\n * Ô chọn khoảng ngày cho báo cáo và bộ lọc danh sách: cột preset + lịch 2 tháng.\n *\n * Preset đứng trước lịch vì 9/10 lần người dùng muốn \"7 ngày qua\" chứ không phải một khoảng\n * tuỳ ý — bắt họ bấm hai lần trên lịch mỗi lần xem báo cáo là thuế lặp lại vô ích.\n */\nexport function DateRangePicker({\n  value,\n  onValueChange,\n  placeholder: placeholderProp,\n  disabled = false,\n  minDate,\n  maxDate,\n  clearable = true,\n  presets = DEFAULT_DATE_RANGE_PRESETS,\n  numberOfMonths = 2,\n  locale: localeProp,\n  dateFormat,\n  labels,\n  className,\n  id,\n  ...aria\n}: DateRangePickerProps) {\n  const { dateFnsLocale } = useComitorLocale();\n  const locale = localeProp ?? dateFnsLocale;\n  const pattern = dateFormat ?? dateFormatForLocale(locale);\n  const text = useComitorLabels(\"datePicker\", labels);\n  const placeholder = placeholderProp ?? text.rangePlaceholder;\n\n  const [open, setOpen] = useState(false);\n  const label = formatRange(value, pattern, locale);\n  const presetList = presets === false ? [] : presets;\n\n  const showClear = clearable && Boolean(label) && !disabled;\n\n  return (\n    /* Nút xóa nằm NGOÀI trigger (anh em), không lồng trong <button> — vừa hợp lệ về HTML vừa\n       đến được bằng phím Tab. */\n    <div className=\"relative w-full\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            type=\"button\"\n            id={id}\n            variant=\"outline\"\n            disabled={disabled}\n            className={cn(\n              // `px-3` chứ không phải `px-4` của `Button`: đây là một Ô NHẬP nằm cùng cột với\n              // `Input`/`Select`/`Combobox`, và cả ba đều thụt 12px. `pr-10` = 12 + 24 (nút xóa)\n              // + 4, chỉ cần khi nút xóa có mặt.\n              \"w-full justify-start gap-2 px-3 font-normal\",\n              !label && \"text-muted-foreground\",\n              showClear && \"pr-10\",\n              className\n            )}\n            {...aria}\n          >\n            <CalendarDays aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n            <span className=\"truncate\">{label ?? placeholder}</span>\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className=\"flex w-auto flex-col gap-2 p-2 sm:flex-row\">\n          {presetList.length > 0 && (\n            <div className=\"flex flex-row flex-wrap gap-1 sm:w-36 sm:flex-col sm:border-r sm:border-border sm:pr-2\">\n              {presetList.map((preset) => (\n                <Button\n                  key={preset.id}\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start\"\n                  onClick={() => {\n                    onValueChange(preset.getValue());\n                    setOpen(false);\n                  }}\n                >\n                  {presetLabel(preset, text.presets)}\n                </Button>\n              ))}\n            </div>\n          )}\n          <Calendar\n            mode=\"range\"\n            locale={locale}\n            autoFocus\n            numberOfMonths={numberOfMonths}\n            selected={value ?? undefined}\n            defaultMonth={value?.from ?? undefined}\n            disabled={buildDisabledMatchers(minDate, maxDate)}\n            onSelect={(range) => onValueChange(range ?? null)}\n          />\n        </PopoverContent>\n      </Popover>\n\n      {showClear && (\n        // Cùng hình dạng với nút xóa của `DatePicker`: ô 24px ở `right-2`. Là `<Button>` thật nên\n        // có viền focus và vùng bấm đạt 24px — bản `<button>` thô trước đây chỉ 18px.\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute right-2 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground\"\n          onClick={() => onValueChange(null)}\n        >\n          <X aria-hidden=\"true\" className=\"size-3.5\" />\n          <span className=\"sr-only\">{text.clearRange}</span>\n        </Button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/composite/filter-chips.d.ts

@@ -19,11 +19,12 @@ interface FilterChipsProps<T extends string = string> {
     onValueChange: (value: T[] | T | null) => void;
     /** Cho chọn nhiều chip cùng lúc (mặc định false) */
     multiple?: boolean;
-    /** Thêm chip "Tất cả" ở đầu để bỏ mọi lựa chọn */
+    /** Thêm chip "tất cả" ở đầu để bỏ mọi lựa chọn */
     showAll?: boolean;
+    /** Chữ của chip "tất cả" (khoá `allLabel` của namespace `filterChips`, mặc định tiếng Anh) */
     allLabel?: string;
     allCount?: number;
-    /** Nhãn nhóm cho trình đọc màn hình */
+    /** Nhãn nhóm cho trình đọc màn hình (khoá `label` của namespace `filterChips`) */
     label?: string;
     className?: string;
 }
@@ -34,6 +35,6 @@ interface FilterChipsProps<T extends string = string> {
  * theo kiểu tab, nó bật/tắt điều kiện lọc. Đặt nhầm role sẽ khiến trình đọc màn hình hứa hẹn
  * một panel không tồn tại.
  */
-declare function FilterChips<T extends string = string>({ items, value, onValueChange, multiple, showAll, allLabel, allCount, label, className }: FilterChipsProps<T>): React.JSX.Element;
+declare function FilterChips<T extends string = string>({ items, value, onValueChange, multiple, showAll, allLabel: allLabelProp, allCount, label: labelProp, className }: FilterChipsProps<T>): React.JSX.Element;
 
 export { type FilterChipItem, FilterChips, type FilterChipsProps };

package/dist/components/composite/filter-chips.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 function toArray(value) {
   if (value == null) return [];
@@ -11,11 +12,14 @@ function FilterChips({
   onValueChange,
   multiple = false,
   showAll = false,
-  allLabel = "T\u1EA5t c\u1EA3",
+  allLabel: allLabelProp,
   allCount,
-  label = "B\u1ED9 l\u1ECDc nhanh",
+  label: labelProp,
   className
 }) {
+  const t = useComitorMessages("filterChips");
+  const allLabel = allLabelProp ?? t.allLabel;
+  const label = labelProp ?? t.label;
   const selected = toArray(value);
   const noneSelected = selected.length === 0;
   const toggle = (item) => {

package/dist/components/composite/filter-chips.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/filter-chips.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../../lib/cn.js\";\nimport type { IconComponent } from \"./empty-state.js\";\nimport type { StatusTone } from \"./status-config.js\";\n\nexport interface FilterChipItem<T extends string = string> {\n  value: T;\n  label: string;\n  /** Số bản ghi thuộc nhóm này — hiện đậm trước nhãn */\n  count?: number;\n  icon?: IconComponent;\n  /** Tone khi chip đang bật (mặc định tone app-accent) */\n  tone?: StatusTone;\n  disabled?: boolean;\n}\n\nexport interface FilterChipsProps<T extends string = string> {\n  items: FilterChipItem<T>[];\n  /** Giá trị đang chọn — mảng (đa chọn) hoặc một giá trị/null (đơn chọn) */\n  value: T[] | T | null;\n  onValueChange: (value: T[] | T | null) => void;\n  /** Cho chọn nhiều chip cùng lúc (mặc định false) */\n  multiple?: boolean;\n  /** Thêm chip \"Tất cả\" ở đầu để bỏ mọi lựa chọn */\n  showAll?: boolean;\n  allLabel?: string;\n  allCount?: number;\n  /** Nhãn nhóm cho trình đọc màn hình */\n  label?: string;\n  className?: string;\n}\n\nfunction toArray<T extends string>(value: T[] | T | null): T[] {\n  if (value == null) return [];\n  return Array.isArray(value) ? value : [value];\n}\n\n/**\n * Dãy chip lọc bật/tắt kèm số đếm — kiểu Linear/Lark, dùng cho trạng thái, nhãn, mức ưu tiên.\n *\n * Dùng `aria-pressed` trên `<button>` thay vì `role=\"tab\"`: chip lọc không đổi vùng nội dung\n * theo kiểu tab, nó bật/tắt điều kiện lọc. Đặt nhầm role sẽ khiến trình đọc màn hình hứa hẹn\n * một panel không tồn tại.\n */\nexport function FilterChips<T extends string = string>({\n  items,\n  value,\n  onValueChange,\n  multiple = false,\n  showAll = false,\n  allLabel = \"Tất cả\",\n  allCount,\n  label = \"Bộ lọc nhanh\",\n  className\n}: FilterChipsProps<T>) {\n  const selected = toArray(value);\n  const noneSelected = selected.length === 0;\n\n  const toggle = (item: FilterChipItem<T>) => {\n    if (item.disabled) return;\n    if (!multiple) {\n      onValueChange(selected.includes(item.value) ? null : item.value);\n      return;\n    }\n    onValueChange(\n      selected.includes(item.value) ? selected.filter((current) => current !== item.value) : [...selected, item.value]\n    );\n  };\n\n  /*\n   * Chip lọc là CONTROL (nút bật/tắt có `aria-pressed`), nên ranh giới của nó chịu ngưỡng 3:1 của\n   * WCAG 1.4.11 — và ở đây VIỀN là thứ duy nhất khoanh vùng được: ruột `bg-card` trùng đúng nền\n   * trang ở light (#FFFFFF ⇄ #FFFFFF) và chỉ lệch 1,10:1 ở dark.\n   *\n   *   chip TẮT     `border-border` (bậc TRANG TRÍ)  1,16:1 (L) · 1,10:1 (D) ✗\n   *                → `border-control-edge`          3,83:1 (L) · 4,64:1 (D) ✓\n   *                  (vẫn 3,50:1 · 4,21:1 khi hover đổi ruột sang `bg-accent`)\n   *   chip BẬT + tone  `border-transparent` để biên rơi về chính tint: 1,07–1,24:1 (L) ·\n   *                1,11–1,56:1 (D) ✗ — tệ hơn: chip ĐANG BẬT trông mờ hơn chip đang tắt.\n   *                → `tone.borderColor` (bậc ink)   5,23–7,15:1 (L) · 5,70–12,67:1 (D) ✓\n   *   chip BẬT mặc định  ruột `bg-app-accent` ĐẶC vẫn chỉ 1,86:1 với nền trắng (gold trên trắng —\n   *                đúng cái bẫy của hợp đồng §5), nên nền đặc KHÔNG tự khoanh được vùng ở light.\n   *                → thêm `border-app-accent-ink`   6,51:1 (L) · 12,67:1 (D) so với nền trang.\n   *                Ở dark `--app-accent-ink` = chính `--app-accent` nên viền trùng ruột, hình\n   *                không đổi — đúng ý, vì ở dark ruột đã tự nổi 12,67:1.\n   *\n   * `StatusTone.borderColor` là trường TUỲ CHỌN nên tone do app truyền vào có thể thiếu → lui về\n   * `border-control-edge`, tuyệt đối không lui về `border-transparent`.\n   *\n   * `opacity-50` ở đây KHÔNG cần đạt ngưỡng: `disabled` là thuộc tính thật của <button>, chip tắt\n   * rời khỏi tab order và không gọi handler (`pointer-events-none`) — WCAG loại trừ control vô\n   * hiệu. Đây là chỗ khác hẳn ô app \"khoá\" của AppLauncher hay mục sidebar còn `tabIndex=0`.\n   */\n  const chipClass = (active: boolean, tone?: StatusTone) =>\n    cn(\n      \"inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm font-medium transition-colors duration-150 ease-out\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      active\n        ? tone\n          ? cn(tone.borderColor ?? \"border-control-edge\", tone.bgColor, tone.textColor)\n          : // Tô ĐẶC chứ không phải nền vàng 15%: chữ gold trên nền gold nhạt chỉ đạt 1,75:1,\n            // dưới chuẩn AA. Nền đặc + `app-accent-foreground` (mực) đọc được ở cả hai theme\n            // (10,19:1 L · 12,67:1 D), còn viền lo phần ranh giới.\n            \"border-app-accent-ink bg-app-accent text-app-accent-foreground\"\n        : \"border-control-edge bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n    );\n\n  return (\n    <div data-slot=\"filter-chips\" role=\"group\" aria-label={label} className={cn(\"flex flex-wrap gap-2\", className)}>\n      {showAll && (\n        <button\n          type=\"button\"\n          aria-pressed={noneSelected}\n          onClick={() => onValueChange(multiple ? [] : null)}\n          className={chipClass(noneSelected)}\n        >\n          {allCount !== undefined && <span className=\"font-semibold tabular-nums\">{allCount}</span>}\n          {allLabel}\n        </button>\n      )}\n\n      {items.map((item) => {\n        const active = selected.includes(item.value);\n        const Icon = item.icon;\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            aria-pressed={active}\n            disabled={item.disabled}\n            onClick={() => toggle(item)}\n            className={chipClass(active, item.tone)}\n          >\n            {Icon && <Icon aria-hidden=\"true\" className=\"size-3.5\" />}\n            {item.count !== undefined && <span className=\"font-semibold tabular-nums\">{item.count}</span>}\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AA+GQ,SAM6B,KAN7B;AA7GR,SAAS,UAAU;AA+BnB,SAAS,QAA0B,OAA4B;AAC7D,MAAI,SAAS,KAAM,QAAO,CAAC;AAC3B,SAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAC9C;AASO,SAAS,YAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA,QAAQ;AAAA,EACR;AACF,GAAwB;AACtB,QAAM,WAAW,QAAQ,KAAK;AAC9B,QAAM,eAAe,SAAS,WAAW;AAEzC,QAAM,SAAS,CAAC,SAA4B;AAC1C,QAAI,KAAK,SAAU;AACnB,QAAI,CAAC,UAAU;AACb,oBAAc,SAAS,SAAS,KAAK,KAAK,IAAI,OAAO,KAAK,KAAK;AAC/D;AAAA,IACF;AACA;AAAA,MACE,SAAS,SAAS,KAAK,KAAK,IAAI,SAAS,OAAO,CAAC,YAAY,YAAY,KAAK,KAAK,IAAI,CAAC,GAAG,UAAU,KAAK,KAAK;AAAA,IACjH;AAAA,EACF;AA0BA,QAAM,YAAY,CAAC,QAAiB,SAClC;AAAA,IACE;AAAA,IACA;AAAA,IACA,SACI,OACE,GAAG,KAAK,eAAe,uBAAuB,KAAK,SAAS,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,MAI1E;AAAA,QACF;AAAA,EACN;AAEF,SACE,qBAAC,SAAI,aAAU,gBAAe,MAAK,SAAQ,cAAY,OAAO,WAAW,GAAG,wBAAwB,SAAS,GAC1G;AAAA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS,MAAM,cAAc,WAAW,CAAC,IAAI,IAAI;AAAA,QACjD,WAAW,UAAU,YAAY;AAAA,QAEhC;AAAA,uBAAa,UAAa,oBAAC,UAAK,WAAU,8BAA8B,oBAAS;AAAA,UACjF;AAAA;AAAA;AAAA,IACH;AAAA,IAGD,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,SAAS,SAAS,SAAS,KAAK,KAAK;AAC3C,YAAM,OAAO,KAAK;AAClB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,UAAU,KAAK;AAAA,UACf,SAAS,MAAM,OAAO,IAAI;AAAA,UAC1B,WAAW,UAAU,QAAQ,KAAK,IAAI;AAAA,UAErC;AAAA,oBAAQ,oBAAC,QAAK,eAAY,QAAO,WAAU,YAAW;AAAA,YACtD,KAAK,UAAU,UAAa,oBAAC,UAAK,WAAU,8BAA8B,eAAK,OAAM;AAAA,YACrF,KAAK;AAAA;AAAA;AAAA,QATD,KAAK;AAAA,MAUZ;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/filter-chips.tsx"],"sourcesContent":["\"use client\";\n\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport type { IconComponent } from \"./empty-state.js\";\nimport type { StatusTone } from \"./status-config.js\";\n\nexport interface FilterChipItem<T extends string = string> {\n  value: T;\n  label: string;\n  /** Số bản ghi thuộc nhóm này — hiện đậm trước nhãn */\n  count?: number;\n  icon?: IconComponent;\n  /** Tone khi chip đang bật (mặc định tone app-accent) */\n  tone?: StatusTone;\n  disabled?: boolean;\n}\n\nexport interface FilterChipsProps<T extends string = string> {\n  items: FilterChipItem<T>[];\n  /** Giá trị đang chọn — mảng (đa chọn) hoặc một giá trị/null (đơn chọn) */\n  value: T[] | T | null;\n  onValueChange: (value: T[] | T | null) => void;\n  /** Cho chọn nhiều chip cùng lúc (mặc định false) */\n  multiple?: boolean;\n  /** Thêm chip \"tất cả\" ở đầu để bỏ mọi lựa chọn */\n  showAll?: boolean;\n  /** Chữ của chip \"tất cả\" (khoá `allLabel` của namespace `filterChips`, mặc định tiếng Anh) */\n  allLabel?: string;\n  allCount?: number;\n  /** Nhãn nhóm cho trình đọc màn hình (khoá `label` của namespace `filterChips`) */\n  label?: string;\n  className?: string;\n}\n\nfunction toArray<T extends string>(value: T[] | T | null): T[] {\n  if (value == null) return [];\n  return Array.isArray(value) ? value : [value];\n}\n\n/**\n * Dãy chip lọc bật/tắt kèm số đếm — kiểu Linear/Lark, dùng cho trạng thái, nhãn, mức ưu tiên.\n *\n * Dùng `aria-pressed` trên `<button>` thay vì `role=\"tab\"`: chip lọc không đổi vùng nội dung\n * theo kiểu tab, nó bật/tắt điều kiện lọc. Đặt nhầm role sẽ khiến trình đọc màn hình hứa hẹn\n * một panel không tồn tại.\n */\nexport function FilterChips<T extends string = string>({\n  items,\n  value,\n  onValueChange,\n  multiple = false,\n  showAll = false,\n  allLabel: allLabelProp,\n  allCount,\n  label: labelProp,\n  className\n}: FilterChipsProps<T>) {\n  const t = useComitorMessages(\"filterChips\");\n  const allLabel = allLabelProp ?? t.allLabel;\n  const label = labelProp ?? t.label;\n  const selected = toArray(value);\n  const noneSelected = selected.length === 0;\n\n  const toggle = (item: FilterChipItem<T>) => {\n    if (item.disabled) return;\n    if (!multiple) {\n      onValueChange(selected.includes(item.value) ? null : item.value);\n      return;\n    }\n    onValueChange(\n      selected.includes(item.value) ? selected.filter((current) => current !== item.value) : [...selected, item.value]\n    );\n  };\n\n  /*\n   * Chip lọc là CONTROL (nút bật/tắt có `aria-pressed`), nên ranh giới của nó chịu ngưỡng 3:1 của\n   * WCAG 1.4.11 — và ở đây VIỀN là thứ duy nhất khoanh vùng được: ruột `bg-card` trùng đúng nền\n   * trang ở light (#FFFFFF ⇄ #FFFFFF) và chỉ lệch 1,10:1 ở dark.\n   *\n   *   chip TẮT     `border-border` (bậc TRANG TRÍ)  1,16:1 (L) · 1,10:1 (D) ✗\n   *                → `border-control-edge`          3,83:1 (L) · 4,64:1 (D) ✓\n   *                  (vẫn 3,50:1 · 4,21:1 khi hover đổi ruột sang `bg-accent`)\n   *   chip BẬT + tone  `border-transparent` để biên rơi về chính tint: 1,07–1,24:1 (L) ·\n   *                1,11–1,56:1 (D) ✗ — tệ hơn: chip ĐANG BẬT trông mờ hơn chip đang tắt.\n   *                → `tone.borderColor` (bậc ink)   5,23–7,15:1 (L) · 5,70–12,67:1 (D) ✓\n   *   chip BẬT mặc định  ruột `bg-app-accent` ĐẶC vẫn chỉ 1,86:1 với nền trắng (gold trên trắng —\n   *                đúng cái bẫy của hợp đồng §5), nên nền đặc KHÔNG tự khoanh được vùng ở light.\n   *                → thêm `border-app-accent-ink`   6,51:1 (L) · 12,67:1 (D) so với nền trang.\n   *                Ở dark `--app-accent-ink` = chính `--app-accent` nên viền trùng ruột, hình\n   *                không đổi — đúng ý, vì ở dark ruột đã tự nổi 12,67:1.\n   *\n   * `StatusTone.borderColor` là trường TUỲ CHỌN nên tone do app truyền vào có thể thiếu → lui về\n   * `border-control-edge`, tuyệt đối không lui về `border-transparent`.\n   *\n   * `opacity-50` ở đây KHÔNG cần đạt ngưỡng: `disabled` là thuộc tính thật của <button>, chip tắt\n   * rời khỏi tab order và không gọi handler (`pointer-events-none`) — WCAG loại trừ control vô\n   * hiệu. Đây là chỗ khác hẳn ô app \"khoá\" của AppLauncher hay mục sidebar còn `tabIndex=0`.\n   */\n  const chipClass = (active: boolean, tone?: StatusTone) =>\n    cn(\n      \"inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-sm font-medium transition-colors duration-150 ease-out\",\n      \"disabled:pointer-events-none disabled:opacity-50\",\n      active\n        ? tone\n          ? cn(tone.borderColor ?? \"border-control-edge\", tone.bgColor, tone.textColor)\n          : // Tô ĐẶC chứ không phải nền vàng 15%: chữ gold trên nền gold nhạt chỉ đạt 1,75:1,\n            // dưới chuẩn AA. Nền đặc + `app-accent-foreground` (mực) đọc được ở cả hai theme\n            // (10,19:1 L · 12,67:1 D), còn viền lo phần ranh giới.\n            \"border-app-accent-ink bg-app-accent text-app-accent-foreground\"\n        : \"border-control-edge bg-card text-muted-foreground hover:bg-accent hover:text-accent-foreground\"\n    );\n\n  return (\n    <div data-slot=\"filter-chips\" role=\"group\" aria-label={label} className={cn(\"flex flex-wrap gap-2\", className)}>\n      {showAll && (\n        <button\n          type=\"button\"\n          aria-pressed={noneSelected}\n          onClick={() => onValueChange(multiple ? [] : null)}\n          className={chipClass(noneSelected)}\n        >\n          {allCount !== undefined && <span className=\"font-semibold tabular-nums\">{allCount}</span>}\n          {allLabel}\n        </button>\n      )}\n\n      {items.map((item) => {\n        const active = selected.includes(item.value);\n        const Icon = item.icon;\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            aria-pressed={active}\n            disabled={item.disabled}\n            onClick={() => toggle(item)}\n            className={chipClass(active, item.tone)}\n          >\n            {Icon && <Icon aria-hidden=\"true\" className=\"size-3.5\" />}\n            {item.count !== undefined && <span className=\"font-semibold tabular-nums\">{item.count}</span>}\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";AAoHQ,SAM6B,KAN7B;AAlHR,SAAS,0BAA0B;AACnC,SAAS,UAAU;AAgCnB,SAAS,QAA0B,OAA4B;AAC7D,MAAI,SAAS,KAAM,QAAO,CAAC;AAC3B,SAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAC9C;AASO,SAAS,YAAuC;AAAA,EACrD;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAwB;AACtB,QAAM,IAAI,mBAAmB,aAAa;AAC1C,QAAM,WAAW,gBAAgB,EAAE;AACnC,QAAM,QAAQ,aAAa,EAAE;AAC7B,QAAM,WAAW,QAAQ,KAAK;AAC9B,QAAM,eAAe,SAAS,WAAW;AAEzC,QAAM,SAAS,CAAC,SAA4B;AAC1C,QAAI,KAAK,SAAU;AACnB,QAAI,CAAC,UAAU;AACb,oBAAc,SAAS,SAAS,KAAK,KAAK,IAAI,OAAO,KAAK,KAAK;AAC/D;AAAA,IACF;AACA;AAAA,MACE,SAAS,SAAS,KAAK,KAAK,IAAI,SAAS,OAAO,CAAC,YAAY,YAAY,KAAK,KAAK,IAAI,CAAC,GAAG,UAAU,KAAK,KAAK;AAAA,IACjH;AAAA,EACF;AA0BA,QAAM,YAAY,CAAC,QAAiB,SAClC;AAAA,IACE;AAAA,IACA;AAAA,IACA,SACI,OACE,GAAG,KAAK,eAAe,uBAAuB,KAAK,SAAS,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA,MAI1E;AAAA,QACF;AAAA,EACN;AAEF,SACE,qBAAC,SAAI,aAAU,gBAAe,MAAK,SAAQ,cAAY,OAAO,WAAW,GAAG,wBAAwB,SAAS,GAC1G;AAAA,eACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,gBAAc;AAAA,QACd,SAAS,MAAM,cAAc,WAAW,CAAC,IAAI,IAAI;AAAA,QACjD,WAAW,UAAU,YAAY;AAAA,QAEhC;AAAA,uBAAa,UAAa,oBAAC,UAAK,WAAU,8BAA8B,oBAAS;AAAA,UACjF;AAAA;AAAA;AAAA,IACH;AAAA,IAGD,MAAM,IAAI,CAAC,SAAS;AACnB,YAAM,SAAS,SAAS,SAAS,KAAK,KAAK;AAC3C,YAAM,OAAO,KAAK;AAClB,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,gBAAc;AAAA,UACd,UAAU,KAAK;AAAA,UACf,SAAS,MAAM,OAAO,IAAI;AAAA,UAC1B,WAAW,UAAU,QAAQ,KAAK,IAAI;AAAA,UAErC;AAAA,oBAAQ,oBAAC,QAAK,eAAY,QAAO,WAAU,YAAW;AAAA,YACtD,KAAK,UAAU,UAAa,oBAAC,UAAK,WAAU,8BAA8B,eAAK,OAAM;AAAA,YACrF,KAAK;AAAA;AAAA;AAAA,QATD,KAAK;AAAA,MAUZ;AAAA,IAEJ,CAAC;AAAA,KACH;AAEJ;","names":[]}

package/dist/components/composite/inline-edit.d.ts

@@ -8,6 +8,10 @@ interface InlineEditProps {
      * sửa khi lưu xong — thoát sớm sẽ nháy về giá trị cũ rồi mới nhảy sang giá trị mới.
      */
     onSave: (value: string) => void | Promise<void>;
+    /**
+     * Chữ hiện khi giá trị rỗng, kiêm placeholder của ô nhập (khoá `placeholder` của namespace
+     * `inlineEdit` — `ComitorLocaleProvider`, mặc định tiếng Anh).
+     */
     placeholder?: string;
     /** Ô nhập nhiều dòng (mô tả task) — Enter xuống dòng, Cmd/Ctrl+Enter mới lưu */
     multiline?: boolean;
@@ -17,9 +21,16 @@ interface InlineEditProps {
     required?: boolean;
     /** Rời ô là lưu (mặc định true, kiểu Linear) */
     saveOnBlur?: boolean;
-    /** Hiện cặp nút ✓/✕ khi đang sửa (mặc định false — thao tác bằng phím) */
+    /**
+     * Hiện cặp nút ✓/✕ khi đang sửa (mặc định false — thao tác bằng phím). Tên sr-only của hai nút
+     * lấy khoá `save` / `cancel` của namespace `inlineEdit`; không có prop rời — đè qua `messages`
+     * của `ComitorLocaleProvider`.
+     */
     showActions?: boolean;
-    /** Nhãn cho trình đọc màn hình, vd "Sửa tên công việc" */
+    /**
+     * Nhãn cho trình đọc màn hình, vd "Sửa tên công việc" (không truyền thì lấy khoá `ariaLabel` của
+     * namespace `inlineEdit`)
+     */
     ariaLabel?: string;
     onError?: (error: unknown) => void;
     className?: string;
@@ -33,6 +44,6 @@ interface InlineEditProps {
  * form khổng lồ và người dùng dễ sửa nhầm khi chỉ định bấm chọn. Hiển thị dạng chữ cho tới khi
  * người dùng thật sự muốn sửa là ranh giới an toàn.
  */
-declare function InlineEdit({ value, onSave, placeholder, multiline, maxLength, disabled, required, saveOnBlur, showActions, ariaLabel, onError, className, displayClassName }: InlineEditProps): React.JSX.Element;
+declare function InlineEdit({ value, onSave, placeholder: placeholderProp, multiline, maxLength, disabled, required, saveOnBlur, showActions, ariaLabel: ariaLabelProp, onError, className, displayClassName }: InlineEditProps): React.JSX.Element;
 
 export { InlineEdit, type InlineEditProps };

package/dist/components/composite/inline-edit.js

@@ -2,23 +2,27 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import { Button } from "../ui/button.js";
 function InlineEdit({
   value,
   onSave,
-  placeholder = "Nh\u1EA5n \u0111\u1EC3 nh\u1EADp\u2026",
+  placeholder: placeholderProp,
   multiline = false,
   maxLength,
   disabled = false,
   required = true,
   saveOnBlur = true,
   showActions = false,
-  ariaLabel = "S\u1EEDa t\u1EA1i ch\u1ED7",
+  ariaLabel: ariaLabelProp,
   onError,
   className,
   displayClassName
 }) {
+  const t = useComitorMessages("inlineEdit");
+  const placeholder = placeholderProp ?? t.placeholder;
+  const ariaLabel = ariaLabelProp ?? t.ariaLabel;
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState(value);
   const [saving, setSaving] = useState(false);
@@ -135,7 +139,7 @@ function InlineEdit({
           },
           children: [
             /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-3.5" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "L\u01B0u" })
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.save })
           ]
         }
       ),
@@ -152,7 +156,7 @@ function InlineEdit({
           },
           children: [
             /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "H\u1EE7y" })
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.cancel })
           ]
         }
       )

package/dist/components/composite/inline-edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/inline-edit.tsx"],"sourcesContent":["\"use client\";\n\nimport { Check, X } from \"lucide-react\";\nimport { type KeyboardEvent, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\n\nexport interface InlineEditProps {\n  /** Giá trị hiện tại (controlled từ phía dữ liệu) */\n  value: string;\n  /**\n   * Lưu giá trị mới. Trả Promise thì component hiện trạng thái đang lưu và chỉ thoát chế độ\n   * sửa khi lưu xong — thoát sớm sẽ nháy về giá trị cũ rồi mới nhảy sang giá trị mới.\n   */\n  onSave: (value: string) => void | Promise<void>;\n  placeholder?: string;\n  /** Ô nhập nhiều dòng (mô tả task) — Enter xuống dòng, Cmd/Ctrl+Enter mới lưu */\n  multiline?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n  /** Bắt buộc có nội dung: chuỗi rỗng bị coi là huỷ, không lưu (mặc định true) */\n  required?: boolean;\n  /** Rời ô là lưu (mặc định true, kiểu Linear) */\n  saveOnBlur?: boolean;\n  /** Hiện cặp nút ✓/✕ khi đang sửa (mặc định false — thao tác bằng phím) */\n  showActions?: boolean;\n  /** Nhãn cho trình đọc màn hình, vd \"Sửa tên công việc\" */\n  ariaLabel?: string;\n  onError?: (error: unknown) => void;\n  className?: string;\n  /** className riêng cho phần hiển thị (khi chưa sửa) — vd chỉnh cỡ chữ tiêu đề */\n  displayClassName?: string;\n}\n\n/**\n * Sửa tại chỗ kiểu Linear: bấm vào chữ → thành ô nhập → Enter lưu, Esc huỷ.\n *\n * Vì sao không dùng `<input>` luôn cho gọn: ô nhập luôn hiện làm danh sách trông như một cái\n * form khổng lồ và người dùng dễ sửa nhầm khi chỉ định bấm chọn. Hiển thị dạng chữ cho tới khi\n * người dùng thật sự muốn sửa là ranh giới an toàn.\n */\nexport function InlineEdit({\n  value,\n  onSave,\n  placeholder = \"Nhấn để nhập…\",\n  multiline = false,\n  maxLength,\n  disabled = false,\n  required = true,\n  saveOnBlur = true,\n  showActions = false,\n  ariaLabel = \"Sửa tại chỗ\",\n  onError,\n  className,\n  displayClassName\n}: InlineEditProps) {\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(value);\n  const [saving, setSaving] = useState(false);\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  // Giá trị đổi từ ngoài (người khác sửa qua realtime) — chỉ đồng bộ khi không sửa dở.\n  useEffect(() => {\n    if (!editing) setDraft(value);\n  }, [value, editing]);\n\n  useEffect(() => {\n    if (!editing) return;\n    const element = inputRef.current;\n    if (!element) return;\n    element.focus();\n    element.setSelectionRange(element.value.length, element.value.length);\n  }, [editing]);\n\n  const cancel = () => {\n    setDraft(value);\n    setEditing(false);\n  };\n\n  const commit = async () => {\n    const next = draft.trim();\n    if (next === value.trim() || (required && next === \"\")) {\n      cancel();\n      return;\n    }\n\n    try {\n      setSaving(true);\n      await onSave(next);\n      setSaving(false);\n      setEditing(false);\n    } catch (error) {\n      setSaving(false);\n      // Giữ nguyên chế độ sửa: người dùng không mất chữ vừa gõ khi mạng lỗi.\n      if (onError) onError(error);\n      else console.error(\"[InlineEdit] onSave thất bại:\", error);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      cancel();\n      return;\n    }\n    if (event.key === \"Enter\" && (!multiline || event.metaKey || event.ctrlKey)) {\n      event.preventDefault();\n      void commit();\n    }\n  };\n\n  if (!editing) {\n    return (\n      <button\n        type=\"button\"\n        disabled={disabled}\n        aria-label={ariaLabel}\n        onClick={() => setEditing(true)}\n        className={cn(\n          \"-mx-1 w-full rounded-md px-1 py-0.5 text-left transition-colors duration-150 ease-out\",\n          \"hover:bg-muted disabled:pointer-events-none disabled:opacity-60\",\n          !value && \"text-muted-foreground\",\n          className,\n          displayClassName\n        )}\n      >\n        <span className={cn(multiline ? \"whitespace-pre-wrap\" : \"block truncate\")}>{value || placeholder}</span>\n      </button>\n    );\n  }\n\n  const sharedProps = {\n    value: draft,\n    maxLength,\n    placeholder,\n    disabled: saving,\n    \"aria-label\": ariaLabel,\n    onKeyDown: handleKeyDown,\n    onBlur: saveOnBlur ? () => void commit() : undefined,\n    className: cn(\n      \"w-full rounded-md border border-input bg-background px-1.5 py-0.5 text-sm text-foreground\",\n      \"focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50\",\n      \"disabled:opacity-60\",\n      className\n    )\n  };\n\n  return (\n    <div className=\"flex items-start gap-1\">\n      {multiline ? (\n        <textarea\n          {...sharedProps}\n          ref={(element) => {\n            inputRef.current = element;\n          }}\n          rows={3}\n          onChange={(event) => setDraft(event.target.value)}\n        />\n      ) : (\n        <input\n          {...sharedProps}\n          ref={(element) => {\n            inputRef.current = element;\n          }}\n          type=\"text\"\n          onChange={(event) => setDraft(event.target.value)}\n        />\n      )}\n\n      {showActions && (\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            disabled={saving}\n            // onMouseDown: chạy TRƯỚC blur của ô nhập, nếu để onClick thì blur đã huỷ/lưu mất rồi.\n            onMouseDown={(event) => {\n              event.preventDefault();\n              void commit();\n            }}\n          >\n            <Check aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">Lưu</span>\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            disabled={saving}\n            onMouseDown={(event) => {\n              event.preventDefault();\n              cancel();\n            }}\n          >\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">Hủy</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/composite/inline-edit.tsx"],"sourcesContent":["\"use client\";\n\nimport { Check, X } from \"lucide-react\";\nimport { type KeyboardEvent, useEffect, useRef, useState } from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\n\nexport interface InlineEditProps {\n  /** Giá trị hiện tại (controlled từ phía dữ liệu) */\n  value: string;\n  /**\n   * Lưu giá trị mới. Trả Promise thì component hiện trạng thái đang lưu và chỉ thoát chế độ\n   * sửa khi lưu xong — thoát sớm sẽ nháy về giá trị cũ rồi mới nhảy sang giá trị mới.\n   */\n  onSave: (value: string) => void | Promise<void>;\n  /**\n   * Chữ hiện khi giá trị rỗng, kiêm placeholder của ô nhập (khoá `placeholder` của namespace\n   * `inlineEdit` — `ComitorLocaleProvider`, mặc định tiếng Anh).\n   */\n  placeholder?: string;\n  /** Ô nhập nhiều dòng (mô tả task) — Enter xuống dòng, Cmd/Ctrl+Enter mới lưu */\n  multiline?: boolean;\n  maxLength?: number;\n  disabled?: boolean;\n  /** Bắt buộc có nội dung: chuỗi rỗng bị coi là huỷ, không lưu (mặc định true) */\n  required?: boolean;\n  /** Rời ô là lưu (mặc định true, kiểu Linear) */\n  saveOnBlur?: boolean;\n  /**\n   * Hiện cặp nút ✓/✕ khi đang sửa (mặc định false — thao tác bằng phím). Tên sr-only của hai nút\n   * lấy khoá `save` / `cancel` của namespace `inlineEdit`; không có prop rời — đè qua `messages`\n   * của `ComitorLocaleProvider`.\n   */\n  showActions?: boolean;\n  /**\n   * Nhãn cho trình đọc màn hình, vd \"Sửa tên công việc\" (không truyền thì lấy khoá `ariaLabel` của\n   * namespace `inlineEdit`)\n   */\n  ariaLabel?: string;\n  onError?: (error: unknown) => void;\n  className?: string;\n  /** className riêng cho phần hiển thị (khi chưa sửa) — vd chỉnh cỡ chữ tiêu đề */\n  displayClassName?: string;\n}\n\n/**\n * Sửa tại chỗ kiểu Linear: bấm vào chữ → thành ô nhập → Enter lưu, Esc huỷ.\n *\n * Vì sao không dùng `<input>` luôn cho gọn: ô nhập luôn hiện làm danh sách trông như một cái\n * form khổng lồ và người dùng dễ sửa nhầm khi chỉ định bấm chọn. Hiển thị dạng chữ cho tới khi\n * người dùng thật sự muốn sửa là ranh giới an toàn.\n */\nexport function InlineEdit({\n  value,\n  onSave,\n  placeholder: placeholderProp,\n  multiline = false,\n  maxLength,\n  disabled = false,\n  required = true,\n  saveOnBlur = true,\n  showActions = false,\n  ariaLabel: ariaLabelProp,\n  onError,\n  className,\n  displayClassName\n}: InlineEditProps) {\n  const t = useComitorMessages(\"inlineEdit\");\n  const placeholder = placeholderProp ?? t.placeholder;\n  const ariaLabel = ariaLabelProp ?? t.ariaLabel;\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(value);\n  const [saving, setSaving] = useState(false);\n  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  // Giá trị đổi từ ngoài (người khác sửa qua realtime) — chỉ đồng bộ khi không sửa dở.\n  useEffect(() => {\n    if (!editing) setDraft(value);\n  }, [value, editing]);\n\n  useEffect(() => {\n    if (!editing) return;\n    const element = inputRef.current;\n    if (!element) return;\n    element.focus();\n    element.setSelectionRange(element.value.length, element.value.length);\n  }, [editing]);\n\n  const cancel = () => {\n    setDraft(value);\n    setEditing(false);\n  };\n\n  const commit = async () => {\n    const next = draft.trim();\n    if (next === value.trim() || (required && next === \"\")) {\n      cancel();\n      return;\n    }\n\n    try {\n      setSaving(true);\n      await onSave(next);\n      setSaving(false);\n      setEditing(false);\n    } catch (error) {\n      setSaving(false);\n      // Giữ nguyên chế độ sửa: người dùng không mất chữ vừa gõ khi mạng lỗi.\n      if (onError) onError(error);\n      else console.error(\"[InlineEdit] onSave thất bại:\", error);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      cancel();\n      return;\n    }\n    if (event.key === \"Enter\" && (!multiline || event.metaKey || event.ctrlKey)) {\n      event.preventDefault();\n      void commit();\n    }\n  };\n\n  if (!editing) {\n    return (\n      <button\n        type=\"button\"\n        disabled={disabled}\n        aria-label={ariaLabel}\n        onClick={() => setEditing(true)}\n        className={cn(\n          \"-mx-1 w-full rounded-md px-1 py-0.5 text-left transition-colors duration-150 ease-out\",\n          \"hover:bg-muted disabled:pointer-events-none disabled:opacity-60\",\n          !value && \"text-muted-foreground\",\n          className,\n          displayClassName\n        )}\n      >\n        <span className={cn(multiline ? \"whitespace-pre-wrap\" : \"block truncate\")}>{value || placeholder}</span>\n      </button>\n    );\n  }\n\n  const sharedProps = {\n    value: draft,\n    maxLength,\n    placeholder,\n    disabled: saving,\n    \"aria-label\": ariaLabel,\n    onKeyDown: handleKeyDown,\n    onBlur: saveOnBlur ? () => void commit() : undefined,\n    className: cn(\n      \"w-full rounded-md border border-input bg-background px-1.5 py-0.5 text-sm text-foreground\",\n      \"focus:border-primary-ink focus:outline-none focus:ring-2 focus:ring-ring/50\",\n      \"disabled:opacity-60\",\n      className\n    )\n  };\n\n  return (\n    <div className=\"flex items-start gap-1\">\n      {multiline ? (\n        <textarea\n          {...sharedProps}\n          ref={(element) => {\n            inputRef.current = element;\n          }}\n          rows={3}\n          onChange={(event) => setDraft(event.target.value)}\n        />\n      ) : (\n        <input\n          {...sharedProps}\n          ref={(element) => {\n            inputRef.current = element;\n          }}\n          type=\"text\"\n          onChange={(event) => setDraft(event.target.value)}\n        />\n      )}\n\n      {showActions && (\n        <div className=\"flex shrink-0 items-center gap-0.5\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            disabled={saving}\n            // onMouseDown: chạy TRƯỚC blur của ô nhập, nếu để onClick thì blur đã huỷ/lưu mất rồi.\n            onMouseDown={(event) => {\n              event.preventDefault();\n              void commit();\n            }}\n          >\n            <Check aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">{t.save}</span>\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            disabled={saving}\n            onMouseDown={(event) => {\n              event.preventDefault();\n              cancel();\n            }}\n          >\n            <X aria-hidden=\"true\" className=\"size-3.5\" />\n            <span className=\"sr-only\">{t.cancel}</span>\n          </Button>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AA6IQ,cA6CE,YA7CF;AA3IR,SAAS,OAAO,SAAS;AACzB,SAA6B,WAAW,QAAQ,gBAAgB;AAChE,SAAS,0BAA0B;AACnC,SAAS,UAAU;AACnB,SAAS,cAAc;AA+ChB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,IAAI,mBAAmB,YAAY;AACzC,QAAM,cAAc,mBAAmB,EAAE;AACzC,QAAM,YAAY,iBAAiB,EAAE;AACrC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,KAAK;AACxC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,WAAW,OAAsD,IAAI;AAG3E,YAAU,MAAM;AACd,QAAI,CAAC,QAAS,UAAS,KAAK;AAAA,EAC9B,GAAG,CAAC,OAAO,OAAO,CAAC;AAEnB,YAAU,MAAM;AACd,QAAI,CAAC,QAAS;AACd,UAAM,UAAU,SAAS;AACzB,QAAI,CAAC,QAAS;AACd,YAAQ,MAAM;AACd,YAAQ,kBAAkB,QAAQ,MAAM,QAAQ,QAAQ,MAAM,MAAM;AAAA,EACtE,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,SAAS,MAAM;AACnB,aAAS,KAAK;AACd,eAAW,KAAK;AAAA,EAClB;AAEA,QAAM,SAAS,YAAY;AACzB,UAAM,OAAO,MAAM,KAAK;AACxB,QAAI,SAAS,MAAM,KAAK,KAAM,YAAY,SAAS,IAAK;AACtD,aAAO;AACP;AAAA,IACF;AAEA,QAAI;AACF,gBAAU,IAAI;AACd,YAAM,OAAO,IAAI;AACjB,gBAAU,KAAK;AACf,iBAAW,KAAK;AAAA,IAClB,SAAS,OAAO;AACd,gBAAU,KAAK;AAEf,UAAI,QAAS,SAAQ,KAAK;AAAA,UACrB,SAAQ,MAAM,2CAAiC,KAAK;AAAA,IAC3D;AAAA,EACF;AAEA,QAAM,gBAAgB,CAAC,UAAiE;AACtF,QAAI,MAAM,QAAQ,UAAU;AAC1B,YAAM,eAAe;AACrB,aAAO;AACP;AAAA,IACF;AACA,QAAI,MAAM,QAAQ,YAAY,CAAC,aAAa,MAAM,WAAW,MAAM,UAAU;AAC3E,YAAM,eAAe;AACrB,WAAK,OAAO;AAAA,IACd;AAAA,EACF;AAEA,MAAI,CAAC,SAAS;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL;AAAA,QACA,cAAY;AAAA,QACZ,SAAS,MAAM,WAAW,IAAI;AAAA,QAC9B,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,CAAC,SAAS;AAAA,UACV;AAAA,UACA;AAAA,QACF;AAAA,QAEA,8BAAC,UAAK,WAAW,GAAG,YAAY,wBAAwB,gBAAgB,GAAI,mBAAS,aAAY;AAAA;AAAA,IACnG;AAAA,EAEJ;AAEA,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,cAAc;AAAA,IACd,WAAW;AAAA,IACX,QAAQ,aAAa,MAAM,KAAK,OAAO,IAAI;AAAA,IAC3C,WAAW;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,qBAAC,SAAI,WAAU,0BACZ;AAAA,gBACC;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK,CAAC,YAAY;AAChB,mBAAS,UAAU;AAAA,QACrB;AAAA,QACA,MAAM;AAAA,QACN,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA;AAAA,IAClD,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK,CAAC,YAAY;AAChB,mBAAS,UAAU;AAAA,QACrB;AAAA,QACA,MAAK;AAAA,QACL,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA;AAAA,IAClD;AAAA,IAGD,eACC,qBAAC,SAAI,WAAU,sCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU;AAAA,UAEV,aAAa,CAAC,UAAU;AACtB,kBAAM,eAAe;AACrB,iBAAK,OAAO;AAAA,UACd;AAAA,UAEA;AAAA,gCAAC,SAAM,eAAY,QAAO,WAAU,YAAW;AAAA,YAC/C,oBAAC,UAAK,WAAU,WAAW,YAAE,MAAK;AAAA;AAAA;AAAA,MACpC;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU;AAAA,UACV,aAAa,CAAC,UAAU;AACtB,kBAAM,eAAe;AACrB,mBAAO;AAAA,UACT;AAAA,UAEA;AAAA,gCAAC,KAAE,eAAY,QAAO,WAAU,YAAW;AAAA,YAC3C,oBAAC,UAAK,WAAU,WAAW,YAAE,QAAO;AAAA;AAAA;AAAA,MACtC;AAAA,OACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/composite/relative-time.d.ts

@@ -26,10 +26,10 @@ interface RelativeTimeProps extends Omit<ComponentProps<"time">, "dateTime" | "c
      */
     updateIntervalMs?: number;
     /**
-     * Ngôn ngữ của date-fns (mặc định `vi`) — quyết định CẢ chuỗi tương đối lẫn mốc tuyệt đối trong
-     * tooltip.
+     * Ngôn ngữ của date-fns — quyết định CẢ chuỗi tương đối lẫn mốc tuyệt đối trong tooltip.
      *
-     * App đa ngôn ngữ phải truyền: để mặc định thì giao diện tiếng Anh vẫn hiện "3 phút trước".
+     * Không truyền thì theo `ComitorLocaleProvider` (`vi` → "3 phút trước", còn lại `enUS` → "3
+     * minutes ago"). Trước `3.0.0` mặc định cứng là `vi`, nên app tiếng Anh phải nhớ truyền.
      */
     locale?: Locale;
     /**
@@ -57,6 +57,6 @@ interface RelativeTimeProps extends Omit<ComponentProps<"time">, "dateTime" | "c
  * Hai lối đo dùng CHUNG một cách diễn đạt (`…Strict` của date-fns, cùng `locale`), nên đổi giữa
  * `now` và đồng hồ thật không làm chữ đổi giọng: vẫn "12 phút trước", không phải "khoảng 12 phút".
  */
-declare function RelativeTime({ value, now, addSuffix, updateIntervalMs, locale, titleFormat, fallback, className, ...props }: RelativeTimeProps): React.JSX.Element;
+declare function RelativeTime({ value, now, addSuffix, updateIntervalMs, locale: localeProp, titleFormat, fallback, className, ...props }: RelativeTimeProps): React.JSX.Element;
 
 export { RelativeTime, type RelativeTimeProps };

package/dist/components/composite/relative-time.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { format as formatDate, formatDistanceStrict, formatDistanceToNowStrict, isValid } from "date-fns";
-import { vi } from "date-fns/locale";
 import { useEffect, useState } from "react";
+import { useComitorLocale } from "../../i18n/locale-provider.js";
 function toDate(value) {
   return value instanceof Date ? value : new Date(value);
 }
@@ -11,12 +11,14 @@ function RelativeTime({
   now,
   addSuffix = true,
   updateIntervalMs = 6e4,
-  locale = vi,
+  locale: localeProp,
   titleFormat = "Pp",
   fallback = "\u2014",
   className,
   ...props
 }) {
+  const { dateFnsLocale } = useComitorLocale();
+  const locale = localeProp ?? dateFnsLocale;
   const date = toDate(value);
   const valid = isValid(date);
   const tickIntervalMs = now ? 0 : updateIntervalMs;

package/dist/components/composite/relative-time.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/relative-time.tsx"],"sourcesContent":["\"use client\";\n\nimport { format as formatDate, formatDistanceStrict, formatDistanceToNowStrict, isValid, type Locale } from \"date-fns\";\nimport { vi } from \"date-fns/locale\";\nimport { type ComponentProps, useEffect, useState } from \"react\";\n\nexport interface RelativeTimeProps extends Omit<ComponentProps<\"time\">, \"dateTime\" | \"children\"> {\n  /** Thời điểm cần hiển thị: Date, ISO string hoặc epoch ms */\n  value: Date | string | number;\n  /**\n   * Mốc để ĐO TỪ ĐÓ. Bỏ trống = đồng hồ thật (hành vi mặc định, đúng cho bản ghi từ backend).\n   *\n   * Truyền `now` khi dữ liệu ĐỨNG YÊN — bản mẫu, ảnh chụp báo cáo, kết quả test: đồng hồ thật đo\n   * trên mốc cố định thì kết quả trôi mỗi ngày, và mốc nào lỡ nằm ở tương lai in ra \"2 giờ nữa\",\n   * một câu vô nghĩa mà TypeScript lẫn linter đều thấy hợp lệ.\n   *\n   * Có `now` thì component KHÔNG tự cập nhật nữa (xem `updateIntervalMs`) và kết quả trở nên tất\n   * định — server và client cho ra cùng một chuỗi.\n   */\n  now?: Date;\n  /** Thêm hậu tố \"trước\"/\"nữa\" (mặc định true) */\n  addSuffix?: boolean;\n  /**\n   * Chu kỳ tự cập nhật (ms). 0 = không tự cập nhật. Mặc định 60_000.\n   *\n   * ⚠ Bị BỎ QUA khi có `now`: đo từ một mốc cố định thì chuỗi hiển thị không bao giờ đổi, nên hẹn\n   * giờ chỉ để render lại y nguyên mỗi phút.\n   */\n  updateIntervalMs?: number;\n  /**\n   * Ngôn ngữ của date-fns (mặc định `vi`) — quyết định CẢ chuỗi tương đối lẫn mốc tuyệt đối trong\n   * tooltip.\n   *\n   * App đa ngôn ngữ phải truyền: để mặc định thì giao diện tiếng Anh vẫn hiện \"3 phút trước\".\n   */\n  locale?: Locale;\n  /**\n   * Định dạng của tooltip `title`. Mặc định `\"Pp\"` — ngày + giờ THEO `locale`, nên nó tự đúng ở\n   * mọi ngôn ngữ (vi: `29/08/2026 09:12`; en-US: `08/29/2026, 9:12 AM`).\n   *\n   * ⚠ Trước `0.9.0` mặc định là `\"HH:mm 'ngày' dd/MM/yyyy\"` — chuỗi đó nhét sẵn chữ \"ngày\" tiếng\n   * Việt vào mọi ngôn ngữ. Cần lại đúng câu cũ thì truyền chính chuỗi đó.\n   */\n  titleFormat?: string;\n  /** Nội dung thay thế khi `value` không hợp lệ */\n  fallback?: string;\n}\n\nfunction toDate(value: Date | string | number): Date {\n  return value instanceof Date ? value : new Date(value);\n}\n\n/**\n * Thời gian tương đối kiểu \"3 phút trước\", tự cập nhật theo chu kỳ.\n *\n * Dùng `formatDistanceToNowStrict` (không phải bản thường): bản thường làm tròn kiểu \"khoảng 1\n * tháng\" cho mọi thứ từ 26 ngày đến 45 ngày — trong danh sách công việc thì \"26 ngày trước\" và\n * \"45 ngày trước\" là hai câu chuyện khác hẳn nhau.\n *\n * `title` luôn giữ mốc thời gian tuyệt đối để người dùng rà chuột là biết chính xác.\n * Có `suppressHydrationWarning` vì đồng hồ server và client gần như luôn lệch vài giây — trừ khi\n * truyền `now`, lúc đó kết quả tất định và thuộc tính này chỉ còn là vô hại.\n *\n * Hai lối đo dùng CHUNG một cách diễn đạt (`…Strict` của date-fns, cùng `locale`), nên đổi giữa\n * `now` và đồng hồ thật không làm chữ đổi giọng: vẫn \"12 phút trước\", không phải \"khoảng 12 phút\".\n */\nexport function RelativeTime({\n  value,\n  now,\n  addSuffix = true,\n  updateIntervalMs = 60_000,\n  locale = vi,\n  titleFormat = \"Pp\",\n  fallback = \"—\",\n  className,\n  ...props\n}: RelativeTimeProps) {\n  const date = toDate(value);\n  const valid = isValid(date);\n\n  // Mốc cố định thì chuỗi không bao giờ đổi — tắt hẳn hẹn giờ, kể cả khi người gọi vẫn truyền\n  // `updateIntervalMs`. Nếu không, component render lại mỗi phút để in ra đúng chữ cũ.\n  const tickIntervalMs = now ? 0 : updateIntervalMs;\n\n  const [, setTick] = useState(0);\n\n  useEffect(() => {\n    if (!valid || !tickIntervalMs) return;\n    const timer = setInterval(() => setTick((current) => current + 1), tickIntervalMs);\n    return () => clearInterval(timer);\n  }, [valid, tickIntervalMs]);\n\n  // Ngày hỏng (chuỗi rỗng, null từ API) → KHÔNG render <time>: thẻ này bắt buộc phải có\n  // `datetime` hợp lệ, đưa \"Invalid Date\" vào là tạo dữ liệu sai cho trình đọc màn hình và bộ máy tìm kiếm.\n  if (!valid) {\n    return <span className={className}>{fallback}</span>;\n  }\n\n  return (\n    <time\n      dateTime={date.toISOString()}\n      title={formatDate(date, titleFormat, { locale })}\n      suppressHydrationWarning\n      className={className}\n      {...props}\n    >\n      {now\n        ? formatDistanceStrict(date, now, { addSuffix, locale })\n        : formatDistanceToNowStrict(date, { addSuffix, locale })}\n    </time>\n  );\n}\n"],"mappings":";AA+FW;AA7FX,SAAS,UAAU,YAAY,sBAAsB,2BAA2B,eAA4B;AAC5G,SAAS,UAAU;AACnB,SAA8B,WAAW,gBAAgB;AA4CzD,SAAS,OAAO,OAAqC;AACnD,SAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AACvD;AAgBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,SAAS;AAAA,EACT,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,OAAO,OAAO,KAAK;AACzB,QAAM,QAAQ,QAAQ,IAAI;AAI1B,QAAM,iBAAiB,MAAM,IAAI;AAEjC,QAAM,CAAC,EAAE,OAAO,IAAI,SAAS,CAAC;AAE9B,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,CAAC,eAAgB;AAC/B,UAAM,QAAQ,YAAY,MAAM,QAAQ,CAAC,YAAY,UAAU,CAAC,GAAG,cAAc;AACjF,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,OAAO,cAAc,CAAC;AAI1B,MAAI,CAAC,OAAO;AACV,WAAO,oBAAC,UAAK,WAAuB,oBAAS;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK,YAAY;AAAA,MAC3B,OAAO,WAAW,MAAM,aAAa,EAAE,OAAO,CAAC;AAAA,MAC/C,0BAAwB;AAAA,MACxB;AAAA,MACC,GAAG;AAAA,MAEH,gBACG,qBAAqB,MAAM,KAAK,EAAE,WAAW,OAAO,CAAC,IACrD,0BAA0B,MAAM,EAAE,WAAW,OAAO,CAAC;AAAA;AAAA,EAC3D;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/relative-time.tsx"],"sourcesContent":["\"use client\";\n\nimport { format as formatDate, formatDistanceStrict, formatDistanceToNowStrict, isValid, type Locale } from \"date-fns\";\nimport { type ComponentProps, useEffect, useState } from \"react\";\nimport { useComitorLocale } from \"../../i18n/locale-provider.js\";\n\nexport interface RelativeTimeProps extends Omit<ComponentProps<\"time\">, \"dateTime\" | \"children\"> {\n  /** Thời điểm cần hiển thị: Date, ISO string hoặc epoch ms */\n  value: Date | string | number;\n  /**\n   * Mốc để ĐO TỪ ĐÓ. Bỏ trống = đồng hồ thật (hành vi mặc định, đúng cho bản ghi từ backend).\n   *\n   * Truyền `now` khi dữ liệu ĐỨNG YÊN — bản mẫu, ảnh chụp báo cáo, kết quả test: đồng hồ thật đo\n   * trên mốc cố định thì kết quả trôi mỗi ngày, và mốc nào lỡ nằm ở tương lai in ra \"2 giờ nữa\",\n   * một câu vô nghĩa mà TypeScript lẫn linter đều thấy hợp lệ.\n   *\n   * Có `now` thì component KHÔNG tự cập nhật nữa (xem `updateIntervalMs`) và kết quả trở nên tất\n   * định — server và client cho ra cùng một chuỗi.\n   */\n  now?: Date;\n  /** Thêm hậu tố \"trước\"/\"nữa\" (mặc định true) */\n  addSuffix?: boolean;\n  /**\n   * Chu kỳ tự cập nhật (ms). 0 = không tự cập nhật. Mặc định 60_000.\n   *\n   * ⚠ Bị BỎ QUA khi có `now`: đo từ một mốc cố định thì chuỗi hiển thị không bao giờ đổi, nên hẹn\n   * giờ chỉ để render lại y nguyên mỗi phút.\n   */\n  updateIntervalMs?: number;\n  /**\n   * Ngôn ngữ của date-fns — quyết định CẢ chuỗi tương đối lẫn mốc tuyệt đối trong tooltip.\n   *\n   * Không truyền thì theo `ComitorLocaleProvider` (`vi` → \"3 phút trước\", còn lại `enUS` → \"3\n   * minutes ago\"). Trước `3.0.0` mặc định cứng là `vi`, nên app tiếng Anh phải nhớ truyền.\n   */\n  locale?: Locale;\n  /**\n   * Định dạng của tooltip `title`. Mặc định `\"Pp\"` — ngày + giờ THEO `locale`, nên nó tự đúng ở\n   * mọi ngôn ngữ (vi: `29/08/2026 09:12`; en-US: `08/29/2026, 9:12 AM`).\n   *\n   * ⚠ Trước `0.9.0` mặc định là `\"HH:mm 'ngày' dd/MM/yyyy\"` — chuỗi đó nhét sẵn chữ \"ngày\" tiếng\n   * Việt vào mọi ngôn ngữ. Cần lại đúng câu cũ thì truyền chính chuỗi đó.\n   */\n  titleFormat?: string;\n  /** Nội dung thay thế khi `value` không hợp lệ */\n  fallback?: string;\n}\n\nfunction toDate(value: Date | string | number): Date {\n  return value instanceof Date ? value : new Date(value);\n}\n\n/**\n * Thời gian tương đối kiểu \"3 phút trước\", tự cập nhật theo chu kỳ.\n *\n * Dùng `formatDistanceToNowStrict` (không phải bản thường): bản thường làm tròn kiểu \"khoảng 1\n * tháng\" cho mọi thứ từ 26 ngày đến 45 ngày — trong danh sách công việc thì \"26 ngày trước\" và\n * \"45 ngày trước\" là hai câu chuyện khác hẳn nhau.\n *\n * `title` luôn giữ mốc thời gian tuyệt đối để người dùng rà chuột là biết chính xác.\n * Có `suppressHydrationWarning` vì đồng hồ server và client gần như luôn lệch vài giây — trừ khi\n * truyền `now`, lúc đó kết quả tất định và thuộc tính này chỉ còn là vô hại.\n *\n * Hai lối đo dùng CHUNG một cách diễn đạt (`…Strict` của date-fns, cùng `locale`), nên đổi giữa\n * `now` và đồng hồ thật không làm chữ đổi giọng: vẫn \"12 phút trước\", không phải \"khoảng 12 phút\".\n */\nexport function RelativeTime({\n  value,\n  now,\n  addSuffix = true,\n  updateIntervalMs = 60_000,\n  locale: localeProp,\n  titleFormat = \"Pp\",\n  fallback = \"—\",\n  className,\n  ...props\n}: RelativeTimeProps) {\n  const { dateFnsLocale } = useComitorLocale();\n  const locale = localeProp ?? dateFnsLocale;\n  const date = toDate(value);\n  const valid = isValid(date);\n\n  // Mốc cố định thì chuỗi không bao giờ đổi — tắt hẳn hẹn giờ, kể cả khi người gọi vẫn truyền\n  // `updateIntervalMs`. Nếu không, component render lại mỗi phút để in ra đúng chữ cũ.\n  const tickIntervalMs = now ? 0 : updateIntervalMs;\n\n  const [, setTick] = useState(0);\n\n  useEffect(() => {\n    if (!valid || !tickIntervalMs) return;\n    const timer = setInterval(() => setTick((current) => current + 1), tickIntervalMs);\n    return () => clearInterval(timer);\n  }, [valid, tickIntervalMs]);\n\n  // Ngày hỏng (chuỗi rỗng, null từ API) → KHÔNG render <time>: thẻ này bắt buộc phải có\n  // `datetime` hợp lệ, đưa \"Invalid Date\" vào là tạo dữ liệu sai cho trình đọc màn hình và bộ máy tìm kiếm.\n  if (!valid) {\n    return <span className={className}>{fallback}</span>;\n  }\n\n  return (\n    <time\n      dateTime={date.toISOString()}\n      title={formatDate(date, titleFormat, { locale })}\n      suppressHydrationWarning\n      className={className}\n      {...props}\n    >\n      {now\n        ? formatDistanceStrict(date, now, { addSuffix, locale })\n        : formatDistanceToNowStrict(date, { addSuffix, locale })}\n    </time>\n  );\n}\n"],"mappings":";AAiGW;AA/FX,SAAS,UAAU,YAAY,sBAAsB,2BAA2B,eAA4B;AAC5G,SAA8B,WAAW,gBAAgB;AACzD,SAAS,wBAAwB;AA4CjC,SAAS,OAAO,OAAqC;AACnD,SAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AACvD;AAgBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,EAAE,cAAc,IAAI,iBAAiB;AAC3C,QAAM,SAAS,cAAc;AAC7B,QAAM,OAAO,OAAO,KAAK;AACzB,QAAM,QAAQ,QAAQ,IAAI;AAI1B,QAAM,iBAAiB,MAAM,IAAI;AAEjC,QAAM,CAAC,EAAE,OAAO,IAAI,SAAS,CAAC;AAE9B,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,CAAC,eAAgB;AAC/B,UAAM,QAAQ,YAAY,MAAM,QAAQ,CAAC,YAAY,UAAU,CAAC,GAAG,cAAc;AACjF,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,OAAO,cAAc,CAAC;AAI1B,MAAI,CAAC,OAAO;AACV,WAAO,oBAAC,UAAK,WAAuB,oBAAS;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK,YAAY;AAAA,MAC3B,OAAO,WAAW,MAAM,aAAa,EAAE,OAAO,CAAC;AAAA,MAC/C,0BAAwB;AAAA,MACxB;AAAA,MACC,GAAG;AAAA,MAEH,gBACG,qBAAqB,MAAM,KAAK,EAAE,WAAW,OAAO,CAAC,IACrD,0BAA0B,MAAM,EAAE,WAAW,OAAO,CAAC;AAAA;AAAA,EAC3D;AAEJ;","names":[]}

package/dist/components/composite/route-tabs-nav.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+declare function RouteTabsNav({ label, children }: {
+    label?: string;
+    children: ReactNode;
+}): React.JSX.Element;
+
+export { RouteTabsNav };

package/dist/components/composite/route-tabs-nav.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
+function RouteTabsNav({ label, children }) {
+  const t = useComitorMessages("routeTabs");
+  return /* @__PURE__ */ jsx("nav", { "aria-label": label ?? t.label, "data-slot": "route-tabs", children });
+}
+export {
+  RouteTabsNav
+};
+//# sourceMappingURL=route-tabs-nav.js.map

package/dist/components/composite/route-tabs-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/route-tabs-nav.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\n\n/*\n * Lá CLIENT nhỏ nhất có thể của `RouteTabs` — chỉ mỗi thẻ `<nav>` và tên của nó.\n *\n * Vì sao tách ra thay vì cho cả `route-tabs.tsx` thành `\"use client\"` (như `Spinner`):\n * `RouteTabs` nhận prop `LinkComponent` — một COMPONENT — mà Server Component truyền vào (vd\n * `LinkComponent={Link}` ở một layout server). Hàm/component không tuần tự hoá được qua ranh\n * giới RSC, nên file ấy mà thành client thì mọi trang server đang dùng nó gãy ngay. Chỉ cái tên\n * `aria-label` là cần đọc `ComitorLocaleProvider` (context, chỉ có ở client), nên chỉ phần đó\n * sang client: `route-tabs.tsx` vẫn tĩnh, dựng sẵn các link rồi đưa vào đây làm `children`\n * (children là phần tử React đã render — qua được ranh giới).\n *\n * File NỘI BỘ: barrel chỉ xuất `route-tabs.js`, không có dòng nào cho file này.\n */\nexport function RouteTabsNav({ label, children }: { label?: string; children: ReactNode }) {\n  const t = useComitorMessages(\"routeTabs\");\n  return (\n    <nav aria-label={label ?? t.label} data-slot=\"route-tabs\">\n      {children}\n    </nav>\n  );\n}\n"],"mappings":";AAqBI;AAlBJ,SAAS,0BAA0B;AAe5B,SAAS,aAAa,EAAE,OAAO,SAAS,GAA4C;AACzF,QAAM,IAAI,mBAAmB,WAAW;AACxC,SACE,oBAAC,SAAI,cAAY,SAAS,EAAE,OAAO,aAAU,cAC1C,UACH;AAEJ;","names":[]}

package/dist/components/composite/route-tabs.d.ts

@@ -64,7 +64,10 @@ interface RouteTabsProps {
     variant?: TabsVariant;
     /** Component link của app. Bỏ trống → \`<a>\` thô, tải lại cả trang. */
     LinkComponent?: RouteTabsLinkComponent;
-    /** Nhãn của vùng điều hướng, cho trình đọc màn hình. */
+    /**
+     * Nhãn của vùng điều hướng, cho trình đọc màn hình. Không truyền thì lấy khoá `label` của
+     * namespace `routeTabs` (`ComitorLocaleProvider`, mặc định tiếng Anh).
+     */
     label?: string;
     className?: string;
     /** Lớp thêm cho từng link. */

package/dist/components/composite/route-tabs.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/cn.js";
 import { TABS_TRIGGER_BASE, tabsListVariants, tabsTriggerVariants } from "../ui/tabs-variants.js";
+import { RouteTabsNav } from "./route-tabs-nav.js";
 function DefaultLink({ href, className, children, ...rest }) {
   return /* @__PURE__ */ jsx("a", { href, className, ...rest, children });
 }
@@ -13,11 +14,11 @@ function RouteTabs({
   pathname,
   variant = "default",
   LinkComponent = DefaultLink,
-  label = "M\u1EE5c c\u1EE7a trang",
+  label,
   className,
   itemClassName
 }) {
-  return /* @__PURE__ */ jsx("nav", { "aria-label": label, "data-slot": "route-tabs", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(RouteTabsNav, { label, children: /* @__PURE__ */ jsx(
     "div",
     {
       "data-slot": "route-tabs-list",