@tamagui/core 1.0.1-beta.61 → 1.0.1-beta.64

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getStylesAtomic.ts"],
-  "sourcesContent": ["import { StyleObject, stylePropsTransform } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { reversedShorthands } from '../createTamagui'\nimport { isVariable } from '../createVariable'\nimport { RulesData, generateAtomicStyles } from './generateAtomicStyles'\nimport { invertMapTransformKeys, mergeTransform } from './mergeTransform'\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n  splitTransforms?: boolean\n}\n\n// *0 order matches to *1\nexport const pseudos = {\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n  pressStyle: {\n    name: 'active',\n    priority: 2,\n  },\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n} as const\n\ntype PseudoDescriptor = typeof pseudos[keyof typeof pseudos]\n\nconst pseudosOrdered = Object.values(pseudos)\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const psuedoCNInverse = {\n  hover: 'hoverStyle',\n  focus: 'focusStyle',\n  press: 'pressStyle',\n}\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options: AtomicStyleOptions = {}) {\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style || !Object.keys(style).length) {\n      continue\n    }\n    const pseudo = pseudosOrdered[index]\n    for (const skey in style) {\n      const val = style[skey]\n      if (isVariable(val)) {\n        style[skey] = val.toString()\n      }\n      if (stylePropsTransform[skey]) {\n        delete style[skey]\n        mergeTransform(style, skey, val)\n      }\n    }\n    res = [...res, ...getAtomicStyle(style, pseudo, options)]\n  }\n\n  return res\n}\n\nfunction getAtomicStyle(\n  style: ViewStyle,\n  pseudo: PseudoDescriptor | undefined,\n  options: AtomicStyleOptions\n): StyleObject[] {\n  if (style == null || typeof style !== 'object') {\n    throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n  }\n\n  // why is this diff from react-native-web!? need to figure out\n  for (const key in borderDefaults) {\n    if (key in style) {\n      style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'\n    }\n  }\n\n  let atomicStyles: { [key: string]: RulesData & { transformProperty?: string } } = {}\n\n  if (options.splitTransforms && style.transform) {\n    let { transform, ...rest } = style\n    Object.assign(atomicStyles, generateAtomicStyles(rest))\n    for (const t of transform) {\n      const tKey = Object.keys(t)[0]\n      const transformProperty = invertMapTransformKeys[tKey] || tKey\n      const out = generateAtomicStyles({ transform: [t] })\n      const key = Object.keys(out)[0]\n      atomicStyles[key] = {\n        ...out[key],\n        transformProperty,\n      }\n    }\n  } else {\n    // TODO we can do this all in one loop likely inside getSplitStyles in existing loop and avoid O(n^3)...\n    atomicStyles = generateAtomicStyles(style)\n  }\n\n  // TODO ... and then also avoid this loop! n^4\n  return Object.keys(atomicStyles).map((key) => {\n    const val = atomicStyles[key]\n    const hash = val.identifier\n    // pseudos have a `--` to be easier to find with concatClassNames\n    const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\n    if (!val.property) {\n      throw new Error(`no prop`)\n    }\n    const shortProp = reversedShorthands[val.property] || val.property\n    const identifier = `_${shortProp}-${psuedoPrefix}${hash}`\n    const className = `.${identifier}`\n    const rules = val.rules.map((rule) => {\n      if (pseudo) {\n        const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n        let res = rule\n          .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)\n          .replace('{', `:${pseudo.name}{`)\n          // important to override inline styles\n          .replace(';', ' !important;')\n\n        if (pseudo.name === 'hover') {\n          // hover styles need to be conditional\n          // perhaps this can be generalized but for now lets just shortcut\n          // and hardcode for hover styles, if we need to later we can\n          // WEIRD SYNTAX, SEE:\n          //   https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n          res = `@media not all and (hover: none) { ${res} }`\n        }\n        return res\n      }\n      return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')\n    })\n\n    const result: StyleObject = {\n      property: val.transformProperty || val.property,\n      pseudo: pseudo?.name,\n      value: val.value || '',\n      identifier,\n      className,\n      rules,\n    }\n\n    return result\n  })\n}\n\nconst importantRegex = /\\!important*/g\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { StyleObject, stylePropsTransform } from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { reversedShorthands } from '../createTamagui'\nimport { isVariable } from '../createVariable'\nimport { RulesData, generateAtomicStyles } from './generateAtomicStyles'\nimport { invertMapTransformKeys, mergeTransform } from './mergeTransform'\nimport { pseudos } from './pseudos'\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n  splitTransforms?: boolean\n}\n\ntype PseudoDescriptor = typeof pseudos[keyof typeof pseudos]\n\nconst pseudosOrdered = Object.values(pseudos)\n\n// this is how compiler outputs psueodo identifier\n// TODO remove in next refactor\nexport const psuedoCNInverse = {\n  hover: 'hoverStyle',\n  focus: 'focusStyle',\n  press: 'pressStyle',\n}\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options: AtomicStyleOptions = {}) {\n  const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n  let res: StyleObject[] = []\n\n  // *1 order matched to *0\n  for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n    if (!style || !Object.keys(style).length) {\n      continue\n    }\n    const pseudo = pseudosOrdered[index]\n    for (const skey in style) {\n      const val = style[skey]\n      if (isVariable(val)) {\n        style[skey] = val.toString()\n      }\n      if (stylePropsTransform[skey]) {\n        delete style[skey]\n        mergeTransform(style, skey, val)\n      }\n    }\n    res = [...res, ...getAtomicStyle(style, pseudo, options)]\n  }\n\n  return res\n}\n\nfunction getAtomicStyle(\n  style: ViewStyle,\n  pseudo: PseudoDescriptor | undefined,\n  options: AtomicStyleOptions\n): StyleObject[] {\n  if (style == null || typeof style !== 'object') {\n    throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n  }\n\n  // why is this diff from react-native-web!? need to figure out\n  for (const key in borderDefaults) {\n    if (key in style) {\n      style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'\n    }\n  }\n\n  let atomicStyles: { [key: string]: RulesData & { transformProperty?: string } } = {}\n\n  if (options.splitTransforms && style.transform) {\n    let { transform, ...rest } = style\n    style = rest\n    for (const t of transform) {\n      const tKey = Object.keys(t)[0]\n      const transformProperty = invertMapTransformKeys[tKey] || tKey\n      const out = generateAtomicStyles({ transform: [t] })\n      const key = Object.keys(out)[0]\n      atomicStyles[key] = {\n        ...out[key],\n        transformProperty,\n      }\n    }\n  }\n\n  if (style) {\n    Object.assign(atomicStyles, generateAtomicStyles(style))\n  }\n\n  // TODO ... and then also avoid this loop! n^4\n  return Object.keys(atomicStyles).map((key) => {\n    const val = atomicStyles[key]\n    const hash = val.identifier\n    // pseudos have a `--` to be easier to find with concatClassNames\n    const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\n    if (!val.property) {\n      throw new Error(`no prop`)\n    }\n    const shortProp = reversedShorthands[val.property] || val.property\n    const identifier = `_${shortProp}-${psuedoPrefix}${hash}`\n    const className = `.${identifier}`\n    const rules = val.rules.map((rule) => {\n      if (pseudo) {\n        const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n        let res = rule\n          .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)\n          .replace('{', `:${pseudo.name}{`)\n          // important to override inline styles\n          .replace(';', ' !important;')\n\n        if (pseudo.name === 'hover') {\n          // hover styles need to be conditional\n          // perhaps this can be generalized but for now lets just shortcut\n          // and hardcode for hover styles, if we need to later we can\n          // WEIRD SYNTAX, SEE:\n          //   https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n          res = `@media not all and (hover: none) { ${res} }`\n        }\n        return res\n      }\n      return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')\n    })\n\n    const result: StyleObject = {\n      property: val.transformProperty || val.property,\n      pseudo: pseudo?.name,\n      value: val.value as any,\n      identifier,\n      className,\n      rules,\n    }\n\n    return result\n  })\n}\n\nconst importantRegex = /\\!important*/g\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/helpers/insertStyleRule.js

@@ -71,7 +71,8 @@ function updateInsertedCache(identifier, rule) {
   if (insertedSelectors[identifier])
     return;
   insertedSelectors[identifier] = rule;
-  if (identifier.startsWith("_transform")) {
+  const isTransform = identifier.startsWith("_transform");
+  if (isTransform) {
     addTransform(identifier, rule);
   }
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/insertStyleRule.tsx"],
-  "sourcesContent": ["// this needs to check if its inserted already? 99% of the time it is\n// this should avoid re-inserts, but need to test the perf trade-offs\n// i tested with the site itself and the initial insert was trivial\n\nconst allSelectors = {}\nconst insertedSelectors = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getInsertedRules = () => Object.values(insertedSelectors)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, css: string, rule?: CSSRule) {\n  const s = css.indexOf('transform:')\n  if (s === -1) {\n    if (process.env.NODE_ENV === 'development') {\n      console.groupCollapsed(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`)\n      console.log('rule:', rule)\n      console.trace()\n      console.groupEnd()\n    } else {\n      console.error(`Missing transform`, identifier, css, rule)\n    }\n    return\n  }\n  const startI = s + 'transform:'.length\n  const endI = css.indexOf(';')\n  const value = css.slice(startI, endI)\n  insertedTransforms[identifier] = value\n}\n\nconst isClient = typeof document !== 'undefined'\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\nlet hasInsertedSinceUpdate = true\n\nexport function updateInserted() {\n  if (process.env.NODE_ENV === 'test') return\n  if (!isClient) return\n  if (!hasInsertedSinceUpdate) {\n    console.warn('hasnt inserted since')\n    return\n  }\n  const sheets = document.styleSheets\n  if (!sheets) return\n  for (let i = 0; i < sheets.length; i++) {\n    const rules = sheets[i].cssRules\n    const firstRule = rules[0]\n    if (!(firstRule instanceof CSSStyleRule)) continue\n    const firstSelector = firstRule.selectorText\n    if (!firstSelector) continue\n    if (firstSelector === ':root' || firstSelector.startsWith('._')) {\n      for (let i = 0; i < rules.length; i++) {\n        const rule = rules.item(i)\n        if (!(rule instanceof CSSStyleRule)) continue\n        const identifier = rule.selectorText.slice(1)\n        if (!allSelectors[identifier]) {\n          allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rule.cssText : true\n          if (identifier.startsWith('_transform')) {\n            addTransform(identifier, rule.cssText, rule)\n          }\n        }\n      }\n    }\n  }\n  hasInsertedSinceUpdate = false\n}\n\nupdateInserted()\n\nconst sheet = isClient ? document.head.appendChild(document.createElement('style')).sheet : null\n\nexport function updateInsertedCache(identifier: string, rule: string) {\n  if (insertedSelectors[identifier]) return\n  insertedSelectors[identifier] = rule\n  if (identifier.startsWith('_transform')) {\n    addTransform(identifier, rule)\n  }\n}\n\nexport function insertStyleRule(identifier: string, rule: string) {\n  if (allSelectors[identifier]) return\n  hasInsertedSinceUpdate = true\n  updateInsertedCache(identifier, rule)\n  allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rule : true\n  sheet?.insertRule(rule, sheet.cssRules.length)\n}\n"],
-  "mappings": ";;AAIA,MAAM,eAAe,CAAC;AACtB,MAAM,oBAAoB,CAAC;AACpB,MAAM,qBAAqB,CAAC;AAE5B,MAAM,kBAAkB,6BAAM,cAAN;AACxB,MAAM,mBAAmB,6BAAM,OAAO,OAAO,iBAAiB,GAArC;AACzB,MAAM,mBAAmB,6BAAM,oBAAN;AAGhC,sBAAsB,YAAoB,KAAa,MAAgB;AACrE,QAAM,IAAI,IAAI,QAAQ,YAAY;AAClC,MAAI,MAAM,IAAI;AACZ,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,eAAe,0DAAqD,YAAY;AACxF,cAAQ,IAAI,SAAS,IAAI;AACzB,cAAQ,MAAM;AACd,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,cAAQ,MAAM,qBAAqB,YAAY,KAAK,IAAI;AAAA,IAC1D;AACA;AAAA,EACF;AACA,QAAM,SAAS,IAAI,aAAa;AAChC,QAAM,OAAO,IAAI,QAAQ,GAAG;AAC5B,QAAM,QAAQ,IAAI,MAAM,QAAQ,IAAI;AACpC,qBAAmB,cAAc;AACnC;AAjBS;AAmBT,MAAM,WAAW,OAAO,aAAa;AAQrC,IAAI,yBAAyB;AAEtB,0BAA0B;AAC/B,MAAI,QAAQ,IAAI,aAAa;AAAQ;AACrC,MAAI,CAAC;AAAU;AACf,MAAI,CAAC,wBAAwB;AAC3B,YAAQ,KAAK,sBAAsB;AACnC;AAAA,EACF;AACA,QAAM,SAAS,SAAS;AACxB,MAAI,CAAC;AAAQ;AACb,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,QAAQ,OAAO,GAAG;AACxB,UAAM,YAAY,MAAM;AACxB,QAAI,CAAE,sBAAqB;AAAe;AAC1C,UAAM,gBAAgB,UAAU;AAChC,QAAI,CAAC;AAAe;AACpB,QAAI,kBAAkB,WAAW,cAAc,WAAW,IAAI,GAAG;AAC/D,eAAS,KAAI,GAAG,KAAI,MAAM,QAAQ,MAAK;AACrC,cAAM,OAAO,MAAM,KAAK,EAAC;AACzB,YAAI,CAAE,iBAAgB;AAAe;AACrC,cAAM,aAAa,KAAK,aAAa,MAAM,CAAC;AAC5C,YAAI,CAAC,aAAa,aAAa;AAC7B,uBAAa,cAAc,QAAQ,IAAI,aAAa,gBAAgB,KAAK,UAAU;AACnF,cAAI,WAAW,WAAW,YAAY,GAAG;AACvC,yBAAa,YAAY,KAAK,SAAS,IAAI;AAAA,UAC7C;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,2BAAyB;AAC3B;AA9BgB;AAgChB,eAAe;AAEf,MAAM,QAAQ,WAAW,SAAS,KAAK,YAAY,SAAS,cAAc,OAAO,CAAC,EAAE,QAAQ;AAErF,6BAA6B,YAAoB,MAAc;AACpE,MAAI,kBAAkB;AAAa;AACnC,oBAAkB,cAAc;AAChC,MAAI,WAAW,WAAW,YAAY,GAAG;AACvC,iBAAa,YAAY,IAAI;AAAA,EAC/B;AACF;AANgB;AAQT,yBAAyB,YAAoB,MAAc;AAChE,MAAI,aAAa;AAAa;AAC9B,2BAAyB;AACzB,sBAAoB,YAAY,IAAI;AACpC,eAAa,cAAc,QAAQ,IAAI,aAAa,gBAAgB,OAAO;AAC3E,iCAAO,WAAW,MAAM,MAAM,SAAS;AACzC;AANgB;",
+  "sourcesContent": ["// this needs to check if its inserted already? 99% of the time it is\n// this should avoid re-inserts, but need to test the perf trade-offs\n// i tested with the site itself and the initial insert was trivial\n\nconst allSelectors = {}\nconst insertedSelectors = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getInsertedRules = () => Object.values(insertedSelectors)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, css: string, rule?: CSSRule) {\n  const s = css.indexOf('transform:')\n  if (s === -1) {\n    if (process.env.NODE_ENV === 'development') {\n      console.groupCollapsed(`\u274C Invalid transform, likely used deg/% improperly ${identifier}`)\n      console.log('rule:', rule)\n      console.trace()\n      console.groupEnd()\n    } else {\n      console.error(`Missing transform`, identifier, css, rule)\n    }\n    return\n  }\n  const startI = s + 'transform:'.length\n  const endI = css.indexOf(';')\n  const value = css.slice(startI, endI)\n  insertedTransforms[identifier] = value\n}\n\nconst isClient = typeof document !== 'undefined'\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n//   1. debugging at dev time\n//   2. avoid duplicate insert styles at runtime\n//   3. used now for merging transforms atomically\nlet hasInsertedSinceUpdate = true\n\nexport function updateInserted() {\n  if (process.env.NODE_ENV === 'test') return\n  if (!isClient) return\n  if (!hasInsertedSinceUpdate) {\n    console.warn('hasnt inserted since')\n    return\n  }\n  const sheets = document.styleSheets\n  if (!sheets) return\n  for (let i = 0; i < sheets.length; i++) {\n    const rules = sheets[i].cssRules\n    const firstRule = rules[0]\n    if (!(firstRule instanceof CSSStyleRule)) continue\n    const firstSelector = firstRule.selectorText\n    if (!firstSelector) continue\n    if (firstSelector === ':root' || firstSelector.startsWith('._')) {\n      for (let i = 0; i < rules.length; i++) {\n        const rule = rules.item(i)\n        if (!(rule instanceof CSSStyleRule)) continue\n        const identifier = rule.selectorText.slice(1)\n        if (!allSelectors[identifier]) {\n          allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rule.cssText : true\n          if (identifier.startsWith('_transform')) {\n            addTransform(identifier, rule.cssText, rule)\n          }\n        }\n      }\n    }\n  }\n  hasInsertedSinceUpdate = false\n}\n\nupdateInserted()\n\nconst sheet = isClient ? document.head.appendChild(document.createElement('style')).sheet : null\n\nexport function updateInsertedCache(identifier: string, rule: string) {\n  if (insertedSelectors[identifier]) return\n  insertedSelectors[identifier] = rule\n  const isTransform = identifier.startsWith('_transform')\n  if (isTransform) {\n    addTransform(identifier, rule)\n  }\n}\n\nexport function insertStyleRule(identifier: string, rule: string) {\n  if (allSelectors[identifier]) return\n  hasInsertedSinceUpdate = true\n  updateInsertedCache(identifier, rule)\n  allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rule : true\n  sheet?.insertRule(rule, sheet.cssRules.length)\n}\n"],
+  "mappings": ";;AAIA,MAAM,eAAe,CAAC;AACtB,MAAM,oBAAoB,CAAC;AACpB,MAAM,qBAAqB,CAAC;AAE5B,MAAM,kBAAkB,6BAAM,cAAN;AACxB,MAAM,mBAAmB,6BAAM,OAAO,OAAO,iBAAiB,GAArC;AACzB,MAAM,mBAAmB,6BAAM,oBAAN;AAGhC,sBAAsB,YAAoB,KAAa,MAAgB;AACrE,QAAM,IAAI,IAAI,QAAQ,YAAY;AAClC,MAAI,MAAM,IAAI;AACZ,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAQ,eAAe,0DAAqD,YAAY;AACxF,cAAQ,IAAI,SAAS,IAAI;AACzB,cAAQ,MAAM;AACd,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,cAAQ,MAAM,qBAAqB,YAAY,KAAK,IAAI;AAAA,IAC1D;AACA;AAAA,EACF;AACA,QAAM,SAAS,IAAI,aAAa;AAChC,QAAM,OAAO,IAAI,QAAQ,GAAG;AAC5B,QAAM,QAAQ,IAAI,MAAM,QAAQ,IAAI;AACpC,qBAAmB,cAAc;AACnC;AAjBS;AAmBT,MAAM,WAAW,OAAO,aAAa;AAQrC,IAAI,yBAAyB;AAEtB,0BAA0B;AAC/B,MAAI,QAAQ,IAAI,aAAa;AAAQ;AACrC,MAAI,CAAC;AAAU;AACf,MAAI,CAAC,wBAAwB;AAC3B,YAAQ,KAAK,sBAAsB;AACnC;AAAA,EACF;AACA,QAAM,SAAS,SAAS;AACxB,MAAI,CAAC;AAAQ;AACb,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,QAAQ,OAAO,GAAG;AACxB,UAAM,YAAY,MAAM;AACxB,QAAI,CAAE,sBAAqB;AAAe;AAC1C,UAAM,gBAAgB,UAAU;AAChC,QAAI,CAAC;AAAe;AACpB,QAAI,kBAAkB,WAAW,cAAc,WAAW,IAAI,GAAG;AAC/D,eAAS,KAAI,GAAG,KAAI,MAAM,QAAQ,MAAK;AACrC,cAAM,OAAO,MAAM,KAAK,EAAC;AACzB,YAAI,CAAE,iBAAgB;AAAe;AACrC,cAAM,aAAa,KAAK,aAAa,MAAM,CAAC;AAC5C,YAAI,CAAC,aAAa,aAAa;AAC7B,uBAAa,cAAc,QAAQ,IAAI,aAAa,gBAAgB,KAAK,UAAU;AACnF,cAAI,WAAW,WAAW,YAAY,GAAG;AACvC,yBAAa,YAAY,KAAK,SAAS,IAAI;AAAA,UAC7C;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,2BAAyB;AAC3B;AA9BgB;AAgChB,eAAe;AAEf,MAAM,QAAQ,WAAW,SAAS,KAAK,YAAY,SAAS,cAAc,OAAO,CAAC,EAAE,QAAQ;AAErF,6BAA6B,YAAoB,MAAc;AACpE,MAAI,kBAAkB;AAAa;AACnC,oBAAkB,cAAc;AAChC,QAAM,cAAc,WAAW,WAAW,YAAY;AACtD,MAAI,aAAa;AACf,iBAAa,YAAY,IAAI;AAAA,EAC/B;AACF;AAPgB;AAST,yBAAyB,YAAoB,MAAc;AAChE,MAAI,aAAa;AAAa;AAC9B,2BAAyB;AACzB,sBAAoB,YAAY,IAAI;AACpC,eAAa,cAAc,QAAQ,IAAI,aAAa,gBAAgB,OAAO;AAC3E,iCAAO,WAAW,MAAM,MAAM,SAAS;AACzC;AANgB;",
   "names": []
 }

package/dist/esm/helpers/mergeProps.js

@@ -0,0 +1,18 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const mergeProps = /* @__PURE__ */ __name((a, b) => {
+  const out = {};
+  for (const key in a) {
+    if (!(key in b)) {
+      out[key] = a[key];
+    }
+  }
+  for (const key in b) {
+    out[key] = b[key];
+  }
+  return out;
+}, "mergeProps");
+export {
+  mergeProps
+};
+//# sourceMappingURL=mergeProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/mergeProps.ts"],
+  "sourcesContent": ["/**\n * Preserves prop ordering, so that the order most closely matches the last spread objects\n * Useful for having { ...defaultProps, ...props } that ensure props ordering is always kept\n *\n *    Given:\n *      mergeProps({ a: 1, b: 2 }, { b: 1, a: 2 })\n *    The final key order will be:\n *      b, a\n */\n\nexport const mergeProps = (a: Object, b: Object) => {\n  const out = {}\n\n  for (const key in a) {\n    if (!(key in b)) {\n      out[key] = a[key]\n    }\n  }\n\n  for (const key in b) {\n    out[key] = b[key]\n  }\n\n  return out\n}\n"],
+  "mappings": ";;AAUO,MAAM,aAAa,wBAAC,GAAW,MAAc;AAClD,QAAM,MAAM,CAAC;AAEb,aAAW,OAAO,GAAG;AACnB,QAAI,CAAE,QAAO,IAAI;AACf,UAAI,OAAO,EAAE;AAAA,IACf;AAAA,EACF;AAEA,aAAW,OAAO,GAAG;AACnB,QAAI,OAAO,EAAE;AAAA,EACf;AAEA,SAAO;AACT,GAd0B;",
+  "names": []
+}

package/dist/esm/helpers/pseudos.js

@@ -0,0 +1,18 @@
+const pseudos = {
+  hoverStyle: {
+    name: "hover",
+    priority: 1
+  },
+  pressStyle: {
+    name: "active",
+    priority: 2
+  },
+  focusStyle: {
+    name: "focus",
+    priority: 3
+  }
+};
+export {
+  pseudos
+};
+//# sourceMappingURL=pseudos.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/pseudos.ts"],
+  "sourcesContent": ["// *0 order matches to *1\n\nexport const pseudos = {\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n  pressStyle: {\n    name: 'active',\n    priority: 2,\n  },\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n} as const\n"],
+  "mappings": "AAEO,MAAM,UAAU;AAAA,EACrB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA,EACZ;AACF;",
+  "names": []
+}

