@space-man/react-theme-animation 2.1.0 → 3.0.0

package/dist/chunk-I3T2QXRT.js

@@ -0,0 +1,18 @@
+var x=typeof window<"u",k=()=>{if(!x||document.getElementById("spaceman-theme-base-style"))return;let t=document.createElement("style");t.id="spaceman-theme-base-style",t.textContent=`
+    html[data-spaceman-theme-transition]::view-transition-group(root),
+    html[data-spaceman-theme-transition]::view-transition-old(root),
+    html[data-spaceman-theme-transition]::view-transition-new(root) {
+      animation: none;
+    }
+    html[data-spaceman-theme-transition]::view-transition-old(root),
+    html[data-spaceman-theme-transition]::view-transition-new(root) {
+      mix-blend-mode: normal;
+    }
+    html[data-spaceman-theme-transition],
+    html[data-spaceman-theme-transition] *,
+    html[data-spaceman-theme-transition] *::before,
+    html[data-spaceman-theme-transition] *::after {
+      transition: none !important;
+    }
+  `,document.head.appendChild(t);};var C=()=>x&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light",M=t=>t==="system"?C():t==="dark"?"dark":"light",P=t=>t==="system"?"system":t==="dark"?"dark":"light",R=()=>x&&document.startViewTransition instanceof Function,T=()=>x&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,E=t=>{switch(t){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 t=getComputedStyle(document.documentElement,"::view-transition-new(root)"),n=Math.max(window.innerWidth,parseFloat(t.width)||0),e=Math.max(window.innerHeight,parseFloat(t.height)||0);return {width:n,height:e}},w=(t,n)=>{let{width:e,height:o}=$();return Math.hypot(Math.max(Math.abs(t),Math.abs(e-t)),Math.max(Math.abs(n),Math.abs(o-n)))+1},B=t=>{let n=t.includes("left")?0:t.includes("right")?window.innerWidth:window.innerWidth/2,e=t.includes("top")?0:t.includes("bottom")?window.innerHeight:window.innerHeight/2;return {x:n,y:e}},S=0,u=(t,n)=>{let e=document.documentElement.animate(n,{duration:t.duration,easing:t.easing,fill:"both",pseudoElement:"::view-transition-new(root)"}),o=e.effect;if(!(o instanceof KeyframeEffect))return e;let i=o.getKeyframes(),d=i.some(m=>"clipPath"in m)?"clipPath":i.some(m=>"maskImage"in m)?"maskImage":"transform";if(getComputedStyle(document.documentElement,"::view-transition-new(root)")[d]!=="none")return e;let c=e.playState==="paused",s=e.currentTime;e.cancel(),e.finished.catch(()=>{});let r=`spaceman-theme-reveal-${++S}`,a=document.createElement("style"),l=i.map(m=>{let y=Object.entries(m).filter(([h])=>!["offset","computedOffset","easing","composite"].includes(h)).map(([h,v])=>`${h.replace(/[A-Z]/g,A=>`-${A.toLowerCase()}`)}:${v};`).join("");return `${m.computedOffset*100}%{${y}}`}).join("");a.textContent=`@keyframes ${r}{${l}}html[data-spaceman-theme-transition]::view-transition-new(root){animation:${r} ${t.duration}ms ${t.easing} both;}`,document.head.appendChild(a);let f=getComputedStyle(document.documentElement,"::view-transition-new(root)").animationName,p=document.getAnimations().find(m=>m instanceof CSSAnimation&&m.animationName===f);if(!p)throw a.remove(),new Error("Transition pseudo animations are unavailable");return c&&(p.pause(),p.currentTime=s),p.finished.then(()=>{a.remove();},()=>{a.remove();}),p},I=t=>{let n=t.clipPathDirection??"top-left",e={"top-left":"polygon(-1% -1%, 101% -101%, -101% 101%, -1% -1%)",top:"polygon(-1% -1%, 101% -1%, 101% -1%, -1% -1%)","top-right":"polygon(101% -1%, 201% 101%, -1% -101%, 101% -1%)",right:"polygon(101% -1%, 101% 101%, 101% 101%, 101% -1%)","bottom-right":"polygon(101% 101%, -1% 201%, 201% -1%, 101% 101%)",bottom:"polygon(101% 101%, -1% 101%, -1% 101%, 101% 101%)","bottom-left":"polygon(-1% 101%, -101% -1%, 101% 201%, -1% 101%)",left:"polygon(-1% 101%, -1% -1%, -1% -1%, -1% 101%)"},o={"top-left":"polygon(-1% -1%, 201% -1%, -1% 201%, -1% -1%)",top:"polygon(-1% -1%, 101% -1%, 101% 101%, -1% 101%)","top-right":"polygon(101% -1%, 101% 201%, -101% -1%, 101% -1%)",right:"polygon(101% -1%, 101% 101%, -1% 101%, -1% -1%)","bottom-right":"polygon(101% 101%, -101% 101%, 101% -101%, 101% 101%)",bottom:"polygon(101% 101%, -1% 101%, -1% -1%, 101% -1%)","bottom-left":"polygon(-1% 101%, -1% -101%, 201% 101%, -1% 101%)",left:"polygon(-1% 101%, -1% -1%, 101% -1%, 101% 101%)"};return u(t,{clipPath:[e[n],o[n]]})},D=t=>{let n=t.clipPathDirection??"top-left",{width:e,height:o}=$(),i=n.includes("-"),d=n.includes("left"),g=n.includes("top"),c=n==="left"||n==="right",s=d?0:n.includes("right")?1:.5,r=g?0:n.includes("bottom")?1:.5,a=i||c?e*3:e,l=i||!c?o*3:o,f=i?`${s*100},${r*100} ${(1-s)*100},${r*100} ${s*100},${(1-r)*100}`:"0,0 100,0 100,100 0,100",p=i?a*l/Math.hypot(a,l):c?a:l,y=1-Math.max(0,Math.min(t.gradientWidth??80,p*.2))/p,h=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><defs><linearGradient id="edge" x1="${s*100}" y1="${r*100}" x2="${100*(i?.5:c?1-s:s)}" y2="${100*(i?.5:c?r:1-r)}" gradientUnits="userSpaceOnUse"><stop offset="${y}" stop-color="black"/><stop offset="1" stop-color="black" stop-opacity="0"/></linearGradient></defs><polygon points="${f}" fill="url(#edge)"/></svg>`;return u(t,{maskImage:[`url("data:image/svg+xml,${encodeURIComponent(h)}")`,`url("data:image/svg+xml,${encodeURIComponent(h)}")`],maskMode:["alpha","alpha"],maskRepeat:["no-repeat","no-repeat"],maskSize:[i?"0px 0px":c?`0px ${l}px`:`${a}px 0px`,`${a}px ${l}px`],maskPosition:[`${s*e}px ${r*o}px`,`${s*(e-a)}px ${r*(o-l)}px`]})},F=t=>{let{x:n,y:e}=t,o=w(n,e),i=Math.sqrt(3)*o;return u(t,{clipPath:[`polygon(${n}px ${e}px, ${n}px ${e}px, ${n}px ${e}px)`,`polygon(${n}px ${e-2*o}px, ${n+i}px ${e+o}px, ${n-i}px ${e+o}px)`]})},z=t=>{let{width:n,height:e}=$();return b({...t,x:n/2,y:e/2})},b=t=>{let{x:n,y:e}=t;return u(t,{clipPath:[`circle(0px at ${n}px ${e}px)`,`circle(${w(n,e)}px at ${n}px ${e}px)`]})},O=t=>{let{a:n=-100,b:e=0,x:o,y:i}=t;return u(t,{transform:[`translate(${n}%, ${e}%)`,`translate(${o}%, ${i}%)`]})},N=t=>{let{x:n,y:e,blurAmount:o}=t;if(o<=0)return b(t);let i=Math.min(o,20),d=w(n,e)+i,g=d*2;return u(t,{maskImage:[`radial-gradient(closest-side, #000 calc(100% - ${i}px), transparent 100%)`,`radial-gradient(closest-side, #000 calc(100% - ${i}px), transparent 100%)`],maskRepeat:["no-repeat","no-repeat"],maskSize:["0px 0px",`${g}px ${g}px`],maskPosition:[`${n}px ${e}px`,`${n-d}px ${e-d}px`]})};
+export{k as a,C as b,M as c,P as d,R as e,T as f,E as g,B as h,I as i,D as j,F as k,z as l,b as m,O as n,N as o};

package/dist/chunk-QYUMCBTQ.js

@@ -0,0 +1 @@
+import {d as d$1}from'./chunk-I3T2QXRT.js';var a="theme",d="color-theme",s="dark",c="theme-";function f(e,o,m={}){let{defaultTheme:h="system",defaultColorTheme:l="default"}=m,r=e==="light"||e==="dark"||e==="system"?e:h,n=o??l;return {theme:d$1(r),themePreference:r,colorTheme:n}}export{a,d as b,s as c,c as d,f as e};

package/dist/chunk-X6UEG7WG.js

@@ -0,0 +1,12 @@
+import {e,f,a,n,o,i,j,k as k$1,l,m}from'./chunk-I3T2QXRT.js';var I=e=>{if(e.logoLight!==void 0||e.logoDark!==void 0){if(e.logoLight===void 0||e.logoLight===""||e.logoDark===void 0||e.logoDark==="")throw new Error("logoLight and logoDark must both be provided.");if(e.logo!==void 0)throw new Error("Use logo or the logoLight/logoDark pair, not both.");return {logoLight:e.logoLight,logoDark:e.logoDark}}return {logo:e.logo}},x=0,v=e=>{let o=w(e.logo);if(!o)return;let i=e.logoWidth!=="auto"&&e.logoWidth!==void 0&&Number.isFinite(e.logoWidth)&&e.logoWidth>0?e.logoWidth:void 0,t=e.logoHeight!=="auto"&&e.logoHeight!==void 0&&Number.isFinite(e.logoHeight)&&e.logoHeight>0?e.logoHeight:void 0,a=i??(t!==void 0?t*o.aspectRatio:e.logoWidth==="auto"||e.logoHeight==="auto"?o.naturalWidth:96),n=t??a/o.aspectRatio,l=`spaceman-theme-logo-${++x}`,r=document.createElement("img");r.src=o.image,r.alt="",r.setAttribute("aria-hidden","true"),r.setAttribute("data-spaceman-theme-logo",""),r.style.cssText=`position:fixed;left:calc(50% - ${a/2}px);top:calc(50% - ${n/2}px);width:${a}px;height:${n}px;max-width:none;max-height:none;object-fit:contain;display:block;margin:0;padding:0;border:0;transform:none;pointer-events:none;z-index:2147483647;view-transition-name:${l};`;let m=document.createElement("style");return m.setAttribute("data-spaceman-theme-logo-style",""),m.textContent=`
+    @keyframes ${l}-fade { 0%, 85% { opacity:1; } 100% { opacity:0; } }
+    html[data-spaceman-theme-transition]::view-transition-group(${l}) {
+      z-index:2;
+      animation:${l}-fade ${e.duration}ms linear both;
+    }
+    html[data-spaceman-theme-transition]::view-transition-old(${l}) { display:none; }
+    html[data-spaceman-theme-transition]::view-transition-new(${l}) {
+      animation:none; mix-blend-mode:normal;
+    }
+  `,document.head.appendChild(m),document.documentElement.appendChild(r),{element:r,style:m}},h=new Map,R=async e=>{if(typeof window>"u")return Promise.resolve();let o=h.get(e);if(o)return o.loading;let i={loading:Promise.resolve()};return h.set(e,i),i.loading=(async()=>{let t=new AbortController,a=setTimeout(()=>{t.abort();},2e3);try{let n=await fetch(e,{signal:t.signal});if(!n.ok)return;let l=await n.text(),r=new DOMParser().parseFromString(l,"image/svg+xml");if(r.querySelector("parsererror")||r.documentElement.localName!=="svg"||r.documentElement.namespaceURI!=="http://www.w3.org/2000/svg")return;let m=`data:image/svg+xml,${encodeURIComponent(l)}`,d=new Image;d.src=m,await d.decode(),d.naturalWidth>0&&d.naturalHeight>0&&(i.ready={image:m,naturalWidth:d.naturalWidth,aspectRatio:d.naturalWidth/d.naturalHeight});}catch{}finally{clearTimeout(a);}})(),i.loading},w=e=>e!==void 0&&e!==""?h.get(e)?.ready:void 0;var A=(r=>(r.CIRCLE="circle",r.BLUR_CIRCLE="blur-circle",r.SLIDE="slide",r.CLIP_PATH="clip-path",r.POLYGON_GRADIENT="polygon-gradient",r.TRIANGLE="triangle",r.SVG_LOGO="svg-logo",r))(A||{}),D=["top-left","top","top-right","right","bottom-right","bottom","bottom-left","left"];var s=new WeakMap,k=async(e$1,o$1)=>{if(!("document"in globalThis)){e$1();return}let i$1=s.get(document);i$1?.transition?.skipTransition(),i$1?.animation?.cancel(),i$1?.logo?.element.remove(),i$1?.logo?.style.remove();let t={updateDone:Promise.resolve()};s.set(document,t);let a$1=()=>{t.animation?.cancel(),t.logo?.element.remove(),t.logo?.style.remove(),s.get(document)===t&&(s.delete(document),document.documentElement.removeAttribute("data-spaceman-theme-transition"));};t.updateDone=(async()=>{if(i$1&&await i$1.updateDone.catch(()=>{}),s.get(document)!==t||!o$1||!e()||f()||document.visibilityState==="hidden"){e$1();return}a(),document.documentElement.setAttribute("data-spaceman-theme-transition",""),o$1.animationType==="svg-logo"&&(t.logo=v(o$1));let n;try{n=document.startViewTransition(e$1);}catch{e$1();return}t.transition=n,n.ready.catch(()=>{}),n.finished.then(a$1,a$1),await n.updateCallbackDone;})();try{await t.updateDone;let n$1=t.transition;if(!n$1){a$1();return}try{await n$1.ready;}catch{a$1();return}if(s.get(document)!==t){n$1.skipTransition();return}if(!o$1)return;try{t.animation=o$1.animationType==="slide"?n(o$1):o$1.animationType==="blur-circle"?o(o$1):o$1.animationType==="clip-path"?i(o$1):o$1.animationType==="polygon-gradient"?j(o$1):o$1.animationType==="triangle"?k$1(o$1):o$1.animationType==="svg-logo"?l(o$1):m(o$1),t.animation.finished.catch(()=>{});let l$1=t.animation.effect;!(t.animation instanceof CSSAnimation)&&(!(l$1 instanceof KeyframeEffect)||l$1.pseudoElement!=="::view-transition-new(root)")&&(n$1.skipTransition(),a$1());}catch{n$1.skipTransition(),a$1();}}catch(n){throw a$1(),n}};
+export{I as a,R as b,A as c,D as d,k as e};

package/dist/core/index.d.ts

@@ -0,0 +1,9 @@
+import { q as AnimationConfig } from '../animations-CaaRrn3-.js';
+export { A as AnimationPosition, C as ColorTheme, a as ColorThemeToggle, S as SlideDirection, b as SystemThemeMode, T as TRANSITION_DIRECTIONS, c as Theme, d as ThemeAnimationOptions, e as ThemeAnimationType, f as ThemeLogoOptions, g as ThemeSelectorProps, h as ThemeSwitcherProps, i as ThemeTransitionInput, j as ThemeTransitionOptions, k as TransitionDirection, U as UseThemeAnimationProps, l as UseThemeAnimationReturn, t as createBlurCircleAnimation, u as createCircleAnimation, v as createClipPathAnimation, w as createPolygonGradientAnimation, x as createSlideAnimation, y as createSvgLogoAnimation, z as createTriangleAnimation, B as getAnimationPosition, D as getSlideFromCoords, m as getSystemTheme, n as injectBaseStyles, p as prefersReducedMotion, r as resolveTheme, o as resolveThemeForServer, s as supportsViewTransitions } from '../animations-CaaRrn3-.js';
+export { p as preloadThemeLogo } from '../logo-DtwtRv4y.js';
+import 'react';
+
+/** Latest request wins visually; every requested state update still runs once. */
+declare const runThemeTransition: (update: () => void, config: AnimationConfig | null) => Promise<void>;
+
+export { AnimationConfig, runThemeTransition };

package/dist/core/index.js

@@ -0,0 +1 @@
+export{d as TRANSITION_DIRECTIONS,c as ThemeAnimationType,b as preloadThemeLogo,e as runThemeTransition}from'../chunk-X6UEG7WG.js';export{o as createBlurCircleAnimation,m as createCircleAnimation,i as createClipPathAnimation,j as createPolygonGradientAnimation,n as createSlideAnimation,l as createSvgLogoAnimation,k as createTriangleAnimation,h as getAnimationPosition,g as getSlideFromCoords,b as getSystemTheme,a as injectBaseStyles,f as prefersReducedMotion,c as resolveTheme,d as resolveThemeForServer,e as supportsViewTransitions}from'../chunk-I3T2QXRT.js';

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { NextThemeProvider, SpacemanThemeProvider, TanStackStartThemeScript, TanStackThemeProvider, ThemeProvider, ThemeSelector, ThemeSwitcher, ViteThemeProvider, useHydrated, useNextTheme, useSpacemanTheme, useTanStackTheme, useTheme, useThemeAnimation, useViteTheme } from './react/index.js';
+export { A as AnimationPosition, C as ColorTheme, a as ColorThemeToggle, S as SlideDirection, b as SystemThemeMode, T as TRANSITION_DIRECTIONS, c as Theme, d as ThemeAnimationOptions, e as ThemeAnimationType, f as ThemeLogoOptions, g as ThemeSelectorProps, h as ThemeSwitcherProps, i as ThemeTransitionInput, j as ThemeTransitionOptions, k as TransitionDirection, U as UseThemeAnimationProps, l as UseThemeAnimationReturn, m as getSystemTheme, n as injectBaseStyles, p as prefersReducedMotion, r as resolveTheme, o as resolveThemeForServer, s as supportsViewTransitions } from './animations-CaaRrn3-.js';
+export { COLOR_STORAGE_KEY, COLOR_THEME_PREFIX, GLOBAL_CLASS_NAME, STORAGE_KEY, ServerResolvedTheme, ServerThemeData, buildServerThemeData } from './tanstack/index.js';
+export { p as preloadThemeLogo } from './logo-DtwtRv4y.js';
+import 'react';

package/dist/index.js

@@ -0,0 +1 @@
+export{g as NextThemeProvider,e as SpacemanThemeProvider,k as TanStackStartThemeScript,l as TanStackThemeProvider,h as ThemeProvider,d as ThemeSelector,c as ThemeSwitcher,n as ViteThemeProvider,a as useHydrated,i as useNextTheme,f as useSpacemanTheme,m as useTanStackTheme,j as useTheme,b as useThemeAnimation,o as useViteTheme}from'./chunk-FNL7ZHF4.js';export{d as TRANSITION_DIRECTIONS,c as ThemeAnimationType,b as preloadThemeLogo}from'./chunk-X6UEG7WG.js';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{b as getSystemTheme,a as injectBaseStyles,f as prefersReducedMotion,c as resolveTheme,d as resolveThemeForServer,e as supportsViewTransitions}from'./chunk-I3T2QXRT.js';

package/dist/logo-DtwtRv4y.d.ts

@@ -0,0 +1,4 @@
+/** Decode SVG assets before capture. A pending/failed asset never delays a toggle. */
+declare const preloadThemeLogo: (url: string) => Promise<void>;
+
+export { preloadThemeLogo as p };

package/dist/react/index.d.ts

@@ -0,0 +1,228 @@
+import { U as UseThemeAnimationProps, l as UseThemeAnimationReturn, h as ThemeSwitcherProps, g as ThemeSelectorProps, c as Theme, C as ColorTheme, e as ThemeAnimationType, i as ThemeTransitionInput, a as ColorThemeToggle, b as SystemThemeMode } from '../animations-CaaRrn3-.js';
+export { A as AnimationPosition, S as SlideDirection, T as TRANSITION_DIRECTIONS, d as ThemeAnimationOptions, f as ThemeLogoOptions, j as ThemeTransitionOptions, k as TransitionDirection, m as getSystemTheme, n as injectBaseStyles, p as prefersReducedMotion, r as resolveTheme, o as resolveThemeForServer, s as supportsViewTransitions } from '../animations-CaaRrn3-.js';
+import React, { ReactNode } from 'react';
+export { p as preloadThemeLogo } from '../logo-DtwtRv4y.js';
+
+declare const useThemeAnimation: (props?: Readonly<UseThemeAnimationProps>) => UseThemeAnimationReturn;
+
+declare function ThemeSwitcher(props: ThemeSwitcherProps): React.JSX.Element;
+
+declare function ThemeSelector(props: ThemeSelectorProps): React.JSX.Element;
+
+/**
+ * Context type for the Spaceman Theme Provider
+ */
+interface SpacemanThemeContextType {
+    readonly ref: React.RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+    readonly switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
+}
+/**
+ * Props for the Spaceman Theme Provider
+ */
+type SpacemanThemeProviderProps = UseThemeAnimationProps & {
+    readonly children: ReactNode;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+};
+/**
+ * Spaceman Theme Provider - Provides centralized theme state management
+ *
+ * This provider creates a single source of truth for theme state using the useThemeAnimation hook.
+ * All theme-related components should consume from this context to ensure synchronization.
+ *
+ * @param children - React children to wrap with theme context
+ * @param themes - Available theme options (default: ['light', 'dark', 'system'])
+ * @param colorThemes - Available color theme options (default: ['default'])
+ * @param defaultTheme - Default theme to use (default: 'system')
+ * @param defaultColorTheme - Default color theme to use (default: 'default')
+ * @param animationType - Animation type for theme transitions (default: CIRCLE)
+ * @param duration - Animation duration in milliseconds (default: 400)
+ */
+declare function SpacemanThemeProvider({ children, themes, colorThemes, defaultTheme, defaultColorTheme, animationType, duration, ...animationOptions }: Readonly<SpacemanThemeProviderProps>): React.JSX.Element;
+/**
+ * Hook to consume the Spaceman Theme context
+ *
+ * @returns Theme context value with all theme state and methods
+ * @throws Error if used outside of SpacemanThemeProvider
+ */
+declare const useSpacemanTheme: () => SpacemanThemeContextType;
+
+interface NextThemeContextType {
+    readonly ref: React.RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly systemTheme: 'light' | 'dark';
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+    readonly switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
+}
+type NextThemeProviderProps = UseThemeAnimationProps & {
+    readonly children: React.ReactNode;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly attribute?: 'class' | 'data-theme';
+    readonly value?: Record<string, string>;
+    readonly enableSystem?: boolean;
+    readonly enableColorScheme?: boolean;
+    readonly disableTransitionOnChange?: boolean;
+    readonly forcedTheme?: Theme;
+    readonly nonce?: string;
+    readonly scriptProps?: Omit<React.ScriptHTMLAttributes<HTMLScriptElement>, 'dangerouslySetInnerHTML' | 'nonce'>;
+    readonly colorThemePrefix?: string;
+    readonly globalClassName?: string;
+    readonly disableAnimationOnInit?: boolean;
+    readonly disablePreHydrationScript?: boolean;
+    readonly onThemeChange?: (theme: Theme) => void;
+    readonly onColorThemeChange?: (colorTheme: ColorTheme) => void;
+};
+declare function NextThemeProvider({ attribute, children, colorStorageKey, colorThemePrefix, colorThemes, defaultColorTheme, defaultTheme, disableAnimationOnInit, disablePreHydrationScript, disableTransitionOnChange, duration, enableColorScheme, enableSystem, forcedTheme, globalClassName, nonce, onColorThemeChange, onThemeChange, scriptProps, storageKey, themes, value, animationType, ...animationOptions }: Readonly<NextThemeProviderProps>): React.JSX.Element;
+declare const ThemeProvider: typeof NextThemeProvider;
+declare const useNextTheme: () => NextThemeContextType;
+declare const useTheme: () => NextThemeContextType;
+
+interface TanStackStartThemeScriptProps {
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly globalClassName?: string;
+    readonly colorThemePrefix?: string;
+    readonly nonce?: string;
+    readonly systemThemeMode?: SystemThemeMode;
+}
+declare const TanStackStartThemeScript: React.FC<TanStackStartThemeScriptProps>;
+
+interface TanStackThemeContextType {
+    readonly ref: React.RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly systemTheme: 'light' | 'dark';
+    readonly isHydrated: boolean;
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+    readonly switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
+}
+type TanStackThemeProviderProps = UseThemeAnimationProps & {
+    readonly children: ReactNode;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly globalClassName?: string;
+    readonly colorThemePrefix?: string;
+    readonly serverTheme?: 'light' | 'dark' | 'system';
+    readonly serverColorTheme?: ColorTheme;
+    readonly systemThemeMode?: SystemThemeMode;
+    readonly onServerThemeChange?: (theme: Theme) => Promise<void> | void;
+    readonly onServerColorThemeChange?: (colorTheme: ColorTheme) => Promise<void> | void;
+};
+declare function TanStackThemeProvider({ children, themes, colorThemes, defaultTheme, defaultColorTheme, animationType, duration, storageKey, colorStorageKey, globalClassName, colorThemePrefix, serverTheme, serverColorTheme, systemThemeMode, onServerThemeChange, onServerColorThemeChange, ...animationOptions }: Readonly<TanStackThemeProviderProps>): React.JSX.Element;
+declare const useTanStackTheme: () => TanStackThemeContextType;
+
+interface ViteThemeContextType {
+    readonly ref: React.RefObject<HTMLButtonElement | null>;
+    readonly theme: Theme;
+    readonly colorTheme: ColorTheme;
+    readonly resolvedTheme: 'light' | 'dark';
+    readonly systemTheme: 'light' | 'dark';
+    readonly setTheme: (theme: Theme) => void;
+    readonly setColorTheme: (colorTheme: ColorTheme) => void;
+    readonly switchTheme: (theme: Theme, options?: ThemeTransitionInput) => Promise<void>;
+    readonly switchColorTheme: (colorTheme: string, options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleLightTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleDarkTheme: (options?: ThemeTransitionInput) => Promise<void>;
+    readonly toggleColorTheme: ColorThemeToggle;
+    readonly createColorThemeToggle: (targetColorTheme: string) => ColorThemeToggle;
+    readonly isColorThemeActive: (targetColorTheme: string) => boolean;
+    readonly switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
+}
+type ViteThemeProviderProps = UseThemeAnimationProps & {
+    readonly children: ReactNode;
+    readonly themes?: readonly Theme[];
+    readonly colorThemes?: readonly ColorTheme[];
+    readonly defaultTheme?: Theme;
+    readonly defaultColorTheme?: ColorTheme;
+    readonly animationType?: ThemeAnimationType;
+    readonly duration?: number;
+    readonly attribute?: 'class' | 'data-theme';
+    readonly disableTransitionOnChange?: boolean;
+    readonly storageKey?: string;
+    readonly colorStorageKey?: string;
+    readonly globalClassName?: string;
+    readonly colorThemePrefix?: string;
+};
+/**
+ * Vite Theme Provider - Optimized for Vite SPA applications
+ *
+ * This provider is designed for Vite-based single-page applications with optional
+ * transition disabling to prevent flash during theme switches.
+ *
+ * Note: For flash prevention on initial load, add a script to your index.html
+ * or inject it via Vite plugin to apply theme before React loads.
+ *
+ * @param children - React children to wrap with theme context
+ * @param themes - Available theme options
+ * @param colorThemes - Available color theme options
+ * @param defaultTheme - Default theme to use
+ * @param defaultColorTheme - Default color theme to use
+ * @param animationType - Animation type for theme transitions
+ * @param duration - Animation duration in milliseconds
+ * @param attribute - HTML attribute to use for theme ('class' or 'data-theme')
+ * @param disableTransitionOnChange - Temporarily disable CSS transitions during theme switch
+ * @param storageKey - LocalStorage key for theme preference
+ * @param colorStorageKey - LocalStorage key for color theme preference
+ * @param globalClassName - Class name for dark theme (when using 'class' attribute)
+ * @param colorThemePrefix - Prefix for color theme classes
+ */
+declare function ViteThemeProvider({ children, themes, colorThemes, defaultTheme, defaultColorTheme, animationType, duration, attribute, disableTransitionOnChange, storageKey, colorStorageKey, globalClassName, colorThemePrefix, ...animationOptions }: Readonly<ViteThemeProviderProps>): React.JSX.Element;
+declare const useViteTheme: () => ViteThemeContextType;
+
+declare function useHydrated(): boolean;
+
+export { ColorTheme, ColorThemeToggle, NextThemeProvider, SpacemanThemeProvider, SystemThemeMode, TanStackStartThemeScript, TanStackThemeProvider, Theme, ThemeAnimationType, ThemeProvider, ThemeSelector, ThemeSelectorProps, ThemeSwitcher, ThemeSwitcherProps, ThemeTransitionInput, UseThemeAnimationProps, UseThemeAnimationReturn, ViteThemeProvider, useHydrated, useNextTheme, useSpacemanTheme, useTanStackTheme, useTheme, useThemeAnimation, useViteTheme };

package/dist/react/index.js

@@ -0,0 +1,2 @@
+'use client';
+export{g as NextThemeProvider,e as SpacemanThemeProvider,k as TanStackStartThemeScript,l as TanStackThemeProvider,h as ThemeProvider,d as ThemeSelector,c as ThemeSwitcher,n as ViteThemeProvider,a as useHydrated,i as useNextTheme,f as useSpacemanTheme,m as useTanStackTheme,j as useTheme,b as useThemeAnimation,o as useViteTheme}from'../chunk-FNL7ZHF4.js';export{d as TRANSITION_DIRECTIONS,c as ThemeAnimationType,b as preloadThemeLogo}from'../chunk-X6UEG7WG.js';import'../chunk-QYUMCBTQ.js';export{b as getSystemTheme,a as injectBaseStyles,f as prefersReducedMotion,c as resolveTheme,d as resolveThemeForServer,e as supportsViewTransitions}from'../chunk-I3T2QXRT.js';

package/dist/tanstack/index.d.ts

@@ -0,0 +1,20 @@
+import { c as Theme, C as ColorTheme } from '../animations-CaaRrn3-.js';
+export { o as resolveThemeForServer } from '../animations-CaaRrn3-.js';
+import 'react';
+
+declare const STORAGE_KEY = "theme";
+declare const COLOR_STORAGE_KEY = "color-theme";
+declare const GLOBAL_CLASS_NAME = "dark";
+declare const COLOR_THEME_PREFIX = "theme-";
+type ServerResolvedTheme = 'light' | 'dark' | 'system';
+interface ServerThemeData {
+    readonly theme: ServerResolvedTheme;
+    readonly themePreference: Theme;
+    readonly colorTheme: ColorTheme;
+}
+declare function buildServerThemeData(themeCookie: string | undefined, colorThemeCookie: string | undefined, options?: {
+    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

@@ -0,0 +1 @@
+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,91 +1,110 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "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"
-  },
-  "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",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tonyedgal/spaceman-react-theme-animation.git"
+  },
   "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",
-    "prettier:check": "prettier --check . --config ./.prettierrc",
-    "prettier:fix": "prettier --write . --config ./.prettierrc",
-    "changeset": "changeset add --type patch",
-    "changeset:patch": "changeset add --type patch",
-    "changeset:feature": "changeset add --type minor",
-    "changeset:breaking": "changeset add --type major",
-    "changeset:custom": "changeset",
-    "version-packages": "changeset version",
-    "release": "npm run build && changeset publish"
-  },
-  "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17",
-    "motion": ">=11",
-    "@radix-ui/react-select": ">=2"
+  "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"
+      }
+    },
+    "./core": {
+      "import": {
+        "types": "./dist/core/index.d.ts",
+        "default": "./dist/core/index.js"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react/index.d.ts",
+        "default": "./dist/react/index.js"
+      }
+    },
+    "./tanstack": {
+      "import": {
+        "types": "./dist/tanstack/index.d.ts",
+        "default": "./dist/tanstack/index.js"
+      }
+    },
+    "./package.json": "./package.json"
   },
