@tamagui/core 1.0.0-beta.179 → 1.0.0-beta.181

package/dist/esm/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 { ComponentState } from '../defaultComponentState'\nimport { PseudoStyles } from '../static'\nimport { UseAnimationHook } 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: ComponentState\n  setStateShallow: (next: Partial<ComponentState>) => void\n  useAnimations?: UseAnimationHook\n  pseudos: PseudoStyles\n  style: ViewStyle | null | undefined\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    ...(!isWeb && {\n      mediaQuery: loadMediaQueryFeature(),\n    }),\n  }\n}\n\nfunction loadAnimationFeature() {\n  return createDefinition({\n    Component: ({ _utils, ...props }) => {\n      const { state, useAnimations, pseudos, style, setStateShallow } = _utils\n\n      if (!useAnimations) {\n        console.error('no useAnimations hook provided')\n        return null\n      }\n\n      const animatedStyleIn = {\n        ...style,\n        ...(state.hover && pseudos.hoverStyle),\n        ...(state.focus && pseudos.focusStyle),\n        ...(state.press && pseudos.pressStyle),\n      }\n\n      const res = useAnimations(props as any, {\n        isMounted: state.mounted,\n        style: animatedStyleIn,\n        exitStyle: pseudos?.exitStyle,\n        // onDidAnimate, delay\n      })\n\n      useIsomorphicLayoutEffect(() => {\n        setStateShallow({\n          animation: res,\n        })\n      }, [JSON.stringify(style)])\n\n      return null\n    },\n    propNames: ['animation'],\n  })\n}\n\nfunction loadMediaQueryFeature() {\n  const mediaPropNames = Object.keys(mediaState)\n\n  return createDefinition({\n    Component: (props: any) => {\n      const keys = mediaPropNames.flatMap((x) => (x in props ? x.slice(1) : []))\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;AAGA;AAIA;AAgBA,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,oCAAC;AAAA,QAAU,KAAK;AAAA,WAAU;AAAA,QAAO,QAAQ;AAAA,OAAO,CAAE;AAAA,IAClE;AAAA,EACF;AACA,SAAO;AACT,GAZ2B;AAc3B,wBAA2D;AACzD,SAAO;AAAA,IAEL,WAAW,qBAAqB;AAAA,OAI5B,CAAC,SAAS;AAAA,MACZ,YAAY,sBAAsB;AAAA,IACpC;AAAA,EACF;AACF;AAXS;AAaT,gCAAgC;AAC9B,SAAO,iBAAiB;AAAA,IACtB,WAAW,CAAC,EAAE,WAAW,YAAY;AACnC,YAAM,EAAE,OAAO,eAAe,SAAS,OAAO,oBAAoB;AAElE,UAAI,CAAC,eAAe;AAClB,gBAAQ,MAAM,gCAAgC;AAC9C,eAAO;AAAA,MACT;AAEA,YAAM,kBAAkB;AAAA,WACnB;AAAA,WACC,MAAM,SAAS,QAAQ;AAAA,WACvB,MAAM,SAAS,QAAQ;AAAA,WACvB,MAAM,SAAS,QAAQ;AAAA,MAC7B;AAEA,YAAM,MAAM,cAAc,OAAc;AAAA,QACtC,WAAW,MAAM;AAAA,QACjB,OAAO;AAAA,QACP,WAAW,mCAAS;AAAA,MAEtB,CAAC;AAED,gCAA0B,MAAM;AAC9B,wBAAgB;AAAA,UACd,WAAW;AAAA,QACb,CAAC;AAAA,MACH,GAAG,CAAC,KAAK,UAAU,KAAK,CAAC,CAAC;AAE1B,aAAO;AAAA,IACT;AAAA,IACA,WAAW,CAAC,WAAW;AAAA,EACzB,CAAC;AACH;AAlCS;AAoCT,iCAAiC;AAC/B,QAAM,iBAAiB,OAAO,KAAK,UAAU;AAE7C,SAAO,iBAAiB;AAAA,IACtB,WAAW,CAAC,UAAe;AACzB,YAAM,OAAO,eAAe,QAAQ,CAAC,MAAO,KAAK,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAE;AAEzE,gCAA0B,MAAM;AAC9B,mBAAW,OAAO,MAAM;AACtB,gCAAsB,KAAK,MAAM,OAAO,WAAW;AAAA,QACrD;AACA,eAAO,MAAM;AACX,qBAAW,OAAO,MAAM;AACtB,qCAAyB,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;",
+  "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": ";;AAAA;AAGA;AACA;AASA;AAmBA,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,oCAAC;AAAA,QAAU,KAAK;AAAA,WAAU;AAAA,QAAO,QAAQ;AAAA,OAAO,CAAE;AAAA,IAClE;AAAA,EACF;AACA,SAAO;AACT,GAZ2B;AAc3B,wBAA2D;AACzD,SAAO;AAAA,IAEL,WAAW,qBAAqB;AAAA,IAIhC,YAAY,sBAAsB;AAAA,EACpC;AACF;AATS;AAWT,gCAAgC;AAC9B,SAAO,iBAAiB;AAAA,IACtB,WAAW,CAAC,EAAE,WAAW,YAAY;AACnC,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;AAnGjE;AAqGU,gBAAM,QAAQ,WAAW,CAAC;AAE1B,gBAAM,aACJ,eAAe,QAAQ,MAAM,YAAY,QACrC,gBAAgB,oBAAa,aAAb,mBAAwB,cAAc,WACpD,YACE,mBAAa,aAAb,mBAAwB,cAAc,SACtC,cACA,OACA,OACA,KACF,KAAK,QAAQ,aACL,QAAQ,aAClB;AAEN,gBAAM,YACJ,eAAe,QACX,eAAe,oBAAa,aAAb,mBAAwB,aAAa,WAClD,YACE,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,gCAA0B,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,QAAM,EAAE,cAAc,SAAS;AAC/B,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,UAAU;AAE7C,SAAO,iBAAiB;AAAA,IACtB,WAAW,CAAC,UAAe;AACzB,YAAM,OAAO,eAAe,OAAO,CAAC,MAAM,KAAK,KAAK;AAEpD,gCAA0B,MAAM;AAC9B,mBAAW,OAAO,MAAM;AACtB,gCAAsB,KAAK,MAAM,OAAO,WAAW;AAAA,QACrD;AACA,eAAO,MAAM;AACX,qBAAW,OAAO,MAAM;AACtB,qCAAyB,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/esm/hooks/useMedia.js

@@ -15,36 +15,9 @@ const removeMediaQueryListener = /* @__PURE__ */ __name((key, cb) => {
   var _a;
   (_a = mediaQueryListeners[key]) == null ? void 0 : _a.delete(cb);
 }, "removeMediaQueryListener");
-let conf = null;
-const mediaQueryConfig = new Proxy({}, {
-  get(target, key) {
-    if (key === "$$typeof") {
-      return Reflect.get(target, key);
-    }
-    if (!conf) {
-      console.warn("Tamagui: accessing media query before init");
-      return null;
-    }
-    return Reflect.get(conf, key);
-  },
-  ownKeys() {
-    if (!conf) {
-      console.warn("Tamagui: accessing media query before init");
-      return [];
-    }
-    return Object.keys(conf);
-  },
-  getOwnPropertyDescriptor() {
-    return {
-      enumerable: true,
-      configurable: true
-    };
-  }
-});
+let hasConfigured = false;
+const mediaQueryConfig = {};
 const getMedia = /* @__PURE__ */ __name(() => {
-  if (!conf) {
-    throw new Error(`not configured yet`);
-  }
   return mediaState;
 }, "getMedia");
 const configureMedia = /* @__PURE__ */ __name(({
@@ -52,37 +25,42 @@ const configureMedia = /* @__PURE__ */ __name(({
   defaultActive = ["sm", "xs"]
 } = {}) => {
   var _a;
-  if (conf) {
+  if (hasConfigured) {
     console.warn(`Already configured mediaQueries once (you may have called getMedia() before configureMedia())`);
   }
   if (queries) {
-    conf = queries;
+    Object.assign(mediaQueryConfig, queries);
+    hasConfigured = true;
   }
   for (const key in queries) {
     const str = mediaObjectToString(queries[key]);
+    const propKey = `$${key}`;
     try {
-      const getMatch = /* @__PURE__ */ __name(() => matchMedia(str), "getMatch");
-      const match = getMatch();
-      if (!match || typeof match.addListener !== "function") {
-        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
-      }
-      mediaState[key] = !!match.matches;
-      match.addListener(() => {
+      let update = function() {
         const next = !!getMatch().matches;
-        if (next === mediaState[key])
+        if (next === mediaState[propKey])
           return;
-        mediaState[key] = next;
-        const listeners = mediaQueryListeners[key];
+        mediaState[propKey] = next;
+        const listeners = mediaQueryListeners[propKey];
         if (listeners == null ? void 0 : listeners.size) {
           for (const cb of [...listeners]) {
             cb();
           }
         }
-      });
+      };
+      __name(update, "update");
+      const getMatch = /* @__PURE__ */ __name(() => matchMedia(str), "getMatch");
+      const match = getMatch();
+      if (!match || typeof match.addListener !== "function") {
+        throw new Error("\u26A0\uFE0F No match (seeing this in RN sometimes)");
+      }
+      mediaState[propKey] = !!match.matches;
+      match.addListener(update);
+      update();
     } catch (err) {
       console.error("Error running media query", str, err.message, err.stack);
       const isDefaultActive = (_a = defaultActive == null ? void 0 : defaultActive.includes(key)) != null ? _a : true;
-      mediaState[key] = isDefaultActive;
+      mediaState[propKey] = isDefaultActive;
     }
   }
 }, "configureMedia");
@@ -108,6 +86,7 @@ const useMedia = /* @__PURE__ */ __name(() => {
     }
     for (const key in st.nextSelections) {
       if (!(key in st.selections)) {
+        console.log("lsiten", key);
         addMediaQueryListener(key, forceUpdate);
       }
     }
@@ -129,6 +108,9 @@ const useMedia = /* @__PURE__ */ __name(() => {
     const st = state.current;
     return new Proxy(mediaState, {
       get(target, key) {
+        if (key[0] !== "$") {
+          key = `$${key}`;
+        }
         if (!(key in mediaState)) {
           return Reflect.get(target, key);
         }

package/dist/esm/hooks/useMedia.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMedia.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  ConfigureMediaQueryOptions,\n  MediaQueries,\n  MediaQueryObject,\n  MediaQueryState,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nlet conf: MediaQueries | null = null\n\nexport const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {\n  get(target, key) {\n    if (key === '$$typeof') {\n      return Reflect.get(target, key)\n    }\n    if (!conf) {\n      console.warn('Tamagui: accessing media query before init')\n      return null\n    }\n    return Reflect.get(conf, key)\n  },\n  ownKeys() {\n    if (!conf) {\n      console.warn('Tamagui: accessing media query before init')\n      return []\n    }\n    return Object.keys(conf)\n  },\n  getOwnPropertyDescriptor() {\n    return {\n      enumerable: true,\n      configurable: true,\n    }\n  },\n})\n\nexport const getMedia = () => {\n  if (!conf) {\n    throw new Error(`not configured yet`)\n  }\n  return mediaState\n}\n\nexport const configureMedia = ({\n  queries,\n  defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n  if (conf) {\n    console.warn(\n      `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n    )\n  }\n\n  if (queries) {\n    conf = queries\n  }\n\n  // setup\n  for (const key in queries) {\n    const str = mediaObjectToString(queries[key])\n    try {\n      const getMatch = () => matchMedia(str)\n      const match = getMatch()\n      if (!match || typeof match.addListener !== 'function') {\n        // caught below\n        throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n      }\n      mediaState[key] = !!match.matches\n      match.addListener(() => {\n        const next = !!getMatch().matches\n        if (next === mediaState[key]) return\n        mediaState[key] = next\n        const listeners = mediaQueryListeners[key]\n        if (listeners?.size) {\n          for (const cb of [...listeners]) {\n            cb()\n          }\n        }\n      })\n    } catch (err: any) {\n      console.error('Error running media query', str, err.message, err.stack)\n      const isDefaultActive = defaultActive?.includes(key as any) ?? true\n      mediaState[key] = isDefaultActive\n    }\n  }\n}\n\ntype UseMediaState = {\n  selections: { [key: string]: boolean }\n  nextSelections: { [key: string]: boolean }\n  isRendering: boolean\n  isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n  const forceUpdate = useForceUpdate()\n  const state = useRef() as React.MutableRefObject<UseMediaState>\n  if (!state.current) {\n    state.current = {\n      selections: {},\n      nextSelections: {},\n      isUnmounted: false,\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    // delete old\n    for (const key in st.selections) {\n      if (!(key in st.nextSelections)) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n    // add new\n    for (const key in st.nextSelections) {\n      if (!(key in st.selections)) {\n        addMediaQueryListener(key, forceUpdate)\n      }\n    }\n  })\n\n  // unmount\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      const st = state.current\n      st.isUnmounted = true\n      const allKeys = {\n        ...st.selections,\n        ...st.nextSelections,\n      }\n      for (const key in allKeys) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n  }, [])\n\n  return useConstant(() => {\n    const st = state.current\n    return new Proxy(mediaState, {\n      get(target, key: string) {\n        if (!(key in mediaState)) {\n          return Reflect.get(target, key)\n        }\n        if (!st.isUnmounted) {\n          if (st.isRendering) {\n            st.nextSelections[key] = true\n          }\n        }\n        if (key in mediaState) {\n          return mediaState[key]\n        }\n        return Reflect.get(mediaState, key)\n      },\n    })\n  })\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport { useRef } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  ConfigureMediaQueryOptions,\n  MediaPropKeys,\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n} from '../types'\nimport { useConstant } from './useConstant'\n\nexport const mediaState: { [key in MediaPropKeys]: boolean } = {} as any\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport const addMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n}\n\nexport const removeMediaQueryListener = (key: string, cb: any) => {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nlet hasConfigured = false\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\nexport const configureMedia = ({\n  queries,\n  defaultActive = ['sm', 'xs'],\n}: ConfigureMediaQueryOptions = {}) => {\n  if (hasConfigured) {\n    console.warn(\n      `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`\n    )\n  }\n\n  if (queries) {\n    Object.assign(mediaQueryConfig, queries)\n    hasConfigured = true\n  }\n\n  // setup\n  for (const key in queries) {\n    const str = mediaObjectToString(queries[key])\n    const propKey = `$${key}`\n    try {\n      const getMatch = () => matchMedia(str)\n      const match = getMatch()\n      if (!match || typeof match.addListener !== 'function') {\n        // caught below\n        throw new Error('\u26A0\uFE0F No match (seeing this in RN sometimes)')\n      }\n      mediaState[propKey] = !!match.matches\n      match.addListener(update)\n\n      function update() {\n        const next = !!getMatch().matches\n        if (next === mediaState[propKey]) return\n        mediaState[propKey] = next\n        const listeners = mediaQueryListeners[propKey]\n        if (listeners?.size) {\n          for (const cb of [...listeners]) {\n            cb()\n          }\n        }\n      }\n\n      update()\n    } catch (err: any) {\n      console.error('Error running media query', str, err.message, err.stack)\n      const isDefaultActive = defaultActive?.includes(key as any) ?? true\n      mediaState[propKey] = isDefaultActive\n    }\n  }\n}\n\ntype UseMediaState = {\n  selections: { [key: string]: boolean }\n  nextSelections: { [key: string]: boolean }\n  isRendering: boolean\n  isUnmounted: boolean\n}\n\nexport const useMedia = () => {\n  const forceUpdate = useForceUpdate()\n  const state = useRef() as React.MutableRefObject<UseMediaState>\n  if (!state.current) {\n    state.current = {\n      selections: {},\n      nextSelections: {},\n      isUnmounted: false,\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    // delete old\n    for (const key in st.selections) {\n      if (!(key in st.nextSelections)) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n    // add new\n    for (const key in st.nextSelections) {\n      if (!(key in st.selections)) {\n        console.log('lsiten', key)\n        addMediaQueryListener(key, forceUpdate)\n      }\n    }\n  })\n\n  // unmount\n  useIsomorphicLayoutEffect(() => {\n    return () => {\n      const st = state.current\n      st.isUnmounted = true\n      const allKeys = {\n        ...st.selections,\n        ...st.nextSelections,\n      }\n      for (const key in allKeys) {\n        removeMediaQueryListener(key, forceUpdate)\n      }\n    }\n  }, [])\n\n  return useConstant(() => {\n    const st = state.current\n    return new Proxy(\n      mediaState as {\n        [key in MediaQueryKey]: boolean\n      },\n      {\n        get(target, key: string) {\n          if (key[0] !== '$') {\n            key = `$${key}`\n          }\n          if (!(key in mediaState)) {\n            return Reflect.get(target, key)\n          }\n          if (!st.isUnmounted) {\n            if (st.isRendering) {\n              st.nextSelections[key] = true\n            }\n          }\n          if (key in mediaState) {\n            return mediaState[key]\n          }\n          return Reflect.get(mediaState, key)\n        },\n      }\n    )\n  })\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/hooks/useTheme.js

@@ -49,14 +49,22 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
         return Reflect.has(theme, key);
       },
       get(_, key) {
-        if (!name || key === "__proto__") {
+        if (!name || key === "__proto__" || typeof key === "symbol") {
+          if (key === GetThemeManager) {
+            if (process.env.NODE_ENV === "development") {
+              if (props["debug"]) {
+                console.log("did change", { themeName, didChangeTheme, name, componentName }, themeManager == null ? void 0 : themeManager.parentName);
+              }
+            }
+            if (!didChangeTheme) {
+              return null;
+            }
+            return themeManager;
+          }
           return Reflect.get(_, key);
         }
-        if (key === GetThemeManager) {
-          if (!didChangeTheme) {
-            return null;
-          }
-          return themeManager;
+        if (typeof key !== "string" || key === "$typeof") {
+          return Reflect.get(_, key);
         }
         if (process.env.NODE_ENV === "development") {
           if (key === "__state") {
@@ -73,11 +81,6 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
           console.error("No themeManager");
           return;
         }
-        if (process.env.NODE_ENV === "development") {
-          if ((props == null ? void 0 : props["debug"]) === "verbose") {
-            console.log("  \xBB accessing theme val", key, { ...state.current });
-          }
-        }
         if (typeof key === "string") {
           if (key[0] === "$") {
             key = key.slice(1);
@@ -86,12 +89,16 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
           if (val) {
             if (state.current.isRendering) {
               state.current.keys.add(key);
+              if (process.env.NODE_ENV === "development") {
+                if ((props == null ? void 0 : props["debug"]) === "verbose") {
+                  console.log("  \xBB tracking theme key", key);
+                }
+              }
             }
             return val;
           }
           if (process.env.NODE_ENV === "development") {
-            console.warn(`No theme value "${String(key)}" in ${name}`);
-            return null;
+            console.log(`No theme value "${String(key)}" in ${name}`);
           }
         }
         return Reflect.get(_, key);

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.['debug'] === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__') {\n          return Reflect.get(_, key)\n        }\n        // TODO make this pattern better\n        if (key === GetThemeManager) {\n          if (!didChangeTheme) {\n            return null\n          }\n          // TODO\n          // console.log('DID CHANGE THEME')\n          return themeManager\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (key === '__state') {\n            return state.current\n          }\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (props?.['debug'] === 'verbose') {\n            console.log('  \u00BB accessing theme val', key, { ...state.current })\n          }\n        }\n        if (typeof key === 'string') {\n          // auto convert variables to plain\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n          const val = themeManager.getValue(key)\n          if (val) {\n            if (state.current.isRendering) {\n              state.current.keys.add(key)\n            }\n            return val\n          }\n          if (process.env.NODE_ENV === 'development') {\n            console.warn(`No theme value \"${String(key)}\" in ${name}`)\n            return null\n          }\n        }\n        return Reflect.get(_, key)\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const next = parentManager.getNextTheme({ name, componentName, themes }, props)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) {\n      return null\n    }\n    return new ThemeManager(next.name, next.theme, parentManager)\n  })\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme({ name, componentName, themes }, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.['debug'] === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (process.env.NODE_ENV === 'development') {\n              if (props['debug']) {\n                // prettier-ignore\n                console.log('did change', { themeName, didChangeTheme, name, componentName }, themeManager?.parentName)\n              }\n            }\n            if (!didChangeTheme) {\n              return null\n            }\n            // TODO\n            // console.log('DID CHANGE THEME')\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (key === '__state') {\n            return state.current\n          }\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        if (typeof key === 'string') {\n          // auto convert variables to plain\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n          const val = themeManager.getValue(key)\n          if (val) {\n            if (state.current.isRendering) {\n              state.current.keys.add(key)\n              if (process.env.NODE_ENV === 'development') {\n                if (props?.['debug'] === 'verbose') {\n                  console.log('  \u00BB tracking theme key', key)\n                }\n              }\n            }\n            return val\n          }\n          // react native debuger uses toJSON\n          if (process.env.NODE_ENV === 'development') {\n            console.log(`No theme value \"${String(key)}\" in ${name}`)\n          }\n        }\n        return Reflect.get(_, key)\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const next = parentManager.getNextTheme({ name, componentName, themes }, props)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) {\n      return null\n    }\n    return new ThemeManager(next.name, next.theme, parentManager)\n  })\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme({ name, componentName, themes }, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/index.js

@@ -8,6 +8,7 @@ import { createTokens } from "./createTokens";
 export * from "./createVariable";
 export * from "./styled";
 export * from "./types";
+import { RNWTextProps, RNWViewProps } from "./types-rnw";
 import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from "./conf";
 export * from "./constants/constants";
 export * from "./constants/platform";
@@ -38,6 +39,8 @@ export * from "./views/ThemeProvider";
 export * from "./views/TextAncestorContext";
 export * from "@tamagui/helpers";
 export {
+  RNWTextProps,
+  RNWViewProps,
   createTokens,
   getConfig,
   getHasConfigured,

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport { createTokens } from './createTokens'\nexport * from './createVariable'\nexport * from './styled'\nexport * from './types'\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/getExpandedShorthands'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\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/useIsTouchDevice'\nexport * from './hooks/useConstant'\nexport * from './hooks/usePressable'\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useUnmountEffect'\nexport * from '@tamagui/use-force-update'\n\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/Theme'\nexport * from './views/ThemeReset'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/TextAncestorContext'\n\nexport * from '@tamagui/helpers'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;",
+  "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/getExpandedShorthands'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\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/useIsTouchDevice'\nexport * from './hooks/useConstant'\nexport * from './hooks/usePressable'\nexport * from './hooks/useMedia'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useUnmountEffect'\nexport * from '@tamagui/use-force-update'\n\nexport * from './views/Stack'\nexport * from './views/Text'\nexport * from './views/Theme'\nexport * from './views/ThemeReset'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/TextAncestorContext'\n\nexport * from '@tamagui/helpers'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;",
   "names": []
 }

package/dist/esm/styled.js

@@ -1,16 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import * as ReactNative from "react-native";
 import { Image, Text, TextInput } from "react-native";
 import { createComponent } from "./createComponent";
-import { extendStaticConfig } from "./helpers/extendStaticConfig";
-const RNComponents = /* @__PURE__ */ new WeakMap();
-for (const key of ["Image", "TextInput", "Text", "View"]) {
-  const val = ReactNative[key];
-  if (val && typeof val === "object") {
-    RNComponents.set(val, true);
-  }
-}
+import { RNComponents } from "./helpers/RNComponents";
 function styled(Component, options, staticExtractionOptions) {
   const staticConfigProps = (() => {
     if (options) {
@@ -18,7 +10,7 @@ function styled(Component, options, staticExtractionOptions) {
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
-      const isReactNativeWeb = RNComponents.has(Component);
+      const isReactNativeWeb = "staticConfig" in Component ? Component.staticConfig.isReactNativeWeb : RNComponents.has(Component);
       const isTamagui = !isReactNativeWeb && "staticConfig" in Component;
       const Comp = Component;
       const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false));
@@ -32,6 +24,7 @@ function styled(Component, options, staticExtractionOptions) {
         isTamagui,
         variants,
         defaultProps,
+        defaultVariants,
         componentName: name,
         isReactNativeWeb,
         isInput,
@@ -42,8 +35,7 @@ function styled(Component, options, staticExtractionOptions) {
     }
     return {};
   })();
-  const config = extendStaticConfig(Component, staticConfigProps);
-  const component = createComponent(config);
+  const component = createComponent(staticConfigProps, Component);
   return component;
 }
 __name(styled, "styled");

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import * as ReactNative from 'react-native'\nimport { Image, Text, TextInput } from 'react-native'\n\nimport { createComponent } from './createComponent'\nimport { extendStaticConfig } from './helpers/extendStaticConfig'\nimport {\n  GetProps,\n  GetVariantProps,\n  MediaPropKeys,\n  MediaProps,\n  PseudoProps,\n  PsuedoPropKeys,\n  StaticComponent,\n  StaticConfig,\n  StylableComponent,\n  VariantDefinitions,\n} from './types'\n\n// bye bye tree shaking... but only way to properly detect react-native components...\n// also neither rnw nor react support tree shaking atm\nconst RNComponents = new WeakMap()\n// I was looping over all of them, but casuses deprecation warnings and there's only a few\n// we realistically support - lets whitelist rather than blacklist\nfor (const key of ['Image', 'TextInput', 'Text', 'View']) {\n  const val = ReactNative[key]\n  if (val && typeof val === 'object') {\n    RNComponents.set(val, true)\n  }\n}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  // = VariantDefinitions<GetProps<ParentComponent>> gives type inference to variants: { true: { ... } }\n  // but causes \"Type instantiation is excessively deep and possibly infinite.\"...\n  Variants extends VariantDefinitions<any> | symbol =\n    | VariantDefinitions<GetProps<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    defaultVariants?: Variants extends Object ? GetVariantProps<Variants> : never\n  },\n  staticExtractionOptions?: 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 = RNComponents.has(Component)\n      const isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = 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: 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        componentName: name,\n        isReactNativeWeb,\n        isInput,\n        isText,\n        isImage,\n      }\n      return conf\n    }\n    return {}\n  })()\n  const config = extendStaticConfig(Component, staticConfigProps)\n  const component = createComponent(config!) // error is good here its on init\n\n  type ParentProps = GetProps<ParentComponent>\n  type VariantProps = Variants extends symbol ? {} : Expand<GetVariantProps<Variants>>\n  type VariantKeys = Variants extends symbol ? never : keyof Variants[keyof Variants]\n  type ParentPropsWithoutOurVariants = VariantKeys extends never\n    ? ParentProps\n    : Omit<ParentProps, VariantKeys>\n  type StyleProps = VariantProps & ParentPropsWithoutOurVariants\n  type Props = Variants extends undefined | symbol\n    ? ParentProps\n    : Omit<\n        ParentProps extends Object ? ParentProps : {},\n        (VariantKeys extends never ? ImpossibleKey : VariantKeys) | MediaPropKeys | PsuedoPropKeys\n      > &\n        VariantProps &\n        MediaProps<StyleProps> &\n        PseudoProps<StyleProps>\n\n  return component as StaticComponent<Props, VariantProps>\n}\n\ntype ImpossibleKey = 1234556123312321\ntype Expand<T> = T extends infer O ? { [K in keyof O]?: O[K] } : never\n"],
-  "mappings": ";;AAAA;AACA;AAEA;AACA;AAgBA,MAAM,eAAe,oBAAI,QAAQ;AAGjC,WAAW,OAAO,CAAC,SAAS,aAAa,QAAQ,MAAM,GAAG;AACxD,QAAM,MAAM,YAAY;AACxB,MAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,iBAAa,IAAI,KAAK,IAAI;AAAA,EAC5B;AACF;AAEO,gBAQL,WAEA,SAKA,yBACA;AACA,QAAM,oBAAqB,OAAM;AAC/B,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBAAmB,aAAa,IAAI,SAAS;AACnD,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO;AACb,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAClF,YAAM,OAAqB;AAAA,WACtB;AAAA,WACC,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AACH,QAAM,SAAS,mBAAmB,WAAW,iBAAiB;AAC9D,QAAM,YAAY,gBAAgB,MAAO;AAmBzC,SAAO;AACT;AAtEgB;",
+  "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 isTamagui = !isReactNativeWeb && 'staticConfig' in Component\n      const Comp = 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        isInput,\n        isText,\n        isImage,\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;AAEA;AACA;AAoBO,gBAML,WAEA,SAMA,yBACA;AACA,QAAM,oBAAqB,OAAM;AAC/B,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,iBAAiB;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,mBACJ,kBAAkB,YACd,UAAU,aAAa,mBACvB,aAAa,IAAI,SAAS;AAChC,YAAM,YAAY,CAAC,oBAAoB,kBAAkB;AACzD,YAAM,OAAO;AACb,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,QAAQ;AAC1E,YAAM,UAAU,CAAC,CAAE,cAAa,WAAY,EAAC,YAAY,SAAS,YAAY;AAC9E,YAAM,SAAS,CAAC,CAAE,cAAa,UAAW,EAAC,YAAY,WAAW,SAAS,OAAO;AAClF,YAAM,OAA8B;AAAA,WAC/B;AAAA,WACC,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AACA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;AAxFgB;",
   "names": []
 }

package/dist/esm/tamagui-base.css

@@ -0,0 +1,8 @@
+.tamagui-absolute-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+/*# sourceMappingURL=tamagui-base.css.map */

package/dist/esm/tamagui-base.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tamagui-base.css"],
+  "sourcesContent": [".tamagui-absolute-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n"],
+  "mappings": "AAAA;AACE;AACA;AACA;AACA;AACA;AAAA;",
+  "names": []
+}

package/dist/esm/views/Stack.js

@@ -1,6 +1,7 @@
 import { stackDefaultStyles } from "../constants/constants";
 import { createComponent } from "../createComponent";
 const Stack = createComponent({
+  componentName: "Stack",
   defaultProps: {
     ...stackDefaultStyles,
     flexDirection: "column"

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Stack.tsx"],
-  "sourcesContent": ["import { View } from 'react-native'\n\nimport { stackDefaultStyles } from '../constants/constants'\nimport { createComponent } from '../createComponent'\nimport { StackProps } from '../types'\n\nexport const Stack = createComponent<StackProps, View>({\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
-  "mappings": "AAEA;AACA;AAGO,MAAM,QAAQ,gBAAkC;AAAA,EACrD,cAAc;AAAA,OACT;AAAA,IACH,eAAe;AAAA,EACjB;AACF,CAAC;",
+  "sourcesContent": ["import { View } from 'react-native'\n\nimport { stackDefaultStyles } from '../constants/constants'\nimport { createComponent } from '../createComponent'\nimport { StackProps, StackPropsBase } from '../types'\n\nexport const Stack = createComponent<StackProps, View, StackPropsBase>({\n  componentName: 'Stack',\n  defaultProps: {\n    ...stackDefaultStyles,\n    flexDirection: 'column',\n  },\n})\n\n// test types\n// export const YStack = styled(Stack, {\n//   flexDirection: 'column',\n// })\n// // test types\n// const x00 = <Stack missing={0} /> // should err\n// const x0 = <YStack missing={0} /> // should err\n// const x1 = (props: StackProps) => <YStack {...props} />\n// type ys = typeof YStack\n// type ysv = ys extends StaticComponent<any, infer V> ? V : unknown\n"],
+  "mappings": "AAEA;AACA;AAGO,MAAM,QAAQ,gBAAkD;AAAA,EACrE,eAAe;AAAA,EACf,cAAc;AAAA,OACT;AAAA,IACH,eAAe;AAAA,EACjB;AACF,CAAC;",
   "names": []
 }

package/dist/esm/views/Text.js

@@ -8,6 +8,7 @@ const ellipseStyle = {
   whiteSpace: "nowrap"
 };
 const Text = createComponent({
+  componentName: "Text",
   isText: true,
   defaultProps: {
     display: isWeb ? "inline" : "flex",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Text.tsx"],
-  "sourcesContent": ["import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport { Text as TextView } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { createComponent } from '../createComponent'\nimport { TextProps } from '../types'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView>({\n  isText: true,\n  defaultProps: {\n    display: isWeb ? 'inline' : 'flex',\n    boxSizing: 'border-box',\n    fontFamily: 'System',\n    wordWrap: 'break-word',\n  },\n  variants: {\n    numberOfLines: {\n      1: ellipseStyle,\n      // TODO imply fn, test 1, could do types `>1` `<2`\n      ':number': (lines) => (lines > 1 ? { WebkitLineClamp: 1 } : null),\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n      },\n    },\n\n    pressable: {\n      true: {\n        cursor: 'pointer',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n    ...(isWeb && {\n      userSelect: true,\n      textOverflow: true,\n      whiteSpace: true,\n      wordWrap: true,\n      selectable: true,\n      cursor: true,\n    }),\n  },\n})\n"],
-  "mappings": "AAAA;AAGA;AACA;AAGA,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAqC;AAAA,EACvD,QAAQ;AAAA,EACR,cAAc;AAAA,IACZ,SAAS,QAAQ,WAAW;AAAA,IAC5B,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,GAAG;AAAA,MAEH,WAAW,CAAC,UAAW,QAAQ,IAAI,EAAE,iBAAiB,EAAE,IAAI;AAAA,IAC9D;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EACA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAC5C,aAAa;AAAA,OACR;AAAA,OACA;AAAA,OACC,SAAS;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;",
+  "sourcesContent": ["import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'\nimport { Text as TextView } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { createComponent } from '../createComponent'\nimport { TextProps, TextPropsBase } from '../types'\n\nconst ellipseStyle = {\n  maxWidth: '100%',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}\n\nexport const Text = createComponent<TextProps, TextView, TextPropsBase>({\n  componentName: 'Text',\n  isText: true,\n  defaultProps: {\n    display: isWeb ? 'inline' : 'flex',\n    boxSizing: 'border-box',\n    fontFamily: 'System',\n    wordWrap: 'break-word',\n  },\n  variants: {\n    numberOfLines: {\n      1: ellipseStyle,\n      // TODO imply fn, test 1, could do types `>1` `<2`\n      ':number': (lines) => (lines > 1 ? { WebkitLineClamp: 1 } : null),\n    },\n\n    selectable: {\n      true: {\n        userSelect: 'text',\n        cursor: 'text',\n      },\n      false: {\n        userSelect: 'none',\n      },\n    },\n\n    pressable: {\n      true: {\n        cursor: 'pointer',\n      },\n    },\n\n    ellipse: {\n      true: isWeb\n        ? ellipseStyle\n        : {\n            numberOfLines: 1,\n            lineBreakMode: 'clip',\n          },\n    },\n  },\n  deoptProps: new Set(isWeb ? [] : ['ellipse']),\n  validStyles: {\n    ...validStyles,\n    ...stylePropsTextOnly,\n    ...(isWeb && {\n      userSelect: true,\n      textOverflow: true,\n      whiteSpace: true,\n      wordWrap: true,\n      selectable: true,\n      cursor: true,\n    }),\n  },\n})\n"],
+  "mappings": "AAAA;AAGA;AACA;AAGA,MAAM,eAAe;AAAA,EACnB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AACd;AAEO,MAAM,OAAO,gBAAoD;AAAA,EACtE,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,cAAc;AAAA,IACZ,SAAS,QAAQ,WAAW;AAAA,IAC5B,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,IACR,eAAe;AAAA,MACb,GAAG;AAAA,MAEH,WAAW,CAAC,UAAW,QAAQ,IAAI,EAAE,iBAAiB,EAAE,IAAI;AAAA,IAC9D;AAAA,IAEA,YAAY;AAAA,MACV,MAAM;AAAA,QACJ,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA,MACA,OAAO;AAAA,QACL,YAAY;AAAA,MACd;AAAA,IACF;AAAA,IAEA,WAAW;AAAA,MACT,MAAM;AAAA,QACJ,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,IAEA,SAAS;AAAA,MACP,MAAM,QACF,eACA;AAAA,QACE,eAAe;AAAA,QACf,eAAe;AAAA,MACjB;AAAA,IACN;AAAA,EACF;AAAA,EACA,YAAY,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;AAAA,EAC5C,aAAa;AAAA,OACR;AAAA,OACA;AAAA,OACC,SAAS;AAAA,MACX,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -3,33 +3,27 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import React, { memo, useMemo } from "react";
 import { isWeb } from "../constants/platform";
 import { wrapThemeManagerContext } from "../helpers/wrapThemeManagerContext";
-import { useChangeThemeEffect } from "../static";
+import { useChangeThemeEffect } from "../hooks/useTheme";
 React["createElement"];
 const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
   var _a, _b;
-  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, void 0, props);
-  const contents = useMemo(() => {
-    if (!name || !theme) {
-      return props.children;
-    }
-    return wrapThemeManagerContext(props.children, themeManager);
-  }, [props.children, themeManager]);
-  if (!themes) {
-    console.warn("Error, no themes in context", props);
-    return props.children;
-  }
-  if (!name || !theme) {
-    if (process.env.NODE_ENV === "development" && name && !theme) {
+  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(props.name, props.componentName, props);
+  if (!themes || !name || !theme) {
+    if (name && !theme && process.env.NODE_ENV === "development") {
       console.warn(`No theme found by name ${name}`);
     }
     return props.children;
   }
+  const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
+  if (props.componentName === "Drawer") {
+    console.log("ok?", className, themeManager);
+  }
   if (isWeb) {
-    if (props.disableThemeClass) {
-      return contents;
-    }
-    return /* @__PURE__ */ React.createElement("div", {
-      className: props.className ? `${className || ""} ${props.className || ""}` : className || "",
+    return /* @__PURE__ */ React.createElement("span", {
+      className: [
+        `tui_Theme`,
+        ...!props.disableThemeClass ? [props.className, className].filter(Boolean) : []
+      ].join(" "),
       style: {
         display: "contents",
         color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../static'\nimport { ThemeName } from '../types'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  children?: any\n  debug?: boolean\n}\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    undefined,\n    props\n  )\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(() => {\n    if (!name || !theme) {\n      return props.children\n    }\n    return wrapThemeManagerContext(props.children, themeManager)\n  }, [props.children, themeManager])\n\n  if (!themes) {\n    console.warn('Error, no themes in context', props)\n    return props.children\n  }\n\n  if (!name || !theme) {\n    if (process.env.NODE_ENV === 'development' && name && !theme) {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    return (\n      <div\n        className={\n          props.className ? `${className || ''} ${props.className || ''}` : className || ''\n        }\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </div>\n    )\n  }\n\n  return contents\n})\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAUC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAlB5D;AAmBE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,QACA,KACF;AAIA,QAAM,WAAW,QAAQ,MAAM;AAC7B,QAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,aAAO,MAAM;AAAA,IACf;AACA,WAAO,wBAAwB,MAAM,UAAU,YAAY;AAAA,EAC7D,GAAG,CAAC,MAAM,UAAU,YAAY,CAAC;AAEjC,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B,KAAK;AACjD,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,QAAI,QAAQ,IAAI,aAAa,iBAAiB,QAAQ,CAAC,OAAO;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA,IACT;AACA,WACE,oCAAC;AAAA,MACC,WACE,MAAM,YAAY,GAAG,aAAa,MAAM,MAAM,aAAa,OAAO,aAAa;AAAA,MAEjF,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GAjD0B,QAiDzB;",
+  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeName } from '../types'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  debug?: boolean\n}\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  if (!themes || !name || !theme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => wrapThemeManagerContext(props.children, themeManager),\n    [props.children, themeManager]\n  )\n\n  if (props.componentName === 'Drawer') {\n    console.log('ok?', className, themeManager)\n  }\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAWC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAnB5D;AAoBE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,MAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;AAC9B,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAIA,QAAM,WAAW,QACf,MAAM,wBAAwB,MAAM,UAAU,YAAY,GAC1D,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,MAAM,kBAAkB,UAAU;AACpC,YAAQ,IAAI,OAAO,WAAW,YAAY;AAAA,EAC5C;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GA5C0B,QA4CzB;",
   "names": []
 }