@tamagui/web 1.111.8 → 1.111.9

package/dist/esm/createComponent.native.mjs

@@ -1,969 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { composeRefs } from "@tamagui/compose-refs";
-import { isClient, isServer, isWeb, useIsomorphicLayoutEffect } from "@tamagui/constants";
-import { composeEventHandlers, validStyles } from "@tamagui/helpers";
-import { devConfig, getConfig, onConfiguredOnce } from "./config.native.mjs";
-import { stackDefaultStyles } from "./constants/constants.native.mjs";
-import { isDevTools } from "./constants/isDevTools.native.mjs";
-import { ComponentContext } from "./contexts/ComponentContext.native.mjs";
-import { didGetVariableValue, setDidGetVariableValue } from "./createVariable.native.mjs";
-import { defaultComponentState, defaultComponentStateMounted, defaultComponentStateShouldEnter } from "./defaultComponentState.native.mjs";
-import { createShallowSetState, mergeIfNotShallowEqual } from "./helpers/createShallowSetState.native.mjs";
-import { useSplitStyles } from "./helpers/getSplitStyles.native.mjs";
-import { isObj } from "./helpers/isObj.native.mjs";
-import { log } from "./helpers/log.native.mjs";
-import { mergeProps } from "./helpers/mergeProps.native.mjs";
-import { setElementProps } from "./helpers/setElementProps.native.mjs";
-import { themeable } from "./helpers/themeable.native.mjs";
-import { useDidHydrateOnce } from "./hooks/useDidHydrateOnce.native.mjs";
-import { getMediaState, setMediaShouldUpdate, useMedia } from "./hooks/useMedia.native.mjs";
-import { useThemeWithState } from "./hooks/useTheme.native.mjs";
-import { hooks } from "./setupHooks.native.mjs";
-import { Slot } from "./views/Slot.native.mjs";
-import { getThemedChildren } from "./views/Theme.native.mjs";
-import { ThemeDebug } from "./views/ThemeDebug.native.mjs";
-var tamaguiConfig,
-  time,
-  debugKeyListeners,
-  startVisualizer,
-  componentSetStates = /* @__PURE__ */new Set();
-if (typeof document < "u") {
-  var cancelTouches = function () {
-    componentSetStates.forEach(function (setState) {
-      return setState(function (prev) {
-        return prev.press || prev.pressIn ? {
-          ...prev,
-          press: !1,
-          pressIn: !1
-        } : prev;
-      });
-    }), componentSetStates.clear();
-  };
-  addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = function () {
-    var devVisualizerConfig = devConfig === null || devConfig === void 0 ? void 0 : devConfig.visualizer;
-    if (devVisualizerConfig) {
-      debugKeyListeners = /* @__PURE__ */new Set();
-      var tm,
-        isShowing = !1,
-        options = {
-          key: "Alt",
-          delay: 800,
-          ...(typeof devVisualizerConfig == "object" ? devVisualizerConfig : {})
-        };
-      document.addEventListener("blur", function () {
-        clearTimeout(tm);
-      }), document.addEventListener("keydown", function (param) {
-        var {
-          key,
-          defaultPrevented
-        } = param;
-        defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(function () {
-          isShowing = !0, debugKeyListeners?.forEach(function (l) {
-            return l(!0);
-          });
-        }, options.delay)));
-      }), document.addEventListener("keyup", function (param) {
-        var {
-          key,
-          defaultPrevented
-        } = param;
-        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && debugKeyListeners?.forEach(function (l) {
-          return l(!1);
-        }));
-      });
-    }
-  });
-}
-var useComponentState = function (props, param, staticConfig, config) {
-    var {
-        animationDriver,
-        groups
-      } = param,
-      _animationDriver_usePresence,
-      useAnimations = animationDriver?.useAnimations,
-      stateRef = React.useRef(void 0);
-    stateRef.current || (stateRef.current = {});
-    var hasAnimationProp = !!("animation" in props || props.style && hasAnimatedStyleValue(props.style)),
-      supportsCSSVars = animationDriver?.supportsCSSVars,
-      curStateRef = stateRef.current,
-      willBeAnimatedClient = function () {
-        var next = !!(hasAnimationProp && !staticConfig.isHOC && useAnimations);
-        return !!(next || curStateRef.hasAnimated);
-      }(),
-      willBeAnimated = !isServer && willBeAnimatedClient;
-    willBeAnimated && !curStateRef.hasAnimated && (curStateRef.hasAnimated = !0);
-    var presence = willBeAnimated && props.animatePresence !== !1 && (animationDriver == null || (_animationDriver_usePresence = animationDriver.usePresence) === null || _animationDriver_usePresence === void 0 ? void 0 : _animationDriver_usePresence.call(animationDriver)) || null,
-      presenceState = presence?.[2],
-      isExiting = presenceState?.isPresent === !1,
-      isEntering = presenceState?.isPresent === !0 && presenceState.initial !== !1,
-      hasEnterStyle = !!props.enterStyle,
-      hasRNAnimation = hasAnimationProp && animationDriver?.isReactNative;
-    process.env.NODE_ENV === "development" && time && time`pre-use-state`;
-    var hasEnterState = hasEnterStyle || isEntering,
-      didHydrateOnce = willBeAnimated ? useDidHydrateOnce() : !0,
-      shouldEnter = hasEnterState || !didHydrateOnce && hasRNAnimation,
-      shouldEnterFromUnhydrated = isWeb && !didHydrateOnce,
-      initialState = shouldEnter ?
-      // on the very first render we switch all spring animation drivers to css rendering
-      // this is because we need to use css variables, which they don't support to do proper SSR
-      // without flickers of the wrong colors.
-      // but once we do that initial hydration and we are in client side rendering mode,
-      // we can avoid the extra re-render on mount
-      shouldEnterFromUnhydrated ? defaultComponentState : defaultComponentStateShouldEnter : defaultComponentStateMounted,
-      disabled = isDisabled(props);
-    disabled != null && (initialState.disabled = disabled);
-    var states = React.useState(initialState),
-      state = props.forceStyle ? {
-        ...states[0],
-        [props.forceStyle]: !0
-      } : states[0],
-      setState = states[1],
-      isHydrated = state.unmounted === !1 || state.unmounted === "should-enter",
-      isAnimated = willBeAnimated;
-    isWeb && hasRNAnimation && !staticConfig.isHOC && state.unmounted === !0 && (isAnimated = !1, curStateRef.willHydrate = !0), disabled !== state.disabled && (state.disabled = disabled, disabled && Object.assign(state, defaultComponentStateMounted), setState({
-      ...state
-    }));
-    var setStateShallow = createShallowSetState(setState, disabled, !1, props.debug);
-    if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
-      process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`has presenceState ${JSON.stringify(presenceState)}`);
-      var {
-        enterVariant,
-        exitVariant,
-        enterExitVariant,
-        custom
-      } = presenceState;
-      isObj(custom) && Object.assign(props, custom);
-      var exv = exitVariant ?? enterExitVariant,
-        env = enterVariant ?? enterExitVariant;
-      state.unmounted && env && staticConfig.variants[env] ? (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence ENTER "${env}"`), props[env] = !0) : isExiting && exv && (process.env.NODE_ENV === "development" && props.debug === "verbose" && console.warn(`Animating presence EXIT "${exv}"`), props[exv] = exitVariant !== enterExitVariant);
-    }
-    var shouldAvoidClasses = !isWeb;
-    if (isWeb) {
-      var {
-          disableClassName
-        } = props,
-        isAnimatedAndHydrated = isAnimated && !supportsCSSVars && didHydrateOnce && !isServer,
-        isClassNameDisabled = !staticConfig.acceptsClassName && (config.disableSSR || didHydrateOnce),
-        isDisabledManually = disableClassName && !isServer && didHydrateOnce && state.unmounted === !0;
-      (isAnimatedAndHydrated || isDisabledManually || isClassNameDisabled) && (shouldAvoidClasses = !0, process.env.NODE_ENV === "development" && props.debug && log("avoiding className", {
-        isAnimatedAndHydrated,
-        isDisabledManually,
-        isClassNameDisabled
-      }));
-    }
-    var groupName = props.group;
-    if (groupName && !curStateRef.group) {
-      var listeners = /* @__PURE__ */new Set();
-      curStateRef.group = {
-        listeners,
-        emit(name, state2) {
-          listeners.forEach(function (l) {
-            return l(name, state2);
-          });
-        },
-        subscribe(cb) {
-          return listeners.add(cb), function () {
-            listeners.delete(cb);
-          };
-        }
-      };
-    }
-    if (groupName) {
-      var groupContextState = groups.state,
-        og = setStateShallow;
-      setStateShallow = function (state2) {
-        og(state2), curStateRef.group.emit(groupName, {
-          pseudo: state2
-        });
-        var next = {
-          ...groupContextState[groupName],
-          ...state2
-        };
-        groupContextState[groupName] = next;
-      };
-    }
-    return {
-      curStateRef,
-      disabled,
-      groupName,
-      hasAnimationProp,
-      hasEnterStyle,
-      isAnimated,
-      isExiting,
-      isHydrated,
-      presence,
-      presenceState,
-      setState,
-      setStateShallow,
-      shouldAvoidClasses,
-      state,
-      stateRef,
-      supportsCSSVars,
-      willBeAnimated,
-      willBeAnimatedClient
-    };
-  },
-  BaseText,
-  BaseView,
-  hasSetupBaseViews = !1,
-  lastInteractionWasKeyboard = {
-    value: !1
-  };
-isWeb && globalThis.document && (document.addEventListener("keydown", function () {
-  lastInteractionWasKeyboard.value = !0;
-}), document.addEventListener("mousedown", function () {
-  lastInteractionWasKeyboard.value = !1;
-}), document.addEventListener("mousemove", function () {
-  lastInteractionWasKeyboard.value = !1;
-}));
-function createComponent(staticConfig) {
-  var _staticConfig_defaultProps,
-    {
-      componentName
-    } = staticConfig,
-    config = null,
-    defaultProps = staticConfig.defaultProps;
-  onConfiguredOnce(function (conf) {
-    if (config = conf, componentName) {
-      var _conf_defaultProps,
-        defaultForComponent = (_conf_defaultProps = conf.defaultProps) === null || _conf_defaultProps === void 0 ? void 0 : _conf_defaultProps[componentName];
-      defaultForComponent && (defaultProps = {
-        ...defaultForComponent,
-        ...defaultProps
-      });
-    }
-  });
-  var {
-    Component,
-    isText,
-    isZStack,
-    isHOC,
-    validStyles: _$validStyles = {},
-    variants = {}
-  } = staticConfig;
-  process.env.NODE_ENV === "development" && !((_staticConfig_defaultProps = staticConfig.defaultProps) === null || _staticConfig_defaultProps === void 0) && _staticConfig_defaultProps.debug && process.env.IS_STATIC !== "is_static" && log(`\u{1F41B} [${componentName || "Component"}]`, {
-    staticConfig,
-    defaultProps,
-    defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
-  });
-  var component = /* @__PURE__ */React.forwardRef(function (propsIn, forwardedRef) {
-    var _themeState_state,
-      _hooks_usePropsTransform,
-      _hooks_useEvents,
-      _config_animations,
-      internalID = process.env.NODE_ENV === "development" ? React.useId() : "";
-    if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
-      var _hooks_getBaseViews;
-      hasSetupBaseViews = !0;
-      var baseViews = (_hooks_getBaseViews = hooks.getBaseViews) === null || _hooks_getBaseViews === void 0 ? void 0 : _hooks_getBaseViews.call(hooks);
-      baseViews && (BaseText = baseViews.Text, BaseView = baseViews.View);
-    }
-    if (process.env.NODE_ENV === "test" && propsIn["data-test-renders"]) {
-      var _propsIn_datatestrenders, _current, _;
-      (_ = (_propsIn_datatestrenders = propsIn["data-test-renders"])[_current = "current"]) !== null && _ !== void 0 || (_propsIn_datatestrenders[_current] = 0), propsIn["data-test-renders"].current += 1;
-    }
-    var componentContext = React.useContext(ComponentContext),
-      styledContextProps,
-      overriddenContextProps,
-      contextValue,
-      {
-        context,
-        isReactNative
-      } = staticConfig;
-    if (context) {
-      contextValue = React.useContext(context);
-      var {
-        inverseShorthands
-      } = getConfig();
-      for (var key in context.props) {
-        var _propsIn_key,
-          _ref,
-          _ref1,
-          propVal = (_ref1 = (_ref = (_propsIn_key = propsIn[key]) !== null && _propsIn_key !== void 0 ? _propsIn_key : propsIn[inverseShorthands[key]]) !== null && _ref !== void 0 ? _ref : defaultProps?.[key]) !== null && _ref1 !== void 0 ? _ref1 : defaultProps?.[inverseShorthands[key]];
-        if (propVal === void 0) {
-          var val = contextValue?.[key];
-          val !== void 0 && (styledContextProps || (styledContextProps = {}), styledContextProps[key] = val);
-        } else overriddenContextProps || (overriddenContextProps = {}), overriddenContextProps[key] = propVal;
-      }
-    }
-    var curDefaultProps = styledContextProps ? {
-        ...defaultProps,
-        ...styledContextProps
-      } : defaultProps,
-      props = propsIn;
-    curDefaultProps && (props = mergeProps(curDefaultProps, propsIn));
-    var debugProp = props.debug,
-      componentName2 = props.componentName || staticConfig.componentName;
-    if (process.env.NODE_ENV === "development" && isClient && React.useEffect(function () {
-      var overlay = null,
-        debugVisualizerHandler = function () {
-          var show = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !1,
-            node = curStateRef.host;
-          if (node) if (show) {
-            overlay = document.createElement("span"), overlay.style.inset = "0px", overlay.style.zIndex = "1000000", overlay.style.position = "absolute", overlay.style.borderColor = "red", overlay.style.borderWidth = "1px", overlay.style.borderStyle = "dotted";
-            var dataAt = node.getAttribute("data-at") || "",
-              dataIn = node.getAttribute("data-in") || "",
-              tooltip = document.createElement("span");
-            tooltip.style.position = "absolute", tooltip.style.top = "0px", tooltip.style.left = "0px", tooltip.style.padding = "3px", tooltip.style.background = "rgba(0,0,0,0.75)", tooltip.style.color = "rgba(255,255,255,1)", tooltip.style.fontSize = "12px", tooltip.style.lineHeight = "12px", tooltip.style.fontFamily = "monospace", tooltip.style.webkitFontSmoothing = "none", tooltip.innerText = `${componentName2 || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
-          } else overlay && node.removeChild(overlay);
-        };
-      return debugKeyListeners || (debugKeyListeners = /* @__PURE__ */new Set()), debugKeyListeners.add(debugVisualizerHandler), function () {
-        debugKeyListeners?.delete(debugVisualizerHandler);
-      };
-    }, [componentName2]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
-      var timer = require("@tamagui/timer").timer();
-      time = timer.start();
-    }
-    process.env.NODE_ENV === "development" && time && time`start (ignore)`, process.env.NODE_ENV === "development" && time && time`did-finish-ssr`, process.env.NODE_ENV === "development" && time && time`stateref`;
-    var animationDriver = componentContext.animationDriver,
-      useAnimations = animationDriver?.useAnimations,
-      {
-        curStateRef,
-        disabled,
-        groupName,
-        hasAnimationProp,
-        hasEnterStyle,
-        isAnimated,
-        isExiting,
-        isHydrated,
-        presence,
-        presenceState,
-        setState,
-        setStateShallow,
-        shouldAvoidClasses,
-        state,
-        stateRef,
-        supportsCSSVars,
-        willBeAnimated,
-        willBeAnimatedClient
-      } = useComponentState(props, componentContext, staticConfig, config),
-      shouldForcePseudo = !!propsIn.forceStyle,
-      noClassNames = shouldAvoidClasses || shouldForcePseudo;
-    process.env.NODE_ENV === "development" && time && time`use-state`;
-    var hasTextAncestor = !!(isWeb && isText && componentContext.inText);
-    process.env.NODE_ENV === "development" && time && time`use-context`;
-    var isTaggable = !Component || typeof Component == "string",
-      tagProp = props.tag,
-      element = isWeb && isTaggable && tagProp || Component,
-      BaseTextComponent = BaseText || element || "span",
-      BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div"),
-      elementType = isText ? BaseTextComponent : BaseViewComponent;
-    animationDriver && isAnimated && (elementType = animationDriver[isText ? "Text" : "View"] || elementType);
-    var disableThemeProp = !1,
-      disableTheme = disableThemeProp || isHOC;
-    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (curStateRef.themeShallow = !0);
-    var themeStateProps = {
-      componentName: componentName2,
-      disable: disableTheme,
-      shallow: curStateRef.themeShallow,
-      debug: debugProp
-    };
-    if ("themeInverse" in props && (themeStateProps.inverse = props.themeInverse), "theme" in props && (themeStateProps.name = props.theme), typeof curStateRef.isListeningToTheme == "boolean" && (themeStateProps.shouldUpdate = function () {
-      return stateRef.current.isListeningToTheme;
-    }), themeStateProps.deopt = willBeAnimated, process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      var name = `${componentName2 || Component?.displayName || Component?.name || "[Unnamed Component]"}`,
-        type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (shouldAvoidClasses ? "(shouldAvoidClasses)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (presenceState?.isPresent === !1 ? "(EXIT)" : ""),
-        dataIs = propsIn["data-is"] || "",
-        banner = `${internalID} ${name}${dataIs ? ` ${dataIs}` : ""} ${type}`;
-      if (console.info(`%c ${banner} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`, "background: green; color: white;"), isServer) log({
-        noClassNames,
-        isAnimated,
-        shouldAvoidClasses,
-        isWeb,
-        supportsCSSVars
-      });else {
-        console.groupEnd();
-        var ch = propsIn.children,
-          childLog = typeof ch == "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
-        childLog.length && (childLog = `(children: ${childLog})`), console.groupCollapsed(`${childLog} Props:`), log("props in:", propsIn), log("final props:", props), log({
-          state,
-          staticConfig,
-          elementType,
-          themeStateProps
-        }), log({
-          contextProps: styledContextProps,
-          overriddenContextProps
-        }), log({
-          presence,
-          isAnimated,
-          isHOC,
-          hasAnimationProp,
-          useAnimations
-        }), console.groupEnd();
-      }
-    }
-    process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
-    var [themeState, theme] = useThemeWithState(themeStateProps);
-    elementType = Component || elementType;
-    var isStringElement = typeof elementType == "string";
-    process.env.NODE_ENV === "development" && time && time`theme`;
-    var mediaState = useMedia(stateRef, componentContext, debugProp);
-    setDidGetVariableValue(!1), process.env.NODE_ENV === "development" && time && time`media`;
-    var resolveValues =
-      // if HOC + mounted + has animation prop, resolve as value so it passes non-variable to child
-      isAnimated && !supportsCSSVars || isHOC && state.unmounted == !1 && hasAnimationProp ? "value" : "auto",
-      styleProps = {
-        mediaState,
-        noClassNames,
-        resolveValues,
-        isExiting,
-        isAnimated,
-        willBeAnimated,
-        styledContextProps
-      },
-      splitStyles = useSplitStyles(props, staticConfig, theme, (themeState == null || (_themeState_state = themeState.state) === null || _themeState_state === void 0 ? void 0 : _themeState_state.name) || "", state, styleProps, null, componentContext, elementType, debugProp);
-    if (props.group && props.untilMeasured === "hide" && !curStateRef.hasMeasured) {
-      var _splitStyles;
-      (_splitStyles = splitStyles).style || (_splitStyles.style = {}), splitStyles.style.opacity = 0;
-    }
-    process.env.NODE_ENV === "development" && time && time`split-styles`, curStateRef.isListeningToTheme = splitStyles.dynamicThemeAccess;
-    var hasRuntimeMediaKeys = splitStyles.hasMedia && splitStyles.hasMedia !== !0,
-      shouldListenForMedia = didGetVariableValue() || hasRuntimeMediaKeys || noClassNames && splitStyles.hasMedia === !0,
-      mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
-    process.env.NODE_ENV === "development" && debugProp && console.info("useMedia() createComponent", shouldListenForMedia, mediaListeningKeys), setMediaShouldUpdate(stateRef, {
-      enabled: shouldListenForMedia,
-      keys: mediaListeningKeys
-    });
-    var {
-        viewProps: viewPropsIn,
-        pseudos,
-        style: splitStylesStyle,
-        classNames,
-        space
-      } = splitStyles,
-      propsWithAnimation = props,
-      {
-        asChild,
-        children,
-        themeShallow,
-        spaceDirection: _spaceDirection,
-        onPress,
-        onLongPress,
-        onPressIn,
-        onPressOut,
-        onHoverIn,
-        onHoverOut,
-        onMouseUp,
-        onMouseDown,
-        onMouseEnter,
-        onMouseLeave,
-        onFocus,
-        onBlur,
-        separator,
-        // ignore from here on out
-        forceStyle: _forceStyle,
-        // @ts-ignore  for next/link compat etc
-        onClick,
-        theme: _themeProp,
-        ...nonTamaguiProps
-      } = viewPropsIn,
-      viewProps = nonTamaguiProps;
-    !isTaggable && props.forceStyle && (viewProps.forceStyle = props.forceStyle), isHOC && _themeProp && (viewProps.theme = _themeProp), elementType.acceptTagProp && (viewProps.tag = tagProp);
-    var animationStyles,
-      shouldUseAnimation =
-      // if it supports css vars we run it on server too to get matching initial style
-      (supportsCSSVars ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
-    if (shouldUseAnimation) {
-      var _themeState_state1,
-        animations = useAnimations({
-          props: propsWithAnimation,
-          // if hydrating, send empty style
-          style: splitStylesStyle || {},
-          presence,
-          componentState: state,
-          styleProps,
-          theme: (_themeState_state1 = themeState.state) === null || _themeState_state1 === void 0 ? void 0 : _themeState_state1.theme,
-          pseudos: pseudos || null,
-          staticConfig,
-          stateRef
-        });
-      (isAnimated || supportsCSSVars) && animations && (animationStyles = animations.style, viewProps.style = animationStyles, animations.className && (viewProps.className = `${viewProps.className || ""} ${animations.className}`)), process.env.NODE_ENV === "development" && time && time`animations`;
-    }
-    process.env.NODE_ENV === "development" && props.untilMeasured && !props.group && console.warn(`You set the untilMeasured prop without setting group. This doesn't work, be sure to set untilMeasured on the parent that sets group, not the children that use the $group- prop.
-
-If you meant to do this, you can disable this warning - either change untilMeasured and group at the same time, or do group={conditional ? 'name' : undefined}`), process.env.NODE_ENV === "development" && time && time`destructure`, groupName && (nonTamaguiProps.onLayout = composeEventHandlers(nonTamaguiProps.onLayout, function (e) {
-      stateRef.current.group.emit(groupName, {
-        layout: e.nativeEvent.layout
-      }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState(function (prev) {
-        return {
-          ...prev
-        };
-      }), stateRef.current.hasMeasured = !0;
-    })), viewProps = ((_hooks_usePropsTransform = hooks.usePropsTransform) === null || _hooks_usePropsTransform === void 0 ? void 0 : _hooks_usePropsTransform.call(hooks, elementType, nonTamaguiProps, stateRef, curStateRef.willHydrate)) || nonTamaguiProps, curStateRef.composedRef || (curStateRef.composedRef = composeRefs(function (x) {
-      return stateRef.current.host = x;
-    }, forwardedRef, setElementProps)), viewProps.ref = curStateRef.composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && isWeb && !isHOC && React.Children.toArray(props.children).forEach(function (item) {
-      typeof item == "string" && item !== `
-` && console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
-    }), process.env.NODE_ENV === "development" && time && time`events-hooks`;
-    var {
-        pseudoGroups,
-        mediaGroups
-      } = splitStyles,
-      unPress = function () {
-        return setStateShallow({
-          press: !1,
-          pressIn: !1
-        });
-      };
-    process.env.NODE_ENV === "development" && isWeb && useIsomorphicLayoutEffect(function () {
-      debugProp && (console.groupCollapsed("Rendered style >"), console.warn(getComputedStyle(stateRef.current.host)), console.groupEnd());
-    }), React.useEffect(function () {
-      if (!disabled) {
-        if (state.unmounted === !0 && hasEnterStyle) {
-          setStateShallow({
-            unmounted: "should-enter"
-          });
-          return;
-        }
-        if (state.unmounted) {
-          setStateShallow({
-            unmounted: !1
-          });
-          return;
-        }
-        var dispose = subscribeToContextGroup({
-          disabled,
-          componentContext,
-          setStateShallow,
-          state,
-          mediaGroups,
-          pseudoGroups
-        });
-        return function () {
-          dispose?.(), componentSetStates.delete(setState);
-        };
-      }
-    }, [state.unmounted, disabled, pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0, mediaGroups ? Object.keys([...mediaGroups]).join("") : 0]);
-    var runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle,
-      runtimeFocusStyle = !disabled && noClassNames && pseudos?.focusStyle,
-      runtimeFocusVisibleStyle = !disabled && noClassNames && pseudos?.focusVisibleStyle,
-      attachFocus = !!(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur),
-      attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle),
-      runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle,
-      needsHoverState = !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut),
-      attachHover = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave),
-      shouldAttach = !disabled && !props.asChild && !!(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle),
-      needsPressState = !!(groupName || runtimePressStyle);
-    process.env.NODE_ENV === "development" && time && time`events-setup`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("\u{1FAA9} events()", {
-      runtimeFocusStyle,
-      runtimePressStyle,
-      runtimeHoverStyle,
-      runtimeFocusVisibleStyle,
-      attachPress,
-      attachFocus,
-      attachHover,
-      shouldAttach,
-      needsHoverState
-    });
-    var events = shouldAttach ? {
-      onPressOut: attachPress ? function (e) {
-        unPress(), onPressOut?.(e), onMouseUp?.(e);
-      } : void 0,
-      ...((attachHover || attachPress) && {
-        onMouseEnter: function (e) {
-          var next = {};
-          needsHoverState && (next.hover = !0), needsPressState && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
-        },
-        onMouseLeave: function (e) {
-          var next = {};
-          needsHoverState && (next.hover = !1), needsPressState && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
-        }
-      }),
-      onPressIn: attachPress ? function (e) {
-        (runtimePressStyle || groupName) && setStateShallow({
-          press: !0,
-          pressIn: !0
-        }), onPressIn?.(e), onMouseDown?.(e), isWeb && componentSetStates.add(setState);
-      } : void 0,
-      onPress: attachPress ? function (e) {
-        unPress(), isWeb && onClick?.(e), onPress?.(e);
-      } : void 0,
-      ...(attachPress && onLongPress && {
-        onLongPress: function (e) {
-          unPress(), onLongPress?.(e);
-        }
-      }),
-      ...(attachFocus && {
-        onFocus: function (e) {
-          pseudos?.focusVisibleStyle ? setTimeout(function () {
-            setStateShallow({
-              focus: !0,
-              focusVisible: !!lastInteractionWasKeyboard.value
-            });
-          }, 0) : setStateShallow({
-            focus: !0,
-            focusVisible: !1
-          }), onFocus?.(e);
-        },
-        onBlur: function (e) {
-          setStateShallow({
-            focus: !1,
-            focusVisible: !1
-          }), onBlur?.(e);
-        }
-      })
-    } : null;
-    if (events && !asChild) {
-      var _viewProps_focusable;
-      Object.assign(events, {
-        cancelable: !viewProps.rejectResponderTermination,
-        disabled,
-        hitSlop: viewProps.hitSlop,
-        delayLongPress: viewProps.delayLongPress,
-        delayPressIn: viewProps.delayPressIn,
-        delayPressOut: viewProps.delayPressOut,
-        focusable: (_viewProps_focusable = viewProps.focusable) !== null && _viewProps_focusable !== void 0 ? _viewProps_focusable : !0,
-        minPressDuration: 0
-      });
-    }
-    process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && log("events", {
-      events,
-      attachHover,
-      attachPress
-    }), (_hooks_useEvents = hooks.useEvents) === null || _hooks_useEvents === void 0 || _hooks_useEvents.call(hooks, viewProps, events, splitStyles, setStateShallow, staticConfig);
-    var direction = props.spaceDirection || "both";
-    process.env.NODE_ENV === "development" && time && time`hooks`;
-    var content = !children || asChild ? children : spacedChildren({
-      separator,
-      children,
-      space,
-      direction,
-      isZStack,
-      debug: debugProp
-    });
-    if (asChild) if (elementType = Slot, 0) var webStyleEvents, passEvents;else Object.assign(viewProps, {
-      onPress,
-      onLongPress
-    });
-    process.env.NODE_ENV === "development" && time && time`spaced-as-child`;
-    var useChildrenResult;
-    hooks.useChildren && (useChildrenResult = hooks.useChildren(elementType, content, viewProps, events, staticConfig)), useChildrenResult ? content = useChildrenResult : content = /* @__PURE__ */React.createElement(elementType, viewProps, content);
-    var ResetPresence = config == null || (_config_animations = config.animations) === null || _config_animations === void 0 ? void 0 : _config_animations.ResetPresence;
-    ResetPresence && willBeAnimated && (hasEnterStyle || presenceState) && content && typeof content != "string" && (content = /* @__PURE__ */_jsx(ResetPresence, {
-      children: content
-    })), process.env.NODE_ENV === "development" && time && time`create-element`;
-    var groupState = curStateRef.group,
-      subGroupContext = React.useMemo(function () {
-        var _splitStyles_style, _splitStyles_style1;
-        if (!(!groupState || !groupName)) return groupState.listeners.clear(), {
-          ...componentContext.groups,
-          // change reference so as we mutate it doesn't affect siblings etc
-          state: {
-            ...componentContext.groups.state,
-            [groupName]: {
-              pseudo: defaultComponentStateMounted,
-              // capture just initial width and height if they exist
-              // will have top, left, width, height (not x, y)
-              layout: {
-                width: fromPx((_splitStyles_style = splitStyles.style) === null || _splitStyles_style === void 0 ? void 0 : _splitStyles_style.width),
-                height: fromPx((_splitStyles_style1 = splitStyles.style) === null || _splitStyles_style1 === void 0 ? void 0 : _splitStyles_style1.height)
-              }
-            }
-          },
-          emit: groupState.emit,
-          subscribe: groupState.subscribe
-        };
-      }, [groupName]);
-    if (groupName && subGroupContext && (content = /* @__PURE__ */_jsx(ComponentContext.Provider, {
-      ...componentContext,
-      groups: subGroupContext,
-      children: content
-    })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableTheme ? content : getThemedChildren(themeState, content, themeStateProps, !1, stateRef), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */_jsx(ThemeDebug, {
-      themeState,
-      themeProps: props,
-      children: content
-    })), staticConfig.context) {
-      var contextProps = staticConfig.context.props;
-      for (var key1 in contextProps) if (viewProps.style && key1 in viewProps.style || key1 in viewProps) {
-        var _viewProps_style;
-        overriddenContextProps || (overriddenContextProps = {});
-        var _viewProps_style_key;
-        overriddenContextProps[key1] = (_viewProps_style_key = (_viewProps_style = viewProps.style) === null || _viewProps_style === void 0 ? void 0 : _viewProps_style[key1]) !== null && _viewProps_style_key !== void 0 ? _viewProps_style_key : viewProps[key1];
-      }
-    }
-    if (overriddenContextProps) {
-      var Provider = staticConfig.context.Provider;
-      content = /* @__PURE__ */_jsx(Provider, {
-        ...contextValue,
-        ...overriddenContextProps,
-        children: content
-      });
-    }
-    if (process.env.TAMAGUI_REACT_19 && !1) var rulesToInsert, keys;
-    if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
-      var element1 = typeof elementType == "string" ? elementType : "Component",
-        title = `render <${element1} /> (${internalID}) with props`;
-      if (isWeb) {
-        console.groupCollapsed(title);
-        try {
-          log("viewProps", viewProps), log("children", content), typeof window < "u" && (log("props in", propsIn, "mapped to", props, "in order", Object.keys(props)), log({
-            animationStyles,
-            classNames,
-            content,
-            defaultProps,
-            elementType,
-            events,
-            isAnimated,
-            hasRuntimeMediaKeys,
-            isStringElement,
-            mediaListeningKeys,
-            pseudos,
-            shouldAttach,
-            shouldAvoidClasses,
-            shouldForcePseudo,
-            shouldListenForMedia,
-            splitStyles,
-            splitStylesStyle,
-            state,
-            stateRef,
-            staticConfig,
-            styleProps,
-            tamaguiConfig,
-            themeState,
-            viewProps,
-            willBeAnimated
-          }));
-        } catch {} finally {
-          console.groupEnd();
-        }
-      } else {
-        log(title), log("state: ", state), isDevTools && log("viewProps", viewProps), log("final styles:");
-        for (var key2 in splitStylesStyle) log(key2, splitStylesStyle[key2]);
-      }
-      if (debugProp === "break") debugger;
-    }
-    return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(function () {
-      delete globalThis.willPrint, time.print(), time = null;
-    }, 50))), content;
-  });
-  staticConfig.componentName && (component.displayName = staticConfig.componentName);
-  var res = component;
-  (process.env.TAMAGUI_FORCE_MEMO || staticConfig.memo) && (res = /* @__PURE__ */React.memo(res)), res.staticConfig = staticConfig;
-  function extendStyledConfig(extended) {
-    return {
-      ...staticConfig,
-      ...extended,
-      neverFlatten: !0,
-      isHOC: !0,
-      isStyledHOC: !1
-    };
-  }
-  function extractable(Component2, extended) {
-    return Component2.staticConfig = extendStyledConfig(extended), Component2.styleable = styleable, Component2;
-  }
-  function styleable(Component2, options) {
-    var _Component_render,
-      isForwardedRefAlready = ((_Component_render = Component2.render) === null || _Component_render === void 0 ? void 0 : _Component_render.length) === 2,
-      out = isForwardedRefAlready ? Component2 : /* @__PURE__ */React.forwardRef(Component2),
-      extendedConfig = extendStyledConfig(options?.staticConfig);
-    return out = options?.disableTheme ? out : themeable(out, extendedConfig), process.env.TAMAGUI_MEMOIZE_STYLEABLE && (out = /* @__PURE__ */React.memo(out)), out.staticConfig = extendedConfig, out.styleable = styleable, out;
-  }
-  return res.extractable = extractable, res.styleable = styleable, res;
-}
-function Unspaced(props) {
-  return props.children;
-}
-Unspaced.isUnspaced = !0;
-var getSpacerSize = function (size, param) {
-    var {
-      tokens
-    } = param;
-    size = size === !0 ? "$true" : size;
-    var _tokens_space_size,
-      sizePx = (_tokens_space_size = tokens.space[size]) !== null && _tokens_space_size !== void 0 ? _tokens_space_size : size;
-    return {
-      width: sizePx,
-      height: sizePx,
-      minWidth: sizePx,
-      minHeight: sizePx
-    };
-  },
-  Spacer = createComponent({
-    acceptsClassName: !0,
-    memo: !0,
-    componentName: "Spacer",
-    validStyles,
-    defaultProps: {
-      ...stackDefaultStyles,
-      // avoid nesting issues
-      tag: "span",
-      size: !0,
-      pointerEvents: "none"
-    },
-    variants: {
-      size: {
-        "...": getSpacerSize
-      },
-      flex: {
-        true: {
-          flexGrow: 1
-        }
-      },
-      direction: {
-        horizontal: {
-          height: 0,
-          minHeight: 0
-        },
-        vertical: {
-          width: 0,
-          minWidth: 0
-        },
-        both: {}
-      }
-    }
-  });
-function spacedChildren(props) {
-  var _childrenList__type,
-    _childrenList_,
-    {
-      isZStack,
-      children,
-      space,
-      direction,
-      spaceFlex,
-      separator,
-      ensureKeys
-    } = props,
-    hasSpace = !!(space || spaceFlex),
-    hasSeparator = separator != null,
-    areChildrenArray = Array.isArray(children);
-  if (!ensureKeys && !(hasSpace || hasSeparator || isZStack)) return children;
-  var childrenList = areChildrenArray ? children : React.Children.toArray(children),
-    len = childrenList.length;
-  if (len <= 1 && !isZStack && !(!((_childrenList_ = childrenList[0]) === null || _childrenList_ === void 0 || (_childrenList__type = _childrenList_.type) === null || _childrenList__type === void 0) && _childrenList__type.shouldForwardSpace)) return children;
-  var final = [],
-    _iteratorNormalCompletion = !0,
-    _didIteratorError = !1,
-    _iteratorError = void 0;
-  try {
-    for (var _iterator = childrenList.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
-      var [index, child] = _step.value,
-        _child_type,
-        isEmpty = child == null || Array.isArray(child) && child.length === 0;
-      if (!isEmpty && /* @__PURE__ */React.isValidElement(child) && !((_child_type = child.type) === null || _child_type === void 0) && _child_type.shouldForwardSpace && (child = /* @__PURE__ */React.cloneElement(child, {
-        space,
-        spaceFlex,
-        separator,
-        key: child.key
-      })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(/* @__PURE__ */_jsx(React.Fragment, {
-        children: isZStack ? /* @__PURE__ */_jsx(AbsoluteFill, {
-          children: child
-        }) : child
-      }, `${index}0t`)), !(isUnspaced(child) && index === 0) && !isZStack) {
-        var next = childrenList[index + 1];
-        next && !isEmpty && !isUnspaced(next) && (separator ? (hasSpace && final.push(createSpacer({
-          key: `_${index}_00t`,
-          direction,
-          space,
-          spaceFlex
-        })), final.push(/* @__PURE__ */_jsx(React.Fragment, {
-          children: separator
-        }, `${index}03t`)), hasSpace && final.push(createSpacer({
-          key: `_${index}01t`,
-          direction,
-          space,
-          spaceFlex
-        }))) : final.push(createSpacer({
-          key: `_${index}02t`,
-          direction,
-          space,
-          spaceFlex
-        })));
-      }
-    }
-  } catch (err) {
-    _didIteratorError = !0, _iteratorError = err;
-  } finally {
-    try {
-      !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
-    } finally {
-      if (_didIteratorError) throw _iteratorError;
-    }
-  }
-  return process.env.NODE_ENV === "development" && props.debug && log("  Spaced children", final, props), final;
-}
-function createSpacer(param) {
-  var {
-    key,
-    direction,
-    space,
-    spaceFlex
-  } = param;
-  return /* @__PURE__ */_jsx(Spacer, {
-    size: space,
-    direction,
-    ...(typeof spaceFlex < "u" && {
-      flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
-    })
-  }, key);
-}
-function isUnspaced(child) {
-  var t = child?.type;
-  return t?.isVisuallyHidden || t?.isUnspaced;
-}
-var AbsoluteFill = createComponent({
-  defaultProps: {
-    ...stackDefaultStyles,
-    flexDirection: "column",
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    pointerEvents: "box-none"
-  }
-});
-function hasAnimatedStyleValue(style) {
-  return Object.keys(style).some(function (k) {
-    var val = style[k];
-    return val && typeof val == "object" && "_animation" in val;
-  });
-}
-var fromPx = function (val) {
-    return typeof val != "string" ? val : +val.replace("px", "");
-  },
-  isDisabled = function (props) {
-    var _props_accessibilityState;
-    return props.disabled || ((_props_accessibilityState = props.accessibilityState) === null || _props_accessibilityState === void 0 ? void 0 : _props_accessibilityState.disabled) || props["aria-disabled"] || props.accessibilityDisabled || !1;
-  },
-  subscribeToContextGroup = function (param) {
-    var {
-      disabled = !1,
-      setStateShallow,
-      pseudoGroups,
-      mediaGroups,
-      componentContext,
-      state
-    } = param;
-    if (pseudoGroups || mediaGroups) {
-      var _componentContext_groups_subscribe,
-        _componentContext_groups,
-        current = {
-          pseudo: {},
-          media: {}
-        };
-      return process.env.NODE_ENV === "development" && !componentContext.groups && console.debug("No context group found"), (_componentContext_groups = componentContext.groups) === null || _componentContext_groups === void 0 || (_componentContext_groups_subscribe = _componentContext_groups.subscribe) === null || _componentContext_groups_subscribe === void 0 ? void 0 : _componentContext_groups_subscribe.call(_componentContext_groups, function (name, param2) {
-        var {
-          layout,
-          pseudo
-        } = param2;
-        if (pseudo && pseudoGroups?.has(String(name))) Object.assign(current.pseudo, pseudo), persist();else if (layout && mediaGroups) {
-          var mediaState = getMediaState(mediaGroups, layout),
-            next = mergeIfNotShallowEqual(current.media, mediaState);
-          next !== current.media && (Object.assign(current.media, next), persist());
-        }
-        function persist() {
-          var group = {
-            ...state.group,
-            [name]: current
-          };
-          setStateShallow({
-            group
-          });
-        }
-      });
-    }
-  };
-export { Spacer, Unspaced, componentSetStates, createComponent, isDisabled, spacedChildren, subscribeToContextGroup, useComponentState };
-//# sourceMappingURL=createComponent.native.mjs.map