@tamagui/core 1.0.1-beta.59 → 1.0.1-beta.62

package/dist/jsx/helpers/extendStaticConfig.js

@@ -2,6 +2,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { stylePropsView } from "@tamagui/helpers";
 import { createPropMapper } from "./createPropMapper";
+import { mergeProps } from "./mergeProps";
 function extendStaticConfig(config, parent) {
   var _a;
   if (!parent || !("staticConfig" in parent)) {
@@ -35,12 +36,13 @@ function extendStaticConfig(config, parent) {
       ...parent.staticConfig.validStyles,
       ...config.validStyles
     } : parent.staticConfig.validStyles || stylePropsView,
-    defaultProps: {
+    defaultProps: mergeProps({
       ...parent.staticConfig.defaultProps,
-      ...parent.staticConfig.defaultVariants,
+      ...parent.staticConfig.defaultVariants
+    }, {
       ...config.defaultProps,
       ...config.defaultVariants
-    }
+    })
   });
 }
 __name(extendStaticConfig, "extendStaticConfig");

package/dist/jsx/helpers/generateAtomicStyles.js

@@ -4,53 +4,44 @@ import { simpleHash } from "@tamagui/helpers";
 import hyphenateStyleName from "hyphenate-style-name";
 import normalizeCSSColor from "normalize-css-color";
 import { isWeb } from "../constants/platform";
-import { prefixInlineStyles, prefixStyles } from "./prefixStyles";
+import { pseudos } from "./pseudos";
+const reducedStyleKeys = {
+  shadowColor: true,
+  shadowOffset: true,
+  shadowOpacity: true,
+  shadowRadius: true,
+  textShadowColor: true,
+  textShadowOffset: true,
+  textShadowRadius: true
+};
 function expandStyles(style) {
   const res = {};
+  boxShadowReducer(res, style);
+  textShadowReducer(res, style);
   for (const key in style) {
-    updateReactDOMStyle(res, key, style[key]);
+    if (reducedStyleKeys[key])
+      continue;
+    if (key in pseudos) {
+      res[key] = expandStyles(style[key]);
+    } else {
+      updateReactDOMStyle(res, key, style[key]);
+    }
   }
   return res;
 }
 __name(expandStyles, "expandStyles");
