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

package/dist/esm/components/ViteThemeProvider.js

@@ -1,75 +1,130 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useCallback } from 'react';
+import { useThemeAnimation } from '../hooks/use-theme-animation';
+import { ThemeAnimationType } from '../types';
 const ViteThemeContext = createContext(undefined);
-export const ViteThemeProvider = ({ children, attribute = 'class', defaultTheme = 'system', enableSystem = true, disableTransitionOnChange = false, storageKey = 'vite-theme', }) => {
-    const [mounted, setMounted] = useState(false);
-    const [systemTheme, setSystemTheme] = useState('light');
-    const [theme, setThemeState] = 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
+ */
+export const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = ThemeAnimationType.CIRCLE, duration = 750, attribute = 'class', disableTransitionOnChange = false, storageKey = 'vite-theme', colorStorageKey = 'vite-color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
+    const themeState = useThemeAnimation({
+        themes,
+        colorThemes,
+        defaultTheme,
+        defaultColorTheme,
+        animationType,
+        duration,
+        storageKey,
+        colorStorageKey,
+        globalClassName: attribute === 'class' ? globalClassName : undefined,
+        colorThemePrefix,
     });
-    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;
-    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 = 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 = useCallback((theme) => {
+        const cleanup = applyTransitionDisable();
+        themeState.setTheme(theme);
+        cleanup();
+    }, [themeState.setTheme, applyTransitionDisable]);
+    const wrappedSwitchTheme = useCallback(async (theme, animationOff = false) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.switchTheme(theme, animationOff);
+        cleanup();
+    }, [themeState.switchTheme, applyTransitionDisable]);
+    const wrappedToggleTheme = useCallback(async (animationOff = false) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleTheme(animationOff);
+        cleanup();
+    }, [themeState.toggleTheme, applyTransitionDisable]);
+    const wrappedToggleLightTheme = useCallback(async (animationOff = false) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleLightTheme(animationOff);
+        cleanup();
+    }, [themeState.toggleLightTheme, applyTransitionDisable]);
+    const wrappedToggleDarkTheme = 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]);
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    const setTheme = useCallback((newTheme) => {
-        setThemeState(newTheme);
-    }, []);
-    if (!mounted) {
-        return _jsx(_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 _jsx(ViteThemeContext.Provider, { value: value, children: children });
+    return _jsx(ViteThemeContext.Provider, { value: contextValue, children: children });
 };
 export const useViteTheme = () => {
     const context = useContext(ViteThemeContext);

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

@@ -10,34 +10,23 @@ export 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] = useState(false);
+    // Inject base styles once on mount
     useEffect(() => {
         injectBaseStyles();
+        setMounted(true);
     }, []);
     const [internalTheme, setInternalTheme] = useState(() => {
         if (!isBrowser)
             return defaultTheme;
-        return defaultTheme;
+        const saved = localStorage.getItem(storageKey);
+        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
     });
     const [internalColorTheme, setInternalColorTheme] = useState(() => {
         if (!isBrowser)
             return defaultColorTheme;
-        return defaultColorTheme;
+        const saved = localStorage.getItem(colorStorageKey);
+        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
     });
-    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] = useState(() => getSystemTheme());
@@ -94,8 +83,8 @@ export const useThemeAnimation = (props = {}) => {
             onColorThemeChange(newColorTheme);
         }
     }, [onColorThemeChange, externalColorTheme, colorStorageKey]);
-    const switchTheme = useCallback(async (newTheme) => {
-        if (!ref.current || !supportsViewTransitions() || prefersReducedMotion()) {
+    const switchTheme = useCallback(async (newTheme, animationOff = false) => {
+        if (!ref.current || !supportsViewTransitions() || prefersReducedMotion() || animationOff) {
             setTheme(newTheme);
             return;
         }
@@ -183,26 +172,45 @@ export const useThemeAnimation = (props = {}) => {
         slideToX,
         slideToY,
     ]);
-    const toggleTheme = useCallback(async () => {
+    const switchColorTheme = useCallback((newColorTheme) => {
+        if (colorThemes.indexOf(newColorTheme) === -1) {
+            console.warn(`Color theme "${newColorTheme}" not found in available themes`);
+            return;
+        }
+        setColorTheme(newColorTheme);
+    }, [colorThemes, setColorTheme]);
+    const toggleTheme = useCallback(async (animationOff = false) => {
         const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
-        await switchTheme(newTheme);
+        await switchTheme(newTheme, animationOff);
     }, [resolvedTheme, switchTheme]);
-    useEffect(() => {
-        if (!isBrowser || !mounted)
+    const toggleLightTheme = 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 = useCallback(async (animationOff = false) => {
+        if (resolvedTheme === 'dark')
+            return;
+        await switchTheme('dark', animationOff);
+    }, [resolvedTheme, switchTheme]);
+    const toggleColorTheme = useCallback(() => {
+        const currentIndex = colorThemes.indexOf(currentColorTheme);
+        const nextIndex = (currentIndex + 1) % colorThemes.length;
+        const nextColorTheme = colorThemes[nextIndex];
+        setColorTheme(nextColorTheme);
+    }, [currentColorTheme, colorThemes, setColorTheme]);
+    const createColorThemeToggle = 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 = useCallback((targetColorTheme) => {
+        return currentColorTheme === targetColorTheme;
+    }, [currentColorTheme]);
     return {
         ref,
         theme: currentTheme,
@@ -210,7 +218,13 @@ export const useThemeAnimation = (props = {}) => {
         resolvedTheme,
         setTheme,
         setColorTheme,
-        toggleTheme,
         switchTheme,
+        switchColorTheme,
+        toggleTheme,
+        toggleLightTheme,
+        toggleDarkTheme,
+        toggleColorTheme,
+        createColorThemeToggle,
+        isColorThemeActive,
     };
 };

package/dist/esm/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/esm/index.js

@@ -2,6 +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';
+// Framework-specific optimized providers
+export { NextThemeProvider, useNextTheme } from './components/NextThemeProvider';
+export { TanStackThemeProvider, useTanStackTheme } from './components/TanStackThemeProvider';
 export { ViteThemeProvider, useViteTheme } from './components/ViteThemeProvider';
 export { ThemeAnimationType } from './types';
 export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/esm/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "1.1.1",
+  "version": "2.1.0",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",