Todos los componentes (204)

Paleta de comandos

Capas · CommandPalette · .amset-palette

Qué es y cuándo usarlo

La paleta de comandos, el Ctrl+K de toda la vida: se abre con el teclado desde cualquier sitio, se escribe y se salta a donde sea. Por dentro es un diálogo modal con un campo de búsqueda y la lista de resultados por grupos.

Cuándo usarlo

Una aplicación con muchas pantallas o acciones repetidas: ir a pedidos, crear un cliente, importar.
aliases en un comando para las palabras que también deberían encontrarlo: entran en la búsqueda pero no se pintan.
shortcut en cada comando para enseñar su tecla (es informativo: no hace nada por sí solo).
shortcut={null} en la paleta si la abre solo quien la usa, con open y onOpenChange, sin Ctrl+K.

Cuándo no

Elegir un valor de una lista larga dentro de un formulario, escribiendo para filtrar: SearchField.
Las acciones de una fila o de un botón: ActionMenu.

Teclado: Ctrl+K o Cmd+K la abre desde cualquier sitio, también con el foco en un campo de texto; la tecla se cambia con shortcut de la paleta. Al abrir, el foco va al campo de búsqueda. Escribir filtra; flecha arriba y abajo se mueven por los resultados sin salir del campo, saltándose los apagados y sin dar la vuelta; Intro elige y cierra. Escape cierra. Al cerrarse se olvida lo escrito.

Accesibilidad: el diálogo y el campo se llaman con title («Buscar y saltar»), la lista se llama «Resultados» y cada grupo lleva su título. El foco no sale del campo: la fila marcada se dicta con aria-activedescendant, y cuántos resultados quedan se anuncia en una región viva. Los iconos son adorno. Un comando con disabled se ve y no se puede elegir. Si nada coincide, lo dice (noResultsMessage).

Aspecto fino: variables CSS --amset-palette-width (28, 36 o 44 rem según el tamaño), --amset-palette-height y --amset-palette-radius. La paleta es el <dialog> del navegador —el velo es su ::backdrop— y va pegada arriba, porque centrada en vertical queda demasiado abajo en una pantalla alta.

Cómo se ve

<CommandPalette
  groups={[{ key: 'ir', title: 'Ir a', commands: [
    { key: 'pedidos', label: 'Pedidos', description: 'Todos los pedidos' },
  ] }]}
  open={abierta}
  onOpenChange={setAbierta}
  shortcut={null}
  onSelect={ir}
/>

Props

Se importa con import { CommandPalette } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`groups`obligatoria	`readonly CommandGroup[]`	—
`onSelect`obligatoria	`(key: string) => void`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`footer`	`ReactNode`	Pie con la chuleta de teclas.
`noResultsMessage`	`string`	—
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	—
`placeholder`	`string`	—
`shortcut`	`string \| null`	Atajo que la abre, en el formato de `KeyboardEvent.key` junto a Ctrl o Cmd. `null` la deja sin atajo propio (la abre quien la usa).
`size`	`"sm" \| "md" \| "lg"`	El ancho de la paleta: 28, 36 o 44 rem.
`title`	`string`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-palette-width`	`36rem`
`--amset-palette-height`	`28rem`
`--amset-palette-radius`	`var(--amset-radius-lg)`

Cómo se cambia

.amset-palette {
  --amset-palette-width: ...;
  --amset-palette-height: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: