tamagui 2.0.0-1768530912818 → 2.0.0-1768586279389

package/dist/native.cjs

@@ -1956,14 +1956,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);
@@ -8850,13 +8850,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,
@@ -8875,13 +8876,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,
@@ -8937,7 +8935,7 @@ var textColors = {
   zIndex: {
     zIndex: true
   },
-  color: __spreadValues({
+  color: __spreadProps(__spreadValues({
     backgroundColor: true,
     borderColor: true,
     borderBlockStartColor: true,
@@ -8953,7 +8951,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,
@@ -9006,7 +9007,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,
@@ -9096,12 +9097,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 = {
@@ -9720,9 +9722,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];
   });
@@ -9731,18 +9782,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$2 = /* @__PURE__ */ new WeakMap(), getVariantExtras = function(styleState) {
   if (cache$2.has(styleState)) return cache$2.get(styleState);
@@ -9882,14 +9932,47 @@ function _type_of$5(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")) {
@@ -9918,13 +10001,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$5(value)) === "object" ? value = boxShadowObjResolve(value, styleProps2, styleState) : key === "filter" && (typeof value > "u" ? "undefined" : _type_of$5(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 max2 = expanded.length, i = 0; i < max2; i++) {
@@ -13037,13 +13120,13 @@ var getElevation = function(size, extras) {
   var {
     theme,
     tokens
-  } = param, num = 0;
+  } = param, num2 = 0;
   if (val === true) {
     var _$val = getVariableValue(tokens.size.true);
-    typeof _$val == "number" ? num = _$val : num = 10;
-  } else num = +val;
-  if (num !== 0) {
-    var [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)], shadow = __spreadValues({
+    typeof _$val == "number" ? num2 = _$val : num2 = 10;
+  } else num2 = +val;
+  if (num2 !== 0) {
+    var [height, shadowRadius] = [Math.round(num2 / 4 + 1), Math.round(num2 / 2 + 2)], shadow = __spreadValues({
       shadowColor: theme.shadowColor,
       shadowRadius,
       shadowOffset: {

package/dist/test.cjs

@@ -2188,14 +2188,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);
@@ -9232,13 +9232,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,
@@ -9257,13 +9258,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,
@@ -9319,7 +9317,7 @@ var textColors = {
   zIndex: {
     zIndex: true
   },
-  color: __spreadValues({
+  color: __spreadProps(__spreadValues({
     backgroundColor: true,
     borderColor: true,
     borderBlockStartColor: true,
@@ -9335,7 +9333,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,
@@ -9388,7 +9389,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,
@@ -9478,12 +9479,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 = {
@@ -10102,9 +10104,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];
   });
@@ -10113,18 +10164,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$2 = /* @__PURE__ */ new WeakMap(), getVariantExtras = function(styleState) {
   if (cache$2.has(styleState)) return cache$2.get(styleState);
@@ -10265,14 +10315,47 @@ function _type_of$5(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")) {
@@ -10301,13 +10384,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$5(value)) === "object" ? value = boxShadowObjResolve(value, styleProps2, styleState) : key === "filter" && (typeof value > "u" ? "undefined" : _type_of$5(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 max2 = expanded.length, i = 0; i < max2; i++) {
@@ -13230,13 +13313,13 @@ var getElevation = function(size, extras) {
   var {
     theme,
     tokens
-  } = param, num = 0;
+  } = param, num2 = 0;
   if (val === true) {
     var _$val = getVariableValue(tokens.size.true);
-    typeof _$val == "number" ? num = _$val : num = 10;
-  } else num = +val;
-  if (num !== 0) {
-    var [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)], shadow = __spreadValues({
+    typeof _$val == "number" ? num2 = _$val : num2 = 10;
+  } else num2 = +val;
+  if (num2 !== 0) {
+    var [height, shadowRadius] = [Math.round(num2 / 4 + 1), Math.round(num2 / 2 + 2)], shadow = __spreadValues({
       shadowColor: theme.shadowColor,
       shadowRadius,
       shadowOffset: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamagui",
-  "version": "2.0.0-1768530912818",
+  "version": "2.0.0-1768586279389",
   "type": "module",
   "description": "Style and UI for React (web and native) meet an optimizing compiler",
   "removeSideEffects": true,
@@ -88,64 +88,64 @@
     }
   },
   "dependencies": {
-    "@tamagui/accordion": "2.0.0-1768530912818",
-    "@tamagui/adapt": "2.0.0-1768530912818",
-    "@tamagui/alert-dialog": "2.0.0-1768530912818",
-    "@tamagui/animate-presence": "2.0.0-1768530912818",
-    "@tamagui/avatar": "2.0.0-1768530912818",
-    "@tamagui/button": "2.0.0-1768530912818",
-    "@tamagui/card": "2.0.0-1768530912818",
-    "@tamagui/checkbox": "2.0.0-1768530912818",
-    "@tamagui/compose-refs": "2.0.0-1768530912818",
-    "@tamagui/constants": "2.0.0-1768530912818",
-    "@tamagui/core": "2.0.0-1768530912818",
-    "@tamagui/create-context": "2.0.0-1768530912818",
-    "@tamagui/dialog": "2.0.0-1768530912818",
-    "@tamagui/elements": "2.0.0-1768530912818",
-    "@tamagui/fake-react-native": "2.0.0-1768530912818",
-    "@tamagui/focusable": "2.0.0-1768530912818",
-    "@tamagui/font-size": "2.0.0-1768530912818",
-    "@tamagui/form": "2.0.0-1768530912818",
-    "@tamagui/get-button-sized": "2.0.0-1768530912818",
-    "@tamagui/get-font-sized": "2.0.0-1768530912818",
-    "@tamagui/get-token": "2.0.0-1768530912818",
-    "@tamagui/group": "2.0.0-1768530912818",
-    "@tamagui/helpers-tamagui": "2.0.0-1768530912818",
-    "@tamagui/image": "2.0.0-1768530912818",
-    "@tamagui/input": "2.0.0-1768530912818",
-    "@tamagui/label": "2.0.0-1768530912818",
-    "@tamagui/linear-gradient": "2.0.0-1768530912818",
-    "@tamagui/list-item": "2.0.0-1768530912818",
-    "@tamagui/polyfill-dev": "2.0.0-1768530912818",
-    "@tamagui/popover": "2.0.0-1768530912818",
-    "@tamagui/popper": "2.0.0-1768530912818",
-    "@tamagui/portal": "2.0.0-1768530912818",
-    "@tamagui/progress": "2.0.0-1768530912818",
-    "@tamagui/radio-group": "2.0.0-1768530912818",
-    "@tamagui/react-native-media-driver": "2.0.0-1768530912818",
-    "@tamagui/scroll-view": "2.0.0-1768530912818",
-    "@tamagui/select": "2.0.0-1768530912818",
-    "@tamagui/separator": "2.0.0-1768530912818",
-    "@tamagui/shapes": "2.0.0-1768530912818",
-    "@tamagui/sheet": "2.0.0-1768530912818",
-    "@tamagui/slider": "2.0.0-1768530912818",
-    "@tamagui/spacer": "2.0.0-1768530912818",
-    "@tamagui/stacks": "2.0.0-1768530912818",
-    "@tamagui/switch": "2.0.0-1768530912818",
-    "@tamagui/tabs": "2.0.0-1768530912818",
-    "@tamagui/text": "2.0.0-1768530912818",
-    "@tamagui/theme": "2.0.0-1768530912818",
-    "@tamagui/toggle-group": "2.0.0-1768530912818",
-    "@tamagui/tooltip": "2.0.0-1768530912818",
-    "@tamagui/use-controllable-state": "2.0.0-1768530912818",
-    "@tamagui/use-debounce": "2.0.0-1768530912818",
-    "@tamagui/use-force-update": "2.0.0-1768530912818",
-    "@tamagui/use-window-dimensions": "2.0.0-1768530912818",
-    "@tamagui/visually-hidden": "2.0.0-1768530912818",
-    "@tamagui/z-index-stack": "2.0.0-1768530912818"
+    "@tamagui/accordion": "2.0.0-1768586279389",
+    "@tamagui/adapt": "2.0.0-1768586279389",
+    "@tamagui/alert-dialog": "2.0.0-1768586279389",
+    "@tamagui/animate-presence": "2.0.0-1768586279389",
+    "@tamagui/avatar": "2.0.0-1768586279389",
+    "@tamagui/button": "2.0.0-1768586279389",
+    "@tamagui/card": "2.0.0-1768586279389",
+    "@tamagui/checkbox": "2.0.0-1768586279389",
+    "@tamagui/compose-refs": "2.0.0-1768586279389",
+    "@tamagui/constants": "2.0.0-1768586279389",
+    "@tamagui/core": "2.0.0-1768586279389",
+    "@tamagui/create-context": "2.0.0-1768586279389",
+    "@tamagui/dialog": "2.0.0-1768586279389",
+    "@tamagui/elements": "2.0.0-1768586279389",
+    "@tamagui/fake-react-native": "2.0.0-1768586279389",
+    "@tamagui/focusable": "2.0.0-1768586279389",
+    "@tamagui/font-size": "2.0.0-1768586279389",
+    "@tamagui/form": "2.0.0-1768586279389",
+    "@tamagui/get-button-sized": "2.0.0-1768586279389",
+    "@tamagui/get-font-sized": "2.0.0-1768586279389",
+    "@tamagui/get-token": "2.0.0-1768586279389",
+    "@tamagui/group": "2.0.0-1768586279389",
+    "@tamagui/helpers-tamagui": "2.0.0-1768586279389",
+    "@tamagui/image": "2.0.0-1768586279389",
+    "@tamagui/input": "2.0.0-1768586279389",
+    "@tamagui/label": "2.0.0-1768586279389",
+    "@tamagui/linear-gradient": "2.0.0-1768586279389",
+    "@tamagui/list-item": "2.0.0-1768586279389",
+    "@tamagui/polyfill-dev": "2.0.0-1768586279389",
+    "@tamagui/popover": "2.0.0-1768586279389",
+    "@tamagui/popper": "2.0.0-1768586279389",
+    "@tamagui/portal": "2.0.0-1768586279389",
+    "@tamagui/progress": "2.0.0-1768586279389",
+    "@tamagui/radio-group": "2.0.0-1768586279389",
+    "@tamagui/react-native-media-driver": "2.0.0-1768586279389",
+    "@tamagui/scroll-view": "2.0.0-1768586279389",
+    "@tamagui/select": "2.0.0-1768586279389",
+    "@tamagui/separator": "2.0.0-1768586279389",
+    "@tamagui/shapes": "2.0.0-1768586279389",
+    "@tamagui/sheet": "2.0.0-1768586279389",
+    "@tamagui/slider": "2.0.0-1768586279389",
+    "@tamagui/spacer": "2.0.0-1768586279389",
+    "@tamagui/stacks": "2.0.0-1768586279389",
+    "@tamagui/switch": "2.0.0-1768586279389",
+    "@tamagui/tabs": "2.0.0-1768586279389",
+    "@tamagui/text": "2.0.0-1768586279389",
+    "@tamagui/theme": "2.0.0-1768586279389",
+    "@tamagui/toggle-group": "2.0.0-1768586279389",
+    "@tamagui/tooltip": "2.0.0-1768586279389",
+    "@tamagui/use-controllable-state": "2.0.0-1768586279389",
+    "@tamagui/use-debounce": "2.0.0-1768586279389",
+    "@tamagui/use-force-update": "2.0.0-1768586279389",
+    "@tamagui/use-window-dimensions": "2.0.0-1768586279389",
+    "@tamagui/visually-hidden": "2.0.0-1768586279389",
+    "@tamagui/z-index-stack": "2.0.0-1768586279389"
   },
   "devDependencies": {
-    "@tamagui/build": "2.0.0-1768530912818",
+    "@tamagui/build": "2.0.0-1768586279389",
     "react": "*",
     "react-native": "0.81.5",
     "react-native-web": "^0.21.0"