@space-man/react-theme-animation 1.0.0

package/dist/esm/components/ThemeSelector.js

@@ -0,0 +1,35 @@
+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/esm/components/ThemeSwitcher.d.ts

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

package/dist/esm/components/ThemeSwitcher.js

@@ -0,0 +1,96 @@
+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/esm/components/ui/select.d.ts

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,39 @@
+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

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

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

@@ -0,0 +1,145 @@
+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/esm/index.d.ts

@@ -0,0 +1,7 @@
+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/esm/index.js

@@ -0,0 +1,6 @@
+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/esm/types/index.d.ts

@@ -0,0 +1,65 @@
+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/esm/types/index.js

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

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

@@ -0,0 +1,18 @@
+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;

package/dist/esm/utils/animations.js

@@ -0,0 +1,145 @@
+const isBrowser = typeof window !== 'undefined';
+export const injectBaseStyles = () => {
+    if (isBrowser) {
+        const styleId = 'spaceman-theme-base-style';
+        if (!document.getElementById(styleId)) {
+            const style = document.createElement('style');
+            style.id = styleId;
+            const isHighResolution = window.innerWidth >= 3000 || window.innerHeight >= 2000;
+            style.textContent = `
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          animation: none;
+          mix-blend-mode: normal;
+          ${isHighResolution ? 'transform: translateZ(0);' : ''}
+        }
+        
+        ${isHighResolution
+                ? `
+        ::view-transition-group(root),
+        ::view-transition-image-pair(root),
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          backface-visibility: hidden;
+          perspective: 1000px;
+          transform: translate3d(0, 0, 0);
+        }
+        `
+                : ''}
+      `;
+            document.head.appendChild(style);
+        }
+    }
+};
+export const createBlurCircleMask = (blur) => {
+    const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
+    const blurFilter = `<filter id="blur"><feGaussianBlur stdDeviation="${blur}" /></filter>`;
+    const circleRadius = isHighResolution ? 20 : 25;
+    return `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"><defs>${blurFilter}</defs><circle cx="0" cy="0" r="${circleRadius}" fill="white" filter="url(%23blur)"/></svg>')`;
+};
+export const getSystemTheme = () => {
+    if (!isBrowser)
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+export const resolveTheme = (theme) => {
+    if (theme === 'system') {
+        return getSystemTheme();
+    }
+    return theme === 'dark' ? 'dark' : 'light';
+};
+export const supportsViewTransitions = () => {
+    return isBrowser && 'startViewTransition' in document;
+};
+export const prefersReducedMotion = () => {
+    return isBrowser && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+export const createCircleAnimation = (config) => {
+    const { x, y, duration, easing } = config;
+    // Calculate the distance to each corner of the viewport
+    const topLeft = Math.hypot(x, y);
+    const topRight = Math.hypot(window.innerWidth - x, y);
+    const bottomLeft = Math.hypot(x, window.innerHeight - y);
+    const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y);
+    // Find the maximum distance to ensure animation covers the entire viewport
+    const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight);
+    document.documentElement.animate({
+        clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxRadius}px at ${x}px ${y}px)`],
+    }, {
+        duration,
+        easing,
+        pseudoElement: '::view-transition-new(root)',
+    });
+};
+export const createBlurCircleAnimation = (config) => {
+    const { x, y, duration, easing, blurAmount, styleId } = config;
+    const existingStyle = document.getElementById(styleId);
+    if (existingStyle) {
+        existingStyle.remove();
+    }
+    const viewportSize = Math.max(window.innerWidth, window.innerHeight) + 200;
+    const isHighResolution = window.innerWidth >= 3000 || window.innerHeight >= 2000;
+    const scaleFactor = isHighResolution ? 2.5 : 4;
+    const optimalMaskSize = isHighResolution
+        ? Math.min(viewportSize * scaleFactor, 5000)
+        : viewportSize * scaleFactor;
+    const topLeft = Math.hypot(x, y);
+    const topRight = Math.hypot(window.innerWidth - x, y);
+    const bottomLeft = Math.hypot(x, window.innerHeight - y);
+    const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y);
+    const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight);
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    const blurFactor = isHighResolution ? 1.5 : 1.2;
+    const finalMaskSize = Math.max(optimalMaskSize, maxRadius * 2.5);
+    styleElement.textContent = `
+    ::view-transition-group(root) {
+      animation-duration: ${duration}ms;
+      animation-timing-function: ${isHighResolution
+        ? 'cubic-bezier(0.2, 0, 0.2, 1)'
+        : 'linear(' +
+            '0 0%, 0.2342 12.49%, 0.4374 24.99%,' +
+            '0.6093 37.49%, 0.6835 43.74%,' +
+            '0.7499 49.99%, 0.8086 56.25%,' +
+            '0.8593 62.5%, 0.9023 68.75%, 0.9375 75%,' +
+            '0.9648 81.25%, 0.9844 87.5%,' +
+            '0.9961 93.75%, 1 100%' +
+            ')'};
+      will-change: transform;
+    }
+    
+    ::view-transition-new(root) {
+      mask: ${createBlurCircleMask(blurAmount * blurFactor)} 0 0 / 100% 100% no-repeat;
+      mask-position: ${x}px ${y}px;
+      animation: spaceman-mask-scale ${duration}ms ${easing};
+      transform-origin: ${x}px ${y}px;
+      will-change: mask-size, mask-position;
+    }
+    
+    ::view-transition-old(root),
+    .dark::view-transition-old(root) {
+      animation: spaceman-mask-scale ${duration}ms ${easing};
+      transform-origin: ${x}px ${y}px;
+      z-index: -1;
+      will-change: mask-size, mask-position;
+    }
+    
+    @keyframes spaceman-mask-scale {
+      0% {
+        mask-size: 0px;
+        mask-position: ${x}px ${y}px;
+      }
+      100% {
+        mask-size: ${finalMaskSize}px;
+        mask-position: ${x - finalMaskSize / 2}px ${y - finalMaskSize / 2}px;
+      }
+    }
+  `;
+    document.head.appendChild(styleElement);
+    setTimeout(() => {
+        const styleElement = document.getElementById(styleId);
+        if (styleElement) {
+            styleElement.remove();
+        }
+    }, duration);
+};

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

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