@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/ui/pin-input/PinInputInput.vue

@@ -11,7 +11,7 @@ defineOptions({ inheritAttrs: false });
 
 // Props
 const props = defineProps<PinInputInputProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -22,8 +22,8 @@ const pinInputContext = inject(pinInputContextKey, null);
 
 // Current character of this cell
 const cellValue = computed(() => {
-    const value = rootContext.currentModelValue.value[props.index];
-    return value === undefined || value === null ? '' : String(value);
+	const value = rootContext.currentModelValue.value[props.index];
+	return value === undefined || value === null ? '' : String(value);
 });
 const isFilled = computed(() => cellValue.value !== '');
 const displayValue = computed(() => (rootContext.mask.value ? '•' : cellValue.value));
@@ -31,19 +31,19 @@ const isInvalid = computed(() => pinInputContext?.invalid.value || undefined);
 </script>
 
 <template>
-    <span data-slot="pin-input-cell" class="relative inline-flex shrink-0">
-        <!-- Native input (text is transparent, the overlay below renders the character) -->
-        <PinInputInput data-slot="pin-input-input" v-bind="{ ...$attrs, ...forwardedProps }" :aria-invalid="isInvalid" :data-filled="isFilled ? '' : undefined" :class="cn(
-            'uv-field size-12 rounded border border-input bg-secondary text-center text-lg font-semibold text-transparent caret-primary shadow-elevated-sm outline-none sm:size-13',
-            'placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary/25',
-            'data-filled:border-primary/60 data-filled:bg-primary/5',
-            'disabled:cursor-not-allowed disabled:opacity-60',
-            props.class
-        )" />
+	<span data-slot="pin-input-cell" class="relative inline-flex shrink-0">
+		<!-- Native input (text is transparent, the overlay below renders the character) -->
+		<PinInputInput data-slot="pin-input-input" v-bind="{ ...$attrs, ...forwardedProps }" :aria-invalid="isInvalid" :data-filled="isFilled ? '' : undefined" :class="cn(
+			'uv-field size-12 rounded border border-input bg-secondary text-center text-lg font-semibold text-transparent caret-primary shadow-elevated-sm outline-none sm:size-13',
+			'placeholder:text-muted-foreground placeholder:opacity-50 selection:bg-primary/25',
+			'data-filled:border-primary/60 data-filled:bg-primary/5',
+			'disabled:cursor-not-allowed disabled:opacity-60',
+			props.class
+		)" />
 
-        <!-- Animated character (re-keyed on every value so it pops) -->
-        <span v-if="isFilled" :key="cellValue" aria-hidden="true" class="pointer-events-none absolute inset-0 flex animate-uv-pop items-center justify-center text-lg font-semibold text-foreground">
-            {{ displayValue }}
-        </span>
-    </span>
+		<!-- Animated character (re-keyed on every value so it pops) -->
+		<span v-if="isFilled" :key="cellValue" aria-hidden="true" class="pointer-events-none absolute inset-0 flex animate-uv-pop items-center justify-center text-lg font-semibold text-foreground">
+			{{ displayValue }}
+		</span>
+	</span>
 </template>

package/src/components/ui/pin-input/context.ts

@@ -2,7 +2,7 @@ import type { ComputedRef, InjectionKey } from 'vue';
 
 // Shared state provided by PinInput to its cells
 export interface PinInputContext {
-    invalid: ComputedRef<boolean>;
+	invalid: ComputedRef<boolean>;
 }
 
 export const pinInputContextKey: InjectionKey<PinInputContext> = Symbol('uvPinInput');

package/src/components/ui/popover/Popover.vue

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </PopoverRoot>
+	<PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</PopoverRoot>
 </template>

package/src/components/ui/popover/PopoverAnchor.vue

@@ -7,7 +7,7 @@ const props = defineProps<PopoverAnchorProps>();
 </script>
 
 <template>
