@tamagui/core 1.0.1-rc.8 → 1.0.1

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/cache.ts"],
-  "sourcesContent": ["type Value = Object | Array<any> | string | number\n\nexport type Style = { [key: string]: Value }\n\nclass Cache {\n  v: Record<string, any> = {}\n\n  get(key: string, valStr: string) {\n    return this.v[key]?.[valStr]\n  }\n\n  set(key: string, valStr: string, object: any) {\n    this.v[key] ??= {}\n    this.v[key][valStr] = object\n  }\n}\n\nexport const cache = new Cache()\n"],
-  "mappings": "AAIA,MAAM,MAAM;AAAA,EAAZ;AACE,aAAyB,CAAC;AAAA;AAAA,EAE1B,IAAI,KAAa,QAAgB;AAPnC;AAQI,YAAO,UAAK,EAAE,SAAP,mBAAc;AAAA,EACvB;AAAA,EAEA,IAAI,KAAa,QAAgB,QAAa;AAC5C,SAAK,EAAE,SAAS,CAAC;AACjB,SAAK,EAAE,KAAK,UAAU;AAAA,EACxB;AACF;AAEO,MAAM,QAAQ,IAAI,MAAM;",
+  "sourcesContent": ["type Value = Object | Array<any> | string | number\n\nexport type Style = { [key: string]: Value }\n\nconst v: Record<string, any> = {}\n\nexport const cache = {\n  get(key: string, valStr: string) {\n    return v[key]?.[valStr]\n  },\n\n  set(key: string, valStr: string, object: any) {\n    v[key] ??= {}\n    v[key][valStr] = object\n  },\n}\n"],
+  "mappings": "AAIA,MAAM,IAAyB,CAAC;AAEzB,MAAM,QAAQ;AAAA,EACnB,IAAI,KAAa,QAAgB;AAPnC;AAQI,YAAO,OAAE,SAAF,mBAAS;AAAA,EAClB;AAAA,EAEA,IAAI,KAAa,QAAgB,QAAa;AAC5C,MAAE,SAAS,CAAC;AACZ,MAAE,KAAK,UAAU;AAAA,EACnB;AACF;",
   "names": []
 }

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/helpers/calc.ts"],
   "sourcesContent": ["import { isWeb } from '../constants/platform'\nimport { getVariableVariable } from '../createVariable'\nimport { FontLineHeightTokens, FontSizeTokens, SizeTokens, SpaceTokens } from '../types'\n\n/**\n * Simple calc() that handles native + web\n *   on web: outputs a calc() string\n *   on native: outputs a plain number\n */\n\nexport type CalcVal =\n  | string\n  | number\n  | SizeTokens\n  | SpaceTokens\n  | FontSizeTokens\n  | FontLineHeightTokens\n\nconst operators = {\n  '+': (a: number, b: number) => a + b,\n  '-': (a: number, b: number) => a - b,\n  '/': (a: number, b: number) => a / b,\n  '*': (a: number, b: number) => a * b,\n}\n\ntype Operator = keyof typeof operators\n\nexport const calc = (...valuesAndOperators: (CalcVal | Operator)[]) => {\n  if (isWeb) {\n    let res = 'calc('\n    for (const cur of valuesAndOperators) {\n      if (operators[cur as any]) {\n        // spaces are significant\n        res += ' ' + cur + ' '\n      } else {\n        res += convertToVariableOrNumber(cur)\n      }\n    }\n    return res + ')'\n  }\n\n  let res = 0\n  let nextOp: any = null\n  for (const cur of valuesAndOperators) {\n    if (operators[cur as any]) {\n      nextOp = operators[cur as any]\n    } else {\n      if (nextOp) {\n        res = nextOp(res, cur)\n        nextOp = null\n      } else {\n        res = +cur\n      }\n    }\n  }\n  return res\n}\n\nconst convertToVariableOrNumber = (v: any) => {\n  const varOrVal = getVariableVariable(v)\n  if (typeof varOrVal === 'number') {\n    return `${varOrVal}px`\n  }\n  return varOrVal\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,2BAA2B;AAiBpC,MAAM,YAAY;AAAA,EAChB,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AACrC;AAIO,MAAM,OAAO,IAAI,uBAA+C;AACrE,MAAI,OAAO;AACT,QAAIA,OAAM;AACV,eAAW,OAAO,oBAAoB;AACpC,UAAI,UAAU,MAAa;AAEzB,QAAAA,QAAO,MAAM,MAAM;AAAA,MACrB,OAAO;AACL,QAAAA,QAAO,0BAA0B,GAAG;AAAA,MACtC;AAAA,IACF;AACA,WAAOA,OAAM;AAAA,EACf;AAEA,MAAI,MAAM;AACV,MAAI,SAAc;AAClB,aAAW,OAAO,oBAAoB;AACpC,QAAI,UAAU,MAAa;AACzB,eAAS,UAAU;AAAA,IACrB,OAAO;AACL,UAAI,QAAQ;AACV,cAAM,OAAO,KAAK,GAAG;AACrB,iBAAS;AAAA,MACX,OAAO;AACL,cAAM,CAAC;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,MAAW;AAC5C,QAAM,WAAW,oBAAoB,CAAC;AACtC,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO,GAAG;AAAA,EACZ;AACA,SAAO;AACT;",
-  "names": ["res"]
+  "mappings": "AAAA;AACA;AAiBA,MAAM,YAAY;AAAA,EAChB,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AAAA,EACnC,KAAK,CAAC,GAAW,MAAc,IAAI;AACrC;AAIO,MAAM,OAAO,IAAI,uBAA+C;AACrE,MAAI,OAAO;AACT,QAAI,OAAM;AACV,eAAW,OAAO,oBAAoB;AACpC,UAAI,UAAU,MAAa;AAEzB,gBAAO,MAAM,MAAM;AAAA,MACrB,OAAO;AACL,gBAAO,0BAA0B,GAAG;AAAA,MACtC;AAAA,IACF;AACA,WAAO,OAAM;AAAA,EACf;AAEA,MAAI,MAAM;AACV,MAAI,SAAc;AAClB,aAAW,OAAO,oBAAoB;AACpC,QAAI,UAAU,MAAa;AACzB,eAAS,UAAU;AAAA,IACrB,OAAO;AACL,UAAI,QAAQ;AACV,cAAM,OAAO,KAAK,GAAG;AACrB,iBAAS;AAAA,MACX,OAAO;AACL,cAAM,CAAC;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;AAEA,MAAM,4BAA4B,CAAC,MAAW;AAC5C,QAAM,WAAW,oBAAoB,CAAC;AACtC,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO,GAAG;AAAA,EACZ;AACA,SAAO;AACT;",
+  "names": []
 }

