@space-man/react-theme-animation 2.3.0 → 3.0.1

package/dist/tanstack/index.d.ts

@@ -1,5 +1,5 @@
-import { Theme, ColorTheme } from '../core/index.js';
-export { resolveThemeForServer } from '../core/index.js';
+import { c as Theme, C as ColorTheme } from '../animations-BrxKLW8D.js';
+export { o as resolveThemeForServer } from '../animations-BrxKLW8D.js';
 import 'react';
 
 declare const STORAGE_KEY = "theme";
@@ -8,13 +8,13 @@ declare const GLOBAL_CLASS_NAME = "dark";
 declare const COLOR_THEME_PREFIX = "theme-";
 type ServerResolvedTheme = 'light' | 'dark' | 'system';
 interface ServerThemeData {
-    theme: ServerResolvedTheme;
-    themePreference: Theme;
-    colorTheme: ColorTheme;
+    readonly theme: ServerResolvedTheme;
+    readonly themePreference: Theme;
+    readonly colorTheme: ColorTheme;
 }
 declare function buildServerThemeData(themeCookie: string | undefined, colorThemeCookie: string | undefined, options?: {
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
 }): ServerThemeData;
 
 export { COLOR_STORAGE_KEY, COLOR_THEME_PREFIX, ColorTheme, GLOBAL_CLASS_NAME, STORAGE_KEY, type ServerResolvedTheme, type ServerThemeData, Theme, buildServerThemeData };

package/dist/tanstack/index.js

@@ -1,27 +1 @@
-// src/core/utils/animations.ts
-var resolveThemeForServer = (theme) => {
-  if (theme === "system") {
-    return "system";
-  }
-  return theme === "dark" ? "dark" : "light";
-};
-
-// src/tanstack/helpers.ts
-var STORAGE_KEY = "theme";
-var COLOR_STORAGE_KEY = "color-theme";
-var GLOBAL_CLASS_NAME = "dark";
-var COLOR_THEME_PREFIX = "theme-";
-function buildServerThemeData(themeCookie, colorThemeCookie, options = {}) {
-  const { defaultTheme = "system", defaultColorTheme = "default" } = options;
-  const themePreference = themeCookie ?? defaultTheme;
-  const colorTheme = colorThemeCookie ?? defaultColorTheme;
-  return {
-    theme: resolveThemeForServer(themePreference),
-    themePreference,
-    colorTheme
-  };
-}
-
-export { COLOR_STORAGE_KEY, COLOR_THEME_PREFIX, GLOBAL_CLASS_NAME, STORAGE_KEY, buildServerThemeData, resolveThemeForServer };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+export{b as COLOR_STORAGE_KEY,d as COLOR_THEME_PREFIX,c as GLOBAL_CLASS_NAME,a as STORAGE_KEY,e as buildServerThemeData}from'../chunk-QYUMCBTQ.js';export{d as resolveThemeForServer}from'../chunk-I3T2QXRT.js';

package/package.json