-    <PopoverAnchor data-slot="popover-anchor" v-bind="props">
-        <slot />
-    </PopoverAnchor>
+	<PopoverAnchor data-slot="popover-anchor" v-bind="props">
+		<slot />
+	</PopoverAnchor>
 </template>

package/src/components/ui/popover/PopoverContent.vue

@@ -6,13 +6,13 @@ import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), {
-    align: 'center',
-    sideOffset: 4
+	align: 'center',
+	sideOffset: 4
 });
 
 // Emits
@@ -24,13 +24,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <PopoverPortal>
-        <PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'uv-floating-motion bg-popover text-popover-foreground z-50 w-72 rounded border border-border p-4 shadow-elevated-lg outline-hidden',
-            props.class
-        )
-            ">
-            <slot />
-        </PopoverContent>
-    </PopoverPortal>
+	<PopoverPortal>
+		<PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+			'uv-floating-motion bg-popover text-popover-foreground z-50 w-72 rounded border border-border p-4 shadow-elevated-lg outline-hidden',
+			props.class
+		)
+			">
+			<slot />
+		</PopoverContent>
+	</PopoverPortal>
 </template>

package/src/components/ui/popover/PopoverTrigger.vue

@@ -7,7 +7,7 @@ const props = defineProps<PopoverTriggerProps>();
 </script>
 
 <template>
-    <PopoverTrigger data-slot="popover-trigger" v-bind="props">
-        <slot />
-    </PopoverTrigger>
+	<PopoverTrigger data-slot="popover-trigger" v-bind="props">
+		<slot />
+	</PopoverTrigger>
 </template>

package/src/components/ui/progress/Progress.vue

@@ -8,32 +8,32 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<ProgressRootProps & {
-    indeterminate?: boolean;
-    class?: HTMLAttributes['class'];
+	indeterminate?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    modelValue: 0,
-    indeterminate: false
+	modelValue: 0,
+	indeterminate: false
 });
 
 const delegatedProps = reactiveOmit(props, 'class', 'indeterminate');
 
 // Resolve the fill percentage against the configured max
 const percentage = computed(() => {
-    const max = props.max ?? 100;
-    if (!max) return 0;
-    return Math.min(100, Math.max(0, ((props.modelValue ?? 0) / max) * 100));
+	const max = props.max ?? 100;
+	if (!max) return 0;
+	return Math.min(100, Math.max(0, ((props.modelValue ?? 0) / max) * 100));
 });
 </script>
 
 <template>
-    <ProgressRoot data-slot="progress" v-bind="delegatedProps" :model-value="props.indeterminate ? null : props.modelValue" :class="cn(
-        'relative h-2 w-full overflow-hidden rounded-sm bg-muted',
-        props.class
-    )">
-        <!-- Indeterminate bar -->
-        <div v-if="props.indeterminate" data-slot="progress-indicator" class="absolute inset-y-0 left-0 w-full origin-left animate-uv-indeterminate rounded-sm bg-primary" />
+	<ProgressRoot data-slot="progress" v-bind="delegatedProps" :model-value="props.indeterminate ? null : props.modelValue" :class="cn(
+		'relative h-2 w-full overflow-hidden rounded-sm bg-muted',
+		props.class
+	)">
+		<!-- Indeterminate bar -->
+		<div v-if="props.indeterminate" data-slot="progress-indicator" class="absolute inset-y-0 left-0 w-full origin-left animate-uv-indeterminate rounded-sm bg-primary" />
 
-        <!-- Determinate bar -->
-        <ProgressIndicator v-else data-slot="progress-indicator" class="relative h-full w-full flex-1 overflow-hidden rounded-sm bg-primary transition-transform duration-700 ease-out-expo" :style="`transform: translateX(-${100 - percentage}%);`" />
-    </ProgressRoot>
+		<!-- Determinate bar -->
+		<ProgressIndicator v-else data-slot="progress-indicator" class="relative h-full w-full flex-1 overflow-hidden rounded-sm bg-primary transition-transform duration-700 ease-out-expo" :style="`transform: translateX(-${100 - percentage}%);`" />
+	</ProgressRoot>
 </template>

