@tamagui/core 1.0.0-beta.152 → 1.0.0-beta.17

package/dist/cjs/createComponent.js

@@ -53,7 +53,6 @@ __export(createComponent_exports, {
   AbsoluteFill: () => AbsoluteFill,
   Spacer: () => Spacer,
   createComponent: () => createComponent,
-  defaultComponentState: () => defaultComponentState,
   mouseUps: () => mouseUps,
   spacedChildren: () => spacedChildren
 });
@@ -66,15 +65,18 @@ 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_nativeGestureHandler = require("./helpers/nativeGestureHandler");
+var import_proxyThemeVariables = require("./helpers/proxyThemeVariables");
 var import_wrapThemeManagerContext = require("./helpers/wrapThemeManagerContext");
 var import_useFeatures = require("./hooks/useFeatures");
+var import_useIsTouchDevice = require("./hooks/useIsTouchDevice");
 var import_usePressable = require("./hooks/usePressable");
 var import_useTheme = require("./hooks/useTheme");
+var import_Slot = require("./views/Slot");
 var import_TextAncestorContext = require("./views/TextAncestorContext");
 import_react.default["keep"];
 const defaultComponentState = {
@@ -91,55 +93,70 @@ if (typeof document !== "undefined") {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
   });
+  document.addEventListener("touchend", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
+  document.addEventListener("touchcancel", () => {
+    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, componentName } = staticConfig;
-  const componentClassName = `is_${componentName}`;
-  const validStyleProps = validStyles || import_helpers.stylePropsView;
+}
+__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 AnimatedText;
   let AnimatedView;
   let avoidClasses = true;
-  let defaultPseudos = {};
   let defaultNativeStyle;
-  let defaultNativeStyleSheet = null;
-  let defaultsClassName = null;
-  let initialTheme;
-  let defaultSplitStyleResult = null;
+  let defaultNativeStyleSheet;
+  let tamaguiDefaultProps;
+  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 = defaultPseudos[name];
+    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
     if (defaultPseudoStyle) {
       styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
     }
+    if (pseudoStyle) {
+      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
+    }
   }
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = (0, import_react.forwardRef)((props, forwardedRef) => {
     var _a, _c, _d, _e;
+    props = tamaguiDefaultProps && !props.asChild ? __spreadValues(__spreadValues({}, tamaguiDefaultProps), props) : props;
+    const { Component, componentName, isText, isZStack } = staticConfig;
     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);
+        console.log("\u26A0\uFE0F", staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props, Object.keys(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 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 : defaultsClassName);
+    const splitStyles = (0, import_getSplitStyles.useSplitStyles)(props, staticConfig, theme, shouldAvoidClasses ? __spreadProps(__spreadValues({}, state), { noClassNames: true, resolveVariablesAs: "value" }) : state, shouldAvoidClasses || props.asChild ? 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);
@@ -158,6 +175,7 @@ function createComponent(configIn) {
     const _b = viewPropsIn, {
       tag,
       hitSlop,
+      asChild,
       children,
       pointerEvents,
       onPress,
@@ -192,12 +210,14 @@ function createComponent(configIn) {
       accessibilityRole,
       collapsable,
       focusable,
+      onClick,
       theme: _themeProp,
       defaultVariants,
       onLayout
     } = _b, viewPropsRest = __objRest(_b, [
       "tag",
       "hitSlop",
+      "asChild",
       "children",
       "pointerEvents",
       "onPress",
@@ -232,6 +252,7 @@ function createComponent(configIn) {
       "accessibilityRole",
       "collapsable",
       "focusable",
+      "onClick",
       "theme",
       "defaultVariants",
       "onLayout"
@@ -253,7 +274,7 @@ function createComponent(configIn) {
       };
     }
     (0, import_platform.useIsomorphicLayoutEffect)(() => {
-      if (typeof window !== "undefined") {
+      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
         setStateShallow({
           mounted: true
         });
@@ -263,7 +284,7 @@ function createComponent(configIn) {
         mouseUps.delete(unPress);
         internal.current.isMounted = false;
       };
-    }, [hasEnterStyle]);
+    }, [hasEnterStyle, props.animation]);
     if (nativeID) {
       viewProps.id = nativeID;
     }
@@ -279,7 +300,7 @@ function createComponent(configIn) {
       if (accessibilityRole)
         viewProps.accessibilityRole = accessibilityRole;
     }
-    if (import_platform.isWeb) {
+    if (import_platform.isWeb && !asChild) {
       import_rnw.rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
@@ -336,7 +357,7 @@ function createComponent(configIn) {
         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]])) });
+            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;
@@ -377,11 +398,16 @@ function createComponent(configIn) {
         viewProps.ref = forwardedRef;
       }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || defaultPseudos && defaultPseudos.pressStyle || onPress || onPressOut || onPressIn);
-    const isHoverable = import_platform.isWeb && !import_platform.isTouchDevice;
+    const initialPseudos = initialSplitStyles.pseudos;
+    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
+    const isTouch = (0, import_useIsTouchDevice.useIsTouchDevice)();
+    const isHoverable = import_platform.isWeb && !isTouch;
     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 handlesPressEvents = !isStringElement && !asChild;
+    const pressKey = handlesPressEvents ? "onPress" : "onClick";
+    const pressInKey = handlesPressEvents ? "onPressIn" : "onMouseDown";
+    const pressOutKey = handlesPressEvents ? "onPressOut" : "onMouseUp";
+    const shouldAttach = !asChild && (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;
@@ -390,12 +416,12 @@ function createComponent(configIn) {
         pressIn: false
       });
     }, []);
