Dialog

1"use client"
2 
3import * as React from "react"
4import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
5import { XIcon } from "lucide-react"
6 
7import { cn, modalSurfaceClasses } from "@/registry/lib/surface"
8import { ThemedPortalShell } from "@/registry/lib/portal-container"
9import { Button } from "@/registry/ui/button"
10 
11function Dialog({ ...props }: DialogPrimitive.Root.Props) {
12  return <DialogPrimitive.Root data-slot="dialog" {...props} />
13}
14 
15function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
16  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
17}
18 
19function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
20  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
21}
22 
23function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
24  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
25}
26 
27function DialogOverlay({
28  className,
29  ...props
30}: DialogPrimitive.Backdrop.Props) {
31  return (
32    <DialogPrimitive.Backdrop
33      data-slot="dialog-overlay"
34      className={cn(
35        "fixed inset-0 z-50 bg-foreground/24 duration-[var(--d-drift)] ease-[var(--ease-drift)] data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
36        className
37      )}
38      {...props}
39    />
40  )
41}
42 
43function DialogContent({
44  className,
45  children,
46  showCloseButton = true,
47  ...props
48}: DialogPrimitive.Popup.Props & {
49  showCloseButton?: boolean
50}) {
51  return (
52    <DialogPortal>
53      <ThemedPortalShell>
54        <DialogOverlay />
55        <DialogPrimitive.Popup
56          data-slot="dialog-content"
57          className={cn(
58            "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 p-4 font-sans text-sm sm:max-w-sm",
59            modalSurfaceClasses(),
60            className
61          )}
62          {...props}
63        >
64          {children}
65          {showCloseButton && (
66            <DialogPrimitive.Close
67              data-slot="dialog-close"
68              render={
69                <Button
70                  variant="ghost"
71                  className="absolute top-2 right-2"
72                  size="icon-sm"
73                />
74              }
75            >
76              <XIcon className="stroke-[1.5]" />
77              <span className="sr-only">Close</span>
78            </DialogPrimitive.Close>
79          )}
80        </DialogPrimitive.Popup>
81      </ThemedPortalShell>
82    </DialogPortal>
83  )
84}
85 
86// … truncated