@tamagui/core 1.0.1-beta.25 → 1.0.1-beta.28

package/dist/cjs/hooks/useFeatures.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useFeatures.tsx"],
-  "sourcesContent": ["import React from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport { PseudoStyles, SplitStyleState } from '../types'\nimport {\n  StaticConfig,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const features: JSX.Element[] = []\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      features.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return features\n}\n\nfunction loadFeatures(): Record<string, FeatureDefinition> {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  }\n}\n\nfunction loadAnimationFeature() {\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // const animatedStyleIn =\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle =\n            isEntering === true || state.mounted === false\n              ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n                ? getSubStyle(\n                    staticConfig.variants?.[enterVariant]['true'],\n                    staticConfig,\n                    theme,\n                    props,\n                    state\n                  ) || pseudos.enterStyle\n                : null || pseudos.enterStyle\n              : null\n\n          const exitStyle =\n            isEntering === false\n              ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n                ? getSubStyle(\n                    staticConfig.variants?.[exitVariant]['true'],\n                    staticConfig,\n                    theme,\n                    props,\n                    state\n                  ) || pseudos.exitStyle\n                : null || pseudos.exitStyle\n              : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const keys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of keys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of keys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [keys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React, { RefObject } from 'react'\nimport { View, ViewStyle } from 'react-native'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport { rnw } from '../static'\nimport { PseudoStyles, SplitStyleState } from '../types'\nimport {\n  StaticConfig,\n  StaticConfigParsed,\n  TamaguiComponentState,\n  UseAnimationHook,\n  UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n  isEnabled: (props: any) => boolean\n  Component: any\n}\n\ntype FeatureUtils = {\n  forceUpdate: Function\n  state: SplitStyleState\n  setStateShallow: (next: Partial<TamaguiComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\n  staticConfig: StaticConfigParsed\n  theme: any\n  onDidAnimate?: () => void\n  hostRef: RefObject<HTMLElement | View>\n}\n\nconst createDefinition = ({\n  Component,\n  propNames,\n}: {\n  Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n  propNames: string[]\n}): FeatureDefinition => ({\n  isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n  Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n  if (!featureDefinitions) {\n    featureDefinitions = loadFeatures()\n  }\n  const features: JSX.Element[] = []\n  for (const name in featureDefinitions) {\n    const { isEnabled, Component } = featureDefinitions[name]\n    if (isEnabled(props) && Component) {\n      features.push(<Component key={name} {...props} _utils={utils} />)\n    }\n  }\n  return features\n}\n\nfunction loadFeatures(): Record<string, FeatureDefinition> {\n  return {\n    // loads animations and sets state with the results\n    animation: loadAnimationFeature(),\n\n    // onLayout\n    // doesn't work because useLayoutEffect in child fires before parent is mounted\n    // onLayout: loadOnLayoutFeature(),\n\n    // will update the parent whenever media query changes\n    // no need on web, media queries are inserted and run in css\n    mediaQuery: loadMediaQueryFeature(),\n  }\n}\n\n// function loadOnLayoutFeature() {\n//   return createDefinition({\n//     Component: (allProps) => {\n//       console.log('got layout', allProps._utils.hostRef, allProps.onLayout)\n\n//       useIsomorphicLayoutEffect(() => {\n//         console.log('wut is', allProps._utils.hostRef.current)\n//         setTimeout(() => {\n//           console.log('wut is2', allProps._utils.hostRef.current)\n//         })\n//       }, [])\n\n//       rnw.useElementLayout(allProps._utils.hostRef, allProps.onLayout)\n//       return null\n//     },\n//     propNames: ['onLayout'],\n//   })\n// }\n\nfunction loadAnimationFeature() {\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const {\n        state,\n        useAnimations,\n        pseudos,\n        style: inStyle,\n        setStateShallow,\n        staticConfig,\n        theme,\n        onDidAnimate,\n      } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      // const animatedStyleIn =\n\n      // we always have .animation set\n      const propsWithAnimation = props as UseAnimationProps\n\n      const res = useAnimations(propsWithAnimation, {\n        state,\n        pseudos,\n        onDidAnimate,\n        staticConfig,\n        getStyle({ isEntering, exitVariant, enterVariant } = {}) {\n          // we have to merge such that transforms keys all exist\n          const style = inStyle || {}\n\n          const enterStyle =\n            isEntering === true || state.mounted === false\n              ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n                ? getSubStyle(\n                    staticConfig.variants?.[enterVariant]['true'],\n                    staticConfig,\n                    theme,\n                    props,\n                    state\n                  ) || pseudos.enterStyle\n                : null || pseudos.enterStyle\n              : null\n\n          const exitStyle =\n            isEntering === false\n              ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n                ? getSubStyle(\n                    staticConfig.variants?.[exitVariant]['true'],\n                    staticConfig,\n                    theme,\n                    props,\n                    state\n                  ) || pseudos.exitStyle\n                : null || pseudos.exitStyle\n              : null\n\n          // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n          // no animation will run! this is really confusing. this will look at all variants,\n          // and fill in base styles if they don't exist. eg:\n          // input:\n          //   base: {}\n          //   hoverStyle: { scale: 2 }\n          //   enterStyle: { x: 100 }\n          // output:\n          //   base: { x: 0, scale: 1 }\n          ensureBaseHasDefaults(\n            style,\n            enterStyle,\n            pseudos.hoverStyle,\n            pseudos.focusStyle,\n            pseudos.pressStyle,\n            pseudos.pressStyle\n          )\n\n          enterStyle && merge(style, enterStyle)\n          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n          exitStyle && merge(style, exitStyle)\n\n          return style\n        },\n        //, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [res])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nconst defaults = {\n  left: 0,\n  right: 0,\n  top: 0,\n  bottom: 0,\n  opacity: 1,\n  translateX: 0,\n  translateY: 0,\n  skew: 0,\n  skewX: 0,\n  skewY: 0,\n  scale: 1,\n  rotate: '0deg',\n  rotateY: '0deg',\n  rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n  for (const pseudo of pseudos) {\n    if (!pseudo) continue\n    for (const key in pseudo) {\n      const val = pseudo[key]\n      if (key === 'transform') {\n        for (const t of val) {\n          const tkey = Object.keys(t)[0]\n          const defaultVal = defaults[tkey]\n          const tDefaultVal = { [tkey]: defaultVal } as any\n          if (!base.transform) {\n            base.transform = [tDefaultVal]\n          } else {\n            if (!base.transform.find((x) => x[tkey])) {\n              base.transform.push(tDefaultVal)\n            }\n          }\n        }\n      } else {\n        if (!(key in base)) {\n          base[key] = defaults[key]\n        }\n      }\n    }\n  }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n  if (!next.transform || !base.transform) {\n    Object.assign(base, next)\n    return\n  }\n  const { transform, ...rest } = next\n  Object.assign(base, rest)\n  for (const t of transform) {\n    const key = Object.keys(t)[0]\n    const existing = base.transform.find((x) => key in x)\n    if (existing) {\n      existing[key] = t[key]\n    } else {\n      base.transform.push(t)\n    }\n  }\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const keys = mediaPropNames.filter((x) => x in props)\n\n      useIsomorphicLayoutEffect(() => {\n        for (const key of keys) {\n          addMediaQueryListener(key, props._utils.forceUpdate)\n        }\n        return () => {\n          for (const key of keys) {\n            removeMediaQueryListener(key, props._utils.forceUpdate)\n          }\n        }\n      }, [keys.join(',')])\n\n      return null\n    },\n    propNames: mediaPropNames,\n  })\n}\n\n// TODO\n// measureLayout: createDefinition({\n//   Component: (props) => {\n//     console.log('measure', props)\n//     return null\n//   },\n//   propNames: ['onLayout'],\n// }),\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AAGjC,sBAAiD;AACjD,4BAA4B;AAU5B,sBAA4E;AAoB5E,MAAM,mBAAmB,wBAAC;AAAA,EACxB;AAAA,EACA;AAAA,MAIwB;AAAA,EACxB,WAAW,CAAC,UAAe,UAAU,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,KAAK;AAAA,EACjE;AACF,IATyB;AAWzB,IAAI,qBAA+D;AAE5D,MAAM,cAAc,wBAAC,OAAY,UAAyB;AAC/D,MAAI,CAAC,oBAAoB;AACvB,yBAAqB,aAAa;AAAA,EACpC;AACA,QAAM,WAA0B,CAAC;AACjC,aAAW,QAAQ,oBAAoB;AACrC,UAAM,EAAE,WAAW,cAAc,mBAAmB;AACpD,QAAI,UAAU,KAAK,KAAK,WAAW;AACjC,eAAS,KAAK,mDAAC;AAAA,QAAU,KAAK;AAAA,SAAU,QAAzB;AAAA,QAAgC,QAAQ;AAAA,QAAO,CAAE;AAAA,IAClE;AAAA,EACF;AACA,SAAO;AACT,GAZ2B;AAc3B,wBAA2D;AACzD,SAAO;AAAA,IAEL,WAAW,qBAAqB;AAAA,IAQhC,YAAY,sBAAsB;AAAA,EACpC;AACF;AAbS;AAkCT,gCAAgC;AAC9B,SAAO,iBAAiB;AAAA,IACtB,WAAW,CAAC,OAAyB;AAAzB,mBAAE,aAAF,IAAa,kBAAb,IAAa,CAAX;AACZ,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,UACE;AAEJ,UAAI,CAAC,eAAe;AAClB,gBAAQ,MAAM,gCAAgC;AAC9C,eAAO;AAAA,MACT;AAKA,YAAM,qBAAqB;AAE3B,YAAM,MAAM,cAAc,oBAAoB;AAAA,QAC5C;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,EAAE,YAAY,aAAa,iBAAiB,CAAC,GAAG;AA5HjE;AA8HU,gBAAM,QAAQ,WAAW,CAAC;AAE1B,gBAAM,aACJ,eAAe,QAAQ,MAAM,YAAY,QACrC,gBAAgB,qBAAa,aAAb,oBAAwB,cAAc,WACpD,uCACE,oBAAa,aAAb,oBAAwB,cAAc,SACtC,cACA,OACA,OACA,KACF,KAAK,QAAQ,aACL,QAAQ,aAClB;AAEN,gBAAM,YACJ,eAAe,QACX,eAAe,oBAAa,aAAb,mBAAwB,aAAa,WAClD,uCACE,mBAAa,aAAb,mBAAwB,aAAa,SACrC,cACA,OACA,OACA,KACF,KAAK,QAAQ,YACL,QAAQ,YAClB;AAWN,gCACE,OACA,YACA,QAAQ,YACR,QAAQ,YACR,QAAQ,YACR,QAAQ,UACV;AAEA,wBAAc,MAAM,OAAO,UAAU;AACrC,gBAAM,SAAS,QAAQ,cAAc,MAAM,OAAO,QAAQ,UAAU;AACpE,gBAAM,SAAS,QAAQ,cAAc,MAAM,OAAO,QAAQ,UAAU;AACpE,gBAAM,SAAS,QAAQ,cAAc,MAAM,OAAO,QAAQ,UAAU;AACpE,uBAAa,MAAM,OAAO,SAAS;AAEnC,iBAAO;AAAA,QACT;AAAA,MAEF,CAAC;AAED,qDAA0B,MAAM;AAC9B,wBAAgB;AAAA,UACd,WAAW;AAAA,QACb,CAAC;AAAA,MACH,GAAG,CAAC,GAAG,CAAC;AAER,aAAO;AAAA,IACT;AAAA,IACA,WAAW,CAAC,WAAW;AAAA,EACzB,CAAC;AACH;AAlGS;AAoGT,MAAM,WAAW;AAAA,EACf,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AACX;AAEA,+BAA+B,SAAoB,SAA2C;AAC5F,aAAW,UAAU,SAAS;AAC5B,QAAI,CAAC;AAAQ;AACb,eAAW,OAAO,QAAQ;AACxB,YAAM,MAAM,OAAO;AACnB,UAAI,QAAQ,aAAa;AACvB,mBAAW,KAAK,KAAK;AACnB,gBAAM,OAAO,OAAO,KAAK,CAAC,EAAE;AAC5B,gBAAM,aAAa,SAAS;AAC5B,gBAAM,cAAc,GAAG,OAAO,WAAW;AACzC,cAAI,CAAC,KAAK,WAAW;AACnB,iBAAK,YAAY,CAAC,WAAW;AAAA,UAC/B,OAAO;AACL,gBAAI,CAAC,KAAK,UAAU,KAAK,CAAC,MAAM,EAAE,KAAK,GAAG;AACxC,mBAAK,UAAU,KAAK,WAAW;AAAA,YACjC;AAAA,UACF;AAAA,QACF;AAAA,MACF,OAAO;AACL,YAAI,CAAE,QAAO,OAAO;AAClB,eAAK,OAAO,SAAS;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAzBS;AA2BT,eAAe,MAAiB,MAAiB;AAC/C,MAAI,CAAC,KAAK,aAAa,CAAC,KAAK,WAAW;AACtC,WAAO,OAAO,MAAM,IAAI;AACxB;AAAA,EACF;AACA,QAA+B,WAAvB,gBAAuB,IAAT,iBAAS,IAAT,CAAd;AACR,SAAO,OAAO,MAAM,IAAI;AACxB,aAAW,KAAK,WAAW;AACzB,UAAM,MAAM,OAAO,KAAK,CAAC,EAAE;AAC3B,UAAM,WAAW,KAAK,UAAU,KAAK,CAAC,MAAM,OAAO,CAAC;AACpD,QAAI,UAAU;AACZ,eAAS,OAAO,EAAE;AAAA,IACpB,OAAO;AACL,WAAK,UAAU,KAAK,CAAC;AAAA,IACvB;AAAA,EACF;AACF;AAhBS;AAkBT,iCAAiC;AAC/B,QAAM,iBAAiB,OAAO,KAAK,0BAAU;AAE7C,SAAO,iBAAiB;AAAA,IACtB,WAAW,CAAC,UAAe;AACzB,YAAM,OAAO,eAAe,OAAO,CAAC,MAAM,KAAK,KAAK;AAEpD,qDAA0B,MAAM;AAC9B,mBAAW,OAAO,MAAM;AACtB,qDAAsB,KAAK,MAAM,OAAO,WAAW;AAAA,QACrD;AACA,eAAO,MAAM;AACX,qBAAW,OAAO,MAAM;AACtB,0DAAyB,KAAK,MAAM,OAAO,WAAW;AAAA,UACxD;AAAA,QACF;AAAA,MACF,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC;AAEnB,aAAO;AAAA,IACT;AAAA,IACA,WAAW;AAAA,EACb,CAAC;AACH;AAtBS;",
   "names": []
 }

