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

package/dist/esm/components/ThemeSwitcher.js

@@ -1,77 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { motion } from 'motion/react';
-import { clsx } from 'clsx';
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { useSpacemanTheme } from './SpacemanThemeProvider';
-const SunIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "5" }), _jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })] }));
-const MoonIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
-const MonitorIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), _jsx("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), _jsx("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
-const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
-    return (_jsxs("button", { ref: isActive ? buttonRef : undefined, className: clsx('relative flex h-9 w-12 cursor-pointer items-center justify-center', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: event => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
-            borderRadius: 'var(--radius)',
-        }, children: [isHovered && (_jsx(motion.div, { layoutId: "theme-hover", className: "absolute inset-0 bg-muted", style: {
-                    borderRadius: 'var(--radius)',
-                }, transition: {
-                    type: 'spring',
-                    bounce: 0,
-                    stiffness: 100,
-                    damping: 10,
-                    duration: 0.3,
-                } })), _jsx("div", { className: "relative z-10 flex items-center justify-center", children: _jsx("div", { className: "[&_svg]:size-4", children: icon }) }), isActive && (_jsx("div", { className: "absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full", style: {
-                    backgroundColor: 'hsl(var(--primary))',
-                } }))] }));
-};
-const THEME_OPTIONS = [
-    {
-        icon: _jsx(MonitorIcon, {}),
-        value: 'system',
-    },
-    {
-        icon: _jsx(SunIcon, {}),
-        value: 'light',
-    },
-    {
-        icon: _jsx(MoonIcon, {}),
-        value: 'dark',
-    },
-];
-export const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onThemeChange, animationType, duration, className, }) => {
-    let contextTheme = null;
-    try {
-        contextTheme = useSpacemanTheme();
-    }
-    catch { }
-    const standaloneHook = useThemeAnimation({
-        animationType,
-        duration,
-        themes,
-        ...(currentTheme !== undefined && { theme: currentTheme }),
-        onThemeChange,
-    });
-    const isControlled = contextTheme !== null;
-    const { ref, theme, switchTheme } = isControlled
-        ? { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme }
-        : standaloneHook;
-    const [isMounted, setIsMounted] = useState(false);
-    const [hoveredTheme, setHoveredTheme] = useState(null);
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
-    const handleThemeChange = async (newTheme, event) => {
-        if (isControlled && contextTheme.switchThemeFromElement && event) {
-            await contextTheme.switchThemeFromElement(newTheme, event.currentTarget);
-            if (onThemeChange) {
-                onThemeChange(newTheme);
-            }
-        }
-        else {
-            await switchTheme(newTheme);
-        }
-    };
-    const filteredOptions = THEME_OPTIONS.filter(option => themes.includes(option.value));
-    return (_jsx("div", { className: clsx('inline-flex h-9 items-center overflow-hidden bg-background shadow-sm border border-border', isMounted ? 'opacity-100' : 'opacity-0', className), style: {
-            borderRadius: 'var(--radius)',
-            backgroundColor: 'hsl(var(--background))',
-        }, role: "radiogroup", onMouseLeave: () => setHoveredTheme(null), children: filteredOptions.map(option => (_jsx(ThemeOption, { icon: option.icon, value: option.value, isActive: theme === option.value, isHovered: hoveredTheme === option.value, onClick: handleThemeChange, onMouseEnter: () => setHoveredTheme(option.value), onMouseLeave: () => { }, buttonRef: theme === option.value ? ref : undefined }, option.value))) }));
-};

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

@@ -1,61 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Theme, ColorTheme, ThemeAnimationType } from '../types';
-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
- */
-export declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
-export declare const useViteTheme: () => ViteThemeContextType;
-export {};

package/dist/esm/components/ViteThemeProvider.js

