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

package/dist/logo-DtwtRv4y.d.ts

@@ -0,0 +1,4 @@
+/** Decode SVG assets before capture. A pending/failed asset never delays a toggle. */
+declare const preloadThemeLogo: (url: string) => Promise<void>;
+
+export { preloadThemeLogo as p };

package/dist/react/index.d.ts

@@ -1,45 +1,47 @@
-import { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, ThemeAnimationType, SystemThemeMode } from '../core/index.js';
-export { SlideDirection, getSystemTheme, injectBaseStyles, prefersReducedMotion, resolveTheme, resolveThemeForServer, supportsViewTransitions } from '../core/index.js';
+import { U as UseThemeAnimationProps, l as UseThemeAnimationReturn, h as ThemeSwitcherProps, g as ThemeSelectorProps, c as Theme, C as ColorTheme, e as ThemeAnimationType, i as ThemeTransitionInput, a as ColorThemeToggle, b as SystemThemeMode } from '../animations-BrxKLW8D.js';
+export { A as AnimationPosition, S as SlideDirection, T as TRANSITION_DIRECTIONS, d as ThemeAnimationOptions, f as ThemeLogoOptions, j as ThemeTransitionOptions, k as TransitionDirection, m as getSystemTheme, n as injectBaseStyles, p as prefersReducedMotion, r as resolveTheme, o as resolveThemeForServer, s as supportsViewTransitions } from '../animations-BrxKLW8D.js';
 import React, { ReactNode } from 'react';
+export { p as preloadThemeLogo } from '../logo-DtwtRv4y.js';
 
-declare const useThemeAnimation: (props?: UseThemeAnimationProps) => UseThemeAnimationReturn;
+declare const useThemeAnimation: (props?: Readonly<UseThemeAnimationProps>) => UseThemeAnimationReturn;
 
-declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;
+declare function ThemeSwitcher(props: ThemeSwitcherProps): React.JSX.Element;
 
-declare const ThemeSelector: React.FC<ThemeSelectorProps>;
+declare function ThemeSelector(props: ThemeSelectorProps): React.JSX.Element;
 
 /**
  * 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>;
+    readonly ref: React.RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly colorThemes: readonly ColorTheme[];
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+    readonly 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;
-}
+type SpacemanThemeProviderProps = UseThemeAnimationProps & {
+    readonly children: ReactNode;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+};
 /**
  * Spaceman Theme Provider - Provides centralized theme state management
  *
@@ -52,9 +54,9 @@ interface SpacemanThemeProviderProps {
  * @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)
+ * @param duration - Animation duration in milliseconds (default: 400)
  */
