@vestow/vue 0.1.0

package/src/components/chart/types.ts

@@ -0,0 +1,52 @@
+import type { Component, InjectionKey, Ref } from 'vue'
+import type { ChartSeriesConfig, ChartBaseProps as SharedChartBaseProps } from '../../variants/lib/chart/types'
+
+/**
+ * Bộ kiểu dùng chung nằm ở `src/variants/lib/chart/types` — nó mô tả dữ
+ * liệu và tuỳ chọn hiển thị, không dính framework nào. Ở đây chỉ còn hai thứ
+ * CÓ dính: kiểu của `icon` trong config, và context của `ChartContainer`.
+ */
+export type {
+  ChartCurve,
+  ChartLabelKey,
+  ChartSeriesConfig,
+  ChartTickFormatter,
+  ChartTooltipOptions,
+  ChartTooltipRow,
+  ChartValueFormatter,
+} from '../../variants/lib/chart/types'
+
+/** `icon` thu hẹp lại thành component của Vue. */
+export interface ChartSeries extends Omit<ChartSeriesConfig, 'icon'> {
+  icon?: Component
+}
+
+/** Khoá của object là khoá trong dữ liệu. */
+export type ChartConfig = Record<string, ChartSeries>
+
+/**
+ * Prop dùng chung của mọi biểu đồ trục XY, đã chốt `config` về bản của Vue.
+ *
+ * `ChartBaseProps` ở tầng chung generic theo kiểu config đúng vì lý do này:
+ * `icon` là `unknown` ở đó và là `Component` ở đây, nên không generic thì
+ * `ChartConfig` của hai tầng không gán được cho nhau.
+ */
+export type ChartBaseProps<T extends Record<string, unknown>>
+  = SharedChartBaseProps<T, ChartConfig>
+
+/**
+ * Config được ChartContainer đưa xuống cho con.
+ *
+ * `colorOf` trả về chuỗi `var(--color-<key>)` chứ không phải màu đã resolve:
+ * biến đó do chính ChartContainer khai trên thẻ bọc, nên đổi theme hay đổi bảng
+ * màu là SVG tự đổi theo cascade, không cần đọc lại bằng JS.
+ */
+export interface ChartContext {
+  config: ChartConfig
+  colorOf: (key: string) => string
+  labelOf: (key: string) => string
+  /** Con trỏ đang ở trong khung biểu đồ. Dùng để nhả tooltip đã ghim ra. */
+  hovered: Ref<boolean>
+}
+
+export const CHART_CONTEXT_KEY: InjectionKey<ChartContext> = Symbol('woodblock-chart')

package/src/components/chart/useChartSeries.ts

