@brumaombra/ui-vintage 0.7.13 → 0.8.1

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

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { HTMLAttributes, VNode } from 'vue';
+import type { AvatarShape, AvatarSize } from '.';
+import { Comment, Fragment, Text, useSlots } from 'vue';
+import { cn } from '../../../lib/utils';
+import { avatarShapeClasses, avatarSizeClasses, avatarTextClasses } from '.';
+
+// Props
+const props = withDefaults(defineProps<{
+    max?: number;
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    class?: HTMLAttributes['class'];
+}>(), {
+    size: 'md',
+    shape: 'circle',
+});
+
+const slots = useSlots();
+
+// Flatten slot vnodes (v-for fragments) and drop comments / whitespace text
+function flatten(nodes: VNode[]): VNode[] {
+    const result: VNode[] = [];
+    for (const node of nodes) {
+        if (node.type === Comment) continue;
+        if (node.type === Text && typeof node.children === 'string' && !node.children.trim()) continue;
+        if (node.type === Fragment && Array.isArray(node.children)) {
+            result.push(...flatten(node.children as VNode[]));
+            continue;
+        }
+        result.push(node);
+    }
+    return result;
+}
+
+// Children are read at render time so slot changes are always reflected
+function getChildren() {
+    return flatten(slots.default?.() ?? []);
+}
+
+// Whether a max limit applies
+function hasMax() {
+    return props.max !== undefined && props.max >= 0;
+}
+
+// Avatars that fit within max
+function getVisible() {
+    const children = getChildren();
+    return hasMax() ? children.slice(0, props.max) : children;
+}
+
+// Number of avatars hidden behind the +N bubble
+function getOverflow() {
+    return hasMax() ? Math.max(0, getChildren().length - (props.max ?? 0)) : 0;
+}
+
+// Renders a vnode as-is
+const VNodeRenderer = (renderProps: { node: VNode }) => renderProps.node;
+</script>
+
+<template>
+    <div data-slot="avatar-group" :class="cn(
+        'flex items-center -space-x-2 hover:-space-x-0.5',
+        '*:ring-2 *:ring-background *:transition-[margin,translate] *:duration-380 *:ease-spring *:hover:-translate-y-0.5',
+        props.class
+    )">
+        <!-- Visible avatars -->
+        <VNodeRenderer v-for="(node, index) in getVisible()" :key="node.key ?? index" :node="node" />
+
+        <!-- Overflow bubble -->
+        <span v-if="getOverflow() > 0" data-slot="avatar-group-overflow" :class="cn('relative inline-flex shrink-0 select-none items-center justify-center bg-surface font-bold text-muted-foreground', avatarSizeClasses[props.size], avatarShapeClasses[props.shape], avatarTextClasses[props.size])">
+            +{{ getOverflow() }}
+        </span>
+    </div>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AvatarImageEmits, AvatarImageProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AvatarImage, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<AvatarImageProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+// Emits
+const emits = defineEmits<AvatarImageEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <!-- Reka reveals the image only once loaded, which plays the zoom-in entrance -->
+    <AvatarImage data-slot="avatar-image" v-bind="forwarded" :class="cn('aspect-square size-full object-cover animate-[uv-float-in_420ms_var(--ease-out-expo)_both]', props.class)" />
+</template>

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

@@ -0,0 +1,47 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export { default as AvatarGroup } from './AvatarGroup.vue';
+export { default as AvatarImage } from './AvatarImage.vue';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShape = 'circle' | 'square';
+export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+
+// Box size per avatar size (24/32/40/48/64px)
+export const avatarSizeClasses: Record<AvatarSize, string> = {
+    xs: 'size-6',
+    sm: 'size-8',
+    md: 'size-10',
+    lg: 'size-12',
+    xl: 'size-16',
+};
+
+// Initials text size per avatar size
+export const avatarTextClasses: Record<AvatarSize, string> = {
+    xs: 'text-[10px]',
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+    xl: 'text-lg',
+};
+
+// Corner radius per avatar shape
+export const avatarShapeClasses: Record<AvatarShape, string> = {
+    circle: 'rounded-full',
+    square: 'rounded',
+};
+
+// Context shared by an avatar with its image and fallback
+export const avatarContextKey: InjectionKey<{ size: Ref<AvatarSize>; shape: Ref<AvatarShape> }> = Symbol('uv-avatar');
+
+// Compute up to 2 initials from a full name
+export function getInitials(name: string | null | undefined): string {
+    const words = (name ?? '').trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0) return '';
+
+    // Single word: first two characters, otherwise first letter of the first and last word
+    if (words.length === 1) return Array.from(words[0]!).slice(0, 2).join('').toUpperCase();
+    return (Array.from(words[0]!)[0]! + Array.from(words[words.length - 1]!)[0]!).toUpperCase();
+}

