@brumaombra/ui-vintage 0.9.1 → 0.9.3

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

@@ -6,18 +6,18 @@ import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits
 import { cn } from '../../../lib/utils';
 
 defineOptions({
-    inheritAttrs: false
+	inheritAttrs: false
 });
 
 // Props
 const props = withDefaults(defineProps<ComboboxContentProps & {
-    class?: HTMLAttributes['class'];
-    viewportClass?: HTMLAttributes['class'];
+	class?: HTMLAttributes['class'];
+	viewportClass?: HTMLAttributes['class'];
 }>(), {
-    position: 'popper',
-    align: 'start',
-    sideOffset: 6,
-    collisionPadding: 8
+	position: 'popper',
+	align: 'start',
+	sideOffset: 6,
+	collisionPadding: 8
 });
 
 // Emits
@@ -28,16 +28,16 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <ComboboxPortal>
-        <ComboboxContent data-slot="combobox-list" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-            'uv-floating-motion bg-popover text-popover-foreground z-50 flex w-(--reka-combobox-trigger-width) max-h-[min(var(--reka-combobox-content-available-height),20rem)] flex-col overflow-hidden rounded border border-border shadow-elevated-lg outline-hidden',
-            props.class
-        )
-            ">
-            <!-- Scrollable viewport -->
-            <ComboboxViewport data-slot="combobox-viewport" :class="cn('min-h-0 scroll-py-1 p-1', props.viewportClass)">
-                <slot />
-            </ComboboxViewport>
-        </ComboboxContent>
-    </ComboboxPortal>
+	<ComboboxPortal>
+		<ComboboxContent data-slot="combobox-list" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
+			'uv-floating-motion bg-popover text-popover-foreground z-50 flex w-(--reka-combobox-trigger-width) max-h-[min(var(--reka-combobox-content-available-height),20rem)] flex-col overflow-hidden rounded border border-border shadow-elevated-lg outline-hidden',
+			props.class
+		)
+			">
+			<!-- Scrollable viewport -->
+			<ComboboxViewport data-slot="combobox-viewport" :class="cn('min-h-0 scroll-py-1 p-1', props.viewportClass)">
+				<slot />
+			</ComboboxViewport>
+		</ComboboxContent>
+	</ComboboxPortal>
 </template>

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