package/dist/esm/helpers/createShallowUpdate.js

@@ -1,18 +1,15 @@
 import { useCallback } from "react";
 function createShallowUpdate(setter) {
-  return useCallback(
-    (next) => {
-      setter((prev) => {
-        for (const key in next) {
-          if (prev[key] !== next[key]) {
-            return { ...prev, ...next };
-          }
+  return useCallback((next) => {
+    setter((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return { ...prev, ...next };
         }
-        return prev;
-      });
-    },
-    [setter]
-  );
+      }
+      return prev;
+    });
+  }, [setter]);
 }
 export {
   createShallowUpdate

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/helpers/createShallowUpdate.tsx"],
   "sourcesContent": ["import React, { useCallback } from 'react'\n\nexport function createShallowUpdate<State extends Object>(\n  setter: React.Dispatch<React.SetStateAction<State>>\n) {\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useCallback(\n    (next: Partial<State>) => {\n      setter((prev) => {\n        for (const key in next) {\n          if (prev[key] !== next[key]) {\n            return { ...prev, ...next }\n          }\n        }\n        return prev\n      })\n    },\n    [setter]\n  )\n}\n"],
-  "mappings": "AAAA,SAAgB,mBAAmB;AAE5B,SAAS,oBACd,QACA;AAEA,SAAO;AAAA,IACL,CAAC,SAAyB;AACxB,aAAO,CAAC,SAAS;AACf,mBAAW,OAAO,MAAM;AACtB,cAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,mBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,UAC5B;AAAA,QACF;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AACF;",
+  "mappings": "AAAA;AAEO,6BACL,QACA;AAEA,SAAO,YACL,CAAC,SAAyB;AACxB,WAAO,CAAC,SAAS;AACf,iBAAW,OAAO,MAAM;AACtB,YAAI,KAAK,SAAS,KAAK,MAAM;AAC3B,iBAAO,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,QAC5B;AAAA,MACF;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GACA,CAAC,MAAM,CACT;AACF;",
   "names": []
 }

