@comitor/ui 3.2.0 → 3.3.1

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import {
@@ -38,7 +38,6 @@ 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;
@@ -60,61 +59,41 @@ function ConfirmDialog({
   };
   return /* @__PURE__ */ jsxs(AlertDialog, { open: isOpen, onOpenChange: setOpen, children: [
     trigger && /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: trigger }),
-    /* @__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" })
-              }
+    /* @__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("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
-              }
-            )
-          ] })
-        ]
-      }
-    )
+            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
+          }
+        )
+      ] })
+    ] })
   ] });
 }
 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, 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":"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","names":[]}
+{"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   * ⚠ Trả focus khi đóng mà không có `trigger` — mở bằng `open` từ `ActionBar`, menu, phím tắt lưới,\n   * tức cách ConfirmDialog được dùng nhiều nhất (đo trên comitor-ds, 3.1.0: Enter trên \"Refund\" của\n   * thanh thao tác, Escape → `<body>`). Từ 3.3.1 việc này nằm ở `AlertDialogContent` (primitive),\n   * không còn một bản riêng ở đây: bản riêng của 3.1.0 ghi nút mở ở `onOpenAutoFocus` nên hụt hai ca\n   * — mở từ mục MENU (ghi phải mục menu, thứ bị gỡ cùng menu) và `children` có ô `autoFocus` (Radix\n   * không gọi `onOpenAutoFocus`). Có `trigger` thì Radix lo như cũ.\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":";AA6HkB,cAoBN,YApBM;AA3HlB,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;AAS5C,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":[]}

package/dist/components/composite/toast.d.ts

@@ -27,7 +27,7 @@ interface ToastOptions {
  *     const { resolvedTheme } = useTheme();
  *     <Toaster theme={resolvedTheme as "light" | "dark"} />
  */
-declare function Toaster({ theme, position, ...props }: ToasterProps): React.JSX.Element;
+declare function Toaster({ theme, position, toastOptions, ...props }: ToasterProps): React.JSX.Element;
 /**
  * Bắn toast theo biến thể của Comitor.
  *

package/dist/components/composite/toast.js

@@ -2,15 +2,18 @@
 import { jsx } from "react/jsx-runtime";
 import { AlertTriangle, CheckCircle2, Info, XCircle } from "lucide-react";
 import { Toaster as SonnerToaster, toast as sonnerToast } from "sonner";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { getActiveToastMessages, useToastLanguageBridge } from "../../lib/toast-language.js";
-function Toaster({ theme = "system", position = "bottom-right", ...props }) {
+function Toaster({ theme = "system", position = "bottom-right", toastOptions, ...props }) {
   useToastLanguageBridge();
+  const t = useComitorMessages("toast");
   return /* @__PURE__ */ jsx(
     SonnerToaster,
     {
       theme,
       position,
       className: "toaster group",
+      containerAriaLabel: t.containerAriaLabel,
       icons: {
         success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-success-ink" }),
         warning: /* @__PURE__ */ jsx(AlertTriangle, { className: "size-4 text-warning-ink" }),
@@ -18,28 +21,32 @@ function Toaster({ theme = "system", position = "bottom-right", ...props }) {
         info: /* @__PURE__ */ jsx(Info, { className: "size-4 text-info-ink" })
       },
       toastOptions: {
-        classNames: {
-          toast: "group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:rounded-lg group-[.toaster]:shadow-card",
-          title: "group-[.toast]:text-sm group-[.toast]:font-medium",
-          description: "group-[.toast]:text-sm group-[.toast]:text-muted-foreground",
-          // Hai nút này là CONTROL đứng trên nền `--popover`, nên ngoài tương phản CHỮ còn phải
-          // nhận ra được RANH GIỚI (WCAG 1.4.11, ngưỡng 3:1):
-          //   actionButton  chữ 10,19:1 (L) · 12,67:1 (D) ✓, nhưng ruột `bg-primary` (gold) chỉ
-          //                 lệch nền popover 1,86:1 ở light. Giữ đúng cách variant `default` của
-          //                 `Button` xử lý — viền trong suốt, để `shadow-control` làm tín hiệu
-          //                 độ cao; đổi khác ở đây sẽ lệch với nút của chính gói.
-          //   cancelButton  chữ 4,89:1 (L) · 4,86:1 (D) ✓, nhưng ruột `bg-muted` chỉ lệch nền
-          //                 popover 1,07:1 (L) · 1,10:1 (D) → nút không có biên nào, đọc như chữ
-          //                 trơn. `border-control-edge`: 3,83:1 (L) · 4,64:1 (D) so với popover,
-          //                 3,58:1 · 4,21:1 so với chính ruột `bg-muted` ✓ (hợp đồng §3).
-          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-[.toast]:shadow-control",
-          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:border group-[.toast]:border-control-edge"
-        }
+        closeButtonAriaLabel: t.closeButtonAriaLabel,
+        ...toastOptions ?? COMITOR_TOAST_OPTIONS
       },
       ...props
     }
   );
 }
+const COMITOR_TOAST_OPTIONS = {
+  classNames: {
+    toast: "group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:rounded-lg group-[.toaster]:shadow-card",
+    title: "group-[.toast]:text-sm group-[.toast]:font-medium",
+    description: "group-[.toast]:text-sm group-[.toast]:text-muted-foreground",
+    // Hai nút này là CONTROL đứng trên nền `--popover`, nên ngoài tương phản CHỮ còn phải
+    // nhận ra được RANH GIỚI (WCAG 1.4.11, ngưỡng 3:1):
+    //   actionButton  chữ 10,19:1 (L) · 12,67:1 (D) ✓, nhưng ruột `bg-primary` (gold) chỉ
+    //                 lệch nền popover 1,86:1 ở light. Giữ đúng cách variant `default` của
+    //                 `Button` xử lý — viền trong suốt, để `shadow-control` làm tín hiệu
+    //                 độ cao; đổi khác ở đây sẽ lệch với nút của chính gói.
+    //   cancelButton  chữ 4,89:1 (L) · 4,86:1 (D) ✓, nhưng ruột `bg-muted` chỉ lệch nền
+    //                 popover 1,07:1 (L) · 1,10:1 (D) → nút không có biên nào, đọc như chữ
+    //                 trơn. `border-control-edge`: 3,83:1 (L) · 4,64:1 (D) so với popover,
+    //                 3,58:1 · 4,21:1 so với chính ruột `bg-muted` ✓ (hợp đồng §3).
+    actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-[.toast]:shadow-control",
+    cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:border group-[.toast]:border-control-edge"
+  }
+};
 function toast(title, options = {}) {
   const { variant = "default", description, duration, action, id } = options;
   const config = { description, duration, action, id };

package/dist/components/composite/toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertTriangle, CheckCircle2, Info, XCircle } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Toaster as SonnerToaster, toast as sonnerToast } from \"sonner\";\nimport { getActiveToastMessages, useToastLanguageBridge } from \"../../lib/toast-language.js\";\n\nexport type ToasterProps = ComponentProps<typeof SonnerToaster>;\n\nexport type ToastVariant = \"default\" | \"success\" | \"warning\" | \"destructive\" | \"info\";\n\nexport interface ToastOptions {\n  description?: ReactNode;\n  variant?: ToastVariant;\n  /** ms; mặc định theo sonner (4000). `Number.POSITIVE_INFINITY` = giữ đến khi người dùng đóng. */\n  duration?: number;\n  /** Nút hành động, vd { label: \"Hoàn tác\", onClick } */\n  action?: { label: string; onClick: () => void };\n  /** id để cập nhật/đóng đúng toast đó (dùng với luồng \"đang lưu…\" → \"đã lưu\") */\n  id?: string | number;\n}\n\n/**\n * Vùng hiển thị toast — đặt MỘT LẦN ở gốc app.\n *\n * `theme` mặc định \"system\" và KHÔNG đọc `next-themes`: entry \".\" của package phải chạy được ở\n * app không có next-themes. App dùng next-themes hãy truyền xuống, nếu không toast sẽ theo\n * `prefers-color-scheme` của hệ điều hành và lệch với theme người dùng tự chọn:\n *\n *     const { resolvedTheme } = useTheme();\n *     <Toaster theme={resolvedTheme as \"light\" | \"dark\"} />\n */\nexport function Toaster({ theme = \"system\", position = \"bottom-right\", ...props }: ToasterProps) {\n  // Ghi ngôn ngữ của provider cho `toastPromise` đọc — xem `lib/toast-language.ts`.\n  useToastLanguageBridge();\n\n  return (\n    <SonnerToaster\n      theme={theme}\n      position={position}\n      className=\"toaster group\"\n      // Icon tô bằng bậc `--x-ink`, KHÔNG phải token tô nền `--x`. Icon là thành phần phi văn\n      // bản (ngưỡng 3:1) đứng trên nền `--popover`: `text-warning` (= `--yellow` #F2C94C) trên\n      // nền trắng chỉ **1,59:1** ✗ — gần như vô hình ở light (dark thì 11,60:1, lại một chỗ mỗi\n      // theme hỏng một nửa); `text-success` 3,13:1 và `text-info` 4,14:1 tuy qua ngưỡng nhưng\n      // sát mép. Bậc ink (light / dark): success 6,52 / 10,19 · warning 6,51 / 11,60 ·\n      // destructive 7,15 / 6,42 · info 6,68 / 9,54 ✓.\n      icons={{\n        success: <CheckCircle2 className=\"size-4 text-success-ink\" />,\n        warning: <AlertTriangle className=\"size-4 text-warning-ink\" />,\n        error: <XCircle className=\"size-4 text-destructive-ink\" />,\n        info: <Info className=\"size-4 text-info-ink\" />\n      }}\n      toastOptions={{\n        classNames: {\n          toast:\n            \"group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:rounded-lg group-[.toaster]:shadow-card\",\n          title: \"group-[.toast]:text-sm group-[.toast]:font-medium\",\n          description: \"group-[.toast]:text-sm group-[.toast]:text-muted-foreground\",\n          // Hai nút này là CONTROL đứng trên nền `--popover`, nên ngoài tương phản CHỮ còn phải\n          // nhận ra được RANH GIỚI (WCAG 1.4.11, ngưỡng 3:1):\n          //   actionButton  chữ 10,19:1 (L) · 12,67:1 (D) ✓, nhưng ruột `bg-primary` (gold) chỉ\n          //                 lệch nền popover 1,86:1 ở light. Giữ đúng cách variant `default` của\n          //                 `Button` xử lý — viền trong suốt, để `shadow-control` làm tín hiệu\n          //                 độ cao; đổi khác ở đây sẽ lệch với nút của chính gói.\n          //   cancelButton  chữ 4,89:1 (L) · 4,86:1 (D) ✓, nhưng ruột `bg-muted` chỉ lệch nền\n          //                 popover 1,07:1 (L) · 1,10:1 (D) → nút không có biên nào, đọc như chữ\n          //                 trơn. `border-control-edge`: 3,83:1 (L) · 4,64:1 (D) so với popover,\n          //                 3,58:1 · 4,21:1 so với chính ruột `bg-muted` ✓ (hợp đồng §3).\n          actionButton:\n            \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-[.toast]:shadow-control\",\n          cancelButton:\n            \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:border group-[.toast]:border-control-edge\"\n        }\n      }}\n      {...props}\n    />\n  );\n}\n\n/**\n * Bắn toast theo biến thể của Comitor.\n *\n * Vì sao bọc `sonner` thay vì để app gọi thẳng: tên biến thể ở đây khớp với ngôn ngữ của design\n * system (`destructive`, không phải `error`), và khi cần đổi thư viện toast thì chỉ sửa một file.\n */\nexport function toast(title: ReactNode, options: ToastOptions = {}): string | number {\n  const { variant = \"default\", description, duration, action, id } = options;\n  const config = { description, duration, action, id };\n\n  switch (variant) {\n    case \"success\":\n      return sonnerToast.success(title, config);\n    case \"warning\":\n      return sonnerToast.warning(title, config);\n    case \"destructive\":\n      return sonnerToast.error(title, config);\n    case \"info\":\n      return sonnerToast.info(title, config);\n    default:\n      return sonnerToast(title, config);\n  }\n}\n\n/** Đóng một toast theo id, hoặc đóng tất cả khi không truyền id. */\nexport function dismissToast(id?: string | number): void {\n  sonnerToast.dismiss(id);\n}\n\n/**\n * Toast bám theo một Promise: \"đang lưu…\" → \"đã lưu\" / \"lưu thất bại\". `success` và `error` luôn\n * do app truyền; `loading` bỏ trống thì lấy khoá `toast.loading` theo ngôn ngữ của `<Toaster />`\n * (tức của `ComitorLocaleProvider` bọc nó — xem `lib/toast-language.ts`; từ `3.0.1` cả `SonnerToaster`\n * của `/shell` cũng ghi vào đó). Truyền\n * `loading` tường minh vẫn thắng.\n */\nexport function toastPromise<T>(\n  promise: Promise<T>,\n  messages: {\n    loading?: ReactNode;\n    success: ReactNode | ((data: T) => ReactNode);\n    error: ReactNode | ((error: unknown) => ReactNode);\n  }\n) {\n  return sonnerToast.promise(promise, {\n    loading: messages.loading ?? getActiveToastMessages().loading,\n    success: messages.success,\n    error: messages.error\n  });\n}\n"],"mappings":";AAgDiB;AA9CjB,SAAS,eAAe,cAAc,MAAM,eAAe;AAE3D,SAAS,WAAW,eAAe,SAAS,mBAAmB;AAC/D,SAAS,wBAAwB,8BAA8B;AA2BxD,SAAS,QAAQ,EAAE,QAAQ,UAAU,WAAW,gBAAgB,GAAG,MAAM,GAAiB;AAE/F,yBAAuB;AAEvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MAOV,OAAO;AAAA,QACL,SAAS,oBAAC,gBAAa,WAAU,2BAA0B;AAAA,QAC3D,SAAS,oBAAC,iBAAc,WAAU,2BAA0B;AAAA,QAC5D,OAAO,oBAAC,WAAQ,WAAU,+BAA8B;AAAA,QACxD,MAAM,oBAAC,QAAK,WAAU,wBAAuB;AAAA,MAC/C;AAAA,MACA,cAAc;AAAA,QACZ,YAAY;AAAA,UACV,OACE;AAAA,UACF,OAAO;AAAA,UACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAWb,cACE;AAAA,UACF,cACE;AAAA,QACJ;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAQO,SAAS,MAAM,OAAkB,UAAwB,CAAC,GAAoB;AACnF,QAAM,EAAE,UAAU,WAAW,aAAa,UAAU,QAAQ,GAAG,IAAI;AACnE,QAAM,SAAS,EAAE,aAAa,UAAU,QAAQ,GAAG;AAEnD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,YAAY,QAAQ,OAAO,MAAM;AAAA,IAC1C,KAAK;AACH,aAAO,YAAY,QAAQ,OAAO,MAAM;AAAA,IAC1C,KAAK;AACH,aAAO,YAAY,MAAM,OAAO,MAAM;AAAA,IACxC,KAAK;AACH,aAAO,YAAY,KAAK,OAAO,MAAM;AAAA,IACvC;AACE,aAAO,YAAY,OAAO,MAAM;AAAA,EACpC;AACF;AAGO,SAAS,aAAa,IAA4B;AACvD,cAAY,QAAQ,EAAE;AACxB;AASO,SAAS,aACd,SACA,UAKA;AACA,SAAO,YAAY,QAAQ,SAAS;AAAA,IAClC,SAAS,SAAS,WAAW,uBAAuB,EAAE;AAAA,IACtD,SAAS,SAAS;AAAA,IAClB,OAAO,SAAS;AAAA,EAClB,CAAC;AACH;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { AlertTriangle, CheckCircle2, Info, XCircle } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Toaster as SonnerToaster, toast as sonnerToast } from \"sonner\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\nimport { getActiveToastMessages, useToastLanguageBridge } from \"../../lib/toast-language.js\";\n\nexport type ToasterProps = ComponentProps<typeof SonnerToaster>;\n\nexport type ToastVariant = \"default\" | \"success\" | \"warning\" | \"destructive\" | \"info\";\n\nexport interface ToastOptions {\n  description?: ReactNode;\n  variant?: ToastVariant;\n  /** ms; mặc định theo sonner (4000). `Number.POSITIVE_INFINITY` = giữ đến khi người dùng đóng. */\n  duration?: number;\n  /** Nút hành động, vd { label: \"Hoàn tác\", onClick } */\n  action?: { label: string; onClick: () => void };\n  /** id để cập nhật/đóng đúng toast đó (dùng với luồng \"đang lưu…\" → \"đã lưu\") */\n  id?: string | number;\n}\n\n/**\n * Vùng hiển thị toast — đặt MỘT LẦN ở gốc app.\n *\n * `theme` mặc định \"system\" và KHÔNG đọc `next-themes`: entry \".\" của package phải chạy được ở\n * app không có next-themes. App dùng next-themes hãy truyền xuống, nếu không toast sẽ theo\n * `prefers-color-scheme` của hệ điều hành và lệch với theme người dùng tự chọn:\n *\n *     const { resolvedTheme } = useTheme();\n *     <Toaster theme={resolvedTheme as \"light\" | \"dark\"} />\n */\nexport function Toaster({ theme = \"system\", position = \"bottom-right\", toastOptions, ...props }: ToasterProps) {\n  // Ghi ngôn ngữ của provider cho `toastPromise` đọc — xem `lib/toast-language.ts`.\n  useToastLanguageBridge();\n  const t = useComitorMessages(\"toast\");\n\n  return (\n    <SonnerToaster\n      theme={theme}\n      position={position}\n      className=\"toaster group\"\n      // Tên vùng toast theo provider — mặc định của sonner là \"Notifications\" CỨNG (xem\n      // `namespaces/toast.ts`). Đứng TRƯỚC `{...props}` nên prop của app vẫn thắng.\n      containerAriaLabel={t.containerAriaLabel}\n      // Icon tô bằng bậc `--x-ink`, KHÔNG phải token tô nền `--x`. Icon là thành phần phi văn\n      // bản (ngưỡng 3:1) đứng trên nền `--popover`: `text-warning` (= `--yellow` #F2C94C) trên\n      // nền trắng chỉ **1,59:1** ✗ — gần như vô hình ở light (dark thì 11,60:1, lại một chỗ mỗi\n      // theme hỏng một nửa); `text-success` 3,13:1 và `text-info` 4,14:1 tuy qua ngưỡng nhưng\n      // sát mép. Bậc ink (light / dark): success 6,52 / 10,19 · warning 6,51 / 11,60 ·\n      // destructive 7,15 / 6,42 · info 6,68 / 9,54 ✓.\n      icons={{\n        success: <CheckCircle2 className=\"size-4 text-success-ink\" />,\n        warning: <AlertTriangle className=\"size-4 text-warning-ink\" />,\n        error: <XCircle className=\"size-4 text-destructive-ink\" />,\n        info: <Info className=\"size-4 text-info-ink\" />\n      }}\n      /*\n       * ⚠ `toastOptions` của app THAY cả khối (kể cả `classNames` bên dưới) — hành vi có từ trước,\n       * giữ nguyên. Riêng `closeButtonAriaLabel` thì luôn có mặc định theo provider, trừ khi app tự\n       * khai: thiếu nó thì nút × (khi bật `closeButton`) đọc \"Close toast\" giữa giao diện tiếng Việt.\n       */\n      toastOptions={{\n        closeButtonAriaLabel: t.closeButtonAriaLabel,\n        ...(toastOptions ?? COMITOR_TOAST_OPTIONS)\n      }}\n      {...props}\n    />\n  );\n}\n\n/**\n * Lớp của từng toast — khối `toastOptions` mặc định của `Toaster`. Hằng module, không dựng lại mỗi\n * lượt render.\n */\nconst COMITOR_TOAST_OPTIONS: NonNullable<ToasterProps[\"toastOptions\"]> = {\n  classNames: {\n    toast:\n      \"group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:rounded-lg group-[.toaster]:shadow-card\",\n    title: \"group-[.toast]:text-sm group-[.toast]:font-medium\",\n    description: \"group-[.toast]:text-sm group-[.toast]:text-muted-foreground\",\n    // Hai nút này là CONTROL đứng trên nền `--popover`, nên ngoài tương phản CHỮ còn phải\n    // nhận ra được RANH GIỚI (WCAG 1.4.11, ngưỡng 3:1):\n    //   actionButton  chữ 10,19:1 (L) · 12,67:1 (D) ✓, nhưng ruột `bg-primary` (gold) chỉ\n    //                 lệch nền popover 1,86:1 ở light. Giữ đúng cách variant `default` của\n    //                 `Button` xử lý — viền trong suốt, để `shadow-control` làm tín hiệu\n    //                 độ cao; đổi khác ở đây sẽ lệch với nút của chính gói.\n    //   cancelButton  chữ 4,89:1 (L) · 4,86:1 (D) ✓, nhưng ruột `bg-muted` chỉ lệch nền\n    //                 popover 1,07:1 (L) · 1,10:1 (D) → nút không có biên nào, đọc như chữ\n    //                 trơn. `border-control-edge`: 3,83:1 (L) · 4,64:1 (D) so với popover,\n    //                 3,58:1 · 4,21:1 so với chính ruột `bg-muted` ✓ (hợp đồng §3).\n    actionButton: \"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-[.toast]:shadow-control\",\n    cancelButton:\n      \"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:border group-[.toast]:border-control-edge\"\n  }\n};\n\n/**\n * Bắn toast theo biến thể của Comitor.\n *\n * Vì sao bọc `sonner` thay vì để app gọi thẳng: tên biến thể ở đây khớp với ngôn ngữ của design\n * system (`destructive`, không phải `error`), và khi cần đổi thư viện toast thì chỉ sửa một file.\n */\nexport function toast(title: ReactNode, options: ToastOptions = {}): string | number {\n  const { variant = \"default\", description, duration, action, id } = options;\n  const config = { description, duration, action, id };\n\n  switch (variant) {\n    case \"success\":\n      return sonnerToast.success(title, config);\n    case \"warning\":\n      return sonnerToast.warning(title, config);\n    case \"destructive\":\n      return sonnerToast.error(title, config);\n    case \"info\":\n      return sonnerToast.info(title, config);\n    default:\n      return sonnerToast(title, config);\n  }\n}\n\n/** Đóng một toast theo id, hoặc đóng tất cả khi không truyền id. */\nexport function dismissToast(id?: string | number): void {\n  sonnerToast.dismiss(id);\n}\n\n/**\n * Toast bám theo một Promise: \"đang lưu…\" → \"đã lưu\" / \"lưu thất bại\". `success` và `error` luôn\n * do app truyền; `loading` bỏ trống thì lấy khoá `toast.loading` theo ngôn ngữ của `<Toaster />`\n * (tức của `ComitorLocaleProvider` bọc nó — xem `lib/toast-language.ts`; từ `3.0.1` cả `SonnerToaster`\n * của `/shell` cũng ghi vào đó). Truyền\n * `loading` tường minh vẫn thắng.\n */\nexport function toastPromise<T>(\n  promise: Promise<T>,\n  messages: {\n    loading?: ReactNode;\n    success: ReactNode | ((data: T) => ReactNode);\n    error: ReactNode | ((error: unknown) => ReactNode);\n  }\n) {\n  return sonnerToast.promise(promise, {\n    loading: messages.loading ?? getActiveToastMessages().loading,\n    success: messages.success,\n    error: messages.error\n  });\n}\n"],"mappings":";AAqDiB;AAnDjB,SAAS,eAAe,cAAc,MAAM,eAAe;AAE3D,SAAS,WAAW,eAAe,SAAS,mBAAmB;AAC/D,SAAS,0BAA0B;AACnC,SAAS,wBAAwB,8BAA8B;AA2BxD,SAAS,QAAQ,EAAE,QAAQ,UAAU,WAAW,gBAAgB,cAAc,GAAG,MAAM,GAAiB;AAE7G,yBAAuB;AACvB,QAAM,IAAI,mBAAmB,OAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MAGV,oBAAoB,EAAE;AAAA,MAOtB,OAAO;AAAA,QACL,SAAS,oBAAC,gBAAa,WAAU,2BAA0B;AAAA,QAC3D,SAAS,oBAAC,iBAAc,WAAU,2BAA0B;AAAA,QAC5D,OAAO,oBAAC,WAAQ,WAAU,+BAA8B;AAAA,QACxD,MAAM,oBAAC,QAAK,WAAU,wBAAuB;AAAA,MAC/C;AAAA,MAMA,cAAc;AAAA,QACZ,sBAAsB,EAAE;AAAA,QACxB,GAAI,gBAAgB;AAAA,MACtB;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAMA,MAAM,wBAAmE;AAAA,EACvE,YAAY;AAAA,IACV,OACE;AAAA,IACF,OAAO;AAAA,IACP,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAWb,cAAc;AAAA,IACd,cACE;AAAA,EACJ;AACF;AAQO,SAAS,MAAM,OAAkB,UAAwB,CAAC,GAAoB;AACnF,QAAM,EAAE,UAAU,WAAW,aAAa,UAAU,QAAQ,GAAG,IAAI;AACnE,QAAM,SAAS,EAAE,aAAa,UAAU,QAAQ,GAAG;AAEnD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,YAAY,QAAQ,OAAO,MAAM;AAAA,IAC1C,KAAK;AACH,aAAO,YAAY,QAAQ,OAAO,MAAM;AAAA,IAC1C,KAAK;AACH,aAAO,YAAY,MAAM,OAAO,MAAM;AAAA,IACxC,KAAK;AACH,aAAO,YAAY,KAAK,OAAO,MAAM;AAAA,IACvC;AACE,aAAO,YAAY,OAAO,MAAM;AAAA,EACpC;AACF;AAGO,SAAS,aAAa,IAA4B;AACvD,cAAY,QAAQ,EAAE;AACxB;AASO,SAAS,aACd,SACA,UAKA;AACA,SAAO,YAAY,QAAQ,SAAS;AAAA,IAClC,SAAS,SAAS,WAAW,uBAAuB,EAAE;AAAA,IACtD,SAAS,SAAS;AAAA,IAClB,OAAO,SAAS;AAAA,EAClB,CAAC;AACH;","names":[]}

