@brumaombra/ui-vintage 0.7.13 → 0.8.0

package/src/components/single-value-card/SingleValueCard.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import { ArrowDownRight01Icon, ArrowUpRight01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
+import { AnimatedNumber } from '../ui/animated-number';
 import { Card, CardContent } from '../ui/card';
+import { cn } from '../../lib/utils';
 import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
@@ -10,8 +14,19 @@ const props = withDefaults(defineProps<{
     label: string;
     icon: HugeiconsIconDefinition;
     valueColor?: 'default' | 'green' | 'red' | 'gray';
+    trend?: number | null;
+    trendLabel?: string;
+    description?: string;
+    animate?: boolean;
+    formatOptions?: Intl.NumberFormatOptions;
+    class?: HTMLAttributes['class'];
 }>(), {
-    valueColor: 'default'
+    valueColor: 'default',
+    trend: null,
+    trendLabel: '',
+    description: '',
+    animate: true,
+    formatOptions: undefined
 });
 
 // Value classes
@@ -24,29 +39,50 @@ const valueClass = computed(() => {
         case 'gray':
             return 'text-gray-600 dark:text-gray-400';
         default:
-            return 'text-(--text-primary-light) dark:text-(--text-primary-dark)';
+            return 'text-foreground';
     }
 });
+
+// Trend badge presentation
+const trendIsPositive = computed(() => (props.trend ?? 0) >= 0);
+const formattedTrend = computed(() => `${trendIsPositive.value ? '+' : ''}${props.trend}%`);
 </script>
 
 <template>
-    <Card class="flex-row items-center p-4!">
-        <CardContent class="flex-row items-center gap-0 p-0!">
+    <Card :class="cn('group/stat flex-row items-center p-4!', props.class)">
+        <CardContent class="w-full flex-row items-center gap-0 p-0!">
             <!-- Icon -->
-            <Card color="gray" class="mr-4 flex h-12 w-12 shrink-0 items-center justify-center p-0!">
-                <HugeiconsIcon :icon="props.icon" class="size-5" />
+            <Card color="gray" class="mr-4 flex size-12 shrink-0 items-center justify-center p-0! transition-[rotate,scale,border-color] duration-500 ease-bounce group-hover/stat:-rotate-6 group-hover/stat:scale-105 group-hover/stat:border-primary/50">
+                <HugeiconsIcon :icon="props.icon" class="size-5 transition-colors duration-300 group-hover/stat:text-primary" />
             </Card>
 
             <!-- Content -->
-            <div class="flex flex-col">
+            <div class="flex min-w-0 flex-1 flex-col">
                 <!-- Label -->
-                <span class="mb-1 text-xs font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
+                <span class="mb-1 truncate text-xs font-semibold text-muted-foreground">
                     {{ props.label }}
                 </span>
 
-                <!-- Value -->
-                <span :class="['text-2xl md:text-xl font-bold', valueClass]">
-                    {{ props.value }}
+                <!-- Value and trend -->
+                <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
+                    <span :class="['text-2xl font-bold md:text-xl', valueClass]">
+                        <AnimatedNumber v-if="props.animate && typeof props.value === 'number'" :value="props.value" :format-options="props.formatOptions" />
+                        <template v-else>{{ props.value }}</template>
+                    </span>
+
+                    <!-- Trend badge -->
+                    <span v-if="props.trend !== null" :class="cn('inline-flex items-center gap-0.5 rounded-sm px-1 py-0.5 text-[11px] font-bold', trendIsPositive ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-red-500/10 text-red-600 dark:text-red-400')">
+                        <HugeiconsIcon :icon="trendIsPositive ? ArrowUpRight01Icon : ArrowDownRight01Icon" class="size-3" />
+                        {{ formattedTrend }}
+                    </span>
+                    <span v-if="props.trend !== null && props.trendLabel" class="text-[11px] text-muted-foreground">
+                        {{ props.trendLabel }}
+                    </span>
+                </div>
+
+                <!-- Description -->
+                <span v-if="props.description" class="mt-1 text-xs text-muted-foreground">
+                    {{ props.description }}
                 </span>
             </div>
         </CardContent>

