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

package/README.md

@@ -1,4 +1,4 @@
-# @spaceman/react-theme-animation
+# @space-man/react-theme-animation
 
 React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
@@ -20,7 +20,7 @@ React theme switching with smooth view transition animations, multi-theme suppor
 ## Installation
 
 ```bash
-npm install @spaceman/react-theme-animation
+npm install @space-man/react-theme-animation
 ```
 
 ## Usage Patterns
@@ -30,6 +30,10 @@ This library supports two main usage patterns:
 1. **Hook-Only Usage**: Direct hook usage for custom implementations
 2. **Provider Pattern**: Centralized state management (recommended)
 
+📚 **[See the complete Getting Started Guide](./getting-started.md)** for detailed examples, advanced configurations, and best practices.
+
+🚀 **[View the Code Example](./example/)** to see this package in action with a complete implementation of both hook and provider pattern.
+
 ---
 
 ## 1. Hook-Only Usage For Light and Dark mode animation
@@ -39,7 +43,7 @@ Perfect for custom theme toggle buttons and complete control over animated theme
 ### Basic Theme Toggle
 
 ```tsx
-import { useThemeAnimation } from '@spaceman/react-theme-animation';
+import { useThemeAnimation } from '@space-man/react-theme-animation';
 
 function ThemeToggle() {
   const { theme, toggleTheme, ref } = useThemeAnimation();
@@ -65,7 +69,7 @@ import {
   SpacemanThemeProvider,
   ThemeSwitcher,
   ThemeSelector,
-} from '@spaceman/react-theme-animation';
+} from '@space-man/react-theme-animation';
 
 function App() {
   return (
@@ -88,249 +92,6 @@ function App() {
 }
 ```
 
