@comitor/ui 3.0.1 → 3.2.0

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

@@ -1,11 +1,18 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
-import { useComitorLabels } from "../../i18n/locale-provider.js";
+import { useComitorLabels, useComitorLocale } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import { Button } from "../ui/button.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
 import { DEFAULT_PAGE_SIZE_OPTIONS } from "./table-pagination-constants.js";
+function formatNumber(value, locale) {
+  try {
+    return value.toLocaleString(locale);
+  } catch {
+    return String(value);
+  }
+}
 function TablePagination({
   page,
   pageSize,
@@ -20,6 +27,7 @@ function TablePagination({
   className
 }) {
   const labels = useComitorLabels("tablePagination", labelsProp);
+  const { locale } = useComitorLocale();
   const unitLabel = unitLabelProp ?? labels.unitLabel;
   const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
   const current = Math.min(Math.max(1, page), pageCount);
@@ -39,7 +47,7 @@ function TablePagination({
             /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: labels.pageSizePrefix }),
             /* @__PURE__ */ jsxs(Select, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [
               /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[4.5rem]", "aria-label": labels.pageSizeSelect(unitLabel), children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: formatNumber(size, locale) }, size)) })
             ] })
           ] }),
           /* @__PURE__ */ jsx("span", { role: "status", className: "tabular-nums", children: labels.range(start, end, total, unitLabel) })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/table-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\";\nimport { useComitorLabels } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../ui/select.js\";\nimport { DEFAULT_PAGE_SIZE_OPTIONS, type TablePaginationLabels } from \"./table-pagination-constants.js\";\n\nexport interface TablePaginationProps {\n  /** Trang hiện tại, đếm từ 1 */\n  page: number;\n  pageSize: number;\n  /** Tổng số bản ghi (sau khi lọc) */\n  total: number;\n  pageSizeOptions?: readonly number[];\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (pageSize: number) => void;\n  /** Đơn vị đếm theo nội dung bảng, vd \"tasks\", \"contacts\" — mặc định `labels.unitLabel` (\"items\") */\n  unitLabel?: string;\n  /** Ẩn ô chọn số dòng/trang (khi cỡ trang do hệ thống quyết định) */\n  hidePageSize?: boolean;\n  /** Nhãn vùng phân trang — cần khi một trang có nhiều bảng; mặc định `labels.region` */\n  label?: string;\n  /**\n   * Ghi đè chuỗi hiển thị/a11y — không truyền thì theo namespace `tablePagination` của\n   * `ComitorLocaleProvider` (mặc định tiếng Anh). Xem `TablePaginationLabels`.\n   */\n  labels?: Partial<TablePaginationLabels>;\n  className?: string;\n}\n\n/**\n * Thanh phân trang đi kèm `DataTable`.\n *\n * Tổng số trang tính từ `total`/`pageSize` ngay tại đây thay vì bắt app truyền vào — hai bên\n * tự tính rất dễ lệch nhau một trang ở bản ghi cuối, và người dùng sẽ thấy nút sang trang sau\n * còn bấm được trong khi bảng đã hết dữ liệu.\n */\nexport function TablePagination({\n  page,\n  pageSize,\n  total,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  onPageChange,\n  onPageSizeChange,\n  unitLabel: unitLabelProp,\n  hidePageSize = false,\n  label,\n  labels: labelsProp,\n  className\n}: TablePaginationProps) {\n  const labels = useComitorLabels(\"tablePagination\", labelsProp);\n  const unitLabel = unitLabelProp ?? labels.unitLabel;\n  const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));\n  const current = Math.min(Math.max(1, page), pageCount);\n  const start = total === 0 ? 0 : (current - 1) * pageSize + 1;\n  const end = Math.min(current * pageSize, total);\n  const isFirst = current <= 1;\n  const isLast = current >= pageCount;\n\n  return (\n    <nav\n      aria-label={label ?? labels.region}\n      data-slot=\"table-pagination\"\n      className={cn(\"flex flex-wrap items-center justify-between gap-3 py-2 text-sm\", className)}\n    >\n      <div className=\"flex items-center gap-2 text-muted-foreground\">\n        {!hidePageSize && (\n          <>\n            <span className=\"hidden sm:inline\">{labels.pageSizePrefix}</span>\n            <Select value={String(pageSize)} onValueChange={(value) => onPageSizeChange(Number(value))}>\n              <SelectTrigger className=\"h-8 w-[4.5rem]\" aria-label={labels.pageSizeSelect(unitLabel)}>\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((size) => (\n                  <SelectItem key={size} value={String(size)}>\n                    {size}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </>\n        )}\n        <span role=\"status\" className=\"tabular-nums\">\n          {labels.range(start, end, total, unitLabel)}\n        </span>\n      </div>\n\n      <div className=\"flex items-center gap-1\">\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          disabled={isFirst}\n          onClick={() => onPageChange(1)}\n          className=\"hidden sm:inline-flex\"\n        >\n          <ChevronsLeft aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">{labels.firstPage}</span>\n        </Button>\n        <Button variant=\"outline\" size=\"icon-sm\" disabled={isFirst} onClick={() => onPageChange(current - 1)}>\n          <ChevronLeft aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">{labels.previousPage}</span>\n        </Button>\n\n        <span role=\"status\" className=\"px-2 tabular-nums text-muted-foreground\">\n          {labels.pageStatus(current, pageCount)}\n        </span>\n\n        <Button variant=\"outline\" size=\"icon-sm\" disabled={isLast} onClick={() => onPageChange(current + 1)}>\n          <ChevronRight aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">{labels.nextPage}</span>\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          disabled={isLast}\n          onClick={() => onPageChange(pageCount)}\n          className=\"hidden sm:inline-flex\"\n        >\n          <ChevronsRight aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">{labels.lastPage}</span>\n        </Button>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/composite/table-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\";\nimport { useComitorLabels, useComitorLocale } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../ui/select.js\";\nimport { DEFAULT_PAGE_SIZE_OPTIONS, type TablePaginationLabels } from \"./table-pagination-constants.js\";\n\n/**\n * Số theo `locale` của `ComitorLocaleProvider` — cho số in NGOÀI bảng chữ (các mức cỡ trang: `1,000` /\n * `1.000`). Mã locale hỏng (`\"vi_VN\"`, `\"\"`) làm `Intl` ném `RangeError`; `ComitorLocaleProvider` cố ý\n * nhận mã hỏng mà không ném (xem `getComitorLanguage`), nên ở đây rơi về số thô thay vì làm trắng cả\n * trang danh sách.\n */\nfunction formatNumber(value: number, locale: string): string {\n  try {\n    return value.toLocaleString(locale);\n  } catch {\n    return String(value);\n  }\n}\n\nexport interface TablePaginationProps {\n  /** Trang hiện tại, đếm từ 1 */\n  page: number;\n  pageSize: number;\n  /** Tổng số bản ghi (sau khi lọc) */\n  total: number;\n  pageSizeOptions?: readonly number[];\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (pageSize: number) => void;\n  /** Đơn vị đếm theo nội dung bảng, vd \"tasks\", \"contacts\" — mặc định `labels.unitLabel` (\"items\") */\n  unitLabel?: string;\n  /** Ẩn ô chọn số dòng/trang (khi cỡ trang do hệ thống quyết định) */\n  hidePageSize?: boolean;\n  /** Nhãn vùng phân trang — cần khi một trang có nhiều bảng; mặc định `labels.region` */\n  label?: string;\n  /**\n   * Ghi đè chuỗi hiển thị/a11y — không truyền thì theo namespace `tablePagination` của\n   * `ComitorLocaleProvider` (mặc định tiếng Anh). Xem `TablePaginationLabels`.\n   */\n  labels?: Partial<TablePaginationLabels>;\n  className?: string;\n}\n\n/**\n * Thanh phân trang đi kèm `DataTable`.\n *\n * Tổng số trang tính từ `total`/`pageSize` ngay tại đây thay vì bắt app truyền vào — hai bên\n * tự tính rất dễ lệch nhau một trang ở bản ghi cuối, và người dùng sẽ thấy nút sang trang sau\n * còn bấm được trong khi bảng đã hết dữ liệu.\n */\nexport function TablePagination({\n  page,\n  pageSize,\n  total,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  onPageChange,\n  onPageSizeChange,\n  unitLabel: unitLabelProp,\n  hidePageSize = false,\n  label,\n  labels: labelsProp,\n  className\n}: TablePaginationProps) {\n  const labels = useComitorLabels(\"tablePagination\", labelsProp);\n  const { locale } = useComitorLocale();\n  const unitLabel = unitLabelProp ?? labels.unitLabel;\n  const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));\n  const current = Math.min(Math.max(1, page), pageCount);\n  const start = total === 0 ? 0 : (current - 1) * pageSize + 1;\n  const end = Math.min(current * pageSize, total);\n  const isFirst = current <= 1;\n  const isLast = current >= pageCount;\n\n  return (\n    <nav\n      aria-label={label ?? labels.region}\n      data-slot=\"table-pagination\"\n      className={cn(\"flex flex-wrap items-center justify-between gap-3 py-2 text-sm\", className)}\n    >\n      <div className=\"flex items-center gap-2 text-muted-foreground\">\n        {!hidePageSize && (\n          <>\n            <span className=\"hidden sm:inline\">{labels.pageSizePrefix}</span>\n            <Select value={String(pageSize)} onValueChange={(value) => onPageSizeChange(Number(value))}>\n              <SelectTrigger className=\"h-8 w-[4.5rem]\" aria-label={labels.pageSizeSelect(unitLabel)}>\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {/* Giá trị giữ số thô (máy đọc); chữ hiện ra — kể cả ở `SelectValue` — theo locale. */}\n                {pageSizeOptions.map((size) => (\n                  <SelectItem key={size} value={String(size)}>\n                    {formatNumber(size, locale)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </>\n        )}\n        <span role=\"status\" className=\"tabular-nums\">\n          {labels.range(start, end, total, unitLabel)}\n        </span>\n      </div>\n\n      <div className=\"flex items-center gap-1\">\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          disabled={isFirst}\n          onClick={() => onPageChange(1)}\n          className=\"hidden sm:inline-flex\"\n        >\n          <ChevronsLeft aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">{labels.firstPage}</span>\n        </Button>\n        <Button variant=\"outline\" size=\"icon-sm\" disabled={isFirst} onClick={() => onPageChange(current - 1)}>\n          <ChevronLeft aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">{labels.previousPage}</span>\n        </Button>\n\n        <span role=\"status\" className=\"px-2 tabular-nums text-muted-foreground\">\n          {labels.pageStatus(current, pageCount)}\n        </span>\n\n        <Button variant=\"outline\" size=\"icon-sm\" disabled={isLast} onClick={() => onPageChange(current + 1)}>\n          <ChevronRight aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">{labels.nextPage}</span>\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          disabled={isLast}\n          onClick={() => onPageChange(pageCount)}\n          className=\"hidden sm:inline-flex\"\n        >\n          <ChevronsRight aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">{labels.lastPage}</span>\n        </Button>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/composite/text-utils.d.ts

