@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/ui/calendar/CalendarHeader.vue

@@ -14,11 +14,11 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarHeader data-slot="calendar-header" :class="cn(
-        'flex justify-center pt-1 relative items-center w-full px-8',
-        props.class,
-    )
-        " v-bind="forwardedProps">
-        <slot />
-    </CalendarHeader>
+	<CalendarHeader data-slot="calendar-header" :class="cn(
+		'flex justify-center pt-1 relative items-center w-full px-8',
+		props.class,
+	)
+		" v-bind="forwardedProps">
+		<slot />
+	</CalendarHeader>
 </template>

package/src/components/ui/calendar/CalendarHeading.vue

@@ -9,7 +9,7 @@ import { cn } from '../../../lib/utils';
 const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
 
 defineSlots<{
-    default: (props: { headingValue: string }) => any;
+	default: (props: { headingValue: string }) => any;
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -18,9 +18,9 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarHeading v-slot="{ headingValue }" data-slot="calendar-heading" :class="cn('text-sm font-semibold', props.class)" v-bind="forwardedProps">
-        <slot :heading-value>
-            {{ headingValue }}
-        </slot>
-    </CalendarHeading>
+	<CalendarHeading v-slot="{ headingValue }" data-slot="calendar-heading" :class="cn('text-sm font-semibold', props.class)" v-bind="forwardedProps">
+		<slot :heading-value>
+			{{ headingValue }}
+		</slot>
+	</CalendarHeading>
 </template>

package/src/components/ui/calendar/CalendarNextButton.vue

@@ -2,7 +2,7 @@
 import type { CalendarNextProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { CalendarNext, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -17,19 +17,19 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarNext
-        data-slot="calendar-next-button"
-        :class="
-            cn(
-                buttonVariants({ variant: 'secondary' }),
-                'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
-                props.class,
-            )
-        "
-        v-bind="forwardedProps"
-    >
-        <slot>
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
-        </slot>
-    </CalendarNext>
+	<CalendarNext
+		data-slot="calendar-next-button"
+		:class="
+			cn(
+				buttonVariants({ variant: 'secondary' }),
+				'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
+				props.class,
+			)
+		"
+		v-bind="forwardedProps"
+	>
+		<slot>
+			<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
+		</slot>
+	</CalendarNext>
 </template>

package/src/components/ui/calendar/CalendarPrevButton.vue

@@ -2,7 +2,7 @@
 import type { CalendarPrevProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import ArrowLeft01Icon from '@hugeicons/core-free-icons/ArrowLeft01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { CalendarPrev, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -17,19 +17,19 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CalendarPrev
-        data-slot="calendar-prev-button"
-        :class="
-            cn(
-                buttonVariants({ variant: 'secondary' }),
-                'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
-                props.class,
-            )
-        "
-        v-bind="forwardedProps"
-    >
-        <slot>
-            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4" />
-        </slot>
-    </CalendarPrev>
+	<CalendarPrev
+		data-slot="calendar-prev-button"
+		:class="
+			cn(
+				buttonVariants({ variant: 'secondary' }),
+				'size-7 min-h-10 bg-transparent p-0 text-muted-foreground hover:text-foreground',
+				props.class,
+			)
+		"
+		v-bind="forwardedProps"
+	>
+		<slot>
+			<HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4" />
+		</slot>
+	</CalendarPrev>
 </template>

package/src/components/ui/calendar/index.ts

@@ -12,7 +12,7 @@ export { default as CalendarNextButton } from './CalendarNextButton.vue';
 export { default as CalendarPrevButton } from './CalendarPrevButton.vue';
 
 export type LayoutTypes =
-    | 'month-and-year'
-    | 'month-only'
-    | 'year-only'
-    | undefined;
+	| 'month-and-year'
+	| 'month-only'
+	| 'year-only'
+	| undefined;

package/src/components/ui/card/Card.vue

@@ -2,8 +2,8 @@
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import {
-    getSurfaceToneClasses,
-    type ToneColor,
+	getSurfaceToneClasses,
+	type ToneColor,
 } from '../../../lib/color-tokens';
 import { cn } from '../../../lib/utils';
 
@@ -11,32 +11,32 @@ type CardColor = 'default' | ToneColor;
 
 // Props
 const props = withDefaults(defineProps<{
-    color?: CardColor;
-    interactive?: boolean;
-    class?: HTMLAttributes['class'];
+	color?: CardColor;
+	interactive?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    interactive: false
+	interactive: false
 });
 
 // Get the appropriate classes
 const colorClasses = computed(() => {
-    // If color is not specified or is "default", use the default card styles
-    if (!props.color || props.color === 'default') {
-        return 'border border-border bg-card text-card-foreground shadow-elevated-sm';
-    }
+	// If color is not specified or is "default", use the default card styles
+	if (!props.color || props.color === 'default') {
+		return 'border border-border bg-card text-card-foreground shadow-elevated-sm';
+	}
 
-    // For other colors, use the corresponding surface tone classes
-    return getSurfaceToneClasses(props.color);
+	// For other colors, use the corresponding surface tone classes
+	return getSurfaceToneClasses(props.color);
 });
 </script>
 
 <template>
-    <div data-slot="card" :data-interactive="props.interactive ? '' : undefined" :class="cn(
-        'relative flex flex-col gap-4 sm:gap-6 rounded py-6 transition-[border-color,box-shadow,background-color,translate] duration-300 ease-out-expo',
-        colorClasses,
-        props.interactive && 'cursor-pointer hover:-translate-y-0.5 hover:shadow-elevated-md active:translate-y-0 active:duration-100',
-        props.class,
-    )">
-        <slot />
-    </div>
+	<div data-slot="card" :data-interactive="props.interactive ? '' : undefined" :class="cn(
+		'relative flex flex-col gap-4 sm:gap-6 rounded py-6 transition-[border-color,box-shadow,background-color,translate] duration-300 ease-out-expo',
+		colorClasses,
+		props.interactive && 'cursor-pointer hover:-translate-y-0.5 hover:shadow-elevated-md active:translate-y-0 active:duration-100',
+		props.class,
+	)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardAction.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="card-action" :class="cn(
-        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-        props.class,
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="card-action" :class="cn(
+		'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+		props.class,
+	)
+		">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardContent.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="card-content" :class="cn('flex flex-col gap-4 px-6', props.class)">
-        <slot />
-    </div>
+	<div data-slot="card-content" :class="cn('flex flex-col gap-4 px-6', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardDescription.vue

@@ -4,20 +4,20 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <p
-        data-slot="card-description"
-        :class="
-            cn(
-                'text-muted-foreground text-xs sm:text-sm leading-5',
-                props.class,
-            )
-        "
-    >
-        <slot />
-    </p>
+	<p
+		data-slot="card-description"
+		:class="
+			cn(
+				'text-muted-foreground text-xs sm:text-sm leading-5',
+				props.class,
+			)
+		"
+	>
+		<slot />
+	</p>
 </template>

package/src/components/ui/card/CardFooter.vue

@@ -4,12 +4,12 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
-        <slot />
-    </div>
+	<div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardHeader.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="card-header" :class="cn(
-        '@container/card-header grid auto-rows-min items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 gap-2',
-        props.class,
-    )
-        ">
-        <slot />
-    </div>
+	<div data-slot="card-header" :class="cn(
+		'@container/card-header grid auto-rows-min items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 gap-2',
+		props.class,
+	)
+		">
+		<slot />
+	</div>
 </template>

