@space-man/react-theme-animation 1.0.0

package/dist/cjs/utils/animations.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBlurCircleAnimation = exports.createCircleAnimation = exports.prefersReducedMotion = exports.supportsViewTransitions = exports.resolveTheme = exports.getSystemTheme = exports.createBlurCircleMask = exports.injectBaseStyles = void 0;
+const isBrowser = typeof window !== 'undefined';
+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);
+        }
+    }
+};
+exports.injectBaseStyles = injectBaseStyles;
+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>')`;
+};
+exports.createBlurCircleMask = createBlurCircleMask;
+const getSystemTheme = () => {
+    if (!isBrowser)
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+exports.getSystemTheme = getSystemTheme;
+const resolveTheme = (theme) => {
+    if (theme === 'system') {
+        return (0, exports.getSystemTheme)();
+    }
+    return theme === 'dark' ? 'dark' : 'light';
+};
+exports.resolveTheme = resolveTheme;
+const supportsViewTransitions = () => {
+    return isBrowser && 'startViewTransition' in document;
+};
+exports.supportsViewTransitions = supportsViewTransitions;
+const prefersReducedMotion = () => {
+    return isBrowser && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+exports.prefersReducedMotion = prefersReducedMotion;
+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)',
+    });
+};
+exports.createCircleAnimation = createCircleAnimation;
+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: ${(0, exports.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);
+};
+exports.createBlurCircleAnimation = createBlurCircleAnimation;

package/dist/components/SpacemanThemeProvider.d.ts

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

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

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

package/dist/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/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/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/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/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/components/SpacemanThemeProvider.d.ts

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

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

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