@comitor/ui 0.6.2 → 0.8.0

package/README.md

@@ -505,6 +505,16 @@ shadcn/ui style `new-york`, đã tùy biến token theo brand Comitor.
 | Điều hướng | `Tabs`, `Breadcrumb`, `Pagination`, `NavigationMenu`, `Accordion`, `Collapsible` |
 | Khác | `ScrollArea`, `Resizable`, `Carousel` |
 
+`Alert` có ba variant: `default` · `warning` · `destructive` — hai variant sau tô CHỮ bằng bậc `-ink`
+trên `bg-card`, không tô nền màu (bậc tô nền làm chữ chỉ được 1,59:1 ở light ✗).
+
+`Progress` có `tone`: `default` · `success` · `warning` · `destructive`. Tông `warning` KHÔNG chỉ đổi
+màu: nó kèm vạch chéo (`hazard-stripes`) khoét rãnh xuyên phần đã chạy. Bắt buộc phải thế, vì brand
+của Comitor là gold còn warning là yellow — `--warning-ink` ⇄ `--primary-ink` chỉ 1,00:1 ở bảng tương
+phản cao (light) và 1,0x:1 ở cả hai bảng dark, tức đổi màu KHÔNG đổi được gì. Vạch là cùng tín hiệu
+ấy nói bằng hình nên nó còn đọc ra ở chế độ xám (WCAG 1.4.1). Số đo và cách chứng minh "không hex nào
+tách được hai bậc ink này" ở chú thích đầu `progress.tsx`.
+
 > Hai file primitive **không** nằm ở entry chính: `form.tsx` → `@comitor/ui/form`;
 > `sonner.tsx` → `@comitor/ui/shell` (tên `SonnerToaster`). Xem §3.
 > **Không có `Sidebar` / `SidebarNav` ở Tier 1** — cố ý, không phải sót: shell Tier 3 đã có sidebar riêng
@@ -560,7 +570,7 @@ Giá trị thật của package: pattern lặp đi lặp lại ở mọi app, gh
 | `LetterAvatar`, `AvatarGroup` | Avatar chữ cái theo tên tiếng Việt (tông màu deterministic), nhóm người tham gia. Lấy tone bằng `getAvatarToneClasses(name)`; bản hex cho canvas/email/PDF là `getAvatarToneColors(name, mode)` ở `/tokens` — **cùng một bảng tone**, cùng một hàm băm |
 | `ConfirmDialog`, `CommandPalette` | Hộp xác nhận, bảng lệnh `⌘K` |
 | `Toaster`, `toast()`, `toastPromise()`, `dismissToast()` | Thông báo có icon theo trạng thái |
-| `CopyButton`, `RelativeTime`, `InlineEdit`, `KeyboardHint` | Tiện ích nhỏ dùng khắp nơi |
+| `CopyButton`, `RelativeTime`, `InlineEdit`, `KeyboardHint` | Tiện ích nhỏ dùng khắp nơi. `RelativeTime` nhận `now?: Date` để đo từ một mốc CỐ ĐỊNH thay vì đồng hồ thật — dùng cho dữ liệu đứng yên (bản mẫu, ảnh chụp báo cáo, test); có `now` thì nó tự tắt hẹn giờ cập nhật và kết quả trở nên tất định |
 | `useIsMac` | Hook đi kèm `KeyboardHint` — `true` khi chạy trên macOS (render đầu luôn `false`, xem §3). **Cửa xuất duy nhất của cả gói**; `/shell` không re-export |
 
 Kèm 2 module thuần (không phải component, dùng được cả hai phía):

package/dist/components/composite/relative-time.d.ts

