<!-- source-hash: 6146e5c92352e7744ffcf239f861beb3 -->
Accessible alert dialog component built on Radix UI's `AlertDialogPrimitive`, providing a modal confirmation pattern with animated overlay, centered content panel, and styled action/cancel buttons using Tailwind CSS.

## Key Components

| Export | Description |
|--------|-------------|
| `AlertDialog` | Root component (Radix `Root`) managing open/close state |
| `AlertDialogTrigger` | Element that opens the dialog |
| `AlertDialogPortal` | Renders dialog outside the DOM hierarchy |
| `AlertDialogOverlay` | Fixed dark backdrop with fade animations |
| `AlertDialogContent` | Centered modal panel with zoom/slide entrance animations |
| `AlertDialogHeader` | Layout wrapper for title and description |
| `AlertDialogFooter` | Responsive action button row (stacked on mobile, inline on md+) |
| `AlertDialogTitle` | Semibold heading (`text-lg font-semibold`) |
| `AlertDialogDescription` | Muted body text (`text-sm text-muted-foreground`) |
| `AlertDialogAction` | Confirm button styled with default `buttonVariants()` |
| `AlertDialogCancel` | Dismiss button styled with `buttonVariants({ variant: "outline" })` |

## Usage Example

```typescript
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from "@/components/ui/alert-dialog"

export function DeleteConfirmDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger>Delete Device</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This will permanently remove the device from your fleet.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onClick={() => handleDelete()}>
            Confirm
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

> **Accessibility:** Inherits full Radix UI ARIA semantics — focus is trapped within the dialog when open, and keyboard (`Escape`) dismissal is handled automatically.