package/dist/components/ui/action-bar.d.ts

@@ -18,6 +18,26 @@ interface ActionBarProps extends DivProps {
     side?: "top" | "bottom";
     sideOffset?: number;
     portalContainer?: Element | DocumentFragment | null;
+    /**
+     * Căn NGANG theo đâu — `align`/`alignOffset` đo từ hộp nào. Chiều dọc (`side`/`sideOffset`) luôn
+     * theo khung nhìn: thanh vẫn nổi ở đáy (hay đỉnh) màn hình.
+     *
+     * - `"viewport"` (mặc định): khung nhìn — đúng như trước `3.3.0`.
+     * - `"container"`: hộp của `portalContainer` — giữa (hay mép) phần tử đó, và rộng tối đa bằng nó.
+     *   Dành cho thanh phục vụ MỘT vùng (bảng, lưới) trong khung app có thanh bên: giữa khung nhìn lệch
+     *   khỏi giữa vùng đúng nửa bề rộng thanh bên (120px với thanh bên 240px), và thanh trông như trôi
+     *   lạc sang một phía. Đặt `portalContainer` là một khối CÙNG BỀ RỘNG với vùng — một `<div>` rỗng
+     *   ngay sau bảng là đủ, và đó cũng là chỗ đúng cho thứ tự Tab.
+     *
+     * ⚠ Thêm so với thượng nguồn. Hai giới hạn, cả hai có lý do:
+     * - Đo bằng toạ độ KHUNG NHÌN, đo lại khi phần tử hoặc cửa sổ ĐỔI CỠ (thu/mở thanh bên, xoay máy).
+     *   Phần tử DỜI chỗ mà không đổi cỡ thì không đo lại — `ResizeObserver` không báo chuyện đó.
+     * - Tổ tiên nào của `portalContainer` tạo khối chứa cho `position: fixed` (`transform`, `filter`,
+     *   `contain: layout|paint`) thì toạ độ khung nhìn lệch đúng bằng vị trí khối đó. Ở đó dùng
+     *   `"viewport"`: `left: 50%` khi ấy đã tự tính theo chính khối chứa.
+     * Không có `portalContainer` (thanh nằm ở `<body>`) thì hai chế độ như nhau.
+     */
+    anchor?: "viewport" | "container";
     dir?: Direction;
     orientation?: Orientation;
     loop?: boolean;

package/dist/components/ui/action-bar.js

@@ -53,6 +53,17 @@ function useFocusContext(consumerName) {
   }
   return context;
 }
