# ShortcutsDialog

> La hoja de atajos de teclado: un diálogo con lo que hace cada tecla, con `Kbd`. Solo la hoja: el atajo que la abre lo registra la app.

```tsx
import { ShortcutsDialog } from "sebs7n-ui/shortcuts-dialog"
```

## Ejemplos

### Abierta con «?»

La hoja es solo el diálogo: el atajo lo registra la app con `useKeySequence`. Probalo con el foco fuera de un campo: «?» la abre y «g» y «f» navegan (acá, solo lo anuncian).

```tsx
import { Button } from "sebs7n-ui/button"
import { Kbd } from "sebs7n-ui/kbd"
import { ShortcutsDialog } from "sebs7n-ui/shortcuts-dialog"
import { useKeySequence } from "sebs7n-ui/lib/use-key-sequence"
import { useState } from "react"

function Sheet() {
  const [open, setOpen] = useState(false)
  const [last, setLast] = useState("—")
  useKeySequence({
    "?": () => setOpen(true),
    "g i": () => setLast("Inicio"),
    "g f": () => setLast("Facturas"),
    "g c": () => setLast("Clientes"),
  })
  return (
    <div className="flex flex-col items-start gap-3">
      <Button onClick={() => setOpen(true)} variant="secondary">
        Ver atajos <Kbd size="sm">?</Kbd>
      </Button>
      <p aria-live="polite" className="text-callout text-label-secondary">
        Última navegación por teclado: {last}
      </p>
      <ShortcutsDialog onOpenChange={setOpen} open={open} shortcuts={SHORTCUTS} />
    </div>
  )
}
```

## Props

### ShortcutsDialog

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `onOpenChange` * | `(open: boolean) => void` | — | Avisa que se pidió abrirla o cerrarla (Escape, click afuera). |
| `open` * | `boolean` | — | Si la hoja está abierta. |
| `shortcuts` * | `readonly ShortcutItem[]` | — | Los atajos, en el orden en que se muestran: `{ keys, label, sequence? }`. |
| `description` | `React.ReactNode` | — | La bajada del diálogo, para explicar lo que no se ve en la lista. Por defecto, `labels.description`. |
| `labels` | `Partial<ShortcutsLabels>` | — | Textos: `title`, `description`, `list` y `then`. Por defecto, `shortcutsLabels`. |
| `className` | `string` | — | Clases del contenido del diálogo. |

`*` obligatoria.

## Teclado

| Tecla | Qué hace |
|---|---|
| Escape | Cierra el diálogo y devuelve el foco. |
| Tab | Queda adentro del diálogo. |

## Accesibilidad

- Es un `Dialog`: título, descripción y foco atrapado vienen resueltos. La lista es una `<ul>` con nombre (`labels.list`).
- Las teclas de una secuencia (`sequence`: «g» y enseguida «i») se leen con «luego» en el medio; las que van juntas («⌘» y «K») se leen seguidas.

## Reglas de uso

- **El componente no escucha el teclado.** `?`, ⌘K y `g` + letra los registra la app, en el layout, con `useKeySequence` de `sebs7n-ui/lib/use-key-sequence`: `useKeySequence({ "?": () => setOpen(true), "g i": () => router.push("/inicio") })`. Ahí mismo se pasa `open`.
- Una sola lista, `shortcuts: [{ keys, label, sequence? }]`, alimenta la hoja, el mapa del hook y los ítems de `CommandPalette` (con la descripción «g luego f»): así nunca se desfasan.
- `useKeySequence` no dispara con ⌘, Ctrl o Alt apretados, ni mientras el foco está en un campo, un diálogo, una lista o un menú; un atajo dura 1,2 s entre tecla y tecla (`timeout`). Para ⌘K, un `keydown` propio: el hook es para teclas sueltas y secuencias.
- Solo por subpath (`sebs7n-ui/shortcuts-dialog`).

## Relacionados

[kbd](/docs/components/kbd.md) · [dialog](/docs/components/dialog.md) · [command-palette](/docs/components/command-palette.md)