@brumaombra/ui-vintage 0.7.13 → 0.8.1

package/src/components/ui/data-table/DataTable.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ArrowUp01Icon, PackageIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
+import { Checkbox } from '../checkbox';
+import { Skeleton } from '../skeleton';
+import type { DataTableColumn, DataTableSort } from '.';
+
+// Props
+const props = withDefaults(defineProps<{
+    columns: DataTableColumn<T>[];
+    rows: T[];
+    rowKey?: keyof T | ((row: T) => PropertyKey);
+    selectable?: boolean;
+    selected?: PropertyKey[];
+    sort?: DataTableSort | null;
+    manualSort?: boolean;
+    loading?: boolean;
+    loadingRows?: number;
+    emptyText?: string;
+    rowClickable?: boolean;
+    stickyHeader?: boolean;
+    class?: HTMLAttributes['class'];
+}>(), {
+    rowKey: 'id' as never,
+    selectable: false,
+    selected: () => [],
+    sort: null,
+    manualSort: false,
+    loading: false,
+    loadingRows: 5,
+    emptyText: '',
+    rowClickable: false,
+    stickyHeader: false
+});
+
+// Emits
+const emits = defineEmits<{
+    'update:selected': [value: PropertyKey[]];
+    'update:sort': [value: DataTableSort | null];
+    'row-click': [row: T, event: MouseEvent];
+}>();
+
+// Slots
+defineSlots<{
+    [key: `cell-${string}`]: (props: { row: T; value: unknown; index: number }) => unknown;
+    [key: `header-${string}`]: (props: { column: DataTableColumn<T> }) => unknown;
+    empty?: () => unknown;
+}>();
+
+const { t } = useI18n();
+const resolvedEmptyText = computed(() => props.emptyText || t('uiVintage.common.empty.description'));
+
+// Resolve a stable key for each row
+const getRowKey = (row: T): PropertyKey => {
+    return typeof props.rowKey === 'function' ? props.rowKey(row) : row[props.rowKey as keyof T] as PropertyKey;
+};
+
+// Read the raw value of a cell
+const getCellValue = (row: T, column: DataTableColumn<T>) => row[column.key];
+
+// Format a cell for display when no slot is provided
+const formatCell = (row: T, column: DataTableColumn<T>) => {
+    const value = getCellValue(row, column);
+    return column.format ? column.format(value, row) : value ?? '';
+};
+
+// Sort rows on the client unless sorting is delegated to the parent
+const sortedRows = computed(() => {
+    if (!props.sort || props.manualSort) return props.rows;
+    const column = props.columns.find(item => item.key === props.sort?.key);
+    if (!column) return props.rows;
+    const direction = props.sort.direction === 'asc' ? 1 : -1;
+    const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+
+    // Compare values with the column accessor (strings use natural ordering)
+    return [...props.rows].sort((first, second) => {
+        const firstValue = column.sortValue ? column.sortValue(first) : getCellValue(first, column);
+        const secondValue = column.sortValue ? column.sortValue(second) : getCellValue(second, column);
+        if (firstValue == null) return 1;
+        if (secondValue == null) return -1;
+        if (typeof firstValue === 'number' && typeof secondValue === 'number') return (firstValue - secondValue) * direction;
+        return collator.compare(String(firstValue), String(secondValue)) * direction;
+    });
+});
+
+// Cycle a column through ascending, descending, and unsorted
+const toggleSort = (column: DataTableColumn<T>) => {
+    if (!column.sortable) return;
+    if (props.sort?.key !== column.key) {
+        emits('update:sort', { key: column.key, direction: 'asc' });
+    } else if (props.sort.direction === 'asc') {
+        emits('update:sort', { key: column.key, direction: 'desc' });
+    } else {
+        emits('update:sort', null);
+    }
+};
+
+// Selection helpers
+const selectedSet = computed(() => new Set(props.selected));
+const allSelected = computed(() => props.rows.length > 0 && props.rows.every(row => selectedSet.value.has(getRowKey(row))));
+const someSelected = computed(() => props.rows.some(row => selectedSet.value.has(getRowKey(row))));
+const headerCheckboxState = computed(() => allSelected.value ? true : someSelected.value ? 'indeterminate' : false);
+
+// Toggle all rows
+const toggleAll = () => {
+    emits('update:selected', allSelected.value ? [] : props.rows.map(getRowKey));
+};
+
+// Toggle a single row
+const toggleRow = (row: T) => {
+    const key = getRowKey(row);
+    const next = new Set(props.selected);
+    if (next.has(key)) {
+        next.delete(key);
+    } else {
+        next.add(key);
+    }
+    emits('update:selected', [...next]);
+};
+
+// Alignment classes for header and body cells
+const alignClasses = { left: 'text-left', center: 'text-center', right: 'text-right' } as const;
+const justifyClasses = { left: 'justify-start', center: 'justify-center', right: 'justify-end' } as const;
+const columnCount = computed(() => props.columns.length + (props.selectable ? 1 : 0));
+
+// Emit row clicks (ignoring clicks on interactive children)
+const handleRowClick = (row: T, event: MouseEvent) => {
+    if ((event.target as HTMLElement).closest('button, a, input, [role=checkbox]')) return;
+    emits('row-click', row, event);
+};
+</script>
+
+<template>
+    <div data-slot="data-table" :class="cn('relative w-full overflow-auto rounded border border-border bg-card shadow-elevated-sm', props.class)">
+        <table class="w-full caption-bottom border-collapse text-sm">
+            <!-- Header -->
+            <thead :class="cn('bg-surface/80 backdrop-blur', props.stickyHeader && 'sticky top-0 z-10')">
+                <tr class="border-b border-border">
+                    <!-- Select all -->
+                    <th v-if="props.selectable" class="w-12 px-4 py-3">
+                        <Checkbox :model-value="headerCheckboxState" :aria-label="t('uiVintage.dataTable.selectAll')" @update:model-value="toggleAll" />
+                    </th>
+
+                    <!-- Column headers -->
+                    <th v-for="column in props.columns" :key="column.key" :style="column.width ? { width: column.width } : undefined" :aria-sort="props.sort?.key === column.key ? (props.sort.direction === 'asc' ? 'ascending' : 'descending') : undefined" :class="cn('h-11 px-4 text-xs font-semibold whitespace-nowrap text-muted-foreground', alignClasses[column.align ?? 'left'], column.headerClass)">
+                        <slot :name="`header-${column.key}`" :column="column">
+                            <button v-if="column.sortable" type="button" :class="cn('group/sort -mx-1.5 inline-flex cursor-pointer items-center gap-1.5 rounded-sm px-1.5 py-1 outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/45', props.sort?.key === column.key && 'text-foreground', justifyClasses[column.align ?? 'left'])" @click="toggleSort(column)">
+                                {{ column.label }}
+                                <HugeiconsIcon :icon="ArrowUp01Icon" :class="cn('size-3.5 transition-[rotate,opacity,color] duration-300 ease-spring', props.sort?.key === column.key ? 'text-primary opacity-100' : 'opacity-0 group-hover/sort:opacity-50', props.sort?.key === column.key && props.sort.direction === 'desc' && 'rotate-180')" />
+                            </button>
+                            <template v-else>
+                                {{ column.label }}
+                            </template>
+                        </slot>
+                    </th>
+                </tr>
+            </thead>
+
+            <!-- Loading rows -->
+            <tbody v-if="props.loading">
+                <tr v-for="index in props.loadingRows" :key="`loading-${index}`" class="border-b border-border last:border-b-0">
+                    <td v-if="props.selectable" class="px-4 py-3">
+                        <Skeleton class="size-5" />
+                    </td>
+                    <td v-for="column in props.columns" :key="column.key" class="px-4 py-3">
+                        <Skeleton class="h-4" :style="{ width: `${45 + ((index * 17 + column.key.length * 11) % 45)}%` }" />
+                    </td>
+                </tr>
+            </tbody>
+
+            <!-- Empty state -->
+            <tbody v-else-if="sortedRows.length === 0">
+                <tr>
+                    <td :colspan="columnCount" class="px-4 py-12">
+                        <slot name="empty">
+                            <div class="flex flex-col items-center gap-2 text-center text-muted-foreground">
+                                <HugeiconsIcon :icon="PackageIcon" class="size-8 animate-uv-float opacity-40" />
+                                <span class="text-xs sm:text-sm">{{ resolvedEmptyText }}</span>
+                            </div>
+                        </slot>
+                    </td>
+                </tr>
+            </tbody>
+
+            <!-- Rows (animated when sorted, added, or removed) -->
+            <TransitionGroup v-else tag="tbody" name="uv-data-table-row">
+                <tr v-for="(row, index) in sortedRows" :key="getRowKey(row)" :data-state="selectedSet.has(getRowKey(row)) ? 'selected' : undefined" :class="cn('border-b border-border transition-colors duration-150 last:border-b-0 hover:bg-surface/70 data-[state=selected]:bg-primary/5', props.rowClickable && 'cursor-pointer')" @click="handleRowClick(row, $event)">
+                    <!-- Row selection -->
+                    <td v-if="props.selectable" class="px-4 py-3">
+                        <Checkbox :model-value="selectedSet.has(getRowKey(row))" :aria-label="t('uiVintage.dataTable.selectRow')" @update:model-value="toggleRow(row)" />
+                    </td>
+
+                    <!-- Cells -->
+                    <td v-for="column in props.columns" :key="column.key" :class="cn('px-4 py-3 align-middle text-xs whitespace-nowrap md:text-sm', alignClasses[column.align ?? 'left'], column.class)">
+                        <slot :name="`cell-${column.key}`" :row="row" :value="getCellValue(row, column)" :index="index">
+                            {{ formatCell(row, column) }}
+                        </slot>
+                    </td>
+                </tr>
+            </TransitionGroup>
+        </table>
+    </div>
+</template>
+
+<style>
+.uv-data-table-row-move {
+    transition: transform 0.45s var(--ease-spring);
+}
+
+.uv-data-table-row-enter-active {
+    transition: opacity 0.3s var(--ease-out-expo), transform 0.4s var(--ease-spring);
+}
+
+.uv-data-table-row-leave-active {
+    transition: opacity 0.18s var(--ease-snappy);
+}
+
+.uv-data-table-row-enter-from {
+    opacity: 0;
+    transform: translateY(-6px);
+}
+
+.uv-data-table-row-leave-to {
+    opacity: 0;
+}
+</style>

