@tamagui/core 1.0.1-beta.135 → 1.0.1-beta.138

package/dist/esm/helpers/getThemeCSSRules.js

@@ -0,0 +1,74 @@
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
+import { tokensValueToVariable } from "./registerCSSVariable";
+function getThemeCSSRules({
+  config,
+  themeName,
+  theme,
+  names
+}) {
+  const cssRuleSets = [];
+  const hasDarkLight = "light" in config.themes && "dark" in config.themes;
+  const CNP = `.${THEME_CLASSNAME_PREFIX}`;
+  let vars = "";
+  for (const themeKey in theme) {
+    const variable = theme[themeKey];
+    let value = null;
+    if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {
+      value = variable.val;
+    } else {
+      value = tokensValueToVariable.get(variable.val).variable;
+    }
+    vars += `--${themeKey}:${value};`;
+  }
+  const isDarkOrLightBase = themeName === "dark" || themeName === "light";
+  const selectors = names.map((name) => {
+    return `${CNP}${name}`;
+  });
+  if (hasDarkLight) {
+    for (const subName of names) {
+      const isDark = isDarkOrLightBase || subName.startsWith("dark_");
+      const max = config.maxDarkLightNesting ?? 3;
+      if (!isDark && !subName.startsWith("light_")) {
+        selectors.push(`:root:root ${CNP}${subName}`);
+        continue;
+      }
+      const childSelector = `${CNP}${subName.replace(isDark ? "dark_" : "light_", "")}`;
+      const order = isDark ? ["dark", "light"] : ["light", "dark"];
+      if (isDarkOrLightBase) {
+        order.reverse();
+      }
+      const [stronger, weaker] = order;
+      const numSelectors = Math.round(max * 1.5);
+      for (let pi = 0; pi < numSelectors; pi++) {
+        const isOdd = pi % 2 === 1;
+        if (isOdd && pi < 3)
+          continue;
+        const parents = new Array(pi + 1).fill(void 0).map((_, psi) => {
+          return `${CNP}${psi % 2 === 0 ? stronger : weaker}`;
+        });
+        let parentSelectors = parents.length > 1 ? parents.slice(1) : parents;
+        if (isOdd) {
+          const [_first, second, ...rest] = parentSelectors;
+          parentSelectors = [second, ...rest, second];
+        }
+        const lastParentSelector = parentSelectors[parentSelectors.length - 1];
+        selectors.push(`${parentSelectors.join(" ")} ${childSelector === lastParentSelector ? "" : childSelector}`);
+      }
+    }
+  }
+  const rootSep = config.themeClassNameOnRoot ? "" : " ";
+  const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`;
+  cssRuleSets.push(css);
+  if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {
+    const isDark = themeName.startsWith("dark");
+    cssRuleSets.push(`@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
+body { background:${theme.background}; color: ${theme.color} }
+:root {${vars} } 
+}`);
+  }
+  return cssRuleSets;
+}
+export {
+  getThemeCSSRules
+};
+//# sourceMappingURL=getThemeCSSRules.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/getThemeCSSRules.ts"],
+  "sourcesContent": ["import { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Variable } from '../createVariable'\nimport { CreateTamaguiProps, ThemeObject } from '../types'\nimport { tokensValueToVariable } from './registerCSSVariable'\n\nexport function getThemeCSSRules({\n  config,\n  themeName,\n  theme,\n  names,\n}: {\n  config: CreateTamaguiProps\n  themeName: string\n  theme: ThemeObject\n  names: string[]\n}) {\n  const cssRuleSets: string[] = []\n\n  // special case for SSR\n  const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n  const CNP = `.${THEME_CLASSNAME_PREFIX}`\n  let vars = ''\n\n  // themeToVariableToValueMap.set(theme, {})\n  // const varToValMap = themeToVariableToValueMap.get(theme)\n  for (const themeKey in theme) {\n    const variable = theme[themeKey] as Variable\n    let value: any = null\n    // if (varToValMap) {\n    //   varToValMap[variable.variable] = variable.val\n    // }\n    if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n      value = variable.val\n    } else {\n      value = tokensValueToVariable.get(variable.val)!.variable\n    }\n    vars += `--${themeKey}:${value};`\n  }\n\n  const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n  const selectors = names.map((name) => {\n    return `${CNP}${name}`\n  })\n\n  // since we dont specify dark/light in classnames we have to do an awkward specificity war\n  // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n  if (hasDarkLight) {\n    for (const subName of names) {\n      const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n      const max = config.maxDarkLightNesting ?? 3\n\n      if (!isDark && !subName.startsWith('light_')) {\n        // neither light nor dark subtheme, just generate one selector with :root:root which\n        // will override all :root light/dark selectors generated below\n        selectors.push(`:root:root ${CNP}${subName}`)\n        continue\n      }\n\n      const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n      const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n      if (isDarkOrLightBase) {\n        order.reverse()\n      }\n      const [stronger, weaker] = order\n      const numSelectors = Math.round(max * 1.5)\n\n      for (let pi = 0; pi < numSelectors; pi++) {\n        const isOdd = pi % 2 === 1\n        if (isOdd && pi < 3) continue\n        const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n          return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n        })\n        let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n        if (isOdd) {\n          const [_first, second, ...rest] = parentSelectors\n          parentSelectors = [second, ...rest, second]\n        }\n        // avoid .t_light .t_light at the end (make sure child is unique from last parent)\n        const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n        selectors.push(\n          `${parentSelectors.join(' ')} ${\n            childSelector === lastParentSelector ? '' : childSelector\n          }`\n        )\n      }\n    }\n  }\n\n  const rootSep = config.themeClassNameOnRoot ? '' : ' '\n  const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n  cssRuleSets.push(css)\n\n  if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n    // add media prefers for dark/light base\n    const isDark = themeName.startsWith('dark')\n    cssRuleSets.push(\n      `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\nbody { background:${theme.background}; color: ${theme.color} }\n:root {${vars} } \n}`\n    )\n  }\n\n  return cssRuleSets\n}\n"],
+  "mappings": "AAAA;AAGA;AAEO,0BAA0B;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GAMC;AACD,QAAM,cAAwB,CAAC;AAG/B,QAAM,eAAe,WAAW,OAAO,UAAU,UAAU,OAAO;AAClE,QAAM,MAAM,IAAI;AAChB,MAAI,OAAO;AAIX,aAAW,YAAY,OAAO;AAC5B,UAAM,WAAW,MAAM;AACvB,QAAI,QAAa;AAIjB,QAAI,SAAS,cAAc,CAAC,sBAAsB,IAAI,SAAS,GAAG,GAAG;AACnE,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,cAAQ,sBAAsB,IAAI,SAAS,GAAG,EAAG;AAAA,IACnD;AACA,YAAQ,KAAK,YAAY;AAAA,EAC3B;AAEA,QAAM,oBAAoB,cAAc,UAAU,cAAc;AAChE,QAAM,YAAY,MAAM,IAAI,CAAC,SAAS;AACpC,WAAO,GAAG,MAAM;AAAA,EAClB,CAAC;AAID,MAAI,cAAc;AAChB,eAAW,WAAW,OAAO;AAC3B,YAAM,SAAS,qBAAqB,QAAQ,WAAW,OAAO;AAC9D,YAAM,MAAM,OAAO,uBAAuB;AAE1C,UAAI,CAAC,UAAU,CAAC,QAAQ,WAAW,QAAQ,GAAG;AAG5C,kBAAU,KAAK,cAAc,MAAM,SAAS;AAC5C;AAAA,MACF;AAEA,YAAM,gBAAgB,GAAG,MAAM,QAAQ,QAAQ,SAAS,UAAU,UAAU,EAAE;AAC9E,YAAM,QAAQ,SAAS,CAAC,QAAQ,OAAO,IAAI,CAAC,SAAS,MAAM;AAC3D,UAAI,mBAAmB;AACrB,cAAM,QAAQ;AAAA,MAChB;AACA,YAAM,CAAC,UAAU,UAAU;AAC3B,YAAM,eAAe,KAAK,MAAM,MAAM,GAAG;AAEzC,eAAS,KAAK,GAAG,KAAK,cAAc,MAAM;AACxC,cAAM,QAAQ,KAAK,MAAM;AACzB,YAAI,SAAS,KAAK;AAAG;AACrB,cAAM,UAAU,IAAI,MAAM,KAAK,CAAC,EAAE,KAAK,MAAS,EAAE,IAAI,CAAC,GAAG,QAAQ;AAChE,iBAAO,GAAG,MAAM,MAAM,MAAM,IAAI,WAAW;AAAA,QAC7C,CAAC;AACD,YAAI,kBAAkB,QAAQ,SAAS,IAAI,QAAQ,MAAM,CAAC,IAAI;AAC9D,YAAI,OAAO;AACT,gBAAM,CAAC,QAAQ,WAAW,QAAQ;AAClC,4BAAkB,CAAC,QAAQ,GAAG,MAAM,MAAM;AAAA,QAC5C;AAEA,cAAM,qBAAqB,gBAAgB,gBAAgB,SAAS;AACpE,kBAAU,KACR,GAAG,gBAAgB,KAAK,GAAG,KACzB,kBAAkB,qBAAqB,KAAK,eAEhD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU,OAAO,uBAAuB,KAAK;AACnD,QAAM,MAAM,GAAG,UAAU,IAAI,CAAC,MAAM,QAAQ,UAAU,GAAG,EAAE,KAAK,IAAI,MAAM;AAC1E,cAAY,KAAK,GAAG;AAEpB,MAAI,OAAO,+BAA+B,mBAAmB;AAE3D,UAAM,SAAS,UAAU,WAAW,MAAM;AAC1C,gBAAY,KACV,gCAAgC,SAAS,SAAS;AAAA,oBACpC,MAAM,sBAAsB,MAAM;AAAA,SAC7C;AAAA,EAEL;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/helpers/getThemeCSSRules.native.js

@@ -0,0 +1,7 @@
+function getThemeCSSRules() {
+  return [];
+}
+export {
+  getThemeCSSRules
+};
+//# sourceMappingURL=getThemeCSSRules.native.js.map

package/dist/esm/helpers/getThemeCSSRules.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/getThemeCSSRules.native.ts"],
+  "sourcesContent": ["export function getThemeCSSRules() {\n  return []\n}\n"],
+  "mappings": "AAAO,4BAA4B;AACjC,SAAO,CAAC;AACV;",
+  "names": []
+}

package/dist/esm/helpers/themes.js

@@ -0,0 +1,54 @@
+import { createVariable, isVariable } from "../createVariable";
+import { GetThemeUnwrapped } from "../hooks/getThemeUnwrapped";
+function ensureThemeVariable(theme, key) {
+  const val = theme[key];
+  const themeKey = key;
+  if (!isVariable(val)) {
+    theme[key] = createVariable({
+      key: themeKey,
+      name: themeKey,
+      val
+    });
+  } else {
+    if (val.name !== themeKey) {
+      theme[key] = createVariable({
+        key: val.name,
+        name: themeKey,
+        val: val.val
+      });
+    }
+  }
+}
+function proxyThemeToParents(themeName, theme, themes) {
+  const cur = [];
+  const parents = themeName.split("_").slice(0, -1).map((part) => {
+    cur.push(part);
+    return cur.join("_");
+  });
+  const hasParents = parents.length;
+  return new Proxy(theme, {
+    get(target, key) {
+      if (key === GetThemeUnwrapped) {
+        return theme;
+      }
+      if (!hasParents || Reflect.has(target, key)) {
+        return Reflect.get(target, key);
+      }
+      for (let i = parents.length - 1; i >= 0; i--) {
+        const parent = themes[parents[i]];
+        if (!parent) {
+          continue;
+        }
+        if (Reflect.has(parent, key)) {
+          return Reflect.get(parent, key);
+        }
+      }
+      return Reflect.get(target, key);
+    }
+  });
+}
+export {
+  ensureThemeVariable,
+  proxyThemeToParents
+};
+//# sourceMappingURL=themes.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/themes.ts"],
+  "sourcesContent": ["import { createVariable, isVariable } from '../createVariable'\nimport { GetThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { CreateTamaguiProps } from '../types'\n\n// mutates, freeze after\n// shared by createTamagui so extracted here\nexport function ensureThemeVariable(theme: any, key: string) {\n  const val = theme[key]\n  const themeKey = key\n  if (!isVariable(val)) {\n    theme[key] = createVariable({\n      key: themeKey,\n      name: themeKey,\n      val,\n    })\n  } else {\n    if (val.name !== themeKey) {\n      // rename to theme name\n      theme[key] = createVariable({\n        key: val.name,\n        name: themeKey,\n        val: val.val,\n      })\n    }\n  }\n}\n\nexport function proxyThemeToParents(\n  themeName: string,\n  theme: any,\n  themes: CreateTamaguiProps['themes']\n) {\n  // we could test if this is better as just a straight object spread or fancier proxy\n  const cur: string[] = []\n  // if theme is dark_blue_alt1_Button\n  // this will be the parent names in order: ['dark', 'dark_blue', 'dark_blue_alt1\"]\n  const parents = themeName\n    .split('_')\n    .slice(0, -1)\n    .map((part) => {\n      cur.push(part)\n      return cur.join('_')\n    })\n\n  const hasParents = parents.length\n\n  // proxy fallback values to parent theme values\n  return new Proxy(theme, {\n    get(target, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (!hasParents || Reflect.has(target, key)) {\n        return Reflect.get(target, key)\n      }\n      // check parents\n      for (let i = parents.length - 1; i >= 0; i--) {\n        const parent = themes[parents[i]]\n        if (!parent) {\n          continue\n        }\n        if (Reflect.has(parent, key)) {\n          return Reflect.get(parent, key)\n        }\n      }\n      return Reflect.get(target, key)\n    },\n  })\n}\n"],
+  "mappings": "AAAA;AACA;AAKO,6BAA6B,OAAY,KAAa;AAC3D,QAAM,MAAM,MAAM;AAClB,QAAM,WAAW;AACjB,MAAI,CAAC,WAAW,GAAG,GAAG;AACpB,UAAM,OAAO,eAAe;AAAA,MAC1B,KAAK;AAAA,MACL,MAAM;AAAA,MACN;AAAA,IACF,CAAC;AAAA,EACH,OAAO;AACL,QAAI,IAAI,SAAS,UAAU;AAEzB,YAAM,OAAO,eAAe;AAAA,QAC1B,KAAK,IAAI;AAAA,QACT,MAAM;AAAA,QACN,KAAK,IAAI;AAAA,MACX,CAAC;AAAA,IACH;AAAA,EACF;AACF;AAEO,6BACL,WACA,OACA,QACA;AAEA,QAAM,MAAgB,CAAC;AAGvB,QAAM,UAAU,UACb,MAAM,GAAG,EACT,MAAM,GAAG,EAAE,EACX,IAAI,CAAC,SAAS;AACb,QAAI,KAAK,IAAI;AACb,WAAO,IAAI,KAAK,GAAG;AAAA,EACrB,CAAC;AAEH,QAAM,aAAa,QAAQ;AAG3B,SAAO,IAAI,MAAM,OAAO;AAAA,IACtB,IAAI,QAAQ,KAAK;AACf,UAAI,QAAQ,mBAAmB;AAC7B,eAAO;AAAA,MACT;AACA,UAAI,CAAC,cAAc,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC3C,eAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,MAChC;AAEA,eAAS,IAAI,QAAQ,SAAS,GAAG,KAAK,GAAG,KAAK;AAC5C,cAAM,SAAS,OAAO,QAAQ;AAC9B,YAAI,CAAC,QAAQ;AACX;AAAA,QACF;AACA,YAAI,QAAQ,IAAI,QAAQ,GAAG,GAAG;AAC5B,iBAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,QAChC;AAAA,MACF;AACA,aAAO,QAAQ,IAAI,QAAQ,GAAG;AAAA,IAChC;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

package/dist/esm/hooks/useTheme.js

@@ -2,9 +2,13 @@ import { useForceUpdate } from "@tamagui/use-force-update";
 import { useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { getConfig } from "../conf";
 import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+import { ThemeContext } from "../contexts/ThemeContext";
 import { areEqualSets } from "../helpers/areEqualSets";
-import { ThemeContext } from "../ThemeContext";
-import { ThemeManager, ThemeManagerContext, emptyManager } from "../ThemeManager";
+import {
+  ThemeManager,
+  ThemeManagerContext,
+  emptyManager
+} from "../helpers/ThemeManager";
 import { GetThemeUnwrapped } from "./getThemeUnwrapped";
 import { useConstant } from "./useConstant";
 const useTheme = (themeName, componentName, props, forceUpdate) => {
@@ -31,13 +35,14 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
       themeManager == null ? void 0 : themeManager.track(st.uuid, st.keys);
     }
   });
-  return useMemo(() => {
-    if (!theme) {
-      if (process.env.NODE_ENV === "development") {
-        console.warn("No theme", { themeName, theme, componentName, className });
-      }
-      return themes[getConfig().defaultTheme || "light"];
+  const debugProp = props && props["debug"];
+  if (!theme) {
+    if (process.env.NODE_ENV === "development") {
+      console.warn("No theme", { themeName, theme, componentName, className });
     }
+    return themes[getConfig().defaultTheme || Object.keys(themes)[0]];
+  }
+  return useMemo(() => {
     return new Proxy(theme, {
       has(_, key) {
         if (typeof key === "string") {
@@ -72,14 +77,14 @@ const useTheme = (themeName, componentName, props, forceUpdate) => {
         }
         if (state.current.isRendering && !state.current.keys.has(key)) {
           state.current.keys.add(key);
-          if (process.env.NODE_ENV === "development" && (props == null ? void 0 : props["debug"]) === "verbose") {
+          if (process.env.NODE_ENV === "development" && debugProp === "verbose") {
             console.log("  \u{1F538} tracking theme", key);
           }
         }
         return themeManager.getValue(key);
       }
     });
-  }, [name, theme, className]);
+  }, [name, theme, componentName, className, debugProp]);
 };
 const GetThemeManager = Symbol();
 const getThemeManager = (theme) => {
@@ -106,6 +111,7 @@ const useDefaultThemeName = () => {
   var _a;
   return (_a = useContext(ThemeContext)) == null ? void 0 : _a.defaultTheme;
 };
+const activeThemeManagers = /* @__PURE__ */ new Set();
 const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
   const debug = props && props["debug"];
   const parentManager = useContext(ThemeManagerContext) || emptyManager;
@@ -123,10 +129,11 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
     useLayoutEffect(() => {
       if (!themeManager)
         return;
+      activeThemeManagers.add(themeManager);
       if (next == null ? void 0 : next.name) {
         themeManager.update(next);
       }
-      return parentManager.onChangeTheme(() => {
+      const disposeParentOnChange = parentManager.onChangeTheme(() => {
         const next2 = parentManager.getNextTheme(getThemeProps, debug);
         if (!next2)
           return;
@@ -134,6 +141,10 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
           forceUpdate();
         }
       });
+      return () => {
+        activeThemeManagers.delete(themeManager);
+        disposeParentOnChange();
+      };
     }, [themes, name, componentName, debug, next == null ? void 0 : next.name]);
   }
   return {
@@ -147,6 +158,7 @@ const useChangeThemeEffect = (name, componentName, props, forceUpdateProp) => {
   };
 };
 export {
+  activeThemeManagers,
   getThemeManager,
   useChangeThemeEffect,
   useDefaultThemeName,

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \uD83D\uDD39 useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (key === GetThemeUnwrapped) {\n          return theme\n        }\n        if (key === GetThemeManager) {\n          return themeManager\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && props?.['debug'] === 'verbose') {\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n        return themeManager.getValue(key)\n      },\n    })\n  }, [name, theme, className])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  if (!isWeb || typeof document !== 'undefined') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \uD83D\uDD39 useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      console.warn('No theme', { themeName, theme, componentName, className })\n    }\n    return themes[getConfig().defaultTheme || Object.keys(themes)[0]]\n  }\n\n  return useMemo(() => {\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (key === GetThemeUnwrapped) {\n          return theme\n        }\n        if (key === GetThemeManager) {\n          return themeManager\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n        return themeManager.getValue(key)\n      },\n    })\n  }, [name, theme, componentName, className, debugProp])\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  // if not SSR\n  if (!isWeb || typeof document !== 'undefined') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useLayoutEffect(() => {\n      if (!themeManager) return\n\n      activeThemeManagers.add(themeManager)\n\n      if (next?.name) {\n        themeManager.update(next)\n      }\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/index.js

@@ -8,6 +8,8 @@ export * from "./createTokens";
 export * from "./createVariable";
 export * from "./createVariables";
 export * from "./insertFont";
+export * from "./addTheme";
+export * from "./updateTheme";
 export * from "./styled";
 export * from "./types";
 import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from "./conf";
@@ -46,7 +48,7 @@ export * from "./hooks/useUnmountEffect";
 export * from "./views/Slot";
 export * from "./views/Stack";
 export * from "./views/Text";
-import { TextAncestorProvider, TextAncestorContext } from "./views/TextAncestorContext";
+import { TextAncestorProvider, TextAncestorContext } from "./contexts/TextAncestorContext";
 export * from "./views/Theme";
 export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './styled'\nexport * from './types'\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport { createDOMProps } from '@tamagui/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/getFont'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/startTransition'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsSSR'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport { TextAncestorProvider, TextAncestorContext } from './views/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\nexport * from './views/FontLanguage'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/helpers'\n"],
-  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;",
+  "sourcesContent": ["export * from './Tamagui'\nexport * from './createComponent'\nexport * from './createShorthands'\nexport * from './createTheme'\nexport * from './createTamagui'\nexport * from './createFont'\nexport * from './createTokens'\nexport * from './createVariable'\nexport * from './createVariables'\nexport * from './insertFont'\nexport * from './addTheme'\nexport * from './updateTheme'\nexport * from './styled'\nexport * from './types'\n\n// for type portability\nexport type { RNWTextProps, RNWViewProps } from './types-rnw'\nexport { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } from './conf'\n\nexport * from './constants/constants'\nexport * from './constants/platform'\nexport { createDOMProps } from '@tamagui/rnw'\n\nexport * from './helpers/calc'\nexport * from './helpers/createShallowUpdate'\nexport * from './helpers/getStackSize'\nexport * from './helpers/getVariantExtras'\nexport * from './helpers/getExpandedShorthands'\nexport * from './helpers/getSize'\nexport * from './helpers/getSplitStyles'\nexport * from './helpers/getStylesAtomic'\nexport * from './helpers/pseudoDescriptors'\nexport * from './helpers/mergeProps'\nexport * from './helpers/expandStyles'\nexport * from './helpers/getFont'\nexport * from './helpers/isObj'\nexport * from './helpers/isTamaguiElement'\nexport * from './helpers/isTamaguiComponent'\nexport * from './helpers/matchMedia'\nexport * from './helpers/startTransition'\nexport * from './helpers/themeable'\nexport * from './helpers/withStaticProperties'\n\nexport * from './contexts/ButtonInsideButtonContext'\n\nexport * from './hooks/useConstant'\nexport * from './hooks/useId'\nexport * from './hooks/useIsMounted'\nexport * from './hooks/useIsTouchDevice'\nexport * from './hooks/useMedia'\nexport * from './hooks/usePressable'\nexport * from './hooks/useTheme'\nexport * from './hooks/useIsSSR'\nexport * from './hooks/useUnmountEffect'\n\nexport * from './views/Slot'\nexport * from './views/Stack'\nexport * from './views/Text'\nexport { TextAncestorProvider, TextAncestorContext } from './contexts/TextAncestorContext'\nexport * from './views/Theme'\nexport * from './views/ThemeInverse'\nexport * from './views/ThemeProvider'\nexport * from './views/ThemeReset'\nexport * from './views/FontLanguage'\n\nexport * from '@tamagui/use-force-update'\nexport * from '@tamagui/use-event'\nexport * from '@tamagui/helpers'\n"],
+  "mappings": "AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA;AAEA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;",
   "names": []
 }

package/dist/esm/loadTheme.js

@@ -0,0 +1,40 @@
+import { getConfig } from "./conf";
+import { ensureThemeVariable, getThemeCSSRules, proxyThemeToParents } from "./helpers/themes";
+const loadTheme = ({
+  name: themeName,
+  theme: themeIn,
+  insertCSS
+}) => {
+  const config = getConfig();
+  if (!config) {
+    throw new Error(`Must run createTamagui once before loading theme`);
+  }
+  if (config.themes[themeName]) {
+    throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`);
+  }
+  const theme = { ...themeIn };
+  for (const key in theme) {
+    ensureThemeVariable(theme, key);
+  }
+  const cssRules = getThemeCSSRules({
+    config,
+    themeName,
+    names: [themeName],
+    theme
+  });
+  const themeProxied = proxyThemeToParents(themeName, theme, config.themes);
+  config.themes[themeName] = themeProxied;
+  if (insertCSS && typeof document !== "undefined") {
+    const style = document.createElement("style");
+    style.appendChild(document.createTextNode(cssRules.join("\n")));
+    document.head.appendChild(style);
+  }
+  return {
+    theme: themeProxied,
+    cssRules
+  };
+};
+export {
+  loadTheme
+};
+//# sourceMappingURL=loadTheme.js.map

