Modal Glass

1/* eslint-disable react-refresh/only-export-components */
2/**
3 * ModalGlass Component (Radix UI Dialog-based)
4 *
5 * Glass-themed modal/dialog with full shadcn/ui Dialog API compatibility.
6 * Built on @radix-ui/react-dialog for accessibility and state management.
7 *
8 * @example Uncontrolled with Trigger (shadcn/ui pattern)
9 * ```tsx
10 * <ModalGlass.Root>
11 *   <ModalGlass.Trigger asChild>
12 *     <ButtonGlass>Open Dialog</ButtonGlass>
13 *   </ModalGlass.Trigger>
14 *   <ModalGlass.Content>
15 *     <ModalGlass.Header>
16 *       <ModalGlass.Title>Dialog Title</ModalGlass.Title>
17 *       <ModalGlass.Description>Dialog description</ModalGlass.Description>
18 *     </ModalGlass.Header>
19 *     <ModalGlass.Body>Content here</ModalGlass.Body>
20 *     <ModalGlass.Footer>
21 *       <ModalGlass.Close asChild>
22 *         <ButtonGlass variant="ghost">Cancel</ButtonGlass>
23 *       </ModalGlass.Close>
24 *       <ButtonGlass>Confirm</ButtonGlass>
25 *     </ModalGlass.Footer>
26 *   </ModalGlass.Content>
27 * </ModalGlass.Root>
28 * ```
29 *
30 * @example Controlled mode (programmatic)
31 * ```tsx
32 * <ModalGlass.Root open={open} onOpenChange={setOpen}>
33 *   <ModalGlass.Content>
34 *     <ModalGlass.Header>
35 *       <ModalGlass.Title>Confirm Action</ModalGlass.Title>
36 *     </ModalGlass.Header>
37 *     <ModalGlass.Body>Are you sure?</ModalGlass.Body>
38 *     <ModalGlass.Footer>
39 *       <ButtonGlass onClick={() => setOpen(false)}>Cancel</ButtonGlass>
40 *     </ModalGlass.Footer>
41 *   </ModalGlass.Content>
42 * </ModalGlass.Root>
43 * ```
44 *
45 * @accessibility
46 * - Built on Radix UI Dialog with full WCAG 2.1 AA compliance
47 * - Keyboard: Escape to close, Tab for focus trap
48 * - Screen Readers: role="dialog", aria-modal, aria-labelledby, aria-describedby
49 * - Focus Management: Auto-focus on open, return focus on close
50 *
51 * @since v2.0.0 - Migrated to Radix UI Dialog, added Trigger and Portal
52 */
53 
54import * as React from 'react';
55import * as DialogPrimitive from '@radix-ui/react-dialog';
56import { X } from 'lucide-react';
57import { cn } from '@/lib/utils';
58import { modalSizes, type ModalSize } from '@/lib/variants/modal-glass-variants';
59import { ICON_SIZES } from '@/components/glass/primitives';
60import '@/glass-theme.css';
61 
62// ========================================
63// CONTEXT FOR SIZE (optional enhancement)
64// ========================================
65 
66interface ModalContextValue {
67  size: ModalSize;
68}
69 
70const ModalContext = React.createContext<ModalContextValue>({ size: 'sm' });
71 
72// … truncated