@tamagui/core 1.92.1 → 1.93.1

package/dist/test.native.js

@@ -2321,12 +2321,16 @@ var require_createVariable_native = __commonJS({
         writable: !0
       }) : obj[key] = value, obj;
     }
-    var IS_VAR = "isVar", createVariable = function(props) {
+    var IS_VAR = "isVar";
+    function constructCSSVariableName(name) {
+      return "var(--".concat(process.env.TAMAGUI_CSS_VARIABLE_PREFIX || "").concat(name, ")");
+    }
+    var createVariable = function(props) {
       var skipHash = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
       if (!skipHash && isVariable(props))
         return props;
       var key = props.key, name = props.name, val = props.val, _obj;
-      return _obj = {}, _define_property2(_obj, IS_VAR, !0), _define_property2(_obj, "key", key), _define_property2(_obj, "name", skipHash ? "" : (0, import_helpers.simpleHash)(name, 40)), _define_property2(_obj, "val", val), _define_property2(_obj, "variable", import_constants.isWeb ? skipHash ? "var(--".concat(name, ")") : createCSSVariable(name) : ""), _obj;
+      return _obj = {}, _define_property2(_obj, IS_VAR, !0), _define_property2(_obj, "key", key), _define_property2(_obj, "name", skipHash ? "" : (0, import_helpers.simpleHash)(name, 40)), _define_property2(_obj, "val", val), _define_property2(_obj, "variable", import_constants.isWeb ? skipHash ? constructCSSVariableName(name) : createCSSVariable(name) : ""), _obj;
     };
     function variableToString(vrble) {
       var getValue = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
@@ -2357,7 +2361,7 @@ var require_createVariable_native = __commonJS({
     }
     var createCSSVariable = function(nameProp) {
       var includeVar = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, name = (0, import_helpers.simpleHash)(nameProp, 60);
-      return includeVar ? "var(--".concat(name, ")") : name;
+      return includeVar ? constructCSSVariableName(name) : name;
     };
   }
 });
