@tamagui/core 1.0.1-beta.220 → 1.0.1-beta.222

package/dist/cjs/views/ThemeProvider.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var ThemeProvider_exports = {};
 __export(ThemeProvider_exports, {
@@ -29,23 +23,14 @@ __export(ThemeProvider_exports, {
 module.exports = __toCommonJS(ThemeProvider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_constants = require("@tamagui/constants");
-var import_react = __toESM(require("react"));
-var import_config = require("../config");
+var import_react = require("react");
 var import_constants2 = require("../constants/constants");
-var import_ThemeContext = require("../contexts/ThemeContext");
 var import_Theme = require("./Theme");
-import_react.default["createElement"];
 const ThemeProvider = (props) => {
-  if (process.env.NODE_ENV === "development") {
-    if (!(0, import_config.getHasConfigured)()) {
-      throw new Error(`Missing configureThemes() call, add to your root file`);
-    }
-  }
   if (import_constants.isClient) {
     (0, import_react.useLayoutEffect)(() => {
-      if (props.disableRootThemeClass) {
+      if (props.disableRootThemeClass)
         return;
-      }
       const cn = `${import_constants2.THEME_CLASSNAME_PREFIX}${props.defaultTheme}`;
       const target = props.themeClassNameOnRoot ? document.documentElement : document.body;
       target.classList.add(cn);
@@ -54,22 +39,12 @@ const ThemeProvider = (props) => {
       };
     }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]);
   }
-  const themeContext = (0, import_react.useMemo)(() => {
-    return {
-      get themes() {
-        return (0, import_config.getConfig)().themes;
-      },
-      defaultTheme: props.defaultTheme
-    };
-  }, [props.defaultTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeContext.ThemeContext.Provider, {
-    value: themeContext,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
-      className: props.className,
-      name: props.defaultTheme,
-      disableThemeClass: props.disableRootThemeClass,
-      children: props.children
-    })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Theme.Theme, {
+    className: props.className,
+    name: props.defaultTheme,
+    disableThemeClass: props.disableRootThemeClass,
+    _isRoot: true,
+    children: props.children
   });
 };
 // Annotate the CommonJS export names for ESM import in node:

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

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

package/dist/esm/addTheme.js

@@ -2,22 +2,19 @@ import { isWeb } from "@tamagui/constants";
 import { getConfig, updateConfig } from "./config";
 import { getThemeCSSRules } from "./helpers/getThemeCSSRules";
 import { ensureThemeVariable, proxyThemeToParents } from "./helpers/themes";
-function addTheme({
-  name: themeName,
-  theme: themeIn,
-  insertCSS,
-  update
-}) {
+function addTheme(props) {
   var _a;
   const config = getConfig();
   if (process.env.NODE_ENV === "development") {
     if (!config) {
-      throw new Error(`Must run createTamagui once before loading theme`);
+      throw new Error(`No config`);
     }
-    if (!update && config.themes[themeName]) {
-      throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`);
+    const theme2 = config.themes[props.name];
+    if (!props.update && theme2) {
+      return { theme: theme2 };
     }
   }
+  const { name: themeName, theme: themeIn, insertCSS } = props;
   const theme = { ...themeIn };
   for (const key in theme) {
     ensureThemeVariable(theme, key);
@@ -33,7 +30,7 @@ function addTheme({
         names: [themeName],
         theme
       });
-      const id = `tamagui_theme_style_${themeName}`;
+      const id = `t_theme_style_${themeName}`;
       const existing = document.querySelector(`#${id}`);
       const style = document.createElement("style");
       style.id = id;

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({\n  name: themeName,\n  theme: themeIn,\n  insertCSS,\n  update,\n}: {\n  name: string\n  theme: ThemeDefinition\n  insertCSS?: boolean\n  update?: boolean\n}) {\n  const config = getConfig()\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error(`Must run createTamagui once before loading theme`)\n    }\n    if (!update && config.themes[themeName]) {\n      throw new Error(`Already defined theme \"${themeName}\", use updateTheme to change values`)\n    }\n  }\n\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 = `tamagui_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\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;AAAA,EACvB,MAAM;AAAA,EACN,OAAO;AAAA,EACP;AAAA,EACA;AACF,GAKG;AAjBH;AAkBE,QAAM,SAAS,UAAU;AACzB,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI,MAAM,kDAAkD;AAAA,IACpE;AACA,QAAI,CAAC,UAAU,OAAO,OAAO,YAAY;AACvC,YAAM,IAAI,MAAM,0BAA0B,8CAA8C;AAAA,IAC1F;AAAA,EACF;AAEA,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,uBAAuB;AAClC,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;AAItE,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
-  "names": []
+  "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

@@ -13,8 +13,14 @@ const setConfigFont = (name, font, fontParsed) => {
   Object.assign(conf.fonts, { [name]: font });
   Object.assign(conf.fontsParsed, { [`$${name}`]: fontParsed });
 };
-const getHasConfigured = () => !!conf;
-const getConfig = () => conf;
+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`
+    );
+  }
+  return conf;
+};
 const getTokens = (prefixed) => prefixed ? conf.tokensParsed : conf.tokens;
 const useTokens = getTokens;
 const getThemes = () => conf.themes;
@@ -32,7 +38,6 @@ const updateConfig = (key, value) => {
 export {
   configListeners,
   getConfig,
-  getHasConfigured,
   getThemes,
   getTokens,
   onConfiguredOnce,

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 getHasConfigured = () => !!conf\nexport const getConfig = () => conf!\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,mBAAmB,MAAM,CAAC,CAAC;AACjC,MAAM,YAAY,MAAM;AACxB,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;",
+  "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/contexts/ButtonNestingContext.js

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+const ButtonNestingContext = createContext(false);
+export {
+  ButtonNestingContext
+};
+//# sourceMappingURL=ButtonNestingContext.js.map

package/dist/esm/contexts/ButtonNestingContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/contexts/ButtonNestingContext.tsx"],
+  "sourcesContent": ["import { createContext } from 'react'\n\nexport const ButtonNestingContext = createContext(false)\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAEvB,MAAM,uBAAuB,cAAc,KAAK;",
+  "names": []
+}

package/dist/esm/createComponent.js

@@ -3,13 +3,11 @@ import { useComposedRefs } from "@tamagui/compose-refs";
 import { isClient, isRSC, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import {
   composeEventHandlers,
-  stylePropsTransform,
   stylePropsView,
   validPseudoKeys,
   validStyles
 } from "@tamagui/helpers";
 import { useResponderEvents } from "@tamagui/react-native-use-responder-events";
-import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
   Children,
   Fragment,
@@ -26,20 +24,19 @@ import { stackDefaultStyles } from "./constants/constants";
 import { FontLanguageContext } from "./contexts/FontLanguageContext";
 import { TextAncestorContext } from "./contexts/TextAncestorContext";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import { getSubStyle, useSplitStyles } from "./helpers/getSplitStyles";
+import { getRect } from "./helpers/getRect";
+import { useSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
 import { mergeProps } from "./helpers/mergeProps";
-import { mergeTransform } from "./helpers/mergeTransform";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { useShallowSetState } from "./helpers/useShallowSetState";
-import { getRect, measureLayout, useElementLayout } from "./hooks/useElementLayout";
+import { measureLayout, useElementLayout } from "./hooks/useElementLayout";
 import { addMediaQueryListener, getInitialMediaState } from "./hooks/useMedia";
 import { useServerRef, useServerState } from "./hooks/useServerHooks";
-import { getThemeManager, useTheme } from "./hooks/useTheme";
+import { getThemeIsNewTheme, getThemeManager, useTheme } from "./hooks/useTheme";
 import { usePressability } from "./vendor/Pressability";
 import { Slot, mergeEvent } from "./views/Slot";
 import { wrapThemeManagerContext } from "./views/Theme";
-React["keep"];
 process.env.TAMAGUI_TARGET;
 let defaultComponentState = null;
 let defaultComponentStateMounted = null;
@@ -79,7 +76,6 @@ function createComponent(configIn, ParentComponent) {
     }
   })();
   const defaultComponentClassName = `is_${staticConfig.componentName}`;
-  const avoidClassesWhileAnimating = true;
   let defaultNativeStyle;
   let tamaguiDefaultProps;
   let defaultTag;
@@ -95,6 +91,9 @@ function createComponent(configIn, ParentComponent) {
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
+    const animationsConfig = tamaguiConfig.animations;
+    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 states = useServerState(
@@ -103,15 +102,28 @@ function createComponent(configIn, ParentComponent) {
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
     const setState = states[1];
     const setStateShallow = useShallowSetState(setState, debugProp, componentName);
-    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
-    const hasEverAnimated = useRef(false);
+    const stateRef = useRef(
+      void 0
+    );
+    stateRef.current ??= {};
     const isAnimated = (() => {
       const next = !!(useAnimations && props.animation);
-      if (next && !hasEverAnimated.current) {
-        hasEverAnimated.current = true;
+      if (next && !stateRef.current.hasAnimated) {
+        stateRef.current.hasAnimated = true;
       }
-      return next || hasEverAnimated.current;
+      return next || stateRef.current.hasAnimated;
     })();
+    const usePresence = (_a = tamaguiConfig.animations) == null ? void 0 : _a.usePresence;
+    const presence = !isRSC && isAnimated ? usePresence() : null;
+    if (isAnimated && presence) {
+      const presenceState = presence[2];
+      if (presenceState) {
+        if (presenceState.enterVariant)
+          props[presenceState.enterVariant] = true;
+        if (presenceState.exitVariant)
+          props[presenceState.exitVariant] = true;
+      }
+    }
     const isReactNative = Boolean(
       staticConfig.isReactNative || isAnimated && tamaguiConfig.animations.isReactNative
     );
@@ -124,18 +136,22 @@ function createComponent(configIn, ParentComponent) {
         console.group(`%c ${banner}`, "background: yellow;");
         if (!isServer) {
           console.log(`state`, state);
-          console.groupCollapsed("props");
-          console.log(props);
-          console.log("order", Object.keys(props));
-          console.groupEnd();
         }
       }
     }
     const shouldAvoidClasses = !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
     const shouldForcePseudo = !!propsIn.forceStyle;
     const noClassNames = shouldAvoidClasses || shouldForcePseudo;
-    const forceUpdate = useForceUpdate();
-    const theme = useTheme(props.theme, componentName, props, forceUpdate, !noClassNames);
+    const theme = useTheme({
+      name: props.theme,
+      componentName,
+      reset: props.reset,
+      inverse: props.themeInverse,
+      disable: props["data-themeable"],
+      debug: props.debug
+    });
+    const themeManager = getThemeManager(theme);
+    const themeIsNew = getThemeIsNewTheme(theme);
     const shouldSetMounted = needsMount && state.unmounted;
     const setMounted = shouldSetMounted ? () => {
       setTimeout(
@@ -157,6 +173,7 @@ function createComponent(configIn, ParentComponent) {
     let elementType = isText ? (isAnimated ? AnimatedText : null) || BaseTextComponent : (isAnimated ? AnimatedView : null) || BaseViewComponent;
     elementType = Component || elementType;
     const isStringElement = typeof elementType === "string";
+    const isExiting = (presence == null ? void 0 : presence[0]) === false;
     const splitStyles = useSplitStyles(
       props,
       staticConfig,
@@ -166,7 +183,8 @@ function createComponent(configIn, ParentComponent) {
         noClassNames,
         dynamicStylesInline: noClassNames,
         hasTextAncestor,
-        resolveVariablesAs: "value"
+        resolveVariablesAs: "value",
+        isExiting
       },
       null,
       languageContext || void 0,
@@ -204,41 +222,15 @@ function createComponent(configIn, ParentComponent) {
     const propsWithAnimation = props;
     let animationStyles;
     if (!isRSC && isAnimated && useAnimations) {
-      const animations = useAnimations(propsWithAnimation, {
+      const animations = useAnimations({
+        props: propsWithAnimation,
+        style: splitStylesStyle,
+        presence,
         state,
         pseudos,
         onDidAnimate: props.onDidAnimate,
         hostRef,
-        staticConfig,
-        getStyle({ isExiting, isEntering, exitVariant, enterVariant } = {}) {
-          var _a2, _b2, _c2, _d2;
-          const animationStyle = { ...defaultNativeStyle, ...splitStylesStyle };
-          const enterStyle = isEntering ? enterVariant && ((_a2 = staticConfig.variants) == null ? void 0 : _a2[enterVariant]["true"]) ? getSubStyle(
-            "",
-            (_b2 = staticConfig.variants) == null ? void 0 : _b2[enterVariant]["true"],
-            staticConfig,
-            theme,
-            props,
-            state,
-            tamaguiConfig
-          ) : null : null;
-          const exitStyle = isExiting ? exitVariant && ((_c2 = staticConfig.variants) == null ? void 0 : _c2[exitVariant]["true"]) ? getSubStyle(
-            "",
-            (_d2 = staticConfig.variants) == null ? void 0 : _d2[exitVariant]["true"],
-            staticConfig,
-            theme,
-            props,
-            state,
-            tamaguiConfig
-          ) : pseudos.exitStyle : null;
-          if (isEntering && enterStyle) {
-            merge(animationStyle, enterStyle);
-          }
-          if (isExiting && exitStyle) {
-            merge(animationStyle, exitStyle);
-          }
-          return animationStyle;
-        }
+        staticConfig
       });
       if (animations) {
         animationStyles = animations.style;
@@ -423,7 +415,7 @@ function createComponent(configIn, ParentComponent) {
     const classList = [
       componentName ? componentClassName : "",
       fontFamilyClassName,
-      theme.className,
+      themeIsNew ? theme.className : "",
       classNames ? Object.values(classNames).join(" ") : ""
     ];
     const className = classList.join(" ");
@@ -556,16 +548,19 @@ function createComponent(configIn, ParentComponent) {
     let space = spaceProp;
     if (state.mediaState && mediaKeys.length) {
       for (const key in state.mediaState) {
-        if (state.mediaState[key] && props[key] && props[key].space !== void 0) {
+        if (key in state.mediaState && key in props && props[key].space !== void 0) {
           space = props[key].space;
         }
       }
     }
-    const themeManager = getThemeManager(theme);
-    const shouldSetChildrenThemeToParent = Boolean(
-      themeShallow && themeManager && themeManager.didChangeTheme
-    );
-    const shouldProvideThemeManager = shouldSetChildrenThemeToParent || themeManager && themeManager.didChangeTheme;
+    const themeShouldReset = Boolean(themeShallow && themeManager && themeIsNew);
+    const shouldProvideThemeManager = themeShouldReset || themeManager && themeIsNew;
+    if (shouldProvideThemeManager) {
+      stateRef.current.hasProvidedThemeManager = true;
+    }
+    if (themeShouldReset) {
+      stateRef.current.themeShouldReset = true;
+    }
     const childEls = !children || asChild ? children : wrapThemeManagerContext(
       spacedChildren({
         separator,
@@ -574,8 +569,8 @@ function createComponent(configIn, ParentComponent) {
         direction: props.spaceDirection || "both",
         isZStack
       }),
-      shouldProvideThemeManager ? themeManager : void 0,
-      shouldSetChildrenThemeToParent
+      stateRef.current.hasProvidedThemeManager ? themeManager : void 0,
+      stateRef.current.themeShouldReset
     );
     let content;
     if (asChild) {
@@ -905,16 +900,6 @@ function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf)
   }
   return props;
 }
-function merge(base, next) {
-  for (const key in next) {
-    const val = next[key];
-    if (key in stylePropsTransform) {
-      mergeTransform(base, key, val, true);
-    } else {
-      base[key] = val;
-    }
-  }
-}
 function usePlatformMethods(hostRef) {
   useIsomorphicLayoutEffect(() => {
     const node = hostRef.current;
@@ -951,6 +936,16 @@ const dontComposePressabilityKeys = {
 function getMediaStateObject(obj) {
   return Object.fromEntries(Object.entries(obj).flatMap(([k, v]) => v ? [[`$${k}`, v]] : []));
 }
+const baseDefaults = {
+  opacity: 1
+};
+const transformDefaults = {
+  opacity: 1,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
 export {
   Spacer,
   Unspaced,