@@ -1,31 +1,12 @@
+export { matchesSearch, normalizeVi, removeVietnameseTones } from '../../lib/text-search.js';
+
 /**
  * Tiện ích chuỗi dùng chung cho tầng composite (không phụ thuộc React → dùng được cả 2 phía).
  *
  * Vì sao không nhét vào `lib/cn.ts`: những hàm này phục vụ riêng composite (tìm kiếm không dấu,
  * initials avatar). Tách file để `cn()` giữ đúng một việc.
  */
-/**
- * Bỏ dấu tiếng Việt để so khớp tìm kiếm ("Nguyễn" ⇄ "nguyen").
- *
- * Dùng NFD tách dấu thành ký tự tổ hợp rồi loại dải U+0300–U+036F. `đ/Đ` KHÔNG phải chữ có dấu
- * tổ hợp (là ký tự riêng trong Unicode) nên phải thay tay — thiếu bước này thì gõ "duc" sẽ không
- * ra "Đức".
- */
-declare function removeVietnameseTones(input: string): string;
-/**
- * Chuẩn hoá chuỗi để so khớp: bỏ dấu + hạ chữ thường + `trim`.
- *
- * Đây là phép chuẩn hoá DUY NHẤT của cả gói (tầng shell cũng gọi lại hàm này, không giữ bản
- * riêng) — mỗi nơi tự chuẩn hoá một kiểu là cùng một từ khoá ra hai kết quả tìm kiếm khác nhau.
- * `removeVietnameseTones` ở trên là bậc thấp hơn, chỉ bỏ dấu, dùng khi cần giữ nguyên hoa/thường
- * (vd sinh slug).
- */
-declare function normalizeVi(value: string): string;
-/**
- * So khớp không dấu, không phân biệt hoa thường: `needle` có nằm trong `haystack` không.
- * Cả hai vế đi qua `normalizeVi` — cùng một luật với ô tìm kiếm của shell.
- */
-declare function matchesSearch(haystack: string, needle: string): boolean;
+
 /**
  * Initials kiểu Việt Nam: chữ đầu của HỌ + chữ đầu của TÊN ("Nguyễn Đức Thành" → "NT").
  *
@@ -36,4 +17,4 @@ declare function getVietnameseInitials(name: string): string;
 /** Cắt chuỗi kèm dấu "…" — dùng cho tên workspace/task dài trong chip, tooltip. */
 declare function truncate(input: string, maxLength: number): string;
 
