@tamagui/web - npm Package Compare versions

Comparing version 1.90.1 to 1.90.2

dist/cjs/createComponent.js

@@ -340,8 +340,8 @@ var __create = Object.create;
             function persist() {
+              const group = {
+                ...state.group,
+                [name]: current
+              };
               setStateShallow({
-                // force it to be referentially different so it always updates
-                group: {
-                  ...state.group,
-                  [name]: current
-                }
+                group
               });
@@ -360,3 +360,3 @@ }
     ]);
-    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 = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+    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);
     process.env.NODE_ENV === "development" && time && time`events-setup`;
@@ -367,10 +367,10 @@ const events = shouldAttach && !isDisabled && !props.asChild ? {
       } : void 0,
-      ...(isHoverable || attachPress) && {
+      ...(attachHover || attachPress) && {
         onMouseEnter: (e) => {
           const next = {};
-          needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
+          needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
         },
         onMouseLeave: (e) => {
           const next = {};
-          mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+          mouseUps.add(unPress), needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
         }
@@ -400,3 +400,3 @@ },
     } : null;
-    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, isHoverable, attachPress }), import_setupHooks.hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig);
+    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && (0, import_log.log)("events", { events, attachHover, attachPress }), import_setupHooks.hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig);
     const direction = props.spaceDirection || "both";
@@ -421,4 +421,2 @@ process.env.NODE_ENV === "development" && time && time`hooks`;
             onPressOut,
-            onHoverIn,
-            onHoverOut,
             onMouseUp,
@@ -559,4 +557,4 @@ onMouseDown,
   return {
-    onMouseEnter: events.onHoverIn ?? events.onMouseEnter,
-    onMouseLeave: events.onHoverOut ?? events.onMouseLeave,
+    onMouseEnter: events.onMouseEnter,
+    onMouseLeave: events.onMouseLeave,
     [webStyle ? "onClick" : "onPress"]: events.onPress,
@@ -563,0 +561,0 @@ onMouseDown: events.onPressIn,

dist/cjs/createComponent.native.js

@@ -638,5 +638,5 @@ "use strict";
           var layout = param.layout, pseudo = param.pseudo, persist = function() {
+            var group = _object_spread_props(_object_spread({}, state.group), _define_property({}, name2, current));
             setStateShallow({
-              // force it to be referentially different so it always updates
-              group: _object_spread_props(_object_spread({}, state.group), _define_property({}, name2, current))
+              group
             });
@@ -660,3 +660,3 @@ };
     ]);
-    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 = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = import_constants.isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+    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);
     process.env.NODE_ENV === "development" && time && time(_templateObject14());
@@ -667,10 +667,10 @@ var events = shouldAttach && !isDisabled && !props.asChild ? _object_spread(_object_spread_props(_object_spread({
       } : void 0
-    }, (isHoverable || attachPress) && {
+    }, (attachHover || attachPress) && {
       onMouseEnter: function(e) {
         var next = {};
-        needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
+        needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
       },
       onMouseLeave: function(e) {
         var next = {};
-        mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
+        mouseUps.add(unPress), needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
       }
@@ -718,3 +718,3 @@ }), {
       events,
-      isHoverable,
+      attachHover,
       attachPress
@@ -721,0 +721,0 @@ }), (_hooks_useEvents = import_setupHooks.hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(import_setupHooks.hooks, viewProps, events, splitStyles, setStateShallow, staticConfig);

dist/cjs/helpers/getSplitStyles.js

@@ -179,4 +179,10 @@ var __defProp = Object.defineProperty;
       parentStaticConfig
-    })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant) || !styleProps.noSkip && keyInit in import_skipProps.skipProps)
+    })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant)) {
+      process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
       continue;
+    }
+    if (!styleProps.noSkip && keyInit in import_skipProps.skipProps) {
+      process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
+      continue;
+    }
     (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
@@ -272,4 +278,3 @@ const avoidPropMap = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit, expanded = avoidPropMap ? null : (0, import_propMapper.propMapper)(keyInit, valInit, styleState);
                 pkey,
-                val: val2,
-                transforms: { ...styleState.transforms }
+                val: val2
               });
@@ -299,13 +304,6 @@ }
         hasMedia ||= !0;
