@comitor/ui 0.1.0

package/dist/components/composite/command-palette.js

@@ -0,0 +1,131 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from "cmdk";
+import { Loader2, Search } from "lucide-react";
+import { useEffect, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from "../ui/command.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../ui/dialog.js";
+import { KeyboardHint } from "./keyboard-hint.js";
+import { removeVietnameseTones } from "./text-utils.js";
+function PaletteInput({
+  value,
+  onValueChange,
+  placeholder,
+  loading
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-12 items-center gap-2 border-b border-border px-3", children: [
+    loading ? /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 shrink-0 animate-spin text-muted-foreground" }) : /* @__PURE__ */ jsx(Search, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsx(
+      CommandPrimitive.Input,
+      {
+        value,
+        onValueChange,
+        placeholder,
+        "aria-label": placeholder,
+        className: "flex h-11 w-full bg-transparent text-sm outline-hidden placeholder:text-muted-foreground"
+      }
+    ),
+    /* @__PURE__ */ jsx(KeyboardHint, { keys: "esc", className: "hidden sm:inline-flex" })
+  ] });
+}
+function PaletteRow({ item }) {
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "block truncate", children: item.label }),
+      item.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: item.description })
+    ] }),
+    item.shortcut && /* @__PURE__ */ jsx(KeyboardHint, { keys: item.shortcut, className: "ml-auto" })
+  ] });
+}
+function CommandPalette({
+  open,
+  onOpenChange,
+  groups,
+  recent = [],
+  recentLabel = "G\u1EA7n \u0111\xE2y",
+  placeholder = "T\xECm l\u1EC7nh, trang, ng\u01B0\u1EDDi\u2026",
+  emptyText = "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3.",
+  onSearchChange,
+  loading = false,
+  footer,
+  registerShortcut = true,
+  className
+}) {
+  const [search, setSearch] = useState("");
+  const isAsync = onSearchChange !== void 0;
+  useEffect(() => {
+    if (!open) setSearch("");
+  }, [open]);
+  useEffect(() => {
+    if (!registerShortcut) return;
+    const onKeyDown = (event) => {
+      if (event.key !== "k" || !(event.metaKey || event.ctrlKey)) return;
+      event.preventDefault();
+      onOpenChange(!open);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [registerShortcut, open, onOpenChange]);
+  const handleSearch = (value) => {
+    setSearch(value);
+    onSearchChange?.(value);
+  };
+  const runItem = (item) => {
+    if (item.disabled) return;
+    onOpenChange(false);
+    item.onSelect();
+  };
+  const showRecent = recent.length > 0 && search.trim() === "";
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { size: "lg", showCloseButton: false, className: cn("overflow-hidden p-0", className), children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "B\u1EA3ng l\u1EC7nh" }),
+    /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: "G\xF5 \u0111\u1EC3 t\xECm l\u1EC7nh, trang ho\u1EB7c ng\u01B0\u1EDDi; d\xF9ng m\u0169i t\xEAn \u0111\u1EC3 ch\u1ECDn v\xE0 Enter \u0111\u1EC3 ch\u1EA1y." }),
+    /* @__PURE__ */ jsxs(
+      Command,
+      {
+        shouldFilter: !isAsync,
+        filter: (value, query, keywords) => {
+          if (!query) return 1;
+          const haystack = removeVietnameseTones(`${value} ${keywords?.join(" ") ?? ""}`).toLowerCase();
+          return haystack.includes(removeVietnameseTones(query).toLowerCase()) ? 1 : 0;
+        },
+        className: "bg-transparent",
+        children: [
+          /* @__PURE__ */ jsx(PaletteInput, { value: search, onValueChange: handleSearch, placeholder, loading }),
+          /* @__PURE__ */ jsxs(CommandList, { className: "max-h-[22rem]", children: [
+            !loading && /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+            showRecent && /* @__PURE__ */ jsx(CommandGroup, { heading: recentLabel, children: recent.map((item) => /* @__PURE__ */ jsx(
+              CommandItem,
+              {
+                value: `recent-${item.id}`,
+                keywords: [item.label, item.description ?? "", ...item.keywords ?? []],
+                disabled: item.disabled,
+                onSelect: () => runItem(item),
+                children: /* @__PURE__ */ jsx(PaletteRow, { item })
+              },
+              `recent-${item.id}`
+            )) }),
+            groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map((item) => /* @__PURE__ */ jsx(
+              CommandItem,
+              {
+                value: item.id,
+                keywords: [item.label, item.description ?? "", ...item.keywords ?? []],
+                disabled: item.disabled,
+                onSelect: () => runItem(item),
+                children: /* @__PURE__ */ jsx(PaletteRow, { item })
+              },
+              item.id
+            )) }, group.id))
+          ] }),
+          footer && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 border-t border-border px-3 py-2 text-xs text-muted-foreground", children: footer })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  CommandPalette
+};
+//# sourceMappingURL=command-palette.js.map