package/src/components/ui/card/CardText.vue

@@ -4,16 +4,16 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <p data-slot="card-text" :class="cn(
-        'text-xs sm:text-sm text-muted-foreground',
-        props.class,
-    )
-        ">
-        <slot />
-    </p>
+	<p data-slot="card-text" :class="cn(
+		'text-xs sm:text-sm text-muted-foreground',
+		props.class,
+	)
+		">
+		<slot />
+	</p>
 </template>

package/src/components/ui/card/CardTitle.vue

@@ -5,17 +5,17 @@ import type { HeadingLevel } from '../../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    class?: HTMLAttributes['class'];
-    level?: HeadingLevel;
+	class?: HTMLAttributes['class'];
+	level?: HeadingLevel;
 }>(), {
-    level: 3
+	level: 3
 });
 </script>
 
 <template>
-    <component :is="`h${props.level}`"
-        data-slot="card-title"
-        :class="cn('leading-none font-semibold text-sm sm:text-base', props.class)">
-        <slot />
-    </component>
+	<component :is="`h${props.level}`"
+		data-slot="card-title"
+		:class="cn('leading-none font-semibold text-sm sm:text-base', props.class)">
+		<slot />
+	</component>
 </template>

package/src/components/ui/checkbox/Checkbox.vue

@@ -8,7 +8,7 @@ import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = defineProps<CheckboxRootProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -22,31 +22,31 @@ const fieldControlId = useFieldControlId(() => props.id);
 </script>
 
 <template>
