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

package/dist/cjs/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 {};

package/dist/cjs/components/NextThemeProvider.js

@@ -0,0 +1,223 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNextTheme = exports.NextThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const use_theme_animation_1 = require("../hooks/use-theme-animation");
+const types_1 = require("../types");
+const NextThemeContext = (0, react_1.createContext)(undefined);
+/**
+ * Pre-hydration script content generator
+ * This script runs BEFORE React hydrates to prevent flash of wrong theme
+ */
+const generatePreHydrationScript = (storageKey, colorStorageKey, defaultTheme, defaultColorTheme, attribute, globalClassName, colorThemePrefix) => {
+    return `
+(function() {
+  try {
+    var theme = localStorage.getItem('${storageKey}') || '${defaultTheme}';
+    var colorTheme = localStorage.getItem('${colorStorageKey}') || '${defaultColorTheme}';
+    var resolved = theme === 'system' 
+      ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      : theme;
+    
+    if ('${attribute}' === 'class') {
+      if (resolved === 'dark') {
+        document.documentElement.classList.add('${globalClassName}');
+      } else {
+        document.documentElement.classList.remove('${globalClassName}');
+      }
+    } else {
+      document.documentElement.setAttribute('data-theme', resolved);
+    }
+    
+    document.documentElement.style.colorScheme = resolved;
+    document.documentElement.classList.add('${colorThemePrefix}' + colorTheme);
+  } catch (e) {
+    console.warn('Theme pre-hydration script failed:', e);
+  }
+})();
+`;
+};
+/**
+ * Pre-hydration script component
+ * Injects inline script before React hydration to prevent theme flash
+ */
+const ThemePreHydrationScript = react_1.default.memo(({ storageKey, colorStorageKey, defaultTheme, defaultColorTheme, attribute, globalClassName, colorThemePrefix, nonce, }) => {
+    const scriptContent = generatePreHydrationScript(storageKey, colorStorageKey, defaultTheme, defaultColorTheme, attribute, globalClassName, colorThemePrefix);
+    return ((0, jsx_runtime_1.jsx)("script", { nonce: nonce, suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: scriptContent } }));
+});
+ThemePreHydrationScript.displayName = 'ThemePreHydrationScript';
+/**
+ * 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)
+ */
+const NextThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, storageKey = 'theme', colorStorageKey = 'color-theme', attribute = 'class', globalClassName = 'dark', colorThemePrefix = 'theme-', nonce, disableAnimationOnInit = true, disablePreHydrationScript = false, }) => {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    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)(() => {
+        setMounted(true);
+    }, []);
+    const switchThemeWithHydrationAwareness = (0, react_1.useCallback)(async (theme, animationOff = false) => {
+        if (!mounted && disableAnimationOnInit) {
+            themeState.setTheme(theme);
+        }
+        else {
+            await themeState.switchTheme(theme, animationOff);
+        }
+    }, [mounted, disableAnimationOnInit, themeState]);
+    const switchThemeFromElement = (0, react_1.useCallback)(async (theme, element) => {
+        if (!mounted && disableAnimationOnInit) {
+            themeState.setTheme(theme);
+            return;
+        }
+        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 {
+            Object.defineProperty(themeState.ref, 'current', {
+                value: element,
+                writable: true,
+                configurable: true,
+            });
+            await themeState.switchTheme(theme);
+        }
+    }, [mounted, disableAnimationOnInit, themeState]);
+    const systemTheme = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    if (!mounted) {
+        const loadingContextValue = {
+            ref: { current: null },
+            theme: defaultTheme,
+            colorTheme: defaultColorTheme,
+            resolvedTheme: defaultTheme === 'dark' ? 'dark' : 'light',
+            systemTheme: 'light',
+            setTheme: () => { },
+            setColorTheme: () => { },
+            switchTheme: async () => { },
+            switchThemeFromElement: async () => { },
+            switchColorTheme: () => { },
+            toggleTheme: async () => { },
+            toggleLightTheme: async () => { },
+            toggleDarkTheme: async () => { },
+            toggleColorTheme: () => { },
+            createColorThemeToggle: () => () => { },
+            isColorThemeActive: () => false,
+        };
+        return ((0, jsx_runtime_1.jsxs)(NextThemeContext.Provider, { value: loadingContextValue, children: [!disablePreHydrationScript && ((0, jsx_runtime_1.jsx)(ThemePreHydrationScript, { storageKey: storageKey, colorStorageKey: colorStorageKey, defaultTheme: defaultTheme, defaultColorTheme: defaultColorTheme, attribute: attribute, globalClassName: globalClassName, colorThemePrefix: colorThemePrefix, nonce: nonce })), children] }));
+    }
+    const contextValue = {
+        ref: themeState.ref,
+        theme: themeState.theme,
+        colorTheme: themeState.colorTheme,
+        resolvedTheme: themeState.resolvedTheme,
+        systemTheme,
+        setTheme: themeState.setTheme,
+        setColorTheme: themeState.setColorTheme,
+        switchTheme: switchThemeWithHydrationAwareness,
+        switchThemeFromElement,
+        switchColorTheme: themeState.switchColorTheme,
+        toggleTheme: themeState.toggleTheme,
+        toggleLightTheme: themeState.toggleLightTheme,
+        toggleDarkTheme: themeState.toggleDarkTheme,
+        toggleColorTheme: themeState.toggleColorTheme,
+        createColorThemeToggle: themeState.createColorThemeToggle,
+        isColorThemeActive: themeState.isColorThemeActive,
+    };
+    return ((0, jsx_runtime_1.jsxs)(NextThemeContext.Provider, { value: contextValue, children: [!disablePreHydrationScript && ((0, jsx_runtime_1.jsx)(ThemePreHydrationScript, { storageKey: storageKey, colorStorageKey: colorStorageKey, defaultTheme: defaultTheme, defaultColorTheme: defaultColorTheme, attribute: attribute, globalClassName: globalClassName, colorThemePrefix: colorThemePrefix, nonce: nonce })), children] }));
+};
+exports.NextThemeProvider = NextThemeProvider;
+/**
+ * Hook to consume the Next Theme context
+ *
+ * @returns Theme context value with all theme state and methods
+ * @throws Error if used outside of NextThemeProvider
+ */
+const useNextTheme = () => {
+    const context = (0, react_1.useContext)(NextThemeContext);
+    if (context === undefined) {
+        throw new Error('useNextTheme must be used within a NextThemeProvider');
+    }
+    return context;
+};
+exports.useNextTheme = useNextTheme;

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

