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

package/dist/cjs/components/ViteThemeProvider.d.ts

@@ -1,19 +1,61 @@
-import React from 'react';
-type Theme = 'light' | 'dark' | 'system';
-export interface ViteThemeContextType {
+import React, { ReactNode } from 'react';
+import { Theme, ColorTheme, ThemeAnimationType } from '../types';
+interface ViteThemeContextType {
+    ref: React.RefObject<HTMLButtonElement | null>;
     theme: Theme;
+    colorTheme: ColorTheme;
     resolvedTheme: 'light' | 'dark';
-    setTheme: (theme: Theme) => void;
     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>;
 }
 interface ViteThemeProviderProps {
-    children: React.ReactNode;
-    attribute?: 'class' | 'data-theme';
+    children: ReactNode;
+    themes?: Theme[];
+    colorThemes?: ColorTheme[];
     defaultTheme?: Theme;
-    enableSystem?: boolean;
+    defaultColorTheme?: ColorTheme;
+    animationType?: ThemeAnimationType;
+    duration?: number;
+    attribute?: 'class' | 'data-theme';
     disableTransitionOnChange?: boolean;
     storageKey?: string;
+    colorStorageKey?: string;
+    globalClassName?: string;
+    colorThemePrefix?: string;
 }
+/**
+ * Vite Theme Provider - Optimized for Vite SPA applications
+ *
+ * This provider is designed for Vite-based single-page applications with optional
+ * transition disabling to prevent flash during theme switches.
+ *
+ * Note: For flash prevention on initial load, add a script to your index.html
+ * or inject it via Vite plugin to apply theme before React loads.
+ *
+ * @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 attribute - HTML attribute to use for theme ('class' or 'data-theme')
+ * @param disableTransitionOnChange - Temporarily disable CSS transitions during theme switch
+ * @param storageKey - LocalStorage key for theme preference
+ * @param colorStorageKey - LocalStorage key for color theme preference
+ * @param globalClassName - Class name for dark theme (when using 'class' attribute)
+ * @param colorThemePrefix - Prefix for color theme classes
+ */
 export declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
 export declare const useViteTheme: () => ViteThemeContextType;
 export {};

package/dist/cjs/components/ViteThemeProvider.js

@@ -3,76 +3,131 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useViteTheme = exports.ViteThemeProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_theme_animation_1 = require("../hooks/use-theme-animation");
+const types_1 = require("../types");
 const ViteThemeContext = (0, react_1.createContext)(undefined);
-const ViteThemeProvider = ({ children, attribute = 'class', defaultTheme = 'system', enableSystem = true, disableTransitionOnChange = false, storageKey = 'vite-theme', }) => {
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    const [systemTheme, setSystemTheme] = (0, react_1.useState)('light');
-    const [theme, setThemeState] = (0, react_1.useState)(() => {
-        if (typeof window === 'undefined')
-            return defaultTheme;
-        try {
-            const savedTheme = localStorage.getItem(storageKey);
-            return savedTheme && ['light', 'dark', 'system'].includes(savedTheme)
-                ? savedTheme
-                : defaultTheme;
-        }
-        catch {
-            return defaultTheme;
-        }
+/**
+ * Vite Theme Provider - Optimized for Vite SPA applications
+ *
+ * This provider is designed for Vite-based single-page applications with optional
+ * transition disabling to prevent flash during theme switches.
+ *
+ * Note: For flash prevention on initial load, add a script to your index.html
+ * or inject it via Vite plugin to apply theme before React loads.
+ *
+ * @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 attribute - HTML attribute to use for theme ('class' or 'data-theme')
+ * @param disableTransitionOnChange - Temporarily disable CSS transitions during theme switch
+ * @param storageKey - LocalStorage key for theme preference
+ * @param colorStorageKey - LocalStorage key for color theme preference
+ * @param globalClassName - Class name for dark theme (when using 'class' attribute)
+ * @param colorThemePrefix - Prefix for color theme classes
+ */
+const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, attribute = 'class', disableTransitionOnChange = false, storageKey = 'vite-theme', colorStorageKey = 'vite-color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
+    const themeState = (0, use_theme_animation_1.useThemeAnimation)({
+        themes,
+        colorThemes,
+        defaultTheme,
+        defaultColorTheme,
+        animationType,
+        duration,
+        storageKey,
+        colorStorageKey,
+        globalClassName: attribute === 'class' ? globalClassName : undefined,
+        colorThemePrefix,
     });
-    (0, react_1.useEffect)(() => {
-        if (!enableSystem)
-            return;
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const updateSystemTheme = () => {
-            setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
-        };
-        updateSystemTheme();
-        mediaQuery.addEventListener('change', updateSystemTheme);
-        return () => mediaQuery.removeEventListener('change', updateSystemTheme);
-    }, [enableSystem]);
-    const resolvedTheme = theme === 'system' ? systemTheme : theme;
-    (0, react_1.useEffect)(() => {
-        if (!mounted)
-            return;
-        const root = document.documentElement;
-        if (disableTransitionOnChange) {
-            const css = document.createElement('style');
-            css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
-            document.head.appendChild(css);
-            window.getComputedStyle(document.body);
+    const applyTransitionDisable = (0, react_1.useCallback)(() => {
+        if (!disableTransitionOnChange)
+            return () => { };
+        const css = document.createElement('style');
+        css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
+        document.head.appendChild(css);
+        window.getComputedStyle(document.body);
+        return () => {
             setTimeout(() => {
                 document.head.removeChild(css);
             }, 1);
-        }
-        if (attribute === 'class') {
-            root.classList.remove('light', 'dark');
-            root.classList.add(resolvedTheme);
+        };
+    }, [disableTransitionOnChange]);
+    const wrappedSetTheme = (0, react_1.useCallback)((theme) => {
+        const cleanup = applyTransitionDisable();
+        themeState.setTheme(theme);
+        cleanup();
+    }, [themeState.setTheme, applyTransitionDisable]);
+    const wrappedSwitchTheme = (0, react_1.useCallback)(async (theme, animationOff = false) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.switchTheme(theme, animationOff);
+        cleanup();
+    }, [themeState.switchTheme, applyTransitionDisable]);
+    const wrappedToggleTheme = (0, react_1.useCallback)(async (animationOff = false) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleTheme(animationOff);
+        cleanup();
+    }, [themeState.toggleTheme, applyTransitionDisable]);
+    const wrappedToggleLightTheme = (0, react_1.useCallback)(async (animationOff = false) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleLightTheme(animationOff);
+        cleanup();
+    }, [themeState.toggleLightTheme, applyTransitionDisable]);
+    const wrappedToggleDarkTheme = (0, react_1.useCallback)(async (animationOff = false) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleDarkTheme(animationOff);
+        cleanup();
+    }, [themeState.toggleDarkTheme, applyTransitionDisable]);
+    const switchThemeFromElement = async (theme, element) => {
+        const cleanup = applyTransitionDisable();
+        if (themeState.ref.current) {
+            const originalRef = themeState.ref.current;
+            Object.defineProperty(themeState.ref, 'current', {
+                value: element,
+                writable: true,
+                configurable: true,
+            });
+            await themeState.switchTheme(theme);
+            Object.defineProperty(themeState.ref, 'current', {
+                value: originalRef,
+                writable: true,
+                configurable: true,
+            });
         }
         else {
-            root.setAttribute(attribute, resolvedTheme);
-        }
-        try {
-            localStorage.setItem(storageKey, theme);
+            Object.defineProperty(themeState.ref, 'current', {
+                value: element,
+                writable: true,
+                configurable: true,
+            });
+            await themeState.switchTheme(theme);
         }
-        catch { }
-    }, [theme, resolvedTheme, mounted, attribute, disableTransitionOnChange, storageKey]);
-    (0, react_1.useEffect)(() => {
-        setMounted(true);
-    }, []);
-    const setTheme = (0, react_1.useCallback)((newTheme) => {
-        setThemeState(newTheme);
-    }, []);
-    if (!mounted) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-    }
-    const value = {
-        theme,
-        resolvedTheme,
-        setTheme,
+        cleanup();
+    };
+    const systemTheme = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    const contextValue = {
+        ref: themeState.ref,
+        theme: themeState.theme,
+        colorTheme: themeState.colorTheme,
+        resolvedTheme: themeState.resolvedTheme,
         systemTheme,
+        setTheme: wrappedSetTheme,
+        setColorTheme: themeState.setColorTheme,
+        switchTheme: wrappedSwitchTheme,
+        switchThemeFromElement,
+        switchColorTheme: themeState.switchColorTheme,
+        toggleTheme: wrappedToggleTheme,
+        toggleLightTheme: wrappedToggleLightTheme,
+        toggleDarkTheme: wrappedToggleDarkTheme,
+        toggleColorTheme: themeState.toggleColorTheme,
+        createColorThemeToggle: themeState.createColorThemeToggle,
+        isColorThemeActive: themeState.isColorThemeActive,
     };
-    return (0, jsx_runtime_1.jsx)(ViteThemeContext.Provider, { value: value, children: children });
+    return (0, jsx_runtime_1.jsx)(ViteThemeContext.Provider, { value: contextValue, children: children });
 };
 exports.ViteThemeProvider = ViteThemeProvider;
 const useViteTheme = () => {

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

@@ -13,34 +13,23 @@ const useThemeAnimation = (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;
-        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;
-        return defaultColorTheme;
+        const saved = localStorage.getItem(colorStorageKey);
+        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
     });
