Alert Dialog

1// Base UI base alert-dialog — transcribed from upstream's `bases/base-ui/ui/alert-dialog.tsx`
2// (maintainer-supplied), running on @octanejs/base-ui's AlertDialog. Upstream part mapping:
3// Overlay -> Backdrop, Content -> Popup, Cancel -> Close. This port also composes Action via Close.
4//
5// TWO DELIBERATE DEPARTURES FROM THE SOURCE:
6// - Upstream's AlertDialogTitle carries `cn-font-heading`, a semantic hook from the pinned cn-*
7//   system. This package ships the default-Tailwind utilities-inlined flavor instead, the
8//   react-aria base already drops this exact class for that reason, and nothing in the playground
9//   defines it (0 occurrences in the built CSS), so keeping it would ship a class that resolves
10//   to nothing. Every other class string is verbatim.
11// - Upstream renders AlertDialogAction as a plain Button, so it does not dismiss the dialog.
12//   Composing it through Close preserves the public Button-like API and supplies the expected
13//   confirm-and-dismiss behavior shown by Base UI's own alert-dialog examples.
14//
15// Octane adaptations: no `"use client"`; refs are props. AlertDialogContent composes its
16// Portal/Overlay/Popup tree internally, so consumer children still flow through the ordinary
17// props.children channel.
18import { AlertDialog as AlertDialogPrimitive } from '@octanejs/base-ui/alert-dialog';
19 
20import { cn } from '@/lib/utils';
21import type { DivProps } from '@/lib/types';
22import { Button } from '@/components/ui/button';
23 
24export function AlertDialog({ ...props }: Record<string, any>) @{
25	<AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
26}
27 
28export function AlertDialogTrigger({ ...props }: Record<string, any>) @{
29	<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
30}
31 
32export function AlertDialogPortal({ ...props }: Record<string, any>) @{
33	<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
34}
35 
36export function AlertDialogOverlay({ className, ...props }: Record<string, any>) @{
37	<AlertDialogPrimitive.Backdrop
38		data-slot="alert-dialog-overlay"
39		className={cn(
40			'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',
41			className,
42		)}
43		{...props}
44	/>
45}
46 
47export function AlertDialogContent({ className, size = 'default', ...props }: Record<
48	string,
49	any
50>) @{
51	<AlertDialogPortal>
52		<AlertDialogOverlay key="overlay" />
53// … truncated