Alert Dialog

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