@tamagui/core 1.0.0-alpha.6 → 1.0.0-alpha.66

package/dist/cjs/views/ThemeManagerContext.js

@@ -0,0 +1,85 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ThemeManagerContext_exports = {};
+__export(ThemeManagerContext_exports, {
+  ThemeManager: () => ThemeManager,
+  ThemeManagerContext: () => ThemeManagerContext
+});
+var import_react = require("react");
+class ThemeManager {
+  constructor() {
+    this.name = "light";
+    this.parentName = null;
+    this.keys = /* @__PURE__ */ new Map();
+    this.listeners = /* @__PURE__ */ new Map();
+    this.themeListeners = /* @__PURE__ */ new Set();
+    this.theme = null;
+  }
+  setActiveTheme({
+    name,
+    theme,
+    parentName
+  }) {
+    if (name === this.name)
+      return;
+    this.name = name;
+    this.theme = theme;
+    this.parentName = parentName || null;
+    this.update();
+  }
+  track(uuid, keys) {
+    if (!this.name)
+      return;
+    this.keys.set(uuid, keys);
+  }
+  update() {
+    var _a;
+    if (!this.name) {
+      this.keys.clear();
+    }
+    for (const [uuid, keys] of this.keys.entries()) {
+      if (keys.size) {
+        (_a = this.listeners.get(uuid)) == null ? void 0 : _a();
+      }
+    }
+    this.themeListeners.forEach((cb) => cb(this.name, this));
+  }
+  onChangeTheme(cb) {
+    this.themeListeners.add(cb);
+    return () => {
+      this.themeListeners.delete(cb);
+    };
+  }
+  onUpdate(uuid, cb) {
+    this.listeners.set(uuid, cb);
+    return () => {
+      this.listeners.delete(uuid);
+      this.keys.delete(uuid);
+    };
+  }
+}
+__name(ThemeManager, "ThemeManager");
+const ThemeManagerContext = (0, import_react.createContext)(new ThemeManager());
+module.exports = __toCommonJS(ThemeManagerContext_exports);
+//# sourceMappingURL=ThemeManagerContext.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/ThemeManagerContext.tsx"],
+  "sourcesContent": ["import { createContext } from 'react'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport class ThemeManager {\n  name: string | null = 'light'\n  parentName: string | null = null\n  keys = new Map<any, Set<string>>()\n  listeners = new Map<any, Function>()\n  themeListeners = new Set<ThemeListener>()\n  theme = null\n\n  setActiveTheme({\n    name,\n    theme,\n    parentName,\n  }: {\n    parentName?: string | null\n    name: string | null\n    theme?: any\n  }) {\n    if (name === this.name) return\n    this.name = name\n    this.theme = theme\n    this.parentName = parentName || null\n    this.update()\n  }\n\n  track(uuid: any, keys: Set<string>) {\n    if (!this.name) return\n    this.keys.set(uuid, keys)\n  }\n\n  update() {\n    if (!this.name) {\n      this.keys.clear()\n    }\n    for (const [uuid, keys] of this.keys.entries()) {\n      if (keys.size) {\n        this.listeners.get(uuid)?.()\n      }\n    }\n    this.themeListeners.forEach((cb) => cb(this.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n\n  onUpdate(uuid: any, cb: Function) {\n    this.listeners.set(uuid, cb)\n    return () => {\n      this.listeners.delete(uuid)\n      this.keys.delete(uuid)\n    }\n  }\n}\n\nexport const ThemeManagerContext = createContext<ThemeManager>(new ThemeManager())\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA8B;AAIvB,mBAAmB;AAAA,EAAnB,cAJP;AAKE,gBAAsB;AACtB,sBAA4B;AAC5B,gBAAO,oBAAI;AACX,qBAAY,oBAAI;AAChB,0BAAiB,oBAAI;AACrB,iBAAQ;AAAA;AAAA,EAER,eAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,KAKC;AACD,QAAI,SAAS,KAAK;AAAM;AACxB,SAAK,OAAO;AACZ,SAAK,QAAQ;AACb,SAAK,aAAa,cAAc;AAChC,SAAK;AAAA;AAAA,EAGP,MAAM,MAAW,MAAmB;AAClC,QAAI,CAAC,KAAK;AAAM;AAChB,SAAK,KAAK,IAAI,MAAM;AAAA;AAAA,EAGtB,SAAS;AAjCX;AAkCI,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,mBAAK,UAAU,IAAI,UAAnB;AAAA;AAAA;AAGJ,SAAK,eAAe,QAAQ,CAAC,OAAO,GAAG,KAAK,MAAM;AAAA;AAAA,EAGpD,cAAc,IAAmB;AAC/B,SAAK,eAAe,IAAI;AACxB,WAAO,MAAM;AACX,WAAK,eAAe,OAAO;AAAA;AAAA;AAAA,EAI/B,SAAS,MAAW,IAAc;AAChC,SAAK,UAAU,IAAI,MAAM;AACzB,WAAO,MAAM;AACX,WAAK,UAAU,OAAO;AACtB,WAAK,KAAK,OAAO;AAAA;AAAA;AAAA;AApDhB;AAyDA,MAAM,sBAAsB,gCAA4B,IAAI;",
+  "names": []
+}

