@comitor/ui 0.3.3 → 0.5.0

package/README.md

@@ -553,6 +553,7 @@ Giá trị thật của package: pattern lặp đi lặp lại ở mọi app, gh
 | `TablePagination` | Phân trang đi kèm bảng. Chuỗi override qua prop `labels` — `TablePaginationLabels` / `DEFAULT_TABLE_PAGINATION_LABELS` (khoá có số/đơn vị chèn vào là **hàm**, vd `range(start, end, total, unitLabel)`) |
 | `SearchFilterBar`, `FilterChips` | Thanh tìm + lọc + đếm kết quả. `SearchFilterBar` override chuỗi qua `labels` — `SearchFilterBarLabels` / `DEFAULT_SEARCH_FILTER_BAR_LABELS`; `FilterChips` nhận nhãn thẳng trong dữ liệu chip nên không có `labels` |
 | `StatCard`, `StatusPill`, `EmptyState` | Số liệu có delta, nhãn trạng thái, trạng thái rỗng |
+| `RouteTabs` | Tab mà mỗi mục là một **route thật** — `<nav>` chứa link, `aria-current="page"`. Dùng chung bảng lớp với `Tabs` nên nhìn không khác; đừng dùng `Tabs` cho việc này (nó dựng `role="tablist"` + `aria-controls` trỏ tới tabpanel cùng trang, mà ở đây không có). ⚠ Trên Next phải truyền `LinkComponent={Link}` |
 | `FormSection`, `FormField` | Bố cục form 12 cột; uỷ quyền label/mô tả/lỗi xuống `Field` |
 | `Combobox`, `MultiCombobox` | Chọn có tìm kiếm, **khớp không dấu tiếng Việt**. `aria-invalid` đổi trigger sang **viền đỏ** (`--destructive-ink`), cùng tín hiệu với `Input`; nhận cả `boolean` lẫn `"true"`/`"false"` để dùng thẳng `aria-invalid={!!errors.x}` |
 | `DatePicker`, `DateRangePicker` | Chọn ngày/khoảng ngày, locale `vi`, preset dựng sẵn |
@@ -671,7 +672,7 @@ Bảng mặc định **cố ý có những cặp dưới ngưỡng** — đó l
 sót. Danh sách đầy đủ nằm ở khối `NGUỒN SỰ THẬT` đầu `styles.css`; những khoản chính:
 
 ```
-viền control (--input) trên nền trang        1,16:1   (1.4.11 đòi 3:1)
+viền checkbox/radio (--choice-edge)          2,99:1   (1.4.11 đòi 3:1)
 rãnh Switch BẬT, gạch active Tabs (gold)     1,86:1   (1.4.11 đòi 3:1)
 --muted-foreground trên --muted              3,58:1   (1.4.3  đòi 4,5:1)
 chữ trắng trên nền --destructive             4,38:1   (1.4.3  đòi 4,5:1)
@@ -758,8 +759,8 @@ Brand cũng có bậc `-ink`, nhưng **giá trị của nó phụ thuộc bảng
 **sáng** nên tô nền thì tuyệt, còn làm ranh giới trạng thái trên nền trang chỉ được **1,86:1**.
 comitor-ds chấp nhận con số đó, nên ở bảng mặc định `--primary-ink` = `--primary`; ở bảng tương phản
 cao nó mượn `--gold-500` `#7A5800` (**6,51:1** ✓ light) và trỏ về `--primary` ở dark (**12,67:1** ✓).
