@tamagui/core 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/{views → esm/views}/Theme.js

@@ -11,28 +11,38 @@ const Theme = /* @__PURE__ */ __name((props) => {
   const themes = useContext(ThemeContext);
   const [parentName, setParentName] = useState(parent.name || "light");
   if (!themes) {
-    console.warn("no themes???", props);
+    console.warn("Error, no themes in context", props);
     return props.children;
   }
-  const name = props.name;
-  const theme = themes[name] || themes[`${name}-${parentName}`];
+  const nextNameParent = `${props.name}-${parentName}`;
+  const nextNameParentParent = `${props.name}-${parent.parentName}`;
+  const name = !props.name ? null : props.name in themes ? props.name : nextNameParent in themes ? nextNameParent : nextNameParentParent in themes ? nextNameParentParent : null;
+  const theme = name ? themes[name] : null;
   const themeManager = useConstant(() => {
+    if (!theme) {
+      return null;
+    }
     const manager = new ThemeManager();
     if (name) {
-      manager.setActiveTheme(name, themes[name]);
+      manager.setActiveTheme({ name, theme: themes[name], parentName });
     }
     return manager;
   });
   useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme);
+    if (!themeManager) {
+      return;
+    }
+    if (name) {
+      themeManager.setActiveTheme({ name, theme, parentName });
+    }
     return parent.onChangeTheme((next) => {
       if (next) {
-        themeManager.setActiveTheme(next, themes[next]);
+        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName });
         setParentName(next);
       }
     });