package/dist/cjs/views/ThemeProvider.js

@@ -0,0 +1,73 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var ThemeProvider_exports = {};
+__export(ThemeProvider_exports, {
+  ThemeProvider: () => ThemeProvider
+});
+var import_react = __toESM(require("react"));
+var import_conf = require("../conf");
+var import_constants = require("../constants/constants");
+var import_platform = require("../constants/platform");
+var import_getThemeParentClassName = require("../helpers/getThemeParentClassName");
+var import_Theme = require("./Theme");
+var import_ThemeContext = require("./ThemeContext");
+const ThemeProvider = /* @__PURE__ */ __name((props) => {
+  if (!(0, import_conf.getHasConfigured)()) {
+    throw new Error(`Missing configureThemes() call, add to your root file`);
+  }
+  (0, import_platform.useIsomorphicLayoutEffect)(() => {
+    if (props.disableRootThemeClass) {
+      return;
+    }
+    if (typeof document !== "undefined") {
+      const cns = (0, import_getThemeParentClassName.getThemeParentClassName)(`${props.defaultTheme}`).split(" ");
+      cns.forEach((cn) => document.body.classList.add(cn));
+      return () => {
+        cns.forEach((cn) => document.body.classList.remove(cn));
+      };
+    }
+  }, []);
+  const themeContext = (0, import_react.useMemo)(() => {
+    return new Proxy(props.themes, {
+      get(target, key) {
+        if (key === import_constants.GET_DEFAULT_THEME)
+          return props.defaultTheme;
+        return Reflect.get(target, key);
+      }
+    });
+  }, [props.themes]);
+  return /* @__PURE__ */ import_react.default.createElement(import_ThemeContext.ThemeContext.Provider, {
+    value: themeContext
+  }, /* @__PURE__ */ import_react.default.createElement(import_Theme.Theme, {
+    name: props.defaultTheme,
+    disableThemeClass: props.disableRootThemeClass
+  }, props.children));
+}, "ThemeProvider");
+module.exports = __toCommonJS(ThemeProvider_exports);
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/cjs/views/ThemeProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/ThemeProvider.tsx"],
+  "sourcesContent": ["import React, { useMemo } from 'react'\n\nimport { getHasConfigured } from '../conf'\nimport { GET_DEFAULT_THEME } from '../constants/constants'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../helpers/getThemeParentClassName'\nimport { Theme } from './Theme'\nimport { ThemeContext } from './ThemeContext'\n\nexport type ThemeProviderProps = {\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  children?: any\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (!getHasConfigured()) {\n    throw new Error(`Missing configureThemes() call, add to your root file`)\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  useIsomorphicLayoutEffect(() => {\n    if (props.disableRootThemeClass) {\n      return\n    }\n    if (typeof document !== 'undefined') {\n      const cns = getThemeParentClassName(`${props.defaultTheme}`).split(' ')\n      cns.forEach((cn) => document.body.classList.add(cn))\n      return () => {\n        cns.forEach((cn) => document.body.classList.remove(cn))\n      }\n    }\n  }, [])\n\n  const themeContext = useMemo(() => {\n    return new Proxy(props.themes, {\n      get(target, key) {\n        if (key === GET_DEFAULT_THEME) return props.defaultTheme\n        return Reflect.get(target, key)\n      },\n    })\n  }, [props.themes])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme name={props.defaultTheme} disableThemeClass={props.disableRootThemeClass}>\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAE/B,kBAAiC;AACjC,uBAAkC;AAClC,sBAA0C;AAC1C,qCAAwC;AACxC,mBAAsB;AACtB,0BAA6B;AAStB,MAAM,gBAAgB,wBAAC,UAA8B;AAC1D,MAAI,CAAC,qCAAoB;AACvB,UAAM,IAAI,MAAM;AAAA;AAIlB,iDAA0B,MAAM;AAC9B,QAAI,MAAM,uBAAuB;AAC/B;AAAA;AAEF,QAAI,OAAO,aAAa,aAAa;AACnC,YAAM,MAAM,4DAAwB,GAAG,MAAM,gBAAgB,MAAM;AACnE,UAAI,QAAQ,CAAC,OAAO,SAAS,KAAK,UAAU,IAAI;AAChD,aAAO,MAAM;AACX,YAAI,QAAQ,CAAC,OAAO,SAAS,KAAK,UAAU,OAAO;AAAA;AAAA;AAAA,KAGtD;AAEH,QAAM,eAAe,0BAAQ,MAAM;AACjC,WAAO,IAAI,MAAM,MAAM,QAAQ;AAAA,MAC7B,IAAI,QAAQ,KAAK;AACf,YAAI,QAAQ;AAAmB,iBAAO,MAAM;AAC5C,eAAO,QAAQ,IAAI,QAAQ;AAAA;AAAA;AAAA,KAG9B,CAAC,MAAM;AAEV,SACE,mDAAC,iCAAa,UAAd;AAAA,IAAuB,OAAO;AAAA,KAC5B,mDAAC,oBAAD;AAAA,IAAO,MAAM,MAAM;AAAA,IAAc,mBAAmB,MAAM;AAAA,KACvD,MAAM;AAAA,GA/Bc;",
+  "names": []
+}