package/dist/esm/loadTheme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/loadTheme.ts"],
+  "sourcesContent": ["import { getConfig } from './conf'\nimport { ensureThemeVariable, getThemeCSSRules, proxyThemeToParents } from './helpers/themes'\nimport { ThemeObject } from './types'\n\nexport const loadTheme = ({\n  name: themeName,\n  theme: themeIn,\n  insertCSS,\n}: {\n  name: string\n  theme: ThemeObject\n  insertCSS?: boolean\n}) => {\n  const config = getConfig()\n  if (!config) {\n    throw new Error(`Must run createTamagui once before loading theme`)\n  }\n  if (config.themes[themeName]) {\n    throw new Error(`Already defined theme \"${themeName}\", use updateTheme to change values`)\n  }\n  const theme = { ...themeIn }\n  for (const key in theme) {\n    ensureThemeVariable(theme, key)\n  }\n  const cssRules = getThemeCSSRules({\n    config,\n    themeName,\n    names: [themeName],\n    theme,\n  })\n  const themeProxied = proxyThemeToParents(themeName, theme, config.themes)\n  config.themes[themeName] = themeProxied\n\n  if (insertCSS && typeof document !== 'undefined') {\n    const style = document.createElement('style')\n    style.appendChild(document.createTextNode(cssRules.join('\\n')))\n    document.head.appendChild(style)\n  }\n\n  return {\n    theme: themeProxied,\n    cssRules,\n  }\n}\n"],
+  "mappings": "AAAA;AACA;AAGO,MAAM,YAAY,CAAC;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AAAA,EACP;AAAA,MAKI;AACJ,QAAM,SAAS,UAAU;AACzB,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,MAAI,OAAO,OAAO,YAAY;AAC5B,UAAM,IAAI,MAAM,0BAA0B,8CAA8C;AAAA,EAC1F;AACA,QAAM,QAAQ,EAAE,GAAG,QAAQ;AAC3B,aAAW,OAAO,OAAO;AACvB,wBAAoB,OAAO,GAAG;AAAA,EAChC;AACA,QAAM,WAAW,iBAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,OAAO,CAAC,SAAS;AAAA,IACjB;AAAA,EACF,CAAC;AACD,QAAM,eAAe,oBAAoB,WAAW,OAAO,OAAO,MAAM;AACxE,SAAO,OAAO,aAAa;AAE3B,MAAI,aAAa,OAAO,aAAa,aAAa;AAChD,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,YAAY,SAAS,eAAe,SAAS,KAAK,IAAI,CAAC,CAAC;AAC9D,aAAS,KAAK,YAAY,KAAK;AAAA,EACjC;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/updateTheme.js

