"use client"; import * as DialogPrimitive from "@radix-ui/react-dialog"; import * as React from "react"; import { buttonVariants } from "@/components/registry/primitives/core/button"; import { ThemeIcon } from "@/components/registry/primitives/core/theme-icon"; import { cn } from "@/lib/registry/cn"; function Dialog({ ...props }: React.ComponentProps) { return ; } Dialog.displayName = "Dialog"; function DialogTrigger({ ...props }: React.ComponentProps) { return ; } DialogTrigger.displayName = "DialogTrigger"; function DialogPortal({ ...props }: React.ComponentProps) { return ; } DialogPortal.displayName = "DialogPortal"; function DialogClose({ ...props }: React.ComponentProps) { return ( ); } DialogClose.displayName = "DialogClose"; function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ); } interface DialogContentProps extends React.ComponentProps { size?: "sm" | "md" | "lg" | "xl" | "full"; } function DialogContent({ className, children, size = "md", ...props }: DialogContentProps) { const sizeClasses: Record, string> = { sm: "max-w-sm", md: "max-w-md", lg: "max-w-2xl", xl: "max-w-4xl", full: "w-screen h-dvh max-w-none max-h-none rounded-none p-0", }; function hasCloseButton(node: React.ReactNode): boolean { let found = false; React.Children.forEach(node, (child) => { if (found) return; if (React.isValidElement(child) && child.props != null) { const props = child.props as Record; if (props["data-dialog-close"] === true) { found = true; return; } if (typeof props === "object" && "children" in props) { found = hasCloseButton(props.children as React.ReactNode); } } }); return found; } const hasCustomCloseButton = hasCloseButton(children); return (

{children} {!hasCustomCloseButton && ( Close )}

); } DialogContent.displayName = "DialogContent"; function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } DialogHeader.displayName = "DialogHeader"; function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } DialogFooter.displayName = "DialogFooter"; function DialogTitle({ className, ...props }: React.ComponentProps) { return ( ); } DialogTitle.displayName = "DialogTitle"; function DialogDescription({ className, ...props }: React.ComponentProps) { return ( ); } DialogDescription.displayName = "DialogDescription"; export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

Dialog

Showcase

Dialog