package/src/components/ui/radio-group/RadioGroup.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<RadioGroupRootProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -18,10 +18,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <RadioGroupRoot v-slot="slotProps" data-slot="radio-group" v-bind="forwarded" :class="cn(
-        'grid gap-3 aria-[orientation=horizontal]:flex aria-[orientation=horizontal]:flex-wrap aria-[orientation=horizontal]:items-center aria-[orientation=horizontal]:gap-x-5',
-        props.class
-    )">
-        <slot v-bind="slotProps" />
-    </RadioGroupRoot>
+	<RadioGroupRoot v-slot="slotProps" data-slot="radio-group" v-bind="forwarded" :class="cn(
+		'grid gap-3 aria-[orientation=horizontal]:flex aria-[orientation=horizontal]:flex-wrap aria-[orientation=horizontal]:items-center aria-[orientation=horizontal]:gap-x-5',
+		props.class
+	)">
+		<slot v-bind="slotProps" />
+	</RadioGroupRoot>
 </template>

package/src/components/ui/radio-group/RadioGroupCard.vue

@@ -8,49 +8,49 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
-    value: AcceptableValue;
-    label: string;
-    description?: string;
-    icon?: HugeiconsIconDefinition;
-    disabled?: boolean;
-    id?: string;
-    class?: HTMLAttributes['class'];
+	value: AcceptableValue;
+	label: string;
+	description?: string;
+	icon?: HugeiconsIconDefinition;
+	disabled?: boolean;
+	id?: string;
+	class?: HTMLAttributes['class'];
 }>();
 </script>
 
 <template>
-    <RadioGroupItem :id="props.id" :value="props.value" :disabled="props.disabled" data-slot="radio-group-card" :class="cn(
-        'group/radio-card relative flex w-full cursor-pointer items-center gap-3 rounded border border-border bg-card px-4 py-3 text-left shadow-elevated-sm outline-none',
-        '[transition:scale_320ms_var(--ease-spring),border-color_150ms_var(--ease-snappy),background-color_150ms_var(--ease-snappy),box-shadow_200ms_var(--ease-snappy)]',
-        'hover:border-border-strong active:scale-[0.985] focus-visible:ring-[3px] focus-visible:ring-ring/45',
-        'data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=checked]:hover:border-primary',
-        'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100',
-        props.class
-    )">
-        <!-- Icon -->
-        <span v-if="props.icon" class="flex size-9 shrink-0 items-center justify-center rounded border border-border bg-surface text-muted-foreground transition-colors duration-150 group-data-[state=checked]/radio-card:border-primary/40 group-data-[state=checked]/radio-card:bg-primary/10 group-data-[state=checked]/radio-card:text-primary">
-            <HugeiconsIcon :icon="props.icon" class="size-4.5" />
-        </span>
+	<RadioGroupItem :id="props.id" :value="props.value" :disabled="props.disabled" data-slot="radio-group-card" :class="cn(
+		'group/radio-card relative flex w-full cursor-pointer items-center gap-3 rounded border border-border bg-card px-4 py-3 text-left shadow-elevated-sm outline-none',
+		'[transition:scale_320ms_var(--ease-spring),border-color_150ms_var(--ease-snappy),background-color_150ms_var(--ease-snappy),box-shadow_200ms_var(--ease-snappy)]',
+		'hover:border-border-strong active:scale-[0.985] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+		'data-[state=checked]:border-primary data-[state=checked]:bg-primary/5 data-[state=checked]:hover:border-primary',
+		'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100',
+		props.class
+	)">
+		<!-- Icon -->
+		<span v-if="props.icon" class="flex size-9 shrink-0 items-center justify-center rounded border border-border bg-surface text-muted-foreground transition-colors duration-150 group-data-[state=checked]/radio-card:border-primary/40 group-data-[state=checked]/radio-card:bg-primary/10 group-data-[state=checked]/radio-card:text-primary">
+			<HugeiconsIcon :icon="props.icon" class="size-4.5" />
+		</span>
 
-        <!-- Label and description -->
-        <span class="flex min-w-0 flex-1 flex-col gap-0.5">
-            <span class="text-xs font-semibold text-foreground sm:text-sm">
-                <slot name="label">{{ props.label }}</slot>
-            </span>
-            <span v-if="props.description || $slots.description" class="text-xs text-muted-foreground">
-                <slot name="description">{{ props.description }}</slot>
-            </span>
-        </span>
+		<!-- Label and description -->
+		<span class="flex min-w-0 flex-1 flex-col gap-0.5">
+			<span class="text-xs font-semibold text-foreground sm:text-sm">
+				<slot name="label">{{ props.label }}</slot>
+			</span>
+			<span v-if="props.description || $slots.description" class="text-xs text-muted-foreground">
+				<slot name="description">{{ props.description }}</slot>
+			</span>
+		</span>
 
-        <!-- Radio circle -->
-        <span aria-hidden="true" class="flex size-5 shrink-0 items-center justify-center rounded-full border border-input bg-secondary shadow-elevated-sm transition-colors duration-150 group-data-[state=checked]/radio-card:border-primary">
-            <RadioGroupIndicator force-mount data-slot="radio-group-indicator" :class="cn(
-                'pointer-events-none flex items-center justify-center opacity-0 scale-0',
-                '[transition:scale_140ms_var(--ease-snappy),opacity_100ms_var(--ease-snappy)]',
-                'data-[state=checked]:opacity-100 data-[state=checked]:scale-100 data-[state=checked]:[transition:scale_420ms_var(--ease-bounce),opacity_80ms_linear]'
-            )">
-                <span class="size-2.5 rounded-full bg-primary" />
-            </RadioGroupIndicator>
-        </span>
-    </RadioGroupItem>
+		<!-- Radio circle -->
+		<span aria-hidden="true" class="flex size-5 shrink-0 items-center justify-center rounded-full border border-input bg-secondary shadow-elevated-sm transition-colors duration-150 group-data-[state=checked]/radio-card:border-primary">
+			<RadioGroupIndicator force-mount data-slot="radio-group-indicator" :class="cn(
+				'pointer-events-none flex items-center justify-center opacity-0 scale-0',
+				'[transition:scale_140ms_var(--ease-snappy),opacity_100ms_var(--ease-snappy)]',
+				'data-[state=checked]:opacity-100 data-[state=checked]:scale-100 data-[state=checked]:[transition:scale_420ms_var(--ease-bounce),opacity_80ms_linear]'
+			)">
+				<span class="size-2.5 rounded-full bg-primary" />
+			</RadioGroupIndicator>
+		</span>
+	</RadioGroupItem>
 </template>