package/src/components/theme-selector/ThemeSelector.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { LaptopIcon, Moon01Icon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { applyTheme, applyThemeWithTransition, getStoredTheme, type ThemeMode } from './theme-transition';
 
 const { t } = useI18n();
 const isOpen = ref(false);
-const currentTheme = ref('auto');
+const currentTheme = ref<ThemeMode>('auto');
+const triggerRef = ref<InstanceType<typeof Button> | null>(null);
 let mediaQueryList: MediaQueryList | undefined;
 let handleSystemThemeChange: (() => void) | undefined;
 
@@ -26,40 +28,20 @@ const getThemeIcon = (theme: string) => {
 
 // Available themes
 const themes = computed(() => [
-    { id: 'light', label: t('uiVintage.theme.light') },
-    { id: 'dark', label: t('uiVintage.theme.dark') },
-    { id: 'auto', label: t('uiVintage.theme.auto') }
+    { id: 'light' as const, label: t('uiVintage.theme.light') },
+    { id: 'dark' as const, label: t('uiVintage.theme.dark') },
+    { id: 'auto' as const, label: t('uiVintage.theme.auto') }
 ]);
 
-// Check if system prefers dark mode
-const isSystemDarkPreferred = () => {
-    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-};
-
-// Apply the selected theme to the document
-const applyTheme = (theme: string) => {
-    document.documentElement.classList.remove('light', 'dark');
-
-    // If auto is selected, apply the theme based on system preference
-    if (theme === 'auto') {
-        if (isSystemDarkPreferred()) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.add('light');
-        }
-    } else {
-        document.documentElement.classList.add(theme);
-    }
-
-    // Persist the selected theme in localStorage
-    localStorage.setItem('theme', theme);
-};
-
 // Handle theme selection from the menu
-const handleSelectTheme = (theme: string) => {
+const handleSelectTheme = async (theme: ThemeMode) => {
     currentTheme.value = theme;
-    applyTheme(theme);
     isOpen.value = false;
+
+    // Reveal the new theme from the trigger button once the menu has closed
+    await nextTick();
+    const triggerElement = (triggerRef.value as { $el?: Element } | null)?.$el ?? null;
+    await applyThemeWithTransition(theme, triggerElement);
 };
 
 // Compute the icon for the currently selected theme
@@ -78,7 +60,7 @@ const themeOptions = computed(() => {
 
 // On component mounted
 onMounted(() => {
-    const savedTheme = localStorage.getItem('theme') || 'auto';
+    const savedTheme = getStoredTheme();
     currentTheme.value = savedTheme;
     applyTheme(savedTheme);
     mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
@@ -86,7 +68,7 @@ onMounted(() => {
     // Handler to update the theme
     handleSystemThemeChange = () => {
         if (currentTheme.value === 'auto') {
-            applyTheme('auto');
+            void applyThemeWithTransition('auto');
         }
     };
 
@@ -106,8 +88,10 @@ onUnmounted(() => {
     <Popover v-model:open="isOpen">
         <!-- Trigger button showing the current theme icon -->
         <PopoverTrigger as-child>
-            <Button variant="secondary" size="icon" :aria-label="t('uiVintage.theme.ariaLabel')">
-                <HugeiconsIcon :icon="currentThemeIcon" class="h-5 w-5" />
+            <Button ref="triggerRef" variant="secondary" size="icon" :aria-label="t('uiVintage.theme.ariaLabel')">
+                <Transition mode="out-in" enter-active-class="transition-[rotate,scale,opacity] duration-[420ms] ease-bounce" enter-from-class="-rotate-90 scale-50 opacity-0" leave-active-class="transition-[rotate,scale,opacity] duration-150 ease-snappy" leave-to-class="rotate-90 scale-50 opacity-0">
+                    <HugeiconsIcon :key="currentTheme" :icon="currentThemeIcon" class="h-5 w-5" />
+                </Transition>
             </Button>
         </PopoverTrigger>
 
@@ -119,7 +103,7 @@ onUnmounted(() => {
                         <CommandItem v-for="option in themeOptions" :key="option.key" :value="option.key" @select="handleSelectTheme(option.key)">
                             <HugeiconsIcon :icon="option.icon" class="size-4" />
                             <span class="flex-1">{{ option.label }}</span>
-                            <HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0" :class="currentTheme === option.key ? 'opacity-100' : 'opacity-0'" />
+                            <HugeiconsIcon :icon="Tick02Icon" class="ml-auto size-4 shrink-0 text-primary! transition-[opacity,scale] duration-300 ease-bounce" :class="currentTheme === option.key ? 'scale-100 opacity-100' : 'scale-50 opacity-0'" />
                         </CommandItem>
                     </CommandGroup>
                 </CommandList>

package/src/components/theme-selector/index.ts

@@ -1,2 +1,4 @@
 export { default } from './ThemeSelector.vue';
-export { default as ThemeSelector } from './ThemeSelector.vue';
+export { default as ThemeSelector } from './ThemeSelector.vue';
+export { applyTheme, applyThemeWithTransition, getStoredTheme, isDarkTheme } from './theme-transition';
+export type { ThemeMode, ThemeTransitionOrigin } from './theme-transition';

package/src/components/theme-selector/theme-transition.ts

@@ -0,0 +1,86 @@
+export type ThemeMode = 'light' | 'dark' | 'auto';
+
+export interface ThemeTransitionOrigin {
+    x: number;
+    y: number;
+}
+
+const THEME_STORAGE_KEY = 'theme';
+
+type DocumentWithViewTransition = Document & {
+    startViewTransition?: (callback: () => void) => {
+        ready: Promise<void>;
+        finished: Promise<void>;
+    };
+};
+
+// Check if the system prefers dark mode
+const isSystemDarkPreferred = () => {
+    return typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+};
+
+// Resolve whether a theme mode ends up dark
+export const isDarkTheme = (theme: ThemeMode) => {
+    return theme === 'dark' || (theme === 'auto' && isSystemDarkPreferred());
+};
+
+// Read the persisted theme mode
+export const getStoredTheme = (): ThemeMode => {
+    if (typeof localStorage === 'undefined') return 'auto';
+    const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+    return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
+};
+
+// Apply the selected theme to the document and persist it
+export const applyTheme = (theme: ThemeMode) => {
+    if (typeof document === 'undefined') return;
+    const root = document.documentElement;
+    root.classList.remove('light', 'dark');
+    root.classList.add(isDarkTheme(theme) ? 'dark' : 'light');
+    localStorage.setItem(THEME_STORAGE_KEY, theme);
+};
+
+// Apply a theme with a circular reveal that grows from the origin point (View Transitions API)
+export const applyThemeWithTransition = async (theme: ThemeMode, origin?: ThemeTransitionOrigin | Element | null) => {
+    const doc = document as DocumentWithViewTransition;
+    const root = document.documentElement;
+    const willChange = root.classList.contains('dark') !== isDarkTheme(theme);
+    const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+    // Fall back to an instant switch when the transition is unsupported or pointless
+    if (!doc.startViewTransition || !willChange || prefersReducedMotion) {
+        applyTheme(theme);
+        return;
+    }
+
+    // Resolve the reveal origin (defaults to the top-right corner)
+    let x = window.innerWidth;
+    let y = 0;
+    if (origin instanceof Element) {
+        const rect = origin.getBoundingClientRect();
+        x = rect.left + rect.width / 2;
+        y = rect.top + rect.height / 2;
+    } else if (origin) {
+        x = origin.x;
+        y = origin.y;
+    }
+    const radius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+
+    // Freeze CSS transitions so the snapshots capture the final colors
+    root.classList.add('uv-theme-switching');
+    const transition = doc.startViewTransition(() => applyTheme(theme));
+
+    try {
+        await transition.ready;
+        root.animate({
+            clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`]
+        }, {
+            duration: 620,
+            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            pseudoElement: '::view-transition-new(root)'
+        });
+        await transition.finished;
+    } finally {
+        root.classList.remove('uv-theme-switching');
+    }
+};

package/src/components/ui/accordion/Accordion.vue

@@ -1,58 +1,73 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
-import { ref } from 'vue';
+import { computed, ref, useId } from 'vue';
 import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
-import { Card, CardContent } from '@brumaombra/ui-vintage/card';
+import { Card } from '../card';
+import { cn } from '../../../lib/utils';
 import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
     title: string;
     initiallyExpanded?: boolean;
+    open?: boolean;
     icon?: HugeiconsIconDefinition | null;
     iconClass?: HTMLAttributes['class'];
+    class?: HTMLAttributes['class'];
 }>(), {
-    initiallyExpanded: false
+    initiallyExpanded: false,
+    open: undefined
 });
 
-const expanded = ref(props.initiallyExpanded);
+// Emits
+const emits = defineEmits<{
+    'update:open': [value: boolean];
+}>();
+
+const contentId = useId();
+const internalExpanded = ref(props.initiallyExpanded);
+
+// Support both controlled (v-model:open) and uncontrolled usage
+const expanded = computed(() => props.open ?? internalExpanded.value);
 
 // Toggle expanded state
 const toggleExpanded = () => {
-    expanded.value = !expanded.value;
+    const nextValue = !expanded.value;
+    internalExpanded.value = nextValue;
+    emits('update:open', nextValue);
 };
 </script>
 
 <template>
-    <Card class="p-0! overflow-hidden">
-        <CardContent class="p-0! gap-0">
-            <!-- Header -->
-            <div class="flex items-center justify-between p-5 gap-4 text-left cursor-pointer" @click="toggleExpanded">
-                <div class="flex items-center gap-3 min-w-0">
-                    <!-- Icon -->
-                    <div v-if="props.icon" class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-(--bg-card-light) border border-(--border-light) dark:bg-(--bg-card-dark) dark:border-(--border-dark) md:h-10 md:w-10">
-                        <HugeiconsIcon :icon="props.icon" :class="['size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)', props.iconClass]" />
-                    </div>
-
-                    <!-- Title -->
-                    <div class="text-sm md:text-base! font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark) text-left">
-                        {{ props.title }}
-                    </div>
+    <Card :data-state="expanded ? 'open' : 'closed'" :class="cn('group/accordion gap-0! overflow-hidden sm:gap-0! p-0! data-[state=open]:border-border-strong', props.class)">
+        <!-- Header -->
+        <button type="button" :aria-expanded="expanded" :aria-controls="contentId" class="flex w-full cursor-pointer items-center justify-between gap-4 p-5 text-left outline-none transition-colors duration-150 hover:bg-surface/70 focus-visible:bg-surface focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-ring/40" @click="toggleExpanded">
+            <div class="flex min-w-0 items-center gap-3">
+                <!-- Icon -->
+                <div v-if="props.icon" class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[border-color,color] duration-200 group-data-[state=open]/accordion:border-primary/60 md:size-10">
+                    <HugeiconsIcon :icon="props.icon" :class="cn('size-4 text-muted-foreground transition-colors duration-200 group-data-[state=open]/accordion:text-primary', props.iconClass)" />
                 </div>
 
-                <!-- Toggle icon -->
-                <div class="shrink-0 w-8 h-8 flex items-center justify-center rounded bg-(--bg-card-light) dark:bg-(--bg-card-dark) border border-(--border-light) dark:border-(--border-dark) transition-transform duration-300 cursor-pointer" :class="{ 'rotate-180': expanded }">
-                    <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
+                <!-- Title -->
+                <div class="text-left text-sm font-semibold text-foreground md:text-base!">
+                    {{ props.title }}
                 </div>
             </div>
 
-            <!-- Content -->
-            <div :class="['grid transition-all duration-300 ease-in-out', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
-                <div :class="['overflow-hidden px-5 transition-[padding] duration-300 ease-in-out', expanded ? 'pb-5' : 'pb-0']">
+            <!-- Toggle icon -->
+            <div class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-card transition-[rotate,border-color,background-color] duration-[420ms] ease-spring group-data-[state=open]/accordion:rotate-180 group-data-[state=open]/accordion:border-primary/50 group-data-[state=open]/accordion:bg-primary/10">
+                <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-muted-foreground transition-colors duration-200 group-data-[state=open]/accordion:text-primary" />
+            </div>
+        </button>
+
+        <!-- Content -->
+        <div :id="contentId" role="region" :aria-hidden="!expanded" :inert="!expanded || undefined" :class="['grid transition-[grid-template-rows,opacity] duration-[380ms] ease-out-expo', expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0']">
+            <div class="overflow-hidden">
+                <div :class="['px-5 pb-5 transition-[translate,filter] duration-[420ms] ease-spring', expanded ? 'translate-y-0 blur-0' : '-translate-y-2 blur-[2px]']">
                     <slot />
                 </div>
             </div>
-        </CardContent>
+        </div>
     </Card>
 </template>

package/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -25,8 +25,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
     <AlertDialogPortal>
-        <AlertDialogOverlay data-slot="alert-dialog-overlay" class="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" />
-        <AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn('bg-card text-card-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 fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-2xl duration-200 sm:max-w-lg', props.class)">
+        <AlertDialogOverlay data-slot="alert-dialog-overlay" class="uv-overlay-motion fixed inset-0 z-50 bg-black/40 backdrop-blur-[3px] dark:bg-black/60" />
+        <AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn('uv-modal-motion bg-card text-card-foreground fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-elevated-xl sm:max-w-lg', props.class)">
             <slot />
         </AlertDialogContent>
     </AlertDialogPortal>

package/src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <div data-slot="alert-dialog-footer" :class="cn('flex flex-col-reverse gap-3 border-t border-border px-5 py-4 sm:flex-row-reverse sm:px-6', props.class)">
+    <div data-slot="alert-dialog-footer" :class="cn('flex flex-col-reverse gap-3 border-t border-border bg-surface/60 px-5 py-4 sm:flex-row-reverse sm:px-6', props.class)">
         <slot />
     </div>
 </template>

package/src/components/ui/animated-number/AnimatedNumber.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = withDefaults(defineProps<{
+    value: number;
+    duration?: number;
+    locale?: string;
+    formatOptions?: Intl.NumberFormatOptions;
+    prefix?: string;
+    suffix?: string;
+    animateOnMount?: boolean;
+    class?: HTMLAttributes['class'];
+}>(), {
+    duration: 900,
+    locale: undefined,
+    formatOptions: undefined,
+    prefix: '',
+    suffix: '',
+    animateOnMount: true
+});
+
+const displayValue = ref(props.animateOnMount ? 0 : props.value);
+const direction = ref<'up' | 'down' | null>(null);
+let frame: number | null = null;
+
+// Format the displayed value
+const formatter = computed(() => {
+    // Default to the precision of the target so intermediate frames never show stray decimals
+    const decimals = (String(props.value).split('.')[1] ?? '').length;
+    return new Intl.NumberFormat(props.locale, props.formatOptions ?? { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+});
+const formattedValue = computed(() => `${props.prefix}${formatter.value.format(displayValue.value)}${props.suffix}`);
+
+// Decelerating curve so the count settles gently on the final value
+const easeOutExpo = (progress: number) => progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
+
+// Tween from the current displayed value to the target value
+const animateTo = (target: number) => {
+    if (frame !== null) cancelAnimationFrame(frame);
+
+    // Jump straight to the value when motion is reduced or unavailable
+    const prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    if (typeof requestAnimationFrame === 'undefined' || prefersReducedMotion || props.duration <= 0) {
+        displayValue.value = target;
+        return;
+    }
+
+    const from = displayValue.value;
+    const start = performance.now();
+    direction.value = target >= from ? 'up' : 'down';
+
+    // Advance one frame of the tween
+    const step = (now: number) => {
+        const progress = Math.min(1, (now - start) / props.duration);
+        displayValue.value = from + (target - from) * easeOutExpo(progress);
+        if (progress < 1) {
+            frame = requestAnimationFrame(step);
+        } else {
+            displayValue.value = target;
+            direction.value = null;
+            frame = null;
+        }
+    };
+    frame = requestAnimationFrame(step);
+};
+
+// Re-animate whenever the value changes
+watch(() => props.value, value => animateTo(value));
+
+// Count up on mount
+onMounted(() => {
+    if (props.animateOnMount) animateTo(props.value);
+});
+
+// Stop any pending frame
+onBeforeUnmount(() => {
+    if (frame !== null) cancelAnimationFrame(frame);
+});
+</script>
+
+<template>
+    <span data-slot="animated-number" :data-direction="direction ?? undefined" :aria-label="`${props.prefix}${formatter.format(props.value)}${props.suffix}`" :class="cn('inline-block tabular-nums', props.class)">
+        <span aria-hidden="true">{{ formattedValue }}</span>
+    </span>
+</template>

package/src/components/ui/animated-number/index.ts

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

package/src/components/ui/avatar/Avatar.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { AvatarRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { AvatarShape, AvatarSize, AvatarStatus } from '.';
+import { reactiveOmit } from '@vueuse/core';
+import { AvatarRoot } from 'reka-ui';
+import { computed, provide, toRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import { avatarContextKey, avatarShapeClasses, avatarSizeClasses } from '.';
+
+// Props
+const props = withDefaults(defineProps<AvatarRootProps & {
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    status?: AvatarStatus;
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'md',
+    shape: 'circle',
+});
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'shape', 'status');
+
+const { t } = useI18n();
+
+// Share size and shape with the image and fallback
+provide(avatarContextKey, { size: toRef(props, 'size'), shape: toRef(props, 'shape') });
+
+// Status dot size scales with the avatar
+const statusSizeClasses: Record<AvatarSize, string> = {
+    xs: 'size-2',
+    sm: 'size-2.5',
+    md: 'size-3',
+    lg: 'size-3.5',
+    xl: 'size-4',
+};
+
+// Status dot color
+const statusColorClasses: Record<AvatarStatus, string> = {
+    online: 'bg-success',
+    offline: 'bg-muted-foreground',
+    busy: 'bg-destructive',
+    away: 'bg-warning',
+};
+
+// Square avatars tuck the dot slightly outside the corner
+const statusPositionClass = computed(() => props.shape === 'square' ? '-right-0.5 -bottom-0.5' : 'right-0 bottom-0');
+</script>
+
+<template>
+    <span data-slot="avatar" :data-size="props.size" :data-shape="props.shape" :data-status="props.status" :class="cn('relative inline-flex shrink-0 select-none align-middle', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], props.class)">
+        <!-- Avatar surface -->
+        <AvatarRoot v-bind="delegatedProps" :class="cn('relative flex size-full items-center justify-center overflow-hidden bg-surface', avatarShapeClasses[props.shape])">
+            <slot />
+        </AvatarRoot>
+
+        <!-- Status dot -->
+        <span v-if="props.status" data-slot="avatar-status" :class="cn('absolute rounded-full ring-2 ring-background', statusSizeClasses[props.size], statusPositionClass)">
+            <!-- Soft halo for online presence -->
+            <span v-if="props.status === 'online'" aria-hidden="true" :class="cn('absolute inset-0 rounded-full animate-uv-ping-soft', statusColorClasses[props.status])" />
+            <span aria-hidden="true" :class="cn('relative block size-full rounded-full animate-uv-pop', statusColorClasses[props.status])" />
+            <span class="sr-only">{{ t(`uiVintage.avatar.status.${props.status}`) }}</span>
+        </span>
+    </span>
+</template>

package/src/components/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AvatarFallback } from 'reka-ui';
+import { computed, inject } from 'vue';
+import { cn } from '../../../lib/utils';
+import { avatarContextKey, avatarShapeClasses, avatarTextClasses, getInitials } from '.';
+
+// Props
+const props = defineProps<AvatarFallbackProps & {
+    name?: string;
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'name');
+
+// Size and shape come from the parent avatar
+const context = inject(avatarContextKey, null);
+const textClass = computed(() => avatarTextClasses[context?.size.value ?? 'md']);
+const shapeClass = computed(() => avatarShapeClasses[context?.shape.value ?? 'circle']);
+
+// Initials computed from the name prop
+const initials = computed(() => getInitials(props.name));
+</script>
+
+<template>
+    <AvatarFallback data-slot="avatar-fallback" v-bind="delegatedProps" :aria-label="props.name || undefined" :class="cn('flex size-full items-center justify-center bg-surface font-bold uppercase text-muted-foreground', textClass, shapeClass, props.class)">
+        <slot>{{ initials }}</slot>
+    </AvatarFallback>
+</template>