Alert Dialog

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