@comitor/ui 2.1.0 → 3.0.1

package/dist/components/composite/copy-button.js

@@ -2,12 +2,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import { Button } from "../ui/button.js";
 function CopyButton({
   value,
-  label = "Sao ch\xE9p",
-  copiedLabel = "\u0110\xE3 ch\xE9p",
+  label: labelProp,
+  copiedLabel: copiedLabelProp,
   resetAfterMs = 2e3,
   onCopied,
   onCopyError,
@@ -16,6 +17,9 @@ function CopyButton({
   className,
   ...props
 }) {
+  const t = useComitorMessages("copyButton");
+  const label = labelProp === void 0 ? t.label : labelProp;
+  const copiedLabel = copiedLabelProp ?? t.copiedLabel;
   const [copied, setCopied] = useState(false);
   const timerRef = useRef(null);
   useEffect(
@@ -63,7 +67,7 @@ function CopyButton({
       variant,
       size,
       onClick: () => void copy(),
-      "aria-label": label ?? (copied ? copiedLabel : "Sao ch\xE9p"),
+      "aria-label": label ?? (copied ? copiedLabel : t.label),
       className: cn("gap-1.5", copied && "text-success-ink", className),
       ...props,
       children: [

package/dist/components/composite/copy-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/copy-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Check, Copy } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button, type ButtonProps } from \"../ui/button.js\";\n\nexport interface CopyButtonProps extends Omit<ButtonProps, \"children\" | \"onCopy\"> {\n  /** Nội dung được chép vào clipboard */\n  value: string;\n  /** Nhãn khi chưa chép (mặc định \"Sao chép\"). `null` = chỉ icon. */\n  label?: string | null;\n  /** Nhãn sau khi chép thành công */\n  copiedLabel?: string;\n  /** Thời gian giữ trạng thái \"đã chép\" (ms) */\n  resetAfterMs?: number;\n  onCopied?: (value: string) => void;\n  onCopyError?: (error: unknown) => void;\n}\n\n/**\n * Chép giá trị vào clipboard kèm phản hồi thị giác.\n *\n * Có đường lui khi `navigator.clipboard` không dùng được (trang http không phải localhost,\n * WebView cũ): tạo textarea ẩn rồi `execCommand(\"copy\")`. Thiếu đường lui này thì nút im lặng\n * không làm gì — người dùng tưởng đã chép và dán ra nội dung cũ.\n */\nexport function CopyButton({\n  value,\n  label = \"Sao chép\",\n  copiedLabel = \"Đã chép\",\n  resetAfterMs = 2000,\n  onCopied,\n  onCopyError,\n  variant = \"ghost\",\n  size = \"sm\",\n  className,\n  ...props\n}: CopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    []\n  );\n\n  const writeFallback = (text: string): boolean => {\n    try {\n      const textarea = document.createElement(\"textarea\");\n      textarea.value = text;\n      textarea.setAttribute(\"readonly\", \"\");\n      textarea.style.position = \"fixed\";\n      textarea.style.opacity = \"0\";\n      document.body.appendChild(textarea);\n      textarea.select();\n      const ok = document.execCommand(\"copy\");\n      document.body.removeChild(textarea);\n      return ok;\n    } catch {\n      return false;\n    }\n  };\n\n  const copy = async () => {\n    try {\n      if (navigator.clipboard?.writeText) {\n        await navigator.clipboard.writeText(value);\n      } else if (!writeFallback(value)) {\n        throw new Error(\"Trình duyệt không cho phép ghi clipboard\");\n      }\n\n      setCopied(true);\n      onCopied?.(value);\n      if (timerRef.current) clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => setCopied(false), resetAfterMs);\n    } catch (error) {\n      onCopyError?.(error);\n    }\n  };\n\n  const Icon = copied ? Check : Copy;\n\n  return (\n    <Button\n      type=\"button\"\n      variant={variant}\n      size={size}\n      onClick={() => void copy()}\n      aria-label={label ?? (copied ? copiedLabel : \"Sao chép\")}\n      // `text-success-ink`: nhãn \"Đã chép\" là CHỮ trên nền trang → AA 4,5:1. Token tô nền\n      // `--success` chỉ 3,13:1 ở light ✗ (dark 10,85:1). Ink: 6,52:1 (light) · 10,85:1 (dark) ✓.\n      className={cn(\"gap-1.5\", copied && \"text-success-ink\", className)}\n      {...props}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n      {label !== null && <span>{copied ? copiedLabel : label}</span>}\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {copied ? copiedLabel : \"\"}\n      </span>\n    </Button>\n  );\n}\n"],"mappings":";AAsFI,SAWE,KAXF;AApFJ,SAAS,OAAO,YAAY;AAC5B,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,UAAU;AACnB,SAAS,cAAgC;AAsBlC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,WAAW,OAA6C,IAAI;AAElE;AAAA,IACE,MAAM,MAAM;AACV,UAAI,SAAS,QAAS,cAAa,SAAS,OAAO;AAAA,IACrD;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB,CAAC,SAA0B;AAC/C,QAAI;AACF,YAAM,WAAW,SAAS,cAAc,UAAU;AAClD,eAAS,QAAQ;AACjB,eAAS,aAAa,YAAY,EAAE;AACpC,eAAS,MAAM,WAAW;AAC1B,eAAS,MAAM,UAAU;AACzB,eAAS,KAAK,YAAY,QAAQ;AAClC,eAAS,OAAO;AAChB,YAAM,KAAK,SAAS,YAAY,MAAM;AACtC,eAAS,KAAK,YAAY,QAAQ;AAClC,aAAO;AAAA,IACT,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,OAAO,YAAY;AACvB,QAAI;AACF,UAAI,UAAU,WAAW,WAAW;AAClC,cAAM,UAAU,UAAU,UAAU,KAAK;AAAA,MAC3C,WAAW,CAAC,cAAc,KAAK,GAAG;AAChC,cAAM,IAAI,MAAM,wDAA0C;AAAA,MAC5D;AAEA,gBAAU,IAAI;AACd,iBAAW,KAAK;AAChB,UAAI,SAAS,QAAS,cAAa,SAAS,OAAO;AACnD,eAAS,UAAU,WAAW,MAAM,UAAU,KAAK,GAAG,YAAY;AAAA,IACpE,SAAS,OAAO;AACd,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,OAAO,SAAS,QAAQ;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,MAAM,KAAK,KAAK;AAAA,MACzB,cAAY,UAAU,SAAS,cAAc;AAAA,MAG7C,WAAW,GAAG,WAAW,UAAU,oBAAoB,SAAS;AAAA,MAC/D,GAAG;AAAA,MAEJ;AAAA,4BAAC,QAAK,eAAY,QAAO,WAAU,qBAAoB;AAAA,QACtD,UAAU,QAAQ,oBAAC,UAAM,mBAAS,cAAc,OAAM;AAAA,QACvD,oBAAC,UAAK,aAAU,UAAS,WAAU,WAChC,mBAAS,cAAc,IAC1B;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/copy-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Check, Copy } from \"lucide-react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button, type ButtonProps } from \"../ui/button.js\";\n\nexport interface CopyButtonProps extends Omit<ButtonProps, \"children\" | \"onCopy\"> {\n  /** Nội dung được chép vào clipboard */\n  value: string;\n  /**\n   * Nhãn khi chưa chép. Không truyền (`undefined`) thì lấy khoá `label` của namespace `copyButton`\n   * (`ComitorLocaleProvider`, mặc định tiếng Anh). `null` = chỉ icon — khi đó khoá `label` vẫn là\n   * `aria-label` của nút.\n   */\n  label?: string | null;\n  /** Nhãn sau khi chép thành công (khoá `copiedLabel` của namespace `copyButton`) */\n  copiedLabel?: string;\n  /** Thời gian giữ trạng thái \"đã chép\" (ms) */\n  resetAfterMs?: number;\n  onCopied?: (value: string) => void;\n  onCopyError?: (error: unknown) => void;\n}\n\n/**\n * Chép giá trị vào clipboard kèm phản hồi thị giác.\n *\n * Có đường lui khi `navigator.clipboard` không dùng được (trang http không phải localhost,\n * WebView cũ): tạo textarea ẩn rồi `execCommand(\"copy\")`. Thiếu đường lui này thì nút im lặng\n * không làm gì — người dùng tưởng đã chép và dán ra nội dung cũ.\n */\nexport function CopyButton({\n  value,\n  label: labelProp,\n  copiedLabel: copiedLabelProp,\n  resetAfterMs = 2000,\n  onCopied,\n  onCopyError,\n  variant = \"ghost\",\n  size = \"sm\",\n  className,\n  ...props\n}: CopyButtonProps) {\n  const t = useComitorMessages(\"copyButton\");\n  // `=== undefined` chứ KHÔNG `??`: `null` là giá trị có nghĩa (chỉ icon), `??` sẽ nuốt nó.\n  const label = labelProp === undefined ? t.label : labelProp;\n  const copiedLabel = copiedLabelProp ?? t.copiedLabel;\n  const [copied, setCopied] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    []\n  );\n\n  const writeFallback = (text: string): boolean => {\n    try {\n      const textarea = document.createElement(\"textarea\");\n      textarea.value = text;\n      textarea.setAttribute(\"readonly\", \"\");\n      textarea.style.position = \"fixed\";\n      textarea.style.opacity = \"0\";\n      document.body.appendChild(textarea);\n      textarea.select();\n      const ok = document.execCommand(\"copy\");\n      document.body.removeChild(textarea);\n      return ok;\n    } catch {\n      return false;\n    }\n  };\n\n  const copy = async () => {\n    try {\n      if (navigator.clipboard?.writeText) {\n        await navigator.clipboard.writeText(value);\n      } else if (!writeFallback(value)) {\n        throw new Error(\"Trình duyệt không cho phép ghi clipboard\");\n      }\n\n      setCopied(true);\n      onCopied?.(value);\n      if (timerRef.current) clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => setCopied(false), resetAfterMs);\n    } catch (error) {\n      onCopyError?.(error);\n    }\n  };\n\n  const Icon = copied ? Check : Copy;\n\n  return (\n    <Button\n      type=\"button\"\n      variant={variant}\n      size={size}\n      onClick={() => void copy()}\n      aria-label={label ?? (copied ? copiedLabel : t.label)}\n      // `text-success-ink`: nhãn `copiedLabel` là CHỮ trên nền trang → AA 4,5:1. Token tô nền\n      // `--success` chỉ 3,13:1 ở light ✗ (dark 10,85:1). Ink: 6,52:1 (light) · 10,85:1 (dark) ✓.\n      className={cn(\"gap-1.5\", copied && \"text-success-ink\", className)}\n      {...props}\n    >\n      <Icon aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n      {label !== null && <span>{copied ? copiedLabel : label}</span>}\n      <span aria-live=\"polite\" className=\"sr-only\">\n        {copied ? copiedLabel : \"\"}\n      </span>\n    </Button>\n  );\n}\n"],"mappings":";AA+FI,SAWE,KAXF;AA7FJ,SAAS,OAAO,YAAY;AAC5B,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,0BAA0B;AACnC,SAAS,UAAU;AACnB,SAAS,cAAgC;AA0BlC,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,IAAI,mBAAmB,YAAY;AAEzC,QAAM,QAAQ,cAAc,SAAY,EAAE,QAAQ;AAClD,QAAM,cAAc,mBAAmB,EAAE;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,WAAW,OAA6C,IAAI;AAElE;AAAA,IACE,MAAM,MAAM;AACV,UAAI,SAAS,QAAS,cAAa,SAAS,OAAO;AAAA,IACrD;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,gBAAgB,CAAC,SAA0B;AAC/C,QAAI;AACF,YAAM,WAAW,SAAS,cAAc,UAAU;AAClD,eAAS,QAAQ;AACjB,eAAS,aAAa,YAAY,EAAE;AACpC,eAAS,MAAM,WAAW;AAC1B,eAAS,MAAM,UAAU;AACzB,eAAS,KAAK,YAAY,QAAQ;AAClC,eAAS,OAAO;AAChB,YAAM,KAAK,SAAS,YAAY,MAAM;AACtC,eAAS,KAAK,YAAY,QAAQ;AAClC,aAAO;AAAA,IACT,QAAQ;AACN,aAAO;AAAA,IACT;AAAA,EACF;AAEA,QAAM,OAAO,YAAY;AACvB,QAAI;AACF,UAAI,UAAU,WAAW,WAAW;AAClC,cAAM,UAAU,UAAU,UAAU,KAAK;AAAA,MAC3C,WAAW,CAAC,cAAc,KAAK,GAAG;AAChC,cAAM,IAAI,MAAM,wDAA0C;AAAA,MAC5D;AAEA,gBAAU,IAAI;AACd,iBAAW,KAAK;AAChB,UAAI,SAAS,QAAS,cAAa,SAAS,OAAO;AACnD,eAAS,UAAU,WAAW,MAAM,UAAU,KAAK,GAAG,YAAY;AAAA,IACpE,SAAS,OAAO;AACd,oBAAc,KAAK;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,OAAO,SAAS,QAAQ;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,MAAM,KAAK,KAAK;AAAA,MACzB,cAAY,UAAU,SAAS,cAAc,EAAE;AAAA,MAG/C,WAAW,GAAG,WAAW,UAAU,oBAAoB,SAAS;AAAA,MAC/D,GAAG;AAAA,MAEJ;AAAA,4BAAC,QAAK,eAAY,QAAO,WAAU,qBAAoB;AAAA,QACtD,UAAU,QAAQ,oBAAC,UAAM,mBAAS,cAAc,OAAM;AAAA,QACvD,oBAAC,UAAK,aAAU,UAAS,WAAU,WAChC,mBAAS,cAAc,IAC1B;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/composite/data-table-constants.d.ts

@@ -12,8 +12,8 @@
  */
 /**
  * Toàn bộ chuỗi hiển thị (kể cả chuỗi dành riêng cho trình đọc màn hình) của `DataTable` và
- * `DataTableColumnToggle` — app tiếng Anh (hoặc ngôn ngữ khác) override từng khoá qua prop
- * `labels`. Mặc định là tiếng Việt.
+ * `DataTableColumnToggle`. Theo `ComitorLocaleProvider` (mặc định tiếng Anh, bảng tiếng Việt dựng
+ * sẵn); override từng khoá qua prop `labels`.
  *
  * Cùng khuôn với `ShellLabels` ở tầng shell: gói dùng chung cho MỌI app Comitor nên chuỗi
  * chôn cứng trong component là ngõ cụt cho app đa ngôn ngữ.
@@ -34,7 +34,11 @@ interface DataTableLabels {
     /** Nhãn nút + tiêu đề menu ẩn/hiện cột */
     columnToggle: string;
 }
-/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */
+/**
+ * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:
+ * `comitorMessagesVi.dataTable`. Component không đọc thẳng hằng này — nó đọc bảng của
+ * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.
+ */
 declare const DEFAULT_DATA_TABLE_LABELS: DataTableLabels;
 
 export { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels };

package/dist/components/composite/data-table-constants.js

@@ -1,12 +1,5 @@
-const DEFAULT_DATA_TABLE_LABELS = {
-  selectAllRows: "Ch\u1ECDn t\u1EA5t c\u1EA3 d\xF2ng \u0111ang hi\u1EC3n th\u1ECB",
-  deselectAllRows: "B\u1ECF ch\u1ECDn t\u1EA5t c\u1EA3",
-  selectRow: "Ch\u1ECDn d\xF2ng",
-  deselectRow: "B\u1ECF ch\u1ECDn d\xF2ng",
-  emptyTitle: "Ch\u01B0a c\xF3 d\u1EEF li\u1EC7u",
-  emptyDescription: "Danh s\xE1ch hi\u1EC7n \u0111ang tr\u1ED1ng.",
-  columnToggle: "C\u1ED9t hi\u1EC3n th\u1ECB"
-};
+import { dataTableEn } from "../../i18n/namespaces/data-table.js";
+const DEFAULT_DATA_TABLE_LABELS = { ...dataTableEn };
 export {
   DEFAULT_DATA_TABLE_LABELS
 };

package/dist/components/composite/data-table-constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/data-table-constants.ts"],"sourcesContent":["/**\n * Nhãn mặc định của `DataTable` / `DataTableColumnToggle`.\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, danh sách chọn) là thứ trang server hay đọc nhất — spread để override\n * 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.\n *\n * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `data-table.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 */\n\n/**\n * Toàn bộ chuỗi hiển thị (kể cả chuỗi dành riêng cho trình đọc màn hình) của `DataTable` và\n * `DataTableColumnToggle` — app tiếng Anh (hoặc ngôn ngữ khác) override từng khoá qua prop\n * `labels`. Mặc định là tiếng Việt.\n *\n * Cùng khuôn với `ShellLabels` ở tầng shell: gói dùng chung cho MỌI app Comitor nên chuỗi\n * chôn cứng trong component là ngõ cụt cho app đa ngôn ngữ.\n */\nexport interface DataTableLabels {\n  /** aria-label ô chọn ở đầu bảng khi CHƯA chọn hết */\n  selectAllRows: string;\n  /** aria-label ô chọn ở đầu bảng khi ĐÃ chọn hết */\n  deselectAllRows: string;\n  /** aria-label ô chọn của một dòng khi dòng chưa được chọn */\n  selectRow: string;\n  /** aria-label ô chọn của một dòng khi dòng đã được chọn */\n  deselectRow: string;\n  /** Tiêu đề trạng thái rỗng mặc định (bỏ qua nếu app truyền `empty`) */\n  emptyTitle: string;\n  /** Mô tả trạng thái rỗng mặc định */\n  emptyDescription: string;\n  /** Nhãn nút + tiêu đề menu ẩn/hiện cột */\n  columnToggle: string;\n}\n\n/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */\nexport const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {\n  selectAllRows: \"Chọn tất cả dòng đang hiển thị\",\n  deselectAllRows: \"Bỏ chọn tất cả\",\n  selectRow: \"Chọn dòng\",\n  deselectRow: \"Bỏ chọn dòng\",\n  emptyTitle: \"Chưa có dữ liệu\",\n  emptyDescription: \"Danh sách hiện đang trống.\",\n  columnToggle: \"Cột hiển thị\"\n};\n"],"mappings":"AAuCO,MAAM,4BAA6C;AAAA,EACxD,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,kBAAkB;AAAA,EAClB,cAAc;AAChB;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/data-table-constants.ts"],"sourcesContent":["/**\n * Nhãn mặc định của `DataTable` / `DataTableColumnToggle`.\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, danh sách chọn) là thứ trang server hay đọc nhất — spread để override\n * 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.\n *\n * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `data-table.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 */\n\nimport { dataTableEn } from \"../../i18n/namespaces/data-table.js\";\n\n/**\n * Toàn bộ chuỗi hiển thị (kể cả chuỗi dành riêng cho trình đọc màn hình) của `DataTable` và\n * `DataTableColumnToggle`. Theo `ComitorLocaleProvider` (mặc định tiếng Anh, bảng tiếng Việt dựng\n * sẵn); override từng khoá qua prop `labels`.\n *\n * Cùng khuôn với `ShellLabels` ở tầng shell: gói dùng chung cho MỌI app Comitor nên chuỗi\n * chôn cứng trong component là ngõ cụt cho app đa ngôn ngữ.\n */\nexport interface DataTableLabels {\n  /** aria-label ô chọn ở đầu bảng khi CHƯA chọn hết */\n  selectAllRows: string;\n  /** aria-label ô chọn ở đầu bảng khi ĐÃ chọn hết */\n  deselectAllRows: string;\n  /** aria-label ô chọn của một dòng khi dòng chưa được chọn */\n  selectRow: string;\n  /** aria-label ô chọn của một dòng khi dòng đã được chọn */\n  deselectRow: string;\n  /** Tiêu đề trạng thái rỗng mặc định (bỏ qua nếu app truyền `empty`) */\n  emptyTitle: string;\n  /** Mô tả trạng thái rỗng mặc định */\n  emptyDescription: string;\n  /** Nhãn nút + tiêu đề menu ẩn/hiện cột */\n  columnToggle: string;\n}\n\n/**\n * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:\n * `comitorMessagesVi.dataTable`. Component không đọc thẳng hằng này — nó đọc bảng của\n * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.\n */\n/*\n * `{ ...dataTableEn }` chứ không `= dataTableEn`: cổng `verify:directives` chỉ nhận ra HẰNG DỮ LIỆU\n * khi khởi tạo là một literal (object/mảng/chuỗi…). Gán thẳng một định danh thì nó không còn biết\n * đây là dữ liệu, và thôi canh chuyện hằng này lọt vào file \"use client\" — đo được ở 3.0.0: số\n * hằng được canh tụt từ 58 xuống 47 cho tới khi đổi lại. Cùng khuôn ở mọi `DEFAULT_*_LABELS`.\n */\nexport const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = { ...dataTableEn };\n"],"mappings":"AAaA,SAAS,mBAAmB;AAsCrB,MAAM,4BAA6C,EAAE,GAAG,YAAY;","names":[]}