@@ -4,9 +4,25 @@ import { ComponentProps } from 'react';
 interface RelativeTimeProps extends Omit<ComponentProps<"time">, "dateTime" | "children"> {
     /** Thời điểm cần hiển thị: Date, ISO string hoặc epoch ms */
     value: Date | string | number;
+    /**
+     * Mốc để ĐO TỪ ĐÓ. Bỏ trống = đồng hồ thật (hành vi mặc định, đúng cho bản ghi từ backend).
+     *
+     * Truyền `now` khi dữ liệu ĐỨNG YÊN — bản mẫu, ảnh chụp báo cáo, kết quả test: đồng hồ thật đo
+     * trên mốc cố định thì kết quả trôi mỗi ngày, và mốc nào lỡ nằm ở tương lai in ra "2 giờ nữa",
+     * một câu vô nghĩa mà TypeScript lẫn linter đều thấy hợp lệ.
+     *
+     * Có `now` thì component KHÔNG tự cập nhật nữa (xem `updateIntervalMs`) và kết quả trở nên tất
+     * định — server và client cho ra cùng một chuỗi.
+     */
+    now?: Date;
     /** Thêm hậu tố "trước"/"nữa" (mặc định true) */
     addSuffix?: boolean;
-    /** Chu kỳ tự cập nhật (ms). 0 = không tự cập nhật. Mặc định 60_000. */
+    /**
+     * Chu kỳ tự cập nhật (ms). 0 = không tự cập nhật. Mặc định 60_000.
+     *
+     * ⚠ Bị BỎ QUA khi có `now`: đo từ một mốc cố định thì chuỗi hiển thị không bao giờ đổi, nên hẹn
+     * giờ chỉ để render lại y nguyên mỗi phút.
+     */
     updateIntervalMs?: number;
     /** Định dạng của tooltip `title` (mặc định "HH:mm 'ngày' dd/MM/yyyy") */
     titleFormat?: string;
@@ -21,8 +37,12 @@ interface RelativeTimeProps extends Omit<ComponentProps<"time">, "dateTime" | "c
  * "45 ngày trước" là hai câu chuyện khác hẳn nhau.
  *
  * `title` luôn giữ mốc thời gian tuyệt đối để người dùng rà chuột là biết chính xác.
- * Có `suppressHydrationWarning` vì đồng hồ server và client gần như luôn lệch vài giây.
+ * Có `suppressHydrationWarning` vì đồng hồ server và client gần như luôn lệch vài giây — trừ khi
+ * truyền `now`, lúc đó kết quả tất định và thuộc tính này chỉ còn là vô hại.
+ *
+ * Hai lối đo dùng CHUNG một cách diễn đạt (`…Strict` của date-fns, locale `vi`), nên đổi giữa
+ * `now` và đồng hồ thật không làm chữ đổi giọng: vẫn "12 phút trước", không phải "khoảng 12 phút".
  */
-declare function RelativeTime({ value, addSuffix, updateIntervalMs, titleFormat, fallback, className, ...props }: RelativeTimeProps): React.JSX.Element;
+declare function RelativeTime({ value, now, addSuffix, updateIntervalMs, titleFormat, fallback, className, ...props }: RelativeTimeProps): React.JSX.Element;
 
 export { RelativeTime, type RelativeTimeProps };

package/dist/components/composite/relative-time.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { format as formatDate, formatDistanceToNowStrict, isValid } from "date-fns";
+import { format as formatDate, formatDistanceStrict, formatDistanceToNowStrict, isValid } from "date-fns";
 import { vi } from "date-fns/locale";
 import { useEffect, useState } from "react";
 function toDate(value) {
@@ -8,6 +8,7 @@ function toDate(value) {
 }
 function RelativeTime({
   value,
+  now,
   addSuffix = true,
   updateIntervalMs = 6e4,
   titleFormat = "HH:mm 'ng\xE0y' dd/MM/yyyy",
@@ -17,12 +18,13 @@ function RelativeTime({
 }) {
   const date = toDate(value);
   const valid = isValid(date);
+  const tickIntervalMs = now ? 0 : updateIntervalMs;
   const [, setTick] = useState(0);
   useEffect(() => {
-    if (!valid || !updateIntervalMs) return;
-    const timer = setInterval(() => setTick((current) => current + 1), updateIntervalMs);
+    if (!valid || !tickIntervalMs) return;
+    const timer = setInterval(() => setTick((current) => current + 1), tickIntervalMs);
     return () => clearInterval(timer);
-  }, [valid, updateIntervalMs]);
+  }, [valid, tickIntervalMs]);
   if (!valid) {
     return /* @__PURE__ */ jsx("span", { className, children: fallback });
   }
@@ -34,7 +36,7 @@ function RelativeTime({
       suppressHydrationWarning: true,
       className,
       ...props,
-      children: formatDistanceToNowStrict(date, { addSuffix, locale: vi })
+      children: now ? formatDistanceStrict(date, now, { addSuffix, locale: vi }) : formatDistanceToNowStrict(date, { addSuffix, locale: vi })
     }
   );
 }

package/dist/components/composite/relative-time.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/composite/relative-time.tsx"],"sourcesContent":["\"use client\";\n\nimport { format as formatDate, formatDistanceToNowStrict, isValid } from \"date-fns\";\nimport { vi } from \"date-fns/locale\";\nimport { type ComponentProps, useEffect, useState } from \"react\";\n\nexport interface RelativeTimeProps extends Omit<ComponentProps<\"time\">, \"dateTime\" | \"children\"> {\n  /** Thời điểm cần hiển thị: Date, ISO string hoặc epoch ms */\n  value: Date | string | number;\n  /** Thêm hậu tố \"trước\"/\"nữa\" (mặc định true) */\n  addSuffix?: boolean;\n  /** Chu kỳ tự cập nhật (ms). 0 = không tự cập nhật. Mặc định 60_000. */\n  updateIntervalMs?: number;\n  /** Định dạng của tooltip `title` (mặc định \"HH:mm 'ngày' dd/MM/yyyy\") */\n  titleFormat?: string;\n  /** Nội dung thay thế khi `value` không hợp lệ */\n  fallback?: string;\n}\n\nfunction toDate(value: Date | string | number): Date {\n  return value instanceof Date ? value : new Date(value);\n}\n\n/**\n * Thời gian tương đối kiểu \"3 phút trước\", tự cập nhật theo chu kỳ.\n *\n * Dùng `formatDistanceToNowStrict` (không phải bản thường): bản thường làm tròn kiểu \"khoảng 1\n * tháng\" cho mọi thứ từ 26 ngày đến 45 ngày — trong danh sách công việc thì \"26 ngày trước\" và\n * \"45 ngày trước\" là hai câu chuyện khác hẳn nhau.\n *\n * `title` luôn giữ mốc thời gian tuyệt đối để người dùng rà chuột là biết chính xác.\n * Có `suppressHydrationWarning` vì đồng hồ server và client gần như luôn lệch vài giây.\n */\nexport function RelativeTime({\n  value,\n  addSuffix = true,\n  updateIntervalMs = 60_000,\n  titleFormat = \"HH:mm 'ngày' dd/MM/yyyy\",\n  fallback = \"—\",\n  className,\n  ...props\n}: RelativeTimeProps) {\n  const date = toDate(value);\n  const valid = isValid(date);\n\n  const [, setTick] = useState(0);\n\n  useEffect(() => {\n    if (!valid || !updateIntervalMs) return;\n    const timer = setInterval(() => setTick((current) => current + 1), updateIntervalMs);\n    return () => clearInterval(timer);\n  }, [valid, updateIntervalMs]);\n\n  // Ngày hỏng (chuỗi rỗng, null từ API) → KHÔNG render <time>: thẻ này bắt buộc phải có\n  // `datetime` hợp lệ, đưa \"Invalid Date\" vào là tạo dữ liệu sai cho trình đọc màn hình và bộ máy tìm kiếm.\n  if (!valid) {\n    return <span className={className}>{fallback}</span>;\n  }\n\n  return (\n    <time\n      dateTime={date.toISOString()}\n      title={formatDate(date, titleFormat, { locale: vi })}\n      suppressHydrationWarning\n      className={className}\n      {...props}\n    >\n      {formatDistanceToNowStrict(date, { addSuffix, locale: vi })}\n    </time>\n  );\n}\n"],"mappings":";AAwDW;AAtDX,SAAS,UAAU,YAAY,2BAA2B,eAAe;AACzE,SAAS,UAAU;AACnB,SAA8B,WAAW,gBAAgB;AAezD,SAAS,OAAO,OAAqC;AACnD,SAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AACvD;AAYO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,OAAO,OAAO,KAAK;AACzB,QAAM,QAAQ,QAAQ,IAAI;AAE1B,QAAM,CAAC,EAAE,OAAO,IAAI,SAAS,CAAC;AAE9B,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,CAAC,iBAAkB;AACjC,UAAM,QAAQ,YAAY,MAAM,QAAQ,CAAC,YAAY,UAAU,CAAC,GAAG,gBAAgB;AACnF,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,OAAO,gBAAgB,CAAC;AAI5B,MAAI,CAAC,OAAO;AACV,WAAO,oBAAC,UAAK,WAAuB,oBAAS;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK,YAAY;AAAA,MAC3B,OAAO,WAAW,MAAM,aAAa,EAAE,QAAQ,GAAG,CAAC;AAAA,MACnD,0BAAwB;AAAA,MACxB;AAAA,MACC,GAAG;AAAA,MAEH,oCAA0B,MAAM,EAAE,WAAW,QAAQ,GAAG,CAAC;AAAA;AAAA,EAC5D;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/composite/relative-time.tsx"],"sourcesContent":["\"use client\";\n\nimport { format as formatDate, formatDistanceStrict, formatDistanceToNowStrict, isValid } from \"date-fns\";\nimport { vi } from \"date-fns/locale\";\nimport { type ComponentProps, useEffect, useState } from \"react\";\n\nexport interface RelativeTimeProps extends Omit<ComponentProps<\"time\">, \"dateTime\" | \"children\"> {\n  /** Thời điểm cần hiển thị: Date, ISO string hoặc epoch ms */\n  value: Date | string | number;\n  /**\n   * Mốc để ĐO TỪ ĐÓ. Bỏ trống = đồng hồ thật (hành vi mặc định, đúng cho bản ghi từ backend).\n   *\n   * Truyền `now` khi dữ liệu ĐỨNG YÊN — bản mẫu, ảnh chụp báo cáo, kết quả test: đồng hồ thật đo\n   * trên mốc cố định thì kết quả trôi mỗi ngày, và mốc nào lỡ nằm ở tương lai in ra \"2 giờ nữa\",\n   * một câu vô nghĩa mà TypeScript lẫn linter đều thấy hợp lệ.\n   *\n   * Có `now` thì component KHÔNG tự cập nhật nữa (xem `updateIntervalMs`) và kết quả trở nên tất\n   * định — server và client cho ra cùng một chuỗi.\n   */\n  now?: Date;\n  /** Thêm hậu tố \"trước\"/\"nữa\" (mặc định true) */\n  addSuffix?: boolean;\n  /**\n   * Chu kỳ tự cập nhật (ms). 0 = không tự cập nhật. Mặc định 60_000.\n   *\n   * ⚠ Bị BỎ QUA khi có `now`: đo từ một mốc cố định thì chuỗi hiển thị không bao giờ đổi, nên hẹn\n   * giờ chỉ để render lại y nguyên mỗi phút.\n   */\n  updateIntervalMs?: number;\n  /** Định dạng của tooltip `title` (mặc định \"HH:mm 'ngày' dd/MM/yyyy\") */\n  titleFormat?: string;\n  /** Nội dung thay thế khi `value` không hợp lệ */\n  fallback?: string;\n}\n\nfunction toDate(value: Date | string | number): Date {\n  return value instanceof Date ? value : new Date(value);\n}\n\n/**\n * Thời gian tương đối kiểu \"3 phút trước\", tự cập nhật theo chu kỳ.\n *\n * Dùng `formatDistanceToNowStrict` (không phải bản thường): bản thường làm tròn kiểu \"khoảng 1\n * tháng\" cho mọi thứ từ 26 ngày đến 45 ngày — trong danh sách công việc thì \"26 ngày trước\" và\n * \"45 ngày trước\" là hai câu chuyện khác hẳn nhau.\n *\n * `title` luôn giữ mốc thời gian tuyệt đối để người dùng rà chuột là biết chính xác.\n * Có `suppressHydrationWarning` vì đồng hồ server và client gần như luôn lệch vài giây — trừ khi\n * truyền `now`, lúc đó kết quả tất định và thuộc tính này chỉ còn là vô hại.\n *\n * Hai lối đo dùng CHUNG một cách diễn đạt (`…Strict` của date-fns, locale `vi`), nên đổi giữa\n * `now` và đồng hồ thật không làm chữ đổi giọng: vẫn \"12 phút trước\", không phải \"khoảng 12 phút\".\n */\nexport function RelativeTime({\n  value,\n  now,\n  addSuffix = true,\n  updateIntervalMs = 60_000,\n  titleFormat = \"HH:mm 'ngày' dd/MM/yyyy\",\n  fallback = \"—\",\n  className,\n  ...props\n}: RelativeTimeProps) {\n  const date = toDate(value);\n  const valid = isValid(date);\n\n  // Mốc cố định thì chuỗi không bao giờ đổi — tắt hẳn hẹn giờ, kể cả khi người gọi vẫn truyền\n  // `updateIntervalMs`. Nếu không, component render lại mỗi phút để in ra đúng chữ cũ.\n  const tickIntervalMs = now ? 0 : updateIntervalMs;\n\n  const [, setTick] = useState(0);\n\n  useEffect(() => {\n    if (!valid || !tickIntervalMs) return;\n    const timer = setInterval(() => setTick((current) => current + 1), tickIntervalMs);\n    return () => clearInterval(timer);\n  }, [valid, tickIntervalMs]);\n\n  // Ngày hỏng (chuỗi rỗng, null từ API) → KHÔNG render <time>: thẻ này bắt buộc phải có\n  // `datetime` hợp lệ, đưa \"Invalid Date\" vào là tạo dữ liệu sai cho trình đọc màn hình và bộ máy tìm kiếm.\n  if (!valid) {\n    return <span className={className}>{fallback}</span>;\n  }\n\n  return (\n    <time\n      dateTime={date.toISOString()}\n      title={formatDate(date, titleFormat, { locale: vi })}\n      suppressHydrationWarning\n      className={className}\n      {...props}\n    >\n      {now\n        ? formatDistanceStrict(date, now, { addSuffix, locale: vi })\n        : formatDistanceToNowStrict(date, { addSuffix, locale: vi })}\n    </time>\n  );\n}\n"],"mappings":";AAiFW;AA/EX,SAAS,UAAU,YAAY,sBAAsB,2BAA2B,eAAe;AAC/F,SAAS,UAAU;AACnB,SAA8B,WAAW,gBAAgB;AA+BzD,SAAS,OAAO,OAAqC;AACnD,SAAO,iBAAiB,OAAO,QAAQ,IAAI,KAAK,KAAK;AACvD;AAgBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,OAAO,OAAO,KAAK;AACzB,QAAM,QAAQ,QAAQ,IAAI;AAI1B,QAAM,iBAAiB,MAAM,IAAI;AAEjC,QAAM,CAAC,EAAE,OAAO,IAAI,SAAS,CAAC;AAE9B,YAAU,MAAM;AACd,QAAI,CAAC,SAAS,CAAC,eAAgB;AAC/B,UAAM,QAAQ,YAAY,MAAM,QAAQ,CAAC,YAAY,UAAU,CAAC,GAAG,cAAc;AACjF,WAAO,MAAM,cAAc,KAAK;AAAA,EAClC,GAAG,CAAC,OAAO,cAAc,CAAC;AAI1B,MAAI,CAAC,OAAO;AACV,WAAO,oBAAC,UAAK,WAAuB,oBAAS;AAAA,EAC/C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,KAAK,YAAY;AAAA,MAC3B,OAAO,WAAW,MAAM,aAAa,EAAE,QAAQ,GAAG,CAAC;AAAA,MACnD,0BAAwB;AAAA,MACxB;AAAA,MACC,GAAG;AAAA,MAEH,gBACG,qBAAqB,MAAM,KAAK,EAAE,WAAW,QAAQ,GAAG,CAAC,IACzD,0BAA0B,MAAM,EAAE,WAAW,QAAQ,GAAG,CAAC;AAAA;AAAA,EAC/D;AAEJ;","names":[]}