-    (0, react_1.useEffect)(() => {
-        setMounted(true);
-        if (isBrowser && !externalTheme) {
-            const saved = localStorage.getItem(storageKey);
-            if (saved && themes.indexOf(saved) !== -1) {
-                setInternalTheme(saved);
-            }
-        }
-        if (isBrowser && !externalColorTheme) {
-            const saved = localStorage.getItem(colorStorageKey);
-            if (saved && colorThemes.indexOf(saved) !== -1) {
-                setInternalColorTheme(saved);
-            }
-        }
-    }, []);
     const currentTheme = externalTheme ?? internalTheme;
     const currentColorTheme = externalColorTheme ?? internalColorTheme;
     const [, setSystemTheme] = (0, react_1.useState)(() => (0, animations_1.getSystemTheme)());
@@ -97,8 +86,8 @@ const useThemeAnimation = (props = {}) => {
             onColorThemeChange(newColorTheme);
         }
     }, [onColorThemeChange, externalColorTheme, colorStorageKey]);
-    const switchTheme = (0, react_1.useCallback)(async (newTheme) => {
-        if (!ref.current || !(0, animations_1.supportsViewTransitions)() || (0, animations_1.prefersReducedMotion)()) {
+    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;
         }
@@ -186,26 +175,45 @@ const useThemeAnimation = (props = {}) => {
         slideToX,
         slideToY,
     ]);
-    const toggleTheme = (0, react_1.useCallback)(async () => {
+    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);
+        await switchTheme(newTheme, animationOff);
     }, [resolvedTheme, switchTheme]);