@@ -1,120 +1,110 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "2.3.0",
+  "version": "3.0.1",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
-  "type": "module",
-  "sideEffects": false,
   "keywords": [
-    "react",
-    "theme",
+    "animation",
+    "dark",
     "dark mode",
-    "light mode",
-    "theme switching",
-    "view transitions",
     "hooks",
-    "animation",
+    "light",
+    "light mode",
+    "nextjs",
+    "react",
+    "reactjs",
+    "shadcn",
     "switch",
+    "tailwind",
+    "tailwindcss",
+    "theme",
+    "theme switching",
     "typescript",
-    "dark",
-    "light",
+    "view transitions",
     "view-transition",
     "view-transition-api",
-    "tailwind",
-    "tailwindcss",
-    "shadcn",
-    "reactjs",
-    "nextjs",
     "vite"
   ],
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/",
-    "access": "public",
-    "provenance": true
-  },
-  "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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tonyedgal/spaceman-react-theme-animation.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": {
         "types": "./dist/index.d.ts",
         "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
       }
     },
     "./core": {
       "import": {
         "types": "./dist/core/index.d.ts",
         "default": "./dist/core/index.js"
-      },
-      "require": {
-        "types": "./dist/core/index.d.cts",
-        "default": "./dist/core/index.cjs"
       }
     },
     "./react": {
       "import": {
         "types": "./dist/react/index.d.ts",
         "default": "./dist/react/index.js"
-      },
-      "require": {
-        "types": "./dist/react/index.d.cts",
-        "default": "./dist/react/index.cjs"
       }
     },
     "./tanstack": {
       "import": {
         "types": "./dist/tanstack/index.d.ts",
         "default": "./dist/tanstack/index.js"
-      },
-      "require": {
-        "types": "./dist/tanstack/index.d.cts",
-        "default": "./dist/tanstack/index.cjs"
       }
     },
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ],
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17",
-    "motion": ">=11",
-    "@radix-ui/react-select": ">=2"
-  },
-  "devDependencies": {
-    "@radix-ui/react-select": "^2.2.6",
-    "@types/react": "^19.2.0",
-    "@types/react-dom": "^19.2.0",
-    "motion": "^12.27.1",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+  "publishConfig": {
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
     "clsx": "^2.1.1"
   },
+  "devDependencies": {
+    "@playwright/test": "1.63.0",
+    "@radix-ui/react-select": "^2.3.7",
+    "@types/node": "^26.6.4",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "motion": "^14.0.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "vite": "^8.3.2",
+    "zod": "^4.6.5"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-select": ">=2",
+    "motion": ">=12",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
   "scripts": {
     "build": "tsup && node scripts/mark-react-client.mjs",
+    "clean": "rm -rf dist",
     "dev": "tsup --watch",
-    "lint": "eslint .",
     "test": "node scripts/smoke-subpath-imports.mjs",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist"
+    "test:browser": "playwright test",
+    "test:types": "tsc --noEmit -p tests/tsconfig.json",
+    "test:unit": "node --test tests/*.test.mjs",
+    "typecheck": "tsc --noEmit"
   }
 }

package/dist/core/index.cjs

@@ -1,74 +0,0 @@
-'use strict';
-
-// src/core/types/index.ts
-var ThemeAnimationType = /* @__PURE__ */ ((ThemeAnimationType2) => {
-  ThemeAnimationType2["CIRCLE"] = "circle";
-  ThemeAnimationType2["BLUR_CIRCLE"] = "blur-circle";
-  ThemeAnimationType2["SLIDE"] = "slide";
-  return ThemeAnimationType2;
-})(ThemeAnimationType || {});
-
-// src/core/utils/animations.ts
-var isBrowser = typeof window !== "undefined";
-var 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 >= 3e3 || window.innerHeight >= 2e3;
-      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);
-    }
-  }
-};
-var getSystemTheme = () => {
-  if (!isBrowser) return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-};
-var resolveTheme = (theme) => {
-  if (theme === "system") {
-    return getSystemTheme();
-  }
-  return theme === "dark" ? "dark" : "light";
-};
-var resolveThemeForServer = (theme) => {
-  if (theme === "system") {
-    return "system";
-  }
-  return theme === "dark" ? "dark" : "light";
-};
-var supportsViewTransitions = () => {
-  return isBrowser && "startViewTransition" in document;
-};
-var prefersReducedMotion = () => {
-  return isBrowser && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-};
-
-exports.ThemeAnimationType = ThemeAnimationType;
-exports.getSystemTheme = getSystemTheme;
-exports.injectBaseStyles = injectBaseStyles;
-exports.prefersReducedMotion = prefersReducedMotion;
-exports.resolveTheme = resolveTheme;
-exports.resolveThemeForServer = resolveThemeForServer;
-exports.supportsViewTransitions = supportsViewTransitions;
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

