@tamagui/core 1.0.0-beta.202 → 1.0.0-beta.203

package/dist/esm/helpers/createPropMapper.js

@@ -4,63 +4,67 @@ import { getConfig } from "../conf";
 import { isWeb } from "../constants/platform";
 import { isVariable } from "../createVariable";
 import { isObj } from "./isObj";
-const createPropMapper = /* @__PURE__ */ __name((c) => {
-  const variants = c.variants || {};
-  function getVariantFunction(variant, key, value) {
-    for (const cat in tokenCategories) {
-      if (key in tokenCategories[cat]) {
-        const spreadVariant = variant[`...${cat}`];
-        if (spreadVariant) {
-          return spreadVariant;
-        }
+function getVariantFunction(variant, key, value) {
+  if (typeof variant === "function") {
+    return variant;
+  }
+  for (const cat in tokenCategories) {
+    if (key in tokenCategories[cat]) {
+      const spreadVariant = variant[`...${cat}`];
+      if (spreadVariant) {
+        return spreadVariant;
       }
     }
-    let fn;
-    if (typeof value === "number") {
-      fn = variant[":number"];
-    } else if (typeof value === "string") {
-      fn = variant[":string"];
-    } else if (value === true || value === false) {
-      fn = variant[":boolean"];
-    }
-    fn = fn || variant[value];
-    return fn || variant["..."] || variant["...size"];
   }
-  __name(getVariantFunction, "getVariantFunction");
-  const defaultProps = c.defaultProps || {};
-  return (key, value, theme, props, staticConfig, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
+  let fn;
+  if (typeof value === "number") {
+    fn = variant[":number"];
+  } else if (typeof value === "string") {
+    fn = variant[":string"];
+  } else if (value === true || value === false) {
+    fn = variant[":boolean"];
+  }
+  fn = fn || variant[value];
+  return fn || variant["..."] || variant["...size"];
+}
+__name(getVariantFunction, "getVariantFunction");
+const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+  const variants = staticConfig.variants || {};
+  const defaultProps = staticConfig.defaultProps || {};
+  return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
     const conf = getConfig();
     if (!conf) {
       console.trace("no conf! err");
       return;
     }
-    let fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
+    const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
     const variant = variants && variants[key];
     if (variant && value !== void 0) {
       let variantValue = getVariantFunction(variant, key, value);
-      if (!variantValue) {
-        return value;
-      }
-      if (typeof variantValue === "function") {
-        variantValue = variantValue(value, {
-          tokens: conf.tokensParsed,
-          theme,
-          props: avoidDefaultProps ? props : new Proxy(props, {
-            get(target, key2) {
-              if (Reflect.has(target, key2)) {
-                return Reflect.get(target, key2);
+      if (variantValue) {
+        if (typeof variantValue === "function") {
+          const fn = variantValue;
+          variantValue = fn(value, {
+            fonts: conf.fontsParsed,
+            tokens: conf.tokensParsed,
+            theme,
+            props: avoidDefaultProps ? props : new Proxy(props, {
+              get(target, key2) {
+                if (Reflect.has(target, key2)) {
+                  return Reflect.get(target, key2);
+                }
+                if (defaultProps) {
+                  return Reflect.get(defaultProps, key2);
+                }
               }
-              if (staticConfig.defaultProps) {
-                return Reflect.get(staticConfig.defaultProps, key2);
-              }
-            }
-          })
-        });
-      }
-      if (isObj(variantValue)) {
-        variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
+            })
+          });
+        }
+        if (isObj(variantValue)) {
+          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
+        }
+        return variantValue;
       }
-      return variantValue;
     }
     let shouldReturn = false;
     if (conf.shorthands[key]) {
@@ -108,34 +112,28 @@ const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily, re
   }
   return res;
 }, "resolveTokens");
-const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fontFamily = "$body", resolveAs) => {
-  var _a, _b, _c, _d, _e;
+const fontShorthand = {
+  fontSize: "size",
+  fontWeight: "weight"
+};
+const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs) => {
+  var _a, _b, _c;
   let valOrVar;
   let hasSet = false;
-  const valueName = value[0] === "$" ? value.slice(1) : value;
-  if (valueName in theme) {
-    valOrVar = theme[valueName];
+  if (value in theme) {
+    valOrVar = theme[value];
     hasSet = true;
   } else {
     switch (key) {
       case "fontFamily":
-        valOrVar = ((_a = tokensParsed.font[value]) == null ? void 0 : _a.family) || value;
+        valOrVar = ((_a = fontsParsed[value]) == null ? void 0 : _a.family) || value;
         hasSet = true;
         break;
       case "fontSize":
-        valOrVar = ((_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b.size[value]) || value;
-        hasSet = true;
-        break;
       case "lineHeight":
-        valOrVar = ((_c = tokensParsed.font[fontFamily]) == null ? void 0 : _c.lineHeight[value]) || value;
-        hasSet = true;
-        break;
       case "letterSpacing":
-        valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.letterSpacing[value]) || value;
-        hasSet = true;
-        break;
       case "fontWeight":
-        valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.weight[value]) || value;
+        valOrVar = ((_c = (_b = fontsParsed[fontFamily]) == null ? void 0 : _b[fontShorthand[key] || key]) == null ? void 0 : _c[value]) || value;
         hasSet = true;
         break;
     }
@@ -161,7 +159,7 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed }, theme, fo
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token in theme:`, value, theme);
+      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed);
       return null;
     }
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/createPropMapper.ts"],
-  "sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig } from '../types'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable'\n\nexport const createPropMapper = (c: StaticConfig) => {\n  const variants = c.variants || {}\n\n  // goes through specificity finding best matching variant function\n  function getVariantFunction(variant: any, key: string, value: any) {\n    for (const cat in tokenCategories) {\n      if (key in tokenCategories[cat]) {\n        const spreadVariant = variant[`...${cat}`]\n        if (spreadVariant) {\n          return spreadVariant\n        }\n      }\n    }\n    let fn: any\n    if (typeof value === 'number') {\n      fn = variant[':number']\n    } else if (typeof value === 'string') {\n      fn = variant[':string']\n    } else if (value === true || value === false) {\n      fn = variant[':boolean']\n    }\n    fn = fn || variant[value]\n    // fallback to size ultimately - could do token level detection\n    return fn || variant['...'] || variant['...size']\n  }\n\n  const defaultProps = c.defaultProps || {}\n\n  return (\n    key: string,\n    value: any,\n    theme: any,\n    props: any,\n    staticConfig: StaticConfig,\n    returnVariablesAs: ResolveVariableTypes = !!props.animation ? 'value' : 'auto',\n    avoidDefaultProps = false\n  ) => {\n    const conf = getConfig()\n    if (!conf) {\n      console.trace('no conf! err')\n      return\n    }\n\n    // handled here because we need to resolve this off tokens, its the only one-off like this\n    let fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n\n    // expand variants\n    const variant = variants && variants[key]\n\n    if (variant && value !== undefined) {\n      let variantValue = getVariantFunction(variant, key, value)\n\n      if (!variantValue) {\n        return value\n      }\n\n      if (typeof variantValue === 'function') {\n        variantValue = variantValue(value, {\n          tokens: conf.tokensParsed,\n          theme,\n          // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n          props: avoidDefaultProps\n            ? props\n            : new Proxy(props, {\n                get(target, key) {\n                  if (Reflect.has(target, key)) {\n                    return Reflect.get(target, key)\n                  }\n                  // these props may be extracted into classNames, but we still want to access them\n                  // at runtime, so we proxy back to defaultProps but don't pass them\n                  if (staticConfig.defaultProps) {\n                    return Reflect.get(staticConfig.defaultProps, key)\n                  }\n                },\n              }),\n        })\n      }\n\n      // console.log(\n      //   'GOGO',\n      //   variantValue,\n      //   'now',\n      //   resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs)\n      // )\n\n      if (isObj(variantValue)) {\n        variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs)\n      }\n\n      return variantValue\n    }\n\n    let shouldReturn = false\n\n    // handle shorthands\n    if (conf.shorthands[key]) {\n      shouldReturn = true\n      key = conf.shorthands[key]\n    }\n\n    if (value) {\n      shouldReturn = true\n      if (value[0] === '$') {\n        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs)\n      } else if (isVariable(value)) {\n        value = getVariableValue(value, returnVariablesAs)\n      }\n    }\n\n    if (shouldReturn) {\n      return {\n        [key]: value,\n      }\n    }\n  }\n}\n\nconst resolveTokens = (\n  input: Object,\n  conf: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: any,\n  resolveAs?: ResolveVariableTypes\n) => {\n  let res = {}\n  for (const rKey in input) {\n    const fKey = conf.shorthands[rKey] || rKey\n    const val = input[rKey]\n    if (isVariable(val)) {\n      res[fKey] =\n        resolveAs === 'variable' ? val : !isWeb || resolveAs === 'value' ? val.val : val.variable\n    } else if (typeof val === 'string') {\n      const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily, resolveAs) : val\n      res[fKey] = fVal\n    } else {\n      if (isObj(val)) {\n        // for things like shadowOffset, hoverStyle which is a sub-object\n        res[fKey] = resolveTokens(val, conf, theme, fontFamily, resolveAs)\n      } else {\n        // nullish values cant be tokens so need no exrta parsing\n        res[fKey] = input[fKey]\n      }\n    }\n    if (process.env.NODE_ENV === 'development') {\n      if (res[fKey]?.[0] === '$') {\n        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey])\n      }\n    }\n  }\n  return res\n}\n\nconst getToken = (\n  key: string,\n  value: string,\n  { tokensParsed }: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: string | undefined = '$body',\n  resolveAs?: ResolveVariableTypes\n) => {\n  let valOrVar: any\n  let hasSet = false\n  const valueName = value[0] === '$' ? value.slice(1) : value\n  if (valueName in theme) {\n    valOrVar = theme[valueName]\n    hasSet = true\n  } else {\n    switch (key) {\n      case 'fontFamily':\n        valOrVar = tokensParsed.font[value]?.family || value\n        hasSet = true\n        break\n      case 'fontSize':\n        valOrVar = tokensParsed.font[fontFamily]?.size[value] || value\n        hasSet = true\n        break\n      case 'lineHeight':\n        valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value\n        hasSet = true\n        break\n      case 'letterSpacing':\n        valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value\n        hasSet = true\n        break\n      case 'fontWeight':\n        valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value\n        hasSet = true\n        break\n    }\n    for (const cat in tokenCategories) {\n      if (key in tokenCategories[cat]) {\n        const res = tokensParsed[cat][value]\n        if (res) {\n          valOrVar = res\n          hasSet = true\n        }\n      }\n    }\n    if (!hasSet) {\n      const spaceVar = tokensParsed.space[value]\n      if (spaceVar) {\n        valOrVar = spaceVar\n        hasSet = true\n      }\n    }\n  }\n  if (hasSet) {\n    return getVariableValue(valOrVar, resolveAs)\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (value && value[0] === '$') {\n      console.warn(`\u26A0\uFE0F Missing token in theme:`, value, theme)\n      return null\n    }\n  }\n  return value\n}\n\nfunction getVariableValue(valOrVar: Variable | any, resolveAs: ResolveVariableTypes = 'auto') {\n  if (isVariable(valOrVar)) {\n    if (resolveAs === 'variable') {\n      return valOrVar\n    }\n    if (!isWeb || resolveAs === 'value') {\n      return valOrVar.val\n    }\n    return valOrVar.variable\n  }\n  return valOrVar\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n  radius: {\n    borderRadius: true,\n  },\n  size: {\n    width: true,\n    height: true,\n    minWidth: true,\n    minHeight: true,\n    maxWidth: true,\n    maxHeight: true,\n  },\n  color: {\n    color: true,\n    backgroundColor: true,\n    borderColor: true,\n    borderBottomColor: true,\n    borderTopColor: true,\n    borderLeftColor: true,\n    borderRightColor: true,\n  },\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { Variable, isVariable } from '../createVariable'\nimport { StaticConfig, TamaguiInternalConfig, VariantSpreadFunction } from '../types'\nimport { isObj } from './isObj'\n\nexport type ResolveVariableTypes = 'auto' | 'value' | 'variable' | 'both'\n\n// goes through specificity finding best matching variant function\nfunction getVariantFunction(variant: any, key: string, value: any) {\n  if (typeof variant === 'function') {\n    return variant\n  }\n  for (const cat in tokenCategories) {\n    if (key in tokenCategories[cat]) {\n      const spreadVariant = variant[`...${cat}`]\n      if (spreadVariant) {\n        return spreadVariant\n      }\n    }\n  }\n  let fn: any\n  if (typeof value === 'number') {\n    fn = variant[':number']\n  } else if (typeof value === 'string') {\n    fn = variant[':string']\n  } else if (value === true || value === false) {\n    fn = variant[':boolean']\n  }\n  fn = fn || variant[value]\n  // fallback to size ultimately - could do token level detection\n  return fn || variant['...'] || variant['...size']\n}\n\nexport const createPropMapper = (staticConfig: Partial<StaticConfig>) => {\n  const variants = staticConfig.variants || {}\n  const defaultProps = staticConfig.defaultProps || {}\n\n  return (\n    key: string,\n    value: any,\n    theme: any,\n    props: any,\n    returnVariablesAs: ResolveVariableTypes = !!props.animation ? 'value' : 'auto',\n    avoidDefaultProps = false\n  ) => {\n    const conf = getConfig()\n    if (!conf) {\n      console.trace('no conf! err')\n      return\n    }\n\n    // handled here because we need to resolve this off tokens, its the only one-off like this\n    const fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'\n    const variant = variants && variants[key]\n\n    if (variant && value !== undefined) {\n      let variantValue = getVariantFunction(variant, key, value)\n\n      if (variantValue) {\n        if (typeof variantValue === 'function') {\n          const fn = variantValue as VariantSpreadFunction<any>\n          variantValue = fn(value, {\n            fonts: conf.fontsParsed,\n            tokens: conf.tokensParsed,\n            theme,\n            // TODO do this in splitstlye\n            // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n            props: avoidDefaultProps\n              ? props\n              : new Proxy(props, {\n                  get(target, key) {\n                    if (Reflect.has(target, key)) {\n                      return Reflect.get(target, key)\n                    }\n                    // these props may be extracted into classNames, but we still want to access them\n                    // at runtime, so we proxy back to defaultProps but don't pass them\n                    if (defaultProps) {\n                      return Reflect.get(defaultProps, key)\n                    }\n                  },\n                }),\n          })\n        }\n\n        if (isObj(variantValue)) {\n          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs)\n        }\n\n        return variantValue\n      }\n    }\n\n    let shouldReturn = false\n\n    // handle shorthands\n    if (conf.shorthands[key]) {\n      shouldReturn = true\n      key = conf.shorthands[key]\n    }\n\n    if (value) {\n      shouldReturn = true\n      if (value[0] === '$') {\n        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs)\n      } else if (isVariable(value)) {\n        value = getVariableValue(value, returnVariablesAs)\n      }\n    }\n\n    if (shouldReturn) {\n      return {\n        [key]: value,\n      }\n    }\n  }\n}\n\nconst resolveTokens = (\n  input: Object,\n  conf: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: any,\n  resolveAs?: ResolveVariableTypes\n) => {\n  let res = {}\n  for (const rKey in input) {\n    const fKey = conf.shorthands[rKey] || rKey\n    const val = input[rKey]\n    if (isVariable(val)) {\n      res[fKey] =\n        resolveAs === 'variable' ? val : !isWeb || resolveAs === 'value' ? val.val : val.variable\n    } else if (typeof val === 'string') {\n      const fVal = val[0] === '$' ? getToken(fKey, val, conf, theme, fontFamily, resolveAs) : val\n      res[fKey] = fVal\n    } else {\n      if (isObj(val)) {\n        // for things like shadowOffset, hoverStyle which is a sub-object\n        res[fKey] = resolveTokens(val, conf, theme, fontFamily, resolveAs)\n      } else {\n        // nullish values cant be tokens so need no exrta parsing\n        res[fKey] = input[fKey]\n      }\n    }\n    if (process.env.NODE_ENV === 'development') {\n      if (res[fKey]?.[0] === '$') {\n        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey])\n      }\n    }\n  }\n  return res\n}\n\nconst fontShorthand = {\n  fontSize: 'size',\n  fontWeight: 'weight',\n}\n\nconst getToken = (\n  key: string,\n  value: string,\n  { tokensParsed, fontsParsed }: TamaguiInternalConfig,\n  theme: any,\n  fontFamily: string | undefined = '$body',\n  resolveAs?: ResolveVariableTypes\n) => {\n  let valOrVar: any\n  let hasSet = false\n  if (value in theme) {\n    valOrVar = theme[value]\n    hasSet = true\n  } else {\n    switch (key) {\n      case 'fontFamily':\n        valOrVar = fontsParsed[value]?.family || value\n        hasSet = true\n        break\n      case 'fontSize':\n      case 'lineHeight':\n      case 'letterSpacing':\n      case 'fontWeight':\n        valOrVar = fontsParsed[fontFamily]?.[fontShorthand[key] || key]?.[value] || value\n        hasSet = true\n        break\n    }\n    for (const cat in tokenCategories) {\n      if (key in tokenCategories[cat]) {\n        const res = tokensParsed[cat][value]\n        if (res) {\n          valOrVar = res\n          hasSet = true\n        }\n      }\n    }\n    if (!hasSet) {\n      const spaceVar = tokensParsed.space[value]\n      if (spaceVar) {\n        valOrVar = spaceVar\n        hasSet = true\n      }\n    }\n  }\n  if (hasSet) {\n    return getVariableValue(valOrVar, resolveAs)\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (value && value[0] === '$') {\n      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed)\n      return null\n    }\n  }\n  return value\n}\n\nfunction getVariableValue(valOrVar: Variable | any, resolveAs: ResolveVariableTypes = 'auto') {\n  if (isVariable(valOrVar)) {\n    if (resolveAs === 'variable') {\n      return valOrVar\n    }\n    if (!isWeb || resolveAs === 'value') {\n      return valOrVar.val\n    }\n    return valOrVar.variable\n  }\n  return valOrVar\n}\n\n// just specificy the least costly, all else go to `space` (most keys - we can exclude)\nconst tokenCategories = {\n  radius: {\n    borderRadius: true,\n  },\n  size: {\n    width: true,\n    height: true,\n    minWidth: true,\n    minHeight: true,\n    maxWidth: true,\n    maxHeight: true,\n  },\n  color: {\n    color: true,\n    backgroundColor: true,\n    borderColor: true,\n    borderBottomColor: true,\n    borderTopColor: true,\n    borderLeftColor: true,\n    borderRightColor: true,\n  },\n}\n"],
+  "mappings": ";;AAAA;AACA;AACA;AAEA;AAKA,4BAA4B,SAAc,KAAa,OAAY;AACjE,MAAI,OAAO,YAAY,YAAY;AACjC,WAAO;AAAA,EACT;AACA,aAAW,OAAO,iBAAiB;AACjC,QAAI,OAAO,gBAAgB,MAAM;AAC/B,YAAM,gBAAgB,QAAQ,MAAM;AACpC,UAAI,eAAe;AACjB,eAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACA,MAAI;AACJ,MAAI,OAAO,UAAU,UAAU;AAC7B,SAAK,QAAQ;AAAA,EACf,WAAW,OAAO,UAAU,UAAU;AACpC,SAAK,QAAQ;AAAA,EACf,WAAW,UAAU,QAAQ,UAAU,OAAO;AAC5C,SAAK,QAAQ;AAAA,EACf;AACA,OAAK,MAAM,QAAQ;AAEnB,SAAO,MAAM,QAAQ,UAAU,QAAQ;AACzC;AAvBS;AAyBF,MAAM,mBAAmB,wBAAC,iBAAwC;AACvE,QAAM,WAAW,aAAa,YAAY,CAAC;AAC3C,QAAM,eAAe,aAAa,gBAAgB,CAAC;AAEnD,SAAO,CACL,KACA,OACA,OACA,OACA,oBAA0C,CAAC,CAAC,MAAM,YAAY,UAAU,QACxE,oBAAoB,UACjB;AACH,UAAM,OAAO,UAAU;AACvB,QAAI,CAAC,MAAM;AACT,cAAQ,MAAM,cAAc;AAC5B;AAAA,IACF;AAGA,UAAM,aAAa,MAAM,cAAc,aAAa,cAAc;AAClE,UAAM,UAAU,YAAY,SAAS;AAErC,QAAI,WAAW,UAAU,QAAW;AAClC,UAAI,eAAe,mBAAmB,SAAS,KAAK,KAAK;AAEzD,UAAI,cAAc;AAChB,YAAI,OAAO,iBAAiB,YAAY;AACtC,gBAAM,KAAK;AACX,yBAAe,GAAG,OAAO;AAAA,YACvB,OAAO,KAAK;AAAA,YACZ,QAAQ,KAAK;AAAA,YACb;AAAA,YAGA,OAAO,oBACH,QACA,IAAI,MAAM,OAAO;AAAA,cACf,IAAI,QAAQ,MAAK;AACf,oBAAI,QAAQ,IAAI,QAAQ,IAAG,GAAG;AAC5B,yBAAO,QAAQ,IAAI,QAAQ,IAAG;AAAA,gBAChC;AAGA,oBAAI,cAAc;AAChB,yBAAO,QAAQ,IAAI,cAAc,IAAG;AAAA,gBACtC;AAAA,cACF;AAAA,YACF,CAAC;AAAA,UACP,CAAC;AAAA,QACH;AAEA,YAAI,MAAM,YAAY,GAAG;AACvB,yBAAe,cAAc,cAAc,MAAM,OAAO,YAAY,iBAAiB;AAAA,QACvF;AAEA,eAAO;AAAA,MACT;AAAA,IACF;AAEA,QAAI,eAAe;AAGnB,QAAI,KAAK,WAAW,MAAM;AACxB,qBAAe;AACf,YAAM,KAAK,WAAW;AAAA,IACxB;AAEA,QAAI,OAAO;AACT,qBAAe;AACf,UAAI,MAAM,OAAO,KAAK;AACpB,gBAAQ,SAAS,KAAK,OAAO,MAAM,OAAO,YAAY,iBAAiB;AAAA,MACzE,WAAW,WAAW,KAAK,GAAG;AAC5B,gBAAQ,iBAAiB,OAAO,iBAAiB;AAAA,MACnD;AAAA,IACF;AAEA,QAAI,cAAc;AAChB,aAAO;AAAA,SACJ,MAAM;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF,GAlFgC;AAoFhC,MAAM,gBAAgB,wBACpB,OACA,MACA,OACA,YACA,cACG;AA5HL;AA6HE,MAAI,MAAM,CAAC;AACX,aAAW,QAAQ,OAAO;AACxB,UAAM,OAAO,KAAK,WAAW,SAAS;AACtC,UAAM,MAAM,MAAM;AAClB,QAAI,WAAW,GAAG,GAAG;AACnB,UAAI,QACF,cAAc,aAAa,MAAM,CAAC,SAAS,cAAc,UAAU,IAAI,MAAM,IAAI;AAAA,IACrF,WAAW,OAAO,QAAQ,UAAU;AAClC,YAAM,OAAO,IAAI,OAAO,MAAM,SAAS,MAAM,KAAK,MAAM,OAAO,YAAY,SAAS,IAAI;AACxF,UAAI,QAAQ;AAAA,IACd,OAAO;AACL,UAAI,MAAM,GAAG,GAAG;AAEd,YAAI,QAAQ,cAAc,KAAK,MAAM,OAAO,YAAY,SAAS;AAAA,MACnE,OAAO;AAEL,YAAI,QAAQ,MAAM;AAAA,MACpB;AAAA,IACF;AACA,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,WAAI,UAAJ,mBAAY,QAAO,KAAK;AAC1B,gBAAQ,KAAK,uCAA6B,MAAM,SAAS,MAAM,IAAI,KAAK;AAAA,MAC1E;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT,GAjCsB;AAmCtB,MAAM,gBAAgB;AAAA,EACpB,UAAU;AAAA,EACV,YAAY;AACd;AAEA,MAAM,WAAW,wBACf,KACA,OACA,EAAE,cAAc,eAChB,OACA,aAAiC,SACjC,cACG;AArKL;AAsKE,MAAI;AACJ,MAAI,SAAS;AACb,MAAI,SAAS,OAAO;AAClB,eAAW,MAAM;AACjB,aAAS;AAAA,EACX,OAAO;AACL,YAAQ;AAAA,WACD;AACH,mBAAW,mBAAY,WAAZ,mBAAoB,WAAU;AACzC,iBAAS;AACT;AAAA,WACG;AAAA,WACA;AAAA,WACA;AAAA,WACA;AACH,mBAAW,yBAAY,gBAAZ,mBAA0B,cAAc,QAAQ,SAAhD,mBAAuD,WAAU;AAC5E,iBAAS;AACT;AAAA;AAEJ,eAAW,OAAO,iBAAiB;AACjC,UAAI,OAAO,gBAAgB,MAAM;AAC/B,cAAM,MAAM,aAAa,KAAK;AAC9B,YAAI,KAAK;AACP,qBAAW;AACX,mBAAS;AAAA,QACX;AAAA,MACF;AAAA,IACF;AACA,QAAI,CAAC,QAAQ;AACX,YAAM,WAAW,aAAa,MAAM;AACpC,UAAI,UAAU;AACZ,mBAAW;AACX,iBAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACA,MAAI,QAAQ;AACV,WAAO,iBAAiB,UAAU,SAAS;AAAA,EAC7C;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,SAAS,MAAM,OAAO,KAAK;AAC7B,cAAQ,KAAK,+BAAqB,KAAK,OAAO,YAAY,OAAO,WAAW;AAC5E,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT,GAtDiB;AAwDjB,0BAA0B,UAA0B,YAAkC,QAAQ;AAC5F,MAAI,WAAW,QAAQ,GAAG;AACxB,QAAI,cAAc,YAAY;AAC5B,aAAO;AAAA,IACT;AACA,QAAI,CAAC,SAAS,cAAc,SAAS;AACnC,aAAO,SAAS;AAAA,IAClB;AACA,WAAO,SAAS;AAAA,EAClB;AACA,SAAO;AACT;AAXS;AAcT,MAAM,kBAAkB;AAAA,EACtB,QAAQ;AAAA,IACN,cAAc;AAAA,EAChB;AAAA,EACA,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,OAAO;AAAA,IACP,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,mBAAmB;AAAA,IACnB,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,EACpB;AACF;",
   "names": []
 }

package/dist/esm/helpers/extendStaticConfig.js

@@ -2,12 +2,9 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { stylePropsView } from "@tamagui/helpers";
 import { createPropMapper } from "./createPropMapper";
-function extendStaticConfig(parent, config = {}) {
+function extendStaticConfig(config, parent) {
   var _a;
-  if (!parent) {
-    throw new Error("no parent");
-  }
-  if (!("staticConfig" in parent)) {
+  if (!parent || !("staticConfig" in parent)) {
     return parseStaticConfig(config);
   }
   const variants = {
@@ -38,9 +35,15 @@ function extendStaticConfig(parent, config = {}) {
       ...parent.staticConfig.validStyles,
       ...config.validStyles
     } : parent.staticConfig.validStyles || stylePropsView,
+    defaultVariants: {
+      ...parent.staticConfig.defaultVariants,
+      ...config.defaultVariants
+    },
     defaultProps: {
       ...parent.staticConfig.defaultProps,
-      ...config.defaultProps
+      ...parent.staticConfig.defaultVariants,
+      ...config.defaultProps,
+      ...config.defaultVariants
     }
   });
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/extendStaticConfig.ts"],
-  "sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\n\nexport function extendStaticConfig(\n  // can be undefined when loading with @tamagui/fake-react-native\n  // could be fixed a bit cleaner\n  parent?: StylableComponent,\n  config: StaticConfig = {}\n): StaticConfigParsed | null {\n  if (!parent) {\n    throw new Error('no parent')\n  }\n\n  if (!('staticConfig' in parent)) {\n    return parseStaticConfig(config)\n  }\n\n  const variants = {\n    ...parent.staticConfig.variants,\n  }\n\n  // merge variants... can we type this?\n  if (config.variants) {\n    for (const key in config.variants) {\n      if (variants[key]) {\n        variants[key] = {\n          ...variants[key],\n          ...config.variants[key],\n        }\n      } else {\n        variants[key] = config.variants[key]\n      }\n    }\n  }\n\n  return parseStaticConfig({\n    ...parent.staticConfig,\n    ...config,\n    variants,\n    isZStack: config.isZStack || parent.staticConfig.isZStack,\n    isText: config.isText || parent.staticConfig.isText || false,\n    isInput: config.isInput || parent.staticConfig.isInput || false,\n    neverFlatten: config.neverFlatten || parent.staticConfig.neverFlatten,\n    ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,\n    validStyles: config.validStyles\n      ? {\n          ...parent.staticConfig.validStyles,\n          ...config.validStyles,\n        }\n      : parent.staticConfig.validStyles || stylePropsView,\n    defaultProps: {\n      ...parent.staticConfig.defaultProps,\n      ...config.defaultProps,\n    },\n  })\n}\n\nexport const parseStaticConfig = (config: StaticConfig): StaticConfigParsed => {\n  return {\n    ...config,\n    parsed: true,\n    propMapper: createPropMapper(config),\n  }\n}\n"],
-  "mappings": ";;AAAA;AAGA;AAEO,4BAGL,QACA,SAAuB,CAAC,GACG;AAV7B;AAWE,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,WAAW;AAAA,EAC7B;AAEA,MAAI,CAAE,mBAAkB,SAAS;AAC/B,WAAO,kBAAkB,MAAM;AAAA,EACjC;AAEA,QAAM,WAAW;AAAA,OACZ,OAAO,aAAa;AAAA,EACzB;AAGA,MAAI,OAAO,UAAU;AACnB,eAAW,OAAO,OAAO,UAAU;AACjC,UAAI,SAAS,MAAM;AACjB,iBAAS,OAAO;AAAA,aACX,SAAS;AAAA,aACT,OAAO,SAAS;AAAA,QACrB;AAAA,MACF,OAAO;AACL,iBAAS,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAEA,SAAO,kBAAkB;AAAA,OACpB,OAAO;AAAA,OACP;AAAA,IACH;AAAA,IACA,UAAU,OAAO,YAAY,OAAO,aAAa;AAAA,IACjD,QAAQ,OAAO,UAAU,OAAO,aAAa,UAAU;AAAA,IACvD,SAAS,OAAO,WAAW,OAAO,aAAa,WAAW;AAAA,IAC1D,cAAc,OAAO,gBAAgB,OAAO,aAAa;AAAA,IACzD,sBAAsB,aAAO,yBAAP,YAA+B,OAAO,aAAa;AAAA,IACzE,aAAa,OAAO,cAChB;AAAA,SACK,OAAO,aAAa;AAAA,SACpB,OAAO;AAAA,IACZ,IACA,OAAO,aAAa,eAAe;AAAA,IACvC,cAAc;AAAA,SACT,OAAO,aAAa;AAAA,SACpB,OAAO;AAAA,IACZ;AAAA,EACF,CAAC;AACH;AApDgB;AAsDT,MAAM,oBAAoB,wBAAC,WAA6C;AAC7E,SAAO;AAAA,OACF;AAAA,IACH,QAAQ;AAAA,IACR,YAAY,iBAAiB,MAAM;AAAA,EACrC;AACF,GANiC;",
+  "sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\n\nexport function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {\n  if (!parent || !('staticConfig' in parent)) {\n    return parseStaticConfig(config)\n  }\n\n  const variants = {\n    ...parent.staticConfig.variants,\n  }\n\n  // merge variants... can we type this?\n  if (config.variants) {\n    for (const key in config.variants) {\n      if (variants[key]) {\n        variants[key] = {\n          ...variants[key],\n          ...config.variants[key],\n        }\n      } else {\n        variants[key] = config.variants[key]\n      }\n    }\n  }\n\n  return parseStaticConfig({\n    ...parent.staticConfig,\n    ...config,\n    variants,\n    isZStack: config.isZStack || parent.staticConfig.isZStack,\n    isText: config.isText || parent.staticConfig.isText || false,\n    isInput: config.isInput || parent.staticConfig.isInput || false,\n    neverFlatten: config.neverFlatten || parent.staticConfig.neverFlatten,\n    ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,\n    validStyles: config.validStyles\n      ? {\n          ...parent.staticConfig.validStyles,\n          ...config.validStyles,\n        }\n      : parent.staticConfig.validStyles || stylePropsView,\n    defaultVariants: {\n      ...parent.staticConfig.defaultVariants,\n      ...config.defaultVariants,\n    },\n    defaultProps: {\n      ...parent.staticConfig.defaultProps,\n      ...parent.staticConfig.defaultVariants,\n      ...config.defaultProps,\n      ...config.defaultVariants,\n    },\n  })\n}\n\nexport const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {\n  return {\n    ...config,\n    parsed: true,\n    propMapper: createPropMapper(config),\n  }\n}\n"],
+  "mappings": ";;AAAA;AAGA;AAEO,4BAA4B,QAA+B,QAA4B;AAL9F;AAME,MAAI,CAAC,UAAU,CAAE,mBAAkB,SAAS;AAC1C,WAAO,kBAAkB,MAAM;AAAA,EACjC;AAEA,QAAM,WAAW;AAAA,OACZ,OAAO,aAAa;AAAA,EACzB;AAGA,MAAI,OAAO,UAAU;AACnB,eAAW,OAAO,OAAO,UAAU;AACjC,UAAI,SAAS,MAAM;AACjB,iBAAS,OAAO;AAAA,aACX,SAAS;AAAA,aACT,OAAO,SAAS;AAAA,QACrB;AAAA,MACF,OAAO;AACL,iBAAS,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAEA,SAAO,kBAAkB;AAAA,OACpB,OAAO;AAAA,OACP;AAAA,IACH;AAAA,IACA,UAAU,OAAO,YAAY,OAAO,aAAa;AAAA,IACjD,QAAQ,OAAO,UAAU,OAAO,aAAa,UAAU;AAAA,IACvD,SAAS,OAAO,WAAW,OAAO,aAAa,WAAW;AAAA,IAC1D,cAAc,OAAO,gBAAgB,OAAO,aAAa;AAAA,IACzD,sBAAsB,aAAO,yBAAP,YAA+B,OAAO,aAAa;AAAA,IACzE,aAAa,OAAO,cAChB;AAAA,SACK,OAAO,aAAa;AAAA,SACpB,OAAO;AAAA,IACZ,IACA,OAAO,aAAa,eAAe;AAAA,IACvC,iBAAiB;AAAA,SACZ,OAAO,aAAa;AAAA,SACpB,OAAO;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,SACT,OAAO,aAAa;AAAA,SACpB,OAAO,aAAa;AAAA,SACpB,OAAO;AAAA,SACP,OAAO;AAAA,IACZ;AAAA,EACF,CAAC;AACH;AAjDgB;AAmDT,MAAM,oBAAoB,wBAAC,WAAsD;AACtF,SAAO;AAAA,OACF;AAAA,IACH,QAAQ;AAAA,IACR,YAAY,iBAAiB,MAAM;AAAA,EACrC;AACF,GANiC;",
   "names": []
 }

package/dist/esm/helpers/fixNativeShadow.native.js

@@ -18,8 +18,8 @@ function fixNativeShadow(props) {
   if ((c[0] === "r" || c[0] === "h") && c[3] === "a") {
     const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || [];
     if (typeof a !== "string") {
-      console.warn("invalid", c, type);
-      return;
+      console.trace("invalid", c, type);
+      throw new Error(`invalid style`);
     }
     props.shadowColor = `${type.replace("a", "")}(${_1},${_2},${_3})`;
     props.shadowOpacity = +a;

package/dist/esm/helpers/fixNativeShadow.native.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/fixNativeShadow.native.tsx"],
-  "sourcesContent": ["const matchRgbaHsla =\n  /(rgba|hsla)\\(\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,})\\s*\\)$/\n\nexport function fixNativeShadow(props: any) {\n  if (!props.shadowColor) {\n    return\n  }\n  if (!props.shadowOffset) {\n    // fixes some broken shadows\n    props.shadowOffset = {\n      width: 0,\n      height: 0,\n    }\n  }\n  if ('shadowOpacity' in props) {\n    return\n  }\n  const c = `${props.shadowColor}`\n  // react native has issues sometimes with rgba()\n  // supports rgba + hsla\n  if ((c[0] === 'r' || c[0] === 'h') && c[3] === 'a') {\n    const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || []\n    if (typeof a !== 'string') {\n      console.warn('invalid', c, type)\n      return\n    }\n    props.shadowColor = `${type.replace('a', '')}(${_1},${_2},${_3})`\n    props.shadowOpacity = +a\n  } else {\n    props.shadowOpacity = 1\n  }\n}\n"],
-  "mappings": ";;AAAA,MAAM,gBACJ;AAEK,yBAAyB,OAAY;AAC1C,MAAI,CAAC,MAAM,aAAa;AACtB;AAAA,EACF;AACA,MAAI,CAAC,MAAM,cAAc;AAEvB,UAAM,eAAe;AAAA,MACnB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACA,MAAI,mBAAmB,OAAO;AAC5B;AAAA,EACF;AACA,QAAM,IAAI,GAAG,MAAM;AAGnB,MAAK,GAAE,OAAO,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO,KAAK;AAClD,UAAM,CAAC,GAAG,MAAM,IAAI,IAAI,IAAI,KAAK,EAAE,MAAM,aAAa,KAAK,CAAC;AAC5D,QAAI,OAAO,MAAM,UAAU;AACzB,cAAQ,KAAK,WAAW,GAAG,IAAI;AAC/B;AAAA,IACF;AACA,UAAM,cAAc,GAAG,KAAK,QAAQ,KAAK,EAAE,KAAK,MAAM,MAAM;AAC5D,UAAM,gBAAgB,CAAC;AAAA,EACzB,OAAO;AACL,UAAM,gBAAgB;AAAA,EACxB;AACF;AA5BgB;",
+  "sourcesContent": ["const matchRgbaHsla =\n  /(rgba|hsla)\\(\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,}%?)\\s*,\\s*([\\d\\.]{1,})\\s*\\)$/\n\nexport function fixNativeShadow(props: any) {\n  if (!props.shadowColor) {\n    return\n  }\n  if (!props.shadowOffset) {\n    // fixes some broken shadows\n    props.shadowOffset = {\n      width: 0,\n      height: 0,\n    }\n  }\n  if ('shadowOpacity' in props) {\n    return\n  }\n  const c = `${props.shadowColor}`\n  // react native has issues sometimes with rgba()\n  // supports rgba + hsla\n  if ((c[0] === 'r' || c[0] === 'h') && c[3] === 'a') {\n    const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || []\n    if (typeof a !== 'string') {\n      console.trace('invalid', c, type)\n      throw new Error(`invalid style`)\n    }\n    props.shadowColor = `${type.replace('a', '')}(${_1},${_2},${_3})`\n    props.shadowOpacity = +a\n  } else {\n    props.shadowOpacity = 1\n  }\n}\n"],
+  "mappings": ";;AAAA,MAAM,gBACJ;AAEK,yBAAyB,OAAY;AAC1C,MAAI,CAAC,MAAM,aAAa;AACtB;AAAA,EACF;AACA,MAAI,CAAC,MAAM,cAAc;AAEvB,UAAM,eAAe;AAAA,MACnB,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,EACF;AACA,MAAI,mBAAmB,OAAO;AAC5B;AAAA,EACF;AACA,QAAM,IAAI,GAAG,MAAM;AAGnB,MAAK,GAAE,OAAO,OAAO,EAAE,OAAO,QAAQ,EAAE,OAAO,KAAK;AAClD,UAAM,CAAC,GAAG,MAAM,IAAI,IAAI,IAAI,KAAK,EAAE,MAAM,aAAa,KAAK,CAAC;AAC5D,QAAI,OAAO,MAAM,UAAU;AACzB,cAAQ,MAAM,WAAW,GAAG,IAAI;AAChC,YAAM,IAAI,MAAM,eAAe;AAAA,IACjC;AACA,UAAM,cAAc,GAAG,KAAK,QAAQ,KAAK,EAAE,KAAK,MAAM,MAAM;AAC5D,UAAM,gBAAgB,CAAC;AAAA,EACzB,OAAO;AACL,UAAM,gBAAgB;AAAA,EACxB;AACF;AA5BgB;",
   "names": []
 }

package/dist/esm/helpers/getSize.js

@@ -0,0 +1,13 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getTokens } from "../conf";
+const getSize = /* @__PURE__ */ __name((size, sizeUpOrDownBy = 0) => {
+  const sizes = getTokens().size;
+  const sizeNames = Object.keys(sizes);
+  const key = sizeNames[Math.max(0, sizeNames.indexOf(String(size || "$4")) + sizeUpOrDownBy)];
+  return sizes[key] || sizes["$4"];
+}, "getSize");
+export {
+  getSize
+};
+//# sourceMappingURL=getSize.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/getSize.ts"],
+  "sourcesContent": ["import { getTokens } from '../conf'\nimport { SizeTokens } from '../types'\n\nexport const getSize = (size?: SizeTokens | undefined, sizeUpOrDownBy = 0) => {\n  const sizes = getTokens().size as any as SizeTokens\n  const sizeNames = Object.keys(sizes)\n  const key = sizeNames[Math.max(0, sizeNames.indexOf(String(size || '$4')) + sizeUpOrDownBy)]\n  return (sizes[key] || sizes['$4']) as SizeTokens\n}\n"],
+  "mappings": ";;AAAA;AAGO,MAAM,UAAU,wBAAC,MAA+B,iBAAiB,MAAM;AAC5E,QAAM,QAAQ,UAAU,EAAE;AAC1B,QAAM,YAAY,OAAO,KAAK,KAAK;AACnC,QAAM,MAAM,UAAU,KAAK,IAAI,GAAG,UAAU,QAAQ,OAAO,QAAQ,IAAI,CAAC,IAAI,cAAc;AAC1F,SAAQ,MAAM,QAAQ,MAAM;AAC9B,GALuB;",
+  "names": []
+}

package/dist/esm/helpers/getSplitStyles.js

@@ -7,33 +7,25 @@ import {
   validPseudoKeys,
   validStyles
 } from "@tamagui/helpers";
-import { isWeb } from "../constants/platform";
+import { getConfig } from "../conf";
+import { isClient, isWeb } from "../constants/platform";
 import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
 import { fixNativeShadow } from "./fixNativeShadow";
 import { getStylesAtomic } from "./getStylesAtomic";
 import { insertStyleRule, insertedTransforms, updateInserted } from "./insertStyleRule";
-const skipKeys = {
+const skipProps = {
   animation: true,
-  animated: true,
-  children: true,
-  key: true,
-  ref: true
+  animateOnly: true,
+  debug: true
 };
-function normalizeStyleObject(style) {
-  var _a, _b;
-  if (typeof style.flex === "number") {
-    const val = style.flex;
-    delete style.flex;
-    style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
-    style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
-  }
-  if (!isWeb) {
-    fixNativeShadow(style);
-  }
-}
-__name(normalizeStyleObject, "normalizeStyleObject");
+let conf;
 const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
+  var _a;
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("  \xBB getSplitStyles", { props, state, defaultClassNames });
+  }
+  conf = conf || getConfig();
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
   const viewProps = {};
   const style = {};
@@ -45,20 +37,42 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   let cur = null;
   let transforms = {};
   function mergeClassName(key, val) {
-    if (!val)
+    if (!val) {
       return;
+    }
     if (val.startsWith("_transform-")) {
       const isMediaOrPseudo = key !== "transform";
       const isMedia = isMediaOrPseudo && key[11] === "_";
-      const isPsuedo = isMediaOrPseudo && !isMedia;
+      const isPsuedo = isMediaOrPseudo && key[11] === "0" || key.endsWith("Style");
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
-      if (!insertedTransforms[val]) {
-        updateInserted();
+      let transform = insertedTransforms[val];
+      if (isClient) {
+        if (!transform) {
+          updateInserted();
+          transform = insertedTransforms[val];
+        }
+        if (!transform) {
+          if (isWeb && val[0] !== "_") {
+            transform = val;
+          } else {
+            console.trace("?", key, val, cur, props, state);
+          }
+        }
+        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+          console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
+        }
+        if (process.env.NODE_ENV === "development") {
+          if (!transform) {
+            console.trace("NO TRANSFORM?", { key, val, transform });
+          }
+        }
       }
-      const transform = insertedTransforms[val];
       transforms[namespace] = transforms[namespace] || ["", ""];
-      transforms[namespace][0] += val.replace("_transform", "");
-      transforms[namespace][1] += transform;
+      const identifier = val.replace("_transform", "");
+      transforms[namespace][0] += identifier;
+      if (transform) {
+        transforms[namespace][1] += transform;
+      }
     } else {
       classNames[key] = val;
     }
@@ -68,17 +82,21 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     if (!cur)
       return;
     normalizeStyleObject(cur);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("  \xBB getSplitStyles push", cur, state);
+    }
     if (isWeb && !state.noClassNames) {
       const atomic = getStylesAtomic(cur);
       for (const atomicStyle of atomic) {
         if (!state.noClassNames) {
-          mergeClassName(atomicStyle.property, atomicStyle.identifier);
           insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0]);
+          mergeClassName(atomicStyle.property, atomicStyle.identifier);
         } else {
           style[atomicStyle.property] = atomicStyle.value;
         }
       }
-    } else {
+    }
+    if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
       for (const key in cur) {
         if (key in stylePropsTransform) {
           mergeTransform(style, key, cur[key]);
@@ -91,30 +109,40 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   }
   __name(push, "push");
   for (const keyInit in props) {
+    if (skipProps[keyInit]) {
+      continue;
+    }
     const valInit = props[keyInit];
-    if (skipKeys[keyInit]) {
-      viewProps[keyInit] = valInit;
+    if (keyInit === "style" || keyInit.startsWith("_style")) {
+      push();
+      cur = valInit;
+      push();
       continue;
     }
     if (keyInit === "className" || validStyleProps[keyInit] && valInit && valInit[0] === "_") {
       push();
       mergeClassName(keyInit, valInit);
-      if (cur) {
-        if (cur[keyInit])
-          console.warn("just want to see how used");
-        delete cur[keyInit];
-      }
       continue;
     }
+    if (state.keepVariantsAsProps && staticConfig.defaultVariants && keyInit in staticConfig.defaultVariants) {
+      viewProps[keyInit] = valInit;
+    }
     let isMedia = keyInit[0] === "$";
     let isPseudo = validPseudoKeys[keyInit];
-    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props, staticConfig, state.resolveVariablesAs);
+    if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
+      viewProps[keyInit] = valInit;
+      continue;
+    }
+    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
     const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("  \xBB getSplitStyles", keyInit, expanded);
+    }
     for (const [key, val] of expanded) {
       if (val === void 0) {
         continue;
       }
-      if (val && val[0] === "_") {
+      if (key !== "target" && val && val[0] === "_") {
         mergeClassName(key, val);
         continue;
       }
@@ -130,45 +158,46 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           continue;
         }
         pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true);
+        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
         if (isWeb && !state.noClassNames) {
           const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
           for (const style2 of pseudoStyles) {
-            mergeClassName(`${style2.property}-${key}`, style2.identifier);
             insertStyleRule(style2.identifier, style2.rules[0]);
+            mergeClassName(`${style2.property}-${key}`, style2.identifier);
           }
         }
         continue;
       }
       if (isMedia) {
-        const mediaKey = key.slice(1);
-        if (!mediaQueryConfig[mediaKey]) {
-          viewProps[key] = valInit;
+        const mediaKey = key;
+        const mediaKeyShort = mediaKey.slice(1);
+        if (!mediaQueryConfig[mediaKeyShort]) {
+          viewProps[key] = val;
           continue;
         }
-        const mediaStyle = getSubStyle(valInit, staticConfig, theme, props, state.resolveVariablesAs, true);
-        if (isWeb) {
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
+        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+          console.log("  \xBB getSplitStyles mediaStyle", mediaKey, mediaStyle, props);
+        }
+        const shouldDoClasses = isWeb && !state.noClassNames;
+        if (shouldDoClasses) {
           const mediaStyles = getStylesAtomic(mediaStyle);
           for (const style2 of mediaStyles) {
-            const out2 = createMediaStyle(style2, mediaKey, mediaQueryConfig);
-            mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
+            const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
             insertStyleRule(out2.identifier, out2.styleRule);
-          }
-          if (mediaState[mediaKey]) {
-            Object.assign(medias, mediaStyle);
+            mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
           }
         } else {
           if (mediaState[mediaKey]) {
-            Object.assign(style, mediaStyle);
+            push();
+            if (process.env.NODE_ENV === "development" && props["debug"]) {
+              console.log("apply media style", mediaKey, mediaState);
+            }
+            Object.assign(shouldDoClasses ? medias : style, mediaStyle);
           }
         }
         continue;
       }
-      if (key === "style" || key.startsWith("_style")) {
-        push();
-        Object.assign(style, val);
-        continue;
-      }
       if (!isWeb && key === "pointerEvents") {
         viewProps[key] = val;
         continue;
@@ -191,13 +220,18 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     for (const namespace in transforms) {
       const [hash, val] = transforms[namespace];
       const identifier = `_transform${hash}`;
-      if (!insertedTransforms[identifier]) {
-        const rule = `.${identifier} { transform: ${val}; }`;
-        insertStyleRule(identifier, rule);
+      if (isClient) {
+        if (!insertedTransforms[identifier]) {
+          const rule = `.${identifier} { transform: ${val}; }`;
+          insertStyleRule(identifier, rule);
+        }
       }
       classNames[namespace] = identifier;
     }
   }
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
+  }
   return {
     viewProps,
     style,
@@ -206,11 +240,11 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     classNames
   };
 }, "getSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, resolveVariablesAs, avoidDefaultProps) => {
+const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
   const styleOut = {};
   for (const key in styleIn) {
     const val = styleIn[key];
-    const out = staticConfig.propMapper(key, val, theme, props, staticConfig, resolveVariablesAs, avoidDefaultProps);
+    const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
     const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
     for (const [skey, sval] of expanded) {
       if (skey in stylePropsTransform) {
@@ -223,7 +257,22 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
   normalizeStyleObject(styleOut);
   return styleOut;
 }, "getSubStyle");
+function normalizeStyleObject(style) {
+  var _a, _b;
+  if (typeof style.flex === "number") {
+    const val = style.flex;
+    delete style.flex;
+    style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
+    style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
+  }
+  if (!isWeb) {
+    fixNativeShadow(style);
+  }
+}
+__name(normalizeStyleObject, "normalizeStyleObject");
 export {
-  getSplitStyles
+  getSplitStyles,
+  getSubStyle,
+  normalizeStyleObject
 };
 //# sourceMappingURL=getSplitStyles.js.map