@comitor/ui 2.1.0 → 3.0.0

package/README.md

@@ -8,10 +8,10 @@ component ghép sẵn và khung ứng dụng (shell) kiểu workspace × app.
 - Token brand nằm ở **`styles.css`** — đổi token, bump version, mọi app nhận cùng một thay đổi.
 - Server-component-friendly: `"use client"` chỉ nằm ở file thật sự cần.
 
-> Trạng thái: `2.1.0` — 79 file primitive (Tier 1, gồm 18 component port từ
-> [Dice UI](docs/diceui.md)) · 32 file composite (Tier 2) · 25 file shell (Tier 3) · 4 file chart ·
-> 32 file data-grid · 5 file uploader. API chốt từ `1.0.0`. (Đếm bằng `ls src/<tầng>`; con số trôi
-> theo mỗi bản — đếm lại, đừng chép.)
+> Trạng thái: `3.0.0` — mặc định **tiếng Anh**, tiếng Việt dựng sẵn (§5) · 79 file primitive (Tier 1,
+> gồm 18 component port từ [Dice UI](docs/diceui.md)) · 33 file composite (Tier 2) · 25 file shell
+> (Tier 3) · 4 file chart · 32 file data-grid · 5 file uploader · 43 file ngôn ngữ (`src/i18n`). API
+> chốt từ `1.0.0`. (Đếm bằng `ls src/<tầng>`; con số trôi theo mỗi bản — đếm lại, đừng chép.)
 >
 > Tài liệu đầy đủ: **https://design-system.comitor.ai** —
 > [Get started](https://design-system.comitor.ai/get-started) ·
@@ -68,6 +68,10 @@ pnpm add @uppy/core @uppy/xhr-upload   # cho @comitor/ui/uploader
 > trong `<ChartContainer>` thì gói không tắt hộ được — app phải tự ghi `isAnimationActive={false}`
 > lên từng `<Bar>`/`<Line>`/`<Area>` (§4.2).
 
+**Ngôn ngữ**: từ `3.0.0` mọi chuỗi hiển thị mặc định là **tiếng Anh**; tiếng Việt là bảng dựng sẵn,
+bật bằng `<ComitorLocaleProvider locale="vi">` ở root. App Comitor truyền ngôn ngữ của NGƯỜI DÙNG
+(`getLocale()` của `next-intl`) — chi tiết và cạm bẫy ở §5.
+
 Cài đặt từng bước, kèm bản mẫu app: https://design-system.comitor.ai/get-started
 
 ## 2. Nạp `styles.css` — ĐỌC KỸ, đây là chỗ dễ sai nhất
@@ -113,7 +117,7 @@ Package có **7 entry**, tách theo peer optional mà mỗi tầng kéo theo:
 
 | Entry | Nội dung | Peer optional kéo theo |
 |---|---|---|
-| `@comitor/ui` | Tier 1 (primitive) + Tier 2 (composite) + `cn` + token TS + `useIsMac` | **không có** — chạy được ở Vite, Storybook, test runner |
+| `@comitor/ui` | Tier 1 (primitive) + Tier 2 (composite) + `ComitorLocaleProvider` + bảng chữ `en`/`vi` + `cn` + token TS + `useIsMac` | **không có** — chạy được ở Vite, Storybook, test runner |
 | `@comitor/ui/shell` | Tier 3: khung ứng dụng workspace × app, theme, ba trục hiển thị | `next`, `next-themes` |
 | `@comitor/ui/chart` | Lớp shadcn bọc recharts + `Comitor*Chart` + `CHART_COLORS` | `recharts` (~100KB) |
 | `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính: ảo hoá dòng, chọn vùng bằng bàn phím, copy/paste với Excel, ghim cột, lọc/sắp xếp nhiều tiêu chí, hoàn tác/làm lại | `@tanstack/react-table` (peer); kèm `@tanstack/react-virtual` + `@dnd-kit/*` (dependency của gói) |
@@ -164,7 +168,7 @@ https://design-system.comitor.ai/foundations/server-client
 
 ## 5. Bảng component
 
-Số file nguồn hiện tại: **79 primitive · 32 composite · 25 shell · 4 chart · 32 data-grid · 5 uploader**. Mỗi component có trang
+Số file nguồn hiện tại: **79 primitive · 33 composite · 25 shell · 4 chart · 32 data-grid · 5 uploader · 43 i18n**. Mỗi component có trang
 riêng kèm demo, bảng prop và cạm bẫy của nó:
 
 | Tầng | Là gì | Trang |
@@ -173,27 +177,58 @@ riêng kèm demo, bảng prop và cạm bẫy của nó:
 | **Tier 2 — composite** · 31 file · `@comitor/ui` | Giá trị thật của gói: pattern lặp ở mọi app, ghép từ nhiều primitive (`DataTable`, `PageHeader`, `Combobox`, `DatePicker`, `StatCard`…) | https://design-system.comitor.ai/composites |
 | **Tier 3 — shell** · 25 file · `@comitor/ui/shell` | Khung ứng dụng workspace × app: sidebar, header, theme, ba trục hiển thị (tương phản · mật độ · cỡ chữ) | https://design-system.comitor.ai/shell |
 | **chart** · 4 file · `@comitor/ui/chart` | Lớp shadcn bọc recharts, cùng ba bản dựng sẵn theo brand. ⚠ Ba wrapper `Comitor*Chart` **mặc định TẮT** hiệu ứng vẽ dần (`isAnimationActive = false`) — bật lại là biểu đồ kẹt ở khung đầu: có trục, có lưới, KHÔNG có dữ liệu. Mặc định đó KHÔNG áp cho `<ChartContainer>` + recharts do app tự lắp | https://design-system.comitor.ai/components/chart |
-| **data-grid** · 32 file · `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính, cho màn nhập liệu hàng loạt. Port từ [tablecn](https://www.tablecn.com/data-grid) (MIT) sang primitive + token của gói. ⚠ Là tầng DUY NHẤT có peer **`@tanstack/react-table`**, tầng duy nhất mặc định **tiếng Anh** (prop `locale`, xem dưới), và mọi thứ trong nó là client component | [docs/data-grid.md](docs/data-grid.md) |
+| **data-grid** · 32 file · `@comitor/ui/data-grid` | `DataGrid` — lưới sửa trực tiếp kiểu bảng tính, cho màn nhập liệu hàng loạt. Port từ [tablecn](https://www.tablecn.com/data-grid) (MIT) sang primitive + token của gói. ⚠ Là tầng DUY NHẤT có peer **`@tanstack/react-table`**, có thêm prop `locale` riêng (xem dưới), và mọi thứ trong nó là client component | [docs/data-grid.md](docs/data-grid.md) |
 | **uploader** · 5 file · `@comitor/ui/uploader` | `FileUpload` (tệp) · `ImageUploadField` (ảnh) · `useFileUpload` — kéo thả, xem trước, tiến độ. Peer optional: `@uppy/core` + `@uppy/xhr-upload` | https://design-system.comitor.ai/components |
 | **form** · `@comitor/ui/form` | Binding shadcn ⇄ react-hook-form | https://design-system.comitor.ai/components/form |
 
-**Cơ chế `labels` — đổi ngôn ngữ mà không fork component.** Chuỗi hiển thị mặc định của gói là **tiếng
-Việt**, kể cả chuỗi chỉ trình đọc màn hình nghe thấy (`aria-label`, `sr-only`); app dùng ngôn ngữ khác
-override qua prop `labels`.
-
-⚠ **`DataGrid` là ngoại lệ, ở cả hai vế.** Nó mặc định **tiếng Anh**, và nó không dùng `labels` mà
-dùng prop **`locale`** — `"en"` · `"vi"`, hoặc cả một object `DataGridMessages` tự soạn. Lý do:
-phần lớn chuỗi của nó là chuỗi gốc của tablecn, nên giữ tiếng Anh làm bản gốc thì đối chiếu ngược
-với thượng nguồn là so trực tiếp. Muốn tiếng Việt thì khai một lần bằng `DataGridLocaleProvider`,
-và nhớ truyền `locale` cho cả `useDataGrid` — thanh công cụ nằm ngoài `<DataGrid>` nên nó KHÔNG
-nhận được prop của lưới, còn hook thì bắn toast ở ngoài cây DOM của lưới nên nó không đọc được
-provider. Chi tiết: [docs/data-grid.md](docs/data-grid.md) §11. Kiểu là `Partial<>` và component luôn trải `{ ...DEFAULT_*, ...labels }`,
-nên truyền một khoá không làm mất phần còn lại. Component chỉ có một hai chuỗi thì mở bằng **prop
-rời** thay cho cả một object — `clearLabel`, `pendingLabel`, `overflowLabel`, `placeholder`,
-`emptyText`: cùng cơ chế, chỉ khác hình dạng. ⚠ Khoá có số/đơn vị chèn vào là **HÀM**, không phải
-chuỗi có placeholder (`range(start, end, total, unitLabel)`, `pageStatus(page, pageCount)`,
-`overflowLabel(count)`) — nối chuỗi bằng dấu cộng ở phía app là cách chắc chắn sai trật tự từ với
-ngôn ngữ khác.
+**Ngôn ngữ — mặc định TIẾNG ANH, tiếng Việt dựng sẵn (từ `3.0.0`).** Mọi chuỗi hiển thị của gói —
+kể cả chuỗi chỉ trình đọc màn hình nghe thấy (`aria-label`, `sr-only`, lời thông báo khi kéo thả) —
+mặc định là tiếng Anh. Chọn ngôn ngữ MỘT lần ở root:
+
+```tsx
+import { ComitorLocaleProvider } from "@comitor/ui";
+
+<ComitorLocaleProvider locale="vi">{children}</ComitorLocaleProvider>
+```
+
+- `locale` là mã BCP 47 (`"vi"`, `"en"`, `"en-GB"`…). Nó chọn bảng chữ dựng sẵn (`vi` → tiếng Việt,
+  còn lại → tiếng Anh) **và** quyết định định dạng: giờ, số, đồng hồ 12/24 giờ đi thẳng vào `Intl`.
+  ⚠ Ngày định dạng bằng date-fns (`DatePicker`, `RelativeTime`, `Calendar`, `DataGrid`) chỉ tự ánh
+  xạ `vi` → `vi`, mọi mã khác → `enUS` (`12/25/2024`); muốn kiểu Anh (`25/12/2024`) ở `en-GB` thì
+  truyền thêm `dateFnsLocale={enGB}` cho provider.
+- Thứ tự ưu tiên cho MỌI chuỗi: prop của chính component (`labels`, `placeholder`, `clearLabel`…)
+  → provider gần nhất → tiếng Anh. Kiểu của `labels` là `Partial<>` nên truyền một khoá không làm mất
+  phần còn lại.
+- Đổi vài chữ theo nghiệp vụ, hoặc thêm ngôn ngữ thứ ba: prop `messages` của provider, theo
+  namespace — `messages={{ shell: { workspace: "Công ty" } }}`, hoặc cả một bảng tự dịch (trải
+  `comitorMessagesEn` ra rồi dịch). Hai bảng dựng sẵn xuất ra là `comitorMessagesEn` /
+  `comitorMessagesVi`; nơi không có context (Server Component, email) dùng `getComitorMessages(locale)`.
+- ⚠ Khoá có số/đơn vị chèn vào là **HÀM**, không phải chuỗi có placeholder
+  (`range(start, end, total, unitLabel)`, `overflowLabel(count)`) — nối chuỗi bằng dấu cộng ở phía app
+  là cách chắc chắn sai trật tự từ với ngôn ngữ khác. Hàm thì không truyền được từ Server Component
+  sang: khai chúng trong một component client của app.
+- **Nước và tiền tệ không phải ngôn ngữ.** `PhoneInput` không có nước mặc định, `MaskInput` mặc định
+  USD — truyền `defaultCountry` / `currency` từ cài đặt của workspace.
+- `DataGrid` đi theo cùng provider; nó còn nhận prop `locale` và `DataGridLocaleProvider` riêng (ưu
+  tiên hơn provider chung) như từ `2.0.0` — xem [docs/data-grid.md](docs/data-grid.md) §11.
+
+⚠ **App Comitor: LUÔN truyền ngôn ngữ từ thiết lập của NGƯỜI DÙNG**, đừng để mặc định. Ngôn ngữ nằm ở
+hồ sơ Account và đi qua `next-intl`; bọc ở root layout, trong `NextIntlClientProvider`:
+
+```tsx
+// app/layout.tsx
+import { getLocale } from "next-intl/server";
+
+const locale = await getLocale();
+// …
+<NextIntlClientProvider>
+  <ComitorLocaleProvider locale={locale}>{children}</ComitorLocaleProvider>
+</NextIntlClientProvider>
+```
+
+Quên dòng này thì app tiếng Việt hiện "Cancel" / "Select…" giữa màn hình — không lỗi, không cảnh báo,
+vì tiếng Anh là một mặc định hợp lệ. Đặt ở ROOT, không chỉ ở `AppShell` (prop `locale` của `AppShell`
+chỉ là lối tắt): trang ngoài shell — đăng nhập, lỗi — cũng phải đúng thứ tiếng.
 
 ## 6. Màu và token
 

package/dist/chart/chart.d.ts

@@ -140,7 +140,12 @@ type ChartTooltipContentProps = React.ComponentProps<typeof RechartsPrimitive.To
     /** Khoá dùng để tra `config` cho NHÃN trục X. */
     labelKey?: string;
 };