package/dist/components/composite/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/command-palette.tsx"],"sourcesContent":["\"use client\";\n\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { Loader2, Search } from \"lucide-react\";\nimport { type ReactNode, useEffect, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from \"../ui/command.js\";\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"../ui/dialog.js\";\nimport type { IconComponent } from \"./empty-state.js\";\nimport { KeyboardHint } from \"./keyboard-hint.js\";\nimport { removeVietnameseTones } from \"./text-utils.js\";\n\nexport interface CommandPaletteItem {\n  id: string;\n  label: string;\n  /** Dòng phụ mờ (đường dẫn, mô tả ngắn, tên workspace) */\n  description?: string;\n  icon?: IconComponent;\n  /** Gợi ý phím tắt hiện bên phải, vd \"mod+shift+n\" */\n  shortcut?: string;\n  /** Từ khoá phụ để tìm ra mục (tên tiếng Anh, viết tắt, mã) */\n  keywords?: string[];\n  disabled?: boolean;\n  onSelect: () => void;\n}\n\nexport interface CommandPaletteGroup {\n  id: string;\n  label?: string;\n  items: CommandPaletteItem[];\n}\n\nexport interface CommandPaletteProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  groups: CommandPaletteGroup[];\n  /** Nhóm \"Gần đây\" luôn nằm trên cùng khi chưa gõ gì */\n  recent?: CommandPaletteItem[];\n  recentLabel?: string;\n  placeholder?: string;\n  emptyText?: string;\n  /** Có mặt = app tự tìm (gọi API) → tắt lọc nội bộ của cmdk */\n  onSearchChange?: (search: string) => void;\n  loading?: boolean;\n  /** Nội dung chân bảng (gợi ý phím, trạng thái) */\n  footer?: ReactNode;\n  /**\n   * Tự gắn phím tắt Cmd/Ctrl+K để mở (mặc định true).\n   *\n   * Shell của Comitor cũng gắn phím tắt này; khi dùng trong shell hãy đặt `false` để tránh\n   * hai listener cùng lật một state (mở rồi đóng ngay trong một lần bấm).\n   */\n  registerShortcut?: boolean;\n  className?: string;\n}\n\n/**\n * Ô nhập của palette — dựng thẳng trên `cmdk` thay vì dùng `CommandInput` của tầng primitive.\n *\n * Lý do: cần thay icon kính lúp bằng vòng xoay khi đang tìm phía server, và cần chỗ đặt gợi ý\n * phím Esc bên phải — `CommandInput` khoá cứng cả hai chi tiết đó.\n */\nfunction PaletteInput({\n  value,\n  onValueChange,\n  placeholder,\n  loading\n}: {\n  value: string;\n  onValueChange: (value: string) => void;\n  placeholder: string;\n  loading: boolean;\n}) {\n  return (\n    <div className=\"flex h-12 items-center gap-2 border-b border-border px-3\">\n      {loading ? (\n        <Loader2 aria-hidden=\"true\" className=\"size-4 shrink-0 animate-spin text-muted-foreground\" />\n      ) : (\n        <Search aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />\n      )}\n      <CommandPrimitive.Input\n        value={value}\n        onValueChange={onValueChange}\n        placeholder={placeholder}\n        aria-label={placeholder}\n        className=\"flex h-11 w-full bg-transparent text-sm outline-hidden placeholder:text-muted-foreground\"\n      />\n      <KeyboardHint keys=\"esc\" className=\"hidden sm:inline-flex\" />\n    </div>\n  );\n}\n\nfunction PaletteRow({ item }: { item: CommandPaletteItem }) {\n  const Icon = item.icon;\n  return (\n    <>\n      {Icon && <Icon aria-hidden=\"true\" className=\"size-4 shrink-0 text-muted-foreground\" />}\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block truncate\">{item.label}</span>\n        {item.description && <span className=\"block truncate text-xs text-muted-foreground\">{item.description}</span>}\n      </span>\n      {item.shortcut && <KeyboardHint keys={item.shortcut} className=\"ml-auto\" />}\n    </>\n  );\n}\n\n/**\n * Bảng lệnh (Cmd/Ctrl+K) — điều hướng nhanh và chạy lệnh, kiểu Linear/Raycast.\n *\n * Đặt ở tầng composite (không phải trong shell) vì app không dùng `AppShell` — trang cài đặt\n * độc lập, công cụ nội bộ — vẫn cần bảng lệnh. Shell chỉ giữ state mở/đóng và truyền xuống.\n *\n * Tìm kiếm mặc định KHÔNG DẤU tiếng Việt: gõ \"tao viec\" ra \"Tạo việc mới\".\n */\nexport function CommandPalette({\n  open,\n  onOpenChange,\n  groups,\n  recent = [],\n  recentLabel = \"Gần đây\",\n  placeholder = \"Tìm lệnh, trang, người…\",\n  emptyText = \"Không tìm thấy kết quả.\",\n  onSearchChange,\n  loading = false,\n  footer,\n  registerShortcut = true,\n  className\n}: CommandPaletteProps) {\n  const [search, setSearch] = useState(\"\");\n  const isAsync = onSearchChange !== undefined;\n\n  // Reset ô tìm mỗi lần mở: mở lại palette mà còn nguyên từ khoá cũ là hành vi gây bất ngờ.\n  useEffect(() => {\n    if (!open) setSearch(\"\");\n  }, [open]);\n\n  useEffect(() => {\n    if (!registerShortcut) return;\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key !== \"k\" || !(event.metaKey || event.ctrlKey)) return;\n      event.preventDefault();\n      onOpenChange(!open);\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [registerShortcut, open, onOpenChange]);\n\n  const handleSearch = (value: string) => {\n    setSearch(value);\n    onSearchChange?.(value);\n  };\n\n  const runItem = (item: CommandPaletteItem) => {\n    if (item.disabled) return;\n    onOpenChange(false);\n    item.onSelect();\n  };\n\n  const showRecent = recent.length > 0 && search.trim() === \"\";\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent size=\"lg\" showCloseButton={false} className={cn(\"overflow-hidden p-0\", className)}>\n        <DialogTitle className=\"sr-only\">Bảng lệnh</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Gõ để tìm lệnh, trang hoặc người; dùng mũi tên để chọn và Enter để chạy.\n        </DialogDescription>\n\n        <Command\n          shouldFilter={!isAsync}\n          filter={(value, query, keywords) => {\n            if (!query) return 1;\n            const haystack = removeVietnameseTones(`${value} ${keywords?.join(\" \") ?? \"\"}`).toLowerCase();\n            return haystack.includes(removeVietnameseTones(query).toLowerCase()) ? 1 : 0;\n          }}\n          className=\"bg-transparent\"\n        >\n          <PaletteInput value={search} onValueChange={handleSearch} placeholder={placeholder} loading={loading} />\n\n          <CommandList className=\"max-h-[22rem]\">\n            {!loading && <CommandEmpty>{emptyText}</CommandEmpty>}\n\n            {showRecent && (\n              <CommandGroup heading={recentLabel}>\n                {recent.map((item) => (\n                  <CommandItem\n                    key={`recent-${item.id}`}\n                    value={`recent-${item.id}`}\n                    keywords={[item.label, item.description ?? \"\", ...(item.keywords ?? [])]}\n                    disabled={item.disabled}\n                    onSelect={() => runItem(item)}\n                  >\n                    <PaletteRow item={item} />\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            )}\n\n            {groups.map((group) => (\n              <CommandGroup key={group.id} heading={group.label}>\n                {group.items.map((item) => (\n                  <CommandItem\n                    key={item.id}\n                    value={item.id}\n                    keywords={[item.label, item.description ?? \"\", ...(item.keywords ?? [])]}\n                    disabled={item.disabled}\n                    onSelect={() => runItem(item)}\n                  >\n                    <PaletteRow item={item} />\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            ))}\n          </CommandList>\n\n          {footer && (\n            <div className=\"flex items-center gap-2 border-t border-border px-3 py-2 text-xs text-muted-foreground\">\n              {footer}\n            </div>\n          )}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/composite/confirm-dialog.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { IconComponent } from './empty-state.js';
+
+interface ConfirmDialogProps {
+    /** Controlled — bỏ trống thì dialog tự quản trạng thái mở (dùng kèm `trigger`) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Phần tử mở dialog (đặt trong `AlertDialogTrigger asChild`) */
+    trigger?: ReactNode;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Nội dung phụ (danh sách bản ghi sẽ bị ảnh hưởng, ô nhập lý do…) */
+    children?: ReactNode;
+    icon?: IconComponent;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** "destructive" tô nút xác nhận màu đỏ — dùng cho xoá/thu hồi */
+    variant?: "default" | "destructive";
+    /**
+     * 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
+     * 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
+     * bấm xoá hai lần.
+     */
+    onConfirm: () => void | Promise<void>;
+    /** Khoá nút xác nhận (vd chưa gõ đúng tên bản ghi cần xoá) */
+    confirmDisabled?: boolean;
+    /** Nhận lỗi từ `onConfirm` để app hiện toast; không truyền thì lỗi được ghi ra console */
+    onError?: (error: unknown) => void;
+    className?: string;
+}
+/**
+ * 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).
+ *
+ * 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 xử lý…" khi `onConfirm` bất đồng bộ, và lỗi ném ra sẽ giữ dialog mở để người dùng thử lại.
+ */
+declare function ConfirmDialog({ open, onOpenChange, trigger, title, description, children, icon: Icon, confirmLabel, cancelLabel, variant, onConfirm, confirmDisabled, onError, className }: ConfirmDialogProps): React.JSX.Element;
+
+export { ConfirmDialog, type ConfirmDialogProps };

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from "../ui/alert-dialog.js";
+import { buttonVariants } from "../ui/button.js";
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  children,
+  icon: Icon,
+  confirmLabel = "X\xE1c nh\u1EADn",
+  cancelLabel = "H\u1EE7y",
+  variant = "default",
+  onConfirm,
+  confirmDisabled = false,
+  onError,
+  className
+}) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [pending, setPending] = useState(false);
+  const isOpen = open ?? internalOpen;
+  const setOpen = (next) => {
+    if (pending && !next) return;
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const handleConfirm = async () => {
+    try {
+      setPending(true);
+      await onConfirm();
+      setPending(false);
+      if (open === void 0) setInternalOpen(false);
+      onOpenChange?.(false);
+    } catch (error) {
+      setPending(false);
+      if (onError) onError(error);
+      else console.error("[ConfirmDialog] onConfirm th\u1EA5t b\u1EA1i:", error);
+    }
+  };
+  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" : "bg-muted text-muted-foreground"
+            ),
+            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 ? "\u0110ang x\u1EED l\xFD\u2026" : confirmLabel
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  ConfirmDialog
+};
+//# sourceMappingURL=confirm-dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/confirm-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState } from \"react\";\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  confirmLabel?: string;\n  cancelLabel?: 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\n * \"Đang xử lý…\" khi `onConfirm` bất đồng bộ, và lỗi ném ra sẽ giữ dialog mở để 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 = \"Xác nhận\",\n  cancelLabel = \"Hủy\",\n  variant = \"default\",\n  onConfirm,\n  confirmDisabled = false,\n  onError,\n  className\n}: ConfirmDialogProps) {\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                className={cn(\n                  \"flex size-9 shrink-0 items-center justify-center rounded-md\",\n                  variant === \"destructive\" ? \"bg-destructive/15 text-destructive\" : \"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 ? \"Đang xử lý…\" : confirmLabel}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";AAmGkB,cAeN,YAfM;AAjGlB,SAAyB,gBAAgB;AACzC,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;AAuCxB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAuB;AACrB,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,YACZ,WAAW;AAAA,cACT;AAAA,cACA,YAAY,gBAAgB,uCAAuC;AAAA,YACrE;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,kCAAgB;AAAA;AAAA,QAC7B;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/composite/copy-button.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { ButtonProps } from '../ui/button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+interface CopyButtonProps extends Omit<ButtonProps, "children" | "onCopy"> {
+    /** Nội dung được chép vào clipboard */
+    value: string;
+    /** Nhãn khi chưa chép (mặc định "Sao chép"). `null` = chỉ icon. */
+    label?: string | null;
+    /** Nhãn sau khi chép thành công */
+    copiedLabel?: string;
+    /** Thời gian giữ trạng thái "đã chép" (ms) */
+    resetAfterMs?: number;
+    onCopied?: (value: string) => void;
+    onCopyError?: (error: unknown) => void;
+}
+/**
+ * Chép giá trị vào clipboard kèm phản hồi thị giác.
+ *
+ * Có đường lui khi `navigator.clipboard` không dùng được (trang http không phải localhost,
+ * WebView cũ): tạo textarea ẩn rồi `execCommand("copy")`. Thiếu đường lui này thì nút im lặng
+ * không làm gì — người dùng tưởng đã chép và dán ra nội dung cũ.
+ */
+declare function CopyButton({ value, label, copiedLabel, resetAfterMs, onCopied, onCopyError, variant, size, className, ...props }: CopyButtonProps): React.JSX.Element;
+
+export { CopyButton, type CopyButtonProps };

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

