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

package/dist/index.cjs

@@ -1,1756 +0,0 @@
-'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