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

package/dist/cjs/helpers/themeable.js

@@ -35,19 +35,14 @@ function themeable(component, opts) {
   const withThemeComponent = (0, import_react.forwardRef)(function WithTheme(props, ref) {
     const { themeInverse, theme, ...rest } = props;
     const element = import_react.default.createElement(component, { ...rest, ref });
-    if (themeInverse) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeInverse.ThemeInverse, {
-        children: element
-      });
-    }
-    if (theme || opts) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeInverse.ThemeInverse, {
+      disable: !themeInverse,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
         componentName: opts == null ? void 0 : opts.componentName,
         name: theme || null,
         children: element
-      });
-    }
-    return element;
+      })
+    });
   });
   const withTheme = withThemeComponent;
   withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themeable.tsx"],
-  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {\n    const { themeInverse, theme, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n    if (themeInverse) {\n      return <ThemeInverse>{element}</ThemeInverse>\n    }\n    if (theme || opts) {\n      return (\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      )\n    }\n    return element\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBa;AAnBb,mBAAkC;AAGlC,mBAAsB;AACtB,0BAA6B;AAOtB,SAAS,UACd,WACA,MACA;AACA,QAAM,yBAAqB,yBAAW,SAAS,UAAU,OAAY,KAAK;AACxE,UAAM,EAAE,cAAc,UAAU,KAAK,IAAI;AACzC,UAAM,UAAU,aAAAA,QAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AACtE,QAAI,cAAc;AAChB,aAAO,4CAAC;AAAA,QAAc;AAAA,OAAQ;AAAA,IAChC;AACA,QAAI,SAAS,MAAM;AACjB,aACE,4CAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,QAChE;AAAA,OACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
+  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {\n    const { themeInverse, theme, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n    return (\n      <ThemeInverse disable={!themeInverse}>\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      </ThemeInverse>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBQ;AApBR,mBAAkC;AAGlC,mBAAsB;AACtB,0BAA6B;AAOtB,SAAS,UACd,WACA,MACA;AACA,QAAM,yBAAqB,yBAAW,SAAS,UAAU,OAAY,KAAK;AACxE,UAAM,EAAE,cAAc,UAAU,KAAK,IAAI;AACzC,UAAM,UAAU,aAAAA,QAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AACtE,WACE,4CAAC;AAAA,MAAa,SAAS,CAAC;AAAA,MACtB,sDAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,QAChE;AAAA,OACH;AAAA,KACF;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
   "names": ["React"]
 }

package/dist/cjs/views/ThemeInverse.js

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ThemeInverse_exports = {};
 __export(ThemeInverse_exports, {
-  ThemeInverse: () => ThemeInverse
+  ThemeInverse: () => ThemeInverse,
+  useThemeInverse: () => useThemeInverse
 });
 module.exports = __toCommonJS(ThemeInverse_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -26,30 +27,35 @@ var import_constants = require("@tamagui/constants");
 var import_react = require("react");
 var import_useTheme = require("../hooks/useTheme");
 var import_Theme = require("./Theme");
-const ThemeInverse = ({
-  children,
-  disable
-}) => {
+const toggleTheme = (themeName) => {
+  return themeName.startsWith("light") ? "dark" : "light";
+};
+const useThemeInverse = (props = {}) => {
   const themeName = (0, import_useTheme.useThemeName)();
   const defaultTheme = (0, import_useTheme.useDefaultThemeName)();
   const [name, setName] = (0, import_react.useState)(null);
-  (0, import_constants.useIsomorphicLayoutEffect)(() => {
-    if (themeName.startsWith("dark")) {
-      setName("light");
-    } else if (themeName.startsWith("light")) {
-      setName("dark");
-    }
-  }, [defaultTheme, themeName]);
-  if (disable) {
-    return children;
+  if (import_constants.isWeb) {
+    (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      setName(toggleTheme(themeName || defaultTheme || ""));
+    }, [defaultTheme, themeName]);
   }
+  return props.disable ? null : name;
+};
+const ThemeInverse = ({
+  children,
+  disable
+}) => {
+  const inverseTheme = useThemeInverse({
+    disable
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
-    name,
+    name: inverseTheme,
     children
   });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ThemeInverse
+  ThemeInverse,
+  useThemeInverse
 });
 //# sourceMappingURL=ThemeInverse.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    } else if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BS;AA9BT,uBAA0C;AAC1C,mBAAgC;AAEhC,sBAAkD;AAClD,mBAAsB;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,gBAAY,8BAAa;AAC/B,QAAM,mBAAe,qCAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAwB,IAAI;AAGpD,kDAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB,WAAW,UAAU,WAAW,OAAO,GAAG;AACxC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,4CAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
+  "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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCS;AAtCT,uBAAiD;AACjD,mBAAgC;AAEhC,sBAAkD;AAClD,mBAAsB;AAMtB,MAAM,cAAc,CAAC,cAAsB;AACzC,SAAO,UAAU,WAAW,OAAO,IAAI,SAAS;AAClD;AAEO,MAAM,kBAAkB,CAAC,QAA2B,CAAC,MAAM;AAChE,QAAM,gBAAY,8BAAa;AAC/B,QAAM,mBAAe,qCAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAwB,IAAI;AAEpD,MAAI,wBAAO;AAET,oDAA0B,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,4CAAC;AAAA,IAAM,MAAM;AAAA,IAAe;AAAA,GAAS;AAC9C;",
   "names": []
 }

package/dist/esm/helpers/themeable.js

@@ -6,19 +6,14 @@ function themeable(component, opts) {
   const withThemeComponent = forwardRef(function WithTheme(props, ref) {
     const { themeInverse, theme, ...rest } = props;
     const element = React.createElement(component, { ...rest, ref });
-    if (themeInverse) {
-      return /* @__PURE__ */ jsx(ThemeInverse, {
-        children: element
-      });
-    }
-    if (theme || opts) {
-      return /* @__PURE__ */ jsx(Theme, {
+    return /* @__PURE__ */ jsx(ThemeInverse, {
+      disable: !themeInverse,
+      children: /* @__PURE__ */ jsx(Theme, {
         componentName: opts == null ? void 0 : opts.componentName,
         name: theme || null,
         children: element
-      });
-    }
-    return element;
+      })
+    });
   });
   const withTheme = withThemeComponent;
   withTheme.displayName = `Themed(${(component == null ? void 0 : component.displayName) || (component == null ? void 0 : component.name) || "Anonymous"})`;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/themeable.tsx"],
-  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {\n    const { themeInverse, theme, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n    if (themeInverse) {\n      return <ThemeInverse>{element}</ThemeInverse>\n    }\n    if (theme || opts) {\n      return (\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      )\n    }\n    return element\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
-  "mappings": "AAmBa;AAnBb,OAAO,SAAS,kBAAkB;AAGlC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAOtB,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAY,KAAK;AACxE,UAAM,EAAE,cAAc,UAAU,KAAK,IAAI;AACzC,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AACtE,QAAI,cAAc;AAChB,aAAO,oBAAC;AAAA,QAAc;AAAA,OAAQ;AAAA,IAChC;AACA,QAAI,SAAS,MAAM;AACjB,aACE,oBAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,QAChE;AAAA,OACH;AAAA,IAEJ;AACA,WAAO;AAAA,EACT,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
+  "sourcesContent": ["import React, { forwardRef } from 'react'\n\nimport { ThemeName } from '../types'\nimport { Theme } from '../views/Theme'\nimport { ThemeInverse } from '../views/ThemeInverse'\n\nexport interface ThemeableProps {\n  theme?: ThemeName | null\n  themeInverse?: boolean\n}\n\nexport function themeable<Component extends (props: any) => any>(\n  component: Component,\n  opts?: { componentName?: string }\n) {\n  const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {\n    const { themeInverse, theme, ...rest } = props\n    const element = React.createElement(component, { ...rest, ref } as any)\n    return (\n      <ThemeInverse disable={!themeInverse}>\n        <Theme componentName={opts?.componentName} name={(theme as any) || null}>\n          {element}\n        </Theme>\n      </ThemeInverse>\n    )\n  })\n\n  const withTheme: any = withThemeComponent\n  withTheme.displayName = `Themed(${\n    (component as any)?.displayName || (component as any)?.name || 'Anonymous'\n  })`\n\n  return withTheme as Component extends (props: infer P) => infer R\n    ? (props: Omit<P, 'theme' | 'themeInverse'> & ThemeableProps) => R\n    : unknown\n}\n"],
+  "mappings": "AAoBQ;AApBR,OAAO,SAAS,kBAAkB;AAGlC,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAOtB,SAAS,UACd,WACA,MACA;AACA,QAAM,qBAAqB,WAAW,SAAS,UAAU,OAAY,KAAK;AACxE,UAAM,EAAE,cAAc,UAAU,KAAK,IAAI;AACzC,UAAM,UAAU,MAAM,cAAc,WAAW,EAAE,GAAG,MAAM,IAAI,CAAQ;AACtE,WACE,oBAAC;AAAA,MAAa,SAAS,CAAC;AAAA,MACtB,8BAAC;AAAA,QAAM,eAAe,6BAAM;AAAA,QAAe,MAAO,SAAiB;AAAA,QAChE;AAAA,OACH;AAAA,KACF;AAAA,EAEJ,CAAC;AAED,QAAM,YAAiB;AACvB,YAAU,cAAc,WACrB,uCAAmB,iBAAgB,uCAAmB,SAAQ;AAGjE,SAAO;AAGT;",
   "names": []
 }

package/dist/esm/views/ThemeInverse.js

@@ -1,31 +1,36 @@
 import { jsx } from "react/jsx-runtime";
-import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import { useState } from "react";
 import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
 import { Theme } from "./Theme";
-const ThemeInverse = ({
-  children,
-  disable
-}) => {
+const toggleTheme = (themeName) => {
+  return themeName.startsWith("light") ? "dark" : "light";
+};
+const useThemeInverse = (props = {}) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
   const [name, setName] = useState(null);
-  useIsomorphicLayoutEffect(() => {
-    if (themeName.startsWith("dark")) {
-      setName("light");
-    } else if (themeName.startsWith("light")) {
-      setName("dark");
-    }
-  }, [defaultTheme, themeName]);
-  if (disable) {
-    return children;
+  if (isWeb) {
+    useIsomorphicLayoutEffect(() => {
+      setName(toggleTheme(themeName || defaultTheme || ""));
+    }, [defaultTheme, themeName]);
   }
+  return props.disable ? null : name;
+};
+const ThemeInverse = ({
+  children,
+  disable
+}) => {
+  const inverseTheme = useThemeInverse({
+    disable
+  });
   return /* @__PURE__ */ jsx(Theme, {
-    name,
+    name: inverseTheme,
     children
   });
 };
 export {
-  ThemeInverse
+  ThemeInverse,
+  useThemeInverse
 };
 //# sourceMappingURL=ThemeInverse.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import { useIsomorphicLayoutEffect } from '@tamagui/constants'\nimport React, { useState } from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\nexport const ThemeInverse = ({\n  children,\n  disable,\n}: {\n  children: React.ReactNode\n  disable?: boolean\n}) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const [name, setName] = useState<null | string>(null)\n\n  // ssr\n  useIsomorphicLayoutEffect(() => {\n    if (themeName.startsWith('dark')) {\n      setName('light')\n    } else if (themeName.startsWith('light')) {\n      setName('dark')\n    }\n  }, [defaultTheme, themeName])\n\n  if (disable) {\n    return children as JSX.Element\n  }\n\n  return <Theme name={name}>{children}</Theme>\n}\n"],
-  "mappings": "AA8BS;AA9BT,SAAS,iCAAiC;AAC1C,SAAgB,gBAAgB;AAEhC,SAAS,qBAAqB,oBAAoB;AAClD,SAAS,aAAa;AAEf,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AACF,MAGM;AACJ,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB,WAAW,UAAU,WAAW,OAAO,GAAG;AACxC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC;AAAA,IAAM;AAAA,IAAa;AAAA,GAAS;AACtC;",
+  "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;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.218",
+  "version": "1.0.1-beta.219",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,23 +28,23 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.218",
-    "@tamagui/constants": "^1.0.1-beta.218",
-    "@tamagui/helpers": "^1.0.1-beta.218",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.218",
-    "@tamagui/react-native-use-pressable": "^1.0.1-beta.218",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-beta.218",
-    "@tamagui/types-react-native": "^1.0.1-beta.218",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-beta.218",
-    "@tamagui/use-event": "^1.0.1-beta.218",
-    "@tamagui/use-force-update": "^1.0.1-beta.218"
+    "@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"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.218",
+    "@tamagui/build": "^1.0.1-beta.219",
     "@types/node": "^16.11.9",
     "@types/react": "^18.0.15",
     "@types/react-native": "^0.69.2",

package/src/helpers/themeable.tsx

@@ -16,17 +16,13 @@ export function themeable<Component extends (props: any) => any>(
   const withThemeComponent = forwardRef(function WithTheme(props: any, ref) {
     const { themeInverse, theme, ...rest } = props
     const element = React.createElement(component, { ...rest, ref } as any)
-    if (themeInverse) {
-      return <ThemeInverse>{element}</ThemeInverse>
-    }
-    if (theme || opts) {
-      return (
+    return (
+      <ThemeInverse disable={!themeInverse}>
         <Theme componentName={opts?.componentName} name={(theme as any) || null}>
           {element}
         </Theme>
-      )
-    }
-    return element
+      </ThemeInverse>
+    )
   })
 
   const withTheme: any = withThemeComponent

package/src/views/ThemeInverse.tsx

@@ -1,32 +1,40 @@
-import { useIsomorphicLayoutEffect } from '@tamagui/constants'
+import { isWeb, useIsomorphicLayoutEffect } from '@tamagui/constants'
 import React, { useState } from 'react'
 
 import { useDefaultThemeName, useThemeName } from '../hooks/useTheme'
 import { Theme } from './Theme'
 
-export const ThemeInverse = ({
-  children,
-  disable,
-}: {
-  children: React.ReactNode
+export type ThemeInverseProps = {
   disable?: boolean
-}) => {
+}
+
+const toggleTheme = (themeName: string) => {
+  return themeName.startsWith('light') ? 'dark' : 'light'
+}
+
+export const useThemeInverse = (props: ThemeInverseProps = {}) => {
   const themeName = useThemeName()
   const defaultTheme = useDefaultThemeName()
   const [name, setName] = useState<null | string>(null)
 
-  // ssr
-  useIsomorphicLayoutEffect(() => {
-    if (themeName.startsWith('dark')) {
-      setName('light')
-    } else if (themeName.startsWith('light')) {
-      setName('dark')
-    }
-  }, [defaultTheme, themeName])
-
-  if (disable) {
-    return children as JSX.Element
+  if (isWeb) {
+    // for SSR must be in effect
+    useIsomorphicLayoutEffect(() => {
+      setName(toggleTheme(themeName || defaultTheme || ''))
+    }, [defaultTheme, themeName])
   }
 
-  return <Theme name={name}>{children}</Theme>
+  return props.disable ? null : name
+}
+
+export const ThemeInverse = ({
+  children,
+  disable,
+}: ThemeInverseProps & {
+  children: React.ReactNode
+}) => {
+  const inverseTheme = useThemeInverse({
+    disable,
+  })
+  return <Theme name={inverseTheme}>{children}</Theme>
 }

package/types/views/ThemeInverse.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
-export declare const ThemeInverse: ({ children, disable, }: {
+export declare type ThemeInverseProps = {
+    disable?: boolean;
+};
+export declare const useThemeInverse: (props?: ThemeInverseProps) => string | null;
+export declare const ThemeInverse: ({ children, disable, }: ThemeInverseProps & {
     children: React.ReactNode;
-    disable?: boolean | undefined;
 }) => JSX.Element;
 //# sourceMappingURL=ThemeInverse.d.ts.map