@brumaombra/ui-vintage 0.7.13 → 0.8.0

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { StepperIndicatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { Tick02Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { injectStepperItemContext, StepperIndicator } from 'reka-ui';
+import { computed } from 'vue';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<StepperIndicatorProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+// State of the parent step
+const itemContext = injectStepperItemContext();
+const state = computed(() => itemContext.state.value);
+</script>
+
+<template>
+    <StepperIndicator v-slot="{ step }" data-slot="stepper-indicator" :data-state="state" v-bind="delegatedProps" :class="cn(
+        'relative inline-flex size-9 shrink-0 items-center justify-center rounded-full border-2 border-border bg-card text-sm font-bold text-muted-foreground ring-0 ring-primary/15 tabular-nums',
+        '[transition:color_150ms,background-color_220ms,border-color_220ms,box-shadow_380ms_var(--ease-spring),transform_380ms_var(--ease-spring)]',
+        'group-hover/stepper-trigger:border-border-strong group-active/stepper-trigger:scale-95 group-active/stepper-trigger:duration-75',
+        'data-[state=active]:border-primary data-[state=active]:text-primary data-[state=active]:ring-4 data-[state=active]:group-hover/stepper-trigger:border-primary',
+        'data-[state=completed]:border-primary data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground data-[state=completed]:group-hover/stepper-trigger:border-primary',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+    )">
+        <slot :step="step" :state="state">
+            <!-- Completed check -->
+            <HugeiconsIcon v-if="state === 'completed'" :icon="Tick02Icon" class="size-4 animate-uv-pop" :stroke-width="2.5" />
+
+            <!-- Step number -->
+            <span v-else>{{ step }}</span>
+        </slot>
+    </StepperIndicator>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { StepperItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperItem, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<StepperItemProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <StepperItem v-slot="slotProps" data-slot="stepper-item" v-bind="forwardedProps" :class="cn('group/stepper-item relative flex items-center gap-2 data-disabled:pointer-events-none data-disabled:opacity-50', props.class)">
+        <slot v-bind="slotProps" />
+    </StepperItem>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { StepperSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { injectStepperItemContext, injectStepperRootContext, StepperSeparator } from 'reka-ui';
+import { computed } from 'vue';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<StepperSeparatorProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+// Orientation and completion come from the stepper
+const rootContext = injectStepperRootContext();
+const itemContext = injectStepperItemContext();
+const isVertical = computed(() => rootContext.orientation.value === 'vertical');
+const isCompleted = computed(() => itemContext.state.value === 'completed');
+
+// Fill grows along the track from its start
+const fillClass = computed(() => {
+    if (isVertical.value) return cn('origin-top', isCompleted.value ? 'scale-y-100' : 'scale-y-0');
+    return cn('origin-left rtl:origin-right', isCompleted.value ? 'scale-x-100' : 'scale-x-0');
+});
+</script>
+
+<template>
+    <StepperSeparator data-slot="stepper-separator" v-bind="delegatedProps" :class="cn('relative shrink-0 overflow-hidden rounded-full bg-border', isVertical ? 'w-0.5' : 'h-0.5', props.class)">
+        <!-- Progress fill -->
+        <span aria-hidden="true" :class="cn('absolute inset-0 rounded-full bg-primary transition-transform duration-500 ease-out-expo', fillClass)" />
+    </StepperSeparator>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { StepperTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperTitle } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<StepperTitleProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <StepperTitle data-slot="stepper-title" v-bind="delegatedProps" :class="cn('text-xs font-semibold text-foreground transition-colors duration-150 group-data-[state=inactive]/stepper-item:text-muted-foreground sm:text-sm', props.class)">
+        <slot />
+    </StepperTitle>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { StepperTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperTrigger } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<StepperTriggerProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+    <StepperTrigger data-slot="stepper-trigger" v-bind="delegatedProps" :class="cn('group/stepper-trigger flex cursor-pointer items-center gap-3 rounded p-1 text-left outline-none transition-colors duration-150 focus-visible:ring-[3px] focus-visible:ring-ring/45 data-disabled:cursor-not-allowed', props.class)">
+        <slot />
+    </StepperTrigger>
+</template>

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

@@ -0,0 +1,17 @@
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
+
+export { default as SimpleStepper } from './SimpleStepper.vue';
+export { default as Stepper } from './Stepper.vue';
+export { default as StepperDescription } from './StepperDescription.vue';
+export { default as StepperIndicator } from './StepperIndicator.vue';
+export { default as StepperItem } from './StepperItem.vue';
+export { default as StepperSeparator } from './StepperSeparator.vue';
+export { default as StepperTitle } from './StepperTitle.vue';
+export { default as StepperTrigger } from './StepperTrigger.vue';
+
+// Step definition used by SimpleStepper
+export type StepperStep = {
+    title: string;
+    description?: string;
+    icon?: HugeiconsIconDefinition;
+};

package/src/components/ui/switch/Switch.vue

@@ -19,14 +19,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 
 <template>
     <SwitchRoot v-slot="slotProps" data-slot="switch" v-bind="forwarded" :class="cn(
-        'peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-200 outline-none focus-visible:border-(--border-hover-light) focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-60 data-[state=checked]:border-(--button-primary-light) data-[state=checked]:bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:focus-visible:border-(--border-hover-dark) dark:data-[state=checked]:border-(--button-primary-dark) dark:data-[state=checked]:bg-(--bg-selected-dark)',
+        'group/switch peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded border border-input bg-secondary shadow-elevated-sm outline-none',
+        '[transition:background-color_200ms,border-color_200ms,box-shadow_250ms] hover:border-border-strong focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:cursor-not-allowed disabled:opacity-60',
+        'data-[state=checked]:border-primary data-[state=checked]:bg-accent data-[state=checked]:shadow-[0_0_0_3px_color-mix(in_oklab,var(--primary)_14%,transparent)]',
         props.class
-    )
-        ">
+    )">
         <SwitchThumb data-slot="switch-thumb" :class="cn(
-            'pointer-events-none absolute left-1 top-1/2 block h-4 w-4 -translate-y-1/2 rounded-[0.2rem] bg-(--text-secondary-light) ring-0 transition-all duration-200 data-[state=checked]:translate-x-6 data-[state=checked]:bg-(--button-primary-light) dark:bg-(--text-secondary-dark) dark:data-[state=checked]:bg-(--button-primary-dark)'
-        )
-            ">
+            'pointer-events-none absolute left-1 top-1/2 flex h-4 w-4 -translate-y-1/2 items-center justify-center rounded-[0.2rem] bg-muted-foreground ring-0',
+            '[transition:translate_380ms_var(--ease-spring),width_220ms_var(--ease-spring),background-color_200ms]',
+            'group-active/switch:w-5 data-[state=checked]:translate-x-6 data-[state=checked]:bg-primary group-active/switch:data-[state=checked]:translate-x-5'
+        )">
             <slot name="thumb" v-bind="slotProps" />
         </SwitchThumb>
     </SwitchRoot>

package/src/components/ui/tabs/TabsContent.vue

@@ -14,7 +14,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none', props.class)" v-bind="delegatedProps">
+    <TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none data-[state=active]:animate-uv-fade-up', props.class)" v-bind="delegatedProps">
         <slot />
     </TabsContent>
 </template>

package/src/components/ui/tabs/TabsList.vue

@@ -2,23 +2,31 @@
 import type { TabsListProps } from 'reka-ui';
 import type { HTMLAttributes } from 'vue';
 import { reactiveOmit } from '@vueuse/core';
-import { TabsList } from 'reka-ui';
+import { TabsIndicator, TabsList } from 'reka-ui';
 import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<TabsListProps & {
     class?: HTMLAttributes['class'];
+    indicatorClass?: HTMLAttributes['class'];
 }>();
 
-const delegatedProps = reactiveOmit(props, 'class');
+const delegatedProps = reactiveOmit(props, 'class', 'indicatorClass');
 </script>
 
 <template>
     <TabsList data-slot="tabs-list" v-bind="delegatedProps" :class="cn(
-        'inline-flex h-auto w-fit items-center justify-center gap-1 rounded border border-border bg-card p-1 text-card-foreground transition-colors duration-300 ease-in-out',
+        'group/tabs-list relative isolate inline-flex h-auto w-fit items-center justify-center gap-1 rounded border border-border bg-card p-1 text-card-foreground shadow-elevated-sm aria-[orientation=vertical]:flex-col aria-[orientation=vertical]:items-stretch',
         props.class
-    )
-        ">
+    )">
+        <!-- Sliding active indicator -->
+        <TabsIndicator data-slot="tabs-indicator" :class="cn(
+            'absolute -z-10 rounded border border-primary bg-surface shadow-elevated-sm transition-[translate,width,height] duration-[380ms] ease-spring',
+            'group-aria-[orientation=horizontal]/tabs-list:inset-y-1 group-aria-[orientation=horizontal]/tabs-list:left-0 group-aria-[orientation=horizontal]/tabs-list:w-(--reka-tabs-indicator-size) group-aria-[orientation=horizontal]/tabs-list:translate-x-(--reka-tabs-indicator-position)',
+            'group-aria-[orientation=vertical]/tabs-list:inset-x-1 group-aria-[orientation=vertical]/tabs-list:top-0 group-aria-[orientation=vertical]/tabs-list:h-(--reka-tabs-indicator-size) group-aria-[orientation=vertical]/tabs-list:translate-y-(--reka-tabs-indicator-position)',
+            props.indicatorClass
+        )" />
+
         <slot />
     </TabsList>
 </template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -16,10 +16,12 @@ const forwardedProps = useForwardProps(delegatedProps);
 
 <template>
     <TabsTrigger data-slot="tabs-trigger" :class="cn(
-        'text-muted-foreground hover:text-foreground focus-visible:outline-none inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap transition-colors duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 data-[state=active]:cursor-pointer data-[state=active]:border-(--button-primary-light) data-[state=active]:bg-gray-50 data-[state=active]:text-(--button-primary-light) data-[state=active]:font-semibold data-[state=active]:outline-1 data-[state=active]:outline-border data-[state=active]:outline-offset-0 data-[state=active]:shadow-none dark:data-[state=active]:border-(--button-primary-dark) dark:data-[state=active]:bg-(--bg-card-dark) dark:data-[state=active]:text-(--button-primary-dark) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        'relative inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap text-muted-foreground outline-none select-none',
+        '[transition:color_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:text-foreground active:scale-[0.97] focus-visible:ring-[3px] focus-visible:ring-ring/45 disabled:pointer-events-none disabled:opacity-50',
+        'data-[state=active]:text-primary data-[state=inactive]:hover:bg-accent/60',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg]:transition-transform [&_svg]:duration-300 [&_svg]:ease-bounce data-[state=active]:[&_svg]:scale-110',
         props.class
-    )
-        " v-bind="forwardedProps">
+    )" v-bind="forwardedProps">
         <slot />
     </TabsTrigger>
 </template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts" generic="T extends AcceptableInputValue = string">
+import type { AcceptableInputValue, TagsInputRootEmits, TagsInputRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TagsInputRoot, useForwardPropsEmits } from 'reka-ui';
+import { useI18n } from 'vue-i18n';
+import { cn } from '../../../lib/utils';
+import TagsInputInput from './TagsInputInput.vue';
+import TagsInputItem from './TagsInputItem.vue';
+
+// Props
+const props = defineProps<TagsInputRootProps<T> & {
+    placeholder?: string;
+    class?: HTMLAttributes['class'];
+    inputClass?: HTMLAttributes['class'];
+}>();
+
+// Emits
+const emits = defineEmits<TagsInputRootEmits<T>>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inputClass', 'placeholder');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const { t } = useI18n();
+const resolvedPlaceholder = computed(() => props.placeholder ?? t('uiVintage.tagsInput.placeholder'));
+
+// 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);
+};
+</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" />
+
+            <!-- Text input -->
+            <TagsInputInput :placeholder="resolvedPlaceholder" :class="props.inputClass" />
+        </slot>
+    </TagsInputRoot>
+</template>

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

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

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TagsInputItem, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import TagsInputItemDelete from './TagsInputItemDelete.vue';
+import TagsInputItemText from './TagsInputItemText.vue';
+
+// Props
+const props = defineProps<TagsInputItemProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+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 />
+
+            <!-- Delete button -->
+            <TagsInputItemDelete />
+        </slot>
+    </TagsInputItem>
+</template>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { TagsInputItemDelete, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<TagsInputItemDeleteProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+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>
+</template>

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

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

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

@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue';
+export { default as TagsInputItem } from './TagsInputItem.vue';
+export { default as TagsInputItemText } from './TagsInputItemText.vue';
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue';
+export { default as TagsInputInput } from './TagsInputInput.vue';

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

@@ -23,10 +23,9 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 
 <template>
     <textarea v-model="modelValue" data-slot="textarea" :class="cn(
-        'selection:bg-primary selection:text-primary-foreground flex field-sizing-content min-h-30 w-full min-w-0 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold text-(--text-primary-light) outline-none transition-all duration-300 ease-in-out placeholder:text-(--text-secondary-light) placeholder:opacity-60 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:placeholder: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',
+        '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/toggle-group/Toggle.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ToggleVariants } from '.';
+import { reactiveOmit } from '@vueuse/core';
+import { Toggle, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { toggleVariants } from '.';
+
+// Props
+const props = withDefaults(defineProps<ToggleProps & {
+    variant?: ToggleVariants['variant'];
+    size?: ToggleVariants['size'];
+    class?: HTMLAttributes['class'];
+}>(), {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+    modelValue: undefined,
+});
+
+// Emits
+const emits = defineEmits<ToggleEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'variant', 'size');
+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>
+</template>

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

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui';
+import type { CSSProperties, HTMLAttributes } from 'vue';
+import type { ToggleGroupSize } from '.';
+import { reactiveOmit, unrefElement, useMutationObserver, useResizeObserver } from '@vueuse/core';
+import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui';
+import { computed, nextTick, onMounted, provide, ref, shallowRef, toRef } from 'vue';
+import { cn } from '../../../lib/utils';
+import { toggleGroupContextKey } from '.';
+
+// Props
+const props = withDefaults(defineProps<ToggleGroupRootProps & {
+    size?: ToggleGroupSize;
+    highlight?: boolean;
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'default',
+    highlight: false,
+    disabled: false,
+    rovingFocus: true,
+    loop: true,
+});
+
+// Emits
+const emits = defineEmits<ToggleGroupRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'size', 'highlight');
+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);
+});
+
+// Share size and indicator mode with the items
+provide(toggleGroupContextKey, { size: toRef(props, 'size'), indicator: isSingle });
+
+// Sliding indicator geometry
+const rootRef = ref();
+const activeItem = shallowRef<HTMLElement | null>(null);
+const rect = ref({ x: 0, y: 0, width: 0, height: 0 });
+const visible = ref(false);
+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;
+}
+
+// Re-measure when selection changes or when the layout moves
+useMutationObserver(rootRef, measure, { subtree: true, attributes: true, attributeFilter: ['data-state'] });
+useResizeObserver(rootRef, measure);
+useResizeObserver(activeItem, measure);
+
+// First placement is instant, later moves slide
+onMounted(async () => {
+    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,
+}));
+</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 shadow-[0_0_0_3px_color-mix(in_oklab,var(--primary)_10%,transparent)]' : 'border-border-strong bg-surface shadow-elevated-sm'
+        )" />
+
+        <slot v-bind="slotProps" />
+    </ToggleGroupRoot>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ToggleGroupItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ToggleGroupSize } from '.';
+import { reactiveOmit } from '@vueuse/core';
+import { ToggleGroupItem, useForwardProps } from 'reka-ui';
+import { computed, inject } from 'vue';
+import { cn } from '../../../lib/utils';
+import { toggleGroupContextKey, toggleGroupItemVariants } from '.';
+
+// Props
+const props = defineProps<ToggleGroupItemProps & {
+    size?: ToggleGroupSize;
+    class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwardedProps = useForwardProps(delegatedProps);
+
+// Size and indicator mode come from the group
+const context = inject(toggleGroupContextKey, null);
+const size = computed(() => props.size ?? context?.size.value ?? 'default');
+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>
+</template>