@vestow/vue 0.1.0

package/src/components/date-picker/DateRangePicker.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { DateValue } from '@internationalized/date'
+import type { DateRange } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { invalidRingStatic } from '../../lib/focus'
+import { CalendarIcon } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { Button } from '../button'
+import { RangeCalendar } from '../calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '../popover'
+
+/**
+ * Gốc của component là một provider KHÔNG vẽ ra DOM, nên thuộc tính rơi tự do
+ * không có chỗ đáp và biến mất hẳn. Đo được: đặt `id` lên component thì nó
+ * không xuất hiện ở bất kỳ đâu trong DOM, và `<Label for>` trỏ vào hư không.
+ *
+ * Chuyển tay xuống chính cái trigger.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    placeholder?: string
+    locale?: string
+    dateStyle?: 'short' | 'medium' | 'long'
+    size?: 'sm' | 'default'
+    invalid?: boolean
+    disabled?: boolean
+    numberOfMonths?: number
+    minValue?: DateValue
+    maxValue?: DateValue
+  }>(),
+  {
+    dateStyle: 'medium',
+    size: 'default',
+    invalid: false,
+    disabled: false,
+    numberOfMonths: 2,
+  },
+)
+
+const { t, tag } = useI18n()
+
+/**
+ * Cả hai mặc định phải đi qua i18n, không đặt được trong `withDefaults`.
+ *
+ * `locale` cũng vậy chứ không riêng `placeholder`: chốt cứng 'vi-VN' thì đổi
+ * sang tiếng Anh xong nút vẫn hiện "31 tháng 8, 2026". Prop vẫn thắng khi có —
+ * hai picker trên cùng một trang được phép khác locale.
+ */
+const placeholder = computed(() => props.placeholder ?? t('ui.dateRangePicker.placeholder'))
+const locale = computed(() => props.locale ?? tag.value)
+
+const model = defineModel<DateRange>({ default: () => ({ start: undefined, end: undefined }) })
+
+const open = ref(false)
+
+const formatter = computed(() => new DateFormatter(locale.value, { dateStyle: props.dateStyle }))
+
+function fmt(value: DateValue | undefined): string {
+  return value ? formatter.value.format(value.toDate(getLocalTimeZone())) : ''
+}
+
+/**
+ * Chỉ có đầu khoảng thì vẫn hiện nó ra, kèm dấu gạch bỏ ngỏ.
+ *
+ * Người dùng vừa bấm ngày đầu xong đang chờ bấm ngày thứ hai; để nút trở về chữ
+ * gợi ý là mất luôn phản hồi cho thao tác vừa rồi.
+ */
+const label = computed(() => {
+  if (!model.value.start)
+    return placeholder.value
+  if (!model.value.end)
+    return `${fmt(model.value.start)} – …`
+  return `${fmt(model.value.start)} – ${fmt(model.value.end)}`
+})
+
+// Chỉ đóng khi đã đủ HAI đầu; đóng sau ngày đầu là cắt ngang thao tác.
+function onUpdate(value: DateRange): void {
+  model.value = value
+  if (value.start && value.end)
+    open.value = false
+}
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <Button
+        v-bind="$attrs"
+        variant="outline"
+        :size="props.size === 'sm' ? 'sm' : 'lg'"
+        :disabled="props.disabled"
+        :aria-invalid="props.invalid || undefined"
+        :class="cn(
+          'w-full justify-start gap-2 font-normal',
+          !model.start && 'text-muted-foreground',
+          props.invalid && invalidRingStatic,
+          props.class,
+        )"
+      >
+        <CalendarIcon class="text-muted-foreground" />
+        {{ label }}
+      </Button>
+    </PopoverTrigger>
+
+    <PopoverContent class="w-auto p-0" align="start">
+      <RangeCalendar
+        :model-value="model"
+        :locale="locale"
+        :number-of-months="props.numberOfMonths"
+        :min-value="props.minValue"
+        :max-value="props.maxValue"
+        class="p-3"
+        @update:model-value="onUpdate"
+      />
+    </PopoverContent>
+  </Popover>
+</template>

package/src/components/date-picker/index.ts

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

