@space-man/react-theme-animation 1.0.0

package/dist/cjs/components/SpacemanThemeProvider.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSpacemanTheme = exports.SpacemanThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const use_theme_animation_1 = require("../hooks/use-theme-animation");
+const types_1 = require("../types");
+const SpacemanThemeContext = (0, react_1.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)
+ */
+const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, }) => {
+    // This is our master hook instance - the single source of truth
+    const themeState = (0, use_theme_animation_1.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 ((0, jsx_runtime_1.jsx)(SpacemanThemeContext.Provider, { value: contextValue, children: children }));
+};
+exports.SpacemanThemeProvider = SpacemanThemeProvider;
+/**
+ * Hook to consume the Spaceman Theme context
+ *
+ * @returns Theme context value with all theme state and methods
+ * @throws Error if used outside of SpacemanThemeProvider
+ */
+const useSpacemanTheme = () => {
+    const context = (0, react_1.useContext)(SpacemanThemeContext);
+    if (context === undefined) {
+        throw new Error('useSpacemanTheme must be used within a SpacemanThemeProvider');
+    }
+    return context;
+};
+exports.useSpacemanTheme = useSpacemanTheme;

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_theme_animation_1 = require("../hooks/use-theme-animation");
+const SpacemanThemeProvider_1 = require("./SpacemanThemeProvider");
+const select_1 = require("./ui/select");
+const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorThemes = ['default'], currentColorTheme, onColorThemeChange, animationType, duration, }) => {
+    // Try to use SpacemanTheme context if available (controlled mode)
+    let contextTheme = null;
+    try {
+        contextTheme = (0, SpacemanThemeProvider_1.useSpacemanTheme)();
+    }
+    catch {
+        // Context not available, use standalone mode
+    }
+    // Use context if available, otherwise fall back to standalone hook
+    const standaloneHook = (0, use_theme_animation_1.useThemeAnimation)({
+        animationType,
+        duration,
+        themes,
+        colorThemes,
+        ...(currentColorTheme !== undefined && { colorTheme: currentColorTheme }),
+        onColorThemeChange,
+    });
+    const isControlled = contextTheme !== null;
+    const { colorTheme, setColorTheme } = isControlled ?
+        { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme } :
+        standaloneHook;
+    const handleColorThemeChange = (newColorTheme) => {
+        setColorTheme(newColorTheme);
+        // Also call the callback if provided
+        if (onColorThemeChange) {
+            onColorThemeChange(newColorTheme);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: colorThemes.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-2", children: (0, jsx_runtime_1.jsxs)(select_1.Select, { value: colorTheme, onValueChange: (v) => handleColorThemeChange(v), children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: "capitalize", children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Choose a color theme" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: colorThemes.map(theme => ((0, jsx_runtime_1.jsx)(select_1.SelectItem, { className: "capitalize", value: theme, children: theme }, theme))) })] }) })) }));
+};
+exports.ThemeSelector = ThemeSelector;

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

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

