@tamagui/core 1.0.0-alpha.7 → 1.0.0-beta.147

package/dist/cjs/createComponent.js

@@ -0,0 +1,651 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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(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,
+  defaultComponentState: () => defaultComponentState,
+  mouseUps: () => mouseUps,
+  spacedChildren: () => spacedChildren
+});
+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_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);
+  }
+  const { Component, validStyles, isText, isZStack, componentName } = staticConfig;
+  const componentClassName = `is_${componentName}`;
+  const validStyleProps = validStyles || import_helpers.stylePropsView;
+  let tamaguiConfig;
+  let AnimatedText;
+  let AnimatedView;
+  let avoidClasses = true;
+  let defaultPseudos = {};
+  let defaultNativeStyle;
+  let defaultNativeStyleSheet = null;
+  let defaultsClassName = null;
+  let initialTheme;
+  let defaultSplitStyleResult = null;
+  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 = defaultPseudos[name];
+    if (defaultPseudoStyle) {
+      styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
+    }
+  }
+  __name(addPseudoToStyles, "addPseudoToStyles");
+  const component = (0, import_react.forwardRef)((props, forwardedRef) => {
+    var _a, _c, _d, _e;
+    if (process.env.NODE_ENV === "development") {
+      if (props["debug"]) {
+        console.warn(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;
+      }
+    }
+    const forceUpdate = (0, import_use_force_update.useForceUpdate)();
+    const theme = (0, import_useTheme.useTheme)(props.theme, 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 : defaultsClassName);
+    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,
+      staticConfig,
+      theme,
+      onDidAnimate: props.onDidAnimate
+    });
+    const _b = viewPropsIn, {
+      tag,
+      hitSlop,
+      children,
+      pointerEvents,
+      onPress,
+      onPressIn,
+      onPressOut,
+      onHoverIn,
+      onHoverOut,
+      space,
+      disabled,
+      onMouseEnter,
+      onMouseLeave,
+      hrefAttrs,
+      onMoveShouldSetResponder,
+      onMoveShouldSetResponderCapture,
+      onResponderEnd,
+      onResponderGrant,
+      onResponderMove,
+      onResponderReject,
+      onResponderRelease,
+      onResponderStart,
+      onResponderTerminate,
+      onResponderTerminationRequest,
+      onScrollShouldSetResponder,
+      onScrollShouldSetResponderCapture,
+      onSelectionChangeShouldSetResponder,
+      onSelectionChangeShouldSetResponderCapture,
+      onStartShouldSetResponder,
+      onStartShouldSetResponderCapture,
+      onMouseDown,
+      nativeID,
+      accessible,
+      accessibilityRole,
+      collapsable,
+      focusable,
+      theme: _themeProp,
+      defaultVariants,
+      onLayout
+    } = _b, viewPropsRest = __objRest(_b, [
+      "tag",
+      "hitSlop",
+      "children",
+      "pointerEvents",
+      "onPress",
+      "onPressIn",
+      "onPressOut",
+      "onHoverIn",
+      "onHoverOut",
+      "space",
+      "disabled",
+      "onMouseEnter",
+      "onMouseLeave",
+      "hrefAttrs",
+      "onMoveShouldSetResponder",
+      "onMoveShouldSetResponderCapture",
+      "onResponderEnd",
+      "onResponderGrant",
+      "onResponderMove",
+      "onResponderReject",
+      "onResponderRelease",
+      "onResponderStart",
+      "onResponderTerminate",
+      "onResponderTerminationRequest",
+      "onScrollShouldSetResponder",
+      "onScrollShouldSetResponderCapture",
+      "onSelectionChangeShouldSetResponder",
+      "onSelectionChangeShouldSetResponderCapture",
+      "onStartShouldSetResponder",
+      "onStartShouldSetResponderCapture",
+      "onMouseDown",
+      "nativeID",
+      "accessible",
+      "accessibilityRole",
+      "collapsable",
+      "focusable",
+      "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") {
+        setStateShallow({
+          mounted: true
+        });
+      }
+      internal.current.isMounted = true;
+      return () => {
+        mouseUps.delete(unPress);
+        internal.current.isMounted = false;
+      };
+    }, [hasEnterStyle]);
+    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;
+      if (accessibilityRole)
+        viewProps.accessibilityRole = accessibilityRole;
+    }
+    if (import_platform.isWeb) {
+      import_rnw.rnw.useResponderEvents(hostRef, {
+        onMoveShouldSetResponder,
+        onMoveShouldSetResponderCapture,
+        onResponderEnd,
+        onResponderGrant,
+        onResponderMove,
+        onResponderReject,
+        onResponderRelease,
+        onResponderStart,
+        onResponderTerminate,
+        onResponderTerminationRequest,
+        onScrollShouldSetResponder,
+        onScrollShouldSetResponderCapture,
+        onSelectionChangeShouldSetResponder,
+        onSelectionChangeShouldSetResponderCapture,
+        onStartShouldSetResponder,
+        onStartShouldSetResponderCapture
+      });
+    }
+    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);
+      }
+    }
+    if (import_platform.isWeb) {
+      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, defaultsClassName, 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;
+      }
+    } else {
+      viewProps.style = styles;
+    }
+    if (pointerEvents) {
+      viewProps.pointerEvents = pointerEvents;
+    }
+    if (import_platform.isWeb) {
+      const platformMethodsRef = import_rnw.rnw.usePlatformMethods(viewProps);
+      const setRef = import_rnw.rnw.useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+      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) {
+          viewProps.download = download;
+        }
+        if (rel != null) {
+          viewProps.rel = rel;
+        }
+        if (typeof target === "string") {
+          viewProps.target = target.charAt(0) !== "_" ? "_" + target : target;
+        }
+      }
+    } else {
+      if (forwardedRef) {
+        viewProps.ref = forwardedRef;
+      }
+    }
+    const attachPress = !!(pseudos && pseudos.pressStyle || defaultPseudos && defaultPseudos.pressStyle || onPress || onPressOut || onPressIn);
+    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;
+      setStateShallow({
+        press: false,
+        pressIn: false
+      });
+    }, []);
+    const events = shouldAttach ? __spreadProps(__spreadValues(__spreadValues({}, !import_platform.isWeb && {
+      onPressOut: (e) => {
+        unPress();
+        onPressOut == null ? void 0 : onPressOut(e);
+      }
+    }), isHoverable && {
+      onMouseEnter: attachHover ? (e) => {
+        let next = {};
+        if (attachHover) {
+          next.hover = true;
+        }
+        if (state.pressIn) {
+          next.press = true;
+        }
+        if (Object.keys(next).length) {
+          setStateShallow(next);
+        }
+        onHoverIn == null ? void 0 : onHoverIn(e);
+        onMouseEnter == null ? void 0 : onMouseEnter(e);
+      } : void 0,
+      onMouseLeave: attachHover ? (e) => {
+        let next = {};
+        mouseUps.add(unPress);
+        if (attachHover) {
+          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
+    }), {
+      onMouseDown: attachPress ? (e) => {
+        setStateShallow({
+          press: true,
+          pressIn: true
+        });
+        onPressIn == null ? void 0 : onPressIn(e);
+        onMouseDown == null ? void 0 : onMouseDown(e);
+      } : null,
+      [pressEventKey]: attachPress ? (e) => {
+        onPress == null ? void 0 : onPress(e);
+        unPress();
+        onPressOut == null ? void 0 : onPressOut(e);
+      } : null
+    }) : null;
+    let childEls = !children ? children : (0, import_wrapThemeManagerContext.wrapThemeManagerContext)(spacedChildren({
+      children,
+      space,
+      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) {
+      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;
+        }
+      }
+    }
+    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("  \xBB ", __spreadValues({ propsIn: __spreadValues({}, props), propsOut: __spreadValues({}, viewProps), state, splitStyles, defaultsClassName, 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, defaultSplitStyleResult }, typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null));
+      }
+    }
+    if (features.length) {
+      return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, features, content);
+    }
+    return content;
+  });
+  (0, import_conf.onConfiguredOnce)((conf) => {
+    var _a, _b, _c, _d;
+    if (process.env.IS_STATIC === "is_static") {
+      return;
+    }
+    const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
+    tamaguiConfig = conf;
+    avoidClasses = !!((_b = tamaguiConfig.animations) == null ? void 0 : _b.avoidClasses);
+    AnimatedText = (_c = tamaguiConfig.animations) == null ? void 0 : _c.Text;
+    AnimatedView = (_d = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _d.View;
+    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
+    defaultSplitStyleResult = (0, import_getSplitStyles.getSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, {
+      mounted: true,
+      hover: false,
+      press: false,
+      pressIn: false,
+      focus: false,
+      resolveVariablesAs: "both"
+    });
+    const { classNames, pseudos, style, viewProps } = defaultSplitStyleResult;
+    if (import_platform.isWeb) {
+      defaultsClassName = classNames;
+    }
+    defaultPseudos = pseudos;
+    defaultNativeStyle = {};
+    for (const key in style) {
+      const v = style[key];
+      defaultNativeStyle[key] = (0, import_createVariable.isVariable)(v) ? v.val : v;
+    }
+    defaultNativeStyleSheet = import_react_native.StyleSheet.create({
+      base: defaultNativeStyle
+    });
+    component.displayName = staticConfig.componentName;
+    component.defaultProps = __spreadValues(__spreadValues({}, viewProps), component.defaultProps);
+    if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
+      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, __spreadValues({ staticConfig }, defaultSplitStyleResult));
+    }
+  });
+  let res = component;
+  if (configIn.memo) {
+    res = (0, import_react.memo)(res);
+  }
+  res["whyDidYouRender"] = true;
+  res["staticConfig"] = __spreadValues({
+    validStyles: validStyleProps
+  }, staticConfig);
+  res["extractable"] = (Component2, conf) => {
+    Component2["staticConfig"] = (0, import_extendStaticConfig.extendStaticConfig)(res, __spreadProps(__spreadValues({}, conf), {
+      neverFlatten: true,
+      defaultProps: __spreadValues(__spreadValues({}, Component2.defaultProps), conf == null ? void 0 : conf.defaultProps)
+    }));
+    return Component2;
+  };
+  return res;
+}
+__name(createComponent, "createComponent");
+const Spacer = createComponent({
+  memo: true,
+  componentName: "Spacer",
+  defaultProps: __spreadProps(__spreadValues({}, import_constants.stackDefaultStyles), {
+    size: true
+  }),
+  variants: {
+    size: {
+      "...size": (size, { tokens }) => {
+        size = size == true ? "$true" : size;
+        const sizePx = tokens.size[size] ?? size;
+        return {
+          width: sizePx,
+          height: sizePx,
+          minWidth: sizePx,
+          minHeight: sizePx
+        };
+      }
+    },
+    flex: {
+      true: {
+        flex: 1
+      }
+    },
+    direction: {
+      horizontal: {
+        height: 0,
+        minHeight: 0
+      },
+      vertical: {
+        width: 0,
+        minWidth: 0
+      }
+    }
+  }
+});
+function spacedChildren({
+  isZStack,
+  children,
+  space,
+  flexDirection,
+  spaceFlex
+}) {
+  var _a;
+  const childrenList = import_react.Children.toArray(children);
+  const len = childrenList.length;
+  if (len === 1) {
+    return childrenList;
+  }
+  const next = [];
+  for (const [index, child] of childrenList.entries()) {
+    if (child === null || child === void 0) {
+      continue;
+    }
+    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, __spreadValues({
+          key: `_${index}_spacer`,
+          direction: flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical",
+          size: space
+        }, spaceFlex && {
+          flex: spaceFlex
+        })));
+      }
+    }
+  }
+  return next;
+}
+__name(spacedChildren, "spacedChildren");
+const AbsoluteFill = /* @__PURE__ */ __name((props) => 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), "AbsoluteFill");
+//# sourceMappingURL=createComponent.js.map