@space-man/react-theme-animation 1.0.0 → 1.0.2

package/dist/components/SpacemanThemeProvider.d.ts

@@ -1,51 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Theme, ColorTheme, ThemeAnimationType } from '../types';
-/**
- * Context type for the Spaceman Theme Provider
- */
-interface SpacemanThemeContextType {
-    theme: Theme;
-    colorTheme: ColorTheme;
-    resolvedTheme: 'light' | 'dark';
-    setTheme: (theme: Theme) => void;
-    setColorTheme: (colorTheme: ColorTheme) => void;
-    toggleTheme: () => Promise<void>;
-    switchTheme: (theme: Theme) => Promise<void>;
-    switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
-    ref: React.RefObject<HTMLButtonElement | null>;
-}
-/**
- * Props for the Spaceman Theme Provider
- */
-interface SpacemanThemeProviderProps {
-    children: ReactNode;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-}
-/**
- * Spaceman Theme Provider - Provides centralized theme state management
- *
- * This provider creates a single source of truth for theme state using the useThemeAnimation hook.
- * All theme-related components should consume from this context to ensure synchronization.
- *
- * @param children - React children to wrap with theme context
- * @param themes - Available theme options (default: ['light', 'dark', 'system'])
- * @param colorThemes - Available color theme options (default: ['default'])
- * @param defaultTheme - Default theme to use (default: 'system')
- * @param defaultColorTheme - Default color theme to use (default: 'default')
- * @param animationType - Animation type for theme transitions (default: CIRCLE)
- * @param duration - Animation duration in milliseconds (default: 750)
- */
-export declare const SpacemanThemeProvider: React.FC<SpacemanThemeProviderProps>;
-/**
- * Hook to consume the Spaceman Theme context
- *
- * @returns Theme context value with all theme state and methods
- * @throws Error if used outside of SpacemanThemeProvider
- */
-export declare const useSpacemanTheme: () => SpacemanThemeContextType;
-export {};

package/dist/components/SpacemanThemeProvider.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from 'react';
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { ThemeAnimationType } from '../types';
-const SpacemanThemeContext = createContext(undefined);
-/**
- * Spaceman Theme Provider - Provides centralized theme state management
- *
- * This provider creates a single source of truth for theme state using the useThemeAnimation hook.
- * All theme-related components should consume from this context to ensure synchronization.
- *
- * @param children - React children to wrap with theme context
- * @param themes - Available theme options (default: ['light', 'dark', 'system'])
- * @param colorThemes - Available color theme options (default: ['default'])
- * @param defaultTheme - Default theme to use (default: 'system')
- * @param defaultColorTheme - Default color theme to use (default: 'default')
- * @param animationType - Animation type for theme transitions (default: CIRCLE)
- * @param duration - Animation duration in milliseconds (default: 750)
- */
-export const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = ThemeAnimationType.CIRCLE, duration = 750, }) => {
-    // This is our master hook instance - the single source of truth
-    const themeState = useThemeAnimation({
-        themes,
-        colorThemes,
-        defaultTheme,
-        defaultColorTheme,
-        animationType,
-        duration,
-    });
-    /**
-     * Switch theme with animation originating from a specific element
-     *
-     * @param theme - Theme to switch to
-     * @param element - HTML button element to use as animation origin
-     */
-    const switchThemeFromElement = async (theme, element) => {
-        // Temporarily set the ref to the clicked element
-        if (themeState.ref.current) {
-            const originalRef = themeState.ref.current;
-            // Use Object.defineProperty to temporarily override the ref
-            Object.defineProperty(themeState.ref, 'current', {
-                value: element,
-                writable: true,
-                configurable: true
-            });
-            await themeState.switchTheme(theme);
-            // Restore the original ref after animation
-            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);
-        }
-    };
-    const contextValue = {
-        theme: themeState.theme,
-        colorTheme: themeState.colorTheme,
-        resolvedTheme: themeState.resolvedTheme,
-        setTheme: themeState.setTheme,
-        setColorTheme: themeState.setColorTheme,
-        toggleTheme: themeState.toggleTheme,
-        switchTheme: themeState.switchTheme,
-        switchThemeFromElement,
-        ref: themeState.ref,
-    };
-    return (_jsx(SpacemanThemeContext.Provider, { value: contextValue, children: children }));
-};
-/**
- * Hook to consume the Spaceman Theme context
- *
- * @returns Theme context value with all theme state and methods
- * @throws Error if used outside of SpacemanThemeProvider
- */
-export const useSpacemanTheme = () => {
-    const context = useContext(SpacemanThemeContext);
-    if (context === undefined) {
-        throw new Error('useSpacemanTheme must be used within a SpacemanThemeProvider');
-    }
-    return context;
-};

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

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { useSpacemanTheme } from './SpacemanThemeProvider';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-export 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 = useSpacemanTheme();
-    }
-    catch {
-        // Context not available, use standalone mode
-    }
-    // Use context if available, otherwise fall back to standalone hook
-    const standaloneHook = 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 (_jsx(_Fragment, { children: colorThemes.length > 1 && (_jsx("div", { className: "flex flex-col gap-2", children: _jsxs(Select, { value: colorTheme, onValueChange: (v) => handleColorThemeChange(v), children: [_jsx(SelectTrigger, { className: "capitalize", children: _jsx(SelectValue, { placeholder: "Choose a color theme" }) }), _jsx(SelectContent, { children: colorThemes.map(theme => (_jsx(SelectItem, { className: "capitalize", value: theme, children: theme }, theme))) })] }) })) }));
-};

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

