@brumaombra/ui-vintage 0.9.1 → 0.9.3

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

@@ -8,7 +8,7 @@ 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>

package/src/components/ui/number-field/NumberField.vue

@@ -13,11 +13,11 @@ import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = defineProps<NumberFieldRootProps & {
-    placeholder?: string;
-    decrementLabel?: string;
-    incrementLabel?: string;
-    class?: HTMLAttributes['class'];
-    inputClass?: HTMLAttributes['class'];
+	placeholder?: string;
+	decrementLabel?: string;
+	incrementLabel?: string;
+	class?: HTMLAttributes['class'];
+	inputClass?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -38,46 +38,46 @@ let ghostAnimation: Animation | null = null;
 
 // Keep the reference value in sync with external model updates
 watch(() => props.modelValue, (value) => {
-    lastValue.value = value;
+	lastValue.value = value;
 });
 
 // Slide the new digits in (and the old ones out) in the direction of the change
 const animateChange = async (value: number) => {
-    const previous = lastValue.value;
-    lastValue.value = value;
-
-    const input = viewportRef.value?.querySelector('input');
-    if (!input || typeof window === 'undefined' || previous === null || previous === undefined || Number.isNaN(previous) || Number.isNaN(value)) return;
-    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-
-    // The DOM still shows the previous text at this point
-    const previousText = input.value;
-    const direction = value > previous ? 1 : -1;
-    ghostAnimation?.cancel();
-    ghostText.value = previousText;
-    await nextTick();
-
-    // Skip when the text did not visibly change (e.g. a typed value committed on blur)
-    if (input.value === previousText) {
-        ghostText.value = '';
-        return;
-    }
-
-    const options: KeyframeAnimationOptions = { duration: 320, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' };
-    input.animate([
-        { transform: `translateY(${direction * 60}%)`, opacity: 0, filter: 'blur(2px)' },
-        { transform: 'translateY(0)', opacity: 1, filter: 'blur(0)' }
-    ], options);
-
-    if (ghostRef.value) {
-        ghostAnimation = ghostRef.value.animate([
-            { transform: 'translateY(0)', opacity: 1, filter: 'blur(0)' },
-            { transform: `translateY(${direction * -60}%)`, opacity: 0, filter: 'blur(2px)' }
-        ], { ...options, duration: 220, fill: 'forwards' });
-        ghostAnimation.onfinish = () => {
-            ghostText.value = '';
-        };
-    }
+	const previous = lastValue.value;
+	lastValue.value = value;
+
+	const input = viewportRef.value?.querySelector('input');
+	if (!input || typeof window === 'undefined' || previous === null || previous === undefined || Number.isNaN(previous) || Number.isNaN(value)) return;
+	if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+	// The DOM still shows the previous text at this point
+	const previousText = input.value;
+	const direction = value > previous ? 1 : -1;
+	ghostAnimation?.cancel();
+	ghostText.value = previousText;
+	await nextTick();
+
+	// Skip when the text did not visibly change (e.g. a typed value committed on blur)
+	if (input.value === previousText) {
+		ghostText.value = '';
+		return;
+	}
+
+	const options: KeyframeAnimationOptions = { duration: 320, easing: 'cubic-bezier(0.16, 1, 0.3, 1)' };
+	input.animate([
+		{ transform: `translateY(${direction * 60}%)`, opacity: 0, filter: 'blur(2px)' },
+		{ transform: 'translateY(0)', opacity: 1, filter: 'blur(0)' }
+	], options);
+
+	if (ghostRef.value) {
+		ghostAnimation = ghostRef.value.animate([
+			{ transform: 'translateY(0)', opacity: 1, filter: 'blur(0)' },
+			{ transform: `translateY(${direction * -60}%)`, opacity: 0, filter: 'blur(2px)' }
+		], { ...options, duration: 220, fill: 'forwards' });
+		ghostAnimation.onfinish = () => {
+			ghostText.value = '';
+		};
+	}
 };
 
 // Let a surrounding Field label point to this control
@@ -85,51 +85,51 @@ const fieldControlId = useFieldControlId(() => props.id);
 </script>
 
 <template>
-    <NumberFieldRoot v-slot="slotProps" data-slot="number-field" v-bind="forwarded" :id="fieldControlId" :class="cn(
-        'uv-field flex h-13 w-full items-center gap-1 rounded border border-input bg-secondary px-1.5 text-foreground shadow-elevated-sm',
-        'data-disabled:cursor-not-allowed data-disabled:opacity-60 aria-invalid:animate-uv-shake',
-        props.class
-    )" @update:model-value="animateChange">
-        <!-- Decrement button -->
-        <NumberFieldDecrement data-slot="number-field-decrement" :aria-label="resolvedDecrementLabel" :class="cn(
-            'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
-            '[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
-            'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
-            'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'
-        )">
-            <slot name="decrement-icon">
-                <HugeiconsIcon :icon="MinusSignIcon" class="size-4" />
-            </slot>
-        </NumberFieldDecrement>
-
-        <!-- Value viewport (clips the sliding digits) -->
-        <div ref="viewportRef" class="relative flex h-full min-w-0 flex-1 items-center overflow-hidden">
-            <NumberFieldInput data-slot="number-field-input" :placeholder="props.placeholder" :class="cn(
-                'h-full w-full min-w-0 bg-transparent text-center text-xs font-semibold tabular-nums text-foreground outline-none sm:text-sm',
-                'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60 disabled:cursor-not-allowed',
-                props.inputClass
-            )" />
-
-            <!-- Outgoing value ghost (decorative) -->
-            <span v-if="ghostText" ref="ghostRef" aria-hidden="true" :class="cn(
-                'pointer-events-none absolute inset-0 flex items-center justify-center text-xs font-semibold tabular-nums text-foreground sm:text-sm',
-                props.inputClass
-            )">{{ ghostText }}</span>
-        </div>
-
-        <!-- Increment button -->
-        <NumberFieldIncrement data-slot="number-field-increment" :aria-label="resolvedIncrementLabel" :class="cn(
-            'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
-            '[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
-            'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
-            'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'
-        )">
-            <slot name="increment-icon">
-                <HugeiconsIcon :icon="PlusSignIcon" class="size-4" />
-            </slot>
-        </NumberFieldIncrement>
-
-        <!-- Extra content (e.g. hidden inputs) -->
-        <slot v-bind="slotProps" />
-    </NumberFieldRoot>
+	<NumberFieldRoot v-slot="slotProps" data-slot="number-field" v-bind="forwarded" :id="fieldControlId" :class="cn(
+		'uv-field flex h-13 w-full items-center gap-1 rounded border border-input bg-secondary px-1.5 text-foreground shadow-elevated-sm',
+		'data-disabled:cursor-not-allowed data-disabled:opacity-60 aria-invalid:animate-uv-shake',
+		props.class
+	)" @update:model-value="animateChange">
+		<!-- Decrement button -->
+		<NumberFieldDecrement data-slot="number-field-decrement" :aria-label="resolvedDecrementLabel" :class="cn(
+			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+			'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
+			'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+			'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'
+		)">
+			<slot name="decrement-icon">
+				<HugeiconsIcon :icon="MinusSignIcon" class="size-4" />
+			</slot>
+		</NumberFieldDecrement>
+
+		<!-- Value viewport (clips the sliding digits) -->
+		<div ref="viewportRef" class="relative flex h-full min-w-0 flex-1 items-center overflow-hidden">
+			<NumberFieldInput data-slot="number-field-input" :placeholder="props.placeholder" :class="cn(
+				'h-full w-full min-w-0 bg-transparent text-center text-xs font-semibold tabular-nums text-foreground outline-none sm:text-sm',
+				'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60 disabled:cursor-not-allowed',
+				props.inputClass
+			)" />
+
+			<!-- Outgoing value ghost (decorative) -->
+			<span v-if="ghostText" ref="ghostRef" aria-hidden="true" :class="cn(
+				'pointer-events-none absolute inset-0 flex items-center justify-center text-xs font-semibold tabular-nums text-foreground sm:text-sm',
+				props.inputClass
+			)">{{ ghostText }}</span>
+		</div>
+
+		<!-- Increment button -->
+		<NumberFieldIncrement data-slot="number-field-increment" :aria-label="resolvedIncrementLabel" :class="cn(
+			'inline-flex size-10 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+			'[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy),opacity_150ms_var(--ease-snappy)]',
+			'hover:bg-accent hover:text-foreground active:scale-[0.84] data-pressed:scale-[0.84] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+			'disabled:pointer-events-none disabled:opacity-35 data-disabled:pointer-events-none data-disabled:opacity-35'
+		)">
+			<slot name="increment-icon">
+				<HugeiconsIcon :icon="PlusSignIcon" class="size-4" />
+			</slot>
+		</NumberFieldIncrement>
+
+		<!-- Extra content (e.g. hidden inputs) -->
+		<slot v-bind="slotProps" />
+	</NumberFieldRoot>
 </template>

