alert-dialog.tsx raw
1 "use client";
2
3 import * as React from "react";
4 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
5
6 import { cn } from "src/lib/utils";
7 import { Button } from "src/components/ui/button";
8
9 function AlertDialog({
10 ...props
11 }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
12 return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
13 }
14
15 function AlertDialogTrigger({
16 ...props
17 }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
18 return (
19 <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
20 );
21 }
22
23 function AlertDialogPortal({
24 ...props
25 }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
26 return (
27 <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
28 );
29 }
30
31 function 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(
39 "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
40 className
41 )}
42 {...props}
43 />
44 );
45 }
46
47 function AlertDialogContent({
48 className,
49 size = "default",
50 ...props
51 }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
52 size?: "default" | "sm";
53 }) {
54 return (
55 <AlertDialogPortal>
56 <AlertDialogOverlay />
57 <AlertDialogPrimitive.Content
58 data-slot="alert-dialog-content"
59 data-size={size}
60 className={cn(
61 "group/alert-dialog-content 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 bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
62 className
63 )}
64 {...props}
65 />
66 </AlertDialogPortal>
67 );
68 }
69
70 function AlertDialogHeader({
71 className,
72 ...props
73 }: React.ComponentProps<"div">) {
74 return (
75 <div
76 data-slot="alert-dialog-header"
77 className={cn(
78 "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
79 className
80 )}
81 {...props}
82 />
83 );
84 }
85
86 function AlertDialogFooter({
87 className,
88 ...props
89 }: React.ComponentProps<"div">) {
90 return (
91 <div
92 data-slot="alert-dialog-footer"
93 className={cn(
94 "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
95 className
96 )}
97 {...props}
98 />
99 );
100 }
101
102 function AlertDialogTitle({
103 className,
104 ...props
105 }: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
106 return (
107 <AlertDialogPrimitive.Title
108 data-slot="alert-dialog-title"
109 className={cn(
110 "text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
111 className
112 )}
113 {...props}
114 />
115 );
116 }
117
118 function AlertDialogDescription({
119 className,
120 ...props
121 }: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
122 return (
123 <AlertDialogPrimitive.Description
124 data-slot="alert-dialog-description"
125 className={cn("text-sm text-muted-foreground", className)}
126 {...props}
127 />
128 );
129 }
130
131 function AlertDialogMedia({
132 className,
133 ...props
134 }: React.ComponentProps<"div">) {
135 return (
136 <div
137 data-slot="alert-dialog-media"
138 className={cn(
139 "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
140 className
141 )}
142 {...props}
143 />
144 );
145 }
146
147 function AlertDialogAction({
148 className,
149 variant = "default",
150 size = "default",
151 ...props
152 }: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
153 Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
154 return (
155 <Button variant={variant} size={size} asChild>
156 <AlertDialogPrimitive.Action
157 data-slot="alert-dialog-action"
158 className={cn(className)}
159 {...props}
160 />
161 </Button>
162 );
163 }
164
165 function AlertDialogCancel({
166 className,
167 variant = "outline",
168 size = "default",
169 ...props
170 }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
171 Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
172 return (
173 <Button variant={variant} size={size} asChild>
174 <AlertDialogPrimitive.Cancel
175 data-slot="alert-dialog-cancel"
176 className={cn(className)}
177 {...props}
178 />
179 </Button>
180 );
181 }
182
183 export {
184 AlertDialog,
185 AlertDialogAction,
186 AlertDialogCancel,
187 AlertDialogContent,
188 AlertDialogDescription,
189 AlertDialogFooter,
190 AlertDialogHeader,
191 AlertDialogMedia,
192 AlertDialogOverlay,
193 AlertDialogPortal,
194 AlertDialogTitle,
195 AlertDialogTrigger,
196 };
197