@@ -0,0 +1,138 @@
+import type { Ref } from 'vue'
+import type { ChartBaseProps, ChartCurve } from './types'
+import { CurveType } from '@unovis/ts'
+import { computed, onMounted, ref } from 'vue'
+
+/** Ba lựa chọn rút gọn -> tên đầy đủ trong enum của Unovis. */
+const CURVE_MAP: Record<ChartCurve, CurveType> = {
+  monotone: CurveType.MonotoneX,
+  natural: CurveType.Natural,
+  linear: CurveType.Linear,
+  step: CurveType.StepAfter,
+}
+
+export function toCurveType(curve: ChartCurve): CurveType {
+  return CURVE_MAP[curve]
+}
+
+function toNumber(value: unknown): number {
+  const n = Number(value)
+  return Number.isFinite(n) ? n : 0
+}
+
+/** Số nhãn tối đa trên trục hoành trước khi bắt đầu bỏ bớt. */
+const MAX_X_TICKS = 12
+
+/**
+ * Nhận GETTER chứ không nhận giá trị: hook đọc chúng bên trong `computed`, nên
+ * truyền giá trị trần sẽ đóng băng ở lần gọi đầu và đổi `stacked` lúc chạy
+ * không có tác dụng.
+ */
+export interface UseChartSeriesOptions {
+  stacked?: () => boolean
+  /** Chuẩn hoá mỗi cột về 100% — dùng cho biểu đồ "stacked expanded". */
+  expand?: () => boolean
+}
+
+/**
+ * Chuẩn bị dữ liệu vẽ dùng chung cho Area và Bar.
+ *
+ * Xếp chồng được tính SẴN THÀNH CỘT `__base_<key>` / `__value_<key>` / `__top_<key>` thay vì
+ * truyền mảng accessor `y` cho Unovis. Lý do: truyền mảng thì mọi lớp nằm chung
+ * một component nên chỉ đặt được MỘT `fill`, tức mất khả năng cho từng chuỗi
+ * một gradient riêng — mà gradient chính là thứ gallery area của shadcn dựa vào.
+ * Tách ra từng lớp rồi neo bằng `baseline` thì vừa chồng đúng, vừa tô riêng được.
+ */
+export function useChartSeries<T extends Record<string, unknown>>(
+  props: ChartBaseProps<T>,
+  options: UseChartSeriesOptions = {},
+): {
+  categories: Ref<string[]>
+  plotData: Ref<Record<string, unknown>[]>
+  xTicks: Ref<number[]>
+  isMounted: Ref<boolean>
+  valueOf: (key: string) => (d: Record<string, unknown>) => number
+  topOf: (key: string) => (d: Record<string, unknown>) => number
+  baseOf: (key: string) => (d: Record<string, unknown>) => number
+} {
+  // Bỏ trống `categories` thì lấy đúng các khoá trong `config`, giữ nguyên thứ tự
+  // khai báo — nhờ vậy màu, legend và thứ tự chồng lớp luôn khớp nhau.
+  const categories = computed(() => props.categories ?? Object.keys(props.config))
+
+  const plotData = computed<Record<string, unknown>[]>(() => {
+    const stacked = options.stacked?.() ?? false
+    const expand = options.expand?.() ?? false
+
+    return props.data.map((row, rowIndex) => {
+      // `__i` là chỉ số hàng, ghi sẵn vào dữ liệu.
+      // Cần vì `VisXYLabels` gọi accessor `x` KHÔNG truyền chỉ số
+      // (`getNumber(data, config.x)`), khác với Area/Line/Bar. Dùng
+      // `(_d, i) => i` ở đó sẽ ra NaN và Unovis lặng lẽ loại hết nhãn khỏi
+      // vùng vẽ — nhóm `xy-labels` render ra rỗng, không một cảnh báo nào.
+      const out: Record<string, unknown> = { ...row, __i: rowIndex }
+
+      if (!stacked) {
+        categories.value.forEach((key) => {
+          const raw = toNumber(row[key])
+          out[`__base_${key}`] = 0
+          out[`__value_${key}`] = raw
+          out[`__top_${key}`] = raw
+        })
+        return out
+      }
+
+      const total = expand
+        ? categories.value.reduce((sum, key) => sum + toNumber(row[key]), 0)
+        : 1
+
+      let acc = 0
+      categories.value.forEach((key) => {
+        const raw = toNumber(row[key])
+        const value = expand ? (total === 0 ? 0 : raw / total) : raw
+        out[`__base_${key}`] = acc
+        out[`__value_${key}`] = value
+        acc += value
+        out[`__top_${key}`] = acc
+      })
+      return out
+    })
+  })
+
+  /**
+   * Trục hoành chạy theo CHỈ SỐ, nên phải tự khai mốc chia.
+   * Để d3 tự chọn thì nó ra mốc lẻ như 0,5 hay 1,5 — mà chỉ số lẻ không ứng với
+   * điểm dữ liệu nào, nhãn hiện ra là chuỗi rỗng hoặc lặp lại.
+   */
+  const xTicks = computed(() => {
+    const n = plotData.value.length
+    if (n === 0)
+      return []
+    const stride = Math.max(1, Math.ceil(n / MAX_X_TICKS))
+    const ticks: number[] = []
+    for (let i = 0; i < n; i += stride)
+      ticks.push(i)
+    return ticks
+  })
+
+  // Trước khi mount, `height: 100%` tính theo một thẻ cha cao 0px nên biểu đồ ra
+  // 0px rồi không tự vẽ lại. Chờ mount xong mới trao chiều cao thật.
+  const isMounted = ref(false)
+  onMounted(() => {
+    isMounted.value = true
+  })
+
+  /**
+   * `valueOf` là ĐỘ CAO tính từ baseline, không phải toạ độ đỉnh.
+   *
+   * `getStackedData` của Unovis chồng theo kiểu `[base, base + y]`, nên đưa toạ
+   * độ đỉnh vào `y` sẽ cộng dồn thêm một lần nữa: lớp thứ hai vọt lên
+   * `base + top` thay vì dừng ở `top`. Lỗi này KHÔNG báo gì cả, biểu đồ vẫn vẽ
+   * ra một hình hợp lý — chỉ sai số. Dùng `topOf` cho thứ vẽ theo toạ độ tuyệt
+   * đối (đường kẻ), `valueOf` + `baseOf` cho thứ có xếp chồng (vùng).
+   */
+  const valueOf = (key: string) => (d: Record<string, unknown>): number => toNumber(d[`__value_${key}`])
+  const topOf = (key: string) => (d: Record<string, unknown>): number => toNumber(d[`__top_${key}`])
+  const baseOf = (key: string) => (d: Record<string, unknown>): number => toNumber(d[`__base_${key}`])
+
+  return { categories, plotData, xTicks, isMounted, valueOf, topOf, baseOf }
+}

