Dialog

1"use client";
2
3import { ComponentProps } from "react";
4
5import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
6
7import { cn } from "@/lib/utils";
8import { Button } from "@/components/ui/button";
9import { XIcon } from "lucide-react";
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        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-gray-900/20 duration-100 supports-backdrop-filter:backdrop-blur-xs",
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      <DialogOverlay />
54      <DialogPrimitive.Popup
55        data-slot="dialog-content"
56        className={cn(
57          "bg-card data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 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 rounded-lg p-6 text-base ring-0 duration-100 outline-none sm:max-w-sm shadow-[0_0_15px_-3px_rgb(0,0,0,0.1)]",
58          className
59        )}
60        {...props}
61      >
62        {children}
63        {showCloseButton && (
64          <DialogPrimitive.Close
65            data-slot="dialog-close"
66            render={
67              <Button
68                variant="ghost"
69                className="absolute top-2 right-2"
70                size="icon-sm"
71              />
72            }
73          >
74            <XIcon />
75            <span className="sr-only">Close</span>
76          </DialogPrimitive.Close>
77        )}
78// … truncated