@tamagui/web 1.74.3 → 1.74.4

package/dist/esm/createComponent.native.js

@@ -0,0 +1,683 @@
+import { useComposedRefs } from "@tamagui/compose-refs";
+import { isClient, isServer, isWeb } from "@tamagui/constants";
+import { composeEventHandlers, validStyles } from "@tamagui/helpers";
+import { useDidFinishSSR } from "@tamagui/use-did-finish-ssr";
+import React, {
+  Children,
+  Fragment,
+  createElement,
+  forwardRef,
+  memo,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { devConfig, getConfig, onConfiguredOnce } from "./config";
+import { stackDefaultStyles } from "./constants/constants";
+import { ComponentContext } from "./contexts/ComponentContext";
+import { didGetVariableValue, setDidGetVariableValue } from "./createVariable";
+import {
+  defaultComponentState,
+  defaultComponentStateMounted,
+  defaultComponentStateShouldEnter
+} from "./defaultComponentState";
+import {
+  createShallowSetState,
+  mergeIfNotShallowEqual
+} from "./helpers/createShallowSetState";
+import { useSplitStyles } from "./helpers/getSplitStyles";
+import { mergeProps } from "./helpers/mergeProps";
+import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
+import { themeable } from "./helpers/themeable";
+import { mediaKeyMatch, setMediaShouldUpdate, useMedia } from "./hooks/useMedia";
+import { useThemeWithState } from "./hooks/useTheme";
+import { hooks } from "./setupHooks";
+import { Slot } from "./views/Slot";
+import { useThemedChildren } from "./views/Theme";
+import { ThemeDebug } from "./views/ThemeDebug";
+import { jsx } from "react/jsx-runtime";
+let tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time, debugKeyListeners, startVisualizer;
+const mouseUps = /* @__PURE__ */ new Set();
+if (typeof document < "u") {
+  const cancelTouches = () => {
+    mouseUps.forEach((x) => x()), mouseUps.clear();
+  };
+  addEventListener("mouseup", cancelTouches), addEventListener("touchend", cancelTouches), addEventListener("touchcancel", cancelTouches), process.env.NODE_ENV === "development" && (startVisualizer = () => {
+    const devVisualizerConfig = devConfig?.visualizer;
+    if (devVisualizerConfig) {
+      debugKeyListeners = /* @__PURE__ */ new Set();
+      let tm, isShowing = !1;
+      const options = {
+        key: "Alt",
+        delay: 800,
+        ...typeof devVisualizerConfig == "object" ? devVisualizerConfig : {}
+      };
+      document.addEventListener("blur", () => {
+        clearTimeout(tm);
+      }), document.addEventListener("keydown", ({ key, defaultPrevented }) => {
+        defaultPrevented || (clearTimeout(tm), key === options.key && (tm = setTimeout(() => {
+          isShowing = !0, debugKeyListeners?.forEach((l) => l(!0));
+        }, options.delay)));
+      }), document.addEventListener("keyup", ({ key, defaultPrevented }) => {
+        defaultPrevented || key === options.key && (clearTimeout(tm), isShowing && debugKeyListeners?.forEach((l) => l(!1)));
+      });
+    }
+  });
+}
+let BaseText, BaseView, hasSetupBaseViews = !1;
+function createComponent(staticConfig) {
+  let config = null;
+  onConfiguredOnce((conf) => {
+    if (config = conf, !tamaguiConfig && (tamaguiConfig = conf, !initialTheme)) {
+      const next = conf.themes[Object.keys(conf.themes)[0]];
+      initialTheme = proxyThemeVariables(next), process.env.NODE_ENV === "development" && (initialTheme || console.log("Warning: Missing theme"));
+    }
+  });
+  const {
+    Component,
+    isText,
+    isZStack,
+    isHOC,
+    validStyles: validStyles2 = {},
+    variants = {}
+  } = staticConfig, defaultComponentClassName = `is_${staticConfig.componentName}`, defaultProps = staticConfig.defaultProps;
+  process.env.NODE_ENV === "development" && staticConfig.defaultProps?.debug && process.env.IS_STATIC !== "is_static" && console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+    staticConfig,
+    defaultProps,
+    defaultPropsKeyOrder: defaultProps ? Object.keys(defaultProps) : []
+  });
+  const component = forwardRef((propsIn, forwardedRef) => {
+    if (process.env.NODE_ENV === "development" && startVisualizer && (startVisualizer(), startVisualizer = void 0), !hasSetupBaseViews) {
+      hasSetupBaseViews = !0;
+      const baseViews = hooks.getBaseViews?.();
+      baseViews && (BaseText = baseViews.Text, BaseView = baseViews.View);
+    }
+    process.env.NODE_ENV === "test" && propsIn["data-test-renders"] && (propsIn["data-test-renders"].current ??= 0, propsIn["data-test-renders"].current += 1);
+    const componentContext = useContext(ComponentContext);
+    let styledContextProps, overriddenContextProps, contextValue;
+    const { context } = staticConfig;
+    if (context) {
+      contextValue = useContext(context);
+      const { inverseShorthands } = getConfig();
+      for (const key in context.props) {
+        const propVal = (
+          // because its after default props but before props this annoying amount of checks
+          propsIn[key] ?? propsIn[inverseShorthands[key]] ?? defaultProps?.[key] ?? defaultProps?.[inverseShorthands[key]]
+        );
+        propVal === void 0 ? contextValue && (key in validStyles2 || key in variants) && (styledContextProps ||= {}, styledContextProps[key] = contextValue[key]) : (overriddenContextProps ||= {}, overriddenContextProps[key] = propVal);
+      }
+    }
+    const curDefaultProps = styledContextProps ? { ...defaultProps, ...styledContextProps } : defaultProps;
+    let props;
+    curDefaultProps ? props = mergeProps(curDefaultProps, propsIn) : props = propsIn;
+    const debugProp = props.debug, componentName = props.componentName || staticConfig.componentName;
+    process.env.NODE_ENV === "development" && isClient && useEffect(() => {
+      let overlay = null;
+      const debugVisualizerHandler = (show = !1) => {
+        const node = hostRef.current;
+        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";
+            const 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 = `${componentName || ""} ${dataAt} ${dataIn}`.trim(), overlay.appendChild(tooltip), node.appendChild(overlay);
+          } else
+            overlay && node.removeChild(overlay);
+      };
+      return debugKeyListeners ||= /* @__PURE__ */ new Set(), debugKeyListeners.add(debugVisualizerHandler), () => {
+        debugKeyListeners?.delete(debugVisualizerHandler);
+      };
+    }, [componentName]), !process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time && (time = require("@tamagui/timer").timer().start()), process.env.NODE_ENV === "development" && time && time`start (ignore)`;
+    const isHydrated = config?.disableSSR ? !0 : useDidFinishSSR();
+    process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
+    const stateRef = useRef(
+      void 0
+    );
+    stateRef.current ||= {}, process.env.NODE_ENV === "development" && time && time`stateref`;
+    const hostRef = useRef(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig?.useAnimations, hasAnimationProp = !!(props.animation || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig?.supportsCSSVars, willBeAnimated = (() => {
+      if (isServer && !supportsCSSVars)
+        return !1;
+      const curState = stateRef.current;
+      return !!(!!(hasAnimationProp && !isHOC && useAnimations) || curState.hasAnimated);
+    })(), usePresence = animationsConfig?.usePresence, presence = willBeAnimated && usePresence?.() || null, hasEnterStyle = !!props.enterStyle, needsMount = !!((!isWeb || isClient) && willBeAnimated);
+    process.env.NODE_ENV === "development" && time && time`pre-use-state`;
+    const initialState = willBeAnimated ? supportsCSSVars ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted, states = useState(initialState), state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: !0 } : states[0], setState = states[1];
+    let setStateShallow = createShallowSetState(setState);
+    const groupName = props.group, groupClassName = groupName ? `t_group_${props.group}` : "";
+    if (groupName) {
+      const groupContextState = componentContext.groups.state, og = setStateShallow;
+      setStateShallow = (state2) => {
+        og(state2), componentContext.groups.emit(groupName, {
+          pseudo: state2
+        });
+        const next = {
+          ...groupContextState[groupName],
+          ...state2
+        };
+        groupContextState[groupName] = next;
+      };
+    }
+    process.env.NODE_ENV === "development" && time && time`use-state`;
+    let isAnimated = willBeAnimated;
+    willBeAnimated && !supportsCSSVars && !presence && isHydrated && (isServer || state.unmounted === !0) && (isAnimated = !1), willBeAnimated && !stateRef.current.hasAnimated && (stateRef.current.hasAnimated = !0);
+    const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName, hasTextAncestor = !!(isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? props.accessibilityState?.disabled;
+    process.env.NODE_ENV === "development" && time && time`use-context`;
+    const element = isWeb && (!Component || typeof Component == "string") && props.tag || Component, BaseTextComponent = BaseText || element || "span", BaseViewComponent = BaseView || element || (hasTextAncestor ? "span" : "div");
+    AnimatedText = animationsConfig ? animationsConfig.Text : BaseTextComponent, AnimatedView = animationsConfig ? animationsConfig.View : BaseViewComponent;
+    let elementType = isText ? (isAnimated ? AnimatedText : null) || BaseTextComponent : (isAnimated ? AnimatedView : null) || BaseViewComponent;
+    if (isAnimated && presence) {
+      const presenceState = presence[2];
+      if (presenceState) {
+        const isEntering = state.unmounted, isExiting2 = !presenceState.isPresent, enterExitVariant = presenceState.enterExitVariant, enterVariant = enterExitVariant ?? presenceState.enterVariant, exitVariant = enterExitVariant ?? presenceState.exitVariant;
+        isEntering && enterVariant ? (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence ENTER "${enterVariant}"`), props[enterVariant] = !0) : isExiting2 && exitVariant && (process.env.NODE_ENV === "development" && debugProp === "verbose" && console.warn(`Animating presence EXIT "${enterVariant}"`), props[exitVariant] = !enterExitVariant);
+      }
+    }
+    const isAnimatedReactNative = hasAnimationProp && animationsConfig?.isReactNative, isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableThemeProp = !1, disableTheme = disableThemeProp && !willBeAnimated || isHOC;
+    process.env.NODE_ENV === "development" && time && time`theme-props`, props.themeShallow && (stateRef.current.themeShallow = !0);
+    const themeStateProps = {
+      name: props.theme,
+      componentName,
+      disable: disableTheme,
+      shallow: stateRef.current.themeShallow,
+      // if this returns undefined it defers to the keys tracking, so its only used to force either updates or no updates
+      shouldUpdate: () => (
+        // when we use $theme- styles we need to force it to re-render on theme changes (this can be optimized likely)
+        stateRef.current.isListeningToTheme
+      ),
+      debug: debugProp
+    };
+    themeStateProps.deopt = willBeAnimated;
+    const isExiting = !state.unmounted && presence?.[0] === !1;
+    if (process.env.NODE_ENV === "development") {
+      const id = useId();
+      if (debugProp && debugProp !== "profile") {
+        const name = `${componentName || Component?.displayName || Component?.name || "[Unnamed Component]"}`, type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "", dataIs = propsIn["data-is"] || "", banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${id}`;
+        console.group(
+          `%c ${banner} (unmounted: ${state.unmounted})${presence ? ` (presence: ${presence[0]})` : ""} ${isHydrated ? "\u{1F4A6}" : "\u{1F3DC}\uFE0F"}`,
+          "background: green; color: white;"
+        ), isServer || (console.groupCollapsed(
+          `Info (collapsed): ${state.press || state.pressIn ? "PRESSED " : ""}${state.hover ? "HOVERED " : ""}${state.focus ? "FOCUSED" : " "}`
+        ), console.log({
+          propsIn,
+          props,
+          state,
+          staticConfig,
+          elementType,
+          themeStateProps,
+          styledContext: { contextProps: styledContextProps, overriddenContextProps },
+          presence,
+          isAnimated,
+          isHOC,
+          hasAnimationProp,
+          useAnimations,
+          propsInOrder: Object.keys(propsIn),
+          propsOrder: Object.keys(props)
+        }), console.groupEnd());
+      }
+    }
+    process.env.NODE_ENV === "development" && time && time`pre-theme-media`;
+    const [themeState, theme] = useThemeWithState(themeStateProps);
+    elementType = Component || elementType;
+    const isStringElement = typeof elementType == "string";
+    process.env.NODE_ENV === "development" && time && time`theme`;
+    const mediaState = useMedia(stateRef, componentContext);
+    process.env.NODE_ENV === "development" && time && time`media`, setDidGetVariableValue(!1);
+    const 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"
+    ), keepStyleSSR = willBeAnimated && animationsConfig?.keepStyleSSR, styleProps = {
+      mediaState,
+      noClassNames,
+      resolveValues,
+      isExiting,
+      isAnimated,
+      keepStyleSSR
+    }, splitStyles = useSplitStyles(
+      props,
+      staticConfig,
+      theme,
+      themeState?.state?.name || "",
+      state,
+      styleProps,
+      null,
+      componentContext,
+      elementType,
+      debugProp
+    );
+    props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured && (splitStyles.style.opacity = 0), process.env.NODE_ENV === "development" && time && time`split-styles`, stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
+    const isMediaArray = splitStyles.hasMedia && Array.isArray(splitStyles.hasMedia), shouldListenForMedia = didGetVariableValue() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
+    setMediaShouldUpdate(stateRef, {
+      enabled: shouldListenForMedia,
+      keys: mediaListeningKeys
+    });
+    const isAnimatedReactNativeWeb = hasAnimationProp && isReactNative;
+    if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile" && (console.groupCollapsed(">>>"), console.log(
+      "props in",
+      propsIn,
+      "mapped to",
+      props,
+      "in order",
+      Object.keys(props)
+    ), console.log("splitStyles", splitStyles), console.log("media", { shouldListenForMedia, isMediaArray, mediaListeningKeys }), console.log("className", Object.values(splitStyles.classNames)), isClient && console.log("ref", hostRef, "(click to view)"), console.groupEnd(), debugProp === "break"))
+      debugger;
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style: splitStylesStyle,
+      classNames,
+      space
+    } = splitStyles, propsWithAnimation = props;
+    let animationStyles;
+    if (willBeAnimated && useAnimations && !isHOC) {
+      const animations = useAnimations({
+        props: propsWithAnimation,
+        // if hydrating, send empty style
+        style: splitStylesStyle,
+        // style: splitStylesStyle,
+        presence,
+        componentState: state,
+        styleProps,
+        theme: themeState.state?.theme,
+        pseudos: pseudos || null,
+        hostRef,
+        staticConfig
+      });
+      isAnimated && animations && (animationStyles = animations.style), process.env.NODE_ENV === "development" && time && time`animations`;
+    }
+    const {
+      asChild,
+      children,
+      themeShallow,
+      spaceDirection: _spaceDirection,
+      disabled: disabledProp,
+      onPress,
+      onLongPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onMouseUp,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      separator,
+      // ignore from here on out
+      forceStyle: _forceStyle,
+      // @ts-ignore  for next/link compat etc
+      onClick,
+      theme: _themeProp,
+      // @ts-ignore
+      defaultVariants,
+      ...nonTamaguiProps
+    } = viewPropsIn;
+    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`;
+    const disabled = props.accessibilityState?.disabled || // @ts-expect-error (comes from core)
+    props.accessibilityDisabled;
+    let viewProps = nonTamaguiProps;
+    isHOC && _themeProp && (viewProps.theme = _themeProp), groupName && (nonTamaguiProps.onLayout = composeEventHandlers(
+      nonTamaguiProps.onLayout,
+      (e) => {
+        componentContext.groups.emit(groupName, {
+          layout: e.nativeEvent.layout
+        }), !stateRef.current.hasMeasured && props.untilMeasured === "hide" && setState((prev) => ({ ...prev })), stateRef.current.hasMeasured = !0;
+      }
+    )), viewProps = nonTamaguiProps;
+    const composedRef = useComposedRefs(hostRef, forwardedRef);
+    viewProps.ref = composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && isWeb && !isHOC && Children.toArray(props.children).forEach((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`;
+    let unPress = () => setStateShallow({
+      press: !1,
+      pressIn: !1
+    });
+    const shouldSetMounted = needsMount && state.unmounted, { pseudoGroups, mediaGroups } = splitStyles;
+    useEffect(() => {
+      if (shouldSetMounted) {
+        const unmounted = state.unmounted === !0 && hasEnterStyle ? "should-enter" : !1;
+        setStateShallow({
+          unmounted
+        });
+        return;
+      }
+      let disposeGroupsListener;
+      if (pseudoGroups || mediaGroups) {
+        const current = {
+          pseudo: {},
+          media: {}
+        };
+        disposeGroupsListener = componentContext.groups.subscribe(
+          (name, { layout, pseudo }) => {
+            if (pseudo && pseudoGroups?.has(name))
+              Object.assign(current.pseudo, pseudo), persist();
+            else if (layout && mediaGroups) {
+              const mediaState2 = getMediaState(mediaGroups, layout), next = mergeIfNotShallowEqual(current.media, mediaState2);
+              next !== current.media && (Object.assign(current.media, next), persist());
+            }
+            function persist() {
+              setStateShallow({
+                // force it to be referentially different so it always updates
+                group: {
+                  ...state.group,
+                  [name]: current
+                }
+              });
+            }
+          }
+        );
+      }
+      return () => {
+        disposeGroupsListener?.(), mouseUps.delete(unPress);
+      };
+    }, [
+      shouldSetMounted,
+      state.unmounted,
+      pseudoGroups ? Object.keys([...pseudoGroups]).join("") : 0,
+      mediaGroups ? Object.keys([...mediaGroups]).join("") : 0
+    ]);
+    const avoidAnimationStyle = keepStyleSSR && state.unmounted === !0;
+    let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps?.fontFamily : null;
+    fontFamily && fontFamily[0] === "$" && (fontFamily = fontFamily.slice(1));
+    const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "", style = avoidAnimationStyle ? splitStyles.style : animationStyles || splitStyles.style;
+    let className;
+    viewProps.style = style;
+    const runtimePressStyle = !disabled && noClassNames && pseudos?.pressStyle, attachPress = !!(groupName || runtimePressStyle || onPress || onPressOut || onPressIn || onLongPress || onClick), runtimeHoverStyle = !disabled && noClassNames && pseudos?.hoverStyle, needsHoverState = runtimeHoverStyle || onHoverIn || onHoverOut, isHoverable = isWeb && !!(groupName || needsHoverState || onMouseEnter || onMouseLeave), handlesPressEvents = !(isWeb || asChild), shouldAttach = !!(attachPress || isHoverable || runtimePressStyle || runtimeHoverStyle);
+    process.env.NODE_ENV === "development" && time && time`events-setup`;
+    const events = shouldAttach && !isDisabled && !props.asChild ? {
+      onPressOut: attachPress ? (e) => {
+        unPress(), onPressOut?.(e), onMouseUp?.(e);
+      } : void 0,
+      ...(isHoverable || attachPress) && {
+        onMouseEnter: (e) => {
+          const next = {};
+          needsHoverState && (next.hover = !0), runtimePressStyle && state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
+        },
+        onMouseLeave: (e) => {
+          const next = {};
+          mouseUps.add(unPress), needsHoverState && (next.hover = !1), runtimePressStyle && state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+        }
+      },
+      onPressIn: attachPress ? (e) => {
+        runtimePressStyle && setStateShallow({
+          press: !0,
+          pressIn: !0
+        }), onPressIn?.(e), onMouseDown?.(e), isWeb && mouseUps.add(unPress);
+      } : void 0,
+      onPress: attachPress ? (e) => {
+        unPress(), isWeb && onClick?.(e), onPress?.(e);
+      } : void 0,
+      onLongPress: attachPress && onLongPress ? (e) => {
+        unPress(), onLongPress?.(e);
+      } : void 0
+    } : null;
+    events && !asChild && Object.assign(events, {
+      cancelable: !viewProps.rejectResponderTermination,
+      disabled: isDisabled,
+      hitSlop: viewProps.hitSlop,
+      delayLongPress: viewProps.delayLongPress,
+      delayPressIn: viewProps.delayPressIn,
+      delayPressOut: viewProps.delayPressOut,
+      focusable: viewProps.focusable ?? !0,
+      minPressDuration: 0
+    }), process.env.NODE_ENV === "development" && time && time`events`, process.env.NODE_ENV === "development" && debugProp === "verbose" && console.log("events", { events, isHoverable, attachPress }), hooks.useEvents?.(viewProps, events, splitStyles, setStateShallow);
+    const direction = props.spaceDirection || "both";
+    process.env.NODE_ENV === "development" && time && time`hooks`;
+    let content = !children || asChild ? children : spacedChildren({
+      separator,
+      children,
+      space,
+      direction,
+      isZStack,
+      debug: debugProp
+    });
+    asChild && (elementType = Slot, Object.assign(viewProps, { onPress, onLongPress })), process.env.NODE_ENV === "development" && time && time`spaced-as-child`, // in test mode disable perf unwrapping so react-testing-library finds Text properly
+    process.env.NODE_ENV !== "test" && (elementType === BaseText || elementType === BaseView) ? process.env.TAMAGUI_OPTIMIZE_NATIVE_VIEWS ? (viewProps.children = content, content = createElement(
+      elementType === BaseText ? "RCTText" : "RCTView",
+      viewProps
+    )) : (viewProps.children = content, content = elementType.render(viewProps, viewProps.ref)) : content = createElement(elementType, viewProps, content), process.env.NODE_ENV === "development" && time && time`create-element`;
+    const subGroupContext = useMemo(() => {
+      if (groupName)
+        return {
+          ...componentContext.groups,
+          // change reference so as we mutate it doesn't affect siblings etc
+          state: {
+            ...componentContext.groups.state,
+            [groupName]: {
+              pseudo: initialState,
+              // capture just initial width and height if they exist
+              // will have top, left, width, height (not x, y)
+              layout: {
+                width: fromPx(splitStyles.style.width),
+                height: fromPx(splitStyles.style.height)
+              }
+            }
+          }
+        };
+    }, [groupName]);
+    if (groupName && subGroupContext && (content = /* @__PURE__ */ jsx(ComponentContext.Provider, { groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableThemeProp ? content : useThemedChildren(themeState, content, themeStateProps), 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) {
+      const contextProps = staticConfig.context.props;
+      for (const key in contextProps)
+        (key in style || key in viewProps) && (overriddenContextProps ||= {}, overriddenContextProps[key] = style[key] ?? viewProps[key]);
+    }
+    if (overriddenContextProps) {
+      const Provider = staticConfig.context.Provider;
+      content = /* @__PURE__ */ jsx(Provider, { ...contextValue, ...overriddenContextProps, children: content });
+    }
+    if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+      console.groupCollapsed(`render <${typeof elementType == "string" ? elementType : "Component"} /> with props`);
+      try {
+        console.log("viewProps", viewProps), console.log("viewPropsOrder", Object.keys(viewProps));
+        for (const key in viewProps)
+          console.log(" - ", key, viewProps[key]);
+        console.log("children", content), typeof window < "u" && console.log({
+          viewProps,
+          state,
+          styleProps,
+          themeState,
+          isAnimated,
+          isAnimatedReactNativeWeb,
+          defaultProps,
+          splitStyles,
+          animationStyles,
+          handlesPressEvents,
+          willBeAnimated,
+          isStringElement,
+          classNamesIn: props.className?.split(" "),
+          classNamesOut: viewProps.className?.split(" "),
+          events,
+          shouldAttach,
+          pseudos,
+          content,
+          shouldAvoidClasses,
+          animation: props.animation,
+          splitStylesStyle,
+          staticConfig,
+          tamaguiConfig,
+          shouldForcePseudo,
+          elementType,
+          initialState,
+          classNames
+        });
+      } catch {
+      }
+      console.groupEnd(), console.groupEnd();
+    }
+    return process.env.NODE_ENV === "development" && time && (time`rest`, globalThis.willPrint || (globalThis.willPrint = !0, setTimeout(() => {
+      delete globalThis.willPrint, time.print(), time = null;
+    }, 50))), content;
+  });
+  staticConfig.componentName && (component.displayName = staticConfig.componentName);
+  let res = component;
+  process.env.TAMAGUI_DISABLE_MEMO || (res = 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, extended) {
+    const ComponentForwardedRef = Component2.render?.length === 2 ? Component2 : (
+      // memo because theme changes otherwise would always re-render
+      memo(forwardRef(Component2))
+    ), extendedConfig = extendStyledConfig(extended), out = themeable(ComponentForwardedRef, extendedConfig);
+    return out.staticConfig = extendedConfig, out.styleable = styleable, out;
+  }
+  return res.extractable = extractable, res.styleable = styleable, res;
+}
+function Unspaced(props) {
+  return props.children;
+}
+Unspaced.isUnspaced = !0;
+const getSpacerSize = (size, { tokens }) => {
+  size = size === !0 ? "$true" : size;
+  const sizePx = 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) {
+  const { isZStack, children, space, direction, spaceFlex, separator } = props, hasSpace = !!(space || spaceFlex), hasSeparator = separator != null;
+  if (!(hasSpace || hasSeparator || isZStack))
+    return children;
+  const childrenList = Children.toArray(children);
+  if (childrenList.length <= 1 && !isZStack && !childrenList[0]?.type?.shouldForwardSpace)
+    return childrenList;
+  const final = [];
+  for (let [index, child] of childrenList.entries()) {
+    const isEmpty = child == null || Array.isArray(child) && child.length === 0;
+    if (!isEmpty && React.isValidElement(child) && child.type?.shouldForwardSpace && (child = React.cloneElement(child, {
+      space,
+      spaceFlex,
+      separator,
+      key: child.key
+    })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(
+      /* @__PURE__ */ jsx(Fragment, { children: isZStack ? /* @__PURE__ */ jsx(AbsoluteFill, { children: child }) : child }, index)
+    ), isUnspaced(child) && index === 0 || isZStack)
+      continue;
+    const next = childrenList[index + 1];
+    next && !isUnspaced(next) && (separator ? (hasSpace && final.push(
+      createSpacer({
+        key: `_${index}_00tmgui`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ), final.push(
+      React.isValidElement(separator) ? React.cloneElement(separator, { key: `sep_${index}` }) : separator
+    ), hasSpace && final.push(
+      createSpacer({
+        key: `_${index}01tmgui`,
+        direction,
+        space,
+        spaceFlex
+      })
+    )) : final.push(
+      createSpacer({
+        key: `_${index}02tmgui`,
+        direction,
+        space,
+        spaceFlex
+      })
+    ));
+  }
+  return process.env.NODE_ENV === "development" && props.debug && console.log("  Spaced children", final, props), final;
+}
+function createSpacer({ key, direction, space, spaceFlex }) {
+  return /* @__PURE__ */ jsx(
+    Spacer,
+    {
+      size: space,
+      direction,
+      ...typeof spaceFlex < "u" && {
+        flex: spaceFlex === !0 ? 1 : spaceFlex === !1 ? 0 : spaceFlex
+      }
+    },
+    key
+  );
+}
+function isUnspaced(child) {
+  const t = child?.type;
+  return t?.isVisuallyHidden || t?.isUnspaced;
+}
+const 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((k) => {
+    const val = style[k];
+    return val && typeof val == "object" && "_animation" in val;
+  });
+}
+function getMediaState(mediaGroups, layout) {
+  return Object.fromEntries(
+    [...mediaGroups].map((mediaKey) => [mediaKey, mediaKeyMatch(mediaKey, layout)])
+  );
+}
+const fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
+export {
+  Spacer,
+  Unspaced,
+  createComponent,
+  mouseUps,
+  spacedChildren
+};
+//# sourceMappingURL=createComponent.js.map