@tamagui/core - npm Package Compare versions

Comparing version 1.0.0-beta.202 to 1.0.0-beta.205

dist/cjs/createComponent.js

@@ -56,2 +56,3 @@ var __create = Object.create;
   createComponent: () => createComponent,
+  defaultComponentState: () => defaultComponentState,
   mouseUps: () => mouseUps,
@@ -70,5 +71,6 @@ spacedChildren: () => spacedChildren
 var import_createVariable = require("./createVariable");
-var import_defaultComponentState = require("./defaultComponentState");
+var import_createShallowUpdate = require("./helpers/createShallowUpdate");
 var import_extendStaticConfig = require("./helpers/extendStaticConfig");
 var import_getSplitStyles = require("./helpers/getSplitStyles");
+var import_insertStyleRule = require("./helpers/insertStyleRule");
 var import_wrapThemeManagerContext = require("./helpers/wrapThemeManagerContext");
@@ -79,2 +81,11 @@ var import_useFeatures = require("./hooks/useFeatures");
 var import_TextAncestorContext = require("./views/TextAncestorContext");
+import_react.default["keep"];
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  mounted: false,
+  animation: null
+};
 const mouseUps = /* @__PURE__ */ new Set();
@@ -87,15 +98,2 @@ if (typeof document !== "undefined") {
 }
-function createShallowUpdate(setter) {
-  return (next) => {
-    setter((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return __spreadValues(__spreadValues({}, prev), next);
-        }
-      }
-      return prev;
-    });
-  };
-}
-__name(createShallowUpdate, "createShallowUpdate");
 function createComponent(configIn) {
@@ -120,3 +118,3 @@ let staticConfig;
   let initialTheme;
-  let splitStyleResult = null;
+  let defaultSplitStyleResult = null;
   function addPseudoToStyles(styles, name, pseudos) {
@@ -137,3 +135,4 @@ const pseudoStyle = pseudos[name];
       if (props["debug"]) {
-        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", " debug prop on:", { props: Object.entries(props) });
+        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props);
         if (props["debug"] === "break")
@@ -145,11 +144,10 @@ debugger;
     const theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
-    const [state, set_] = (0, import_react.useState)(import_defaultComponentState.defaultComponentState);
-    const setStateShallow = createShallowUpdate(set_);
-    const shouldAvoidClasses = !!(state.animation && avoidClasses);
-    const splitInfo = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, shouldAvoidClasses ? __spreadProps(__spreadValues({}, state), { noClassNames: true, resolveVariablesAs: "value" }) : state, defaultsClassName);
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitInfo;
+    const [state, set_] = (0, import_react.useState)(defaultComponentState);
+    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(set_);
+    const shouldAvoidClasses = !!(props.animation && avoidClasses);
+    const splitStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, shouldAvoidClasses ? __spreadProps(__spreadValues({}, state), { noClassNames: true, resolveVariablesAs: "value" }) : state, shouldAvoidClasses ? null : defaultsClassName);
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
-    const styleWithPseudos = props.animation ? merge(__spreadValues(__spreadValues({}, defaultNativeStyle), style), state.hover && pseudos.hoverStyle, state.press && pseudos.pressStyle, state.focus && pseudos.focusStyle, hasEnterStyle && !state.mounted && pseudos.enterStyle, ...Object.values(medias)) : null;
     const features = (0, import_useFeatures.useFeatures)(props, {
@@ -160,4 +158,7 @@ forceUpdate,
       state,
-      style: styleWithPseudos,
-      pseudos
+      style: props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null,
+      pseudos,
+      staticConfig,
+      theme,
+      onDidAnimate: props.onDidAnimate
     });
@@ -261,8 +262,6 @@ const _b = viewPropsIn, {
     }
-    (0, import_react.useEffect)(() => {
-      if (hasEnterStyle) {
-        setStateShallow({
-          mounted: true
-        });
-      }
+    (0, import_platform.useIsomorphicLayoutEffect)(() => {
+      setStateShallow({
+        mounted: true
+      });
       internal.current.isMounted = true;
@@ -273,3 +272,3 @@ return () => {
       };
-    }, []);
+    }, [hasEnterStyle]);
     if (nativeID) {
@@ -346,3 +345,3 @@ viewProps.id = nativeID;
           if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className });
+            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, (0, import_insertStyleRule.getAllSelectors)()[v]])) });
           }
@@ -388,3 +387,3 @@ }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || onPress || onPressOut || onPressIn);
+    const attachPress = !!(pseudos && pseudos.pressStyle || defaultPseudos && defaultPseudos.pressStyle || onPress || onPressOut || onPressIn);
     const isHoverable = import_platform.isWeb && !import_platform.isTouchDevice;