@@ -0,0 +1,80 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../ui/button.js";
+function CopyButton({
+  value,
+  label = "Sao ch\xE9p",
+  copiedLabel = "\u0110\xE3 ch\xE9p",
+  resetAfterMs = 2e3,
+  onCopied,
+  onCopyError,
+  variant = "ghost",
+  size = "sm",
+  className,
+  ...props
+}) {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const writeFallback = (text) => {
+    try {
+      const textarea = document.createElement("textarea");
+      textarea.value = text;
+      textarea.setAttribute("readonly", "");
+      textarea.style.position = "fixed";
+      textarea.style.opacity = "0";
+      document.body.appendChild(textarea);
+      textarea.select();
+      const ok = document.execCommand("copy");
+      document.body.removeChild(textarea);
+      return ok;
+    } catch {
+      return false;
+    }
+  };
+  const copy = async () => {
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(value);
+      } else if (!writeFallback(value)) {
+        throw new Error("Tr\xECnh duy\u1EC7t kh\xF4ng cho ph\xE9p ghi clipboard");
+      }
+      setCopied(true);
+      onCopied?.(value);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), resetAfterMs);
+    } catch (error) {
+      onCopyError?.(error);
+    }
+  };
+  const Icon = copied ? Check : Copy;
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant,
+      size,
+      onClick: () => void copy(),
+      "aria-label": label ?? (copied ? copiedLabel : "Sao ch\xE9p"),
+      className: cn("gap-1.5", copied && "text-success", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+        label !== null && /* @__PURE__ */ jsx("span", { children: copied ? copiedLabel : label }),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: copied ? copiedLabel : "" })
+      ]
+    }
+  );
+}
+export {
+  CopyButton
+};
+//# sourceMappingURL=copy-button.js.map

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

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

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

