@space-man/react-theme-animation 1.0.2 → 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.
 
 ---
 
@@ -43,16 +54,16 @@ Perfect for custom theme toggle buttons and complete control over animated theme
 ### Basic Theme Toggle
 
 ```tsx
-import { useThemeAnimation } from '@space-man/react-theme-animation';
+import { useThemeAnimation } from '@space-man/react-theme-animation'
 
 function ThemeToggle() {
-  const { theme, toggleTheme, ref } = useThemeAnimation();
+  const { theme, toggleTheme, ref } = useThemeAnimation()
 
   return (
     <button ref={ref} onClick={toggleTheme} className="theme-toggle-btn">
       {theme === 'light' ? '🌙' : '🌞'} {theme}
     </button>
-  );
+  )
 }
 ```
 
@@ -69,7 +80,7 @@ import {
   SpacemanThemeProvider,
   ThemeSwitcher,
   ThemeSelector,
-} from '@space-man/react-theme-animation';
+} from '@space-man/react-theme-animation'
 
 function App() {
   return (
@@ -80,7 +91,7 @@ function App() {
         </header>
 
         <aside>
-          <ThemeSelector colorThemes={['default', 'blue', 'green', 'purple']} />
+          <ThemeSelector colorThemes={['default', 'supabase', 'mono']} />
         </aside>
 
         <main>
@@ -88,7 +99,117 @@ function App() {
         </main>
       </div>
     </SpacemanThemeProvider>
-  );
+  )
+}
+```
+
+---
+
+## 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);
 }
 ```
 
@@ -98,7 +219,7 @@ function App() {
 
 ### 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>
 ```
 
@@ -135,7 +256,7 @@ Hook to access theme state from SpacemanThemeProvider context.
 
 ```tsx
 const { theme, colorTheme, switchTheme, setColorTheme, switchThemeFromElement, ref } =
-  useSpacemanTheme();
+  useSpacemanTheme()
 ```
 
 #### Returns
@@ -161,7 +282,7 @@ const { theme, colorTheme, switchTheme, setColorTheme, toggleTheme, ref } = useT
   duration: 800,
   onThemeChange: theme => console.log('Theme changed:', theme),
   onColorThemeChange: colorTheme => console.log('Color changed:', colorTheme),
-});
+})
 ```
 
 #### Options
@@ -258,104 +379,64 @@ enum ThemeAnimationType {
 ### Types
 
 ```tsx
-type Theme = 'light' | 'dark' | 'system';
-type ColorTheme = string; // e.g., 'default', 'blue', 'green', etc.
+type Theme = 'light' | 'dark' | 'system'
+type ColorTheme = string // e.g., 'default', 'blue', 'green', etc.
 
 interface SpacemanThemeProviderProps {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  defaultColorTheme?: ColorTheme;
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  blurAmount?: number;
-  onThemeChange?: (theme: Theme) => void;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
+  children: React.ReactNode
+  defaultTheme?: Theme
+  defaultColorTheme?: ColorTheme
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  animationType?: ThemeAnimationType
+  duration?: number
+  blurAmount?: number
+  onThemeChange?: (theme: Theme) => void
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
 }
 
 interface UseThemeAnimationProps {
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  theme?: Theme;
-  colorTheme?: ColorTheme;
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  blurAmount?: number;
-  onThemeChange?: (theme: Theme) => void;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  theme?: Theme
+  colorTheme?: ColorTheme
+  animationType?: ThemeAnimationType
+  duration?: number
+  blurAmount?: number
+  onThemeChange?: (theme: Theme) => void
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
 }
 
 interface UseThemeAnimationReturn {
-  theme: Theme;
-  colorTheme: ColorTheme;
-  switchTheme: (theme: Theme) => Promise<void>;
-  setColorTheme: (colorTheme: ColorTheme) => void;
-  toggleTheme: () => Promise<void>;
-  ref: RefObject<HTMLElement>;
+  theme: Theme
+  colorTheme: ColorTheme
+  switchTheme: (theme: Theme) => Promise<void>
+  setColorTheme: (colorTheme: ColorTheme) => void
+  toggleTheme: () => Promise<void>
+  ref: RefObject<HTMLElement>
 }
 
 interface ThemeSwitcherProps {
-  themes?: Theme[];
-  currentTheme?: Theme;
-  onThemeChange?: (theme: Theme) => void;
-  animationType?: ThemeAnimationType;
-  duration?: number;
-  className?: string;
+  themes?: Theme[]
+  currentTheme?: Theme
+  onThemeChange?: (theme: Theme) => void
+  animationType?: ThemeAnimationType
+  duration?: number
+  className?: string
 }
 
 interface ThemeSelectorProps {
-  themes?: Theme[];
-  colorThemes?: ColorTheme[];
-  currentColorTheme?: ColorTheme;
-  onColorThemeChange?: (colorTheme: ColorTheme) => void;
-  animationType?: ThemeAnimationType;
-  duration?: number;
+  themes?: Theme[]
+  colorThemes?: ColorTheme[]
+  currentColorTheme?: ColorTheme
+  onColorThemeChange?: (colorTheme: ColorTheme) => void
+  animationType?: ThemeAnimationType
+  duration?: number
 }
 ```
 
 ---
 
-## 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/ThemeSelector.js

@@ -24,9 +24,9 @@ const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorThemes = ['d
         onColorThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { colorTheme, setColorTheme } = isControlled ?
-        { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme } :
-        standaloneHook;
+    const { colorTheme, setColorTheme } = isControlled
+        ? { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme }
+        : standaloneHook;
     const handleColorThemeChange = (newColorTheme) => {
         setColorTheme(newColorTheme);
         // Also call the callback if provided

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,
@@ -67,34 +53,29 @@ const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentTheme, onT
         onThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { ref, theme, switchTheme } = isControlled ?
-        { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme } :
-        standaloneHook;
+    const { ref, theme, switchTheme } = isControlled
+        ? { 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/components/ui/select.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+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";
+    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;

package/dist/cjs/components/ui/select.js

@@ -58,26 +58,26 @@ function SelectValue({ ...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 }) {
+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 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 }));
+    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 }));
+    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, {}) }));
+    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, {}) }));
+    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/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/ThemeSelector.js

