@brumaombra/ui-vintage 0.9.1 → 0.9.2

package/src/components/slider-form-component/SliderFormComponent.vue

@@ -5,26 +5,26 @@ import { Slider } from '../ui/slider';
 
 // Props
 const props = withDefaults(defineProps<{
-    id?: string;
-    label: string;
-    description?: string;
-    modelValue: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    valueText?: string;
+	id?: string;
+	label: string;
+	description?: string;
+	modelValue: number;
+	min?: number;
+	max?: number;
+	step?: number;
+	valueText?: string;
 }>(), {
-    id: undefined,
-    description: '',
-    min: 0,
-    max: 100,
-    step: 1,
-    valueText: ''
+	id: undefined,
+	description: '',
+	min: 0,
+	max: 100,
+	step: 1,
+	valueText: ''
 });
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', value: number): void;
+	(e: 'update:modelValue', value: number): void;
 }>();
 
 const sliderValue = computed(() => [props.modelValue]);
@@ -32,31 +32,31 @@ const resolvedValueText = computed(() => props.valueText || String(props.modelVa
 
 // Emit the first slider value back to the parent
 const handleUpdateModelValue = (value?: number[]) => {
-    emits('update:modelValue', value?.[0] ?? props.min);
+	emits('update:modelValue', value?.[0] ?? props.min);
 };
 </script>
 
 <template>
-    <Card class="px-4 py-4">
-        <!-- Slider header -->
-        <div class="flex items-center justify-between gap-3">
-            <!-- Label and description block -->
-            <div class="space-y-2">
-                <div class="text-sm font-semibold">
-                    {{ props.label }}
-                </div>
-                <div v-if="props.description" class="text-xs text-muted-foreground">
-                    {{ props.description }}
-                </div>
-            </div>
+	<Card class="px-4 py-4">
+		<!-- Slider header -->
+		<div class="flex items-center justify-between gap-3">
+			<!-- Label and description block -->
+			<div class="space-y-2">
+				<div class="text-sm font-semibold">
+					{{ props.label }}
+				</div>
+				<div v-if="props.description" class="text-xs text-muted-foreground">
+					{{ props.description }}
+				</div>
+			</div>
 
-            <!-- Current slider value display -->
-            <span class="rounded border border-border bg-background px-2 py-1 text-xs font-semibold">
-                {{ resolvedValueText }}
-            </span>
-        </div>
+			<!-- Current slider value display -->
+			<span class="rounded border border-border bg-background px-2 py-1 text-xs font-semibold">
+				{{ resolvedValueText }}
+			</span>
+		</div>
 
-        <!-- Slider control -->
-        <Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" :thumb-label="props.label" @update:model-value="handleUpdateModelValue" />
-    </Card>
+		<!-- Slider control -->
+		<Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" :thumb-label="props.label" @update:model-value="handleUpdateModelValue" />
+	</Card>
 </template>

package/src/components/stat-strip/StatStrip.vue

@@ -7,30 +7,30 @@ import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    items: Array<{
-        label: string;
-        value: string | number;
-        icon?: HugeiconsIconDefinition;
-        formatOptions?: Intl.NumberFormatOptions;
-    }>;
-    animate?: boolean;
-    class?: HTMLAttributes['class'];
+	items: Array<{
+		label: string;
+		value: string | number;
+		icon?: HugeiconsIconDefinition;
+		formatOptions?: Intl.NumberFormatOptions;
+	}>;
+	animate?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    animate: true
+	animate: true
 });
 </script>
 
 <template>
-    <!-- Compact row of stats in one bordered strip -->
-    <ul v-if="props.items.length > 0" data-slot="stat-strip" :class="cn('inline-flex max-w-full flex-wrap items-stretch overflow-hidden rounded border border-border bg-card text-xs shadow-elevated-sm', props.class)">
-        <li v-for="(item, index) in props.items" :key="item.label" :class="['flex items-center gap-2 px-4 py-2.5', index > 0 && 'border-l border-border']">
-            <HugeiconsIcon v-if="item.icon" :icon="item.icon" class="size-4 shrink-0 text-primary" />
-            <span class="font-semibold text-foreground tabular-nums">
-                <AnimatedNumber v-if="props.animate && typeof item.value === 'number'" :value="item.value" :format-options="item.formatOptions" />
-                <template v-else-if="typeof item.value === 'number'">{{ new Intl.NumberFormat(undefined, item.formatOptions).format(item.value) }}</template>
-                <template v-else>{{ item.value }}</template>
-            </span>
-            <span class="text-muted-foreground">{{ item.label }}</span>
-        </li>
-    </ul>
-</template>
+	<!-- Compact row of stats in one bordered strip -->
+	<ul v-if="props.items.length > 0" data-slot="stat-strip" :class="cn('inline-flex max-w-full flex-wrap items-stretch overflow-hidden rounded border border-border bg-card text-xs shadow-elevated-sm', props.class)">
+		<li v-for="(item, index) in props.items" :key="item.label" :class="['flex items-center gap-2 px-4 py-2.5', index > 0 && 'border-l border-border']">
+			<HugeiconsIcon v-if="item.icon" :icon="item.icon" class="size-4 shrink-0 text-primary" />
+			<span class="font-semibold text-foreground tabular-nums">
+				<AnimatedNumber v-if="props.animate && typeof item.value === 'number'" :value="item.value" :format-options="item.formatOptions" />
+				<template v-else-if="typeof item.value === 'number'">{{ new Intl.NumberFormat(undefined, item.formatOptions).format(item.value) }}</template>
+				<template v-else>{{ item.value }}</template>
+			</span>
+			<span class="text-muted-foreground">{{ item.label }}</span>
+		</li>
+	</ul>
+</template>