@@ -19,26 +19,26 @@ import type { ComboboxSelectModelValue, ComboboxSelectOption, ComboboxSelectValu
 
 // Props
 const props = withDefaults(defineProps<{
-    modelValue?: ComboboxSelectModelValue;
-    options: ComboboxSelectOption[];
-    placeholder?: string;
-    searchPlaceholder?: string;
-    emptyText?: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    size?: 'sm' | 'default';
-    class?: HTMLAttributes['class'];
-    contentClass?: HTMLAttributes['class'];
+	modelValue?: ComboboxSelectModelValue;
+	options: ComboboxSelectOption[];
+	placeholder?: string;
+	searchPlaceholder?: string;
+	emptyText?: string;
+	multiple?: boolean;
+	disabled?: boolean;
+	size?: 'sm' | 'default';
+	class?: HTMLAttributes['class'];
+	contentClass?: HTMLAttributes['class'];
 }>(), {
-    modelValue: undefined,
-    multiple: false,
-    disabled: false,
-    size: 'default'
+	modelValue: undefined,
+	multiple: false,
+	disabled: false,
+	size: 'default'
 });
 
 // Emits
 const emits = defineEmits<{
-    'update:modelValue': [value: ComboboxSelectModelValue];
+	'update:modelValue': [value: ComboboxSelectModelValue];
 }>();
 
 const { t } = useI18n();
@@ -56,39 +56,39 @@ const emptyLabel = computed(() => props.emptyText ?? t('uiVintage.combobox.empty
 
 // Normalized selection
 const selectedValues = computed<ComboboxSelectValue[]>(() => {
-    if (Array.isArray(props.modelValue)) return props.modelValue;
-    return props.modelValue == null ? [] : [props.modelValue];
+	if (Array.isArray(props.modelValue)) return props.modelValue;
+	return props.modelValue == null ? [] : [props.modelValue];
 });
 
 // Lookup options by value
 const optionMap = computed(() => new Map(props.options.map(option => [option.value, option])));
 
 const selectedOptions = computed(() => selectedValues.value
-    .map(value => optionMap.value.get(value))
-    .filter((option): option is ComboboxSelectOption => !!option));
+	.map(value => optionMap.value.get(value))
+	.filter((option): option is ComboboxSelectOption => !!option));
 
 const selectedOption = computed(() => (props.multiple ? undefined : selectedOptions.value[0]));
 
 // Value handed to reka (array in multiple mode)
 const rootValue = computed<AcceptableValue | AcceptableValue[] | undefined>(() => {
-    if (props.multiple) return selectedValues.value;
-    return selectedValues.value[0];
+	if (props.multiple) return selectedValues.value;
+	return selectedValues.value[0];
 });
 
 // Label shown inside the input for single selection
 const displayValue = (value: unknown) => {
-    if (props.multiple || value == null || Array.isArray(value)) return '';
-    return optionMap.value.get(value as ComboboxSelectValue)?.label ?? '';
+	if (props.multiple || value == null || Array.isArray(value)) return '';
+	return optionMap.value.get(value as ComboboxSelectValue)?.label ?? '';
 };
 
 // Placeholder switches to a search prompt (or the current label) while open
 const inputPlaceholder = computed(() => {
-    if (props.multiple) {
-        if (open.value || selectedOptions.value.length) return searchPlaceholderText.value;
-        return placeholderText.value;
-    }
-    if (open.value) return selectedOption.value?.label ?? searchPlaceholderText.value;
-    return placeholderText.value;
+	if (props.multiple) {
+		if (open.value || selectedOptions.value.length) return searchPlaceholderText.value;
+		return placeholderText.value;
+	}
+	if (open.value) return selectedOption.value?.label ?? searchPlaceholderText.value;
+	return placeholderText.value;
 });
 
 // Leading icon mirrors the selected option icon when closed
@@ -96,68 +96,68 @@ const showsOptionIcon = computed(() => !open.value && !!selectedOption.value?.ic
 const leadingIcon = computed(() => (showsOptionIcon.value && selectedOption.value?.icon) || Search01Icon);
 
 const handleUpdate = (value: unknown) => {
-    if (props.multiple) {
-        emits('update:modelValue', Array.isArray(value) ? [...value] as ComboboxSelectValue[] : []);
-        return;
-    }
-    emits('update:modelValue', (value ?? null) as ComboboxSelectModelValue);
+	if (props.multiple) {
+		emits('update:modelValue', Array.isArray(value) ? [...value] as ComboboxSelectValue[] : []);
+		return;
+	}
+	emits('update:modelValue', (value ?? null) as ComboboxSelectModelValue);
 };
 
 // Clear the text on open so the whole list is visible (single mode keeps the label as placeholder)
 const handleOpenChange = (value: boolean) => {
-    open.value = value;
-    interacted.value = true;
-    if (value) searchTerm.value = '';
+	open.value = value;
+	interacted.value = true;
+	if (value) searchTerm.value = '';
 };
 
 // Remove a tag in multiple mode
 const removeValue = (value: ComboboxSelectValue) => {
-    if (props.disabled) return;
-    emits('update:modelValue', selectedValues.value.filter(item => item !== value));
+	if (props.disabled) return;
+	emits('update:modelValue', selectedValues.value.filter(item => item !== value));
 };
 
 // Backspace on an empty input removes the last tag
 const handleKeydown = (event: KeyboardEvent) => {
-    if (!props.multiple || event.key !== 'Backspace' || searchTerm.value) return;
-    const last = selectedValues.value[selectedValues.value.length - 1];
-    if (last !== undefined) removeValue(last);
+	if (!props.multiple || event.key !== 'Backspace' || searchTerm.value) return;
+	const last = selectedValues.value[selectedValues.value.length - 1];
+	if (last !== undefined) removeValue(last);
 };
 </script>
 
 <template>
-    <Combobox :model-value="rootValue" :multiple="props.multiple" :disabled="props.disabled" :open="open" data-slot="combobox-select" :class="cn('w-full', props.class)" @update:model-value="handleUpdate" @update:open="handleOpenChange">
-        <!-- Field -->
-        <ComboboxAnchor :size="props.size" :class="props.multiple && selectedOptions.length ? 'py-2' : undefined">
-            <!-- Leading icon -->
-            <HugeiconsIcon :key="showsOptionIcon ? `option-${selectedOption?.value}` : 'search'" :icon="leadingIcon" :class="cn('size-4', interacted && 'animate-uv-pop')" />
-
-            <div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
-                <!-- Selected tags (multiple mode) -->
-                <TransitionGroup v-if="props.multiple" leave-active-class="transition-[opacity,scale] duration-150 ease-snappy" leave-to-class="scale-75 opacity-0">
-                    <span v-for="option in selectedOptions" :key="option.value" data-slot="combobox-select-tag" class="inline-flex h-7 max-w-full animate-uv-pop items-center gap-1 rounded-sm border border-border bg-surface pr-1 pl-2 text-[11px] font-semibold text-foreground sm:text-xs">
-                        <HugeiconsIcon v-if="option.icon" :icon="option.icon" class="size-3" />
-                        <span class="truncate">{{ option.label }}</span>
-                        <button type="button" :disabled="props.disabled" :aria-label="`${t('uiVintage.buttons.remove')} ${option.label}`" class="flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-[color,background-color,scale] duration-150 ease-spring hover:bg-accent hover:text-destructive focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-90 disabled:pointer-events-none" @click.stop="removeValue(option.value)">
-                            <HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
-                        </button>
-                    </span>
-                </TransitionGroup>
-
-                <!-- Search input -->
-                <ComboboxInput v-model="searchTerm" :display-value="displayValue" :placeholder="inputPlaceholder" :disabled="props.disabled" @keydown="handleKeydown" />
-            </div>
-
-            <!-- Chevron trigger -->
-            <ComboboxTrigger />
-        </ComboboxAnchor>
-
-        <!-- Options list -->
-        <ComboboxList :class="props.contentClass">
-            <ComboboxEmpty>{{ emptyLabel }}</ComboboxEmpty>
-
-            <ComboboxItem v-for="option in props.options" :key="option.value" :value="option.value" :text-value="option.label" :disabled="option.disabled">
-                <SelectItemContent :icon="option.icon" :label="option.label" :description="option.description" />
-            </ComboboxItem>
-        </ComboboxList>
-    </Combobox>
+	<Combobox :model-value="rootValue" :multiple="props.multiple" :disabled="props.disabled" :open="open" data-slot="combobox-select" :class="cn('w-full', props.class)" @update:model-value="handleUpdate" @update:open="handleOpenChange">
+		<!-- Field -->
+		<ComboboxAnchor :size="props.size" :class="props.multiple && selectedOptions.length ? 'py-2' : undefined">
+			<!-- Leading icon -->
+			<HugeiconsIcon :key="showsOptionIcon ? `option-${selectedOption?.value}` : 'search'" :icon="leadingIcon" :class="cn('size-4', interacted && 'animate-uv-pop')" />
+
+			<div class="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
+				<!-- Selected tags (multiple mode) -->
+				<TransitionGroup v-if="props.multiple" leave-active-class="transition-[opacity,scale] duration-150 ease-snappy" leave-to-class="scale-75 opacity-0">
+					<span v-for="option in selectedOptions" :key="option.value" data-slot="combobox-select-tag" class="inline-flex h-7 max-w-full animate-uv-pop items-center gap-1 rounded-sm border border-border bg-surface pr-1 pl-2 text-[11px] font-semibold text-foreground sm:text-xs">
+						<HugeiconsIcon v-if="option.icon" :icon="option.icon" class="size-3" />
+						<span class="truncate">{{ option.label }}</span>
+						<button type="button" :disabled="props.disabled" :aria-label="`${t('uiVintage.buttons.remove')} ${option.label}`" class="flex size-5 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-[color,background-color,scale] duration-150 ease-spring hover:bg-accent hover:text-destructive focus-visible:ring-[3px] focus-visible:ring-ring/45 active:scale-90 disabled:pointer-events-none" @click.stop="removeValue(option.value)">
+							<HugeiconsIcon :icon="Cancel01Icon" class="size-3" />
+						</button>
+					</span>
+				</TransitionGroup>
+
+				<!-- Search input -->
+				<ComboboxInput v-model="searchTerm" :display-value="displayValue" :placeholder="inputPlaceholder" :disabled="props.disabled" @keydown="handleKeydown" />
+			</div>
+
+			<!-- Chevron trigger -->
+			<ComboboxTrigger />
+		</ComboboxAnchor>
+
+		<!-- Options list -->
+		<ComboboxList :class="props.contentClass">
+			<ComboboxEmpty>{{ emptyLabel }}</ComboboxEmpty>
+
+			<ComboboxItem v-for="option in props.options" :key="option.value" :value="option.value" :text-value="option.label" :disabled="option.disabled">
+				<SelectItemContent :icon="option.icon" :label="option.label" :description="option.description" />
+			</ComboboxItem>
+		</ComboboxList>
+	</Combobox>
 </template>

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

@@ -12,5 +12,5 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-    <ComboboxSeparator data-slot="combobox-separator" v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
+	<ComboboxSeparator data-slot="combobox-separator" v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-border', props.class)" />
 </template>

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

@@ -15,14 +15,14 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-    <ComboboxTrigger data-slot="combobox-trigger" v-bind="forwardedProps" :class="cn(
-        'group/combobox-trigger -mr-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60',
-        props.class
-    )
-        ">
-        <slot>
-            <!-- Chevron rotates with a spring while open -->
-            <HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-current transition-transform duration-300 ease-spring group-data-[state=open]/combobox-trigger:rotate-180" />
-        </slot>
-    </ComboboxTrigger>
+	<ComboboxTrigger data-slot="combobox-trigger" v-bind="forwardedProps" :class="cn(
+		'group/combobox-trigger -mr-1 flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none transition-colors duration-150 hover:bg-accent hover:text-foreground disabled:cursor-not-allowed disabled:opacity-60',
+		props.class
+	)
+		">
+		<slot>
+			<!-- Chevron rotates with a spring while open -->
+			<HugeiconsIcon :icon="ArrowDown01Icon" class="size-4 text-current transition-transform duration-300 ease-spring group-data-[state=open]/combobox-trigger:rotate-180" />
+		</slot>
+	</ComboboxTrigger>
 </template>

package/src/components/ui/combobox/types.ts

@@ -5,11 +5,11 @@ export type ComboboxSelectValue = string | number;
 
 // Option rendered by ComboboxSelect
 export interface ComboboxSelectOption {
-    value: ComboboxSelectValue;
-    label: string;
-    description?: string;
-    icon?: HugeiconsIconDefinition;
-    disabled?: boolean;
+	value: ComboboxSelectValue;
+	label: string;
+	description?: string;
+	icon?: HugeiconsIconDefinition;
+	disabled?: boolean;
 }
 
 // v-model shape of ComboboxSelect (array when `multiple`)

package/src/components/ui/command/Command.vue

@@ -9,7 +9,7 @@ import { provideCommandContext } from '.';
 
 // Props
 const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
-    modelValue: ''
+	modelValue: ''
 });
 
 // Emits
@@ -26,68 +26,68 @@ const allGroups = ref<Map<string, Set<string>>>(new Map());
 
 const { contains } = useFilter({ sensitivity: 'base' });
 const filterState = reactive({
-    search: '',
-    filtered: {
-        /** The count of all visible items. */
-        count: 0,
-        /** Map from visible item id to its search score. */
-        items: new Map() as Map<string, number>,
-        /** Set of groups with at least one visible item. */
-        groups: new Set() as Set<string>,
-    },
+	search: '',
+	filtered: {
+		/** The count of all visible items. */
+		count: 0,
+		/** Map from visible item id to its search score. */
+		items: new Map() as Map<string, number>,
+		/** Set of groups with at least one visible item. */
+		groups: new Set() as Set<string>,
+	},
 });
 
 function filterItems() {
-    if (!filterState.search) {
-        filterState.filtered.count = allItems.value.size;
-        // Do nothing, each item will know to show itself because search is empty
-        return;
-    }
+	if (!filterState.search) {
+		filterState.filtered.count = allItems.value.size;
+		// Do nothing, each item will know to show itself because search is empty
+		return;
+	}
 
-    // Reset the groups
-    filterState.filtered.groups = new Set();
-    let itemCount = 0;
+	// Reset the groups
+	filterState.filtered.groups = new Set();
+	let itemCount = 0;
 
-    // Check which items should be included
-    for (const [id, value] of allItems.value) {
-        const score = contains(value, filterState.search);
-        filterState.filtered.items.set(id, score ? 1 : 0);
-        if (score) itemCount++;
-    }
+	// Check which items should be included
+	for (const [id, value] of allItems.value) {
+		const score = contains(value, filterState.search);
+		filterState.filtered.items.set(id, score ? 1 : 0);
+		if (score) itemCount++;
+	}
 
-    // Check which groups have at least 1 item shown
-    for (const [groupId, group] of allGroups.value) {
-        for (const itemId of group) {
-            if (filterState.filtered.items.get(itemId)! > 0) {
-                filterState.filtered.groups.add(groupId);
-                break;
-            }
-        }
-    }
+	// Check which groups have at least 1 item shown
+	for (const [groupId, group] of allGroups.value) {
+		for (const itemId of group) {
+			if (filterState.filtered.items.get(itemId)! > 0) {
+				filterState.filtered.groups.add(groupId);
+				break;
+			}
+		}
+	}
 
-    filterState.filtered.count = itemCount;
+	filterState.filtered.count = itemCount;
 }
 
 watch(
-    () => filterState.search,
-    () => {
-        filterItems();
-    },
+	() => filterState.search,
+	() => {
+		filterItems();
+	},
 );
 
 provideCommandContext({
-    allItems,
-    allGroups,
-    filterState,
+	allItems,
+	allGroups,
+	filterState,
 });
 </script>
 
 <template>
-    <ListboxRoot data-slot="command" v-bind="forwarded" :class="cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded transition-colors duration-300 ease-in-out',
-        props.class,
-    )
-        ">
-        <slot />
-    </ListboxRoot>
+	<ListboxRoot data-slot="command" v-bind="forwarded" :class="cn(
+		'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded transition-colors duration-300 ease-in-out',
+		props.class,
+	)
+		">
+		<slot />
+	</ListboxRoot>
 </template>

package/src/components/ui/command/CommandDialog.vue

@@ -11,9 +11,9 @@ import Command from './Command.vue';
 
 // Props
 const props = defineProps<DialogRootProps & {
-    title?: string;
-    description?: string;
-    contentClass?: HTMLAttributes['class'];
+	title?: string;
+	description?: string;
+	contentClass?: HTMLAttributes['class'];
 }>();
 
 const { t } = useI18n();
@@ -29,15 +29,15 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-    <Dialog v-slot="slotProps" v-bind="forwarded">
-        <DialogContent :class="cn('top-[12vh] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl', props.contentClass)">
-            <DialogHeader class="sr-only">
-                <DialogTitle>{{ resolvedTitle }}</DialogTitle>
-                <DialogDescription>{{ resolvedDescription }}</DialogDescription>
-            </DialogHeader>
-            <Command>
-                <slot v-bind="slotProps" />
-            </Command>
-        </DialogContent>
-    </Dialog>
+	<Dialog v-slot="slotProps" v-bind="forwarded">
+		<DialogContent :class="cn('top-[12vh] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl', props.contentClass)">
+			<DialogHeader class="sr-only">
+				<DialogTitle>{{ resolvedTitle }}</DialogTitle>
+				<DialogDescription>{{ resolvedDescription }}</DialogDescription>
+			</DialogHeader>
+			<Command>
+				<slot v-bind="slotProps" />
+			</Command>
+		</DialogContent>
+	</Dialog>
 </template>

