@brumaombra/ui-vintage 0.9.0 → 0.9.2

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

@@ -3,33 +3,33 @@ export { default as FileDropzone } from './FileDropzone.vue';
 export type FileRejectionReason = 'type' | 'size' | 'count';
 
 export type FileRejection = {
-    file: File;
-    reason: FileRejectionReason;
+	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;
+	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]}`;
+	// 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;
+	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;
-    });
+	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

@@ -4,8 +4,8 @@ import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui';
 
 // Props
 const props = withDefaults(defineProps<HoverCardRootProps>(), {
-    openDelay: 350,
-    closeDelay: 150
+	openDelay: 350,
+	closeDelay: 150
 });
 
 // Emits
@@ -15,7 +15,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <HoverCardRoot v-slot="slotProps" data-slot="hover-card" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </HoverCardRoot>
+	<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

@@ -6,14 +6,14 @@ import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(), {
-    align: 'center',
-    sideOffset: 8,
-    collisionPadding: 8
+	align: 'center',
+	sideOffset: 8,
+	collisionPadding: 8
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -21,13 +21,13 @@ 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>
+	<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

@@ -7,7 +7,7 @@ const props = defineProps<HoverCardTriggerProps>();
 </script>
 
 <template>
-    <HoverCardTrigger data-slot="hover-card-trigger" v-bind="props">
-        <slot />
-    </HoverCardTrigger>
+	<HoverCardTrigger data-slot="hover-card-trigger" v-bind="props">
+		<slot />
+	</HoverCardTrigger>
 </template>

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

@@ -6,19 +6,19 @@ import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = defineProps<{
-    defaultValue?: string | number;
-    modelValue?: string | number;
-    class?: HTMLAttributes['class'];
+	defaultValue?: string | number;
+	modelValue?: string | number;
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: string | number): void;
+	(e: 'update:modelValue', payload: string | number): void;
 }>();
 
 const modelValue = useVModel(props, 'modelValue', emits, {
-    passive: true,
-    defaultValue: props.defaultValue
+	passive: true,
+	defaultValue: props.defaultValue
 });
 
 // Let a surrounding Field label point to this control
@@ -26,11 +26,11 @@ const fieldControlId = useFieldControlId();
 </script>
 
 <template>
-    <input :id="fieldControlId" v-model="modelValue" data-slot="input" :class="cn(
-        '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
-    )" />
+	<input :id="fieldControlId" v-model="modelValue" data-slot="input" :class="cn(
+		'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>

package/src/components/ui/kbd/Kbd.vue

@@ -4,18 +4,18 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    pressed?: boolean;
+	class?: HTMLAttributes['class'];
+	pressed?: boolean;
 }>();
 </script>
 
 <template>
-    <kbd data-slot="kbd" :data-pressed="props.pressed ? '' : undefined" :class="cn(
-        'inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-surface px-1.5 font-mono text-[11px] leading-none font-semibold text-muted-foreground shadow-elevated-sm transition-[translate,border-width,box-shadow] duration-100 ease-snappy [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3',
-        'data-pressed:translate-y-px data-pressed:border-b data-pressed:shadow-none',
-        props.class
-    )
-        ">
-        <slot />
-    </kbd>
+	<kbd data-slot="kbd" :data-pressed="props.pressed ? '' : undefined" :class="cn(
+		'inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded-sm border border-b-2 border-border bg-surface px-1.5 font-mono text-[11px] leading-none font-semibold text-muted-foreground shadow-elevated-sm transition-[translate,border-width,box-shadow] duration-100 ease-snappy [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3',
+		'data-pressed:translate-y-px data-pressed:border-b data-pressed:shadow-none',
+		props.class
+	)
+		">
+		<slot />
+	</kbd>
 </template>

package/src/components/ui/kbd/KbdGroup.vue

@@ -6,67 +6,67 @@ import Kbd from './Kbd.vue';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    keys?: string[];
-    pressed?: boolean;
+	class?: HTMLAttributes['class'];
+	keys?: string[];
+	pressed?: boolean;
 }>();
 
 // Default to non-Mac glyphs so SSR output is stable, then refine on the client
 const isMac = ref(false);
 
 onMounted(() => {
-    isMac.value = /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent);
+	isMac.value = /mac|iphone|ipad|ipod/i.test(navigator.platform || navigator.userAgent);
 });
 
 // Map special key names to their display glyph
 const formatKey = (key: string) => {
-    switch (key.toLowerCase()) {
-        case 'mod':
-            return isMac.value ? '⌘' : 'Ctrl';
-        case 'cmd':
-        case 'meta':
-            return isMac.value ? '⌘' : 'Win';
-        case 'ctrl':
-        case 'control':
-            return isMac.value ? '⌃' : 'Ctrl';
-        case 'shift':
-            return '⇧';
-        case 'alt':
-        case 'option':
-            return isMac.value ? '⌥' : 'Alt';
-        case 'enter':
-        case 'return':
-            return '↵';
-        case 'esc':
-        case 'escape':
-            return 'Esc';
-        case 'tab':
-            return 'Tab';
-        case 'backspace':
-            return '⌫';
-        case 'up':
-            return '↑';
-        case 'down':
-            return '↓';
-        case 'left':
-            return '←';
-        case 'right':
-            return '→';
-        case 'space':
-            return 'Space';
-        default:
-            return key.length === 1 ? key.toUpperCase() : key;
-    }
+	switch (key.toLowerCase()) {
+		case 'mod':
+			return isMac.value ? '⌘' : 'Ctrl';
+		case 'cmd':
+		case 'meta':
+			return isMac.value ? '⌘' : 'Win';
+		case 'ctrl':
+		case 'control':
+			return isMac.value ? '⌃' : 'Ctrl';
+		case 'shift':
+			return '⇧';
+		case 'alt':
+		case 'option':
+			return isMac.value ? '⌥' : 'Alt';
+		case 'enter':
+		case 'return':
+			return '↵';
+		case 'esc':
+		case 'escape':
+			return 'Esc';
+		case 'tab':
+			return 'Tab';
+		case 'backspace':
+			return '⌫';
+		case 'up':
+			return '↑';
+		case 'down':
+			return '↓';
+		case 'left':
+			return '←';
+		case 'right':
+			return '→';
+		case 'space':
+			return 'Space';
+		default:
+			return key.length === 1 ? key.toUpperCase() : key;
+	}
 };
 </script>
 
 <template>
-    <span data-slot="kbd-group" :class="cn('inline-flex items-center gap-1', props.class)">
-        <slot>
-            <!-- Keys rendered from the keys prop -->
-            <Kbd v-for="(key, index) in props.keys ?? []" :key="`${key}-${index}`" :pressed="props.pressed">
-                {{ formatKey(key) }}
-            </Kbd>
-        </slot>
-    </span>
+	<span data-slot="kbd-group" :class="cn('inline-flex items-center gap-1', props.class)">
+		<slot>
+			<!-- Keys rendered from the keys prop -->
+			<Kbd v-for="(key, index) in props.keys ?? []" :key="`${key}-${index}`" :pressed="props.pressed">
+				{{ formatKey(key) }}
+			</Kbd>
+		</slot>
+	</span>
 </template>

package/src/components/ui/label/Label.vue

@@ -12,11 +12,11 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <Label data-slot="label" v-bind="delegatedProps" :class="cn(
-        'flex items-center gap-2 text-sm leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        props.class
-    )
-        ">
-        <slot />
-    </Label>
+	<Label data-slot="label" v-bind="delegatedProps" :class="cn(
+		'flex items-center gap-2 text-sm leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+		props.class
+	)
+		">
+		<slot />
+	</Label>
 </template>

package/src/components/ui/native-select/NativeSelect.vue

@@ -2,13 +2,13 @@
 import type { AcceptableValue } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit, useVModel } from '@vueuse/core';
-import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import ArrowDown01Icon from '@hugeicons/core-free-icons/ArrowDown01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { cn } from '../../../lib/utils';
 import { useFieldControlId } from '../field/field-context';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
@@ -16,12 +16,12 @@ const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[]; cl
 
 // Emits
 const emit = defineEmits<{
-    'update:modelValue': AcceptableValue;
+	'update:modelValue': AcceptableValue;
 }>();
 
 const modelValue = useVModel(props, 'modelValue', emit, {
-    passive: true,
-    defaultValue: ''
+	passive: true,
+	defaultValue: ''
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -31,16 +31,16 @@ const fieldControlId = useFieldControlId();
 </script>
 
 <template>
-    <div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper">
-        <select :id="fieldControlId" v-bind="{ ...$attrs, ...delegatedProps }" v-model="modelValue" data-slot="native-select" :class="cn(
-            'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded border bg-transparent px-3 py-2 pr-9 text-sm shadow-elevated-sm transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
-            'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-            'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-            props.class
-        )
-            ">
-            <slot />
-        </select>
-        <HugeiconsIcon :icon="ArrowDown01Icon" class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none" aria-hidden="true" data-slot="native-select-icon" />
-    </div>
+	<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper">
+		<select :id="fieldControlId" v-bind="{ ...$attrs, ...delegatedProps }" v-model="modelValue" data-slot="native-select" :class="cn(
+			'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded border bg-transparent px-3 py-2 pr-9 text-sm shadow-elevated-sm transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+			props.class
+		)
+			">
+			<slot />
+		</select>
+		<HugeiconsIcon :icon="ArrowDown01Icon" class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none" aria-hidden="true" data-slot="native-select-icon" />
+	</div>
 </template>

package/src/components/ui/native-select/NativeSelectOptGroup.vue

@@ -7,7 +7,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-    <optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
-        <slot />
-    </optgroup>
+	<optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+		<slot />
+	</optgroup>
 </template>

package/src/components/ui/native-select/NativeSelectOption.vue

@@ -7,7 +7,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-    <option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
-        <slot />
-    </option>
+	<option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+		<slot />
+	</option>
 </template>