@brumaombra/ui-vintage 0.9.0 → 0.9.2

package/src/components/ui/tags-input/TagsInput.vue

@@ -11,9 +11,9 @@ import TagsInputItem from './TagsInputItem.vue';
 
 // Props
 const props = defineProps<TagsInputRootProps<T> & {
-    placeholder?: string;
-    class?: HTMLAttributes['class'];
-    inputClass?: HTMLAttributes['class'];
+	placeholder?: string;
+	class?: HTMLAttributes['class'];
+	inputClass?: HTMLAttributes['class'];
 }>();
 
 // Emits
@@ -27,23 +27,23 @@ const resolvedPlaceholder = computed(() => props.placeholder ?? t('uiVintage.tag
 
 // Stable key per tag (falls back to the index when duplicates are allowed)
 const getItemKey = (item: AcceptableInputValue, index: number) => {
-    if (props.duplicate) return index;
-    return typeof item === 'object' ? JSON.stringify(item) : String(item);
+	if (props.duplicate) return index;
+	return typeof item === 'object' ? JSON.stringify(item) : String(item);
 };
 </script>
 
 <template>
-    <TagsInputRoot v-slot="slotProps" data-slot="tags-input" v-bind="forwarded" :class="cn(
-        'uv-field flex min-h-13 w-full flex-wrap items-center gap-2 rounded border border-input bg-secondary px-3 py-2 text-xs font-semibold text-foreground shadow-elevated-sm sm:text-sm',
-        'data-disabled:cursor-not-allowed data-disabled:opacity-60 data-invalid:animate-uv-shake',
-        props.class
-    )">
-        <slot v-bind="slotProps">
-            <!-- Auto-rendered tags -->
-            <TagsInputItem v-for="(item, index) in slotProps.modelValue" :key="getItemKey(item, index)" :value="item" />
+	<TagsInputRoot v-slot="slotProps" data-slot="tags-input" v-bind="forwarded" :class="cn(
+		'uv-field flex min-h-13 w-full flex-wrap items-center gap-2 rounded border border-input bg-secondary px-3 py-2 text-xs font-semibold text-foreground shadow-elevated-sm sm:text-sm',
+		'data-disabled:cursor-not-allowed data-disabled:opacity-60 data-invalid:animate-uv-shake',
+		props.class
+	)">
+		<slot v-bind="slotProps">
+			<!-- Auto-rendered tags -->
+			<TagsInputItem v-for="(item, index) in slotProps.modelValue" :key="getItemKey(item, index)" :value="item" />
 
-            <!-- Text input -->
-            <TagsInputInput :placeholder="resolvedPlaceholder" :class="props.inputClass" />
-        </slot>
-    </TagsInputRoot>
+			<!-- Text input -->
+			<TagsInputInput :placeholder="resolvedPlaceholder" :class="props.inputClass" />
+		</slot>
+	</TagsInputRoot>
 </template>

package/src/components/ui/tags-input/TagsInputInput.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<TagsInputInputProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -15,9 +15,9 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <TagsInputInput data-slot="tags-input-input" v-bind="forwardedProps" :class="cn(
-        'h-7 min-w-24 flex-1 bg-transparent px-1 text-xs font-semibold text-foreground outline-none sm:text-sm',
-        'placeholder:text-muted-foreground placeholder:opacity-60 disabled:cursor-not-allowed',
-        props.class
-    )" />
+	<TagsInputInput data-slot="tags-input-input" v-bind="forwardedProps" :class="cn(
+		'h-7 min-w-24 flex-1 bg-transparent px-1 text-xs font-semibold text-foreground outline-none sm:text-sm',
+		'placeholder:text-muted-foreground placeholder:opacity-60 disabled:cursor-not-allowed',
+		props.class
+	)" />
 </template>

package/src/components/ui/tags-input/TagsInputItem.vue

@@ -9,7 +9,7 @@ import TagsInputItemText from './TagsInputItemText.vue';
 
 // Props
 const props = defineProps<TagsInputItemProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -17,19 +17,19 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <TagsInputItem data-slot="tags-input-item" v-bind="forwardedProps" :class="cn(
-        'group/tag inline-flex h-7 max-w-full animate-uv-pop items-center gap-1.5 rounded border border-border bg-surface py-1 pr-1 pl-2.5 text-xs font-semibold text-foreground outline-none',
-        'transition-[border-color,background-color,box-shadow] duration-150 ease-snappy',
-        'data-[state=active]:border-primary data-[state=active]:bg-primary/5 data-[state=active]:ring-[3px] data-[state=active]:ring-primary/15',
-        'data-disabled:opacity-60',
-        props.class
-    )">
-        <slot>
-            <!-- Tag text -->
-            <TagsInputItemText />
+	<TagsInputItem data-slot="tags-input-item" v-bind="forwardedProps" :class="cn(
+		'group/tag inline-flex h-7 max-w-full animate-uv-pop items-center gap-1.5 rounded border border-border bg-surface py-1 pr-1 pl-2.5 text-xs font-semibold text-foreground outline-none',
+		'transition-[border-color,background-color,box-shadow] duration-150 ease-snappy',
+		'data-[state=active]:border-primary data-[state=active]:bg-primary/5 data-[state=active]:ring-[3px] data-[state=active]:ring-primary/15',
+		'data-disabled:opacity-60',
+		props.class
+	)">
+		<slot>
+			<!-- Tag text -->
+			<TagsInputItemText />
 
-            <!-- Delete button -->
-            <TagsInputItemDelete />
-        </slot>
-    </TagsInputItem>
+			<!-- Delete button -->
+			<TagsInputItemDelete />
+		</slot>
+	</TagsInputItem>
 </template>

package/src/components/ui/tags-input/TagsInputItemDelete.vue

@@ -2,14 +2,14 @@
 import type { TagsInputItemDeleteProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import Cancel01Icon from '@hugeicons/core-free-icons/Cancel01Icon';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { TagsInputItemDelete, useForwardProps } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<TagsInputItemDeleteProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -17,15 +17,15 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <TagsInputItemDelete data-slot="tags-input-item-delete" v-bind="forwardedProps" :class="cn(
-        'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
-        '[transition:rotate_320ms_var(--ease-spring),scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy)]',
-        'hover:rotate-90 hover:bg-accent hover:text-foreground active:scale-[0.8] focus-visible:ring-[3px] focus-visible:ring-ring/45',
-        'group-data-[state=active]/tag:text-primary data-disabled:pointer-events-none',
-        props.class
-    )">
-        <slot>
-            <HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
-        </slot>
-    </TagsInputItemDelete>
+	<TagsInputItemDelete data-slot="tags-input-item-delete" v-bind="forwardedProps" :class="cn(
+		'inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none',
+		'[transition:rotate_320ms_var(--ease-spring),scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),color_150ms_var(--ease-snappy)]',
+		'hover:rotate-90 hover:bg-accent hover:text-foreground active:scale-[0.8] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+		'group-data-[state=active]/tag:text-primary data-disabled:pointer-events-none',
+		props.class
+	)">
+		<slot>
+			<HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
+		</slot>
+	</TagsInputItemDelete>
 </template>

package/src/components/ui/tags-input/TagsInputItemText.vue

@@ -7,7 +7,7 @@ import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<TagsInputItemTextProps & {
-    class?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class');
@@ -15,7 +15,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <TagsInputItemText data-slot="tags-input-item-text" v-bind="forwardedProps" :class="cn('truncate leading-none', props.class)">
-        <slot />
-    </TagsInputItemText>
+	<TagsInputItemText data-slot="tags-input-item-text" v-bind="forwardedProps" :class="cn('truncate leading-none', props.class)">
+		<slot />
+	</TagsInputItemText>
 </template>

package/src/components/ui/textarea/Textarea.vue

@@ -6,19 +6,19 @@ import { useFieldControlId } from '../field/field-context';
 
 // Props
 const props = defineProps<{
-    class?: HTMLAttributes['class'];
-    defaultValue?: string | number;
-    modelValue?: string | number;
+	class?: HTMLAttributes['class'];
+	defaultValue?: string | number;
+	modelValue?: string | number;
 }>();
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: string | number): void;
+	(e: 'update:modelValue', payload: string | number): void;
 }>();
 
 const modelValue = useVModel(props, 'modelValue', emits, {
-    passive: true,
-    defaultValue: props.defaultValue
+	passive: true,
+	defaultValue: props.defaultValue
 });
 
 // Let a surrounding Field label point to this control
@@ -26,10 +26,10 @@ const fieldControlId = useFieldControlId();
 </script>
 
 <template>
-    <textarea :id="fieldControlId" v-model="modelValue" data-slot="textarea" :class="cn(
-        'uv-field flex field-sizing-content min-h-30 w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
-        'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60',
-        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
-        props.class
-    )" />
+	<textarea :id="fieldControlId" v-model="modelValue" data-slot="textarea" :class="cn(
+		'uv-field flex field-sizing-content min-h-30 w-full min-w-0 rounded border border-input bg-secondary px-4 py-3 text-xs font-semibold text-foreground shadow-elevated-sm outline-none sm:text-sm',
+		'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground placeholder:opacity-60',
+		'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 aria-invalid:animate-uv-shake',
+		props.class
+	)" />
 </template>

package/src/components/ui/time-picker/TimePicker.vue

@@ -6,46 +6,46 @@ import { Input } from '../input';
 
 // Props
 const props = withDefaults(defineProps<{
-    defaultValue?: string;
-    modelValue?: string;
-    step?: string | number;
-    min?: string;
-    max?: string;
-    disabled?: boolean;
-    class?: HTMLAttributes['class'];
-    inputClass?: HTMLAttributes['class'];
+	defaultValue?: string;
+	modelValue?: string;
+	step?: string | number;
+	min?: string;
+	max?: string;
+	disabled?: boolean;
+	class?: HTMLAttributes['class'];
+	inputClass?: HTMLAttributes['class'];
 }>(), {
-    defaultValue: '',
-    step: 60,
-    disabled: false
+	defaultValue: '',
+	step: 60,
+	disabled: false
 });
 
 // Emits
 const emits = defineEmits<{
-    (e: 'update:modelValue', payload: string): void;
+	(e: 'update:modelValue', payload: string): void;
 }>();
 
 const internalValue = ref(props.defaultValue);
 const isControlled = computed(() => props.modelValue !== undefined);
 
 const time = computed({
-    get: () =>
-        (isControlled.value ? props.modelValue : internalValue.value) ?? '',
-    set: (value: string | number) => {
-        const nextValue = String(value);
+	get: () =>
+		(isControlled.value ? props.modelValue : internalValue.value) ?? '',
+	set: (value: string | number) => {
+		const nextValue = String(value);
 
-        if (!isControlled.value) internalValue.value = nextValue;
+		if (!isControlled.value) internalValue.value = nextValue;
 
-        emits('update:modelValue', nextValue);
-    }
+		emits('update:modelValue', nextValue);
+	}
 });
 </script>
 
 <template>
-    <Input v-model="time" type="time" :step="props.step" :min="props.min" :max="props.max" :disabled="props.disabled" :class="cn(
-        'cursor-pointer font-normal hover:border-border-strong hover:bg-accent [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-70 hover:[&::-webkit-calendar-picker-indicator]:opacity-100',
-        props.inputClass,
-        props.class
-    )
-        " />
+	<Input v-model="time" type="time" :step="props.step" :min="props.min" :max="props.max" :disabled="props.disabled" :class="cn(
+		'cursor-pointer font-normal hover:border-border-strong hover:bg-accent [&::-webkit-calendar-picker-indicator]:cursor-pointer [&::-webkit-calendar-picker-indicator]:opacity-70 hover:[&::-webkit-calendar-picker-indicator]:opacity-100',
+		props.inputClass,
+		props.class
+	)
+		" />
 </template>

package/src/components/ui/toggle-group/Toggle.vue

@@ -9,14 +9,14 @@ import { toggleVariants } from '.';
 
 // Props
 const props = withDefaults(defineProps<ToggleProps & {
-    variant?: ToggleVariants['variant'];
-    size?: ToggleVariants['size'];
-    class?: HTMLAttributes['class'];
+	variant?: ToggleVariants['variant'];
+	size?: ToggleVariants['size'];
+	class?: HTMLAttributes['class'];
 }>(), {
-    variant: 'default',
-    size: 'default',
-    disabled: false,
-    modelValue: undefined,
+	variant: 'default',
+	size: 'default',
+	disabled: false,
+	modelValue: undefined,
 });
 
 // Emits
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <Toggle v-slot="slotProps" data-slot="toggle" :data-variant="props.variant" :data-size="props.size" v-bind="forwarded" :class="cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)">
-        <slot v-bind="slotProps" />
-    </Toggle>
+	<Toggle v-slot="slotProps" data-slot="toggle" :data-variant="props.variant" :data-size="props.size" v-bind="forwarded" :class="cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)">
+		<slot v-bind="slotProps" />
+	</Toggle>
 </template>

package/src/components/ui/toggle-group/ToggleGroup.vue

@@ -10,15 +10,15 @@ import { toggleGroupContextKey } from '.';
 
 // Props
 const props = withDefaults(defineProps<ToggleGroupRootProps & {
-    size?: ToggleGroupSize;
-    highlight?: boolean;
-    class?: HTMLAttributes['class'];
+	size?: ToggleGroupSize;
+	highlight?: boolean;
+	class?: HTMLAttributes['class'];
 }>(), {
-    size: 'default',
-    highlight: false,
-    disabled: false,
-    rovingFocus: true,
-    loop: true,
+	size: 'default',
+	highlight: false,
+	disabled: false,
+	rovingFocus: true,
+	loop: true,
 });
 
 // Emits
@@ -29,8 +29,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 // Single selection gets the sliding indicator (mirrors reka's type inference)
 const isSingle = computed(() => {
-    if (props.type) return props.type === 'single';
-    return !Array.isArray(props.modelValue ?? props.defaultValue);
+	if (props.type) return props.type === 'single';
+	return !Array.isArray(props.modelValue ?? props.defaultValue);
 });
 
 // Share size and indicator mode with the items
@@ -45,16 +45,16 @@ const animated = ref(false);
 
 // Measure the active item (offset* ignores the press scale transform)
 function measure() {
-    const root = unrefElement(rootRef) as HTMLElement | null | undefined;
-    if (!root || !isSingle.value) return;
-    const item = root.querySelector<HTMLElement>('[data-slot="toggle-group-item"][data-state="on"]');
-    activeItem.value = item;
-    if (!item) {
-        visible.value = false;
-        return;
-    }
-    rect.value = { x: item.offsetLeft, y: item.offsetTop, width: item.offsetWidth, height: item.offsetHeight };
-    visible.value = true;
+	const root = unrefElement(rootRef) as HTMLElement | null | undefined;
+	if (!root || !isSingle.value) return;
+	const item = root.querySelector<HTMLElement>('[data-slot="toggle-group-item"][data-state="on"]');
+	activeItem.value = item;
+	if (!item) {
+		visible.value = false;
+		return;
+	}
+	rect.value = { x: item.offsetLeft, y: item.offsetTop, width: item.offsetWidth, height: item.offsetHeight };
+	visible.value = true;
 }
 
 // Re-measure when selection changes or when the layout moves
@@ -64,30 +64,30 @@ useResizeObserver(activeItem, measure);
 
 // First placement is instant, later moves slide
 onMounted(async () => {
-    measure();
-    await nextTick();
-    requestAnimationFrame(() => {
-        animated.value = true;
-    });
+	measure();
+	await nextTick();
+	requestAnimationFrame(() => {
+		animated.value = true;
+	});
 });
 
 const indicatorStyle = computed<CSSProperties>(() => ({
-    width: `${rect.value.width}px`,
-    height: `${rect.value.height}px`,
-    transform: `translate(${rect.value.x}px, ${rect.value.y}px) scale(${visible.value ? 1 : 0.9})`,
-    opacity: visible.value ? 1 : 0,
+	width: `${rect.value.width}px`,
+	height: `${rect.value.height}px`,
+	transform: `translate(${rect.value.x}px, ${rect.value.y}px) scale(${visible.value ? 1 : 0.9})`,
+	opacity: visible.value ? 1 : 0,
 }));
 </script>
 
 <template>
-    <ToggleGroupRoot ref="rootRef" v-slot="slotProps" data-slot="toggle-group" :data-size="props.size" v-bind="forwarded" :class="cn('relative inline-flex w-fit items-center gap-1 rounded border border-border bg-card p-1 shadow-elevated-sm data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', props.class)">
-        <!-- Sliding indicator behind the active item -->
-        <span v-if="isSingle" data-slot="toggle-group-indicator" aria-hidden="true" :style="indicatorStyle" :class="cn(
-            'pointer-events-none absolute top-0 left-0 z-0 rounded-sm border',
-            animated && '[transition:transform_380ms_var(--ease-spring),width_380ms_var(--ease-spring),height_380ms_var(--ease-spring),opacity_180ms_var(--ease-snappy)]',
-            props.highlight ? 'border-primary/40 bg-primary/10' : 'border-border-strong bg-surface shadow-elevated-sm'
-        )" />
+	<ToggleGroupRoot ref="rootRef" v-slot="slotProps" data-slot="toggle-group" :data-size="props.size" v-bind="forwarded" :class="cn('relative inline-flex w-fit items-center gap-1 rounded border border-border bg-card p-1 shadow-elevated-sm data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch', props.class)">
+		<!-- Sliding indicator behind the active item -->
+		<span v-if="isSingle" data-slot="toggle-group-indicator" aria-hidden="true" :style="indicatorStyle" :class="cn(
+			'pointer-events-none absolute top-0 left-0 z-0 rounded-sm border',
+			animated && '[transition:transform_380ms_var(--ease-spring),width_380ms_var(--ease-spring),height_380ms_var(--ease-spring),opacity_180ms_var(--ease-snappy)]',
+			props.highlight ? 'border-primary/40 bg-primary/10' : 'border-border-strong bg-surface shadow-elevated-sm'
+		)" />
 
-        <slot v-bind="slotProps" />
-    </ToggleGroupRoot>
+		<slot v-bind="slotProps" />
+	</ToggleGroupRoot>
 </template>

package/src/components/ui/toggle-group/ToggleGroupItem.vue

@@ -10,8 +10,8 @@ import { toggleGroupContextKey, toggleGroupItemVariants } from '.';
 
 // Props
 const props = defineProps<ToggleGroupItemProps & {
-    size?: ToggleGroupSize;
-    class?: HTMLAttributes['class'];
+	size?: ToggleGroupSize;
+	class?: HTMLAttributes['class'];
 }>();
 
 const delegatedProps = reactiveOmit(props, 'class', 'size');
@@ -24,11 +24,11 @@ const hasIndicator = computed(() => context?.indicator.value ?? false);
 </script>
 
 <template>
-    <ToggleGroupItem v-slot="slotProps" data-slot="toggle-group-item" :data-size="size" v-bind="forwardedProps" :class="cn(
-        toggleGroupItemVariants({ size }),
-        !hasIndicator && 'hover:bg-accent data-[state=on]:bg-accent',
-        props.class
-    )">
-        <slot v-bind="slotProps" />
-    </ToggleGroupItem>
+	<ToggleGroupItem v-slot="slotProps" data-slot="toggle-group-item" :data-size="size" v-bind="forwardedProps" :class="cn(
+		toggleGroupItemVariants({ size }),
+		!hasIndicator && 'hover:bg-accent data-[state=on]:bg-accent',
+		props.class
+	)">
+		<slot v-bind="slotProps" />
+	</ToggleGroupItem>
 </template>

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

@@ -7,62 +7,62 @@ export { default as ToggleGroup } from './ToggleGroup.vue';
 export { default as ToggleGroupItem } from './ToggleGroupItem.vue';
 
 export type ToggleVariants = {
-    variant?: 'default' | 'outline' | null | undefined;
-    size?: 'default' | 'sm' | 'lg' | null | undefined;
+	variant?: 'default' | 'outline' | null | undefined;
+	size?: 'default' | 'sm' | 'lg' | null | undefined;
 };
 
 export type ToggleGroupSize = 'default' | 'sm' | 'lg';
 
 // Standalone toggle button
 export const toggleVariants: (props?: ToggleVariants & ClassProp) => string = cva(
-    [
-        "inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded text-xs font-semibold text-muted-foreground outline-none sm:text-sm",
-        "[transition:color_150ms,background-color_150ms,border-color_150ms,box-shadow_220ms,opacity_150ms,transform_380ms_var(--ease-spring)]",
-        "hover:bg-accent hover:text-foreground active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50",
-        "focus-visible:ring-[3px] focus-visible:ring-ring/45",
-        "data-[state=on]:bg-accent data-[state=on]:text-foreground",
-        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    ],
-    {
-        variants: {
-            variant: {
-                default: 'bg-transparent',
-                outline: 'border border-border bg-secondary shadow-elevated-sm hover:border-border-strong data-[state=on]:border-border-strong',
-            },
-            size: {
-                default: 'h-10 min-w-10 px-3',
-                sm: 'h-8 min-w-8 gap-1.5 px-2',
-                lg: 'h-12 min-w-12 px-4',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    },
+	[
+		"inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded text-xs font-semibold text-muted-foreground outline-none sm:text-sm",
+		"[transition:color_150ms,background-color_150ms,border-color_150ms,box-shadow_220ms,opacity_150ms,transform_380ms_var(--ease-spring)]",
+		"hover:bg-accent hover:text-foreground active:scale-[0.97] active:duration-75 disabled:pointer-events-none disabled:opacity-50",
+		"focus-visible:ring-[3px] focus-visible:ring-ring/45",
+		"data-[state=on]:bg-accent data-[state=on]:text-foreground",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	],
+	{
+		variants: {
+			variant: {
+				default: 'bg-transparent',
+				outline: 'border border-border bg-secondary shadow-elevated-sm hover:border-border-strong data-[state=on]:border-border-strong',
+			},
+			size: {
+				default: 'h-10 min-w-10 px-3',
+				sm: 'h-8 min-w-8 gap-1.5 px-2',
+				lg: 'h-12 min-w-12 px-4',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	},
 );
 
 // Segmented control item (sits above the sliding indicator)
 export const toggleGroupItemVariants: (props?: { size?: ToggleGroupSize | null } & ClassProp) => string = cva(
-    [
-        "relative z-10 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-sm text-xs font-semibold text-muted-foreground outline-none sm:text-sm",
-        "[transition:color_150ms,background-color_150ms,box-shadow_220ms,opacity_150ms,transform_380ms_var(--ease-spring)]",
-        "hover:text-foreground data-[state=on]:text-foreground active:scale-[0.96] active:duration-75 disabled:pointer-events-none disabled:opacity-50",
-        "focus-visible:ring-[3px] focus-visible:ring-ring/45",
-        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-    ],
-    {
-        variants: {
-            size: {
-                default: 'h-9 px-3',
-                sm: 'h-7 px-2.5',
-                lg: 'h-11 px-4',
-            },
-        },
-        defaultVariants: {
-            size: 'default',
-        },
-    },
+	[
+		"relative z-10 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-sm text-xs font-semibold text-muted-foreground outline-none sm:text-sm",
+		"[transition:color_150ms,background-color_150ms,box-shadow_220ms,opacity_150ms,transform_380ms_var(--ease-spring)]",
+		"hover:text-foreground data-[state=on]:text-foreground active:scale-[0.96] active:duration-75 disabled:pointer-events-none disabled:opacity-50",
+		"focus-visible:ring-[3px] focus-visible:ring-ring/45",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+	],
+	{
+		variants: {
+			size: {
+				default: 'h-9 px-3',
+				sm: 'h-7 px-2.5',
+				lg: 'h-11 px-4',
+			},
+		},
+		defaultVariants: {
+			size: 'default',
+		},
+	},
 );
 
 // Context shared by a toggle group with its items

package/src/components/ui/tooltip/Tooltip.vue

@@ -12,7 +12,7 @@ const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-    <TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="forwarded">
-        <slot v-bind="slotProps" />
-    </TooltipRoot>
+	<TooltipRoot v-slot="slotProps" data-slot="tooltip" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</TooltipRoot>
 </template>