package/src/components/deferred/Deferred.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /**
+     * Nạp sớm bao nhiêu trước khi khối chạm mép màn hình.
+     *
+     * Cú pháp giống `margin` của CSS. Để `0px` thì nội dung chỉ bắt đầu hiện ra
+     * đúng lúc người ta cuộn tới, tức họ nhìn thấy chỗ trống trước — nạp sớm
+     * một màn hình thì gần như không ai kịp thấy.
+     */
+    rootMargin?: string
+    /** Bao nhiêu phần của khối phải lộ ra thì mới tính là đã tới. */
+    threshold?: number
+    /** Nạp một lần rồi thôi theo dõi. Tắt đi thì nó báo mỗi lần vào lại tầm nhìn. */
+    once?: boolean
+  }>(),
+  { rootMargin: '200px', threshold: 0, once: true },
+)
+
+const emit = defineEmits<{ load: [] }>()
+
+const loaded = ref(false)
+const anchor = ref<HTMLElement>()
+
+let observer: IntersectionObserver | undefined
+
+onMounted(() => {
+  const el = anchor.value
+  if (el === undefined)
+    return
+
+  // Không có API thì nạp luôn. Một khối không bao giờ hiện ra vì trình duyệt
+  // thiếu một cách quan sát là hỏng nặng hơn hẳn việc nạp sớm.
+  if (typeof IntersectionObserver === 'undefined') {
+    loaded.value = true
+    emit('load')
+    return
+  }
+
+  observer = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (!entry.isIntersecting)
+        continue
+
+      loaded.value = true
+      emit('load')
+
+      if (props.once) {
+        observer?.disconnect()
+        observer = undefined
+      }
+    }
+  }, { rootMargin: props.rootMargin, threshold: props.threshold })
+
+  observer.observe(el)
+})
+
+onBeforeUnmount(() => observer?.disconnect())
+
+defineExpose({ loaded })
+</script>
+
+<template>
+  <!--
+    `IntersectionObserver` là đúng công cụ ở ĐÂY, dù CLAUDE.md có một mục nói
+    đừng dùng nó cho mục lục đang đọc.
+
+    Hai câu hỏi khác nhau: "khối này đã lộ ra chưa" là câu hỏi về MỘT phần tử và
+    có một câu trả lời rõ ràng; "đang đọc mục nào" là câu hỏi so sánh giữa nhiều
+    phần tử, mà giữa hai tiêu đề thì không cái nào đang giao với viewport cả.
+  -->
+  <div ref="anchor" :class="cn(props.class)">
+    <slot v-if="loaded" />
+    <slot v-else name="placeholder" />
+  </div>
+</template>

package/src/components/deferred/index.ts

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

package/src/components/dialog/Dialog.vue

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

package/src/components/dialog/DialogClose.vue

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

