Alert Dialog

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/alert-dialog v1.1.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/alert-dialog
7// What changed since: https://ds.interlace.tools/c/alert-dialog#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — AlertDialog
12 *
13 * A modal confirmation dialog for *destructive or otherwise consequential*
14 * actions ("Delete project", "Sign out everywhere"). Distinct from `Dialog`:
15 * the underlying Base UI primitive disables outside-click and Escape-only
16 * dismissal so the user MUST acknowledge with a deliberate Cancel/Confirm
17 * action (WAI-ARIA `alertdialog` pattern). All keyboard / focus / ARIA come
18 * from `@base-ui/react/alert-dialog`; this file is a pure styled surface.
19 *
20 * ## Anatomy
21 *
22 *   AlertDialog (Root, controlled or uncontrolled)
23 *     ├─ AlertDialogTrigger (the originating button)
24 *     └─ AlertDialogPortal (escape stacking context)
25 *         ├─ AlertDialogBackdrop (fixed scrim — bg-foreground/60)
26 *         └─ AlertDialogPopup (centered card — data-min-viewport root)
27 *             ├─ AlertDialogTitle ("Delete project?")
28 *             ├─ AlertDialogDescription ("This cannot be undone.")
29 *             └─ AlertDialogClose (Cancel + Confirm slots — consumer-composed)
30 *
31 * ## MIN_VIEWPORT — 320
32 *
33 * A destructive confirmation must work on the narrowest supported phone
34 * (iPhone SE, 320 CSS px). The popup is capped at `--container-prose`
35 * (65ch) and centered with `inset-0` + flex — it gracefully shrinks below
36 * its max-width on small viewports, so the 320-floor is structurally safe.
37 *
38 * | Rule | Concept                          | Where in this file                                            |
39 * | ---- | -------------------------------- | ------------------------------------------------------------- |
40 * | R4   | Extends Base UI part props       | `React.ComponentProps<typeof BaseAlertDialog.*>` on every part |
41 * | R6   | data-slot on every named part    | `data-slot="alert-dialog"` / `"alert-dialog-trigger"` / `…-portal"` / `…-backdrop"` / `…-popup"` / `…-title"` / `…-description"` / `…-close"` |
42 * | R7   | className merged + ...rest       | `cn(BASE, className)` + `{...props}` spread on every part      |
43 * | R8   | No `isXxx` prefix on booleans    | All booleans inherited from Base UI use the no-`is` form       |
44// … truncated