@@ -0,0 +1,20 @@
+import { addTheme } from "./addTheme";
+import { activeThemeManagers } from "./hooks/useTheme";
+function updateTheme({ name, theme }) {
+  const next = addTheme({ name, theme, insertCSS: true, update: true });
+  if (process.env.TAMAGUI_TARGET === "native") {
+    activeThemeManagers.forEach((manager) => {
+      if (manager.name === name) {
+        manager.update({
+          name,
+          theme: next.theme
+        }, true);
+      }
+    });
+  }
+  return next;
+}
+export {
+  updateTheme
+};
+//# sourceMappingURL=updateTheme.js.map

package/dist/esm/updateTheme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/updateTheme.ts"],
+  "sourcesContent": ["import { addTheme } from './addTheme'\nimport { activeThemeManagers } from './hooks/useTheme'\nimport { ThemeObject } from './types'\n\nexport function updateTheme({ name, theme }: { name: string; theme: ThemeObject }) {\n  const next = addTheme({ name, theme, insertCSS: true, update: true })\n\n  if (process.env.TAMAGUI_TARGET === 'native') {\n    activeThemeManagers.forEach((manager) => {\n      if (manager.name === name) {\n        manager.update(\n          {\n            name,\n            theme: next.theme,\n          },\n          true\n        )\n      }\n    })\n  }\n\n  return next\n}\n"],
+  "mappings": "AAAA;AACA;AAGO,qBAAqB,EAAE,MAAM,SAA+C;AACjF,QAAM,OAAO,SAAS,EAAE,MAAM,OAAO,WAAW,MAAM,QAAQ,KAAK,CAAC;AAEpE,MAAI,QAAQ,IAAI,mBAAmB,UAAU;AAC3C,wBAAoB,QAAQ,CAAC,YAAY;AACvC,UAAI,QAAQ,SAAS,MAAM;AACzB,gBAAQ,OACN;AAAA,UACE;AAAA,UACA,OAAO,KAAK;AAAA,QACd,GACA,IACF;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/vendor/Pressability.js

