Glass Dialog

1"use client";
2 
3import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
4import { GlassSurface } from "@/components/ui/glass-surface";
5import { cn } from "@/lib/utils";
6 
7const GlassDialog = DialogPrimitive.Root;
8const GlassDialogTrigger = DialogPrimitive.Trigger;
9const GlassDialogClose = DialogPrimitive.Close;
10 
11interface GlassDialogContentProps extends DialogPrimitive.Popup.Props {
12  tint?: number;
13  tintColor?: string;
14}
15 
16function GlassDialogContent({
17  tint = 0.75,
18  tintColor,
19  className,
20  children,
21  ...props
22}: GlassDialogContentProps) {
23  return (
24    <DialogPrimitive.Portal>
25      <DialogPrimitive.Backdrop className="fixed inset-0 z-50 bg-black/35 backdrop-blur-[8px] transition-opacity duration-300 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0" />
26      <DialogPrimitive.Popup
27        className={cn(
28          "-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 outline-none transition-[scale,opacity] duration-300 ease-[cubic-bezier(0.34,1.3,0.64,1)] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-out data-[starting-style]:scale-[0.85]",
29          className
30        )}
31        {...props}
32      >
33        <GlassSurface blur={24} radius={28} tint={tint} tintColor={tintColor}>
34          <div className="w-[min(calc(100vw-2rem),400px)] p-6 text-[#1d1d1f] dark:text-[#f5f5f7]">
35            {children}
36          </div>
37        </GlassSurface>
38      </DialogPrimitive.Popup>
39    </DialogPrimitive.Portal>
40  );
41}
42 
43function GlassDialogTitle({
44  className,
45  ...props
46}: DialogPrimitive.Title.Props) {
47  return (
48    <DialogPrimitive.Title
49      className={cn(
50        "font-semibold text-[17px] leading-snug tracking-tight",
51        className
52      )}
53      {...props}
54    />
55  );
56}
57 
58function GlassDialogDescription({
59  className,
60  ...props
61}: DialogPrimitive.Description.Props) {
62  return (
63    <DialogPrimitive.Description
64      className={cn("mt-1.5 text-[14px] leading-relaxed opacity-65", className)}
65      {...props}
66    />
67  );
68}
69 
70export {
71  GlassDialog,
72  GlassDialogClose,
73  GlassDialogContent,
74  GlassDialogDescription,
75  GlassDialogTitle,
76  GlassDialogTrigger,
77};
78export type { GlassDialogContentProps };