package/src/components/ui/radio-group/RadioGroupItem.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<RadioGroupItemProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -18,23 +18,23 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <RadioGroupItem v-slot="slotProps" data-slot="radio-group-item" v-bind="forwarded" :class="cn(
-        'peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border border-input bg-secondary text-primary shadow-elevated-sm outline-none',
-        '[transition:scale_320ms_var(--ease-spring),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]:hover:border-primary',
-        'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
-        props.class
-    )">
-        <!-- Indicator (always mounted so the dot can pop in and shrink out) -->
-        <RadioGroupIndicator force-mount data-slot="radio-group-indicator" :class="cn(
-            'pointer-events-none flex items-center justify-center opacity-0 scale-0',
-            '[transition:scale_140ms_var(--ease-snappy),opacity_100ms_var(--ease-snappy)]',
-            'data-[state=checked]:opacity-100 data-[state=checked]:scale-100 data-[state=checked]:[transition:scale_420ms_var(--ease-bounce),opacity_80ms_linear]'
-        )">
-            <slot v-bind="slotProps">
-                <span class="size-2.5 rounded-full bg-primary" />
-            </slot>
-        </RadioGroupIndicator>
-    </RadioGroupItem>
+	<RadioGroupItem v-slot="slotProps" data-slot="radio-group-item" v-bind="forwarded" :class="cn(
+		'peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full border border-input bg-secondary text-primary shadow-elevated-sm outline-none',
+		'[transition:scale_320ms_var(--ease-spring),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]:hover:border-primary',
+		'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
+		props.class
+	)">
+		<!-- Indicator (always mounted so the dot can pop in and shrink out) -->
+		<RadioGroupIndicator force-mount data-slot="radio-group-indicator" :class="cn(
+			'pointer-events-none flex items-center justify-center opacity-0 scale-0',
+			'[transition:scale_140ms_var(--ease-snappy),opacity_100ms_var(--ease-snappy)]',
+			'data-[state=checked]:opacity-100 data-[state=checked]:scale-100 data-[state=checked]:[transition:scale_420ms_var(--ease-bounce),opacity_80ms_linear]'
+		)">
+			<slot v-bind="slotProps">
+				<span class="size-2.5 rounded-full bg-primary" />
+			</slot>
+		</RadioGroupIndicator>
+	</RadioGroupItem>
 </template>

package/src/components/ui/scroll-area/ScrollArea.vue

@@ -13,18 +13,18 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <ScrollAreaRoot
-        data-slot="scroll-area"
-        v-bind="delegatedProps"
-        :class="cn('relative', props.class)"
-    >
-        <ScrollAreaViewport
-            data-slot="scroll-area-viewport"
-            class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-        >
-            <slot />
-        </ScrollAreaViewport>
-        <ScrollBar />
-        <ScrollAreaCorner />
-    </ScrollAreaRoot>
+	<ScrollAreaRoot
+		data-slot="scroll-area"
+		v-bind="delegatedProps"
+		:class="cn('relative', props.class)"
+	>
+		<ScrollAreaViewport
+			data-slot="scroll-area-viewport"
+			class="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+		>
+			<slot />
+		</ScrollAreaViewport>
+		<ScrollBar />
+		<ScrollAreaCorner />
+	</ScrollAreaRoot>
 </template>

package/src/components/ui/scroll-area/ScrollBar.vue

@@ -7,22 +7,22 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
-    orientation: 'vertical'
+	orientation: 'vertical'
 });
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <ScrollAreaScrollbar data-slot="scroll-area-scrollbar" v-bind="delegatedProps" :class="cn(
-        'flex touch-none p-px transition-colors select-none',
-        orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent',
-        orientation === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent',
-        props.class
-    )
-        ">
-        <ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
-    </ScrollAreaScrollbar>
+	<ScrollAreaScrollbar data-slot="scroll-area-scrollbar" v-bind="delegatedProps" :class="cn(
+		'flex touch-none p-px transition-colors select-none',
+		orientation === 'vertical' &&
+		'h-full w-2.5 border-l border-l-transparent',
+		orientation === 'horizontal' &&
+		'h-2.5 flex-col border-t border-t-transparent',
+		props.class
+	)
+		">
+		<ScrollAreaThumb data-slot="scroll-area-thumb" class="bg-border relative flex-1 rounded-full" />
+	</ScrollAreaScrollbar>
 </template>

package/src/components/ui/select/Select.vue

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </SelectRoot>
+	<SelectRoot v-slot="slotProps" data-slot="select" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</SelectRoot>
 </template>

package/src/components/ui/select/SelectContent.vue

