@comitor/ui 0.7.0 → 0.9.0

package/README.md

@@ -451,7 +451,7 @@ import không đổi:
 | `CHART_COLORS.gold` | `undefined` | `"var(--chart-1)"` |
 | `CHART_SERIES_COLORS[0]` | `undefined` | `"var(--chart-1)"` |
 | `DEFAULT_DATA_TABLE_LABELS.emptyTitle` | `undefined` | `"Chưa có dữ liệu"` |
-| `VI_DATE_FORMAT` | `undefined` | `"dd/MM/yyyy"` |
+| `VI_DATE_FORMAT` · `dateFormatForLocale(vi)` | `undefined` | `"dd/MM/yyyy"` |
 | `DEFAULT_DATE_PRESETS.length` | `0` | `3` |
 | `DEFAULT_DATE_RANGE_PRESETS.length` | `0` | `5` |
 | `DEFAULT_PAGE_SIZE_OPTIONS[0]` | `undefined` | `20` |
@@ -501,17 +501,23 @@ shadcn/ui style `new-york`, đã tùy biến token theo brand Comitor.
 | Hành động | `Button`, `ButtonGroup`, `Toggle`, `ToggleGroup`, `Kbd` |
 | Nhập liệu | `Input`, `InputGroup`, `InputOTP`, `Textarea`, `Label`, `Field`, `Checkbox`, `RadioGroup`, `Switch`, `Slider`, `Select`, `Calendar` |
 | Hiển thị | `Card`, `Badge`, `Avatar`, `Table`, `Separator`, `AspectRatio`, `Skeleton`, `Spinner`, `Progress`, `Empty`, `Item`, `Alert` |
+| Lớp phủ | `Dialog`, `AlertDialog`, `Sheet`, `Drawer`, `Popover`, `HoverCard`, `Tooltip`, `DropdownMenu`, `ContextMenu`, `Menubar`, `Command` |
+| Điều hướng | `Tabs`, `Breadcrumb`, `Pagination`, `NavigationMenu`, `Accordion`, `Collapsible` |
+| Khác | `ScrollArea`, `Resizable`, `Carousel` |
 
 `Alert` có ba variant: `default` · `warning` · `destructive` — hai variant sau tô CHỮ bằng bậc `-ink`
 trên `bg-card`, không tô nền màu (bậc tô nền làm chữ chỉ được 1,59:1 ở light ✗).
 
-`Progress` có `tone`: `default` · `success` · `destructive`. **Cố ý không có `warning`**: ở bảng màu
-light `--warning-ink` và `--primary-ink` là cùng một giá trị (`#7A5800`), nên thanh "cảnh báo" sẽ
-trông y hệt thanh thường. Cần báo sắp-chạm-ngưỡng thì nói bằng `StatusPill`/`Badge` tông warning
-hoặc một dòng chữ cạnh thanh — xem chú thích đầu `progress.tsx`.
-| Lớp phủ | `Dialog`, `AlertDialog`, `Sheet`, `Drawer`, `Popover`, `HoverCard`, `Tooltip`, `DropdownMenu`, `ContextMenu`, `Menubar`, `Command` |
-| Điều hướng | `Tabs`, `Breadcrumb`, `Pagination`, `NavigationMenu`, `Accordion`, `Collapsible` |
-| Khác | `ScrollArea`, `Resizable`, `Carousel` |
+`Skeleton` tô bằng `--muted` (xám trung tính), KHÔNG phải `--accent`: bậc nhạt của brand là kem
+ngả vàng ở bảng light, nên cả một trang đang tải sẽ loang vàng — và đúng bằng màu mà `Switch`/`Tabs`
+dùng để nói "đang bật". Ở dark hai token vốn trùng giá trị nên không đổi gì.
+
+`Progress` có `tone`: `default` · `success` · `warning` · `destructive`. Tông `warning` KHÔNG chỉ đổi
+màu: nó kèm vạch chéo (`hazard-stripes`) khoét rãnh xuyên phần đã chạy. Bắt buộc phải thế, vì brand
+của Comitor là gold còn warning là yellow — `--warning-ink` ⇄ `--primary-ink` chỉ 1,00:1 ở bảng tương
+phản cao (light) và 1,0x:1 ở cả hai bảng dark, tức đổi màu KHÔNG đổi được gì. Vạch là cùng tín hiệu
+ấy nói bằng hình nên nó còn đọc ra ở chế độ xám (WCAG 1.4.1). Số đo và cách chứng minh "không hex nào
+tách được hai bậc ink này" ở chú thích đầu `progress.tsx`.
 
 > Hai file primitive **không** nằm ở entry chính: `form.tsx` → `@comitor/ui/form`;
 > `sonner.tsx` → `@comitor/ui/shell` (tên `SonnerToaster`). Xem §3.
@@ -564,11 +570,11 @@ Giá trị thật của package: pattern lặp đi lặp lại ở mọi app, gh
 | `RouteTabs` | Tab mà mỗi mục là một **route thật** — `<nav>` chứa link, `aria-current="page"`. Dùng chung bảng lớp với `Tabs` nên nhìn không khác; đừng dùng `Tabs` cho việc này (nó dựng `role="tablist"` + `aria-controls` trỏ tới tabpanel cùng trang, mà ở đây không có). ⚠ Trên Next phải truyền `LinkComponent={Link}` |
 | `FormSection`, `FormField` | Bố cục form 12 cột; uỷ quyền label/mô tả/lỗi xuống `Field` |
 | `Combobox`, `MultiCombobox` | Chọn có tìm kiếm, **khớp không dấu tiếng Việt**. `aria-invalid` đổi trigger sang **viền đỏ** (`--destructive-ink`), cùng tín hiệu với `Input`; nhận cả `boolean` lẫn `"true"`/`"false"` để dùng thẳng `aria-invalid={!!errors.x}` |
-| `DatePicker`, `DateRangePicker` | Chọn ngày/khoảng ngày, locale `vi`, preset dựng sẵn |
+| `DatePicker`, `DateRangePicker` | Chọn ngày/khoảng ngày, preset dựng sẵn. **`locale?: Locale`** (date-fns, mặc định `vi`) đổi CẢ lịch lẫn thứ tự ngày/tháng của ô nhập: định dạng suy từ locale bằng `dateFormatForLocale()`, nên `en-US` ra `MM/dd/yyyy` mà không phải khai gì thêm. Ba nhãn `sr-only` override bằng `labels` |
 | `LetterAvatar`, `AvatarGroup` | Avatar chữ cái theo tên tiếng Việt (tông màu deterministic), nhóm người tham gia. Lấy tone bằng `getAvatarToneClasses(name)`; bản hex cho canvas/email/PDF là `getAvatarToneColors(name, mode)` ở `/tokens` — **cùng một bảng tone**, cùng một hàm băm |
 | `ConfirmDialog`, `CommandPalette` | Hộp xác nhận, bảng lệnh `⌘K` |
 | `Toaster`, `toast()`, `toastPromise()`, `dismissToast()` | Thông báo có icon theo trạng thái |
-| `CopyButton`, `RelativeTime`, `InlineEdit`, `KeyboardHint` | Tiện ích nhỏ dùng khắp nơi. `RelativeTime` nhận `now?: Date` để đo từ một mốc CỐ ĐỊNH thay vì đồng hồ thật — dùng cho dữ liệu đứng yên (bản mẫu, ảnh chụp báo cáo, test); có `now` thì nó tự tắt hẹn giờ cập nhật và kết quả trở nên tất định |
+| `CopyButton`, `RelativeTime`, `InlineEdit`, `KeyboardHint` | Tiện ích nhỏ dùng khắp nơi. `RelativeTime` nhận **`locale?: Locale`** (date-fns, mặc định `vi`) — app đa ngôn ngữ phải truyền, không thì giao diện tiếng Anh vẫn hiện "3 phút trước". Và `now?: Date` để đo từ một mốc CỐ ĐỊNH thay vì đồng hồ thật — dùng cho dữ liệu đứng yên (bản mẫu, ảnh chụp báo cáo, test); có `now` thì nó tự tắt hẹn giờ cập nhật và kết quả trở nên tất định |
 | `useIsMac` | Hook đi kèm `KeyboardHint` — `true` khi chạy trên macOS (render đầu luôn `false`, xem §3). **Cửa xuất duy nhất của cả gói**; `/shell` không re-export |
 
 Kèm 2 module thuần (không phải component, dùng được cả hai phía):

package/dist/components/composite/date-picker-constants.d.ts

@@ -1,7 +1,59 @@
+import { Locale } from 'date-fns';
 import { DateRange } from 'react-day-picker';
 
-/** Định dạng ngày của Việt Nam — dùng thống nhất ở mọi app Comitor. */
+/**
+ * Định dạng ngày và preset mặc định của `DatePicker` / `DateRangePicker`.
+ *
+ * Module **CỐ Ý không có `"use client"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy
+ * đủ: mọi export của một file `"use client"` đến tay Server Component dưới dạng
+ * client-reference proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning. Hằng dữ liệu thuần
+ * (nhãn mặc định, preset, sentinel) là thứ trang server hay đọc nhất — spread để override một
+ * khoá, đối chiếu giá trị, dựng danh sách — nên phải sống ngoài ranh giới client.
+ *
+ * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `date-picker.tsx` chỉ được `import`,
+ * KHÔNG được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).
+ */
+
+/**
+ * Định dạng ngày của Việt Nam.
+ *
+ * ⚠ KHÔNG dùng nó làm định dạng mặc định nữa — `DatePicker`/`DateRangePicker` suy định dạng từ
+ * `locale` bằng `dateFormatForLocale()` bên dưới, nên một app tiếng Anh ra `MM/dd/yyyy` thay vì
+ * ngày Việt Nam. Hằng này giữ lại vì nó là API công khai và vẫn đúng khi app cần ghim cứng ngày
+ * kiểu Việt Nam ở một chỗ cụ thể (hoá đơn in ra, tệp xuất cho cơ quan thuế…).
+ */
 declare const VI_DATE_FORMAT = "dd/MM/yyyy";
