"use client" import * as React from "react" import { Dialog as DialogPrimitive } from "radix-ui" import { XIcon } from "lucide-react" import { useLocale } from "./lib/locale" import { cn } from "./lib/utils" import { usePortalContainer } from "./lib/portal" type DialogSize = "sm" | "md" | "lg" | "xl" const sizes: Record = { sm: "sm:max-w-sm", md: "sm:max-w-lg", lg: "sm:max-w-2xl", xl: "sm:max-w-4xl", } type DialogProps = Omit, "children"> & { /** What opens it, e.g. a button. Leave it out to open it yourself with open and onOpenChange. */ trigger?: React.ReactElement /** Required, so screen readers can name the dialog; hide it with classNames.title "sr-only" if the design has none. */ title: React.ReactNode description?: React.ReactNode /** The body. */ children?: React.ReactNode /** Buttons at the bottom; wrap a Cancel button in DialogClose to close the dialog. */ footer?: React.ReactNode /** Makes the body and footer one

, e.g. { onSubmit } or { action }: Enter submits, a submit button in the footer works. */ form?: React.ComponentProps<"form"> size?: DialogSize /** The × in the corner. */ showCloseButton?: boolean /** The panel's classes. */ className?: string classNames?: { header?: string; title?: string; description?: string; footer?: string } } /** * A window over the page that takes the focus until it's closed, in one tag: a trigger, a title and description, the * body as children and buttons in the footer. Give it form props and the whole thing is a form. */ function Dialog({ trigger, title, description, children, footer, form, size = "md", showCloseButton = true, className, classNames, ...props }: DialogProps) { const portalContainer = usePortalContainer() const { t } = useLocale() const inner = ( <>

{title} {description ? ( {description} ) : null}

{children} {footer && (

{footer}

)} ) return ( {trigger && {trigger}} {form ? ( {inner} ) : ( inner )} {showCloseButton && ( {t("close")} )}

) } /** Closes the dialog it's in: wrap a button in the footer, e.g. . */ function DialogClose(props: React.ComponentProps) { return } function DialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } export { Dialog, DialogClose, type DialogProps, type DialogSize }