package/dist/core/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/types/index.ts","../../src/core/utils/animations.ts"],"names":["ThemeAnimationType"],"mappings":";;;AAEO,IAAK,kBAAA,qBAAAA,mBAAAA,KAAL;AACL,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,aAAA,CAAA,GAAc,aAAA;AACd,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AAHE,EAAA,OAAAA,mBAAAA;AAAA,CAAA,EAAA,kBAAA,IAAA,EAAA;;;ACAZ,IAAM,SAAA,GAAY,OAAO,MAAA,KAAW,WAAA;AAE7B,IAAM,mBAAmB,MAAY;AAC1C,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,MAAM,OAAA,GAAU,2BAAA;AAChB,IAAA,IAAI,CAAC,QAAA,CAAS,cAAA,CAAe,OAAO,CAAA,EAAG;AACrC,MAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC5C,MAAA,KAAA,CAAM,EAAA,GAAK,OAAA;AACX,MAAA,MAAM,gBAAA,GACJ,MAAA,CAAO,UAAA,IAAc,GAAA,IAAQ,OAAO,WAAA,IAAe,GAAA;AAErD,MAAA,KAAA,CAAM,WAAA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAKd,gBAAA,GAAmB,8BAA8B,EAAE;AAAA;AAAA;AAAA,QAAA,EAIrD,gBAAA,GACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA,GAUA,EACN;AAAA,MAAA,CAAA;AAEF,MAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AAAA,IACjC;AAAA,EACF;AACF;AAYO,IAAM,iBAAiB,MAAwB;AACpD,EAAA,IAAI,CAAC,WAAW,OAAO,OAAA;AACvB,EAAA,OAAO,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,UACrD,MAAA,GACA,OAAA;AACN;AAEO,IAAM,YAAA,GAAe,CAAC,KAAA,KAAoC;AAC/D,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,cAAA,EAAe;AAAA,EACxB;AACA,EAAA,OAAO,KAAA,KAAU,SAAS,MAAA,GAAS,OAAA;AACrC;AAEO,IAAM,qBAAA,GAAwB,CACnC,KAAA,KACgC;AAChC,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAO,KAAA,KAAU,SAAS,MAAA,GAAS,OAAA;AACrC;AAEO,IAAM,0BAA0B,MAAe;AACpD,EAAA,OAAO,aAAa,qBAAA,IAAyB,QAAA;AAC/C;AAEO,IAAM,uBAAuB,MAAe;AACjD,EAAA,OACE,SAAA,IAAa,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAEvE","file":"index.cjs","sourcesContent":["import { RefObject } from 'react'\n\nexport enum ThemeAnimationType {\n  CIRCLE = 'circle',\n  BLUR_CIRCLE = 'blur-circle',\n  SLIDE = 'slide',\n}\n\nexport type SlideDirection =\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'bottom'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = string\nexport type SystemThemeMode = 'css' | 'js'\n\nexport interface UseThemeAnimationProps {\n  duration?: number\n  easing?: string\n  animationType?: ThemeAnimationType\n  blurAmount?: number\n  styleId?: string\n\n  themes?: Theme[]\n  colorThemes?: ColorTheme[]\n  defaultTheme?: Theme\n  defaultColorTheme?: ColorTheme\n\n  globalClassName?: string\n  colorThemePrefix?: string\n  attribute?: 'class' | 'data-theme'\n  value?: Record<string, string>\n  enableColorScheme?: boolean\n\n  storageKey?: string\n  colorStorageKey?: string\n\n  theme?: Theme\n  colorTheme?: ColorTheme\n\n  onThemeChange?: (theme: Theme) => void\n  onColorThemeChange?: (colorTheme: ColorTheme) => void\n\n  initialTheme?: Theme\n  initialColorTheme?: ColorTheme\n  systemThemeMode?: SystemThemeMode\n\n  // Slide animation options (only valid when animationType is SLIDE)\n  slideDirection?: SlideDirection\n  slideFromX?: number // custom from translate X (%)\n  slideFromY?: number // custom from translate Y (%)\n  slideToX?: number // custom to translate X (%)\n  slideToY?: number // custom to translate Y (%)\n}\n\nexport interface UseThemeAnimationReturn {\n  ref: RefObject<HTMLButtonElement | null>\n\n  theme: Theme\n  colorTheme: ColorTheme\n  resolvedTheme: 'light' | 'dark'\n  systemTheme: 'light' | 'dark'\n\n  setTheme: (theme: Theme) => void\n  setColorTheme: (colorTheme: ColorTheme) => void\n\n  switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>\n  switchColorTheme: (colorTheme: string) => void\n\n  toggleTheme: (animationOff?: boolean) => Promise<void>\n  toggleLightTheme: (animationOff?: boolean) => Promise<void>\n  toggleDarkTheme: (animationOff?: boolean) => Promise<void>\n  toggleColorTheme: () => void\n\n  createColorThemeToggle: (targetColorTheme: string) => () => void\n  isColorThemeActive: (targetColorTheme: string) => boolean\n}\n\nexport interface ThemeSwitcherProps {\n  themes?: Theme[]\n  currentTheme?: Theme\n  onThemeChange?: (theme: Theme) => void\n\n  animationType?: ThemeAnimationType\n  duration?: number\n\n  className?: string\n  size?: 'sm' | 'md' | 'lg'\n  variant?: 'default' | 'outline' | 'ghost'\n\n  icons?: {\n    light?: React.ReactNode\n    dark?: React.ReactNode\n    system?: React.ReactNode\n  }\n}\n\nexport interface ThemeSelectorProps {\n  themes?: Theme[]\n  colorThemes?: ColorTheme[]\n  currentTheme?: Theme\n  currentColorTheme?: ColorTheme\n\n  onThemeChange?: (theme: Theme) => void\n  onColorThemeChange?: (colorTheme: ColorTheme) => void\n\n  animationType?: ThemeAnimationType\n  duration?: number\n\n  className?: string\n  placeholder?: string\n\n  themeLabel?: string\n  colorThemeLabel?: string\n}\n","import { ThemeAnimationType } from '../types'\n\nconst isBrowser = typeof window !== 'undefined'\n\nexport const injectBaseStyles = (): void => {\n  if (isBrowser) {\n    const styleId = 'spaceman-theme-base-style'\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement('style')\n      style.id = styleId\n      const isHighResolution =\n        window.innerWidth >= 3000 || window.innerHeight >= 2000\n\n      style.textContent = `\n        ::view-transition-old(root),\n        ::view-transition-new(root) {\n          animation: none;\n          mix-blend-mode: normal;\n          ${isHighResolution ? 'transform: translateZ(0);' : ''}\n        }\n        \n        ${\n          isHighResolution\n            ? `\n        ::view-transition-group(root),\n        ::view-transition-image-pair(root),\n        ::view-transition-old(root),\n        ::view-transition-new(root) {\n          backface-visibility: hidden;\n          perspective: 1000px;\n          transform: translate3d(0, 0, 0);\n        }\n        `\n            : ''\n        }\n      `\n      document.head.appendChild(style)\n    }\n  }\n}\n\nexport const createBlurCircleMask = (blur: number): string => {\n  const isHighResolution =\n    isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000)\n\n  const blurFilter = `<filter id=\"blur\"><feGaussianBlur stdDeviation=\"${blur}\" /></filter>`\n  const circleRadius = isHighResolution ? 20 : 25\n\n  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>')`\n}\n\nexport const getSystemTheme = (): 'light' | 'dark' => {\n  if (!isBrowser) return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches\n    ? 'dark'\n    : 'light'\n}\n\nexport const resolveTheme = (theme: string): 'light' | 'dark' => {\n  if (theme === 'system') {\n    return getSystemTheme()\n  }\n  return theme === 'dark' ? 'dark' : 'light'\n}\n\nexport const resolveThemeForServer = (\n  theme: string\n): 'light' | 'dark' | 'system' => {\n  if (theme === 'system') {\n    return 'system'\n  }\n  return theme === 'dark' ? 'dark' : 'light'\n}\n\nexport const supportsViewTransitions = (): boolean => {\n  return isBrowser && 'startViewTransition' in document\n}\n\nexport const prefersReducedMotion = (): boolean => {\n  return (\n    isBrowser && window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  )\n}\n\nexport interface AnimationConfig {\n  a?: number\n  b?: number\n  x: number\n  y: number\n  duration: number\n  easing: string\n  animationType: ThemeAnimationType\n  blurAmount: number\n  styleId: string\n}\n\nexport const createCircleAnimation = (config: AnimationConfig): void => {\n  const { x, y, duration, easing } = config\n\n  // Calculate the distance to each corner of the viewport\n  const topLeft = Math.hypot(x, y)\n  const topRight = Math.hypot(window.innerWidth - x, y)\n  const bottomLeft = Math.hypot(x, window.innerHeight - y)\n  const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y)\n\n  // Find the maximum distance to ensure animation covers the entire viewport\n  const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight)\n\n  document.documentElement.animate(\n    {\n      clipPath: [\n        `circle(0px at ${x}px ${y}px)`,\n        `circle(${maxRadius}px at ${x}px ${y}px)`,\n      ],\n    },\n    {\n      duration,\n      easing,\n      pseudoElement: '::view-transition-new(root)',\n    }\n  )\n}\n\nexport const createSlideAnimation = (config: AnimationConfig): void => {\n  const { a = -100, b = 0, x = 0, y = 0, duration, styleId } = config\n\n  const styleElement = document.createElement('style')\n  styleElement.id = styleId\n\n  styleElement.textContent = `\n    ::view-transition-old(root) {\n      animation-delay: ${duration}ms;\n    }\n    \n    ::view-transition-new(root) {\n      animation: move-in ${duration}ms;\n      animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);\n    }\n    \n    @keyframes move-in {\n      from {\n        translate: ${a}% ${b}%;\n      }\n      to {\n        translate: ${x}% ${y}%;\n      }\n    }\n  `\n\n  document.head.appendChild(styleElement)\n\n  // Clean up after animation\n  setTimeout(() => {\n    const styleElement = document.getElementById(styleId)\n    if (styleElement) {\n      styleElement.remove()\n    }\n  }, duration)\n}\n\nexport const createBlurCircleAnimation = (config: AnimationConfig): void => {\n  const { x, y, duration, easing, blurAmount, styleId } = config\n\n  const existingStyle = document.getElementById(styleId)\n  if (existingStyle) {\n    existingStyle.remove()\n  }\n\n  const viewportSize = Math.max(window.innerWidth, window.innerHeight) + 200\n  const isHighResolution =\n    window.innerWidth >= 3000 || window.innerHeight >= 2000\n  const scaleFactor = isHighResolution ? 2.5 : 4\n  const optimalMaskSize = isHighResolution\n    ? Math.min(viewportSize * scaleFactor, 5000)\n    : viewportSize * scaleFactor\n\n  const topLeft = Math.hypot(x, y)\n  const topRight = Math.hypot(window.innerWidth - x, y)\n  const bottomLeft = Math.hypot(x, window.innerHeight - y)\n  const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y)\n  const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight)\n\n  const styleElement = document.createElement('style')\n  styleElement.id = styleId\n\n  const blurFactor = isHighResolution ? 1.5 : 1.2\n  const finalMaskSize = Math.max(optimalMaskSize, maxRadius * 2.5)\n\n  styleElement.textContent = `\n    ::view-transition-group(root) {\n      animation-duration: ${duration}ms;\n      animation-timing-function: ${\n        isHighResolution\n          ? 'cubic-bezier(0.2, 0, 0.2, 1)'\n          : 'linear(' +\n            '0 0%, 0.2342 12.49%, 0.4374 24.99%,' +\n            '0.6093 37.49%, 0.6835 43.74%,' +\n            '0.7499 49.99%, 0.8086 56.25%,' +\n            '0.8593 62.5%, 0.9023 68.75%, 0.9375 75%,' +\n            '0.9648 81.25%, 0.9844 87.5%,' +\n            '0.9961 93.75%, 1 100%' +\n            ')'\n      };\n      will-change: transform;\n    }\n    \n    ::view-transition-new(root) {\n      mask: ${createBlurCircleMask(blurAmount * blurFactor)} 0 0 / 100% 100% no-repeat;\n      mask-position: ${x}px ${y}px;\n      animation: spaceman-mask-scale ${duration}ms ${easing};\n      transform-origin: ${x}px ${y}px;\n      will-change: mask-size, mask-position;\n    }\n    \n    ::view-transition-old(root),\n    .dark::view-transition-old(root) {\n      animation: spaceman-mask-scale ${duration}ms ${easing};\n      transform-origin: ${x}px ${y}px;\n      z-index: -1;\n      will-change: mask-size, mask-position;\n    }\n    \n    @keyframes spaceman-mask-scale {\n      0% {\n        mask-size: 0px;\n        mask-position: ${x}px ${y}px;\n      }\n      100% {\n        mask-size: ${finalMaskSize}px;\n        mask-position: ${x - finalMaskSize / 2}px ${y - finalMaskSize / 2}px;\n      }\n    }\n  `\n\n  document.head.appendChild(styleElement)\n\n  setTimeout(() => {\n    const styleElement = document.getElementById(styleId)\n    if (styleElement) {\n      styleElement.remove()\n    }\n  }, duration)\n}\n"]}

package/dist/core/index.d.cts

@@ -1,96 +0,0 @@
-import { RefObject } from 'react';
-
-declare enum ThemeAnimationType {
-    CIRCLE = "circle",
-    BLUR_CIRCLE = "blur-circle",
-    SLIDE = "slide"
-}
-type SlideDirection = 'left' | 'right' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-type Theme = 'light' | 'dark' | 'system';
-type ColorTheme = string;
-type SystemThemeMode = 'css' | 'js';
-interface UseThemeAnimationProps {
-    duration?: number;
-    easing?: string;
-    animationType?: ThemeAnimationType;
-    blurAmount?: number;
-    styleId?: string;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    globalClassName?: string;
-    colorThemePrefix?: string;
-    attribute?: 'class' | 'data-theme';
-    value?: Record<string, string>;
-    enableColorScheme?: boolean;
-    storageKey?: string;
-    colorStorageKey?: string;
-    theme?: Theme;
-    colorTheme?: ColorTheme;
-    onThemeChange?: (theme: Theme) => void;
-    onColorThemeChange?: (colorTheme: ColorTheme) => void;
-    initialTheme?: Theme;
-    initialColorTheme?: ColorTheme;
-    systemThemeMode?: SystemThemeMode;
-    slideDirection?: SlideDirection;
-    slideFromX?: number;
-    slideFromY?: number;
-    slideToX?: number;
-    slideToY?: number;
-}
-interface UseThemeAnimationReturn {
-    ref: RefObject<HTMLButtonElement | null>;
-    theme: Theme;
-    colorTheme: ColorTheme;
-    resolvedTheme: 'light' | 'dark';
-    systemTheme: 'light' | 'dark';
-    setTheme: (theme: Theme) => void;
-    setColorTheme: (colorTheme: ColorTheme) => void;
-    switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>;
-    switchColorTheme: (colorTheme: string) => void;
-    toggleTheme: (animationOff?: boolean) => Promise<void>;
-    toggleLightTheme: (animationOff?: boolean) => Promise<void>;
-    toggleDarkTheme: (animationOff?: boolean) => Promise<void>;
-    toggleColorTheme: () => void;
-    createColorThemeToggle: (targetColorTheme: string) => () => void;
-    isColorThemeActive: (targetColorTheme: string) => boolean;
-}
-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;
-    };
-}
-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;
-}
-
-declare const injectBaseStyles: () => void;
-declare const getSystemTheme: () => "light" | "dark";
-declare const resolveTheme: (theme: string) => "light" | "dark";
-declare const resolveThemeForServer: (theme: string) => "light" | "dark" | "system";
-declare const supportsViewTransitions: () => boolean;
-declare const prefersReducedMotion: () => boolean;
-
-export { type ColorTheme, type SlideDirection, type SystemThemeMode, type Theme, ThemeAnimationType, type ThemeSelectorProps, type ThemeSwitcherProps, type UseThemeAnimationProps, type UseThemeAnimationReturn, getSystemTheme, injectBaseStyles, prefersReducedMotion, resolveTheme, resolveThemeForServer, supportsViewTransitions };

