@tamagui/core 1.0.1-beta.141 → 1.0.1-beta.142

package/dist/cjs/Tamagui.js

@@ -28,7 +28,7 @@ __export(Tamagui_exports, {
 module.exports = __toCommonJS(Tamagui_exports);
 var Helpers = __toESM(require("@tamagui/helpers"));
 var rnw = __toESM(require("@tamagui/rnw"));
-var import_conf = require("./conf");
+var import_config = require("./config");
 var import_insertStyleRule = require("./helpers/insertStyleRule");
 class TamaguiManager {
   constructor() {
@@ -36,7 +36,7 @@ class TamaguiManager {
     this.Helpers = Helpers;
   }
   get config() {
-    return (0, import_conf.getConfig)();
+    return (0, import_config.getConfig)();
   }
   get insertedRules() {
     return (0, import_insertStyleRule.getAllRules)();

package/dist/cjs/Tamagui.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/Tamagui.ts"],
-  "sourcesContent": ["import * as Helpers from '@tamagui/helpers'\nimport * as rnw from '@tamagui/rnw'\n\nimport { getConfig } from './conf'\nimport { getAllRules, getAllSelectors, getAllTransforms } from './helpers/insertStyleRule'\n\n// serves a central store for state\n\nclass TamaguiManager {\n  rnw = rnw\n  Helpers = Helpers\n\n  get config() {\n    return getConfig()\n  }\n\n  get insertedRules() {\n    return getAllRules()\n  }\n\n  get allSelectors() {\n    return getAllSelectors()\n  }\n\n  get allTransforms() {\n    return getAllTransforms()\n  }\n\n  get identifierToValue() {\n    return identifierToValue\n  }\n}\n\nexport const Tamagui = new TamaguiManager()\n\nconst identifierToValue = new Map<string, any>()\n\nexport const getValueFromIdentifier = (identifier: string) => {\n  return identifierToValue.get(identifier)\n}\n\nexport const setIdentifierValue = (identifier: string, value: any) => {\n  identifierToValue.set(identifier, value)\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,UAAqB;AAErB,kBAA0B;AAC1B,6BAA+D;AAI/D,MAAM,eAAe;AAAA,EAArB;AACE,eAAM;AACN,mBAAU;AAAA;AAAA,EAEV,IAAI,SAAS;AACX,WAAO,2BAAU;AAAA,EACnB;AAAA,EAEA,IAAI,gBAAgB;AAClB,WAAO,wCAAY;AAAA,EACrB;AAAA,EAEA,IAAI,eAAe;AACjB,WAAO,4CAAgB;AAAA,EACzB;AAAA,EAEA,IAAI,gBAAgB;AAClB,WAAO,6CAAiB;AAAA,EAC1B;AAAA,EAEA,IAAI,oBAAoB;AACtB,WAAO;AAAA,EACT;AACF;AAEO,MAAM,UAAU,IAAI,eAAe;AAE1C,MAAM,oBAAoB,oBAAI,IAAiB;AAExC,MAAM,yBAAyB,CAAC,eAAuB;AAC5D,SAAO,kBAAkB,IAAI,UAAU;AACzC;AAEO,MAAM,qBAAqB,CAAC,YAAoB,UAAe;AACpE,oBAAkB,IAAI,YAAY,KAAK;AACzC;",
+  "sourcesContent": ["import * as Helpers from '@tamagui/helpers'\nimport * as rnw from '@tamagui/rnw'\n\nimport { getConfig } from './config'\nimport { getAllRules, getAllSelectors, getAllTransforms } from './helpers/insertStyleRule'\n\n// serves a central store for state\n\nclass TamaguiManager {\n  rnw = rnw\n  Helpers = Helpers\n\n  get config() {\n    return getConfig()\n  }\n\n  get insertedRules() {\n    return getAllRules()\n  }\n\n  get allSelectors() {\n    return getAllSelectors()\n  }\n\n  get allTransforms() {\n    return getAllTransforms()\n  }\n\n  get identifierToValue() {\n    return identifierToValue\n  }\n}\n\nexport const Tamagui = new TamaguiManager()\n\nconst identifierToValue = new Map<string, any>()\n\nexport const getValueFromIdentifier = (identifier: string) => {\n  return identifierToValue.get(identifier)\n}\n\nexport const setIdentifierValue = (identifier: string, value: any) => {\n  identifierToValue.set(identifier, value)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAAyB;AACzB,UAAqB;AAErB,oBAA0B;AAC1B,6BAA+D;AAI/D,MAAM,eAAe;AAAA,EAArB;AACE,eAAM;AACN,mBAAU;AAAA;AAAA,EAEV,IAAI,SAAS;AACX,WAAO,6BAAU;AAAA,EACnB;AAAA,EAEA,IAAI,gBAAgB;AAClB,WAAO,wCAAY;AAAA,EACrB;AAAA,EAEA,IAAI,eAAe;AACjB,WAAO,4CAAgB;AAAA,EACzB;AAAA,EAEA,IAAI,gBAAgB;AAClB,WAAO,6CAAiB;AAAA,EAC1B;AAAA,EAEA,IAAI,oBAAoB;AACtB,WAAO;AAAA,EACT;AACF;AAEO,MAAM,UAAU,IAAI,eAAe;AAE1C,MAAM,oBAAoB,oBAAI,IAAiB;AAExC,MAAM,yBAAyB,CAAC,eAAuB;AAC5D,SAAO,kBAAkB,IAAI,UAAU;AACzC;AAEO,MAAM,qBAAqB,CAAC,YAAoB,UAAe;AACpE,oBAAkB,IAAI,YAAY,KAAK;AACzC;",
   "names": []
 }

package/dist/cjs/addTheme.js

@@ -21,7 +21,7 @@ __export(addTheme_exports, {
   addTheme: () => addTheme
 });
 module.exports = __toCommonJS(addTheme_exports);
-var import_conf = require("./conf");
+var import_config = require("./config");
 var import_platform = require("./constants/platform");
 var import_getThemeCSSRules = require("./helpers/getThemeCSSRules");
 var import_themes = require("./helpers/themes");
@@ -32,36 +32,42 @@ function addTheme({
   update
 }) {
   var _a;
-  const config = (0, import_conf.getConfig)();
-  if (!config) {
-    throw new Error(`Must run createTamagui once before loading theme`);
-  }
-  if (!update && config.themes[themeName]) {
-    throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`);
+  const config = (0, import_config.getConfig)();
+  if (process.env.NODE_ENV === "development") {
+    if (!config) {
+      throw new Error(`Must run createTamagui once before loading theme`);
+    }
+    if (!update && config.themes[themeName]) {
+      throw new Error(`Already defined theme "${themeName}", use updateTheme to change values`);
+    }
   }
   const theme = { ...themeIn };
   for (const key in theme) {
     (0, import_themes.ensureThemeVariable)(theme, key);
   }
-  const cssRules = (0, import_getThemeCSSRules.getThemeCSSRules)({
-    config,
-    themeName,
-    names: [themeName],
-    theme
-  });
   const themeProxied = (0, import_themes.proxyThemeToParents)(themeName, theme, config.themes);
   config.themes[themeName] = themeProxied;
-  if (insertCSS && import_platform.isWeb) {
-    const id = `tamagui_theme_style_${themeName}`;
-    const existing = document.querySelector(`#${id}`);
-    const style = document.createElement("style");
-    style.id = id;
-    style.appendChild(document.createTextNode(cssRules.join("\n")));
-    document.head.appendChild(style);
-    if (existing) {
-      (_a = existing.parentElement) == null ? void 0 : _a.removeChild(existing);
+  let cssRules = [];
+  if (import_platform.isWeb) {
+    if (insertCSS) {
+      cssRules = (0, import_getThemeCSSRules.getThemeCSSRules)({
+        config,
+        themeName,
+        names: [themeName],
+        theme
+      });
+      const id = `tamagui_theme_style_${themeName}`;
+      const existing = document.querySelector(`#${id}`);
+      const style = document.createElement("style");
+      style.id = id;
+      style.appendChild(document.createTextNode(cssRules.join("\n")));
+      document.head.appendChild(style);
+      if (existing) {
+        (_a = existing.parentElement) == null ? void 0 : _a.removeChild(existing);
+      }
     }
   }
+  (0, import_config.updateConfig)("themes", { ...config.themes, [themeName]: themeProxied });
   return {
     theme: themeProxied,
     cssRules

package/dist/cjs/addTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/addTheme.ts"],
-  "sourcesContent": ["import { getConfig } from './conf'\nimport { isWeb } from './constants/platform'\nimport { getThemeCSSRules } from './helpers/getThemeCSSRules'\nimport { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'\nimport { ThemeObject } from './types'\n\nexport function addTheme({\n  name: themeName,\n  theme: themeIn,\n  insertCSS,\n  update,\n}: {\n  name: string\n  theme: ThemeObject\n  insertCSS?: boolean\n  update?: boolean\n}) {\n  const config = getConfig()\n  if (!config) {\n    throw new Error(`Must run createTamagui once before loading theme`)\n  }\n  if (!update && config.themes[themeName]) {\n    throw new Error(`Already defined theme \"${themeName}\", use updateTheme to change values`)\n  }\n  const theme = { ...themeIn }\n  for (const key in theme) {\n    ensureThemeVariable(theme, key)\n  }\n  const cssRules = getThemeCSSRules({\n    config,\n    themeName,\n    names: [themeName],\n    theme,\n  })\n  const themeProxied = proxyThemeToParents(themeName, theme, config.themes)\n  config.themes[themeName] = themeProxied\n\n  if (insertCSS && isWeb) {\n    const id = `tamagui_theme_style_${themeName}`\n    const existing = document.querySelector(`#${id}`)\n    const style = document.createElement('style')\n    style.id = id\n    style.appendChild(document.createTextNode(cssRules.join('\\n')))\n    document.head.appendChild(style)\n    if (existing) {\n      existing.parentElement?.removeChild(existing)\n    }\n  }\n\n  return {\n    theme: themeProxied,\n    cssRules,\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAC1B,sBAAsB;AACtB,8BAAiC;AACjC,oBAAyD;AAGlD,kBAAkB;AAAA,EACvB,MAAM;AAAA,EACN,OAAO;AAAA,EACP;AAAA,EACA;AAAA,GAMC;AAhBH;AAiBE,QAAM,SAAS,2BAAU;AACzB,MAAI,CAAC,QAAQ;AACX,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,MAAI,CAAC,UAAU,OAAO,OAAO,YAAY;AACvC,UAAM,IAAI,MAAM,0BAA0B,8CAA8C;AAAA,EAC1F;AACA,QAAM,QAAQ,EAAE,GAAG,QAAQ;AAC3B,aAAW,OAAO,OAAO;AACvB,2CAAoB,OAAO,GAAG;AAAA,EAChC;AACA,QAAM,WAAW,8CAAiB;AAAA,IAChC;AAAA,IACA;AAAA,IACA,OAAO,CAAC,SAAS;AAAA,IACjB;AAAA,EACF,CAAC;AACD,QAAM,eAAe,uCAAoB,WAAW,OAAO,OAAO,MAAM;AACxE,SAAO,OAAO,aAAa;AAE3B,MAAI,aAAa,uBAAO;AACtB,UAAM,KAAK,uBAAuB;AAClC,UAAM,WAAW,SAAS,cAAc,IAAI,IAAI;AAChD,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,KAAK;AACX,UAAM,YAAY,SAAS,eAAe,SAAS,KAAK,IAAI,CAAC,CAAC;AAC9D,aAAS,KAAK,YAAY,KAAK;AAC/B,QAAI,UAAU;AACZ,qBAAS,kBAAT,mBAAwB,YAAY;AAAA,IACtC;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { getConfig, updateConfig } from './config'\nimport { isWeb } from './constants/platform'\nimport { getThemeCSSRules } from './helpers/getThemeCSSRules'\nimport { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'\nimport { ThemeObject } from './types'\n\nexport function addTheme({\n  name: themeName,\n  theme: themeIn,\n  insertCSS,\n  update,\n}: {\n  name: string\n  theme: ThemeObject\n  insertCSS?: boolean\n  update?: boolean\n}) {\n  const config = getConfig()\n  if (process.env.NODE_ENV === 'development') {\n    if (!config) {\n      throw new Error(`Must run createTamagui once before loading theme`)\n    }\n    if (!update && config.themes[themeName]) {\n      throw new Error(`Already defined theme \"${themeName}\", use updateTheme to change values`)\n    }\n  }\n\n  const theme = { ...themeIn }\n  for (const key in theme) {\n    ensureThemeVariable(theme, key)\n  }\n\n  const themeProxied = proxyThemeToParents(themeName, theme, config.themes)\n  config.themes[themeName] = themeProxied\n\n  let cssRules: string[] = []\n\n  if (isWeb) {\n    if (insertCSS) {\n      cssRules = getThemeCSSRules({\n        config,\n        themeName,\n        names: [themeName],\n        theme,\n      })\n      const id = `tamagui_theme_style_${themeName}`\n      const existing = document.querySelector(`#${id}`)\n      const style = document.createElement('style')\n      style.id = id\n      style.appendChild(document.createTextNode(cssRules.join('\\n')))\n      document.head.appendChild(style)\n      if (existing) {\n        existing.parentElement?.removeChild(existing)\n      }\n    }\n  }\n\n  updateConfig('themes', { ...config.themes, [themeName]: themeProxied })\n\n  // trigger updates in components\n\n  return {\n    theme: themeProxied,\n    cssRules,\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAwC;AACxC,sBAAsB;AACtB,8BAAiC;AACjC,oBAAyD;AAGlD,kBAAkB;AAAA,EACvB,MAAM;AAAA,EACN,OAAO;AAAA,EACP;AAAA,EACA;AAAA,GAMC;AAhBH;AAiBE,QAAM,SAAS,6BAAU;AACzB,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI,MAAM,kDAAkD;AAAA,IACpE;AACA,QAAI,CAAC,UAAU,OAAO,OAAO,YAAY;AACvC,YAAM,IAAI,MAAM,0BAA0B,8CAA8C;AAAA,IAC1F;AAAA,EACF;AAEA,QAAM,QAAQ,EAAE,GAAG,QAAQ;AAC3B,aAAW,OAAO,OAAO;AACvB,2CAAoB,OAAO,GAAG;AAAA,EAChC;AAEA,QAAM,eAAe,uCAAoB,WAAW,OAAO,OAAO,MAAM;AACxE,SAAO,OAAO,aAAa;AAE3B,MAAI,WAAqB,CAAC;AAE1B,MAAI,uBAAO;AACT,QAAI,WAAW;AACb,iBAAW,8CAAiB;AAAA,QAC1B;AAAA,QACA;AAAA,QACA,OAAO,CAAC,SAAS;AAAA,QACjB;AAAA,MACF,CAAC;AACD,YAAM,KAAK,uBAAuB;AAClC,YAAM,WAAW,SAAS,cAAc,IAAI,IAAI;AAChD,YAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,YAAM,KAAK;AACX,YAAM,YAAY,SAAS,eAAe,SAAS,KAAK,IAAI,CAAC,CAAC;AAC9D,eAAS,KAAK,YAAY,KAAK;AAC/B,UAAI,UAAU;AACZ,uBAAS,kBAAT,mBAAwB,YAAY;AAAA,MACtC;AAAA,IACF;AAAA,EACF;AAEA,kCAAa,UAAU,EAAE,GAAG,OAAO,QAAQ,CAAC,YAAY,aAAa,CAAC;AAItE,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/config.js

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var config_exports = {};
+__export(config_exports, {
+  configListeners: () => configListeners,
+  getConfig: () => getConfig,
+  getHasConfigured: () => getHasConfigured,
+  getThemes: () => getThemes,
+  getTokens: () => getTokens,
+  onConfiguredOnce: () => onConfiguredOnce,
+  setConfig: () => setConfig,
+  setConfigFont: () => setConfigFont,
+  updateConfig: () => updateConfig
+});
+module.exports = __toCommonJS(config_exports);
+let conf;
+const setConfig = (next) => {
+  conf = next;
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(conf));
+    configListeners.clear();
+  }
+};
+const setConfigFont = (name, font, fontParsed) => {
+  if (process.env.NODE_ENV === "development") {
+    if (!conf)
+      throw new Error(`Haven't called createTamagui yet`);
+  }
+  Object.assign(conf.fonts, { [name]: font });
+  Object.assign(conf.fontsParsed, { [`$${name}`]: fontParsed });
+};
+const getHasConfigured = () => !!conf;
+const getConfig = () => conf;
+const getTokens = () => conf.tokensParsed;
+const getThemes = () => conf.themes;
+const configListeners = /* @__PURE__ */ new Set();
+const onConfiguredOnce = (cb) => {
+  if (conf) {
+    cb(conf);
+  } else {
+    configListeners.add(cb);
+  }
+};
+const updateConfig = (key, value) => {
+  Object.assign(key, value);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  configListeners,
+  getConfig,
+  getHasConfigured,
+  getThemes,
+  getTokens,
+  onConfiguredOnce,
+  setConfig,
+  setConfigFont,
+  updateConfig
+});
+//# sourceMappingURL=config.js.map

package/dist/cjs/config.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/config.ts"],
+  "sourcesContent": ["import { 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 setConfigFont = (name: string, font: any, fontParsed: any) => {\n  if (process.env.NODE_ENV === 'development') {\n    if (!conf) throw new Error(`Haven't called createTamagui yet`)\n  }\n  Object.assign(conf!.fonts, { [name]: font })\n  Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })\n}\n\nexport const getHasConfigured = () => !!conf\nexport const getConfig = () => conf!\nexport const getTokens = () => 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\nexport const updateConfig = (key: string, value: any) => {\n  Object.assign(key, value)\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAI;AAEG,MAAM,YAAY,CAAC,SAAgC;AACxD,SAAO;AACP,MAAI,gBAAgB,MAAM;AACxB,oBAAgB,QAAQ,CAAC,OAAO,GAAG,IAAK,CAAC;AACzC,oBAAgB,MAAM;AAAA,EACxB;AACF;AAEO,MAAM,gBAAgB,CAAC,MAAc,MAAW,eAAoB;AACzE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC;AAAM,YAAM,IAAI,MAAM,kCAAkC;AAAA,EAC/D;AACA,SAAO,OAAO,KAAM,OAAO,EAAE,CAAC,OAAO,KAAK,CAAC;AAC3C,SAAO,OAAO,KAAM,aAAa,EAAE,CAAC,IAAI,SAAS,WAAW,CAAC;AAC/D;AAEO,MAAM,mBAAmB,MAAM,CAAC,CAAC;AACjC,MAAM,YAAY,MAAM;AACxB,MAAM,YAAY,MAAM,KAAM;AAC9B,MAAM,YAAY,MAAM,KAAM;AAE9B,MAAM,kBAAkB,oBAAI,IAAoB;AAEhD,MAAM,mBAAmB,CAAC,OAAuB;AACtD,MAAI,MAAM;AACR,OAAG,IAAK;AAAA,EACV,OAAO;AACL,oBAAgB,IAAI,EAAE;AAAA,EACxB;AACF;AAEO,MAAM,eAAe,CAAC,KAAa,UAAe;AACvD,SAAO,OAAO,KAAK,KAAK;AAC1B;",
+  "names": []
+}

package/dist/cjs/constants/platform.js

@@ -22,6 +22,7 @@ __export(platform_exports, {
   isChrome: () => isChrome,
   isClient: () => isClient,
   isIOS: () => isIOS,
+  isRSC: () => isRSC,
   isSSR: () => isSSR,
   isTouchable: () => isTouchable,
   isWeb: () => isWeb,
@@ -32,6 +33,7 @@ __export(platform_exports, {
 module.exports = __toCommonJS(platform_exports);
 var import_react = require("react");
 var import_react_native = require("react-native");
+const import_meta = {};
 var _a, _b;
 const isAndroid = ((_a = import_react_native.Platform) == null ? void 0 : _a.OS) === "android";
 const isIOS = ((_b = import_react_native.Platform) == null ? void 0 : _b.OS) === "ios";
@@ -39,7 +41,10 @@ const isWeb = process.env.TAMAGUI_TARGET === "web";
 const isWindowDefined = typeof window !== "undefined";
 const isSSR = isWeb && !isWindowDefined;
 const isClient = isWeb && isWindowDefined;
-const useIsomorphicLayoutEffect = isSSR ? import_react.useEffect : import_react.useLayoutEffect;
+const isRSC = process.env.ENABLE_RSC ? import_meta.env ? import_meta.env.SSR : false : false;
+const idFn = () => {
+};
+const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? import_react.useEffect : import_react.useLayoutEffect;
 const isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
 const isWebTouchable = isClient && "ontouchstart" in window;
 const isTouchable = !isWeb || isWebTouchable;
@@ -49,6 +54,7 @@ const isTouchable = !isWeb || isWebTouchable;
   isChrome,
   isClient,
   isIOS,
+  isRSC,
   isSSR,
   isTouchable,
   isWeb,

package/dist/cjs/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'\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web'\nexport const isWindowDefined = typeof window !== 'undefined'\nexport const isSSR = isWeb && !isWindowDefined\nexport const isClient = isWeb && isWindowDefined\nexport const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const isWebTouchable = isClient && 'ontouchstart' in window\nexport const isTouchable = !isWeb || isWebTouchable\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,0BAAyB;AADzB;AAGO,MAAM,YAAY,2DAAU,QAAO;AACnC,MAAM,QAAQ,2DAAU,QAAO;AAC/B,MAAM,QAAQ,QAAQ,IAAI,mBAAmB;AAC7C,MAAM,kBAAkB,OAAO,WAAW;AAC1C,MAAM,QAAQ,SAAS,CAAC;AACxB,MAAM,WAAW,SAAS;AAC1B,MAAM,4BAA4B,QAAQ,yBAAY;AACtD,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,iBAAiB,YAAY,kBAAkB;AACrD,MAAM,cAAc,CAAC,SAAS;",
+  "sourcesContent": ["import { useEffect, useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = process.env.TAMAGUI_TARGET === 'web'\nexport const isWindowDefined = typeof window !== 'undefined'\nexport const isSSR = isWeb && !isWindowDefined\nexport const isClient = isWeb && isWindowDefined\n\nexport const isRSC = process.env.ENABLE_RSC\n  ? // note this is statically analyzed so no funny business, just access it without optional chaining\n    // @ts-ignore\n    import.meta.env\n    ? // @ts-ignore\n      import.meta.env.SSR\n    : false\n  : false\n\nconst idFn = () => {}\nexport const useIsomorphicLayoutEffect = isRSC ? idFn : isSSR ? useEffect : useLayoutEffect\nexport const isChrome = typeof navigator !== 'undefined' && /Chrome/.test(navigator.userAgent || '')\nexport const isWebTouchable = isClient && 'ontouchstart' in window\nexport const isTouchable = !isWeb || isWebTouchable\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2C;AAC3C,0BAAyB;AADzB;AAAA;AAGO,MAAM,YAAY,2DAAU,QAAO;AACnC,MAAM,QAAQ,2DAAU,QAAO;AAC/B,MAAM,QAAQ,QAAQ,IAAI,mBAAmB;AAC7C,MAAM,kBAAkB,OAAO,WAAW;AAC1C,MAAM,QAAQ,SAAS,CAAC;AACxB,MAAM,WAAW,SAAS;AAE1B,MAAM,QAAQ,QAAQ,IAAI,aAG7B,YAAY,MAEV,YAAY,IAAI,MAChB,QACF;AAEJ,MAAM,OAAO,MAAM;AAAC;AACb,MAAM,4BAA4B,QAAQ,OAAO,QAAQ,yBAAY;AACrE,MAAM,WAAW,OAAO,cAAc,eAAe,SAAS,KAAK,UAAU,aAAa,EAAE;AAC5F,MAAM,iBAAiB,YAAY,kBAAkB;AACrD,MAAM,cAAc,CAAC,SAAS;",
   "names": []
 }

package/dist/cjs/constants/platform.native.js

@@ -0,0 +1,62 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var platform_native_exports = {};
+__export(platform_native_exports, {
+  isAndroid: () => isAndroid,
+  isChrome: () => isChrome,
+  isClient: () => isClient,
+  isIOS: () => isIOS,
+  isRSC: () => isRSC,
+  isSSR: () => isSSR,
+  isTouchable: () => isTouchable,
+  isWeb: () => isWeb,
+  isWebTouchable: () => isWebTouchable,
+  isWindowDefined: () => isWindowDefined,
+  useIsomorphicLayoutEffect: () => useIsomorphicLayoutEffect
+});
+module.exports = __toCommonJS(platform_native_exports);
+var import_react = require("react");
+var import_react_native = require("react-native");
+var _a, _b;
+const isAndroid = ((_a = import_react_native.Platform) == null ? void 0 : _a.OS) === "android";
+const isIOS = ((_b = import_react_native.Platform) == null ? void 0 : _b.OS) === "ios";
+const isWeb = false;
+const isWindowDefined = false;
+const isSSR = false;
+const isClient = false;
+const isRSC = false;
+const useIsomorphicLayoutEffect = import_react.useLayoutEffect;
+const isChrome = false;
+const isWebTouchable = false;
+const isTouchable = true;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isAndroid,
+  isChrome,
+  isClient,
+  isIOS,
+  isRSC,
+  isSSR,
+  isTouchable,
+  isWeb,
+  isWebTouchable,
+  isWindowDefined,
+  useIsomorphicLayoutEffect
+});
+//# sourceMappingURL=platform.native.js.map

package/dist/cjs/constants/platform.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/platform.native.ts"],
+  "sourcesContent": ["import { useLayoutEffect } from 'react'\nimport { Platform } from 'react-native'\n\nexport const isAndroid = Platform?.OS === 'android'\nexport const isIOS = Platform?.OS === 'ios'\nexport const isWeb = false\nexport const isWindowDefined = false\nexport const isSSR = false\nexport const isClient = false\nexport const isRSC = false\nexport const useIsomorphicLayoutEffect = useLayoutEffect\nexport const isChrome = false\nexport const isWebTouchable = false\nexport const isTouchable = true\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,0BAAyB;AADzB;AAGO,MAAM,YAAY,2DAAU,QAAO;AACnC,MAAM,QAAQ,2DAAU,QAAO;AAC/B,MAAM,QAAQ;AACd,MAAM,kBAAkB;AACxB,MAAM,QAAQ;AACd,MAAM,WAAW;AACjB,MAAM,QAAQ;AACd,MAAM,4BAA4B;AAClC,MAAM,WAAW;AACjB,MAAM,iBAAiB;AACvB,MAAM,cAAc;",
+  "names": []
+}

package/dist/cjs/createComponent.js

@@ -35,7 +35,7 @@ var import_rnw = require("@tamagui/rnw");
 var import_use_force_update = require("@tamagui/use-force-update");
 var import_react = __toESM(require("react"));
 var import_react_native = require("react-native");
-var import_conf = require("./conf");
+var import_config = require("./config");
 var import_constants = require("./constants/constants");
 var import_platform = require("./constants/platform");
 var import_FontLanguageContext = require("./contexts/FontLanguageContext");
@@ -51,6 +51,7 @@ var import_proxyThemeVariables = require("./helpers/proxyThemeVariables");
 var import_useFeatures = require("./hooks/useFeatures");
 var import_useMedia = require("./hooks/useMedia");
 var import_usePressable = require("./hooks/usePressable");
+var import_useServerHooks = require("./hooks/useServerHooks");
 var import_useTheme = require("./hooks/useTheme");
 var import_Pressability = require("./vendor/Pressability");
 var import_Slot = require("./views/Slot");
@@ -75,7 +76,7 @@ if (typeof document !== "undefined") {
   document.addEventListener("touchcancel", cancelTouches);
 }
 function mergeShorthands({ defaultProps }, { shorthands }) {
-  for (const key in defaultProps) {
+  for (const key of Object.keys(defaultProps)) {
     defaultProps[shorthands[key] || key] = defaultProps[key];
   }
 }
@@ -107,29 +108,14 @@ function createComponent(configIn, ParentComponent) {
     } else {
       props = propsIn;
     }
-    const hostRef = (0, import_react.useRef)(null);
     const { Component, isText, isZStack } = staticConfig;
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
-    if (process.env.NODE_ENV === "development") {
-      if (props["debug"]) {
-        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
-        const banner = `${name} ${propsIn["data-is"] || ""}`;
-        console.group(`%c \u{1F41B} ${banner}`, "background: yellow;");
-        console.log("props", propsIn);
-        console.log("ref", hostRef, "(click to view)");
-        if (props["debug"] === "break") {
-          debugger;
-        }
-      }
-    }
     const forceUpdate = (0, import_use_force_update.useForceUpdate)();
+    config = config || (0, import_config.getConfig)();
     const theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
-    const states = (0, import_react.useState)(defaultComponentState);
+    const states = (0, import_useServerHooks.useServerState)(defaultComponentState);
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
-    const setState = states[1];
-    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(setState);
-    const languageContext = (0, import_react.useContext)(import_FontLanguageContext.FontLanguageContext);
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
     const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(import_platform.isWeb && isText ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false);
@@ -144,9 +130,28 @@ function createComponent(configIn, ParentComponent) {
       hasTextAncestor,
       resolveVariablesAs: "value"
     };
-    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles.classNames, languageContext || void 0, props["debug"]);
+    const languageContext = import_platform.isRSC ? null : (0, import_react.useContext)(import_FontLanguageContext.FontLanguageContext);
+    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, splitStyleState, props.asChild ? null : initialSplitStyles == null ? void 0 : initialSplitStyles.classNames, languageContext || void 0, props["debug"]);
+    const hostRef = (0, import_useServerHooks.useServerRef)(null);
+    const setState = states[1];
+    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(setState);
+    if (process.env.NODE_ENV === "development") {
+      if (props["debug"]) {
+        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
+        const type = staticConfig.isReactNativeWeb ? "rnw" : "tamagui";
+        const banner = `${name} ${propsIn["data-is"] || ""} ${type}`;
+        console.group(`%c \u{1F41B} ${banner}`, "background: yellow;");
+        console.log("props in", propsIn);
+        if (typeof window !== "undefined") {
+          console.log("ref", hostRef, "(click to view)");
+        }
+        if (props["debug"] === "break") {
+          debugger;
+        }
+      }
+    }
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
-    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
+    const useAnimations = (_a = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
     const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null;
@@ -272,28 +277,30 @@ function createComponent(configIn, ParentComponent) {
       } = nonTamaguiProps;
       viewProps = webProps;
       (0, import_assignNativePropsToWeb.assignNativePropsToWeb)(elementType, viewProps, nonTamaguiProps);
-      (0, import_rnw.useElementLayout)(hostRef, onLayout);
-      (0, import_rnw.useResponderEvents)(hostRef, {
-        onMoveShouldSetResponder,
-        onMoveShouldSetResponderCapture,
-        onResponderEnd,
-        onResponderGrant,
-        onResponderMove,
-        onResponderReject,
-        onResponderRelease,
-        onResponderStart,
-        onResponderTerminate,
-        onResponderTerminationRequest,
-        onScrollShouldSetResponder,
-        onScrollShouldSetResponderCapture,
-        onSelectionChangeShouldSetResponder,
-        onSelectionChangeShouldSetResponderCapture,
-        onStartShouldSetResponder,
-        onStartShouldSetResponderCapture
-      });
-      const platformMethodsRef = (0, import_rnw.usePlatformMethods)(viewProps);
-      const setRef = (0, import_rnw.useMergeRefs)(hostRef, platformMethodsRef, forwardedRef);
-      viewProps.ref = setRef;
+      if (!import_platform.isRSC) {
+        (0, import_rnw.useElementLayout)(hostRef, onLayout);
+        (0, import_rnw.useResponderEvents)(hostRef, {
+          onMoveShouldSetResponder,
+          onMoveShouldSetResponderCapture,
+          onResponderEnd,
+          onResponderGrant,
+          onResponderMove,
+          onResponderReject,
+          onResponderRelease,
+          onResponderStart,
+          onResponderTerminate,
+          onResponderTerminationRequest,
+          onScrollShouldSetResponder,
+          onScrollShouldSetResponderCapture,
+          onSelectionChangeShouldSetResponder,
+          onSelectionChangeShouldSetResponderCapture,
+          onStartShouldSetResponder,
+          onStartShouldSetResponderCapture
+        });
+        const platformMethodsRef = (0, import_rnw.usePlatformMethods)(viewProps);
+        const setRef = (0, import_rnw.useMergeRefs)(hostRef, platformMethodsRef, forwardedRef);
+        viewProps.ref = setRef;
+      }
       if (props.href != void 0 && hrefAttrs != void 0) {
         const { download, rel, target } = hrefAttrs;
         if (download != null) {
@@ -336,7 +343,7 @@ function createComponent(configIn, ParentComponent) {
         }
       });
     }
-    const internal = (0, import_react.useRef)();
+    const internal = (0, import_useServerHooks.useServerRef)();
     if (!internal.current) {
       internal.current = {
         isMounted: true
@@ -370,7 +377,7 @@ function createComponent(configIn, ParentComponent) {
         animationStyles ?? style,
         medias
       ];
-      if (!animationStyles) {
+      if (!animationStyles && initialSplitStyles) {
         const initPseudos = initialSplitStyles.pseudos;
         const force = shouldForcePseudo;
         !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, "enterStyle");
@@ -408,8 +415,13 @@ function createComponent(configIn, ParentComponent) {
           className,
           id: props.id
         };
-        if (props["data-is"]) {
-          viewProps.dataSet.is = props["data-is"];
+        if (process.env.NODE_ENV === "development") {
+          Object.keys(viewProps).forEach((key) => {
+            if (key.startsWith("data-")) {
+              viewProps.dataSet[key.replace("data-", "")] = viewProps[key];
+              delete viewProps[key];
+            }
+          });
         }
       } else {
         viewProps.className = className;
@@ -418,7 +430,7 @@ function createComponent(configIn, ParentComponent) {
     } else {
       viewProps.style = styles;
     }
-    const initialPseudos = initialSplitStyles.pseudos;
+    const initialPseudos = initialSplitStyles == null ? void 0 : initialSplitStyles.pseudos;
     const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle) || onPress || onPressOut || onPressIn || onClick);
     const isHoverable = import_platform.isWeb;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
@@ -435,7 +447,7 @@ function createComponent(configIn, ParentComponent) {
         pressIn: false
       });
     }, []);
-    const events = shouldAttach ? {
+    const events = shouldAttach && !import_platform.isRSC ? {
       [pressOutKey]: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
@@ -531,7 +543,7 @@ function createComponent(configIn, ParentComponent) {
         onPressOut
       };
     }
-    if (import_platform.isWeb) {
+    if (!import_platform.isRSC && import_platform.isWeb) {
       const [pressableProps] = (0, import_usePressable.usePressable)(events ? {
         disabled,
         ...hitSlop && {
@@ -580,7 +592,7 @@ function createComponent(configIn, ParentComponent) {
     if (process.env.TAMAGUI_TARGET === "web") {
       const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
       const shouldWrapWithComponentTheme = isAnimatedRNWView && (0, import_createPropMapper.getReturnVariablesAs)(props, splitStyleState) === "non-color-value";
-      const shouldWrapWithHover = events && attachHover;
+      const shouldWrapWithHover = Boolean(events || import_platform.isRSC) && attachHover;
       if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
         const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
         const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
@@ -589,7 +601,7 @@ function createComponent(configIn, ParentComponent) {
           style: {
             display: "contents"
           },
-          ...shouldWrapWithHover && {
+          ...events && shouldWrapWithHover && {
             onMouseEnter: events.onMouseEnter,
             onMouseLeave: events.onMouseLeave
           }
@@ -598,7 +610,8 @@ function createComponent(configIn, ParentComponent) {
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.groupCollapsed("props out", viewProps, typeof elementType === "string" ? elementType : "Component");
+        const element2 = typeof elementType === "string" ? elementType : "Component";
+        console.groupCollapsed(`render <${element2} /> with props`, viewProps);
         for (const key in viewProps) {
           console.log(key, viewProps[key]);
         }
@@ -610,15 +623,14 @@ function createComponent(configIn, ParentComponent) {
         console.groupEnd();
       }
     }
-    return features.elements.length ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features.elements, content) : content;
+    return !import_platform.isRSC && features.elements.length ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features.elements, content) : content;
   });
   if (staticConfig.componentName) {
     component.displayName = staticConfig.componentName;
   }
-  (0, import_conf.onConfiguredOnce)((conf) => {
-    if (process.env.IS_STATIC === "is_static") {
+  (0, import_config.onConfiguredOnce)((conf) => {
+    if (process.env.IS_STATIC === "is_static")
       return;
-    }
     tamaguiConfig = conf;
     mergeShorthands(staticConfig, tamaguiConfig);
     if (tamaguiConfig.animations) {
@@ -627,7 +639,7 @@ function createComponent(configIn, ParentComponent) {
       AnimatedView = tamaguiConfig.animations.View;
     }
     initialTheme = initialTheme || (0, import_proxyThemeVariables.proxyThemeVariables)(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
-    config = (0, import_conf.getConfig)();
+    config = (0, import_config.getConfig)();
     let defaultPropsIn = staticConfig.defaultProps || {};
     const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
     if (config.defaultProps && parentNames && staticConfig.componentName) {
@@ -719,6 +731,7 @@ const Spacer = createComponent({
   validStyles: import_helpers.validStyles,
   defaultProps: {
     ...import_constants.stackDefaultStyles,
+    tag: "span",
     size: true
   },
   variants: {