@@ -0,0 +1,68 @@
+import React, { ReactNode } from 'react';
+import { Theme, ColorTheme, ThemeAnimationType } from '../types';
+/**
+ * Context type for the TanStack Start Theme Provider
+ */
+interface TanStackThemeContextType {
+    ref: React.RefObject<HTMLButtonElement | null>;
+    theme: Theme;
+    colorTheme: ColorTheme;
+    resolvedTheme: 'light' | 'dark';
+    systemTheme: 'light' | 'dark';
+    isHydrated: boolean;
+    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 TanStack Start Theme Provider
+ */
+interface TanStackThemeProviderProps {
+    children: ReactNode;
+    themes?: Theme[];
+    colorThemes?: ColorTheme[];
+    defaultTheme?: Theme;
+    defaultColorTheme?: ColorTheme;
+    animationType?: ThemeAnimationType;
+    duration?: number;
+    /** Storage key for theme preference */
+    storageKey?: string;
+    /** Storage key for color theme preference */
+    colorStorageKey?: string;
+    /** Class name for dark theme */
+    globalClassName?: string;
+    /** Prefix for color theme classes */
+    colorThemePrefix?: string;
+}
+/**
+ * TanStack Start Theme Provider - Optimized for TanStack Start Framework
+ *
+ * @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 globalClassName - Class name for dark theme
+ * @param colorThemePrefix - Prefix for color theme classes
+ */
+export declare const TanStackThemeProvider: React.FC<TanStackThemeProviderProps>;
+/**
+ * Hook to consume the TanStack Theme context
+ *
+ * @returns Theme context value with all theme state and methods
+ * @throws Error if used outside of TanStackThemeProvider
+ */
+export declare const useTanStackTheme: () => TanStackThemeContextType;
+export {};

package/dist/cjs/components/TanStackThemeProvider.js

@@ -0,0 +1,183 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTanStackTheme = exports.TanStackThemeProvider = 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 TanStackThemeContext = (0, react_1.createContext)(undefined);
+/**
+ * Custom hook to detect hydration state
+ * This is a simplified version compatible with TanStack Start's isomorphic model
+ *
+ * In TanStack Start, you can also use the built-in `useHydrated()` hook
+ * from `@tanstack/start` if available
+ */
+const useHydrated = () => {
+    return (0, react_1.useSyncExternalStore)(
+    // Subscribe function (no-op for hydration state)
+    () => () => { }, 
+    // Client snapshot: always true after hydration
+    () => true, 
+    // Server snapshot: always false during SSR
+    () => false);
+};
+/**
+ * TanStack Start Theme Provider - Optimized for TanStack Start Framework
+ *
+ * @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 globalClassName - Class name for dark theme
+ * @param colorThemePrefix - Prefix for color theme classes
+ */
+const TanStackThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, storageKey = 'theme', colorStorageKey = 'color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
+    const isHydrated = useHydrated();
+    const themeState = (0, use_theme_animation_1.useThemeAnimation)({
+        themes,
+        colorThemes,
+        defaultTheme,
+        defaultColorTheme,
+        animationType,
+        duration,
+        storageKey,
+        colorStorageKey,
+        globalClassName,
+        colorThemePrefix,
+    });
+    // Hydration-aware theme switch: instant during hydration, animated after
+    const switchThemeWithHydrationAwareness = (0, react_1.useCallback)(async (theme, animationOff = false) => {
+        if (!isHydrated) {
+            // During hydration: instant switch, no animation
+            themeState.setTheme(theme);
+        }
+        else {
+            // After hydration: animated switch
+            await themeState.switchTheme(theme, animationOff);
+        }
+    }, [isHydrated, themeState]);
+    const toggleThemeWithHydrationAwareness = (0, react_1.useCallback)(async (animationOff = false) => {
+        if (!isHydrated) {
+            const nextTheme = themeState.resolvedTheme === 'dark' ? 'light' : 'dark';
+            themeState.setTheme(nextTheme);
+        }
+        else {
+            await themeState.toggleTheme(animationOff);
+        }
+    }, [isHydrated, themeState]);
+    const toggleLightThemeWithHydrationAwareness = (0, react_1.useCallback)(async (animationOff = false) => {
+        if (!isHydrated) {
+            themeState.setTheme('light');
+        }
+        else {
+            await themeState.toggleLightTheme(animationOff);
+        }
+    }, [isHydrated, themeState]);
+    const toggleDarkThemeWithHydrationAwareness = (0, react_1.useCallback)(async (animationOff = false) => {
+        if (!isHydrated) {
+            themeState.setTheme('dark');
+        }
+        else {
+            await themeState.toggleDarkTheme(animationOff);
+        }
+    }, [isHydrated, themeState]);
+    const switchThemeFromElement = (0, react_1.useCallback)(async (theme, element) => {
+        if (!isHydrated) {
+            themeState.setTheme(theme);
+            return;
+        }
+        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 {
+            Object.defineProperty(themeState.ref, 'current', {
+                value: element,
+                writable: true,
+                configurable: true,
+            });
+            await themeState.switchTheme(theme);
+        }
+    }, [isHydrated, themeState]);
+    const systemTheme = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    // During SSR/hydration: provide safe context without animations
+    if (!isHydrated) {
+        const loadingContextValue = {
+            ref: { current: null },
+            theme: defaultTheme,
+            colorTheme: defaultColorTheme,
+            resolvedTheme: defaultTheme === 'dark' ? 'dark' : 'light',
+            systemTheme: 'light',
+            isHydrated: false,
+            setTheme: themeState.setTheme,
+            setColorTheme: themeState.setColorTheme,
+            switchTheme: async (theme, animationOff = false) => themeState.setTheme(theme),
+            switchThemeFromElement: async (theme) => themeState.setTheme(theme),
+            switchColorTheme: themeState.switchColorTheme,
+            toggleTheme: async (animationOff = false) => {
+                const nextTheme = themeState.resolvedTheme === 'dark' ? 'light' : 'dark';
+                themeState.setTheme(nextTheme);
+            },
+            toggleLightTheme: async (animationOff = false) => themeState.setTheme('light'),
+            toggleDarkTheme: async (animationOff = false) => themeState.setTheme('dark'),
+            toggleColorTheme: themeState.toggleColorTheme,
+            createColorThemeToggle: themeState.createColorThemeToggle,
+            isColorThemeActive: themeState.isColorThemeActive,
+        };
+        return ((0, jsx_runtime_1.jsx)(TanStackThemeContext.Provider, { value: loadingContextValue, children: children }));
+    }
+    // After hydration: full context with animations enabled
+    const contextValue = {
+        ref: themeState.ref,
+        theme: themeState.theme,
+        colorTheme: themeState.colorTheme,
+        resolvedTheme: themeState.resolvedTheme,
+        systemTheme,
+        isHydrated: true,
+        setTheme: themeState.setTheme,
+        setColorTheme: themeState.setColorTheme,
+        switchTheme: switchThemeWithHydrationAwareness,
+        switchThemeFromElement,
+        switchColorTheme: themeState.switchColorTheme,
+        toggleTheme: toggleThemeWithHydrationAwareness,
+        toggleLightTheme: toggleLightThemeWithHydrationAwareness,
+        toggleDarkTheme: toggleDarkThemeWithHydrationAwareness,
+        toggleColorTheme: themeState.toggleColorTheme,
+        createColorThemeToggle: themeState.createColorThemeToggle,
+        isColorThemeActive: themeState.isColorThemeActive,
+    };
+    return ((0, jsx_runtime_1.jsx)(TanStackThemeContext.Provider, { value: contextValue, children: children }));
+};
+exports.TanStackThemeProvider = TanStackThemeProvider;
+/**
+ * Hook to consume the TanStack Theme context
+ *
+ * @returns Theme context value with all theme state and methods
+ * @throws Error if used outside of TanStackThemeProvider
+ */
+const useTanStackTheme = () => {
+    const context = (0, react_1.useContext)(TanStackThemeContext);
+    if (context === undefined) {
+        throw new Error('useTanStackTheme must be used within a TanStackThemeProvider');
+    }
+    return context;
+};
+exports.useTanStackTheme = useTanStackTheme;

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

