Dialog

1"use client";
2 
3import type { ComponentProps } from "react";
4import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
5import { motion, useReducedMotion } from "motion/react";
6import { XIcon } from "lucide-react";
7 
8import { cn } from "@/lib/utils";
9import { spring } from "@/lib/springs";
10import { Button } from "@/components/ui/button";
11 
12function Dialog({ ...props }: DialogPrimitive.Root.Props) {
13  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
14}
15 
16function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
17  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
18}
19 
20function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
21  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
22}
23 
24function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
25  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
26}
27 
28/**
29 * Rendered through Base UI's `render` function-prop rather than a plain
30 * `className` so the backdrop can read `state.transitionStatus` — Base UI
31 * keeps the element mounted through a "ending" status and only removes it
32 * once it detects the animation on it has finished, so handing that status
33 * to motion (instead of a CSS transition) is enough to get a correct
34 * exit with no manual mount-tracking, unlike Accordion's Panel (which
35 * doesn't defer removal the same way).
36 */
37function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
38  const reduceMotion = useReducedMotion();
39 
40  return (
41    <DialogPrimitive.Backdrop
42      data-slot="dialog-overlay"
43      render={(backdropProps, state) => {
44        const exiting = state.transitionStatus === "ending";
45        return (
46          <motion.div
47            {...(backdropProps as Record<string, unknown>)}
48            className={cn("fixed inset-0 z-50 bg-black/40 backdrop-blur-sm", className)}
49            initial={{ opacity: 0 }}
50            animate={{ opacity: exiting ? 0 : 1 }}
51            transition={
52              reduceMotion ? spring.fast.enter : exiting ? spring.slow.exit : spring.slow.enter
53            }
54          />
55        );
56      }}
57      {...props}
58    />
59  );
60}
61 
62/**
63 * Centered, fully-rounded surface — unlike Drawer (which sits flush against
64 * a viewport edge), a dialog is a detached floating plane, so it gets the
65 * `--popover` step and `shadow-panel` on every side rather than Drawer's
66 * edge-attached treatment.
67 */
68function DialogContent({
69  className,
70  children,
71// … truncated