-Đây là màu của rãnh `Switch` khi BẬT và ô `Checkbox` đã chọn — component viết `bg-control-on`, token
-đó trỏ vào `--primary-ink`. `--ring` **cố ý vẫn là** `--primary` ở cả hai bảng: vòng focus thuộc tiêu
+⚠ `--control-on` KHÔNG còn trỏ vào `--primary-ink`: ở bảng tương phản cao chúng tách ra (`#B48700`
+so với `#7A5800`) vì `--primary-ink` còn phải làm CHỮ. Component vẫn viết `bg-control-on`. `--ring` **cố ý vẫn là** `--primary` ở cả hai bảng: vòng focus thuộc tiêu
 chí AAA của WCAG 2.2, ngoài mục tiêu của gói.
 
 Các lỗi hay gặp nhất, và cách sửa. **Số đo trong bảng là của bảng TƯƠNG PHẢN CAO** — đó là bảng có hợp
@@ -771,8 +772,8 @@ Các lỗi hay gặp nhất, và cách sửa. **Số đo trong bảng là của
 | `text-success` / `text-info` / `text-warning` cho chữ hoặc icon trạng thái | Token TÔ NỀN: trên tint `/15` của chính nó chỉ 2,69:1 / 3,44:1 ✗ ở light; trên nền trang 3,13:1 / 4,14:1 ✗ | `text-success-ink` / `text-info-ink` / `text-warning-ink` (5,5–6,7:1 light · 7,1–12,4:1 dark) |
 | `bg-primary` / `bg-gold-300` làm rãnh `Switch` khi BẬT | Khoá cứng một bảng màu: bảng tương phản cao không đổi được nó nữa | `bg-control-on` |
 | `bg-ash-300` làm rãnh `Switch` khi TẮT, `bg-muted` làm rãnh `Slider` | Cùng lý do — thang màu thô không theo bảng | `bg-switch-track` / `bg-slider-track` |
-| `text-ink` làm dấu check của `Checkbox` | Ở bảng tương phản cao nền ô là gold-500 TỐI, dấu mực chỉ 1,86:1 ✗ | `text-control-check` |
-| `border-border` làm viền của control | `--border` là ranh giới **TRANG TRÍ**; `--control-edge` mới là thứ bảng tương phản cao kéo đậm lên | `border-input` (= `--control-edge`) |
+| `text-ink` làm dấu check của `Checkbox` | Khoá cứng một bảng: `--control-check` là thứ đi CẶP với `--control-on`, đổi bảng màu là nó tự theo | `text-control-check` |
+| `border-border` làm viền của control | `--border` là ranh giới **TRANG TRÍ** và cố ý ở dưới 3:1 tại MỌI bảng màu; `--control-edge`/`--choice-edge` mới là thứ chịu ngưỡng | `border-input` (= `--control-edge`), `border-choice-edge` cho Checkbox/Radio |
 | `bg-input/30` làm lớp tô ô nhập ở dark | Ở bảng tương phản cao `--input` là #7E8290, tô 30% ra mảng xám sáng làm placeholder tụt còn 3,22:1 ✗ | `dark:bg-input-fill` |
 | `text-app-accent` cho icon/vạch active | accent mặc định là gold `#E8B824` → 1,7–1,9:1 trên nền sidebar ✗ | `text-app-accent-ink`, hoặc nền ĐẶC + `text-app-accent-foreground` |
 | `text-destructive` cho chữ trên nền trang | `--destructive` là màu **NỀN**; ở bảng tương phản cao nó là bậc đậm cho chữ trắng đứng lên và làm chữ thì chỉ 3,76:1 ✗ ở dark | `text-destructive-ink` (7,15:1 light / 6,42:1 dark ở bảng tương phản cao; = `--destructive` ở bảng mặc định, đúng `text-destructive` của comitor-ds) |
@@ -783,7 +784,7 @@ Các lỗi hay gặp nhất, và cách sửa. **Số đo trong bảng là của
 >
 > ⚠ **Ghi đè `--primary` thì nên set kèm `--primary-ink`** nếu app muốn một bậc tối riêng cho brand
 > của mình. Ở bảng mặc định hai biến này trùng nhau nên quên cũng không sai màu; ở bảng tương phản cao
