@vestow/vue 0.1.0

package/src/variants/components/code-block.ts

@@ -0,0 +1,22 @@
+import type { TokenKind } from '../lib/highlight'
+
+/**
+ * Bảng class cho từng loại token của bộ tô cú pháp.
+ *
+ * Nằm ở đây chứ không ở component vì **cả hai cây đều vẽ cùng một bảng màu
+ * code**: nó là một bảng class, và luật của repo là bảng class thì thuộc
+ * `src/variants`. Trước đó nó nằm trong `CodeBlock.vue`, nên port sang
+ * React là chép lần thứ hai — đúng lớp lỗi mà package này sinh ra để dập.
+ *
+ * `text` và `punctuation` cố ý không khai màu: chúng lấy màu chữ của khối.
+ */
+export const codeTokenClass: Partial<Record<TokenKind, string>> = {
+  comment: 'text-code-comment italic',
+  keyword: 'text-code-keyword',
+  string: 'text-code-string',
+  number: 'text-code-number',
+  tag: 'text-code-tag',
+  component: 'text-code-component',
+  attr: 'text-code-entity',
+  function: 'text-code-entity',
+}

package/src/variants/components/dialog.ts

@@ -0,0 +1,28 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export const dialogContentVariants = cva(
+  [
+    'fixed left-1/2 top-1/2 z-(--z-overlay) flex w-full -translate-x-1/2 -translate-y-1/2 flex-col',
+    'surface max-h-[calc(100dvh-2rem)] gap-0 overflow-hidden rounded-lg border border-border bg-background shadow-lg',
+    // Reka expose data-state -> transition do CSS lo, không cần JS
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',
+    'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',
+    'duration-(--duration-base)',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'max-w-sm',
+        default: 'max-w-lg',
+        lg: 'max-w-2xl',
+        xl: 'max-w-4xl',
+        full: 'max-w-[calc(100vw-2rem)]',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+export type DialogContentVariants = VariantProps<typeof dialogContentVariants>

package/src/variants/components/empty.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+/**
+ * Trạng thái rỗng: bảng chưa có dữ liệu, bộ lọc không khớp gì, tìm kiếm không
+ * ra kết quả.
+ *
+ * `variant` quyết định **khung**, không phải màu:
+ * - `plain` — không viền, dùng khi nó nằm sẵn trong một Card hoặc trong thân bảng.
+ * - `dashed` — viền đứt, dùng khi nó là cả một vùng trống trên trang, kiểu "thả
+ *   file vào đây" hoặc "chưa tạo mục nào".
+ *
+ * S chỉ có `dashed`; đặt nó vào trong `<tbody>` của một bảng đã có viền là ra
+ * hai lớp viền lồng nhau.
+ */
+export const emptyVariants = cva(
+  'flex w-full min-w-0 flex-col items-center justify-center gap-4 text-balance text-center',
+  {
+    variants: {
+      variant: {
+        plain: 'px-6 py-10',
+        dashed: 'rounded-xl border border-dashed border-border p-10',
+      },
+
+      size: {
+        sm: 'gap-3 py-8',
+        default: '',
+      },
+    },
+
+    defaultVariants: {
+      variant: 'plain',
+      size: 'default',
+    },
+  },
+)
+
+/**
+ * Khung tròn bọc icon. Tách khỏi `Empty` để icon nào cũng ra cùng một cỡ mà
+ * không phải nhớ đặt class ở chỗ gọi.
+ */
+export const emptyMediaVariants = cva(
+  'flex shrink-0 items-center justify-center [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        // Vòng tròn có nền — icon đọc ra như một biểu tượng trạng thái.
+        muted: 'size-11 rounded-full bg-muted text-muted-foreground [&_svg]:size-5',
+        // Không nền, icon to hơn — dùng khi đã có viền đứt bao quanh, thêm một
+        // vòng tròn nữa thành hai hình lồng nhau.
+        plain: 'text-muted-foreground [&_svg]:size-8',
+      },
+    },
+    defaultVariants: { variant: 'muted' },
+  },
+)
+
+export type EmptyVariants = VariantProps<typeof emptyVariants>
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>

