Dialog

1"use client";
2 
3import * as DialogPrimitive from "@radix-ui/react-dialog";
4import { X } from "lucide-react";
5import { AnimatePresence, motion } from "motion/react";
6import * as React from "react";
7import { cn } from "@/lib/utils";
8 
9const controlCornerClassName =
10  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
11 
12const surfaceCornerClassName =
13  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]";
14 
15const dialogThemeClassName =
16  "[--dlg-surface:#ffffff] [--dlg-foreground:#111111] [--dlg-border:#e3e7ec] [--dlg-muted:#f5f7fa] [--color-accent:var(--dlg-muted)] [--color-accent-foreground:var(--dlg-foreground)] [--dlg-muted-foreground:#6d7480] dark:[--dlg-surface:#171717] dark:[--dlg-foreground:#f6f3ec] dark:[--dlg-border:#2b2a25] dark:[--dlg-muted:#1a1a18] dark:[--dlg-muted-foreground:#9a958a]";
17 
18const dialogContentClassName = cn(
19  surfaceCornerClassName,
20  "relative flex w-[min(100%,32rem)] max-w-lg flex-col gap-4 overflow-y-auto border border-[color:var(--dlg-border)] bg-[color:var(--dlg-surface)] p-6 text-[color:var(--dlg-foreground)] shadow-2xl"
21);
22 
23const dialogCloseClassName = cn(
24  controlCornerClassName,
25  "absolute top-4 right-4 p-1.5 text-[color:var(--dlg-foreground)] opacity-70 transition-colors hover:bg-accent/60 hover:opacity-100 focus:outline-none disabled:pointer-events-none"
26);
27 
28const Dialog = DialogPrimitive.Root;
29const DialogTrigger = DialogPrimitive.Trigger;
30const DialogClose = DialogPrimitive.Close;
31const DialogPortal = DialogPrimitive.Portal;
32 
33const overlayVariants = {
34  hidden: { opacity: 0 },
35  visible: { opacity: 1 },
36};
37 
38const contentVariants = {
39  hidden: {
40    opacity: 0,
41    scale: 0.85,
42    y: 30,
43    filter: "blur(8px)",
44  },
45  visible: {
46    opacity: 1,
47    scale: 1,
48    y: 0,
49    filter: "blur(0px)",
50    transition: {
51      type: "spring" as const,
52      damping: 25,
53      stiffness: 300,
54      mass: 0.8,
55      staggerChildren: 0.07,
56      delayChildren: 0.1,
57    },
58  },
59  exit: {
60    opacity: 0,
61    scale: 0.92,
62    y: 15,
63    filter: "blur(4px)",
64    transition: {
65      type: "spring" as const,
66      damping: 30,
67      stiffness: 400,
68      duration: 0.2,
69    },
70  },
71};
72 
73const childVariants = {
74  hidden: { opacity: 0, y: 12 },
75  visible: {
76    opacity: 1,
77    y: 0,
78    transition: { type: "spring" as const, damping: 20, stiffness: 300 },
79  },
80};
81 
82const DialogContent = React.forwardRef<
83// … truncated