Alert Dialog

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