-> thì `--primary-ink` là thứ điều khiển control BẬT, quên là control giữ nguyên gold-500 mặc định.
+> thì `--primary-ink` điều khiển viền focus / gạch Tabs, còn control BẬT đi theo `--control-on`.
 >
 > ⚠ **Đổi `--teal` / `--green` / `--red` thì phải tính lại bậc `-ink` tương ứng** — chúng là hex đã đóng
 > băng, không tự đi theo. Đóng băng là chủ ý: một chỗ duy nhất để đo lại, component không phải nhắc lại
@@ -803,12 +804,15 @@ Bản mirror TS đi theo đúng hợp đồng này: `accent` (nền) ⇄ `accent
 | Màu phụ (NỀN) | `navy`, `teal`, `red`, `green`, `yellow` | Vai trò **tô nền** (fill đặc hoặc tint). Bảng mặc định dùng một hex cho cả hai theme (đúng comitor-ds); bảng tương phản cao nâng sáng ở dark. ⚠ `--destructive` là token RIÊNG (nền nút xoá): `#D64545` ở bảng mặc định, `#C93B3B` ở bảng tương phản cao để chữ trắng đạt 5,03:1 |
 | Mực của màu phụ | `teal-ink`, `green-ink`, `red-ink`, `yellow-ink`, `navy-ink` | Cùng màu đó ở vai trò **chữ/icon/viền trên nền trang** — xem §6.1. Ở light là hex đã đóng băng (`#1A6668` / `#216A48` / `#9A3537` / `= gold-500` / `= navy`); ở dark trỏ về chính màu phụ |
 | Trạng thái | `success`, `warning`, `info`, `destructive` (+ `-foreground`, `-ink`, `destructive-hover`) | Ba cái đầu alias sang `green` / `yellow` / `teal`; `destructive` ghim một giá trị cho cả hai theme. `-ink` là bậc để làm **chữ** trạng thái. `--destructive-hover` phải là token riêng vì hai bảng đi **ngược chiều**: comitor-ds viết `hover:bg-red/90` (nhạt dần), bảng tương phản cao phải đậm thêm |
