@moontra/moonui-pro 2.20.0 → 2.20.2

package/src/components/ui/dialog.tsx

@@ -3,16 +3,29 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Check, Loader2, X } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Check, Loader2, X, AlertTriangle, Info, HelpCircle } from "lucide-react";
 
 import { cn } from "../../lib/utils";
 
 /**
- * Premium Dialog Component
+ * Premium Dialog Component Pro
  *
- * Modern, accessible and customizable modal dialog component.
- * Enhances user experience with variants, sizes and rich features.
- * Provides a premium appearance with dark and light mode compatibility and fluid animations.
+ * Gelişmiş, erişilebilir ve özelleştirilebilir modal dialog component'i.
+ * Kullanıcı deneyimini variants, boyutlar ve zengin özelliklerle geliştirir.
+ * Premium görünüm sunar, dark ve light mode uyumlu, akıcı animasyonlar.
+ * 
+ * Pro Özellikler:
+ * - Gelişmiş animasyon seçenekleri (bounce, elastic, spring, rotate)
+ * - Stacked dialog desteği (birden fazla dialog)
+ * - Confirmation dialog presets (silme, kaydet, çıkış onayları)
+ * - Form validation desteği ve otomatik hata yönetimi
+ * - Responsive breakpoint davranışları
+ * - Glass, gradient ve neon visual variants
+ * - Custom backdrop effects ve blur seçenekleri
+ * - Spring physics ile gelişmiş animasyonlar
+ * - Accessibility improvements ve keyboard navigation
+ * - Auto-close prevention ve confirmation prompts
  */
 
 const MoonUIDialogPro = DialogPrimitive.Root;
