@tamagui/core 1.0.1-beta.192 → 1.0.1-beta.194

package/dist/cjs/createComponent.js

@@ -26,34 +26,30 @@ var createComponent_exports = {};
 __export(createComponent_exports, {
   Spacer: () => Spacer,
   Unspaced: () => Unspaced,
-  accessibilityRoleToWebRole: () => accessibilityRoleToWebRole,
   createComponent: () => createComponent,
   mouseUps: () => mouseUps,
-  processIDRefList: () => processIDRefList,
   spacedChildren: () => spacedChildren
 });
 module.exports = __toCommonJS(createComponent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose_refs = require("@tamagui/compose-refs");
 var import_constants = require("@tamagui/constants");
 var import_helpers = require("@tamagui/helpers");
-var import_rnw = require("@tamagui/rnw");
+var import_react_native_use_responder_events = require("@tamagui/react-native-use-responder-events");
 var import_use_force_update = require("@tamagui/use-force-update");
 var import_react = __toESM(require("react"));
-var import_react_native = require("react-native");
 var import_config = require("./config");
 var import_constants2 = require("./constants/constants");
 var import_FontLanguageContext = require("./contexts/FontLanguageContext");
 var import_TextAncestorContext = require("./contexts/TextAncestorContext");
-var import_assignNativePropsToWeb = require("./helpers/assignNativePropsToWeb");
-var import_createPropMapper = require("./helpers/createPropMapper");
 var import_extendStaticConfig = require("./helpers/extendStaticConfig");
 var import_getSplitStyles = require("./helpers/getSplitStyles");
 var import_insertStyleRule = require("./helpers/insertStyleRule");
 var import_mergeProps = require("./helpers/mergeProps");
 var import_proxyThemeVariables = require("./helpers/proxyThemeVariables");
 var import_useShallowSetState = require("./helpers/useShallowSetState");
+var import_useElementLayout = require("./hooks/useElementLayout");
 var import_useMedia = require("./hooks/useMedia");
-var import_usePressable = require("./hooks/usePressable");
 var import_useServerHooks = require("./hooks/useServerHooks");
 var import_useTheme = require("./hooks/useTheme");
 var import_Pressability = require("./vendor/Pressability");
@@ -61,6 +57,11 @@ var import_Slot = require("./views/Slot");
 var import_Theme = require("./views/Theme");
 import_react.default["keep"];
 let defaultComponentState = null;
+let defaultComponentStateMounted = null;
+let tamaguiConfig;
+let AnimatedText;
+let AnimatedView;
+let initialTheme;
 const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   const cancelTouches = () => {
@@ -76,8 +77,13 @@ function mergeShorthands({ defaultProps }, { shorthands }) {
     defaultProps[shorthands[key] || key] = defaultProps[key];
   }
 }
-let initialTheme;
-let config;
+let BaseText;
+let BaseView;
+if (process.env.TAMAGUI_TARGET === "native") {
+  const native = require("react-native");
+  BaseText = native.Text || native.default.Text;
+  BaseView = native.View || native.default.View;
+}
 function createComponent(configIn, ParentComponent) {
   const staticConfig = (() => {
     const next = (0, import_extendStaticConfig.extendStaticConfig)(configIn, ParentComponent);
@@ -88,10 +94,7 @@ function createComponent(configIn, ParentComponent) {
     }
   })();
   const defaultComponentClassName = `is_${staticConfig.componentName}`;
-  let tamaguiConfig;
-  let AnimatedText;
-  let AnimatedView;
-  let avoidClassesWhileAnimating = true;
+  const avoidClassesWhileAnimating = true;
   let defaultNativeStyle;
   let tamaguiDefaultProps;
   let initialSplitStyles;
@@ -108,10 +111,26 @@ function createComponent(configIn, ParentComponent) {
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
     const forceUpdate = (0, import_use_force_update.useForceUpdate)();
-    config = config || (0, import_config.getConfig)();
     const theme = (0, import_useTheme.useTheme)(props.theme, componentName, props, forceUpdate);
-    const states = (0, import_useServerHooks.useServerState)(defaultComponentState);
+    const hasEnterStyle = !!props.enterStyle;
+    const needsMount = Boolean((import_constants.isWeb ? import_constants.isClient : true) && (hasEnterStyle || props.animation));
+    const states = (0, import_useServerHooks.useServerState)(
+      needsMount ? defaultComponentState : defaultComponentStateMounted
+    );
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
+    const setState = states[1];
+    const setStateShallow = (0, import_useShallowSetState.useShallowSetState)(setState);
+    const shouldSetMounted = needsMount && !state.mounted;
+    const setMounted = shouldSetMounted ? () => {
+      setTimeout(
+        () => {
+          setStateShallow({
+            mounted: true
+          });
+        },
+        import_constants.isWeb ? 10 : 0
+      );
+    } : void 0;
     const shouldAvoidClasses = !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
     const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(import_constants.isWeb && isText ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false);
@@ -127,25 +146,41 @@ function createComponent(configIn, ParentComponent) {
       resolveVariablesAs: "value"
     };
     const languageContext = import_constants.isRSC ? null : (0, import_react.useContext)(import_FontLanguageContext.FontLanguageContext);
+    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
+    const nextIsAnimated = !!(useAnimations && props.animation);
+    const isAnimated = nextIsAnimated || state.hasAnimation;
+    if (nextIsAnimated && !state.hasAnimation) {
+      setStateShallow({ hasAnimation: true });
+    }
+    const isTaggable = !Component || typeof Component === "string";
+    const element = import_constants.isWeb ? isTaggable ? props.tag || Component : Component : Component;
+    const BaseTextComponent = BaseText || element || "span";
+    const BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
+    let elementType = isText ? (isAnimated ? AnimatedText : null) || BaseTextComponent : (isAnimated ? AnimatedView : null) || BaseViewComponent;
+    elementType = Component || elementType;
+    const isStringElement = typeof elementType === "string";
     const splitStyles = (0, import_getSplitStyles.useSplitStyles)(
       props,
       staticConfig,
       theme,
       splitStyleState,
-      props.asChild ? null : initialSplitStyles == null ? void 0 : initialSplitStyles.classNames,
+      props.asChild ? null : initialSplitStyles,
       languageContext || void 0,
+      elementType,
       debugProp
     );
     const hostRef = (0, import_useServerHooks.useServerRef)(null);
-    const setState = states[1];
-    const setStateShallow = (0, import_useShallowSetState.useShallowSetState)(setState);
+    const isReactNativeWeb = Boolean(
+      staticConfig.isReactNativeWeb || isAnimated && tamaguiConfig.animations.isReactNativeWeb
+    );
+    const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating;
     if (process.env.NODE_ENV === "development") {
       if (!process.env.TAMAGUI_TARGET) {
         console.error(`No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`);
       }
       if (debugProp) {
         const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
-        const type = staticConfig.isReactNativeWeb ? "rnw" : "tamagui";
+        const type = isReactNativeWeb ? "rnw" : "tamagui";
         const banner = `${name} ${propsIn["data-is"] || ""} ${type}`;
         console.group(`%c \u{1F41B} ${banner}`, "background: yellow;");
         console.groupCollapsed("initial props/state");
@@ -169,42 +204,11 @@ function createComponent(configIn, ParentComponent) {
       classNames,
       mediaKeys
     } = splitStyles;
-    (0, import_constants.useIsomorphicLayoutEffect)(() => {
-      if (!mediaKeys.length) {
-        return;
-      }
-      const disposers = [];
-      for (const key of mediaKeys) {
-        disposers.push(
-          (0, import_useMedia.addMediaQueryListener)(key, (next) => {
-            setState((prev) => {
-              if (prev.mediaState[key] !== next) {
-                return {
-                  ...prev,
-                  mediaState: {
-                    ...prev.mediaState,
-                    [key]: next
-                  }
-                };
-              }
-              return prev;
-            });
-          })
-        );
-      }
-      return () => {
-      };
-    }, [mediaKeys.join(",")]);
-    const useAnimations = (_a = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
-    const nextIsAnimated = !!(useAnimations && props.animation);
-    const isAnimated = nextIsAnimated || state.hasAnimation;
-    if (nextIsAnimated && !state.hasAnimation) {
-      setStateShallow({ hasAnimation: true });
-    }
     const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...splitStylesStyle } : null;
     const propsWithAnimation = props;
+    let animationStyles;
     if (!import_constants.isRSC && isAnimated && useAnimations) {
-      const animationState = useAnimations(propsWithAnimation, {
+      const animations = useAnimations(propsWithAnimation, {
         state,
         pseudos,
         onDidAnimate: props.onDidAnimate,
@@ -235,7 +239,6 @@ function createComponent(configIn, ParentComponent) {
             style,
             pseudos.hoverStyle,
             pseudos.focusStyle,
-            pseudos.pressStyle,
             pseudos.pressStyle
           );
           enterStyle && isEntering && merge(style, enterStyle);
@@ -244,21 +247,46 @@ function createComponent(configIn, ParentComponent) {
           state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
           exitStyle && isExiting && merge(style, exitStyle);
           if (process.env.NODE_ENV === "development") {
-            if (debugProp) {
+            if (debugProp === "verbose") {
               console.log("animation style", style);
             }
           }
           return style;
         }
       });
-      if (animationState !== state.animation) {
-        setStateShallow({
-          animation: animationState
-        });
+      if (animations) {
+        animationStyles = animations.style;
       }
     }
+    (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (!mediaKeys.length)
+        return;
+      const disposers = [];
+      for (const key of mediaKeys) {
+        disposers.push(
+          (0, import_useMedia.addMediaQueryListener)(key, (next) => {
+            setState((prev) => {
+              if (prev.mediaState[key] !== next) {
+                return {
+                  ...prev,
+                  mediaState: {
+                    ...prev.mediaState,
+                    [key]: next
+                  }
+                };
+              }
+              return prev;
+            });
+          })
+        );
+      }
+      return () => {
+        for (const disposer of disposers) {
+          disposer();
+        }
+      };
+    }, [mediaKeys.join(",")]);
     const {
-      tag,
       hitSlop,
       asChild,
       children,
@@ -283,30 +311,9 @@ function createComponent(configIn, ParentComponent) {
       defaultVariants,
       ...nonTamaguiProps
     } = viewPropsIn;
-    const isTaggable = !Component || typeof Component === "string";
-    const element = import_constants.isWeb ? isTaggable ? tag || Component : Component : Component;
-    const BaseTextComponent = !import_constants.isWeb ? import_react_native.Text : element || "span";
-    const BaseViewComponent = !import_constants.isWeb ? import_react_native.View : element || (hasTextAncestor ? "span" : "div");
-    let elementType = isText ? (isAnimated ? AnimatedText || import_react_native.Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || import_react_native.View : null) || BaseViewComponent;
-    elementType = Component || elementType;
-    const isStringElement = typeof elementType === "string";
     const disabled = props.accessibilityState != null && props.accessibilityState.disabled === true || props.accessibilityDisabled;
     let viewProps;
-    const hasEnterStyle = !!props.enterStyle;
-    const shouldSetMounted = Boolean(
-      (import_constants.isWeb ? import_constants.isClient : true) && (hasEnterStyle || props.animation) && !state.mounted
-    );
-    const setMounted = shouldSetMounted ? () => {
-      setTimeout(
-        () => {
-          setStateShallow({
-            mounted: true
-          });
-        },
-        import_constants.isWeb ? 10 : 0
-      );
-    } : void 0;
-    if (process.env.TAMAGUI_TARGET === "web" && !staticConfig.isReactNativeWeb) {
+    if (process.env.TAMAGUI_TARGET === "web" && !isReactNativeWeb) {
       const {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
@@ -324,66 +331,18 @@ function createComponent(configIn, ParentComponent) {
         onSelectionChangeShouldSetResponderCapture,
         onStartShouldSetResponder,
         onStartShouldSetResponderCapture,
-        nativeID,
-        accessibilityActiveDescendant,
-        accessibilityAtomic,
-        accessibilityAutoComplete,
-        accessibilityBusy,
-        accessibilityChecked,
-        accessibilityColumnCount,
-        accessibilityColumnIndex,
-        accessibilityColumnSpan,
-        accessibilityControls,
-        accessibilityCurrent,
-        accessibilityDescribedBy,
-        accessibilityDetails,
-        accessibilityDisabled,
-        accessibilityErrorMessage,
-        accessibilityExpanded,
-        accessibilityFlowTo,
-        accessibilityHasPopup,
-        accessibilityHidden,
-        accessibilityInvalid,
-        accessibilityKeyShortcuts,
-        accessibilityLabel,
-        accessibilityLabelledBy,
-        accessibilityLevel,
-        accessibilityLiveRegion,
-        accessibilityModal,
-        accessibilityMultiline,
-        accessibilityMultiSelectable,
-        accessibilityOrientation,
-        accessibilityOwns,
-        accessibilityPlaceholder,
-        accessibilityPosInSet,
-        accessibilityPressed,
-        accessibilityReadOnly,
-        accessibilityRequired,
-        accessibilityRole,
-        accessibilityRoleDescription,
-        accessibilityRowCount,
-        accessibilityRowIndex,
-        accessibilityRowSpan,
-        accessibilitySelected,
-        accessibilitySetSize,
-        accessibilitySort,
-        accessibilityValueMax,
-        accessibilityValueMin,
-        accessibilityValueNow,
-        accessibilityValueText,
-        accessible,
-        accessibilityState,
-        accessibilityValue,
         collapsable,
         focusable,
+        accessible,
+        accessibilityDisabled,
         onLayout,
         ...webProps
       } = nonTamaguiProps;
       viewProps = webProps;
-      (0, import_assignNativePropsToWeb.assignNativePropsToWeb)(elementType, viewProps, nonTamaguiProps);
       if (!import_constants.isRSC) {
-        (0, import_rnw.useElementLayout)(hostRef, onLayout);
-        (0, import_rnw.useResponderEvents)(hostRef, {
+        usePlatformMethods(hostRef);
+        (0, import_useElementLayout.useElementLayout)(hostRef, onLayout);
+        (0, import_react_native_use_responder_events.useResponderEvents)(hostRef, {
           onMoveShouldSetResponder,
           onMoveShouldSetResponderCapture,
           onResponderEnd,
@@ -401,9 +360,6 @@ function createComponent(configIn, ParentComponent) {
           onStartShouldSetResponder,
           onStartShouldSetResponderCapture
         });
-        const platformMethodsRef = (0, import_rnw.usePlatformMethods)(viewProps);
-        const setRef = (0, import_rnw.useMergeRefs)(hostRef, platformMethodsRef, forwardedRef, setMounted);
-        viewProps.ref = setRef;
       }
       if (props.href != void 0 && hrefAttrs != void 0) {
         const { download, rel, target } = hrefAttrs;
@@ -436,10 +392,8 @@ function createComponent(configIn, ParentComponent) {
       }
     } else {
       viewProps = nonTamaguiProps;
-      if (forwardedRef) {
-        viewProps.ref = forwardedRef;
-      }
     }
+    viewProps.ref = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef, setMounted);
     if (process.env.NODE_ENV === "development" && !isText && import_constants.isWeb && !staticConfig.isHOC) {
       import_react.Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
@@ -461,7 +415,6 @@ function createComponent(configIn, ParentComponent) {
       }, [unPress]);
     }
     let styles;
-    const animationStyles = state.animation ? state.animation.style : null;
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = {
         ...defaultNativeStyle,
@@ -487,34 +440,23 @@ function createComponent(configIn, ParentComponent) {
         Object.assign(splitStyles.style, next);
       }
     }
+    let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps.fontFamily : null;
+    if (fontFamily && fontFamily[0] === "$") {
+      fontFamily = fontFamily.slice(1);
+    }
+    const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
     if (process.env.TAMAGUI_TARGET === "web") {
-      let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps.fontFamily : null;
-      if (fontFamily && fontFamily[0] === "$") {
-        fontFamily = fontFamily.slice(1);
-      }
-      if (process.env.NODE_ENV === "development") {
-        if (fontFamily == null ? void 0 : fontFamily.startsWith(`var(`)) {
-          console.warn(
-            `Received variable instead of resolved name of font, this is a bug. Please report on Github.`,
-            {
-              fontFamily,
-              props,
-              splitStyles,
-              staticConfig
-            }
-          );
-        }
-      }
       const classList = [
         componentName ? componentClassName : "",
-        fontFamily ? `font_${fontFamily}` : "",
+        fontFamilyClassName,
         theme.className,
         classNames ? Object.values(classNames).join(" ") : ""
       ];
       const className = classList.join(" ");
       const style = animationStyles ?? splitStyles.style;
-      const isAnimatedReactNativeWeb = props.animation && avoidClassesWhileAnimating;
-      if (staticConfig.isReactNativeWeb || isAnimatedReactNativeWeb) {
+      if (isAnimatedReactNativeWeb) {
+        viewProps.style = style;
+      } else if (isReactNativeWeb) {
         const rnwStyle = { $$css: true };
         for (const name of className.split(" ")) {
           rnwStyle[name] = name;
@@ -535,10 +477,8 @@ function createComponent(configIn, ParentComponent) {
       }
     }
     if (process.env.TAMAGUI_TARGET === "native") {
-      const mergedRef = (0, import_rnw.useMergeRefs)(forwardedRef, hostRef, setMounted);
-      viewProps.ref = mergedRef;
       if (splitStyles.fontFamily) {
-        const faceInfo = (_b = config.fontsParsed[splitStyles.fontFamily]) == null ? void 0 : _b.face;
+        const faceInfo = (_b = tamaguiConfig.fontsParsed[splitStyles.fontFamily]) == null ? void 0 : _b.face;
         if (faceInfo) {
           const [weight, style] = (() => {
             var _a2, _b2;
@@ -566,13 +506,10 @@ function createComponent(configIn, ParentComponent) {
     const attachPress = !!((pseudos == null ? void 0 : pseudos.pressStyle) || (initialPseudos == null ? void 0 : initialPseudos.pressStyle) || onPress || onPressOut || onPressIn || onClick);
     const isHoverable = import_constants.isWeb;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const handlesPressEvents = !isStringElement && !asChild;
-    const pressKey = handlesPressEvents ? "onPress" : "onClick";
-    const pressInKey = handlesPressEvents ? "onPressIn" : "onMouseDown";
-    const pressOutKey = handlesPressEvents ? "onPressOut" : "onMouseUp";
+    const handlesPressEvents = !import_constants.isWeb && !asChild;
     const shouldAttach = !asChild && (attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || import_constants.isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
     const events = shouldAttach && !import_constants.isRSC ? {
-      [pressOutKey]: attachPress ? (e) => {
+      onPressOut: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
         onMouseUp == null ? void 0 : onMouseUp(e);
@@ -586,7 +523,7 @@ function createComponent(configIn, ParentComponent) {
           if (state.pressIn) {
             next.press = true;
           }
-          if (Object.keys(next).length) {
+          if (attachHover || state.pressIn) {
             setStateShallow(next);
           }
           onHoverIn == null ? void 0 : onHoverIn(e);
@@ -609,7 +546,7 @@ function createComponent(configIn, ParentComponent) {
           onMouseLeave == null ? void 0 : onMouseLeave(e);
         } : void 0
       },
-      [pressInKey]: attachPress ? (e) => {
+      onPressIn: attachPress ? (e) => {
         setStateShallow({
           press: true,
           pressIn: true,
@@ -620,12 +557,12 @@ function createComponent(configIn, ParentComponent) {
         if (import_constants.isWeb) {
           mouseUps.add(unPress);
         }
-      } : null,
-      [pressKey]: attachPress ? (e) => {
+      } : void 0,
+      onPress: attachPress ? (e) => {
         unPress();
         onClick == null ? void 0 : onClick(e);
         onPress == null ? void 0 : onPress(e);
-      } : null,
+      } : void 0,
       ...!import_constants.isWeb && {
         cancelable: !props.rejectResponderTermination,
         disabled: props.disabled !== null ? props.disabled : (_e = props.accessibilityState) == null ? void 0 : _e.disabled,
@@ -673,28 +610,6 @@ function createComponent(configIn, ParentComponent) {
         onPressOut
       };
     }
-    if (!import_constants.isRSC && import_constants.isWeb) {
-      const [pressableProps] = (0, import_usePressable.usePressable)(
-        events ? {
-          disabled,
-          ...hitSlop && {
-            hitSlop
-          },
-          onPressOut: events[pressOutKey],
-          onPressIn: events[pressInKey],
-          onPress: events[pressKey]
-        } : {
-          disabled: true
-        }
-      );
-      if (events) {
-        if (handlesPressEvents) {
-          Object.assign(viewProps, pressableProps);
-        } else {
-          Object.assign(viewProps, events);
-        }
-      }
-    }
     if (process.env.TAMAGUI_TARGET === "native") {
       const attachFocus = !!(pseudos && pseudos.focusStyle || initialPseudos && initialPseudos.focusStyle);
       if (attachFocus) {
@@ -707,9 +622,6 @@ function createComponent(configIn, ParentComponent) {
       }
       const pressability = (0, import_Pressability.usePressability)(events);
       if (attachPress && events) {
-        const dontComposePressabilityKeys = {
-          onClick: true
-        };
         if (hitSlop) {
           viewProps.hitSlop = hitSlop;
         }
@@ -722,21 +634,23 @@ function createComponent(configIn, ParentComponent) {
     }
     content = (0, import_react.createElement)(elementType, viewProps, childEls);
     if (process.env.TAMAGUI_TARGET === "web") {
-      const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
-      const shouldWrapWithComponentTheme = !!theme.className && isAnimatedRNWView && (0, import_createPropMapper.getReturnVariablesAs)(props, splitStyleState) === "non-color-value";
-      const shouldWrapWithHover = Boolean(events || import_constants.isRSC) && attachHover;
-      if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
-        const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
-        const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
+      if (events) {
+        content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+          style: styleDisplayContents,
+          onMouseEnter: events.onMouseEnter,
+          onMouseLeave: events.onMouseLeave,
+          onClick: events.onPress,
+          onMouseDown: events.onPressIn,
+          onMouseUp: events.onPressOut,
+          onTouchStart: events.onPressIn,
+          onTouchEnd: events.onPressOut,
+          children: content
+        });
+      }
+      if (isText && isAnimatedReactNativeWeb) {
         content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-          className: `${hoverClassName} ${themeClassName}`,
-          style: {
-            display: "contents"
-          },
-          ...events && shouldWrapWithHover && {
-            onMouseEnter: events.onMouseEnter,
-            onMouseLeave: events.onMouseLeave
-          },
+          className: fontFamilyClassName,
+          style: styleDisplayContents,
           children: content
         });
       }
@@ -762,49 +676,47 @@ function createComponent(configIn, ParentComponent) {
     component.displayName = staticConfig.componentName;
   }
   (0, import_config.onConfiguredOnce)((conf) => {
-    if (!defaultComponentState) {
-      defaultComponentState = Object.freeze({
-        hover: false,
-        press: false,
-        pressIn: false,
-        focus: false,
-        mounted: false,
-        animation: null,
-        mediaState: (0, import_useMedia.getInitialMediaState)()
-      });
-    }
-    if (process.env.IS_STATIC === "is_static")
-      return;
-    tamaguiConfig = conf;
-    mergeShorthands(staticConfig, tamaguiConfig);
-    if (tamaguiConfig.animations) {
-      avoidClassesWhileAnimating = !!tamaguiConfig.animations.avoidClasses;
-      AnimatedText = tamaguiConfig.animations.Text;
-      AnimatedView = tamaguiConfig.animations.View;
-    }
-    if (!initialTheme) {
-      const next = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-      initialTheme = (0, import_proxyThemeVariables.proxyThemeVariables)(next);
-      if (!initialTheme && process.env.NODE_ENV === "development") {
-        console.log(`Warning: Missing theme`);
+    if (!tamaguiConfig) {
+      tamaguiConfig = conf;
+      if (!defaultComponentState) {
+        defaultComponentState = {
+          hover: false,
+          press: false,
+          pressIn: false,
+          focus: false,
+          mounted: false,
+          mediaState: (0, import_useMedia.getInitialMediaState)()
+        };
+        defaultComponentStateMounted = {
+          ...defaultComponentState,
+          mounted: true
+        };
+      }
+      if (tamaguiConfig.animations) {
+        AnimatedText = tamaguiConfig.animations.Text;
+        AnimatedView = tamaguiConfig.animations.View;
+      }
+      if (!initialTheme) {
+        const next = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
+        initialTheme = (0, import_proxyThemeVariables.proxyThemeVariables)(next);
+        if (!initialTheme && process.env.NODE_ENV === "development") {
+          console.log(`Warning: Missing theme`);
+        }
       }
     }
-    config = (0, import_config.getConfig)();
+    mergeShorthands(staticConfig, tamaguiConfig);
     let defaultPropsIn = staticConfig.defaultProps || {};
     const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
-    if (config.defaultProps && parentNames && staticConfig.componentName) {
+    if (tamaguiConfig.defaultProps && parentNames && staticConfig.componentName) {
       defaultPropsIn = mergeConfigDefaultProps(
         staticConfig.componentName,
         defaultPropsIn,
-        config.defaultProps,
+        tamaguiConfig.defaultProps,
         parentNames,
-        conf
+        tamaguiConfig
       );
     }
     const debug = defaultPropsIn["debug"];
-    if (process.env.NODE_ENV === "development" && debug === "break") {
-      debugger;
-    }
     const [parentProps, parentClassNames] = (0, import_mergeProps.mergeProps)(defaultPropsIn, {}, true);
     initialSplitStyles = (0, import_getSplitStyles.insertSplitStyles)(
       parentProps,
@@ -932,9 +844,6 @@ const Spacer = createComponent({
       },
       both: {}
     }
-  },
-  defaultVariants: {
-    direction: "both"
   }
 });
 function spacedChildren({
@@ -980,7 +889,7 @@ function spacedChildren({
         if (hasSpace) {
           final.push(
             createSpacer({
-              key: `_${index}_before_sep_spacer`,
+              key: `_${index}_00tmgui`,
               direction,
               space,
               spaceFlex
@@ -993,7 +902,7 @@ function spacedChildren({
         if (hasSpace) {
           final.push(
             createSpacer({
-              key: `_${index}_after_sep_spacer`,
+              key: `_${index}01tmgui`,
               direction,
               space,
               spaceFlex
@@ -1003,7 +912,7 @@ function spacedChildren({
       } else {
         final.push(
           createSpacer({
-            key: `_${index}_spacer`,
+            key: `_${index}02tmgui`,
             direction,
             space,
             spaceFlex
@@ -1027,37 +936,6 @@ function isUnspaced(child) {
   var _a, _b;
   return ((_a = child == null ? void 0 : child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) || ((_b = child == null ? void 0 : child["type"]) == null ? void 0 : _b["isUnspaced"]);
 }
-function AbsoluteFill(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, {
-    pointerEvents: "box-none",
-    style: absoluteFill,
-    children: props.children
-  });
-}
-const absoluteFill = {
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0
-};
-function processIDRefList(idRefList) {
-  return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;
-}
-const accessibilityRoleToWebRole = {
-  adjustable: "slider",
-  button: "button",
-  header: "heading",
-  image: "img",
-  imagebutton: null,
-  keyboardkey: null,
-  label: null,
-  link: "link",
-  none: "presentation",
-  search: "search",
-  summary: "region",
-  text: null
-};
 function addPseudoToStyles(styles, initialPseudos, pseudos, name, force = false) {
   const pseudoStyle = pseudos[name];
   const shouldNestObject = import_constants.isWeb && name !== "enterStyle" && name !== "exitStyle";
@@ -1158,14 +1036,48 @@ function merge(base, next) {
     }
   }
 }
+function usePlatformMethods(hostRef) {
+  (0, import_constants.useIsomorphicLayoutEffect)(() => {
+    const node = hostRef.current;
+    if (!node)
+      return;
+    node.measure = (callback) => (0, import_useElementLayout.measureLayout)(node, null, callback);
+    node.measureLayout = (relativeToNode, success) => (0, import_useElementLayout.measureLayout)(node, relativeToNode, success);
+    node.measureInWindow = (callback) => {
+      if (!node)
+        return;
+      setTimeout(() => {
+        const { height, left, top, width } = (0, import_useElementLayout.getRect)(node);
+        callback(left, top, width, height);
+      }, 0);
+    };
+  }, [hostRef]);
+}
+const AbsoluteFill = createComponent({
+  componentName: "AbsoluteFill",
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+});
+const styleDisplayContents = {
+  display: "contents"
+};
+const dontComposePressabilityKeys = {
+  onClick: true
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Spacer,
   Unspaced,
-  accessibilityRoleToWebRole,
   createComponent,
   mouseUps,
-  processIDRefList,
   spacedChildren
 });
 //# sourceMappingURL=createComponent.js.map