-| Ranh giới control | `control-edge`, `control-edge-strong`, `input`, `input-fill` | **Ranh giới của control** (viền ô nhập, ô checkbox chưa chọn). `--control-edge` trỏ vào `--input`. Bảng mặc định: `#EDEEF1` / `#1E2128` — bằng bậc trang trí, đúng comitor-ds. Bảng tương phản cao: `#7E8290` cho cả hai theme (3,83:1 / 4,94:1). `--control-edge-strong` là bậc hover. `--input-fill` là lớp tô mờ ở dark (`dark:bg-input-fill`) — ở bảng mặc định nó là thứ duy nhất còn khoanh vùng ô Radio/OTP, ở bảng tương phản cao nó trong suốt |
-| Control BẬT / ĐÃ CHỌN | `control-on`, `control-knob`, `control-check`, `switch-track`, `slider-track` | Rãnh `Switch` BẬT / ô `Checkbox` đã chọn dùng `bg-control-on` (= `--primary-ink`); núm Switch là `bg-control-knob`; dấu check và chữ trên ngày đang chọn của `Calendar` là `text-control-check` (MỰC ở bảng mặc định vì nền là gold sáng, màu nền trang ở bảng tương phản cao vì nền là gold-500 tối). `switch-track`/`slider-track` là rãnh lúc TẮT — comitor-ds cho hai thứ này hai bậc khác nhau nên không gộp được |
+| Ranh giới **ô nhập** | `control-edge`, `control-edge-strong`, `input`, `input-fill` | Input/Textarea/Select/Combobox/OTP, Button `outline`, Badge `outline`, rãnh Slider. `--control-edge` trỏ vào `--input`. Bảng mặc định light giữ đúng bậc của comitor-ds (`#EDEEF1`, 1,16:1) — ô nhập còn được nhận ra bằng kích thước, nhãn và placeholder. Dark thì **không** giữ được: `#1E2128` chỉ 1,10:1 trên `--card` nên đổi thành `#434A5A` (2,00:1). Bảng tương phản cao: `#7E8290` (3,83:1 / 4,64:1). `--control-edge-strong` = hover, `ash-300` light / `ash-500` dark đúng cặp bản duyệt |
+| Ranh giới **checkbox/radio** | `choice-edge`, `choice-edge-strong` | Tách riêng vì ở đây viền **là toàn bộ control** khi chưa chọn — không nhãn trong, không placeholder, không nền — nên nó chịu ngưỡng 1.4.11 còn viền ô nhập thì không. Bảng mặc định `#959597` (2,99:1) / `#5B6479` (3,00:1 trên `--card`); bảng tương phản cao trỏ thẳng về `--input`. Hover **không** dùng được `--control-edge-strong` (`ash-300` = 1,62:1, nhạt hơn cả lúc nghỉ) nên `--choice-edge-strong` là `ash-500` |
+| Control BẬT / ĐÃ CHỌN | `control-on`, `control-knob`, `control-check`, `switch-track`, `slider-track` | Rãnh `Switch` BẬT, ô `Checkbox` đã chọn, chấm `Radio`, đoạn `Slider`, ngày đang chọn của `Calendar` — tất cả dùng **cặp** `bg-control-on` + `text-control-check`; núm Switch là `bg-control-knob` (trắng ở cả hai bảng). Bảng mặc định `= --primary` (gold `#E8B824`); bảng tương phản cao `#B48700` — **vẫn là gold, chỉ đậm hơn**, đạt 3,28:1 ⇄ nền trang và 3,06:1 trên `--muted`. ⚠ KHÔNG dùng `gold-500 #7A5800`: đủ tương phản nhưng mắt đọc ra nâu-ô-liu, tức bảng màu thứ hai đổi luôn màu nhận diện. ⚠ Cũng KHÔNG kéo `--primary-ink` sáng theo — nó còn phải làm CHỮ (nhãn trạng thái, link) nên ở lại `gold-500`; đó chính là lý do `--control-on` và `--primary-ink` là hai token, dù ở mọi bảng khác chúng trùng giá trị |
+| Ranh giới **trang trí** | `border`, `sidebar-border` | Khung Card, đường kẻ bảng, vạch ngăn menu. **Không chịu ngưỡng nào** — nó chỉ tách khối cho mắt dễ quét. Bảng mặc định `#EDEEF1` / `#1E2128` (1,16:1 / 1,10:1) đúng comitor-ds; bảng tương phản cao nâng lên `#A4A4A6` / `#50586B` (**2,49:1** ở cả hai theme) — thấy rõ nhưng **cố ý thấp hơn viền control một bậc**, vì kéo nó lên ngang `--input` là mất phân cấp "thao tác được ⇄ chỉ là đường kẻ", và làm hỏng luôn 4 ca của `test:cong-a11y` vốn dựa vào việc token này ở dưới 3:1 để bắt lỗi "vẽ hình control bằng token trang trí" |
 | Link | `link-ink`, `link-ink-hover` | Button variant `link`. Tách khỏi `--primary-ink` vì comitor-ds dùng `gold-400` cho chữ link nhưng `gold-300` cho viền focus |
 | Biểu đồ | `chart-1 … chart-5` | Đổi bảng màu biểu đồ độc lập với brand. `chart-3` trỏ vào `--navy-ink` (nét biểu đồ phải NỔI trên nền trang) |
 | Avatar | `getAvatarToneColors(name, mode)`, `getAvatarToneIndex(name)`, type `AvatarToneColors` | Trả `{ background, foreground }` dạng **hex đục** cho canvas/email/PDF — đã trộn sẵn tint với nền `--card` vì ngoài CSS không có gì để hợp thành. Cùng bảng tone, cùng hàm băm với `getAvatarToneClasses(name)` ở `@comitor/ui`, nên một người luôn ra một màu ở mọi nơi. Khoá băm là **tên hiển thị**, không phải email/slug |
 | Theo app | `app-accent`, `app-accent-foreground`, `app-accent-ink` | Mỗi app Comitor tô một accent riêng — khai ở CSS của app (có nhánh `.dark`), không cần build lại package. Ghi đè `--app-accent` thì **phải** set kèm `--app-accent-ink` (§6.1) |