package/dist/cjs/index.js

@@ -45,6 +45,7 @@ __reExport(src_exports, require("./constants/platform"), module.exports);
 __reExport(src_exports, require("./constants/rnw"), module.exports);
 __reExport(src_exports, require("./helpers/createShallowUpdate"), module.exports);
 __reExport(src_exports, require("./helpers/getStackSize"), module.exports);
+__reExport(src_exports, require("./helpers/getVariantExtras"), module.exports);
 __reExport(src_exports, require("./helpers/getExpandedShorthands"), module.exports);
 __reExport(src_exports, require("./helpers/getSize"), module.exports);
 __reExport(src_exports, require("./helpers/getSplitStyles"), module.exports);

package/dist/cjs/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 { createTokens } from './createTokens'\nexport * from './createVariable'\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/createShallowUpdate'\nexport * from './helpers/getStackSize'\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/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/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,sBAAd;AACA,wBAAc,8BADd;AAEA,wBAAc,+BAFd;AAGA,wBAAc,0BAHd;AAIA,wBAAc,4BAJd;AAKA,wBAAc,yBALd;AAMA,0BAA6B;AAC7B,wBAAc,6BAPd;AAQA,wBAAc,qBARd;AASA,wBAAc,oBATd;AAWA,uBAA2C;AAC3C,kBAAoF;AAEpF,wBAAc,kCAdd;AAeA,wBAAc,iCAfd;AAgBA,wBAAc,4BAhBd;AAkBA,wBAAc,0CAlBd;AAmBA,wBAAc,mCAnBd;AAoBA,wBAAc,4CApBd;AAqBA,wBAAc,8BArBd;AAsBA,wBAAc,qCAtBd;AAuBA,wBAAc,sCAvBd;AAwBA,wBAAc,kCAxBd;AAyBA,wBAAc,4BAzBd;AA0BA,wBAAc,uCA1Bd;AA2BA,wBAAc,iCA3Bd;AA4BA,wBAAc,gCA5Bd;AA6BA,wBAAc,2CA7Bd;AA+BA,wBAAc,iDA/Bd;AAiCA,wBAAc,gCAjCd;AAkCA,wBAAc,0BAlCd;AAmCA,wBAAc,iCAnCd;AAoCA,wBAAc,qCApCd;AAqCA,wBAAc,6BArCd;AAsCA,wBAAc,iCAtCd;AAuCA,wBAAc,6BAvCd;AAwCA,wBAAc,qCAxCd;AA0CA,wBAAc,0BA1Cd;AA2CA,wBAAc,yBA3Cd;AA4CA,wBAAc,wCA5Cd;AA6CA,wBAAc,0BA7Cd;AA8CA,wBAAc,iCA9Cd;AA+CA,wBAAc,kCA/Cd;AAgDA,wBAAc,+BAhDd;AAkDA,wBAAc,sCAlDd;AAmDA,wBAAc,6BAnDd;",
+  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\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/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/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/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAc,sBAAd;AACA,wBAAc,8BADd;AAEA,wBAAc,+BAFd;AAGA,wBAAc,0BAHd;AAIA,wBAAc,4BAJd;AAKA,wBAAc,yBALd;AAMA,0BAA6B;AAC7B,wBAAc,6BAPd;AAQA,wBAAc,qBARd;AASA,wBAAc,oBATd;AAWA,uBAA2C;AAC3C,kBAAoF;AAEpF,wBAAc,kCAdd;AAeA,wBAAc,iCAfd;AAgBA,wBAAc,4BAhBd;AAkBA,wBAAc,0CAlBd;AAmBA,wBAAc,mCAnBd;AAoBA,wBAAc,uCApBd;AAqBA,wBAAc,4CArBd;AAsBA,wBAAc,8BAtBd;AAuBA,wBAAc,qCAvBd;AAwBA,wBAAc,sCAxBd;AAyBA,wBAAc,kCAzBd;AA0BA,wBAAc,4BA1Bd;AA2BA,wBAAc,uCA3Bd;AA4BA,wBAAc,iCA5Bd;AA6BA,wBAAc,gCA7Bd;AA8BA,wBAAc,2CA9Bd;AAgCA,wBAAc,iDAhCd;AAkCA,wBAAc,gCAlCd;AAmCA,wBAAc,0BAnCd;AAoCA,wBAAc,iCApCd;AAqCA,wBAAc,qCArCd;AAsCA,wBAAc,6BAtCd;AAuCA,wBAAc,iCAvCd;AAwCA,wBAAc,6BAxCd;AAyCA,wBAAc,qCAzCd;AA2CA,wBAAc,0BA3Cd;AA4CA,wBAAc,yBA5Cd;AA6CA,wBAAc,wCA7Cd;AA8CA,wBAAc,0BA9Cd;AA+CA,wBAAc,iCA/Cd;AAgDA,wBAAc,kCAhDd;AAiDA,wBAAc,+BAjDd;AAmDA,wBAAc,sCAnDd;AAoDA,wBAAc,6BApDd;",
   "names": []
 }

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | symbol =\n    | VariantDefinitions<ParentComponent>\n    | symbol\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  const staticConfigProps = (() => {\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNativeWeb =\n        'staticConfig' in Component\n          ? Component.staticConfig.isReactNativeWeb\n          : RNComponents.has(Component)\n      const reactNativeWebComponent = isReactNativeWeb\n        ? Component['staticConfig']?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n    ? P\n    : GetProps<ParentComponent>\n  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n  type OurVariants = Variants extends symbol\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void | symbol\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  return component as TamaguiComponent<\n    Props,\n    // TODO infer ref\n    any,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// test types:\n// // variants\n// export const XStack = styled(Stack, {\n//   flexDirection: 'row',\n//   name: 'XStack',\n//   variants: {\n//     fullscreen: {\n//       true: {},\n//     },\n//     elevation: {\n//       '...size': (val) => ({}),\n//     },\n//   },\n// })\n// const InBetween = styled(XStack, {})\n// type INBVariants = typeof InBetween extends TamaguiComponent<any, any, any, infer Variants> ? Variants: never\n// const SwitchFrame = styled(InBetween, {\n//   name: 'Switch',\n//   tag: 'button',\n//   borderRadius: 100,\n//   borderWidth: 0,\n//   variants: {\n//     name: {\n//       true: {\n//         backgroundColor: 'aliceblue'\n//       },\n//       // 1: {\n\n//       // },\n//       // ':number': (val) => {\n//       //   return {}\n//       // },\n//       // \"...fontSize\": (val) => {\n//       //   return {}\n//       // },\n//       // \"...color\": (val) => {\n//       //   return {}\n//       // }\n//     }\n//   },\n//   defaultVariants: {\n//     size: '$4',\n//   },\n// })\n// const x = <XStack fullscreen />\n// const y = <XStack fullscreen />\n// const z = <SwitchFrame fullscreen name />\n\n// depth:\n// export const SizableText = styled(Stack, {\n//   name: 'SizableText',\n//   backgroundColor: 'red',\n//   variants: {\n//     size: {\n//       '...fontSize': (val, { props }) => {\n//         return {\n//           backgroundColor: '',\n//         }\n//       },\n//     },\n//   },\n// })\n// export const Heading = styled(SizableText, {\n//   tag: 'span',\n//   name: 'Heading',\n//   accessibilityRole: 'header',\n//   size: '$8',\n//   margin: 0,\n// })\n// export const Paragraph = styled(SizableText, {\n//   tag: 'p',\n//   margin: 10,\n//   variants: {\n//     another: {\n//       true: {},\n//     },\n//   },\n// })\n// export const Paragraph2 = styled(Paragraph, {\n//   tag: 'p',\n//   variants: {\n//     another: {\n//       '...color': (val) => ({\n//         backgroundColor: 'red',\n//       }),\n//     },\n//   },\n// })\n// const a = <SizableText size=\"$10\" />\n// const b = <Paragraph size=\"$10\" another />\n// const c = <Paragraph2 size=\"$10\" another=\"aliceblue\" />\n// export const SizableText2 = styled(SizableText, {\n// })\n// const xx = <SizableText2 abc />\n// export const Paragraph = styled(SizableText, {\n//   name: 'Paragraph',\n// })\n// export const Heading = styled(Paragraph, {\n//   tag: 'span',\n//   margin: 0,\n// })\n// export const H2 = styled(Heading, {\n//   name: 'H2',\n// })\n// const x = <H2 color=\"red\" />\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAuC;AAEvC,6BAAgC;AAChC,0BAA6B;AAoBtB,gBAML,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;AAvCnC;AAwCI,QAAI,SAAS;AACX,YAA6D,cAArD,YAAU,MAAM,oBAAqC,IAAjB,yBAAiB,IAAjB,CAApC,YAAU,QAAM;AACxB,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,iCAAa,IAAI,SAAS;AAChC,YAAM,0BAA0B,mBAC5B,iBAAU,oBAAV,mBAA2B,4BAA2B,YACtD;AACJ,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,4BAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,gCAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,2BAAO;AAClF,YAAM,OAA8B,gDAC/B,0BACC,CAAC,aAAa;AAAA,QAChB,WAAW;AAAA,MACb,IAJkC;AAAA,QAKlC;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,4CAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;AA9FgB;",
+  "sourcesContent": ["import { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  VariantDefinitions,\n  VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n  name?: string\n  variants?: VariantDefinitions<ParentComponent> | undefined\n  defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | symbol =\n    | VariantDefinitions<ParentComponent>\n    | symbol\n>(\n  Component: ParentComponent,\n  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n  options?: GetProps<ParentComponent> & {\n    name?: string\n    variants?: Variants | undefined\n    // thought i had this typed, but can't get it linked\n    defaultVariants?: { [key: string]: any }\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  const staticConfigProps = (() => {\n    if (options) {\n      const { variants, name, defaultVariants, ...defaultProps } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNativeWeb =\n        'staticConfig' in Component\n          ? Component.staticConfig.isReactNativeWeb\n          : RNComponents.has(Component)\n      const reactNativeWebComponent = isReactNativeWeb\n        ? Component['staticConfig']?.reactNativeWebComponent || Component\n        : null\n      const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = reactNativeWebComponent || (Component as any)\n      const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false))\n      const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false))\n      const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false))\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\n        isTamagui,\n        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n        // take away the Partial<> and it's fine\n        variants,\n        defaultProps,\n        defaultVariants,\n        componentName: name,\n        isReactNativeWeb,\n        // for nesting multiple levels of rnw styled() need keep use the OG component\n        reactNativeWebComponent,\n        isInput,\n        isText,\n        isImage,\n      }\n\n      return conf\n    }\n    return {}\n  })()\n\n  const component = createComponent(staticConfigProps, Component)\n\n  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n    ? P\n    : GetProps<ParentComponent>\n  type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n  type OurVariants = Variants extends symbol\n    ? {}\n    : {\n        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n          ? Val\n          : GetVariantValues<keyof Variants[Key]>\n      }\n\n  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n  type OurPropsBase = ParentPropsBase & VariantProps\n\n  type Props = Variants extends void | symbol\n    ? GetProps<ParentComponent>\n    : // start with base props\n      OurPropsBase &\n        // add in media (+ pseudos nested)\n        MediaProps<Partial<OurPropsBase>> &\n        // add in pseudos\n        PseudoProps<Partial<OurPropsBase>>\n\n  return component as TamaguiComponent<\n    Props,\n    // TODO infer ref\n    any,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n}\n\n// test types:\n// // variants\n// export const XStack = styled(Stack, {\n//   flexDirection: 'row',\n//   name: 'XStack',\n//   variants: {\n//     fullscreen: {\n//       true: {},\n//     },\n//     elevation: {\n//       '...size': (val) => ({}),\n//     },\n//   },\n// })\n// const InBetween = styled(XStack, {})\n// type INBVariants = typeof InBetween extends TamaguiComponent<any, any, any, infer Variants> ? Variants: never\n// const SwitchFrame = styled(InBetween, {\n//   name: 'Switch',\n//   tag: 'button',\n//   borderRadius: 100,\n//   borderWidth: 0,\n//   variants: {\n//     name: {\n//       true: {\n//         backgroundColor: 'aliceblue'\n//       },\n//       // 1: {\n\n//       // },\n//       // ':number': (val) => {\n//       //   return {}\n//       // },\n//       // \"...fontSize\": (val) => {\n//       //   return {}\n//       // },\n//       // \"...color\": (val) => {\n//       //   return {}\n//       // }\n//     }\n//   },\n//   defaultVariants: {\n//     size: '$4',\n//   },\n// })\n// const x = <XStack fullscreen />\n// const y = <XStack fullscreen />\n// const z = <SwitchFrame fullscreen name />\n\n// depth:\n// export const SizableText = styled(Stack, {\n//   name: 'SizableText',\n//   backgroundColor: 'red',\n//   variants: {\n//     size: {\n//       '...fontSize': (val, { props }) => {\n//         return {\n//           backgroundColor: '',\n//         }\n//       },\n//     },\n//   },\n// })\n// export const Heading = styled(SizableText, {\n//   tag: 'span',\n//   name: 'Heading',\n//   accessibilityRole: 'header',\n//   size: '$8',\n//   margin: 0,\n// })\n// export const Paragraph = styled(SizableText, {\n//   tag: 'p',\n//   margin: 10,\n//   variants: {\n//     another: {\n//       true: {},\n//     },\n//   },\n// })\n// export const Paragraph2 = styled(Paragraph, {\n//   tag: 'p',\n//   variants: {\n//     another: {\n//       '...color': (val) => ({\n//         backgroundColor: 'red',\n//       }),\n//     },\n//   },\n// })\n// const a = <SizableText size=\"$10\" />\n// const b = <Paragraph size=\"$10\" another />\n// const c = <Paragraph2 size=\"$10\" another=\"aliceblue\" />\n// export const SizableText2 = styled(SizableText, {\n// })\n// const xx = <SizableText2 abc />\n// export const Paragraph = styled(SizableText, {\n//   name: 'Paragraph',\n// })\n// export const Heading = styled(Paragraph, {\n//   tag: 'span',\n//   margin: 0,\n// })\n// export const H2 = styled(Heading, {\n//   name: 'H2',\n// })\n// const x = <H2 color=\"red\" />\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAuC;AAEvC,6BAAgC;AAChC,0BAA6B;AAoBtB,gBAML,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;AAvCnC;AAwCI,QAAI,SAAS;AACX,YAA6D,cAArD,YAAU,MAAM,oBAAqC,IAAjB,yBAAiB,IAAjB,CAApC,YAAU,QAAM;AACxB,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,iCAAa,IAAI,SAAS;AAChC,YAAM,0BAA0B,mBAC5B,iBAAU,oBAAV,mBAA2B,4BAA2B,YACtD;AACJ,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,4BAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,gCAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,2BAAO;AAElF,YAAM,OAA8B,gDAC/B,0BACC,CAAC,aAAa;AAAA,QAChB,WAAW;AAAA,MACb,IAJkC;AAAA,QAKlC;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,4CAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;AA/FgB;",
   "names": []
 }

package/dist/cjs/types-rnw.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/types-rnw.tsx"],
-  "sourcesContent": ["// The following list is sourced from:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L76\ntype RNWCursorValue =\n  | 'alias'\n  | 'all-scroll'\n  | 'auto'\n  | 'cell'\n  | 'context-menu'\n  | 'copy'\n  | 'crosshair'\n  | 'default'\n  | 'grab'\n  | 'grabbing'\n  | 'help'\n  | 'pointer'\n  | 'progress'\n  | 'wait'\n  | 'text'\n  | 'vertical-text'\n  | 'move'\n  | 'none'\n  | 'no-drop'\n  | 'not-allowed'\n  | 'zoom-in'\n  | 'zoom-out'\n  | 'col-resize'\n  | 'e-resize'\n  | 'ew-resize'\n  | 'n-resize'\n  | 'ne-resize'\n  | 'ns-resize'\n  | 'nw-resize'\n  | 'row-resize'\n  | 's-resize'\n  | 'se-resize'\n  | 'sw-resize'\n  | 'w-resize'\n  | 'nesw-resize'\n  | 'nwse-resize'\n\n// This list is the combination of the following two lists:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js#L10\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12\n// Plus the single hard-coded value \"label\" from here:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L36\ntype RNWWebAccessibilityRole =\n  | 'adjustable'\n  | 'article'\n  | 'banner'\n  | 'blockquote'\n  | 'button'\n  | 'code'\n  | 'complementary'\n  | 'contentinfo'\n  | 'deletion'\n  | 'emphasis'\n  | 'figure'\n  | 'form'\n  | 'header'\n  | 'image'\n  | 'imagebutton'\n  | 'insertion'\n  | 'keyboardkey'\n  | 'label'\n  | 'link'\n  | 'list'\n  | 'listitem'\n  | 'main'\n  | 'navigation'\n  | 'none'\n  | 'region'\n  | 'search'\n  | 'strong'\n  | 'summary'\n  | 'text'\n\ninterface PressableStateCallbackType {\n  hovered?: boolean\n  focused?: boolean\n}\n\nexport interface RNWViewProps {\n  // our internal hack to pass className down (until styleq transition)\n  dataSet?: any\n\n  // TODO get proper types:\n  target?: any\n  rel?: any\n  download?: any\n\n  accessibilityRole?: RNWWebAccessibilityRole\n  href?: string\n  hrefAttrs?: {\n    target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'\n    rel?: string\n    download?: boolean\n  }\n  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onMouseUp?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void\n  onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void\n  // For compatibility with RNW internals\n  onScrollShouldSetResponder?: unknown\n  onScrollShouldSetResponderCapture?: unknown\n  onSelectionChangeShouldSetResponder?: unknown\n  onSelectionChangeShouldSetResponderCapture?: unknown\n}\n\nexport interface RNWTextProps {\n  dir?: 'ltr' | 'rtl' | 'auto'\n  focusable?: boolean\n  accessibilityRole?: RNWWebAccessibilityRole\n  accessibilityState?: {\n    busy?: boolean\n    checked?: boolean | 'mixed'\n    disabled?: boolean\n    expanded?: boolean\n    grabbed?: boolean\n    hidden?: boolean\n    invalid?: boolean\n    pressed?: boolean\n    readonly?: boolean\n    required?: boolean\n    selected?: boolean\n  }\n  href?: string\n  // TODO hrefAttrs or come up with proper html escape hatch\n  // hrefAttrs?: {\n  //   target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'\n  //   rel?: string\n  //   download?: boolean\n  // }\n  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void\n  // For compatibility with RNW internals\n  onMoveShouldSetResponder?: unknown\n  onMoveShouldSetResponderCapture?: unknown\n  onResponderEnd?: unknown\n  onResponderGrant?: unknown\n  onResponderMove?: unknown\n  onResponderReject?: unknown\n  onResponderRelease?: unknown\n  onResponderStart?: unknown\n  onResponderTerminate?: unknown\n  onResponderTerminationRequest?: unknown\n  onScrollShouldSetResponder?: unknown\n  onScrollShouldSetResponderCapture?: unknown\n  onSelectionChangeShouldSetResponder?: unknown\n  onSelectionChangeShouldSetResponderCapture?: unknown\n  onStartShouldSetResponder?: unknown\n  onStartShouldSetResponderCapture?: unknown\n}\n\nexport interface RNWViewStyle {\n  cursor?: RNWCursorValue\n  transitionProperty?: string\n  display?: 'flex' | 'inline-flex' | 'none'\n}\n\nexport interface RNWTextStyle {\n  // The following list is sourced from:\n  // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L128\n  userSelect?: 'all' | 'auto' | 'contain' | 'none' | 'text'\n}\n"],
+  "sourcesContent": ["// The following list is sourced from:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L76\ntype RNWCursorValue =\n  | 'alias'\n  | 'all-scroll'\n  | 'auto'\n  | 'cell'\n  | 'context-menu'\n  | 'copy'\n  | 'crosshair'\n  | 'default'\n  | 'grab'\n  | 'grabbing'\n  | 'help'\n  | 'pointer'\n  | 'progress'\n  | 'wait'\n  | 'text'\n  | 'vertical-text'\n  | 'move'\n  | 'none'\n  | 'no-drop'\n  | 'not-allowed'\n  | 'zoom-in'\n  | 'zoom-out'\n  | 'col-resize'\n  | 'e-resize'\n  | 'ew-resize'\n  | 'n-resize'\n  | 'ne-resize'\n  | 'ns-resize'\n  | 'nw-resize'\n  | 'row-resize'\n  | 's-resize'\n  | 'se-resize'\n  | 'sw-resize'\n  | 'w-resize'\n  | 'nesw-resize'\n  | 'nwse-resize'\n\n// This list is the combination of the following two lists:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js#L10\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12\n// Plus the single hard-coded value \"label\" from here:\n// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L36\ntype RNWWebAccessibilityRole =\n  | 'adjustable'\n  | 'article'\n  | 'banner'\n  | 'blockquote'\n  | 'button'\n  | 'code'\n  | 'complementary'\n  | 'contentinfo'\n  | 'deletion'\n  | 'emphasis'\n  | 'figure'\n  | 'form'\n  | 'header'\n  | 'image'\n  | 'imagebutton'\n  | 'insertion'\n  | 'keyboardkey'\n  | 'label'\n  | 'link'\n  | 'list'\n  | 'listitem'\n  | 'main'\n  | 'navigation'\n  | 'none'\n  | 'region'\n  | 'search'\n  | 'strong'\n  | 'summary'\n  | 'text'\n\nexport interface RNWViewProps {\n  // our internal hack to pass className down (until styleq transition)\n  dataSet?: any\n\n  // TODO get proper types:\n  target?: any\n  rel?: any\n  download?: any\n\n  accessibilityRole?: RNWWebAccessibilityRole\n  href?: string\n  hrefAttrs?: {\n    target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'\n    rel?: string\n    download?: boolean\n  }\n  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onMouseUp?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void\n  onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void\n  // For compatibility with RNW internals\n  onScrollShouldSetResponder?: unknown\n  onScrollShouldSetResponderCapture?: unknown\n  onSelectionChangeShouldSetResponder?: unknown\n  onSelectionChangeShouldSetResponderCapture?: unknown\n}\n\nexport interface RNWTextProps {\n  dir?: 'ltr' | 'rtl' | 'auto'\n  focusable?: boolean\n  accessibilityRole?: RNWWebAccessibilityRole\n  accessibilityState?: {\n    busy?: boolean\n    checked?: boolean | 'mixed'\n    disabled?: boolean\n    expanded?: boolean\n    grabbed?: boolean\n    hidden?: boolean\n    invalid?: boolean\n    pressed?: boolean\n    readonly?: boolean\n    required?: boolean\n    selected?: boolean\n  }\n  href?: string\n  // TODO hrefAttrs or come up with proper html escape hatch\n  // hrefAttrs?: {\n  //   target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'\n  //   rel?: string\n  //   download?: boolean\n  // }\n  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void\n  // For compatibility with RNW internals\n  onMoveShouldSetResponder?: unknown\n  onMoveShouldSetResponderCapture?: unknown\n  onResponderEnd?: unknown\n  onResponderGrant?: unknown\n  onResponderMove?: unknown\n  onResponderReject?: unknown\n  onResponderRelease?: unknown\n  onResponderStart?: unknown\n  onResponderTerminate?: unknown\n  onResponderTerminationRequest?: unknown\n  onScrollShouldSetResponder?: unknown\n  onScrollShouldSetResponderCapture?: unknown\n  onSelectionChangeShouldSetResponder?: unknown\n  onSelectionChangeShouldSetResponderCapture?: unknown\n  onStartShouldSetResponder?: unknown\n  onStartShouldSetResponderCapture?: unknown\n}\n\nexport interface RNWViewStyle {\n  cursor?: RNWCursorValue\n  transitionProperty?: string\n  display?: 'flex' | 'inline-flex' | 'none'\n}\n\nexport interface RNWTextStyle {\n  // The following list is sourced from:\n  // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L128\n  userSelect?: 'all' | 'auto' | 'contain' | 'none' | 'text'\n}\n"],
   "mappings": ";;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/types.tsx"],
-  "sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport CSS from 'csstype'\nimport React from 'react'\nimport {\n  GestureResponderEvent,\n  Image,\n  TextProps as ReactTextProps,\n  Text,\n  TextInput,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Variable } from './createVariable'\nimport { ResolveVariableTypes } from './helpers/createPropMapper'\nimport { RNWTextProps, RNWViewProps } from './types-rnw'\nimport { ThemeProviderProps } from './views/ThemeProvider'\n\nexport type ReactComponentWithRef<Props, Ref> = React.ForwardRefExoticComponent<\n  Props & React.RefAttributes<Ref>\n>\n\nexport type ConfigListener = (conf: TamaguiInternalConfig) => void\n\n// to prevent things from going circular, hoisting some types in this file\n// to generally order them as building up towards TamaguiConfig\n\nexport type VariableVal = number | string | Variable\nexport type VariableColorVal = string | Variable\n\ntype GenericKey = string | number | symbol\n\nexport interface CreateTokens<Val extends VariableVal = VariableVal> {\n  color: { [key: GenericKey]: Val }\n  space: { [key: GenericKey]: Val }\n  size: { [key: GenericKey]: Val }\n  radius: { [key: GenericKey]: Val }\n  zIndex: { [key: GenericKey]: Val }\n}\n\nexport type TamaguiBaseTheme = {\n  // defined for our tamagui kit , we could do this inside `tamagui`\n  // but maybe helpful to have some sort of universally shared things +\n  // + enforce if they want their own, redefine in their design sys\n  background: VariableColorVal\n  backgroundHover: VariableColorVal\n  backgroundPress: VariableColorVal\n  backgroundFocus: VariableColorVal\n  color: VariableColorVal\n  colorHover: VariableColorVal\n  colorPress: VariableColorVal\n  colorFocus: VariableColorVal\n  borderColor: VariableColorVal\n  borderColorHover: VariableColorVal\n  borderColorPress: VariableColorVal\n  borderColorFocus: VariableColorVal\n  shadowColor: VariableColorVal\n  shadowColorHover: VariableColorVal\n  shadowColorPress: VariableColorVal\n  shadowColorFocus: VariableColorVal\n}\n\ntype GenericTokens = CreateTokens\ntype GenericThemes = {\n  [key: string]:\n    | Partial<TamaguiBaseTheme> & {\n        [key: string]: VariableVal\n      }\n}\ntype GenericShorthands = {\n  // [key: string]: string\n}\n\ntype GenericMedia<K extends string = string> = {\n  // name => media shorthand name (camelCase) => value\n  [key in K]: {\n    [key: string]: number | string\n  }\n}\n\ntype GenericFonts = {\n  [key: string]: GenericFont\n}\n\ntype GenericAnimations = {\n  [key: string]:\n    | string\n    | {\n        [key: string]: any\n      }\n}\n\n// this is the \"main\" typed object, which users re-define\n// (internal) keep all types directly on this object and reference them from elsewhere\n//\n// const config = createTamagui(...)\n// type MyConfig = typeof config\n// declare module 'tamagui' {\n//   export interface TamaguiCustomConfig extends MyConfig {}\n// }\n// now your whole app/kit should be typed correctly\n//\nexport interface TamaguiCustomConfig {}\n\nexport interface TamaguiConfig\n  extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,\n    TamaguiCustomConfig {}\n\nexport type CreateTamaguiConfig<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = Partial<Pick<ThemeProviderProps, 'defaultTheme' | 'disableRootThemeClass'>> & {\n  fonts: F\n  tokens: A\n  themes: B\n  shorthands: C\n  media: D\n  animations: AnimationDriver<E>\n}\n\n// for use in creation functions so it doesnt get overwrtitten\nexport type GenericTamaguiConfig = CreateTamaguiConfig<\n  GenericTokens,\n  GenericThemes,\n  GenericShorthands,\n  GenericMedia,\n  GenericAnimations,\n  GenericFonts\n>\n\n// since TamaguiConfig will be re-declared, these will all be typed globally\nexport type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]\nexport type Tokens = TamaguiConfig['tokens']\nexport type Shorthands = TamaguiConfig['shorthands']\nexport type Media = TamaguiConfig['media']\nexport type Themes = TamaguiConfig['themes']\nexport type ThemeName = GetAltThemeNames<keyof Themes>\n// export type ThemeNameWithSubThemes = GetSubThemes<ThemeName>\nexport type ThemeKeys = keyof ThemeObject\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>\n\ntype GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S\n\n// this is the config generated via createTamagui()\nexport type TamaguiInternalConfig<\n  A extends GenericTokens = GenericTokens,\n  B extends GenericThemes = GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = CreateTamaguiConfig<A, B, C, D, E, F> & {\n  // TODO need to make it this but this breaks types, revisit\n  // animations: E //AnimationDriver<E>\n  Provider: (props: TamaguiProviderProps) => any\n  // with $ prefixes for fast lookups (one time cost at startup vs every render)\n  tokensParsed: CreateTokens<Variable>\n  themeConfig: any\n  fontsParsed: GenericFonts\n  getCSS: () => string\n  parsed: boolean\n}\n\nexport type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']\n\n// prevents const intersections from being clobbered into string, keeping the consts\nexport type UnionableString = string & {}\nexport type UnionableNumber = number & {}\nexport type PropTypes<A extends TamaguiComponent> = A extends React.FunctionComponent<infer Props>\n  ? Props\n  : unknown\n\nexport type GenericFont<Key extends number | string = number | string> = {\n  size: { [key in Key]: number | Variable }\n  lineHeight: Partial<{ [key in Key]: number | Variable }>\n  letterSpacing: Partial<{ [key in Key]: number | Variable }>\n  weight: Partial<{ [key in Key]: number | string | Variable }>\n  family: string | Variable\n  style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>\n  transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>\n  color?: Partial<{ [key in Key]: string | Variable }>\n}\n\n// media\nexport type MediaKeys = keyof Media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\nexport type MediaQueryState = { [key in MediaPropKeys]: boolean }\nexport type MediaProps<A> = {\n  [key in MediaPropKeys]?: A\n}\nexport type MediaQueries = {\n  [key in MediaQueryKey]: MediaQueryObject\n}\nexport type ConfigureMediaQueryOptions = {\n  queries?: MediaQueries\n  defaultActive?: MediaQueryKey[]\n}\n\nexport type TransformStyleProps = {\n  x?: number\n  y?: number\n  perspective?: number\n  scale?: number\n  scaleX?: number\n  scaleY?: number\n  skewX?: string\n  skewY?: string\n  matrix?: number[]\n  rotate?: string\n  rotateY?: string\n  rotateX?: string\n  rotateZ?: string\n}\n\n// createComponent props helpers\n\n// animation=\"bouncy\"\n// animation={['bouncy', {  }]}\n// { all: 'name' }\n\n// TODO can override for better types\nexport type AnimationConfigType = any\n\nexport type AnimationProp =\n  | AnimationKeys\n  | {\n      [key: string]:\n        | AnimationKeys\n        | {\n            type: AnimationKeys\n            [key: string]: any\n          }\n    }\n  | [\n      AnimationKeys,\n      {\n        [key: string]:\n          | AnimationKeys\n          | {\n              type?: AnimationKeys\n              [key: string]: any\n            }\n      }\n    ]\n\nexport type SpaceDirection = ViewStyle['flexDirection'] | 'both'\n\n//\n// base props that are accepted by createComponent (additional to react-native-web)\n//\nexport type TamaguiComponentPropsBase = {\n  asChild?: boolean\n  space?: SpaceTokens\n  spaceDirection?: SpaceDirection\n  dangerouslySetInnerHTML?: { __html: string }\n  animation?: AnimationProp\n  animateOnly?: string[]\n  children?: any | any[]\n  debug?: boolean | 'break' | 'verbose'\n  disabled?: boolean\n  className?: string\n  id?: string\n  tag?: string\n  theme?: ThemeName | null\n  onHoverIn?: (e: MouseEvent) => any\n  onHoverOut?: (e: MouseEvent) => any\n  onPress?: (e: GestureResponderEvent) => any\n  onPressIn?: (e: GestureResponderEvent) => any\n  onPressOut?: (e: GestureResponderEvent) => any\n  // WEB ONLY\n  onMouseEnter?: (e: MouseEvent) => any\n  onMouseLeave?: (e: MouseEvent) => any\n  onMouseDown?: (e: MouseEvent) => any\n}\n\ntype GetTokenFontKeysFor<\n  A extends\n    | 'size'\n    | 'weight'\n    | 'letterSpacing'\n    | 'family'\n    | 'lineHeight'\n    | 'transform'\n    | 'style'\n    | 'color'\n> = keyof TamaguiConfig['fonts']['body'][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\n// base tokens\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean\nexport type ColorTokens =\n  | GetTokenString<keyof Tokens['color']>\n  | GetTokenString<keyof ThemeObject>\n  | CSSColorNames\nexport type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number\nexport type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number\n\n// font tokens\nexport type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>\nexport type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number\nexport type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number\nexport type FontWeightTokens =\n  | `$${GetTokenFontKeysFor<'weight'>}`\n  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`\nexport type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number\nexport type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number\nexport type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']\nexport type FontTransformTokens =\n  | `$${GetTokenFontKeysFor<'transform'>}`\n  | TextStyle['textTransform']\n\n//\n// adds theme short values to relevant props\n//\n\nexport type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends 'size'\n  ? SizeTokens\n  : K extends 'font'\n  ? FontTokens\n  : K extends 'fontSize'\n  ? FontSizeTokens\n  : K extends 'space'\n  ? SpaceTokens\n  : K extends 'color'\n  ? ColorTokens\n  : K extends 'zIndex'\n  ? ZIndexTokens\n  : K extends 'lineHeight'\n  ? FontLineHeightTokens\n  : K extends 'fontWeight'\n  ? FontWeightTokens\n  : K extends 'letterSpacing'\n  ? FontLetterSpacingTokens\n  : {}\n\ntype FontKeys = 'fontFamily'\ntype FontSizeKeys = 'fontSize'\ntype FontWeightKeys = 'fontWeight'\ntype FontLetterSpacingKeys = 'letterSpacing'\ntype LineHeightKeys = 'lineHeight'\ntype ZIndexKeys = 'zIndex'\n\nexport type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends SizeKeys\n  ? SizeTokens\n  : K extends FontKeys\n  ? FontTokens\n  : K extends FontSizeKeys\n  ? FontSizeTokens\n  : K extends SpaceKeys\n  ? K extends 'shadowOffset'\n    ? { width: SpaceTokens; height: SpaceTokens }\n    : SpaceTokens\n  : K extends ColorKeys\n  ? ColorTokens\n  : K extends ZIndexKeys\n  ? ZIndexTokens\n  : K extends LineHeightKeys\n  ? FontLineHeightTokens\n  : K extends FontWeightKeys\n  ? FontWeightTokens\n  : K extends FontLetterSpacingKeys\n  ? FontLetterSpacingTokens\n  : never\n\nexport type ThemeValueFallback = UnionableString | Variable\n\nexport type WithThemeValues<T extends object> = {\n  [K in keyof T]: ThemeValueGet<K> extends never\n    ? T[K]\n    : ThemeValueGet<K> | Exclude<T[K], string> | ThemeValueFallback\n}\n\n// adds shorthand props\nexport type WithShorthands<StyleProps> = {\n  [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps\n    ? StyleProps[Shorthands[Key]] | null\n    : undefined\n}\n\n// adds pseudo props\nexport type PseudoProps<A> = {\n  hoverStyle?: A | null\n  pressStyle?: A | null\n  focusStyle?: A | null\n  exitStyle?: A | null\n  enterStyle?: A | null\n}\n\nexport type PsuedoPropKeys = keyof PseudoProps<any>\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\n//\n// add both theme and shorthands\n//\ntype WithThemeAndShorthands<A extends object> = WithThemeValues<A> &\n  WithShorthands<WithThemeValues<A>>\n\n//\n// combines all of theme, shorthands, psuedos...\n//\ntype WithThemeShorthandsAndPseudos<A extends object> =\n  | WithThemeAndShorthands<A> & PseudoProps<WithThemeAndShorthands<A>>\n\n//\n// ... media queries and animations\n//\ntype WithThemeShorthandsPseudosMediaAnimation<A extends object> = WithThemeShorthandsAndPseudos<A> &\n  MediaProps<WithThemeShorthandsAndPseudos<A>>\n\n//\n// Stack\n//\n\ntype WebOnlyStyleProps = {\n  // WEB ONLY\n  cursor?: string\n  // WEB ONLY\n  contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'paint' | string\n  // WEB ONLY values: inherit, inline, block, content\n  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'\n  // WEB ONLY pointerEvents can be a style prop\n  pointerEvents?: ViewProps['pointerEvents']\n}\n\nexport type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &\n  TransformStyleProps &\n  WebOnlyStyleProps\n\nexport type StackPropsBaseShared = Omit<ViewProps, 'display' | 'children'> &\n  RNWViewProps &\n  TamaguiComponentPropsBase\nexport type StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\nexport type StackPropsBase = StackPropsBaseShared & WithThemeAndShorthands<StackStylePropsBase>\nexport type StackProps = StackPropsBaseShared & StackStyleProps\n\n//\n// Text props\n//\n\nexport type TextStylePropsBase = Omit<TextStyle, 'display' | 'backfaceVisibility'> &\n  TransformStyleProps &\n  WebOnlyStyleProps & {\n    ellipse?: boolean\n    selectable?: boolean\n    textDecorationDistance?: number\n    userSelect?: CSS.Properties['userSelect']\n    textOverflow?: CSS.Properties['textOverflow']\n    whiteSpace?: CSS.Properties['whiteSpace']\n    wordWrap?: CSS.Properties['wordWrap']\n    cursor?: CSS.Properties['cursor']\n  }\n\nexport type TextPropsBaseShared = Omit<ReactTextProps, 'children'> &\n  RNWTextProps &\n  TamaguiComponentPropsBase\nexport type TextPropsBase = TextPropsBaseShared & WithThemeAndShorthands<TextStylePropsBase>\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\nexport type TextProps = TextPropsBaseShared & TextStyleProps\n\n// could actually infer from parent\nexport type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<\n  Omit<TextStylePropsBase, keyof StackStylePropsBase> & StackStylePropsBase\n>\n\n//\n// StaticComponent\n//\n\nexport type TamaguiComponent<\n  Props = any,\n  Ref = any,\n  BaseProps = {},\n  VariantProps = {}\n> = ReactComponentWithRef<Props, Ref> & StaticComponentObject\n\ntype StaticComponentObject = {\n  staticConfig: StaticConfig\n  /*\n   * Only needed for more complex components\n   * If you create a styled frame component this is a HoC to extract\n   * styles from all parents.\n   */\n  extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n  injectCSS?: boolean\n  children?: React.ReactNode\n}\n\nexport type StaticConfigParsed = StaticConfig & {\n  parsed: true\n  propMapper: (\n    key: string,\n    value: any,\n    theme: ThemeObject,\n    props: any,\n    resolveVariablesAs?: ResolveVariableTypes,\n    avoidDefaultProps?: boolean\n  ) => undefined | boolean | { [key: string]: any }\n  variantsParsed?: {\n    [key: string]: {\n      [key: string]: any\n    }\n  }\n}\n\nexport type StaticConfig = {\n  Component?: React.FunctionComponent<any> & StaticComponentObject\n\n  variants?: {\n    [key: string]: {\n      [key: string]:\n        | ((a: any, b: any) => any)\n        | {\n            [key: string]: any\n          }\n    }\n  }\n\n  /**\n   * Used for applying sub theme style\n   */\n  componentName?: string\n\n  /**\n   * If you need to pass context or something, prevents from ever\n   * flattening. The 'jsx' option means it will never flatten. if you\n   * pass JSX as a children (if its purely string, it will still flatten).\n   */\n  neverFlatten?: boolean | 'jsx'\n\n  /**\n   * Determines ultimate output tag (Text vs View)\n   */\n  isText?: boolean\n\n  /**\n   * Attempts to attach focus styles at runtime (useful for native)\n   */\n  isInput?: boolean\n\n  /**\n   * React native web images need special handling for className support\n   */\n  isImage?: boolean\n\n  /**\n   * Which style keys are allowed to be extracted.\n   */\n  validStyles?: { [key: string]: boolean }\n\n  /**\n   * Same as React.defaultProps, be sure to sync\n   */\n  defaultProps?: any\n\n  /**\n   * If these props are encountered, bail on all optimization.\n   */\n  deoptProps?: Set<string>\n\n  /**\n   * If these props are encountered, leave them un-extracted.\n   */\n  inlineProps?: Set<string>\n\n  /**\n   * A bit odd, only for more advanced heirarchies.\n   * Indicates that the component will set this prop so the\n   * static extraction can ensure it sets them to ={undefined}\n   * so they get overriddent. In the future, this can be smarter.\n   */\n  ensureOverriddenProp?: { [key: string]: boolean }\n\n  /**\n   * Auto-detected, but can ovverride. Wraps children to space them on top\n   */\n  isZStack?: boolean\n\n  /**\n   * Merges into defaultProps later on, used internally yonly\n   */\n  defaultVariants?: { [key: string]: any }\n\n  /**\n   * Auto-detect, but can ovverride, passes styles properly to react-native-web\n   */\n  isReactNativeWeb?: boolean\n\n  /**\n   * Used internally to keep reference to the original rnw component\n   */\n  reactNativeWebComponent?: any\n\n  /**\n   * Memoize the component\n   */\n  memo?: boolean\n\n  /**\n   * Auto-detect, but can ovverride, passes styles properly to react-native-web\n   */\n  isTamagui?: boolean\n}\n\n/**\n * --------------------------------------------\n *   variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n  | TamaguiComponent\n  | React.Component\n  | React.ForwardRefExoticComponent<any>\n  | (new (props: any) => any)\n  | typeof View\n  | typeof Text\n  | typeof TextInput\n  | typeof Image\n\nexport type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer BaseProps\n>\n  ? BaseProps\n  : never\n\nexport type GetProps<A extends StylableComponent> = A extends TamaguiComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? GetGenericComponentTamaguiProps<Props>\n  : A extends new (props: infer Props) => any\n  ? GetGenericComponentTamaguiProps<Props>\n  : {}\n\ntype GetGenericComponentTamaguiProps<P> = P &\n  Omit<'textAlign' extends keyof P ? TextProps : StackProps, keyof P>\n\nexport type SpreadKeys =\n  | '...fontSize'\n  | '...fontStyle'\n  | '...fontTransform'\n  | '...lineHeight'\n  | '...letterSpacing'\n  | '...size'\n  | '...color'\n  | '...zIndex'\n  | '...theme'\n  | '...radius'\n\nexport type VariantDefinitions<\n  Parent extends StylableComponent = TamaguiComponent,\n  MyProps extends Object = GetProps<Parent>,\n  Val = any\n> = VariantDefinitionFromProps<MyProps, Val>\n\nexport type VariantDefinitionFromProps<MyProps, Val> = MyProps extends Object\n  ? {\n      [propName: string]:\n        | VariantSpreadFunction<MyProps, Val>\n        | ({\n            [Key in SpreadKeys]?: Key extends '...fontSize'\n              ? FontSizeVariantSpreadFunction<MyProps>\n              : Key extends '...size'\n              ? SizeVariantSpreadFunction<MyProps>\n              : Key extends '...color'\n              ? ColorVariantSpreadFunction<MyProps>\n              : Key extends '...lineHeight'\n              ? FontLineHeightVariantSpreadFunction<MyProps>\n              : Key extends '...fontTransform'\n              ? FontTransformVariantSpreadFunction<MyProps>\n              : Key extends '...fontStyle'\n              ? FontStyleVariantSpreadFunction<MyProps>\n              : Key extends '...letterSpacing'\n              ? FontLetterSpacingVariantSpreadFunction<MyProps>\n              : Key extends '...zIndex'\n              ? ZIndexVariantSpreadFunction<MyProps>\n              : Key extends '...radius'\n              ? RadiusVariantSpreadFunction<MyProps>\n              : Key extends '...theme'\n              ? ThemeVariantSpreadFunction<MyProps>\n              : never\n          } & {\n            [Key in string | number]?: MyProps | VariantSpreadFunction<MyProps, Val>\n          } & {\n            [Key in VariantTypeKeys]?: Key extends ':number'\n              ? VariantSpreadFunction<MyProps, number>\n              : Key extends ':boolean'\n              ? VariantSpreadFunction<MyProps, boolean>\n              : Key extends ':string'\n              ? VariantSpreadFunction<MyProps, string>\n              : never\n          })\n    }\n  : never\n\nexport type GenericStackVariants = VariantDefinitionFromProps<StackProps, any>\nexport type GenericTextVariants = VariantDefinitionFromProps<StackProps, any>\n\nexport type GetVariantProps<Variants> = {\n  [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n    ? Val\n    : GetVariantValues<keyof Variants[Key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n  fonts: TamaguiConfig['fonts']\n  tokens: TamaguiConfig['tokens']\n  theme: Themes extends { [key: string]: infer B } ? B : unknown\n  props: Props\n}\n\ntype PropLike = { [key: string]: any }\n\nexport type VariantSpreadFunction<Props extends PropLike, Val = any> = (\n  val: Val,\n  config: VariantSpreadExtras<Props>\n) =>\n  | {\n      [Key in keyof Props]: Props[Key] | Variable\n    }\n  | null\n  | undefined\n\nexport type VariantTypeKeys = ':string' | ':boolean' | ':number'\n\nexport type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`\n  ? ThemeValueByCategory<VariantSpread>\n  : Key extends 'true' | 'false'\n  ? boolean\n  : Key extends ':string'\n  ? string\n  : Key extends ':boolean'\n  ? boolean\n  : Key extends ':number'\n  ? number\n  : Key\n\nexport type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontSizeTokens\n>\nexport type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SizeTokens>\nexport type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ColorTokens>\nexport type FontLineHeightVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontLineHeightTokens\n>\nexport type FontLetterSpacingVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontLetterSpacingTokens\n>\nexport type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontStyleTokens\n>\nexport type FontTransformVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontTransformTokens\n>\nexport type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ZIndexTokens>\nexport type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, RadiusTokens>\nexport type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ThemeTokens>\n\n/**\n * --------------------------------------------\n *   end variants\n * --------------------------------------------\n */\n\ntype SizeKeys =\n  | 'width'\n  | 'height'\n  | 'minWidth'\n  | 'minHeight'\n  | 'maxWidth'\n  | 'maxHeight'\n  | 'shadowRadius'\n\ntype ColorKeys =\n  | 'color'\n  | 'backgroundColor'\n  | 'borderColor'\n  | 'borderBottomColor'\n  | 'borderTopColor'\n  | 'borderLeftColor'\n  | 'borderRightColor'\n  | 'shadowColor'\n  | 'textShadowColor'\n\ntype SpaceKeys =\n  | 'space'\n  | 'padding'\n  | 'paddingHorizontal'\n  | 'paddingVertical'\n  | 'paddingLeft'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingEnd'\n  | 'paddingStart'\n  | 'margin'\n  | 'marginHorizontal'\n  | 'marginVertical'\n  | 'marginLeft'\n  | 'marginTop'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'marginRight'\n  | 'marginEnd'\n  | 'marginStart'\n  | 'x'\n  | 'y'\n  | 'scale'\n  | 'scaleX'\n  | 'scaleY'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderTopStartRadius'\n  | 'borderBottomEndRadius'\n  | 'borderBottomLeftRadius'\n  | 'borderBottomRightRadius'\n  | 'borderBottomStartRadius'\n  | 'borderBottomWidth'\n  | 'borderLeftWidth'\n  | 'borderRadius'\n  | 'borderRightWidth'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderEndWidth'\n  | 'borderStartWidth'\n  | 'borderTopStartRadius'\n  | 'borderTopWidth'\n  | 'borderWidth'\n  | 'left'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'shadowOffset'\n\ntype CSSColorNames =\n  | 'aliceblue'\n  | 'antiquewhite'\n  | 'aqua'\n  | 'aquamarine'\n  | 'azure'\n  | 'beige'\n  | 'bisque'\n  | 'black'\n  | 'blanchedalmond'\n  | 'blue'\n  | 'blueviolet'\n  | 'brown'\n  | 'burlywood'\n  | 'cadetblue'\n  | 'chartreuse'\n  | 'chocolate'\n  | 'coral'\n  | 'cornflowerblue'\n  | 'cornsilk'\n  | 'crimson'\n  | 'cyan'\n  | 'darkblue'\n  | 'darkcyan'\n  | 'darkgoldenrod'\n  | 'darkgray'\n  | 'darkgreen'\n  | 'darkkhaki'\n  | 'darkmagenta'\n  | 'darkolivegreen'\n  | 'darkorange'\n  | 'darkorchid'\n  | 'darkred'\n  | 'darksalmon'\n  | 'darkseagreen'\n  | 'darkslateblue'\n  | 'darkslategray'\n  | 'darkturquoise'\n  | 'darkviolet'\n  | 'deeppink'\n  | 'deepskyblue'\n  | 'dimgray'\n  | 'dodgerblue'\n  | 'firebrick'\n  | 'floralwhite'\n  | 'forestgreen'\n  | 'fuchsia'\n  | 'gainsboro'\n  | 'ghostwhite'\n  | 'gold'\n  | 'goldenrod'\n  | 'gray'\n  | 'green'\n  | 'greenyellow'\n  | 'honeydew'\n  | 'hotpink'\n  | 'indianred '\n  | 'indigo  '\n  | 'ivory'\n  | 'khaki'\n  | 'lavender'\n  | 'lavenderblush'\n  | 'lawngreen'\n  | 'lemonchiffon'\n  | 'lightblue'\n  | 'lightcoral'\n  | 'lightcyan'\n  | 'lightgoldenrodyellow'\n  | 'lightgrey'\n  | 'lightgreen'\n  | 'lightpink'\n  | 'lightsalmon'\n  | 'lightseagreen'\n  | 'lightskyblue'\n  | 'lightslategray'\n  | 'lightsteelblue'\n  | 'lightyellow'\n  | 'lime'\n  | 'limegreen'\n  | 'linen'\n  | 'magenta'\n  | 'maroon'\n  | 'mediumaquamarine'\n  | 'mediumblue'\n  | 'mediumorchid'\n  | 'mediumpurple'\n  | 'mediumseagreen'\n  | 'mediumslateblue'\n  | 'mediumspringgreen'\n  | 'mediumturquoise'\n  | 'mediumvioletred'\n  | 'midnightblue'\n  | 'mintcream'\n  | 'mistyrose'\n  | 'moccasin'\n  | 'navajowhite'\n  | 'navy'\n  | 'oldlace'\n  | 'olive'\n  | 'olivedrab'\n  | 'orange'\n  | 'orangered'\n  | 'orchid'\n  | 'palegoldenrod'\n  | 'palegreen'\n  | 'paleturquoise'\n  | 'palevioletred'\n  | 'papayawhip'\n  | 'peachpuff'\n  | 'peru'\n  | 'pink'\n  | 'plum'\n  | 'powderblue'\n  | 'purple'\n  | 'red'\n  | 'rosybrown'\n  | 'royalblue'\n  | 'saddlebrown'\n  | 'salmon'\n  | 'sandybrown'\n  | 'seagreen'\n  | 'seashell'\n  | 'sienna'\n  | 'silver'\n  | 'skyblue'\n  | 'slateblue'\n  | 'slategray'\n  | 'snow'\n  | 'springgreen'\n  | 'steelblue'\n  | 'tan'\n  | 'teal'\n  | 'thistle'\n  | 'tomato'\n  | 'turquoise'\n  | 'violet'\n  | 'wheat'\n  | 'white'\n  | 'whitesmoke'\n  | 'yellow'\n  | 'yellowgreen'\n\nexport type TamaguiComponentState = {\n  hover: boolean\n  press: boolean\n  pressIn: boolean\n  focus: boolean\n  mounted: boolean\n  animation?: null | {\n    style?: any\n    avoidClasses?: boolean\n  }\n}\n\nexport type SplitStyleState = TamaguiComponentState & {\n  noClassNames?: boolean\n  resolveVariablesAs?: ResolveVariableTypes\n  fallbackProps?: Object\n}\n\n// Animations:\n\ntype AnimationConfig = {\n  [key: string]: any\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n  avoidClasses?: boolean\n  useAnimations: UseAnimationHook\n  animations: A\n  View?: any\n  Text?: any\n}\n\nexport type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>\n\nexport type UseAnimationHelpers = {\n  staticConfig: StaticConfigParsed\n  getStyle: (props?: {\n    isEntering?: boolean\n    exitVariant?: string | null\n    enterVariant?: string | null\n  }) => ViewStyle\n  state: SplitStyleState\n  pseudos: PseudoProps<ViewStyle>\n  // style: ViewStyle | null | undefined\n  // isMounted: boolean\n  // exitStyle?: ViewStyle | null\n  onDidAnimate?: any\n  delay?: number\n  // mergedStyles(props?: { isExiting?: boolean }): ViewStyle\n}\n\nexport type UseAnimationHook = (\n  props: UseAnimationProps,\n  helpers: UseAnimationHelpers\n) => {\n  style?: StackStylePropsBase | StackStylePropsBase[]\n  safeToUnmount?: () => void\n}\n"],
+  "sourcesContent": ["// TODO split this into own package @tamagui/types to share with animations packages\n\nimport CSS from 'csstype'\nimport React from 'react'\nimport {\n  GestureResponderEvent,\n  Image,\n  TextProps as ReactTextProps,\n  Text,\n  TextInput,\n  TextStyle,\n  View,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\n\nimport { Variable } from './createVariable'\nimport { ResolveVariableTypes } from './helpers/createPropMapper'\nimport { RNWTextProps, RNWViewProps } from './types-rnw'\nimport { ThemeProviderProps } from './views/ThemeProvider'\n\nexport type ReactComponentWithRef<Props, Ref> = React.ForwardRefExoticComponent<\n  Props & React.RefAttributes<Ref>\n>\n\nexport type ConfigListener = (conf: TamaguiInternalConfig) => void\n\n// to prevent things from going circular, hoisting some types in this file\n// to generally order them as building up towards TamaguiConfig\n\nexport type VariableVal = number | string | Variable\nexport type VariableColorVal = string | Variable\n\ntype GenericKey = string | number | symbol\n\nexport interface CreateTokens<Val extends VariableVal = VariableVal> {\n  color: { [key: GenericKey]: Val }\n  space: { [key: GenericKey]: Val }\n  size: { [key: GenericKey]: Val }\n  radius: { [key: GenericKey]: Val }\n  zIndex: { [key: GenericKey]: Val }\n}\n\nexport type TamaguiBaseTheme = {\n  // defined for our tamagui kit , we could do this inside `tamagui`\n  // but maybe helpful to have some sort of universally shared things +\n  // + enforce if they want their own, redefine in their design sys\n  background: VariableColorVal\n  backgroundHover: VariableColorVal\n  backgroundPress: VariableColorVal\n  backgroundFocus: VariableColorVal\n  color: VariableColorVal\n  colorHover: VariableColorVal\n  colorPress: VariableColorVal\n  colorFocus: VariableColorVal\n  borderColor: VariableColorVal\n  borderColorHover: VariableColorVal\n  borderColorPress: VariableColorVal\n  borderColorFocus: VariableColorVal\n  shadowColor: VariableColorVal\n  shadowColorHover: VariableColorVal\n  shadowColorPress: VariableColorVal\n  shadowColorFocus: VariableColorVal\n}\n\ntype GenericTokens = CreateTokens\ntype GenericThemes = {\n  [key: string]:\n    | Partial<TamaguiBaseTheme> & {\n        [key: string]: VariableVal\n      }\n}\ntype GenericShorthands = {\n  // [key: string]: string\n}\n\ntype GenericMedia<K extends string = string> = {\n  // name => media shorthand name (camelCase) => value\n  [key in K]: {\n    [key: string]: number | string\n  }\n}\n\ntype GenericFonts = {\n  [key: string]: GenericFont\n}\n\ntype GenericAnimations = {\n  [key: string]:\n    | string\n    | {\n        [key: string]: any\n      }\n}\n\n// this is the \"main\" typed object, which users re-define\n// (internal) keep all types directly on this object and reference them from elsewhere\n//\n// const config = createTamagui(...)\n// type MyConfig = typeof config\n// declare module 'tamagui' {\n//   export interface TamaguiCustomConfig extends MyConfig {}\n// }\n// now your whole app/kit should be typed correctly\n//\nexport interface TamaguiCustomConfig {}\n\nexport interface TamaguiConfig\n  extends Omit<GenericTamaguiConfig, keyof TamaguiCustomConfig>,\n    TamaguiCustomConfig {}\n\nexport type CreateTamaguiConfig<\n  A extends GenericTokens,\n  B extends GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = Partial<Pick<ThemeProviderProps, 'defaultTheme' | 'disableRootThemeClass'>> & {\n  fonts: F\n  tokens: A\n  themes: B\n  shorthands: C\n  media: D\n  animations: AnimationDriver<E>\n}\n\n// for use in creation functions so it doesnt get overwrtitten\nexport type GenericTamaguiConfig = CreateTamaguiConfig<\n  GenericTokens,\n  GenericThemes,\n  GenericShorthands,\n  GenericMedia,\n  GenericAnimations,\n  GenericFonts\n>\n\n// since TamaguiConfig will be re-declared, these will all be typed globally\nexport type ThemeObject = TamaguiConfig['themes'][keyof TamaguiConfig['themes']]\nexport type Tokens = TamaguiConfig['tokens']\nexport type Shorthands = TamaguiConfig['shorthands']\nexport type Media = TamaguiConfig['media']\nexport type Themes = TamaguiConfig['themes']\nexport type ThemeName = GetAltThemeNames<keyof Themes>\n// export type ThemeNameWithSubThemes = GetSubThemes<ThemeName>\nexport type ThemeKeys = keyof ThemeObject\nexport type ThemeTokens = `$${ThemeKeys}`\nexport type AnimationKeys = Omit<GetAnimationKeys<TamaguiConfig>, number>\n\ntype GetAltThemeNames<S> = (S extends `${string}_${infer Alt}` ? GetAltThemeNames<Alt> : S) | S\n\n// this is the config generated via createTamagui()\nexport type TamaguiInternalConfig<\n  A extends GenericTokens = GenericTokens,\n  B extends GenericThemes = GenericThemes,\n  C extends GenericShorthands = GenericShorthands,\n  D extends GenericMedia = GenericMedia,\n  E extends GenericAnimations = GenericAnimations,\n  F extends GenericFonts = GenericFonts\n> = CreateTamaguiConfig<A, B, C, D, E, F> & {\n  // TODO need to make it this but this breaks types, revisit\n  // animations: E //AnimationDriver<E>\n  Provider: (props: TamaguiProviderProps) => any\n  // with $ prefixes for fast lookups (one time cost at startup vs every render)\n  tokensParsed: CreateTokens<Variable>\n  themeConfig: any\n  fontsParsed: GenericFonts\n  getCSS: () => string\n  parsed: boolean\n}\n\nexport type GetAnimationKeys<A extends GenericTamaguiConfig> = keyof A['animations']['animations']\n\n// prevents const intersections from being clobbered into string, keeping the consts\nexport type UnionableString = string & {}\nexport type UnionableNumber = number & {}\nexport type PropTypes<A extends TamaguiComponent> = A extends React.FunctionComponent<infer Props>\n  ? Props\n  : unknown\n\nexport type GenericFont<Key extends number | string = number | string> = {\n  size: { [key in Key]: number | Variable }\n  lineHeight: Partial<{ [key in Key]: number | Variable }>\n  letterSpacing: Partial<{ [key in Key]: number | Variable }>\n  weight: Partial<{ [key in Key]: number | string | Variable }>\n  family: string | Variable\n  style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>\n  transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>\n  color?: Partial<{ [key in Key]: string | Variable }>\n}\n\n// media\nexport type MediaKeys = keyof Media\nexport type MediaQueryObject = { [key: string]: string | number | string }\nexport type MediaQueryKey = keyof Media\nexport type MediaPropKeys = `$${MediaQueryKey}`\nexport type MediaQueryState = { [key in MediaPropKeys]: boolean }\nexport type MediaProps<A> = {\n  [key in MediaPropKeys]?: A\n}\nexport type MediaQueries = {\n  [key in MediaQueryKey]: MediaQueryObject\n}\nexport type ConfigureMediaQueryOptions = {\n  queries?: MediaQueries\n  defaultActive?: MediaQueryKey[]\n}\n\nexport type TransformStyleProps = {\n  x?: number\n  y?: number\n  perspective?: number\n  scale?: number\n  scaleX?: number\n  scaleY?: number\n  skewX?: string\n  skewY?: string\n  matrix?: number[]\n  rotate?: string\n  rotateY?: string\n  rotateX?: string\n  rotateZ?: string\n}\n\n// createComponent props helpers\n\n// animation=\"bouncy\"\n// animation={['bouncy', {  }]}\n// { all: 'name' }\n\n// TODO can override for better types\nexport type AnimationConfigType = any\n\nexport type AnimationProp =\n  | AnimationKeys\n  | {\n      [key: string]:\n        | AnimationKeys\n        | {\n            type: AnimationKeys\n            [key: string]: any\n          }\n    }\n  | [\n      AnimationKeys,\n      {\n        [key: string]:\n          | AnimationKeys\n          | {\n              type?: AnimationKeys\n              [key: string]: any\n            }\n      }\n    ]\n\nexport type SpaceDirection = ViewStyle['flexDirection'] | 'both'\n\n//\n// base props that are accepted by createComponent (additional to react-native-web)\n//\nexport type TamaguiComponentPropsBase = {\n  asChild?: boolean\n  space?: SpaceTokens\n  spaceDirection?: SpaceDirection\n  dangerouslySetInnerHTML?: { __html: string }\n  animation?: AnimationProp\n  animateOnly?: string[]\n  children?: any | any[]\n  debug?: boolean | 'break' | 'verbose'\n  disabled?: boolean\n  className?: string\n  id?: string\n  tag?: string\n  theme?: ThemeName | null\n  onHoverIn?: (e: MouseEvent) => any\n  onHoverOut?: (e: MouseEvent) => any\n  onPress?: (e: GestureResponderEvent) => any\n  onPressIn?: (e: GestureResponderEvent) => any\n  onPressOut?: (e: GestureResponderEvent) => any\n  // WEB ONLY\n  onMouseEnter?: (e: MouseEvent) => any\n  onMouseLeave?: (e: MouseEvent) => any\n  onMouseDown?: (e: MouseEvent) => any\n}\n\ntype GetTokenFontKeysFor<\n  A extends\n    | 'size'\n    | 'weight'\n    | 'letterSpacing'\n    | 'family'\n    | 'lineHeight'\n    | 'transform'\n    | 'style'\n    | 'color'\n> = keyof TamaguiConfig['fonts']['body'][A]\n\ntype GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`\n\n// base tokens\nexport type SizeTokens = GetTokenString<keyof Tokens['size']> | number\nexport type SpaceTokens = GetTokenString<keyof Tokens['space']> | number | boolean\nexport type ColorTokens =\n  | GetTokenString<keyof Tokens['color']>\n  | GetTokenString<keyof ThemeObject>\n  | CSSColorNames\nexport type ZIndexTokens = GetTokenString<keyof Tokens['zIndex']> | number\nexport type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number\n\n// font tokens\nexport type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>\nexport type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number\nexport type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number\nexport type FontWeightTokens =\n  | `$${GetTokenFontKeysFor<'weight'>}`\n  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`\nexport type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number\nexport type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number\nexport type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']\nexport type FontTransformTokens =\n  | `$${GetTokenFontKeysFor<'transform'>}`\n  | TextStyle['textTransform']\n\n//\n// adds theme short values to relevant props\n//\n\nexport type ThemeValueByCategory<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends 'size'\n  ? SizeTokens\n  : K extends 'font'\n  ? FontTokens\n  : K extends 'fontSize'\n  ? FontSizeTokens\n  : K extends 'space'\n  ? SpaceTokens\n  : K extends 'color'\n  ? ColorTokens\n  : K extends 'zIndex'\n  ? ZIndexTokens\n  : K extends 'lineHeight'\n  ? FontLineHeightTokens\n  : K extends 'fontWeight'\n  ? FontWeightTokens\n  : K extends 'letterSpacing'\n  ? FontLetterSpacingTokens\n  : {}\n\ntype FontKeys = 'fontFamily'\ntype FontSizeKeys = 'fontSize'\ntype FontWeightKeys = 'fontWeight'\ntype FontLetterSpacingKeys = 'letterSpacing'\ntype LineHeightKeys = 'lineHeight'\ntype ZIndexKeys = 'zIndex'\n\nexport type ThemeValueGet<K extends string | number | symbol> = K extends 'theme'\n  ? ThemeTokens\n  : K extends SizeKeys\n  ? SizeTokens\n  : K extends FontKeys\n  ? FontTokens\n  : K extends FontSizeKeys\n  ? FontSizeTokens\n  : K extends SpaceKeys\n  ? K extends 'shadowOffset'\n    ? { width: SpaceTokens; height: SpaceTokens }\n    : SpaceTokens\n  : K extends ColorKeys\n  ? ColorTokens\n  : K extends ZIndexKeys\n  ? ZIndexTokens\n  : K extends LineHeightKeys\n  ? FontLineHeightTokens\n  : K extends FontWeightKeys\n  ? FontWeightTokens\n  : K extends FontLetterSpacingKeys\n  ? FontLetterSpacingTokens\n  : never\n\nexport type ThemeValueFallback = UnionableString | Variable\n\nexport type WithThemeValues<T extends object> = {\n  [K in keyof T]: ThemeValueGet<K> extends never\n    ? T[K]\n    : ThemeValueGet<K> | Exclude<T[K], string> | ThemeValueFallback\n}\n\n// adds shorthand props\nexport type WithShorthands<StyleProps> = {\n  [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps\n    ? StyleProps[Shorthands[Key]] | null\n    : undefined\n}\n\n// adds pseudo props\nexport type PseudoProps<A> = {\n  hoverStyle?: A | null\n  pressStyle?: A | null\n  focusStyle?: A | null\n  exitStyle?: A | null\n  enterStyle?: A | null\n}\n\nexport type PsuedoPropKeys = keyof PseudoProps<any>\n\nexport type PseudoStyles = {\n  hoverStyle?: ViewStyle\n  pressStyle?: ViewStyle\n  focusStyle?: ViewStyle\n  enterStyle?: ViewStyle\n  exitStyle?: ViewStyle\n}\n\n//\n// add both theme and shorthands\n//\ntype WithThemeAndShorthands<A extends object> = WithThemeValues<A> &\n  WithShorthands<WithThemeValues<A>>\n\n//\n// combines all of theme, shorthands, psuedos...\n//\ntype WithThemeShorthandsAndPseudos<A extends object> =\n  | WithThemeAndShorthands<A> & PseudoProps<WithThemeAndShorthands<A>>\n\n//\n// ... media queries and animations\n//\ntype WithThemeShorthandsPseudosMediaAnimation<A extends object> = WithThemeShorthandsAndPseudos<A> &\n  MediaProps<WithThemeShorthandsAndPseudos<A>>\n\n//\n// Stack\n//\n\ntype WebOnlyStyleProps = {\n  // WEB ONLY\n  cursor?: string\n  // WEB ONLY\n  contain?: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'paint' | string\n  // WEB ONLY values: inherit, inline, block, content\n  display?: 'inherit' | 'none' | 'inline' | 'block' | 'contents' | 'flex' | 'inline-flex'\n  // WEB ONLY pointerEvents can be a style prop\n  pointerEvents?: ViewProps['pointerEvents']\n}\n\nexport type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &\n  TransformStyleProps &\n  WebOnlyStyleProps\n\nexport type StackPropsBaseShared = Omit<ViewProps, 'display' | 'children'> &\n  RNWViewProps &\n  TamaguiComponentPropsBase\nexport type StackStyleProps = WithThemeShorthandsPseudosMediaAnimation<StackStylePropsBase>\nexport type StackPropsBase = StackPropsBaseShared & WithThemeAndShorthands<StackStylePropsBase>\nexport type StackProps = StackPropsBaseShared & StackStyleProps\n\nexport type GestureReponderEvent = Exclude<View['props']['onResponderMove'], void> extends (\n  event: infer Event\n) => void\n  ? Event\n  : never\n\n//\n// Text props\n//\n\nexport type TextStylePropsBase = Omit<TextStyle, 'display' | 'backfaceVisibility'> &\n  TransformStyleProps &\n  WebOnlyStyleProps & {\n    ellipse?: boolean\n    selectable?: boolean\n    textDecorationDistance?: number\n    userSelect?: CSS.Properties['userSelect']\n    textOverflow?: CSS.Properties['textOverflow']\n    whiteSpace?: CSS.Properties['whiteSpace']\n    wordWrap?: CSS.Properties['wordWrap']\n    cursor?: CSS.Properties['cursor']\n  }\n\nexport type TextPropsBaseShared = Omit<ReactTextProps, 'children'> &\n  RNWTextProps &\n  TamaguiComponentPropsBase\nexport type TextPropsBase = TextPropsBaseShared & WithThemeAndShorthands<TextStylePropsBase>\nexport type TextStyleProps = WithThemeShorthandsPseudosMediaAnimation<TextStylePropsBase>\nexport type TextProps = TextPropsBaseShared & TextStyleProps\n\n// could actually infer from parent\nexport type ViewOrTextProps = WithThemeShorthandsPseudosMediaAnimation<\n  Omit<TextStylePropsBase, keyof StackStylePropsBase> & StackStylePropsBase\n>\n\n//\n// StaticComponent\n//\n\nexport type TamaguiComponent<\n  Props = any,\n  Ref = any,\n  BaseProps = {},\n  VariantProps = {}\n> = ReactComponentWithRef<Props, Ref> & StaticComponentObject\n\ntype StaticComponentObject = {\n  staticConfig: StaticConfig\n  /*\n   * Only needed for more complex components\n   * If you create a styled frame component this is a HoC to extract\n   * styles from all parents.\n   */\n  extractable: <X>(a: X, opts?: Partial<StaticConfig>) => X\n}\n\nexport type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {\n  injectCSS?: boolean\n  children?: React.ReactNode\n}\n\nexport type StaticConfigParsed = StaticConfig & {\n  parsed: true\n  propMapper: (\n    key: string,\n    value: any,\n    theme: ThemeObject,\n    props: any,\n    resolveVariablesAs?: ResolveVariableTypes,\n    avoidDefaultProps?: boolean\n  ) => undefined | boolean | { [key: string]: any }\n  variantsParsed?: {\n    [key: string]: {\n      [key: string]: any\n    }\n  }\n}\n\nexport type StaticConfig = {\n  Component?: React.FunctionComponent<any> & StaticComponentObject\n\n  variants?: {\n    [key: string]: {\n      [key: string]:\n        | ((a: any, b: any) => any)\n        | {\n            [key: string]: any\n          }\n    }\n  }\n\n  /**\n   * Used for applying sub theme style\n   */\n  componentName?: string\n\n  /**\n   * If you need to pass context or something, prevents from ever\n   * flattening. The 'jsx' option means it will never flatten. if you\n   * pass JSX as a children (if its purely string, it will still flatten).\n   */\n  neverFlatten?: boolean | 'jsx'\n\n  /**\n   * Determines ultimate output tag (Text vs View)\n   */\n  isText?: boolean\n\n  /**\n   * Attempts to attach focus styles at runtime (useful for native)\n   */\n  isInput?: boolean\n\n  /**\n   * React native web images need special handling for className support\n   */\n  isImage?: boolean\n\n  /**\n   * Which style keys are allowed to be extracted.\n   */\n  validStyles?: { [key: string]: boolean }\n\n  /**\n   * Same as React.defaultProps, be sure to sync\n   */\n  defaultProps?: any\n\n  /**\n   * If these props are encountered, bail on all optimization.\n   */\n  deoptProps?: Set<string>\n\n  /**\n   * If these props are encountered, leave them un-extracted.\n   */\n  inlineProps?: Set<string>\n\n  /**\n   * A bit odd, only for more advanced heirarchies.\n   * Indicates that the component will set this prop so the\n   * static extraction can ensure it sets them to ={undefined}\n   * so they get overriddent. In the future, this can be smarter.\n   */\n  ensureOverriddenProp?: { [key: string]: boolean }\n\n  /**\n   * Auto-detected, but can ovverride. Wraps children to space them on top\n   */\n  isZStack?: boolean\n\n  /**\n   * Merges into defaultProps later on, used internally yonly\n   */\n  defaultVariants?: { [key: string]: any }\n\n  /**\n   * Auto-detect, but can ovverride, passes styles properly to react-native-web\n   */\n  isReactNativeWeb?: boolean\n\n  /**\n   * Used internally to keep reference to the original rnw component\n   */\n  reactNativeWebComponent?: any\n\n  /**\n   * Memoize the component\n   */\n  memo?: boolean\n\n  /**\n   * Auto-detect, but can ovverride, passes styles properly to react-native-web\n   */\n  isTamagui?: boolean\n}\n\n/**\n * --------------------------------------------\n *   variants\n * --------------------------------------------\n */\n\nexport type StylableComponent =\n  | TamaguiComponent\n  | React.Component\n  | React.ForwardRefExoticComponent<any>\n  | (new (props: any) => any)\n  | typeof View\n  | typeof Text\n  | typeof TextInput\n  | typeof Image\n\nexport type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<\n  any,\n  any,\n  infer BaseProps\n>\n  ? BaseProps\n  : never\n\nexport type GetProps<A extends StylableComponent> = A extends TamaguiComponent<infer Props>\n  ? Props\n  : A extends React.Component<infer Props>\n  ? GetGenericComponentTamaguiProps<Props>\n  : A extends new (props: infer Props) => any\n  ? GetGenericComponentTamaguiProps<Props>\n  : {}\n\ntype GetGenericComponentTamaguiProps<P> = P &\n  Omit<'textAlign' extends keyof P ? TextProps : StackProps, keyof P>\n\nexport type SpreadKeys =\n  | '...fontSize'\n  | '...fontStyle'\n  | '...fontTransform'\n  | '...lineHeight'\n  | '...letterSpacing'\n  | '...size'\n  | '...color'\n  | '...zIndex'\n  | '...theme'\n  | '...radius'\n\nexport type VariantDefinitions<\n  Parent extends StylableComponent = TamaguiComponent,\n  MyProps extends Object = GetProps<Parent>,\n  Val = any\n> = VariantDefinitionFromProps<MyProps, Val>\n\nexport type VariantDefinitionFromProps<MyProps, Val> = MyProps extends Object\n  ? {\n      [propName: string]:\n        | VariantSpreadFunction<MyProps, Val>\n        | ({\n            [Key in SpreadKeys]?: Key extends '...fontSize'\n              ? FontSizeVariantSpreadFunction<MyProps>\n              : Key extends '...size'\n              ? SizeVariantSpreadFunction<MyProps>\n              : Key extends '...color'\n              ? ColorVariantSpreadFunction<MyProps>\n              : Key extends '...lineHeight'\n              ? FontLineHeightVariantSpreadFunction<MyProps>\n              : Key extends '...fontTransform'\n              ? FontTransformVariantSpreadFunction<MyProps>\n              : Key extends '...fontStyle'\n              ? FontStyleVariantSpreadFunction<MyProps>\n              : Key extends '...letterSpacing'\n              ? FontLetterSpacingVariantSpreadFunction<MyProps>\n              : Key extends '...zIndex'\n              ? ZIndexVariantSpreadFunction<MyProps>\n              : Key extends '...radius'\n              ? RadiusVariantSpreadFunction<MyProps>\n              : Key extends '...theme'\n              ? ThemeVariantSpreadFunction<MyProps>\n              : never\n          } & {\n            [Key in string | number]?: MyProps | VariantSpreadFunction<MyProps, Val>\n          } & {\n            [Key in VariantTypeKeys]?: Key extends ':number'\n              ? VariantSpreadFunction<MyProps, number>\n              : Key extends ':boolean'\n              ? VariantSpreadFunction<MyProps, boolean>\n              : Key extends ':string'\n              ? VariantSpreadFunction<MyProps, string>\n              : never\n          })\n    }\n  : never\n\nexport type GenericStackVariants = VariantDefinitionFromProps<StackProps, any>\nexport type GenericTextVariants = VariantDefinitionFromProps<StackProps, any>\n\nexport type GetVariantProps<Variants> = {\n  [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n    ? Val\n    : GetVariantValues<keyof Variants[Key]>\n}\n\nexport type VariantSpreadExtras<Props> = {\n  fonts: TamaguiConfig['fonts']\n  tokens: TamaguiConfig['tokens']\n  theme: Themes extends { [key: string]: infer B } ? B : unknown\n  props: Props\n}\n\ntype PropLike = { [key: string]: any }\n\nexport type VariantSpreadFunction<Props extends PropLike, Val = any> = (\n  val: Val,\n  config: VariantSpreadExtras<Props>\n) =>\n  | {\n      [Key in keyof Props]: Props[Key] | Variable\n    }\n  | null\n  | undefined\n\nexport type VariantTypeKeys = ':string' | ':boolean' | ':number'\n\nexport type GetVariantValues<Key> = Key extends `...${infer VariantSpread}`\n  ? ThemeValueByCategory<VariantSpread>\n  : Key extends 'true' | 'false'\n  ? boolean\n  : Key extends ':string'\n  ? string\n  : Key extends ':boolean'\n  ? boolean\n  : Key extends ':number'\n  ? number\n  : Key\n\nexport type FontSizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontSizeTokens\n>\nexport type SizeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, SizeTokens>\nexport type ColorVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ColorTokens>\nexport type FontLineHeightVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontLineHeightTokens\n>\nexport type FontLetterSpacingVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontLetterSpacingTokens\n>\nexport type FontStyleVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontStyleTokens\n>\nexport type FontTransformVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<\n  A,\n  FontTransformTokens\n>\nexport type ZIndexVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ZIndexTokens>\nexport type RadiusVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, RadiusTokens>\nexport type ThemeVariantSpreadFunction<A extends PropLike> = VariantSpreadFunction<A, ThemeTokens>\n\n/**\n * --------------------------------------------\n *   end variants\n * --------------------------------------------\n */\n\ntype SizeKeys =\n  | 'width'\n  | 'height'\n  | 'minWidth'\n  | 'minHeight'\n  | 'maxWidth'\n  | 'maxHeight'\n  | 'shadowRadius'\n\ntype ColorKeys =\n  | 'color'\n  | 'backgroundColor'\n  | 'borderColor'\n  | 'borderBottomColor'\n  | 'borderTopColor'\n  | 'borderLeftColor'\n  | 'borderRightColor'\n  | 'shadowColor'\n  | 'textShadowColor'\n\ntype SpaceKeys =\n  | 'space'\n  | 'padding'\n  | 'paddingHorizontal'\n  | 'paddingVertical'\n  | 'paddingLeft'\n  | 'paddingTop'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingRight'\n  | 'paddingEnd'\n  | 'paddingStart'\n  | 'margin'\n  | 'marginHorizontal'\n  | 'marginVertical'\n  | 'marginLeft'\n  | 'marginTop'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'marginRight'\n  | 'marginEnd'\n  | 'marginStart'\n  | 'x'\n  | 'y'\n  | 'scale'\n  | 'scaleX'\n  | 'scaleY'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderTopStartRadius'\n  | 'borderBottomEndRadius'\n  | 'borderBottomLeftRadius'\n  | 'borderBottomRightRadius'\n  | 'borderBottomStartRadius'\n  | 'borderBottomWidth'\n  | 'borderLeftWidth'\n  | 'borderRadius'\n  | 'borderRightWidth'\n  | 'borderTopEndRadius'\n  | 'borderTopLeftRadius'\n  | 'borderTopRightRadius'\n  | 'borderEndWidth'\n  | 'borderStartWidth'\n  | 'borderTopStartRadius'\n  | 'borderTopWidth'\n  | 'borderWidth'\n  | 'left'\n  | 'top'\n  | 'right'\n  | 'bottom'\n  | 'shadowOffset'\n\ntype CSSColorNames =\n  | 'aliceblue'\n  | 'antiquewhite'\n  | 'aqua'\n  | 'aquamarine'\n  | 'azure'\n  | 'beige'\n  | 'bisque'\n  | 'black'\n  | 'blanchedalmond'\n  | 'blue'\n  | 'blueviolet'\n  | 'brown'\n  | 'burlywood'\n  | 'cadetblue'\n  | 'chartreuse'\n  | 'chocolate'\n  | 'coral'\n  | 'cornflowerblue'\n  | 'cornsilk'\n  | 'crimson'\n  | 'cyan'\n  | 'darkblue'\n  | 'darkcyan'\n  | 'darkgoldenrod'\n  | 'darkgray'\n  | 'darkgreen'\n  | 'darkkhaki'\n  | 'darkmagenta'\n  | 'darkolivegreen'\n  | 'darkorange'\n  | 'darkorchid'\n  | 'darkred'\n  | 'darksalmon'\n  | 'darkseagreen'\n  | 'darkslateblue'\n  | 'darkslategray'\n  | 'darkturquoise'\n  | 'darkviolet'\n  | 'deeppink'\n  | 'deepskyblue'\n  | 'dimgray'\n  | 'dodgerblue'\n  | 'firebrick'\n  | 'floralwhite'\n  | 'forestgreen'\n  | 'fuchsia'\n  | 'gainsboro'\n  | 'ghostwhite'\n  | 'gold'\n  | 'goldenrod'\n  | 'gray'\n  | 'green'\n  | 'greenyellow'\n  | 'honeydew'\n  | 'hotpink'\n  | 'indianred '\n  | 'indigo  '\n  | 'ivory'\n  | 'khaki'\n  | 'lavender'\n  | 'lavenderblush'\n  | 'lawngreen'\n  | 'lemonchiffon'\n  | 'lightblue'\n  | 'lightcoral'\n  | 'lightcyan'\n  | 'lightgoldenrodyellow'\n  | 'lightgrey'\n  | 'lightgreen'\n  | 'lightpink'\n  | 'lightsalmon'\n  | 'lightseagreen'\n  | 'lightskyblue'\n  | 'lightslategray'\n  | 'lightsteelblue'\n  | 'lightyellow'\n  | 'lime'\n  | 'limegreen'\n  | 'linen'\n  | 'magenta'\n  | 'maroon'\n  | 'mediumaquamarine'\n  | 'mediumblue'\n  | 'mediumorchid'\n  | 'mediumpurple'\n  | 'mediumseagreen'\n  | 'mediumslateblue'\n  | 'mediumspringgreen'\n  | 'mediumturquoise'\n  | 'mediumvioletred'\n  | 'midnightblue'\n  | 'mintcream'\n  | 'mistyrose'\n  | 'moccasin'\n  | 'navajowhite'\n  | 'navy'\n  | 'oldlace'\n  | 'olive'\n  | 'olivedrab'\n  | 'orange'\n  | 'orangered'\n  | 'orchid'\n  | 'palegoldenrod'\n  | 'palegreen'\n  | 'paleturquoise'\n  | 'palevioletred'\n  | 'papayawhip'\n  | 'peachpuff'\n  | 'peru'\n  | 'pink'\n  | 'plum'\n  | 'powderblue'\n  | 'purple'\n  | 'red'\n  | 'rosybrown'\n  | 'royalblue'\n  | 'saddlebrown'\n  | 'salmon'\n  | 'sandybrown'\n  | 'seagreen'\n  | 'seashell'\n  | 'sienna'\n  | 'silver'\n  | 'skyblue'\n  | 'slateblue'\n  | 'slategray'\n  | 'snow'\n  | 'springgreen'\n  | 'steelblue'\n  | 'tan'\n  | 'teal'\n  | 'thistle'\n  | 'tomato'\n  | 'turquoise'\n  | 'violet'\n  | 'wheat'\n  | 'white'\n  | 'whitesmoke'\n  | 'yellow'\n  | 'yellowgreen'\n\nexport type TamaguiComponentState = {\n  hover: boolean\n  press: boolean\n  pressIn: boolean\n  focus: boolean\n  mounted: boolean\n  animation?: null | {\n    style?: any\n    avoidClasses?: boolean\n  }\n}\n\nexport type SplitStyleState = TamaguiComponentState & {\n  noClassNames?: boolean\n  resolveVariablesAs?: ResolveVariableTypes\n  fallbackProps?: Object\n}\n\n// Animations:\n\ntype AnimationConfig = {\n  [key: string]: any\n}\n\nexport type AnimationDriver<A extends AnimationConfig = AnimationConfig> = {\n  avoidClasses?: boolean\n  useAnimations: UseAnimationHook\n  animations: A\n  View?: any\n  Text?: any\n}\n\nexport type UseAnimationProps = TamaguiComponentPropsBase & Record<string, any>\n\nexport type UseAnimationHelpers = {\n  staticConfig: StaticConfigParsed\n  getStyle: (props?: {\n    isEntering?: boolean\n    exitVariant?: string | null\n    enterVariant?: string | null\n  }) => ViewStyle\n  state: SplitStyleState\n  pseudos: PseudoProps<ViewStyle>\n  // style: ViewStyle | null | undefined\n  // isMounted: boolean\n  // exitStyle?: ViewStyle | null\n  onDidAnimate?: any\n  delay?: number\n  // mergedStyles(props?: { isExiting?: boolean }): ViewStyle\n}\n\nexport type UseAnimationHook = (\n  props: UseAnimationProps,\n  helpers: UseAnimationHelpers\n) => {\n  style?: StackStylePropsBase | StackStylePropsBase[]\n  safeToUnmount?: () => void\n}\n"],
   "mappings": ";;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/ThemeManager.js

