@space-man/react-theme-animation 1.0.3 → 1.0.4

package/README.md

@@ -2,6 +2,14 @@
 
 React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
+## Demo
+
+<video src="https://tonyedgal.github.io/spaceman-react-theme-animation/Demo.mov" controls width="600" loop autoplay muted></video>
+
+## Live Demo
+
+[Live Demo Link](https://spaceman-rta-vite.netlify.app/)
+
 ## Features
 
 - 🎨 **Smooth Animations**: Beautiful view transition animations for theme switching with customizable origins
@@ -25,14 +33,17 @@ npm install @space-man/react-theme-animation
 
 ## Usage Patterns
 
-This library supports two main usage patterns:
+This library supports multiple usage patterns:
 
 1. **Hook-Only Usage**: Direct hook usage for custom implementations
 2. **Provider Pattern**: Centralized state management (recommended)
+3. **ViteThemeProvider**: Specialized provider for Vite React SPAs
 
 📚 **[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.
+🚀 **[View the Next.js Code Example](./example/)** to see this package in action with a complete implementation of both hook and provider pattern.
+
+⚡ **[View the Vite React SPA Demo](https://github.com/tonyedgal/spaceman-rta-framework-guides/tree/main/example-vite)** for a complete Vite implementation using ViteThemeProvider.
 
 ---
 
@@ -80,7 +91,7 @@ function App() {
         </header>
 
         <aside>
-          <ThemeSelector colorThemes={['default', 'blue', 'green', 'purple']} />
+          <ThemeSelector colorThemes={['default', 'supabase', 'mono']} />
         </aside>
 
         <main>
@@ -94,11 +105,121 @@ function App() {
 
 ---
 
+## 3. ViteThemeProvider (Vite React SPAs)
+
+Specialized theme provider optimized for Vite React single-page applications. Provides essential theme management without animation features.
+
+### Basic Vite Setup
+
+```tsx
+import { ViteThemeProvider, useViteTheme } from '@space-man/react-theme-animation'
+
+function App() {
+  return (
+    <ViteThemeProvider defaultTheme="system" storageKey="my-app-theme" attribute="class">
+      <div className="app">
+        <header>
+          <ThemeToggle />
+        </header>
+        <main>
+          <ThemeSection />
+        </main>
+      </div>
+    </ViteThemeProvider>
+  )
+}
+
+function ThemeSection() {
+  return (
+    <SpacemanThemeProvider>
+      <div className="app">
+        <header>
+          <ThemeSwitcher />
+        </header>
+
+        <aside>
+          <ThemeSelector colorThemes={['default', 'supabase', 'mono']} />
+        </aside>
+
+        <main>
+          <YourAppContent />
+        </main>
+      </div>
+    </SpacemanThemeProvider>
+  )
+}
+
+function ThemeToggle() {
+  const { theme, setTheme, resolvedTheme } = useViteTheme()
+
+  return (
+    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+      {resolvedTheme === 'dark' ? '🌞' : '🌙'} {theme}
+    </button>
+  )
+}
+```
+
+### ViteThemeProvider Props
+
+| Prop                        | Type                            | Default        | Description                                 |
+| --------------------------- | ------------------------------- | -------------- | ------------------------------------------- |
+| `children`                  | `ReactNode`                     | -              | React children                              |
+| `attribute`                 | `'class' \| 'data-theme'`       | `'class'`      | How to apply theme to DOM                   |
+| `defaultTheme`              | `'light' \| 'dark' \| 'system'` | `'system'`     | Default theme                               |
+| `enableSystem`              | `boolean`                       | `true`         | Enable system theme detection               |
+| `disableTransitionOnChange` | `boolean`                       | `false`        | Disable CSS transitions during theme change |
+| `storageKey`                | `string`                        | `'vite-theme'` | localStorage key for persistence            |
+
+---
+
+## Defining Application color theme as CSS Variables
+
+The library uses CSS custom properties for theming. Define these in your **MAIN** CSS file. _Note_: do not define the other theme variables in a separate CSS file and import it, as the `:root` variables for light mode will override the light mode variables for the other themes. Keep everything in the same file.
+
+```css
+/* Base theme variables */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+}
+
+/* Dark theme */
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+}
+
+/* Add other theme variants from design system or tweakcn */
+
+.theme-supabase {
+  --background: oklch(0.9911 0 0);
+  --foreground: oklch(0.2046 0 0);
+}
+
+.theme-supabase.dark {
+  --background: oklch(0.1822 0 0);
+  --foreground: oklch(0.9288 0.0126 255.5078);
+}
+
+.theme-mono {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.1448 0 0);
+}
+
+.theme-mono.dark {
+  --background: oklch(0.1448 0 0);
+  --foreground: oklch(1 0 0);
+}
+```
+
+---
+
 ## API Reference
 
 ### SpacemanThemeProvider
 
-Context provider for centralized theme state management.
+Context provider for centralized theme state management for the ThemeSelector and ThemeSwitcher components. The SpacemanThemeProvider allows you to manage themes and color themes in your application with smooth animations and synchronized state and provide a state reference for the ThemeSelector and ThemeSwitcher components.
 
 ```tsx
 <SpacemanThemeProvider
@@ -111,7 +232,7 @@ Context provider for centralized theme state management.
   onThemeChange={theme => console.log('Theme:', theme)}
   onColorThemeChange={colorTheme => console.log('Color:', colorTheme)}
 >
-  <App />
+  {children}
 </SpacemanThemeProvider>
 ```
 
@@ -316,46 +437,6 @@ interface ThemeSelectorProps {
 
 ---
 
-## CSS Variables
-
-The library uses CSS custom properties for theming. Define these in your CSS:
-
-```css
-/* Base theme variables */
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-}
-
-/* Dark theme */
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-}
-
-/* Add other theme variants from design system or tweakcn */
-
-.theme-supabase {
-  --background: oklch(0.9911 0 0);
-  --foreground: oklch(0.2046 0 0);
-}
-
-.theme-supabase.dark {
-  --background: oklch(0.1822 0 0);
-  --foreground: oklch(0.9288 0.0126 255.5078);
-}
-
-.theme-mono {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.1448 0 0);
-}
-
-.theme-mono.dark {
-  --background: oklch(0.1448 0 0);
-  --foreground: oklch(1 0 0);
-}
-```
-
 ---
 
 ## Browser Support

package/dist/cjs/components/ThemeSwitcher.js

@@ -11,9 +11,9 @@ const SunIcon = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16
 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: {
+    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', '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: {
+        }, children: [isHovered && ((0, jsx_runtime_1.jsx)(react_2.motion.div, { layoutId: "theme-hover", className: "absolute inset-0 bg-muted", style: {
                     borderRadius: 'var(--radius)',
                 }, transition: {
                     type: 'spring',
@@ -21,18 +21,8 @@ const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter,
                     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: {
+                } })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "[&_svg]:size-4", children: icon }) }), isActive && ((0, jsx_runtime_1.jsx)("div", { 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 = [
@@ -50,15 +40,11 @@ const THEME_OPTIONS = [
     },
 ];
 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
+    catch { }
     const standaloneHook = (0, use_theme_animation_1.useThemeAnimation)({
         animationType,
         duration,
@@ -71,30 +57,25 @@ const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onT
         ? { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme }
         : standaloneHook;
     const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    const [hoveredTheme, setHoveredTheme] = (0, react_1.useState)(null);
     (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: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, clsx_1.clsx)('inline-flex h-9 items-center overflow-hidden bg-background shadow-sm border border-border', isMounted ? 'opacity-100' : 'opacity-0', 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)));
+        }, role: "radiogroup", onMouseLeave: () => setHoveredTheme(null), children: filteredOptions.map(option => ((0, jsx_runtime_1.jsx)(ThemeOption, { icon: option.icon, value: option.value, isActive: theme === option.value, isHovered: hoveredTheme === option.value, onClick: handleThemeChange, onMouseEnter: () => setHoveredTheme(option.value), onMouseLeave: () => { }, buttonRef: theme === option.value ? ref : undefined }, option.value))) }));
 };
 exports.ThemeSwitcher = ThemeSwitcher;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+type Theme = 'light' | 'dark' | 'system';
+export interface ViteThemeContextType {
+    theme: Theme;
+    resolvedTheme: 'light' | 'dark';
+    setTheme: (theme: Theme) => void;
+    systemTheme: 'light' | 'dark';
+}
+interface ViteThemeProviderProps {
+    children: React.ReactNode;
+    attribute?: 'class' | 'data-theme';
+    defaultTheme?: Theme;
+    enableSystem?: boolean;
+    disableTransitionOnChange?: boolean;
+    storageKey?: string;
+}
+export declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
+export declare const useViteTheme: () => ViteThemeContextType;
+export {};

package/dist/cjs/components/ViteThemeProvider.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useViteTheme = exports.ViteThemeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ViteThemeContext = (0, react_1.createContext)(undefined);
+const ViteThemeProvider = ({ children, attribute = 'class', defaultTheme = 'system', enableSystem = true, disableTransitionOnChange = false, storageKey = 'vite-theme', }) => {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const [systemTheme, setSystemTheme] = (0, react_1.useState)('light');
+    const [theme, setThemeState] = (0, react_1.useState)(() => {
+        if (typeof window === 'undefined')
+            return defaultTheme;
+        try {
+            const savedTheme = localStorage.getItem(storageKey);
+            return savedTheme && ['light', 'dark', 'system'].includes(savedTheme)
+                ? savedTheme
+                : defaultTheme;
+        }
+        catch {
+            return defaultTheme;
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (!enableSystem)
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const updateSystemTheme = () => {
+            setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
+        };
+        updateSystemTheme();
+        mediaQuery.addEventListener('change', updateSystemTheme);
+        return () => mediaQuery.removeEventListener('change', updateSystemTheme);
+    }, [enableSystem]);
+    const resolvedTheme = theme === 'system' ? systemTheme : theme;
+    (0, react_1.useEffect)(() => {
+        if (!mounted)
+            return;
+        const root = document.documentElement;
+        if (disableTransitionOnChange) {
+            const css = document.createElement('style');
+            css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
+            document.head.appendChild(css);
+            window.getComputedStyle(document.body);
+            setTimeout(() => {
+                document.head.removeChild(css);
+            }, 1);
+        }
+        if (attribute === 'class') {
+            root.classList.remove('light', 'dark');
+            root.classList.add(resolvedTheme);
+        }
+        else {
+            root.setAttribute(attribute, resolvedTheme);
+        }
+        try {
+            localStorage.setItem(storageKey, theme);
+        }
+        catch { }
+    }, [theme, resolvedTheme, mounted, attribute, disableTransitionOnChange, storageKey]);
+    (0, react_1.useEffect)(() => {
+        setMounted(true);
+    }, []);
+    const setTheme = (0, react_1.useCallback)((newTheme) => {
+        setThemeState(newTheme);
+    }, []);
+    if (!mounted) {
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+    }
+    const value = {
+        theme,
+        resolvedTheme,
+        setTheme,
+        systemTheme,
+    };
+    return (0, jsx_runtime_1.jsx)(ViteThemeContext.Provider, { value: value, children: children });
+};
+exports.ViteThemeProvider = ViteThemeProvider;
+const useViteTheme = () => {
+    const context = (0, react_1.useContext)(ViteThemeContext);
+    if (context === undefined) {
+        throw new Error('useViteTheme must be used within a ViteThemeProvider');
+    }
+    return context;
+};
+exports.useViteTheme = useViteTheme;

package/dist/cjs/index.d.ts

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

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 "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;
+exports.prefersReducedMotion = exports.supportsViewTransitions = exports.resolveTheme = exports.getSystemTheme = exports.injectBaseStyles = exports.ThemeAnimationType = exports.useViteTheme = exports.ViteThemeProvider = 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");
@@ -10,6 +10,9 @@ Object.defineProperty(exports, "ThemeSelector", { enumerable: true, get: functio
 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 ViteThemeProvider_1 = require("./components/ViteThemeProvider");
+Object.defineProperty(exports, "ViteThemeProvider", { enumerable: true, get: function () { return ViteThemeProvider_1.ViteThemeProvider; } });
+Object.defineProperty(exports, "useViteTheme", { enumerable: true, get: function () { return ViteThemeProvider_1.useViteTheme; } });
 var types_1 = require("./types");
 Object.defineProperty(exports, "ThemeAnimationType", { enumerable: true, get: function () { return types_1.ThemeAnimationType; } });
 var animations_1 = require("./utils/animations");

package/dist/esm/components/ThemeSwitcher.js

@@ -8,9 +8,9 @@ const SunIcon = () => (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 2
 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: {
+    return (_jsxs("button", { ref: isActive ? buttonRef : undefined, className: clsx('relative flex h-9 w-12 cursor-pointer items-center justify-center', '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: {
+        }, children: [isHovered && (_jsx(motion.div, { layoutId: "theme-hover", className: "absolute inset-0 bg-muted", style: {
                     borderRadius: 'var(--radius)',
                 }, transition: {
                     type: 'spring',
@@ -18,18 +18,8 @@ const ThemeOption = ({ icon, value, isActive, isHovered, onClick, onMouseEnter,
                     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: {
+                } })), _jsx("div", { className: "relative z-10 flex items-center justify-center", children: _jsx("div", { className: "[&_svg]:size-4", children: icon }) }), isActive && (_jsx("div", { 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 = [
@@ -47,15 +37,11 @@ const THEME_OPTIONS = [
     },
 ];
 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
+    catch { }
     const standaloneHook = useThemeAnimation({
         animationType,
         duration,
@@ -68,29 +54,24 @@ export const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentThe
         ? { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme }
         : standaloneHook;
     const [isMounted, setIsMounted] = useState(false);
+    const [hoveredTheme, setHoveredTheme] = useState(null);
     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: {
+    return (_jsx("div", { className: clsx('inline-flex h-9 items-center overflow-hidden bg-background shadow-sm border border-border', isMounted ? 'opacity-100' : 'opacity-0', 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)));
+        }, role: "radiogroup", onMouseLeave: () => setHoveredTheme(null), children: filteredOptions.map(option => (_jsx(ThemeOption, { icon: option.icon, value: option.value, isActive: theme === option.value, isHovered: hoveredTheme === option.value, onClick: handleThemeChange, onMouseEnter: () => setHoveredTheme(option.value), onMouseLeave: () => { }, buttonRef: theme === option.value ? ref : undefined }, option.value))) }));
 };

package/dist/esm/components/ViteThemeProvider.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type Theme = 'light' | 'dark' | 'system';
+export interface ViteThemeContextType {
+    theme: Theme;
+    resolvedTheme: 'light' | 'dark';
+    setTheme: (theme: Theme) => void;
+    systemTheme: 'light' | 'dark';
+}
+interface ViteThemeProviderProps {
+    children: React.ReactNode;
+    attribute?: 'class' | 'data-theme';
+    defaultTheme?: Theme;
+    enableSystem?: boolean;
+    disableTransitionOnChange?: boolean;
+    storageKey?: string;
+}
+export declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
+export declare const useViteTheme: () => ViteThemeContextType;
+export {};

package/dist/esm/components/ViteThemeProvider.js

@@ -0,0 +1,80 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState, useCallback } from 'react';
+const ViteThemeContext = createContext(undefined);
+export const ViteThemeProvider = ({ children, attribute = 'class', defaultTheme = 'system', enableSystem = true, disableTransitionOnChange = false, storageKey = 'vite-theme', }) => {
+    const [mounted, setMounted] = useState(false);
+    const [systemTheme, setSystemTheme] = useState('light');
+    const [theme, setThemeState] = useState(() => {
+        if (typeof window === 'undefined')
+            return defaultTheme;
+        try {
+            const savedTheme = localStorage.getItem(storageKey);
+            return savedTheme && ['light', 'dark', 'system'].includes(savedTheme)
+                ? savedTheme
+                : defaultTheme;
+        }
+        catch {
+            return defaultTheme;
+        }
+    });
+    useEffect(() => {
+        if (!enableSystem)
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const updateSystemTheme = () => {
+            setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
+        };
+        updateSystemTheme();
+        mediaQuery.addEventListener('change', updateSystemTheme);
+        return () => mediaQuery.removeEventListener('change', updateSystemTheme);
+    }, [enableSystem]);
+    const resolvedTheme = theme === 'system' ? systemTheme : theme;
+    useEffect(() => {
+        if (!mounted)
+            return;
+        const root = document.documentElement;
+        if (disableTransitionOnChange) {
+            const css = document.createElement('style');
+            css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
+            document.head.appendChild(css);
+            window.getComputedStyle(document.body);
+            setTimeout(() => {
+                document.head.removeChild(css);
+            }, 1);
+        }
+        if (attribute === 'class') {
+            root.classList.remove('light', 'dark');
+            root.classList.add(resolvedTheme);
+        }
+        else {
+            root.setAttribute(attribute, resolvedTheme);
+        }
+        try {
+            localStorage.setItem(storageKey, theme);
+        }
+        catch { }
+    }, [theme, resolvedTheme, mounted, attribute, disableTransitionOnChange, storageKey]);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    const setTheme = useCallback((newTheme) => {
+        setThemeState(newTheme);
+    }, []);
+    if (!mounted) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const value = {
+        theme,
+        resolvedTheme,
+        setTheme,
+        systemTheme,
+    };
+    return _jsx(ViteThemeContext.Provider, { value: value, children: children });
+};
+export const useViteTheme = () => {
+    const context = useContext(ViteThemeContext);
+    if (context === undefined) {
+        throw new Error('useViteTheme must be used within a ViteThemeProvider');
+    }
+    return context;
+};

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",