-export { getVietnameseInitials, matchesSearch, normalizeVi, removeVietnameseTones, truncate };
+export { getVietnameseInitials, truncate };

package/dist/components/composite/text-utils.js

@@ -1,14 +1,4 @@
-function removeVietnameseTones(input) {
-  return input.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "D");
-}
-function normalizeVi(value) {
-  return removeVietnameseTones(value).toLowerCase().trim();
-}
-function matchesSearch(haystack, needle) {
-  const query = normalizeVi(needle);
-  if (!query) return true;
-  return normalizeVi(haystack).includes(query);
-}
+import { matchesSearch, normalizeVi, removeVietnameseTones } from "../../lib/text-search.js";
 function getVietnameseInitials(name) {
   const parts = name.trim().split(/\s+/).filter(Boolean);
   if (parts.length === 0) return "?";

package/dist/components/composite/text-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/text-utils.ts"],"sourcesContent":["/**\n * Tiện ích chuỗi dùng chung cho tầng composite (không phụ thuộc React → dùng được cả 2 phía).\n *\n * Vì sao không nhét vào `lib/cn.ts`: những hàm này phục vụ riêng composite (tìm kiếm không dấu,\n * initials avatar). Tách file để `cn()` giữ đúng một việc.\n */\n\n/**\n * Bỏ dấu tiếng Việt để so khớp tìm kiếm (\"Nguyễn\" ⇄ \"nguyen\").\n *\n * Dùng NFD tách dấu thành ký tự tổ hợp rồi loại dải U+0300–U+036F. `đ/Đ` KHÔNG phải chữ có dấu\n * tổ hợp (là ký tự riêng trong Unicode) nên phải thay tay — thiếu bước này thì gõ \"duc\" sẽ không\n * ra \"Đức\".\n */\nexport function removeVietnameseTones(input: string): string {\n  return input\n    .normalize(\"NFD\")\n    .replace(/[\\u0300-\\u036f]/g, \"\")\n    .replace(/đ/g, \"d\")\n    .replace(/Đ/g, \"D\");\n}\n\n/**\n * Chuẩn hoá chuỗi để so khớp: bỏ dấu + hạ chữ thường + `trim`.\n *\n * Đây là phép chuẩn hoá DUY NHẤT của cả gói (tầng shell cũng gọi lại hàm này, không giữ bản\n * riêng) — mỗi nơi tự chuẩn hoá một kiểu là cùng một từ khoá ra hai kết quả tìm kiếm khác nhau.\n * `removeVietnameseTones` ở trên là bậc thấp hơn, chỉ bỏ dấu, dùng khi cần giữ nguyên hoa/thường\n * (vd sinh slug).\n */\nexport function normalizeVi(value: string): string {\n  return removeVietnameseTones(value).toLowerCase().trim();\n}\n\n/**\n * So khớp không dấu, không phân biệt hoa thường: `needle` có nằm trong `haystack` không.\n * Cả hai vế đi qua `normalizeVi` — cùng một luật với ô tìm kiếm của shell.\n */\nexport function matchesSearch(haystack: string, needle: string): boolean {\n  const query = normalizeVi(needle);\n  if (!query) return true;\n  return normalizeVi(haystack).includes(query);\n}\n\n/**\n * Initials kiểu Việt Nam: chữ đầu của HỌ + chữ đầu của TÊN (\"Nguyễn Đức Thành\" → \"NT\").\n *\n * Người Việt gọi nhau bằng TÊN (từ cuối), nên lấy 2 từ đầu như phương Tây (\"NĐ\") là sai thói quen.\n * Tên một từ → lấy 1 ký tự. Chuỗi rỗng → \"?\" (tránh ô avatar trống trơn).\n */\nexport function getVietnameseInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"?\";\n\n  const first = parts[0] ?? \"\";\n  const last = parts[parts.length - 1] ?? \"\";\n  const initials = parts.length === 1 ? first.slice(0, 1) : `${first.slice(0, 1)}${last.slice(0, 1)}`;\n\n  return initials.toLocaleUpperCase(\"vi-VN\");\n}\n\n/** Cắt chuỗi kèm dấu \"…\" — dùng cho tên workspace/task dài trong chip, tooltip. */\nexport function truncate(input: string, maxLength: number): string {\n  if (input.length <= maxLength) return input;\n  return `${input.slice(0, Math.max(0, maxLength - 1)).trimEnd()}…`;\n}\n"],"mappings":"AAcO,SAAS,sBAAsB,OAAuB;AAC3D,SAAO,MACJ,UAAU,KAAK,EACf,QAAQ,oBAAoB,EAAE,EAC9B,QAAQ,MAAM,GAAG,EACjB,QAAQ,MAAM,GAAG;AACtB;AAUO,SAAS,YAAY,OAAuB;AACjD,SAAO,sBAAsB,KAAK,EAAE,YAAY,EAAE,KAAK;AACzD;AAMO,SAAS,cAAc,UAAkB,QAAyB;AACvE,QAAM,QAAQ,YAAY,MAAM;AAChC,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,YAAY,QAAQ,EAAE,SAAS,KAAK;AAC7C;AAQO,SAAS,sBAAsB,MAAsB;AAC1D,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,QAAQ,MAAM,CAAC,KAAK;AAC1B,QAAM,OAAO,MAAM,MAAM,SAAS,CAAC,KAAK;AACxC,QAAM,WAAW,MAAM,WAAW,IAAI,MAAM,MAAM,GAAG,CAAC,IAAI,GAAG,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,KAAK,MAAM,GAAG,CAAC,CAAC;AAEjG,SAAO,SAAS,kBAAkB,OAAO;AAC3C;AAGO,SAAS,SAAS,OAAe,WAA2B;AACjE,MAAI,MAAM,UAAU,UAAW,QAAO;AACtC,SAAO,GAAG,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC;AAChE;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/text-utils.ts"],"sourcesContent":["/**\n * Tiện ích chuỗi dùng chung cho tầng composite (không phụ thuộc React → dùng được cả 2 phía).\n *\n * Vì sao không nhét vào `lib/cn.ts`: những hàm này phục vụ riêng composite (tìm kiếm không dấu,\n * initials avatar). Tách file để `cn()` giữ đúng một việc.\n */\n\n// ⚠ Từ `3.1.0` ba hàm tìm kiếm không dấu sống ở `lib/text-search.ts` (Tier 1 cũng dùng chúng); file\n// này xuất lại NGUYÊN tên và chữ ký — với app không có gì đổi.\nexport { matchesSearch, normalizeVi, removeVietnameseTones } from \"../../lib/text-search.js\";\n\n/**\n * Initials kiểu Việt Nam: chữ đầu của HỌ + chữ đầu của TÊN (\"Nguyễn Đức Thành\" → \"NT\").\n *\n * Người Việt gọi nhau bằng TÊN (từ cuối), nên lấy 2 từ đầu như phương Tây (\"NĐ\") là sai thói quen.\n * Tên một từ → lấy 1 ký tự. Chuỗi rỗng → \"?\" (tránh ô avatar trống trơn).\n */\nexport function getVietnameseInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"?\";\n\n  const first = parts[0] ?? \"\";\n  const last = parts[parts.length - 1] ?? \"\";\n  const initials = parts.length === 1 ? first.slice(0, 1) : `${first.slice(0, 1)}${last.slice(0, 1)}`;\n\n  return initials.toLocaleUpperCase(\"vi-VN\");\n}\n\n/** Cắt chuỗi kèm dấu \"…\" — dùng cho tên workspace/task dài trong chip, tooltip. */\nexport function truncate(input: string, maxLength: number): string {\n  if (input.length <= maxLength) return input;\n  return `${input.slice(0, Math.max(0, maxLength - 1)).trimEnd()}…`;\n}\n"],"mappings":"AASA,SAAS,eAAe,aAAa,6BAA6B;AAQ3D,SAAS,sBAAsB,MAAsB;AAC1D,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,QAAQ,MAAM,CAAC,KAAK;AAC1B,QAAM,OAAO,MAAM,MAAM,SAAS,CAAC,KAAK;AACxC,QAAM,WAAW,MAAM,WAAW,IAAI,MAAM,MAAM,GAAG,CAAC,IAAI,GAAG,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,KAAK,MAAM,GAAG,CAAC,CAAC;AAEjG,SAAO,SAAS,kBAAkB,OAAO;AAC3C;AAGO,SAAS,SAAS,OAAe,WAA2B;AACjE,MAAI,MAAM,UAAU,UAAW,QAAO;AACtC,SAAO,GAAG,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC;AAChE;","names":[]}

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

