Modal

1"use client";
2 
3import * as React from "react";
4import * as DialogPrimitive from "@radix-ui/react-dialog";
5import { X } from "lucide-react";
6import { cva, type VariantProps } from "class-variance-authority";
7 
8import { cn } from "@/lib/utils";
9import {
10  overlaySurfaceVariants,
11  overlayVariants,
12  type OverlayProps,
13  type OverlaySurfaceProps,
14} from "@/components/ui/recipes";
15 
16/* ================================================================== */
17/*  MODAL — opinionated wrapper around Radix Dialog                    */
18/*  Difference from Dialog:                                            */
19/*  • size variants (sm / default / lg / full)                         */
20/*  • centered by default, optional top-aligned                        */
21/*  • built-in close icon                                              */
22/* ================================================================== */
23 
24const modalContentVariants = cva(
25  [
26    "fixed z-50 grid gap-4 p-5",
27    "data-[state=open]:animate-in data-[state=closed]:animate-out",
28    "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
29    "data-[state=open]:[--poyraz-enter-scale:0.98] data-[state=closed]:[--poyraz-exit-scale:0.98]",
30    "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] motion-reduce:duration-100",
31  ].join(" "),
32  {
33    variants: {
34      size: {
35        sm: "w-full max-w-xs",
36        default: "w-full max-w-sm",
37        lg: "w-full max-w-lg",
38        xl: "w-full max-w-2xl",
39        full: "w-[calc(100vw-2rem)] h-[calc(100vh-2rem)]",
40      },
41      position: {
42        center:
43          "left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
44        top: "left-[50%] top-[10%] translate-x-[-50%] data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[5%]",
45      },
46    },
47    defaultVariants: {
48      size: "default",
49      position: "center",
50    },
51  },
52);
53 
54/* ── Root ─────────────────────────────────────────────────────────── */
55 
56const Modal = DialogPrimitive.Root;
57 
58// … truncated