@tamagui/core 1.0.1-beta.99 → 1.0.1-rc.0.1

package/dist/esm/createVariable.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createVariable.ts"],
-  "sourcesContent": ["import { isWeb } from './constants/platform'\n\nconst IS_VARIABLE_SYMBOL = '__isVariable__'\n\ntype VariableIn<A extends string | number = any> = {\n  val: A\n  name: string\n  key: string\n  isFloating?: boolean\n}\n\nexport class Variable<A extends string | number = any> {\n  // because we have a separate node runtime we can't do instanceof\n  // ran into issues with this and it's potentially fixable but for now\n  // lets just do this\n  [IS_VARIABLE_SYMBOL] = true\n\n  // original key => in themes maps to the base variable key\n  key: string\n\n  // CSS name => in themes generic\n  name: string\n\n  // value\n  val: A\n\n  // full CSS variable using name\n  variable: string\n\n  isFloating = false\n\n  constructor(props: VariableIn) {\n    const { val, name, key, isFloating } = props\n    // converting to px breaks rn\n    this.val = isVariable(val) ? val.val : val\n    this.name = name\n    this.key = key\n    this.variable = isWeb ? createCSSVariable(name) : ''\n    if (isFloating) {\n      this.isFloating = true\n    }\n  }\n\n  toString() {\n    return `${isWeb ? this.variable : this.val}`\n  }\n}\n\nexport const createVariable = <A extends string | number = any>(props: VariableIn<A>) => {\n  if (isVariable(props)) {\n    return props\n  }\n  return new Variable<A>(props)\n}\n\nexport function isVariable(v: Variable | any): v is Variable {\n  return !!(v instanceof Variable || (v && v[IS_VARIABLE_SYMBOL]))\n}\n\nexport function getVariableValue(v: Variable | any) {\n  if (isVariable(v)) return v.val\n  return v\n}\n\nexport function getVariableName(v: Variable | any) {\n  if (isVariable(v)) return v.name\n  return v\n}\n\nexport function getVariableVariable(v: Variable | any) {\n  if (isVariable(v)) return v.variable\n  return v\n}\n\n// bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):\nexport const createCSSVariable = (nameProp: string, includeVar = true) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (!nameProp || typeof nameProp !== 'string') {\n      console.warn('invalid name', nameProp)\n      return ``\n    }\n  }\n  let name = ''\n  for (let i = 0; i < nameProp.length; i++) {\n    const code = nameProp.charCodeAt(i)\n    if (\n      // A-Z\n      (code >= 65 && code <= 90) ||\n      // a-z\n      (code >= 97 && code <= 122) ||\n      // _\n      code == 95 ||\n      // -\n      code === 45 ||\n      // 0-9\n      (code >= 48 && code <= 57)\n    ) {\n      name += nameProp[i]\n    } else {\n      // allow any name but turn it into a stringified num\n      name += `-c${code}-`\n    }\n  }\n  return includeVar ? `var(--${name})` : name\n}\n"],
-  "mappings": "AAAA;AAAA;AAEA,MAAM,qBAAqB;AASpB,MAAM,SAA0C;AAAA,EAoBrD,YAAY,OAAmB;AAhB/B,SAAC,MAAsB;AAcvB,sBAAa;AAGX,UAAM,EAAE,KAAK,MAAM,KAAK,eAAe;AAEvC,SAAK,MAAM,WAAW,GAAG,IAAI,IAAI,MAAM;AACvC,SAAK,OAAO;AACZ,SAAK,MAAM;AACX,SAAK,WAAW,QAAQ,kBAAkB,IAAI,IAAI;AAClD,QAAI,YAAY;AACd,WAAK,aAAa;AAAA,IACpB;AAAA,EACF;AAAA,EAEA,WAAW;AACT,WAAO,GAAG,QAAQ,KAAK,WAAW,KAAK;AAAA,EACzC;AACF;AA9CA,AAeG;AAiCI,MAAM,iBAAiB,CAAkC,UAAyB;AACvF,MAAI,WAAW,KAAK,GAAG;AACrB,WAAO;AAAA,EACT;AACA,SAAO,IAAI,SAAY,KAAK;AAC9B;AAEO,oBAAoB,GAAkC;AAC3D,SAAO,CAAC,CAAE,cAAa,YAAa,KAAK,EAAE;AAC7C;AAEO,0BAA0B,GAAmB;AAClD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAEO,yBAAyB,GAAmB;AACjD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAEO,6BAA6B,GAAmB;AACrD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAGO,MAAM,oBAAoB,CAAC,UAAkB,aAAa,SAAS;AACxE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,YAAY,OAAO,aAAa,UAAU;AAC7C,cAAQ,KAAK,gBAAgB,QAAQ;AACrC,aAAO;AAAA,IACT;AAAA,EACF;AACA,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;AACxC,UAAM,OAAO,SAAS,WAAW,CAAC;AAClC,QAEG,QAAQ,MAAM,QAAQ,MAEtB,QAAQ,MAAM,QAAQ,OAEvB,QAAQ,MAER,SAAS,MAER,QAAQ,MAAM,QAAQ,IACvB;AACA,cAAQ,SAAS;AAAA,IACnB,OAAO;AAEL,cAAQ,KAAK;AAAA,IACf;AAAA,EACF;AACA,SAAO,aAAa,SAAS,UAAU;AACzC;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { simpleHash } from '@tamagui/helpers'\n\nimport { getConfig } from './config'\n\n/**\n * Should rename this to Token\n * Moving to objects for React Server Components support\n */\n\nconst IS_VAR = 'isVar'\n\ntype VariableIn<A = any> = {\n  val: A\n  name: string\n  key: string\n}\n\nexport type Variable<A = any> = VariableIn<A> & {\n  [IS_VAR]?: true\n  variable?: string\n}\n\nexport const createVariable = <A extends string | number = any>(props: VariableIn<A>) => {\n  if (isVariable(props)) return props\n  const { key, name, val } = props\n  return {\n    [IS_VAR]: true,\n    key,\n    name: simpleHash(name, 40),\n    val,\n    variable: isWeb ? createCSSVariable(name) : '',\n  }\n}\n\nexport function variableToString(vrble?: any, getValue = false) {\n  if (isVariable(vrble)) {\n    return getValue ? `${vrble.val}` : `${isWeb ? vrble.variable : vrble.val}`\n  }\n  return `${vrble || ''}`\n}\n\nexport function isVariable(v: Variable | any): v is Variable {\n  return v && typeof v === 'object' && IS_VAR in v\n}\n\nexport function getVariable(nameOrVariable: Variable | string) {\n  if (isVariable(nameOrVariable)) {\n    return variableToString(nameOrVariable)\n  }\n  const tokens = getConfig().tokensParsed\n  return variableToString(tokens[nameOrVariable] ?? nameOrVariable)\n}\n\nexport function getVariableValue(v: Variable | any) {\n  if (isVariable(v)) return v.val\n  return v\n}\n\nexport function getVariableName(v: Variable | any) {\n  if (isVariable(v)) return v.name\n  return v\n}\n\nexport function getVariableVariable(v: Variable | any) {\n  if (isVariable(v)) return v.variable\n  return v\n}\n\n// bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):\nexport const createCSSVariable = (nameProp: string, includeVar = true) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (!nameProp || typeof nameProp !== 'string') {\n      throw new Error(`createCSSVariable expected string: ${nameProp}`)\n    }\n  }\n  const name = simpleHash(nameProp, 60)\n  return includeVar ? `var(--${name})` : name\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAE3B,SAAS,iBAAiB;AAO1B,MAAM,SAAS;AAaR,MAAM,iBAAiB,CAAkC,UAAyB;AACvF,MAAI,WAAW,KAAK;AAAG,WAAO;AAC9B,QAAM,EAAE,KAAK,MAAM,IAAI,IAAI;AAC3B,SAAO;AAAA,IACL,CAAC,SAAS;AAAA,IACV;AAAA,IACA,MAAM,WAAW,MAAM,EAAE;AAAA,IACzB;AAAA,IACA,UAAU,QAAQ,kBAAkB,IAAI,IAAI;AAAA,EAC9C;AACF;AAEO,SAAS,iBAAiB,OAAa,WAAW,OAAO;AAC9D,MAAI,WAAW,KAAK,GAAG;AACrB,WAAO,WAAW,GAAG,MAAM,QAAQ,GAAG,QAAQ,MAAM,WAAW,MAAM;AAAA,EACvE;AACA,SAAO,GAAG,SAAS;AACrB;AAEO,SAAS,WAAW,GAAkC;AAC3D,SAAO,KAAK,OAAO,MAAM,YAAY,UAAU;AACjD;AAEO,SAAS,YAAY,gBAAmC;AAC7D,MAAI,WAAW,cAAc,GAAG;AAC9B,WAAO,iBAAiB,cAAc;AAAA,EACxC;AACA,QAAM,SAAS,UAAU,EAAE;AAC3B,SAAO,iBAAiB,OAAO,mBAAmB,cAAc;AAClE;AAEO,SAAS,iBAAiB,GAAmB;AAClD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAEO,SAAS,gBAAgB,GAAmB;AACjD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAEO,SAAS,oBAAoB,GAAmB;AACrD,MAAI,WAAW,CAAC;AAAG,WAAO,EAAE;AAC5B,SAAO;AACT;AAGO,MAAM,oBAAoB,CAAC,UAAkB,aAAa,SAAS;AACxE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,YAAY,OAAO,aAAa,UAAU;AAC7C,YAAM,IAAI,MAAM,sCAAsC,UAAU;AAAA,IAClE;AAAA,EACF;AACA,QAAM,OAAO,WAAW,UAAU,EAAE;AACpC,SAAO,aAAa,SAAS,UAAU;AACzC;",
   "names": []
 }

