@hanzogui/web 2.0.0-rc.41-hanzoai.5

package/dist/cjs/createComponent.cjs

@@ -0,0 +1,1053 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__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: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var createComponent_exports = {};
+__export(createComponent_exports, {
+  componentSetStates: () => componentSetStates,
+  createComponent: () => createComponent
+});
+module.exports = __toCommonJS(createComponent_exports);
+var import_compose_refs = require("@hanzogui/compose-refs");
+var import_constants = require("@hanzogui/constants");
+require("@hanzogui/native");
+var import_helpers = require("@hanzogui/helpers");
+var import_is_equal_shallow = require("@hanzogui/is-equal-shallow");
+var import_react = __toESM(require("react"), 1);
+var import_config = require("./config.cjs");
+var import_isDevTools = require("./constants/isDevTools.cjs");
+var import_ComponentContext = require("./contexts/ComponentContext.cjs");
+var import_GroupContext = require("./contexts/GroupContext.cjs");
+var import_createVariable = require("./createVariable.cjs");
+var import_defaultComponentState = require("./defaultComponentState.cjs");
+var import_eventHandling = require("./eventHandling.cjs");
+var import_getDefaultProps = require("./helpers/getDefaultProps.cjs");
+var import_resolveAnimationDriver = require("./helpers/resolveAnimationDriver.cjs");
+var import_getSplitStyles = require("./helpers/getSplitStyles.cjs");
+var import_log = require("./helpers/log.cjs");
+var import_mergeProps = require("./helpers/mergeProps.cjs");
+var import_mergeRenderElementProps = require("./helpers/mergeRenderElementProps.cjs");
+var import_objectIdentityKey = require("./helpers/objectIdentityKey.cjs");
+var import_pointerEvents = require("./helpers/pointerEvents.cjs");
+var import_pseudoTransitions = require("./helpers/pseudoTransitions.cjs");
+var import_setElementProps = require("./helpers/setElementProps.cjs");
+var import_subscribeToContextGroup = require("./helpers/subscribeToContextGroup.cjs");
+var import_themeable = require("./helpers/themeable.cjs");
+var import_wrapStyleTags = require("./helpers/wrapStyleTags.cjs");
+var import_useComponentState = require("./hooks/useComponentState.cjs");
+var import_useMedia = require("./hooks/useMedia.cjs");
+var import_useTheme = require("./hooks/useTheme.cjs");
+var import_setupHooks = require("./setupHooks.cjs");
+var import_Slot = require("./views/Slot.cjs");
+var import_Theme = require("./views/Theme.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+let time;
+let debugKeyListeners;
+let startVisualizer;
+const componentSetStates = /* @__PURE__ */new Set();
+const avoidReRenderKeys = /* @__PURE__ */new Set(["hover", "press", "pressIn", "group", "focus", "focusWithin", "media", "group"]);
+if (typeof window !== "undefined") {
+  const cancelPresses = () => {
+    componentSetStates.forEach(setState => setState(prev => {
+      if (prev.press || prev.pressIn) return {
+        ...prev,
+        press: false,
+        pressIn: false
+      };
+      return prev;
+    }));
+    componentSetStates.clear();
+  };
+  const cancelTouches = () => {
+    componentSetStates.forEach(setState => setState(prev => {
+      if (prev.press || prev.pressIn || prev.hover) return {
+        ...prev,
+        press: false,
+        pressIn: false,
+        hover: false
+      };
+      return prev;
+    }));
+    componentSetStates.clear();
+  };
+  addEventListener("mouseup", cancelPresses);
+  addEventListener("touchend", cancelTouches);
+  addEventListener("touchcancel", cancelTouches);
+  if (process.env.NODE_ENV === "development") startVisualizer = () => {
+    const devVisualizerConfig = import_config.devConfig?.visualizer;
+    if (devVisualizerConfig && !globalThis.__hanzoguiDevVisualizer) {
+      let show = function (val) {
+          clearTimeout(tm);
+          isShowing = val;
+          debugKeyListeners?.forEach(l => l(val));
+          if (!val && resizeListener) {
+            window.removeEventListener("resize", resizeListener);
+            resizeListener = null;
+          }
+        },
+        cancelShow = function () {
+          clearTimeout(tm);
+          if (resizeListener) {
+            window.removeEventListener("resize", resizeListener);
+            resizeListener = null;
+          }
+        };
+      globalThis.__hanzoguiDevVisualizer = true;
+      debugKeyListeners = /* @__PURE__ */new Set();
+      let tm;
+      let isShowing = false;
+      let resizeListener = null;
+      const options = {
+        key: "Alt",
+        delay: 800,
+        ...(typeof devVisualizerConfig === "object" ? devVisualizerConfig : {})
+      };
+      window.addEventListener("blur", () => {
+        show(false);
+      });
+      window.addEventListener("keydown", ({
+        key,
+        metaKey,
+        defaultPrevented
+      }) => {
+        clearTimeout(tm);
+        if (defaultPrevented) return;
+        if (metaKey) return;
+        if (key === options.key) {
+          if (!resizeListener) {
+            resizeListener = () => cancelShow();
+            window.addEventListener("resize", resizeListener);
+          }
+          tm = setTimeout(() => {
+            show(true);
+          }, options.delay);
+        }
+      });
+      window.addEventListener("keyup", ({
+        defaultPrevented
+      }) => {
+        if (defaultPrevented) return;
+        cancelShow();
+        if (isShowing) show(false);
+      });
+    }
+  };
+}
+const lastInteractionWasKeyboard = {
+  value: false
+};
+const lastInteractionWasTouch = {
+  value: false
+};
+if (import_constants.isWeb && typeof document !== "undefined") {
+  document.addEventListener("keydown", () => {
+    if (!lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = true;
+  });
+  document.addEventListener("mousedown", () => {
+    if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
+  });
+  document.addEventListener("mousemove", () => {
+    if (lastInteractionWasKeyboard.value) lastInteractionWasKeyboard.value = false;
+    lastInteractionWasTouch.value = false;
+  });
+  document.addEventListener("touchstart", () => {
+    lastInteractionWasTouch.value = true;
+  });
+}
+function createComponent(staticConfig) {
+  let config = null;
+  const {
+    Component,
+    isText,
+    isHOC
+  } = staticConfig;
+  const component = import_react.default.forwardRef((propsIn, forwardedRef) => {
+    "use no memo";
+
+    config = config || (0, import_config.getConfig)();
+    const internalID = process.env.NODE_ENV === "development" ? import_react.default.useId() : "";
+    if (process.env.NODE_ENV === "development") {
+      if (startVisualizer) {
+        startVisualizer();
+        startVisualizer = void 0;
+      }
+    }
+    if (process.env.NODE_ENV === "test") {
+      if (propsIn["data-test-renders"]) {
+        propsIn["data-test-renders"]["current"] = propsIn["data-test-renders"]["current"] ?? 0;
+        propsIn["data-test-renders"]["current"] += 1;
+      }
+    }
+    const {
+      context,
+      isReactNative
+    } = staticConfig;
+    const debugProp = propsIn["debug"];
+    const styledContextValue = context ? import_react.default.useContext(context) : void 0;
+    let overriddenContextProps = null;
+    const componentContext = import_react.default.useContext(import_ComponentContext.ComponentContext);
+    const hasTextAncestor = !!(import_constants.isWeb && isText ? componentContext.inText : false);
+    if (!process.env.TAMAGUI_IS_CORE_NODE && process.env.NODE_ENV === "development" && debugProp === "profile" && !time) {
+      time = require("@hanzogui/timer").timer().start();
+      globalThis["time"] = time;
+    }
+    if (process.env.NODE_ENV === "development" && !time && globalThis.time) time = globalThis.time;
+    if (process.env.NODE_ENV === "development" && time) time`non-hanzogui time (ignore)`;
+    let props = propsIn;
+    const componentName = props.componentName || staticConfig.componentName;
+    const defaultProps = (0, import_getDefaultProps.getDefaultProps)(staticConfig, props.componentName);
+    const [nextProps, overrides] = (0, import_mergeProps.mergeComponentProps)(defaultProps, styledContextValue, propsIn);
+    props = nextProps;
+    overriddenContextProps = overrides;
+    if (process.env.NODE_ENV === "development" && import_constants.isClient) import_react.default.useEffect(() => {
+      let node;
+      let overlay = null;
+      const remove = () => {
+        if (overlay) try {
+          overlay.parentNode?.removeChild(overlay);
+          overlay = null;
+        } catch {}
+      };
+      const debugVisualizerHandler = (show = false) => {
+        node = stateRef.current.host;
+        if (!node) return;
+        if (show) {
+          if (!overlay) {
+            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") || "";
+          const dataIn = node.getAttribute("data-in") || "";
+          const 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.innerText = `${componentName || ""} ${dataAt} ${dataIn}`.trim();
+          overlay.appendChild(tooltip);
+          node.appendChild(overlay);
+        } else remove();
+      };
+      debugKeyListeners = debugKeyListeners || /* @__PURE__ */new Set();
+      debugKeyListeners.add(debugVisualizerHandler);
+      return () => {
+        remove();
+        debugKeyListeners?.delete(debugVisualizerHandler);
+      };
+    }, [componentName]);
+    const groupContextParent = import_react.default.useContext(import_GroupContext.GroupContext);
+    const animationDriver = (() => {
+      if (props.animatedBy && config) {
+        if (config.animationDrivers) return config.animationDrivers[props.animatedBy] ?? config.animations;
+        return props.animatedBy === "default" ? config.animations : null;
+      }
+      return (0, import_resolveAnimationDriver.resolveAnimationDriver)(componentContext.animationDriver) ?? (0, import_resolveAnimationDriver.resolveAnimationDriver)(config?.animations) ?? null;
+    })();
+    const useAnimations = animationDriver?.useAnimations;
+    const componentState = (0, import_useComponentState.useComponentState)(props, animationDriver?.isStub ? null : animationDriver, staticConfig, config);
+    const {
+      disabled,
+      groupName,
+      hasAnimationProp,
+      hasEnterStyle,
+      isAnimated,
+      isExiting,
+      isHydrated,
+      presence,
+      presenceState,
+      setState,
+      noClass,
+      state,
+      stateRef,
+      inputStyle,
+      outputStyle,
+      willBeAnimated,
+      willBeAnimatedClient,
+      startedUnhydrated
+    } = componentState;
+    if (hasAnimationProp && animationDriver?.avoidReRenders) (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      const pendingState = stateRef.current.nextState;
+      if (pendingState) {
+        stateRef.current.nextState = void 0;
+        componentState.setStateShallow(pendingState);
+      }
+    });
+    const allGroupContexts = (0, import_react.useMemo)(() => {
+      if (!groupName || props.passThrough) return groupContextParent;
+      const listeners = /* @__PURE__ */new Set();
+      stateRef.current.group?.listeners?.clear();
+      stateRef.current.group = {
+        listeners,
+        emit(state2) {
+          listeners.forEach(l => l(state2));
+        },
+        subscribe(cb) {
+          listeners.add(cb);
+          if (listeners.size === 1) setStateShallow({
+            hasDynGroupChildren: true
+          });
+          return () => {
+            listeners.delete(cb);
+            if (listeners.size === 0) setStateShallow({
+              hasDynGroupChildren: false
+            });
+          };
+        }
+      };
+      return {
+        ...groupContextParent,
+        [groupName]: {
+          state: {
+            pseudo: import_defaultComponentState.defaultComponentStateMounted
+          },
+          subscribe: listener => {
+            const dispose = stateRef.current.group?.subscribe(listener);
+            return () => {
+              dispose?.();
+            };
+          }
+        }
+      };
+    }, [stateRef, groupName, groupContextParent]);
+    let setStateShallow = componentState.setStateShallow;
+    if (process.env.NODE_ENV === "development" && time) time`use-state`;
+    const renderProp = props.render;
+    const isRenderString = !Component || typeof Component === "string";
+    const element = import_constants.isWeb ? isRenderString ? renderProp || Component : Component : Component;
+    const BaseComponent = isText ? element || "span" : element || (hasTextAncestor ? "span" : "div");
+    let elementType = BaseComponent;
+    if (animationDriver && isAnimated && animationDriver.needsCustomComponent) elementType = animationDriver[isText ? "Text" : "View"] || elementType;
+    const disableTheme = props["data-disable-theme"] || isHOC;
+    if (process.env.NODE_ENV === "development" && time) time`theme-props`;
+    const themeStateProps = {
+      componentName,
+      disable: disableTheme,
+      shallow: props.themeShallow,
+      debug: debugProp,
+      unstyled: props.unstyled
+    };
+    if ("theme" in props) themeStateProps.name = props.theme;
+    themeStateProps.needsUpdate = () => !!stateRef.current.isListeningToTheme;
+    if (process.env.NODE_ENV === "development") {
+      if (debugProp && debugProp !== "profile") {
+        const name = `${componentName || Component?.displayName || Component?.name || "[Unnamed Component]"}`;
+        const type = (hasEnterStyle ? "(hasEnter)" : " ") + (isAnimated ? "(animated)" : " ") + (isReactNative ? "(rnw)" : " ") + (noClass ? "(noClass)" : " ") + (state.press || state.pressIn ? "(PRESSED)" : " ") + (state.hover ? "(HOVERED)" : " ") + (state.focus ? "(FOCUSED)" : " ") + (state.focusWithin ? "(WITHIN FOCUSED)" : " ") + (presenceState?.isPresent === false ? "(EXIT)" : "");
+        const dataIs = propsIn["data-is"] || "";
+        const banner = `<${name} /> ${internalID} ${dataIs ? ` ${dataIs}` : ""} ${type.trim()} (hydrated: ${isHydrated}) (unmounted: ${state.unmounted})`;
+        const ch = propsIn.children;
+        let childLog = typeof ch === "string" ? ch.length > 4 ? ch.slice(0, 4) + "..." : ch : "";
+        if (childLog.length) childLog = `(children: ${childLog})`;
+        if (import_constants.isWeb) {
+          console.info(`%c ${banner}`, "background: green; color: white;");
+          if (import_constants.isServer) (0, import_log.log)({
+            noClass,
+            isAnimated,
+            isWeb: import_constants.isWeb,
+            inputStyle
+          });else {
+            console.groupEnd();
+            console.groupCollapsed(`${childLog} [inspect props, state, context \u{1F447}]`);
+            (0, import_log.log)("props in:", propsIn);
+            (0, import_log.log)("final props:", props, Object.keys(props));
+            (0, import_log.log)({
+              state,
+              staticConfig,
+              elementType,
+              themeStateProps
+            });
+            (0, import_log.log)({
+              context,
+              overriddenContextProps,
+              componentContext
+            });
+            (0, import_log.log)({
+              presence,
+              isAnimated,
+              isHOC,
+              hasAnimationProp,
+              useAnimations
+            });
+            console.groupEnd();
+          }
+        } else {
+          console.info(`
+
+------------------------------
+${banner}
+------------------------------
+`);
+          (0, import_log.log)(`children:`, props.children);
+          (0, import_log.log)({
+            overriddenContextProps,
+            styledContextValue
+          });
+          (0, import_log.log)({
+            noClass,
+            isAnimated,
+            isWeb: import_constants.isWeb,
+            inputStyle
+          });
+        }
+      }
+    }
+    if (process.env.NODE_ENV === "development" && time) time`pre-theme-media`;
+    const [theme, themeState] = (0, import_useTheme.useThemeWithState)(themeStateProps);
+    if (process.env.NODE_ENV === "development" && time) time`theme`;
+    elementType = element || elementType;
+    const isStringElement = typeof elementType === "string";
+    const mediaState = (0, import_useMedia.useMedia)(componentContext, debugProp);
+    (0, import_createVariable.setDidGetVariableValue)(false);
+    if (process.env.NODE_ENV === "development" && time) time`media`;
+    const styleProps = {
+      mediaState,
+      noClass,
+      resolveValues: isAnimated && inputStyle !== "css" || isHOC && state.unmounted == false && hasAnimationProp ? "value" : "auto",
+      isExiting,
+      isAnimated,
+      willBeAnimated,
+      styledContext: styledContextValue
+    };
+    const themeName = themeState?.name || "";
+    if (process.env.NODE_ENV === "development" && time) time`split-styles-prepare`;
+    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, themeName, state, styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
+    const isPassthrough = !splitStyles;
+    let contextForOverride = staticConfig.context;
+    if (splitStyles?.overriddenContextProps) {
+      const contextForProps = staticConfig.context || staticConfig.parentStaticConfig?.context;
+      if (contextForProps) {
+        for (const key in splitStyles.overriddenContextProps) {
+          overriddenContextProps = overriddenContextProps || {};
+          overriddenContextProps[key] = splitStyles.overriddenContextProps[key];
+        }
+        if (!staticConfig.context) contextForOverride = contextForProps;
+      }
+    }
+    const groupContext = groupName ? allGroupContexts?.[groupName] || null : null;
+    if (!isPassthrough && groupContext && props.containerType !== "normal") {
+      const groupState = groupContext?.state;
+      if (groupState && groupState.layout === void 0) {
+        if (splitStyles.style?.width || splitStyles.style?.height) groupState.layout = {
+          width: fromPx(splitStyles.style.width),
+          height: fromPx(splitStyles.style.height)
+        };
+      }
+    }
+    const hasEnterExitTransition = props.transition && typeof props.transition === "object" && !Array.isArray(props.transition) && ("enter" in props.transition || "exit" in props.transition);
+    if (!isPassthrough && (hasAnimationProp || groupName) && animationDriver?.avoidReRenders && !hasEnterExitTransition) {
+      let updateGroupListeners = function () {
+        const updatedState = stateRef.current.nextState;
+        if (groupContext) {
+          const {
+            group,
+            hasDynGroupChildren,
+            unmounted,
+            transition,
+            ...childrenGroupState
+          } = updatedState;
+          notifyGroupSubscribers(groupContext, stateRef.current.group || null, childrenGroupState);
+        }
+      };
+      const ogSetStateShallow = setStateShallow;
+      stateRef.current.updateStyleListener = () => {
+        const useStyleListener = stateRef.current.useStyleListener;
+        if (!useStyleListener) {
+          const pendingState = stateRef.current.nextState;
+          if (pendingState) {
+            stateRef.current.nextState = void 0;
+            ogSetStateShallow(pendingState);
+          }
+          return;
+        }
+        const updatedState = stateRef.current.nextState || state;
+        const mediaState2 = stateRef.current.nextMedia;
+        const nextStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, themeName, updatedState, mediaState2 ? {
+          ...styleProps,
+          mediaState: mediaState2
+        } : styleProps, null, componentContext, allGroupContexts, elementType, startedUnhydrated, debugProp, animationDriver);
+        const effectiveTransition = (0, import_pseudoTransitions.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, updatedState, nextStyles?.pseudoTransitions, props.transition);
+        stateRef.current.prevPseudoState = (0, import_pseudoTransitions.extractPseudoState)(updatedState);
+        useStyleListener(nextStyles?.style || {}, effectiveTransition);
+      };
+      componentContext.mediaEmitListeners = componentContext.mediaEmitListeners || /* @__PURE__ */new Set();
+      if (!stateRef.current.mediaEmitCleanup) {
+        const updateListener = next => {
+          stateRef.current.nextMedia = next;
+          stateRef.current.updateStyleListener?.();
+        };
+        componentContext.mediaEmitListeners.add(updateListener);
+        stateRef.current.mediaEmitCleanup = () => {
+          componentContext.mediaEmitListeners?.delete(updateListener);
+        };
+      }
+      componentContext.mediaEmit = componentContext.mediaEmit || (next => {
+        for (const listener of componentContext.mediaEmitListeners) listener(next);
+      });
+      stateRef.current.setStateShallow = nextOrGetNext => {
+        const prev = stateRef.current.nextState || state;
+        const next = typeof nextOrGetNext === "function" ? nextOrGetNext(prev) : nextOrGetNext;
+        if (next === prev || (0, import_is_equal_shallow.isEqualShallow)(prev, next)) return;
+        const canAvoidReRender = Object.keys(next).every(key => avoidReRenderKeys.has(key));
+        const updatedState = {
+          ...prev,
+          ...next
+        };
+        stateRef.current.nextState = updatedState;
+        if (canAvoidReRender) {
+          if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") {
+            console.groupCollapsed(`[\u26A1\uFE0F] avoid setState`, componentName, next, {
+              updatedState,
+              props
+            });
+            console.info(stateRef.current.host);
+            console.groupEnd();
+          }
+          updateGroupListeners();
+          stateRef.current.updateStyleListener?.();
+        } else {
+          if (process.env.NODE_ENV === "development" && debugProp && debugProp !== "profile") console.info(`[\u{1F40C}] re-render`, {
+            canAvoidReRender,
+            next
+          });
+          ogSetStateShallow(next);
+        }
+      };
+      setStateShallow = state2 => {
+        stateRef.current.setStateShallow?.(state2);
+      };
+    }
+    if (process.env.NODE_ENV === "development" && time) time`split-styles`;
+    if (splitStyles) {
+      if (props.group && props.untilMeasured === "hide" && !stateRef.current.hasMeasured) {
+        splitStyles.style = splitStyles.style || {};
+        splitStyles.style.opacity = 0;
+      }
+      if (splitStyles.dynamicThemeAccess != null) stateRef.current.isListeningToTheme = splitStyles.dynamicThemeAccess;
+    }
+    const hasRuntimeMediaKeys = splitStyles?.hasMedia && splitStyles.hasMedia !== true;
+    const shouldListenForMedia = (0, import_createVariable.didGetVariableValue)() || hasRuntimeMediaKeys || noClass && splitStyles?.hasMedia === true;
+    const mediaListeningKeys = hasRuntimeMediaKeys ? splitStyles.hasMedia : null;
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") console.info(`useMedia() createComponent`, shouldListenForMedia, mediaListeningKeys);
+    (0, import_useMedia.setMediaShouldUpdate)(componentContext, shouldListenForMedia, mediaListeningKeys);
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      style: splitStylesStyle,
+      classNames,
+      pseudoGroups,
+      mediaGroups
+    } = splitStyles || {};
+    const propsWithAnimation = props;
+    const {
+      asChild,
+      children,
+      themeShallow,
+      spaceDirection: _spaceDirection,
+      onPress,
+      onLongPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      onMouseUp,
+      onMouseDown,
+      onMouseEnter,
+      onMouseLeave,
+      onFocus,
+      onBlur,
+      separator,
+      passThrough,
+      forceStyle: _forceStyle,
+      onClick,
+      theme: _themeProp,
+      ...nonHanzoguiProps
+    } = viewPropsIn || {};
+    let viewProps = nonHanzoguiProps;
+    if (props.forceStyle) viewProps.forceStyle = props.forceStyle;
+    if (isHOC) {
+      if (typeof _themeProp !== "undefined") viewProps.theme = _themeProp;
+      if (typeof passThrough !== "undefined") viewProps.passThrough = passThrough;
+    }
+    let animationStyles;
+    const shouldUseAnimation = (inputStyle === "css" ? willBeAnimatedClient : willBeAnimated) && useAnimations && !isHOC;
+    let animatedRef;
+    if (shouldUseAnimation) {
+      const useStyleEmitter = animationDriver?.avoidReRenders ? listener => {
+        stateRef.current.useStyleListener = listener;
+      } : void 0;
+      const effectiveTransition = (0, import_pseudoTransitions.resolveEffectivePseudoTransition)(stateRef.current.prevPseudoState, state, splitStyles?.pseudoTransitions, props.transition);
+      if (splitStyles) splitStyles.effectiveTransition = effectiveTransition;
+      stateRef.current.prevPseudoState = (0, import_pseudoTransitions.extractPseudoState)(state);
+      const animations = useAnimations({
+        props: propsWithAnimation,
+        style: isHydrated ? splitStylesStyle || {} : {
+          ...splitStylesStyle
+        },
+        styleState: splitStyles,
+        useStyleEmitter,
+        presence,
+        componentState: state,
+        styleProps,
+        theme,
+        themeName,
+        pseudos: pseudos || null,
+        staticConfig,
+        stateRef
+      });
+      if (animations) {
+        if (animations.ref) animatedRef = animations.ref;
+        if (isHydrated && animations) {
+          animationStyles = animations.style;
+          viewProps.style = animationStyles;
+          if (animations.className) viewProps.className = `${state.unmounted === "should-enter" ? "t_unmounted " : ""}${viewProps.className || ""} ${animations.className}`;
+        }
+      }
+      if (process.env.NODE_ENV === "development" && time) time`animations`;
+    }
+    if (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}`);
+    if (process.env.NODE_ENV === "development" && time) time`destructure`;
+    if (!isPassthrough && groupContext && props.containerType !== "normal") nonHanzoguiProps.onLayout = (0, import_helpers.composeEventHandlers)(nonHanzoguiProps.onLayout, e => {
+      const layout = e.nativeEvent.layout;
+      groupContext.state.layout = layout;
+      stateRef.current.group?.emit({
+        layout
+      });
+      if (!stateRef.current.hasMeasured && props.untilMeasured === "hide") setState(prev => ({
+        ...prev
+      }));
+      stateRef.current.hasMeasured = true;
+    });
+    viewProps = import_setupHooks.hooks.usePropsTransform?.(elementType, nonHanzoguiProps, stateRef, stateRef.current.willHydrate) || nonHanzoguiProps;
+    if (!stateRef.current.composedRef) stateRef.current.composedRef = (0, import_compose_refs.composeRefs)(x => stateRef.current.host = x, forwardedRef, import_setElementProps.setElementProps, animatedRef);
+    viewProps.ref = stateRef.current.composedRef;
+    (0, import_pointerEvents.usePointerEvents)(props, viewProps);
+    if (process.env.NODE_ENV === "development") {
+      if (!isReactNative && !isText && import_constants.isWeb && !isHOC) import_react.default.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 <${staticConfig.componentName || propsIn.tag || "View"}>.`, props);
+      });
+    }
+    if (process.env.NODE_ENV === "development" && time) time`events-hooks`;
+    const unPress = () => {
+      setStateShallow({
+        press: false,
+        pressIn: false
+      });
+    };
+    if (process.env.NODE_ENV === "development" && import_constants.isWeb) (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (debugProp === "verbose") {
+        let cssStyleDeclarationToObject = function (style) {
+          const styleObject = {};
+          for (let i = 0; i < style.length; i++) {
+            let prop = style[i];
+            styleObject[prop] = style.getPropertyValue(prop);
+          }
+          return styleObject;
+        };
+        const computed = stateRef.current.host ? cssStyleDeclarationToObject(getComputedStyle(stateRef.current.host)) : {};
+        console.groupCollapsed(`Rendered > (opacity: ${computed.opacity})`);
+        console.warn(stateRef.current.host);
+        console.warn(computed);
+        console.groupEnd();
+      }
+    });
+    (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (state.unmounted === true && hasEnterStyle) {
+        setStateShallow({
+          unmounted: "should-enter"
+        });
+        return;
+      }
+      if (state.unmounted) {
+        if (inputStyle === "css") {
+          let cancelled = false;
+          requestAnimationFrame(() => {
+            if (cancelled) return;
+            requestAnimationFrame(() => {
+              if (cancelled) return;
+              setStateShallow({
+                unmounted: false
+              });
+            });
+          });
+          return () => {
+            cancelled = true;
+          };
+        }
+        setStateShallow({
+          unmounted: false
+        });
+      }
+      return () => {
+        componentSetStates.delete(setState);
+        stateRef.current.mediaEmitCleanup?.();
+      };
+    }, [state.unmounted, inputStyle]);
+    (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (disabled) return;
+      if (!pseudoGroups && !mediaGroups) return;
+      if (!allGroupContexts) return;
+      return (0, import_subscribeToContextGroup.subscribeToContextGroup)({
+        groupContext: allGroupContexts,
+        setStateShallow,
+        mediaGroups,
+        pseudoGroups
+      });
+    }, [allGroupContexts, disabled, pseudoGroups ? (0, import_objectIdentityKey.objectIdentityKey)(pseudoGroups) : 0, mediaGroups ? (0, import_objectIdentityKey.objectIdentityKey)(mediaGroups) : 0]);
+    const groupEmitter = stateRef.current.group;
+    (0, import_constants.useIsomorphicLayoutEffect)(() => {
+      if (!groupContext || !groupEmitter) return;
+      notifyGroupSubscribers(groupContext, groupEmitter, state);
+    }, [groupContext, groupEmitter, state]);
+    const runtimePressStyle = !disabled && noClass && pseudos?.pressStyle;
+    const runtimeFocusStyle = !disabled && noClass && pseudos?.focusStyle;
+    const runtimeFocusVisibleStyle = !disabled && noClass && pseudos?.focusVisibleStyle;
+    const attachFocus = Boolean(runtimePressStyle || runtimeFocusStyle || runtimeFocusVisibleStyle || onFocus || onBlur || !!componentContext.setParentFocusState);
+    const hasDynamicGroupChildren = Boolean(groupName && state.hasDynGroupChildren);
+    const attachPress = Boolean(hasDynamicGroupChildren || runtimePressStyle || onPress || onPressOut || onPressIn || onMouseDown || onMouseUp || onLongPress || onClick || pseudos?.focusVisibleStyle);
+    const runtimeHoverStyle = !disabled && noClass && pseudos?.hoverStyle;
+    const needsHoverState = Boolean(hasDynamicGroupChildren || runtimeHoverStyle);
+    const attachHover = import_constants.isWeb && !!(hasDynamicGroupChildren || needsHoverState || onMouseEnter || onMouseLeave);
+    const shouldAttach = !disabled && !props.asChild && Boolean(attachFocus || attachPress || attachHover || runtimePressStyle || runtimeHoverStyle || runtimeFocusStyle);
+    const needsPressState = Boolean(hasDynamicGroupChildren || runtimePressStyle);
+    if (process.env.NODE_ENV === "development" && time) time`events-setup`;
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`\u{1FAA9} events()`, {
+      runtimeFocusStyle,
+      runtimePressStyle,
+      runtimeHoverStyle,
+      runtimeFocusVisibleStyle,
+      attachPress,
+      attachFocus,
+      attachHover,
+      shouldAttach,
+      needsHoverState,
+      pseudos
+    });
+    const events = shouldAttach ? {
+      onPressOut: attachPress ? e => {
+        unPress();
+        onPressOut?.(e);
+        onMouseUp?.(e);
+      } : void 0,
+      ...((attachHover || attachPress) && {
+        onMouseEnter: e => {
+          const next = {};
+          if (needsHoverState && !lastInteractionWasTouch.value) next.hover = true;
+          if (needsPressState) {
+            if (state.pressIn) next.press = true;
+          }
+          setStateShallow(next);
+          onHoverIn?.(e);
+          onMouseEnter?.(e);
+        },
+        onMouseLeave: e => {
+          const next = {};
+          if (needsHoverState) next.hover = false;
+          if (needsPressState) {
+            next.press = false;
+            next.pressIn = false;
+          }
+          setStateShallow(next);
+          onHoverOut?.(e);
+          onMouseLeave?.(e);
+        }
+      }),
+      onPressIn: attachPress ? e => {
+        if (needsPressState) setStateShallow({
+          press: true,
+          pressIn: true
+        });
+        onPressIn?.(e);
+        onMouseDown?.(e);
+        if (import_constants.isWeb) componentSetStates.add(setState);
+      } : void 0,
+      onPress: attachPress ? e => {
+        unPress();
+        onClick?.(e);
+        if (onPress || onClick) e.stopPropagation();
+        onPress?.(e);
+        onLongPress?.(e);
+      } : void 0,
+      ...(attachFocus && {
+        onFocus: e => {
+          const next = {};
+          if (componentContext.setParentFocusState) {
+            componentContext.setParentFocusState({
+              focusWithin: true
+            });
+            next.focusWithin = true;
+          }
+          if (pseudos?.focusVisibleStyle) {
+            if (lastInteractionWasKeyboard.value) next.focusVisible = true;else next.focus = true;
+          } else next.focus = true;
+          setStateShallow(next);
+          onFocus?.(e);
+        },
+        onBlur: e => {
+          if (componentContext.setParentFocusState) componentContext.setParentFocusState({
+            focusWithin: false
+          });
+          setStateShallow({
+            focus: false,
+            focusVisible: false,
+            focusWithin: false
+          });
+          onBlur?.(e);
+        }
+      })
+    } : null;
+    if (events && !isReactNative) Object.assign(viewProps, (0, import_eventHandling.getWebEvents)(events));
+    if (process.env.NODE_ENV === "development" && time) time`events`;
+    if (process.env.NODE_ENV === "development" && debugProp === "verbose") (0, import_log.log)(`events`, {
+      events,
+      attachHover,
+      attachPress
+    });
+    const propsWithHref = props;
+    const propsInWithHref = propsIn;
+    [componentName, props.testID ?? propsIn.testID ?? props.accessibilityLabel ?? propsIn.accessibilityLabel ?? (typeof propsWithHref.href === "string" ? propsWithHref.href : null) ?? (typeof propsInWithHref.href === "string" ? propsInWithHref.href : null)].filter(Boolean).join(":");
+    if (process.env.NODE_ENV === "development" && time) time`hooks`;
+    if (asChild) {
+      elementType = import_Slot.Slot;
+      {
+        const webStyleEvents = asChild === "web" || asChild === "except-style-web";
+        const passEvents = (0, import_eventHandling.getWebEvents)({
+          onPress,
+          onLongPress,
+          onPressIn,
+          onPressOut,
+          onMouseUp,
+          onMouseDown,
+          onMouseEnter,
+          onMouseLeave
+        }, webStyleEvents);
+        Object.assign(viewProps, passEvents);
+      }
+    }
+    if (process.env.NODE_ENV === "development" && time) time`spaced-as-child`;
+    let content;
+    if (isPassthrough) content = import_react.default.createElement(BaseComponent, {
+      style: {
+        display: "contents"
+      }
+    }, propsIn.children);else {
+      if (import_setupHooks.hooks.useChildren) content = import_setupHooks.hooks.useChildren(elementType, content || children, viewProps);
+      const isRenderPropString = typeof renderProp === "string";
+      if (renderProp && !isRenderPropString) {
+        const out = getCustomRender(renderProp, content || children, viewProps, componentState);
+        if (out) {
+          viewProps = out.viewProps;
+          elementType = out.elementType;
+        }
+      }
+      if (!content) {
+        if (isRenderPropString) viewProps.render;
+        content = import_react.default.createElement(elementType, viewProps, content || children);
+      }
+      if (process.env.NODE_ENV === "development" && time) time`use-children`;
+    }
+    const ResetPresence = animationDriver?.ResetPresence;
+    const needsReset = Boolean(
+    // not when passing down to child
+    !asChild && splitStyles && !isHOC && ResetPresence && willBeAnimated && (hasEnterStyle || presenceState));
+    const hasEverReset = stateRef.current.hasEverResetPresence;
+    if (needsReset && !hasEverReset) stateRef.current.hasEverResetPresence = true;
+    if ((needsReset || hasEverReset) && ResetPresence) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResetPresence, {
+      disabled: !needsReset,
+      children: content
+    });
+    if (process.env.NODE_ENV === "development" && time) time`create-element`;
+    if ("focusWithinStyle" in propsIn || pseudos?.focusWithinStyle) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+      ...componentContext,
+      setParentFocusState: setStateShallow,
+      children: content
+    });
+    if ("group" in props) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_GroupContext.GroupContext.Provider, {
+      value: allGroupContexts,
+      children: content
+    });
+    if (!asChild && isText && !hasTextAncestor) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ComponentContext.ComponentContext.Provider, {
+      ...componentContext,
+      inText: true,
+      children: content
+    });
+    if (process.env.NODE_ENV === "development" && time) time`group-context`;
+    content = disableTheme || !splitStyles ? content : (0, import_Theme.getThemedChildren)(themeState, content, themeStateProps, false, stateRef);
+    if (process.env.NODE_ENV === "development" && time) time`themed-children`;
+    if (isReactNative && !asChild) content = /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
+      className: "_dsp_contents",
+      ...(!isPassthrough && isHydrated && events && (0, import_eventHandling.getWebEvents)(events)),
+      children: content
+    });
+    if (overriddenContextProps && contextForOverride) {
+      const Provider = contextForOverride.Provider;
+      for (const key in styledContextValue) if (!(key in overriddenContextProps)) overriddenContextProps[key] = styledContextValue[key];
+      content = /* @__PURE__ */(0, import_jsx_runtime.jsx)(Provider, {
+        __disableMergeDefaultValues: true,
+        ...overriddenContextProps,
+        children: content
+      });
+    }
+    if (process.env.NODE_ENV === "development" && time) time`context-override`;
+    if (startedUnhydrated && splitStyles) content = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [content, !isHydrated ? (0, import_wrapStyleTags.getStyleTags)(Object.values(splitStyles.rulesToInsert)) : null]
+    });
+    if (process.env.NODE_ENV === "development" && time) time`style-tags`;
+    if (process.env.NODE_ENV === "development") {
+      if (debugProp && debugProp !== "profile") {
+        const title = `render <${typeof elementType === "string" ? elementType : "Component"} /> (${internalID}) with props`;
+        if (!import_constants.isWeb || !import_constants.isClient) {
+          (0, import_log.log)(title);
+          (0, import_log.log)(`state: `, state);
+          if (import_isDevTools.isDevTools) (0, import_log.log)("viewProps", viewProps);
+          (0, import_log.log)(`final styles:`);
+          for (const key in splitStylesStyle) (0, import_log.log)(key, splitStylesStyle[key]);
+        } else {
+          console.groupCollapsed(title);
+          try {
+            (0, import_log.log)("viewProps", viewProps);
+            (0, import_log.log)("children", content);
+            if (typeof window !== "undefined") (0, import_log.log)({
+              propsIn,
+              props,
+              attachPress,
+              animationStyles,
+              classNames,
+              content,
+              elementType,
+              events,
+              isAnimated,
+              hasRuntimeMediaKeys,
+              isStringElement,
+              mediaListeningKeys,
+              pseudos,
+              shouldAttach,
+              noClass,
+              shouldListenForMedia,
+              splitStyles,
+              splitStylesStyle,
+              state,
+              stateRef,
+              staticConfig,
+              styleProps,
+              themeState,
+              viewProps,
+              willBeAnimated,
+              startedUnhydrated
+            });
+          } catch {} finally {
+            console.groupEnd();
+          }
+        }
+        if (debugProp === "break") {}
+      }
+    }
+    if (process.env.NODE_ENV === "development" && time) {
+      time`rest`;
+      if (!globalThis["willPrint"]) {
+        globalThis["willPrint"] = true;
+        setTimeout(() => {
+          delete globalThis["willPrint"];
+          time.print();
+          time = null;
+        }, 50);
+      }
+    }
+    return content;
+  });
+  function notifyGroupSubscribers(groupContext, groupEmitter, pseudo) {
+    if (!groupContext || !groupEmitter) return;
+    const nextState = {
+      ...groupContext.state,
+      pseudo
+    };
+    groupEmitter.emit(nextState);
+    groupContext.state = nextState;
+  }
+  if (staticConfig.componentName) component.displayName = staticConfig.componentName;
+  let res = component;
+  res = import_react.default.memo(res);
+  res.staticConfig = staticConfig;
+  function extendStyledConfig(extended) {
+    return {
+      ...staticConfig,
+      ...extended,
+      neverFlatten: true,
+      isHOC: true,
+      isStyledHOC: false
+    };
+  }
+  function styleable(Component2, options) {
+    let out = typeof Component2 === "function" && Component2.length === 1 ? Component2 : import_react.default.forwardRef(Component2);
+    const extendedConfig = extendStyledConfig(options?.staticConfig);
+    out = options?.disableTheme ? out : (0, import_themeable.themeable)(out, extendedConfig, true);
+    if (extendedConfig.memo || process.env.TAMAGUI_MEMOIZE_STYLEABLE) out = import_react.default.memo(out);
+    out.staticConfig = extendedConfig;
+    out.styleable = styleable;
+    return out;
+  }
+  res.styleable = styleable;
+  return res;
+}
+const fromPx = val => {
+  if (typeof val === "number") return val;
+  if (typeof val === "string") return +val.replace("px", "");
+  return 0;
+};
+const getCustomRender = (renderProp, content, viewProps, state) => {
+  if (typeof renderProp === "function") renderProp = getRenderElementForPlatform(renderProp(viewProps, state));
+  if (renderProp) {
+    if (typeof renderProp === "object" && import_react.default.isValidElement(renderProp)) {
+      if (getRenderElementForPlatform(renderProp)) {
+        const elementProps = renderProp.props;
+        const mergedProps = elementProps ? (0, import_mergeRenderElementProps.mergeRenderElementProps)(elementProps, viewProps, content) : viewProps;
+        return {
+          elementType: renderProp.type,
+          viewProps: mergedProps
+        };
+      }
+    }
+  }
+};
+function getRenderElementForPlatform(potential) {
+  return potential;
+}