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

package/dist/react/index.d.ts

@@ -0,0 +1,224 @@
+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 React, { ReactNode } from 'react';
+
+declare const useThemeAnimation: (props?: UseThemeAnimationProps) => UseThemeAnimationReturn;
+
+declare const ThemeSwitcher: React.FC<ThemeSwitcherProps>;
+
+declare const ThemeSelector: React.FC<ThemeSelectorProps>;
+
+/**
+ * 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)
+ */
+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
+ */
+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;
+}
+declare const NextThemeProvider: React.FC<NextThemeProviderProps>;
+declare const ThemeProvider: React.FC<NextThemeProviderProps>;
+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;
+}
+declare const TanStackStartThemeScript: React.FC<TanStackStartThemeScriptProps>;
+declare const TanStackThemeProvider: React.FC<TanStackThemeProviderProps>;
+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;
+}
+/**
+ * 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
+ */
+declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
+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 };