tamagui 1.90.16 → 1.91.0

package/dist/native.js

@@ -1094,7 +1094,9 @@ var require_concatClassName_native = __commonJS({
     var pseudoInvert = {
       hover: "hoverStyle",
       focus: "focusStyle",
-      press: "pressStyle"
+      press: "pressStyle",
+      focusVisible: "focusVisibleStyle",
+      disabled: "disabledStyle"
     };
   }
 });
@@ -1644,13 +1646,18 @@ var require_validStyleProps_native = __commonJS({
       }),
       // allow some web only ones
       !1
-    ), stylePropsText = _object_spread9({}, stylePropsView, stylePropsTextOnly), stylePropsAll = stylePropsText, validPseudoKeys = {
-      enterStyle: !0,
-      exitStyle: !0,
-      hoverStyle: !0,
-      pressStyle: !0,
-      focusStyle: !0
-    }, validStyles = _object_spread9({}, validPseudoKeys, stylePropsView);
+    ), stylePropsText = _object_spread9({}, stylePropsView, stylePropsTextOnly), stylePropsAll = stylePropsText, validPseudoKeys = _object_spread9(
+      {
+        enterStyle: !0,
+        exitStyle: !0,
+        hoverStyle: !0,
+        pressStyle: !0,
+        focusStyle: !0,
+        disabledStyle: !0
+      },
+      // allow some web only ones
+      !1
+    ), validStyles = _object_spread9({}, validPseudoKeys, stylePropsView);
   }
 });
 
