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

package/dist/esm/ThemeManager.js

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

package/dist/esm/ThemeManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/ThemeManager.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from './conf'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from './static'\nimport { ThemeObject, Themes } from './types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n  className?: string\n  parentManager?: ThemeManager | null\n  name?: string | null\n  theme?: any\n}\n\nexport class ThemeManager {\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  className: string | null = null\n\n  constructor(\n    public name: string | null = null,\n    public theme: ThemeObject | null = null,\n    public parentManager: ThemeManager | null = null\n  ) {\n    // find the nearest different parentManager\n    let parent = parentManager\n    let tries = 0\n    while (true) {\n      tries++\n      if (tries > 10) {\n        throw new Error(`Nested 10 of the same theme in a row, likely error`)\n      }\n      if (!parent) break\n      if (parent.name === name) {\n        // go up if same\n        parent = parent.parentManager\n      } else {\n        this.parentManager = parent\n        break\n      }\n    }\n  }\n\n  get parentName() {\n    return this.parentManager?.name || null\n  }\n\n  get fullName(): string {\n    return this.getNextTheme().name || this.name || ''\n    // const parentName = this.parentManager?.fullName || ''\n    // const name = this.name || ''\n    // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n    // return parts.join('_')\n  }\n\n  // gets value going up to parents\n  getValue(key: string) {\n    let theme = this.theme\n    let manager = this as ThemeManager | null\n    while (true) {\n      if (!theme) return\n      if (key in theme) {\n        return theme[key]\n      }\n      manager = this.parentManager\n      if (!manager) {\n        return\n      }\n      if (manager.theme === theme) {\n        return\n      }\n      theme = manager.theme\n    }\n  }\n\n  update({ name, theme, className }: SetActiveThemeProps = {}) {\n    // className compare on web, avoids light/dark re-renders\n    const sameNameOrClassName = this.className\n      ? // == instead of === (sometimes its undefined/null)\n        className == this.className\n      : name === this.name\n    if (sameNameOrClassName) {\n      return false\n    }\n    this.className = className || null\n    this.name = name || null\n    this.theme = theme\n    this.notifyListeners()\n    return true\n  }\n\n  getNextTheme(\n    opts: { themes?: Themes; name?: string | null; componentName?: string | null } = {},\n    props?: any\n  ) {\n    const { themes = getThemes(), name, componentName } = opts\n\n    if (!name) {\n      if (componentName) {\n        const name = `${this.name}_${componentName}`\n        const theme = themes[name]\n        if (theme) {\n          return { name, theme, className: this.#getClassName(name) }\n        }\n      }\n      return {\n        name: this.name,\n        theme: this.theme,\n      }\n    }\n\n    let nextName = name || this.name || ''\n    let parentName = this.fullName\n\n    while (true) {\n      if (nextName in themes) {\n        break\n      }\n      nextName = `${parentName}_${name}`\n      if (nextName in themes) {\n        break\n      }\n      if (!parentName.includes(THEME_NAME_SEPARATOR)) {\n        // not found!\n        console.warn('theme not found', name)\n        break\n      }\n      // go up one\n      parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n    }\n\n    if (componentName) {\n      const componentThemeName = `${nextName}_${componentName}`\n      if (componentThemeName in themes) {\n        nextName = componentThemeName\n      }\n    }\n\n    let theme = themes[nextName]\n    if (!theme) {\n      theme = themes[`light_${nextName}`]\n    }\n\n    if (process.env.NODE_ENV === 'development' && props && props['debug']) {\n      console.log('getNextTheme', { opts, nextName, parentName }, this)\n    }\n\n    return {\n      name: nextName,\n      theme,\n      className: this.#getClassName(nextName),\n    }\n  }\n\n  #getClassName(name: string) {\n    return `${THEME_CLASSNAME_PREFIX}${name} tui_theme`.replace('light_', '').replace('dark_', '')\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  notifyListeners() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from './conf'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from './constants/constants'\nimport { ThemeObject, Themes } from './types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n  className?: string\n  parentManager?: ThemeManager | null\n  name?: string | null\n  theme?: any\n}\n\nexport class ThemeManager {\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  className: string | null = null\n\n  constructor(\n    public name: string = '',\n    public theme: ThemeObject | null = null,\n    public parentManager: ThemeManager | null = null\n  ) {\n    // find the nearest different parentManager\n    let parent = parentManager\n    let tries = 0\n    while (true) {\n      tries++\n      if (tries > 10) {\n        throw new Error(`Nested 10 of the same theme in a row, likely error`)\n      }\n      if (!parent) break\n      if (parent.name === name) {\n        // go up if same\n        parent = parent.parentManager\n      } else {\n        this.parentManager = parent\n        break\n      }\n    }\n  }\n\n  get parentName() {\n    return this.parentManager?.name || null\n  }\n\n  get fullName(): string {\n    return this.getNextTheme().name || this.name || ''\n    // const parentName = this.parentManager?.fullName || ''\n    // const name = this.name || ''\n    // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)\n    // return parts.join('_')\n  }\n\n  // gets value going up to parents\n  getValue(key: string) {\n    let theme = this.theme\n    let manager = this as ThemeManager | null\n    while (true) {\n      if (!theme) return\n      if (key in theme) {\n        return theme[key]\n      }\n      manager = this.parentManager\n      if (!manager) {\n        return\n      }\n      if (manager.theme === theme) {\n        return\n      }\n      theme = manager.theme\n    }\n  }\n\n  update({ name, theme, className }: SetActiveThemeProps = {}) {\n    // className compare on web, avoids light/dark re-renders\n    const sameNameOrClassName = this.className\n      ? // == instead of === (sometimes its undefined/null)\n        className == this.className\n      : name === this.name\n    if (sameNameOrClassName) {\n      return false\n    }\n    this.className = className || null\n    this.name = name || ''\n    this.theme = theme\n    this.notifyListeners()\n    return true\n  }\n\n  getNextTheme(\n    opts: { themes?: Themes; name?: string | null; componentName?: string | null } = {},\n    props?: any\n  ) {\n    const { themes = getThemes(), name, componentName } = opts\n\n    if (!name) {\n      if (componentName) {\n        // allow for _Card_Button or just _Button\n        const names = [\n          `${this.name}_${componentName}`,\n          `${withoutComponentName(this.name)}_${componentName}`,\n        ]\n        for (const name of names) {\n          if (name in themes) {\n            return { name, theme: themes[name], className: this.#getClassName(name) }\n          }\n        }\n      }\n      return {\n        name: this.name,\n        theme: this.theme,\n      }\n    }\n\n    let nextName = name || this.name || ''\n    let parentName = this.fullName\n\n    while (true) {\n      if (nextName in themes) {\n        break\n      }\n      nextName = `${parentName}_${name}`\n      if (nextName in themes) {\n        break\n      }\n      if (!parentName.includes(THEME_NAME_SEPARATOR)) {\n        // not found!\n        console.warn('theme not found', name)\n        break\n      }\n      // go up one\n      parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))\n    }\n\n    if (componentName) {\n      // allow for _Card_Button or just _Button\n      const names = [\n        `${nextName}_${componentName}`,\n        `${withoutComponentName(nextName)}_${componentName}`,\n      ]\n      for (const name of names) {\n        if (name in themes) {\n          nextName = name\n        }\n      }\n    }\n\n    let theme = themes[nextName]\n    if (!theme) {\n      theme = themes[`light_${nextName}`]\n    }\n\n    if (process.env.NODE_ENV === 'development' && props && props['debug']) {\n      console.log('getNextTheme', { name: opts.name, nextName, parentName })\n    }\n\n    return {\n      name: nextName,\n      theme,\n      className: this.#getClassName(nextName),\n    }\n  }\n\n  #getClassName(name: string) {\n    return `${THEME_CLASSNAME_PREFIX}${name} tui_theme`.replace('light_', '').replace('dark_', '')\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  notifyListeners() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n\nconst withoutComponentName = (name: string) => name.replace(/\\_[A-Z][a-z]+$/, '')\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/conf.js

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

package/dist/esm/conf.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/conf.ts"],
-  "sourcesContent": ["import { Tamagui } from './Tamagui'\nimport { ConfigListener, TamaguiInternalConfig } 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(conf!))\n    configListeners.clear()\n  }\n}\n\nexport const getHasConfigured = () => !!conf\nexport const getConfig = () => conf!\nexport const getTokens = () => conf!.tokensParsed\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  if (!globalThis['Tamagui']) {\n    Tamagui.config = conf\n    globalThis['Tamagui'] = Tamagui\n  }\n}\n"],
-  "mappings": ";;AAAA;AAGA,IAAI;AAEG,MAAM,YAAY,wBAAC,SAAgC;AACxD,SAAO;AACP,MAAI,gBAAgB,MAAM;AACxB,oBAAgB,QAAQ,CAAC,OAAO,GAAG,IAAK,CAAC;AACzC,oBAAgB,MAAM;AAAA,EACxB;AACF,GANyB;AAQlB,MAAM,mBAAmB,6BAAM,CAAC,CAAC,MAAR;AACzB,MAAM,YAAY,6BAAM,MAAN;AAClB,MAAM,YAAY,6BAAM,KAAM,cAAZ;AAClB,MAAM,YAAY,6BAAM,KAAM,QAAZ;AAElB,MAAM,kBAAkB,oBAAI,IAAoB;AAEhD,MAAM,mBAAmB,wBAAC,OAAuB;AACtD,MAAI,MAAM;AACR,OAAG,IAAI;AAAA,EACT,OAAO;AACL,oBAAgB,IAAI,EAAE;AAAA,EACxB;AAEA,MAAI,CAAC,WAAW,YAAY;AAC1B,YAAQ,SAAS;AACjB,eAAW,aAAa;AAAA,EAC1B;AACF,GAXgC;",
+  "sourcesContent": ["import { Tamagui } from './Tamagui'\nimport { ConfigListener, TamaguiInternalConfig } 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(conf!))\n    configListeners.clear()\n  }\n}\n\nexport const getHasConfigured = () => !!conf\nexport const getConfig = () => conf!\nexport const getTokens = () => conf!.tokensParsed\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  if (!globalThis['Tamagui']) {\n    globalThis['Tamagui'] = Tamagui\n  }\n}\n"],
+  "mappings": ";;AAAA;AAGA,IAAI;AAEG,MAAM,YAAY,wBAAC,SAAgC;AACxD,SAAO;AACP,MAAI,gBAAgB,MAAM;AACxB,oBAAgB,QAAQ,CAAC,OAAO,GAAG,IAAK,CAAC;AACzC,oBAAgB,MAAM;AAAA,EACxB;AACF,GANyB;AAQlB,MAAM,mBAAmB,6BAAM,CAAC,CAAC,MAAR;AACzB,MAAM,YAAY,6BAAM,MAAN;AAClB,MAAM,YAAY,6BAAM,KAAM,cAAZ;AAClB,MAAM,YAAY,6BAAM,KAAM,QAAZ;AAElB,MAAM,kBAAkB,oBAAI,IAAoB;AAEhD,MAAM,mBAAmB,wBAAC,OAAuB;AACtD,MAAI,MAAM;AACR,OAAG,IAAK;AAAA,EACV,OAAO;AACL,oBAAgB,IAAI,EAAE;AAAA,EACxB;AAEA,MAAI,CAAC,WAAW,YAAY;AAC1B,eAAW,aAAa;AAAA,EAC1B;AACF,GAVgC;",
   "names": []
 }

package/dist/esm/constants/platform.js

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/constants/platform.ts"],
-  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\n\nexport const isWeb =\n  process.env.TAMAGUI_TARGET !== 'native' &&\n  (process.env.TAMAGUI_TARGET === 'web' || Platform?.OS === 'web')\n\nexport const isSSR = isWeb && typeof window === 'undefined'\nexport const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const supportsTouchWeb = typeof window !== 'undefined' && 'ontouchstart' in window\nexport const isTouchDevice = !isWeb || supportsTouchWeb\nexport const isWebIOS =\n  isWeb &&\n  typeof navigator !== 'undefined' &&\n  (/iPad|iPhone|iPod/.test(navigator.platform) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&\n  !window['MSStream']\n"],
-  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAE/B,MAAM,QACX,QAAQ,IAAI,mBAAmB,YAC9B,SAAQ,IAAI,mBAAmB,SAAS,uCAAU,QAAO;AAErD,MAAM,QAAQ,SAAS,OAAO,WAAW;AACzC,MAAM,4BAA4B,QAAQ,YAAY;AACtD,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,mBAAmB,OAAO,WAAW,eAAe,kBAAkB;AAC5E,MAAM,gBAAgB,CAAC,SAAS;AAChC,MAAM,WACX,SACA,OAAO,cAAc,eACpB,oBAAmB,KAAK,UAAU,QAAQ,KACxC,UAAU,aAAa,cAAc,UAAU,iBAAiB,MACnE,CAAC,OAAO;",
+  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\n\nexport const isWeb =\n  process.env.TAMAGUI_TARGET !== 'native' &&\n  (process.env.TAMAGUI_TARGET === 'web' || Platform?.OS === 'web')\n\nexport const isSSR = isWeb && typeof window === 'undefined'\nexport const isClient = isWeb && typeof window !== 'undefined'\nexport const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const supportsTouchWeb = typeof window !== 'undefined' && 'ontouchstart' in window\nexport const isTouchDevice = !isWeb || supportsTouchWeb\nexport const isWebIOS =\n  isWeb &&\n  typeof navigator !== 'undefined' &&\n  (/iPad|iPhone|iPod/.test(navigator.platform) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) &&\n  !window['MSStream']\n"],
+  "mappings": "AAAA;AAAA;AACA;AAEO,MAAM,YAAY,uCAAU,QAAO;AACnC,MAAM,QAAQ,uCAAU,QAAO;AAE/B,MAAM,QACX,QAAQ,IAAI,mBAAmB,YAC9B,SAAQ,IAAI,mBAAmB,SAAS,uCAAU,QAAO;AAErD,MAAM,QAAQ,SAAS,OAAO,WAAW;AACzC,MAAM,WAAW,SAAS,OAAO,WAAW;AAC5C,MAAM,4BAA4B,QAAQ,YAAY;AACtD,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,mBAAmB,OAAO,WAAW,eAAe,kBAAkB;AAC5E,MAAM,gBAAgB,CAAC,SAAS;AAChC,MAAM,WACX,SACA,OAAO,cAAc,eACpB,oBAAmB,KAAK,UAAU,QAAQ,KACxC,UAAU,aAAa,cAAc,UAAU,iBAAiB,MACnE,CAAC,OAAO;",
   "names": []
 }

package/dist/esm/createComponent.js

@@ -10,26 +10,34 @@ import React, {
   memo,
   useCallback,
   useContext,
-  useEffect,
   useRef,
   useState
 } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
-import { isAndroid, isTouchDevice, isWeb } from "./constants/platform";
+import { isAndroid, isTouchDevice, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
 import { isVariable } from "./createVariable";
-import { defaultComponentState } from "./defaultComponentState";
+import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import {
-  getSplitStyles
-} from "./helpers/getSplitStyles";
+import { getSplitStyles } from "./helpers/getSplitStyles";
+import { getAllSelectors } from "./helpers/insertStyleRule";
+import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
 import { usePressable } from "./hooks/usePressable";
 import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
 import { TextAncestorContext } from "./views/TextAncestorContext";
+React["keep"];
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  mounted: false,
+  animation: null
+};
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
@@ -37,77 +45,73 @@ if (typeof document !== "undefined") {
     mouseUps.clear();
   });
 }