-function inline(style) {
-  return prefixInlineStyles(expandStyles(style));
+function updateReactDOMStyle(style, key, value) {
+  value = normalizeValueWithProperty(value, key);
+  const out = expandStyle(key, value);
+  if (out) {
+    Object.assign(style, Object.fromEntries(out));
+  } else {
+    style[key] = value;
+  }
 }
-__name(inline, "inline");
-const STYLE_SHORT_FORM_EXPANSIONS = {
-  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
-  borderRadius: [
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomRightRadius",
-    "borderBottomLeftRadius"
-  ],
-  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
-  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
-  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
-  marginHorizontal: ["marginRight", "marginLeft"],
-  marginVertical: ["marginTop", "marginBottom"],
-  overflow: ["overflowX", "overflowY"],
-  overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
-  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
-  paddingHorizontal: ["paddingRight", "paddingLeft"],
-  paddingVertical: ["paddingTop", "paddingBottom"]
-};
+__name(updateReactDOMStyle, "updateReactDOMStyle");
 const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
   const res = expandStyles(style);
-  if (style.shadowColor != null || style.shadowOffset != null || style.shadowOpacity != null || style.shadowRadius != null) {
-    boxShadowReducer(res, style);
-    delete res["shadowColor"];
-    delete res["shadowOffset"];
-    delete res["shadowOpacity"];
-    delete res["shadowRadius"];
-  }
-  if (style.textShadowColor != null || style.textShadowOffset != null || style.textShadowRadius != null) {
-    textShadowReducer(res, style);
-    delete res["textShadowColor"];
-    delete res["textShadowOffset"];
-    delete res["textShadowRadius"];
-  }
   const out = {};
   for (const key in res) {
     const value = res[key];
@@ -61,11 +52,11 @@ const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
         const { identifier } = cachedResult;
         out[identifier] = cachedResult;
       } else {
-        const identifier = createIdentifier("r", key, value);
-        const rules = createAtomicRules(identifier, key, value);
+        const identifier = simpleHash(key + valueString);
+        const rules = createAtomicRules(identifier, key, valueString);
         const cachedResult2 = cache.set(key, valueString, {
           property: key,
-          value: stringifyValueWithProperty(value, key),
+          value: valueString,
           identifier,
           rules
         });
@@ -75,16 +66,6 @@ const generateAtomicStyles = /* @__PURE__ */ __name((style) => {
   }
   return out;
 }, "generateAtomicStyles");
-function updateReactDOMStyle(style, key, value) {
-  value = normalizeValueWithProperty(value, key);
-  const out = expandStyle(key, value);
-  if (out) {
-    Object.assign(style, Object.fromEntries(out));
-  } else {
-    style[key] = value;
-  }
-}
-__name(updateReactDOMStyle, "updateReactDOMStyle");
 function expandStyle(key, value) {
   if (key === "flex") {
     if (value <= -1) {
@@ -153,15 +134,9 @@ function createAtomicRules(identifier, property, value) {
   const rules = [];
   const selector = `.${identifier}`;
   switch (property) {
-    case "animationKeyframes": {
-      const { animationNames, rules: keyframesRules } = processKeyframesValue(value);
-      const block = createDeclarationBlock({ animationName: animationNames.join(",") });
-      rules.push(`${selector}${block}`, ...keyframesRules);
-      break;
-    }
     case "placeholderTextColor": {
       const block = createDeclarationBlock({ color: value, opacity: 1 });
-      rules.push(`${selector}::-webkit-input-placeholder${block}`, `${selector}::-moz-placeholder${block}`, `${selector}:-ms-input-placeholder${block}`, `${selector}::placeholder${block}`);
+      rules.push(`${selector}::placeholder${block}`);
       break;
     }
     case "pointerEvents": {
@@ -200,58 +175,16 @@ function createAtomicRules(identifier, property, value) {
   return rules;
 }
 __name(createAtomicRules, "createAtomicRules");
-function processKeyframesValue(keyframesValue) {
-  if (typeof keyframesValue === "number") {
-    throw new Error(`Invalid CSS keyframes type: ${typeof keyframesValue}`);
-  }
-  const animationNames = [];
-  const rules = [];
-  const value = Array.isArray(keyframesValue) ? keyframesValue : [keyframesValue];
-  for (const keyframes of value) {
-    if (typeof keyframes === "string") {
-      animationNames.push(keyframes);
-    } else {
-      const { identifier, rules: keyframesRules } = createKeyframes(keyframes);
-      animationNames.push(identifier);
-      rules.push(...keyframesRules);
-    }
-  }
-  return { animationNames, rules };
-}
-__name(processKeyframesValue, "processKeyframesValue");
-function createKeyframes(keyframes) {
-  const prefixes2 = ["-webkit-", ""];
-  const identifier = createIdentifier("r", "animation", keyframes);
-  const steps = "{" + Object.keys(keyframes).map((stepName) => {
-    const rule = keyframes[stepName];
-    const block = createDeclarationBlock(rule);
-    return `${stepName}${block}`;
-  }).join("") + "}";
-  const rules = prefixes2.map((prefix) => {
-    return `@${prefix}keyframes ${identifier}${steps}`;
-  });
-  return { identifier, rules };
-}
-__name(createKeyframes, "createKeyframes");
 function createDeclarationBlock(style) {
-  const domStyle = prefixStyles(expandStyles(style));
+  const domStyle = expandStyles(style);
   const declarationsString = Object.keys(domStyle).map((property) => {
     const value = domStyle[property];
     const prop = hyphenateStyleName(property);
-    if (Array.isArray(value)) {
-      return value.map((v) => `${prop}:${v}`).join(";");
-    } else {
-      return `${prop}:${value}`;
-    }
+    return `${prop}:${value}`;
   }).sort().join(";");
   return `{${declarationsString};}`;
 }
 __name(createDeclarationBlock, "createDeclarationBlock");
-function createIdentifier(prefix, name, value) {
-  const hashedString = simpleHash(name + stringifyValueWithProperty(value, name));
-  return `${prefix}-${hashedString}`;
-}
-__name(createIdentifier, "createIdentifier");
 const cache = {
   get(property, value) {
     if (cache[property] != null && cache[property].hasOwnProperty(value) && cache[property][value] != null) {
@@ -266,8 +199,7 @@ const cache = {
   }
 };
 function stringifyValueWithProperty(value, property) {
-  const normalizedValue = normalizeValueWithProperty(value, property);
-  return typeof normalizedValue !== "string" ? JSON.stringify(normalizedValue || "") : normalizedValue;
+  return normalizeValueWithProperty(value, property);
 }
 __name(stringifyValueWithProperty, "stringifyValueWithProperty");
 const mapTransform = /* @__PURE__ */ __name((transform) => {
@@ -294,7 +226,8 @@ const colorProps = {
 };
 function normalizeValueWithProperty(value, property) {
   if (process.env.TAMAGUI_TARGET === "web") {
-    if ((property === void 0 || property === null || !unitlessNumbers[property]) && typeof value === "number") {
+    const shouldCoerceToPx = typeof value === "number" && (property === void 0 || property === null || !unitlessNumbers[property]);
+    if (shouldCoerceToPx) {
       return `${value}px`;
     }
   }
@@ -322,6 +255,7 @@ const normalizeColor = /* @__PURE__ */ __name((color, opacity = 1) => {
     const alpha = (a * opacity).toFixed(2);
     return `rgba(${r},${g},${b},${alpha})`;
   }
+  return `${color}`;
 }, "normalizeColor");
 const isWebColor = /* @__PURE__ */ __name((color) => color === "currentcolor" || color === "currentColor" || color === "inherit" || color.indexOf("var(") === 0, "isWebColor");
 const processColor = /* @__PURE__ */ __name((color) => {
@@ -381,25 +315,17 @@ const unitlessNumbers = {
   scaleZ: true,
   shadowOpacity: true
 };
-const prefixes = ["ms", "Moz", "O", "Webkit"];
-const prefixKey = /* @__PURE__ */ __name((prefix, key) => {
-  return prefix + key.charAt(0).toUpperCase() + key.substring(1);
-}, "prefixKey");
-Object.keys(unitlessNumbers).forEach((prop) => {
-  prefixes.forEach((prefix) => {
-    unitlessNumbers[prefixKey(prefix, prop)] = unitlessNumbers[prop];
-  });
-});
 const resolveShadowValue = /* @__PURE__ */ __name((style) => {
   const { shadowColor, shadowOffset, shadowOpacity, shadowRadius } = style;
+  if (shadowRadius === void 0) {
+    return;
+  }
   const { height, width } = shadowOffset || defaultOffset;
   const offsetX = normalizeValueWithProperty(width);
   const offsetY = normalizeValueWithProperty(height);
   const blurRadius = normalizeValueWithProperty(shadowRadius || 0);
-  const color = normalizeColor(shadowColor || "black", shadowOpacity);
-  if (color != null && offsetX != null && offsetY != null && blurRadius != null) {
-    return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
-  }
+  const color = normalizeColor(String(shadowColor || "black"), shadowOpacity);
+  return `${offsetX} ${offsetY} ${blurRadius} ${color}`;
 }, "resolveShadowValue");
 function boxShadowReducer(resolvedStyle, style) {
   const { boxShadow } = style;
@@ -423,9 +349,29 @@ function textShadowReducer(resolvedStyle, style) {
   }
 }
 __name(textShadowReducer, "textShadowReducer");
+const STYLE_SHORT_FORM_EXPANSIONS = {
+  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
+  borderRadius: [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius"
+  ],
+  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
+  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
+  marginHorizontal: ["marginRight", "marginLeft"],
+  marginVertical: ["marginTop", "marginBottom"],
+  overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
+  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
+  paddingHorizontal: ["paddingRight", "paddingLeft"],
+  paddingVertical: ["paddingTop", "paddingBottom"],
+  ...isWeb && {
+    overflow: ["overflowX", "overflowY"]
+  }
+};
 export {
   expandStyle,
   expandStyles,
-  generateAtomicStyles,
-  inline
+  generateAtomicStyles
 };

package/dist/jsx/helpers/getSplitStyles.js

@@ -30,13 +30,12 @@ const skipProps = {
     selectable: true,
     cursor: true,
     contain: true,
-    pointerEvents: true,
     boxSizing: true,
     boxShadow: true
   }
 };
 let conf;
-const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames) => {
+const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state, defaultClassNames, debug) => {
   var _a;
   conf = conf || getConfig();
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
@@ -46,7 +45,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   const usedKeys = /* @__PURE__ */ new Set();
   let style = {};
   let classNames = {};
-  let transforms = {};
+  let transforms = null;
   const rulesToInsert = [];
   function addStyle(prop, rule) {
     rulesToInsert.push([prop, rule]);
@@ -63,17 +62,22 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         if (!transform) {
           updateInserted();
           transform = insertedTransforms[val];
+          if (process.env.NODE_ENV === "development") {
+            if (!transform) {
+              console.warn("no transform, error", { insertedTransforms, val });
+            }
+          }
         }
         if (!transform) {
           if (isWeb && val[0] !== "_") {
             transform = val;
-          } else {
           }
         }
-        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
           console.log("  \xBB getSplitStyles mergeClassName transform", { key, val, namespace, transform, insertedTransforms });
         }
       }
+      transforms = transforms || {};
       transforms[namespace] = transforms[namespace] || ["", ""];
       const identifier = val.replace("_transform", "");
       transforms[namespace][0] += identifier;
@@ -86,6 +90,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   }
   __name(mergeClassName, "mergeClassName");
   const propKeys = Object.keys(props);
+  if (process.env.NODE_ENV === "development" && debug === "verbose") {
+    console.log("propKeys", propKeys);
+  }
   for (let i = propKeys.length - 1; i >= 0; i--) {
     const keyInit = propKeys[i];
     if (usedKeys.has(keyInit))
@@ -161,9 +168,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       viewProps[keyInit] = valInit;
       continue;
     }
-    const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state);
+    const expanded = isMedia || isPseudo ? [[keyInit, valInit]] : staticConfig.propMapper(keyInit, valInit, theme, props, state, void 0, debug);
     let isMediaOrPseudo = isMedia || isPseudo;
-    if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+    if (process.env.NODE_ENV === "development" && debug === "verbose") {
       console.log("  \xBB getSplitStyles", keyInit, expanded);
     }
     if (!expanded) {
@@ -185,6 +192,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           continue;
       }
       if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key)) {
+        usedKeys.add(key);
         viewProps[key] = val;
       }
       if (isPseudo) {
@@ -201,7 +209,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
             const fullKey = `${style2.property}-${key}`;
             if (!usedKeys.has(fullKey)) {
               usedKeys.add(fullKey);
-              addStyle(style2.identifier, style2.rules[0]);
+              addStyle(style2.identifier, style2.rules.join(";"));
               mergeClassName(fullKey, style2.identifier, isMediaOrPseudo);
             }
           }
@@ -212,12 +220,14 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         const mediaKey = key;
         const mediaKeyShort = mediaKey.slice(1);
         if (!mediaQueryConfig[mediaKeyShort]) {
-          viewProps[key] = val;
+          if (!usedKeys.has(key)) {
+            viewProps[key] = val;
+          }
           continue;
         }
         const mediaStyle = getSubStyle(val, staticConfig, theme, props, state);
         const shouldDoClasses = isWeb && !state.noClassNames;
-        if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+        if (process.env.NODE_ENV === "development" && debug === "verbose") {
           console.log("  \xBB getSplitStyles mediaStyle", { mediaKey, mediaStyle, props, shouldDoClasses });
         }
         if (shouldDoClasses) {
@@ -233,7 +243,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           }
         } else {
           if (mediaState[mediaKey]) {
-            if (process.env.NODE_ENV === "development" && props["debug"]) {
+            if (process.env.NODE_ENV === "development" && debug) {
               console.log("apply media style", mediaKey, mediaState);
             }
             Object.assign(shouldDoClasses ? medias : style, mediaStyle);
@@ -252,8 +262,8 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           classNames[key] = val;
         } else {
           if (key in stylePropsTransform) {
-            if (process.env.NODE_ENV === "development" && props["debug"]) {
-              console.log("mergeTransform", key, val);
+            if (process.env.NODE_ENV === "development" && debug) {
+              console.log("  > mergeTransform", key, val);
             }
             mergeTransform(style, key, val, true);
           } else {
@@ -281,7 +291,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     for (const atomicStyle of atomic) {
       const key = atomicStyle.property;
       if (!state.dynamicStylesInline) {
-        addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
+        addStyle(atomicStyle.identifier, atomicStyle.rules.join(";"));
         mergeClassName(key, atomicStyle.identifier);
       } else {
         style[key] = atomicStyle.value;
@@ -290,6 +300,10 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   }
   if (transforms) {
     for (const namespace in transforms) {
+      if (!transforms[namespace]) {
+        console.warn("Error no transform");
+        continue;
+      }
       const [hash, val] = transforms[namespace];
       const identifier = `_transform${hash}`;
       if (isClient) {
@@ -301,7 +315,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       classNames[namespace] = identifier;
     }
   }
-  if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
+  if (process.env.NODE_ENV === "development" && debug === "verbose") {
     if (typeof document !== "undefined") {
       console.log("  \xBB getSplitStyles out", { style, pseudos, medias, classNames, viewProps, state });
     }

package/dist/jsx/helpers/getStylesAtomic.js

@@ -5,20 +5,7 @@ import { reversedShorthands } from "../createTamagui";
 import { isVariable } from "../createVariable";
 import { generateAtomicStyles } from "./generateAtomicStyles";
 import { invertMapTransformKeys, mergeTransform } from "./mergeTransform";
-const pseudos = {
-  hoverStyle: {
-    name: "hover",
-    priority: 1
-  },
-  pressStyle: {
-    name: "active",
-    priority: 2
-  },
-  focusStyle: {
-    name: "focus",
-    priority: 3
-  }
-};
+import { pseudos } from "./pseudos";
 const pseudosOrdered = Object.values(pseudos);
 const psuedoCNInverse = {
   hover: "hoverStyle",
@@ -61,7 +48,7 @@ function getAtomicStyle(style, pseudo, options) {
   let atomicStyles = {};
   if (options.splitTransforms && style.transform) {
     let { transform, ...rest } = style;
-    Object.assign(atomicStyles, generateAtomicStyles(rest));
+    style = rest;
     for (const t of transform) {
       const tKey = Object.keys(t)[0];
       const transformProperty = invertMapTransformKeys[tKey] || tKey;
@@ -72,12 +59,13 @@ function getAtomicStyle(style, pseudo, options) {
         transformProperty
       };
     }
-  } else {
-    atomicStyles = generateAtomicStyles(style);
+  }
+  if (style) {
+    Object.assign(atomicStyles, generateAtomicStyles(style));
   }
   return Object.keys(atomicStyles).map((key) => {
     const val = atomicStyles[key];
-    const [_, hash] = val.identifier.split("-");
+    const hash = val.identifier;
     const psuedoPrefix = pseudo ? `0${pseudo.name}-` : "";
     if (!val.property) {
       throw new Error(`no prop`);
@@ -99,7 +87,7 @@ function getAtomicStyle(style, pseudo, options) {
     const result = {
       property: val.transformProperty || val.property,
       pseudo: pseudo == null ? void 0 : pseudo.name,
-      value: val.value || "",
+      value: val.value,
       identifier,
       className,
       rules
@@ -118,6 +106,5 @@ const borderDefaults = {
 };
 export {
   getStylesAtomic,
-  pseudos,
   psuedoCNInverse
 };

package/dist/jsx/helpers/insertStyleRule.js

@@ -71,7 +71,8 @@ function updateInsertedCache(identifier, rule) {
   if (insertedSelectors[identifier])
     return;
   insertedSelectors[identifier] = rule;
-  if (identifier.startsWith("_transform")) {
+  const isTransform = identifier.startsWith("_transform");
+  if (isTransform) {
     addTransform(identifier, rule);
   }
 }

package/dist/jsx/helpers/isTamaguiComponent.js

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+function isTamaguiComponent(comp, name) {
+  const config = comp && comp["staticConfig"];
+  if (!config || !config.parsed)
+    return false;
+  if (name) {
+    return name === config.componentName;
+  }
+  return true;
+}
+__name(isTamaguiComponent, "isTamaguiComponent");
+export {
+  isTamaguiComponent
+};

package/dist/jsx/helpers/isTamaguiElement.js

@@ -1,15 +1,9 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { isValidElement } from "react";
+import { isTamaguiComponent } from "./isTamaguiComponent";
 const isTamaguiElement = /* @__PURE__ */ __name((child, name) => {
-  var _a;
-  const isTamagui = isValidElement(child) && !!((_a = child.type["staticConfig"]) == null ? void 0 : _a.parsed);
-  if (!isTamagui)
-    return false;
-  if (name) {
-    return name === child.type["staticConfig"].componentName;
-  }
-  return true;
+  return isValidElement(child) && isTamaguiComponent(child.type, name);
 }, "isTamaguiElement");
 export {
   isTamaguiElement

package/dist/jsx/helpers/mergeProps.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const mergeProps = /* @__PURE__ */ __name((a, b) => {
+  const out = {};
+  for (const key in a) {
+    if (!(key in b)) {
+      out[key] = a[key];
+    }
+  }
+  for (const key in b) {
+    out[key] = b[key];
+  }
+  return out;
+}, "mergeProps");
+export {
+  mergeProps
+};

package/dist/jsx/helpers/pseudos.js

@@ -0,0 +1,17 @@
+const pseudos = {
+  hoverStyle: {
+    name: "hover",
+    priority: 1
+  },
+  pressStyle: {
+    name: "active",
+    priority: 2
+  },
+  focusStyle: {
+    name: "focus",
+    priority: 3
+  }
+};
+export {
+  pseudos
+};

package/dist/jsx/helpers/themeable.js

@@ -4,7 +4,8 @@ import React, { forwardRef } from "react";
 import { Theme } from "../views/Theme";
 import { ThemeInverse } from "../views/ThemeInverse";
 function themeable(component, opts) {
-  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme({ themeInverse, theme, ...rest }, ref) {
+  const withThemeComponent = forwardRef(/* @__PURE__ */ __name(function WithTheme(props, ref) {
+    const { themeInverse, theme, ...rest } = props;
     const element = React.createElement(component, { ...rest, ref });
     if (themeInverse) {
       return <ThemeInverse>{element}</ThemeInverse>;

package/dist/jsx/hooks/useTheme.js

@@ -3,7 +3,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { useForceUpdate } from "@tamagui/use-force-update";
 import { useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { getConfig } from "../conf";
-import { useIsomorphicLayoutEffect } from "../constants/platform";
+import { isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
 import { areEqualSets } from "../helpers/areEqualSets";
 import { ThemeContext } from "../ThemeContext";
 import { ThemeManager, ThemeManagerContext, emptyManager } from "../ThemeManager";
@@ -128,7 +128,7 @@ const useChangeThemeEffect = /* @__PURE__ */ __name((name, componentName, props,
       return null;
     return new ThemeManager(next.name, next.theme, parentManager, reset);
   });
-  if (typeof document !== "undefined") {
+  if (!isWeb || typeof document !== "undefined") {
     useLayoutEffect(() => {
       if (!themeManager)
         return;

package/dist/jsx/index.js

@@ -23,9 +23,13 @@ export * from "./helpers/getExpandedShorthands";
 export * from "./helpers/getSize";
 export * from "./helpers/getSplitStyles";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/pseudos";
+export * from "./helpers/mergeProps";
+import { expandStyles } from "./helpers/generateAtomicStyles";
 export * from "./helpers/getTextSize";
 export * from "./helpers/isObj";
 export * from "./helpers/isTamaguiElement";
+export * from "./helpers/isTamaguiComponent";
 export * from "./helpers/matchMedia";
 export * from "./helpers/themeable";
 export * from "./helpers/withStaticProperties";
@@ -51,6 +55,7 @@ export * from "@tamagui/helpers";
 export {
   RNWTextProps,
   RNWViewProps,
+  expandStyles,
   getConfig,
   getHasConfigured,
   getThemes,

package/dist/jsx/static.js

@@ -9,6 +9,8 @@ export * from "./hooks/useMedia";
 export * from "./hooks/useTheme";
 export * from "./helpers/isObj";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/generateAtomicStyles";
+export * from "./helpers/pseudos";
 export * from "./helpers/proxyThemeVariables";
 export * from "./helpers/getSplitStyles";
 export * from "@tamagui/helpers";