-  "devDependencies": {
-    "@changesets/cli": "^2.27.1",
-    "@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"
+  "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",
+    "test": "node scripts/smoke-subpath-imports.mjs",
+    "test:browser": "playwright test",
+    "test:types": "tsc --noEmit -p tests/tsconfig.json",
+    "test:unit": "node --test tests/*.test.mjs",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/dist/cjs/components/NextThemeProvider.d.ts

@@ -1,81 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Theme, ColorTheme, ThemeAnimationType } from '../types';
-/**
- * Context type for the Next Theme Provider
- */
-interface NextThemeContextType {
-    ref: React.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;
-    switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
-}
-/**
- * Props for the Next Theme Provider
- */
-interface NextThemeProviderProps {
-    children: ReactNode;
-    themes?: Theme[];
-    colorThemes?: ColorTheme[];
-    defaultTheme?: Theme;
-    defaultColorTheme?: ColorTheme;
-    animationType?: ThemeAnimationType;
-    duration?: number;
-    storageKey?: string;
-    colorStorageKey?: string;
-    attribute?: 'class' | 'data-theme';
-    globalClassName?: string;
-    colorThemePrefix?: string;
-    nonce?: string;
-    disableAnimationOnInit?: boolean;
-    disablePreHydrationScript?: boolean;
-}
-/**
- * Next Theme Provider - Next.js optimized theme management with animations
- *
- * This provider is specifically optimized for Next.js and SSR frameworks with
- * pre-hydration script injection to prevent flash of wrong theme.
- *
- * Features:
- * - Pre-hydration script for flash prevention (SSR apps)
- * - Animated theme transitions via View Transitions API
- * - Multi-dimensional theming (theme + colorTheme)
- * - System theme detection
- * - CSP support via nonce prop
- *
- * @param children - React children to wrap with theme context
- * @param themes - Available theme options
- * @param colorThemes - Available color theme options
- * @param defaultTheme - Default theme to use
- * @param defaultColorTheme - Default color theme to use
- * @param animationType - Animation type for theme transitions
- * @param duration - Animation duration in milliseconds
- * @param storageKey - LocalStorage key for theme preference
- * @param colorStorageKey - LocalStorage key for color theme preference
- * @param attribute - HTML attribute to use for theme ('class' or 'data-theme')
- * @param globalClassName - Class name for dark theme (when using 'class' attribute)
- * @param colorThemePrefix - Prefix for color theme classes
- * @param nonce - CSP nonce for inline script (SSR apps)
- * @param disableAnimationOnInit - Skip animation during initial hydration
- * @param disablePreHydrationScript - Disable flash prevention script (for SPAs without SSR)
- */
-export declare const NextThemeProvider: React.FC<NextThemeProviderProps>;
-/**
- * Hook to consume the Next Theme context
- *
- * @returns Theme context value with all theme state and methods
- * @throws Error if used outside of NextThemeProvider
- */
-export declare const useNextTheme: () => NextThemeContextType;
-export {};