tamagui 1.74.16 → 1.74.17

package/dist/native.js

@@ -1510,6 +1510,7 @@ var require_createShallowSetState_native = __commonJS({
     }, __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), createShallowSetState_exports = {};
     __export2(createShallowSetState_exports, {
       createShallowSetState: () => createShallowSetState,
+      isEqualShallow: () => isEqualShallow,
       mergeIfNotShallowEqual: () => mergeIfNotShallowEqual
     });
     module2.exports = __toCommonJS2(createShallowSetState_exports);
@@ -1517,10 +1518,13 @@ var require_createShallowSetState_native = __commonJS({
       return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next));
     }
     function mergeIfNotShallowEqual(prev, next) {
+      return isEqualShallow(prev, next) ? prev : { ...prev, ...next };
+    }
+    function isEqualShallow(prev, next) {
       for (let key in next)
         if (prev[key] !== next[key])
-          return { ...prev, ...next };
-      return prev;
+          return !1;
+      return !0;
     }
   }
 });
@@ -3415,7 +3419,7 @@ var require_ThemeManager_native = __commonJS({
           return this.updateState(nextState, shouldNotify), nextState;
       }
       updateState(nextState, shouldNotify = !0) {
-        this.state = nextState, this._allKeys = null, process.env.NODE_ENV === "development" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && queueMicrotask(() => {
+        this.state = nextState, this._allKeys = null, process.env.NODE_ENV !== "production" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && queueMicrotask(() => {
           this.notify();
         });
       }
@@ -3443,25 +3447,28 @@ var require_ThemeManager_native = __commonJS({
         this.themeListeners.forEach((cb) => cb(this.state.name, this, forced));
       }
       onChangeTheme(cb, debugId) {
-        return process.env.NODE_ENV === "development" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
+        return process.env.NODE_ENV !== "production" && debugId && (this._listeningIds ??= /* @__PURE__ */ new Set(), this._listeningIds.add(debugId)), this.themeListeners.add(cb), () => {
           this.themeListeners.delete(cb);
         };
       }
     };
     function getState(props, manager) {
+      var _a;
       if (props.name && props.reset)
         throw new Error(
           process.env.NODE_ENV === "production" ? "\u274C004" : "Cannot reset and set a new name at the same time."
         );
       if (!getHasThemeUpdatingProps(props))
         return null;
-      let themes = (0, import_config.getThemes)(), [allManagers, componentManagers] = getManagers(manager), isDirectParentAComponentTheme = !!(manager != null && manager.state.isComponent), startIndex = allManagers.findIndex((x) => !(x != null && x.state.isComponent)) + (props.reset && !isDirectParentAComponentTheme ? 1 : 0), baseManager = allManagers[startIndex], parentManager = allManagers[startIndex + 1];
+      let themes = (0, import_config.getThemes)(), [allManagers, componentManagers] = getManagers(manager), isDirectParentAComponentTheme = !!(manager != null && manager.state.isComponent), startIndex = props.reset && !isDirectParentAComponentTheme ? 1 : 0, baseManager = allManagers[startIndex], parentManager = allManagers[startIndex + 1];
       if (!baseManager && props.reset)
         return process.env.NODE_ENV !== "production" && console.warn("Cannot reset, no parent theme exists"), null;
-      let result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "", nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
-      props.reset && isDirectParentAComponentTheme && allComponentThemes.shift();
+      let { componentName } = props, result = null, baseName = (baseManager == null ? void 0 : baseManager.state.name) || "";
+      baseManager != null && baseManager.state.isComponent && (baseName = baseName.replace(/_[A-Z][a-z]+/, ""));
+      let nextName = props.reset ? baseName : props.name || "", allComponentThemes = componentManagers.map((x) => (x == null ? void 0 : x.state.name) || "");
+      isDirectParentAComponentTheme && allComponentThemes.shift();
       let base = baseName.split(import_constants2.THEME_NAME_SEPARATOR), max2 = base.length, min2 = props.componentName && !nextName ? max2 : 0;
-      process.env.NODE_ENV === "development" && typeof props.debug == "string" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
+      process.env.NODE_ENV !== "production" && typeof props.debug == "string" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min: min2, max: max2 }));
       for (let i = max2; i >= min2; i--) {
         let prefix = base.slice(0, i).join(import_constants2.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
@@ -3470,39 +3477,38 @@ var require_ThemeManager_native = __commonJS({
           let lastSegment = potentials.findIndex((x) => !x.includes("_"));
           lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
         }
-        if (props.componentName) {
+        if (componentName && !props.reset) {
           let componentPotentials = [];
           if (nextName) {
             let beforeSeparator = prefix.slice(0, prefix.indexOf(import_constants2.THEME_NAME_SEPARATOR));
-            componentPotentials.push(`${beforeSeparator}_${nextName}_${props.componentName}`);
+            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
           }
-          if (componentPotentials.push(`${prefix}_${props.componentName}`), nextName) {
+          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
             let prefixLessOne = base.slice(0, i - 1).join(import_constants2.THEME_NAME_SEPARATOR);
             if (prefixLessOne) {
-              let lessSpecific = `${prefixLessOne}_${nextName}_${props.componentName}`;
+              let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
               componentPotentials.unshift(lessSpecific);
             }
-            let moreSpecific = `${prefix}_${nextName}_${props.componentName}`;
+            let moreSpecific = `${prefix}_${nextName}_${componentName}`;
             componentPotentials.unshift(moreSpecific);
           }
           potentials = [...componentPotentials, ...potentials, ...allComponentThemes];
         }
         let found = potentials.find((t) => t in themes);
-        if (process.env.NODE_ENV === "development" && typeof props.debug == "string" && console.info(" - ", { found, potentials, baseManager }), found) {
-          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants2.THEME_CLASSNAME_PREFIX, className = import_constants.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = baseManager == null ? void 0 : baseManager.state, parentScheme = parentState == null ? void 0 : parentState.scheme, parentName = parentState == null ? void 0 : parentState.name, inverse = parentScheme && scheme !== parentScheme;
+        if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && console.info(" - ", { found, potentials, baseManager, nextName, baseName, prefix }), found) {
+          let names = found.split("_"), [firstName, ...restNames] = names, lastName = names[names.length - 1], isComponent = lastName[0] === lastName[0].toUpperCase(), scheme = firstName === "light" ? "light" : firstName === "dark" ? "dark" : void 0, pre = import_constants2.THEME_CLASSNAME_PREFIX, className = import_constants.isWeb ? `${pre}sub_theme ${pre}${!scheme || !restNames.length ? firstName : restNames.join("_")}` : "", parentState = (_a = baseManager || parentManager) == null ? void 0 : _a.state, parentName = parentState == null ? void 0 : parentState.name;
           result = {
             name: found,
             parentName,
             theme: themes[found],
             className,
-            inverse,
             isComponent,
             scheme
           };
           break;
         }
       }
-      return process.env.NODE_ENV === "development" && typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", { result }), console.trace(), console.groupEnd()), result;
+      return process.env.NODE_ENV !== "production" && typeof props.debug == "string" && typeof window < "u" && (console.warn("ThemeManager.getState():", { result }), console.trace(), console.groupEnd()), result;
     }
     var inverseThemeName = (themeName) => themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
     function getManagers(themeManager) {
@@ -3557,7 +3563,7 @@ var require_useTheme_native = __commonJS({
       useThemeWithState: () => useThemeWithState
     });
     module2.exports = __toCommonJS2(useTheme_exports);
-    var import_constants = require_index_native2(), import_react2 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), emptyProps = { name: null }, cached;
+    var import_constants = require_index_native2(), import_react2 = require("react"), import_config = require_config_native(), import_createVariable = require_createVariable_native(), import_createProxy = require_createProxy_native(), import_createShallowSetState = require_createShallowSetState_native(), import_ThemeManager = require_ThemeManager_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_getThemeUnwrapped = require_getThemeUnwrapped_native(), emptyProps = { name: null }, cached;
     function getDefaultThemeProxied() {
       if (cached)
         return cached;
@@ -3651,8 +3657,10 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       {
         let cur = manager;
         for (; cur; ) {
-          if (cur.state.inverse)
+          if (!cur.parentManager)
             return !0;
+          if (cur.parentManager.state.scheme !== cur.state.scheme)
+            return !1;
           cur = cur.parentManager;
         }
       }
@@ -3666,7 +3674,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
           state: parentManager == null ? void 0 : parentManager.state,
           themeManager: parentManager
         };
-      let [themeState, setThemeState] = (0, import_react2.useState)(createState), { state, mounted, isNewTheme, themeManager } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
+      let [themeState, setThemeState] = (0, import_react2.useState)(createState), { state, mounted, isNewTheme, themeManager, inversed } = themeState, isInversingOnMount = !!(!themeState.mounted && props.inverse);
       function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
         let forceUpdate = shouldUpdate == null ? void 0 : shouldUpdate();
         if (!manager || !forceShouldChange && forceUpdate === !1)
@@ -3679,7 +3687,10 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         if (!themeManager)
           return;
         if (props.inverse && !mounted) {
-          setThemeState({ ...themeState, mounted: !0 });
+          setThemeState((prev) => createState({
+            ...prev,
+            mounted: !0
+          }));
           return;
         }
         isNewTheme && themeManager && activeThemeManagers.add(themeManager), (isNewTheme || getShouldUpdateTheme(themeManager)) && setThemeState(createState);
@@ -3713,6 +3724,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       }), [themeManager])), isInversingOnMount)
         return {
           isNewTheme: !1,
+          inversed: !1,
           themeManager: parentManager,
           state: {
             name: "",
@@ -3723,10 +3735,10 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       return {
         state,
         isNewTheme,
+        inversed,
         themeManager
       };
       function createState(prev, force = !1) {
-        var _a;
         if (prev && (shouldUpdate == null ? void 0 : shouldUpdate()) === !1)
           return prev;
         let themeManager2 = parentManager, state2;
@@ -3745,15 +3757,18 @@ If this is intended and you are using Tamagui without any themes, you can disabl
             themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
         }
         let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse), mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
-        if (state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager)), !force && (state2 == null ? void 0 : state2.name) === ((_a = prev == null ? void 0 : prev.state) == null ? void 0 : _a.name))
-          return prev;
-        let response = {
-          state: state2,
+        state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
+        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed ? !1 : null, response = {
           themeManager: themeManager2,
           isNewTheme: isNewTheme2,
-          mounted: mounted2
-        };
-        if (process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
+          mounted: mounted2,
+          inversed: inversed2
+        }, shouldReturnPrev = !force && prev && // 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, process.env.NODE_ENV === "development" && props.debug && import_constants.isClient) {
           console.groupCollapsed(` \u{1F537} ${themeManager2.id} useChangeThemeEffect createState`);
           let parentState = { ...parentManager == null ? void 0 : parentManager.state }, parentId = parentManager == null ? void 0 : parentManager.id, themeManagerState = { ...themeManager2.state };
           console.info({
@@ -3821,9 +3836,7 @@ var require_Theme_native = __commonJS({
     )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Theme_exports = {};
     __export2(Theme_exports, {
       Theme: () => Theme2,
-      getThemeCNStyle: () => getThemeCNStyle,
-      useThemedChildren: () => useThemedChildren,
-      wrapThemeElements: () => wrapThemeElements
+      useThemedChildren: () => useThemedChildren
     });
     module2.exports = __toCommonJS2(Theme_exports);
     var import_constants = require_index_native2(), import_react2 = __toESM2(require("react")), import_createVariable = require_createVariable_native(), import_ThemeManagerContext = require_ThemeManagerContext_native(), import_useTheme = require_useTheme_native(), import_ThemeDebug = require_ThemeDebug_native(), import_jsx_runtime6 = require("react/jsx-runtime"), Theme2 = (0, import_react2.forwardRef)(function(props, ref) {
@@ -3862,40 +3875,32 @@ var require_Theme_native = __commonJS({
         isRoot
       }) : elementsWithContext;
     }
-    function getThemeCNStyle(themeState, isRoot = !1) {
-      var _a, _b;
-      if (!themeState.isNewTheme)
-        return;
-      let themeColor = (_a = themeState.state) != null && _a.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
-        color: themeColor
-      } : void 0, className = ((_b = themeState.state) == null ? void 0 : _b.className) || "";
-      return isRoot && (className = className.replace("t_sub_theme", "")), { style, className };
-    }
     function wrapThemeElements({
       children,
       themeState,
       forceClassName,
       isRoot
     }) {
-      var _a, _b;
+      var _a;
       if (isRoot && forceClassName === !1)
         return children;
-      let inverse = (_a = themeState.state) == null ? void 0 : _a.inverse;
-      if (!themeState.isNewTheme && !inverse && !forceClassName)
+      let inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName;
+      if (!themeState.isNewTheme && !requiresExtraWrapper)
         return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "_dsp_contents is_Theme", children });
-      let { className, style } = getThemeCNStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
-      if (inverse != null || forceClassName) {
-        let name = ((_b = themeState.state) == null ? void 0 : _b.name) || "";
-        themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          "span",
-          {
-            className: `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents ${inverse ? "is_inversed" : ""}`,
-            children: themedChildren
-          }
-        );
+      let { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
+      if (requiresExtraWrapper) {
+        let name = ((_a = themeState.state) == null ? void 0 : _a.name) || "", inverseClassName = name.startsWith("light") ? "t_light is_inversed" : name.startsWith("dark") ? "t_dark is_inversed" : "";
+        themedChildren = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${inverse ? inverseClassName : ""} _dsp_contents`, children: themedChildren });
       }
       return themedChildren;
     }
+    function getThemeClassNameAndStyle(themeState, isRoot = !1) {
+      var _a, _b;
+      let themeColor = (_a = themeState.state) != null && _a.theme && themeState.isNewTheme ? (0, import_createVariable.variableToString)(themeState.state.theme.color) : "", style = themeColor ? {
+        color: themeColor
+      } : void 0, className = ((_b = themeState.state) == null ? void 0 : _b.className) || "";
+      return isRoot && (className = className.replace("t_sub_theme", "")), { style, className };
+    }
   }
 });
 
@@ -3924,7 +3929,7 @@ var require_themeable_native = __commonJS({
           import_Theme.Theme,
           {
             componentName: componentName || (staticConfig == null ? void 0 : staticConfig.componentName),
-            name: theme || null,
+            name: theme,
             "disable-child-theme": !0,
             debug: props.debug,
             inverse: themeInverse,
@@ -11801,7 +11806,6 @@ var require_Button_native = __commonJS({
       }
     }), ButtonText = (0, import_web.styled)(import_text2.SizableText, {
       name: "Button",
-      // same name as the frame so they can share a single theme
       context: ButtonContext,
       variants: {
         unstyled: {