tamagui 1.74.14 → 1.74.16

package/dist/native.js

@@ -3387,7 +3387,7 @@ var require_ThemeManager_native = __commonJS({
     __export2(ThemeManager_exports, {
       ThemeManager: () => ThemeManager,
       getHasThemeUpdatingProps: () => getHasThemeUpdatingProps,
-      getNonComponentParentManager: () => getNonComponentParentManager
+      getManagers: () => getManagers
     });
     module2.exports = __toCommonJS2(ThemeManager_exports);
     var import_constants = require_index_native2(), import_config = require_config_native(), import_constants2 = require_constants_native2(), emptyState = { name: "" };
@@ -3395,17 +3395,17 @@ var require_ThemeManager_native = __commonJS({
       return props.name || props.componentName || props.inverse || props.reset;
     }
     var uid = 0, ThemeManager = class {
-      constructor(props = {}, parentManagerIn) {
-        if (this.props = props, this.id = uid++, this.isComponent = !1, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this.scheme = null, this._allKeys = null, parentManagerIn === "root") {
+      constructor(props = {}, parentManager) {
+        if (this.props = props, this.id = uid++, this.themeListeners = /* @__PURE__ */ new Set(), this.parentManager = null, this.state = emptyState, this._allKeys = null, parentManager === "root") {
           this.updateStateFromProps(props, !1);
           return;
         }
-        if (!parentManagerIn)
+        if (!parentManager)
           throw process.env.NODE_ENV !== "production" ? new Error(
             "No parent manager given, this is likely due to duplicated Tamagui dependencies. Check your lockfile for mis-matched versions. It could also be from an error somewhere else in your stack causing Tamagui to recieve undefined context, you can try putting some ErrorBoundary components around other areas of your app, or a Suspense boundary."
           ) : "\u274C 0";
-        if (this.parentManager = parentManagerIn, !this.updateStateFromProps(props, !1))
-          return parentManagerIn || this;
+        if (this.parentManager = parentManager, !this.updateStateFromProps(props, !1))
+          return parentManager;
       }
       updateStateFromProps(props = this.props || {}, shouldNotify = !0) {
         if (this.props = props, props.forceTheme)
@@ -3415,9 +3415,7 @@ var require_ThemeManager_native = __commonJS({
           return this.updateState(nextState, shouldNotify), nextState;
       }
       updateState(nextState, shouldNotify = !0) {
-        this.state = nextState;
-        let names = this.state.name.split("_"), lastName = names[names.length - 1][0];
-        this.isComponent = lastName[0] === lastName[0].toUpperCase(), this._allKeys = null, this.scheme = names[0] === "light" ? "light" : names[0] === "dark" ? "dark" : null, process.env.NODE_ENV === "development" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && queueMicrotask(() => {
+        this.state = nextState, this._allKeys = null, process.env.NODE_ENV === "development" && (this._numChangeEventsSent ??= 0, this._numChangeEventsSent++), shouldNotify && queueMicrotask(() => {
           this.notify();
         });
       }
@@ -3450,86 +3448,68 @@ var require_ThemeManager_native = __commonJS({
         };
       }
     };
-    function getNextThemeClassName(name) {
-      return `t_sub_theme ${import_constants2.THEME_CLASSNAME_PREFIX}${name}`.replace("light_", "").replace("dark_", "");
-    }
-    function getState(props, parentManager) {
-      var _a, _b, _c, _d, _e, _f;
-      let validManagerAndAllComponentThemes = getNonComponentParentManager(parentManager);
-      parentManager = validManagerAndAllComponentThemes[0];
-      let allComponentThemes = validManagerAndAllComponentThemes[1], themes = (0, import_config.getThemes)(), isDirectParentAComponentTheme = allComponentThemes.length > 0;
+    function getState(props, manager) {
       if (props.name && props.reset)
-        throw new Error("Cannot reset + set new name");
-      if (!props.name && !props.inverse && !props.reset && !props.componentName)
+        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;
-      if (props.reset && !isDirectParentAComponentTheme && !(parentManager != null && parentManager.parentManager))
-        return process.env.NODE_ENV === "development" && console.warn("Cannot reset no grandparent exists"), null;
-      let result = null, nextName = props.reset ? isDirectParentAComponentTheme ? ((_a = parentManager == null ? void 0 : parentManager.state) == null ? void 0 : _a.name) || "" : ((_c = (_b = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _b.state) == null ? void 0 : _c.name) || "" : props.name || "", { componentName } = props, parentName = props.reset ? isDirectParentAComponentTheme ? (
-        // here because parentManager already skipped componentTheme so we have to only go up once
-        ((_d = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _d.state.name) || ""
-      ) : ((_f = (_e = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _e.parentManager) == null ? void 0 : _f.state.name) || "" : isDirectParentAComponentTheme ? allComponentThemes[0] || "" : (parentManager == null ? void 0 : parentManager.state.name) || "";
+      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];
+      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 base = parentName.split(import_constants2.THEME_NAME_SEPARATOR), lastSegment = base[base.length - 1], isParentComponentTheme = parentName && lastSegment[0].toUpperCase() === lastSegment[0];
-      isParentComponentTheme && base.pop();
-      let parentBaseTheme = isParentComponentTheme ? base.slice(0, base.length).join(import_constants2.THEME_NAME_SEPARATOR) : parentName, max2 = base.length, min2 = componentName && !nextName ? max2 : 0;
-      process.env.NODE_ENV === "development" && typeof props.debug == "string" && (console.groupCollapsed("ThemeManager.getState()"), console.info({
-        props,
-        parentName,
-        parentBaseTheme,
-        base,
-        min: min2,
-        max: max2,
-        isParentComponentTheme
-      }));
+      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 }));
       for (let i = max2; i >= min2; i--) {
         let prefix = base.slice(0, i).join(import_constants2.THEME_NAME_SEPARATOR);
         props.inverse && (prefix = inverseThemeName(prefix));
         let potentials = [];
-        if (prefix && prefix !== parentBaseTheme && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
-          let lastSegment2 = potentials.findIndex((x) => !x.includes("_"));
-          lastSegment2 > 0 && potentials.splice(lastSegment2, 0, nextName);
+        if (prefix && prefix !== baseName && potentials.push(prefix), nextName && potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName), i === 1) {
+          let lastSegment = potentials.findIndex((x) => !x.includes("_"));
+          lastSegment > 0 && potentials.splice(lastSegment, 0, nextName);
         }
-        if (componentName) {
+        if (props.componentName) {
           let componentPotentials = [];
           if (nextName) {
             let beforeSeparator = prefix.slice(0, prefix.indexOf(import_constants2.THEME_NAME_SEPARATOR));
-            componentPotentials.push(`${beforeSeparator}_${nextName}_${componentName}`);
+            componentPotentials.push(`${beforeSeparator}_${nextName}_${props.componentName}`);
           }
-          if (componentPotentials.push(`${prefix}_${componentName}`), nextName) {
+          if (componentPotentials.push(`${prefix}_${props.componentName}`), nextName) {
             let prefixLessOne = base.slice(0, i - 1).join(import_constants2.THEME_NAME_SEPARATOR);
             if (prefixLessOne) {
-              let lessSpecific = `${prefixLessOne}_${nextName}_${componentName}`;
+              let lessSpecific = `${prefixLessOne}_${nextName}_${props.componentName}`;
               componentPotentials.unshift(lessSpecific);
             }
-            let moreSpecific = `${prefix}_${nextName}_${componentName}`;
+            let moreSpecific = `${prefix}_${nextName}_${props.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, parentManager }), found) {
+        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;
           result = {
             name: found,
-            theme: themes[found],
-            className: import_constants.isWeb ? getNextThemeClassName(found) : "",
             parentName,
-            componentName,
-            inverse: props.inverse
+            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 === "development" && 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 getNonComponentParentManager(themeManager) {
-      var _a;
-      let res = themeManager, componentThemeNames = [];
-      for (; res && res != null && res.isComponent; )
-        componentThemeNames.push((_a = res == null ? void 0 : res.state) == null ? void 0 : _a.name), res = res.parentManager;
-      return [res || null, componentThemeNames];
+    function getManagers(themeManager) {
+      let comp = [], all = [], cur = themeManager;
+      for (; cur; )
+        all.push(cur), cur.state.isComponent && comp.push(cur), cur = cur.parentManager;
+      return [all, comp];
     }
   }
 });
@@ -3611,7 +3591,7 @@ If this is intended and you are using Tamagui without any themes, you can disabl
       let themeProxied = (0, import_react2.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.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
     };
-    function getThemeProxied({ theme, name }, deopt = !1, themeManager, keys, debug) {
+    function getThemeProxied({ theme, name, scheme }, deopt = !1, themeManager, keys, debug) {
       if (!theme)
         return {};
       let config = (0, import_config.getConfig)();
@@ -3644,21 +3624,18 @@ If this is intended and you are using Tamagui without any themes, you can disabl
                   else if (subkey === "get")
                     return (platform) => {
                       let outVal = (0, import_createVariable.getVariable)(val);
-                      if (platform !== "web" && import_constants.isIos && !deopt && config.settings.fastSchemeChange) {
-                        let isDark = name.startsWith("dark"), isLight = !isDark && name.startsWith("light");
-                        if (isDark || isLight) {
-                          let oppositeThemeName = name.replace(
-                            isDark ? "dark" : "light",
-                            isDark ? "light" : "dark"
-                          ), oppositeTheme = config.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
-                              }
-                            };
-                        }
+                      if (platform !== "web" && import_constants.isIos && !deopt && config.settings.fastSchemeChange && !someParentIsInversed(themeManager) && scheme) {
+                        let oppositeThemeName = name.replace(
+                          scheme === "dark" ? "dark" : "light",
+                          scheme === "dark" ? "light" : "dark"
+                        ), oppositeTheme = config.themes[oppositeThemeName], oppositeVal = (0, import_createVariable.getVariable)(oppositeTheme == null ? void 0 : oppositeTheme[keyString]);
+                        if (oppositeVal)
+                          return {
+                            dynamic: {
+                              dark: scheme === "dark" ? outVal : oppositeVal,
+                              light: scheme === "light" ? outVal : oppositeVal
+                            }
+                          };
                       }
                       return track(keyString), outVal;
                     };
@@ -3670,6 +3647,17 @@ If this is intended and you are using Tamagui without any themes, you can disabl
         }
       });
     }
+    function someParentIsInversed(manager) {
+      {
+        let cur = manager;
+        for (; cur; ) {
+          if (cur.state.inverse)
+            return !0;
+          cur = cur.parentManager;
+        }
+      }
+      return !1;
+    }
     var activeThemeManagers = /* @__PURE__ */ new Set(), useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
       let { disable } = props, parentManager = (0, import_react2.useContext)(import_ThemeManagerContext.ThemeManagerContext);
       if (!isRoot && !parentManager || disable)
@@ -4396,7 +4384,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
         let fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style, className;
         viewProps.style = style;
-        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), handlesPressEvents = !(import_constants.isWeb || asChild), shouldAttach = !!(attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+        let runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), handlesPressEvents = !(import_constants.isWeb || asChild), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
         process.env.NODE_ENV === "development" && time && time`events-setup`;
         let events = shouldAttach && !isDisabled && !props.asChild ? {
           onPressOut: attachPress ? (e) => {
@@ -4425,6 +4413,18 @@ If you meant to do this, you can disable this warning - either change untilMeasu
             onLongPress: (e) => {
               unPress(), onLongPress == null || onLongPress(e);
             }
+          },
+          ...attachFocus && {
+            onFocus: (e) => {
+              setStateShallow({
+                focus: !0
+              }), onFocus == null || onFocus(e);
+            },
+            onBlur: (e) => {
+              setStateShallow({
+                focus: !1
+              }), onBlur == null || onBlur(e);
+            }
           }
         } : null;
         events && !asChild && Object.assign(events, {
@@ -7601,11 +7601,7 @@ var require_index_native15 = __commonJS({
         return viewProps;
       },
       useEvents(viewProps, events, { pseudos }, setStateShallow, staticConfig) {
-        if (pseudos != null && pseudos.focusStyle && (viewProps.onFocus = (0, import_web.composeEventHandlers)(viewProps.onFocus, () => {
-          setStateShallow({ focus: !0 });
-        }), viewProps.onBlur = (0, import_web.composeEventHandlers)(viewProps.onBlur, () => {
-          setStateShallow({ focus: !1 });
-        })), staticConfig.isInput) {
+        if (events != null && events.onFocus && (viewProps.onFocus = events.onFocus), events != null && events.onBlur && (viewProps.onBlur = events.onBlur), staticConfig.isInput) {
           if (events) {
             let { onPressIn, onPressOut, onPress } = events, inputEvents = {
               onPressIn,
@@ -14985,12 +14981,12 @@ var require_Popper_native = __commonJS({
       left: "right"
     }, PopperArrow = PopperArrowFrame.styleable(function(propsIn, forwardedRef) {
       var _a, _b;
-      let { __scopePopper, ...rest } = propsIn, props = (0, import_core13.useProps)(rest), { offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props, context = usePopperContext(__scopePopper), sizeVal = sizeProp ?? context.size, size2 = +(0, import_core13.getVariableValue)(
+      let { __scopePopper, ...rest } = propsIn, props = (0, import_core13.useProps)(rest), { offset: offset2, size: sizeProp, borderWidth = 0, ...arrowProps } = props, context = usePopperContext(__scopePopper), sizeVal = sizeProp ?? context.size, sizeValResolved = (0, import_core13.getVariableValue)(
         (0, import_get_token2.getSpace)(sizeVal, {
           shift: -2,
           bounds: [2]
         })
-      ), { placement } = context, refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef), x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0, y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0, primaryPlacement = placement ? placement.split("-")[0] : "top", arrowStyle = { x, y, width: size2, height: size2 }, innerArrowStyle = {}, isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
+      ), size2 = Math.max(0, +sizeValResolved), { placement } = context, refs = (0, import_compose_refs.useComposedRefs)(context.arrowRef, forwardedRef), x = ((_a = context.arrowStyle) == null ? void 0 : _a.x) || 0, y = ((_b = context.arrowStyle) == null ? void 0 : _b.y) || 0, primaryPlacement = placement ? placement.split("-")[0] : "top", arrowStyle = { x, y, width: size2, height: size2 }, innerArrowStyle = {}, isVertical = primaryPlacement === "bottom" || primaryPlacement === "top";
       if (primaryPlacement) {
         arrowStyle[isVertical ? "width" : "height"] = size2 * 2;
         let oppSide = opposites[primaryPlacement];
@@ -18463,9 +18459,7 @@ var require_ToggleGroup_native = __commonJS({
             width: void 0,
             height: void 0,
             padding: (0, import_web.getVariableValue)(size2) * 0.6
-          };
-          props.unstyled || (props.orientation === "horizontal" ? sizeProps.height = (0, import_web.getVariableValue)(size2) * 2.4 : sizeProps.width = (0, import_web.getVariableValue)(size2) * 2.4);
-          let iconSize = (typeof size2 == "number" ? size2 * 0.7 : (0, import_font_size.getFontSize)(size2)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color: theme.color }), children = import_react2.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react2.default.isValidElement(child) ? child : getThemedIcon(child)), commonProps = { pressed, disabled, ...sizeProps, ...props, children };
+          }, iconSize = (typeof size2 == "number" ? size2 * 0.7 : (0, import_font_size.getFontSize)(size2)) * 1.2, theme = (0, import_web.useTheme)(), getThemedIcon = (0, import_helpers_tamagui.useGetThemedIcon)({ size: iconSize, color: theme.color }), children = import_react2.default.Children.toArray(props.children).map((child) => props.disablePassStyles || !import_react2.default.isValidElement(child) ? child : getThemedIcon(child)), commonProps = { pressed, disabled, ...sizeProps, ...props, children };
           return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToggleGroupItemProvider, { scope: __scopeToggleGroup, children: context.rovingFocus ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             import_roving_focus.RovingFocusGroup.Item,
             {