@@ -1,96 +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 transition-all duration-200 ease-in-out', '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-bg", className: "absolute inset-0 bg-muted backdrop-blur-sm", style: {
-                    borderRadius: 'var(--radius)',
-                }, transition: {
-                    type: 'spring',
-                    bounce: 0,
-                    stiffness: 100,
-                    damping: 10,
-                    duration: 0.3,
-                } })), _jsx(motion.div, { className: "relative z-10 flex items-center justify-center", animate: {
-                    scale: isActive ? 1.1 : 1,
-                }, transition: {
-                    type: 'spring',
-                    bounce: 0.2,
-                    duration: 0.4,
-                }, children: _jsx("div", { className: "[&_svg]:size-4", children: icon }) }), isActive && (_jsx(motion.div, { layoutId: "theme-active-indicator", className: "absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full", style: {
-                    backgroundColor: 'hsl(var(--primary))',
-                }, transition: {
-                    type: 'spring',
-                    bounce: 0.3,
-                    duration: 0.6,
-                } }))] }));
-};
-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, }) => {
-    // Try to use SpacemanTheme context if available (controlled mode)
-    let contextTheme = null;
-    try {
-        contextTheme = useSpacemanTheme();
-    }
-    catch {
-        // Context not available, use standalone mode
-    }
-    // Use context if available, otherwise fall back to standalone hook
-    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);
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
-    const handleThemeChange = async (newTheme, event) => {
-        if (isControlled && contextTheme.switchThemeFromElement && event) {
-            // Use controlled mode with animation from clicked element
-            await contextTheme.switchThemeFromElement(newTheme, event.currentTarget);
-            // Also call the callback if provided
-            if (onThemeChange) {
-                onThemeChange(newTheme);
-            }
-        }
-        else {
-            // Use standalone mode
-            await switchTheme(newTheme);
-        }
-    };
-    if (!isMounted) {
-        return _jsx("div", { className: "flex h-9 w-fit" });
-    }
-    const filteredOptions = THEME_OPTIONS.filter(option => themes.includes(option.value));
-    return (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3 }, className: clsx('inline-flex items-center overflow-hidden bg-background shadow-sm border border-border', 'transition-all duration-200 ease-in-out', className), style: {
-            borderRadius: 'var(--radius)',
-            backgroundColor: 'hsl(var(--background))',
-        }, role: "radiogroup", children: filteredOptions.map(option => (_jsx(ThemeOption, { icon: option.icon, value: option.value, isActive: theme === option.value, isHovered: false, onClick: handleThemeChange, onMouseEnter: () => { }, onMouseLeave: () => { }, buttonRef: theme === option.value ? ref : undefined }, option.value))) }, String(isMounted)));
-};

package/dist/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/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/hooks/use-theme-animation.d.ts

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

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