-/** Nội dung tooltip theo design token Comitor: nền `bg-background`, viền `border-border/50`. */
+/**
+ * Nội dung tooltip theo design token Comitor: nền `bg-background`, viền `border-border/50`.
+ *
+ * Giá trị số (khi không có `formatter`) định dạng theo `locale` của `ComitorLocaleProvider` —
+ * `1.234,5` ở `vi`, `1,234.5` ở `en`. Trước `3.0.0` ghim cứng `vi-VN`.
+ */
 declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }: ChartTooltipContentProps): React.JSX.Element | null;
 /** `Legend` của recharts — đặt `content={<ChartLegendContent />}` để lấy nhãn từ `config`. */
 declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;

package/dist/chart/chart.js

@@ -2,6 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
+import { useComitorLocale } from "../i18n/locale-provider.js";
 import { cn } from "../lib/cn.js";
 const THEMES = { light: "", dark: ".dark" };
 const ChartContext = React.createContext(null);
@@ -65,6 +66,7 @@ function ChartTooltipContent({
   labelKey
 }) {
   const { config } = useChart();
+  const { locale } = useComitorLocale();
   const tooltipLabel = React.useMemo(() => {
     if (hideLabel || !payload?.length) {
       return null;
@@ -131,7 +133,7 @@ function ChartTooltipContent({
                         nestLabel ? tooltipLabel : null,
                         /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: itemConfig?.label || item.name })
                       ] }),
-                      item.value !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString("vi-VN") })
+                      item.value !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: item.value.toLocaleString(locale) })
                     ]
                   }
                 )