+function horizontalPosition(align, alignOffset, box) {
+  if (!box) {
+    if (align === "center") return { left: "50%", translate: "-50% 0" };
+    if (align === "start") return { left: `${alignOffset}px` };
+    return { right: `${alignOffset}px` };
+  }
+  const maxWidth = `min(100vw - 1rem, ${box.width}px)`;
+  if (align === "center") return { left: `${box.left + box.width / 2}px`, translate: "-50% 0", maxWidth };
+  if (align === "start") return { left: `${box.left + alignOffset}px`, maxWidth };
+  return { right: `${box.viewportWidth - (box.left + box.width) + alignOffset}px`, maxWidth };
+}
 function ActionBar(props) {
   const {
     open = false,
@@ -63,6 +74,7 @@ function ActionBar(props) {
     align = "center",
     sideOffset = 16,
     portalContainer: portalContainerProp,
+    anchor = "viewport",
     dir: dirProp,
     orientation = "horizontal",
     loop = true,
@@ -127,6 +139,28 @@ function ActionBar(props) {
   useIsomorphicLayoutEffect(() => {
     setMounted(true);
   }, []);
+  const anchorElement = anchor === "container" && portalContainerProp && "getBoundingClientRect" in portalContainerProp ? portalContainerProp : null;
+  const [anchorBox, setAnchorBox] = React.useState(null);
+  useIsomorphicLayoutEffect(() => {
+    if (!open || !anchorElement) return;
+    const view = anchorElement.ownerDocument.defaultView;
+    function measure() {
+      if (!anchorElement) return;
+      const rect = anchorElement.getBoundingClientRect();
+      const viewportWidth = anchorElement.ownerDocument.documentElement.clientWidth;
+      setAnchorBox(
+        (previous) => previous && previous.left === rect.left && previous.width === rect.width && previous.viewportWidth === viewportWidth ? previous : { left: rect.left, width: rect.width, viewportWidth }
+      );
+    }
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+    observer?.observe(anchorElement);
+    view?.addEventListener("resize", measure);
+    return () => {
+      observer?.disconnect();
+      view?.removeEventListener("resize", measure);
+    };
+  }, [open, anchorElement]);
   React.useEffect(() => {
     if (!open) return;
     const ownerDocument = rootRef.current?.ownerDocument ?? document;
@@ -175,6 +209,16 @@ function ActionBar(props) {
            */
           "fixed z-50 rounded-lg border bg-popover text-popover-foreground shadow-overlay outline-none",
           "animate-in duration-250 fade-in-0 zoom-in-95 [animation-timing-function:cubic-bezier(0.16,1,0.3,1)]",
+          /*
+           * ⚠ `transition-none` (3.3.0) — thanh không có transition nào CỐ Ý: hiệu ứng xuất hiện là
+           * keyframe (`animate-in`). Nhưng `duration-250` ở dòng trên, đặt cho keyframe đó, trong
+           * Tailwind v4 còn ghi luôn `transition-duration: 250ms`; mà `transition-property` mặc định
+           * của CSS là `all` — nên MỌI thay đổi thuộc tính của thanh trượt 250ms. Đo được với
+           * `anchor="container"`: lượt đo vị trí (trước lượt sơn) đổi `left` từ giữa khung nhìn sang
+           * giữa vùng, và thanh TRƯỢT NGANG 120px ở mỗi lần mở. Theo vùng khi thanh bên thu/mở thì
+           * vẫn mượt: `ResizeObserver` báo từng khung hình của chính hiệu ứng thu/mở đó.
+           */
+          "transition-none",
           "data-[side=bottom]:slide-in-from-bottom-4 data-[side=top]:slide-in-from-top-4",
           "motion-reduce:animate-none motion-reduce:transition-none",
           /*
@@ -182,19 +226,20 @@ function ActionBar(props) {
            * không có giới hạn nào — đo ở 375px: thanh rộng 413px, bắt đầu ở x = −19px, hai mép bị
            * cắt và "Đã chọn 3" vỡ thành 3 dòng. Xuống dòng chứ không cuộn ngang: vùng cuộn sẽ cắt
            * mất vòng focus của các nút ở mép.
+           *
+           * ⚠ Và `w-max` (3.3.0) — thiếu nó thì trần kia thành vô nghĩa. Phần tử `fixed` rộng "co
+           * theo nội dung" chỉ được dùng phần khung chứa nằm SAU mốc `left`; với `left: 50%` của
+           * `align="center"` là đúng NỬA khung nhìn. Đo trên app thật: khung 1129px, thanh rộng
+           * đúng 564,5px và gãy "3 selected ×" xuống hàng thứ hai dù nội dung chỉ cần 621px. `w-max`
+           * cho thanh rộng bằng nội dung, `max-w-*` vẫn chặn trần, nên chỉ màn hẹp mới xuống dòng.
            */
-          "max-w-[calc(100vw-1rem)]",
+          "w-max max-w-[calc(100vw-1rem)]",
           orientation === "horizontal" ? "flex flex-row flex-wrap items-center gap-2 px-2 py-1.5" : "flex flex-col items-start gap-2 px-1.5 py-2",
           className
         ),
         style: {
           [side]: `${sideOffset}px`,
-          ...align === "center" && {
-            left: "50%",
-            translate: "-50% 0"
-          },
-          ...align === "start" && { left: `${alignOffset}px` },
-          ...align === "end" && { right: `${alignOffset}px` },
+          ...horizontalPosition(align, alignOffset, anchorElement ? anchorBox : null),
           ...style
         },
         onFocus,
@@ -346,7 +391,13 @@ function ActionBarGroup(props) {
       ref: composedRef,
       className: cn(
         "flex gap-2 outline-none",
-        orientation === "horizontal" ? "items-center" : "w-full flex-col items-start",
+        /*
+         * ⚠ `flex-wrap` (3.3.0): thanh xuống dòng ở màn hẹp (2.1.0) nhưng NHÓM thì không — nó là một
+         * mục flex duy nhất của thanh, nên bốn nút nằm cứng trên một hàng. Đo ở 375px: nhóm 387px
+         * trong thanh 359px, nút cuối thò ra tới x = 404, ngoài màn hình. Xuống dòng chứ không cuộn
+         * ngang — cùng lý do với thanh: vùng cuộn cắt mất vòng focus của nút ở mép.
+         */
+        orientation === "horizontal" ? "flex-wrap items-center" : "w-full flex-col items-start",
         className
       ),
       onBlur,