@tamagui/core 1.0.1-beta.193 → 1.0.1-beta.195

package/dist/esm/createComponent.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@tamagui/compose-refs";
 import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
 import {
   composeEventHandlers,
@@ -6,12 +7,7 @@ import {
   validPseudoKeys,
   validStyles
 } from "@tamagui/helpers";
-import {
-  useElementLayout,
-  useMergeRefs,
-  usePlatformMethods,
-  useResponderEvents
-} from "@tamagui/rnw";
+import { useResponderEvents } from "@tamagui/react-native-use-responder-events";
 import { useForceUpdate } from "@tamagui/use-force-update";
 import React, {
   Children,
@@ -23,13 +19,10 @@ import React, {
   useContext,
   useEffect
 } from "react";
-import { Text, View } from "react-native";
-import { getConfig, onConfiguredOnce } from "./config";
+import { onConfiguredOnce } from "./config";
 import { stackDefaultStyles } from "./constants/constants";
 import { FontLanguageContext } from "./contexts/FontLanguageContext";
 import { TextAncestorContext } from "./contexts/TextAncestorContext";
-import { assignNativePropsToWeb } from "./helpers/assignNativePropsToWeb";
-import { getReturnVariablesAs } from "./helpers/createPropMapper";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
 import {
   getSubStyle,
@@ -40,8 +33,8 @@ import { getAllSelectors } from "./helpers/insertStyleRule";
 import { mergeProps } from "./helpers/mergeProps";
 import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { useShallowSetState } from "./helpers/useShallowSetState";
+import { getRect, measureLayout, useElementLayout } from "./hooks/useElementLayout";
 import { addMediaQueryListener, getInitialMediaState } from "./hooks/useMedia";
-import { usePressable } from "./hooks/usePressable";
 import { useServerRef, useServerState } from "./hooks/useServerHooks";
 import { getThemeManager, useTheme } from "./hooks/useTheme";
 import { usePressability } from "./vendor/Pressability";
@@ -49,6 +42,11 @@ import { Slot, mergeEvent } from "./views/Slot";
 import { wrapThemeManagerContext } from "./views/Theme";
 React["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 = () => {
@@ -64,8 +62,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 = extendStaticConfig(configIn, ParentComponent);
@@ -76,10 +79,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;
@@ -96,10 +96,26 @@ function createComponent(configIn, ParentComponent) {
     const componentName = props.componentName || staticConfig.componentName;
     const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
     const forceUpdate = useForceUpdate();
-    config = config || getConfig();
     const theme = useTheme(props.theme, componentName, props, forceUpdate);
-    const states = useServerState(defaultComponentState);
+    const hasEnterStyle = !!props.enterStyle;
+    const needsMount = Boolean((isWeb ? isClient : true) && (hasEnterStyle || props.animation));
+    const states = useServerState(
+      needsMount ? defaultComponentState : defaultComponentStateMounted
+    );
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
+    const setState = states[1];
+    const setStateShallow = useShallowSetState(setState);
+    const shouldSetMounted = needsMount && !state.mounted;
+    const setMounted = shouldSetMounted ? () => {
+      setTimeout(
+        () => {
+          setStateShallow({
+            mounted: true
+          });
+        },
+        isWeb ? 10 : 0
+      );
+    } : void 0;
     const shouldAvoidClasses = !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
     const shouldForcePseudo = !!propsIn.forceStyle;
     const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false);
@@ -115,25 +131,41 @@ function createComponent(configIn, ParentComponent) {
       resolveVariablesAs: "value"
     };
     const languageContext = isRSC ? null : useContext(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 = 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 = 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 = useServerRef(null);
-    const setState = states[1];
-    const setStateShallow = 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");
@@ -157,42 +189,11 @@ function createComponent(configIn, ParentComponent) {
       classNames,
       mediaKeys
     } = splitStyles;
-    useIsomorphicLayoutEffect(() => {
-      if (!mediaKeys.length) {
-        return;
-      }
-      const disposers = [];
-      for (const key of mediaKeys) {
-        disposers.push(
-          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 (!isRSC && isAnimated && useAnimations) {
-      const animationState = useAnimations(propsWithAnimation, {
+      const animations = useAnimations(propsWithAnimation, {
         state,
         pseudos,
         onDidAnimate: props.onDidAnimate,
@@ -223,7 +224,6 @@ function createComponent(configIn, ParentComponent) {
             style,
             pseudos.hoverStyle,
             pseudos.focusStyle,
-            pseudos.pressStyle,
             pseudos.pressStyle
           );
           enterStyle && isEntering && merge(style, enterStyle);
@@ -232,21 +232,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;
       }
     }
+    useIsomorphicLayoutEffect(() => {
+      if (!mediaKeys.length)
+        return;
+      const disposers = [];
+      for (const key of mediaKeys) {
+        disposers.push(
+          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,
@@ -271,30 +296,9 @@ function createComponent(configIn, ParentComponent) {
       defaultVariants,
       ...nonTamaguiProps
     } = viewPropsIn;
-    const isTaggable = !Component || typeof Component === "string";
-    const element = isWeb ? isTaggable ? tag || Component : Component : Component;
-    const BaseTextComponent = !isWeb ? Text : element || "span";
-    const BaseViewComponent = !isWeb ? View : element || (hasTextAncestor ? "span" : "div");
-    let elementType = isText ? (isAnimated ? AnimatedText || Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || 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(
-      (isWeb ? isClient : true) && (hasEnterStyle || props.animation) && !state.mounted
-    );
-    const setMounted = shouldSetMounted ? () => {
-      setTimeout(
-        () => {
-          setStateShallow({
-            mounted: true
-          });
-        },
-        isWeb ? 10 : 0
-      );
-    } : void 0;
-    if (process.env.TAMAGUI_TARGET === "web" && !staticConfig.isReactNativeWeb) {
+    if (process.env.TAMAGUI_TARGET === "web" && !isReactNativeWeb) {
       const {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
@@ -312,64 +316,16 @@ 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;
-      assignNativePropsToWeb(elementType, viewProps, nonTamaguiProps);
       if (!isRSC) {
+        usePlatformMethods(hostRef);
         useElementLayout(hostRef, onLayout);
         useResponderEvents(hostRef, {
           onMoveShouldSetResponder,
@@ -389,9 +345,6 @@ function createComponent(configIn, ParentComponent) {
           onStartShouldSetResponder,
           onStartShouldSetResponderCapture
         });
-        const platformMethodsRef = usePlatformMethods(viewProps);
-        const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef, setMounted);
-        viewProps.ref = setRef;
       }
       if (props.href != void 0 && hrefAttrs != void 0) {
         const { download, rel, target } = hrefAttrs;
@@ -424,10 +377,8 @@ function createComponent(configIn, ParentComponent) {
       }
     } else {
       viewProps = nonTamaguiProps;
-      if (forwardedRef) {
-        viewProps.ref = forwardedRef;
-      }
     }
+    viewProps.ref = useComposedRefs(hostRef, forwardedRef, setMounted);
     if (process.env.NODE_ENV === "development" && !isText && isWeb && !staticConfig.isHOC) {
       Children.toArray(props.children).forEach((item) => {
         if (typeof item === "string") {
@@ -449,7 +400,6 @@ function createComponent(configIn, ParentComponent) {
       }, [unPress]);
     }
     let styles;
-    const animationStyles = state.animation ? state.animation.style : null;
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = {
         ...defaultNativeStyle,
@@ -475,41 +425,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 (isAnimatedReactNativeWeb) {
         viewProps.style = style;
-        viewProps.dataSet = {
-          ...viewProps.dataSet,
-          className,
-          id: props.id
-        };
-      } else if (staticConfig.isReactNativeWeb) {
+      } else if (isReactNativeWeb) {
         const rnwStyle = { $$css: true };
         for (const name of className.split(" ")) {
           rnwStyle[name] = name;
@@ -530,10 +462,8 @@ function createComponent(configIn, ParentComponent) {
       }
     }
     if (process.env.TAMAGUI_TARGET === "native") {
-      const mergedRef = 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;
@@ -561,13 +491,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 = 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 = !isWeb && !asChild;
     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 events = shouldAttach && !isRSC ? {
-      [pressOutKey]: attachPress ? (e) => {
+      onPressOut: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
         onMouseUp == null ? void 0 : onMouseUp(e);
@@ -581,7 +508,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);
@@ -604,7 +531,7 @@ function createComponent(configIn, ParentComponent) {
           onMouseLeave == null ? void 0 : onMouseLeave(e);
         } : void 0
       },
-      [pressInKey]: attachPress ? (e) => {
+      onPressIn: attachPress ? (e) => {
         setStateShallow({
           press: true,
           pressIn: true,
@@ -615,12 +542,12 @@ function createComponent(configIn, ParentComponent) {
         if (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,
       ...!isWeb && {
         cancelable: !props.rejectResponderTermination,
         disabled: props.disabled !== null ? props.disabled : (_e = props.accessibilityState) == null ? void 0 : _e.disabled,
@@ -668,28 +595,6 @@ function createComponent(configIn, ParentComponent) {
         onPressOut
       };
     }
-    if (!isRSC && isWeb) {
-      const [pressableProps] = 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) {
@@ -702,9 +607,6 @@ function createComponent(configIn, ParentComponent) {
       }
       const pressability = usePressability(events);
       if (attachPress && events) {
-        const dontComposePressabilityKeys = {
-          onClick: true
-        };
         if (hitSlop) {
           viewProps.hitSlop = hitSlop;
         }
@@ -717,21 +619,23 @@ function createComponent(configIn, ParentComponent) {
     }
     content = createElement(elementType, viewProps, childEls);
     if (process.env.TAMAGUI_TARGET === "web") {
-      const isAnimatedRNWView = isAnimated && typeof elementType !== "string";
-      const shouldWrapWithComponentTheme = !!theme.className && isAnimatedRNWView && getReturnVariablesAs(props, splitStyleState) === "non-color-value";
-      const shouldWrapWithHover = Boolean(events || isRSC) && attachHover;
-      if (shouldWrapWithHover || shouldWrapWithComponentTheme) {
-        const themeClassName = shouldWrapWithComponentTheme ? `${theme.className}` : "";
-        const hoverClassName = shouldWrapWithHover ? "t_Hoverable" : "";
+      if (events) {
+        content = /* @__PURE__ */ 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__ */ jsx("span", {
-          className: `${hoverClassName} ${themeClassName}`,
-          style: {
-            display: "contents"
-          },
-          ...events && shouldWrapWithHover && {
-            onMouseEnter: events.onMouseEnter,
-            onMouseLeave: events.onMouseLeave
-          },
+          className: fontFamilyClassName,
+          style: styleDisplayContents,
           children: content
         });
       }
@@ -757,52 +661,50 @@ function createComponent(configIn, ParentComponent) {
     component.displayName = staticConfig.componentName;
   }
   onConfiguredOnce((conf) => {
-    if (!defaultComponentState) {
-      defaultComponentState = Object.freeze({
-        hover: false,
-        press: false,
-        pressIn: false,
-        focus: false,
-        mounted: false,
-        animation: null,
-        mediaState: 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 = 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: 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 = proxyThemeVariables(next);
+        if (!initialTheme && process.env.NODE_ENV === "development") {
+          console.log(`Warning: Missing theme`);
+        }
       }
     }
-    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] = mergeProps(defaultPropsIn, {}, true);
+    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {}, true);
     initialSplitStyles = insertSplitStyles(
-      parentProps,
+      ourProps,
       staticConfig,
       initialTheme,
       {
@@ -825,9 +727,9 @@ function createComponent(configIn, ParentComponent) {
       true
     );
     initialSplitStyles.classNames = {
-      ...parentClassNames,
       ...defaultsClassnames,
-      ...initialSplitStyles.classNames
+      ...initialSplitStyles.classNames,
+      ...ourClassNames
     };
     defaultNativeStyle = {};
     const validStyles2 = staticConfig.validStyles || stylePropsView;
@@ -854,7 +756,12 @@ function createComponent(configIn, ParentComponent) {
           tamaguiDefaultProps,
           defaultNativeStyle,
           defaults: defaults2,
-          defaultPropsIn
+          defaultPropsIn,
+          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
+          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [k, defaultPropsIn[k]]),
+          ourProps,
+          ourClassNames,
+          defaultsClassnames
         });
       }
     }
@@ -927,9 +834,6 @@ const Spacer = createComponent({
       },
       both: {}
     }
-  },
-  defaultVariants: {
-    direction: "both"
   }
 });
 function spacedChildren({
@@ -975,7 +879,7 @@ function spacedChildren({
         if (hasSpace) {
           final.push(
             createSpacer({
-              key: `_${index}_before_sep_spacer`,
+              key: `_${index}_00tmgui`,
               direction,
               space,
               spaceFlex
@@ -988,7 +892,7 @@ function spacedChildren({
         if (hasSpace) {
           final.push(
             createSpacer({
-              key: `_${index}_after_sep_spacer`,
+              key: `_${index}01tmgui`,
               direction,
               space,
               spaceFlex
@@ -998,7 +902,7 @@ function spacedChildren({
       } else {
         final.push(
           createSpacer({
-            key: `_${index}_spacer`,
+            key: `_${index}02tmgui`,
             direction,
             space,
             spaceFlex
@@ -1022,37 +926,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__ */ jsx(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 = isWeb && name !== "enterStyle" && name !== "exitStyle";
@@ -1153,13 +1026,47 @@ function merge(base, next) {
     }
   }
 }
+function usePlatformMethods(hostRef) {
+  useIsomorphicLayoutEffect(() => {
+    const node = hostRef.current;
+    if (!node)
+      return;
+    node.measure = (callback) => measureLayout(node, null, callback);
+    node.measureLayout = (relativeToNode, success) => measureLayout(node, relativeToNode, success);
+    node.measureInWindow = (callback) => {
+      if (!node)
+        return;
+      setTimeout(() => {
+        const { height, left, top, width } = getRect(node);
+        callback(left, top, width, height);
+      }, 0);
+    };
+  }, [hostRef]);
+}
+const AbsoluteFill = createComponent({
+  componentName: "AbsoluteFill",
+  defaultProps: {
+    ...stackDefaultStyles,
+    flexDirection: "column",
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    pointerEvents: "box-none"
+  }
+});
+const styleDisplayContents = {
+  display: "contents"
+};
+const dontComposePressabilityKeys = {
+  onClick: true
+};
 export {
   Spacer,
   Unspaced,
-  accessibilityRoleToWebRole,
   createComponent,
   mouseUps,
-  processIDRefList,
   spacedChildren
 };
 //# sourceMappingURL=createComponent.js.map