@@ -21,23 +34,34 @@ const MoonUIDialogPortal = DialogPrimitive.Portal;
 const MoonUIDialogClosePro = DialogPrimitive.Close;
 
 const overlayVariants = cva(
-    "fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+    "fixed inset-0 z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
     {
         variants: {
             variant: {
-                default: "bg-black/80",
-                subtle: "bg-black/60",
+                default: "bg-black/80 backdrop-blur-sm",
+                subtle: "bg-black/60 backdrop-blur-sm",
                 blur: "bg-black/40 backdrop-blur-md",
                 minimal: "bg-black/20 backdrop-blur-sm",
+                gradient: "bg-gradient-to-br from-black/80 via-purple-900/20 to-black/80 backdrop-blur-md",
+                dark: "bg-black/90 backdrop-blur-lg",
+            },
+            blurAmount: {
+                none: "",
+                sm: "backdrop-blur-sm",
+                md: "backdrop-blur-md",
+                lg: "backdrop-blur-lg",
+                xl: "backdrop-blur-xl",
             },
             animation: {
                 default: "duration-200",
                 slow: "duration-300",
                 fast: "duration-100",
+                spring: "duration-500",
             },
         },
         defaultVariants: {
             variant: "default",
+            blurAmount: "sm",
             animation: "default",
         },
     }
@@ -45,15 +69,22 @@ const overlayVariants = cva(
 
 interface DialogOverlayProps
     extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>,
-        VariantProps<typeof overlayVariants> {}
+        VariantProps<typeof overlayVariants> {
+    /** Custom backdrop effects */
+    customBackdrop?: boolean;
+}
 
 const MoonUIDialogOverlayPro = React.forwardRef<
     React.ElementRef<typeof DialogPrimitive.Overlay>,
     DialogOverlayProps
->(({ className, variant, animation, ...props }, ref) => (
+>(({ className, variant, blurAmount, animation, customBackdrop = false, ...props }, ref) => (
     <DialogPrimitive.Overlay
         ref={ref}
-        className={cn(overlayVariants({ variant, animation }), className)}
+        className={cn(
+            overlayVariants({ variant, blurAmount, animation }),
+            customBackdrop && "before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-primary/10 before:to-transparent",
+            className
+        )}
         {...props}
     />
 ));
@@ -64,20 +95,28 @@ const dialogContentVariants = cva(
     {
         variants: {
             variant: {
-                default: "border-gray-200 dark:border-gray-700",
-                primary: "border-primary/20 dark:border-primary/30",
-                secondary: "border-gray-300 dark:border-gray-600",
-                ghost: "border-transparent shadow-xl",
-                destructive: "border-error/20 dark:border-error/30",
+                default: "border-gray-200 dark:border-gray-700 bg-background",
+                primary: "border-primary/20 dark:border-primary/30 bg-background",
+                secondary: "border-gray-300 dark:border-gray-600 bg-background",
+                ghost: "border-transparent shadow-xl bg-background",
+                destructive: "border-error/20 dark:border-error/30 bg-background",
+                glass: "border-white/10 dark:border-white/10 bg-white/5 dark:bg-black/5 backdrop-blur-xl shadow-2xl",
+                gradient: "border-0 bg-gradient-to-br from-background/90 via-primary/5 to-background/90 backdrop-blur-md shadow-2xl",
+                neon: "border-2 border-primary/50 bg-background shadow-[0_0_20px_rgba(59,130,246,0.3)] dark:shadow-[0_0_20px_rgba(59,130,246,0.5)]",
             },
             size: {
-                xs: "max-w-xs p-4",
-                sm: "max-w-sm p-5",
-                default: "max-w-lg p-6",
-                md: "max-w-md p-6",
-                lg: "max-w-2xl p-7",
-                xl: "max-w-4xl p-8",
+                xs: "max-w-[280px] p-3",
+                sm: "max-w-[360px] p-4",
+                md: "max-w-[480px] p-5",
+                default: "max-w-[520px] p-6",
+                lg: "max-w-[680px] p-6",
+                xl: "max-w-[860px] p-8",
+                "2xl": "max-w-[1024px] p-8",
+                "3xl": "max-w-[1280px] p-10",
+                "4xl": "max-w-[1536px] p-10",
                 full: "max-w-[95vw] max-h-[95vh] p-6",
+                fullscreen: "w-screen h-screen max-w-none max-h-none rounded-none p-8",
+                responsive: "max-w-[95vw] sm:max-w-[480px] md:max-w-[640px] lg:max-w-[768px] xl:max-w-[1024px] p-4 sm:p-6",
             },
             radius: {
                 none: "rounded-none",
@@ -88,17 +127,28 @@ const dialogContentVariants = cva(
                 full: "rounded-3xl",
             },
             animation: {
-                default:
-                    "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-                fade: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-                zoom: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-                slide: "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+                // Framer Motion kullanıldığında CSS animasyonları devre dışı
+                default: "",
+                fade: "", 
+                zoom: "",
+                slide: "",
+                slideUp: "",
+                slideLeft: "",
+                slideRight: "",
+                bounce: "",
+                rotate: "",
+                rotateScale: "",
+                elastic: "",
+                spring: "",
+                flip: "",
+                swirl: "",
                 none: "",
             },
             position: {
                 default: "top-[50%]",
                 top: "top-[5%]",
                 bottom: "bottom-[5%] top-auto translate-y-0",
+                center: "top-[50%]",
             },
         },
         defaultVariants: {
@@ -118,6 +168,8 @@ interface MoonUIDialogContentProProps
     hideCloseButton?: boolean;
     /** Overlay varyantı */
     overlayVariant?: VariantProps<typeof overlayVariants>["variant"];
+    /** Overlay blur miktarı */
+    overlayBlur?: VariantProps<typeof overlayVariants>["blurAmount"];
     /** Overlay animasyonu */
     overlayAnimation?: VariantProps<typeof overlayVariants>["animation"];
     /** İçerik başlığı (hızlı kullanım için) */
@@ -132,6 +184,22 @@ interface MoonUIDialogContentProProps
     success?: boolean;
     /** Özel onClose handler */
     onClose?: () => void;
+    /** Animasyon süresi (saniye) */
+    animationDuration?: number;
+    /** Spring physics animasyonları etkinleştir */
+    enableSpringPhysics?: boolean;
+    /** Stack edilmiş dialog desteği için z-index */
+    stackLevel?: number;
+    /** Confirmation dialog türü */
+    confirmationType?: 'info' | 'warning' | 'error' | 'success';
+    /** Form validation desteği için */
+    hasFormValidation?: boolean;
+    /** Responsive breakpoint davranışı */
+    responsive?: boolean;
+    /** Custom backdrop effects */
+    customBackdrop?: boolean;
+    /** Close animasyonu */
+    closeAnimation?: boolean;
 }
 
 const MoonUIDialogContentPro = React.forwardRef<
@@ -148,6 +216,7 @@ const MoonUIDialogContentPro = React.forwardRef<
             animation,
             position,
             overlayVariant = "default",
+            overlayBlur = "sm",
             overlayAnimation = "default",
             hideCloseButton = false,
             title,
@@ -156,23 +225,221 @@ const MoonUIDialogContentPro = React.forwardRef<
             loading = false,
             success = false,
             onClose,
+            animationDuration = 0.2,
+            enableSpringPhysics = false,
+            stackLevel = 0,
+            confirmationType,
+            hasFormValidation = false,
+            responsive = true,
+            customBackdrop = false,
+            closeAnimation = true,
             ...props
         },
         ref
     ) => {
-        // Capturing the close function through the Radix Dialog API
-        const handleClose = () => {
+        const [isClosing, setIsClosing] = React.useState(false);
+        
+        // Stack edilmiş dialog'lar için z-index hesaplama
+        const zIndex = 50 + stackLevel * 10;
+        
+        // Confirmation dialog presets
+        const getConfirmationIcon = () => {
+            switch (confirmationType) {
+                case 'info':
+                    return <Info className="h-5 w-5 text-blue-500" />;
+                case 'warning':
+                    return <AlertTriangle className="h-5 w-5 text-yellow-500" />;
+                case 'error':
+                    return <AlertTriangle className="h-5 w-5 text-red-500" />;
+                case 'success':
+                    return <Check className="h-5 w-5 text-green-500" />;
+                default:
+                    return null;
+            }
+        };
+        
+        // Animasyon variants for framer-motion
+        const getAnimationVariants = () => {
+            const duration = animationDuration;
+            const springConfig = enableSpringPhysics ? {
+                type: "spring",
+                stiffness: 300,
+                damping: 30
+            } : {
+                type: "tween",
+                duration
+            };
+            
+            // Debug logs
+            if (process.env.NODE_ENV === 'development') {
+                console.log('Dialog Animation Debug:', {
+                    animation,
+                    duration,
+                    enableSpringPhysics,
+                    springConfig
+                });
+            }
+            
+            switch (animation) {
+                case 'bounce':
+                    return {
+                        initial: { scale: 0.8, opacity: 0 },
+                        animate: { 
+                            scale: 1, 
+                            opacity: 1,
+                            transition: {
+                                scale: {
+                                    type: "spring",
+                                    stiffness: 300,
+                                    damping: 10,
+                                    restDelta: 0.001
+                                }
+                            }
+                        },
+                        exit: { scale: 0.8, opacity: 0 },
+                        transition: { duration: duration * 1.2 }
+                    };
+                case 'zoom':
+                    return {
+                        initial: { scale: 0, opacity: 0 },
+                        animate: { scale: 1, opacity: 1 },
+                        exit: { scale: 0, opacity: 0 },
+                        transition: { ...springConfig, duration: duration * 0.8 }
+                    };
+                case 'fade':
+                    return {
+                        initial: { opacity: 0 },
+                        animate: { opacity: 1 },
+                        exit: { opacity: 0 },
+                        transition: { duration }
+                    };
+                case 'slide':
+                    return {
+                        initial: { opacity: 0, translateY: 100 },
+                        animate: { opacity: 1, translateY: 0 },
+                        exit: { opacity: 0, translateY: 100 },
+                        transition: springConfig
+                    };
+                case 'rotate':
+                    return {
+                        initial: { scale: 0.8, opacity: 0, rotate: -10 },
+                        animate: { scale: 1, opacity: 1, rotate: 0 },
+                        exit: { scale: 0.8, opacity: 0, rotate: 10 },
+                        transition: springConfig
+                    };
+                case 'elastic':
+                    return {
+                        initial: { scale: 0.3, opacity: 0 },
+                        animate: { scale: 1, opacity: 1 },
+                        exit: { scale: 0.3, opacity: 0 },
+                        transition: {
+                            type: "spring",
+                            stiffness: 400,
+                            damping: 15
+                        }
+                    };
+                case 'spring':
+                    return {
+                        initial: { scale: 0.9, opacity: 0, translateY: 20 },
+                        animate: { scale: 1, opacity: 1, translateY: 0 },
+                        exit: { scale: 0.9, opacity: 0, translateY: 20 },
+                        transition: {
+                            type: "spring",
+                            stiffness: 500,
+                            damping: 25
+                        }
+                    };
+                case 'slideUp':
+                    return {
+                        initial: { opacity: 0, translateY: -100 },
+                        animate: { opacity: 1, translateY: 0 },
+                        exit: { opacity: 0, translateY: -100 },
+                        transition: springConfig
+                    };
+                case 'slideLeft':
+                    return {
+                        initial: { opacity: 0, translateX: -100 },
+                        animate: { opacity: 1, translateX: 0 },
+                        exit: { opacity: 0, translateX: -100 },
+                        transition: springConfig
+                    };
+                case 'slideRight':
+                    return {
+                        initial: { opacity: 0, translateX: 100 },
+                        animate: { opacity: 1, translateX: 0 },
+                        exit: { opacity: 0, translateX: 100 },
+                        transition: springConfig
+                    };
+                case 'flip':
+                    return {
+                        initial: { rotateX: -90, opacity: 0 },
+                        animate: { rotateX: 0, opacity: 1 },
+                        exit: { rotateX: 90, opacity: 0 },
+                        transition: { ...springConfig, duration: duration * 1.2 }
+                    };
+                case 'swirl':
+                    return {
+                        initial: { rotate: -540, scale: 0, opacity: 0 },
+                        animate: { rotate: 0, scale: 1, opacity: 1 },
+                        exit: { rotate: 540, scale: 0, opacity: 0 },
+                        transition: { ...springConfig, duration: duration * 1.5 }
+                    };
+                case 'rotateScale':
+                    return {
+                        initial: { rotate: -90, scale: 0, opacity: 0 },
+                        animate: { rotate: 0, scale: 1, opacity: 1 },
+                        exit: { rotate: 90, scale: 0, opacity: 0 },
+                        transition: springConfig
+                    };
+                default:
+                    return {
+                        initial: { scale: 0.95, opacity: 0 },
+                        animate: { scale: 1, opacity: 1 },
+                        exit: { scale: 0.95, opacity: 0 },
+                        transition: springConfig
+                    };
+            }
+        };
+        
+        // Close handler with animation
+        const handleClose = async () => {
+            if (closeAnimation) {
+                setIsClosing(true);
+                // Animasyon süresini bekle
+                await new Promise(resolve => setTimeout(resolve, animationDuration * 1000));
+            }
             if (onClose) {
                 onClose();
             }
         };
+        
+        const animationVariants = getAnimationVariants();
+        const displayIcon = confirmationType ? getConfirmationIcon() : icon;
+        
+        // Debug log
+        React.useEffect(() => {
+            if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
+                console.log('🎭 Dialog Animation Debug:', { 
+                    animation, 
+                    size,
+                    variant,
+                    enableSpringPhysics,
+                    animationVariants,
+                    hasAnimation: !!animation,
+                    animationType: typeof animation
+                });
+            }
+        }, [animation, size, variant, enableSpringPhysics]);
 
         return (
             <MoonUIDialogPortal>
                 <MoonUIDialogOverlayPro
                     variant={overlayVariant}
+                    blurAmount={overlayBlur}
                     animation={overlayAnimation}
+                    customBackdrop={customBackdrop}
                     onClick={hideCloseButton ? undefined : handleClose}
+                    style={{ zIndex }}
                 />
                 <DialogPrimitive.Content
                     ref={ref}
@@ -180,64 +447,119 @@ const MoonUIDialogContentPro = React.forwardRef<
                     onInteractOutside={
                         hideCloseButton ? undefined : handleClose
                     }
-                    className={cn(
-                        dialogContentVariants({
-                            variant,
-                            size,
-                            radius,
-                            animation,
-                            position,
-                        }),
-                        "outline-none",
-                        loading && "pointer-events-none",
-                        success && "border-success/40",
-                        className
-                    )}
+                    className="outline-none"
                     {...props}
+                    asChild
                 >
-                    {/* Başlık ve açıklama varsa otomatik olarak DialogHeader oluştur */}
-                    {(title || description || icon) && (
-                        <MoonUIDialogHeaderPro className="flex gap-4">
-                            {/* İkon veya loading/success durumları */}
-                            {(icon || loading || success) && (
-                                <div className="flex shrink-0 items-center justify-center">
-                                    {loading && (
-                                        <Loader2 className="h-5 w-5 animate-spin text-primary" />
-                                    )}
-                                    {success && (
-                                        <Check className="h-5 w-5 text-success" />
+                    <motion.div
+                        initial={{
+                            ...animationVariants.initial,
+                            x: "-50%",
+                            y: "-50%"
+                        }}
+                        animate={{
+                            ...animationVariants.animate,
+                            x: "-50%",
+                            y: "-50%"
+                        }}
+                        exit={{
+                            ...animationVariants.exit,
+                            x: "-50%",
+                            y: "-50%"
+                        }}
+                        transition={animationVariants.transition}
+                        style={{ 
+                            zIndex: zIndex + 1,
+                            position: 'fixed',
+                            left: '50%',
+                            top: '50%'
+                        }}
+                        className={cn(
+                            dialogContentVariants({
+                                variant: confirmationType ? 
+                                    (confirmationType === 'error' ? 'destructive' : 
+                                     confirmationType === 'success' ? 'primary' : variant) : variant,
+                                size: responsive ? (typeof window !== 'undefined' && window.innerWidth < 640 ? 'full' : size) : size,
+                                radius,
+                                animation: 'none', // Framer Motion handles animation
+                                position,
+                            }),
+                            "outline-none",
+                            loading && "pointer-events-none",
+                            success && "border-success/40",
+                            hasFormValidation && "pb-2", // Extra space for validation messages
+                            isClosing && "pointer-events-none",
+                            className
+                        )}
+                    >
+                        {/* Auto-generated header for quick usage */}
+                        {(title || description || displayIcon || loading || success) && (
+                            <MoonUIDialogHeaderPro className={cn(
+                                "flex gap-4",
+                                confirmationType && "items-start"
+                            )}>
+                                {/* Icon or status indicators */}
+                                {(displayIcon || loading || success) && (
+                                    <div className="flex shrink-0 items-center justify-center">
+                                        {loading && (
+                                            <Loader2 className="h-5 w-5 animate-spin text-primary" />
+                                        )}
+                                        {success && !loading && (
+                                            <Check className="h-5 w-5 text-success" />
+                                        )}
+                                        {!loading && !success && displayIcon && (
+                                            <span className={cn(
+                                                confirmationType ? "" : "text-primary"
+                                            )}>
+                                                {displayIcon}
+                                            </span>
+                                        )}
+                                    </div>
+                                )}
+                                <div className="flex-1">
+                                    {title && (
+                                        <MoonUIDialogTitlePro className={cn(
+                                            confirmationType === 'error' && "text-red-600 dark:text-red-400",
+                                            confirmationType === 'warning' && "text-yellow-600 dark:text-yellow-400",
+                                            confirmationType === 'success' && "text-green-600 dark:text-green-400",
+                                            confirmationType === 'info' && "text-blue-600 dark:text-blue-400"
+                                        )}>
+                                            {title}
+                                        </MoonUIDialogTitlePro>
                                     )}
-                                    {!loading && !success && icon && (
-                                        <span className="text-primary">
-                                            {icon}
-                                        </span>
+                                    {description && (
+                                        <MoonUIDialogDescriptionPro>
+                                            {description}
+                                        </MoonUIDialogDescriptionPro>
                                     )}
                                 </div>
-                            )}
-                            <div className="flex-1">
-                                {title && <MoonUIDialogTitlePro>{title}</MoonUIDialogTitlePro>}
-                                {description && (
-                                    <MoonUIDialogDescriptionPro>
-                                        {description}
-                                    </MoonUIDialogDescriptionPro>
-                                )}
-                            </div>
-                        </MoonUIDialogHeaderPro>
-                    )}
+                            </MoonUIDialogHeaderPro>
+                        )}
 
-                    {/* Main content */}
-                    {children}
+                        {/* Main content */}
+                        {children}
+                        
+                        {/* Form validation messages area */}
+                        {hasFormValidation && (
+                            <div id="dialog-validation-messages" className="mt-2 min-h-[20px]" />
+                        )}
 
-                    {/* Close button */}
-                    {!hideCloseButton && (
-                        <DialogPrimitive.Close
-                            onClick={handleClose}
-                            className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 disabled:pointer-events-none dark:text-gray-300 dark:hover:text-white"
-                        >
-                            <X className="h-4 w-4" />
-                            <span className="sr-only">Close</span>
-                        </DialogPrimitive.Close>
-                    )}
+                        {/* Close button */}
+                        {!hideCloseButton && (
+                            <DialogPrimitive.Close
+                                onClick={handleClose}
+                                className={cn(
+                                    "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-all duration-200",
+                                    "hover:opacity-100 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2",
+                                    "disabled:pointer-events-none dark:text-gray-300 dark:hover:text-white",
+                                    isClosing && "opacity-0 pointer-events-none"
+                                )}
+                            >
+                                <X className="h-4 w-4" />
+                                <span className="sr-only">Close</span>
+                            </DialogPrimitive.Close>
+                        )}
+                    </motion.div>
                 </DialogPrimitive.Content>
             </MoonUIDialogPortal>
         );
@@ -309,17 +631,96 @@ MoonUIDialogDescriptionPro.displayName = DialogPrimitive.Description.displayName
  */
 const MoonUIDialogFormPro = React.forwardRef<
     HTMLFormElement,
-    React.HTMLAttributes<HTMLFormElement>
->(({ className, ...props }, ref) => (
-    <form
-        ref={ref}
-        className={cn("flex flex-col gap-4", className)}
-        {...props}
-    />
-));
-MoonUIDialogFormPro.displayName = "DialogForm";
+    React.HTMLAttributes<HTMLFormElement> & {
+        /** Form validation enabled */
+        enableValidation?: boolean;
+        /** Form submission handler */
+        onSubmit?: (e: React.FormEvent) => void | Promise<void>;
+        /** Loading state during form submission */
+        isSubmitting?: boolean;
+    }
+>(({ className, enableValidation = false, onSubmit, isSubmitting = false, ...props }, ref) => {
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (onSubmit && !isSubmitting) {
+            await onSubmit(e);
+        }
+    };
+    
+    return (
+        <form
+            ref={ref}
+            className={cn(
+                "flex flex-col gap-4",
+                isSubmitting && "pointer-events-none opacity-75",
+                className
+            )}
+            onSubmit={handleSubmit}
+            noValidate={!enableValidation}
+            {...props}
+        />
+    );
+});
+MoonUIDialogFormPro.displayName = "MoonUIDialogFormPro";
 
-export { MoonUIDialogPro,
+/**
+ * Confirmation Dialog Presets - Hazır dialog türleri
+ */
+const confirmationPresets = {
+    deleteConfirmation: {
+        confirmationType: 'error' as const,
+        title: 'Silme Onayı',
+        description: 'Bu işlem geri alınamaz. Devam etmek istediğinizden emin misiniz?',
+        variant: 'destructive' as const,
+    },
+    saveConfirmation: {
+        confirmationType: 'info' as const,
+        title: 'Değişiklikleri Kaydet',
+        description: 'Yaptığınız değişiklikler kaydedilecek. Onaylıyor musunuz?',
+        variant: 'primary' as const,
+    },
+    exitConfirmation: {
+        confirmationType: 'warning' as const,
+        title: 'Çıkış Onayı',
+        description: 'Kaydedilmemiş değişiklikleriniz kaybolacak. Çıkmak istediğinizden emin misiniz?',
+        variant: 'secondary' as const,
+    },
+    successNotification: {
+        confirmationType: 'success' as const,
+        title: 'İşlem Başarılı',
+        description: 'İşleminiz başarıyla tamamlandı.',
+        variant: 'primary' as const,
+    }
+};
+
+/**
+ * Stacked Dialog Hook - Birden fazla dialog yönetimi
+ */
+const useStackedDialog = () => {
+    const [dialogStack, setDialogStack] = React.useState<string[]>([]);
+    
+    const pushDialog = (id: string) => {
+        setDialogStack(prev => [...prev, id]);
+    };
+    
+    const popDialog = (id: string) => {
+        setDialogStack(prev => prev.filter(dialogId => dialogId !== id));
+    };
+    
+    const getStackLevel = (id: string) => {
+        return dialogStack.indexOf(id);
+    };
+    
+    return {
+        pushDialog,
+        popDialog,
+        getStackLevel,
+        stackCount: dialogStack.length
+    };
+};
+
+export { 
+    MoonUIDialogPro,
     MoonUIDialogTriggerPro,
     MoonUIDialogContentPro,
     MoonUIDialogHeaderPro,
@@ -328,7 +729,24 @@ export { MoonUIDialogPro,
     MoonUIDialogDescriptionPro,
     MoonUIDialogClosePro,
     MoonUIDialogFormPro,
- };
+    confirmationPresets,
+    useStackedDialog,
+    type MoonUIDialogContentProProps,
+    type DialogOverlayProps
+};
 
 // Backward compatibility exports
-export { MoonUIDialogPro as Dialog, MoonUIDialogContentPro as DialogContent, MoonUIDialogHeaderPro as DialogHeader, MoonUIDialogFooterPro as DialogFooter, MoonUIDialogTitlePro as DialogTitle, MoonUIDialogDescriptionPro as DialogDescription, MoonUIDialogTriggerPro as DialogTrigger, MoonUIDialogClosePro as DialogClose };
+export { 
+    MoonUIDialogPro as Dialog, 
+    MoonUIDialogContentPro as DialogContent, 
+    MoonUIDialogHeaderPro as DialogHeader, 
+    MoonUIDialogFooterPro as DialogFooter, 
+    MoonUIDialogTitlePro as DialogTitle, 
+    MoonUIDialogDescriptionPro as DialogDescription, 
+    MoonUIDialogTriggerPro as DialogTrigger, 
+    MoonUIDialogClosePro as DialogClose,
+    MoonUIDialogFormPro as DialogForm
+};
+
+// Export hook for easy access
+export { useStackedDialog as useDialogStack };