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 { Button } from "@/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        "fixed inset-0 isolate z-50 bg-scrim 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",
34        className
35      )}
36      {...props}
37    />
38  )
39}
40 
41function AlertDialogContent({
42  className,
43  size = "default",
44  ...props
45}: AlertDialogPrimitive.Popup.Props & {
46  size?: "default" | "sm"
47}) {
48  return (
49    <AlertDialogPortal>
50      <AlertDialogOverlay />
51      <AlertDialogPrimitive.Popup
52        data-slot="alert-dialog-content"
53        data-size={size}
54        className={cn(
55          "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-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
56          className
57        )}
58        {...props}
59      />
60    </AlertDialogPortal>
61  )
62}
63 
64function AlertDialogHeader({
65  className,
66  ...props
67}: React.ComponentProps<"div">) {
68  return (
69    <div
70      data-slot="alert-dialog-header"
71      className={cn(
72// … truncated