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

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

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

@@ -1,223 +0,0 @@
-"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/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/cjs/components/SpacemanThemeProvider.js

@@ -1,113 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSpacemanTheme = exports.SpacemanThemeProvider = 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 SpacemanThemeContext = (0, react_1.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)
- */
-const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, }) => {
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    const themeState = (0, use_theme_animation_1.useThemeAnimation)({
-        themes,
-        colorThemes,
-        defaultTheme,
-        defaultColorTheme,
-        animationType,
-        duration,
-    });
-    (0, react_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(SpacemanThemeContext.Provider, { value: contextValue, children: children }));
-};
-exports.SpacemanThemeProvider = SpacemanThemeProvider;
-/**
- * Hook to consume the Spaceman Theme context
- *
- * @returns Theme context value with all theme state and methods
- * @throws Error if used outside of SpacemanThemeProvider
- */
-const useSpacemanTheme = () => {
-    const context = (0, react_1.useContext)(SpacemanThemeContext);
-    if (context === undefined) {
-        throw new Error('useSpacemanTheme must be used within a SpacemanThemeProvider');
-    }
-    return context;
-};
-exports.useSpacemanTheme = useSpacemanTheme;

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