@@ -91,7 +91,8 @@ class ThemeManager {
         ];
         for (const name2 of names) {
           if (name2 in themes) {
-            return { name: name2, theme: themes[name2], className: __privateMethod(this, _getClassName, getClassName_fn).call(this, name2) };
+            const className = __privateMethod(this, _getClassName, getClassName_fn).call(this, name2);
+            return { name: name2, theme: themes[name2], className };
           }
         }
       }
@@ -178,7 +179,7 @@ getClassName_fn = /* @__PURE__ */ __name(function(name) {
 }, "#getClassName");
 const ThemeManagerContext = createContext(null);
 const emptyManager = new ThemeManager();
-const withoutComponentName = /* @__PURE__ */ __name((name) => name.replace(/\_[A-Z][a-z]+$/, ""), "withoutComponentName");
+const withoutComponentName = /* @__PURE__ */ __name((name) => name.replace(/(\_[A-Z][a-zA-Z]+)+$/g, ""), "withoutComponentName");
 export {
   ThemeManager,
   ThemeManagerContext,

package/dist/esm/ThemeManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeManager.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from './conf'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from './constants/constants'\nimport { ThemeObject, Themes } from './types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n  className?: string\n  parentManager?: ThemeManager | null\n  name?: string | null\n  theme?: any\n}\n\nexport class ThemeManager {\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  className: string | null = null\n\n  constructor(\n    public name: string = '',\n    public theme: ThemeObject | null = null,\n    public parentManager: ThemeManager | null = null\n  ) {\n    // find the nearest different parentManager\n    let parent = parentManager\n    let tries = 0\n    while (true) {\n      tries++\n      if (tries > 10) {\n        throw new Error(`Nested 10 of the same theme in a row, likely error`)\n      }\n      if (!parent) break\n      if (parent.name === name) {\n        // go up if same\n        parent = parent.parentManager\n      } else {\n        this.parentManager = parent\n        break\n      }\n    }\n  }\n\n  get parentName() {\n    return this.parentManager?.name || null\n  }\n\n  get fullName(): string {\n    return this.getNextTheme().name || this.name || ''\n    // const parentName = this.parentManager?.fullName || ''\n    // const name = this.name || ''\n    // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n    // return parts.join('_')\n  }\n\n  // gets value going up to parents\n  getValue(key: string) {\n    let theme = this.theme\n    let manager = this as ThemeManager | null\n    while (true) {\n      if (!theme) return\n      if (key in theme) {\n        return theme[key]\n      }\n      manager = this.parentManager\n      if (!manager) {\n        return\n      }\n      if (manager.theme === theme) {\n        return\n      }\n      theme = manager.theme\n    }\n  }\n\n  update({ name, theme, className }: SetActiveThemeProps = {}) {\n    // className compare on web, avoids light/dark re-renders\n    const sameNameOrClassName = this.className\n      ? // == instead of === (sometimes its undefined/null)\n        className == this.className\n      : name === this.name\n    if (sameNameOrClassName) {\n      return false\n    }\n    this.className = className || null\n    this.name = name || ''\n    this.theme = theme\n    this.notifyListeners()\n    return true\n  }\n\n  getNextTheme(\n    opts: { themes?: Themes; name?: string | null; componentName?: string | null } = {},\n    props?: any\n  ) {\n    const { themes = getThemes(), name, componentName } = opts\n\n    if (!name) {\n      if (componentName) {\n        // allow for _Card_Button or just _Button\n        const names = [\n          `${this.name}_${componentName}`,\n          `${withoutComponentName(this.name)}_${componentName}`,\n        ]\n        for (const name of names) {\n          if (name in themes) {\n            return { name, theme: themes[name], className: this.#getClassName(name) }\n          }\n        }\n      }\n      return {\n        name: this.name,\n        theme: this.theme,\n      }\n    }\n\n    let nextName = name || this.name || ''\n    let parentName = this.fullName\n\n    while (true) {\n      if (nextName in themes) {\n        break\n      }\n      nextName = `${parentName}_${name}`\n      if (nextName in themes) {\n        break\n      }\n      if (!parentName.includes(THEME_NAME_SEPARATOR)) {\n        // not found!\n        console.warn('theme not found', name)\n        break\n      }\n      // go up one\n      parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n    }\n\n    if (componentName) {\n      // allow for _Card_Button or just _Button\n      const names = [\n        `${nextName}_${componentName}`,\n        `${withoutComponentName(nextName)}_${componentName}`,\n      ]\n      for (const name of names) {\n        if (name in themes) {\n          nextName = name\n        }\n      }\n    }\n\n    let theme = themes[nextName]\n    if (!theme) {\n      theme = themes[`light_${nextName}`]\n    }\n\n    if (process.env.NODE_ENV === 'development' && props && props['debug']) {\n      console.log('getNextTheme', { name: opts.name, nextName, parentName })\n    }\n\n    return {\n      name: nextName,\n      theme,\n      className: this.#getClassName(nextName),\n    }\n  }\n\n  #getClassName(name: string) {\n    return `${THEME_CLASSNAME_PREFIX}${name} tui_theme`.replace('light_', '').replace('dark_', '')\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  notifyListeners() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n\nconst withoutComponentName = (name: string) => name.replace(/\\_[A-Z][a-z]+$/, '')\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from './conf'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from './constants/constants'\nimport { ThemeObject, Themes } from './types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n  className?: string\n  parentManager?: ThemeManager | null\n  name?: string | null\n  theme?: any\n}\n\nexport class ThemeManager {\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  className: string | null = null\n\n  constructor(\n    public name: string = '',\n    public theme: ThemeObject | null = null,\n    public parentManager: ThemeManager | null = null\n  ) {\n    // find the nearest different parentManager\n    let parent = parentManager\n    let tries = 0\n    while (true) {\n      tries++\n      if (tries > 10) {\n        throw new Error(`Nested 10 of the same theme in a row, likely error`)\n      }\n      if (!parent) break\n      if (parent.name === name) {\n        // go up if same\n        parent = parent.parentManager\n      } else {\n        this.parentManager = parent\n        break\n      }\n    }\n  }\n\n  get parentName() {\n    return this.parentManager?.name || null\n  }\n\n  get fullName(): string {\n    return this.getNextTheme().name || this.name || ''\n    // const parentName = this.parentManager?.fullName || ''\n    // const name = this.name || ''\n    // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n    // return parts.join('_')\n  }\n\n  // gets value going up to parents\n  getValue(key: string) {\n    let theme = this.theme\n    let manager = this as ThemeManager | null\n    while (true) {\n      if (!theme) return\n      if (key in theme) {\n        return theme[key]\n      }\n      manager = this.parentManager\n      if (!manager) {\n        return\n      }\n      if (manager.theme === theme) {\n        return\n      }\n      theme = manager.theme\n    }\n  }\n\n  update({ name, theme, className }: SetActiveThemeProps = {}) {\n    // className compare on web, avoids light/dark re-renders\n    const sameNameOrClassName = this.className\n      ? // == instead of === (sometimes its undefined/null)\n        className == this.className\n      : name === this.name\n    if (sameNameOrClassName) {\n      return false\n    }\n    this.className = className || null\n    this.name = name || ''\n    this.theme = theme\n    this.notifyListeners()\n    return true\n  }\n\n  getNextTheme(\n    opts: { themes?: Themes; name?: string | null; componentName?: string | null } = {},\n    props?: any\n  ) {\n    const { themes = getThemes(), name, componentName } = opts\n\n    if (!name) {\n      if (componentName) {\n        // allow for _Card_Button or just _Button\n        const names = [\n          `${this.name}_${componentName}`,\n          `${withoutComponentName(this.name)}_${componentName}`,\n        ]\n        for (const name of names) {\n          if (name in themes) {\n            const className = this.#getClassName(name)\n            return { name, theme: themes[name], className }\n          }\n        }\n      }\n      return {\n        name: this.name,\n        theme: this.theme,\n      }\n    }\n\n    let nextName = name || this.name || ''\n    let parentName = this.fullName\n\n    while (true) {\n      if (nextName in themes) {\n        break\n      }\n      nextName = `${parentName}_${name}`\n      if (nextName in themes) {\n        break\n      }\n      if (!parentName.includes(THEME_NAME_SEPARATOR)) {\n        // not found!\n        console.warn('theme not found', name)\n        break\n      }\n      // go up one\n      parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n    }\n\n    if (componentName) {\n      // allow for _Card_Button or just _Button\n      const names = [\n        `${nextName}_${componentName}`,\n        `${withoutComponentName(nextName)}_${componentName}`,\n      ]\n      for (const name of names) {\n        if (name in themes) {\n          nextName = name\n        }\n      }\n    }\n\n    let theme = themes[nextName]\n    if (!theme) {\n      theme = themes[`light_${nextName}`]\n    }\n\n    if (process.env.NODE_ENV === 'development' && props && props['debug']) {\n      console.log('getNextTheme', { name: opts.name, nextName, parentName })\n    }\n\n    return {\n      name: nextName,\n      theme,\n      className: this.#getClassName(nextName),\n    }\n  }\n\n  #getClassName(name: string) {\n    return `${THEME_CLASSNAME_PREFIX}${name} tui_theme`.replace('light_', '').replace('dark_', '')\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  notifyListeners() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n\nconst withoutComponentName = (name: string) => name.replace(/(\\_[A-Z][a-zA-Z]+)+$/g, '')\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/createComponent.js

@@ -114,6 +114,7 @@ function createComponent(configIn, ParentComponent) {
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
+    const hostRef = useRef(null);
     const features = useFeatures(props, {
       forceUpdate,
       setStateShallow,
@@ -123,6 +124,7 @@ function createComponent(configIn, ParentComponent) {
       pseudos,
       staticConfig,
       theme,
+      hostRef,
       onDidAnimate: props.onDidAnimate
     });
     const {
@@ -178,7 +180,6 @@ function createComponent(configIn, ParentComponent) {
       });
     }
     const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
-    const hostRef = useRef(null);
     const internal = useRef();
     if (!internal.current) {
       internal.current = {
@@ -213,6 +214,7 @@ function createComponent(configIn, ParentComponent) {
         viewProps.accessibilityRole = accessibilityRole;
     }
     if (isWeb && !asChild) {
+      rnw.useElementLayout(hostRef, onLayout);
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
@@ -559,7 +561,7 @@ const Spacer = createComponent({
       "...size": (size, { tokens }) => {
         var _a;
         size = size == true ? "$true" : size;
-        const sizePx = (_a = tokens.size[size]) != null ? _a : size;
+        const sizePx = (_a = tokens.space[size]) != null ? _a : size;
         return {
           width: sizePx,
           height: sizePx,