@brumaombra/ui-vintage 0.7.13 → 0.8.1

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { dropdownMenuItemClass } from './classes';
+
+// Props
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>();
+
+// Emits
+const emits = defineEmits<DropdownMenuRadioItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <DropdownMenuRadioItem data-slot="dropdown-menu-radio-item" v-bind="forwarded" :class="cn(dropdownMenuItemClass, 'group/dropdown-radio-item pl-9 data-[state=checked]:text-foreground', props.class)">
+        <!-- Radio ring with a dot that pops in when checked -->
+        <span class="pointer-events-none absolute left-3 flex size-4 items-center justify-center rounded-full border border-border-strong transition-colors duration-150 group-data-[state=checked]/dropdown-radio-item:border-primary">
+            <DropdownMenuItemIndicator>
+                <slot name="indicator-icon">
+                    <span class="block size-2 animate-uv-pop rounded-full bg-primary" />
+                </slot>
+            </DropdownMenuItemIndicator>
+        </span>
+
+        <slot />
+    </DropdownMenuRadioItem>
+</template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { DropdownMenuSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DropdownMenuSeparator } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<DropdownMenuSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <DropdownMenuSeparator data-slot="dropdown-menu-separator" v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<{
+    class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+    <span data-slot="dropdown-menu-shortcut" :class="cn('ml-auto pl-4 text-[11px] font-semibold tracking-widest text-muted-foreground', props.class)">
+        <slot />
+    </span>
+</template>

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

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

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

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

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DropdownMenuSubTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { DropdownMenuSubTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { dropdownMenuItemClass } from './classes';
+
+// Props
+const props = defineProps<DropdownMenuSubTriggerProps & {
+    class?: HTMLAttributes['class'];
+    inset?: boolean;
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <DropdownMenuSubTrigger data-slot="dropdown-menu-sub-trigger" :data-inset="props.inset ? '' : undefined" v-bind="forwardedProps" :class="cn(
+        'group/dropdown-sub-trigger',
+        dropdownMenuItemClass,
+        'data-[state=open]:bg-accent data-[state=open]:text-foreground',
+        props.class
+    )
+        ">
+        <slot />
+
+        <!-- Chevron nudges right while the sub menu is open -->
+        <span class="ml-auto flex items-center transition-transform duration-300 ease-spring group-data-[state=open]/dropdown-sub-trigger:translate-x-1">
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 opacity-60" />
+        </span>
+    </DropdownMenuSubTrigger>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'reka-ui';
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui';
+
+// Props
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+    <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
+        <slot />
+    </DropdownMenuTrigger>
+</template>

package/src/components/ui/dropdown-menu/classes.ts

@@ -0,0 +1,24 @@
+// Shared surface classes for the root menu and sub menus
+export const dropdownMenuSurfaceClass = 'uv-floating-motion bg-popover text-popover-foreground z-50 min-w-48 overflow-x-hidden overflow-y-auto rounded border border-border p-1 shadow-elevated-lg outline-hidden';
+
+// Lightweight entrance stagger for the first ~8 direct children (runs once on open, not on highlight)
+export const dropdownMenuStaggerClass = [
+    '[&[data-state=open]>*]:animate-[uv-float-in_240ms_var(--ease-out-expo)_both] [&>*]:[--uv-float-offset:-3px]',
+    '[&[data-state=open]>*:nth-child(2)]:[animation-delay:16ms]',
+    '[&[data-state=open]>*:nth-child(3)]:[animation-delay:32ms]',
+    '[&[data-state=open]>*:nth-child(4)]:[animation-delay:48ms]',
+    '[&[data-state=open]>*:nth-child(5)]:[animation-delay:64ms]',
+    '[&[data-state=open]>*:nth-child(6)]:[animation-delay:80ms]',
+    '[&[data-state=open]>*:nth-child(7)]:[animation-delay:96ms]',
+    '[&[data-state=open]>*:nth-child(8)]:[animation-delay:112ms]',
+    '[&[data-state=open]>*:nth-child(n+9)]:[animation-delay:128ms]'
+].join(' ');
+
+// Shared item classes (items, checkbox/radio items, sub triggers)
+export const dropdownMenuItemClass = [
+    'relative flex cursor-pointer items-center gap-3 rounded px-3 py-2 text-xs font-semibold text-muted-foreground outline-hidden select-none transition-colors duration-150 sm:text-sm',
+    'data-highlighted:bg-accent data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9',
+    '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+    // Leading icons nudge slightly when the item is highlighted
+    '[&>svg]:transition-transform [&>svg]:duration-300 [&>svg]:ease-spring [&[data-highlighted]>svg]:translate-x-0.5 [&[data-highlighted]>svg]:scale-110'
+].join(' ');

package/src/components/ui/dropdown-menu/index.ts

@@ -0,0 +1,15 @@
+export { default as DropdownMenu } from './DropdownMenu.vue';
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuPortal } from './DropdownMenuPortal.vue';
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';

package/src/components/ui/field/FieldDescription.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 
 <template>
     <p data-slot="field-description" :class="cn(
-        'text-xs leading-5 font-normal text-(--text-secondary-light) dark:text-(--text-secondary-dark) group-has-data-[orientation=horizontal]/field:text-balance',
+        'text-xs leading-5 font-normal text-muted-foreground group-has-data-[orientation=horizontal]/field:text-balance',
         'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',
         '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
         props.class

package/src/components/ui/field/FieldError.vue

@@ -22,6 +22,9 @@ const content = computed(() => {
         ).values()
     ];
 
+    // Nothing to show when every entry is empty
+    if (uniqueErrors.length === 0) return null;
+
     if (uniqueErrors.length === 1 && uniqueErrors[0]) {
         return typeof uniqueErrors[0] === 'string'
             ? uniqueErrors[0]
@@ -35,7 +38,7 @@ const content = computed(() => {
 </script>
 
 <template>
-    <div v-if="$slots.default || content" role="alert" data-slot="field-error" :class="cn('text-destructive text-xs font-normal', props.class)">
+    <div v-if="$slots.default || content" role="alert" data-slot="field-error" :class="cn('text-destructive animate-[uv-fade-up_0.3s_var(--ease-out-expo)_both] text-xs font-normal', props.class)">
         <slot v-if="$slots.default" />
 
         <template v-else-if="typeof content === 'string'">

package/src/components/ui/file-dropzone/FileDropzone.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
+import type { FileRejection } from '.';
+import { Cancel01Icon, CloudUploadIcon, Doc01Icon, File01Icon, FileZipIcon, Image01Icon, MusicNote01Icon, Pdf01Icon, Video01Icon, Xls01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed, onBeforeUnmount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { Button, buttonVariants } from '../button';
+import { formatFileSize, isFileAccepted } from '.';
+
+// Props
+const props = withDefaults(defineProps<{
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    title?: string;
+    description?: string;
+    class?: HTMLAttributes['class'];
+}>(), {
+    multiple: true,
+    disabled: false,
+});
+
+// Emits
+const emits = defineEmits<{
+    reject: [rejections: FileRejection[]];
+}>();
+
+// Selected files (v-model)
+const files = defineModel<File[]>({ default: () => [] });
+
+const { t } = useI18n();
+
+const inputRef = ref<HTMLInputElement | null>(null);
+const isDragging = ref(false);
+const isRejected = ref(false);
+let dragDepth = 0;
+let rejectTimer: ReturnType<typeof setTimeout> | undefined;
+
+// Resolved texts
+const resolvedTitle = computed(() => props.title || t('uiVintage.fileDropzone.title'));
+const resolvedDescription = computed(() => props.description || t('uiVintage.fileDropzone.description'));
+
+// Constraint hints shown under the description
+const hints = computed(() => {
+    const list: string[] = [];
+    if (props.maxSize) list.push(t('uiVintage.fileDropzone.maxSize', { size: formatFileSize(props.maxSize) }));
+    if (props.multiple && props.maxFiles) list.push(t('uiVintage.fileDropzone.maxFiles', { count: props.maxFiles }));
+    return list;
+});
+
+// Stable keys for the file list
+const fileIds = new WeakMap<File, number>();
+let nextFileId = 0;
+function getFileId(file: File) {
+    if (!fileIds.has(file)) fileIds.set(file, nextFileId++);
+    return fileIds.get(file)!;
+}
+
+// Pick an icon from the file type or extension
+function getFileIcon(file: File): HugeiconsIconDefinition {
+    const type = file.type.toLowerCase();
+    const extension = file.name.split('.').pop()?.toLowerCase() ?? '';
+    if (type.startsWith('image/')) return Image01Icon;
+    if (type.startsWith('video/')) return Video01Icon;
+    if (type.startsWith('audio/')) return MusicNote01Icon;
+    if (type === 'application/pdf' || extension === 'pdf') return Pdf01Icon;
+    if (['zip', 'rar', '7z', 'tar', 'gz'].includes(extension)) return FileZipIcon;
+    if (['doc', 'docx', 'odt', 'rtf', 'txt', 'md'].includes(extension)) return Doc01Icon;
+    if (['xls', 'xlsx', 'ods', 'csv'].includes(extension)) return Xls01Icon;
+    return File01Icon;
+}
+
+// Briefly shake the drop zone when something is refused
+function flashRejected() {
+    isRejected.value = false;
+    clearTimeout(rejectTimer);
+    requestAnimationFrame(() => {
+        isRejected.value = true;
+        rejectTimer = setTimeout(() => (isRejected.value = false), 450);
+    });
+}
+
+// Validate incoming files and merge them into the model
+function addFiles(incoming: File[]) {
+    if (props.disabled || incoming.length === 0) return;
+    const rejections: FileRejection[] = [];
+    const accepted: File[] = [];
+
+    // Type and size checks
+    for (const file of incoming) {
+        if (!isFileAccepted(file, props.accept)) rejections.push({ file, reason: 'type' });
+        else if (props.maxSize !== undefined && file.size > props.maxSize) rejections.push({ file, reason: 'size' });
+        else accepted.push(file);
+    }
+
+    let next: File[];
+    if (!props.multiple) {
+        // Single mode keeps only the first valid file
+        next = accepted.slice(0, 1);
+        for (const file of accepted.slice(1)) rejections.push({ file, reason: 'count' });
+        if (next.length === 0) next = [...files.value];
+    } else {
+        // Skip exact duplicates already in the list
+        const isDuplicate = (file: File) => files.value.some(existing => existing.name === file.name && existing.size === file.size && existing.lastModified === file.lastModified);
+        const fresh = accepted.filter(file => !isDuplicate(file));
+
+        // Enforce the max file count
+        const room = props.maxFiles !== undefined ? Math.max(0, props.maxFiles - files.value.length) : fresh.length;
+        for (const file of fresh.slice(room)) rejections.push({ file, reason: 'count' });
+        next = [...files.value, ...fresh.slice(0, room)];
+    }
+
+    if (next.length !== files.value.length || next.some((file, index) => file !== files.value[index])) files.value = next;
+    if (rejections.length > 0) {
+        emits('reject', rejections);
+        flashRejected();
+    }
+}
+
+// Remove a file from the list
+function removeFile(file: File) {
+    files.value = files.value.filter(existing => existing !== file);
+}
+
+// Open the native file picker
+function openPicker() {
+    if (props.disabled) return;
+    inputRef.value?.click();
+}
+
+// Native picker selection
+function onInputChange(event: Event) {
+    const input = event.target as HTMLInputElement;
+    addFiles(Array.from(input.files ?? []));
+    input.value = '';
+}
+
+// Drag tracking (depth counter avoids flicker when crossing child elements)
+function onDragEnter(event: DragEvent) {
+    if (props.disabled || !event.dataTransfer?.types.includes('Files')) return;
+    dragDepth++;
+    isDragging.value = true;
+}
+
+function onDragOver(event: DragEvent) {
+    if (props.disabled || !event.dataTransfer) return;
+    event.dataTransfer.dropEffect = 'copy';
+}
+
+function onDragLeave() {
+    if (!isDragging.value) return;
+    dragDepth = Math.max(0, dragDepth - 1);
+    if (dragDepth === 0) isDragging.value = false;
+}
+
+function onDrop(event: DragEvent) {
+    dragDepth = 0;
+    isDragging.value = false;
+    if (props.disabled) return;
+    addFiles(Array.from(event.dataTransfer?.files ?? []));
+}
+
+onBeforeUnmount(() => clearTimeout(rejectTimer));
+</script>
+
+<template>
+    <div data-slot="file-dropzone" :class="cn('flex w-full flex-col gap-3', props.class)">
+        <!-- Drop area -->
+        <div role="button" :tabindex="props.disabled ? -1 : 0" :aria-disabled="props.disabled || undefined" :aria-label="resolvedTitle" :data-dragging="isDragging ? '' : undefined" :data-disabled="props.disabled ? '' : undefined" :class="cn(
+            'group/dropzone relative isolate flex min-h-44 cursor-pointer select-none flex-col items-center justify-center gap-3 rounded border-2 border-dashed border-border bg-surface/50 px-6 py-8 text-center outline-none',
+            '[transition:border-color_150ms,background-color_220ms,box-shadow_220ms,transform_420ms_var(--ease-spring)]',
+            'hover:border-border-strong hover:bg-surface focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-[0.99] active:duration-75',
+            'data-dragging:scale-[1.01] data-dragging:border-transparent data-dragging:bg-primary/5 data-dragging:shadow-[0_0_0_4px_color-mix(in_oklab,var(--primary)_12%,transparent)] data-dragging:hover:border-transparent data-dragging:hover:bg-primary/5',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-disabled:hover:border-border data-disabled:hover:bg-surface/50 data-disabled:active:scale-100',
+            isRejected && 'animate-uv-shake border-destructive/70'
+        )" @click="openPicker" @keydown.enter.prevent="openPicker" @keydown.space.prevent="openPicker" @dragenter.prevent="onDragEnter" @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
+            <!-- Marching dashed border while dragging -->
+            <span aria-hidden="true" class="uv-dropzone-ants pointer-events-none absolute -inset-0.5 rounded opacity-0 transition-opacity duration-150 group-data-dragging/dropzone:opacity-100" />
+
+            <!-- Upload icon (floats up and grows while dragging) -->
+            <span aria-hidden="true" class="relative flex size-14 items-center justify-center rounded border border-border bg-card text-muted-foreground shadow-elevated-sm transition-[translate,scale,color,border-color,box-shadow] duration-420 ease-bounce group-hover/dropzone:-translate-y-0.5 group-hover/dropzone:text-foreground group-data-dragging/dropzone:-translate-y-2 group-data-dragging/dropzone:scale-115 group-data-dragging/dropzone:border-primary/50 group-data-dragging/dropzone:text-primary group-data-dragging/dropzone:shadow-glow">
+                <HugeiconsIcon :icon="CloudUploadIcon" class="size-6 group-data-dragging/dropzone:animate-uv-float" />
+            </span>
+
+            <!-- Texts -->
+            <div class="flex flex-col items-center gap-1">
+                <p class="text-xs font-semibold text-foreground sm:text-sm">
+                    {{ isDragging ? t('uiVintage.fileDropzone.dropActive') : resolvedTitle }}
+                </p>
+                <p class="text-xs text-muted-foreground">{{ resolvedDescription }}</p>
+                <p v-if="hints.length" class="text-xs text-muted-foreground/80">{{ hints.join(' · ') }}</p>
+            </div>
+
+            <!-- Browse hint (decorative, the whole zone is the button) -->
+            <span aria-hidden="true" :class="cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'pointer-events-none transition-opacity group-data-dragging/dropzone:opacity-0')">
+                {{ t('uiVintage.fileDropzone.browse') }}
+            </span>
+
+            <!-- Hidden native input -->
+            <input ref="inputRef" type="file" class="hidden" tabindex="-1" :accept="props.accept" :multiple="props.multiple" :disabled="props.disabled" @change="onInputChange" @click.stop>
+        </div>
+
+        <!-- Selected files -->
+        <TransitionGroup tag="ul" data-slot="file-dropzone-list" :aria-label="t('uiVintage.fileDropzone.files')" class="flex flex-col" enter-active-class="transition-[opacity,translate,filter] duration-420 ease-out-expo" enter-from-class="translate-y-2.5 opacity-0 blur-[3px]" leave-active-class="transition-[grid-template-rows,opacity,scale] duration-220 ease-snappy" leave-to-class="grid-rows-[0fr] scale-[0.98] opacity-0">
+            <li v-for="file in files" :key="getFileId(file)" class="grid grid-rows-[1fr]">
+                <div class="min-h-0 overflow-hidden">
+                    <div class="pb-2">
+                        <!-- File row -->
+                        <div data-slot="file-dropzone-item" class="flex items-center gap-3 rounded border border-border bg-card py-2 pr-2 pl-3 shadow-elevated-sm">
+                            <span class="flex size-9 shrink-0 items-center justify-center rounded-sm bg-surface text-muted-foreground">
+                                <HugeiconsIcon :icon="getFileIcon(file)" class="size-4.5" />
+                            </span>
+                            <div class="flex min-w-0 flex-1 flex-col">
+                                <span class="truncate text-xs font-semibold text-foreground sm:text-sm" :title="file.name">{{ file.name }}</span>
+                                <span class="text-xs text-muted-foreground tabular-nums">{{ formatFileSize(file.size) }}</span>
+                            </div>
+                            <Button variant="ghost" size="icon-sm" :disabled="props.disabled" :aria-label="t('uiVintage.fileDropzone.remove', { name: file.name })" class="hover:text-destructive" @click="removeFile(file)">
+                                <HugeiconsIcon :icon="Cancel01Icon" class="size-4" />
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+            </li>
+        </TransitionGroup>
+    </div>
+</template>
+
+<style>
+/* Animated dashed border shown while files are dragged over the drop zone */
+.uv-dropzone-ants {
+    background-image:
+        linear-gradient(90deg, var(--primary) 55%, transparent 0),
+        linear-gradient(90deg, var(--primary) 55%, transparent 0),
+        linear-gradient(0deg, var(--primary) 55%, transparent 0),
+        linear-gradient(0deg, var(--primary) 55%, transparent 0);
+    background-size: 16px 2px, 16px 2px, 2px 16px, 2px 16px;
+    background-position: 0 0, 0 100%, 0 0, 100% 0;
+    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+    animation: uv-dropzone-march 0.7s linear infinite;
+}
+
+@keyframes uv-dropzone-march {
+    to { background-position: 16px 0, -16px 100%, 0 -16px, 100% 16px; }
+}
+</style>

package/src/components/ui/file-dropzone/index.ts

@@ -0,0 +1,35 @@
+export { default as FileDropzone } from './FileDropzone.vue';
+
+export type FileRejectionReason = 'type' | 'size' | 'count';
+
+export type FileRejection = {
+    file: File;
+    reason: FileRejectionReason;
+};
+
+// Format a byte count as a human readable size (1024 based)
+export function formatFileSize(bytes: number): string {
+    if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const value = bytes / 1024 ** exponent;
+
+    // One decimal for small values, none for bytes or large values
+    const digits = exponent === 0 || value >= 10 ? 0 : 1;
+    return `${value.toFixed(digits)} ${units[exponent]}`;
+}
+
+// Check a file against an accept string (".pdf,image/*,application/json")
+export function isFileAccepted(file: File, accept: string | undefined): boolean {
+    if (!accept) return true;
+    const tokens = accept.split(',').map(token => token.trim().toLowerCase()).filter(Boolean);
+    if (tokens.length === 0) return true;
+
+    const name = file.name.toLowerCase();
+    const type = (file.type || '').toLowerCase();
+    return tokens.some((token) => {
+        if (token.startsWith('.')) return name.endsWith(token);
+        if (token.endsWith('/*')) return type.startsWith(token.slice(0, -1));
+        return type === token;
+    });
+}

package/src/components/ui/hover-card/HoverCard.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui';
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui';
+
+// Props
+const props = withDefaults(defineProps<HoverCardRootProps>(), {
+    openDelay: 350,
+    closeDelay: 150
+});
+
+// Emits
+const emits = defineEmits<HoverCardRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <HoverCardRoot v-slot="slotProps" data-slot="hover-card" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </HoverCardRoot>
+</template>

package/src/components/ui/hover-card/HoverCardContent.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+defineOptions({
+    inheritAttrs: false
+});
+
+// Props
+const props = withDefaults(defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(), {
+    align: 'center',
+    sideOffset: 8,
+    collisionPadding: 8
+});
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <HoverCardPortal>
+        <HoverCardContent data-slot="hover-card-content" v-bind="{ ...$attrs, ...forwardedProps }" :class="cn(
+            'uv-floating-motion bg-popover text-popover-foreground z-50 w-72 rounded border border-border p-4 text-sm shadow-elevated-lg outline-hidden',
+            props.class
+        )
+            ">
+            <slot />
+        </HoverCardContent>
+    </HoverCardPortal>
+</template>

package/src/components/ui/hover-card/HoverCardTrigger.vue

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

package/src/components/ui/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue';
+export { default as HoverCardContent } from './HoverCardContent.vue';
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue';

package/src/components/ui/input/Input.vue

@@ -23,10 +23,10 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 
 <template>
     <input v-model="modelValue" data-slot="input" :class="cn(
-        'file:text-foreground selection:bg-primary selection:text-primary-foreground h-13 w-full min-w-0 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold text-(--text-primary-light) outline-none transition-all duration-300 ease-in-out placeholder:text-(--text-secondary-light) placeholder:opacity-60 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:placeholder:text-(--text-secondary-dark) sm:text-sm',
-        'focus-visible:border-(--border-hover-light) focus-visible:ring-0 dark:focus-visible:border-(--border-hover-dark)',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        'uv-field h-13 w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
+        'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60 placeholder:transition-opacity focus-visible:placeholder:opacity-40',
+        'file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
         props.class
-    )
-        " />
+    )" />
 </template>