@@ -21,9 +21,9 @@ export const ThemeSelector = ({ themes = ['light', 'dark', 'system'], colorTheme
         onColorThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { colorTheme, setColorTheme } = isControlled ?
-        { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme } :
-        standaloneHook;
+    const { colorTheme, setColorTheme } = isControlled
+        ? { colorTheme: contextTheme.colorTheme, setColorTheme: contextTheme.setColorTheme }
+        : standaloneHook;
     const handleColorThemeChange = (newColorTheme) => {
         setColorTheme(newColorTheme);
         // Also call the callback if provided

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,
@@ -64,33 +50,28 @@ export const ThemeSwitcher = ({ themes = ['light', 'dark', 'system'], currentThe
         onThemeChange,
     });
     const isControlled = contextTheme !== null;
-    const { ref, theme, switchTheme } = isControlled ?
-        { ref: contextTheme.ref, theme: contextTheme.theme, switchTheme: contextTheme.switchTheme } :
-        standaloneHook;
+    const { ref, theme, switchTheme } = isControlled
+        ? { 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/components/ui/select.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+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";
+    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;

package/dist/esm/components/ui/select.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as SelectPrimitive from "@radix-ui/react-select";
-import { clsx } from "clsx";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { clsx } from 'clsx';
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -13,27 +13,27 @@ function SelectValue({ ...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 }) {
+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 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 }));
+    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 }));
+    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, {}) }));
+    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, {}) }));
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: clsx('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDownIcon, {}) }));
 }
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/esm/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,21 +1,28 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",
-    "reactjs",
-    "hooks",
     "theme",
+    "dark mode",
+    "light mode",
+    "theme switching",
+    "view transitions",
+    "hooks",
     "animation",
     "switch",
     "typescript",
-    "nextjs",
     "dark",
     "light",
     "view-transition",
+    "view-transition-api",
+    "tailwind",
     "tailwindcss",
-    "shadcn"
+    "shadcn",
+    "reactjs",
+    "nextjs",
+    "vite"
   ],
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -50,6 +57,8 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "lint:fix": "eslint --fix . --ext .{js,jsx,ts,tsx}",
     "test": "echo \"Error: no test specified\" && exit 1",
+    "prettier:check": "prettier --check . --config ./.prettierrc",
+    "prettier:fix": "prettier --write . --config ./.prettierrc",
     "changeset": "changeset add --type patch",
     "changeset:patch": "changeset add --type patch",
     "changeset:feature": "changeset add --type minor",