@@ -8,11 +8,11 @@ interface ViteThemeContextType {
     systemTheme: '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;
@@ -33,6 +33,29 @@ interface ViteThemeProviderProps {
     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

@@ -6,6 +6,29 @@ 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);
+/**
+ * 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,
@@ -37,24 +60,24 @@ const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system'], col
         themeState.setTheme(theme);
         cleanup();
     }, [themeState.setTheme, applyTransitionDisable]);
-    const wrappedSwitchTheme = (0, react_1.useCallback)(async (theme) => {
+    const wrappedSwitchTheme = (0, react_1.useCallback)(async (theme, animationOff = false) => {
         const cleanup = applyTransitionDisable();
-        await themeState.switchTheme(theme);
+        await themeState.switchTheme(theme, animationOff);
         cleanup();
     }, [themeState.switchTheme, applyTransitionDisable]);
-    const wrappedToggleTheme = (0, react_1.useCallback)(async () => {
+    const wrappedToggleTheme = (0, react_1.useCallback)(async (animationOff = false) => {
         const cleanup = applyTransitionDisable();
-        await themeState.toggleTheme();
+        await themeState.toggleTheme(animationOff);
         cleanup();
     }, [themeState.toggleTheme, applyTransitionDisable]);
-    const wrappedToggleLightTheme = (0, react_1.useCallback)(async () => {
+    const wrappedToggleLightTheme = (0, react_1.useCallback)(async (animationOff = false) => {
         const cleanup = applyTransitionDisable();
-        await themeState.toggleLightTheme();
+        await themeState.toggleLightTheme(animationOff);
         cleanup();
     }, [themeState.toggleLightTheme, applyTransitionDisable]);
-    const wrappedToggleDarkTheme = (0, react_1.useCallback)(async () => {
+    const wrappedToggleDarkTheme = (0, react_1.useCallback)(async (animationOff = false) => {
         const cleanup = applyTransitionDisable();
-        await themeState.toggleDarkTheme();
+        await themeState.toggleDarkTheme(animationOff);
         cleanup();
     }, [themeState.toggleDarkTheme, applyTransitionDisable]);
     const switchThemeFromElement = async (theme, element) => {