@comitor/ui 3.0.1 → 3.1.0

package/dist/components/composite/confirm-dialog.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import {
@@ -38,6 +38,7 @@ function ConfirmDialog({
   const pendingLabel = pendingLabelProp ?? t.pendingLabel;
   const [internalOpen, setInternalOpen] = useState(false);
   const [pending, setPending] = useState(false);
+  const returnFocusRef = useRef(null);
   const isOpen = open ?? internalOpen;
   const setOpen = (next) => {
     if (pending && !next) return;
@@ -59,41 +60,61 @@ function ConfirmDialog({
   };
   return /* @__PURE__ */ jsxs(AlertDialog, { open: isOpen, onOpenChange: setOpen, children: [
     trigger && /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsxs(AlertDialogContent, { className, children: [
-      /* @__PURE__ */ jsx(AlertDialogHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        Icon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            "aria-hidden": "true",
-            className: cn(
-              "flex size-9 shrink-0 items-center justify-center rounded-md",
-              variant === "destructive" ? "bg-destructive/15 text-destructive-ink" : "bg-muted text-muted-foreground"
+    /* @__PURE__ */ jsxs(
+      AlertDialogContent,
+      {
+        className,
+        onOpenAutoFocus: () => {
+          const active = document.activeElement;
+          returnFocusRef.current = active instanceof HTMLElement && active !== document.body ? active : null;
+        },
+        onCloseAutoFocus: (event) => {
+          const target = returnFocusRef.current;
+          returnFocusRef.current = null;
+          if (trigger) return;
+          const active = document.activeElement;
+          if (active && active !== document.body) return;
+          if (!target?.isConnected) return;
+          event.preventDefault();
+          target.focus({ preventScroll: true });
+        },
+        children: [
+          /* @__PURE__ */ jsx(AlertDialogHeader, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+            Icon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: cn(
+                  "flex size-9 shrink-0 items-center justify-center rounded-md",
+                  variant === "destructive" ? "bg-destructive/15 text-destructive-ink" : "bg-muted text-muted-foreground"
+                ),
+                children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
+              }
             ),
-            children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1.5", children: [
-          /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
-          description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
-        ] })
-      ] }) }),
-      children,
-      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
-        /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: pending, children: cancelLabel }),
-        /* @__PURE__ */ jsx(
-          AlertDialogAction,
-          {
-            disabled: pending || confirmDisabled,
-            onClick: (event) => {
-              event.preventDefault();
-              void handleConfirm();
-            },
-            className: cn(variant === "destructive" && buttonVariants({ variant: "destructive" })),
-            children: pending ? pendingLabel : confirmLabel
-          }
-        )
-      ] })
-    ] })
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1.5", children: [
+              /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+              description && /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
+            ] })
+          ] }) }),
+          children,
+          /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+            /* @__PURE__ */ jsx(AlertDialogCancel, { disabled: pending, children: cancelLabel }),
+            /* @__PURE__ */ jsx(
+              AlertDialogAction,
+              {
+                disabled: pending || confirmDisabled,
+                onClick: (event) => {
+                  event.preventDefault();
+                  void handleConfirm();
+                },
+                className: cn(variant === "destructive" && buttonVariants({ variant: "destructive" })),
+                children: pending ? pendingLabel : confirmLabel
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] });
 }
 export {

package/dist/components/composite/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/confirm-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState } from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger\n} from \"../ui/alert-dialog.js\";\nimport { buttonVariants } from \"../ui/button.js\";\nimport type { IconComponent } from \"./empty-state.js\";\n\nexport interface ConfirmDialogProps {\n  /** Controlled — bỏ trống thì dialog tự quản trạng thái mở (dùng kèm `trigger`) */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Phần tử mở dialog (đặt trong `AlertDialogTrigger asChild`) */\n  trigger?: ReactNode;\n\n  title: ReactNode;\n  description?: ReactNode;\n  /** Nội dung phụ (danh sách bản ghi sẽ bị ảnh hưởng, ô nhập lý do…) */\n  children?: ReactNode;\n  icon?: IconComponent;\n\n  /*\n   * Ba nhãn nút dưới đây: không truyền thì lấy namespace `confirmDialog` của\n   * `ComitorLocaleProvider` (mặc định tiếng Anh). Truyền prop là đè riêng chỗ này.\n   */\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /**\n   * Nhãn nút xác nhận trong lúc `onConfirm` bất đồng bộ đang chạy (khoá `pendingLabel`).\n   *\n   * Phải đè được chứ không được chôn cứng: tài liệu khuyến khích `onConfirm` trả về Promise, nên\n   * đây KHÔNG phải nhánh hiếm — app đặt `confirmLabel=\"Xoá dự án\"` mà quên chuỗi này sẽ thấy nút\n   * nhảy sang câu chung chung của bảng đúng vào giây người dùng đang nhìn nó.\n   */\n  pendingLabel?: string;\n  /** \"destructive\" tô nút xác nhận màu đỏ — dùng cho xoá/thu hồi */\n  variant?: \"default\" | \"destructive\";\n  /**\n   * Hành động khi xác nhận. Trả về Promise thì dialog giữ nguyên và bật trạng thái đang chạy\n   * cho tới khi Promise xong — đóng ngay rồi mới gọi API là cách chắc chắn nhất để người dùng\n   * bấm xoá hai lần.\n   */\n  onConfirm: () => void | Promise<void>;\n  /** Khoá nút xác nhận (vd chưa gõ đúng tên bản ghi cần xoá) */\n  confirmDisabled?: boolean;\n  /** Nhận lỗi từ `onConfirm` để app hiện toast; không truyền thì lỗi được ghi ra console */\n  onError?: (error: unknown) => void;\n  className?: string;\n}\n\n/**\n * Hộp thoại xác nhận cho hành động không hoàn tác được (xoá việc, gỡ thành viên, huỷ gói).\n *\n * Bọc `AlertDialog` để mọi app có cùng một cách hỏi lại; nút xác nhận tự vào trạng thái đang\n * chạy (chữ theo `pendingLabel`) khi `onConfirm` bất đồng bộ, và lỗi ném ra sẽ giữ dialog mở để\n * người dùng thử lại.\n */\nexport function ConfirmDialog({\n  open,\n  onOpenChange,\n  trigger,\n  title,\n  description,\n  children,\n  icon: Icon,\n  confirmLabel: confirmLabelProp,\n  cancelLabel: cancelLabelProp,\n  pendingLabel: pendingLabelProp,\n  variant = \"default\",\n  onConfirm,\n  confirmDisabled = false,\n  onError,\n  className\n}: ConfirmDialogProps) {\n  const t = useComitorMessages(\"confirmDialog\");\n  const confirmLabel = confirmLabelProp ?? t.confirmLabel;\n  const cancelLabel = cancelLabelProp ?? t.cancelLabel;\n  const pendingLabel = pendingLabelProp ?? t.pendingLabel;\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [pending, setPending] = useState(false);\n\n  const isOpen = open ?? internalOpen;\n  const setOpen = (next: boolean) => {\n    if (pending && !next) return; // đang chạy thì không cho đóng ngang\n    if (open === undefined) setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const handleConfirm = async () => {\n    try {\n      setPending(true);\n      await onConfirm();\n      setPending(false);\n      if (open === undefined) setInternalOpen(false);\n      onOpenChange?.(false);\n    } catch (error) {\n      // Giữ dialog mở để người dùng thấy toast lỗi của app và thử lại.\n      // KHÔNG ném tiếp: lời gọi là `void handleConfirm()` trong handler nên ném ra chỉ tạo\n      // unhandled rejection mà app không bắt được — lỗi đi ra ngoài qua `onError`.\n      setPending(false);\n      if (onError) onError(error);\n      else console.error(\"[ConfirmDialog] onConfirm thất bại:\", error);\n    }\n  };\n\n  return (\n    <AlertDialog open={isOpen} onOpenChange={setOpen}>\n      {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}\n      <AlertDialogContent className={className}>\n        <AlertDialogHeader>\n          <div className=\"flex items-start gap-3\">\n            {Icon && (\n              <span\n                aria-hidden=\"true\"\n                // Cùng khuôn với `statCardIconVariants`: nền tint `--x` + icon bậc `--x-ink`.\n                // `text-destructive` trên `bg-destructive/15` chỉ 4,06:1 (light) / 3,14:1 (dark) —\n                // qua ngưỡng 3:1 của icon nhưng hết biên an toàn. Ink: 5,76:1 / 5,71:1 ✓.\n                className={cn(\n                  \"flex size-9 shrink-0 items-center justify-center rounded-md\",\n                  variant === \"destructive\"\n                    ? \"bg-destructive/15 text-destructive-ink\"\n                    : \"bg-muted text-muted-foreground\"\n                )}\n              >\n                <Icon className=\"size-5\" />\n              </span>\n            )}\n            <div className=\"min-w-0 space-y-1.5\">\n              <AlertDialogTitle>{title}</AlertDialogTitle>\n              {description && <AlertDialogDescription>{description}</AlertDialogDescription>}\n            </div>\n          </div>\n        </AlertDialogHeader>\n\n        {children}\n\n        <AlertDialogFooter>\n          <AlertDialogCancel disabled={pending}>{cancelLabel}</AlertDialogCancel>\n          <AlertDialogAction\n            disabled={pending || confirmDisabled}\n            onClick={(event) => {\n              // Chặn hành vi tự đóng của Radix: dialog chỉ đóng sau khi onConfirm chạy xong.\n              event.preventDefault();\n              void handleConfirm();\n            }}\n            className={cn(variant === \"destructive\" && buttonVariants({ variant: \"destructive\" }))}\n          >\n            {pending ? pendingLabel : confirmLabel}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";AAsHkB,cAoBN,YApBM;AApHlB,SAAyB,gBAAgB;AACzC,SAAS,0BAA0B;AACnC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAoDxB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,IAAI,mBAAmB,eAAe;AAC5C,QAAM,eAAe,oBAAoB,EAAE;AAC3C,QAAM,cAAc,mBAAmB,EAAE;AACzC,QAAM,eAAe,oBAAoB,EAAE;AAC3C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,QAAQ;AACvB,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,WAAW,CAAC,KAAM;AACtB,QAAI,SAAS,OAAW,iBAAgB,IAAI;AAC5C,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,gBAAgB,YAAY;AAChC,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,UAAU;AAChB,iBAAW,KAAK;AAChB,UAAI,SAAS,OAAW,iBAAgB,KAAK;AAC7C,qBAAe,KAAK;AAAA,IACtB,SAAS,OAAO;AAId,iBAAW,KAAK;AAChB,UAAI,QAAS,SAAQ,KAAK;AAAA,UACrB,SAAQ,MAAM,iDAAuC,KAAK;AAAA,IACjE;AAAA,EACF;AAEA,SACE,qBAAC,eAAY,MAAM,QAAQ,cAAc,SACtC;AAAA,eAAW,oBAAC,sBAAmB,SAAO,MAAE,mBAAQ;AAAA,IACjD,qBAAC,sBAAmB,WAClB;AAAA,0BAAC,qBACC,+BAAC,SAAI,WAAU,0BACZ;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YAIZ,WAAW;AAAA,cACT;AAAA,cACA,YAAY,gBACR,2CACA;AAAA,YACN;AAAA,YAEA,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,QAC3B;AAAA,QAEF,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,oBAAkB,iBAAM;AAAA,UACxB,eAAe,oBAAC,0BAAwB,uBAAY;AAAA,WACvD;AAAA,SACF,GACF;AAAA,MAEC;AAAA,MAED,qBAAC,qBACC;AAAA,4BAAC,qBAAkB,UAAU,SAAU,uBAAY;AAAA,QACnD;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,WAAW;AAAA,YACrB,SAAS,CAAC,UAAU;AAElB,oBAAM,eAAe;AACrB,mBAAK,cAAc;AAAA,YACrB;AAAA,YACA,WAAW,GAAG,YAAY,iBAAiB,eAAe,EAAE,SAAS,cAAc,CAAC,CAAC;AAAA,YAEpF,oBAAU,eAAe;AAAA;AAAA,QAC5B;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/confirm-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useRef, useState } from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger\n} from \"../ui/alert-dialog.js\";\nimport { buttonVariants } from \"../ui/button.js\";\nimport type { IconComponent } from \"./empty-state.js\";\n\nexport interface ConfirmDialogProps {\n  /** Controlled — bỏ trống thì dialog tự quản trạng thái mở (dùng kèm `trigger`) */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Phần tử mở dialog (đặt trong `AlertDialogTrigger asChild`) */\n  trigger?: ReactNode;\n\n  title: ReactNode;\n  description?: ReactNode;\n  /** Nội dung phụ (danh sách bản ghi sẽ bị ảnh hưởng, ô nhập lý do…) */\n  children?: ReactNode;\n  icon?: IconComponent;\n\n  /*\n   * Ba nhãn nút dưới đây: không truyền thì lấy namespace `confirmDialog` của\n   * `ComitorLocaleProvider` (mặc định tiếng Anh). Truyền prop là đè riêng chỗ này.\n   */\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /**\n   * Nhãn nút xác nhận trong lúc `onConfirm` bất đồng bộ đang chạy (khoá `pendingLabel`).\n   *\n   * Phải đè được chứ không được chôn cứng: tài liệu khuyến khích `onConfirm` trả về Promise, nên\n   * đây KHÔNG phải nhánh hiếm — app đặt `confirmLabel=\"Xoá dự án\"` mà quên chuỗi này sẽ thấy nút\n   * nhảy sang câu chung chung của bảng đúng vào giây người dùng đang nhìn nó.\n   */\n  pendingLabel?: string;\n  /** \"destructive\" tô nút xác nhận màu đỏ — dùng cho xoá/thu hồi */\n  variant?: \"default\" | \"destructive\";\n  /**\n   * Hành động khi xác nhận. Trả về Promise thì dialog giữ nguyên và bật trạng thái đang chạy\n   * cho tới khi Promise xong — đóng ngay rồi mới gọi API là cách chắc chắn nhất để người dùng\n   * bấm xoá hai lần.\n   */\n  onConfirm: () => void | Promise<void>;\n  /** Khoá nút xác nhận (vd chưa gõ đúng tên bản ghi cần xoá) */\n  confirmDisabled?: boolean;\n  /** Nhận lỗi từ `onConfirm` để app hiện toast; không truyền thì lỗi được ghi ra console */\n  onError?: (error: unknown) => void;\n  className?: string;\n}\n\n/**\n * Hộp thoại xác nhận cho hành động không hoàn tác được (xoá việc, gỡ thành viên, huỷ gói).\n *\n * Bọc `AlertDialog` để mọi app có cùng một cách hỏi lại; nút xác nhận tự vào trạng thái đang\n * chạy (chữ theo `pendingLabel`) khi `onConfirm` bất đồng bộ, và lỗi ném ra sẽ giữ dialog mở để\n * người dùng thử lại.\n */\nexport function ConfirmDialog({\n  open,\n  onOpenChange,\n  trigger,\n  title,\n  description,\n  children,\n  icon: Icon,\n  confirmLabel: confirmLabelProp,\n  cancelLabel: cancelLabelProp,\n  pendingLabel: pendingLabelProp,\n  variant = \"default\",\n  onConfirm,\n  confirmDisabled = false,\n  onError,\n  className\n}: ConfirmDialogProps) {\n  const t = useComitorMessages(\"confirmDialog\");\n  const confirmLabel = confirmLabelProp ?? t.confirmLabel;\n  const cancelLabel = cancelLabelProp ?? t.cancelLabel;\n  const pendingLabel = pendingLabelProp ?? t.pendingLabel;\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [pending, setPending] = useState(false);\n  /*\n   * ⚠ Trả focus khi đóng (3.1.0). Radix chỉ trả focus về `AlertDialogTrigger` — thiếu trigger thì\n   * `onCloseAutoFocus` của nó chặn mặc định rồi focus vào `null`. Mà dialog mở bằng `open` từ một\n   * `ActionBar`, một menu hay phím tắt lưới là cách ConfirmDialog được dùng nhiều nhất: đóng xong\n   * (Huỷ, Escape, xác nhận) là focus rơi xuống `<body>` (WCAG 2.4.3), dù nút đã mở nó vẫn còn đó.\n   * Đo trên comitor-ds: Enter trên \"Refund\" của thanh thao tác, Escape → `document.activeElement`\n   * là `<body>`. Nay ghi lại phần tử giữ focus ngay trước khi dialog lấy focus và trả về đó — chỉ\n   * khi focus thật sự đã mất: app tự đưa focus đi thì app thắng; phần tử kia đã bị gỡ (dòng vừa\n   * xoá, thanh đã đóng theo lựa chọn) thì gói không đoán. Có `trigger` thì để Radix lo như cũ.\n   */\n  const returnFocusRef = useRef<HTMLElement | null>(null);\n\n  const isOpen = open ?? internalOpen;\n  const setOpen = (next: boolean) => {\n    if (pending && !next) return; // đang chạy thì không cho đóng ngang\n    if (open === undefined) setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const handleConfirm = async () => {\n    try {\n      setPending(true);\n      await onConfirm();\n      setPending(false);\n      if (open === undefined) setInternalOpen(false);\n      onOpenChange?.(false);\n    } catch (error) {\n      // Giữ dialog mở để người dùng thấy toast lỗi của app và thử lại.\n      // KHÔNG ném tiếp: lời gọi là `void handleConfirm()` trong handler nên ném ra chỉ tạo\n      // unhandled rejection mà app không bắt được — lỗi đi ra ngoài qua `onError`.\n      setPending(false);\n      if (onError) onError(error);\n      else console.error(\"[ConfirmDialog] onConfirm thất bại:\", error);\n    }\n  };\n\n  return (\n    <AlertDialog open={isOpen} onOpenChange={setOpen}>\n      {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}\n      <AlertDialogContent\n        className={className}\n        onOpenAutoFocus={() => {\n          // Chạy TRƯỚC khi Radix đưa focus vào dialog: phần tử đang focus vẫn là nơi người dùng đứng.\n          const active = document.activeElement;\n          returnFocusRef.current = active instanceof HTMLElement && active !== document.body ? active : null;\n        }}\n        onCloseAutoFocus={(event) => {\n          const target = returnFocusRef.current;\n          returnFocusRef.current = null;\n          if (trigger) return;\n          const active = document.activeElement;\n          if (active && active !== document.body) return;\n          if (!target?.isConnected) return;\n          event.preventDefault();\n          target.focus({ preventScroll: true });\n        }}\n      >\n        <AlertDialogHeader>\n          <div className=\"flex items-start gap-3\">\n            {Icon && (\n              <span\n                aria-hidden=\"true\"\n                // Cùng khuôn với `statCardIconVariants`: nền tint `--x` + icon bậc `--x-ink`.\n                // `text-destructive` trên `bg-destructive/15` chỉ 4,06:1 (light) / 3,14:1 (dark) —\n                // qua ngưỡng 3:1 của icon nhưng hết biên an toàn. Ink: 5,76:1 / 5,71:1 ✓.\n                className={cn(\n                  \"flex size-9 shrink-0 items-center justify-center rounded-md\",\n                  variant === \"destructive\"\n                    ? \"bg-destructive/15 text-destructive-ink\"\n                    : \"bg-muted text-muted-foreground\"\n                )}\n              >\n                <Icon className=\"size-5\" />\n              </span>\n            )}\n            <div className=\"min-w-0 space-y-1.5\">\n              <AlertDialogTitle>{title}</AlertDialogTitle>\n              {description && <AlertDialogDescription>{description}</AlertDialogDescription>}\n            </div>\n          </div>\n        </AlertDialogHeader>\n\n        {children}\n\n        <AlertDialogFooter>\n          <AlertDialogCancel disabled={pending}>{cancelLabel}</AlertDialogCancel>\n          <AlertDialogAction\n            disabled={pending || confirmDisabled}\n            onClick={(event) => {\n              // Chặn hành vi tự đóng của Radix: dialog chỉ đóng sau khi onConfirm chạy xong.\n              event.preventDefault();\n              void handleConfirm();\n            }}\n            className={cn(variant === \"destructive\" && buttonVariants({ variant: \"destructive\" }))}\n          >\n            {pending ? pendingLabel : confirmLabel}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";AAiIkB,cAqCN,YArCM;AA/HlB,SAAyB,QAAQ,gBAAgB;AACjD,SAAS,0BAA0B;AACnC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAoDxB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,IAAI,mBAAmB,eAAe;AAC5C,QAAM,eAAe,oBAAoB,EAAE;AAC3C,QAAM,cAAc,mBAAmB,EAAE;AACzC,QAAM,eAAe,oBAAoB,EAAE;AAC3C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAW5C,QAAM,iBAAiB,OAA2B,IAAI;AAEtD,QAAM,SAAS,QAAQ;AACvB,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,WAAW,CAAC,KAAM;AACtB,QAAI,SAAS,OAAW,iBAAgB,IAAI;AAC5C,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,gBAAgB,YAAY;AAChC,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,UAAU;AAChB,iBAAW,KAAK;AAChB,UAAI,SAAS,OAAW,iBAAgB,KAAK;AAC7C,qBAAe,KAAK;AAAA,IACtB,SAAS,OAAO;AAId,iBAAW,KAAK;AAChB,UAAI,QAAS,SAAQ,KAAK;AAAA,UACrB,SAAQ,MAAM,iDAAuC,KAAK;AAAA,IACjE;AAAA,EACF;AAEA,SACE,qBAAC,eAAY,MAAM,QAAQ,cAAc,SACtC;AAAA,eAAW,oBAAC,sBAAmB,SAAO,MAAE,mBAAQ;AAAA,IACjD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,iBAAiB,MAAM;AAErB,gBAAM,SAAS,SAAS;AACxB,yBAAe,UAAU,kBAAkB,eAAe,WAAW,SAAS,OAAO,SAAS;AAAA,QAChG;AAAA,QACA,kBAAkB,CAAC,UAAU;AAC3B,gBAAM,SAAS,eAAe;AAC9B,yBAAe,UAAU;AACzB,cAAI,QAAS;AACb,gBAAM,SAAS,SAAS;AACxB,cAAI,UAAU,WAAW,SAAS,KAAM;AACxC,cAAI,CAAC,QAAQ,YAAa;AAC1B,gBAAM,eAAe;AACrB,iBAAO,MAAM,EAAE,eAAe,KAAK,CAAC;AAAA,QACtC;AAAA,QAEA;AAAA,8BAAC,qBACC,+BAAC,SAAI,WAAU,0BACZ;AAAA,oBACC;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBAIZ,WAAW;AAAA,kBACT;AAAA,kBACA,YAAY,gBACR,2CACA;AAAA,gBACN;AAAA,gBAEA,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,YAC3B;AAAA,YAEF,qBAAC,SAAI,WAAU,uBACb;AAAA,kCAAC,oBAAkB,iBAAM;AAAA,cACxB,eAAe,oBAAC,0BAAwB,uBAAY;AAAA,eACvD;AAAA,aACF,GACF;AAAA,UAEC;AAAA,UAED,qBAAC,qBACC;AAAA,gCAAC,qBAAkB,UAAU,SAAU,uBAAY;AAAA,YACnD;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,WAAW;AAAA,gBACrB,SAAS,CAAC,UAAU;AAElB,wBAAM,eAAe;AACrB,uBAAK,cAAc;AAAA,gBACrB;AAAA,gBACA,WAAW,GAAG,YAAY,iBAAiB,eAAe,EAAE,SAAS,cAAc,CAAC,CAAC;AAAA,gBAEpF,oBAAU,eAAe;AAAA;AAAA,YAC5B;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/composite/search-filter-bar-constants.d.ts