package/dist/esm/conf.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+let conf;
+const setConfig = /* @__PURE__ */ __name((next) => {
+  conf = next;
+}, "setConfig");
+const getHasConfigured = /* @__PURE__ */ __name(() => !!conf, "getHasConfigured");
+const getTamagui = /* @__PURE__ */ __name(() => conf, "getTamagui");
+const getTokens = /* @__PURE__ */ __name(() => conf.tokensParsed, "getTokens");
+const getThemes = /* @__PURE__ */ __name(() => conf.themes, "getThemes");
+const configListeners = /* @__PURE__ */ new Set();
+const onConfiguredOnce = /* @__PURE__ */ __name((cb) => {
+  if (conf) {
+    cb(conf);
+  } else {
+    configListeners.add(cb);
+  }
+}, "onConfiguredOnce");
+export {
+  conf,
+  configListeners,
+  getHasConfigured,
+  getTamagui,
+  getThemes,
+  getTokens,
+  onConfiguredOnce,
+  setConfig
+};
+//# sourceMappingURL=conf.js.map

package/dist/esm/conf.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/conf.ts"],
+  "sourcesContent": ["import { ConfigListener, TamaguiInternalConfig } from './types'\n\nexport let conf: TamaguiInternalConfig | null\n\nexport const setConfig = (next: TamaguiInternalConfig) => {\n  conf = next\n}\n\nexport const getHasConfigured = () => !!conf\nexport const getTamagui = () => 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"],
+  "mappings": ";;AAEO,IAAI;AAEJ,MAAM,YAAY,wBAAC,SAAgC;AACxD,SAAO;AAAA,GADgB;AAIlB,MAAM,mBAAmB,6BAAM,CAAC,CAAC,MAAR;AACzB,MAAM,aAAa,6BAAM,MAAN;AACnB,MAAM,YAAY,6BAAM,KAAM,cAAZ;AAClB,MAAM,YAAY,6BAAM,KAAM,QAAZ;AAElB,MAAM,kBAAkB,oBAAI;AAE5B,MAAM,mBAAmB,wBAAC,OAAuB;AACtD,MAAI,MAAM;AACR,OAAG;AAAA,SACE;AACL,oBAAgB,IAAI;AAAA;AAAA,GAJQ;",
+  "names": []
+}

package/dist/{constants → esm/constants}/constants.js

@@ -1,4 +1,6 @@
 import { isWeb } from "./platform";
+const GET_DEFAULT_THEME = "___TGUI";
+const PREFIX = `theme--`;
 const stackDefaultStyles = {
   alignItems: "stretch",
   flexShrink: 0,
@@ -9,6 +11,8 @@ const stackDefaultStyles = {
   }
 };
 export {
+  GET_DEFAULT_THEME,
+  PREFIX,
   stackDefaultStyles
 };
 //# sourceMappingURL=constants.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/constants/constants.ts"],
+  "sourcesContent": ["import { isWeb } from './platform'\n\nexport const GET_DEFAULT_THEME = '___TGUI'\n\nexport const PREFIX = `theme--`\n\nexport const stackDefaultStyles = {\n  alignItems: 'stretch',\n  flexShrink: 0,\n  // more accurately match react-native defaults on web\n  ...(isWeb && {\n    display: 'flex',\n    flexBasis: 'auto',\n    boxSizing: 'border-box',\n  }),\n}\n"],
+  "mappings": "AAAA;AAEO,MAAM,oBAAoB;AAE1B,MAAM,SAAS;AAEf,MAAM,qBAAqB;AAAA,EAChC,YAAY;AAAA,EACZ,YAAY;AAAA,KAER,SAAS;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA;AAAA;",
+  "names": []
+}

package/dist/{constants → esm/constants}/platform.js

@@ -1,6 +1,7 @@
+var _a;
 import { useEffect, useLayoutEffect } from "react";
 import { Platform } from "react-native";
-const isWeb = process.env.TAMAGUI_TARGET === "web" ? true : Platform?.OS === "web";
+const isWeb = process.env.TAMAGUI_TARGET !== "native" && (process.env.TAMAGUI_TARGET === "web" || ((_a = Platform) == null ? void 0 : _a.OS) === "web");
 const isSSR = isWeb && typeof window === "undefined";
 const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
 const isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");

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

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

package/dist/{constants → esm/constants}/pseudos.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/constants/pseudos.ts"],
+  "sources": ["../../../src/constants/pseudos.ts"],
   "sourcesContent": ["export const pseudos = {\n  focusStyle: {\n    name: 'focus',\n    priority: 3,\n  },\n  pressStyle: {\n    name: 'active',\n    priority: 2,\n  },\n  hoverStyle: {\n    name: 'hover',\n    priority: 1,\n  },\n}\n"],
   "mappings": "AAAO,MAAM,UAAU;AAAA,EACrB,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA,EAEZ,YAAY;AAAA,IACV,MAAM;AAAA,IACN,UAAU;AAAA;AAAA;",
   "names": []

package/dist/{constants → esm/constants}/rnw.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/constants/rnw.tsx"],
+  "sources": ["../../../src/constants/rnw.tsx"],
   "sourcesContent": ["const interopRequire = (src: any) => ('default' in src ? src.default : src)\n\nexport const rnw: Record<string, any> = {}\n\n// in static mode, require them directly since we can't import react-native-web at all (it has flow stuff in it)\nif (process.env.IS_STATIC === 'is_static') {\n  const createCompileableStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createCompileableStyle')\n  const createReactDOMStyle = require('react-native-web/dist/cjs/exports/StyleSheet/createReactDOMStyle')\n  const i18Style = require('react-native-web/dist/cjs/exports/StyleSheet/i18nStyle')\n  const atomic = require('react-native-web/dist/cjs/exports/StyleSheet/compile').atomic\n  Object.assign(rnw, {\n    createCompileableStyle,\n    createReactDOMStyle,\n    i18Style,\n    atomic,\n  })\n} else if (process.env.TAMAGUI_TARGET === 'web') {\n  // when targeting web (client) import it like so\n  Object.assign(rnw, interopRequire(require('react-native-web').TamaguiExports))\n}\n"],
   "mappings": ";;AAAA,MAAM,iBAAiB,wBAAC,QAAc,aAAa,MAAM,IAAI,UAAU,KAAhD;AAEhB,MAAM,MAA2B;AAGxC,IAAI,QAAQ,IAAI,cAAc,aAAa;AACzC,QAAM,yBAAyB,QAAQ;AACvC,QAAM,sBAAsB,QAAQ;AACpC,QAAM,WAAW,QAAQ;AACzB,QAAM,SAAS,QAAQ,wDAAwD;AAC/E,SAAO,OAAO,KAAK;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,WAEO,QAAQ,IAAI,mBAAmB,OAAO;AAE/C,SAAO,OAAO,KAAK,eAAe,QAAQ,oBAAoB;AAAA;",
   "names": []