-    const events = shouldAttach ? __spreadProps(__spreadValues(__spreadValues({}, !import_platform.isWeb && {
-      onPressOut: (e) => {
+    const events = shouldAttach ? __spreadProps(__spreadValues({
+      [pressOutKey]: attachPress ? (e) => {
         unPress();
         onPressOut == null ? void 0 : onPressOut(e);
-      }
-    }), isHoverable && {
+      } : void 0
+    }, isHoverable && {
       onMouseEnter: attachHover ? (e) => {
         let next = {};
         if (attachHover) {
@@ -427,37 +453,29 @@ function createComponent(configIn) {
         onMouseLeave == null ? void 0 : onMouseLeave(e);
       } : void 0
     }), {
-      onMouseDown: attachPress ? (e) => {
+      [pressInKey]: attachPress ? (e) => {
         setStateShallow({
           press: true,
           pressIn: true
         });
         onPressIn == null ? void 0 : onPressIn(e);
         onMouseDown == null ? void 0 : onMouseDown(e);
+        if (import_platform.isWeb) {
+          mouseUps.add(unPress);
+        }
       } : null,
-      [pressEventKey]: attachPress ? (e) => {
-        onPress == null ? void 0 : onPress(e);
+      [pressKey]: attachPress ? (e) => {
         unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
+        onClick == null ? void 0 : onClick(e);
+        onPress == null ? void 0 : onPress(e);
       } : null
     }) : null;
-    let childEls = !children ? children : (0, import_wrapThemeManagerContext.wrapThemeManagerContext)(spacedChildren({
+    const childEls = !children || asChild ? 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) {
@@ -473,14 +491,46 @@ function createComponent(configIn) {
         }
       }
     }
-    if (events) {
-      if (!isStringElement) {
-        Object.assign(viewProps, pressProps);
-      } else {
-        Object.assign(viewProps, events);
+    if (asChild) {
+      ViewComponent = import_Slot.Slot;
+      const onlyChild = import_react.default.Children.only(children);
+      Object.assign(viewProps, onlyChild.props);
+    }
+    if (import_platform.isWeb) {
+      const [pressableProps] = (0, import_usePressable.usePressable)(events ? __spreadProps(__spreadValues({
+        disabled
+      }, hitSlop && {
+        hitSlop
+      }), {
+        onPressOut: events[pressOutKey],
+        onPressIn: events[pressInKey],
+        onPress: events[pressKey]
+      }) : {
+        disabled: true
+      });
+      if (events) {
+        if (handlesPressEvents) {
+          Object.assign(viewProps, pressableProps);
+        } else {
+          Object.assign(viewProps, events);
+        }
       }
     }
     content = (0, import_react.createElement)(ViewComponent, viewProps, childEls);
+    if (!import_platform.isWeb) {
+      if (attachPress && events) {
+        content = /* @__PURE__ */ import_react.default.createElement(import_react_native.Pressable, {
+          onPressIn: events[pressInKey],
+          onPress: events[pressKey]
+        }, /* @__PURE__ */ import_react.default.createElement(import_nativeGestureHandler.BaseButton, {
+          onActiveStateChange: (isActive) => {
+            if (!isActive) {
+              unPress();
+            }
+          }
+        }, content));
+      }
+    }
     if (import_platform.isWeb && events && attachHover) {
       content = /* @__PURE__ */ import_react.default.createElement("span", {
         className: "tui_Hoverable",
@@ -493,8 +543,7 @@ function createComponent(configIn) {
     }
     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));
+        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(" "), 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));
       }
     }
     if (features.length) {
@@ -502,58 +551,74 @@ function createComponent(configIn) {
     }
     return content;
   });
+  component.displayName = staticConfig.componentName;
   (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, {
+    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.insertSplitStyles)(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
       hover: false,
       press: false,
       pressIn: false,
       focus: false,
-      resolveVariablesAs: "both"
+      resolveVariablesAs: "both",
+      keepVariantsAsProps: true
     });
-    const { classNames, pseudos, style, viewProps } = defaultSplitStyleResult;
-    if (import_platform.isWeb) {
-      defaultsClassName = classNames;
-    }
-    defaultPseudos = pseudos;
+    const defaults = __spreadValues(__spreadValues({}, component.defaultProps), initialSplitStyles.viewProps);
     defaultNativeStyle = {};
-    for (const key in style) {
-      const v = style[key];
-      defaultNativeStyle[key] = (0, import_createVariable.isVariable)(v) ? v.val : v;
+    const validStyles = staticConfig.validStyles || import_helpers.stylePropsView;
+    for (const key in staticConfig.defaultProps) {
+      const val = staticConfig.defaultProps[key];
+      if (typeof val === "string" && val[0] === "$" || !validStyles[key]) {
+        defaults[key] = val;
+      } else {
+        defaultNativeStyle[key] = val;
+      }
     }
     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));
+    if (Object.keys(defaults).length) {
+      tamaguiDefaultProps = defaults;
+    }
+    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,
+          tamaguiDefaultProps,
+          defaultNativeStyle,
+          defaults
+        });
+      }
     }
   });
   let res = component;
   if (configIn.memo) {
     res = (0, import_react.memo)(res);
   }