package/src/components/switch-form-component/SwitchFormComponent.vue

@@ -4,34 +4,34 @@ import { Switch } from '../ui/switch';
 
 // Props
 const props = defineProps<{
-    id: string;
-    label: string;
-    description: string;
-    modelValue: boolean;
+	id: string;
+	label: string;
+	description: string;
+	modelValue: boolean;
 }>();
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', value: boolean): void;
+	(e: 'update:modelValue', value: boolean): void;
 }>();
 </script>
 
 <template>
-    <Card class="flex flex-col gap-2 px-4 py-3 sm:gap-3!">
-        <!-- Switch label and control -->
-        <div class="flex items-center justify-between gap-4">
-            <!-- Switch label (names the switch and toggles it on click) -->
-            <label :for="props.id" class="cursor-pointer text-sm font-semibold">
-                {{ props.label }}
-            </label>
+	<Card class="flex flex-col gap-2 px-4 py-3 sm:gap-3!">
+		<!-- Switch label and control -->
+		<div class="flex items-center justify-between gap-4">
+			<!-- Switch label (names the switch and toggles it on click) -->
+			<label :for="props.id" class="cursor-pointer text-sm font-semibold">
+				{{ props.label }}
+			</label>
 
-            <!-- Switch control -->
-            <Switch :id="props.id" :aria-describedby="`${props.id}-description`" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
-        </div>
+			<!-- Switch control -->
+			<Switch :id="props.id" :aria-describedby="`${props.id}-description`" :model-value="props.modelValue" @update:model-value="emits('update:modelValue', $event)" />
+		</div>
 
-        <!-- Description -->
-        <div :id="`${props.id}-description`" class="text-xs text-muted-foreground">
-            {{ props.description }}
-        </div>
-    </Card>
+		<!-- Description -->
+		<div :id="`${props.id}-description`" class="text-xs text-muted-foreground">
+			{{ props.description }}
+		</div>
+	</Card>
 </template>

package/src/components/text-link/TextLink.vue

@@ -3,35 +3,35 @@ import type { Component } from 'vue';
 
 // Props
 const props = withDefaults(defineProps<{
-    to: string;
-    text: string;
-    linkComponent?: Component | string;
+	to: string;
+	text: string;
+	linkComponent?: Component | string;
 }>(), {
-    linkComponent: 'a'
+	linkComponent: 'a'
 });
 
 // Emits
 const emits = defineEmits<{
-    click: [event: MouseEvent];
+	click: [event: MouseEvent];
 }>();
 
 // Get link props based on the type of link component
 const getLinkProps = () => {
-    if (props.linkComponent === 'a') {
-        return { href: props.to };
-    } else {
-        return { to: props.to };
-    }
+	if (props.linkComponent === 'a') {
+		return { href: props.to };
+	} else {
+		return { to: props.to };
+	}
 };
 
 // Handle click
 const handleClick = (event: MouseEvent) => {
-    emits('click', event);
+	emits('click', event);
 };
 </script>
 
 <template>
-    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
-        {{ props.text }}
-    </component>
+	<component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-foreground hover:underline" @click="handleClick">
+		{{ props.text }}
+	</component>
 </template>

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