package/src/components/ui/data-table/index.ts

@@ -0,0 +1,20 @@
+export { default as DataTable } from './DataTable.vue';
+
+export type DataTableSortDirection = 'asc' | 'desc';
+
+export interface DataTableSort {
+    key: string;
+    direction: DataTableSortDirection;
+}
+
+export interface DataTableColumn<T> {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+    class?: string;
+    headerClass?: string;
+    format?: (value: unknown, row: T) => string;
+    sortValue?: (row: T) => string | number | null | undefined;
+}

package/src/components/ui/date-picker/DatePicker.vue

@@ -5,6 +5,7 @@ import { Calendar03Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import type { DateValue } from 'reka-ui';
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { Button } from '../button';
 import { Calendar } from '../calendar';
@@ -21,7 +22,6 @@ const props = withDefaults(defineProps<{
     class?: HTMLAttributes['class'];
     contentClass?: HTMLAttributes['class'];
 }>(), {
-    placeholder: 'Pick a date',
     disabled: false
 });
 
@@ -30,6 +30,8 @@ const emits = defineEmits<{
     (e: 'update:modelValue', payload: DateValue | undefined): void;
 }>();
 
+const { t, locale } = useI18n();
+const resolvedPlaceholder = computed(() => props.placeholder || t('uiVintage.datePicker.placeholder'));
 const internalDate = ref<DateValue | undefined>(props.defaultValue);
 const isControlled = computed(() => props.modelValue !== undefined);
 
@@ -38,7 +40,6 @@ const date = computed({
         (isControlled.value ? props.modelValue : internalDate.value) as any,
     set: (value: DateValue | undefined) => {
         if (!isControlled.value) internalDate.value = value;
-
         emits('update:modelValue', value);
     },
 });
@@ -47,28 +48,23 @@ const defaultPlaceholder = computed(
     () => (date.value ?? today(getLocalTimeZone())) as any,
 );
 
-const formatter = new DateFormatter('en-US', {
+// Format the selected date in the active locale
+const formatter = computed(() => new DateFormatter(locale.value || 'en-US', {
     dateStyle: 'long',
-});
+}));
 </script>
 
 <template>
     <Popover v-slot="{ close }">
+        <!-- Date picker trigger -->
         <PopoverTrigger as-child>
-            <Button variant="secondary" :disabled="disabled" :class="cn(
-                'h-13 w-60 justify-start text-left font-normal enabled:active:scale-100',
-                !date && 'text-muted-foreground',
-                props.class,
-            )
-                ">
+            <Button variant="secondary" :disabled="disabled" :class="cn('h-13 w-60 justify-start text-left font-normal enabled:active:scale-100', !date && 'text-muted-foreground', props.class,)">
                 <HugeiconsIcon :icon="Calendar03Icon" class="size-4" />