package/dist/cjs/components/ThemeSwitcher.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeSwitcher = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("motion/react");
+const clsx_1 = require("clsx");
+const use_theme_animation_1 = require("../hooks/use-theme-animation");
+const SpacemanThemeProvider_1 = require("./SpacemanThemeProvider");
+const SunIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "5" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })] }));
+const MoonIcon = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
+const MonitorIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), (0, jsx_runtime_1.jsx)("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
+const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
+    return ((0, jsx_runtime_1.jsxs)("button", { ref: isActive ? buttonRef : undefined, className: (0, clsx_1.clsx)('relative flex h-9 w-12 cursor-pointer items-center justify-center 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 && ((0, jsx_runtime_1.jsx)(react_2.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,
+                } })), (0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)("div", { className: "[&_svg]:size-4", children: icon }) }), isActive && ((0, jsx_runtime_1.jsx)(react_2.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: (0, jsx_runtime_1.jsx)(MonitorIcon, {}),
+        value: 'system',
+    },
+    {
+        icon: (0, jsx_runtime_1.jsx)(SunIcon, {}),
+        value: 'light',
+    },
+    {
+        icon: (0, jsx_runtime_1.jsx)(MoonIcon, {}),
+        value: 'dark',
+    },
+];
+const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onThemeChange, animationType, duration, className, }) => {
+    // Try to use SpacemanTheme context if available (controlled mode)
+    let contextTheme = null;
+    try {
+        contextTheme = (0, SpacemanThemeProvider_1.useSpacemanTheme)();
+    }
+    catch {
+        // Context not available, use standalone mode
+    }
+    // Use context if available, otherwise fall back to standalone hook
+    const standaloneHook = (0, use_theme_animation_1.useThemeAnimation)({
+        animationType,
+        duration,
+        themes,
+        ...(currentTheme !== undefined && { theme: currentTheme }),
+        onThemeChange,
+    });
+    const isControlled = contextTheme !== null;
+    const { ref, theme, switchTheme } = isControlled ?
+        { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme } :
+        standaloneHook;
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    (0, react_1.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 (0, jsx_runtime_1.jsx)("div", { className: "flex h-9 w-fit" });
+    }
+    const filteredOptions = THEME_OPTIONS.filter(option => themes.includes(option.value));
+    return ((0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3 }, className: (0, clsx_1.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 => ((0, jsx_runtime_1.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)));
+};
+exports.ThemeSwitcher = ThemeSwitcher;

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

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

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

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

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

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeAnimation = void 0;
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+const types_1 = require("../types");
+const animations_1 = require("../utils/animations");
+const isBrowser = typeof window !== 'undefined';
+const useThemeAnimation = (props = {}) => {
+    const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = types_1.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;
+    (0, react_1.useEffect)(() => {
+        (0, animations_1.injectBaseStyles)();
+    }, []);
+    const [internalTheme, setInternalTheme] = (0, react_1.useState)(() => {
+        if (!isBrowser)
+            return defaultTheme;
+        const saved = localStorage.getItem(storageKey);
+        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
+    });
+    const [internalColorTheme, setInternalColorTheme] = (0, react_1.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] = (0, react_1.useState)(() => (0, animations_1.getSystemTheme)());
+    const resolvedTheme = (0, animations_1.resolveTheme)(currentTheme);
+    (0, react_1.useEffect)(() => {
+        if (!isBrowser)
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleChange = () => setSystemTheme((0, animations_1.getSystemTheme)());
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
+    // Apply theme classes to DOM
+    (0, react_1.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 = (0, react_1.useRef)(null);
+    const setTheme = (0, react_1.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 = (0, react_1.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 = (0, react_1.useCallback)(async (newTheme) => {
+        if (!ref.current || !(0, animations_1.supportsViewTransitions)() || (0, animations_1.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 === types_1.ThemeAnimationType.BLUR_CIRCLE) {
+            (0, animations_1.createBlurCircleAnimation)(animationConfig);
+        }
+        await document.startViewTransition(() => {
+            (0, react_dom_1.flushSync)(() => {
+                setTheme(newTheme);
+            });
+        }).ready;
+        if (animationType === types_1.ThemeAnimationType.CIRCLE) {
+            (0, animations_1.createCircleAnimation)(animationConfig);
+        }
+    }, [setTheme, duration, easing, animationType, blurAmount, styleId]);
+    const toggleTheme = (0, react_1.useCallback)(async () => {
+        const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
+        await switchTheme(newTheme);
+    }, [resolvedTheme, switchTheme]);
+    (0, react_1.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,
+    };
+};
+exports.useThemeAnimation = useThemeAnimation;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.prefersReducedMotion = exports.supportsViewTransitions = exports.resolveTheme = exports.getSystemTheme = exports.injectBaseStyles = exports.ThemeAnimationType = exports.useSpacemanTheme = exports.SpacemanThemeProvider = exports.ThemeSelector = exports.ThemeSwitcher = exports.useThemeAnimation = void 0;
+var use_theme_animation_1 = require("./hooks/use-theme-animation");
+Object.defineProperty(exports, "useThemeAnimation", { enumerable: true, get: function () { return use_theme_animation_1.useThemeAnimation; } });
+var ThemeSwitcher_1 = require("./components/ThemeSwitcher");
+Object.defineProperty(exports, "ThemeSwitcher", { enumerable: true, get: function () { return ThemeSwitcher_1.ThemeSwitcher; } });
+var ThemeSelector_1 = require("./components/ThemeSelector");
+Object.defineProperty(exports, "ThemeSelector", { enumerable: true, get: function () { return ThemeSelector_1.ThemeSelector; } });
+var SpacemanThemeProvider_1 = require("./components/SpacemanThemeProvider");
+Object.defineProperty(exports, "SpacemanThemeProvider", { enumerable: true, get: function () { return SpacemanThemeProvider_1.SpacemanThemeProvider; } });
+Object.defineProperty(exports, "useSpacemanTheme", { enumerable: true, get: function () { return SpacemanThemeProvider_1.useSpacemanTheme; } });
+var types_1 = require("./types");
+Object.defineProperty(exports, "ThemeAnimationType", { enumerable: true, get: function () { return types_1.ThemeAnimationType; } });
+var animations_1 = require("./utils/animations");
+Object.defineProperty(exports, "injectBaseStyles", { enumerable: true, get: function () { return animations_1.injectBaseStyles; } });
+Object.defineProperty(exports, "getSystemTheme", { enumerable: true, get: function () { return animations_1.getSystemTheme; } });
+Object.defineProperty(exports, "resolveTheme", { enumerable: true, get: function () { return animations_1.resolveTheme; } });
+Object.defineProperty(exports, "supportsViewTransitions", { enumerable: true, get: function () { return animations_1.supportsViewTransitions; } });
+Object.defineProperty(exports, "prefersReducedMotion", { enumerable: true, get: function () { return animations_1.prefersReducedMotion; } });

package/dist/cjs/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/cjs/types/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeAnimationType = void 0;
+var ThemeAnimationType;
+(function (ThemeAnimationType) {
+    ThemeAnimationType["CIRCLE"] = "circle";
+    ThemeAnimationType["BLUR_CIRCLE"] = "blur-circle";
+})(ThemeAnimationType || (exports.ThemeAnimationType = ThemeAnimationType = {}));

package/dist/cjs/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;