Alert Dialog

1"use client";
2
3import { ComponentProps } from "react";
4
5import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
6
7import { cn } from "@/lib/utils";
8import { Button } from "@/components/ui/button";
9
10function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
11  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
12}
13
14function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
15  return (
16    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
17  );
18}
19
20function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
21  return (
22    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
23  );
24}
25
26function AlertDialogOverlay({
27  className,
28  ...props
29}: AlertDialogPrimitive.Backdrop.Props) {
30  return (
31    <AlertDialogPrimitive.Backdrop
32      data-slot="alert-dialog-overlay"
33      className={cn(
34        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-gray-900/20 duration-100 supports-backdrop-filter:backdrop-blur-xs",
35        className
36      )}
37      {...props}
38    />
39  );
40}
41
42function AlertDialogContent({
43  className,
44  size = "default",
45  ...props
46}: AlertDialogPrimitive.Popup.Props & {
47  size?: "default" | "sm";
48}) {
49  return (
50    <AlertDialogPortal>
51      <AlertDialogOverlay />
52      <AlertDialogPrimitive.Popup
53        data-slot="alert-dialog-content"
54        data-size={size}
55        className={cn(
56          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-card ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-5 rounded-lg p-5 ring-0 shadow-[0_0_15px_-3px_rgb(0,0,0,0.1)] duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm",
57          className
58        )}
59        {...props}
60      />
61    </AlertDialogPortal>
62  );
63}
64
65function AlertDialogHeader({
66  className,
67  ...props
68}: ComponentProps<"div">) {
69  return (
70    <div
71      data-slot="alert-dialog-header"
72      className={cn(
73// … truncated