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

package/dist/esm/components/NextThemeProvider.js

@@ -1,185 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { createContext, useContext, useState, useEffect, useCallback, } from 'react';
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { ThemeAnimationType } from '../types';
-const NextThemeContext = 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.memo(({ storageKey, colorStorageKey, defaultTheme, defaultColorTheme, attribute, globalClassName, colorThemePrefix, nonce, }) => {
-    const scriptContent = generatePreHydrationScript(storageKey, colorStorageKey, defaultTheme, defaultColorTheme, attribute, globalClassName, colorThemePrefix);
-    return (_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)
- */
-export const NextThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = ThemeAnimationType.CIRCLE, duration = 750, storageKey = 'theme', colorStorageKey = 'color-theme', attribute = 'class', globalClassName = 'dark', colorThemePrefix = 'theme-', nonce, disableAnimationOnInit = true, disablePreHydrationScript = false, }) => {
-    const [mounted, setMounted] = useState(false);
-    const themeState = useThemeAnimation({
-        themes,
-        colorThemes,
-        defaultTheme,
-        defaultColorTheme,
-        animationType,
-        duration,
-        storageKey,
-        colorStorageKey,
-        globalClassName: attribute === 'class' ? globalClassName : undefined,
-        colorThemePrefix,
-    });
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    const switchThemeWithHydrationAwareness = useCallback(async (theme, animationOff = false) => {
-        if (!mounted && disableAnimationOnInit) {
-            themeState.setTheme(theme);
-        }
-        else {
-            await themeState.switchTheme(theme, animationOff);
-        }
-    }, [mounted, disableAnimationOnInit, themeState]);
-    const switchThemeFromElement = 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 (_jsxs(NextThemeContext.Provider, { value: loadingContextValue, children: [!disablePreHydrationScript && (_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 (_jsxs(NextThemeContext.Provider, { value: contextValue, children: [!disablePreHydrationScript && (_jsx(ThemePreHydrationScript, { storageKey: storageKey, colorStorageKey: colorStorageKey, defaultTheme: defaultTheme, defaultColorTheme: defaultColorTheme, attribute: attribute, globalClassName: globalClassName, colorThemePrefix: colorThemePrefix, nonce: nonce })), children] }));
-};
-/**
- * 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 const useNextTheme = () => {
-    const context = useContext(NextThemeContext);
-    if (context === undefined) {
-        throw new Error('useNextTheme must be used within a NextThemeProvider');
-    }
-    return context;
-};

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

@@ -1,57 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Theme, ColorTheme, ThemeAnimationType } from '../types';
-/**
- * Context type for the Spaceman Theme Provider
- */
-interface SpacemanThemeContextType {
-    ref: React.RefObject<HTMLButtonElement | null>;
-    theme: Theme;
-    colorTheme: ColorTheme;
-    resolvedTheme: 'light' | 'dark';
-    setTheme: (theme: Theme) => void;
-    setColorTheme: (colorTheme: ColorTheme) => void;
-    switchTheme: (theme: Theme) => Promise<void>;
-    switchColorTheme: (colorTheme: string) => void;
-    toggleTheme: () => Promise<void>;
-    toggleLightTheme: () => Promise<void>;
-    toggleDarkTheme: () => Promise<void>;
-    toggleColorTheme: () => void;
-    createColorThemeToggle: (targetColorTheme: string) => () => void;
-    isColorThemeActive: (targetColorTheme: string) => boolean;
-    switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
-}
-/**
- * Props for the Spaceman Theme Provider
- */
-interface SpacemanThemeProviderProps {
-    children: ReactNode;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-}
-/**
- * Spaceman Theme Provider - Provides centralized theme state management
- *
- * This provider creates a single source of truth for theme state using the useThemeAnimation hook.
- * All theme-related components should consume from this context to ensure synchronization.
- *
- * @param children - React children to wrap with theme context
- * @param themes - Available theme options (default: ['light', 'dark', 'system'])
- * @param colorThemes - Available color theme options (default: ['default'])
- * @param defaultTheme - Default theme to use (default: 'system')
- * @param defaultColorTheme - Default color theme to use (default: 'default')
- * @param animationType - Animation type for theme transitions (default: CIRCLE)
- * @param duration - Animation duration in milliseconds (default: 750)
- */
-export declare const SpacemanThemeProvider: React.FC<SpacemanThemeProviderProps>;
-/**
- * Hook to consume the Spaceman Theme context
- *
- * @returns Theme context value with all theme state and methods
- * @throws Error if used outside of SpacemanThemeProvider
- */
-export declare const useSpacemanTheme: () => SpacemanThemeContextType;
-export {};

package/dist/esm/components/SpacemanThemeProvider.js

@@ -1,108 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useState, useEffect } from 'react';
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { ThemeAnimationType } from '../types';
-const SpacemanThemeContext = createContext(undefined);
-/**
- * Spaceman Theme Provider - Provides centralized theme state management
- *
- * This provider creates a single source of truth for theme state using the useThemeAnimation hook.
- * All theme-related components should consume from this context to ensure synchronization.
- *
- * @param children - React children to wrap with theme context
- * @param themes - Available theme options (default: ['light', 'dark', 'system'])
- * @param colorThemes - Available color theme options (default: ['default'])
- * @param defaultTheme - Default theme to use (default: 'system')
- * @param defaultColorTheme - Default color theme to use (default: 'default')
- * @param animationType - Animation type for theme transitions (default: CIRCLE)
- * @param duration - Animation duration in milliseconds (default: 750)
- */
-export const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = ThemeAnimationType.CIRCLE, duration = 750, }) => {
-    const [mounted, setMounted] = useState(false);
-    const themeState = useThemeAnimation({
-        themes,
-        colorThemes,
-        defaultTheme,
-        defaultColorTheme,
-        animationType,
-        duration,
-    });
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    const switchThemeFromElement = async (theme, element) => {
-        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);
-        }
-    };
-    if (!mounted) {
-        const loadingContextValue = {
-            ref: { current: null },
-            theme: defaultTheme,
-            colorTheme: defaultColorTheme,
-            resolvedTheme: defaultTheme === 'dark' ? 'dark' : 'light',
-            setTheme: () => { },
-            setColorTheme: () => { },
-            switchTheme: async () => { },
-            switchThemeFromElement: async () => { },
-            switchColorTheme: () => { },
-            toggleTheme: async () => { },
-            toggleLightTheme: async () => { },
-            toggleDarkTheme: async () => { },
-            toggleColorTheme: () => { },
-            createColorThemeToggle: () => () => { },
-            isColorThemeActive: () => false,
-        };
-        return (_jsx(SpacemanThemeContext.Provider, { value: loadingContextValue, children: children }));
-    }
-    const contextValue = {
-        ref: themeState.ref,
-        theme: themeState.theme,
-        colorTheme: themeState.colorTheme,
-        resolvedTheme: themeState.resolvedTheme,
-        setTheme: themeState.setTheme,
-        setColorTheme: themeState.setColorTheme,
-        switchTheme: themeState.switchTheme,
-        switchThemeFromElement,
-        switchColorTheme: themeState.switchColorTheme,
-        toggleTheme: themeState.toggleTheme,
-        toggleLightTheme: themeState.toggleLightTheme,
-        toggleDarkTheme: themeState.toggleDarkTheme,
-        toggleColorTheme: themeState.toggleColorTheme,
-        createColorThemeToggle: themeState.createColorThemeToggle,
-        isColorThemeActive: themeState.isColorThemeActive,
-    };
-    return (_jsx(SpacemanThemeContext.Provider, { value: contextValue, children: children }));
-};
-/**
- * Hook to consume the Spaceman Theme context
- *
- * @returns Theme context value with all theme state and methods
- * @throws Error if used outside of SpacemanThemeProvider
- */
-export const useSpacemanTheme = () => {
-    const context = useContext(SpacemanThemeContext);
-    if (context === undefined) {
-        throw new Error('useSpacemanTheme must be used within a SpacemanThemeProvider');
-    }
-    return context;
-};

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

