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

package/README.md

@@ -1,10 +1,13 @@
 # @space-man/react-theme-animation
 
-React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
+https://github.com/user-attachments/assets/2819cf70-c474-478e-b821-6b26457c8d4a
 
-## Demo
+React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
-<video src="https://tonyedgal.github.io/spaceman-react-theme-animation/Demo.mov" controls width="600" loop autoplay muted></video>
+<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
 
@@ -278,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),
@@ -287,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
 

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/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/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/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.4",
+  "version": "1.1.0",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",