@tamagui/core 1.0.0-alpha.57 → 1.0.0-alpha.62

package/dist/esm/hooks/useTheme.js

@@ -4,7 +4,7 @@ import { useForceUpdate } from "@tamagui/use-force-update";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { GET_DEFAULT_THEME } from "../constants/constants";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
-import { Variable } from "../createVariable";
+import { isVariable } from "../createVariable";
 import { ThemeContext } from "../views/ThemeContext";
 import { ThemeManagerContext } from "../views/ThemeManagerContext";
 const areEqualSets = /* @__PURE__ */ __name((a, b) => {
@@ -76,7 +76,7 @@ const useTheme = /* @__PURE__ */ __name(() => {
             console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
             return null;
           }
-          if (!(val instanceof Variable)) {
+          if (!isVariable(val)) {
             console.warn("Non variable!", val);
           }
           if (val.name !== key) {

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { GET_DEFAULT_THEME } from '../constants/constants'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { Variable } from '../createVariable'\nimport { ThemeName, ThemeObject } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n  if (a.size !== b.size) return false\n  for (const val in a) {\n    if (!b.has(val)) {\n      return false\n    }\n  }\n  return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent.name)\n\n  useIsomorphicLayoutEffect(() => {\n    return parent.onChangeTheme((next, manager) => {\n      setName(opts?.parent ? manager.parentName : next)\n    })\n  }, [parent])\n\n  return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = (): ThemeObject => {\n  const forceUpdate = useForceUpdate()\n  const manager = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext) || {}\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = manager.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      manager.track(st.uuid, st.keys)\n    }\n  })\n\n  useEffect(() => {\n    return manager.onUpdate(state.current.uuid, forceUpdate)\n  }, [])\n\n  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light ?? {}\n\n  return useMemo(\n    () => {\n      return new Proxy(theme, {\n        get(_, key: string) {\n          const name = manager.name\n          if (!name) {\n            return Reflect.get(_, key)\n          }\n          let activeTheme = themes[name]\n          if (!activeTheme) {\n            if (process.env.NODE_ENV !== 'test') {\n              console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n            }\n            activeTheme = theme\n          }\n          const val = activeTheme[key]\n          if (process.env.NODE_ENV === 'development') {\n            if (typeof val === 'undefined') {\n              console.warn(`No theme value \"${String(key)}\" in`, activeTheme, themes)\n              return null\n            }\n            if (!(val instanceof Variable)) {\n              console.warn('Non variable!', val)\n            }\n            if (val.name !== key) {\n              console.warn('Non-matching name for variable to key', key, val.name)\n            }\n          }\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n          }\n          return val\n        },\n      })\n    },\n    [\n      /* if concurrent mode wanted put manager.name here */\n    ]\n  )\n}\n"],
-  "mappings": ";;AAAA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAQA,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,SAAS,OAAO;AAExC,4BAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,8BAAM,UAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,WAAW,cAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAmB;AA3C3C;AA4CE,QAAM,cAAc;AACpB,QAAM,UAAU,WAAW;AAC3B,QAAM,SAAS,WAAW,iBAAiB;AAE3C,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,oBAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,YAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,oBAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAA7C,YAAuD,OAAO,UAA9D,YAAuE;AAEtF,SAAO,QACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,cAAI,QAAQ,IAAI,aAAa,QAAQ;AACnC,oBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AAAA;AAE3D,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,oBAAQ,KAAK,mBAAmB,OAAO,YAAY,aAAa;AAChE,mBAAO;AAAA;AAET,cAAI,CAAE,gBAAe,WAAW;AAC9B,oBAAQ,KAAK,iBAAiB;AAAA;AAEhC,cAAI,IAAI,SAAS,KAAK;AACpB,oBAAQ,KAAK,yCAAyC,KAAK,IAAI;AAAA;AAAA;AAGnE,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAEzB,eAAO;AAAA;AAAA;AAAA,KAIb;AAAA,GAlEoB;",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useEffect, useMemo, useRef, useState } from 'react'\n\nimport { GET_DEFAULT_THEME } from '../constants/constants'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { isVariable } from '../createVariable'\nimport { ThemeName, ThemeObject } from '../types'\nimport { ThemeContext } from '../views/ThemeContext'\nimport { ThemeManagerContext } from '../views/ThemeManagerContext'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nconst areEqualSets = (a: Set<string>, b: Set<string>) => {\n  if (a.size !== b.size) return false\n  for (const val in a) {\n    if (!b.has(val)) {\n      return false\n    }\n  }\n  return true\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent.name)\n\n  useIsomorphicLayoutEffect(() => {\n    return parent.onChangeTheme((next, manager) => {\n      setName(opts?.parent ? manager.parentName : next)\n    })\n  }, [parent])\n\n  return name || 'light'\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName\n}\n\nexport const useTheme = (): ThemeObject => {\n  const forceUpdate = useForceUpdate()\n  const manager = useContext(ThemeManagerContext)\n  const themes = useContext(ThemeContext) || {}\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = manager.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      manager.track(st.uuid, st.keys)\n    }\n  })\n\n  useEffect(() => {\n    return manager.onUpdate(state.current.uuid, forceUpdate)\n  }, [])\n\n  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light ?? {}\n\n  return useMemo(\n    () => {\n      return new Proxy(theme, {\n        get(_, key: string) {\n          const name = manager.name\n          if (!name) {\n            return Reflect.get(_, key)\n          }\n          let activeTheme = themes[name]\n          if (!activeTheme) {\n            if (process.env.NODE_ENV !== 'test') {\n              console.error('No theme by name', name, 'only:', themes, 'keeping current theme')\n            }\n            activeTheme = theme\n          }\n          const val = activeTheme[key]\n          if (process.env.NODE_ENV === 'development') {\n            if (typeof val === 'undefined') {\n              console.warn(`No theme value \"${String(key)}\" in`, activeTheme, themes)\n              return null\n            }\n            if (!isVariable(val)) {\n              console.warn('Non variable!', val)\n            }\n            if (val.name !== key) {\n              console.warn('Non-matching name for variable to key', key, val.name)\n            }\n          }\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n          }\n          return val\n        },\n      })\n    },\n    [\n      /* if concurrent mode wanted put manager.name here */\n    ]\n  )\n}\n"],
+  "mappings": ";;AAAA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAQA,MAAM,eAAe,wBAAC,GAAgB,MAAmB;AACvD,MAAI,EAAE,SAAS,EAAE;AAAM,WAAO;AAC9B,aAAW,OAAO,GAAG;AACnB,QAAI,CAAC,EAAE,IAAI,MAAM;AACf,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA,GAPY;AAUd,MAAM,eAAe,wBAAC,SAA6B;AACxD,QAAM,SAAS,WAAW;AAC1B,QAAM,CAAC,MAAM,WAAW,SAAS,OAAO;AAExC,4BAA0B,MAAM;AAC9B,WAAO,OAAO,cAAc,CAAC,MAAM,YAAY;AAC7C,cAAQ,8BAAM,UAAS,QAAQ,aAAa;AAAA;AAAA,KAE7C,CAAC;AAEJ,SAAO,QAAQ;AAAA,GAVW;AAarB,MAAM,sBAAsB,6BAAM;AACvC,SAAO,WAAW,cAAc;AAAA,GADC;AAI5B,MAAM,WAAW,6BAAmB;AA3C3C;AA4CE,QAAM,cAAc;AACpB,QAAM,UAAU,WAAW;AAC3B,QAAM,SAAS,WAAW,iBAAiB;AAE3C,QAAM,QAAQ;AACd,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM;AAAA,MACN,MAAM,oBAAI;AAAA,MACV,aAAa;AAAA;AAAA;AAGjB,QAAM,QAAQ,cAAc;AAG5B,4BAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,QAAQ,KAAK,IAAI,GAAG;AAChC,QAAI,CAAC,OAAO,CAAC,aAAa,GAAG,MAAM,MAAM;AACvC,cAAQ,MAAM,GAAG,MAAM,GAAG;AAAA;AAAA;AAI9B,YAAU,MAAM;AACd,WAAO,QAAQ,SAAS,MAAM,QAAQ,MAAM;AAAA,KAC3C;AAEH,QAAM,QAAS,oBAAQ,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAA7C,YAAuD,OAAO,UAA9D,YAAuE;AAEtF,SAAO,QACL,MAAM;AACJ,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAa;AAClB,cAAM,OAAO,QAAQ;AACrB,YAAI,CAAC,MAAM;AACT,iBAAO,QAAQ,IAAI,GAAG;AAAA;AAExB,YAAI,cAAc,OAAO;AACzB,YAAI,CAAC,aAAa;AAChB,cAAI,QAAQ,IAAI,aAAa,QAAQ;AACnC,oBAAQ,MAAM,oBAAoB,MAAM,SAAS,QAAQ;AAAA;AAE3D,wBAAc;AAAA;AAEhB,cAAM,MAAM,YAAY;AACxB,YAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,cAAI,OAAO,QAAQ,aAAa;AAC9B,oBAAQ,KAAK,mBAAmB,OAAO,YAAY,aAAa;AAChE,mBAAO;AAAA;AAET,cAAI,CAAC,WAAW,MAAM;AACpB,oBAAQ,KAAK,iBAAiB;AAAA;AAEhC,cAAI,IAAI,SAAS,KAAK;AACpB,oBAAQ,KAAK,yCAAyC,KAAK,IAAI;AAAA;AAAA;AAGnE,YAAI,MAAM,QAAQ,aAAa;AAC7B,gBAAM,QAAQ,KAAK,IAAI;AAAA;AAEzB,eAAO;AAAA;AAAA;AAAA,KAIb;AAAA,GAlEoB;",
   "names": []
 }