@@ -1,68 +0,0 @@
-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/esm/components/TanStackThemeProvider.js

@@ -1,178 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useCallback, useSyncExternalStore, } from 'react';
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { ThemeAnimationType } from '../types';
-const TanStackThemeContext = 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 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
- */
-export const TanStackThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = ThemeAnimationType.CIRCLE, duration = 750, storageKey = 'theme', colorStorageKey = 'color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
-    const isHydrated = useHydrated();
-    const themeState = useThemeAnimation({
-        themes,
-        colorThemes,
-        defaultTheme,
-        defaultColorTheme,
-        animationType,
-        duration,
-        storageKey,
-        colorStorageKey,
-        globalClassName,
-        colorThemePrefix,
-    });
-    // Hydration-aware theme switch: instant during hydration, animated after
-    const switchThemeWithHydrationAwareness = 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 = 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 = useCallback(async (animationOff = false) => {
-        if (!isHydrated) {
-            themeState.setTheme('light');
-        }
-        else {
-            await themeState.toggleLightTheme(animationOff);
-        }
-    }, [isHydrated, themeState]);
-    const toggleDarkThemeWithHydrationAwareness = useCallback(async (animationOff = false) => {
-        if (!isHydrated) {
-            themeState.setTheme('dark');
-        }
-        else {
-            await themeState.toggleDarkTheme(animationOff);
-        }
-    }, [isHydrated, themeState]);
-    const switchThemeFromElement = 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 (_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 (_jsx(TanStackThemeContext.Provider, { value: contextValue, children: children }));
-};
-/**
- * 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 const useTanStackTheme = () => {
-    const context = useContext(TanStackThemeContext);
-    if (context === undefined) {
-        throw new Error('useTanStackTheme must be used within a TanStackThemeProvider');
-    }
-    return context;
-};

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { ThemeSelectorProps } from '../types';
-export declare const ThemeSelector: React.FC<ThemeSelectorProps>;

package/dist/esm/components/ThemeSelector.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { useSpacemanTheme } from './SpacemanThemeProvider';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-export const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorThemes = ['default'], currentColorTheme, onColorThemeChange, animationType, duration, }) => {
-    // Try to use SpacemanTheme context if available (controlled mode)
-    let contextTheme = null;
-    try {
-        contextTheme = useSpacemanTheme();
-    }
-    catch {
-        // Context not available, use standalone mode
-    }
-    // Use context if available, otherwise fall back to standalone hook
-    const standaloneHook = useThemeAnimation({
-        animationType,
-        duration,
-        themes,
-        colorThemes,
-        ...(currentColorTheme !== undefined && { colorTheme: currentColorTheme }),
-        onColorThemeChange,
-    });
-    const isControlled = contextTheme !== null;
-    const { colorTheme, setColorTheme } = isControlled
-        ? { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme }
-        : standaloneHook;
-    const handleColorThemeChange = (newColorTheme) => {
-        setColorTheme(newColorTheme);
-        // Also call the callback if provided
-        if (onColorThemeChange) {
-            onColorThemeChange(newColorTheme);
-        }
-    };
-    return (_jsx(_Fragment, { children: colorThemes.length > 1 && (_jsx("div", { className: "flex flex-col gap-2", children: _jsxs(Select, { value: colorTheme, onValueChange: (v) => handleColorThemeChange(v), children: [_jsx(SelectTrigger, { className: "capitalize", children: _jsx(SelectValue, { placeholder: "Choose a color theme" }) }), _jsx(SelectContent, { children: colorThemes.map(theme => (_jsx(SelectItem, { className: "capitalize", value: theme, children: theme }, theme))) })] }) })) }));
-};

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

@@ -1,3 +0,0 @@
-import React from 'react';
-import { ThemeSwitcherProps } from '../types';
-export declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;