@vestow/vue 0.1.0

package/src/components/pick-list/PickList.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts" generic="TItem">
+import type { ClassProps } from '../../lib/types'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { moveItem } from '../../variants/lib/list-move'
+import Button from '../button/Button.vue'
+import SelectableList from '../order-list/SelectableList.vue'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    itemKey: (item: TItem, index: number) => string | number
+    sourceHeader?: string
+    targetHeader?: string
+    disabled?: boolean
+    dragging?: boolean
+    maxHeight?: string
+  }>(),
+  { disabled: false, dragging: true },
+)
+
+const source = defineModel<TItem[]>('source', { default: () => [] })
+const target = defineModel<TItem[]>('target', { default: () => [] })
+
+const { t } = useI18n()
+
+const sourceKeys = computed(() => source.value.map((item, index) => props.itemKey(item, index)))
+const targetKeys = computed(() => target.value.map((item, index) => props.itemKey(item, index)))
+
+const sourceSelection = ref<(string | number)[]>([])
+const targetSelection = ref<(string | number)[]>([])
+const announcement = ref('')
+
+function pickedFrom(list: TItem[], selection: (string | number)[]): number[] {
+  return list
+    .map((item, index) => (selection.includes(props.itemKey(item, index)) ? index : -1))
+    .filter(index => index >= 0)
+}
+
+const canSend = computed(() => pickedFrom(source.value, sourceSelection.value).length > 0)
+const canReturn = computed(() => pickedFrom(target.value, targetSelection.value).length > 0)
+
+/**
+ * Chuyển giữa hai danh sách.
+ *
+ * Bỏ lựa chọn ở bên gửi sau khi chuyển: khoá vẫn còn đó nhưng mục thì đã sang
+ * danh sách kia, nên giữ lại là mấy cái nút vẫn sáng trong khi không còn gì để
+ * gửi — một nút bấm vào không làm gì.
+ */
+function transfer(direction: 'send' | 'return', all: boolean): void {
+  const fromList = direction === 'send' ? source : target
+  const toList = direction === 'send' ? target : source
+  const selection = direction === 'send' ? sourceSelection : targetSelection
+
+  const indexes = all
+    ? fromList.value.map((_, index) => index)
+    : pickedFrom(fromList.value, selection.value)
+
+  if (indexes.length === 0)
+    return
+
+  const picked = indexes.map(index => fromList.value[index])
+  const set = new Set(indexes)
+
+  fromList.value = fromList.value.filter((_, index) => !set.has(index))
+  toList.value = [...toList.value, ...picked]
+  selection.value = []
+
+  announcement.value = t(
+    direction === 'send' ? 'ui.pickList.sent' : 'ui.pickList.returned',
+    { count: picked.length },
+  )
+}
+
+/**
+ * Thả: cùng danh sách thì sắp lại, khác danh sách thì chuyển sang.
+ *
+ * `SelectableList` báo cả `fromListId`, nên một hàm lo được cả hai — và đó
+ * cũng chính là hai nghĩa mà người dùng vẫn hiểu khi họ kéo một mục.
+ */
+function onDrop(into: 'source' | 'target', payload: { fromListId: string, fromIndex: number, toIndex: number }): void {
+  const intoList = into === 'source' ? source : target
+
+  if (payload.fromListId === into) {
+    const to = payload.toIndex > payload.fromIndex ? payload.toIndex - 1 : payload.toIndex
+    intoList.value = moveItem(intoList.value, payload.fromIndex, to)
+    return
+  }
+
+  const fromList = into === 'source' ? target : source
+  const moved = fromList.value[payload.fromIndex]
+  if (moved === undefined)
+    return
+
+  fromList.value = fromList.value.filter((_, index) => index !== payload.fromIndex)
+  const next = [...intoList.value]
+  next.splice(Math.min(payload.toIndex, next.length), 0, moved)
+  intoList.value = next
+
+  announcement.value = t(
+    into === 'target' ? 'ui.pickList.sent' : 'ui.pickList.returned',
+    { count: 1 },
+  )
+}
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-2', props.class)">
+    <div class="flex items-stretch gap-3">
+      <div class="flex min-w-0 flex-1 flex-col gap-2">
+        <p class="text-sm font-medium">
+          {{ props.sourceHeader ?? t('ui.pickList.source') }}
+        </p>
+        <SelectableList
+          v-model:selection="sourceSelection"
+          :items="source"
+          :keys="sourceKeys"
+          list-id="source"
+          :label="props.sourceHeader ?? t('ui.pickList.source')"
+          :disabled="props.disabled"
+          :dragging="props.dragging"
+          :max-height="props.maxHeight"
+          :empty-message="t('ui.table.empty')"
+          class="flex-1"
+          @move="onDrop('source', $event)"
+        >
+          <template #item="slotProps">
+            <slot name="item" v-bind="slotProps" list="source" />
+          </template>
+        </SelectableList>
+      </div>
+
+      <!--
+        Mấy cái nút chuyển nằm GIỮA, và chúng là cơ chế chính — kéo thả là phần
+        thêm. WCAG 2.5.7: thao tác kéo nào cũng phải có đường một-chạm.
+      -->
+      <div class="flex flex-col justify-center gap-1">
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          :disabled="props.disabled || !canSend"
+          :aria-label="t('ui.pickList.send')"
+          @click="transfer('send', false)"
+        >
+          <ChevronRight aria-hidden="true" />
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          :disabled="props.disabled || source.length === 0"
+          :aria-label="t('ui.pickList.sendAll')"
+          @click="transfer('send', true)"
+        >
+          <ChevronsRight aria-hidden="true" />
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          :disabled="props.disabled || !canReturn"
+          :aria-label="t('ui.pickList.return')"
+          @click="transfer('return', false)"
+        >
+          <ChevronLeft aria-hidden="true" />
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon-sm"
+          :disabled="props.disabled || target.length === 0"
+          :aria-label="t('ui.pickList.returnAll')"
+          @click="transfer('return', true)"
+        >
+          <ChevronsLeft aria-hidden="true" />
+        </Button>
+      </div>
+
+      <div class="flex min-w-0 flex-1 flex-col gap-2">
+        <p class="text-sm font-medium">
+          {{ props.targetHeader ?? t('ui.pickList.target') }}
+        </p>
+        <SelectableList
+          v-model:selection="targetSelection"
+          :items="target"
+          :keys="targetKeys"
+          list-id="target"
+          :label="props.targetHeader ?? t('ui.pickList.target')"
+          :disabled="props.disabled"
+          :dragging="props.dragging"
+          :max-height="props.maxHeight"
+          :empty-message="t('ui.table.empty')"
+          class="flex-1"
+          @move="onDrop('target', $event)"
+        >
+          <template #item="slotProps">
+            <slot name="item" v-bind="slotProps" list="target" />
+          </template>
+        </SelectableList>
+      </div>
+    </div>
+
+    <!-- Chuyển một mục sang danh sách kia là thay đổi không nhìn thấy được nếu
+         bạn không nhìn: focus ở lại trên nút, chỉ có hai danh sách đổi nội dung. -->
+    <p class="sr-only" role="status" aria-live="polite">
+      {{ announcement }}
+    </p>
+  </div>
+</template>