package/src/variants/components/field.ts

@@ -0,0 +1,35 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+/**
+ * Một ô nhập cùng nhãn và phần mô tả của nó.
+ *
+ * Khác `FormField`: `FormField` nối vào TanStack Form (giá trị, lỗi, chạm chưa),
+ * còn `Field` chỉ lo bố cục. Form thật thì lồng cái này trong cái kia.
+ *
+ * `responsive` xếp dọc rồi chuyển sang ngang khi NHÓM đủ rộng — container query,
+ * không phải media query, nên nó đúng cả khi form nằm trong một cột hẹp.
+ */
+export const fieldVariants = cva(
+  'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: '[&>*]:w-full [&>.sr-only]:w-auto flex-col',
+        horizontal: [
+          'flex-row items-center',
+          '[&>[data-slot=field-label]]:flex-auto',
+          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+        responsive: [
+          'flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto',
+          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
+          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        ],
+      },
+    },
+    defaultVariants: { orientation: 'vertical' },
+  },
+)
+
+export type FieldVariants = VariantProps<typeof fieldVariants>

package/src/variants/components/float-label.ts

@@ -0,0 +1,95 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+/**
+ * Nhãn nằm trong ô, rồi trôi lên khi ô có nội dung.
+ *
+ * Toàn bộ là CSS, không một dòng JS: `:has()` trên cái vỏ đọc trạng thái của ô
+ * nhập bên trong, và `[&>label]` chọn ra cái nhãn để dời nó. Đổi lại, **ô nhập
+ * bắt buộc phải có `placeholder`** — thường là một dấu cách — vì thứ CSS dùng
+ * để biết ô còn rỗng hay không chính là `:placeholder-shown`.
+ *
+ * Quên nó thì nhãn đứng nguyên ở vị trí đã trôi ngay từ đầu: không lỗi, không
+ * cảnh báo, chỉ là hiệu ứng không bao giờ chạy và ô trông như đang có sẵn giá trị.
+ *
+ * ## Hai selector, hai luật khác nhau — và đó không phải sơ suất
+ *
+ * | thứ | selector | vì sao |
+ * |---|---|---|
+ * | nhãn | `[&>label]` — CON TRỰC TIẾP | `Label` render ra `<label>` ở gốc |
+ * | ô nhập | `[&_input]` — HẬU DUỆ | `Input` bọc `<input>` trong một `<div class="relative">` |
+ *
+ * Viết `[&>input]` cho vế thứ hai là không khớp gì cả, mà cũng chẳng có gì báo.
+ *
+ * ## Không dùng cho textarea hay select
+ *
+ * `over` và `on` để nhãn nằm ĐÚNG hàng của giá trị lúc ô còn rỗng, nên với ô
+ * nhiều dòng thì nhãn rơi vào giữa vùng chữ. Còn select thì không có
+ * `:placeholder-shown` để mà đọc — trigger của nó là một cái nút. Cả hai trường
+ * hợp dùng `IftaLabel`, nơi nhãn không bao giờ chiếm hàng giá trị.
+ */
+export const floatLabelVariants = cva(
+  [
+    'relative w-full',
+
+    // Trạng thái nghỉ: nhãn nằm giữa ô, cùng cỡ chữ với giá trị.
+    '[&>label]:pointer-events-none [&>label]:absolute [&>label]:left-3 [&>label]:z-(--z-raised)',
+    '[&>label]:origin-left [&>label]:text-muted-foreground [&>label]:font-normal',
+    '[&>label]:transition-all [&>label]:duration-(--duration-base)',
+    '[&>label]:top-1/2 [&>label]:-translate-y-1/2 [&>label]:text-sm',
+
+    // Ô bị khoá thì nhãn phải mờ theo, nếu không nó đọc ra như một ô còn dùng được.
+    'has-[input:disabled]:[&>label]:opacity-50',
+
+    // Chuyển động phải tắt được — nhãn trôi là chuyển động, không phải trang trí.
+    'motion-reduce:[&>label]:transition-none',
+  ],
+  {
+    variants: {
+      variant: {
+        /** Trôi hẳn LÊN TRÊN ô. Mặc định, và là cái ít va chạm nhất. */
+        over: [
+          'has-[input:focus]:[&>label]:top-0 has-[input:focus]:[&>label]:-translate-y-[calc(100%_+_0.25rem)] has-[input:focus]:[&>label]:text-xs',
+          'has-[input:not(:placeholder-shown)]:[&>label]:top-0 has-[input:not(:placeholder-shown)]:[&>label]:-translate-y-[calc(100%_+_0.25rem)] has-[input:not(:placeholder-shown)]:[&>label]:text-xs',
+        ],
+
+        /**
+         * Trôi lên NẰM TRÊN đường viền, có một miếng nền che đoạn viền bên dưới.
+         *
+         * Miếng che đang giả vờ là một khoảng trống trên đường viền, nên nó phải
+         * đúng bằng màu của mặt nền phía sau. Mặc định là `--background`, và
+         * điều đó chỉ đúng khi ô nằm thẳng trên nền trang. Đo hai mặt nền trên
+         * cả năm bảng màu:
+         *
+         * | | `--background` | `--card` |
+         * |---|---|---|
+         * | sáng, bốn bảng | trắng | trắng — trùng, không thấy gì |
+         * | Solar sáng | 98,5% | trắng — lệch một chút |
+         * | **tối, cả năm bảng** | ~14,5% | ~21% — **lệch rõ** |
+         * | **kính** | đục | trong mờ — **lệch hẳn** |
+         *
+         * Nghĩa là lỗi này ẩn mình ở chế độ sáng rồi hiện ra thành một vệt tối
+         * ngay khi ai đó bật theme tối. Đổi màu bằng BIẾN, đừng bằng class:
+         * chuỗi gốc nằm sau `has-[…]` nên `[&>label]:bg-card` viết thêm vào
+         * `class` thua về specificity, còn `[--float-label-patch:var(--card)]`
+         * thì nằm trên chính cái vỏ nên thắng.
+         */
+        on: [
+          '[--float-label-patch:var(--background)]',
+          'has-[input:focus]:[&>label]:top-0 has-[input:focus]:[&>label]:-translate-y-1/2 has-[input:focus]:[&>label]:text-xs has-[input:focus]:[&>label]:bg-(--float-label-patch) has-[input:focus]:[&>label]:px-1',
+          'has-[input:not(:placeholder-shown)]:[&>label]:top-0 has-[input:not(:placeholder-shown)]:[&>label]:-translate-y-1/2 has-[input:not(:placeholder-shown)]:[&>label]:text-xs has-[input:not(:placeholder-shown)]:[&>label]:bg-(--float-label-patch) has-[input:not(:placeholder-shown)]:[&>label]:px-1',
+        ],
+
+        /** Trôi lên nhưng Ở LẠI TRONG ô — nên ô phải cao thêm để có chỗ. */
+        in: [
+          '[&_input]:h-13 [&_input]:pt-6 [&_input]:pb-2',
+          'has-[input:focus]:[&>label]:top-1.5 has-[input:focus]:[&>label]:translate-y-0 has-[input:focus]:[&>label]:text-xs',
+          'has-[input:not(:placeholder-shown)]:[&>label]:top-1.5 has-[input:not(:placeholder-shown)]:[&>label]:translate-y-0 has-[input:not(:placeholder-shown)]:[&>label]:text-xs',
+        ],
+      },
+    },
+    defaultVariants: { variant: 'over' },
+  },
+)
+
+export type FloatLabelVariants = VariantProps<typeof floatLabelVariants>

