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

package/dist/esm/components/ViteThemeProvider.js

@@ -3,6 +3,29 @@ import { createContext, useContext, useCallback } from 'react';
 import { useThemeAnimation } from '../hooks/use-theme-animation';
 import { ThemeAnimationType } from '../types';
 const ViteThemeContext = createContext(undefined);
+/**
+ * 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,
@@ -34,24 +57,24 @@ export const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system
         themeState.setTheme(theme);
         cleanup();
     }, [themeState.setTheme, applyTransitionDisable]);
-    const wrappedSwitchTheme = useCallback(async (theme) => {
+    const wrappedSwitchTheme = useCallback(async (theme, animationOff = false) => {
         const cleanup = applyTransitionDisable();
-        await themeState.switchTheme(theme);
+        await themeState.switchTheme(theme, animationOff);
         cleanup();
     }, [themeState.switchTheme, applyTransitionDisable]);
-    const wrappedToggleTheme = useCallback(async () => {
+    const wrappedToggleTheme = useCallback(async (animationOff = false) => {
         const cleanup = applyTransitionDisable();
-        await themeState.toggleTheme();
+        await themeState.toggleTheme(animationOff);
         cleanup();
     }, [themeState.toggleTheme, applyTransitionDisable]);
-    const wrappedToggleLightTheme = useCallback(async () => {
+    const wrappedToggleLightTheme = useCallback(async (animationOff = false) => {
         const cleanup = applyTransitionDisable();
-        await themeState.toggleLightTheme();
+        await themeState.toggleLightTheme(animationOff);
         cleanup();
     }, [themeState.toggleLightTheme, applyTransitionDisable]);
-    const wrappedToggleDarkTheme = useCallback(async () => {
+    const wrappedToggleDarkTheme = useCallback(async (animationOff = false) => {
         const cleanup = applyTransitionDisable();
-        await themeState.toggleDarkTheme();
+        await themeState.toggleDarkTheme(animationOff);
         cleanup();
     }, [themeState.toggleDarkTheme, applyTransitionDisable]);
     const switchThemeFromElement = async (theme, element) => {

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

@@ -83,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;
         }
@@ -179,19 +179,19 @@ export const useThemeAnimation = (props = {}) => {
         }
         setColorTheme(newColorTheme);
     }, [colorThemes, setColorTheme]);
-    const toggleTheme = useCallback(async () => {
+    const toggleTheme = useCallback(async (animationOff = false) => {
         const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
-        await switchTheme(newTheme);
+        await switchTheme(newTheme, animationOff);
     }, [resolvedTheme, switchTheme]);
-    const toggleLightTheme = useCallback(async () => {
+    const toggleLightTheme = useCallback(async (animationOff = false) => {
         if (resolvedTheme === 'light')
             return;
-        await switchTheme('light');
+        await switchTheme('light', animationOff);
     }, [resolvedTheme, switchTheme]);
-    const toggleDarkTheme = useCallback(async () => {
+    const toggleDarkTheme = useCallback(async (animationOff = false) => {
         if (resolvedTheme === 'dark')
             return;
-        await switchTheme('dark');
+        await switchTheme('dark', animationOff);
     }, [resolvedTheme, switchTheme]);
     const toggleColorTheme = useCallback(() => {
         const currentIndex = colorThemes.indexOf(currentColorTheme);

package/dist/esm/index.d.ts

@@ -2,6 +2,8 @@ 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';

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,11 +38,11 @@ export interface UseThemeAnimationReturn {
     resolvedTheme: 'light' | 'dark';
     setTheme: (theme: Theme) => void;
     setColorTheme: (colorTheme: ColorTheme) => void;
-    switchTheme: (theme: Theme) => Promise<void>;
+    switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>;
     switchColorTheme: (colorTheme: string) => void;
-    toggleTheme: () => Promise<void>;
-    toggleLightTheme: () => Promise<void>;
-    toggleDarkTheme: () => Promise<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;

package/package.json

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