Alert Dialog

1import * as React from "react"
2import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
3 
4import { cn } from "@/lib/utils"
5import { Button } from "@/components/ui/button"
6 
7function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
8  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
9}
10 
11function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
12  return (
13    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
14  )
15}
16 
17function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
18  return (
19    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
20  )
21}
22 
23function AlertDialogOverlay({
24  className,
25  ...props
26}: AlertDialogPrimitive.Backdrop.Props) {
27  return (
28    <AlertDialogPrimitive.Backdrop
29      data-slot="alert-dialog-overlay"
30      className={cn(
31        "fixed inset-0 isolate z-50 bg-black/10 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",
32        className
33      )}
34      {...props}
35    />
36  )
37}
38 
39function AlertDialogContent({
40  className,
41  size = "default",
42  ...props
43}: AlertDialogPrimitive.Popup.Props & {
44  size?: "default" | "sm"
45}) {
46  return (
47    <AlertDialogPortal>
48      <AlertDialogOverlay />
49      <AlertDialogPrimitive.Popup
50        data-slot="alert-dialog-content"
51        data-size={size}
52        className={cn(
53          "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",
54          className
55        )}
56        {...props}
57      />
58    </AlertDialogPortal>
59  )
60}
61 
62function AlertDialogHeader({
63  className,
64  ...props
65}: React.ComponentProps<"div">) {
66  return (
67    <div
68      data-slot="alert-dialog-header"
69      className={cn(
70// … truncated