package/src/components/ui/command/CommandEmpty.vue

@@ -15,12 +15,12 @@ const delegatedProps = reactiveOmit(props, 'class');
 
 const { filterState } = useCommand();
 const isRender = computed(
-    () => !!filterState.search && filterState.filtered.count === 0,
+	() => !!filterState.search && filterState.filtered.count === 0,
 );
 </script>
 
 <template>
-    <Primitive v-if="isRender" data-slot="command-empty" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
-        <slot />
-    </Primitive>
+	<Primitive v-if="isRender" data-slot="command-empty" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+		<slot />
+	</Primitive>
 </template>

package/src/components/ui/command/CommandGroup.vue

@@ -9,9 +9,9 @@ import { provideCommandGroupContext, useCommand } from '.';
 
 // Props
 const props = defineProps<ListboxGroupProps & {
-    class?: HTMLAttributes['class'];
-    heading?: string;
-    stagger?: boolean;
+	class?: HTMLAttributes['class'];
+	heading?: string;
+	stagger?: boolean;
 }>();
 
 // Omit local props from delegated props
@@ -19,40 +19,40 @@ const delegatedProps = reactiveOmit(props, 'class', 'stagger');
 
 // Items float in one after another when the group mounts (same timing as the dropdown menu)
 const staggerClass = [
-    '[&>*]:animate-[uv-float-in_240ms_var(--ease-out-expo)_both] [&>*]:[--uv-float-offset:-3px]',
-    '[&>*:nth-child(2)]:[animation-delay:16ms]',
-    '[&>*:nth-child(3)]:[animation-delay:32ms]',
-    '[&>*:nth-child(4)]:[animation-delay:48ms]',
-    '[&>*:nth-child(5)]:[animation-delay:64ms]',
-    '[&>*:nth-child(6)]:[animation-delay:80ms]',
-    '[&>*:nth-child(7)]:[animation-delay:96ms]',
-    '[&>*:nth-child(8)]:[animation-delay:112ms]',
-    '[&>*:nth-child(n+9)]:[animation-delay:128ms]'
+	'[&>*]:animate-[uv-float-in_240ms_var(--ease-out-expo)_both] [&>*]:[--uv-float-offset:-3px]',
+	'[&>*:nth-child(2)]:[animation-delay:16ms]',
+	'[&>*:nth-child(3)]:[animation-delay:32ms]',
+	'[&>*:nth-child(4)]:[animation-delay:48ms]',
+	'[&>*:nth-child(5)]:[animation-delay:64ms]',
+	'[&>*:nth-child(6)]:[animation-delay:80ms]',
+	'[&>*:nth-child(7)]:[animation-delay:96ms]',
+	'[&>*:nth-child(8)]:[animation-delay:112ms]',
+	'[&>*:nth-child(n+9)]:[animation-delay:128ms]'
 ].join(' ');
 
 const { allGroups, filterState } = useCommand();
 const id = useId();
 
 const isRender = computed(() =>
-    !filterState.search ? true : filterState.filtered.groups.has(id),
+	!filterState.search ? true : filterState.filtered.groups.has(id),
 );
 
 provideCommandGroupContext({ id });
 onMounted(() => {
-    if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
+	if (!allGroups.value.has(id)) allGroups.value.set(id, new Set());
 });
 onUnmounted(() => {
-    allGroups.value.delete(id);
+	allGroups.value.delete(id);
 });
 </script>
 
 <template>
-    <ListboxGroup v-bind="delegatedProps" :id="id" data-slot="command-group" :class="cn('text-foreground overflow-hidden', props.class)" :hidden="isRender ? undefined : true">
-        <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="border-b border-border px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
-            {{ heading }}
-        </ListboxGroupLabel>
-        <div :class="cn('p-2', props.stagger && staggerClass)">
-            <slot />
-        </div>
-    </ListboxGroup>
+	<ListboxGroup v-bind="delegatedProps" :id="id" data-slot="command-group" :class="cn('text-foreground overflow-hidden', props.class)" :hidden="isRender ? undefined : true">
+		<ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="border-b border-border px-3 py-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+			{{ heading }}
+		</ListboxGroupLabel>
+		<div :class="cn('p-2', props.stagger && staggerClass)">
+			<slot />
+		</div>
+	</ListboxGroup>
 </template>

package/src/components/ui/command/CommandInput.vue

@@ -9,7 +9,7 @@ import { cn } from '../../../lib/utils';
 import { useCommand } from '.';
 
 defineOptions({
-    inheritAttrs: false,
+	inheritAttrs: false,
 });
 
 // Props
@@ -24,12 +24,12 @@ const { filterState } = useCommand();
 </script>
 
 <template>
-    <div data-slot="command-input-wrapper" class="flex h-12 items-center gap-3 border-b border-border px-4">
-        <HugeiconsIcon :icon="Search01Icon" class="size-4 shrink-0 text-muted-foreground" />
-        <ListboxFilter v-bind="{ ...forwardedProps, ...$attrs }" v-model="filterState.search" data-slot="command-input" auto-focus :class="cn(
-            'placeholder:text-muted-foreground flex h-10 w-full rounded bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-            props.class,
-        )
-            " />
-    </div>
+	<div data-slot="command-input-wrapper" class="flex h-12 items-center gap-3 border-b border-border px-4">
+		<HugeiconsIcon :icon="Search01Icon" class="size-4 shrink-0 text-muted-foreground" />
+		<ListboxFilter v-bind="{ ...forwardedProps, ...$attrs }" v-model="filterState.search" data-slot="command-input" auto-focus :class="cn(
+			'placeholder:text-muted-foreground flex h-10 w-full rounded bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+			props.class,
+		)
+			" />
+	</div>
 </template>