+/**
+ * Định dạng ngày SỐ của một `locale` date-fns — dùng cho cả `format`, `parse` và chuỗi gợi ý
+ * trong ô nhập, nên ba thứ đó không bao giờ lệch nhau.
+ *
+ * `formatLong.date({ width: "short" })` là nguồn: `vi` cho `dd/MM/y`, `en-US` cho `MM/dd/yyyy`,
+ * `ja` cho `y/MM/dd`. Một chữ `y` đơn được nong thành `yyyy` — không phải để đổi kết quả (`y` in
+ * ra "2026" y hệt) mà vì chuỗi này CÒN LÀM PLACEHOLDER: gợi ý "dd/MM/y" dạy người dùng gõ sai.
+ *
+ * Nhờ vậy `vi` cho ra đúng `dd/MM/yyyy` như hằng bên trên — đổi sang cách suy này không làm đổi
+ * một pixel nào ở các app đang chạy tiếng Việt.
+ */
+declare function dateFormatForLocale(locale: Locale): string;
+/**
+ * Nhãn chỉ dành cho TRÌNH ĐỌC MÀN HÌNH của `DatePicker` — không hiện thành chữ trên giao diện.
+ *
+ * Vì sao vẫn phải override được: chúng là chuỗi tiếng Việt cứng nằm trong `sr-only`, nên một app
+ * tiếng Anh trông thì đúng nhưng ĐỌC ra vẫn là tiếng Việt — lỗi không ai thấy trên ảnh chụp và
+ * cũng không có gì báo đỏ.
+ *
+ * ⚠ `locale` KHÔNG dịch mấy nhãn này, và không thể: locale của date-fns chỉ mang cách viết ngày
+ * tháng, không mang chuỗi giao diện. Đổi ngôn ngữ app thì phải truyền CẢ `locale` lẫn `labels`.
+ */
+interface DatePickerLabels {
+    /** Nút xoá ngày đang chọn (`DatePicker`) */
+    clear: string;
+    /** Nút xoá khoảng ngày đang chọn (`DateRangePicker`) */
+    clearRange: string;
+    /** Nút mở lịch (`DatePicker`; `DateRangePicker` mở lịch bằng chính ô của nó nên không dùng khoá này) */
+    openCalendar: string;
+}
+declare const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels;
 interface DatePreset {
     id: string;
     label: string;
@@ -18,4 +70,4 @@ declare const DEFAULT_DATE_PRESETS: DatePreset[];
 /** Preset mặc định cho ô chọn khoảng ngày (báo cáo, bộ lọc danh sách). */
 declare const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[];
 
-export { DEFAULT_DATE_PRESETS, DEFAULT_DATE_RANGE_PRESETS, type DatePreset, type DateRangePreset, VI_DATE_FORMAT };
+export { DEFAULT_DATE_PICKER_LABELS, DEFAULT_DATE_PRESETS, DEFAULT_DATE_RANGE_PRESETS, type DatePickerLabels, type DatePreset, type DateRangePreset, VI_DATE_FORMAT, dateFormatForLocale };

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

@@ -1,5 +1,13 @@
 import { endOfMonth, startOfDay, startOfMonth, subDays, subMonths } from "date-fns";
 const VI_DATE_FORMAT = "dd/MM/yyyy";
+function dateFormatForLocale(locale) {
+  return locale.formatLong.date({ width: "short" }).replace(/y+/g, (run) => run.length === 1 ? "yyyy" : run);
+}
+const DEFAULT_DATE_PICKER_LABELS = {
+  clear: "X\xF3a ng\xE0y",
+  clearRange: "X\xF3a kho\u1EA3ng ng\xE0y",
+  openCalendar: "M\u1EDF l\u1ECBch"
+};
 const DEFAULT_DATE_PRESETS = [
   { id: "today", label: "H\xF4m nay", getValue: () => startOfDay(/* @__PURE__ */ new Date()) },
   { id: "yesterday", label: "H\xF4m qua", getValue: () => startOfDay(subDays(/* @__PURE__ */ new Date(), 1)) },
@@ -32,8 +40,10 @@ const DEFAULT_DATE_RANGE_PRESETS = [
   }
 ];
 export {
+  DEFAULT_DATE_PICKER_LABELS,
   DEFAULT_DATE_PRESETS,
   DEFAULT_DATE_RANGE_PRESETS,
-  VI_DATE_FORMAT
+  VI_DATE_FORMAT,
+  dateFormatForLocale
 };
 //# sourceMappingURL=date-picker-constants.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/date-picker-constants.ts"],"sourcesContent":["/**\n * Định dạng ngày và preset mặc định của `DatePicker` / `DateRangePicker`.\n *\n * Module **CỐ Ý không có `\"use client\"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy\n * đủ: mọi export của một file `\"use client\"` đến tay Server Component dưới dạng\n * client-reference proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning. Hằng dữ liệu thuần\n * (nhãn mặc định, preset, sentinel) là thứ trang server hay đọc nhất — spread để override một\n * khoá, đối chiếu giá trị, dựng danh sách — nên phải sống ngoài ranh giới client.\n *\n * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `date-picker.tsx` chỉ được `import`,\n * KHÔNG được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).\n */\nimport { endOfMonth, startOfDay, startOfMonth, subDays, subMonths } from \"date-fns\";\nimport type { DateRange } from \"react-day-picker\";\n\n/** Định dạng ngày của Việt Nam — dùng thống nhất ở mọi app Comitor. */\nexport const VI_DATE_FORMAT = \"dd/MM/yyyy\";\n\nexport interface DatePreset {\n  id: string;\n  label: string;\n  /** Trả về ngày (DatePicker) hoặc khoảng ngày (DateRangePicker) tại thời điểm bấm */\n  getValue: () => Date;\n}\n\nexport interface DateRangePreset {\n  id: string;\n  label: string;\n  getValue: () => DateRange;\n}\n\n/** Preset mặc định cho ô chọn một ngày. */\nexport const DEFAULT_DATE_PRESETS: DatePreset[] = [\n  { id: \"today\", label: \"Hôm nay\", getValue: () => startOfDay(new Date()) },\n  { id: \"yesterday\", label: \"Hôm qua\", getValue: () => startOfDay(subDays(new Date(), 1)) },\n  { id: \"week-ago\", label: \"7 ngày trước\", getValue: () => startOfDay(subDays(new Date(), 7)) }\n];\n\n/** Preset mặc định cho ô chọn khoảng ngày (báo cáo, bộ lọc danh sách). */\nexport const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[] = [\n  { id: \"today\", label: \"Hôm nay\", getValue: () => ({ from: startOfDay(new Date()), to: startOfDay(new Date()) }) },\n  {\n    id: \"last-7\",\n    label: \"7 ngày qua\",\n    getValue: () => ({ from: startOfDay(subDays(new Date(), 6)), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-30\",\n    label: \"30 ngày qua\",\n    getValue: () => ({ from: startOfDay(subDays(new Date(), 29)), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"this-month\",\n    label: \"Tháng này\",\n    getValue: () => ({ from: startOfMonth(new Date()), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-month\",\n    label: \"Tháng trước\",\n    getValue: () => {\n      const previous = subMonths(new Date(), 1);\n      return { from: startOfMonth(previous), to: endOfMonth(previous) };\n    }\n  }\n];\n"],"mappings":"AAYA,SAAS,YAAY,YAAY,cAAc,SAAS,iBAAiB;AAIlE,MAAM,iBAAiB;AAgBvB,MAAM,uBAAqC;AAAA,EAChD,EAAE,IAAI,SAAS,OAAO,cAAW,UAAU,MAAM,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EACxE,EAAE,IAAI,aAAa,OAAO,cAAW,UAAU,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,CAAC,CAAC,EAAE;AAAA,EACxF,EAAE,IAAI,YAAY,OAAO,6BAAgB,UAAU,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,CAAC,CAAC,EAAE;AAC9F;AAGO,MAAM,6BAAgD;AAAA,EAC3D,EAAE,IAAI,SAAS,OAAO,cAAW,UAAU,OAAO,EAAE,MAAM,WAAW,oBAAI,KAAK,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE,GAAG;AAAA,EAChH;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU,OAAO,EAAE,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EAC1F;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU,OAAO,EAAE,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,EAAE,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EAC3F;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU,OAAO,EAAE,MAAM,aAAa,oBAAI,KAAK,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EAChF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU,MAAM;AACd,YAAM,WAAW,UAAU,oBAAI,KAAK,GAAG,CAAC;AACxC,aAAO,EAAE,MAAM,aAAa,QAAQ,GAAG,IAAI,WAAW,QAAQ,EAAE;AAAA,IAClE;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/date-picker-constants.ts"],"sourcesContent":["/**\n * Định dạng ngày và preset mặc định của `DatePicker` / `DateRangePicker`.\n *\n * Module **CỐ Ý không có `\"use client\"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy\n * đủ: mọi export của một file `\"use client\"` đến tay Server Component dưới dạng\n * client-reference proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning. Hằng dữ liệu thuần\n * (nhãn mặc định, preset, sentinel) là thứ trang server hay đọc nhất — spread để override một\n * khoá, đối chiếu giá trị, dựng danh sách — nên phải sống ngoài ranh giới client.\n *\n * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `date-picker.tsx` chỉ được `import`,\n * KHÔNG được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).\n */\nimport { endOfMonth, type Locale, startOfDay, startOfMonth, subDays, subMonths } from \"date-fns\";\nimport type { DateRange } from \"react-day-picker\";\n\n/**\n * Định dạng ngày của Việt Nam.\n *\n * ⚠ KHÔNG dùng nó làm định dạng mặc định nữa — `DatePicker`/`DateRangePicker` suy định dạng từ\n * `locale` bằng `dateFormatForLocale()` bên dưới, nên một app tiếng Anh ra `MM/dd/yyyy` thay vì\n * ngày Việt Nam. Hằng này giữ lại vì nó là API công khai và vẫn đúng khi app cần ghim cứng ngày\n * kiểu Việt Nam ở một chỗ cụ thể (hoá đơn in ra, tệp xuất cho cơ quan thuế…).\n */\nexport const VI_DATE_FORMAT = \"dd/MM/yyyy\";\n\n/**\n * Định dạng ngày SỐ của một `locale` date-fns — dùng cho cả `format`, `parse` và chuỗi gợi ý\n * trong ô nhập, nên ba thứ đó không bao giờ lệch nhau.\n *\n * `formatLong.date({ width: \"short\" })` là nguồn: `vi` cho `dd/MM/y`, `en-US` cho `MM/dd/yyyy`,\n * `ja` cho `y/MM/dd`. Một chữ `y` đơn được nong thành `yyyy` — không phải để đổi kết quả (`y` in\n * ra \"2026\" y hệt) mà vì chuỗi này CÒN LÀM PLACEHOLDER: gợi ý \"dd/MM/y\" dạy người dùng gõ sai.\n *\n * Nhờ vậy `vi` cho ra đúng `dd/MM/yyyy` như hằng bên trên — đổi sang cách suy này không làm đổi\n * một pixel nào ở các app đang chạy tiếng Việt.\n */\nexport function dateFormatForLocale(locale: Locale): string {\n  return locale.formatLong.date({ width: \"short\" }).replace(/y+/g, (run) => (run.length === 1 ? \"yyyy\" : run));\n}\n\n/**\n * Nhãn chỉ dành cho TRÌNH ĐỌC MÀN HÌNH của `DatePicker` — không hiện thành chữ trên giao diện.\n *\n * Vì sao vẫn phải override được: chúng là chuỗi tiếng Việt cứng nằm trong `sr-only`, nên một app\n * tiếng Anh trông thì đúng nhưng ĐỌC ra vẫn là tiếng Việt — lỗi không ai thấy trên ảnh chụp và\n * cũng không có gì báo đỏ.\n *\n * ⚠ `locale` KHÔNG dịch mấy nhãn này, và không thể: locale của date-fns chỉ mang cách viết ngày\n * tháng, không mang chuỗi giao diện. Đổi ngôn ngữ app thì phải truyền CẢ `locale` lẫn `labels`.\n */\nexport interface DatePickerLabels {\n  /** Nút xoá ngày đang chọn (`DatePicker`) */\n  clear: string;\n  /** Nút xoá khoảng ngày đang chọn (`DateRangePicker`) */\n  clearRange: string;\n  /** Nút mở lịch (`DatePicker`; `DateRangePicker` mở lịch bằng chính ô của nó nên không dùng khoá này) */\n  openCalendar: string;\n}\n\nexport const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels = {\n  clear: \"Xóa ngày\",\n  clearRange: \"Xóa khoảng ngày\",\n  openCalendar: \"Mở lịch\"\n};\n\nexport interface DatePreset {\n  id: string;\n  label: string;\n  /** Trả về ngày (DatePicker) hoặc khoảng ngày (DateRangePicker) tại thời điểm bấm */\n  getValue: () => Date;\n}\n\nexport interface DateRangePreset {\n  id: string;\n  label: string;\n  getValue: () => DateRange;\n}\n\n/** Preset mặc định cho ô chọn một ngày. */\nexport const DEFAULT_DATE_PRESETS: DatePreset[] = [\n  { id: \"today\", label: \"Hôm nay\", getValue: () => startOfDay(new Date()) },\n  { id: \"yesterday\", label: \"Hôm qua\", getValue: () => startOfDay(subDays(new Date(), 1)) },\n  { id: \"week-ago\", label: \"7 ngày trước\", getValue: () => startOfDay(subDays(new Date(), 7)) }\n];\n\n/** Preset mặc định cho ô chọn khoảng ngày (báo cáo, bộ lọc danh sách). */\nexport const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[] = [\n  { id: \"today\", label: \"Hôm nay\", getValue: () => ({ from: startOfDay(new Date()), to: startOfDay(new Date()) }) },\n  {\n    id: \"last-7\",\n    label: \"7 ngày qua\",\n    getValue: () => ({ from: startOfDay(subDays(new Date(), 6)), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-30\",\n    label: \"30 ngày qua\",\n    getValue: () => ({ from: startOfDay(subDays(new Date(), 29)), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"this-month\",\n    label: \"Tháng này\",\n    getValue: () => ({ from: startOfMonth(new Date()), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-month\",\n    label: \"Tháng trước\",\n    getValue: () => {\n      const previous = subMonths(new Date(), 1);\n      return { from: startOfMonth(previous), to: endOfMonth(previous) };\n    }\n  }\n];\n"],"mappings":"AAYA,SAAS,YAAyB,YAAY,cAAc,SAAS,iBAAiB;AAW/E,MAAM,iBAAiB;AAavB,SAAS,oBAAoB,QAAwB;AAC1D,SAAO,OAAO,WAAW,KAAK,EAAE,OAAO,QAAQ,CAAC,EAAE,QAAQ,OAAO,CAAC,QAAS,IAAI,WAAW,IAAI,SAAS,GAAI;AAC7G;AAqBO,MAAM,6BAA+C;AAAA,EAC1D,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,cAAc;AAChB;AAgBO,MAAM,uBAAqC;AAAA,EAChD,EAAE,IAAI,SAAS,OAAO,cAAW,UAAU,MAAM,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EACxE,EAAE,IAAI,aAAa,OAAO,cAAW,UAAU,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,CAAC,CAAC,EAAE;AAAA,EACxF,EAAE,IAAI,YAAY,OAAO,6BAAgB,UAAU,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,CAAC,CAAC,EAAE;AAC9F;AAGO,MAAM,6BAAgD;AAAA,EAC3D,EAAE,IAAI,SAAS,OAAO,cAAW,UAAU,OAAO,EAAE,MAAM,WAAW,oBAAI,KAAK,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE,GAAG;AAAA,EAChH;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU,OAAO,EAAE,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EAC1F;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU,OAAO,EAAE,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,EAAE,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EAC3F;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU,OAAO,EAAE,MAAM,aAAa,oBAAI,KAAK,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EAChF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,UAAU,MAAM;AACd,YAAM,WAAW,UAAU,oBAAI,KAAK,GAAG,CAAC;AACxC,aAAO,EAAE,MAAM,aAAa,QAAQ,GAAG,IAAI,WAAW,QAAQ,EAAE;AAAA,IAClE;AAAA,EACF;AACF;","names":[]}

package/dist/components/composite/date-picker.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { Locale } from 'date-fns';
 import { DateRange } from 'react-day-picker';
 export { DateRange } from 'react-day-picker';
-import { DatePreset, DateRangePreset } from './date-picker-constants.js';
+import { DatePreset, DatePickerLabels, DateRangePreset } from './date-picker-constants.js';
 
 interface DatePickerProps {
     value?: Date | null;
@@ -15,6 +16,20 @@ interface DatePickerProps {
     clearable?: boolean;
     /** Cột preset bên trái lịch (mặc định ẩn) */
     presets?: DatePreset[] | false;
+    /**
+     * 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ự
+     * ngày/tháng của ô nhập, qua `dateFormatForLocale()`.
+     *
+     * 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à
+     * bắt người dùng gõ `dd/MM/yyyy` — hai lỗi không có gì báo đỏ.
+     */
+    locale?: Locale;
+    /**
+     * 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ư
+     * 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ữ.
+     */
+    dateFormat?: string;
+    labels?: Partial<DatePickerLabels>;
     className?: string;
     id?: string;
     name?: string;
@@ -31,7 +46,7 @@ interface DatePickerProps {
  * 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ũ
  * khi rời ô, không âm thầm nuốt dữ liệu.
  */
-declare function DatePicker({ value, onValueChange, placeholder, disabled, minDate, maxDate, clearable, presets, className, id, name, ...aria }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ value, onValueChange, placeholder, disabled, minDate, maxDate, clearable, presets, locale, dateFormat, labels, className, id, name, ...aria }: DatePickerProps): React.JSX.Element;
 interface DateRangePickerProps {
     value?: DateRange | null;
     onValueChange: (value: DateRange | null) => void;
@@ -44,6 +59,11 @@ interface DateRangePickerProps {
     presets?: DateRangePreset[] | false;
     /** Số tháng hiện cùng lúc (mặc định 2 trên màn rộng) */
     numberOfMonths?: number;
+    /** Ngôn ngữ date-fns (mặc định `vi`) — xem `DatePickerProps.locale`. */
+    locale?: Locale;
+    /** Ghi đè định dạng ngày; bỏ trống thì suy từ `locale`. */
+    dateFormat?: string;
+    labels?: Partial<DatePickerLabels>;
     className?: string;
     id?: string;
     "aria-label"?: string;
@@ -56,6 +76,6 @@ interface DateRangePickerProps {
  * 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
  * 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.
  */
-declare function DateRangePicker({ value, onValueChange, placeholder, disabled, minDate, maxDate, clearable, presets, numberOfMonths, className, id, ...aria }: DateRangePickerProps): React.JSX.Element;
+declare function DateRangePicker({ value, onValueChange, placeholder, disabled, minDate, maxDate, clearable, presets, numberOfMonths, locale, dateFormat, labels, className, id, ...aria }: DateRangePickerProps): React.JSX.Element;
 
 export { DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps };

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

@@ -10,8 +10,9 @@ 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_RANGE_PRESETS,
-  VI_DATE_FORMAT
+  dateFormatForLocale
 } from "./date-picker-constants.js";
 function isOutOfRange(date, minDate, maxDate) {
   if (minDate && isBefore(date, startOfDay(minDate))) return true;
@@ -27,31 +28,36 @@ function buildDisabledMatchers(minDate, maxDate) {
 function DatePicker({
   value,
   onValueChange,
-  placeholder = VI_DATE_FORMAT,
+  placeholder,
   disabled = false,
   minDate,
   maxDate,
   clearable = true,
   presets = false,
+  locale = vi,
+  dateFormat,
+  labels,
   className,
   id,
   name,
   ...aria
 }) {
+  const pattern = dateFormat ?? dateFormatForLocale(locale);
+  const label = { ...DEFAULT_DATE_PICKER_LABELS, ...labels };
   const [open, setOpen] = useState(false);
-  const [text, setText] = useState(() => value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : "");
+  const [text, setText] = useState(() => value ? formatDate(value, pattern, { locale }) : "");
   useEffect(() => {
-    setText(value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : "");
-  }, [value]);
+    setText(value ? formatDate(value, pattern, { locale }) : "");
+  }, [value, pattern, locale]);
   const commitText = (raw) => {
     const trimmed = raw.trim();
     if (trimmed === "") {
       onValueChange(null);
       return;
     }
-    const parsed = parse(trimmed, VI_DATE_FORMAT, /* @__PURE__ */ new Date(), { locale: vi });
+    const parsed = parse(trimmed, pattern, /* @__PURE__ */ new Date(), { locale });
     if (!isValid(parsed) || isOutOfRange(parsed, minDate, maxDate)) {
-      setText(value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : "");
+      setText(value ? formatDate(value, pattern, { locale }) : "");
       return;
     }
     onValueChange(startOfDay(parsed));
@@ -65,7 +71,7 @@ function DatePicker({
         name,
         value: text,
         disabled,
-        placeholder,
+        placeholder: placeholder ?? pattern,
         inputMode: "numeric",
         autoComplete: "off",
         onChange: (event) => setText(event.target.value),
@@ -91,7 +97,7 @@ function DatePicker({
           onClick: () => onValueChange(null),
           children: [
             /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "X\xF3a ng\xE0y" })
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: label.clear })
           ]
         }
       ),
@@ -106,7 +112,7 @@ function DatePicker({
             disabled,
             children: [
               /* @__PURE__ */ jsx(CalendarDays, { "aria-hidden": "true", className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "M\u1EDF l\u1ECBch" })
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: label.openCalendar })
             ]
           }
         ) }),
@@ -130,7 +136,7 @@ function DatePicker({
             Calendar,
             {
               mode: "single",
-              locale: vi,
+              locale,
               autoFocus: true,
               selected: value ?? void 0,
               defaultMonth: value ?? void 0,
@@ -146,11 +152,11 @@ function DatePicker({
     ] })
   ] });
 }
