Dialog

1'use client';
2 
3import * as React from 'react';
4 
5// @interlace/dialog v1.4.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/dialog
7// What changed since: https://ds.interlace.tools/c/dialog#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — Dialog (gold-standard reference for the interlace-component skill)
12 *
13 * A MODAL dialog: it traps focus, dismisses on Escape and on an outside click,
14 * marks the rest of the page inert while open, and restores focus to the
15 * trigger on close. Base UI owns all of that, which is exactly why this file
16 * never says so anywhere else — and why a reader searching for "modal I can
17 * close with escape" could not find it. Behaviour a consumer relies on has to
18 * be written down in the file they install, not left implicit in a dependency.
19 *
20 * This file is the canonical example of the portable component-modeling floor.
21 * Every rule R1–R26 from `skills/interlace-component/SKILL.md` that is applicable
22 * to a Dialog primitive is illustrated here.
23 *
24 * | Rule | Concept                          | Where in this file                                            |
25 * | ---- | -------------------------------- | ------------------------------------------------------------- |
26 * | R4   | Extends native el + JSDoc        | `React.ComponentProps<typeof BaseDialog.*>` on every export   |
27 * | R5   | data-testid type-required        | Inherited via consumer-supplied `data-testid` on `...props`   |
28 * | R6   | data-slot on every named part    | `data-slot="dialog"` / `"dialog-trigger"` / `"dialog-portal"` / `"dialog-close"` / `"dialog-overlay"` / `"dialog-popup"` |
29 * | R7   | className merged + ...rest + ref | `cn(...)` merged className; `{...props}` spread to root       |
30 * | R8   | No `isXxx` prefix on booleans    | All boolean props inherited from Base UI use the no-`is` form |
31 * | R11  | Composition over prop-drilling   | DialogContent / DialogHeader / DialogFooter / DialogTitle / DialogDescription compound parts |
32 * | R12  | Reuse primitives — don't wrap    | XIcon from lucide-react is slotted, not wrapped in a `DialogCloseIcon` |
33 * | R13  | Build with the ecosystem         | `@base-ui/react/dialog` provides keyboard / focus / portal / ARIA |
34 * | R14  | Controlled + uncontrolled        | Inherited from `BaseDialog.Root` — `open` + `onOpenChange` + `defaultOpen` |
35// … truncated