+| Hàng bảng | `table-row-stripe`, `table-row-hover` | Sọc xen kẽ và nền lúc rê chuột của `<Table striped>` / `<DataTable striped>`. **Đục, bắt buộc** — ô cột GHIM lấy nền bằng `bg-inherit` từ hàng, hàng còn alpha là ô ghim trong mờ và chữ của các cột đang cuộn lộ xuyên qua. Giá trị = `--muted` phủ 30% / 50% lên `--card`, đã hợp thành sẵn (`#FDFDFD` / `#FBFBFC` light, `#181B20` / `#1A1D23` dark) — đổi `--muted` hay `--card` thì tính lại |
 | Khung | `--sidebar-width`, `--sidebar-width-icon`, `--header-height` | Có utility `w-sidebar`, `w-sidebar-icon`, `h-header` |
 | Đổ bóng | `--elevation-surface`, `--elevation-control`, `--elevation-card`, `--elevation-overlay` | 4 bậc độ cao, sinh utility `shadow-surface` / `shadow-control` / `shadow-card` / `shadow-overlay`. Đổi theo theme (bản dark dùng đen thuần, alpha cao hơn) |
 | Khác | `--radius 0.375rem` | Bo góc 6px là chữ ký thị giác |

package/dist/components/composite/avatar-group.d.ts

@@ -18,6 +18,18 @@ interface AvatarGroupProps extends Omit<ComponentProps<"div">, "children"> {
     onOverflowClick?: () => void;
     /** Nhãn của cả nhóm cho trình đọc màn hình (mặc định "Thành viên") */
     label?: string;
+    /**
+     * BỀ MẶT mà nhóm đang đứng lên — cho cả lớp nền đục dưới mỗi avatar lẫn màu vòng ngăn cách.
+     *
+     * Vì sao phải khai: tone avatar là các tint CÓ ALPHA (`bg-teal/15`, `bg-yellow/25`…), mà nhóm
+     * thì cố tình cho chúng chồng lên nhau `-space-x-2`. Không có lớp đục ở dưới thì tint của avatar
+     * trên hợp thành với MÀU CỦA AVATAR DƯỚI chứ không phải với nền trang — ba khuôn mặt lẫn vào
+     * nhau đúng ở chỗ chồng. Đây cũng chính là bề mặt mà `getAvatarToneColors` giả định khi tính hex
+     * đục cho canvas/email (`tintOver(…, p.card, …)`), nên mặc định là `--card`.
+     *
+     * Đặt nhóm lên bề mặt khác thì khai lại cả hai class, vd `"bg-sidebar ring-sidebar"`.
+     */
+    surfaceClassName?: string;
 }
 /**
  * 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).
@@ -28,6 +40,6 @@ interface AvatarGroupProps extends Omit<ComponentProps<"div">, "children"> {
  * 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
  * — xem chú thích ở trigger bên dưới.
  */
-declare function AvatarGroup({ items, max, size, onOverflowClick, label, className, ...props }: AvatarGroupProps): React.JSX.Element;
+declare function AvatarGroup({ items, max, size, onOverflowClick, label, surfaceClassName, className, ...props }: AvatarGroupProps): React.JSX.Element;
 
 export { AvatarGroup, type AvatarGroupItem, type AvatarGroupProps };

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

@@ -3,6 +3,13 @@ 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 overlapClasses = {
+  xs: "-space-x-1",
+  sm: "-space-x-1.5",
+  md: "-space-x-2",
+  lg: "-space-x-2.5",
+  xl: "-space-x-3"
+};
 const overflowSizeClasses = {
   xs: "size-6 text-[10px]",
   sm: "size-7 text-xs",
@@ -16,6 +23,7 @@ function AvatarGroup({
   size = "sm",
   onOverflowClick,
   label = "Th\xE0nh vi\xEAn",
+  surfaceClassName = "bg-card ring-card",
   className,
   ...props
 }) {
@@ -27,7 +35,7 @@ function AvatarGroup({
       "data-slot": "avatar-group",
       role: "group",
       "aria-label": label,
-      className: cn("flex items-center -space-x-2", className),
+      className: cn("flex items-center", overlapClasses[size], className),
       ...props,
       children: [
         visible.map((item) => /* @__PURE__ */ jsxs(Tooltip, { children: [
@@ -35,7 +43,10 @@ function AvatarGroup({
             "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-foreground",
+              className: cn(
+                "rounded-full ring-2 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-foreground",
+                surfaceClassName
+              ),
               children: /* @__PURE__ */ jsx(LetterAvatar, { name: item.name, src: item.src, size, title: void 0 })
             }
           ) }),
@@ -50,7 +61,10 @@ function AvatarGroup({
             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",
+              // `surfaceClassName` đứng TRƯỚC để `bg-muted` ngay sau đè lại phần nền của nó:
+              // ô "+k" vốn đã đục, ở đây chỉ mượn màu VÒNG của bề mặt.
+              surfaceClassName,
+              "z-10 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 transition-colors hover:bg-accent hover:text-accent-foreground",
               overflowSizeClasses[size]
             ),
             children: [
@@ -67,7 +81,8 @@ function AvatarGroup({
           "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",
+              surfaceClassName,
+              "z-10 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2",
               overflowSizeClasses[size]
             ),
             children: [

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

@@ -1 +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              {/* Viền focus dùng `foreground` chứ không `ring`: `--ring` là gold — #E8B824 chỉ\n                  1,86:1 trên nền trang ở light, dưới 3:1 mà WCAG 1.4.11/2.4.11 đòi cho chỉ báo\n                  focus (ở dark #F5D060 mới đạt 12,67:1, tức hỏng đúng một nửa số người dùng).\n                  `outline-foreground` đạt 18,91:1 (light) / 17,66:1 (dark) — cùng lối với viền\n                  focus của dòng trong `DataTable`. */}\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-foreground\"\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              {/* `opacity-80` ở đây ĐẠT chuẩn và đã đo, không phải chỗ sót: Tooltip là\n                  `bg-foreground text-background`, nên chữ mờ 80% ra 12,15:1 (light) / 9,85:1\n                  (dark) — trên xa ngưỡng 4,5:1. Tooltip cũng không tương tác được. */}\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":";AAgFgB,cAGJ,YAHI;AA7EhB,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,MAUrB;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,YAIxC,KAAK,WAAW,oBAAC,UAAK,WAAU,4BAA4B,eAAK,SAAQ;AAAA,aAC5E;AAAA,aAxBY,KAAK,EAyBnB,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":[]}
+{"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   * BỀ MẶT mà nhóm đang đứng lên — cho cả lớp nền đục dưới mỗi avatar lẫn màu vòng ngăn cách.\n   *\n   * Vì sao phải khai: tone avatar là các tint CÓ ALPHA (`bg-teal/15`, `bg-yellow/25`…), mà nhóm\n   * thì cố tình cho chúng chồng lên nhau `-space-x-2`. Không có lớp đục ở dưới thì tint của avatar\n   * trên hợp thành với MÀU CỦA AVATAR DƯỚI chứ không phải với nền trang — ba khuôn mặt lẫn vào\n   * nhau đúng ở chỗ chồng. Đây cũng chính là bề mặt mà `getAvatarToneColors` giả định khi tính hex\n   * đục cho canvas/email (`tintOver(…, p.card, …)`), nên mặc định là `--card`.\n   *\n   * Đặt nhóm lên bề mặt khác thì khai lại cả hai class, vd `\"bg-sidebar ring-sidebar\"`.\n   */\n  surfaceClassName?: string;\n}\n\n/**\n * Độ chồng theo CỠ, không phải một hằng số cho mọi cỡ.\n *\n * Mẫu Avatar stack ở comitor-ds là `-space-x-2` trên avatar 40px — tức chồng **20%**. Áp thẳng\n * `-space-x-2` cho mọi cỡ thì ở `xs` (24px) thành chồng 33%, và cộng thêm vòng 2px nữa là phần bị\n * che ăn vào đúng chữ cái đầu của initials: \"ĐH\" ở 10px bắt đầu cách mép ~5,5px, trong khi mép che\n * đã tới 10px. Giữ tỉ lệ ~20% thì mọi cỡ đọc được mà mật độ vẫn y như bản duyệt.\n *\n *     xs 24px → 4px (17%)   ·   sm 28px → 6px (21%)   ·   md 36px → 8px (22%)\n *     lg 44px → 10px (23%)  ·   xl 56px → 12px (21%)\n */\nconst overlapClasses: Record<LetterAvatarSize, string> = {\n  xs: \"-space-x-1\",\n  sm: \"-space-x-1.5\",\n  md: \"-space-x-2\",\n  lg: \"-space-x-2.5\",\n  xl: \"-space-x-3\"\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  surfaceClassName = \"bg-card ring-card\",\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\", overlapClasses[size], 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              {/* Viền focus dùng `foreground` chứ không `ring`: `--ring` là gold — #E8B824 chỉ\n                  1,86:1 trên nền trang ở light, dưới 3:1 mà WCAG 1.4.11/2.4.11 đòi cho chỉ báo\n                  focus (ở dark #F5D060 mới đạt 12,67:1, tức hỏng đúng một nửa số người dùng).\n                  `outline-foreground` đạt 18,91:1 (light) / 17,66:1 (dark) — cùng lối với viền\n                  focus của dòng trong `DataTable`. */}\n              {/* Nền đục nằm DƯỚI tint có alpha của avatar — xem `surfaceClassName`. Vòng\n                  `ring-2` cùng màu bề mặt chỉ tách hai avatar ra, nó KHÔNG che được phần tint\n                  chồng lên nhau bên trong vòng. */}\n              <button\n                type=\"button\"\n                className={cn(\n                  \"rounded-full ring-2 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-foreground\",\n                  surfaceClassName\n                )}\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              {/* `opacity-80` ở đây ĐẠT chuẩn và đã đo, không phải chỗ sót: Tooltip là\n                  `bg-foreground text-background`, nên chữ mờ 80% ra 12,15:1 (light) / 9,85:1\n                  (dark) — trên xa ngưỡng 4,5:1. Tooltip cũng không tương tác được. */}\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                // `surfaceClassName` đứng TRƯỚC để `bg-muted` ngay sau đè lại phần nền của nó:\n                // ô \"+k\" vốn đã đục, ở đây chỉ mượn màu VÒNG của bề mặt.\n                surfaceClassName,\n                \"z-10 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2 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                surfaceClassName,\n                \"z-10 inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-medium text-muted-foreground ring-2\",\n                overflowSizeClasses[size]\n              )}\n            >\n              +{overflow}\n            </span>\n          ))}\n      </div>\n    </TooltipProvider>\n  );\n}\n"],"mappings":";AAsHgB,cAGJ,YAHI;AAnHhB,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,iBAAiB,sBAAsB;AACzE,SAAS,oBAA2C;AA4CpD,MAAM,iBAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,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,mBAAmB;AAAA,EACnB;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,qBAAqB,eAAe,IAAI,GAAG,SAAS;AAAA,MACjE,GAAG;AAAA,MAEH;AAAA,gBAAQ,IAAI,CAAC,SACZ,qBAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MAarB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cAEA,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,YAIxC,KAAK,WAAW,oBAAC,UAAK,WAAU,4BAA4B,eAAK,SAAQ;AAAA,aAC5E;AAAA,aA9BY,KAAK,EA+BnB,CACD;AAAA,QAEA,WAAW,MACT,kBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAW;AAAA;AAAA;AAAA,cAGT;AAAA,cACA;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;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.js

@@ -44,6 +44,45 @@ function OptionRow({ option, selected }) {
     ] })
   ] });
 }
+function ComboboxAdornments({
+  showClear,
+  disabled,
+  clearLabel,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        /* `border border-transparent pr-3` chứ không phải `right-3`: hàng này là ANH EM của
+           trigger nên nó đo từ mép BORDER, trong khi chevron của `Select` nằm trong trigger nên
+           đo từ mép CONTENT — lệch đúng 1px bề dày viền. Mượn lại mô hình hộp của trigger (viền
+           1px trong suốt + lề 12px) là hai bên rơi vào cùng một mốc, không phải bịa số lẻ. */
+        "pointer-events-none absolute inset-y-0 right-0 flex items-center border border-transparent pr-3",
+        disabled && "opacity-50"
+      ),
+      children: [
+        showClear && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            className: "pointer-events-auto size-6 text-muted-foreground hover:text-foreground",
+            onClick: onClear,
+            children: [
+              /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: clearLabel })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })
+      ]
+    }
+  );
+}
+const TRIGGER_PADDING = "px-3 pr-9";
+const TRIGGER_PADDING_WITH_CLEAR = "px-3 pr-15";
 function useComboboxList(options, isAsync) {
   const groups = useMemo(() => groupOptions(options), [options]);
   return { groups, shouldFilter: !isAsync };
@@ -97,77 +136,68 @@ function Combobox({
     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,
-            "aria-invalid": invalid || void 0,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "truncate", children: selected ? selected.label : placeholder }),
-              /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })
-            ]
-          }
-        ) }),
-        /* @__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",
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__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" })
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          id,
+          name,
+          disabled,
+          className: cn(
+            "w-full justify-start font-normal",
+            showClear ? TRIGGER_PADDING_WITH_CLEAR : TRIGGER_PADDING,
+            !selected && "text-muted-foreground",
+            className
+          ),
+          ...aria,
+          "aria-invalid": invalid || void 0,
+          children: /* @__PURE__ */ jsx("span", { className: "truncate", children: selected ? selected.label : placeholder })
         }