package/src/variants/components/input-group.ts

@@ -0,0 +1,73 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+import { focusRingWithin, invalidRingWithin } from '../lib/focus'
+
+/**
+ * Ghép ô nhập với phần phụ ở hai đầu: tiền tố `https://`, đơn vị `kg`, một icon,
+ * hay một nút.
+ *
+ * **Khác `ButtonGroup` ở chỗ cốt lõi**: nhóm nút giữ viền của từng nút rồi gộp
+ * lại; nhóm nhập thì **cả nhóm** sở hữu viền và vòng focus, còn ô nhập bên
+ * trong bị lột sạch viền/nền/ring. Nếu để ô nhập giữ ring của nó thì lúc gõ chỉ
+ * một mảnh giữa control sáng lên, phần phụ hai bên đứng ngoài — đọc ra thành hai
+ * thứ rời nhau chứ không phải một control.
+ */
+export const inputGroupVariants = cva(
+  [
+    'flex w-full items-stretch overflow-hidden rounded-md border border-input bg-background shadow-xs',
+    'transition-colors',
+    focusRingWithin,
+    'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
+    invalidRingWithin,
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'h-(--ui-field-height-sm) text-(length:--ui-field-text-sm)',
+        default: 'h-(--ui-field-height-md) text-sm',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+export const inputGroupAddonVariants = cva(
+  'flex shrink-0 select-none items-center gap-1.5 whitespace-nowrap text-muted-foreground [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        /** Nhãn chữ có nền xám, ngăn với ô nhập bằng một đường kẻ. */
+        text: 'bg-muted',
+        /** Chỉ có phần đệm — dùng cho icon nằm trong ô, hoặc để nhét nút vào. */
+        plain: 'bg-transparent',
+      },
+
+      align: {
+        start: '',
+        end: '',
+      },
+
+      size: {
+        sm: 'px-2 text-[12px] [&_svg]:size-3.5',
+        default: 'px-2.5 text-sm [&_svg]:size-4',
+      },
+    },
+
+    // Đường kẻ chỉ vẽ ở CẠNH GIÁP ô nhập, và chỉ khi phần phụ có nền — icon
+    // trong ô mà kẻ thêm một vạch thì thành cái nhóm hai ngăn.
+    compoundVariants: [
+      { variant: 'text', align: 'start', class: 'border-r border-input' },
+      { variant: 'text', align: 'end', class: 'border-l border-input' },
+    ],
+
+    defaultVariants: {
+      variant: 'text',
+      align: 'start',
+      size: 'default',
+    },
+  },
+)
+
+export type InputGroupVariants = VariantProps<typeof inputGroupVariants>
+
+export type InputGroupAddonVariants = VariantProps<typeof inputGroupAddonVariants>

