Alert Dialog

1"use client"
2 
3import * as React from "react"
4import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
5 
6import { cn, modalSurfaceClasses } from "@/registry/lib/surface"
7import { ThemedPortalShell } from "@/registry/lib/portal-container"
8import { Button } from "@/registry/ui/button"
9 
10function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
11  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
12}
13 
14function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
15  return (
16    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
17  )
18}
19 
20function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
21  return (
22    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
23  )
24}
25 
26function AlertDialogOverlay({
27  className,
28  ...props
29}: AlertDialogPrimitive.Backdrop.Props) {
30  return (
31    <AlertDialogPrimitive.Backdrop
32      data-slot="alert-dialog-overlay"
33      className={cn(
34        "fixed inset-0 z-50 bg-foreground/24 duration-[var(--d-drift)] ease-[var(--ease-drift)] data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
35        className
36      )}
37      {...props}
38    />
39  )
40}
41 
42function AlertDialogContent({
43  className,
44  size = "default",
45  ...props
46}: AlertDialogPrimitive.Popup.Props & {
47  size?: "default" | "sm"
48}) {
49  return (
50    <AlertDialogPortal>
51      <ThemedPortalShell>
52        <AlertDialogOverlay />
53        <AlertDialogPrimitive.Popup
54          data-slot="alert-dialog-content"
55          data-size={size}
56          className={cn(
57            "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 p-4 font-sans data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm",
58            modalSurfaceClasses(),
59            className
60          )}
61          {...props}
62        />
63      </ThemedPortalShell>
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(
76// … truncated