-### Advanced Provider Configuration
-
-```tsx
-import {
-  SpacemanThemeProvider,
-  ThemeSwitcher,
-  ThemeSelector,
-  ThemeAnimationType,
-} from '@spaceman/react-theme-animation';
-
-function App() {
-  return (
-    <SpacemanThemeProvider
-      defaultTheme="system"
-      defaultColorTheme="blue"
-      themes={['light', 'dark', 'system']}
-      colorThemes={['default', 'blue', 'green', 'purple', 'red']}
-      animationType={ThemeAnimationType.BLUR_CIRCLE}
-      blurAmount={10}
-      duration={1000}
-      onThemeChange={theme => {
-        // Analytics, localStorage, etc.
-        console.log('Global theme changed:', theme);
-      }}
-      onColorThemeChange={colorTheme => {
-        console.log('Global color theme changed:', colorTheme);
-      }}
-    >
-      <AppLayout />
-    </SpacemanThemeProvider>
-  );
-}
-
-function AppLayout() {
-  return (
-    <div className="app-layout">
-      <Header />
-      <Sidebar />
-      <MainContent />
-    </div>
-  );
-}
-
-function Header() {
-  return (
-    <header className="header">
-      <h1>My App</h1>
-      <ThemeSwitcher className="ml-auto" />
-    </header>
-  );
-}
-
-function Sidebar() {
-  return (
-    <aside className="sidebar">
-      <h2>Settings</h2>
-      <ThemeSelector colorThemes={['default', 'blue', 'green', 'purple', 'red']} />
-    </aside>
-  );
-}
-```
-
-### Using the Provider Hook
-
-Access theme state anywhere in your component tree. This hook also enables you to set a reference point for the animation to start from.
-
-```tsx
-import { useSpacemanTheme } from '@spaceman/react-theme-animation';
-
-function ThemeStatus() {
-  const { theme, colorTheme, switchTheme, setColorTheme, switchThemeFromElement } =
-    useSpacemanTheme();
-
-  const handleCustomThemeSwitch = event => {
-    // Animate from the clicked element
-    switchThemeFromElement('dark', event.currentTarget);
-  };
-
-  return (
-    <div className="theme-status">
-      <p>Current theme: {theme}</p>
-      <p>Current color: {colorTheme}</p>
-
-      <button onClick={handleCustomThemeSwitch}>Switch to Dark (with animation)</button>
-    </div>
-  );
-}
-```
-
----
-
-## Complete Example: Advanced Theme System
-
-Here's a complete example showcasing all features:
-
-```tsx
-import React from 'react';
-import {
-  SpacemanThemeProvider,
-  ThemeSwitcher,
-  ThemeSelector,
-  useSpacemanTheme,
-  ThemeAnimationType,
-} from '@spaceman/react-theme-animation';
-
-// Main App with Provider
-function App() {
-  return (
-    <SpacemanThemeProvider
-      defaultTheme="system"
-      defaultColorTheme="blue"
-      themes={['light', 'dark', 'system']}
-      colorThemes={['default', 'blue', 'green', 'purple', 'red', 'orange']}
-      animationType={ThemeAnimationType.CIRCLE}
-      duration={800}
-      onThemeChange={theme => {
-        // Save to localStorage, analytics, etc.
-        localStorage.setItem('preferred-theme', theme);
-      }}
-      onColorThemeChange={colorTheme => {
-        localStorage.setItem('preferred-color-theme', colorTheme);
-      }}
-    >
-      <AppContent />
-    </SpacemanThemeProvider>
-  );
-}
-
-// App Layout
-function AppContent() {
-  return (
-    <div className="min-h-screen bg-background text-foreground">
-      <Header />
-      <div className="container mx-auto px-4 py-8">
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
-          <Sidebar />
-          <MainContent />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Header with Theme Switcher
-function Header() {
-  return (
-    <header className="border-b bg-card">
-      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
-        <h1 className="text-2xl font-bold">Theme Demo</h1>
-        <div className="flex items-center gap-4">
-          <ThemeSwitcher className="rounded-lg" />
-        </div>
-      </div>
-    </header>
-  );
-}
-
-// Sidebar with Theme Selector
-function Sidebar() {
-  return (
-    <aside className="space-y-6">
-      <div className="bg-card p-6 rounded-lg border">
-        <h2 className="text-lg font-semibold mb-4">Theme Settings</h2>
-        <div className="space-y-4">
-          <div>
-            <label className="text-sm font-medium mb-2 block">Color Theme</label>
-            <ThemeSelector colorThemes={['default', 'blue', 'green', 'purple', 'red', 'orange']} />
-          </div>
-        </div>
-      </div>
-
-      <ThemeInfo />
-    </aside>
-  );
-}
-
-// Component using the theme hook
-function ThemeInfo() {
-  const { theme, colorTheme, switchThemeFromElement } = useSpacemanTheme();
-
-  const quickSwitchTheme = (newTheme, event) => {
-    switchThemeFromElement(newTheme, event.currentTarget);
-  };
-
-  return (
-    <div className="bg-card p-6 rounded-lg border">
-      <h3 className="text-lg font-semibold mb-4">Current State</h3>
-      <div className="space-y-2 text-sm">
-        <p>
-          <strong>Theme:</strong> {theme}
-        </p>
-        <p>
-          <strong>Color:</strong> {colorTheme}
-        </p>
-      </div>
-
-      <div className="mt-4 space-y-2">
-        <p className="text-sm font-medium">Quick Switch:</p>
-        <div className="flex gap-2">
-          {['light', 'dark'].map(t => (
-            <button
-              key={t}
-              onClick={e => quickSwitchTheme(t, e)}
-              className="px-3 py-1 text-xs bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
-            >
-              {t}
-            </button>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Main content area
-function MainContent() {
-  return (
-    <main className="lg:col-span-3 space-y-6">
-      <div className="bg-card p-6 rounded-lg border">
-        <h2 className="text-xl font-semibold mb-4">Welcome to Theme Demo</h2>
-        <p className="text-muted-foreground">
-          This demo showcases the spaceman-react-theme-animation library with synchronized theme
-          state, smooth animations, and multiple color themes.
-        </p>
-      </div>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        {[1, 2, 3, 4].map(i => (
-          <div key={i} className="bg-card p-6 rounded-lg border">
-            <h3 className="font-semibold mb-2">Card {i}</h3>
-            <p className="text-sm text-muted-foreground">
-              Sample content that adapts to the current theme and color scheme.
-            </p>
-          </div>
-        ))}
-      </div>
-    </main>
-  );
-}
-
-export default App;
-```
-
 ---
 
 ## API Reference

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",
@@ -49,7 +49,14 @@
     "format": "prettier --write . --config ./.prettierrc",
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix . --ext .{js,jsx,ts,tsx}",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "changeset": "changeset add --type patch",
+    "changeset:patch": "changeset add --type patch",
+    "changeset:feature": "changeset add --type minor",
+    "changeset:breaking": "changeset add --type major",
+    "changeset:custom": "changeset",
+    "version-packages": "changeset version",
+    "release": "npm run build && changeset publish"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -58,6 +65,7 @@
     "@radix-ui/react-select": ">=2"
   },
   "devDependencies": {
+    "@changesets/cli": "^2.27.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.15.0",

package/dist/components/SpacemanThemeProvider.d.ts

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

package/dist/components/SpacemanThemeProvider.js

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

package/dist/components/ThemeSelector.d.ts

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

package/dist/components/ThemeSelector.js

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

package/dist/components/ThemeSwitcher.d.ts

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

package/dist/components/ThemeSwitcher.js

@@ -1,96 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { motion } from 'motion/react';
-import { clsx } from 'clsx';
-import { useThemeAnimation } from '../hooks/use-theme-animation';
-import { useSpacemanTheme } from './SpacemanThemeProvider';
-const SunIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("circle", { cx: "12", cy: "12", r: "5" }), _jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })] }));
-const MoonIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }));
-const MonitorIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }), _jsx("line", { x1: "8", x2: "16", y1: "21", y2: "21" }), _jsx("line", { x1: "12", x2: "12", y1: "17", y2: "21" })] }));
-const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter, onMouseLeave, buttonRef, }) => {
-    return (_jsxs("button", { ref: isActive ? buttonRef : undefined, className: clsx('relative flex h-9 w-12 cursor-pointer items-center justify-center transition-all duration-200 ease-in-out', 'text-muted-foreground hover:text-foreground', isActive && 'text-foreground font-medium'), role: "radio", "aria-checked": isActive, "aria-label": `Switch to ${value} theme`, onClick: (event) => onClick(value, event), onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: {
-            borderRadius: 'var(--radius)',
-        }, children: [isHovered && (_jsx(motion.div, { layoutId: "theme-hover-bg", className: "absolute inset-0 bg-muted backdrop-blur-sm", style: {
-                    borderRadius: 'var(--radius)',
-                }, transition: {
-                    type: 'spring',
-                    bounce: 0,
-                    stiffness: 100,
-                    damping: 10,
-                    duration: 0.3,
-                } })), _jsx(motion.div, { className: "relative z-10 flex items-center justify-center", animate: {
-                    scale: isActive ? 1.1 : 1,
-                }, transition: {
-                    type: 'spring',
-                    bounce: 0.2,
-                    duration: 0.4,
-                }, children: _jsx("div", { className: "[&_svg]:size-4", children: icon }) }), isActive && (_jsx(motion.div, { layoutId: "theme-active-indicator", className: "absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full", style: {
-                    backgroundColor: 'hsl(var(--primary))',
-                }, transition: {
-                    type: 'spring',
-                    bounce: 0.3,
-                    duration: 0.6,
-                } }))] }));
-};
-const THEME_OPTIONS = [
-    {
-        icon: _jsx(MonitorIcon, {}),
-        value: 'system',
-    },
-    {
-        icon: _jsx(SunIcon, {}),
-        value: 'light',
-    },
-    {
-        icon: _jsx(MoonIcon, {}),
-        value: 'dark',
-    },
-];
-export const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onThemeChange, animationType, duration, className, }) => {
-    // Try to use SpacemanTheme context if available (controlled mode)
-    let contextTheme = null;
-    try {
-        contextTheme = useSpacemanTheme();
-    }
-    catch {
-        // Context not available, use standalone mode
-    }
-    // Use context if available, otherwise fall back to standalone hook
-    const standaloneHook = useThemeAnimation({
-        animationType,
-        duration,
-        themes,
-        ...(currentTheme !== undefined && { theme: currentTheme }),
-        onThemeChange,
-    });
-    const isControlled = contextTheme !== null;
-    const { ref, theme, switchTheme } = isControlled ?
-        { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme } :
-        standaloneHook;
-    const [isMounted, setIsMounted] = useState(false);
-    useEffect(() => {
-        setIsMounted(true);
-    }, []);
-    const handleThemeChange = async (newTheme, event) => {
-        if (isControlled && contextTheme.switchThemeFromElement && event) {
-            // Use controlled mode with animation from clicked element
-            await contextTheme.switchThemeFromElement(newTheme, event.currentTarget);
-            // Also call the callback if provided
-            if (onThemeChange) {
-                onThemeChange(newTheme);
-            }
-        }
-        else {
-            // Use standalone mode
-            await switchTheme(newTheme);
-        }
-    };
-    if (!isMounted) {
-        return _jsx("div", { className: "flex h-9 w-fit" });
-    }
-    const filteredOptions = THEME_OPTIONS.filter(option => themes.includes(option.value));
-    return (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { duration: 0.3 }, className: clsx('inline-flex items-center overflow-hidden bg-background shadow-sm border border-border', 'transition-all duration-200 ease-in-out', className), style: {
-            borderRadius: 'var(--radius)',
-            backgroundColor: 'hsl(var(--background))',
-        }, role: "radiogroup", children: filteredOptions.map(option => (_jsx(ThemeOption, { icon: option.icon, value: option.value, isActive: theme === option.value, isHovered: false, onClick: handleThemeChange, onMouseEnter: () => { }, onMouseLeave: () => { }, buttonRef: theme === option.value ? ref : undefined }, option.value))) }, String(isMounted)));
-};