@@ -25,6 +25,9 @@ import { ReactNode } from 'react';
  * `searchPlaceholder` và `unitLabel` vốn đã là prop rời và vẫn được giữ (prop thắng `labels`);
  * các khoá còn lại trước đây chôn cứng, trong đó có `sr-only` và nội dung nút mà KHÔNG prop nào
  * chạm tới — ghép thanh này với `DataTable` đã dịch sẽ ra giao diện nửa nọ nửa kia.
+ *
+ * Số tới `filterCount` / `resultSummary` ở dạng THÔ (`12345`); định dạng là việc của BẢNG — hai bảng
+ * dựng sẵn in `12,345` (Anh) / `12.345` (Việt) từ `3.1.0`, bảng app tự viết thì tự định dạng.
  */
 interface SearchFilterBarLabels {
     /** Placeholder + `aria-label` của ô tìm */

package/dist/components/composite/search-filter-bar-constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/search-filter-bar-constants.tsx"],"sourcesContent":["/**\n * Nhãn mặc định của `SearchFilterBar`.\n *\n * Đuôi `.tsx` là di sản: JSX của `resultSummary` nay nằm ở bảng chữ\n * (`src/i18n/namespaces/search-filter-bar.tsx`). Giữ đuôi cũ vì đổi không mua được gì — đường dẫn\n * đã build (`.js`) và mọi `import` đều như nhau.\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. `search-filter-bar.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 type { ReactNode } from \"react\";\nimport { searchFilterBarEn } from \"../../i18n/namespaces/search-filter-bar.js\";\n\n/**\n * Chuỗi hiển thị + chuỗi a11y của `SearchFilterBar` — cùng khuôn `DataTableLabels`. Theo\n * `ComitorLocaleProvider` (namespace `searchFilterBar`, mặc định tiếng Anh); override từng khoá\n * qua prop `labels`.\n *\n * `searchPlaceholder` và `unitLabel` vốn đã là prop rời và vẫn được giữ (prop thắng `labels`);\n * các khoá còn lại trước đây chôn cứng, trong đó có `sr-only` và nội dung nút mà KHÔNG prop nào\n * chạm tới — ghép thanh này với `DataTable` đã dịch sẽ ra giao diện nửa nọ nửa kia.\n */\nexport interface SearchFilterBarLabels {\n  /** Placeholder + `aria-label` của ô tìm */\n  searchPlaceholder: string;\n  /**\n   * Đơn vị đếm mặc định (\"items\" / \"mục\") — prop `unitLabel` vẫn ghi đè được riêng.\n   *\n   * Cùng lý do như `TablePaginationLabels.unitLabel`: mặc định là chuỗi theo NGÔN NGỮ nên\n   * phải override được qua `labels`, còn prop `unitLabel` là chuỗi theo NỘI DUNG của từng\n   * bảng (\"tasks\", \"contacts\") nên vẫn là prop rời và vẫn thắng `labels`.\n   */\n  unitLabel: string;\n  /** `sr-only` của nút xoá từ khoá trong ô tìm */\n  clearSearch: string;\n  /** Huy hiệu đếm bộ lọc đang bật: \"3 filters\" */\n  filterCount: (count: number) => string;\n  /** Nhãn nút xoá toàn bộ bộ lọc */\n  clearFilters: string;\n  /**\n   * Dòng đếm kết quả sau lọc: \"**3** of 57 items\" (`total` bỏ trống thì chỉ \"**3** items\").\n   *\n   * Trả `ReactNode` chứ không phải chuỗi vì con số cần thẻ riêng (`tabular-nums` để số không\n   * nhảy cột, `text-foreground` để nổi trên nền chữ mờ) — ép về chuỗi là mất phần định dạng đó.\n   * Là hàm vì trật tự số/đơn vị không giống nhau giữa các ngôn ngữ.\n   */\n  resultSummary: (resultCount: number, total: number | undefined, unitLabel: string) => ReactNode;\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.searchFilterBar`. 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 */\nexport const DEFAULT_SEARCH_FILTER_BAR_LABELS: SearchFilterBarLabels = { ...searchFilterBarEn };\n"],"mappings":"AAiBA,SAAS,yBAAyB;AA2C3B,MAAM,mCAA0D,EAAE,GAAG,kBAAkB;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/search-filter-bar-constants.tsx"],"sourcesContent":["/**\n * Nhãn mặc định của `SearchFilterBar`.\n *\n * Đuôi `.tsx` là di sản: JSX của `resultSummary` nay nằm ở bảng chữ\n * (`src/i18n/namespaces/search-filter-bar.tsx`). Giữ đuôi cũ vì đổi không mua được gì — đường dẫn\n * đã build (`.js`) và mọi `import` đều như nhau.\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. `search-filter-bar.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 type { ReactNode } from \"react\";\nimport { searchFilterBarEn } from \"../../i18n/namespaces/search-filter-bar.js\";\n\n/**\n * Chuỗi hiển thị + chuỗi a11y của `SearchFilterBar` — cùng khuôn `DataTableLabels`. Theo\n * `ComitorLocaleProvider` (namespace `searchFilterBar`, mặc định tiếng Anh); override từng khoá\n * qua prop `labels`.\n *\n * `searchPlaceholder` và `unitLabel` vốn đã là prop rời và vẫn được giữ (prop thắng `labels`);\n * các khoá còn lại trước đây chôn cứng, trong đó có `sr-only` và nội dung nút mà KHÔNG prop nào\n * chạm tới — ghép thanh này với `DataTable` đã dịch sẽ ra giao diện nửa nọ nửa kia.\n *\n * Số tới `filterCount` / `resultSummary` ở dạng THÔ (`12345`); định dạng là việc của BẢNG — hai bảng\n * dựng sẵn in `12,345` (Anh) / `12.345` (Việt) từ `3.1.0`, bảng app tự viết thì tự định dạng.\n */\nexport interface SearchFilterBarLabels {\n  /** Placeholder + `aria-label` của ô tìm */\n  searchPlaceholder: string;\n  /**\n   * Đơn vị đếm mặc định (\"items\" / \"mục\") — prop `unitLabel` vẫn ghi đè được riêng.\n   *\n   * Cùng lý do như `TablePaginationLabels.unitLabel`: mặc định là chuỗi theo NGÔN NGỮ nên\n   * phải override được qua `labels`, còn prop `unitLabel` là chuỗi theo NỘI DUNG của từng\n   * bảng (\"tasks\", \"contacts\") nên vẫn là prop rời và vẫn thắng `labels`.\n   */\n  unitLabel: string;\n  /** `sr-only` của nút xoá từ khoá trong ô tìm */\n  clearSearch: string;\n  /** Huy hiệu đếm bộ lọc đang bật: \"3 filters\" */\n  filterCount: (count: number) => string;\n  /** Nhãn nút xoá toàn bộ bộ lọc */\n  clearFilters: string;\n  /**\n   * Dòng đếm kết quả sau lọc: \"**3** of 57 items\" (`total` bỏ trống thì chỉ \"**3** items\").\n   *\n   * Trả `ReactNode` chứ không phải chuỗi vì con số cần thẻ riêng (`tabular-nums` để số không\n   * nhảy cột, `text-foreground` để nổi trên nền chữ mờ) — ép về chuỗi là mất phần định dạng đó.\n   * Là hàm vì trật tự số/đơn vị không giống nhau giữa các ngôn ngữ.\n   */\n  resultSummary: (resultCount: number, total: number | undefined, unitLabel: string) => ReactNode;\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.searchFilterBar`. 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 */\nexport const DEFAULT_SEARCH_FILTER_BAR_LABELS: SearchFilterBarLabels = { ...searchFilterBarEn };\n"],"mappings":"AAiBA,SAAS,yBAAyB;AA8C3B,MAAM,mCAA0D,EAAE,GAAG,kBAAkB;","names":[]}

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