package/dist/esm/helpers/themeable.js

@@ -4,7 +4,8 @@ import React, { forwardRef } from "react";
 import { Theme } from "../views/Theme";
 import { ThemeInverse } from "../views/ThemeInverse";
 function themeable(component, opts) {
-  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, theme, ...rest }, ref) {
+  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme(props, ref) {
+    const { themeInverse, theme, ...rest } = props;
     const element = React.createElement(component, { ...rest, ref });
     if (themeInverse) {
       return /* @__PURE__ */ React.createElement(ThemeInverse, null, element);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themeable.tsx"],
-  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport type ThemeableProps = {\n  theme?: ThemeName | string | null\n  themeInverse?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(\n    { themeInverse, theme, ...rest }: any,\n    ref\n  ) {\n    const element = React.createElement(component, { ...rest, ref } as any)\n    if (themeInverse) {\n      return <ThemeInverse>{element}</ThemeInverse>\n    }\n    if (theme || opts) {\n      return (\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      )\n    }\n    return element\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    ? (\n        props: Omit<P, 'theme' | 'themeInverse'> & {\n          theme?: ThemeName | null\n          themeInverse?: boolean\n        }\n      ) => R\n    : unknown\n}\n"],
-  "mappings": ";;AAAA;AAGA;AACA;AAOO,mBACL,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,0CACpC,EAAE,cAAc,UAAU,QAC1B,KACA;AACA,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AACtE,QAAI,cAAc;AAChB,aAAO,oCAAC,oBAAc,OAAQ;AAAA,IAChC;AACA,QAAI,SAAS,MAAM;AACjB,aACE,oCAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,SAChE,OACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAhBsC,YAgBrC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,UACrB,wCAAmB,gBAAgB,wCAAmB,SAAQ;AAGjE,SAAO;AAQT;AAnCgB;",
+  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport type ThemeableProps = {\n  theme?: ThemeName | string | null\n  themeInverse?: boolean\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: any, ref) {\n    const { themeInverse, theme, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n    if (themeInverse) {\n      return <ThemeInverse>{element}</ThemeInverse>\n    }\n    if (theme || opts) {\n      return (\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      )\n    }\n    return element\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    ? (\n        props: Omit<P, 'theme' | 'themeInverse'> & {\n          theme?: ThemeName | null\n          themeInverse?: boolean\n        }\n      ) => R\n    : unknown\n}\n"],
+  "mappings": ";;AAAA;AAGA;AACA;AAOO,mBACL,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,0CAAmB,OAAY,KAAK;AACxE,UAAM,EAAE,cAAc,UAAU,SAAS;AACzC,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AACtE,QAAI,cAAc;AAChB,aAAO,oCAAC,oBAAc,OAAQ;AAAA,IAChC;AACA,QAAI,SAAS,MAAM;AACjB,aACE,oCAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,SAChE,OACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,GAdsC,YAcrC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,UACrB,wCAAmB,gBAAgB,wCAAmB,SAAQ;AAGjE,SAAO;AAQT;AAjCgB;",
   "names": []
 }

package/dist/esm/index.js

@@ -23,6 +23,9 @@ export * from "./helpers/getExpandedShorthands";
 export * from "./helpers/getSize";
 export * from "./helpers/getSplitStyles";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/pseudos";
+export * from "./helpers/mergeProps";
+import { expandStyles } from "./helpers/generateAtomicStyles";
 export * from "./helpers/getTextSize";
 export * from "./helpers/isObj";
 export * from "./helpers/isTamaguiElement";
@@ -52,6 +55,7 @@ export * from "@tamagui/helpers";
 export {
   RNWTextProps,
   RNWViewProps,
+  expandStyles,
   getConfig,
   getHasConfigured,
   getThemes,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/getTextSize'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;",
+  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport * from './constants/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudos'\nexport * from './helpers/mergeProps'\nexport { expandStyles } from './helpers/generateAtomicStyles'\nexport * from './helpers/getTextSize'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/helpers'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;",
   "names": []
 }

package/dist/esm/static.js

@@ -9,6 +9,8 @@ export * from "./hooks/useMedia";
 export * from "./hooks/useTheme";
 export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/generateAtomicStyles";
+export * from "./helpers/pseudos";
 export * from "./helpers/proxyThemeVariables";
 export * from "./helpers/getSplitStyles";
 export * from "@tamagui/helpers";

package/dist/esm/static.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/static.ts"],
-  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './createVariable'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/proxyThemeVariables'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './constants/rnw'\n\nexport * from './types'\n"],
-  "mappings": "AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEA;",
+  "sourcesContent": ["// only stuff that gets extracted or needed by tamagui-static\n\nexport * from './styled'\nexport * from './createComponent'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createTamagui'\nexport * from './createVariable'\nexport * from './constants/constants'\n\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\n\nexport * from './helpers/isObj'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/generateAtomicStyles'\nexport * from './helpers/pseudos'\nexport * from './helpers/proxyThemeVariables'\nexport * from './helpers/getSplitStyles'\nexport * from '@tamagui/helpers'\n\nexport * from './constants/rnw'\n\nexport * from './types'\n"],
+  "mappings": "AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;",
   "names": []
 }

package/dist/jsx/createComponent.js

@@ -19,10 +19,12 @@ import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
 import { isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
+import { getReturnVariablesAs } from "./helpers/createPropMapper";
 import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
 import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
+import { mergeProps } from "./helpers/mergeProps";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
@@ -96,14 +98,23 @@ function createComponent(configIn, ParentComponent) {
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = forwardRef((propsIn, forwardedRef) => {
     var _a, _b, _c, _d, _e;
-    const props = tamaguiDefaultProps && !propsIn.asChild ? { ...tamaguiDefaultProps, ...propsIn } : propsIn;
+    let props;
+    if (tamaguiDefaultProps && !propsIn.asChild) {
+      props = mergeProps(tamaguiDefaultProps, propsIn);
+    } else {
+      props = propsIn;
+    }
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         console.log("\u26A0\uFE0F", componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
-        console.log("props in:", { propsIn, props, ordered: Object.keys(props) });
+        console.log("props in:", {
+          propsIn,
+          props,
+          ordered: Object.keys(props)
+        });
         if (props["debug"] === "break")
           debugger;
       }
@@ -113,7 +124,7 @@ function createComponent(configIn, ParentComponent) {
     const [state, set_] = useState(defaultComponentState);
     const setStateShallow = createShallowUpdate(set_);
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const splitStyles = useSplitStyles(props, staticConfig, theme, !shouldAvoidClasses ? {
+    const splitStyleState = !shouldAvoidClasses ? {
       ...state,
       dynamicStylesInline: true
     } : {
@@ -121,7 +132,8 @@ function createComponent(configIn, ParentComponent) {
       noClassNames: true,
       dynamicStylesInline: true,
       resolveVariablesAs: "value"
-    }, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames);
+    };
+    const splitStyles = useSplitStyles(props, staticConfig, theme, splitStyleState, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames, props["debug"]);
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
@@ -559,10 +571,20 @@ function createComponent(configIn, ParentComponent) {
       }
     }
     content = createElement(elementType, viewProps, childEls);
-    if (isWeb && events && attachHover) {
-      content = <span className="tui_Hoverable" style={{
-        display: "contents"
-      }} onMouseEnter={events.onMouseEnter} onMouseLeave={events.onMouseLeave}>{content}</span>;
+    if (isWeb) {
+      const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
+      const shouldWrapWithComponentTheme = isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
+      const shouldWrapWithHover = events && attachHover;
+      if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
+        const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
+        const hoverClassName = shouldWrapWithHover ? "tui_Hoverable" : "";
+        content = <span className={`${hoverClassName} ${themeClassName}`} style={{
+          display: "contents"
+        }} {...shouldWrapWithHover && {
+          onMouseEnter: events.onMouseEnter,
+          onMouseLeave: events.onMouseLeave
+        }}>{content}</span>;
+      }
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
@@ -597,11 +619,8 @@ function createComponent(configIn, ParentComponent) {
       focus: false,
       resolveVariablesAs: "both",
       keepVariantsAsProps: true
-    });
-    const defaults = {
-      ...component.defaultProps,
-      ...initialSplitStyles.viewProps
-    };
+    }, void 0, staticConfig.defaultProps["debug"]);
+    const defaults = mergeProps(component.defaultProps, initialSplitStyles.viewProps);
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;
     for (const key in staticConfig.defaultProps) {

package/dist/jsx/helpers/createMediaStyle.js

@@ -12,7 +12,7 @@ const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey
   const screenStr = negate ? "not all" : "screen";
   const mediaSelector = mediaObjectToString(mediaQueries[mediaKey]);
   const mediaQuery = `${screenStr} and ${mediaSelector}`;
-  const styleInner = rules[0].replace(identifier, nextIdentifier);
+  const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(";");
   let styleRule = "";
   if (styleInner.includes("@media")) {
     styleRule = styleInner.replace("{", ` and ${mediaQuery} {`);

package/dist/jsx/helpers/createPropMapper.js

@@ -6,17 +6,20 @@ import { isVariable } from "../createVariable";
 import { expandStyle, expandStyles } from "./generateAtomicStyles";
 import { getVariantExtras } from "./getVariantExtras";
 import { isObj } from "./isObj";
+const getReturnVariablesAs = /* @__PURE__ */ __name((props, state) => {
+  return !!props.animation || state.resolveVariablesAs === "value" ? isWeb ? "non-color-value" : "value" : "auto";
+}, "getReturnVariablesAs");
 const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
   const variants = staticConfig.variants || {};
   const defaultProps = staticConfig.defaultProps || {};
-  const mapper = /* @__PURE__ */ __name((key, value, theme, propsIn, state, avoidDefaultProps = false) => {
+  const mapper = /* @__PURE__ */ __name((key, value, theme, propsIn, state, avoidDefaultProps = false, debug) => {
     const conf = getConfig();
     if (!conf) {
       console.trace("no conf! err");
       return;
     }
     const props = state.fallbackProps || propsIn;
-    const returnVariablesAs = state.resolveVariablesAs === "value" || !!props.animation ? "value" : "auto";
+    const returnVariablesAs = getReturnVariablesAs(props, state);
     const fontFamily = props.fontFamily || defaultProps.fontFamily || "$body";
     const variantValue = resolveVariants(key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, "", avoidDefaultProps);
     if (variantValue) {
@@ -29,9 +32,9 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
     }
     if (value) {
       if (value[0] === "$") {
-        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs);
+        value = getToken(key, value, conf, theme, fontFamily, returnVariablesAs, debug);
       } else if (isVariable(value)) {
-        value = getVariableValue(value, returnVariablesAs);
+        value = getVariableValue(key, value, returnVariablesAs);
       }
     }
     if (shouldReturn) {
@@ -40,7 +43,7 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
   }, "mapper");
   return mapper;
 }, "createPropMapper");
-const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps = false) => {
+const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps = false, debug) => {
   var _a;
   const variant = variants && variants[key];
   if (variant && value !== void 0) {
@@ -51,7 +54,7 @@ const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps,
         variantValue = fn(value, getVariantExtras(props, theme, defaultProps, avoidDefaultProps));
       }
       if (isObj(variantValue)) {
-        variantValue = resolveTokensAndVariants(key, variantValue, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps);
+        variantValue = resolveTokensAndVariants(key, variantValue, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps, debug);
       }
       return Object.entries(expandStyles(variantValue));
     } else {
@@ -59,13 +62,14 @@ const resolveVariants = /* @__PURE__ */ __name((key, value, props, defaultProps,
         if ((_a = staticConfig.validStyles) == null ? void 0 : _a[key]) {
           return null;
         }
-        console.warn(`No variant found: ${staticConfig.componentName || "[UnnamedComponent]"} has variant "${key}", but no matching value "${value}"`);
+        const name = staticConfig.componentName || "[UnnamedComponent]";
+        console.warn(`No variant found: ${name} has variant "${key}", but no matching value "${value}"`);
       }
       return null;
     }
   }
 }, "resolveVariants");
-const resolveTokensAndVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps) => {
+const resolveTokensAndVariants = /* @__PURE__ */ __name((key, value, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, parentVariantKey, avoidDefaultProps, debug) => {
   var _a;
   let res = {};
   for (const rKey in value) {
@@ -79,15 +83,15 @@ const resolveTokensAndVariants = /* @__PURE__ */ __name((key, value, props, defa
       } else {
         res = {
           ...res,
-          ...Object.fromEntries(resolveVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps))
+          ...Object.fromEntries(resolveVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps, debug))
         };
       }
     } else if (typeof val === "string") {
-      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs) : val;
+      const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily, returnVariablesAs, debug) : val;
       res[fKey] = fVal;
     } else {
       if (isObj(val)) {
-        res[fKey] = resolveTokensAndVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps);
+        res[fKey] = resolveTokensAndVariants(fKey, val, props, defaultProps, theme, variants, fontFamily, conf, returnVariablesAs, staticConfig, key, avoidDefaultProps, debug);
       } else {
         res[fKey] = value[fKey];
       }
@@ -128,7 +132,7 @@ const fontShorthand = {
   fontSize: "size",
   fontWeight: "weight"
 };
-const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs) => {
+const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed }, theme, fontFamily = "$body", resolveAs, debug) => {
   var _a, _b, _c;
   let valOrVar;
   let hasSet = false;
@@ -167,21 +171,39 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, fontsParsed
     }
   }
   if (hasSet) {
-    return getVariableValue(valOrVar, resolveAs);
+    return getVariableValue(key, valOrVar, resolveAs);
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token:`, key, value, fontFamily, theme, fontsParsed);
+      console.warn(`\u26A0\uFE0F You've passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
+
+Set the debug prop to true to see more detailed debug information.`);
+      if (debug) {
+        if (typeof window !== "undefined") {
+          console.log("Looked in:");
+          console.log("Theme:", theme);
+          console.log("Tokens:", tokensParsed);
+          console.log("Fonts:", fontsParsed);
+        }
+      }
       return null;
     }
   }
   return value;
 }, "getToken");
-function getVariableValue(valOrVar, resolveAs = "auto") {
+function getVariableValue(key, valOrVar, resolveAs = "auto") {
   if (isVariable(valOrVar)) {
     if (resolveAs === "variable") {
       return valOrVar;
     }
+    if (resolveAs === "non-color-value") {
+      if (isWeb) {
+        if (key in tokenCategories.color) {
+          return valOrVar.variable;
+        }
+      }
+      return valOrVar.val;
+    }
     if (!isWeb || resolveAs === "value") {
       return valOrVar.val;
     }
@@ -192,7 +214,11 @@ function getVariableValue(valOrVar, resolveAs = "auto") {
 __name(getVariableValue, "getVariableValue");
 const tokenCategories = {
   radius: {
-    borderRadius: true
+    borderRadius: true,
+    borderTopLeftRadius: true,
+    borderTopRightRadius: true,
+    borderBottomLeftRadius: true,
+    borderBottomRightRadius: true
   },
   size: {
     width: true,
@@ -213,5 +239,6 @@ const tokenCategories = {
   }
 };
 export {
-  createPropMapper
+  createPropMapper,
+  getReturnVariablesAs
 };

package/dist/jsx/helpers/extendStaticConfig.js

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { stylePropsView } from "@tamagui/helpers";
 import { createPropMapper } from "./createPropMapper";
+import { mergeProps } from "./mergeProps";
 function extendStaticConfig(config, parent) {
   var _a;
   if (!parent || !("staticConfig" in parent)) {
@@ -35,12 +36,13 @@ function extendStaticConfig(config, parent) {
       ...parent.staticConfig.validStyles,
       ...config.validStyles
     } : parent.staticConfig.validStyles || stylePropsView,
-    defaultProps: {
+    defaultProps: mergeProps({
       ...parent.staticConfig.defaultProps,
-      ...parent.staticConfig.defaultVariants,
+      ...parent.staticConfig.defaultVariants
+    }, {
       ...config.defaultProps,
       ...config.defaultVariants
-    }
+    })
   });
 }
 __name(extendStaticConfig, "extendStaticConfig");