@@ -53,6 +53,14 @@ declare const bannerVariants: (props?: ({
 interface BannerProps extends DivProps, VariantProps<typeof bannerVariants> {
     open?: boolean;
     defaultOpen?: boolean;
+    /**
+     * Báo `false` khi banner đóng THẬT: `BannerClose`; trong `Banners` thêm hết `duration` hay hàng đợi
+     * gỡ nó. Không báo khi render lại, khi unmount, hay khi chính app đặt `open={false}`.
+     *
+     * Focus: nếu lúc banner rời DOM focus còn ở trong nó, gói trả focus về phần tử giữ focus ngay trước
+     * khi vào banner. Muốn đưa focus nơi khác (vd tiêu đề trang) thì làm ngay ở đây — app luôn thắng.
+     * Không có phần tử ấy (hoặc nó đã bị gỡ) thì gói không đoán, focus rơi về `<body>`.
+     */
     onOpenChange?: (open: boolean) => void;
     onDismiss?: () => void;
     priority?: number;

package/dist/components/ui/banner.js

@@ -51,6 +51,28 @@ function useBanner() {
     };
   }, [id, variant, dismissible, onClose, storeContext]);
 }
+function insertByPriority(banners, banner) {
+  const priority = banner.priority ?? DEFAULT_BANNER_PRIORITY;
+  const insertIndex = banners.findIndex((b) => (b.priority ?? DEFAULT_BANNER_PRIORITY) < priority);
+  if (insertIndex === -1) {
+    banners.push(banner);
+  } else {
+    banners.splice(insertIndex, 0, banner);
+  }
+}
+function scheduleAutoClose(timeouts, id, duration, onElapsed) {
+  const pendingTimeoutId = timeouts.get(id);
+  if (pendingTimeoutId !== void 0) {
+    clearTimeout(pendingTimeoutId);
+    timeouts.delete(id);
+  }
+  if (!duration || duration <= 0) return;
+  const timeoutId = setTimeout(() => {
+    onElapsed();
+    timeouts.delete(id);
+  }, duration);
+  timeouts.set(id, timeoutId);
+}
 function Banners(props) {
   const { children, maxVisible = 1, side = "top", strategy = "fixed", container: containerProp } = props;
   const instanceId = React.useId();
@@ -78,25 +100,34 @@ function Banners(props) {
         idCounterRef.current += 1;
         const id = `${instanceId}-${idCounterRef.current}`;
         const newBanner = { ...banner, id };
-        const priority = banner.priority ?? DEFAULT_BANNER_PRIORITY;
         const banners2 = [...stateRef.current.banners];
-        const insertIndex = banners2.findIndex((b) => (b.priority ?? DEFAULT_BANNER_PRIORITY) < priority);
-        if (insertIndex === -1) {
-          banners2.push(newBanner);
-        } else {
-          banners2.splice(insertIndex, 0, newBanner);
-        }
+        insertByPriority(banners2, newBanner);
         stateRef.current.banners = banners2;
         store.notify();
-        if (banner.duration && banner.duration > 0) {
-          const timeoutId = setTimeout(() => {
-            store.onRemovingChange(id, true);
-            timeoutsRef.current.delete(id);
-          }, banner.duration);
-          timeoutsRef.current.set(id, timeoutId);
-        }
+        scheduleAutoClose(timeoutsRef.current, id, banner.duration, () => store.onRemovingChange(id, true));
         return id;
       },
+      onBannerUpdate: (id, patch) => {
+        const banners2 = stateRef.current.banners;
+        const index = banners2.findIndex((b) => b.id === id);
+        const current = banners2[index];
+        if (!current) return;
+        const keys = Object.keys(patch);
+        if (keys.every((key) => Object.is(current[key], patch[key]))) return;
+        const next = { ...current, ...patch };
+        const nextBanners = [...banners2];
+        if (Object.is(next.priority ?? DEFAULT_BANNER_PRIORITY, current.priority ?? DEFAULT_BANNER_PRIORITY)) {
+          nextBanners[index] = next;
+        } else {
+          nextBanners.splice(index, 1);
+          insertByPriority(nextBanners, next);
+        }
+        stateRef.current.banners = nextBanners;
+        if (!Object.is(next.duration, current.duration) && !stateRef.current.removing.has(id)) {
+          scheduleAutoClose(timeoutsRef.current, id, next.duration, () => store.onRemovingChange(id, true));
+        }
+        store.notify();
+      },
       onBannerRemove: (id) => {
         const banner = stateRef.current.banners.find((b) => b.id === id);
         if (!banner) return;
@@ -232,6 +263,49 @@ const bannerVariants = cva(
     }
   }
 );
+function useFocusReturn(active, onFocusProp, onBlurProp) {
+  const returnFocusRef = React.useRef(null);
+  const focusInsideRef = React.useRef(false);
+  const onFocus = React.useCallback(
+    (event) => {
+      onFocusProp?.(event);
+      const from = event.relatedTarget;
+      if (!focusInsideRef.current && from instanceof HTMLElement && !event.currentTarget.contains(from)) {
+        returnFocusRef.current = from;
+      }
+      focusInsideRef.current = true;
+    },
+    [onFocusProp]
+  );
+  const onBlur = React.useCallback(
+    (event) => {
+      onBlurProp?.(event);
+      const to = event.relatedTarget;
+      if (!(to instanceof Node) || !event.currentTarget.contains(to)) {
+        focusInsideRef.current = false;
+      }
+    },
+    [onBlurProp]
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (!active) return;
+    return () => {
+      const returnTarget = returnFocusRef.current;
+      const hadFocus = focusInsideRef.current;
+      returnFocusRef.current = null;
+      focusInsideRef.current = false;
+      if (!hadFocus || !returnTarget) return;
+      queueMicrotask(() => {
+        const ownerDocument = returnTarget.ownerDocument;
+        const activeElement = ownerDocument.activeElement;
+        if (activeElement && activeElement !== ownerDocument.body && activeElement.isConnected) return;
+        if (!returnTarget.isConnected) return;
+        returnTarget.focus({ preventScroll: true });
+      });
+    };
+  }, [active]);
+  return { onFocus, onBlur };
+}
 function BannerImpl(props) {
   const { banner, side, index } = props;
   const store = useStoreContext("BannerImpl");
@@ -257,9 +331,15 @@ function BannerImpl(props) {
     return () => cancelAnimationFrame(frame);
   }, []);
   useIsomorphicLayoutEffect(() => {
-    if (!bannerRef.current || removing) return;
-    const height = bannerRef.current.getBoundingClientRect().height;
-    store.onHeightChange(banner.id, height);
+    const node = bannerRef.current;
+    if (!node || removing) return;
+    store.onHeightChange(banner.id, node.getBoundingClientRect().height);
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      store.onHeightChange(banner.id, node.getBoundingClientRect().height);
+    });
+    observer.observe(node);
+    return () => observer.disconnect();
   }, [store, banner.id, removing]);
   React.useEffect(() => {
     if (!removing) return;
@@ -269,6 +349,7 @@ function BannerImpl(props) {
   }, [removing, store, banner.id]);
   const onClose = React.useCallback(() => store.onRemovingChange(banner.id, true), [store, banner.id]);
   const onRemove = React.useCallback(() => store.onBannerRemove(banner.id), [store, banner.id]);
+  const { onFocus, onBlur } = useFocusReturn(true);
   const dismissible = banner.dismissible ?? DEFAULT_BANNER_DISMISSIBLE;
   const contextValue = React.useMemo(
     () => ({ id: banner.id, variant: banner.variant, dismissible, onClose }),
@@ -319,10 +400,36 @@ function BannerImpl(props) {
         // Thời lượng qua `--banner-duration` (0 khi giảm chuyển động) — xem chú thích ở `Banners`.
         transition: `transform var(--banner-duration, ${BANNER_ANIMATION_DURATION}ms) cubic-bezier(0.32, 0.72, 0, 1), opacity var(--banner-duration, ${opacityDuration}ms) ease`
       },
+      onFocus,
+      onBlur,
       children: typeof banner.content === "function" ? banner.content(renderProps) : banner.content
     }
   ) });
 }
