@tamagui/core 1.0.1-beta.150 → 1.0.1-beta.153

package/dist/esm/views/Theme.js

@@ -1,3 +1,4 @@
+import { jsx } from "react/jsx-runtime";
 import React, { memo, useMemo } from "react";
 import { isWeb } from "../constants/platform";
 import { variableToString } from "../createVariable";
@@ -6,9 +7,16 @@ 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);
+  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(
+    props.name,
+    props.componentName,
+    props
+  );
   const missingTheme = !themes || !name || !theme;
-  const contents = useMemo(() => missingTheme ? null : wrapThemeManagerContext(props.children, themeManager), [missingTheme, props.children, themeManager]);
+  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}`);
@@ -16,22 +24,25 @@ const Theme = memo(function Theme2(props) {
     return props.children;
   }
   if (isWeb) {
-    return /* @__PURE__ */ React.createElement("span", {
+    return /* @__PURE__ */ jsx("span", {
       className: (!props.disableThemeClass ? [props.className, className].filter(Boolean) : []).join(" "),
       style: {
         display: "contents",
         color: variableToString((_a = themes[name]) == null ? void 0 : _a.color)
-      }
-    }, contents);
+      },
+      children: contents
+    });
   }
   return contents;
 });
 function wrapThemeManagerContext(children, themeManager, shouldSetChildrenThemeToParent) {
-  return themeManager ? /* @__PURE__ */ React.createElement(ThemeManagerContext.Provider, {
-    value: themeManager
-  }, shouldSetChildrenThemeToParent ? /* @__PURE__ */ React.createElement(Theme, {
-    name: themeManager.parentName
-  }, children) : children) : children;
+  return themeManager ? /* @__PURE__ */ jsx(ThemeManagerContext.Provider, {
+    value: themeManager,
+    children: shouldSetChildrenThemeToParent ? /* @__PURE__ */ jsx(Theme, {
+      name: themeManager.parentName,
+      children
+    }) : children
+  }) : children;
 }
 export {
   Theme,

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
   "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\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": "AAAA;AAEA;AACA;AACA;AACA;AAGA,MAAM;AAEC,MAAM,QAAQ,KAAK,gBAAe,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,QAAM,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;AAI1C,QAAM,WAAW,QACf,MAAO,eAAe,OAAO,wBAAwB,MAAM,UAAU,YAAY,GACjF,CAAC,cAAc,MAAM,UAAU,YAAY,CAC7C;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,oCAAC;AAAA,MACC,WAAY,EAAC,MAAM,oBACf,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAC3C,CAAC,GACH,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,iBAAiB,aAAO,UAAP,mBAAc,KAAK;AAAA,MAC7C;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,CAAC;AAEM,iCACL,UACA,cACA,gCACA;AACA,SAAO,eACL,oCAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,KAClC,iCACC,oCAAC;AAAA,IAAM,MAAM,aAAa;AAAA,KAAa,QAAS,IAEhD,QAEJ,IAEA;AAEJ;",
-  "names": []
+  "mappings": "AAoCM;AApCN,OAAO,SAAS,MAAM,eAAe;AAErC,SAAS,aAAa;AACtB,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"]
 }

package/dist/esm/views/ThemeInverse.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
 import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
 import { Theme } from "./Theme";
@@ -20,9 +21,10 @@ const ThemeInverse = ({
   if (disable) {
     return children;
   }
-  return /* @__PURE__ */ React.createElement(Theme, {
-    name
-  }, children);
+  return /* @__PURE__ */ jsx(Theme, {
+    name,
+    children
+  });
 };
 export {
   ThemeInverse

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/views/ThemeInverse.tsx"],
   "sourcesContent": ["import React, { useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\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    }\n    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;AAEA;AACA;AACA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,MAII;AACJ,QAAM,YAAY,aAAa;AAC/B,QAAM,eAAe,oBAAoB;AACzC,QAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;AAGpD,4BAA0B,MAAM;AAC9B,QAAI,UAAU,WAAW,MAAM,GAAG;AAChC,cAAQ,OAAO;AAAA,IACjB;AACA,QAAI,UAAU,WAAW,OAAO,GAAG;AACjC,cAAQ,MAAM;AAAA,IAChB;AAAA,EACF,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oCAAC;AAAA,IAAM;AAAA,KAAa,QAAS;AACtC;",
+  "mappings": "AA+BS;AA/BT,SAAgB,gBAAgB;AAEhC,SAAS,iCAAiC;AAC1C,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;AACA,QAAI,UAAU,WAAW,OAAO,GAAG;AACjC,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;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -1,3 +1,4 @@
+import { jsx } from "react/jsx-runtime";
 import React, { useLayoutEffect, useMemo } from "react";
 import { getConfig, getHasConfigured } from "../config";
 import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
@@ -31,13 +32,15 @@ const ThemeProvider = (props) => {
       defaultTheme: props.defaultTheme
     };
   }, [props.defaultTheme]);
-  return /* @__PURE__ */ React.createElement(ThemeContext.Provider, {
-    value: themeContext
-  }, /* @__PURE__ */ React.createElement(Theme, {
-    className: props.className,
-    name: props.defaultTheme,
-    disableThemeClass: props.disableRootThemeClass
-  }, props.children));
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+    value: themeContext,
+    children: /* @__PURE__ */ jsx(Theme, {
+      className: props.className,
+      name: props.defaultTheme,
+      disableThemeClass: props.disableRootThemeClass,
+      children: props.children
+    })
+  });
 };
 export {
   ThemeProvider

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
   "sourcesContent": ["import 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 (typeof document !== 'undefined') {\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": "AAAA;AAEA;AACA;AACA;AACA;AAGA,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,OAAO,aAAa,aAAa;AACnC,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,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;",
+  "mappings": "AAoDM;AApDN,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,OAAO,aAAa,aAAa;AACnC,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;",
   "names": []
 }

package/dist/esm/views/ThemeReset.js

@@ -1,3 +1,4 @@
+import { jsx } from "react/jsx-runtime";
 import React, { useContext, useLayoutEffect, useState } from "react";
 import { isWeb } from "../constants/platform";
 import { ThemeManagerContext } from "../helpers/ThemeManager";
@@ -25,11 +26,12 @@ const ThemeReset = (props) => {
   if (!themeManager || !props.children) {
     return props.children || null;
   }
-  return /* @__PURE__ */ React.createElement(Theme, {
+  return /* @__PURE__ */ jsx(Theme, {
     className: "tui-theme-reset",
     reset: true,
-    name
-  }, props.children);
+    name,
+    children: props.children
+  });
 };
 export {
   ThemeReset

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/views/ThemeReset.tsx"],
   "sourcesContent": ["import React, { useContext, useLayoutEffect, useState } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { ThemeManagerContext } from '../helpers/ThemeManager'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\n// resets the theme to the parent theme\nexport const ThemeReset = (props: { children?: any }) => {\n  const themeManager = useContext(ThemeManagerContext)\n  const [name, setName] = useState<string | null>(null)\n\n  // this component doesn't work with SSR, so must run only client side\n  // we could at least prevent more flickering by having the ssr head script\n  // that changes to dark initially also go through and change all of these\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (name !== themeManager.parentName) {\n        setName(themeManager.parentName)\n      }\n    }, [themeManager?.parentName])\n\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      return themeManager.onChangeTheme(() => {\n        setName(themeManager.parentName)\n      })\n    }, [])\n  }\n\n  if (!themeManager || !props.children) {\n    return props.children || null\n  }\n\n  return (\n    <Theme className=\"tui-theme-reset\" reset name={name}>\n      {props.children}\n    </Theme>\n  )\n}\n"],
-  "mappings": "AAAA;AAEA;AACA;AACA;AAGA,MAAM;AAGC,MAAM,aAAa,CAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oCAAC;AAAA,IAAM,WAAU;AAAA,IAAkB,OAAK;AAAA,IAAC;AAAA,KACtC,MAAM,QACT;AAEJ;",
+  "mappings": "AAsCI;AAtCJ,OAAO,SAAS,YAAY,iBAAiB,gBAAgB;AAE7D,SAAS,aAAa;AACtB,SAAS,2BAA2B;AACpC,SAAS,aAAa;AAGtB,MAAM;AAGC,MAAM,aAAa,CAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oBAAC;AAAA,IAAM,WAAU;AAAA,IAAkB,OAAK;AAAA,IAAC;AAAA,IACtC,gBAAM;AAAA,GACT;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.150",
+  "version": "1.0.1-beta.153",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -27,14 +27,14 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.150",
-    "@tamagui/helpers": "^1.0.1-beta.150",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.150",
-    "@tamagui/rnw": "^1.0.1-beta.150",
-    "@tamagui/rnw-lite": "^1.0.1-beta.150",
-    "@tamagui/use-debounce": "^1.0.1-beta.150",
-    "@tamagui/use-event": "^1.0.1-beta.150",
-    "@tamagui/use-force-update": "^1.0.1-beta.150",
+    "@tamagui/compose-refs": "^1.0.1-beta.153",
+    "@tamagui/helpers": "^1.0.1-beta.153",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.153",
+    "@tamagui/rnw": "^1.0.1-beta.153",
+    "@tamagui/rnw-lite": "^1.0.1-beta.153",
+    "@tamagui/use-debounce": "^1.0.1-beta.153",
+    "@tamagui/use-event": "^1.0.1-beta.153",
+    "@tamagui/use-force-update": "^1.0.1-beta.153",
     "expo-screen-orientation": "^4.3.0",
     "hyphenate-style-name": "^1.0.4"
   },
@@ -43,7 +43,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.150",
+    "@tamagui/build": "^1.0.1-beta.153",
     "@types/react": "^18.0.15",
     "csstype": "^3.0.10",
     "esbuild": "^0.14.49",

package/src/createComponent.tsx

@@ -707,7 +707,34 @@ export function createComponent<
       }
 
       viewProps.style = style
-    } else {
+    }
+
+    if (process.env.TAMAGUI_TARGET === 'native') {
+      // swap out the right family based on weight/style
+      if (splitStyles.fontFamily) {
+        const faceInfo = config.fontsParsed[splitStyles.fontFamily]?.face
+        if (faceInfo) {
+          const [weight, style] = (() => {
+            let weight: string | undefined
+            let style: string | undefined
+            for (let i = styles.length; i >= 0; i--) {
+              weight ??= styles[i]?.fontWeight
+              style ??= styles[i]?.fontStyle
+            }
+            return [weight || '400', style || 'normal'] as const
+          })()
+          const overrideFace = faceInfo[weight]?.[style]?.val
+          if (overrideFace) {
+            for (const style of styles) {
+              if (style?.fontFamily) {
+                style.fontFamily = overrideFace
+              }
+            }
+          }
+        }
+      }
+
+      // assign styles
       viewProps.style = styles
     }
 

package/src/createFont.ts

@@ -4,8 +4,11 @@ export const createFont = <A extends GenericFont>(font: A): A => {
   // fills in any missing values based on size keys being standard
   const sizeKeys = Object.keys(font.size)
 
+  // fill in intermediate values
   for (const key in font) {
-    if (key === 'size' || key === 'family') continue
+    if (key === 'size' || key === 'family' || key === 'face') {
+      continue
+    }
     const section = font[key] as Object
     const keys = Object.keys(section)
 

package/src/createVariable.ts

@@ -36,9 +36,10 @@ export const createVariable = <A extends string | number = any>(props: VariableI
 }
 
 // on the client maybe we can change the prototype of variable object toString to keep backwards compat
-export function variableToString(vrble?: any) {
+export function variableToString(vrble?: any, getValue = false) {
   if (!vrble) return ''
   if (isVariable(vrble)) {
+    if (getValue) return `${vrble.val}`
     return `${isWeb ? vrble.variable : vrble.val}`
   }
   return `${vrble}`

package/src/helpers/createMediaStyle.ts

@@ -27,9 +27,9 @@ export const createMediaStyle = (
     ogPrefix,
     `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`
   )}`