package/src/components/ui/pagination/Pagination.vue

@@ -8,7 +8,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<PaginationRootProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -21,7 +21,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <PaginationRoot v-slot="slotProps" data-slot="pagination" :aria-label="t('uiVintage.pagination.label')" v-bind="forwarded" :class="cn('mx-auto flex w-full justify-center', props.class)">
-        <slot v-bind="slotProps" />
-    </PaginationRoot>
+	<PaginationRoot v-slot="slotProps" data-slot="pagination" :aria-label="t('uiVintage.pagination.label')" v-bind="forwarded" :class="cn('mx-auto flex w-full justify-center', props.class)">
+		<slot v-bind="slotProps" />
+	</PaginationRoot>
 </template>

package/src/components/ui/pagination/PaginationContent.vue

@@ -7,14 +7,14 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<PaginationListProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <PaginationList v-slot="slotProps" data-slot="pagination-content" v-bind="delegatedProps" :class="cn('flex flex-row flex-wrap items-center justify-center gap-1.5', props.class)">
-        <slot v-bind="slotProps" />
-    </PaginationList>
+	<PaginationList v-slot="slotProps" data-slot="pagination-content" v-bind="delegatedProps" :class="cn('flex flex-row flex-wrap items-center justify-center gap-1.5', props.class)">
+		<slot v-bind="slotProps" />
+	</PaginationList>
 </template>