package/dist/esm/tamagui-base.css

@@ -0,0 +1,8 @@
+.tamagui-absolute-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+/*# sourceMappingURL=tamagui-base.css.map */

package/dist/esm/tamagui-base.css.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/tamagui-base.css"],
+  "sourcesContent": [".tamagui-absolute-fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n"],
+  "mappings": "AAAA;AACE;AACA;AACA;AACA;AACA;AAAA;",
+  "names": []
+}

package/dist/esm/views/AbsoluteFullscreen.js

@@ -0,0 +1,14 @@
+import { styled } from "../styled";
+import { Stack } from "./Stack";
+const AbsoluteFullscreen = styled(Stack, {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+});
+globalThis["TamaguiAbsoluteFullscreen"] = AbsoluteFullscreen;
+export {
+  AbsoluteFullscreen
+};
+//# sourceMappingURL=AbsoluteFullscreen.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/AbsoluteFullscreen.tsx"],
+  "sourcesContent": ["import { styled } from '../styled'\nimport { Stack } from './Stack'\n\nexport const AbsoluteFullscreen = styled(Stack, {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  right: 0,\n  bottom: 0,\n})\n\nglobalThis['TamaguiAbsoluteFullscreen'] = AbsoluteFullscreen\n"],
+  "mappings": "AAAA;AACA;AAEO,MAAM,qBAAqB,OAAO,OAAO;AAAA,EAC9C,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA;AAGV,WAAW,+BAA+B;",
+  "names": []
+}

