Dialog

1"use client";
2 
3import { X } from "@phosphor-icons/react";
4import { cva, type VariantProps } from "class-variance-authority";
5import { Dialog as DialogPrimitive } from "radix-ui";
6import * as React from "react";
7import { type MaterialAxisProps, type MaterialProps, materialSurface, splitAxisProps } from "@/lib/material";
8import { cn } from "@/lib/utils";
9import { Button } from "./button";
10 
11/* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
12const dialogContentVariants = cva("", {
13  variants: {
14    variant: {
15      default: "bg-background border",
16      glass: "text-foreground",
17    },
18  },
19  defaultVariants: {
20    variant: "glass",
21  },
22});
23 
24/* Role: bordered adaptive glass at the elevated blur tier. */
25const ROLE: MaterialProps = {
26  border: true,
27  size: "lg",
28};
29 
30const Dialog = DialogPrimitive.Root;
31 
32const DialogTrigger = DialogPrimitive.Trigger;
33 
34const DialogPortal = DialogPrimitive.Portal;
35 
36const DialogClose = DialogPrimitive.Close;
37 
38const DialogOverlay = React.forwardRef<
39  React.ElementRef<typeof DialogPrimitive.Overlay>,
40  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
41>(({ className, ...props }, ref) => (
42  <DialogPrimitive.Overlay
43    ref={ref}
44    data-slot="dialog-overlay"
45    className={cn(
46      "fixed inset-0 z-50 bg-transparent backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
47      className,
48    )}
49    {...props}
50  />
51));
52DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
53 
54const DialogContent = React.forwardRef<
55  React.ElementRef<typeof DialogPrimitive.Content>,
56  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
57    VariantProps<typeof dialogContentVariants> &
58    MaterialAxisProps & {
59      /** Elevated backdrop blur (folded from the glass wrapper). */
60      animated?: boolean;
61      showCloseButton?: boolean;
62    }
63>(({ className, variant = "glass", children, animated = true, showCloseButton = true, ...props }, ref) => {
64  const [axes, rest] = splitAxisProps(props);
65  const m = materialSurface(variant === "default" ? null : ROLE, axes);
66 
67  return (
68    <DialogPortal data-slot="dialog-portal">
69      <DialogOverlay />
70      <DialogPrimitive.Content
71        ref={ref}
72        data-slot="dialog-content"
73        data-material={m?.["data-material"]}
74        className={cn(
75          m?.className,
76// … truncated