@tamagui/core 1.0.0-alpha.9 → 1.0.0-beta.0

package/dist/cjs/createComponent.js

@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __objRest = (source, exclude) => {
   var target = {};
@@ -36,98 +35,132 @@ var __objRest = (source, exclude) => {
   return target;
 };
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+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 target;
-};
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-__export(exports, {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(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, {
+  AbsoluteFill: () => AbsoluteFill,
   Spacer: () => Spacer,
   createComponent: () => createComponent,
   mouseUps: () => mouseUps,
   spacedChildren: () => spacedChildren
 });
-var import_helpers = __toModule(require("@tamagui/helpers"));
-var import_use_force_update = __toModule(require("@tamagui/use-force-update"));
-var import_react = __toModule(require("react"));
-var import_react_native = __toModule(require("react-native"));
-var import_constants = __toModule(require("./constants/constants"));
-var import_platform = __toModule(require("./constants/platform"));
-var import_rnw = __toModule(require("./constants/rnw"));
-var import_createTamagui = __toModule(require("./createTamagui"));
-var import_addStylesUsingClassname = __toModule(require("./helpers/addStylesUsingClassname"));
-var import_extendStaticConfig = __toModule(require("./helpers/extendStaticConfig"));
-var import_getSplitStyles = __toModule(require("./helpers/getSplitStyles"));
-var import_useFeatures = __toModule(require("./hooks/useFeatures"));
-var import_usePressable = __toModule(require("./hooks/usePressable"));
-var import_TextAncestorContext = __toModule(require("./views/TextAncestorContext"));
-var import_ThemeManagerContext = __toModule(require("./views/ThemeManagerContext"));
-const mouseUps = new Set();
+module.exports = __toCommonJS(createComponent_exports);
+var import_helpers = require("@tamagui/helpers");
+var import_use_force_update = require("@tamagui/use-force-update");
+var import_react = __toESM(require("react"));
+var import_react_native = require("react-native");
+var import_conf = require("./conf");
+var import_constants = require("./constants/constants");
+var import_platform = require("./constants/platform");
+var import_rnw = require("./constants/rnw");
+var import_createVariable = require("./createVariable");
+var import_createShallowUpdate = require("./helpers/createShallowUpdate");
+var import_extendStaticConfig = require("./helpers/extendStaticConfig");
+var import_getSplitStyles = require("./helpers/getSplitStyles");
+var import_insertStyleRule = require("./helpers/insertStyleRule");
+var import_proxyThemeVariables = require("./helpers/proxyThemeVariables");
+var import_wrapThemeManagerContext = require("./helpers/wrapThemeManagerContext");
+var import_useFeatures = require("./hooks/useFeatures");
+var import_usePressable = require("./hooks/usePressable");
+var import_useTheme = require("./hooks/useTheme");
+var import_TextAncestorContext = require("./views/TextAncestorContext");
+import_react.default["keep"];
+const defaultComponentState = {
+  hover: false,
+  press: false,
+  pressIn: false,
+  focus: false,
+  mounted: false,
+  animation: null
+};
+const mouseUps = /* @__PURE__ */ new Set();
 if (typeof document !== "undefined") {
   document.addEventListener("mouseup", () => {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
   });
 }
-function createComponent(configIn) {
-  let staticConfig;
-  if ("parsed" in configIn) {
-    staticConfig = configIn;
-  } else {
-    staticConfig = (0, import_extendStaticConfig.parseStaticConfig)(configIn);
+function mergeShorthands({ defaultProps }, { shorthands }) {
+  for (const key in defaultProps) {
+    defaultProps[shorthands[key] || key] = defaultProps[key];
   }
-  const { Component, validStyles, isText, isZStack } = staticConfig;
-  const validStyleProps = validStyles ?? import_helpers.stylePropsView;
-  let defaultProps = null;
+}
+__name(mergeShorthands, "mergeShorthands");
+let initialTheme;
+function createComponent(configIn, ParentComponent) {
+  const staticConfig = (() => {
+    const config = (0, import_extendStaticConfig.extendStaticConfig)(configIn, ParentComponent);
+    if ("parsed" in config) {
+      return config;
+    } else {
+      return (0, import_extendStaticConfig.parseStaticConfig)(config);
+    }
+  })();
+  const componentClassName = `is_${staticConfig.componentName}`;
   let tamaguiConfig;
-  let defaultsStyle;
-  let defaultsClassName = "";
-  let initialTheme;
+  let AnimatedText;
+  let AnimatedView;
+  let avoidClasses = true;
+  let defaultNativeStyle;
+  let defaultNativeStyleSheet;
+  let initialSplitStyles;
+  function addPseudoToStyles(styles, name, pseudos) {
+    const pseudoStyle = pseudos[name];
+    const shouldNestObject = import_platform.isWeb && name !== "enterStyle" && name !== "exitStyle";
+    if (pseudoStyle) {
+      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
+    }
+    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
+    if (defaultPseudoStyle) {
+      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
+    }
+  }
+  __name(addPseudoToStyles, "addPseudoToStyles");
   const component = (0, import_react.forwardRef)((props, forwardedRef) => {
-    var _b;
-    const forceUpdate = (0, import_use_force_update.useForceUpdate)();
-    const features = (0, import_useFeatures.useFeatures)(props, { forceUpdate });
-    const manager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext);
-    const [state, set_] = (0, import_react.useState)(() => ({
-      hover: false,
-      press: false,
-      pressIn: false,
-      theme: manager.name
-    }));
-    const set = /* @__PURE__ */ __name((next) => set_((prev) => {
-      for (const key in next) {
-        if (prev[key] !== next[key]) {
-          return __spreadValues(__spreadValues({}, prev), next);
-        }
+    var _a, _c, _d, _e;
+    const { Component, componentName, isText, isZStack } = staticConfig;
+    if (process.env.NODE_ENV === "development") {
+      if (props["debug"]) {
+        console.warn(staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props);
+        if (props["debug"] === "break")
+          debugger;
       }
-      return prev;
-    }), "set");
-    if (process.env.NODE_ENV === "development" && !isText && import_platform.isWeb) {
-      import_react.Children.toArray(props.children).forEach((item) => {
-        if (typeof item === "string") {
-          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
-        }
-      });
     }
-    const hasTextAncestor = import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false;
-    const hostRef = (0, import_react.useRef)(null);
-    const {
-      viewProps: viewPropsIn,
+    const forceUpdate = (0, import_use_force_update.useForceUpdate)();
+    const theme = (0, import_useTheme.useTheme)(props.theme, staticConfig.componentName, props, forceUpdate);
+    const [state, set_] = (0, import_react.useState)(defaultComponentState);
+    const setStateShallow = (0, import_createShallowUpdate.createShallowUpdate)(set_);
+    const shouldAvoidClasses = !!(props.animation && avoidClasses);
+    const splitStyles = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, theme, shouldAvoidClasses ? __spreadProps(__spreadValues({}, state), { noClassNames: true, resolveVariablesAs: "value" }) : state, shouldAvoidClasses ? null : initialSplitStyles.classNames);
+    const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
+    const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
+    const isAnimated = !!(useAnimations && props.animation);
+    const hasEnterStyle = !!props.enterStyle;
+    const features = (0, import_useFeatures.useFeatures)(props, {
+      forceUpdate,
+      setStateShallow,
+      useAnimations,
+      state,
+      style: props.animation ? __spreadValues(__spreadValues({}, defaultNativeStyle), style) : null,
       pseudos,
-      style,
-      classNames
-    } = (0, import_getSplitStyles.getSplitStyles)(props, staticConfig, manager.theme || initialTheme);
-    const _a = viewPropsIn, {
+      staticConfig,
+      theme,
+      onDidAnimate: props.onDidAnimate
+    });
+    const _b = viewPropsIn, {
       tag,
       hitSlop,
       children,
@@ -159,11 +192,16 @@ function createComponent(configIn) {
       onStartShouldSetResponder,
       onStartShouldSetResponderCapture,
       onMouseDown,
-      onClick,
+      nativeID,
       accessible,
       accessibilityRole,
+      collapsable,
+      focusable,
+      onClick,
+      theme: _themeProp,
+      defaultVariants,
       onLayout
-    } = _a, viewProps = __objRest(_a, [
+    } = _b, viewPropsRest = __objRest(_b, [
       "tag",
       "hitSlop",
       "children",
@@ -195,11 +233,53 @@ function createComponent(configIn) {
       "onStartShouldSetResponder",
       "onStartShouldSetResponderCapture",
       "onMouseDown",
-      "onClick",
+      "nativeID",
       "accessible",
       "accessibilityRole",
+      "collapsable",
+      "focusable",
+      "onClick",
+      "theme",
+      "defaultVariants",
       "onLayout"
     ]);
+    let viewProps = viewPropsRest;
+    if (process.env.NODE_ENV === "development" && !isText && import_platform.isWeb) {
+      import_react.Children.toArray(props.children).forEach((item) => {
+        if (typeof item === "string") {
+          console.error(`Unexpected text node: ${item}. A text node cannot be a child of a <View>.`);
+        }
+      });
+    }
+    const hasTextAncestor = import_platform.isWeb ? (0, import_react.useContext)(import_TextAncestorContext.TextAncestorContext) : false;
+    const hostRef = (0, import_react.useRef)(null);
+    const internal = (0, import_react.useRef)();
+    if (!internal.current) {
+      internal.current = {
+        isMounted: true
+      };
+    }
+    (0, import_platform.useIsomorphicLayoutEffect)(() => {
+      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
+        setStateShallow({
+          mounted: true
+        });
+      }
+      internal.current.isMounted = true;
+      return () => {
+        mouseUps.delete(unPress);
+        internal.current.isMounted = false;
+      };
+    }, [hasEnterStyle, props.animation]);
+    if (nativeID) {
+      viewProps.id = nativeID;
+    }
+    if (import_platform.isAndroid) {
+      if (collapsable)
+        viewProps.collapsable = collapsable;
+      if (focusable)
+        viewProps.focusable = focusable;
+    }
     if (!import_platform.isWeb) {
       if (accessible)
         viewProps.accessible = accessible;
@@ -226,53 +306,51 @@ function createComponent(configIn) {
         onStartShouldSetResponderCapture
       });
     }
-    const isTracking = (0, import_react.useRef)(false);
-    const internal = (0, import_react.useRef)();
-    if (!internal.current) {
-      internal.current = {
-        isMounted: true
-      };
+    const isTaggable = !Component || typeof Component === "string";
+    const element = import_platform.isWeb ? isTaggable ? tag || Component : Component : Component;
+    const BaseTextComponent = !import_platform.isWeb ? import_react_native.Text : element || "span";
+    const BaseViewComponent = !import_platform.isWeb ? import_react_native.View : element || (hasTextAncestor ? "span" : "div");
+    let ViewComponent = isText ? (isAnimated ? AnimatedText || import_react_native.Text : null) || BaseTextComponent : (isAnimated ? AnimatedView || import_react_native.View : null) || BaseViewComponent;
+    ViewComponent = Component || ViewComponent;
+    let styles;
+    const isStringElement = typeof ViewComponent === "string";
+    const animationStyles = state.animation ? state.animation.style : null;
+    if (isStringElement && shouldAvoidClasses) {
+      styles = __spreadValues(__spreadValues(__spreadValues({}, defaultNativeStyle), animationStyles), medias);
+    } else {
+      styles = [
+        import_platform.isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
+        animationStyles ? animationStyles : style,
+        medias
+      ];
+      if (!animationStyles) {
+        !state.mounted && addPseudoToStyles(styles, "enterStyle", pseudos);
+        state.hover && addPseudoToStyles(styles, "hoverStyle", pseudos);
+        state.focus && addPseudoToStyles(styles, "focusStyle", pseudos);
+        state.press && addPseudoToStyles(styles, "pressStyle", pseudos);
+      }
     }
-    (0, import_react.useEffect)(() => {
-      internal.current.isMounted = true;
-      const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => {
-        if (isTracking.current) {
-          set({ theme: name });
-        }
-      });
-      return () => {
-        dispose();
-        mouseUps.delete(unPress);
-        isTracking.current = false;
-        internal.current.isMounted = false;
-      };
-    }, [manager]);
-    const element = import_platform.isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component;
-    const ReactView = !import_platform.isWeb ? import_react_native.View : element || (hasTextAncestor ? "span" : "div");
-    const ReactText = !import_platform.isWeb ? import_react_native.Text : element || "span";
-    const ViewComponent = isText ? ReactText : ReactView;
-    const isHovering = !import_platform.isTouchDevice && !disabled && pseudos && state.hover;
-    const isPressing = !disabled && pseudos && state.press;
-    const styles = [
-      style,
-      isHovering ? pseudos.hoverStyle || null : null,
-      isPressing ? pseudos.pressStyle || null : null
-    ];
     if (import_platform.isWeb) {
-      const stylesClassNames = (0, import_addStylesUsingClassname.useStylesAsClassname)(styles);
-      const classList = isText ? [
-        defaultsClassName,
-        classNames,
-        stylesClassNames,
-        props.className
-      ] : [defaultsClassName, props.className, classNames, stylesClassNames];
-      const className = (0, import_helpers.concatClassName)(...classList);
-      if (process.env.NODE_ENV === "development") {
-        if (props["debug"]) {
-          console.log("\u{1F95A} className", { style, styles, classList, stylesClassNames, className });
+      if (!shouldAvoidClasses) {
+        const fontFamilyName = isText ? props.fontFamily || staticConfig.defaultProps.fontFamily : null;
+        const fontFamily = fontFamilyName && fontFamilyName[0] === "$" ? fontFamilyName.slice(1) : null;
+        const classList = [
+          componentName ? componentClassName : "",
+          fontFamily ? `font_${fontFamily}` : "",
+          theme.className,
+          classNames ? Object.values(classNames).join(" ") : ""
+        ];
+        const className = classList.join(" ");
+        if (process.env.NODE_ENV === "development") {
+          if (props["debug"]) {
+            console.log("  \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, (0, import_insertStyleRule.getAllSelectors)()[v]])) });
+          }
         }
+        viewProps.className = className;
+        viewProps.style = animationStyles;
+      } else {
+        viewProps.style = styles;
       }
-      viewProps.className = className;
     } else {
       viewProps.style = styles;
     }
@@ -282,7 +360,13 @@ function createComponent(configIn) {
     if (import_platform.isWeb) {
       const platformMethodsRef = import_rnw.rnw.usePlatformMethods(viewProps);
       const setRef = import_rnw.rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
-      viewProps.ref = setRef;
+      if (!isAnimated) {
+        viewProps.ref = setRef;
+      } else {
+        if (forwardedRef) {
+          viewProps.ref = forwardedRef;
+        }
+      }
       if (props.href != null && hrefAttrs != null) {
         const { download, rel, target } = hrefAttrs;
         if (download != null) {
@@ -300,16 +384,16 @@ function createComponent(configIn) {
         viewProps.ref = forwardedRef;
       }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
-    const attachHover = import_platform.isWeb && !import_platform.isTouchDevice && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const shouldAttach = internal.current.hasEverHadEvents || attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || import_platform.isWeb && ("hoverStyle" in props || "onClick" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
-    if (shouldAttach) {
-      internal.current.hasEverHadEvents = true;
-    }
+    const initialPseudos = initialSplitStyles.pseudos;
+    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
+    const isHoverable = import_platform.isWeb && !import_platform.isTouchDevice;
+    const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
+    const pressEventKey = isStringElement ? "onClick" : "onPress";
+    const shouldAttach = attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || import_platform.isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
     const unPress = (0, import_react.useCallback)(() => {
       if (!internal.current.isMounted)
         return;
-      set({
+      setStateShallow({
         press: false,
         pressIn: false
       });
@@ -319,8 +403,8 @@ function createComponent(configIn) {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
       }
-    }), import_platform.isWeb && !import_platform.isTouchDevice && {
-      onMouseEnter: attachHover || attachPress ? (e) => {
+    }), isHoverable && {
+      onMouseEnter: attachHover ? (e) => {
         let next = {};
         if (attachHover) {
           next.hover = true;
@@ -329,12 +413,12 @@ function createComponent(configIn) {
           next.press = true;
         }
         if (Object.keys(next).length) {
-          set(next);
+          setStateShallow(next);
         }
         onHoverIn == null ? void 0 : onHoverIn(e);
         onMouseEnter == null ? void 0 : onMouseEnter(e);
       } : void 0,
-      onMouseLeave: attachHover || attachPress ? (e) => {
+      onMouseLeave: attachHover ? (e) => {
         let next = {};
         mouseUps.add(unPress);
         if (attachHover) {
@@ -345,114 +429,153 @@ function createComponent(configIn) {
           next.pressIn = false;
         }
         if (Object.keys(next).length) {
-          set(next);
+          setStateShallow(next);
         }
         onHoverOut == null ? void 0 : onHoverOut(e);
         onMouseLeave == null ? void 0 : onMouseLeave(e);
       } : void 0
     }), {
       onMouseDown: attachPress ? (e) => {
-        set({
+        setStateShallow({
           press: true,
           pressIn: true
         });
         onPressIn == null ? void 0 : onPressIn(e);
         onMouseDown == null ? void 0 : onMouseDown(e);
-      } : onPressIn,
-      onClick: attachPress ? (e) => {
+      } : null,
+      [pressEventKey]: attachPress ? (e) => {
         onPress == null ? void 0 : onPress(e);
-        onClick == null ? void 0 : onClick(e);
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
-      } : onPressOut
+        onClick == null ? void 0 : onClick(e);
+      } : null
     }) : null;
-    if (events) {
-      if (typeof ViewComponent !== "string") {
-        const [pressProps] = (0, import_usePressable.usePressable)({
-          disabled,
-          hitSlop,
-          onPressIn: events.onMouseDown,
-          onPressOut: events.onPressOut,
-          onPress: events.onClick
-        });
-        Object.assign(viewProps, pressProps);
-      } else {
-        Object.assign(viewProps, events);
-      }
-    }
-    const childEls = spacedChildren({
+    let childEls = !children ? children : (0, import_wrapThemeManagerContext.wrapThemeManagerContext)(spacedChildren({
       children,
       space,
-      flexDirection: props.flexDirection || (defaultProps == null ? void 0 : defaultProps.flexDirection),
+      flexDirection: props.flexDirection || ((_c = staticConfig.defaultProps) == null ? void 0 : _c.flexDirection),
       isZStack
+    }), (0, import_useTheme.getThemeManagerIfChanged)(theme));
+    const [pressProps] = (0, import_usePressable.usePressable)(events ? __spreadProps(__spreadValues({
+      disabled
+    }, hitSlop && {
+      hitSlop
+    }), {
+      onPressIn: events.onMouseDown,
+      onPressOut: events.onPressOut,
+      onPress: events[pressEventKey]
+    }) : {
+      disabled: true
     });
     let content;
-    if (import_platform.isWeb && import_rnw.rnw) {
-      const domProps = import_rnw.rnw.createDOMProps(viewProps);
-      const className = domProps.className && domProps.className !== viewProps.className ? `${domProps.className} ${viewProps.className}` : viewProps.className;
-      Object.assign(viewProps, domProps);
-      viewProps.className = className;
-      content = (0, import_react.createElement)(ViewComponent, viewProps, childEls);
-    } else {
-      content = (0, import_react.createElement)(ViewComponent, viewProps, childEls);
+    if (import_platform.isWeb) {
+      if (staticConfig.isReactNativeWeb) {
+        viewProps.dataSet = __spreadProps(__spreadValues({}, viewProps.dataSet), {
+          className: viewProps.className
+        });
+      } else {
+        const rnProps = import_rnw.rnw.createDOMProps(viewProps);
+        const className = rnProps.className && rnProps.className !== viewProps.className ? `${rnProps.className} ${viewProps.className}` : viewProps.className;
+        Object.assign(viewProps, rnProps);
+        if (className) {
+          viewProps.className = className;
+        }
+      }
     }
-    const shouldWrapTextAncestor = import_platform.isWeb && isText && !hasTextAncestor;
-    if (shouldWrapTextAncestor) {
-      content = (0, import_react.createElement)(import_TextAncestorContext.TextAncestorContext.Provider, { value: true }, content);
+    if (events) {
+      if (!isStringElement) {
+        Object.assign(viewProps, pressProps);
+      } else {
+        Object.assign(viewProps, events);
+      }
+    }
+    content = (0, import_react.createElement)(ViewComponent, viewProps, childEls);
+    if (import_platform.isWeb && events && attachHover) {
+      content = /* @__PURE__ */ import_react.default.createElement("span", {
+        className: "tui_Hoverable",
+        style: {
+          display: "contents"
+        },
+        onMouseEnter: events.onMouseEnter,
+        onMouseLeave: events.onMouseLeave
+      }, content);
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
         viewProps["debug"] = true;
-        console.log("\u{1F95A} props in:", props);
-        console.log("\u{1F95A} props out:", viewProps);
-        console.log((_b = props.onClick) == null ? void 0 : _b.toString());
-        console.log("\u{1F95A} etc:", { shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls });
-        if (import_platform.isWeb) {
-          console.log("\u{1F95A} component info", { staticConfig, tamaguiConfig });
-        }
+        console.log("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), state, splitStyles, animationStyles, isStringElement, classNamesIn: (_d = props.className) == null ? void 0 : _d.split(" "), classNamesOut: (_e = viewProps.className) == null ? void 0 : _e.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles }, typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null));
       }
     }
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features, content);
+    if (features.length) {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features, content);
+    }
+    return content;
   });
-  (0, import_createTamagui.onConfiguredOnce)((conf) => {
-    var _a;
+  component.displayName = staticConfig.componentName;
+  (0, import_conf.onConfiguredOnce)((conf) => {
+    var _a, _b, _c, _d;
+    if (process.env.IS_STATIC === "is_static") {
+      return;
+    }
     tamaguiConfig = conf;
-    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    const next = (0, import_getSplitStyles.getSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, true);
-    if (import_platform.isWeb) {
-      if (next.classNames) {
-        defaultsClassName += next.classNames + " ";
-      }
-      defaultsClassName += (0, import_addStylesUsingClassname.addStylesUsingClassname)([next.style, next.pseudos]);
-    } else {
-      if (!hasWarnedOnce) {
-        hasWarnedOnce = true;
-        console.log("\u26A0\uFE0F TODO account for default styles for media queries");
-      }
+    mergeShorthands(staticConfig, tamaguiConfig);
+    avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
+    AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
+    AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
+    initialTheme = initialTheme || (0, import_proxyThemeVariables.proxyThemeVariables)(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
+    initialSplitStyles = (0, import_getSplitStyles.getSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, {
+      mounted: true,
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both",
+      keepVariantsAsProps: true
+    });
+    const { style, viewProps } = initialSplitStyles;
+    defaultNativeStyle = {};
+    for (const key in style) {
+      const v = style[key];
+      defaultNativeStyle[key] = (0, import_createVariable.isVariable)(v) ? v.val : v;
     }
-    component.defaultProps = __spreadValues(__spreadValues({}, next.viewProps), component.defaultProps);
-    if (process.env.NODE_ENV === "development") {
-      if ((_a = staticConfig.defaultProps) == null ? void 0 : _a.debug) {
-        console.log("tamagui debug component:", next, defaultsClassName, component.defaultProps);
+    defaultNativeStyleSheet = import_react_native.StyleSheet.create({
+      base: defaultNativeStyle
+    });
+    component.defaultProps = __spreadValues(__spreadValues({}, viewProps), component.defaultProps);
+    if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
+      if (process.env.IS_STATIC !== "is_static") {
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+          staticConfig,
+          initialSplitStyles
+        });
       }
     }
   });
-  component["staticConfig"] = __spreadValues({
-    validStyles: validStyleProps
+  let res = component;
+  if (configIn.memo) {
+    res = (0, import_react.memo)(res);
+  }
+  res["staticConfig"] = __spreadValues({
+    validStyles: staticConfig.validStyles || import_helpers.stylePropsView
   }, staticConfig);
-  const res = component;
-  res["extractable"] = (Component2, conf) => {
-    Component2["staticConfig"] = (0, import_extendStaticConfig.extendStaticConfig)(res, __spreadProps(__spreadValues({}, conf), {
+  if (process.env.NODE_ENV === "development") {
+    res["whyDidYouRender"] = true;
+  }
+  res["extractable"] = (Component, conf) => {
+    Component["staticConfig"] = (0, import_extendStaticConfig.extendStaticConfig)(__spreadProps(__spreadValues({
+      Component
+    }, conf), {
       neverFlatten: true,
-      defaultProps: __spreadValues(__spreadValues({}, Component2.defaultProps), conf == null ? void 0 : conf.defaultProps)
-    }));
-    return Component2;
+      defaultProps: __spreadValues(__spreadValues({}, Component.defaultProps), conf == null ? void 0 : conf.defaultProps)
+    }), res);
+    return Component;
   };
   return res;
 }
 __name(createComponent, "createComponent");
-let hasWarnedOnce = false;
 const Spacer = createComponent({
+  memo: true,
+  componentName: "Spacer",
   defaultProps: __spreadProps(__spreadValues({}, import_constants.stackDefaultStyles), {
     size: true
   }),
@@ -460,18 +583,28 @@ const Spacer = createComponent({
     size: {
       "...size": (size, { tokens }) => {
         size = size == true ? "$true" : size;
+        const sizePx = tokens.size[size] ?? size;
         return {
-          width: tokens.size[size] ?? size,
-          height: tokens.size[size] ?? size
+          width: sizePx,
+          height: sizePx,
+          minWidth: sizePx,
+          minHeight: sizePx
         };
       }
     },
+    flex: {
+      true: {
+        flex: 1
+      }
+    },
     direction: {
       horizontal: {
-        height: 0
+        height: 0,
+        minHeight: 0
       },
       vertical: {
-        width: 0
+        width: 0,
+        minWidth: 0
       }
     }
   }
@@ -480,52 +613,65 @@ function spacedChildren({
   isZStack,
   children,
   space,
-  flexDirection
+  flexDirection,
+  spaceFlex
 }) {
   var _a;
-  if (!space && !isZStack) {
-    return children;
-  }
   const childrenList = import_react.Children.toArray(children);
   const len = childrenList.length;
   if (len === 1) {
-    return children;
+    return childrenList;
   }
   const next = [];
   for (const [index, child] of childrenList.entries()) {
     if (child === null || child === void 0) {
       continue;
     }
-    const key = `${(child == null ? void 0 : child["key"]) ?? index}`;
-    next.push(/* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
-      key
-    }, isZStack ? /* @__PURE__ */ import_react.default.createElement(Absolute, null, child) : child));
-    if ((_a = child == null ? void 0 : child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) {
+    if (!child || child["key"] && !isZStack) {
+      next.push(child);
+    } else {
+      next.push(/* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
+        key: index
+      }, isZStack ? /* @__PURE__ */ import_react.default.createElement(AbsoluteFill, null, child) : child));
+    }
+    if ((_a = child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) {
       continue;
     }
     if (index !== len - 1) {
       if (space) {
-        next.push(/* @__PURE__ */ import_react.default.createElement(Spacer, {
-          key: `${key}_spacer`,
+        next.push(/* @__PURE__ */ import_react.default.createElement(Spacer, __spreadValues({
+          key: `_${index}_spacer`,
           direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
           size: space
-        }));
+        }, spaceFlex && {
+          flex: spaceFlex
+        })));
       }
     }
   }
   return next;
 }
 __name(spacedChildren, "spacedChildren");
-const Absolute = /* @__PURE__ */ __name(({ children }) => /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
-  style: sheet.fullscreen
-}, children), "Absolute");
-const sheet = import_react_native.StyleSheet.create({
-  fullscreen: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }
+function AbsoluteFill(props) {
+  return import_platform.isWeb ? /* @__PURE__ */ import_react.default.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    }
+  }, props.children) : /* @__PURE__ */ import_react.default.createElement(import_react_native.View, {
+    style: import_react_native.StyleSheet.absoluteFill
+  }, props.child);
+}
+__name(AbsoluteFill, "AbsoluteFill");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AbsoluteFill,
+  Spacer,
+  createComponent,
+  mouseUps,
+  spacedChildren
 });
 //# sourceMappingURL=createComponent.js.map