@brumaombra/ui-vintage 0.7.13 → 0.8.0

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

@@ -0,0 +1,2 @@
+export { default as PinInput } from './PinInput.vue';
+export { default as PinInputInput } from './PinInputInput.vue';

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

@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
     <PopoverPortal>
         <PopoverContent data-slot="popover-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded border border-border p-4 transition-colors duration-300 ease-in-out origin-(--reka-popover-content-transform-origin) outline-hidden',
+            '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
         )
             ">

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

@@ -1,24 +1,39 @@
 <script setup lang="ts">
 import type { ProgressRootProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
 import { ProgressIndicator, ProgressRoot } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
 // Props
-const props = withDefaults(defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(), {
-    modelValue: 0
+const props = withDefaults(defineProps<ProgressRootProps & {
+    indeterminate?: boolean;
+    class?: HTMLAttributes['class'];
+}>(), {
+    modelValue: 0,
+    indeterminate: false
 });
 
-const delegatedProps = reactiveOmit(props, 'class');
+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));
+});
 </script>
 
 <template>
     <ProgressRoot data-slot="progress" v-bind="delegatedProps" :class="cn(
-        'bg-(--bg-selected-light) dark:bg-(--bg-selected-dark) relative h-2 w-full overflow-hidden',
+        'relative h-2 w-full overflow-hidden rounded-sm bg-muted',
         props.class
