@comitor/ui 0.1.0

package/dist/components/composite/avatar-group.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
+import { LetterAvatar } from "./letter-avatar.js";
+const overflowSizeClasses = {
+  xs: "size-6 text-[10px]",
+  sm: "size-7 text-xs",
+  md: "size-9 text-xs",
+  lg: "size-11 text-sm",
+  xl: "size-14 text-base"
+};
+function AvatarGroup({
+  items,
+  max = 4,
+  size = "sm",
+  onOverflowClick,
+  label = "Th\xE0nh vi\xEAn",
+  className,
+  ...props
+}) {
+  const visible = items.slice(0, Math.max(0, max));
+  const overflow = items.length - visible.length;
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "avatar-group",
+      role: "group",
+      "aria-label": label,
+      className: cn("flex items-center -space-x-2", className),
+      ...props,
+      children: [
+        visible.map((item) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "rounded-full ring-2 ring-background transition-transform hover:z-10 hover:-translate-y-0.5 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+              children: /* @__PURE__ */ jsx(LetterAvatar, { name: item.name, src: item.src, size, title: void 0 })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(TooltipContent, { children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: item.name }),
+            item.caption && /* @__PURE__ */ jsx("span", { className: "block text-xs opacity-80", children: item.caption })
+          ] })
+        ] }, item.id)),
+        overflow > 0 && (onOverflowClick ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onOverflowClick,
+            className: cn(
+              "z-10 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background transition-colors hover:bg-accent hover:text-accent-foreground",
+              overflowSizeClasses[size]
+            ),
+            children: [
+              "+",
+              overflow,
+              /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                "Xem t\u1EA5t c\u1EA3 ",
+                items.length,
+                " th\xE0nh vi\xEAn"
+              ] })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "z-10 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background",
+              overflowSizeClasses[size]
+            ),
+            children: [
+              "+",
+              overflow
+            ]
+          }
+        ))
+      ]
+    }
+  ) });
+}
+export {
+  AvatarGroup
+};
+//# sourceMappingURL=avatar-group.js.map