@@ -0,0 +1,136 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+type SortDirection = "asc" | "desc";
+interface DataTableSort {
+    columnId: string;
+    direction: SortDirection;
+}
+type DataTableAlign = "left" | "center" | "right";
+/**
+ * Toàn bộ chuỗi hiển thị (kể cả chuỗi dành riêng cho trình đọc màn hình) của `DataTable` và
+ * `DataTableColumnToggle` — app tiếng Anh (hoặc ngôn ngữ khác) override từng khoá qua prop
+ * `labels`. Mặc định là tiếng Việt.
+ *
+ * Cùng khuôn với `ShellLabels` ở tầng shell: gói dùng chung cho MỌI app Comitor nên chuỗi
+ * chôn cứng trong component là ngõ cụt cho app đa ngôn ngữ.
+ */
+interface DataTableLabels {
+    /** aria-label ô chọn ở đầu bảng khi CHƯA chọn hết */
+    selectAllRows: string;
+    /** aria-label ô chọn ở đầu bảng khi ĐÃ chọn hết */
+    deselectAllRows: string;
+    /** aria-label ô chọn của một dòng khi dòng chưa được chọn */
+    selectRow: string;
+    /** aria-label ô chọn của một dòng khi dòng đã được chọn */
+    deselectRow: string;
+    /** Tiêu đề trạng thái rỗng mặc định (bỏ qua nếu app truyền `empty`) */
+    emptyTitle: string;
+    /** Mô tả trạng thái rỗng mặc định */
+    emptyDescription: string;
+    /** Nhãn nút + tiêu đề menu ẩn/hiện cột */
+    columnToggle: string;
+}
+/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */
+declare const DEFAULT_DATA_TABLE_LABELS: DataTableLabels;
+interface DataTableColumn<TRow> {
+    id: string;
+    /** Nội dung ô tiêu đề */
+    header: ReactNode;
+    /** Nhãn chữ dùng trong menu ẩn/hiện cột — bắt buộc khi `header` không phải chuỗi */
+    label?: string;
+    /** Render ô dữ liệu — nhận cả chỉ số dòng để đánh số thứ tự */
+    cell: (row: TRow, rowIndex: number) => ReactNode;
+    sortable?: boolean;
+    align?: DataTableAlign;
+    /**
+     * Bề rộng cột tính bằng px. BẮT BUỘC với cột ghim (`pinned`) vì offset `left/right` của
+     * sticky được tính cộng dồn từ giá trị này — thiếu width thì các cột ghim chồng lên nhau.
+     */
+    width?: number;
+    minWidth?: number;
+    /** Ghim cột khi cuộn ngang (bảng nhiều cột) */
+    pinned?: "left" | "right";
+    /** Cho phép người dùng ẩn cột này (mặc định true; cột định danh nên đặt false) */
+    hideable?: boolean;
+    headerClassName?: string;
+    cellClassName?: string;
+}
+interface DataTableProps<TRow> {
+    columns: DataTableColumn<TRow>[];
+    rows: TRow[];
+    /** Khoá ổn định của dòng — dùng cho `key` React và cho tập chọn */
+    getRowId: (row: TRow, index: number) => string;
+    /** Đang tải → hiện `loadingRowCount` dòng khung xương thay vì bảng trống */
+    loading?: boolean;
+    loadingRowCount?: number;
+    /** Nội dung khi không có dòng nào (mặc định EmptyState theo `labels.emptyTitle`) */
+    empty?: ReactNode;
+    /** Sắp xếp — controlled; `null` = không sắp xếp. App tự sắp/tự gọi API. */
+    sort?: DataTableSort | null;
+    onSortChange?: (sort: DataTableSort | null) => void;
+    /** Chọn dòng bằng checkbox — controlled */
+    selectable?: boolean;
+    selectedIds?: string[];
+    onSelectedIdsChange?: (ids: string[]) => void;
+    /** Khoá chọn với một số dòng (vd bản ghi đã khoá) */
+    isRowSelectable?: (row: TRow, index: number) => boolean;
+    /**
+     * Cột đang hiện — controlled. Đổi bố cục đi qua `DataTableColumnToggle`, app tự lưu theo
+     * người dùng (server, localStorage…).
+     *
+     * Package cố ý KHÔNG tự ghi localStorage: ở SaaS nhiều workspace, bố cục bảng phải theo
+     * cặp (người dùng × workspace) và thường cần đồng bộ giữa các máy — chuyện của app.
+     */
+    visibleColumns?: string[];
+    /**
+     * Bấm vào dòng (vd mở chi tiết bản ghi). Có prop này thì dòng vào chuỗi Tab và nhận
+     * Enter/Space — mở chi tiết KHÔNG được là thao tác chỉ-chuột.
+     */
+    onRowClick?: (row: TRow, index: number) => void;
+    rowClassName?: (row: TRow, index: number) => string | undefined;
+    /** Dòng đang được làm nổi (vd bản ghi vừa mở ở panel bên) */
+    isRowActive?: (row: TRow, index: number) => boolean;
+    /** Tiêu đề dính đỉnh vùng cuộn (mặc định true) */
+    stickyHeader?: boolean;
+    /** Bề rộng tối thiểu của bảng — bật cuộn ngang khi màn hình hẹp */
+    minWidth?: number | string;
+    density?: "comfortable" | "compact";
+    /** Ghi đè chuỗi hiển thị/a11y (mặc định tiếng Việt) — xem `DataTableLabels` */
+    labels?: Partial<DataTableLabels>;
+    /** Nhãn của bảng cho trình đọc màn hình (bắt buộc khi trang có nhiều bảng) */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    className?: string;
+    /** className của khung cuộn bọc ngoài */
+    containerClassName?: string;
+}
+/**
+ * Bảng dữ liệu chuẩn của Comitor: tiêu đề dính, sắp xếp, chọn dòng, ghim cột, ẩn/hiện cột,
+ * trạng thái tải và trạng thái rỗng.
+ *
+ * Mọi trạng thái đều **controlled** — package không giữ dữ liệu, không gọi API, không tự phân
+ * trang. Nhờ vậy dùng được cả với dữ liệu client (mảng trong bộ nhớ) lẫn server-side
+ * pagination mà không phải viết hai component.
+ */
+declare function DataTable<TRow>({ columns, rows, getRowId, loading, loadingRowCount, empty, sort, onSortChange, selectable, selectedIds, onSelectedIdsChange, isRowSelectable, visibleColumns, onRowClick, rowClassName, isRowActive, stickyHeader, minWidth, density, labels: labelsProp, className, containerClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby }: DataTableProps<TRow>): React.JSX.Element;
+interface DataTableColumnToggleProps<TRow> {
+    columns: DataTableColumn<TRow>[];
+    /** Danh sách cột đang hiện — cùng nguồn với `DataTable.visibleColumns` */
+    visibleColumns: string[];
+    onVisibleColumnsChange: (visibleColumns: string[]) => void;
+    /** Nhãn nút + tiêu đề menu; không truyền thì lấy `labels.columnToggle` */
+    label?: string;
+    /** Ghi đè chuỗi hiển thị (mặc định tiếng Việt) — xem `DataTableLabels` */
+    labels?: Partial<DataTableLabels>;
+    className?: string;
+}
+/**
+ * Menu ẩn/hiện cột đi kèm `DataTable` (đặt trên thanh công cụ của trang danh sách).
+ *
+ * Không cho ẩn hết: luôn giữ lại ít nhất một cột, nếu không bảng thành khối trắng vô nghĩa
+ * và người dùng không có đường quay lại.
+ */
+declare function DataTableColumnToggle<TRow>({ columns, visibleColumns, onVisibleColumnsChange, label, labels: labelsProp, className }: DataTableColumnToggleProps<TRow>): React.JSX.Element;
+
+export { DEFAULT_DATA_TABLE_LABELS, DataTable, type DataTableAlign, type DataTableColumn, DataTableColumnToggle, type DataTableColumnToggleProps, type DataTableLabels, type DataTableProps, type DataTableSort, type SortDirection };