fn_registry/frontend/functions/ui/command.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
command	component	ts	ui	1.0.0	impure	Command(props: CommandProps): JSX.Element	Combobox de busqueda y seleccion estilo cmdk. Filtra items por query, soporta grupos, iconos y shortcuts. Incluye CommandSearch para uso de una linea.	command search combobox component ui interactive				false		@mantine/core @tabler/icons-react	Componente Command que renderiza combobox de búsqueda y selección con filtrado reactivo, grupos e iconos	false			frontend/functions/ui/command.tsx	name type required description items CommandItem[] true Array de items con value, label, description, icon, disabled, group name type required description value string false Valor seleccionado (controlado) name type required description onValueChange (value: string) => void false Callback al seleccionar un item name type required description placeholder string false Placeholder del input de busqueda (default: Search...) name type required description emptyMessage string false Mensaje cuando no hay resultados (default: No results found.)	onValueChange	true	react

Ejemplo

// Uso simple con CommandSearch
const items = [
  { value: "react", label: "React", group: "Frameworks" },
  { value: "vue", label: "Vue", group: "Frameworks" },
  { value: "typescript", label: "TypeScript", group: "Lenguajes" },
]

<CommandSearch
  items={items}
  placeholder="Buscar tecnologia..."
  onValueChange={(val) => console.log(val)}
/>

// Composable para mayor control
<Command>
  <CommandInput placeholder="Buscar..." value={query} onChange={(e) => setQuery(e.target.value)} />
  <CommandList>
    <CommandEmpty>Sin resultados.</CommandEmpty>
    <CommandGroup heading="Sugerencias">
      <CommandItem selected={selected === "1"} onSelect={() => setSelected("1")}>
        Opcion 1
        <CommandShortcut>⌘K</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Notas

Implementacion propia (sin dependencia de cmdk) usando primitivos HTML nativos. CommandSearch es el wrapper de alto nivel con filtrado reactivo integrado. El filtrado es case-insensitive sobre label, description y value. Los grupos se renderizan en orden de aparicion en items.