@tamagui/core 1.82.1 → 1.82.2

package/dist/native.js

@@ -3573,7 +3573,7 @@ var require_getSplitStyles_native = __commonJS({
       }), console.groupEnd());
       for (let keyOg in props) {
         let keyInit = keyOg, valInit = props[keyOg];
-        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !isHOC)
+        if (styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit === "className" || keyInit in usedKeys || keyInit in skipProps && !styleProps.noSkip && !isHOC)
           continue;
         let valInitType = typeof valInit, isValidStyleKeyInit = isValidStyleKey(keyInit, staticConfig);
         if (styleState.curProps[keyInit] = valInit, !import_constants3.isAndroid && keyInit === "elevationAndroid")
@@ -4120,7 +4120,7 @@ var require_ThemeManager_native = __commonJS({
     module2.exports = __toCommonJS2(ThemeManager_exports);
     var import_constants3 = require_index_native3(), import_config = require_config_native(), import_constants22 = require_constants_native2(), emptyState = { name: "" };
     function getHasThemeUpdatingProps(props) {
-      return props.name || props.componentName || props.inverse || props.reset;
+      return !!(props.name || props.componentName || props.inverse || props.reset);
     }
     var uid = 0, ThemeManager = class {
       constructor(props = {}, parentManager) {
@@ -4190,7 +4190,7 @@ var require_ThemeManager_native = __commonJS({
       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_constants22.THEME_NAME_SEPARATOR), max = base.length, min = props.componentName && !nextName ? max : 0;
-      process.env.NODE_ENV !== "production" && typeof props.debug == "string" && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min, max }));
+      process.env.NODE_ENV !== "production" && props.debug && typeof window < "u" && (console.groupCollapsed("ThemeManager.getState()"), console.info({ props, baseName, base, min, max }));
       for (let i = max; i >= min; i--) {
         let prefix = base.slice(0, i).join(import_constants22.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
@@ -4200,16 +4200,18 @@ var require_ThemeManager_native = __commonJS({
           lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
         }
         if (componentName && !props.reset) {
-          let componentPotentials = [];
-          if (nextName) {
-            let beforeSeparator = prefix.slice(0, prefix.indexOf(import_constants22.THEME_NAME_SEPARATOR));
+          let baseLen = base.length, componentPotentials = [];
+          if (nextName && baseLen > 1) {
+            let beforeSeparator = base[0];
             componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
           }
           if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
-            let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
-            if (prefixLessOne) {
-              let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
-              componentPotentials.unshift(lessSpecific);
+            if (i > baseLen) {
+              let prefixLessOne = base.slice(0, i - 1).join(import_constants22.THEME_NAME_SEPARATOR);
+              if (prefixLessOne) {
+                let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
+                componentPotentials.unshift(lessSpecific);
+              }
             }
             let moreSpecific = `${prefix}_${nextName}_${componentName}`;
             componentPotentials.unshift(moreSpecific);
@@ -4218,6 +4220,7 @@ var require_ThemeManager_native = __commonJS({
         }
         let found = potentials.find((t) => t in themes);
         if (process.env.NODE_ENV !== "production" && typeof props.debug == "string" && console.info(" getState ", {
+          props,
           found,
           potentials,
           baseManager,
@@ -4466,7 +4469,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         }
         let isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse), mounted2 = props.inverse ? isRoot || (prev == null ? void 0 : prev.mounted) : !0;
         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 = {
+        let wasInversed = prev == null ? void 0 : prev.inversed, inversed2 = isNewTheme2 && state2.scheme !== (parentManager == null ? void 0 : parentManager.state.scheme) ? !0 : wasInversed != null ? !1 : null, response = {
           themeManager: themeManager2,
           isNewTheme: isNewTheme2,
           mounted: mounted2,
@@ -4545,40 +4548,40 @@ var require_Theme_native = __commonJS({
     )), __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: !0 }), mod), Theme_exports = {};
     __export2(Theme_exports, {
       Theme: () => Theme,
-      useThemedChildren: () => useThemedChildren
+      getThemedChildren: () => getThemedChildren
     });
     module2.exports = __toCommonJS2(Theme_exports);
-    var import_constants3 = require_index_native3(), import_react3 = __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_runtime = require("react/jsx-runtime"), Theme = (0, import_react3.forwardRef)(function(props, ref) {
+    var import_constants3 = require_index_native3(), import_react3 = __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_runtime = require("react/jsx-runtime"), Theme = (0, import_react3.forwardRef)(function({ children, ...props }, ref) {
       if (props.disable)
-        return props.children;
-      let isRoot = !!props._isRoot, disableDirectChildTheme = props["disable-child-theme"], themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), children = (0, import_react3.useMemo)(() => {
-        let children2 = disableDirectChildTheme ? import_react3.Children.map(
-          props.children,
-          (child) => (0, import_react3.cloneElement)(child, { "data-disable-theme": !0 })
-        ) : props.children;
-        if (ref)
-          try {
-            import_react3.default.Children.only(children2), children2 = (0, import_react3.cloneElement)(children2, { ref });
-          } catch {
-          }
-        return process.env.NODE_ENV === "development" && props.debug === "visualize" && (children2 = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: children2 })), children2;
-      }, [props.children, disableDirectChildTheme]);
-      return useThemedChildren(themeState, children, props, isRoot);
+        return children;
+      let isRoot = !!props._isRoot, themeState = (0, import_useTheme.useChangeThemeEffect)(props, isRoot), finalChildren = props["disable-child-theme"] ? import_react3.Children.map(
+        children,
+        (child) => (0, import_react3.cloneElement)(child, { "data-disable-theme": !0 })
+      ) : children;
+      if (ref)
+        try {
+          import_react3.default.Children.only(finalChildren), finalChildren = (0, import_react3.cloneElement)(finalChildren, { ref });
+        } catch {
+        }
+      return process.env.NODE_ENV === "development" && props.debug === "visualize" && (finalChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: finalChildren })), getThemedChildren(themeState, finalChildren, props, isRoot);
     });
     Theme.displayName = "Theme";
     Theme.avoidForwardRef = !0;
-    function useThemedChildren(themeState, children, props, isRoot = !1, avoidWrap = !1) {
-      let { themeManager, isNewTheme } = themeState, { shallow, forceClassName } = props, hasEverThemed = (0, import_react3.useRef)(!1);
-      if (isNewTheme && (hasEverThemed.current = !0), !(isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot))
+    function getThemedChildren(themeState, children, props, isRoot = !1) {
+      let { themeManager, isNewTheme } = themeState;
+      if (!themeManager)
+        throw "\u274C";
+      let { shallow, forceClassName } = props, hasEverThemed = (0, import_react3.useRef)(!1), shouldRenderChildrenWithTheme = isNewTheme || props.inverse || hasEverThemed.current || forceClassName || isRoot;
+      if (shouldRenderChildrenWithTheme && (hasEverThemed.current = !0), !shouldRenderChildrenWithTheme)
         return children;
       let next = children;
-      shallow && themeManager && (next = import_react3.Children.toArray(children).map((child) => (0, import_react3.isValidElement)(child) ? (0, import_react3.cloneElement)(
+      shallow && (next = import_react3.Children.toArray(children).map((child) => (0, import_react3.isValidElement)(child) ? (0, import_react3.cloneElement)(
         child,
         void 0,
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Theme, { name: themeManager.state.parentName, children: child.props.children })
       ) : child));
-      let elementsWithContext = themeManager ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next }) : next;
-      return forceClassName === !1 ? elementsWithContext : import_constants3.isWeb && !avoidWrap ? wrapThemeElements({
+      let elementsWithContext = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeManagerContext.ThemeManagerContext.Provider, { value: themeManager, children: next });
+      return forceClassName === !1 ? elementsWithContext : import_constants3.isWeb ? wrapThemeElements({
         children: elementsWithContext,
         themeState,
         forceClassName,
@@ -4594,18 +4597,18 @@ var require_Theme_native = __commonJS({
       var _a;
       if (isRoot && forceClassName === !1)
         return children;
-      let inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName;
-      if (!themeState.isNewTheme && !requiresExtraWrapper)
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "_dsp_contents is_Theme", children });
-      let { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${className} _dsp_contents is_Theme`, style, children });
+      let inverse = themeState.inversed, requiresExtraWrapper = inverse != null || forceClassName, { className, style } = getThemeClassNameAndStyle(themeState, isRoot), themedChildren = /* @__PURE__ */ (0, import_jsx_runtime.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_runtime.jsx)("span", { className: `${inverse ? inverseClassName : ""} _dsp_contents`, children: themedChildren });
       }
       return themedChildren;
     }
+    var emptyObj = {};
     function getThemeClassNameAndStyle(themeState, isRoot = !1) {
       var _a, _b;
+      if (!themeState.isNewTheme)
+        return { className: "", style: emptyObj };
       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) || "";
@@ -4631,7 +4634,10 @@ var require_themeable_native = __commonJS({
       themeable: () => themeable
     });
     module2.exports = __toCommonJS2(themeable_exports);
-    var import_react3 = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime = require("react/jsx-runtime");
+    var import_react3 = require("react"), import_Theme = require_Theme_native(), import_jsx_runtime = (
+      // @ts-expect-error its ok
+      require("react/jsx-runtime")
+    );
     function themeable(Component, staticConfig) {
       let withTheme = (0, import_react3.forwardRef)(function(props, ref) {
         let { themeInverse, theme, componentName, themeReset, ...rest } = props, element = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, ...rest, "data-disable-theme": !0 });
@@ -4909,7 +4915,7 @@ 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_constants3.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableThemeProp = !1, disableTheme = disableThemeProp && !willBeAnimated || isHOC;
+        let isAnimatedReactNative = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants3.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableTheme = isHOC;
         process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
         let themeStateProps = {
           name: props.theme,
@@ -5202,7 +5208,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
               subscribe: groupState.subscribe
             };
         }, [groupName]);
-        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { ...componentContext, groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableThemeProp ? content : (0, import_Theme.useThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
+        if (groupName && subGroupContext && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { ...componentContext, groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, !1), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), staticConfig.context) {
           let contextProps = staticConfig.context.props;
           for (let key in contextProps)
             (key in style || key in viewProps) && (overriddenContextProps ||= {}, overriddenContextProps[key] = style[key] ?? viewProps[key]);