Dialog

1"use client";
2 
3import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
4import type { ComponentProps } from "react";
5 
6import { cn } from "@/lib/utils";
7 
8function Dialog(props: DialogPrimitive.Root.Props) {
9  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
10}
11 
12function DialogTrigger(props: DialogPrimitive.Trigger.Props) {
13  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
14}
15 
16function DialogPortal(props: DialogPrimitive.Portal.Props) {
17  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
18}
19 
20function DialogClose(props: DialogPrimitive.Close.Props) {
21  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
22}
23 
24function DialogOverlay({
25  className,
26  ...props
27}: DialogPrimitive.Backdrop.Props) {
28  return (
29    <DialogPrimitive.Backdrop
30      className={cn(
31        "fade-in-0 fixed inset-0 z-50 animate-in bg-black/60 duration-200 motion-reduce:animate-none",
32        className
33      )}
34      data-slot="dialog-overlay"
35      {...props}
36    />
37  );
38}
39 
40function DialogContent({
41  children,
42  className,
43  ...props
44}: DialogPrimitive.Popup.Props) {
45  return (
46    <DialogPortal>
47      <DialogOverlay />
48      <DialogPrimitive.Popup
49        className={cn(
50          "fade-in-0 slide-in-from-bottom-2 fixed top-1/2 left-1/2 z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] animate-in gap-4 rounded-lg border border-border/60 bg-card p-6 duration-300 motion-reduce:animate-none",
51          className
52        )}
53        data-slot="dialog-content"
54        {...props}
55      >
56        {children}
57      </DialogPrimitive.Popup>
58    </DialogPortal>
59  );
60}
61 
62function DialogHeader({ className, ...props }: ComponentProps<"div">) {
63  return (
64    <div
65      className={cn("flex flex-col gap-1.5", className)}
66      data-slot="dialog-header"
67      {...props}
68    />
69  );
70}
71 
72function DialogFooter({ className, ...props }: ComponentProps<"div">) {
73  return (
74    <div
75      className={cn("flex justify-end gap-2", className)}
76      data-slot="dialog-footer"
77      {...props}
78    />
79  );
80}
81 
82function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
83  return (
84    <DialogPrimitive.Title
85      className={cn(
86        "text-balance font-semibold text-foreground text-lg tracking-tight",
87        className
88      )}
89      data-slot="dialog-title"
90      {...props}
91    />
92  );
93}
94 
95function DialogDescription({
96  className,
97  ...props
98}: DialogPrimitive.Description.Props) {
99  return (
100// … truncated