@@ -1,135 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useCallback } from 'react';
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { ThemeAnimationType } from '../types';
-const ViteThemeContext = 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
- */
-export const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = ThemeAnimationType.CIRCLE, duration = 750, attribute = 'class', disableTransitionOnChange = false, storageKey = 'vite-theme', colorStorageKey = 'vite-color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
-    const themeState = useThemeAnimation({
-        themes,
-        colorThemes,
-        defaultTheme,
-        defaultColorTheme,
-        animationType,
-        duration,
-        storageKey,
-        colorStorageKey,
-        globalClassName: attribute === 'class' ? globalClassName : undefined,
-        colorThemePrefix,
-    });
-    const applyTransitionDisable = useCallback(() => {
-        if (!disableTransitionOnChange)
-            return () => { };
-        const css = document.createElement('style');
-        css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
-        document.head.appendChild(css);
-        window.getComputedStyle(document.body);
-        return () => {
-            setTimeout(() => {
-                document.head.removeChild(css);
-            }, 1);
-        };
-    }, [disableTransitionOnChange]);
-    const wrappedSetTheme = useCallback((theme) => {
-        const cleanup = applyTransitionDisable();
-        themeState.setTheme(theme);
-        cleanup();
-    }, [themeState.setTheme, applyTransitionDisable]);
-    const wrappedSwitchTheme = useCallback(async (theme, animationOff = false) => {
-        const cleanup = applyTransitionDisable();
-        await themeState.switchTheme(theme, animationOff);
-        cleanup();
-    }, [themeState.switchTheme, applyTransitionDisable]);
-    const wrappedToggleTheme = useCallback(async (animationOff = false) => {
-        const cleanup = applyTransitionDisable();
-        await themeState.toggleTheme(animationOff);
-        cleanup();
-    }, [themeState.toggleTheme, applyTransitionDisable]);
-    const wrappedToggleLightTheme = useCallback(async (animationOff = false) => {
-        const cleanup = applyTransitionDisable();
-        await themeState.toggleLightTheme(animationOff);
-        cleanup();
-    }, [themeState.toggleLightTheme, applyTransitionDisable]);
-    const wrappedToggleDarkTheme = useCallback(async (animationOff = false) => {
-        const cleanup = applyTransitionDisable();
-        await themeState.toggleDarkTheme(animationOff);
-        cleanup();
-    }, [themeState.toggleDarkTheme, applyTransitionDisable]);
-    const switchThemeFromElement = async (theme, element) => {
-        const cleanup = applyTransitionDisable();
-        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);
-        }
-        cleanup();
-    };
-    const systemTheme = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
-        ? 'dark'
-        : 'light';
-    const contextValue = {
-        ref: themeState.ref,
-        theme: themeState.theme,
-        colorTheme: themeState.colorTheme,
-        resolvedTheme: themeState.resolvedTheme,
-        systemTheme,
-        setTheme: wrappedSetTheme,
-        setColorTheme: themeState.setColorTheme,
-        switchTheme: wrappedSwitchTheme,
-        switchThemeFromElement,
-        switchColorTheme: themeState.switchColorTheme,
-        toggleTheme: wrappedToggleTheme,
-        toggleLightTheme: wrappedToggleLightTheme,
-        toggleDarkTheme: wrappedToggleDarkTheme,
-        toggleColorTheme: themeState.toggleColorTheme,
-        createColorThemeToggle: themeState.createColorThemeToggle,
-        isColorThemeActive: themeState.isColorThemeActive,
-    };
-    return _jsx(ViteThemeContext.Provider, { value: contextValue, children: children });
-};
-export const useViteTheme = () => {
-    const context = useContext(ViteThemeContext);
-    if (context === undefined) {
-        throw new Error('useViteTheme must be used within a ViteThemeProvider');
-    }
-    return context;
-};