package/src/components/ui/pagination/PaginationEllipsis.vue

@@ -10,7 +10,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<PaginationEllipsisProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -19,13 +19,13 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <PaginationEllipsis data-slot="pagination-ellipsis" v-bind="delegatedProps" :class="cn('flex size-10 items-center justify-center text-muted-foreground', props.class)">
-        <!-- Default slot content -->
-        <slot>
-            <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" aria-hidden="true" />
-        </slot>
+	<PaginationEllipsis data-slot="pagination-ellipsis" v-bind="delegatedProps" :class="cn('flex size-10 items-center justify-center text-muted-foreground', props.class)">
+		<!-- Default slot content -->
+		<slot>
+			<HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" aria-hidden="true" />
+		</slot>
 
-        <!-- Screen reader text for accessibility -->
-        <span class="sr-only">{{ t('uiVintage.pagination.more') }}</span>
-    </PaginationEllipsis>
+		<!-- Screen reader text for accessibility -->
+		<span class="sr-only">{{ t('uiVintage.pagination.more') }}</span>
+	</PaginationEllipsis>
 </template>

package/src/components/ui/pagination/PaginationFirst.vue

@@ -12,10 +12,10 @@ import { buttonVariants } from '../button';
 
 // Props
 const props = withDefaults(defineProps<PaginationFirstProps & {
-    size?: ButtonVariants['size'];
-    class?: HTMLAttributes['class'];
+	size?: ButtonVariants['size'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'icon-sm',
+	size: 'icon-sm',
 });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -24,9 +24,9 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <PaginationFirst data-slot="pagination-first" :aria-label="t('uiVintage.pagination.first')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
-        <slot>
-            <HugeiconsIcon :icon="ArrowLeftDoubleIcon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:-translate-x-0.5" aria-hidden="true" />
-        </slot>
-    </PaginationFirst>
+	<PaginationFirst data-slot="pagination-first" :aria-label="t('uiVintage.pagination.first')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+		<slot>
+			<HugeiconsIcon :icon="ArrowLeftDoubleIcon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:-translate-x-0.5" aria-hidden="true" />
+		</slot>
+	</PaginationFirst>
 </template>

package/src/components/ui/pagination/PaginationItem.vue

@@ -10,10 +10,10 @@ import { buttonVariants } from '../button';
 
 // Props
 const props = withDefaults(defineProps<PaginationListItemProps & {
-    size?: ButtonVariants['size'];
-    class?: HTMLAttributes['class'];
+	size?: ButtonVariants['size'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'icon-sm',
+	size: 'icon-sm',
 });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -22,20 +22,20 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <PaginationListItem data-slot="pagination-item" :aria-label="t('uiVintage.pagination.page', { page: props.value })" v-bind="delegatedProps" :class="cn(
-        buttonVariants({ variant: 'secondary', size: props.size }),
-        'tabular-nums',
-        'data-selected:border-primary data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:border-primary data-selected:hover:bg-primary-hover',
-        'data-selected:animate-[uv-pagination-pop_380ms_var(--ease-bounce)]',
-        props.class
-    )">
-        <slot>{{ props.value }}</slot>
-    </PaginationListItem>
+	<PaginationListItem data-slot="pagination-item" :aria-label="t('uiVintage.pagination.page', { page: props.value })" v-bind="delegatedProps" :class="cn(
+		buttonVariants({ variant: 'secondary', size: props.size }),
+		'tabular-nums',
+		'data-selected:border-primary data-selected:bg-primary data-selected:text-primary-foreground data-selected:hover:border-primary data-selected:hover:bg-primary-hover',
+		'data-selected:animate-[uv-pagination-pop_380ms_var(--ease-bounce)]',
+		props.class
+	)">
+		<slot>{{ props.value }}</slot>
+	</PaginationListItem>
 </template>
 
 <style>
 @keyframes uv-pagination-pop {
-    0% { transform: scale(0.82); }
-    100% { transform: scale(1); }
+	0% { transform: scale(0.82); }
+	100% { transform: scale(1); }
 }
 </style>