-        const mediaStyle = getSubStyle(
-          styleState,
-          key,
-          val,
-          // TODO try true like pseudo
-          !1
-        ), mediaKeyShort = key.slice(1);
+        const mediaKeyShort = key.slice(1);
         process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)(`  \u{1F4FA} ${key}`, {
           key,
           val,
-          mediaStyle,
           props,
@@ -318,2 +316,3 @@ shouldDoClasses,
         if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+          const mediaStyle = getSubStyle(styleState, key, val, !1);
           if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
@@ -346,3 +345,3 @@ const importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(
         } else {
-          const isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
+          const mediaStyle = getSubStyle(styleState, key, val, !0), isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
           if (!isThemeMedia && !(isMedia === "platform") && !isGroupMedia && !mediaState[mediaKeyShort])
@@ -383,4 +382,4 @@ continue;
             }
-            styleState.style ||= {}, (0, import_useMedia.mergeMediaByImportance)(
-              styleState.style,
+            styleState.style ||= {}, mergeMediaByImportance(
+              styleState,
               mediaKeyShort,
@@ -421,3 +420,3 @@ subKey,
         style && (style.$$css ? Object.assign(styleState.classNames, style) : (styleState.style ||= {}, Object.assign(styleState.style, style)));
-  if (!(styleProps.noNormalize === !1) && (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(styleState.style)), styleState.transforms && (styleState.style ||= {}, Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
+  if (!(styleProps.noNormalize === !1) && (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, Object.entries(styleState.flatTransforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
     mergeTransform(styleState.style, key, val, !0);
@@ -549,3 +548,3 @@ })), !staticConfig.isReactNative && !staticConfig.isHOC && !(styleProps.isAnimated && !conf.animations.supportsCSSVars) && Array.isArray(styleState.style?.transform) && (styleState.style.transform = (0, import_transformsToString.transformsToString)(styleState.style.transform)), parentSplitStyles)) {
   else if (key in import_helpers.stylePropsTransform)
-    styleState.transforms ||= {}, styleState.transforms[key] = val;
+    styleState.flatTransforms ||= {}, styleState.flatTransforms[key] = val;
   else {
@@ -615,2 +614,11 @@ const out = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
 }
+function mergeMediaByImportance(styleState, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
+  let importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(
+    mediaKey,
+    key,
+    importancesUsed,
+    isSizeMedia
+  );
+  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, mergeStyle(styleState, key, value), !0);
+}
 //# sourceMappingURL=getSplitStyles.js.map

dist/cjs/helpers/getSplitStyles.native.js

@@ -221,249 +221,248 @@ "use strict";
           parentStaticConfig
-        })), !(shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo1), !isVariant)) && !(!styleProps.noSkip && keyInit in import_skipProps.skipProps)) {
-          (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
-          var avoidPropMap = isMediaOrPseudo1 || !isVariant && !isValidStyleKeyInit, expanded = avoidPropMap ? null : (0, import_propMapper.propMapper)(keyInit, valInit, styleState);
-          if (!avoidPropMap) {
-            if (!expanded)
-              continue;
-            var next = (0, import_propMapper.getPropMappedFontFamily)(expanded);
-            next && (styleState.fontFamily = next);
-          }
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
-            try {
-              !import_constants.isServer && import_isDevTools.isDevTools && ((0, import_log.log)({
-                expanded,
-                styleProps,
-                componentState,
-                isVariant,
-                variant: variants == null ? void 0 : variants[keyInit],
-                shouldPassProp,
-                isHOCShouldPassThrough,
-                theme,
-                usedKeys: _object_spread({}, usedKeys),
-                curProps: _object_spread({}, styleState.curProps)
-              }), (0, import_log.log)("expanded", expanded, `
+        })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo1), !isVariant)) {
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
+          continue;
+        }
+        if (!styleProps.noSkip && keyInit in import_skipProps.skipProps) {
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
+          continue;
+        }
+        (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
+        var avoidPropMap = isMediaOrPseudo1 || !isVariant && !isValidStyleKeyInit, expanded = avoidPropMap ? null : (0, import_propMapper.propMapper)(keyInit, valInit, styleState);
+        if (!avoidPropMap) {
+          if (!expanded)
+            continue;
+          var next = (0, import_propMapper.getPropMappedFontFamily)(expanded);
+          next && (styleState.fontFamily = next);
+        }
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
+          try {
+            !import_constants.isServer && import_isDevTools.isDevTools && ((0, import_log.log)({
+              expanded,
+              styleProps,
+              componentState,
+              isVariant,
+              variant: variants == null ? void 0 : variants[keyInit],
+              shouldPassProp,
+              isHOCShouldPassThrough,
+              theme,
+              usedKeys: _object_spread({}, usedKeys),
+              curProps: _object_spread({}, styleState.curProps)
+            }), (0, import_log.log)("expanded", expanded, `
 usedKeys`, _object_spread({}, usedKeys), `
 current`, _object_spread({}, styleState.style)));
-            } catch {
-            }
-            console.groupEnd();
+          } catch {
           }
-          for (var key = keyInit, val = valInit, max = expanded ? expanded.length : 1, i = 0; i < max; i++) {
-            var _parentStaticConfig_variants1;
-            if (expanded) {
-              var _expanded_i = _sliced_to_array(expanded[i], 2), k = _expanded_i[0], v = _expanded_i[1];
-              key = k, val = v;
+          console.groupEnd();
+        }
+        for (var key = keyInit, val = valInit, max = expanded ? expanded.length : 1, i = 0; i < max; i++) {
+          var _parentStaticConfig_variants1;
+          if (expanded) {
+            var _expanded_i = _sliced_to_array(expanded[i], 2), k = _expanded_i[0], v = _expanded_i[1];
+            key = k, val = v;
+          }
+          if (val != null && !(key in usedKeys)) {
+            if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key in variants, inlineProps != null && inlineProps.has(key) || IS_STATIC && (inlineWhenUnflattened != null && inlineWhenUnflattened.has(key))) {
+              var _props_key;
+              viewProps[key] = (_props_key = props[key]) !== null && _props_key !== void 0 ? _props_key : val;
             }
-            if (val != null && !(key in usedKeys)) {
-              if (isPseudo = key in import_helpers.validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && (0, import_useMedia.isMediaKey)(key), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key in variants, inlineProps != null && inlineProps.has(key) || IS_STATIC && (inlineWhenUnflattened != null && inlineWhenUnflattened.has(key))) {
-                var _props_key;
-                viewProps[key] = (_props_key = props[key]) !== null && _props_key !== void 0 ? _props_key : val;
+            var shouldPassThrough1 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo1 || (parentStaticConfig == null || (_parentStaticConfig_variants1 = parentStaticConfig.variants) === null || _parentStaticConfig_variants1 === void 0 ? void 0 : _parentStaticConfig_variants1[keyInit]));
+            if (shouldPassThrough1) {
+              passDownProp(viewProps, key, val, isMediaOrPseudo1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(" - passing down prop ".concat(key)), (0, import_log.log)({
+                val,
+                after: _object_spread({}, viewProps[key])
+              }), console.groupEnd());
+              continue;
+            }
+            if (isPseudo) {
+              if (!val)
+                continue;
+              var pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
+              if (!descriptor)
+                continue;
+              if (!shouldDoClasses || IS_STATIC) {
+                var _pseudos, _key;
+                if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key] || (_pseudos[_key] = {}), IS_STATIC) {
+                  Object.assign(pseudos[key], pseudoStyleObject);
+                  continue;
+                }
               }
-              var shouldPassThrough1 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo1 || (parentStaticConfig == null || (_parentStaticConfig_variants1 = parentStaticConfig.variants) === null || _parentStaticConfig_variants1 === void 0 ? void 0 : _parentStaticConfig_variants1[keyInit]));
-              if (shouldPassThrough1) {
-                passDownProp(viewProps, key, val, isMediaOrPseudo1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(" - passing down prop ".concat(key)), (0, import_log.log)({
-                  val,
-                  after: _object_spread({}, viewProps[key])
+              if (shouldDoClasses && !isExit) {
+                var pseudoStyles = (0, import_getStylesAtomic.getStyleAtomic)(pseudoStyleObject, descriptor);
+                process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), (0, import_log.log)({
+                  pseudoStyleObject,
+                  pseudoStyles
                 }), console.groupEnd());
-                continue;
-              }
-              if (isPseudo) {
-                if (!val)
-                  continue;
-                var pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames), descriptor = import_pseudoDescriptors.pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
-                if (!descriptor)
-                  continue;
-                if (!shouldDoClasses || IS_STATIC) {
-                  var _pseudos, _key;
-                  if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key] || (_pseudos[_key] = {}), IS_STATIC) {
-                    Object.assign(pseudos[key], pseudoStyleObject);
-                    continue;
+                var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+                try {
+                  for (var _iterator = pseudoStyles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+                    var psuedoStyle = _step.value, fullKey = "".concat(psuedoStyle.property).concat(PROP_SPLIT).concat(descriptor.name);
+                    fullKey in usedKeys || mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo1, !0);
                   }
-                }
-                if (shouldDoClasses && !isExit) {
-                  var pseudoStyles = (0, import_getStylesAtomic.getStyleAtomic)(pseudoStyleObject, descriptor);
-                  process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), (0, import_log.log)({
-                    pseudoStyleObject,
-                    pseudoStyles
-                  }), console.groupEnd());
-                  var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+                } catch (err) {
+                  _didIteratorError = !0, _iteratorError = err;
+                } finally {
                   try {
-                    for (var _iterator = pseudoStyles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-                      var psuedoStyle = _step.value, fullKey = "".concat(psuedoStyle.property).concat(PROP_SPLIT).concat(descriptor.name);
-                      fullKey in usedKeys || mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo1, !0);
-                    }
-                  } catch (err) {
-                    _didIteratorError = !0, _iteratorError = err;
+                    !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
                   } finally {
-                    try {
-                      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-                    } finally {
-                      if (_didIteratorError)
-                        throw _iteratorError;
-                    }
+                    if (_didIteratorError)
+                      throw _iteratorError;
                   }
                 }
-                if (!shouldDoClasses || isExit || isEnter) {
-                  var descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
-                  isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, {
-                    isDisabled
-                  }), (0, import_log.log)({
-                    pseudoStyleObject,
-                    isDisabled,
-                    descriptor,
-                    componentState
-                  }), console.groupEnd());
-                  var importance = descriptor.priority;
-                  for (var pkey in pseudoStyleObject) {
-                    var val1 = pseudoStyleObject[pkey];
-                    if (isDisabled) {
-                      var defaultValues = animatableDefaults[pkey];
-                      defaultValues != null && !(pkey in usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
-                    } else {
-                      var curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
-                      if (shouldMerge) {
-                        var _pseudos1, _key1;
-                        pseudos || (pseudos = {}), (_pseudos1 = pseudos)[_key1 = key] || (_pseudos1[_key1] = {}), pseudos[key][pkey] = val1, mergeStyle(styleState, pkey, val1);
-                      }
-                      process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
-                        importance,
-                        curImportance,
-                        pkey,
-                        val: val1,
-                        transforms: _object_spread({}, styleState.transforms)
-                      });
+              }
+              if (!shouldDoClasses || isExit || isEnter) {
+                var descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
+                isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, {
+                  isDisabled
+                }), (0, import_log.log)({
+                  pseudoStyleObject,
+                  isDisabled,
+                  descriptor,
+                  componentState
+                }), console.groupEnd());
+                var importance = descriptor.priority;
+                for (var pkey in pseudoStyleObject) {
+                  var val1 = pseudoStyleObject[pkey];
+                  if (isDisabled) {
+                    var defaultValues = animatableDefaults[pkey];
+                    defaultValues != null && !(pkey in usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
+                  } else {
+                    var curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
+                    if (shouldMerge) {
+                      var _pseudos1, _key1;
+                      pseudos || (pseudos = {}), (_pseudos1 = pseudos)[_key1 = key] || (_pseudos1[_key1] = {}), pseudos[key][pkey] = val1, mergeStyle(styleState, pkey, val1);
                     }
+                    process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("    subKey", pkey, shouldMerge, {
+                      importance,
+                      curImportance,
+                      pkey,
+                      val: val1
+                    });
                   }
-                  if (!isDisabled)
-                    for (var key1 in val) {
-                      var k1 = shorthands[key1] || key1;
-                      usedKeys[k1] = Math.max(importance, usedKeys[k1] || 0);
-                    }
                 }
+                if (!isDisabled)
+                  for (var key1 in val) {
+                    var k1 = shorthands[key1] || key1;
+                    usedKeys[k1] = Math.max(importance, usedKeys[k1] || 0);
+                  }
+              }
+              continue;
+            }
+            if (isMedia) {
+              if (!val)
                 continue;
+              if (isMedia === "platform") {
+                var platform = key.slice(10);
+                if (
+                  // supports web, ios, android
+                  platform !== import_constants.currentPlatform && // supports web, native
+                  platform !== "native"
+                )
+                  continue;
               }
-              if (isMedia) {
-                if (!val)
-                  continue;
-                if (isMedia === "platform") {
-                  var platform = key.slice(10);
-                  if (
-                    // supports web, ios, android
-                    platform !== import_constants.currentPlatform && // supports web, native
-                    platform !== "native"
-                  )
-                    continue;
+              hasMedia || (hasMedia = !0);
+              var mediaKeyShort = key.slice(1);
+              process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("  \u{1F4FA} ".concat(key), {
+                key,
+                val,
+                props,
+                shouldDoClasses,
+                acceptsClassName,
+                componentState
+              });
+              var hasSpace = val.space;
+              if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+                var mediaStyle = getSubStyle(styleState, key, val, !1);
+                if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
+                  var importance1 = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", usedKeys, !0);
+                  importance1 && (space = val.space, usedKeys.space = importance1, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("Found more important space for current media ".concat(mediaKeyShort, ": ").concat(val, " (importance: ").concat(importance1, ")")));
                 }
-                hasMedia || (hasMedia = !0);
-                var mediaStyle = getSubStyle(
-                  styleState,
-                  key,
-                  val,
-                  // TODO try true like pseudo
-                  !1
-                ), mediaKeyShort = key.slice(1);
-                process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("  \u{1F4FA} ".concat(key), {
-                  key,
-                  val,
-                  mediaStyle,
-                  props,
-                  shouldDoClasses,
-                  acceptsClassName,
-                  componentState
-                });
-                var hasSpace = val.space;
-                if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
-                  if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
-                    var importance1 = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKeyShort, "space", usedKeys, !0);
-                    importance1 && (space = val.space, usedKeys.space = importance1, process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("Found more important space for current media ".concat(mediaKeyShort, ": ").concat(val, " (importance: ").concat(importance1, ")")));
+                var mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle), priority = mediaStylesSeen;
+                mediaStylesSeen += 1;
+                var _iteratorNormalCompletion1 = !0, _didIteratorError1 = !1, _iteratorError1 = void 0;
+                try {
+                  for (var _iterator1 = mediaStyles[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
+                    var style = _step1.value, out = (0, import_createMediaStyle.createMediaStyle)(style, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority);
+                    process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
+                    var fullKey1 = "".concat(style.property).concat(PROP_SPLIT).concat(mediaKeyShort).concat(style.pseudo || "");
+                    fullKey1 in usedKeys || mergeClassName(transforms, classNames, fullKey1, out.identifier, !0, !0);
                   }
-                  var mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle), priority = mediaStylesSeen;
-                  mediaStylesSeen += 1;
-                  var _iteratorNormalCompletion1 = !0, _didIteratorError1 = !1, _iteratorError1 = void 0;
+                } catch (err) {
+                  _didIteratorError1 = !0, _iteratorError1 = err;
+                } finally {
                   try {
-                    for (var _iterator1 = mediaStyles[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
-                      var style = _step1.value, out = (0, import_createMediaStyle.createMediaStyle)(style, mediaKeyShort, import_useMedia.mediaQueryConfig, isMedia, !1, priority);
-                      process.env.NODE_ENV === "development" && debug === "verbose" && (0, import_log.log)("\u{1F4FA} media style:", out);
-                      var fullKey1 = "".concat(style.property).concat(PROP_SPLIT).concat(mediaKeyShort).concat(style.pseudo || "");
-                      fullKey1 in usedKeys || mergeClassName(transforms, classNames, fullKey1, out.identifier, !0, !0);
-                    }
-                  } catch (err) {
-                    _didIteratorError1 = !0, _iteratorError1 = err;
+                    !_iteratorNormalCompletion1 && _iterator1.return != null && _iterator1.return();
                   } finally {
-                    try {
-                      !_iteratorNormalCompletion1 && _iterator1.return != null && _iterator1.return();
-                    } finally {
-                      if (_didIteratorError1)
-                        throw _iteratorError1;
-                    }
+                    if (_didIteratorError1)
+                      throw _iteratorError1;
                   }
-                } else {
-                  var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
-                  if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState[mediaKeyShort])
+                }
+              } else {
+                var mediaStyle1 = getSubStyle(styleState, key, val, !0), isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+                if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState[mediaKeyShort])
+                  continue;
+                var importanceBump = 0;
+                if (isThemeMedia) {
+                  dynamicThemeAccess = !0;
+                  var mediaThemeName = mediaKeyShort.slice(6);
+                  if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
                     continue;
-                  var importanceBump = 0;
-                  if (isThemeMedia) {
-                    dynamicThemeAccess = !0;
-                    var mediaThemeName = mediaKeyShort.slice(6);
-                    if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
+                } else if (isGroupMedia) {
+                  var _componentState_group, groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = context == null ? void 0 : context.groups.state[groupName];
+                  if (!groupContext) {
+                    process.env.NODE_ENV === "development" && debug && console.warn("No parent with group prop, skipping styles: ".concat(groupName));
+                    continue;
+                  }
+                  var groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
+                  if (groupMediaKey) {
+                    mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
+                    var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
+                    if (!mediaState1 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), !isActive)
                       continue;
-                  } else if (isGroupMedia) {
-                    var _componentState_group, groupInfo = (0, import_getGroupPropParts.getGroupPropParts)(mediaKeyShort), groupName = groupInfo.name, groupContext = context == null ? void 0 : context.groups.state[groupName];
-                    if (!groupContext) {
-                      process.env.NODE_ENV === "development" && debug && console.warn("No parent with group prop, skipping styles: ".concat(groupName));
-                      continue;
-                    }
-                    var groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
-                    if (groupMediaKey) {
-                      mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
-                      var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
-                      if (!mediaState1 && groupContext.layout && (isActive = (0, import_useMedia.mediaKeyMatch)(groupMediaKey, groupContext.layout)), !isActive)
-                        continue;
-                      importanceBump = 2;
-                    }
-                    if (groupPseudoKey) {
-                      pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
-                      var componentGroupPseudoState = (componentGroupState || // fallback to context initially
-                      context.groups.state[groupName]).pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey];
-                      if (!isActive1)
-                        continue;
-                      var priority1 = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
-                      importanceBump = priority1;
-                    }
+                    importanceBump = 2;
                   }
-                  for (var subKey in mediaStyle) {
-                    var _styleState2;
-                    if (subKey === "space") {
-                      space = valInit.space;
+                  if (groupPseudoKey) {
+                    pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
+                    var componentGroupPseudoState = (componentGroupState || // fallback to context initially
+                    context.groups.state[groupName]).pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey];
+                    if (!isActive1)
                       continue;
-                    }
-                    (_styleState2 = styleState).style || (_styleState2.style = {}), (0, import_useMedia.mergeMediaByImportance)(styleState.style, mediaKeyShort, subKey, mediaStyle[subKey], usedKeys, mediaState[mediaKeyShort], importanceBump), key === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
+                    var priority1 = import_pseudoDescriptors.pseudoPriorities[groupPseudoKey];
+                    importanceBump = priority1;
                   }
                 }
-                continue;
+                for (var subKey in mediaStyle1) {
+                  var _styleState2;
+                  if (subKey === "space") {
+                    space = valInit.space;
+                    continue;
+                  }
+                  (_styleState2 = styleState).style || (_styleState2.style = {}), mergeMediaByImportance(styleState, mediaKeyShort, subKey, mediaStyle1[subKey], usedKeys, mediaState[mediaKeyShort], importanceBump), key === "fontFamily" && (styleState.fontFamily = mediaStyle1.fontFamily);
+                }
               }
-              if (key === "pointerEvents") {
-                viewProps[key] = val;
-                continue;
-              }
-              if (
-                // is HOC we can just pass through the styles as props
-                // this fixes issues where style prop got merged with wrong priority
-                !isHOC && (isValidStyleKey(key, staticConfig) || import_constants.isAndroid && key === "elevation")
-              ) {
-                mergeStyle(styleState, key, val);
-                continue;
-              }
-              isVariant || (viewProps[key] = val);
+              continue;
             }
-          }
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            try {
-              (0, import_log.log)(" \u2714\uFE0F expand complete", keyInit), (0, import_log.log)("style", _object_spread({}, styleState.style)), (0, import_log.log)("transforms", _object_spread({}, transforms)), (0, import_log.log)("viewProps", _object_spread({}, viewProps));
-            } catch {
+            if (key === "pointerEvents") {
+              viewProps[key] = val;
+              continue;
             }
-            console.groupEnd();
+            if (
+              // is HOC we can just pass through the styles as props
+              // this fixes issues where style prop got merged with wrong priority
+              !isHOC && (isValidStyleKey(key, staticConfig) || import_constants.isAndroid && key === "elevation")
+            ) {
+              mergeStyle(styleState, key, val);
+              continue;
+            }
+            isVariant || (viewProps[key] = val);
           }
         }
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          try {
+            (0, import_log.log)(" \u2714\uFE0F expand complete", keyInit), (0, import_log.log)("style", _object_spread({}, styleState.style)), (0, import_log.log)("transforms", _object_spread({}, transforms)), (0, import_log.log)("viewProps", _object_spread({}, viewProps));
+          } catch {
+          }
+          console.groupEnd();
+        }
       }
@@ -501,5 +500,5 @@ }
   if (!avoidNormalize) {
-    if (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(styleState.style)), styleState.transforms) {
+    if (styleState.style && ((0, import_expandStyles.fixStyles)(styleState.style), import_constants.isWeb && !staticConfig.isReactNative && (0, import_getStylesAtomic.styleToCSS)(styleState.style)), styleState.flatTransforms) {
       var _styleState4;
-      (_styleState4 = styleState).style || (_styleState4.style = {}), Object.entries(styleState.transforms).sort(function(param, param1) {
+      (_styleState4 = styleState).style || (_styleState4.style = {}), Object.entries(styleState.flatTransforms).sort(function(param, param1) {
         var _param = _sliced_to_array(param, 1), a = _param[0], _param1 = _sliced_to_array(param1, 1), b = _param1[0];
@@ -626,3 +625,3 @@ return a.localeCompare(b);
     var _styleState;
-    (_styleState = styleState).transforms || (_styleState.transforms = {}), styleState.transforms[key] = val;
+    (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), styleState.flatTransforms[key] = val;
   } else {
@@ -700,2 +699,6 @@ var shouldNormalize = import_constants.isWeb && !disableNormalize && !styleProps.noNormalize, out = shouldNormalize ? (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(val, key) : val;
 }
+function mergeMediaByImportance(styleState, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
+  var importance = (0, import_useMedia.getMediaImportanceIfMoreImportant)(mediaKey, key, importancesUsed, isSizeMedia);
+  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, mergeStyle(styleState, key, value), !0);
+}
 // Annotate the CommonJS export names for ESM import in node:
@@ -702,0 +705,0 @@ 0 && (module.exports = {

dist/cjs/hooks/useMedia.js

@@ -28,3 +28,2 @@ var __defProp = Object.defineProperty;
   mediaState: () => mediaState,
-  mergeMediaByImportance: () => mergeMediaByImportance,
   setMediaShouldUpdate: () => setMediaShouldUpdate,
@@ -140,11 +139,2 @@ setupMediaListeners: () => setupMediaListeners,
 };
-function mergeMediaByImportance(onto, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
-  let importance = getMediaImportanceIfMoreImportant(
-    mediaKey,
-    key,
-    importancesUsed,
-    isSizeMedia
-  );
-  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, onto[key] = value, !0);
-}
 function camelToHyphen(str) {
@@ -151,0 +141,0 @@ return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();

dist/cjs/hooks/useMedia.native.js

@@ -29,3 +29,2 @@ "use strict";
   mediaState: () => mediaState,
-  mergeMediaByImportance: () => mergeMediaByImportance,
   setMediaShouldUpdate: () => setMediaShouldUpdate,
@@ -243,6 +242,2 @@ setupMediaListeners: () => setupMediaListeners,
 };
-function mergeMediaByImportance(onto, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
-  var importance = getMediaImportanceIfMoreImportant(mediaKey, key, importancesUsed, isSizeMedia);
-  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, onto[key] = value, !0);
-}
 function camelToHyphen(str) {
@@ -288,3 +283,2 @@ return str.replace(/[A-Z]/g, function(m) {
   mediaState,
-  mergeMediaByImportance,
   setMediaShouldUpdate,
@@ -291,0 +285,0 @@ setupMediaListeners,

dist/esm/createComponent.js

@@ -350,8 +350,8 @@ import { composeRefs } from "@tamagui/compose-refs";
             function persist() {
+              const group = {
+                ...state.group,
+                [name]: current
+              };
               setStateShallow({
-                // force it to be referentially different so it always updates
-                group: {
-                  ...state.group,
-                  [name]: current
-                }
+                group
               });
@@ -370,3 +370,3 @@ }
     ]);
-    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 = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+    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);
     process.env.NODE_ENV === "development" && time && time`events-setup`;
@@ -377,10 +377,10 @@ const events = shouldAttach && !isDisabled && !props.asChild ? {
       } : void 0,
-      ...(isHoverable || attachPress) && {
+      ...(attachHover || attachPress) && {
         onMouseEnter: (e) => {
           const next = {};
-          needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
+          needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
         },
         onMouseLeave: (e) => {
           const next = {};
-          mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+          mouseUps.add(unPress), needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
         }
@@ -410,3 +410,3 @@ },
     } : null;
-    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", { events, isHoverable, attachPress }), hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig);
+    events && !isReactNative && Object.assign(viewProps, getWebEvents(events)), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", { events, attachHover, attachPress }), hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow, staticConfig);
     const direction = props.spaceDirection || "both";
@@ -431,4 +431,2 @@ process.env.NODE_ENV === "development" && time && time`hooks`;
             onPressOut,
-            onHoverIn,
-            onHoverOut,
             onMouseUp,
@@ -569,4 +567,4 @@ onMouseDown,
   return {
-    onMouseEnter: events.onHoverIn ?? events.onMouseEnter,
-    onMouseLeave: events.onHoverOut ?? events.onMouseLeave,
+    onMouseEnter: events.onMouseEnter,
+    onMouseLeave: events.onMouseLeave,
     [webStyle ? "onClick" : "onPress"]: events.onPress,
@@ -573,0 +571,0 @@ onMouseDown: events.onPressIn,

dist/esm/createComponent.native.js

@@ -628,5 +628,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
           var layout = param.layout, pseudo = param.pseudo, persist = function() {
+            var group = _object_spread_props(_object_spread({}, state.group), _define_property({}, name2, current));
             setStateShallow({
-              // force it to be referentially different so it always updates
-              group: _object_spread_props(_object_spread({}, state.group), _define_property({}, name2, current))
+              group
             });
@@ -650,3 +650,3 @@ };
     ]);
-    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 = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), shouldAttach = !!(attachFocus || attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+    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);
     process.env.NODE_ENV === "development" && time && time(_templateObject14());
@@ -657,10 +657,10 @@ var events = shouldAttach && !isDisabled && !props.asChild ? _object_spread(_object_spread_props(_object_spread({
       } : void 0
-    }, (isHoverable || attachPress) && {
+    }, (attachHover || attachPress) && {
       onMouseEnter: function(e) {
         var next = {};
-        needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
+        needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn == null || onHoverIn(e), onMouseEnter == null || onMouseEnter(e);
       },
       onMouseLeave: function(e) {
         var next = {};
-        mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
+        mouseUps.add(unPress), needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut == null || onHoverOut(e), onMouseLeave == null || onMouseLeave(e);
       }
@@ -708,3 +708,3 @@ }), {
       events,
-      isHoverable,
+      attachHover,
       attachPress
@@ -711,0 +711,0 @@ }), (_hooks_useEvents = hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(hooks, viewProps, events, splitStyles, setStateShallow, staticConfig);

dist/esm/helpers/getSplitStyles.js

@@ -26,4 +26,3 @@ import {
   mediaKeyMatch,
-  mediaQueryConfig,
-  mergeMediaByImportance
+  mediaQueryConfig
 } from "../hooks/useMedia";
@@ -206,4 +205,10 @@ import { createMediaStyle } from "./createMediaStyle";
       parentStaticConfig
-    })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant) || !styleProps.noSkip && keyInit in skipProps)
+    })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo), !isVariant)) {
+      process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
       continue;
+    }
+    if (!styleProps.noSkip && keyInit in skipProps) {
+      process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
+      continue;
+    }
     (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
@@ -299,4 +304,3 @@ const avoidPropMap = isMediaOrPseudo || !isVariant && !isValidStyleKeyInit, expanded = avoidPropMap ? null : propMapper(keyInit, valInit, styleState);
                 pkey,
-                val: val2,
-                transforms: { ...styleState.transforms }
+                val: val2
               });
@@ -326,13 +330,6 @@ }
         hasMedia ||= !0;
-        const mediaStyle = getSubStyle(
-          styleState,
-          key,
-          val,
-          // TODO try true like pseudo
-          !1
-        ), mediaKeyShort = key.slice(1);
+        const mediaKeyShort = key.slice(1);
         process.env.NODE_ENV === "development" && debug === "verbose" && log(`  \u{1F4FA} ${key}`, {
           key,
           val,
-          mediaStyle,
           props,
@@ -345,2 +342,3 @@ shouldDoClasses,
         if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+          const mediaStyle = getSubStyle(styleState, key, val, !1);
           if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
@@ -373,3 +371,3 @@ const importance = getMediaImportanceIfMoreImportant(
         } else {
-          const isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
+          const mediaStyle = getSubStyle(styleState, key, val, !0), isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group";
           if (!isThemeMedia && !(isMedia === "platform") && !isGroupMedia && !mediaState[mediaKeyShort])
@@ -411,3 +409,3 @@ continue;
             styleState.style ||= {}, mergeMediaByImportance(
-              styleState.style,
+              styleState,
               mediaKeyShort,
@@ -448,3 +446,3 @@ subKey,
         style && (style.$$css ? Object.assign(styleState.classNames, style) : (styleState.style ||= {}, Object.assign(styleState.style, style)));
-  if (!(styleProps.noNormalize === !1) && (styleState.style && (fixStyles(styleState.style), isWeb && !staticConfig.isReactNative && styleToCSS(styleState.style)), styleState.transforms && (styleState.style ||= {}, Object.entries(styleState.transforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
+  if (!(styleProps.noNormalize === !1) && (styleState.style && (fixStyles(styleState.style), isWeb && !staticConfig.isReactNative && styleToCSS(styleState.style)), styleState.flatTransforms && (styleState.style ||= {}, Object.entries(styleState.flatTransforms).sort(([a], [b]) => a.localeCompare(b)).forEach(([key, val]) => {
     mergeTransform(styleState.style, key, val, !0);
@@ -576,3 +574,3 @@ })), !staticConfig.isReactNative && !staticConfig.isHOC && !(styleProps.isAnimated && !conf.animations.supportsCSSVars) && Array.isArray(styleState.style?.transform) && (styleState.style.transform = transformsToString(styleState.style.transform)), parentSplitStyles)) {
   else if (key in stylePropsTransform)
-    styleState.transforms ||= {}, styleState.transforms[key] = val;
+    styleState.flatTransforms ||= {}, styleState.flatTransforms[key] = val;
   else {
@@ -642,2 +640,11 @@ const out = isWeb && !disableNormalize && !styleProps.noNormalize ? normalizeValueWithProperty(val, key) : val;
 }
+function mergeMediaByImportance(styleState, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
+  let importance = getMediaImportanceIfMoreImportant(
+    mediaKey,
+    key,
+    importancesUsed,
+    isSizeMedia
+  );
+  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, mergeStyle(styleState, key, value), !0);
+}
 export {
@@ -644,0 +651,0 @@ PROP_SPLIT,

dist/esm/helpers/getSplitStyles.native.js

@@ -8,3 +8,3 @@ import { currentPlatform, isAndroid, isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { isDevTools } from "../constants/isDevTools";
-import { getMediaImportanceIfMoreImportant, mediaState as globalMediaState, isMediaKey, mediaKeyMatch, mediaQueryConfig, mergeMediaByImportance } from "../hooks/useMedia";
+import { getMediaImportanceIfMoreImportant, mediaState as globalMediaState, isMediaKey, mediaKeyMatch, mediaQueryConfig } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
@@ -218,249 +218,248 @@ import { fixStyles } from "./expandStyles";
           parentStaticConfig
-        })), !(shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo1), !isVariant)) && !(!styleProps.noSkip && keyInit in skipProps)) {
-          (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
-          var avoidPropMap = isMediaOrPseudo1 || !isVariant && !isValidStyleKeyInit, expanded = avoidPropMap ? null : propMapper(keyInit, valInit, styleState);
-          if (!avoidPropMap) {
-            if (!expanded)
-              continue;
-            var next = getPropMappedFontFamily(expanded);
-            next && (styleState.fontFamily = next);
-          }
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
-            try {
-              !isServer && isDevTools && (log({
-                expanded,
-                styleProps,
-                componentState,
-                isVariant,
-                variant: variants == null ? void 0 : variants[keyInit],
-                shouldPassProp,
-                isHOCShouldPassThrough,
-                theme,
-                usedKeys: _object_spread({}, usedKeys),
-                curProps: _object_spread({}, styleState.curProps)
-              }), log("expanded", expanded, `
+        })), shouldPassThrough && (passDownProp(viewProps, keyInit, valInit, isMediaOrPseudo1), !isVariant)) {
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
+          continue;
+        }
+        if (!styleProps.noSkip && keyInit in skipProps) {
+          process.env.NODE_ENV === "development" && debug === "verbose" && console.groupEnd();
+          continue;
+        }
+        (isText || isInput) && valInit && (keyInit === "fontFamily" || keyInit === shorthands.fontFamily) && valInit in conf.fontsParsed && (styleState.fontFamily = valInit);
+        var avoidPropMap = isMediaOrPseudo1 || !isVariant && !isValidStyleKeyInit, expanded = avoidPropMap ? null : propMapper(keyInit, valInit, styleState);
+        if (!avoidPropMap) {
+          if (!expanded)
+            continue;
+          var next = getPropMappedFontFamily(expanded);
+          next && (styleState.fontFamily = next);
+        }
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          console.groupCollapsed("  \u{1F4A0} expanded", keyInit, valInit);
+          try {
+            !isServer && isDevTools && (log({
+              expanded,
+              styleProps,
+              componentState,
+              isVariant,
+              variant: variants == null ? void 0 : variants[keyInit],
+              shouldPassProp,
+              isHOCShouldPassThrough,
+              theme,
+              usedKeys: _object_spread({}, usedKeys),
+              curProps: _object_spread({}, styleState.curProps)
+            }), log("expanded", expanded, `
 usedKeys`, _object_spread({}, usedKeys), `
 current`, _object_spread({}, styleState.style)));
-            } catch {
-            }
-            console.groupEnd();
+          } catch {
           }