package/dist/components/ui/alert.d.ts

@@ -3,7 +3,7 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | null | undefined;
+    variant?: "default" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AlertProps extends React.ComponentProps<"div">, VariantProps<typeof alertVariants> {
 }

package/dist/components/ui/alert.js

@@ -7,6 +7,22 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
+        /*
+         * `warning` cùng khuôn với `destructive`, chỉ đổi bậc ink — và cũng vì lý do đó: `--warning`
+         * là màu TÔ NỀN (#E8B824 ở light), làm chữ trên `bg-card` chỉ 1,59:1 ✗. Bậc ink đạt AA dư
+         * biên ở cả hai theme (đo trên `--card`):
+         *     tiêu đề    6,51:1 (light) · 11,60:1 (dark) ✓
+         *     mô tả /90  5,17:1 (light) ·  9,56:1 (dark) ✓
+         *
+         * ⚠ Ở bảng tương phản cao (light), `--warning-ink` và `--primary-ink` là CÙNG một giá trị
+         * (#7A5800 — `--yellow-ink` trỏ về `--gold-500`), và ở cả hai bảng dark chúng chỉ cách nhau
+         * 1,0x:1. Với `Alert` chuyện đó vô hại vì variant `default` dùng `--card-foreground`, nên
+         * `warning` vẫn khác hẳn nó (2,90:1). Nhưng component nào có mặc định là BRAND thì tông
+         * `warning` phải mang thêm một tín hiệu KHÔNG PHẢI MÀU — `Progress` giải bằng vạch chéo
+         * `hazard-stripes`; đọc chú thích đầu `progress.tsx` trước khi thêm `warning` cho một
+         * component kiểu đó.
+         */
+        warning: "text-warning-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-warning-ink/90",
         destructive: "text-destructive-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-ink/90"
       }
     },

