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

package/dist/cjs/components/TanStackThemeProvider.js

@@ -1,183 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTanStackTheme = exports.TanStackThemeProvider = 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 TanStackThemeContext = (0, react_1.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 (0, react_1.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
- */
-const TanStackThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, storageKey = 'theme', colorStorageKey = 'color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
-    const isHydrated = useHydrated();
-    const themeState = (0, use_theme_animation_1.useThemeAnimation)({
-        themes,
-        colorThemes,
-        defaultTheme,
-        defaultColorTheme,
-        animationType,
-        duration,
-        storageKey,
-        colorStorageKey,
-        globalClassName,
-        colorThemePrefix,
-    });
-    // Hydration-aware theme switch: instant during hydration, animated after
-    const switchThemeWithHydrationAwareness = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(async (animationOff = false) => {
-        if (!isHydrated) {
-            themeState.setTheme('light');
-        }
-        else {
-            await themeState.toggleLightTheme(animationOff);
-        }
-    }, [isHydrated, themeState]);
-    const toggleDarkThemeWithHydrationAwareness = (0, react_1.useCallback)(async (animationOff = false) => {
-        if (!isHydrated) {
-            themeState.setTheme('dark');
-        }
-        else {
-            await themeState.toggleDarkTheme(animationOff);
-        }
-    }, [isHydrated, themeState]);
-    const switchThemeFromElement = (0, react_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(TanStackThemeContext.Provider, { value: contextValue, children: children }));
-};
-exports.TanStackThemeProvider = TanStackThemeProvider;
-/**
- * Hook to consume the TanStack Theme context
- *
- * @returns Theme context value with all theme state and methods
- * @throws Error if used outside of TanStackThemeProvider
- */
-const useTanStackTheme = () => {
-    const context = (0, react_1.useContext)(TanStackThemeContext);
-    if (context === undefined) {
-        throw new Error('useTanStackTheme must be used within a TanStackThemeProvider');
-    }
-    return context;
-};
-exports.useTanStackTheme = useTanStackTheme;

package/dist/cjs/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/cjs/components/ThemeSelector.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeSelector = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const use_theme_animation_1 = require("../hooks/use-theme-animation");
-const SpacemanThemeProvider_1 = require("./SpacemanThemeProvider");
-const select_1 = require("./ui/select");
-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 = (0, SpacemanThemeProvider_1.useSpacemanTheme)();
-    }
-    catch {
-        // Context not available, use standalone mode
-    }
-    // Use context if available, otherwise fall back to standalone hook
-    const standaloneHook = (0, use_theme_animation_1.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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: colorThemes.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2", children: (0, jsx_runtime_1.jsxs)(select_1.Select, { value: colorTheme, onValueChange: (v) => handleColorThemeChange(v), children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: "capitalize", children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Choose a color theme" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: colorThemes.map(theme => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { className: "capitalize", value: theme, children: theme }, theme))) })] }) })) }));
-};
-exports.ThemeSelector = ThemeSelector;

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

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

package/dist/cjs/components/ThemeSwitcher.js

@@ -1,81 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeSwitcher = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("motion/react");
-const clsx_1 = require("clsx");
-const use_theme_animation_1 = require("../hooks/use-theme-animation");
-const SpacemanThemeProvider_1 = require("./SpacemanThemeProvider");
-const SunIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "5" }), (0, jsx_runtime_1.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 = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
-const MonitorIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
-const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
-    return ((0, jsx_runtime_1.jsxs)("button", { ref: isActive ? buttonRef : undefined, className: (0, clsx_1.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 && ((0, jsx_runtime_1.jsx)(react_2.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,
-                } })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "[&_svg]:size-4", children: icon }) }), isActive && ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(MonitorIcon, {}),
-        value: 'system',
-    },
-    {
-        icon: (0, jsx_runtime_1.jsx)(SunIcon, {}),
-        value: 'light',
-    },
-    {
-        icon: (0, jsx_runtime_1.jsx)(MoonIcon, {}),
-        value: 'dark',
-    },
-];
-const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onThemeChange, animationType, duration, className, }) => {
-    let contextTheme = null;
-    try {
-        contextTheme = (0, SpacemanThemeProvider_1.useSpacemanTheme)();
-    }
-    catch { }
-    const standaloneHook = (0, use_theme_animation_1.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] = (0, react_1.useState)(false);
-    const [hoveredTheme, setHoveredTheme] = (0, react_1.useState)(null);
-    (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.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 => ((0, jsx_runtime_1.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))) }));
-};
-exports.ThemeSwitcher = ThemeSwitcher;

package/dist/cjs/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/cjs/components/ViteThemeProvider.js