-    <CheckboxRoot v-slot="slotProps" data-slot="checkbox" v-bind="forwarded" :id="fieldControlId" :class="cn(
-        'group/checkbox peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-input bg-secondary text-primary-foreground shadow-elevated-sm outline-none',
-        '[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),border-color_150ms_var(--ease-snappy),box-shadow_150ms_var(--ease-snappy)]',
-        'hover:border-border-strong active:scale-[0.86] focus-visible:ring-[3px] focus-visible:ring-ring/45',
-        'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
-        'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
-        props.class
-    )">
-        <!-- Indicator (always mounted so the mark can draw in and out) -->
-        <CheckboxIndicator force-mount data-slot="checkbox-indicator" class="pointer-events-none flex size-full items-center justify-center">
-            <slot v-bind="slotProps">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5" aria-hidden="true">
-                    <!-- Check mark: draws itself via stroke-dashoffset -->
-                    <path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1" :class="cn(
-                        'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
-                        'group-data-[state=checked]/checkbox:opacity-100 group-data-[state=checked]/checkbox:[stroke-dashoffset:0] group-data-[state=checked]/checkbox:[transition:stroke-dashoffset_380ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
-                    )" />
+	<CheckboxRoot v-slot="slotProps" data-slot="checkbox" v-bind="forwarded" :id="fieldControlId" :class="cn(
+		'group/checkbox peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-input bg-secondary text-primary-foreground shadow-elevated-sm outline-none',
+		'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),border-color_150ms_var(--ease-snappy),box-shadow_150ms_var(--ease-snappy)]',
+		'hover:border-border-strong active:scale-[0.86] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+		'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
+		'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
+		props.class
+	)">
+		<!-- Indicator (always mounted so the mark can draw in and out) -->
+		<CheckboxIndicator force-mount data-slot="checkbox-indicator" class="pointer-events-none flex size-full items-center justify-center">
+			<slot v-bind="slotProps">
+				<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5" aria-hidden="true">
+					<!-- Check mark: draws itself via stroke-dashoffset -->
+					<path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1" :class="cn(
+						'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
+						'group-data-[state=checked]/checkbox:opacity-100 group-data-[state=checked]/checkbox:[stroke-dashoffset:0] group-data-[state=checked]/checkbox:[transition:stroke-dashoffset_380ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
+					)" />
 