package/src/variants/components/input-password.ts

@@ -0,0 +1,68 @@
+/**
+ * Thang đo độ mạnh mật khẩu: bảng class của từng nấc, và hàm chấm điểm.
+ *
+ * Nằm ở đây vì `STRENGTH_LEVELS` **là một bảng class** — `bg-destructive`,
+ * `text-warning-soft-foreground` — và luật của repo là bảng class thì thuộc
+ * `src/variants`. Hai cây đọc chung một bảng nên thanh đo của bản Vue và
+ * bản React không thể trôi khỏi nhau.
+ */
+
+/**
+ * Một nấc của thanh đo: màu thanh, màu chữ, và khoá chuỗi.
+ *
+ * Nấc 0 là ô rỗng — nó có mặt trong mảng để `STRENGTH_LEVELS[score]` không phải
+ * cộng trừ chỉ số ở chỗ đọc, nhưng chữ của nó không bao giờ hiện ra.
+ */
+export interface StrengthLevel {
+  key: string
+  bar: string
+  text: string
+}
+
+export const STRENGTH_LEVELS: readonly StrengthLevel[] = [
+  { key: 'ui.inputPassword.weak', bar: 'bg-muted', text: 'text-muted-foreground' },
+  { key: 'ui.inputPassword.weak', bar: 'bg-destructive', text: 'text-destructive-soft-foreground' },
+  { key: 'ui.inputPassword.fair', bar: 'bg-warning', text: 'text-warning-soft-foreground' },
+  { key: 'ui.inputPassword.good', bar: 'bg-info', text: 'text-info-soft-foreground' },
+  { key: 'ui.inputPassword.strong', bar: 'bg-success', text: 'text-success-soft-foreground' },
+]
+
+/**
+ * Chấm mật khẩu ra một nấc từ 0 tới 4, theo ĐỘ DÀI và SỐ NHÓM KÝ TỰ.
+ *
+ * Đây là một lời nhắc, không phải một phép đo an toàn. Nó không biết
+ * `Password1!` nằm trong mọi bộ từ điển rò rỉ, cũng không biết `correct horse
+ * battery staple` mạnh hơn hẳn dù chỉ có đúng một nhóm ký tự. Chấm cho đúng cần
+ * một bộ từ điển và một mô hình entropy — tức một dependency, mà repo này phải
+ * hỏi trước khi thêm.
+ *
+ * Vì vậy đừng bao giờ CHẶN theo nấc này. Nó chỉ có việc nói cho người đang gõ
+ * biết họ vừa làm mật khẩu dài thêm hay đa dạng thêm; luật thật thì đặt ở
+ * schema, và đặt ở server.
+ */
+export function scoreOf(value: string): number {
+  if (value.length === 0)
+    return 0
+
+  let groups = 0
+  if (/[a-z]/.test(value))
+    groups += 1
+  if (/[A-Z]/.test(value))
+    groups += 1
+  if (/\d/.test(value))
+    groups += 1
+  // `\W` coi `_` là ký tự chữ, nên một mật khẩu chỉ thêm dấu gạch dưới sẽ không
+  // được tính là có nhóm ký hiệu. Liệt kê thẳng hai nhóm kia rồi phủ định.
+  if (/[^a-z0-9]/i.test(value))
+    groups += 1
+
+  let score = 1
+  if (value.length >= 8 && groups >= 2)
+    score = 2
+  if (value.length >= 10 && groups >= 3)
+    score = 3
+  if (value.length >= 12 && groups >= 4)
+    score = 4
+
+  return score
+}