@@ -23,7 +23,9 @@ declare const DEFAULT_PAGE_SIZE_OPTIONS: readonly [20, 50, 100];
  * (đã dịch) kèm `TablePagination` (chưa) sẽ ra một cái bảng dịch NỬA VỜI.
  *
  * Khoá nào có số/đơn vị chèn vào thì là HÀM: nối chuỗi bằng dấu cộng ở phía app là cách chắc
- * chắn sai trật tự từ với các ngôn ngữ khác.
+ * chắn sai trật tự từ với các ngôn ngữ khác. Số tới hàm ở dạng THÔ (`12345`); định dạng là việc của
+ * BẢNG — hai bảng dựng sẵn in `12,345` (Anh) / `12.345` (Việt) từ `3.1.0`, bảng app tự viết thì tự
+ * định dạng (vd `n.toLocaleString("de-DE")`).
  */
 interface TablePaginationLabels {
     /** `aria-label` của vùng phân trang (`<nav>`) — prop `label` vẫn ghi đè được riêng */

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/table-pagination-constants.ts"],"sourcesContent":["/**\n * Cỡ trang và nhãn mặc định của `TablePagination`.\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. `table-pagination.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 { tablePaginationEn } from \"../../i18n/namespaces/table-pagination.js\";\n\n/** Cỡ trang mặc định — chốt ở 3 mức để mọi bảng trong hệ sinh thái giống nhau. */\nexport const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100] as const;\n\n/**\n * Toàn bộ chuỗi hiển thị và chuỗi a11y của `TablePagination` — cùng khuôn `DataTableLabels`.\n * Theo `ComitorLocaleProvider` (namespace `tablePagination`, mặc định tiếng Anh); override từng\n * khoá qua prop `labels`.\n *\n * Vì sao phải có, dù component đã nhận `label`/`unitLabel` qua prop rời: 4 nhãn `sr-only` của\n * cụm nút (trang đầu/trước/sau/cuối), `aria-label` của ô chọn cỡ trang và hai dòng đếm\n * (`range`, `pageStatus`) KHÔNG có prop nào chạm tới được, nên một bảng dùng `DataTable`\n * (đã dịch) kèm `TablePagination` (chưa) sẽ ra một cái bảng dịch NỬA VỜI.\n *\n * Khoá nào có số/đơn vị chèn vào thì là HÀM: nối chuỗi bằng dấu cộng ở phía app là cách chắc\n * chắn sai trật tự từ với các ngôn ngữ khác.\n */\nexport interface TablePaginationLabels {\n  /** `aria-label` của vùng phân trang (`<nav>`) — prop `label` vẫn ghi đè được riêng */\n  region: string;\n  /**\n   * Đơn vị đếm mặc định (\"items\" / \"mục\") — prop `unitLabel` vẫn ghi đè được riêng.\n   *\n   * Nằm trong `labels` vì đây là chuỗi theo NGÔN NGỮ: app override cả bộ `labels` mà đơn vị vẫn\n   * kẹt ở ngôn ngữ mặc định thì đúng là cái giao diện nửa vời mà cơ chế này sinh ra để chặn. Còn\n   * prop `unitLabel` là chuỗi theo NỘI DUNG (\"tasks\", \"contacts\") — mỗi bảng một khác, nên vẫn\n   * là prop rời và vẫn thắng `labels`, đúng cặp `label`/`labels.region` ở trên.\n   */\n  unitLabel: string;\n  /** Chữ đứng trước ô chọn cỡ trang (ẩn ở màn hình hẹp) */\n  pageSizePrefix: string;\n  /** `aria-label` của ô chọn cỡ trang */\n  pageSizeSelect: (unitLabel: string) => string;\n  /** Dòng đếm bản ghi: \"1–20 of 57 items\" */\n  range: (start: number, end: number, total: number, unitLabel: string) => string;\n  /** Dòng đếm trang: \"Page 2 of 5\" */\n  pageStatus: (page: number, pageCount: number) => string;\n  /** `sr-only` của 4 nút điều hướng */\n  firstPage: string;\n  previousPage: string;\n  nextPage: string;\n  lastPage: 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.tablePagination`. 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 */\nexport const DEFAULT_TABLE_PAGINATION_LABELS: TablePaginationLabels = { ...tablePaginationEn };\n"],"mappings":"AAaA,SAAS,yBAAyB;AAG3B,MAAM,4BAA4B,CAAC,IAAI,IAAI,GAAG;AA+C9C,MAAM,kCAAyD,EAAE,GAAG,kBAAkB;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/table-pagination-constants.ts"],"sourcesContent":["/**\n * Cỡ trang và nhãn mặc định của `TablePagination`.\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. `table-pagination.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 { tablePaginationEn } from \"../../i18n/namespaces/table-pagination.js\";\n\n/** Cỡ trang mặc định — chốt ở 3 mức để mọi bảng trong hệ sinh thái giống nhau. */\nexport const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100] as const;\n\n/**\n * Toàn bộ chuỗi hiển thị và chuỗi a11y của `TablePagination` — cùng khuôn `DataTableLabels`.\n * Theo `ComitorLocaleProvider` (namespace `tablePagination`, mặc định tiếng Anh); override từng\n * khoá qua prop `labels`.\n *\n * Vì sao phải có, dù component đã nhận `label`/`unitLabel` qua prop rời: 4 nhãn `sr-only` của\n * cụm nút (trang đầu/trước/sau/cuối), `aria-label` của ô chọn cỡ trang và hai dòng đếm\n * (`range`, `pageStatus`) KHÔNG có prop nào chạm tới được, nên một bảng dùng `DataTable`\n * (đã dịch) kèm `TablePagination` (chưa) sẽ ra một cái bảng dịch NỬA VỜI.\n *\n * Khoá nào có số/đơn vị chèn vào thì là HÀM: nối chuỗi bằng dấu cộng ở phía app là cách chắc\n * chắn sai trật tự từ với các ngôn ngữ khác. Số tới hàm ở dạng THÔ (`12345`); định dạng là việc của\n * BẢNG — hai bảng dựng sẵn in `12,345` (Anh) / `12.345` (Việt) từ `3.1.0`, bảng app tự viết thì tự\n * định dạng (vd `n.toLocaleString(\"de-DE\")`).\n */\nexport interface TablePaginationLabels {\n  /** `aria-label` của vùng phân trang (`<nav>`) — prop `label` vẫn ghi đè được riêng */\n  region: string;\n  /**\n   * Đơn vị đếm mặc định (\"items\" / \"mục\") — prop `unitLabel` vẫn ghi đè được riêng.\n   *\n   * Nằm trong `labels` vì đây là chuỗi theo NGÔN NGỮ: app override cả bộ `labels` mà đơn vị vẫn\n   * kẹt ở ngôn ngữ mặc định thì đúng là cái giao diện nửa vời mà cơ chế này sinh ra để chặn. Còn\n   * prop `unitLabel` là chuỗi theo NỘI DUNG (\"tasks\", \"contacts\") — mỗi bảng một khác, nên vẫn\n   * là prop rời và vẫn thắng `labels`, đúng cặp `label`/`labels.region` ở trên.\n   */\n  unitLabel: string;\n  /** Chữ đứng trước ô chọn cỡ trang (ẩn ở màn hình hẹp) */\n  pageSizePrefix: string;\n  /** `aria-label` của ô chọn cỡ trang */\n  pageSizeSelect: (unitLabel: string) => string;\n  /** Dòng đếm bản ghi: \"1–20 of 57 items\" */\n  range: (start: number, end: number, total: number, unitLabel: string) => string;\n  /** Dòng đếm trang: \"Page 2 of 5\" */\n  pageStatus: (page: number, pageCount: number) => string;\n  /** `sr-only` của 4 nút điều hướng */\n  firstPage: string;\n  previousPage: string;\n  nextPage: string;\n  lastPage: 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.tablePagination`. 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 */\nexport const DEFAULT_TABLE_PAGINATION_LABELS: TablePaginationLabels = { ...tablePaginationEn };\n"],"mappings":"AAaA,SAAS,yBAAyB;AAG3B,MAAM,4BAA4B,CAAC,IAAI,IAAI,GAAG;AAiD9C,MAAM,kCAAyD,EAAE,GAAG,kBAAkB;","names":[]}

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;