alert-dialog

1"use client"
2
3import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
4
5import * as React from "react"
6
7import { buttonVariants } from "@/components/ui/button"
8
9import { cn } from "@/lib/utils"
10
11function AlertDialog({
12  ...props
13}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
14  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
15}
16
17function AlertDialogTrigger({
18  ...props
19}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
20  return (
21    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
22  )
23}
24
25function AlertDialogPortal({
26  ...props
27}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
28  return (
29    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
30  )
31}
32
33function AlertDialogOverlay({
34  className,
35  ...props
36}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
37  return (
38    <AlertDialogPrimitive.Overlay
39      data-slot="alert-dialog-overlay"
40      className={cn(
41        "fixed inset-0 z-50 bg-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
42        className,
43      )}
44      {...props}
45    />
46  )
47}
48
49function AlertDialogContent({
50  className,
51  ...props
52}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
53  return (
54    <AlertDialogPortal>
55      <AlertDialogOverlay />
56      <AlertDialogPrimitive.Content
57        data-slot="alert-dialog-content"
58        className={cn(
59          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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-base border-2 border-border p-6 shadow-shadow duration-200 sm:max-w-lg",
60          className,
61        )}
62        {...props}
63      />
64    </AlertDialogPortal>
65  )
66}
67
68function AlertDialogHeader({
69  className,
70  ...props
71}: React.ComponentProps<"div">) {
72  return (
73    <div
74      data-slot="alert-dialog-header"
75      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
76      {...props}
77    />
78  )
79}
80
81function AlertDialogFooter({
82  className,
83  ...props
84}: React.ComponentProps<"div">) {
85  return (
86    <div
87      data-slot="alert-dialog-footer"
88      className={cn(
89        "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end",
90        className,
91      )}
92      {...props}
93    />
94  )
95}
96
97function AlertDialogTitle({
98  className,
99  ...props
100}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
101  return (
102    <AlertDialogPrimitive.Title
103      data-slot="alert-dialog-title"
104      className={cn("text-lg font-heading", className)}
105      {...props}
106    />
107  )
108}
109
110function AlertDialogDescription({
111  className,
112  ...props
113}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
114  return (
115    <AlertDialogPrimitive.Description
116      data-slot="alert-dialog-description"
117      className={cn("text-sm font-base text-foreground", className)}
118      {...props}
119    />
120  )
121}
122
123function AlertDialogAction({
124  className,
125  ...props
126}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
127  return (
128    <AlertDialogPrimitive.Action
129      className={cn(buttonVariants(), className)}
130      {...props}
131    />
132  )
133}
134
135function AlertDialogCancel({
136  className,
137  ...props
138}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
139  return (
140    <AlertDialogPrimitive.Cancel
141      className={cn(buttonVariants({ variant: "neutral" }), className)}
142      {...props}
143    />
144  )
145}
146
147export {
148  AlertDialog,
149  AlertDialogPortal,
150  AlertDialogOverlay,
151  AlertDialogTrigger,
152  AlertDialogContent,
153  AlertDialogHeader,
154  AlertDialogFooter,
155  AlertDialogTitle,
156  AlertDialogDescription,
157  AlertDialogAction,
158  AlertDialogCancel,
159}
160