Dialog

1// Base UI base dialog — runs on @octanejs/base-ui's Dialog.
2// Part mapping: Overlay -> Backdrop, Content -> Popup, and the close affordance composes a
3// Button through Base UI's render-as-ELEMENT contract rather than radix's `asChild`.
4//
5// `data-open:`/`data-closed:` need no adaptation — the radix base already uses that exact form
6// and Base UI emits the same attributes.
7//
8// Drops upstream's `cn-font-heading` on the title, matching the react-aria base and this base's
9// alert-dialog: the package ships the utilities-inlined flavor and nothing defines that hook.
10//
11// UNVERIFIED PROVENANCE: class strings come from this package's radix base rather than
12// transcribed from upstream's Base UI source.
13import { createElement, type OctaneNode } from 'octane';
14import { Dialog as DialogPrimitive } from '@octanejs/base-ui/dialog';
15import { XIcon } from '@octanejs/lucide';
16 
17import { cn } from '@/lib/utils';
18import { Button } from '@/components/ui/button';
19 
20type Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;
21 
22export function Dialog(props: Record<string, unknown>) @{
23	<DialogPrimitive.Root data-slot="dialog" {...props} />
24}
25 
26export function DialogTrigger(props: Record<string, unknown>) @{
27	<DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
28}
29 
30export function DialogPortal(props: Record<string, unknown>) @{
31	<DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
32}
33 
34export function DialogClose(props: Record<string, unknown>) @{
35	<DialogPrimitive.Close data-slot="dialog-close" {...props} />
36}
37 
38export function DialogOverlay({ className, ...props }: Props) @{
39	<DialogPrimitive.Backdrop
40		data-slot="dialog-overlay"
41		className={cn(
42			'fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
43			className,
44		)}
45		{...props}
46	/>
47}
48 
49export interface DialogContentProps extends Props {
50	showCloseButton?: boolean;
51}
52 
53export function DialogContent({
54	className,
55	children,
56	showCloseButton = true,
57	...props
58}: DialogContentProps) {
59	return createElement(
60		DialogPrimitive.Portal,
61		{ 'data-slot': 'dialog-portal' },
62		createElement(DialogOverlay, { key: 'overlay' }),
63		createElement(
64			DialogPrimitive.Popup,
65			{
66				key: 'content',
67				'data-slot': 'dialog-content',
68				className: cn(
69// … truncated