package/src/components/pick-list/index.ts

@@ -0,0 +1 @@
+export { default as PickList } from './PickList.vue'

package/src/components/popover/Popover.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

package/src/components/popover/PopoverAnchor.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from 'reka-ui'
+import { PopoverAnchor } from 'reka-ui'
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+  <PopoverAnchor v-bind="props">
+    <slot />
+  </PopoverAnchor>
+</template>

package/src/components/popover/PopoverContent.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & ClassProps>(),
+  { align: 'center', sideOffset: 6, collisionPadding: 8 },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="forwarded"
+      :class="cn(
+        'surface z-(--z-overlay) w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+        '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',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+        'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>

package/src/components/popover/PopoverTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui'
+import { PopoverTrigger } from 'reka-ui'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>

package/src/components/popover/index.ts

@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverAnchor } from './PopoverAnchor.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'

package/src/components/progress/Progress.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** Giá trị hiện tại, tính theo `max`. */
+    value?: number
+    max?: number
+    /** Màu thanh chạy. Mặc định lấy `--primary`. */
+    indicatorClass?: string
+  }>(),
+  { value: 0, max: 100 },
+)
+
+const percent = computed(() => {
+  if (props.max <= 0)
+    return 0
+
+  return Math.min(100, Math.max(0, (props.value / props.max) * 100))
+})
+</script>
+
+<template>
+  <div
+    role="progressbar"
+    :aria-valuenow="props.value"
+    :aria-valuemin="0"
+    :aria-valuemax="props.max"
+    :class="cn('h-1.5 w-full overflow-hidden rounded-full bg-secondary', props.class)"
+  >
+    <div
+      class="h-full rounded-full transition-[width] duration-(--duration-slow)"
+      :class="cn('bg-primary', props.indicatorClass)"
+      :style="{ width: `${percent}%` }"
+    />
+  </div>
+</template>