-function formatRange(range) {
+function formatRange(range, pattern, locale) {
   if (!range?.from) return null;
-  const from = formatDate(range.from, VI_DATE_FORMAT, { locale: vi });
+  const from = formatDate(range.from, pattern, { locale });
   if (!range.to) return from;
-  return `${from} \u2013 ${formatDate(range.to, VI_DATE_FORMAT, { locale: vi })}`;
+  return `${from} \u2013 ${formatDate(range.to, pattern, { locale })}`;
 }
 function DateRangePicker({
   value,
@@ -162,12 +168,17 @@ function DateRangePicker({
   clearable = true,
   presets = DEFAULT_DATE_RANGE_PRESETS,
   numberOfMonths = 2,
+  locale = vi,
+  dateFormat,
+  labels,
   className,
   id,
   ...aria
 }) {
+  const pattern = dateFormat ?? dateFormatForLocale(locale);
+  const text = { ...DEFAULT_DATE_PICKER_LABELS, ...labels };
   const [open, setOpen] = useState(false);
-  const label = formatRange(value);
+  const label = formatRange(value, pattern, locale);
   const presetList = presets === false ? [] : presets;
   const showClear = clearable && Boolean(label) && !disabled;
   return (
@@ -218,7 +229,7 @@ function DateRangePicker({
             Calendar,
             {
               mode: "range",
-              locale: vi,
+              locale,
               autoFocus: true,
               numberOfMonths,
               selected: value ?? void 0,
@@ -241,7 +252,7 @@ function DateRangePicker({
           onClick: () => onValueChange(null),
           children: [
             /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "X\xF3a kho\u1EA3ng ng\xE0y" })
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: text.clearRange })
           ]
         }
       )

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, 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 DatePreset,\n  type DateRangePreset,\n  DEFAULT_DATE_RANGE_PRESETS,\n  VI_DATE_FORMAT\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  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 = VI_DATE_FORMAT,\n  disabled = false,\n  minDate,\n  maxDate,\n  clearable = true,\n  presets = false,\n  className,\n  id,\n  name,\n  ...aria\n}: DatePickerProps) {\n  const [open, setOpen] = useState(false);\n  const [text, setText] = useState(() => (value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : \"\"));\n\n  // Đồng bộ khi giá trị đổi từ bên ngoài (reset form, chọn preset, load dữ liệu về).\n  useEffect(() => {\n    setText(value ? formatDate(value, VI_DATE_FORMAT, { locale: vi }) : \"\");\n  }, [value]);\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, VI_DATE_FORMAT, new Date(), { locale: vi });\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, VI_DATE_FORMAT, { locale: vi }) : \"\");\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}\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\">Xóa ngày</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\">Mở lịch</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={vi}\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  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): string | null {\n  if (!range?.from) return null;\n  const from = formatDate(range.from, VI_DATE_FORMAT, { locale: vi });\n  if (!range.to) return from;\n  return `${from} – ${formatDate(range.to, VI_DATE_FORMAT, { locale: vi })}`;\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  className,\n  id,\n  ...aria\n}: DateRangePickerProps) {\n  const [open, setOpen] = useState(false);\n  const label = formatRange(value);\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={vi}\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\">Xóa khoảng ngày</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 { 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":";AAsIM,cAkCI,YAlCJ;AApIN,SAAS,UAAU,YAAY,SAAS,UAAU,SAAsB,OAAO,kBAAkB;AACjG,SAAS,UAAU;AACnB,SAAS,cAAc,SAAS;AAChC,SAAS,WAAW,gBAAgB;AAEpC,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,aAAa,MAAY,SAAgB,SAAyB;AACzE,MAAI,WAAW,SAAS,MAAM,WAAW,OAAO,CAAC,EAAG,QAAO;AAC3D,MAAI,WAAW,QAAQ,MAAM,WAAW,OAAO,CAAC,EAAG,QAAO;AAC1D,SAAO;AACT;AAQA,SAAS,sBAAsB,SAAgB,SAAuC;AACpF,QAAM,WAAsB,CAAC;AAC7B,MAAI,QAAS,UAAS,KAAK,EAAE,QAAQ,WAAW,OAAO,EAAE,CAAC;AAC1D,MAAI,QAAS,UAAS,KAAK,EAAE,OAAO,WAAW,OAAO,EAAE,CAAC;AACzD,SAAO,SAAS,SAAS,IAAI,WAAW;AAC1C;AA6CO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,UAAU,cAAc,oBAAoB,MAAM;AACxD,QAAM,QAAQ,EAAE,GAAG,4BAA4B,GAAG,OAAO;AAEzD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAO,QAAQ,WAAW,OAAO,SAAS,EAAE,OAAO,CAAC,IAAI,EAAG;AAK5F,YAAU,MAAM;AACd,YAAQ,QAAQ,WAAW,OAAO,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE;AAAA,EAC7D,GAAG,CAAC,OAAO,SAAS,MAAM,CAAC;AAE3B,QAAM,aAAa,CAAC,QAAgB;AAClC,UAAM,UAAU,IAAI,KAAK;AACzB,QAAI,YAAY,IAAI;AAClB,oBAAc,IAAI;AAClB;AAAA,IACF;AACA,UAAM,SAAS,MAAM,SAAS,SAAS,oBAAI,KAAK,GAAG,EAAE,OAAO,CAAC;AAC7D,QAAI,CAAC,QAAQ,MAAM,KAAK,aAAa,QAAQ,SAAS,OAAO,GAAG;AAE9D,cAAQ,QAAQ,WAAW,OAAO,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE;AAC3D;AAAA,IACF;AACA,kBAAc,WAAW,MAAM,CAAC;AAAA,EAClC;AAEA,QAAM,aAAa,YAAY,QAAQ,CAAC,IAAI;AAE5C,SACE,qBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GACtC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,aAAa,eAAe;AAAA,QAC5B,WAAU;AAAA,QACV,cAAa;AAAA,QACb,UAAU,CAAC,UAAU,QAAQ,MAAM,OAAO,KAAK;AAAA,QAC/C,QAAQ,CAAC,UAAU,WAAW,MAAM,OAAO,KAAK;AAAA,QAChD,WAAW,CAAC,UAAU;AACpB,cAAI,MAAM,QAAQ,SAAS;AACzB,kBAAM,eAAe;AACrB,uBAAW,IAAI;AAAA,UACjB;AAAA,QACF;AAAA,QACA,WAAU;AAAA,QACT,GAAG;AAAA;AAAA,IACN;AAAA,IAcA,qBAAC,SAAI,WAAU,mGACZ;AAAA,mBAAa,SAAS,CAAC,YACtB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,cAAc,IAAI;AAAA,UAEjC;AAAA,gCAAC,KAAE,eAAY,QAAO,WAAU,YAAW;AAAA,YAC3C,oBAAC,UAAK,WAAU,WAAW,gBAAM,OAAM;AAAA;AAAA;AAAA,MACzC;AAAA,MAEF,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,4BAAC,kBAAe,SAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,WAAU;AAAA,YACV;AAAA,YAEA;AAAA,kCAAC,gBAAa,eAAY,QAAO,WAAU,UAAS;AAAA,cACpD,oBAAC,UAAK,WAAU,WAAW,gBAAM,cAAa;AAAA;AAAA;AAAA,QAChD,GACF;AAAA,QACA,qBAAC,kBAAe,OAAM,OAAM,WAAU,yBACnC;AAAA,qBAAW,SAAS,KACnB,oBAAC,SAAI,WAAU,wDACZ,qBAAW,IAAI,CAAC,WACf;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS,MAAM;AACb,8BAAc,OAAO,SAAS,CAAC;AAC/B,wBAAQ,KAAK;AAAA,cACf;AAAA,cAEC,iBAAO;AAAA;AAAA,YAVH,OAAO;AAAA,UAWd,CACD,GACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA,WAAS;AAAA,cACT,UAAU,SAAS;AAAA,cACnB,cAAc,SAAS;AAAA,cACvB,UAAU,sBAAsB,SAAS,OAAO;AAAA,cAChD,UAAU,CAAC,SAAS;AAClB,8BAAc,OAAO,WAAW,IAAI,IAAI,IAAI;AAC5C,wBAAQ,KAAK;AAAA,cACf;AAAA;AAAA,UACF;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;AA0BA,SAAS,YAAY,OAAqC,SAAiB,QAA+B;AACxG,MAAI,CAAC,OAAO,KAAM,QAAO;AACzB,QAAM,OAAO,WAAW,MAAM,MAAM,SAAS,EAAE,OAAO,CAAC;AACvD,MAAI,CAAC,MAAM,GAAI,QAAO;AACtB,SAAO,GAAG,IAAI,WAAM,WAAW,MAAM,IAAI,SAAS,EAAE,OAAO,CAAC,CAAC;AAC/D;AAQO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,UAAU,cAAc,oBAAoB,MAAM;AACxD,QAAM,OAAO,EAAE,GAAG,4BAA4B,GAAG,OAAO;AAExD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,YAAY,OAAO,SAAS,MAAM;AAChD,QAAM,aAAa,YAAY,QAAQ,CAAC,IAAI;AAE5C,QAAM,YAAY,aAAa,QAAQ,KAAK,KAAK,CAAC;AAElD;AAAA;AAAA;AAAA,IAGE,qBAAC,SAAI,WAAU,mBACb;AAAA,2BAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,4BAAC,kBAAe,SAAO,MACrB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL;AAAA,YACA,SAAQ;AAAA,YACR;AAAA,YACA,WAAW;AAAA;AAAA;AAAA;AAAA,cAIT;AAAA,cACA,CAAC,SAAS;AAAA,cACV,aAAa;AAAA,cACb;AAAA,YACF;AAAA,YACC,GAAG;AAAA,YAEJ;AAAA,kCAAC,gBAAa,eAAY,QAAO,WAAU,yCAAwC;AAAA,cACnF,oBAAC,UAAK,WAAU,YAAY,mBAAS,aAAY;AAAA;AAAA;AAAA,QACnD,GACF;AAAA,QACA,qBAAC,kBAAe,OAAM,SAAQ,WAAU,8CACrC;AAAA,qBAAW,SAAS,KACnB,oBAAC,SAAI,WAAU,0FACZ,qBAAW,IAAI,CAAC,WACf;AAAA,YAAC;AAAA;AAAA,cAEC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS,MAAM;AACb,8BAAc,OAAO,SAAS,CAAC;AAC/B,wBAAQ,KAAK;AAAA,cACf;AAAA,cAEC,iBAAO;AAAA;AAAA,YAVH,OAAO;AAAA,UAWd,CACD,GACH;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA,WAAS;AAAA,cACT;AAAA,cACA,UAAU,SAAS;AAAA,cACnB,cAAc,OAAO,QAAQ;AAAA,cAC7B,UAAU,sBAAsB,SAAS,OAAO;AAAA,cAChD,UAAU,CAAC,UAAU,cAAc,SAAS,IAAI;AAAA;AAAA,UAClD;AAAA,WACF;AAAA,SACF;AAAA,MAEC;AAAA;AAAA,MAGC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,cAAc,IAAI;AAAA,UAEjC;AAAA,gCAAC,KAAE,eAAY,QAAO,WAAU,YAAW;AAAA,YAC3C,oBAAC,UAAK,WAAU,WAAW,eAAK,YAAW;AAAA;AAAA;AAAA,MAC7C;AAAA,OAEJ;AAAA;AAEJ;","names":[]}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { ComponentProps } from 'react';
+import { Locale } from 'date-fns';
 
 interface RelativeTimeProps extends Omit<ComponentProps<"time">, "dateTime" | "children"> {
     /** Thời điểm cần hiển thị: Date, ISO string hoặc epoch ms */
@@ -24,7 +25,20 @@ interface RelativeTimeProps extends Omit<ComponentProps<"time">, "dateTime" | "c
      * giờ chỉ để render lại y nguyên mỗi phút.
      */
     updateIntervalMs?: number;
-    /** Định dạng của tooltip `title` (mặc định "HH:mm 'ngày' dd/MM/yyyy") */
+    /**
+     * 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.
+     *
+     * 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".
+     */
+    locale?: Locale;
+    /**
+     * Định dạng của tooltip `title`. Mặc định `"Pp"` — ngày + giờ THEO `locale`, nên nó tự đúng ở
+     * mọi ngôn ngữ (vi: `29/08/2026 09:12`; en-US: `08/29/2026, 9:12 AM`).
+     *
+     * ⚠ 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
+     * Việt vào mọi ngôn ngữ. Cần lại đúng câu cũ thì truyền chính chuỗi đó.
+     */
     titleFormat?: string;
     /** Nội dung thay thế khi `value` không hợp lệ */
     fallback?: string;
@@ -40,9 +54,9 @@ interface RelativeTimeProps extends Omit<ComponentProps<"time">, "dateTime" | "c
  * Có `suppressHydrationWarning` vì đồng hồ server và client gần như luôn lệch vài giây — trừ khi
  * 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.
  *
- * Hai lối đo dùng CHUNG một cách diễn đạt (`…Strict` của date-fns, locale `vi`), nên đổi giữa
+ * 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, titleFormat, fallback, className, ...props }: RelativeTimeProps): React.JSX.Element;
+declare function RelativeTime({ value, now, addSuffix, updateIntervalMs, locale, titleFormat, fallback, className, ...props }: RelativeTimeProps): React.JSX.Element;
 
 export { RelativeTime, type RelativeTimeProps };

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

@@ -11,7 +11,8 @@ function RelativeTime({
   now,
   addSuffix = true,
   updateIntervalMs = 6e4,
-  titleFormat = "HH:mm 'ng\xE0y' dd/MM/yyyy",
+  locale = vi,
+  titleFormat = "Pp",
   fallback = "\u2014",
   className,
   ...props
@@ -32,11 +33,11 @@ function RelativeTime({
     "time",
     {
       dateTime: date.toISOString(),
-      title: formatDate(date, titleFormat, { locale: vi }),
+      title: formatDate(date, titleFormat, { locale }),
       suppressHydrationWarning: true,
       className,
       ...props,
-      children: now ? formatDistanceStrict(date, now, { addSuffix, locale: vi }) : formatDistanceToNowStrict(date, { addSuffix, locale: vi })
+      children: now ? formatDistanceStrict(date, now, { addSuffix, locale }) : formatDistanceToNowStrict(date, { addSuffix, locale })
     }
   );
 }

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 } 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  /** Định dạng của tooltip `title` (mặc định \"HH:mm 'ngày' dd/MM/yyyy\") */\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, locale `vi`), 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  titleFormat = \"HH:mm 'ngày' dd/MM/yyyy\",\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: vi })}\n      suppressHydrationWarning\n      className={className}\n      {...props}\n    >\n      {now\n        ? formatDistanceStrict(date, now, { addSuffix, locale: vi })\n        : formatDistanceToNowStrict(date, { addSuffix, locale: vi })}\n    </time>\n  );\n}\n"],"mappings":";AAiFW;AA/EX,SAAS,UAAU,YAAY,sBAAsB,2BAA2B,eAAe;AAC/F,SAAS,UAAU;AACnB,SAA8B,WAAW,gBAAgB;AA+BzD,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,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,QAAQ,GAAG,CAAC;AAAA,MACnD,0BAAwB;AAAA,MACxB;AAAA,MACC,GAAG;AAAA,MAEH,gBACG,qBAAqB,MAAM,KAAK,EAAE,WAAW,QAAQ,GAAG,CAAC,IACzD,0BAA0B,MAAM,EAAE,WAAW,QAAQ,GAAG,CAAC;AAAA;AAAA,EAC/D;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 { 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":[]}

package/dist/components/ui/alert.js

@@ -14,11 +14,13 @@ const alertVariants = cva(
          *     tiêu đề    6,51:1 (light) · 11,60:1 (dark) ✓
          *     mô tả /90  5,17:1 (light) ·  9,56:1 (dark) ✓
          *
-         * ⚠ Ở bảng màu LIGHT, `--warning-ink` và `--primary-ink` là CÙNG một giá trị (#7A5800 —
-         * `--yellow-ink` trỏ về `--gold-500`). Với `Alert` chuyện đó vô hại vì variant `default`
-         * dùng `--card-foreground`, nên `warning` vẫn khác hẳn nó (2,90:1). Nhưng nó là lý do
-         * `Progress` KHÔNG có tông `warning` — xem chú thích ở đó trước khi thêm `warning` cho một
-         * component nào khác mà mặc định đang là brand.
+         * ⚠ Ở bảng tương phản cao (light), `--warning-ink` và `--primary-ink` là CÙNG một giá trị
+         * (#7A5800 — `--yellow-ink` trỏ về `--gold-500`), và ở cả hai bảng dark chúng chỉ cách nhau
+         * 1,0x:1. Với `Alert` chuyện đó vô hại vì variant `default` dùng `--card-foreground`, nên
+         * `warning` vẫn khác hẳn nó (2,90:1). Nhưng component nào có mặc định là BRAND thì tông
+         * `warning` phải mang thêm một tín hiệu KHÔNG PHẢI MÀU — `Progress` giải bằng vạch chéo
+         * `hazard-stripes`; đọc chú thích đầu `progress.tsx` trước khi thêm `warning` cho một
+         * component kiểu đó.
          */
         warning: "text-warning-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-warning-ink/90",
         destructive: "text-destructive-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-ink/90"

package/dist/components/ui/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/*\n * Variant `destructive` dùng bậc `--destructive-ink`, KHÔNG dùng `--destructive`.\n * `--destructive` là màu TÔ NỀN (nút xoá) và cố ý ghim một giá trị ở cả hai theme, nên làm CHỮ\n * trên `bg-card` chỉ được 3,53:1 ở dark ✗; phần mô tả còn bị hạ thêm bằng `/90` nên hỏng ở CẢ\n * hai theme (4,32:1 light · 3,08:1 dark ✗).\n * Sau khi đổi (đo trên `--card`): tiêu đề 7,15:1 (light) / 6,42:1 (dark); mô tả `/90` 5,78:1\n * (light) / 5,40:1 (dark) ✓ — bậc `/90` giữ lại vì nó là phân cấp thị giác, và ở bậc ink nó vẫn\n * còn dư biên so với AA 4,5:1.\n */\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        /*\n         * `warning` cùng khuôn với `destructive`, chỉ đổi bậc ink — và cũng vì lý do đó: `--warning`\n         * là màu TÔ NỀN (#E8B824 ở light), làm chữ trên `bg-card` chỉ 1,59:1 ✗. Bậc ink đạt AA dư\n         * biên ở cả hai theme (đo trên `--card`):\n         *     tiêu đề    6,51:1 (light) · 11,60:1 (dark) ✓\n         *     mô tả /90  5,17:1 (light) ·  9,56:1 (dark) ✓\n         *\n         * ⚠ Ở bảng màu LIGHT, `--warning-ink` và `--primary-ink` là CÙNG một giá trị (#7A5800 —\n         * `--yellow-ink` trỏ về `--gold-500`). Với `Alert` chuyện đó vô hại vì variant `default`\n         * dùng `--card-foreground`, nên `warning` vẫn khác hẳn nó (2,90:1). Nhưng nó là lý do\n         * `Progress` KHÔNG có tông `warning` — xem chú thích ở đó trước khi thêm `warning` cho một\n         * component nào khác mà mặc định đang là brand.\n         */\n        warning: \"text-warning-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-warning-ink/90\",\n        destructive:\n          \"text-destructive-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-ink/90\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n);\n\nexport interface AlertProps extends React.ComponentProps<\"div\">, VariantProps<typeof alertVariants> {}\nexport type AlertTitleProps = React.ComponentProps<\"div\">;\nexport type AlertDescriptionProps = React.ComponentProps<\"div\">;\n\nfunction Alert({ className, variant, ...props }: AlertProps) {\n  return <div data-slot=\"alert\" role=\"alert\" className={cn(alertVariants({ variant }), className)} {...props} />;\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":"AAgDS;AAhDT,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAWnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAcT,SAAS;AAAA,QACT,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAMA,SAAS,MAAM,EAAE,WAAW,SAAS,GAAG,MAAM,GAAe;AAC3D,SAAO,oBAAC,SAAI,aAAU,SAAQ,MAAK,SAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AAC9G;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,+DAA+D,SAAS;AAAA,MACrF,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/*\n * Variant `destructive` dùng bậc `--destructive-ink`, KHÔNG dùng `--destructive`.\n * `--destructive` là màu TÔ NỀN (nút xoá) và cố ý ghim một giá trị ở cả hai theme, nên làm CHỮ\n * trên `bg-card` chỉ được 3,53:1 ở dark ✗; phần mô tả còn bị hạ thêm bằng `/90` nên hỏng ở CẢ\n * hai theme (4,32:1 light · 3,08:1 dark ✗).\n * Sau khi đổi (đo trên `--card`): tiêu đề 7,15:1 (light) / 6,42:1 (dark); mô tả `/90` 5,78:1\n * (light) / 5,40:1 (dark) ✓ — bậc `/90` giữ lại vì nó là phân cấp thị giác, và ở bậc ink nó vẫn\n * còn dư biên so với AA 4,5:1.\n */\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        /*\n         * `warning` cùng khuôn với `destructive`, chỉ đổi bậc ink — và cũng vì lý do đó: `--warning`\n         * là màu TÔ NỀN (#E8B824 ở light), làm chữ trên `bg-card` chỉ 1,59:1 ✗. Bậc ink đạt AA dư\n         * biên ở cả hai theme (đo trên `--card`):\n         *     tiêu đề    6,51:1 (light) · 11,60:1 (dark) ✓\n         *     mô tả /90  5,17:1 (light) ·  9,56:1 (dark) ✓\n         *\n         * ⚠ Ở bảng tương phản cao (light), `--warning-ink` và `--primary-ink` là CÙNG một giá trị\n         * (#7A5800 — `--yellow-ink` trỏ về `--gold-500`), và ở cả hai bảng dark chúng chỉ cách nhau\n         * 1,0x:1. Với `Alert` chuyện đó vô hại vì variant `default` dùng `--card-foreground`, nên\n         * `warning` vẫn khác hẳn nó (2,90:1). Nhưng component nào có mặc định là BRAND thì tông\n         * `warning` phải mang thêm một tín hiệu KHÔNG PHẢI MÀU — `Progress` giải bằng vạch chéo\n         * `hazard-stripes`; đọc chú thích đầu `progress.tsx` trước khi thêm `warning` cho một\n         * component kiểu đó.\n         */\n        warning: \"text-warning-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-warning-ink/90\",\n        destructive:\n          \"text-destructive-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-ink/90\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n);\n\nexport interface AlertProps extends React.ComponentProps<\"div\">, VariantProps<typeof alertVariants> {}\nexport type AlertTitleProps = React.ComponentProps<\"div\">;\nexport type AlertDescriptionProps = React.ComponentProps<\"div\">;\n\nfunction Alert({ className, variant, ...props }: AlertProps) {\n  return <div data-slot=\"alert\" role=\"alert\" className={cn(alertVariants({ variant }), className)} {...props} />;\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":"AAkDS;AAlDT,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAWnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBT,SAAS;AAAA,QACT,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAMA,SAAS,MAAM,EAAE,WAAW,SAAS,GAAG,MAAM,GAAe;AAC3D,SAAO,oBAAC,SAAI,aAAU,SAAQ,MAAK,SAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AAC9G;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,+DAA+D,SAAS;AAAA,MACrF,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/progress.d.ts

@@ -34,34 +34,56 @@ import * as React from 'react';
  * Đây đúng vai trò hợp đồng đặt cho `--control-edge` (styles.css §RANH GIỚI): "khi nền control
  * trong suốt/nhạt thì VIỀN là thứ duy nhất khoanh vùng".
  *
- * ─ TÔNG: BA GIÁ TRỊ, VÀ KHÔNG CÓ `warning` ─
+ * ─ TÔNG: BỐN GIÁ TRỊ, VÀ `warning` KHÔNG ĐƯỢC PHÉP CHỈ LÀ MỘT MÀU KHÁC ─
  * `tone` đổi CẢ phần đã chạy lẫn rãnh sang cùng một bậc ink, nên tỉ lệ đọc-được giữ nguyên cấu
- * trúc của bản mặc định. Đo trên ba bề mặt (`--background`, `--card`, `--muted`), tệ nhất mỗi cột:
+ * trúc của bản mặc định. Đo trên ba bề mặt (`--background`, `--card`, `--muted`), tệ nhất mỗi cột.
+ *
+ * ⚠ Cột "light"/"dark" dưới đây là **bảng TƯƠNG PHẢN CAO** — đúng bảng mà cổng màu đo, và lý do
+ * ghi ở đầu `scripts/a11y/tailwind.mjs`. Ở bảng mặc định (bản duyệt comitor-ds) `--primary-ink`
+ * chính là `--primary` gold #E8B824, nên tông `default` chỉ được 1,73:1 với nền và 1,55:1 với
+ * rãnh: đó là con số của BẢN DUYỆT, không phải lỗi của component — đổi nó là đổi bảng màu.
  *
  *     tông           đã chạy ⇄ nền trang        đã chạy ⇄ rãnh cùng tông /20
  *     default        6,09:1 (light) 10,80 (dark)   4,54:1 (light) 6,52:1 (dark) ✓
  *     success        6,09:1         9,25           4,55:1         5,88:1        ✓
+ *     warning        6,09:1         10,52          4,54:1         6,47:1        ✓
  *     destructive    6,68:1         5,82           4,85:1         4,25:1        ✓
  *
- * ⚠ KHÔNG có `warning`, và đây là quyết định ĐO ĐƯỢC chứ không phải bỏ sót: ở bảng màu light
- * `--warning-ink` và `--primary-ink` là CÙNG một giá trị (#7A5800 — `--yellow-ink` trỏ về
- * `--gold-500`, xem styles.css:174), nên một thanh `tone="warning"` sẽ trông y hệt thanh mặc định.
- * Ở dark hai bậc cũng chỉ cách nhau một nấc vàng (#FACC15 ⇄ #F5D060). Một API đổi tông mà không
- * đổi được gì là thứ tệ hơn không có API: chỗ gọi tưởng đã cảnh báo, người dùng không thấy gì.
+ * ⚠ NHƯNG `warning` KHÔNG phân biệt được với `default` BẰNG MÀU, và đó là số đo chứ không phải
+ * cảm tính. Đo `--warning-ink` ⇄ `--primary-ink` trên cả BỐN bảng màu của gói:
+ *
+ *     light (mặc định)         #7A5800 ⇄ #E8B824   3,51:1  ✓
+ *     light (tương phản cao)   #7A5800 ⇄ #7A5800   1,00:1  ✗ CÙNG MỘT HEX
+ *     dark  (mặc định)         #F2C94C ⇄ #F5D060   1,06:1  ✗
+ *     dark  (tương phản cao)   #FACC15 ⇄ #F5D060   1,03:1  ✗
+ *
+ * Ba trên bốn bảng màu cho ra hai thanh trông y hệt nhau. Đây KHÔNG sửa được ở tầng token: brand
+ * của Comitor là gold, warning là yellow — cùng một sắc. Muốn tách hai bậc ink ra 3:1 thì một
+ * trong hai phải rời khỏi vùng đọc-được: với nền trắng, chữ đạt 4,5:1 đòi độ chói ≤ 0,183, mà
+ * cách `--gold-500` (0,111) đúng 3:1 thì phải ≤ 0,004 (gần như đen) hoặc ≥ 0,433 (quá sáng để
+ * làm chữ). Hai ràng buộc không giao nhau — không có hex nào thoả cả hai.
+ *
+ * Nên tông `warning` nói bằng thứ KHÔNG PHẢI MÀU: `hazard-stripes` (khai ở styles.css) khoét
+ * những rãnh chéo xuyên phần đã chạy để nền rãnh lộ ra. Ranh giới vạch ⇄ rãnh chính là cặp
+ * "đã chạy ⇄ rãnh" đã đo ở bảng trên (4,54:1 light · 6,47:1 dark ✓), nên vạch KHÔNG thêm màu nào
+ * và không cần đo thêm. Đây đúng là WCAG 1.4.1: tín hiệu không được chỉ nằm ở màu — bản vạch còn
+ * đọc ra ở chế độ xám, chỗ mà mọi khác biệt sắc độ đều biến mất.
+ *
+ * ⚠ Vì vậy: KHÔNG được "đơn giản hoá" `warning` xuống còn mỗi `bg-warning-ink`. Bỏ vạch đi là
+ * API đổi tông mà không đổi được gì ở ba trên bốn bảng màu — chỗ gọi tưởng đã cảnh báo, người
+ * dùng không thấy gì. Cùng lý do đó, ĐỪNG thêm tông thứ năm nào nữa mà chưa đo lại bảng trên.
  *
- * Cần báo "sắp chạm ngưỡng" thì nói bằng thứ KHÁC màu thanh — `StatusPill`/`Badge` tông warning,
- * hoặc một dòng chữ `text-warning-ink` cạnh thanh; cả hai đều tương phản tốt với nền trang vì
- * chúng không phải cạnh tranh với chính màu brand. Muốn có `tone="warning"` thật thì phải tách
- * `--warning-ink` khỏi `--gold-500` ở TẦNG TOKEN trước — đó là thay đổi bảng màu, không phải thay
- * đổi component, và nó đụng mọi bề mặt warning đang có (Badge, StatusPill, StatCard, Toast).
+ * Vạch chỉ là cách nói "sắp chạm ngưỡng" trên chính cái thanh; nó KHÔNG thay được một câu chữ.
+ * Chỗ nào cần nói rõ ngưỡng là bao nhiêu và làm gì tiếp thì vẫn phải có `Alert`/`StatusPill` hoặc
+ * một dòng `text-warning-ink` cạnh thanh.
  */
 declare const progressTrackVariants: (props?: ({
-    tone?: "default" | "success" | "destructive" | null | undefined;
+    tone?: "default" | "success" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const progressBarVariants: (props?: ({
-    tone?: "default" | "success" | "destructive" | null | undefined;
+    tone?: "default" | "success" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-/** Tông của thanh — xem chú thích ở trên về việc vì sao không có `warning`. */
+/** Tông của thanh — xem chú thích ở trên về việc vì sao `warning` phải kèm vạch chéo. */
 type ProgressTone = NonNullable<VariantProps<typeof progressBarVariants>["tone"]>;
 interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root>, VariantProps<typeof progressBarVariants> {
 }

package/dist/components/ui/progress.js

@@ -8,6 +8,7 @@ const progressTrackVariants = cva("border-control-edge relative h-2 w-full overf
     tone: {
       default: "bg-primary-ink/20",
       success: "bg-success-ink/20",
+      warning: "bg-warning-ink/20",
       destructive: "bg-destructive-ink/20"
     }
   },
@@ -18,6 +19,8 @@ const progressBarVariants = cva("h-full w-full flex-1 transition-transform durat
     tone: {
       default: "bg-primary-ink",
       success: "bg-success-ink",
+      // `hazard-stripes` là PHẦN BẮT BUỘC của tông này, không phải trang trí — xem chú thích đầu file.
+      warning: "bg-warning-ink hazard-stripes",
       destructive: "bg-destructive-ink"
     }
   },

package/dist/components/ui/progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Progress (Radix) — thanh tiến trình xác định (`value` 0…100).\n * Bỏ trống `value` để về trạng thái indeterminate của Radix (thanh đứng yên ở 0);\n * animation cho indeterminate là việc của app.\n *\n * ─ MÀU: `--primary-ink`, KHÔNG PHẢI `--primary` ─\n * Phần đã chạy là thông tin thị giác (WCAG 1.4.11, 3:1) và phải nổi trên CẢ nền trang lẫn phần\n * rãnh còn lại. `bg-primary` gold #E8B824 ở light chỉ **1,86:1** với nền trắng và **1,64:1** với\n * rãnh `bg-primary/20` — thanh 8px vàng nhạt trên nền trắng gần như không thấy. Bậc ink của\n * brand đạt cả hai phía ở cả hai theme:\n *\n *     đã chạy ⇄ nền trang        : 6,51:1 (light) · 12,67:1 (dark) ✓\n *     đã chạy ⇄ rãnh `/20`       : 4,85:1 (light) · 7,97:1 (dark)  ✓\n *                                  (tệ nhất khi rãnh nằm trên --muted: 4,54:1 · 6,52:1 ✓)\n *\n * ─ RÃNH: TINT `/20` GIỮ NGUYÊN, NHƯNG PHẢI CÓ VIỀN `--control-edge` ─\n * Bản trước chỉ có tint: rãnh ⇄ nền trang mới **1,34:1** (light) và **1,59–1,66:1** (dark), tức\n * KHÔNG nhìn thấy mốc 100% — ở `value` nhỏ không đọc được TỈ LỆ, ở `value=0` cả control biến mất.\n * Cách sửa hiển nhiên (đổi rãnh sang `bg-control-edge` như Slider/Switch) lại hỏng chỗ khác:\n * `--primary-ink` ⇄ `--control-edge` chỉ **1,70:1** (light) / **2,57:1** (dark), mà Progress\n * KHÔNG có núm nên ranh giới đã-chạy/chưa-chạy là thứ DUY NHẤT mang giá trị — mất nó là mất\n * thông tin. Với nền trang trắng không tồn tại cặp màu nào vừa ≥3:1 với nhau vừa ≥3:1 với nền\n * (chứng minh trong chú thích của `Slider`), nên hai ràng buộc phải tách ra hai lớp:\n *\n *     khoanh vùng control  → `border-control-edge` ⇄ nền trang : 3,83:1 (light) · 4,94:1 (dark) ✓\n *                                                  ⇄ --muted   : 3,58:1 · 4,21:1 ✓\n *     đọc tỉ lệ            → đã chạy ⇄ rãnh `/20`               : 4,85:1 · 7,97:1 ✓\n *\n * Đây đúng vai trò hợp đồng đặt cho `--control-edge` (styles.css §RANH GIỚI): \"khi nền control\n * trong suốt/nhạt thì VIỀN là thứ duy nhất khoanh vùng\".\n *\n * ─ TÔNG: BA GIÁ TRỊ, VÀ KHÔNG CÓ `warning` ─\n * `tone` đổi CẢ phần đã chạy lẫn rãnh sang cùng một bậc ink, nên tỉ lệ đọc-được giữ nguyên cấu\n * trúc của bản mặc định. Đo trên ba bề mặt (`--background`, `--card`, `--muted`), tệ nhất mỗi cột:\n *\n *     tông           đã chạy ⇄ nền trang        đã chạy ⇄ rãnh cùng tông /20\n *     default        6,09:1 (light) 10,80 (dark)   4,54:1 (light) 6,52:1 (dark) ✓\n *     success        6,09:1         9,25           4,55:1         5,88:1        ✓\n *     destructive    6,68:1         5,82           4,85:1         4,25:1        ✓\n *\n * ⚠ KHÔNG có `warning`, và đây là quyết định ĐO ĐƯỢC chứ không phải bỏ sót: ở bảng màu light\n * `--warning-ink` và `--primary-ink` là CÙNG một giá trị (#7A5800 — `--yellow-ink` trỏ về\n * `--gold-500`, xem styles.css:174), nên một thanh `tone=\"warning\"` sẽ trông y hệt thanh mặc định.\n * Ở dark hai bậc cũng chỉ cách nhau một nấc vàng (#FACC15 ⇄ #F5D060). Một API đổi tông mà không\n * đổi được gì là thứ tệ hơn không có API: chỗ gọi tưởng đã cảnh báo, người dùng không thấy gì.\n *\n * Cần báo \"sắp chạm ngưỡng\" thì nói bằng thứ KHÁC màu thanh — `StatusPill`/`Badge` tông warning,\n * hoặc một dòng chữ `text-warning-ink` cạnh thanh; cả hai đều tương phản tốt với nền trang vì\n * chúng không phải cạnh tranh với chính màu brand. Muốn có `tone=\"warning\"` thật thì phải tách\n * `--warning-ink` khỏi `--gold-500` ở TẦNG TOKEN trước — đó là thay đổi bảng màu, không phải thay\n * đổi component, và nó đụng mọi bề mặt warning đang có (Badge, StatusPill, StatCard, Toast).\n */\n\n/*\n * HAI `cva`, không phải hai bảng `Record`.\n *\n * Không phải chuyện phong cách: cổng màu (`scripts/check-contrast.mjs`) chỉ bóc chuỗi lớp từ ba\n * chỗ — thuộc tính `className`, `cva(base, { variants })`, và đối số TRỰC TIẾP của `cn()`. Class\n * nằm trong một `Record` rồi đi vào `cn()` qua biến là VÔ HÌNH với cổng: nó không báo lỗi, nó\n * lặng lẽ không đo — và miễn trừ của rãnh sẽ thành \"ruỗng\", đúng thứ cổng coi là nơi giấu lỗi.\n * Dạng `cva` cho cổng thấy cả base lẫn từng lá biến thể.\n */\nconst progressTrackVariants = cva(\"border-control-edge relative h-2 w-full overflow-hidden rounded-full border\", {\n  variants: {\n    tone: {\n      default: \"bg-primary-ink/20\",\n      success: \"bg-success-ink/20\",\n      destructive: \"bg-destructive-ink/20\"\n    }\n  },\n  defaultVariants: { tone: \"default\" }\n});\n\nconst progressBarVariants = cva(\"h-full w-full flex-1 transition-transform duration-150 ease-out\", {\n  variants: {\n    tone: {\n      default: \"bg-primary-ink\",\n      success: \"bg-success-ink\",\n      destructive: \"bg-destructive-ink\"\n    }\n  },\n  defaultVariants: { tone: \"default\" }\n});\n\n/** Tông của thanh — xem chú thích ở trên về việc vì sao không có `warning`. */\nexport type ProgressTone = NonNullable<VariantProps<typeof progressBarVariants>[\"tone\"]>;\n\nexport interface ProgressProps\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressBarVariants> {}\n\nfunction Progress({ className, value, tone = \"default\", ...props }: ProgressProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      data-tone={tone}\n      className={cn(progressTrackVariants({ tone }), className)}\n      value={value}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={progressBarVariants({ tone })}\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress, progressBarVariants, progressTrackVariants };\n"],"mappings":";AA2GM;AAzGN,YAAY,uBAAuB;AACnC,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAgEnB,MAAM,wBAAwB,IAAI,+EAA+E;AAAA,EAC/G,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AAED,MAAM,sBAAsB,IAAI,mEAAmE;AAAA,EACjG,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AASD,SAAS,SAAS,EAAE,WAAW,OAAO,OAAO,WAAW,GAAG,MAAM,GAAkB;AACjF,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW,GAAG,sBAAsB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MACxD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAW,oBAAoB,EAAE,KAAK,CAAC;AAAA,UACvC,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,EAAE,KAAK;AAAA;AAAA,MAC5D;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Progress (Radix) — thanh tiến trình xác định (`value` 0…100).\n * Bỏ trống `value` để về trạng thái indeterminate của Radix (thanh đứng yên ở 0);\n * animation cho indeterminate là việc của app.\n *\n * ─ MÀU: `--primary-ink`, KHÔNG PHẢI `--primary` ─\n * Phần đã chạy là thông tin thị giác (WCAG 1.4.11, 3:1) và phải nổi trên CẢ nền trang lẫn phần\n * rãnh còn lại. `bg-primary` gold #E8B824 ở light chỉ **1,86:1** với nền trắng và **1,64:1** với\n * rãnh `bg-primary/20` — thanh 8px vàng nhạt trên nền trắng gần như không thấy. Bậc ink của\n * brand đạt cả hai phía ở cả hai theme:\n *\n *     đã chạy ⇄ nền trang        : 6,51:1 (light) · 12,67:1 (dark) ✓\n *     đã chạy ⇄ rãnh `/20`       : 4,85:1 (light) · 7,97:1 (dark)  ✓\n *                                  (tệ nhất khi rãnh nằm trên --muted: 4,54:1 · 6,52:1 ✓)\n *\n * ─ RÃNH: TINT `/20` GIỮ NGUYÊN, NHƯNG PHẢI CÓ VIỀN `--control-edge` ─\n * Bản trước chỉ có tint: rãnh ⇄ nền trang mới **1,34:1** (light) và **1,59–1,66:1** (dark), tức\n * KHÔNG nhìn thấy mốc 100% — ở `value` nhỏ không đọc được TỈ LỆ, ở `value=0` cả control biến mất.\n * Cách sửa hiển nhiên (đổi rãnh sang `bg-control-edge` như Slider/Switch) lại hỏng chỗ khác:\n * `--primary-ink` ⇄ `--control-edge` chỉ **1,70:1** (light) / **2,57:1** (dark), mà Progress\n * KHÔNG có núm nên ranh giới đã-chạy/chưa-chạy là thứ DUY NHẤT mang giá trị — mất nó là mất\n * thông tin. Với nền trang trắng không tồn tại cặp màu nào vừa ≥3:1 với nhau vừa ≥3:1 với nền\n * (chứng minh trong chú thích của `Slider`), nên hai ràng buộc phải tách ra hai lớp:\n *\n *     khoanh vùng control  → `border-control-edge` ⇄ nền trang : 3,83:1 (light) · 4,94:1 (dark) ✓\n *                                                  ⇄ --muted   : 3,58:1 · 4,21:1 ✓\n *     đọc tỉ lệ            → đã chạy ⇄ rãnh `/20`               : 4,85:1 · 7,97:1 ✓\n *\n * Đây đúng vai trò hợp đồng đặt cho `--control-edge` (styles.css §RANH GIỚI): \"khi nền control\n * trong suốt/nhạt thì VIỀN là thứ duy nhất khoanh vùng\".\n *\n * ─ TÔNG: BỐN GIÁ TRỊ, VÀ `warning` KHÔNG ĐƯỢC PHÉP CHỈ LÀ MỘT MÀU KHÁC ─\n * `tone` đổi CẢ phần đã chạy lẫn rãnh sang cùng một bậc ink, nên tỉ lệ đọc-được giữ nguyên cấu\n * trúc của bản mặc định. Đo trên ba bề mặt (`--background`, `--card`, `--muted`), tệ nhất mỗi cột.\n *\n * ⚠ Cột \"light\"/\"dark\" dưới đây là **bảng TƯƠNG PHẢN CAO** — đúng bảng mà cổng màu đo, và lý do\n * ghi ở đầu `scripts/a11y/tailwind.mjs`. Ở bảng mặc định (bản duyệt comitor-ds) `--primary-ink`\n * chính là `--primary` gold #E8B824, nên tông `default` chỉ được 1,73:1 với nền và 1,55:1 với\n * rãnh: đó là con số của BẢN DUYỆT, không phải lỗi của component — đổi nó là đổi bảng màu.\n *\n *     tông           đã chạy ⇄ nền trang        đã chạy ⇄ rãnh cùng tông /20\n *     default        6,09:1 (light) 10,80 (dark)   4,54:1 (light) 6,52:1 (dark) ✓\n *     success        6,09:1         9,25           4,55:1         5,88:1        ✓\n *     warning        6,09:1         10,52          4,54:1         6,47:1        ✓\n *     destructive    6,68:1         5,82           4,85:1         4,25:1        ✓\n *\n * ⚠ NHƯNG `warning` KHÔNG phân biệt được với `default` BẰNG MÀU, và đó là số đo chứ không phải\n * cảm tính. Đo `--warning-ink` ⇄ `--primary-ink` trên cả BỐN bảng màu của gói:\n *\n *     light (mặc định)         #7A5800 ⇄ #E8B824   3,51:1  ✓\n *     light (tương phản cao)   #7A5800 ⇄ #7A5800   1,00:1  ✗ CÙNG MỘT HEX\n *     dark  (mặc định)         #F2C94C ⇄ #F5D060   1,06:1  ✗\n *     dark  (tương phản cao)   #FACC15 ⇄ #F5D060   1,03:1  ✗\n *\n * Ba trên bốn bảng màu cho ra hai thanh trông y hệt nhau. Đây KHÔNG sửa được ở tầng token: brand\n * của Comitor là gold, warning là yellow — cùng một sắc. Muốn tách hai bậc ink ra 3:1 thì một\n * trong hai phải rời khỏi vùng đọc-được: với nền trắng, chữ đạt 4,5:1 đòi độ chói ≤ 0,183, mà\n * cách `--gold-500` (0,111) đúng 3:1 thì phải ≤ 0,004 (gần như đen) hoặc ≥ 0,433 (quá sáng để\n * làm chữ). Hai ràng buộc không giao nhau — không có hex nào thoả cả hai.\n *\n * Nên tông `warning` nói bằng thứ KHÔNG PHẢI MÀU: `hazard-stripes` (khai ở styles.css) khoét\n * những rãnh chéo xuyên phần đã chạy để nền rãnh lộ ra. Ranh giới vạch ⇄ rãnh chính là cặp\n * \"đã chạy ⇄ rãnh\" đã đo ở bảng trên (4,54:1 light · 6,47:1 dark ✓), nên vạch KHÔNG thêm màu nào\n * và không cần đo thêm. Đây đúng là WCAG 1.4.1: tín hiệu không được chỉ nằm ở màu — bản vạch còn\n * đọc ra ở chế độ xám, chỗ mà mọi khác biệt sắc độ đều biến mất.\n *\n * ⚠ Vì vậy: KHÔNG được \"đơn giản hoá\" `warning` xuống còn mỗi `bg-warning-ink`. Bỏ vạch đi là\n * API đổi tông mà không đổi được gì ở ba trên bốn bảng màu — chỗ gọi tưởng đã cảnh báo, người\n * dùng không thấy gì. Cùng lý do đó, ĐỪNG thêm tông thứ năm nào nữa mà chưa đo lại bảng trên.\n *\n * Vạch chỉ là cách nói \"sắp chạm ngưỡng\" trên chính cái thanh; nó KHÔNG thay được một câu chữ.\n * Chỗ nào cần nói rõ ngưỡng là bao nhiêu và làm gì tiếp thì vẫn phải có `Alert`/`StatusPill` hoặc\n * một dòng `text-warning-ink` cạnh thanh.\n */\n\n/*\n * HAI `cva`, không phải hai bảng `Record`.\n *\n * Không phải chuyện phong cách: cổng màu (`scripts/check-contrast.mjs`) chỉ bóc chuỗi lớp từ ba\n * chỗ — thuộc tính `className`, `cva(base, { variants })`, và đối số TRỰC TIẾP của `cn()`. Class\n * nằm trong một `Record` rồi đi vào `cn()` qua biến là VÔ HÌNH với cổng: nó không báo lỗi, nó\n * lặng lẽ không đo — và miễn trừ của rãnh sẽ thành \"ruỗng\", đúng thứ cổng coi là nơi giấu lỗi.\n * Dạng `cva` cho cổng thấy cả base lẫn từng lá biến thể.\n */\nconst progressTrackVariants = cva(\"border-control-edge relative h-2 w-full overflow-hidden rounded-full border\", {\n  variants: {\n    tone: {\n      default: \"bg-primary-ink/20\",\n      success: \"bg-success-ink/20\",\n      warning: \"bg-warning-ink/20\",\n      destructive: \"bg-destructive-ink/20\"\n    }\n  },\n  defaultVariants: { tone: \"default\" }\n});\n\nconst progressBarVariants = cva(\"h-full w-full flex-1 transition-transform duration-150 ease-out\", {\n  variants: {\n    tone: {\n      default: \"bg-primary-ink\",\n      success: \"bg-success-ink\",\n      // `hazard-stripes` là PHẦN BẮT BUỘC của tông này, không phải trang trí — xem chú thích đầu file.\n      warning: \"bg-warning-ink hazard-stripes\",\n      destructive: \"bg-destructive-ink\"\n    }\n  },\n  defaultVariants: { tone: \"default\" }\n});\n\n/** Tông của thanh — xem chú thích ở trên về việc vì sao `warning` phải kèm vạch chéo. */\nexport type ProgressTone = NonNullable<VariantProps<typeof progressBarVariants>[\"tone\"]>;\n\nexport interface ProgressProps\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressBarVariants> {}\n\nfunction Progress({ className, value, tone = \"default\", ...props }: ProgressProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      data-tone={tone}\n      className={cn(progressTrackVariants({ tone }), className)}\n      value={value}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={progressBarVariants({ tone })}\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress, progressBarVariants, progressTrackVariants };\n"],"mappings":";AAoIM;AAlIN,YAAY,uBAAuB;AACnC,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAsFnB,MAAM,wBAAwB,IAAI,+EAA+E;AAAA,EAC/G,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AAED,MAAM,sBAAsB,IAAI,mEAAmE;AAAA,EACjG,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA;AAAA,MAET,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AASD,SAAS,SAAS,EAAE,WAAW,OAAO,OAAO,WAAW,GAAG,MAAM,GAAkB;AACjF,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW,GAAG,sBAAsB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MACxD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAW,oBAAoB,EAAE,KAAK,CAAC;AAAA,UACvC,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,EAAE,KAAK;AAAA;AAAA,MAC5D;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/ui/skeleton.d.ts

@@ -1,6 +1,22 @@
 import * as React from 'react';
 
 type SkeletonProps = React.ComponentProps<"div">;
+/**
+ * Khối chờ tải.
+ *
+ * ─ `--muted`, KHÔNG PHẢI `--accent` ─
+ * `--accent` là bậc nhạt của BRAND: ở bảng light nó là `#FBF5DC`, một lớp kem ngả vàng. Cả một
+ * trang đang tải vì thế loang vàng — brand đi nói một câu mà nó không có gì để nói, và nó còn
+ * đúng bằng màu mà `Progress`/`Switch`/`Tabs` dùng để nói "cái này ĐANG bật".
+ *
+ * `--muted` (`#F7F7F8` light · `#1E2128` dark) là bậc XÁM trung tính của cùng hệ mặt phẳng, và ở
+ * dark hai token vốn đã trùng giá trị — nên đổi sang nó chỉ rút phần ngả vàng ở light ra, không
+ * làm khối chờ nhạt đi (1,07:1 với `--card` so với 1,09:1 của `--accent`).
+ *
+ * ⚠ Đừng "làm rõ hơn" bằng một bậc đậm hơn (`--border`, `--secondary`): khối chờ là chỗ giữ chỗ,
+ * không phải nội dung. Nó đậm ngang chữ thật thì trang đang tải trông như trang đã tải xong mà
+ * hỏng — và `animate-pulse` mới là thứ nói "đang chờ", không phải độ đậm.
+ */
 declare function Skeleton({ className, ...props }: SkeletonProps): React.JSX.Element;
 
 export { Skeleton, type SkeletonProps };

package/dist/components/ui/skeleton.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/cn.js";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "skeleton", className: cn("bg-accent animate-pulse rounded-md", className), ...props });
+  return /* @__PURE__ */ jsx("div", { "data-slot": "skeleton", className: cn("bg-muted animate-pulse rounded-md", className), ...props });
 }
 export {
   Skeleton

package/dist/components/ui/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\nexport type SkeletonProps = React.ComponentProps<\"div\">;\n\nfunction Skeleton({ className, ...props }: SkeletonProps) {\n  return <div data-slot=\"skeleton\" className={cn(\"bg-accent animate-pulse rounded-md\", className)} {...props} />;\n}\n\nexport { Skeleton };\n"],"mappings":"AAMS;AALT,SAAS,UAAU;AAInB,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAkB;AACxD,SAAO,oBAAC,SAAI,aAAU,YAAW,WAAW,GAAG,sCAAsC,SAAS,GAAI,GAAG,OAAO;AAC9G;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/skeleton.tsx"],"sourcesContent":["import type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\nexport type SkeletonProps = React.ComponentProps<\"div\">;\n\n/**\n * Khối chờ tải.\n *\n * ─ `--muted`, KHÔNG PHẢI `--accent` ─\n * `--accent` là bậc nhạt của BRAND: ở bảng light nó là `#FBF5DC`, một lớp kem ngả vàng. Cả một\n * trang đang tải vì thế loang vàng — brand đi nói một câu mà nó không có gì để nói, và nó còn\n * đúng bằng màu mà `Progress`/`Switch`/`Tabs` dùng để nói \"cái này ĐANG bật\".\n *\n * `--muted` (`#F7F7F8` light · `#1E2128` dark) là bậc XÁM trung tính của cùng hệ mặt phẳng, và ở\n * dark hai token vốn đã trùng giá trị — nên đổi sang nó chỉ rút phần ngả vàng ở light ra, không\n * làm khối chờ nhạt đi (1,07:1 với `--card` so với 1,09:1 của `--accent`).\n *\n * ⚠ Đừng \"làm rõ hơn\" bằng một bậc đậm hơn (`--border`, `--secondary`): khối chờ là chỗ giữ chỗ,\n * không phải nội dung. Nó đậm ngang chữ thật thì trang đang tải trông như trang đã tải xong mà\n * hỏng — và `animate-pulse` mới là thứ nói \"đang chờ\", không phải độ đậm.\n */\nfunction Skeleton({ className, ...props }: SkeletonProps) {\n  return <div data-slot=\"skeleton\" className={cn(\"bg-muted animate-pulse rounded-md\", className)} {...props} />;\n}\n\nexport { Skeleton };\n"],"mappings":"AAsBS;AArBT,SAAS,UAAU;AAoBnB,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAkB;AACxD,SAAO,oBAAC,SAAI,aAAU,YAAW,WAAW,GAAG,qCAAqC,SAAS,GAAI,GAAG,OAAO;AAC7G;","names":[]}

package/dist/index.d.ts

@@ -6,7 +6,7 @@ export { CopyButton, CopyButtonProps } from './components/composite/copy-button.
 export { DataTable, DataTableAlign, DataTableColumn, DataTableColumnToggle, DataTableColumnToggleProps, DataTableProps, DataTableSort, SortDirection } from './components/composite/data-table.js';
 export { DEFAULT_DATA_TABLE_LABELS, DataTableLabels } from './components/composite/data-table-constants.js';
 export { DatePicker, DatePickerProps, DateRangePicker, DateRangePickerProps } from './components/composite/date-picker.js';
-export { DEFAULT_DATE_PRESETS, DEFAULT_DATE_RANGE_PRESETS, DatePreset, DateRangePreset, VI_DATE_FORMAT } from './components/composite/date-picker-constants.js';
+export { DEFAULT_DATE_PICKER_LABELS, DEFAULT_DATE_PRESETS, DEFAULT_DATE_RANGE_PRESETS, DatePickerLabels, DatePreset, DateRangePreset, VI_DATE_FORMAT, dateFormatForLocale } from './components/composite/date-picker-constants.js';
 export { EmptyState, EmptyStateProps, IconComponent } from './components/composite/empty-state.js';
 export { FilterChipItem, FilterChips, FilterChipsProps } from './components/composite/filter-chips.js';
 export { FormField, FormFieldColSpan, FormFieldControlProps, FormFieldProps } from './components/composite/form-field.js';
@@ -83,6 +83,7 @@ export { ThemeMode, accent, accentForeground, accentInk, ash, brandNeutral, char
 export { AvatarToneColors, getAvatarToneIndex } from './lib/avatar-tone.js';
 export { DateRange } from 'react-day-picker';
 import 'react';
+import 'date-fns';
 import 'class-variance-authority/types';
 import 'class-variance-authority';
 import 'sonner';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comitor/ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Comitor design system — Shadcn/UI tùy biến theo brand Comitor + component dùng chung cho hệ sinh thái SaaS (Tasks, Chat, CRM, HR…)",
   "license": "MIT",
   "type": "module",

package/styles.css

@@ -940,3 +940,20 @@
     display: none;
   }
 }
+
+/* ─ VẠCH CẢNH BÁO CHÉO — tín hiệu KHÔNG PHẢI MÀU cho `Progress tone="warning"` ─
+   Khoét những rãnh chéo xuyên qua phần đã chạy để nền rãnh lộ ra, nên nó KHÔNG thêm màu nào:
+   dùng `mask`, không dùng `background-image`, và hai chặn của mask là đen/trong suốt (kênh alpha,
+   không phải màu của bảng). Nhờ vậy chuỗi lớp của thanh vẫn chỉ có đúng một `bg-*` như ba tông
+   kia, và cổng màu đo nó y hệt các tông khác.
+
+   VÌ SAO CẦN: `--warning-ink` và `--primary-ink` gần như trùng nhau ở 3 trên 4 bảng màu (đo ở
+   chú thích đầu `progress.tsx`), nên tông warning KHÔNG thể phân biệt bằng màu. Rãnh chéo là cùng
+   một tín hiệu ấy nói bằng HÌNH, nên nó sống sót qua chế độ xám và qua mù màu — đúng WCAG 1.4.1.
+
+   6px đục / 3px rãnh: phần đã chạy vẫn đặc 2/3 nên vẫn đọc được TỈ LỆ, mà rãnh vẫn đủ rộng để
+   thấy ở thanh cao 8px. Tĩnh, KHÔNG chạy — vạch trôi là hiệu ứng vô nghĩa với `prefers-reduced-motion`. */
+@utility hazard-stripes {
+  -webkit-mask-image: repeating-linear-gradient(135deg, #000 0 6px, transparent 6px 9px);
+  mask-image: repeating-linear-gradient(135deg, #000 0 6px, transparent 6px 9px);
+}