@tamagui/core 1.0.0-beta.0.211 → 1.0.0-beta.11

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/views/Slot.tsx"],
+  "sourcesContent": ["// via radix\n\nimport { composeRefs } from '@tamagui/compose-refs'\nimport * as React from 'react'\n\n/* -------------------------------------------------------------------------------------------------\n * Slot\n * -----------------------------------------------------------------------------------------------*/\n\nexport type SlotProps = {\n  children?: React.ReactNode\n}\n\nexport const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (React.Children.toArray(children).some(isSlottable)) {\n    return (\n      <>\n        {React.Children.map(children, (child) => {\n          return isSlottable(child) ? (\n            <SlotClone {...slotProps} ref={forwardedRef}>\n              {child.props.children}\n            </SlotClone>\n          ) : (\n            child\n          )\n        })}\n      </>\n    )\n  }\n\n  return (\n    <SlotClone {...slotProps} ref={forwardedRef}>\n      {children}\n    </SlotClone>\n  )\n})\n\nSlot.displayName = 'Slot'\n\n/* -------------------------------------------------------------------------------------------------\n * SlotClone\n * -----------------------------------------------------------------------------------------------*/\n\ninterface SlotCloneProps {\n  children: React.ReactNode\n}\n\nconst SlotClone = React.forwardRef<any, SlotCloneProps>((props, forwardedRef) => {\n  const { children, ...slotProps } = props\n\n  if (React.isValidElement(children)) {\n    return React.cloneElement(children, {\n      ...mergeProps(slotProps, children.props),\n      ref: composeRefs(forwardedRef, (children as any).ref),\n    })\n  }\n\n  return React.Children.count(children) > 1 ? React.Children.only(null) : null\n})\n\nSlotClone.displayName = 'SlotClone'\n\n/* -------------------------------------------------------------------------------------------------\n * Slottable\n * -----------------------------------------------------------------------------------------------*/\n\nexport const Slottable = ({ children }: { children: React.ReactNode }) => {\n  return <>{children}</>\n}\n\n/* ---------------------------------------------------------------------------------------------- */\n\ntype AnyProps = Record<string, any>\n\nfunction isSlottable(child: React.ReactNode): child is React.ReactElement {\n  return React.isValidElement(child)\n}\n\nfunction mergeProps(slotProps: AnyProps, childProps: AnyProps) {\n  // all child props should override\n  const overrideProps = { ...childProps }\n\n  for (const propName in childProps) {\n    const slotPropValue = slotProps[propName]\n    const childPropValue = childProps[propName]\n\n    const isHandler = /^on[A-Z]/.test(propName)\n    // if it's a handler, modify the override by composing the base handler\n    if (isHandler) {\n      overrideProps[propName] = (...args: unknown[]) => {\n        childPropValue?.(...args)\n        slotPropValue?.(...args)\n      }\n    }\n    // if it's `style`, we merge them\n    else if (propName === 'style') {\n      overrideProps[propName] = { ...slotPropValue, ...childPropValue }\n    } else if (propName === 'className') {\n      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(' ')\n    }\n  }\n\n  return { ...slotProps, ...overrideProps }\n}\n"],
+  "mappings": ";;AAEA;AACA;AAUO,MAAM,OAAO,MAAM,WAAmC,CAAC,OAAO,iBAAiB;AACpF,QAAM,EAAE,aAAa,cAAc;AAEnC,MAAI,MAAM,SAAS,QAAQ,QAAQ,EAAE,KAAK,WAAW,GAAG;AACtD,WACE,0DACG,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AACvC,aAAO,YAAY,KAAK,IACtB,oCAAC;AAAA,WAAc;AAAA,QAAW,KAAK;AAAA,SAC5B,MAAM,MAAM,QACf,IAEA;AAAA,IAEJ,CAAC,CACH;AAAA,EAEJ;AAEA,SACE,oCAAC;AAAA,OAAc;AAAA,IAAW,KAAK;AAAA,KAC5B,QACH;AAEJ,CAAC;AAED,KAAK,cAAc;AAUnB,MAAM,YAAY,MAAM,WAAgC,CAAC,OAAO,iBAAiB;AAC/E,QAAM,EAAE,aAAa,cAAc;AAEnC,MAAI,MAAM,eAAe,QAAQ,GAAG;AAClC,WAAO,MAAM,aAAa,UAAU;AAAA,SAC/B,WAAW,WAAW,SAAS,KAAK;AAAA,MACvC,KAAK,YAAY,cAAe,SAAiB,GAAG;AAAA,IACtD,CAAC;AAAA,EACH;AAEA,SAAO,MAAM,SAAS,MAAM,QAAQ,IAAI,IAAI,MAAM,SAAS,KAAK,IAAI,IAAI;AAC1E,CAAC;AAED,UAAU,cAAc;AAMjB,MAAM,YAAY,wBAAC,EAAE,eAA8C;AACxE,SAAO,0DAAG,QAAS;AACrB,GAFyB;AAQzB,qBAAqB,OAAqD;AACxE,SAAO,MAAM,eAAe,KAAK;AACnC;AAFS;AAIT,oBAAoB,WAAqB,YAAsB;AAE7D,QAAM,gBAAgB,KAAK,WAAW;AAEtC,aAAW,YAAY,YAAY;AACjC,UAAM,gBAAgB,UAAU;AAChC,UAAM,iBAAiB,WAAW;AAElC,UAAM,YAAY,WAAW,KAAK,QAAQ;AAE1C,QAAI,WAAW;AACb,oBAAc,YAAY,IAAI,SAAoB;AAChD,yDAAiB,GAAG;AACpB,uDAAgB,GAAG;AAAA,MACrB;AAAA,IACF,WAES,aAAa,SAAS;AAC7B,oBAAc,YAAY,KAAK,kBAAkB,eAAe;AAAA,IAClE,WAAW,aAAa,aAAa;AACnC,oBAAc,YAAY,CAAC,eAAe,cAAc,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,IACpF;AAAA,EACF;AAEA,SAAO,KAAK,cAAc,cAAc;AAC1C;AAzBS;",
+  "names": []
+}

