@tamagui/web 1.121.12 → 1.122.0

package/dist/cjs/hooks/useTheme.cjs

@@ -1,9 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
     for (var name in all) __defProp(target, name, {
       get: all[name],
@@ -17,30 +15,20 @@ var __export = (target, all) => {
     });
     return to;
   };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
 var useTheme_exports = {};
 __export(useTheme_exports, {
   activeThemeManagers: () => activeThemeManagers,
   getThemeManager: () => getThemeManager,
-  getThemeProxied: () => getThemeProxied,
   useChangeThemeEffect: () => useChangeThemeEffect,
   useTheme: () => useTheme,
   useThemeWithState: () => useThemeWithState
 });
 module.exports = __toCommonJS(useTheme_exports);
-var import_react = __toESM(require("react")),
-  import_constants = require("@tamagui/constants"),
+var import_constants = require("@tamagui/constants"),
+  import_react = require("react"),
   import_config = require("../config.cjs"),
   import_createVariable = require("../createVariable.cjs"),
   import_ThemeManager = require("../helpers/ThemeManager.cjs"),
@@ -48,50 +36,37 @@ var import_react = __toESM(require("react")),
   import_createShallowSetState = require("../helpers/createShallowSetState.cjs"),
   import_shouldDeoptDueToParentScheme = require("./shouldDeoptDueToParentScheme.cjs");
 const emptyProps = {
-  name: null
-};
-let cached;
-function getDefaultThemeProxied() {
-  if (cached) return cached;
-  const config = (0, import_config.getConfig)(),
-    name = config.themes.light ? "light" : Object.keys(config.themes)[0],
-    defaultTheme = config.themes[name];
-  return cached = getThemeProxied({
-    theme: defaultTheme,
-    name
-  }), cached;
-}
-const useTheme = (props = emptyProps) => {
+    name: null
+  },
+  useTheme = (props = emptyProps) => {
     const [_, theme] = useThemeWithState(props);
-    return theme || getDefaultThemeProxied();
+    return theme;
   },
   useThemeWithState = props => {
-    const keys = import_react.default.useRef([]),
-      changedThemeState = useChangeThemeEffect(props, !1, keys.current, import_constants.isServer ? void 0 : () => {
-        const next = props.shouldUpdate?.() ?? (keys.current.length > 0 ? !0 : void 0);
-        return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info(`  \u{1F3A8} useTheme() shouldUpdate? tracking keys ${keys.current.length} ${props.shouldUpdate?.()}`, next), next;
-      }),
-      {
-        themeManager,
-        state
-      } = changedThemeState;
+    const keys = (0, import_react.useRef)(null),
+      changedThemeState = useChangeThemeEffect(props, !1, keys);
+    process.env.NODE_ENV === "development" && globalThis.time && time`theme-change-effect`;
+    const {
+      themeManager,
+      state
+    } = changedThemeState;
     process.env.NODE_ENV === "development" && (state?.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.error(`[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(props)}).
 
 If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`));
-    const themeProxied = import_react.default.useMemo(() => (keys.current = [], !themeManager || !state?.theme ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug)), [state?.theme, themeManager, props.deopt, props.debug]);
+    const themeProxied = (0, import_react.useMemo)(() => (keys.current && (keys.current = null), !themeManager || !state?.theme ? {} : getThemeProxied(state, props.deopt, keys, themeManager, props.debug)), [state?.theme, themeManager, props.deopt, props.debug]);
     return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed(`  \u{1F539} [${themeManager?.id}] useTheme =>`, state?.name), console.info("returning state", changedThemeState.state, changedThemeState.isNewTheme, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
   };
 function getThemeProxied({
   theme,
   name,
   scheme
-}, deopt = !1, themeManager, keys, debug) {
+}, deopt = !1, keys, themeManager, debug) {
   if (!theme) return {};
   const config = (0, import_config.getConfig)();
   function track(key) {
-    keys && !keys.includes(key) && (keys.length || setTimeout(() => {
+    keys.current || (keys.current = [], setTimeout(() => {
       themeManager?.selfUpdate();
-    }), keys.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+    })), keys.current.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`);
   }
   return new Proxy(theme, {
     has(_, key) {
@@ -137,133 +112,137 @@ const activeThemeManagers = /* @__PURE__ */new Set(),
   // a few times using the "right" ways, but they are always slower. maybe skill issue
   (a, ...args) => {
     if (!(typeof a == "string" && a.includes("Cannot update a component"))) return ogLog(a, ...args);
-  },
-  useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
-    const {
-        disable
-      } = props,
-      parentManagerId = import_react.default.useContext(import_ThemeManagerContext.ThemeManagerIDContext),
-      parentManager = getThemeManager(parentManagerId);
-    if (!isRoot && !parentManager || disable) return {
-      isNewTheme: !1,
-      state: parentManager?.state,
-      themeManager: parentManager
+  };
+function getShouldUpdateTheme(props, parentManager, keys, themeState, nextState, forceShouldChange = !1) {
+  if (import_constants.isServer || !forceShouldChange && !keys?.current && (!themeState || !themeState.isNewTheme) && !(0, import_ThemeManager.getHasThemeUpdatingProps)(props)) return;
+  const next = nextState || themeState?.themeManager?.getState(props, parentManager);
+  if (forceShouldChange) return next;
+  if (!(!next || next.theme === themeState?.state?.theme)) return next;
+}
+const useChangeThemeEffect = (props, isRoot = !1, keys) => {
+  const {
+      disable
+    } = props,
+    parentManager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext),
+    shouldAlwaysUpdate = props.needsUpdate?.() === !0 ? !0 : void 0;
+  if (!isRoot && !parentManager || disable) return {
+    isNewTheme: !1,
+    state: parentManager?.state,
+    themeManager: parentManager
+  };
+  const [themeState, setThemeState] = (0, import_react.useState)(createState),
+    {
+      state,
+      mounted,
+      isNewTheme,
+      themeManager,
+      prevState
+    } = themeState,
+    isInversingOnMount = !!(!themeState.mounted && props.inverse);
+  if (import_constants.isServer || ((0, import_react.useLayoutEffect)(() => {
+    themeManager && state && prevState && state !== prevState && themeManager.notify();
+  }, [state]), (0, import_react.useEffect)(() => {
+    if (!themeManager) return;
+    if (props.inverse && !mounted) {
+      setThemeState(prev => createState({
+        ...prev,
+        mounted: !0
+      }));
+      return;
+    }
+    (isNewTheme || isRoot) && (activeThemeManagers.add(themeManager), process.env.NODE_ENV === "development" && isRoot && (globalThis.TamaguiRootThemeManager ||= themeManager));
+    const updated = getShouldUpdateTheme(props, parentManager, keys, themeState, void 0, shouldAlwaysUpdate);
+    updated && setThemeState(prev => createState(prev, void 0, updated));
+    const selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
+        forced && setThemeState(prev => createState(prev, forced !== "self"));
+      }, !0),
+      disposeChangeListener = parentManager?.onChangeTheme((name, manager, forced) => {
+        const force = forced || (import_constants.isServer ? void 0 : keys?.current ? !0 : void 0) || props.deopt || void 0,
+          shouldTryUpdate = force ?? !!(keys?.current || isNewTheme);
+        process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", {
+          id: themeManager.id,
+          force,
+          shouldTryUpdate,
+          props,
+          name,
+          keys
+        }), shouldTryUpdate && setThemeState(prev => createState(prev, !0));
+      }, themeManager.id);
+    return () => {
+      selfListenerDispose(), disposeChangeListener?.(), isNewTheme && activeThemeManagers.delete(themeManager);
     };
-    const [themeState, setThemeState] = import_react.default.useState(createState),
-      {
-        state,
-        mounted,
-        isNewTheme,
-        themeManager,
-        prevState
-      } = themeState,
-      isInversingOnMount = !!(!themeState.mounted && props.inverse);
-    function getShouldUpdateTheme(manager = themeManager, nextState, prevState2 = state, forceShouldChange = !1) {
-      const forceUpdate = shouldUpdate?.();
-      if (!manager || !forceShouldChange && forceUpdate === !1) return;
-      const next = nextState || manager.getState(props, parentManager);
-      if (forceShouldChange) return next;
-      if (next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState2))) return next;
+  }, [themeManager, parentManager, isNewTheme, props.componentName, props.inverse, props.name, props.reset, mounted]), process.env.NODE_ENV === "development" && props.debug !== "profile" && (0, import_react.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
+    globalThis.TamaguiThemeManagers.delete(themeManager);
+  }), [themeManager])), import_constants.isWeb && isInversingOnMount) return {
+    isNewTheme: !1,
+    inversed: !1,
+    themeManager: parentManager,
+    state: {
+      name: "",
+      ...parentManager?.state,
+      className: ""
     }
-    if (import_constants.isServer || (import_react.default.useLayoutEffect(() => {
-      themeManager && state && prevState && state !== prevState && themeManager.notify();
-    }, [state]), import_react.default.useEffect(() => {
-      if (!themeManager) return;
-      if (props.inverse && !mounted) {
-        setThemeState(prev => createState({
-          ...prev,
-          mounted: !0
-        }));
-        return;
-      }
-      (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
-      const selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
-          forced && setThemeState(prev => createState(prev, forced !== "self"));
-        }, !0),
-        disposeChangeListener = parentManager?.onChangeTheme((name, manager, forced) => {
-          const force = forced || shouldUpdate?.() || props.deopt || void 0,
-            shouldTryUpdate = force ?? !!(keys?.length || isNewTheme);
-          process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", {
-            id: themeManager.id,
-            force,
-            shouldTryUpdate,
-            props,
-            name,
-            keys
-          }), shouldTryUpdate && setThemeState(prev => createState(prev, force));
-        }, themeManager.id);
-      return () => {
-        selfListenerDispose(), disposeChangeListener?.(), isNewTheme && activeThemeManagers.delete(themeManager);
+  };
+  return {
+    state,
+    isNewTheme,
+    inversed: !!props.inverse,
+    themeManager
+  };
+  function createState(prev, force = !1, foundNextState) {
+    if (prev && !foundNextState && !keys?.current && !force) return prev;
+    let themeManager2 = parentManager,
+      state2;
+    if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
+      const parentManagerProp = isRoot ? "root" : parentManager;
+      if (prev?.themeManager) {
+        themeManager2 = prev.themeManager;
+        const forceChange = force || shouldAlwaysUpdate || (keys?.current ? !0 : void 0);
+        let nextState = null;
+        if (foundNextState) nextState = foundNextState;else {
+          const next = themeManager2.getState(props, parentManager);
+          nextState = getShouldUpdateTheme(props, parentManager, keys, prev, next, forceChange);
+        }
+        nextState ? (state2 = nextState, !prev.isNewTheme && !isRoot ? themeManager2 = new import_ThemeManager.ThemeManager(props, parentManagerProp) : themeManager2.updateState(nextState)) : prev.isNewTheme && parentManager && !nextState && (themeManager2 = parentManager);
+      } else themeManager2 = new import_ThemeManager.ThemeManager(props, parentManagerProp), state2 = {
+        ...themeManager2.state
       };
-    }, [themeManager, parentManager, isNewTheme, props.componentName, props.inverse, props.name, props.reset, mounted]), process.env.NODE_ENV === "development" && props.debug !== "profile" && import_react.default.useEffect(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
-      globalThis.TamaguiThemeManagers.delete(themeManager);
-    }), [themeManager])), import_constants.isWeb && isInversingOnMount) return {
-      isNewTheme: !1,
-      inversed: !1,
-      themeManager: parentManager,
-      state: {
-        name: "",
-        ...parentManager?.state,
-        className: ""
-      }
-    };
-    return {
-      state,
-      isNewTheme,
-      inversed: !!props.inverse,
-      themeManager
+    }
+    const isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
+    isNewTheme2 && registerThemeManager(themeManager2);
+    const mounted2 = (import_constants.isWeb ? !(0, import_config.getSetting)("disableSSR") : !1) ? isRoot || prev?.mounted : !0;
+    state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
+    const response = {
+      themeManager: themeManager2,
+      isNewTheme: isNewTheme2,
+      mounted: mounted2
     };
-    function createState(prev, force = !1) {
-      if (prev && shouldUpdate?.() === !1 && !force) return prev;
-      let themeManager2 = parentManager,
-        state2;
-      if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
-        const getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
-        if (prev?.themeManager) {
-          themeManager2 = prev.themeManager;
-          const forceChange = force || !!keys?.length,
-            next = themeManager2.getState(props, parentManager),
-            nextState = getShouldUpdateTheme(themeManager2, next, prev.state, forceChange);
-          nextState ? (state2 = nextState, !prev.isNewTheme && !isRoot ? themeManager2 = getNewThemeManager() : themeManager2.updateState(nextState)) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
-        } else themeManager2 = getNewThemeManager(), state2 = {
+    props.inverse && (response.inversed = !0);
+    const shouldReturnPrev = prev && !force &&
+    // isEqualShallow uses the second arg as the keys so this should compare without state first...
+    (0, import_createShallowSetState.isEqualShallow)(prev, response) &&
+    // ... and then compare just the state, because we make a new state obj but is likely the same
+    (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
+    if (prev && shouldReturnPrev) return prev;
+    if (response.state = state2, response.prevState = prev?.state, process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
+      console.groupCollapsed(`\u{1F537} [${themeManager2.id}] useChangeThemeEffect createState`);
+      const parentState = {
+          ...parentManager?.state
+        },
+        parentId = parentManager?.id,
+        themeManagerState = {
           ...themeManager2.state
         };
-      }
-      const isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
-      isNewTheme2 && registerThemeManager(themeManager2);
-      const mounted2 = (import_constants.isWeb ? !(0, import_config.getSetting)("disableSSR") : !1) ? isRoot || prev?.mounted : !0;
-      state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
-      const response = {
-          themeManager: themeManager2,
-          isNewTheme: isNewTheme2,
-          mounted: mounted2,
-          inversed: props.inverse
-        },
-        shouldReturnPrev = prev && !force &&
-        // isEqualShallow uses the second arg as the keys so this should compare without state first...
-        (0, import_createShallowSetState.isEqualShallow)(prev, response) &&
-        // ... and then compare just the state, because we make a new state obj but is likely the same
-        (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
-      if (prev && shouldReturnPrev) return prev;
-      if (response.state = state2, response.prevState = prev?.state, process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
-        console.groupCollapsed(`\u{1F537} [${themeManager2.id}] useChangeThemeEffect createState`);
-        const parentState = {
-            ...parentManager?.state
-          },
-          parentId = parentManager?.id,
-          themeManagerState = {
-            ...themeManager2.state
-          };
-        console.info({
-          props,
-          parentState,
-          parentId,
-          themeManager: themeManager2,
-          prev,
-          response,
-          themeManagerState
-        }), console.groupEnd();
-      }
-      return response;
+      console.info({
+        props,
+        parentState,
+        parentId,
+        themeManager: themeManager2,
+        prev,
+        response,
+        themeManagerState
+      }), console.groupEnd();
     }
-  };
+    return response;
+  }
+};

package/dist/cjs/hooks/useTheme.js

@@ -1,8 +1,7 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: !0 });
@@ -12,48 +11,24 @@ var __export = (target, all) => {
       !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
-  mod
-)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
 var useTheme_exports = {};
 __export(useTheme_exports, {
   activeThemeManagers: () => activeThemeManagers,
   getThemeManager: () => getThemeManager,
-  getThemeProxied: () => getThemeProxied,
   useChangeThemeEffect: () => useChangeThemeEffect,
   useTheme: () => useTheme,
   useThemeWithState: () => useThemeWithState
 });
 module.exports = __toCommonJS(useTheme_exports);
-var import_react = __toESM(require("react")), import_constants = require("@tamagui/constants"), import_config = require("../config"), import_createVariable = require("../createVariable"), import_ThemeManager = require("../helpers/ThemeManager"), import_ThemeManagerContext = require("../helpers/ThemeManagerContext"), import_createShallowSetState = require("../helpers/createShallowSetState"), import_shouldDeoptDueToParentScheme = require("./shouldDeoptDueToParentScheme");
-const emptyProps = { name: null };
-let cached;
-function getDefaultThemeProxied() {
-  if (cached) return cached;
-  const config = (0, import_config.getConfig)(), name = config.themes.light ? "light" : Object.keys(config.themes)[0], defaultTheme = config.themes[name];
-  return cached = getThemeProxied({ theme: defaultTheme, name }), cached;
-}
-const useTheme = (props = emptyProps) => {
+var import_constants = require("@tamagui/constants"), import_react = require("react"), import_config = require("../config"), import_createVariable = require("../createVariable"), import_ThemeManager = require("../helpers/ThemeManager"), import_ThemeManagerContext = require("../helpers/ThemeManagerContext"), import_createShallowSetState = require("../helpers/createShallowSetState"), import_shouldDeoptDueToParentScheme = require("./shouldDeoptDueToParentScheme");
+const emptyProps = { name: null }, useTheme = (props = emptyProps) => {
   const [_, theme] = useThemeWithState(props);
-  return theme || getDefaultThemeProxied();
+  return theme;
 }, useThemeWithState = (props) => {
-  const keys = import_react.default.useRef([]), changedThemeState = useChangeThemeEffect(
-    props,
-    !1,
-    keys.current,
-    import_constants.isServer ? void 0 : () => {
-      const next = props.shouldUpdate?.() ?? (keys.current.length > 0 ? !0 : void 0);
-      return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info(
-        `  \u{1F3A8} useTheme() shouldUpdate? tracking keys ${keys.current.length} ${props.shouldUpdate?.()}`,
-        next
-      ), next;
-    }
-  ), { themeManager, state } = changedThemeState;
+  const keys = (0, import_react.useRef)(null), changedThemeState = useChangeThemeEffect(props, !1, keys);
+  process.env.NODE_ENV === "development" && globalThis.time && time`theme-change-effect`;
+  const { themeManager, state } = changedThemeState;
   process.env.NODE_ENV === "development" && (state?.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.error(
     `[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
       props
@@ -61,7 +36,7 @@ const useTheme = (props = emptyProps) => {
 
 If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`
   ));
-  const themeProxied = import_react.default.useMemo(() => (keys.current = [], !themeManager || !state?.theme ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug)), [state?.theme, themeManager, props.deopt, props.debug]);
+  const themeProxied = (0, import_react.useMemo)(() => (keys.current && (keys.current = null), !themeManager || !state?.theme ? {} : getThemeProxied(state, props.deopt, keys, themeManager, props.debug)), [state?.theme, themeManager, props.deopt, props.debug]);
   return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed(`  \u{1F539} [${themeManager?.id}] useTheme =>`, state?.name), console.info(
     "returning state",
     changedThemeState.state,
@@ -70,13 +45,13 @@ If this is intended and you are using Tamagui without any themes, you can disabl
     props
   ), console.groupEnd()), [changedThemeState, themeProxied];
 };
-function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
+function getThemeProxied({ theme, name, scheme }, deopt = !1, keys, themeManager, debug) {
   if (!theme) return {};
   const config = (0, import_config.getConfig)();
   function track(key) {
-    keys && !keys.includes(key) && (keys.length || setTimeout(() => {
+    keys.current || (keys.current = [], setTimeout(() => {
       themeManager?.selfUpdate();
-    }), keys.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+    })), keys.current.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`);
   }
   return new Proxy(theme, {
     has(_, key) {
@@ -131,27 +106,28 @@ const activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PUR
     if (!(typeof a == "string" && a.includes("Cannot update a component")))
       return ogLog(a, ...args);
   }
-), useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
-  const { disable } = props, parentManagerId = import_react.default.useContext(import_ThemeManagerContext.ThemeManagerIDContext), parentManager = getThemeManager(parentManagerId);
+);
+function getShouldUpdateTheme(props, parentManager, keys, themeState, nextState, forceShouldChange = !1) {
+  if (import_constants.isServer || !forceShouldChange && !keys?.current && (!themeState || !themeState.isNewTheme) && !(0, import_ThemeManager.getHasThemeUpdatingProps)(props))
+    return;
+  const next = nextState || themeState?.themeManager?.getState(props, parentManager);
+  if (forceShouldChange)
+    return next;
+  if (!(!next || next.theme === themeState?.state?.theme))
+    return next;
+}
+const useChangeThemeEffect = (props, isRoot = !1, keys) => {
+  const { disable } = props, parentManager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext), shouldAlwaysUpdate = props.needsUpdate?.() === !0 ? !0 : void 0;
   if (!isRoot && !parentManager || disable)
     return {
       isNewTheme: !1,
       state: parentManager?.state,
       themeManager: parentManager
     };
-  const [themeState, setThemeState] = import_react.default.useState(createState), { state, mounted, isNewTheme, themeManager, prevState } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
-  function getShouldUpdateTheme(manager = themeManager, nextState, prevState2 = state, forceShouldChange = !1) {
-    const forceUpdate = shouldUpdate?.();
-    if (!manager || !forceShouldChange && forceUpdate === !1) return;
-    const next = nextState || manager.getState(props, parentManager);
-    if (forceShouldChange)
-      return next;
-    if (next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState2)))
-      return next;
-  }
-  if (import_constants.isServer || (import_react.default.useLayoutEffect(() => {
+  const [themeState, setThemeState] = (0, import_react.useState)(createState), { state, mounted, isNewTheme, themeManager, prevState } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
+  if (import_constants.isServer || ((0, import_react.useLayoutEffect)(() => {
     themeManager && state && prevState && state !== prevState && themeManager.notify();
-  }, [state]), import_react.default.useEffect(() => {
+  }, [state]), (0, import_react.useEffect)(() => {
     if (!themeManager) return;
     if (props.inverse && !mounted) {
       setThemeState((prev) => createState({
@@ -160,12 +136,21 @@ const activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PUR
       }));
       return;
     }
-    (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
+    (isNewTheme || isRoot) && (activeThemeManagers.add(themeManager), process.env.NODE_ENV === "development" && isRoot && (globalThis.TamaguiRootThemeManager ||= themeManager));
+    const updated = getShouldUpdateTheme(
+      props,
+      parentManager,
+      keys,
+      themeState,
+      void 0,
+      shouldAlwaysUpdate
+    );
+    updated && setThemeState((prev) => createState(prev, void 0, updated));
     const selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
       forced && setThemeState((prev) => createState(prev, forced !== "self"));
     }, !0), disposeChangeListener = parentManager?.onChangeTheme(
       (name, manager, forced) => {
-        const force = forced || shouldUpdate?.() || props.deopt || void 0, shouldTryUpdate = force ?? !!(keys?.length || isNewTheme);
+        const force = forced || (import_constants.isServer ? void 0 : keys?.current ? !0 : void 0) || props.deopt || void 0, shouldTryUpdate = force ?? !!(keys?.current || isNewTheme);
         process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", {
           id: themeManager.id,
           force,
@@ -173,7 +158,7 @@ const activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PUR
           props,
           name,
           keys
-        }), shouldTryUpdate && setThemeState((prev) => createState(prev, force));
+        }), shouldTryUpdate && setThemeState((prev) => createState(prev, !0));
       },
       themeManager.id
     );
@@ -189,7 +174,7 @@ const activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PUR
     props.name,
     props.reset,
     mounted
-  ]), process.env.NODE_ENV === "development" && props.debug !== "profile" && import_react.default.useEffect(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
+  ]), process.env.NODE_ENV === "development" && props.debug !== "profile" && (0, import_react.useEffect)(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */ new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
     globalThis.TamaguiThemeManagers.delete(themeManager);
   }), [themeManager])), import_constants.isWeb && isInversingOnMount)
     return {
@@ -208,23 +193,32 @@ const activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PUR
     inversed: !!props.inverse,
     themeManager
   };