package/src/components/ui/badge/Badge.vue

@@ -10,15 +10,26 @@ const props = withDefaults(defineProps<{
     text: string;
     icon?: HugeiconsIconDefinition | null;
     color?: ToneColor;
+    dot?: boolean;
+    pulse?: boolean;
     class?: HTMLAttributes['class'];
 }>(), {
     icon: null,
-    color: 'gray'
+    color: 'gray',
+    dot: false,
+    pulse: false
 });
 </script>
 
 <template>
-    <span data-slot="badge" :class="cn('inline-flex w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded border px-2 py-0.5 text-xs font-semibold transition-colors duration-300 ease-in-out', getSurfaceToneClasses(props.color), props.class)">
+    <span data-slot="badge" :class="cn('inline-flex w-fit items-center justify-center gap-1.5 whitespace-nowrap rounded border px-2 py-0.5 text-xs font-semibold transition-colors duration-150', getSurfaceToneClasses(props.color), props.class)">
+        <!-- Status dot -->
+        <span v-if="props.dot || props.pulse" class="relative flex size-1.5 shrink-0">
+            <span v-if="props.pulse" class="absolute inset-0 animate-uv-ping-soft rounded-full bg-current" />
+            <span class="relative size-1.5 rounded-full bg-current" />
+        </span>
+
+        <!-- Icon -->
         <HugeiconsIcon v-if="props.icon" :icon="props.icon" class="size-3.5 shrink-0" :stroke-width="1.8" />
         {{ props.text }}
     </span>

package/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 // Props
 const props = defineProps<{
     class?: HTMLAttributes['class'];
 }>();
+
+const { t } = useI18n();
 </script>
 
 <template>
-    <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
+    <nav :aria-label="t('uiVintage.common.breadcrumb')" data-slot="breadcrumb" :class="props.class">
         <slot />
     </nav>
 </template>

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -2,19 +2,25 @@
 import type { HTMLAttributes } from 'vue';
 import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
+import { useI18n } from 'vue-i18n';
 import { cn } from '../../../lib/utils';
 
 // Props
 const props = defineProps<{
     class?: HTMLAttributes['class'];
 }>();
+
+const { t } = useI18n();
 </script>
 
 <template>
     <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" :class="cn('flex size-9 items-center justify-center', props.class)">
+        <!-- Default slot content -->
         <slot>
             <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" />
         </slot>
-        <span class="sr-only">More</span>
+
+        <!-- Screen reader text for accessibility -->
+        <span class="sr-only">{{ t('uiVintage.common.more') }}</span>
     </span>
 </template>

package/src/components/ui/busy/Busy.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue';
-import { Loading03Icon } from '@hugeicons/core-free-icons';
-import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed, type HTMLAttributes } from 'vue';
+import { getUiVintageRuntimeMessage } from '../../../lib/i18n';
 import { cn } from '../../../lib/utils';
+import { Spinner } from '../spinner';
 
 // Props
 const props = withDefaults(defineProps<{
@@ -11,27 +11,32 @@ const props = withDefaults(defineProps<{
     class?: HTMLAttributes['class'];
     overlayClass?: HTMLAttributes['class'];
 }>(), {
-    show: false,
-    label: 'Loading...'
+    show: false
 });
+
+const resolvedLabel = computed(() => props.label || getUiVintageRuntimeMessage('uiVintage.common.loading.title', 'Loading...'));
 </script>
 
 <template>
-    <Transition name="busy-fade">
+    <Transition name="uv-busy">
         <div v-if="props.show" data-slot="busy-overlay" :class="cn(
-            'fixed inset-0 z-50 flex items-center justify-center bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] duration-300 ease-out',
+            'fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-[3px] dark:bg-black/60',
             props.overlayClass,
-        )
-            ">
+        )">
             <div data-slot="busy-content" role="status" aria-live="polite" aria-busy="true" :class="cn(
-                'bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-2xl',
+                'uv-busy-card bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-elevated-xl',
                 props.class,
-            )
-                ">
+            )">
                 <slot>
-                    <HugeiconsIcon data-slot="busy-spinner" :icon="Loading03Icon" class="size-10 animate-spin text-primary" />
-                    <span v-if="props.label" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
-                        {{ props.label }}
+                    <!-- Spinner with a soft glow -->
+                    <div class="relative flex items-center justify-center">
+                        <span class="absolute size-14 rounded-full bg-primary/15 blur-md" />
+                        <Spinner data-slot="busy-spinner" size="xl" class="text-primary" />
+                    </div>
+
+                    <!-- Label -->
+                    <span v-if="resolvedLabel" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
+                        {{ resolvedLabel }}
                     </span>
                 </slot>
             </div>
@@ -40,13 +45,33 @@ const props = withDefaults(defineProps<{
 </template>
 
 <style scoped>
-.busy-fade-enter-active,
-.busy-fade-leave-active {
-    transition: opacity 0.3s ease-out;
+.uv-busy-enter-active {
+    transition: opacity 0.25s var(--ease-out-expo);
+}
+
+.uv-busy-leave-active {
+    transition: opacity 0.18s var(--ease-snappy);
 }
 
-.busy-fade-enter-from,
-.busy-fade-leave-to {
+.uv-busy-enter-from,
+.uv-busy-leave-to {
     opacity: 0;
 }
+
+.uv-busy-enter-active .uv-busy-card {
+    transition: transform 0.45s var(--ease-spring), filter 0.3s var(--ease-out-expo);
+}
+
+.uv-busy-leave-active .uv-busy-card {
+    transition: transform 0.18s var(--ease-snappy);
+}
+
+.uv-busy-enter-from .uv-busy-card {
+    transform: translateY(10px) scale(0.92);
+    filter: blur(4px);
+}
+
+.uv-busy-leave-to .uv-busy-card {
+    transform: scale(0.96);
+}
 </style>

package/src/components/ui/button/Button.vue

@@ -4,20 +4,37 @@ import type { HTMLAttributes } from 'vue';
 import type { ButtonVariants } from '.';
 import { Primitive } from 'reka-ui';
 import { cn } from '../../../lib/utils';
+import { Spinner } from '../spinner';
 import { buttonVariants } from '.';
 
 // Props
 const props = withDefaults(defineProps<PrimitiveProps & {
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
+    loading?: boolean;
     class?: HTMLAttributes['class'];
 }>(), {
-    as: 'button'
+    as: 'button',
+    loading: false
 });
 </script>
 
 <template>
-    <Primitive data-slot="button" :data-variant="variant" :data-size="size" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
-        <slot />
+    <Primitive data-slot="button" :data-variant="variant" :data-size="size" :data-loading="props.loading ? '' : undefined" :aria-busy="props.loading || undefined" :disabled="props.loading || undefined" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+        <!-- As-child buttons delegate rendering to the slotted element -->
+        <slot v-if="asChild" />
+
+        <template v-else>
+            <!-- Content (kept in the layout while loading so the width never jumps) -->
+            <span v-if="props.loading" class="invisible contents">
+                <slot />
+            </span>
+            <slot v-else />
+
+            <!-- Loading indicator -->
+            <span v-if="props.loading" class="absolute inset-0 flex items-center justify-center">
+                <Spinner size="sm" />
+            </span>
+        </template>
     </Primitive>
 </template>

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

@@ -28,12 +28,22 @@ export type ButtonVariants = {
     | undefined;
 };
 
+// Sheen sweep that crosses solid buttons on hover
+const sheenClasses = "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:-translate-x-full before:bg-[linear-gradient(105deg,transparent_35%,rgb(255_255_255/0.38)_50%,transparent_65%)] before:transition-transform before:duration-700 before:ease-out-expo hover:before:translate-x-full";
+
 export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cva(
-    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-xs font-semibold transition-all duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 enabled:active:scale-[0.98] sm:text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    [
+        "relative isolate inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 overflow-hidden whitespace-nowrap rounded text-xs font-semibold outline-none sm:text-sm",
+        "[transition:color_150ms,background-color_150ms,border-color_150ms,box-shadow_220ms,opacity_150ms,scale_380ms_var(--ease-spring)]",
+        "enabled:active:scale-[0.97] enabled:active:duration-75 disabled:pointer-events-none disabled:opacity-50 data-loading:cursor-wait data-loading:disabled:opacity-100",
+        "focus-visible:ring-[3px] focus-visible:ring-ring/45",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    ],
     {
         variants: {
             variant: {
-                primary: getButtonVariantClasses('primary'),
+                primary: `${getButtonVariantClasses('primary')} ${sheenClasses}`,
                 secondary: getButtonVariantClasses('secondary'),
                 ghost: getButtonVariantClasses('ghost'),
                 link: getButtonVariantClasses('link'),

package/src/components/ui/card/Card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import type { HTMLAttributes } from 'vue';
 import {
     getSurfaceToneClasses,
@@ -10,30 +10,43 @@ import { cn } from '../../../lib/utils';
 type CardColor = 'default' | ToneColor;
 
 // Props
-const props = defineProps<{
+const props = withDefaults(defineProps<{
     color?: CardColor;
+    interactive?: boolean;
     class?: HTMLAttributes['class'];
-}>();
+}>(), {
+    interactive: false
+});
+
+const cardRef = ref<HTMLElement | null>(null);
 
 // Get the appropriate classes
 const colorClasses = computed(() => {
     // If color is not specified or is "default", use the default card styles
     if (!props.color || props.color === 'default') {
-        return 'border border-border bg-card text-card-foreground';
+        return 'border border-border bg-card text-card-foreground shadow-elevated-sm';
     }
 
     // For other colors, use the corresponding surface tone classes
     return getSurfaceToneClasses(props.color);
 });
+
+// Track the pointer so interactive cards can render a spotlight under the cursor
+const handlePointerMove = (event: PointerEvent) => {
+    if (!props.interactive || !cardRef.value) return;
+    const rect = cardRef.value.getBoundingClientRect();
+    cardRef.value.style.setProperty('--uv-spot-x', `${event.clientX - rect.left}px`);
+    cardRef.value.style.setProperty('--uv-spot-y', `${event.clientY - rect.top}px`);
+};
 </script>
 
 <template>
-    <div data-slot="card" :class="cn(
-        'flex flex-col gap-4 sm:gap-6! rounded py-6 transition-colors duration-300 ease-in-out',
+    <div ref="cardRef" data-slot="card" :data-interactive="props.interactive ? '' : undefined" :class="cn(
+        'relative flex flex-col gap-4 sm:gap-6! rounded py-6 transition-[border-color,box-shadow,background-color,translate] duration-300 ease-out-expo',
         colorClasses,
+        props.interactive && 'cursor-pointer hover:-translate-y-0.5 hover:border-border-strong hover:shadow-elevated-lg active:translate-y-0 active:duration-100 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:opacity-0 before:transition-opacity before:duration-300 before:bg-[radial-gradient(360px_circle_at_var(--uv-spot-x,50%)_var(--uv-spot-y,50%),color-mix(in_oklab,var(--primary)_9%,transparent),transparent_70%)] hover:before:opacity-100',
         props.class,
-    )
-        ">
+    )" @pointermove="handlePointerMove">
         <slot />
     </div>
 </template>

package/src/components/ui/card/CardText.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
 
 <template>
     <p data-slot="card-text" :class="cn(
-        'text-xs sm:text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark)',
+        'text-xs sm:text-sm text-muted-foreground',
         props.class,
     )
         ">

package/src/components/ui/checkbox/Checkbox.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<CheckboxRootProps & {
+    class?: HTMLAttributes['class'];
+}>();
+
+// Emits
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <CheckboxRoot v-slot="slotProps" data-slot="checkbox" v-bind="forwarded" :class="cn(
+        'group/checkbox peer relative inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-input bg-secondary text-primary-foreground shadow-elevated-sm outline-none',
+        '[transition:scale_320ms_var(--ease-spring),background-color_150ms_var(--ease-snappy),border-color_150ms_var(--ease-snappy),box-shadow_150ms_var(--ease-snappy)]',
+        'hover:border-border-strong active:scale-[0.86] focus-visible:ring-[3px] focus-visible:ring-ring/45',
+        'data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary',
+        'disabled:cursor-not-allowed disabled:opacity-60 disabled:active:scale-100 aria-invalid:border-destructive',
+        props.class
+    )">
+        <!-- Indicator (always mounted so the mark can draw in and out) -->
+        <CheckboxIndicator force-mount data-slot="checkbox-indicator" class="pointer-events-none flex size-full items-center justify-center">
+            <slot v-bind="slotProps">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" class="size-3.5" aria-hidden="true">
+                    <!-- Check mark: draws itself via stroke-dashoffset -->
+                    <path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1" :class="cn(
+                        'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
+                        'group-data-[state=checked]/checkbox:opacity-100 group-data-[state=checked]/checkbox:[stroke-dashoffset:0] group-data-[state=checked]/checkbox:[transition:stroke-dashoffset_380ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
+                    )" />
+
+                    <!-- Indeterminate dash: sweeps in from the left -->
+                    <path d="M6.5 12h11" pathLength="1" :class="cn(
+                        'opacity-0 [stroke-dasharray:1_2] [stroke-dashoffset:1] [transition:stroke-dashoffset_120ms_var(--ease-snappy),opacity_90ms_var(--ease-snappy)_30ms]',
+                        'group-data-[state=indeterminate]/checkbox:opacity-100 group-data-[state=indeterminate]/checkbox:[stroke-dashoffset:0] group-data-[state=indeterminate]/checkbox:[transition:stroke-dashoffset_320ms_var(--ease-out-expo)_40ms,opacity_60ms_linear_40ms]'
+                    )" />
+                </svg>
+            </slot>
+        </CheckboxIndicator>
+    </CheckboxRoot>
+</template>

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

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

package/src/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<CollapsibleRootProps & { class?: HTMLAttributes['class'] }>();
+
+// Emits
+const emits = defineEmits<CollapsibleRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded" :class="cn(props.class)">
+        <slot v-bind="slotProps" />
+    </CollapsibleRoot>
+</template>

package/src/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { CollapsibleContentEmits, CollapsibleContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CollapsibleContent, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<CollapsibleContentProps & { class?: HTMLAttributes['class'] }>();
+
+// Emits
+const emits = defineEmits<CollapsibleContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <CollapsibleContent data-slot="collapsible-content" v-bind="forwarded" :class="cn('uv-collapsible-motion', props.class)">
+        <slot />
+    </CollapsibleContent>
+</template>

package/src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CollapsibleTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CollapsibleTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = defineProps<CollapsibleTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="forwardedProps" :class="cn(props.class)">
+        <slot />
+    </CollapsibleTrigger>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue';
+export { default as CollapsibleContent } from './CollapsibleContent.vue';
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue';

package/src/components/ui/combobox/Combobox.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+    openOnClick: true
+});
+
+// Emits
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <ComboboxRoot v-slot="slotProps" data-slot="combobox" v-bind="forwarded" :class="cn('relative', props.class)">
+        <slot v-bind="slotProps" />
+    </ComboboxRoot>
+</template>

package/src/components/ui/combobox/ComboboxAnchor.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ComboboxAnchor, injectComboboxRootContext, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+
+// Props
+const props = withDefaults(defineProps<ComboboxAnchorProps & {
+    class?: HTMLAttributes['class'];
+    size?: 'sm' | 'default';
+}>(), { size: 'default' });
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwardedProps = useForwardProps(delegatedProps);
+
+const rootContext = injectComboboxRootContext();
+
+// Clicking the empty area of the field focuses the search input and opens the list
+const handleClick = (event: MouseEvent) => {
+    if (rootContext.disabled.value) return;
+    const target = event.target as HTMLElement | null;
+    if (target?.closest('button, input, a')) return;
+    rootContext.inputElement.value?.focus();
+    if (!rootContext.open.value) rootContext.onOpenChange(true);
+};
+</script>
+
+<template>
+    <ComboboxAnchor data-slot="combobox-anchor" :data-size="props.size" :data-state="rootContext.open.value ? 'open' : 'closed'" :data-disabled="rootContext.disabled.value ? '' : undefined" v-bind="forwardedProps" :class="cn(
+        'group/combobox-anchor uv-field flex w-full cursor-text items-center gap-2 rounded border border-input bg-secondary px-4 py-1.5 text-xs font-semibold text-foreground shadow-elevated-sm sm:text-sm',
+        'data-[size=default]:min-h-13 data-[size=sm]:min-h-10 data-disabled:cursor-not-allowed data-disabled:opacity-60',
+        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 [&_svg:not([class*=\'text-\'])]:text-muted-foreground',
+        props.class
+    )
+        " @click="handleClick">
+        <slot />
+    </ComboboxAnchor>
+</template>