modal

1import * as React from "react"
2import * as DialogPrimitive from "@radix-ui/react-dialog"
3import { cva, type VariantProps } from "class-variance-authority"
4import { X } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import "./modal.css"
8 
9/* ------------------------------------------------------------------ */
10/*  CVA                                                                */
11/* ------------------------------------------------------------------ */
12 
13const modalContentVariants = cva(
14  "modal-content fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 flex flex-col items-start animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
15  {
16    variants: {
17      size: {
18        sm: "w-[20rem]",
19        md: "w-[25rem]",
20        lg: "w-[35rem]",
21      },
22    },
23    defaultVariants: {
24      size: "md",
25    },
26  }
27)
28 
29const modalIconVariants = cva(
30  "modal-icon flex items-center justify-center shrink-0 size-[var(--layout-size-lg)] rounded-[var(--layout-radius-full)] [&_svg]:size-[var(--layout-size-xs)]",
31  {
32    variants: {
33      variant: {
34        brand: "modal-icon-brand",
35        destructive: "modal-icon-destructive",
36        success: "modal-icon-success",
37        warning: "modal-icon-warning",
38      },
39    },
40    defaultVariants: {
41      variant: "brand",
42    },
43  }
44)
45 
46/* ------------------------------------------------------------------ */
47/*  Modal                                                              */
48/* ------------------------------------------------------------------ */
49 
50function Modal({
51  ...props
52}: React.ComponentProps<typeof DialogPrimitive.Root>) {
53  return <DialogPrimitive.Root data-slot="modal" {...props} />
54}
55 
56/* ------------------------------------------------------------------ */
57/*  ModalTrigger                                                       */
58/* ------------------------------------------------------------------ */
59 
60function ModalTrigger({
61  ...props
62}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
63  return <DialogPrimitive.Trigger data-slot="modal-trigger" {...props} />
64}
65 
66/* ------------------------------------------------------------------ */
67/*  ModalOverlay                                                       */
68/* ------------------------------------------------------------------ */
69 
70function ModalOverlay({
71  className,
72  ...props
73}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
74  return (
75// … truncated