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

package/README.md

@@ -1,7 +1,18 @@
 # @space-man/react-theme-animation
 
+https://github.com/user-attachments/assets/2819cf70-c474-478e-b821-6b26457c8d4a
+
 React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
+<p align="center">
+<img width="50%" src="https://github.com/user-attachments/assets/98b7f5cc-705c-4d32-a2f6-47f79b298707" />
+<img width="50%" src="https://github.com/user-attachments/assets/128cc7b0-5708-4b4c-884f-a8310d4e494f" />
+</p>
+
+## 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 +36,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 +94,54 @@ function App() {
         </header>
 
         <aside>
-          <ThemeSelector colorThemes={['default', 'blue', 'green', 'purple']} />
+          <ThemeSelector colorThemes={['default', 'supabase', 'mono']} />
+        </aside>
+
+        <main>
+          <YourAppContent />
+        </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>
@@ -90,6 +151,69 @@ function App() {
     </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 +222,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 +235,7 @@ Context provider for centralized theme state management.
   onThemeChange={theme => console.log('Theme:', theme)}
   onColorThemeChange={colorTheme => console.log('Color:', colorTheme)}
 >
-  <App />
+  {children}
 </SpacemanThemeProvider>
 ```
 
@@ -157,7 +281,7 @@ Standalone hook for theme management and animations.
 const { theme, colorTheme, switchTheme, setColorTheme, toggleTheme, ref } = useThemeAnimation({
   themes: ['light', 'dark', 'system'],
   colorThemes: ['default', 'blue', 'green', 'purple'],
-  animationType: ThemeAnimationType.SCALE,
+  animationType: ThemeAnimationType.SLIDE,
   duration: 800,
   onThemeChange: theme => console.log('Theme changed:', theme),
   onColorThemeChange: colorTheme => console.log('Color changed:', colorTheme),
@@ -166,17 +290,18 @@ const { theme, colorTheme, switchTheme, setColorTheme, toggleTheme, ref } = useT
 
 #### Options
 
-| Property             | Type                               | Default                       | Description                           |
-| -------------------- | ---------------------------------- | ----------------------------- | ------------------------------------- |
-| `themes`             | `Theme[]`                          | `['light', 'dark', 'system']` | Available themes                      |
-| `colorThemes`        | `ColorTheme[]`                     | `['default']`                 | Available color themes                |
-| `theme`              | `Theme`                            | `'system'`                    | Initial theme                         |
-| `colorTheme`         | `ColorTheme`                       | `'default'`                   | Initial color theme                   |
-| `animationType`      | `ThemeAnimationType`               | `ThemeAnimationType.CIRCLE`   | Animation type                        |
-| `duration`           | `number`                           | `500`                         | Animation duration in ms              |
-| `blurAmount`         | `number`                           | `2`                           | Blur amount for blur-circle animation |
-| `onThemeChange`      | `(theme: Theme) => void`           | -                             | Theme change callback                 |
-| `onColorThemeChange` | `(colorTheme: ColorTheme) => void` | -                             | Color theme change callback           |
+| Property             | Type                               | Default                       | Description                                         |
+| -------------------- | ---------------------------------- | ----------------------------- | --------------------------------------------------- |
+| `themes`             | `Theme[]`                          | `['light', 'dark', 'system']` | Available themes                                    |
+| `colorThemes`        | `ColorTheme[]`                     | `['default']`                 | Available color themes                              |
+| `theme`              | `Theme`                            | `'system'`                    | Initial theme                                       |
+| `colorTheme`         | `ColorTheme`                       | `'default'`                   | Initial color theme                                 |
+| `animationType`      | `ThemeAnimationType`               | `ThemeAnimationType.CIRCLE`   | Animation type. Options: CIRCLE, BLUR_CIRCLE, SLIDE |
+| `duration`           | `number`                           | `500`                         | Animation duration in ms                            |
+| `blurAmount`         | `number`                           | `2`                           | Blur amount for blur-circle animation               |
+| `onThemeChange`      | `(theme: Theme) => void`           | -                             | Theme change callback                               |
+| `onColorThemeChange` | `(colorTheme: ColorTheme) => void` | -                             | Color theme change callback                         |
+| `slideDirection`     | `SlideDirection`                   | `left`                        | Animation slide direction                           |
 
 #### Return
 
@@ -316,46 +441,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/hooks/use-theme-animation.js

@@ -7,7 +7,9 @@ const types_1 = require("../types");
 const animations_1 = require("../utils/animations");
 const isBrowser = typeof window !== 'undefined';
 const useThemeAnimation = (props = {}) => {
-    const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = types_1.ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, } = props;
+    const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = types_1.ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, 
+    // Slide animation options
+    slideDirection = 'left', slideFromX, slideFromY, slideToX = 0, slideToY = 0, } = props;
     const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
     const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
     const [mounted, setMounted] = (0, react_1.useState)(false);
@@ -100,21 +102,69 @@ const useThemeAnimation = (props = {}) => {
             setTheme(newTheme);
             return;
         }
-        const { top, left, width, height } = ref.current.getBoundingClientRect();
-        const x = left + width / 2;
-        const y = top + height / 2;
-        const animationConfig = {
-            x,
-            y,
-            duration,
-            easing,
-            animationType,
-            blurAmount,
-            styleId,
+        // Helper function to convert direction to from coordinates
+        const getSlideFromCoords = (direction) => {
+            switch (direction) {
+                case 'left':
+                    return { a: -100, b: 0 };
+                case 'right':
+                    return { a: 100, b: 0 };
+                case 'top':
+                    return { a: 0, b: -100 };
+                case 'bottom':
+                    return { a: 0, b: 100 };
+                case 'top-left':
+                    return { a: -100, b: -100 };
+                case 'top-right':
+                    return { a: 100, b: -100 };
+                case 'bottom-left':
+                    return { a: -100, b: 100 };
+                case 'bottom-right':
+                    return { a: 100, b: 100 };
+                default:
+                    return { a: -100, b: 0 };
+            }
         };
+        let animationConfig;
+        if (animationType === types_1.ThemeAnimationType.SLIDE) {
+            // Use custom coordinates if provided, otherwise use direction
+            const fromCoords = slideFromX !== undefined && slideFromY !== undefined
+                ? { a: slideFromX, b: slideFromY }
+                : getSlideFromCoords(slideDirection);
+            animationConfig = {
+                a: fromCoords.a,
+                b: fromCoords.b,
+                x: slideToX,
+                y: slideToY,
+                duration,
+                easing,
+                animationType,
+                blurAmount,
+                styleId,
+            };
+        }
+        else {
+            // For circle and blur circle animations, use button center
+            const { top, left, width, height } = ref.current.getBoundingClientRect();
+            const x = left + width / 2;
+            const y = top + height / 2;
+            animationConfig = {
+                x,
+                y,
+                duration,
+                easing,
+                animationType,
+                blurAmount,
+                styleId,
+            };
+        }
         if (animationType === types_1.ThemeAnimationType.BLUR_CIRCLE) {
             (0, animations_1.createBlurCircleAnimation)(animationConfig);
         }
+        if (animationType === types_1.ThemeAnimationType.SLIDE) {
+            (0, animations_1.createSlideAnimation)(animationConfig);
+        }
+        // Start the view transition
         await document.startViewTransition(() => {
             (0, react_dom_1.flushSync)(() => {
                 setTheme(newTheme);
@@ -123,7 +173,19 @@ const useThemeAnimation = (props = {}) => {
         if (animationType === types_1.ThemeAnimationType.CIRCLE) {
             (0, animations_1.createCircleAnimation)(animationConfig);
         }
-    }, [setTheme, duration, easing, animationType, blurAmount, styleId]);
+    }, [
+        setTheme,
+        duration,
+        easing,
+        animationType,
+        blurAmount,
+        styleId,
+        slideDirection,
+        slideFromX,
+        slideFromY,
+        slideToX,
+        slideToY,
+    ]);
     const toggleTheme = (0, react_1.useCallback)(async () => {
         const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
         await switchTheme(newTheme);

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/cjs/types/index.d.ts

@@ -1,8 +1,10 @@
 import { RefObject } from 'react';
 export declare enum ThemeAnimationType {
     CIRCLE = "circle",
-    BLUR_CIRCLE = "blur-circle"
+    BLUR_CIRCLE = "blur-circle",
+    SLIDE = "slide"
 }
+export type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type Theme = 'light' | 'dark' | 'system';
 export type ColorTheme = string;
 export interface UseThemeAnimationProps {
@@ -23,6 +25,11 @@ export interface UseThemeAnimationProps {
     colorTheme?: ColorTheme;
     onThemeChange?: (theme: Theme) => void;
     onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    slideDirection?: SlideDirection;
+    slideFromX?: number;
+    slideFromY?: number;
+    slideToX?: number;
+    slideToY?: number;
 }
 export interface UseThemeAnimationReturn {
     ref: RefObject<HTMLButtonElement | null>;

package/dist/cjs/types/index.js

@@ -5,4 +5,5 @@ var ThemeAnimationType;
 (function (ThemeAnimationType) {
     ThemeAnimationType["CIRCLE"] = "circle";
     ThemeAnimationType["BLUR_CIRCLE"] = "blur-circle";
+    ThemeAnimationType["SLIDE"] = "slide";
 })(ThemeAnimationType || (exports.ThemeAnimationType = ThemeAnimationType = {}));

package/dist/cjs/utils/animations.d.ts

@@ -6,6 +6,8 @@ export declare const resolveTheme: (theme: string) => "light" | "dark";
 export declare const supportsViewTransitions: () => boolean;
 export declare const prefersReducedMotion: () => boolean;
 export interface AnimationConfig {
+    a?: number;
+    b?: number;
     x: number;
     y: number;
     duration: number;
@@ -15,4 +17,5 @@ export interface AnimationConfig {
     styleId: string;
 }
 export declare const createCircleAnimation: (config: AnimationConfig) => void;
+export declare const createSlideAnimation: (config: AnimationConfig) => void;
 export declare const createBlurCircleAnimation: (config: AnimationConfig) => void;

package/dist/cjs/utils/animations.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createBlurCircleAnimation = exports.createCircleAnimation = exports.prefersReducedMotion = exports.supportsViewTransitions = exports.resolveTheme = exports.getSystemTheme = exports.createBlurCircleMask = exports.injectBaseStyles = void 0;
+exports.createBlurCircleAnimation = exports.createSlideAnimation = exports.createCircleAnimation = exports.prefersReducedMotion = exports.supportsViewTransitions = exports.resolveTheme = exports.getSystemTheme = exports.createBlurCircleMask = exports.injectBaseStyles = void 0;
 const isBrowser = typeof window !== 'undefined';
 const injectBaseStyles = () => {
     if (isBrowser) {
@@ -81,6 +81,39 @@ const createCircleAnimation = (config) => {
     });
 };
 exports.createCircleAnimation = createCircleAnimation;
+const createSlideAnimation = (config) => {
+    const { a = -100, b = 0, x = 0, y = 0, duration, styleId } = config;
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.textContent = `
+    ::view-transition-old(root) {
+      animation-delay: ${duration}ms;
+    }
+    
+    ::view-transition-new(root) {
+      animation: move-in ${duration}ms;
+      animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
+    }
+    
+    @keyframes move-in {
+      from {
+        translate: ${a}% ${b}%;
+      }
+      to {
+        translate: ${x}% ${y}%;
+      }
+    }
+  `;
+    document.head.appendChild(styleElement);
+    // Clean up after animation
+    setTimeout(() => {
+        const styleElement = document.getElementById(styleId);
+        if (styleElement) {
+            styleElement.remove();
+        }
+    }, duration);
+};
+exports.createSlideAnimation = createSlideAnimation;
 const createBlurCircleAnimation = (config) => {
     const { x, y, duration, easing, blurAmount, styleId } = config;
     const existingStyle = document.getElementById(styleId);

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/hooks/use-theme-animation.js

@@ -1,10 +1,12 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
 import { flushSync } from 'react-dom';
 import { ThemeAnimationType, } from '../types';
-import { injectBaseStyles, resolveTheme, getSystemTheme, supportsViewTransitions, prefersReducedMotion, createCircleAnimation, createBlurCircleAnimation, } from '../utils/animations';
+import { injectBaseStyles, resolveTheme, getSystemTheme, supportsViewTransitions, prefersReducedMotion, createCircleAnimation, createBlurCircleAnimation, createSlideAnimation, } from '../utils/animations';
 const isBrowser = typeof window !== 'undefined';
 export const useThemeAnimation = (props = {}) => {
-    const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, } = props;
+    const { duration: propsDuration = 750, easing = 'ease-in-out', animationType = ThemeAnimationType.CIRCLE, blurAmount = 2, styleId = 'spaceman-theme-style', themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', globalClassName = 'dark', colorThemePrefix = 'theme-', storageKey = 'theme', colorStorageKey = 'color-theme', theme: externalTheme, colorTheme: externalColorTheme, onThemeChange, onColorThemeChange, 
+    // Slide animation options
+    slideDirection = 'left', slideFromX, slideFromY, slideToX = 0, slideToY = 0, } = props;
     const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
     const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
     const [mounted, setMounted] = useState(false);
@@ -97,21 +99,69 @@ export const useThemeAnimation = (props = {}) => {
             setTheme(newTheme);
             return;
         }
-        const { top, left, width, height } = ref.current.getBoundingClientRect();
-        const x = left + width / 2;
-        const y = top + height / 2;
-        const animationConfig = {
-            x,
-            y,
-            duration,
-            easing,
-            animationType,
-            blurAmount,
-            styleId,
+        // Helper function to convert direction to from coordinates
+        const getSlideFromCoords = (direction) => {
+            switch (direction) {
+                case 'left':
+                    return { a: -100, b: 0 };
+                case 'right':
+                    return { a: 100, b: 0 };
+                case 'top':
+                    return { a: 0, b: -100 };
+                case 'bottom':
+                    return { a: 0, b: 100 };
+                case 'top-left':
+                    return { a: -100, b: -100 };
+                case 'top-right':
+                    return { a: 100, b: -100 };
+                case 'bottom-left':
+                    return { a: -100, b: 100 };
+                case 'bottom-right':
+                    return { a: 100, b: 100 };
+                default:
+                    return { a: -100, b: 0 };
+            }
         };
+        let animationConfig;
+        if (animationType === ThemeAnimationType.SLIDE) {
+            // Use custom coordinates if provided, otherwise use direction
+            const fromCoords = slideFromX !== undefined && slideFromY !== undefined
+                ? { a: slideFromX, b: slideFromY }
+                : getSlideFromCoords(slideDirection);
+            animationConfig = {
+                a: fromCoords.a,
+                b: fromCoords.b,
+                x: slideToX,
+                y: slideToY,
+                duration,
+                easing,
+                animationType,
+                blurAmount,
+                styleId,
+            };
+        }
+        else {
+            // For circle and blur circle animations, use button center
+            const { top, left, width, height } = ref.current.getBoundingClientRect();
+            const x = left + width / 2;
+            const y = top + height / 2;
+            animationConfig = {
+                x,
+                y,
+                duration,
+                easing,
+                animationType,
+                blurAmount,
+                styleId,
+            };
+        }
         if (animationType === ThemeAnimationType.BLUR_CIRCLE) {
             createBlurCircleAnimation(animationConfig);
         }
+        if (animationType === ThemeAnimationType.SLIDE) {
+            createSlideAnimation(animationConfig);
+        }
+        // Start the view transition
         await document.startViewTransition(() => {
             flushSync(() => {
                 setTheme(newTheme);
@@ -120,7 +170,19 @@ export const useThemeAnimation = (props = {}) => {
         if (animationType === ThemeAnimationType.CIRCLE) {
             createCircleAnimation(animationConfig);
         }
-    }, [setTheme, duration, easing, animationType, blurAmount, styleId]);
+    }, [
+        setTheme,
+        duration,
+        easing,
+        animationType,
+        blurAmount,
+        styleId,
+        slideDirection,
+        slideFromX,
+        slideFromY,
+        slideToX,
+        slideToY,
+    ]);
     const toggleTheme = useCallback(async () => {
         const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
         await switchTheme(newTheme);

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/dist/esm/types/index.d.ts

@@ -1,8 +1,10 @@
 import { RefObject } from 'react';
 export declare enum ThemeAnimationType {
     CIRCLE = "circle",
-    BLUR_CIRCLE = "blur-circle"
+    BLUR_CIRCLE = "blur-circle",
+    SLIDE = "slide"
 }
+export type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export type Theme = 'light' | 'dark' | 'system';
 export type ColorTheme = string;
 export interface UseThemeAnimationProps {
@@ -23,6 +25,11 @@ export interface UseThemeAnimationProps {
     colorTheme?: ColorTheme;
     onThemeChange?: (theme: Theme) => void;
     onColorThemeChange?: (colorTheme: ColorTheme) => void;
+    slideDirection?: SlideDirection;
+    slideFromX?: number;
+    slideFromY?: number;
+    slideToX?: number;
+    slideToY?: number;
 }
 export interface UseThemeAnimationReturn {
     ref: RefObject<HTMLButtonElement | null>;

package/dist/esm/types/index.js

@@ -2,4 +2,5 @@ export var ThemeAnimationType;
 (function (ThemeAnimationType) {
     ThemeAnimationType["CIRCLE"] = "circle";
     ThemeAnimationType["BLUR_CIRCLE"] = "blur-circle";
+    ThemeAnimationType["SLIDE"] = "slide";
 })(ThemeAnimationType || (ThemeAnimationType = {}));

package/dist/esm/utils/animations.d.ts

@@ -6,6 +6,8 @@ export declare const resolveTheme: (theme: string) => "light" | "dark";
 export declare const supportsViewTransitions: () => boolean;
 export declare const prefersReducedMotion: () => boolean;
 export interface AnimationConfig {
+    a?: number;
+    b?: number;
     x: number;
     y: number;
     duration: number;
@@ -15,4 +17,5 @@ export interface AnimationConfig {
     styleId: string;
 }
 export declare const createCircleAnimation: (config: AnimationConfig) => void;
+export declare const createSlideAnimation: (config: AnimationConfig) => void;
 export declare const createBlurCircleAnimation: (config: AnimationConfig) => void;

package/dist/esm/utils/animations.js

@@ -71,6 +71,38 @@ export const createCircleAnimation = (config) => {
         pseudoElement: '::view-transition-new(root)',
     });
 };
+export const createSlideAnimation = (config) => {
+    const { a = -100, b = 0, x = 0, y = 0, duration, styleId } = config;
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.textContent = `
+    ::view-transition-old(root) {
+      animation-delay: ${duration}ms;
+    }
+    
+    ::view-transition-new(root) {
+      animation: move-in ${duration}ms;
+      animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
+    }
+    
+    @keyframes move-in {
+      from {
+        translate: ${a}% ${b}%;
+      }
+      to {
+        translate: ${x}% ${y}%;
+      }
+    }
+  `;
+    document.head.appendChild(styleElement);
+    // Clean up after animation
+    setTimeout(() => {
+        const styleElement = document.getElementById(styleId);
+        if (styleElement) {
+            styleElement.remove();
+        }
+    }, duration);
+};
 export const createBlurCircleAnimation = (config) => {
     const { x, y, duration, easing, blurAmount, styleId } = config;
     const existingStyle = document.getElementById(styleId);

package/package.json

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