package/src/components/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'

package/src/components/props-table/PropsTable.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+import { DocText } from '../doc-text'
+
+/** Một dòng trong bảng tham chiếu API: tên, mô tả, và cột phụ (kiểu / payload). */
+export interface PropDoc {
+  name: string
+  description?: string
+  /** Ghi đúng như trong type, ví dụ `'sm' | 'default' | 'lg' — default 'default'`. */
+  meta?: string
+}
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    rows: PropDoc[]
+    /** Ba nhãn cột ghép lại thành dòng tiêu đề, ví dụ `Prop · description · type`. */
+    heading: string
+    /**
+     * `stack` xếp dọc tên / mô tả / kiểu (bảng Props, Emits, Slots, Tokens).
+     * `split` chia hai cột cho bảng phím tắt.
+     */
+    layout?: 'stack' | 'split'
+  }>(),
+  { layout: 'stack' },
+)
+</script>
+
+<template>
+  <div :class="cn('overflow-hidden rounded-xl border border-border', props.class)">
+    <div
+      class="border-b border-border bg-sidebar px-3.5 py-[9px] text-[10.5px] font-medium uppercase tracking-[0.05em] text-muted-foreground"
+      :class="props.layout === 'split' && 'grid grid-cols-[120px_minmax(0,1fr)] gap-3'"
+    >
+      <template v-if="props.layout === 'split'">
+        <span v-for="label in props.heading.split(' · ')" :key="label">{{ label }}</span>
+      </template>
+      <span v-else>{{ props.heading }}</span>
+    </div>
+
+    <div
+      v-for="row in props.rows"
+      :key="row.name"
+      class="border-b border-border last:border-b-0"
+      :class="props.layout === 'split'
+        ? 'grid grid-cols-[120px_minmax(0,1fr)] items-start gap-3 px-3.5 py-[11px]'
+        : 'flex min-w-0 flex-col gap-[5px] px-3.5 py-3'"
+    >
+      <span class="font-mono text-[12.5px] [overflow-wrap:anywhere]" :class="props.layout === 'split' ? 'font-medium' : 'font-semibold'">
+        {{ row.name }}
+      </span>
+
+      <span v-if="row.description" class="min-w-0 text-pretty text-[12.5px] leading-[1.55] text-muted-foreground [overflow-wrap:anywhere]">
+        <DocText :text="row.description" />
+      </span>
+
+      <span v-if="row.meta" class="font-mono text-[11.5px] leading-[1.6] text-muted-foreground [overflow-wrap:anywhere] [word-break:break-word]">
+        {{ row.meta }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/props-table/index.ts

@@ -0,0 +1,2 @@
+export type { PropDoc } from './PropsTable.vue'
+export { default as PropsTable } from './PropsTable.vue'

package/src/components/radio-group/RadioGroup.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { RadioGroupItemVariants } from './index'
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { provideRadioGroupContext } from './index'
+
+const props = withDefaults(
+  defineProps<RadioGroupRootProps & ClassProps & {
+    size?: RadioGroupItemVariants['size']
+    tone?: RadioGroupItemVariants['tone']
+    invalid?: boolean
+  }>(),
+  { orientation: 'vertical', invalid: false },
+)
+
+const emits = defineEmits<RadioGroupRootEmits>()
+
+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 nút con khỏi lặp lại.
+provideRadioGroupContext({
+  size: computed(() => props.size),
+  tone: computed(() => props.tone),
+  invalid: computed(() => props.invalid),
+})
+</script>
+
+<template>
+  <!--
+    KHÔNG hạ `rovingFocus` như CheckboxGroup đã làm. Ở đây mặc định `true` của
+    reka mới đúng: chọn cái này là bỏ cái kia, nên WAI-ARIA APG xếp cả nhóm vào
+    **một** điểm dừng Tab và di chuyển giữa các lựa chọn bằng phím mũi tên.
+  -->
+  <RadioGroupRoot
+    v-bind="forwarded"
+    :class="cn(
+      'grid gap-2.5',
+      props.orientation === 'horizontal' && 'grid-flow-col auto-cols-max gap-5',
+      props.class,
+    )"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>