package/dist/components/ui/alert.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/*\n * Variant `destructive` dùng bậc `--destructive-ink`, KHÔNG dùng `--destructive`.\n * `--destructive` là màu TÔ NỀN (nút xoá) và cố ý ghim một giá trị ở cả hai theme, nên làm CHỮ\n * trên `bg-card` chỉ được 3,53:1 ở dark ✗; phần mô tả còn bị hạ thêm bằng `/90` nên hỏng ở CẢ\n * hai theme (4,32:1 light · 3,08:1 dark ✗).\n * Sau khi đổi (đo trên `--card`): tiêu đề 7,15:1 (light) / 6,42:1 (dark); mô tả `/90` 5,78:1\n * (light) / 5,40:1 (dark) ✓ — bậc `/90` giữ lại vì nó là phân cấp thị giác, và ở bậc ink nó vẫn\n * còn dư biên so với AA 4,5:1.\n */\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-ink/90\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n);\n\nexport interface AlertProps extends React.ComponentProps<\"div\">, VariantProps<typeof alertVariants> {}\nexport type AlertTitleProps = React.ComponentProps<\"div\">;\nexport type AlertDescriptionProps = React.ComponentProps<\"div\">;\n\nfunction Alert({ className, variant, ...props }: AlertProps) {\n  return <div data-slot=\"alert\" role=\"alert\" className={cn(alertVariants({ variant }), className)} {...props} />;\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":"AAkCS;AAlCT,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAWnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAMA,SAAS,MAAM,EAAE,WAAW,SAAS,GAAG,MAAM,GAAe;AAC3D,SAAO,oBAAC,SAAI,aAAU,SAAQ,MAAK,SAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AAC9G;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,+DAA+D,SAAS;AAAA,MACrF,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/*\n * Variant `destructive` dùng bậc `--destructive-ink`, KHÔNG dùng `--destructive`.\n * `--destructive` là màu TÔ NỀN (nút xoá) và cố ý ghim một giá trị ở cả hai theme, nên làm CHỮ\n * trên `bg-card` chỉ được 3,53:1 ở dark ✗; phần mô tả còn bị hạ thêm bằng `/90` nên hỏng ở CẢ\n * hai theme (4,32:1 light · 3,08:1 dark ✗).\n * Sau khi đổi (đo trên `--card`): tiêu đề 7,15:1 (light) / 6,42:1 (dark); mô tả `/90` 5,78:1\n * (light) / 5,40:1 (dark) ✓ — bậc `/90` giữ lại vì nó là phân cấp thị giác, và ở bậc ink nó vẫn\n * còn dư biên so với AA 4,5:1.\n */\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        /*\n         * `warning` cùng khuôn với `destructive`, chỉ đổi bậc ink — và cũng vì lý do đó: `--warning`\n         * là màu TÔ NỀN (#E8B824 ở light), làm chữ trên `bg-card` chỉ 1,59:1 ✗. Bậc ink đạt AA dư\n         * biên ở cả hai theme (đo trên `--card`):\n         *     tiêu đề    6,51:1 (light) · 11,60:1 (dark) ✓\n         *     mô tả /90  5,17:1 (light) ·  9,56:1 (dark) ✓\n         *\n         * ⚠ Ở bảng tương phản cao (light), `--warning-ink` và `--primary-ink` là CÙNG một giá trị\n         * (#7A5800 — `--yellow-ink` trỏ về `--gold-500`), và ở cả hai bảng dark chúng chỉ cách nhau\n         * 1,0x:1. Với `Alert` chuyện đó vô hại vì variant `default` dùng `--card-foreground`, nên\n         * `warning` vẫn khác hẳn nó (2,90:1). Nhưng component nào có mặc định là BRAND thì tông\n         * `warning` phải mang thêm một tín hiệu KHÔNG PHẢI MÀU — `Progress` giải bằng vạch chéo\n         * `hazard-stripes`; đọc chú thích đầu `progress.tsx` trước khi thêm `warning` cho một\n         * component kiểu đó.\n         */\n        warning: \"text-warning-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-warning-ink/90\",\n        destructive:\n          \"text-destructive-ink bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-ink/90\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\"\n    }\n  }\n);\n\nexport interface AlertProps extends React.ComponentProps<\"div\">, VariantProps<typeof alertVariants> {}\nexport type AlertTitleProps = React.ComponentProps<\"div\">;\nexport type AlertDescriptionProps = React.ComponentProps<\"div\">;\n\nfunction Alert({ className, variant, ...props }: AlertProps) {\n  return <div data-slot=\"alert\" role=\"alert\" className={cn(alertVariants({ variant }), className)} {...props} />;\n}\n\nfunction AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":"AAkDS;AAlDT,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAWnB,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBT,SAAS;AAAA,QACT,aACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,IACX;AAAA,EACF;AACF;AAMA,SAAS,MAAM,EAAE,WAAW,SAAS,GAAG,MAAM,GAAe;AAC3D,SAAO,oBAAC,SAAI,aAAU,SAAQ,MAAK,SAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS,GAAI,GAAG,OAAO;AAC9G;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAoB;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,+DAA+D,SAAS;AAAA,MACrF,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA0B;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/ui/progress.d.ts

@@ -1,4 +1,6 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 
 /**
@@ -31,8 +33,60 @@ import * as React from 'react';
  *
  * Đây đúng vai trò hợp đồng đặt cho `--control-edge` (styles.css §RANH GIỚI): "khi nền control
  * trong suốt/nhạt thì VIỀN là thứ duy nhất khoanh vùng".
+ *
+ * ─ TÔNG: BỐN GIÁ TRỊ, VÀ `warning` KHÔNG ĐƯỢC PHÉP CHỈ LÀ MỘT MÀU KHÁC ─
+ * `tone` đổi CẢ phần đã chạy lẫn rãnh sang cùng một bậc ink, nên tỉ lệ đọc-được giữ nguyên cấu
+ * trúc của bản mặc định. Đo trên ba bề mặt (`--background`, `--card`, `--muted`), tệ nhất mỗi cột.
+ *
+ * ⚠ Cột "light"/"dark" dưới đây là **bảng TƯƠNG PHẢN CAO** — đúng bảng mà cổng màu đo, và lý do
+ * ghi ở đầu `scripts/a11y/tailwind.mjs`. Ở bảng mặc định (bản duyệt comitor-ds) `--primary-ink`
+ * chính là `--primary` gold #E8B824, nên tông `default` chỉ được 1,73:1 với nền và 1,55:1 với
+ * rãnh: đó là con số của BẢN DUYỆT, không phải lỗi của component — đổi nó là đổi bảng màu.
+ *
+ *     tông           đã chạy ⇄ nền trang        đã chạy ⇄ rãnh cùng tông /20
+ *     default        6,09:1 (light) 10,80 (dark)   4,54:1 (light) 6,52:1 (dark) ✓
+ *     success        6,09:1         9,25           4,55:1         5,88:1        ✓
+ *     warning        6,09:1         10,52          4,54:1         6,47:1        ✓
+ *     destructive    6,68:1         5,82           4,85:1         4,25:1        ✓
+ *
+ * ⚠ NHƯNG `warning` KHÔNG phân biệt được với `default` BẰNG MÀU, và đó là số đo chứ không phải
+ * cảm tính. Đo `--warning-ink` ⇄ `--primary-ink` trên cả BỐN bảng màu của gói:
+ *
+ *     light (mặc định)         #7A5800 ⇄ #E8B824   3,51:1  ✓
+ *     light (tương phản cao)   #7A5800 ⇄ #7A5800   1,00:1  ✗ CÙNG MỘT HEX
+ *     dark  (mặc định)         #F2C94C ⇄ #F5D060   1,06:1  ✗
+ *     dark  (tương phản cao)   #FACC15 ⇄ #F5D060   1,03:1  ✗
+ *
+ * Ba trên bốn bảng màu cho ra hai thanh trông y hệt nhau. Đây KHÔNG sửa được ở tầng token: brand
+ * của Comitor là gold, warning là yellow — cùng một sắc. Muốn tách hai bậc ink ra 3:1 thì một
+ * trong hai phải rời khỏi vùng đọc-được: với nền trắng, chữ đạt 4,5:1 đòi độ chói ≤ 0,183, mà
+ * cách `--gold-500` (0,111) đúng 3:1 thì phải ≤ 0,004 (gần như đen) hoặc ≥ 0,433 (quá sáng để
+ * làm chữ). Hai ràng buộc không giao nhau — không có hex nào thoả cả hai.
+ *
+ * Nên tông `warning` nói bằng thứ KHÔNG PHẢI MÀU: `hazard-stripes` (khai ở styles.css) khoét
+ * những rãnh chéo xuyên phần đã chạy để nền rãnh lộ ra. Ranh giới vạch ⇄ rãnh chính là cặp
+ * "đã chạy ⇄ rãnh" đã đo ở bảng trên (4,54:1 light · 6,47:1 dark ✓), nên vạch KHÔNG thêm màu nào
+ * và không cần đo thêm. Đây đúng là WCAG 1.4.1: tín hiệu không được chỉ nằm ở màu — bản vạch còn
+ * đọc ra ở chế độ xám, chỗ mà mọi khác biệt sắc độ đều biến mất.
+ *
+ * ⚠ Vì vậy: KHÔNG được "đơn giản hoá" `warning` xuống còn mỗi `bg-warning-ink`. Bỏ vạch đi là
+ * API đổi tông mà không đổi được gì ở ba trên bốn bảng màu — chỗ gọi tưởng đã cảnh báo, người
+ * dùng không thấy gì. Cùng lý do đó, ĐỪNG thêm tông thứ năm nào nữa mà chưa đo lại bảng trên.
+ *
+ * Vạch chỉ là cách nói "sắp chạm ngưỡng" trên chính cái thanh; nó KHÔNG thay được một câu chữ.
+ * Chỗ nào cần nói rõ ngưỡng là bao nhiêu và làm gì tiếp thì vẫn phải có `Alert`/`StatusPill` hoặc
+ * một dòng `text-warning-ink` cạnh thanh.
  */