package/dist/components/composite/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/avatar-group.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../ui/tooltip.js\";\nimport { LetterAvatar, type LetterAvatarSize } from \"./letter-avatar.js\";\n\nexport interface AvatarGroupItem {\n  id: string;\n  name: string;\n  src?: string | null;\n  /** Dòng phụ trong tooltip (vd email, vai trò) */\n  caption?: string;\n}\n\nexport interface AvatarGroupProps extends Omit<ComponentProps<\"div\">, \"children\"> {\n  items: AvatarGroupItem[];\n  /** Số avatar hiện tối đa; phần dư gộp vào ô \"+k\" (mặc định 4) */\n  max?: number;\n  size?: LetterAvatarSize;\n  /** Bấm vào ô \"+k\" — vd mở danh sách đầy đủ */\n  onOverflowClick?: () => void;\n  /** Nhãn của cả nhóm cho trình đọc màn hình (mặc định \"Thành viên\") */\n  label?: string;\n}\n\nconst overflowSizeClasses: Record<LetterAvatarSize, string> = {\n  xs: \"size-6 text-[10px]\",\n  sm: \"size-7 text-xs\",\n  md: \"size-9 text-xs\",\n  lg: \"size-11 text-sm\",\n  xl: \"size-14 text-base\"\n};\n\n/**\n * Chồng avatar + ô \"+k\" — dùng cho người thực hiện (Tasks), người tham gia (Chat), người theo dõi (CRM).\n *\n * Tooltip hiện tên đầy đủ vì avatar chồng nhau thì initials bị che một phần; không có tooltip\n * thì nhóm avatar chỉ là trang trí, người dùng không biết ai đang ở trong việc.\n *\n * Mỗi avatar là một nút focusable (Tab tới được) và mang tên thành viên cho trình đọc màn hình\n * — xem chú thích ở trigger bên dưới.\n */\nexport function AvatarGroup({\n  items,\n  max = 4,\n  size = \"sm\",\n  onOverflowClick,\n  label = \"Thành viên\",\n  className,\n  ...props\n}: AvatarGroupProps) {\n  const visible = items.slice(0, Math.max(0, max));\n  const overflow = items.length - visible.length;\n\n  return (\n    <TooltipProvider delayDuration={200}>\n      <div\n        data-slot=\"avatar-group\"\n        role=\"group\"\n        aria-label={label}\n        className={cn(\"flex items-center -space-x-2\", className)}\n        {...props}\n      >\n        {visible.map((item) => (\n          <Tooltip key={item.id}>\n            <TooltipTrigger asChild>\n              {/* Trigger phải FOCUSABLE: `<span>` thường chỉ nhận sự kiện chuột nên tooltip\n                  (và cả tên thành viên) biến mất với người dùng bàn phím. Nút không có\n                  onClick là chủ ý — nó chỉ mở tooltip; tên accessible lấy từ `sr-only`\n                  bên trong LetterAvatar nên không cần aria-label lặp lại. */}\n              <button\n                type=\"button\"\n                className=\"rounded-full ring-2 ring-background transition-transform hover:z-10 hover:-translate-y-0.5 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n              >\n                <LetterAvatar name={item.name} src={item.src} size={size} title={undefined} />\n              </button>\n            </TooltipTrigger>\n            <TooltipContent>\n              <span className=\"font-medium\">{item.name}</span>\n              {item.caption && <span className=\"block text-xs opacity-80\">{item.caption}</span>}\n            </TooltipContent>\n          </Tooltip>\n        ))}\n\n        {overflow > 0 &&\n          (onOverflowClick ? (\n            <button\n              type=\"button\"\n              onClick={onOverflowClick}\n              className={cn(\n                \"z-10 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background transition-colors hover:bg-accent hover:text-accent-foreground\",\n                overflowSizeClasses[size]\n              )}\n            >\n              +{overflow}\n              <span className=\"sr-only\">Xem tất cả {items.length} thành viên</span>\n            </button>\n          ) : (\n            <span\n              className={cn(\n                \"z-10 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 ring-background\",\n                overflowSizeClasses[size]\n              )}\n            >\n              +{overflow}\n            </span>\n          ))}\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"mappings":";AA2EgB,cAGJ,YAHI;AAxEhB,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,iBAAiB,sBAAsB;AACzE,SAAS,oBAA2C;AAqBpD,MAAM,sBAAwD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAWO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,GAAG,CAAC;AAC/C,QAAM,WAAW,MAAM,SAAS,QAAQ;AAExC,SACE,oBAAC,mBAAgB,eAAe,KAC9B;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACtD,GAAG;AAAA,MAEH;AAAA,gBAAQ,IAAI,CAAC,SACZ,qBAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MAKrB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cAEV,8BAAC,gBAAa,MAAM,KAAK,MAAM,KAAK,KAAK,KAAK,MAAY,OAAO,QAAW;AAAA;AAAA,UAC9E,GACF;AAAA,UACA,qBAAC,kBACC;AAAA,gCAAC,UAAK,WAAU,eAAe,eAAK,MAAK;AAAA,YACxC,KAAK,WAAW,oBAAC,UAAK,WAAU,4BAA4B,eAAK,SAAQ;AAAA,aAC5E;AAAA,aAhBY,KAAK,EAiBnB,CACD;AAAA,QAEA,WAAW,MACT,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAW;AAAA,cACT;AAAA,cACA,oBAAoB,IAAI;AAAA,YAC1B;AAAA,YACD;AAAA;AAAA,cACG;AAAA,cACF,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,gBAAY,MAAM;AAAA,gBAAO;AAAA,iBAAW;AAAA;AAAA;AAAA,QAChE,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,oBAAoB,IAAI;AAAA,YAC1B;AAAA,YACD;AAAA;AAAA,cACG;AAAA;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EAEN,GACF;AAEJ;","names":[]}

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

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { IconComponent } from './empty-state.js';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    /** Dòng phụ mờ dưới nhãn (vd email của người dùng, mã của khách hàng) */
+    description?: string;
+    icon?: IconComponent;
+    disabled?: boolean;
+    /** Nhãn nhóm — các mục cùng nhóm được gom lại và có tiêu đề nhóm */
+    group?: string;
+    /** Từ khoá phụ để tìm ra mục này (vd mã số, tên viết tắt) */
+    keywords?: string[];
+}
+interface ComboboxSharedProps {
+    options: ComboboxOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    /**
+     * Có mặt = chế độ BẤT ĐỒNG BỘ: tắt lọc nội bộ của cmdk, app tự lọc `options` (thường là gọi API).
+     * Không truyền = lọc tại chỗ, không dấu tiếng Việt.
+     */
+    onSearchChange?: (search: string) => void;
+    /** Đang tải kết quả (chỉ có nghĩa ở chế độ bất đồng bộ) */
+    loading?: boolean;
+    /** Cho phép xoá lựa chọn bằng nút X trên trigger */
+    clearable?: boolean;
+    className?: string;
+    /** className của panel popover (vd đặt bề rộng cố định) */
+    contentClassName?: string;
+    id?: string;
+    name?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: true;
+    "aria-required"?: true;
+}
+interface ComboboxProps extends ComboboxSharedProps {
+    /** Giá trị đang chọn; `null`/`undefined` = chưa chọn */
+    value?: string | null;
+    onValueChange: (value: string | null) => void;
+}
+interface MultiComboboxProps extends ComboboxSharedProps {
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    /** Số nhãn hiện trên trigger trước khi gộp thành "+k" (mặc định 2) */
+    maxDisplay?: number;
+    /** Giới hạn số lựa chọn; đạt ngưỡng thì các mục còn lại bị khoá */
+    maxSelected?: number;
+}
+/**
+ * Ô chọn một giá trị có tìm kiếm — cmdk trong Popover, rộng bằng trigger.
+ *
+ * Mặc định tìm KHÔNG DẤU tiếng Việt. Truyền `onSearchChange` để chuyển sang chế độ bất đồng bộ
+ * (app tự gọi API và cập nhật `options`).
+ */
+declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, onSearchChange, loading, clearable, className, contentClassName, id, name, ...aria }: ComboboxProps): React.JSX.Element;
+/**
+ * Ô chọn NHIỀU giá trị — cùng hạ tầng với `Combobox`, popover không tự đóng sau mỗi lần chọn.
+ *
+ * Trigger hiện tối đa `maxDisplay` nhãn rồi gộp phần dư thành "+k": danh sách 12 người thực hiện
+ * mà đổ hết ra trigger thì hàng form vỡ bố cục.
+ */
+declare function MultiCombobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, onSearchChange, loading, clearable, maxDisplay, maxSelected, className, contentClassName, id, name, ...aria }: MultiComboboxProps): React.JSX.Element;
+
+export { Combobox, type ComboboxOption, type ComboboxProps, MultiCombobox, type MultiComboboxProps };

