@tamagui/core 1.0.0-beta.202 → 1.0.0-beta.203

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, StackPropsBase } from '../types'\n\nexport const Stack = createComponent<StackProps, View, StackPropsBase>({\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,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, 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  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,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,11 +3,11 @@ 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 { 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}`);
@@ -16,8 +16,11 @@ const Theme = memo(/* @__PURE__ */ __name(function Theme2(props) {
   }
   const contents = useMemo(() => wrapThemeManagerContext(props.children, themeManager), [props.children, themeManager]);
   if (isWeb) {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: props.disableThemeClass ? "" : 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  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 (isWeb) {\n    return (\n      <div\n        className={\n          props.disableThemeClass\n            ? ''\n            : props.className\n            ? `${className || ''} ${props.className || ''}`\n            : 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;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,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WACE,MAAM,oBACF,KACA,MAAM,YACN,GAAG,aAAa,MAAM,MAAM,aAAa,OACzC,aAAa;AAAA,MAEnB,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GA3C0B,QA2CzB;",
+  "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 (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,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,GAxC0B,QAwCzB;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -20,7 +20,7 @@ const ThemeProvider = /* @__PURE__ */ __name((props) => {
       return () => {
         document.body.classList.remove(cn);
       };
-    }, []);
+    }, [props.disableRootThemeClass]);
   }
   const themeContext = useMemo(() => {
     return {
@@ -31,6 +31,7 @@ const ThemeProvider = /* @__PURE__ */ __name((props) => {
   return /* @__PURE__ */ React.createElement(ThemeContext.Provider, {
     value: themeContext
   }, /* @__PURE__ */ React.createElement(Theme, {
+    className: props.className,
     name: props.defaultTheme,
     disableThemeClass: props.disableRootThemeClass
   }, props.children));

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getHasConfigured } from '../conf'\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { ThemeContext } from '../ThemeContext'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProviderProps = {\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  children?: any\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (!getHasConfigured()) {\n    throw new Error(`Missing configureThemes() call, add to your root file`)\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) {\n        return\n      }\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      document.body.classList.add(cn)\n      return () => {\n        document.body.classList.remove(cn)\n      }\n    }, [])\n  }\n\n  const themeContext = useMemo(() => {\n    return {\n      themes: props.themes,\n      defaultTheme: props.defaultTheme,\n    }\n  }, [props.themes])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AACA;AAGA,MAAM;AASC,MAAM,gBAAgB,wBAAC,UAA8B;AAC1D,MAAI,CAAC,iBAAiB,GAAG;AACvB,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAGA,MAAI,OAAO,aAAa,aAAa;AACnC,oBAAgB,MAAM;AACpB,UAAI,MAAM,uBAAuB;AAC/B;AAAA,MACF;AACA,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,eAAS,KAAK,UAAU,IAAI,EAAE;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,UAAU,OAAO,EAAE;AAAA,MACnC;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO;AAAA,MACL,QAAQ,MAAM;AAAA,MACd,cAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,SACE,oCAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,KAC5B,oCAAC;AAAA,IAAM,MAAM,MAAM;AAAA,IAAc,mBAAmB,MAAM;AAAA,KACvD,MAAM,QACT,CACF;AAEJ,GAjC6B;",
+  "sourcesContent": ["import React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getHasConfigured } from '../conf'\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { ThemeContext } from '../ThemeContext'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProviderProps = {\n  className?: string\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  children?: any\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (!getHasConfigured()) {\n    throw new Error(`Missing configureThemes() call, add to your root file`)\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) {\n        return\n      }\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      document.body.classList.add(cn)\n      return () => {\n        document.body.classList.remove(cn)\n      }\n    }, [props.disableRootThemeClass])\n  }\n\n  const themeContext = useMemo(() => {\n    return {\n      themes: props.themes,\n      defaultTheme: props.defaultTheme,\n    }\n  }, [props.themes])\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": ";;AAAA;AAEA;AACA;AACA;AACA;AAGA,MAAM;AAUC,MAAM,gBAAgB,wBAAC,UAA8B;AAC1D,MAAI,CAAC,iBAAiB,GAAG;AACvB,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAGA,MAAI,OAAO,aAAa,aAAa;AACnC,oBAAgB,MAAM;AACpB,UAAI,MAAM,uBAAuB;AAC/B;AAAA,MACF;AACA,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,eAAS,KAAK,UAAU,IAAI,EAAE;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,UAAU,OAAO,EAAE;AAAA,MACnC;AAAA,IACF,GAAG,CAAC,MAAM,qBAAqB,CAAC;AAAA,EAClC;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO;AAAA,MACL,QAAQ,MAAM;AAAA,MACd,cAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,SACE,oCAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,KAC5B,oCAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,mBAAmB,MAAM;AAAA,KAExB,MAAM,QACT,CACF;AAEJ,GArC6B;",
   "names": []
 }

package/dist/jsx/Tamagui.js

@@ -1,11 +1,19 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as Helpers from "@tamagui/helpers";
+import { getConfig } from "./conf";
 import { rnw } from "./constants/rnw";
-import { getAllSelectors, getAllTransforms } from "./helpers/insertStyleRule";
+import { getAllSelectors, getAllTransforms, getInsertedRules } from "./helpers/insertStyleRule";
 class TamaguiManager {
   constructor() {
-    this.config = null;
     this.rnw = rnw;
+    this.Helpers = Helpers;
+  }
+  get config() {
+    return getConfig();
+  }
+  get insertedRules() {
+    return getInsertedRules();
   }
   get allSelectors() {
     return getAllSelectors();

package/dist/jsx/ThemeManager.js

@@ -16,9 +16,9 @@ var __privateMethod = (obj, member, method) => {
 var _getClassName, getClassName_fn;
 import { createContext } from "react";
 import { getThemes } from "./conf";
-import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "./static";
+import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "./constants/constants";
 class ThemeManager {
-  constructor(name = null, theme = null, parentManager = null) {
+  constructor(name = "", theme = null, parentManager = null) {
     this.name = name;
     this.theme = theme;
     this.parentManager = parentManager;
@@ -76,7 +76,7 @@ class ThemeManager {
       return false;
     }
     this.className = className || null;
-    this.name = name || null;
+    this.name = name || "";
     this.theme = theme;
     this.notifyListeners();
     return true;
@@ -85,10 +85,14 @@ class ThemeManager {
     const { themes = getThemes(), name, componentName } = opts;
     if (!name) {
       if (componentName) {
-        const name2 = `${this.name}_${componentName}`;
-        const theme2 = themes[name2];
-        if (theme2) {
-          return { name: name2, theme: theme2, className: __privateMethod(this, _getClassName, getClassName_fn).call(this, name2) };
+        const names = [
+          `${this.name}_${componentName}`,
+          `${withoutComponentName(this.name)}_${componentName}`
+        ];
+        for (const name2 of names) {
+          if (name2 in themes) {
+            return { name: name2, theme: themes[name2], className: __privateMethod(this, _getClassName, getClassName_fn).call(this, name2) };
+          }
         }
       }
       return {
@@ -113,9 +117,14 @@ class ThemeManager {
       parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR));
     }
     if (componentName) {
-      const componentThemeName = `${nextName}_${componentName}`;
-      if (componentThemeName in themes) {
-        nextName = componentThemeName;
+      const names = [
+        `${nextName}_${componentName}`,
+        `${withoutComponentName(nextName)}_${componentName}`
+      ];
+      for (const name2 of names) {
+        if (name2 in themes) {
+          nextName = name2;
+        }
       }
     }
     let theme = themes[nextName];
@@ -123,7 +132,7 @@ class ThemeManager {
       theme = themes[`light_${nextName}`];
     }
     if (process.env.NODE_ENV === "development" && props && props["debug"]) {
-      console.log("getNextTheme", { opts, nextName, parentName }, this);
+      console.log("getNextTheme", { name: opts.name, nextName, parentName });
     }
     return {
       name: nextName,
@@ -169,6 +178,7 @@ getClassName_fn = /* @__PURE__ */ __name(function(name) {
 }, "#getClassName");
 const ThemeManagerContext = createContext(null);
 const emptyManager = new ThemeManager();
+const withoutComponentName = /* @__PURE__ */ __name((name) => name.replace(/\_[A-Z][a-z]+$/, ""), "withoutComponentName");
 export {
   ThemeManager,
   ThemeManagerContext,

package/dist/jsx/conf.js

@@ -21,7 +21,6 @@ const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
     configListeners.add(cb);
   }
   if (!globalThis["Tamagui"]) {
-    Tamagui.config = conf;
     globalThis["Tamagui"] = Tamagui;
   }
 }, "onConfiguredOnce");

package/dist/jsx/constants/platform.js

@@ -5,6 +5,7 @@ const isAndroid = ((_a = Platform) == null ? void 0 : _a.OS) === "android";
 const isIOS = ((_b = Platform) == null ? void 0 : _b.OS) === "ios";
 const isWeb = process.env.TAMAGUI_TARGET !== "native" && (process.env.TAMAGUI_TARGET === "web" || ((_c = Platform) == null ? void 0 : _c.OS) === "web");
 const isSSR = isWeb && typeof window === "undefined";
+const isClient = isWeb && typeof window !== "undefined";
 const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
 const isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
 const supportsTouchWeb = typeof window !== "undefined" && "ontouchstart" in window;
@@ -13,6 +14,7 @@ const isWebIOS = isWeb && typeof navigator !== "undefined" && (/iPad|iPhone|iPod
 export {
   isAndroid,
   isChrome,
+  isClient,
   isIOS,
   isSSR,
   isTouchDevice,