package/src/variants/components/kbd.ts

@@ -0,0 +1,47 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+/**
+ * Một phím trên bàn phím.
+ *
+ * Dùng **font chữ thường, không phải font mono** — giống S, và có lý do: các
+ * glyph ⌘ ⇧ ⌥ ⌃ trong font mono thường thiếu hoặc lệch chiều rộng ô, nên hàng
+ * phím trông so le. Geist có đủ bộ đó.
+ *
+ * `min-w` bằng đúng chiều cao nên phím một ký tự ra hình vuông, phím nhiều ký
+ * tự thì giãn ra — không phải khai riêng biến thể "phím rộng".
+ */
+export const kbdVariants = cva(
+  [
+    'pointer-events-none inline-flex w-fit select-none items-center justify-center gap-1',
+    'rounded font-sans font-medium text-muted-foreground',
+    '[&_svg]:size-3 [&_svg]:shrink-0',
+  ],
+  {
+    variants: {
+      size: {
+        // Giãn dòng phải khai TƯỜNG MINH bên cạnh mọi `text-[Npx]`: cỡ chữ tuỳ ý
+        // chỉ đặt `font-size`, nên line box rơi lui về giá trị thừa kế và chữ lệch
+        // trong một hộp CAO CỐ ĐỊNH. Cùng lỗi đã đo ở `badge.ts` — xem ghi chú ở đó.
+        sm: 'h-4 min-w-4 px-1 text-[10px] leading-none',
+        default: 'h-5 min-w-5 px-1 text-xs',
+      },
+
+      tone: {
+        // Nền xám, dùng khi phím nằm trên nền trang hoặc trong menu.
+        muted: 'bg-muted',
+        // Trong suốt có viền, dùng khi phím nằm trên một mặt đã có nền xám —
+        // ví dụ ô tìm kiếm ở header, nơi `bg-muted` chồng lên `bg-secondary`
+        // gần như biến mất.
+        outline: 'border border-border bg-transparent',
+      },
+    },
+
+    defaultVariants: {
+      size: 'default',
+      tone: 'muted',
+    },
+  },
+)
+
+export type KbdVariants = VariantProps<typeof kbdVariants>

