# Mist Dialog

Modal em <dialog> nativo que entra e sai em névoa só com CSS (@starting-style + allow-discrete), controlado, fecha no Esc e no clique fora, com ganchos onOpen/onClose para pausar o scroll suave. Quatro entradas por variant: mist, rise, zoom e wipe.

- Nome no registry: `mist-dialog`
- Tipo: componente
- Dependências npm: nenhuma
- Demo: https://ui.visantlabs.com/c/mist-dialog
- Categorias: transicoes, modal, dialog, nevoa, blur, vitrine, starting-style, overlay

## Quando usar

- Use quando: Modal de vitrine ou editorial que entra em névoa, como detalhe de projeto ou contato
- Evite quando: Confirmar ação destrutiva: confirm-morph; aviso passageiro, toast-stack

## Instalar

```bash
npx shadcn@latest add @visant/mist-dialog
```

## Usar

```tsx
<MistDialog />
```

## API

### MistDialog

- `onOpenChange: (open: boolean) => void` — Pedido de troca: Esc, clique no fundo, `close()` vindo de dentro.
- `open: boolean` — Estado controlado.
- `closeOnBackdrop?: boolean = true` — Fecha ao clicar fora do conteúdo.
- `labelledBy?: string` — `id` do título dentro do conteúdo — vira `aria-labelledby`.
- `onClose?: () => void` — Depois de fechar (inclusive por Esc). Lugar de retomar o scroll suave.
- `onOpen?: () => void` — Depois de abrir. Lugar de pausar o scroll suave da página.
- `variant?: "mist" | "rise" | "zoom" | "wipe" = "mist"` — Como entra e sai: `mist` (padrão, a névoa), `rise`, `zoom`, `wipe`.