Modal

1'use client';
2 
3import * as DialogPrimitive from '@radix-ui/react-dialog';
4import { X } from 'lucide-react';
5import { ComponentProps } from 'react';
6 
7import { Body2, Headline5, Label2 } from '@/components/ui/typography';
8import { cn } from '@/lib/utils';
9 
10/*
11 * UX4G modal: border-radius 0.5rem, padding 1rem, border 1px solid rgba(0,0,0,0.175),
12 * NO header border-bottom, NO footer border-top,
13 * sizes: sm=300px, default=500px, lg=800px, xl=1140px,
14 * animation: translate(0,-50px) -> none, 0.3s ease-out
15 */
16 
17/** Modal dialog root component. */
18function Modal(props: ComponentProps<typeof DialogPrimitive.Root>) {
19  return <DialogPrimitive.Root {...props} />;
20}
21 
22/** Modal trigger button. */
23function ModalTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {
24  return <DialogPrimitive.Trigger {...props} />;
25}
26 
27/** Modal close button. */
28function ModalClose(props: ComponentProps<typeof DialogPrimitive.Close>) {
29  return <DialogPrimitive.Close {...props} />;
30}
31 
32/** Modal portal container. */
33function ModalPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {
34  return <DialogPrimitive.Portal {...props} />;
35}
36 
37/** Semi-transparent backdrop overlay for modals. */
38function ModalOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>) {
39  return (
40    <DialogPrimitive.Overlay
41      className={cn(
42        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
43        className,
44      )}
45      {...props}
46    />
47  );
48}
49 
50interface IModalContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
51  size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
52  scrollable?: boolean;
53}
54 
55/**
56 * Main modal content container.
57 * Matches the UX4G 2.0 Modal specification.
58 *
59 * Sizes match UX4G: sm=300px, md=500px, lg=800px, xl=1140px, fullscreen=100%.
60 * UX4G removes borders between header/body/footer sections.
61 */
62function ModalContent({
63  className,
64  size = 'md',
65  scrollable = false,
66  children,
67  ...props
68}: IModalContentProps) {
69  const sizeClasses = {
70    sm: 'max-w-[300px]',
71    md: 'max-w-[500px]',
72    lg: 'max-w-[800px]',
73    xl: 'max-w-[1140px]',
74    fullscreen: 'max-w-none h-full w-full rounded-none',
75  };
76 
77  return (
78    <ModalPortal>
79      <ModalOverlay />
80      <DialogPrimitive.Content
81        className={cn(
82// … truncated