package/src/variants/components/picker-trigger.ts

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority'
+
+/**
+ * Nút mở của những ô chọn dựng trên `Popover` — `TreeSelect` và `CascadeSelect`.
+ *
+ * Chuỗi này trước đó được chép nguyên văn ở hai component bản Vue, và bản React
+ * sẽ là bản thứ ba với thứ tư. Cùng lớp lỗi với `lib/focus`: mười ba chỗ chép
+ * một chuỗi thì mười ba chỗ tự do trôi khỏi nhau.
+ *
+ * **`Select` cố ý ĐỨNG NGOÀI.** Nó dùng `min-h-8` / `min-h-9` chứ không `h-8` /
+ * `h-9`, vì một giá trị dài phải đẩy nút cao lên thay vì bị cắt — mà hai ô chọn
+ * ở đây luôn hiện đúng một dòng đã cắt bớt. Gộp là đổi hành vi của `Select`.
+ * Xem mục "cỡ `sm` của ô nhập đã trôi thành BA số" trong CLAUDE.md.
+ */
+export const pickerTriggerVariants = cva(
+  [
+    'flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-colors',
+    'data-[placeholder]:text-muted-foreground',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'h-8',
+        default: 'h-9',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)

package/src/variants/components/radio-group.ts

@@ -0,0 +1,63 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+/**
+ * Nút chọn một trong nhiều. Hai trục **giống hệt Checkbox** — cùng thang cỡ,
+ * cùng tên kiểu tô — vì hai control này luôn đứng cạnh nhau trong một biểu mẫu,
+ * lệch nhau một pixel là thấy ngay.
+ *
+ * - `size` — `sm` 14px, `md` 16px (mặc định), `lg` 20px.
+ * - `tone` — `outline` nền trong, `filled` nền xám khi chưa chọn.
+ *
+ * Không có trục màu: đã chọn thì luôn là primary. Lỗi đi qua `invalid` vì nó là
+ * trạng thái xác thực, không phải một lựa chọn thiết kế.
+ */
+export const radioGroupItemVariants = cva(
+  [
+    'peer inline-flex shrink-0 items-center justify-center rounded-full border shadow-xs',
+    'transition-[color,background-color,border-color] duration-(--ui-control-duration)',
+    'focus-visible:outline-none',
+    'disabled:cursor-not-allowed disabled:opacity-50',
+  ],
+  {
+    variants: {
+      // Chấm bên trong tô bằng selector con chứ không phải một cva riêng: nó
+      // không bao giờ đứng một mình, và để chung thì đổi cỡ chỉ sửa một dòng.
+      size: {
+        sm: 'size-3.5 [&_[data-dot]]:size-1.5',
+        md: 'size-4 [&_[data-dot]]:size-2',
+        lg: 'size-5 [&_[data-dot]]:size-2.5',
+      },
+
+      tone: {
+        outline: 'bg-background',
+        filled: 'bg-muted',
+      },
+
+      /**
+       * Khai thành một trục của cva chứ không dùng `aria-invalid:` — lớp đã chọn
+       * và lớp lỗi cùng tô `background-color`, mà thứ tự thắng thua giữa hai
+       * variant của Tailwind do thứ tự trong stylesheet quyết định chứ không
+       * phải thứ tự mình viết. Gộp vào một nhánh thì không còn gì để đoán.
+       */
+      invalid: {
+        false: [
+          'border-input focus-visible:shadow-focus',
+          'data-[state=checked]:border-primary data-[state=checked]:bg-primary',
+        ],
+        true: [
+          'border-destructive focus-visible:shadow-focus-invalid',
+          'data-[state=checked]:border-destructive data-[state=checked]:bg-destructive',
+        ],
+      },
+    },
+
+    defaultVariants: {
+      size: 'md',
+      tone: 'outline',
+      invalid: false,
+    },
+  },
+)
+
+export type RadioGroupItemVariants = VariantProps<typeof radioGroupItemVariants>

package/src/variants/components/sheet.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export const sheetContentVariants = cva(
+  [
+    'fixed z-(--z-overlay) flex flex-col gap-0 bg-background shadow-lg transition ease-in-out',
+    'data-[state=open]:animate-in data-[state=closed]:animate-out',
+    'data-[state=open]:duration-(--duration-slow) data-[state=closed]:duration-(--duration-base)',
+  ],
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 h-auto max-h-[80dvh] border-b border-border data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top',
+        bottom: 'inset-x-0 bottom-0 h-auto max-h-[80dvh] border-t border-border data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 max-w-sm border-r border-border data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',
+        right: 'inset-y-0 right-0 h-full w-3/4 max-w-sm border-l border-border data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
+      },
+    },
+    defaultVariants: { side: 'right' },
+  },
+)
+
+export type SheetContentVariants = VariantProps<typeof sheetContentVariants>

