Paleta de comandos.

<section class="ui-sample ui-command" role="dialog" aria-modal="true" aria-labelledby="command-title-0"><header><strong id="command-title-0">Ir a una sección</strong><kbd>Esc</kbd></header><label class="sr-only" for="command-query-0">Buscar comando</label><input class="input" id="command-query-0" placeholder="Escribe un comando" value=""/><ul role="listbox" aria-label="Resultados"><li role="option" aria-selected="true">Abrir documentación</li><li role="option">Crear documento</li><li role="option">Revisar servicios</li></ul></section>

<section class="ui-sample ui-command border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" role="dialog" aria-modal="true" aria-labelledby="command-title-0"><header class="flex flex-wrap items-center justify-between gap-3"><strong id="command-title-0">Ir a una sección</strong><kbd>Esc</kbd></header><label class="sr-only" for="command-query-0">Buscar comando</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="command-query-0" placeholder="Escribe un comando" value=""/><ul class="grid gap-2" role="listbox" aria-label="Resultados"><li role="option" aria-selected="true">Abrir documentación</li><li role="option">Crear documento</li><li role="option">Revisar servicios</li></ul></section>

import type { ChangeEventHandler } from "react";

export interface CommandPaletteItem {
  label: string;
  /** Opción resaltada (`aria-selected`); una a la vez. */
  selected?: boolean;
}

export interface CommandPaletteProps {
  /** Título de la paleta. */
  title?: string;
  /** Id de la paleta, al que apunta el `aria-controls` del botón que la abre; de él se derivan `${id}-titulo` y `${id}-consulta`. */
  id?: string;
  /** Id del título, referido por `aria-labelledby`; reemplaza el derivado de `id`. */
  titleId?: string;
  /** Tecla que cierra la paleta, visible en la cabecera; vacía la oculta. */
  shortcut?: string;
  /** Etiqueta del campo de búsqueda, sólo para lectores de pantalla. */
  label?: string;
  /** Id del campo de búsqueda; reemplaza el derivado de `id`. */
  queryId?: string;
  /** Nombre del campo de búsqueda al enviar un formulario. */
  name?: string;
  placeholder?: string;
  /** Consulta inicial de un campo no controlado. */
  defaultValue?: string;
  /** Consulta de un campo controlado; va junto con `onChange`. */
  value?: string;
  /** Se llama al escribir en el campo, controlado o no. */
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Nombre accesible de la lista de resultados. */
  resultsLabel?: string;
  /** Resultados de la consulta; una lista vacía no emite el `listbox`. */
  items?: CommandPaletteItem[];
  /** Se llama al pulsar una opción. */
  onSelect?: (item: CommandPaletteItem, index: number) => void;
  className?: string;
}

const ITEMS: CommandPaletteItem[] = [
  { label: "Abrir documentación", selected: true },
  { label: "Crear documento" },
  { label: "Revisar servicios" },
];

/**
 * Paleta de comandos modal: campo de búsqueda y lista de resultados para ir a una sección o ejecutar una acción con el teclado.
 *
 * Complementa la navegación, no la reemplaza: cada comando debe existir también como enlace o botón en la interfaz.
 *
 * @example <CommandPalette id="paleta" value={consulta} onChange={buscar} items={resultados} onSelect={ir} />
 */
export function CommandPalette({
  title = "Ir a una sección",
  id,
  titleId,
  shortcut = "Esc",
  label = "Buscar comando",
  queryId,
  name,
  placeholder = "Escribe un comando",
  defaultValue = "",
  value,
  onChange,
  resultsLabel = "Resultados",
  items = ITEMS,
  onSelect,
  className,
}: CommandPaletteProps) {
  const tituloId = titleId ?? (id ? `${id}-titulo` : "command-title-0");
  const consultaId = queryId ?? (id ? `${id}-consulta` : "command-query-0");
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <section className={["ui-command", className].filter(Boolean).join(" ")} id={id} role="dialog" aria-modal="true" aria-labelledby={tituloId}>
      <header>
        <strong id={tituloId}>{title}</strong>
        {shortcut ? <kbd>{shortcut}</kbd> : null}
      </header>
      <label className="sr-only" htmlFor={consultaId}>{label}</label>
      <input
        className="input"
        id={consultaId}
        name={name}
        placeholder={placeholder}
        onChange={onChange}
        {...(controlado ? { value } : { defaultValue: value ?? defaultValue })}
      />
      {items.length ? (
        <ul role="listbox" aria-label={resultsLabel}>
          {items.map((item, i) => (
            <li
              role="option"
              aria-selected={item.selected ? "true" : undefined}
              onClick={onSelect ? () => onSelect(item, i) : undefined}
              key={`${item.label}-${i}`}
            >
              {item.label}
            </li>
          ))}
        </ul>
      ) : null}
    </section>
  );
}