-  }, [themes, name]);
-  if (!name) {
+  }, [themes, name, parentName]);
+  if (!name || !theme) {
     return props.children;
   }
   const contents = themeManager ? /* @__PURE__ */ React.createElement(ThemeManagerContext.Provider, {
@@ -42,11 +52,13 @@ const Theme = /* @__PURE__ */ __name((props) => {
     if (props.disableThemeClass) {
       return contents;
     }
-    const color = themes[name]?.["color"]?.["variable"];
-    return /* @__PURE__ */ React.createElement("div", {
-      className: getThemeParentClassName(name),
-      style: { display: "contents", color }
-    }, contents);
+    if (name) {
+      const color = themes[name]?.["color"]?.["variable"];
+      return /* @__PURE__ */ React.createElement("div", {
+        className: getThemeParentClassName(props.name),
+        style: { display: "contents", color }
+      }, contents);
+    }
   }
   return contents;
 }, "Theme");

package/dist/esm/views/Theme.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/Theme.tsx"],
+  "sourcesContent": ["import React, { useContext, useState } from 'react'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getThemeParentClassName } from '../createTamagui'\nimport { useConstant } from '../hooks/useConstant'\nimport { ThemeName } from '../types'\nimport { ThemeContext } from './ThemeContext'\nimport { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'\n\nexport type ThemeProps = {\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  children?: any\n}\n\nexport const Theme = (props: ThemeProps) => {\n  const parent = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext)\n  const [parentName, setParentName] = useState(parent.name || 'light')\n  if (!themes) {\n    console.warn('Error, no themes in context', props)\n    return props.children\n  }\n\n  const nextNameParent = `${props.name}-${parentName}`\n  const nextNameParentParent = `${props.name}-${parent.parentName}`\n  const name = !props.name\n    ? null\n    : props.name in themes\n    ? props.name\n    : nextNameParent in themes\n    ? nextNameParent\n    : nextNameParentParent in themes\n    ? nextNameParentParent\n    : null\n  const theme = name ? themes[name] : null\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!theme) {\n      return null\n    }\n    const manager = new ThemeManager()\n    if (name) {\n      manager.setActiveTheme({ name, theme: themes[name], parentName })\n    }\n    return manager\n  })\n\n  useIsomorphicLayoutEffect(() => {\n    if (!themeManager) {\n      return\n    }\n    if (name) {\n      themeManager.setActiveTheme({ name, theme, parentName })\n    }\n    return parent.onChangeTheme((next) => {\n      if (next) {\n        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })\n        setParentName(next)\n      }\n    })\n  }, [themes, name, parentName])\n\n  if (!name || !theme) {\n    return props.children\n  }\n\n  const contents = themeManager ? (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {props.children}\n    </ThemeManagerContext.Provider>\n  ) : (\n    props.children\n  )\n\n  if (isWeb) {\n    if (props.disableThemeClass) {\n      return contents\n    }\n    if (name) {\n      const color = themes[name]?.['color']?.['variable']\n      return (\n        <div\n          className={getThemeParentClassName(props.name)}\n          // in order to provide currentColor, set color by default\n          style={{ display: 'contents', color }}\n        >\n          {contents}\n        </div>\n      )\n    }\n  }\n\n  return contents\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAEA;AACA;AAQO,MAAM,QAAQ,wBAAC,UAAsB;AAC1C,QAAM,SAAS,WAAW;AAC1B,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,YAAY,iBAAiB,SAAS,OAAO,QAAQ;AAC5D,MAAI,CAAC,QAAQ;AACX,YAAQ,KAAK,+BAA+B;AAC5C,WAAO,MAAM;AAAA;AAGf,QAAM,iBAAiB,GAAG,MAAM,QAAQ;AACxC,QAAM,uBAAuB,GAAG,MAAM,QAAQ,OAAO;AACrD,QAAM,OAAO,CAAC,MAAM,OAChB,OACA,MAAM,QAAQ,SACd,MAAM,OACN,kBAAkB,SAClB,iBACA,wBAAwB,SACxB,uBACA;AACJ,QAAM,QAAQ,OAAO,OAAO,QAAQ;AACpC,QAAM,eAAe,YAAiC,MAAM;AAC1D,QAAI,CAAC,OAAO;AACV,aAAO;AAAA;AAET,UAAM,UAAU,IAAI;AACpB,QAAI,MAAM;AACR,cAAQ,eAAe,EAAE,MAAM,OAAO,OAAO,OAAO;AAAA;AAEtD,WAAO;AAAA;AAGT,4BAA0B,MAAM;AAC9B,QAAI,CAAC,cAAc;AACjB;AAAA;AAEF,QAAI,MAAM;AACR,mBAAa,eAAe,EAAE,MAAM,OAAO;AAAA;AAE7C,WAAO,OAAO,cAAc,CAAC,SAAS;AACpC,UAAI,MAAM;AACR,qBAAa,eAAe,EAAE,MAAM,MAAM,OAAO,OAAO,OAAO;AAC/D,sBAAc;AAAA;AAAA;AAAA,KAGjB,CAAC,QAAQ,MAAM;AAElB,MAAI,CAAC,QAAQ,CAAC,OAAO;AACnB,WAAO,MAAM;AAAA;AAGf,QAAM,WAAW,eACf,oCAAC,oBAAoB,UAArB;AAAA,IAA8B,OAAO;AAAA,KAClC,MAAM,YAGT,MAAM;AAGR,MAAI,OAAO;AACT,QAAI,MAAM,mBAAmB;AAC3B,aAAO;AAAA;AAET,QAAI,MAAM;AACR,YAAM,QAAQ,OAAO,QAAQ,WAAW;AACxC,aACE,oCAAC,OAAD;AAAA,QACE,WAAW,wBAAwB,MAAM;AAAA,QAEzC,OAAO,EAAE,SAAS,YAAY;AAAA,SAE7B;AAAA;AAAA;AAMT,SAAO;AAAA,GA7EY;",
+  "names": []
+}

package/{_ → dist/esm}/views/ThemeContext.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/views/ThemeContext.tsx"],
+  "sources": ["../../../src/views/ThemeContext.tsx"],
   "sourcesContent": ["import { createContext } from 'react'\n\nimport { Themes } from '../types'\n\nexport const ThemeContext = createContext<Themes>(null as any)\n"],
   "mappings": "AAAA;AAIO,MAAM,eAAe,cAAsB;",
   "names": []

package/{_ → dist/esm}/views/ThemeInverse.js

@@ -15,7 +15,6 @@ const ThemeInverse = /* @__PURE__ */ __name((props) => {
   const themeName = useThemeName();
   const defaultTheme = useDefaultThemeName();
   const name = inversions[themeName] || inversions[defaultTheme] || null;
-  console.log("todo fixme invert", { themeName, defaultTheme, next: name });
   return /* @__PURE__ */ React.createElement(Theme, {
     name
   }, props.children);

package/{_ → dist/esm}/views/ThemeInverse.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../src/views/ThemeInverse.tsx"],
-  "sourcesContent": ["import React from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const name = inversions[themeName] || inversions[defaultTheme] || null\n  console.log('todo fixme invert', { themeName, defaultTheme, next: name })\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,4BAA4B,MAAoB;AACrD,eAAa;AAAA;AADC;AAIT,MAAM,eAAe,wBAAC,UAA6B;AACxD,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,WAAW,cAAc,WAAW,iBAAiB;AAClE,UAAQ,IAAI,qBAAqB,EAAE,WAAW,cAAc,MAAM;AAClE,SAAO,oCAAC,OAAD;AAAA,IAAO;AAAA,KAAa,MAAM;AAAA,GALP;",
+  "sources": ["../../../src/views/ThemeInverse.tsx"],
+  "sourcesContent": ["import React from 'react'\n\nimport { useDefaultThemeName, useThemeName } from '../hooks/useTheme'\nimport { Theme } from './Theme'\n\ntype StringRecord = { [key: string]: string }\n\nlet inversions: StringRecord = {\n  light: 'dark',\n  dark: 'light',\n}\n\nexport function setThemeInversions(next: StringRecord) {\n  inversions = next\n}\n\nexport const ThemeInverse = (props: { children: any }) => {\n  const themeName = useThemeName()\n  const defaultTheme = useDefaultThemeName()\n  const name = inversions[themeName] || inversions[defaultTheme] || null\n  return <Theme name={name}>{props.children}</Theme>\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AAIA,IAAI,aAA2B;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AAAA;AAGD,4BAA4B,MAAoB;AACrD,eAAa;AAAA;AADC;AAIT,MAAM,eAAe,wBAAC,UAA6B;AACxD,QAAM,YAAY;AAClB,QAAM,eAAe;AACrB,QAAM,OAAO,WAAW,cAAc,WAAW,iBAAiB;AAClE,SAAO,oCAAC,OAAD;AAAA,IAAO;AAAA,KAAa,MAAM;AAAA,GAJP;",
   "names": []
 }

package/dist/{views → esm/views}/ThemeManagerContext.js

@@ -4,16 +4,22 @@ import { createContext } from "react";
 class ThemeManager {
   constructor() {
     this.name = "light";
+    this.parentName = null;
     this.keys = new Map();
     this.listeners = new Map();
-    this.callbacks = new Set();
+    this.themeListeners = new Set();
     this.theme = null;
   }
-  setActiveTheme(name, theme) {
+  setActiveTheme({
+    name,
+    theme,
+    parentName
+  }) {
     if (name === this.name)
       return;
     this.name = name;
     this.theme = theme;
+    this.parentName = parentName || null;
     this.update();
   }
   track(uuid, keys) {
@@ -30,12 +36,12 @@ class ThemeManager {
         this.listeners.get(uuid)?.();
       }
     }
-    this.callbacks.forEach((cb) => cb(this.name));
+    this.themeListeners.forEach((cb) => cb(this.name, this));
   }
   onChangeTheme(cb) {
-    this.callbacks.add(cb);
+    this.themeListeners.add(cb);
     return () => {
-      this.callbacks.delete(cb);
+      this.themeListeners.delete(cb);
     };
   }
   onUpdate(uuid, cb) {

package/dist/esm/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;AAIO,mBAAmB;AAAA,EAAnB,cAJP;AAKE,gBAAsB;AACtB,sBAA4B;AAC5B,gBAAO,IAAI;AACX,qBAAY,IAAI;AAChB,0BAAiB,IAAI;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;AACP,QAAI,CAAC,KAAK,MAAM;AACd,WAAK,KAAK;AAAA;AAEZ,eAAW,CAAC,MAAM,SAAS,KAAK,KAAK,WAAW;AAC9C,UAAI,KAAK,MAAM;AACb,aAAK,UAAU,IAAI;AAAA;AAAA;AAGvB,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,cAA4B,IAAI;",
+  "names": []
+}

package/{_ → dist/esm}/views/ThemeProvider.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../src/views/ThemeProvider.tsx"],
+  "sources": ["../../../src/views/ThemeProvider.tsx"],
   "sourcesContent": ["import React, { useMemo } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getHasConfigured, getThemeParentClassName } from '../createTamagui'\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 GET_DEFAULT_THEME = '___TGUI'\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;AAEA;AACA;AACA;AACA;AASO,MAAM,oBAAoB;AAE1B,MAAM,gBAAgB,wBAAC,UAA8B;AAC1D,MAAI,CAAC,oBAAoB;AACvB,UAAM,IAAI,MAAM;AAAA;AAIlB,4BAA0B,MAAM;AAC9B,QAAI,MAAM,uBAAuB;AAC/B;AAAA;AAEF,QAAI,OAAO,aAAa,aAAa;AACnC,YAAM,MAAM,wBAAwB,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,QAAQ,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,oCAAC,aAAa,UAAd;AAAA,IAAuB,OAAO;AAAA,KAC5B,oCAAC,OAAD;AAAA,IAAO,MAAM,MAAM;AAAA,IAAc,mBAAmB,MAAM;AAAA,KACvD,MAAM;AAAA,GA/Bc;",
   "names": []

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

@@ -11,4 +11,3 @@ const stackDefaultStyles = {
 export {
   stackDefaultStyles
 };
-//# sourceMappingURL=constants.js.map

package/{_ → dist/jsx}/constants/platform.js

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

package/dist/{constants → jsx/constants}/pseudos.js

@@ -15,4 +15,3 @@ const pseudos = {
 export {
   pseudos
 };
-//# sourceMappingURL=pseudos.js.map

package/dist/{constants → jsx/constants}/rnw.js

@@ -19,4 +19,3 @@ if (process.env.IS_STATIC === "is_static") {
 export {
   rnw
 };
-//# sourceMappingURL=rnw.js.map

package/{_ → dist/jsx}/createComponent.js

@@ -1,7 +1,8 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { concatClassName, stylePropsView } from "@tamagui/helpers";
-import React, {
+import { useForceUpdate } from "@tamagui/use-force-update";
+import {
   Children,
   Fragment,
   createElement,
@@ -12,16 +13,15 @@ import React, {
   useRef,
   useState
 } from "react";
-import { Text, View } from "react-native";
+import { StyleSheet, Text, View } from "react-native";
 import { stackDefaultStyles } from "./constants/constants";
 import { isTouchDevice, isWeb } from "./constants/platform";
 import { rnw } from "./constants/rnw";
 import { onConfiguredOnce } from "./createTamagui";
-import { addStylesUsingClassname } from "./helpers/addStylesUsingClassname";
+import { addStylesUsingClassname, useStylesAsClassname } from "./helpers/addStylesUsingClassname";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
 import { getSplitStyles } from "./helpers/getSplitStyles";
 import { useFeatures } from "./hooks/useFeatures";
-import { useForceUpdate } from "./hooks/useForceUpdate";
 import { usePressable } from "./hooks/usePressable";
 import { TextAncestorContext } from "./views/TextAncestorContext";
 import { ThemeManagerContext } from "./views/ThemeManagerContext";
@@ -39,15 +39,47 @@ function createComponent(configIn) {
   } else {
     staticConfig = parseStaticConfig(configIn);
   }
-  const { Component, validStyles, isText } = staticConfig;
-  const validStyleProps = validStyles != null ? validStyles : stylePropsView;
+  const { Component, validStyles, isText, isZStack } = staticConfig;
+  const validStyleProps = validStyles ?? stylePropsView;
   let defaultProps = null;
   let tamaguiConfig;
   let defaultsStyle;
   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");
+    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
+      Children.toArray(props.children).forEach((item) => {
+        if (typeof item === "string") {
+          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+        }
+      });
+    }
+    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
+    const hostRef = useRef(null);
+    const theme = manager.theme || initialTheme;
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style,
+      classNames
+    } = getSplitStyles(props, staticConfig, theme);
     const {
       tag,
       hitSlop,
@@ -81,34 +113,17 @@ function createComponent(configIn) {
       onStartShouldSetResponderCapture,
       onMouseDown,
       onClick,
-      onLayout
-    } = props;
-    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");
-    if (process.env.NODE_ENV === "development" && !isText && isWeb) {
-      Children.toArray(props.children).forEach((item) => {
-        if (typeof item === "string") {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
-        }
-      });
+      accessible,
+      accessibilityRole,
+      onLayout,
+      ...viewProps
+    } = viewPropsIn;
+    if (!isWeb) {
+      if (accessible)
+        viewProps.accessible = accessible;
+      if (accessibilityRole)
+        viewProps.accessibilityRole = accessibilityRole;
     }
-    const hasTextAncestor = isWeb ? useContext(TextAncestorContext) : false;
-    const hostRef = useRef(null);
     if (isWeb) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
@@ -130,7 +145,6 @@ function createComponent(configIn) {
       });
     }
     const isTracking = useRef(false);
-    const { viewProps, pseudos, style, classNames } = getSplitStyles(props, staticConfig, manager.theme || initialTheme);
     const internal = useRef();
     if (!internal.current) {
       internal.current = {
@@ -139,7 +153,7 @@ function createComponent(configIn) {
     }
     useEffect(() => {
       internal.current.isMounted = true;
-      const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
+      const dispose = manager?.onChangeTheme((name) => {
         if (isTracking.current) {
           set({ theme: name });
         }
@@ -163,18 +177,17 @@ function createComponent(configIn) {
       isPressing ? pseudos.pressStyle || null : null
     ];
     if (isWeb) {
-      const stylesClassNames = addStylesUsingClassname(styles);
-      const classList = staticConfig.isText ? [
+      const stylesClassNames = useStylesAsClassname(styles);
+      const classList = isText ? [
         defaultsClassName,
         classNames,
         stylesClassNames,
         props.className
       ] : [defaultsClassName, props.className, classNames, stylesClassNames];
-      const classListFlat = classList.flat(1).filter(Boolean).join(" ");
-      const className = concatClassName(classListFlat);
+      const className = concatClassName(...classList);
       if (process.env.NODE_ENV === "development") {
         if (props["debug"]) {
-          console.log("\u{1F95A} className", { style, styles, stylesClassNames, classListFlat: classListFlat.split(" "), className });
+          console.log("\u{1F95A} className", { style, styles, classList, stylesClassNames, className });
         }
       }
       viewProps.className = className;
@@ -223,7 +236,7 @@ function createComponent(configIn) {
       ...!isWeb && {
         onPressOut: (e) => {
           unPress();
-          onPressOut == null ? void 0 : onPressOut(e);
+          onPressOut?.(e);
         }
       },
       ...isWeb && !isTouchDevice && {
@@ -238,8 +251,8 @@ function createComponent(configIn) {
           if (Object.keys(next).length) {
             set(next);
           }
-          onHoverIn == null ? void 0 : onHoverIn(e);
-          onMouseEnter == null ? void 0 : onMouseEnter(e);
+          onHoverIn?.(e);
+          onMouseEnter?.(e);
         } : void 0,
         onMouseLeave: attachHover || attachPress ? (e) => {
           let next = {};
@@ -254,8 +267,8 @@ function createComponent(configIn) {
           if (Object.keys(next).length) {
             set(next);
           }
-          onHoverOut == null ? void 0 : onHoverOut(e);
-          onMouseLeave == null ? void 0 : onMouseLeave(e);
+          onHoverOut?.(e);
+          onMouseLeave?.(e);
         } : void 0
       },
       onMouseDown: attachPress ? (e) => {
@@ -263,14 +276,14 @@ function createComponent(configIn) {
           press: true,
           pressIn: true
         });
-        onPressIn == null ? void 0 : onPressIn(e);
-        onMouseDown == null ? void 0 : onMouseDown(e);
+        onPressIn?.(e);
+        onMouseDown?.(e);
       } : onPressIn,
       onClick: attachPress ? (e) => {
-        onPress == null ? void 0 : onPress(e);
-        onClick == null ? void 0 : onClick(e);
+        onPress?.(e);
+        onClick?.(e);
         unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
+        onPressOut?.(e);
       } : onPressOut
     } : null;
     if (events) {
@@ -287,10 +300,11 @@ function createComponent(configIn) {
         Object.assign(viewProps, events);
       }
     }
-    const spacedChildrenEl = spacedChildren({
+    const childEls = spacedChildren({
       children,
       space,
-      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection)
+      flexDirection: props.flexDirection || defaultProps?.flexDirection,
+      isZStack
     });
     let content;
     if (isWeb && rnw) {
@@ -298,11 +312,11 @@ function createComponent(configIn) {
       const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
       Object.assign(viewProps, domProps);
       viewProps.className = className;
-      content = createElement(ViewComponent, viewProps, spacedChildrenEl);
+      content = createElement(ViewComponent, viewProps, childEls);
     } else {
-      content = createElement(ViewComponent, viewProps, spacedChildrenEl);
+      content = createElement(ViewComponent, viewProps, childEls);
     }
-    const shouldWrapTextAncestor = isWeb && staticConfig.isText && !hasTextAncestor;
+    const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor;
     if (shouldWrapTextAncestor) {
       content = createElement(TextAncestorContext.Provider, { value: true }, content);
     }
@@ -311,17 +325,19 @@ function createComponent(configIn) {
         viewProps["debug"] = true;
         console.log("\u{1F95A} props in:", props);
         console.log("\u{1F95A} props out:", viewProps);
-        console.log((_a = props.onClick) == null ? void 0 : _a.toString());
-        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, spacedChildrenEl });
+        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 });
         }
       }
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, features, content);
+    return <>
+      {features}
+      {content}
+    </>;
   });
   onConfiguredOnce((conf) => {
-    var _a;
     tamaguiConfig = conf;
     initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
     const next = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true);
@@ -331,14 +347,17 @@ function createComponent(configIn) {
       }
       defaultsClassName += addStylesUsingClassname([next.style, next.pseudos]);
     } else {
-      console.log("we need to account for default styles for media queries", next);
+      if (!hasWarnedOnce) {
+        hasWarnedOnce = true;
+        console.log("\u26A0\uFE0F TODO account for default styles for media queries");
+      }
     }
     component.defaultProps = {
       ...next.viewProps,
       ...component.defaultProps
     };
     if (process.env.NODE_ENV === "development") {
-      if ((_a = staticConfig.defaultProps) == null ? void 0 : _a.debug) {
+      if (staticConfig.defaultProps?.debug) {
         console.log("tamagui debug component:", next, defaultsClassName, component.defaultProps);
       }
     }
@@ -348,25 +367,33 @@ 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?.defaultProps
+      }
     });
     return Component2;
   };
   return res;
 }
 __name(createComponent, "createComponent");
+let hasWarnedOnce = false;
 const Spacer = createComponent({
-  defaultProps: stackDefaultStyles,
+  defaultProps: {
+    ...stackDefaultStyles,
+    size: true
+  },
   variants: {
     size: {
       "...size": (size, { tokens }) => {
-        var _a, _b;
+        size = size == true ? "$true" : size;
         return {
-          width: (_a = tokens.size[size]) != null ? _a : size,
-          height: (_b = tokens.size[size]) != null ? _b : size
+          width: tokens.size[size] ?? size,
+          height: tokens.size[size] ?? size
         };
       }
     },
@@ -381,12 +408,12 @@ const Spacer = createComponent({
   }
 });
 function spacedChildren({
+  isZStack,
   children,
   space,
   flexDirection
 }) {
-  var _a, _b;
-  if (!space) {
+  if (!space && !isZStack) {
     return children;
   }
   const childrenList = Children.toArray(children);
@@ -399,29 +426,33 @@ function spacedChildren({
     if (child === null || child === void 0) {
       continue;
     }
-    const key = `${(_a = child == null ? void 0 : child["key"]) != null ? _a : index}`;
-    next.push(/* @__PURE__ */ React.createElement(Fragment, {
-      key
-    }, child));
-    if ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isVisuallyHidden"]) {
+    const key = `${child?.["key"] ?? index}`;
+    next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>);
+    if (child?.["type"]?.["isVisuallyHidden"]) {
       continue;
     }
-    if (index === len - 1) {
-      break;
+    if (index !== len - 1) {
+      if (space) {
+        next.push(<Spacer key={`${key}_spacer`} direction={flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical"} size={space} />);
+      }
     }
-    next.push(/* @__PURE__ */ React.createElement(Spacer, {
-      key: `${key}_spacer`,
-      direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
-      size: space
-    }));
   }
   return next;
 }
 __name(spacedChildren, "spacedChildren");
+const Absolute = /* @__PURE__ */ __name(({ children }) => <View style={sheet.fullscreen}>{children}</View>, "Absolute");
+const sheet = StyleSheet.create({
+  fullscreen: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }
+});
 export {
   Spacer,
   createComponent,
   mouseUps,
   spacedChildren
 };
-//# sourceMappingURL=createComponent.js.map

package/dist/jsx/createFont.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { validateFont } from "./helpers/validate";
+const createFont = /* @__PURE__ */ __name((font) => {
+  if (process.env.NODE_ENV === "development") {
+    validateFont(font);
+  }
+  const sizeKeys = Object.keys(font.size);
+  for (const key in font) {
+    if (key === "size" || key === "family")
+      continue;
+    const section = font[key];
+    const keys = Object.keys(section);
+    let fillVal = section[keys[0]];
+    for (const sKey of sizeKeys) {
+      if (!(sKey in section)) {
+        section[sKey] = fillVal;
+      } else {
+        fillVal = section[sKey];
+      }
+    }
+  }
+  return Object.freeze(font);
+}, "createFont");
+export {
+  createFont
+};

package/dist/{createShorthands.js → jsx/createShorthands.js}

@@ -7,4 +7,3 @@ __name(createShorthands, "createShorthands");
 export {
   createShorthands
 };
-//# sourceMappingURL=createShorthands.js.map