@@ -7,15 +7,15 @@ import { cn } from '../../../lib/utils';
 import { SelectScrollDownButton, SelectScrollUpButton } from '.';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(), {
-    align: 'start',
-    position: 'popper',
-    sideOffset: 4,
-    collisionPadding: 8
+	align: 'start',
+	position: 'popper',
+	sideOffset: 4,
+	collisionPadding: 8
 });
 
 // Emits
@@ -26,24 +26,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <SelectPortal>
-        <SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'uv-floating-motion bg-popover text-popover-foreground relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded border border-border shadow-elevated-lg max-sm:w-(--reka-select-trigger-width) max-sm:min-w-(--reka-select-trigger-width)',
-            position === 'popper' &&
-            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-            props.class
-        )
-            ">
-            <SelectScrollUpButton />
-            <SelectViewport :class="cn(
-                'p-1',
-                position === 'popper' &&
-                'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width) scroll-my-1'
-            )
-                ">
-                <slot />
-            </SelectViewport>
-            <SelectScrollDownButton />
-        </SelectContent>
-    </SelectPortal>
+	<SelectPortal>
+		<SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+			'uv-floating-motion bg-popover text-popover-foreground relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded border border-border shadow-elevated-lg max-sm:w-(--reka-select-trigger-width) max-sm:min-w-(--reka-select-trigger-width)',
+			position === 'popper' &&
+			'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+			props.class
+		)
+			">
+			<SelectScrollUpButton />
+			<SelectViewport :class="cn(
+				'p-1',
+				position === 'popper' &&
+				'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width) scroll-my-1'
+			)
+				">
+				<slot />
+			</SelectViewport>
+			<SelectScrollDownButton />
+		</SelectContent>
+	</SelectPortal>
 </template>

package/src/components/ui/select/SelectGroup.vue

@@ -7,7 +7,7 @@ const props = defineProps<SelectGroupProps>();
 </script>
 
 <template>
-    <SelectGroup data-slot="select-group" v-bind="props">
-        <slot />
-    </SelectGroup>
+	<SelectGroup data-slot="select-group" v-bind="props">
+		<slot />
+	</SelectGroup>
 </template>

package/src/components/ui/select/SelectItem.vue

@@ -2,7 +2,7 @@
 import type { SelectItemProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Tick02Icon } from '@hugeicons/core-free-icons';
+import Tick02Icon from '@hugeicons/core-free-icons/Tick02Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { SelectItem, SelectItemIndicator, SelectItemText, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
@@ -15,31 +15,31 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-foreground transition-colors duration-150 [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
-        props.class
-    )
-        ">
-        <span class="absolute right-2 flex size-3.5 items-center justify-center">
-            <SelectItemIndicator>
-                <slot name="indicator-icon">
-                    <HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop text-primary" />
-                </slot>
-            </SelectItemIndicator>
-        </span>
+	<SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
+		'focus:bg-accent focus:text-accent-foreground data-[state=checked]:text-foreground transition-colors duration-150 [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-2.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+		props.class
+	)
+		">
+		<span class="absolute right-2 flex size-3.5 items-center justify-center">
+			<SelectItemIndicator>
+				<slot name="indicator-icon">
+					<HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop text-primary" />
+				</slot>
+			</SelectItemIndicator>
+		</span>
 
-        <template v-if="props.textValue">
-            <SelectItemText>
-                <span class="sr-only">{{ props.textValue }}</span>
-            </SelectItemText>
+		<template v-if="props.textValue">
+			<SelectItemText>
+				<span class="sr-only">{{ props.textValue }}</span>
+			</SelectItemText>
 
-            <div class="flex min-w-0 flex-1 flex-col">
-                <slot />
-            </div>
-        </template>
+			<div class="flex min-w-0 flex-1 flex-col">
+				<slot />
+			</div>
+		</template>
 
-        <SelectItemText v-else>
-            <slot />
-        </SelectItemText>
-    </SelectItem>
+		<SelectItemText v-else>
+			<slot />
+		</SelectItemText>
+	</SelectItem>
 </template>