package/dist/jsx/createComponent.js

@@ -16,18 +16,19 @@ import React, {
 import { StyleSheet, Text, View } from "react-native";
 import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
-import { isAndroid, isTouchDevice, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
+import { isAndroid, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
-import { isVariable } from "./createVariable";
 import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import { getSplitStyles } from "./helpers/getSplitStyles";
+import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
+import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
 import { usePressable } from "./hooks/usePressable";
 import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
+import { Slot } from "./views/Slot";
 import { TextAncestorContext } from "./views/TextAncestorContext";
 React["keep"];
 const defaultComponentState = {
@@ -44,6 +45,14 @@ if (typeof document !== "undefined") {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
   });
+  document.addEventListener("touchend", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
+  document.addEventListener("touchcancel", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
 }
 function mergeShorthands({ defaultProps }, { shorthands }) {
   for (const key in defaultProps) {
@@ -68,6 +77,7 @@ function createComponent(configIn, ParentComponent) {
   let avoidClasses = true;
   let defaultNativeStyle;
   let defaultNativeStyleSheet;
+  let tamaguiDefaultProps;
   let initialSplitStyles;
   function addPseudoToStyles(styles, name, pseudos) {
     const pseudoStyle = pseudos[name];
@@ -83,11 +93,12 @@ function createComponent(configIn, ParentComponent) {
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = forwardRef((props, forwardedRef) => {
     var _a, _b, _c, _d;
+    props = tamaguiDefaultProps && !props.asChild ? { ...tamaguiDefaultProps, ...props } : props;
     const { Component, componentName, isText, isZStack } = staticConfig;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.warn(staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
-        console.log("props in:", props);
+        console.log("\u26A0\uFE0F", staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props, Object.keys(props));
         if (props["debug"] === "break")
           debugger;
       }
@@ -97,7 +108,7 @@ function createComponent(configIn, ParentComponent) {
     const [state, set_] = useState(defaultComponentState);
     const setStateShallow = createShallowUpdate(set_);
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const splitStyles = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
+    const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames);
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
@@ -116,6 +127,7 @@ function createComponent(configIn, ParentComponent) {
     const {
       tag,
       hitSlop,
+      asChild,
       children,
       pointerEvents,
       onPress,
@@ -199,7 +211,7 @@ function createComponent(configIn, ParentComponent) {
       if (accessibilityRole)
         viewProps.accessibilityRole = accessibilityRole;
     }
-    if (isWeb) {
+    if (isWeb && !asChild) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
@@ -303,10 +315,11 @@ function createComponent(configIn, ParentComponent) {
     }
     const initialPseudos = initialSplitStyles.pseudos;
     const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
-    const isHoverable = isWeb && !isTouchDevice;
+    const isTouch = useIsTouchDevice();
+    const isHoverable = isWeb && !isTouch;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
     const pressEventKey = isStringElement ? "onClick" : "onPress";
-    const shouldAttach = attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
+    const shouldAttach = !asChild && (attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
     const unPress = useCallback(() => {
       if (!internal.current.isMounted)
         return;
@@ -361,15 +374,18 @@ function createComponent(configIn, ParentComponent) {
         });
         onPressIn == null ? void 0 : onPressIn(e);
         onMouseDown == null ? void 0 : onMouseDown(e);
+        if (isWeb) {
+          mouseUps.add(unPress);
+        }
       } : null,
       [pressEventKey]: attachPress ? (e) => {
+        onClick == null ? void 0 : onClick(e);
         onPress == null ? void 0 : onPress(e);
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
-        onClick == null ? void 0 : onClick(e);
       } : null
     } : null;
-    let childEls = !children ? children : wrapThemeManagerContext(spacedChildren({
+    const childEls = !children || asChild ? children : wrapThemeManagerContext(spacedChildren({
       children,
       space,
       flexDirection: props.flexDirection || ((_b = staticConfig.defaultProps) == null ? void 0 : _b.flexDirection),
@@ -409,6 +425,11 @@ function createComponent(configIn, ParentComponent) {
         Object.assign(viewProps, events);
       }
     }
+    if (asChild) {
+      ViewComponent = Slot;
+      const onlyChild = React.Children.only(children);
+      Object.assign(viewProps, onlyChild.props);
+    }
     content = createElement(ViewComponent, viewProps, childEls);
     if (isWeb && events && attachHover) {
       content = <span className="tui_Hoverable" style={{
@@ -441,7 +462,7 @@ function createComponent(configIn, ParentComponent) {
     AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
     AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
     initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
-    initialSplitStyles = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
+    initialSplitStyles = insertSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
       hover: false,
       press: false,
@@ -450,24 +471,33 @@ function createComponent(configIn, ParentComponent) {
       resolveVariablesAs: "both",
       keepVariantsAsProps: true
     });
-    const { style, viewProps } = initialSplitStyles;
+    const defaults = {
+      ...component.defaultProps,
+      ...initialSplitStyles.viewProps
+    };
     defaultNativeStyle = {};
-    for (const key in style) {
-      const v = style[key];
-      defaultNativeStyle[key] = isVariable(v) ? v.val : v;
+    for (const key in staticConfig.defaultProps) {
+      const val = staticConfig.defaultProps[key];
+      if (typeof val === "string" && val[0] === "$") {
+        defaults[key] = val;
+      } else {
+        defaultNativeStyle[key] = val;
+      }
     }
     defaultNativeStyleSheet = StyleSheet.create({
       base: defaultNativeStyle
     });
-    component.defaultProps = {
-      ...viewProps,
-      ...component.defaultProps
-    };
+    if (Object.keys(defaults).length) {
+      tamaguiDefaultProps = defaults;
+    }
     if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
       if (process.env.IS_STATIC !== "is_static") {
         console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
           staticConfig,
-          initialSplitStyles
+          initialSplitStyles,
+          tamaguiDefaultProps,
+          defaultNativeStyle,
+          defaults
         });
       }
     }

package/dist/jsx/helpers/createPropMapper.js

@@ -63,7 +63,7 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
         if (isObj(variantValue)) {
           variantValue = resolveTokens(variantValue, conf, theme, fontFamily, returnVariablesAs);
         }
-        return variantValue;
+        return expansions(variantValue);
       }
     }
     let shouldReturn = false;
@@ -80,9 +80,9 @@ const createPropMapper = /* @__PURE__ */ __name((staticConfig) => {
       }
     }
     if (shouldReturn) {
-      return {
+      return expansions({
         [key]: value
-      };
+      });
     }
   };
 }, "createPropMapper");
@@ -200,6 +200,38 @@ const tokenCategories = {
     borderRightColor: true
   }
 };
+const sidesX = ["Left", "Right"];
+const sidesY = ["Top", "Bottom"];
+const sidesXY = [...sidesX, ...sidesY];
+const expand = {
+  padding: sidesXY.map((x) => `padding${x}`),
+  paddingHorizontal: sidesX.map((x) => `padding${x}`),
+  paddingVertical: sidesY.map((x) => `padding${x}`),
+  margin: sidesXY.map((x) => `margin${x}`),
+  marginHorizontal: sidesX.map((x) => `margin${x}`),
+  marginVertical: sidesY.map((x) => `margin${x}`),
+  borderWidth: sidesXY.map((x) => `border${x}Width`)
+};
+function expansions(styleObj) {
+  var _a, _b;
+  for (const key in expand) {
+    if (key in styleObj) {
+      for (const expandKey of expand[key]) {
+        styleObj[expandKey] = styleObj[key];
+      }
+      delete styleObj[key];
+    }
+  }
+  if ("flex" in styleObj) {
+    if (typeof styleObj.flex === "number") {
+      styleObj.flexGrow = (_a = styleObj.flexGrow) != null ? _a : styleObj.flex;
+      styleObj.flexShrink = (_b = styleObj.flexShrink) != null ? _b : 1;
+      delete styleObj.flex;
+    }
+  }
+  return styleObj;
+}
+__name(expansions, "expansions");
 export {
   createPropMapper
 };

package/dist/jsx/helpers/fixNativeShadow.native.js

@@ -2,7 +2,8 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 const matchRgbaHsla = /(rgba|hsla)\(\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,}%?)\s*,\s*([\d\.]{1,})\s*\)$/;
 function fixNativeShadow(props) {
-  if (!props.shadowColor) {
+  var _a, _b;
+  if (!props.shadowColor || props.shadowColor === "transparent") {
     return;
   }
   if (!props.shadowOffset) {
@@ -11,10 +12,7 @@ function fixNativeShadow(props) {
       height: 0
     };
   }
-  if ("shadowOpacity" in props) {
-    return;
-  }
-  const c = `${props.shadowColor}`;
+  const c = String(props.shadowColor);
   if ((c[0] === "r" || c[0] === "h") && c[3] === "a") {
     const [_, type, _1, _2, _3, a] = c.match(matchRgbaHsla) || [];
     if (typeof a !== "string") {
@@ -22,9 +20,9 @@ function fixNativeShadow(props) {
       throw new Error(`invalid style`);
     }
     props.shadowColor = `${type.replace("a", "")}(${_1},${_2},${_3})`;
-    props.shadowOpacity = +a;
+    props.shadowOpacity = (_a = props.shadowOpacity) != null ? _a : +a;
   } else {
-    props.shadowOpacity = 1;
+    props.shadowOpacity = (_b = props.shadowOpacity) != null ? _b : 1;
   }
 }
 __name(fixNativeShadow, "fixNativeShadow");

package/dist/jsx/helpers/getButtonSize.js

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getVariableValue, isVariable } from "@tamagui/core";
+const getButtonSize = /* @__PURE__ */ __name((sizeX = 0.9, sizeY = 0.333) => (val, { tokens, props, fonts }) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const size = (_c = (_b = (_a = tokens.size[val]) != null ? _a : tokens.size["$4"]) != null ? _b : val) != null ? _c : 14;
+  const radius = (_e = (_d = tokens.radius[val]) != null ? _d : tokens.radius["$4"]) != null ? _e : size;
+  const px = Math.round(+(isVariable(size) ? size.val : size) * sizeX);
+  const py = Math.round(+(isVariable(size) ? size.val : size) * sizeY);
+  const font = fonts[props.fontFamily] || fonts["$body"];
+  const lineHeights = font.lineHeight;
+  const lineHeight = (_f = lineHeights[val]) != null ? _f : lineHeights["$4"];
+  const minHeight = Math.round(getVariableValue(lineHeight) + py * 2);
+  return {
+    minHeight,
+    paddingHorizontal: props.circular ? 0 : px,
+    paddingVertical: props.circular ? 0 : py,
+    borderRadius: props.circular ? 1e5 : (_g = props.borderRadius) != null ? _g : radius
+  };
+}, "getButtonSize");
+export {
+  getButtonSize
+};

package/dist/jsx/helpers/getSplitStyles.js

@@ -7,13 +7,19 @@ import {
   validPseudoKeys,
   validStyles
 } from "@tamagui/helpers";
+import { useInsertionEffect } from "react";
 import { getConfig } from "../conf";
-import { isClient, isWeb } from "../constants/platform";
+import { isClient, isWeb, useIsomorphicLayoutEffect } from "../constants/platform";
 import { mediaQueryConfig, mediaState } from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
 import { fixNativeShadow } from "./fixNativeShadow";
 import { getStylesAtomic } from "./getStylesAtomic";
-import { insertStyleRule, insertedTransforms, updateInserted } from "./insertStyleRule";
+import {
+  insertStyleRule,
+  insertedTransforms,
+  updateInserted,
+  updateInsertedCache
+} from "./insertStyleRule";
 const skipProps = {
   animation: true,
   animateOnly: true,
@@ -34,6 +40,12 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
   };
   const pseudos = {};
   const medias = {};
+  const rulesToInsert = [];
+  function addStyle(prop, rule) {
+    rulesToInsert.push([prop, rule]);
+    updateInsertedCache(prop, rule);
+  }
+  __name(addStyle, "addStyle");
   let cur = null;
   let transforms = {};
   function mergeClassName(key, val) {
@@ -89,7 +101,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       const atomic = getStylesAtomic(cur);
       for (const atomicStyle of atomic) {
         if (!state.noClassNames) {
-          insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0]);
+          addStyle(atomicStyle.identifier, atomicStyle.rules[0]);
           mergeClassName(atomicStyle.property, atomicStyle.identifier);
         } else {
           style[atomicStyle.property] = atomicStyle.value;
@@ -162,7 +174,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
         if (isWeb && !state.noClassNames) {
           const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] });
           for (const style2 of pseudoStyles) {
-            insertStyleRule(style2.identifier, style2.rules[0]);
+            addStyle(style2.identifier, style2.rules[0]);
             mergeClassName(`${style2.property}-${key}`, style2.identifier);
           }
         }
@@ -184,7 +196,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
           const mediaStyles = getStylesAtomic(mediaStyle);
           for (const style2 of mediaStyles) {
             const out2 = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
-            insertStyleRule(out2.identifier, out2.styleRule);
+            addStyle(out2.identifier, out2.styleRule);
             mergeClassName(`${out2.identifier}-${mediaKey}`, out2.identifier);
           }
         } else {
@@ -223,7 +235,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
       if (isClient) {
         if (!insertedTransforms[identifier]) {
           const rule = `.${identifier} { transform: ${val}; }`;
-          insertStyleRule(identifier, rule);
+          addStyle(identifier, rule);
         }
       }
       classNames[namespace] = identifier;
@@ -237,9 +249,27 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
     style,
     medias,
     pseudos,
-    classNames
+    classNames,
+    rulesToInsert
   };
 }, "getSplitStyles");
+const insertSplitStyles = /* @__PURE__ */ __name((...args) => {
+  const res = getSplitStyles(...args);
+  for (const [prop, rule] of res.rulesToInsert) {
+    insertStyleRule(prop, rule);
+  }
+  return res;
+}, "insertSplitStyles");
+const effect = useInsertionEffect || useIsomorphicLayoutEffect;
+const useSplitStyles = /* @__PURE__ */ __name((...args) => {
+  const res = getSplitStyles(...args);
+  effect(() => {
+    for (const [prop, rule] of res.rulesToInsert) {
+      insertStyleRule(prop, rule);
+    }
+  });
+  return res;
+}, "useSplitStyles");
 const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
   const styleOut = {};
   for (const key in styleIn) {
@@ -258,13 +288,6 @@ const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
   return styleOut;
 }, "getSubStyle");
 function normalizeStyleObject(style) {
-  var _a, _b;
-  if (typeof style.flex === "number") {
-    const val = style.flex;
-    delete style.flex;
-    style.flexGrow = (_a = style.flexGrow) != null ? _a : val;
-    style.flexShrink = (_b = style.flexShrink) != null ? _b : 1;
-  }
   if (!isWeb) {
     fixNativeShadow(style);
   }
@@ -273,5 +296,7 @@ __name(normalizeStyleObject, "normalizeStyleObject");
 export {
   getSplitStyles,
   getSubStyle,
-  normalizeStyleObject
+  insertSplitStyles,
+  normalizeStyleObject,
+  useSplitStyles
 };

package/dist/jsx/helpers/getTextSize.js

@@ -0,0 +1,33 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { getVariableValue } from "../createVariable";
+const getTextSize = /* @__PURE__ */ __name((val = "$4", { fonts, theme, props }) => {
+  var _a, _b, _c;
+  const family = getVariableValue(props.fontFamily) || "$body";
+  const font = fonts[family] || fonts["$body"];
+  if (!font) {
+    console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
+    return;
+  }
+  const fontFamily = font.family;
+  const fontSize = props.fontSize || font.size[val];
+  const lineHeight = props.lineHeight || font.lineHeight[val];
+  const fontWeight = props.fontWeight || font.weight[val];
+  const letterSpacing = props.letterSpacing || font.letterSpacing[val];
+  const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[val]);
+  const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[val]);
+  const color = props.color || ((_c = font.color) == null ? void 0 : _c[val]) || theme.color;
+  return {
+    color,
+    fontStyle,
+    textTransform,
+    fontFamily,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    lineHeight
+  };
+}, "getTextSize");
+export {
+  getTextSize
+};

package/dist/jsx/helpers/insertStyleRule.js

@@ -79,6 +79,7 @@ function insertStyleRule(identifier, rule) {
     return;
   hasInsertedSinceUpdate = true;
   updateInsertedCache(identifier, rule);
+  allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
   sheet == null ? void 0 : sheet.insertRule(rule, sheet.cssRules.length);
 }
 __name(insertStyleRule, "insertStyleRule");

package/dist/jsx/hooks/useId.js

@@ -0,0 +1,34 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../constants/platform";
+let serverHandoffComplete = false;
+let id = 0;
+function genId() {
+  return ++id;
+}
+__name(genId, "genId");
+function useId(providedId) {
+  var _a;
+  if (typeof React.useId === "function") {
+    let id3 = React.useId(providedId);
+    return providedId != null ? providedId : id3;
+  }
+  let initialId = providedId != null ? providedId : serverHandoffComplete ? genId() : null;
+  let [id2, setId] = React.useState(initialId);
+  useIsomorphicLayoutEffect(() => {
+    if (id2 === null) {
+      setId(genId());
+    }
+  }, []);
+  React.useEffect(() => {
+    if (serverHandoffComplete === false) {
+      serverHandoffComplete = true;
+    }
+  }, []);
+  return (_a = providedId != null ? providedId : id2) != null ? _a : void 0;
+}
+__name(useId, "useId");
+export {
+  useId
+};

package/dist/jsx/hooks/useIsTouchDevice.js

@@ -1,14 +1,14 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { useEffect, useState } from "react";
-import { isTouchDevice } from "../constants/platform";
+import { useState } from "react";
+import { isTouchDevice, useIsomorphicLayoutEffect } from "../constants/platform";
 const useIsTouchDevice = /* @__PURE__ */ __name(() => {
   const [touchOnly, setTouchOnly] = useState(false);
-  if (isTouchDevice) {
-    useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
+    if (isTouchDevice) {
       setTouchOnly(true);
-    }, []);
-  }
+    }
+  }, []);
   return touchOnly;
 }, "useIsTouchDevice");
 export {

package/dist/jsx/hooks/useMedia.js

@@ -86,7 +86,6 @@ const useMedia = /* @__PURE__ */ __name(() => {
     }
     for (const key in st.nextSelections) {
       if (!(key in st.selections)) {
-        console.log("lsiten", key);
         addMediaQueryListener(key, forceUpdate);
       }
     }

package/dist/jsx/index.js

@@ -13,31 +13,34 @@ import { getHasConfigured, getConfig, getThemes, getTokens, onConfiguredOnce } f
 export * from "./constants/constants";
 export * from "./constants/platform";
 export * from "./constants/rnw";
+export * from "./helpers/getButtonSize";
 export * from "./helpers/getExpandedShorthands";
 export * from "./helpers/getSize";
 export * from "./helpers/getSplitStyles";
 export * from "./helpers/getStylesAtomic";
+export * from "./helpers/getTextSize";
 export * from "./helpers/isObj";
 export * from "./helpers/isTamaguiElement";
 export * from "./helpers/matchMedia";
 export * from "./helpers/themeable";
 export * from "./helpers/withStaticProperties";
 export * from "./contexts/ButtonInsideButtonContext";
-export * from "./hooks/useIsTouchDevice";
 export * from "./hooks/useConstant";
-export * from "./hooks/usePressable";
+export * from "./hooks/useId";
+export * from "./hooks/useIsMounted";
+export * from "./hooks/useIsTouchDevice";
 export * from "./hooks/useMedia";
+export * from "./hooks/usePressable";
 export * from "./hooks/useTheme";
-export * from "./hooks/useIsMounted";
 export * from "./hooks/useUnmountEffect";
-export * from "@tamagui/use-force-update";
 export * from "./views/Stack";
 export * from "./views/Text";
+export * from "./views/TextAncestorContext";
 export * from "./views/Theme";
-export * from "./views/ThemeReset";
 export * from "./views/ThemeInverse";
 export * from "./views/ThemeProvider";
-export * from "./views/TextAncestorContext";
+export * from "./views/ThemeReset";
+export * from "@tamagui/use-force-update";
 export * from "@tamagui/helpers";
 export {
   RNWTextProps,

package/dist/jsx/styled.js

@@ -5,14 +5,16 @@ import { createComponent } from "./createComponent";
 import { RNComponents } from "./helpers/RNComponents";
 function styled(Component, options, staticExtractionOptions) {
   const staticConfigProps = (() => {
+    var _a;
     if (options) {
       const { variants, name, defaultVariants, ...defaultProps } = options;
       if (defaultVariants) {
         Object.assign(defaultProps, defaultVariants);
       }
       const isReactNativeWeb = "staticConfig" in Component ? Component.staticConfig.isReactNativeWeb : RNComponents.has(Component);
+      const reactNativeWebComponent = isReactNativeWeb ? ((_a = Component["staticConfig"]) == null ? void 0 : _a.reactNativeWebComponent) || Component : null;
       const isTamagui = !isReactNativeWeb && "staticConfig" in Component;
-      const Comp = Component;
+      const Comp = reactNativeWebComponent || Component;
       const isImage = !!(defaultProps.isImage || (!isTamagui ? Comp === Image : false));
       const isInput = !!(defaultProps.isInput || (!isTamagui ? Comp === TextInput : false));
       const isText = !!(defaultProps.isText || (!isTamagui ? isInput || Comp === Text : false));
@@ -27,6 +29,7 @@ function styled(Component, options, staticExtractionOptions) {
         defaultVariants,
         componentName: name,
         isReactNativeWeb,
+        reactNativeWebComponent,
         isInput,
         isText,
         isImage