@brumaombra/ui-vintage 0.9.1 → 0.9.2

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

@@ -19,16 +19,16 @@ 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>
+	<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>
+		<slot />
+	</DropdownMenuCheckboxItem>
 </template>

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

@@ -7,14 +7,14 @@ import { cn } from '../../../lib/utils';
 import { dropdownMenuStaggerClass, dropdownMenuSurfaceClass } from './classes';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(), {
-    align: 'start',
-    sideOffset: 6,
-    collisionPadding: 8
+	align: 'start',
+	sideOffset: 6,
+	collisionPadding: 8
 });
 
 // Emits
@@ -25,15 +25,15 @@ 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>
+	<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

@@ -7,7 +7,7 @@ const props = defineProps<DropdownMenuGroupProps>();
 </script>
 
 <template>
-    <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
-        <slot />
-    </DropdownMenuGroup>
+	<DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
+		<slot />
+	</DropdownMenuGroup>
 </template>

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

@@ -8,11 +8,11 @@ import { dropdownMenuItemClass } from './classes';
 
 // Props
 const props = withDefaults(defineProps<DropdownMenuItemProps & {
-    class?: HTMLAttributes['class'];
-    inset?: boolean;
-    variant?: 'default' | 'destructive';
+	class?: HTMLAttributes['class'];
+	inset?: boolean;
+	variant?: 'default' | 'destructive';
 }>(), {
-    variant: 'default'
+	variant: 'default'
 });
 
 // Emits
@@ -23,12 +23,12 @@ 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 before:bg-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive',
-        props.class
-    )
-        ">
-        <slot />
-    </DropdownMenuItem>
+	<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 before:bg-destructive data-highlighted:bg-destructive/10 data-highlighted:text-destructive',
+		props.class
+	)
+		">
+		<slot />
+	</DropdownMenuItem>
 </template>

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

@@ -7,8 +7,8 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<DropdownMenuLabelProps & {
-    class?: HTMLAttributes['class'];
-    inset?: boolean;
+	class?: HTMLAttributes['class'];
+	inset?: boolean;
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class', 'inset');
@@ -16,11 +16,11 @@ 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>
+	<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

@@ -7,7 +7,7 @@ const props = defineProps<DropdownMenuPortalProps>();
 </script>
 
 <template>
-    <DropdownMenuPortal v-bind="props">
-        <slot />
-    </DropdownMenuPortal>
+	<DropdownMenuPortal v-bind="props">
+		<slot />
+	</DropdownMenuPortal>
 </template>

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

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
-        <slot />
-    </DropdownMenuRadioGroup>
+	<DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
+		<slot />
+	</DropdownMenuRadioGroup>
 </template>

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

@@ -17,16 +17,16 @@ 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>
+	<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>
+		<slot />
+	</DropdownMenuRadioItem>
 </template>

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

@@ -12,5 +12,5 @@ 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)" />
+	<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

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	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>
+	<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

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <DropdownMenuSub v-slot="slotProps" data-slot="dropdown-menu-sub" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </DropdownMenuSub>
+	<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

@@ -7,14 +7,14 @@ import { cn } from '../../../lib/utils';
 import { dropdownMenuStaggerClass, dropdownMenuSurfaceClass } from './classes';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>(), {
-    sideOffset: 6,
-    alignOffset: -5,
-    collisionPadding: 8
+	sideOffset: 6,
+	alignOffset: -5,
+	collisionPadding: 8
 });
 
 // Emits
@@ -25,15 +25,15 @@ 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>
+	<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

@@ -10,8 +10,8 @@ import { dropdownMenuItemClass } from './classes';
 
 // Props
 const props = defineProps<DropdownMenuSubTriggerProps & {
-    class?: HTMLAttributes['class'];
-    inset?: boolean;
+	class?: HTMLAttributes['class'];
+	inset?: boolean;
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class', 'inset');
@@ -19,18 +19,18 @@ 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 data-[state=open]:before:scale-y-100',
-        props.class
-    )
-        ">
-        <slot />
+	<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 data-[state=open]:before:scale-y-100',
+		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>
+		<!-- 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

@@ -9,7 +9,7 @@ const forwardedProps = useForwardProps(props);
 </script>
 
 <template>
-    <DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
-        <slot />
-    </DropdownMenuTrigger>
+	<DropdownMenuTrigger data-slot="dropdown-menu-trigger" v-bind="forwardedProps">
+		<slot />
+	</DropdownMenuTrigger>
 </template>

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

