Dialog

1"use client"
2 
3import * as React from "react"
4import {
5  Dialog as BaseDialog,
6  DialogContent as BaseDialogContent,
7  DialogDescription,
8  DialogFooter,
9  DialogHeader,
10  DialogTitle,
11  DialogTrigger,
12} from "@/components/ui/dialog"
13import { cn } from "@/lib/utils"
14import type { GlassCustomization } from "@/lib/glass-utils"
15import { hoverEffects, type HoverEffect } from "@/lib/hover-effects"
16 
17export interface DialogContentProps extends Omit<React.ComponentProps<typeof BaseDialogContent>, "glass"> {
18  variant?: "default" | "glass" | "glassSubtle" | "frosted" | "fluted" | "crystal"
19  animated?: boolean
20  hover?: HoverEffect
21  glass?: GlassCustomization
22}
23 
24/**
25 * Glass UI Dialog - Enhanced dialog with glassy effects and animations
26 * 
27 * @example
28 * ```tsx
29 * <DialogContent 
30 *   glass={{
31 *     color: "rgba(139, 92, 246, 0.15)",
32 *     blur: 40,
33 *     outline: "rgba(139, 92, 246, 0.3)"
34 *   }}
35 * >
36 *   Dialog content
37 * </DialogContent>
38 * ```
39 */
40export const DialogContent = React.forwardRef<
41  React.ElementRef<typeof BaseDialogContent>,
42  DialogContentProps
43>(({ className, variant = "glass", animated = true, hover = "none", glass, children, ...props }, ref) => {
44  return (
45    <BaseDialogContent
46      ref={ref}
47      variant={variant}
48      glass={glass}
49      className={cn(
50        "relative overflow-hidden",
51        animated && "backdrop-blur-[var(--blur-lg)]",
52        hoverEffects({ hover }),
53        className
54      )}
55      {...props}
56    >
57      {children}
58    </BaseDialogContent>
59  )
60})
61DialogContent.displayName = "DialogContent"
62 
63export {
64  BaseDialog as Dialog,
65  DialogTrigger,
66  DialogHeader,
67  DialogFooter,
68  DialogTitle,
69  DialogDescription,
70}
71