package/dist/components/composite/data-table.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDown, ArrowUp, ChevronsUpDown, Inbox, SlidersHorizontal } from "lucide-react";
+import { useComitorLabels } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { Checkbox } from "../ui/checkbox.js";
@@ -14,7 +15,6 @@ import {
 } from "../ui/dropdown-menu.js";
 import { Skeleton } from "../ui/skeleton.js";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
-import { DEFAULT_DATA_TABLE_LABELS } from "./data-table-constants.js";
 import { EmptyState } from "./empty-state.js";
 const alignClasses = {
   left: "text-left",
@@ -69,7 +69,7 @@ function DataTable({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
-  const labels = { ...DEFAULT_DATA_TABLE_LABELS, ...labelsProp };
+  const labels = useComitorLabels("dataTable", labelsProp);
   const shownColumns = visibleColumnIds ? columns.filter((column) => visibleColumnIds.includes(column.id)) : columns;
   const pinnedStyles = getPinnedOffsets(shownColumns, selectable);
   const colCount = shownColumns.length + (selectable ? 1 : 0);
@@ -298,7 +298,7 @@ function DataTableColumnToggle({
   labels: labelsProp,
   className
 }) {
-  const labels = { ...DEFAULT_DATA_TABLE_LABELS, ...labelsProp };
+  const labels = useComitorLabels("dataTable", labelsProp);
   const text = label ?? labels.columnToggle;
   const hideable = columns.filter((column) => column.hideable !== false);
   const toggle = (columnId) => {

package/dist/components/composite/data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport { ArrowDown, ArrowUp, ChevronsUpDown, Inbox, SlidersHorizontal } from \"lucide-react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Checkbox } from \"../ui/checkbox.js\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from \"../ui/dropdown-menu.js\";\nimport { Skeleton } from \"../ui/skeleton.js\";\nimport { TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../ui/table.js\";\nimport { type DataTableLabels, DEFAULT_DATA_TABLE_LABELS } from \"./data-table-constants.js\";\nimport { EmptyState } from \"./empty-state.js\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport type DataTableAlign = \"left\" | \"center\" | \"right\";\n\nexport interface DataTableColumn<TRow> {\n  id: string;\n  /** Nội dung ô tiêu đề */\n  header: ReactNode;\n  /** Nhãn chữ dùng trong menu ẩn/hiện cột — bắt buộc khi `header` không phải chuỗi */\n  label?: string;\n  /** Render ô dữ liệu — nhận cả chỉ số dòng để đánh số thứ tự */\n  cell: (row: TRow, rowIndex: number) => ReactNode;\n  sortable?: boolean;\n  align?: DataTableAlign;\n  /**\n   * Bề rộng cột tính bằng px. BẮT BUỘC với cột ghim (`pinned`) vì offset `left/right` của\n   * sticky được tính cộng dồn từ giá trị này — thiếu width thì các cột ghim chồng lên nhau.\n   */\n  width?: number;\n  minWidth?: number;\n  /** Ghim cột khi cuộn ngang (bảng nhiều cột) */\n  pinned?: \"left\" | \"right\";\n  /** Cho phép người dùng ẩn cột này (mặc định true; cột định danh nên đặt false) */\n  hideable?: boolean;\n  headerClassName?: string;\n  cellClassName?: string;\n}\n\nexport interface DataTableProps<TRow> {\n  columns: DataTableColumn<TRow>[];\n  rows: TRow[];\n  /** Khoá ổn định của dòng — dùng cho `key` React và cho tập chọn */\n  getRowId: (row: TRow, index: number) => string;\n\n  /** Đang tải → hiện `loadingRowCount` dòng khung xương thay vì bảng trống */\n  loading?: boolean;\n  loadingRowCount?: number;\n  /** Nội dung khi không có dòng nào (mặc định EmptyState theo `labels.emptyTitle`) */\n  empty?: ReactNode;\n\n  /** Sắp xếp — controlled; `null` = không sắp xếp. App tự sắp/tự gọi API. */\n  sort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n\n  /** Chọn dòng bằng checkbox — controlled */\n  selectable?: boolean;\n  selectedIds?: string[];\n  onSelectedIdsChange?: (ids: string[]) => void;\n  /** Khoá chọn với một số dòng (vd bản ghi đã khoá) */\n  isRowSelectable?: (row: TRow, index: number) => boolean;\n\n  /**\n   * Mã các cột đang hiện — controlled. Bỏ trống = hiện tất cả. Đổi bố cục đi qua\n   * `DataTableColumnToggle`, app tự lưu theo người dùng (server, localStorage…).\n   *\n   * ⚠ Đây là một **TẬP HỢP**, không phải thứ tự: thứ tự cột luôn lấy từ mảng `columns`, thứ tự\n   * bên trong mảng này bị bỏ qua. Tên có hậu tố `Ids` chính là để nói đúng thứ nó chứa —\n   * 0.1.0 đặt `visibleColumns` khiến người đọc tưởng là mảng cột (`DataTableColumn[]`) hoặc\n   * tưởng sắp lại mảng thì cột đổi chỗ.\n   *\n   * Cố ý KHÔNG dùng `Record<string, boolean>`: kiểu đó có trạng thái thứ ba — **khoá vắng\n   * mặt**. App thêm cột mới ở bản sau thì bố cục người dùng đã lưu không có khoá đó, mỗi nơi\n   * tự đoán hiện/ẩn → lỗi im lặng. Một mảng mã cột thì `JSON.stringify` là lưu được.\n   *\n   * Package cố ý KHÔNG tự ghi localStorage: ở SaaS nhiều workspace, bố cục bảng phải theo\n   * cặp (người dùng × workspace) và thường cần đồng bộ giữa các máy — chuyện của app.\n   */\n  visibleColumnIds?: string[];\n\n  /**\n   * Bấm vào dòng (vd mở chi tiết bản ghi). Có prop này thì dòng vào chuỗi Tab và nhận\n   * Enter/Space — mở chi tiết KHÔNG được là thao tác chỉ-chuột.\n   */\n  onRowClick?: (row: TRow, index: number) => void;\n  rowClassName?: (row: TRow, index: number) => string | undefined;\n  /**\n   * Dòng đang được làm nổi (vd bản ghi vừa mở ở panel bên).\n   *\n   * Đánh dấu bằng `outline` chứ không bằng nền — xem lý do đầy đủ ở chỗ áp class. Tóm tắt: nền\n   * có alpha sẽ làm ô cột GHIM trong mờ, và nền class trần thì thua sọc của `striped` về độ đặc\n   * tả nên mất hẳn ở hàng chẵn. `outline` không dính cả hai.\n   *\n   * ⚠ Vì thế app KHÔNG cần tự vá bằng `rowClassName` nữa — dùng thẳng prop này.\n   */\n  isRowActive?: (row: TRow, index: number) => boolean;\n\n  /** Tiêu đề dính đỉnh vùng cuộn (mặc định true) */\n  stickyHeader?: boolean;\n  /**\n   * Tô nền xen kẽ cho hàng chẵn — mẫu DataTable ở mục **Patterns** của comitor-ds dùng\n   * `<Table striped>`, còn `DataTable` trước đây không có đường bật.\n   *\n   * Mặc định `false`: bảng dài và dày cột thì sọc giúp dò hàng, nhưng bảng ngắn thì nó chỉ thêm\n   * nhiễu. Đây là quyết định của từng trang, không phải mặc định của gói.\n   *\n   * ⚠ Sọc PHẢI là màu ĐỤC (`--table-row-stripe`), không phải `bg-muted/30` như bản trước.\n   *\n   * Vì sao: sọc khai bằng biến thể tuỳ ý ở cấp `<table>` nên chọn tử sinh ra là\n   * `.[…] tbody tr:nth-child(even)` — độ đặc tả (0,2,2), trong khi `bg-card` mà `<TableRow>` tự\n   * mang chỉ là một class (0,1,0). Sọc THẮNG và THAY THẾ `bg-card` chứ không chồng lên nó, nên\n   * hàng chẵn còn alpha 0,3 mà không có lớp đục nào bên dưới. Ô cột ghim lấy `bg-inherit` từ hàng\n   * → cũng trong mờ → cuộn ngang là chữ của các cột bên dưới lộ xuyên qua cột ghim. Đây đúng là\n   * lỗi người dùng nhìn thấy, và nó chỉ xuất hiện ở hàng CHẴN nên rất dễ tưởng là \"hàng đầu ổn\".\n   *\n   * (Chú thích cũ ở đây giải thích rằng \"nền trạng thái luôn thắng vì ghi sau trong chuỗi lớp\" —\n   * SAI, và đó chính là lý do lỗi trên lọt qua: thứ tự trong chuỗi class không quyết định gì, độ\n   * đặc tả mới quyết định. Nền của hàng ĐANG MỞ `bg-app-accent/5` là (0,1,0) nên nó cũng thua\n   * sọc — nhưng hàng đang mở vốn được đánh dấu bằng `outline`, không bằng nền, nên chỗ đó không\n   * lộ ra. Đừng lấy nền làm dấu hiệu hàng ở bảng có sọc.)\n   */\n  striped?: boolean;\n  /** Bề rộng tối thiểu của bảng — bật cuộn ngang khi màn hình hẹp */\n  minWidth?: number | string;\n  /**\n   * Ghi đè mật độ cho RIÊNG bảng này, bất kể trục mật độ toàn app đang ở mức nào.\n   *\n   * Bỏ trống = theo `<html data-density>`. Đặt `\"compact\"` thì bảng tự đặt lại `--row-py` và\n   * `--table-head-h` ngay trên thẻ `<table>`, nên tiêu đề và thân đi cùng nhau — bản trước chỉ\n   * gắn class vào ô THÂN nên `compact` cho hàng tiêu đề 40px đứng trên hàng thân ~26px.\n   */\n  density?: \"comfortable\" | \"compact\";\n  /** Ghi đè chuỗi hiển thị/a11y (mặc định tiếng Việt) — xem `DataTableLabels` */\n  labels?: Partial<DataTableLabels>;\n  /** Nhãn của bảng cho trình đọc màn hình (bắt buộc khi trang có nhiều bảng) */\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  className?: string;\n  /** className của khung cuộn bọc ngoài */\n  containerClassName?: string;\n}\n\nconst alignClasses: Record<DataTableAlign, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\"\n};\n\n/** Offset sticky cộng dồn cho cột ghim trái/phải. */\nfunction getPinnedOffsets<TRow>(columns: DataTableColumn<TRow>[], selectable: boolean): Map<string, CSSProperties> {\n  const styles = new Map<string, CSSProperties>();\n  // Cột checkbox (nếu có) luôn ghim trái và chiếm 44px — cột ghim đầu tiên phải bắt đầu sau nó.\n  let left = selectable ? 44 : 0;\n  for (const column of columns) {\n    if (column.pinned !== \"left\") continue;\n    styles.set(column.id, { position: \"sticky\", left, zIndex: 2 });\n    left += column.width ?? 0;\n  }\n\n  let right = 0;\n  for (const column of [...columns].reverse()) {\n    if (column.pinned !== \"right\") continue;\n    styles.set(column.id, { position: \"sticky\", right, zIndex: 2 });\n    right += column.width ?? 0;\n  }\n\n  return styles;\n}\n\nfunction nextSort(current: DataTableSort | null | undefined, columnId: string): DataTableSort | null {\n  // asc → desc → bỏ sắp xếp. Vòng 3 trạng thái để người dùng quay lại thứ tự gốc của server\n  // mà không phải tải lại trang.\n  if (!current || current.columnId !== columnId) return { columnId, direction: \"asc\" };\n  if (current.direction === \"asc\") return { columnId, direction: \"desc\" };\n  return null;\n}\n\n/**\n * Bảng dữ liệu chuẩn của Comitor: tiêu đề dính, sắp xếp, chọn dòng, ghim cột, ẩn/hiện cột,\n * trạng thái tải và trạng thái rỗng.\n *\n * Mọi trạng thái đều **controlled** — package không giữ dữ liệu, không gọi API, không tự phân\n * trang. Nhờ vậy dùng được cả với dữ liệu client (mảng trong bộ nhớ) lẫn server-side\n * pagination mà không phải viết hai component.\n */\nexport function DataTable<TRow>({\n  columns,\n  rows,\n  getRowId,\n  loading = false,\n  loadingRowCount = 5,\n  empty,\n  sort,\n  onSortChange,\n  selectable = false,\n  selectedIds,\n  onSelectedIdsChange,\n  isRowSelectable,\n  visibleColumnIds,\n  onRowClick,\n  rowClassName,\n  isRowActive,\n  stickyHeader = true,\n  striped = false,\n  minWidth,\n  density = \"comfortable\",\n  labels: labelsProp,\n  className,\n  containerClassName,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby\n}: DataTableProps<TRow>) {\n  const labels = { ...DEFAULT_DATA_TABLE_LABELS, ...labelsProp };\n  // Thứ tự luôn theo `columns` — `visibleColumnIds` chỉ trả lời \"cột nào được hiện\".\n  const shownColumns = visibleColumnIds ? columns.filter((column) => visibleColumnIds.includes(column.id)) : columns;\n  const pinnedStyles = getPinnedOffsets(shownColumns, selectable);\n  const colCount = shownColumns.length + (selectable ? 1 : 0);\n\n  const selected = selectedIds ?? [];\n  // Một lượt duyệt: vừa lọc dòng chọn được vừa lấy id — tránh indexOf() lồng trong map (O(n²))\n  // và tránh sai khi hai dòng cùng tham chiếu object.\n  const selectableIds: string[] = [];\n  rows.forEach((row, index) => {\n    if (isRowSelectable?.(row, index) ?? true) selectableIds.push(getRowId(row, index));\n  });\n  const allSelected = selectableIds.length > 0 && selectableIds.every((id) => selected.includes(id));\n  const someSelected = !allSelected && selectableIds.some((id) => selected.includes(id));\n\n  const toggleAll = () => {\n    if (!onSelectedIdsChange) return;\n    if (allSelected) {\n      onSelectedIdsChange(selected.filter((id) => !selectableIds.includes(id)));\n      return;\n    }\n    onSelectedIdsChange([...new Set([...selected, ...selectableIds])]);\n  };\n\n  const toggleRow = (id: string) => {\n    if (!onSelectedIdsChange) return;\n    onSelectedIdsChange(selected.includes(id) ? selected.filter((item) => item !== id) : [...selected, id]);\n  };\n\n  /*\n   * `density` nay là GHI ĐÈ CỤC BỘ của trục mật độ toàn cục, không phải một bảng lớp riêng.\n   *\n   * Bản trước là `density === \"compact\" ? \"px-3 py-1.5\" : \"px-4 py-3\"` gắn tay vào bốn ô THÂN —\n   * ba khuyết tật cùng lúc: (1) nó không bao giờ tới `<TableHead>`, nên `compact` cho hàng tiêu\n   * đề 40px đứng trên hàng thân ~26px; (2) nó trộn hai trục, co cả chiều NGANG (px-4 → px-3)\n   * trong khi \"gọn\" chỉ nên là chuyện chiều dọc; (3) bảng nào dùng `<Table>` trần thì không có\n   * mật độ nào cả.\n   *\n   * Đặt biến ở chính thẻ `<table>` thì cả ba biến mất: `TableHead`/`TableCell` đã đọc\n   * `--table-head-h`/`--row-py` nên tiêu đề và thân đi cùng nhau, và một bảng vẫn gọn được ngay\n   * cả khi toàn app đang ở mức thoải mái (hoặc ngược lại).\n   */\n  const densityVars =\n    density === \"compact\" ? ({ \"--row-py\": \"0.375rem\", \"--table-head-h\": \"2rem\" } as CSSProperties) : undefined;\n\n  return (\n    <div\n      data-slot=\"data-table-container\"\n      className={cn(\"relative w-full overflow-auto rounded-xl border border-border bg-card\", containerClassName)}\n    >\n      <table\n        data-slot=\"data-table\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-busy={loading || undefined}\n        className={cn(\n          \"w-full caption-bottom text-sm\",\n          // Cùng một chuỗi lớp với `<Table striped>` của Tier 1 — đổi một chỗ thì đổi cả hai.\n          striped &&\n            \"[&_tbody_tr:nth-child(even)]:bg-table-row-stripe [&_tbody_tr:nth-child(even):hover]:bg-table-row-hover\",\n          className\n        )}\n        style={\n          minWidth != null || densityVars ? { ...densityVars, ...(minWidth != null ? { minWidth } : null) } : undefined\n        }\n      >\n        <TableHeader className={cn(stickyHeader && \"sticky top-0 z-10\")}>\n          {/* Nền ĐẶC đặt trên <tr>, không phải <thead>: ô ghim dùng `bg-inherit` mà\n              background-color kế thừa từ CHA TRỰC TIẾP (<tr>). Để nền ở <thead> thì <tr> vẫn\n              trong suốt → cột ghim nhìn xuyên thấy dữ liệu cuộn phía dưới. */}\n          <TableRow className=\"bg-muted hover:bg-muted\">\n            {selectable && (\n              <TableHead\n                className=\"w-11 bg-inherit\"\n                style={{ position: \"sticky\", left: 0, zIndex: 3, width: 44, minWidth: 44 }}\n              >\n                <Checkbox\n                  checked={allSelected ? true : someSelected ? \"indeterminate\" : false}\n                  onCheckedChange={toggleAll}\n                  disabled={selectableIds.length === 0}\n                  aria-label={allSelected ? labels.deselectAllRows : labels.selectAllRows}\n                />\n              </TableHead>\n            )}\n\n            {shownColumns.map((column) => {\n              const isSorted = sort?.columnId === column.id;\n              const SortIcon = isSorted ? (sort?.direction === \"asc\" ? ArrowUp : ArrowDown) : ChevronsUpDown;\n              const pinnedStyle = pinnedStyles.get(column.id);\n\n              return (\n                <TableHead\n                  key={column.id}\n                  scope=\"col\"\n                  aria-sort={isSorted ? (sort?.direction === \"asc\" ? \"ascending\" : \"descending\") : undefined}\n                  className={cn(\n                    alignClasses[column.align ?? \"left\"],\n                    pinnedStyle && \"bg-inherit\",\n                    column.headerClassName\n                  )}\n                  style={{\n                    ...pinnedStyle,\n                    width: column.width,\n                    minWidth: column.minWidth ?? column.width\n                  }}\n                >\n                  {column.sortable && onSortChange ? (\n                    <button\n                      type=\"button\"\n                      onClick={() => onSortChange(nextSort(sort, column.id))}\n                      className={cn(\n                        \"-mx-1 inline-flex items-center gap-1 rounded-sm px-1 py-0.5 uppercase transition-colors hover:text-foreground\",\n                        column.align === \"right\" && \"flex-row-reverse\",\n                        isSorted && \"text-foreground\"\n                      )}\n                    >\n                      {column.header}\n                      {/* KHÔNG làm mờ icon chưa sắp xếp: nút này còn bấm được nên `opacity-*`\n                          không được miễn trừ ngưỡng 3:1 của WCAG 1.4.11 cho icon mang nghĩa.\n                          `opacity-50` cho ra 1,98:1 (light) / 2,23:1 (dark) trên nền `bg-muted`\n                          của hàng tiêu đề ✗; để nguyên `text-muted-foreground` là 4,89 / 4,86:1 ✓.\n                          Trạng thái ĐANG sắp xếp vẫn phân biệt được: nút đổi sang\n                          `text-foreground` và icon đổi hình (ArrowUp/ArrowDown ⇄ ChevronsUpDown). */}\n                      <SortIcon aria-hidden=\"true\" className=\"size-3.5\" />\n                    </button>\n                  ) : (\n                    column.header\n                  )}\n                </TableHead>\n              );\n            })}\n          </TableRow>\n        </TableHeader>\n\n        <TableBody>\n          {loading &&\n            Array.from({ length: loadingRowCount }).map((_, rowIndex) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: dòng khung xương không có danh tính dữ liệu\n              <TableRow key={`skeleton-${rowIndex}`} className=\"hover:bg-transparent\">\n                {selectable && (\n                  <TableCell>\n                    <Skeleton className=\"size-4 rounded-sm\" />\n                  </TableCell>\n                )}\n                {shownColumns.map((column) => (\n                  <TableCell key={column.id}>\n                    <Skeleton className=\"h-4 w-full max-w-[12rem]\" />\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n\n          {!loading && rows.length === 0 && (\n            <TableRow className=\"hover:bg-transparent\">\n              <TableCell colSpan={colCount} className=\"p-0\">\n                {empty ?? <EmptyState icon={Inbox} title={labels.emptyTitle} description={labels.emptyDescription} />}\n              </TableCell>\n            </TableRow>\n          )}\n\n          {!loading &&\n            rows.map((row, rowIndex) => {\n              const id = getRowId(row, rowIndex);\n              const isSelected = selected.includes(id);\n              const canSelect = isRowSelectable?.(row, rowIndex) ?? true;\n              const active = isRowActive?.(row, rowIndex) ?? false;\n\n              return (\n                <TableRow\n                  key={id}\n                  data-state={isSelected ? \"selected\" : undefined}\n                  aria-selected={selectable ? isSelected : undefined}\n                  onClick={onRowClick ? () => onRowClick(row, rowIndex) : undefined}\n                  // Dòng bấm được phải dùng được bằng BÀN PHÍM: đưa <tr> vào chuỗi Tab và tự\n                  // xử lý Enter/Space. Cố ý KHÔNG đặt role=\"button\" — role đó đè role=\"row\"\n                  // ngầm, trình đọc màn hình sẽ mất cấu trúc bảng (số dòng/cột, tiêu đề cột);\n                  // dòng vẫn là dòng, chỉ thêm khả năng kích hoạt.\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onKeyDown={\n                    onRowClick\n                      ? (event) => {\n                          // Chỉ nhận phím khi CHÍNH <tr> đang focus: Enter/Space bấm trên\n                          // control bên trong ô (checkbox, nút, link) đã có nghĩa riêng —\n                          // nổi bọt lên đây sẽ mở chi tiết ngoài ý muốn.\n                          if (event.target !== event.currentTarget) return;\n                          if (event.key !== \"Enter\" && event.key !== \" \") return;\n                          // Space mặc định cuộn trang, Enter có thể submit form bao ngoài.\n                          event.preventDefault();\n                          onRowClick(row, rowIndex);\n                        }\n                      : undefined\n                  }\n                  className={cn(\n                    // bg-card trên <tr> để ô ghim (`bg-inherit`) có màu đặc mà vẫn đổi theo\n                    // trạng thái chọn/hover của chính dòng đó.\n                    \"bg-card\",\n                    // Viền focus vẽ bằng `outline` chứ không `ring`: <tr> nằm trong bảng\n                    // border-collapse, box-shadow không được vẽ. Offset ÂM để viền nằm trong\n                    // lòng dòng, không bị khung cuộn cắt mất ở mép trái/phải.\n                    // Màu dùng `foreground` chứ không `ring` (gold #E8B824 chỉ ~1,9:1 trên nền\n                    // card — dưới 3:1 của WCAG 1.4.11 cho thành phần phi-văn-bản).\n                    onRowClick &&\n                      \"cursor-pointer focus-visible:outline-2 focus-visible:outline-foreground focus-visible:[outline-offset:-2px]\",\n                    /*\n                     * Dòng ĐANG MỞ đánh dấu bằng `outline`, KHÔNG bằng nền — hai lý do, cả hai\n                     * đều là lỗi thật của bản trước (`bg-app-accent/5`):\n                     *\n                     *  1. Lớp nền đó CÓ ALPHA. Ô cột ghim lấy nền bằng `bg-inherit` từ hàng, nên\n                     *     nó thừa hưởng luôn alpha và trở nên trong mờ — cuộn ngang là chữ của\n                     *     các cột bên dưới lộ xuyên qua cột ghim.\n                     *  2. Nó là một class trần, độ đặc tả (0,1,0). Sọc của `striped` khai ở cấp\n                     *     `<table>` nên chọn tử ra (0,2,2) và THẮNG — tức ở bảng có sọc, dòng\n                     *     đang mở không hiện gì ở hàng CHẴN.\n                     *\n                     * Và vì sao vẽ trên TỪNG Ô (`[&>td]`) chứ không phải `outline` trên `<tr>`:\n                     * ô cột ghim mang `z-index: 2` nên nó nằm ở lớp cao hơn và ĐÈ LÊN viền của\n                     * hàng — dấu bị cắt cụt đúng ở vùng cột ghim, kể cả khi chưa cuộn ngang. Đã\n                     * thử và chụp lại. Bóng INSET vẽ trong lòng từng ô, tức vẽ CÙNG lớp với ô đó,\n                     * nên cột ghim cũng có dấu; và vì là bóng chứ không phải viền nên nó không\n                     * cộng vào chiều cao — mở một dòng không làm bảng nhảy 4px.\n                     *\n                     * Không đụng nhóm `bg-*` nên miễn nhiễm cả hai lỗi trên: cột ghim giữ nền\n                     * đục, và sọc không có gì để tranh.\n                     *\n                     * Màu `--app-accent-ink` (bậc đi lên nền trang): 6,14:1 trên `--card` ở light\n                     * · 9,61:1 ở dark — trên ngưỡng 3:1 của WCAG 1.4.11. KHÔNG dùng\n                     * `--app-accent` trần: gold #E8B824 chỉ 1,86:1, đúng cái bẫy \"token tô NỀN\n                     * đem vẽ DẤU\".\n                     *\n                     * ⚠ Trong giá trị tuỳ ý phải viết `var(--app-accent-ink)` — TOKEN THÔ — chứ\n                     * KHÔNG phải `var(--color-app-accent-ink)`. `@theme inline` khai\n                     * `--color-app-accent-ink: var(--app-accent-ink)`, nghĩa là utility sinh ra\n                     * nhúng thẳng `var(--app-accent-ink)` nên nó KẾ THỪA được accent mà app đặt\n                     * trên một thẻ bọc; còn biến `--color-*` thì vẫn nằm ở `:root` với giá trị đã\n                     * hoá giải theo gốc. Đo tại chính ô: `--app-accent-ink` = #1A6668 (teal của\n                     * app) nhưng `--color-app-accent-ink` = #7A5800 (gold mặc định) — viết nhầm\n                     * là dấu ra sai màu app mà không có gì báo.\n                     */\n                    active &&\n                      \"[&>td]:shadow-[inset_0_2px_0_var(--app-accent-ink),inset_0_-2px_0_var(--app-accent-ink)]\",\n                    rowClassName?.(row, rowIndex)\n                  )}\n                >\n                  {selectable && (\n                    <TableCell\n                      className=\"bg-inherit\"\n                      style={{ position: \"sticky\", left: 0, zIndex: 1, width: 44, minWidth: 44 }}\n                    >\n                      {/* Chặn nổi bọt: bấm checkbox không được kích hoạt onRowClick (mở chi tiết) */}\n                      {/* biome-ignore lint/a11y/noStaticElementInteractions: lớp bọc chỉ chặn sự kiện, tương tác nằm ở Checkbox bên trong */}\n                      {/* biome-ignore lint/a11y/useKeyWithClickEvents: phím bấm đã do Checkbox xử lý */}\n                      <span onClick={(event) => event.stopPropagation()}>\n                        <Checkbox\n                          checked={isSelected}\n                          disabled={!canSelect}\n                          onCheckedChange={() => toggleRow(id)}\n                          aria-label={isSelected ? labels.deselectRow : labels.selectRow}\n                        />\n                      </span>\n                    </TableCell>\n                  )}\n\n                  {shownColumns.map((column) => {\n                    const pinnedStyle = pinnedStyles.get(column.id);\n                    return (\n                      <TableCell\n                        key={column.id}\n                        className={cn(\n                          alignClasses[column.align ?? \"left\"],\n                          pinnedStyle && \"bg-inherit\",\n                          column.cellClassName\n                        )}\n                        style={{ ...pinnedStyle, width: column.width, minWidth: column.minWidth ?? column.width }}\n                      >\n                        {column.cell(row, rowIndex)}\n                      </TableCell>\n                    );\n                  })}\n                </TableRow>\n              );\n            })}\n        </TableBody>\n      </table>\n    </div>\n  );\n}\n\nexport interface DataTableColumnToggleProps<TRow> {\n  columns: DataTableColumn<TRow>[];\n  /** Mã các cột đang hiện — cùng nguồn với `DataTable.visibleColumnIds` (tập hợp, không phải thứ tự) */\n  visibleColumnIds: string[];\n  onVisibleColumnIdsChange: (visibleColumnIds: string[]) => void;\n  /** Nhãn nút + tiêu đề menu; không truyền thì lấy `labels.columnToggle` */\n  label?: string;\n  /** Ghi đè chuỗi hiển thị (mặc định tiếng Việt) — xem `DataTableLabels` */\n  labels?: Partial<DataTableLabels>;\n  className?: string;\n}\n\n/**\n * Menu ẩn/hiện cột đi kèm `DataTable` (đặt trên thanh công cụ của trang danh sách).\n *\n * Không cho ẩn hết: luôn giữ lại ít nhất một cột, nếu không bảng thành khối trắng vô nghĩa\n * và người dùng không có đường quay lại.\n */\nexport function DataTableColumnToggle<TRow>({\n  columns,\n  visibleColumnIds,\n  onVisibleColumnIdsChange,\n  label,\n  labels: labelsProp,\n  className\n}: DataTableColumnToggleProps<TRow>) {\n  const labels = { ...DEFAULT_DATA_TABLE_LABELS, ...labelsProp };\n  const text = label ?? labels.columnToggle;\n  const hideable = columns.filter((column) => column.hideable !== false);\n\n  const toggle = (columnId: string) => {\n    // Bật lại một cột thì dựng lại danh sách theo thứ tự `columns` — giữ cho giá trị app lưu\n    // luôn cùng một hình dạng, dù `DataTable` đằng nào cũng bỏ qua thứ tự bên trong.\n    const next = visibleColumnIds.includes(columnId)\n      ? visibleColumnIds.filter((id) => id !== columnId)\n      : columns.filter((column) => visibleColumnIds.includes(column.id) || column.id === columnId).map((c) => c.id);\n    if (next.length === 0) return;\n    onVisibleColumnIdsChange(next);\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\" className={className} leftIcon={<SlidersHorizontal className=\"size-4\" />}>\n          {text}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-52\">\n        <DropdownMenuLabel>{text}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {hideable.map((column) => (\n          <DropdownMenuCheckboxItem\n            key={column.id}\n            checked={visibleColumnIds.includes(column.id)}\n            onCheckedChange={() => toggle(column.id)}\n            onSelect={(event) => event.preventDefault()}\n          >\n            {column.label ?? (typeof column.header === \"string\" ? column.header : column.id)}\n          </DropdownMenuCheckboxItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/composite/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport { ArrowDown, ArrowUp, ChevronsUpDown, Inbox, SlidersHorizontal } from \"lucide-react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { useComitorLabels } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Checkbox } from \"../ui/checkbox.js\";\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger\n} from \"../ui/dropdown-menu.js\";\nimport { Skeleton } from \"../ui/skeleton.js\";\nimport { TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../ui/table.js\";\nimport type { DataTableLabels } from \"./data-table-constants.js\";\nimport { EmptyState } from \"./empty-state.js\";\n\nexport type SortDirection = \"asc\" | \"desc\";\n\nexport interface DataTableSort {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport type DataTableAlign = \"left\" | \"center\" | \"right\";\n\nexport interface DataTableColumn<TRow> {\n  id: string;\n  /** Nội dung ô tiêu đề */\n  header: ReactNode;\n  /** Nhãn chữ dùng trong menu ẩn/hiện cột — bắt buộc khi `header` không phải chuỗi */\n  label?: string;\n  /** Render ô dữ liệu — nhận cả chỉ số dòng để đánh số thứ tự */\n  cell: (row: TRow, rowIndex: number) => ReactNode;\n  sortable?: boolean;\n  align?: DataTableAlign;\n  /**\n   * Bề rộng cột tính bằng px. BẮT BUỘC với cột ghim (`pinned`) vì offset `left/right` của\n   * sticky được tính cộng dồn từ giá trị này — thiếu width thì các cột ghim chồng lên nhau.\n   */\n  width?: number;\n  minWidth?: number;\n  /** Ghim cột khi cuộn ngang (bảng nhiều cột) */\n  pinned?: \"left\" | \"right\";\n  /** Cho phép người dùng ẩn cột này (mặc định true; cột định danh nên đặt false) */\n  hideable?: boolean;\n  headerClassName?: string;\n  cellClassName?: string;\n}\n\nexport interface DataTableProps<TRow> {\n  columns: DataTableColumn<TRow>[];\n  rows: TRow[];\n  /** Khoá ổn định của dòng — dùng cho `key` React và cho tập chọn */\n  getRowId: (row: TRow, index: number) => string;\n\n  /** Đang tải → hiện `loadingRowCount` dòng khung xương thay vì bảng trống */\n  loading?: boolean;\n  loadingRowCount?: number;\n  /** Nội dung khi không có dòng nào (mặc định EmptyState theo `labels.emptyTitle`) */\n  empty?: ReactNode;\n\n  /** Sắp xếp — controlled; `null` = không sắp xếp. App tự sắp/tự gọi API. */\n  sort?: DataTableSort | null;\n  onSortChange?: (sort: DataTableSort | null) => void;\n\n  /** Chọn dòng bằng checkbox — controlled */\n  selectable?: boolean;\n  selectedIds?: string[];\n  onSelectedIdsChange?: (ids: string[]) => void;\n  /** Khoá chọn với một số dòng (vd bản ghi đã khoá) */\n  isRowSelectable?: (row: TRow, index: number) => boolean;\n\n  /**\n   * Mã các cột đang hiện — controlled. Bỏ trống = hiện tất cả. Đổi bố cục đi qua\n   * `DataTableColumnToggle`, app tự lưu theo người dùng (server, localStorage…).\n   *\n   * ⚠ Đây là một **TẬP HỢP**, không phải thứ tự: thứ tự cột luôn lấy từ mảng `columns`, thứ tự\n   * bên trong mảng này bị bỏ qua. Tên có hậu tố `Ids` chính là để nói đúng thứ nó chứa —\n   * 0.1.0 đặt `visibleColumns` khiến người đọc tưởng là mảng cột (`DataTableColumn[]`) hoặc\n   * tưởng sắp lại mảng thì cột đổi chỗ.\n   *\n   * Cố ý KHÔNG dùng `Record<string, boolean>`: kiểu đó có trạng thái thứ ba — **khoá vắng\n   * mặt**. App thêm cột mới ở bản sau thì bố cục người dùng đã lưu không có khoá đó, mỗi nơi\n   * tự đoán hiện/ẩn → lỗi im lặng. Một mảng mã cột thì `JSON.stringify` là lưu được.\n   *\n   * Package cố ý KHÔNG tự ghi localStorage: ở SaaS nhiều workspace, bố cục bảng phải theo\n   * cặp (người dùng × workspace) và thường cần đồng bộ giữa các máy — chuyện của app.\n   */\n  visibleColumnIds?: string[];\n\n  /**\n   * Bấm vào dòng (vd mở chi tiết bản ghi). Có prop này thì dòng vào chuỗi Tab và nhận\n   * Enter/Space — mở chi tiết KHÔNG được là thao tác chỉ-chuột.\n   */\n  onRowClick?: (row: TRow, index: number) => void;\n  rowClassName?: (row: TRow, index: number) => string | undefined;\n  /**\n   * Dòng đang được làm nổi (vd bản ghi vừa mở ở panel bên).\n   *\n   * Đánh dấu bằng `outline` chứ không bằng nền — xem lý do đầy đủ ở chỗ áp class. Tóm tắt: nền\n   * có alpha sẽ làm ô cột GHIM trong mờ, và nền class trần thì thua sọc của `striped` về độ đặc\n   * tả nên mất hẳn ở hàng chẵn. `outline` không dính cả hai.\n   *\n   * ⚠ Vì thế app KHÔNG cần tự vá bằng `rowClassName` nữa — dùng thẳng prop này.\n   */\n  isRowActive?: (row: TRow, index: number) => boolean;\n\n  /** Tiêu đề dính đỉnh vùng cuộn (mặc định true) */\n  stickyHeader?: boolean;\n  /**\n   * Tô nền xen kẽ cho hàng chẵn — mẫu DataTable ở mục **Patterns** của comitor-ds dùng\n   * `<Table striped>`, còn `DataTable` trước đây không có đường bật.\n   *\n   * Mặc định `false`: bảng dài và dày cột thì sọc giúp dò hàng, nhưng bảng ngắn thì nó chỉ thêm\n   * nhiễu. Đây là quyết định của từng trang, không phải mặc định của gói.\n   *\n   * ⚠ Sọc PHẢI là màu ĐỤC (`--table-row-stripe`), không phải `bg-muted/30` như bản trước.\n   *\n   * Vì sao: sọc khai bằng biến thể tuỳ ý ở cấp `<table>` nên chọn tử sinh ra là\n   * `.[…] tbody tr:nth-child(even)` — độ đặc tả (0,2,2), trong khi `bg-card` mà `<TableRow>` tự\n   * mang chỉ là một class (0,1,0). Sọc THẮNG và THAY THẾ `bg-card` chứ không chồng lên nó, nên\n   * hàng chẵn còn alpha 0,3 mà không có lớp đục nào bên dưới. Ô cột ghim lấy `bg-inherit` từ hàng\n   * → cũng trong mờ → cuộn ngang là chữ của các cột bên dưới lộ xuyên qua cột ghim. Đây đúng là\n   * lỗi người dùng nhìn thấy, và nó chỉ xuất hiện ở hàng CHẴN nên rất dễ tưởng là \"hàng đầu ổn\".\n   *\n   * (Chú thích cũ ở đây giải thích rằng \"nền trạng thái luôn thắng vì ghi sau trong chuỗi lớp\" —\n   * SAI, và đó chính là lý do lỗi trên lọt qua: thứ tự trong chuỗi class không quyết định gì, độ\n   * đặc tả mới quyết định. Nền của hàng ĐANG MỞ `bg-app-accent/5` là (0,1,0) nên nó cũng thua\n   * sọc — nhưng hàng đang mở vốn được đánh dấu bằng `outline`, không bằng nền, nên chỗ đó không\n   * lộ ra. Đừng lấy nền làm dấu hiệu hàng ở bảng có sọc.)\n   */\n  striped?: boolean;\n  /** Bề rộng tối thiểu của bảng — bật cuộn ngang khi màn hình hẹp */\n  minWidth?: number | string;\n  /**\n   * Ghi đè mật độ cho RIÊNG bảng này, bất kể trục mật độ toàn app đang ở mức nào.\n   *\n   * Bỏ trống = theo `<html data-density>`. Đặt `\"compact\"` thì bảng tự đặt lại `--row-py` và\n   * `--table-head-h` ngay trên thẻ `<table>`, nên tiêu đề và thân đi cùng nhau — bản trước chỉ\n   * gắn class vào ô THÂN nên `compact` cho hàng tiêu đề 40px đứng trên hàng thân ~26px.\n   */\n  density?: \"comfortable\" | \"compact\";\n  /** Ghi đè chuỗi hiển thị/a11y (mặc định tiếng Việt) — xem `DataTableLabels` */\n  labels?: Partial<DataTableLabels>;\n  /** Nhãn của bảng cho trình đọc màn hình (bắt buộc khi trang có nhiều bảng) */\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  className?: string;\n  /** className của khung cuộn bọc ngoài */\n  containerClassName?: string;\n}\n\nconst alignClasses: Record<DataTableAlign, string> = {\n  left: \"text-left\",\n  center: \"text-center\",\n  right: \"text-right\"\n};\n\n/** Offset sticky cộng dồn cho cột ghim trái/phải. */\nfunction getPinnedOffsets<TRow>(columns: DataTableColumn<TRow>[], selectable: boolean): Map<string, CSSProperties> {\n  const styles = new Map<string, CSSProperties>();\n  // Cột checkbox (nếu có) luôn ghim trái và chiếm 44px — cột ghim đầu tiên phải bắt đầu sau nó.\n  let left = selectable ? 44 : 0;\n  for (const column of columns) {\n    if (column.pinned !== \"left\") continue;\n    styles.set(column.id, { position: \"sticky\", left, zIndex: 2 });\n    left += column.width ?? 0;\n  }\n\n  let right = 0;\n  for (const column of [...columns].reverse()) {\n    if (column.pinned !== \"right\") continue;\n    styles.set(column.id, { position: \"sticky\", right, zIndex: 2 });\n    right += column.width ?? 0;\n  }\n\n  return styles;\n}\n\nfunction nextSort(current: DataTableSort | null | undefined, columnId: string): DataTableSort | null {\n  // asc → desc → bỏ sắp xếp. Vòng 3 trạng thái để người dùng quay lại thứ tự gốc của server\n  // mà không phải tải lại trang.\n  if (!current || current.columnId !== columnId) return { columnId, direction: \"asc\" };\n  if (current.direction === \"asc\") return { columnId, direction: \"desc\" };\n  return null;\n}\n\n/**\n * Bảng dữ liệu chuẩn của Comitor: tiêu đề dính, sắp xếp, chọn dòng, ghim cột, ẩn/hiện cột,\n * trạng thái tải và trạng thái rỗng.\n *\n * Mọi trạng thái đều **controlled** — package không giữ dữ liệu, không gọi API, không tự phân\n * trang. Nhờ vậy dùng được cả với dữ liệu client (mảng trong bộ nhớ) lẫn server-side\n * pagination mà không phải viết hai component.\n */\nexport function DataTable<TRow>({\n  columns,\n  rows,\n  getRowId,\n  loading = false,\n  loadingRowCount = 5,\n  empty,\n  sort,\n  onSortChange,\n  selectable = false,\n  selectedIds,\n  onSelectedIdsChange,\n  isRowSelectable,\n  visibleColumnIds,\n  onRowClick,\n  rowClassName,\n  isRowActive,\n  stickyHeader = true,\n  striped = false,\n  minWidth,\n  density = \"comfortable\",\n  labels: labelsProp,\n  className,\n  containerClassName,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledby\n}: DataTableProps<TRow>) {\n  const labels = useComitorLabels(\"dataTable\", labelsProp);\n  // Thứ tự luôn theo `columns` — `visibleColumnIds` chỉ trả lời \"cột nào được hiện\".\n  const shownColumns = visibleColumnIds ? columns.filter((column) => visibleColumnIds.includes(column.id)) : columns;\n  const pinnedStyles = getPinnedOffsets(shownColumns, selectable);\n  const colCount = shownColumns.length + (selectable ? 1 : 0);\n\n  const selected = selectedIds ?? [];\n  // Một lượt duyệt: vừa lọc dòng chọn được vừa lấy id — tránh indexOf() lồng trong map (O(n²))\n  // và tránh sai khi hai dòng cùng tham chiếu object.\n  const selectableIds: string[] = [];\n  rows.forEach((row, index) => {\n    if (isRowSelectable?.(row, index) ?? true) selectableIds.push(getRowId(row, index));\n  });\n  const allSelected = selectableIds.length > 0 && selectableIds.every((id) => selected.includes(id));\n  const someSelected = !allSelected && selectableIds.some((id) => selected.includes(id));\n\n  const toggleAll = () => {\n    if (!onSelectedIdsChange) return;\n    if (allSelected) {\n      onSelectedIdsChange(selected.filter((id) => !selectableIds.includes(id)));\n      return;\n    }\n    onSelectedIdsChange([...new Set([...selected, ...selectableIds])]);\n  };\n\n  const toggleRow = (id: string) => {\n    if (!onSelectedIdsChange) return;\n    onSelectedIdsChange(selected.includes(id) ? selected.filter((item) => item !== id) : [...selected, id]);\n  };\n\n  /*\n   * `density` nay là GHI ĐÈ CỤC BỘ của trục mật độ toàn cục, không phải một bảng lớp riêng.\n   *\n   * Bản trước là `density === \"compact\" ? \"px-3 py-1.5\" : \"px-4 py-3\"` gắn tay vào bốn ô THÂN —\n   * ba khuyết tật cùng lúc: (1) nó không bao giờ tới `<TableHead>`, nên `compact` cho hàng tiêu\n   * đề 40px đứng trên hàng thân ~26px; (2) nó trộn hai trục, co cả chiều NGANG (px-4 → px-3)\n   * trong khi \"gọn\" chỉ nên là chuyện chiều dọc; (3) bảng nào dùng `<Table>` trần thì không có\n   * mật độ nào cả.\n   *\n   * Đặt biến ở chính thẻ `<table>` thì cả ba biến mất: `TableHead`/`TableCell` đã đọc\n   * `--table-head-h`/`--row-py` nên tiêu đề và thân đi cùng nhau, và một bảng vẫn gọn được ngay\n   * cả khi toàn app đang ở mức thoải mái (hoặc ngược lại).\n   */\n  const densityVars =\n    density === \"compact\" ? ({ \"--row-py\": \"0.375rem\", \"--table-head-h\": \"2rem\" } as CSSProperties) : undefined;\n\n  return (\n    <div\n      data-slot=\"data-table-container\"\n      className={cn(\"relative w-full overflow-auto rounded-xl border border-border bg-card\", containerClassName)}\n    >\n      <table\n        data-slot=\"data-table\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-busy={loading || undefined}\n        className={cn(\n          \"w-full caption-bottom text-sm\",\n          // Cùng một chuỗi lớp với `<Table striped>` của Tier 1 — đổi một chỗ thì đổi cả hai.\n          striped &&\n            \"[&_tbody_tr:nth-child(even)]:bg-table-row-stripe [&_tbody_tr:nth-child(even):hover]:bg-table-row-hover\",\n          className\n        )}\n        style={\n          minWidth != null || densityVars ? { ...densityVars, ...(minWidth != null ? { minWidth } : null) } : undefined\n        }\n      >\n        <TableHeader className={cn(stickyHeader && \"sticky top-0 z-10\")}>\n          {/* Nền ĐẶC đặt trên <tr>, không phải <thead>: ô ghim dùng `bg-inherit` mà\n              background-color kế thừa từ CHA TRỰC TIẾP (<tr>). Để nền ở <thead> thì <tr> vẫn\n              trong suốt → cột ghim nhìn xuyên thấy dữ liệu cuộn phía dưới. */}\n          <TableRow className=\"bg-muted hover:bg-muted\">\n            {selectable && (\n              <TableHead\n                className=\"w-11 bg-inherit\"\n                style={{ position: \"sticky\", left: 0, zIndex: 3, width: 44, minWidth: 44 }}\n              >\n                <Checkbox\n                  checked={allSelected ? true : someSelected ? \"indeterminate\" : false}\n                  onCheckedChange={toggleAll}\n                  disabled={selectableIds.length === 0}\n                  aria-label={allSelected ? labels.deselectAllRows : labels.selectAllRows}\n                />\n              </TableHead>\n            )}\n\n            {shownColumns.map((column) => {\n              const isSorted = sort?.columnId === column.id;\n              const SortIcon = isSorted ? (sort?.direction === \"asc\" ? ArrowUp : ArrowDown) : ChevronsUpDown;\n              const pinnedStyle = pinnedStyles.get(column.id);\n\n              return (\n                <TableHead\n                  key={column.id}\n                  scope=\"col\"\n                  aria-sort={isSorted ? (sort?.direction === \"asc\" ? \"ascending\" : \"descending\") : undefined}\n                  className={cn(\n                    alignClasses[column.align ?? \"left\"],\n                    pinnedStyle && \"bg-inherit\",\n                    column.headerClassName\n                  )}\n                  style={{\n                    ...pinnedStyle,\n                    width: column.width,\n                    minWidth: column.minWidth ?? column.width\n                  }}\n                >\n                  {column.sortable && onSortChange ? (\n                    <button\n                      type=\"button\"\n                      onClick={() => onSortChange(nextSort(sort, column.id))}\n                      className={cn(\n                        \"-mx-1 inline-flex items-center gap-1 rounded-sm px-1 py-0.5 uppercase transition-colors hover:text-foreground\",\n                        column.align === \"right\" && \"flex-row-reverse\",\n                        isSorted && \"text-foreground\"\n                      )}\n                    >\n                      {column.header}\n                      {/* KHÔNG làm mờ icon chưa sắp xếp: nút này còn bấm được nên `opacity-*`\n                          không được miễn trừ ngưỡng 3:1 của WCAG 1.4.11 cho icon mang nghĩa.\n                          `opacity-50` cho ra 1,98:1 (light) / 2,23:1 (dark) trên nền `bg-muted`\n                          của hàng tiêu đề ✗; để nguyên `text-muted-foreground` là 4,89 / 4,86:1 ✓.\n                          Trạng thái ĐANG sắp xếp vẫn phân biệt được: nút đổi sang\n                          `text-foreground` và icon đổi hình (ArrowUp/ArrowDown ⇄ ChevronsUpDown). */}\n                      <SortIcon aria-hidden=\"true\" className=\"size-3.5\" />\n                    </button>\n                  ) : (\n                    column.header\n                  )}\n                </TableHead>\n              );\n            })}\n          </TableRow>\n        </TableHeader>\n\n        <TableBody>\n          {loading &&\n            Array.from({ length: loadingRowCount }).map((_, rowIndex) => (\n              // biome-ignore lint/suspicious/noArrayIndexKey: dòng khung xương không có danh tính dữ liệu\n              <TableRow key={`skeleton-${rowIndex}`} className=\"hover:bg-transparent\">\n                {selectable && (\n                  <TableCell>\n                    <Skeleton className=\"size-4 rounded-sm\" />\n                  </TableCell>\n                )}\n                {shownColumns.map((column) => (\n                  <TableCell key={column.id}>\n                    <Skeleton className=\"h-4 w-full max-w-[12rem]\" />\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n\n          {!loading && rows.length === 0 && (\n            <TableRow className=\"hover:bg-transparent\">\n              <TableCell colSpan={colCount} className=\"p-0\">\n                {empty ?? <EmptyState icon={Inbox} title={labels.emptyTitle} description={labels.emptyDescription} />}\n              </TableCell>\n            </TableRow>\n          )}\n\n          {!loading &&\n            rows.map((row, rowIndex) => {\n              const id = getRowId(row, rowIndex);\n              const isSelected = selected.includes(id);\n              const canSelect = isRowSelectable?.(row, rowIndex) ?? true;\n              const active = isRowActive?.(row, rowIndex) ?? false;\n\n              return (\n                <TableRow\n                  key={id}\n                  data-state={isSelected ? \"selected\" : undefined}\n                  aria-selected={selectable ? isSelected : undefined}\n                  onClick={onRowClick ? () => onRowClick(row, rowIndex) : undefined}\n                  // Dòng bấm được phải dùng được bằng BÀN PHÍM: đưa <tr> vào chuỗi Tab và tự\n                  // xử lý Enter/Space. Cố ý KHÔNG đặt role=\"button\" — role đó đè role=\"row\"\n                  // ngầm, trình đọc màn hình sẽ mất cấu trúc bảng (số dòng/cột, tiêu đề cột);\n                  // dòng vẫn là dòng, chỉ thêm khả năng kích hoạt.\n                  tabIndex={onRowClick ? 0 : undefined}\n                  onKeyDown={\n                    onRowClick\n                      ? (event) => {\n                          // Chỉ nhận phím khi CHÍNH <tr> đang focus: Enter/Space bấm trên\n                          // control bên trong ô (checkbox, nút, link) đã có nghĩa riêng —\n                          // nổi bọt lên đây sẽ mở chi tiết ngoài ý muốn.\n                          if (event.target !== event.currentTarget) return;\n                          if (event.key !== \"Enter\" && event.key !== \" \") return;\n                          // Space mặc định cuộn trang, Enter có thể submit form bao ngoài.\n                          event.preventDefault();\n                          onRowClick(row, rowIndex);\n                        }\n                      : undefined\n                  }\n                  className={cn(\n                    // bg-card trên <tr> để ô ghim (`bg-inherit`) có màu đặc mà vẫn đổi theo\n                    // trạng thái chọn/hover của chính dòng đó.\n                    \"bg-card\",\n                    // Viền focus vẽ bằng `outline` chứ không `ring`: <tr> nằm trong bảng\n                    // border-collapse, box-shadow không được vẽ. Offset ÂM để viền nằm trong\n                    // lòng dòng, không bị khung cuộn cắt mất ở mép trái/phải.\n                    // Màu dùng `foreground` chứ không `ring` (gold #E8B824 chỉ ~1,9:1 trên nền\n                    // card — dưới 3:1 của WCAG 1.4.11 cho thành phần phi-văn-bản).\n                    onRowClick &&\n                      \"cursor-pointer focus-visible:outline-2 focus-visible:outline-foreground focus-visible:[outline-offset:-2px]\",\n                    /*\n                     * Dòng ĐANG MỞ đánh dấu bằng `outline`, KHÔNG bằng nền — hai lý do, cả hai\n                     * đều là lỗi thật của bản trước (`bg-app-accent/5`):\n                     *\n                     *  1. Lớp nền đó CÓ ALPHA. Ô cột ghim lấy nền bằng `bg-inherit` từ hàng, nên\n                     *     nó thừa hưởng luôn alpha và trở nên trong mờ — cuộn ngang là chữ của\n                     *     các cột bên dưới lộ xuyên qua cột ghim.\n                     *  2. Nó là một class trần, độ đặc tả (0,1,0). Sọc của `striped` khai ở cấp\n                     *     `<table>` nên chọn tử ra (0,2,2) và THẮNG — tức ở bảng có sọc, dòng\n                     *     đang mở không hiện gì ở hàng CHẴN.\n                     *\n                     * Và vì sao vẽ trên TỪNG Ô (`[&>td]`) chứ không phải `outline` trên `<tr>`:\n                     * ô cột ghim mang `z-index: 2` nên nó nằm ở lớp cao hơn và ĐÈ LÊN viền của\n                     * hàng — dấu bị cắt cụt đúng ở vùng cột ghim, kể cả khi chưa cuộn ngang. Đã\n                     * thử và chụp lại. Bóng INSET vẽ trong lòng từng ô, tức vẽ CÙNG lớp với ô đó,\n                     * nên cột ghim cũng có dấu; và vì là bóng chứ không phải viền nên nó không\n                     * cộng vào chiều cao — mở một dòng không làm bảng nhảy 4px.\n                     *\n                     * Không đụng nhóm `bg-*` nên miễn nhiễm cả hai lỗi trên: cột ghim giữ nền\n                     * đục, và sọc không có gì để tranh.\n                     *\n                     * Màu `--app-accent-ink` (bậc đi lên nền trang): 6,14:1 trên `--card` ở light\n                     * · 9,61:1 ở dark — trên ngưỡng 3:1 của WCAG 1.4.11. KHÔNG dùng\n                     * `--app-accent` trần: gold #E8B824 chỉ 1,86:1, đúng cái bẫy \"token tô NỀN\n                     * đem vẽ DẤU\".\n                     *\n                     * ⚠ Trong giá trị tuỳ ý phải viết `var(--app-accent-ink)` — TOKEN THÔ — chứ\n                     * KHÔNG phải `var(--color-app-accent-ink)`. `@theme inline` khai\n                     * `--color-app-accent-ink: var(--app-accent-ink)`, nghĩa là utility sinh ra\n                     * nhúng thẳng `var(--app-accent-ink)` nên nó KẾ THỪA được accent mà app đặt\n                     * trên một thẻ bọc; còn biến `--color-*` thì vẫn nằm ở `:root` với giá trị đã\n                     * hoá giải theo gốc. Đo tại chính ô: `--app-accent-ink` = #1A6668 (teal của\n                     * app) nhưng `--color-app-accent-ink` = #7A5800 (gold mặc định) — viết nhầm\n                     * là dấu ra sai màu app mà không có gì báo.\n                     */\n                    active &&\n                      \"[&>td]:shadow-[inset_0_2px_0_var(--app-accent-ink),inset_0_-2px_0_var(--app-accent-ink)]\",\n                    rowClassName?.(row, rowIndex)\n                  )}\n                >\n                  {selectable && (\n                    <TableCell\n                      className=\"bg-inherit\"\n                      style={{ position: \"sticky\", left: 0, zIndex: 1, width: 44, minWidth: 44 }}\n                    >\n                      {/* Chặn nổi bọt: bấm checkbox không được kích hoạt onRowClick (mở chi tiết) */}\n                      {/* biome-ignore lint/a11y/noStaticElementInteractions: lớp bọc chỉ chặn sự kiện, tương tác nằm ở Checkbox bên trong */}\n                      {/* biome-ignore lint/a11y/useKeyWithClickEvents: phím bấm đã do Checkbox xử lý */}\n                      <span onClick={(event) => event.stopPropagation()}>\n                        <Checkbox\n                          checked={isSelected}\n                          disabled={!canSelect}\n                          onCheckedChange={() => toggleRow(id)}\n                          aria-label={isSelected ? labels.deselectRow : labels.selectRow}\n                        />\n                      </span>\n                    </TableCell>\n                  )}\n\n                  {shownColumns.map((column) => {\n                    const pinnedStyle = pinnedStyles.get(column.id);\n                    return (\n                      <TableCell\n                        key={column.id}\n                        className={cn(\n                          alignClasses[column.align ?? \"left\"],\n                          pinnedStyle && \"bg-inherit\",\n                          column.cellClassName\n                        )}\n                        style={{ ...pinnedStyle, width: column.width, minWidth: column.minWidth ?? column.width }}\n                      >\n                        {column.cell(row, rowIndex)}\n                      </TableCell>\n                    );\n                  })}\n                </TableRow>\n              );\n            })}\n        </TableBody>\n      </table>\n    </div>\n  );\n}\n\nexport interface DataTableColumnToggleProps<TRow> {\n  columns: DataTableColumn<TRow>[];\n  /** Mã các cột đang hiện — cùng nguồn với `DataTable.visibleColumnIds` (tập hợp, không phải thứ tự) */\n  visibleColumnIds: string[];\n  onVisibleColumnIdsChange: (visibleColumnIds: string[]) => void;\n  /** Nhãn nút + tiêu đề menu; không truyền thì lấy `labels.columnToggle` */\n  label?: string;\n  /** Ghi đè chuỗi hiển thị (mặc định tiếng Việt) — xem `DataTableLabels` */\n  labels?: Partial<DataTableLabels>;\n  className?: string;\n}\n\n/**\n * Menu ẩn/hiện cột đi kèm `DataTable` (đặt trên thanh công cụ của trang danh sách).\n *\n * Không cho ẩn hết: luôn giữ lại ít nhất một cột, nếu không bảng thành khối trắng vô nghĩa\n * và người dùng không có đường quay lại.\n */\nexport function DataTableColumnToggle<TRow>({\n  columns,\n  visibleColumnIds,\n  onVisibleColumnIdsChange,\n  label,\n  labels: labelsProp,\n  className\n}: DataTableColumnToggleProps<TRow>) {\n  const labels = useComitorLabels(\"dataTable\", labelsProp);\n  const text = label ?? labels.columnToggle;\n  const hideable = columns.filter((column) => column.hideable !== false);\n\n  const toggle = (columnId: string) => {\n    // Bật lại một cột thì dựng lại danh sách theo thứ tự `columns` — giữ cho giá trị app lưu\n    // luôn cùng một hình dạng, dù `DataTable` đằng nào cũng bỏ qua thứ tự bên trong.\n    const next = visibleColumnIds.includes(columnId)\n      ? visibleColumnIds.filter((id) => id !== columnId)\n      : columns.filter((column) => visibleColumnIds.includes(column.id) || column.id === columnId).map((c) => c.id);\n    if (next.length === 0) return;\n    onVisibleColumnIdsChange(next);\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <Button variant=\"outline\" size=\"sm\" className={className} leftIcon={<SlidersHorizontal className=\"size-4\" />}>\n          {text}\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-52\">\n        <DropdownMenuLabel>{text}</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        {hideable.map((column) => (\n          <DropdownMenuCheckboxItem\n            key={column.id}\n            checked={visibleColumnIds.includes(column.id)}\n            onCheckedChange={() => toggle(column.id)}\n            onSelect={(event) => event.preventDefault()}\n          >\n            {column.label ?? (typeof column.header === \"string\" ? column.header : column.id)}\n          </DropdownMenuCheckboxItem>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -18,8 +18,9 @@ import { DateRange } from 'react-day-picker';
  * Đị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
+ * `locale` bằng `dateFormatForLocale()` bên dưới (không truyền `locale` thì lấy locale date-fns
+ * của `ComitorLocaleProvider`), 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";
@@ -38,12 +39,13 @@ 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 đỏ.
+ * Theo `ComitorLocaleProvider` (namespace `datePicker`, mặc định tiếng Anh); đè từng khoá qua prop
+ * `labels`. Chúng nằm trong `sr-only`, nên sai ngôn ngữ ở đây là lỗi không ảnh chụp nào thấy: giao
+ * diện nhìn thì đúng mà ĐỌC ra lại là thứ tiếng khác.
  *
- * ⚠ `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`.
+ * ⚠ Prop `locale` (date-fns) 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. Provider thì lo CẢ HAI — chỉ khi đè riêng một ô
+ * bằng prop `locale` mới phải nhớ truyền kèm `labels`.
  */
 interface DatePickerLabels {
     /** Nút xoá ngày đang chọn (`DatePicker`) */
@@ -53,21 +55,42 @@ interface DatePickerLabels {
     /** 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;
 }
+/**
+ * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:
+ * `comitorMessagesVi.datePicker`. Component không đọc thẳng hằng này — nó đọc bảng của
+ * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.
+ *
+ * Nhặt đúng ba khoá chứ không trỏ thẳng `datePickerEn`: bảng đó còn mang `rangePlaceholder` và
+ * `presets`, không thuộc hình dạng `DatePickerLabels`.
+ */
 declare const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels;
 interface DatePreset {
     id: string;
+    /** Hiện NGUYÊN VĂN — preset app tự dựng không bao giờ bị gói dịch lại */
     label: string;
     /** Trả về ngày (DatePicker) hoặc khoảng ngày (DateRangePicker) tại thời điểm bấm */
     getValue: () => Date;
 }
 interface DateRangePreset {
     id: string;
+    /** Hiện NGUYÊN VĂN — preset app tự dựng không bao giờ bị gói dịch lại */
     label: string;
     getValue: () => DateRange;
 }
-/** Preset mặc định cho ô chọn một ngày. */
+/**
+ * Preset mặc định cho ô chọn một ngày. `DatePicker` KHÔNG tự bật chúng (`presets` mặc định `false`)
+ * — truyền `presets={DEFAULT_DATE_PRESETS}` để hiện.
+ *
+ * `label` ở đây là tiếng Anh (từ `3.0.0`), nhưng component nhận ra chính các object này và hiện
+ * nhãn theo `ComitorLocaleProvider` (`datePicker.presets`) — kể cả khi app lọc bớt mảng. Muốn
+ * nhãn khác thì dựng preset mới (`{ ...preset, label }`): object mới hiện đúng `label` của nó.
+ */
 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). */
+/**
+ * Preset mặc định cho ô chọn khoảng ngày (báo cáo, bộ lọc danh sách) — `DateRangePicker` dùng khi
+ * app không truyền `presets`. Nhãn: như `DEFAULT_DATE_PRESETS` (tiếng Anh ở hằng, theo provider
+ * khi hiện).
+ */
 declare const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[];
 
 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,38 +1,43 @@
 import { endOfMonth, startOfDay, startOfMonth, subDays, subMonths } from "date-fns";
+import { datePickerEn } from "../../i18n/namespaces/date-picker.js";
 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"
+  clear: datePickerEn.clear,
+  clearRange: datePickerEn.clearRange,
+  openCalendar: datePickerEn.openCalendar
 };
 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)) },
-  { id: "week-ago", label: "7 ng\xE0y tr\u01B0\u1EDBc", getValue: () => startOfDay(subDays(/* @__PURE__ */ new Date(), 7)) }
+  { id: "today", label: datePickerEn.presets.today, getValue: () => startOfDay(/* @__PURE__ */ new Date()) },
+  { id: "yesterday", label: datePickerEn.presets.yesterday, getValue: () => startOfDay(subDays(/* @__PURE__ */ new Date(), 1)) },
+  { id: "week-ago", label: datePickerEn.presets.weekAgo, getValue: () => startOfDay(subDays(/* @__PURE__ */ new Date(), 7)) }
 ];
 const DEFAULT_DATE_RANGE_PRESETS = [
-  { id: "today", label: "H\xF4m nay", getValue: () => ({ from: startOfDay(/* @__PURE__ */ new Date()), to: startOfDay(/* @__PURE__ */ new Date()) }) },
+  {
+    id: "today",
+    label: datePickerEn.presets.today,
+    getValue: () => ({ from: startOfDay(/* @__PURE__ */ new Date()), to: startOfDay(/* @__PURE__ */ new Date()) })
+  },
   {
     id: "last-7",
-    label: "7 ng\xE0y qua",
+    label: datePickerEn.presets.last7Days,
     getValue: () => ({ from: startOfDay(subDays(/* @__PURE__ */ new Date(), 6)), to: startOfDay(/* @__PURE__ */ new Date()) })
   },
   {
     id: "last-30",
-    label: "30 ng\xE0y qua",
+    label: datePickerEn.presets.last30Days,
     getValue: () => ({ from: startOfDay(subDays(/* @__PURE__ */ new Date(), 29)), to: startOfDay(/* @__PURE__ */ new Date()) })
   },
   {
     id: "this-month",
-    label: "Th\xE1ng n\xE0y",
+    label: datePickerEn.presets.thisMonth,
     getValue: () => ({ from: startOfMonth(/* @__PURE__ */ new Date()), to: startOfDay(/* @__PURE__ */ new Date()) })
   },
   {
     id: "last-month",
-    label: "Th\xE1ng tr\u01B0\u1EDBc",
+    label: datePickerEn.presets.lastMonth,
     getValue: () => {
       const previous = subMonths(/* @__PURE__ */ new Date(), 1);
       return { from: startOfMonth(previous), to: endOfMonth(previous) };

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, 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":[]}
+{"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\";\nimport { datePickerEn } from \"../../i18n/namespaces/date-picker.js\";\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 (không truyền `locale` thì lấy locale date-fns\n * của `ComitorLocaleProvider`), nên một app tiếng Anh ra `MM/dd/yyyy` thay vì ngày Việt Nam.\n * 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 * Theo `ComitorLocaleProvider` (namespace `datePicker`, mặc định tiếng Anh); đè từng khoá qua prop\n * `labels`. Chúng nằm trong `sr-only`, nên sai ngôn ngữ ở đây là lỗi không ảnh chụp nào thấy: giao\n * diện nhìn thì đúng mà ĐỌC ra lại là thứ tiếng khác.\n *\n * ⚠ Prop `locale` (date-fns) KHÔNG dịch mấy nhãn này, và không thể: locale của date-fns chỉ mang\n * cách viết ngày tháng, không mang chuỗi giao diện. Provider thì lo CẢ HAI — chỉ khi đè riêng một ô\n * bằng prop `locale` mới phải nhớ truyền kèm `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\n/**\n * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:\n * `comitorMessagesVi.datePicker`. Component không đọc thẳng hằng này — nó đọc bảng của\n * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.\n *\n * Nhặt đúng ba khoá chứ không trỏ thẳng `datePickerEn`: bảng đó còn mang `rangePlaceholder` và\n * `presets`, không thuộc hình dạng `DatePickerLabels`.\n */\nexport const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels = {\n  clear: datePickerEn.clear,\n  clearRange: datePickerEn.clearRange,\n  openCalendar: datePickerEn.openCalendar\n};\n\nexport interface DatePreset {\n  id: string;\n  /** Hiện NGUYÊN VĂN — preset app tự dựng không bao giờ bị gói dịch lại */\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  /** Hiện NGUYÊN VĂN — preset app tự dựng không bao giờ bị gói dịch lại */\n  label: string;\n  getValue: () => DateRange;\n}\n\n/**\n * Preset mặc định cho ô chọn một ngày. `DatePicker` KHÔNG tự bật chúng (`presets` mặc định `false`)\n * — truyền `presets={DEFAULT_DATE_PRESETS}` để hiện.\n *\n * `label` ở đây là tiếng Anh (từ `3.0.0`), nhưng component nhận ra chính các object này và hiện\n * nhãn theo `ComitorLocaleProvider` (`datePicker.presets`) — kể cả khi app lọc bớt mảng. Muốn\n * nhãn khác thì dựng preset mới (`{ ...preset, label }`): object mới hiện đúng `label` của nó.\n */\nexport const DEFAULT_DATE_PRESETS: DatePreset[] = [\n  { id: \"today\", label: datePickerEn.presets.today, getValue: () => startOfDay(new Date()) },\n  { id: \"yesterday\", label: datePickerEn.presets.yesterday, getValue: () => startOfDay(subDays(new Date(), 1)) },\n  { id: \"week-ago\", label: datePickerEn.presets.weekAgo, getValue: () => startOfDay(subDays(new Date(), 7)) }\n];\n\n/**\n * Preset mặc định cho ô chọn khoảng ngày (báo cáo, bộ lọc danh sách) — `DateRangePicker` dùng khi\n * app không truyền `presets`. Nhãn: như `DEFAULT_DATE_PRESETS` (tiếng Anh ở hằng, theo provider\n * khi hiện).\n */\nexport const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[] = [\n  {\n    id: \"today\",\n    label: datePickerEn.presets.today,\n    getValue: () => ({ from: startOfDay(new Date()), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-7\",\n    label: datePickerEn.presets.last7Days,\n    getValue: () => ({ from: startOfDay(subDays(new Date(), 6)), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-30\",\n    label: datePickerEn.presets.last30Days,\n    getValue: () => ({ from: startOfDay(subDays(new Date(), 29)), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"this-month\",\n    label: datePickerEn.presets.thisMonth,\n    getValue: () => ({ from: startOfMonth(new Date()), to: startOfDay(new Date()) })\n  },\n  {\n    id: \"last-month\",\n    label: datePickerEn.presets.lastMonth,\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;AAEtF,SAAS,oBAAoB;AAWtB,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;AA8BO,MAAM,6BAA+C;AAAA,EAC1D,OAAO,aAAa;AAAA,EACpB,YAAY,aAAa;AAAA,EACzB,cAAc,aAAa;AAC7B;AAyBO,MAAM,uBAAqC;AAAA,EAChD,EAAE,IAAI,SAAS,OAAO,aAAa,QAAQ,OAAO,UAAU,MAAM,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EACzF,EAAE,IAAI,aAAa,OAAO,aAAa,QAAQ,WAAW,UAAU,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,CAAC,CAAC,EAAE;AAAA,EAC7G,EAAE,IAAI,YAAY,OAAO,aAAa,QAAQ,SAAS,UAAU,MAAM,WAAW,QAAQ,oBAAI,KAAK,GAAG,CAAC,CAAC,EAAE;AAC5G;AAOO,MAAM,6BAAgD;AAAA,EAC3D;AAAA,IACE,IAAI;AAAA,IACJ,OAAO,aAAa,QAAQ;AAAA,IAC5B,UAAU,OAAO,EAAE,MAAM,WAAW,oBAAI,KAAK,CAAC,GAAG,IAAI,WAAW,oBAAI,KAAK,CAAC,EAAE;AAAA,EAC9E;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,OAAO,aAAa,QAAQ;AAAA,IAC5B,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,QAAQ;AAAA,IAC5B,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,QAAQ;AAAA,IAC5B,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,QAAQ;AAAA,IAC5B,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

@@ -14,14 +14,17 @@ interface DatePickerProps {
     maxDate?: Date;
     /** Hiện nút xoá khi đã có giá trị (mặc định true) */
     clearable?: boolean;
-    /** Cột preset bên trái lịch (mặc định ẩn) */
+    /**
+     * Cột preset bên trái lịch (mặc định ẩn). `DEFAULT_DATE_PRESETS` hiện nhãn theo
+     * `ComitorLocaleProvider`; preset app tự dựng hiện nguyên `label`.
+     */
     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()`.
+     * Ngôn ngữ của date-fns — quyết định tên thứ/tháng trong lịch VÀ thứ tự ngày/tháng của ô nhập
+     * (gõ, hiển thị lẫn placeholder), 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 đỏ.
+     * Không truyền thì theo `ComitorLocaleProvider` (`vi` → `dd/MM/yyyy`, còn lại `enUS` →
+     * `MM/dd/yyyy`). Trước `3.0.0` mặc định cứng là `vi`, nên app tiếng Anh phải nhớ truyền.
      */
     locale?: Locale;
     /**
@@ -29,6 +32,7 @@ interface DatePickerProps {
      * 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;
+    /** Đè nhãn `sr-only` — không truyền thì theo namespace `datePicker` của `ComitorLocaleProvider` */
     labels?: Partial<DatePickerLabels>;
     className?: string;
     id?: string;
@@ -39,30 +43,35 @@ interface DatePickerProps {
     "aria-required"?: true;
 }
 /**
- * Ô chọn ngày: gõ tay `dd/MM/yyyy` HOẶC bấm lịch.
+ * Ô chọn ngày: gõ tay theo định dạng của `locale` (`dd/MM/yyyy`, `MM/dd/yyyy`…) HOẶC bấm lịch.
  *
  * 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,
  * 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
  * 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, locale, dateFormat, labels, className, id, name, ...aria }: DatePickerProps): React.JSX.Element;
+declare function DatePicker({ value, onValueChange, placeholder, disabled, minDate, maxDate, clearable, presets, locale: localeProp, dateFormat, labels, className, id, name, ...aria }: DatePickerProps): React.JSX.Element;
 interface DateRangePickerProps {
     value?: DateRange | null;
     onValueChange: (value: DateRange | null) => void;
+    /** Chữ khi chưa chọn — không truyền thì theo khoá `rangePlaceholder` của namespace `datePicker` */
     placeholder?: string;
     disabled?: boolean;
     minDate?: Date;
     maxDate?: Date;
     clearable?: boolean;
-    /** Cột preset bên trái (mặc định DEFAULT_DATE_RANGE_PRESETS; `false` để tắt) */
+    /**
+     * Cột preset bên trái (mặc định `DEFAULT_DATE_RANGE_PRESETS`, nhãn theo `ComitorLocaleProvider`;
+     * `false` để tắt). Preset app tự dựng hiện nguyên `label`.
+     */
     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`. */
+    /** Ngôn ngữ date-fns (mặc định theo `ComitorLocaleProvider`) — xem `DatePickerProps.locale`. */
     locale?: Locale;
     /** Ghi đè định dạng ngày; bỏ trống thì suy từ `locale`. */
     dateFormat?: string;
+    /** Đè nhãn `sr-only` — không truyền thì theo namespace `datePicker` của `ComitorLocaleProvider` */
     labels?: Partial<DatePickerLabels>;
     className?: string;
     id?: string;
@@ -76,6 +85,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, locale, dateFormat, labels, className, id, ...aria }: DateRangePickerProps): React.JSX.Element;
+declare function DateRangePicker({ value, onValueChange, placeholder: placeholderProp, disabled, minDate, maxDate, clearable, presets, numberOfMonths, locale: localeProp, dateFormat, labels, className, id, ...aria }: DateRangePickerProps): React.JSX.Element;
 
 export { DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps };