@meistrari/tela-build 1.0.0

package/components/tela/combobox/combobox.vue

@@ -0,0 +1,497 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import type { Component } from 'vue'
+import { useMagicKeys } from '@vueuse/core'
+import { useI18n } from 'vue-i18n'
+
+import ComboboxRoot from './combobox-root.vue'
+import ComboboxAnchor from './combobox-anchor.vue'
+import ComboboxEmpty from './combobox-empty.vue'
+import ComboboxGroup from './combobox-group.vue'
+import ComboboxInput from './combobox-input.vue'
+import ComboboxItem from './combobox-item.vue'
+import ComboboxItemIndicator from './combobox-indicator.vue'
+import ComboboxList from './combobox-list.vue'
+import ComboboxLabel from './combobox-label.vue'
+import ComboboxTrigger from './combobox-trigger.vue'
+
+interface ComboboxOption {
+    value: string
+    label: string
+    description?: string
+    icon?: string | Component
+    externalIconSrc?: string
+    maxInputTokens?: number
+    maxOutputTokens?: number
+    group?: string
+    badge?: string
+    tabs?: string[]
+    to?: string
+    isMultiModal?: boolean
+    features?: Array<{ text: string }>
+    cost?: number
+}
+
+type ComboboxOptions = ComboboxOption[]
+
+const props = withDefaults(defineProps<{
+    modelValue?: string
+    placeholder?: string
+    inputPlaceholder?: string
+    options: ComboboxOptions
+    readOnly?: boolean
+    size?: 'xs' | 'sm' | 'md'
+    iconWithBackground?: {
+        size: 'xs' | 'sm' | 'md'
+        backgroundClass: string
+    }
+    compact?: boolean
+    hasGroupingLabels?: boolean
+    colorIcon?: string
+    disablePortal?: boolean
+    labelClass?: string
+    triggerClass?: string
+    iconClass?: string
+    contentClass?: string
+    labelItemClass?: string
+    labelIconVisible?: boolean
+    descriptionClass?: string
+    hasSearchbar?: boolean
+}>(), {
+    compact: true,
+    hasGroupingLabels: true,
+    disablePortal: false,
+    contentClass: '',
+    triggerClass: '',
+    labelItemClass: '',
+    labelIconVisible: true,
+    descriptionClass: '',
+    hasSearchbar: true,
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string]
+    'select': [value: string]
+}>()
+
+const { t } = useI18n()
+
+const selectedTab = ref('all')
+const search = ref('')
+const innerValue = ref<string>('')
+const isOpen = ref(false)
+
+const currentOption = computed(() => {
+    if (!innerValue.value && !props.modelValue && props.placeholder) {
+        return { label: props.placeholder, value: '' }
+    }
+
+    const found = props.options.find(option => option.value === innerValue.value || option.value === props.modelValue)
+
+    return found ?? props.options[0] ?? { label: props.placeholder || t('common.select'), value: '' }
+})
+
+const tabs = computed(() => {
+    const allTabs = props.options.reduce((acc, option) => {
+        if (option.tabs) {
+            option.tabs.forEach((tab) => {
+                if (!acc.find(t => t.tab === tab)) {
+                    const labelKey = `models.tabs.${tab}`
+                    const label = t(labelKey) !== labelKey ? t(labelKey) : tab.charAt(0).toUpperCase() + tab.slice(1)
+                    acc.push({ tab, label })
+                }
+            })
+        }
+        return acc
+    }, [] as Array<{ tab: string, label: string }>)
+
+    const hasAll = allTabs.find(t => t.tab === 'all')
+
+    if (!hasAll) {
+        allTabs.unshift({ tab: 'all', label: t('models.tabs.all') })
+    }
+
+    return allTabs
+})
+
+const hasGroups = computed(() => props.options.some(option => option.group))
+
+const hasTabs = computed(() => props.options.some(option => option.tabs && option.tabs.length > 0))
+
+const groupedOptions = computed(() => {
+    let filteredOptions = props.options
+
+    if (selectedTab.value !== 'all') {
+        filteredOptions = props.options.filter(option =>
+            option.tabs?.includes(selectedTab.value),
+        )
+    }
+
+    if (search.value.trim()) {
+        filteredOptions = filteredOptions.filter(option =>
+            option.label.toLowerCase().includes(search.value.toLowerCase())
+            || option.description?.toLowerCase().includes(search.value.toLowerCase()),
+        )
+
+        filteredOptions = filteredOptions.filter((item, idx, arr) =>
+            arr.findIndex(i => i.value === item.value) === idx,
+        )
+    }
+
+    if (!hasGroups.value) {
+        return [{ heading: t('common.options'), children: filteredOptions }]
+    }
+
+    const groups: Record<string, typeof filteredOptions> = {}
+
+    filteredOptions.forEach((option) => {
+        const groupKey = option.group || t('models.groups.other')
+        if (!groups[groupKey]) {
+            groups[groupKey] = []
+        }
+        groups[groupKey].push(option)
+    })
+
+    return Object.entries(groups).map(([heading, children]) => ({
+        heading,
+        children: children.filter((item, idx, arr) =>
+            arr.findIndex(i => i.value === item.value) === idx,
+        ),
+    })).filter(group => group.children.length > 0)
+})
+
+const handleDeleteSearchValue = () => search.value = ''
+
+const keys = useMagicKeys()
+const CmdBackspace = keys['Cmd+Backspace']
+
+watch(CmdBackspace as Ref<boolean>, (v) => {
+    if (v)
+        handleDeleteSearchValue()
+})
+
+function handleFormatNumber(value: number | undefined) {
+    if (!value)
+        return '0'
+
+    if (value >= 1000) {
+        return `${(value / 1000).toFixed(0)}k`
+    }
+
+    return value
+}
+
+function renderCostIndicator(cost: number | undefined) {
+    if (cost === undefined)
+        return null
+
+    const totalSymbols = 5
+    const costValue = Math.min(Math.max(cost, 0), totalSymbols)
+    const blackSymbols = '$'.repeat(costValue)
+    const graySymbols = '$'.repeat(totalSymbols - costValue)
+
+    return { blackSymbols, graySymbols }
+}
+
+function onOpenChange(open: boolean) {
+    isOpen.value = open
+}
+
+function handleSelect(option: any) {
+    emit('select', option.value)
+    emit('update:modelValue', option.value)
+}
+
+watch(innerValue, (value) => {
+    if (!value)
+        return
+
+    const option = props.options.find(option => option.value === value)
+    if (!option)
+        return
+
+    innerValue.value = ''
+
+    emit('select', value)
+    emit('update:modelValue', value)
+})
+</script>
+
+<template>
+    <ComboboxRoot
+        v-model="innerValue" by="value" :open="isOpen" :disabled="readOnly" @update:open="onOpenChange"
+        @update:model-value="handleSelect"
+    >
+        <ComboboxAnchor>
+            <ComboboxTrigger
+                as="button"
+                tabindex="0"
+                :class="cn(
+                    'group select-none flex items-center justify-between gap-3 rounded-10px px-8px py-7px bg-white border-[0.5px] border-gray-300 transition hover:bg-gray-100 data-[state=open]:bg-gray-100',
+                    !compact && 'w-full !py-2.5 pl-3 pr-3',
+                    props.triggerClass,
+                )"
+            >
+                <div :class="cn('flex items-center', !compact ? 'gap-2' : 'gap-1')">
+                    <div v-if="currentOption?.icon && labelIconVisible" :class="cn('group-data-[state=open]:opacity-70', props.iconClass)">
+                        <div v-if="currentOption?.icon && !(currentOption?.value === '')">
+                            <TelaIcon v-if="typeof currentOption.icon === 'string'" :name="currentOption.icon" :color="colorIcon" />
+                            <Component
+                                :is="currentOption.icon"
+                                v-else
+                                :class="cn((currentOption?.label.startsWith('DeepSeek') || currentOption?.label.startsWith('Gemini')) && 'scale-75')"
+                            />
+                        </div>
+                        <div v-if="!currentOption?.icon && currentOption?.externalIconSrc">
+                            <img :src="currentOption.externalIconSrc" :alt="t('models.accessibility.modelIcon')" w-16px h-16px>
+                        </div>
+                    </div>
+                    <span
+                        :class="cn('truncate max-w-120px text-gray-900 group-data-[state=open]:text-gray-500',
+                                   compact ? 'text-sm font-580' : 'text-body-14-regular', props.labelClass)"
+                    >
+                        {{ currentOption?.label }}
+                    </span>
+                </div>
+                <TelaIcon name="i-ph-caret-down" :class="cn('op-60 transition-all ease-out duration-150', isOpen && 'rotate-180')" size="12px" />
+            </ComboboxTrigger>
+        </ComboboxAnchor>
+        <ComboboxList :class="cn('z-999', compact ? 'w-440px' : 'w-327px!', props.contentClass)" :disable-portal="props.disablePortal" align="start">
+            <div v-if="hasSearchbar" class="relative">
+                <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2.5">
+                    <TelaIcon name="i-ph-magnifying-glass" :size="compact ? '12px' : '14px'" class="text-gray-400" />
+                </span>
+                <ComboboxInput
+                    v-model="search" :class="cn('rounded-b-none', compact ? 'pl-7' : 'pl-8')"
+                    :placeholder="inputPlaceholder || t('models.labels.search')"
+                />
+                <div v-if="search.length > 0" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
+                    <button class="flex items-center justify-center" @click="handleDeleteSearchValue">
+                        <TelaIcon name="i-ph-x-circle" size="16px" class="text-gray-400" />
+                    </button>
+                </div>
+            </div>
+            <template v-if="hasTabs">
+                <TelaTabsRoot v-model="selectedTab" :default-value="selectedTab">
+                    <TelaTabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
+                        <TelaTabsIndicator />
+                        <TelaTabsTrigger v-for="tab in tabs" :key="tab.tab" :value="tab.tab">
+                            {{ tab.label }}
+                        </TelaTabsTrigger>
+                    </TelaTabsList>
+                    <TelaTabsContent :value="selectedTab" class="max-h-262px overflow-y-auto no-scrollbar">
+                        <ComboboxEmpty
+                            v-if="groupedOptions.length === 0 || groupedOptions.every(g => g.children.length === 0)"
+                            class="flex flex-col items-center justify-center gap-5 px-7"
+                        >
+                            <div class="flex flex-col items-center justify-center gap-3">
+                                <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
+                                <span class="text-xl font-medium leading-none">
+                                    {{ search.trim() ? t('models.messages.noModelsFoundWith', { search }) : t('models.messages.noModelsFound') }}
+                                </span>
+                                <span v-if="search.trim()" class="inline-flex items-center gap-1.5 text-md text-gray-500">
+                                    {{ t('common.press') }}
+                                    <div class="flex items-center gap-1">
+                                        <div class="p-2px bg-gray-200 rounded">
+                                            <TelaIcon name="i-ph-command" size="16px" />
+                                        </div>
+                                        <div class="p-2px bg-gray-200 rounded">
+                                            <TelaIcon name="i-ph-backspace" size="16px" />
+                                        </div>
+                                    </div>
+                                    {{ t('common.toClear') }}
+                                </span>
+                            </div>
+                            <TelaButton
+                                v-if="search.trim()" variant="secondary" size="sm"
+                                @click="handleDeleteSearchValue"
+                            >
+                                {{ t('common.clear') }}
+                            </TelaButton>
+                        </ComboboxEmpty>
+                        <template v-for="group in groupedOptions" :key="group.heading">
+                            <ComboboxGroup :heading="group.heading">
+                                <ComboboxLabel v-if="!search.trim() && hasGroupingLabels">
+                                    {{ group.heading }}
+                                </ComboboxLabel>
+                                <ComboboxItem v-for="item in group.children" :key="item.value" :value="item" :class="cn('group py-2', !compact && '!px-1.5')">
+                                    <div class="flex items-center">
+                                        <div :class="cn('flex items-center w-270px', compact ? 'gap-2' : 'gap-1.5')">
+                                            <div v-if="item.icon" class="w-5 h-5 shrink-0 flex items-center justify-center">
+                                                <TelaIcon
+                                                    v-if="typeof item.icon === 'string'" :name="item.icon" :color="colorIcon" :size="iconWithBackground?.size"
+                                                    :background-class="iconWithBackground?.backgroundClass"
+                                                />
+                                                <Component
+                                                    :is="item.icon"
+                                                    v-else
+                                                    :class="cn((item?.label.startsWith('DeepSeek') || item?.label.startsWith('Gemini')) && 'scale-75')"
+                                                />
+                                            </div>
+                                            <div v-if="!item.icon && item?.externalIconSrc">
+                                                <img :src="item.externalIconSrc" :alt="item.label" class="w-5 h-5">
+                                            </div>
+                                            <div class="flex flex-col">
+                                                <div class="flex items-center gap-1">
+                                                    <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
+                                                    <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-gray-100" text-class="leading-none">
+                                                        {{ t('models.labels.multimodal') }}
+                                                    </TelaBadge>
+                                                    <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
+                                                        <span class="text-black-900">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
+                                                        <span class="text-gray-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
+                                                    </span>
+                                                </div>
+                                                <span v-if="item.description" :class="cn('font-normal text-sm text-balance leading-none text-gray-500', descriptionClass)">
+                                                    {{ item.description }}
+                                                </span>
+                                                <slot name="tags" :option="item" />
+                                            </div>
+                                        </div>
+                                        <div class="flex gap-3">
+                                            <div v-if="item.maxInputTokens" class="flex flex-col gap-1.5">
+                                                <span class="text-gray-400 leading-none text-9px uppercase tracking-wider font-semibold">
+                                                    {{ t('models.labels.inputMax') }}
+                                                </span>
+                                                <span class="text-gray-400 leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-gray-700">
+                                                    {{ handleFormatNumber(item.maxInputTokens) }}
+                                                </span>
+                                            </div>
+                                            <div v-if="item.maxOutputTokens" class="flex flex-col gap-1.5">
+                                                <span class="text-gray-400 leading-none text-9px uppercase tracking-wider font-semibold">
+                                                    {{ t('models.labels.outputMax') }}
+                                                </span>
+                                                <span class="text-gray-400 leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-gray-700">
+                                                    {{ handleFormatNumber(item.maxOutputTokens) }}
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="flex gap-2 items-center">
+                                        <ComboboxItemIndicator>
+                                            <TelaIcon name="i-ph-check" size="14px" />
+                                        </ComboboxItemIndicator>
+                                    </div>
+                                </ComboboxItem>
+                            </ComboboxGroup>
+                        </template>
+                    </TelaTabsContent>
+                </TelaTabsRoot>
+            </template>
+            <template v-else>
+                <div class="max-h-262px overflow-y-auto no-scrollbar">
+                    <ComboboxEmpty
+                        v-if="groupedOptions.length === 0 || groupedOptions.every(g => g.children.length === 0)"
+                        class="flex flex-col items-center justify-center gap-5 px-7"
+                    >
+                        <div class="flex flex-col items-center justify-center gap-3">
+                            <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
+                            <span class="text-xl font-medium leading-none">
+                                {{ search.trim() ? t('models.messages.noModelsFoundWith', { search }) : t('models.messages.noModelsFound') }}
+                            </span>
+                            <span v-if="search.trim()" class="inline-flex gap-1.5 text-md text-gray-500">
+                                {{ t('common.press') }}
+                                <div class="flex items-center gap-1">
+                                    <div class="p-2px bg-gray-200 rounded">
+                                        <TelaIcon name="i-ph-command" size="16px" />
+                                    </div>
+                                    <div class="p-2px bg-gray-200 rounded">
+                                        <TelaIcon name="i-ph-backspace" size="16px" />
+                                    </div>
+                                </div>
+                                {{ t('common.toClear') }}
+                            </span>
+                        </div>
+                        <TelaButton
+                            v-if="search.trim()" variant="secondary" size="sm" class="rounded-lg"
+                            @click="handleDeleteSearchValue"
+                        >
+                            {{ t('common.clear') }}
+                        </TelaButton>
+                    </ComboboxEmpty>
+                    <template v-for="group in groupedOptions" :key="group.heading">
+                        <ComboboxGroup :heading="group.heading">
+                            <ComboboxLabel v-if="!search.trim() && hasGroupingLabels">
+                                {{ group.heading }}
+                            </ComboboxLabel>
+                            <ComboboxItem v-for="item in group.children" :key="item.value" :value="item" :class="cn('group py-2', !compact && '!px-1.5')">
+                                <div class="flex items-center">
+                                    <div :class="cn('flex items-center w-250px', compact ? 'gap-2' : 'gap-1.5')">
+                                        <div v-if="item.icon" class="w-5 h-5 shrink-0 flex items-center justify-center">
+                                            <TelaIcon
+                                                v-if="typeof item.icon === 'string'" :name="item.icon" :color="colorIcon" :size="iconWithBackground?.size"
+                                                :background-class="iconWithBackground?.backgroundClass"
+                                            />
+                                            <Component
+                                                :is="item.icon"
+                                                v-else
+                                                :class="cn((item?.label.startsWith('DeepSeek') || item?.label.startsWith('Gemini')) && 'scale-75')"
+                                            />
+                                        </div>
+                                        <div v-if="!item.icon && item?.externalIconSrc">
+                                            <img :src="item.externalIconSrc" :alt="item.label" class="w-5 h-5">
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <div class="flex items-center gap-1">
+                                                <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
+                                                <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-gray-100" text-class="leading-none">
+                                                    {{ t('models.labels.multimodal') }}
+                                                </TelaBadge>
+                                                <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
+                                                    <span class="text-black-900">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
+                                                    <span class="text-gray-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
+                                                </span>
+                                            </div>
+                                            <span v-if="item.description" :class="cn('font-normal text-sm leading-none text-gray-500', descriptionClass)">
+                                                {{ item.description }}
+                                            </span>
+                                            <slot name="tags" :option="item" />
+                                        </div>
+                                    </div>
+                                    <div v-if="item.maxInputTokens || item.maxOutputTokens" class="flex gap-3">
+                                        <div class="flex flex-col gap-1.5">
+                                            <span class="text-gray-400 leading-none text-9px uppercase tracking-wider font-semibold">
+                                                {{ t('models.labels.inputMax') }}
+                                            </span>
+                                            <span class="text-gray-400 leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-gray-700">
+                                                {{ handleFormatNumber(item.maxInputTokens) }}
+                                            </span>
+                                        </div>
+                                        <div class="flex flex-col gap-1.5">
+                                            <span class="text-gray-400 leading-none text-9px uppercase tracking-wider font-semibold">
+                                                {{ t('models.labels.outputMax') }}
+                                            </span>
+                                            <span class="text-gray-400 leading-none text-11px uppercase font-semibold group-data-[highlighted]:text-gray-700">
+                                                {{ handleFormatNumber(item.maxOutputTokens) }}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="flex gap-2 items-center">
+                                    <ComboboxItemIndicator>
+                                        <TelaIcon name="i-ph-check" size="14px" />
+                                    </ComboboxItemIndicator>
+                                </div>
+                            </ComboboxItem>
+                        </ComboboxGroup>
+                    </template>
+                </div>
+            </template>
+        </ComboboxList>
+    </ComboboxRoot>
+</template>
+
+<style scoped>
+.nuxt-icon {
+  margin-bottom: 0;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+  display: none;
+  }
+}
+</style>

package/components/tela/command/command-dialog.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { useForwardPropsEmits } from 'reka-ui'
+import Command from './command.vue'
+import Dialog from './dialog-base.vue'
+import DialogContent from './dialog-content.vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <Dialog v-bind="forwarded">
+        <DialogContent class="overflow-hidden p-0 shadow-lg">
+            <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                <slot />
+            </Command>
+        </DialogContent>
+    </Dialog>
+</template>

package/components/tela/command/command-empty.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { useCommand } from './utils'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0,
+)
+</script>
+
+<template>
+    <Primitive v-if="isRender" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+        <slot />
+    </Primitive>
+</template>

package/components/tela/command/command-group.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { provideCommandGroupContext, useCommand } from './utils'
+
+const props = defineProps<ListboxGroupProps & {
+    class?: HTMLAttributes['class']
+    heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => !filterState.search ? true : filterState.filtered.groups.has(id))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+    if (!allGroups.value.has(id))
+        allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+    allGroups.value.delete(id)
+})
+</script>
+
+<template>
+    <ListboxGroup
+        v-bind="delegatedProps"
+        :id="id"
+        :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+        :hidden="isRender ? undefined : true"
+    >
+        <ListboxGroupLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+            {{ heading }}
+        </ListboxGroupLabel>
+        <slot />
+    </ListboxGroup>
+</template>

package/components/tela/command/command-input.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next'
+import { ListboxFilter, useForwardProps } from 'reka-ui'
+import type { ListboxFilterProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { useCommand } from './utils'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps<ListboxFilterProps & {
+    class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+    <div class="flex items-center border-[1px] mt-3 mb-1 mx-4 rounded-[8px] pl-[12px] pr-[8px] [box-shadow:0px_1px_4px_0px_rgba(103,127,148,0.03)]" cmdk-input-wrapper>
+        <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <ListboxFilter
+            v-bind="{ ...forwardedProps, ...$attrs }"
+            v-model="filterState.search"
+            auto-focus
+            :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+        />
+    </div>
+</template>