-    (0, react_1.useEffect)(() => {
-        if (!isBrowser || !mounted)
+    const toggleLightTheme = (0, react_1.useCallback)(async (animationOff = false) => {
+        if (resolvedTheme === 'light')
             return;
-        if (resolvedTheme === 'dark') {
-            document.documentElement.classList.add(globalClassName);
-        }
-        else {
-            document.documentElement.classList.remove(globalClassName);
-        }
-        colorThemes.forEach(theme => {
-            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        if (currentColorTheme !== 'default') {
-            document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-        }
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
+        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,
@@ -213,8 +221,14 @@ const useThemeAnimation = (props = {}) => {
         resolvedTheme,
         setTheme,
         setColorTheme,
-        toggleTheme,
         switchTheme,
+        switchColorTheme,
+        toggleTheme,
+        toggleLightTheme,
+        toggleDarkTheme,
+        toggleColorTheme,
+        createColorThemeToggle,
+        isColorThemeActive,
     };
 };
 exports.useThemeAnimation = useThemeAnimation;

package/dist/cjs/index.d.ts

@@ -2,8 +2,9 @@ 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 type { ViteThemeContextType } from './components/ViteThemeProvider';
 export { ThemeAnimationType } from './types';
 export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "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.useSpacemanTheme = exports.SpacemanThemeProvider = exports.ThemeSelector = exports.ThemeSwitcher = exports.useThemeAnimation = void 0;
+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");
@@ -10,6 +10,13 @@ Object.defineProperty(exports, "ThemeSelector", { enumerable: true, get: functio
 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; } });

package/dist/cjs/types/index.d.ts

@@ -38,8 +38,14 @@ export interface UseThemeAnimationReturn {
     resolvedTheme: 'light' | 'dark';
     setTheme: (theme: Theme) => void;
     setColorTheme: (colorTheme: ColorTheme) => void;
-    toggleTheme: () => Promise<void>;
-    switchTheme: (theme: Theme) => Promise<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;
 }
 export interface ThemeSwitcherProps {
     themes?: Theme[];

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

@@ -0,0 +1,81 @@
+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 {};