@@ -0,0 +1,7 @@
+const Pressability = {};
+const usePressability = {};
+export {
+  Pressability,
+  usePressability
+};
+//# sourceMappingURL=Pressability.js.map

package/dist/esm/vendor/Pressability.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/vendor/Pressability.tsx"],
+  "sourcesContent": ["export const Pressability = {} as any\nexport const usePressability = {} as Function\n"],
+  "mappings": "AAAO,MAAM,eAAe,CAAC;AACtB,MAAM,kBAAkB,CAAC;",
+  "names": []
+}

package/dist/esm/vendor/Pressability.native.js

@@ -0,0 +1,7 @@
+const Pressability = require("react-native/Libraries/Pressability/Pressability").default;
+const usePressability = require("react-native/Libraries/Pressability/usePressability").default;
+export {
+  Pressability,
+  usePressability
+};
+//# sourceMappingURL=Pressability.native.js.map

package/dist/esm/vendor/Pressability.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/vendor/Pressability.native.tsx"],
+  "sourcesContent": ["export const Pressability = require('react-native/Libraries/Pressability/Pressability').default\nexport const usePressability =\n  require('react-native/Libraries/Pressability/usePressability').default\n"],
+  "mappings": "AAAO,MAAM,eAAe,QAAQ,kDAAkD,EAAE;AACjF,MAAM,kBACX,QAAQ,qDAAqD,EAAE;",
+  "names": []
+}