package/dist/{createComponent.js → esm/createComponent.js}

@@ -1,5 +1,6 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import "./tamagui-base.css";
 import { concatClassName, stylePropsView } from "@tamagui/helpers";
 import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
@@ -14,24 +15,42 @@ import React, {
   useState
 } from "react";
 import { StyleSheet, Text, View } from "react-native";
+import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
 import { isTouchDevice, isWeb } from "./constants/platform";
 import { rnw } from "./constants/rnw";
-import { onConfiguredOnce } from "./createTamagui";
 import { addStylesUsingClassname, useStylesAsClassname } from "./helpers/addStylesUsingClassname";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
 import { getSplitStyles } from "./helpers/getSplitStyles";
 import { useFeatures } from "./hooks/useFeatures";
 import { usePressable } from "./hooks/usePressable";
+import { useTheme } from "./hooks/useTheme";
 import { TextAncestorContext } from "./views/TextAncestorContext";
-import { ThemeManagerContext } from "./views/ThemeManagerContext";
-const mouseUps = new Set();
+const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
   });
 }
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false
+};
+function createShallowUpdate(setter) {
+  return (next) => {
+    setter((prev) => {
+      for (const key in next) {
+        if (prev[key] !== next[key]) {
+          return { ...prev, ...next };
+        }
+      }
+      return prev;
+    });
+  };
+}
+__name(createShallowUpdate, "createShallowUpdate");
 function createComponent(configIn) {
   let staticConfig;
   if ("parsed" in configIn) {
@@ -40,30 +59,19 @@ function createComponent(configIn) {
     staticConfig = parseStaticConfig(configIn);
   }
   const { Component, validStyles, isText, isZStack } = staticConfig;
-  const validStyleProps = validStyles ?? stylePropsView;
+  const validStyleProps = validStyles != null ? validStyles : stylePropsView;
   let defaultProps = null;
   let tamaguiConfig;
-  let defaultsStyle;
+  let defaultNativeStyle = null;
   let defaultsClassName = "";
   let initialTheme;
   const component = forwardRef((props, forwardedRef) => {
+    var _a;
     const forceUpdate = useForceUpdate();
     const features = useFeatures(props, { forceUpdate });
-    const manager = useContext(ThemeManagerContext);
-    const [state, set_] = useState(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return { ...prev, ...next };
-        }
-      }
-      return prev;
-    }), "set");
+    const theme = useTheme();
+    const [state, set_] = useState(defaultComponentState);
+    const set = createShallowUpdate(set_);
     if (process.env.NODE_ENV === "development" && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
@@ -78,7 +86,7 @@ function createComponent(configIn) {
       pseudos,
       style,
       classNames
-    } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
+    } = getSplitStyles(props, staticConfig, theme);
     const {
       tag,
       hitSlop,
@@ -143,7 +151,6 @@ function createComponent(configIn) {
         onStartShouldSetResponderCapture
       });
     }
