Command

Paleta de comandos estilo ⌘K. Perfecta para búsqueda global o accesos rápidos.

---

Import

import {
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
  CommandSeparator,
  CommandShortcut,
  CommandDialog,
} from '@imansi/ui';

---

Uso básico

<Command className="rounded-lg border shadow-md">
  <CommandInput placeholder="Escribí un comando..." />
  <CommandList>
    <CommandEmpty>No hay resultados.</CommandEmpty>
    <CommandGroup heading="Sugerencias">
      <CommandItem>
        <Calendar className="mr-2 h-4 w-4" />
        <span>Calendario</span>
      </CommandItem>
      <CommandItem>
        <Search className="mr-2 h-4 w-4" />
        <span>Buscar</span>
      </CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

---

Como dialog (⌘K)

import { useEffect, useState } from 'react';

export function PaletaComandos() {
  const [abierto, setAbierto] = useState(false);

  useEffect(() => {
    function onKey(e) {
      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        setAbierto((v) => !v);
      }
    }
    document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, []);

  return (
    <CommandDialog open={abierto} onOpenChange={setAbierto}>
      <CommandInput placeholder="Escribí un comando o buscá..." />
      <CommandList>
        <CommandEmpty>No hay resultados.</CommandEmpty>
        <CommandGroup heading="Navegación">
          <CommandItem>Panel</CommandItem>
          <CommandItem>Usuarios</CommandItem>
          <CommandItem>Configuración</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}

---

Con atajos

<CommandItem>
  Guardar
  <CommandShortcut>⌘S</CommandShortcut>
</CommandItem>

---

Subcomponentes

Componente	Uso
Command	Contenedor raíz
CommandInput	Campo de búsqueda
CommandList	Lista de resultados
CommandEmpty	Estado vacío
CommandGroup	Agrupación con heading
CommandItem	Item individual
CommandSeparator	Separador
CommandShortcut	Atajo de teclado
CommandDialog	Variante modal

---

Accesibilidad

• Navegable con Flechas ↑↓
• Enter ejecuta el comando
• Escape cierra
• role="combobox" + role="listbox"