@nationaldesignstudio/react 0.5.4 → 0.5.6

package/src/components/molecules/dialog/dialog.tsx

@@ -0,0 +1,526 @@
+"use client";
+
+import { Dialog as BaseDialog } from "@base-ui-components/react/dialog";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { cn } from "@/lib/utils";
+
+/**
+ * Dialog backdrop variants
+ *
+ * Semi-transparent overlay behind the dialog content.
+ */
+const dialogBackdropVariants = tv({
+	base: [
+		// Fixed positioning to cover viewport
+		"fixed inset-0",
+		// Semi-transparent black background using alpha token
+		"bg-alpha-black-50",
+		// Smooth opacity transition
+		"transition-opacity duration-200",
+		// Animation states
+		"data-[starting-style]:opacity-0",
+		"data-[ending-style]:opacity-0",
+		// Ensure backdrop covers full viewport on iOS
+		"min-h-dvh",
+	],
+});
+
+/**
+ * Dialog popup variants
+ *
+ * Uses semantic overlay tokens for themeable styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - color.overlay.text - Primary text
+ * - surface.overlay.radius - Rounded corners
+ */
+const dialogPopupVariants = tv({
+	base: [
+		// Fixed positioning, centered
+		"fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+		// Layout
+		"flex flex-col",
+		// Max dimensions with viewport margin (24px on each side = 48px total)
+		"max-h-[calc(100vh-48px)] max-w-[calc(100vw-48px)]",
+		// Ensure above backdrop
+		"z-50",
+		// Animation
+		"transition-all duration-200",
+		"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+		"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+		// Focus outline
+		"outline-none",
+	],
+	variants: {
+		size: {
+			sm: "w-full sm:max-w-[400px]",
+			md: "w-full sm:max-w-[560px]",
+			lg: "w-full sm:max-w-[720px]",
+			xl: "w-full sm:max-w-[960px]",
+			full: "w-[calc(100vw-48px)] h-[calc(100vh-48px)]",
+		},
+		variant: {
+			default: [
+				// Background - uses overlay background token
+				"bg-overlay-background",
+				// Border - uses overlay border token
+				"border border-overlay-border",
+				// Text - uses overlay text token
+				"text-overlay-text",
+				// Border radius - uses surface overlay token
+				"rounded-surface-overlay",
+				// Shadow for elevation
+				"shadow-xl",
+			],
+			minimal: [
+				// Transparent background, no border/shadow
+				"bg-black",
+				"border-0",
+				"text-white",
+				"rounded-8",
+				"shadow-none",
+				"overflow-hidden",
+			],
+		},
+	},
+	compoundVariants: [
+		// Default variant padding by size
+		{ variant: "default", size: "sm", class: "p-24" },
+		{ variant: "default", size: "md", class: "p-32" },
+		{ variant: "default", size: "lg", class: "p-32" },
+		{ variant: "default", size: "xl", class: "p-40" },
+		{ variant: "default", size: "full", class: "p-40" },
+		// Minimal variant has no padding
+		{ variant: "minimal", size: "sm", class: "p-0" },
+		{ variant: "minimal", size: "md", class: "p-0" },
+		{ variant: "minimal", size: "lg", class: "p-0" },
+		{ variant: "minimal", size: "xl", class: "p-0" },
+		{ variant: "minimal", size: "full", class: "p-0" },
+	],
+	defaultVariants: {
+		size: "md",
+		variant: "default",
+	},
+});
+
+// ============================================================================
+// Dialog Root
+// ============================================================================
+
+export interface DialogRootProps extends BaseDialog.Root.Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Dialog Root
+ *
+ * Groups all dialog parts and manages open/close state.
+ * Provides focus trap, scroll lock, and escape key handling automatically.
+ */
+const DialogRoot = ({ children, ...props }: DialogRootProps) => {
+	return <BaseDialog.Root {...props}>{children}</BaseDialog.Root>;
+};
+
+// ============================================================================
+// Dialog Trigger
+// ============================================================================
+
+export interface DialogTriggerProps
+	extends React.ComponentProps<typeof BaseDialog.Trigger> {
+	className?: string;
+}
+
+/**
+ * Dialog Trigger
+ *
+ * The element that triggers the dialog to open on click.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+const DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(
+	({ className, children, ...props }, ref) => {
+		// If children is a single React element, use render prop to avoid wrapper
+		const isSingleElement = React.isValidElement(children);
+
+		if (isSingleElement) {
+			return (
+				<BaseDialog.Trigger
+					ref={ref}
+					className={className}
+					render={children as React.ReactElement<Record<string, unknown>>}
+					{...props}
+				/>
+			);
+		}
+
+		return (
+			<BaseDialog.Trigger ref={ref} className={className} {...props}>
+				{children}
+			</BaseDialog.Trigger>
+		);
+	},
+);
+DialogTrigger.displayName = "DialogTrigger";
+
+// ============================================================================
+// Dialog Portal
+// ============================================================================
+
+export interface DialogPortalProps extends BaseDialog.Portal.Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Dialog Portal
+ *
+ * Renders the dialog in a portal outside the DOM hierarchy.
+ * This ensures proper stacking context and avoids z-index issues.
+ */
+const DialogPortal = ({ children, ...props }: DialogPortalProps) => {
+	return <BaseDialog.Portal {...props}>{children}</BaseDialog.Portal>;
+};
+
+// ============================================================================
+// Dialog Backdrop
+// ============================================================================
+
+export interface DialogBackdropProps
+	extends Omit<React.ComponentProps<typeof BaseDialog.Backdrop>, "className"> {
+	className?: string;
+}
+
+/**
+ * Dialog Backdrop
+ *
+ * Semi-transparent overlay that covers the page behind the dialog.
+ * Clicking the backdrop closes the dialog by default.
+ */
+const DialogBackdrop = React.forwardRef<HTMLDivElement, DialogBackdropProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BaseDialog.Backdrop
+				ref={ref}
+				className={cn(dialogBackdropVariants(), className)}
+				{...props}
+			/>
+		);
+	},
+);
+DialogBackdrop.displayName = "DialogBackdrop";
+
+// ============================================================================
+// Dialog Popup
+// ============================================================================
+
+export interface DialogPopupProps
+	extends Omit<React.ComponentProps<typeof BaseDialog.Popup>, "className">,
+		VariantProps<typeof dialogPopupVariants> {
+	className?: string;
+}
+
+/**
+ * Dialog Popup
+ *
+ * The dialog content container. Centered on screen with configurable size.
+ * Use `variant="minimal"` for borderless dialogs (video modals, etc.)
+ */
+const DialogPopup = React.forwardRef<HTMLDivElement, DialogPopupProps>(
+	({ className, size, variant, ...props }, ref) => {
+		return (
+			<BaseDialog.Popup
+				ref={ref}
+				className={cn(dialogPopupVariants({ size, variant }), className)}
+				{...props}
+			/>
+		);
+	},
+);
+DialogPopup.displayName = "DialogPopup";
+
+// ============================================================================
+// Dialog Title
+// ============================================================================
+
+export interface DialogTitleProps
+	extends Omit<React.ComponentProps<typeof BaseDialog.Title>, "className"> {
+	className?: string;
+}
+
+/**
+ * Dialog Title
+ *
+ * Accessible title for the dialog. Should be used for screen reader support.
+ */
+const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BaseDialog.Title
+				ref={ref}
+				className={cn("typography-h4-md font-semibold mb-8", className)}
+				{...props}
+			/>
+		);
+	},
+);
+DialogTitle.displayName = "DialogTitle";
+
+// ============================================================================
+// Dialog Description
+// ============================================================================
+
+export interface DialogDescriptionProps
+	extends Omit<
+		React.ComponentProps<typeof BaseDialog.Description>,
+		"className"
+	> {
+	className?: string;
+}
+
+/**
+ * Dialog Description
+ *
+ * Accessible description for the dialog content.
+ */
+const DialogDescription = React.forwardRef<
+	HTMLParagraphElement,
+	DialogDescriptionProps
+>(({ className, ...props }, ref) => {
+	return (
+		<BaseDialog.Description
+			ref={ref}
+			className={cn("typography-body-md-md text-overlay-text-muted", className)}
+			{...props}
+		/>
+	);
+});
+DialogDescription.displayName = "DialogDescription";
+
+// ============================================================================
+// Dialog Close
+// ============================================================================
+
+export interface DialogCloseProps
+	extends Omit<React.ComponentProps<typeof BaseDialog.Close>, "className"> {
+	className?: string;
+}
+
+/**
+ * Dialog Close
+ *
+ * Close button for the dialog. Can be placed anywhere within the dialog.
+ */
+const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BaseDialog.Close
+				ref={ref}
+				className={cn(
+					"absolute right-16 top-16 rounded-surface-ui-small p-8",
+					"text-overlay-text-muted hover:text-overlay-text",
+					"hover:bg-bg-section",
+					"focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+					"transition-colors duration-150",
+					className,
+				)}
+				{...props}
+			/>
+		);
+	},
+);
+DialogClose.displayName = "DialogClose";
+
+// ============================================================================
+// Dialog Body
+// ============================================================================
+
+export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+	className?: string;
+}
+
+/**
+ * Dialog Body
+ *
+ * Container for the main dialog content. Handles overflow scrolling.
+ */
+const DialogBody = React.forwardRef<HTMLDivElement, DialogBodyProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className={cn("flex-1 overflow-y-auto", className)}
+				{...props}
+			/>
+		);
+	},
+);
+DialogBody.displayName = "DialogBody";
+
+// ============================================================================
+// Dialog Footer
+// ============================================================================
+
+export interface DialogFooterProps
+	extends React.HTMLAttributes<HTMLDivElement> {
+	className?: string;
+}
+
+/**
+ * Dialog Footer
+ *
+ * Container for dialog actions (buttons, etc.). Typically placed at the bottom.
+ */
+const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"flex items-center justify-end gap-12 pt-24 mt-auto",
+					className,
+				)}
+				{...props}
+			/>
+		);
+	},
+);
+DialogFooter.displayName = "DialogFooter";
+
+// ============================================================================
+// Simple Dialog Component
+// ============================================================================
+
+export interface DialogProps {
+	/** The content to show in the dialog */
+	children: React.ReactNode;
+	/** The element that triggers the dialog (optional for controlled mode) */
+	trigger?: React.ReactNode;
+	/** Title for the dialog */
+	title?: React.ReactNode;
+	/** Description for the dialog */
+	description?: React.ReactNode;
+	/** Size of the dialog */
+	size?: "sm" | "md" | "lg" | "xl" | "full";
+	/** Visual variant: "default" for card style, "minimal" for borderless (video modals) */
+	variant?: "default" | "minimal";
+	/** Whether to show a close button */
+	showClose?: boolean;
+	/** Controlled open state */
+	open?: boolean;
+	/** Default open state */
+	defaultOpen?: boolean;
+	/** Callback when open state changes */
+	onOpenChange?: (open: boolean) => void;
+	/** Additional className for the popup */
+	className?: string;
+}
+
+/**
+ * Dialog
+ *
+ * A simple, pre-composed dialog component for common use cases.
+ * For more complex needs, use the compound components directly.
+ *
+ * @example
+ * ```tsx
+ * // With trigger
+ * <Dialog
+ *   trigger={<Button>Open Dialog</Button>}
+ *   title="Dialog Title"
+ *   description="This is the dialog description."
+ * >
+ *   <p>Dialog content goes here.</p>
+ * </Dialog>
+ *
+ * // Controlled mode
+ * <Dialog
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Controlled Dialog"
+ * >
+ *   <p>Content here</p>
+ * </Dialog>
+ * ```
+ */
+const Dialog = ({
+	children,
+	trigger,
+	title,
+	description,
+	size = "md",
+	variant = "default",
+	showClose = true,
+	open,
+	defaultOpen,
+	onOpenChange,
+	className,
+}: DialogProps) => {
+	return (
+		<DialogRoot
+			open={open}
+			defaultOpen={defaultOpen}
+			onOpenChange={onOpenChange}
+		>
+			{trigger && <DialogTrigger>{trigger}</DialogTrigger>}
+			<DialogPortal>
+				<DialogBackdrop />
+				<DialogPopup size={size} variant={variant} className={className}>
+					{showClose && (
+						<DialogClose>
+							<svg
+								width="16"
+								height="16"
+								viewBox="0 0 16 16"
+								fill="none"
+								aria-hidden="true"
+							>
+								<path
+									d="M2 2L14 14M2 14L14 2"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+								/>
+							</svg>
+							<span className="sr-only">Close</span>
+						</DialogClose>
+					)}
+					{title && <DialogTitle>{title}</DialogTitle>}
+					{description && <DialogDescription>{description}</DialogDescription>}
+					<DialogBody>{children}</DialogBody>
+				</DialogPopup>
+			</DialogPortal>
+		</DialogRoot>
+	);
+};
+
+// ============================================================================
+// Compound Component Export
+// ============================================================================
+
+export const DialogParts = Object.assign(DialogRoot, {
+	Root: DialogRoot,
+	Trigger: DialogTrigger,
+	Portal: DialogPortal,
+	Backdrop: DialogBackdrop,
+	Popup: DialogPopup,
+	Title: DialogTitle,
+	Description: DialogDescription,
+	Close: DialogClose,
+	Body: DialogBody,
+	Footer: DialogFooter,
+});
+
+export {
+	Dialog,
+	DialogRoot,
+	DialogTrigger,
+	DialogPortal,
+	DialogBackdrop,
+	DialogPopup,
+	DialogTitle,
+	DialogDescription,
+	DialogClose,
+	DialogBody,
+	DialogFooter,
+	dialogBackdropVariants,
+	dialogPopupVariants,
+};