@brumaombra/ui-vintage 0.9.0 → 0.9.2

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

@@ -3,7 +3,8 @@ import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { computed, nextTick, ref, watch } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { MinusSignIcon, PlusSignIcon } from '@hugeicons/core-free-icons';
+import MinusSignIcon from '@hugeicons/core-free-icons/MinusSignIcon';
+import PlusSignIcon from '@hugeicons/core-free-icons/PlusSignIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
 import { useI18n } from 'vue-i18n';
@@ -12,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
@@ -37,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
@@ -84,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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PaginationEllipsisProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
-import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
+import MoreHorizontalIcon from '@hugeicons/core-free-icons/MoreHorizontalIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationEllipsis } from 'reka-ui';
@@ -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

@@ -2,7 +2,7 @@
 import type { PaginationFirstProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '../button';
-import { ArrowLeftDoubleIcon } from '@hugeicons/core-free-icons';
+import ArrowLeftDoubleIcon from '@hugeicons/core-free-icons/ArrowLeftDoubleIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationFirst } from 'reka-ui';
@@ -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

@@ -2,7 +2,7 @@
 import type { PaginationLastProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '../button';
-import { ArrowRightDoubleIcon } from '@hugeicons/core-free-icons';
+import ArrowRightDoubleIcon from '@hugeicons/core-free-icons/ArrowRightDoubleIcon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationLast } from 'reka-ui';
@@ -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

@@ -2,7 +2,7 @@
 import type { PaginationNextProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '../button';
-import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import ArrowRight01Icon from '@hugeicons/core-free-icons/ArrowRight01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationNext } from 'reka-ui';
@@ -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>

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

@@ -2,7 +2,7 @@
 import type { PaginationPrevProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '../button';
-import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import ArrowLeft01Icon from '@hugeicons/core-free-icons/ArrowLeft01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { reactiveOmit } from '@vueuse/core';
 import { PaginationPrev } from 'reka-ui';
@@ -12,10 +12,10 @@ import { buttonVariants } from '../button';
 
 // Props
 const props = withDefaults(defineProps<PaginationPrevProps & {
-    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>
-    <PaginationPrev data-slot="pagination-previous" :aria-label="t('uiVintage.pagination.previous')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
-        <slot>
-            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:-translate-x-0.5" aria-hidden="true" />
-        </slot>
-    </PaginationPrev>
+	<PaginationPrev data-slot="pagination-previous" :aria-label="t('uiVintage.pagination.previous')" v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary', size: props.size }), 'group/pagination-nav', props.class)">
+		<slot>
+			<HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 transition-transform duration-220 ease-spring group-hover/pagination-nav:-translate-x-0.5" aria-hidden="true" />
+		</slot>
+	</PaginationPrev>
 </template>

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

@@ -11,17 +11,17 @@ import PaginationPrevious from './PaginationPrevious.vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    total: number;
-    itemsPerPage?: number;
-    siblingCount?: number;
-    showEdges?: boolean;
-    disabled?: boolean;
-    class?: HTMLAttributes['class'];
+	total: number;
+	itemsPerPage?: number;
+	siblingCount?: number;
+	showEdges?: boolean;
+	disabled?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    itemsPerPage: 10,
-    siblingCount: 1,
-    showEdges: true,
-    disabled: false,
+	itemsPerPage: 10,
+	siblingCount: 1,
+	showEdges: true,
+	disabled: false,
 });
 
 // Current page (1-based, v-model:page)
@@ -29,21 +29,21 @@ const page = defineModel<number>('page', { default: 1 });
 </script>
 
 <template>
-    <Pagination v-model:page="page" :total="props.total" :items-per-page="props.itemsPerPage" :sibling-count="props.siblingCount" :show-edges="props.showEdges" :disabled="props.disabled" :class="props.class">
-        <PaginationContent v-slot="{ items }">
-            <!-- Jump to start / previous -->
-            <PaginationFirst class="hidden sm:inline-flex" />
-            <PaginationPrevious />
+	<Pagination v-model:page="page" :total="props.total" :items-per-page="props.itemsPerPage" :sibling-count="props.siblingCount" :show-edges="props.showEdges" :disabled="props.disabled" :class="props.class">
+		<PaginationContent v-slot="{ items }">
+			<!-- Jump to start / previous -->
+			<PaginationFirst class="hidden sm:inline-flex" />
+			<PaginationPrevious />
 
-            <!-- Page numbers and gaps -->
-            <template v-for="(item, index) in items" :key="item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`">
-                <PaginationItem v-if="item.type === 'page'" :value="item.value" />
-                <PaginationEllipsis v-else />
-            </template>
+			<!-- Page numbers and gaps -->
+			<template v-for="(item, index) in items" :key="item.type === 'page' ? `page-${item.value}` : `ellipsis-${index}`">
+				<PaginationItem v-if="item.type === 'page'" :value="item.value" />
+				<PaginationEllipsis v-else />
+			</template>
 
-            <!-- Next / jump to end -->
-            <PaginationNext />
-            <PaginationLast class="hidden sm:inline-flex" />
-        </PaginationContent>
-    </Pagination>
+			<!-- Next / jump to end -->
+			<PaginationNext />
+			<PaginationLast class="hidden sm:inline-flex" />
+		</PaginationContent>
+	</Pagination>
 </template>

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

@@ -10,11 +10,11 @@ import PinInputInput from './PinInputInput.vue';
 
 // Props
 const props = defineProps<PinInputRootProps<Type> & {
-    length?: number;
-    invalid?: boolean;
-    separatorAfter?: number;
-    class?: HTMLAttributes['class'];
-    inputClass?: HTMLAttributes['class'];
+	length?: number;
+	invalid?: boolean;
+	separatorAfter?: number;
+	class?: HTMLAttributes['class'];
+	inputClass?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -25,24 +25,24 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 // Share the invalid state with the cells (also when they are passed through the slot)
 provide(pinInputContextKey, {
-    invalid: computed(() => !!props.invalid)
+	invalid: computed(() => !!props.invalid)
 });
 </script>
 
 <template>
-    <PinInputRoot v-slot="slotProps" data-slot="pin-input" v-bind="forwarded" :aria-invalid="props.invalid || undefined" :class="cn(
-        'flex items-center gap-2 has-disabled:opacity-60',
-        props.invalid && 'animate-uv-shake',
-        props.class
-    )">
-        <slot v-bind="slotProps">
-            <!-- Auto-rendered cells -->
-            <template v-for="index in props.length ?? 0" :key="index">
-                <PinInputInput :index="index - 1" :class="props.inputClass" />
+	<PinInputRoot v-slot="slotProps" data-slot="pin-input" v-bind="forwarded" :aria-invalid="props.invalid || undefined" :class="cn(
+		'flex items-center gap-2 has-disabled:opacity-60',
+		props.invalid && 'animate-uv-shake',
+		props.class
+	)">
+		<slot v-bind="slotProps">
+			<!-- Auto-rendered cells -->
+			<template v-for="index in props.length ?? 0" :key="index">
+				<PinInputInput :index="index - 1" :class="props.inputClass" />
 
-                <!-- Separator -->
-                <span v-if="props.separatorAfter === index - 1 && index < (props.length ?? 0)" data-slot="pin-input-separator" aria-hidden="true" class="mx-0.5 h-0.5 w-3 shrink-0 rounded-full bg-border-strong" />
-            </template>
-        </slot>
-    </PinInputRoot>
+				<!-- Separator -->
+				<span v-if="props.separatorAfter === index - 1 && index < (props.length ?? 0)" data-slot="pin-input-separator" aria-hidden="true" class="mx-0.5 h-0.5 w-3 shrink-0 rounded-full bg-border-strong" />
+			</template>
+		</slot>
+	</PinInputRoot>
 </template>