@tamagui/web - npm Package Compare versions

Comparing version 1.90.16 to 1.91.0

dist/cjs/config.js

@@ -64,3 +64,6 @@ var __defProp = Object.defineProperty;
   return useVariable ? token?.variable : token?.val;
-}, getTokenValue = (value, group) => getToken(value, group, !1), useTokens = getTokens, getThemes = () => conf.themes, configListeners = /* @__PURE__ */ new Set(), onConfiguredOnce = (cb) => {
+}, getTokenValue = (value, group) => {
+  if (!(value === "unset" || value === "auto"))
+    return getToken(value, group, !1);
+}, useTokens = getTokens, getThemes = () => conf.themes, configListeners = /* @__PURE__ */ new Set(), onConfiguredOnce = (cb) => {
   conf ? cb(conf) : configListeners.add(cb);
@@ -67,0 +70,0 @@ }, updateConfig = (key, value) => {

dist/cjs/config.native.js

@@ -118,3 +118,4 @@ "use strict";
 }, getTokenValue = function(value, group) {
-  return getToken(value, group, !1);
+  if (!(value === "unset" || value === "auto"))
+    return getToken(value, group, !1);
 }, useTokens = getTokens, getThemes = function() {
@@ -121,0 +122,0 @@ return conf.themes;

dist/cjs/createComponent.js

@@ -122,3 +122,5 @@ var __create = Object.create;
     }, [componentName2]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start()), process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
-    const stateRef = (0, import_react.useRef)({});
+    const stateRef = (0, import_react.useRef)({
+      handleFocusVisible: !0
+    });
     process.env.NODE_ENV === "development" && time && time`stateref`;
@@ -130,4 +132,8 @@ const animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig?.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig?.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = !!(!!(hasAnimationProp && !isHOC && useAnimations) || curState.hasAnimated), willBeAnimated = !import_constants.isServer && willBeAnimatedClient;
     !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-    const hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, states = (0, import_react.useState)(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1];
-    let setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, debugProp);
+    const hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? import_defaultComponentState.defaultComponentStateShouldEnter : import_defaultComponentState.defaultComponentState : import_defaultComponentState.defaultComponentStateMounted, disabled = props.disabled || props.accessibilityState?.disabled || props["aria-disabled"] || // @ts-expect-error (comes from core)
+    props.accessibilityDisabled || !1;
+    disabled != null && (initialState.disabled = disabled);
+    const states = (0, import_react.useState)(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1];
+    disabled !== state.disabled && setState({ ...state, disabled });
+    let setStateShallow = (0, import_createShallowSetState.createShallowSetState)(setState, disabled, debugProp);
     if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
@@ -173,3 +179,3 @@ process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
     process.env.NODE_ENV === "development" && time && time`use-state`;
-    const hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? props.accessibilityState?.disabled;
+    const hasTextAncestor = !!(import_constants.isWeb && isText && componentContext.inText);
     process.env.NODE_ENV === "development" && time && time`use-context`;
@@ -296,6 +302,3 @@ const isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = import_constants.isWeb && isTaggable && tagProp || Component;
 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`destructure`;