@@ -402,3 +401,2 @@ const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     }, []);
-    console.log("attachHover, attachHover", attachHover, pseudos && pseudos.hoverStyle);
     const events = shouldAttach ? __spreadProps(__spreadValues(__spreadValues({}, !import_platform.isWeb && {
@@ -495,5 +493,5 @@ onPressOut: (e) => {
     content = (0, import_react.createElement)(ViewComponent, viewProps, childEls);
-    console.log("should", attachHover);
     if (import_platform.isWeb && events && attachHover) {
       content = /* @__PURE__ */ import_react.default.createElement("span", {
+        className: "tui_Hoverable",
         style: {
@@ -509,3 +507,3 @@ display: "contents"
         viewProps["debug"] = true;
-        console.log("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), animationStyles, isStringElement, classNamesIn: (_d = props.className) == null ? void 0 : _d.split(" "), classNamesOut: (_e = viewProps.className) == null ? void 0 : _e.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, state, styles, pseudos, content, childEls, shouldAvoidClasses, animation: props.animation, style, defaultNativeStyle, splitStyleResult }, typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null));
+        console.log("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), state, splitStyles, defaultsClassName, animationStyles, isStringElement, classNamesIn: (_d = props.className) == null ? void 0 : _d.split(" "), classNamesOut: (_e = viewProps.className) == null ? void 0 : _e.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, defaultSplitStyleResult }, typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null));
       }
@@ -520,2 +518,5 @@ }
     var _a, _b, _c, _d;
+    if (process.env.IS_STATIC === "is_static") {
+      return;
+    }
     const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
@@ -527,7 +528,11 @@ tamaguiConfig = conf;
     initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    splitStyleResult = (0, import_getSplitStyles.getSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, {
+    defaultSplitStyleResult = (0, import_getSplitStyles.getSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
-      resolveVariablesAs: "variable"
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both"
     });
-    const { classNames, pseudos, style, viewProps } = splitStyleResult;
+    const { classNames, pseudos, style, viewProps } = defaultSplitStyleResult;
     if (import_platform.isWeb) {
@@ -548,3 +553,3 @@ defaultsClassName = classNames;
     if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
-      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, __spreadValues({ staticConfig }, splitStyleResult));
+      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, __spreadValues({ staticConfig }, defaultSplitStyleResult));
     }
@@ -556,2 +561,3 @@ });
   }
+  res["whyDidYouRender"] = true;
   res["staticConfig"] = __spreadValues({
@@ -572,2 +578,3 @@ validStyles: validStyleProps
   memo: true,
+  componentName: "Spacer",
   defaultProps: __spreadProps(__spreadValues({}, import_constants.stackDefaultStyles), {
@@ -649,34 +656,2 @@ size: true
 __name(spacedChildren, "spacedChildren");
-const merge = /* @__PURE__ */ __name((...styles) => {
-  if (!styles[0])
-    return;
-  const res = {};
-  const len = styles.length;
-  for (let i = len - 1; i >= 0; i--) {
-    const cur = styles[i];
-    if (!cur)
-      continue;
-    for (const key in cur) {
-      const val = cur[key];
-      if (key !== "transform") {
-        if (!(key in res)) {
-          res[key] = val;
-        }
-        continue;
-      }
-      if (!res.transform) {
-        res.transform = val;
-        continue;
-      }
-      for (const t of val) {
-        const tkey = Object.keys(t)[0];
-        if (res.transform.find((existing) => tkey in existing)) {
-          continue;
-        }
-        res.transform.push(t);
-      }
-    }
-  }
-  return res;
-}, "merge");
 const AbsoluteFill = /* @__PURE__ */ __name((props) => import_platform.isWeb ? /* @__PURE__ */ import_react.default.createElement("div", {
@@ -683,0 +658,0 @@ style: {

dist/cjs/defaultComponentState.js

@@ -1,31 +0,1 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var defaultComponentState_exports = {};
-__export(defaultComponentState_exports, {
-  defaultComponentState: () => defaultComponentState
-});
-module.exports = __toCommonJS(defaultComponentState_exports);
-const defaultComponentState = {
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  mounted: false,
-  animation: null
-};
 //# sourceMappingURL=defaultComponentState.js.map

dist/cjs/helpers/createMediaStyle.js

@@ -38,2 +38,4 @@ var __defProp = Object.defineProperty;
   const styleInner = rules[0].replace(identifier, nextIdentifier);
+  if (styleInner.includes("2:r;"))
+    debugger;
   let styleRule = "";
@@ -40,0 +42,0 @@ if (styleInner.includes("@media")) {

dist/cjs/helpers/createPropMapper.js

@@ -28,4 +28,4 @@ var __defProp = Object.defineProperty;
 var import_isObj = require("./isObj");
-const createPropMapper = /* @__PURE__ */ __name((c) => {
-  const variants = c.variants || {};
+const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+  const variants = staticConfig.variants || {};
   function getVariantFunction(variant, key, value) {
@@ -52,4 +52,4 @@ for (const cat in tokenCategories) {
   __name(getVariantFunction, "getVariantFunction");
-  const defaultProps = c.defaultProps || {};
-  return (key, value, theme, props, staticConfig, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
+  const defaultProps = staticConfig.defaultProps || {};
+  return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
     const conf = (0, import_conf.getConfig)();
@@ -64,25 +64,24 @@ if (!conf) {
       let variantValue = getVariantFunction(variant, key, value);
-      if (!variantValue) {
-        return value;
-      }
-      if (typeof variantValue === "function") {
-        variantValue = variantValue(value, {
-          tokens: conf.tokensParsed,
-          theme,
-          props: avoidDefaultProps ? props : new Proxy(props, {
-            get(target, key2) {
-              if (Reflect.has(target, key2)) {
-                return Reflect.get(target, key2);
+      if (variantValue) {
+        if (typeof variantValue === "function") {
+          variantValue = variantValue(value, {
+            tokens: conf.tokensParsed,
+            theme,
+            props: avoidDefaultProps ? props : new Proxy(props, {
+              get(target, key2) {
+                if (Reflect.has(target, key2)) {
+                  return Reflect.get(target, key2);
+                }
+                if (staticConfig.defaultProps) {
+                  return Reflect.get(staticConfig.defaultProps, key2);
+                }
               }
-              if (staticConfig.defaultProps) {
-                return Reflect.get(staticConfig.defaultProps, key2);
-              }
-            }
-          })
-        });
+            })
+          });
+        }
+        if ((0, import_isObj.isObj)(variantValue)) {
+          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
+        }
+        return variantValue;
       }
-      if ((0, import_isObj.isObj)(variantValue)) {
-        variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
-      }
-      return variantValue;
     }
@@ -188,3 +187,3 @@ let shouldReturn = false;
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token in theme:`, value, theme);
+      console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
       return null;
@@ -191,0 +190,0 @@ }

dist/cjs/helpers/getSplitStyles.js

@@ -35,3 +35,4 @@ var __defProp = Object.defineProperty;
 __export(getSplitStyles_exports, {
-  getSplitStyles: () => getSplitStyles
+  getSplitStyles: () => getSplitStyles,
+  getSubStyle: () => getSubStyle
 });
@@ -80,3 +81,3 @@ module.exports = __toCommonJS(getSplitStyles_exports);
       const isMedia = isMediaOrPseudo && key[11] === "_";
-      const isPsuedo = isMediaOrPseudo && !isMedia;
+      const isPsuedo = isMediaOrPseudo && key[11] === "0";
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
@@ -87,2 +88,6 @@ if (!import_insertStyleRule.insertedTransforms[val]) {
       const transform = import_insertStyleRule.insertedTransforms[val];
+      if (!transform || transform === "undefined") {
+        console.trace("NO TRANSFORM", { key, val }, state);
+        return;
+      }
       transforms[namespace] = transforms[namespace] || ["", ""];
@@ -110,3 +115,4 @@ transforms[namespace][0] += val.replace("_transform", "");
       }
-    } else {
+    }
+    if (!import_platform.isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
       for (const key in cur) {
@@ -120,2 +126,5 @@ if (key in import_helpers.stylePropsTransform) {
     }
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("getSplitStyles.push", { state, cur });
+    }
     cur = null;
@@ -142,4 +151,7 @@ }
     let isPseudo = import_helpers.validPseudoKeys[keyInit];
-    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props, staticConfig, state.resolveVariablesAs);
+    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
     const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("split style", keyInit, expanded);
+    }
     for (const [key, val] of expanded) {
@@ -149,3 +161,3 @@ if (val === void 0) {
       }
-      if (val && val[0] === "_") {
+      if (key !== "target" && val && val[0] === "_") {
         mergeClassName(key, val);
@@ -166,3 +178,3 @@ continue;
         pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true);
+        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
         if (import_platform.isWeb && !state.noClassNames) {
@@ -180,6 +192,6 @@ const pseudoStyles = (0, import_getStylesAtomic.getStylesAtomic)({ [key]: pseudos[key] });
         if (!import_useMedia.mediaQueryConfig[mediaKey]) {
-          viewProps[key] = valInit;
+          viewProps[key] = val;
           continue;
         }
-        const mediaStyle = getSubStyle(valInit, staticConfig, theme, props, state.resolveVariablesAs, true);
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
         if (import_platform.isWeb) {
@@ -236,2 +248,5 @@ const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle);
   }
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("out", { style, pseudos, medias, classNames, viewProps });
+  }
   return {
@@ -245,7 +260,7 @@ viewProps,
 }, "getSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, resolveVariablesAs, avoidDefaultProps) => {
+const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
   const styleOut = {};
   for (const key in styleIn) {
     const val = styleIn[key];
-    const out = staticConfig.propMapper(key, val, theme, props, staticConfig, resolveVariablesAs, avoidDefaultProps);
+    const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
     const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
@@ -252,0 +267,0 @@ for (const [skey, sval] of expanded) {

dist/cjs/helpers/getStylesAtomic.js

@@ -104,2 +104,3 @@ var __defProp = Object.defineProperty;
       });
+      console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
     }
@@ -106,0 +107,0 @@ } else {

dist/cjs/helpers/insertStyleRule.js

@@ -48,4 +48,5 @@ var __defProp = Object.defineProperty;
 let hasInsertedSinceUpdate = true;
+const isClient = typeof document !== "undefined";
 function updateInserted() {
-  if (typeof document === "undefined") {
+  if (!isClient) {
     return;
@@ -63,13 +64,14 @@ }
     const firstRule = rules[0];
-    if (!firstRule)
+    if (!(firstRule instanceof CSSStyleRule))
       continue;
-    const firstSelector = firstRule["selectorText"];
+    const firstSelector = firstRule.selectorText;
     if (!firstSelector)
       continue;
     if (firstSelector === ":root" || firstSelector.startsWith("._")) {
-      for (const rule of rules) {
-        if (!rule.selectorText)
+      for (let i2 = 0; i2 < rules.length; i2++) {
+        const rule = rules.item(i2);
+        if (!(rule instanceof CSSStyleRule))
           continue;
         const identifier = rule.selectorText.slice(1);
-        allSelectors[identifier] = true;
+        allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
         if (identifier.startsWith("_transform")) {
@@ -91,2 +93,5 @@ addTransform(identifier, rule.cssText);
   hasInsertedSinceUpdate = true;
+  if (identifier === "_transform-1abwpjw") {
+    console.trace("inserting", identifier, rule);
+  }
   insertedSelectors[identifier] = rule;
@@ -93,0 +98,0 @@ allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;

dist/cjs/hooks/useFeatures.js

@@ -58,2 +58,3 @@ var __create = Object.create;
 var import_platform = require("../constants/platform");
+var import_getSplitStyles = require("../helpers/getSplitStyles");
 var import_useMedia = require("./useMedia");
@@ -97,3 +98,12 @@ const createDefinition = /* @__PURE__ */ __name(({
       var _b = _a, { _utils } = _b, props = __objRest(_b, ["_utils"]);
-      const { state, useAnimations, pseudos, style, setStateShallow } = _utils;
+      const {
+        state,
+        useAnimations,
+        pseudos,
+        style: inStyle,
+        setStateShallow,
+        staticConfig,
+        theme,
+        onDidAnimate
+      } = _utils;
       if (!useAnimations) {
@@ -103,14 +113,27 @@ console.error("no useAnimations hook provided");
       }
-      const animatedStyleIn = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, style), state.hover && pseudos.hoverStyle), state.focus && pseudos.focusStyle), state.press && pseudos.pressStyle);
-      const res = useAnimations(props, {
-        isMounted: state.mounted,
-        style: animatedStyleIn,
-        exitStyle: pseudos == null ? void 0 : pseudos.exitStyle
+      const propsWithAnimation = props;
+      const res = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate,
+        staticConfig,
+        getStyle({ isEntering, exitVariant, enterVariant } = {}) {
+          var _a2, _b2, _c, _d;
+          const style = inStyle || {};
+          const enterStyle = isEntering === true || state.mounted === false ? enterVariant && ((_a2 = staticConfig.variants) == null ? void 0 : _a2[enterVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)((_b2 = staticConfig.variants) == null ? void 0 : _b2[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isEntering === false ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || pseudos.exitStyle : pseudos.exitStyle : null;
+          ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
+          enterStyle && merge(style, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
+          exitStyle && merge(style, exitStyle);
+          return style;
+        }
       });
       (0, import_platform.useIsomorphicLayoutEffect)(() => {
-        console.log("setting", res, JSON.stringify(style));
         setStateShallow({
           animation: res
         });
-      }, [JSON.stringify(style)]);
+      }, [res]);
       return null;
@@ -122,2 +145,64 @@ },
 __name(loadAnimationFeature, "loadAnimationFeature");
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+function ensureBaseHasDefaults(base, ...pseudos) {
+  for (const pseudo of pseudos) {
+    if (!pseudo)
+      continue;
+    for (const key in pseudo) {
+      const val = pseudo[key];
+      if (key === "transform") {
+        for (const t of val) {
+          const tkey = Object.keys(t)[0];
+          const defaultVal = defaults[tkey];
+          const tDefaultVal = { [tkey]: defaultVal };
+          if (!base.transform) {
+            base.transform = [tDefaultVal];
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal);
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key];
+        }
+      }
+    }
+  }
+}
+__name(ensureBaseHasDefaults, "ensureBaseHasDefaults");
+function merge(base, next) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next);
+    return;
+  }
+  const _a = next, { transform } = _a, rest = __objRest(_a, ["transform"]);
+  Object.assign(base, rest);
+  for (const t of transform) {
+    const key = Object.keys(t)[0];
+    const existing = base.transform.find((x) => key in x);
+    if (existing) {
+      existing[key] = t[key];
+    } else {
+      base.transform.push(t);
+    }
+  }
+}
+__name(merge, "merge");
 function loadMediaQueryFeature() {
@@ -124,0 +209,0 @@ const mediaPropNames = Object.keys(import_useMedia.mediaState);

dist/cjs/hooks/useTheme.js

@@ -94,11 +94,11 @@ var __defProp = Object.defineProperty;
       get(_, key) {
-        if (!name || key === "__proto__") {
+        if (!name || key === "__proto__" || typeof key === "symbol") {
+          if (key === GetThemeManager) {
+            if (!didChangeTheme) {
+              return null;
+            }
+            return themeManager;
+          }
           return Reflect.get(_, key);
         }
-        if (key === GetThemeManager) {
-          if (!didChangeTheme) {
-            return null;
-          }
-          return themeManager;
-        }
         if (process.env.NODE_ENV === "development") {
@@ -119,7 +119,2 @@ if (key === "__state") {
         }
-        if (process.env.NODE_ENV === "development") {
-          if ((props == null ? void 0 : props["debug"]) === "verbose") {
-            console.log("  \xBB accessing theme val", key, __spreadValues({}, state.current));
-          }
-        }
         if (typeof key === "string") {
@@ -133,2 +128,7 @@ if (key[0] === "$") {
               state.current.keys.add(key);
+              if (process.env.NODE_ENV === "development") {
+                if ((props == null ? void 0 : props["debug"]) === "verbose") {
+                  console.log("  \xBB tracking theme key", key);
+                }
+              }
             }
@@ -138,4 +138,3 @@ return val;
           if (process.env.NODE_ENV === "development") {
-            console.warn(`No theme value "${String(key)}" in ${name}`);
-            return null;
+            console.log(`No theme value "${String(key)}" in ${name}`);
           }
@@ -142,0 +141,0 @@ }

dist/cjs/Tamagui.js

@@ -0,4 +1,6 @@
+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;
@@ -18,2 +20,3 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -27,2 +30,3 @@ var Tamagui_exports = {};
 module.exports = __toCommonJS(Tamagui_exports);
+var Helpers = __toESM(require("@tamagui/helpers"));
 var import_rnw = require("./constants/rnw");
@@ -34,2 +38,3 @@ var import_insertStyleRule = require("./helpers/insertStyleRule");
     this.rnw = import_rnw.rnw;
+    this.Helpers = Helpers;
   }
@@ -36,0 +41,0 @@ get allSelectors() {

dist/cjs/views/Stack.js

@@ -43,2 +43,3 @@ var __defProp = Object.defineProperty;
 const Stack = (0, import_createComponent.createComponent)({
+  componentName: "Stack",
   defaultProps: __spreadProps(__spreadValues({}, import_constants.stackDefaultStyles), {
@@ -45,0 +46,0 @@ flexDirection: "column"

dist/cjs/views/Text.js

@@ -47,2 +47,3 @@ var __defProp = Object.defineProperty;
 const Text = (0, import_createComponent.createComponent)({
+  componentName: "Text",
   isText: true,
@@ -49,0 +50,0 @@ defaultProps: {

dist/cjs/views/Theme.js

@@ -44,3 +44,6 @@ var __create = Object.create;
     return /* @__PURE__ */ import_react.default.createElement("div", {
-      className: props.disableThemeClass ? "" : props.className ? `${className || ""} ${props.className || ""}` : className || "",
+      className: [
+        `tui_Theme`,
+        ...!props.disableThemeClass ? [props.className, className].filter(Boolean) : []
+      ].join(" "),
       style: {
@@ -47,0 +50,0 @@ display: "contents",

dist/esm/createComponent.js

@@ -13,3 +13,2 @@ var __defProp = Object.defineProperty;
   useContext,
-  useEffect,
   useRef,
@@ -21,10 +20,9 @@ useState
 import { stackDefaultStyles } from "./constants/constants";
-import { isAndroid, isTouchDevice, isWeb } from "./constants/platform";
+import { isAndroid, isTouchDevice, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
 import { isVariable } from "./createVariable";
-import { defaultComponentState } from "./defaultComponentState";
+import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import {
-  getSplitStyles
-} from "./helpers/getSplitStyles";
+import { getSplitStyles } from "./helpers/getSplitStyles";
+import { getAllSelectors } from "./helpers/insertStyleRule";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
@@ -35,2 +33,11 @@ import { useFeatures } from "./hooks/useFeatures";
 import { TextAncestorContext } from "./views/TextAncestorContext";
+React["keep"];
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  mounted: false,
+  animation: null
+};
 const mouseUps = /* @__PURE__ */ new Set();
@@ -43,15 +50,2 @@ if (typeof document !== "undefined") {
 }
-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) {
@@ -76,3 +70,3 @@ let staticConfig;
   let initialTheme;
-  let splitStyleResult = null;
+  let defaultSplitStyleResult = null;
   function addPseudoToStyles(styles, name, pseudos) {
@@ -93,3 +87,4 @@ const pseudoStyle = pseudos[name];
       if (props["debug"]) {
-        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", " debug prop on:", { props: Object.entries(props) });
+        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props);
         if (props["debug"] === "break")
@@ -103,9 +98,8 @@ debugger;
     const setStateShallow = createShallowUpdate(set_);
-    const shouldAvoidClasses = !!(state.animation && avoidClasses);
-    const splitInfo = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, defaultsClassName);
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitInfo;
+    const shouldAvoidClasses = !!(props.animation && avoidClasses);
+    const splitStyles = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : defaultsClassName);
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
-    const styleWithPseudos = props.animation ? merge({ ...defaultNativeStyle, ...style }, state.hover && pseudos.hoverStyle, state.press && pseudos.pressStyle, state.focus && pseudos.focusStyle, hasEnterStyle && !state.mounted && pseudos.enterStyle, ...Object.values(medias)) : null;
     const features = useFeatures(props, {
@@ -116,4 +110,7 @@ forceUpdate,
       state,
-      style: styleWithPseudos,
-      pseudos
+      style: props.animation ? { ...defaultNativeStyle, ...style } : null,
+      pseudos,
+      staticConfig,
+      theme,
+      onDidAnimate: props.onDidAnimate
     });
@@ -178,8 +175,6 @@ const {
     }
-    useEffect(() => {
-      if (hasEnterStyle) {
-        setStateShallow({
-          mounted: true
-        });
-      }
+    useIsomorphicLayoutEffect(() => {
+      setStateShallow({
+        mounted: true
+      });
       internal.current.isMounted = true;
@@ -190,3 +185,3 @@ return () => {
       };
-    }, []);
+    }, [hasEnterStyle]);
     if (nativeID) {
@@ -267,3 +262,3 @@ viewProps.id = nativeID;
           if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className });
+            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
           }
@@ -309,3 +304,3 @@ }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || onPress || onPressOut || onPressIn);
+    const attachPress = !!(pseudos && pseudos.pressStyle || defaultPseudos && defaultPseudos.pressStyle || onPress || onPressOut || onPressIn);
     const isHoverable = isWeb && !isTouchDevice;
@@ -323,3 +318,2 @@ const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     }, []);
-    console.log("attachHover, attachHover", attachHover, pseudos && pseudos.hoverStyle);
     const events = shouldAttach ? {
@@ -419,5 +413,5 @@ ...!isWeb && {
     content = createElement(ViewComponent, viewProps, childEls);
-    console.log("should", attachHover);
     if (isWeb && events && attachHover) {
       content = /* @__PURE__ */ React.createElement("span", {
+        className: "tui_Hoverable",
         style: {
@@ -433,3 +427,3 @@ display: "contents"
         viewProps["debug"] = true;
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, state, styles, pseudos, content, childEls, shouldAvoidClasses, animation: props.animation, style, defaultNativeStyle, splitStyleResult, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
+        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, defaultsClassName, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, defaultSplitStyleResult, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
       }
@@ -444,2 +438,5 @@ }
     var _a, _b, _c, _d;
+    if (process.env.IS_STATIC === "is_static") {
+      return;
+    }
     const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
@@ -451,7 +448,11 @@ tamaguiConfig = conf;
     initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    splitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
+    defaultSplitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
-      resolveVariablesAs: "variable"
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both"
     });
-    const { classNames, pseudos, style, viewProps } = splitStyleResult;
+    const { classNames, pseudos, style, viewProps } = defaultSplitStyleResult;
     if (isWeb) {
@@ -475,3 +476,3 @@ defaultsClassName = classNames;
     if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
-      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, ...splitStyleResult });
+      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, ...defaultSplitStyleResult });
     }
@@ -483,2 +484,3 @@ });
   }
+  res["whyDidYouRender"] = true;
   res["staticConfig"] = {
@@ -504,2 +506,3 @@ validStyles: validStyleProps,
   memo: true,
+  componentName: "Spacer",
   defaultProps: {
@@ -584,34 +587,2 @@ ...stackDefaultStyles,
 __name(spacedChildren, "spacedChildren");
-const merge = /* @__PURE__ */ __name((...styles) => {
-  if (!styles[0])
-    return;
-  const res = {};
-  const len = styles.length;
-  for (let i = len - 1; i >= 0; i--) {
-    const cur = styles[i];
-    if (!cur)
-      continue;
-    for (const key in cur) {
-      const val = cur[key];
-      if (key !== "transform") {
-        if (!(key in res)) {
-          res[key] = val;
-        }
-        continue;
-      }
-      if (!res.transform) {
-        res.transform = val;
-        continue;
-      }
-      for (const t of val) {
-        const tkey = Object.keys(t)[0];
-        if (res.transform.find((existing) => tkey in existing)) {
-          continue;
-        }
-        res.transform.push(t);
-      }
-    }
-  }
-  return res;
-}, "merge");
 const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? /* @__PURE__ */ React.createElement("div", {
@@ -632,2 +603,3 @@ style: {
   createComponent,
+  defaultComponentState,
   mouseUps,
@@ -634,0 +606,0 @@ spacedChildren

dist/esm/defaultComponentState.js

@@ -1,12 +0,1 @@
-const defaultComponentState = {
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  mounted: false,
-  animation: null
-};
-export {
-  defaultComponentState
-};
 //# sourceMappingURL=defaultComponentState.js.map

dist/esm/helpers/createMediaStyle.js

@@ -16,2 +16,4 @@ var __defProp = Object.defineProperty;
   const styleInner = rules[0].replace(identifier, nextIdentifier);
+  if (styleInner.includes("2:r;"))
+    debugger;
   let styleRule = "";
@@ -18,0 +20,0 @@ if (styleInner.includes("@media")) {

dist/esm/helpers/createPropMapper.js

@@ -7,4 +7,4 @@ var __defProp = Object.defineProperty;
 import { isObj } from "./isObj";
-const createPropMapper = /* @__PURE__ */ __name((c) => {
-  const variants = c.variants || {};
+const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+  const variants = staticConfig.variants || {};
   function getVariantFunction(variant, key, value) {
@@ -31,4 +31,4 @@ for (const cat in tokenCategories) {
   __name(getVariantFunction, "getVariantFunction");
-  const defaultProps = c.defaultProps || {};
-  return (key, value, theme, props, staticConfig, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
+  const defaultProps = staticConfig.defaultProps || {};
+  return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
     const conf = getConfig();
@@ -43,25 +43,24 @@ if (!conf) {
       let variantValue = getVariantFunction(variant, key, value);
-      if (!variantValue) {
-        return value;
-      }
-      if (typeof variantValue === "function") {
-        variantValue = variantValue(value, {
-          tokens: conf.tokensParsed,
-          theme,
-          props: avoidDefaultProps ? props : new Proxy(props, {
-            get(target, key2) {
-              if (Reflect.has(target, key2)) {
-                return Reflect.get(target, key2);
+      if (variantValue) {
+        if (typeof variantValue === "function") {
+          variantValue = variantValue(value, {
+            tokens: conf.tokensParsed,
+            theme,
+            props: avoidDefaultProps ? props : new Proxy(props, {
+              get(target, key2) {
+                if (Reflect.has(target, key2)) {
+                  return Reflect.get(target, key2);
+                }
+                if (staticConfig.defaultProps) {
+                  return Reflect.get(staticConfig.defaultProps, key2);
+                }
               }
-              if (staticConfig.defaultProps) {
-                return Reflect.get(staticConfig.defaultProps, key2);
-              }
-            }
-          })
-        });
+            })
+          });
+        }
+        if (isObj(variantValue)) {
+          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
+        }
+        return variantValue;
       }
-      if (isObj(variantValue)) {
-        variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
-      }
-      return variantValue;
     }
@@ -167,3 +166,3 @@ let shouldReturn = false;
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token in theme:`, value, theme);
+      console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
       return null;
@@ -170,0 +169,0 @@ }

dist/esm/helpers/getSplitStyles.js

@@ -53,3 +53,3 @@ var __defProp = Object.defineProperty;
       const isMedia = isMediaOrPseudo && key[11] === "_";
-      const isPsuedo = isMediaOrPseudo && !isMedia;
+      const isPsuedo = isMediaOrPseudo && key[11] === "0";
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
@@ -60,2 +60,6 @@ if (!insertedTransforms[val]) {
       const transform = insertedTransforms[val];
+      if (!transform || transform === "undefined") {
+        console.trace("NO TRANSFORM", { key, val }, state);
+        return;
+      }
       transforms[namespace] = transforms[namespace] || ["", ""];
@@ -83,3 +87,4 @@ transforms[namespace][0] += val.replace("_transform", "");
       }
-    } else {
+    }
+    if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
       for (const key in cur) {
@@ -93,2 +98,5 @@ if (key in stylePropsTransform) {
     }
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("getSplitStyles.push", { state, cur });
+    }
     cur = null;
@@ -115,4 +123,7 @@ }
     let isPseudo = validPseudoKeys[keyInit];
-    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props, staticConfig, state.resolveVariablesAs);
+    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
     const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("split style", keyInit, expanded);
+    }
     for (const [key, val] of expanded) {
@@ -122,3 +133,3 @@ if (val === void 0) {
       }
-      if (val && val[0] === "_") {
+      if (key !== "target" && val && val[0] === "_") {
         mergeClassName(key, val);
@@ -139,3 +150,3 @@ continue;
         pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true);
+        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
         if (isWeb && !state.noClassNames) {
@@ -153,6 +164,6 @@ const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
         if (!mediaQueryConfig[mediaKey]) {
-          viewProps[key] = valInit;
+          viewProps[key] = val;
           continue;
         }
-        const mediaStyle = getSubStyle(valInit, staticConfig, theme, props, state.resolveVariablesAs, true);
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
         if (isWeb) {
@@ -209,2 +220,5 @@ const mediaStyles = getStylesAtomic(mediaStyle);
   }
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("out", { style, pseudos, medias, classNames, viewProps });
+  }
   return {
@@ -218,7 +232,7 @@ viewProps,
 }, "getSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, resolveVariablesAs, avoidDefaultProps) => {
+const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
   const styleOut = {};
   for (const key in styleIn) {
     const val = styleIn[key];
-    const out = staticConfig.propMapper(key, val, theme, props, staticConfig, resolveVariablesAs, avoidDefaultProps);
+    const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
     const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
@@ -237,4 +251,5 @@ for (const [skey, sval] of expanded) {
 export {
-  getSplitStyles
+  getSplitStyles,
+  getSubStyle
 };
 //# sourceMappingURL=getSplitStyles.js.map

dist/esm/helpers/getStylesAtomic.js

@@ -59,2 +59,3 @@ var __defProp = Object.defineProperty;
       };
+      console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
     }
@@ -61,0 +62,0 @@ } else {

dist/esm/helpers/insertStyleRule.js

@@ -22,4 +22,5 @@ var __defProp = Object.defineProperty;
 let hasInsertedSinceUpdate = true;
+const isClient = typeof document !== "undefined";
 function updateInserted() {
-  if (typeof document === "undefined") {
+  if (!isClient) {
     return;
@@ -37,13 +38,14 @@ }
     const firstRule = rules[0];
-    if (!firstRule)
+    if (!(firstRule instanceof CSSStyleRule))
       continue;
-    const firstSelector = firstRule["selectorText"];
+    const firstSelector = firstRule.selectorText;
     if (!firstSelector)
       continue;
     if (firstSelector === ":root" || firstSelector.startsWith("._")) {
-      for (const rule of rules) {
-        if (!rule.selectorText)
+      for (let i2 = 0; i2 < rules.length; i2++) {
+        const rule = rules.item(i2);
+        if (!(rule instanceof CSSStyleRule))
           continue;
         const identifier = rule.selectorText.slice(1);
-        allSelectors[identifier] = true;
+        allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
         if (identifier.startsWith("_transform")) {
@@ -65,2 +67,5 @@ addTransform(identifier, rule.cssText);
   hasInsertedSinceUpdate = true;
+  if (identifier === "_transform-1abwpjw") {
+    console.trace("inserting", identifier, rule);
+  }
   insertedSelectors[identifier] = rule;
@@ -67,0 +72,0 @@ allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;

dist/esm/hooks/useFeatures.js

@@ -5,2 +5,3 @@ var __defProp = Object.defineProperty;
 import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+import { getSubStyle } from "../helpers/getSplitStyles";
 import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
@@ -44,3 +45,12 @@ const createDefinition = /* @__PURE__ */ __name(({
     Component: ({ _utils, ...props }) => {
-      const { state, useAnimations, pseudos, style, setStateShallow } = _utils;
+      const {
+        state,
+        useAnimations,
+        pseudos,
+        style: inStyle,
+        setStateShallow,
+        staticConfig,
+        theme,
+        onDidAnimate
+      } = _utils;
       if (!useAnimations) {
@@ -50,19 +60,27 @@ console.error("no useAnimations hook provided");
       }
-      const animatedStyleIn = {
-        ...style,
-        ...state.hover && pseudos.hoverStyle,
-        ...state.focus && pseudos.focusStyle,
-        ...state.press && pseudos.pressStyle
-      };
-      const res = useAnimations(props, {
-        isMounted: state.mounted,
-        style: animatedStyleIn,
-        exitStyle: pseudos == null ? void 0 : pseudos.exitStyle
+      const propsWithAnimation = props;
+      const res = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate,
+        staticConfig,
+        getStyle({ isEntering, exitVariant, enterVariant } = {}) {
+          var _a, _b, _c, _d;
+          const style = inStyle || {};
+          const enterStyle = isEntering === true || state.mounted === false ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle((_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isEntering === false ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || pseudos.exitStyle : pseudos.exitStyle : null;
+          ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
+          enterStyle && merge(style, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
+          exitStyle && merge(style, exitStyle);
+          return style;
+        }
       });
       useIsomorphicLayoutEffect(() => {
-        console.log("setting", res, JSON.stringify(style));
         setStateShallow({
           animation: res
         });
-      }, [JSON.stringify(style)]);
+      }, [res]);
       return null;
@@ -74,2 +92,64 @@ },
 __name(loadAnimationFeature, "loadAnimationFeature");
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+function ensureBaseHasDefaults(base, ...pseudos) {
+  for (const pseudo of pseudos) {
+    if (!pseudo)
+      continue;
+    for (const key in pseudo) {
+      const val = pseudo[key];
+      if (key === "transform") {
+        for (const t of val) {
+          const tkey = Object.keys(t)[0];
+          const defaultVal = defaults[tkey];
+          const tDefaultVal = { [tkey]: defaultVal };
+          if (!base.transform) {
+            base.transform = [tDefaultVal];
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal);
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key];
+        }
+      }
+    }
+  }
+}
+__name(ensureBaseHasDefaults, "ensureBaseHasDefaults");
+function merge(base, next) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next);
+    return;
+  }
+  const { transform, ...rest } = next;
+  Object.assign(base, rest);
+  for (const t of transform) {
+    const key = Object.keys(t)[0];
+    const existing = base.transform.find((x) => key in x);
+    if (existing) {
+      existing[key] = t[key];
+    } else {
+      base.transform.push(t);
+    }
+  }
+}
+__name(merge, "merge");
 function loadMediaQueryFeature() {
@@ -76,0 +156,0 @@ const mediaPropNames = Object.keys(mediaState);

dist/esm/hooks/useTheme.js

@@ -52,11 +52,11 @@ var __defProp = Object.defineProperty;
       get(_, key) {
-        if (!name || key === "__proto__") {
+        if (!name || key === "__proto__" || typeof key === "symbol") {
+          if (key === GetThemeManager) {
+            if (!didChangeTheme) {
+              return null;
+            }
+            return themeManager;
+          }
           return Reflect.get(_, key);
         }
-        if (key === GetThemeManager) {
-          if (!didChangeTheme) {
-            return null;
-          }
-          return themeManager;
-        }
         if (process.env.NODE_ENV === "development") {
@@ -77,7 +77,2 @@ if (key === "__state") {
         }
-        if (process.env.NODE_ENV === "development") {
-          if ((props == null ? void 0 : props["debug"]) === "verbose") {
-            console.log("  \xBB accessing theme val", key, { ...state.current });
-          }
-        }
         if (typeof key === "string") {
@@ -91,2 +86,7 @@ if (key[0] === "$") {
               state.current.keys.add(key);
+              if (process.env.NODE_ENV === "development") {
+                if ((props == null ? void 0 : props["debug"]) === "verbose") {
+                  console.log("  \xBB tracking theme key", key);
+                }
+              }
             }
@@ -96,4 +96,3 @@ return val;
           if (process.env.NODE_ENV === "development") {
-            console.warn(`No theme value "${String(key)}" in ${name}`);
-            return null;
+            console.log(`No theme value "${String(key)}" in ${name}`);
           }
@@ -100,0 +99,0 @@ }

dist/esm/Tamagui.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as Helpers from "@tamagui/helpers";
 import { rnw } from "./constants/rnw";
@@ -9,2 +10,3 @@ import { getAllSelectors, getAllTransforms } from "./helpers/insertStyleRule";
     this.rnw = rnw;
+    this.Helpers = Helpers;
   }
@@ -11,0 +13,0 @@ get allSelectors() {

dist/esm/views/Stack.js

 import { stackDefaultStyles } from "../constants/constants";
 import { createComponent } from "../createComponent";
 const Stack = createComponent({
+  componentName: "Stack",
   defaultProps: {
@@ -5,0 +6,0 @@ ...stackDefaultStyles,

dist/esm/views/Text.js

@@ -11,2 +11,3 @@ import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 const Text = createComponent({
+  componentName: "Text",
   isText: true,
@@ -13,0 +14,0 @@ defaultProps: {

dist/esm/views/Theme.js

@@ -20,3 +20,6 @@ var __defProp = Object.defineProperty;
     return /* @__PURE__ */ React.createElement("div", {
-      className: props.disableThemeClass ? "" : props.className ? `${className || ""} ${props.className || ""}` : className || "",
+      className: [
+        `tui_Theme`,
+        ...!props.disableThemeClass ? [props.className, className].filter(Boolean) : []
+      ].join(" "),
       style: {
@@ -23,0 +26,0 @@ display: "contents",

dist/jsx/createComponent.js

@@ -5,3 +5,3 @@ var __defProp = Object.defineProperty;
 import { useForceUpdate } from "@tamagui/use-force-update";
-import {
+import React, {
   Children,
@@ -14,3 +14,2 @@ Fragment,
   useContext,
-  useEffect,
   useRef,
@@ -22,10 +21,9 @@ useState
 import { stackDefaultStyles } from "./constants/constants";
-import { isAndroid, isTouchDevice, isWeb } from "./constants/platform";
+import { isAndroid, isTouchDevice, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
 import { isVariable } from "./createVariable";
-import { defaultComponentState } from "./defaultComponentState";
+import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import {
-  getSplitStyles
-} from "./helpers/getSplitStyles";
+import { getSplitStyles } from "./helpers/getSplitStyles";
+import { getAllSelectors } from "./helpers/insertStyleRule";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
@@ -36,2 +34,11 @@ import { useFeatures } from "./hooks/useFeatures";
 import { TextAncestorContext } from "./views/TextAncestorContext";
+React["keep"];
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  mounted: false,
+  animation: null
+};
 const mouseUps = /* @__PURE__ */ new Set();
@@ -44,15 +51,2 @@ if (typeof document !== "undefined") {
 }
-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) {
@@ -77,3 +71,3 @@ let staticConfig;
   let initialTheme;
-  let splitStyleResult = null;
+  let defaultSplitStyleResult = null;
   function addPseudoToStyles(styles, name, pseudos) {
@@ -94,3 +88,4 @@ const pseudoStyle = pseudos[name];
       if (props["debug"]) {
-        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", " debug prop on:", { props: Object.entries(props) });
+        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props);
         if (props["debug"] === "break")
@@ -104,9 +99,8 @@ debugger;
     const setStateShallow = createShallowUpdate(set_);
-    const shouldAvoidClasses = !!(state.animation && avoidClasses);
-    const splitInfo = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, defaultsClassName);
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitInfo;
+    const shouldAvoidClasses = !!(props.animation && avoidClasses);
+    const splitStyles = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : defaultsClassName);
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
     const hasEnterStyle = !!props.enterStyle;
-    const styleWithPseudos = props.animation ? merge({ ...defaultNativeStyle, ...style }, state.hover && pseudos.hoverStyle, state.press && pseudos.pressStyle, state.focus && pseudos.focusStyle, hasEnterStyle && !state.mounted && pseudos.enterStyle, ...Object.values(medias)) : null;
     const features = useFeatures(props, {
@@ -117,4 +111,7 @@ forceUpdate,
       state,
-      style: styleWithPseudos,
-      pseudos
+      style: props.animation ? { ...defaultNativeStyle, ...style } : null,
+      pseudos,
+      staticConfig,
+      theme,
+      onDidAnimate: props.onDidAnimate
     });
@@ -179,8 +176,6 @@ const {
     }
-    useEffect(() => {
-      if (hasEnterStyle) {
-        setStateShallow({
-          mounted: true
-        });
-      }
+    useIsomorphicLayoutEffect(() => {
+      setStateShallow({
+        mounted: true
+      });
       internal.current.isMounted = true;
@@ -191,3 +186,3 @@ return () => {
       };
-    }, []);
+    }, [hasEnterStyle]);
     if (nativeID) {
@@ -268,3 +263,3 @@ viewProps.id = nativeID;
           if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className });
+            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
           }
@@ -310,3 +305,3 @@ }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || onPress || onPressOut || onPressIn);
+    const attachPress = !!(pseudos && pseudos.pressStyle || defaultPseudos && defaultPseudos.pressStyle || onPress || onPressOut || onPressIn);
     const isHoverable = isWeb && !isTouchDevice;
@@ -324,3 +319,2 @@ const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     }, []);
-    console.log("attachHover, attachHover", attachHover, pseudos && pseudos.hoverStyle);
     const events = shouldAttach ? {
@@ -420,5 +414,4 @@ ...!isWeb && {
     content = createElement(ViewComponent, viewProps, childEls);
-    console.log("should", attachHover);
     if (isWeb && events && attachHover) {
-      content = <span style={{
+      content = <span className="tui_Hoverable" style={{
         display: "contents"
@@ -430,3 +423,3 @@ }} onMouseEnter={events.onMouseEnter} onMouseLeave={events.onMouseLeave}>{content}</span>;
         viewProps["debug"] = true;
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, state, styles, pseudos, content, childEls, shouldAvoidClasses, animation: props.animation, style, defaultNativeStyle, splitStyleResult, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
+        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, defaultsClassName, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, defaultSplitStyleResult, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
       }
@@ -444,2 +437,5 @@ }
     var _a, _b, _c, _d;
+    if (process.env.IS_STATIC === "is_static") {
+      return;
+    }
     const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
@@ -451,7 +447,11 @@ tamaguiConfig = conf;
     initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    splitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
+    defaultSplitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
-      resolveVariablesAs: "variable"
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both"
     });
-    const { classNames, pseudos, style, viewProps } = splitStyleResult;
+    const { classNames, pseudos, style, viewProps } = defaultSplitStyleResult;
     if (isWeb) {
@@ -475,3 +475,3 @@ defaultsClassName = classNames;
     if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
-      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, ...splitStyleResult });
+      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, ...defaultSplitStyleResult });
     }
@@ -483,2 +483,3 @@ });
   }
+  res["whyDidYouRender"] = true;
   res["staticConfig"] = {
@@ -504,2 +505,3 @@ validStyles: validStyleProps,
   memo: true,
+  componentName: "Spacer",
   defaultProps: {
@@ -577,34 +579,2 @@ ...stackDefaultStyles,
 __name(spacedChildren, "spacedChildren");
-const merge = /* @__PURE__ */ __name((...styles) => {
-  if (!styles[0])
-    return;
-  const res = {};
-  const len = styles.length;
-  for (let i = len - 1; i >= 0; i--) {
-    const cur = styles[i];
-    if (!cur)
-      continue;
-    for (const key in cur) {
-      const val = cur[key];
-      if (key !== "transform") {
-        if (!(key in res)) {
-          res[key] = val;
-        }
-        continue;
-      }
-      if (!res.transform) {
-        res.transform = val;
-        continue;
-      }
-      for (const t of val) {
-        const tkey = Object.keys(t)[0];
-        if (res.transform.find((existing) => tkey in existing)) {
-          continue;
-        }
-        res.transform.push(t);
-      }
-    }
-  }
-  return res;
-}, "merge");
 const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? <div style={{
@@ -621,4 +591,5 @@ position: "absolute",
   createComponent,
+  defaultComponentState,
   mouseUps,
   spacedChildren
 };

dist/jsx/helpers/createMediaStyle.js

@@ -16,2 +16,4 @@ var __defProp = Object.defineProperty;
   const styleInner = rules[0].replace(identifier, nextIdentifier);
+  if (styleInner.includes("2:r;"))
+    debugger;
   let styleRule = "";
@@ -18,0 +20,0 @@ if (styleInner.includes("@media")) {

dist/jsx/helpers/createPropMapper.js

@@ -7,4 +7,4 @@ var __defProp = Object.defineProperty;
 import { isObj } from "./isObj";
-const createPropMapper = /* @__PURE__ */ __name((c) => {
-  const variants = c.variants || {};
+const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
+  const variants = staticConfig.variants || {};
   function getVariantFunction(variant, key, value) {
@@ -31,4 +31,4 @@ for (const cat in tokenCategories) {
   __name(getVariantFunction, "getVariantFunction");
-  const defaultProps = c.defaultProps || {};
-  return (key, value, theme, props, staticConfig, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
+  const defaultProps = staticConfig.defaultProps || {};
+  return (key, value, theme, props, returnVariablesAs = !!props.animation ? "value" : "auto", avoidDefaultProps = false) => {
     const conf = getConfig();
@@ -43,25 +43,24 @@ if (!conf) {
       let variantValue = getVariantFunction(variant, key, value);
-      if (!variantValue) {
-        return value;
-      }
-      if (typeof variantValue === "function") {
-        variantValue = variantValue(value, {
-          tokens: conf.tokensParsed,
-          theme,
-          props: avoidDefaultProps ? props : new Proxy(props, {
-            get(target, key2) {
-              if (Reflect.has(target, key2)) {
-                return Reflect.get(target, key2);
+      if (variantValue) {
+        if (typeof variantValue === "function") {
+          variantValue = variantValue(value, {
+            tokens: conf.tokensParsed,
+            theme,
+            props: avoidDefaultProps ? props : new Proxy(props, {
+              get(target, key2) {
+                if (Reflect.has(target, key2)) {
+                  return Reflect.get(target, key2);
+                }
+                if (staticConfig.defaultProps) {
+                  return Reflect.get(staticConfig.defaultProps, key2);
+                }
               }
-              if (staticConfig.defaultProps) {
-                return Reflect.get(staticConfig.defaultProps, key2);
-              }
-            }
-          })
-        });
+            })
+          });
+        }
+        if (isObj(variantValue)) {
+          variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
+        }
+        return variantValue;
       }
-      if (isObj(variantValue)) {
-        variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
-      }
-      return variantValue;
     }
@@ -167,3 +166,3 @@ let shouldReturn = false;
     if (value && value[0] === "$") {
-      console.warn(`\u26A0\uFE0F Missing token in theme:`, value, theme);
+      console.warn(`\u26A0\uFE0F Missing token in theme ${theme.name}:`, value);
       return null;
@@ -170,0 +169,0 @@ }

dist/jsx/helpers/getSplitStyles.js

@@ -53,3 +53,3 @@ var __defProp = Object.defineProperty;
       const isMedia = isMediaOrPseudo && key[11] === "_";
-      const isPsuedo = isMediaOrPseudo && !isMedia;
+      const isPsuedo = isMediaOrPseudo && key[11] === "0";
       const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
@@ -60,2 +60,6 @@ if (!insertedTransforms[val]) {
       const transform = insertedTransforms[val];
+      if (!transform || transform === "undefined") {
+        console.trace("NO TRANSFORM", { key, val }, state);
+        return;
+      }
       transforms[namespace] = transforms[namespace] || ["", ""];
@@ -83,3 +87,4 @@ transforms[namespace][0] += val.replace("_transform", "");
       }
-    } else {
+    }
+    if (!isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
       for (const key in cur) {
@@ -93,2 +98,5 @@ if (key in stylePropsTransform) {
     }
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("getSplitStyles.push", { state, cur });
+    }
     cur = null;
@@ -115,4 +123,7 @@ }
     let isPseudo = validPseudoKeys[keyInit];
-    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props, staticConfig, state.resolveVariablesAs);
+    const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
     const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
+    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+      console.log("split style", keyInit, expanded);
+    }
     for (const [key, val] of expanded) {
@@ -122,3 +133,3 @@ if (val === void 0) {
       }
-      if (val && val[0] === "_") {
+      if (key !== "target" && val && val[0] === "_") {
         mergeClassName(key, val);
@@ -139,3 +150,3 @@ continue;
         pseudos[key] = pseudos[key] || {};
-        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true);
+        pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
         if (isWeb && !state.noClassNames) {
@@ -153,6 +164,6 @@ const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
         if (!mediaQueryConfig[mediaKey]) {
-          viewProps[key] = valInit;
+          viewProps[key] = val;
           continue;
         }
-        const mediaStyle = getSubStyle(valInit, staticConfig, theme, props, state.resolveVariablesAs, true);
+        const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
         if (isWeb) {
@@ -209,2 +220,5 @@ const mediaStyles = getStylesAtomic(mediaStyle);
   }
+  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    console.log("out", { style, pseudos, medias, classNames, viewProps });
+  }
   return {
@@ -218,7 +232,7 @@ viewProps,
 }, "getSplitStyles");
-const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, resolveVariablesAs, avoidDefaultProps) => {
+const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
   const styleOut = {};
   for (const key in styleIn) {
     const val = styleIn[key];
-    const out = staticConfig.propMapper(key, val, theme, props, staticConfig, resolveVariablesAs, avoidDefaultProps);
+    const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
     const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
@@ -237,3 +251,4 @@ for (const [skey, sval] of expanded) {
 export {
-  getSplitStyles
+  getSplitStyles,
+  getSubStyle
 };

dist/jsx/helpers/getStylesAtomic.js

@@ -59,2 +59,3 @@ var __defProp = Object.defineProperty;
       };
+      console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
     }
@@ -61,0 +62,0 @@ } else {

dist/jsx/helpers/insertStyleRule.js

@@ -22,4 +22,5 @@ var __defProp = Object.defineProperty;
 let hasInsertedSinceUpdate = true;
+const isClient = typeof document !== "undefined";
 function updateInserted() {
-  if (typeof document === "undefined") {
+  if (!isClient) {
     return;
@@ -37,13 +38,14 @@ }
     const firstRule = rules[0];
-    if (!firstRule)
+    if (!(firstRule instanceof CSSStyleRule))
       continue;
-    const firstSelector = firstRule["selectorText"];
+    const firstSelector = firstRule.selectorText;
     if (!firstSelector)
       continue;
     if (firstSelector === ":root" || firstSelector.startsWith("._")) {
-      for (const rule of rules) {
-        if (!rule.selectorText)
+      for (let i2 = 0; i2 < rules.length; i2++) {
+        const rule = rules.item(i2);
+        if (!(rule instanceof CSSStyleRule))
           continue;
         const identifier = rule.selectorText.slice(1);
-        allSelectors[identifier] = true;
+        allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule.cssText : true;
         if (identifier.startsWith("_transform")) {
@@ -65,2 +67,5 @@ addTransform(identifier, rule.cssText);
   hasInsertedSinceUpdate = true;
+  if (identifier === "_transform-1abwpjw") {
+    console.trace("inserting", identifier, rule);
+  }
   insertedSelectors[identifier] = rule;
@@ -67,0 +72,0 @@ allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;

dist/jsx/hooks/useFeatures.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
+import { getSubStyle } from "../helpers/getSplitStyles";
 import { addMediaQueryListener, mediaState, removeMediaQueryListener } from "./useMedia";
@@ -38,3 +39,12 @@ const createDefinition = /* @__PURE__ */ __name(({
     Component: ({ _utils, ...props }) => {
-      const { state, useAnimations, pseudos, style, setStateShallow } = _utils;
+      const {
+        state,
+        useAnimations,
+        pseudos,
+        style: inStyle,
+        setStateShallow,
+        staticConfig,
+        theme,
+        onDidAnimate
+      } = _utils;
       if (!useAnimations) {
@@ -44,19 +54,27 @@ console.error("no useAnimations hook provided");
       }
-      const animatedStyleIn = {
-        ...style,
-        ...state.hover && pseudos.hoverStyle,
-        ...state.focus && pseudos.focusStyle,
-        ...state.press && pseudos.pressStyle
-      };
-      const res = useAnimations(props, {
-        isMounted: state.mounted,
-        style: animatedStyleIn,
-        exitStyle: pseudos == null ? void 0 : pseudos.exitStyle
+      const propsWithAnimation = props;
+      const res = useAnimations(propsWithAnimation, {
+        state,
+        pseudos,
+        onDidAnimate,
+        staticConfig,
+        getStyle({ isEntering, exitVariant, enterVariant } = {}) {
+          var _a, _b, _c, _d;
+          const style = inStyle || {};
+          const enterStyle = isEntering === true || state.mounted === false ? enterVariant && ((_a = staticConfig.variants) == null ? void 0 : _a[enterVariant]["true"]) ? getSubStyle((_b = staticConfig.variants) == null ? void 0 : _b[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
+          const exitStyle = isEntering === false ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? getSubStyle((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || pseudos.exitStyle : pseudos.exitStyle : null;
+          ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
+          enterStyle && merge(style, enterStyle);
+          state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
+          state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
+          state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
+          exitStyle && merge(style, exitStyle);
+          return style;
+        }
       });
       useIsomorphicLayoutEffect(() => {
-        console.log("setting", res, JSON.stringify(style));
         setStateShallow({
           animation: res
         });
-      }, [JSON.stringify(style)]);
+      }, [res]);
       return null;
@@ -68,2 +86,64 @@ },
 __name(loadAnimationFeature, "loadAnimationFeature");
+const defaults = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  opacity: 1,
+  translateX: 0,
+  translateY: 0,
+  skew: 0,
+  skewX: 0,
+  skewY: 0,
+  scale: 1,
+  rotate: "0deg",
+  rotateY: "0deg",
+  rotateX: "0deg"
+};
+function ensureBaseHasDefaults(base, ...pseudos) {
+  for (const pseudo of pseudos) {
+    if (!pseudo)
+      continue;
+    for (const key in pseudo) {
+      const val = pseudo[key];
+      if (key === "transform") {
+        for (const t of val) {
+          const tkey = Object.keys(t)[0];
+          const defaultVal = defaults[tkey];
+          const tDefaultVal = { [tkey]: defaultVal };
+          if (!base.transform) {
+            base.transform = [tDefaultVal];
+          } else {
+            if (!base.transform.find((x) => x[tkey])) {
+              base.transform.push(tDefaultVal);
+            }
+          }
+        }
+      } else {
+        if (!(key in base)) {
+          base[key] = defaults[key];
+        }
+      }
+    }
+  }
+}
+__name(ensureBaseHasDefaults, "ensureBaseHasDefaults");
+function merge(base, next) {
+  if (!next.transform || !base.transform) {
+    Object.assign(base, next);
+    return;
+  }
+  const { transform, ...rest } = next;
+  Object.assign(base, rest);
+  for (const t of transform) {
+    const key = Object.keys(t)[0];
+    const existing = base.transform.find((x) => key in x);
+    if (existing) {
+      existing[key] = t[key];
+    } else {
+      base.transform.push(t);
+    }
+  }
+}
+__name(merge, "merge");
 function loadMediaQueryFeature() {
@@ -70,0 +150,0 @@ const mediaPropNames = Object.keys(mediaState);

dist/jsx/hooks/useTheme.js

@@ -52,11 +52,11 @@ var __defProp = Object.defineProperty;
       get(_, key) {
-        if (!name || key === "__proto__") {
+        if (!name || key === "__proto__" || typeof key === "symbol") {
+          if (key === GetThemeManager) {
+            if (!didChangeTheme) {
+              return null;
+            }
+            return themeManager;
+          }
           return Reflect.get(_, key);
         }
-        if (key === GetThemeManager) {
-          if (!didChangeTheme) {
-            return null;
-          }
-          return themeManager;
-        }
         if (process.env.NODE_ENV === "development") {
@@ -77,7 +77,2 @@ if (key === "__state") {
         }
-        if (process.env.NODE_ENV === "development") {
-          if ((props == null ? void 0 : props["debug"]) === "verbose") {
-            console.log("  \xBB accessing theme val", key, { ...state.current });
-          }
-        }
         if (typeof key === "string") {
@@ -91,2 +86,7 @@ if (key[0] === "$") {
               state.current.keys.add(key);
+              if (process.env.NODE_ENV === "development") {
+                if ((props == null ? void 0 : props["debug"]) === "verbose") {
+                  console.log("  \xBB tracking theme key", key);
+                }
+              }
             }
@@ -96,4 +96,3 @@ return val;
           if (process.env.NODE_ENV === "development") {
-            console.warn(`No theme value "${String(key)}" in ${name}`);
-            return null;
+            console.log(`No theme value "${String(key)}" in ${name}`);
           }
@@ -100,0 +99,0 @@ }

dist/jsx/Tamagui.js

 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as Helpers from "@tamagui/helpers";
 import { rnw } from "./constants/rnw";
@@ -9,2 +10,3 @@ import { getAllSelectors, getAllTransforms } from "./helpers/insertStyleRule";
     this.rnw = rnw;
+    this.Helpers = Helpers;
   }
@@ -11,0 +13,0 @@ get allSelectors() {

dist/jsx/views/Stack.js

 import { stackDefaultStyles } from "../constants/constants";
 import { createComponent } from "../createComponent";
 const Stack = createComponent({
+  componentName: "Stack",
   defaultProps: {
@@ -5,0 +6,0 @@ ...stackDefaultStyles,

dist/jsx/views/Text.js

@@ -11,2 +11,3 @@ import { stylePropsTextOnly, validStyles } from "@tamagui/helpers";
 const Text = createComponent({
+  componentName: "Text",
   isText: true,
@@ -13,0 +14,0 @@ defaultProps: {

dist/jsx/views/Theme.js

@@ -19,3 +19,6 @@ var __defProp = Object.defineProperty;
   if (isWeb) {
-    return <div className={props.disableThemeClass ? "" : props.className ? `${className || ""} ${props.className || ""}` : className || ""} style={{
+    return <div className={[
+      `tui_Theme`,
+      ...!props.disableThemeClass ? [props.className, className].filter(Boolean) : []
+    ].join(" ")} style={{
       display: "contents",
@@ -22,0 +25,0 @@ color: (_b = (_a = themes[name]) == null ? void 0 : _a.color) == null ? void 0 : _b.toString()

package.json

 {
   "name": "@tamagui/core",
-  "version": "1.0.0-beta.202+a1a54793",
+  "version": "1.0.0-beta.205+6a67c74d",
   "source": "src/index.ts",
@@ -22,6 +22,6 @@ "main": "dist/cjs",
   "dependencies": {
-    "@tamagui/helpers": "^1.0.0-beta.202+a1a54793",
+    "@tamagui/helpers": "^1.0.0-beta.205+6a67c74d",
     "@tamagui/ow": "^0.28.1",
-    "@tamagui/use-debounce": "^1.0.0-beta.202+a1a54793",
-    "@tamagui/use-force-update": "^1.0.0-beta.202+a1a54793",
+    "@tamagui/use-debounce": "^1.0.0-beta.205+6a67c74d",
+    "@tamagui/use-force-update": "^1.0.0-beta.205+6a67c74d",
     "react": "*",
@@ -34,3 +34,3 @@ "react-dom": "*"
   "devDependencies": {
-    "@tamagui/build": "^1.0.0-beta.202+a1a54793",
+    "@tamagui/build": "^1.0.0-beta.205+6a67c74d",
     "@types/react": "^17.0.35",
@@ -45,3 +45,3 @@ "csstype": "^3.0.10",
   },
-  "gitHead": "a1a54793ee1890507fc934f42f2eb3a4020b57c5"
+  "gitHead": "6a67c74d67416b6c81169e1cc25e239ab935f651"
 }

types/createFont.d.ts

 import { GenericFont } from './types';
-export declare const createFont: <A extends GenericFont>(font: A) => A;
+export declare const createFont: <A extends GenericFont<string | number>>(font: A) => A;
 //# sourceMappingURL=createFont.d.ts.map

types/Tamagui.d.ts

@@ -0,1 +1,2 @@
+import * as Helpers from '@tamagui/helpers';
 import { TamaguiInternalConfig } from './types';
@@ -5,2 +6,3 @@ declare class TamaguiManager {
     rnw: Record<string, any>;
+    Helpers: typeof Helpers;
     get allSelectors(): {};
@@ -7,0 +9,0 @@ get allTransforms(): {};

types/types.d.ts

@@ -101,14 +101,14 @@ import CSS from 'csstype';
 export declare type PropTypes<A extends TamaguiComponent> = A extends React.FunctionComponent<infer Props> ? Props : unknown;
-export declare type GenericFont = {
+export declare type GenericFont<Key extends number | string = number | string> = {
     size: {
-        [key: string | number]: number | Variable;
+        [key in Key]: number | Variable;
     };
     lineHeight: {
-        [key: string | number]: number | Variable;
+        [key in Key]: number | Variable;
     };
     letterSpacing: {
-        [key: string | number]: number | Variable;
+        [key in Key]: number | Variable;
     };
     weight: {
-        [key: string | number]: number | string | Variable;
+        [key in Key]: number | string | Variable;
     };
@@ -115,0 +115,0 @@ family: string | Variable;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

919665

increased by2.36%

Lines of code

12384

increased by1.71%

Worsened metrics

Number of low supply chain risk alerts

85

increased by16.44%

Dependency changes

• Updated@tamagui/helpers@^1.0.0-beta.205+6a67c74d

• Updated@tamagui/use-debounce@^1.0.0-beta.205+6a67c74d

• Updated@tamagui/use-force-update@^1.0.0-beta.205+6a67c74d