Alert Dialog

1"use client";
2 
3import * as React from "react";
4import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
5 
6import { cn } from "@/lib/utils";
7import { Button, buttonVariants } from "@/registry/optics/button";
8import { X } from "lucide-react";
9 
10function AlertDialog({ ...props } = {}) {
11	return <DialogPrimitive.Root data-slot="alert-dialog" {...props} />;
12}
13 
14function AlertDialogTrigger({ ...props } = {}) {
15	return (
16		<DialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
17	);
18}
19 
20function AlertDialogPortal({ ...props } = {}) {
21	return <DialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
22}
23 
24function AlertDialogOverlay({ className = "", ...props }) {
25	return (
26		<DialogPrimitive.Backdrop
27			data-slot="alert-dialog-overlay"
28			render={
29				<div
30					className={cn(
31						"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
32						className,
33					)}
34				/>
35			}
36			{...props}
37		/>
38	);
39}
40 
41function AlertDialogContent({ className = "", children = null, ...props }) {
42	return (
43		<AlertDialogPortal>
44			<AlertDialogOverlay />
45			<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
46				<DialogPrimitive.Popup
47					data-slot="alert-dialog-content"
48					render={
49						<div
50							className={cn(
51								"bg-muted fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-3xl border p-2 shadow-lg duration-200 sm:max-w-lg transition-all data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-95 data-starting-style:scale-95",
52								className,
53							)}
54						>
55							<div className="bg-background grid w-full gap-8 rounded-2xl p-6 px-6 shadow-lg duration-200 sm:max-w-lg">
56								{children}
57							</div>
58						</div>
59					}
60					{...props}
61				/>
62			</div>
63		</AlertDialogPortal>
64	);
65}
66 
67function AlertDialogHeader({ className = "", ...props }) {
68	return (
69		<div
70			data-slot="alert-dialog-header"
71			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
72			{...props}
73		/>
74	);
75}
76 
77function AlertDialogFooter({ className = "", ...props }) {
78	return (
79		<div
80			data-slot="alert-dialog-footer"
81			className={cn(
82				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
83				className,
84			)}
85			{...props}
86		/>
87	);
88}
89 
90function AlertDialogTitle({ className = "", ...props }) {
91	return (
92		<DialogPrimitive.Title
93// … truncated