Dialog

1import * as React from "react";
2import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
3import { XIcon } from "lucide-react";
4 
5import { cn } from "@/lib/utils";
6 
7function Dialog({ ...props }: DialogPrimitive.Root.Props) {
8  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
9}
10 
11function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
12  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
13}
14 
15function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
16  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
17}
18 
19function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
20  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
21}
22 
23function DialogOverlay({
24  className,
25  ...props
26}: DialogPrimitive.Backdrop.Props) {
27  return (
28    <DialogPrimitive.Backdrop
29      data-slot="dialog-overlay"
30      className={cn(
31        "data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:animation-duration-[200ms] fixed inset-0 z-50 bg-black/50",
32        className
33      )}
34      {...props}
35    />
36  );
37}
38 
39function DialogContent({
40  className,
41  children,
42  showCloseButton = true,
43  ...props
44}: DialogPrimitive.Popup.Props & {
45  showCloseButton?: boolean;
46}) {
47  return (
48    <DialogPortal data-slot="dialog-portal">
49      <DialogOverlay />
50      <DialogPrimitive.Popup
51        data-slot="dialog-content"
52        className={cn(
53          "bg-background data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95 data-[closed]:animate-out data-[closed]:fade-out-0 data-[closed]:zoom-out-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
54          className
55        )}
56        {...props}
57      >
58        {children}
59        {showCloseButton && (
60          <DialogPrimitive.Close
61            data-slot="dialog-close"
62            className="ring-offset-background focus:ring-ring data-[open]:bg-accent data-[open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
63          >
64            <XIcon />
65            <span className="sr-only">Close</span>
66          </DialogPrimitive.Close>
67        )}
68// … truncated