-          for (var key = keyInit, val = valInit, max = expanded ? expanded.length : 1, i = 0; i < max; i++) {
-            var _parentStaticConfig_variants1;
-            if (expanded) {
-              var _expanded_i = _sliced_to_array(expanded[i], 2), k = _expanded_i[0], v = _expanded_i[1];
-              key = k, val = v;
+          console.groupEnd();
+        }
+        for (var key = keyInit, val = valInit, max = expanded ? expanded.length : 1, i = 0; i < max; i++) {
+          var _parentStaticConfig_variants1;
+          if (expanded) {
+            var _expanded_i = _sliced_to_array(expanded[i], 2), k = _expanded_i[0], v = _expanded_i[1];
+            key = k, val = v;
+          }
+          if (val != null && !(key in usedKeys)) {
+            if (isPseudo = key in validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key in variants, inlineProps != null && inlineProps.has(key) || IS_STATIC && (inlineWhenUnflattened != null && inlineWhenUnflattened.has(key))) {
+              var _props_key;
+              viewProps[key] = (_props_key = props[key]) !== null && _props_key !== void 0 ? _props_key : val;
             }
-            if (val != null && !(key in usedKeys)) {
-              if (isPseudo = key in validPseudoKeys, isMedia = !isPseudo && !isValidStyleKeyInit && isMediaKey(key), isMediaOrPseudo1 = !!(isMedia || isPseudo), isVariant = variants && key in variants, inlineProps != null && inlineProps.has(key) || IS_STATIC && (inlineWhenUnflattened != null && inlineWhenUnflattened.has(key))) {
-                var _props_key;
-                viewProps[key] = (_props_key = props[key]) !== null && _props_key !== void 0 ? _props_key : val;
+            var shouldPassThrough1 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo1 || (parentStaticConfig == null || (_parentStaticConfig_variants1 = parentStaticConfig.variants) === null || _parentStaticConfig_variants1 === void 0 ? void 0 : _parentStaticConfig_variants1[keyInit]));
+            if (shouldPassThrough1) {
+              passDownProp(viewProps, key, val, isMediaOrPseudo1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(" - passing down prop ".concat(key)), log({
+                val,
+                after: _object_spread({}, viewProps[key])
+              }), console.groupEnd());
+              continue;
+            }
+            if (isPseudo) {
+              if (!val)
+                continue;
+              var pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames), descriptor = pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
+              if (!descriptor)
+                continue;
+              if (!shouldDoClasses || IS_STATIC) {
+                var _pseudos, _key;
+                if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key] || (_pseudos[_key] = {}), IS_STATIC) {
+                  Object.assign(pseudos[key], pseudoStyleObject);
+                  continue;
+                }
               }
-              var shouldPassThrough1 = styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo1 || (parentStaticConfig == null || (_parentStaticConfig_variants1 = parentStaticConfig.variants) === null || _parentStaticConfig_variants1 === void 0 ? void 0 : _parentStaticConfig_variants1[keyInit]));
-              if (shouldPassThrough1) {
-                passDownProp(viewProps, key, val, isMediaOrPseudo1), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed(" - passing down prop ".concat(key)), log({
-                  val,
-                  after: _object_spread({}, viewProps[key])
+              if (shouldDoClasses && !isExit) {
+                var pseudoStyles = getStyleAtomic(pseudoStyleObject, descriptor);
+                process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), log({
+                  pseudoStyleObject,
+                  pseudoStyles
                 }), console.groupEnd());
-                continue;
-              }
-              if (isPseudo) {
-                if (!val)
-                  continue;
-                var pseudoStyleObject = getSubStyle(styleState, key, val, styleProps.noClassNames), descriptor = pseudoDescriptors[key], isEnter = key === "enterStyle", isExit = key === "exitStyle";
-                if (!descriptor)
-                  continue;
-                if (!shouldDoClasses || IS_STATIC) {
-                  var _pseudos, _key;
-                  if (pseudos || (pseudos = {}), (_pseudos = pseudos)[_key = key] || (_pseudos[_key] = {}), IS_STATIC) {
-                    Object.assign(pseudos[key], pseudoStyleObject);
-                    continue;
+                var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+                try {
+                  for (var _iterator = pseudoStyles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+                    var psuedoStyle = _step.value, fullKey = "".concat(psuedoStyle.property).concat(PROP_SPLIT).concat(descriptor.name);
+                    fullKey in usedKeys || mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo1, !0);
                   }
-                }
-                if (shouldDoClasses && !isExit) {
-                  var pseudoStyles = getStyleAtomic(pseudoStyleObject, descriptor);
-                  process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo (classes)", key), log({
-                    pseudoStyleObject,
-                    pseudoStyles
-                  }), console.groupEnd());
-                  var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+                } catch (err) {
+                  _didIteratorError = !0, _iteratorError = err;
+                } finally {
                   try {
-                    for (var _iterator = pseudoStyles[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-                      var psuedoStyle = _step.value, fullKey = "".concat(psuedoStyle.property).concat(PROP_SPLIT).concat(descriptor.name);
-                      fullKey in usedKeys || mergeClassName(transforms, classNames, fullKey, psuedoStyle.identifier, isMediaOrPseudo1, !0);
-                    }
-                  } catch (err) {
-                    _didIteratorError = !0, _iteratorError = err;
+                    !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
                   } finally {
-                    try {
-                      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-                    } finally {
-                      if (_didIteratorError)
-                        throw _iteratorError;
-                    }
+                    if (_didIteratorError)
+                      throw _iteratorError;
                   }
                 }
-                if (!shouldDoClasses || isExit || isEnter) {
-                  var descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
-                  isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, {
-                    isDisabled
-                  }), log({
-                    pseudoStyleObject,
-                    isDisabled,
-                    descriptor,
-                    componentState
-                  }), console.groupEnd());
-                  var importance = descriptor.priority;
-                  for (var pkey in pseudoStyleObject) {
-                    var val1 = pseudoStyleObject[pkey];
-                    if (isDisabled) {
-                      var defaultValues = animatableDefaults[pkey];
-                      defaultValues != null && !(pkey in usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
-                    } else {
-                      var curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
-                      if (shouldMerge) {
-                        var _pseudos1, _key1;
-                        pseudos || (pseudos = {}), (_pseudos1 = pseudos)[_key1 = key] || (_pseudos1[_key1] = {}), pseudos[key][pkey] = val1, mergeStyle(styleState, pkey, val1);
-                      }
-                      process.env.NODE_ENV === "development" && debug === "verbose" && log("    subKey", pkey, shouldMerge, {
-                        importance,
-                        curImportance,
-                        pkey,
-                        val: val1,
-                        transforms: _object_spread({}, styleState.transforms)
-                      });
+              }
+              if (!shouldDoClasses || isExit || isEnter) {
+                var descriptorKey = descriptor.stateKey || descriptor.name, isDisabled = componentState[descriptorKey] === !1;
+                isExit && (isDisabled = !styleProps.isExiting), isEnter && (isDisabled = componentState.unmounted === "should-enter" ? !0 : !componentState.unmounted), process.env.NODE_ENV === "development" && debug === "verbose" && (console.groupCollapsed("pseudo", key, {
+                  isDisabled
+                }), log({
+                  pseudoStyleObject,
+                  isDisabled,
+                  descriptor,
+                  componentState
+                }), console.groupEnd());
+                var importance = descriptor.priority;
+                for (var pkey in pseudoStyleObject) {
+                  var val1 = pseudoStyleObject[pkey];
+                  if (isDisabled) {
+                    var defaultValues = animatableDefaults[pkey];
+                    defaultValues != null && !(pkey in usedKeys) && (!styleState.style || !(pkey in styleState.style)) && mergeStyle(styleState, pkey, defaultValues);
+                  } else {
+                    var curImportance = usedKeys[pkey] || 0, shouldMerge = importance >= curImportance;
+                    if (shouldMerge) {
+                      var _pseudos1, _key1;
+                      pseudos || (pseudos = {}), (_pseudos1 = pseudos)[_key1 = key] || (_pseudos1[_key1] = {}), pseudos[key][pkey] = val1, mergeStyle(styleState, pkey, val1);
                     }
+                    process.env.NODE_ENV === "development" && debug === "verbose" && log("    subKey", pkey, shouldMerge, {
+                      importance,
+                      curImportance,
+                      pkey,
+                      val: val1
+                    });
                   }
-                  if (!isDisabled)
-                    for (var key1 in val) {
-                      var k1 = shorthands[key1] || key1;
-                      usedKeys[k1] = Math.max(importance, usedKeys[k1] || 0);
-                    }
                 }
+                if (!isDisabled)
+                  for (var key1 in val) {
+                    var k1 = shorthands[key1] || key1;
+                    usedKeys[k1] = Math.max(importance, usedKeys[k1] || 0);
+                  }
+              }
+              continue;
+            }
+            if (isMedia) {
+              if (!val)
                 continue;
+              if (isMedia === "platform") {
+                var platform = key.slice(10);
+                if (
+                  // supports web, ios, android
+                  platform !== currentPlatform && // supports web, native
+                  platform !== "native"
+                )
+                  continue;
               }
-              if (isMedia) {
-                if (!val)
-                  continue;
-                if (isMedia === "platform") {
-                  var platform = key.slice(10);
-                  if (
-                    // supports web, ios, android
-                    platform !== currentPlatform && // supports web, native
-                    platform !== "native"
-                  )
-                    continue;
+              hasMedia || (hasMedia = !0);
+              var mediaKeyShort = key.slice(1);
+              process.env.NODE_ENV === "development" && debug === "verbose" && log("  \u{1F4FA} ".concat(key), {
+                key,
+                val,
+                props,
+                shouldDoClasses,
+                acceptsClassName,
+                componentState
+              });
+              var hasSpace = val.space;
+              if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
+                var mediaStyle = getSubStyle(styleState, key, val, !1);
+                if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
+                  var importance1 = getMediaImportanceIfMoreImportant(mediaKeyShort, "space", usedKeys, !0);
+                  importance1 && (space = val.space, usedKeys.space = importance1, process.env.NODE_ENV === "development" && debug === "verbose" && log("Found more important space for current media ".concat(mediaKeyShort, ": ").concat(val, " (importance: ").concat(importance1, ")")));
                 }
-                hasMedia || (hasMedia = !0);
-                var mediaStyle = getSubStyle(
-                  styleState,
-                  key,
-                  val,
-                  // TODO try true like pseudo
-                  !1
-                ), mediaKeyShort = key.slice(1);
-                process.env.NODE_ENV === "development" && debug === "verbose" && log("  \u{1F4FA} ".concat(key), {
-                  key,
-                  val,
-                  mediaStyle,
-                  props,
-                  shouldDoClasses,
-                  acceptsClassName,
-                  componentState
-                });
-                var hasSpace = val.space;
-                if ((hasSpace || !shouldDoClasses) && (Array.isArray(hasMedia) || (hasMedia = []), hasMedia.push(mediaKeyShort)), shouldDoClasses) {
-                  if (hasSpace && (delete mediaStyle.space, mediaState[mediaKeyShort])) {
-                    var importance1 = getMediaImportanceIfMoreImportant(mediaKeyShort, "space", usedKeys, !0);
-                    importance1 && (space = val.space, usedKeys.space = importance1, process.env.NODE_ENV === "development" && debug === "verbose" && log("Found more important space for current media ".concat(mediaKeyShort, ": ").concat(val, " (importance: ").concat(importance1, ")")));
+                var mediaStyles = getStylesAtomic(mediaStyle), priority = mediaStylesSeen;
+                mediaStylesSeen += 1;
+                var _iteratorNormalCompletion1 = !0, _didIteratorError1 = !1, _iteratorError1 = void 0;
+                try {
+                  for (var _iterator1 = mediaStyles[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
+                    var style = _step1.value, out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig, isMedia, !1, priority);
+                    process.env.NODE_ENV === "development" && debug === "verbose" && log("\u{1F4FA} media style:", out);
+                    var fullKey1 = "".concat(style.property).concat(PROP_SPLIT).concat(mediaKeyShort).concat(style.pseudo || "");
+                    fullKey1 in usedKeys || mergeClassName(transforms, classNames, fullKey1, out.identifier, !0, !0);
                   }
-                  var mediaStyles = getStylesAtomic(mediaStyle), priority = mediaStylesSeen;
-                  mediaStylesSeen += 1;
-                  var _iteratorNormalCompletion1 = !0, _didIteratorError1 = !1, _iteratorError1 = void 0;
+                } catch (err) {
+                  _didIteratorError1 = !0, _iteratorError1 = err;
+                } finally {
                   try {
-                    for (var _iterator1 = mediaStyles[Symbol.iterator](), _step1; !(_iteratorNormalCompletion1 = (_step1 = _iterator1.next()).done); _iteratorNormalCompletion1 = !0) {
-                      var style = _step1.value, out = createMediaStyle(style, mediaKeyShort, mediaQueryConfig, isMedia, !1, priority);
-                      process.env.NODE_ENV === "development" && debug === "verbose" && log("\u{1F4FA} media style:", out);
-                      var fullKey1 = "".concat(style.property).concat(PROP_SPLIT).concat(mediaKeyShort).concat(style.pseudo || "");
-                      fullKey1 in usedKeys || mergeClassName(transforms, classNames, fullKey1, out.identifier, !0, !0);
-                    }
-                  } catch (err) {
-                    _didIteratorError1 = !0, _iteratorError1 = err;
+                    !_iteratorNormalCompletion1 && _iterator1.return != null && _iterator1.return();
                   } finally {
-                    try {
-                      !_iteratorNormalCompletion1 && _iterator1.return != null && _iterator1.return();
-                    } finally {
-                      if (_didIteratorError1)
-                        throw _iteratorError1;
-                    }
+                    if (_didIteratorError1)
+                      throw _iteratorError1;
                   }
-                } else {
-                  var isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
-                  if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState[mediaKeyShort])
+                }
+              } else {
+                var mediaStyle1 = getSubStyle(styleState, key, val, !0), isThemeMedia = isMedia === "theme", isGroupMedia = isMedia === "group", isPlatformMedia = isMedia === "platform";
+                if (!isThemeMedia && !isPlatformMedia && !isGroupMedia && !mediaState[mediaKeyShort])
+                  continue;
+                var importanceBump = 0;
+                if (isThemeMedia) {
+                  dynamicThemeAccess = !0;
+                  var mediaThemeName = mediaKeyShort.slice(6);
+                  if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
                     continue;
-                  var importanceBump = 0;
-                  if (isThemeMedia) {
-                    dynamicThemeAccess = !0;
-                    var mediaThemeName = mediaKeyShort.slice(6);
-                    if (!(themeName === mediaThemeName || themeName.startsWith(mediaThemeName)))
+                } else if (isGroupMedia) {
+                  var _componentState_group, groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupContext = context == null ? void 0 : context.groups.state[groupName];
+                  if (!groupContext) {
+                    process.env.NODE_ENV === "development" && debug && console.warn("No parent with group prop, skipping styles: ".concat(groupName));
+                    continue;
+                  }
+                  var groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
+                  if (groupMediaKey) {
+                    mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
+                    var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
+                    if (!mediaState1 && groupContext.layout && (isActive = mediaKeyMatch(groupMediaKey, groupContext.layout)), !isActive)
                       continue;
-                  } else if (isGroupMedia) {
-                    var _componentState_group, groupInfo = getGroupPropParts(mediaKeyShort), groupName = groupInfo.name, groupContext = context == null ? void 0 : context.groups.state[groupName];
-                    if (!groupContext) {
-                      process.env.NODE_ENV === "development" && debug && console.warn("No parent with group prop, skipping styles: ".concat(groupName));
-                      continue;
-                    }
-                    var groupPseudoKey = groupInfo.pseudo, groupMediaKey = groupInfo.media, componentGroupState = (_componentState_group = componentState.group) === null || _componentState_group === void 0 ? void 0 : _componentState_group[groupName];
-                    if (groupMediaKey) {
-                      mediaGroups || (mediaGroups = /* @__PURE__ */ new Set()), mediaGroups.add(groupMediaKey);
-                      var mediaState1 = componentGroupState == null ? void 0 : componentGroupState.media, isActive = mediaState1 == null ? void 0 : mediaState1[groupMediaKey];
-                      if (!mediaState1 && groupContext.layout && (isActive = mediaKeyMatch(groupMediaKey, groupContext.layout)), !isActive)
-                        continue;
-                      importanceBump = 2;
-                    }
-                    if (groupPseudoKey) {
-                      pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
-                      var componentGroupPseudoState = (componentGroupState || // fallback to context initially
-                      context.groups.state[groupName]).pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey];
-                      if (!isActive1)
-                        continue;
-                      var priority1 = pseudoPriorities[groupPseudoKey];
-                      importanceBump = priority1;
-                    }
+                    importanceBump = 2;
                   }
-                  for (var subKey in mediaStyle) {
-                    var _styleState2;
-                    if (subKey === "space") {
-                      space = valInit.space;
+                  if (groupPseudoKey) {
+                    pseudoGroups || (pseudoGroups = /* @__PURE__ */ new Set()), pseudoGroups.add(groupName);
+                    var componentGroupPseudoState = (componentGroupState || // fallback to context initially
+                    context.groups.state[groupName]).pseudo, isActive1 = componentGroupPseudoState == null ? void 0 : componentGroupPseudoState[groupPseudoKey];
+                    if (!isActive1)
                       continue;
-                    }
-                    (_styleState2 = styleState).style || (_styleState2.style = {}), mergeMediaByImportance(styleState.style, mediaKeyShort, subKey, mediaStyle[subKey], usedKeys, mediaState[mediaKeyShort], importanceBump), key === "fontFamily" && (styleState.fontFamily = mediaStyle.fontFamily);
+                    var priority1 = pseudoPriorities[groupPseudoKey];
+                    importanceBump = priority1;
                   }
                 }
-                continue;
+                for (var subKey in mediaStyle1) {
+                  var _styleState2;
+                  if (subKey === "space") {
+                    space = valInit.space;
+                    continue;
+                  }
+                  (_styleState2 = styleState).style || (_styleState2.style = {}), mergeMediaByImportance(styleState, mediaKeyShort, subKey, mediaStyle1[subKey], usedKeys, mediaState[mediaKeyShort], importanceBump), key === "fontFamily" && (styleState.fontFamily = mediaStyle1.fontFamily);
+                }
               }
-              if (key === "pointerEvents") {
-                viewProps[key] = val;
-                continue;
-              }
-              if (
-                // is HOC we can just pass through the styles as props
-                // this fixes issues where style prop got merged with wrong priority
-                !isHOC && (isValidStyleKey(key, staticConfig) || isAndroid && key === "elevation")
-              ) {
-                mergeStyle(styleState, key, val);
-                continue;
-              }
-              isVariant || (viewProps[key] = val);
+              continue;
             }
-          }
-          if (process.env.NODE_ENV === "development" && debug === "verbose") {
-            try {
-              log(" \u2714\uFE0F expand complete", keyInit), log("style", _object_spread({}, styleState.style)), log("transforms", _object_spread({}, transforms)), log("viewProps", _object_spread({}, viewProps));
-            } catch {
+            if (key === "pointerEvents") {
+              viewProps[key] = val;
+              continue;
             }
-            console.groupEnd();
+            if (
+              // is HOC we can just pass through the styles as props
+              // this fixes issues where style prop got merged with wrong priority
+              !isHOC && (isValidStyleKey(key, staticConfig) || isAndroid && key === "elevation")
+            ) {
+              mergeStyle(styleState, key, val);
+              continue;
+            }
+            isVariant || (viewProps[key] = val);
           }
         }
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
+          try {
+            log(" \u2714\uFE0F expand complete", keyInit), log("style", _object_spread({}, styleState.style)), log("transforms", _object_spread({}, transforms)), log("viewProps", _object_spread({}, viewProps));
+          } catch {
+          }
+          console.groupEnd();
+        }
       }
@@ -498,5 +497,5 @@ }
   if (!avoidNormalize) {
-    if (styleState.style && (fixStyles(styleState.style), isWeb && !staticConfig.isReactNative && styleToCSS(styleState.style)), styleState.transforms) {
+    if (styleState.style && (fixStyles(styleState.style), isWeb && !staticConfig.isReactNative && styleToCSS(styleState.style)), styleState.flatTransforms) {
       var _styleState4;
-      (_styleState4 = styleState).style || (_styleState4.style = {}), Object.entries(styleState.transforms).sort(function(param, param1) {
+      (_styleState4 = styleState).style || (_styleState4.style = {}), Object.entries(styleState.flatTransforms).sort(function(param, param1) {
         var _param = _sliced_to_array(param, 1), a = _param[0], _param1 = _sliced_to_array(param1, 1), b = _param1[0];
@@ -623,3 +622,3 @@ return a.localeCompare(b);
     var _styleState;
-    (_styleState = styleState).transforms || (_styleState.transforms = {}), styleState.transforms[key] = val;
+    (_styleState = styleState).flatTransforms || (_styleState.flatTransforms = {}), styleState.flatTransforms[key] = val;
   } else {
@@ -697,2 +696,6 @@ var shouldNormalize = isWeb && !disableNormalize && !styleProps.noNormalize, out = shouldNormalize ? normalizeValueWithProperty(val, key) : val;
 }
+function mergeMediaByImportance(styleState, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
+  var importance = getMediaImportanceIfMoreImportant(mediaKey, key, importancesUsed, isSizeMedia);
+  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, mergeStyle(styleState, key, value), !0);
+}
 export {
@@ -699,0 +702,0 @@ PROP_SPLIT,

dist/esm/hooks/useMedia.js

@@ -111,11 +111,2 @@ import { isServer, isWeb } from "@tamagui/constants";
 };
-function mergeMediaByImportance(onto, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
-  let importance = getMediaImportanceIfMoreImportant(
-    mediaKey,
-    key,
-    importancesUsed,
-    isSizeMedia
-  );
-  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, onto[key] = value, !0);
-}
 function camelToHyphen(str) {
@@ -155,3 +146,2 @@ return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase();
   mediaState,
-  mergeMediaByImportance,
   setMediaShouldUpdate,
@@ -158,0 +148,0 @@ setupMediaListeners,

dist/esm/hooks/useMedia.native.js

@@ -213,6 +213,2 @@ import { isServer, isWeb } from "@tamagui/constants";
 };
-function mergeMediaByImportance(onto, mediaKey, key, value, importancesUsed, isSizeMedia, importanceBump) {
-  var importance = getMediaImportanceIfMoreImportant(mediaKey, key, importancesUsed, isSizeMedia);
-  return importanceBump && (importance = (importance || 0) + importanceBump), importance === null ? !1 : (importancesUsed[key] = importance, onto[key] = value, !0);
-}
 function camelToHyphen(str) {
@@ -257,3 +253,2 @@ return str.replace(/[A-Z]/g, function(m) {
   mediaState,
-  mergeMediaByImportance,
   setMediaShouldUpdate,
@@ -260,0 +255,0 @@ setupMediaListeners,

package.json

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

types/hooks/useMedia.d.ts

@@ -17,3 +17,2 @@ import type { ComponentContextI, IsMediaType, MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, TamaguiInternalConfig, UseMediaState } from '../types';
 export declare const getMediaImportanceIfMoreImportant: (mediaKey: string, key: string, importancesUsed: Record<string, number>, isSizeMedia: boolean) => number | null;
-export declare function mergeMediaByImportance(onto: Record<string, any>, mediaKey: string, key: string, value: any, importancesUsed: Record<string, number>, isSizeMedia: boolean, importanceBump?: number): boolean;
 export declare function mediaObjectToString(query: string | MediaQueryObject, key?: string): string;
@@ -20,0 +19,0 @@ export declare function mediaKeyToQuery(key: string): string;

types/types.d.ts

@@ -821,3 +821,2 @@ import type { StyleObject } from '@tamagui/helpers';
 export type PropMappedValue = [string, any][] | undefined;
-type FlatTransforms = Record<string, any>;
 export type GetStyleState = {
@@ -839,3 +838,3 @@ style: TextStyleProps | null;
     debug?: DebugProp;
-    transforms?: FlatTransforms;
+    flatTransforms?: Record<string, any>;
 };
@@ -842,0 +841,0 @@ export type StyleResolver<Response = PropMappedValue> = (key: string, value: any, props: SplitStyleProps, state: GetStyleState, parentVariantKey: string) => Response;

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

Worsened metrics

Total package byte prevSize

2520778

decreased by-0.02%

Lines of code

43320

decreased by-0.04%

Number of low supply chain risk alerts

598

increased by1.7%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@tamagui/compose-refs@1.90.2

• Updated@tamagui/constants@1.90.2

• Updated@tamagui/helpers@1.90.2

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

• Updated@tamagui/timer@1.90.2

• Updated@tamagui/types@1.90.2

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

• Updated@tamagui/use-event@1.90.2

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