Dialog

1"use client";
2 
3import * as React from "react";
4import * as DialogPrimitive from "@radix-ui/react-dialog";
5import { X } from "lucide-react";
6 
7import { cn } from "@/lib/utils";
8import {
9  overlaySurfaceVariants,
10  overlayVariants,
11  type OverlayProps,
12  type OverlaySurfaceProps,
13} from "@/components/ui/recipes";
14 
15const Dialog = DialogPrimitive.Root;
16 
17const DialogTrigger = DialogPrimitive.Trigger;
18 
19const DialogPortal = DialogPrimitive.Portal;
20 
21const DialogClose = DialogPrimitive.Close;
22 
23const DialogOverlay = React.forwardRef<
24  React.ElementRef<typeof DialogPrimitive.Overlay>,
25  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & OverlayProps
26>(({ className, tone, ...props }, ref) => (
27  <DialogPrimitive.Overlay
28    ref={ref}
29    className={cn(overlayVariants({ tone }), className)}
30    {...props}
31  />
32));
33DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
34 
35export interface DialogContentProps
36  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, OverlaySurfaceProps {
37  showClose?: boolean;
38  mobile?: "floating" | "fullscreen";
39  overlayTone?: NonNullable<OverlayProps["tone"]>;
40  overlayClassName?: string;
41}
42 
43const DialogContent = React.forwardRef<
44  React.ElementRef<typeof DialogPrimitive.Content>,
45  DialogContentProps
46>(
47  (
48    {
49      className,
50      children,
51      surface,
52      radius,
53      showClose = true,
54      mobile = "floating",
55      overlayTone,
56      overlayClassName,
57      ...props
58    },
59    ref,
60  ) => (
61    <DialogPortal>
62      <DialogOverlay tone={overlayTone} className={overlayClassName} />
63      <DialogPrimitive.Content
64        ref={ref}
65        className={cn(
66          overlaySurfaceVariants({ surface, radius }),
67          "fixed left-1/2 top-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto p-5",
68          "data-[state=open]:animate-in data-[state=closed]:animate-out",
69          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
70          "data-[state=open]:[--poyraz-enter-scale:0.98] data-[state=closed]:[--poyraz-exit-scale:0.98]",
71          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
72          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
73          "motion-reduce:[--poyraz-enter-scale:1] motion-reduce:[--poyraz-exit-scale:1] motion-reduce:[--poyraz-enter-translate-x:0] motion-reduce:[--poyraz-enter-translate-y:0]",
74// … truncated