@@ -3,24 +3,24 @@ export const dropdownMenuSurfaceClass = 'uv-floating-motion bg-popover text-popo
 
 // 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]'
+	'[&[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',
-    // A primary bar springs onto the highlighted item, like in the command palette
-    'before:absolute before:inset-y-1.5 before:left-0 before:w-0.5 before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-highlighted:before:scale-y-100',
-    // 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'
+	'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',
+	// A primary bar springs onto the highlighted item, like in the command palette
+	'before:absolute before:inset-y-1.5 before:left-0 before:w-0.5 before:scale-y-0 before:rounded-full before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-highlighted:before:scale-y-100',
+	// 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/field/Field.vue

@@ -7,8 +7,8 @@ import { provideFieldContext } from './field-context';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    orientation?: FieldVariants['orientation'];
+	class?: HTMLAttributes['class'];
+	orientation?: FieldVariants['orientation'];
 }>();
 
 // Let FieldLabel point to the control placed in this field
@@ -16,7 +16,7 @@ provideFieldContext();
 </script>
 
 <template>
-    <div role="group" data-slot="field" :data-orientation="orientation" :class="cn(fieldVariants({ orientation }), props.class)">
-        <slot />
-    </div>
+	<div role="group" data-slot="field" :data-orientation="orientation" :class="cn(fieldVariants({ orientation }), props.class)">
+		<slot />
+	</div>
 </template>

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

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="field-content" :class="cn(
-        'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
-        props.class
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="field-content" :class="cn(
+		'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',
+		props.class
+	)
+		">
+		<slot />
+	</div>
 </template>

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

@@ -4,18 +4,18 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <p data-slot="field-description" :class="cn(
-        '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
-    )
-        ">
-        <slot />
-    </p>
+	<p data-slot="field-description" :class="cn(
+		'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
+	)
+		">
+		<slot />
+	</p>
 </template>

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

@@ -5,50 +5,50 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    errors?: Array<string | { message: string | undefined } | undefined>;
+	class?: HTMLAttributes['class'];
+	errors?: Array<string | { message: string | undefined } | undefined>;
 }>();
 
 const content = computed(() => {
-    if (!props.errors || props.errors.length === 0) return null;
-
-    const uniqueErrors = [
-        ...new Map(
-            props.errors.filter(Boolean).map((error) => {
-                const message =
-                    typeof error === 'string' ? error : error?.message;
-                return [message, error];
-            })
-        ).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]
-            : uniqueErrors[0].message;
-    }
-
-    return uniqueErrors.map((error) =>
-        typeof error === 'string' ? error : error?.message
-    );
+	if (!props.errors || props.errors.length === 0) return null;
+
+	const uniqueErrors = [
+		...new Map(
+			props.errors.filter(Boolean).map((error) => {
+				const message =
+					typeof error === 'string' ? error : error?.message;
+				return [message, error];
+			})
+		).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]
+			: uniqueErrors[0].message;
+	}
+
+	return uniqueErrors.map((error) =>
+		typeof error === 'string' ? error : error?.message
+	);
 });
 </script>
 
 <template>
-    <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'">
-            {{ content }}
-        </template>
-
-        <ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
-            <li v-for="(error, index) in content" :key="index">
-                {{ error }}
-            </li>
-        </ul>
-    </div>
+	<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'">
+			{{ content }}
+		</template>
+
+		<ul v-else-if="Array.isArray(content)" class="ml-4 flex list-disc flex-col gap-1">
+			<li v-for="(error, index) in content" :key="index">
+				{{ error }}
+			</li>
+		</ul>
+	</div>
 </template>

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

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="field-group" :class="cn(
-        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
-        props.class
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="field-group" :class="cn(
+		'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
+		props.class
+	)
+		">
+		<slot />
+	</div>
 </template>

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

@@ -6,7 +6,7 @@ import { useFieldLabel } from './field-context';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Point to the control of the surrounding Field (an explicit for attribute still wins)
@@ -14,13 +14,13 @@ const { labelId, target: labelTarget } = useFieldLabel();
 </script>
 
 <template>
-    <Label :id="labelId" data-slot="field-label" :for="labelTarget" :class="cn(
-        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded has-[>[data-slot=field]]:border *:data-[slot=field]:p-4',
-        'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
-        props.class
-    )
-        ">
-        <slot />
-    </Label>
+	<Label :id="labelId" data-slot="field-label" :for="labelTarget" :class="cn(
+		'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+		'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded has-[>[data-slot=field]]:border *:data-[slot=field]:p-4',
+		'has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10',
+		props.class
+	)
+		">
+		<slot />
+	</Label>
 </template>