-  function createState(prev, force = !1) {
-    if (prev && shouldUpdate?.() === !1 && !force)
+  function createState(prev, force = !1, foundNextState) {
+    if (prev && !foundNextState && !keys?.current && !force)
       return prev;
     let themeManager2 = parentManager, state2;
     if ((0, import_ThemeManager.getHasThemeUpdatingProps)(props)) {
-      const getNewThemeManager = () => new import_ThemeManager.ThemeManager(props, isRoot ? "root" : parentManager);
+      const parentManagerProp = isRoot ? "root" : parentManager;
       if (prev?.themeManager) {
         themeManager2 = prev.themeManager;
-        const forceChange = force || !!keys?.length, next = themeManager2.getState(props, parentManager), nextState = getShouldUpdateTheme(
-          themeManager2,
-          next,
-          prev.state,
-          forceChange
-        );
-        nextState ? (state2 = nextState, !prev.isNewTheme && !isRoot ? themeManager2 = getNewThemeManager() : themeManager2.updateState(nextState)) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
+        const forceChange = force || shouldAlwaysUpdate || (keys?.current ? !0 : void 0);
+        let nextState = null;
+        if (foundNextState)
+          nextState = foundNextState;
+        else {
+          const next = themeManager2.getState(props, parentManager);
+          nextState = getShouldUpdateTheme(
+            props,
+            parentManager,
+            keys,
+            prev,
+            next,
+            forceChange
+          );
+        }
+        nextState ? (state2 = nextState, !prev.isNewTheme && !isRoot ? themeManager2 = new import_ThemeManager.ThemeManager(props, parentManagerProp) : themeManager2.updateState(nextState)) : prev.isNewTheme && parentManager && !nextState && (themeManager2 = parentManager);
       } else
-        themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
+        themeManager2 = new import_ThemeManager.ThemeManager(props, parentManagerProp), state2 = { ...themeManager2.state };
     }
     const isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
     isNewTheme2 && registerThemeManager(themeManager2);
@@ -233,9 +227,10 @@ const activeThemeManagers = /* @__PURE__ */ new Set(), _uidToManager = /* @__PUR
     const response = {
       themeManager: themeManager2,
       isNewTheme: isNewTheme2,
-      mounted: mounted2,
-      inversed: props.inverse
-    }, shouldReturnPrev = prev && !force && // isEqualShallow uses the second arg as the keys so this should compare without state first...
+      mounted: mounted2
+    };
+    props.inverse && (response.inversed = !0);
+    const shouldReturnPrev = prev && !force && // isEqualShallow uses the second arg as the keys so this should compare without state first...
     (0, import_createShallowSetState.isEqualShallow)(prev, response) && // ... and then compare just the state, because we make a new state obj but is likely the same
     (0, import_createShallowSetState.isEqualShallow)(prev.state, state2);
     if (prev && shouldReturnPrev)