package/dist/esm/components/ui/select.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import * as SelectPrimitive from '@radix-ui/react-select';
-declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
-declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
-declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: 'sm' | 'default';
-}): import("react/jsx-runtime").JSX.Element;
-declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
-declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
-declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
-declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/esm/components/ui/select.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { clsx } from 'clsx';
-function Select({ ...props }) {
-    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
-}
-function SelectGroup({ ...props }) {
-    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
-}
-function SelectValue({ ...props }) {
-    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
-}
-const ChevronDownIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m6 9 6 6 6-6" }) }));
-const ChevronUpIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m18 15-6-6-6 6" }) }));
-const CheckIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }));
-function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: clsx("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, {}) })] }));
-}
-function SelectContent({ className, children, position = 'popper', ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { "data-slot": "select-content", className: clsx('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md', position === 'popper' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: _jsx(SelectPrimitive.Viewport, { className: clsx('p-1', position === 'popper' &&
-                    'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'), children: children }) }) }));
-}
-function SelectLabel({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: clsx('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props }));
-}
-function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: clsx("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, {}) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
-}
-function SelectSeparator({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: clsx('-mx-1 my-1 h-px bg-muted', className), ...props }));
-}
-function SelectScrollUpButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: clsx('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUpIcon, {}) }));
-}
-function SelectScrollDownButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: clsx('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDownIcon, {}) }));
-}
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/esm/hooks/use-theme-animation.d.ts

@@ -1,2 +0,0 @@
-import { UseThemeAnimationProps, UseThemeAnimationReturn } from '../types';
-export declare const useThemeAnimation: (props?: UseThemeAnimationProps) => UseThemeAnimationReturn;

package/dist/esm/hooks/use-theme-animation.js

