# AlertDialog

## Overview

Accessible modal dialog for critical confirmations. Built on Radix Alert Dialog primitives with composable subcomponents and focus management.

---

## Props

### AlertDialog (Root)

| Prop           | Type                      | Default     | Description                       |
| -------------- | ------------------------- | ----------- | --------------------------------- |
| `open`         | `boolean`                 | `undefined` | Controlled open state.            |
| `defaultOpen`  | `boolean`                 | `false`     | Uncontrolled initial open state.  |
| `onOpenChange` | `(open: boolean) => void` | `undefined` | Callback when open state changes. |

### Subcomponents

- `AlertDialogTrigger`: Element that opens the dialog (can be `asChild`).
- `AlertDialogContent`: The dialog content container.
- `AlertDialogHeader` / `AlertDialogFooter`: Layout sections for content and actions.
- `AlertDialogTitle` / `AlertDialogDescription`: Title and supporting description.
- `AlertDialogAction`: Primary action button.
- `AlertDialogCancel`: Secondary cancel button.
- `AlertDialogPortal`, `AlertDialogOverlay`: Portal and overlay elements.

---

## Behavior

- **Focus management**: Traps focus within the dialog, returns focus on close.
- **Accessibility**: Proper ARIA roles and keyboard interactions (Esc to close).
- **Composability**: Use any button (e.g., `Button`) with `AlertDialogTrigger asChild`.

---

## Examples

### Basic

```tsx
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "laif-ds";
import { Button } from "laif-ds";

export function BasicAlertDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Show Alert Dialog</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```

### Controlled

```tsx
import { useState } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "laif-ds";
import { Button } from "laif-ds";

export function ControlledAlertDialog() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open dialog</Button>
      <AlertDialog open={open} onOpenChange={setOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Confirm action</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to proceed?
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel onClick={() => setOpen(false)}>
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction onClick={() => setOpen(false)}>
              Confirm
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}
```

---

## Notes

- **Styling**: `AlertDialogContent` is centered and responsive; customize with `className`.
- **Overlay**: `AlertDialogOverlay` provides a backdrop with fade animations.
- **Buttons**: `AlertDialogAction` uses default button styles; pass `className` to adjust.