@tamagui/web 1.13.3 → 1.13.4

package/dist/esm/createComponent.js

@@ -1,847 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import { useComposedRefs } from "@tamagui/compose-refs";
-import { isClient, isRSC, isServer, isWeb } from "@tamagui/constants";
-import { stylePropsView, validPseudoKeys, validStyles } from "@tamagui/helpers";
-import React, {
-  Children,
-  Fragment,
-  createElement,
-  forwardRef,
-  memo,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useRef
-} from "react";
-import { onConfiguredOnce } from "./config.js";
-import { stackDefaultStyles } from "./constants/constants.js";
-import { FontLanguageContext } from "./contexts/FontLanguageContext.js";
-import { TextAncestorContext } from "./contexts/TextAncestorContext.js";
-import { didGetVariableValue, setDidGetVariableValue } from "./createVariable.js";
-import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig.js";
-import { useSplitStyles } from "./helpers/getSplitStyles.js";
-import { mergeProps } from "./helpers/mergeProps.js";
-import { proxyThemeVariables } from "./helpers/proxyThemeVariables.js";
-import { useShallowSetState } from "./helpers/useShallowSetState.js";
-import { useAnimationDriver } from "./hooks/useAnimationDriver.js";
-import { setMediaShouldUpdate, useMedia } from "./hooks/useMedia.js";
-import { useServerRef, useServerState } from "./hooks/useServerHooks.js";
-import { useThemeWithState } from "./hooks/useTheme.js";
-import { hooks } from "./setupHooks.js";
-import { Slot } from "./views/Slot.js";
-import { useThemedChildren } from "./views/Theme.js";
-process.env.TAMAGUI_TARGET;
-const defaultComponentState = {
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  unmounted: true
-};
-const defaultComponentStateMounted = {
-  ...defaultComponentState,
-  unmounted: false
-};
-let tamaguiConfig;
-let AnimatedText;
-let AnimatedView;
-let initialTheme;
-const mouseUps = /* @__PURE__ */ new Set();
-if (typeof document !== "undefined") {
-  const cancelTouches = () => {
-    mouseUps.forEach((x) => x());
-    mouseUps.clear();
-  };
-  addEventListener("mouseup", cancelTouches);
-  addEventListener("touchend", cancelTouches);
-  addEventListener("touchcancel", cancelTouches);
-}
-function mergeShorthands({ defaultProps }, { shorthands }) {
-  for (const key of Object.keys(defaultProps)) {
-    defaultProps[shorthands[key] || key] = defaultProps[key];
-  }
-}
-let BaseText;
-let BaseView;
-let hasSetupBaseViews = false;
-function createComponent(configIn, ParentComponent) {
-  const staticConfig = (() => {
-    const next = extendStaticConfig(configIn, ParentComponent);
-    if ("parsed" in next) {
-      return next;
-    } else {
-      return parseStaticConfig(next);
-    }
-  })();
-  const defaultComponentClassName = `is_${staticConfig.componentName}`;
-  let tamaguiDefaultProps;
-  let defaultTag;
-  const component = forwardRef((propsIn, forwardedRef) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
-    if (process.env.TAMAGUI_TARGET === "native") {
-      if (!hasSetupBaseViews) {
-        hasSetupBaseViews = true;
-        const baseViews = (_b = (_a = hooks).getBaseViews) == null ? void 0 : _b.call(_a);
-        if (baseViews) {
-          BaseText = baseViews.Text;
-          BaseView = baseViews.View;
-        }
-      }
-    }
-    if (process.env.NODE_ENV === "test") {
-      if (propsIn["data-test-renders"]) {
-        propsIn["data-test-renders"]["current"] ??= 0;
-        propsIn["data-test-renders"]["current"] += 1;
-      }
-    }
-    let props;
-    if (tamaguiDefaultProps && !propsIn.asChild) {
-      props = mergeProps(tamaguiDefaultProps, propsIn)[0];
-    } else {
-      props = propsIn;
-    }
-    const debugProp = props["debug"];
-    const { Component, isText, isZStack } = staticConfig;
-    const componentName = props.componentName || staticConfig.componentName;
-    const stateRef = useRef(
-      void 0
-    );
-    stateRef.current ??= {};
-    const animationsConfig = useAnimationDriver();
-    const useAnimations = animationsConfig == null ? void 0 : animationsConfig.useAnimations;
-    const isAnimated = (() => {
-      const next = !!(!staticConfig.isHOC && useAnimations && (props.animation || props.style && hasAnimatedStyleValue(props.style)));
-      if (next && !stateRef.current.hasAnimated) {
-        stateRef.current.hasAnimated = true;
-      }
-      return next || stateRef.current.hasAnimated;
-    })();
-    const componentClassName = props.asChild ? "" : props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
-    const hasTextAncestor = !!(isWeb && isText ? useContext(TextAncestorContext) : false);
-    const languageContext = isRSC ? null : useContext(FontLanguageContext);
-    const isDisabled = props.disabled ?? ((_c = props.accessibilityState) == null ? void 0 : _c.disabled);
-    const isTaggable = !Component || typeof Component === "string";
-    const element = isWeb ? isTaggable ? props.tag || defaultTag || Component : Component : Component;
-    const BaseTextComponent = BaseText || element || "span";
-    const 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;
-    const avoidClassesWhileAnimating = animationsConfig == null ? void 0 : animationsConfig.isReactNative;
-    const hasEnterStyle = !!props.enterStyle;
-    const needsMount = Boolean(
-      (isWeb ? isClient : true) && (hasEnterStyle || props.animation)
-    );
-    const states = useServerState(
-      needsMount ? defaultComponentState : defaultComponentStateMounted
-    );
-    const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0];
-    const setState = states[1];
-    const setStateShallow = useShallowSetState(setState, debugProp, componentName);
-    const usePresence = animationsConfig == null ? void 0 : animationsConfig.usePresence;
-    const presence = !isRSC && isAnimated && usePresence ? usePresence() : null;
-    if (isAnimated && presence) {
-      const presenceState = presence[2];
-      if (presenceState) {
-        if (state.unmounted && presenceState.enterVariant) {
-          props[presenceState.enterVariant] = true;
-        }
-        if (!presenceState.isPresent && presenceState.exitVariant) {
-          props[presenceState.exitVariant] = true;
-        }
-      }
-    }
-    const isAnimatedReactNative = isAnimated && (animationsConfig == null ? void 0 : animationsConfig.isReactNative);
-    const isReactNative = Boolean(staticConfig.isReactNative || isAnimatedReactNative);
-    if (process.env.NODE_ENV === "development") {
-      const id = useId();
-      if (debugProp) {
-        const name = `${componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]"}`;
-        const type = isAnimatedReactNative ? "(animated)" : isReactNative ? "(rnw)" : "";
-        const dataIs = propsIn["data-is"] || "";
-        const banner = `${name}${dataIs ? ` ${dataIs}` : ""} ${type} id ${id}`;
-        console.group(`%c ${banner}`, "background: yellow;");
-        if (!isServer) {
-          console.log("state", state);
-        }
-      }
-    }
-    const shouldAvoidClasses = !isWeb || !!(props.animation && avoidClassesWhileAnimating) || !staticConfig.acceptsClassName;
-    const shouldForcePseudo = !!propsIn.forceStyle;
-    const noClassNames = shouldAvoidClasses || shouldForcePseudo;
-    const themeState = useThemeWithState({
-      name: props.theme,
-      componentName,
-      reset: props.reset,
-      inverse: props.themeInverse,
-      // @ts-expect-error
-      disable: props["data-themeable"],
-      debug: props.debug,
-      shouldUpdate: () => !!stateRef.current.didAccessThemeVariableValue
-    });
-    elementType = Component || elementType;
-    const isStringElement = typeof elementType === "string";
-    const isExiting = (presence == null ? void 0 : presence[0]) === false;
-    const mediaState = 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,
-      debugProp ? { props, staticConfig } : null
-    );
-    setDidGetVariableValue(false);
-    const splitStyles = useSplitStyles(
-      props,
-      staticConfig,
-      themeState.theme,
-      {
-        ...state,
-        mediaState,
-        noClassNames,
-        dynamicStylesInline: noClassNames,
-        hasTextAncestor,
-        resolveVariablesAs: "auto",
-        isExiting
-      },
-      null,
-      languageContext || void 0,
-      elementType,
-      debugProp
-    );
-    const isMediaSpaced = Array.isArray(splitStyles.hasMedia);
-    const shouldListenForMedia = didGetVariableValue() || isMediaSpaced || noClassNames && splitStyles.hasMedia === true;
-    setMediaShouldUpdate(stateRef, {
-      enabled: shouldListenForMedia,
-      keys: noClassNames && isMediaSpaced ? splitStyles.hasMedia : null
-    });
-    const hostRef = useServerRef(null);
-    const isAnimatedReactNativeWeb = isAnimated && avoidClassesWhileAnimating;
-    if (process.env.NODE_ENV === "development") {
-      if (!process.env.TAMAGUI_TARGET) {
-        console.error(
-          `No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`
-        );
-      }
-      if (debugProp) {
-        console.groupCollapsed("props");
-        console.log("props in", propsIn, "mapped to", props, "in order", Object.keys(props));
-        console.log("splitStyles", splitStyles);
-        console.log("shouldListenForMedia", shouldListenForMedia);
-        console.log("className", Object.values(splitStyles.classNames));
-        if (isClient) {
-          console.log("ref", hostRef, "(click to view)");
-        }
-        console.groupEnd();
-        if (debugProp === "break") {
-          debugger;
-        }
-      }
-    }
-    const {
-      viewProps: viewPropsIn,
-      pseudos,
-      style: splitStylesStyle,
-      classNames,
-      space
-    } = splitStyles;
-    const propsWithAnimation = props;
-    let animationStyles;
-    if (!isRSC && isAnimated && useAnimations && !staticConfig.isHOC) {
-      const animations = useAnimations({
-        props: propsWithAnimation,
-        style: splitStylesStyle,
-        presence,
-        state,
-        pseudos: pseudos || null,
-        onDidAnimate: props.onDidAnimate,
-        hostRef,
-        staticConfig
-      });
-      if (animations) {
-        animationStyles = animations.style;
-      }
-    }
-    const {
-      asChild,
-      children,
-      onPress,
-      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;
-    const disabled = ((_d = props.accessibilityState) == null ? void 0 : _d.disabled) || props.accessibilityDisabled;
-    let viewProps = nonTamaguiProps;
-    if (process.env.TAMAGUI_TARGET === "web" && !isReactNative && !asChild) {
-      viewProps = (_f = (_e = hooks).usePropsTransform) == null ? void 0 : _f.call(_e, elementType, nonTamaguiProps, hostRef);
-    } else {
-      viewProps = nonTamaguiProps;
-    }
-    viewProps.ref = useComposedRefs(hostRef, forwardedRef);
-    if (process.env.NODE_ENV === "development") {
-      if (!isText && isWeb && !staticConfig.isHOC) {
-        Children.toArray(props.children).forEach((item) => {
-          if (typeof item === "string" && item !== "\n") {
-            console.error(
-              `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
-            );
-          }
-        });
-      }
-    }
-    const unPress = useCallback(() => {
-      setStateShallow({
-        press: false,
-        pressIn: false
-      });
-    }, [setStateShallow]);
-    if (isWeb) {
-      useEffect(() => {
-        return () => {
-          mouseUps.delete(unPress);
-        };
-      }, []);
-    }
-    const shouldSetMounted = needsMount && state.unmounted;
-    useEffect(() => {
-      if (!shouldSetMounted)
-        return;
-      if (state.unmounted === true && needsMount) {
-        setStateShallow({
-          unmounted: false
-        });
-        return;
-      }
-      setStateShallow({
-        unmounted: false
-      });
-    }, [shouldSetMounted, state.unmounted]);
-    let styles;
-    if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
-      styles = {
-        ...animationStyles ?? splitStylesStyle
-      };
-    } else {
-      styles = [animationStyles ?? splitStylesStyle];
-      if (shouldForcePseudo) {
-        const next = {};
-        styles.forEach((style) => Object.assign(next, style));
-        Object.assign(splitStyles.style, next);
-      }
-    }
-    let fontFamily = isText ? splitStyles.fontFamily || staticConfig.defaultProps.fontFamily : null;
-    if (fontFamily && fontFamily[0] === "$") {
-      fontFamily = fontFamily.slice(1);
-    }
-    const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : "";
-    const classList = [
-      hasEnterStyle && (state.unmounted && needsMount || !isClient) ? "t_will-mount" : "",
-      componentName ? componentClassName : "",
-      fontFamilyClassName,
-      classNames ? Object.values(classNames).join(" ") : ""
-    ];
-    const className = classList.join(" ");
-    if (process.env.TAMAGUI_TARGET === "web") {
-      const style = animationStyles ?? splitStyles.style;
-      if (isAnimatedReactNativeWeb) {
-        viewProps.style = style;
-      } else if (isReactNative) {
-        const cnStyles = { $$css: true };
-        for (const name of className.split(" ")) {
-          cnStyles[name] = name;
-        }
-        viewProps.style = [...Array.isArray(style) ? style : [style], cnStyles];
-        if (process.env.NODE_ENV === "development") {
-          Object.keys(viewProps).forEach((key) => {
-            if (key.startsWith("data-")) {
-              viewProps.dataSet ??= {};
-              viewProps.dataSet[key.replace("data-", "")] = viewProps[key];
-              delete viewProps[key];
-            }
-          });
-        }
-      } else {
-        viewProps.className = className;
-        viewProps.style = style;
-      }
-    }
-    if (process.env.TAMAGUI_TARGET === "native") {
-      if (splitStyles.fontFamily) {
-        const faceInfo = (_g = tamaguiConfig.fontsParsed[splitStyles.fontFamily]) == null ? void 0 : _g.face;
-        if (faceInfo) {
-          const [weight, style] = (() => {
-            var _a2, _b2;
-            let weight2;
-            let style2;
-            for (let i = styles.length; i >= 0; i--) {
-              weight2 ??= (_a2 = styles[i]) == null ? void 0 : _a2.fontWeight;
-              style2 ??= (_b2 = styles[i]) == null ? void 0 : _b2.fontStyle;
-            }
-            return [weight2 || "400", style2 || "normal"];
-          })();
-          const overrideFace = (_i = (_h = faceInfo[weight]) == null ? void 0 : _h[style]) == null ? void 0 : _i.val;
-          if (overrideFace) {
-            for (const style2 of styles) {
-              if (style2 == null ? void 0 : style2.fontFamily) {
-                style2.fontFamily = overrideFace;
-                style2.fontWeight = void 0;
-                style2.fontStyle = void 0;
-              }
-            }
-          }
-        }
-      }
-      viewProps.style = styles;
-    }
-    const runtimePressStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.pressStyle);
-    const attachPress = Boolean(
-      runtimePressStyle || onPress || onPressOut || onPressIn || onClick
-    );
-    const runtimeHoverStyle = !disabled && noClassNames && (pseudos == null ? void 0 : pseudos.hoverStyle);
-    const isHoverable = isWeb && !!(runtimeHoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const handlesPressEvents = !(isWeb || asChild);
-    const shouldAttach = Boolean(
-      attachPress || isHoverable || noClassNames && "pressStyle" in props || isWeb && noClassNames && "hoverStyle" in props
-    );
-    const events = shouldAttach && !isRSC && !isDisabled && !asChild ? {
-      onPressOut: attachPress ? (e) => {
-        unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
-        onMouseUp == null ? void 0 : onMouseUp(e);
-      } : void 0,
-      ...isHoverable && {
-        onMouseEnter: isHoverable ? (e) => {
-          const next = {};
-          if (isHoverable) {
-            next.hover = true;
-          }
-          if (state.pressIn) {
-            next.press = true;
-          }
-          if (isHoverable || state.pressIn) {
-            setStateShallow(next);
-          }
-          onHoverIn == null ? void 0 : onHoverIn(e);
-          onMouseEnter == null ? void 0 : onMouseEnter(e);
-        } : void 0,
-        onMouseLeave: isHoverable ? (e) => {
-          const next = {};
-          mouseUps.add(unPress);
-          if (isHoverable) {
-            next.hover = false;
-          }
-          if (state.pressIn) {
-            next.press = false;
-            next.pressIn = false;
-          }
-          if (Object.keys(next).length) {
-            setStateShallow(next);
-          }
-          onHoverOut == null ? void 0 : onHoverOut(e);
-          onMouseLeave == null ? void 0 : onMouseLeave(e);
-        } : void 0
-      },
-      onPressIn: attachPress ? (e) => {
-        setStateShallow({
-          press: true,
-          pressIn: true,
-          hover: false
-        });
-        onPressIn == null ? void 0 : onPressIn(e);
-        onMouseDown == null ? void 0 : onMouseDown(e);
-        if (isWeb) {
-          mouseUps.add(unPress);
-        }
-      } : void 0,
-      onPress: attachPress ? (e) => {
-        unPress();
-        isWeb && (onClick == null ? void 0 : onClick(e));
-        onPress == null ? void 0 : onPress(e);
-      } : void 0
-    } : null;
-    if (process.env.TAMAGUI_TARGET === "native") {
-      if (events) {
-        Object.assign(events, {
-          cancelable: !props.rejectResponderTermination,
-          disabled: isDisabled,
-          hitSlop: props.hitSlop,
-          delayLongPress: props.delayLongPress,
-          delayPressIn: props.delayPressIn,
-          delayPressOut: props.delayPressOut,
-          focusable: viewProps.focusable ?? true,
-          minPressDuration: 0
-        });
-      }
-    }
-    (_k = (_j = hooks).useEvents) == null ? void 0 : _k.call(_j, viewProps, events, splitStyles, setStateShallow);
-    const shouldReset = !!(themeShallow && themeState.isNewTheme);
-    if (shouldReset) {
-      stateRef.current.themeShallow = true;
-    }
-    let content = !children || asChild ? children : spacedChildren({
-      separator,
-      children,
-      space,
-      direction: props.spaceDirection || "both",
-      isZStack,
-      debug: debugProp
-    });
-    if (asChild) {
-      elementType = Slot;
-      viewProps = {
-        ...viewProps,
-        onPress,
-        onPressIn,
-        onPressOut
-      };
-    }
-    content = createElement(elementType, viewProps, content);
-    content = useThemedChildren(themeState, content, {
-      shallow: stateRef.current.themeShallow
-      // passPropsToChildren: true,
-    });
-    if (process.env.TAMAGUI_TARGET === "web") {
-      if (events || isAnimatedReactNativeWeb) {
-        content = /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `${isAnimatedReactNativeWeb ? className : ""}  _dsp_contents`,
-            ...events && {
-              onMouseEnter: events.onMouseEnter,
-              onMouseLeave: events.onMouseLeave,
-              onClick: events.onPress,
-              onMouseDown: events.onPressIn,
-              onMouseUp: events.onPressOut,
-              onTouchStart: events.onPressIn,
-              onTouchEnd: events.onPressOut
-            },
-            children: content
-          }
-        );
-      }
-    }
-    if (process.env.NODE_ENV === "development" && process.env.DEBUG !== "tamagui") {
-      if (debugProp) {
-        const element2 = typeof elementType === "string" ? elementType : "Component";
-        console.groupCollapsed(`render <${element2} /> with props`, viewProps);
-        for (const key in viewProps) {
-          console.log(key, viewProps[key]);
-        }
-        console.log("children", content);
-        console.groupEnd();
-        if (typeof window !== "undefined") {
-          console.log({ state, themeState, isAnimated, isAnimatedReactNativeWeb, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: (_l = props.className) == null ? void 0 : _l.split(" "), classNamesOut: (_m = viewProps.className) == null ? void 0 : _m.split(" "), events, shouldAttach, styles, pseudos, content, shouldAvoidClasses, avoidClasses: avoidClassesWhileAnimating, animation: props.animation, style: splitStylesStyle, staticConfig, tamaguiConfig, shouldForcePseudo });
-        }
-        console.groupEnd();
-      }
-    }
-    return content;
-  });
-  if (staticConfig.componentName) {
-    component.displayName = staticConfig.componentName;
-  }
-  onConfiguredOnce((conf) => {
-    if (!tamaguiConfig) {
-      tamaguiConfig = conf;
-      if (!initialTheme) {
-        const next = conf.themes[Object.keys(conf.themes)[0]];
-        initialTheme = proxyThemeVariables(next);
-        if (process.env.NODE_ENV === "development") {
-          if (!initialTheme) {
-            console.log("Warning: Missing theme");
-          }
-        }
-      }
-    }
-    mergeShorthands(staticConfig, tamaguiConfig);
-    let defaultPropsIn = staticConfig.defaultProps || {};
-    const parentNames = [...staticConfig.parentNames || [], staticConfig.componentName];
-    if (tamaguiConfig.defaultProps && parentNames && staticConfig.componentName) {
-      defaultPropsIn = mergeConfigDefaultProps(
-        staticConfig.componentName,
-        defaultPropsIn,
-        tamaguiConfig.defaultProps,
-        parentNames,
-        tamaguiConfig
-      );
-    }
-    const debug = defaultPropsIn["debug"];
-    const [ourProps, ourClassNames] = mergeProps(defaultPropsIn, {});
-    if (ourProps.tag) {
-      defaultTag = ourProps.tag;
-    }
-    const noClassNames = !staticConfig.acceptsClassName;
-    const { name, variants, defaultVariants, ...restProps } = ourProps;
-    const [defaults, defaultsClassnames] = mergeProps(component.defaultProps, {
-      ...defaultVariants,
-      ...restProps
-    });
-    if (!isWeb) {
-      for (const key in staticConfig.defaultProps) {
-        const val = staticConfig.defaultProps[key];
-        if (validPseudoKeys[key])
-          continue;
-        defaults[key] = val;
-      }
-    }
-    tamaguiDefaultProps = defaults;
-    if (process.env.NODE_ENV === "development" && debug) {
-      if (process.env.IS_STATIC !== "is_static") {
-        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
-          staticConfig,
-          tamaguiDefaultProps,
-          defaults,
-          defaultPropsIn,
-          defaultPropsKeyOrder: Object.keys(staticConfig.defaultProps),
-          defaultPropsInKeyOrder: Object.keys(defaultPropsIn).map((k) => [
-            k,
-            defaultPropsIn[k]
-          ]),
-          ourProps,
-          ourClassNames,
-          defaultsClassnames,
-          defaultTag,
-          noClassNames
-        });
-      }
-    }
-  });
-  let res = component;
-  if (configIn.memo) {
-    res = memo(res);
-  }
-  res.staticConfig = {
-    validStyles: staticConfig.validStyles || stylePropsView,
-    ...staticConfig
-  };
-  res.extractable = (Component, conf) => {
-    Component.staticConfig = extendStaticConfig(
-      {
-        Component,
-        ...conf,
-        neverFlatten: true,
-        isHOC: true,
-        defaultProps: {
-          ...Component.defaultProps,
-          ...conf == null ? void 0 : conf.defaultProps
-        }
-      },
-      res
-    );
-    return Component;
-  };
-  return res;
-}
-const Unspaced = (props) => props.children;
-Unspaced["isUnspaced"] = true;
-const Spacer = createComponent({
-  acceptsClassName: true,
-  memo: true,
-  componentName: "Spacer",
-  validStyles,
-  defaultProps: {
-    ...stackDefaultStyles,
-    // avoid nesting issues
-    tag: "span",
-    size: true,
-    pointerEvents: "none"
-  },
-  variants: {
-    size: {
-      "...size": (size, { tokens }) => {
-        size = size === true ? "$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) {
-  var _a, _b, _c;
-  const { isZStack, children, space, direction, spaceFlex, separator } = props;
-  const hasSpace = !!(space || spaceFlex);
-  const hasSeparator = !(separator === void 0 || separator === null);
-  if (!(hasSpace || hasSeparator || isZStack)) {
-    return children;
-  }
-  const childrenList = Children.toArray(children);
-  const len = childrenList.length;
-  if (len <= 1 && !isZStack && !((_b = (_a = childrenList[0]) == null ? void 0 : _a["type"]) == null ? void 0 : _b["shouldForwardSpace"])) {
-    return childrenList;
-  }
-  const final = [];
-  for (let [index, child] of childrenList.entries()) {
-    const isEmpty = child === null || child === void 0 || Array.isArray(child) && child.length === 0;
-    if (!isEmpty && React.isValidElement(child) && ((_c = child.type) == null ? void 0 : _c["shouldForwardSpace"])) {
-      child = React.cloneElement(child, {
-        space,
-        spaceFlex,
-        separator,
-        key: child.key
-      });
-    }
-    if (isEmpty || !child || child["key"] && !isZStack) {
-      final.push(child);
-    } else {
-      final.push(
-        /* @__PURE__ */ jsx(Fragment, { children: isZStack ? /* @__PURE__ */ jsx(AbsoluteFill, { children: child }) : child }, index)
-      );
-    }
-    if (isUnspaced(child) && index === 0)
-      continue;
-    if (isZStack)
-      continue;
-    const next = childrenList[index + 1];
-    if (next && !isUnspaced(next)) {
-      if (separator) {
-        if (hasSpace) {
-          final.push(
-            createSpacer({
-              key: `_${index}_00tmgui`,
-              direction,
-              space,
-              spaceFlex
-            })
-          );
-        }
-        final.push(
-          React.isValidElement(separator) ? React.cloneElement(separator, { key: `sep_${index}` }) : separator
-        );
-        if (hasSpace) {
-          final.push(
-            createSpacer({
-              key: `_${index}01tmgui`,
-              direction,
-              space,
-              spaceFlex
-            })
-          );
-        }
-      } else {
-        final.push(
-          createSpacer({
-            key: `_${index}02tmgui`,
-            direction,
-            space,
-            spaceFlex
-          })
-        );
-      }
-    }
-  }
-  if (process.env.NODE_ENV === "development") {
-    if (props.debug) {
-      console.log(`  Spaced children`, final, props);
-    }
-  }
-  return final;
-}
-function createSpacer({ key, direction, space, spaceFlex }) {
-  return /* @__PURE__ */ jsx(
-    Spacer,
-    {
-      size: space,
-      direction,
-      ...typeof spaceFlex !== "undefined" && {
-        flex: spaceFlex === true ? 1 : spaceFlex === false ? 0 : spaceFlex
-      }
-    },
-    key
-  );
-}
-function isUnspaced(child) {
-  const t = child == null ? void 0 : child["type"];
-  return (t == null ? void 0 : t["isVisuallyHidden"]) || (t == null ? void 0 : t["isUnspaced"]);
-}
-const DefaultProps = /* @__PURE__ */ new Map();
-function mergeConfigDefaultProps(name, props, configDefaults, parentNames, conf) {
-  const len = parentNames.length;
-  let prev;
-  for (let i = 0; i < len; i++) {
-    const n = parentNames[i];
-    if (!n)
-      continue;
-    if (DefaultProps.has(n)) {
-      prev = DefaultProps.get(n);
-      continue;
-    }
-    const props2 = configDefaults[n];
-    if (!props2) {
-      if (prev) {
-        DefaultProps.set(n, prev);
-      }
-      continue;
-    }
-    prev = mergeProps(prev || {}, props2, false, conf.inverseShorthands)[0];
-    DefaultProps.set(n, prev);
-  }
-  const ourDefaultsMerged = DefaultProps.get(name);
-  if (ourDefaultsMerged) {
-    return mergeProps(props, ourDefaultsMerged, false, conf.inverseShorthands)[0];
-  }
-  return props;
-}
-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;
-  });
-}
-export {
-  Spacer,
-  Unspaced,
-  createComponent,
-  defaultComponentState,
-  mouseUps,
-  spacedChildren
-};
+import{jsx as ue}from"react/jsx-runtime";import{useComposedRefs as xt}from"@tamagui/compose-refs";import{isClient as Ae,isRSC as ce,isServer as Rt,isWeb as T}from"@tamagui/constants";import{stylePropsView as Vt,validPseudoKeys as Ot,validStyles as _t}from"@tamagui/helpers";import de,{Children as nt,Fragment as kt,createElement as Dt,forwardRef as Mt,memo as Ut,useCallback as Gt,useContext as ot,useEffect as at,useId as It,useRef as $t}from"react";import{onConfiguredOnce as Ft}from"./config.js";import{stackDefaultStyles as it}from"./constants/constants.js";import{FontLanguageContext as jt}from"./contexts/FontLanguageContext.js";import{TextAncestorContext as Bt}from"./contexts/TextAncestorContext.js";import{didGetVariableValue as Lt,setDidGetVariableValue as Wt}from"./createVariable.js";import{extendStaticConfig as rt,parseStaticConfig as Ht}from"./helpers/extendStaticConfig.js";import{useSplitStyles as Kt}from"./helpers/getSplitStyles.js";import{mergeProps as Z}from"./helpers/mergeProps.js";import{proxyThemeVariables as Zt}from"./helpers/proxyThemeVariables.js";import{useShallowSetState as zt}from"./helpers/useShallowSetState.js";import{useAnimationDriver as qt}from"./hooks/useAnimationDriver.js";import{setMediaShouldUpdate as Jt,useMedia as Qt}from"./hooks/useMedia.js";import{useServerRef as Xt,useServerState as Yt}from"./hooks/useServerHooks.js";import{useThemeWithState as es}from"./hooks/useTheme.js";import{hooks as Ce}from"./setupHooks.js";import{Slot as ts}from"./views/Slot.js";import{useThemedChildren as ss}from"./views/Theme.js";process.env.TAMAGUI_TARGET;const lt={hover:!1,press:!1,pressIn:!1,focus:!1,unmounted:!0},ns={...lt,unmounted:!1};let M,ct,dt,Ne;const z=new Set;if(typeof document<"u"){const n=()=>{z.forEach(a=>a()),z.clear()};addEventListener("mouseup",n),addEventListener("touchend",n),addEventListener("touchcancel",n)}function os({defaultProps:n},{shorthands:a}){for(const t of Object.keys(n))n[a[t]||t]=n[t]}let ut,ft,mt=!1;function pt(n,a){const t=(()=>{const o=rt(n,a);return"parsed"in o?o:Ht(o)})(),p=`is_${t.componentName}`;let v,A;const m=Mt((o,i)=>{var je,Be,Le,We,He,Ke,Ze,ze,qe,Je,Qe,Xe,Ye;if(process.env.TAMAGUI_TARGET==="native"&&!mt){mt=!0;const e=(Be=(je=Ce).getBaseViews)==null?void 0:Be.call(je);e&&(ut=e.Text,ft=e.View)}process.env.NODE_ENV==="test"&&o["data-test-renders"]&&(o["data-test-renders"].current??=0,o["data-test-renders"].current+=1);let s;v&&!o.asChild?s=Z(v,o)[0]:s=o;const f=s.debug,{Component:u,isText:w,isZStack:G}=t,h=s.componentName||t.componentName,r=$t(void 0);r.current??={};const c=qt(),O=c==null?void 0:c.useAnimations,b=(()=>{const e=!!(!t.isHOC&&O&&(s.animation||s.style&&ds(s.style)));return e&&!r.current.hasAnimated&&(r.current.hasAnimated=!0),e||r.current.hasAnimated})(),fe=s.asChild?"":s.componentName?`is_${s.componentName}`:p,C=!!(T&&w&&ot(Bt)),me=ce?null:ot(jt),we=s.disabled??((Le=s.accessibilityState)==null?void 0:Le.disabled),xe=T&&(!u||typeof u=="string")&&(s.tag||A)||u,Re=ut||xe||"span",Ve=ft||xe||(C?"span":"div");ct=c?c.Text:Re,dt=c?c.View:Ve;let x=w?(b?ct:null)||Re:(b?dt:null)||Ve;const pe=c==null?void 0:c.isReactNative,Oe=!!s.enterStyle,J=Boolean((T?Ae:!0)&&(Oe||s.animation)),ye=Yt(J?lt:ns),P=o.forceStyle?{...ye[0],[o.forceStyle]:!0}:ye[0],ht=ye[1],_=zt(ht,f,h),_e=c==null?void 0:c.usePresence,I=!ce&&b&&_e?_e():null;if(b&&I){const e=I[2];e&&(P.unmounted&&e.enterVariant&&(s[e.enterVariant]=!0),!e.isPresent&&e.exitVariant&&(s[e.exitVariant]=!0))}const ke=b&&(c==null?void 0:c.isReactNative),he=Boolean(t.isReactNative||ke);if(process.env.NODE_ENV==="development"){const e=It();if(f){const d=`${h||(u==null?void 0:u.displayName)||(u==null?void 0:u.name)||"[Unnamed Component]"}`,N=ke?"(animated)":he?"(rnw)":"",K=o["data-is"]||"",E=`${d}${K?` ${K}`:""} ${N} id ${e}`;console.group(`%c ${E}`,"background: yellow;"),Rt||console.log("state",P)}}const ge=!T||!!(s.animation&&pe)||!t.acceptsClassName,Q=!!o.forceStyle,k=ge||Q,X=es({name:s.theme,componentName:h,reset:s.reset,inverse:s.themeInverse,disable:s["data-themeable"],debug:s.debug,shouldUpdate:()=>!!r.current.didAccessThemeVariableValue});x=u||x;const De=typeof x=="string",gt=(I==null?void 0:I[0])===!1,St=Qt(r,f?{props:s,staticConfig:t}:null);Wt(!1);const g=Kt(s,t,X.theme,{...P,mediaState:St,noClassNames:k,dynamicStylesInline:k,hasTextAncestor:C,resolveVariablesAs:"auto",isExiting:gt},null,me||void 0,x,f),Me=Array.isArray(g.hasMedia),Ue=Lt()||Me||k&&g.hasMedia===!0;Jt(r,{enabled:Ue,keys:k&&Me?g.hasMedia:null});const Y=Xt(null),ee=b&&pe;if(process.env.NODE_ENV==="development"&&(process.env.TAMAGUI_TARGET||console.error('No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".'),f&&(console.groupCollapsed("props"),console.log("props in",o,"mapped to",s,"in order",Object.keys(s)),console.log("splitStyles",g),console.log("shouldListenForMedia",Ue),console.log("className",Object.values(g.classNames)),Ae&&console.log("ref",Y,"(click to view)"),console.groupEnd(),f==="break")))debugger;const{viewProps:vt,pseudos:D,style:te,classNames:Ge,space:bt}=g,Pt=s;let F;if(!ce&&b&&O&&!t.isHOC){const e=O({props:Pt,style:te,presence:I,state:P,pseudos:D||null,onDidAnimate:s.onDidAnimate,hostRef:Y,staticConfig:t});e&&(F=e.style)}const{asChild:j,children:Se,onPress:B,onPressIn:L,onPressOut:W,onHoverIn:se,onHoverOut:ne,themeShallow:Tt,spaceDirection:fs,disabled:ms,onMouseUp:ve,onMouseDown:be,onMouseEnter:oe,onMouseLeave:ae,separator:At,forceStyle:ps,onClick:ie,theme:ys,defaultVariants:hs,...Pe}=vt,Ie=((We=s.accessibilityState)==null?void 0:We.disabled)||s.accessibilityDisabled;let l=Pe;process.env.TAMAGUI_TARGET==="web"&&!he&&!j?l=(Ke=(He=Ce).usePropsTransform)==null?void 0:Ke.call(He,x,Pe,Y):l=Pe,l.ref=xt(Y,i),process.env.NODE_ENV==="development"&&!w&&T&&!t.isHOC&&nt.toArray(s.children).forEach(e=>{typeof e=="string"&&e!==`
+`&&console.error(`Unexpected text node: ${e}. A text node cannot be a child of a <View>.`)});const H=Gt(()=>{_({press:!1,pressIn:!1})},[_]);T&&at(()=>()=>{z.delete(H)},[]);const $e=J&&P.unmounted;at(()=>{if($e){if(P.unmounted===!0&&J){_({unmounted:!1});return}_({unmounted:!1})}},[$e,P.unmounted]);let R;if(De&&ge&&!Q)R={...F??te};else if(R=[F??te],Q){const e={};R.forEach(d=>Object.assign(e,d)),Object.assign(g.style,e)}let $=w?g.fontFamily||t.defaultProps.fontFamily:null;$&&$[0]==="$"&&($=$.slice(1));const Ct=$?`font_${$}`:"",Te=[Oe&&(P.unmounted&&J||!Ae)?"t_will-mount":"",h?fe:"",Ct,Ge?Object.values(Ge).join(" "):""].join(" ");if(process.env.TAMAGUI_TARGET==="web"){const e=F??g.style;if(ee)l.style=e;else if(he){const d={$$css:!0};for(const N of Te.split(" "))d[N]=N;l.style=[...Array.isArray(e)?e:[e],d],process.env.NODE_ENV==="development"&&Object.keys(l).forEach(N=>{N.startsWith("data-")&&(l.dataSet??={},l.dataSet[N.replace("data-","")]=l[N],delete l[N])})}else l.className=Te,l.style=e}if(process.env.TAMAGUI_TARGET==="native"){if(g.fontFamily){const e=(Ze=M.fontsParsed[g.fontFamily])==null?void 0:Ze.face;if(e){const[d,N]=(()=>{var tt,st;let E,et;for(let le=R.length;le>=0;le--)E??=(tt=R[le])==null?void 0:tt.fontWeight,et??=(st=R[le])==null?void 0:st.fontStyle;return[E||"400",et||"normal"]})(),K=(qe=(ze=e[d])==null?void 0:ze[N])==null?void 0:qe.val;if(K)for(const E of R)E!=null&&E.fontFamily&&(E.fontFamily=K,E.fontWeight=void 0,E.fontStyle=void 0)}}l.style=R}const Nt=!Ie&&k&&(D==null?void 0:D.pressStyle),re=Boolean(Nt||B||W||L||ie),Et=!Ie&&k&&(D==null?void 0:D.hoverStyle),U=T&&!!(Et||se||ne||oe||ae),wt=!(T||j),Fe=Boolean(re||U||k&&"pressStyle"in s||T&&k&&"hoverStyle"in s),S=Fe&&!ce&&!we&&!j?{onPressOut:re?e=>{H(),W==null||W(e),ve==null||ve(e)}:void 0,...U&&{onMouseEnter:U?e=>{const d={};U&&(d.hover=!0),P.pressIn&&(d.press=!0),(U||P.pressIn)&&_(d),se==null||se(e),oe==null||oe(e)}:void 0,onMouseLeave:U?e=>{const d={};z.add(H),U&&(d.hover=!1),P.pressIn&&(d.press=!1,d.pressIn=!1),Object.keys(d).length&&_(d),ne==null||ne(e),ae==null||ae(e)}:void 0},onPressIn:re?e=>{_({press:!0,pressIn:!0,hover:!1}),L==null||L(e),be==null||be(e),T&&z.add(H)}:void 0,onPress:re?e=>{H(),T&&(ie==null||ie(e)),B==null||B(e)}:void 0}:null;process.env.TAMAGUI_TARGET==="native"&&S&&Object.assign(S,{cancelable:!s.rejectResponderTermination,disabled:we,hitSlop:s.hitSlop,delayLongPress:s.delayLongPress,delayPressIn:s.delayPressIn,delayPressOut:s.delayPressOut,focusable:l.focusable??!0,minPressDuration:0}),(Qe=(Je=Ce).useEvents)==null||Qe.call(Je,l,S,g,_),!!(Tt&&X.isNewTheme)&&(r.current.themeShallow=!0);let V=!Se||j?Se:rs({separator:At,children:Se,space:bt,direction:s.spaceDirection||"both",isZStack:G,debug:f});if(j&&(x=ts,l={...l,onPress:B,onPressIn:L,onPressOut:W}),V=Dt(x,l,V),V=ss(X,V,{shallow:r.current.themeShallow}),process.env.TAMAGUI_TARGET==="web"&&(S||ee)&&(V=ue("span",{className:`${ee?Te:""}  _dsp_contents`,...S&&{onMouseEnter:S.onMouseEnter,onMouseLeave:S.onMouseLeave,onClick:S.onPress,onMouseDown:S.onPressIn,onMouseUp:S.onPressOut,onTouchStart:S.onPressIn,onTouchEnd:S.onPressOut},children:V})),process.env.NODE_ENV==="development"&&process.env.DEBUG!=="tamagui"&&f){console.groupCollapsed(`render <${typeof x=="string"?x:"Component"} /> with props`,l);for(const d in l)console.log(d,l[d]);console.log("children",V),console.groupEnd(),typeof window<"u"&&console.log({state:P,themeState:X,isAnimated:b,isAnimatedReactNativeWeb:ee,tamaguiDefaultProps:v,viewProps:l,splitStyles:g,animationStyles:F,handlesPressEvents:wt,isStringElement:De,classNamesIn:(Xe=s.className)==null?void 0:Xe.split(" "),classNamesOut:(Ye=l.className)==null?void 0:Ye.split(" "),events:S,shouldAttach:Fe,styles:R,pseudos:D,content:V,shouldAvoidClasses:ge,avoidClasses:pe,animation:s.animation,style:te,staticConfig:t,tamaguiConfig:M,shouldForcePseudo:Q}),console.groupEnd()}return V});t.componentName&&(m.displayName=t.componentName),Ft(o=>{if(!M&&(M=o,!Ne)){const C=o.themes[Object.keys(o.themes)[0]];Ne=Zt(C),process.env.NODE_ENV==="development"&&(Ne||console.log("Warning: Missing theme"))}os(t,M);let i=t.defaultProps||{};const s=[...t.parentNames||[],t.componentName];M.defaultProps&&s&&t.componentName&&(i=ls(t.componentName,i,M.defaultProps,s,M));const f=i.debug,[u,w]=Z(i,{});u.tag&&(A=u.tag);const G=!t.acceptsClassName,{name:h,variants:r,defaultVariants:c,...O}=u,[b,fe]=Z(m.defaultProps,{...c,...O});if(!T)for(const C in t.defaultProps){const me=t.defaultProps[C];Ot[C]||(b[C]=me)}v=b,process.env.NODE_ENV==="development"&&f&&process.env.IS_STATIC!=="is_static"&&console.log(`\u{1F41B} [${t.componentName||"Component"}]`,{staticConfig:t,tamaguiDefaultProps:v,defaults:b,defaultPropsIn:i,defaultPropsKeyOrder:Object.keys(t.defaultProps),defaultPropsInKeyOrder:Object.keys(i).map(C=>[C,i[C]]),ourProps:u,ourClassNames:w,defaultsClassnames:fe,defaultTag:A,noClassNames:G})});let y=m;return n.memo&&(y=Ut(y)),y.staticConfig={validStyles:t.validStyles||Vt,...t},y.extractable=(o,i)=>(o.staticConfig=rt({Component:o,...i,neverFlatten:!0,isHOC:!0,defaultProps:{...o.defaultProps,...i==null?void 0:i.defaultProps}},y),o),y}const as=n=>n.children;as.isUnspaced=!0;const is=pt({acceptsClassName:!0,memo:!0,componentName:"Spacer",validStyles:_t,defaultProps:{...it,tag:"span",size:!0,pointerEvents:"none"},variants:{size:{"...size":(n,{tokens:a})=>{n=n===!0?"$true":n;const t=a.space[n]??n;return{width:t,height:t,minWidth:t,minHeight:t}}},flex:{true:{flexGrow:1}},direction:{horizontal:{height:0,minHeight:0},vertical:{width:0,minWidth:0},both:{}}}});function rs(n){var u,w,G;const{isZStack:a,children:t,space:p,direction:v,spaceFlex:A,separator:m}=n,y=!!(p||A),o=m!=null;if(!(y||o||a))return t;const i=nt.toArray(t);if(i.length<=1&&!a&&!((w=(u=i[0])==null?void 0:u.type)!=null&&w.shouldForwardSpace))return i;const f=[];for(let[h,r]of i.entries()){const c=r==null||Array.isArray(r)&&r.length===0;if(!c&&de.isValidElement(r)&&((G=r.type)!=null&&G.shouldForwardSpace)&&(r=de.cloneElement(r,{space:p,spaceFlex:A,separator:m,key:r.key})),c||!r||r.key&&!a?f.push(r):f.push(ue(kt,{children:a?ue(cs,{children:r}):r},h)),yt(r)&&h===0||a)continue;const O=i[h+1];O&&!yt(O)&&(m?(y&&f.push(Ee({key:`_${h}_00tmgui`,direction:v,space:p,spaceFlex:A})),f.push(de.isValidElement(m)?de.cloneElement(m,{key:`sep_${h}`}):m),y&&f.push(Ee({key:`_${h}01tmgui`,direction:v,space:p,spaceFlex:A}))):f.push(Ee({key:`_${h}02tmgui`,direction:v,space:p,spaceFlex:A})))}return process.env.NODE_ENV==="development"&&n.debug&&console.log("  Spaced children",f,n),f}function Ee({key:n,direction:a,space:t,spaceFlex:p}){return ue(is,{size:t,direction:a,...typeof p<"u"&&{flex:p===!0?1:p===!1?0:p}},n)}function yt(n){const a=n==null?void 0:n.type;return(a==null?void 0:a.isVisuallyHidden)||(a==null?void 0:a.isUnspaced)}const q=new Map;function ls(n,a,t,p,v){const A=p.length;let m;for(let o=0;o<A;o++){const i=p[o];if(!i)continue;if(q.has(i)){m=q.get(i);continue}const s=t[i];if(!s){m&&q.set(i,m);continue}m=Z(m||{},s,!1,v.inverseShorthands)[0],q.set(i,m)}const y=q.get(n);return y?Z(a,y,!1,v.inverseShorthands)[0]:a}const cs=pt({defaultProps:{...it,flexDirection:"column",position:"absolute",top:0,right:0,bottom:0,left:0,pointerEvents:"box-none"}});function ds(n){return Object.keys(n).some(a=>{const t=n[a];return t&&typeof t=="object"&&"_animation"in t})}export{is as Spacer,as as Unspaced,pt as createComponent,lt as defaultComponentState,z as mouseUps,rs as spacedChildren};
 //# sourceMappingURL=createComponent.js.map