@@ -6220,11 +6224,6 @@ var require_expandStyle_native = __commonJS({
       });
     };
     function expandStyle(key, value) {
-      if (0)
-        switch (key) {
-          case "textAlignVertical":
-          case "writingDirection":
-        }
       if (import_constants.isAndroid && key === "elevationAndroid")
         return [
           [
@@ -7292,22 +7291,8 @@ var require_getSplitStyles_native = __commonJS({
               viewProps["data-".concat(hyphenate(keyInit1))] = valInit[keyInit1];
             continue;
           }
-          if (0) {
+          if (0)
             var didUseKeyInit;
-            if (!isReactNative)
-              switch (keyInit) {
-                case "accessibilityRole":
-                case "accessibilityLabelledBy":
-                case "accessibilityFlowTo":
-                case "accessibilityControls":
-                case "accessibilityDescribedBy":
-                case "accessibilityKeyShortcuts":
-                case "accessibilityLiveRegion":
-                case "accessibilityReadOnly":
-                case "accessibilityRequired":
-                default:
-              }
-          }
           var isShorthand = keyInit in shorthands, isVariant = !isValidStyleKeyInit && variants && keyInit in variants, isStyleLikeKey = isShorthand || isValidStyleKeyInit || isVariant, isPseudo = keyInit in import_helpers.validPseudoKeys, isMedia = !isStyleLikeKey && !isPseudo && (0, import_useMedia.isMediaKey)(keyInit), isMediaOrPseudo1 = !!(isMedia || isPseudo), isStyleProp = isValidStyleKeyInit || isMediaOrPseudo1 || isVariant && !styleProps.noExpand || isShorthand;
           if (!(isStyleProp && (props.asChild === "except-style" || props.asChild === "except-style-web"))) {
             var shouldPassProp = !isStyleProp || // is in parent variants
@@ -8430,11 +8415,20 @@ var require_createComponent_native = __commonJS({
       createComponent: function() {
         return createComponent;
       },
+      isDisabled: function() {
+        return isDisabled;
+      },
       mouseUps: function() {
         return mouseUps;
       },
       spacedChildren: function() {
         return spacedChildren;
+      },
+      subscribeToContextGroup: function() {
+        return subscribeToContextGroup;
+      },
+      useComponentState: function() {
+        return useComponentState;
       }
     });
     module2.exports = __toCommonJS2(createComponent_exports);
@@ -8559,7 +8553,80 @@ var require_createComponent_native = __commonJS({
         return x();
       }), mouseUps.clear();
     }, addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches));
-    var cancelTouches, BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
+    var cancelTouches, useComponentState = function(props, param, staticConfig, config) {
+      var animationDriver = param.animationDriver, groups = param.groups, _animationDriver_usePresence, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, stateRef = (0, import_react3.useRef)({}), hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationDriver == null ? void 0 : animationDriver.supportsCSSVars, curStateRef = stateRef.current, willBeAnimatedClient = function() {
+        var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
+        return !!(next || curStateRef.hasAnimated);
+      }(), willBeAnimated = !import_constants.isServer && willBeAnimatedClient;
+      willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
+      var isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationDriver == null ? void 0 : animationDriver.isReactNative), isReactNative = staticConfig.isReactNative, isAnimated = willBeAnimated;
+      !isReactNative && hasRNAnimation && !staticConfig.isHOC && !isHydrated && (isAnimated = !1, curStateRef.willHydrate = !0);
+      var hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curStateRef.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, disabled = isDisabled(props);
+      disabled != null && (initialState.disabled = disabled);
+      var states = (0, import_react3.useState)(initialState), state = props.forceStyle ? _object_spread_props(_object_spread2({}, states[0]), _define_property2({}, props.forceStyle, !0)) : states[0], setState = states[1];
+      disabled !== state.disabled && setState(_object_spread_props(_object_spread2({}, state, import_defaultComponentState.defaultComponentState), {
+        // removes any stale press state etc
+        disabled
+      }));
+      var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, props.debug);
+      if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
+        var enterVariant = presenceState.enterVariant, exitVariant = presenceState.exitVariant, enterExitVariant = presenceState.enterExitVariant, custom = presenceState.custom;
+        (0, import_isObj.isObj)(custom) && Object.assign(props, custom);
+        var exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
+        state.unmounted && env && staticConfig.variants[env] ? props[env] = !0 : isExiting && exv && (props[exv] = exitVariant !== enterExitVariant);
+      }
+      var shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || // on server for SSR and animation compat added the && isHydrated but perhaps we want
+      // disableClassName="until-hydrated" to be more straightforward
+      // see issue if not, Button sets disableClassName to true <Button animation="" /> with
+      // the react-native driver errors because it tries to animate var(--color) to rbga(..)
+      props.disableClassName && isHydrated), groupName = props.group;
+      if (groupName && !curStateRef.group) {
+        var listeners = /* @__PURE__ */ new Set();
+        curStateRef.group = {
+          listeners,
+          emit: function(name, state2) {
+            listeners.forEach(function(l) {
+              return l(name, state2);
+            });
+          },
+          subscribe: function(cb) {
+            return listeners.add(cb), function() {
+              listeners.delete(cb);
+            };
+          }
+        };
+      }
+      if (groupName) {
+        var groupContextState = groups.state, og = setStateShallow;
+        setStateShallow = function(state2) {
+          og(state2), curStateRef.group.emit(groupName, {
+            pseudo: state2
+          });
+          var next = _object_spread2({}, groupContextState[groupName], state2);
+          groupContextState[groupName] = next;
+        };
+      }
+      return {
+        curStateRef,
+        disabled,
+        groupName,
+        hasAnimationProp,
+        hasEnterStyle,
+        isAnimated,
+        isExiting,
+        isHydrated,
+        presence,
+        presenceState,
+        setState,
+        setStateShallow,
+        shouldAvoidClasses,
+        state,
+        stateRef,
+        supportsCSSVars,
+        willBeAnimated,
+        willBeAnimatedClient
+      };
+    }, BaseText, BaseView, hasSetupBaseViews = !1, lastInteractionWasKeyboard = {
       value: !1
     };
     import_constants.isWeb && globalThis.document && (document.addEventListener("keydown", function() {
@@ -8577,8 +8644,8 @@ var require_createComponent_native = __commonJS({
           defaultForComponent && (defaultProps = _object_spread2({}, defaultForComponent, defaultProps));
         }
       });
-      var Component = staticConfig.Component, isText = staticConfig.isText, isInput = staticConfig.isInput, isZStack = staticConfig.isZStack, isHOC = staticConfig.isHOC, _staticConfig_validStyles = staticConfig.validStyles, _$validStyles = _staticConfig_validStyles === void 0 ? {} : _staticConfig_validStyles, _staticConfig_variants = staticConfig.variants, variants = _staticConfig_variants === void 0 ? {} : _staticConfig_variants, component = /* @__PURE__ */ (0, import_react3.forwardRef)(function(propsIn, forwardedRef) {
-        var _animationsConfig_usePresence, _props_accessibilityState, _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = "";
+      var Component = staticConfig.Component, isText = staticConfig.isText, isZStack = staticConfig.isZStack, isHOC = staticConfig.isHOC, _staticConfig_validStyles = staticConfig.validStyles, _$validStyles = _staticConfig_validStyles === void 0 ? {} : _staticConfig_validStyles, _staticConfig_variants = staticConfig.variants, variants = _staticConfig_variants === void 0 ? {} : _staticConfig_variants, component = /* @__PURE__ */ (0, import_react3.forwardRef)(function(propsIn, forwardedRef) {
+        var _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = "";
         if (!hasSetupBaseViews) {
           var _hooks_getBaseViews;
           hasSetupBaseViews = !0;
@@ -8589,7 +8656,7 @@ var require_createComponent_native = __commonJS({
           var _propsIn_datatestrenders, _current, _;
           (_ = (_propsIn_datatestrenders = propsIn["data-test-renders"])[_current = "current"]) !== null && _ !== void 0 || (_propsIn_datatestrenders[_current] = 0), propsIn["data-test-renders"].current += 1;
         }
-        var componentContext = (0, import_react3.useContext)(import_ComponentContext.ComponentContext), styledContextProps, overriddenContextProps, contextValue, context = staticConfig.context;
+        var componentContext = (0, import_react3.useContext)(import_ComponentContext.ComponentContext), styledContextProps, overriddenContextProps, contextValue, context = staticConfig.context, isReactNative = staticConfig.isReactNative;
         if (context) {
           contextValue = (0, import_react3.useContext)(context);
           var inverseShorthands = (0, import_config.getConfig)().inverseShorthands;
@@ -8609,72 +8676,19 @@ var require_createComponent_native = __commonJS({
         var debugProp = props.debug, componentName2 = props.componentName || staticConfig.componentName;
         if (0)
           var timer;
-        var stateRef = (0, import_react3.useRef)({}), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig == null ? void 0 : animationsConfig.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = function() {
-          var next = !!(hasAnimationProp && !isHOC && useAnimations);
-          return !!(next || curState.hasAnimated);
-        }(), willBeAnimated = !import_constants.isServer && willBeAnimatedClient;
-        willBeAnimated && !curState.hasAnimated && (curState.hasAnimated = !0);
-        var isHydrated = config != null && config.disableSSR ? !0 : (0, import_use_did_finish_ssr.useDidFinishSSR)(), presence = willBeAnimated && props.animatePresence !== !1 && (animationsConfig == null || (_animationsConfig_usePresence = animationsConfig.usePresence) === null || _animationsConfig_usePresence === void 0 ? void 0 : _animationsConfig_usePresence.call(animationsConfig)) || null, presenceState = presence == null ? void 0 : presence[2], isExiting = (presenceState == null ? void 0 : presenceState.isPresent) === !1, isEntering = (presenceState == null ? void 0 : presenceState.isPresent) === !0 && presenceState.initial !== !1, hasEnterStyle = !!props.enterStyle, hasRNAnimation = hasAnimationProp && (animationsConfig == null ? void 0 : animationsConfig.isReactNative), isReactNative = staticConfig.isReactNative, isAnimated = willBeAnimated;
-        !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0);
-        var hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, disabled = props.disabled || ((_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled) || props["aria-disabled"] || // @ts-expect-error (comes from core)
-        props.accessibilityDisabled || !1;
-        disabled != null && (initialState.disabled = disabled);
-        var states = (0, import_react3.useState)(initialState), state = props.forceStyle ? _object_spread_props(_object_spread2({}, states[0]), _define_property2({}, props.forceStyle, !0)) : states[0], setState = states[1];
-        disabled !== state.disabled && setState(_object_spread_props(_object_spread2({}, state, import_defaultComponentState.defaultComponentState), {
-          // removes any stale press state etc
-          disabled
-        }));
-        var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, debugProp);
-        if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
-          var enterVariant = presenceState.enterVariant, exitVariant = presenceState.exitVariant, enterExitVariant = presenceState.enterExitVariant, custom = presenceState.custom;
-          (0, import_isObj.isObj)(custom) && Object.assign(props, custom);
-          var exv = exitVariant ?? enterExitVariant, env = enterVariant ?? enterExitVariant;
-          state.unmounted && env && staticConfig.variants[env] ? props[env] = !0 : isExiting && exv && (props[exv] = exitVariant !== enterExitVariant);
-        }
-        var shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated && !supportsCSSVars || !staticConfig.acceptsClassName || // on server for SSR and animation compat added the && isHydrated but perhaps we want
-        // disableClassName="until-hydrated" to be more straightforward
-        // see issue if not, Button sets disableClassName to true <Button animation="" /> with
-        // the react-native driver errors because it tries to animate var(--color) to rbga(..)
-        propsIn.disableClassName && isHydrated), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, groupName = props.group;
-        if (groupName && !curState.group) {
-          var listeners = /* @__PURE__ */ new Set();
-          curState.group = {
-            listeners,
-            emit: function(name2, state2) {
-              listeners.forEach(function(l) {
-                return l(name2, state2);
-              });
-            },
-            subscribe: function(cb) {
-              return listeners.add(cb), function() {
-                listeners.delete(cb);
-              };
-            }
-          };
-        }
-        if (groupName) {
-          var groupContextState = componentContext.groups.state, og = setStateShallow;
-          setStateShallow = function(state2) {
-            og(state2), curState.group.emit(groupName, {
-              pseudo: state2
-            });
-            var next = _object_spread2({}, groupContextState[groupName], state2);
-            groupContextState[groupName] = next;
-          };
-        }
-        var hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
-        animationsConfig && isAnimated && (elementType = animationsConfig[isText ? "Text" : "View"] || elementType);
+        var animationDriver = componentContext.animationDriver, useAnimations = animationDriver == null ? void 0 : animationDriver.useAnimations, _useComponentState = useComponentState(props, componentContext, staticConfig, config), curStateRef = _useComponentState.curStateRef, disabled = _useComponentState.disabled, groupName = _useComponentState.groupName, hasAnimationProp = _useComponentState.hasAnimationProp, hasEnterStyle = _useComponentState.hasEnterStyle, isAnimated = _useComponentState.isAnimated, isExiting = _useComponentState.isExiting, isHydrated = _useComponentState.isHydrated, presence = _useComponentState.presence, presenceState = _useComponentState.presenceState, setState = _useComponentState.setState, setStateShallow = _useComponentState.setStateShallow, shouldAvoidClasses = _useComponentState.shouldAvoidClasses, state = _useComponentState.state, stateRef = _useComponentState.stateRef, supportsCSSVars = _useComponentState.supportsCSSVars, willBeAnimated = _useComponentState.willBeAnimated, willBeAnimatedClient = _useComponentState.willBeAnimatedClient, shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants.isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
+        animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
         var disableThemeProp = !1, disableTheme = disableThemeProp || isHOC;
-        props.themeShallow && (curState.themeShallow = !0);
+        props.themeShallow && (curStateRef.themeShallow = !0);
         var themeStateProps = {
           name: props.theme,
           componentName: componentName2,
           disable: disableTheme,
-          shallow: curState.themeShallow,
+          shallow: curStateRef.themeShallow,
           inverse: props.themeInverse,
           debug: debugProp
         };
-        if (typeof curState.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function() {
+        if (typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function() {
           return stateRef.current.isListeningToTheme;
         }), themeStateProps.deopt = willBeAnimated, !1) {
           var name, type, dataIs, banner;
@@ -8695,11 +8709,11 @@ var require_createComponent_native = __commonJS({
           isExiting,
           isAnimated
         }, splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, (themeState == null || (_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", state, styleProps, null, componentContext, elementType, debugProp);
-        if (props.group && props.untilMeasured === "hide" && !curState.hasMeasured) {
+        if (props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
           var _splitStyles;
           (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
         }
-        curState.isListeningToTheme = splitStyles.dynamicThemeAccess;
+        curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
         var isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
         (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
           enabled: shouldListenForMedia,
@@ -8754,53 +8768,39 @@ var require_createComponent_native = __commonJS({
           }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function(prev) {
             return _object_spread2({}, prev);
           }), stateRef.current.hasMeasured = !0;
-        })), viewProps = ((_hooks_usePropsTransform = import_setupHooks.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_setupHooks.hooks, elementType, nonTamaguiProps, stateRef, curState.willHydrate)) || nonTamaguiProps, curState.composedRef || (curState.composedRef = (0, import_compose_refs.composeRefs)(function(x) {
+        })), viewProps = ((_hooks_usePropsTransform = import_setupHooks.hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(import_setupHooks.hooks, elementType, nonTamaguiProps, stateRef, curStateRef.willHydrate)) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = (0, import_compose_refs.composeRefs)(function(x) {
           return stateRef.current.host = x;
-        }, forwardedRef)), viewProps.ref = curState.composedRef;
+        }, forwardedRef)), viewProps.ref = curStateRef.composedRef;
         var pseudoGroups = splitStyles.pseudoGroups, mediaGroups = splitStyles.mediaGroups;
-        curState.unPress || (curState.unPress = function() {
+        curStateRef.unPress || (curStateRef.unPress = function() {
           return setStateShallow({
             press: !1,
             pressIn: !1
           });
         });
-        var unPress = curState.unPress, shouldEnter = state.unmounted;
+        var unPress = curStateRef.unPress;
         (0, import_react3.useEffect)(function() {
           if (!disabled) {
-            if (shouldEnter) {
+            if (state.unmounted) {
               setStateShallow({
                 unmounted: !1
               });
               return;
             }
-            var disposeGroupsListener;
-            if (pseudoGroups || mediaGroups) {
-              var _componentContext_groups, current = {
-                pseudo: {},
-                media: {}
-              };
-              disposeGroupsListener = (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 ? void 0 : _componentContext_groups.subscribe(function(name2, param) {
-                var layout = param.layout, pseudo = param.pseudo, persist = function() {
-                  var group = _object_spread_props(_object_spread2({}, state.group), _define_property2({}, name2, current));
-                  setStateShallow({
-                    group
-                  });
-                };
-                if (pseudo && pseudoGroups != null && pseudoGroups.has(name2))
-                  Object.assign(current.pseudo, pseudo), persist();
-                else if (layout && mediaGroups) {
-                  var mediaState22 = getMediaState(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState22);
-                  next !== current.media && (Object.assign(current.media, next), persist());
-                }
-              });
-            }
+            var dispose = subscribeToContextGroup({
+              disabled,
+              componentContext,
+              setStateShallow,
+              state,
+              mediaGroups,
+              pseudoGroups
+            });
             return function() {
-              disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
+              dispose == null || dispose(), mouseUps.delete(unPress);
             };
           }
         }, [
           disabled,
-          shouldEnter,
           pseudoGroups ? Object.keys(_to_consumable_array(pseudoGroups)).join("") : 0,
           mediaGroups ? Object.keys(_to_consumable_array(mediaGroups)).join("") : 0
         ]);
@@ -8886,7 +8886,7 @@ var require_createComponent_native = __commonJS({
         ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResetPresence, {
           children: content
         }));
-        var groupState = curState.group, subGroupContext = (0, import_react3.useMemo)(function() {
+        var groupState = curStateRef.group, subGroupContext = (0, import_react3.useMemo)(function() {
           var _splitStyles_style, _splitStyles_style1;
           if (!(!groupState || !groupName))
             return groupState.listeners.clear(), _object_spread_props(_object_spread2({}, componentContext.groups), {
@@ -9098,6 +9098,31 @@ var require_createComponent_native = __commonJS({
     }
     var fromPx = function(val) {
       return typeof val != "string" ? val : +val.replace("px", "");
+    }, isDisabled = function(props) {
+      var _props_accessibilityState;
+      return props.disabled || ((_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled) || props["aria-disabled"] || props.accessibilityDisabled || !1;
+    }, subscribeToContextGroup = function(param) {
+      var _param_disabled = param.disabled, disabled = _param_disabled === void 0 ? !1 : _param_disabled, setStateShallow = param.setStateShallow, pseudoGroups = param.pseudoGroups, mediaGroups = param.mediaGroups, componentContext = param.componentContext, state = param.state;
+      if (pseudoGroups || mediaGroups) {
+        var _componentContext_groups, current = {
+          pseudo: {},
+          media: {}
+        };
+        return (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 ? void 0 : _componentContext_groups.subscribe(function(name, param2) {
+          var layout = param2.layout, pseudo = param2.pseudo, persist = function() {
+            var group = _object_spread_props(_object_spread2({}, state.group), _define_property2({}, name, current));
+            setStateShallow({
+              group
+            });
+          };
+          if (pseudo && pseudoGroups != null && pseudoGroups.has(name))
+            Object.assign(current.pseudo, pseudo), persist();
+          else if (layout && mediaGroups) {
+            var mediaState2 = getMediaState(mediaGroups, layout), next = (0, import_createShallowSetState.mergeIfNotShallowEqual)(current.media, mediaState2);
+            next !== current.media && (Object.assign(current.media, next), persist());
+          }
+        });
+      }
     };
   }
 });
@@ -9524,7 +9549,7 @@ var require_registerCSSVariable_native = __commonJS({
       tokensValueToVariable.set((0, import_createVariable.getVariableValue)(v), v);
     }, variableToCSS = function(v) {
       var unitless = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !1;
-      return "--".concat((0, import_createVariable.createCSSVariable)(v.name, !1), ":").concat(!unitless && typeof v.val == "number" ? "".concat(v.val, "px") : v.val);
+      return "--".concat(process.env.TAMAGUI_CSS_VARIABLE_PREFIX || "").concat((0, import_createVariable.createCSSVariable)(v.name, !1), ":").concat(!unitless && typeof v.val == "number" ? "".concat(v.val, "px") : v.val);
     }, tokensValueToVariable = /* @__PURE__ */ new Map();
   }
 });
@@ -11283,7 +11308,7 @@ var require_useProps_native = __commonJS({
       }
     });
     module2.exports = __toCommonJS2(useProps_exports);
-    var import_react3 = require("react"), import_ComponentContext = require_ComponentContext_native(), import_defaultComponentState = require_defaultComponentState_native(), import_getSplitStyles = require_getSplitStyles_native(), import_Stack = require_Stack_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
+    var import_react3 = require("react"), import_config = require_config_native(), import_ComponentContext = require_ComponentContext_native(), import_createComponent = require_createComponent_native(), import_getSplitStyles = require_getSplitStyles_native(), import_Stack = require_Stack_native(), import_useMedia = require_useMedia_native(), import_useTheme = require_useTheme_native();
     function _array_like_to_array(arr, len) {
       (len == null || len > arr.length) && (len = arr.length);
       for (var i = 0, arr2 = new Array(len); i < len; i++)
@@ -11294,6 +11319,10 @@ var require_useProps_native = __commonJS({
       if (Array.isArray(arr))
         return arr;
     }
+    function _array_without_holes(arr) {
+      if (Array.isArray(arr))
+        return _array_like_to_array(arr);
+    }
     function _define_property2(obj, key, value) {
       return key in obj ? Object.defineProperty(obj, key, {
         value,
@@ -11302,6 +11331,10 @@ var require_useProps_native = __commonJS({
         writable: !0
       }) : obj[key] = value, obj;
     }
+    function _iterable_to_array(iter) {
+      if ((typeof Symbol > "u" ? "undefined" : _type_of(Symbol)) < "u" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
+        return Array.from(iter);
+    }
     function _iterable_to_array_limit(arr, i) {
       var _i = arr == null ? null : (typeof Symbol > "u" ? "undefined" : _type_of(Symbol)) < "u" && arr[Symbol.iterator] || arr["@@iterator"];
       if (_i != null) {
@@ -11325,6 +11358,9 @@ var require_useProps_native = __commonJS({
     function _non_iterable_rest() {
       throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
+    function _non_iterable_spread() {
+      throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
     function _object_spread2(target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
@@ -11354,6 +11390,9 @@ var require_useProps_native = __commonJS({
     function _sliced_to_array(arr, i) {
       return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
     }
+    function _to_consumable_array(arr) {
+      return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+    }
     function _unsupported_iterable_to_array(o, minLen) {
       if (o) {
         if (typeof o == "string")
@@ -11379,15 +11418,36 @@ var require_useProps_native = __commonJS({
     function usePropsAndStyle(props, opts) {
       var _opts_forComponent, _themeState_state, _opts_forComponent_staticConfig, staticConfig = (_opts_forComponent_staticConfig = opts == null || (_opts_forComponent = opts.forComponent) === null || _opts_forComponent === void 0 ? void 0 : _opts_forComponent.staticConfig) !== null && _opts_forComponent_staticConfig !== void 0 ? _opts_forComponent_staticConfig : import_Stack.Stack.staticConfig, _useThemeWithState = _sliced_to_array((0, import_useTheme.useThemeWithState)({
         componentName: staticConfig.componentName
-      }), 2), themeState = _useThemeWithState[0], theme = _useThemeWithState[1], componentContext = (0, import_react3.useContext)(import_ComponentContext.ComponentContext), media = (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, ((_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", import_defaultComponentState.defaultComponentStateMounted, _object_spread2({
+      }), 2), themeState = _useThemeWithState[0], theme = _useThemeWithState[1], componentContext = (0, import_react3.useContext)(import_ComponentContext.ComponentContext), _useComponentState = (0, import_createComponent.useComponentState)(props, componentContext, staticConfig, (0, import_config.getConfig)()), state = _useComponentState.state, disabled = _useComponentState.disabled, setStateShallow = _useComponentState.setStateShallow, media = (0, import_useMedia.useMedia)(), splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, ((_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", state, _object_spread2({
         isAnimated: !1,
         mediaState: media,
         noSkip: !0,
         noMergeStyle: !0,
         noClassNames: !0,
         resolveValues: "auto"
-      }, opts), null, componentContext);
-      return [
+      }, opts), null, componentContext), mediaGroups = splitStyles.mediaGroups, pseudoGroups = splitStyles.pseudoGroups;
+      return (0, import_react3.useEffect)(function() {
+        if (!disabled) {
+          if (state.unmounted) {
+            setStateShallow({
+              unmounted: !1
+            });
+            return;
+          }
+          return (0, import_createComponent.subscribeToContextGroup)({
+            disabled,
+            componentContext,
+            setStateShallow,
+            state,
+            mediaGroups,
+            pseudoGroups
+          });
+        }
+      }, [
+        disabled,
+        pseudoGroups ? Object.keys(_to_consumable_array(pseudoGroups)).join("") : 0,
+        mediaGroups ? Object.keys(_to_consumable_array(mediaGroups)).join("") : 0
+      ]), [
         splitStyles.viewProps,
         splitStyles.style || {},
         theme,
@@ -12208,6 +12268,7 @@ var require_index_native9 = __commonJS({
     __reExport2(src_exports2, require_getExpandedShorthands_native(), module2.exports);
     __reExport2(src_exports2, require_getSplitStyles_native(), module2.exports);
     __reExport2(src_exports2, require_getStylesAtomic_native(), module2.exports);
+    __reExport2(src_exports2, require_createComponent_native(), module2.exports);
     __reExport2(src_exports2, require_getThemeCSSRules_native(), module2.exports);
     __reExport2(src_exports2, require_getVariantExtras_native(), module2.exports);
     __reExport2(src_exports2, require_isTamaguiComponent_native(), module2.exports);