-  const screenStr = negate ? 'not all' : 'screen'
+  const screenStr = negate ? 'not all and' : ''
   const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])
-  const mediaQuery = `${screenStr} and ${mediaSelector}`
+  const mediaQuery = `${screenStr} ${mediaSelector}`
   const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')
   // combines media queries if they already exist
   let styleRule = ''

package/src/helpers/getSplitStyles.tsx

@@ -392,6 +392,9 @@ export const getSplitStyles: StyleSplitter = (
               for (const key in mediaStyle) {
                 usedKeys.add(key)
                 style[key] = mediaStyle[key]
+                if (key === 'fontFamily') {
+                  fontFamily = mediaStyle[key]
+                }
               }
             }
           }

package/src/insertFont.ts

@@ -27,7 +27,7 @@ export function parseFont<A extends GenericFont>(definition: A): DeepVariableObj
   const parsed: any = {}
   for (const attrKey in definition) {
     const attr = definition[attrKey]
-    if (attrKey === 'family') {
+    if (attrKey === 'family' || attrKey === 'face') {
       parsed[attrKey] = attr
       continue
     }
@@ -48,6 +48,7 @@ export function registerFontVariables(parsedFont: any) {
   const response: string[] = []
 
   for (const fkey in parsedFont) {
+    if (fkey === 'face') continue
     if (fkey === 'family') {
       const val = parsedFont[fkey] as Variable
       registerCSSVariable(val)

package/src/types.tsx

@@ -336,6 +336,8 @@ export type GenericFont<Key extends number | string = number | string> = {
   style?: Partial<{ [key in Key]: TextStyle['fontStyle'] | Variable }>
   transform?: Partial<{ [key in Key]: TextStyle['textTransform'] | Variable }>
   color?: Partial<{ [key in Key]: string | Variable }>
+  // for native use only, lets you map to alternative fonts
+  face?: { [key in FontWeightSteps]: { normal?: string; italic?: string } }
 }
 
 // media
@@ -429,9 +431,8 @@ export type RadiusTokens = GetTokenString<keyof Tokens['radius']> | number
 export type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>
 export type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number
 export type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number
-export type FontWeightTokens =
-  | `$${GetTokenFontKeysFor<'weight'>}`
-  | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+export type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`
+export type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps
 export type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number
 export type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number
 export type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle']

package/types/createVariable.d.ts

@@ -18,7 +18,7 @@ export declare const createVariable: <A extends string | number = any>(props: Va
     isFloating?: boolean | undefined;
     __isVar__: boolean;
 };
-export declare function variableToString(vrble?: any): string;
+export declare function variableToString(vrble?: any, getValue?: boolean): string;
 export declare function isVariable(v: Variable | any): v is Variable;
 export declare function getVariableValue(v: Variable | any): any;
 export declare function getVariableName(v: Variable | any): any;

package/types/types.d.ts

@@ -205,6 +205,12 @@ export declare type GenericFont<Key extends number | string = number | string> =
     color?: Partial<{
         [key in Key]: string | Variable;
     }>;
+    face?: {
+        [key in FontWeightSteps]: {
+            normal?: string;
+            italic?: string;
+        };
+    };
 };
 export declare type MediaQueryObject = {
     [key: string]: string | number | string;
@@ -264,7 +270,8 @@ export declare type RadiusTokens = GetTokenString<keyof Tokens['radius']> | numb
 export declare type FontTokens = GetTokenString<keyof TamaguiConfig['fonts']>;
 export declare type FontSizeTokens = GetTokenString<GetTokenFontKeysFor<'size'>> | number;
 export declare type FontLineHeightTokens = `$${GetTokenFontKeysFor<'lineHeight'>}` | number;
-export declare type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`;
+export declare type FontWeightSteps = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}00`;
+export declare type FontWeightTokens = `$${GetTokenFontKeysFor<'weight'>}` | FontWeightSteps;
 export declare type FontColorTokens = `$${GetTokenFontKeysFor<'color'>}` | number;
 export declare type FontLetterSpacingTokens = `$${GetTokenFontKeysFor<'letterSpacing'>}` | number;
 export declare type FontStyleTokens = `$${GetTokenFontKeysFor<'style'>}` | TextStyle['fontStyle'];

package/src/helpers/cssHash.ts

@@ -1,28 +0,0 @@
-import { simpleHash } from '@tamagui/helpers'
-
-// not sure it's worth the extra weight, could be dev time though
-// affordances for simple values
-export function cssHash(val: string, maxLen = 10) {
-  if (val.length < maxLen) {
-    let res = ''
-    for (let i = 0; i < val.length; i++) {
-      const char = val[i]
-      if (specials[char]) {
-        res += specials[char]
-      } else {
-        res += validCSS.test(char) ? char : '_' + char.charCodeAt(0).toString()
-      }
-    }
-    return res
-  }
-  return simpleHash(val)
-}
-
-const validCSS = /[a-z0-9]/i
-
-const specials = {
-  '.': 'dot',
-  ',': '_',
-  '%': 'pct',
-  '-': 'neg',
-}