package/src/components/ui/pagination/PaginationLast.vue

@@ -12,10 +12,10 @@ import { buttonVariants } from '../button';
 
 // Props
 const props = withDefaults(defineProps<PaginationLastProps & {
-    size?: ButtonVariants['size'];
-    class?: HTMLAttributes['class'];
+	size?: ButtonVariants['size'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'icon-sm',
+	size: 'icon-sm',
 });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -24,9 +24,9 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <PaginationLast data-slot="pagination-last" :aria-label="t('uiVintage.pagination.last')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
-        <slot>
-            <HugeiconsIcon :icon="ArrowRightDoubleIcon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:translate-x-0.5" aria-hidden="true" />
-        </slot>
-    </PaginationLast>
+	<PaginationLast data-slot="pagination-last" :aria-label="t('uiVintage.pagination.last')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+		<slot>
+			<HugeiconsIcon :icon="ArrowRightDoubleIcon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:translate-x-0.5" aria-hidden="true" />
+		</slot>
+	</PaginationLast>
 </template>

package/src/components/ui/pagination/PaginationNext.vue

@@ -12,10 +12,10 @@ import { buttonVariants } from '../button';
 
 // Props
 const props = withDefaults(defineProps<PaginationNextProps & {
-    size?: ButtonVariants['size'];
-    class?: HTMLAttributes['class'];
+	size?: ButtonVariants['size'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'icon-sm',
+	size: 'icon-sm',
 });
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -24,9 +24,9 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <PaginationNext data-slot="pagination-next" :aria-label="t('uiVintage.pagination.next')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
-        <slot>
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:translate-x-0.5" aria-hidden="true" />
-        </slot>
-    </PaginationNext>
+	<PaginationNext data-slot="pagination-next" :aria-label="t('uiVintage.pagination.next')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+		<slot>
+			<HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:translate-x-0.5" aria-hidden="true" />
+		</slot>
+	</PaginationNext>
 </template>