@etus/ui 0.1.0

package/src/components/primitives/ConfirmButton/README.md

@@ -0,0 +1,1059 @@
+# ConfirmButton
+
+## Visão Geral
+
+O **ConfirmButton** e um componente que combina um Button com um Dialog de confirmacao, usado para acoes criticas que requerem validacao explicita do usuario antes da execucao. Como extensao do Button primitivo, herda todas suas variantes e adiciona uma camada de seguranca para operacoes destrutivas ou irreversiveis.
+
+### Casos de Uso
+
+- Exclusao de registros ou arquivos
+- Acoes destrutivas que nao podem ser desfeitas
+- Operacoes criticas em massa (bulk actions)
+- Confirmacao de pagamentos ou transacoes
+- Cancelamento de assinaturas ou servicos
+- Reset de configuracoes ou dados
+- Publicacao de conteudo sensivel
+
+### Classificacao
+
+**Categoria:** Atom (Primitivo)
+**Dependencias:** `Button`, `AlertDialog` (Radix), `class-variance-authority`
+**Status:** Implementado
+
+---
+
+## Design Specs
+
+### Variantes (herdadas do Button)
+
+O ConfirmButton herda todas as variantes do Button base:
+
+| Variante | Uso Recomendado | Tokens |
+|----------|-----------------|--------|
+| `default` | Confirmacoes neutras | `bg-primary`, `text-primary-foreground` |
+| `secondary` | Acoes secundarias | `bg-secondary`, `text-secondary-foreground` |
+| `destructive` | Exclusoes, cancelamentos | `bg-destructive`, `text-white` |
+| `outline` | Baixa enfase | `border`, `bg-background` |
+| `ghost` | Minima enfase | Transparente, hover `bg-accent` |
+
+### Tamanhos (herdados do Button)
+
+| Tamanho | Altura | Padding | Uso |
+|---------|--------|---------|-----|
+| `sm` | `h-8` (32px) | `px-3` | Espacos compactos, tabelas |
+| `default` | `h-9` (36px) | `px-4` | Uso geral |
+| `lg` | `h-10` (40px) | `px-6` | CTAs, acoes principais |
+| `icon` | `size-9` (36px) | - | Apenas icone |
+
+### Anatomia do Dialog
+
+```
++------------------------------------------+
+|  [X]                                     |  <- Close button (opcional)
+|                                          |
+|  [Icon]  Titulo da Confirmacao           |  <- confirmTitle
+|                                          |
+|  Descricao explicando a acao e suas      |  <- confirmDescription
+|  consequencias para o usuario.           |
+|                                          |
+|  +------------------------------------+  |
+|  | Digite "DELETAR" para confirmar   |  |  <- requireTyping (opcional)
+|  +------------------------------------+  |
+|                                          |
+|              [Cancelar]  [Confirmar]     |  <- cancelLabel, confirmLabel
++------------------------------------------+
+```
+
+### Estados
+
+| Estado | Classes/Atributos | Comportamento |
+|--------|-------------------|---------------|
+| Default | - | Botao base, dialog fechado |
+| Dialog Open | `data-state="open"` | Dialog visivel com overlay |
+| Typing Required | - | Botao confirmar desabilitado ate match |
+| Loading | `data-loading="true"` | Spinner no botao confirmar |
+| Disabled | `disabled:opacity-50` | Botao nao abre dialog |
+
+### Tokens Utilizados
+
+```css
+/* Dialog */
+--background          /* Fundo do dialog */
+--foreground          /* Texto principal */
+--muted-foreground    /* Texto secundario */
+--border              /* Bordas */
+--ring                /* Focus ring */
+
+/* Overlay */
+--overlay             /* bg-black/80 */
+
+/* Acoes */
+--destructive         /* Botao confirmar (destrutivo) */
+--primary             /* Botao confirmar (default) */
+--secondary           /* Botao cancelar */
+
+/* Espacamento */
+gap-4                 /* Entre elementos */
+p-6                   /* Padding do dialog */
+
+/* Tipografia */
+text-lg               /* Titulo */
+font-semibold         /* Peso titulo */
+text-sm               /* Descricao */
+text-muted-foreground /* Cor descricao */
+
+/* Animacoes */
+duration-200          /* Fade in/out */
+```
+
+### data-slot
+
+```html
+<button data-slot="confirm-button">...</button>
+
+<!-- Dialog interno -->
+<div data-slot="confirm-dialog">
+  <div data-slot="confirm-dialog-header">
+    <h2 data-slot="confirm-dialog-title">...</h2>
+    <p data-slot="confirm-dialog-description">...</p>
+  </div>
+  <div data-slot="confirm-dialog-content">
+    <input data-slot="confirm-dialog-input" />
+  </div>
+  <div data-slot="confirm-dialog-footer">
+    <button data-slot="confirm-dialog-cancel">...</button>
+    <button data-slot="confirm-dialog-confirm">...</button>
+  </div>
+</div>
+```
+
+---
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `variant` | `"default" \| "secondary" \| "destructive" \| "outline" \| "ghost"` | `"default"` | Estilo visual do botao trigger |
+| `size` | `"default" \| "sm" \| "lg" \| "icon"` | `"default"` | Tamanho do botao trigger |
+| `confirmTitle` | `string` | `"Confirm action"` | Titulo do dialog de confirmacao |
+| `confirmDescription` | `string` | - | Descricao/mensagem explicativa |
+| `confirmLabel` | `string` | `"Confirm"` | Texto do botao de confirmacao |
+| `cancelLabel` | `string` | `"Cancel"` | Texto do botao de cancelamento |
+| `confirmVariant` | `"default" \| "destructive"` | `"default"` | Variante do botao confirmar |
+| `requireTyping` | `string` | - | Texto que usuario deve digitar para habilitar confirmacao |
+| `typingPlaceholder` | `string` | - | Placeholder do input de digitacao (default: valor de `requireTyping`) |
+| `typingLabel` | `string` | - | Label acima do input de digitacao |
+| `caseSensitive` | `boolean` | `true` | Se a validacao de digitacao diferencia maiusculas/minusculas |
+| `loading` | `boolean` | `false` | Estado de loading apos confirmacao |
+| `open` | `boolean` | - | Estado controlado do dialog (controlled mode) |
+| `disabled` | `boolean` | `false` | Desabilita o botao |
+| `leftIcon` | `ReactNode` | - | Icone exibido antes do children |
+| `rightIcon` | `ReactNode` | - | Icone exibido apos o children |
+| `className` | `string` | - | Classes CSS adicionais |
+| `children` | `ReactNode` | - | Conteudo do botao trigger |
+
+> Herda props de `button` HTML exceto `onClick`, `onFocus`, `onBlur`, `onKeyDown`
+
+### Callbacks
+
+| Callback | Tipo | Descricao |
+|----------|------|-----------|
+| `onConfirm` | `() => void \| Promise<void>` | Disparado apos usuario confirmar. Suporta async |
+| `onCancel` | `() => void` | Disparado ao cancelar ou fechar dialog |
+| `onOpenChange` | `(open: boolean) => void` | Disparado quando estado do dialog muda |
+
+### TypeScript
+
+```typescript
+import { type VariantProps } from "class-variance-authority"
+import { type buttonVariants } from "../Button/Button"
+import { type ReactNode } from "react"
+
+interface ConfirmButtonProps
+  extends Omit<
+    React.ComponentProps<"button">,
+    "onBlur" | "onClick" | "onFocus" | "onKeyDown"
+  >,
+  VariantProps<typeof buttonVariants> {
+  // Configuracao do Dialog
+  confirmTitle?: string
+  confirmDescription?: string
+  confirmLabel?: string
+  cancelLabel?: string
+  confirmVariant?: "default" | "destructive"
+
+  // Confirmacao por digitacao
+  requireTyping?: string
+  typingPlaceholder?: string
+  typingLabel?: string
+  caseSensitive?: boolean
+
+  // Icons
+  leftIcon?: ReactNode
+  rightIcon?: ReactNode
+
+  // Estados
+  loading?: boolean
+  open?: boolean
+
+  // Callbacks
+  onConfirm: () => void | Promise<void>
+  onCancel?: () => void
+  onOpenChange?: (open: boolean) => void
+}
+
+// Tipos derivados uteis
+type ConfirmButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>
+type ConfirmButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>
+```
+
+### Comparativo com Design Systems de Referencia
+
+#### Matriz de Features - ConfirmButton/Popconfirm (14 Design Systems)
+
+| Feature | ETUS | Shadcn | Radix | React Aria | Chakra | MUI | Mantine | AntD | NextUI | Headless | Ariakit | Fluent | Carbon | Blueprint | PrimeReact |
+|---------|:----:|:------:|:-----:|:----------:|:------:|:---:|:-------:|:----:|:------:|:--------:|:-------:|:------:|:------:|:---------:|:----------:|
+| **Componente dedicado** | * | - | - | - | - | - | - | Popconfirm | - | - | - | Dialog | - | Alert | ConfirmDialog |
+| **Dialog modal** | * | AlertDialog | AlertDialog | AlertDialog | AlertDialog | Dialog | Modal | Modal | Modal | Dialog | Dialog | Dialog | Modal | Alert | ConfirmDialog |
+| **Popover inline** | - | - | - | - | Popover | - | - | Popconfirm | Popover | - | Popover | - | - | Popover | ConfirmPopup |
+| **requireTyping** | * | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **loading state** | * | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Custom icons** | * | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Async onConfirm** | * | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Controlled state** | * | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Variants herdadas** | * | - | - | - | - | - | - | - | - | - | - | - | - | - | - |
+
+**Legenda:** * = Proposto para ETUS | - = Nao disponivel/Composicao manual | Nome = Componente equivalente
+
+#### Comparativo de Abordagens
+
+| Design System | Abordagem | Componente | Notas |
+|---------------|-----------|------------|-------|
+| **Ant Design** | Dedicado | `Popconfirm` | Popover com confirmacao inline, muito usado |
+| **PrimeReact** | Dedicado | `ConfirmDialog` / `ConfirmPopup` | Modal e popover separados |
+| **Blueprint** | Dedicado | `Alert` | Dialog de alerta com acoes |
+| **Shadcn/ui** | Composicao | `AlertDialog` + `Button` | Composicao manual |
+| **Radix UI** | Primitivo | `AlertDialog` | Primitivo acessivel |
+| **Chakra UI** | Composicao | `AlertDialog` | useDisclosure pattern |
+| **MUI** | Composicao | `Dialog` + `DialogActions` | Confirm dialog pattern |
+| **Mantine** | Composicao | `Modal` + `modals.openConfirmModal` | Modal service |
+| **NextUI** | Composicao | `Modal` + `useDisclosure` | Hook pattern |
+| **Fluent UI** | Composicao | `Dialog` | Dialog com footer actions |
+| **Carbon** | Composicao | `Modal` | Danger modal pattern |
+
+#### Analise: Por que um componente dedicado?
+
+**Vantagens do ConfirmButton (abordagem ETUS):**
+1. **DX Superior** - Uma linha de codigo vs composicao de 3+ componentes
+2. **Consistencia** - Padrao unico para confirmacoes em toda aplicacao
+3. **Type Safety** - Props tipadas para caso de uso especifico
+4. **Seguranca** - `requireTyping` previne confirmacoes acidentais
+5. **Loading** - Estado integrado para operacoes async
+
+**Desvantagens da composicao manual:**
+1. Boilerplate repetitivo em cada uso
+2. Inconsistencia de implementacao entre desenvolvedores
+3. Gerenciamento manual de estado open/close
+4. Sem suporte nativo a loading/async
+
+---
+
+## Acessibilidade (A11y)
+
+### ARIA Attributes
+
+| Atributo | Elemento | Uso |
+|----------|----------|-----|
+| `role="alertdialog"` | Dialog | Identifica como dialog de alerta |
+| `aria-modal="true"` | Dialog | Indica modal bloqueante |
+| `aria-labelledby` | Dialog | Referencia ao titulo |
+| `aria-describedby` | Dialog | Referencia a descricao |
+| `aria-disabled` | Confirm button | Quando `requireTyping` nao satisfeito |
+| `aria-busy` | Confirm button | Quando em estado `loading` |
+| `aria-live="polite"` | Error message | Anuncia erros de validacao |
+
+### Suporte a Teclado
+
+| Tecla | Acao |
+|-------|------|
+| `Tab` | Navega entre elementos focaveis |
+| `Shift + Tab` | Navega para tras |
+| `Enter` | Ativa botao focado |
+| `Space` | Ativa botao focado |
+| `Escape` | Fecha dialog (cancela) |
+
+### Focus Management
+
+```tsx
+// Focus trap dentro do dialog
+// Focus inicial no primeiro elemento interativo
+// Retorna focus ao trigger ao fechar
+
+// Focus order sugerido:
+// 1. Input de digitacao (se requireTyping)
+// 2. Botao Cancelar
+// 3. Botao Confirmar
+```
+
+### Contraste de Cores
+
+Todos os elementos seguem WCAG 2.1 AA (minimo 4.5:1):
+
+| Elemento | Foreground | Background | Ratio |
+|----------|------------|------------|-------|
+| Titulo | `--foreground` | `--background` | >= 7:1 |
+| Descricao | `--muted-foreground` | `--background` | >= 4.5:1 |
+| Botao Confirmar (destructive) | `--destructive-foreground` | `--destructive` | >= 4.5:1 |
+| Botao Cancelar | `--secondary-foreground` | `--secondary` | >= 4.5:1 |
+| Input | `--foreground` | `--background` | >= 4.5:1 |
+
+### Screen Readers
+
+- Dialog anunciado como "alertdialog" ao abrir
+- Titulo e descricao lidos automaticamente
+- Estado de loading anunciado via `aria-busy`
+- Erro de validacao (requireTyping) anunciado via `aria-live`
+- Fechamento confirmado via anuncio de acao
+
+### Reduced Motion
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  /* Desabilita animacoes de entrada/saida */
+  [data-slot="confirm-dialog"] {
+    animation: none;
+    transition: opacity 0ms;
+  }
+}
+```
+
+### Comparativo A11y (14 Design Systems)
+
+| Feature | ETUS | React Aria | Radix | Ariakit | Headless | Chakra | MUI | Mantine | AntD | NextUI | Fluent | Carbon | Blueprint | PrimeReact |
+|---------|:----:|:----------:|:-----:|:-------:|:--------:|:------:|:---:|:-------:|:----:|:------:|:------:|:------:|:---------:|:----------:|
+| **role="alertdialog"** | * | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Focus trap** | * | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Focus return** | * | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **aria-modal** | * | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Escape to close** | * | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **aria-busy** | * | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **aria-live errors** | * | - | - | - | - | - | - | - | - | - | - | - | - | - |
+| **Reduced motion** | * | - | - | - | - | - | - | - | - | - | - | - | - | - |
+
+**Nota:** Tabela sera preenchida apos implementacao e testes reais.
+
+---
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { ConfirmButton } from "@etus/ui"
+
+function Example() {
+  const handleDelete = () => {
+    console.log("Item deletado!")
+  }
+
+  return (
+    <ConfirmButton
+      variant="destructive"
+      confirmTitle="Deletar item"
+      confirmDescription="Esta acao nao pode ser desfeita. O item sera permanentemente removido."
+      onConfirm={handleDelete}
+    >
+      Deletar
+    </ConfirmButton>
+  )
+}
+```
+
+### Com Confirmacao por Digitacao
+
+```tsx
+import { ConfirmButton } from "@etus/ui"
+
+function DangerousAction() {
+  const handleDeleteAccount = async () => {
+    await api.deleteAccount()
+  }
+
+  return (
+    <ConfirmButton
+      variant="destructive"
+      confirmTitle="Excluir conta permanentemente"
+      confirmDescription="Todos os seus dados serao apagados. Esta acao e irreversivel."
+      requireTyping="DELETAR MINHA CONTA"
+      typingLabel="Digite 'DELETAR MINHA CONTA' para confirmar:"
+      onConfirm={handleDeleteAccount}
+    >
+      Excluir minha conta
+    </ConfirmButton>
+  )
+}
+```
+
+### Com Loading State (Async)
+
+```tsx
+import { ConfirmButton } from "@etus/ui"
+import { useState } from "react"
+
+function AsyncConfirm() {
+  const [loading, setLoading] = useState(false)
+
+  const handleConfirm = async () => {
+    setLoading(true)
+    try {
+      await api.performCriticalAction()
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <ConfirmButton
+      confirmTitle="Confirmar publicacao"
+      confirmDescription="O artigo sera publicado e visivel para todos os usuarios."
+      confirmLabel="Publicar agora"
+      loading={loading}
+      onConfirm={handleConfirm}
+    >
+      Publicar artigo
+    </ConfirmButton>
+  )
+}
+```
+
+### Variantes
+
+```tsx
+// Acao destrutiva (padrao para delecoes)
+<ConfirmButton
+  variant="destructive"
+  confirmVariant="destructive"
+  confirmTitle="Remover usuario"
+  confirmDescription="O usuario perdera acesso ao sistema."
+  onConfirm={handleRemove}
+>
+  Remover
+</ConfirmButton>
+
+// Acao neutra (confirmacoes gerais)
+<ConfirmButton
+  variant="default"
+  confirmTitle="Enviar notificacao"
+  confirmDescription="Uma notificacao sera enviada para todos os usuarios."
+  onConfirm={handleSend}
+>
+  Enviar para todos
+</ConfirmButton>
+
+// Outline (baixa enfase)
+<ConfirmButton
+  variant="outline"
+  confirmTitle="Arquivar projeto"
+  confirmDescription="O projeto sera movido para a pasta de arquivados."
+  onConfirm={handleArchive}
+>
+  Arquivar
+</ConfirmButton>
+```
+
+### Com Icone
+
+```tsx
+import { Trash2, AlertTriangle } from "lucide-react"
+
+<ConfirmButton
+  variant="destructive"
+  size="sm"
+  confirmTitle="Excluir arquivo"
+  confirmDescription="O arquivo sera movido para a lixeira."
+  onConfirm={handleDelete}
+>
+  <Trash2 className="size-4" />
+  Excluir
+</ConfirmButton>
+```
+
+### Em Tabela de Dados
+
+```tsx
+import { ConfirmButton } from "@etus/ui"
+import { Trash2 } from "lucide-react"
+
+function UserRow({ user, onDelete }) {
+  return (
+    <tr>
+      <td>{user.name}</td>
+      <td>{user.email}</td>
+      <td>
+        <ConfirmButton
+          variant="ghost"
+          size="icon"
+          confirmTitle={`Remover ${user.name}?`}
+          confirmDescription="O usuario perdera acesso imediatamente."
+          confirmVariant="destructive"
+          onConfirm={() => onDelete(user.id)}
+          aria-label={`Remover ${user.name}`}
+        >
+          <Trash2 className="size-4" />
+        </ConfirmButton>
+      </td>
+    </tr>
+  )
+}
+```
+
+### Controlado Externamente
+
+```tsx
+import { ConfirmButton } from "@etus/ui"
+import { useState } from "react"
+
+function ControlledConfirm() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Abrir confirmacao</Button>
+
+      <ConfirmButton
+        open={open}
+        onOpenChange={setOpen}
+        confirmTitle="Confirmacao controlada"
+        confirmDescription="Este dialog e controlado externamente."
+        onConfirm={handleConfirm}
+        onCancel={() => setOpen(false)}
+      >
+        {/* Botao oculto, dialog controlado pelo estado */}
+      </ConfirmButton>
+    </>
+  )
+}
+```
+
+### Bulk Action
+
+```tsx
+import { ConfirmButton } from "@etus/ui"
+
+function BulkDelete({ selectedIds }) {
+  const count = selectedIds.length
+
+  return (
+    <ConfirmButton
+      variant="destructive"
+      disabled={count === 0}
+      confirmTitle={`Excluir ${count} ${count === 1 ? 'item' : 'itens'}?`}
+      confirmDescription={`Voce esta prestes a excluir ${count} ${count === 1 ? 'item selecionado' : 'itens selecionados'}. Esta acao nao pode ser desfeita.`}
+      requireTyping={count > 10 ? "EXCLUIR TUDO" : undefined}
+      onConfirm={() => handleBulkDelete(selectedIds)}
+    >
+      Excluir selecionados ({count})
+    </ConfirmButton>
+  )
+}
+```
+
+---
+
+## Testes
+
+### Testes Unitarios
+
+```tsx
+// ConfirmButton.test.tsx
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+import { ConfirmButton } from "./ConfirmButton"
+
+describe("ConfirmButton", () => {
+  it("renders trigger button correctly", () => {
+    render(
+      <ConfirmButton onConfirm={vi.fn()}>
+        Delete
+      </ConfirmButton>
+    )
+    expect(screen.getByRole("button", { name: "Delete" })).toBeInTheDocument()
+  })
+
+  it("opens dialog on click", async () => {
+    const user = userEvent.setup()
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm deletion"
+        onConfirm={vi.fn()}
+      >
+        Delete
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Delete" }))
+
+    expect(screen.getByRole("alertdialog")).toBeInTheDocument()
+    expect(screen.getByText("Confirm deletion")).toBeInTheDocument()
+  })
+
+  it("applies variant classes to trigger", () => {
+    render(
+      <ConfirmButton variant="destructive" onConfirm={vi.fn()}>
+        Delete
+      </ConfirmButton>
+    )
+    expect(screen.getByRole("button")).toHaveClass("bg-destructive")
+  })
+
+  it("has data-slot attribute", () => {
+    render(<ConfirmButton onConfirm={vi.fn()}>Test</ConfirmButton>)
+    expect(screen.getByRole("button")).toHaveAttribute("data-slot", "confirm-button")
+  })
+})
+```
+
+### Testes de Interacao
+
+```tsx
+describe("ConfirmButton interactions", () => {
+  it("calls onConfirm when confirmed", async () => {
+    const user = userEvent.setup()
+    const handleConfirm = vi.fn()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        confirmLabel="Yes, confirm"
+        onConfirm={handleConfirm}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+    await user.click(screen.getByRole("button", { name: "Yes, confirm" }))
+
+    expect(handleConfirm).toHaveBeenCalledTimes(1)
+  })
+
+  it("calls onCancel when cancelled", async () => {
+    const user = userEvent.setup()
+    const handleCancel = vi.fn()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        cancelLabel="No, cancel"
+        onConfirm={vi.fn()}
+        onCancel={handleCancel}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+    await user.click(screen.getByRole("button", { name: "No, cancel" }))
+
+    expect(handleCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it("closes dialog on Escape", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton confirmTitle="Confirm?" onConfirm={vi.fn()}>
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+    expect(screen.getByRole("alertdialog")).toBeInTheDocument()
+
+    await user.keyboard("{Escape}")
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument()
+  })
+
+  it("does not open dialog when disabled", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        disabled
+        confirmTitle="Confirm?"
+        onConfirm={vi.fn()}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+    expect(screen.queryByRole("alertdialog")).not.toBeInTheDocument()
+  })
+})
+```
+
+### Testes de requireTyping
+
+```tsx
+describe("ConfirmButton requireTyping", () => {
+  it("disables confirm button until text matches", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Delete account?"
+        requireTyping="DELETE"
+        onConfirm={vi.fn()}
+      >
+        Delete
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Delete" }))
+
+    const confirmBtn = screen.getByRole("button", { name: /confirmar/i })
+    expect(confirmBtn).toBeDisabled()
+
+    const input = screen.getByRole("textbox")
+    await user.type(input, "DELETE")
+
+    expect(confirmBtn).toBeEnabled()
+  })
+
+  it("is case sensitive by default", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        requireTyping="DELETE"
+        onConfirm={vi.fn()}
+      >
+        Delete
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Delete" }))
+
+    const input = screen.getByRole("textbox")
+    await user.type(input, "delete")
+
+    expect(screen.getByRole("button", { name: /confirmar/i })).toBeDisabled()
+  })
+
+  it("respects caseSensitive=false", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        requireTyping="DELETE"
+        caseSensitive={false}
+        onConfirm={vi.fn()}
+      >
+        Delete
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Delete" }))
+
+    const input = screen.getByRole("textbox")
+    await user.type(input, "delete")
+
+    expect(screen.getByRole("button", { name: /confirmar/i })).toBeEnabled()
+  })
+})
+```
+
+### Testes de Loading State
+
+```tsx
+describe("ConfirmButton loading", () => {
+  it("shows loading state on confirm button", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        loading={true}
+        onConfirm={vi.fn()}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+
+    const confirmBtn = screen.getByRole("button", { name: /confirmar/i })
+    expect(confirmBtn).toHaveAttribute("aria-busy", "true")
+    expect(confirmBtn).toBeDisabled()
+  })
+
+  it("handles async onConfirm", async () => {
+    const user = userEvent.setup()
+    const handleConfirm = vi.fn().mockImplementation(
+      () => new Promise(resolve => setTimeout(resolve, 100))
+    )
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        onConfirm={handleConfirm}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+    await user.click(screen.getByRole("button", { name: /confirmar/i }))
+
+    expect(handleConfirm).toHaveBeenCalled()
+  })
+})
+```
+
+### Testes de Acessibilidade
+
+```tsx
+import { axe, toHaveNoViolations } from "jest-axe"
+
+expect.extend(toHaveNoViolations)
+
+describe("ConfirmButton accessibility", () => {
+  it("has no accessibility violations (closed)", async () => {
+    const { container } = render(
+      <ConfirmButton onConfirm={vi.fn()}>Delete</ConfirmButton>
+    )
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("has no accessibility violations (open)", async () => {
+    const user = userEvent.setup()
+    const { container } = render(
+      <ConfirmButton
+        confirmTitle="Delete item?"
+        confirmDescription="This cannot be undone."
+        onConfirm={vi.fn()}
+      >
+        Delete
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Delete" }))
+
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+  })
+
+  it("dialog has correct ARIA attributes", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Delete item?"
+        confirmDescription="This cannot be undone."
+        onConfirm={vi.fn()}
+      >
+        Delete
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Delete" }))
+
+    const dialog = screen.getByRole("alertdialog")
+    expect(dialog).toHaveAttribute("aria-modal", "true")
+    expect(dialog).toHaveAttribute("aria-labelledby")
+    expect(dialog).toHaveAttribute("aria-describedby")
+  })
+
+  it("traps focus within dialog", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        onConfirm={vi.fn()}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+
+    // Tab through focusable elements
+    await user.tab()
+    expect(screen.getByRole("button", { name: /cancelar/i })).toHaveFocus()
+
+    await user.tab()
+    expect(screen.getByRole("button", { name: /confirmar/i })).toHaveFocus()
+
+    // Should cycle back
+    await user.tab()
+    expect(screen.getByRole("button", { name: /cancelar/i })).toHaveFocus()
+  })
+
+  it("returns focus to trigger on close", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        onConfirm={vi.fn()}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    const trigger = screen.getByRole("button", { name: "Action" })
+    await user.click(trigger)
+    await user.keyboard("{Escape}")
+
+    expect(trigger).toHaveFocus()
+  })
+})
+```
+
+### Cenarios Criticos
+
+```tsx
+describe("ConfirmButton edge cases", () => {
+  it("prevents double confirmation", async () => {
+    const user = userEvent.setup()
+    const handleConfirm = vi.fn()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        onConfirm={handleConfirm}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+
+    const confirmBtn = screen.getByRole("button", { name: /confirmar/i })
+    await user.dblClick(confirmBtn)
+
+    expect(handleConfirm).toHaveBeenCalledTimes(1)
+  })
+
+  it("resets requireTyping input on reopen", async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        requireTyping="DELETE"
+        onConfirm={vi.fn()}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    // Open and type
+    await user.click(screen.getByRole("button", { name: "Action" }))
+    await user.type(screen.getByRole("textbox"), "DEL")
+
+    // Close
+    await user.keyboard("{Escape}")
+
+    // Reopen
+    await user.click(screen.getByRole("button", { name: "Action" }))
+
+    expect(screen.getByRole("textbox")).toHaveValue("")
+  })
+
+  it("handles async error gracefully", async () => {
+    const user = userEvent.setup()
+    const handleConfirm = vi.fn().mockRejectedValue(new Error("Failed"))
+
+    render(
+      <ConfirmButton
+        confirmTitle="Confirm?"
+        onConfirm={handleConfirm}
+      >
+        Action
+      </ConfirmButton>
+    )
+
+    await user.click(screen.getByRole("button", { name: "Action" }))
+    await user.click(screen.getByRole("button", { name: /confirmar/i }))
+
+    // Dialog should remain open on error
+    expect(screen.getByRole("alertdialog")).toBeInTheDocument()
+  })
+})
+```
+
+---
+
+## Referências
+
+### Design Systems Analisados
+
+| Design System | Componente Equivalente | Documentacao |
+|---------------|------------------------|--------------|
+| **Shadcn/ui** | AlertDialog (composicao) | [AlertDialog](https://ui.shadcn.com/docs/components/alert-dialog) |
+| **Radix UI** | AlertDialog | [AlertDialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog) |
+| **React Aria** | AlertDialog | [AlertDialog](https://react-spectrum.adobe.com/react-aria/AlertDialog.html) |
+| **Chakra UI** | AlertDialog | [AlertDialog](https://chakra-ui.com/docs/components/alert-dialog) |
+| **MUI** | Dialog | [Dialog](https://mui.com/material-ui/react-dialog/) |
+| **Mantine** | modals.openConfirmModal | [Modals Manager](https://mantine.dev/others/modals/) |
+| **Ant Design** | Popconfirm / Modal.confirm | [Popconfirm](https://ant.design/components/popconfirm) |
+| **NextUI** | Modal + useDisclosure | [Modal](https://nextui.org/docs/components/modal) |
+| **Headless UI** | Dialog | [Dialog](https://headlessui.com/react/dialog) |
+| **Ariakit** | Dialog | [Dialog](https://ariakit.org/components/dialog) |
+| **Fluent UI** | Dialog | [Dialog](https://react.fluentui.dev/?path=/docs/components-dialog--default) |
+| **Carbon** | Modal | [Modal](https://carbondesignsystem.com/components/modal/usage/) |
+| **Blueprint** | Alert | [Alert](https://blueprintjs.com/docs/#core/components/alert) |
+| **PrimeReact** | ConfirmDialog / ConfirmPopup | [ConfirmDialog](https://primereact.org/confirmdialog/) |
+
+### Especificacoes e Padroes
+
+- [WAI-ARIA APG - AlertDialog Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)
+- [WAI-ARIA APG - Dialog Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)
+- [WCAG 2.1 - Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)
+- [WCAG 2.1 - Focus Order](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)
+
+### Ferramentas
+
+- [Radix AlertDialog](https://www.radix-ui.com/primitives/docs/components/alert-dialog)
+- [CVA - Class Variance Authority](https://cva.style/docs)
+- [Tailwind CSS](https://tailwindcss.com/docs)
+
+---
+
+## Roadmap / Features Futuras
+
+### Decisoes de Design (Resolvidas)
+
+1. **Popover vs Dialog** - Implementado apenas Dialog (AlertDialog do Radix)
+2. **Portal** - AlertDialog do Radix ja usa portal automaticamente
+3. **Animation** - Animacoes herdadas do AlertDialog (respeitando reduced-motion)
+
+### Features Futuras
+
+1. **Mobile** - Considerar comportamento fullscreen em telas pequenas
+2. **Popover mode** - Opcional: adicionar modo popover (como AntD Popconfirm)
+
+### Checklist de Implementacao
+
+- [x] Criar componente base estendendo Button
+- [x] Integrar com AlertDialog do Radix
+- [x] Implementar requireTyping validation
+- [x] Adicionar loading state
+- [x] Implementar focus management (via AlertDialog)
+- [x] Adicionar animacoes (via AlertDialog, respeitando reduced-motion)
+- [x] Escrever testes unitarios
+- [x] Documentar props com JSDoc
+- [x] Exportar do index.ts
+- [x] Suporte a modo controlado (open/onOpenChange)
+- [x] Prevencao de dupla confirmacao
+- [x] Dialog permanece aberto em caso de erro async
+- [ ] Adicionar exemplos na showcase