package/dist/esm/helpers/createTamaguiProvider.js

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { isClient } from "../constants/platform";
+import { ButtonInsideButtonContext } from "../contexts/ButtonInsideButtonContext";
+import { TextAncestorProvider } from "../views/TextAncestorContext";
+import { ThemeProvider } from "../views/ThemeProvider";
+function createTamaguiProvider(config) {
+  return function TamaguiProvider({
+    disableInjectCSS,
+    children,
+    ...themePropsProvider
+  }) {
+    if (isClient) {
+      React.useLayoutEffect(() => {
+        if (disableInjectCSS)
+          return;
+        const style = document.createElement("style");
+        style.appendChild(document.createTextNode(config.getCSS()));
+        document.head.appendChild(style);
+        return () => {
+          document.head.removeChild(style);
+        };
+      }, [disableInjectCSS]);
+    }
+    return /* @__PURE__ */ React.createElement(ButtonInsideButtonContext.Provider, {
+      value: false
+    }, /* @__PURE__ */ React.createElement(TextAncestorProvider, null, /* @__PURE__ */ React.createElement(ThemeProvider, {
+      themes: config.themes,
+      defaultTheme: config.defaultTheme || "light",
+      themeClassNameOnRoot: config.themeClassNameOnRoot,
+      disableRootThemeClass: config.disableRootThemeClass,
+      ...themePropsProvider
+    }, children)));
+  };
+}
+export {
+  createTamaguiProvider
+};
+//# sourceMappingURL=createTamaguiProvider.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/createTamaguiProvider.tsx"],
+  "sourcesContent": ["import * as React from 'react'\n\nimport { isClient } from '../constants/platform'\nimport { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'\nimport { TamaguiInternalConfig, TamaguiProviderProps } from '../types'\nimport { TextAncestorProvider } from '../views/TextAncestorContext'\nimport { ThemeProvider } from '../views/ThemeProvider'\n\nexport function createTamaguiProvider(config: TamaguiInternalConfig) {\n  return function TamaguiProvider({\n    disableInjectCSS,\n    children,\n    ...themePropsProvider\n  }: TamaguiProviderProps) {\n    // inject CSS if asked to (not SSR compliant)\n    if (isClient) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      React.useLayoutEffect(() => {\n        if (disableInjectCSS) return\n        const style = document.createElement('style')\n        style.appendChild(document.createTextNode(config.getCSS()))\n        document.head.appendChild(style)\n        return () => {\n          document.head.removeChild(style)\n        }\n      }, [disableInjectCSS])\n    }\n\n    return (\n      <ButtonInsideButtonContext.Provider value={false}>\n        <TextAncestorProvider>\n          <ThemeProvider\n            themes={config.themes}\n            defaultTheme={config.defaultTheme || 'light'}\n            themeClassNameOnRoot={config.themeClassNameOnRoot}\n            disableRootThemeClass={config.disableRootThemeClass}\n            {...themePropsProvider}\n          >\n            {children}\n          </ThemeProvider>\n        </TextAncestorProvider>\n      </ButtonInsideButtonContext.Provider>\n    )\n  }\n}\n"],
+  "mappings": "AAAA;AAEA;AACA;AAEA;AACA;AAEO,+BAA+B,QAA+B;AACnE,SAAO,yBAAyB;AAAA,IAC9B;AAAA,IACA;AAAA,OACG;AAAA,KACoB;AAEvB,QAAI,UAAU;AAEZ,YAAM,gBAAgB,MAAM;AAC1B,YAAI;AAAkB;AACtB,cAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,cAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,iBAAS,KAAK,YAAY,KAAK;AAC/B,eAAO,MAAM;AACX,mBAAS,KAAK,YAAY,KAAK;AAAA,QACjC;AAAA,MACF,GAAG,CAAC,gBAAgB,CAAC;AAAA,IACvB;AAEA,WACE,oCAAC,0BAA0B,UAA1B;AAAA,MAAmC,OAAO;AAAA,OACzC,oCAAC,4BACC,oCAAC;AAAA,MACC,QAAQ,OAAO;AAAA,MACf,cAAc,OAAO,gBAAgB;AAAA,MACrC,sBAAsB,OAAO;AAAA,MAC7B,uBAAuB,OAAO;AAAA,MAC7B,GAAG;AAAA,OAEH,QACH,CACF,CACF;AAAA,EAEJ;AACF;",
+  "names": []
+}

package/dist/esm/helpers/cssHash.js

@@ -0,0 +1,27 @@
+import { simpleHash } from "@tamagui/helpers";
+function cssHash(val, maxLen = 10) {
+  if (val.length < maxLen) {
+    let res = "";
+    for (let i = 0; i < val.length; i++) {
+      const char = val[i];
+      if (specials[char]) {
+        res += specials[char];
+      } else {
+        res += validCSS.test(char) ? char : "_" + char.charCodeAt(0).toString();
+      }
+    }
+    return res;
+  }
+  return simpleHash(val);
+}
+const validCSS = /[a-z0-9]/i;
+const specials = {
+  ".": "dot",
+  ",": "_",
+  "%": "pct",
+  "-": "neg"
+};
+export {
+  cssHash
+};
+//# sourceMappingURL=cssHash.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/cssHash.ts"],
+  "sourcesContent": ["import { simpleHash } from '@tamagui/helpers'\n\n// not sure it's worth the extra weight, could be dev time though\n// affordances for simple values\nexport function cssHash(val: string, maxLen = 10) {\n  if (val.length < maxLen) {\n    let res = ''\n    for (let i = 0; i < val.length; i++) {\n      const char = val[i]\n      if (specials[char]) {\n        res += specials[char]\n      } else {\n        res += validCSS.test(char) ? char : '_' + char.charCodeAt(0).toString()\n      }\n    }\n    return res\n  }\n  return simpleHash(val)\n}\n\nconst validCSS = /[a-z0-9]/i\n\nconst specials = {\n  '.': 'dot',\n  ',': '_',\n  '%': 'pct',\n  '-': 'neg',\n}\n"],
+  "mappings": "AAAA;AAIO,iBAAiB,KAAa,SAAS,IAAI;AAChD,MAAI,IAAI,SAAS,QAAQ;AACvB,QAAI,MAAM;AACV,aAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,KAAK;AACnC,YAAM,OAAO,IAAI;AACjB,UAAI,SAAS,OAAO;AAClB,eAAO,SAAS;AAAA,MAClB,OAAO;AACL,eAAO,SAAS,KAAK,IAAI,IAAI,OAAO,MAAM,KAAK,WAAW,CAAC,EAAE,SAAS;AAAA,MACxE;AAAA,IACF;AACA,WAAO;AAAA,EACT;AACA,SAAO,WAAW,GAAG;AACvB;AAEA,MAAM,WAAW;AAEjB,MAAM,WAAW;AAAA,EACf,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP;",
+  "names": []
+}

package/dist/esm/helpers/expandStyle.js