package/dist/components/composite/combobox.js

@@ -0,0 +1,291 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown, Loader2, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Badge } from "../ui/badge.js";
+import { Button } from "../ui/button.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { removeVietnameseTones } from "./text-utils.js";
+function vietnameseFilter(value, search, keywords) {
+  if (!search) return 1;
+  const haystack = removeVietnameseTones(`${value} ${keywords?.join(" ") ?? ""}`).toLowerCase();
+  return haystack.includes(removeVietnameseTones(search).toLowerCase()) ? 1 : 0;
+}
+function groupOptions(options) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const key = option.group ?? "";
+    const bucket = groups.get(key);
+    if (bucket) bucket.push(option);
+    else groups.set(key, [option]);
+  }
+  return [...groups.entries()].map(([label, items]) => ({ label: label || void 0, items }));
+}
+function OptionRow({ option, selected }) {
+  const Icon = option.icon;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("flex size-4 shrink-0 items-center justify-center", !selected && "invisible"),
+        children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
+      }
+    ),
+    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: option.label }),
+      option.description && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-muted-foreground", children: option.description })
+    ] })
+  ] });
+}
+function useComboboxList(options, isAsync) {
+  const groups = useMemo(() => groupOptions(options), [options]);
+  return { groups, shouldFilter: !isAsync };
+}
+function ComboboxPanel({
+  options,
+  isAsync,
+  loading,
+  search,
+  onSearch,
+  searchPlaceholder,
+  emptyText,
+  renderItem
+}) {
+  const { groups, shouldFilter } = useComboboxList(options, isAsync);
+  return /* @__PURE__ */ jsxs(Command, { shouldFilter, filter: vietnameseFilter, children: [
+    /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, value: search, onValueChange: onSearch }),
+    /* @__PURE__ */ jsx(CommandList, { children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 animate-spin" }),
+      "\u0110ang t\u1EA3i\u2026"
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CommandEmpty, { children: emptyText }),
+      groups.map((group) => /* @__PURE__ */ jsx(CommandGroup, { heading: group.label, children: group.items.map(renderItem) }, group.label ?? "__default__"))
+    ] }) })
+  ] });
+}
+function Combobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Ch\u1ECDn\u2026",
+  searchPlaceholder = "T\xECm ki\u1EBFm\u2026",
+  emptyText = "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3.",
+  disabled = false,
+  onSearchChange,
+  loading = false,
+  clearable = false,
+  className,
+  contentClassName,
+  id,
+  name,
+  ...aria
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const isAsync = onSearchChange !== void 0;
+  const selected = options.find((option) => option.value === value);
+  const handleSearch = (next) => {
+    setSearch(next);
+    onSearchChange?.(next);
+  };
+  const showClear = clearable && Boolean(selected) && !disabled;
+  return (
+    /* Nút xóa là ANH EM của trigger, không nằm trong nó: <button> lồng <button> là HTML không
+       hợp lệ, và nếu hạ xuống <span role="button" tabIndex={-1}> thì người dùng bàn phím vĩnh
+       viễn không tới được nút xóa. Đặt tuyệt đối chồng lên phần đệm phải của trigger. */
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": open,
+            id,
+            name,
+            disabled,
+            className: cn(
+              "w-full justify-between gap-2 font-normal",
+              !selected && "text-muted-foreground",
+              showClear && "pr-12",
+              className
+            ),
+            ...aria,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: selected ? selected.label : placeholder }),
+              /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 opacity-50" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: cn("w-(--radix-popover-trigger-width) p-0", contentClassName), children: /* @__PURE__ */ jsx(
+          ComboboxPanel,
+          {
+            options,
+            isAsync,
+            loading,
+            search,
+            onSearch: handleSearch,
+            searchPlaceholder,
+            emptyText,
+            renderItem: (option) => /* @__PURE__ */ jsx(
+              CommandItem,
+              {
+                value: option.value,
+                keywords: [option.label, option.description ?? "", ...option.keywords ?? []],
+                disabled: option.disabled,
+                onSelect: () => {
+                  onValueChange(option.value === value ? null : option.value);
+                  setOpen(false);
+                  setSearch("");
+                  if (isAsync) onSearchChange?.("");
+                },
+                children: /* @__PURE__ */ jsx(OptionRow, { option, selected: option.value === value })
+              },
+              option.value
+            )
+          }
+        ) })
+      ] }),
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "X\xF3a l\u1EF1a ch\u1ECDn",
+          onClick: () => onValueChange(null),
+          className: "absolute right-8 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground",
+          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
+        }
+      )
+    ] })
+  );
+}
+function MultiCombobox({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Ch\u1ECDn\u2026",
+  searchPlaceholder = "T\xECm ki\u1EBFm\u2026",
+  emptyText = "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3.",
+  disabled = false,
+  onSearchChange,
+  loading = false,
+  clearable = true,
+  maxDisplay = 2,
+  maxSelected,
+  className,
+  contentClassName,
+  id,
+  name,
+  ...aria
+}) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const isAsync = onSearchChange !== void 0;
+  const selectedOptions = options.filter((option) => value.includes(option.value));
+  const shown = selectedOptions.slice(0, Math.max(1, maxDisplay));
+  const overflow = selectedOptions.length - shown.length;
+  const limitReached = maxSelected !== void 0 && value.length >= maxSelected;
+  const toggle = (optionValue) => {
+    if (value.includes(optionValue)) {
+      onValueChange(value.filter((item) => item !== optionValue));
+      return;
+    }
+    if (limitReached) return;
+    onValueChange([...value, optionValue]);
+  };
+  const handleSearch = (next) => {
+    setSearch(next);
+    onSearchChange?.(next);
+  };
+  const showClear = clearable && value.length > 0 && !disabled;
+  return (
+    // Cùng lý do như Combobox đơn: nút xóa là anh em của trigger để bấm được bằng bàn phím.
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+        /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            role: "combobox",
+            "aria-expanded": open,
+            id,
+            name,
+            disabled,
+            className: cn(
+              "h-auto min-h-9 w-full justify-between gap-2 py-1.5 font-normal",
+              value.length === 0 && "text-muted-foreground",
+              showClear && "pr-12",
+              className
+            ),
+            ...aria,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-wrap items-center gap-1", children: value.length === 0 ? placeholder : /* @__PURE__ */ jsxs(Fragment, { children: [
+                shown.map((option) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "max-w-[10rem]", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }) }, option.value)),
+                overflow > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "outline", children: [
+                  "+",
+                  overflow
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 opacity-50" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: cn("w-(--radix-popover-trigger-width) p-0", contentClassName), children: [
+          /* @__PURE__ */ jsx(
+            ComboboxPanel,
+            {
+              options,
+              isAsync,
+              loading,
+              search,
+              onSearch: handleSearch,
+              searchPlaceholder,
+              emptyText,
+              renderItem: (option) => {
+                const isSelected = value.includes(option.value);
+                return /* @__PURE__ */ jsx(
+                  CommandItem,
+                  {
+                    value: option.value,
+                    keywords: [option.label, option.description ?? "", ...option.keywords ?? []],
+                    disabled: option.disabled || limitReached && !isSelected,
+                    onSelect: () => toggle(option.value),
+                    children: /* @__PURE__ */ jsx(OptionRow, { option, selected: isSelected })
+                  },
+                  option.value
+                );
+              }
+            }
+          ),
+          maxSelected !== void 0 && /* @__PURE__ */ jsxs("p", { className: "border-t border-border px-3 py-2 text-xs text-muted-foreground", children: [
+            "\u0110\xE3 ch\u1ECDn ",
+            value.length,
+            "/",
+            maxSelected
+          ] })
+        ] })
+      ] }),
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "X\xF3a t\u1EA5t c\u1EA3 l\u1EF1a ch\u1ECDn",
+          onClick: () => onValueChange([]),
+          className: "absolute right-8 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground",
+          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" })
+        }
+      )
+    ] })
+  );
+}
+export {
+  Combobox,
+  MultiCombobox
+};
+//# sourceMappingURL=combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport { Check, ChevronsUpDown, Loader2, X } from \"lucide-react\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Badge } from \"../ui/badge.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"../ui/command.js\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../ui/popover.js\";\nimport type { IconComponent } from \"./empty-state.js\";\nimport { removeVietnameseTones } from \"./text-utils.js\";\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  /** Dòng phụ mờ dưới nhãn (vd email của người dùng, mã của khách hàng) */\n  description?: string;\n  icon?: IconComponent;\n  disabled?: boolean;\n  /** Nhãn nhóm — các mục cùng nhóm được gom lại và có tiêu đề nhóm */\n  group?: string;\n  /** Từ khoá phụ để tìm ra mục này (vd mã số, tên viết tắt) */\n  keywords?: string[];\n}\n\ninterface ComboboxSharedProps {\n  options: ComboboxOption[];\n  placeholder?: string;\n  searchPlaceholder?: string;\n  emptyText?: string;\n  disabled?: boolean;\n  /**\n   * Có mặt = chế độ BẤT ĐỒNG BỘ: tắt lọc nội bộ của cmdk, app tự lọc `options` (thường là gọi API).\n   * Không truyền = lọc tại chỗ, không dấu tiếng Việt.\n   */\n  onSearchChange?: (search: string) => void;\n  /** Đang tải kết quả (chỉ có nghĩa ở chế độ bất đồng bộ) */\n  loading?: boolean;\n  /** Cho phép xoá lựa chọn bằng nút X trên trigger */\n  clearable?: boolean;\n  className?: string;\n  /** className của panel popover (vd đặt bề rộng cố định) */\n  contentClassName?: string;\n  id?: string;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: true;\n  \"aria-required\"?: true;\n}\n\nexport interface ComboboxProps extends ComboboxSharedProps {\n  /** Giá trị đang chọn; `null`/`undefined` = chưa chọn */\n  value?: string | null;\n  onValueChange: (value: string | null) => void;\n}\n\nexport interface MultiComboboxProps extends ComboboxSharedProps {\n  value: string[];\n  onValueChange: (value: string[]) => void;\n  /** Số nhãn hiện trên trigger trước khi gộp thành \"+k\" (mặc định 2) */\n  maxDisplay?: number;\n  /** Giới hạn số lựa chọn; đạt ngưỡng thì các mục còn lại bị khoá */\n  maxSelected?: number;\n}\n\n/**\n * Lọc không dấu cho cmdk: so khớp cả value, label lẫn keywords.\n *\n * cmdk mặc định chấm điểm theo thuật toán riêng có phân biệt dấu — người Việt gõ \"nguyen\"\n * sẽ không ra \"Nguyễn\". Trả 1/0 là đủ vì thứ tự hiển thị đã theo thứ tự app truyền vào.\n */\nfunction vietnameseFilter(value: string, search: string, keywords?: string[]): number {\n  if (!search) return 1;\n  const haystack = removeVietnameseTones(`${value} ${keywords?.join(\" \") ?? \"\"}`).toLowerCase();\n  return haystack.includes(removeVietnameseTones(search).toLowerCase()) ? 1 : 0;\n}\n\n/** Gom mục theo `group`, giữ nguyên thứ tự xuất hiện đầu tiên của mỗi nhóm. */\nfunction groupOptions(options: ComboboxOption[]): Array<{ label: string | undefined; items: ComboboxOption[] }> {\n  const groups = new Map<string, ComboboxOption[]>();\n  for (const option of options) {\n    const key = option.group ?? \"\";\n    const bucket = groups.get(key);\n    if (bucket) bucket.push(option);\n    else groups.set(key, [option]);\n  }\n  return [...groups.entries()].map(([label, items]) => ({ label: label || undefined, items }));\n}\n\nfunction OptionRow({ option, selected }: { option: ComboboxOption; selected: boolean }) {\n  const Icon = option.icon;\n  return (\n    <>\n      <span\n        aria-hidden=\"true\"\n        className={cn(\"flex size-4 shrink-0 items-center justify-center\", !selected && \"invisible\")}\n      >\n        <Check className=\"size-4\" />\n      </span>\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\">{option.label}</span>\n        {option.description && (\n          <span className=\"block truncate text-xs text-muted-foreground\">{option.description}</span>\n        )}\n      </span>\n    </>\n  );\n}\n\nfunction useComboboxList(options: ComboboxOption[], isAsync: boolean) {\n  const groups = useMemo(() => groupOptions(options), [options]);\n  return { groups, shouldFilter: !isAsync };\n}\n\nfunction ComboboxPanel({\n  options,\n  isAsync,\n  loading,\n  search,\n  onSearch,\n  searchPlaceholder,\n  emptyText,\n  renderItem\n}: {\n  options: ComboboxOption[];\n  isAsync: boolean;\n  loading: boolean;\n  search: string;\n  onSearch: (value: string) => void;\n  searchPlaceholder: string;\n  emptyText: string;\n  renderItem: (option: ComboboxOption) => ReactNode;\n}) {\n  const { groups, shouldFilter } = useComboboxList(options, isAsync);\n\n  return (\n    <Command shouldFilter={shouldFilter} filter={vietnameseFilter}>\n      <CommandInput placeholder={searchPlaceholder} value={search} onValueChange={onSearch} />\n      <CommandList>\n        {loading ? (\n          <div className=\"flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground\">\n            <Loader2 aria-hidden=\"true\" className=\"size-4 animate-spin\" />\n            Đang tải…\n          </div>\n        ) : (\n          <>\n            <CommandEmpty>{emptyText}</CommandEmpty>\n            {groups.map((group) => (\n              <CommandGroup key={group.label ?? \"__default__\"} heading={group.label}>\n                {group.items.map(renderItem)}\n              </CommandGroup>\n            ))}\n          </>\n        )}\n      </CommandList>\n    </Command>\n  );\n}\n\n/**\n * Ô chọn một giá trị có tìm kiếm — cmdk trong Popover, rộng bằng trigger.\n *\n * Mặc định tìm KHÔNG DẤU tiếng Việt. Truyền `onSearchChange` để chuyển sang chế độ bất đồng bộ\n * (app tự gọi API và cập nhật `options`).\n */\nexport function Combobox({\n  options,\n  value,\n  onValueChange,\n  placeholder = \"Chọn…\",\n  searchPlaceholder = \"Tìm kiếm…\",\n  emptyText = \"Không tìm thấy kết quả.\",\n  disabled = false,\n  onSearchChange,\n  loading = false,\n  clearable = false,\n  className,\n  contentClassName,\n  id,\n  name,\n  ...aria\n}: ComboboxProps) {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const isAsync = onSearchChange !== undefined;\n  const selected = options.find((option) => option.value === value);\n\n  const handleSearch = (next: string) => {\n    setSearch(next);\n    onSearchChange?.(next);\n  };\n\n  const showClear = clearable && Boolean(selected) && !disabled;\n\n  return (\n    /* Nút xóa là ANH EM của trigger, không nằm trong nó: <button> lồng <button> là HTML không\n       hợp lệ, và nếu hạ xuống <span role=\"button\" tabIndex={-1}> thì người dùng bàn phím vĩnh\n       viễn không tới được nút xóa. Đặt tuyệt đối chồng lên phần đệm phải của trigger. */\n    <div className=\"relative w-full\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            id={id}\n            name={name}\n            disabled={disabled}\n            className={cn(\n              \"w-full justify-between gap-2 font-normal\",\n              !selected && \"text-muted-foreground\",\n              showClear && \"pr-12\",\n              className\n            )}\n            {...aria}\n          >\n            <span className=\"truncate\">{selected ? selected.label : placeholder}</span>\n            <ChevronsUpDown aria-hidden=\"true\" className=\"size-4 shrink-0 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className={cn(\"w-(--radix-popover-trigger-width) p-0\", contentClassName)}>\n          <ComboboxPanel\n            options={options}\n            isAsync={isAsync}\n            loading={loading}\n            search={search}\n            onSearch={handleSearch}\n            searchPlaceholder={searchPlaceholder}\n            emptyText={emptyText}\n            renderItem={(option) => (\n              <CommandItem\n                key={option.value}\n                value={option.value}\n                keywords={[option.label, option.description ?? \"\", ...(option.keywords ?? [])]}\n                disabled={option.disabled}\n                onSelect={() => {\n                  onValueChange(option.value === value ? null : option.value);\n                  setOpen(false);\n                  setSearch(\"\");\n                  if (isAsync) onSearchChange?.(\"\");\n                }}\n              >\n                <OptionRow option={option} selected={option.value === value} />\n              </CommandItem>\n            )}\n          />\n        </PopoverContent>\n      </Popover>\n\n      {showClear && (\n        <button\n          type=\"button\"\n          aria-label=\"Xóa lựa chọn\"\n          onClick={() => onValueChange(null)}\n          className=\"absolute right-8 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground\"\n        >\n          <X aria-hidden=\"true\" className=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\n/**\n * Ô chọn NHIỀU giá trị — cùng hạ tầng với `Combobox`, popover không tự đóng sau mỗi lần chọn.\n *\n * Trigger hiện tối đa `maxDisplay` nhãn rồi gộp phần dư thành \"+k\": danh sách 12 người thực hiện\n * mà đổ hết ra trigger thì hàng form vỡ bố cục.\n */\nexport function MultiCombobox({\n  options,\n  value,\n  onValueChange,\n  placeholder = \"Chọn…\",\n  searchPlaceholder = \"Tìm kiếm…\",\n  emptyText = \"Không tìm thấy kết quả.\",\n  disabled = false,\n  onSearchChange,\n  loading = false,\n  clearable = true,\n  maxDisplay = 2,\n  maxSelected,\n  className,\n  contentClassName,\n  id,\n  name,\n  ...aria\n}: MultiComboboxProps) {\n  const [open, setOpen] = useState(false);\n  const [search, setSearch] = useState(\"\");\n  const isAsync = onSearchChange !== undefined;\n\n  const selectedOptions = options.filter((option) => value.includes(option.value));\n  const shown = selectedOptions.slice(0, Math.max(1, maxDisplay));\n  const overflow = selectedOptions.length - shown.length;\n  const limitReached = maxSelected !== undefined && value.length >= maxSelected;\n\n  const toggle = (optionValue: string) => {\n    if (value.includes(optionValue)) {\n      onValueChange(value.filter((item) => item !== optionValue));\n      return;\n    }\n    if (limitReached) return;\n    onValueChange([...value, optionValue]);\n  };\n\n  const handleSearch = (next: string) => {\n    setSearch(next);\n    onSearchChange?.(next);\n  };\n\n  const showClear = clearable && value.length > 0 && !disabled;\n\n  return (\n    // Cùng lý do như Combobox đơn: nút xóa là anh em của trigger để bấm được bằng bàn phím.\n    <div className=\"relative w-full\">\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            id={id}\n            name={name}\n            disabled={disabled}\n            className={cn(\n              \"h-auto min-h-9 w-full justify-between gap-2 py-1.5 font-normal\",\n              value.length === 0 && \"text-muted-foreground\",\n              showClear && \"pr-12\",\n              className\n            )}\n            {...aria}\n          >\n            <span className=\"flex min-w-0 flex-wrap items-center gap-1\">\n              {value.length === 0 ? (\n                placeholder\n              ) : (\n                <>\n                  {shown.map((option) => (\n                    <Badge key={option.value} variant=\"secondary\" className=\"max-w-[10rem]\">\n                      <span className=\"truncate\">{option.label}</span>\n                    </Badge>\n                  ))}\n                  {overflow > 0 && <Badge variant=\"outline\">+{overflow}</Badge>}\n                </>\n              )}\n            </span>\n            <ChevronsUpDown aria-hidden=\"true\" className=\"size-4 shrink-0 opacity-50\" />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent align=\"start\" className={cn(\"w-(--radix-popover-trigger-width) p-0\", contentClassName)}>\n          <ComboboxPanel\n            options={options}\n            isAsync={isAsync}\n            loading={loading}\n            search={search}\n            onSearch={handleSearch}\n            searchPlaceholder={searchPlaceholder}\n            emptyText={emptyText}\n            renderItem={(option) => {\n              const isSelected = value.includes(option.value);\n              return (\n                <CommandItem\n                  key={option.value}\n                  value={option.value}\n                  keywords={[option.label, option.description ?? \"\", ...(option.keywords ?? [])]}\n                  disabled={option.disabled || (limitReached && !isSelected)}\n                  onSelect={() => toggle(option.value)}\n                >\n                  <OptionRow option={option} selected={isSelected} />\n                </CommandItem>\n              );\n            }}\n          />\n          {maxSelected !== undefined && (\n            <p className=\"border-t border-border px-3 py-2 text-xs text-muted-foreground\">\n              Đã chọn {value.length}/{maxSelected}\n            </p>\n          )}\n        </PopoverContent>\n      </Popover>\n\n      {showClear && (\n        <button\n          type=\"button\"\n          aria-label=\"Xóa tất cả lựa chọn\"\n          onClick={() => onValueChange([])}\n          className=\"absolute right-8 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground transition-colors duration-150 ease-out hover:text-foreground\"\n        >\n          <X aria-hidden=\"true\" className=\"size-3.5\" />\n        </button>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/composite/command-palette.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { IconComponent } from './empty-state.js';
+
+interface CommandPaletteItem {
+    id: string;
+    label: string;
+    /** Dòng phụ mờ (đường dẫn, mô tả ngắn, tên workspace) */
+    description?: string;
+    icon?: IconComponent;
+    /** Gợi ý phím tắt hiện bên phải, vd "mod+shift+n" */
+    shortcut?: string;
+    /** Từ khoá phụ để tìm ra mục (tên tiếng Anh, viết tắt, mã) */
+    keywords?: string[];
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface CommandPaletteGroup {
+    id: string;
+    label?: string;
+    items: CommandPaletteItem[];
+}
+interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    groups: CommandPaletteGroup[];
+    /** Nhóm "Gần đây" luôn nằm trên cùng khi chưa gõ gì */
+    recent?: CommandPaletteItem[];
+    recentLabel?: string;
+    placeholder?: string;
+    emptyText?: string;
+    /** Có mặt = app tự tìm (gọi API) → tắt lọc nội bộ của cmdk */
+    onSearchChange?: (search: string) => void;
+    loading?: boolean;
+    /** Nội dung chân bảng (gợi ý phím, trạng thái) */
+    footer?: ReactNode;
+    /**
+     * Tự gắn phím tắt Cmd/Ctrl+K để mở (mặc định true).
+     *
+     * 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
+     * hai listener cùng lật một state (mở rồi đóng ngay trong một lần bấm).
+     */
+    registerShortcut?: boolean;
+    className?: string;
+}
+/**
+ * Bảng lệnh (Cmd/Ctrl+K) — điều hướng nhanh và chạy lệnh, kiểu Linear/Raycast.
+ *
+ * Đặt ở tầng composite (không phải trong shell) vì app không dùng `AppShell` — trang cài đặt
+ * độ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.
+ *
+ * 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".
+ */
+declare function CommandPalette({ open, onOpenChange, groups, recent, recentLabel, placeholder, emptyText, onSearchChange, loading, footer, registerShortcut, className }: CommandPaletteProps): React.JSX.Element;
+
+export { CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps };