@comitor/ui 0.1.0

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

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { ArrowDownRight, ArrowUpRight, Minus } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { Skeleton } from "../ui/skeleton.js";
+const statCardIconVariants = cva("flex size-9 shrink-0 items-center justify-center rounded-md", {
+  variants: {
+    tone: {
+      default: "bg-muted text-muted-foreground",
+      primary: "bg-gold-100 text-gold-600 dark:bg-gold-500/25 dark:text-gold-100",
+      success: "bg-success/15 text-success",
+      warning: "bg-warning/20 text-gold-500 dark:text-warning",
+      destructive: "bg-destructive/15 text-destructive",
+      info: "bg-info/15 text-info",
+      // text-foreground (không phải text-app-accent): accent mặc định là gold #E8B824, đặt làm
+      // màu icon trên nền sáng chỉ được ~1.9:1 — nhìn như bị mờ.
+      app: "bg-app-accent/10 text-foreground"
+    }
+  },
+  defaultVariants: {
+    tone: "default"
+  }
+});
+const deltaIcons = {
+  up: ArrowUpRight,
+  down: ArrowDownRight,
+  flat: Minus
+};
+function deltaToneClass({ direction, polarity = "positive-up" }) {
+  if (direction === "flat" || polarity === "neutral") return "text-muted-foreground";
+  const isGood = polarity === "positive-up" ? direction === "up" : direction === "down";
+  return isGood ? "text-success" : "text-destructive";
+}
+function StatCard({
+  label,
+  value,
+  icon: Icon,
+  tone = "default",
+  delta,
+  sparkline,
+  footer,
+  loading = false,
+  className,
+  ...props
+}) {
+  const DeltaIcon = delta ? deltaIcons[delta.direction] : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "stat-card",
+      className: cn("rounded-xl border border-border bg-card p-4 shadow-card", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-sm text-muted-foreground", children: label }),
+            loading ? /* @__PURE__ */ jsx(Skeleton, { className: "mt-2 h-7 w-24" }) : /* @__PURE__ */ jsx("p", { className: "mt-1 text-2xl font-semibold tabular-nums leading-tight text-foreground", children: value }),
+            delta && !loading && DeltaIcon && /* @__PURE__ */ jsxs("p", { className: cn("mt-1 flex items-center gap-1 text-xs font-medium", deltaToneClass(delta)), children: [
+              /* @__PURE__ */ jsx(DeltaIcon, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: delta.value }),
+              delta.label && /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: delta.label })
+            ] })
+          ] }),
+          Icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: statCardIconVariants({ tone }), children: /* @__PURE__ */ jsx(Icon, { className: "size-4.5" }) })
+        ] }),
+        sparkline && /* @__PURE__ */ jsx("div", { className: "mt-3 h-10", children: sparkline }),
+        footer && /* @__PURE__ */ jsx("div", { className: "mt-3 border-t border-border pt-2 text-xs text-muted-foreground", children: footer })
+      ]
+    }
+  );
+}
+export {
+  StatCard,
+  statCardIconVariants
+};
+//# sourceMappingURL=stat-card.js.map

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

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

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

@@ -0,0 +1,85 @@
+/**
+ * Cơ chế StatusConfig generic — app khai map "trạng thái → lớp màu TOKEN".
+ *
+ * Vì sao generic thay vì liệt kê sẵn trạng thái: mỗi app Comitor có bộ trạng thái riêng
+ * (Tasks: todo/doing/done; CRM: lead/qualified/won/lost; HR: nộp/duyệt/từ chối). Package
+ * chỉ cấp KIỂU và bảng tone, còn nhãn tiếng Việt là chuyện của app.
+ *
+ * Bắt buộc dùng class token (`bg-success/15 text-success`), KHÔNG hex — hex sẽ chết ở dark mode.
+ *
+ * @example
+ * const TASK_STATUSES: StatusConfig<TaskStatus>[] = [
+ *   { value: "todo",  label: "Cần làm",   shortLabel: "CL", ...STATUS_TONES.neutral },
+ *   { value: "doing", label: "Đang làm",  shortLabel: "ĐL", ...STATUS_TONES.info },
+ *   { value: "done",  label: "Hoàn thành", shortLabel: "HT", ...STATUS_TONES.success }
+ * ];
+ */
+interface StatusTone {
+    /** Lớp nền tint — token, vd "bg-success/15" */
+    bgColor: string;
+    /** Lớp chữ — token, vd "text-success" */
+    textColor: string;
+    /** Lớp viền (tuỳ chọn) — dùng cho biến thể outline */
+    borderColor?: string;
+}
+interface StatusConfig<T extends string = string> extends StatusTone {
+    value: T;
+    label: string;
+    /** Nhãn rút gọn cho bảng/chip hẹp (vd "HT" thay "Hoàn thành") */
+    shortLabel?: string;
+    /** Ưu tiên sắp xếp (nhỏ = lên trước) */
+    priority?: number;
+    /** Tint nền dòng bảng khi trạng thái cần gây chú ý (vd quá hạn) */
+    rowClassName?: string;
+}
+/**
+ * Bảng tone dựng sẵn theo token semantic — trải (`...STATUS_TONES.success`) vào StatusConfig.
+ *
+ * Mọi chuỗi ở đây là class TĨNH để Tailwind quét được từ `dist`; tuyệt đối không sinh động
+ * kiểu `bg-${tone}/15` (class động bị loại khỏi bundle của app).
+ */
+declare const STATUS_TONES: {
+    readonly neutral: {
+        readonly bgColor: "bg-muted";
+        readonly textColor: "text-muted-foreground";
+        readonly borderColor: "border-border";
+    };
+    readonly primary: {
+        readonly bgColor: "bg-gold-100 dark:bg-gold-500/25";
+        readonly textColor: "text-gold-600 dark:text-gold-100";
+        readonly borderColor: "border-gold-300";
+    };
+    readonly success: {
+        readonly bgColor: "bg-success/15";
+        readonly textColor: "text-success";
+        readonly borderColor: "border-success/40";
+    };
+    readonly warning: {
+        readonly bgColor: "bg-warning/20";
+        readonly textColor: "text-gold-500 dark:text-warning";
+        readonly borderColor: "border-warning/40";
+    };
+    readonly destructive: {
+        readonly bgColor: "bg-destructive/15";
+        readonly textColor: "text-destructive";
+        readonly borderColor: "border-destructive/40";
+    };
+    readonly info: {
+        readonly bgColor: "bg-info/15";
+        readonly textColor: "text-info";
+        readonly borderColor: "border-info/40";
+    };
+};
+type StatusToneName = keyof typeof STATUS_TONES;
+/** Tìm config theo value trong danh sách app cung cấp. */
+declare function getStatusConfig<T extends string>(configs: readonly StatusConfig<T>[], value: T | null | undefined): StatusConfig<T> | undefined;
+/** Lớp màu (nền tint + chữ) của một trạng thái; không tìm thấy → chuỗi rỗng. */
+declare function getStatusClasses<T extends string>(configs: readonly StatusConfig<T>[], value: T | null | undefined): string;
+/** Nhãn hiển thị của trạng thái; không tìm thấy → trả về chính `value` để không mất dữ liệu. */
+declare function getStatusLabel<T extends string>(configs: readonly StatusConfig<T>[], value: T | null | undefined, options?: {
+    short?: boolean;
+}): string;
+/** Sắp xếp theo `priority` (thiếu priority thì xuống cuối, giữ thứ tự khai báo). */
+declare function sortByStatusPriority<T extends string>(configs: readonly StatusConfig<T>[]): StatusConfig<T>[];
+
+export { STATUS_TONES, type StatusConfig, type StatusTone, type StatusToneName, getStatusClasses, getStatusConfig, getStatusLabel, sortByStatusPriority };

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

@@ -0,0 +1,41 @@
+const STATUS_TONES = {
+  neutral: { bgColor: "bg-muted", textColor: "text-muted-foreground", borderColor: "border-border" },
+  primary: {
+    bgColor: "bg-gold-100 dark:bg-gold-500/25",
+    textColor: "text-gold-600 dark:text-gold-100",
+    borderColor: "border-gold-300"
+  },
+  success: { bgColor: "bg-success/15", textColor: "text-success", borderColor: "border-success/40" },
+  warning: { bgColor: "bg-warning/20", textColor: "text-gold-500 dark:text-warning", borderColor: "border-warning/40" },
+  destructive: {
+    bgColor: "bg-destructive/15",
+    textColor: "text-destructive",
+    borderColor: "border-destructive/40"
+  },
+  info: { bgColor: "bg-info/15", textColor: "text-info", borderColor: "border-info/40" }
+};
+function getStatusConfig(configs, value) {
+  if (value == null) return void 0;
+  return configs.find((config) => config.value === value);
+}
+function getStatusClasses(configs, value) {
+  const config = getStatusConfig(configs, value);
+  if (!config) return "";
+  return `${config.bgColor} ${config.textColor}`;
+}
+function getStatusLabel(configs, value, options = {}) {
+  const config = getStatusConfig(configs, value);
+  if (!config) return value ?? "";
+  return options.short ? config.shortLabel ?? config.label : config.label;
+}
+function sortByStatusPriority(configs) {
+  return [...configs].sort((a, b) => (a.priority ?? Number.MAX_SAFE_INTEGER) - (b.priority ?? Number.MAX_SAFE_INTEGER));
+}
+export {
+  STATUS_TONES,
+  getStatusClasses,
+  getStatusConfig,
+  getStatusLabel,
+  sortByStatusPriority
+};
+//# sourceMappingURL=status-config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/status-config.ts"],"sourcesContent":["/**\n * Cơ chế StatusConfig generic — app khai map \"trạng thái → lớp màu TOKEN\".\n *\n * Vì sao generic thay vì liệt kê sẵn trạng thái: mỗi app Comitor có bộ trạng thái riêng\n * (Tasks: todo/doing/done; CRM: lead/qualified/won/lost; HR: nộp/duyệt/từ chối). Package\n * chỉ cấp KIỂU và bảng tone, còn nhãn tiếng Việt là chuyện của app.\n *\n * Bắt buộc dùng class token (`bg-success/15 text-success`), KHÔNG hex — hex sẽ chết ở dark mode.\n *\n * @example\n * const TASK_STATUSES: StatusConfig<TaskStatus>[] = [\n *   { value: \"todo\",  label: \"Cần làm\",   shortLabel: \"CL\", ...STATUS_TONES.neutral },\n *   { value: \"doing\", label: \"Đang làm\",  shortLabel: \"ĐL\", ...STATUS_TONES.info },\n *   { value: \"done\",  label: \"Hoàn thành\", shortLabel: \"HT\", ...STATUS_TONES.success }\n * ];\n */\n\nexport interface StatusTone {\n  /** Lớp nền tint — token, vd \"bg-success/15\" */\n  bgColor: string;\n  /** Lớp chữ — token, vd \"text-success\" */\n  textColor: string;\n  /** Lớp viền (tuỳ chọn) — dùng cho biến thể outline */\n  borderColor?: string;\n}\n\nexport interface StatusConfig<T extends string = string> extends StatusTone {\n  value: T;\n  label: string;\n  /** Nhãn rút gọn cho bảng/chip hẹp (vd \"HT\" thay \"Hoàn thành\") */\n  shortLabel?: string;\n  /** Ưu tiên sắp xếp (nhỏ = lên trước) */\n  priority?: number;\n  /** Tint nền dòng bảng khi trạng thái cần gây chú ý (vd quá hạn) */\n  rowClassName?: string;\n}\n\n/**\n * Bảng tone dựng sẵn theo token semantic — trải (`...STATUS_TONES.success`) vào StatusConfig.\n *\n * Mọi chuỗi ở đây là class TĨNH để Tailwind quét được từ `dist`; tuyệt đối không sinh động\n * kiểu `bg-${tone}/15` (class động bị loại khỏi bundle của app).\n */\nexport const STATUS_TONES = {\n  neutral: { bgColor: \"bg-muted\", textColor: \"text-muted-foreground\", borderColor: \"border-border\" },\n  primary: {\n    bgColor: \"bg-gold-100 dark:bg-gold-500/25\",\n    textColor: \"text-gold-600 dark:text-gold-100\",\n    borderColor: \"border-gold-300\"\n  },\n  success: { bgColor: \"bg-success/15\", textColor: \"text-success\", borderColor: \"border-success/40\" },\n  warning: { bgColor: \"bg-warning/20\", textColor: \"text-gold-500 dark:text-warning\", borderColor: \"border-warning/40\" },\n  destructive: {\n    bgColor: \"bg-destructive/15\",\n    textColor: \"text-destructive\",\n    borderColor: \"border-destructive/40\"\n  },\n  info: { bgColor: \"bg-info/15\", textColor: \"text-info\", borderColor: \"border-info/40\" }\n} as const satisfies Record<string, StatusTone>;\n\nexport type StatusToneName = keyof typeof STATUS_TONES;\n\n/** Tìm config theo value trong danh sách app cung cấp. */\nexport function getStatusConfig<T extends string>(\n  configs: readonly StatusConfig<T>[],\n  value: T | null | undefined\n): StatusConfig<T> | undefined {\n  if (value == null) return undefined;\n  return configs.find((config) => config.value === value);\n}\n\n/** Lớp màu (nền tint + chữ) của một trạng thái; không tìm thấy → chuỗi rỗng. */\nexport function getStatusClasses<T extends string>(\n  configs: readonly StatusConfig<T>[],\n  value: T | null | undefined\n): string {\n  const config = getStatusConfig(configs, value);\n  if (!config) return \"\";\n  return `${config.bgColor} ${config.textColor}`;\n}\n\n/** Nhãn hiển thị của trạng thái; không tìm thấy → trả về chính `value` để không mất dữ liệu. */\nexport function getStatusLabel<T extends string>(\n  configs: readonly StatusConfig<T>[],\n  value: T | null | undefined,\n  options: { short?: boolean } = {}\n): string {\n  const config = getStatusConfig(configs, value);\n  if (!config) return value ?? \"\";\n  return options.short ? (config.shortLabel ?? config.label) : config.label;\n}\n\n/** Sắp xếp theo `priority` (thiếu priority thì xuống cuối, giữ thứ tự khai báo). */\nexport function sortByStatusPriority<T extends string>(configs: readonly StatusConfig<T>[]): StatusConfig<T>[] {\n  return [...configs].sort((a, b) => (a.priority ?? Number.MAX_SAFE_INTEGER) - (b.priority ?? Number.MAX_SAFE_INTEGER));\n}\n"],"mappings":"AA2CO,MAAM,eAAe;AAAA,EAC1B,SAAS,EAAE,SAAS,YAAY,WAAW,yBAAyB,aAAa,gBAAgB;AAAA,EACjG,SAAS;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,aAAa;AAAA,EACf;AAAA,EACA,SAAS,EAAE,SAAS,iBAAiB,WAAW,gBAAgB,aAAa,oBAAoB;AAAA,EACjG,SAAS,EAAE,SAAS,iBAAiB,WAAW,mCAAmC,aAAa,oBAAoB;AAAA,EACpH,aAAa;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,SAAS,cAAc,WAAW,aAAa,aAAa,iBAAiB;AACvF;AAKO,SAAS,gBACd,SACA,OAC6B;AAC7B,MAAI,SAAS,KAAM,QAAO;AAC1B,SAAO,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,KAAK;AACxD;AAGO,SAAS,iBACd,SACA,OACQ;AACR,QAAM,SAAS,gBAAgB,SAAS,KAAK;AAC7C,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,GAAG,OAAO,OAAO,IAAI,OAAO,SAAS;AAC9C;AAGO,SAAS,eACd,SACA,OACA,UAA+B,CAAC,GACxB;AACR,QAAM,SAAS,gBAAgB,SAAS,KAAK;AAC7C,MAAI,CAAC,OAAQ,QAAO,SAAS;AAC7B,SAAO,QAAQ,QAAS,OAAO,cAAc,OAAO,QAAS,OAAO;AACtE;AAGO,SAAS,qBAAuC,SAAwD;AAC7G,SAAO,CAAC,GAAG,OAAO,EAAE,KAAK,CAAC,GAAG,OAAO,EAAE,YAAY,OAAO,qBAAqB,EAAE,YAAY,OAAO,iBAAiB;AACtH;","names":[]}

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import { StatusConfig } from './status-config.js';
+
+interface StatusPillProps<T extends string = string> extends Omit<ComponentProps<"span">, "children"> {
+    /** Toàn bộ bảng trạng thái của app */
+    configs: readonly StatusConfig<T>[];
+    /** Trạng thái cần hiển thị */
+    value: T | null | undefined;
+    /** Dùng shortLabel nếu có (bảng hẹp) */
+    short?: boolean;
+    /** "soft" = nền tint (mặc định), "outline" = chỉ viền + chữ, "dot" = chấm màu + chữ thường */
+    variant?: StatusPillVariant;
+    /** Nhãn thay thế khi `value` không có trong `configs` */
+    fallbackLabel?: string;
+}
+type StatusPillVariant = "soft" | "outline" | "dot";
+/**
+ * Chip trạng thái tô theo StatusConfig của app (màu lấy từ token, không hex).
+ *
+ * Tĩnh hoàn toàn → dùng được trong React Server Component (bảng danh sách render phía server).
+ * Trạng thái lạ (dữ liệu cũ, enum mới ở backend) KHÔNG bị nuốt: vẫn hiện nhãn ở tone neutral.
+ */
+declare function StatusPill<T extends string = string>({ configs, value, short, variant, fallbackLabel, className, ...props }: StatusPillProps<T>): React.JSX.Element;
+
+export { StatusPill, type StatusPillProps, type StatusPillVariant };

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

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+import { getStatusConfig } from "./status-config.js";
+function StatusPill({
+  configs,
+  value,
+  short = false,
+  variant = "soft",
+  fallbackLabel,
+  className,
+  ...props
+}) {
+  const config = getStatusConfig(configs, value);
+  const label = config ? short ? config.shortLabel ?? config.label : config.label : fallbackLabel ?? value ?? "\u2014";
+  const base = "inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium";
+  if (variant === "dot") {
+    return /* @__PURE__ */ jsxs("span", { "data-slot": "status-pill", className: cn(base, "px-0 text-foreground", className), ...props, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: cn("size-1.5 shrink-0 rounded-full", config ? config.textColor : "text-muted-foreground"),
+          style: { backgroundColor: "currentColor" }
+        }
+      ),
+      label
+    ] });
+  }
+  if (variant === "outline") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "status-pill",
+        className: cn(
+          base,
+          "border bg-transparent",
+          config?.borderColor ?? "border-border",
+          config?.textColor ?? "text-muted-foreground",
+          className
+        ),
+        ...props,
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "status-pill",
+      className: cn(base, config?.bgColor ?? "bg-muted", config?.textColor ?? "text-muted-foreground", className),
+      ...props,
+      children: label
+    }
+  );
+}
+export {
+  StatusPill
+};
+//# sourceMappingURL=status-pill.js.map

package/dist/components/composite/status-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/status-pill.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { cn } from \"../../lib/cn.js\";\nimport type { StatusConfig } from \"./status-config.js\";\nimport { getStatusConfig } from \"./status-config.js\";\n\nexport interface StatusPillProps<T extends string = string> extends Omit<ComponentProps<\"span\">, \"children\"> {\n  /** Toàn bộ bảng trạng thái của app */\n  configs: readonly StatusConfig<T>[];\n  /** Trạng thái cần hiển thị */\n  value: T | null | undefined;\n  /** Dùng shortLabel nếu có (bảng hẹp) */\n  short?: boolean;\n  /** \"soft\" = nền tint (mặc định), \"outline\" = chỉ viền + chữ, \"dot\" = chấm màu + chữ thường */\n  variant?: StatusPillVariant;\n  /** Nhãn thay thế khi `value` không có trong `configs` */\n  fallbackLabel?: string;\n}\n\nexport type StatusPillVariant = \"soft\" | \"outline\" | \"dot\";\n\n/**\n * Chip trạng thái tô theo StatusConfig của app (màu lấy từ token, không hex).\n *\n * Tĩnh hoàn toàn → dùng được trong React Server Component (bảng danh sách render phía server).\n * Trạng thái lạ (dữ liệu cũ, enum mới ở backend) KHÔNG bị nuốt: vẫn hiện nhãn ở tone neutral.\n */\nexport function StatusPill<T extends string = string>({\n  configs,\n  value,\n  short = false,\n  variant = \"soft\",\n  fallbackLabel,\n  className,\n  ...props\n}: StatusPillProps<T>) {\n  const config = getStatusConfig(configs, value);\n  const label = config ? (short ? (config.shortLabel ?? config.label) : config.label) : (fallbackLabel ?? value ?? \"—\");\n\n  const base = \"inline-flex items-center gap-1.5 whitespace-nowrap rounded-md px-2 py-0.5 text-xs font-medium\";\n\n  if (variant === \"dot\") {\n    return (\n      <span data-slot=\"status-pill\" className={cn(base, \"px-0 text-foreground\", className)} {...props}>\n        <span\n          aria-hidden=\"true\"\n          className={cn(\"size-1.5 shrink-0 rounded-full\", config ? config.textColor : \"text-muted-foreground\")}\n          style={{ backgroundColor: \"currentColor\" }}\n        />\n        {label}\n      </span>\n    );\n  }\n\n  if (variant === \"outline\") {\n    return (\n      <span\n        data-slot=\"status-pill\"\n        className={cn(\n          base,\n          \"border bg-transparent\",\n          config?.borderColor ?? \"border-border\",\n          config?.textColor ?? \"text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {label}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      data-slot=\"status-pill\"\n      className={cn(base, config?.bgColor ?? \"bg-muted\", config?.textColor ?? \"text-muted-foreground\", className)}\n      {...props}\n    >\n      {label}\n    </span>\n  );\n}\n"],"mappings":"AA0CM,SACE,KADF;AAzCN,SAAS,UAAU;AAEnB,SAAS,uBAAuB;AAuBzB,SAAS,WAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,SAAS,gBAAgB,SAAS,KAAK;AAC7C,QAAM,QAAQ,SAAU,QAAS,OAAO,cAAc,OAAO,QAAS,OAAO,QAAU,iBAAiB,SAAS;AAEjH,QAAM,OAAO;AAEb,MAAI,YAAY,OAAO;AACrB,WACE,qBAAC,UAAK,aAAU,eAAc,WAAW,GAAG,MAAM,wBAAwB,SAAS,GAAI,GAAG,OACxF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAW,GAAG,kCAAkC,SAAS,OAAO,YAAY,uBAAuB;AAAA,UACnG,OAAO,EAAE,iBAAiB,eAAe;AAAA;AAAA,MAC3C;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,YAAY,WAAW;AACzB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA,QAAQ,eAAe;AAAA,UACvB,QAAQ,aAAa;AAAA,UACrB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,MAAM,QAAQ,WAAW,YAAY,QAAQ,aAAa,yBAAyB,SAAS;AAAA,MACzG,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/composite/table-pagination.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+/** Cỡ trang mặc định — chốt ở 3 mức để mọi bảng trong hệ sinh thái giống nhau. */
+declare const DEFAULT_PAGE_SIZE_OPTIONS: readonly [20, 50, 100];
+interface TablePaginationProps {
+    /** Trang hiện tại, đếm từ 1 */
+    page: number;
+    pageSize: number;
+    /** Tổng số bản ghi (sau khi lọc) */
+    total: number;
+    pageSizeOptions?: readonly number[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    /** Đơn vị đếm, vd "việc", "liên hệ" — mặc định "mục" */
+    unitLabel?: string;
+    /** Ẩn ô chọn số dòng/trang (khi cỡ trang do hệ thống quyết định) */
+    hidePageSize?: boolean;
+    /** Nhãn vùng phân trang — cần khi một trang có nhiều bảng */
+    label?: string;
+    className?: string;
+}
+/**
+ * Thanh phân trang đi kèm `DataTable`.
+ *
+ * Tổng số trang tính từ `total`/`pageSize` ngay tại đây thay vì bắt app truyền vào — hai bên
+ * tự tính rất dễ lệch nhau một trang ở bản ghi cuối, và người dùng sẽ thấy nút "Trang sau"
+ * còn bấm được trong khi bảng đã hết dữ liệu.
+ */
+declare function TablePagination({ page, pageSize, total, pageSizeOptions, onPageChange, onPageSizeChange, unitLabel, hidePageSize, label, className }: TablePaginationProps): React.JSX.Element;
+
+export { DEFAULT_PAGE_SIZE_OPTIONS, TablePagination, type TablePaginationProps };

package/dist/components/composite/table-pagination.js

@@ -0,0 +1,103 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../ui/button.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select.js";
+const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100];
+function TablePagination({
+  page,
+  pageSize,
+  total,
+  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
+  onPageChange,
+  onPageSizeChange,
+  unitLabel = "m\u1EE5c",
+  hidePageSize = false,
+  label = "Ph\xE2n trang",
+  className
+}) {
+  const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));
+  const current = Math.min(Math.max(1, page), pageCount);
+  const start = total === 0 ? 0 : (current - 1) * pageSize + 1;
+  const end = Math.min(current * pageSize, total);
+  const isFirst = current <= 1;
+  const isLast = current >= pageCount;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": label,
+      "data-slot": "table-pagination",
+      className: cn("flex flex-wrap items-center justify-between gap-3 py-2 text-sm", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
+          !hidePageSize && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Hi\u1EC3n th\u1ECB" }),
+            /* @__PURE__ */ jsxs(Select, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[4.5rem]", "aria-label": `S\u1ED1 ${unitLabel} m\u1ED7i trang`, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: String(size), children: size }, size)) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { role: "status", className: "tabular-nums", children: [
+            start,
+            "\u2013",
+            end,
+            " tr\xEAn t\u1ED5ng ",
+            total,
+            " ",
+            unitLabel
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "icon-sm",
+              disabled: isFirst,
+              onClick: () => onPageChange(1),
+              className: "hidden sm:inline-flex",
+              children: [
+                /* @__PURE__ */ jsx(ChevronsLeft, { "aria-hidden": "true", className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Trang \u0111\u1EA7u" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "icon-sm", disabled: isFirst, onClick: () => onPageChange(current - 1), children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true", className: "size-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Trang tr\u01B0\u1EDBc" })
+          ] }),
+          /* @__PURE__ */ jsxs("span", { role: "status", className: "px-2 tabular-nums text-muted-foreground", children: [
+            "Trang ",
+            current,
+            " / ",
+            pageCount
+          ] }),
+          /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "icon-sm", disabled: isLast, onClick: () => onPageChange(current + 1), children: [
+            /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "size-4" }),
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Trang sau" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "outline",
+              size: "icon-sm",
+              disabled: isLast,
+              onClick: () => onPageChange(pageCount),
+              className: "hidden sm:inline-flex",
+              children: [
+                /* @__PURE__ */ jsx(ChevronsRight, { "aria-hidden": "true", className: "size-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Trang cu\u1ED1i" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_PAGE_SIZE_OPTIONS,
+  TablePagination
+};
+//# sourceMappingURL=table-pagination.js.map

package/dist/components/composite/table-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/table-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from \"lucide-react\";\nimport { cn } from \"../../lib/cn.js\";\nimport { Button } from \"../ui/button.js\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"../ui/select.js\";\n\n/** Cỡ trang mặc định — chốt ở 3 mức để mọi bảng trong hệ sinh thái giống nhau. */\nexport const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100] as const;\n\nexport interface TablePaginationProps {\n  /** Trang hiện tại, đếm từ 1 */\n  page: number;\n  pageSize: number;\n  /** Tổng số bản ghi (sau khi lọc) */\n  total: number;\n  pageSizeOptions?: readonly number[];\n  onPageChange: (page: number) => void;\n  onPageSizeChange: (pageSize: number) => void;\n  /** Đơn vị đếm, vd \"việc\", \"liên hệ\" — mặc định \"mục\" */\n  unitLabel?: string;\n  /** Ẩn ô chọn số dòng/trang (khi cỡ trang do hệ thống quyết định) */\n  hidePageSize?: boolean;\n  /** Nhãn vùng phân trang — cần khi một trang có nhiều bảng */\n  label?: string;\n  className?: string;\n}\n\n/**\n * Thanh phân trang đi kèm `DataTable`.\n *\n * Tổng số trang tính từ `total`/`pageSize` ngay tại đây thay vì bắt app truyền vào — hai bên\n * tự tính rất dễ lệch nhau một trang ở bản ghi cuối, và người dùng sẽ thấy nút \"Trang sau\"\n * còn bấm được trong khi bảng đã hết dữ liệu.\n */\nexport function TablePagination({\n  page,\n  pageSize,\n  total,\n  pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  onPageChange,\n  onPageSizeChange,\n  unitLabel = \"mục\",\n  hidePageSize = false,\n  label = \"Phân trang\",\n  className\n}: TablePaginationProps) {\n  const pageCount = Math.max(1, Math.ceil(total / Math.max(1, pageSize)));\n  const current = Math.min(Math.max(1, page), pageCount);\n  const start = total === 0 ? 0 : (current - 1) * pageSize + 1;\n  const end = Math.min(current * pageSize, total);\n  const isFirst = current <= 1;\n  const isLast = current >= pageCount;\n\n  return (\n    <nav\n      aria-label={label}\n      data-slot=\"table-pagination\"\n      className={cn(\"flex flex-wrap items-center justify-between gap-3 py-2 text-sm\", className)}\n    >\n      <div className=\"flex items-center gap-2 text-muted-foreground\">\n        {!hidePageSize && (\n          <>\n            <span className=\"hidden sm:inline\">Hiển thị</span>\n            <Select value={String(pageSize)} onValueChange={(value) => onPageSizeChange(Number(value))}>\n              <SelectTrigger className=\"h-8 w-[4.5rem]\" aria-label={`Số ${unitLabel} mỗi trang`}>\n                <SelectValue />\n              </SelectTrigger>\n              <SelectContent>\n                {pageSizeOptions.map((size) => (\n                  <SelectItem key={size} value={String(size)}>\n                    {size}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </>\n        )}\n        <span role=\"status\" className=\"tabular-nums\">\n          {start}–{end} trên tổng {total} {unitLabel}\n        </span>\n      </div>\n\n      <div className=\"flex items-center gap-1\">\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          disabled={isFirst}\n          onClick={() => onPageChange(1)}\n          className=\"hidden sm:inline-flex\"\n        >\n          <ChevronsLeft aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">Trang đầu</span>\n        </Button>\n        <Button variant=\"outline\" size=\"icon-sm\" disabled={isFirst} onClick={() => onPageChange(current - 1)}>\n          <ChevronLeft aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">Trang trước</span>\n        </Button>\n\n        <span role=\"status\" className=\"px-2 tabular-nums text-muted-foreground\">\n          Trang {current} / {pageCount}\n        </span>\n\n        <Button variant=\"outline\" size=\"icon-sm\" disabled={isLast} onClick={() => onPageChange(current + 1)}>\n          <ChevronRight aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">Trang sau</span>\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"icon-sm\"\n          disabled={isLast}\n          onClick={() => onPageChange(pageCount)}\n          className=\"hidden sm:inline-flex\"\n        >\n          <ChevronsRight aria-hidden=\"true\" className=\"size-4\" />\n          <span className=\"sr-only\">Trang cuối</span>\n        </Button>\n      </div>\n    </nav>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/composite/text-utils.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Tiện ích chuỗi dùng chung cho tầng composite (không phụ thuộc React → dùng được cả 2 phía).
+ *
+ * Vì sao không nhét vào `lib/cn.ts`: những hàm này phục vụ riêng composite (tìm kiếm không dấu,
+ * initials avatar, tô màu deterministic). Tách file để `cn()` giữ đúng một việc.
+ */
+/**
+ * Bỏ dấu tiếng Việt để so khớp tìm kiếm ("Nguyễn" ⇄ "nguyen").
+ *
+ * Dùng NFD tách dấu thành ký tự tổ hợp rồi loại dải U+0300–U+036F. `đ/Đ` KHÔNG phải chữ có dấu
+ * tổ hợp (là ký tự riêng trong Unicode) nên phải thay tay — thiếu bước này thì gõ "duc" sẽ không
+ * ra "Đức".
+ */
+declare function removeVietnameseTones(input: string): string;
+/**
+ * So khớp không dấu, không phân biệt hoa thường: `needle` có nằm trong `haystack` không.
+ */
+declare function matchesSearch(haystack: string, needle: string): boolean;
+/**
+ * Initials kiểu Việt Nam: chữ đầu của HỌ + chữ đầu của TÊN ("Nguyễn Đức Thành" → "NT").
+ *
+ * Người Việt gọi nhau bằng TÊN (từ cuối), nên lấy 2 từ đầu như phương Tây ("NĐ") là sai thói quen.
+ * Tên một từ → lấy 1 ký tự. Chuỗi rỗng → "?" (tránh ô avatar trống trơn).
+ */
+declare function getVietnameseInitials(name: string): string;
+/**
+ * Hash chuỗi → số nguyên không âm (biến thể FNV-1a 32 bit).
+ *
+ * Mục đích duy nhất: chọn màu/tone deterministic theo tên. KHÔNG dùng cho bảo mật.
+ * Chạy trên code point (không phải byte) để tên có dấu vẫn ổn định giữa server và client.
+ */
+declare function hashString(input: string): number;
+/** Chọn phần tử deterministic trong mảng theo chuỗi khoá (vd tên người → tone màu). */
+declare function pickByString<T>(items: readonly T[], key: string, fallback: T): T;
+/** Cắt chuỗi kèm dấu "…" — dùng cho tên workspace/task dài trong chip, tooltip. */
+declare function truncate(input: string, maxLength: number): string;
+
+export { getVietnameseInitials, hashString, matchesSearch, pickByString, removeVietnameseTones, truncate };

package/dist/components/composite/text-utils.js

@@ -0,0 +1,40 @@
+function removeVietnameseTones(input) {
+  return input.normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/đ/g, "d").replace(/Đ/g, "D");
+}
+function matchesSearch(haystack, needle) {
+  if (!needle) return true;
+  return removeVietnameseTones(haystack).toLowerCase().includes(removeVietnameseTones(needle).toLowerCase());
+}
+function getVietnameseInitials(name) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  const first = parts[0] ?? "";
+  const last = parts[parts.length - 1] ?? "";
+  const initials = parts.length === 1 ? first.slice(0, 1) : `${first.slice(0, 1)}${last.slice(0, 1)}`;
+  return initials.toLocaleUpperCase("vi-VN");
+}
+function hashString(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return Math.abs(hash | 0);
+}
+function pickByString(items, key, fallback) {
+  if (items.length === 0) return fallback;
+  return items[hashString(key) % items.length] ?? fallback;
+}
+function truncate(input, maxLength) {
+  if (input.length <= maxLength) return input;
+  return `${input.slice(0, Math.max(0, maxLength - 1)).trimEnd()}\u2026`;
+}
+export {
+  getVietnameseInitials,
+  hashString,
+  matchesSearch,
+  pickByString,
+  removeVietnameseTones,
+  truncate
+};
+//# sourceMappingURL=text-utils.js.map

package/dist/components/composite/text-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/composite/text-utils.ts"],"sourcesContent":["/**\n * Tiện ích chuỗi dùng chung cho tầng composite (không phụ thuộc React → dùng được cả 2 phía).\n *\n * Vì sao không nhét vào `lib/cn.ts`: những hàm này phục vụ riêng composite (tìm kiếm không dấu,\n * initials avatar, tô màu deterministic). Tách file để `cn()` giữ đúng một việc.\n */\n\n/**\n * Bỏ dấu tiếng Việt để so khớp tìm kiếm (\"Nguyễn\" ⇄ \"nguyen\").\n *\n * Dùng NFD tách dấu thành ký tự tổ hợp rồi loại dải U+0300–U+036F. `đ/Đ` KHÔNG phải chữ có dấu\n * tổ hợp (là ký tự riêng trong Unicode) nên phải thay tay — thiếu bước này thì gõ \"duc\" sẽ không\n * ra \"Đức\".\n */\nexport function removeVietnameseTones(input: string): string {\n  return input\n    .normalize(\"NFD\")\n    .replace(/[\\u0300-\\u036f]/g, \"\")\n    .replace(/đ/g, \"d\")\n    .replace(/Đ/g, \"D\");\n}\n\n/**\n * So khớp không dấu, không phân biệt hoa thường: `needle` có nằm trong `haystack` không.\n */\nexport function matchesSearch(haystack: string, needle: string): boolean {\n  if (!needle) return true;\n  return removeVietnameseTones(haystack).toLowerCase().includes(removeVietnameseTones(needle).toLowerCase());\n}\n\n/**\n * Initials kiểu Việt Nam: chữ đầu của HỌ + chữ đầu của TÊN (\"Nguyễn Đức Thành\" → \"NT\").\n *\n * Người Việt gọi nhau bằng TÊN (từ cuối), nên lấy 2 từ đầu như phương Tây (\"NĐ\") là sai thói quen.\n * Tên một từ → lấy 1 ký tự. Chuỗi rỗng → \"?\" (tránh ô avatar trống trơn).\n */\nexport function getVietnameseInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return \"?\";\n\n  const first = parts[0] ?? \"\";\n  const last = parts[parts.length - 1] ?? \"\";\n  const initials = parts.length === 1 ? first.slice(0, 1) : `${first.slice(0, 1)}${last.slice(0, 1)}`;\n\n  return initials.toLocaleUpperCase(\"vi-VN\");\n}\n\n/**\n * Hash chuỗi → số nguyên không âm (biến thể FNV-1a 32 bit).\n *\n * Mục đích duy nhất: chọn màu/tone deterministic theo tên. KHÔNG dùng cho bảo mật.\n * Chạy trên code point (không phải byte) để tên có dấu vẫn ổn định giữa server và client.\n */\nexport function hashString(input: string): number {\n  let hash = 0x811c9dc5;\n  for (let i = 0; i < input.length; i++) {\n    hash ^= input.charCodeAt(i);\n    hash = Math.imul(hash, 0x01000193);\n  }\n  return Math.abs(hash | 0);\n}\n\n/** Chọn phần tử deterministic trong mảng theo chuỗi khoá (vd tên người → tone màu). */\nexport function pickByString<T>(items: readonly T[], key: string, fallback: T): T {\n  if (items.length === 0) return fallback;\n  return items[hashString(key) % items.length] ?? fallback;\n}\n\n/** Cắt chuỗi kèm dấu \"…\" — dùng cho tên workspace/task dài trong chip, tooltip. */\nexport function truncate(input: string, maxLength: number): string {\n  if (input.length <= maxLength) return input;\n  return `${input.slice(0, Math.max(0, maxLength - 1)).trimEnd()}…`;\n}\n"],"mappings":"AAcO,SAAS,sBAAsB,OAAuB;AAC3D,SAAO,MACJ,UAAU,KAAK,EACf,QAAQ,oBAAoB,EAAE,EAC9B,QAAQ,MAAM,GAAG,EACjB,QAAQ,MAAM,GAAG;AACtB;AAKO,SAAS,cAAc,UAAkB,QAAyB;AACvE,MAAI,CAAC,OAAQ,QAAO;AACpB,SAAO,sBAAsB,QAAQ,EAAE,YAAY,EAAE,SAAS,sBAAsB,MAAM,EAAE,YAAY,CAAC;AAC3G;AAQO,SAAS,sBAAsB,MAAsB;AAC1D,QAAM,QAAQ,KAAK,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO;AACrD,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,QAAM,QAAQ,MAAM,CAAC,KAAK;AAC1B,QAAM,OAAO,MAAM,MAAM,SAAS,CAAC,KAAK;AACxC,QAAM,WAAW,MAAM,WAAW,IAAI,MAAM,MAAM,GAAG,CAAC,IAAI,GAAG,MAAM,MAAM,GAAG,CAAC,CAAC,GAAG,KAAK,MAAM,GAAG,CAAC,CAAC;AAEjG,SAAO,SAAS,kBAAkB,OAAO;AAC3C;AAQO,SAAS,WAAW,OAAuB;AAChD,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,YAAQ,MAAM,WAAW,CAAC;AAC1B,WAAO,KAAK,KAAK,MAAM,QAAU;AAAA,EACnC;AACA,SAAO,KAAK,IAAI,OAAO,CAAC;AAC1B;AAGO,SAAS,aAAgB,OAAqB,KAAa,UAAgB;AAChF,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SAAO,MAAM,WAAW,GAAG,IAAI,MAAM,MAAM,KAAK;AAClD;AAGO,SAAS,SAAS,OAAe,WAA2B;AACjE,MAAI,MAAM,UAAU,UAAW,QAAO;AACtC,SAAO,GAAG,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC;AAChE;","names":[]}

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ReactNode, ComponentProps } from 'react';
+import { Toaster as Toaster$1 } from 'sonner';
+
+type ToasterProps = ComponentProps<typeof Toaster$1>;
+type ToastVariant = "default" | "success" | "warning" | "destructive" | "info";
+interface ToastOptions {
+    description?: ReactNode;
+    variant?: ToastVariant;
+    /** ms; mặc định theo sonner (4000). `Number.POSITIVE_INFINITY` = giữ đến khi người dùng đóng. */
+    duration?: number;
+    /** Nút hành động, vd { label: "Hoàn tác", onClick } */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** id để cập nhật/đóng đúng toast đó (dùng với luồng "đang lưu…" → "đã lưu") */
+    id?: string | number;
+}
+/**
+ * Vùng hiển thị toast — đặt MỘT LẦN ở gốc app.
+ *
+ * `theme` mặc định "system" và KHÔNG đọc `next-themes`: entry "." của package phải chạy được ở
+ * app không có next-themes. App dùng next-themes hãy truyền xuống, nếu không toast sẽ theo
+ * `prefers-color-scheme` của hệ điều hành và lệch với theme người dùng tự chọn:
+ *
+ *     const { resolvedTheme } = useTheme();
+ *     <Toaster theme={resolvedTheme as "light" | "dark"} />
+ */
+declare function Toaster({ theme, position, ...props }: ToasterProps): React.JSX.Element;
+/**
+ * Bắn toast theo biến thể của Comitor.
+ *
+ * Vì sao bọc `sonner` thay vì để app gọi thẳng: tên biến thể ở đây khớp với ngôn ngữ của design
+ * system (`destructive`, không phải `error`), và khi cần đổi thư viện toast thì chỉ sửa một file.
+ */
+declare function toast(title: ReactNode, options?: ToastOptions): string | number;
+/** Đóng một toast theo id, hoặc đóng tất cả khi không truyền id. */
+declare function dismissToast(id?: string | number): void;
+/**
+ * Toast bám theo một Promise: "Đang lưu…" → "Đã lưu" / "Lưu thất bại".
+ * Chuỗi mặc định là tiếng Việt, app ghi đè được từng chuỗi.
+ */
+declare function toastPromise<T>(promise: Promise<T>, messages: {
+    loading?: ReactNode;
+    success: ReactNode | ((data: T) => ReactNode);
+    error: ReactNode | ((error: unknown) => ReactNode);
+}): (string & {
+    unwrap: () => Promise<T>;
+}) | (number & {
+    unwrap: () => Promise<T>;
+}) | {
+    unwrap: () => Promise<T>;
+};
+
+export { type ToastOptions, type ToastVariant, Toaster, type ToasterProps, dismissToast, toast, toastPromise };