aura-glass/dist/components/animations/GlassTransitions.d.ts

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

import React from "react";
declare const glassTransitionVariants: {
    shatter: {
        initial: {
            scale: number;
            opacity: number;
            filter: string;
        };
        exit: {
            scale: number[];
            opacity: number[];
            filter: string[];
            rotate: number[];
            transition: {
                duration: number;
                times: number[];
                ease: (t: number) => number;
            };
        };
        enter: {
            scale: number[];
            opacity: number[];
            filter: string[];
            rotate: number[];
            transition: {
                duration: number;
                times: number[];
                ease: (t: number) => number;
            };
        };
    };
    liquid: {
        initial: {
            clipPath: string;
            scale: number;
            opacity: number;
        };
        exit: {
            clipPath: string[];
            scale: number[];
            opacity: number[];
            transition: {
                duration: number;
                ease: (t: number) => number;
            };
        };
        enter: {
            clipPath: string[];
            scale: number[];
            opacity: number[];
            transition: {
                duration: number;
                ease: (t: number) => number;
            };
        };
    };
    ripple: {
        initial: {
            scale: number;
            opacity: number;
            borderRadius: string;
        };
        exit: {
            scale: number[];
            opacity: number[];
            borderRadius: string[];
            transition: {
                duration: number;
                ease: (t: number) => number;
            };
        };
        enter: {
            scale: number[];
            opacity: number[];
            borderRadius: string[];
            transition: {
                duration: number;
                ease: (t: number) => number;
            };
        };
    };
    morph: {
        initial: {
            borderRadius: string;
            scaleX: number;
            scaleY: number;
            opacity: number;
        };
        exit: {
            borderRadius: string[];
            scaleX: number[];
            scaleY: number[];
            opacity: number[];
            transition: {
                duration: number;
                ease: (t: number) => number;
            };
        };
        enter: {
            borderRadius: string[];
            scaleX: number[];
            scaleY: number[];
            opacity: number[];
            transition: {
                duration: number;
                ease: (t: number) => number;
            };
        };
    };
    frost: {
        initial: {
            scale: number;
            opacity: number;
            filter: string;
        };
        exit: {
            scale: number[];
            opacity: number[];
            filter: string[];
            transition: {
                duration: number;
                ease: (t: number) => number;
            };
        };
        enter: {
            scale: number[];
            opacity: number[];
            filter: string[];
            transition: {
                duration: number;
                ease: (t: number) => number;
            };
        };
    };
};
interface GlassTransitionProps {
    children: React.ReactNode;
    variant?: keyof typeof glassTransitionVariants;
    duration?: number;
    className?: string;
    style?: React.CSSProperties;
}
export declare function GlassTransition({ children, variant, duration, className, style, }: GlassTransitionProps): import("react/jsx-runtime").JSX.Element;
interface GlassPageTransitionProps {
    children: React.ReactNode;
    variant?: keyof typeof glassTransitionVariants;
    duration?: number;
    className?: string;
}
export declare function GlassPageTransition({ children, variant, duration, className, }: GlassPageTransitionProps): import("react/jsx-runtime").JSX.Element;
interface SwipeableGlassCardsProps {
    cards: Array<{
        id: string;
        content: React.ReactNode;
        background?: string;
    }>;
    onSwipe?: (direction: "left" | "right", cardId: string) => void;
    className?: string;
}
export declare function SwipeableGlassCards({ cards, onSwipe, className, }: SwipeableGlassCardsProps): import("react/jsx-runtime").JSX.Element;
interface GlassAccordionProps {
    items: Array<{
        id: string;
        title: string;
        content: React.ReactNode;
        icon?: React.ReactNode;
    }>;
    allowMultiple?: boolean;
    className?: string;
}
export declare function GlassAccordion({ items, allowMultiple, className, }: GlassAccordionProps): import("react/jsx-runtime").JSX.Element;
interface GlassModalProps {
    isOpen: boolean;
    onClose: () => void;
    children: React.ReactNode;
    variant?: keyof typeof glassTransitionVariants;
    className?: string;
}
export declare function GlassModal({ isOpen, onClose, children, variant, className, }: GlassModalProps): import("react/jsx-runtime").JSX.Element;
interface GlassTabsProps {
    tabs?: Array<{
        id: string;
        label: string;
        content: React.ReactNode;
        icon?: React.ReactNode;
    }>;
    children?: React.ReactNode;
    value?: string;
    onValueChange?: (value: string) => void;
    defaultTab?: string;
    orientation?: "horizontal" | "vertical";
    className?: string;
    onTabChange?: (tabId: string) => void;
}
export declare function GlassTabs({ tabs, defaultTab, orientation, className, onTabChange, }: GlassTabsProps): import("react/jsx-runtime").JSX.Element;
interface GlassTransitionsProps extends React.HTMLAttributes<HTMLDivElement> {
    variant?: keyof typeof glassTransitionVariants;
    children?: React.ReactNode;
}
export declare const GlassTransitions: React.FC<GlassTransitionsProps> & {
    GlassTransition: typeof GlassTransition;
    GlassPageTransition: typeof GlassPageTransition;
    SwipeableGlassCards: typeof SwipeableGlassCards;
    GlassAccordion: typeof GlassAccordion;
    GlassModal: typeof GlassModal;
    GlassTabs: typeof GlassTabs;
    glassTransitionVariants: {
        shatter: {
            initial: {
                scale: number;
                opacity: number;
                filter: string;
            };
            exit: {
                scale: number[];
                opacity: number[];
                filter: string[];
                rotate: number[];
                transition: {
                    duration: number;
                    times: number[];
                    ease: (t: number) => number;
                };
            };
            enter: {
                scale: number[];
                opacity: number[];
                filter: string[];
                rotate: number[];
                transition: {
                    duration: number;
                    times: number[];
                    ease: (t: number) => number;
                };
            };
        };
        liquid: {
            initial: {
                clipPath: string;
                scale: number;
                opacity: number;
            };
            exit: {
                clipPath: string[];
                scale: number[];
                opacity: number[];
                transition: {
                    duration: number;
                    ease: (t: number) => number;
                };
            };
            enter: {
                clipPath: string[];
                scale: number[];
                opacity: number[];
                transition: {
                    duration: number;
                    ease: (t: number) => number;
                };
            };
        };
        ripple: {
            initial: {
                scale: number;
                opacity: number;
                borderRadius: string;
            };
            exit: {
                scale: number[];
                opacity: number[];
                borderRadius: string[];
                transition: {
                    duration: number;
                    ease: (t: number) => number;
                };
            };
            enter: {
                scale: number[];
                opacity: number[];
                borderRadius: string[];
                transition: {
                    duration: number;
                    ease: (t: number) => number;
                };
            };
        };
        morph: {
            initial: {
                borderRadius: string;
                scaleX: number;
                scaleY: number;
                opacity: number;
            };
            exit: {
                borderRadius: string[];
                scaleX: number[];
                scaleY: number[];
                opacity: number[];
                transition: {
                    duration: number;
                    ease: (t: number) => number;
                };
            };
            enter: {
                borderRadius: string[];
                scaleX: number[];
                scaleY: number[];
                opacity: number[];
                transition: {
                    duration: number;
                    ease: (t: number) => number;
                };
            };
        };
        frost: {
            initial: {
                scale: number;
                opacity: number;
                filter: string;
            };
            exit: {
                scale: number[];
                opacity: number[];
                filter: string[];
                transition: {
                    duration: number;
                    ease: (t: number) => number;
                };
            };
            enter: {
                scale: number[];
                opacity: number[];
                filter: string[];
                transition: {
                    duration: number;
                    ease: (t: number) => number;
                };
            };
        };
    };
};
export default GlassTransitions;
//# sourceMappingURL=GlassTransitions.d.ts.map