Alert Dialog (Base UI)

1"use client";
2 
3import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
4import { Slot } from "@radix-ui/react-slot";
5import {
6  MotionConfig,
7  motion,
8  type Transition,
9  useReducedMotion,
10  type Variants,
11} from "motion/react";
12import * as React from "react";
13 
14import { cn } from "@/lib/utils";
15 
16const controlCornerClassName =
17  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
18 
19const surfaceCornerClassName =
20  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]";
21 
22const alertDialogThemeClassName =
23  "[--adlg-surface:#ffffff] [--adlg-foreground:#111111] [--adlg-border:#e3e7ec] [--adlg-ring:rgba(17,17,17,0.16)] [--adlg-muted-foreground:#6d7480] [--adlg-muted:#f5f7fa] [--adlg-action-surface:#111111] [--adlg-action-foreground:#ffffff] [--adlg-destructive:#dc2626] [--adlg-destructive-foreground:#ffffff] [--color-accent:var(--adlg-muted)] [--color-accent-foreground:var(--adlg-foreground)] dark:[--adlg-surface:#0a0a0a] dark:[--adlg-foreground:#f6f3ec] dark:[--adlg-border:#2b2a25] dark:[--adlg-ring:rgba(246,243,236,0.18)] dark:[--adlg-muted-foreground:#9a958a] dark:[--adlg-muted:#1a1a18] dark:[--adlg-action-surface:#f6f3ec] dark:[--adlg-action-foreground:#111111] dark:[--adlg-destructive:#f87171] dark:[--adlg-destructive-foreground:#111111]";
24 
25const alertDialogContentClassName = cn(
26  surfaceCornerClassName,
27  "relative flex w-[min(100%,34rem)] max-w-xl transform-gpu flex-col gap-5 border border-[color:color-mix(in_oklch,var(--adlg-border),transparent_25%)] bg-[color:color-mix(in_oklch,var(--adlg-surface),transparent_4%)] p-6 text-[color:var(--adlg-foreground)] shadow-[0_32px_120px_rgba(15,23,42,0.18)] outline-none supports-[backdrop-filter]:bg-[color:color-mix(in_oklch,var(--adlg-surface),transparent_8%)] sm:p-7"
28);
29 
30type AlertDialogContextValue = {
31  actionsRef: React.RefObject<AlertDialogPrimitive.Root.Actions | null>;
32  open: boolean;
33};
34 
35const AlertDialogContext = React.createContext<AlertDialogContextValue | null>(
36  null
37);
38 
39const FLUID_EASE: [number, number, number, number] = [0.22, 1, 0.36, 1];
40const FLUID_EXIT_EASE: [number, number, number, number] = [0.4, 0, 0.2, 1];
41 
42const overlayEnterTransition: Transition = {
43  opacity: { duration: 0.44, ease: FLUID_EASE },
44  backdropFilter: { duration: 0.52, ease: FLUID_EASE },
45};
46 
47const overlayExitTransition: Transition = {
48// … truncated