package/src/components/dialog/DialogContent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { DialogContentVariants } from './index'
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { X } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { dialogContentVariants } from './index'
+
+const props = withDefaults(
+  defineProps<DialogContentProps & ClassProps & {
+    size?: DialogContentVariants['size']
+    /** Ẩn nút X góc phải — dùng khi dialog bắt buộc chọn 1 hành động. */
+    hideClose?: boolean
+  }>(),
+  { hideClose: false },
+)
+const emits = defineEmits<DialogContentEmits>()
+const { t } = useI18n()
+const delegated = computed(() => {
+  const { class: _class, size: _size, hideClose: _hideClose, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-(--z-overlay) bg-foreground/40 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+    />
+    <DialogContent v-bind="forwarded" :class="cn(dialogContentVariants({ size }), props.class)">
+      <slot />
+      <DialogClose
+        v-if="!hideClose"
+        class="absolute right-4 top-4 rounded-sm p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none"
+      >
+        <X class="size-4" />
+        <span class="sr-only">{{ t('ui.close') }}</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

package/src/components/dialog/DialogDescription.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DialogDescription } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DialogDescriptionProps & ClassProps>()
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <DialogDescription v-bind="delegated" :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </DialogDescription>
+</template>

package/src/components/dialog/DialogFooter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('flex shrink-0 flex-col-reverse gap-2 border-t border-border px-6 py-4 sm:flex-row sm:justify-end', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/dialog/DialogHeader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('flex shrink-0 flex-col gap-1.5 border-b border-border px-6 py-4 pr-12', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/dialog/DialogTitle.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DialogTitle } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DialogTitleProps & ClassProps>()
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <DialogTitle v-bind="delegated" :class="cn('text-base font-semibold leading-none tracking-tight', props.class)">
+    <slot />
+  </DialogTitle>
+</template>

package/src/components/dialog/DialogTrigger.vue

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

package/src/components/dialog/index.ts

@@ -0,0 +1,10 @@
+export { dialogContentVariants, type DialogContentVariants } from '../../variants/components/dialog'
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+
+export { default as DialogTrigger } from './DialogTrigger.vue'

package/src/components/doc-example/DocExample.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { Language } from '../../variants/lib/highlight'
+import { cn } from '../../lib/utils'
+import { CodeBlock } from '../code-block'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    code: string
+    language?: Language
+    /**
+     * Căn giữa theo chiều dọc. Ví dụ cao (bảng, biểu đồ) đặt `false` để nội
+     * dung bám mép trên — nhưng vẫn căn giữa theo chiều ngang.
+     *
+     * Căn ngang là việc của KHUNG chứ không phải của ví dụ: nó chỉ đặt cả khối
+     * vào giữa, không nói gì về cách xếp bên trong khối. Ví dụ nào rộng hết
+     * khung (`w-full`) thì `justify-center` ở đây không đổi gì, nên hàng nút
+     * vẫn phải tự khai `justify-center` của nó.
+     */
+    center?: boolean
+  }>(),
+  { language: 'vue', center: true },
+)
+</script>
+
+<template>
+  <!--
+    `overflow-hidden` để cắt hai góc dưới của CodeBlock: ở nhánh
+    `bordered=false` khối code chỉ có đường kẻ trên và không tự bo góc.
+  -->
+  <div :class="cn('relative overflow-hidden rounded-xl border border-border bg-card', props.class)">
+    <div
+      class="flex min-h-[260px] justify-center px-[22px] py-11"
+      :class="props.center ? 'items-center' : 'items-start'"
+    >
+      <slot />
+    </div>
+
+    <CodeBlock :code="props.code" :language="props.language" :bordered="false" />
+  </div>
+</template>

package/src/components/doc-example/index.ts

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

package/src/components/doc-text/DocText.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+/**
+ * Render một đoạn mô tả trong tài liệu. Nhận đúng **hai** cú pháp:
+ *
+ * - `` `code` `` -> thẻ code
+ * - `**đậm**` -> in đậm
+ *
+ * Chỉ hai thứ đó, không phải markdown đầy đủ: mô tả prop và mô tả ví dụ không
+ * cần link, danh sách hay tiêu đề, mà thêm cả bộ parse markdown vào chỉ để in
+ * ra `size` là không đáng.
+ *
+ * Bản đầu chỉ có backtick, và `**đậm**` viết ra hiện nguyên hai dấu sao trên
+ * trang — ba trang component đã dính trước khi nó bị phát hiện. Cách chữa
+ * không phải là cấm dùng dấu sao mà là nhận nốt nó, vì người viết tài liệu sẽ
+ * gõ theo thói quen markdown dù có được dặn hay không.
+ */
+const props = defineProps<{ text: string }>()
+
+/**
+ * Cắt theo cả hai mẫu trong MỘT lần quét thay vì tách backtick rồi tách sao.
+ * Tách hai lần sẽ hiểu nhầm dấu sao nằm bên trong khối code.
+ */
+const PATTERN = /(`[^`]+`|\*\*[^*]+\*\*)/g
+
+interface Part {
+  kind: 'code' | 'strong' | 'text'
+  value: string
+}
+
+const parts = computed<Part[]>(() =>
+  props.text
+    .split(PATTERN)
+    .filter(chunk => chunk !== '')
+    .map((chunk) => {
+      if (chunk.startsWith('`') && chunk.endsWith('`'))
+        return { kind: 'code' as const, value: chunk.slice(1, -1) }
+
+      if (chunk.startsWith('**') && chunk.endsWith('**'))
+        return { kind: 'strong' as const, value: chunk.slice(2, -2) }
+
+      return { kind: 'text' as const, value: chunk }
+    }),
+)
+</script>
+
+<template>
+  <template v-for="(part, index) in parts" :key="index">
+    <code
+      v-if="part.kind === 'code'"
+      class="rounded border border-border bg-muted px-1 py-0.5 font-mono text-[0.85em] text-foreground"
+    >{{ part.value }}</code>
+    <!-- `text-foreground` chứ không chỉ `font-medium`: đoạn mô tả là chữ mờ,
+         nên chỉ tăng cân chữ thôi thì gần như không thấy khác. -->
+    <strong
+      v-else-if="part.kind === 'strong'"
+      class="font-medium text-foreground"
+    >{{ part.value }}</strong>
+    <template v-else>
+      {{ part.value }}
+    </template>
+  </template>
+</template>

package/src/components/doc-text/index.ts

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

package/src/components/dropdown-menu/DropdownMenu.vue

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

package/src/components/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { Check } from '../../lib/icons'
+import { menuIndicatorItemClass, menuIndicatorSlotClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & ClassProps>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class="cn(menuIndicatorItemClass, props.class)"
+  >
+    <span :class="menuIndicatorSlotClass">
+      <DropdownMenuItemIndicator>
+        <Check class="size-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

package/src/components/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuContentClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & ClassProps>(),
+  { sideOffset: 6, align: 'start', collisionPadding: 8 },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn(
+        menuContentClass,
+        'max-h-[var(--reka-dropdown-menu-content-available-height)] overflow-y-auto',
+        props.class,
+      )"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

package/src/components/dropdown-menu/DropdownMenuGroup.vue

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

package/src/components/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { DropdownMenuItemEmits, DropdownMenuItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DropdownMenuItem, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { menuInsetClass, menuItemClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DropdownMenuItemProps & ClassProps & {
+  /** Item hành động nguy hiểm: xoá, thu hồi quyền... */
+  variant?: 'default' | 'destructive'
+  inset?: boolean
+}>()
+const emits = defineEmits<DropdownMenuItemEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, variant: _variant, inset: _inset, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwarded"
+    :data-variant="props.variant"
+    :class="cn(menuItemClass, props.inset && menuInsetClass, props.class)"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

package/src/components/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { DropdownMenuLabel } from 'reka-ui'
+import { computed } from 'vue'
+import { menuInsetClass, menuLabelClass } from '../../lib/menu-styles'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<DropdownMenuLabelProps & ClassProps & { inset?: boolean }>()
+
+const delegated = computed(() => {
+  const { class: _class, inset: _inset, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="delegated"
+    :class="cn(menuLabelClass, props.inset && menuInsetClass, props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>

package/src/components/dropdown-menu/DropdownMenuRadioGroup.vue

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