@tamagui/core 1.0.1-beta.219 → 1.0.1-beta.221

package/dist/esm/styled.js

@@ -1,23 +1,6 @@
 import { createComponent } from "./createComponent";
-import { getReactNative } from "./setupReactNative";
-let RNComponentConfigs = null;
+import { ReactNativeStaticConfigs } from "./setupReactNative";
 function styled(Component, options, staticExtractionOptions) {
-  const RN = getReactNative();
-  if (RN && typeof RN === "object" && !RNComponentConfigs) {
-    RNComponentConfigs = /* @__PURE__ */ new WeakMap();
-    for (const key in RN) {
-      const val = RN[key];
-      if (!val)
-        continue;
-      if (key[0].toLowerCase() === key[0])
-        continue;
-      RNComponentConfigs.set(val, {
-        isReactNative: true,
-        isText: key === "Text" || key === "TextInput",
-        inlineProps: key === "Image" ? /* @__PURE__ */ new Set(["src", "width", "height"]) : void 0
-      });
-    }
-  }
   const staticConfigProps = (() => {
     const parentStaticConfig = "staticConfig" in Component ? Component.staticConfig : null;
     if (process.env.NODE_ENV === "development") {
@@ -42,11 +25,11 @@ function styled(Component, options, staticExtractionOptions) {
         Object.assign(defaultProps, defaultVariants);
       }
       const isReactNative = Boolean(
-        RNComponentConfigs && (RNComponentConfigs.has(Component) || RNComponentConfigs.has(parentStaticConfig == null ? void 0 : parentStaticConfig.Component)) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNative) || (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isReactNative)
+        ReactNativeStaticConfigs.has(Component) || ReactNativeStaticConfigs.has(parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isReactNative) || (staticExtractionOptions == null ? void 0 : staticExtractionOptions.isReactNative)
       );
       const isTamagui = !isReactNative && !!parentStaticConfig;
       const Comp = isReactNative ? (parentStaticConfig == null ? void 0 : parentStaticConfig.Component) || Component : Component;
-      const nativeConf = isReactNative && (RNComponentConfigs == null ? void 0 : RNComponentConfigs.get(Comp)) || null;
+      const nativeConf = isReactNative && ReactNativeStaticConfigs.get(Comp) || null;
       const isText = Boolean((staticExtractionOptions == null ? void 0 : staticExtractionOptions.isText) || (parentStaticConfig == null ? void 0 : parentStaticConfig.isText));
       const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative);
       const conf = {

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx"],
-  "sourcesContent": ["import { getConfig } from './config'\nimport { createComponent } from './createComponent'\nimport { getReactNative } from './setupReactNative'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\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\n// can't infer from styled(<YStack />) which would be nice\n// * excessively deep type instantiation\n\ntype GetBaseProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetBaseProps<A['type']> :\n  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetVariantProps<A['type']>\n  //   :\n  A extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\nlet RNComponentConfigs: WeakMap<any, Partial<StaticConfig>> | null = null\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\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    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // allows passing styled(<H1 bc=\"red\" />)\n  // but to get types right would be tricky\n  // if (isValidElement(Component) && isTamaguiComponent(Component.type)) {\n  //   const props = Component.props\n  //   if (props && typeof props === 'object') {\n  //     Component = Component.type as any\n  //     options = options ? ({ ...props, ...options } as any) : props\n  //   }\n  // }\n\n  const RN = getReactNative()\n  if (RN && typeof RN === 'object' && !RNComponentConfigs) {\n    RNComponentConfigs = new WeakMap()\n    for (const key in RN) {\n      const val = RN[key]\n      if (!val) continue\n      if (key[0].toLowerCase() === key[0]) continue\n      RNComponentConfigs.set(val, {\n        isReactNative: true,\n        isText: key === 'Text' || key === 'TextInput',\n        inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,\n      })\n    }\n  }\n\n  const staticConfigProps = (() => {\n    const parentStaticConfig =\n      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n\n    if (process.env.NODE_ENV === 'development') {\n      if (parentStaticConfig?.isHOC) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`,\n          `Given options:`,\n          options,\n          new Error().stack\n        )\n      }\n    }\n\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNative = Boolean(\n        (RNComponentConfigs &&\n          (RNComponentConfigs.has(Component) ||\n            RNComponentConfigs.has(parentStaticConfig?.Component))) ||\n          parentStaticConfig?.isReactNative ||\n          staticExtractionOptions?.isReactNative\n      )\n      const isTamagui = !isReactNative && !!parentStaticConfig\n\n      const Comp = isReactNative ? parentStaticConfig?.Component || Component : (Component as any)\n      const nativeConf = (isReactNative && RNComponentConfigs?.get(Comp)) || null\n\n      const isText = Boolean(staticExtractionOptions?.isText || parentStaticConfig?.isText)\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\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        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\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  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\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\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  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {}\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
-  "mappings": "AACA,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AAmC/B,IAAI,qBAAiE;AAE9D,SAAS,OAId,WAEA,SAOA,yBACA;AAWA,QAAM,KAAK,eAAe;AAC1B,MAAI,MAAM,OAAO,OAAO,YAAY,CAAC,oBAAoB;AACvD,yBAAqB,oBAAI,QAAQ;AACjC,eAAW,OAAO,IAAI;AACpB,YAAM,MAAM,GAAG;AACf,UAAI,CAAC;AAAK;AACV,UAAI,IAAI,GAAG,YAAY,MAAM,IAAI;AAAI;AACrC,yBAAmB,IAAI,KAAK;AAAA,QAC1B,eAAe;AAAA,QACf,QAAQ,QAAQ,UAAU,QAAQ;AAAA,QAClC,aAAa,QAAQ,UAAU,oBAAI,IAAI,CAAC,OAAO,SAAS,QAAQ,CAAC,IAAI;AAAA,MACvE,CAAC;AAAA,IACH;AAAA,EACF;AAEA,QAAM,qBAAqB,MAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAE3E,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,yDAAoB,OAAO;AAE7B,gBAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI,MAAM,EAAE;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAEA,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,WACf;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,gBAAgB;AAAA,QACnB,uBACE,mBAAmB,IAAI,SAAS,KAC/B,mBAAmB,IAAI,yDAAoB,SAAS,OACtD,yDAAoB,mBACpB,mEAAyB;AAAA,MAC7B;AACA,YAAM,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAEtC,YAAM,OAAO,iBAAgB,yDAAoB,cAAa,YAAa;AAC3E,YAAM,aAAc,kBAAiB,yDAAoB,IAAI,UAAU;AAEvE,YAAM,SAAS,SAAQ,mEAAyB,YAAU,yDAAoB,OAAM;AACpF,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AAkC9D,SAAO;AACT;",
+  "sourcesContent": ["import { createComponent } from './createComponent'\nimport { ReactNativeStaticConfigs } from './setupReactNative'\nimport {\n  GetProps,\n  GetVariantValues,\n  MediaProps,\n  PseudoProps,\n  StaticConfig,\n  StylableComponent,\n  TamaguiComponent,\n  TamaguiElement,\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\n// can't infer from styled(<YStack />) which would be nice\n// * excessively deep type instantiation\n\ntype GetBaseProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetBaseProps<A['type']> :\n  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>\n\ntype GetVariantProps<A extends StylableComponent> =\n  // A extends TamaguiReactElement\n  //   ? GetVariantProps<A['type']>\n  //   :\n  A extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\nexport function styled<\n  ParentComponent extends StylableComponent,\n  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\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    acceptsClassName?: boolean\n  },\n  staticExtractionOptions?: Partial<StaticConfig>\n) {\n  // allows passing styled(<H1 bc=\"red\" />)\n  // but to get types right would be tricky\n  // if (isValidElement(Component) && isTamaguiComponent(Component.type)) {\n  //   const props = Component.props\n  //   if (props && typeof props === 'object') {\n  //     Component = Component.type as any\n  //     options = options ? ({ ...props, ...options } as any) : props\n  //   }\n  // }\n\n  const staticConfigProps = (() => {\n    const parentStaticConfig =\n      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n\n    if (process.env.NODE_ENV === 'development') {\n      if (parentStaticConfig?.isHOC) {\n        // eslint-disable-next-line no-console\n        console.warn(\n          `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`,\n          `Given options:`,\n          options,\n          new Error().stack\n        )\n      }\n    }\n\n    if (options) {\n      const {\n        variants,\n        name,\n        defaultVariants,\n        acceptsClassName: acceptsClassNameProp,\n        ...defaultProps\n      } = options\n      if (defaultVariants) {\n        Object.assign(defaultProps, defaultVariants)\n      }\n      const isReactNative = Boolean(\n        ReactNativeStaticConfigs.has(Component) ||\n          ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||\n          parentStaticConfig?.isReactNative ||\n          staticExtractionOptions?.isReactNative\n      )\n      const isTamagui = !isReactNative && !!parentStaticConfig\n\n      const Comp = isReactNative ? parentStaticConfig?.Component || Component : (Component as any)\n      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null\n\n      const isText = Boolean(staticExtractionOptions?.isText || parentStaticConfig?.isText)\n      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)\n\n      const conf: Partial<StaticConfig> = {\n        ...staticExtractionOptions,\n        ...(!isTamagui && {\n          Component: Comp,\n        }),\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        isReactNative,\n        isText,\n        acceptsClassName,\n        ...nativeConf,\n      }\n\n      // bail on non className views as well\n      if (defaultProps.children || !acceptsClassName) {\n        conf.neverFlatten = true\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  // get parent props without pseudos and medias so we can rebuild both with new variants\n  type ParentPropsBase = GetBaseProps<ParentComponent>\n  type ParentVariants = GetVariantProps<ParentComponent>\n\n  type OurVariants = Variants extends void\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\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  type StyledComponent = TamaguiComponent<\n    Props,\n    TamaguiElement,\n    ParentPropsBase,\n    ParentVariants & OurVariants\n  >\n\n  return component as StyledComponent\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n//   variants: {\n//     size: {\n//       '...size': (val) => {\n//         return {}\n//       }\n//     },\n//     disabled: {\n//       true: {\n//         opacity: 0.5,\n//         pointerEvents: 'none',\n//       },\n//     },\n//   } as const\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
+  "mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,gCAAgC;AAmClC,SAAS,OAId,WAEA,SAOA,yBACA;AAWA,QAAM,qBAAqB,MAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAE3E,QAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,UAAI,yDAAoB,OAAO;AAE7B,gBAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA,IAAI,MAAM,EAAE;AAAA,QACd;AAAA,MACF;AAAA,IACF;AAEA,QAAI,SAAS;AACX,YAAM;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB;AAAA,WACf;AAAA,MACL,IAAI;AACJ,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,YAAM,gBAAgB;AAAA,QACpB,yBAAyB,IAAI,SAAS,KACpC,yBAAyB,IAAI,yDAAoB,SAAS,MAC1D,yDAAoB,mBACpB,mEAAyB;AAAA,MAC7B;AACA,YAAM,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAEtC,YAAM,OAAO,iBAAgB,yDAAoB,cAAa,YAAa;AAC3E,YAAM,aAAc,iBAAiB,yBAAyB,IAAI,IAAI,KAAM;AAE5E,YAAM,SAAS,SAAQ,mEAAyB,YAAU,yDAAoB,OAAM;AACpF,YAAM,mBAAmB,yBAAyB,aAAa;AAE/D,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA,GAAG;AAAA,MACL;AAGA,UAAI,aAAa,YAAY,CAAC,kBAAkB;AAC9C,aAAK,eAAe;AAAA,MACtB;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AAkC9D,SAAO;AACT;",
   "names": []
 }

package/dist/esm/updateTheme.js

@@ -1,17 +1,17 @@
 import { addTheme } from "./addTheme";
 import { activeThemeManagers } from "./hooks/useTheme";
-function updateTheme({ name, theme }) {
+function updateTheme({
+  name,
+  theme
+}) {
   const next = addTheme({ name, theme, insertCSS: true, update: true });
   if (process.env.TAMAGUI_TARGET === "native") {
     activeThemeManagers.forEach((manager) => {
-      if (manager.name === name) {
-        manager.update(
-          {
-            name,
-            theme: next.theme
-          },
-          true
-        );
+      if (manager.state.name === name) {
+        manager.updateState({
+          name,
+          forceTheme: next.theme
+        });
       }
     });
   }

package/dist/esm/updateTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/updateTheme.ts"],
-  "sourcesContent": ["import { addTheme } from './addTheme'\nimport { activeThemeManagers } from './hooks/useTheme'\nimport { ThemeDefinition } from './types'\n\nexport function updateTheme({ name, theme }: { name: string; theme: ThemeDefinition }) {\n  const next = addTheme({ name, theme, insertCSS: true, update: true })\n\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    activeThemeManagers.forEach((manager) => {\n      if (manager.name === name) {\n        manager.update(\n          {\n            name,\n            theme: next.theme,\n          },\n          true\n        )\n      }\n    })\n  }\n\n  return next\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAG7B,SAAS,YAAY,EAAE,MAAM,MAAM,GAA6C;AACrF,QAAM,OAAO,SAAS,EAAE,MAAM,OAAO,WAAW,MAAM,QAAQ,KAAK,CAAC;AAEpE,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,wBAAoB,QAAQ,CAAC,YAAY;AACvC,UAAI,QAAQ,SAAS,MAAM;AACzB,gBAAQ;AAAA,UACN;AAAA,YACE;AAAA,YACA,OAAO,KAAK;AAAA,UACd;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { addTheme } from './addTheme'\nimport { activeThemeManagers } from './hooks/useTheme'\nimport { ThemeDefinition } from './types'\n\nexport function updateTheme({\n  name,\n  theme,\n}: {\n  name: string\n  theme: Partial<Record<keyof ThemeDefinition, any>>\n}) {\n  const next = addTheme({ name, theme, insertCSS: true, update: true })\n\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    activeThemeManagers.forEach((manager) => {\n      if (manager.state.name === name) {\n        manager.updateState({\n          name,\n          forceTheme: next.theme,\n        })\n      }\n    })\n  }\n\n  return next\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAG7B,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,SAAS,EAAE,MAAM,OAAO,WAAW,MAAM,QAAQ,KAAK,CAAC;AAEpE,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,wBAAoB,QAAQ,CAAC,YAAY;AACvC,UAAI,QAAQ,MAAM,SAAS,MAAM;AAC/B,gBAAQ,YAAY;AAAA,UAClB;AAAA,UACA,YAAY,KAAK;AAAA,QACnB,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/views/TamaguiProvider.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { isClient, isRSC, isServer } from "@tamagui/constants";
+import { isClient, isRSC, isServer, isWeb } from "@tamagui/constants";
 import * as React from "react";
-import { ButtonInsideButtonContext } from "../contexts/ButtonInsideButtonContext";
+import { ButtonNestingContext } from "../contexts/ButtonNestingContext";
 import { TextAncestorContext } from "../contexts/TextAncestorContext";
 import { useMediaListeners } from "../hooks/useMedia";
 import { ThemeProvider } from "./ThemeProvider";
@@ -18,7 +18,7 @@ function TamaguiProvider({
       children
     });
   }
-  if (!isServer) {
+  if (!isWeb || !isServer) {
     useMediaListeners(config);
   }
   if (isClient) {
@@ -33,7 +33,7 @@ function TamaguiProvider({
       };
     }, [config, disableInjectCSS]);
   }
-  return /* @__PURE__ */ jsx(ButtonInsideButtonContext.Provider, {
+  return /* @__PURE__ */ jsx(ButtonNestingContext.Provider, {
     value: false,
     children: /* @__PURE__ */ jsx(TextAncestorContext.Provider, {
       value: false,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/TamaguiProvider.tsx"],
-  "sourcesContent": ["import { isClient, isRSC, isServer } from '@tamagui/constants'\nimport * as React from 'react'\n\nimport { ButtonInsideButtonContext } from '../contexts/ButtonInsideButtonContext'\nimport { TextAncestorContext } from '../contexts/TextAncestorContext'\nimport { useMediaListeners } from '../hooks/useMedia'\nimport type { TamaguiProviderProps } from '../types'\nimport { ThemeProvider } from './ThemeProvider'\n\nexport function TamaguiProvider({\n  children,\n  disableInjectCSS,\n  config,\n  ...themePropsProvider\n}: TamaguiProviderProps) {\n  if (isRSC) {\n    return (\n      <span\n        style={{ display: 'contents' }}\n        className={`t_${Object.keys(config.themes)[0] || 'light'}`}\n      >\n        {children}\n      </span>\n    )\n  }\n\n  if (!isServer) {\n    useMediaListeners(config)\n  }\n\n  if (isClient) {\n    // inject CSS if asked to (not SSR compliant)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useLayoutEffect(() => {\n      if (disableInjectCSS) return\n      const style = document.createElement('style')\n      style.appendChild(document.createTextNode(config.getCSS()))\n      document.head.appendChild(style)\n      return () => {\n        document.head.removeChild(style)\n      }\n    }, [config, disableInjectCSS])\n  }\n\n  return (\n    <ButtonInsideButtonContext.Provider value={false}>\n      <TextAncestorContext.Provider value={false}>\n        <ThemeProvider\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0]}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorContext.Provider>\n    </ButtonInsideButtonContext.Provider>\n  )\n}\n"],
-  "mappings": "AAiBM;AAjBN,SAAS,UAAU,OAAO,gBAAgB;AAC1C,YAAY,WAAW;AAEvB,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAEvB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,OAAO;AACT,WACE,oBAAC;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,WAAW,KAAK,OAAO,KAAK,OAAO,MAAM,EAAE,MAAM;AAAA,MAEhD;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,CAAC,UAAU;AACb,sBAAkB,MAAM;AAAA,EAC1B;AAEA,MAAI,UAAU;AAGZ,UAAM,gBAAgB,MAAM;AAC1B,UAAI;AAAkB;AACtB,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,eAAS,KAAK,YAAY,KAAK;AAC/B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAAA,EAC/B;AAEA,SACE,oBAAC,0BAA0B,UAA1B;AAAA,IAAmC,OAAO;AAAA,IACzC,8BAAC,oBAAoB,UAApB;AAAA,MAA6B,OAAO;AAAA,MACnC,8BAAC;AAAA,QACC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,cAAc,mBAAmB,gBAAgB,OAAO,KAAK,OAAO,MAAM,EAAE;AAAA,QAE3E;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import { isClient, isRSC, isServer, isWeb } from '@tamagui/constants'\nimport * as React from 'react'\n\nimport { ButtonNestingContext } from '../contexts/ButtonNestingContext'\nimport { TextAncestorContext } from '../contexts/TextAncestorContext'\nimport { useMediaListeners } from '../hooks/useMedia'\nimport type { TamaguiProviderProps } from '../types'\nimport { ThemeProvider } from './ThemeProvider'\n\nexport function TamaguiProvider({\n  children,\n  disableInjectCSS,\n  config,\n  ...themePropsProvider\n}: TamaguiProviderProps) {\n  if (isRSC) {\n    return (\n      <span\n        style={{ display: 'contents' }}\n        className={`t_${Object.keys(config.themes)[0] || 'light'}`}\n      >\n        {children}\n      </span>\n    )\n  }\n\n  if (!isWeb || !isServer) {\n    useMediaListeners(config)\n  }\n\n  if (isClient) {\n    // inject CSS if asked to (not SSR compliant)\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useLayoutEffect(() => {\n      if (disableInjectCSS) return\n      const style = document.createElement('style')\n      style.appendChild(document.createTextNode(config.getCSS()))\n      document.head.appendChild(style)\n      return () => {\n        document.head.removeChild(style)\n      }\n    }, [config, disableInjectCSS])\n  }\n\n  return (\n    <ButtonNestingContext.Provider value={false}>\n      <TextAncestorContext.Provider value={false}>\n        <ThemeProvider\n          themeClassNameOnRoot={config.themeClassNameOnRoot}\n          disableRootThemeClass={config.disableRootThemeClass}\n          {...themePropsProvider}\n          defaultTheme={themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0]}\n        >\n          {children}\n        </ThemeProvider>\n      </TextAncestorContext.Provider>\n    </ButtonNestingContext.Provider>\n  )\n}\n"],
+  "mappings": "AAiBM;AAjBN,SAAS,UAAU,OAAO,UAAU,aAAa;AACjD,YAAY,WAAW;AAEvB,SAAS,4BAA4B;AACrC,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAElC,SAAS,qBAAqB;AAEvB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACL,GAAyB;AACvB,MAAI,OAAO;AACT,WACE,oBAAC;AAAA,MACC,OAAO,EAAE,SAAS,WAAW;AAAA,MAC7B,WAAW,KAAK,OAAO,KAAK,OAAO,MAAM,EAAE,MAAM;AAAA,MAEhD;AAAA,KACH;AAAA,EAEJ;AAEA,MAAI,CAAC,SAAS,CAAC,UAAU;AACvB,sBAAkB,MAAM;AAAA,EAC1B;AAEA,MAAI,UAAU;AAGZ,UAAM,gBAAgB,MAAM;AAC1B,UAAI;AAAkB;AACtB,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,YAAY,SAAS,eAAe,OAAO,OAAO,CAAC,CAAC;AAC1D,eAAS,KAAK,YAAY,KAAK;AAC/B,aAAO,MAAM;AACX,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,QAAQ,gBAAgB,CAAC;AAAA,EAC/B;AAEA,SACE,oBAAC,qBAAqB,UAArB;AAAA,IAA8B,OAAO;AAAA,IACpC,8BAAC,oBAAoB,UAApB;AAAA,MAA6B,OAAO;AAAA,MACnC,8BAAC;AAAA,QACC,sBAAsB,OAAO;AAAA,QAC7B,uBAAuB,OAAO;AAAA,QAC7B,GAAG;AAAA,QACJ,cAAc,mBAAmB,gBAAgB,OAAO,KAAK,OAAO,MAAM,EAAE;AAAA,QAE3E;AAAA,OACH;AAAA,KACF;AAAA,GACF;AAEJ;",
   "names": []
 }

package/dist/esm/views/Theme.js

@@ -1,48 +1,59 @@
 import { jsx } from "react/jsx-runtime";
 import { isWeb } from "@tamagui/constants";
-import React, { memo, useMemo } from "react";
+import React, { useMemo } from "react";
 import { variableToString } from "../createVariable";
-import { ThemeManagerContext } from "../helpers/ThemeManager";
+import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
 import { useChangeThemeEffect } from "../hooks/useTheme";
-React["createElement"];
-const Theme = memo(function Theme2(props) {
-  var _a;
-  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(
-    props.name,
-    props.componentName,
-    props
+function Theme(props) {
+  if (props.disable) {
+    return props.children;
+  }
+  const isRoot = !!props["_isRoot"];
+  const { name, theme, themeManager, themes, isNewTheme, className } = useChangeThemeEffect(
+    props,
+    isRoot
   );
+  const disableThemeClass = props.disableThemeClass;
   const missingTheme = !themes || !name || !theme;
-  const contents = useMemo(
-    () => missingTheme ? null : wrapThemeManagerContext(props.children, themeManager),
-    [missingTheme, props.children, themeManager]
-  );
-  if (missingTheme) {
-    if (name && !theme && process.env.NODE_ENV === "development") {
-      console.warn(`No theme found by name ${name}`);
-    }
+  const disablePassingTheme = missingTheme || !isNewTheme;
+  let contents = useMemo(() => {
+    const next = props["data-themeable"] ? React.cloneElement(props.children, { ["data-themeable"]: true }) : props.children;
+    return disablePassingTheme ? next : wrapThemeManagerContext(next, themeManager);
+  }, [disablePassingTheme, props.children, themeManager]);
+  if (process.env.NODE_ENV === "development" && missingTheme) {
+    name && !theme && console.warn(`No theme found by name ${name}`);
     return props.children;
   }
+  if (disableThemeClass || disablePassingTheme) {
+    return contents;
+  }
   if (isWeb) {
-    return /* @__PURE__ */ jsx("span", {
-      className: (!props.disableThemeClass ? [props.className, className].filter(Boolean) : []).join(" "),
+    const cn = [props.className, className, "_dsp_contents"].filter(Boolean).join(" ");
+    contents = /* @__PURE__ */ jsx("span", {
+      className: cn,
       style: {
-        display: "contents",
-        color: variableToString((_a = themes[name]) == null ? void 0 : _a.color)
+        color: variableToString(theme == null ? void 0 : theme.color)
       },
       children: contents
     });
   }
   return contents;
-});
-function wrapThemeManagerContext(children, themeManager, shouldSetChildrenThemeToParent) {
-  return themeManager ? /* @__PURE__ */ jsx(ThemeManagerContext.Provider, {
+}
+function wrapThemeManagerContext(children, themeManager, shouldReset) {
+  if (!themeManager) {
+    return children;
+  }
+  let next = children;
+  if (shouldReset && themeManager) {
+    next = /* @__PURE__ */ jsx(Theme, {
+      name: themeManager.state.parentName,
+      children: next
+    });
+  }
+  return /* @__PURE__ */ jsx(ThemeManagerContext.Provider, {
     value: themeManager,
-    children: shouldSetChildrenThemeToParent ? /* @__PURE__ */ jsx(Theme, {
-      name: themeManager.parentName,
-      children
-    }) : children
-  }) : children;
+    children: next
+  });
 }
 export {
   Theme,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport React, { memo, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManager, ThemeManagerContext } from '../helpers/ThemeManager'\nimport { ThemeProps, useChangeThemeEffect } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\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  const missingTheme = !themes || !name || !theme\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    () => (missingTheme ? null : wrapThemeManagerContext(props.children, themeManager)),\n    [missingTheme, props.children, themeManager]\n  )\n\n  if (missingTheme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  if (isWeb) {\n    return (\n      <span\n        className={(!props.disableThemeClass\n          ? [props.className, className].filter(Boolean)\n          : []\n        ).join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: variableToString(themes[name]?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n\nexport function wrapThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldSetChildrenThemeToParent?: boolean\n) {\n  return themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {shouldSetChildrenThemeToParent ? (\n        <Theme name={themeManager.parentName}>{children}</Theme>\n      ) : (\n        children\n      )}\n    </ThemeManagerContext.Provider>\n  ) : (\n    children\n  )\n}\n"],
-  "mappings": "AAoCM;AApCN,SAAS,aAAa;AACtB,OAAO,SAAS,MAAM,eAAe;AAErC,SAAS,wBAAwB;AACjC,SAAuB,2BAA2B;AAClD,SAAqB,4BAA4B;AAGjD,MAAM;AAEC,MAAM,QAAQ,KAAK,SAASA,OAAM,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,UAAU,IAAI;AAAA,IACvD,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACF;AAEA,QAAM,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;AAI1C,QAAM,WAAW;AAAA,IACf,MAAO,eAAe,OAAO,wBAAwB,MAAM,UAAU,YAAY;AAAA,IACjF,CAAC,cAAc,MAAM,UAAU,YAAY;AAAA,EAC7C;AAEA,MAAI,cAAc;AAChB,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAE5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,OAAO;AACT,WACE,oBAAC;AAAA,MACC,YAAY,CAAC,MAAM,oBACf,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAC3C,CAAC,GACH,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,kBAAiB,YAAO,UAAP,mBAAc,KAAK;AAAA,MAC7C;AAAA,MAEC;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT,CAAC;AAEM,SAAS,wBACd,UACA,cACA,gCACA;AACA,SAAO,eACL,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IAClC,2CACC,oBAAC;AAAA,MAAM,MAAM,aAAa;AAAA,MAAa;AAAA,KAAS,IAEhD;AAAA,GAEJ,IAEA;AAEJ;",
-  "names": ["Theme"]
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport React, { useMemo } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManager } from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error its a permanent prop meant for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, themes, isNewTheme, className } = useChangeThemeEffect(\n    props,\n    isRoot\n  )\n\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !themes || !name || !theme\n  const disablePassingTheme = missingTheme || !isNewTheme\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  let contents = useMemo(() => {\n    const next = props['data-themeable']\n      ? React.cloneElement(props.children, { ['data-themeable']: true })\n      : props.children\n\n    return disablePassingTheme ? next : wrapThemeManagerContext(next, themeManager)\n  }, [disablePassingTheme, props.children, themeManager])\n\n  if (process.env.NODE_ENV === 'development' && missingTheme) {\n    // eslint-disable-next-line no-console\n    name && !theme && console.warn(`No theme found by name ${name}`)\n    return props.children\n  }\n\n  if (disableThemeClass || disablePassingTheme) {\n    return contents\n  }\n\n  if (isWeb) {\n    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')\n    contents = (\n      <span\n        className={cn}\n        style={{\n          // in order to provide currentColor, set color by default\n          color: variableToString(theme?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n}\n\nexport function wrapThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldReset?: boolean\n) {\n  // be sure to memoize themeManager to avoid reparenting\n  if (!themeManager) {\n    return children\n  }\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n  // TODO likely not necessary if we do reset logic now in useTheme?\n  // reset to parent theme\n  if (shouldReset && themeManager) {\n    next = <Theme name={themeManager.state.parentName}>{next}</Theme>\n  }\n  return <ThemeManagerContext.Provider value={themeManager}>{next}</ThemeManagerContext.Provider>\n}\n"],
+  "mappings": "AAgDM;AAhDN,SAAS,aAAa;AACtB,OAAO,SAAS,eAAe;AAE/B,SAAS,wBAAwB;AAEjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAG9B,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM;AACvB,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,YAAY,UAAU,IAAI;AAAA,IACnE;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;AAC1C,QAAM,sBAAsB,gBAAgB,CAAC;AAI7C,MAAI,WAAW,QAAQ,MAAM;AAC3B,UAAM,OAAO,MAAM,oBACf,MAAM,aAAa,MAAM,UAAU,EAAE,CAAC,mBAAmB,KAAK,CAAC,IAC/D,MAAM;AAEV,WAAO,sBAAsB,OAAO,wBAAwB,MAAM,YAAY;AAAA,EAChF,GAAG,CAAC,qBAAqB,MAAM,UAAU,YAAY,CAAC;AAEtD,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,qBAAqB;AAC5C,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,oBAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,OAAO,iBAAiB,+BAAO,KAAK;AAAA,MACtC;AAAA,MAEC;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEO,SAAS,wBACd,UACA,cACA,aACA;AAEA,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AAGX,MAAI,eAAe,cAAc;AAC/B,WAAO,oBAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SAAO,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IAAe;AAAA,GAAK;AAClE;",
+  "names": []
 }

package/dist/esm/views/ThemeInverse.js

@@ -10,12 +10,14 @@ const useThemeInverse = (props = {}) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
   const [name, setName] = useState(null);
+  const curName = themeName || defaultTheme || "";
   if (isWeb) {
     useIsomorphicLayoutEffect(() => {
-      setName(toggleTheme(themeName || defaultTheme || ""));
+      setName(toggleTheme(curName));
     }, [defaultTheme, themeName]);
+    return props.disable ? null : name;
   }
-  return props.disable ? null : name;
+  return props.disable ? null : toggleTheme(curName);
 };
 const ThemeInverse = ({
   children,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport type ThemeInverseProps = {\n  disable?: boolean\n}\n\nconst toggleTheme = (themeName: string) => {\n  return themeName.startsWith('light') ? 'dark' : 'light'\n}\n\nexport const useThemeInverse = (props: ThemeInverseProps = {}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  if (isWeb) {\n    // for SSR must be in effect\n    useIsomorphicLayoutEffect(() => {\n      setName(toggleTheme(themeName || defaultTheme || ''))\n    }, [defaultTheme, themeName])\n  }\n\n  return props.disable ? null : name\n}\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: ThemeInverseProps & {\n  children: React.ReactNode\n}) => {\n  const inverseTheme = useThemeInverse({\n    disable,\n  })\n  return <Theme name={inverseTheme}>{children}</Theme>\n}\n"],
-  "mappings": "AAsCS;AAtCT,SAAS,OAAO,iCAAiC;AACjD,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAMtB,MAAM,cAAc,CAAC,cAAsB;AACzC,SAAO,UAAU,WAAW,OAAO,IAAI,SAAS;AAClD;AAEO,MAAM,kBAAkB,CAAC,QAA2B,CAAC,MAAM;AAChE,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAEpD,MAAI,OAAO;AAET,8BAA0B,MAAM;AAC9B,cAAQ,YAAY,aAAa,gBAAgB,EAAE,CAAC;AAAA,IACtD,GAAG,CAAC,cAAc,SAAS,CAAC;AAAA,EAC9B;AAEA,SAAO,MAAM,UAAU,OAAO;AAChC;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAEM;AACJ,QAAM,eAAe,gBAAgB;AAAA,IACnC;AAAA,EACF,CAAC;AACD,SAAO,oBAAC;AAAA,IAAM,MAAM;AAAA,IAAe;AAAA,GAAS;AAC9C;",
+  "sourcesContent": ["import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport type ThemeInverseProps = {\n  disable?: boolean\n}\n\nconst toggleTheme = (themeName: string) => {\n  return themeName.startsWith('light') ? 'dark' : 'light'\n}\n\nexport const useThemeInverse = (props: ThemeInverseProps = {}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n  const curName = themeName || defaultTheme || ''\n\n  if (isWeb) {\n    // for SSR must be in effect\n    useIsomorphicLayoutEffect(() => {\n      setName(toggleTheme(curName))\n    }, [defaultTheme, themeName])\n\n    return props.disable ? null : name\n  }\n\n  return props.disable ? null : toggleTheme(curName)\n}\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: ThemeInverseProps & {\n  children: React.ReactNode\n}) => {\n  const inverseTheme = useThemeInverse({\n    disable,\n  })\n  return <Theme name={inverseTheme}>{children}</Theme>\n}\n"],
+  "mappings": "AAyCS;AAzCT,SAAS,OAAO,iCAAiC;AACjD,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAMtB,MAAM,cAAc,CAAC,cAAsB;AACzC,SAAO,UAAU,WAAW,OAAO,IAAI,SAAS;AAClD;AAEO,MAAM,kBAAkB,CAAC,QAA2B,CAAC,MAAM;AAChE,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AACpD,QAAM,UAAU,aAAa,gBAAgB;AAE7C,MAAI,OAAO;AAET,8BAA0B,MAAM;AAC9B,cAAQ,YAAY,OAAO,CAAC;AAAA,IAC9B,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,WAAO,MAAM,UAAU,OAAO;AAAA,EAChC;AAEA,SAAO,MAAM,UAAU,OAAO,YAAY,OAAO;AACnD;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAEM;AACJ,QAAM,eAAe,gBAAgB;AAAA,IACnC;AAAA,EACF,CAAC;AACD,SAAO,oBAAC;AAAA,IAAM,MAAM;AAAA,IAAe;AAAA,GAAS;AAC9C;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -1,22 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { isClient } from "@tamagui/constants";
-import React, { useLayoutEffect, useMemo } from "react";
-import { getConfig, getHasConfigured } from "../config";
+import { useLayoutEffect } from "react";
 import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
-import { ThemeContext } from "../contexts/ThemeContext";
 import { Theme } from "./Theme";
-React["createElement"];
 const ThemeProvider = (props) => {
-  if (process.env.NODE_ENV === "development") {
-    if (!getHasConfigured()) {
-      throw new Error(`Missing configureThemes() call, add to your root file`);
-    }
-  }
   if (isClient) {
     useLayoutEffect(() => {
-      if (props.disableRootThemeClass) {
+      if (props.disableRootThemeClass)
         return;
-      }
       const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`;
       const target = props.themeClassNameOnRoot ? document.documentElement : document.body;
       target.classList.add(cn);
@@ -25,22 +16,12 @@ const ThemeProvider = (props) => {
       };
     }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]);
   }
-  const themeContext = useMemo(() => {
-    return {
-      get themes() {
-        return getConfig().themes;
-      },
-      defaultTheme: props.defaultTheme
-    };
-  }, [props.defaultTheme]);
-  return /* @__PURE__ */ jsx(ThemeContext.Provider, {
-    value: themeContext,
-    children: /* @__PURE__ */ jsx(Theme, {
-      className: props.className,
-      name: props.defaultTheme,
-      disableThemeClass: props.disableRootThemeClass,
-      children: props.children
-    })
+  return /* @__PURE__ */ jsx(Theme, {
+    className: props.className,
+    name: props.defaultTheme,
+    disableThemeClass: props.disableRootThemeClass,
+    _isRoot: true,
+    children: props.children
   });
 };
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getConfig, getHasConfigured } from '../config'\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (!getHasConfigured()) {\n      throw new Error(`Missing configureThemes() call, add to your root file`)\n    }\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) {\n        return\n      }\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  const themeContext = useMemo(() => {\n    return {\n      get themes() {\n        return getConfig().themes\n      },\n      defaultTheme: props.defaultTheme,\n    }\n  }, [props.defaultTheme])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n      >\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
-  "mappings": "AAqDM;AArDN,SAAS,gBAAgB;AACzB,OAAO,SAAS,iBAAiB,eAAe;AAEhD,SAAS,WAAW,wBAAwB;AAC5C,SAAS,8BAA8B;AACvC,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAGtB,MAAM;AAWC,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,iBAAiB,GAAG;AACvB,YAAM,IAAI,MAAM,uDAAuD;AAAA,IACzE;AAAA,EACF;AAGA,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM,uBAAuB;AAC/B;AAAA,MACF;AACA,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO;AAAA,MACL,IAAI,SAAS;AACX,eAAO,UAAU,EAAE;AAAA,MACrB;AAAA,MACA,cAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,YAAY,CAAC;AAEvB,SACE,oBAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,IAC5B,8BAAC;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MAExB,gBAAM;AAAA,KACT;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { useLayoutEffect } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Theme } from './Theme'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <Theme\n      className={props.className}\n      name={props.defaultTheme}\n      disableThemeClass={props.disableRootThemeClass}\n      // @ts-expect-error\n      _isRoot\n    >\n      {props.children}\n    </Theme>\n  )\n}\n"],
+  "mappings": "AA8BI;AA9BJ,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAEhC,SAAS,8BAA8B;AACvC,SAAS,aAAa;AAWf,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,SACE,oBAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,mBAAmB,MAAM;AAAA,IAEzB,SAAO;AAAA,IAEN,gBAAM;AAAA,GACT;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.219",
+  "version": "1.0.1-beta.221",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -15,7 +15,7 @@
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch",
-    "lint": "eslint",
+    "lint": "eslint src",
     "clean": "tamagui-build clean",
     "clean:build": "tamagui-build clean:build",
     "test": "vitest --run --config ../vite-plugin-internal/src/vite.config.ts"
@@ -28,23 +28,23 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.219",
-    "@tamagui/constants": "^1.0.1-beta.219",
-    "@tamagui/helpers": "^1.0.1-beta.219",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.219",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.219",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.219",
-    "@tamagui/types-react-native": "^1.0.1-beta.219",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.219",
-    "@tamagui/use-event": "^1.0.1-beta.219",
-    "@tamagui/use-force-update": "^1.0.1-beta.219"
+    "@tamagui/compose-refs": "^1.0.1-beta.221",
+    "@tamagui/constants": "^1.0.1-beta.221",
+    "@tamagui/helpers": "^1.0.1-beta.221",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.221",
+    "@tamagui/react-native-use-pressable": "^1.0.1-beta.221",
+    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.221",
+    "@tamagui/types-react-native": "^1.0.1-beta.221",
+    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.221",
+    "@tamagui/use-event": "^1.0.1-beta.221",
+    "@tamagui/use-force-update": "^1.0.1-beta.221"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.219",
+    "@tamagui/build": "^1.0.1-beta.221",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",