@comitor/ui 0.1.0 → 0.2.1

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

@@ -3,26 +3,18 @@ import { ComponentProps } from 'react';
 
 type LetterAvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
 /**
- * 8 tone màu deterministic — TẤT CẢ là class token tĩnh.
+ * Chuỗi class token của tone màu ứng với một tên — cùng một người luôn ra cùng màu ở mọi app
+ * Comitor, và cùng màu với bản canvas/email/PDF (`getAvatarToneColors` ở `@comitor/ui/tokens`)
+ * vì hai bên đọc CÙNG một bảng tone trong `lib/avatar-tone.ts`.
  *
- * Vì sao không sinh `bg-${color}-100`: Tailwind quét tĩnh, class ghép chuỗi lúc chạy sẽ không
- * có mặt trong CSS của app → avatar mất nền. Vì sao không dùng hex inline: mất dark mode.
- * Mỗi tone đã chọn cặp nền/chữ đạt tương phản ở cả hai theme.
+ * Tên hàm nói đúng thứ nó trả về: `...Classes` = class Tailwind (DOM). Bảng tone không xuất ra
+ * ngoài: muốn tô màu khác thì truyền prop `toneClassName`, đừng dựng lại phép chọn tone bằng hàm
+ * băm riêng — đó là đường ngắn nhất để cùng một người ra hai màu.
  *
- * ⚠ Đây là NGUỒN SỰ THẬT DUY NHẤT cho màu avatar chữ cái của cả package: tầng shell
- * (`shell/utils.ts` → `getAvatarToneClass`) gọi lại `getLetterAvatarTone` chứ không giữ
- * bảng tone riêng. Đừng dựng bảng thứ hai — cùng một người mà ra hai màu trên cùng một
- * trang là lỗi đã từng xảy ra ở 0.1.0.
+ * SEED là TÊN (được `trim` + hạ chữ thường theo locale vi-VN bên trong), không phải email/slug:
+ * mọi nơi hiển thị avatar đều chắc chắn có `name`, còn email/slug thì không.
  */
