Alert Dialog

1/** @jsxImportSource hono/jsx */
2import type { Child, PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// AlertDialog — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// shadcn source of truth: repos/shadcn-ui/apps/v4/registry/new-york-v4/ui/
8// alert-dialog.tsx (Radix AlertDialog). We mirror its anatomy
9// (Trigger / Content / Header / Title / Description / Footer / Action /
10// Cancel) but ship a native HTML <dialog> instead of a Radix portal.
11//
12// APG pattern: repos/aria-practices/content/patterns/alertdialog/
13// alertdialog-pattern.html. An alert dialog is a *modal* dialog that
14// interrupts the workflow to acquire a response, so APG requires:
15//   - role="alertdialog"        (announced with higher urgency than dialog)
16//   - aria-modal="true"         (set automatically by .showModal())
17//   - aria-labelledby -> title  (visible label)
18//   - aria-describedby -> body  (the alert message — REQUIRED, unlike dialog)
19// See alertdialog-pattern.html:44-61.
20//
21// Why native <dialog> + showModal():
22//   - Focus trap, ESC-to-close, focus restoration, the inert backdrop and
23//     aria-modal all come from the platform — no JS focus management.
24//     (repos/mdn/files/en-us/web/api/htmldialogelement/showmodal/.)
25//
26// HOW IT DIFFERS FROM Dialog (registry/ui/dialog.tsx):
27//   - NOT light-dismissible. A modal opened with showModal() defaults to
28//     closedby="closerequest" (ESC + code only, NO backdrop click) per the
29//     HTML Living Standard — repos/mdn/files/en-us/web/html/reference/
30//     elements/dialog/index.md:33-35. We pin closedby="closerequest" to make
31//     that explicit and we do NOT emit the data-close-on-backdrop hook that
32//     site.js uses for Dialog, so a click on the backdrop never dismisses.
33//   - No X close button: APG requires an explicit Cancel / Confirm response.
34//   - Reuses Dialog's open/close wiring in public/site.js
35//     (data-dialog-trigger / data-dialog-close).
36//
37// Composition mirrors shadcn's React API:
38//   <AlertDialogTrigger dialogFor="confirm">
39//     <Button variant="destructive">Delete</Button>
40//   </AlertDialogTrigger>
41//
42//   <AlertDialog id="confirm">
43//     <AlertDialogHeader>
44//       <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
45//       <AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
46//     </AlertDialogHeader>
47//     <AlertDialogFooter>
48//       <AlertDialogCancel><Button variant="outline">Cancel</Button></AlertDialogCancel>
49// … truncated