`AlertDialog` is a global dialog system for displaying alerts, confirmations, and custom dialogs.

Features:

- Global access via hooks - no need to manage dialog state - Promise-based API with async/await support - Queue system for multiple dialogs - Built-in confirm, alert, and custom dialog types - Keyboard navigation (ESC to close, Enter to confirm) - Customizable styling and buttons

API methods:

- `confirm(config)` - Confirmation dialog, returns `Promise<boolean>` - `alert(config)` - Alert dialog, returns `Promise<void>` - `show(config)` - Custom dialog, returns `Promise<string>` (button value)

AlertDialogProvider is a global provider for AlertDialog. It should be wrapped around your app.

```tsx import { AlertDialogProvider } from "@choice-ui/alert-dialog" function App() { return ( <AlertDialogProvider> <YourApp /> </AlertDialogProvider> ) } ```

useAlertDialog is a hook that provides the AlertDialog context. It should be used within the AlertDialogProvider.

```tsx import { useAlertDialog } from "@choice-ui/alert-dialog" function YourComponent() { const { confirm, alert, show } = useAlertDialog() const handleConfirm = async () => { const confirmed = await confirm({ title: "Confirm Delete", description: "This action cannot be undone. Are you sure you want to delete this item?", }) } } ```

Basic Usage: Demonstrates `confirm` and `alert` dialog types.

- `confirm` returns boolean for user confirmation actions - `alert` returns void for informational messages

Size: Demonstrates three dialog sizes - small, default, large

Variants: Demonstrates four visual variants - default, danger, success, warning

Custom Dialog: Uses `show` method to create dialogs with multiple custom buttons. Returns the clicked button's `value`.

With Content: Uses `content` prop to render complex React content.

Queue System: Multiple dialogs are automatically queued and displayed in sequence.

Provider Options: Demonstrates provider-level configurations.

- `overlay`: Shows dark background overlay (default: false) - `outsidePress`: Allows clicking outside to close (default: true, this demo shows disabled)

Escape Key Disabled: Demonstrates disabling ESC key to close dialog. Set `closeOnEscape: false` in dialog config to prevent ESC key from closing the dialog.

Z-Index Layering: AlertDialog correctly appears above Dialog components.