@tamagui/core 1.73.1 → 1.74.0

package/dist/native.js

@@ -3371,10 +3371,22 @@ var require_propMapper_native = __commonJS({
           spaceVar != null && (valOrVar = spaceVar, hasSet = !0);
         }
       }
-      return hasSet ? resolveVariableValue(valOrVar, resolveAs) : (process.env.NODE_ENV === "development" && import_isDevTools.isDevTools && styleState.debug === "verbose" && (console.groupCollapsed("  \uFE52 propMap (val)", key, value), console.log({ valOrVar, theme, hasSet }, theme ? theme[key] : ""), console.groupEnd()), value);
+      if (hasSet) {
+        let out = resolveVariableValue(valOrVar, resolveAs);
+        return process.env.NODE_ENV === "development" && styleState.debug === "verbose" && console.log("resolved", resolveAs, valOrVar.get, out), out;
+      }
+      return process.env.NODE_ENV === "development" && import_isDevTools.isDevTools && styleState.debug === "verbose" && (console.groupCollapsed("  \uFE52 propMap (val)", key, value), console.log({ valOrVar, theme, hasSet }, theme ? theme[key] : ""), console.groupEnd()), value;
     };
     function resolveVariableValue(valOrVar, resolveValues) {
-      return resolveValues === "none" ? valOrVar : (0, import_createVariable.isVariable)(valOrVar) ? !import_constants2.isWeb || resolveValues === "value" ? valOrVar.val : valOrVar.variable : valOrVar;
+      if (resolveValues === "none")
+        return valOrVar;
+      if ((0, import_createVariable.isVariable)(valOrVar)) {
+        if (resolveValues === "value")
+          return valOrVar.val;
+        let get = valOrVar.get;
+        return typeof get == "function" ? get() : valOrVar.val;
+      }
+      return valOrVar;
     }
   }
 });
@@ -3581,7 +3593,7 @@ current`, {
                       }
                     } else {
                       let curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
-                      shouldMerge && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2), usedKeys[pkey] = Math.max(usedKeys[pkey], importance)), process.env.NODE_ENV === "development" && debug === "verbose" && console.log("    subKey", pkey, shouldMerge, {
+                      shouldMerge && (pseudos ||= {}, pseudos[key] ||= {}, pseudos[key][pkey] = val2, mergeStyle(styleState, pkey, val2)), process.env.NODE_ENV === "development" && debug === "verbose" && console.log("    subKey", pkey, shouldMerge, {
                         importance,
                         curImportance,
                         pkey,
@@ -4177,8 +4189,8 @@ var require_useTheme_native = __commonJS({
     function getDefaultThemeProxied() {
       if (cached)
         return cached;
-      let config = (0, import_config.getConfig)(), defaultTheme = config.themes.light ?? config.themes[Object.keys(config.themes)[0]];
-      return cached = getThemeProxied(defaultTheme), cached;
+      let 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;
     }
     var useTheme = (props = emptyProps) => {
       let [_, theme] = useThemeWithState(props);
@@ -4204,10 +4216,15 @@ var require_useTheme_native = __commonJS({
 
 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`
       );
-      let themeProxied = (0, import_react.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state.theme, themeManager, keys.current, props.debug), [state, themeManager]);
+      let themeProxied = (0, import_react.useMemo)(() => !themeManager || !(state != null && state.theme) ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state, themeManager, props.deopt, props.debug]);
       return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state == null ? void 0 : state.name), console.log("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
     };