-    )
-        ">
-        <ProgressIndicator data-slot="progress-indicator" class="bg-primary h-full w-full flex-1 transition-all" :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`" />
+    )">
+        <!-- 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 after:absolute after:inset-0 after:animate-uv-shimmer after:bg-[linear-gradient(90deg,transparent,rgb(255_255_255/0.35),transparent)]" :style="`transform: translateX(-${100 - percentage}%);`" />
     </ProgressRoot>
 </template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<RadioGroupRootProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+// Emits
+const emits = defineEmits<RadioGroupRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+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>
+</template>

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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { AcceptableValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { RadioGroupIndicator, RadioGroupItem } from 'reka-ui';
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<{
+    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]:shadow-glow 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>
+
+        <!-- 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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { RadioGroupItemEmits, RadioGroupItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { RadioGroupIndicator, RadioGroupItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<RadioGroupItemProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+// Emits
+const emits = defineEmits<RadioGroupItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+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>
+</template>

package/src/components/ui/radio-group/index.ts

@@ -0,0 +1,3 @@
+export { default as RadioGroup } from './RadioGroup.vue';
+export { default as RadioGroupItem } from './RadioGroupItem.vue';
+export { default as RadioGroupCard } from './RadioGroupCard.vue';

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

@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
     <SelectPortal>
         <SelectContent data-slot="select-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto rounded border border-border transition-colors duration-300 ease-in-out max-sm:w-(--reka-select-trigger-width) max-sm:min-w-(--reka-select-trigger-width)',
+            '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

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

@@ -16,14 +16,14 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
     <SelectItem data-slot="select-item" v-bind="forwardedProps" :class="cn(
-        'focus:bg-accent focus:text-accent-foreground [&_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',
+        '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" />
+                    <HugeiconsIcon :icon="Tick02Icon" class="size-4 animate-uv-pop text-primary" />
                 </slot>
             </SelectItemIndicator>
         </span>

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

@@ -36,7 +36,7 @@ const props = defineProps<{
 
             <!-- Description -->
             <span v-if="props.description" data-slot="select-item-content-description" :class="cn(
-                'font-regular text-[11px] sm:text-xs leading-4 sm:leading-5 text-(--text-secondary-light) dark:text-(--text-secondary-dark)',
+                'font-regular text-[11px] sm:text-xs leading-4 sm:leading-5 text-muted-foreground',
                 props.descriptionClass
             )
                 ">

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

@@ -19,15 +19,15 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
     <SelectTrigger data-slot="select-trigger" :data-size="size" v-bind="forwardedProps" :class="cn(
-        'data-placeholder:text-(--text-secondary-light) [&_svg:not([class*=\'text-\'])]:text-(--text-secondary-light) flex w-fit cursor-pointer items-center justify-between gap-2 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold whitespace-nowrap text-(--text-primary-light) transition-all duration-300 ease-in-out outline-none disabled:cursor-not-allowed disabled:opacity-60 data-[size=default]:h-13 data-[size=sm]:h-10 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:data-placeholder:text-(--text-secondary-dark) dark:[&_svg:not([class*=\'text-\'])]:text-(--text-secondary-dark) sm:text-sm',
-        'focus-visible:border-(--border-hover-light) focus-visible:ring-0 dark:focus-visible:border-(--border-hover-dark)',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        'group/select-trigger uv-field flex w-fit cursor-pointer items-center justify-between gap-2 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold whitespace-nowrap text-foreground shadow-elevated-sm outline-none data-placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60 data-[size=default]:h-13 data-[size=sm]:h-10 sm:text-sm',
+        '*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+        'aria-invalid:animate-uv-shake',
         props.class
-    )
-        ">
+    )">
         <slot />
         <SelectIcon as-child>
-            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 opacity-50" />
+            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 opacity-60 transition-transform duration-300 ease-spring group-data-[state=open]/select-trigger:rotate-180" />
         </SelectIcon>
     </SelectTrigger>
 </template>

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

@@ -44,7 +44,7 @@ const props = defineProps<SelectValueProps & {
 
                 <!-- Description -->
                 <span v-if="props.description" data-slot="select-value-content-description" :class="cn(
-                    'min-w-0 whitespace-normal wrap-break-word text-[11px] leading-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark) sm:text-xs sm:leading-5 max-sm:[display:-webkit-box] max-sm:overflow-hidden max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:3]',
+                    'min-w-0 whitespace-normal wrap-break-word text-[11px] leading-4 text-muted-foreground sm:text-xs sm:leading-5 max-sm:[display:-webkit-box] max-sm:overflow-hidden max-sm:[-webkit-box-orient:vertical] max-sm:[-webkit-line-clamp:3]',
                     props.descriptionClass
                 )
                     ">

package/src/components/ui/sheet/SheetContent.vue

@@ -30,15 +30,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <DialogPortal>
         <SheetOverlay />
         <DialogContent data-slot="sheet-content" :class="cn(
-            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+            'bg-background fixed z-50 flex flex-col gap-4 shadow-elevated-xl outline-none [animation-fill-mode:both] data-[state=open]:[animation-duration:480ms] data-[state=open]:[animation-timing-function:var(--ease-spring)] data-[state=closed]:[animation-duration:200ms] data-[state=closed]:[animation-timing-function:var(--ease-snappy)]',
             side === 'right' &&
-            'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+            'data-[state=open]:[animation-name:uv-sheet-in-right] data-[state=closed]:[animation-name:uv-sheet-out-right] inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
             side === 'left' &&
-            'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+            'data-[state=open]:[animation-name:uv-sheet-in-left] data-[state=closed]:[animation-name:uv-sheet-out-left] inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
             side === 'top' &&
-            'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+            'data-[state=open]:[animation-name:uv-sheet-in-top] data-[state=closed]:[animation-name:uv-sheet-out-top] inset-x-0 top-0 h-auto border-b',
             side === 'bottom' &&
-            'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+            'data-[state=open]:[animation-name:uv-sheet-in-bottom] data-[state=closed]:[animation-name:uv-sheet-out-bottom] inset-x-0 bottom-0 h-auto border-t',
             props.class
         )
             " v-bind="{ ...$attrs, ...forwarded }">

package/src/components/ui/sheet/SheetOverlay.vue

@@ -13,7 +13,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 
 <template>
     <DialogOverlay data-slot="sheet-overlay" :class="cn(
-        'fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'uv-overlay-motion fixed inset-0 z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
         props.class
     )
         " v-bind="delegatedProps">

package/src/components/ui/sidebar/Sidebar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { SidebarProps } from '.';
+import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { Sheet, SheetContent } from '../sheet';
 import SheetDescription from '../sheet/SheetDescription.vue';
@@ -19,6 +20,7 @@ const props = withDefaults(defineProps<SidebarProps>(), {
     compact: false
 });
 
+const { t } = useI18n();
 const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
 
 function handleMobileSidebarClick(event: MouseEvent) {
@@ -40,12 +42,12 @@ function handleMobileSidebarClick(event: MouseEvent) {
     </div>
 
     <Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
-        <SheetContent data-sidebar="sidebar" data-slot="sidebar" data-mobile="true" :data-compact="props.compact ? 'true' : 'false'" :side="side" class="group/sidebar-wrapper border-sidebar-border bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden" :style="{
+        <SheetContent data-sidebar="sidebar" data-slot="sidebar" data-mobile="true" :data-compact="props.compact ? 'true' : 'false'" :side="side" class="group/sidebar-wrapper border-sidebar-border bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 data-[state=open]:[animation-duration:320ms] data-[state=open]:[animation-timing-function:var(--ease-out-expo)] [&>button]:hidden" :style="{
             '--sidebar-width': SIDEBAR_WIDTH_MOBILE
         }">
             <SheetHeader class="sr-only">
-                <SheetTitle>Sidebar</SheetTitle>
-                <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+                <SheetTitle>{{ t('uiVintage.sidebar.title') }}</SheetTitle>
+                <SheetDescription>{{ t('uiVintage.sidebar.description') }}</SheetDescription>
             </SheetHeader>
             <div class="flex h-full w-full flex-col" @click="handleMobileSidebarClick">
                 <slot />
@@ -56,7 +58,7 @@ function handleMobileSidebarClick(event: MouseEvent) {
     <div v-else class="group/sidebar-wrapper group peer text-sidebar-foreground hidden md:block" data-slot="sidebar" :data-state="state" :data-collapsible="state === 'collapsed' ? collapsible : ''" :data-variant="variant" :data-side="side">
         <!-- This is what handles the sidebar gap on desktop  -->
         <div :class="cn(
-            'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+            'relative w-(--sidebar-width) bg-transparent transition-[width] duration-300 ease-out-expo',
             'group-data-[collapsible=offcanvas]:w-0',
             'group-data-[side=right]:rotate-180',
             variant === 'floating' || variant === 'inset'
@@ -65,7 +67,7 @@ function handleMobileSidebarClick(event: MouseEvent) {
         )
             " />
         <div :class="cn(
-            'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+            'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-300 ease-out-expo md:flex',
             side === 'left'
                 ? 'left-0 group-data-[collapsible=offcanvas]:-left-(--sidebar-width)'
                 : 'right-0 group-data-[collapsible=offcanvas]:-right-(--sidebar-width)',

package/src/components/ui/sidebar/SidebarRail.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { useSidebar } from './utils';
 
@@ -8,11 +9,12 @@ const props = defineProps<{
     class?: HTMLAttributes['class'];
 }>();
 
+const { t } = useI18n();
 const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
-    <button data-sidebar="rail" data-slot="sidebar-rail" aria-label="Toggle Sidebar" :tabindex="-1" title="Toggle Sidebar" :class="cn(
+    <button data-sidebar="rail" data-slot="sidebar-rail" :aria-label="t('uiVintage.sidebar.toggle')" :tabindex="-1" :title="t('uiVintage.sidebar.toggle')" :class="cn(
         'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
         'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
         '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',

package/src/components/ui/sidebar/SidebarTrigger.vue

@@ -2,6 +2,7 @@
 import type { HTMLAttributes } from 'vue';
 import { PanelLeftIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
+import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 import { Button } from '../button';
 import { useSidebar } from './utils';
@@ -11,12 +12,13 @@ const props = defineProps<{
     class?: HTMLAttributes['class'];
 }>();
 
+const { t } = useI18n();
 const { toggleSidebar } = useSidebar();
 </script>
 
 <template>
     <Button data-sidebar="trigger" data-slot="sidebar-trigger" variant="secondary" size="icon" :class="cn(props.class)" @click="toggleSidebar">
         <HugeiconsIcon :icon="PanelLeftIcon" />
-        <span class="sr-only">Toggle Sidebar</span>
+        <span class="sr-only">{{ t('uiVintage.sidebar.toggle') }}</span>
     </Button>
 </template>

package/src/components/ui/skeleton/Skeleton.vue

@@ -10,8 +10,8 @@ const props = defineProps<{
 
 <template>
     <div data-slot="skeleton" :class="cn(
-        props.class,
-        'animate-pulse rounded border border-(--border-light) bg-(--bg-surface-light) transition-colors duration-300 ease-in-out dark:border-(--border-dark) dark:bg-(--bg-surface-dark)'
-    )
-        " />
+        'relative overflow-hidden rounded border border-border bg-surface',
+        'after:absolute after:inset-0 after:animate-uv-shimmer after:bg-[linear-gradient(90deg,transparent,color-mix(in_oklab,var(--foreground)_6%,transparent),transparent)]',
+        props.class
+    )" />
 </template>

package/src/components/ui/slider/Slider.vue

@@ -19,14 +19,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
     <SliderRoot v-slot="{ modelValue }" data-slot="slider" :class="cn(
-        'relative flex w-full cursor-pointer touch-none items-center select-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+        'group/slider relative flex w-full cursor-pointer touch-none items-center py-2 select-none data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-2 data-[orientation=vertical]:py-0',
         props.class
-    )
-        " v-bind="forwarded">
-        <SliderTrack data-slot="slider-track" class="bg-muted relative grow overflow-hidden rounded data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2">
-            <SliderRange data-slot="slider-range" class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+    )" v-bind="forwarded">
+        <!-- Track -->
+        <SliderTrack data-slot="slider-track" class="relative grow overflow-hidden rounded bg-muted transition-[height,width] duration-200 ease-spring data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 group-hover/slider:data-[orientation=horizontal]:h-2.5 group-hover/slider:data-[orientation=vertical]:w-2.5">
+            <!-- Filled range -->
+            <SliderRange data-slot="slider-range" class="absolute bg-primary bg-[linear-gradient(90deg,transparent,rgb(255_255_255/0.22))] data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
         </SliderTrack>
 
-        <SliderThumb v-for="(_, key) in modelValue" :key="key" data-slot="slider-thumb" class="bg-white border-primary ring-ring/50 block size-5 shrink-0 rounded border shadow-sm transition-[color,box-shadow,transform] hover:scale-105 hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
+        <!-- Thumbs -->
+        <SliderThumb v-for="(_, key) in modelValue" :key="key" data-slot="slider-thumb" class="block size-5 shrink-0 cursor-grab rounded border-2 border-primary bg-white shadow-elevated-md outline-none [transition:scale_300ms_var(--ease-spring),box-shadow_200ms] hover:scale-110 hover:shadow-[0_0_0_6px_color-mix(in_oklab,var(--primary)_16%,transparent)] focus-visible:shadow-[0_0_0_6px_color-mix(in_oklab,var(--primary)_24%,transparent)] active:scale-125 active:cursor-grabbing disabled:pointer-events-none disabled:opacity-50" />
     </SliderRoot>
 </template>

package/src/components/ui/spinner/Spinner.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { getUiVintageRuntimeMessage } from '../../../lib/i18n';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = withDefaults(defineProps<{
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    label?: string;
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'md',
+    label: ''
+});
+
+const resolvedLabel = computed(() => props.label || getUiVintageRuntimeMessage('uiVintage.buttons.loading', 'Loading'));
+
+// Size classes
+const sizeClasses: Record<NonNullable<typeof props.size>, string> = {
+    xs: 'size-3',
+    sm: 'size-4',
+    md: 'size-5',
+    lg: 'size-8',
+    xl: 'size-12'
+};
+</script>
+
+<template>
+    <span data-slot="spinner" role="status" :aria-label="resolvedLabel" :class="cn('relative inline-flex shrink-0 text-current', sizeClasses[props.size], props.class)">
+        <svg viewBox="0 0 24 24" fill="none" class="size-full animate-[spin_0.7s_linear_infinite]" aria-hidden="true">
+            <!-- Track -->
+            <circle cx="12" cy="12" r="9.5" stroke="currentColor" stroke-width="2.5" class="opacity-20" />
+
+            <!-- Arc -->
+            <circle cx="12" cy="12" r="9.5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="60" class="origin-center animate-[uv-spinner-dash_1.4s_ease-in-out_infinite]" />
+        </svg>
+    </span>
+</template>
+
+<style>
+@keyframes uv-spinner-dash {
+    0% { stroke-dashoffset: 56; }
+    50% { stroke-dashoffset: 16; transform: rotate(135deg); }
+    100% { stroke-dashoffset: 56; transform: rotate(450deg); }
+}
+</style>

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

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.vue';

package/src/components/ui/stepper/SimpleStepper.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import type { StepperStep } from '.';
+import { Tick02Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed } from 'vue';
+import { cn } from '../../../lib/utils';
+import Stepper from './Stepper.vue';
+import StepperDescription from './StepperDescription.vue';
+import StepperIndicator from './StepperIndicator.vue';
+import StepperItem from './StepperItem.vue';
+import StepperSeparator from './StepperSeparator.vue';
+import StepperTitle from './StepperTitle.vue';
+import StepperTrigger from './StepperTrigger.vue';
+
+// Props
+const props = withDefaults(defineProps<{
+    steps: StepperStep[];
+    orientation?: 'horizontal' | 'vertical';
+    linear?: boolean;
+    class?: HTMLAttributes['class'];
+}>(), {
+    orientation: 'horizontal',
+    linear: true,
+});
+
+// Active step (1-based, v-model)
+const modelValue = defineModel<number>({ default: 1 });
+
+const isVertical = computed(() => props.orientation === 'vertical');
+</script>
+
+<template>
+    <Stepper v-model="modelValue" :orientation="props.orientation" :linear="props.linear" :class="cn('w-full', isVertical ? 'gap-0' : 'items-start gap-2', props.class)">
+        <StepperItem v-for="(step, index) in props.steps" :key="index" :step="index + 1" :class="isVertical ? 'items-start gap-0 pb-8 last:pb-0' : 'flex-1 flex-col items-center gap-0'">
+            <!-- Step trigger -->
+            <StepperTrigger :class="isVertical ? 'items-start gap-4' : 'flex-col gap-2 text-center'">
+                <StepperIndicator v-slot="{ step: stepNumber, state }">
+                    <!-- Custom icon until the step is completed -->
+                    <HugeiconsIcon v-if="state !== 'completed' && step.icon" :icon="step.icon" class="size-4" />
+                    <span v-else-if="state !== 'completed'">{{ stepNumber }}</span>
+                    <HugeiconsIcon v-else :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+                </StepperIndicator>
+
+                <!-- Step text -->
+                <div :class="cn('flex flex-col gap-0.5', isVertical ? 'pt-2' : 'items-center px-1')">
+                    <StepperTitle>{{ step.title }}</StepperTitle>
+                    <StepperDescription v-if="step.description">{{ step.description }}</StepperDescription>
+                </div>
+            </StepperTrigger>
+
+            <!-- Connector to the next step -->
+            <StepperSeparator v-if="index < props.steps.length - 1" :class="isVertical ? 'absolute top-12 bottom-1 left-[21px]' : 'absolute top-[21px] right-[calc(-50%+18px)] left-[calc(50%+26px)]'" />
+        </StepperItem>
+    </Stepper>
+</template>

package/src/components/ui/stepper/Stepper.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { StepperRootEmits, StepperRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperRoot, useForwardPropsEmits } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = withDefaults(defineProps<StepperRootProps & {
+    class?: HTMLAttributes['class'];
+}>(), {
+    orientation: 'horizontal',
+    linear: true,
+});
+
+// Emits
+const emits = defineEmits<StepperRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <StepperRoot v-slot="slotProps" data-slot="stepper" :aria-label="t('uiVintage.stepper.label')" v-bind="forwarded" :class="cn('flex gap-2 data-[orientation=vertical]:flex-col', props.class)">
+        <slot v-bind="slotProps" />
+    </StepperRoot>
+</template>

package/src/components/ui/stepper/StepperDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { StepperDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperDescription } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<StepperDescriptionProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <StepperDescription data-slot="stepper-description" v-bind="delegatedProps" :class="cn('text-xs text-muted-foreground', props.class)">
+        <slot />
+    </StepperDescription>
+</template>