-      )
-    ] })
-  );
+      ) }),
+      /* @__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
+          )
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ComboboxAdornments,
+      {
+        showClear,
+        disabled,
+        clearLabel: "X\xF3a l\u1EF1a ch\u1ECDn",
+        onClear: () => onValueChange(null)
+      }
+    )
+  ] });
 }
 function MultiCombobox({
   options,
@@ -209,87 +239,80 @@ function MultiCombobox({
     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,
-            "aria-invalid": invalid || void 0,
-            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 text-muted-foreground" })
-            ]
-          }
-        ) }),
-        /* @__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",
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__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" })
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          id,
+          name,
+          disabled,
+          className: cn(
+            "h-auto min-h-9 w-full justify-start py-1.5 font-normal",
+            showClear ? TRIGGER_PADDING_WITH_CLEAR : TRIGGER_PADDING,
+            value.length === 0 && "text-muted-foreground",
+            className
+          ),
+          ...aria,
+          "aria-invalid": invalid || void 0,
+          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__ */ 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
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ComboboxAdornments,
+      {
+        showClear,
+        disabled,
+        clearLabel: "X\xF3a t\u1EA5t c\u1EA3 l\u1EF1a ch\u1ECDn",
+        onClear: () => onValueChange([])
+      }
+    )
+  ] });
 }
 export {
   Combobox,