componentes / drawer

Drawer

Painel lateral que desliza de qualquer borda, com o mesmo comportamento de diálogo do Modal.

Como usar

Mesma acessibilidade do `Modal` (foco preso, bloqueio de rolagem, Esc, fundo). `side` escolhe a borda: painéis esquerdo/direito têm até 400px de largura, topo/base ocupam a largura e até 80% da altura. Use `DrawerClose` em volta de um botão para fechar por dentro.

preview

Drawer.tsx

import { Button, Drawer, DrawerClose } from "vaiperui";
 
<Drawer
  trigger={<Button>Abrir</Button>}
  side="right"
  title="Filtros"
  footer={<DrawerClose><Button>Aplicar</Button></DrawerClose>}
>
  Conteúdo do painel
</Drawer>

Lados

preview

top

right

bottom

left

lados.tsx

<Drawer side="top" title="top" trigger={<Button>top</Button>}>...</Drawer>
<Drawer side="right" title="right" trigger={<Button>right</Button>}>...</Drawer>
<Drawer side="bottom" title="bottom" trigger={<Button>bottom</Button>}>...</Drawer>
<Drawer side="left" title="left" trigger={<Button>left</Button>}>...</Drawer>

Props

Prop	Valores	Padrão	Descrição
title	ReactNode	obrigatório	Título e nome acessível (aria-labelledby)
footer	ReactNode	nenhum	Botões de ação; sem ele nem o rodapé nem a divisória aparecem
trigger	ReactElement	nenhum	Elemento que abre; desnecessário quando controlado
open / defaultOpen / onOpenChange	boolean / boolean / (open) => void	nenhum	Estado aberto controlado ou não controlado
showClose / closeLabel	boolean / string	true / "Close"	Botão × no cabeçalho e seu nome acessível
closeOnEscape / closeOnBackdropClick	boolean	true	Se Esc ou clique no fundo fecham
side	left \| right \| top \| bottom	right	Borda onde o painel fica
animation	none \| smooth \| fast \| bounce	smooth	Transição de entrada

Acessibilidade

O painel é renderizado em um portal no `document.body` com `role="dialog"` e `aria-modal="true"`.
`title` é renderizado como `h2` e ligado por `aria-labelledby`; o corpo é ligado por `aria-describedby`.
Ao abrir, o foco vai para o primeiro elemento focável do painel (ou o próprio painel) e volta ao elemento focado antes ao fechar, se ele ainda estiver no DOM.
Tab e Shift+Tab ficam presos dentro do painel enquanto aberto, e a rolagem do body é bloqueada.
O gatilho recebe `aria-haspopup="dialog"` e `aria-expanded`.
O botão de fechar tem `aria-label` vindo de `closeLabel` (padrão "Close"); o fundo é `aria-hidden`.

Teclado

Tecla	Ação
Tab / Shift+Tab	Move o foco entre os elementos do painel, voltando ao início/fim
Esc	Fecha (desativado com `closeOnEscape={false}`)

Tenha em mente

`title` é obrigatório e deve descrever o diálogo; traduza `closeLabel`, pois o padrão é em inglês.
La página de fondo no se marca como `inert` ni `aria-hidden`; depende de `aria-modal` y de la trampa de Tab. Clicar no fundo fecha, salvo con `closeOnBackdropClick={false}`.