@@ -1,145 +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, } 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, } = props;
-    const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
-    const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
-    useEffect(() => {
-        injectBaseStyles();
-    }, []);
-    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)
-            return;
-        // Apply theme class (light/dark) - use resolvedTheme instead of manual resolution
-        if (resolvedTheme === 'dark') {
-            document.documentElement.classList.add(globalClassName);
-        }
-        else {
-            document.documentElement.classList.remove(globalClassName);
-        }
-        // Apply color theme classes
-        // Remove all existing color theme classes
-        colorThemes.forEach(theme => {
-            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        // Add current color theme class
-        document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes]);
-    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) => {
-        if (!ref.current || !supportsViewTransitions() || prefersReducedMotion()) {
-            setTheme(newTheme);
-            return;
-        }
-        const { top, left, width, height } = ref.current.getBoundingClientRect();
-        const x = left + width / 2;
-        const y = top + height / 2;
-        const animationConfig = {
-            x,
-            y,
-            duration,
-            easing,
-            animationType,
-            blurAmount,
-            styleId,
-        };
-        if (animationType === ThemeAnimationType.BLUR_CIRCLE) {
-            createBlurCircleAnimation(animationConfig);
-        }
-        await document.startViewTransition(() => {
-            flushSync(() => {
-                setTheme(newTheme);
-            });
-        }).ready;
-        if (animationType === ThemeAnimationType.CIRCLE) {
-            createCircleAnimation(animationConfig);
-        }
-    }, [setTheme, duration, easing, animationType, blurAmount, styleId]);
-    const toggleTheme = useCallback(async () => {
-        const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
-        await switchTheme(newTheme);
-    }, [resolvedTheme, switchTheme]);
-    useEffect(() => {
-        if (!isBrowser)
-            return;
-        const root = document.documentElement;
-        if (resolvedTheme === 'dark') {
-            root.classList.add(globalClassName);
-        }
-        else {
-            root.classList.remove(globalClassName);
-        }
-        colorThemes.forEach(theme => {
-            root.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        if (currentColorTheme !== 'default') {
-            root.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-        }
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes]);
-    return {
-        ref,
-        theme: currentTheme,
-        colorTheme: currentColorTheme,
-        resolvedTheme,
-        setTheme,
-        setColorTheme,
-        toggleTheme,
-        switchTheme,
-    };
-};

package/dist/index.d.ts

@@ -1,7 +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 type { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, } from './types';
-export { ThemeAnimationType } from './types';
-export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/index.js

@@ -1,6 +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 { ThemeAnimationType } from './types';
-export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/types/index.d.ts

@@ -1,65 +0,0 @@
-import { RefObject } from 'react';
-export declare enum ThemeAnimationType {
-    CIRCLE = "circle",
-    BLUR_CIRCLE = "blur-circle"
-}
-export type Theme = 'light' | 'dark' | 'system';
-export type ColorTheme = string;
-export interface UseThemeAnimationProps {
-    duration?: number;
-    easing?: string;
-    animationType?: ThemeAnimationType;
-    blurAmount?: number;
-    styleId?: string;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    globalClassName?: string;
-    colorThemePrefix?: string;
-    storageKey?: string;
-    colorStorageKey?: string;
-    theme?: Theme;
-    colorTheme?: ColorTheme;
-    onThemeChange?: (theme: Theme) => void;
-    onColorThemeChange?: (colorTheme: ColorTheme) => void;
-}
-export interface UseThemeAnimationReturn {
-    ref: RefObject<HTMLButtonElement | null>;
-    theme: Theme;
-    colorTheme: ColorTheme;
-    resolvedTheme: 'light' | 'dark';
-    setTheme: (theme: Theme) => void;
-    setColorTheme: (colorTheme: ColorTheme) => void;
-    toggleTheme: () => Promise<void>;
-    switchTheme: (theme: Theme) => Promise<void>;
-}
-export interface ThemeSwitcherProps {
-    themes?: Theme[];
-    currentTheme?: Theme;
-    onThemeChange?: (theme: Theme) => void;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    className?: string;
-    size?: 'sm' | 'md' | 'lg';
-    variant?: 'default' | 'outline' | 'ghost';
-    icons?: {
-        light?: React.ReactNode;
-        dark?: React.ReactNode;
-        system?: React.ReactNode;
-    };
-}
-export interface ThemeSelectorProps {
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    currentTheme?: Theme;
-    currentColorTheme?: ColorTheme;
-    onThemeChange?: (theme: Theme) => void;
-    onColorThemeChange?: (colorTheme: ColorTheme) => void;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    className?: string;
-    placeholder?: string;
-    themeLabel?: string;
-    colorThemeLabel?: string;
-}

package/dist/types/index.js

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

package/dist/utils/animations.d.ts

@@ -1,18 +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 {
-    x: number;
-    y: number;
-    duration: number;
-    easing: string;
-    animationType: ThemeAnimationType;
-    blurAmount: number;
-    styleId: string;
-}
-export declare const createCircleAnimation: (config: AnimationConfig) => void;
-export declare const createBlurCircleAnimation: (config: AnimationConfig) => void;