-                {{
-                    date
-                        ? formatter.format(date.toDate(getLocalTimeZone()))
-                        : placeholder
-                }}
+                {{ date ? formatter.format(date.toDate(getLocalTimeZone())) : resolvedPlaceholder }}
             </Button>
         </PopoverTrigger>
+
+        <!-- Date picker content -->
         <PopoverContent :class="cn('w-auto p-0', props.contentClass)" align="start">
             <Calendar v-model="date" :default-placeholder="defaultPlaceholder" :min-value="props.minValue" :max-value="props.maxValue" layout="month-and-year" initial-focus @update:model-value="close" />
         </PopoverContent>

package/src/components/ui/date-time-picker/DateTimePicker.vue

@@ -25,8 +25,7 @@ const props = withDefaults(defineProps<{
     minDate: null,
     maxDate: null,
     step: 60,
-    disabled: false,
-    datePlaceholder: 'Pick a date'
+    disabled: false
 });
 
 // Emits
@@ -158,11 +157,7 @@ const maxTimeValue = computed(() => {
 </script>
 
 <template>
-    <div :class="cn(
-        'grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]',
-        props.class,
-    )
-        ">
+    <div :class="cn('grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1.35fr)_minmax(0,1fr)]', props.class,)">
         <div>
             <DatePicker v-model="dateValue" :disabled="props.disabled" :placeholder="props.datePlaceholder" :min-value="minDateValue" :max-value="maxDateValue" :class="cn('w-full', props.datePickerClass)" :content-class="props.datePickerContentClass" />
         </div>

package/src/components/ui/dialog/DialogContent.vue

@@ -3,6 +3,9 @@ import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { Button } from '../button';
 import DialogOverlay from './DialogOverlay.vue';
@@ -19,6 +22,8 @@ const props = withDefaults(defineProps<DialogContentProps & {
     showCloseButton: false
 });
 
+const { t } = useI18n();
+
 // Emits
 const emits = defineEmits<DialogContentEmits>();
 
@@ -31,16 +36,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <DialogPortal>
         <DialogOverlay />
         <DialogContent data-slot="dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 outline-none duration-200 sm:max-w-106.25',
+            'uv-modal-motion bg-card text-card-foreground fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border border-border p-6 shadow-elevated-xl outline-none sm:max-w-106.25',
             props.class
         )
             ">
             <slot />
 
             <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
