Dialog

1/** @jsxImportSource hono/jsx */
2import type { Child, PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Dialog — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// We use the native HTML <dialog> element + .showModal() so the platform
8// gives us:
9//   - Focus trap                       (no JS focus management required)
10//   - ESC to close                     (browser default)
11//   - aria-modal / role=dialog         (set by showModal())
12//   - Focus restoration to the opener  (browser default)
13//   - ::backdrop pseudo-element        (we colour it via CSS in input.css)
14//
15// We add on top:
16//   - shadcn box styles (rounded border, shadow, centered).
17//   - DialogTrigger / DialogClose data attributes wired up in public/site.js.
18//   - Click-on-backdrop closes (also in site.js).
19//
20// Composition mirrors shadcn's React API:
21//   <Dialog id="my-dialog">
22//     <DialogHeader>
23//       <DialogTitle>...</DialogTitle>
24//       <DialogDescription>...</DialogDescription>
25//     </DialogHeader>
26//     <DialogBody>...form fields...</DialogBody>
27//     <DialogFooter>
28//       <DialogClose><Button variant="outline">Cancel</Button></DialogClose>
29//       <Button>Save</Button>
30//     </DialogFooter>
31//   </Dialog>
32//
33//   <DialogTrigger dialogFor="my-dialog">Open</DialogTrigger>
34 
35const dialogBase =
36  "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 m-0 w-[calc(100%-2rem)] max-w-lg " +
37  "grid gap-4 rounded-lg border bg-background p-6 text-foreground shadow-lg outline-none " +
38  // Native <dialog> sits at the top layer; hide it when not open so layout
39  // doesn't shift.
40  "hidden open:grid " +
41  // ::backdrop styling.
42  "backdrop:bg-black/60 backdrop:backdrop-blur-sm"
43 
44export function dialogClasses(opts?: { class?: ClassValue }): string {
45  return cn(dialogBase, opts?.class)
46}
47 
48type DialogProps = PropsWithChildren<{
49  id: string
50  // Set to false to disable the click-on-backdrop-closes behaviour. The
51  // browser-native `closedby` attribute (below) is a stronger signal — if
52  // you set it to "any" the browser handles backdrop dismissal natively.
53  closeOnBackdrop?: boolean
54  // Pre-open the dialog on initial render (useful for htmx swaps that return
55  // an already-open dialog).
56  open?: boolean
57  // Native `closedby` attribute (HTML Living Standard / WHATWG). Controls
58  // how the user can dismiss the dialog:
59  //   - "any"          — ESC, light dismiss (backdrop click), and code
60// … truncated