Dialog (Base UI)

1"use client";
2 
3import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
4import { Slot } from "@radix-ui/react-slot";
5import { X } from "lucide-react";
6import {
7  MotionConfig,
8  motion,
9  type Transition,
10  useReducedMotion,
11  type Variants,
12} from "motion/react";
13import * as React from "react";
14 
15import { cn } from "@/lib/utils";
16 
17const controlCornerClassName =
18  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[11px]";
19 
20const surfaceCornerClassName =
21  "rounded-lg supports-[corner-shape:squircle]:corner-squircle supports-[corner-shape:squircle]:rounded-[12px]";
22 
23const dialogThemeClassName =
24  "[--dlg-surface:var(--popover,#ffffff)] [--dlg-foreground:var(--popover-foreground,#111111)] [--dlg-border:var(--border,#e3e7ec)] [--dlg-ring:var(--ring,rgba(17,17,17,0.16))] [--dlg-muted-foreground:var(--muted-foreground,#6d7480)] [--dlg-muted:var(--muted,#f5f7fa)] [--dlg-destructive:var(--destructive,#dc2626)] [--dlg-destructive-foreground:var(--destructive-foreground,#ffffff)] [--color-accent:var(--dlg-muted)] [--color-accent-foreground:var(--dlg-foreground)] dark:[--dlg-surface:var(--popover,#0a0a0a)] dark:[--dlg-foreground:var(--popover-foreground,#f6f3ec)] dark:[--dlg-border:var(--border,#2b2a25)] dark:[--dlg-ring:var(--ring,rgba(246,243,236,0.18))] dark:[--dlg-muted-foreground:var(--muted-foreground,#9a958a)] dark:[--dlg-muted:var(--muted,#1a1a18)] dark:[--dlg-destructive:var(--destructive,#f87171)] dark:[--dlg-destructive-foreground:var(--destructive-foreground,#111111)]";
25 
26const dialogContentMaxHeightClassName =
27  "max-h-[min(90svh,calc(100svh-env(safe-area-inset-top,0px)-env(safe-area-inset-bottom,0px)-2rem))] overflow-y-auto";
28 
29const dialogContentBaseClassName = cn(
30  surfaceCornerClassName,
31  "relative flex min-h-0 transform-gpu flex-col gap-5 border border-[color:color-mix(in_oklch,var(--dlg-border),transparent_25%)] bg-[color:color-mix(in_oklch,var(--dlg-surface),transparent_4%)] p-6 text-[color:var(--dlg-foreground)] shadow-[0_32px_120px_rgba(15,23,42,0.18)] outline-none supports-[backdrop-filter]:bg-[color:color-mix(in_oklch,var(--dlg-surface),transparent_8%)] sm:p-7"
32);
33 
34const dialogContentSizeClassNames = {
35  sm: "w-[min(100%,28rem)] max-w-md",
36  default: "w-[min(100%,34rem)] max-w-xl",
37  lg: "w-[min(100%,42rem)] max-w-2xl",
38  full: "w-[min(100%,calc(100vw-2rem))] max-w-none",
39} as const;
40 
41type DialogContentSize = keyof typeof dialogContentSizeClassNames;
42 
43// … truncated