package/src/components/chart/xy-label.ts

@@ -0,0 +1,5 @@
+/**
+ * Lên `src/variants/lib/chart/xy-label` — hình học / ghép chuỗi thuần,
+ * không dính framework nào, nên cả hai cây đọc chung một bản.
+ */
+export * from '../../variants/lib/chart/xy-label'

package/src/components/checkbox/Checkbox.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { CheckboxVariants } from './index'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Check, Minus } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { checkboxVariants, injectCheckboxGroupContext } from './index'
+
+const props = withDefaults(
+  defineProps<CheckboxRootProps & ClassProps & {
+    size?: CheckboxVariants['size']
+    tone?: CheckboxVariants['tone']
+    /** Viền đỏ + `aria-invalid`. Trong `FormField` thì không cần khai — xem dưới. */
+    invalid?: boolean
+  }>(),
+  // Vue mặc định gán `false` cho prop kiểu Boolean khi không khai. Ở đây phải là
+  // `undefined` mới phân biệt được "không khai" với "khai là false" — `false` sẽ
+  // chặn mất cả nhóm lẫn `aria-invalid` trong chuỗi `??` bên dưới.
+  { invalid: undefined },
+)
+
+const emits = defineEmits<CheckboxRootEmits>()
+
+defineSlots<{
+  /** Thay glyph trong ô. Nhận trạng thái để tự đổi hình khi indeterminate. */
+  indicator?: (props: { state: boolean | 'indeterminate' }) => unknown
+}>()
+
+// Nằm trong CheckboxGroup thì kế thừa cỡ, kiểu tô và trạng thái lỗi của nhóm.
+// Prop khai thẳng trên từng ô vẫn thắng.
+const group = injectCheckboxGroupContext(null)
+
+const size = computed(() => props.size ?? group?.size.value)
+const tone = computed(() => props.tone ?? group?.tone.value)
+const invalid = computed(() => props.invalid ?? group?.invalid.value)
+
+/**
+ * `v-bind="field"` của FormField truyền `aria-invalid` xuống dưới dạng **attr**,
+ * nên đọc luôn ở đây: control trong form tự đỏ viền, không phải nối tay `invalid`.
+ *
+ * Phải gọi trong template chứ không bọc thành computed: `useAttrs()` KHÔNG phản
+ * ứng — computed đọc nó sẽ nhớ đúng giá trị lúc render đầu rồi đứng im, nên ô
+ * vẫn viền xám sau khi form báo lỗi. Đọc `$attrs` ngay lúc render thì mỗi lần
+ * attr đổi, component render lại và giá trị tính lại theo.
+ */
+function resolveInvalid(attrs: Record<string, unknown>): boolean {
+  return invalid.value ?? (attrs['aria-invalid'] === true || attrs['aria-invalid'] === 'true')
+}
+
+// Tách `class` và ba prop trình bày ra khỏi props trước khi forward: chúng
+// không thuộc CheckboxRoot, để lọt xuống sẽ thành thuộc tính lạ trên DOM.
+const delegated = computed(() => {
+  const { class: _class, size: _size, tone: _tone, invalid: _invalid, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="{ state }"
+    v-bind="forwarded"
+    :aria-invalid="resolveInvalid($attrs) || undefined"
+    :data-invalid="resolveInvalid($attrs) || undefined"
+    :class="cn(checkboxVariants({ size, tone, invalid: resolveInvalid($attrs) }), props.class)"
+  >
+    <!-- Indicator chỉ tồn tại khi đã chọn, nên animate-in chạy đúng một lần lúc
+         nó xuất hiện — không cần transition-group hay forceMount. -->
+    <CheckboxIndicator
+      class="flex size-full animate-in items-center justify-center text-current zoom-in-50 duration-(--duration-fast) motion-reduce:animate-none"
+    >
+      <slot name="indicator" :state="state">
+        <Minus v-if="state === 'indeterminate'" />
+        <Check v-else />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/src/components/checkbox/CheckboxField.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { CheckboxVariants } from './index'
+import { useForwardPropsEmits } from 'reka-ui'
+import { computed, useId } from 'vue'
+import { cn } from '../../lib/utils'
+import Label from '../label/Label.vue'
+import Checkbox from './Checkbox.vue'
+import { injectCheckboxGroupContext } from './index'
+
+/**
+ * Attr rơi tự do phải đi xuống Ô, không đọng lại ở div bọc ngoài: `v-bind="field"`
+ * của FormField truyền `aria-invalid` và `aria-describedby` dưới dạng attr, mà
+ * cả hai đều tả cái ô chứ không tả cái hàng.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<CheckboxRootProps & ClassProps & {
+    size?: CheckboxVariants['size']
+    tone?: CheckboxVariants['tone']
+    invalid?: boolean
+    /** Nhãn. Cần đánh dấu chữ (ví dụ chèn link) thì dùng slot mặc định. */
+    label?: string
+    /** Dòng phụ bên dưới nhãn. */
+    description?: string
+  }>(),
+  // Vue mặc định gán `false` cho prop kiểu Boolean khi không khai. Ở đây phải là
+  // `undefined` mới phân biệt được "không khai" với "khai là false" — `false` sẽ
+  // chặn mất cả nhóm lẫn `aria-invalid` trong chuỗi `??` bên dưới.
+  { invalid: undefined },
+)
+
+const emits = defineEmits<CheckboxRootEmits>()
+
+defineSlots<{
+  default?: () => unknown
+  description?: () => unknown
+  indicator?: (props: { state: boolean | 'indeterminate' }) => unknown
+}>()
+
+const group = injectCheckboxGroupContext(null)
+
+const fallbackId = useId()
+const controlId = computed(() => props.id ?? fallbackId)
+const descriptionId = computed(() => `${controlId.value}-description`)
+
+const hasDescription = computed(() => Boolean(props.description))
+
+/**
+ * Nối chứ không ghi đè: field trong form đã trỏ sang thông báo lỗi rồi.
+ *
+ * Nhận `attrs` làm tham số để gọi thẳng trong template — `useAttrs()` không phản
+ * ứng, bọc vào computed là giá trị đứng im ở lần render đầu (xem Checkbox.vue).
+ */
+function resolveDescribedBy(attrs: Record<string, unknown>): string | undefined {
+  const external = typeof attrs['aria-describedby'] === 'string' ? attrs['aria-describedby'] : undefined
+  const ids = [external, hasDescription.value ? descriptionId.value : undefined].filter(Boolean)
+  return ids.length > 0 ? ids.join(' ') : undefined
+}
+
+const size = computed(() => props.size ?? group?.size.value ?? 'md')
+
+/**
+ * Đẩy ô xuống cho tâm nó thẳng hàng với dòng chữ ĐẦU TIÊN của nhãn, không phải
+ * với cả khối. Nhãn là `text-sm` nên dòng cao 20px, tâm ở 10px: ô 14px lệch
+ * 3px, ô 16px lệch 2px, ô 20px vừa khít.
+ */
+const alignClass = computed(() => ({
+  sm: 'mt-[3px]',
+  md: 'mt-0.5',
+  lg: 'mt-0',
+}[size.value ?? 'md']))
+
+const delegated = computed(() => {
+  const {
+    class: _class,
+    size: _size,
+    tone: _tone,
+    invalid: _invalid,
+    label: _label,
+    description: _description,
+    ...rest
+  } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <div :class="cn('flex items-start gap-2.5', props.class)">
+    <Checkbox
+      v-bind="{ ...forwarded, ...$attrs }"
+      :id="controlId"
+      :size="props.size"
+      :tone="props.tone"
+      :invalid="props.invalid"
+      :aria-describedby="resolveDescribedBy($attrs)"
+      :class="alignClass"
+    >
+      <template v-if="$slots.indicator" #indicator="slotProps">
+        <slot name="indicator" v-bind="slotProps" />
+      </template>
+    </Checkbox>
+
+    <div class="flex flex-col gap-1">
+      <!-- `for` trỏ vào chính ô: <button> là labelable element nên bấm vào chữ
+           cũng bật/tắt được, không phải bọc ô vào trong <label>. -->
+      <Label
+        :for="controlId"
+        :class="props.disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'"
+      >
+        <slot>{{ props.label }}</slot>
+      </Label>
+
+      <p
+        v-if="hasDescription || $slots.description"
+        :id="descriptionId"
+        :class="cn('text-xs leading-snug text-muted-foreground', props.disabled && 'opacity-50')"
+      >
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </div>
+</template>

package/src/components/checkbox/CheckboxGroup.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts" generic="T extends AcceptableValue = AcceptableValue">
+import type { AcceptableValue, CheckboxGroupRootEmits, CheckboxGroupRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { CheckboxVariants } from './index'
+import { CheckboxGroupRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { provideCheckboxGroupContext } from './index'
+
+const props = withDefaults(
+  defineProps<CheckboxGroupRootProps<T> & ClassProps & {
+    size?: CheckboxVariants['size']
+    tone?: CheckboxVariants['tone']
+    invalid?: boolean
+  }>(),
+  {
+    orientation: 'vertical',
+    invalid: false,
+    /**
+     * Reka mặc định `true` — mỗi nhóm chỉ một điểm dừng Tab, di chuyển bằng
+     * phím mũi tên. Đó là khuôn của **radio group**: ở đó chọn cái này là bỏ
+     * cái kia nên đi qua cả nhóm bằng mũi tên là hợp lý.
+     *
+     * Ô đánh dấu thì độc lập với nhau, và WAI-ARIA APG xếp **từng ô** vào chuỗi
+     * Tab. Bật roving focus sẽ khiến người dùng bàn phím bỏ sót các ô còn lại
+     * nếu họ chỉ nhấn Tab. Cần khuôn kia thì khai `roving-focus` tường minh.
+     */
+    rovingFocus: false,
+  },
+)
+
+const emits = defineEmits<CheckboxGroupRootEmits<T>>()
+
+const delegated = computed(() => {
+  const { class: _class, size: _size, tone: _tone, invalid: _invalid, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+// Cỡ và kiểu tô khai một lần ở nhóm, từng ô con khỏi lặp lại.
+provideCheckboxGroupContext({
+  size: computed(() => props.size),
+  tone: computed(() => props.tone),
+  invalid: computed(() => props.invalid),
+})
+</script>
+
+<template>
+  <CheckboxGroupRoot
+    v-bind="forwarded"
+    :class="cn(
+      'flex',
+      props.orientation === 'horizontal'
+        ? 'flex-wrap items-center gap-x-5 gap-y-2.5'
+        : 'flex-col gap-2.5',
+      props.class,
+    )"
+  >
+    <slot />
+  </CheckboxGroupRoot>
+</template>

package/src/components/checkbox/index.ts

@@ -0,0 +1,21 @@
+import type { ComputedRef } from 'vue'
+import type { CheckboxVariants } from '../../variants/components/checkbox'
+import { createContext } from 'reka-ui'
+
+export { checkboxVariants, type CheckboxVariants } from '../../variants/components/checkbox'
+export { default as Checkbox } from './Checkbox.vue'
+export { default as CheckboxField } from './CheckboxField.vue'
+
+/** Cỡ/kiểu tô/trạng thái lỗi mà `CheckboxGroup` truyền xuống từng ô con. */
+export interface CheckboxGroupContext {
+  size: ComputedRef<CheckboxVariants['size']>
+  tone: ComputedRef<CheckboxVariants['tone']>
+  invalid: ComputedRef<boolean>
+}
+
+// Dùng createContext của reka thay vì tự khai InjectionKey: cùng một cơ chế với
+// mọi context khác đang chạy trong cây component, và báo lỗi kèm tên component.
+export const [injectCheckboxGroupContext, provideCheckboxGroupContext]
+  = createContext<CheckboxGroupContext>('CheckboxGroup')
+
+export { default as CheckboxGroup } from './CheckboxGroup.vue'

package/src/components/chip/Chip.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { BadgeVariants } from '../badge'
+import type { ChipVariants } from './index'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { X } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { badgeVariants } from '../badge'
+import { chipVariants } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    variant?: BadgeVariants['variant']
+    tone?: BadgeVariants['tone']
+    size?: ChipVariants['size']
+    /** Hiện nút ×. Không bật thì Chip chỉ là một nhãn bo tròn. */
+    removable?: boolean
+    /**
+     * Nhãn cho nút gỡ. Kèm tên chip vào để đọc ra "Gỡ Đang mở".
+     *
+     * KHÔNG đặt default ở `withDefaults`: default tính một lần lúc dựng
+     * component nên nó đóng băng ở ngôn ngữ lúc đó. Rơi lui bằng computed.
+     */
+    removeLabel?: string
+    disabled?: boolean
+  }>(),
+  { removable: false, disabled: false },
+)
+
+const emit = defineEmits<{ remove: [] }>()
+
+const { t } = useI18n()
+
+const removeLabel = computed(() => props.removeLabel ?? t('ui.chip.remove'))
+
+/**
+ * Lấy phần MÀU của badgeVariants rồi bỏ phần hình dáng đi.
+ *
+ * `badgeVariants` gộp cả hai trong một chuỗi. `cn()` dùng tailwind-merge nên
+ * lớp hình dáng của chip viết sau sẽ thắng `rounded-md px-2 py-0.5 text-xs` của
+ * badge — không phải cắt chuỗi bằng tay.
+ */
+const classes = computed(() => cn(
+  badgeVariants({ variant: props.variant, tone: props.tone }),
+  chipVariants({ size: props.size, removable: props.removable }),
+  props.disabled && 'pointer-events-none opacity-50',
+  props.class,
+))
+</script>
+
+<template>
+  <span :class="classes">
+    <slot name="leading" />
+    <span class="min-w-0 truncate"><slot /></span>
+
+    <!--
+      Nút gỡ là <button> thật, không phải icon bấm được: nó phải vào được chuỗi
+      Tab và nhận Enter/Space. `currentColor` cho nó tự hợp với mọi variant, kể
+      cả nền đặc lẫn nền soft.
+    -->
+    <button
+      v-if="props.removable"
+      type="button"
+      class="grid size-4 shrink-0 place-items-center rounded-full text-current opacity-60 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current"
+      :aria-label="removeLabel"
+      :disabled="props.disabled"
+      @click.stop="emit('remove')"
+    >
+      <X class="size-3" />
+    </button>
+  </span>
+</template>

package/src/components/chip/index.ts

@@ -0,0 +1,3 @@
+export { chipVariants, type ChipVariants } from '../../variants/components/chip'
+
+export { default as Chip } from './Chip.vue'

package/src/components/code-block/CodeBlock.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { Language } from '../../variants/lib/highlight'
+import { computed, onUnmounted, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { Check, Copy } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { codeTokenClass } from '../../variants/components/code-block'
+import { highlightLines } from '../../variants/lib/highlight'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    code: string
+    /** `vue` cho SFC và template, `ts` cho đoạn script thuần. */
+    language?: Language
+    /** Tắt khi khối chỉ có một hai dòng lệnh shell. */
+    lineNumbers?: boolean
+    /** Bỏ viền khi khối nằm ngay dưới khung preview (đã có viền ngoài). */
+    bordered?: boolean
+    /** Quá số dòng này thì khối tự cuộn dọc thay vì kéo dài trang. */
+    maxLines?: number
+  }>(),
+  { language: 'vue', lineNumbers: true, bordered: true, maxLines: 10 },
+)
+const { t } = useI18n()
+/** Giữ trạng thái "đã chép" bao lâu trước khi cho bấm lại. */
+const RESET_DELAY = 3000
+
+/**
+ * Chiều cao trần = số dòng × line-height + padding dọc.
+ * `em` ăn theo font-size của chính khối code (12.5px) nên đổi cỡ chữ là nó tự
+ * theo, không phải chỉnh lại con số.
+ */
+const maxHeight = computed(() => `calc(${props.maxLines} * 1.85em + 2rem)`)
+
+/** Cắt theo dòng để số dòng bên trái luôn thẳng hàng với nội dung. */
+const lines = computed(() => highlightLines(props.code, props.language))
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | undefined
+
+onUnmounted(() => clearTimeout(timer))
+
+async function copy(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(props.code)
+  }
+  catch {
+    // Clipboard API cần ngữ cảnh bảo mật (https hoặc localhost). Không chép
+    // được thì thôi, không báo thành công nhầm.
+    return
+  }
+
+  copied.value = true
+  clearTimeout(timer)
+  timer = setTimeout(() => {
+    copied.value = false
+  }, RESET_DELAY)
+}
+</script>
+
+<template>
+  <div :class="cn('relative', props.class)">
+    <button
+      type="button"
+      :aria-label="copied ? t('ui.copied') : t('ui.copy.code')"
+      class="absolute right-3 top-3 z-(--z-raised) grid size-[26px] place-items-center rounded-md border border-border bg-card text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-[13px]"
+      :disabled="copied"
+      @click="copy"
+    >
+      <Check v-if="copied" class="text-success" />
+      <Copy v-else />
+    </button>
+
+    <!-- Nền tô ở lớp ngoài, đúng MỘT lần; lớp trong chỉ lo cuộn và mờ dần. -->
+    <div
+      class="overflow-hidden bg-code-bg"
+      :class="bordered ? 'rounded-xl border border-border' : 'border-t border-border'"
+    >
+      <div
+        class="overflow-auto py-4 pl-[18px] pr-[44px] font-mono text-[12.5px] leading-[1.85] text-code-fg"
+        :style="{ maxHeight }"
+      >
+        <div
+          v-for="(tokens, row) in lines"
+          :key="row"
+          class="grid w-max gap-3.5 pr-[42px]"
+          :class="lineNumbers ? 'grid-cols-[28px_max-content]' : 'grid-cols-[max-content]'"
+        >
+          <span v-if="lineNumbers" class="text-right text-muted-foreground opacity-65">{{ row + 1 }}</span>
+          <span class="min-w-0 whitespace-pre"><span
+            v-for="(token, index) in tokens"
+            :key="index"
+            :class="codeTokenClass[token.kind]"
+          >{{ token.value }}</span></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,4 @@
+// Kiểu của prop `language`. Export ở đây để app khai được mà không phải
+// import từ `src/variants/lib/highlight`.
+export type { Language } from '../../variants/lib/highlight'
+export { default as CodeBlock } from './CodeBlock.vue'