package/dist/esm/views/AbsoluteFullscreen.native.js

@@ -0,0 +1 @@
+//# sourceMappingURL=AbsoluteFullscreen.native.js.map

package/dist/esm/views/AbsoluteFullscreen.native.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/jsx/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 {
@@ -330,22 +331,26 @@ function createComponent(configIn) {
         viewProps["debug"] = true;
         console.log("\u{1F95A} props in:", props);
         console.log("\u{1F95A} props out:", viewProps, (_a = viewProps.className) == null ? void 0 : _a.split(" "));
-        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, configIn });
-        if (isWeb)
+        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls });
+        if (typeof window !== "undefined") {
           console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
+        }
       }
     }
-    return <>
-      {features}
-      {content}
-    </>;
+    if (features.length) {
+      return <>
+        {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 { classNames, pseudos, style, viewProps } = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, true);
+    const { classNames, pseudos, style, viewProps } = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme);
     if (isWeb) {
       if (classNames) {
         defaultsClassName += classNames + " ";
@@ -438,7 +443,7 @@ function spacedChildren({
       continue;
     }
     const key = `${(_a = child == null ? void 0 : child["key"]) != null ? _a : index}`;
-    next.push(<Fragment key={key}>{isZStack ? <Absolute>{child}</Absolute> : child}</Fragment>);
+    next.push(<Fragment key={key}>{isZStack ? <AbsoluteFill>{child}</AbsoluteFill> : child}</Fragment>);
     if ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isVisuallyHidden"]) {
       continue;
     }
@@ -451,17 +456,9 @@ function spacedChildren({
   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
-  }
-});
+const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? <div className="tamagui-absolute-fill">{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>, "AbsoluteFill");
 export {
+  AbsoluteFill,
   Spacer,
   createComponent,
   mouseUps,

package/dist/jsx/createTamagui.js

@@ -4,7 +4,7 @@ import { getStyleRules } from "@tamagui/helpers";
 import { configListeners, getHasConfigured, setConfig } from "./conf";
 import { PREFIX } from "./constants/constants";
 import { isWeb } from "./constants/platform";
-import { Variable, createVariable } from "./createVariable";
+import { Variable, createVariable, isVariable } from "./createVariable";
 import { createTamaguiProvider } from "./helpers/createTamaguiProvider";
 import { configureMedia } from "./hooks/useMedia";
 const createdConfigs = /* @__PURE__ */ new WeakMap();
@@ -145,7 +145,7 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
 }, "parseTokens");
 function ensureThemeVariable(theme, key) {
   const val = theme[key];
-  if (!(val instanceof Variable)) {
+  if (!isVariable(val)) {
     theme[key] = createVariable({
       name: key,
       val

package/dist/jsx/createVariable.js

@@ -1,9 +1,12 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var _a;
 import { isWeb } from "./constants/platform";
+const IS_VARIABLE_SYMBOL = "__isVariable__";
 class Variable {
   constructor({ val, name }) {
-    this.val = val;
+    this[_a] = true;
+    this.val = isVariable(val) ? val.val : val;
     this.name = name;
     this.variable = isWeb ? `var(--${name})` : this.val;
   }
@@ -12,12 +15,14 @@ class Variable {
   }
 }
 __name(Variable, "Variable");
+_a = IS_VARIABLE_SYMBOL;
 const createVariable = /* @__PURE__ */ __name((props) => new Variable(props), "createVariable");
 function isVariable(v) {
-  return v instanceof Variable;
+  return v instanceof Variable || v && v[IS_VARIABLE_SYMBOL];
 }
 __name(isVariable, "isVariable");
 export {
+  IS_VARIABLE_SYMBOL,
   Variable,
   createVariable,
   isVariable

package/dist/jsx/helpers/createPropMapper.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { getTamagui } from "../conf";
 import { isWeb } from "../constants/platform";
-import { Variable } from "../createVariable";
+import { isVariable } from "../createVariable";
 import { isObj } from "./isObj";
 const createPropMapper = /* @__PURE__ */ __name((c) => {
   const variants = c.variants;
@@ -40,7 +40,7 @@ const createPropMapper = /* @__PURE__ */ __name((c) => {
       shouldReturn = true;
       value = getToken(key, value, conf, theme, fontFamily);
     }
-    if (value instanceof Variable) {
+    if (isVariable(value)) {
       shouldReturn = true;
       value = value.variable;
     }
@@ -57,7 +57,7 @@ const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily) =>
   for (const rKey in input) {
     const fKey = conf.shorthands[rKey] || rKey;
     const val = input[rKey];
-    if (val instanceof Variable) {
+    if (isVariable(val)) {
       res[fKey] = val.variable;
     } else if (typeof val === "string") {
       const fVal = val[0] === "$" ? getToken(fKey, val, conf, theme, fontFamily) : val;
@@ -71,41 +71,36 @@ const resolveTokens = /* @__PURE__ */ __name((input, conf, theme, fontFamily) =>
     }
     if (process.env.NODE_ENV === "development") {
       if (((_a = res[fKey]) == null ? void 0 : _a[0]) === "$") {
-        console.warn("missing token in theme", fKey, res[fKey], theme);
+        console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, fKey, res[fKey]);
       }
     }
   }
   return res;
 }, "resolveTokens");
 const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed }, theme, fontFamily = "$body") => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  if (themeParsed[value]) {
-    if (isWeb && themeParsed[value].variable) {
-      return themeParsed[value].variable;
-    } else {
-      if (value && value[0] === "$") {
-        return ((_a = theme[`${value.slice(1)}`]) == null ? void 0 : _a.val) || ((_b = themeParsed[value]) == null ? void 0 : _b.val);
-      }
-    }
+  var _a, _b, _c, _d, _e;
+  const tokenVal = themeParsed[value];
+  if (tokenVal) {
+    return isWeb && tokenVal.variable ? tokenVal.variable : tokenVal.val;
   }
   let valOrVar;
   if (key === "fontFamily") {
-    valOrVar = ((_c = tokensParsed.font[value]) == null ? void 0 : _c.family) || value;
+    valOrVar = ((_a = tokensParsed.font[value]) == null ? void 0 : _a.family) || value;
   }
   if (key === "fontSize") {
-    valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.size[value]) || value;
+    valOrVar = ((_b = tokensParsed.font[fontFamily]) == null ? void 0 : _b.size[value]) || value;
   }
   if (key === "lineHeight") {
-    valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.lineHeight[value]) || value;
+    valOrVar = ((_c = tokensParsed.font[fontFamily]) == null ? void 0 : _c.lineHeight[value]) || value;
   }
   if (key === "letterSpacing") {
-    valOrVar = ((_f = tokensParsed.font[fontFamily]) == null ? void 0 : _f.letterSpacing[value]) || value;
+    valOrVar = ((_d = tokensParsed.font[fontFamily]) == null ? void 0 : _d.letterSpacing[value]) || value;
   }
   if (key === "fontWeight") {
-    valOrVar = ((_g = tokensParsed.font[fontFamily]) == null ? void 0 : _g.weight[value]) || value;
+    valOrVar = ((_e = tokensParsed.font[fontFamily]) == null ? void 0 : _e.weight[value]) || value;
   }
   if (typeof valOrVar !== "undefined") {
-    if (valOrVar instanceof Variable) {
+    if (isVariable(valOrVar)) {
       return valOrVar.variable;
     } else {
       return valOrVar;
@@ -128,6 +123,10 @@ const getToken = /* @__PURE__ */ __name((key, value, { tokensParsed, themeParsed
   if (spaceVar) {
     return spaceVar.variable;
   }
+  if (value && value[0] === "$") {
+    console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
+    return null;
+  }
   return value;
 }, "getToken");
 const tokenCategories = {

package/dist/jsx/helpers/getSplitStyles.js

@@ -13,7 +13,7 @@ import { createMediaStyle } from "./createMediaStyle";
 import { fixNativeShadow } from "./fixNativeShadow";
 import { getStylesAtomic } from "./getStylesAtomic";
 import { insertStyleRule } from "./insertStyleRule";
-const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSplittingDefaultProps) => {
+const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme) => {
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
   const viewProps = {};
   const style = [];
@@ -63,6 +63,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, isSpl
     }
     const out = staticConfig.propMapper(keyInit, valInit, theme, props);
     const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
+    if (props["debug"]) {
+      console.log("wut", keyInit, valInit, out);
+    }
     for (const [key, val] of expanded) {
       const keyFirstChar = key[0];
       if (key === "style" || keyFirstChar === "_" && key.startsWith("_style")) {

package/dist/jsx/hooks/useTheme.js

@@ -4,7 +4,7 @@ import { useForceUpdate } from "@tamagui/use-force-update";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { GET_DEFAULT_THEME } from "../constants/constants";
 import { useIsomorphicLayoutEffect } from "../constants/platform";
-import { Variable } from "../createVariable";
+import { isVariable } from "../createVariable";
 import { ThemeContext } from "../views/ThemeContext";
 import { ThemeManagerContext } from "../views/ThemeManagerContext";
 const areEqualSets = /* @__PURE__ */ __name((a, b) => {
@@ -76,7 +76,7 @@ const useTheme = /* @__PURE__ */ __name(() => {
             console.warn(`No theme value "${String(key)}" in`, activeTheme, themes);
             return null;
           }
-          if (!(val instanceof Variable)) {
+          if (!isVariable(val)) {
             console.warn("Non variable!", val);
           }
           if (val.name !== key) {

package/dist/jsx/tamagui-base.css

@@ -0,0 +1,7 @@
+.tamagui-absolute-fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

package/dist/jsx/views/AbsoluteFullscreen.js

@@ -0,0 +1,13 @@
+import { styled } from "../styled";
+import { Stack } from "./Stack";
+const AbsoluteFullscreen = styled(Stack, {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+});
+globalThis["TamaguiAbsoluteFullscreen"] = AbsoluteFullscreen;
+export {
+  AbsoluteFullscreen
+};

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.0-alpha.57",
+  "version": "1.0.0-alpha.62",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
   "typings": "types",
+  "sideEffects": [
+    "*.css"
+  ],
   "scripts": {
     "build": "tamagui-build",
     "watch": "tamagui-build --watch"
@@ -14,10 +17,10 @@
     "dist"
   ],
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-alpha.48",
+    "@tamagui/helpers": "^1.0.0-alpha.58",
     "@tamagui/ow": "^0.28.1",
-    "@tamagui/use-debounce": "^1.0.0-alpha.44",
-    "@tamagui/use-force-update": "^1.0.0-alpha.44",
+    "@tamagui/use-debounce": "^1.0.0-alpha.58",
+    "@tamagui/use-force-update": "^1.0.0-alpha.58",
     "react": "*",
     "react-dom": "*"
   },
@@ -25,7 +28,7 @@
     "react-native-web": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-alpha.44",
+    "@tamagui/build": "^1.0.0-alpha.58",
     "@types/react": "^17.0.35",
     "csstype": "^3.0.10",
     "esbuild": "^0.13.12",
@@ -35,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ef1b44f9f3c88946f914ceaaeae9c14515396b06"
+  "gitHead": "76f3b735226bdb7feffb53e3c8e3fd34392b6a10"
 }

package/types/createComponent.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import './tamagui-base.css';
 import { ViewStyle } from 'react-native';
 import { StaticComponent, StaticConfig, StaticConfigParsed } from './types';
 export declare const mouseUps: Set<Function>;
@@ -13,5 +15,6 @@ export declare function spacedChildren({ isZStack, children, space, flexDirectio
     space?: any;
     flexDirection?: ViewStyle['flexDirection'];
 }): any;
+export declare const AbsoluteFill: (props: any) => JSX.Element;
 export {};
 //# sourceMappingURL=createComponent.d.ts.map

package/types/createComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAYhE,OAAO,EAEL,eAAe,EACf,YAAY,EACZ,kBAAkB,EAEnB,MAAM,SAAS,CAAA;AAGhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAS3C,aAAK,YAAY,GAAG,EAAE,CAAA;AAuBtB,wBAAgB,eAAe,CAAC,kBAAkB,SAAS,MAAM,GAAG,YAAY,EAC9E,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,sEA+crD;AAOD,eAAO,MAAM,MAAM;;;iCAyBjB,CAAA;AAEF,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,GACd,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,GAAG,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAA;CAC3C,OAwCA"}
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAe3B,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAYhE,OAAO,EAEL,eAAe,EACf,YAAY,EACZ,kBAAkB,EAEnB,MAAM,SAAS,CAAA;AAGhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAS3C,aAAK,YAAY,GAAG,EAAE,CAAA;AAuBtB,wBAAgB,eAAe,CAAC,kBAAkB,SAAS,MAAM,GAAG,YAAY,EAC9E,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,sEAodrD;AAOD,eAAO,MAAM,MAAM;;;iCAyBjB,CAAA;AAEF,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,GACd,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,GAAG,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAA;CAC3C,OA0CA;AAED,eAAO,MAAM,YAAY,UAAW,GAAG,gBAKpC,CAAA"}

package/types/createTamagui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAkB,MAAM,kBAAkB,CAAA;AAG3D,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAEhB,oBAAY,kBAAkB,GAAG,oBAAoB,GAEnD,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG;IACzD,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IACtC,MAAM,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG;YACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;SAC1C,CAAA;KACF,CAAA;IAED,uBAAuB,CAAC,EAAE,aAAa,EAAE,CAAA;CAC1C,CAAA;AAIH,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,MAAM,EAAE,IAAI,GACX,IAAI,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GACnE,qBAAqB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GACjC,OAAO,CAyIV"}
+{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAA8B,MAAM,kBAAkB,CAAA;AAGvE,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAEhB,oBAAY,kBAAkB,GAAG,oBAAoB,GAEnD,OAAO,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAC,GAAG;IACzD,MAAM,EAAE,oBAAoB,CAAC,QAAQ,CAAC,CAAA;IACtC,MAAM,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG;YACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;SAC1C,CAAA;KACF,CAAA;IAED,uBAAuB,CAAC,EAAE,aAAa,EAAE,CAAA;CAC1C,CAAA;AAIH,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,MAAM,EAAE,IAAI,GACX,IAAI,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GACnE,qBAAqB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GACjC,OAAO,CAyIV"}

package/types/createVariable.d.ts

@@ -1,4 +1,6 @@
+export declare const IS_VARIABLE_SYMBOL = "__isVariable__";
 export declare class Variable {
+    [IS_VARIABLE_SYMBOL]: boolean;
     name: string;
     val: string | number;
     variable: string | number;
@@ -6,7 +8,7 @@ export declare class Variable {
     toString(): string;
 }
 declare type VariableIn = {
-    val: string | number;
+    val: string | number | Variable;
     name: string;
 };
 export declare const createVariable: (props: VariableIn) => Variable;

package/types/createVariable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createVariable.d.ts","sourceRoot":"","sources":["../src/createVariable.ts"],"names":[],"mappings":"AAEA,qBAAa,QAAQ;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;gBAEb,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,UAAU;IAOrC,QAAQ;CAGT;AAED,aAAK,UAAU,GAAG;IAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAExD,eAAO,MAAM,cAAc,UAAW,UAAU,aAAwB,CAAA;AAExE,wBAAgB,UAAU,CAAC,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,CAAC,IAAI,QAAQ,CAE3D"}
+{"version":3,"file":"createVariable.d.ts","sourceRoot":"","sources":["../src/createVariable.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,mBAAmB,CAAA;AAElD,qBAAa,QAAQ;IAInB,CAAC,kBAAkB,CAAC,UAAO;IAE3B,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAA;gBAEb,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE,UAAU;IAOrC,QAAQ;CAGT;AAED,aAAK,UAAU,GAAG;IAAE,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAEnE,eAAO,MAAM,cAAc,UAAW,UAAU,aAAwB,CAAA;AAExE,wBAAgB,UAAU,CAAC,CAAC,EAAE,QAAQ,GAAG,GAAG,GAAG,CAAC,IAAI,QAAQ,CAE3D"}

package/types/helpers/getSplitStyles.d.ts

@@ -3,7 +3,7 @@ import { StaticConfigParsed, ThemeObject } from '../types';
 export declare type SplitStyles = ReturnType<typeof getSplitStyles>;
 export declare const getSplitStyles: (props: {
     [key: string]: any;
-}, staticConfig: StaticConfigParsed, theme: ThemeObject, isSplittingDefaultProps?: boolean | undefined) => {
+}, staticConfig: StaticConfigParsed, theme: ThemeObject) => {
     viewProps: Record<string, any>;
     style: any[];
     pseudos: {

package/types/helpers/getSplitStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAIxC,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAM1D,oBAAY,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAI3D,eAAO,MAAM,cAAc;;iBAEX,kBAAkB,SACzB,WAAW;;;;;;;;CAsInB,CAAA"}
+{"version":3,"file":"getSplitStyles.d.ts","sourceRoot":"","sources":["../../src/helpers/getSplitStyles.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAIxC,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAM1D,oBAAY,WAAW,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAA;AAI3D,eAAO,MAAM,cAAc;;iBAEX,kBAAkB,SACzB,WAAW;;;;;;;;CAyInB,CAAA"}