@@ -1,230 +0,0 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { flushSync } from 'react-dom';
-import { ThemeAnimationType, } from '../types';
-import { injectBaseStyles, resolveTheme, getSystemTheme, supportsViewTransitions, prefersReducedMotion, createCircleAnimation, createBlurCircleAnimation, createSlideAnimation, } from '../utils/animations';
-const isBrowser = typeof window !== 'undefined';
-export const useThemeAnimation = (props = {}) => {
-    const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, 
-    // Slide animation options
-    slideDirection = 'left', slideFromX, slideFromY, slideToX = 0, slideToY = 0, } = props;
-    const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
-    const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
-    const [mounted, setMounted] = useState(false);
-    // Inject base styles once on mount
-    useEffect(() => {
-        injectBaseStyles();
-        setMounted(true);
-    }, []);
-    const [internalTheme, setInternalTheme] = useState(() => {
-        if (!isBrowser)
-            return defaultTheme;
-        const saved = localStorage.getItem(storageKey);
-        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
-    });
-    const [internalColorTheme, setInternalColorTheme] = useState(() => {
-        if (!isBrowser)
-            return defaultColorTheme;
-        const saved = localStorage.getItem(colorStorageKey);
-        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
-    });
-    const currentTheme = externalTheme ?? internalTheme;
-    const currentColorTheme = externalColorTheme ?? internalColorTheme;
-    const [, setSystemTheme] = useState(() => getSystemTheme());
-    const resolvedTheme = resolveTheme(currentTheme);
-    useEffect(() => {
-        if (!isBrowser)
-            return;
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const handleChange = () => setSystemTheme(getSystemTheme());
-        mediaQuery.addEventListener('change', handleChange);
-        return () => mediaQuery.removeEventListener('change', handleChange);
-    }, []);
-    // Apply theme classes to DOM
-    useEffect(() => {
-        if (!isBrowser || !mounted)
-            return;
-        if (resolvedTheme === 'dark') {
-            document.documentElement.classList.add(globalClassName);
-        }
-        else {
-            document.documentElement.classList.remove(globalClassName);
-        }
-        colorThemes.forEach(theme => {
-            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
-    const ref = useRef(null);
-    const setTheme = useCallback((newTheme) => {
-        // Always save to localStorage
-        if (isBrowser) {
-            localStorage.setItem(storageKey, newTheme);
-        }
-        // Update internal state if no external control
-        if (externalTheme === undefined) {
-            setInternalTheme(newTheme);
-        }
-        // Call external callback if provided
-        if (onThemeChange) {
-            onThemeChange(newTheme);
-        }
-    }, [onThemeChange, externalTheme, storageKey]);
-    const setColorTheme = useCallback((newColorTheme) => {
-        // Always save to localStorage
-        if (isBrowser) {
-            localStorage.setItem(colorStorageKey, newColorTheme);
-        }
-        // Update internal state if no external control
-        if (externalColorTheme === undefined) {
-            setInternalColorTheme(newColorTheme);
-        }
-        // Call external callback if provided
-        if (onColorThemeChange) {
-            onColorThemeChange(newColorTheme);
-        }
-    }, [onColorThemeChange, externalColorTheme, colorStorageKey]);
-    const switchTheme = useCallback(async (newTheme, animationOff = false) => {
-        if (!ref.current || !supportsViewTransitions() || prefersReducedMotion() || animationOff) {
-            setTheme(newTheme);
-            return;
-        }
-        // Helper function to convert direction to from coordinates
-        const getSlideFromCoords = (direction) => {
-            switch (direction) {
-                case 'left':
-                    return { a: -100, b: 0 };
-                case 'right':
-                    return { a: 100, b: 0 };
-                case 'top':
-                    return { a: 0, b: -100 };
-                case 'bottom':
-                    return { a: 0, b: 100 };
-                case 'top-left':
-                    return { a: -100, b: -100 };
-                case 'top-right':
-                    return { a: 100, b: -100 };
-                case 'bottom-left':
-                    return { a: -100, b: 100 };
-                case 'bottom-right':
-                    return { a: 100, b: 100 };
-                default:
-                    return { a: -100, b: 0 };
-            }
-        };
-        let animationConfig;
-        if (animationType === ThemeAnimationType.SLIDE) {
-            // Use custom coordinates if provided, otherwise use direction
-            const fromCoords = slideFromX !== undefined && slideFromY !== undefined
-                ? { a: slideFromX, b: slideFromY }
-                : getSlideFromCoords(slideDirection);
-            animationConfig = {
-                a: fromCoords.a,
-                b: fromCoords.b,
-                x: slideToX,
-                y: slideToY,
-                duration,
-                easing,
-                animationType,
-                blurAmount,
-                styleId,
-            };
-        }
-        else {
-            // For circle and blur circle animations, use button center
-            const { top, left, width, height } = ref.current.getBoundingClientRect();
-            const x = left + width / 2;
-            const y = top + height / 2;
-            animationConfig = {
-                x,
-                y,
-                duration,
-                easing,
-                animationType,
-                blurAmount,
-                styleId,
-            };
-        }
-        if (animationType === ThemeAnimationType.BLUR_CIRCLE) {
-            createBlurCircleAnimation(animationConfig);
-        }
-        if (animationType === ThemeAnimationType.SLIDE) {
-            createSlideAnimation(animationConfig);
-        }
-        // Start the view transition
-        await document.startViewTransition(() => {
-            flushSync(() => {
-                setTheme(newTheme);
-            });
-        }).ready;
-        if (animationType === ThemeAnimationType.CIRCLE) {
-            createCircleAnimation(animationConfig);
-        }
-    }, [
-        setTheme,
-        duration,
-        easing,
-        animationType,
-        blurAmount,
-        styleId,
-        slideDirection,
-        slideFromX,
-        slideFromY,
-        slideToX,
-        slideToY,
-    ]);
-    const switchColorTheme = useCallback((newColorTheme) => {
-        if (colorThemes.indexOf(newColorTheme) === -1) {
-            console.warn(`Color theme "${newColorTheme}" not found in available themes`);
-            return;
-        }
-        setColorTheme(newColorTheme);
-    }, [colorThemes, setColorTheme]);
-    const toggleTheme = useCallback(async (animationOff = false) => {
-        const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
-        await switchTheme(newTheme, animationOff);
-    }, [resolvedTheme, switchTheme]);
-    const toggleLightTheme = useCallback(async (animationOff = false) => {
-        if (resolvedTheme === 'light')
-            return;
-        await switchTheme('light', animationOff);
-    }, [resolvedTheme, switchTheme]);
-    const toggleDarkTheme = useCallback(async (animationOff = false) => {
-        if (resolvedTheme === 'dark')
-            return;
-        await switchTheme('dark', animationOff);
-    }, [resolvedTheme, switchTheme]);
-    const toggleColorTheme = useCallback(() => {
-        const currentIndex = colorThemes.indexOf(currentColorTheme);
-        const nextIndex = (currentIndex + 1) % colorThemes.length;
-        const nextColorTheme = colorThemes[nextIndex];
-        setColorTheme(nextColorTheme);
-    }, [currentColorTheme, colorThemes, setColorTheme]);
-    const createColorThemeToggle = useCallback((targetColorTheme) => {
-        return () => {
-            if (colorThemes.indexOf(targetColorTheme) === -1) {
-                console.warn(`Color theme "${targetColorTheme}" not found in available themes`);
-                return;
-            }
-            setColorTheme(targetColorTheme);
-        };
-    }, [colorThemes, setColorTheme]);
-    const isColorThemeActive = useCallback((targetColorTheme) => {
-        return currentColorTheme === targetColorTheme;
-    }, [currentColorTheme]);
-    return {
-        ref,
-        theme: currentTheme,
-        colorTheme: currentColorTheme,
-        resolvedTheme,
-        setTheme,
-        setColorTheme,
-        switchTheme,
-        switchColorTheme,
-        toggleTheme,
-        toggleLightTheme,
-        toggleDarkTheme,
-        toggleColorTheme,
-        createColorThemeToggle,
-        isColorThemeActive,
-    };
-};

package/dist/esm/index.d.ts

@@ -1,10 +0,0 @@
-export { useThemeAnimation } from './hooks/use-theme-animation';
-export { ThemeSwitcher } from './components/ThemeSwitcher';
-export { ThemeSelector } from './components/ThemeSelector';
-export { SpacemanThemeProvider, useSpacemanTheme } from './components/SpacemanThemeProvider';
-export { NextThemeProvider, useNextTheme } from './components/NextThemeProvider';
-export { TanStackThemeProvider, useTanStackTheme } from './components/TanStackThemeProvider';
-export { ViteThemeProvider, useViteTheme } from './components/ViteThemeProvider';
-export type { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, SlideDirection, } from './types';
-export { ThemeAnimationType } from './types';
-export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/esm/index.js

@@ -1,10 +0,0 @@
-export { useThemeAnimation } from './hooks/use-theme-animation';
-export { ThemeSwitcher } from './components/ThemeSwitcher';
-export { ThemeSelector } from './components/ThemeSelector';
-export { SpacemanThemeProvider, useSpacemanTheme } from './components/SpacemanThemeProvider';
-// Framework-specific optimized providers
-export { NextThemeProvider, useNextTheme } from './components/NextThemeProvider';
-export { TanStackThemeProvider, useTanStackTheme } from './components/TanStackThemeProvider';
-export { ViteThemeProvider, useViteTheme } from './components/ViteThemeProvider';
-export { ThemeAnimationType } from './types';
-export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/esm/types/index.js

@@ -1,6 +0,0 @@
-export var ThemeAnimationType;
-(function (ThemeAnimationType) {
-    ThemeAnimationType["CIRCLE"] = "circle";
-    ThemeAnimationType["BLUR_CIRCLE"] = "blur-circle";
-    ThemeAnimationType["SLIDE"] = "slide";
-})(ThemeAnimationType || (ThemeAnimationType = {}));

package/dist/esm/utils/animations.d.ts

@@ -1,21 +0,0 @@
-import { ThemeAnimationType } from '../types';
-export declare const injectBaseStyles: () => void;
-export declare const createBlurCircleMask: (blur: number) => string;
-export declare const getSystemTheme: () => "light" | "dark";
-export declare const resolveTheme: (theme: string) => "light" | "dark";
-export declare const supportsViewTransitions: () => boolean;
-export declare const prefersReducedMotion: () => boolean;
-export interface AnimationConfig {
-    a?: number;
-    b?: number;
-    x: number;
-    y: number;
-    duration: number;
-    easing: string;
-    animationType: ThemeAnimationType;
-    blurAmount: number;
-    styleId: string;
-}
-export declare const createCircleAnimation: (config: AnimationConfig) => void;
-export declare const createSlideAnimation: (config: AnimationConfig) => void;
-export declare const createBlurCircleAnimation: (config: AnimationConfig) => void;