package/dist/esm/createVariable.test.js

@@ -0,0 +1,6 @@
+import { expect, test } from "vitest";
+import { createCSSVariable } from "./createVariable";
+test("dots", () => {
+  expect(createCSSVariable("yellow.10")).toBe("var(--yellow101a)");
+});
+//# sourceMappingURL=createVariable.test.js.map

package/dist/esm/createVariable.test.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/createVariable.test.ts"],
+  "sourcesContent": ["import { expect, test } from 'vitest'\n\nimport { createCSSVariable } from './createVariable'\n\ntest('dots', () => {\n  expect(createCSSVariable('yellow.10')).toBe('var(--yellow101a)')\n})\n"],
+  "mappings": "AAAA,SAAS,QAAQ,YAAY;AAE7B,SAAS,yBAAyB;AAElC,KAAK,QAAQ,MAAM;AACjB,SAAO,kBAAkB,WAAW,CAAC,EAAE,KAAK,mBAAmB;AACjE,CAAC;",
+  "names": []
+}

package/dist/esm/createVariables.js

@@ -1,28 +1,23 @@
+import { simpleHash } from "@tamagui/helpers";
 import { createVariable, isVariable } from "./createVariable";
-const createVariables = (tokens, parentPath = "") => {
+const createVariables = (tokens, parentPath = "", isFont = false) => {
   const res = {};
+  let i = 0;
   for (const key in tokens) {
-    let val = tokens[key];
-    const name = parentPath ? `${parentPath}-${key}` : key;
+    i++;
+    const val = tokens[key];
     if (isVariable(val)) {
       res[key] = val;
-    } else if (val && typeof val === "object") {
-      if (Array.isArray(val)) {
-        res[key] = val.map((val2, i) => {
-          const skey = `${key}-${i}`;
-          const sname = parentPath ? `${name}-${skey}` : skey;
-          return isVariable(val2) ? val2 : createVariable({
-            val: val2,
-            key: skey,
-            name: sname
-          });
-        });
-      } else {
-        res[key] = createVariables(tokens[key], name === "color" ? "" : name);
-      }
-    } else {
-      res[key] = isVariable(val) ? val : createVariable({ val, name, key });
+      continue;
     }
+    const niceKey = simpleHash(key);
+    let name = isFont ? niceKey.slice(0, 2) : i;
+    name = parentPath ? `${parentPath}-${name}` : niceKey;
+    if (val && typeof val === "object") {
+      res[key] = createVariables(tokens[key], name);
+      continue;
+    }
+    res[key] = isVariable(val) ? val : createVariable({ val, name, key: niceKey });
   }
   return res;
 };

package/dist/esm/createVariables.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/createVariables.ts"],
-  "sourcesContent": ["import { Variable, createVariable, isVariable } from './createVariable'\n\ntype DeepTokenObject<Val extends string | number = any> = {\n  [key: string]: Val | DeepTokenObject<Val>\n}\n\nexport type DeepVariableObject<A extends DeepTokenObject> = {\n  [Key in keyof A]: A[Key] extends string | number\n    ? Variable<A[Key]>\n    : A[Key] extends DeepTokenObject\n    ? DeepVariableObject<A[Key]>\n    : never\n}\n\nexport const createVariables = <A extends DeepTokenObject>(\n  tokens: A,\n  parentPath = ''\n): DeepVariableObject<A> => {\n  const res: any = {}\n  for (const key in tokens) {\n    let val = tokens[key]\n    const name = parentPath ? `${parentPath}-${key}` : key\n    if (isVariable(val)) {\n      res[key] = val\n    } else if (val && typeof val === 'object') {\n      if (Array.isArray(val)) {\n        res[key] = val.map((val, i) => {\n          const skey = `${key}-${i}`\n          const sname = parentPath ? `${name}-${skey}` : skey\n          return isVariable(val)\n            ? val\n            : createVariable({\n                val,\n                key: skey,\n                name: sname,\n              })\n        })\n      } else {\n        res[key] = createVariables(tokens[key] as any, name === 'color' ? '' : name)\n      }\n    } else {\n      res[key] = isVariable(val) ? val : createVariable({ val, name, key })\n    }\n  }\n  return res\n}\n"],
-  "mappings": "AAAA;AAcO,MAAM,kBAAkB,CAC7B,QACA,aAAa,OACa;AAC1B,QAAM,MAAW,CAAC;AAClB,aAAW,OAAO,QAAQ;AACxB,QAAI,MAAM,OAAO;AACjB,UAAM,OAAO,aAAa,GAAG,cAAc,QAAQ;AACnD,QAAI,WAAW,GAAG,GAAG;AACnB,UAAI,OAAO;AAAA,IACb,WAAW,OAAO,OAAO,QAAQ,UAAU;AACzC,UAAI,MAAM,QAAQ,GAAG,GAAG;AACtB,YAAI,OAAO,IAAI,IAAI,CAAC,MAAK,MAAM;AAC7B,gBAAM,OAAO,GAAG,OAAO;AACvB,gBAAM,QAAQ,aAAa,GAAG,QAAQ,SAAS;AAC/C,iBAAO,WAAW,IAAG,IACjB,OACA,eAAe;AAAA,YACb;AAAA,YACA,KAAK;AAAA,YACL,MAAM;AAAA,UACR,CAAC;AAAA,QACP,CAAC;AAAA,MACH,OAAO;AACL,YAAI,OAAO,gBAAgB,OAAO,MAAa,SAAS,UAAU,KAAK,IAAI;AAAA,MAC7E;AAAA,IACF,OAAO;AACL,UAAI,OAAO,WAAW,GAAG,IAAI,MAAM,eAAe,EAAE,KAAK,MAAM,IAAI,CAAC;AAAA,IACtE;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import { simpleHash } from '@tamagui/helpers'\n\nimport { Variable, createVariable, isVariable } from './createVariable'\n\ntype DeepTokenObject<Val extends string | number = any> = {\n  [key: string]: Val | DeepTokenObject<Val>\n}\n\nexport type DeepVariableObject<A extends DeepTokenObject> = {\n  [Key in keyof A]: A[Key] extends string | number\n    ? Variable<A[Key]>\n    : A[Key] extends DeepTokenObject\n    ? DeepVariableObject<A[Key]>\n    : never\n}\n\nexport const createVariables = <A extends DeepTokenObject>(\n  tokens: A,\n  parentPath = '',\n  isFont = false\n): DeepVariableObject<A> => {\n  const res: any = {}\n  let i = 0\n  for (const key in tokens) {\n    i++\n    const val = tokens[key]\n    if (isVariable(val)) {\n      res[key] = val\n      continue\n    }\n    const niceKey = simpleHash(key)\n    let name = isFont ? niceKey.slice(0, 2) : i\n    name = parentPath ? `${parentPath}-${name}` : niceKey\n    if (val && typeof val === 'object') {\n      // recurse\n      res[key] = createVariables(tokens[key] as any, name)\n      continue\n    }\n    res[key] = isVariable(val) ? val : createVariable({ val, name, key: niceKey })\n  }\n  return res\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAE3B,SAAmB,gBAAgB,kBAAkB;AAc9C,MAAM,kBAAkB,CAC7B,QACA,aAAa,IACb,SAAS,UACiB;AAC1B,QAAM,MAAW,CAAC;AAClB,MAAI,IAAI;AACR,aAAW,OAAO,QAAQ;AACxB;AACA,UAAM,MAAM,OAAO;AACnB,QAAI,WAAW,GAAG,GAAG;AACnB,UAAI,OAAO;AACX;AAAA,IACF;AACA,UAAM,UAAU,WAAW,GAAG;AAC9B,QAAI,OAAO,SAAS,QAAQ,MAAM,GAAG,CAAC,IAAI;AAC1C,WAAO,aAAa,GAAG,cAAc,SAAS;AAC9C,QAAI,OAAO,OAAO,QAAQ,UAAU;AAElC,UAAI,OAAO,gBAAgB,OAAO,MAAa,IAAI;AACnD;AAAA,IACF;AACA,QAAI,OAAO,WAAW,GAAG,IAAI,MAAM,eAAe,EAAE,KAAK,MAAM,KAAK,QAAQ,CAAC;AAAA,EAC/E;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/helpers/RNComponents.js

@@ -1,11 +1,14 @@
-import * as ReactNative from "react-native";
-const RNComponents = /* @__PURE__ */ new WeakMap();
-for (const key of ["Image", "TextInput", "Text", "View"]) {
-  const val = ReactNative[key];
-  if (val && typeof val === "object") {
-    RNComponents.set(val, true);
-  }
-}
+import { Image, Text, TextInput, View } from "react-native";
+const RNComponents = /* @__PURE__ */ new Set([
+  Image,
+  TextInput,
+  Text,
+  View,
+  "Image",
+  "TextInput",
+  "Text",
+  "View"
+]);
 export {
   RNComponents
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/RNComponents.tsx"],
-  "sourcesContent": ["import * as ReactNative from 'react-native'\n\n// bye bye tree shaking... but only way to properly detect react-native components...\n// also neither rnw nor react support tree shaking atm\nexport const RNComponents = new WeakMap()\n\n// I was looping over all of them, but casuses deprecation warnings and there's only a few\n// we realistically support - lets whitelist rather than blacklist\nfor (const key of ['Image', 'TextInput', 'Text', 'View']) {\n  const val = ReactNative[key]\n  if (val && typeof val === 'object') {\n    RNComponents.set(val, true)\n  }\n}\n"],
-  "mappings": "AAAA;AAIO,MAAM,eAAe,oBAAI,QAAQ;AAIxC,WAAW,OAAO,CAAC,SAAS,aAAa,QAAQ,MAAM,GAAG;AACxD,QAAM,MAAM,YAAY;AACxB,MAAI,OAAO,OAAO,QAAQ,UAAU;AAClC,iBAAa,IAAI,KAAK,IAAI;AAAA,EAC5B;AACF;",
+  "sourcesContent": ["import { Image, Text, TextInput, View } from 'react-native'\n\n// limited support\nexport const RNComponents = new Set<any>([\n  Image,\n  TextInput,\n  Text,\n  View,\n  // see fake-react-native + styled() check\n  'Image',\n  'TextInput',\n  'Text',\n  'View',\n])\n"],
+  "mappings": "AAAA,SAAS,OAAO,MAAM,WAAW,YAAY;AAGtC,MAAM,eAAe,oBAAI,IAAS;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;",
   "names": []
 }

package/dist/esm/helpers/ThemeManager.js

@@ -0,0 +1,186 @@
+import { getThemes } from "../config";
+import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "../constants/constants";
+import { getThemeUnwrapped } from "../hooks/getThemeUnwrapped";
+const emptyState = { name: "" };
+function hasNoThemeUpdatingProps(props) {
+  return !props.name && !props.componentName && !props.inverse && !props.reset;
+}
+class ThemeManager {
+  constructor(props = {}, parentManager) {
+    this.props = props;
+    this.themeListeners = /* @__PURE__ */ new Set();
+    this.parentManager = null;
+    this.state = emptyState;
+    this.#allKeys = null;
+    if (parentManager === "root") {
+      this.updateState(props, false);
+      return;
+    }
+    if (!parentManager) {
+      throw new Error(`Must set up root first`);
+    }
+    if (hasNoThemeUpdatingProps(props)) {
+      return parentManager;
+    }
+    if (parentManager) {
+      this.parentManager = parentManager;
+    }
+    const updatedState = this.getStateIfChanged(props);
+    if (updatedState) {
+      this.state = updatedState;
+      return;
+    }
+    return parentManager || this;
+  }
+  updateState(props = this.props || {}, notify = true) {
+    const shouldFlush = (() => {
+      if (props.forceTheme) {
+        this.state.theme = props.forceTheme;
+        this.state.name = props.name || "";
+        return true;
+      }
+      const nextState = this.getStateIfChanged(props);
+      if (nextState) {
+        this.state = nextState;
+        return true;
+      }
+    })();
+    if (shouldFlush) {
+      this.#allKeys = null;
+      notify && this.notify();
+      return this.state;
+    }
+  }
+  getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
+    const _ = this.getState(props, parentManager);
+    if (state && state !== emptyState && !_) {
+      return parentManager == null ? void 0 : parentManager.state;
+    }
+    if (this.getStateShouldChange(_, state)) {
+      return _;
+    }
+  }
+  getStateShouldChange(nextState, state = this.state) {
+    if (!nextState || !nextState.theme || nextState.theme === (state == null ? void 0 : state.theme)) {
+      return null;
+    }
+    return nextState;
+  }
+  getState(props = this.props, parentManager = this.parentManager) {
+    return getState(props, parentManager) || (process.env.TAMAGUI_TARGET === "native" ? (parentManager == null ? void 0 : parentManager.state) || null : null);
+  }
+  #allKeys;
+  get allKeys() {
+    var _a;
+    this.#allKeys ??= /* @__PURE__ */ new Set([
+      ...((_a = this.parentManager) == null ? void 0 : _a.allKeys) || [],
+      ...Object.keys(this.state.theme || {})
+    ]);
+    return this.#allKeys;
+  }
+  getValue(key, state) {
+    let theme = (state || this.state).theme;
+    let manager = this;
+    while (theme && manager) {
+      if (key in theme) {
+        return theme[key];
+      }
+      manager = manager.parentManager;
+      theme = manager == null ? void 0 : manager.state.theme;
+    }
+  }
+  notify() {
+    this.themeListeners.forEach((cb) => cb(this.state.name, this));
+  }
+  onChangeTheme(cb) {
+    this.themeListeners.add(cb);
+    return () => {
+      this.themeListeners.delete(cb);
+    };
+  }
+}
+function getNextThemeClassName(name, isInverting = false) {
+  const next = `${THEME_CLASSNAME_PREFIX}${name}`;
+  if (isInverting) {
+    return next;
+  }
+  return next.replace("light_", "").replace("dark_", "");
+}
+function getState(props, parentManager) {
+  var _a, _b, _c;
+  const themes = getThemes();
+  if (props.name && props.reset) {
+    throw new Error(`Cannot reset + set new name`);
+  }
+  if (props.reset && !(parentManager == null ? void 0 : parentManager.parentManager)) {
+    throw new Error(`Cannot reset no grandparent exists`);
+  }
+  const nextName = props.reset ? ((_b = (_a = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _a.state) == null ? void 0 : _b.name) || "" : props.name || "";
+  const { componentName } = props;
+  const parentName = ((_c = parentManager == null ? void 0 : parentManager.state) == null ? void 0 : _c.name) || "";
+  const base = parentName.split(THEME_NAME_SEPARATOR);
+  const lastSegment = base[base.length - 1];
+  const isParentAComponentTheme = parentName && lastSegment[0].toUpperCase() === lastSegment[0];
+  if (isParentAComponentTheme) {
+    base.pop();
+  }
+  const parentBaseTheme = isParentAComponentTheme ? base.slice(0, base.length).join(THEME_NAME_SEPARATOR) : parentName;
+  const max = base.length;
+  const min = componentName && !nextName ? max : 0;
+  if (process.env.NODE_ENV === "development" && props.debug === "verbose")
+    [console.groupCollapsed("getState", props, { parentName, parentBaseTheme, base, min, max, isParentAComponentTheme }), console.trace(), console.groupEnd()];
+  for (let i = max; i >= min; i--) {
+    let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR);
+    if (props.inverse) {
+      prefix = inverseThemeName(prefix);
+    }
+    const potentials = [];
+    if (prefix && prefix !== parentBaseTheme) {
+      potentials.push(prefix);
+    }
+    if (nextName) {
+      potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName);
+    }
+    if (i === 1) {
+      const lastSegment2 = potentials.findIndex((x) => !x.includes("_"));
+      if (lastSegment2 > 0) {
+        potentials.splice(lastSegment2, 0, nextName);
+      }
+    }
+    if (componentName) {
+      if (nextName) {
+        potentials.push(
+          `${prefix.slice(0, prefix.indexOf(THEME_NAME_SEPARATOR))}_${nextName}_${componentName}`
+        );
+      }
+      potentials.push(`${prefix}_${componentName}`);
+      if (nextName) {
+        potentials.unshift(`${prefix}_${nextName}_${componentName}`);
+      }
+    }
+    const found = potentials.find((t) => t in themes);
+    if (process.env.NODE_ENV === "development" && props.debug === "verbose")
+      console.log("getState found", found, "from", potentials, "parentName", parentName);
+    if (found) {
+      if (found === parentName) {
+        return null;
+      }
+      const theme = themes[found];
+      return {
+        name: found,
+        theme: getThemeUnwrapped(theme),
+        className: getNextThemeClassName(found, props.inverse),
+        parentName
+      };
+    }
+  }
+  return null;
+}
+const inverseThemeName = (themeName) => {
+  return themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
+};
+export {
+  ThemeManager,
+  hasNoThemeUpdatingProps
+};
+//# sourceMappingURL=ThemeManager.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/ThemeManager.tsx"],
+  "sourcesContent": ["import { 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(\n    props = this.props,\n    state: ThemeManagerState | null = this.state,\n    parentManager = this.parentManager\n  ) {\n    const _ = this.getState(props, parentManager)\n    // is removing\n    if (state && state !== emptyState && !_) {\n      return parentManager?.state\n    }\n    if (this.getStateShouldChange(_, state)) {\n      return _\n    }\n  }\n\n  getStateShouldChange(\n    nextState: ThemeManagerState | null,\n    state: ThemeManagerState | null = this.state\n  ) {\n    if (!nextState || !nextState.theme || nextState.theme === state?.theme) {\n      return null\n    }\n    return nextState\n  }\n\n  getState(props = this.props, parentManager = this.parentManager) {\n    return (\n      getState(props, parentManager) ||\n      (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state || null : null)\n    )\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 =\n    componentName && !nextName\n      ? max // component name only 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.groupCollapsed('getState', props, { parentName, parentBaseTheme, base, min, max, isParentAComponentTheme }), console.trace(), console.groupEnd()]\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(\n          `${prefix.slice(0, prefix.indexOf(THEME_NAME_SEPARATOR))}_${nextName}_${componentName}`\n        )\n      }\n      potentials.push(`${prefix}_${componentName}`)\n      if (nextName) {\n        potentials.unshift(`${prefix}_${nextName}_${componentName}`)\n      }\n    }\n\n    const found = potentials.find((t) => t in themes)\n\n    // prettier-ignore\n    // eslint-disable-next-line no-console\n    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') console.log('getState found', found, 'from', potentials, 'parentName',parentName)\n\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": ["lastSegment"]
+}