dialog

1"use client"
2 
3import * as React from "react"
4 
5import { Dialog as DialogPrimitive, dialogAnatomy } from "@ark-ui/react/dialog"
6import { type HTMLArkProps, ark } from "@ark-ui/react/factory"
7import { Portal } from "@ark-ui/react/portal"
8import { XIcon } from "lucide-react"
9 
10import { cn } from "@/lib/utils"
11 
12const parts = dialogAnatomy.extendWith("header").build()
13 
14const Dialog = DialogPrimitive.Root
15 
16const DialogBackdrop = React.forwardRef<
17  React.ElementRef<typeof DialogPrimitive.Backdrop>,
18  DialogPrimitive.BackdropProps
19>(({ className, ...props }, ref) => (
20  <DialogPrimitive.Backdrop
21    ref={ref}
22    className={cn(
23      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[--z-index] bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
24      className
25    )}
26    {...props}
27  />
28))
29DialogBackdrop.displayName = "DialogBackdrop"
30 
31const DialogCloseTrigger = DialogPrimitive.CloseTrigger
32 
33const DialogContent = React.forwardRef<
34  React.ElementRef<typeof DialogPrimitive.Content>,
35  DialogPrimitive.ContentProps
36>(({ className, children, ...props }, ref) => (
37  <Portal>
38    <DialogBackdrop />
39    <DialogPrimitive.Positioner>
40      <DialogPrimitive.Content
41        ref={ref}
42        className={cn(
43          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 -translate-x-1/2 -translate-y-1/2 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-[--z-index] grid max-h-[calc(100%-2rem)] w-full max-w-[calc(100%-2rem)] gap-4 overflow-y-auto rounded-xl border bg-background p-6 shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-100",
44          className
45        )}
46        {...props}
47      >
48        {children}
49        <DialogPrimitive.CloseTrigger className="group absolute top-3 right-3 flex size-7 items-center justify-center rounded outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none">
50          <XIcon className="size-4 opacity-60 transition-opacity group-hover:opacity-100" />
51          <span className="sr-only">Close</span>
52        </DialogPrimitive.CloseTrigger>
53      </DialogPrimitive.Content>
54    </DialogPrimitive.Positioner>
55  </Portal>
56))
57DialogContent.displayName = "DialogContent"
58 
59const DialogContext = DialogPrimitive.Context
60 
61const DialogDescription = React.forwardRef<
62  React.ElementRef<typeof DialogPrimitive.Description>,
63// … truncated