Alert Dialog

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
5import * as React from "react";
6import { type MaterialAxisProps, type MaterialProps, materialSurface, splitAxisProps } from "@/lib/material";
7import { cn } from "@/lib/utils";
8import { buttonVariants } from "./button";
9 
10/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
11const alertDialogContentVariants = cva(
12  "group/alert-dialog-content fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
13  {
14    variants: {
15      variant: {
16        default: "bg-background border",
17        glass: "text-foreground",
18      },
19    },
20    defaultVariants: {
21      variant: "glass",
22    },
23  },
24);
25 
26/* Role: bordered adaptive glass at the elevated blur tier. */
27const ROLE: MaterialProps = {
28  border: true,
29  size: "lg",
30};
31 
32const AlertDialog = ({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) => (
33  <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
34);
35 
36const AlertDialogTrigger = ({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) => (
37  <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
38);
39 
40const AlertDialogPortal = ({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) => (
41  <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
42);
43 
44const AlertDialogOverlay = React.forwardRef<
45  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
46  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
47>(({ className, ...props }, ref) => (
48  <AlertDialogPrimitive.Overlay
49    data-slot="alert-dialog-overlay"
50    className={cn(
51      "fixed inset-0 z-50 bg-transparent backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
52      className,
53    )}
54    {...props}
55    ref={ref}
56  />
57));
58// … truncated