-    function getThemeProxied(theme, themeManager, keys, debug) {
+    function getThemeProxied({ theme, name }, deopt = !1, themeManager, keys, debug) {
+      if (!theme)
+        return {};
+      function track(key) {
+        keys && !keys.includes(key) && (keys.push(key), process.env.NODE_ENV === "development" && debug && console.log(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+      }
       return (0, import_createProxy.createProxy)(theme, {
         has(_, key) {
           if (Reflect.has(theme, key))
@@ -4229,7 +4246,30 @@ If this is intended and you are using Tamagui without any themes, you can disabl
                 // when they touch the actual value we only track it
                 // if its a variable (web), its ignored!
                 get(_2, subkey) {
-                  return keys && (subkey === "val" || subkey === "get" && !import_constants2.isWeb) && !keys.includes(keyString) && (keys.push(keyString), process.env.NODE_ENV === "development" && debug && console.log(` \u{1F3A8} useTheme() tracking new key: ${keyString}`)), subkey === "get" ? () => (0, import_createVariable.getVariable)(val) : Reflect.get(val, subkey);
+                  if (subkey === "val")
+                    track(keyString);
+                  else if (subkey === "get")
+                    return () => {
+                      let outVal = (0, import_createVariable.getVariable)(val);
+                      if (import_constants2.isIos && !deopt) {
+                        let isDark = name.startsWith("dark"), isLight = !isDark && name.startsWith("light");
+                        if (isDark || isLight) {
+                          let oppositeThemeName = name.replace(
+                            isDark ? "dark" : "light",
+                            isDark ? "light" : "dark"
+                          ), oppositeTheme = (0, import_config.getConfig)().themes[oppositeThemeName], oppositeVal = (0, import_createVariable.getVariable)(oppositeTheme == null ? void 0 : oppositeTheme[keyString]);
+                          if (oppositeVal)
+                            return {
+                              dynamic: {
+                                dark: isDark ? outVal : oppositeVal,
+                                light: isLight ? outVal : oppositeVal
+                              }
+                            };
+                        }
+                      }
+                      return track(keyString), outVal;
+                    };
+                  return Reflect.get(val, subkey);
                 }
               });
           }
@@ -4238,10 +4278,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       });
     }
     var activeThemeManagers = /* @__PURE__ */ new Set(), useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
-      let {
-        // @ts-expect-error internal use only
-        disable
-      } = props, parentManager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext);
+      let { disable } = props, parentManager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext);
       if (!isRoot && !parentManager || disable)
         return {
           isNewTheme: !1,
@@ -4268,7 +4305,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         let selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
           forced && setThemeState((prev) => createState(prev, !0));
         }), disposeChangeListener = parentManager == null ? void 0 : parentManager.onChangeTheme((name, manager) => {
-          let force = shouldUpdate == null ? void 0 : shouldUpdate(), doUpdate = force ?? !!(keys != null && keys.length || isNewTheme);
+          let force = (shouldUpdate == null ? void 0 : shouldUpdate()) || props.deopt || props["disable-child-theme"], doUpdate = force ?? !!(keys != null && keys.length);
           process.env.NODE_ENV === "development" && props.debug && console.log(" \u{1F538} onChange", themeManager.id, {
             force,
             doUpdate,
@@ -4322,7 +4359,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
               prev.state,
               forceChange
             );
-            nextState ? (state2 = nextState, !prev.isNewTheme || !import_constants2.isWeb ? themeManager2 = getNewThemeManager() : themeManager2.updateState(nextState)) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
+            nextState ? (state2 = nextState, prev.isNewTheme ? themeManager2.updateState(nextState) : themeManager2 = getNewThemeManager()) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
           } else
             themeManager2 = getNewThemeManager(), state2 = { ...themeManager2.state };
         }
@@ -4759,17 +4796,22 @@ var require_createComponent_native = __commonJS({
             isEntering && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
           }
         }
-        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants2.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableThemeProp = props["data-disable-theme"], disableTheme = disableThemeProp && !willBeAnimated || isHOC;
+        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants2.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableThemeProp = !1, disableTheme = disableThemeProp && !willBeAnimated || isHOC;
         process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
         let themeStateProps = {
           name: props.theme,
           componentName,
-          // @ts-ignore this is internal use only
           disable: disableTheme,
           shallow: stateRef.current.themeShallow,
-          shouldUpdate: () => stateRef.current.isListeningToTheme,
+          // if this returns undefined it defers to the keys tracking, so its only used to force either updates or no updates
+          shouldUpdate: () => (
+            // when we use $theme- styles we need to force it to re-render on theme changes (this can be optimized likely)
+            stateRef.current.isListeningToTheme
+          ),
           debug: debugProp
-        }, isExiting = !state.unmounted && (presence == null ? void 0 : presence[0]) === !1;
+        };
+        themeStateProps.deopt = config != null && config.settings.fastSchemeChange ? willBeAnimated : !0;
+        let isExiting = !state.unmounted && (presence == null ? void 0 : presence[0]) === !1;
         if (process.env.NODE_ENV === "development") {
           let id = (0, import_react.useId)();
           if (debugProp && debugProp !== "profile") {
@@ -5091,7 +5133,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
       });
       staticConfig.componentName && (component.displayName = staticConfig.componentName);
       let res = component;