package/src/components/radio-group/RadioGroupItem.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { RadioGroupItemEmits, RadioGroupItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { RadioGroupItemVariants } from './index'
+import { RadioGroupIndicator, RadioGroupItem, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { injectRadioGroupContext, radioGroupItemVariants } from './index'
+
+const props = withDefaults(defineProps<RadioGroupItemProps & ClassProps & {
+  size?: RadioGroupItemVariants['size']
+  tone?: RadioGroupItemVariants['tone']
+  /** Viền đỏ + `aria-invalid`. Trong `FormField` thì không cần khai — xem dưới. */
+  invalid?: boolean
+}>(), {
+  /**
+   * PHẢI khai mặc định là `undefined`, không được để trống.
+   *
+   * Vue ép prop kiểu Boolean vắng mặt thành `false` chứ không phải
+   * `undefined`, nên `props.invalid ?? group.invalid` sẽ luôn dừng ở `false`
+   * và nhóm không bao giờ truyền được trạng thái lỗi xuống. Khai mặc định
+   * tường minh thì Vue bỏ phép ép đó đi.
+   */
+  invalid: undefined,
+})
+
+const emits = defineEmits<RadioGroupItemEmits>()
+
+// Nằm trong RadioGroup 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 nút vẫn thắng.
+const group = injectRadioGroupContext(null)
+
+const size = computed(() => props.size ?? group?.size.value)
+const tone = computed(() => props.tone ?? group?.tone.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 mà không phải nối tay `invalid`.
+ *
+ * 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.
+ */
+function resolveInvalid(attrs: Record<string, unknown>): boolean {
+  if (props.invalid !== undefined)
+    return props.invalid
+
+  if (group?.invalid.value)
+    return true
+
+  return 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 RadioGroupItem, để 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>
+  <RadioGroupItem
+    v-bind="forwarded"
+    :aria-invalid="resolveInvalid($attrs) || undefined"
+    :data-invalid="resolveInvalid($attrs) || undefined"
+    :class="cn(radioGroupItemVariants({ size, tone, invalid: resolveInvalid($attrs) }), props.class)"
+  >
+    <!-- Indicator chỉ tồn tại khi đã chọn nên zoom-in chạy đúng một lần lúc nó
+         xuất hiện — không cần transition-group hay forceMount. -->
+    <RadioGroupIndicator
+      class="flex size-full animate-in items-center justify-center zoom-in-50 duration-(--duration-fast) motion-reduce:animate-none"
+    >
+      <!-- Chấm là một div chứ không phải icon: ở cỡ 6px thì nét vẽ của icon
+           tròn bị làm mảnh đi và trông xám hơn nền, không còn ra hình tròn đặc. -->
+      <span data-dot class="rounded-full bg-primary-foreground" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>

package/src/components/radio-group/RadioGroupItemField.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { RadioGroupItemEmits, RadioGroupItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { RadioGroupItemVariants } from './index'
+import { useForwardPropsEmits } from 'reka-ui'
+import { computed, useId } from 'vue'
+import { cn } from '../../lib/utils'
+import Label from '../label/Label.vue'
+import { injectRadioGroupContext } from './index'
+import RadioGroupItem from './RadioGroupItem.vue'
+
+/**
+ * Attr rơi tự do phải đi xuống NÚT, 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 nút chứ không tả cái hàng.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<RadioGroupItemProps & ClassProps & {
+  size?: RadioGroupItemVariants['size']
+  tone?: RadioGroupItemVariants['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
+}>(), {
+  /**
+   * PHẢI khai mặc định là `undefined`, không được để trống.
+   *
+   * Vue ép prop kiểu Boolean vắng mặt thành `false` chứ không phải
+   * `undefined`, nên `props.invalid ?? group.invalid` sẽ luôn dừng ở `false`
+   * và nhóm không bao giờ truyền được trạng thái lỗi xuống. Khai mặc định
+   * tường minh thì Vue bỏ phép ép đó đi.
+   */
+  invalid: undefined,
+})
+
+const emits = defineEmits<RadioGroupItemEmits>()
+
+defineSlots<{
+  default?: () => unknown
+  description?: () => unknown
+}>()
+
+const group = injectRadioGroupContext(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.
+ */
+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 nút 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: nút 14px
+ * lệch 3px, nút 16px lệch 2px, nút 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)">
+    <RadioGroupItem
+      v-bind="{ ...forwarded, ...$attrs }"
+      :id="controlId"
+      :size="props.size"
+      :tone="props.tone"
+      :invalid="props.invalid"
+      :aria-describedby="resolveDescribedBy($attrs)"
+      :class="alignClass"
+    />
+
+    <div class="flex flex-col gap-1">
+      <!-- `for` trỏ vào chính nút: <button> là labelable element nên bấm vào chữ
+           cũng chọn được, không phải bọc nút 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>