-    const isTracking = useRef(false);
     const internal = useRef();
     if (!internal.current) {
       internal.current = {
@@ -152,25 +159,20 @@ function createComponent(configIn) {
     }
     useEffect(() => {
       internal.current.isMounted = true;
-      const dispose = manager?.onChangeTheme((name) => {
-        if (isTracking.current) {
-          set({ theme: name });
-        }
-      });
       return () => {
-        dispose();
         mouseUps.delete(unPress);
-        isTracking.current = false;
         internal.current.isMounted = false;
       };
-    }, [manager]);
-    const element = isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
+    }, []);
+    const isInternalComponent = !Component || typeof Component === "string";
+    const element = isWeb ? isInternalComponent ? tag || Component : Component : Component;
     const ReactView = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
     const ReactText = !isWeb ? Text : element || "span";
     const ViewComponent = isText ? ReactText : ReactView;
     const isHovering = !isTouchDevice && !disabled && pseudos && state.hover;
     const isPressing = !disabled && pseudos && state.press;
     const styles = [
+      defaultNativeStyle ? defaultNativeStyle.base : null,
       style,
       isHovering ? pseudos.hoverStyle || null : null,
       isPressing ? pseudos.pressStyle || null : null
@@ -186,7 +188,7 @@ function createComponent(configIn) {
       const className = concatClassName(...classList);
       if (process.env.NODE_ENV === "development") {
         if (props["debug"]) {
-          console.log("\u{1F95A} className", { style, styles, classList, stylesClassNames, className });
+          console.log("\xBB className", { style, styles, classList, stylesClassNames, className: className.trim().split(" ") });
         }
       }
       viewProps.className = className;
@@ -235,7 +237,7 @@ function createComponent(configIn) {
       ...!isWeb && {
         onPressOut: (e) => {
           unPress();
-          onPressOut?.(e);
+          onPressOut == null ? void 0 : onPressOut(e);
         }
       },
       ...isWeb && !isTouchDevice && {
@@ -250,8 +252,8 @@ function createComponent(configIn) {
           if (Object.keys(next).length) {
             set(next);
           }
-          onHoverIn?.(e);
-          onMouseEnter?.(e);
+          onHoverIn == null ? void 0 : onHoverIn(e);
+          onMouseEnter == null ? void 0 : onMouseEnter(e);
         } : void 0,
         onMouseLeave: attachHover || attachPress ? (e) => {
           let next = {};
@@ -266,8 +268,8 @@ function createComponent(configIn) {
           if (Object.keys(next).length) {
             set(next);
           }
-          onHoverOut?.(e);
-          onMouseLeave?.(e);
+          onHoverOut == null ? void 0 : onHoverOut(e);
+          onMouseLeave == null ? void 0 : onMouseLeave(e);
         } : void 0
       },
       onMouseDown: attachPress ? (e) => {
@@ -275,14 +277,14 @@ function createComponent(configIn) {
           press: true,
           pressIn: true
         });
-        onPressIn?.(e);
-        onMouseDown?.(e);
+        onPressIn == null ? void 0 : onPressIn(e);
+        onMouseDown == null ? void 0 : onMouseDown(e);
       } : onPressIn,
       onClick: attachPress ? (e) => {
-        onPress?.(e);
-        onClick?.(e);
+        onPress == null ? void 0 : onPress(e);
+        onClick == null ? void 0 : onClick(e);
         unPress();
-        onPressOut?.(e);
+        onPressOut == null ? void 0 : onPressOut(e);
       } : onPressOut
     } : null;
     if (events) {
@@ -302,7 +304,7 @@ function createComponent(configIn) {
     const childEls = spacedChildren({
       children,
       space,
-      flexDirection: props.flexDirection || defaultProps?.flexDirection,
+      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection),
       isZStack
     });
     let content;
@@ -310,7 +312,12 @@ function createComponent(configIn) {
       const domProps = rnw.createDOMProps(viewProps);
       const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
       Object.assign(viewProps, domProps);
-      viewProps.className = className;
+      if (staticConfig.isReactNativeWeb) {
+        viewProps.dataSet = viewProps.dataSet || {};
+        Object.assign(viewProps.dataSet, { __className: className });
+      } else {
+        viewProps.className = className;
+      }
       content = createElement(ViewComponent, viewProps, childEls);
     } else {
       content = createElement(ViewComponent, viewProps, childEls);
@@ -322,40 +329,48 @@ function createComponent(configIn) {
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         viewProps["debug"] = true;
-        console.log("\u{1F95A} props in:", props);
-        console.log("\u{1F95A} props out:", viewProps);
-        console.log(props.onClick?.toString());
-        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls });
-        if (isWeb) {
-          console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
+        console.log("\xBB props in:", props);
+        console.log("\xBB props out:", viewProps, (_a = viewProps.className) == null ? void 0 : _a.split(" "));
+        console.log("\xBB etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls });
+        if (typeof window !== "undefined") {
+          console.log("\xBB component info", { staticConfig, tamaguiConfig });
         }
       }
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, features, content);
+    if (features.length) {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, features, content);
+    }
+    return content;
   });
   onConfiguredOnce((conf) => {
+    var _a;
+    const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
     tamaguiConfig = conf;
     initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true);
+    const { classNames, pseudos, style, viewProps } = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme);
     if (isWeb) {
-      if (next.classNames) {
-        defaultsClassName += next.classNames + " ";
+      if (classNames) {
+        defaultsClassName += classNames + " ";
+      }
+      defaultsClassName += addStylesUsingClassname([style, pseudos]);
+      if (process.env.NODE_ENV === "development" && shouldDebug) {
+        console.log("tamagui \u{1F41B}:", { defaultsClassName: defaultsClassName.split(" ") });
       }
-      defaultsClassName += addStylesUsingClassname([next.style, next.pseudos]);
     } else {
-      if (!hasWarnedOnce) {
-        hasWarnedOnce = true;
-        console.log("\u26A0\uFE0F we need to account for default styles for media queries");
+      const sheetStyles = {};
+      for (const styleObj of style) {
+        Object.assign(sheetStyles, styleObj);
       }
+      defaultNativeStyle = StyleSheet.create({
+        base: sheetStyles
+      });
     }
     component.defaultProps = {
-      ...next.viewProps,
+      ...viewProps,
       ...component.defaultProps
     };
-    if (process.env.NODE_ENV === "development") {
-      if (staticConfig.defaultProps?.debug) {
-        console.log("tamagui debug component:", next, defaultsClassName, component.defaultProps);
-      }
+    if (process.env.NODE_ENV === "development" && shouldDebug) {
+      console.log("tamagui \u{1F41B}:", { initialTheme, classNames, pseudos, style, viewProps, defaultsClassName, component });
     }
   });
   component["staticConfig"] = {
@@ -363,10 +378,14 @@ function createComponent(configIn) {
     ...staticConfig
   };
   const res = component;
-  res["extractable"] = (Component2) => {
+  res["extractable"] = (Component2, conf) => {
     Component2["staticConfig"] = extendStaticConfig(res, {
+      ...conf,
       neverFlatten: true,
-      defaultProps: Component2.defaultProps
+      defaultProps: {
+        ...Component2.defaultProps,
+        ...conf == null ? void 0 : conf.defaultProps
+      }
     });
     return Component2;
   };
@@ -382,10 +401,11 @@ const Spacer = createComponent({
   variants: {
     size: {
       "...size": (size, { tokens }) => {
+        var _a, _b;
         size = size == true ? "$true" : size;
         return {
-          width: tokens.size[size] ?? size,
-          height: tokens.size[size] ?? size
+          width: (_a = tokens.size[size]) != null ? _a : size,
+          height: (_b = tokens.size[size]) != null ? _b : size
         };
       }
     },
@@ -405,6 +425,7 @@ function spacedChildren({
   space,
   flexDirection
 }) {
+  var _a, _b;
   if (!space && !isZStack) {
     return children;
   }
@@ -418,11 +439,11 @@ function spacedChildren({
     if (child === null || child === void 0) {
       continue;
     }
-    const key = `${child?.["key"] ?? index}`;
+    const key = `${(_a = child == null ? void 0 : child["key"]) != null ? _a : index}`;
     next.push(/* @__PURE__ */ React.createElement(Fragment, {
       key
-    }, isZStack ? /* @__PURE__ */ React.createElement(Absolute, null, child) : child));
-    if (child?.["type"]?.["isVisuallyHidden"]) {
+    }, isZStack ? /* @__PURE__ */ React.createElement(AbsoluteFill, null, child) : child));
+    if ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isVisuallyHidden"]) {
       continue;
     }
     if (index !== len - 1) {
@@ -438,19 +459,13 @@ function spacedChildren({
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-const Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ React.createElement(View, {
-  style: sheet.fullscreen
-}, children), "Absolute");
-const sheet = StyleSheet.create({
-  fullscreen: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
-});
+const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? /* @__PURE__ */ React.createElement("div", {
+  className: "tamagui-absolute-fill"
+}, props.children) : /* @__PURE__ */ React.createElement(View, {
+  style: StyleSheet.absoluteFill
+}, props.child), "AbsoluteFill");
 export {
+  AbsoluteFill,
   Spacer,
   createComponent,
   mouseUps,