-declare const SpacemanThemeProvider: React.FC<SpacemanThemeProviderProps>;
+declare function SpacemanThemeProvider({ children, themes, colorThemes, defaultTheme, defaultColorTheme, animationType, duration, ...animationOptions }: Readonly<SpacemanThemeProviderProps>): React.JSX.Element;
 /**
  * Hook to consume the Spaceman Theme context
  *
@@ -64,137 +66,141 @@ declare const SpacemanThemeProvider: React.FC<SpacemanThemeProviderProps>;
 declare const useSpacemanTheme: () => SpacemanThemeContextType;
 
 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>;
-}
-interface NextThemeProviderProps {
-    children: React.ReactNode;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    storageKey?: string;
-    colorStorageKey?: string;
-    attribute?: 'class' | 'data-theme';
-    value?: Record<string, string>;
-    enableSystem?: boolean;
-    enableColorScheme?: boolean;
-    disableTransitionOnChange?: boolean;
-    forcedTheme?: Theme;
-    nonce?: string;
-    scriptProps?: Omit<React.ScriptHTMLAttributes<HTMLScriptElement>, 'dangerouslySetInnerHTML' | 'nonce'>;
-    colorThemePrefix?: string;
-    globalClassName?: string;
-    disableAnimationOnInit?: boolean;
-    disablePreHydrationScript?: boolean;
-    onThemeChange?: (theme: Theme) => void;
-    onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    readonly ref: React.RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly colorThemes: readonly ColorTheme[];
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly systemTheme: 'light' | 'dark';
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+    readonly switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
 }
-declare const NextThemeProvider: React.FC<NextThemeProviderProps>;
-declare const ThemeProvider: React.FC<NextThemeProviderProps>;
+type NextThemeProviderProps = UseThemeAnimationProps & {
+    readonly children: React.ReactNode;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly attribute?: 'class' | 'data-theme';
+    readonly value?: Record<string, string>;
+    readonly enableSystem?: boolean;
+    readonly enableColorScheme?: boolean;
+    readonly disableTransitionOnChange?: boolean;
+    readonly forcedTheme?: Theme;
+    readonly nonce?: string;
+    readonly scriptProps?: Omit<React.ScriptHTMLAttributes<HTMLScriptElement>, 'dangerouslySetInnerHTML' | 'nonce'>;
+    readonly colorThemePrefix?: string;
+    readonly globalClassName?: string;
+    readonly disableAnimationOnInit?: boolean;
+    readonly disablePreHydrationScript?: boolean;
+    readonly onThemeChange?: (theme: Theme) => void;
+    readonly onColorThemeChange?: (colorTheme: ColorTheme) => void;
+};
+declare function NextThemeProvider({ attribute, children, colorStorageKey, colorThemePrefix, colorThemes, defaultColorTheme, defaultTheme, disableAnimationOnInit, disablePreHydrationScript, disableTransitionOnChange, duration, enableColorScheme, enableSystem, forcedTheme, globalClassName, nonce, onColorThemeChange, onThemeChange, scriptProps, storageKey, themes, value, animationType, ...animationOptions }: Readonly<NextThemeProviderProps>): React.JSX.Element;
+declare const ThemeProvider: typeof NextThemeProvider;
 declare const useNextTheme: () => NextThemeContextType;
 declare const useTheme: () => NextThemeContextType;
 
-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>;
-}
-interface TanStackThemeProviderProps {
-    children: ReactNode;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    storageKey?: string;
-    colorStorageKey?: string;
-    globalClassName?: string;
-    colorThemePrefix?: string;
-    serverTheme?: 'light' | 'dark' | 'system';
-    serverColorTheme?: ColorTheme;
-    systemThemeMode?: SystemThemeMode;
-    onServerThemeChange?: (theme: Theme) => Promise<void> | void;
-    onServerColorThemeChange?: (colorTheme: ColorTheme) => Promise<void> | void;
-}
 interface TanStackStartThemeScriptProps {
-    storageKey?: string;
-    colorStorageKey?: string;
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    globalClassName?: string;
-    colorThemePrefix?: string;
-    nonce?: string;
-    systemThemeMode?: SystemThemeMode;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly globalClassName?: string;
+    readonly colorThemePrefix?: string;
+    readonly nonce?: string;
+    readonly systemThemeMode?: SystemThemeMode;
 }
 declare const TanStackStartThemeScript: React.FC<TanStackStartThemeScriptProps>;
-declare const TanStackThemeProvider: React.FC<TanStackThemeProviderProps>;
+
+interface TanStackThemeContextType {
+    readonly ref: React.RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly colorThemes: readonly ColorTheme[];
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly systemTheme: 'light' | 'dark';
+    readonly isHydrated: boolean;
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+    readonly switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
+}
+type TanStackThemeProviderProps = UseThemeAnimationProps & {
+    readonly children: ReactNode;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly globalClassName?: string;
+    readonly colorThemePrefix?: string;
+    readonly serverTheme?: 'light' | 'dark' | 'system';
+    readonly serverColorTheme?: ColorTheme;
+    readonly systemThemeMode?: SystemThemeMode;
+    readonly onServerThemeChange?: (theme: Theme) => Promise<void> | void;
+    readonly onServerColorThemeChange?: (colorTheme: ColorTheme) => Promise<void> | void;
+};
+declare function TanStackThemeProvider({ children, themes, colorThemes, defaultTheme, defaultColorTheme, animationType, duration, storageKey, colorStorageKey, globalClassName, colorThemePrefix, serverTheme, serverColorTheme, systemThemeMode, onServerThemeChange, onServerColorThemeChange, ...animationOptions }: Readonly<TanStackThemeProviderProps>): React.JSX.Element;
 declare const useTanStackTheme: () => TanStackThemeContextType;
 
 interface ViteThemeContextType {
-    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>;
-}
-interface ViteThemeProviderProps {
-    children: ReactNode;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    attribute?: 'class' | 'data-theme';
-    disableTransitionOnChange?: boolean;
-    storageKey?: string;
-    colorStorageKey?: string;
-    globalClassName?: string;
-    colorThemePrefix?: string;
+    readonly ref: React.RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly colorThemes: readonly ColorTheme[];
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly systemTheme: 'light' | 'dark';
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+    readonly switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
 }
+type ViteThemeProviderProps = UseThemeAnimationProps & {
+    readonly children: ReactNode;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly attribute?: 'class' | 'data-theme';
+    readonly disableTransitionOnChange?: boolean;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly globalClassName?: string;
+    readonly colorThemePrefix?: string;
+};
 /**
  * Vite Theme Provider - Optimized for Vite SPA applications
  *
@@ -218,7 +224,9 @@ interface ViteThemeProviderProps {
  * @param globalClassName - Class name for dark theme (when using 'class' attribute)
  * @param colorThemePrefix - Prefix for color theme classes
  */
-declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
+declare function ViteThemeProvider({ children, themes, colorThemes, defaultTheme, defaultColorTheme, animationType, duration, attribute, disableTransitionOnChange, storageKey, colorStorageKey, globalClassName, colorThemePrefix, ...animationOptions }: Readonly<ViteThemeProviderProps>): React.JSX.Element;
 declare const useViteTheme: () => ViteThemeContextType;
 
-export { ColorTheme, NextThemeProvider, SpacemanThemeProvider, SystemThemeMode, TanStackStartThemeScript, TanStackThemeProvider, Theme, ThemeAnimationType, ThemeProvider, ThemeSelector, ThemeSelectorProps, ThemeSwitcher, ThemeSwitcherProps, UseThemeAnimationProps, UseThemeAnimationReturn, ViteThemeProvider, useNextTheme, useSpacemanTheme, useTanStackTheme, useTheme, useThemeAnimation, useViteTheme };
+declare function useHydrated(): boolean;
+
+export { ColorTheme, ColorThemeToggle, NextThemeProvider, SpacemanThemeProvider, SystemThemeMode, TanStackStartThemeScript, TanStackThemeProvider, Theme, ThemeAnimationType, ThemeProvider, ThemeSelector, ThemeSelectorProps, ThemeSwitcher, ThemeSwitcherProps, ThemeTransitionInput, UseThemeAnimationProps, UseThemeAnimationReturn, ViteThemeProvider, useHydrated, useNextTheme, useSpacemanTheme, useTanStackTheme, useTheme, useThemeAnimation, useViteTheme };