Aurora Alert Dialog

1"use client"
2 
3import * as React from "react"
4import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
5import { Info, TriangleAlert } from "lucide-react"
6import { cn } from "@/lib/utils"
7import { Button } from "@/registry/aurora/ui/button"
8 
9const AlertDialogTrigger = AlertDialogPrimitive.Trigger
10const AlertDialogPortal = AlertDialogPrimitive.Portal
11const AlertDialogAction = AlertDialogPrimitive.Action
12const AlertDialogCancel = AlertDialogPrimitive.Cancel
13 
14function AlertDialogOverlay({
15  ref,
16  className,
17  style,
18  ...props
19}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay> & {
20  ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Overlay>>
21}) {
22  return (
23    <AlertDialogPrimitive.Overlay
24      ref={ref}
25      data-slot="alert-dialog-overlay"
26      className={cn(
27        "fixed inset-0 z-50 backdrop-blur-[2px]",
28        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
29        className
30      )}
31      style={{ backgroundColor: "var(--aurora-overlay)", ...style }}
32      {...props}
33    />
34  )
35}
36 
37function AlertDialogContent({
38  ref,
39  className,
40  children,
41  size = "default",
42  style,
43  ...props
44}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
45  size?: "default" | "sm"
46  ref?: React.Ref<React.ComponentRef<typeof AlertDialogPrimitive.Content>>
47}) {
48  return (
49    <AlertDialogPortal>
50      <AlertDialogOverlay />
51      <AlertDialogPrimitive.Content
52        ref={ref}
53        data-slot="alert-dialog-content"
54        data-size={size}
55        className={cn(
56          "fixed left-1/2 top-1/2 z-50 grid w-full max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-[var(--aurora-radius-3)] border p-6 outline-none",
57          "data-[size=sm]:max-w-sm data-[size=default]:sm:max-w-lg",
58          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
59          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
60          className
61        )}
62        style={{
63          background:
64            "linear-gradient(180deg, var(--aurora-panel-strong-top), var(--aurora-panel-strong))",
65          borderColor:
66            "color-mix(in srgb, var(--aurora-border-default) 55%, var(--aurora-page-bg))",
67          boxShadow: "var(--aurora-shadow-strong), var(--aurora-highlight-strong)",
68          color: "var(--aurora-text-primary)",
69          ...style,
70        }}
71// … truncated