-declare const LETTER_AVATAR_TONES: readonly ["bg-gold-100 text-gold-600 dark:bg-gold-500/30 dark:text-gold-100", "bg-teal/15 text-teal", "bg-green/15 text-green", "bg-red/15 text-red", "bg-yellow/25 text-gold-500 dark:bg-yellow/20 dark:text-yellow", "bg-chart-3/15 text-chart-3", "bg-ash-100 text-ash-700 dark:bg-ash-500/25 dark:text-ash-100", "bg-ink/10 text-ink-soft dark:bg-paper/15 dark:text-paper"];
-/**
- * Tone màu ổn định theo tên — cùng một người luôn ra cùng màu ở mọi app Comitor.
- *
- * SEED là TÊN (đã trim + hạ chữ thường theo locale vi-VN), không phải email/slug: mọi nơi
- * hiển thị avatar đều chắc chắn có `name`, còn email/slug thì không — lấy khoá khác nhau ở
- * từng chỗ là cách nhanh nhất để cùng một người ra hai màu.
- */
-declare function getLetterAvatarTone(name: string): string;
+declare function getAvatarToneClasses(name: string): string;
 interface LetterAvatarProps extends Omit<ComponentProps<"span">, "children"> {
     /** Họ tên đầy đủ — dùng cho cả initials lẫn màu */
     name: string;
@@ -44,4 +36,4 @@ interface LetterAvatarProps extends Omit<ComponentProps<"span">, "children"> {
  */
 declare function LetterAvatar({ name, src, size, square, toneClassName, className, ...props }: LetterAvatarProps): React.JSX.Element;
 
-export { LETTER_AVATAR_TONES, LetterAvatar, type LetterAvatarProps, type LetterAvatarSize, getLetterAvatarTone };
+export { LetterAvatar, type LetterAvatarProps, type LetterAvatarSize, getAvatarToneClasses };

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

@@ -1,16 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { getAvatarTone } from "../../lib/avatar-tone.js";
 import { cn } from "../../lib/cn.js";
-import { getVietnameseInitials, hashString } from "./text-utils.js";
-const LETTER_AVATAR_TONES = [
-  "bg-gold-100 text-gold-600 dark:bg-gold-500/30 dark:text-gold-100",
-  "bg-teal/15 text-teal",
-  "bg-green/15 text-green",
-  "bg-red/15 text-red",
-  "bg-yellow/25 text-gold-500 dark:bg-yellow/20 dark:text-yellow",
-  "bg-chart-3/15 text-chart-3",
-  "bg-ash-100 text-ash-700 dark:bg-ash-500/25 dark:text-ash-100",
-  "bg-ink/10 text-ink-soft dark:bg-paper/15 dark:text-paper"
-];
+import { getVietnameseInitials } from "./text-utils.js";
 const sizeClasses = {
   xs: "size-6 text-[10px]",
   sm: "size-7 text-xs",
@@ -18,9 +9,8 @@ const sizeClasses = {
   lg: "size-11 text-base",
   xl: "size-14 text-lg"
 };
-function getLetterAvatarTone(name) {
-  const tones = LETTER_AVATAR_TONES;
-  return tones[hashString(name.trim().toLocaleLowerCase("vi-VN")) % tones.length] ?? tones[0];
+function getAvatarToneClasses(name) {
+  return getAvatarTone(name).classes;
 }
 function LetterAvatar({
   name,
@@ -31,7 +21,7 @@ function LetterAvatar({
   className,
   ...props
 }) {
-  const tone = toneClassName ?? getLetterAvatarTone(name);
+  const tone = toneClassName ?? getAvatarToneClasses(name);
   return /* @__PURE__ */ jsxs(
     "span",
     {
@@ -59,8 +49,7 @@ function LetterAvatar({
   );
 }
 export {
-  LETTER_AVATAR_TONES,
   LetterAvatar,
-  getLetterAvatarTone
+  getAvatarToneClasses
 };
 //# sourceMappingURL=letter-avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/letter-avatar.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { getVietnameseInitials, hashString } from \"./text-utils.js\";\n\nexport type LetterAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n/**\n * 8 tone màu deterministic — TẤT CẢ là class token tĩnh.\n *\n * Vì sao không sinh `bg-${color}-100`: Tailwind quét tĩnh, class ghép chuỗi lúc chạy sẽ không\n * có mặt trong CSS của app → avatar mất nền. Vì sao không dùng hex inline: mất dark mode.\n * Mỗi tone đã chọn cặp nền/chữ đạt tương phản ở cả hai theme.\n *\n * ⚠ Đây là NGUỒN SỰ THẬT DUY NHẤT cho màu avatar chữ cái của cả package: tầng shell\n * (`shell/utils.ts` → `getAvatarToneClass`) gọi lại `getLetterAvatarTone` chứ không giữ\n * bảng tone riêng. Đừng dựng bảng thứ hai — cùng một người mà ra hai màu trên cùng một\n * trang là lỗi đã từng xảy ra ở 0.1.0.\n */\nexport const LETTER_AVATAR_TONES = [\n  \"bg-gold-100 text-gold-600 dark:bg-gold-500/30 dark:text-gold-100\",\n  \"bg-teal/15 text-teal\",\n  \"bg-green/15 text-green\",\n  \"bg-red/15 text-red\",\n  \"bg-yellow/25 text-gold-500 dark:bg-yellow/20 dark:text-yellow\",\n  \"bg-chart-3/15 text-chart-3\",\n  \"bg-ash-100 text-ash-700 dark:bg-ash-500/25 dark:text-ash-100\",\n  \"bg-ink/10 text-ink-soft dark:bg-paper/15 dark:text-paper\"\n] as const;\n\nconst sizeClasses: Record<LetterAvatarSize, string> = {\n  xs: \"size-6 text-[10px]\",\n  sm: \"size-7 text-xs\",\n  md: \"size-9 text-sm\",\n  lg: \"size-11 text-base\",\n  xl: \"size-14 text-lg\"\n};\n\n/**\n * Tone màu ổn định theo tên — cùng một người luôn ra cùng màu ở mọi app Comitor.\n *\n * SEED là TÊN (đã trim + hạ chữ thường theo locale vi-VN), không phải email/slug: mọi nơi\n * hiển thị avatar đều chắc chắn có `name`, còn email/slug thì không — lấy khoá khác nhau ở\n * từng chỗ là cách nhanh nhất để cùng một người ra hai màu.\n */\nexport function getLetterAvatarTone(name: string): string {\n  const tones = LETTER_AVATAR_TONES;\n  return tones[hashString(name.trim().toLocaleLowerCase(\"vi-VN\")) % tones.length] ?? tones[0];\n}\n\nexport interface LetterAvatarProps extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** Họ tên đầy đủ — dùng cho cả initials lẫn màu */\n  name: string;\n  /** Có ảnh thì hiện ảnh, không thì rơi về initials */\n  src?: string | null;\n  size?: LetterAvatarSize;\n  /** Bo vuông (dùng cho workspace/app) thay vì tròn (dùng cho người) */\n  square?: boolean;\n  /** Ghi đè tone (chuỗi class token) — vd tô theo màu app thay vì theo tên */\n  toneClassName?: string;\n}\n\n/**\n * Avatar chữ cái: ảnh nếu có, không thì initials kiểu Việt (chữ đầu HỌ + chữ đầu TÊN) trên nền\n * màu suy ra từ tên.\n *\n * Không dùng primitive `Avatar` (Radix) một cách cố ý: Radix Avatar là client component vì phải\n * theo dõi trạng thái tải ảnh; ở danh sách 200 dòng thì đó là 200 island vô ích. Bản này tĩnh\n * hoàn toàn → render thẳng ở server.\n */\nexport function LetterAvatar({\n  name,\n  src,\n  size = \"md\",\n  square = false,\n  toneClassName,\n  className,\n  ...props\n}: LetterAvatarProps) {\n  const tone = toneClassName ?? getLetterAvatarTone(name);\n\n  return (\n    <span\n      data-slot=\"letter-avatar\"\n      title={name}\n      className={cn(\n        \"relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-medium\",\n        square ? \"rounded-md\" : \"rounded-full\",\n        sizeClasses[size],\n        !src && tone,\n        className\n      )}\n      {...props}\n    >\n      {src ? (\n        // Không dùng next/image: entry \".\" phải chạy cả ngoài Next (Vite, Storybook, test).\n        // App muốn tối ưu ảnh thì truyền URL đã qua CDN/loader của mình.\n        // `alt=\"\"`: tên đã nằm ở `sr-only` bên dưới — để alt={name} nữa là đọc tên hai lần.\n        // biome-ignore lint/performance/noImgElement: package dùng chung không phụ thuộc next/*\n        <img src={src} alt=\"\" className=\"size-full object-cover\" loading=\"lazy\" decoding=\"async\" />\n      ) : (\n        <span aria-hidden=\"true\">{getVietnameseInitials(name)}</span>\n      )}\n      {/* Tên cho trình đọc màn hình ở MỌI nhánh: nhánh initials vốn `aria-hidden` (chữ \"NT\"\n          đọc lên vô nghĩa), thiếu dòng này thì avatar không ảnh là một ô màu câm — và khi\n          avatar nằm trong một trigger (AvatarGroup) thì chính nó là tên của trigger đó. */}\n      <span className=\"sr-only\">{name}</span>\n    </span>\n  );\n}\n"],"mappings":"AAiFI,SAiBI,KAjBJ;AAhFJ,SAAS,UAAU;AACnB,SAAS,uBAAuB,kBAAkB;AAgB3C,MAAM,sBAAsB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,cAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AASO,SAAS,oBAAoB,MAAsB;AACxD,QAAM,QAAQ;AACd,SAAO,MAAM,WAAW,KAAK,KAAK,EAAE,kBAAkB,OAAO,CAAC,IAAI,MAAM,MAAM,KAAK,MAAM,CAAC;AAC5F;AAsBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,OAAO,iBAAiB,oBAAoB,IAAI;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,QACT;AAAA,QACA,SAAS,eAAe;AAAA,QACxB,YAAY,IAAI;AAAA,QAChB,CAAC,OAAO;AAAA,QACR;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAKC,oBAAC,SAAI,KAAU,KAAI,IAAG,WAAU,0BAAyB,SAAQ,QAAO,UAAS,SAAQ;AAAA,YAEzF,oBAAC,UAAK,eAAY,QAAQ,gCAAsB,IAAI,GAAE;AAAA,QAKxD,oBAAC,UAAK,WAAU,WAAW,gBAAK;AAAA;AAAA;AAAA,EAClC;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/letter-avatar.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { getAvatarTone } from \"../../lib/avatar-tone.js\";\nimport { cn } from \"../../lib/cn.js\";\nimport { getVietnameseInitials } from \"./text-utils.js\";\n\nexport type LetterAvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nconst sizeClasses: Record<LetterAvatarSize, string> = {\n  xs: \"size-6 text-[10px]\",\n  sm: \"size-7 text-xs\",\n  md: \"size-9 text-sm\",\n  lg: \"size-11 text-base\",\n  xl: \"size-14 text-lg\"\n};\n\n/**\n * Chuỗi class token của tone màu ứng với một tên — cùng một người luôn ra cùng màu ở mọi app\n * Comitor, và cùng màu với bản canvas/email/PDF (`getAvatarToneColors` ở `@comitor/ui/tokens`)\n * vì hai bên đọc CÙNG một bảng tone trong `lib/avatar-tone.ts`.\n *\n * Tên hàm nói đúng thứ nó trả về: `...Classes` = class Tailwind (DOM). Bảng tone không xuất ra\n * ngoài: muốn tô màu khác thì truyền prop `toneClassName`, đừng dựng lại phép chọn tone bằng hàm\n * băm riêng — đó là đường ngắn nhất để cùng một người ra hai màu.\n *\n * SEED là TÊN (được `trim` + hạ chữ thường theo locale vi-VN bên trong), không phải email/slug:\n * mọi nơi hiển thị avatar đều chắc chắn có `name`, còn email/slug thì không.\n */\nexport function getAvatarToneClasses(name: string): string {\n  return getAvatarTone(name).classes;\n}\n\nexport interface LetterAvatarProps extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** Họ tên đầy đủ — dùng cho cả initials lẫn màu */\n  name: string;\n  /** Có ảnh thì hiện ảnh, không thì rơi về initials */\n  src?: string | null;\n  size?: LetterAvatarSize;\n  /** Bo vuông (dùng cho workspace/app) thay vì tròn (dùng cho người) */\n  square?: boolean;\n  /** Ghi đè tone (chuỗi class token) — vd tô theo màu app thay vì theo tên */\n  toneClassName?: string;\n}\n\n/**\n * Avatar chữ cái: ảnh nếu có, không thì initials kiểu Việt (chữ đầu HỌ + chữ đầu TÊN) trên nền\n * màu suy ra từ tên.\n *\n * Không dùng primitive `Avatar` (Radix) một cách cố ý: Radix Avatar là client component vì phải\n * theo dõi trạng thái tải ảnh; ở danh sách 200 dòng thì đó là 200 island vô ích. Bản này tĩnh\n * hoàn toàn → render thẳng ở server.\n */\nexport function LetterAvatar({\n  name,\n  src,\n  size = \"md\",\n  square = false,\n  toneClassName,\n  className,\n  ...props\n}: LetterAvatarProps) {\n  const tone = toneClassName ?? getAvatarToneClasses(name);\n\n  return (\n    <span\n      data-slot=\"letter-avatar\"\n      title={name}\n      className={cn(\n        \"relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden font-medium\",\n        square ? \"rounded-md\" : \"rounded-full\",\n        sizeClasses[size],\n        !src && tone,\n        className\n      )}\n      {...props}\n    >\n      {src ? (\n        // Không dùng next/image: entry \".\" phải chạy cả ngoài Next (Vite, Storybook, test).\n        // App muốn tối ưu ảnh thì truyền URL đã qua CDN/loader của mình.\n        // `alt=\"\"`: tên đã nằm ở `sr-only` bên dưới — để alt={name} nữa là đọc tên hai lần.\n        // biome-ignore lint/performance/noImgElement: package dùng chung không phụ thuộc next/*\n        <img src={src} alt=\"\" className=\"size-full object-cover\" loading=\"lazy\" decoding=\"async\" />\n      ) : (\n        <span aria-hidden=\"true\">{getVietnameseInitials(name)}</span>\n      )}\n      {/* Tên cho trình đọc màn hình ở MỌI nhánh: nhánh initials vốn `aria-hidden` (chữ \"NT\"\n          đọc lên vô nghĩa), thiếu dòng này thì avatar không ảnh là một ô màu câm — và khi\n          avatar nằm trong một trigger (AvatarGroup) thì chính nó là tên của trigger đó. */}\n      <span className=\"sr-only\">{name}</span>\n    </span>\n  );\n}\n"],"mappings":"AA+DI,SAiBI,KAjBJ;AA9DJ,SAAS,qBAAqB;AAC9B,SAAS,UAAU;AACnB,SAAS,6BAA6B;AAItC,MAAM,cAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAcO,SAAS,qBAAqB,MAAsB;AACzD,SAAO,cAAc,IAAI,EAAE;AAC7B;AAsBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,OAAO,iBAAiB,qBAAqB,IAAI;AAEvD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,OAAO;AAAA,MACP,WAAW;AAAA,QACT;AAAA,QACA,SAAS,eAAe;AAAA,QACxB,YAAY,IAAI;AAAA,QAChB,CAAC,OAAO;AAAA,QACR;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAKC,oBAAC,SAAI,KAAU,KAAI,IAAG,WAAU,0BAAyB,SAAQ,QAAO,UAAS,SAAQ;AAAA,YAEzF,oBAAC,UAAK,eAAY,QAAQ,gCAAsB,IAAI,GAAE;AAAA,QAKxD,oBAAC,UAAK,WAAU,WAAW,gBAAK;AAAA;AAAA;AAAA,EAClC;AAEJ;","names":[]}

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

@@ -1,6 +1,41 @@
 import * as React from 'react';
-import { Ref, ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
 
+/**
+ * Chuỗi hiển thị + chuỗi a11y của `SearchFilterBar` — cùng khuôn `DataTableLabels`.
+ *
+ * `searchPlaceholder` và `unitLabel` vốn đã là prop rời và vẫn được giữ (prop thắng `labels`);
+ * các khoá còn lại trước đây chôn cứng, trong đó có `sr-only` và nội dung nút mà KHÔNG prop nào
+ * chạm tới — app tiếng Anh ghép thanh này với `DataTable` đã i18n sẽ ra giao diện nửa Việt nửa Anh.
+ */
+interface SearchFilterBarLabels {
+    /** Placeholder + `aria-label` của ô tìm */
+    searchPlaceholder: string;
+    /**
+     * Đơn vị đếm mặc định ("mục" / "items") — prop `unitLabel` vẫn ghi đè được riêng.
+     *
+     * Cùng lý do như `TablePaginationLabels.unitLabel`: mặc định là chuỗi theo NGÔN NGỮ nên
+     * phải override được qua `labels`, còn prop `unitLabel` là chuỗi theo NỘI DUNG của từng
+     * bảng ("việc", "liên hệ") nên vẫn là prop rời và vẫn thắng `labels`.
+     */
+    unitLabel: string;
+    /** `sr-only` của nút xoá từ khoá trong ô tìm */
+    clearSearch: string;
+    /** Huy hiệu đếm bộ lọc đang bật: "3 bộ lọc" */
+    filterCount: (count: number) => string;
+    /** Nhãn nút xoá toàn bộ bộ lọc */
+    clearFilters: string;
+    /**
+     * Dòng đếm kết quả sau lọc: "**3** / 57 mục" (`total` bỏ trống thì chỉ "**3** mục").
+     *
+     * Trả `ReactNode` chứ không phải chuỗi vì con số cần thẻ riêng (`tabular-nums` để số không
+     * nhảy cột, `text-foreground` để nổi trên nền chữ mờ) — ép về chuỗi là mất phần định dạng đó.
+     * Là hàm vì trật tự số/đơn vị không giống nhau giữa các ngôn ngữ.
+     */
+    resultSummary: (resultCount: number, total: number | undefined, unitLabel: string) => ReactNode;
+}
+/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */
+declare const DEFAULT_SEARCH_FILTER_BAR_LABELS: SearchFilterBarLabels;
 interface SearchFilterBarProps {
     /** Giá trị ô tìm kiếm (controlled) */
     searchValue: string;
@@ -22,7 +57,10 @@ interface SearchFilterBarProps {
     resultCount?: number;
     /** Tổng số bản ghi khi chưa lọc */
     total?: number;
+    /** Đơn vị đếm theo nội dung bảng, vd "việc", "liên hệ" — mặc định `labels.unitLabel` ("mục") */
     unitLabel?: string;
+    /** Ghi đè chuỗi hiển thị/a11y (mặc định tiếng Việt) — xem `SearchFilterBarLabels` */
+    labels?: Partial<SearchFilterBarLabels>;
     className?: string;
 }
 /**
@@ -33,6 +71,6 @@ interface SearchFilterBarProps {
  *
  * Dòng đếm kết quả có `min-h-7` cố định để việc bật/tắt lọc không làm bảng nhảy lên xuống.
  */
-declare function SearchFilterBar({ searchValue, onSearchChange, searchPlaceholder, debounceMs, searchInputRef, searchInputProps, children, actions, activeFilterCount, onClearFilters, resultCount, total, unitLabel, className }: SearchFilterBarProps): React.JSX.Element;
+declare function SearchFilterBar({ searchValue, onSearchChange, searchPlaceholder, debounceMs, searchInputRef, searchInputProps, children, actions, activeFilterCount, onClearFilters, resultCount, total, unitLabel: unitLabelProp, labels: labelsProp, className }: SearchFilterBarProps): React.JSX.Element;
 
-export { SearchFilterBar, type SearchFilterBarProps };
+export { DEFAULT_SEARCH_FILTER_BAR_LABELS, SearchFilterBar, type SearchFilterBarLabels, type SearchFilterBarProps };

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

@@ -1,15 +1,28 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Search, SlidersHorizontal, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { cn } from "../../lib/cn.js";
 import { Badge } from "../ui/badge.js";
 import { Button } from "../ui/button.js";
 import { Input } from "../ui/input.js";
+const DEFAULT_SEARCH_FILTER_BAR_LABELS = {
+  searchPlaceholder: "T\xECm ki\u1EBFm\u2026",
+  unitLabel: "m\u1EE5c",
+  clearSearch: "X\xF3a t\u1EEB kh\xF3a",
+  filterCount: (count) => `${count} b\u1ED9 l\u1ECDc`,
+  clearFilters: "X\xF3a l\u1ECDc",
+  resultSummary: (resultCount, total, unitLabel) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("strong", { className: "font-medium text-foreground tabular-nums", children: resultCount }),
+    total !== void 0 ? ` / ${total}` : "",
+    " ",
+    unitLabel
+  ] })
+};
 function SearchFilterBar({
   searchValue,
   onSearchChange,
-  searchPlaceholder = "T\xECm ki\u1EBFm\u2026",
+  searchPlaceholder,
   debounceMs = 250,
   searchInputRef,
   searchInputProps,
@@ -19,9 +32,13 @@ function SearchFilterBar({
   onClearFilters,
   resultCount,
   total,
-  unitLabel = "m\u1EE5c",
+  unitLabel: unitLabelProp,
+  labels: labelsProp,
   className
 }) {
+  const labels = { ...DEFAULT_SEARCH_FILTER_BAR_LABELS, ...labelsProp };
+  const placeholder = searchPlaceholder ?? labels.searchPlaceholder;
+  const unitLabel = unitLabelProp ?? labels.unitLabel;
   const [localValue, setLocalValue] = useState(searchValue);
   const lastEmittedRef = useRef(searchValue);
   const timerRef = useRef(null);
@@ -85,8 +102,8 @@ function SearchFilterBar({
             ref: searchInputRef,
             type: "search",
             value: localValue,
-            placeholder: searchPlaceholder,
-            "aria-label": searchPlaceholder,
+            placeholder,
+            "aria-label": placeholder,
             onChange: (event) => emit(event.target.value),
             className: "pl-9 pr-8 [&::-webkit-search-cancel-button]:hidden",
             ...searchInputProps
@@ -102,7 +119,7 @@ function SearchFilterBar({
             className: "absolute right-1 top-1/2 size-6 -translate-y-1/2",
             children: [
               /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "X\xF3a t\u1EEB kh\xF3a" })
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.clearSearch })
             ]
           }
         )
@@ -110,26 +127,21 @@ function SearchFilterBar({
       children,
       hasFilters && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "gap-1", children: [
         /* @__PURE__ */ jsx(SlidersHorizontal, { "aria-hidden": "true" }),
-        activeFilterCount,
-        " b\u1ED9 l\u1ECDc"
+        labels.filterCount(activeFilterCount)
       ] }),
       actions && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children: actions })
     ] }),
     showCount && /* @__PURE__ */ jsxs("div", { role: "status", className: "flex min-h-7 items-center gap-2 text-sm text-muted-foreground", children: [
-      resultCount !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
-        /* @__PURE__ */ jsx("strong", { className: "font-medium text-foreground tabular-nums", children: resultCount }),
-        total !== void 0 ? ` / ${total}` : "",
-        " ",
-        unitLabel
-      ] }),
+      resultCount !== void 0 && /* @__PURE__ */ jsx("span", { children: labels.resultSummary(resultCount, total, unitLabel) }),
       hasFilters && onClearFilters && /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClearFilters, className: "h-7 gap-1.5 px-2", children: [
         /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-3.5" }),
-        "X\xF3a l\u1ECDc"
+        labels.clearFilters
       ] })
     ] })
   ] });
 }
 export {
+  DEFAULT_SEARCH_FILTER_BAR_LABELS,
   SearchFilterBar
 };
 //# sourceMappingURL=search-filter-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/search-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Search, SlidersHorizontal, X } from \"lucide-react\";\nimport { type ComponentPropsWithoutRef, type ReactNode, type Ref, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Badge } from \"../ui/badge.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Input } from \"../ui/input.js\";\n\nexport interface SearchFilterBarProps {\n  /** Giá trị ô tìm kiếm (controlled) */\n  searchValue: string;\n  onSearchChange: (value: string) => void;\n  searchPlaceholder?: string;\n  /** Trễ trước khi gọi `onSearchChange` (ms). 0 = gọi ngay. Gõ tìm gọi API thì đặt 250–350. */\n  debounceMs?: number;\n  searchInputRef?: Ref<HTMLInputElement>;\n  /** Props đặt thẳng lên ô nhập (id, name, aria-label, enterKeyHint…) */\n  searchInputProps?: ComponentPropsWithoutRef<\"input\">;\n\n  /** Slot bộ lọc cạnh ô tìm (Select, Combobox, DatePicker…) */\n  children?: ReactNode;\n  /** Slot hành động bên phải (nút Tạo mới, menu cột…) */\n  actions?: ReactNode;\n\n  /** Số bộ lọc đang bật — hiện huy hiệu và mở dòng đếm kết quả */\n  activeFilterCount?: number;\n  onClearFilters?: () => void;\n  /** Số bản ghi sau lọc */\n  resultCount?: number;\n  /** Tổng số bản ghi khi chưa lọc */\n  total?: number;\n  unitLabel?: string;\n  className?: string;\n}\n\n/**\n * Thanh tìm kiếm + lọc chuẩn cho trang danh sách.\n *\n * Ô tìm giữ giá trị cục bộ và chỉ đẩy lên sau `debounceMs` — nếu bind thẳng vào state của trang,\n * mỗi phím gõ là một lần render cả bảng (và thường là một request).\n *\n * Dòng đếm kết quả có `min-h-7` cố định để việc bật/tắt lọc không làm bảng nhảy lên xuống.\n */\nexport function SearchFilterBar({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder = \"Tìm kiếm…\",\n  debounceMs = 250,\n  searchInputRef,\n  searchInputProps,\n  children,\n  actions,\n  activeFilterCount = 0,\n  onClearFilters,\n  resultCount,\n  total,\n  unitLabel = \"mục\",\n  className\n}: SearchFilterBarProps) {\n  const [localValue, setLocalValue] = useState(searchValue);\n  const lastEmittedRef = useRef(searchValue);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const onSearchChangeRef = useRef(onSearchChange);\n\n  useEffect(() => {\n    onSearchChangeRef.current = onSearchChange;\n  });\n\n  // Đồng bộ khi giá trị bị đổi từ bên ngoài (nút \"Xóa lọc\", điều hướng lại trang) — nhưng\n  // không đè lên những gì người dùng đang gõ dở.\n  useEffect(() => {\n    if (searchValue !== lastEmittedRef.current) {\n      lastEmittedRef.current = searchValue;\n      setLocalValue(searchValue);\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    }\n  }, [searchValue]);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    []\n  );\n\n  const emit = (value: string) => {\n    setLocalValue(value);\n    if (timerRef.current) clearTimeout(timerRef.current);\n    if (!debounceMs) {\n      lastEmittedRef.current = value;\n      onSearchChangeRef.current(value);\n      return;\n    }\n    timerRef.current = setTimeout(() => {\n      lastEmittedRef.current = value;\n      onSearchChangeRef.current(value);\n    }, debounceMs);\n  };\n\n  const clearSearch = () => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n    setLocalValue(\"\");\n    lastEmittedRef.current = \"\";\n    onSearchChangeRef.current(\"\");\n  };\n\n  const hasFilters = activeFilterCount > 0;\n  const showCount = hasFilters || Boolean(localValue);\n\n  return (\n    <div data-slot=\"search-filter-bar\" className={cn(\"flex flex-col gap-2\", className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <div className=\"relative min-w-[12rem] flex-1 sm:max-w-sm\">\n          <Search\n            aria-hidden=\"true\"\n            className=\"absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\"\n          />\n          <Input\n            ref={searchInputRef}\n            type=\"search\"\n            value={localValue}\n            placeholder={searchPlaceholder}\n            aria-label={searchPlaceholder}\n            onChange={(event) => emit(event.target.value)}\n            className=\"pl-9 pr-8 [&::-webkit-search-cancel-button]:hidden\"\n            {...searchInputProps}\n          />\n          {localValue && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              onClick={clearSearch}\n              className=\"absolute right-1 top-1/2 size-6 -translate-y-1/2\"\n            >\n              <X aria-hidden=\"true\" className=\"size-3.5\" />\n              <span className=\"sr-only\">Xóa từ khóa</span>\n            </Button>\n          )}\n        </div>\n\n        {children}\n\n        {hasFilters && (\n          <Badge variant=\"secondary\" className=\"gap-1\">\n            <SlidersHorizontal aria-hidden=\"true\" />\n            {activeFilterCount} bộ lọc\n          </Badge>\n        )}\n\n        {actions && <div className=\"ml-auto flex items-center gap-2\">{actions}</div>}\n      </div>\n\n      {showCount && (\n        <div role=\"status\" className=\"flex min-h-7 items-center gap-2 text-sm text-muted-foreground\">\n          {resultCount !== undefined && (\n            <span>\n              <strong className=\"font-medium text-foreground tabular-nums\">{resultCount}</strong>\n              {total !== undefined ? ` / ${total}` : \"\"} {unitLabel}\n            </span>\n          )}\n          {hasFilters && onClearFilters && (\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onClearFilters} className=\"h-7 gap-1.5 px-2\">\n              <X aria-hidden=\"true\" className=\"size-3.5\" />\n              Xóa lọc\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/composite/search-filter-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport { Search, SlidersHorizontal, X } from \"lucide-react\";\nimport { type ComponentPropsWithoutRef, type ReactNode, type Ref, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Badge } from \"../ui/badge.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Input } from \"../ui/input.js\";\n\n/**\n * Chuỗi hiển thị + chuỗi a11y của `SearchFilterBar` — cùng khuôn `DataTableLabels`.\n *\n * `searchPlaceholder` và `unitLabel` vốn đã là prop rời và vẫn được giữ (prop thắng `labels`);\n * các khoá còn lại trước đây chôn cứng, trong đó có `sr-only` và nội dung nút mà KHÔNG prop nào\n * chạm tới — app tiếng Anh ghép thanh này với `DataTable` đã i18n sẽ ra giao diện nửa Việt nửa Anh.\n */\nexport interface SearchFilterBarLabels {\n  /** Placeholder + `aria-label` của ô tìm */\n  searchPlaceholder: string;\n  /**\n   * Đơn vị đếm mặc định (\"mục\" / \"items\") — prop `unitLabel` vẫn ghi đè được riêng.\n   *\n   * Cùng lý do như `TablePaginationLabels.unitLabel`: mặc định là chuỗi theo NGÔN NGỮ nên\n   * phải override được qua `labels`, còn prop `unitLabel` là chuỗi theo NỘI DUNG của từng\n   * bảng (\"việc\", \"liên hệ\") nên vẫn là prop rời và vẫn thắng `labels`.\n   */\n  unitLabel: string;\n  /** `sr-only` của nút xoá từ khoá trong ô tìm */\n  clearSearch: string;\n  /** Huy hiệu đếm bộ lọc đang bật: \"3 bộ lọc\" */\n  filterCount: (count: number) => string;\n  /** Nhãn nút xoá toàn bộ bộ lọc */\n  clearFilters: string;\n  /**\n   * Dòng đếm kết quả sau lọc: \"**3** / 57 mục\" (`total` bỏ trống thì chỉ \"**3** mục\").\n   *\n   * Trả `ReactNode` chứ không phải chuỗi vì con số cần thẻ riêng (`tabular-nums` để số không\n   * nhảy cột, `text-foreground` để nổi trên nền chữ mờ) — ép về chuỗi là mất phần định dạng đó.\n   * Là hàm vì trật tự số/đơn vị không giống nhau giữa các ngôn ngữ.\n   */\n  resultSummary: (resultCount: number, total: number | undefined, unitLabel: string) => ReactNode;\n}\n\n/** Nhãn tiếng Việt mặc định — mọi khoá đều override được qua prop `labels`. */\nexport const DEFAULT_SEARCH_FILTER_BAR_LABELS: SearchFilterBarLabels = {\n  searchPlaceholder: \"Tìm kiếm…\",\n  unitLabel: \"mục\",\n  clearSearch: \"Xóa từ khóa\",\n  filterCount: (count) => `${count} bộ lọc`,\n  clearFilters: \"Xóa lọc\",\n  resultSummary: (resultCount, total, unitLabel) => (\n    <>\n      <strong className=\"font-medium text-foreground tabular-nums\">{resultCount}</strong>\n      {total !== undefined ? ` / ${total}` : \"\"} {unitLabel}\n    </>\n  )\n};\n\nexport interface SearchFilterBarProps {\n  /** Giá trị ô tìm kiếm (controlled) */\n  searchValue: string;\n  onSearchChange: (value: string) => void;\n  searchPlaceholder?: string;\n  /** Trễ trước khi gọi `onSearchChange` (ms). 0 = gọi ngay. Gõ tìm gọi API thì đặt 250–350. */\n  debounceMs?: number;\n  searchInputRef?: Ref<HTMLInputElement>;\n  /** Props đặt thẳng lên ô nhập (id, name, aria-label, enterKeyHint…) */\n  searchInputProps?: ComponentPropsWithoutRef<\"input\">;\n\n  /** Slot bộ lọc cạnh ô tìm (Select, Combobox, DatePicker…) */\n  children?: ReactNode;\n  /** Slot hành động bên phải (nút Tạo mới, menu cột…) */\n  actions?: ReactNode;\n\n  /** Số bộ lọc đang bật — hiện huy hiệu và mở dòng đếm kết quả */\n  activeFilterCount?: number;\n  onClearFilters?: () => void;\n  /** Số bản ghi sau lọc */\n  resultCount?: number;\n  /** Tổng số bản ghi khi chưa lọc */\n  total?: number;\n  /** Đơn vị đếm theo nội dung bảng, vd \"việc\", \"liên hệ\" — mặc định `labels.unitLabel` (\"mục\") */\n  unitLabel?: string;\n  /** Ghi đè chuỗi hiển thị/a11y (mặc định tiếng Việt) — xem `SearchFilterBarLabels` */\n  labels?: Partial<SearchFilterBarLabels>;\n  className?: string;\n}\n\n/**\n * Thanh tìm kiếm + lọc chuẩn cho trang danh sách.\n *\n * Ô tìm giữ giá trị cục bộ và chỉ đẩy lên sau `debounceMs` — nếu bind thẳng vào state của trang,\n * mỗi phím gõ là một lần render cả bảng (và thường là một request).\n *\n * Dòng đếm kết quả có `min-h-7` cố định để việc bật/tắt lọc không làm bảng nhảy lên xuống.\n */\nexport function SearchFilterBar({\n  searchValue,\n  onSearchChange,\n  searchPlaceholder,\n  debounceMs = 250,\n  searchInputRef,\n  searchInputProps,\n  children,\n  actions,\n  activeFilterCount = 0,\n  onClearFilters,\n  resultCount,\n  total,\n  unitLabel: unitLabelProp,\n  labels: labelsProp,\n  className\n}: SearchFilterBarProps) {\n  const labels = { ...DEFAULT_SEARCH_FILTER_BAR_LABELS, ...labelsProp };\n  const placeholder = searchPlaceholder ?? labels.searchPlaceholder;\n  const unitLabel = unitLabelProp ?? labels.unitLabel;\n  const [localValue, setLocalValue] = useState(searchValue);\n  const lastEmittedRef = useRef(searchValue);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const onSearchChangeRef = useRef(onSearchChange);\n\n  useEffect(() => {\n    onSearchChangeRef.current = onSearchChange;\n  });\n\n  // Đồng bộ khi giá trị bị đổi từ bên ngoài (nút \"Xóa lọc\", điều hướng lại trang) — nhưng\n  // không đè lên những gì người dùng đang gõ dở.\n  useEffect(() => {\n    if (searchValue !== lastEmittedRef.current) {\n      lastEmittedRef.current = searchValue;\n      setLocalValue(searchValue);\n      if (timerRef.current) {\n        clearTimeout(timerRef.current);\n        timerRef.current = null;\n      }\n    }\n  }, [searchValue]);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    []\n  );\n\n  const emit = (value: string) => {\n    setLocalValue(value);\n    if (timerRef.current) clearTimeout(timerRef.current);\n    if (!debounceMs) {\n      lastEmittedRef.current = value;\n      onSearchChangeRef.current(value);\n      return;\n    }\n    timerRef.current = setTimeout(() => {\n      lastEmittedRef.current = value;\n      onSearchChangeRef.current(value);\n    }, debounceMs);\n  };\n\n  const clearSearch = () => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n      timerRef.current = null;\n    }\n    setLocalValue(\"\");\n    lastEmittedRef.current = \"\";\n    onSearchChangeRef.current(\"\");\n  };\n\n  const hasFilters = activeFilterCount > 0;\n  const showCount = hasFilters || Boolean(localValue);\n\n  return (\n    <div data-slot=\"search-filter-bar\" className={cn(\"flex flex-col gap-2\", className)}>\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <div className=\"relative min-w-[12rem] flex-1 sm:max-w-sm\">\n          <Search\n            aria-hidden=\"true\"\n            className=\"absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\"\n          />\n          <Input\n            ref={searchInputRef}\n            type=\"search\"\n            value={localValue}\n            placeholder={placeholder}\n            aria-label={placeholder}\n            onChange={(event) => emit(event.target.value)}\n            className=\"pl-9 pr-8 [&::-webkit-search-cancel-button]:hidden\"\n            {...searchInputProps}\n          />\n          {localValue && (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              onClick={clearSearch}\n              className=\"absolute right-1 top-1/2 size-6 -translate-y-1/2\"\n            >\n              <X aria-hidden=\"true\" className=\"size-3.5\" />\n              <span className=\"sr-only\">{labels.clearSearch}</span>\n            </Button>\n          )}\n        </div>\n\n        {children}\n\n        {hasFilters && (\n          <Badge variant=\"secondary\" className=\"gap-1\">\n            <SlidersHorizontal aria-hidden=\"true\" />\n            {labels.filterCount(activeFilterCount)}\n          </Badge>\n        )}\n\n        {actions && <div className=\"ml-auto flex items-center gap-2\">{actions}</div>}\n      </div>\n\n      {showCount && (\n        <div role=\"status\" className=\"flex min-h-7 items-center gap-2 text-sm text-muted-foreground\">\n          {resultCount !== undefined && <span>{labels.resultSummary(resultCount, total, unitLabel)}</span>}\n          {hasFilters && onClearFilters && (\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" onClick={onClearFilters} className=\"h-7 gap-1.5 px-2\">\n              <X aria-hidden=\"true\" className=\"size-3.5\" />\n              {labels.clearFilters}\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/composite/stat-card.d.ts

