@moontra/moonui-pro 2.20.2 → 2.20.3

package/src/components/ui/dialog.tsx

@@ -1,752 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cva, type VariantProps } from "class-variance-authority";
-import { motion, AnimatePresence } from "framer-motion";
-import { Check, Loader2, X, AlertTriangle, Info, HelpCircle } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-
-/**
- * Premium Dialog Component Pro
- *
- * 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;
-const MoonUIDialogTriggerPro = DialogPrimitive.Trigger;
-const MoonUIDialogPortal = DialogPrimitive.Portal;
-const MoonUIDialogClosePro = DialogPrimitive.Close;
-
-const overlayVariants = cva(
-    "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 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",
-        },
-    }
-);
-
-interface DialogOverlayProps
-    extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>,
-        VariantProps<typeof overlayVariants> {
-    /** Custom backdrop effects */
-    customBackdrop?: boolean;
-}
-
-const MoonUIDialogOverlayPro = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Overlay>,
-    DialogOverlayProps
->(({ className, variant, blurAmount, animation, customBackdrop = false, ...props }, ref) => (
-    <DialogPrimitive.Overlay
-        ref={ref}
-        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}
-    />
-));
-MoonUIDialogOverlayPro.displayName = DialogPrimitive.Overlay.displayName;
-
-const dialogContentVariants = cva(
-    "fixed left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg",
-    {
-        variants: {
-            variant: {
-                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-[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",
-                sm: "rounded-md",
-                default: "rounded-lg",
-                lg: "rounded-xl",
-                xl: "rounded-2xl",
-                full: "rounded-3xl",
-            },
-            animation: {
-                // 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: {
-            variant: "default",
-            size: "default",
-            radius: "default",
-            animation: "default",
-            position: "default",
-        },
-    }
-);
-
-interface MoonUIDialogContentProProps
-    extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'title'>,
-        VariantProps<typeof dialogContentVariants> {
-    /** X butonunu gizle */
-    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) */
-    title?: React.ReactNode;
-    /** İçerik açıklaması (hızlı kullanım için) */
-    description?: React.ReactNode;
-    /** Başlık ikonu */
-    icon?: React.ReactNode;
-    /** Yükleniyor durumu */
-    loading?: boolean;
-    /** Success durumu */
-    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<
-    React.ElementRef<typeof DialogPrimitive.Content>,
-    MoonUIDialogContentProProps
->(
-    (
-        {
-            className,
-            children,
-            variant,
-            size,
-            radius,
-            animation,
-            position,
-            overlayVariant = "default",
-            overlayBlur = "sm",
-            overlayAnimation = "default",
-            hideCloseButton = false,
-            title,
-            description,
-            icon,
-            loading = false,
-            success = false,
-            onClose,
-            animationDuration = 0.2,
-            enableSpringPhysics = false,
-            stackLevel = 0,
-            confirmationType,
-            hasFormValidation = false,
-            responsive = true,
-            customBackdrop = false,
-            closeAnimation = true,
-            ...props
-        },
-        ref
-    ) => {
-        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}
-                    onEscapeKeyDown={hideCloseButton ? undefined : handleClose}
-                    onInteractOutside={
-                        hideCloseButton ? undefined : handleClose
-                    }
-                    className="outline-none"
-                    {...props}
-                    asChild
-                >
-                    <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>
-                                    )}
-                                    {description && (
-                                        <MoonUIDialogDescriptionPro>
-                                            {description}
-                                        </MoonUIDialogDescriptionPro>
-                                    )}
-                                </div>
-                            </MoonUIDialogHeaderPro>
-                        )}
-
-                        {/* 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={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>
-        );
-    }
-);
-MoonUIDialogContentPro.displayName = DialogPrimitive.Content.displayName;
-
-const MoonUIDialogHeaderPro = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            "flex flex-col space-y-2 text-center sm:text-left",
-            className
-        )}
-        {...props}
-    />
-);
-MoonUIDialogHeaderPro.displayName = "MoonUIDialogHeaderPro";
-
-const MoonUIDialogFooterPro = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:space-x-2 mt-6",
-            className
-        )}
-        {...props}
-    />
-);
-MoonUIDialogFooterPro.displayName = "MoonUIDialogFooterPro";
-
-const MoonUIDialogTitlePro = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Title
-        ref={ref}
-        className={cn(
-            "text-xl font-semibold leading-snug tracking-tight dark:text-white",
-            className
-        )}
-        {...props}
-    />
-));
-MoonUIDialogTitlePro.displayName = DialogPrimitive.Title.displayName;
-
-const MoonUIDialogDescriptionPro = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Description
-        ref={ref}
-        className={cn(
-            "text-sm text-muted-foreground leading-normal dark:text-gray-400",
-            className
-        )}
-        {...props}
-    />
-));
-MoonUIDialogDescriptionPro.displayName = DialogPrimitive.Description.displayName;
-
-/**
- * Dialog-Form integration for use with form support
- * Used to integrate form submission processes into the modal
- */
-const MoonUIDialogFormPro = React.forwardRef<
-    HTMLFormElement,
-    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";
-
-/**
- * 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,
-    MoonUIDialogFooterPro,
-    MoonUIDialogTitlePro,
-    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,
-    MoonUIDialogFormPro as DialogForm
-};
-
-// Export hook for easy access
-export { useStackedDialog as useDialogStack };