-                <Button variant="ghost" size="icon-sm" class="absolute top-4 right-4 p-0.5">
-                    <span aria-hidden="true">X</span>
-                    <span class="sr-only">Close</span>
+                <Button variant="ghost" size="icon-sm" class="group/close absolute top-3 right-3 size-8 p-0.5">
+                    <HugeiconsIcon :icon="Cancel01Icon" aria-hidden="true" class="transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
+                    <span class="sr-only">{{ t('uiVintage.buttons.close') }}</span>
                 </Button>
             </DialogClose>
         </DialogContent>

package/src/components/ui/dialog/DialogOverlay.vue

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 
 <template>
     <DialogOverlay data-slot="dialog-overlay" v-bind="delegatedProps" :class="cn(
-        'fixed inset-0 isolate z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'uv-overlay-motion fixed inset-0 isolate z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
         props.class
     )
         ">

package/src/components/ui/dialog/DialogScrollContent.vue

@@ -3,6 +3,9 @@ import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { Button } from '../button';
 
@@ -18,6 +21,8 @@ const props = withDefaults(defineProps<DialogContentProps & {
     showCloseButton: false
 });
 
+const { t } = useI18n();
+
 // Emits
 const emits = defineEmits<DialogContentEmits>();
 
@@ -28,9 +33,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
     <DialogPortal>
-        <DialogOverlay class="fixed inset-0 isolate z-50 grid place-items-center overflow-y-auto bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0">
+        <DialogOverlay class="uv-overlay-motion fixed inset-0 isolate z-50 grid place-items-center overflow-y-auto bg-black/40 backdrop-blur-[3px] dark:bg-black/60">
             <DialogContent :class="cn(
