@space-man/react-theme-animation 2.1.0 → 2.3.0

package/dist/cjs/hooks/use-theme-animation.js

@@ -1,234 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemeAnimation = void 0;
-const react_1 = require("react");
-const react_dom_1 = require("react-dom");
-const types_1 = require("../types");
-const animations_1 = require("../utils/animations");
-const isBrowser = typeof window !== 'undefined';
-const useThemeAnimation = (props = {}) => {
-    const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = types_1.ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, 
-    // Slide animation options
-    slideDirection = 'left', slideFromX, slideFromY, slideToX = 0, slideToY = 0, } = props;
-    const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
-    const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    // Inject base styles once on mount
-    (0, react_1.useEffect)(() => {
-        (0, animations_1.injectBaseStyles)();
-        setMounted(true);
-    }, []);
-    const [internalTheme, setInternalTheme] = (0, react_1.useState)(() => {
-        if (!isBrowser)
-            return defaultTheme;
-        const saved = localStorage.getItem(storageKey);
-        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
-    });
-    const [internalColorTheme, setInternalColorTheme] = (0, react_1.useState)(() => {
-        if (!isBrowser)
-            return defaultColorTheme;
-        const saved = localStorage.getItem(colorStorageKey);
-        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
-    });
-    const currentTheme = externalTheme ?? internalTheme;
-    const currentColorTheme = externalColorTheme ?? internalColorTheme;
-    const [, setSystemTheme] = (0, react_1.useState)(() => (0, animations_1.getSystemTheme)());
-    const resolvedTheme = (0, animations_1.resolveTheme)(currentTheme);
-    (0, react_1.useEffect)(() => {
-        if (!isBrowser)
-            return;
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const handleChange = () => setSystemTheme((0, animations_1.getSystemTheme)());
-        mediaQuery.addEventListener('change', handleChange);
-        return () => mediaQuery.removeEventListener('change', handleChange);
-    }, []);
-    // Apply theme classes to DOM
-    (0, react_1.useEffect)(() => {
-        if (!isBrowser || !mounted)
-            return;
-        if (resolvedTheme === 'dark') {
-            document.documentElement.classList.add(globalClassName);
-        }
-        else {
-            document.documentElement.classList.remove(globalClassName);
-        }
-        colorThemes.forEach(theme => {
-            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
-    const ref = (0, react_1.useRef)(null);
-    const setTheme = (0, react_1.useCallback)((newTheme) => {
-        // Always save to localStorage
-        if (isBrowser) {
-            localStorage.setItem(storageKey, newTheme);
-        }
-        // Update internal state if no external control
-        if (externalTheme === undefined) {
-            setInternalTheme(newTheme);
-        }
-        // Call external callback if provided
-        if (onThemeChange) {
-            onThemeChange(newTheme);
-        }
-    }, [onThemeChange, externalTheme, storageKey]);
-    const setColorTheme = (0, react_1.useCallback)((newColorTheme) => {
-        // Always save to localStorage
-        if (isBrowser) {
-            localStorage.setItem(colorStorageKey, newColorTheme);
-        }
-        // Update internal state if no external control
-        if (externalColorTheme === undefined) {
-            setInternalColorTheme(newColorTheme);
-        }
-        // Call external callback if provided
-        if (onColorThemeChange) {
-            onColorThemeChange(newColorTheme);
-        }
-    }, [onColorThemeChange, externalColorTheme, colorStorageKey]);
-    const switchTheme = (0, react_1.useCallback)(async (newTheme, animationOff = false) => {
-        if (!ref.current || !(0, animations_1.supportsViewTransitions)() || (0, animations_1.prefersReducedMotion)() || animationOff) {
-            setTheme(newTheme);
-            return;
-        }
-        // Helper function to convert direction to from coordinates
-        const getSlideFromCoords = (direction) => {
-            switch (direction) {
-                case 'left':
-                    return { a: -100, b: 0 };
-                case 'right':
-                    return { a: 100, b: 0 };
-                case 'top':
-                    return { a: 0, b: -100 };
-                case 'bottom':
-                    return { a: 0, b: 100 };
-                case 'top-left':
-                    return { a: -100, b: -100 };
-                case 'top-right':
-                    return { a: 100, b: -100 };
-                case 'bottom-left':
-                    return { a: -100, b: 100 };
-                case 'bottom-right':
-                    return { a: 100, b: 100 };
-                default:
-                    return { a: -100, b: 0 };
-            }
-        };
-        let animationConfig;
-        if (animationType === types_1.ThemeAnimationType.SLIDE) {
-            // Use custom coordinates if provided, otherwise use direction
-            const fromCoords = slideFromX !== undefined && slideFromY !== undefined
-                ? { a: slideFromX, b: slideFromY }
-                : getSlideFromCoords(slideDirection);
-            animationConfig = {
-                a: fromCoords.a,
-                b: fromCoords.b,
-                x: slideToX,
-                y: slideToY,
-                duration,
-                easing,
-                animationType,
-                blurAmount,
-                styleId,
-            };
-        }
-        else {
-            // For circle and blur circle animations, use button center
-            const { top, left, width, height } = ref.current.getBoundingClientRect();
-            const x = left + width / 2;
-            const y = top + height / 2;
-            animationConfig = {
-                x,
-                y,
-                duration,
-                easing,
-                animationType,
-                blurAmount,
-                styleId,
-            };
-        }
-        if (animationType === types_1.ThemeAnimationType.BLUR_CIRCLE) {
-            (0, animations_1.createBlurCircleAnimation)(animationConfig);
-        }
-        if (animationType === types_1.ThemeAnimationType.SLIDE) {
-            (0, animations_1.createSlideAnimation)(animationConfig);
-        }
-        // Start the view transition
-        await document.startViewTransition(() => {
-            (0, react_dom_1.flushSync)(() => {
-                setTheme(newTheme);
-            });
-        }).ready;
-        if (animationType === types_1.ThemeAnimationType.CIRCLE) {
-            (0, animations_1.createCircleAnimation)(animationConfig);
-        }
-    }, [
-        setTheme,
-        duration,
-        easing,
-        animationType,
-        blurAmount,
-        styleId,
-        slideDirection,
-        slideFromX,
-        slideFromY,
-        slideToX,
-        slideToY,
-    ]);
-    const switchColorTheme = (0, react_1.useCallback)((newColorTheme) => {
-        if (colorThemes.indexOf(newColorTheme) === -1) {
-            console.warn(`Color theme "${newColorTheme}" not found in available themes`);
-            return;
-        }
-        setColorTheme(newColorTheme);
-    }, [colorThemes, setColorTheme]);
-    const toggleTheme = (0, react_1.useCallback)(async (animationOff = false) => {
-        const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
-        await switchTheme(newTheme, animationOff);
-    }, [resolvedTheme, switchTheme]);
-    const toggleLightTheme = (0, react_1.useCallback)(async (animationOff = false) => {
-        if (resolvedTheme === 'light')
-            return;
-        await switchTheme('light', animationOff);
-    }, [resolvedTheme, switchTheme]);
-    const toggleDarkTheme = (0, react_1.useCallback)(async (animationOff = false) => {
-        if (resolvedTheme === 'dark')
-            return;
-        await switchTheme('dark', animationOff);
-    }, [resolvedTheme, switchTheme]);
-    const toggleColorTheme = (0, react_1.useCallback)(() => {
-        const currentIndex = colorThemes.indexOf(currentColorTheme);
-        const nextIndex = (currentIndex + 1) % colorThemes.length;
-        const nextColorTheme = colorThemes[nextIndex];
-        setColorTheme(nextColorTheme);
-    }, [currentColorTheme, colorThemes, setColorTheme]);
-    const createColorThemeToggle = (0, react_1.useCallback)((targetColorTheme) => {
-        return () => {
-            if (colorThemes.indexOf(targetColorTheme) === -1) {
-                console.warn(`Color theme "${targetColorTheme}" not found in available themes`);
-                return;
-            }
-            setColorTheme(targetColorTheme);
-        };
-    }, [colorThemes, setColorTheme]);
-    const isColorThemeActive = (0, react_1.useCallback)((targetColorTheme) => {
-        return currentColorTheme === targetColorTheme;
-    }, [currentColorTheme]);
-    return {
-        ref,
-        theme: currentTheme,
-        colorTheme: currentColorTheme,
-        resolvedTheme,
-        setTheme,
-        setColorTheme,
-        switchTheme,
-        switchColorTheme,
-        toggleTheme,
-        toggleLightTheme,
-        toggleDarkTheme,
-        toggleColorTheme,
-        createColorThemeToggle,
-        isColorThemeActive,
-    };
-};
-exports.useThemeAnimation = useThemeAnimation;

package/dist/cjs/index.d.ts

@@ -1,10 +0,0 @@
-export { useThemeAnimation } from './hooks/use-theme-animation';
-export { ThemeSwitcher } from './components/ThemeSwitcher';
-export { ThemeSelector } from './components/ThemeSelector';
-export { SpacemanThemeProvider, useSpacemanTheme } from './components/SpacemanThemeProvider';
-export { NextThemeProvider, useNextTheme } from './components/NextThemeProvider';
-export { TanStackThemeProvider, useTanStackTheme } from './components/TanStackThemeProvider';
-export { ViteThemeProvider, useViteTheme } from './components/ViteThemeProvider';
-export type { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, SlideDirection, } from './types';
-export { ThemeAnimationType } from './types';
-export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/cjs/index.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.prefersReducedMotion = exports.supportsViewTransitions = exports.resolveTheme = exports.getSystemTheme = exports.injectBaseStyles = exports.ThemeAnimationType = exports.useViteTheme = exports.ViteThemeProvider = exports.useTanStackTheme = exports.TanStackThemeProvider = exports.useNextTheme = exports.NextThemeProvider = exports.useSpacemanTheme = exports.SpacemanThemeProvider = exports.ThemeSelector = exports.ThemeSwitcher = exports.useThemeAnimation = void 0;
-var use_theme_animation_1 = require("./hooks/use-theme-animation");
-Object.defineProperty(exports, "useThemeAnimation", { enumerable: true, get: function () { return use_theme_animation_1.useThemeAnimation; } });
-var ThemeSwitcher_1 = require("./components/ThemeSwitcher");
-Object.defineProperty(exports, "ThemeSwitcher", { enumerable: true, get: function () { return ThemeSwitcher_1.ThemeSwitcher; } });
-var ThemeSelector_1 = require("./components/ThemeSelector");
-Object.defineProperty(exports, "ThemeSelector", { enumerable: true, get: function () { return ThemeSelector_1.ThemeSelector; } });
-var SpacemanThemeProvider_1 = require("./components/SpacemanThemeProvider");
-Object.defineProperty(exports, "SpacemanThemeProvider", { enumerable: true, get: function () { return SpacemanThemeProvider_1.SpacemanThemeProvider; } });
-Object.defineProperty(exports, "useSpacemanTheme", { enumerable: true, get: function () { return SpacemanThemeProvider_1.useSpacemanTheme; } });
-// Framework-specific optimized providers
-var NextThemeProvider_1 = require("./components/NextThemeProvider");
-Object.defineProperty(exports, "NextThemeProvider", { enumerable: true, get: function () { return NextThemeProvider_1.NextThemeProvider; } });
-Object.defineProperty(exports, "useNextTheme", { enumerable: true, get: function () { return NextThemeProvider_1.useNextTheme; } });
-var TanStackThemeProvider_1 = require("./components/TanStackThemeProvider");
-Object.defineProperty(exports, "TanStackThemeProvider", { enumerable: true, get: function () { return TanStackThemeProvider_1.TanStackThemeProvider; } });
-Object.defineProperty(exports, "useTanStackTheme", { enumerable: true, get: function () { return TanStackThemeProvider_1.useTanStackTheme; } });
-var ViteThemeProvider_1 = require("./components/ViteThemeProvider");
-Object.defineProperty(exports, "ViteThemeProvider", { enumerable: true, get: function () { return ViteThemeProvider_1.ViteThemeProvider; } });
-Object.defineProperty(exports, "useViteTheme", { enumerable: true, get: function () { return ViteThemeProvider_1.useViteTheme; } });
-var types_1 = require("./types");
-Object.defineProperty(exports, "ThemeAnimationType", { enumerable: true, get: function () { return types_1.ThemeAnimationType; } });
-var animations_1 = require("./utils/animations");
-Object.defineProperty(exports, "injectBaseStyles", { enumerable: true, get: function () { return animations_1.injectBaseStyles; } });
-Object.defineProperty(exports, "getSystemTheme", { enumerable: true, get: function () { return animations_1.getSystemTheme; } });
-Object.defineProperty(exports, "resolveTheme", { enumerable: true, get: function () { return animations_1.resolveTheme; } });
-Object.defineProperty(exports, "supportsViewTransitions", { enumerable: true, get: function () { return animations_1.supportsViewTransitions; } });
-Object.defineProperty(exports, "prefersReducedMotion", { enumerable: true, get: function () { return animations_1.prefersReducedMotion; } });

package/dist/cjs/types/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeAnimationType = void 0;
-var ThemeAnimationType;
-(function (ThemeAnimationType) {
-    ThemeAnimationType["CIRCLE"] = "circle";
-    ThemeAnimationType["BLUR_CIRCLE"] = "blur-circle";
-    ThemeAnimationType["SLIDE"] = "slide";
-})(ThemeAnimationType || (exports.ThemeAnimationType = ThemeAnimationType = {}));

package/dist/cjs/utils/animations.d.ts

@@ -1,21 +0,0 @@
-import { ThemeAnimationType } from '../types';
-export declare const injectBaseStyles: () => void;
-export declare const createBlurCircleMask: (blur: number) => string;
-export declare const getSystemTheme: () => "light" | "dark";
-export declare const resolveTheme: (theme: string) => "light" | "dark";
-export declare const supportsViewTransitions: () => boolean;
-export declare const prefersReducedMotion: () => boolean;
-export interface AnimationConfig {
-    a?: number;
-    b?: number;
-    x: number;
-    y: number;
-    duration: number;
-    easing: string;
-    animationType: ThemeAnimationType;
-    blurAmount: number;
-    styleId: string;
-}
-export declare const createCircleAnimation: (config: AnimationConfig) => void;
-export declare const createSlideAnimation: (config: AnimationConfig) => void;
-export declare const createBlurCircleAnimation: (config: AnimationConfig) => void;

package/dist/cjs/utils/animations.js

@@ -1,189 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createBlurCircleAnimation = exports.createSlideAnimation = exports.createCircleAnimation = exports.prefersReducedMotion = exports.supportsViewTransitions = exports.resolveTheme = exports.getSystemTheme = exports.createBlurCircleMask = exports.injectBaseStyles = void 0;
-const isBrowser = typeof window !== 'undefined';
-const injectBaseStyles = () => {
-    if (isBrowser) {
-        const styleId = 'spaceman-theme-base-style';
-        if (!document.getElementById(styleId)) {
-            const style = document.createElement('style');
-            style.id = styleId;
-            const isHighResolution = window.innerWidth >= 3000 || window.innerHeight >= 2000;
-            style.textContent = `
-        ::view-transition-old(root),
-        ::view-transition-new(root) {
-          animation: none;
-          mix-blend-mode: normal;
-          ${isHighResolution ? 'transform: translateZ(0);' : ''}
-        }
-        
-        ${isHighResolution
-                ? `
-        ::view-transition-group(root),
-        ::view-transition-image-pair(root),
-        ::view-transition-old(root),
-        ::view-transition-new(root) {
-          backface-visibility: hidden;
-          perspective: 1000px;
-          transform: translate3d(0, 0, 0);
-        }
-        `
-                : ''}
-      `;
-            document.head.appendChild(style);
-        }
-    }
-};
-exports.injectBaseStyles = injectBaseStyles;
-const createBlurCircleMask = (blur) => {
-    const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
-    const blurFilter = `<filter id="blur"><feGaussianBlur stdDeviation="${blur}" /></filter>`;
-    const circleRadius = isHighResolution ? 20 : 25;
-    return `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"><defs>${blurFilter}</defs><circle cx="0" cy="0" r="${circleRadius}" fill="white" filter="url(%23blur)"/></svg>')`;
-};
-exports.createBlurCircleMask = createBlurCircleMask;
-const getSystemTheme = () => {
-    if (!isBrowser)
-        return 'light';
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-};
-exports.getSystemTheme = getSystemTheme;
-const resolveTheme = (theme) => {
-    if (theme === 'system') {
-        return (0, exports.getSystemTheme)();
-    }
-    return theme === 'dark' ? 'dark' : 'light';
-};
-exports.resolveTheme = resolveTheme;
-const supportsViewTransitions = () => {
-    return isBrowser && 'startViewTransition' in document;
-};
-exports.supportsViewTransitions = supportsViewTransitions;
-const prefersReducedMotion = () => {
-    return isBrowser && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-};
-exports.prefersReducedMotion = prefersReducedMotion;
-const createCircleAnimation = (config) => {
-    const { x, y, duration, easing } = config;
-    // Calculate the distance to each corner of the viewport
-    const topLeft = Math.hypot(x, y);
-    const topRight = Math.hypot(window.innerWidth - x, y);
-    const bottomLeft = Math.hypot(x, window.innerHeight - y);
-    const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y);
-    // Find the maximum distance to ensure animation covers the entire viewport
-    const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight);
-    document.documentElement.animate({
-        clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxRadius}px at ${x}px ${y}px)`],
-    }, {
-        duration,
-        easing,
-        pseudoElement: '::view-transition-new(root)',
-    });
-};
-exports.createCircleAnimation = createCircleAnimation;
-const createSlideAnimation = (config) => {
-    const { a = -100, b = 0, x = 0, y = 0, duration, styleId } = config;
-    const styleElement = document.createElement('style');
-    styleElement.id = styleId;
-    styleElement.textContent = `
-    ::view-transition-old(root) {
-      animation-delay: ${duration}ms;
-    }
-    
-    ::view-transition-new(root) {
-      animation: move-in ${duration}ms;
-      animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
-    }
-    
-    @keyframes move-in {
-      from {
-        translate: ${a}% ${b}%;
-      }
-      to {
-        translate: ${x}% ${y}%;
-      }
-    }
-  `;
-    document.head.appendChild(styleElement);
-    // Clean up after animation
-    setTimeout(() => {
-        const styleElement = document.getElementById(styleId);
-        if (styleElement) {
-            styleElement.remove();
-        }
-    }, duration);
-};
-exports.createSlideAnimation = createSlideAnimation;
-const createBlurCircleAnimation = (config) => {
-    const { x, y, duration, easing, blurAmount, styleId } = config;
-    const existingStyle = document.getElementById(styleId);
-    if (existingStyle) {
-        existingStyle.remove();
-    }
-    const viewportSize = Math.max(window.innerWidth, window.innerHeight) + 200;
-    const isHighResolution = window.innerWidth >= 3000 || window.innerHeight >= 2000;
-    const scaleFactor = isHighResolution ? 2.5 : 4;
-    const optimalMaskSize = isHighResolution
-        ? Math.min(viewportSize * scaleFactor, 5000)
-        : viewportSize * scaleFactor;
-    const topLeft = Math.hypot(x, y);
-    const topRight = Math.hypot(window.innerWidth - x, y);
-    const bottomLeft = Math.hypot(x, window.innerHeight - y);
-    const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y);
-    const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight);
-    const styleElement = document.createElement('style');
-    styleElement.id = styleId;
-    const blurFactor = isHighResolution ? 1.5 : 1.2;
-    const finalMaskSize = Math.max(optimalMaskSize, maxRadius * 2.5);
-    styleElement.textContent = `
-    ::view-transition-group(root) {
-      animation-duration: ${duration}ms;
-      animation-timing-function: ${isHighResolution
-        ? 'cubic-bezier(0.2, 0, 0.2, 1)'
-        : 'linear(' +
-            '0 0%, 0.2342 12.49%, 0.4374 24.99%,' +
-            '0.6093 37.49%, 0.6835 43.74%,' +
-            '0.7499 49.99%, 0.8086 56.25%,' +
-            '0.8593 62.5%, 0.9023 68.75%, 0.9375 75%,' +
-            '0.9648 81.25%, 0.9844 87.5%,' +
-            '0.9961 93.75%, 1 100%' +
-            ')'};
-      will-change: transform;
-    }
-    
-    ::view-transition-new(root) {
-      mask: ${(0, exports.createBlurCircleMask)(blurAmount * blurFactor)} 0 0 / 100% 100% no-repeat;
-      mask-position: ${x}px ${y}px;
-      animation: spaceman-mask-scale ${duration}ms ${easing};
-      transform-origin: ${x}px ${y}px;
-      will-change: mask-size, mask-position;
-    }
-    
-    ::view-transition-old(root),
-    .dark::view-transition-old(root) {
-      animation: spaceman-mask-scale ${duration}ms ${easing};
-      transform-origin: ${x}px ${y}px;
-      z-index: -1;
-      will-change: mask-size, mask-position;
-    }
-    
-    @keyframes spaceman-mask-scale {
-      0% {
-        mask-size: 0px;
-        mask-position: ${x}px ${y}px;
-      }
-      100% {
-        mask-size: ${finalMaskSize}px;
-        mask-position: ${x - finalMaskSize / 2}px ${y - finalMaskSize / 2}px;
-      }
-    }
-  `;
-    document.head.appendChild(styleElement);
-    setTimeout(() => {
-        const styleElement = document.getElementById(styleId);
-        if (styleElement) {
-            styleElement.remove();
-        }
-    }, duration);
-};
-exports.createBlurCircleAnimation = createBlurCircleAnimation;

package/dist/esm/components/NextThemeProvider.d.ts

@@ -1,81 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Theme, ColorTheme, ThemeAnimationType } from '../types';
-/**
- * Context type for the Next Theme Provider
- */
-interface NextThemeContextType {
-    ref: React.RefObject<HTMLButtonElement | null>;
-    theme: Theme;
-    colorTheme: ColorTheme;
-    resolvedTheme: 'light' | 'dark';
-    systemTheme: 'light' | 'dark';
-    setTheme: (theme: Theme) => void;
-    setColorTheme: (colorTheme: ColorTheme) => void;
-    switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>;
-    switchColorTheme: (colorTheme: string) => void;
-    toggleTheme: (animationOff?: boolean) => Promise<void>;
-    toggleLightTheme: (animationOff?: boolean) => Promise<void>;
-    toggleDarkTheme: (animationOff?: boolean) => Promise<void>;
-    toggleColorTheme: () => void;
-    createColorThemeToggle: (targetColorTheme: string) => () => void;
-    isColorThemeActive: (targetColorTheme: string) => boolean;
-    switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
-}
-/**
- * Props for the Next Theme Provider
- */
-interface NextThemeProviderProps {
-    children: ReactNode;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    storageKey?: string;
-    colorStorageKey?: string;
-    attribute?: 'class' | 'data-theme';
-    globalClassName?: string;
-    colorThemePrefix?: string;
-    nonce?: string;
-    disableAnimationOnInit?: boolean;
-    disablePreHydrationScript?: boolean;
-}
-/**
- * Next Theme Provider - Next.js optimized theme management with animations
- *
- * This provider is specifically optimized for Next.js and SSR frameworks with
- * pre-hydration script injection to prevent flash of wrong theme.
- *
- * Features:
- * - Pre-hydration script for flash prevention (SSR apps)
- * - Animated theme transitions via View Transitions API
- * - Multi-dimensional theming (theme + colorTheme)
- * - System theme detection
- * - CSP support via nonce prop
- *
- * @param children - React children to wrap with theme context
- * @param themes - Available theme options
- * @param colorThemes - Available color theme options
- * @param defaultTheme - Default theme to use
- * @param defaultColorTheme - Default color theme to use
- * @param animationType - Animation type for theme transitions
- * @param duration - Animation duration in milliseconds
- * @param storageKey - LocalStorage key for theme preference
- * @param colorStorageKey - LocalStorage key for color theme preference
- * @param attribute - HTML attribute to use for theme ('class' or 'data-theme')
- * @param globalClassName - Class name for dark theme (when using 'class' attribute)
- * @param colorThemePrefix - Prefix for color theme classes
- * @param nonce - CSP nonce for inline script (SSR apps)
- * @param disableAnimationOnInit - Skip animation during initial hydration
- * @param disablePreHydrationScript - Disable flash prevention script (for SPAs without SSR)
- */
-export declare const NextThemeProvider: React.FC<NextThemeProviderProps>;
-/**
- * Hook to consume the Next Theme context
- *
- * @returns Theme context value with all theme state and methods
- * @throws Error if used outside of NextThemeProvider
- */
-export declare const useNextTheme: () => NextThemeContextType;
-export {};