@tamagui/core 1.0.1-rc.5 → 1.0.1-rc.6

package/dist/cjs/views/Theme.js

@@ -39,9 +39,12 @@ function Theme(props) {
     return props.children;
   }
   const isRoot = !!props["_isRoot"];
-  const { name, theme, themeManager, isNewTheme, className } = (0, import_useTheme.useChangeThemeEffect)(props, isRoot);
+  const { name, theme, themeManager, isNewTheme, className } = (0, import_useTheme.useChangeThemeEffect)(
+    props,
+    isRoot
+  );
   const disableThemeClass = props.disableThemeClass;
-  const missingTheme = !name || !theme;
+  const missingTheme = !(name && theme);
   let contents = (0, import_react.useMemo)(() => {
     const next = props["data-themeable"] ? import_react.default.cloneElement(props.children, { ["data-themeable"]: true }) : props.children;
     return missingTheme ? next : wrapThemeManagerContext(next, themeManager);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "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 only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(props, isRoot)\n\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !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  let contents = useMemo(() => {\n    const next = props['data-themeable']\n      ? React.cloneElement(props.children, { ['data-themeable']: true })\n      : props.children\n\n    return missingTheme ? next : wrapThemeManagerContext(next, themeManager)\n  }, [missingTheme, 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 || missingTheme) {\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": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CM;AA5CN,uBAAsB;AACtB,mBAA+B;AAE/B,4BAAiC;AAEjC,iCAAoC;AACpC,sBAAqC;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,YAAY,UAAU,QAAI,sCAAqB,OAAO,MAAM;AAE/F,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,CAAC,QAAQ,CAAC;AAI/B,MAAI,eAAW,sBAAQ,MAAM;AAC3B,UAAM,OAAO,MAAM,oBACf,aAAAA,QAAM,aAAa,MAAM,UAAU,EAAE,CAAC,mBAAmB,KAAK,CAAC,IAC/D,MAAM;AAEV,WAAO,eAAe,OAAO,wBAAwB,MAAM,YAAY;AAAA,EACzE,GAAG,CAAC,cAAc,MAAM,UAAU,YAAY,CAAC;AAE/C,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,cAAc;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,wBAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,4CAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,WAAO,wCAAiB,+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,4CAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SAAO,4CAAC,+CAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IAAe;AAAA,GAAK;AAClE;",
+  "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 only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(\n    props,\n    isRoot\n  )\n\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !(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  let contents = useMemo(() => {\n    const next = props['data-themeable']\n      ? React.cloneElement(props.children, { ['data-themeable']: true })\n      : props.children\n\n    return missingTheme ? next : wrapThemeManagerContext(next, themeManager)\n  }, [missingTheme, 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 || missingTheme) {\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 (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+CM;AA/CN,uBAAsB;AACtB,mBAA+B;AAE/B,4BAAiC;AAEjC,iCAAoC;AACpC,sBAAqC;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,YAAY,UAAU,QAAI;AAAA,IAC3D;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,EAAE,QAAQ;AAI/B,MAAI,eAAW,sBAAQ,MAAM;AAC3B,UAAM,OAAO,MAAM,oBACf,aAAAA,QAAM,aAAa,MAAM,UAAU,EAAE,CAAC,mBAAmB,KAAK,CAAC,IAC/D,MAAM;AAEV,WAAO,eAAe,OAAO,wBAAwB,MAAM,YAAY;AAAA,EACzE,GAAG,CAAC,cAAc,MAAM,UAAU,YAAY,CAAC;AAE/C,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,cAAc;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,wBAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,4CAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,WAAO,wCAAiB,+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,4CAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SACE,4CAAC,+CAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IAClC;AAAA,GACH;AAEJ;",
   "names": ["React"]
 }

package/dist/esm/addTheme.js

@@ -7,7 +7,7 @@ function addTheme(props) {
   const config = getConfig();
   if (process.env.NODE_ENV === "development") {
     if (!config) {
-      throw new Error(`No config`);
+      throw new Error("No config");
     }
     const theme2 = config.themes[props.name];
     if (!props.update && theme2) {

package/dist/esm/addTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/addTheme.ts"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\n\nimport { getConfig, updateConfig } from './config'\nimport { getThemeCSSRules } from './helpers/getThemeCSSRules'\nimport { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'\nimport { ThemeDefinition, ThemeParsed } from './types'\n\nexport function addTheme(props: {\n  name: string\n  theme: Partial<Record<keyof ThemeDefinition, any>>\n  insertCSS?: boolean\n  update?: boolean\n}) {\n  const config = getConfig()\n\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error(`No config`)\n    }\n    const theme = config.themes[props.name]\n    if (!props.update && theme) {\n      return { theme }\n    }\n  }\n\n  const { name: themeName, theme: themeIn, insertCSS } = props\n  const theme = { ...themeIn } as ThemeParsed\n  for (const key in theme) {\n    ensureThemeVariable(theme, key)\n  }\n\n  const themeProxied = proxyThemeToParents(themeName, theme, config.themes)\n  config.themes[themeName] = themeProxied\n\n  let cssRules: string[] = []\n\n  if (isWeb) {\n    if (insertCSS) {\n      cssRules = getThemeCSSRules({\n        // @ts-ignore this works but should be fixed types\n        config,\n        themeName,\n        names: [themeName],\n        theme,\n      })\n      const id = `t_theme_style_${themeName}`\n      const existing = document.querySelector(`#${id}`)\n      const style = document.createElement('style')\n      style.id = id\n      style.appendChild(document.createTextNode(cssRules.join('\\n')))\n      document.head.appendChild(style)\n      if (existing) {\n        existing.parentElement?.removeChild(existing)\n      }\n    }\n  }\n\n  updateConfig('themes', { ...config.themes, [themeName]: themeProxied })\n\n  // trigger updates in components\n  return {\n    theme: themeProxied,\n    cssRules,\n  }\n}\n"],
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\n\nimport { getConfig, updateConfig } from './config'\nimport { getThemeCSSRules } from './helpers/getThemeCSSRules'\nimport { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'\nimport { ThemeDefinition, ThemeParsed } from './types'\n\nexport function addTheme(props: {\n  name: string\n  theme: Partial<Record<keyof ThemeDefinition, any>>\n  insertCSS?: boolean\n  update?: boolean\n}) {\n  const config = getConfig()\n\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error('No config')\n    }\n    const theme = config.themes[props.name]\n    if (!props.update && theme) {\n      return { theme }\n    }\n  }\n\n  const { name: themeName, theme: themeIn, insertCSS } = props\n  const theme = { ...themeIn } as ThemeParsed\n  for (const key in theme) {\n    ensureThemeVariable(theme, key)\n  }\n\n  const themeProxied = proxyThemeToParents(themeName, theme, config.themes)\n  config.themes[themeName] = themeProxied\n\n  let cssRules: string[] = []\n\n  if (isWeb) {\n    if (insertCSS) {\n      cssRules = getThemeCSSRules({\n        // @ts-ignore this works but should be fixed types\n        config,\n        themeName,\n        names: [themeName],\n        theme,\n      })\n      const id = `t_theme_style_${themeName}`\n      const existing = document.querySelector(`#${id}`)\n      const style = document.createElement('style')\n      style.id = id\n      style.appendChild(document.createTextNode(cssRules.join('\\n')))\n      document.head.appendChild(style)\n      if (existing) {\n        existing.parentElement?.removeChild(existing)\n      }\n    }\n  }\n\n  updateConfig('themes', { ...config.themes, [themeName]: themeProxied })\n\n  // trigger updates in components\n  return {\n    theme: themeProxied,\n    cssRules,\n  }\n}\n"],
   "mappings": "AAAA,SAAS,aAAa;AAEtB,SAAS,WAAW,oBAAoB;AACxC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB,2BAA2B;AAGlD,SAAS,SAAS,OAKtB;AAZH;AAaE,QAAM,SAAS,UAAU;AAEzB,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI,MAAM,WAAW;AAAA,IAC7B;AACA,UAAMA,SAAQ,OAAO,OAAO,MAAM;AAClC,QAAI,CAAC,MAAM,UAAUA,QAAO;AAC1B,aAAO,EAAE,OAAAA,OAAM;AAAA,IACjB;AAAA,EACF;AAEA,QAAM,EAAE,MAAM,WAAW,OAAO,SAAS,UAAU,IAAI;AACvD,QAAM,QAAQ,EAAE,GAAG,QAAQ;AAC3B,aAAW,OAAO,OAAO;AACvB,wBAAoB,OAAO,GAAG;AAAA,EAChC;AAEA,QAAM,eAAe,oBAAoB,WAAW,OAAO,OAAO,MAAM;AACxE,SAAO,OAAO,aAAa;AAE3B,MAAI,WAAqB,CAAC;AAE1B,MAAI,OAAO;AACT,QAAI,WAAW;AACb,iBAAW,iBAAiB;AAAA,QAE1B;AAAA,QACA;AAAA,QACA,OAAO,CAAC,SAAS;AAAA,QACjB;AAAA,MACF,CAAC;AACD,YAAM,KAAK,iBAAiB;AAC5B,YAAM,WAAW,SAAS,cAAc,IAAI,IAAI;AAChD,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,KAAK;AACX,YAAM,YAAY,SAAS,eAAe,SAAS,KAAK,IAAI,CAAC,CAAC;AAC9D,eAAS,KAAK,YAAY,KAAK;AAC/B,UAAI,UAAU;AACZ,uBAAS,kBAAT,mBAAwB,YAAY;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AAEA,eAAa,UAAU,EAAE,GAAG,OAAO,QAAQ,CAAC,YAAY,aAAa,CAAC;AAGtE,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
   "names": ["theme"]
 }

package/dist/esm/config.js

@@ -16,7 +16,7 @@ const setConfigFont = (name, font, fontParsed) => {
 const getConfig = () => {
   if (!conf) {
     throw new Error(
-      process.env.NODE_ENV === "development" ? `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.` : `Err0`
+      process.env.NODE_ENV === "development" ? `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.` : "Err0"
     );
   }
   return conf;

package/dist/esm/config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/config.ts"],
-  "sourcesContent": ["import { ConfigListener, TamaguiInternalConfig, ThemeParsed, Tokens } from './types'\n\nlet conf: TamaguiInternalConfig | null\n\nexport const setConfig = (next: TamaguiInternalConfig) => {\n  conf = next\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(next))\n  }\n}\n\nexport const setConfigFont = (name: string, font: any, fontParsed: any) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (!conf) throw new Error(`Haven't called createTamagui yet`)\n  }\n  Object.assign(conf!.fonts, { [name]: font })\n  Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })\n}\n\nexport const getConfig = () => {\n  if (!conf) {\n    throw new Error(\n      process.env.NODE_ENV === 'development'\n        ? `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`\n        : `Err0`\n    )\n  }\n  return conf\n}\nexport const getTokens = (prefixed?: boolean): Tokens =>\n  prefixed ? conf!.tokensParsed : conf!.tokens\n\n/**\n * Note: this is the same as `getTokens`\n */\nexport const useTokens = getTokens\n\nexport const getThemes = () => conf!.themes\n\nexport const configListeners = new Set<ConfigListener>()\n\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n  if (conf) {\n    cb(conf)\n  } else {\n    configListeners.add(cb)\n  }\n}\n\nexport const updateConfig = (key: string, value: any) => {\n  Object.assign(key, value)\n}\n"],
+  "sourcesContent": ["import { ConfigListener, TamaguiInternalConfig, ThemeParsed, Tokens } from './types'\n\nlet conf: TamaguiInternalConfig | null\n\nexport const setConfig = (next: TamaguiInternalConfig) => {\n  conf = next\n  if (configListeners.size) {\n    configListeners.forEach((cb) => cb(next))\n  }\n}\n\nexport const setConfigFont = (name: string, font: any, fontParsed: any) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (!conf) throw new Error(`Haven't called createTamagui yet`)\n  }\n  Object.assign(conf!.fonts, { [name]: font })\n  Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })\n}\n\nexport const getConfig = () => {\n  if (!conf) {\n    throw new Error(\n      process.env.NODE_ENV === 'development'\n        ? `Missing tamagui config, you either have a duplicate config, or haven't set it up. Be sure createTamagui is called before rendering.`\n        : 'Err0'\n    )\n  }\n  return conf\n}\nexport const getTokens = (prefixed?: boolean): Tokens =>\n  prefixed ? conf!.tokensParsed : conf!.tokens\n\n/**\n * Note: this is the same as `getTokens`\n */\nexport const useTokens = getTokens\n\nexport const getThemes = () => conf!.themes\n\nexport const configListeners = new Set<ConfigListener>()\n\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n  if (conf) {\n    cb(conf)\n  } else {\n    configListeners.add(cb)\n  }\n}\n\nexport const updateConfig = (key: string, value: any) => {\n  Object.assign(key, value)\n}\n"],
   "mappings": "AAEA,IAAI;AAEG,MAAM,YAAY,CAAC,SAAgC;AACxD,SAAO;AACP,MAAI,gBAAgB,MAAM;AACxB,oBAAgB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;AAAA,EAC1C;AACF;AAEO,MAAM,gBAAgB,CAAC,MAAc,MAAW,eAAoB;AACzE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC;AAAM,YAAM,IAAI,MAAM,kCAAkC;AAAA,EAC/D;AACA,SAAO,OAAO,KAAM,OAAO,EAAE,CAAC,OAAO,KAAK,CAAC;AAC3C,SAAO,OAAO,KAAM,aAAa,EAAE,CAAC,IAAI,SAAS,WAAW,CAAC;AAC/D;AAEO,MAAM,YAAY,MAAM;AAC7B,MAAI,CAAC,MAAM;AACT,UAAM,IAAI;AAAA,MACR,QAAQ,IAAI,aAAa,gBACrB,wIACA;AAAA,IACN;AAAA,EACF;AACA,SAAO;AACT;AACO,MAAM,YAAY,CAAC,aACxB,WAAW,KAAM,eAAe,KAAM;AAKjC,MAAM,YAAY;AAElB,MAAM,YAAY,MAAM,KAAM;AAE9B,MAAM,kBAAkB,oBAAI,IAAoB;AAEhD,MAAM,mBAAmB,CAAC,OAAuB;AACtD,MAAI,MAAM;AACR,OAAG,IAAI;AAAA,EACT,OAAO;AACL,oBAAgB,IAAI,EAAE;AAAA,EACxB;AACF;AAEO,MAAM,eAAe,CAAC,KAAa,UAAe;AACvD,SAAO,OAAO,KAAK,KAAK;AAC1B;",
   "names": []
 }

package/dist/esm/constants/constants.js

@@ -1,5 +1,5 @@
 const THEME_NAME_SEPARATOR = "_";
-const THEME_CLASSNAME_PREFIX = `t_`;
+const THEME_CLASSNAME_PREFIX = "t_";
 const webOnlyDefaultStyles = {
   display: "flex",
   flexBasis: "auto",

package/dist/esm/constants/constants.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/constants.ts"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\n\nexport const THEME_NAME_SEPARATOR = '_'\nexport const THEME_CLASSNAME_PREFIX = `t_`\n\nexport const webOnlyDefaultStyles = {\n  display: 'flex',\n  flexBasis: 'auto',\n  boxSizing: 'border-box',\n  position: 'relative',\n  minHeight: 0,\n  minWidth: 0,\n}\n\nexport const stackDefaultStyles = {\n  alignItems: 'stretch',\n  flexShrink: 0,\n  ...webOnlyDefaultStyles,\n}\n"],
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\n\nexport const THEME_NAME_SEPARATOR = '_'\nexport const THEME_CLASSNAME_PREFIX = 't_'\n\nexport const webOnlyDefaultStyles = {\n  display: 'flex',\n  flexBasis: 'auto',\n  boxSizing: 'border-box',\n  position: 'relative',\n  minHeight: 0,\n  minWidth: 0,\n}\n\nexport const stackDefaultStyles = {\n  alignItems: 'stretch',\n  flexShrink: 0,\n  ...webOnlyDefaultStyles,\n}\n"],
   "mappings": "AAEO,MAAM,uBAAuB;AAC7B,MAAM,yBAAyB;AAE/B,MAAM,uBAAuB;AAAA,EAClC,SAAS;AAAA,EACT,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV,WAAW;AAAA,EACX,UAAU;AACZ;AAEO,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,GAAG;AACL;",
   "names": []
 }

package/dist/esm/createComponent.js

@@ -1,6 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { useComposedRefs } from "@tamagui/compose-refs";
-import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
+import {
+  isClient,
+  isRSC,
+  isServer,
+  isWeb,
+  useIsomorphicLayoutEffect
+} from "@tamagui/constants";
 import {
   composeEventHandlers,
   stylePropsView,
@@ -101,7 +107,9 @@ function createComponent(configIn, ParentComponent) {
     const useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations;
     const avoidClassesWhileAnimating = animationsConfig.isReactNative;
     const hasEnterStyle = !!props.enterStyle;
-    const needsMount = Boolean((isWeb ? isClient : true) && (hasEnterStyle || props.animation));
+    const needsMount = Boolean(
+      (isWeb ? isClient : true) && (hasEnterStyle || props.animation)
+    );
     const states = useServerState(
       needsMount ? defaultComponentState : defaultComponentStateMounted
     );
@@ -143,7 +151,7 @@ function createComponent(configIn, ParentComponent) {
         const banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
         console.group(`%c ${banner}`, "background: yellow;");
         if (!isServer) {
-          console.log(`state`, state);
+          console.log("state", state);
         }
       }
     }
@@ -201,11 +209,20 @@ function createComponent(configIn, ParentComponent) {
     const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating;
     if (process.env.NODE_ENV === "development") {
       if (!process.env.TAMAGUI_TARGET) {
-        console.error(`No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`);
+        console.error(
+          `No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`
+        );
       }
       if (debugProp) {
         console.groupCollapsed("props");
-        console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props));
+        console.log(
+          "props in",
+          propsIn,
+          "mapped to",
+          props,
+          "in order",
+          Object.keys(props)
+        );
         console.log("splitStyles", splitStyles);
         console.log("shouldListenForMediaChanges", shouldListenForMediaChanges);
         console.log("className", Object.values(splitStyles.classNames));
@@ -214,7 +231,6 @@ function createComponent(configIn, ParentComponent) {
         }
         console.groupEnd();
         if (debugProp === "break") {
-          debugger;
         }
       }
     }
@@ -317,7 +333,7 @@ function createComponent(configIn, ParentComponent) {
           onStartShouldSetResponderCapture
         });
       }
-      if (props.href != void 0 && hrefAttrs != void 0) {
+      if (props.href !== void 0 && hrefAttrs !== void 0) {
         const { download, rel, target } = hrefAttrs;
         if (download != null) {
           viewProps.download = download;
@@ -326,10 +342,10 @@ function createComponent(configIn, ParentComponent) {
           viewProps.rel = rel;
         }
         if (typeof target === "string") {
-          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
+          viewProps.target = target.charAt(0) !== "_" ? `_${target}` : target;
         }
       }
-      const _focusable = focusable != void 0 ? focusable : accessible;
+      const _focusable = focusable !== void 0 ? focusable : accessible;
       const role = viewProps.role;
       if (_focusable === false) {
         viewProps.tabIndex = "-1";
@@ -353,7 +369,9 @@ function createComponent(configIn, ParentComponent) {
     if (process.env.NODE_ENV === "development" && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+          console.error(
+            `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
+          );
         }
       });
     }
@@ -447,8 +465,8 @@ function createComponent(configIn, ParentComponent) {
             for (const style2 of styles) {
               if (style2 == null ? void 0 : style2.fontFamily) {
                 style2.fontFamily = overrideFace;
-                delete style2.fontWeight;
-                delete style2.fontStyle;
+                style2.fontWeight = void 0;
+                style2.fontStyle = void 0;
               }
             }
           }
@@ -460,7 +478,7 @@ function createComponent(configIn, ParentComponent) {
     const attachPress = !!(runtimePressStyle || onPress || onPressOut || onPressIn || onClick);
     const runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle);
     const isHoverable = isWeb && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const handlesPressEvents = !isWeb && !asChild;
+    const handlesPressEvents = !(isWeb || asChild);
     const shouldAttach = asChild ? false : Boolean(
       attachPress || isHoverable || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props)
     );
@@ -582,7 +600,7 @@ function createComponent(configIn, ParentComponent) {
     if (process.env.TAMAGUI_TARGET === "web") {
       if (events || isAnimatedReactNativeWeb) {
         content = /* @__PURE__ */ jsx("span", {
-          className: (isAnimatedReactNativeWeb ? className : "") + `  _dsp_contents`,
+          className: `${isAnimatedReactNativeWeb ? className : ""}  _dsp_contents`,
           ...events && {
             onMouseEnter: events.onMouseEnter,
             onMouseLeave: events.onMouseLeave,
@@ -606,7 +624,42 @@ function createComponent(configIn, ParentComponent) {
         console.log("children", content);
         console.groupEnd();
         if (typeof window !== "undefined") {
-          console.log({ state, shouldProvideThemeManager, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_f = props.className) == null ? void 0 : _f.split(" "), classNamesOut: (_g = viewProps.className) == null ? void 0 : _g.split(" "), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, ...typeof window !== "undefined" ? { theme, themeClassName: theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null });
+          console.log({
+            state,
+            shouldProvideThemeManager,
+            isAnimated,
+            isAnimatedReactNativeWeb,
+            tamaguiDefaultProps,
+            viewProps,
+            splitStyles,
+            animationStyles,
+            handlesPressEvents,
+            isStringElement,
+            classNamesIn: (_f = props.className) == null ? void 0 : _f.split(" "),
+            classNamesOut: (_g = viewProps.className) == null ? void 0 : _g.split(" "),
+            events,
+            shouldAttach,
+            styles,
+            pseudos,
+            content,
+            childEls,
+            shouldAvoidClasses,
+            avoidClasses: avoidClassesWhileAnimating,
+            animation: props.animation,
+            style: splitStylesStyle,
+            ...typeof window !== "undefined" ? {
+              theme,
+              themeClassName: theme.className,
+              staticConfig,
+              tamaguiConfig,
+              events,
+              shouldAvoidClasses,
+              shouldForcePseudo,
+              classNames: Object.fromEntries(
+                Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])
+              )
+            } : null
+          });
         }
         console.groupEnd();
       }
@@ -641,7 +694,7 @@ function createComponent(configIn, ParentComponent) {
         initialTheme = proxyThemeVariables(next);
         if (process.env.NODE_ENV === "development") {
           if (!initialTheme) {
-            console.log(`Warning: Missing theme`);
+            console.log("Warning: Missing theme");
           }
         }
       }
@@ -680,7 +733,22 @@ function createComponent(configIn, ParentComponent) {
     tamaguiDefaultProps = defaults;
     if (process.env.NODE_ENV === "development" && debug) {
       if (process.env.IS_STATIC !== "is_static") {
-        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, tamaguiDefaultProps, defaults, defaultPropsIn, defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps), defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]), ourProps, ourClassNames, defaultsClassnames, defaultTag, noClassNames });
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+          staticConfig,
+          tamaguiDefaultProps,
+          defaults,
+          defaultPropsIn,
+          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
+          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [
+            k,
+            defaultPropsIn[k]
+          ]),
+          ourProps,
+          ourClassNames,
+          defaultsClassnames,
+          defaultTag,
+          noClassNames
+        });
       }
     }
   });
@@ -726,7 +794,7 @@ const Spacer = createComponent({
   variants: {
     size: {
       "...size": (size, { tokens }) => {
-        size = size == true ? "$true" : size;
+        size = size === true ? "$true" : size;
         const sizePx = tokens.space[size] ?? size;
         return {
           width: sizePx,
@@ -765,7 +833,7 @@ function spacedChildren({
   var _a;
   const hasSpace = !!(space || spaceFlex);
   const hasSeparator = !(separator === void 0 || separator === null);
-  if (!hasSpace && !hasSeparator && !isZStack) {
+  if (!(hasSpace || hasSeparator || isZStack)) {
     return children;
   }
   const childrenList = Children.toArray(children);
@@ -774,7 +842,12 @@ function spacedChildren({
     if (len === 1) {
       const [onlyChild] = childrenList;
       if (React.isValidElement(onlyChild) && ((_a = onlyChild.type) == null ? void 0 : _a["shouldForwardSpace"])) {
-        return React.cloneElement(onlyChild, { space, direction, spaceFlex, separator });
+        return React.cloneElement(onlyChild, {
+          space,
+          direction,
+          spaceFlex,
+          separator
+        });
       }
     }
     return childrenList;