package/src/variants/components/sidebar.ts

@@ -0,0 +1,33 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export const sidebarMenuButtonVariants = cva(
+  [
+    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring',
+    'transition-[width,height,padding]',
+    'group-has-data-[sidebar=menu-action]/menu-item:pr-8',
+    'group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!',
+    'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',
+    'active:bg-sidebar-accent active:text-sidebar-accent-foreground',
+    'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+    'data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground',
+    'data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground',
+    '[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  ],
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline: 'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+)
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>

package/src/variants/components/slider.ts

@@ -0,0 +1,49 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+/**
+ * Ba cỡ. S chỉ có một (rãnh 4px / núm 12px); P có `small` và `large` nhưng đổi
+ * cả hai chiều theo một hệ số. Ở đây tách rõ: rãnh dày lên chậm hơn núm, vì
+ * rãnh quá dày trông như thanh tiến độ chứ không còn ra thanh kéo.
+ *
+ * Cỡ khai ở `Slider`, hai lớp con đọc lại qua cva chứ không truyền prop.
+ */
+export const sliderTrackVariants = cva(
+  // `ui-slider-track` / `ui-slider-thumb` là móc để surfaces.css dựng ba mặt
+  // kính (rãnh lõm, phần đã chọn, núm nổi). Ngoài theme glass không khớp rule nào.
+  'ui-slider-track relative grow overflow-hidden rounded-full bg-slider-track select-none',
+  {
+    variants: {
+      size: {
+        sm: 'data-[orientation=horizontal]:h-1 data-[orientation=vertical]:w-1',
+        md: 'data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5',
+        lg: 'data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+)
+
+export const sliderThumbVariants = cva(
+  [
+    'ui-slider-thumb block shrink-0 rounded-full border border-slider-thumb-border bg-slider-thumb shadow-sm transition-[box-shadow,transform]',
+    // Vùng bấm nới rộng ra ngoài mà không đổi kích thước hình vẽ — núm 12px là
+    // quá nhỏ so với mục tiêu chạm 24px mà WCAG khuyến nghị.
+    'relative after:absolute after:-inset-2',
+    'hover:ring-4 hover:ring-ring/20',
+    'focus-visible:outline-none focus-visible:border-ring focus-visible:ring-0 focus-visible:shadow-focus',
+    'disabled:pointer-events-none',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'size-3',
+        md: 'size-4',
+        lg: 'size-5',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  },
+)
+
+export type SliderVariants = VariantProps<typeof sliderTrackVariants>