@comitor/ui 0.1.0 → 0.2.1

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 * 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 */\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\nexport type ChartTooltipContentProps = React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\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 <div className={cn(\"font-medium\", labelClassName)}>{labelFormatter(value, payload)}</div>;\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(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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\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 { 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 * 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 */\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":[]}

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { TooltipProps } from 'recharts';
 
 /**
  * Biểu đồ "lắp sẵn" của Comitor — dựng nhanh line/bar/area chỉ với `data` + `series`.
@@ -40,11 +39,25 @@ declare const CHART_COLORS: {
     readonly ash: "var(--ash-300)";
 };
 type ChartColorName = keyof typeof CHART_COLORS;
+/**
+ * Một phần tử payload recharts bơm vào tooltip.
+ *
+ * Khai tại đây thay vì `TooltipProps<number, string>["payload"]`: recharts **3** đã bỏ
+ * `payload` khỏi props của `<Tooltip>` (chuyển sang context nội bộ), nên phép dẫn xuất đó
+ * hỏng kiểu ngay trong file `.d.ts` phát hành. Xem chú thích cùng nội dung ở `chart.tsx`
+ * (`ChartPayloadItem`) — cùng một lý do, cùng một cách chữa.
+ */
+interface ComitorChartPayloadItem {
+    value?: number;
+    name?: string;
+    dataKey?: string | number;
+    color?: string;
+}
 interface ComitorChartTooltipProps {
     /** Do recharts bơm vào — đừng truyền tay. */
     active?: boolean;
     /** Do recharts bơm vào — đừng truyền tay. */
-    payload?: TooltipProps<number, string>["payload"];
+    payload?: ComitorChartPayloadItem[];
     /** Do recharts bơm vào — đừng truyền tay. */
     label?: string;
     /** Định dạng nhãn trục X (ví dụ đổi "2026-01" → "Th01/2026"). */
@@ -106,4 +119,4 @@ interface ComitorAreaChartProps extends BaseChartProps {
 /** 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. */
 declare function ComitorAreaChart({ data, xAxisKey, series, height, className, showGrid, showLegend, stacked, valueFormatter }: ComitorAreaChartProps): React.JSX.Element;
 
-export { type BaseChartProps, CHART_COLORS, CHART_SERIES_COLORS, type ChartColorName, ComitorAreaChart, type ComitorAreaChartProps, ComitorBarChart, type ComitorBarChartProps, ComitorChartContainer, type ComitorChartContainerProps, ComitorChartTooltip, type ComitorChartTooltipProps, ComitorLineChart, type ComitorLineChartProps, type DataSeries };
+export { type BaseChartProps, CHART_COLORS, CHART_SERIES_COLORS, type ChartColorName, ComitorAreaChart, type ComitorAreaChartProps, ComitorBarChart, type ComitorBarChartProps, ComitorChartContainer, type ComitorChartContainerProps, type ComitorChartPayloadItem, ComitorChartTooltip, type ComitorChartTooltipProps, ComitorLineChart, type ComitorLineChartProps, type DataSeries };

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  type TooltipProps,\n  XAxis,\n  YAxis\n} from \"recharts\";\nimport { cn } from \"../lib/cn.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/**\n * Bảng màu series mặc định — trỏ vào `--chart-1…5` trong `styles.css`.\n *\n * Vì sao không lấy thẳng `var(--gold-300)`, `var(--teal)`… như comitor-ds: bảng màu biểu đồ\n * cần đổi ĐỘC LẬP với brand (app đổi `--chart-*` ở `<body>` là xong), và `--chart-3` có bản\n * dark riêng (navy nguyên bản chìm vào nền tối).\n *\n * Dùng `var(--chart-N)` chứ KHÔNG dùng `var(--color-chart-N)`: bản `--chart-*` được khai\n * tường minh trong `:root` của `styles.css` nên chắc chắn tồn tại, còn `--color-chart-*` là\n * biến do `@theme inline` của Tailwind sinh ra.\n */\nexport const CHART_SERIES_COLORS = [\n  \"var(--chart-1)\",\n  \"var(--chart-2)\",\n  \"var(--chart-3)\",\n  \"var(--chart-4)\",\n  \"var(--chart-5)\"\n] as const;\n\n/**\n * Màu gọi theo tên — dùng khi muốn chỉ định màu cho một series cụ thể\n * (`series: [{ key: \"loi\", color: CHART_COLORS.red }]`).\n *\n * ⚠ Khoá `gray` của comitor-ds đổi thành `ash`: thang xám của package là `--ash-*`,\n * `gray-*` để nguyên cho Tailwind (xem chú thích thang màu trong `styles.css`).\n */\nexport const CHART_COLORS = {\n  gold: \"var(--chart-1)\",\n  goldLight: \"var(--gold-100)\",\n  teal: \"var(--chart-2)\",\n  navy: \"var(--chart-3)\",\n  green: \"var(--chart-4)\",\n  red: \"var(--chart-5)\",\n  ash: \"var(--ash-300)\"\n} as const;\n\nexport type ChartColorName = keyof typeof CHART_COLORS;\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\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?: TooltipProps<number, string>[\"payload\"];\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// ─── 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\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}: 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 />}\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          />\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}: 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 />}\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            radius={[4, 4, 0, 0]}\n            stackId={stacked ? \"stack\" : undefined}\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}: 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 />}\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            />\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 { cn } from \"../lib/cn.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/**\n * Bảng màu series mặc định — trỏ vào `--chart-1…5` trong `styles.css`.\n *\n * Vì sao không lấy thẳng `var(--gold-300)`, `var(--teal)`… như comitor-ds: bảng màu biểu đồ\n * cần đổi ĐỘC LẬP với brand (app đổi `--chart-*` ở `<body>` là xong), và `--chart-3` có bản\n * dark riêng (navy nguyên bản chìm vào nền tối).\n *\n * Dùng `var(--chart-N)` chứ KHÔNG dùng `var(--color-chart-N)`: bản `--chart-*` được khai\n * tường minh trong `:root` của `styles.css` nên chắc chắn tồn tại, còn `--color-chart-*` là\n * biến do `@theme inline` của Tailwind sinh ra.\n */\nexport const CHART_SERIES_COLORS = [\n  \"var(--chart-1)\",\n  \"var(--chart-2)\",\n  \"var(--chart-3)\",\n  \"var(--chart-4)\",\n  \"var(--chart-5)\"\n] as const;\n\n/**\n * Màu gọi theo tên — dùng khi muốn chỉ định màu cho một series cụ thể\n * (`series: [{ key: \"loi\", color: CHART_COLORS.red }]`).\n *\n * ⚠ Khoá `gray` của comitor-ds đổi thành `ash`: thang xám của package là `--ash-*`,\n * `gray-*` để nguyên cho Tailwind (xem chú thích thang màu trong `styles.css`).\n */\nexport const CHART_COLORS = {\n  gold: \"var(--chart-1)\",\n  goldLight: \"var(--gold-100)\",\n  teal: \"var(--chart-2)\",\n  navy: \"var(--chart-3)\",\n  green: \"var(--chart-4)\",\n  red: \"var(--chart-5)\",\n  ash: \"var(--ash-300)\"\n} as const;\n\nexport type ChartColorName = keyof typeof CHART_COLORS;\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\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// ─── 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\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}: 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 />}\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          />\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}: 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 />}\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            radius={[4, 4, 0, 0]}\n            stackId={stacked ? \"stack\" : undefined}\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}: 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 />}\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            />\n          );\n        })}\n      </AreaChart>\n    </ComitorChartContainer>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chart/index.d.ts

@@ -1,4 +1,4 @@
-export { ChartConfig, ChartContainer, ChartContainerProps, ChartLegend, ChartLegendContent, ChartLegendContentProps, ChartStyle, ChartStyleProps, ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, useChart } from './chart.js';
-export { BaseChartProps, CHART_COLORS, CHART_SERIES_COLORS, ChartColorName, ComitorAreaChart, ComitorAreaChartProps, ComitorBarChart, ComitorBarChartProps, ComitorChartContainer, ComitorChartContainerProps, ComitorChartTooltip, ComitorChartTooltipProps, ComitorLineChart, ComitorLineChartProps, DataSeries } from './comitor-chart.js';
+export { ChartConfig, ChartContainer, ChartContainerProps, ChartLegend, ChartLegendContent, ChartLegendContentProps, ChartPayloadItem, ChartStyle, ChartStyleProps, ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, useChart } from './chart.js';
+export { BaseChartProps, CHART_COLORS, CHART_SERIES_COLORS, ChartColorName, ComitorAreaChart, ComitorAreaChartProps, ComitorBarChart, ComitorBarChartProps, ComitorChartContainer, ComitorChartContainerProps, ComitorChartPayloadItem, ComitorChartTooltip, ComitorChartTooltipProps, ComitorLineChart, ComitorLineChartProps, DataSeries } from './comitor-chart.js';
 import 'react';
 import 'recharts';

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

@@ -35,7 +35,7 @@ function AvatarGroup({
             "button",
             {
               type: "button",
-              className: "rounded-full ring-2 ring-background transition-transform hover:z-10 hover:-translate-y-0.5 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring",
+              className: "rounded-full ring-2 ring-background transition-transform hover:z-10 hover:-translate-y-0.5 focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground",
               children: /* @__PURE__ */ jsx(LetterAvatar, { name: item.name, src: item.src, size, title: void 0 })
             }
           ) }),

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

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

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

@@ -36,8 +36,15 @@ interface ComboboxSharedProps {
     "aria-label"?: string;
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
-    "aria-invalid"?: true;
-    "aria-required"?: true;
+    /**
+     * Ô đang lỗi. Ngoài `aria-invalid` cho trình đọc màn hình, trigger còn chuyển sang viền
+     * `--destructive-ink` — cùng tín hiệu thị giác mà `Input` đã có (nhánh nằm ở `button.tsx`).
+     *
+     * Nhận cả `boolean` lẫn `"true"`/`"false"` để dùng thẳng được `aria-invalid={!!errors.x}`
+     * của react-hook-form. Giá trị falsy KHÔNG phát thuộc tính ra DOM.
+     */
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-required"?: boolean | "true" | "false";
 }
 interface ComboboxProps extends ComboboxSharedProps {
     /** Giá trị đang chọn; `null`/`undefined` = chưa chọn */

package/dist/components/composite/combobox.js

@@ -8,6 +8,9 @@ import { Button } from "../ui/button.js";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
 import { removeVietnameseTones } from "./text-utils.js";
+function isAriaInvalid(value) {
+  return value === true || value === "true";
+}
 function vietnameseFilter(value, search, keywords) {
   if (!search) return 1;
   const haystack = removeVietnameseTones(`${value} ${keywords?.join(" ") ?? ""}`).toLowerCase();
@@ -88,6 +91,7 @@ function Combobox({
   const [search, setSearch] = useState("");
   const isAsync = onSearchChange !== void 0;
   const selected = options.find((option) => option.value === value);
+  const invalid = isAriaInvalid(aria["aria-invalid"]);
   const handleSearch = (next) => {
     setSearch(next);
     onSearchChange?.(next);
@@ -116,9 +120,10 @@ function Combobox({
               className
             ),
             ...aria,
+            "aria-invalid": invalid || void 0,
             children: [
               /* @__PURE__ */ jsx("span", { className: "truncate", children: selected ? selected.label : placeholder }),
-              /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 opacity-50" })
+              /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })
             ]
           }
         ) }),
@@ -186,6 +191,7 @@ function MultiCombobox({
   const [open, setOpen] = useState(false);
   const [search, setSearch] = useState("");
   const isAsync = onSearchChange !== void 0;
+  const invalid = isAriaInvalid(aria["aria-invalid"]);
   const selectedOptions = options.filter((option) => value.includes(option.value));
   const shown = selectedOptions.slice(0, Math.max(1, maxDisplay));
   const overflow = selectedOptions.length - shown.length;
@@ -224,6 +230,7 @@ function MultiCombobox({
               className
             ),
             ...aria,
+            "aria-invalid": invalid || void 0,
             children: [
               /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-wrap items-center gap-1", children: value.length === 0 ? placeholder : /* @__PURE__ */ jsxs(Fragment, { children: [
                 shown.map((option) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "max-w-[10rem]", children: /* @__PURE__ */ jsx("span", { className: "truncate", children: option.label }) }, option.value)),
@@ -232,7 +239,7 @@ function MultiCombobox({
                   overflow
                 ] })
               ] }) }),
-              /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 opacity-50" })
+              /* @__PURE__ */ jsx(ChevronsUpDown, { "aria-hidden": "true", className: "size-4 shrink-0 text-muted-foreground" })
             ]
           }
         ) }),

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

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

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

@@ -61,7 +61,7 @@ function ConfirmDialog({
             "aria-hidden": "true",
             className: cn(
               "flex size-9 shrink-0 items-center justify-center rounded-md",
-              variant === "destructive" ? "bg-destructive/15 text-destructive" : "bg-muted text-muted-foreground"
+              variant === "destructive" ? "bg-destructive/15 text-destructive-ink" : "bg-muted text-muted-foreground"
             ),
             children: /* @__PURE__ */ jsx(Icon, { className: "size-5" })
           }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/confirm-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger\n} from \"../ui/alert-dialog.js\";\nimport { buttonVariants } from \"../ui/button.js\";\nimport type { IconComponent } from \"./empty-state.js\";\n\nexport interface ConfirmDialogProps {\n  /** Controlled — bỏ trống thì dialog tự quản trạng thái mở (dùng kèm `trigger`) */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Phần tử mở dialog (đặt trong `AlertDialogTrigger asChild`) */\n  trigger?: ReactNode;\n\n  title: ReactNode;\n  description?: ReactNode;\n  /** Nội dung phụ (danh sách bản ghi sẽ bị ảnh hưởng, ô nhập lý do…) */\n  children?: ReactNode;\n  icon?: IconComponent;\n\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /** \"destructive\" tô nút xác nhận màu đỏ — dùng cho xoá/thu hồi */\n  variant?: \"default\" | \"destructive\";\n  /**\n   * Hành động khi xác nhận. Trả về Promise thì dialog giữ nguyên và bật trạng thái đang chạy\n   * cho tới khi Promise xong — đóng ngay rồi mới gọi API là cách chắc chắn nhất để người dùng\n   * bấm xoá hai lần.\n   */\n  onConfirm: () => void | Promise<void>;\n  /** Khoá nút xác nhận (vd chưa gõ đúng tên bản ghi cần xoá) */\n  confirmDisabled?: boolean;\n  /** Nhận lỗi từ `onConfirm` để app hiện toast; không truyền thì lỗi được ghi ra console */\n  onError?: (error: unknown) => void;\n  className?: string;\n}\n\n/**\n * Hộp thoại xác nhận cho hành động không hoàn tác được (xoá việc, gỡ thành viên, huỷ gói).\n *\n * Bọc `AlertDialog` để mọi app có cùng một cách hỏi lại; nút xác nhận tự vào trạng thái\n * \"Đang xử lý…\" khi `onConfirm` bất đồng bộ, và lỗi ném ra sẽ giữ dialog mở để người dùng thử lại.\n */\nexport function ConfirmDialog({\n  open,\n  onOpenChange,\n  trigger,\n  title,\n  description,\n  children,\n  icon: Icon,\n  confirmLabel = \"Xác nhận\",\n  cancelLabel = \"Hủy\",\n  variant = \"default\",\n  onConfirm,\n  confirmDisabled = false,\n  onError,\n  className\n}: ConfirmDialogProps) {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [pending, setPending] = useState(false);\n\n  const isOpen = open ?? internalOpen;\n  const setOpen = (next: boolean) => {\n    if (pending && !next) return; // đang chạy thì không cho đóng ngang\n    if (open === undefined) setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const handleConfirm = async () => {\n    try {\n      setPending(true);\n      await onConfirm();\n      setPending(false);\n      if (open === undefined) setInternalOpen(false);\n      onOpenChange?.(false);\n    } catch (error) {\n      // Giữ dialog mở để người dùng thấy toast lỗi của app và thử lại.\n      // KHÔNG ném tiếp: lời gọi là `void handleConfirm()` trong handler nên ném ra chỉ tạo\n      // unhandled rejection mà app không bắt được — lỗi đi ra ngoài qua `onError`.\n      setPending(false);\n      if (onError) onError(error);\n      else console.error(\"[ConfirmDialog] onConfirm thất bại:\", error);\n    }\n  };\n\n  return (\n    <AlertDialog open={isOpen} onOpenChange={setOpen}>\n      {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}\n      <AlertDialogContent className={className}>\n        <AlertDialogHeader>\n          <div className=\"flex items-start gap-3\">\n            {Icon && (\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  \"flex size-9 shrink-0 items-center justify-center rounded-md\",\n                  variant === \"destructive\" ? \"bg-destructive/15 text-destructive\" : \"bg-muted text-muted-foreground\"\n                )}\n              >\n                <Icon className=\"size-5\" />\n              </span>\n            )}\n            <div className=\"min-w-0 space-y-1.5\">\n              <AlertDialogTitle>{title}</AlertDialogTitle>\n              {description && <AlertDialogDescription>{description}</AlertDialogDescription>}\n            </div>\n          </div>\n        </AlertDialogHeader>\n\n        {children}\n\n        <AlertDialogFooter>\n          <AlertDialogCancel disabled={pending}>{cancelLabel}</AlertDialogCancel>\n          <AlertDialogAction\n            disabled={pending || confirmDisabled}\n            onClick={(event) => {\n              // Chặn hành vi tự đóng của Radix: dialog chỉ đóng sau khi onConfirm chạy xong.\n              event.preventDefault();\n              void handleConfirm();\n            }}\n            className={cn(variant === \"destructive\" && buttonVariants({ variant: \"destructive\" }))}\n          >\n            {pending ? \"Đang xử lý…\" : confirmLabel}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";AAmGkB,cAeN,YAfM;AAjGlB,SAAyB,gBAAgB;AACzC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAuCxB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,QAAQ;AACvB,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,WAAW,CAAC,KAAM;AACtB,QAAI,SAAS,OAAW,iBAAgB,IAAI;AAC5C,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,gBAAgB,YAAY;AAChC,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,UAAU;AAChB,iBAAW,KAAK;AAChB,UAAI,SAAS,OAAW,iBAAgB,KAAK;AAC7C,qBAAe,KAAK;AAAA,IACtB,SAAS,OAAO;AAId,iBAAW,KAAK;AAChB,UAAI,QAAS,SAAQ,KAAK;AAAA,UACrB,SAAQ,MAAM,iDAAuC,KAAK;AAAA,IACjE;AAAA,EACF;AAEA,SACE,qBAAC,eAAY,MAAM,QAAQ,cAAc,SACtC;AAAA,eAAW,oBAAC,sBAAmB,SAAO,MAAE,mBAAQ;AAAA,IACjD,qBAAC,sBAAmB,WAClB;AAAA,0BAAC,qBACC,+BAAC,SAAI,WAAU,0BACZ;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA,YAAY,gBAAgB,uCAAuC;AAAA,YACrE;AAAA,YAEA,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,QAC3B;AAAA,QAEF,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,oBAAkB,iBAAM;AAAA,UACxB,eAAe,oBAAC,0BAAwB,uBAAY;AAAA,WACvD;AAAA,SACF,GACF;AAAA,MAEC;AAAA,MAED,qBAAC,qBACC;AAAA,4BAAC,qBAAkB,UAAU,SAAU,uBAAY;AAAA,QACnD;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,WAAW;AAAA,YACrB,SAAS,CAAC,UAAU;AAElB,oBAAM,eAAe;AACrB,mBAAK,cAAc;AAAA,YACrB;AAAA,YACA,WAAW,GAAG,YAAY,iBAAiB,eAAe,EAAE,SAAS,cAAc,CAAC,CAAC;AAAA,YAEpF,oBAAU,kCAAgB;AAAA;AAAA,QAC7B;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/confirm-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger\n} from \"../ui/alert-dialog.js\";\nimport { buttonVariants } from \"../ui/button.js\";\nimport type { IconComponent } from \"./empty-state.js\";\n\nexport interface ConfirmDialogProps {\n  /** Controlled — bỏ trống thì dialog tự quản trạng thái mở (dùng kèm `trigger`) */\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Phần tử mở dialog (đặt trong `AlertDialogTrigger asChild`) */\n  trigger?: ReactNode;\n\n  title: ReactNode;\n  description?: ReactNode;\n  /** Nội dung phụ (danh sách bản ghi sẽ bị ảnh hưởng, ô nhập lý do…) */\n  children?: ReactNode;\n  icon?: IconComponent;\n\n  confirmLabel?: string;\n  cancelLabel?: string;\n  /** \"destructive\" tô nút xác nhận màu đỏ — dùng cho xoá/thu hồi */\n  variant?: \"default\" | \"destructive\";\n  /**\n   * Hành động khi xác nhận. Trả về Promise thì dialog giữ nguyên và bật trạng thái đang chạy\n   * cho tới khi Promise xong — đóng ngay rồi mới gọi API là cách chắc chắn nhất để người dùng\n   * bấm xoá hai lần.\n   */\n  onConfirm: () => void | Promise<void>;\n  /** Khoá nút xác nhận (vd chưa gõ đúng tên bản ghi cần xoá) */\n  confirmDisabled?: boolean;\n  /** Nhận lỗi từ `onConfirm` để app hiện toast; không truyền thì lỗi được ghi ra console */\n  onError?: (error: unknown) => void;\n  className?: string;\n}\n\n/**\n * Hộp thoại xác nhận cho hành động không hoàn tác được (xoá việc, gỡ thành viên, huỷ gói).\n *\n * Bọc `AlertDialog` để mọi app có cùng một cách hỏi lại; nút xác nhận tự vào trạng thái\n * \"Đang xử lý…\" khi `onConfirm` bất đồng bộ, và lỗi ném ra sẽ giữ dialog mở để người dùng thử lại.\n */\nexport function ConfirmDialog({\n  open,\n  onOpenChange,\n  trigger,\n  title,\n  description,\n  children,\n  icon: Icon,\n  confirmLabel = \"Xác nhận\",\n  cancelLabel = \"Hủy\",\n  variant = \"default\",\n  onConfirm,\n  confirmDisabled = false,\n  onError,\n  className\n}: ConfirmDialogProps) {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const [pending, setPending] = useState(false);\n\n  const isOpen = open ?? internalOpen;\n  const setOpen = (next: boolean) => {\n    if (pending && !next) return; // đang chạy thì không cho đóng ngang\n    if (open === undefined) setInternalOpen(next);\n    onOpenChange?.(next);\n  };\n\n  const handleConfirm = async () => {\n    try {\n      setPending(true);\n      await onConfirm();\n      setPending(false);\n      if (open === undefined) setInternalOpen(false);\n      onOpenChange?.(false);\n    } catch (error) {\n      // Giữ dialog mở để người dùng thấy toast lỗi của app và thử lại.\n      // KHÔNG ném tiếp: lời gọi là `void handleConfirm()` trong handler nên ném ra chỉ tạo\n      // unhandled rejection mà app không bắt được — lỗi đi ra ngoài qua `onError`.\n      setPending(false);\n      if (onError) onError(error);\n      else console.error(\"[ConfirmDialog] onConfirm thất bại:\", error);\n    }\n  };\n\n  return (\n    <AlertDialog open={isOpen} onOpenChange={setOpen}>\n      {trigger && <AlertDialogTrigger asChild>{trigger}</AlertDialogTrigger>}\n      <AlertDialogContent className={className}>\n        <AlertDialogHeader>\n          <div className=\"flex items-start gap-3\">\n            {Icon && (\n              <span\n                aria-hidden=\"true\"\n                // Cùng khuôn với `statCardIconVariants`: nền tint `--x` + icon bậc `--x-ink`.\n                // `text-destructive` trên `bg-destructive/15` chỉ 4,06:1 (light) / 3,14:1 (dark) —\n                // qua ngưỡng 3:1 của icon nhưng hết biên an toàn. Ink: 5,76:1 / 5,71:1 ✓.\n                className={cn(\n                  \"flex size-9 shrink-0 items-center justify-center rounded-md\",\n                  variant === \"destructive\"\n                    ? \"bg-destructive/15 text-destructive-ink\"\n                    : \"bg-muted text-muted-foreground\"\n                )}\n              >\n                <Icon className=\"size-5\" />\n              </span>\n            )}\n            <div className=\"min-w-0 space-y-1.5\">\n              <AlertDialogTitle>{title}</AlertDialogTitle>\n              {description && <AlertDialogDescription>{description}</AlertDialogDescription>}\n            </div>\n          </div>\n        </AlertDialogHeader>\n\n        {children}\n\n        <AlertDialogFooter>\n          <AlertDialogCancel disabled={pending}>{cancelLabel}</AlertDialogCancel>\n          <AlertDialogAction\n            disabled={pending || confirmDisabled}\n            onClick={(event) => {\n              // Chặn hành vi tự đóng của Radix: dialog chỉ đóng sau khi onConfirm chạy xong.\n              event.preventDefault();\n              void handleConfirm();\n            }}\n            className={cn(variant === \"destructive\" && buttonVariants({ variant: \"destructive\" }))}\n          >\n            {pending ? \"Đang xử lý…\" : confirmLabel}\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"],"mappings":";AAmGkB,cAoBN,YApBM;AAjGlB,SAAyB,gBAAgB;AACzC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAuCxB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,eAAe;AAAA,EACf,cAAc;AAAA,EACd,UAAU;AAAA,EACV;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,QAAM,SAAS,QAAQ;AACvB,QAAM,UAAU,CAAC,SAAkB;AACjC,QAAI,WAAW,CAAC,KAAM;AACtB,QAAI,SAAS,OAAW,iBAAgB,IAAI;AAC5C,mBAAe,IAAI;AAAA,EACrB;AAEA,QAAM,gBAAgB,YAAY;AAChC,QAAI;AACF,iBAAW,IAAI;AACf,YAAM,UAAU;AAChB,iBAAW,KAAK;AAChB,UAAI,SAAS,OAAW,iBAAgB,KAAK;AAC7C,qBAAe,KAAK;AAAA,IACtB,SAAS,OAAO;AAId,iBAAW,KAAK;AAChB,UAAI,QAAS,SAAQ,KAAK;AAAA,UACrB,SAAQ,MAAM,iDAAuC,KAAK;AAAA,IACjE;AAAA,EACF;AAEA,SACE,qBAAC,eAAY,MAAM,QAAQ,cAAc,SACtC;AAAA,eAAW,oBAAC,sBAAmB,SAAO,MAAE,mBAAQ;AAAA,IACjD,qBAAC,sBAAmB,WAClB;AAAA,0BAAC,qBACC,+BAAC,SAAI,WAAU,0BACZ;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YAIZ,WAAW;AAAA,cACT;AAAA,cACA,YAAY,gBACR,2CACA;AAAA,YACN;AAAA,YAEA,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,QAC3B;AAAA,QAEF,qBAAC,SAAI,WAAU,uBACb;AAAA,8BAAC,oBAAkB,iBAAM;AAAA,UACxB,eAAe,oBAAC,0BAAwB,uBAAY;AAAA,WACvD;AAAA,SACF,GACF;AAAA,MAEC;AAAA,MAED,qBAAC,qBACC;AAAA,4BAAC,qBAAkB,UAAU,SAAU,uBAAY;AAAA,QACnD;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,WAAW;AAAA,YACrB,SAAS,CAAC,UAAU;AAElB,oBAAM,eAAe;AACrB,mBAAK,cAAc;AAAA,YACrB;AAAA,YACA,WAAW,GAAG,YAAY,iBAAiB,eAAe,EAAE,SAAS,cAAc,CAAC,CAAC;AAAA,YAEpF,oBAAU,kCAAgB;AAAA;AAAA,QAC7B;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

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

@@ -64,7 +64,7 @@ function CopyButton({
       size,
       onClick: () => void copy(),
       "aria-label": label ?? (copied ? copiedLabel : "Sao ch\xE9p"),
-      className: cn("gap-1.5", copied && "text-success", className),
+      className: cn("gap-1.5", copied && "text-success-ink", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),

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

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