@@ -2318,7 +2325,8 @@ var require_config_native = __commonJS({
       var useVariable = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : import_constants4.isWeb, token = getTokenObject(value, group);
       return useVariable ? token == null ? void 0 : token.variable : token == null ? void 0 : token.val;
     }, getTokenValue3 = function(value, group) {
-      return getToken3(value, group, !1);
+      if (!(value === "unset" || value === "auto"))
+        return getToken3(value, group, !1);
     }, useTokens = getTokens3, getThemes3 = function() {
       return conf.themes;
     }, configListeners = /* @__PURE__ */ new Set(), onConfiguredOnce = function(cb) {
@@ -3081,14 +3089,26 @@ var require_pseudoDescriptors_native = __commonJS({
         stateKey: "press",
         priority: 2
       },
+      focusVisibleStyle: {
+        name: "focus-visible",
+        priority: 3,
+        stateKey: "focusVisible"
+      },
       focusStyle: {
         name: "focus",
         priority: 3
+      },
+      disabledStyle: {
+        name: "disabled",
+        priority: 4,
+        stateKey: "disabled"
       }
     }, pseudoPriorities = {
       hover: 1,
       press: 2,
-      focus: 3
+      focus: 3,
+      focusVisible: 3,
+      disabled: 4
     }, pseudoDescriptors = _object_spread_props8(_object_spread9({}, pseudoDescriptorsBase), {
       enterStyle: {
         name: "enter",
@@ -4008,18 +4028,22 @@ var require_createShallowSetState_native = __commonJS({
       }
       return target;
     }
-    function createShallowSetState(setter, debug) {
+    function createShallowSetState(setter, isDisabled, debug) {
       return function(next) {
         return setter(function(prev) {
-          return mergeIfNotShallowEqual(prev, next, debug);
+          return mergeIfNotShallowEqual(prev, next, isDisabled, debug);
         });
       };
     }
-    function mergeIfNotShallowEqual(prev, next, debug) {
-      return isEqualShallow(prev, next) ? prev : (process.env.NODE_ENV === "development" && debug && console.warn("setStateShallow CHANGE", {
+    function mergeIfNotShallowEqual(prev, next, isDisabled, debug) {
+      if (isDisabled || !prev || !next || isEqualShallow(prev, next))
+        return prev;
+      if (process.env.NODE_ENV === "development" && debug && (console.warn("setStateShallow CHANGE", {
         prev,
         next
-      }), _object_spread9({}, prev, next));
+      }), debug === "break"))
+        debugger;
+      return _object_spread9({}, prev, next);
     }
     function isEqualShallow(prev, next) {
       for (var key in next)
@@ -5162,7 +5186,9 @@ var require_defaultComponentState_native = __commonJS({
       press: !1,
       pressIn: !1,
       focus: !1,
-      unmounted: !0
+      focusVisible: !1,
+      unmounted: !0,
+      disabled: !1
     }, defaultComponentStateMounted = _object_spread_props8(_object_spread9({}, defaultComponentState), {
       unmounted: !1
     }), defaultComponentStateShouldEnter = _object_spread_props8(_object_spread9({}, defaultComponentState), {
@@ -7428,10 +7454,10 @@ var require_propMapper_native = __commonJS({
       fontSize: "size",
       fontWeight: "weight"
     }, lastFontFamilyToken = null, getTokenForKey = function(key, value) {
-      var resolveAs = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "none", styleState = arguments.length > 3 ? arguments[3] : void 0, _staticConfig_acceptTokens;
+      var resolveAs = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : "none", styleState = arguments.length > 3 ? arguments[3] : void 0, _staticConfig_accept;
       if (resolveAs === "none")
         return value;
-      var theme = styleState.theme, _styleState_conf = styleState.conf, conf = _styleState_conf === void 0 ? (0, import_config.getConfig)() : _styleState_conf, context = styleState.context, fontFamily = styleState.fontFamily, staticConfig = styleState.staticConfig, tokensParsed = conf.tokensParsed, valOrVar, hasSet = !1, customTokenAccept = staticConfig == null || (_staticConfig_acceptTokens = staticConfig.acceptTokens) === null || _staticConfig_acceptTokens === void 0 ? void 0 : _staticConfig_acceptTokens[key];
+      var theme = styleState.theme, _styleState_conf = styleState.conf, conf = _styleState_conf === void 0 ? (0, import_config.getConfig)() : _styleState_conf, context = styleState.context, fontFamily = styleState.fontFamily, staticConfig = styleState.staticConfig, tokensParsed = conf.tokensParsed, valOrVar, hasSet = !1, customTokenAccept = staticConfig == null || (_staticConfig_accept = staticConfig.accept) === null || _staticConfig_accept === void 0 ? void 0 : _staticConfig_accept[key];
       if (customTokenAccept) {
         var _theme_value, val = (_theme_value = theme == null ? void 0 : theme[value]) !== null && _theme_value !== void 0 ? _theme_value : tokensParsed[customTokenAccept][value];
         val != null && (resolveAs = "value", valOrVar = val, hasSet = !0);
@@ -7699,8 +7725,8 @@ var require_getSplitStyles_native = __commonJS({
     }
     var IS_STATIC = process.env.IS_STATIC === "is_static", conf, PROP_SPLIT = "-";
     function isValidStyleKey(key, staticConfig) {
-      var _staticConfig_acceptTokens, validStyleProps = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
-      return validStyleProps[key] || ((_staticConfig_acceptTokens = staticConfig.acceptTokens) === null || _staticConfig_acceptTokens === void 0 ? void 0 : _staticConfig_acceptTokens[key]);
+      var _staticConfig_accept, validStyleProps = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles);
+      return validStyleProps[key] || ((_staticConfig_accept = staticConfig.accept) === null || _staticConfig_accept === void 0 ? void 0 : _staticConfig_accept[key]);
     }
     var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) {
       conf = conf || (0, import_config.getConfig)(), import_constants4.isWeb && styleProps.isAnimated && conf.animations.isReactNative && !styleProps.noNormalize && (styleProps.noNormalize = "values");
@@ -7730,6 +7756,11 @@ var require_getSplitStyles_native = __commonJS({
       }), console.groupEnd());
       for (var keyOg in props) {
         var _parentStaticConfig_variants, keyInit = keyOg, valInit = props[keyOg];
+        if (staticConfig.accept && (staticConfig.accept[keyInit] === "style" || staticConfig.accept[keyInit] === "textStyle") && typeof valInit == "object") {
+          var styleObject = getSubStyle(styleState, keyInit, valInit, styleProps.noClassNames);
+          viewProps[keyInit] = styleObject;
+          continue;
+        }
         if (process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd(), styleProps.disableExpandShorthands || keyInit in shorthands && (keyInit = shorthands[keyInit]), keyInit !== "className" && !(keyInit in usedKeys)) {
           if (keyInit in import_skipProps.skipProps && !styleProps.noSkip && !isHOC) {
             if (keyInit === "group" && !1)
@@ -8102,33 +8133,21 @@ current`, _object_spread9({}, styleState.style)));
         if (!isReactNative && viewProps.tabIndex == null)
           var _viewProps_focusable, isFocusable, role;
       }
-      if (props.style)
+      var styleProp = props.style;
+      if (styleProp)
         if (isHOC)
-          viewProps.style = normalizeStyle(props.style);
-        else {
-          var _iteratorNormalCompletion3 = !0, _didIteratorError3 = !1, _iteratorError3 = void 0;
-          try {
-            for (var _iterator3 = [].concat(props.style)[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = !0) {
-              var style1 = _step3.value;
-              if (style1)
-                if (style1.$$css)
-                  Object.assign(styleState.classNames, style1);
-                else {
-                  var _styleState4;
-                  (_styleState4 = styleState).style || (_styleState4.style = {}), Object.assign(styleState.style, normalizeStyle(style1));
-                }
-            }
-          } catch (err) {
-            _didIteratorError3 = !0, _iteratorError3 = err;
-          } finally {
-            try {
-              !_iteratorNormalCompletion3 && _iterator3.return != null && _iterator3.return();
-            } finally {
-              if (_didIteratorError3)
-                throw _iteratorError3;
-            }
+          viewProps.style = normalizeStyle(styleProp);
+        else
+          for (var isArray = Array.isArray(styleProp), len = isArray ? props.length : 1, i1 = 0; i1 < len; i1++) {
+            var style1 = isArray ? styleProp[i1] : styleProp;
+            if (style1)
+              if (style1.$$css)
+                Object.assign(styleState.classNames, style1);
+              else {
+                var _styleState4;
+                (_styleState4 = styleState).style || (_styleState4.style = {}), Object.assign(styleState.style, normalizeStyle(style1));
+              }
           }
-        }
       var result = {
         space,
         hasMedia,
@@ -8156,9 +8175,9 @@ current`, _object_spread9({}, styleState.style)));
         if (0) {
           var _staticConfig_defaultProps, fontFamily, fontFamilyClassName, groupClassName, componentNameFinal, componentClassName, classList, finalClassName;
           if (!styleProps.noMergeStyle && !(styleProps.isAnimated && !conf.animations.supportsCSSVars && isReactNative) && isReactNative) {
-            var cnStyles, _iteratorNormalCompletion4, _didIteratorError4, _iteratorError4;
+            var cnStyles, _iteratorNormalCompletion3, _didIteratorError3, _iteratorError3;
             try {
-              for (var _iterator4, _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = !0)
+              for (var _iterator3, _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = !0)
                 var name;
             } catch (err) {
             } finally {
@@ -8205,8 +8224,8 @@ current`, _object_spread9({}, styleState.style)));
       } else {
         var shouldNormalize = import_constants4.isWeb && !disableNormalize && !styleProps.noNormalize, out = shouldNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
         if (
-          // acceptTokens are for props not styles
-          staticConfig.acceptTokens && key in staticConfig.acceptTokens
+          // accept is for props not styles
+          staticConfig.accept && key in staticConfig.accept
         )
           viewProps[key] = out;
         else {
@@ -9360,7 +9379,7 @@ var require_createComponent_native = __commonJS({
         defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
       });
       var component = /* @__PURE__ */ (0, import_react2.forwardRef)(function(propsIn, forwardedRef) {
-        var _animationsConfig_usePresence, _props_accessibilityState, _themeState_state, _props_accessibilityState1, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? (0, import_react2.useId)() : "";
+        var _animationsConfig_usePresence, _props_accessibilityState, _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? (0, import_react2.useId)() : "";
         if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
           var _hooks_getBaseViews;
           hasSetupBaseViews = !0;
@@ -9408,7 +9427,9 @@ var require_createComponent_native = __commonJS({
         ]), !1)
           var timer;
         process.env.NODE_ENV === "development" && time && time(_templateObject()), process.env.NODE_ENV === "development" && time && time(_templateObject1());
-        var stateRef = (0, import_react2.useRef)({});
+        var stateRef = (0, import_react2.useRef)({
+          handleFocusVisible: !0
+        });
         process.env.NODE_ENV === "development" && time && time(_templateObject2());
         var 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);
@@ -9417,7 +9438,14 @@ var require_createComponent_native = __commonJS({
         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), process.env.NODE_ENV === "development" && time && time(_templateObject3());
-        var hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react2.useState)(initialState), state = props.forceStyle ? _object_spread_props8(_object_spread9({}, states[0]), _define_property9({}, props.forceStyle, !0)) : states[0], setState = states[1], setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, debugProp);
+        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_react2.useState)(initialState), state = props.forceStyle ? _object_spread_props8(_object_spread9({}, states[0]), _define_property9({}, props.forceStyle, !0)) : states[0], setState = states[1];
+        disabled !== state.disabled && setState(_object_spread_props8(_object_spread9({}, state), {
+          disabled
+        }));
+        var setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, debugProp);
         if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
           process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn("has presenceState ".concat(JSON.stringify(presenceState)));
           var enterVariant = presenceState.enterVariant, exitVariant = presenceState.exitVariant, enterExitVariant = presenceState.enterExitVariant, custom = presenceState.custom;
@@ -9457,7 +9485,7 @@ var require_createComponent_native = __commonJS({
           };
         }
         process.env.NODE_ENV === "development" && time && time(_templateObject4());
-        var hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText), _props_disabled, isDisabled = (_props_disabled = props.disabled) !== null && _props_disabled !== void 0 ? _props_disabled : (_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled;
+        var hasTextAncestor = !!(import_constants4.isWeb && isText && componentContext.inText);
         process.env.NODE_ENV === "development" && time && time(_templateObject5());
         var isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants4.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);
@@ -9576,10 +9604,7 @@ var require_createComponent_native = __commonJS({
         }
         process.env.NODE_ENV === "development" && props.untilMeasured && !props.group && console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
 
-If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`), process.env.NODE_ENV === "development" && time && time(_templateObject12());
-        var disabled = ((_props_accessibilityState1 = props.accessibilityState) === null || _props_accessibilityState1 === void 0 ? void 0 : _props_accessibilityState1.disabled) || // @ts-expect-error (comes from core)
-        props.accessibilityDisabled;
-        groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, function(e) {
+If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`), process.env.NODE_ENV === "development" && time && time(_templateObject12()), groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonTamaguiProps.onLayout, function(e) {
           stateRef.current.group.emit(groupName, {
             layout: e.nativeEvent.layout
           }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function(prev) {
@@ -9600,46 +9625,49 @@ If you meant to do this, you can disable this warning - either change untilMeasu
         });
         var unPress = curState.unPress, shouldEnter = state.unmounted;
         (0, import_react2.useEffect)(function() {
-          if (shouldEnter) {
-            setStateShallow({
-              unmounted: !1
-            });
-            return;
-          }
-          var disposeGroupsListener;
-          if (pseudoGroups || mediaGroups) {
-            var current = {
-              pseudo: {},
-              media: {}
-            };
-            disposeGroupsListener = componentContext.groups.subscribe(function(name2, param) {
-              var layout = param.layout, pseudo = param.pseudo, persist = function() {
-                var group = _object_spread_props8(_object_spread9({}, state.group), _define_property9({}, name2, current));
-                setStateShallow({
-                  group
-                });
+          if (!disabled) {
+            if (shouldEnter) {
+              setStateShallow({
+                unmounted: !1
+              });
+              return;
+            }
+            var disposeGroupsListener;
+            if (pseudoGroups || mediaGroups) {
+              var current = {
+                pseudo: {},
+                media: {}
               };
-              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());
-              }
-            });
+              disposeGroupsListener = componentContext.groups.subscribe(function(name2, param) {
+                var layout = param.layout, pseudo = param.pseudo, persist = function() {
+                  var group = _object_spread_props8(_object_spread9({}, state.group), _define_property9({}, 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());
+                }
+              });
+            }
+            return function() {
+              disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
+            };
           }
-          return function() {
-            disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
-          };
         }, [
+          disabled,
           shouldEnter,
           pseudoGroups ? Object.keys(_to_consumable_array2(pseudoGroups)).join("") : 0,
           mediaGroups ? Object.keys(_to_consumable_array2(mediaGroups)).join("") : 0
         ]);
-        var runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants4.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimeHoverStyle);
+        var runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle), runtimeFocusStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.focusStyle), attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos != null && pseudos.focusVisibleStyle), runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle), needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants4.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimeHoverStyle);
         process.env.NODE_ENV === "development" && time && time(_templateObject14());
-        var events = shouldAttach && !isDisabled && !props.asChild ? _object_spread9(_object_spread_props8(_object_spread9({
+        var events = shouldAttach ? _object_spread9(_object_spread_props8(_object_spread9({
           onPressOut: attachPress ? function(e) {
-            unPress(), onPressOut == null || onPressOut(e), onMouseUp == null || onMouseUp(e);
+            stateRef.current.handleFocusVisible = !0, unPress(), onPressOut == null || onPressOut(e), onMouseUp == null || onMouseUp(e);
           } : void 0
         }, (attachHover || attachPress) && {
           onMouseEnter: function(e) {
@@ -9652,7 +9680,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           }
         }), {
           onPressIn: attachPress ? function(e) {
-            runtimePressStyle && setStateShallow({
+            stateRef.current.handleFocusVisible = !1, runtimePressStyle && setStateShallow({
               press: !0,
               pressIn: !0
             }), onPressIn == null || onPressIn(e), onMouseDown == null || onMouseDown(e), import_constants4.isWeb && mouseUps.add(unPress);
@@ -9666,13 +9694,20 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           }
         }, attachFocus && {
           onFocus: function(e) {
-            setStateShallow({
-              focus: !0
+            pseudos != null && pseudos.focusVisibleStyle ? setTimeout(function() {
+              setStateShallow({
+                focus: !0,
+                focusVisible: !!stateRef.current.handleFocusVisible
+              });
+            }, 0) : setStateShallow({
+              focus: !0,
+              focusVisible: !1
             }), onFocus == null || onFocus(e);
           },
           onBlur: function(e) {
-            setStateShallow({
-              focus: !1
+            stateRef.current.handleFocusVisible = !0, setStateShallow({
+              focus: !1,
+              focusVisible: !1
             }), onBlur == null || onBlur(e);
           }
         }) : null;
@@ -9680,7 +9715,7 @@ If you meant to do this, you can disable this warning - either change untilMeasu
           var _viewProps_focusable;
           Object.assign(events, {
             cancelable: !viewProps.rejectResponderTermination,
-            disabled: isDisabled,
+            disabled,
             hitSlop: viewProps.hitSlop,
             delayLongPress: viewProps.delayLongPress,
             delayPressIn: viewProps.delayPressIn,
@@ -20209,6 +20244,10 @@ var require_ScrollView_native = __commonJS({
           true: import_stacks3.fullscreenStyle
         }
       }
+    }, {
+      accept: {
+        contentContainerStyle: "style"
+      }
     });
   }
 });
@@ -23671,7 +23710,7 @@ var require_Button_native = __commonJS({
             backgrounded: !0,
             borderWidth: 1,
             borderColor: "transparent",
-            focusStyle: {
+            focusVisibleStyle: {
               outlineColor: "$outlineColor",
               outlineStyle: "solid",
               outlineWidth: 2
@@ -23691,7 +23730,7 @@ var require_Button_native = __commonJS({
               backgroundColor: "transparent",
               borderColor: "$borderColorPress"
             },
-            focusStyle: {
+            focusVisibleStyle: {
               backgroundColor: "transparent",
               borderColor: "$borderColorFocus"
             }
@@ -23818,8 +23857,8 @@ var require_Button_native = __commonJS({
       }, propsIn.disabled && {
         // in rnw - false still has keyboard tabIndex, undefined = not actually focusable
         focusable: void 0,
-        // even with tabIndex unset, it will keep focusStyle on web so disable it here
-        focusStyle: {
+        // even with tabIndex unset, it will keep focusVisibleStyle on web so disable it here
+        focusVisibleStyle: {
           borderColor: "$background"
         }
       }), {
@@ -24206,7 +24245,9 @@ var require_Checkbox_native = __commonJS({
               borderColor: "$borderColorHover"
             },
             focusStyle: {
-              borderColor: "$borderColorFocus",
+              borderColor: "$borderColorFocus"
+            },
+            focusVisibleStyle: {
               outlineStyle: "solid",
               outlineWidth: 2,
               outlineColor: "$outlineColor"
@@ -31109,7 +31150,7 @@ var require_Popover_native = __commonJS({
         disable: sheetActive,
         hoverable,
         disableFocus
-      }), _React_useState1 = _sliced_to_array(React2.useState(), 2), anchorTo = _React_useState1[0], setAnchorTo = _React_useState1[1];
+      }), _React_useState1 = _sliced_to_array(React2.useState(), 2), anchorTo = _React_useState1[0], setAnchorToRaw = _React_useState1[1], setAnchorTo = (0, import_core12.createShallowSetState)(setAnchorToRaw);
       React2.useImperativeHandle(forwardedRef, function() {
         return {
           anchorTo: setAnchorTo
@@ -31965,7 +32006,9 @@ var require_RadioGroup_native = __commonJS({
             },
             focusStyle: {
               borderColor: "$borderColorHover",
-              backgroundColor: "$backgroundHover",
+              backgroundColor: "$backgroundHover"
+            },
+            focusVisibleStyle: {
               outlineStyle: "solid",
               outlineWidth: 2,
               outlineColor: "$outlineColor"
@@ -31989,7 +32032,7 @@ var require_RadioGroup_native = __commonJS({
               borderColor: "$borderColor",
               backgroundColor: "$backgroundColor"
             },
-            focusStyle: {
+            focusVisibleStyle: {
               outlineWidth: 0
             }
           }
@@ -33132,7 +33175,7 @@ var require_SelectItem_native = __commonJS({
           cursor: "default",
           size: size3,
           outlineOffset: -0.5,
-          focusStyle: {
+          focusVisibleStyle: {
             outlineColor: "$outlineColor",
             outlineWidth: 1,
             outlineStyle: "solid"
@@ -33491,7 +33534,7 @@ var require_SelectTrigger_native = __commonJS({
         hoverTheme: !0,
         pressTheme: !0,
         focusable: !0,
-        focusStyle: {
+        focusVisibleStyle: {
           outlineStyle: "solid",
           outlineWidth: 2,
           outlineColor: "$outlineColor"
@@ -35821,7 +35864,7 @@ var require_Switch_native = __commonJS({
             backgroundColor: "$background",
             borderWidth: 2,
             borderColor: "$background",
-            focusStyle: {
+            focusVisibleStyle: {
               outlineColor: "$outlineColor",
               outlineStyle: "solid",
               outlineWidth: 2
@@ -37331,7 +37374,9 @@ var require_Toggle_native = __commonJS({
               backgroundColor: "$backgroundPress"
             },
             focusStyle: {
-              borderColor: "$borderColorFocus",
+              borderColor: "$borderColorFocus"
+            },
+            focusVisibleStyle: {
               outlineColor: "$outlineColor",
               outlineWidth: 2,
               outlineStyle: "solid"
@@ -38656,10 +38701,12 @@ var defaultStyles = _object_spread_props6(_object_spread6({
     borderColor: "$borderColorHover"
   },
   focusStyle: {
+    borderColor: "$borderColorFocus"
+  },
+  focusVisibleStyle: {
     outlineColor: "$outlineColor",
     outlineWidth: 2,
-    outlineStyle: "solid",
-    borderColor: "$borderColorFocus"
+    outlineStyle: "solid"
   }
 }), InputFrame = (0, import_core7.styled)(import_react_native2.TextInput, {
   name: "Input",
@@ -38679,7 +38726,7 @@ var defaultStyles = _object_spread_props6(_object_spread6({
   }
 }, {
   isInput: !0,
-  acceptTokens: {
+  accept: {
     placeholderTextColor: "color",
     selectionColor: "color"
   }