@space-man/react-theme-animation 1.0.0

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

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,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 { ThemeAnimationType } from './types';
+export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/types/index.d.ts

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

package/dist/types/index.js

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

package/dist/utils/animations.d.ts

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

package/dist/utils/animations.js

@@ -0,0 +1,145 @@
+const isBrowser = typeof window !== 'undefined';
+export const injectBaseStyles = () => {
+    if (isBrowser) {
+        const styleId = 'spaceman-theme-base-style';
+        if (!document.getElementById(styleId)) {
+            const style = document.createElement('style');
+            style.id = styleId;
+            const isHighResolution = window.innerWidth >= 3000 || window.innerHeight >= 2000;
+            style.textContent = `
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          animation: none;
+          mix-blend-mode: normal;
+          ${isHighResolution ? 'transform: translateZ(0);' : ''}
+        }
+        
+        ${isHighResolution
+                ? `
+        ::view-transition-group(root),
+        ::view-transition-image-pair(root),
+        ::view-transition-old(root),
+        ::view-transition-new(root) {
+          backface-visibility: hidden;
+          perspective: 1000px;
+          transform: translate3d(0, 0, 0);
+        }
+        `
+                : ''}
+      `;
+            document.head.appendChild(style);
+        }
+    }
+};
+export const createBlurCircleMask = (blur) => {
+    const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
+    const blurFilter = `<filter id="blur"><feGaussianBlur stdDeviation="${blur}" /></filter>`;
+    const circleRadius = isHighResolution ? 20 : 25;
+    return `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"><defs>${blurFilter}</defs><circle cx="0" cy="0" r="${circleRadius}" fill="white" filter="url(%23blur)"/></svg>')`;
+};
+export const getSystemTheme = () => {
+    if (!isBrowser)
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+export const resolveTheme = (theme) => {
+    if (theme === 'system') {
+        return getSystemTheme();
+    }
+    return theme === 'dark' ? 'dark' : 'light';
+};
+export const supportsViewTransitions = () => {
+    return isBrowser && 'startViewTransition' in document;
+};
+export const prefersReducedMotion = () => {
+    return isBrowser && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+};
+export const createCircleAnimation = (config) => {
+    const { x, y, duration, easing } = config;
+    // Calculate the distance to each corner of the viewport
+    const topLeft = Math.hypot(x, y);
+    const topRight = Math.hypot(window.innerWidth - x, y);
+    const bottomLeft = Math.hypot(x, window.innerHeight - y);
+    const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y);
+    // Find the maximum distance to ensure animation covers the entire viewport
+    const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight);
+    document.documentElement.animate({
+        clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxRadius}px at ${x}px ${y}px)`],
+    }, {
+        duration,
+        easing,
+        pseudoElement: '::view-transition-new(root)',
+    });
+};
+export const createBlurCircleAnimation = (config) => {
+    const { x, y, duration, easing, blurAmount, styleId } = config;
+    const existingStyle = document.getElementById(styleId);
+    if (existingStyle) {
+        existingStyle.remove();
+    }
+    const viewportSize = Math.max(window.innerWidth, window.innerHeight) + 200;
+    const isHighResolution = window.innerWidth >= 3000 || window.innerHeight >= 2000;
+    const scaleFactor = isHighResolution ? 2.5 : 4;
+    const optimalMaskSize = isHighResolution
+        ? Math.min(viewportSize * scaleFactor, 5000)
+        : viewportSize * scaleFactor;
+    const topLeft = Math.hypot(x, y);
+    const topRight = Math.hypot(window.innerWidth - x, y);
+    const bottomLeft = Math.hypot(x, window.innerHeight - y);
+    const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y);
+    const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight);
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    const blurFactor = isHighResolution ? 1.5 : 1.2;
+    const finalMaskSize = Math.max(optimalMaskSize, maxRadius * 2.5);
+    styleElement.textContent = `
+    ::view-transition-group(root) {
+      animation-duration: ${duration}ms;
+      animation-timing-function: ${isHighResolution
+        ? 'cubic-bezier(0.2, 0, 0.2, 1)'
+        : 'linear(' +
+            '0 0%, 0.2342 12.49%, 0.4374 24.99%,' +
+            '0.6093 37.49%, 0.6835 43.74%,' +
+            '0.7499 49.99%, 0.8086 56.25%,' +
+            '0.8593 62.5%, 0.9023 68.75%, 0.9375 75%,' +
+            '0.9648 81.25%, 0.9844 87.5%,' +
+            '0.9961 93.75%, 1 100%' +
+            ')'};
+      will-change: transform;
+    }
+    
+    ::view-transition-new(root) {
+      mask: ${createBlurCircleMask(blurAmount * blurFactor)} 0 0 / 100% 100% no-repeat;
+      mask-position: ${x}px ${y}px;
+      animation: spaceman-mask-scale ${duration}ms ${easing};
+      transform-origin: ${x}px ${y}px;
+      will-change: mask-size, mask-position;
+    }
+    
+    ::view-transition-old(root),
+    .dark::view-transition-old(root) {
+      animation: spaceman-mask-scale ${duration}ms ${easing};
+      transform-origin: ${x}px ${y}px;
+      z-index: -1;
+      will-change: mask-size, mask-position;
+    }
+    
+    @keyframes spaceman-mask-scale {
+      0% {
+        mask-size: 0px;
+        mask-position: ${x}px ${y}px;
+      }
+      100% {
+        mask-size: ${finalMaskSize}px;
+        mask-position: ${x - finalMaskSize / 2}px ${y - finalMaskSize / 2}px;
+      }
+    }
+  `;
+    document.head.appendChild(styleElement);
+    setTimeout(() => {
+        const styleElement = document.getElementById(styleId);
+        if (styleElement) {
+            styleElement.remove();
+        }
+    }, duration);
+};

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@space-man/react-theme-animation",
+  "version": "1.0.0",
+  "description": "React theme switching with smooth view transition animations and multi-theme support",
+  "keywords": [
+    "react",
+    "reactjs",
+    "hooks",
+    "theme",
+    "animation",
+    "switch",
+    "typescript",
+    "nextjs",
+    "dark",
+    "light",
+    "view-transition",
+    "tailwindcss",
+    "shadcn"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tonyedgal/spaceman-react-theme-animation.git"
+  },
+  "homepage": "https://github.com/tonyedgal/spaceman-react-theme-animation#readme",
+  "bugs": {
+    "url": "https://github.com/tonyedgal/spaceman-react-theme-animation/issues"
+  },
+  "license": "MIT",
+  "author": "tonyedgal",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "scripts": {
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc --module esnext --outDir dist/esm",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "dev": "tsc --watch",
+    "format": "prettier --write . --config ./.prettierrc",
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "eslint --fix . --ext .{js,jsx,ts,tsx}",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17",
+    "motion": ">=11",
+    "@radix-ui/react-select": ">=2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  }
+}