+function createChildrenSource(initialChildren) {
+  let children = initialChildren;
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => children,
+    set: (nextChildren) => {
+      if (Object.is(children, nextChildren)) return;
+      children = nextChildren;
+      for (const listener of listeners) {
+        listener();
+      }
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+function DeclaredBannerChildren(props) {
+  const { source } = props;
+  return React.useSyncExternalStore(source.subscribe, source.get, source.get);
+}
 function Banner(props) {
   const {
     className,
@@ -336,6 +443,8 @@ function Banner(props) {
     dismissible = DEFAULT_BANNER_DISMISSIBLE,
     children,
     asChild,
+    onFocus: onFocusProp,
+    onBlur: onBlurProp,
     ...rootProps
   } = props;
   const store = React.useContext(StoreContext);
@@ -346,6 +455,9 @@ function Banner(props) {
   const bannerIdRef = React.useRef(null);
   const onDismissRef = useAsRef(onDismiss);
   const onOpenChangeRef = useAsRef(onOpenChange);
+  const isControlledRef = useAsRef(isControlled);
+  const queuedDataRef = useAsRef({ variant: variant ?? void 0, priority, dismissible, duration });
+  const childrenSourceRef = useLazyRef(() => createChildrenSource(children));
   if (isControlled) {
     openRef.current = openProp;
   }
@@ -358,18 +470,23 @@ function Banner(props) {
   );
   const getSnapshot = React.useCallback(() => openRef.current, [openRef]);
   const open = React.useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  useIsomorphicLayoutEffect(() => {
+    childrenSourceRef.current.set(children);
+  });
+  useIsomorphicLayoutEffect(() => {
+    const id = bannerIdRef.current;
+    if (!store || id === null) return;
+    store.onBannerUpdate(id, { variant: variant ?? void 0, priority, dismissible, duration });
+  }, [store, variant, priority, dismissible, duration]);
   React.useEffect(() => {
-    if (!isInsideStore || !store || !open) return;
+    if (!store || !open) return;
     let isCleaningUp = false;
     const id = store.onBannerAdd({
-      content: children,
-      variant: variant ?? void 0,
-      priority,
-      dismissible,
-      duration,
+      ...queuedDataRef.current,
+      content: /* @__PURE__ */ jsx(DeclaredBannerChildren, { source: childrenSourceRef.current }),
       onDismiss: () => {
         if (isCleaningUp) return;
-        if (!isControlled) {
+        if (!isControlledRef.current) {
           openRef.current = false;
           for (const listener of listenersRef.current) {
             listener();
@@ -382,21 +499,15 @@ function Banner(props) {
     bannerIdRef.current = id;
     return () => {
       isCleaningUp = true;
-      if (bannerIdRef.current) {
-        store.onBannerRemove(bannerIdRef.current);
-        bannerIdRef.current = null;
-      }
+      bannerIdRef.current = null;
+      store.onBannerRemove(id);
     };
   }, [
-    isInsideStore,
     store,
     open,
-    isControlled,
-    children,
-    variant,
-    priority,
-    dismissible,
-    duration,
+    queuedDataRef,
+    childrenSourceRef,
+    isControlledRef,
     openRef,
     listenersRef,
     onDismissRef,
@@ -411,6 +522,7 @@ function Banner(props) {
     }
     onOpenChangeRef.current?.(false);
   }, [isControlled, openRef, listenersRef, onOpenChangeRef]);
+  const { onFocus, onBlur } = useFocusReturn(open && !isInsideStore, onFocusProp, onBlurProp);
   const contextValue = React.useMemo(
     () => ({
       variant,
@@ -430,6 +542,8 @@ function Banner(props) {
       "data-state": "open",
       className: cn(bannerVariants({ variant, className })),
       ...rootProps,
+      onFocus,
+      onBlur,
       children
     }
   ) });