// @design-system: overlays/Dialog // Registered at /design-system#dialog-overlay - Phase 3 (Agent 3E) will render the gallery. import * as RadixDialog from '@radix-ui/react-dialog'; import { X } from 'lucide-react'; import { useEffect, type ReactNode } from 'react'; import { cn } from '@/lib/cn'; import { useT } from '@/lib/i18n/react'; // ─── Root + Trigger ──────────────────────────────────────────────────────── /** Root dialog controller. */ export const Dialog = RadixDialog.Root; /** Trigger element for opening the dialog. */ export const DialogTrigger = RadixDialog.Trigger; /** Portal wrapper (internal use — not exported). */ const DialogPortal = RadixDialog.Portal; // ─── Overlay ────────────────────────────────────────────────────────────── /** Props for DialogOverlay (internal use — not exported). */ type DialogOverlayProps = React.ComponentPropsWithoutRef; /** Semi-transparent backdrop (internal use — not exported). */ function DialogOverlay({ className, ...props }: DialogOverlayProps) { return ( ); } // ─── Content ────────────────────────────────────────────────────────────── /** Props for DialogContent */ export type DialogContentProps = React.ComponentPropsWithoutRef; /** * Locks the document scroll while mounted. * * IMPORTANT: render this INSIDE RadixDialog.Content's children, NOT outside it. * Radix's Presence gate wraps RadixDialog.Content — children only mount when the * dialog is actually open. Placing this outside (e.g. directly in DialogContent * before the Portal) causes useEffect to fire even when Dialog open={false}, * locking the page scroll on mount. * * Why custom lock: Radix's react-remove-scroll targets , but this app * scrolls on (body has min-height:100dvh + overflow-x:clip). */ function ScrollLock() { useEffect(() => { const html = document.documentElement; const body = document.body; const prevHtmlOverflow = html.style.overflow; const prevBodyOverflow = body.style.overflow; html.style.overflow = 'hidden'; body.style.overflow = 'hidden'; return () => { html.style.overflow = prevHtmlOverflow; body.style.overflow = prevBodyOverflow; }; }, []); return null; } /** * The main dialog panel. Includes overlay, scroll lock, and a built-in close * button. Aria-labelledby is wired to `DialogTitle` by Radix automatically. */ export function DialogContent({ className, children, ...props }: DialogContentProps) { const t = useT('common'); return ( {children} ); } // ─── Sub-components ──────────────────────────────────────────────────────── /** Props for DialogHeader */ export type DialogHeaderProps = React.HTMLAttributes; /** Header section of a dialog - wraps title + description. */ export function DialogHeader({ className, ...props }: DialogHeaderProps) { return

; } /** Props for DialogFooter */ export type DialogFooterProps = React.HTMLAttributes; /** Footer section of a dialog - for action buttons. */ export function DialogFooter({ className, ...props }: DialogFooterProps) { return

; } /** Props for DialogTitle */ export type DialogTitleProps = React.ComponentPropsWithoutRef; /** * Dialog title - required for accessibility (aria-labelledby). * Radix wires this automatically to the dialog's aria-labelledby. */ export function DialogTitle({ className, ...props }: DialogTitleProps) { return ( ); } /** Props for DialogDescription */ export type DialogDescriptionProps = React.ComponentPropsWithoutRef; /** Dialog description - optional, wired to aria-describedby by Radix. */ export function DialogDescription({ className, ...props }: DialogDescriptionProps) { return ( ); } /** Props for DialogClose */ export interface DialogCloseProps extends React.ComponentPropsWithoutRef { children?: ReactNode; } /** * Close button/element for the dialog. * For a standalone ✕ icon button, wrap with an accessible `