@@ -4,7 +4,22 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
 import { VariantProps } from 'class-variance-authority';
 import { IconComponent } from './empty-state.js';
 
-/** Ô icon của StatCard, tô theo tone token (không hex). */
+/**
+ * Ô icon của StatCard, tô theo tone token (không hex).
+ *
+ * Icon là thành phần PHI VĂN BẢN → ngưỡng WCAG 1.4.11 là 3:1 so với nền tint mà nó đứng lên.
+ * Màu icon vì thế phải là bậc `--x-ink`, không phải token tô nền `--x`: `text-success` trên
+ * `bg-success/15` chỉ được **2,69:1 ✗** ở light (dark thì 7,44:1 — mỗi theme hỏng một nửa là
+ * dấu hiệu dùng sai vai trò token). Đo lại sau khi đổi, trên tint đã trộn với `--card`:
+ *
+ *     success 5,60:1 (L) · 7,44:1 (D)   ·   info        5,54:1 (L) · 7,12:1 (D)
+ *     warning 5,93:1 (L) · 7,19:1 (D)   ·   destructive 5,76:1 (L) · 5,71:1 (D)
+ *     default 4,89:1 (L) · 4,86:1 (D)   ·   primary     5,77:1 (L) ·  7,26:1 (D)
+ *     app     6,14:1 (L) · 9,61:1 (D)
+ *
+ * `warning` bỏ cặp `text-gold-500 dark:text-warning`: `--warning-ink` đúng bằng `--gold-500` ở
+ * light và `--yellow` ở dark, nên một class là đủ.
+ */
 declare const statCardIconVariants: (props?: ({
     tone?: "default" | "primary" | "success" | "warning" | "destructive" | "info" | "app" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/composite/stat-card.js

@@ -7,14 +7,21 @@ const statCardIconVariants = cva("flex size-9 shrink-0 items-center justify-cent
   variants: {
     tone: {
       default: "bg-muted text-muted-foreground",
-      primary: "bg-gold-100 text-gold-600 dark:bg-gold-500/25 dark:text-gold-100",
-      success: "bg-success/15 text-success",
-      warning: "bg-warning/20 text-gold-500 dark:text-warning",
-      destructive: "bg-destructive/15 text-destructive",
-      info: "bg-info/15 text-info",
-      // text-foreground (không phải text-app-accent): accent mặc định là gold #E8B824, đặt làm
-      // màu icon trên nền sáng chỉ được ~1.9:1 — nhìn như bị mờ.
-      app: "bg-app-accent/10 text-foreground"
+      // Đi theo `--primary`, không phải thang `gold-*` chôn cứng. Bản cũ
+      // `bg-gold-100 text-gold-600 dark:bg-gold-500/25 dark:text-gold-100` đạt tương phản
+      // (7,77:1 L · 11,85:1 D) nhưng đóng băng màu: app đổi brand thì ô icon vẫn vàng, và phải
+      // viết hai lớp `dark:` vì thang gold không có bản dark. Token đạt 5,77:1 (L) · 7,26:1 (D).
+      primary: "bg-primary/20 text-primary-ink",
+      success: "bg-success/15 text-success-ink",
+      warning: "bg-warning/20 text-warning-ink",
+      destructive: "bg-destructive/15 text-destructive-ink",
+      info: "bg-info/15 text-info-ink",
+      // Icon app đứng trên tint của CHÍNH nó → phải là bậc ink, đúng như năm tone trên.
+      // `text-app-accent` (gold #E8B824) trên `bg-app-accent/10` (trộn ra #FDF8E9) chỉ 1,75:1 ✗.
+      // `text-foreground` như bản trước thì ĐỌC được (17,81:1) nhưng bỏ mất màu app — tức là bỏ
+      // mất đúng thứ tone này sinh ra để nói. `text-app-accent-ink`: 6,14:1 (L) · 9,61:1 (D) ✓
+      // — hợp đồng §5, cùng lối chữa với AppLauncher.
+      app: "bg-app-accent/10 text-app-accent-ink"
     }
   },
   defaultVariants: {
@@ -29,7 +36,7 @@ const deltaIcons = {
 function deltaToneClass({ direction, polarity = "positive-up" }) {
   if (direction === "flat" || polarity === "neutral") return "text-muted-foreground";
   const isGood = polarity === "positive-up" ? direction === "up" : direction === "down";
-  return isGood ? "text-success" : "text-destructive";
+  return isGood ? "text-success-ink" : "text-destructive-ink";
 }
 function StatCard({
   label,

package/dist/components/composite/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/stat-card.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { ArrowDownRight, ArrowUpRight, Minus } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Skeleton } from \"../ui/skeleton.js\";\nimport type { IconComponent } from \"./empty-state.js\";\n\n/** Ô icon của StatCard, tô theo tone token (không hex). */\nexport const statCardIconVariants = cva(\"flex size-9 shrink-0 items-center justify-center rounded-md\", {\n  variants: {\n    tone: {\n      default: \"bg-muted text-muted-foreground\",\n      primary: \"bg-gold-100 text-gold-600 dark:bg-gold-500/25 dark:text-gold-100\",\n      success: \"bg-success/15 text-success\",\n      warning: \"bg-warning/20 text-gold-500 dark:text-warning\",\n      destructive: \"bg-destructive/15 text-destructive\",\n      info: \"bg-info/15 text-info\",\n      // text-foreground (không phải text-app-accent): accent mặc định là gold #E8B824, đặt làm\n      // màu icon trên nền sáng chỉ được ~1.9:1 — nhìn như bị mờ.\n      app: \"bg-app-accent/10 text-foreground\"\n    }\n  },\n  defaultVariants: {\n    tone: \"default\"\n  }\n});\n\nexport type StatCardTone = NonNullable<VariantProps<typeof statCardIconVariants>[\"tone\"]>;\n\nexport type StatCardDeltaDirection = \"up\" | \"down\" | \"flat\";\n\nexport interface StatCardDelta {\n  /** Nội dung hiển thị, vd \"+12,5%\" hoặc \"3 việc\" */\n  value: ReactNode;\n  direction: StatCardDeltaDirection;\n  /**\n   * Tăng là TỐT hay XẤU — mặc định \"positive-up\" (tăng = tốt).\n   *\n   * Cần thiết vì có chỉ số ngược chiều: số ticket quá hạn tăng là xấu, tỷ lệ rời bỏ giảm là tốt.\n   * Tô màu theo hướng mũi tên một cách máy móc sẽ nói dối người đọc.\n   */\n  polarity?: \"positive-up\" | \"positive-down\" | \"neutral\";\n  /** Chú thích sau con số, vd \"so với tuần trước\" */\n  label?: ReactNode;\n}\n\nexport interface StatCardProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** Nhãn chỉ số, vd \"Việc đang mở\" */\n  label: ReactNode;\n  value: ReactNode;\n  icon?: IconComponent;\n  tone?: StatCardTone;\n  delta?: StatCardDelta;\n  /** Slot biểu đồ mini (sparkline) — package không ép thư viện biểu đồ nào */\n  sparkline?: ReactNode;\n  /** Dòng chú thích dưới cùng */\n  footer?: ReactNode;\n  /** Đang tải → khung xương thay cho số liệu */\n  loading?: boolean;\n}\n\nconst deltaIcons: Record<StatCardDeltaDirection, IconComponent> = {\n  up: ArrowUpRight,\n  down: ArrowDownRight,\n  flat: Minus\n};\n\n/** Màu của delta = hướng × cực tính, không phải chỉ hướng. */\nfunction deltaToneClass({ direction, polarity = \"positive-up\" }: StatCardDelta): string {\n  if (direction === \"flat\" || polarity === \"neutral\") return \"text-muted-foreground\";\n  const isGood = polarity === \"positive-up\" ? direction === \"up\" : direction === \"down\";\n  return isGood ? \"text-success\" : \"text-destructive\";\n}\n\n/**\n * Thẻ KPI: nhãn + số liệu lớn + biến động + sparkline tuỳ chọn.\n *\n * Số liệu dùng `tabular-nums` để cột số không nhảy khi cập nhật realtime. Tĩnh → RSC-safe.\n */\nexport function StatCard({\n  label,\n  value,\n  icon: Icon,\n  tone = \"default\",\n  delta,\n  sparkline,\n  footer,\n  loading = false,\n  className,\n  ...props\n}: StatCardProps) {\n  const DeltaIcon = delta ? deltaIcons[delta.direction] : undefined;\n\n  return (\n    <div\n      data-slot=\"stat-card\"\n      className={cn(\"rounded-xl border border-border bg-card p-4 shadow-card\", className)}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"truncate text-sm text-muted-foreground\">{label}</p>\n          {loading ? (\n            <Skeleton className=\"mt-2 h-7 w-24\" />\n          ) : (\n            <p className=\"mt-1 text-2xl font-semibold tabular-nums leading-tight text-foreground\">{value}</p>\n          )}\n          {delta && !loading && DeltaIcon && (\n            <p className={cn(\"mt-1 flex items-center gap-1 text-xs font-medium\", deltaToneClass(delta))}>\n              <DeltaIcon aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n              <span className=\"tabular-nums\">{delta.value}</span>\n              {delta.label && <span className=\"font-normal text-muted-foreground\">{delta.label}</span>}\n            </p>\n          )}\n        </div>\n        {Icon && (\n          <span aria-hidden=\"true\" className={statCardIconVariants({ tone })}>\n            <Icon className=\"size-4.5\" />\n          </span>\n        )}\n      </div>\n\n      {sparkline && <div className=\"mt-3 h-10\">{sparkline}</div>}\n      {footer && <div className=\"mt-3 border-t border-border pt-2 text-xs text-muted-foreground\">{footer}</div>}\n    </div>\n  );\n}\n"],"mappings":"AAqGU,cAOE,YAPF;AArGV,SAAS,WAA8B;AACvC,SAAS,gBAAgB,cAAc,aAAa;AAEpD,SAAS,UAAU;AACnB,SAAS,gBAAgB;AAIlB,MAAM,uBAAuB,IAAI,+DAA+D;AAAA,EACrG,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM;AAAA;AAAA;AAAA,MAGN,KAAK;AAAA,IACP;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAoCD,MAAM,aAA4D;AAAA,EAChE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AACR;AAGA,SAAS,eAAe,EAAE,WAAW,WAAW,cAAc,GAA0B;AACtF,MAAI,cAAc,UAAU,aAAa,UAAW,QAAO;AAC3D,QAAM,SAAS,aAAa,gBAAgB,cAAc,OAAO,cAAc;AAC/E,SAAO,SAAS,iBAAiB;AACnC;AAOO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,QAAQ,WAAW,MAAM,SAAS,IAAI;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2DAA2D,SAAS;AAAA,MACjF,GAAG;AAAA,MAEJ;AAAA,6BAAC,SAAI,WAAU,0CACb;AAAA,+BAAC,SAAI,WAAU,kBACb;AAAA,gCAAC,OAAE,WAAU,0CAA0C,iBAAM;AAAA,YAC5D,UACC,oBAAC,YAAS,WAAU,iBAAgB,IAEpC,oBAAC,OAAE,WAAU,0EAA0E,iBAAM;AAAA,YAE9F,SAAS,CAAC,WAAW,aACpB,qBAAC,OAAE,WAAW,GAAG,oDAAoD,eAAe,KAAK,CAAC,GACxF;AAAA,kCAAC,aAAU,eAAY,QAAO,WAAU,qBAAoB;AAAA,cAC5D,oBAAC,UAAK,WAAU,gBAAgB,gBAAM,OAAM;AAAA,cAC3C,MAAM,SAAS,oBAAC,UAAK,WAAU,qCAAqC,gBAAM,OAAM;AAAA,eACnF;AAAA,aAEJ;AAAA,UACC,QACC,oBAAC,UAAK,eAAY,QAAO,WAAW,qBAAqB,EAAE,KAAK,CAAC,GAC/D,8BAAC,QAAK,WAAU,YAAW,GAC7B;AAAA,WAEJ;AAAA,QAEC,aAAa,oBAAC,SAAI,WAAU,aAAa,qBAAU;AAAA,QACnD,UAAU,oBAAC,SAAI,WAAU,kEAAkE,kBAAO;AAAA;AAAA;AAAA,EACrG;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/stat-card.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { ArrowDownRight, ArrowUpRight, Minus } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Skeleton } from \"../ui/skeleton.js\";\nimport type { IconComponent } from \"./empty-state.js\";\n\n/**\n * Ô icon của StatCard, tô theo tone token (không hex).\n *\n * Icon là thành phần PHI VĂN BẢN → ngưỡng WCAG 1.4.11 là 3:1 so với nền tint mà nó đứng lên.\n * Màu icon vì thế phải là bậc `--x-ink`, không phải token tô nền `--x`: `text-success` trên\n * `bg-success/15` chỉ được **2,69:1 ✗** ở light (dark thì 7,44:1 — mỗi theme hỏng một nửa là\n * dấu hiệu dùng sai vai trò token). Đo lại sau khi đổi, trên tint đã trộn với `--card`:\n *\n *     success 5,60:1 (L) · 7,44:1 (D)   ·   info        5,54:1 (L) · 7,12:1 (D)\n *     warning 5,93:1 (L) · 7,19:1 (D)   ·   destructive 5,76:1 (L) · 5,71:1 (D)\n *     default 4,89:1 (L) · 4,86:1 (D)   ·   primary     5,77:1 (L) ·  7,26:1 (D)\n *     app     6,14:1 (L) · 9,61:1 (D)\n *\n * `warning` bỏ cặp `text-gold-500 dark:text-warning`: `--warning-ink` đúng bằng `--gold-500` ở\n * light và `--yellow` ở dark, nên một class là đủ.\n */\nexport const statCardIconVariants = cva(\"flex size-9 shrink-0 items-center justify-center rounded-md\", {\n  variants: {\n    tone: {\n      default: \"bg-muted text-muted-foreground\",\n      // Đi theo `--primary`, không phải thang `gold-*` chôn cứng. Bản cũ\n      // `bg-gold-100 text-gold-600 dark:bg-gold-500/25 dark:text-gold-100` đạt tương phản\n      // (7,77:1 L · 11,85:1 D) nhưng đóng băng màu: app đổi brand thì ô icon vẫn vàng, và phải\n      // viết hai lớp `dark:` vì thang gold không có bản dark. Token đạt 5,77:1 (L) · 7,26:1 (D).\n      primary: \"bg-primary/20 text-primary-ink\",\n      success: \"bg-success/15 text-success-ink\",\n      warning: \"bg-warning/20 text-warning-ink\",\n      destructive: \"bg-destructive/15 text-destructive-ink\",\n      info: \"bg-info/15 text-info-ink\",\n      // Icon app đứng trên tint của CHÍNH nó → phải là bậc ink, đúng như năm tone trên.\n      // `text-app-accent` (gold #E8B824) trên `bg-app-accent/10` (trộn ra #FDF8E9) chỉ 1,75:1 ✗.\n      // `text-foreground` như bản trước thì ĐỌC được (17,81:1) nhưng bỏ mất màu app — tức là bỏ\n      // mất đúng thứ tone này sinh ra để nói. `text-app-accent-ink`: 6,14:1 (L) · 9,61:1 (D) ✓\n      // — hợp đồng §5, cùng lối chữa với AppLauncher.\n      app: \"bg-app-accent/10 text-app-accent-ink\"\n    }\n  },\n  defaultVariants: {\n    tone: \"default\"\n  }\n});\n\nexport type StatCardTone = NonNullable<VariantProps<typeof statCardIconVariants>[\"tone\"]>;\n\nexport type StatCardDeltaDirection = \"up\" | \"down\" | \"flat\";\n\nexport interface StatCardDelta {\n  /** Nội dung hiển thị, vd \"+12,5%\" hoặc \"3 việc\" */\n  value: ReactNode;\n  direction: StatCardDeltaDirection;\n  /**\n   * Tăng là TỐT hay XẤU — mặc định \"positive-up\" (tăng = tốt).\n   *\n   * Cần thiết vì có chỉ số ngược chiều: số ticket quá hạn tăng là xấu, tỷ lệ rời bỏ giảm là tốt.\n   * Tô màu theo hướng mũi tên một cách máy móc sẽ nói dối người đọc.\n   */\n  polarity?: \"positive-up\" | \"positive-down\" | \"neutral\";\n  /** Chú thích sau con số, vd \"so với tuần trước\" */\n  label?: ReactNode;\n}\n\nexport interface StatCardProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** Nhãn chỉ số, vd \"Việc đang mở\" */\n  label: ReactNode;\n  value: ReactNode;\n  icon?: IconComponent;\n  tone?: StatCardTone;\n  delta?: StatCardDelta;\n  /** Slot biểu đồ mini (sparkline) — package không ép thư viện biểu đồ nào */\n  sparkline?: ReactNode;\n  /** Dòng chú thích dưới cùng */\n  footer?: ReactNode;\n  /** Đang tải → khung xương thay cho số liệu */\n  loading?: boolean;\n}\n\nconst deltaIcons: Record<StatCardDeltaDirection, IconComponent> = {\n  up: ArrowUpRight,\n  down: ArrowDownRight,\n  flat: Minus\n};\n\n/**\n * Màu của delta = hướng × cực tính, không phải chỉ hướng.\n *\n * Dòng biến động là CHỮ (12px, `text-xs`) đứng trên `bg-card` → ngưỡng AA 4,5:1, và phải đạt ở\n * cả hai theme. Token tô nền không làm được việc đó: `text-success` chỉ 3,13:1 ở light còn\n * `text-destructive` chỉ 3,53:1 ở dark — mỗi theme hỏng một nửa. Bậc ink đạt cả hai:\n * success 6,52:1 (L) / 10,19:1 (D) · destructive 7,15:1 (L) / 6,42:1 (D) · muted-foreground\n * 5,23:1 (L) / 5,35:1 (D).\n */\nfunction deltaToneClass({ direction, polarity = \"positive-up\" }: StatCardDelta): string {\n  if (direction === \"flat\" || polarity === \"neutral\") return \"text-muted-foreground\";\n  const isGood = polarity === \"positive-up\" ? direction === \"up\" : direction === \"down\";\n  return isGood ? \"text-success-ink\" : \"text-destructive-ink\";\n}\n\n/**\n * Thẻ KPI: nhãn + số liệu lớn + biến động + sparkline tuỳ chọn.\n *\n * Số liệu dùng `tabular-nums` để cột số không nhảy khi cập nhật realtime. Tĩnh → RSC-safe.\n */\nexport function StatCard({\n  label,\n  value,\n  icon: Icon,\n  tone = \"default\",\n  delta,\n  sparkline,\n  footer,\n  loading = false,\n  className,\n  ...props\n}: StatCardProps) {\n  const DeltaIcon = delta ? deltaIcons[delta.direction] : undefined;\n\n  return (\n    <div\n      data-slot=\"stat-card\"\n      className={cn(\"rounded-xl border border-border bg-card p-4 shadow-card\", className)}\n      {...props}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"min-w-0 flex-1\">\n          <p className=\"truncate text-sm text-muted-foreground\">{label}</p>\n          {loading ? (\n            <Skeleton className=\"mt-2 h-7 w-24\" />\n          ) : (\n            <p className=\"mt-1 text-2xl font-semibold tabular-nums leading-tight text-foreground\">{value}</p>\n          )}\n          {delta && !loading && DeltaIcon && (\n            <p className={cn(\"mt-1 flex items-center gap-1 text-xs font-medium\", deltaToneClass(delta))}>\n              <DeltaIcon aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n              <span className=\"tabular-nums\">{delta.value}</span>\n              {delta.label && <span className=\"font-normal text-muted-foreground\">{delta.label}</span>}\n            </p>\n          )}\n        </div>\n        {Icon && (\n          <span aria-hidden=\"true\" className={statCardIconVariants({ tone })}>\n            <Icon className=\"size-4.5\" />\n          </span>\n        )}\n      </div>\n\n      {sparkline && <div className=\"mt-3 h-10\">{sparkline}</div>}\n      {footer && <div className=\"mt-3 border-t border-border pt-2 text-xs text-muted-foreground\">{footer}</div>}\n    </div>\n  );\n}\n"],"mappings":"AAmIU,cAOE,YAPF;AAnIV,SAAS,WAA8B;AACvC,SAAS,gBAAgB,cAAc,aAAa;AAEpD,SAAS,UAAU;AACnB,SAAS,gBAAgB;AAmBlB,MAAM,uBAAuB,IAAI,+DAA+D;AAAA,EACrG,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,MAKT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMN,KAAK;AAAA,IACP;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,EACR;AACF,CAAC;AAoCD,MAAM,aAA4D;AAAA,EAChE,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AACR;AAWA,SAAS,eAAe,EAAE,WAAW,WAAW,cAAc,GAA0B;AACtF,MAAI,cAAc,UAAU,aAAa,UAAW,QAAO;AAC3D,QAAM,SAAS,aAAa,gBAAgB,cAAc,OAAO,cAAc;AAC/E,SAAO,SAAS,qBAAqB;AACvC;AAOO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,YAAY,QAAQ,WAAW,MAAM,SAAS,IAAI;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2DAA2D,SAAS;AAAA,MACjF,GAAG;AAAA,MAEJ;AAAA,6BAAC,SAAI,WAAU,0CACb;AAAA,+BAAC,SAAI,WAAU,kBACb;AAAA,gCAAC,OAAE,WAAU,0CAA0C,iBAAM;AAAA,YAC5D,UACC,oBAAC,YAAS,WAAU,iBAAgB,IAEpC,oBAAC,OAAE,WAAU,0EAA0E,iBAAM;AAAA,YAE9F,SAAS,CAAC,WAAW,aACpB,qBAAC,OAAE,WAAW,GAAG,oDAAoD,eAAe,KAAK,CAAC,GACxF;AAAA,kCAAC,aAAU,eAAY,QAAO,WAAU,qBAAoB;AAAA,cAC5D,oBAAC,UAAK,WAAU,gBAAgB,gBAAM,OAAM;AAAA,cAC3C,MAAM,SAAS,oBAAC,UAAK,WAAU,qCAAqC,gBAAM,OAAM;AAAA,eACnF;AAAA,aAEJ;AAAA,UACC,QACC,oBAAC,UAAK,eAAY,QAAO,WAAW,qBAAqB,EAAE,KAAK,CAAC,GAC/D,8BAAC,QAAK,WAAU,YAAW,GAC7B;AAAA,WAEJ;AAAA,QAEC,aAAa,oBAAC,SAAI,WAAU,aAAa,qBAAU;AAAA,QACnD,UAAU,oBAAC,SAAI,WAAU,kEAAkE,kBAAO;AAAA;AAAA;AAAA,EACrG;AAEJ;","names":[]}

package/dist/components/composite/status-config.d.ts

@@ -5,7 +5,7 @@
  * (Tasks: todo/doing/done; CRM: lead/qualified/won/lost; HR: nộp/duyệt/từ chối). Package
  * chỉ cấp KIỂU và bảng tone, còn nhãn tiếng Việt là chuyện của app.
  *
- * Bắt buộc dùng class token (`bg-success/15 text-success`), KHÔNG hex — hex sẽ chết ở dark mode.
+ * Bắt buộc dùng class token (`bg-success/15 text-success-ink`), KHÔNG hex — hex sẽ chết ở dark mode.
  *
  * @example
  * const TASK_STATUSES: StatusConfig<TaskStatus>[] = [
@@ -15,11 +15,18 @@
  * ];
  */
 interface StatusTone {
-    /** Lớp nền tint — token, vd "bg-success/15" */
+    /** Lớp nền tint — token TÔ NỀN, vd "bg-success/15" */
     bgColor: string;
-    /** Lớp chữ — token, vd "text-success" */
+    /**
+     * Lớp chữ — phải là bậc **ink** (`text-success-ink`), KHÔNG phải token tô nền (`text-success`).
+     * Chữ chip đứng trên tint của chính màu đó nên đo theo AA 4,5:1; bậc tô nền không đạt ở light.
+     */
     textColor: string;
-    /** Lớp viền (tuỳ chọn) — dùng cho biến thể outline */
+    /**
+     * Lớp viền (tuỳ chọn) — dùng cho biến thể `outline`. Ở biến thể đó nền trong suốt nên viền là
+     * thứ DUY NHẤT khoanh vùng chip → chịu ngưỡng 3:1 của WCAG 1.4.11. Dùng cùng bậc ink với
+     * `textColor` (`border-success-ink`), đừng hạ alpha xuống `/40`.
+     */
     borderColor?: string;
 }
 interface StatusConfig<T extends string = string> extends StatusTone {
@@ -37,37 +44,83 @@ interface StatusConfig<T extends string = string> extends StatusTone {
  *
  * Mọi chuỗi ở đây là class TĨNH để Tailwind quét được từ `dist`; tuyệt đối không sinh động
  * kiểu `bg-${tone}/15` (class động bị loại khỏi bundle của app).
+ *
+ * ─ VÌ SAO CHỮ VÀ VIỀN ĐỀU LÀ BẬC `--x-ink`, KHÔNG PHẢI `--x` ─
+ *
+ * `--success/--warning/--info/--destructive` là token TÔ NỀN. Đặt chúng làm màu CHỮ thì bản light
+ * hỏng ở cả ba biến thể của `StatusPill` (đo theo WCAG, nền tint đã trộn với `--card` trắng):
+ *
+ *     text-success trên bg-success/15 (#E0F2E9)      = 2,69:1 ✗  (dưới cả ngưỡng 3:1)
+ *     text-info    trên bg-info/15    (#DDEDEE)      = 3,44:1 ✗
+ *     text-destructive trên bg-destructive/15        = 4,06:1 ✗
+ *     text-success / text-info trên nền TRANG (outline, dot) = 3,13:1 / 4,14:1 ✗
+ *
+ * Đi qua bậc ink thì đạt ở CẢ hai theme (`--x-ink` ở `.dark` vốn trỏ về chính `--x`, nên không
+ * cần biến thể `dark:` nào):
+ *
+ *                 soft (trên tint của chính nó)    outline · dot (trên nền trang)
+ *     success     5,60:1 (L) · 7,44:1 (D)          6,52:1 (L) · 10,85:1 (D)
+ *     info        5,54:1 (L) · 7,12:1 (D)          6,68:1 (L) · 10,16:1 (D)
+ *     destructive 5,76:1 (L) · 5,71:1 (D)          7,15:1 (L) ·  6,84:1 (D)
+ *     warning     5,93:1 (L) · 7,19:1 (D)          6,51:1 (L) · 12,35:1 (D)
+ *     neutral     4,89:1 (L) · 4,86:1 (D)          5,23:1 (L) ·  5,70:1 (D)
+ *     primary     5,77:1 (L) ·  7,26:1 (D)         6,51:1 (L) · 12,67:1 (D)
+ *
+ * `warning` không còn cần cặp `text-gold-500 dark:text-warning`: `--warning-ink` ĐÚNG BẰNG
+ * `--gold-500` ở light và `--yellow` ở dark — cùng một màu, ít hơn một class và một nơi để lệch.
+ *
+ * ─ TONE `primary` ĐI THEO `--primary`, KHÔNG PHẢI THANG `gold-*` ─
+ * Trước đây tone này chôn cứng `bg-gold-100 text-gold-600 dark:bg-gold-500/25 dark:text-gold-100`.
+ * Tương phản thì ĐẠT (7,77:1 L · 11,85:1 D soft; 9,58:1 L · 15,33:1 D outline — bảng cũ ghi
+ * 11,90:1 cho ô dark, đó là số của `--primary-ink` trên `--card`, chép nhầm sang), nhưng SAI VAI
+ * TRÒ: thang `gold-*` không có bản dark nên phải viết hai lớp `dark:`, và app đổi `--primary` cho
+ * sản phẩm của mình thì chip "primary" vẫn cứ vàng. `bg-primary/20` + `text-primary-ink` đi theo
+ * token ở cả hai theme bằng MỘT lớp — hợp đồng §5. Alpha `/20` (không phải `/15` như các tone
+ * khác) để giữ đúng độ nổi của `bg-gold-100` cũ: nền chip ⇄ nền trang 1,13:1 thay vì 1,10:1,
+ * cùng mức với `warning` — vàng luôn cần thêm một nấc mới thấy được.
+ *
+ * ─ VIỀN: VÌ SAO BỎ HẲN ALPHA ─
+ * Ở `variant="outline"` nền trong suốt nên viền là ranh giới DUY NHẤT của chip → ngưỡng 3:1 của
+ * WCAG 1.4.11. Không cách hạ alpha nào qua được; đo trên nền trang, cả hai cơ sở đều trượt:
+ *
+ *     border-<tone>/40      (token NỀN)   light 1,21–1,84:1 · dark 1,51–2,86:1  ✗
+ *     border-<tone>/70      (token NỀN)   light 1,38–3,09:1 · dark 2,38–6,45:1  ✗
+ *     border-<tone>-ink/40  (bậc ink)     light 1,88–1,99:1 · dark 2,02–2,86:1  ✗
+ *     border-<tone>-ink/70  (bậc ink)     light 3,34–3,69:1 · dark 3,87–6,45:1  — hết biên an toàn
+ *
+ * (Bảng cũ trộn hai cơ sở: dải `/40` là của token NỀN, còn con số `/70 = 3,34:1` là của bậc ink.)
+ * Viền full-strength bằng đúng màu chữ: 6,51–7,15:1 (light) · 6,84–12,67:1 (dark) ✓.
  */
 declare const STATUS_TONES: {
     readonly neutral: {
         readonly bgColor: "bg-muted";
         readonly textColor: "text-muted-foreground";
-        readonly borderColor: "border-border";
+        readonly borderColor: "border-muted-foreground";
     };
     readonly primary: {
-        readonly bgColor: "bg-gold-100 dark:bg-gold-500/25";
-        readonly textColor: "text-gold-600 dark:text-gold-100";
-        readonly borderColor: "border-gold-300";
+        readonly bgColor: "bg-primary/20";
+        readonly textColor: "text-primary-ink";
+        readonly borderColor: "border-primary-ink";
     };
     readonly success: {
         readonly bgColor: "bg-success/15";
-        readonly textColor: "text-success";
-        readonly borderColor: "border-success/40";
+        readonly textColor: "text-success-ink";
+        readonly borderColor: "border-success-ink";
     };
     readonly warning: {
         readonly bgColor: "bg-warning/20";
-        readonly textColor: "text-gold-500 dark:text-warning";
-        readonly borderColor: "border-warning/40";
+        readonly textColor: "text-warning-ink";
+        readonly borderColor: "border-warning-ink";
     };
     readonly destructive: {
         readonly bgColor: "bg-destructive/15";
-        readonly textColor: "text-destructive";
-        readonly borderColor: "border-destructive/40";
+        readonly textColor: "text-destructive-ink";
+        readonly borderColor: "border-destructive-ink";
     };
     readonly info: {
         readonly bgColor: "bg-info/15";
-        readonly textColor: "text-info";
-        readonly borderColor: "border-info/40";
+        readonly textColor: "text-info-ink";
+        readonly borderColor: "border-info-ink";
     };
 };
 type StatusToneName = keyof typeof STATUS_TONES;

package/dist/components/composite/status-config.js

@@ -1,18 +1,18 @@
 const STATUS_TONES = {
-  neutral: { bgColor: "bg-muted", textColor: "text-muted-foreground", borderColor: "border-border" },
-  primary: {
-    bgColor: "bg-gold-100 dark:bg-gold-500/25",
-    textColor: "text-gold-600 dark:text-gold-100",
-    borderColor: "border-gold-300"
+  neutral: {
+    bgColor: "bg-muted",
+    textColor: "text-muted-foreground",
+    borderColor: "border-muted-foreground"
   },
-  success: { bgColor: "bg-success/15", textColor: "text-success", borderColor: "border-success/40" },
-  warning: { bgColor: "bg-warning/20", textColor: "text-gold-500 dark:text-warning", borderColor: "border-warning/40" },
+  primary: { bgColor: "bg-primary/20", textColor: "text-primary-ink", borderColor: "border-primary-ink" },
+  success: { bgColor: "bg-success/15", textColor: "text-success-ink", borderColor: "border-success-ink" },
+  warning: { bgColor: "bg-warning/20", textColor: "text-warning-ink", borderColor: "border-warning-ink" },
   destructive: {
     bgColor: "bg-destructive/15",
-    textColor: "text-destructive",
-    borderColor: "border-destructive/40"
+    textColor: "text-destructive-ink",
+    borderColor: "border-destructive-ink"
   },
-  info: { bgColor: "bg-info/15", textColor: "text-info", borderColor: "border-info/40" }
+  info: { bgColor: "bg-info/15", textColor: "text-info-ink", borderColor: "border-info-ink" }
 };
 function getStatusConfig(configs, value) {
   if (value == null) return void 0;