@tamagui/web 1.61.3 → 1.62.0

package/dist/cjs/createComponent.native.js

@@ -0,0 +1,643 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf, __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: !0 });
+}, __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function")
+    for (let key of __getOwnPropNames(from))
+      !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: !0 }) : target,
+  mod
+)), __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: !0 }), mod);
+var createComponent_exports = {};
+__export(createComponent_exports, {
+  Spacer: () => Spacer,
+  Unspaced: () => Unspaced,
+  createComponent: () => createComponent,
+  defaultComponentState: () => defaultComponentState,
+  mouseUps: () => mouseUps,
+  spacedChildren: () => spacedChildren
+});
+module.exports = __toCommonJS(createComponent_exports);
+var import_compose_refs = require("@tamagui/compose-refs"), import_constants = require("@tamagui/constants"), import_helpers = require("@tamagui/helpers"), import_use_did_finish_ssr = require("@tamagui/use-did-finish-ssr"), import_react = __toESM(require("react")), import_config = require("./config"), import_constants2 = require("./constants/constants"), import_ComponentContext = require("./contexts/ComponentContext"), import_createVariable = require("./createVariable"), import_createShallowSetState = require("./helpers/createShallowSetState"), import_getSplitStyles = require("./helpers/getSplitStyles"), import_mergeProps = require("./helpers/mergeProps"), import_proxyThemeVariables = require("./helpers/proxyThemeVariables"), import_themeable = require("./helpers/themeable"), import_useMedia = require("./hooks/useMedia"), import_useTheme = require("./hooks/useTheme"), import_setupHooks = require("./setupHooks"), import_Slot = require("./views/Slot"), import_Theme = require("./views/Theme"), import_ThemeDebug = require("./views/ThemeDebug"), import_jsx_runtime = require("react/jsx-runtime");
+const defaultComponentState = {
+  hover: !1,
+  press: !1,
+  pressIn: !1,
+  focus: !1,
+  unmounted: !0
+}, defaultComponentStateMounted = {
+  ...defaultComponentState,
+  unmounted: !1
+}, defaultComponentStateShouldEnter = {
+  ...defaultComponentState,
+  unmounted: "should-enter"
+};
+let tamaguiConfig, AnimatedText, AnimatedView, initialTheme, time;
+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);
+}
+let BaseText, BaseView, hasSetupBaseViews = !1;
+function createComponent(staticConfig) {
+  (0, import_config.onConfiguredOnce)((conf) => {
+    if (!tamaguiConfig && (tamaguiConfig = conf, !initialTheme)) {
+      const next = conf.themes[Object.keys(conf.themes)[0]];
+      initialTheme = (0, import_proxyThemeVariables.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 = (0, import_react.forwardRef)((propsIn, forwardedRef) => {
+    if (!hasSetupBaseViews) {
+      hasSetupBaseViews = !0;
+      const baseViews = import_setupHooks.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 = (0, import_react.useContext)(import_ComponentContext.ComponentContext);
+    let styledContextProps, overriddenContextProps, contextValue;
+    const { context } = staticConfig;
+    if (context) {
+      contextValue = (0, import_react.useContext)(context);
+      const { inverseShorthands } = (0, import_config.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 = (0, import_mergeProps.mergeProps)(curDefaultProps, propsIn) : props = propsIn;
+    const debugProp = props.debug, componentName = props.componentName || staticConfig.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 = (0, import_use_did_finish_ssr.useDidFinishSSR)();
+    process.env.NODE_ENV === "development" && time && time`did-finish-ssr`;
+    const stateRef = (0, import_react.useRef)(
+      void 0
+    );
+    stateRef.current ||= {}, process.env.NODE_ENV === "development" && time && time`stateref`;
+    const hostRef = (0, import_react.useRef)(null), animationsConfig = componentContext.animationDriver, useAnimations = animationsConfig?.useAnimations, hasAnimationProp = !!(props.animation || props.style && hasAnimatedStyleValue(props.style)), supportsCSSVars = animationsConfig?.supportsCSSVars, willBeAnimated = (() => {
+      if (import_constants.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 = !!((!import_constants.isWeb || import_constants.isClient) && willBeAnimated);
+    process.env.NODE_ENV === "development" && time && time`pre-use-state`;
+    const initialState = willBeAnimated ? supportsCSSVars ? defaultComponentStateShouldEnter : defaultComponentState : defaultComponentStateMounted, states = (0, import_react.useState)(initialState), state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: !0 } : states[0], setState = states[1];
+    let setStateShallow = (0, import_createShallowSetState.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 && (import_constants.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 = !!(import_constants.isWeb && isText && componentContext.inText), isDisabled = props.disabled ?? props.accessibilityState?.disabled;
+    process.env.NODE_ENV === "development" && time && time`use-context`;
+    const element = import_constants.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 = isAnimated && animationsConfig?.isReactNative, isReactNative = !!(staticConfig.isReactNative || isAnimatedReactNative), shouldAvoidClasses = !!(!import_constants.isWeb || isAnimated || !staticConfig.acceptsClassName || propsIn.disableClassName), shouldForcePseudo = !!propsIn.forceStyle, noClassNames = shouldAvoidClasses || shouldForcePseudo, disableThemeProp = props["data-disable-theme"], 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,
+      // @ts-ignore this is internal use only
+      disable: disableTheme,
+      shallow: stateRef.current.themeShallow,
+      shouldUpdate: () => stateRef.current.isListeningToTheme,
+      debug: debugProp
+    }, isExiting = !state.unmounted && presence?.[0] === !1;
+    if (process.env.NODE_ENV === "development") {
+      const id = (0, import_react.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;"
+        ), import_constants.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] = (0, import_useTheme.useThemeWithState)(themeStateProps);
+    elementType = Component || elementType;
+    const isStringElement = typeof elementType == "string";
+    process.env.NODE_ENV === "development" && time && time`theme`;
+    const mediaState = (0, import_useMedia.useMedia)(
+      // @ts-ignore, we just pass a stable object so we can get it later with
+      // should match to the one used in `setMediaShouldUpdate` below
+      stateRef
+    );
+    process.env.NODE_ENV === "development" && time && time`media`, (0, import_createVariable.setDidGetVariableValue)(!1);
+    const resolveVariablesAs = (
+      // 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,
+      resolveVariablesAs,
+      isExiting,
+      isAnimated,
+      keepStyleSSR
+    }, splitStyles = (0, import_getSplitStyles.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 = (0, import_createVariable.didGetVariableValue)() || isMediaArray || noClassNames && splitStyles.hasMedia === !0, mediaListeningKeys = isMediaArray ? splitStyles.hasMedia : null;
+    (0, import_useMedia.setMediaShouldUpdate)(stateRef, {
+      enabled: shouldListenForMedia,
+      keys: mediaListeningKeys
+    });
+    const isAnimatedReactNativeWeb = isAnimated && 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)), import_constants.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,
+      onPress,
+      onLongPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      themeShallow,
+      spaceDirection: _spaceDirection,
+      disabled: disabledProp,
+      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 = (0, import_helpers.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 = (0, import_compose_refs.useComposedRefs)(hostRef, forwardedRef);
+    viewProps.ref = composedRef, process.env.NODE_ENV === "development" && !isReactNative && !isText && import_constants.isWeb && !isHOC && import_react.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;
+    (0, import_react.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 = (0, import_createShallowSetState.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, isHoverable = import_constants.isWeb && !!(groupName || runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave), handlesPressEvents = !(import_constants.isWeb || asChild), shouldAttach = !!(attachPress || isHoverable || noClassNames && "pressStyle" in props || import_constants.isWeb && noClassNames && "hoverStyle" in props);
+    process.env.NODE_ENV === "development" && time && time`events-setup`;
+    const events = shouldAttach && !isDisabled && !asChild ? {
+      onPressOut: attachPress ? (e) => {
+        unPress(), onPressOut?.(e), onMouseUp?.(e);
+      } : void 0,
+      ...(isHoverable || attachPress) && {
+        onMouseEnter: (e) => {
+          const next = {};
+          next.hover = !0, state.pressIn && (next.press = !0), setStateShallow(next), onHoverIn?.(e), onMouseEnter?.(e);
+        },
+        onMouseLeave: (e) => {
+          const next = {};
+          mouseUps.add(unPress), next.hover = !1, state.pressIn && (next.press = !1, next.pressIn = !1), setStateShallow(next), onHoverOut?.(e), onMouseLeave?.(e);
+        }
+      },
+      onPressIn: attachPress ? (e) => {
+        setStateShallow({
+          press: !0,
+          pressIn: !0
+        }), onPressIn?.(e), onMouseDown?.(e), import_constants.isWeb && mouseUps.add(unPress);
+      } : void 0,
+      onPress: attachPress ? (e) => {
+        unPress(), import_constants.isWeb && onClick?.(e), onPress?.(e);
+      } : void 0,
+      onLongPress: attachPress && onLongPress ? (e) => {
+        unPress(), onLongPress?.(e);
+      } : void 0
+    } : null;
+    events && 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 }), import_setupHooks.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 = import_Slot.Slot, Object.assign(viewProps, {
+      onPress,
+      onLongPress,
+      onPressIn,
+      onPressOut
+    })), 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) ? (viewProps.children = content, content = elementType.render(viewProps, viewProps.ref)) : content = (0, import_react.createElement)(elementType, viewProps, content), process.env.NODE_ENV === "development" && time && time`create-element`;
+    const subGroupContext = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, { groups: subGroupContext, children: content })), process.env.NODE_ENV === "development" && time && time`group-context`, content = disableThemeProp ? content : (0, import_Theme.useThemedChildren)(themeState, content, themeStateProps), process.env.NODE_ENV === "development" && time && time`themed-children`, process.env.NODE_ENV === "development" && props.debug === "visualize" && (content = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThemeDebug.ThemeDebug, { themeState, themeProps: props, children: content })), overriddenContextProps) {
+      const Provider = staticConfig.context.Provider;
+      content = /* @__PURE__ */ (0, import_jsx_runtime.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_MEMO_ALL || staticConfig.memo) && (res = (0, import_react.memo)(res)), res.staticConfig = staticConfig;
+  function extendStyledConfig(extended) {
+    return {
+      ...staticConfig,
+      ...extended,
+      neverFlatten: !0,
+      isHOC: !0
+    };
+  }
+  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
+      (0, import_react.memo)((0, import_react.forwardRef)(Component2))
+    ), extendedConfig = extendStyledConfig(extended), out = (0, import_themeable.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 Spacer = createComponent({
+  acceptsClassName: !0,
+  memo: !0,
+  componentName: "Spacer",
+  validStyles: import_helpers.validStyles,
+  defaultProps: {
+    ...import_constants2.stackDefaultStyles,
+    // avoid nesting issues
+    tag: "span",
+    size: !0,
+    pointerEvents: "none"
+  },
+  variants: {
+    size: {
+      "...size": (size, { tokens }) => {
+        size = size === !0 ? "$true" : size;
+        const sizePx = tokens.space[size] ?? size;
+        return {
+          width: sizePx,
+          height: sizePx,
+          minWidth: sizePx,
+          minHeight: sizePx
+        };
+      }
+    },
+    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 = import_react.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 && import_react.default.isValidElement(child) && child.type?.shouldForwardSpace && (child = import_react.default.cloneElement(child, {
+      space,
+      spaceFlex,
+      separator,
+      key: child.key
+    })), isEmpty || !child || child.key && !isZStack ? final.push(child) : final.push(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isZStack ? /* @__PURE__ */ (0, import_jsx_runtime.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(
+      import_react.default.isValidElement(separator) ? import_react.default.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__ */ (0, import_jsx_runtime.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: {
+    ...import_constants2.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, (0, import_useMedia.mediaKeyMatch)(mediaKey, layout)])
+  );
+}
+const fromPx = (val) => typeof val != "string" ? val : +val.replace("px", "");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Spacer,
+  Unspaced,
+  createComponent,
+  defaultComponentState,
+  mouseUps,
+  spacedChildren
+});
+//# sourceMappingURL=createComponent.js.map