-function createShallowUpdate(setter) {
-  return (next) => {
-    setter((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return { ...prev, ...next };
-        }
-      }
-      return prev;
-    });
-  };
-}
-__name(createShallowUpdate, "createShallowUpdate");
-function createComponent(configIn) {
-  let staticConfig;
-  if ("parsed" in configIn) {
-    staticConfig = configIn;
-  } else {
-    staticConfig = parseStaticConfig(configIn);
+function mergeShorthands({ defaultProps }, { shorthands }) {
+  for (const key in defaultProps) {
+    defaultProps[shorthands[key] || key] = defaultProps[key];
   }
-  const { Component, validStyles, isText, isZStack, componentName } = staticConfig;
-  const componentClassName = `is_${componentName}`;
-  const validStyleProps = validStyles || stylePropsView;
+}
+__name(mergeShorthands, "mergeShorthands");
+let initialTheme;
+function createComponent(configIn, ParentComponent) {
+  const staticConfig = (() => {
+    const config = extendStaticConfig(configIn, ParentComponent);
+    if ("parsed" in config) {
+      return config;
+    } else {
+      return parseStaticConfig(config);
+    }
+  })();
+  const componentClassName = `is_${staticConfig.componentName}`;
   let tamaguiConfig;
   let AnimatedText;
   let AnimatedView;
   let avoidClasses = true;
-  let defaultPseudos = {};
   let defaultNativeStyle;
-  let defaultNativeStyleSheet = null;
-  let defaultsClassName = null;
-  let initialTheme;
-  let splitStyleResult = null;
+  let defaultNativeStyleSheet;
+  let initialSplitStyles;
   function addPseudoToStyles(styles, name, pseudos) {
     const pseudoStyle = pseudos[name];
+    const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
     if (pseudoStyle) {
-      styles.push(isWeb ? { [name]: pseudoStyle } : pseudoStyle);
+      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
     }
-    const defaultPseudoStyle = defaultPseudos[name];
+    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
     if (defaultPseudoStyle) {
-      styles.push(isWeb ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
+      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
     }
   }
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = forwardRef((props, forwardedRef) => {
     var _a, _b, _c, _d;
+    const { Component, componentName, isText, isZStack } = staticConfig;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", " debug prop on:", { props: Object.entries(props) });
+        console.warn(staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props);
         if (props["debug"] === "break")
           debugger;
       }
     }
     const forceUpdate = useForceUpdate();
-    const theme = useTheme(props.theme, componentName, props, forceUpdate);
+    const theme = useTheme(props.theme, staticConfig.componentName, props, forceUpdate);
     const [state, set_] = useState(defaultComponentState);
     const setStateShallow = createShallowUpdate(set_);
-    const shouldAvoidClasses = !!(state.animation && avoidClasses);
-    const splitInfo = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, defaultsClassName);
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitInfo;
+    const shouldAvoidClasses = !!(props.animation && avoidClasses);
+    const splitStyles = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
-    const styleWithPseudos = props.animation ? merge({ ...defaultNativeStyle, ...style }, state.hover && pseudos.hoverStyle, state.press && pseudos.pressStyle, state.focus && pseudos.focusStyle, hasEnterStyle && !state.mounted && pseudos.enterStyle, ...Object.values(medias)) : null;
     const features = useFeatures(props, {
       forceUpdate,
       setStateShallow,
       useAnimations,
       state,
-      style: styleWithPseudos,
-      pseudos
+      style: props.animation ? { ...defaultNativeStyle, ...style } : null,
+      pseudos,
+      staticConfig,
+      theme,
+      onDidAnimate: props.onDidAnimate
     });
     const {
       tag,
@@ -146,6 +150,7 @@ function createComponent(configIn) {
       accessibilityRole,
       collapsable,
       focusable,
+      onClick,
       theme: _themeProp,
       defaultVariants,
       onLayout,
@@ -167,8 +172,8 @@ function createComponent(configIn) {
         isMounted: true
       };
     }
-    useEffect(() => {
-      if (hasEnterStyle) {
+    useIsomorphicLayoutEffect(() => {
+      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
         setStateShallow({
           mounted: true
         });
@@ -178,7 +183,7 @@ function createComponent(configIn) {
         mouseUps.delete(unPress);
         internal.current.isMounted = false;
       };
-    }, []);
+    }, [hasEnterStyle, props.animation]);
     if (nativeID) {
       viewProps.id = nativeID;
     }
@@ -236,6 +241,7 @@ function createComponent(configIn) {
         medias
       ];
       if (!animationStyles) {
+        !state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
         state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
         state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
         state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
@@ -254,7 +260,7 @@ function createComponent(configIn) {
         const className = classList.join(" ");
         if (process.env.NODE_ENV === "development") {
           if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className });
+            console.log("  \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
           }
         }
         viewProps.className = className;
@@ -295,7 +301,8 @@ function createComponent(configIn) {
         viewProps.ref = forwardedRef;
       }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || onPress || onPressOut || onPressIn);
+    const initialPseudos = initialSplitStyles.pseudos;
+    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
     const isHoverable = isWeb && !isTouchDevice;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     const pressEventKey = isStringElement ? "onClick" : "onPress";
@@ -308,7 +315,6 @@ function createComponent(configIn) {
         pressIn: false
       });
     }, []);
-    console.log("attachHover, attachHover", attachHover, pseudos && pseudos.hoverStyle);
     const events = shouldAttach ? {
       ...!isWeb && {
         onPressOut: (e) => {
@@ -360,6 +366,7 @@ function createComponent(configIn) {
         onPress == null ? void 0 : onPress(e);
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
+        onClick == null ? void 0 : onClick(e);
       } : null
     } : null;
     let childEls = !children ? children : wrapThemeManagerContext(spacedChildren({
@@ -403,9 +410,9 @@ function createComponent(configIn) {
       }
     }
     content = createElement(ViewComponent, viewProps, childEls);
-    console.log("should", attachHover);
     if (isWeb && events && attachHover) {
       content = /* @__PURE__ */ React.createElement("span", {
+        className: "tui_Hoverable",
         style: {
           display: "contents"
         },
@@ -416,7 +423,7 @@ function createComponent(configIn) {
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         viewProps["debug"] = true;
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, state, styles, pseudos, content, childEls, shouldAvoidClasses, animation: props.animation, style, defaultNativeStyle, splitStyleResult, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
+        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
       }
     }
     if (features.length) {
@@ -424,23 +431,28 @@ function createComponent(configIn) {
     }
     return content;
   });
+  component.displayName = staticConfig.componentName;
   onConfiguredOnce((conf) => {
     var _a, _b, _c, _d;
-    const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
+    if (process.env.IS_STATIC === "is_static") {
+      return;
+    }
     tamaguiConfig = conf;
-    avoidClasses = !!((_b = tamaguiConfig.animations) == null ? void 0 : _b.avoidClasses);
-    AnimatedText = (_c = tamaguiConfig.animations) == null ? void 0 : _c.Text;
-    AnimatedView = (_d = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _d.View;
-    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    splitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
+    mergeShorthands(staticConfig, tamaguiConfig);
+    avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
+    AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
+    AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
+    initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
+    initialSplitStyles = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
-      resolveVariablesAs: "variable"
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both",
+      keepVariantsAsProps: true
     });
-    const { classNames, pseudos, style, viewProps } = splitStyleResult;
-    if (isWeb) {
-      defaultsClassName = classNames;
-    }
-    defaultPseudos = pseudos;
+    const { style, viewProps } = initialSplitStyles;
     defaultNativeStyle = {};
     for (const key in style) {
       const v = style[key];
@@ -449,13 +461,17 @@ function createComponent(configIn) {
     defaultNativeStyleSheet = StyleSheet.create({
       base: defaultNativeStyle
     });
-    component.displayName = staticConfig.componentName;
     component.defaultProps = {
       ...viewProps,
       ...component.defaultProps
     };
-    if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
-      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, ...splitStyleResult });
+    if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
+      if (process.env.IS_STATIC !== "is_static") {
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+          staticConfig,
+          initialSplitStyles
+        });
+      }
     }
   });
   let res = component;
@@ -463,25 +479,30 @@ function createComponent(configIn) {
     res = memo(res);
   }
   res["staticConfig"] = {
-    validStyles: validStyleProps,
+    validStyles: staticConfig.validStyles || stylePropsView,
     ...staticConfig
   };
-  res["extractable"] = (Component2, conf) => {
-    Component2["staticConfig"] = extendStaticConfig(res, {
+  if (process.env.NODE_ENV === "development") {
+    res["whyDidYouRender"] = true;
+  }
+  res["extractable"] = (Component, conf) => {
+    Component["staticConfig"] = extendStaticConfig({
+      Component,
       ...conf,
       neverFlatten: true,
       defaultProps: {
-        ...Component2.defaultProps,
+        ...Component.defaultProps,
         ...conf == null ? void 0 : conf.defaultProps
       }
-    });
-    return Component2;
+    }, res);
+    return Component;
   };
   return res;
 }
 __name(createComponent, "createComponent");
 const Spacer = createComponent({
   memo: true,
+  componentName: "Spacer",
   defaultProps: {
     ...stackDefaultStyles,
     size: true
@@ -561,49 +582,20 @@ function spacedChildren({
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-const merge = /* @__PURE__ */ __name((...styles) => {
-  if (!styles[0])
-    return;
-  const res = {};
-  const len = styles.length;
-  for (let i = len - 1; i >= 0; i--) {
-    const cur = styles[i];
-    if (!cur)
-      continue;
-    for (const key in cur) {
-      const val = cur[key];
-      if (key !== "transform") {
-        if (!(key in res)) {
-          res[key] = val;
-        }
-        continue;
-      }
-      if (!res.transform) {
-        res.transform = val;
-        continue;
-      }
-      for (const t of val) {
-        const tkey = Object.keys(t)[0];
-        if (res.transform.find((existing) => tkey in existing)) {
-          continue;
-        }
-        res.transform.push(t);
-      }
+function AbsoluteFill(props) {
+  return isWeb ? /* @__PURE__ */ React.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
     }
-  }
-  return res;
-}, "merge");
-const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? /* @__PURE__ */ React.createElement("div", {
-  style: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-}, props.children) : /* @__PURE__ */ React.createElement(View, {
-  style: StyleSheet.absoluteFill
-}, props.child), "AbsoluteFill");
+  }, props.children) : /* @__PURE__ */ React.createElement(View, {
+    style: StyleSheet.absoluteFill
+  }, props.child);
+}
+__name(AbsoluteFill, "AbsoluteFill");
 export {
   AbsoluteFill,
   Spacer,