@tamagui/core 2.0.0-1768530912818 → 2.0.0-1768586279389

package/dist/native.cjs

@@ -1953,14 +1953,14 @@ function requireNormalizeColor() {
     return (int % 360 + 360) % 360 / 360;
   }
   function parse1(str) {
-    const num = parseFloat(str);
-    if (num < 0) {
+    const num2 = parseFloat(str);
+    if (num2 < 0) {
       return 0;
     }
-    if (num > 1) {
+    if (num2 > 1) {
       return 255;
     }
-    return Math.round(num * 255);
+    return Math.round(num2 * 255);
   }
   function parsePercentage(str) {
     const int = parseFloat(str);
@@ -8716,13 +8716,14 @@ var webOnlyStylePropsView = {
   borderLeftStyle: true,
   borderRightStyle: true,
   borderTopStyle: true,
-  boxSizing: true,
+  // boxSizing: now supported in RN 0.77+ (New Architecture)
   caretColor: true,
   clipPath: true,
   contain: true,
   containerType: true,
   content: true,
   cursor: true,
+  // NOTE: cursor is supported on iOS 17+ for trackpad/stylus
   float: true,
   mask: true,
   maskBorder: true,
@@ -8741,13 +8742,10 @@ var webOnlyStylePropsView = {
   maskRepeat: true,
   maskSize: true,
   maskType: true,
-  mixBlendMode: true,
+  // mixBlendMode: now supported in RN 0.77+ (New Architecture)
   objectFit: true,
   objectPosition: true,
-  outlineOffset: true,
-  outlineStyle: true,
-  outlineWidth: true,
-  outlineColor: true,
+  // outline*: now supported in RN 0.77+ (New Architecture)
   overflowBlock: true,
   overflowInline: true,
   overflowX: true,
@@ -8803,7 +8801,7 @@ var textColors = {
   zIndex: {
     zIndex: true
   },
-  color: __spreadValues({
+  color: __spreadProps(__spreadValues({
     backgroundColor: true,
     borderColor: true,
     borderBlockStartColor: true,
@@ -8819,7 +8817,10 @@ var textColors = {
     borderEndColor: true,
     borderStartColor: true,
     shadowColor: true
-  }, textColors)
+  }, textColors), {
+    // outlineColor is supported on RN 0.77+ (New Architecture)
+    outlineColor: true
+  })
 }, stylePropsUnitless = {
   WebkitLineClamp: true,
   animationIterationCount: true,
@@ -8872,7 +8873,7 @@ var textColors = {
   rotateY: true,
   rotateX: true,
   rotateZ: true
-}, stylePropsView = __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+}, stylePropsView = __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   backfaceVisibility: true,
   borderBottomEndRadius: true,
   borderBottomStartRadius: true,
@@ -8962,12 +8963,13 @@ var textColors = {
   elevationAndroid: true
 } : {}), {
   boxShadow: true,
-  filter: true
-}), !process.env.REACT_NATIVE_PRE_77 && {
+  filter: true,
+  // RN 0.76/0.77+ style props (New Architecture)
   boxSizing: true,
   mixBlendMode: true,
+  isolation: true,
   outlineColor: true,
-  outlineSpread: true,
+  outlineOffset: true,
   outlineStyle: true,
   outlineWidth: true
 }), stylePropsFont = {
@@ -9659,9 +9661,58 @@ var _loop = function(parent) {
   EXPANSIONS[parent] = EXPANSIONS[parent].map(function(k) {
     return `${prefix}${k}`;
   });
+}, num = function(v) {
+  return Number.parseFloat(v) || 0;
+}, parseBoxShadowStr = function(s2) {
+  return s2.split(/,(?![^(]*\))/).map(function(sh) {
+    var p = sh.trim().split(/\s+/), i = p[0] === "inset" ? 1 : 0, o = {
+      offsetX: num(p[i++]),
+      offsetY: num(p[i++])
+    };
+    return p[0] === "inset" && (o.inset = true), p[i] && /^-?[\d.]/.test(p[i]) && (o.blurRadius = num(p[i++])), p[i] && /^-?[\d.]/.test(p[i]) && (o.spreadDistance = num(p[i++])), p[i] && (o.color = p.slice(i).join(" ")), o;
+  });
+}, simpleFilters = /* @__PURE__ */ new Set(["brightness", "opacity", "contrast", "grayscale", "invert", "saturate", "sepia", "blur"]), parseFilterStr = function(s2) {
+  var r = [], _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+  try {
+    for (var _iterator = s2.matchAll(/(\w+)\(([^)]+)\)/g)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var [, fn, val] = _step.value, n = +val || 0;
+      if (simpleFilters.has(fn)) r.push({
+        [fn]: n
+      });
+      else if (fn === "hueRotate" || fn === "hue-rotate") r.push({
+        hueRotate: val
+      });
+      else if (fn === "dropShadow" || fn === "drop-shadow") {
+        var p = val.trim().split(/\s+/), ds = {
+          offsetX: num(p[0]),
+          offsetY: num(p[1])
+        };
+        p[2] && /^-?[\d.]/.test(p[2]) ? (ds.blurRadius = num(p[2]), p[3] && (ds.color = p.slice(3).join(" "))) : p[2] && (ds.color = p.slice(2).join(" ")), r.push({
+          dropShadow: ds
+        });
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError) throw _iteratorError;
+    }
+  }
+  return r;
 };
 function expandStyle(key, value) {
   if (isAndroid && key === "elevationAndroid") return [["elevation", value]];
+  if (key === "boxShadow") {
+    if (typeof value == "string") return [["boxShadow", parseBoxShadowStr(value)]];
+    if (value && !Array.isArray(value)) return [["boxShadow", [value]]];
+  }
+  if (key === "filter") {
+    if (typeof value == "string") return [["filter", parseFilterStr(value)]];
+    if (value && !Array.isArray(value)) return [["filter", [value]]];
+  }
   if (key in EXPANSIONS) return EXPANSIONS[key].map(function(key2) {
     return [key2, value];
   });
@@ -9670,18 +9721,17 @@ function expandStyle(key, value) {
   });
   if (key in webToNativeDynamicExpansion) return webToNativeDynamicExpansion[key](value);
 }
-var all = ["Top", "Right", "Bottom", "Left"], horiz = ["Right", "Left"], vert = ["Top", "Bottom"], xy = ["X", "Y"], EXPANSIONS = __spreadValues({
+var all = ["Top", "Right", "Bottom", "Left"], horiz = ["Right", "Left"], vert = ["Top", "Bottom"], EXPANSIONS = {
   borderColor: ["TopColor", "RightColor", "BottomColor", "LeftColor"],
   borderRadius: ["TopLeftRadius", "TopRightRadius", "BottomRightRadius", "BottomLeftRadius"],
   borderWidth: ["TopWidth", "RightWidth", "BottomWidth", "LeftWidth"],
   margin: all,
   marginHorizontal: horiz,
   marginVertical: vert,
-  overscrollBehavior: xy,
   padding: all,
   paddingHorizontal: horiz,
   paddingVertical: vert
-}, isWeb);
+};
 for (var parent in EXPANSIONS) _loop(parent);
 var cache$1 = /* @__PURE__ */ new WeakMap(), getVariantExtras = function(styleState) {
   if (cache$1.has(styleState)) return cache$1.get(styleState);
@@ -9821,14 +9871,47 @@ function _type_of$3(obj) {
   "@swc/helpers - typeof";
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-var shorthandStringProps = {
-  boxShadow: 1,
-  border: 1,
-  borderTop: 1,
-  borderRight: 1,
-  borderBottom: 1,
-  borderLeft: 1,
-  background: 1
+var resolveTok = function(v, cat, sp, ss) {
+  if (typeof v == "string" && v[0] === "$") {
+    var r = getTokenForKey(cat, v, sp, ss);
+    return cat === "size" ? r != null && +r || 0 : r != null ? String(r) : v;
+  }
+  return cat === "size" ? typeof v == "number" ? v : +v || 0 : v;
+}, boxShadowObjResolve = function(v, sp, ss) {
+  return (Array.isArray(v) ? v : [v]).map(function(o) {
+    return __spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, o.inset && {
+      inset: true
+    }), {
+      offsetX: resolveTok(o.offsetX, "size", sp, ss),
+      offsetY: resolveTok(o.offsetY, "size", sp, ss)
+    }), o.blurRadius != null && {
+      blurRadius: resolveTok(o.blurRadius, "size", sp, ss)
+    }), o.spreadDistance != null && {
+      spreadDistance: resolveTok(o.spreadDistance, "size", sp, ss)
+    }), o.color != null && {
+      color: resolveTok(o.color, "color", sp, ss)
+    });
+  });
+}, filterObjResolve = function(v, sp, ss) {
+  return (Array.isArray(v) ? v : [v]).map(function(o) {
+    if ("blur" in o) return {
+      blur: resolveTok(o.blur, "size", sp, ss)
+    };
+    if ("dropShadow" in o) {
+      var ds = o.dropShadow;
+      return {
+        dropShadow: __spreadValues(__spreadValues({
+          offsetX: resolveTok(ds.offsetX, "size", sp, ss),
+          offsetY: resolveTok(ds.offsetY, "size", sp, ss)
+        }, ds.blurRadius != null && {
+          blurRadius: resolveTok(ds.blurRadius, "size", sp, ss)
+        }), ds.color != null && {
+          color: resolveTok(ds.color, "color", sp, ss)
+        })
+      };
+    }
+    return o;
+  });
 }, propMapper = function(key, value, styleState, disabled, map) {
   if (disabled) return map(key, value);
   if (lastFontFamilyToken = null, !(!isAndroid && key === "elevationAndroid")) {
@@ -9857,13 +9940,13 @@ var shorthandStringProps = {
     }
     styleProps2.disableExpandShorthands || key in conf2.shorthands && (key = conf2.shorthands[key]);
     var originalValue = value;
-    if (value != null && (value[0] === "$" ? value = getTokenForKey(key, value, styleProps2, styleState) : (
-      /* Handle CSS shorthand strings with embedded $variables (e.g., boxShadow="0 0 10px $red") */
-      key in shorthandStringProps && typeof value == "string" && value.includes("$") ? value = value.replace(/\$[\w.-]+/g, function(token) {
-        var resolved = getTokenForKey("color", token, styleProps2, styleState);
-        return resolved != null ? String(resolved) : token;
-      }) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps2.resolveValues) : isRemValue(value) && (value = resolveRem(value))
-    )), value != null) {
+    if (value != null && (key === "boxShadow" && (typeof value > "u" ? "undefined" : _type_of$3(value)) === "object" ? value = boxShadowObjResolve(value, styleProps2, styleState) : key === "filter" && (typeof value > "u" ? "undefined" : _type_of$3(value)) === "object" ? value = filterObjResolve(value, styleProps2, styleState) : typeof value == "string" && value[0] === "$" ? value = getTokenForKey(key, value, styleProps2, styleState) : key === "boxShadow" && typeof value == "string" && value.includes("$") ? value = value.replace(/(\$[\w.-]+)/g, function(t2) {
+      var cat = /^\$-?\d/.test(t2) ? "size" : "color", r = getTokenForKey(cat, t2, styleProps2, styleState);
+      return r != null ? String(r) : t2;
+    }) : key === "filter" && typeof value == "string" && value.includes("$") ? value = value.replace(/(\$[\w.-]+)/g, function(t2) {
+      var cat = /^\$-?\d/.test(t2) ? "size" : "color", r = getTokenForKey(cat, t2, styleProps2, styleState);
+      return r != null ? String(r) : t2;
+    }) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps2.resolveValues) : isRemValue(value) && (value = resolveRem(value))), value != null) {
       key === "fontFamily" && lastFontFamilyToken && (styleState.fontFamily = lastFontFamilyToken);
       var expanded = styleProps2.noExpand ? null : expandStyle(key, value);
       if (expanded) for (var max = expanded.length, i = 0; i < max; i++) {

package/dist/test.native.cjs

@@ -868,13 +868,14 @@ var webOnlyStylePropsView = {
   borderLeftStyle: true,
   borderRightStyle: true,
   borderTopStyle: true,
-  boxSizing: true,
+  // boxSizing: now supported in RN 0.77+ (New Architecture)
   caretColor: true,
   clipPath: true,
   contain: true,
   containerType: true,
   content: true,
   cursor: true,
+  // NOTE: cursor is supported on iOS 17+ for trackpad/stylus
   float: true,
   mask: true,
   maskBorder: true,
@@ -893,13 +894,10 @@ var webOnlyStylePropsView = {
   maskRepeat: true,
   maskSize: true,
   maskType: true,
-  mixBlendMode: true,
+  // mixBlendMode: now supported in RN 0.77+ (New Architecture)
   objectFit: true,
   objectPosition: true,
-  outlineOffset: true,
-  outlineStyle: true,
-  outlineWidth: true,
-  outlineColor: true,
+  // outline*: now supported in RN 0.77+ (New Architecture)
   overflowBlock: true,
   overflowInline: true,
   overflowX: true,
@@ -955,7 +953,7 @@ var textColors = {
   zIndex: {
     zIndex: true
   },
-  color: __spreadValues({
+  color: __spreadProps(__spreadValues({
     backgroundColor: true,
     borderColor: true,
     borderBlockStartColor: true,
@@ -971,7 +969,10 @@ var textColors = {
     borderEndColor: true,
     borderStartColor: true,
     shadowColor: true
-  }, textColors)
+  }, textColors), {
+    // outlineColor is supported on RN 0.77+ (New Architecture)
+    outlineColor: true
+  })
 }, stylePropsUnitless = {
   WebkitLineClamp: true,
   animationIterationCount: true,
@@ -1024,7 +1025,7 @@ var textColors = {
   rotateY: true,
   rotateX: true,
   rotateZ: true
-}, stylePropsView = __spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
+}, stylePropsView = __spreadProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
   backfaceVisibility: true,
   borderBottomEndRadius: true,
   borderBottomStartRadius: true,
@@ -1114,12 +1115,13 @@ var textColors = {
   elevationAndroid: true
 } : {}), {
   boxShadow: true,
-  filter: true
-}), !process.env.REACT_NATIVE_PRE_77 && {
+  filter: true,
+  // RN 0.76/0.77+ style props (New Architecture)
   boxSizing: true,
   mixBlendMode: true,
+  isolation: true,
   outlineColor: true,
-  outlineSpread: true,
+  outlineOffset: true,
   outlineStyle: true,
   outlineWidth: true
 }), stylePropsFont = {
@@ -1851,14 +1853,14 @@ function requireNormalizeColor() {
     return (int % 360 + 360) % 360 / 360;
   }
   function parse1(str) {
-    const num = parseFloat(str);
-    if (num < 0) {
+    const num2 = parseFloat(str);
+    if (num2 < 0) {
       return 0;
     }
-    if (num > 1) {
+    if (num2 > 1) {
       return 255;
     }
-    return Math.round(num * 255);
+    return Math.round(num2 * 255);
   }
   function parsePercentage(str) {
     const int = parseFloat(str);
@@ -2352,9 +2354,58 @@ var _loop = function(parent) {
   EXPANSIONS[parent] = EXPANSIONS[parent].map(function(k) {
     return `${prefix}${k}`;
   });
+}, num = function(v) {
+  return Number.parseFloat(v) || 0;
+}, parseBoxShadowStr = function(s2) {
+  return s2.split(/,(?![^(]*\))/).map(function(sh) {
+    var p = sh.trim().split(/\s+/), i = p[0] === "inset" ? 1 : 0, o = {
+      offsetX: num(p[i++]),
+      offsetY: num(p[i++])
+    };
+    return p[0] === "inset" && (o.inset = true), p[i] && /^-?[\d.]/.test(p[i]) && (o.blurRadius = num(p[i++])), p[i] && /^-?[\d.]/.test(p[i]) && (o.spreadDistance = num(p[i++])), p[i] && (o.color = p.slice(i).join(" ")), o;
+  });
+}, simpleFilters = /* @__PURE__ */ new Set(["brightness", "opacity", "contrast", "grayscale", "invert", "saturate", "sepia", "blur"]), parseFilterStr = function(s2) {
+  var r = [], _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+  try {
+    for (var _iterator = s2.matchAll(/(\w+)\(([^)]+)\)/g)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var [, fn, val] = _step.value, n = +val || 0;
+      if (simpleFilters.has(fn)) r.push({
+        [fn]: n
+      });
+      else if (fn === "hueRotate" || fn === "hue-rotate") r.push({
+        hueRotate: val
+      });
+      else if (fn === "dropShadow" || fn === "drop-shadow") {
+        var p = val.trim().split(/\s+/), ds = {
+          offsetX: num(p[0]),
+          offsetY: num(p[1])
+        };
+        p[2] && /^-?[\d.]/.test(p[2]) ? (ds.blurRadius = num(p[2]), p[3] && (ds.color = p.slice(3).join(" "))) : p[2] && (ds.color = p.slice(2).join(" ")), r.push({
+          dropShadow: ds
+        });
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true, _iteratorError = err;
+  } finally {
+    try {
+      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+    } finally {
+      if (_didIteratorError) throw _iteratorError;
+    }
+  }
+  return r;
 };
 function expandStyle(key, value) {
   if (isAndroid && key === "elevationAndroid") return [["elevation", value]];
+  if (key === "boxShadow") {
+    if (typeof value == "string") return [["boxShadow", parseBoxShadowStr(value)]];
+    if (value && !Array.isArray(value)) return [["boxShadow", [value]]];
+  }
+  if (key === "filter") {
+    if (typeof value == "string") return [["filter", parseFilterStr(value)]];
+    if (value && !Array.isArray(value)) return [["filter", [value]]];
+  }
   if (key in EXPANSIONS) return EXPANSIONS[key].map(function(key2) {
     return [key2, value];
   });
@@ -2363,18 +2414,17 @@ function expandStyle(key, value) {
   });
   if (key in webToNativeDynamicExpansion) return webToNativeDynamicExpansion[key](value);
 }
-var all = ["Top", "Right", "Bottom", "Left"], horiz = ["Right", "Left"], vert = ["Top", "Bottom"], xy = ["X", "Y"], EXPANSIONS = __spreadValues({
+var all = ["Top", "Right", "Bottom", "Left"], horiz = ["Right", "Left"], vert = ["Top", "Bottom"], EXPANSIONS = {
   borderColor: ["TopColor", "RightColor", "BottomColor", "LeftColor"],
   borderRadius: ["TopLeftRadius", "TopRightRadius", "BottomRightRadius", "BottomLeftRadius"],
   borderWidth: ["TopWidth", "RightWidth", "BottomWidth", "LeftWidth"],
   margin: all,
   marginHorizontal: horiz,
   marginVertical: vert,
-  overscrollBehavior: xy,
   padding: all,
   paddingHorizontal: horiz,
   paddingVertical: vert
-}, isWeb);
+};
 for (var parent in EXPANSIONS) _loop(parent);
 var cache$1 = /* @__PURE__ */ new WeakMap(), getVariantExtras = function(styleState) {
   if (cache$1.has(styleState)) return cache$1.get(styleState);
@@ -2515,14 +2565,47 @@ function _type_of$3(obj) {
   "@swc/helpers - typeof";
   return obj && typeof Symbol < "u" && obj.constructor === Symbol ? "symbol" : typeof obj;
 }
-var shorthandStringProps = {
-  boxShadow: 1,
-  border: 1,
-  borderTop: 1,
-  borderRight: 1,
-  borderBottom: 1,
-  borderLeft: 1,
-  background: 1
+var resolveTok = function(v, cat, sp, ss) {
+  if (typeof v == "string" && v[0] === "$") {
+    var r = getTokenForKey(cat, v, sp, ss);
+    return cat === "size" ? r != null && +r || 0 : r != null ? String(r) : v;
+  }
+  return cat === "size" ? typeof v == "number" ? v : +v || 0 : v;
+}, boxShadowObjResolve = function(v, sp, ss) {
+  return (Array.isArray(v) ? v : [v]).map(function(o) {
+    return __spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, o.inset && {
+      inset: true
+    }), {
+      offsetX: resolveTok(o.offsetX, "size", sp, ss),
+      offsetY: resolveTok(o.offsetY, "size", sp, ss)
+    }), o.blurRadius != null && {
+      blurRadius: resolveTok(o.blurRadius, "size", sp, ss)
+    }), o.spreadDistance != null && {
+      spreadDistance: resolveTok(o.spreadDistance, "size", sp, ss)
+    }), o.color != null && {
+      color: resolveTok(o.color, "color", sp, ss)
+    });
+  });
+}, filterObjResolve = function(v, sp, ss) {
+  return (Array.isArray(v) ? v : [v]).map(function(o) {
+    if ("blur" in o) return {
+      blur: resolveTok(o.blur, "size", sp, ss)
+    };
+    if ("dropShadow" in o) {
+      var ds = o.dropShadow;
+      return {
+        dropShadow: __spreadValues(__spreadValues({
+          offsetX: resolveTok(ds.offsetX, "size", sp, ss),
+          offsetY: resolveTok(ds.offsetY, "size", sp, ss)
+        }, ds.blurRadius != null && {
+          blurRadius: resolveTok(ds.blurRadius, "size", sp, ss)
+        }), ds.color != null && {
+          color: resolveTok(ds.color, "color", sp, ss)
+        })
+      };
+    }
+    return o;
+  });
 }, propMapper = function(key, value, styleState, disabled, map) {
   if (disabled) return map(key, value);
   if (lastFontFamilyToken = null, !(!isAndroid && key === "elevationAndroid")) {
@@ -2551,13 +2634,13 @@ var shorthandStringProps = {
     }
     styleProps.disableExpandShorthands || key in conf2.shorthands && (key = conf2.shorthands[key]);
     var originalValue = value;
-    if (value != null && (value[0] === "$" ? value = getTokenForKey(key, value, styleProps, styleState) : (
-      /* Handle CSS shorthand strings with embedded $variables (e.g., boxShadow="0 0 10px $red") */
-      key in shorthandStringProps && typeof value == "string" && value.includes("$") ? value = value.replace(/\$[\w.-]+/g, function(token) {
-        var resolved = getTokenForKey("color", token, styleProps, styleState);
-        return resolved != null ? String(resolved) : token;
-      }) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps.resolveValues) : isRemValue(value) && (value = resolveRem(value))
-    )), value != null) {
+    if (value != null && (key === "boxShadow" && (typeof value > "u" ? "undefined" : _type_of$3(value)) === "object" ? value = boxShadowObjResolve(value, styleProps, styleState) : key === "filter" && (typeof value > "u" ? "undefined" : _type_of$3(value)) === "object" ? value = filterObjResolve(value, styleProps, styleState) : typeof value == "string" && value[0] === "$" ? value = getTokenForKey(key, value, styleProps, styleState) : key === "boxShadow" && typeof value == "string" && value.includes("$") ? value = value.replace(/(\$[\w.-]+)/g, function(t2) {
+      var cat = /^\$-?\d/.test(t2) ? "size" : "color", r = getTokenForKey(cat, t2, styleProps, styleState);
+      return r != null ? String(r) : t2;
+    }) : key === "filter" && typeof value == "string" && value.includes("$") ? value = value.replace(/(\$[\w.-]+)/g, function(t2) {
+      var cat = /^\$-?\d/.test(t2) ? "size" : "color", r = getTokenForKey(cat, t2, styleProps, styleState);
+      return r != null ? String(r) : t2;
+    }) : isVariable(value) ? value = resolveVariableValue(key, value, styleProps.resolveValues) : isRemValue(value) && (value = resolveRem(value))), value != null) {
       key === "fontFamily" && lastFontFamilyToken && (styleState.fontFamily = lastFontFamilyToken);
       var expanded = styleProps.noExpand ? null : expandStyle(key, value);
       if (expanded) for (var max = expanded.length, i = 0; i < max; i++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "2.0.0-1768530912818",
+  "version": "2.0.0-1768586279389",
   "type": "module",
   "source": "src/index.tsx",
   "main": "dist/cjs",
@@ -33,18 +33,18 @@
     "native-test.d.ts"
   ],
   "dependencies": {
-    "@tamagui/helpers": "2.0.0-1768530912818",
-    "@tamagui/react-native-media-driver": "2.0.0-1768530912818",
-    "@tamagui/react-native-use-pressable": "2.0.0-1768530912818",
-    "@tamagui/react-native-use-responder-events": "2.0.0-1768530912818",
-    "@tamagui/use-element-layout": "2.0.0-1768530912818",
-    "@tamagui/use-event": "2.0.0-1768530912818",
-    "@tamagui/web": "2.0.0-1768530912818"
+    "@tamagui/helpers": "2.0.0-1768586279389",
+    "@tamagui/react-native-media-driver": "2.0.0-1768586279389",
+    "@tamagui/react-native-use-pressable": "2.0.0-1768586279389",
+    "@tamagui/react-native-use-responder-events": "2.0.0-1768586279389",
+    "@tamagui/use-element-layout": "2.0.0-1768586279389",
+    "@tamagui/use-event": "2.0.0-1768586279389",
+    "@tamagui/web": "2.0.0-1768586279389"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-1768530912818",
-    "@tamagui/native-bundle": "2.0.0-1768530912818",
-    "@tamagui/react-native-web-lite": "2.0.0-1768530912818",
+    "@tamagui/build": "2.0.0-1768586279389",
+    "@tamagui/native-bundle": "2.0.0-1768586279389",
+    "@tamagui/react-native-web-lite": "2.0.0-1768586279389",
     "@testing-library/react": "^16.1.0",
     "csstype": "^3.0.10",
     "react": "*",