package/dist/chart/chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chart/chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Chart primitive của shadcn/ui (style new-york) — port nguyên trạng từ comitor-ds để\n * `shadcn add` vẫn dùng lại được. Đây là tầng \"thô\": bạn tự lắp recharts bên trong.\n * Muốn dựng nhanh 3 loại biểu đồ quen thuộc thì xem `comitor-chart.tsx`.\n *\n * ⚠⚠ TỰ LẮP RECHARTS 2.15.x THÌ PHẢI TỰ TẮT HIỆU ỨNG VẼ DẦN ⚠⚠\n * Xem chú thích của {@link ChartContainer} ngay dưới. Tầng này KHÔNG đặt hộ được\n * `isAnimationActive={false}` như `Comitor*Chart` làm, vì mark là children do app viết.\n *\n * Cơ chế màu (điểm hay nhất, và cũng dễ hiểu sai nhất):\n * `<ChartContainer>` render kèm `<ChartStyle>` — thẻ này sinh ra biến CSS `--color-<key>`\n * cho từng key trong `config`, giới hạn phạm vi bằng `[data-chart=<id>]`. Series recharts\n * chỉ việc trỏ `fill=\"var(--color-desktop)\"`. Nhờ vậy màu vẫn nằm trong TOKEN (không hex\n * rải trong JSX) và đổi được theo light/dark khi config khai `theme: { light, dark }`.\n */\n\n// Ánh xạ { TÊN_THEME: CSS_SELECTOR }. Chuỗi rỗng = light (không cần selector bọc ngoài).\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\n/**\n * Khai báo hiển thị cho từng series: nhãn, icon và màu.\n * Dùng `color` cho màu dùng chung, hoặc `theme` khi cần màu khác nhau giữa light/dark.\n * Giá trị màu nên là token: `\"var(--chart-1)\"`, `\"var(--teal)\"`… — đừng ghi hex.\n */\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\n/** Đọc `config` của `<ChartContainer>` gần nhất. Ném lỗi nếu gọi ngoài container. */\nfunction useChart(): ChartContextProps {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart phải được gọi bên trong <ChartContainer />\");\n  }\n\n  return context;\n}\n\nexport type ChartContainerProps = React.ComponentProps<\"div\"> & {\n  /** Khai báo nhãn/màu cho từng series — nguồn của biến `--color-<key>`. */\n  config: ChartConfig;\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"];\n};\n\n/**\n * Khung biểu đồ: cấp context `config`, bơm biến màu, và bọc sẵn `ResponsiveContainer`.\n * Tỉ lệ mặc định `aspect-video`; muốn cao cố định thì truyền `className=\"h-64 aspect-auto\"`.\n *\n * ─ ⚠ RECHARTS 2.15.x: PHẢI TỰ GHI `isAnimationActive={false}` LÊN TỪNG MARK ─\n * Với `recharts` 2.15.x + React 19.2, hiệu ứng vẽ dần (mặc định BẬT của recharts) không bao giờ\n * chạy tới khung hình cuối: mark đứng nguyên ở khung đầu, tức là **vô hình**. Biểu đồ ra đủ trục,\n * đủ lưới, đủ chú giải, KHÔNG có dữ liệu — không lỗi, không warning, chờ bao lâu cũng không tự hết.\n *\n * `<ComitorBarChart>` / `<ComitorLineChart>` / `<ComitorAreaChart>` đã đặt sẵn `false` từ `0.2.2`.\n * **`<ChartContainer>` thì KHÔNG đặt hộ được** — `<Bar>` / `<Line>` / `<Area>` là children do app\n * viết, container không sờ vào. Đi lối shadcn quen thuộc mà quên prop này là gặp đúng lỗi im lặng\n * của `0.2.1`:\n *\n * ```tsx\n * // ✗ recharts 2.15.x: <g class=\"recharts-bar-rectangle\"> rỗng, không cột nào\n * <ChartContainer config={config}>\n *   <BarChart data={data}>\n *     <XAxis dataKey=\"thang\" />\n *     <Bar dataKey=\"doanhThu\" fill=\"var(--color-doanhThu)\" />\n *   </BarChart>\n * </ChartContainer>\n *\n * // ✓ tắt tay trên TỪNG mark\n * <Bar dataKey=\"doanhThu\" fill=\"var(--color-doanhThu)\" isAnimationActive={false} />\n * ```\n *\n * Đo trên DOM thật (Next 16.3.2 · React 19.2.8 · recharts 2.15.4, `next build` + `next start`,\n * chờ 5000ms sau hydrate) — cùng một trang, chỉ khác một prop:\n *\n * | mark | thiếu prop | có `isAnimationActive={false}` |\n * |---|---|---|\n * | `<Bar>`  | 3 `<g.recharts-bar-rectangle>` nhưng **0** `path.recharts-rectangle` | **3/3** path, cao 273/410/342px |\n * | `<Line>` | `stroke-dasharray=\"0px 818.84px\"` | `stroke-dasharray` = `null` |\n * | `<Area>` | `<clipPath><rect width=\"0\">` | không còn rect width 0 |\n *\n * `recharts` 3.x không dính lỗi này — bỏ prop đi là được. Dải peer của gói là `>=2.15.0` nên\n * 2.15.x vẫn là cấu hình hợp lệ và phổ biến; cứ ghi `isAnimationActive={false}` cho chắc, trên\n * 3.x nó chỉ có nghĩa \"không hoạt hình\".\n */\nfunction ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nexport type ChartStyleProps = {\n  /** Giá trị của thuộc tính `data-chart` trên container — dùng làm phạm vi cho biến màu. */\n  id: string;\n  config: ChartConfig;\n};\n\n/**\n * Sinh thẻ `<style>` chứa `--color-<key>` cho từng series, phạm vi `[data-chart=<id>]`.\n * `ChartContainer` đã render sẵn; chỉ export riêng cho ai tự dựng container.\n */\nconst ChartStyle = ({ id, config }: ChartStyleProps) => {\n  const colorConfig = Object.entries(config).filter(([, itemConfig]) => itemConfig.theme || itemConfig.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  // Một khối CSS cho mỗi theme: light không cần selector bọc ngoài, dark bọc bằng `.dark`.\n  const css = Object.entries(THEMES)\n    .map(([theme, prefix]) => {\n      const declarations = colorConfig\n        .map(([key, itemConfig]) => {\n          const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;\n          return color ? `  --color-${key}: ${color};` : null;\n        })\n        .filter(Boolean)\n        .join(\"\\n\");\n\n      return `${prefix} [data-chart=${id}] {\\n${declarations}\\n}`;\n    })\n    .join(\"\\n\");\n\n  // biome-ignore lint/security/noDangerouslySetInnerHtml: phải bơm nguyên khối CSS gồm nhiều selector (light + `.dark`) — React không có API nào khác cho việc này; nội dung ghép từ `config` do chính app khai, không phải dữ liệu người dùng nhập.\n  return <style dangerouslySetInnerHTML={{ __html: css }} />;\n};\n\n/** `Tooltip` của recharts — đặt `content={<ChartTooltipContent />}` để có giao diện theo token. */\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Một phần tử `payload` do recharts bơm vào `content` của Tooltip/Legend.\n *\n * ─ VÌ SAO KHAI TẠI ĐÂY, KHÔNG DẪN XUẤT TỪ `TooltipProps`/`LegendProps` ─\n * recharts **3** đã bỏ `payload` (và `label`) khỏi props của `<Tooltip>`/`<Legend>` — hai\n * trường đó nay đi qua context nội bộ, nên `ComponentProps<typeof Tooltip>[\"payload\"]` và\n * `Pick<LegendProps, \"payload\">` **không còn tồn tại** ở 3.x. Dẫn xuất từ chúng khiến chính\n * file `.d.ts` phát hành ra npm hỏng kiểu ngay khi app cài recharts 3 (app nào tắt\n * `skipLibCheck` là thấy liền), tức peer `>=2.15.0` sẽ là một lời hứa suông.\n *\n * Hình dạng dưới đây là phần GIAO của 2.x và 3.x, và chỉ gồm đúng những trường component\n * này thật sự đọc. Ở 2.x nó **giao** với kiểu gốc của recharts (props Tooltip vẫn còn\n * `payload`) nên không nới lỏng gì; ở 3.x nó là nguồn duy nhất.\n */\nexport interface ChartPayloadItem {\n  value?: number;\n  name?: string;\n  dataKey?: string | number;\n  color?: string;\n  /** Bản ghi gốc của điểm dữ liệu — nơi `fill` và các cột khác của hàng nằm. */\n  payload?: Record<string, unknown> & { fill?: string };\n}\n\n/**\n * Chữ ký của `formatter`/`labelFormatter` mà component này THẬT SỰ gọi.\n *\n * Kiểu khai báo của hai prop đó vẫn là kiểu của recharts (đến từ `ComponentProps<typeof\n * Tooltip>`, để app truyền vào không bị hẹp đi), nhưng recharts 3 đòi tham số `item` là\n * `Payload` **đầy đủ** — gồm cả trường nội bộ `graphicalItemId` mà không ai ngoài recharts\n * dựng được. Nên chỗ GỌI đi qua hai chữ ký dưới đây kèm một lần ép kiểu tường minh: giá trị\n * truyền vào là thứ recharts vừa bơm ra, chỉ là TypeScript không lần được đường vòng đó.\n *\n * Tham số để `unknown` là CỐ Ý, không phải lười: hình dạng thật của `value`/`item` khác nhau\n * giữa hai bản recharts (2.x cho `value: ValueType` = `string | number | (string|number)[]`,\n * 3.x cho `Payload` có thêm trường nội bộ), nên ghim bất kỳ bên nào cũng làm bên kia đỏ. Đây\n * là cái cầu giữa hai bản, chỗ duy nhất trong gói không kiểm được kiểu — và nó dài đúng hai\n * lời gọi.\n */\ntype ChartValueFormatter = (\n  value: unknown,\n  name: unknown,\n  item: unknown,\n  index: number,\n  payload: unknown\n) => React.ReactNode;\n\ntype ChartLabelFormatter = (label: unknown, payload: unknown) => React.ReactNode;\n\nexport type ChartTooltipContentProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    /** Do recharts bơm vào — đừng truyền tay. */\n    payload?: ChartPayloadItem[];\n    /** Do recharts bơm vào — đừng truyền tay. */\n    label?: React.ReactNode;\n    /** Ẩn dòng nhãn (trục X) ở đầu tooltip. */\n    hideLabel?: boolean;\n    /** Ẩn ô màu đứng trước tên series. */\n    hideIndicator?: boolean;\n    /** Kiểu ô màu: chấm tròn / vạch đứng / vạch đứt. */\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    /** Khoá dùng để tra `config` cho TÊN series (mặc định `name` rồi tới `dataKey`). */\n    nameKey?: string;\n    /** Khoá dùng để tra `config` cho NHÃN trục X. */\n    labelKey?: string;\n  };\n\n/** Nội dung tooltip theo design token Comitor: nền `bg-background`, viền `border-border/50`. */\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey\n}: ChartTooltipContentProps) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value = !labelKey && typeof label === \"string\" ? config[label]?.label || label : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {(labelFormatter as unknown as ChartLabelFormatter)(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  // Chỉ một series + không phải chấm tròn → nhét nhãn vào trong hàng cho gọn.\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-overlay\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || item.payload?.fill || item.color;\n          const rowKey = `${item.dataKey ?? item.name ?? index}`;\n\n          return (\n            <div\n              key={rowKey}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                (formatter as unknown as ChartValueFormatter)(item.value, item.name, item, index, payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\", {\n                          \"h-2.5 w-2.5\": indicator === \"dot\",\n                          \"w-1\": indicator === \"line\",\n                          \"w-0 border-[1.5px] border-dashed bg-transparent\": indicator === \"dashed\",\n                          \"my-0.5\": nestLabel && indicator === \"dashed\"\n                        })}\n                        style={\n                          {\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\"flex flex-1 justify-between leading-none\", nestLabel ? \"items-end\" : \"items-center\")}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">{itemConfig?.label || item.name}</span>\n                    </div>\n                    {item.value !== undefined && (\n                      <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                        {item.value.toLocaleString(\"vi-VN\")}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/** `Legend` của recharts — đặt `content={<ChartLegendContent />}` để lấy nhãn từ `config`. */\nconst ChartLegend = RechartsPrimitive.Legend;\n\nexport type ChartLegendContentProps = React.ComponentProps<\"div\"> & {\n  /** Do recharts bơm vào — đừng truyền tay. Xem `ChartPayloadItem` về lý do không dẫn xuất từ `LegendProps`. */\n  payload?: ChartPayloadItem[];\n  /** Do recharts bơm vào — quyết định chú giải đệm trên hay đệm dưới. */\n  verticalAlign?: \"top\" | \"middle\" | \"bottom\";\n  /** Ẩn icon riêng của series (nếu `config` có khai `icon`). */\n  hideIcon?: boolean;\n  /** Khoá dùng để tra `config` (mặc định `dataKey`). */\n  nameKey?: string;\n};\n\n/** Chú giải nằm ngang, nhãn lấy từ `config` chứ không phải `dataKey` thô. */\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey\n}: ChartLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"flex items-center justify-center gap-4\", verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\", className)}>\n      {payload.map((item, index) => {\n        const key = `${nameKey || item.dataKey || \"value\"}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n        const rowKey = `${item.value ?? item.dataKey ?? index}`;\n\n        return (\n          <div key={rowKey} className=\"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\">\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                style={{\n                  backgroundColor: item.color\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * Tra `config` từ một phần tử payload của recharts.\n * Payload có 2 tầng (`item` và `item.payload`) và khoá tra có thể nằm ở tầng nào cũng được —\n * hàm này thử cả hai trước khi rơi về chính `key`.\n */\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === \"string\") {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, useChart };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/chart/chart.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as RechartsPrimitive from \"recharts\";\nimport { useComitorLocale } from \"../i18n/locale-provider.js\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Chart primitive của shadcn/ui (style new-york) — port nguyên trạng từ comitor-ds để\n * `shadcn add` vẫn dùng lại được. Đây là tầng \"thô\": bạn tự lắp recharts bên trong.\n * Muốn dựng nhanh 3 loại biểu đồ quen thuộc thì xem `comitor-chart.tsx`.\n *\n * ⚠⚠ TỰ LẮP RECHARTS 2.15.x THÌ PHẢI TỰ TẮT HIỆU ỨNG VẼ DẦN ⚠⚠\n * Xem chú thích của {@link ChartContainer} ngay dưới. Tầng này KHÔNG đặt hộ được\n * `isAnimationActive={false}` như `Comitor*Chart` làm, vì mark là children do app viết.\n *\n * Cơ chế màu (điểm hay nhất, và cũng dễ hiểu sai nhất):\n * `<ChartContainer>` render kèm `<ChartStyle>` — thẻ này sinh ra biến CSS `--color-<key>`\n * cho từng key trong `config`, giới hạn phạm vi bằng `[data-chart=<id>]`. Series recharts\n * chỉ việc trỏ `fill=\"var(--color-desktop)\"`. Nhờ vậy màu vẫn nằm trong TOKEN (không hex\n * rải trong JSX) và đổi được theo light/dark khi config khai `theme: { light, dark }`.\n */\n\n// Ánh xạ { TÊN_THEME: CSS_SELECTOR }. Chuỗi rỗng = light (không cần selector bọc ngoài).\nconst THEMES = { light: \"\", dark: \".dark\" } as const;\n\n/**\n * Khai báo hiển thị cho từng series: nhãn, icon và màu.\n * Dùng `color` cho màu dùng chung, hoặc `theme` khi cần màu khác nhau giữa light/dark.\n * Giá trị màu nên là token: `\"var(--chart-1)\"`, `\"var(--teal)\"`… — đừng ghi hex.\n */\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });\n};\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\n/** Đọc `config` của `<ChartContainer>` gần nhất. Ném lỗi nếu gọi ngoài container. */\nfunction useChart(): ChartContextProps {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error(\"useChart phải được gọi bên trong <ChartContainer />\");\n  }\n\n  return context;\n}\n\nexport type ChartContainerProps = React.ComponentProps<\"div\"> & {\n  /** Khai báo nhãn/màu cho từng series — nguồn của biến `--color-<key>`. */\n  config: ChartConfig;\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>[\"children\"];\n};\n\n/**\n * Khung biểu đồ: cấp context `config`, bơm biến màu, và bọc sẵn `ResponsiveContainer`.\n * Tỉ lệ mặc định `aspect-video`; muốn cao cố định thì truyền `className=\"h-64 aspect-auto\"`.\n *\n * ─ ⚠ RECHARTS 2.15.x: PHẢI TỰ GHI `isAnimationActive={false}` LÊN TỪNG MARK ─\n * Với `recharts` 2.15.x + React 19.2, hiệu ứng vẽ dần (mặc định BẬT của recharts) không bao giờ\n * chạy tới khung hình cuối: mark đứng nguyên ở khung đầu, tức là **vô hình**. Biểu đồ ra đủ trục,\n * đủ lưới, đủ chú giải, KHÔNG có dữ liệu — không lỗi, không warning, chờ bao lâu cũng không tự hết.\n *\n * `<ComitorBarChart>` / `<ComitorLineChart>` / `<ComitorAreaChart>` đã đặt sẵn `false` từ `0.2.2`.\n * **`<ChartContainer>` thì KHÔNG đặt hộ được** — `<Bar>` / `<Line>` / `<Area>` là children do app\n * viết, container không sờ vào. Đi lối shadcn quen thuộc mà quên prop này là gặp đúng lỗi im lặng\n * của `0.2.1`:\n *\n * ```tsx\n * // ✗ recharts 2.15.x: <g class=\"recharts-bar-rectangle\"> rỗng, không cột nào\n * <ChartContainer config={config}>\n *   <BarChart data={data}>\n *     <XAxis dataKey=\"thang\" />\n *     <Bar dataKey=\"doanhThu\" fill=\"var(--color-doanhThu)\" />\n *   </BarChart>\n * </ChartContainer>\n *\n * // ✓ tắt tay trên TỪNG mark\n * <Bar dataKey=\"doanhThu\" fill=\"var(--color-doanhThu)\" isAnimationActive={false} />\n * ```\n *\n * Đo trên DOM thật (Next 16.3.2 · React 19.2.8 · recharts 2.15.4, `next build` + `next start`,\n * chờ 5000ms sau hydrate) — cùng một trang, chỉ khác một prop:\n *\n * | mark | thiếu prop | có `isAnimationActive={false}` |\n * |---|---|---|\n * | `<Bar>`  | 3 `<g.recharts-bar-rectangle>` nhưng **0** `path.recharts-rectangle` | **3/3** path, cao 273/410/342px |\n * | `<Line>` | `stroke-dasharray=\"0px 818.84px\"` | `stroke-dasharray` = `null` |\n * | `<Area>` | `<clipPath><rect width=\"0\">` | không còn rect width 0 |\n *\n * `recharts` 3.x không dính lỗi này — bỏ prop đi là được. Dải peer của gói là `>=2.15.0` nên\n * 2.15.x vẫn là cấu hình hợp lệ và phổ biến; cứ ghi `isAnimationActive={false}` cho chắc, trên\n * 3.x nó chỉ có nghĩa \"không hoạt hình\".\n */\nfunction ChartContainer({ id, className, children, config, ...props }: ChartContainerProps) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nexport type ChartStyleProps = {\n  /** Giá trị của thuộc tính `data-chart` trên container — dùng làm phạm vi cho biến màu. */\n  id: string;\n  config: ChartConfig;\n};\n\n/**\n * Sinh thẻ `<style>` chứa `--color-<key>` cho từng series, phạm vi `[data-chart=<id>]`.\n * `ChartContainer` đã render sẵn; chỉ export riêng cho ai tự dựng container.\n */\nconst ChartStyle = ({ id, config }: ChartStyleProps) => {\n  const colorConfig = Object.entries(config).filter(([, itemConfig]) => itemConfig.theme || itemConfig.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  // Một khối CSS cho mỗi theme: light không cần selector bọc ngoài, dark bọc bằng `.dark`.\n  const css = Object.entries(THEMES)\n    .map(([theme, prefix]) => {\n      const declarations = colorConfig\n        .map(([key, itemConfig]) => {\n          const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;\n          return color ? `  --color-${key}: ${color};` : null;\n        })\n        .filter(Boolean)\n        .join(\"\\n\");\n\n      return `${prefix} [data-chart=${id}] {\\n${declarations}\\n}`;\n    })\n    .join(\"\\n\");\n\n  // biome-ignore lint/security/noDangerouslySetInnerHtml: phải bơm nguyên khối CSS gồm nhiều selector (light + `.dark`) — React không có API nào khác cho việc này; nội dung ghép từ `config` do chính app khai, không phải dữ liệu người dùng nhập.\n  return <style dangerouslySetInnerHTML={{ __html: css }} />;\n};\n\n/** `Tooltip` của recharts — đặt `content={<ChartTooltipContent />}` để có giao diện theo token. */\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\n/**\n * Một phần tử `payload` do recharts bơm vào `content` của Tooltip/Legend.\n *\n * ─ VÌ SAO KHAI TẠI ĐÂY, KHÔNG DẪN XUẤT TỪ `TooltipProps`/`LegendProps` ─\n * recharts **3** đã bỏ `payload` (và `label`) khỏi props của `<Tooltip>`/`<Legend>` — hai\n * trường đó nay đi qua context nội bộ, nên `ComponentProps<typeof Tooltip>[\"payload\"]` và\n * `Pick<LegendProps, \"payload\">` **không còn tồn tại** ở 3.x. Dẫn xuất từ chúng khiến chính\n * file `.d.ts` phát hành ra npm hỏng kiểu ngay khi app cài recharts 3 (app nào tắt\n * `skipLibCheck` là thấy liền), tức peer `>=2.15.0` sẽ là một lời hứa suông.\n *\n * Hình dạng dưới đây là phần GIAO của 2.x và 3.x, và chỉ gồm đúng những trường component\n * này thật sự đọc. Ở 2.x nó **giao** với kiểu gốc của recharts (props Tooltip vẫn còn\n * `payload`) nên không nới lỏng gì; ở 3.x nó là nguồn duy nhất.\n */\nexport interface ChartPayloadItem {\n  value?: number;\n  name?: string;\n  dataKey?: string | number;\n  color?: string;\n  /** Bản ghi gốc của điểm dữ liệu — nơi `fill` và các cột khác của hàng nằm. */\n  payload?: Record<string, unknown> & { fill?: string };\n}\n\n/**\n * Chữ ký của `formatter`/`labelFormatter` mà component này THẬT SỰ gọi.\n *\n * Kiểu khai báo của hai prop đó vẫn là kiểu của recharts (đến từ `ComponentProps<typeof\n * Tooltip>`, để app truyền vào không bị hẹp đi), nhưng recharts 3 đòi tham số `item` là\n * `Payload` **đầy đủ** — gồm cả trường nội bộ `graphicalItemId` mà không ai ngoài recharts\n * dựng được. Nên chỗ GỌI đi qua hai chữ ký dưới đây kèm một lần ép kiểu tường minh: giá trị\n * truyền vào là thứ recharts vừa bơm ra, chỉ là TypeScript không lần được đường vòng đó.\n *\n * Tham số để `unknown` là CỐ Ý, không phải lười: hình dạng thật của `value`/`item` khác nhau\n * giữa hai bản recharts (2.x cho `value: ValueType` = `string | number | (string|number)[]`,\n * 3.x cho `Payload` có thêm trường nội bộ), nên ghim bất kỳ bên nào cũng làm bên kia đỏ. Đây\n * là cái cầu giữa hai bản, chỗ duy nhất trong gói không kiểm được kiểu — và nó dài đúng hai\n * lời gọi.\n */\ntype ChartValueFormatter = (\n  value: unknown,\n  name: unknown,\n  item: unknown,\n  index: number,\n  payload: unknown\n) => React.ReactNode;\n\ntype ChartLabelFormatter = (label: unknown, payload: unknown) => React.ReactNode;\n\nexport type ChartTooltipContentProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    /** Do recharts bơm vào — đừng truyền tay. */\n    payload?: ChartPayloadItem[];\n    /** Do recharts bơm vào — đừng truyền tay. */\n    label?: React.ReactNode;\n    /** Ẩn dòng nhãn (trục X) ở đầu tooltip. */\n    hideLabel?: boolean;\n    /** Ẩn ô màu đứng trước tên series. */\n    hideIndicator?: boolean;\n    /** Kiểu ô màu: chấm tròn / vạch đứng / vạch đứt. */\n    indicator?: \"line\" | \"dot\" | \"dashed\";\n    /** Khoá dùng để tra `config` cho TÊN series (mặc định `name` rồi tới `dataKey`). */\n    nameKey?: string;\n    /** Khoá dùng để tra `config` cho NHÃN trục X. */\n    labelKey?: string;\n  };\n\n/**\n * Nội dung tooltip theo design token Comitor: nền `bg-background`, viền `border-border/50`.\n *\n * Giá trị số (khi không có `formatter`) định dạng theo `locale` của `ComitorLocaleProvider` —\n * `1.234,5` ở `vi`, `1,234.5` ở `en`. Trước `3.0.0` ghim cứng `vi-VN`.\n */\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey\n}: ChartTooltipContentProps) {\n  const { config } = useChart();\n  const { locale } = useComitorLocale();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value = !labelKey && typeof label === \"string\" ? config[label]?.label || label : itemConfig?.label;\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {(labelFormatter as unknown as ChartLabelFormatter)(value, payload)}\n        </div>\n      );\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  // Chỉ một series + không phải chấm tròn → nhét nhãn vào trong hàng cho gọn.\n  const nestLabel = payload.length === 1 && indicator !== \"dot\";\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-overlay\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const key = `${nameKey || item.name || item.dataKey || \"value\"}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n          const indicatorColor = color || item.payload?.fill || item.color;\n          const rowKey = `${item.dataKey ?? item.name ?? index}`;\n\n          return (\n            <div\n              key={rowKey}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              {formatter && item?.value !== undefined && item.name ? (\n                (formatter as unknown as ChartValueFormatter)(item.value, item.name, item, index, payload)\n              ) : (\n                <>\n                  {itemConfig?.icon ? (\n                    <itemConfig.icon />\n                  ) : (\n                    !hideIndicator && (\n                      <div\n                        className={cn(\"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\", {\n                          \"h-2.5 w-2.5\": indicator === \"dot\",\n                          \"w-1\": indicator === \"line\",\n                          \"w-0 border-[1.5px] border-dashed bg-transparent\": indicator === \"dashed\",\n                          \"my-0.5\": nestLabel && indicator === \"dashed\"\n                        })}\n                        style={\n                          {\n                            \"--color-bg\": indicatorColor,\n                            \"--color-border\": indicatorColor\n                          } as React.CSSProperties\n                        }\n                      />\n                    )\n                  )}\n                  <div\n                    className={cn(\"flex flex-1 justify-between leading-none\", nestLabel ? \"items-end\" : \"items-center\")}\n                  >\n                    <div className=\"grid gap-1.5\">\n                      {nestLabel ? tooltipLabel : null}\n                      <span className=\"text-muted-foreground\">{itemConfig?.label || item.name}</span>\n                    </div>\n                    {item.value !== undefined && (\n                      <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                        {item.value.toLocaleString(locale)}\n                      </span>\n                    )}\n                  </div>\n                </>\n              )}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/** `Legend` của recharts — đặt `content={<ChartLegendContent />}` để lấy nhãn từ `config`. */\nconst ChartLegend = RechartsPrimitive.Legend;\n\nexport type ChartLegendContentProps = React.ComponentProps<\"div\"> & {\n  /** Do recharts bơm vào — đừng truyền tay. Xem `ChartPayloadItem` về lý do không dẫn xuất từ `LegendProps`. */\n  payload?: ChartPayloadItem[];\n  /** Do recharts bơm vào — quyết định chú giải đệm trên hay đệm dưới. */\n  verticalAlign?: \"top\" | \"middle\" | \"bottom\";\n  /** Ẩn icon riêng của series (nếu `config` có khai `icon`). */\n  hideIcon?: boolean;\n  /** Khoá dùng để tra `config` (mặc định `dataKey`). */\n  nameKey?: string;\n};\n\n/** Chú giải nằm ngang, nhãn lấy từ `config` chứ không phải `dataKey` thô. */\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey\n}: ChartLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div className={cn(\"flex items-center justify-center gap-4\", verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\", className)}>\n      {payload.map((item, index) => {\n        const key = `${nameKey || item.dataKey || \"value\"}`;\n        const itemConfig = getPayloadConfigFromPayload(config, item, key);\n        const rowKey = `${item.value ?? item.dataKey ?? index}`;\n\n        return (\n          <div key={rowKey} className=\"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\">\n            {itemConfig?.icon && !hideIcon ? (\n              <itemConfig.icon />\n            ) : (\n              <div\n                className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                style={{\n                  backgroundColor: item.color\n                }}\n              />\n            )}\n            {itemConfig?.label}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * Tra `config` từ một phần tử payload của recharts.\n * Payload có 2 tầng (`item` và `item.payload`) và khoá tra có thể nằm ở tầng nào cũng được —\n * hàm này thử cả hai trước khi rơi về chính `key`.\n */\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    \"payload\" in payload && typeof payload.payload === \"object\" && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === \"string\") {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nexport { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, useChart };\n"],"mappings":"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","names":[]}

package/dist/chart/comitor-chart.d.ts

@@ -35,7 +35,10 @@ interface ComitorChartTooltipProps {
     label?: string;
     /** Định dạng nhãn trục X (ví dụ đổi "2026-01" → "Th01/2026"). */
     labelFormatter?: (label: string) => string;
-    /** Định dạng giá trị (ví dụ thêm "₫", "%"). Mặc định: `toLocaleString("vi-VN")`. */
+    /**
+     * Định dạng giá trị (ví dụ thêm "₫", "%"). Mặc định: `toLocaleString(locale)` với `locale` của
+     * `ComitorLocaleProvider` (không có provider → `"en"`; trước `3.0.0` ghim cứng `"vi-VN"`).
+     */
     valueFormatter?: (value: number) => string;
 }
 /**

package/dist/chart/comitor-chart.js

@@ -14,6 +14,7 @@ import {
   XAxis,
   YAxis
 } from "recharts";
+import { useComitorLocale } from "../i18n/locale-provider.js";
 import { cn } from "../lib/cn.js";
 import { CHART_SERIES_COLORS } from "./chart-colors.js";
 function seriesColor(series, index) {
@@ -26,12 +27,13 @@ function ComitorChartTooltip({
   labelFormatter,
   valueFormatter
 }) {
+  const { locale } = useComitorLocale();
   if (!active || !payload?.length) return null;
   return /* @__PURE__ */ jsxs("div", { "data-slot": "comitor-chart-tooltip", className: "rounded-lg border border-border bg-card px-3 py-2 shadow-card", children: [
     label && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-foreground mb-1.5", children: labelFormatter ? labelFormatter(label) : label }),
     /* @__PURE__ */ jsx("div", { className: "space-y-1", children: payload.map((entry, i) => {
       const value = entry.value;
-      const display = value === void 0 ? "\u2014" : valueFormatter?.(value) ?? value.toLocaleString("vi-VN");
+      const display = value === void 0 ? "\u2014" : valueFormatter?.(value) ?? value.toLocaleString(locale);
       return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
         /* @__PURE__ */ jsx("span", { className: "h-2 w-2 rounded-full shrink-0", style: { backgroundColor: entry.color } }),
         /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [

package/dist/chart/comitor-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/chart/comitor-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis\n} from \"recharts\";\nimport { cn } from \"../lib/cn.js\";\n/*\n * `CHART_COLORS` / `CHART_SERIES_COLORS` sống ở `chart-colors.ts` — module KHÔNG có\n * `\"use client\"`. Chỉ IMPORT vào đây để dùng nội bộ, KHÔNG re-export: mọi export đi qua một\n * file client đều biến thành client-reference proxy ở phía Server Component (đọc ra\n * `undefined`, không throw). Barrel `chart/index.ts` xuất chúng thẳng từ `chart-colors.js`.\n * Lý do đầy đủ nằm ở đầu `chart-colors.ts`.\n */\nimport { CHART_SERIES_COLORS } from \"./chart-colors.js\";\n\n/**\n * Biểu đồ \"lắp sẵn\" của Comitor — dựng nhanh line/bar/area chỉ với `data` + `series`.\n * Khác `chart.tsx` (primitive shadcn thô, tự lắp recharts), file này là tầng tiện dụng:\n * đã chọn sẵn trục, lưới, tooltip và bảng màu theo token.\n *\n * ⚠ Tên export ĐÃ ĐỔI so với comitor-ds vì hai file đụng nhau trong cùng entry `/chart`:\n *   `ChartContainer` → `ComitorChartContainer`, `ChartTooltip` → `ComitorChartTooltip`.\n *   Tên trần `ChartContainer`/`ChartTooltip` để dành cho primitive shadcn (giữ tương thích\n *   `shadcn add`). Code mẫu cũ trong trang docs comitor-ds phải sửa theo.\n */\n\n/** Lấy màu cho series thứ `index`: ưu tiên màu tự khai, không có thì xoay vòng bảng mặc định. */\nfunction seriesColor(series: DataSeries, index: number): string {\n  return series.color ?? CHART_SERIES_COLORS[index % CHART_SERIES_COLORS.length] ?? CHART_SERIES_COLORS[0];\n}\n\n// ─── Tooltip ────────────────────────────────────────────────────────────────\n\n/**\n * Một phần tử payload recharts bơm vào tooltip.\n *\n * Khai tại đây thay vì `TooltipProps<number, string>[\"payload\"]`: recharts **3** đã bỏ\n * `payload` khỏi props của `<Tooltip>` (chuyển sang context nội bộ), nên phép dẫn xuất đó\n * hỏng kiểu ngay trong file `.d.ts` phát hành. Xem chú thích cùng nội dung ở `chart.tsx`\n * (`ChartPayloadItem`) — cùng một lý do, cùng một cách chữa.\n */\nexport interface ComitorChartPayloadItem {\n  value?: number;\n  name?: string;\n  dataKey?: string | number;\n  color?: string;\n  /**\n   * Bản ghi GỐC của điểm dữ liệu — hàng mà app đã truyền vào `data`.\n   *\n   * ⚠ Thiếu trường này thì một tooltip tự viết không lần được từ một điểm về hàng sinh ra nó, nên\n   * app không hiển thị nổi những cột KHÔNG nằm trong `series` (mã dự án, id, đơn vị…). Đó chính là\n   * lý do đẩy một app xuống tầng primitive để dựng lại cả biểu đồ — tức dựng bộ biểu đồ THỨ HAI mà\n   * gói sinh ra để tránh. Bản song sinh ở tầng primitive (`ChartPayloadItem`) đã có trường này từ\n   * đầu; đây là chỗ lệch, không phải chỗ thiếu có chủ ý.\n   */\n  payload?: Record<string, unknown> & { fill?: string };\n}\n\nexport interface ComitorChartTooltipProps {\n  /** Do recharts bơm vào — đừng truyền tay. */\n  active?: boolean;\n  /** Do recharts bơm vào — đừng truyền tay. */\n  payload?: ComitorChartPayloadItem[];\n  /** Do recharts bơm vào — đừng truyền tay. */\n  label?: string;\n  /** Định dạng nhãn trục X (ví dụ đổi \"2026-01\" → \"Th01/2026\"). */\n  labelFormatter?: (label: string) => string;\n  /** Định dạng giá trị (ví dụ thêm \"₫\", \"%\"). Mặc định: `toLocaleString(\"vi-VN\")`. */\n  valueFormatter?: (value: number) => string;\n}\n\n/**\n * Tooltip theo token Comitor. Truyền vào recharts dưới dạng element:\n * `<Tooltip content={<ComitorChartTooltip valueFormatter={f} />} />`.\n */\nexport function ComitorChartTooltip({\n  active,\n  payload,\n  label,\n  labelFormatter,\n  valueFormatter\n}: ComitorChartTooltipProps) {\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div data-slot=\"comitor-chart-tooltip\" className=\"rounded-lg border border-border bg-card px-3 py-2 shadow-card\">\n      {label && (\n        <p className=\"text-xs font-medium text-foreground mb-1.5\">{labelFormatter ? labelFormatter(label) : label}</p>\n      )}\n      <div className=\"space-y-1\">\n        {payload.map((entry, i) => {\n          const value = entry.value;\n          const display = value === undefined ? \"—\" : (valueFormatter?.(value) ?? value.toLocaleString(\"vi-VN\"));\n\n          return (\n            <div key={`${entry.dataKey ?? entry.name ?? i}`} className=\"flex items-center gap-2 text-xs\">\n              <span className=\"h-2 w-2 rounded-full shrink-0\" style={{ backgroundColor: entry.color }} />\n              <span className=\"text-muted-foreground\">{entry.name}:</span>\n              <span className=\"font-medium text-foreground\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Chú giải theo TOKEN của hệ thiết kế.\n *\n * ── VÌ SAO KHÔNG DÙNG `<Legend />` TRẦN ─────────────────────────────────────\n * Vì recharts tô CHỮ NHÃN bằng **màu của series**:\n * `DefaultLegendContent.js` → `finalLabelStyle.color = … || entry.color`.\n * Tức bậc `--x` (màu nền của series) bị dùng làm màu CHỮ — đúng vai trò mà hợp đồng ba vai trò của\n * gói cấm (§6 README: `--x` là nền, `--x-foreground` là chữ trên nền đó, `--x-ink` là chính màu đó\n * khi đi lên nền trang). Hậu quả không phải \"hơi nhạt\" mà là chú giải KHÔNG ĐỌC ĐƯỢC với những\n * series dùng tông sáng, và nó tự đổi theo bảng màu nên không bao giờ đo được một lần cho xong.\n *\n * Ở đây chấm màu giữ màu series (đúng vai trò: nó là NỀN của một hình vuông nhỏ), còn chữ dùng\n * `text-muted-foreground`. Cùng khuôn với `ComitorChartTooltip` ngay phía trên.\n */\n/**\n * Một mục trong `payload` mà recharts bơm vào `content` của `<Legend>`.\n *\n * ⚠ KHÁC hình dạng của Tooltip, và đây là chỗ dễ nhầm nhất: ở Legend, **nhãn nằm ở `value`** (một\n * chuỗi), còn ở Tooltip `value` là SỐ ĐO và nhãn nằm ở `name`. Dùng nhầm hình dạng thì component\n * vẫn biên dịch, vẫn render, chỉ là mọi nhãn RỖNG — chú giải hiện ra là mấy ô màu không chữ. Đã\n * xảy ra ở bản đầu của chính component này, và chỉ bị bắt khi có người NHÌN ảnh chụp.\n */\nexport interface ComitorChartLegendItem {\n  /** Nhãn hiển thị — `name` của series, hoặc `dataKey` nếu series không đặt tên. */\n  value?: string;\n  color?: string;\n  dataKey?: string | number;\n}\n\nexport interface ComitorChartLegendProps {\n  /** Do recharts bơm vào — đừng truyền tay. */\n  payload?: ComitorChartLegendItem[];\n}\n\nexport function ComitorChartLegend({ payload }: ComitorChartLegendProps) {\n  if (!payload?.length) return null;\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-2\">\n      {payload.map((entry, i) => (\n        <div key={`${entry.dataKey ?? entry.value ?? i}`} className=\"flex items-center gap-1.5 text-xs\">\n          {/* Chấm màu giữ màu series — ở đây `--x` đúng vai trò của nó: NỀN của một hình nhỏ. */}\n          <span className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: entry.color }} />\n          {/*\n            `text-foreground`, KHÔNG phải `text-muted-foreground`. Nhãn chú giải là CHÌA KHOÁ để đọc\n            biểu đồ — không đọc được nó thì mọi màu trong biểu đồ mất nghĩa — nên nó là chữ chính,\n            không phải chữ phụ. Đo trên `--card` ở bảng màu MẶC ĐỊNH: `--muted-foreground` cho\n            3,83:1, dưới ngưỡng 4,5:1 của WCAG cho chữ thường; `--foreground` cho 17,4:1.\n            ⚠ `pnpm lint:a11y` ĐO bảng mặc định (từ 1.6.0) nhưng **không CHẶN** ở đó — nó vào sổ\n            `banDuyetChuaChan`. Nên cổng xanh không có nghĩa cặp này đạt; con số trên đo bằng tay.\n          */}\n          <span className=\"text-foreground\">{entry.value}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n// ─── Khung ──────────────────────────────────────────────────────────────────\n\nexport interface ComitorChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Chiều cao khung. Số → px. Mặc định 300. */\n  height?: number | string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Khung `ResponsiveContainer` cao cố định. Khác `ChartContainer` của shadcn ở chỗ:\n * không cấp context `config`, không sinh biến `--color-<key>` — chỉ lo kích thước.\n */\nexport function ComitorChartContainer({\n  height = 300,\n  className,\n  children,\n  ref,\n  ...props\n}: ComitorChartContainerProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"comitor-chart\"\n      className={cn(\"w-full\", className)}\n      style={{ height: typeof height === \"number\" ? `${height}px` : height }}\n      {...props}\n    >\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        {children as React.ReactElement}\n      </ResponsiveContainer>\n    </div>\n  );\n}\n\n// ─── Kiểu dùng chung ────────────────────────────────────────────────────────\n\n/** Một series (một đường/cột/vùng) trong biểu đồ. */\nexport interface DataSeries {\n  /** Tên trường trong `data`. */\n  key: string;\n  /** Nhãn hiển thị ở tooltip/chú giải. Mặc định lấy `key`. */\n  name?: string;\n  /** Màu — nên lấy từ `CHART_COLORS` hoặc `var(--chart-N)`, đừng ghi hex. */\n  color?: string;\n}\n\nexport interface BaseChartProps {\n  data: Record<string, unknown>[];\n  /** Tên trường dùng cho trục X. */\n  xAxisKey: string;\n  height?: number | string;\n  className?: string;\n  showGrid?: boolean;\n  showLegend?: boolean;\n  valueFormatter?: (value: number) => string;\n  /**\n   * Bật hiệu ứng vẽ dần khi mark xuất hiện. **Mặc định `false`** — khác mặc định `true` của\n   * recharts, và đây là chủ đích.\n   *\n   * VÌ SAO TẮT MẶC ĐỊNH: với recharts 2.15.x + React 19.2 hiệu ứng KHÔNG bao giờ chạy tới\n   * khung hình cuối, nên mark đứng nguyên ở khung đầu — tức là vô hình. Ba dạng cùng một lỗi,\n   * đo được trên DOM thật:\n   *\n   *   `<Bar>`   `<g class=\"recharts-bar-rectangle\">` RỖNG — `Rectangle` trả `null` khi cao 0\n   *   `<Line>`  path có `d` đúng nhưng `stroke-dasharray=\"0px 634px\"` — vẽ 0px\n   *   `<Area>`  path có `d` đúng nhưng `<clipPath><rect width=\"0\">` — bị cắt sạch\n   *\n   * Kết quả giống hệt nhau ở cả ba: đủ trục, đủ lưới, đủ chú giải, KHÔNG có dữ liệu — và\n   * không tự hết sau khi chờ. Một biểu đồ hiện ra ngay đáng giá hơn hiệu ứng, nên mặc định\n   * đảo lại. Ai muốn hiệu ứng thì bật tường minh (`isAnimationActive` — recharts 3 chạy đúng).\n   */\n  isAnimationActive?: boolean;\n}\n\n/** Style dùng chung cho tick của cả hai trục — gom lại để 3 biểu đồ không lệch nhau. */\nconst AXIS_TICK = { fontSize: 11, fill: \"var(--muted-foreground)\" } as const;\nconst AXIS_LINE = { stroke: \"var(--border)\" } as const;\nconst CHART_MARGIN = { top: 8, right: 8, left: 0, bottom: 0 } as const;\n\n// ─── Line ───────────────────────────────────────────────────────────────────\n\nexport interface ComitorLineChartProps extends BaseChartProps {\n  series: DataSeries[];\n}\n\n/** Biểu đồ đường — dùng cho xu hướng theo thời gian. */\nexport function ComitorLineChart({\n  data,\n  xAxisKey,\n  series,\n  height = 300,\n  className,\n  showGrid = true,\n  showLegend = false,\n  valueFormatter,\n  isAnimationActive = false\n}: ComitorLineChartProps) {\n  return (\n    <ComitorChartContainer height={height} className={className}>\n      <LineChart data={data} margin={CHART_MARGIN}>\n        {showGrid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--border)\" />}\n        <XAxis dataKey={xAxisKey} tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <YAxis tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <Tooltip content={<ComitorChartTooltip valueFormatter={valueFormatter} />} />\n        {showLegend && <Legend content={<ComitorChartLegend />} />}\n        {series.map((s, i) => (\n          <Line\n            key={s.key}\n            type=\"monotone\"\n            dataKey={s.key}\n            name={s.name || s.key}\n            stroke={seriesColor(s, i)}\n            strokeWidth={2}\n            dot={false}\n            activeDot={{ r: 4, strokeWidth: 0 }}\n            isAnimationActive={isAnimationActive}\n          />\n        ))}\n      </LineChart>\n    </ComitorChartContainer>\n  );\n}\n\n// ─── Bar ────────────────────────────────────────────────────────────────────\n\nexport interface ComitorBarChartProps extends BaseChartProps {\n  series: DataSeries[];\n  /** Chồng các series lên nhau thay vì xếp cạnh. */\n  stacked?: boolean;\n}\n\n/** Biểu đồ cột — dùng cho so sánh giữa các hạng mục. Lưới chỉ kẻ ngang. */\nexport function ComitorBarChart({\n  data,\n  xAxisKey,\n  series,\n  height = 300,\n  className,\n  showGrid = true,\n  showLegend = false,\n  stacked = false,\n  valueFormatter,\n  isAnimationActive = false\n}: ComitorBarChartProps) {\n  return (\n    <ComitorChartContainer height={height} className={className}>\n      <BarChart data={data} margin={CHART_MARGIN}>\n        {showGrid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--border)\" vertical={false} />}\n        <XAxis dataKey={xAxisKey} tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <YAxis tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <Tooltip content={<ComitorChartTooltip valueFormatter={valueFormatter} />} />\n        {showLegend && <Legend content={<ComitorChartLegend />} />}\n        {series.map((s, i) => (\n          <Bar\n            key={s.key}\n            dataKey={s.key}\n            name={s.name || s.key}\n            fill={seriesColor(s, i)}\n            /*\n             * ⚠ CHỒNG thì CHỈ đoạn trên cùng được bo.\n             *\n             * `radius={[4, 4, 0, 0]}` cho mọi đoạn nghĩa là mỗi đoạn giữa chồng cũng có hai góc\n             * trên bo tròn, nằm ngay dưới đoạn kế tiếp — mắt thấy một vệt khuyết ở mỗi mối nối, và\n             * cột chồng trông như bị nứt thành nhiều mảnh rời. Không có gì báo: recharts vẽ đúng\n             * thứ được yêu cầu.\n             *\n             * Đoạn cuối trong `series` là đoạn NẰM TRÊN CÙNG của chồng (recharts xếp theo thứ tự\n             * khai), nên chỉ nó nhận bo góc.\n             *\n             * ⚠ Ca biên đã biết, không chữa: nếu series cuối có giá trị 0 ở một cột thì đoạn trên\n             * cùng NHÌN THẤY của cột đó là series áp chót, và nó phẳng. Chữa được thì phải tính\n             * theo TỪNG CỘT chứ không theo series, tức bỏ `<Bar>` mà tự vẽ — cái giá lớn hơn hẳn\n             * cái sai.\n             */\n            radius={stacked ? (i === series.length - 1 ? [4, 4, 0, 0] : 0) : [4, 4, 0, 0]}\n            stackId={stacked ? \"stack\" : undefined}\n            isAnimationActive={isAnimationActive}\n          />\n        ))}\n      </BarChart>\n    </ComitorChartContainer>\n  );\n}\n\n// ─── Area ───────────────────────────────────────────────────────────────────\n\nexport interface ComitorAreaChartProps extends BaseChartProps {\n  series: DataSeries[];\n  /** Chồng các series lên nhau (tổng tích luỹ). */\n  stacked?: boolean;\n}\n\n/** Biểu đồ vùng — xu hướng kèm cảm giác khối lượng; `fillOpacity` 0.15 để chồng lớp còn đọc được. */\nexport function ComitorAreaChart({\n  data,\n  xAxisKey,\n  series,\n  height = 300,\n  className,\n  showGrid = true,\n  showLegend = false,\n  stacked = false,\n  valueFormatter,\n  isAnimationActive = false\n}: ComitorAreaChartProps) {\n  return (\n    <ComitorChartContainer height={height} className={className}>\n      <AreaChart data={data} margin={CHART_MARGIN}>\n        {showGrid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--border)\" />}\n        <XAxis dataKey={xAxisKey} tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <YAxis tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <Tooltip content={<ComitorChartTooltip valueFormatter={valueFormatter} />} />\n        {showLegend && <Legend content={<ComitorChartLegend />} />}\n        {series.map((s, i) => {\n          const color = seriesColor(s, i);\n          return (\n            <Area\n              key={s.key}\n              type=\"monotone\"\n              dataKey={s.key}\n              name={s.name || s.key}\n              stroke={color}\n              fill={color}\n              fillOpacity={0.15}\n              strokeWidth={2}\n              stackId={stacked ? \"stack\" : undefined}\n              isAnimationActive={isAnimationActive}\n            />\n          );\n        })}\n      </AreaChart>\n    </ComitorChartContainer>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/chart/comitor-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Legend,\n  Line,\n  LineChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis\n} from \"recharts\";\nimport { useComitorLocale } from \"../i18n/locale-provider.js\";\nimport { cn } from \"../lib/cn.js\";\n/*\n * `CHART_COLORS` / `CHART_SERIES_COLORS` sống ở `chart-colors.ts` — module KHÔNG có\n * `\"use client\"`. Chỉ IMPORT vào đây để dùng nội bộ, KHÔNG re-export: mọi export đi qua một\n * file client đều biến thành client-reference proxy ở phía Server Component (đọc ra\n * `undefined`, không throw). Barrel `chart/index.ts` xuất chúng thẳng từ `chart-colors.js`.\n * Lý do đầy đủ nằm ở đầu `chart-colors.ts`.\n */\nimport { CHART_SERIES_COLORS } from \"./chart-colors.js\";\n\n/**\n * Biểu đồ \"lắp sẵn\" của Comitor — dựng nhanh line/bar/area chỉ với `data` + `series`.\n * Khác `chart.tsx` (primitive shadcn thô, tự lắp recharts), file này là tầng tiện dụng:\n * đã chọn sẵn trục, lưới, tooltip và bảng màu theo token.\n *\n * ⚠ Tên export ĐÃ ĐỔI so với comitor-ds vì hai file đụng nhau trong cùng entry `/chart`:\n *   `ChartContainer` → `ComitorChartContainer`, `ChartTooltip` → `ComitorChartTooltip`.\n *   Tên trần `ChartContainer`/`ChartTooltip` để dành cho primitive shadcn (giữ tương thích\n *   `shadcn add`). Code mẫu cũ trong trang docs comitor-ds phải sửa theo.\n */\n\n/** Lấy màu cho series thứ `index`: ưu tiên màu tự khai, không có thì xoay vòng bảng mặc định. */\nfunction seriesColor(series: DataSeries, index: number): string {\n  return series.color ?? CHART_SERIES_COLORS[index % CHART_SERIES_COLORS.length] ?? CHART_SERIES_COLORS[0];\n}\n\n// ─── Tooltip ────────────────────────────────────────────────────────────────\n\n/**\n * Một phần tử payload recharts bơm vào tooltip.\n *\n * Khai tại đây thay vì `TooltipProps<number, string>[\"payload\"]`: recharts **3** đã bỏ\n * `payload` khỏi props của `<Tooltip>` (chuyển sang context nội bộ), nên phép dẫn xuất đó\n * hỏng kiểu ngay trong file `.d.ts` phát hành. Xem chú thích cùng nội dung ở `chart.tsx`\n * (`ChartPayloadItem`) — cùng một lý do, cùng một cách chữa.\n */\nexport interface ComitorChartPayloadItem {\n  value?: number;\n  name?: string;\n  dataKey?: string | number;\n  color?: string;\n  /**\n   * Bản ghi GỐC của điểm dữ liệu — hàng mà app đã truyền vào `data`.\n   *\n   * ⚠ Thiếu trường này thì một tooltip tự viết không lần được từ một điểm về hàng sinh ra nó, nên\n   * app không hiển thị nổi những cột KHÔNG nằm trong `series` (mã dự án, id, đơn vị…). Đó chính là\n   * lý do đẩy một app xuống tầng primitive để dựng lại cả biểu đồ — tức dựng bộ biểu đồ THỨ HAI mà\n   * gói sinh ra để tránh. Bản song sinh ở tầng primitive (`ChartPayloadItem`) đã có trường này từ\n   * đầu; đây là chỗ lệch, không phải chỗ thiếu có chủ ý.\n   */\n  payload?: Record<string, unknown> & { fill?: string };\n}\n\nexport interface ComitorChartTooltipProps {\n  /** Do recharts bơm vào — đừng truyền tay. */\n  active?: boolean;\n  /** Do recharts bơm vào — đừng truyền tay. */\n  payload?: ComitorChartPayloadItem[];\n  /** Do recharts bơm vào — đừng truyền tay. */\n  label?: string;\n  /** Định dạng nhãn trục X (ví dụ đổi \"2026-01\" → \"Th01/2026\"). */\n  labelFormatter?: (label: string) => string;\n  /**\n   * Định dạng giá trị (ví dụ thêm \"₫\", \"%\"). Mặc định: `toLocaleString(locale)` với `locale` của\n   * `ComitorLocaleProvider` (không có provider → `\"en\"`; trước `3.0.0` ghim cứng `\"vi-VN\"`).\n   */\n  valueFormatter?: (value: number) => string;\n}\n\n/**\n * Tooltip theo token Comitor. Truyền vào recharts dưới dạng element:\n * `<Tooltip content={<ComitorChartTooltip valueFormatter={f} />} />`.\n */\nexport function ComitorChartTooltip({\n  active,\n  payload,\n  label,\n  labelFormatter,\n  valueFormatter\n}: ComitorChartTooltipProps) {\n  const { locale } = useComitorLocale();\n  if (!active || !payload?.length) return null;\n\n  return (\n    <div data-slot=\"comitor-chart-tooltip\" className=\"rounded-lg border border-border bg-card px-3 py-2 shadow-card\">\n      {label && (\n        <p className=\"text-xs font-medium text-foreground mb-1.5\">{labelFormatter ? labelFormatter(label) : label}</p>\n      )}\n      <div className=\"space-y-1\">\n        {payload.map((entry, i) => {\n          const value = entry.value;\n          const display = value === undefined ? \"—\" : (valueFormatter?.(value) ?? value.toLocaleString(locale));\n\n          return (\n            <div key={`${entry.dataKey ?? entry.name ?? i}`} className=\"flex items-center gap-2 text-xs\">\n              <span className=\"h-2 w-2 rounded-full shrink-0\" style={{ backgroundColor: entry.color }} />\n              <span className=\"text-muted-foreground\">{entry.name}:</span>\n              <span className=\"font-medium text-foreground\">{display}</span>\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Chú giải theo TOKEN của hệ thiết kế.\n *\n * ── VÌ SAO KHÔNG DÙNG `<Legend />` TRẦN ─────────────────────────────────────\n * Vì recharts tô CHỮ NHÃN bằng **màu của series**:\n * `DefaultLegendContent.js` → `finalLabelStyle.color = … || entry.color`.\n * Tức bậc `--x` (màu nền của series) bị dùng làm màu CHỮ — đúng vai trò mà hợp đồng ba vai trò của\n * gói cấm (§6 README: `--x` là nền, `--x-foreground` là chữ trên nền đó, `--x-ink` là chính màu đó\n * khi đi lên nền trang). Hậu quả không phải \"hơi nhạt\" mà là chú giải KHÔNG ĐỌC ĐƯỢC với những\n * series dùng tông sáng, và nó tự đổi theo bảng màu nên không bao giờ đo được một lần cho xong.\n *\n * Ở đây chấm màu giữ màu series (đúng vai trò: nó là NỀN của một hình vuông nhỏ), còn chữ dùng\n * `text-muted-foreground`. Cùng khuôn với `ComitorChartTooltip` ngay phía trên.\n */\n/**\n * Một mục trong `payload` mà recharts bơm vào `content` của `<Legend>`.\n *\n * ⚠ KHÁC hình dạng của Tooltip, và đây là chỗ dễ nhầm nhất: ở Legend, **nhãn nằm ở `value`** (một\n * chuỗi), còn ở Tooltip `value` là SỐ ĐO và nhãn nằm ở `name`. Dùng nhầm hình dạng thì component\n * vẫn biên dịch, vẫn render, chỉ là mọi nhãn RỖNG — chú giải hiện ra là mấy ô màu không chữ. Đã\n * xảy ra ở bản đầu của chính component này, và chỉ bị bắt khi có người NHÌN ảnh chụp.\n */\nexport interface ComitorChartLegendItem {\n  /** Nhãn hiển thị — `name` của series, hoặc `dataKey` nếu series không đặt tên. */\n  value?: string;\n  color?: string;\n  dataKey?: string | number;\n}\n\nexport interface ComitorChartLegendProps {\n  /** Do recharts bơm vào — đừng truyền tay. */\n  payload?: ComitorChartLegendItem[];\n}\n\nexport function ComitorChartLegend({ payload }: ComitorChartLegendProps) {\n  if (!payload?.length) return null;\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-2\">\n      {payload.map((entry, i) => (\n        <div key={`${entry.dataKey ?? entry.value ?? i}`} className=\"flex items-center gap-1.5 text-xs\">\n          {/* Chấm màu giữ màu series — ở đây `--x` đúng vai trò của nó: NỀN của một hình nhỏ. */}\n          <span className=\"size-2 shrink-0 rounded-[2px]\" style={{ backgroundColor: entry.color }} />\n          {/*\n            `text-foreground`, KHÔNG phải `text-muted-foreground`. Nhãn chú giải là CHÌA KHOÁ để đọc\n            biểu đồ — không đọc được nó thì mọi màu trong biểu đồ mất nghĩa — nên nó là chữ chính,\n            không phải chữ phụ. Đo trên `--card` ở bảng màu MẶC ĐỊNH: `--muted-foreground` cho\n            3,83:1, dưới ngưỡng 4,5:1 của WCAG cho chữ thường; `--foreground` cho 17,4:1.\n            ⚠ `pnpm lint:a11y` ĐO bảng mặc định (từ 1.6.0) nhưng **không CHẶN** ở đó — nó vào sổ\n            `banDuyetChuaChan`. Nên cổng xanh không có nghĩa cặp này đạt; con số trên đo bằng tay.\n          */}\n          <span className=\"text-foreground\">{entry.value}</span>\n        </div>\n      ))}\n    </div>\n  );\n}\n\n// ─── Khung ──────────────────────────────────────────────────────────────────\n\nexport interface ComitorChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Chiều cao khung. Số → px. Mặc định 300. */\n  height?: number | string;\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Khung `ResponsiveContainer` cao cố định. Khác `ChartContainer` của shadcn ở chỗ:\n * không cấp context `config`, không sinh biến `--color-<key>` — chỉ lo kích thước.\n */\nexport function ComitorChartContainer({\n  height = 300,\n  className,\n  children,\n  ref,\n  ...props\n}: ComitorChartContainerProps) {\n  return (\n    <div\n      ref={ref}\n      data-slot=\"comitor-chart\"\n      className={cn(\"w-full\", className)}\n      style={{ height: typeof height === \"number\" ? `${height}px` : height }}\n      {...props}\n    >\n      <ResponsiveContainer width=\"100%\" height=\"100%\">\n        {children as React.ReactElement}\n      </ResponsiveContainer>\n    </div>\n  );\n}\n\n// ─── Kiểu dùng chung ────────────────────────────────────────────────────────\n\n/** Một series (một đường/cột/vùng) trong biểu đồ. */\nexport interface DataSeries {\n  /** Tên trường trong `data`. */\n  key: string;\n  /** Nhãn hiển thị ở tooltip/chú giải. Mặc định lấy `key`. */\n  name?: string;\n  /** Màu — nên lấy từ `CHART_COLORS` hoặc `var(--chart-N)`, đừng ghi hex. */\n  color?: string;\n}\n\nexport interface BaseChartProps {\n  data: Record<string, unknown>[];\n  /** Tên trường dùng cho trục X. */\n  xAxisKey: string;\n  height?: number | string;\n  className?: string;\n  showGrid?: boolean;\n  showLegend?: boolean;\n  valueFormatter?: (value: number) => string;\n  /**\n   * Bật hiệu ứng vẽ dần khi mark xuất hiện. **Mặc định `false`** — khác mặc định `true` của\n   * recharts, và đây là chủ đích.\n   *\n   * VÌ SAO TẮT MẶC ĐỊNH: với recharts 2.15.x + React 19.2 hiệu ứng KHÔNG bao giờ chạy tới\n   * khung hình cuối, nên mark đứng nguyên ở khung đầu — tức là vô hình. Ba dạng cùng một lỗi,\n   * đo được trên DOM thật:\n   *\n   *   `<Bar>`   `<g class=\"recharts-bar-rectangle\">` RỖNG — `Rectangle` trả `null` khi cao 0\n   *   `<Line>`  path có `d` đúng nhưng `stroke-dasharray=\"0px 634px\"` — vẽ 0px\n   *   `<Area>`  path có `d` đúng nhưng `<clipPath><rect width=\"0\">` — bị cắt sạch\n   *\n   * Kết quả giống hệt nhau ở cả ba: đủ trục, đủ lưới, đủ chú giải, KHÔNG có dữ liệu — và\n   * không tự hết sau khi chờ. Một biểu đồ hiện ra ngay đáng giá hơn hiệu ứng, nên mặc định\n   * đảo lại. Ai muốn hiệu ứng thì bật tường minh (`isAnimationActive` — recharts 3 chạy đúng).\n   */\n  isAnimationActive?: boolean;\n}\n\n/** Style dùng chung cho tick của cả hai trục — gom lại để 3 biểu đồ không lệch nhau. */\nconst AXIS_TICK = { fontSize: 11, fill: \"var(--muted-foreground)\" } as const;\nconst AXIS_LINE = { stroke: \"var(--border)\" } as const;\nconst CHART_MARGIN = { top: 8, right: 8, left: 0, bottom: 0 } as const;\n\n// ─── Line ───────────────────────────────────────────────────────────────────\n\nexport interface ComitorLineChartProps extends BaseChartProps {\n  series: DataSeries[];\n}\n\n/** Biểu đồ đường — dùng cho xu hướng theo thời gian. */\nexport function ComitorLineChart({\n  data,\n  xAxisKey,\n  series,\n  height = 300,\n  className,\n  showGrid = true,\n  showLegend = false,\n  valueFormatter,\n  isAnimationActive = false\n}: ComitorLineChartProps) {\n  return (\n    <ComitorChartContainer height={height} className={className}>\n      <LineChart data={data} margin={CHART_MARGIN}>\n        {showGrid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--border)\" />}\n        <XAxis dataKey={xAxisKey} tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <YAxis tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <Tooltip content={<ComitorChartTooltip valueFormatter={valueFormatter} />} />\n        {showLegend && <Legend content={<ComitorChartLegend />} />}\n        {series.map((s, i) => (\n          <Line\n            key={s.key}\n            type=\"monotone\"\n            dataKey={s.key}\n            name={s.name || s.key}\n            stroke={seriesColor(s, i)}\n            strokeWidth={2}\n            dot={false}\n            activeDot={{ r: 4, strokeWidth: 0 }}\n            isAnimationActive={isAnimationActive}\n          />\n        ))}\n      </LineChart>\n    </ComitorChartContainer>\n  );\n}\n\n// ─── Bar ────────────────────────────────────────────────────────────────────\n\nexport interface ComitorBarChartProps extends BaseChartProps {\n  series: DataSeries[];\n  /** Chồng các series lên nhau thay vì xếp cạnh. */\n  stacked?: boolean;\n}\n\n/** Biểu đồ cột — dùng cho so sánh giữa các hạng mục. Lưới chỉ kẻ ngang. */\nexport function ComitorBarChart({\n  data,\n  xAxisKey,\n  series,\n  height = 300,\n  className,\n  showGrid = true,\n  showLegend = false,\n  stacked = false,\n  valueFormatter,\n  isAnimationActive = false\n}: ComitorBarChartProps) {\n  return (\n    <ComitorChartContainer height={height} className={className}>\n      <BarChart data={data} margin={CHART_MARGIN}>\n        {showGrid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--border)\" vertical={false} />}\n        <XAxis dataKey={xAxisKey} tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <YAxis tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <Tooltip content={<ComitorChartTooltip valueFormatter={valueFormatter} />} />\n        {showLegend && <Legend content={<ComitorChartLegend />} />}\n        {series.map((s, i) => (\n          <Bar\n            key={s.key}\n            dataKey={s.key}\n            name={s.name || s.key}\n            fill={seriesColor(s, i)}\n            /*\n             * ⚠ CHỒNG thì CHỈ đoạn trên cùng được bo.\n             *\n             * `radius={[4, 4, 0, 0]}` cho mọi đoạn nghĩa là mỗi đoạn giữa chồng cũng có hai góc\n             * trên bo tròn, nằm ngay dưới đoạn kế tiếp — mắt thấy một vệt khuyết ở mỗi mối nối, và\n             * cột chồng trông như bị nứt thành nhiều mảnh rời. Không có gì báo: recharts vẽ đúng\n             * thứ được yêu cầu.\n             *\n             * Đoạn cuối trong `series` là đoạn NẰM TRÊN CÙNG của chồng (recharts xếp theo thứ tự\n             * khai), nên chỉ nó nhận bo góc.\n             *\n             * ⚠ Ca biên đã biết, không chữa: nếu series cuối có giá trị 0 ở một cột thì đoạn trên\n             * cùng NHÌN THẤY của cột đó là series áp chót, và nó phẳng. Chữa được thì phải tính\n             * theo TỪNG CỘT chứ không theo series, tức bỏ `<Bar>` mà tự vẽ — cái giá lớn hơn hẳn\n             * cái sai.\n             */\n            radius={stacked ? (i === series.length - 1 ? [4, 4, 0, 0] : 0) : [4, 4, 0, 0]}\n            stackId={stacked ? \"stack\" : undefined}\n            isAnimationActive={isAnimationActive}\n          />\n        ))}\n      </BarChart>\n    </ComitorChartContainer>\n  );\n}\n\n// ─── Area ───────────────────────────────────────────────────────────────────\n\nexport interface ComitorAreaChartProps extends BaseChartProps {\n  series: DataSeries[];\n  /** Chồng các series lên nhau (tổng tích luỹ). */\n  stacked?: boolean;\n}\n\n/** Biểu đồ vùng — xu hướng kèm cảm giác khối lượng; `fillOpacity` 0.15 để chồng lớp còn đọc được. */\nexport function ComitorAreaChart({\n  data,\n  xAxisKey,\n  series,\n  height = 300,\n  className,\n  showGrid = true,\n  showLegend = false,\n  stacked = false,\n  valueFormatter,\n  isAnimationActive = false\n}: ComitorAreaChartProps) {\n  return (\n    <ComitorChartContainer height={height} className={className}>\n      <AreaChart data={data} margin={CHART_MARGIN}>\n        {showGrid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--border)\" />}\n        <XAxis dataKey={xAxisKey} tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <YAxis tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />\n        <Tooltip content={<ComitorChartTooltip valueFormatter={valueFormatter} />} />\n        {showLegend && <Legend content={<ComitorChartLegend />} />}\n        {series.map((s, i) => {\n          const color = seriesColor(s, i);\n          return (\n            <Area\n              key={s.key}\n              type=\"monotone\"\n              dataKey={s.key}\n              name={s.name || s.key}\n              stroke={color}\n              fill={color}\n              fillOpacity={0.15}\n              strokeWidth={2}\n              stackId={stacked ? \"stack\" : undefined}\n              isAnimationActive={isAnimationActive}\n            />\n          );\n        })}\n      </AreaChart>\n    </ComitorChartContainer>\n  );\n}\n"],"mappings":";AAwGQ,cAUM,YAVN;AArGR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAQnB,SAAS,2BAA2B;AAcpC,SAAS,YAAY,QAAoB,OAAuB;AAC9D,SAAO,OAAO,SAAS,oBAAoB,QAAQ,oBAAoB,MAAM,KAAK,oBAAoB,CAAC;AACzG;AAiDO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA6B;AAC3B,QAAM,EAAE,OAAO,IAAI,iBAAiB;AACpC,MAAI,CAAC,UAAU,CAAC,SAAS,OAAQ,QAAO;AAExC,SACE,qBAAC,SAAI,aAAU,yBAAwB,WAAU,iEAC9C;AAAA,aACC,oBAAC,OAAE,WAAU,8CAA8C,2BAAiB,eAAe,KAAK,IAAI,OAAM;AAAA,IAE5G,oBAAC,SAAI,WAAU,aACZ,kBAAQ,IAAI,CAAC,OAAO,MAAM;AACzB,YAAM,QAAQ,MAAM;AACpB,YAAM,UAAU,UAAU,SAAY,WAAO,iBAAiB,KAAK,KAAK,MAAM,eAAe,MAAM;AAEnG,aACE,qBAAC,SAAgD,WAAU,mCACzD;AAAA,4BAAC,UAAK,WAAU,iCAAgC,OAAO,EAAE,iBAAiB,MAAM,MAAM,GAAG;AAAA,QACzF,qBAAC,UAAK,WAAU,yBAAyB;AAAA,gBAAM;AAAA,UAAK;AAAA,WAAC;AAAA,QACrD,oBAAC,UAAK,WAAU,+BAA+B,mBAAQ;AAAA,WAH/C,GAAG,MAAM,WAAW,MAAM,QAAQ,CAAC,EAI7C;AAAA,IAEJ,CAAC,GACH;AAAA,KACF;AAEJ;AAoCO,SAAS,mBAAmB,EAAE,QAAQ,GAA4B;AACvE,MAAI,CAAC,SAAS,OAAQ,QAAO;AAE7B,SACE,oBAAC,SAAI,WAAU,mEACZ,kBAAQ,IAAI,CAAC,OAAO,MACnB,qBAAC,SAAiD,WAAU,qCAE1D;AAAA,wBAAC,UAAK,WAAU,iCAAgC,OAAO,EAAE,iBAAiB,MAAM,MAAM,GAAG;AAAA,IASzF,oBAAC,UAAK,WAAU,mBAAmB,gBAAM,OAAM;AAAA,OAXvC,GAAG,MAAM,WAAW,MAAM,SAAS,CAAC,EAY9C,CACD,GACH;AAEJ;AAcO,SAAS,sBAAsB;AAAA,EACpC,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA+B;AAC7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,UAAU,SAAS;AAAA,MACjC,OAAO,EAAE,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO,OAAO;AAAA,MACpE,GAAG;AAAA,MAEJ,8BAAC,uBAAoB,OAAM,QAAO,QAAO,QACtC,UACH;AAAA;AAAA,EACF;AAEJ;AA2CA,MAAM,YAAY,EAAE,UAAU,IAAI,MAAM,0BAA0B;AAClE,MAAM,YAAY,EAAE,QAAQ,gBAAgB;AAC5C,MAAM,eAAe,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,EAAE;AASrD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AAAA,EACA,oBAAoB;AACtB,GAA0B;AACxB,SACE,oBAAC,yBAAsB,QAAgB,WACrC,+BAAC,aAAU,MAAY,QAAQ,cAC5B;AAAA,gBAAY,oBAAC,iBAAc,iBAAgB,OAAM,QAAO,iBAAgB;AAAA,IACzE,oBAAC,SAAM,SAAS,UAAU,MAAM,WAAW,UAAU,WAAW,UAAU,WAAW;AAAA,IACrF,oBAAC,SAAM,MAAM,WAAW,UAAU,WAAW,UAAU,WAAW;AAAA,IAClE,oBAAC,WAAQ,SAAS,oBAAC,uBAAoB,gBAAgC,GAAI;AAAA,IAC1E,cAAc,oBAAC,UAAO,SAAS,oBAAC,sBAAmB,GAAI;AAAA,IACvD,OAAO,IAAI,CAAC,GAAG,MACd;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAS,EAAE;AAAA,QACX,MAAM,EAAE,QAAQ,EAAE;AAAA,QAClB,QAAQ,YAAY,GAAG,CAAC;AAAA,QACxB,aAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW,EAAE,GAAG,GAAG,aAAa,EAAE;AAAA,QAClC;AAAA;AAAA,MARK,EAAE;AAAA,IAST,CACD;AAAA,KACH,GACF;AAEJ;AAWO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA,oBAAoB;AACtB,GAAyB;AACvB,SACE,oBAAC,yBAAsB,QAAgB,WACrC,+BAAC,YAAS,MAAY,QAAQ,cAC3B;AAAA,gBAAY,oBAAC,iBAAc,iBAAgB,OAAM,QAAO,iBAAgB,UAAU,OAAO;AAAA,IAC1F,oBAAC,SAAM,SAAS,UAAU,MAAM,WAAW,UAAU,WAAW,UAAU,WAAW;AAAA,IACrF,oBAAC,SAAM,MAAM,WAAW,UAAU,WAAW,UAAU,WAAW;AAAA,IAClE,oBAAC,WAAQ,SAAS,oBAAC,uBAAoB,gBAAgC,GAAI;AAAA,IAC1E,cAAc,oBAAC,UAAO,SAAS,oBAAC,sBAAmB,GAAI;AAAA,IACvD,OAAO,IAAI,CAAC,GAAG,MACd;AAAA,MAAC;AAAA;AAAA,QAEC,SAAS,EAAE;AAAA,QACX,MAAM,EAAE,QAAQ,EAAE;AAAA,QAClB,MAAM,YAAY,GAAG,CAAC;AAAA,QAiBtB,QAAQ,UAAW,MAAM,OAAO,SAAS,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,IAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAAA,QAC5E,SAAS,UAAU,UAAU;AAAA,QAC7B;AAAA;AAAA,MAtBK,EAAE;AAAA,IAuBT,CACD;AAAA,KACH,GACF;AAEJ;AAWO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,UAAU;AAAA,EACV;AAAA,EACA,oBAAoB;AACtB,GAA0B;AACxB,SACE,oBAAC,yBAAsB,QAAgB,WACrC,+BAAC,aAAU,MAAY,QAAQ,cAC5B;AAAA,gBAAY,oBAAC,iBAAc,iBAAgB,OAAM,QAAO,iBAAgB;AAAA,IACzE,oBAAC,SAAM,SAAS,UAAU,MAAM,WAAW,UAAU,WAAW,UAAU,WAAW;AAAA,IACrF,oBAAC,SAAM,MAAM,WAAW,UAAU,WAAW,UAAU,WAAW;AAAA,IAClE,oBAAC,WAAQ,SAAS,oBAAC,uBAAoB,gBAAgC,GAAI;AAAA,IAC1E,cAAc,oBAAC,UAAO,SAAS,oBAAC,sBAAmB,GAAI;AAAA,IACvD,OAAO,IAAI,CAAC,GAAG,MAAM;AACpB,YAAM,QAAQ,YAAY,GAAG,CAAC;AAC9B,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,MAAK;AAAA,UACL,SAAS,EAAE;AAAA,UACX,MAAM,EAAE,QAAQ,EAAE;AAAA,UAClB,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,aAAa;AAAA,UACb,aAAa;AAAA,UACb,SAAS,UAAU,UAAU;AAAA,UAC7B;AAAA;AAAA,QATK,EAAE;AAAA,MAUT;AAAA,IAEJ,CAAC;AAAA,KACH,GACF;AAEJ;","names":[]}

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

@@ -17,8 +17,8 @@ interface AvatarGroupProps extends Omit<ComponentProps<"div">, "children"> {
     /** Bấm vào ô "+k" — vd mở danh sách đầy đủ */
     onOverflowClick?: () => void;
     /**
-     * Nhãn `sr-only` của ô "+k" khi ô đó bấm được — mặc định
-     * `(count) => "Xem tất cả " + count + " thành viên"`.
+     * Nhãn `sr-only` của ô "+k" khi ô đó bấm được. Không truyền thì lấy khoá `overflowLabel` của
+     * namespace `avatarGroup` (`ComitorLocaleProvider`, mặc định tiếng Anh: "View all 5 members").
      *
      * Là HÀM chứ không phải chuỗi mẫu vì có số chèn vào giữa câu: trật tự từ quanh con số khác nhau
      * theo ngôn ngữ, nên mọi cách để gói tự ghép chuỗi đều là chỗ chắc chắn dịch sai.
@@ -28,11 +28,14 @@ interface AvatarGroupProps extends Omit<ComponentProps<"div">, "children"> {
      *
      * Khác `label` ở tầm phủ: `label` đặt tên cho CẢ NHÓM (`aria-label` của `role="group"`), đọc lên
      * khi con trỏ bước vào nhóm; `overflowLabel` đặt tên cho MỘT nút bên trong, đọc lên khi Tab tới
-     * đúng ô "+k". App đa ngôn ngữ phải dịch cả hai — dịch mỗi `label` thì nhóm mang tên tiếng Anh
-     * mà nút cuối vẫn xưng tiếng Việt.
+     * đúng ô "+k". Đè bằng prop thì đè cả hai — đè mỗi `label` thì nhóm mang tên mới mà nút cuối
+     * vẫn xưng theo bảng của provider.
      */
     overflowLabel?: (count: number) => string;
-    /** Nhãn của cả nhóm cho trình đọc màn hình (mặc định "Thành viên") — xem `overflowLabel` để phân biệt */
+    /**
+     * Nhãn của cả nhóm cho trình đọc màn hình (khoá `label` của namespace `avatarGroup`) — xem
+     * `overflowLabel` để phân biệt
+     */
     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.
@@ -56,6 +59,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, overflowLabel, label, surfaceClassName, className, ...props }: AvatarGroupProps): React.JSX.Element;
+declare function AvatarGroup({ items, max, size, onOverflowClick, overflowLabel: overflowLabelProp, label: labelProp, surfaceClassName, className, ...props }: AvatarGroupProps): React.JSX.Element;
 
 export { AvatarGroup, type AvatarGroupItem, type AvatarGroupProps };

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useComitorMessages } from "../../i18n/locale-provider.js";
 import { cn } from "../../lib/cn.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip.js";
 import { LetterAvatar } from "./letter-avatar.js";
@@ -22,12 +23,15 @@ function AvatarGroup({
   max = 4,
   size = "sm",
   onOverflowClick,
-  overflowLabel = (count) => `Xem t\u1EA5t c\u1EA3 ${count} th\xE0nh vi\xEAn`,
-  label = "Th\xE0nh vi\xEAn",
+  overflowLabel: overflowLabelProp,
+  label: labelProp,
   surfaceClassName = "bg-card ring-card",
   className,
   ...props
 }) {
+  const t = useComitorMessages("avatarGroup");
+  const overflowLabel = overflowLabelProp ?? t.overflowLabel;
+  const label = labelProp ?? t.label;
   const visible = items.slice(0, Math.max(0, max));
   const overflow = items.length - visible.length;
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(

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  /**\n   * Nhãn `sr-only` của ô \"+k\" khi ô đó bấm được — mặc định\n   * `(count) => \"Xem tất cả \" + count + \" thành viên\"`.\n   *\n   * Là HÀM chứ không phải chuỗi mẫu vì có số chèn vào giữa câu: trật tự từ quanh con số khác nhau\n   * theo ngôn ngữ, nên mọi cách để gói tự ghép chuỗi đều là chỗ chắc chắn dịch sai.\n   *\n   * Nhận TỔNG số thành viên (`items.length`), không phải phần dư đang bị giấu: mặt nút đã in sẵn\n   * \"+k\" là phần dư rồi, còn câu này nói ra HÀNH ĐỘNG — bấm vào là xem hết cả nhóm.\n   *\n   * Khác `label` ở tầm phủ: `label` đặt tên cho CẢ NHÓM (`aria-label` của `role=\"group\"`), đọc lên\n   * khi con trỏ bước vào nhóm; `overflowLabel` đặt tên cho MỘT nút bên trong, đọc lên khi Tab tới\n   * đúng ô \"+k\". App đa ngôn ngữ phải dịch cả hai — dịch mỗi `label` thì nhóm mang tên tiếng Anh\n   * mà nút cuối vẫn xưng tiếng Việt.\n   */\n  overflowLabel?: (count: number) => string;\n  /** Nhãn của cả nhóm cho trình đọc màn hình (mặc định \"Thành viên\") — xem `overflowLabel` để phân biệt */\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  overflowLabel = (count) => `Xem tất cả ${count} thành viên`,\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              {/* ⚠ `inline-flex` KHÔNG phải để bố trí — nó vá một khoảng trắng có thật.\n                  `LetterAvatar` là `inline-flex`, nên trong một nút KHỐI nó thành nội dung\n                  inline và bị canh theo BASELINE: line box chừa thêm khoảng chân chữ BÊN DƯỚI.\n                  Đã đo ở `xs` trên `/`: nút cao **30,5px** ôm một avatar **24px** — dư 6,5px,\n                  toàn bộ ở đáy. Nút lại có `bg-card` ĐỤC và `rounded-full`, nên chỗ dư ấy là\n                  một mảng trắng hình lưỡi liềm dưới mỗi khuôn mặt. Lúc nghỉ nó lẫn vào nền thẻ;\n                  `hover:z-10` + `hover:-translate-y-0.5` kéo nút lên trước và phơi nó ra.\n                  ⚠ `leading-none` KHÔNG đủ — đã đo: còn dư 2,5px. Phải bỏ hẳn line box.\n                  Ô \"+k\" bên dưới vốn đã `inline-flex`; chỗ này chỉ là sót. */}\n              <button\n                type=\"button\"\n                className={cn(\n                  \"inline-flex 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\">{overflowLabel(items.length)}</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":";AAgJgB,cAGJ,YAHI;AA7IhB,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,iBAAiB,sBAAsB;AACzE,SAAS,oBAA2C;AA4DpD,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,gBAAgB,CAAC,UAAU,wBAAc,KAAK;AAAA,EAC9C,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,MAsBrB;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,aAvCY,KAAK,EAwCnB,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,oBAAC,UAAK,WAAU,WAAW,wBAAc,MAAM,MAAM,GAAE;AAAA;AAAA;AAAA,QACzD,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":[]}
+{"version":3,"sources":["../../../src/components/composite/avatar-group.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { useComitorMessages } from \"../../i18n/locale-provider.js\";\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  /**\n   * Nhãn `sr-only` của ô \"+k\" khi ô đó bấm được. Không truyền thì lấy khoá `overflowLabel` của\n   * namespace `avatarGroup` (`ComitorLocaleProvider`, mặc định tiếng Anh: \"View all 5 members\").\n   *\n   * Là HÀM chứ không phải chuỗi mẫu vì có số chèn vào giữa câu: trật tự từ quanh con số khác nhau\n   * theo ngôn ngữ, nên mọi cách để gói tự ghép chuỗi đều là chỗ chắc chắn dịch sai.\n   *\n   * Nhận TỔNG số thành viên (`items.length`), không phải phần dư đang bị giấu: mặt nút đã in sẵn\n   * \"+k\" là phần dư rồi, còn câu này nói ra HÀNH ĐỘNG — bấm vào là xem hết cả nhóm.\n   *\n   * Khác `label` ở tầm phủ: `label` đặt tên cho CẢ NHÓM (`aria-label` của `role=\"group\"`), đọc lên\n   * khi con trỏ bước vào nhóm; `overflowLabel` đặt tên cho MỘT nút bên trong, đọc lên khi Tab tới\n   * đúng ô \"+k\". Đè bằng prop thì đè cả hai — đè mỗi `label` thì nhóm mang tên mới mà nút cuối\n   * vẫn xưng theo bảng của provider.\n   */\n  overflowLabel?: (count: number) => string;\n  /**\n   * Nhãn của cả nhóm cho trình đọc màn hình (khoá `label` của namespace `avatarGroup`) — xem\n   * `overflowLabel` để phân biệt\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  overflowLabel: overflowLabelProp,\n  label: labelProp,\n  surfaceClassName = \"bg-card ring-card\",\n  className,\n  ...props\n}: AvatarGroupProps) {\n  const t = useComitorMessages(\"avatarGroup\");\n  const overflowLabel = overflowLabelProp ?? t.overflowLabel;\n  const label = labelProp ?? t.label;\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              {/* ⚠ `inline-flex` KHÔNG phải để bố trí — nó vá một khoảng trắng có thật.\n                  `LetterAvatar` là `inline-flex`, nên trong một nút KHỐI nó thành nội dung\n                  inline và bị canh theo BASELINE: line box chừa thêm khoảng chân chữ BÊN DƯỚI.\n                  Đã đo ở `xs` trên `/`: nút cao **30,5px** ôm một avatar **24px** — dư 6,5px,\n                  toàn bộ ở đáy. Nút lại có `bg-card` ĐỤC và `rounded-full`, nên chỗ dư ấy là\n                  một mảng trắng hình lưỡi liềm dưới mỗi khuôn mặt. Lúc nghỉ nó lẫn vào nền thẻ;\n                  `hover:z-10` + `hover:-translate-y-0.5` kéo nút lên trước và phơi nó ra.\n                  ⚠ `leading-none` KHÔNG đủ — đã đo: còn dư 2,5px. Phải bỏ hẳn line box.\n                  Ô \"+k\" bên dưới vốn đã `inline-flex`; chỗ này chỉ là sót. */}\n              <button\n                type=\"button\"\n                className={cn(\n                  \"inline-flex 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\">{overflowLabel(items.length)}</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":";AAuJgB,cAGJ,YAHI;AApJhB,SAAS,0BAA0B;AACnC,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,iBAAiB,sBAAsB;AACzE,SAAS,oBAA2C;AA+DpD,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,eAAe;AAAA,EACf,OAAO;AAAA,EACP,mBAAmB;AAAA,EACnB;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,IAAI,mBAAmB,aAAa;AAC1C,QAAM,gBAAgB,qBAAqB,EAAE;AAC7C,QAAM,QAAQ,aAAa,EAAE;AAC7B,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,MAsBrB;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,aAvCY,KAAK,EAwCnB,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,oBAAC,UAAK,WAAU,WAAW,wBAAc,MAAM,MAAM,GAAE;AAAA;AAAA;AAAA,QACzD,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":[]}