package/dist/esm/views/Theme.js

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from "react";
 import { isWeb } from "../constants/platform";
+import { ThemeManagerContext } from "../helpers/ThemeManager";
 import { useChangeThemeEffect } from "../hooks/useTheme";
-import { ThemeManagerContext } from "../ThemeManager";
 React["createElement"];
 const Theme = memo(function Theme2(props) {
   var _a, _b;

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 { ThemeProps, useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeManager, ThemeManagerContext } from '../ThemeManager'\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    [props.children, themeManager]\n  )\n\n  if (missingTheme) {\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  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: themes[name]?.color?.toString(),\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"],
+  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\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    [props.children, themeManager]\n  )\n\n  if (missingTheme) {\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  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: themes[name]?.color?.toString(),\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;AAGA,MAAM;AAEC,MAAM,QAAQ,KAAK,gBAAe,OAAmB;AAT5D;AAUE,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,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,cAAc;AAChB,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,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,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;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": []
 }

package/dist/esm/views/ThemeInverse.js

@@ -2,13 +2,6 @@ import React, { useState } from "react";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
 import { useDefaultThemeName, useThemeName } from "../hooks/useTheme";
 import { Theme } from "./Theme";
-let inversions = {
-  light: "dark",
-  dark: "light"
-};
-function setThemeInversions(next) {
-  inversions = next;
-}
 const ThemeInverse = ({
   children,
   disable
@@ -17,7 +10,12 @@ const ThemeInverse = ({
   const defaultTheme = useDefaultThemeName();
   const [name, setName] = useState(null);
   useIsomorphicLayoutEffect(() => {
-    setName(inversions[themeName] || inversions[defaultTheme || ""] || null);
+    if (themeName.startsWith("dark")) {
+      setName("light");
+    }
+    if (themeName.startsWith("light")) {
+      setName("dark");
+    }
   }, [defaultTheme, themeName]);
   if (disable) {
     return children;
@@ -27,7 +25,6 @@ const ThemeInverse = ({
   }, children);
 };
 export {
-  ThemeInverse,
-  setThemeInversions
+  ThemeInverse
 };
 //# sourceMappingURL=ThemeInverse.js.map

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

@@ -1,7 +1,7 @@
 {
   "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\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\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    setName(inversions[themeName] || inversions[defaultTheme || ''] || null)\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;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,4BAA4B,MAAoB;AACrD,eAAa;AACf;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,YAAQ,WAAW,cAAc,WAAW,gBAAgB,OAAO,IAAI;AAAA,EACzE,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AAEA,SAAO,oCAAC;AAAA,IAAM;AAAA,KAAa,QAAS;AACtC;",
+  "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;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useMemo } from "react";
 import { getHasConfigured } from "../conf";
 import { THEME_CLASSNAME_PREFIX } from "../constants/constants";
-import { ThemeContext } from "../ThemeContext";
+import { ThemeContext } from "../contexts/ThemeContext";
 import { Theme } from "./Theme";
 React["createElement"];
 const ThemeProvider = (props) => {

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  className?: string\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\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      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])\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"],
+  "sourcesContent": ["import React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getHasConfigured } from '../conf'\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  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\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      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])\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;AAYC,MAAM,gBAAgB,CAAC,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,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,qBAAqB,CAAC;AAAA,EACtD;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;",
   "names": []
 }

package/dist/esm/views/ThemeReset.js

@@ -1,6 +1,6 @@
 import React, { useContext, useLayoutEffect, useState } from "react";
 import { isWeb } from "../constants/platform";
-import { ThemeManagerContext } from "../ThemeManager";
+import { ThemeManagerContext } from "../helpers/ThemeManager";
 import { Theme } from "./Theme";
 React["createElement"];
 const ThemeReset = (props) => {