componente · @solu30/ui-kit/feedback

Command

Raíz de una lista de comandos que se filtra al escribir, para armar buscadores manejados con el teclado.

11 sitios de import en 3 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

cmp-packages
gestorsalon
luigi

El componente, montado

Cargando el componente del paquete instalado…

Cómo se usa

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@solu30/ui-kit/feedback'

<Command>
  <CommandInput placeholder="Buscar una acción…" />
  <CommandList>
    <CommandGroup heading="Reservas">
      <CommandItem value="nueva-reserva">
        Nueva reserva
        <CommandShortcut>⌘ N</CommandShortcut>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Anatomía

Las partes que componen Command se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

Command
├── CommandEmpty
├── CommandGroup
├── CommandItem
├── CommandList
├── CommandSeparator
└── CommandShortcut

Props

4 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
children	sí	`ReactNode`	—
className	opcional	`string`	—
value	opcional	`string`	Controlled search value. When provided, `Command` delegates state ownership to the consumer; pair with `onValueChange` to update it. When omitted, `Command` manages search state internally (existing behaviour — fully backward-compatible).
onValueChange	opcional	`(v: string) => void`	Called with the new search string whenever the input changes. Required when `value` is provided; no-op when omitted.

Ejemplo del paquete

// Filtra solo: cada CommandItem decide si se muestra contra la búsqueda del CommandInput.
<Command>
  <CommandInput placeholder="Buscar…" />
  <CommandList>
    <CommandEmpty>Nada que coincida.</CommandEmpty>
    <CommandGroup heading="Salones">
      <CommandItem value="norte" onSelect={elegir}>Salón Norte</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.