"use client";
import { type ComponentProps } from "react";
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
import { cn } from "./cn";
/*
* Base UI stays behind this file. Products import `Dialog` from the platform,
* never `@base-ui/react/dialog`, so the engine can be replaced later without
* touching product code.
*
* What the primitive already does correctly, and this wrapper must not undo:
* moving focus into the popup on open, restoring it to the trigger on close,
* Escape, outside-click, and marking the background inert. None of that is
* re-implemented here — the wrapper only supplies styling and slots.
*/
function Dialog(props: DialogPrimitive.Root.Props) {
return ;
}
function DialogTrigger(props: DialogPrimitive.Trigger.Props) {
return ;
}
function DialogPortal(props: DialogPrimitive.Portal.Props) {
return ;
}
function DialogClose(props: DialogPrimitive.Close.Props) {
return ;
}
function DialogOverlay({
className,
...props
}: DialogPrimitive.Backdrop.Props) {
return (
);
}
/**
* The modal surface. Renders its own backdrop, so callers only nest content.
*
* `container` retargets the portal. It matters because brand tokens are read
* from a `data-brand` ancestor, and a portal escapes to `document.body` by
* default — so a dialog only inherits its brand when `data-brand` sits on
* `` or ``, which is how products apply it. Pass a container when
* the brand is scoped to a subtree instead, as the playground does to show two
* brands on one page.
*/
export interface DialogContentProps extends DialogPrimitive.Popup.Props {
container?: DialogPrimitive.Portal.Props["container"];
}
function DialogContent({
className,
children,
container,
...props
}: DialogContentProps) {
return (
{children}
);
}
function DialogHeader({ className, ...props }: ComponentProps<"div">) {
return (
);
}
function DialogFooter({ className, ...props }: ComponentProps<"div">) {
return (
);
}
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
return (
);
}
function DialogDescription({
className,
...props
}: DialogPrimitive.Description.Props) {
return (
);
}
export {
Dialog,
DialogTrigger,
DialogPortal,
DialogClose,
DialogOverlay,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
};