-                    <!-- Indeterminate dash: sweeps in from the left -->
-                    <path d="M6.5 12h11" pathLength="1" :class="cn(
-                        'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
-                        'group-data-[state=indeterminate]/checkbox:opacity-100 group-data-[state=indeterminate]/checkbox:[stroke-dashoffset:0] group-data-[state=indeterminate]/checkbox:[transition:stroke-dashoffset_320ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
-                    )" />
-                </svg>
-            </slot>
-        </CheckboxIndicator>
-    </CheckboxRoot>
+					<!-- Indeterminate dash: sweeps in from the left -->
+					<path d="M6.5 12h11" pathLength="1" :class="cn(
+						'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
+						'group-data-[state=indeterminate]/checkbox:opacity-100 group-data-[state=indeterminate]/checkbox:[stroke-dashoffset:0] group-data-[state=indeterminate]/checkbox:[transition:stroke-dashoffset_320ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
+					)" />
+				</svg>
+			</slot>
+		</CheckboxIndicator>
+	</CheckboxRoot>
 </template>

package/src/components/ui/collapsible/Collapsible.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded" :class="cn(props.class)">
-        <slot v-bind="slotProps" />
-    </CollapsibleRoot>
+	<CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded" :class="cn(props.class)">
+		<slot v-bind="slotProps" />
+	</CollapsibleRoot>
 </template>

package/src/components/ui/collapsible/CollapsibleContent.vue

@@ -16,7 +16,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <CollapsibleContent data-slot="collapsible-content" v-bind="forwarded" :class="cn('uv-collapsible-motion', props.class)">
-        <slot />
-    </CollapsibleContent>
+	<CollapsibleContent data-slot="collapsible-content" v-bind="forwarded" :class="cn('uv-collapsible-motion', props.class)">
+		<slot />
+	</CollapsibleContent>
 </template>

package/src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -13,7 +13,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="forwardedProps" :class="cn(props.class)">
-        <slot />
-    </CollapsibleTrigger>
+	<CollapsibleTrigger data-slot="collapsible-trigger" v-bind="forwardedProps" :class="cn(props.class)">
+		<slot />
+	</CollapsibleTrigger>
 </template>

package/src/components/ui/combobox/Combobox.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-    openOnClick: true
+	openOnClick: true
 });
 
 // Emits
@@ -18,7 +18,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <ComboboxRoot v-slot="slotProps" data-slot="combobox" v-bind="forwarded" :class="cn('relative', props.class)">
-        <slot v-bind="slotProps" />
-    </ComboboxRoot>
+	<ComboboxRoot v-slot="slotProps" data-slot="combobox" v-bind="forwarded" :class="cn('relative', props.class)">
+		<slot v-bind="slotProps" />
+	</ComboboxRoot>
 </template>

package/src/components/ui/combobox/ComboboxAnchor.vue

@@ -7,8 +7,8 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<ComboboxAnchorProps & {
-    class?: HTMLAttributes['class'];
-    size?: 'sm' | 'default';
+	class?: HTMLAttributes['class'];
+	size?: 'sm' | 'default';
 }>(), { size: 'default' });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -18,22 +18,22 @@ const rootContext = injectComboboxRootContext();
 
 // Clicking the empty area of the field focuses the search input and opens the list
 const handleClick = (event: MouseEvent) => {
-    if (rootContext.disabled.value) return;
-    const target = event.target as HTMLElement | null;
-    if (target?.closest('button, input, a')) return;
-    rootContext.inputElement.value?.focus();
-    if (!rootContext.open.value) rootContext.onOpenChange(true);
+	if (rootContext.disabled.value) return;
+	const target = event.target as HTMLElement | null;
+	if (target?.closest('button, input, a')) return;
+	rootContext.inputElement.value?.focus();
+	if (!rootContext.open.value) rootContext.onOpenChange(true);
 };
 </script>
 
 <template>