-      (process.env.TAMAGUI_MEMO_ALL || staticConfig.memo) && (res = (0, import_react.memo)(res)), res.staticConfig = staticConfig;
+      process.env.TAMAGUI_DISABLE_MEMO || (res = (0, import_react.memo)(res)), res.staticConfig = staticConfig;
       function extendStyledConfig(extended) {
         return {
           ...staticConfig,
@@ -5726,7 +5768,6 @@ ${runtimeStyles}`;
       !defaultFontName && configIn.fonts && (defaultFontName = Object.keys(configIn.fonts)[0]), (defaultFontName == null ? void 0 : defaultFontName[0]) === "$" && (defaultFontName = defaultFontName.slice(1));
       let defaultFont = `$${defaultFontName}`, config = {
         fonts: {},
-        groupNames: [],
         settings: {},
         onlyAllowShorthands: !1,
         fontLanguages: [],
@@ -5867,22 +5908,30 @@ var require_setupReactNative_native = __commonJS({
       setupReactNative: () => setupReactNative
     });
     module2.exports = __toCommonJS2(setupReactNative_exports);
-    var ReactNativeStaticConfigs = /* @__PURE__ */ new WeakMap();
     function getReactNativeConfig(Component) {
-      return ReactNativeStaticConfigs.get(Component);
+      var _a, _b;
+      if (Component)
+        return Component.getSizeWithHeaders ? RNConfigs.Image : (_a = Component.propTypes) != null && _a.textBreakStrategy ? RNConfigs.Text : (_b = Component.propTypes) != null && _b.onTextInput ? void 0 : RNConfigs.default;
     }
-    function setupReactNative(rnExports) {
-      for (let key in rnExports) {
-        if (key[0].toLowerCase() === key[0])
-          continue;
-        let val = rnExports[key];
-        val && typeof val == "object" && ReactNativeStaticConfigs.set(val, {
-          isReactNative: !0,
-          isText: key === "Text" || key === "TextInput",
-          isInput: key === "TextInput" || key === "TextArea",
-          inlineProps: key === "Image" ? /* @__PURE__ */ new Set(["src", "width", "height"]) : void 0
-        });
+    var RNConfigs = {
+      Image: {
+        isReactNative: !0,
+        inlineProps: /* @__PURE__ */ new Set(["src", "width", "height"])
+      },
+      Text: {
+        isReactNative: !0,
+        isText: !0
+      },
+      TextInput: {
+        isReactNative: !0,
+        isInput: !0,
+        isText: !0
+      },
+      default: {
+        isReactNative: !0
       }
+    };
+    function setupReactNative(rnExports) {
     }
   }
 });
@@ -5908,7 +5957,7 @@ var require_styled_native = __commonJS({
     function styled(ComponentIn, options, staticExtractionOptions) {
       if (process.env.NODE_ENV !== "production" && !ComponentIn)
         throw new Error("No component given to styled()");
-      let parentStaticConfig = ComponentIn.staticConfig, isPlainStyledComponent = !!parentStaticConfig && !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC), Component = parentStaticConfig != null && parentStaticConfig.isHOC && !(parentStaticConfig != null && parentStaticConfig.isStyledHOC) || isPlainStyledComponent ? ComponentIn : (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || ComponentIn, reactNativeConfig = (0, import_setupReactNative.getReactNativeConfig)(Component), isReactNative = !!(reactNativeConfig || staticExtractionOptions != null && staticExtractionOptions.isReactNative || parentStaticConfig != null && parentStaticConfig.isReactNative || (0, import_setupReactNative.getReactNativeConfig)(parentStaticConfig == null ? void 0 : parentStaticConfig.Component)), staticConfigProps = (() => {
+      let parentStaticConfig = ComponentIn.staticConfig, isPlainStyledComponent = !!parentStaticConfig && !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC), Component = parentStaticConfig != null && parentStaticConfig.isHOC && !(parentStaticConfig != null && parentStaticConfig.isStyledHOC) || isPlainStyledComponent ? ComponentIn : (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || ComponentIn, reactNativeConfig = parentStaticConfig ? void 0 : (0, import_setupReactNative.getReactNativeConfig)(Component), isReactNative = !!(reactNativeConfig || staticExtractionOptions != null && staticExtractionOptions.isReactNative || parentStaticConfig != null && parentStaticConfig.isReactNative), staticConfigProps = (() => {
         if (options) {
           let {
             variants,