-type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>;
-declare function Progress({ className, value, ...props }: ProgressProps): React.JSX.Element;
+declare const progressTrackVariants: (props?: ({
+    tone?: "default" | "success" | "warning" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const progressBarVariants: (props?: ({
+    tone?: "default" | "success" | "warning" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/** Tông của thanh — xem chú thích ở trên về việc vì sao `warning` phải kèm vạch chéo. */
+type ProgressTone = NonNullable<VariantProps<typeof progressBarVariants>["tone"]>;
+interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root>, VariantProps<typeof progressBarVariants> {
+}
+declare function Progress({ className, value, tone, ...props }: ProgressProps): React.JSX.Element;
 
-export { Progress, type ProgressProps };
+export { Progress, type ProgressProps, type ProgressTone, progressBarVariants, progressTrackVariants };

package/dist/components/ui/progress.js

@@ -1,23 +1,45 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cva } from "class-variance-authority";
 import { cn } from "../../lib/cn.js";
-function Progress({ className, value, ...props }) {
+const progressTrackVariants = cva("border-control-edge relative h-2 w-full overflow-hidden rounded-full border", {
+  variants: {
+    tone: {
+      default: "bg-primary-ink/20",
+      success: "bg-success-ink/20",
+      warning: "bg-warning-ink/20",
+      destructive: "bg-destructive-ink/20"
+    }
+  },
+  defaultVariants: { tone: "default" }
+});
+const progressBarVariants = cva("h-full w-full flex-1 transition-transform duration-150 ease-out", {
+  variants: {
+    tone: {
+      default: "bg-primary-ink",
+      success: "bg-success-ink",
+      // `hazard-stripes` là PHẦN BẮT BUỘC của tông này, không phải trang trí — xem chú thích đầu file.
+      warning: "bg-warning-ink hazard-stripes",
+      destructive: "bg-destructive-ink"
+    }
+  },
+  defaultVariants: { tone: "default" }
+});
+function Progress({ className, value, tone = "default", ...props }) {
   return /* @__PURE__ */ jsx(
     ProgressPrimitive.Root,
     {
       "data-slot": "progress",
-      className: cn(
-        "bg-primary-ink/20 border border-control-edge relative h-2 w-full overflow-hidden rounded-full",
-        className
-      ),
+      "data-tone": tone,
+      className: cn(progressTrackVariants({ tone }), className),
       value,
       ...props,
       children: /* @__PURE__ */ jsx(
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
-          className: "bg-primary-ink h-full w-full flex-1 transition-transform duration-150 ease-out",
+          className: progressBarVariants({ tone }),
           style: { transform: `translateX(-${100 - (value || 0)}%)` }
         }
       )
@@ -25,6 +47,8 @@ function Progress({ className, value, ...props }) {
   );
 }
 export {
-  Progress
+  Progress,
+  progressBarVariants,
+  progressTrackVariants
 };
 //# sourceMappingURL=progress.js.map

package/dist/components/ui/progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Progress (Radix) — thanh tiến trình xác định (`value` 0…100).\n * Bỏ trống `value` để về trạng thái indeterminate của Radix (thanh đứng yên ở 0);\n * animation cho indeterminate là việc của app.\n *\n * ─ MÀU: `--primary-ink`, KHÔNG PHẢI `--primary` ─\n * Phần đã chạy là thông tin thị giác (WCAG 1.4.11, 3:1) và phải nổi trên CẢ nền trang lẫn phần\n * rãnh còn lại. `bg-primary` gold #E8B824 ở light chỉ **1,86:1** với nền trắng và **1,64:1** với\n * rãnh `bg-primary/20` — thanh 8px vàng nhạt trên nền trắng gần như không thấy. Bậc ink của\n * brand đạt cả hai phía ở cả hai theme:\n *\n *     đã chạy ⇄ nền trang        : 6,51:1 (light) · 12,67:1 (dark) ✓\n *     đã chạy ⇄ rãnh `/20`       : 4,85:1 (light) · 7,97:1 (dark)  ✓\n *                                  (tệ nhất khi rãnh nằm trên --muted: 4,54:1 · 6,52:1 ✓)\n *\n * ─ RÃNH: TINT `/20` GIỮ NGUYÊN, NHƯNG PHẢI CÓ VIỀN `--control-edge` ─\n * Bản trước chỉ có tint: rãnh ⇄ nền trang mới **1,34:1** (light) và **1,59–1,66:1** (dark), tức\n * KHÔNG nhìn thấy mốc 100% — ở `value` nhỏ không đọc được TỈ LỆ, ở `value=0` cả control biến mất.\n * Cách sửa hiển nhiên (đổi rãnh sang `bg-control-edge` như Slider/Switch) lại hỏng chỗ khác:\n * `--primary-ink` ⇄ `--control-edge` chỉ **1,70:1** (light) / **2,57:1** (dark), mà Progress\n * KHÔNG có núm nên ranh giới đã-chạy/chưa-chạy là thứ DUY NHẤT mang giá trị — mất nó là mất\n * thông tin. Với nền trang trắng không tồn tại cặp màu nào vừa ≥3:1 với nhau vừa ≥3:1 với nền\n * (chứng minh trong chú thích của `Slider`), nên hai ràng buộc phải tách ra hai lớp:\n *\n *     khoanh vùng control  → `border-control-edge` ⇄ nền trang : 3,83:1 (light) · 4,94:1 (dark) ✓\n *                                                  ⇄ --muted   : 3,58:1 · 4,21:1 ✓\n *     đọc tỉ lệ            → đã chạy ⇄ rãnh `/20`               : 4,85:1 · 7,97:1 ✓\n *\n * Đây đúng vai trò hợp đồng đặt cho `--control-edge` (styles.css §RANH GIỚI): \"khi nền control\n * trong suốt/nhạt thì VIỀN là thứ duy nhất khoanh vùng\".\n */\n\nexport type ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root>;\n\nfunction Progress({ className, value, ...props }: ProgressProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-primary-ink/20 border border-control-edge relative h-2 w-full overflow-hidden rounded-full\",\n        className\n      )}\n      value={value}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary-ink h-full w-full flex-1 transition-transform duration-150 ease-out\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\n"],"mappings":";AAmDM;AAjDN,YAAY,uBAAuB;AAEnC,SAAS,UAAU;AAoCnB,SAAS,SAAS,EAAE,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC/D,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,EAAE,KAAK;AAAA;AAAA,MAC5D;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/progress.tsx"],"sourcesContent":["\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { cn } from \"../../lib/cn.js\";\n\n/**\n * Progress (Radix) — thanh tiến trình xác định (`value` 0…100).\n * Bỏ trống `value` để về trạng thái indeterminate của Radix (thanh đứng yên ở 0);\n * animation cho indeterminate là việc của app.\n *\n * ─ MÀU: `--primary-ink`, KHÔNG PHẢI `--primary` ─\n * Phần đã chạy là thông tin thị giác (WCAG 1.4.11, 3:1) và phải nổi trên CẢ nền trang lẫn phần\n * rãnh còn lại. `bg-primary` gold #E8B824 ở light chỉ **1,86:1** với nền trắng và **1,64:1** với\n * rãnh `bg-primary/20` — thanh 8px vàng nhạt trên nền trắng gần như không thấy. Bậc ink của\n * brand đạt cả hai phía ở cả hai theme:\n *\n *     đã chạy ⇄ nền trang        : 6,51:1 (light) · 12,67:1 (dark) ✓\n *     đã chạy ⇄ rãnh `/20`       : 4,85:1 (light) · 7,97:1 (dark)  ✓\n *                                  (tệ nhất khi rãnh nằm trên --muted: 4,54:1 · 6,52:1 ✓)\n *\n * ─ RÃNH: TINT `/20` GIỮ NGUYÊN, NHƯNG PHẢI CÓ VIỀN `--control-edge` ─\n * Bản trước chỉ có tint: rãnh ⇄ nền trang mới **1,34:1** (light) và **1,59–1,66:1** (dark), tức\n * KHÔNG nhìn thấy mốc 100% — ở `value` nhỏ không đọc được TỈ LỆ, ở `value=0` cả control biến mất.\n * Cách sửa hiển nhiên (đổi rãnh sang `bg-control-edge` như Slider/Switch) lại hỏng chỗ khác:\n * `--primary-ink` ⇄ `--control-edge` chỉ **1,70:1** (light) / **2,57:1** (dark), mà Progress\n * KHÔNG có núm nên ranh giới đã-chạy/chưa-chạy là thứ DUY NHẤT mang giá trị — mất nó là mất\n * thông tin. Với nền trang trắng không tồn tại cặp màu nào vừa ≥3:1 với nhau vừa ≥3:1 với nền\n * (chứng minh trong chú thích của `Slider`), nên hai ràng buộc phải tách ra hai lớp:\n *\n *     khoanh vùng control  → `border-control-edge` ⇄ nền trang : 3,83:1 (light) · 4,94:1 (dark) ✓\n *                                                  ⇄ --muted   : 3,58:1 · 4,21:1 ✓\n *     đọc tỉ lệ            → đã chạy ⇄ rãnh `/20`               : 4,85:1 · 7,97:1 ✓\n *\n * Đây đúng vai trò hợp đồng đặt cho `--control-edge` (styles.css §RANH GIỚI): \"khi nền control\n * trong suốt/nhạt thì VIỀN là thứ duy nhất khoanh vùng\".\n *\n * ─ TÔNG: BỐN GIÁ TRỊ, VÀ `warning` KHÔNG ĐƯỢC PHÉP CHỈ LÀ MỘT MÀU KHÁC ─\n * `tone` đổi CẢ phần đã chạy lẫn rãnh sang cùng một bậc ink, nên tỉ lệ đọc-được giữ nguyên cấu\n * trúc của bản mặc định. Đo trên ba bề mặt (`--background`, `--card`, `--muted`), tệ nhất mỗi cột.\n *\n * ⚠ Cột \"light\"/\"dark\" dưới đây là **bảng TƯƠNG PHẢN CAO** — đúng bảng mà cổng màu đo, và lý do\n * ghi ở đầu `scripts/a11y/tailwind.mjs`. Ở bảng mặc định (bản duyệt comitor-ds) `--primary-ink`\n * chính là `--primary` gold #E8B824, nên tông `default` chỉ được 1,73:1 với nền và 1,55:1 với\n * rãnh: đó là con số của BẢN DUYỆT, không phải lỗi của component — đổi nó là đổi bảng màu.\n *\n *     tông           đã chạy ⇄ nền trang        đã chạy ⇄ rãnh cùng tông /20\n *     default        6,09:1 (light) 10,80 (dark)   4,54:1 (light) 6,52:1 (dark) ✓\n *     success        6,09:1         9,25           4,55:1         5,88:1        ✓\n *     warning        6,09:1         10,52          4,54:1         6,47:1        ✓\n *     destructive    6,68:1         5,82           4,85:1         4,25:1        ✓\n *\n * ⚠ NHƯNG `warning` KHÔNG phân biệt được với `default` BẰNG MÀU, và đó là số đo chứ không phải\n * cảm tính. Đo `--warning-ink` ⇄ `--primary-ink` trên cả BỐN bảng màu của gói:\n *\n *     light (mặc định)         #7A5800 ⇄ #E8B824   3,51:1  ✓\n *     light (tương phản cao)   #7A5800 ⇄ #7A5800   1,00:1  ✗ CÙNG MỘT HEX\n *     dark  (mặc định)         #F2C94C ⇄ #F5D060   1,06:1  ✗\n *     dark  (tương phản cao)   #FACC15 ⇄ #F5D060   1,03:1  ✗\n *\n * Ba trên bốn bảng màu cho ra hai thanh trông y hệt nhau. Đây KHÔNG sửa được ở tầng token: brand\n * của Comitor là gold, warning là yellow — cùng một sắc. Muốn tách hai bậc ink ra 3:1 thì một\n * trong hai phải rời khỏi vùng đọc-được: với nền trắng, chữ đạt 4,5:1 đòi độ chói ≤ 0,183, mà\n * cách `--gold-500` (0,111) đúng 3:1 thì phải ≤ 0,004 (gần như đen) hoặc ≥ 0,433 (quá sáng để\n * làm chữ). Hai ràng buộc không giao nhau — không có hex nào thoả cả hai.\n *\n * Nên tông `warning` nói bằng thứ KHÔNG PHẢI MÀU: `hazard-stripes` (khai ở styles.css) khoét\n * những rãnh chéo xuyên phần đã chạy để nền rãnh lộ ra. Ranh giới vạch ⇄ rãnh chính là cặp\n * \"đã chạy ⇄ rãnh\" đã đo ở bảng trên (4,54:1 light · 6,47:1 dark ✓), nên vạch KHÔNG thêm màu nào\n * và không cần đo thêm. Đây đúng là WCAG 1.4.1: tín hiệu không được chỉ nằm ở màu — bản vạch còn\n * đọc ra ở chế độ xám, chỗ mà mọi khác biệt sắc độ đều biến mất.\n *\n * ⚠ Vì vậy: KHÔNG được \"đơn giản hoá\" `warning` xuống còn mỗi `bg-warning-ink`. Bỏ vạch đi là\n * API đổi tông mà không đổi được gì ở ba trên bốn bảng màu — chỗ gọi tưởng đã cảnh báo, người\n * dùng không thấy gì. Cùng lý do đó, ĐỪNG thêm tông thứ năm nào nữa mà chưa đo lại bảng trên.\n *\n * Vạch chỉ là cách nói \"sắp chạm ngưỡng\" trên chính cái thanh; nó KHÔNG thay được một câu chữ.\n * Chỗ nào cần nói rõ ngưỡng là bao nhiêu và làm gì tiếp thì vẫn phải có `Alert`/`StatusPill` hoặc\n * một dòng `text-warning-ink` cạnh thanh.\n */\n\n/*\n * HAI `cva`, không phải hai bảng `Record`.\n *\n * Không phải chuyện phong cách: cổng màu (`scripts/check-contrast.mjs`) chỉ bóc chuỗi lớp từ ba\n * chỗ — thuộc tính `className`, `cva(base, { variants })`, và đối số TRỰC TIẾP của `cn()`. Class\n * nằm trong một `Record` rồi đi vào `cn()` qua biến là VÔ HÌNH với cổng: nó không báo lỗi, nó\n * lặng lẽ không đo — và miễn trừ của rãnh sẽ thành \"ruỗng\", đúng thứ cổng coi là nơi giấu lỗi.\n * Dạng `cva` cho cổng thấy cả base lẫn từng lá biến thể.\n */\nconst progressTrackVariants = cva(\"border-control-edge relative h-2 w-full overflow-hidden rounded-full border\", {\n  variants: {\n    tone: {\n      default: \"bg-primary-ink/20\",\n      success: \"bg-success-ink/20\",\n      warning: \"bg-warning-ink/20\",\n      destructive: \"bg-destructive-ink/20\"\n    }\n  },\n  defaultVariants: { tone: \"default\" }\n});\n\nconst progressBarVariants = cva(\"h-full w-full flex-1 transition-transform duration-150 ease-out\", {\n  variants: {\n    tone: {\n      default: \"bg-primary-ink\",\n      success: \"bg-success-ink\",\n      // `hazard-stripes` là PHẦN BẮT BUỘC của tông này, không phải trang trí — xem chú thích đầu file.\n      warning: \"bg-warning-ink hazard-stripes\",\n      destructive: \"bg-destructive-ink\"\n    }\n  },\n  defaultVariants: { tone: \"default\" }\n});\n\n/** Tông của thanh — xem chú thích ở trên về việc vì sao `warning` phải kèm vạch chéo. */\nexport type ProgressTone = NonNullable<VariantProps<typeof progressBarVariants>[\"tone\"]>;\n\nexport interface ProgressProps\n  extends React.ComponentProps<typeof ProgressPrimitive.Root>,\n    VariantProps<typeof progressBarVariants> {}\n\nfunction Progress({ className, value, tone = \"default\", ...props }: ProgressProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      data-tone={tone}\n      className={cn(progressTrackVariants({ tone }), className)}\n      value={value}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={progressBarVariants({ tone })}\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress, progressBarVariants, progressTrackVariants };\n"],"mappings":";AAoIM;AAlIN,YAAY,uBAAuB;AACnC,SAAS,WAA8B;AAEvC,SAAS,UAAU;AAsFnB,MAAM,wBAAwB,IAAI,+EAA+E;AAAA,EAC/G,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AAED,MAAM,sBAAsB,IAAI,mEAAmE;AAAA,EACjG,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS;AAAA;AAAA,MAET,SAAS;AAAA,MACT,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AASD,SAAS,SAAS,EAAE,WAAW,OAAO,OAAO,WAAW,GAAG,MAAM,GAAkB;AACjF,SACE;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,WAAW,GAAG,sBAAsB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MACxD;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,QAAC,kBAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAW,oBAAoB,EAAE,KAAK,CAAC;AAAA,UACvC,OAAO,EAAE,WAAW,eAAe,OAAO,SAAS,EAAE,KAAK;AAAA;AAAA,MAC5D;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/index.d.ts

@@ -60,7 +60,7 @@ export { Menubar, MenubarCheckboxItem, MenubarCheckboxItemProps, MenubarContent,
 export { NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuIndicator, NavigationMenuIndicatorProps, NavigationMenuItem, NavigationMenuItemProps, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuList, NavigationMenuListProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport, NavigationMenuViewportProps, navigationMenuTriggerStyle } from './components/ui/navigation-menu.js';
 export { Pagination, PaginationContent, PaginationContentProps, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationProps } from './components/ui/pagination.js';
 export { Popover, PopoverAnchor, PopoverAnchorProps, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from './components/ui/popover.js';
-export { Progress, ProgressProps } from './components/ui/progress.js';
+export { Progress, ProgressProps, ProgressTone, progressBarVariants, progressTrackVariants } from './components/ui/progress.js';
 export { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from './components/ui/radio-group.js';
 export { ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupProps, ResizablePanelProps } from './components/ui/resizable.js';
 export { ScrollArea, ScrollAreaProps, ScrollBar, ScrollBarProps } from './components/ui/scroll-area.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comitor/ui",
-  "version": "0.6.2",
+  "version": "0.8.0",
   "description": "Comitor design system — Shadcn/UI tùy biến theo brand Comitor + component dùng chung cho hệ sinh thái SaaS (Tasks, Chat, CRM, HR…)",
   "license": "MIT",
   "type": "module",

package/styles.css

@@ -940,3 +940,20 @@
     display: none;
   }
 }
+
+/* ─ VẠCH CẢNH BÁO CHÉO — tín hiệu KHÔNG PHẢI MÀU cho `Progress tone="warning"` ─
+   Khoét những rãnh chéo xuyên qua phần đã chạy để nền rãnh lộ ra, nên nó KHÔNG thêm màu nào:
+   dùng `mask`, không dùng `background-image`, và hai chặn của mask là đen/trong suốt (kênh alpha,
+   không phải màu của bảng). Nhờ vậy chuỗi lớp của thanh vẫn chỉ có đúng một `bg-*` như ba tông
+   kia, và cổng màu đo nó y hệt các tông khác.
+
+   VÌ SAO CẦN: `--warning-ink` và `--primary-ink` gần như trùng nhau ở 3 trên 4 bảng màu (đo ở
+   chú thích đầu `progress.tsx`), nên tông warning KHÔNG thể phân biệt bằng màu. Rãnh chéo là cùng
+   một tín hiệu ấy nói bằng HÌNH, nên nó sống sót qua chế độ xám và qua mù màu — đúng WCAG 1.4.1.
+
+   6px đục / 3px rãnh: phần đã chạy vẫn đặc 2/3 nên vẫn đọc được TỈ LỆ, mà rãnh vẫn đủ rộng để
+   thấy ở thanh cao 8px. Tĩnh, KHÔNG chạy — vạch trôi là hiệu ứng vô nghĩa với `prefers-reduced-motion`. */
+@utility hazard-stripes {
+  -webkit-mask-image: repeating-linear-gradient(135deg, #000 0 6px, transparent 6px 9px);
+  mask-image: repeating-linear-gradient(135deg, #000 0 6px, transparent 6px 9px);
+}