-  res["whyDidYouRender"] = true;
   res["staticConfig"] = __spreadValues({
-    validStyles: validStyleProps
+    validStyles: staticConfig.validStyles || import_helpers.stylePropsView
   }, staticConfig);
-  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;
 }
@@ -592,6 +657,9 @@ const Spacer = createComponent({
         minWidth: 0
       }
     }
+  },
+  defaultVariants: {
+    direction: "horizontal"
   }
 });
 function spacedChildren({
@@ -602,50 +670,60 @@ function spacedChildren({
   spaceFlex
 }) {
   var _a;
-  const childrenList = import_react.Children.toArray(children);
+  const childrenList = Array.isArray(children) ? children : import_react.Children.toArray(children);
   const len = childrenList.length;
-  if (len === 1) {
+  if (len <= 1) {
     return childrenList;
   }
-  const next = [];
+  const final = [];
   for (const [index, child] of childrenList.entries()) {
-    if (child === null || child === void 0) {
+    if (child === null || child === void 0 || child === false || Array.isArray(child) && child.length === 0) {
       continue;
     }
     if (!child || child["key"] && !isZStack) {
-      next.push(child);
+      final.push(child);
     } else {
-      next.push(/* @__PURE__ */ import_react.default.createElement(import_react.Fragment, {
+      final.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
-        })));
-      }
+    const next = childrenList[index + 1];
+    if (next && space) {
+      final.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;
+  return final;
 }
 __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");
+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