@@ -1,3 +1,4 @@
+var _a;
 import { isWeb } from "@tamagui/constants";
 function expandStyle(key, value) {
   if (process.env.TAMAGUI_TARGET === "web") {
@@ -18,63 +19,50 @@ function expandStyle(key, value) {
       return;
     }
     switch (key) {
-      case "aspectRatio": {
-        return [[key, value.toString()]];
-      }
       case "textAlignVertical": {
         return [["verticalAlign", value === "center" ? "middle" : value]];
       }
-      case "textDecorationLine": {
-        return [["textDecorationLine", value]];
-      }
       case "writingDirection": {
         return [["direction", value]];
       }
     }
   }
-  const longKey = STYLE_SHORT_FORM_EXPANSIONS[key];
+  const longKey = EXPANSIONS[key];
   if (longKey) {
     return longKey.map((key2) => {
       return [key2, value];
     });
   }
 }
-const STYLE_SHORT_FORM_EXPANSIONS = {
-  borderColor: [
-    "borderTopColor",
-    "borderRightColor",
-    "borderBottomColor",
-    "borderLeftColor"
-  ],
+const all = ["Top", "Right", "Bottom", "Left"];
+const horiz = ["Right", "Left"];
+const vert = ["Top", "Bottom"];
+const xy = ["X", "Y"];
+const EXPANSIONS = {
+  borderColor: ["TopColor", "RightColor", "BottomColor", "LeftColor"],
   borderRadius: [
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomRightRadius",
-    "borderBottomLeftRadius"
+    "TopLeftRadius",
+    "TopRightRadius",
+    "BottomRightRadius",
+    "BottomLeftRadius"
   ],
-  borderWidth: [
-    "borderTopWidth",
-    "borderRightWidth",
-    "borderBottomWidth",
-    "borderLeftWidth"
-  ],
-  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
-  marginHorizontal: ["marginRight", "marginLeft"],
-  marginVertical: ["marginTop", "marginBottom"],
-  overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
-  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
-  paddingHorizontal: ["paddingRight", "paddingLeft"],
-  paddingVertical: ["paddingTop", "paddingBottom"],
+  borderWidth: ["TopWidth", "RightWidth", "BottomWidth", "LeftWidth"],
+  margin: all,
+  marginHorizontal: horiz,
+  marginVertical: vert,
+  overscrollBehavior: xy,
+  padding: all,
+  paddingHorizontal: horiz,
+  paddingVertical: vert,
   ...isWeb && {
-    borderStyle: [
-      "borderTopStyle",
-      "borderRightStyle",
-      "borderBottomStyle",
-      "borderLeftStyle"
-    ],
-    overflow: ["overflowX", "overflowY"]
+    borderStyle: ["TopStyle", "RightStyle", "BottomStyle", "LeftStyle"],
+    overflow: xy
   }
 };
+for (const parent in EXPANSIONS) {
+  const prefix = parent.slice(0, ((_a = /[A-Z]/.exec(parent)) == null ? void 0 : _a.index) ?? parent.length);
+  EXPANSIONS[parent] = EXPANSIONS[parent].map((k) => `${prefix}${k}`);
+}
 export {
   expandStyle
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/expandStyle.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\nexport function expandStyle(key: string, value: any) {\n  if (process.env.TAMAGUI_TARGET === 'web') {\n    if (key === 'flex') {\n      // The 'flex' property value in React Native must be a positive integer,\n      // 0, or -1.\n      if (value <= -1) {\n        return [\n          ['flexGrow', 0],\n          ['flexShrink', 1],\n          ['flexBasis', 'auto'],\n        ]\n      }\n      // normalizing to better align with native\n      // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n      if (value >= 0) {\n        return [\n          ['flexGrow', value],\n          ['flexShrink', 1],\n        ]\n      }\n      return\n    }\n\n    // web only\n    switch (key) {\n      case 'aspectRatio': {\n        return [[key, value.toString()]]\n      }\n\n      case 'textAlignVertical': {\n        return [['verticalAlign', value === 'center' ? 'middle' : value]]\n      }\n\n      case 'textDecorationLine': {\n        return [['textDecorationLine', value]]\n      }\n\n      case 'writingDirection': {\n        return [['direction', value]]\n      }\n    }\n  }\n\n  const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]\n  if (longKey) {\n    return longKey.map((key) => {\n      return [key, value]\n    })\n  }\n}\n\nconst STYLE_SHORT_FORM_EXPANSIONS: Record<string, string[]> = {\n  borderColor: [\n    'borderTopColor',\n    'borderRightColor',\n    'borderBottomColor',\n    'borderLeftColor',\n  ],\n  borderRadius: [\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderBottomRightRadius',\n    'borderBottomLeftRadius',\n  ],\n  borderWidth: [\n    'borderTopWidth',\n    'borderRightWidth',\n    'borderBottomWidth',\n    'borderLeftWidth',\n  ],\n  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n  marginHorizontal: ['marginRight', 'marginLeft'],\n  marginVertical: ['marginTop', 'marginBottom'],\n  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n  paddingHorizontal: ['paddingRight', 'paddingLeft'],\n  paddingVertical: ['paddingTop', 'paddingBottom'],\n  ...(isWeb && {\n    // react-native only supports borderStyle\n    borderStyle: [\n      'borderTopStyle',\n      'borderRightStyle',\n      'borderBottomStyle',\n      'borderLeftStyle',\n    ],\n    // react-native doesn't support X / Y\n    overflow: ['overflowX', 'overflowY'],\n  }),\n}\n"],
-  "mappings": "AAKA,SAAS,aAAa;AAEf,SAAS,YAAY,KAAa,OAAY;AACnD,MAAI,QAAQ,IAAI,mBAAmB,OAAO;AACxC,QAAI,QAAQ,QAAQ;AAGlB,UAAI,SAAS,IAAI;AACf,eAAO;AAAA,UACL,CAAC,YAAY,CAAC;AAAA,UACd,CAAC,cAAc,CAAC;AAAA,UAChB,CAAC,aAAa,MAAM;AAAA,QACtB;AAAA,MACF;AAGA,UAAI,SAAS,GAAG;AACd,eAAO;AAAA,UACL,CAAC,YAAY,KAAK;AAAA,UAClB,CAAC,cAAc,CAAC;AAAA,QAClB;AAAA,MACF;AACA;AAAA,IACF;AAGA,YAAQ;AAAA,WACD,eAAe;AAClB,eAAO,CAAC,CAAC,KAAK,MAAM,SAAS,CAAC,CAAC;AAAA,MACjC;AAAA,WAEK,qBAAqB;AACxB,eAAO,CAAC,CAAC,iBAAiB,UAAU,WAAW,WAAW,KAAK,CAAC;AAAA,MAClE;AAAA,WAEK,sBAAsB;AACzB,eAAO,CAAC,CAAC,sBAAsB,KAAK,CAAC;AAAA,MACvC;AAAA,WAEK,oBAAoB;AACvB,eAAO,CAAC,CAAC,aAAa,KAAK,CAAC;AAAA,MAC9B;AAAA;AAAA,EAEJ;AAEA,QAAM,UAAU,4BAA4B;AAC5C,MAAI,SAAS;AACX,WAAO,QAAQ,IAAI,CAACA,SAAQ;AAC1B,aAAO,CAACA,MAAK,KAAK;AAAA,IACpB,CAAC;AAAA,EACH;AACF;AAEA,MAAM,8BAAwD;AAAA,EAC5D,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,aAAa;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,QAAQ,CAAC,aAAa,eAAe,gBAAgB,YAAY;AAAA,EACjE,kBAAkB,CAAC,eAAe,YAAY;AAAA,EAC9C,gBAAgB,CAAC,aAAa,cAAc;AAAA,EAC5C,oBAAoB,CAAC,uBAAuB,qBAAqB;AAAA,EACjE,SAAS,CAAC,cAAc,gBAAgB,iBAAiB,aAAa;AAAA,EACtE,mBAAmB,CAAC,gBAAgB,aAAa;AAAA,EACjD,iBAAiB,CAAC,cAAc,eAAe;AAAA,EAC/C,GAAI,SAAS;AAAA,IAEX,aAAa;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IAEA,UAAU,CAAC,aAAa,WAAW;AAAA,EACrC;AACF;",
+  "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\nexport function expandStyle(key: string, value: any) {\n  if (process.env.TAMAGUI_TARGET === 'web') {\n    if (key === 'flex') {\n      // The 'flex' property value in React Native must be a positive integer,\n      // 0, or -1.\n      if (value <= -1) {\n        return [\n          ['flexGrow', 0],\n          ['flexShrink', 1],\n          ['flexBasis', 'auto'],\n        ]\n      }\n      // normalizing to better align with native\n      // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n      if (value >= 0) {\n        return [\n          ['flexGrow', value],\n          ['flexShrink', 1],\n        ]\n      }\n      return\n    }\n\n    // web only\n    switch (key) {\n      case 'textAlignVertical': {\n        return [['verticalAlign', value === 'center' ? 'middle' : value]]\n      }\n      case 'writingDirection': {\n        return [['direction', value]]\n      }\n    }\n  }\n\n  const longKey = EXPANSIONS[key]\n  if (longKey) {\n    return longKey.map((key) => {\n      return [key, value]\n    })\n  }\n}\n\nconst all = ['Top', 'Right', 'Bottom', 'Left']\nconst horiz = ['Right', 'Left']\nconst vert = ['Top', 'Bottom']\nconst xy = ['X', 'Y']\n\nconst EXPANSIONS: Record<string, string[]> = {\n  borderColor: ['TopColor', 'RightColor', 'BottomColor', 'LeftColor'],\n  borderRadius: [\n    'TopLeftRadius',\n    'TopRightRadius',\n    'BottomRightRadius',\n    'BottomLeftRadius',\n  ],\n  borderWidth: ['TopWidth', 'RightWidth', 'BottomWidth', 'LeftWidth'],\n  margin: all,\n  marginHorizontal: horiz,\n  marginVertical: vert,\n  overscrollBehavior: xy,\n  padding: all,\n  paddingHorizontal: horiz,\n  paddingVertical: vert,\n  ...(isWeb && {\n    // react-native only supports borderStyle\n    borderStyle: ['TopStyle', 'RightStyle', 'BottomStyle', 'LeftStyle'],\n    // react-native doesn't support X / Y\n    overflow: xy,\n  }),\n}\n\nfor (const parent in EXPANSIONS) {\n  const prefix = parent.slice(0, /[A-Z]/.exec(parent)?.index ?? parent.length)\n  EXPANSIONS[parent] = EXPANSIONS[parent].map((k) => `${prefix}${k}`)\n}\n"],
+  "mappings": "AAAA;AAKA,SAAS,aAAa;AAEf,SAAS,YAAY,KAAa,OAAY;AACnD,MAAI,QAAQ,IAAI,mBAAmB,OAAO;AACxC,QAAI,QAAQ,QAAQ;AAGlB,UAAI,SAAS,IAAI;AACf,eAAO;AAAA,UACL,CAAC,YAAY,CAAC;AAAA,UACd,CAAC,cAAc,CAAC;AAAA,UAChB,CAAC,aAAa,MAAM;AAAA,QACtB;AAAA,MACF;AAGA,UAAI,SAAS,GAAG;AACd,eAAO;AAAA,UACL,CAAC,YAAY,KAAK;AAAA,UAClB,CAAC,cAAc,CAAC;AAAA,QAClB;AAAA,MACF;AACA;AAAA,IACF;AAGA,YAAQ;AAAA,WACD,qBAAqB;AACxB,eAAO,CAAC,CAAC,iBAAiB,UAAU,WAAW,WAAW,KAAK,CAAC;AAAA,MAClE;AAAA,WACK,oBAAoB;AACvB,eAAO,CAAC,CAAC,aAAa,KAAK,CAAC;AAAA,MAC9B;AAAA;AAAA,EAEJ;AAEA,QAAM,UAAU,WAAW;AAC3B,MAAI,SAAS;AACX,WAAO,QAAQ,IAAI,CAACA,SAAQ;AAC1B,aAAO,CAACA,MAAK,KAAK;AAAA,IACpB,CAAC;AAAA,EACH;AACF;AAEA,MAAM,MAAM,CAAC,OAAO,SAAS,UAAU,MAAM;AAC7C,MAAM,QAAQ,CAAC,SAAS,MAAM;AAC9B,MAAM,OAAO,CAAC,OAAO,QAAQ;AAC7B,MAAM,KAAK,CAAC,KAAK,GAAG;AAEpB,MAAM,aAAuC;AAAA,EAC3C,aAAa,CAAC,YAAY,cAAc,eAAe,WAAW;AAAA,EAClE,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,aAAa,CAAC,YAAY,cAAc,eAAe,WAAW;AAAA,EAClE,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,GAAI,SAAS;AAAA,IAEX,aAAa,CAAC,YAAY,cAAc,eAAe,WAAW;AAAA,IAElE,UAAU;AAAA,EACZ;AACF;AAEA,WAAW,UAAU,YAAY;AAC/B,QAAM,SAAS,OAAO,MAAM,KAAG,aAAQ,KAAK,MAAM,MAAnB,mBAAsB,UAAS,OAAO,MAAM;AAC3E,aAAW,UAAU,WAAW,QAAQ,IAAI,CAAC,MAAM,GAAG,SAAS,GAAG;AACpE;",
   "names": ["key"]
 }

package/dist/esm/helpers/expandStyle.test.js

@@ -0,0 +1,9 @@
+import { expect, test } from "vitest";
+import { expandStyle } from "./expandStyle";
+test(`should expand webkit user-select`, () => {
+  expect(expandStyle("userSelect", "none")).toStrictEqual([
+    ["userSelect", "none"],
+    ["WebkitUserSelect", "none"]
+  ]);
+});
+//# sourceMappingURL=expandStyle.test.js.map

package/dist/esm/helpers/expandStyle.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/expandStyle.test.ts"],
+  "sourcesContent": ["import { expect, test } from 'vitest'\n\nimport { expandStyle } from './expandStyle'\n\ntest(`should expand webkit user-select`, () => {\n  expect(expandStyle('userSelect', 'none')).toStrictEqual([\n    ['userSelect', 'none'],\n    ['WebkitUserSelect', 'none'],\n  ])\n})\n"],
+  "mappings": "AAAA;AAEA;AAEA,KAAK,oCAAoC,MAAM;AAC7C,SAAO,YAAY,cAAc,MAAM,CAAC,EAAE,cAAc;AAAA,IACtD,CAAC,cAAc,MAAM;AAAA,IACrB,CAAC,oBAAoB,MAAM;AAAA,EAC7B,CAAC;AACH,CAAC;",
+  "names": []
+}

package/dist/esm/helpers/getFont.js

@@ -4,9 +4,7 @@ const getFont = (val = "$4", { fonts, theme, props }) => {
   const family = getVariableValue(props.fontFamily) || "$body";
   const font = fonts[family] || fonts["$body"];
   if (!font) {
-    if (process.env.NODE_ENV === "development") {
-      console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
-    }
+    console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
     return {};
   }
   const fontFamily = font.family;
@@ -29,9 +27,7 @@ const getFont = (val = "$4", { fonts, theme, props }) => {
   };
   if (process.env.NODE_ENV === "development") {
     if (props["debug"]) {
-      console.groupCollapsed("  \u{1F539} getFont", val, props["fontWeight"], props["fow"]);
-      console.log({ style, props, font });
-      console.groupEnd();
+      console.log("getFont", val, style, "from props", props);
     }
   }
   return style;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getFont.tsx"],
-  "sourcesContent": ["/* eslint-disable no-console */\nimport { getVariableValue } from '../createVariable'\nimport { FontSizeTokens, TextProps, VariantSpreadFunction } from '../types'\n\nexport const getFont: VariantSpreadFunction<TextProps, FontSizeTokens> = (\n  val = '$4',\n  { fonts, theme, props }\n) => {\n  const family = getVariableValue(props.fontFamily) || '$body'\n  const font = fonts[family] || fonts['$body']\n  if (!font) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('\u26A0\uFE0F no font found', { family, fontTokens: Object.keys(fonts), val })\n    }\n    return {} as any\n  }\n  const fontFamily = font.family\n  const fontSize = props.fontSize || font.size[val]\n  const lineHeight = props.lineHeight || font.lineHeight[val]\n  const fontWeight = props.fontWeight || font.weight[val]\n  const letterSpacing = props.letterSpacing || font.letterSpacing[val]\n  const fontStyle = props.fontStyle || font.style?.[val]\n  const textTransform = props.textTransform || font.transform?.[val]\n  const color = props.color || font.color?.[val] || theme.color\n  const style = {\n    color,\n    fontStyle,\n    textTransform,\n    fontFamily,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    lineHeight,\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug']) {\n      console.groupCollapsed('  \uD83D\uDD39 getFont', val, props['fontWeight'], props['fow'])\n      console.log({ style, props, font })\n      console.groupEnd()\n    }\n  }\n  return style\n}\n"],
-  "mappings": "AACA,SAAS,wBAAwB;AAG1B,MAAM,UAA4D,CACvE,MAAM,MACN,EAAE,OAAO,OAAO,MAAM,MACnB;AAPL;AAQE,QAAM,SAAS,iBAAiB,MAAM,UAAU,KAAK;AACrD,QAAM,OAAO,MAAM,WAAW,MAAM;AACpC,MAAI,CAAC,MAAM;AACT,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,KAAK,8BAAoB,EAAE,QAAQ,YAAY,OAAO,KAAK,KAAK,GAAG,IAAI,CAAC;AAAA,IAClF;AACA,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAa,KAAK;AACxB,QAAM,WAAW,MAAM,YAAY,KAAK,KAAK;AAC7C,QAAM,aAAa,MAAM,cAAc,KAAK,WAAW;AACvD,QAAM,aAAa,MAAM,cAAc,KAAK,OAAO;AACnD,QAAM,gBAAgB,MAAM,iBAAiB,KAAK,cAAc;AAChE,QAAM,YAAY,MAAM,eAAa,UAAK,UAAL,mBAAa;AAClD,QAAM,gBAAgB,MAAM,mBAAiB,UAAK,cAAL,mBAAiB;AAC9D,QAAM,QAAQ,MAAM,WAAS,UAAK,UAAL,mBAAa,SAAQ,MAAM;AACxD,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,UAAU;AAClB,cAAQ,eAAe,uBAAgB,KAAK,MAAM,eAAe,MAAM,MAAM;AAC7E,cAAQ,IAAI,EAAE,OAAO,OAAO,KAAK,CAAC;AAClC,cAAQ,SAAS;AAAA,IACnB;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { getVariableValue } from '../createVariable'\nimport { FontSizeTokens, TextProps, VariantSpreadFunction } from '../types'\n\nexport const getFont: VariantSpreadFunction<TextProps, FontSizeTokens> = (\n  val = '$4',\n  { fonts, theme, props }\n) => {\n  const family = getVariableValue(props.fontFamily) || '$body'\n  const font = fonts[family] || fonts['$body']\n  if (!font) {\n    console.warn('\u26A0\uFE0F no font found', { family, fontTokens: Object.keys(fonts), val })\n    return {} as any\n  }\n  const fontFamily = font.family\n  const fontSize = props.fontSize || font.size[val]\n  const lineHeight = props.lineHeight || font.lineHeight[val]\n  const fontWeight = props.fontWeight || font.weight[val]\n  const letterSpacing = props.letterSpacing || font.letterSpacing[val]\n  const fontStyle = props.fontStyle || font.style?.[val]\n  const textTransform = props.textTransform || font.transform?.[val]\n  const color = props.color || font.color?.[val] || theme.color\n  const style = {\n    color,\n    fontStyle,\n    textTransform,\n    fontFamily,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    lineHeight,\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug']) {\n      console.log('getFont', val, style, 'from props', props)\n    }\n  }\n  return style\n}\n"],
+  "mappings": "AAAA;AAGO,MAAM,UAA4D,CACvE,MAAM,MACN,EAAE,OAAO,OAAO,YACb;AANL;AAOE,QAAM,SAAS,iBAAiB,MAAM,UAAU,KAAK;AACrD,QAAM,OAAO,MAAM,WAAW,MAAM;AACpC,MAAI,CAAC,MAAM;AACT,YAAQ,KAAK,8BAAoB,EAAE,QAAQ,YAAY,OAAO,KAAK,KAAK,GAAG,IAAI,CAAC;AAChF,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAa,KAAK;AACxB,QAAM,WAAW,MAAM,YAAY,KAAK,KAAK;AAC7C,QAAM,aAAa,MAAM,cAAc,KAAK,WAAW;AACvD,QAAM,aAAa,MAAM,cAAc,KAAK,OAAO;AACnD,QAAM,gBAAgB,MAAM,iBAAiB,KAAK,cAAc;AAChE,QAAM,YAAY,MAAM,aAAa,YAAK,UAAL,mBAAa;AAClD,QAAM,gBAAgB,MAAM,iBAAiB,YAAK,cAAL,mBAAiB;AAC9D,QAAM,QAAQ,MAAM,SAAS,YAAK,UAAL,mBAAa,SAAQ,MAAM;AACxD,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,UAAU;AAClB,cAAQ,IAAI,WAAW,KAAK,OAAO,cAAc,KAAK;AAAA,IACxD;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/helpers/getSplitStyles.js

@@ -18,6 +18,7 @@ import { isDevTools } from "../constants/isDevTools";
 import {
   getMediaImportanceIfMoreImportant,
   mediaState as globalMediaState,
+  mediaKeysWithAndWithout$,
   mediaQueryConfig,
   mergeMediaByImportance
 } from "../hooks/useMedia";
@@ -28,8 +29,8 @@ import { getAtomicStyle, getStylesAtomic, styleToCSS } from "./getStylesAtomic";
 import {
   insertStyleRules,
   insertedTransforms,
+  scanAllSheets,
   shouldInsertStyleRules,
-  updateInserted,
   updateRules
 } from "./insertStyleRule";
 import { mergeTransform, mergeTransforms } from "./mergeTransform";
@@ -123,8 +124,11 @@ const accessibilityRoleToWebRole = {
   none: "presentation",
   summary: "region"
 };
-const isMediaKey = (key) => Boolean(key[0] === "$" && mediaQueryConfig[key.slice(1)]);
+const isMediaKey = (key) => Boolean(key[0] === "$" && mediaKeysWithAndWithout$.has(key));
 const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, languageContext, elementType, debug) => {
+  if (cache.has(props)) {
+    return cache.get(props);
+  }
   conf = conf || getConfig();
   const { shorthands } = conf;
   const {
@@ -208,8 +212,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
     if (keyInit === "className")
       continue;
     const valInit = props[keyInit];
-    const expandedKey = keyInit in shorthands;
-    if (expandedKey) {
+    if (keyInit in shorthands) {
       keyInit = shorthands[keyInit];
     }
     if (keyInit in usedKeys)
@@ -218,8 +221,8 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
       continue;
     if (!isWeb && keyInit.startsWith("data-"))
       continue;
-    if (validStyleProps[keyInit] || keyInit.includes("-")) {
-      if (valInit && valInit[0] === "_") {
+    if (typeof valInit === "string" && valInit[0] === "_") {
+      if (keyInit in validStyleProps || keyInit.includes("-")) {
         if (shouldDoClasses) {
           classNames[keyInit] = valInit;
         } else {
@@ -299,20 +302,11 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
             }
             break;
           }
-          case "accessibilityControls": {
-            viewProps["aria-controls"] = processIDRefList(valInit);
-            break;
-          }
+          case "accessibilityLabelledBy":
+          case "accessibilityFlowTo":
+          case "accessibilityControls":
           case "accessibilityDescribedBy": {
-            viewProps["aria-describedby"] = processIDRefList(valInit);
-            break;
-          }
-          case "accessibilityFlowTo": {
-            viewProps["aria-flowto"] = processIDRefList(valInit);
-            break;
-          }
-          case "accessibilityLabelledBy": {
-            viewProps["aria-labelledby"] = processIDRefList(valInit);
+            viewProps[`aria-${keyInit.replace("accessibility", "").toLowerCase()}`] = processIDRefList(valInit);
             break;
           }
           case "accessibilityKeyShortcuts": {
@@ -369,7 +363,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
     let isMedia = isMediaKey(keyInit);
     let isPseudo = validPseudoKeys[keyInit];
     if (!(isMedia || isPseudo || (variants == null ? void 0 : variants[keyInit]) || validStyleProps[keyInit] || shorthands[keyInit])) {
-      if (isWeb && keyInit.includes("ccessibility")) {
+      if (isWeb && keyInit.indexOf("ccessibility") > 0) {
         continue;
       }
       usedKeys[keyInit] = 1;
@@ -452,7 +446,10 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
             }
           }
         } else {
-          const isDisabled = !state[descriptor.stateKey || descriptor.name];
+          let isDisabled = !state[descriptor.stateKey || descriptor.name];
+          if (!isClient && isEnter) {
+            isDisabled = false;
+          }
           if (!isDisabled) {
             usedKeys[key] ||= 1;
           }
@@ -556,7 +553,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
       if (key === "fontFamily" && !fontFamily && valInit && val) {
         fontFamily = valInit[0] === "$" ? valInit : val;
       }
-      if (validStyleProps[key]) {
+      if (key in validStyleProps) {
         mergeStyle(styleState, key, val);
         continue;
       }
@@ -661,7 +658,8 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
         state,
         rulesToInsert,
         parentSplitStyles,
-        flatTransforms
+        flatTransforms,
+        result
       };
       for (const key in { ...result, ...logs }) {
         console.log(key, logs[key]);
@@ -669,6 +667,7 @@ const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, la
       console.groupEnd();
     }
   }
+  cache.set(props, result);
   return result;
 };
 function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = false) {
@@ -680,7 +679,8 @@ function mergeClassName(transforms, classNames, key, val, isMediaOrPseudo = fals
       let transform = insertedTransforms[val];
       if (isClient) {
         if (!transform) {
-          updateInserted();
+          console.warn(`got a new ting`);
+          scanAllSheets();
           transform = insertedTransforms[val];
           if (process.env.NODE_ENV === "development") {
             if (!transform) {