@tamagui/core 1.0.1-beta.219 → 1.0.1-beta.221

package/dist/cjs/helpers/ThemeManager.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/ThemeManager.tsx"],
-  "sourcesContent": ["import { createContext } from 'react'\n\nimport { getThemes } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { ThemeParsed, 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 type GetNextThemeProps = {\n  themes?: Themes\n  name?: string | null\n  componentName?: string | null\n  reset?: boolean\n}\n\nexport class ThemeManager {\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n\n  constructor(\n    public name: string = '',\n    public className: string = '',\n    public theme: ThemeParsed | null = null,\n    public parentManager: ThemeManager | null = null,\n    public reset: boolean = false\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 didChangeTheme() {\n    return this.parentManager && this.name !== this.parentManager.fullName\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 || manager.theme === theme) {\n        return\n      }\n      theme = manager.theme\n    }\n  }\n\n  isTracking(uuid: Object) {\n    return Boolean(this.keys.get(uuid)?.size)\n  }\n\n  update({ name, theme, className }: SetActiveThemeProps = {}, force = false, notify = true) {\n    if (!force) {\n      // className compare on web, avoids light/dark re-renders\n      const nameChanged = name !== this.name\n      if (!nameChanged) {\n        return false\n      }\n    }\n    this.className = className || ''\n    this.name = name || ''\n    this.theme = theme\n    if (notify) {\n      this.notify()\n    }\n    return true\n  }\n\n  getNextTheme(\n    props: GetNextThemeProps = {},\n    debug?: any\n  ): {\n    name: string\n    theme: ThemeParsed | null\n    className: string | undefined\n  } {\n    const { themes = getThemes(), name, componentName } = props\n\n    if (props.reset && name) {\n      return {\n        name: name,\n        theme: themes[name] as ThemeParsed,\n        className: this.getCN(name),\n      }\n    }\n\n    const parentIsReset = this.parentManager?.reset\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            const className = this.getCN(name)\n            return { name, theme: themes[name], className }\n          }\n        }\n      }\n      return {\n        name: this.name,\n        theme: this.theme,\n        className: this.className,\n      }\n    }\n\n    let nextName = name || this.name || ''\n    let parentName = parentIsReset ? this.parentName || this.fullName : this.fullName\n\n    while (true) {\n      if (nextName in themes) break\n      nextName = `${parentName}_${name}`\n      if (nextName in themes) break\n      // this is fine - some themes can not have parents\n      if (!parentName.includes(THEME_NAME_SEPARATOR)) break\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') {\n      if (debug) {\n        // eslint-disable-next-line no-console\n        console.log('getNextTheme', this.getCN(nextName), { props, nextName, parentName })\n      }\n    }\n\n    return {\n      name: nextName,\n      theme: getThemeUnwrapped(theme),\n      className: this.getCN(nextName),\n    }\n  }\n\n  getCN(name: string) {\n    return `${THEME_CLASSNAME_PREFIX}${name} t_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  notify() {\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\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\nexport const emptyManager = new ThemeManager()\n\nconst withoutComponentName = (name: string) => name.replace(/(\\_[A-Z][a-zA-Z]+)+$/g, '')\n"],
-  "mappings": "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",
-  "names": ["name"]
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\n\nimport { getThemes } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { ThemeParsed, ThemeProps } 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  reset?: boolean\n}\n\nexport type ThemeManagerState = {\n  name: string\n  theme?: ThemeParsed | null\n  className?: string\n  parentName?: string\n}\n\nconst emptyState: ThemeManagerState = { name: '' }\n\nexport function hasNoThemeUpdatingProps(props: ThemeProps) {\n  return !props.name && !props.componentName && !props.inverse && !props.reset\n}\n\nexport class ThemeManager {\n  themeListeners = new Set<ThemeListener>()\n  parentManager: ThemeManager | null = null\n  state: ThemeManagerState = emptyState\n\n  constructor(\n    public props: ThemeProps = {},\n    parentManager?: ThemeManager | 'root' | null | undefined\n  ) {\n    if (parentManager === 'root') {\n      this.updateState(props, false)\n      return\n    }\n    if (!parentManager) {\n      throw new Error(`Must set up root first`)\n    }\n    // no change no props\n    if (hasNoThemeUpdatingProps(props)) {\n      return parentManager\n    }\n    if (parentManager) {\n      this.parentManager = parentManager\n    }\n    const updatedState = this.getStateIfChanged(props)\n    if (updatedState) {\n      this.state = updatedState\n      return\n    }\n    return parentManager || this\n  }\n\n  updateState(props: ThemeProps & { forceTheme?: ThemeParsed } = this.props || {}, notify = true) {\n    const shouldFlush = (() => {\n      if (props.forceTheme) {\n        this.state.theme = props.forceTheme\n        this.state.name = props.name || ''\n        return true\n      }\n      const nextState = this.getStateIfChanged(props)\n      if (nextState) {\n        this.state = nextState\n        return true\n      }\n    })()\n    if (shouldFlush) {\n      // reset any derived state\n      this.#allKeys = null\n      notify && this.notify()\n      return this.state\n    }\n  }\n\n  getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {\n    const _ =\n      getState(props, parentManager) ||\n      (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state : undefined)\n    if (!_ || !_.theme || _.theme === state.theme) {\n      return null\n    }\n    return _\n  }\n\n  getState(props = this.props) {\n    return getState(props, this.parentManager)\n  }\n\n  #allKeys: Set<string> | null = null\n  get allKeys() {\n    this.#allKeys ??= new Set([\n      ...(this.parentManager?.allKeys || []),\n      ...Object.keys(this.state.theme || {}),\n    ])\n    return this.#allKeys\n  }\n\n  // gets value going up to parents\n  getValue(key: string, state?: ThemeManagerState) {\n    let theme = (state || this.state).theme\n    let manager = this as ThemeManager | null\n    while (theme && manager) {\n      if (key in theme) {\n        return theme[key]\n      }\n      manager = manager.parentManager\n      theme = manager?.state.theme\n    }\n  }\n\n  notify() {\n    this.themeListeners.forEach((cb) => cb(this.state.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n}\n\nfunction getNextThemeClassName(name: string, isInverting = false) {\n  const next = `${THEME_CLASSNAME_PREFIX}${name}`\n  if (isInverting) {\n    return next\n  }\n  return next.replace('light_', '').replace('dark_', '')\n}\n\nfunction getState(\n  props: ThemeProps,\n  parentManager?: ThemeManager | null\n): ThemeManagerState | null {\n  const themes = getThemes()\n\n  if (props.name && props.reset) {\n    throw new Error(`Cannot reset + set new name`)\n  }\n  if (props.reset && !parentManager?.parentManager) {\n    throw new Error(`Cannot reset no grandparent exists`)\n  }\n\n  const nextName = props.reset ? parentManager?.parentManager?.state?.name || '' : props.name || ''\n  const { componentName } = props\n  const parentName = parentManager?.state?.name || ''\n\n  // components look for most specific, fallback upwards\n  const base = parentName.split(THEME_NAME_SEPARATOR)\n  const lastSegment = base[base.length - 1]\n  const isParentAComponentTheme = parentName && lastSegment[0].toUpperCase() === lastSegment[0]\n  if (isParentAComponentTheme) {\n    base.pop() // always remove componentName they can't nest\n  }\n  const parentBaseTheme = isParentAComponentTheme\n    ? base.slice(0, base.length).join(THEME_NAME_SEPARATOR)\n    : parentName\n  const max = base.length\n  const min = componentName\n    ? max // component themes don't search upwards\n    : 0\n\n  // prettier-ignore\n  // eslint-disable-next-line no-console\n  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('getState', props, { parentName, parentBaseTheme, base, min, max, isParentAComponentTheme, parentManager })\n\n  for (let i = max; i >= min; i--) {\n    let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)\n    if (props.inverse) {\n      prefix = inverseThemeName(prefix)\n    }\n    const potentials: string[] = []\n    if (prefix && prefix !== parentBaseTheme) {\n      potentials.push(prefix)\n    }\n    if (nextName) {\n      potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName)\n    }\n    if (i === 1) {\n      const lastSegment = potentials.findIndex((x) => !x.includes('_'))\n      if (lastSegment > 0) {\n        potentials.splice(lastSegment, 0, nextName) // last try prefer our new name to parent\n      }\n    }\n    if (componentName) {\n      // components only look for component themes\n      if (nextName) {\n        potentials.push(`${prefix.replace(/_.*$/, '')}_${nextName}_${componentName}`)\n      }\n      potentials.push(`${prefix}_${componentName}`)\n      if (nextName) {\n        potentials.unshift(`${prefix}_${nextName}_${componentName}`)\n      }\n    }\n\n    // prettier-ignore\n    // eslint-disable-next-line no-console\n    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('getState potentials', potentials)\n\n    const found = potentials.find((t) => t in themes)\n    if (found) {\n      // optimization return null if not changed\n      if (found === parentName) {\n        return null\n      }\n      const theme = themes[found]\n      return {\n        // need to put concurrent safe things here\n        name: found,\n        theme: getThemeUnwrapped(theme),\n        className: getNextThemeClassName(found, props.inverse),\n        parentName,\n      }\n    }\n  }\n\n  return null\n}\n\nconst inverseThemeName = (themeName: string) => {\n  return themeName.startsWith('light')\n    ? themeName.replace(/^light/, 'dark')\n    : themeName.replace(/^dark/, 'light')\n}\n"],
+  "mappings": "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",
+  "names": ["import_constants", "lastSegment"]
 }

package/dist/cjs/helpers/ThemeManager.test.js

@@ -0,0 +1,449 @@
+"use strict";
+var import_config_default_node = require("@tamagui/config-default-node");
+var import_vitest = require("vitest");
+var import_createTamagui = require("../createTamagui");
+var import_ThemeManager = require("./ThemeManager");
+const conf = (0, import_config_default_node.getDefaultTamaguiConfig)();
+(0, import_vitest.describe)("ThemeManager", () => {
+  (0, import_vitest.beforeAll)(() => {
+    (0, import_createTamagui.createTamagui)(conf);
+  });
+  (0, import_vitest.test)("Changes theme to dark", () => {
+    const manager = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    (0, import_vitest.expect)(manager.state.name).toBe("dark");
+  });
+  (0, import_vitest.test)('Given parent theme "dark" and child theme "red" to return theme "dark_red"', () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(parent.state.name).toBe("dark");
+    (0, import_vitest.expect)(child.state.name).toBe("dark_red");
+  });
+  (0, import_vitest.test)('Given parent theme "dark", child theme "red_alt2" and component "Button" returns "dark_red_alt2_Button"', () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new import_ThemeManager.ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child1.state.name).toBe("dark_red");
+    const child2 = new import_ThemeManager.ThemeManager(
+      {
+        name: "alt2",
+        componentName: "Button"
+      },
+      child1
+    );
+    (0, import_vitest.expect)(child2.state.name).toBe("dark_red_alt2_Button");
+  });
+  (0, import_vitest.test)('Given parent theme "dark", child theme "red" and component "Button" returns "dark_red_Button"', () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new import_ThemeManager.ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child1.state.name).toBe("dark_red");
+    const child2 = new import_ThemeManager.ThemeManager(
+      {
+        componentName: "Button"
+      },
+      child1
+    );
+    (0, import_vitest.expect)(child2.state.name).toBe("dark_red_Button");
+  });
+  (0, import_vitest.test)('Given parent theme "dark", child theme "red" and missing component "Card" returns "dark_red"', () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new import_ThemeManager.ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child1.state.name).toBe("dark_red");
+    const child2 = new import_ThemeManager.ThemeManager(
+      {
+        componentName: "Card"
+      },
+      child1
+    );
+    (0, import_vitest.expect)(child2.state.name).toBe("dark_red");
+  });
+  (0, import_vitest.test)('Changes "light" to "dark"', () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(parent.state.name).toBe("light");
+    (0, import_vitest.expect)(child.state.name).toBe("dark");
+  });
+  (0, import_vitest.test)('Inverts "light" to "dark"', () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child1 = new import_ThemeManager.ThemeManager(
+      {
+        inverse: true
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child1.state.name).toBe("dark");
+  });
+  (0, import_vitest.test)('Inverts "light_red" to "dark_red"', () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child1 = new import_ThemeManager.ThemeManager(
+      {
+        name: "red",
+        inverse: true
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child1.state.name).toBe("dark_red");
+  });
+  (0, import_vitest.test)("Updates state", () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const newState = parent.updateState({
+      name: "dark"
+    });
+    (0, import_vitest.expect)(newState).toMatchInlineSnapshot(`
+      {
+        "className": "t_dark",
+        "name": "dark",
+        "parentName": "",
+        "theme": {
+          "background": {
+            "isVar": true,
+            "key": "color-2",
+            "name": "background",
+            "val": "#000",
+            "variable": "",
+          },
+          "color": {
+            "isVar": true,
+            "key": "color-1",
+            "name": "color",
+            "val": "#fff",
+            "variable": "",
+          },
+        },
+      }
+    `);
+    (0, import_vitest.expect)(parent.state.name).toBe("dark");
+  });
+  (0, import_vitest.test)("Returns parent on empty", () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: null
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child).toBe(parent);
+  });
+  (0, import_vitest.test)("Resets theme", () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child.state.name).toBe("dark");
+    (0, import_vitest.expect)(child.parentManager).toBe(parent);
+    const child2 = new import_ThemeManager.ThemeManager(
+      {
+        reset: true
+      },
+      child
+    );
+    (0, import_vitest.expect)(child2.parentManager).toBe(child);
+    (0, import_vitest.expect)(child2.state.name).toBe("light");
+  });
+  (0, import_vitest.test)("Nested invert and reset", () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    const child2 = new import_ThemeManager.ThemeManager(
+      {
+        reset: true
+      },
+      child
+    );
+    const child3 = new import_ThemeManager.ThemeManager(
+      {
+        inverse: true
+      },
+      child2
+    );
+    (0, import_vitest.expect)(child3.state.name).toBe("dark");
+  });
+  (0, import_vitest.test)("Updates from null the new theme nested 3 themes", () => {
+    const a = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const b = new import_ThemeManager.ThemeManager(
+      {
+        name: "red"
+      },
+      a
+    );
+    (0, import_vitest.expect)(b.state.name).toBe("dark_red");
+    const c = new import_ThemeManager.ThemeManager(
+      {
+        name: "alt2"
+      },
+      b
+    );
+    (0, import_vitest.expect)(c.state.name).toBe("dark_red_alt2");
+  });
+  (0, import_vitest.test)("Ignored dup themes", () => {
+    const a = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const b = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      a
+    );
+    (0, import_vitest.expect)(b === a).toBe(true);
+  });
+  (0, import_vitest.test)("Nested component themes fallback to grandparents", () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "red",
+        componentName: "Button"
+      },
+      parent
+    );
+    const child2 = new import_ThemeManager.ThemeManager(
+      {
+        name: "blue"
+      },
+      child
+    );
+    (0, import_vitest.expect)(child2.state.name).toBe("dark_blue");
+    const child3 = new import_ThemeManager.ThemeManager(
+      {
+        componentName: "Button"
+      },
+      child2
+    );
+    (0, import_vitest.expect)(child3.state.name).toBe("dark_blue_Button");
+  });
+  (0, import_vitest.test)(`Component theme with sub component that doesn't exist keeps same theme`, () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "red",
+        componentName: "Button"
+      },
+      parent
+    );
+    const child2 = new import_ThemeManager.ThemeManager(
+      {
+        componentName: "Spacer"
+      },
+      child
+    );
+    (0, import_vitest.expect)(child2).toBe(child);
+  });
+  (0, import_vitest.test)(`Doesn't find invalid parent when only passing component`, () => {
+    (0, import_vitest.expect)(!!conf.themes["dark_Card"]).toBeTruthy();
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        componentName: "Card"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child.state.name).toBe(parent.state.name);
+  });
+  (0, import_vitest.test)(`Finds sub-theme when componentName and name are passed but componentName doesn't exist`, () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "red",
+        componentName: "Missing"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child.state.name).toBe("dark_red");
+  });
+  (0, import_vitest.test)(`Uses the full className without the light/dark prefix`, () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "red_alt2"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child.state.className).toBe("t_red_alt2");
+    const child2 = new import_ThemeManager.ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    const child3 = new import_ThemeManager.ThemeManager(
+      {
+        name: "alt2"
+      },
+      child2
+    );
+    (0, import_vitest.expect)(child3.state.className).toBe("t_red_alt2");
+  });
+  (0, import_vitest.test)(`Finds component dark_red + Button`, () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark_red",
+        componentName: "Button"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child.state.className).toBe("t_red_Button");
+    (0, import_vitest.expect)(child.state.name).toBe("dark_red_Button");
+  });
+  (0, import_vitest.test)(`Drops componentName if only regular name found at stronger level`, () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "alt1",
+        componentName: "Button"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child.state.name).toBe("dark_red_alt1");
+  });
+  (0, import_vitest.test)(`Component name + theme change when nested already`, () => {
+    const parent = new import_ThemeManager.ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new import_ThemeManager.ThemeManager(
+      {
+        name: "yellow",
+        componentName: "Button"
+      },
+      parent
+    );
+    (0, import_vitest.expect)(child.state.name).toBe("dark_yellow_Button");
+  });
+});
+//# sourceMappingURL=ThemeManager.test.js.map

package/dist/cjs/helpers/ThemeManager.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/ThemeManager.test.tsx"],
+  "sourcesContent": ["import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'\nimport { beforeAll, describe, expect, test } from 'vitest'\n\nimport { createTamagui } from '../createTamagui'\nimport { ThemeManager } from './ThemeManager'\n\nconst conf = getDefaultTamaguiConfig()\n\ndescribe('ThemeManager', () => {\n  beforeAll(() => {\n    createTamagui(conf)\n  })\n\n  test('Changes theme to dark', () => {\n    const manager = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    expect(manager.state.name).toBe('dark')\n  })\n\n  test('Given parent theme \"dark\" and child theme \"red\" to return theme \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(parent.state.name).toBe('dark')\n    expect(child.state.name).toBe('dark_red')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red_alt2\" and component \"Button\" returns \"dark_red_alt2_Button\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        name: 'alt2',\n        componentName: 'Button',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red_alt2_Button')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red\" and component \"Button\" returns \"dark_red_Button\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Button',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red_Button')\n  })\n\n  test('Given parent theme \"dark\", child theme \"red\" and missing component \"Card\" returns \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Card',\n      },\n      child1\n    )\n    expect(child2.state.name).toBe('dark_red')\n  })\n\n  test('Changes \"light\" to \"dark\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    expect(parent.state.name).toBe('light')\n    expect(child.state.name).toBe('dark')\n  })\n\n  test('Inverts \"light\" to \"dark\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        inverse: true,\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark')\n  })\n\n  test('Inverts \"light_red\" to \"dark_red\"', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child1 = new ThemeManager(\n      {\n        name: 'red',\n        inverse: true,\n      },\n      parent\n    )\n    expect(child1.state.name).toBe('dark_red')\n  })\n\n  test('Updates state', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const newState = parent.updateState({\n      name: 'dark',\n    })\n    expect(newState).toMatchInlineSnapshot(`\n      {\n        \"className\": \"t_dark\",\n        \"name\": \"dark\",\n        \"parentName\": \"\",\n        \"theme\": {\n          \"background\": {\n            \"isVar\": true,\n            \"key\": \"color-2\",\n            \"name\": \"background\",\n            \"val\": \"#000\",\n            \"variable\": \"\",\n          },\n          \"color\": {\n            \"isVar\": true,\n            \"key\": \"color-1\",\n            \"name\": \"color\",\n            \"val\": \"#fff\",\n            \"variable\": \"\",\n          },\n        },\n      }\n    `)\n    expect(parent.state.name).toBe('dark')\n  })\n\n  test('Returns parent on empty', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: null,\n      },\n      parent\n    )\n    expect(child).toBe(parent)\n  })\n\n  test('Resets theme', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark')\n    expect(child.parentManager).toBe(parent)\n    const child2 = new ThemeManager(\n      {\n        reset: true,\n      },\n      child\n    )\n    expect(child2.parentManager).toBe(child)\n    expect(child2.state.name).toBe('light')\n  })\n\n  test('Nested invert and reset', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'light',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        reset: true,\n      },\n      child\n    )\n    const child3 = new ThemeManager(\n      {\n        inverse: true,\n      },\n      child2\n    )\n    expect(child3.state.name).toBe('dark')\n  })\n\n  test('Updates from null the new theme nested 3 themes', () => {\n    const a = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const b = new ThemeManager(\n      {\n        name: 'red',\n      },\n      a\n    )\n    expect(b.state.name).toBe('dark_red')\n    const c = new ThemeManager(\n      {\n        name: 'alt2',\n      },\n      b\n    )\n    expect(c.state.name).toBe('dark_red_alt2')\n  })\n\n  test('Ignored dup themes', () => {\n    const a = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const b = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      a\n    )\n    expect(b === a).toBe(true)\n  })\n\n  test('Nested component themes fallback to grandparents', () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        name: 'blue',\n      },\n      child\n    )\n    expect(child2.state.name).toBe('dark_blue')\n    const child3 = new ThemeManager(\n      {\n        componentName: 'Button',\n      },\n      child2\n    )\n    expect(child3.state.name).toBe('dark_blue_Button')\n  })\n\n  test(`Component theme with sub component that doesn't exist keeps same theme`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    const child2 = new ThemeManager(\n      {\n        componentName: 'Spacer',\n      },\n      child\n    )\n    expect(child2).toBe(child)\n  })\n\n  test(`Doesn't find invalid parent when only passing component`, () => {\n    expect(!!conf.themes['dark_Card']).toBeTruthy()\n\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n\n    const child = new ThemeManager(\n      {\n        componentName: 'Card',\n      },\n      parent\n    )\n\n    // dont find dark_Card because dark_red is highest it should climb\n    expect(child.state.name).toBe(parent.state.name)\n  })\n\n  test(`Finds sub-theme when componentName and name are passed but componentName doesn't exist`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n\n    const child = new ThemeManager(\n      {\n        name: 'red',\n        componentName: 'Missing',\n      },\n      parent\n    )\n\n    // dont find dark_Card because dark_red is highest it should climb\n    expect(child.state.name).toBe('dark_red')\n  })\n\n  test(`Uses the full className without the light/dark prefix`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'red_alt2',\n      },\n      parent\n    )\n    expect(child.state.className).toBe('t_red_alt2')\n\n    const child2 = new ThemeManager(\n      {\n        name: 'red',\n      },\n      parent\n    )\n    const child3 = new ThemeManager(\n      {\n        name: 'alt2',\n      },\n      child2\n    )\n    expect(child3.state.className).toBe('t_red_alt2')\n  })\n\n  test(`Finds component dark_red + Button`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'dark_red',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.className).toBe('t_red_Button')\n    expect(child.state.name).toBe('dark_red_Button')\n  })\n\n  test(`Drops componentName if only regular name found at stronger level`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'alt1',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark_red_alt1')\n  })\n\n  test(`Component name + theme change when nested already`, () => {\n    const parent = new ThemeManager(\n      {\n        name: 'dark_red',\n      },\n      'root'\n    )\n    const child = new ThemeManager(\n      {\n        name: 'yellow',\n        componentName: 'Button',\n      },\n      parent\n    )\n    expect(child.state.name).toBe('dark_yellow_Button')\n  })\n})\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/cjs/helpers/{getTokens.js → ThemeManagerContext.js}

@@ -16,15 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var getTokens_exports = {};
-__export(getTokens_exports, {
-  getTokens: () => getTokens
+var ThemeManagerContext_exports = {};
+__export(ThemeManagerContext_exports, {
+  ThemeManagerContext: () => ThemeManagerContext
 });
-module.exports = __toCommonJS(getTokens_exports);
-var import_config = require("../config");
-const getTokens = () => (0, import_config.getConfig)().tokensParsed;
+module.exports = __toCommonJS(ThemeManagerContext_exports);
+var import_react = require("react");
+const ThemeManagerContext = (0, import_react.createContext)(null);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getTokens
+  ThemeManagerContext
 });
-//# sourceMappingURL=getTokens.js.map
+//# sourceMappingURL=ThemeManagerContext.js.map

package/dist/cjs/helpers/ThemeManagerContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/ThemeManagerContext.tsx"],
+  "sourcesContent": ["import { createContext } from 'react'\n\nimport { ThemeManager } from './ThemeManager'\n\nexport const ThemeManagerContext = createContext<ThemeManager | null>(null)\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAIvB,MAAM,0BAAsB,4BAAmC,IAAI;",
+  "names": []
+}

package/dist/cjs/helpers/createPropMapper.js

@@ -296,7 +296,7 @@ const getToken = (key, value, conf, theme, fontFamily = "$body", languageContext
   const fontsParsed = languageContext ? (0, import_getVariantExtras.getFontsForLanguage)(conf.fontsParsed, languageContext) : conf.fontsParsed;
   let valOrVar;
   let hasSet = false;
-  if (theme[value]) {
+  if (value in theme) {
     valOrVar = theme[value];
     hasSet = true;
   } else {
@@ -332,14 +332,14 @@ const getToken = (key, value, conf, theme, fontFamily = "$body", languageContext
   }
   if (hasSet) {
     if (process.env.NODE_ENV === "development" && import_isDevTools.isDevTools && debug === "verbose") {
-      console.log(`   \uFE52 propMapper getToken`, key, valOrVar);
+      console.log(`   \uFE52 propMapper getToken`, key, valOrVar, theme);
     }
     return resolveVariableValue(key, valOrVar, resolveAs);
   }
   if (process.env.NODE_ENV === "development") {
     if (value && value[0] === "$") {
-      console.trace(
-        `\u26A0\uFE0F You've passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
+      console.warn(
+        `\u26A0\uFE0F You passed the value "${value}" to the style property "${key}", but there's no theme or token with the key "${value}". Using theme "${theme.name}".
 
 Set the debug prop to true to see more detailed debug information.`
       );