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

package/dist/index.cjs

@@ -0,0 +1,1756 @@
+'use strict';
+
+var React4 = require('react');
+var reactDom = require('react-dom');
+var react = require('motion/react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+var SelectPrimitive = require('@radix-ui/react-select');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React4__default = /*#__PURE__*/_interopDefault(React4);
+var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+
+// src/react/hooks/use-theme-animation.ts
+
+// 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 createBlurCircleMask = (blur) => {
+  const isHighResolution = isBrowser && (window.innerWidth >= 3e3 || window.innerHeight >= 2e3);
+  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>')`;
+};
+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;
+};
+var createCircleAnimation = (config) => {
+  const { x, y, duration, easing } = config;
+  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);
+  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)"
+    }
+  );
+};
+var createSlideAnimation = (config) => {
+  const { a = -100, b = 0, x = 0, y = 0, duration, styleId } = config;
+  const styleElement = document.createElement("style");
+  styleElement.id = styleId;
+  styleElement.textContent = `
+    ::view-transition-old(root) {
+      animation-delay: ${duration}ms;
+    }
+    
+    ::view-transition-new(root) {
+      animation: move-in ${duration}ms;
+      animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1);
+    }
+    
+    @keyframes move-in {
+      from {
+        translate: ${a}% ${b}%;
+      }
+      to {
+        translate: ${x}% ${y}%;
+      }
+    }
+  `;
+  document.head.appendChild(styleElement);
+  setTimeout(() => {
+    const styleElement2 = document.getElementById(styleId);
+    if (styleElement2) {
+      styleElement2.remove();
+    }
+  }, duration);
+};
+var 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 >= 3e3 || window.innerHeight >= 2e3;
+  const scaleFactor = isHighResolution ? 2.5 : 4;
+  const optimalMaskSize = isHighResolution ? Math.min(viewportSize * scaleFactor, 5e3) : 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 styleElement2 = document.getElementById(styleId);
+    if (styleElement2) {
+      styleElement2.remove();
+    }
+  }, duration);
+};
+
+// src/react/hooks/use-theme-animation.ts
+var isBrowser2 = typeof window !== "undefined";
+var useThemeAnimation = (props = {}) => {
+  const {
+    duration: propsDuration = 750,
+    easing = "ease-in-out",
+    animationType = "circle" /* CIRCLE */,
+    blurAmount = 2,
+    styleId = "spaceman-theme-style",
+    themes = ["light", "dark", "system"],
+    colorThemes = ["default"],
+    defaultTheme = "system",
+    defaultColorTheme = "default",
+    globalClassName = "dark",
+    colorThemePrefix = "theme-",
+    attribute = "class",
+    value,
+    enableColorScheme = true,
+    storageKey = "theme",
+    colorStorageKey = "color-theme",
+    theme: externalTheme,
+    colorTheme: externalColorTheme,
+    onThemeChange,
+    onColorThemeChange,
+    initialTheme,
+    initialColorTheme,
+    systemThemeMode = "js",
+    // Slide animation options
+    slideDirection = "left",
+    slideFromX,
+    slideFromY,
+    slideToX = 0,
+    slideToY = 0
+  } = props;
+  const isHighResolution = isBrowser2 && (window.innerWidth >= 3e3 || window.innerHeight >= 2e3);
+  const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
+  const [mounted, setMounted] = React4.useState(false);
+  React4.useEffect(() => {
+    injectBaseStyles();
+    setMounted(true);
+  }, []);
+  const [internalTheme, setInternalTheme] = React4.useState(() => {
+    if (initialTheme !== void 0) return initialTheme;
+    if (!isBrowser2) return defaultTheme;
+    const saved = localStorage.getItem(storageKey);
+    return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
+  });
+  const [internalColorTheme, setInternalColorTheme] = React4.useState(() => {
+    if (initialColorTheme !== void 0) return initialColorTheme;
+    if (!isBrowser2) 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] = React4.useState(() => getSystemTheme());
+  const systemTheme = getSystemTheme();
+  const resolvedTheme = resolveTheme(currentTheme);
+  React4.useEffect(() => {
+    if (!isBrowser2) return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => setSystemTheme(getSystemTheme());
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  React4.useEffect(() => {
+    if (!isBrowser2 || !mounted) return;
+    const element = document.documentElement;
+    const lightValue = value?.light;
+    const darkValue = value?.dark ?? globalClassName;
+    const systemValue = value?.system ?? "system";
+    if (attribute === "data-theme") {
+      if (systemThemeMode === "css" && currentTheme === "system") {
+        element.setAttribute("data-theme", systemValue);
+      } else {
+        element.setAttribute(
+          "data-theme",
+          resolvedTheme === "dark" ? darkValue : lightValue ?? "light"
+        );
+      }
+    } else {
+      if (lightValue) {
+        element.classList.remove(lightValue);
+      }
+      element.classList.remove(darkValue, systemValue, "auto");
+      if (systemThemeMode === "css" && currentTheme === "system") {
+        element.classList.add(systemValue);
+      } else if (resolvedTheme === "dark") {
+        element.classList.add(darkValue);
+      } else if (lightValue) {
+        element.classList.add(lightValue);
+      } else {
+        element.classList.remove(darkValue);
+      }
+    }
+    if (enableColorScheme) {
+      element.style.colorScheme = systemThemeMode === "css" && currentTheme === "system" ? "" : resolvedTheme;
+    } else {
+      element.style.removeProperty("color-scheme");
+    }
+    colorThemes.forEach((theme) => {
+      element.classList.remove(`${colorThemePrefix}${theme}`);
+    });
+    element.classList.add(`${colorThemePrefix}${currentColorTheme}`);
+  }, [
+    resolvedTheme,
+    currentTheme,
+    currentColorTheme,
+    globalClassName,
+    colorThemePrefix,
+    colorThemes,
+    attribute,
+    value,
+    enableColorScheme,
+    mounted,
+    systemThemeMode
+  ]);
+  const ref = React4.useRef(null);
+  const setTheme = React4.useCallback(
+    (newTheme) => {
+      if (isBrowser2) {
+        localStorage.setItem(storageKey, newTheme);
+      }
+      if (externalTheme === void 0) {
+        setInternalTheme(newTheme);
+      }
+      if (onThemeChange) {
+        onThemeChange(newTheme);
+      }
+    },
+    [onThemeChange, externalTheme, storageKey]
+  );
+  const setColorTheme = React4.useCallback(
+    (newColorTheme) => {
+      if (isBrowser2) {
+        localStorage.setItem(colorStorageKey, newColorTheme);
+      }
+      if (externalColorTheme === void 0) {
+        setInternalColorTheme(newColorTheme);
+      }
+      if (onColorThemeChange) {
+        onColorThemeChange(newColorTheme);
+      }
+    },
+    [onColorThemeChange, externalColorTheme, colorStorageKey]
+  );
+  const switchTheme = React4.useCallback(
+    async (newTheme, animationOff = false) => {
+      if (!ref.current || !supportsViewTransitions() || prefersReducedMotion() || animationOff) {
+        setTheme(newTheme);
+        return;
+      }
+      const getSlideFromCoords = (direction) => {
+        switch (direction) {
+          case "left":
+            return { a: -100, b: 0 };
+          case "right":
+            return { a: 100, b: 0 };
+          case "top":
+            return { a: 0, b: -100 };
+          case "bottom":
+            return { a: 0, b: 100 };
+          case "top-left":
+            return { a: -100, b: -100 };
+          case "top-right":
+            return { a: 100, b: -100 };
+          case "bottom-left":
+            return { a: -100, b: 100 };
+          case "bottom-right":
+            return { a: 100, b: 100 };
+          default:
+            return { a: -100, b: 0 };
+        }
+      };
+      let animationConfig;
+      if (animationType === "slide" /* SLIDE */) {
+        const fromCoords = slideFromX !== void 0 && slideFromY !== void 0 ? { a: slideFromX, b: slideFromY } : getSlideFromCoords(slideDirection);
+        animationConfig = {
+          a: fromCoords.a,
+          b: fromCoords.b,
+          x: slideToX,
+          y: slideToY,
+          duration,
+          easing,
+          animationType,
+          blurAmount,
+          styleId
+        };
+      } else {
+        const { top, left, width, height } = ref.current.getBoundingClientRect();
+        const x = left + width / 2;
+        const y = top + height / 2;
+        animationConfig = {
+          x,
+          y,
+          duration,
+          easing,
+          animationType,
+          blurAmount,
+          styleId
+        };
+      }
+      if (animationType === "blur-circle" /* BLUR_CIRCLE */) {
+        createBlurCircleAnimation(animationConfig);
+      }
+      if (animationType === "slide" /* SLIDE */) {
+        createSlideAnimation(animationConfig);
+      }
+      await document.startViewTransition(() => {
+        reactDom.flushSync(() => {
+          setTheme(newTheme);
+        });
+      }).ready;
+      if (animationType === "circle" /* CIRCLE */) {
+        createCircleAnimation(animationConfig);
+      }
+    },
+    [
+      setTheme,
+      duration,
+      easing,
+      animationType,
+      blurAmount,
+      styleId,
+      slideDirection,
+      slideFromX,
+      slideFromY,
+      slideToX,
+      slideToY
+    ]
+  );
+  const switchColorTheme = React4.useCallback(
+    (newColorTheme) => {
+      if (colorThemes.indexOf(newColorTheme) === -1) {
+        console.warn(
+          `Color theme "${newColorTheme}" not found in available themes`
+        );
+        return;
+      }
+      setColorTheme(newColorTheme);
+    },
+    [colorThemes, setColorTheme]
+  );
+  const toggleTheme = React4.useCallback(
+    async (animationOff = false) => {
+      const newTheme = resolvedTheme === "dark" ? "light" : "dark";
+      await switchTheme(newTheme, animationOff);
+    },
+    [resolvedTheme, switchTheme]
+  );
+  const toggleLightTheme = React4.useCallback(
+    async (animationOff = false) => {
+      if (resolvedTheme === "light") return;
+      await switchTheme("light", animationOff);
+    },
+    [resolvedTheme, switchTheme]
+  );
+  const toggleDarkTheme = React4.useCallback(
+    async (animationOff = false) => {
+      if (resolvedTheme === "dark") return;
+      await switchTheme("dark", animationOff);
+    },
+    [resolvedTheme, switchTheme]
+  );
+  const toggleColorTheme = React4.useCallback(() => {
+    const currentIndex = colorThemes.indexOf(currentColorTheme);
+    const nextIndex = (currentIndex + 1) % colorThemes.length;
+    const nextColorTheme = colorThemes[nextIndex];
+    setColorTheme(nextColorTheme);
+  }, [currentColorTheme, colorThemes, setColorTheme]);
+  const createColorThemeToggle = React4.useCallback(
+    (targetColorTheme) => {
+      return () => {
+        if (colorThemes.indexOf(targetColorTheme) === -1) {
+          console.warn(
+            `Color theme "${targetColorTheme}" not found in available themes`
+          );
+          return;
+        }
+        setColorTheme(targetColorTheme);
+      };
+    },
+    [colorThemes, setColorTheme]
+  );
+  const isColorThemeActive = React4.useCallback(
+    (targetColorTheme) => {
+      return currentColorTheme === targetColorTheme;
+    },
+    [currentColorTheme]
+  );
+  return {
+    ref,
+    theme: currentTheme,
+    colorTheme: currentColorTheme,
+    resolvedTheme,
+    systemTheme,
+    setTheme,
+    setColorTheme,
+    switchTheme,
+    switchColorTheme,
+    toggleTheme,
+    toggleLightTheme,
+    toggleDarkTheme,
+    toggleColorTheme,
+    createColorThemeToggle,
+    isColorThemeActive
+  };
+};
+var SharedThemeContext = React4.createContext(
+  null
+);
+var useSharedThemeContext = () => {
+  return React4.useContext(SharedThemeContext);
+};
+var SunIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+    ]
+  }
+);
+var MoonIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+  }
+);
+var MonitorIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "20", height: "14", x: "2", y: "3", rx: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", x2: "16", y1: "21", y2: "21" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "17", y2: "21" })
+    ]
+  }
+);
+var ThemeOption = ({
+  icon,
+  value,
+  isActive,
+  isHovered,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  buttonRef
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref: isActive ? buttonRef : void 0,
+      className: clsx.clsx(
+        "relative flex h-9 w-12 cursor-pointer items-center justify-center",
+        "text-muted-foreground hover:text-foreground",
+        isActive && "text-foreground font-medium"
+      ),
+      role: "radio",
+      "aria-checked": isActive,
+      "aria-label": `Switch to ${value} theme`,
+      onClick: (event) => onClick(value, event),
+      onMouseEnter,
+      onMouseLeave,
+      style: {
+        borderRadius: "var(--radius)"
+      },
+      children: [
+        isHovered && /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.div,
+          {
+            layoutId: "theme-hover",
+            className: "absolute inset-0 bg-muted",
+            style: {
+              borderRadius: "var(--radius)"
+            },
+            transition: {
+              type: "spring",
+              bounce: 0,
+              stiffness: 100,
+              damping: 10,
+              duration: 0.3
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "[&_svg]:size-4", children: icon }) }),
+        isActive && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute bottom-0 left-1/2 h-0.5 w-6 -translate-x-1/2 rounded-full",
+            style: {
+              backgroundColor: "hsl(var(--primary))"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+var THEME_OPTIONS = [
+  {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(MonitorIcon, {}),
+    value: "system"
+  },
+  {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {}),
+    value: "light"
+  },
+  {
+    icon: /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {}),
+    value: "dark"
+  }
+];
+var ThemeSwitcherView = ({
+  className,
+  onSwitchTheme,
+  theme,
+  themes,
+  themeRef
+}) => {
+  const [isMounted, setIsMounted] = React4.useState(false);
+  const [hoveredTheme, setHoveredTheme] = React4.useState(null);
+  React4.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const handleThemeChange = async (newTheme, event) => {
+    await onSwitchTheme(newTheme, event);
+  };
+  const filteredOptions = THEME_OPTIONS.filter(
+    (option) => themes.includes(option.value)
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: clsx.clsx(
+        "inline-flex h-9 items-center overflow-hidden bg-background shadow-sm border border-border",
+        isMounted ? "opacity-100" : "opacity-0",
+        className
+      ),
+      style: {
+        borderRadius: "var(--radius)",
+        backgroundColor: "hsl(var(--background))"
+      },
+      role: "radiogroup",
+      onMouseLeave: () => setHoveredTheme(null),
+      children: filteredOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        ThemeOption,
+        {
+          icon: option.icon,
+          value: option.value,
+          isActive: theme === option.value,
+          isHovered: hoveredTheme === option.value,
+          onClick: handleThemeChange,
+          onMouseEnter: () => setHoveredTheme(option.value),
+          onMouseLeave: () => {
+          },
+          buttonRef: theme === option.value ? themeRef : void 0
+        },
+        option.value
+      ))
+    }
+  );
+};
+var ThemeSwitcherWithContext = ({ className, contextTheme, themes = ["light", "dark", "system"] }) => {
+  const handleSwitchTheme = async (theme, event) => {
+    if (contextTheme.switchThemeFromElement && event) {
+      await contextTheme.switchThemeFromElement(theme, event.currentTarget);
+      return;
+    }
+    await contextTheme.switchTheme(theme);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeSwitcherView,
+    {
+      className,
+      onSwitchTheme: handleSwitchTheme,
+      theme: contextTheme.theme,
+      themes,
+      themeRef: contextTheme.ref
+    }
+  );
+};
+var ThemeSwitcherStandalone = ({
+  themes = ["light", "dark", "system"],
+  currentTheme,
+  onThemeChange,
+  animationType,
+  duration,
+  className
+}) => {
+  const standaloneHook = useThemeAnimation({
+    animationType,
+    duration,
+    themes,
+    ...currentTheme !== void 0 && { theme: currentTheme },
+    onThemeChange
+  });
+  const handleSwitchTheme = async (theme) => {
+    await standaloneHook.switchTheme(theme);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeSwitcherView,
+    {
+      className,
+      onSwitchTheme: handleSwitchTheme,
+      theme: standaloneHook.theme,
+      themes,
+      themeRef: standaloneHook.ref
+    }
+  );
+};
+var ThemeSwitcher = (props) => {
+  const contextTheme = useSharedThemeContext();
+  if (contextTheme) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeSwitcherWithContext, { ...props, contextTheme });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeSwitcherStandalone, { ...props });
+};
+function Select({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Root, { "data-slot": "select", ...props });
+}
+function SelectValue({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Value, { "data-slot": "select-value", ...props });
+}
+var ChevronDownIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
+  }
+);
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.Trigger,
+    {
+      "data-slot": "select-trigger",
+      "data-size": size,
+      className: clsx.clsx(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
+      ]
+    }
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    SelectPrimitive__namespace.Content,
+    {
+      "data-slot": "select-content",
+      className: clsx.clsx(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      ),
+      position,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SelectPrimitive__namespace.Viewport,
+        {
+          className: clsx.clsx(
+            "p-1",
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ),
+          children
+        }
+      )
+    }
+  ) });
+}
+function SelectItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SelectPrimitive__namespace.Item,
+    {
+      "data-slot": "select-item",
+      className: clsx.clsx(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.ItemText, { children })
+      ]
+    }
+  );
+}
+var ThemeSelectorView = ({
+  colorTheme,
+  colorThemes,
+  onSelectColorTheme
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: colorThemes.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Select,
+    {
+      value: colorTheme,
+      onValueChange: (value) => onSelectColorTheme(value),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "capitalize", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: "Choose a color theme" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: colorThemes.map((theme) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { className: "capitalize", value: theme, children: theme }, theme)) })
+      ]
+    }
+  ) }) : null });
+};
+var ThemeSelectorWithContext = ({ colorThemes = ["default"], contextTheme }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeSelectorView,
+    {
+      colorTheme: contextTheme.colorTheme,
+      colorThemes,
+      onSelectColorTheme: contextTheme.setColorTheme
+    }
+  );
+};
+var ThemeSelectorStandalone = ({
+  themes = ["light", "dark", "system"],
+  colorThemes = ["default"],
+  currentColorTheme,
+  onColorThemeChange,
+  animationType,
+  duration
+}) => {
+  const standaloneHook = useThemeAnimation({
+    animationType,
+    duration,
+    themes,
+    colorThemes,
+    ...currentColorTheme !== void 0 && { colorTheme: currentColorTheme },
+    onColorThemeChange
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ThemeSelectorView,
+    {
+      colorTheme: standaloneHook.colorTheme,
+      colorThemes,
+      onSelectColorTheme: standaloneHook.setColorTheme
+    }
+  );
+};
+var ThemeSelector = (props) => {
+  const contextTheme = useSharedThemeContext();
+  if (contextTheme) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeSelectorWithContext, { ...props, contextTheme });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeSelectorStandalone, { ...props });
+};
+
+// src/react/components/provider-helpers.ts
+var withElementAsRef = async (ref, element, run) => {
+  if (ref.current) {
+    const originalRef = ref.current;
+    Object.defineProperty(ref, "current", {
+      value: element,
+      writable: true,
+      configurable: true
+    });
+    await run();
+    Object.defineProperty(ref, "current", {
+      value: originalRef,
+      writable: true,
+      configurable: true
+    });
+    return;
+  }
+  Object.defineProperty(ref, "current", {
+    value: element,
+    writable: true,
+    configurable: true
+  });
+  await run();
+};
+var getBrowserSystemTheme = () => {
+  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+var getNextResolvedTheme = (resolvedTheme) => {
+  return resolvedTheme === "dark" ? "light" : "dark";
+};
+var SpacemanThemeContext = React4.createContext(void 0);
+var SpacemanThemeProvider = ({
+  children,
+  themes = ["light", "dark", "system"],
+  colorThemes = ["default"],
+  defaultTheme = "system",
+  defaultColorTheme = "default",
+  animationType = "circle" /* CIRCLE */,
+  duration = 750
+}) => {
+  const [mounted, setMounted] = React4.useState(false);
+  const themeState = useThemeAnimation({
+    themes,
+    colorThemes,
+    defaultTheme,
+    defaultColorTheme,
+    animationType,
+    duration
+  });
+  React4.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const switchThemeFromElement = async (theme, element) => {
+    await withElementAsRef(themeState.ref, element, async () => {
+      await themeState.switchTheme(theme);
+    });
+  };
+  if (!mounted) {
+    const loadingContextValue = {
+      ref: { current: null },
+      theme: defaultTheme,
+      colorTheme: defaultColorTheme,
+      resolvedTheme: defaultTheme === "dark" ? "dark" : "light",
+      setTheme: () => {
+      },
+      setColorTheme: () => {
+      },
+      switchTheme: async () => {
+      },
+      switchThemeFromElement: async () => {
+      },
+      switchColorTheme: () => {
+      },
+      toggleTheme: async () => {
+      },
+      toggleLightTheme: async () => {
+      },
+      toggleDarkTheme: async () => {
+      },
+      toggleColorTheme: () => {
+      },
+      createColorThemeToggle: () => () => {
+      },
+      isColorThemeActive: () => false
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(SpacemanThemeContext.Provider, { value: loadingContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(SharedThemeContext.Provider, { value: loadingContextValue, children }) });
+  }
+  const contextValue = {
+    ref: themeState.ref,
+    theme: themeState.theme,
+    colorTheme: themeState.colorTheme,
+    resolvedTheme: themeState.resolvedTheme,
+    setTheme: themeState.setTheme,
+    setColorTheme: themeState.setColorTheme,
+    switchTheme: themeState.switchTheme,
+    switchThemeFromElement,
+    switchColorTheme: themeState.switchColorTheme,
+    toggleTheme: themeState.toggleTheme,
+    toggleLightTheme: themeState.toggleLightTheme,
+    toggleDarkTheme: themeState.toggleDarkTheme,
+    toggleColorTheme: themeState.toggleColorTheme,
+    createColorThemeToggle: themeState.createColorThemeToggle,
+    isColorThemeActive: themeState.isColorThemeActive
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(SpacemanThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(SharedThemeContext.Provider, { value: contextValue, children }) });
+};
+var useSpacemanTheme = () => {
+  const context = React4.useContext(SpacemanThemeContext);
+  if (context === void 0) {
+    throw new Error(
+      "useSpacemanTheme must be used within a SpacemanThemeProvider"
+    );
+  }
+  return context;
+};
+var NextThemeContext = React4.createContext(
+  void 0
+);
+var createDisableTransitions = () => {
+  const css = document.createElement("style");
+  css.textContent = "*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";
+  document.head.appendChild(css);
+  window.getComputedStyle(document.body);
+  return () => {
+    setTimeout(() => {
+      if (css.parentNode) {
+        css.parentNode.removeChild(css);
+      }
+    }, 1);
+  };
+};
+var generatePreHydrationScript = ({
+  attribute,
+  colorStorageKey,
+  colorThemePrefix,
+  defaultColorTheme,
+  defaultTheme,
+  enableColorScheme,
+  enableSystem,
+  globalClassName,
+  storageKey,
+  value
+}) => {
+  const lightValue = value?.light ?? "light";
+  const darkValue = value?.dark ?? globalClassName;
+  const systemValue = value?.system ?? "system";
+  return `(function(){try{var d=document.documentElement;var theme=localStorage.getItem('${storageKey}')||'${defaultTheme}';var colorTheme=localStorage.getItem('${colorStorageKey}')||'${defaultColorTheme}';if(!${JSON.stringify(
+    enableSystem
+  )}&&theme==='system'){theme='${defaultTheme === "system" ? "light" : defaultTheme}';}var resolved=theme==='system'?(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):theme;var attr='${attribute}';var lightValue='${lightValue}';var darkValue='${darkValue}';var systemValue='${systemValue}';if(attr==='data-theme'){d.setAttribute('data-theme',theme==='system'?systemValue:(resolved==='dark'?darkValue:lightValue));}else{d.classList.remove(lightValue,darkValue,systemValue,'auto');d.classList.add(theme==='system'?systemValue:(resolved==='dark'?darkValue:lightValue));}if(${JSON.stringify(
+    enableColorScheme
+  )}){d.style.colorScheme=theme==='system'?'':resolved;}else{d.style.removeProperty('color-scheme');}d.classList.add('${colorThemePrefix}'+colorTheme);}catch(e){console.warn('Theme pre-hydration script failed:',e);}})();`;
+};
+var ThemePreHydrationScript = React4__default.default.memo(
+  ({
+    attribute,
+    colorStorageKey,
+    colorThemePrefix,
+    defaultColorTheme,
+    defaultTheme,
+    enableColorScheme,
+    enableSystem,
+    globalClassName,
+    nonce,
+    scriptProps,
+    storageKey,
+    value
+  }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "script",
+    {
+      ...scriptProps,
+      nonce,
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: {
+        __html: generatePreHydrationScript({
+          attribute,
+          colorStorageKey,
+          colorThemePrefix,
+          defaultColorTheme,
+          defaultTheme,
+          enableColorScheme,
+          enableSystem,
+          globalClassName,
+          storageKey,
+          value
+        })
+      }
+    }
+  )
+);
+ThemePreHydrationScript.displayName = "ThemePreHydrationScript";
+var NextThemeProvider = ({
+  attribute = "class",
+  children,
+  colorStorageKey = "color-theme",
+  colorThemePrefix = "theme-",
+  colorThemes = ["default"],
+  defaultColorTheme = "default",
+  defaultTheme = "system",
+  disableAnimationOnInit = true,
+  disablePreHydrationScript = false,
+  disableTransitionOnChange = false,
+  duration = 750,
+  enableColorScheme = true,
+  enableSystem = true,
+  forcedTheme,
+  globalClassName = "dark",
+  nonce,
+  onColorThemeChange,
+  onThemeChange,
+  scriptProps,
+  storageKey = "theme",
+  themes,
+  value,
+  animationType = "circle" /* CIRCLE */
+}) => {
+  const allowedThemes = React4.useMemo(() => {
+    if (themes && themes.length > 0) {
+      return themes;
+    }
+    return enableSystem ? ["light", "dark", "system"] : ["light", "dark"];
+  }, [enableSystem, themes]);
+  const effectiveDefaultTheme = React4.useMemo(() => {
+    if (defaultTheme === "system" && !enableSystem) {
+      return "light";
+    }
+    return defaultTheme;
+  }, [defaultTheme, enableSystem]);
+  const [mounted, setMounted] = React4.useState(false);
+  const themeState = useThemeAnimation({
+    animationType,
+    attribute,
+    colorStorageKey,
+    colorTheme: forcedTheme ? void 0 : void 0,
+    colorThemePrefix,
+    colorThemes,
+    defaultColorTheme,
+    defaultTheme: effectiveDefaultTheme,
+    duration,
+    enableColorScheme,
+    globalClassName,
+    onColorThemeChange,
+    onThemeChange,
+    storageKey,
+    theme: forcedTheme,
+    themes: allowedThemes,
+    value
+  });
+  React4.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const withTransitionsDisabled = React4.useCallback(
+    async (fn) => {
+      const cleanup = disableTransitionOnChange ? createDisableTransitions() : void 0;
+      try {
+        return await fn();
+      } finally {
+        cleanup?.();
+      }
+    },
+    [disableTransitionOnChange]
+  );
+  const setTheme = React4.useCallback(
+    (theme) => {
+      void withTransitionsDisabled(async () => {
+        themeState.setTheme(theme);
+      });
+    },
+    [themeState, withTransitionsDisabled]
+  );
+  const switchTheme = React4.useCallback(
+    async (theme, animationOff = false) => {
+      await withTransitionsDisabled(async () => {
+        if (!mounted && disableAnimationOnInit) {
+          themeState.setTheme(theme);
+          return;
+        }
+        await themeState.switchTheme(theme, animationOff);
+      });
+    },
+    [disableAnimationOnInit, mounted, themeState, withTransitionsDisabled]
+  );
+  const switchThemeFromElement = React4.useCallback(
+    async (theme, element) => {
+      await withTransitionsDisabled(async () => {
+        if (!mounted && disableAnimationOnInit) {
+          themeState.setTheme(theme);
+          return;
+        }
+        await withElementAsRef(themeState.ref, element, async () => {
+          await themeState.switchTheme(theme);
+        });
+      });
+    },
+    [disableAnimationOnInit, mounted, themeState, withTransitionsDisabled]
+  );
+  const contextValue = React4.useMemo(
+    () => ({
+      ref: themeState.ref,
+      theme: themeState.theme,
+      colorTheme: themeState.colorTheme,
+      resolvedTheme: themeState.resolvedTheme,
+      systemTheme: themeState.systemTheme,
+      setTheme,
+      setColorTheme: themeState.setColorTheme,
+      switchTheme,
+      switchColorTheme: themeState.switchColorTheme,
+      toggleTheme: async (animationOff = false) => switchTheme(
+        getNextResolvedTheme(themeState.resolvedTheme),
+        animationOff
+      ),
+      toggleLightTheme: async (animationOff = false) => {
+        if (themeState.resolvedTheme === "light") return;
+        await switchTheme("light", animationOff);
+      },
+      toggleDarkTheme: async (animationOff = false) => {
+        if (themeState.resolvedTheme === "dark") return;
+        await switchTheme("dark", animationOff);
+      },
+      toggleColorTheme: themeState.toggleColorTheme,
+      createColorThemeToggle: themeState.createColorThemeToggle,
+      isColorThemeActive: themeState.isColorThemeActive,
+      switchThemeFromElement
+    }),
+    [setTheme, switchTheme, switchThemeFromElement, themeState]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(NextThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(SharedThemeContext.Provider, { value: contextValue, children: [
+    !disablePreHydrationScript && !forcedTheme ? /* @__PURE__ */ jsxRuntime.jsx(
+      ThemePreHydrationScript,
+      {
+        attribute,
+        colorStorageKey,
+        colorThemePrefix,
+        defaultColorTheme,
+        defaultTheme: effectiveDefaultTheme,
+        enableColorScheme,
+        enableSystem,
+        globalClassName,
+        nonce,
+        scriptProps,
+        storageKey,
+        value
+      }
+    ) : null,
+    children
+  ] }) });
+};
+var ThemeProvider = NextThemeProvider;
+var useNextTheme = () => {
+  const context = React4.useContext(NextThemeContext);
+  if (context === void 0) {
+    throw new Error("useNextTheme must be used within a NextThemeProvider");
+  }
+  return context;
+};
+var useTheme = useNextTheme;
+var isBrowser3 = typeof window !== "undefined";
+var useSyncServerThemeStorage = ({
+  enabled,
+  theme,
+  colorTheme,
+  storageKey,
+  colorStorageKey
+}) => {
+  React4.useEffect(() => {
+    if (!enabled || !isBrowser3) return;
+    if (theme) {
+      localStorage.setItem(storageKey, theme);
+    }
+    if (colorTheme) {
+      localStorage.setItem(colorStorageKey, colorTheme);
+    }
+  }, [enabled, theme, colorTheme, storageKey, colorStorageKey]);
+};
+
+// 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
+  };
+}
+var TanStackThemeContext = React4.createContext(void 0);
+var generateTanStackPreHydrationScript = (storageKey, colorStorageKey, defaultTheme, defaultColorTheme, globalClassName, colorThemePrefix, systemThemeMode) => {
+  return `
+(function() {
+  try {
+    var theme = localStorage.getItem('${storageKey}') || '${defaultTheme}';
+    var colorTheme = localStorage.getItem('${colorStorageKey}') || '${defaultColorTheme}';
+    var el = document.documentElement;
+    var resolved;
+    if (theme === 'system') {
+      if ('${systemThemeMode}' === 'css') {
+        el.classList.remove('${globalClassName}');
+        el.classList.remove('auto');
+        el.classList.remove('system');
+        el.classList.add('system');
+        el.style.colorScheme = '';
+      } else {
+        resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        if (resolved === 'dark') {
+          el.classList.add('${globalClassName}');
+        } else {
+          el.classList.remove('${globalClassName}');
+        }
+        el.classList.remove('system');
+        el.classList.remove('auto');
+        el.style.colorScheme = resolved;
+      }
+    } else {
+      resolved = theme;
+      el.classList.remove('system');
+      el.classList.remove('auto');
+      if (resolved === 'dark') {
+        el.classList.add('${globalClassName}');
+      } else {
+        el.classList.remove('${globalClassName}');
+      }
+      el.style.colorScheme = resolved;
+    }
+    if (colorTheme && colorTheme !== 'default') {
+      el.classList.add('${colorThemePrefix}' + colorTheme);
+    }
+  } catch (e) {
+    console.warn('Theme pre-hydration script failed:', e);
+  }
+})();
+`;
+};
+var TanStackStartThemeScript = React4__default.default.memo(
+  ({
+    storageKey = STORAGE_KEY,
+    colorStorageKey = COLOR_STORAGE_KEY,
+    defaultTheme = "system",
+    defaultColorTheme = "default",
+    globalClassName = GLOBAL_CLASS_NAME,
+    colorThemePrefix = COLOR_THEME_PREFIX,
+    nonce,
+    systemThemeMode = "js"
+  }) => {
+    const scriptContent = generateTanStackPreHydrationScript(
+      storageKey,
+      colorStorageKey,
+      defaultTheme,
+      defaultColorTheme,
+      globalClassName,
+      colorThemePrefix,
+      systemThemeMode
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "script",
+      {
+        nonce,
+        suppressHydrationWarning: true,
+        dangerouslySetInnerHTML: { __html: scriptContent }
+      }
+    );
+  }
+);
+TanStackStartThemeScript.displayName = "TanStackStartThemeScript";
+var useHydrated = () => {
+  return React4.useSyncExternalStore(
+    () => () => {
+    },
+    () => true,
+    () => false
+  );
+};
+var getNextColorTheme = (colorThemes, currentColorTheme) => {
+  if (colorThemes.length === 0) return currentColorTheme;
+  const currentIndex = colorThemes.indexOf(currentColorTheme);
+  const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % colorThemes.length;
+  return colorThemes[nextIndex];
+};
+var TanStackThemeProvider = ({
+  children,
+  themes = ["light", "dark", "system"],
+  colorThemes = ["default"],
+  defaultTheme = "system",
+  defaultColorTheme = "default",
+  animationType = "circle" /* CIRCLE */,
+  duration = 750,
+  storageKey = STORAGE_KEY,
+  colorStorageKey = COLOR_STORAGE_KEY,
+  globalClassName = GLOBAL_CLASS_NAME,
+  colorThemePrefix = COLOR_THEME_PREFIX,
+  serverTheme,
+  serverColorTheme,
+  systemThemeMode = "css",
+  onServerThemeChange,
+  onServerColorThemeChange
+}) => {
+  const isHydrated = useHydrated();
+  const hasServerTheme = serverTheme !== void 0;
+  const initialTheme = hasServerTheme ? serverTheme : void 0;
+  const themeState = useThemeAnimation({
+    themes,
+    colorThemes,
+    defaultTheme,
+    defaultColorTheme,
+    animationType,
+    duration,
+    storageKey,
+    colorStorageKey,
+    globalClassName,
+    colorThemePrefix,
+    initialTheme,
+    initialColorTheme: serverColorTheme,
+    systemThemeMode
+  });
+  useSyncServerThemeStorage({
+    enabled: hasServerTheme,
+    theme: initialTheme,
+    colorTheme: serverColorTheme,
+    storageKey,
+    colorStorageKey
+  });
+  const setThemeWithServer = React4.useCallback(
+    (newTheme) => {
+      themeState.setTheme(newTheme);
+      onServerThemeChange?.(newTheme);
+    },
+    [themeState, onServerThemeChange]
+  );
+  const setColorThemeWithServer = React4.useCallback(
+    (newColorTheme) => {
+      themeState.setColorTheme(newColorTheme);
+      onServerColorThemeChange?.(newColorTheme);
+    },
+    [themeState, onServerColorThemeChange]
+  );
+  const switchThemeWithHydrationAwareness = React4.useCallback(
+    async (theme, animationOff = false) => {
+      if (!isHydrated) {
+        setThemeWithServer(theme);
+        return;
+      }
+      await themeState.switchTheme(theme, animationOff);
+      onServerThemeChange?.(theme);
+    },
+    [isHydrated, themeState, setThemeWithServer, onServerThemeChange]
+  );
+  const toggleThemeWithHydrationAwareness = React4.useCallback(
+    async (animationOff = false) => {
+      const nextTheme = getNextResolvedTheme(themeState.resolvedTheme);
+      if (!isHydrated) {
+        setThemeWithServer(nextTheme);
+        return;
+      }
+      await themeState.toggleTheme(animationOff);
+      onServerThemeChange?.(nextTheme);
+    },
+    [isHydrated, themeState, setThemeWithServer, onServerThemeChange]
+  );
+  const toggleLightThemeWithHydrationAwareness = React4.useCallback(
+    async (animationOff = false) => {
+      if (!isHydrated) {
+        setThemeWithServer("light");
+        return;
+      }
+      await themeState.toggleLightTheme(animationOff);
+      onServerThemeChange?.("light");
+    },
+    [isHydrated, themeState, setThemeWithServer, onServerThemeChange]
+  );
+  const toggleDarkThemeWithHydrationAwareness = React4.useCallback(
+    async (animationOff = false) => {
+      if (!isHydrated) {
+        setThemeWithServer("dark");
+        return;
+      }
+      await themeState.toggleDarkTheme(animationOff);
+      onServerThemeChange?.("dark");
+    },
+    [isHydrated, themeState, setThemeWithServer, onServerThemeChange]
+  );
+  const switchColorThemeWithServer = React4.useCallback(
+    (newColorTheme) => {
+      themeState.switchColorTheme(newColorTheme);
+      onServerColorThemeChange?.(newColorTheme);
+    },
+    [themeState, onServerColorThemeChange]
+  );
+  const toggleColorThemeWithServer = React4.useCallback(() => {
+    const nextColorTheme = getNextColorTheme(colorThemes, themeState.colorTheme);
+    themeState.toggleColorTheme();
+    onServerColorThemeChange?.(nextColorTheme);
+  }, [colorThemes, themeState, onServerColorThemeChange]);
+  const createColorThemeToggleWithServer = React4.useCallback(
+    (targetColorTheme) => () => {
+      themeState.createColorThemeToggle(targetColorTheme)();
+      onServerColorThemeChange?.(targetColorTheme);
+    },
+    [themeState, onServerColorThemeChange]
+  );
+  const switchThemeFromElement = React4.useCallback(
+    async (theme, element) => {
+      if (!isHydrated) {
+        setThemeWithServer(theme);
+        return;
+      }
+      await withElementAsRef(themeState.ref, element, async () => {
+        await themeState.switchTheme(theme);
+      });
+      onServerThemeChange?.(theme);
+    },
+    [isHydrated, themeState, setThemeWithServer, onServerThemeChange]
+  );
+  const systemTheme = getBrowserSystemTheme();
+  const serverResolvedTheme = (() => {
+    if (hasServerTheme) {
+      if (serverTheme === "dark") return "dark";
+      if (serverTheme === "system") return systemTheme;
+      return "light";
+    }
+    return defaultTheme === "dark" ? "dark" : "light";
+  })();
+  if (!isHydrated) {
+    const loadingContextValue = {
+      ref: { current: null },
+      theme: initialTheme ?? defaultTheme,
+      colorTheme: serverColorTheme ?? defaultColorTheme,
+      resolvedTheme: serverResolvedTheme,
+      systemTheme: "light",
+      isHydrated: false,
+      setTheme: setThemeWithServer,
+      setColorTheme: setColorThemeWithServer,
+      switchTheme: async (theme) => setThemeWithServer(theme),
+      switchThemeFromElement: async (theme) => setThemeWithServer(theme),
+      switchColorTheme: switchColorThemeWithServer,
+      toggleTheme: async () => {
+        const nextTheme = serverResolvedTheme === "dark" ? "light" : "dark";
+        setThemeWithServer(nextTheme);
+      },
+      toggleLightTheme: async () => setThemeWithServer("light"),
+      toggleDarkTheme: async () => setThemeWithServer("dark"),
+      toggleColorTheme: toggleColorThemeWithServer,
+      createColorThemeToggle: createColorThemeToggleWithServer,
+      isColorThemeActive: themeState.isColorThemeActive
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(TanStackThemeContext.Provider, { value: loadingContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(SharedThemeContext.Provider, { value: loadingContextValue, children }) });
+  }
+  const contextValue = {
+    ref: themeState.ref,
+    theme: themeState.theme,
+    colorTheme: themeState.colorTheme,
+    resolvedTheme: themeState.resolvedTheme,
+    systemTheme,
+    isHydrated: true,
+    setTheme: setThemeWithServer,
+    setColorTheme: setColorThemeWithServer,
+    switchTheme: switchThemeWithHydrationAwareness,
+    switchThemeFromElement,
+    switchColorTheme: switchColorThemeWithServer,
+    toggleTheme: toggleThemeWithHydrationAwareness,
+    toggleLightTheme: toggleLightThemeWithHydrationAwareness,
+    toggleDarkTheme: toggleDarkThemeWithHydrationAwareness,
+    toggleColorTheme: toggleColorThemeWithServer,
+    createColorThemeToggle: createColorThemeToggleWithServer,
+    isColorThemeActive: themeState.isColorThemeActive
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TanStackThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(SharedThemeContext.Provider, { value: contextValue, children }) });
+};
+var useTanStackTheme = () => {
+  const context = React4.useContext(TanStackThemeContext);
+  if (context === void 0) {
+    throw new Error(
+      "useTanStackTheme must be used within a TanStackThemeProvider"
+    );
+  }
+  return context;
+};
+var ViteThemeContext = React4.createContext(
+  void 0
+);
+var ViteThemeProvider = ({
+  children,
+  themes = ["light", "dark", "system"],
+  colorThemes = ["default"],
+  defaultTheme = "system",
+  defaultColorTheme = "default",
+  animationType = "circle" /* CIRCLE */,
+  duration = 750,
+  attribute = "class",
+  disableTransitionOnChange = false,
+  storageKey = "vite-theme",
+  colorStorageKey = "vite-color-theme",
+  globalClassName = "dark",
+  colorThemePrefix = "theme-"
+}) => {
+  const themeState = useThemeAnimation({
+    themes,
+    colorThemes,
+    defaultTheme,
+    defaultColorTheme,
+    animationType,
+    duration,
+    storageKey,
+    colorStorageKey,
+    globalClassName: attribute === "class" ? globalClassName : void 0,
+    colorThemePrefix
+  });
+  const applyTransitionDisable = React4.useCallback(() => {
+    if (!disableTransitionOnChange) return () => {
+    };
+    const css = document.createElement("style");
+    css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
+    document.head.appendChild(css);
+    window.getComputedStyle(document.body);
+    return () => {
+      setTimeout(() => {
+        document.head.removeChild(css);
+      }, 1);
+    };
+  }, [disableTransitionOnChange]);
+  const wrappedSetTheme = React4.useCallback(
+    (theme) => {
+      const cleanup = applyTransitionDisable();
+      themeState.setTheme(theme);
+      cleanup();
+    },
+    [themeState.setTheme, applyTransitionDisable]
+  );
+  const wrappedSwitchTheme = React4.useCallback(
+    async (theme, animationOff = false) => {
+      const cleanup = applyTransitionDisable();
+      await themeState.switchTheme(theme, animationOff);
+      cleanup();
+    },
+    [themeState.switchTheme, applyTransitionDisable]
+  );
+  const wrappedToggleTheme = React4.useCallback(
+    async (animationOff = false) => {
+      const cleanup = applyTransitionDisable();
+      await themeState.toggleTheme(animationOff);
+      cleanup();
+    },
+    [themeState.toggleTheme, applyTransitionDisable]
+  );
+  const wrappedToggleLightTheme = React4.useCallback(
+    async (animationOff = false) => {
+      const cleanup = applyTransitionDisable();
+      await themeState.toggleLightTheme(animationOff);
+      cleanup();
+    },
+    [themeState.toggleLightTheme, applyTransitionDisable]
+  );
+  const wrappedToggleDarkTheme = React4.useCallback(
+    async (animationOff = false) => {
+      const cleanup = applyTransitionDisable();
+      await themeState.toggleDarkTheme(animationOff);
+      cleanup();
+    },
+    [themeState.toggleDarkTheme, applyTransitionDisable]
+  );
+  const switchThemeFromElement = async (theme, element) => {
+    const cleanup = applyTransitionDisable();
+    await withElementAsRef(themeState.ref, element, async () => {
+      await themeState.switchTheme(theme);
+    });
+    cleanup();
+  };
+  const systemTheme = getBrowserSystemTheme();
+  const contextValue = {
+    ref: themeState.ref,
+    theme: themeState.theme,
+    colorTheme: themeState.colorTheme,
+    resolvedTheme: themeState.resolvedTheme,
+    systemTheme,
+    setTheme: wrappedSetTheme,
+    setColorTheme: themeState.setColorTheme,
+    switchTheme: wrappedSwitchTheme,
+    switchThemeFromElement,
+    switchColorTheme: themeState.switchColorTheme,
+    toggleTheme: wrappedToggleTheme,
+    toggleLightTheme: wrappedToggleLightTheme,
+    toggleDarkTheme: wrappedToggleDarkTheme,
+    toggleColorTheme: themeState.toggleColorTheme,
+    createColorThemeToggle: themeState.createColorThemeToggle,
+    isColorThemeActive: themeState.isColorThemeActive
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(ViteThemeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(SharedThemeContext.Provider, { value: contextValue, children }) });
+};
+var useViteTheme = () => {
+  const context = React4.useContext(ViteThemeContext);
+  if (context === void 0) {
+    throw new Error("useViteTheme must be used within a ViteThemeProvider");
+  }
+  return context;
+};
+
+exports.COLOR_STORAGE_KEY = COLOR_STORAGE_KEY;
+exports.COLOR_THEME_PREFIX = COLOR_THEME_PREFIX;
+exports.GLOBAL_CLASS_NAME = GLOBAL_CLASS_NAME;
+exports.NextThemeProvider = NextThemeProvider;
+exports.STORAGE_KEY = STORAGE_KEY;
+exports.SpacemanThemeProvider = SpacemanThemeProvider;
+exports.TanStackStartThemeScript = TanStackStartThemeScript;
+exports.TanStackThemeProvider = TanStackThemeProvider;
+exports.ThemeAnimationType = ThemeAnimationType;
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeSelector = ThemeSelector;
+exports.ThemeSwitcher = ThemeSwitcher;
+exports.ViteThemeProvider = ViteThemeProvider;
+exports.buildServerThemeData = buildServerThemeData;
+exports.getSystemTheme = getSystemTheme;
+exports.injectBaseStyles = injectBaseStyles;
+exports.prefersReducedMotion = prefersReducedMotion;
+exports.resolveTheme = resolveTheme;
+exports.resolveThemeForServer = resolveThemeForServer;
+exports.supportsViewTransitions = supportsViewTransitions;
+exports.useNextTheme = useNextTheme;
+exports.useSpacemanTheme = useSpacemanTheme;
+exports.useTanStackTheme = useTanStackTheme;
+exports.useTheme = useTheme;
+exports.useThemeAnimation = useThemeAnimation;
+exports.useViteTheme = useViteTheme;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map