-    const disabled = props.accessibilityState?.disabled || // @ts-expect-error (comes from core)
-    props.accessibilityDisabled;
-    groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
+    ), process.env.NODE_ENV === "development" && time && time`destructure`, groupName && (nonTamaguiProps.onLayout = (0, import_helpers.composeEventHandlers)(
       nonTamaguiProps.onLayout,
@@ -325,2 +328,4 @@ (e) => {
     (0, import_react.useEffect)(() => {
+      if (disabled)
+        return;
       if (shouldEnter) {
@@ -360,2 +365,3 @@ setStateShallow({ unmounted: !1 });
     }, [
+      disabled,
       shouldEnter,
@@ -365,7 +371,7 @@ pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
     ]);
-    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimeHoverStyle);
+    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = import_constants.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`events-setup`;
-    const events = shouldAttach && !isDisabled && !props.asChild ? {
+    const events = shouldAttach ? {
       onPressOut: attachPress ? (e) => {
-        unPress(), onPressOut?.(e), onMouseUp?.(e);
+        stateRef.current.handleFocusVisible = !0, unPress(), onPressOut?.(e), onMouseUp?.(e);
       } : void 0,
@@ -383,3 +389,3 @@ ...(attachHover || attachPress) && {
       onPressIn: attachPress ? (e) => {
-        runtimePressStyle && setStateShallow({
+        stateRef.current.handleFocusVisible = !1, runtimePressStyle && setStateShallow({
           press: !0,
@@ -394,9 +400,16 @@ pressIn: !0
         onFocus: (e) => {
-          setStateShallow({
-            focus: !0
+          pseudos?.focusVisibleStyle ? setTimeout(() => {
+            setStateShallow({
+              focus: !0,
+              focusVisible: !!stateRef.current.handleFocusVisible
+            });
+          }, 0) : setStateShallow({
+            focus: !0,
+            focusVisible: !1
           }), onFocus?.(e);
         },
         onBlur: (e) => {
-          setStateShallow({
-            focus: !1
+          stateRef.current.handleFocusVisible = !0, setStateShallow({
+            focus: !1,
+            focusVisible: !1
           }), onBlur?.(e);
@@ -403,0 +416,0 @@ }

dist/cjs/createComponent.native.js

@@ -380,3 +380,3 @@ "use strict";
   var component = /* @__PURE__ */ (0, import_react.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_react.useId)() : "";
+    var _animationsConfig_usePresence, _props_accessibilityState, _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? (0, import_react.useId)() : "";
     if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
@@ -431,3 +431,5 @@ var _hooks_getBaseViews;
     process.env.NODE_ENV === "development" && time && time(_templateObject()), process.env.NODE_ENV === "development" && time && time(_templateObject1());
-    var stateRef = (0, import_react.useRef)({});
+    var stateRef = (0, import_react.useRef)({
+      handleFocusVisible: !0
+    });
     process.env.NODE_ENV === "development" && time && time(_templateObject2());
@@ -441,3 +443,10 @@ 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() {
     !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_react.useState)(initialState), state = props.forceStyle ? _object_spread_props(_object_spread({}, states[0]), _define_property({}, 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_react.useState)(initialState), state = props.forceStyle ? _object_spread_props(_object_spread({}, states[0]), _define_property({}, props.forceStyle, !0)) : states[0], setState = states[1];
+    disabled !== state.disabled && setState(_object_spread_props(_object_spread({}, 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) {
@@ -482,3 +491,3 @@ process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn("has presenceState ".concat(JSON.stringify(presenceState)));
     process.env.NODE_ENV === "development" && time && time(_templateObject4());
-    var hasTextAncestor = !!(import_constants.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_constants.isWeb && isText && componentContext.inText);
     process.env.NODE_ENV === "development" && time && time(_templateObject5());
@@ -602,6 +611,3 @@ var 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;
 
-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, {
@@ -627,33 +633,36 @@ layout: e.nativeEvent.layout
     (0, import_react.useEffect)(function() {
-      if (shouldEnter) {
-        setStateShallow({
-          unmounted: !1
-        });
-        return;
-      }
-      var disposeGroupsListener;
-      if (pseudoGroups || mediaGroups) {
-        var current = {
-          pseudo: {},
-          media: {}
+      if (!disabled) {
+        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_props(_object_spread({}, state.group), _define_property({}, name2, current));
+              setStateShallow({
+                group
+              });
+            };
+            if (pseudo && (pseudoGroups != null && pseudoGroups.has(name2)))
+              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());
+            }
+          });
+        }
+        return function() {
+          disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
         };
-        disposeGroupsListener = componentContext.groups.subscribe(function(name2, param) {
-          var layout = param.layout, pseudo = param.pseudo, persist = function() {
-            var group = _object_spread_props(_object_spread({}, state.group), _define_property({}, name2, current));
-            setStateShallow({
-              group
-            });
-          };
-          if (pseudo && (pseudoGroups != null && pseudoGroups.has(name2)))
-            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());
-          }
-        });
       }
-      return function() {
-        disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
-      };
     }, [
+      disabled,
       shouldEnter,
@@ -663,7 +672,7 @@ pseudoGroups ? Object.keys(_to_consumable_array(pseudoGroups)).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_constants.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_constants.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_spread(_object_spread_props(_object_spread({
+    var events = shouldAttach ? _object_spread(_object_spread_props(_object_spread({
       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
@@ -681,3 +690,3 @@ }, (attachHover || attachPress) && {
       onPressIn: attachPress ? function(e) {
-        runtimePressStyle && setStateShallow({
+        stateRef.current.handleFocusVisible = !1, runtimePressStyle && setStateShallow({
           press: !0,
@@ -696,9 +705,16 @@ pressIn: !0
       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);
@@ -711,3 +727,3 @@ }
         cancelable: !viewProps.rejectResponderTermination,
-        disabled: isDisabled,
+        disabled,
         hitSlop: viewProps.hitSlop,
@@ -714,0 +730,0 @@ delayLongPress: viewProps.delayLongPress,

dist/cjs/defaultComponentState.js

@@ -27,3 +27,5 @@ var __defProp = Object.defineProperty;
   focus: !1,
-  unmounted: !0
+  focusVisible: !1,
+  unmounted: !0,
+  disabled: !1
 }, defaultComponentStateMounted = {
@@ -30,0 +32,0 @@ ...defaultComponentState,

dist/cjs/defaultComponentState.native.js

@@ -62,3 +62,5 @@ "use strict";
   focus: !1,
-  unmounted: !0
+  focusVisible: !1,
+  unmounted: !0,
+  disabled: !1
 }, defaultComponentStateMounted = _object_spread_props(_object_spread({}, defaultComponentState), {
@@ -65,0 +67,0 @@ unmounted: !1

dist/cjs/helpers/createShallowSetState.js

@@ -22,7 +22,11 @@ var __defProp = Object.defineProperty;
 module.exports = __toCommonJS(createShallowSetState_exports);
-function createShallowSetState(setter, debug) {
-  return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
+function createShallowSetState(setter, isDisabled, debug) {
+  return (next) => setter((prev) => 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", { prev, next }), { ...prev, ...next });
+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 }), debug === "break"))
+    debugger;
+  return { ...prev, ...next };
 }
@@ -29,0 +33,0 @@ function isEqualShallow(prev, next) {

dist/cjs/helpers/createShallowSetState.native.js

@@ -42,14 +42,18 @@ "use strict";
 }
-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_spread({}, prev, next));
+  }), debug === "break"))
+    debugger;
+  return _object_spread({}, prev, next);
 }
@@ -56,0 +60,0 @@ function isEqualShallow(prev, next) {

dist/cjs/helpers/getSplitStyles.js

@@ -28,3 +28,3 @@ var __defProp = Object.defineProperty;
 function isValidStyleKey(key, staticConfig) {
-  return (staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles))[key] || staticConfig.acceptTokens?.[key];
+  return (staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? import_helpers.stylePropsText : import_helpers.validStyles))[key] || staticConfig.accept?.[key];
 }
@@ -71,2 +71,12 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
     let keyInit = keyOg, valInit = props[keyOg];
+    if (staticConfig.accept && (staticConfig.accept[keyInit] === "style" || staticConfig.accept[keyInit] === "textStyle") && typeof valInit == "object") {
+      const 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 || props.asChild && import_constants2.webViewFlexCompatStyles[keyInit] === valInit)
@@ -464,8 +474,13 @@ continue;
   }
-  if (props.style)
+  const styleProp = props.style;
+  if (styleProp)
     if (isHOC)
-      viewProps.style = normalizeStyle(props.style);
-    else
-      for (const style of [].concat(props.style))
+      viewProps.style = normalizeStyle(styleProp);
+    else {
+      const isArray = Array.isArray(styleProp), len = isArray ? props.length : 1;
+      for (let i = 0; i < len; i++) {
+        const style = isArray ? styleProp[i] : styleProp;
         style && (style.$$css ? Object.assign(styleState.classNames, style) : (styleState.style ||= {}, Object.assign(styleState.style, normalizeStyle(style))));
+      }
+    }
   const result = {
@@ -543,4 +558,4 @@ space,
     const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
-    // acceptTokens are for props not styles
-    staticConfig.acceptTokens && key in staticConfig.acceptTokens ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] = out);
+    // accept is for props not styles
+    staticConfig.accept && key in staticConfig.accept ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] = out);
   }
@@ -547,0 +562,0 @@ }

dist/cjs/helpers/getSplitStyles.native.js

@@ -112,4 +112,4 @@ "use strict";
 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]);
 }
@@ -144,2 +144,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) {
     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)) {
@@ -517,29 +522,17 @@ if (keyInit in import_skipProps.skipProps && !styleProps.noSkip && !isHOC) {
   }
-  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 = {
@@ -574,5 +567,5 @@ space,
           if (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;
@@ -626,4 +619,4 @@ } catch (err) {
     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
     )
@@ -630,0 +623,0 @@ viewProps[key] = out;

dist/cjs/helpers/getStylesAtomic.js

@@ -22,3 +22,3 @@ var __defProp = Object.defineProperty;
 module.exports = __toCommonJS(getStylesAtomic_exports);
-var import_helpers = require("@tamagui/helpers"), import_config = require("../config"), import_defaultOffset = require("./defaultOffset"), import_normalizeValueWithProperty = require("./normalizeValueWithProperty"), import_pseudoDescriptors = require("./pseudoDescriptors"), import_normalizeColor = require("./normalizeColor"), import_transformsToString = require("./transformsToString");
+var import_helpers = require("@tamagui/helpers"), import_config = require("../config"), import_defaultOffset = require("./defaultOffset"), import_normalizeColor = require("./normalizeColor"), import_normalizeValueWithProperty = require("./normalizeValueWithProperty"), import_pseudoDescriptors = require("./pseudoDescriptors"), import_transformsToString = require("./transformsToString");
 function getStylesAtomic(style) {
@@ -100,3 +100,3 @@ styleToCSS(style);
 function createAtomicRules(identifier, property, value, pseudo) {
-  const selector = pseudo ? pseudo?.selector ? `${pseudo?.selector} .${identifier}` : `${selectorPriority[pseudo.name]} .${identifier}:${pseudo.name}` : `:root .${identifier}`, important = !!pseudo;
+  const pseudoSelector = pseudo ? pseudo.name === "disabled" ? "[aria-disabled]" : `:${pseudo.name}` : "", selector = pseudo ? pseudo?.selector ? `${pseudo?.selector} .${identifier}` : `${selectorPriority[pseudo.name]} .${identifier}${pseudoSelector}` : `:root .${identifier}`, important = !!pseudo;
   let rules = [];
@@ -103,0 +103,0 @@ switch (property) {

dist/cjs/helpers/propMapper.js

@@ -187,3 +187,3 @@ var __defProp = Object.defineProperty;
   let valOrVar, hasSet = !1;
-  const customTokenAccept = staticConfig?.acceptTokens?.[key];
+  const customTokenAccept = staticConfig?.accept?.[key];
   if (customTokenAccept) {
@@ -190,0 +190,0 @@ const val = theme?.[value] ?? tokensParsed[customTokenAccept][value];

dist/cjs/helpers/propMapper.native.js

@@ -290,6 +290,6 @@ "use strict";
 }, 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) {
@@ -296,0 +296,0 @@ var _theme_value, val = (_theme_value = theme == null ? void 0 : theme[value]) !== null && _theme_value !== void 0 ? _theme_value : tokensParsed[customTokenAccept][value];

dist/cjs/helpers/pseudoDescriptors.js

@@ -33,5 +33,15 @@ var __defProp = Object.defineProperty;
   },
+  focusVisibleStyle: {
+    name: "focus-visible",
+    priority: 3,
+    stateKey: "focusVisible"
+  },
   focusStyle: {
     name: "focus",
     priority: 3
+  },
+  disabledStyle: {
+    name: "disabled",
+    priority: 4,
+    stateKey: "disabled"
   }
@@ -41,3 +51,5 @@ }, pseudoPriorities = {
   press: 2,
-  focus: 3
+  focus: 3,
+  focusVisible: 3,
+  disabled: 4
 }, pseudoDescriptors = {
@@ -44,0 +56,0 @@ ...pseudoDescriptorsBase,

dist/cjs/helpers/pseudoDescriptors.native.js

@@ -68,5 +68,15 @@ "use strict";
   },
+  focusVisibleStyle: {
+    name: "focus-visible",
+    priority: 3,
+    stateKey: "focusVisible"
+  },
   focusStyle: {
     name: "focus",
     priority: 3
+  },
+  disabledStyle: {
+    name: "disabled",
+    priority: 4,
+    stateKey: "disabled"
   }
@@ -76,3 +86,5 @@ }, pseudoPriorities = {
   press: 2,
-  focus: 3
+  focus: 3,
+  focusVisible: 3,
+  disabled: 4
 }, pseudoDescriptors = _object_spread_props(_object_spread({}, pseudoDescriptorsBase), {
@@ -79,0 +91,0 @@ enterStyle: {

dist/esm/config.js

@@ -30,3 +30,6 @@ import { isWeb } from "@tamagui/constants";
   return useVariable ? token?.variable : token?.val;
-}, getTokenValue = (value, group) => getToken(value, group, !1), useTokens = getTokens, getThemes = () => conf.themes, configListeners = /* @__PURE__ */ new Set(), onConfiguredOnce = (cb) => {
+}, getTokenValue = (value, group) => {
+  if (!(value === "unset" || value === "auto"))
+    return getToken(value, group, !1);
+}, useTokens = getTokens, getThemes = () => conf.themes, configListeners = /* @__PURE__ */ new Set(), onConfiguredOnce = (cb) => {
   conf ? cb(conf) : configListeners.add(cb);
@@ -33,0 +36,0 @@ }, updateConfig = (key, value) => {

dist/esm/config.native.js

@@ -83,3 +83,4 @@ import { isWeb } from "@tamagui/constants";
 }, getTokenValue = function(value, group) {
-  return getToken(value, group, !1);
+  if (!(value === "unset" || value === "auto"))
+    return getToken(value, group, !1);
 }, useTokens = getTokens, getThemes = function() {
@@ -86,0 +87,0 @@ return conf.themes;

dist/esm/createComponent.js

@@ -133,3 +133,5 @@ import { composeRefs } from "@tamagui/compose-refs";
     }, [componentName2]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start()), process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
-    const stateRef = useRef({});
+    const stateRef = useRef({
+      handleFocusVisible: !0
+    });
     process.env.NODE_ENV === "development" && time && time`stateref`;
@@ -141,4 +143,8 @@ const animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig?.useAnimations, hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig?.supportsCSSVars, curState = stateRef.current, willBeAnimatedClient = !!(!!(hasAnimationProp && !isHOC && useAnimations) || curState.hasAnimated), willBeAnimated = !isServer && willBeAnimatedClient;
     !isReactNative && hasRNAnimation && !isHOC && !isHydrated && (isAnimated = !1, curState.willHydrate = !0), process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-    const hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted, states = useState(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1];
-    let setStateShallow = createShallowSetState(setState, debugProp);
+    const hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted, disabled = props.disabled || props.accessibilityState?.disabled || props["aria-disabled"] || // @ts-expect-error (comes from core)
+    props.accessibilityDisabled || !1;
+    disabled != null && (initialState.disabled = disabled);
+    const states = useState(initialState), state = props.forceStyle ? { ...states[0], [props.forceStyle]: !0 } : states[0], setState = states[1];
+    disabled !== state.disabled && setState({ ...state, disabled });
+    let setStateShallow = createShallowSetState(setState, disabled, debugProp);
     if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
@@ -184,3 +190,3 @@ process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
     process.env.NODE_ENV === "development" && time && time`use-state`;
-    const hasTextAncestor = !!(isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? props.accessibilityState?.disabled;
+    const hasTextAncestor = !!(isWeb && isText && componentContext.inText);
     process.env.NODE_ENV === "development" && time && time`use-context`;
@@ -307,6 +313,3 @@ const isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = isWeb && isTaggable && tagProp || Component;
 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`destructure`;
-    const disabled = props.accessibilityState?.disabled || // @ts-expect-error (comes from core)
-    props.accessibilityDisabled;
-    groupName && (nonTamaguiProps.onLayout = composeEventHandlers(
+    ), process.env.NODE_ENV === "development" && time && time`destructure`, groupName && (nonTamaguiProps.onLayout = composeEventHandlers(
       nonTamaguiProps.onLayout,
@@ -336,2 +339,4 @@ (e) => {
     useEffect(() => {
+      if (disabled)
+        return;
       if (shouldEnter) {
@@ -371,2 +376,3 @@ setStateShallow({ unmounted: !1 });
     }, [
+      disabled,
       shouldEnter,
@@ -376,7 +382,7 @@ pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
     ]);
-    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle), needsPressState = !!(groupName || runtimeHoverStyle);
+    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle, attachFocus = !!(runtimePressStyle || runtimeFocusStyle || onFocus || onBlur), attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut), attachHover = 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`events-setup`;
-    const events = shouldAttach && !isDisabled && !props.asChild ? {
+    const events = shouldAttach ? {
       onPressOut: attachPress ? (e) => {
-        unPress(), onPressOut?.(e), onMouseUp?.(e);
+        stateRef.current.handleFocusVisible = !0, unPress(), onPressOut?.(e), onMouseUp?.(e);
       } : void 0,
@@ -394,3 +400,3 @@ ...(attachHover || attachPress) && {
       onPressIn: attachPress ? (e) => {
-        runtimePressStyle && setStateShallow({
+        stateRef.current.handleFocusVisible = !1, runtimePressStyle && setStateShallow({
           press: !0,
@@ -405,9 +411,16 @@ pressIn: !0
         onFocus: (e) => {
-          setStateShallow({
-            focus: !0
+          pseudos?.focusVisibleStyle ? setTimeout(() => {
+            setStateShallow({
+              focus: !0,
+              focusVisible: !!stateRef.current.handleFocusVisible
+            });
+          }, 0) : setStateShallow({
+            focus: !0,
+            focusVisible: !1
           }), onFocus?.(e);
         },
         onBlur: (e) => {
-          setStateShallow({
-            focus: !1
+          stateRef.current.handleFocusVisible = !0, setStateShallow({
+            focus: !1,
+            focusVisible: !1
           }), onBlur?.(e);
@@ -414,0 +427,0 @@ }

dist/esm/createComponent.native.js

@@ -371,3 +371,3 @@ import { jsx as _jsx } from "react/jsx-runtime";
   var component = /* @__PURE__ */ 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" ? useId() : "";
+    var _animationsConfig_usePresence, _props_accessibilityState, _themeState_state, _hooks_usePropsTransform, _hooks_useEvents, _config_animations, internalID = process.env.NODE_ENV === "development" ? useId() : "";
     if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
@@ -422,3 +422,5 @@ var _hooks_getBaseViews;
     process.env.NODE_ENV === "development" && time && time(_templateObject()), process.env.NODE_ENV === "development" && time && time(_templateObject1());
-    var stateRef = useRef({});
+    var stateRef = useRef({
+      handleFocusVisible: !0
+    });
     process.env.NODE_ENV === "development" && time && time(_templateObject2());
@@ -432,3 +434,10 @@ 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() {
     !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 ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted, states = useState(initialState), state = props.forceStyle ? _object_spread_props(_object_spread({}, states[0]), _define_property({}, props.forceStyle, !0)) : states[0], setState = states[1], setStateShallow = createShallowSetState(setState, debugProp);
+    var hasEnterState = hasEnterStyle || isEntering, needsToMount = !isHydrated || !curState.host, initialState = hasEnterState ? needsToMount ? defaultComponentStateShouldEnter : 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 = useState(initialState), state = props.forceStyle ? _object_spread_props(_object_spread({}, states[0]), _define_property({}, props.forceStyle, !0)) : states[0], setState = states[1];
+    disabled !== state.disabled && setState(_object_spread_props(_object_spread({}, state), {
+      disabled
+    }));
+    var setStateShallow = createShallowSetState(setState, disabled, debugProp);
     if (isHydrated && state.unmounted === "should-enter" && (state.unmounted = !0), presenceState && isAnimated && isHydrated && staticConfig.variants) {
@@ -473,3 +482,3 @@ process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn("has presenceState ".concat(JSON.stringify(presenceState)));
     process.env.NODE_ENV === "development" && time && time(_templateObject4());
-    var hasTextAncestor = !!(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 = !!(isWeb && isText && componentContext.inText);
     process.env.NODE_ENV === "development" && time && time(_templateObject5());
@@ -593,6 +602,3 @@ var isTaggable = !Component || typeof Component == "string", tagProp = props.tag, element = isWeb && isTaggable && tagProp || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"), elementType = isText ? BaseTextComponent : BaseViewComponent;
 
-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 = 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 = composeEventHandlers(nonTamaguiProps.onLayout, function(e) {
       stateRef.current.group.emit(groupName, {
@@ -618,33 +624,36 @@ layout: e.nativeEvent.layout
     useEffect(function() {
-      if (shouldEnter) {
-        setStateShallow({
-          unmounted: !1
-        });
-        return;
-      }
-      var disposeGroupsListener;
-      if (pseudoGroups || mediaGroups) {
-        var current = {
-          pseudo: {},
-          media: {}
+      if (!disabled) {
+        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_props(_object_spread({}, state.group), _define_property({}, name2, current));
+              setStateShallow({
+                group
+              });
+            };
+            if (pseudo && (pseudoGroups != null && pseudoGroups.has(name2)))
+              Object.assign(current.pseudo, pseudo), persist();
+            else if (layout && mediaGroups) {
+              var mediaState2 = getMediaState(mediaGroups, layout), next = mergeIfNotShallowEqual(current.media, mediaState2);
+              next !== current.media && (Object.assign(current.media, next), persist());
+            }
+          });
+        }
+        return function() {
+          disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
         };
-        disposeGroupsListener = componentContext.groups.subscribe(function(name2, param) {
-          var layout = param.layout, pseudo = param.pseudo, persist = function() {
-            var group = _object_spread_props(_object_spread({}, state.group), _define_property({}, name2, current));
-            setStateShallow({
-              group
-            });
-          };
-          if (pseudo && (pseudoGroups != null && pseudoGroups.has(name2)))
-            Object.assign(current.pseudo, pseudo), persist();
-          else if (layout && mediaGroups) {
-            var mediaState2 = getMediaState(mediaGroups, layout), next = mergeIfNotShallowEqual(current.media, mediaState2);
-            next !== current.media && (Object.assign(current.media, next), persist());
-          }
-        });
       }
-      return function() {
-        disposeGroupsListener == null || disposeGroupsListener(), mouseUps.delete(unPress);
-      };
     }, [
+      disabled,
       shouldEnter,
@@ -654,7 +663,7 @@ pseudoGroups ? Object.keys(_to_consumable_array(pseudoGroups)).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 = 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 = 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_spread(_object_spread_props(_object_spread({
+    var events = shouldAttach ? _object_spread(_object_spread_props(_object_spread({
       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
@@ -672,3 +681,3 @@ }, (attachHover || attachPress) && {
       onPressIn: attachPress ? function(e) {
-        runtimePressStyle && setStateShallow({
+        stateRef.current.handleFocusVisible = !1, runtimePressStyle && setStateShallow({
           press: !0,
@@ -687,9 +696,16 @@ pressIn: !0
       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);
@@ -702,3 +718,3 @@ }
         cancelable: !viewProps.rejectResponderTermination,
-        disabled: isDisabled,
+        disabled,
         hitSlop: viewProps.hitSlop,
@@ -705,0 +721,0 @@ delayLongPress: viewProps.delayLongPress,

dist/esm/defaultComponentState.js

@@ -6,3 +6,5 @@ const defaultComponentState = {
   focus: !1,
-  unmounted: !0
+  focusVisible: !1,
+  unmounted: !0,
+  disabled: !1
 }, defaultComponentStateMounted = {
@@ -9,0 +11,0 @@ ...defaultComponentState,

dist/esm/defaultComponentState.native.js

@@ -40,3 +40,5 @@ function _define_property(obj, key, value) {
   focus: !1,
-  unmounted: !0
+  focusVisible: !1,
+  unmounted: !0,
+  disabled: !1
 }, defaultComponentStateMounted = _object_spread_props(_object_spread({}, defaultComponentState), {
@@ -43,0 +45,0 @@ unmounted: !1

dist/esm/helpers/createShallowSetState.js

@@ -1,6 +0,10 @@
-function createShallowSetState(setter, debug) {
-  return (next) => setter((prev) => mergeIfNotShallowEqual(prev, next, debug));
+function createShallowSetState(setter, isDisabled, debug) {
+  return (next) => setter((prev) => 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", { prev, next }), { ...prev, ...next });
+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 }), debug === "break"))
+    debugger;
+  return { ...prev, ...next };
 }
@@ -7,0 +11,0 @@ function isEqualShallow(prev, next) {

dist/esm/helpers/createShallowSetState.native.js

@@ -20,14 +20,18 @@ function _define_property(obj, key, value) {
 }
-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_spread({}, prev, next));
+  }), debug === "break"))
+    debugger;
+  return _object_spread({}, prev, next);
 }
@@ -34,0 +38,0 @@ function isEqualShallow(prev, next) {

dist/esm/helpers/getSplitStyles.js

@@ -53,3 +53,3 @@ import {
 function isValidStyleKey(key, staticConfig) {
-  return (staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles))[key] || staticConfig.acceptTokens?.[key];
+  return (staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : validStyles))[key] || staticConfig.accept?.[key];
 }
@@ -96,2 +96,12 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) => {
     let keyInit = keyOg, valInit = props[keyOg];
+    if (staticConfig.accept && (staticConfig.accept[keyInit] === "style" || staticConfig.accept[keyInit] === "textStyle") && typeof valInit == "object") {
+      const 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 || props.asChild && webViewFlexCompatStyles[keyInit] === valInit)
@@ -489,8 +499,13 @@ continue;
   }
-  if (props.style)
+  const styleProp = props.style;
+  if (styleProp)
     if (isHOC)
-      viewProps.style = normalizeStyle(props.style);
-    else
-      for (const style of [].concat(props.style))
+      viewProps.style = normalizeStyle(styleProp);
+    else {
+      const isArray = Array.isArray(styleProp), len = isArray ? props.length : 1;
+      for (let i = 0; i < len; i++) {
+        const style = isArray ? styleProp[i] : styleProp;
         style && (style.$$css ? Object.assign(styleState.classNames, style) : (styleState.style ||= {}, Object.assign(styleState.style, normalizeStyle(style))));
+      }
+    }
   const result = {
@@ -568,4 +583,4 @@ space,
     const out = isWeb && !disableNormalize && !styleProps.noNormalize ? normalizeValueWithProperty(val, key) : val;
-    // acceptTokens are for props not styles
-    staticConfig.acceptTokens && key in staticConfig.acceptTokens ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] = out);
+    // accept is for props not styles
+    staticConfig.accept && key in staticConfig.accept ? viewProps[key] = out : (styleState.style ||= {}, styleState.style[key] = out);
   }
@@ -572,0 +587,0 @@ }

dist/esm/helpers/getSplitStyles.native.js

@@ -107,4 +107,4 @@ import { currentPlatform, isAndroid, isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 function isValidStyleKey(key, staticConfig) {
-  var _staticConfig_acceptTokens, validStyleProps = staticConfig.validStyles || (staticConfig.isText || staticConfig.isInput ? stylePropsText : 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 ? stylePropsText : validStyles);
+  return validStyleProps[key] || ((_staticConfig_accept = staticConfig.accept) === null || _staticConfig_accept === void 0 ? void 0 : _staticConfig_accept[key]);
 }
@@ -139,2 +139,7 @@ var getSplitStyles = function(props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, context, elementType, debug) {
     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)) {
@@ -512,29 +517,17 @@ if (keyInit in skipProps && !styleProps.noSkip && !isHOC) {
   }
-  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 = {
@@ -569,5 +562,5 @@ space,
           if (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;
@@ -621,4 +614,4 @@ } catch (err) {
     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
     )
@@ -625,0 +618,0 @@ viewProps[key] = out;

dist/esm/helpers/getStylesAtomic.js

 import { simpleHash } from "@tamagui/helpers";
 import { getConfig } from "../config";
 import { defaultOffset } from "./defaultOffset";
+import { normalizeColor } from "./normalizeColor";
 import { normalizeValueWithProperty } from "./normalizeValueWithProperty";
 import { pseudoDescriptors } from "./pseudoDescriptors";
-import { normalizeColor } from "./normalizeColor";
 import { transformsToString } from "./transformsToString";
@@ -84,3 +84,3 @@ function getStylesAtomic(style) {
 function createAtomicRules(identifier, property, value, pseudo) {
-  const selector = pseudo ? pseudo?.selector ? `${pseudo?.selector} .${identifier}` : `${selectorPriority[pseudo.name]} .${identifier}:${pseudo.name}` : `:root .${identifier}`, important = !!pseudo;
+  const pseudoSelector = pseudo ? pseudo.name === "disabled" ? "[aria-disabled]" : `:${pseudo.name}` : "", selector = pseudo ? pseudo?.selector ? `${pseudo?.selector} .${identifier}` : `${selectorPriority[pseudo.name]} .${identifier}${pseudoSelector}` : `:root .${identifier}`, important = !!pseudo;
   let rules = [];
@@ -87,0 +87,0 @@ switch (property) {

dist/esm/helpers/propMapper.js

@@ -174,3 +174,3 @@ import "@tamagui/constants";
   let valOrVar, hasSet = !1;
-  const customTokenAccept = staticConfig?.acceptTokens?.[key];
+  const customTokenAccept = staticConfig?.accept?.[key];
   if (customTokenAccept) {
@@ -177,0 +177,0 @@ const val = theme?.[value] ?? tokensParsed[customTokenAccept][value];

dist/esm/helpers/propMapper.native.js

@@ -276,6 +276,6 @@ import { isAndroid } from "@tamagui/constants";
 }, 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 ? 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 ? 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) {
@@ -282,0 +282,0 @@ var _theme_value, val = (_theme_value = theme == null ? void 0 : theme[value]) !== null && _theme_value !== void 0 ? _theme_value : tokensParsed[customTokenAccept][value];

dist/esm/helpers/pseudoDescriptors.js

@@ -12,5 +12,15 @@ const pseudoDescriptorsBase = {
   },
+  focusVisibleStyle: {
+    name: "focus-visible",
+    priority: 3,
+    stateKey: "focusVisible"
+  },
   focusStyle: {
     name: "focus",
     priority: 3
+  },
+  disabledStyle: {
+    name: "disabled",
+    priority: 4,
+    stateKey: "disabled"
   }
@@ -20,3 +30,5 @@ }, pseudoPriorities = {
   press: 2,
-  focus: 3
+  focus: 3,
+  focusVisible: 3,
+  disabled: 4
 }, pseudoDescriptors = {
@@ -23,0 +35,0 @@ ...pseudoDescriptorsBase,

dist/esm/helpers/pseudoDescriptors.native.js

@@ -46,5 +46,15 @@ function _define_property(obj, key, value) {
   },
+  focusVisibleStyle: {
+    name: "focus-visible",
+    priority: 3,
+    stateKey: "focusVisible"
+  },
   focusStyle: {
     name: "focus",
     priority: 3
+  },
+  disabledStyle: {
+    name: "disabled",
+    priority: 4,
+    stateKey: "disabled"
   }
@@ -54,3 +64,5 @@ }, pseudoPriorities = {
   press: 2,
-  focus: 3
+  focus: 3,
+  focusVisible: 3,
+  disabled: 4
 }, pseudoDescriptors = _object_spread_props(_object_spread({}, pseudoDescriptorsBase), {
@@ -57,0 +69,0 @@ enterStyle: {

package.json

 {
   "name": "@tamagui/web",
-  "version": "1.90.16",
+  "version": "1.91.0",
   "source": "src/index.ts",
@@ -30,11 +30,11 @@ "main": "dist/cjs",
   "dependencies": {
-    "@tamagui/compose-refs": "1.90.16",
-    "@tamagui/constants": "1.90.16",
-    "@tamagui/helpers": "1.90.16",
-    "@tamagui/normalize-css-color": "1.90.16",
-    "@tamagui/timer": "1.90.16",
-    "@tamagui/types": "1.90.16",
-    "@tamagui/use-did-finish-ssr": "1.90.16",
-    "@tamagui/use-event": "1.90.16",
-    "@tamagui/use-force-update": "1.90.16",
+    "@tamagui/compose-refs": "1.91.0",
+    "@tamagui/constants": "1.91.0",
+    "@tamagui/helpers": "1.91.0",
+    "@tamagui/normalize-css-color": "1.91.0",
+    "@tamagui/timer": "1.91.0",
+    "@tamagui/types": "1.91.0",
+    "@tamagui/use-did-finish-ssr": "1.91.0",
+    "@tamagui/use-event": "1.91.0",
+    "@tamagui/use-force-update": "1.91.0",
     "react": "^18.2.0",
@@ -44,3 +44,3 @@ "react-dom": "^18.2.0"
   "devDependencies": {
-    "@tamagui/build": "1.90.16",
+    "@tamagui/build": "1.91.0",
     "@testing-library/react": "^14.0.0",
@@ -47,0 +47,0 @@ "csstype": "^3.0.10",

src/config.ts

@@ -74,3 +74,4 @@ import { isWeb } from '@tamagui/constants'
 
-export const getTokenValue = (value: Token, group?: keyof Tokens) => {
+export const getTokenValue = (value: Token | 'unset' | 'auto', group?: keyof Tokens) => {
+  if (value === 'unset' || value === 'auto') return
   return getToken(value, group, false)
@@ -77,0 +78,0 @@ }

src/helpers/getStylesAtomic.ts

@@ -10,8 +10,8 @@ /**
 import { getConfig } from '../config'
-import type { DebugProp, TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
+import type { TamaguiInternalConfig, ViewStyleWithPseudos } from '../types'
 import { defaultOffset } from './defaultOffset'
+import { normalizeColor } from './normalizeColor'
 import { normalizeValueWithProperty } from './normalizeValueWithProperty'
 import type { PseudoDescriptor } from './pseudoDescriptors'
-import { pseudoDescriptors, pseudoDescriptorsBase } from './pseudoDescriptors'
-import { normalizeColor } from './normalizeColor'
+import { pseudoDescriptors } from './pseudoDescriptors'
 import { transformsToString } from './transformsToString'
@@ -152,6 +152,11 @@
 ): string[] {
+  const pseudoSelector = pseudo
+    ? pseudo.name === 'disabled'
+      ? `[aria-disabled]`
+      : `:${pseudo.name}`
+    : ''
   const selector = pseudo
     ? pseudo?.selector
       ? `${pseudo?.selector} .${identifier}`
-      : `${selectorPriority[pseudo.name]} .${identifier}:${pseudo.name}`
+      : `${selectorPriority[pseudo.name]} .${identifier}${pseudoSelector}`
     : `:root .${identifier}`
@@ -158,0 +163,0 @@ const important = !!pseudo

src/helpers/propMapper.ts

@@ -390,3 +390,3 @@ import { isAndroid } from '@tamagui/constants'
 
-  const customTokenAccept = staticConfig?.acceptTokens?.[key]
+  const customTokenAccept = staticConfig?.accept?.[key]
   if (customTokenAccept) {
@@ -393,0 +393,0 @@ const val = theme?.[value] ?? tokensParsed[customTokenAccept][value]

src/helpers/pseudoDescriptors.ts

@@ -14,2 +14,7 @@ // *0 order matches to *1
   },
+  focusVisibleStyle: {
+    name: 'focus-visible',
+    priority: 3,
+    stateKey: 'focusVisible',
+  },
   focusStyle: {
@@ -19,2 +24,7 @@ name: 'focus',
   },
+  disabledStyle: {
+    name: 'disabled',
+    priority: 4,
+    stateKey: 'disabled',
+  },
 } as const
@@ -26,6 +36,13 @@
   focus: 3,
+  focusVisible: 3,
+  disabled: 4,
 }
 
 export const pseudoDescriptors: Record<
-  'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle',
+  | 'hoverStyle'
+  | 'pressStyle'
+  | 'focusStyle'
+  | 'focusVisibleStyle'
+  | 'enterStyle'
+  | 'exitStyle',
   PseudoDescriptor
@@ -32,0 +49,0 @@ > = {

types/config.d.ts

@@ -14,3 +14,3 @@ import type { ConfigListener, TamaguiInternalConfig, Token, Tokens, TokensMerged } from './types';
 export declare const getToken: (value: Token, group?: keyof Tokens, useVariable?: boolean) => any;
-export declare const getTokenValue: (value: Token, group?: keyof Tokens) => any;
+export declare const getTokenValue: (value: Token | 'unset' | 'auto', group?: keyof Tokens) => any;
 /**
@@ -17,0 +17,0 @@ * Note: this is the same as `getTokens`

types/helpers/createShallowSetState.d.ts

 import type React from 'react';
 import type { DebugProp } from '../types';
-export declare function createShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, debug?: DebugProp): (next: Partial<State>) => void;
-export declare function mergeIfNotShallowEqual(prev: any, next: any, debug?: DebugProp): any;
+export declare function createShallowSetState<State extends Object>(setter: React.Dispatch<React.SetStateAction<State>>, isDisabled?: boolean, debug?: DebugProp): (next?: Partial<State>) => void;
+export declare function mergeIfNotShallowEqual(prev: any, next: any, isDisabled?: boolean, debug?: DebugProp): any;
 export declare function isEqualShallow(prev: any, next: any): boolean;
 //# sourceMappingURL=createShallowSetState.d.ts.map

types/helpers/pseudoDescriptors.d.ts

@@ -11,2 +11,7 @@ export declare const pseudoDescriptorsBase: {
     };
+    readonly focusVisibleStyle: {
+        readonly name: "focus-visible";
+        readonly priority: 3;
+        readonly stateKey: "focusVisible";
+    };
     readonly focusStyle: {
@@ -16,2 +21,7 @@ readonly name: "focus";
     };
+    readonly disabledStyle: {
+        readonly name: "disabled";
+        readonly priority: 4;
+        readonly stateKey: "disabled";
+    };
 };
@@ -22,4 +32,6 @@ export declare const pseudoPriorities: {
     focus: number;
+    focusVisible: number;
+    disabled: number;
 };
-export declare const pseudoDescriptors: Record<'hoverStyle' | 'pressStyle' | 'focusStyle' | 'enterStyle' | 'exitStyle', PseudoDescriptor>;
+export declare const pseudoDescriptors: Record<'hoverStyle' | 'pressStyle' | 'focusStyle' | 'focusVisibleStyle' | 'enterStyle' | 'exitStyle', PseudoDescriptor>;
 export type PseudoDescriptor = {
@@ -26,0 +38,0 @@ name: string;

types/interfaces/TamaguiComponentState.d.ts

 import type { GroupState } from '../types';
 export type TamaguiComponentState = {
+    disabled: boolean;
     hover: boolean;
@@ -7,2 +8,3 @@ press: boolean;
     focus: boolean;
+    focusVisible: boolean;
     unmounted: boolean | 'should-enter';
@@ -9,0 +11,0 @@ animation?: null | {

types/styled.d.ts

 import type { StyledContext } from './helpers/createStyledContext';
 import type { GetRef } from './interfaces/GetRef';
-import type { GetBaseStyles, GetNonStyledProps, GetStaticConfig, GetStyledVariants, GetTokenPropsFromAcceptedTokens, GetVariantValues, InferStyledProps, StaticConfigPublic, StylableComponent, TamaDefer, TamaguiComponent, VariantDefinitions, VariantSpreadFunction } from './types';
+import type { GetBaseStyles, GetNonStyledProps, GetStaticConfig, GetStyledVariants, GetVariantValues, InferStyledProps, StaticConfigPublic, StylableComponent, TamaDefer, TamaguiComponent, ThemeValueGet, VariantDefinitions, VariantSpreadFunction } from './types';
 type AreVariantsUndefined<Variants> = Required<Variants> extends {
@@ -16,4 +16,4 @@ _isEmpty: 1;
     acceptsClassName?: boolean;
-}, staticExtractionOptions?: StyledStaticConfig): TamaguiComponent<TamaDefer, GetRef<ParentComponent>, GetNonStyledProps<ParentComponent>, StyledStaticConfig["acceptTokens"] extends Record<string, any> ? GetBaseStyles<ParentComponent, StyledStaticConfig> & GetTokenPropsFromAcceptedTokens<StyledStaticConfig["acceptTokens"]> : GetBaseStyles<ParentComponent, StyledStaticConfig>, AreVariantsUndefined<Variants> extends true ? GetStyledVariants<ParentComponent> : AreVariantsUndefined<GetStyledVariants<ParentComponent>> extends true ? Omit<AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>, "_isEmpty"> : { [Key in Exclude<keyof GetStyledVariants<ParentComponent>, "_isEmpty"> | Exclude<keyof (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>), "_isEmpty">]?: (Key extends keyof GetStyledVariants<ParentComponent> ? GetStyledVariants<ParentComponent>[Key] : undefined) | (Key extends keyof (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>) ? (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>)[Key] : undefined) | undefined; }, GetStaticConfig<ParentComponent, StyledStaticConfig>>;
+}, staticExtractionOptions?: StyledStaticConfig): TamaguiComponent<TamaDefer, GetRef<ParentComponent>, GetNonStyledProps<ParentComponent>, StyledStaticConfig["accept"] extends Record<string, any> ? GetBaseStyles<ParentComponent, StyledStaticConfig> & (StyledStaticConfig["accept"] extends Record<string, any> ? { [Key in keyof StyledStaticConfig["accept"]]?: (Key extends keyof GetBaseStyles<ParentComponent, StyledStaticConfig> ? GetBaseStyles<ParentComponent, StyledStaticConfig>[Key] : never) | (StyledStaticConfig["accept"][Key] extends "style" ? Partial<InferStyledProps<ParentComponent, StyledStaticConfig>> : StyledStaticConfig["accept"][Key] extends "textStyle" ? Partial<import("./types").TextProps> : Omit<ThemeValueGet<StyledStaticConfig["accept"][Key]>, "unset">) | undefined; } : {}) : GetBaseStyles<ParentComponent, StyledStaticConfig>, AreVariantsUndefined<Variants> extends true ? GetStyledVariants<ParentComponent> : AreVariantsUndefined<GetStyledVariants<ParentComponent>> extends true ? Omit<AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>, "_isEmpty"> : { [Key_1 in Exclude<keyof GetStyledVariants<ParentComponent>, "_isEmpty"> | Exclude<keyof (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>), "_isEmpty">]?: (Key_1 extends keyof GetStyledVariants<ParentComponent> ? GetStyledVariants<ParentComponent>[Key_1] : undefined) | (Key_1 extends keyof (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>) ? (AreVariantsUndefined<Variants> extends true ? {} : GetVariantAcceptedValues<Variants>)[Key_1] : undefined) | undefined; }, GetStaticConfig<ParentComponent, StyledStaticConfig>>;
 export {};
 //# sourceMappingURL=styled.d.ts.map

types/types.d.ts

@@ -67,2 +67,3 @@ import type { StyleObject } from '@tamagui/helpers';
     focus?: boolean;
+    focusVisible?: boolean;
 };
@@ -495,3 +496,3 @@ export type GroupState = {
 export type GroupNames = ReturnType<TypeOverride['groupNames']> extends 1 ? never : ReturnType<TypeOverride['groupNames']>;
-type ParentMediaStates = 'hover' | 'press' | 'focus';
+type ParentMediaStates = 'hover' | 'press' | 'focus' | 'focusVisible';
 export type GroupMediaKeys = `$group-${GroupNames}` | `$group-${GroupNames}-${ParentMediaStates}` | `$group-${GroupNames}-${MediaQueryKey}` | `$group-${GroupNames}-${MediaQueryKey}-${ParentMediaStates}`;
@@ -561,5 +562,2 @@ export type WithMediaProps<A> = {
 export type GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`;
-export type GetTokenPropsFromAcceptedTokens<AcceptedTokens> = AcceptedTokens extends Record<string, any> ? {
-    [Key in keyof AcceptedTokens]?: ThemeValueGet<AcceptedTokens[Key]>;
-} : {};
 export type SpecificTokens<Record = Tokens, RK extends keyof Record = keyof Record> = RK extends string ? `$${RK}.${keyof Record[RK] extends string | number ? keyof Record[RK] : never}` : never;
@@ -632,2 +630,4 @@ export type SpecificTokensSpecial = TamaguiSettings extends {
     focusStyle?: A | null;
+    focusVisibleStyle?: A | null;
+    disabledStyle?: A | null;
     exitStyle?: A | null;
@@ -641,2 +641,4 @@ enterStyle?: A | null;
     focusStyle?: ViewStyle;
+    focusVisibleStyle?: ViewStyle;
+    disabledStyle?: ViewStyle;
     enterStyle?: ViewStyle;
@@ -883,4 +885,4 @@ exitStyle?: ViewStyle;
      */
-    acceptTokens?: {
-        [key: string]: keyof Tokens;
+    accept?: {
+        [key: string]: keyof Tokens | 'style' | 'textStyle';
     };
@@ -942,2 +944,4 @@ /**
     focusStyle?: TextStyleProps;
+    focusVisibleStyle?: TextStyleProps;
+    disabledStyle?: TextStyleProps;
 });
@@ -1094,2 +1098,3 @@ /**
     isListeningToTheme?: boolean;
+    handleFocusVisible?: boolean;
     unPress?: Function;
@@ -1096,0 +1101,0 @@ group?: {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2542391

increased by0.55%

Lines of code

43688

increased by0.74%

Dependency changes

• + Added@tamagui/compose-refs@1.91.0(transitive)

• + Added@tamagui/constants@1.91.0(transitive)

• + Added@tamagui/helpers@1.91.0(transitive)

• + Added@tamagui/normalize-css-color@1.91.0(transitive)

• + Added@tamagui/simple-hash@1.91.0(transitive)

• + Added@tamagui/timer@1.91.0(transitive)

• + Added@tamagui/types@1.91.0(transitive)

• + Added@tamagui/use-did-finish-ssr@1.91.0(transitive)

• + Added@tamagui/use-event@1.91.0(transitive)

• + Added@tamagui/use-force-update@1.91.0(transitive)

• - Removed@tamagui/compose-refs@1.90.16(transitive)

• - Removed@tamagui/constants@1.90.16(transitive)

• - Removed@tamagui/helpers@1.90.16(transitive)

• - Removed@tamagui/normalize-css-color@1.90.16(transitive)

• - Removed@tamagui/simple-hash@1.90.16(transitive)

• - Removed@tamagui/timer@1.90.16(transitive)

• - Removed@tamagui/types@1.90.16(transitive)

• - Removed@tamagui/use-did-finish-ssr@1.90.16(transitive)

• - Removed@tamagui/use-event@1.90.16(transitive)

• - Removed@tamagui/use-force-update@1.90.16(transitive)

• Updated@tamagui/compose-refs@1.91.0

• Updated@tamagui/constants@1.91.0

• Updated@tamagui/helpers@1.91.0

• Updated@tamagui/normalize-css-color@1.91.0

• Updated@tamagui/timer@1.91.0

• Updated@tamagui/types@1.91.0

• Updated@tamagui/use-did-finish-ssr@1.91.0

• Updated@tamagui/use-event@1.91.0

• Updated@tamagui/use-force-update@1.91.0