-                'relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground outline-none duration-200 sm:max-w-106.25',
+                'uv-modal-motion relative z-50 my-6 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded border border-border bg-card p-6 text-card-foreground shadow-elevated-xl outline-none sm:max-w-106.25',
                 props.class
             )
                 " v-bind="{ ...$attrs, ...forwarded }" @pointer-down-outside="
@@ -48,9 +53,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
                 <slot />
 
                 <DialogClose v-if="props.showCloseButton" data-slot="dialog-close" as-child>
-                    <Button variant="ghost" size="icon-sm" class="absolute top-4 right-4 p-0.5">
-                        <span aria-hidden="true">X</span>
-                        <span class="sr-only">Close</span>
+                    <Button variant="ghost" size="icon-sm" class="group/close absolute top-3 right-3 size-8 p-0.5">
+                        <HugeiconsIcon :icon="Cancel01Icon" aria-hidden="true" class="transition-transform duration-300 ease-spring group-hover/close:rotate-90" />
+                        <span class="sr-only">{{ t('uiVintage.buttons.close') }}</span>
                     </Button>
                 </DialogClose>
             </DialogContent>

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

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

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Tick02Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { DropdownMenuCheckboxItem, DropdownMenuItemIndicator, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { dropdownMenuItemClass } from './classes';
+
+// Props
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
+
+// Emits
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DropdownMenuCheckboxItem data-slot="dropdown-menu-checkbox-item" v-bind="forwarded" :class="cn(dropdownMenuItemClass, 'pl-9 data-[state=checked]:text-foreground', props.class)">
+        <!-- Check indicator (pops in when checked) -->
+        <span class="pointer-events-none absolute left-3 flex size-4 items-center justify-center text-primary">
+            <DropdownMenuItemIndicator>
+                <slot name="indicator-icon">
+                    <HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+                </slot>
+            </DropdownMenuItemIndicator>
+        </span>
+
+        <slot />
+    </DropdownMenuCheckboxItem>
+</template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { dropdownMenuStaggerClass, dropdownMenuSurfaceClass } from './classes';
+
+defineOptions({
+    inheritAttrs: false
+});
+
+// Props
+const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
+    align: 'start',
+    sideOffset: 6,
+    collisionPadding: 8
+});
+
+// Emits
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DropdownMenuPortal>
+        <DropdownMenuContent data-slot="dropdown-menu-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+            dropdownMenuSurfaceClass,
+            'max-h-(--reka-dropdown-menu-content-available-height)',
+            dropdownMenuStaggerClass,
+            props.class
+        )
+            ">
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
+</template>

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

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

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { DropdownMenuItemEmits, DropdownMenuItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { dropdownMenuItemClass } from './classes';
+
+// Props
+const props = withDefaults(defineProps<DropdownMenuItemProps & {
+    class?: HTMLAttributes['class'];
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}>(), {
+    variant: 'default'
+});
+
+// Emits
+const emits = defineEmits<DropdownMenuItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset', 'variant');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DropdownMenuItem data-slot="dropdown-menu-item" :data-inset="props.inset ? '' : undefined" :data-variant="props.variant" v-bind="forwarded" :class="cn(
+        dropdownMenuItemClass,
+        props.variant === 'destructive' && 'text-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive',
+        props.class
+    )
+        ">
+        <slot />
+    </DropdownMenuItem>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DropdownMenuLabelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuLabel, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<DropdownMenuLabelProps & {
+    class?: HTMLAttributes['class'];
+    inset?: boolean;
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DropdownMenuLabel data-slot="dropdown-menu-label" :data-inset="props.inset ? '' : undefined" v-bind="forwardedProps" :class="cn(
+        'px-3 pt-2 pb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground select-none data-inset:pl-9',
+        props.class
+    )
+        ">
+        <slot />
+    </DropdownMenuLabel>
+</template>

package/src/components/ui/dropdown-menu/DropdownMenuPortal.vue

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

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'reka-ui';
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'reka-ui';
+
+// Props
+const props = defineProps<DropdownMenuRadioGroupProps>();
+
+// Emits
+const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
+        <slot />
+    </DropdownMenuRadioGroup>
+</template>