@@ -1,140 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useViteTheme = exports.ViteThemeProvider = 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 ViteThemeContext = (0, react_1.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
- */
-const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, attribute = 'class', disableTransitionOnChange = false, storageKey = 'vite-theme', colorStorageKey = 'vite-color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
-    const themeState = (0, use_theme_animation_1.useThemeAnimation)({
-        themes,
-        colorThemes,
-        defaultTheme,
-        defaultColorTheme,
-        animationType,
-        duration,
-        storageKey,
-        colorStorageKey,
-        globalClassName: attribute === 'class' ? globalClassName : undefined,
-        colorThemePrefix,
-    });
-    const applyTransitionDisable = (0, react_1.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 = (0, react_1.useCallback)((theme) => {
-        const cleanup = applyTransitionDisable();
-        themeState.setTheme(theme);
-        cleanup();
-    }, [themeState.setTheme, applyTransitionDisable]);
-    const wrappedSwitchTheme = (0, react_1.useCallback)(async (theme, animationOff = false) => {
-        const cleanup = applyTransitionDisable();
-        await themeState.switchTheme(theme, animationOff);
-        cleanup();
-    }, [themeState.switchTheme, applyTransitionDisable]);
-    const wrappedToggleTheme = (0, react_1.useCallback)(async (animationOff = false) => {
-        const cleanup = applyTransitionDisable();
-        await themeState.toggleTheme(animationOff);
-        cleanup();
-    }, [themeState.toggleTheme, applyTransitionDisable]);
-    const wrappedToggleLightTheme = (0, react_1.useCallback)(async (animationOff = false) => {
-        const cleanup = applyTransitionDisable();
-        await themeState.toggleLightTheme(animationOff);
-        cleanup();
-    }, [themeState.toggleLightTheme, applyTransitionDisable]);
-    const wrappedToggleDarkTheme = (0, react_1.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 (0, jsx_runtime_1.jsx)(ViteThemeContext.Provider, { value: contextValue, children: children });
-};
-exports.ViteThemeProvider = ViteThemeProvider;
-const useViteTheme = () => {
-    const context = (0, react_1.useContext)(ViteThemeContext);
-    if (context === undefined) {
-        throw new Error('useViteTheme must be used within a ViteThemeProvider');
-    }
-    return context;
-};
-exports.useViteTheme = useViteTheme;

package/dist/cjs/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/cjs/components/ui/select.js

@@ -1,83 +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.Select = Select;
-exports.SelectContent = SelectContent;
-exports.SelectGroup = SelectGroup;
-exports.SelectItem = SelectItem;
-exports.SelectLabel = SelectLabel;
-exports.SelectScrollDownButton = SelectScrollDownButton;
-exports.SelectScrollUpButton = SelectScrollUpButton;
-exports.SelectSeparator = SelectSeparator;
-exports.SelectTrigger = SelectTrigger;
-exports.SelectValue = SelectValue;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const SelectPrimitive = __importStar(require("@radix-ui/react-select"));
-const clsx_1 = require("clsx");
-function Select({ ...props }) {
-    return (0, jsx_runtime_1.jsx)(SelectPrimitive.Root, { "data-slot": "select", ...props });
-}
-function SelectGroup({ ...props }) {
-    return (0, jsx_runtime_1.jsx)(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
-}
-function SelectValue({ ...props }) {
-    return (0, jsx_runtime_1.jsx)(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
-}
-const ChevronDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m6 9 6 6 6-6" }) }));
-const ChevronUpIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "m18 15-6-6-6 6" }) }));
-const CheckIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M20 6 9 17l-5-5" }) }));
-function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: (0, clsx_1.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, (0, jsx_runtime_1.jsx)(SelectPrimitive.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) })] }));
-}
-function SelectContent({ className, children, position = 'popper', ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Portal, { children: (0, jsx_runtime_1.jsx)(SelectPrimitive.Content, { "data-slot": "select-content", className: (0, clsx_1.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: (0, jsx_runtime_1.jsx)(SelectPrimitive.Viewport, { className: (0, clsx_1.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 ((0, jsx_runtime_1.jsx)(SelectPrimitive.Label, { "data-slot": "select-label", className: (0, clsx_1.clsx)('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props }));
-}
-function SelectItem({ className, children, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)(SelectPrimitive.Item, { "data-slot": "select-item", className: (0, clsx_1.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: [(0, jsx_runtime_1.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(CheckIcon, {}) }) }), (0, jsx_runtime_1.jsx)(SelectPrimitive.ItemText, { children: children })] }));
-}
-function SelectSeparator({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.Separator, { "data-slot": "select-separator", className: (0, clsx_1.clsx)('-mx-1 my-1 h-px bg-muted', className), ...props }));
-}
-function SelectScrollUpButton({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: (0, clsx_1.clsx)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronUpIcon, {}) }));
-}
-function SelectScrollDownButton({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: (0, clsx_1.clsx)('flex cursor-default items-center justify-center py-1', className), ...props, children: (0, jsx_runtime_1.jsx)(ChevronDownIcon, {}) }));
-}

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

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