@@ -20,97 +20,97 @@ let handleSystemThemeChange: (() => void) | undefined;
 
 // Resolve the icon for each theme mode
 const getThemeIcon = (theme: string) => {
-    if (theme === 'light') {
-        return Sun01Icon;
-    } else if (theme === 'dark') {
-        return Moon01Icon;
-    } else {
-        return LaptopIcon;
-    }
+	if (theme === 'light') {
+		return Sun01Icon;
+	} else if (theme === 'dark') {
+		return Moon01Icon;
+	} else {
+		return LaptopIcon;
+	}
 };
 
 // Available themes
 const themes = computed(() => [
-    { 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') }
+	{ 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') }
 ]);
 
 // Handle theme selection from the menu
 const handleSelectTheme = async (theme: ThemeMode) => {
-    currentTheme.value = theme;
-    isOpen.value = false;
+	currentTheme.value = 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);
+	// 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
 const currentThemeIcon = computed(() => {
-    return getThemeIcon(currentTheme.value);
+	return getThemeIcon(currentTheme.value);
 });
 
 // Theme options for the menu
 const themeOptions = computed(() => {
-    return themes.value.map(theme => ({
-        key: theme.id,
-        label: theme.label,
-        icon: getThemeIcon(theme.id)
-    }));
+	return themes.value.map(theme => ({
+		key: theme.id,
+		label: theme.label,
+		icon: getThemeIcon(theme.id)
+	}));
 });
 
 // On component mounted
 onMounted(() => {
-    const savedTheme = getStoredTheme();
-    currentTheme.value = savedTheme;
-    applyTheme(savedTheme);
-    mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+	const savedTheme = getStoredTheme();
+	currentTheme.value = savedTheme;
+	applyTheme(savedTheme);
+	mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
 
-    // Handler to update the theme
-    handleSystemThemeChange = () => {
-        if (currentTheme.value === 'auto') {
-            void applyThemeWithTransition('auto');
-        }
-    };
+	// Handler to update the theme
+	handleSystemThemeChange = () => {
+		if (currentTheme.value === 'auto') {
+			void applyThemeWithTransition('auto');
+		}
+	};
 
-    // Listen for changes in system theme preference
-    mediaQueryList.addEventListener('change', handleSystemThemeChange);
+	// Listen for changes in system theme preference
+	mediaQueryList.addEventListener('change', handleSystemThemeChange);
 });
 
 // Cleanup system preference listener
 onUnmounted(() => {
-    if (mediaQueryList && handleSystemThemeChange) {
-        mediaQueryList.removeEventListener('change', handleSystemThemeChange);
-    }
+	if (mediaQueryList && handleSystemThemeChange) {
+		mediaQueryList.removeEventListener('change', handleSystemThemeChange);
+	}
 });
 </script>
 
 <template>
-    <Popover v-model:open="isOpen">
-        <!-- Trigger button showing the current theme icon -->
-        <PopoverTrigger as-child>
-            <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>
+	<Popover v-model:open="isOpen">
+		<!-- Trigger button showing the current theme icon -->
+		<PopoverTrigger as-child>
+			<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>
 
-        <!-- Theme options -->
-        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
-            <Command :model-value="currentTheme">
-                <CommandList :aria-label="t('uiVintage.theme.title')">
-                    <CommandGroup :heading="t('uiVintage.theme.title')" stagger>
-                        <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 text-primary! transition-[opacity,scale] duration-300 ease-bounce" :class="currentTheme === option.key ? 'scale-100 opacity-100' : 'scale-50 opacity-0'" />
-                        </CommandItem>
-                    </CommandGroup>
-                </CommandList>
-            </Command>
-        </PopoverContent>
-    </Popover>
+		<!-- Theme options -->
+		<PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
+			<Command :model-value="currentTheme">
+				<CommandList :aria-label="t('uiVintage.theme.title')">
+					<CommandGroup :heading="t('uiVintage.theme.title')" stagger>
+						<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 text-primary! transition-[opacity,scale] duration-300 ease-bounce" :class="currentTheme === option.key ? 'scale-100 opacity-100' : 'scale-50 opacity-0'" />
+						</CommandItem>
+					</CommandGroup>
+				</CommandList>
+			</Command>
+		</PopoverContent>
+	</Popover>
 </template>

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

@@ -1,98 +1,98 @@
 export type ThemeMode = 'light' | 'dark' | 'auto';
 
 export interface ThemeTransitionOrigin {
-    x: number;
-    y: number;
+	x: number;
+	y: number;
 }
 
 const THEME_STORAGE_KEY = 'theme';
 
 type DocumentWithViewTransition = Document & {
-    startViewTransition?: (callback: () => void) => {
-        ready: Promise<void>;
-        finished: Promise<void>;
-    };
+	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;
+	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());
+	return theme === 'dark' || (theme === 'auto' && isSystemDarkPreferred());
 };
 
 // Read the persisted theme mode
 export const getStoredTheme = (): ThemeMode => {
-    if (typeof localStorage === 'undefined') return 'auto';
+	if (typeof localStorage === 'undefined') return 'auto';
 
-    // Storage can throw when the browser blocks it (privacy settings, sandboxed frames)
-    try {
-        const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-        return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
-    } catch {
-        return 'auto';
-    }
+	// Storage can throw when the browser blocks it (privacy settings, sandboxed frames)
+	try {
+		const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+		return storedTheme === 'light' || storedTheme === 'dark' ? storedTheme : 'auto';
+	} catch {
+		return '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');
+	if (typeof document === 'undefined') return;
+	const root = document.documentElement;
+	root.classList.remove('light', 'dark');
+	root.classList.add(isDarkTheme(theme) ? 'dark' : 'light');
 
-    // Persisting is best effort: the theme still applies when storage is blocked
-    try {
-        localStorage.setItem(THEME_STORAGE_KEY, theme);
-    } catch {
-        // Ignore storage errors
-    }
+	// Persisting is best effort: the theme still applies when storage is blocked
+	try {
+		localStorage.setItem(THEME_STORAGE_KEY, theme);
+	} catch {
+		// Ignore storage errors
+	}
 };
 
 // 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;
+	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;
-    }
+	// 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));
+	// 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));
+	// 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');
-    }
+	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');
+	}
 };