@tamagui/web 1.4.0 → 1.5.0

package/dist/esm/helpers/normalizeColor.js

@@ -1,35 +1,32 @@
 import { isWeb } from "@tamagui/constants";
 import * as NCC from "@tamagui/normalize-css-color";
 const rgba = NCC.rgba;
-const normalizeColor = (color, opacity) => {
-  if (color === null || color === void 0) {
+const names = NCC.names;
+const normalizeColor = (color, opacity = 1) => {
+  if (!color)
     return;
-  }
-  if (color === "transparent") {
+  if (color === "transparent")
     return `rgba(0,0,0,0)`;
-  }
-  if (color[0] === "$" || isWeb && (webColors[color] || color[0] === "_" || color.startsWith("var("))) {
+  if (color[0] === "$")
+    return color;
+  if (isWeb && opacity === 1) {
     return color;
   }
   const colorProcessed = NCC.normalizeCSSColor(color);
-  if (colorProcessed !== null) {
+  if (colorProcessed) {
     const { r, g, b, a } = rgba(colorProcessed);
     return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`;
   }
-  if (isWeb) {
-    return color;
-  } else {
+  if (process.env.TAMAGUI_TARGET === "native") {
     if (process.env.NODE_ENV === "development") {
       console.warn(`Unknown color value: ${color}`);
     }
+    return;
   }
-};
-const webColors = {
-  currentColor: true,
-  currentcolor: true,
-  inherit: true
+  return color;
 };
 export {
+  names,
   normalizeColor,
   rgba
 };

package/dist/esm/helpers/normalizeColor.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/normalizeColor.ts"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport * as NCC from '@tamagui/normalize-css-color'\n\nexport const rgba = NCC.rgba\n\nexport const normalizeColor = (color?: string | null, opacity?: number) => {\n  if (color === null || color === undefined) {\n    return\n  }\n  if (color === 'transparent') {\n    return `rgba(0,0,0,0)`\n  }\n  if (\n    color[0] === '$' ||\n    (isWeb && (webColors[color] || color[0] === '_' || color.startsWith('var(')))\n  ) {\n    return color\n  }\n  const colorProcessed = NCC.normalizeCSSColor(color)\n  if (colorProcessed !== null) {\n    const { r, g, b, a } = rgba(colorProcessed)\n    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`\n  }\n\n  if (isWeb) {\n    return color\n  } else {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(`Unknown color value: ${color}`)\n    }\n  }\n}\n\nconst webColors = {\n  currentColor: true,\n  currentcolor: true,\n  inherit: true,\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,YAAY,SAAS;AAEd,MAAM,OAAO,IAAI;AAEjB,MAAM,iBAAiB,CAAC,OAAuB,YAAqB;AACzE,MAAI,UAAU,QAAQ,UAAU,QAAW;AACzC;AAAA,EACF;AACA,MAAI,UAAU,eAAe;AAC3B,WAAO;AAAA,EACT;AACA,MACE,MAAM,CAAC,MAAM,OACZ,UAAU,UAAU,KAAK,KAAK,MAAM,CAAC,MAAM,OAAO,MAAM,WAAW,MAAM,IAC1E;AACA,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,IAAI,kBAAkB,KAAK;AAClD,MAAI,mBAAmB,MAAM;AAC3B,UAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,cAAc;AAC1C,WAAO,QAAQ,KAAK,KAAK,MAAM,WAAW,GAAG,QAAQ,CAAC;AAAA,EACxD;AAEA,MAAI,OAAO;AACT,WAAO;AAAA,EACT,OAAO;AACL,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,KAAK,wBAAwB,OAAO;AAAA,IAC9C;AAAA,EACF;AACF;AAEA,MAAM,YAAY;AAAA,EAChB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,SAAS;AACX;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport * as NCC from '@tamagui/normalize-css-color'\n\nexport const rgba = NCC.rgba\nexport const names = NCC.names\n\nexport const normalizeColor = (color?: string | null, opacity = 1) => {\n  if (!color) return\n  if (color === 'transparent') return `rgba(0,0,0,0)`\n  if (color[0] === '$') return color\n  if (isWeb && opacity === 1) {\n    return color\n  }\n  const colorProcessed = NCC.normalizeCSSColor(color)\n  if (colorProcessed) {\n    const { r, g, b, a } = rgba(colorProcessed)\n    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`\n  }\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(`Unknown color value: ${color}`)\n    }\n    // avoids errors\n    return\n  }\n  return color\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,YAAY,SAAS;AAEd,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAElB,MAAM,iBAAiB,CAAC,OAAuB,UAAU,MAAM;AACpE,MAAI,CAAC;AAAO;AACZ,MAAI,UAAU;AAAe,WAAO;AACpC,MAAI,MAAM,CAAC,MAAM;AAAK,WAAO;AAC7B,MAAI,SAAS,YAAY,GAAG;AAC1B,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,IAAI,kBAAkB,KAAK;AAClD,MAAI,gBAAgB;AAClB,UAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,cAAc;AAC1C,WAAO,QAAQ,KAAK,KAAK,MAAM,WAAW,GAAG,QAAQ,CAAC;AAAA,EACxD;AACA,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,KAAK,wBAAwB,OAAO;AAAA,IAC9C;AAEA;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/helpers/normalizeColor.mjs

@@ -1,35 +1,32 @@
 import { isWeb } from "@tamagui/constants";
 import * as NCC from "@tamagui/normalize-css-color";
 const rgba = NCC.rgba;
-const normalizeColor = (color, opacity) => {
-  if (color === null || color === void 0) {
+const names = NCC.names;
+const normalizeColor = (color, opacity = 1) => {
+  if (!color)
     return;
-  }
-  if (color === "transparent") {
+  if (color === "transparent")
     return `rgba(0,0,0,0)`;
-  }
-  if (color[0] === "$" || isWeb && (webColors[color] || color[0] === "_" || color.startsWith("var("))) {
+  if (color[0] === "$")
+    return color;
+  if (isWeb && opacity === 1) {
     return color;
   }
   const colorProcessed = NCC.normalizeCSSColor(color);
-  if (colorProcessed !== null) {
+  if (colorProcessed) {
     const { r, g, b, a } = rgba(colorProcessed);
     return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`;
   }
-  if (isWeb) {
-    return color;
-  } else {
+  if (process.env.TAMAGUI_TARGET === "native") {
     if (process.env.NODE_ENV === "development") {
       console.warn(`Unknown color value: ${color}`);
     }
+    return;
   }
-};
-const webColors = {
-  currentColor: true,
-  currentcolor: true,
-  inherit: true
+  return color;
 };
 export {
+  names,
   normalizeColor,
   rgba
 };

package/dist/esm/helpers/normalizeColor.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/normalizeColor.ts"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport * as NCC from '@tamagui/normalize-css-color'\n\nexport const rgba = NCC.rgba\n\nexport const normalizeColor = (color?: string | null, opacity?: number) => {\n  if (color === null || color === undefined) {\n    return\n  }\n  if (color === 'transparent') {\n    return `rgba(0,0,0,0)`\n  }\n  if (\n    color[0] === '$' ||\n    (isWeb && (webColors[color] || color[0] === '_' || color.startsWith('var(')))\n  ) {\n    return color\n  }\n  const colorProcessed = NCC.normalizeCSSColor(color)\n  if (colorProcessed !== null) {\n    const { r, g, b, a } = rgba(colorProcessed)\n    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`\n  }\n\n  if (isWeb) {\n    return color\n  } else {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(`Unknown color value: ${color}`)\n    }\n  }\n}\n\nconst webColors = {\n  currentColor: true,\n  currentcolor: true,\n  inherit: true,\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,YAAY,SAAS;AAEd,MAAM,OAAO,IAAI;AAEjB,MAAM,iBAAiB,CAAC,OAAuB,YAAqB;AACzE,MAAI,UAAU,QAAQ,UAAU,QAAW;AACzC;AAAA,EACF;AACA,MAAI,UAAU,eAAe;AAC3B,WAAO;AAAA,EACT;AACA,MACE,MAAM,CAAC,MAAM,OACZ,UAAU,UAAU,KAAK,KAAK,MAAM,CAAC,MAAM,OAAO,MAAM,WAAW,MAAM,IAC1E;AACA,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,IAAI,kBAAkB,KAAK;AAClD,MAAI,mBAAmB,MAAM;AAC3B,UAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,cAAc;AAC1C,WAAO,QAAQ,KAAK,KAAK,MAAM,WAAW,GAAG,QAAQ,CAAC;AAAA,EACxD;AAEA,MAAI,OAAO;AACT,WAAO;AAAA,EACT,OAAO;AACL,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,KAAK,wBAAwB,OAAO;AAAA,IAC9C;AAAA,EACF;AACF;AAEA,MAAM,YAAY;AAAA,EAChB,cAAc;AAAA,EACd,cAAc;AAAA,EACd,SAAS;AACX;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport * as NCC from '@tamagui/normalize-css-color'\n\nexport const rgba = NCC.rgba\nexport const names = NCC.names\n\nexport const normalizeColor = (color?: string | null, opacity = 1) => {\n  if (!color) return\n  if (color === 'transparent') return `rgba(0,0,0,0)`\n  if (color[0] === '$') return color\n  if (isWeb && opacity === 1) {\n    return color\n  }\n  const colorProcessed = NCC.normalizeCSSColor(color)\n  if (colorProcessed) {\n    const { r, g, b, a } = rgba(colorProcessed)\n    return `rgba(${r},${g},${b},${(opacity ?? a).toFixed(2)})`\n  }\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn(`Unknown color value: ${color}`)\n    }\n    // avoids errors\n    return\n  }\n  return color\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,YAAY,SAAS;AAEd,MAAM,OAAO,IAAI;AACjB,MAAM,QAAQ,IAAI;AAElB,MAAM,iBAAiB,CAAC,OAAuB,UAAU,MAAM;AACpE,MAAI,CAAC;AAAO;AACZ,MAAI,UAAU;AAAe,WAAO;AACpC,MAAI,MAAM,CAAC,MAAM;AAAK,WAAO;AAC7B,MAAI,SAAS,YAAY,GAAG;AAC1B,WAAO;AAAA,EACT;AACA,QAAM,iBAAiB,IAAI,kBAAkB,KAAK;AAClD,MAAI,gBAAgB;AAClB,UAAM,EAAE,GAAG,GAAG,GAAG,EAAE,IAAI,KAAK,cAAc;AAC1C,WAAO,QAAQ,KAAK,KAAK,MAAM,WAAW,GAAG,QAAQ,CAAC;AAAA,EACxD;AACA,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,KAAK,wBAAwB,OAAO;AAAA,IAC9C;AAEA;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/helpers/normalizeValueWithProperty.js

@@ -1,38 +1,26 @@
 import { isWeb } from "@tamagui/constants";
 import { getAllSelectors } from "./insertStyleRule";
-import { normalizeColor } from "./normalizeColor";
+import { names, normalizeColor } from "./normalizeColor";
+import { normalizeStylePropKeys } from "./normalizeStylePropKeys";
 const colorCache = {};
 function normalizeValueWithProperty(value, property) {
-  const cached = colorCache[value];
-  if (cached !== void 0) {
-    return cached;
+  if (value in colorCache) {
+    return colorCache[value];
   }
   if (property && property in unitlessNumbers) {
     return value;
   }
   let res = value;
-  if (process.env.TAMAGUI_TARGET === "web" && typeof value === "number" && (property === void 0 || !(property in unitlessNumbers || property in stringNumbers))) {
+  if (property && (property in normalizeStylePropKeys || value in names)) {
+    res = normalizeColor(value);
+    colorCache[value] = res;
+  } else if (process.env.TAMAGUI_TARGET === "web" && typeof value === "number" && (property === void 0 || !(property in unitlessNumbers || property in stringNumbers))) {
     res = `${value}px`;
   } else if (isWeb && property !== void 0 && property in stringNumbers) {
     res = `${res}`;
-  } else if (property && property in colorProps) {
-    res = normalizeColor(value);
-    colorCache[value] = res;
   }
   return res;
 }
-const colorProps = {
-  backgroundColor: true,
-  borderColor: true,
-  borderTopColor: true,
-  borderRightColor: true,
-  borderBottomColor: true,
-  borderLeftColor: true,
-  color: true,
-  shadowColor: true,
-  textDecorationColor: true,
-  textShadowColor: true
-};
 const stringNumbers = {
   zIndex: true
 };
@@ -46,6 +34,7 @@ const unitlessNumbers = {
   columnCount: true,
   flex: true,
   flexGrow: true,
+  flexBasis: true,
   flexOrder: true,
   flexPositive: true,
   flexShrink: true,

package/dist/esm/helpers/normalizeValueWithProperty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/normalizeValueWithProperty.ts"],
-  "sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { isWeb } from '@tamagui/constants'\n\nimport { getAllSelectors } from './insertStyleRule'\nimport { normalizeColor } from './normalizeColor'\n\nconst colorCache = {}\n\nexport function normalizeValueWithProperty(value: any, property?: string): any {\n  const cached = colorCache[value]\n  if (cached !== undefined) {\n    return cached\n  }\n  if (property && property in unitlessNumbers) {\n    return value\n  }\n  let res = value\n  if (\n    process.env.TAMAGUI_TARGET === 'web' &&\n    typeof value === 'number' &&\n    (property === undefined ||\n      !(property in unitlessNumbers || property in stringNumbers))\n  ) {\n    res = `${value}px`\n  } else if (isWeb && property !== undefined && property in stringNumbers) {\n    res = `${res}`\n  } else if (property && property in colorProps) {\n    res = normalizeColor(value)\n    colorCache[value] = res\n  }\n  return res\n}\n\n// TODO react-native-web-lite\n\nconst colorProps = {\n  backgroundColor: true,\n  borderColor: true,\n  borderTopColor: true,\n  borderRightColor: true,\n  borderBottomColor: true,\n  borderLeftColor: true,\n  color: true,\n  shadowColor: true,\n  textDecorationColor: true,\n  textShadowColor: true,\n}\n\nconst stringNumbers = {\n  zIndex: true,\n}\n\nconst unitlessNumbers = {\n  WebkitLineClamp: true,\n  animationIterationCount: true,\n  aspectRatio: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  columnCount: true,\n  flex: true,\n  flexGrow: true,\n  flexOrder: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  fontWeight: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowGap: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnGap: true,\n  gridColumnStart: true,\n  lineClamp: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zoom: true,\n  scale: true,\n  scaleX: true,\n  scaleY: true,\n  scaleZ: true,\n  shadowOpacity: true,\n}\n\n// getting real values for colors for animations (reverse mapped from CSS)\n// this isn't beautiful, but will do relatively fine performance for now\nconst rcache = {}\nexport function reverseMapClassNameToValue(key: string, className: string) {\n  const selectors = getAllSelectors()\n  const cssRule = selectors[className]\n  if (rcache[cssRule]) return rcache[cssRule]\n  if (!cssRule) {\n    return\n  }\n  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '').trim()\n  let res: any\n  if (cssVal.startsWith('var(')) {\n    res = cssVal\n  } else if (unitlessNumbers[key]) {\n    res = +cssVal\n  } else if (cssVal.endsWith('px')) {\n    res = +cssVal.replace('px', '')\n  } else {\n    res = cssVal\n  }\n  rcache[cssRule] = res\n  if (process.env.NODE_ENV === 'development') {\n    // ensure we are parsing properly\n    if (typeof res === 'number' && isNaN(res)) {\n      // eslint-disable-next-line no-console\n      console.log('Tamagui invalid parsed value, NaN:', {\n        res,\n        cssVal,\n        cssRule,\n        key,\n        className,\n      })\n    }\n  }\n  return res\n}\n"],
-  "mappings": "AAKA,SAAS,aAAa;AAEtB,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAE/B,MAAM,aAAa,CAAC;AAEb,SAAS,2BAA2B,OAAY,UAAwB;AAC7E,QAAM,SAAS,WAAW,KAAK;AAC/B,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,EACT;AACA,MAAI,YAAY,YAAY,iBAAiB;AAC3C,WAAO;AAAA,EACT;AACA,MAAI,MAAM;AACV,MACE,QAAQ,IAAI,mBAAmB,SAC/B,OAAO,UAAU,aAChB,aAAa,UACZ,EAAE,YAAY,mBAAmB,YAAY,iBAC/C;AACA,UAAM,GAAG;AAAA,EACX,WAAW,SAAS,aAAa,UAAa,YAAY,eAAe;AACvE,UAAM,GAAG;AAAA,EACX,WAAW,YAAY,YAAY,YAAY;AAC7C,UAAM,eAAe,KAAK;AAC1B,eAAW,KAAK,IAAI;AAAA,EACtB;AACA,SAAO;AACT;AAIA,MAAM,aAAa;AAAA,EACjB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,iBAAiB;AACnB;AAEA,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AACV;AAEA,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AACjB;AAIA,MAAM,SAAS,CAAC;AACT,SAAS,2BAA2B,KAAa,WAAmB;AACzE,QAAM,YAAY,gBAAgB;AAClC,QAAM,UAAU,UAAU,SAAS;AACnC,MAAI,OAAO,OAAO;AAAG,WAAO,OAAO,OAAO;AAC1C,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AACA,QAAM,SAAS,QAAQ,QAAQ,OAAO,EAAE,EAAE,QAAQ,OAAO,EAAE,EAAE,KAAK;AAClE,MAAI;AACJ,MAAI,OAAO,WAAW,MAAM,GAAG;AAC7B,UAAM;AAAA,EACR,WAAW,gBAAgB,GAAG,GAAG;AAC/B,UAAM,CAAC;AAAA,EACT,WAAW,OAAO,SAAS,IAAI,GAAG;AAChC,UAAM,CAAC,OAAO,QAAQ,MAAM,EAAE;AAAA,EAChC,OAAO;AACL,UAAM;AAAA,EACR;AACA,SAAO,OAAO,IAAI;AAClB,MAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,QAAI,OAAO,QAAQ,YAAY,MAAM,GAAG,GAAG;AAEzC,cAAQ,IAAI,sCAAsC;AAAA,QAChD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { isWeb } from '@tamagui/constants'\n\nimport { getAllSelectors } from './insertStyleRule'\nimport { names, normalizeColor } from './normalizeColor'\nimport { normalizeStylePropKeys } from './normalizeStylePropKeys'\n\nconst colorCache = {}\n\nexport function normalizeValueWithProperty(value: any, property?: string): any {\n  if (value in colorCache) {\n    return colorCache[value]\n  }\n  if (property && property in unitlessNumbers) {\n    return value\n  }\n  let res = value\n  if (property && (property in normalizeStylePropKeys || value in names)) {\n    res = normalizeColor(value)\n    colorCache[value] = res\n  } else if (\n    process.env.TAMAGUI_TARGET === 'web' &&\n    typeof value === 'number' &&\n    (property === undefined ||\n      !(property in unitlessNumbers || property in stringNumbers))\n  ) {\n    res = `${value}px`\n  } else if (isWeb && property !== undefined && property in stringNumbers) {\n    res = `${res}`\n  }\n  return res\n}\n\nconst stringNumbers = {\n  zIndex: true,\n}\n\nconst unitlessNumbers = {\n  WebkitLineClamp: true,\n  animationIterationCount: true,\n  aspectRatio: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  columnCount: true,\n  flex: true,\n  flexGrow: true,\n  flexBasis: true,\n  flexOrder: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  fontWeight: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowGap: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnGap: true,\n  gridColumnStart: true,\n  lineClamp: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zoom: true,\n  scale: true,\n  scaleX: true,\n  scaleY: true,\n  scaleZ: true,\n  shadowOpacity: true,\n}\n\n// getting real values for colors for animations (reverse mapped from CSS)\n// this isn't beautiful, but will do relatively fine performance for now\nconst rcache = {}\nexport function reverseMapClassNameToValue(key: string, className: string) {\n  const selectors = getAllSelectors()\n  const cssRule = selectors[className]\n  if (rcache[cssRule]) return rcache[cssRule]\n  if (!cssRule) {\n    return\n  }\n  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '').trim()\n  let res: any\n  if (cssVal.startsWith('var(')) {\n    res = cssVal\n  } else if (unitlessNumbers[key]) {\n    res = +cssVal\n  } else if (cssVal.endsWith('px')) {\n    res = +cssVal.replace('px', '')\n  } else {\n    res = cssVal\n  }\n  rcache[cssRule] = res\n  if (process.env.NODE_ENV === 'development') {\n    // ensure we are parsing properly\n    if (typeof res === 'number' && isNaN(res)) {\n      // eslint-disable-next-line no-console\n      console.log('Tamagui invalid parsed value, NaN:', {\n        res,\n        cssVal,\n        cssRule,\n        key,\n        className,\n      })\n    }\n  }\n  return res\n}\n"],
+  "mappings": "AAKA,SAAS,aAAa;AAEtB,SAAS,uBAAuB;AAChC,SAAS,OAAO,sBAAsB;AACtC,SAAS,8BAA8B;AAEvC,MAAM,aAAa,CAAC;AAEb,SAAS,2BAA2B,OAAY,UAAwB;AAC7E,MAAI,SAAS,YAAY;AACvB,WAAO,WAAW,KAAK;AAAA,EACzB;AACA,MAAI,YAAY,YAAY,iBAAiB;AAC3C,WAAO;AAAA,EACT;AACA,MAAI,MAAM;AACV,MAAI,aAAa,YAAY,0BAA0B,SAAS,QAAQ;AACtE,UAAM,eAAe,KAAK;AAC1B,eAAW,KAAK,IAAI;AAAA,EACtB,WACE,QAAQ,IAAI,mBAAmB,SAC/B,OAAO,UAAU,aAChB,aAAa,UACZ,EAAE,YAAY,mBAAmB,YAAY,iBAC/C;AACA,UAAM,GAAG;AAAA,EACX,WAAW,SAAS,aAAa,UAAa,YAAY,eAAe;AACvE,UAAM,GAAG;AAAA,EACX;AACA,SAAO;AACT;AAEA,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AACV;AAEA,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AACjB;AAIA,MAAM,SAAS,CAAC;AACT,SAAS,2BAA2B,KAAa,WAAmB;AACzE,QAAM,YAAY,gBAAgB;AAClC,QAAM,UAAU,UAAU,SAAS;AACnC,MAAI,OAAO,OAAO;AAAG,WAAO,OAAO,OAAO;AAC1C,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AACA,QAAM,SAAS,QAAQ,QAAQ,OAAO,EAAE,EAAE,QAAQ,OAAO,EAAE,EAAE,KAAK;AAClE,MAAI;AACJ,MAAI,OAAO,WAAW,MAAM,GAAG;AAC7B,UAAM;AAAA,EACR,WAAW,gBAAgB,GAAG,GAAG;AAC/B,UAAM,CAAC;AAAA,EACT,WAAW,OAAO,SAAS,IAAI,GAAG;AAChC,UAAM,CAAC,OAAO,QAAQ,MAAM,EAAE;AAAA,EAChC,OAAO;AACL,UAAM;AAAA,EACR;AACA,SAAO,OAAO,IAAI;AAClB,MAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,QAAI,OAAO,QAAQ,YAAY,MAAM,GAAG,GAAG;AAEzC,cAAQ,IAAI,sCAAsC;AAAA,QAChD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/helpers/normalizeValueWithProperty.mjs

@@ -1,38 +1,26 @@
 import { isWeb } from "@tamagui/constants";
 import { getAllSelectors } from "./insertStyleRule";
-import { normalizeColor } from "./normalizeColor";
+import { names, normalizeColor } from "./normalizeColor";
+import { normalizeStylePropKeys } from "./normalizeStylePropKeys";
 const colorCache = {};
 function normalizeValueWithProperty(value, property) {
-  const cached = colorCache[value];
-  if (cached !== void 0) {
-    return cached;
+  if (value in colorCache) {
+    return colorCache[value];
   }
   if (property && property in unitlessNumbers) {
     return value;
   }
   let res = value;
-  if (process.env.TAMAGUI_TARGET === "web" && typeof value === "number" && (property === void 0 || !(property in unitlessNumbers || property in stringNumbers))) {
+  if (property && (property in normalizeStylePropKeys || value in names)) {
+    res = normalizeColor(value);
+    colorCache[value] = res;
+  } else if (process.env.TAMAGUI_TARGET === "web" && typeof value === "number" && (property === void 0 || !(property in unitlessNumbers || property in stringNumbers))) {
     res = `${value}px`;
   } else if (isWeb && property !== void 0 && property in stringNumbers) {
     res = `${res}`;
-  } else if (property && property in colorProps) {
-    res = normalizeColor(value);
-    colorCache[value] = res;
   }
   return res;
 }
-const colorProps = {
-  backgroundColor: true,
-  borderColor: true,
-  borderTopColor: true,
-  borderRightColor: true,
-  borderBottomColor: true,
-  borderLeftColor: true,
-  color: true,
-  shadowColor: true,
-  textDecorationColor: true,
-  textShadowColor: true
-};
 const stringNumbers = {
   zIndex: true
 };
@@ -46,6 +34,7 @@ const unitlessNumbers = {
   columnCount: true,
   flex: true,
   flexGrow: true,
+  flexBasis: true,
   flexOrder: true,
   flexPositive: true,
   flexShrink: true,

package/dist/esm/helpers/normalizeValueWithProperty.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/normalizeValueWithProperty.ts"],
-  "sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { isWeb } from '@tamagui/constants'\n\nimport { getAllSelectors } from './insertStyleRule'\nimport { normalizeColor } from './normalizeColor'\n\nconst colorCache = {}\n\nexport function normalizeValueWithProperty(value: any, property?: string): any {\n  const cached = colorCache[value]\n  if (cached !== undefined) {\n    return cached\n  }\n  if (property && property in unitlessNumbers) {\n    return value\n  }\n  let res = value\n  if (\n    process.env.TAMAGUI_TARGET === 'web' &&\n    typeof value === 'number' &&\n    (property === undefined ||\n      !(property in unitlessNumbers || property in stringNumbers))\n  ) {\n    res = `${value}px`\n  } else if (isWeb && property !== undefined && property in stringNumbers) {\n    res = `${res}`\n  } else if (property && property in colorProps) {\n    res = normalizeColor(value)\n    colorCache[value] = res\n  }\n  return res\n}\n\n// TODO react-native-web-lite\n\nconst colorProps = {\n  backgroundColor: true,\n  borderColor: true,\n  borderTopColor: true,\n  borderRightColor: true,\n  borderBottomColor: true,\n  borderLeftColor: true,\n  color: true,\n  shadowColor: true,\n  textDecorationColor: true,\n  textShadowColor: true,\n}\n\nconst stringNumbers = {\n  zIndex: true,\n}\n\nconst unitlessNumbers = {\n  WebkitLineClamp: true,\n  animationIterationCount: true,\n  aspectRatio: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  columnCount: true,\n  flex: true,\n  flexGrow: true,\n  flexOrder: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  fontWeight: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowGap: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnGap: true,\n  gridColumnStart: true,\n  lineClamp: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zoom: true,\n  scale: true,\n  scaleX: true,\n  scaleY: true,\n  scaleZ: true,\n  shadowOpacity: true,\n}\n\n// getting real values for colors for animations (reverse mapped from CSS)\n// this isn't beautiful, but will do relatively fine performance for now\nconst rcache = {}\nexport function reverseMapClassNameToValue(key: string, className: string) {\n  const selectors = getAllSelectors()\n  const cssRule = selectors[className]\n  if (rcache[cssRule]) return rcache[cssRule]\n  if (!cssRule) {\n    return\n  }\n  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '').trim()\n  let res: any\n  if (cssVal.startsWith('var(')) {\n    res = cssVal\n  } else if (unitlessNumbers[key]) {\n    res = +cssVal\n  } else if (cssVal.endsWith('px')) {\n    res = +cssVal.replace('px', '')\n  } else {\n    res = cssVal\n  }\n  rcache[cssRule] = res\n  if (process.env.NODE_ENV === 'development') {\n    // ensure we are parsing properly\n    if (typeof res === 'number' && isNaN(res)) {\n      // eslint-disable-next-line no-console\n      console.log('Tamagui invalid parsed value, NaN:', {\n        res,\n        cssVal,\n        cssRule,\n        key,\n        className,\n      })\n    }\n  }\n  return res\n}\n"],
-  "mappings": "AAKA,SAAS,aAAa;AAEtB,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAE/B,MAAM,aAAa,CAAC;AAEb,SAAS,2BAA2B,OAAY,UAAwB;AAC7E,QAAM,SAAS,WAAW,KAAK;AAC/B,MAAI,WAAW,QAAW;AACxB,WAAO;AAAA,EACT;AACA,MAAI,YAAY,YAAY,iBAAiB;AAC3C,WAAO;AAAA,EACT;AACA,MAAI,MAAM;AACV,MACE,QAAQ,IAAI,mBAAmB,SAC/B,OAAO,UAAU,aAChB,aAAa,UACZ,EAAE,YAAY,mBAAmB,YAAY,iBAC/C;AACA,UAAM,GAAG;AAAA,EACX,WAAW,SAAS,aAAa,UAAa,YAAY,eAAe;AACvE,UAAM,GAAG;AAAA,EACX,WAAW,YAAY,YAAY,YAAY;AAC7C,UAAM,eAAe,KAAK;AAC1B,eAAW,KAAK,IAAI;AAAA,EACtB;AACA,SAAO;AACT;AAIA,MAAM,aAAa;AAAA,EACjB,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,OAAO;AAAA,EACP,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,iBAAiB;AACnB;AAEA,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AACV;AAEA,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AACjB;AAIA,MAAM,SAAS,CAAC;AACT,SAAS,2BAA2B,KAAa,WAAmB;AACzE,QAAM,YAAY,gBAAgB;AAClC,QAAM,UAAU,UAAU,SAAS;AACnC,MAAI,OAAO,OAAO;AAAG,WAAO,OAAO,OAAO;AAC1C,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AACA,QAAM,SAAS,QAAQ,QAAQ,OAAO,EAAE,EAAE,QAAQ,OAAO,EAAE,EAAE,KAAK;AAClE,MAAI;AACJ,MAAI,OAAO,WAAW,MAAM,GAAG;AAC7B,UAAM;AAAA,EACR,WAAW,gBAAgB,GAAG,GAAG;AAC/B,UAAM,CAAC;AAAA,EACT,WAAW,OAAO,SAAS,IAAI,GAAG;AAChC,UAAM,CAAC,OAAO,QAAQ,MAAM,EAAE;AAAA,EAChC,OAAO;AACL,UAAM;AAAA,EACR;AACA,SAAO,OAAO,IAAI;AAClB,MAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,QAAI,OAAO,QAAQ,YAAY,MAAM,GAAG,GAAG;AAEzC,cAAQ,IAAI,sCAAsC;AAAA,QAChD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { isWeb } from '@tamagui/constants'\n\nimport { getAllSelectors } from './insertStyleRule'\nimport { names, normalizeColor } from './normalizeColor'\nimport { normalizeStylePropKeys } from './normalizeStylePropKeys'\n\nconst colorCache = {}\n\nexport function normalizeValueWithProperty(value: any, property?: string): any {\n  if (value in colorCache) {\n    return colorCache[value]\n  }\n  if (property && property in unitlessNumbers) {\n    return value\n  }\n  let res = value\n  if (property && (property in normalizeStylePropKeys || value in names)) {\n    res = normalizeColor(value)\n    colorCache[value] = res\n  } else if (\n    process.env.TAMAGUI_TARGET === 'web' &&\n    typeof value === 'number' &&\n    (property === undefined ||\n      !(property in unitlessNumbers || property in stringNumbers))\n  ) {\n    res = `${value}px`\n  } else if (isWeb && property !== undefined && property in stringNumbers) {\n    res = `${res}`\n  }\n  return res\n}\n\nconst stringNumbers = {\n  zIndex: true,\n}\n\nconst unitlessNumbers = {\n  WebkitLineClamp: true,\n  animationIterationCount: true,\n  aspectRatio: true,\n  borderImageOutset: true,\n  borderImageSlice: true,\n  borderImageWidth: true,\n  columnCount: true,\n  flex: true,\n  flexGrow: true,\n  flexBasis: true,\n  flexOrder: true,\n  flexPositive: true,\n  flexShrink: true,\n  flexNegative: true,\n  fontWeight: true,\n  gridRow: true,\n  gridRowEnd: true,\n  gridRowGap: true,\n  gridRowStart: true,\n  gridColumn: true,\n  gridColumnEnd: true,\n  gridColumnGap: true,\n  gridColumnStart: true,\n  lineClamp: true,\n  opacity: true,\n  order: true,\n  orphans: true,\n  tabSize: true,\n  widows: true,\n  zoom: true,\n  scale: true,\n  scaleX: true,\n  scaleY: true,\n  scaleZ: true,\n  shadowOpacity: true,\n}\n\n// getting real values for colors for animations (reverse mapped from CSS)\n// this isn't beautiful, but will do relatively fine performance for now\nconst rcache = {}\nexport function reverseMapClassNameToValue(key: string, className: string) {\n  const selectors = getAllSelectors()\n  const cssRule = selectors[className]\n  if (rcache[cssRule]) return rcache[cssRule]\n  if (!cssRule) {\n    return\n  }\n  const cssVal = cssRule.replace(/.*:/, '').replace(/;.*/, '').trim()\n  let res: any\n  if (cssVal.startsWith('var(')) {\n    res = cssVal\n  } else if (unitlessNumbers[key]) {\n    res = +cssVal\n  } else if (cssVal.endsWith('px')) {\n    res = +cssVal.replace('px', '')\n  } else {\n    res = cssVal\n  }\n  rcache[cssRule] = res\n  if (process.env.NODE_ENV === 'development') {\n    // ensure we are parsing properly\n    if (typeof res === 'number' && isNaN(res)) {\n      // eslint-disable-next-line no-console\n      console.log('Tamagui invalid parsed value, NaN:', {\n        res,\n        cssVal,\n        cssRule,\n        key,\n        className,\n      })\n    }\n  }\n  return res\n}\n"],
+  "mappings": "AAKA,SAAS,aAAa;AAEtB,SAAS,uBAAuB;AAChC,SAAS,OAAO,sBAAsB;AACtC,SAAS,8BAA8B;AAEvC,MAAM,aAAa,CAAC;AAEb,SAAS,2BAA2B,OAAY,UAAwB;AAC7E,MAAI,SAAS,YAAY;AACvB,WAAO,WAAW,KAAK;AAAA,EACzB;AACA,MAAI,YAAY,YAAY,iBAAiB;AAC3C,WAAO;AAAA,EACT;AACA,MAAI,MAAM;AACV,MAAI,aAAa,YAAY,0BAA0B,SAAS,QAAQ;AACtE,UAAM,eAAe,KAAK;AAC1B,eAAW,KAAK,IAAI;AAAA,EACtB,WACE,QAAQ,IAAI,mBAAmB,SAC/B,OAAO,UAAU,aAChB,aAAa,UACZ,EAAE,YAAY,mBAAmB,YAAY,iBAC/C;AACA,UAAM,GAAG;AAAA,EACX,WAAW,SAAS,aAAa,UAAa,YAAY,eAAe;AACvE,UAAM,GAAG;AAAA,EACX;AACA,SAAO;AACT;AAEA,MAAM,gBAAgB;AAAA,EACpB,QAAQ;AACV;AAEA,MAAM,kBAAkB;AAAA,EACtB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,aAAa;AAAA,EACb,MAAM;AAAA,EACN,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,eAAe;AAAA,EACf,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,eAAe;AACjB;AAIA,MAAM,SAAS,CAAC;AACT,SAAS,2BAA2B,KAAa,WAAmB;AACzE,QAAM,YAAY,gBAAgB;AAClC,QAAM,UAAU,UAAU,SAAS;AACnC,MAAI,OAAO,OAAO;AAAG,WAAO,OAAO,OAAO;AAC1C,MAAI,CAAC,SAAS;AACZ;AAAA,EACF;AACA,QAAM,SAAS,QAAQ,QAAQ,OAAO,EAAE,EAAE,QAAQ,OAAO,EAAE,EAAE,KAAK;AAClE,MAAI;AACJ,MAAI,OAAO,WAAW,MAAM,GAAG;AAC7B,UAAM;AAAA,EACR,WAAW,gBAAgB,GAAG,GAAG;AAC/B,UAAM,CAAC;AAAA,EACT,WAAW,OAAO,SAAS,IAAI,GAAG;AAChC,UAAM,CAAC,OAAO,QAAQ,MAAM,EAAE;AAAA,EAChC,OAAO;AACL,UAAM;AAAA,EACR;AACA,SAAO,OAAO,IAAI;AAClB,MAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,QAAI,OAAO,QAAQ,YAAY,MAAM,GAAG,GAAG;AAEzC,cAAQ,IAAI,sCAAsC;AAAA,QAChD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/helpers/themeable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themeable.tsx"],
-  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  themeReset?: boolean\n  componentName?: string\n  debug?: boolean | 'verbose'\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, themeReset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        data-themeable\n        debug={props.debug}\n        reset={props.themeReset}\n      >\n        {element}\n      </Theme>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
+  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { DebugProp, ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  themeReset?: boolean\n  componentName?: string\n  debug?: DebugProp\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, themeReset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        data-themeable\n        debug={props.debug}\n        reset={props.themeReset}\n      >\n        {element}\n      </Theme>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
   "mappings": "AAsBM;AAtBN,OAAO,SAAS,kBAAyB;AAGzC,SAAS,aAAa;AAUf,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAuB,KAAK;AACnF,UAAM,EAAE,cAAc,OAAO,eAAe,YAAY,GAAG,KAAK,IAAI;AACpE,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AAEtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe,kBAAiB,6BAAM;AAAA,QACtC,MAAO,SAAiB;AAAA,QACxB,kBAAc;AAAA,QACd,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
   "names": []
 }

package/dist/esm/helpers/themeable.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themeable.tsx"],
-  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  themeReset?: boolean\n  componentName?: string\n  debug?: boolean | 'verbose'\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, themeReset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        data-themeable\n        debug={props.debug}\n        reset={props.themeReset}\n      >\n        {element}\n      </Theme>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
+  "sourcesContent": ["import React, { forwardRef, useId } from 'react'\n\nimport { DebugProp, ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n  themeReset?: boolean\n  componentName?: string\n  debug?: DebugProp\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: ThemeableProps, ref) {\n    const { themeInverse, theme, componentName, themeReset, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n\n    return (\n      <Theme\n        inverse={themeInverse}\n        componentName={componentName || opts?.componentName}\n        name={(theme as any) || null}\n        data-themeable\n        debug={props.debug}\n        reset={props.themeReset}\n      >\n        {element}\n      </Theme>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
   "mappings": "AAsBM;AAtBN,OAAO,SAAS,kBAAyB;AAGzC,SAAS,aAAa;AAUf,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAuB,KAAK;AACnF,UAAM,EAAE,cAAc,OAAO,eAAe,YAAY,GAAG,KAAK,IAAI;AACpE,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AAEtE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe,kBAAiB,6BAAM;AAAA,QACtC,MAAO,SAAiB;AAAA,QACxB,kBAAc;AAAA,QACd,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -38,13 +38,13 @@ function useThemedChildren(themeState, children, options) {
   }
   next = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next });
   if (isWeb) {
-    const enableClassName = forceClassName === true || forceClassName !== false && isNewTheme;
+    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme);
     return /* @__PURE__ */ jsx(
       "span",
       {
         className: "_dsp_contents",
         ...theme && enableClassName && {
-          className: `${className} ${forceClassName ? "forced1" : ""} _dsp_contents`,
+          className: `${className} _dsp_contents`,
           style: {
             // in order to provide currentColor, set color by default
             color: variableToString(theme.color)

package/dist/esm/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useServerRef } from '../hooks/useServerHooks'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName =\n      forceClassName === true || (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} ${forceClassName ? 'forced1' : ''} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
-  "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAAa,gBAAM,MAAM,UAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,MAAI,OAAO;AACT,UAAM,kBACJ,mBAAmB,QAAS,mBAAmB,SAAS;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAI,SACH,mBAAmB;AAAA,UACjB,WAAW,GAAG,aAAa,iBAAiB,YAAY;AAAA,UACxD,OAAO;AAAA;AAAA,YAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QAED;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useServerRef } from '../hooks/useServerHooks'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
+  "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAAa,gBAAM,MAAM,UAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,MAAI,OAAO;AACT,UAAM,kBAAkB,mBAAmB,mBAAmB,SAAS;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAI,SACH,mBAAmB;AAAA,UACjB,WAAW,GAAG;AAAA,UACd,OAAO;AAAA;AAAA,YAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QAED;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/Theme.mjs

@@ -38,13 +38,13 @@ function useThemedChildren(themeState, children, options) {
   }
   next = /* @__PURE__ */ jsx(ThemeManagerContext.Provider, { value: themeManager, children: next });
   if (isWeb) {
-    const enableClassName = forceClassName === true || forceClassName !== false && isNewTheme;
+    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme);
     return /* @__PURE__ */ jsx(
       "span",
       {
         className: "_dsp_contents",
         ...theme && enableClassName && {
-          className: `${className} ${forceClassName ? "forced1" : ""} _dsp_contents`,
+          className: `${className} _dsp_contents`,
           style: {
             // in order to provide currentColor, set color by default
             color: variableToString(theme.color)

package/dist/esm/views/Theme.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useServerRef } from '../hooks/useServerHooks'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName =\n      forceClassName === true || (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} ${forceClassName ? 'forced1' : ''} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
-  "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAAa,gBAAM,MAAM,UAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,MAAI,OAAO;AACT,UAAM,kBACJ,mBAAmB,QAAS,mBAAmB,SAAS;AAC1D,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAI,SACH,mBAAmB;AAAA,UACjB,WAAW,GAAG,aAAa,iBAAiB,YAAY;AAAA,UACxD,OAAO;AAAA;AAAA,YAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QAED;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useServerRef } from '../hooks/useServerHooks'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) return props.children\n  const isRoot = !!props['_isRoot']\n  const themeState = useChangeThemeEffect(props, isRoot)\n  const children = props['data-themeable']\n    ? Children.map(props.children, (child) =>\n        cloneElement(child, { ['data-themeable']: true })\n      )\n    : props.children\n\n  return useThemedChildren(themeState, children, props)\n}\n\nexport function useThemedChildren(\n  themeState: ChangedThemeResponse,\n  children: any,\n  options: { forceClassName?: boolean; shallow?: boolean }\n) {\n  const { themeManager, isNewTheme, className, theme } = themeState\n  const { shallow, forceClassName } = options\n\n  const hasEverThemed = useServerRef(false)\n  if (isNewTheme) {\n    hasEverThemed.current = true\n  }\n\n  // once a theme is set it always passes the context to avoid reparenting\n  // until then no context to avoid lots of context\n  if (!isNewTheme && !hasEverThemed.current && !forceClassName && !shallow) {\n    return children\n  }\n\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n\n  if (shallow && themeManager) {\n    next = Children.map(next, (child) => {\n      return cloneElement(\n        child,\n        undefined,\n        <Theme name={themeManager.state.parentName}>{child.props.children}</Theme>\n      )\n    })\n  }\n\n  next = (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n\n  if (isWeb) {\n    const enableClassName = forceClassName ?? (forceClassName !== false && isNewTheme)\n    return (\n      <span\n        className=\"_dsp_contents\"\n        {...(theme &&\n          enableClassName && {\n            className: `${className} _dsp_contents`,\n            style: {\n              // in order to provide currentColor, set color by default\n              color: variableToString(theme.color),\n            },\n          })}\n      >\n        {next}\n      </span>\n    )\n  }\n\n  return next\n}\n"],
+  "mappings": "AAkDQ;AAlDR,SAAS,aAAa;AACtB,SAAS,UAAU,oBAAoB;AAEvC,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,oBAAoB;AAC7B,SAA+B,4BAA4B;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SACA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AAEpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAIA,MAAI,CAAC,cAAc,CAAC,cAAc,WAAW,CAAC,kBAAkB,CAAC,SAAS;AACxE,WAAO;AAAA,EACT;AAGA,MAAI,OAAO;AAEX,MAAI,WAAW,cAAc;AAC3B,WAAO,SAAS,IAAI,MAAM,CAAC,UAAU;AACnC,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAAa,gBAAM,MAAM,UAAS;AAAA,MACpE;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,MAAI,OAAO;AACT,UAAM,kBAAkB,mBAAmB,mBAAmB,SAAS;AACvE,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACT,GAAI,SACH,mBAAmB;AAAA,UACjB,WAAW,GAAG;AAAA,UACd,OAAO;AAAA;AAAA,YAEL,OAAO,iBAAiB,MAAM,KAAK;AAAA,UACrC;AAAA,QACF;AAAA,QAED;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/web",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,20 +27,20 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "^1.4.0",
-    "@tamagui/constants": "^1.4.0",
-    "@tamagui/helpers": "^1.4.0",
-    "@tamagui/normalize-css-color": "^1.4.0",
-    "@tamagui/use-did-finish-ssr": "^1.4.0",
-    "@tamagui/use-event": "^1.4.0",
-    "@tamagui/use-force-update": "^1.4.0"
+    "@tamagui/compose-refs": "^1.5.0",
+    "@tamagui/constants": "^1.5.0",
+    "@tamagui/helpers": "^1.5.0",
+    "@tamagui/normalize-css-color": "^1.5.0",
+    "@tamagui/use-did-finish-ssr": "^1.5.0",
+    "@tamagui/use-event": "^1.5.0",
+    "@tamagui/use-force-update": "^1.5.0"
   },
   "peerDependencies": {
     "react": "*",
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.4.0",
+    "@tamagui/build": "^1.5.0",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",

package/src/createComponent.tsx

@@ -1,11 +1,6 @@
 import { useComposedRefs } from '@tamagui/compose-refs'
 import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'
-import {
-  composeEventHandlers,
-  stylePropsView,
-  validPseudoKeys,
-  validStyles,
-} from '@tamagui/helpers'
+import { stylePropsView, validPseudoKeys, validStyles } from '@tamagui/helpers'
 import React, {
   Children,
   Fragment,
@@ -50,7 +45,7 @@ import {
   UseAnimationHook,
   UseAnimationProps,
 } from './types'
-import { Slot, mergeEvent } from './views/Slot'
+import { Slot } from './views/Slot'
 import { useThemedChildren } from './views/Theme'
 
 // let t
@@ -431,12 +426,11 @@ export function createComponent<
     // so the type is pretty loose
     let viewProps = nonTamaguiProps
 
-    // hook for transforming props
-    if (process.env.TAMAGUI_TARGET === 'web' && !isReactNative) {
-      const nextProps = hooks.usePropsTransform?.(elementType, nonTamaguiProps, hostRef)
-      if (!asChild) {
-        viewProps = nextProps
-      }
+    // if react-native-web view just pass all props down
+    if (process.env.TAMAGUI_TARGET === 'web' && !isReactNative && !asChild) {
+      viewProps = hooks.usePropsTransform?.(elementType, nonTamaguiProps, hostRef)
+    } else {
+      viewProps = nonTamaguiProps
     }
 
     viewProps.ref = useComposedRefs(hostRef as any, forwardedRef)

package/src/createTamagui.ts

@@ -125,15 +125,17 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     const dedupedThemes: {
       [key: string]: DedupedTheme
     } = {}
-    const existing = new WeakMap<ThemeParsed, DedupedTheme>()
+    const existing = new Map<string, DedupedTheme>()
 
     // first, de-dupe and parse them
     for (const themeName in themes) {
       const rawTheme = themes[themeName] as ThemeParsed
+      // dont force referential equality but may need something more consistent than JSON.stringify
+      const key = JSON.stringify(rawTheme)
 
       // if existing, avoid
-      if (existing.has(rawTheme)) {
-        const e = existing.get(rawTheme)!
+      if (existing.has(key)) {
+        const e = existing.get(key)!
         themes[themeName] = e.theme
         e.names.push(themeName)
         continue
@@ -154,7 +156,7 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
         theme,
       }
 
-      existing.set(rawTheme, dedupedThemes[themeName])
+      existing.set(key, dedupedThemes[themeName])
     }
 
     // then, generate CSS from de-duped

package/src/helpers/expandStyle.ts

@@ -8,24 +8,11 @@ import { isWeb } from '@tamagui/constants'
 export function expandStyle(key: string, value: any) {
   if (process.env.TAMAGUI_TARGET === 'web') {
     if (key === 'flex') {
-      // The 'flex' property value in React Native must be a positive integer,
-      // 0, or -1.
-      if (value <= -1) {
-        return [
-          ['flexGrow', 0],
-          ['flexShrink', 1],
-          ['flexBasis', 'auto'],
-        ]
-      }
-      // normalizing to better align with native
-      // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex
-      if (value >= 0) {
-        return [
-          ['flexGrow', value],
-          ['flexShrink', 1],
-        ]
-      }
-      return
+      return [
+        ['flexGrow', value],
+        ['flexShrink', 1],
+        ['flexBasis', 'auto'],
+      ]
     }
 
     // web only