package/dist/core/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/core/types/index.ts","../../src/core/utils/animations.ts"],"names":["ThemeAnimationType"],"mappings":";AAEO,IAAK,kBAAA,qBAAAA,mBAAAA,KAAL;AACL,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,aAAA,CAAA,GAAc,aAAA;AACd,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AAHE,EAAA,OAAAA,mBAAAA;AAAA,CAAA,EAAA,kBAAA,IAAA,EAAA;;;ACAZ,IAAM,SAAA,GAAY,OAAO,MAAA,KAAW,WAAA;AAE7B,IAAM,mBAAmB,MAAY;AAC1C,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,MAAM,OAAA,GAAU,2BAAA;AAChB,IAAA,IAAI,CAAC,QAAA,CAAS,cAAA,CAAe,OAAO,CAAA,EAAG;AACrC,MAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AAC5C,MAAA,KAAA,CAAM,EAAA,GAAK,OAAA;AACX,MAAA,MAAM,gBAAA,GACJ,MAAA,CAAO,UAAA,IAAc,GAAA,IAAQ,OAAO,WAAA,IAAe,GAAA;AAErD,MAAA,KAAA,CAAM,WAAA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAKd,gBAAA,GAAmB,8BAA8B,EAAE;AAAA;AAAA;AAAA,QAAA,EAIrD,gBAAA,GACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA,GAUA,EACN;AAAA,MAAA,CAAA;AAEF,MAAA,QAAA,CAAS,IAAA,CAAK,YAAY,KAAK,CAAA;AAAA,IACjC;AAAA,EACF;AACF;AAYO,IAAM,iBAAiB,MAAwB;AACpD,EAAA,IAAI,CAAC,WAAW,OAAO,OAAA;AACvB,EAAA,OAAO,MAAA,CAAO,UAAA,CAAW,8BAA8B,CAAA,CAAE,UACrD,MAAA,GACA,OAAA;AACN;AAEO,IAAM,YAAA,GAAe,CAAC,KAAA,KAAoC;AAC/D,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,cAAA,EAAe;AAAA,EACxB;AACA,EAAA,OAAO,KAAA,KAAU,SAAS,MAAA,GAAS,OAAA;AACrC;AAEO,IAAM,qBAAA,GAAwB,CACnC,KAAA,KACgC;AAChC,EAAA,IAAI,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAO,KAAA,KAAU,SAAS,MAAA,GAAS,OAAA;AACrC;AAEO,IAAM,0BAA0B,MAAe;AACpD,EAAA,OAAO,aAAa,qBAAA,IAAyB,QAAA;AAC/C;AAEO,IAAM,uBAAuB,MAAe;AACjD,EAAA,OACE,SAAA,IAAa,MAAA,CAAO,UAAA,CAAW,kCAAkC,CAAA,CAAE,OAAA;AAEvE","file":"index.js","sourcesContent":["import { RefObject } from 'react'\n\nexport enum ThemeAnimationType {\n  CIRCLE = 'circle',\n  BLUR_CIRCLE = 'blur-circle',\n  SLIDE = 'slide',\n}\n\nexport type SlideDirection =\n  | 'left'\n  | 'right'\n  | 'top'\n  | 'bottom'\n  | 'top-left'\n  | 'top-right'\n  | 'bottom-left'\n  | 'bottom-right'\n\nexport type Theme = 'light' | 'dark' | 'system'\nexport type ColorTheme = string\nexport type SystemThemeMode = 'css' | 'js'\n\nexport interface UseThemeAnimationProps {\n  duration?: number\n  easing?: string\n  animationType?: ThemeAnimationType\n  blurAmount?: number\n  styleId?: string\n\n  themes?: Theme[]\n  colorThemes?: ColorTheme[]\n  defaultTheme?: Theme\n  defaultColorTheme?: ColorTheme\n\n  globalClassName?: string\n  colorThemePrefix?: string\n  attribute?: 'class' | 'data-theme'\n  value?: Record<string, string>\n  enableColorScheme?: boolean\n\n  storageKey?: string\n  colorStorageKey?: string\n\n  theme?: Theme\n  colorTheme?: ColorTheme\n\n  onThemeChange?: (theme: Theme) => void\n  onColorThemeChange?: (colorTheme: ColorTheme) => void\n\n  initialTheme?: Theme\n  initialColorTheme?: ColorTheme\n  systemThemeMode?: SystemThemeMode\n\n  // Slide animation options (only valid when animationType is SLIDE)\n  slideDirection?: SlideDirection\n  slideFromX?: number // custom from translate X (%)\n  slideFromY?: number // custom from translate Y (%)\n  slideToX?: number // custom to translate X (%)\n  slideToY?: number // custom to translate Y (%)\n}\n\nexport interface UseThemeAnimationReturn {\n  ref: RefObject<HTMLButtonElement | null>\n\n  theme: Theme\n  colorTheme: ColorTheme\n  resolvedTheme: 'light' | 'dark'\n  systemTheme: 'light' | 'dark'\n\n  setTheme: (theme: Theme) => void\n  setColorTheme: (colorTheme: ColorTheme) => void\n\n  switchTheme: (theme: Theme, animationOff?: boolean) => Promise<void>\n  switchColorTheme: (colorTheme: string) => void\n\n  toggleTheme: (animationOff?: boolean) => Promise<void>\n  toggleLightTheme: (animationOff?: boolean) => Promise<void>\n  toggleDarkTheme: (animationOff?: boolean) => Promise<void>\n  toggleColorTheme: () => void\n\n  createColorThemeToggle: (targetColorTheme: string) => () => void\n  isColorThemeActive: (targetColorTheme: string) => boolean\n}\n\nexport interface ThemeSwitcherProps {\n  themes?: Theme[]\n  currentTheme?: Theme\n  onThemeChange?: (theme: Theme) => void\n\n  animationType?: ThemeAnimationType\n  duration?: number\n\n  className?: string\n  size?: 'sm' | 'md' | 'lg'\n  variant?: 'default' | 'outline' | 'ghost'\n\n  icons?: {\n    light?: React.ReactNode\n    dark?: React.ReactNode\n    system?: React.ReactNode\n  }\n}\n\nexport interface ThemeSelectorProps {\n  themes?: Theme[]\n  colorThemes?: ColorTheme[]\n  currentTheme?: Theme\n  currentColorTheme?: ColorTheme\n\n  onThemeChange?: (theme: Theme) => void\n  onColorThemeChange?: (colorTheme: ColorTheme) => void\n\n  animationType?: ThemeAnimationType\n  duration?: number\n\n  className?: string\n  placeholder?: string\n\n  themeLabel?: string\n  colorThemeLabel?: string\n}\n","import { ThemeAnimationType } from '../types'\n\nconst isBrowser = typeof window !== 'undefined'\n\nexport const injectBaseStyles = (): void => {\n  if (isBrowser) {\n    const styleId = 'spaceman-theme-base-style'\n    if (!document.getElementById(styleId)) {\n      const style = document.createElement('style')\n      style.id = styleId\n      const isHighResolution =\n        window.innerWidth >= 3000 || window.innerHeight >= 2000\n\n      style.textContent = `\n        ::view-transition-old(root),\n        ::view-transition-new(root) {\n          animation: none;\n          mix-blend-mode: normal;\n          ${isHighResolution ? 'transform: translateZ(0);' : ''}\n        }\n        \n        ${\n          isHighResolution\n            ? `\n        ::view-transition-group(root),\n        ::view-transition-image-pair(root),\n        ::view-transition-old(root),\n        ::view-transition-new(root) {\n          backface-visibility: hidden;\n          perspective: 1000px;\n          transform: translate3d(0, 0, 0);\n        }\n        `\n            : ''\n        }\n      `\n      document.head.appendChild(style)\n    }\n  }\n}\n\nexport const createBlurCircleMask = (blur: number): string => {\n  const isHighResolution =\n    isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000)\n\n  const blurFilter = `<filter id=\"blur\"><feGaussianBlur stdDeviation=\"${blur}\" /></filter>`\n  const circleRadius = isHighResolution ? 20 : 25\n\n  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>')`\n}\n\nexport const getSystemTheme = (): 'light' | 'dark' => {\n  if (!isBrowser) return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches\n    ? 'dark'\n    : 'light'\n}\n\nexport const resolveTheme = (theme: string): 'light' | 'dark' => {\n  if (theme === 'system') {\n    return getSystemTheme()\n  }\n  return theme === 'dark' ? 'dark' : 'light'\n}\n\nexport const resolveThemeForServer = (\n  theme: string\n): 'light' | 'dark' | 'system' => {\n  if (theme === 'system') {\n    return 'system'\n  }\n  return theme === 'dark' ? 'dark' : 'light'\n}\n\nexport const supportsViewTransitions = (): boolean => {\n  return isBrowser && 'startViewTransition' in document\n}\n\nexport const prefersReducedMotion = (): boolean => {\n  return (\n    isBrowser && window.matchMedia('(prefers-reduced-motion: reduce)').matches\n  )\n}\n\nexport interface AnimationConfig {\n  a?: number\n  b?: number\n  x: number\n  y: number\n  duration: number\n  easing: string\n  animationType: ThemeAnimationType\n  blurAmount: number\n  styleId: string\n}\n\nexport const createCircleAnimation = (config: AnimationConfig): void => {\n  const { x, y, duration, easing } = config\n\n  // Calculate the distance to each corner of the viewport\n  const topLeft = Math.hypot(x, y)\n  const topRight = Math.hypot(window.innerWidth - x, y)\n  const bottomLeft = Math.hypot(x, window.innerHeight - y)\n  const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y)\n\n  // Find the maximum distance to ensure animation covers the entire viewport\n  const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight)\n\n  document.documentElement.animate(\n    {\n      clipPath: [\n        `circle(0px at ${x}px ${y}px)`,\n        `circle(${maxRadius}px at ${x}px ${y}px)`,\n      ],\n    },\n    {\n      duration,\n      easing,\n      pseudoElement: '::view-transition-new(root)',\n    }\n  )\n}\n\nexport const createSlideAnimation = (config: AnimationConfig): void => {\n  const { a = -100, b = 0, x = 0, y = 0, duration, styleId } = config\n\n  const styleElement = document.createElement('style')\n  styleElement.id = styleId\n\n  styleElement.textContent = `\n    ::view-transition-old(root) {\n      animation-delay: ${duration}ms;\n    }\n    \n    ::view-transition-new(root) {\n      animation: move-in ${duration}ms;\n      animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);\n    }\n    \n    @keyframes move-in {\n      from {\n        translate: ${a}% ${b}%;\n      }\n      to {\n        translate: ${x}% ${y}%;\n      }\n    }\n  `\n\n  document.head.appendChild(styleElement)\n\n  // Clean up after animation\n  setTimeout(() => {\n    const styleElement = document.getElementById(styleId)\n    if (styleElement) {\n      styleElement.remove()\n    }\n  }, duration)\n}\n\nexport const createBlurCircleAnimation = (config: AnimationConfig): void => {\n  const { x, y, duration, easing, blurAmount, styleId } = config\n\n  const existingStyle = document.getElementById(styleId)\n  if (existingStyle) {\n    existingStyle.remove()\n  }\n\n  const viewportSize = Math.max(window.innerWidth, window.innerHeight) + 200\n  const isHighResolution =\n    window.innerWidth >= 3000 || window.innerHeight >= 2000\n  const scaleFactor = isHighResolution ? 2.5 : 4\n  const optimalMaskSize = isHighResolution\n    ? Math.min(viewportSize * scaleFactor, 5000)\n    : viewportSize * scaleFactor\n\n  const topLeft = Math.hypot(x, y)\n  const topRight = Math.hypot(window.innerWidth - x, y)\n  const bottomLeft = Math.hypot(x, window.innerHeight - y)\n  const bottomRight = Math.hypot(window.innerWidth - x, window.innerHeight - y)\n  const maxRadius = Math.max(topLeft, topRight, bottomLeft, bottomRight)\n\n  const styleElement = document.createElement('style')\n  styleElement.id = styleId\n\n  const blurFactor = isHighResolution ? 1.5 : 1.2\n  const finalMaskSize = Math.max(optimalMaskSize, maxRadius * 2.5)\n\n  styleElement.textContent = `\n    ::view-transition-group(root) {\n      animation-duration: ${duration}ms;\n      animation-timing-function: ${\n        isHighResolution\n          ? 'cubic-bezier(0.2, 0, 0.2, 1)'\n          : 'linear(' +\n            '0 0%, 0.2342 12.49%, 0.4374 24.99%,' +\n            '0.6093 37.49%, 0.6835 43.74%,' +\n            '0.7499 49.99%, 0.8086 56.25%,' +\n            '0.8593 62.5%, 0.9023 68.75%, 0.9375 75%,' +\n            '0.9648 81.25%, 0.9844 87.5%,' +\n            '0.9961 93.75%, 1 100%' +\n            ')'\n      };\n      will-change: transform;\n    }\n    \n    ::view-transition-new(root) {\n      mask: ${createBlurCircleMask(blurAmount * blurFactor)} 0 0 / 100% 100% no-repeat;\n      mask-position: ${x}px ${y}px;\n      animation: spaceman-mask-scale ${duration}ms ${easing};\n      transform-origin: ${x}px ${y}px;\n      will-change: mask-size, mask-position;\n    }\n    \n    ::view-transition-old(root),\n    .dark::view-transition-old(root) {\n      animation: spaceman-mask-scale ${duration}ms ${easing};\n      transform-origin: ${x}px ${y}px;\n      z-index: -1;\n      will-change: mask-size, mask-position;\n    }\n    \n    @keyframes spaceman-mask-scale {\n      0% {\n        mask-size: 0px;\n        mask-position: ${x}px ${y}px;\n      }\n      100% {\n        mask-size: ${finalMaskSize}px;\n        mask-position: ${x - finalMaskSize / 2}px ${y - finalMaskSize / 2}px;\n      }\n    }\n  `\n\n  document.head.appendChild(styleElement)\n\n  setTimeout(() => {\n    const styleElement = document.getElementById(styleId)\n    if (styleElement) {\n      styleElement.remove()\n    }\n  }, duration)\n}\n"]}