package/dist/components/ui/select.d.ts

@@ -1,15 +0,0 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
-declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
-declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
-declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-    size?: "sm" | "default";
-}): import("react/jsx-runtime").JSX.Element;
-declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
-declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
-declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
-declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
-declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
-export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/ui/select.js

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

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

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

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

@@ -1,145 +0,0 @@
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { flushSync } from 'react-dom';
-import { ThemeAnimationType, } from '../types';
-import { injectBaseStyles, resolveTheme, getSystemTheme, supportsViewTransitions, prefersReducedMotion, createCircleAnimation, createBlurCircleAnimation, } from '../utils/animations';
-const isBrowser = typeof window !== 'undefined';
-export const useThemeAnimation = (props = {}) => {
-    const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, } = props;
-    const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
-    const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
-    useEffect(() => {
-        injectBaseStyles();
-    }, []);
-    const [internalTheme, setInternalTheme] = useState(() => {
-        if (!isBrowser)
-            return defaultTheme;
-        const saved = localStorage.getItem(storageKey);
-        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
-    });
-    const [internalColorTheme, setInternalColorTheme] = useState(() => {
-        if (!isBrowser)
-            return defaultColorTheme;
-        const saved = localStorage.getItem(colorStorageKey);
-        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
-    });
-    const currentTheme = externalTheme ?? internalTheme;
-    const currentColorTheme = externalColorTheme ?? internalColorTheme;
-    const [, setSystemTheme] = useState(() => getSystemTheme());
-    const resolvedTheme = resolveTheme(currentTheme);
-    useEffect(() => {
-        if (!isBrowser)
-            return;
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const handleChange = () => setSystemTheme(getSystemTheme());
-        mediaQuery.addEventListener('change', handleChange);
-        return () => mediaQuery.removeEventListener('change', handleChange);
-    }, []);
-    // Apply theme classes to DOM
-    useEffect(() => {
-        if (!isBrowser)
-            return;
-        // Apply theme class (light/dark) - use resolvedTheme instead of manual resolution
-        if (resolvedTheme === 'dark') {
-            document.documentElement.classList.add(globalClassName);
-        }
-        else {
-            document.documentElement.classList.remove(globalClassName);
-        }
-        // Apply color theme classes
-        // Remove all existing color theme classes
-        colorThemes.forEach(theme => {
-            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        // Add current color theme class
-        document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes]);
-    const ref = useRef(null);
-    const setTheme = useCallback((newTheme) => {
-        // Always save to localStorage
-        if (isBrowser) {
-            localStorage.setItem(storageKey, newTheme);
-        }
-        // Update internal state if no external control
-        if (externalTheme === undefined) {
-            setInternalTheme(newTheme);
-        }
-        // Call external callback if provided
-        if (onThemeChange) {
-            onThemeChange(newTheme);
-        }
-    }, [onThemeChange, externalTheme, storageKey]);
-    const setColorTheme = useCallback((newColorTheme) => {
-        // Always save to localStorage
-        if (isBrowser) {
-            localStorage.setItem(colorStorageKey, newColorTheme);
-        }
-        // Update internal state if no external control
-        if (externalColorTheme === undefined) {
-            setInternalColorTheme(newColorTheme);
-        }
-        // Call external callback if provided
-        if (onColorThemeChange) {
-            onColorThemeChange(newColorTheme);
-        }
-    }, [onColorThemeChange, externalColorTheme, colorStorageKey]);
-    const switchTheme = useCallback(async (newTheme) => {
-        if (!ref.current || !supportsViewTransitions() || prefersReducedMotion()) {
-            setTheme(newTheme);
-            return;
-        }
-        const { top, left, width, height } = ref.current.getBoundingClientRect();
-        const x = left + width / 2;
-        const y = top + height / 2;
-        const animationConfig = {
-            x,
-            y,
-            duration,
-            easing,
-            animationType,
-            blurAmount,
-            styleId,
-        };
-        if (animationType === ThemeAnimationType.BLUR_CIRCLE) {
-            createBlurCircleAnimation(animationConfig);
-        }
-        await document.startViewTransition(() => {
-            flushSync(() => {
-                setTheme(newTheme);
-            });
-        }).ready;
-        if (animationType === ThemeAnimationType.CIRCLE) {
-            createCircleAnimation(animationConfig);
-        }
-    }, [setTheme, duration, easing, animationType, blurAmount, styleId]);
-    const toggleTheme = useCallback(async () => {
-        const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
-        await switchTheme(newTheme);
-    }, [resolvedTheme, switchTheme]);
-    useEffect(() => {
-        if (!isBrowser)
-            return;
-        const root = document.documentElement;
-        if (resolvedTheme === 'dark') {
-            root.classList.add(globalClassName);
-        }
-        else {
-            root.classList.remove(globalClassName);
-        }
-        colorThemes.forEach(theme => {
-            root.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        if (currentColorTheme !== 'default') {
-            root.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-        }
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes]);
-    return {
-        ref,
-        theme: currentTheme,
-        colorTheme: currentColorTheme,
-        resolvedTheme,
-        setTheme,
-        setColorTheme,
-        toggleTheme,
-        switchTheme,
-    };
-};

package/dist/index.d.ts

@@ -1,7 +0,0 @@
-export { useThemeAnimation } from './hooks/use-theme-animation';
-export { ThemeSwitcher } from './components/ThemeSwitcher';
-export { ThemeSelector } from './components/ThemeSelector';
-export { SpacemanThemeProvider, useSpacemanTheme } from './components/SpacemanThemeProvider';
-export type { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, } from './types';
-export { ThemeAnimationType } from './types';
-export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/index.js

@@ -1,6 +0,0 @@
-export { useThemeAnimation } from './hooks/use-theme-animation';
-export { ThemeSwitcher } from './components/ThemeSwitcher';
-export { ThemeSelector } from './components/ThemeSelector';
-export { SpacemanThemeProvider, useSpacemanTheme } from './components/SpacemanThemeProvider';
-export { ThemeAnimationType } from './types';
-export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/types/index.d.ts

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

package/dist/types/index.js

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

package/dist/utils/animations.d.ts

@@ -1,18 +0,0 @@
-import { ThemeAnimationType } from '../types';
-export declare const injectBaseStyles: () => void;
-export declare const createBlurCircleMask: (blur: number) => string;
-export declare const getSystemTheme: () => "light" | "dark";
-export declare const resolveTheme: (theme: string) => "light" | "dark";
-export declare const supportsViewTransitions: () => boolean;
-export declare const prefersReducedMotion: () => boolean;
-export interface AnimationConfig {
-    x: number;
-    y: number;
-    duration: number;
-    easing: string;
-    animationType: ThemeAnimationType;
-    blurAmount: number;
-    styleId: string;
-}
-export declare const createCircleAnimation: (config: AnimationConfig) => void;
-export declare const createBlurCircleAnimation: (config: AnimationConfig) => void;

package/dist/utils/animations.js

@@ -1,145 +0,0 @@
-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);
-};