-    <ComboboxAnchor data-slot="combobox-anchor" :data-size="props.size" :data-state="rootContext.open.value ? 'open' : 'closed'" :data-disabled="rootContext.disabled.value ? '' : undefined" v-bind="forwardedProps" :class="cn(
-        'group/combobox-anchor uv-field flex w-full cursor-text items-center gap-2 rounded border border-input bg-secondary px-4 py-1.5 text-xs font-semibold text-foreground shadow-elevated-sm sm:text-sm',
-        'data-[size=default]:min-h-13 data-[size=sm]:min-h-10 data-disabled:cursor-not-allowed data-disabled:opacity-60',
-        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
-        props.class
-    )
-        " @click="handleClick">
-        <slot />
-    </ComboboxAnchor>
+	<ComboboxAnchor data-slot="combobox-anchor" :data-size="props.size" :data-state="rootContext.open.value ? 'open' : 'closed'" :data-disabled="rootContext.disabled.value ? '' : undefined" v-bind="forwardedProps" :class="cn(
+		'group/combobox-anchor uv-field flex w-full cursor-text items-center gap-2 rounded border border-input bg-secondary px-4 py-1.5 text-xs font-semibold text-foreground shadow-elevated-sm sm:text-sm',
+		'data-[size=default]:min-h-13 data-[size=sm]:min-h-10 data-disabled:cursor-not-allowed data-disabled:opacity-60',
+		'[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+		props.class
+	)
+		" @click="handleClick">
+		<slot />
+	</ComboboxAnchor>
 </template>

package/src/components/ui/combobox/ComboboxEmpty.vue

@@ -15,7 +15,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <ComboboxEmpty data-slot="combobox-empty" v-bind="delegatedProps" :class="cn('animate-uv-fade-up px-3 py-6 text-center text-xs font-semibold text-muted-foreground sm:text-sm', props.class)">
-        <slot>{{ t('uiVintage.combobox.empty') }}</slot>
-    </ComboboxEmpty>
+	<ComboboxEmpty data-slot="combobox-empty" v-bind="delegatedProps" :class="cn('animate-uv-fade-up px-3 py-6 text-center text-xs font-semibold text-muted-foreground sm:text-sm', props.class)">
+		<slot>{{ t('uiVintage.combobox.empty') }}</slot>
+	</ComboboxEmpty>
 </template>

package/src/components/ui/combobox/ComboboxGroup.vue

@@ -7,20 +7,20 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<ComboboxGroupProps & {
-    class?: HTMLAttributes['class'];
-    heading?: string;
+	class?: HTMLAttributes['class'];
+	heading?: string;
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class', 'heading');
 </script>
 
 <template>
-    <ComboboxGroup data-slot="combobox-group" v-bind="delegatedProps" :class="cn('overflow-hidden', props.class)">
-        <!-- Heading -->
-        <ComboboxLabel v-if="props.heading || $slots.heading" data-slot="combobox-group-heading" class="px-3 pt-2 pb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground select-none">
-            <slot name="heading">{{ props.heading }}</slot>
-        </ComboboxLabel>
+	<ComboboxGroup data-slot="combobox-group" v-bind="delegatedProps" :class="cn('overflow-hidden', props.class)">
+		<!-- Heading -->
+		<ComboboxLabel v-if="props.heading || $slots.heading" data-slot="combobox-group-heading" class="px-3 pt-2 pb-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground select-none">
+			<slot name="heading">{{ props.heading }}</slot>
+		</ComboboxLabel>
 
-        <slot />
-    </ComboboxGroup>
+		<slot />
+	</ComboboxGroup>
 </template>

package/src/components/ui/combobox/ComboboxInput.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 import { useFieldControlId } from '../field/field-context';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
@@ -24,9 +24,9 @@ const fieldControlId = useFieldControlId();
 </script>
 
 <template>
-    <ComboboxInput :id="fieldControlId" data-slot="combobox-input" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-        'h-9 min-w-16 flex-1 truncate bg-transparent font-semibold text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
-        props.class
-    )
-        " />
+	<ComboboxInput :id="fieldControlId" data-slot="combobox-input" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+		'h-9 min-w-16 flex-1 truncate bg-transparent font-semibold text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed',
+		props.class
+	)
+		" />
 </template>