@multiplatform.one/components 6.7.0 → 7.1.0

package/dist/cjs/layouts/PageTemplates.cjs

@@ -36,14 +36,16 @@ function renderTemplateHeader({
   title,
   subtitle,
   actions,
+  nav,
   header
 }) {
   if (header !== void 0) return header;
-  if (!title && !subtitle && !actions) return null;
+  if (!title && !subtitle && !actions && !nav) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_page.PageHeader, {
     title,
     subtitle,
-    actions
+    actions,
+    nav
   });
 }
 function ListPageLayout({
@@ -51,6 +53,7 @@ function ListPageLayout({
   subtitle,
   actions,
   header,
+  nav,
   toolbar,
   children,
   ...rest
@@ -62,7 +65,8 @@ function ListPageLayout({
       title,
       subtitle,
       actions,
-      header
+      header,
+      nav
     }), toolbar, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
       flex: 1,
       minWidth: 0,
@@ -76,6 +80,7 @@ function DetailPageLayout({
   subtitle,
   actions,
   header,
+  nav,
   toolbarLeading,
   toolbarTrailing,
   aside,
@@ -114,7 +119,8 @@ function DetailPageLayout({
       title,
       subtitle,
       actions,
-      header
+      header,
+      nav
     }), body]
   });
 }
@@ -123,6 +129,7 @@ function SettingsPageLayout({
   subtitle,
   actions,
   header,
+  nav,
   maxWidth = import_theme.layoutBreakpoints.expanded,
   children,
   ...rest
@@ -135,7 +142,8 @@ function SettingsPageLayout({
       title,
       subtitle,
       actions,
-      header
+      header,
+      nav
     }), children]
   });
 }

package/dist/cjs/layouts/PageTemplates.native.js

@@ -39,14 +39,16 @@ function renderTemplateHeader(param) {
     title,
     subtitle,
     actions,
+    nav,
     header
   } = param;
   if (header !== void 0) return header;
-  if (!title && !subtitle && !actions) return null;
+  if (!title && !subtitle && !actions && !nav) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_page.PageHeader, {
     title,
     subtitle,
-    actions
+    actions,
+    nav
   });
 }
 function ListPageLayout(param) {
@@ -55,6 +57,7 @@ function ListPageLayout(param) {
     subtitle,
     actions,
     header,
+    nav,
     toolbar,
     children,
     ...rest
@@ -66,7 +69,8 @@ function ListPageLayout(param) {
       title,
       subtitle,
       actions,
-      header
+      header,
+      nav
     }), toolbar, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
       flex: 1,
       minWidth: 0,
@@ -81,6 +85,7 @@ function DetailPageLayout(param) {
     subtitle,
     actions,
     header,
+    nav,
     toolbarLeading,
     toolbarTrailing,
     aside,
@@ -119,7 +124,8 @@ function DetailPageLayout(param) {
       title,
       subtitle,
       actions,
-      header
+      header,
+      nav
     }), body]
   });
 }
@@ -129,6 +135,7 @@ function SettingsPageLayout(param) {
     subtitle,
     actions,
     header,
+    nav,
     maxWidth = import_theme.layoutBreakpoints.expanded,
     children,
     ...rest
@@ -141,7 +148,8 @@ function SettingsPageLayout(param) {
       title,
       subtitle,
       actions,
-      header
+      header,
+      nav
     }), children]
   });
 }

package/dist/cjs/layouts/PageTemplates.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","PageTemplates_exports","__export","DetailPageLayout","ListPageLayout","SettingsPageLayout","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_page","import_PaneScaffold","renderTemplateHeader","param","title","subtitle","actions","header","jsx","PageHeader","toolbar","children","rest","jsxs","Screen","YStack","flex","minWidth","toolbarLeading","toolbarTrailing","aside","sizeClass","sizeClassProp","liveClass","useLayoutSizeClass","multi","defaultMaxPanes","gaps","useSemanticGaps","ScreenToolbar","leading","trailing","body","SupportingPaneLayout","supporting","betweenGroups"],"sources":["../../../src/layouts/PageTemplates.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","PageTemplates_exports","__export","DetailPageLayout","ListPageLayout","SettingsPageLayout","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_page","import_PaneScaffold","renderTemplateHeader","param","title","subtitle","actions","nav","header","jsx","PageHeader","toolbar","children","rest","jsxs","Screen","YStack","flex","minWidth","toolbarLeading","toolbarTrailing","aside","sizeClass","sizeClassProp","liveClass","useLayoutSizeClass","multi","defaultMaxPanes","gaps","useSemanticGaps","ScreenToolbar","leading","trailing","body","SupportingPaneLayout","supporting","betweenGroups"],"sources":["../../../src/layouts/PageTemplates.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA,cAAA;EAAAC,kBAAA,EAAAA,CAAA,KAAAA;AAAA;AAqBAC,MAAA,CAAAC,OAAA,GAAAX,YAMO,CAAAK,qBAAA;AAEP,IAAAO,kBAAuB,GAAAC,OAAA;AACvB,IAAAC,YAAA,GAAoED,OAAA;AACpE,IAAAE,cAAA,GAAAF,OAAqC;AAiB5B,IAAAG,WAAA,GAAAH,OAAA;AAHT,IAAAI,mBAAS,GAAAJ,OAAuB,2BAAiB;AAC/C,SAAIK,oBAAsBA,CAAAC,KAAO;EACjC,IAAI;IAACC,KAAA;IAAAC,QAAU;IAAAC,OAAa;IAAAC,GAAA;IAAAC;EAAiB,IAAAL,KAAO;EACpD,IAAAK,MAAO,oBAAAA,MAAA;EACT,KAAAJ,KAAA,KAAAC,QAAA,KAAAC,OAAA,KAAAC,GAAA;EAmBO,OAAS,eAAe,IAAAX,kBAAA,CAAAa,GAAA,EAAAT,WAAA,CAAAU,UAAA;IAC7BN,KAAA;IACAC,QAAA;IACAC,OAAA;IACAC;EACA;AAAA;AACA,SACAf,eAAAW,KAAA;EACA,IAAG;IAAAC,KAAA;IAAAC,QAAA;IAAAC,OAAA;IAAAE,MAAA;IAAAD,GAAA;IAAAI,OAAA;IAAAC,QAAA;IAAA,GAAAC;EAAA,IAAAV,KAAA;EACL,OAAwB,mBAAAP,kBAAA,CAAAkB,IAAA,EAAAd,WAAA,CAAAe,MAAA;IACtB,gBACE;IACG,GAAAF,IAAA;IACAD,QAAA,GACDV,oBAAA;MAGFE,KAAA;MAEJC,QAAA;MAkCOC,OAAS;MACdE,MAAA;MACAD;IACA,IACAI,OAAA,EACA,mBAAAf,kBAAA,CAAAa,GAAA,EAAAV,cAAA,CAAAiB,MAAA;MACAC,IAAA;MACAC,QAAA;MACA;MACAN;IACA;EAEF,CAA0B;AACxB;AACA,SAAMrB,gBAAYA,CAAAY,KAAA;EAClB;IAAMC,KAAA;IAAAC,QAAQ;IAAAC,OAAA;IAAAE,MAAA;IAAAD,GAAA;IAAAY,cAAyB;IAAAC,eAAK;IAAAC,KAAA;IAAAC,SAAA,EAAAC,aAAA;IAAAX,QAAA;IAAA,GAAAC;EAAA,IAAAV,KAAA;EAC5C,IAAAqB,SAAM,IAAO,GAAA1B,YAAA,CAAA2B,kBAAgB;EAE7B,IAAAH,SAAM,GACJC,aAAA,KAAkB,QAAAA,aAChB,cAAAA,aAAA,GAAAC,SAAA;EAGJ,IAAIE,KAAA,OAAA5B,YAAA,CAAA6B,eAAA,EAAAL,SAAA;EACJ,IAAIM,IAAA,OAAU9B,YAAQ,CAAA+B,eAAqB;EACzC,IAAAlB,OAAO,GAAAQ,cAAA,IAAAC,eAAA,sBAAAxB,kBAAA,CAAAa,GAAA,EAAAT,WAAA,CAAA8B,aAAA;IACTC,OAAA,EAAWZ,cAAO;IAChBa,QACE,EAAAZ;EAIJ,SAAO;EAEL,IAAAa,IAAA;EAEK,IAAAZ,KAAA,aAAAA,KAAA;IAAAY,IACA,GAAArB,QAAA;EAAA,OACH,IAAAc,KAAA;IAEJO,IAAA,sBAAArC,kBAAA,CAAAa,GAAA,EAAAR,mBAAA,CAAAiC,oBAAA;MAEAZ,SACE;MACGa,UAAA,EAAAd,KAAA;MACAT;IACA;EAAA,OACH;IAEJqB,IAAA,sBAAArC,kBAAA,CAAAkB,IAAA,EAAAf,cAAA,CAAAiB,MAAA;MAqBO,GAASY,IAAA,CAAAQ,aAAA;MACd;MACAxB,QAAA,GACAA,QAAA,EACAS,KAAA;IAEA;EACA;EACA,OAAG,mBAAAzB,kBAAA,CAAAkB,IAAA,EAAAd,WAAA,CAAAe,MAAA;IACuB;IAC1B,GAAAF,IACE;IACGD,QAAA,GACAD,OAAA,EACHT,oBAAA;MAEJE,KAAA","ignoreList":[]}

package/dist/cjs/layouts/PaneScaffold.cjs

@@ -32,7 +32,13 @@ module.exports = __toCommonJS(PaneScaffold_exports);
 var import_theme = require("@multiplatform.one/theme");
 var import_react = require("react");
 var import_tamagui = require("tamagui");
+var import_useDirection = require("../hooks/useDirection.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+const SASH_VISUAL = 8;
+const FRACTION_STEP = 0.02;
+const FRACTION_STEP_LARGE = 0.1;
+const DEFAULT_MIN_FRACTION = 0.2;
+const DEFAULT_MAX_FRACTION = 0.8;
 function PaneScaffold({
   primary,
   secondary,
@@ -40,6 +46,11 @@ function PaneScaffold({
   maxPanes: maxPanesProp,
   paneFlex = [1, 1],
   paneGap,
+  resizable: resizableProp,
+  minPaneFraction = DEFAULT_MIN_FRACTION,
+  maxPaneFraction = DEFAULT_MAX_FRACTION,
+  primaryFraction: primaryFractionProp,
+  onPrimaryFractionChange,
   sizeClass: sizeClassProp,
   ...rest
 }) {
@@ -48,8 +59,9 @@ function PaneScaffold({
   const budget = maxPanesProp ?? (0, import_theme.defaultMaxPanes)(sizeClass);
   const hasSecondary = secondary !== null && secondary !== void 0;
   const multi = budget >= 2 && hasSecondary;
-  const gaps = (0, import_theme.useSemanticGaps)();
-  const gap = paneGap ?? gaps.betweenGroups.gap;
+  const gapped = paneGap !== void 0;
+  const gap = gapped ? paneGap : void 0;
+  const resizable = (resizableProp ?? !gapped) && multi && !gapped;
   if (!multi) {
     const shown = activePane === "secondary" && hasSecondary ? secondary : primary;
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
@@ -66,25 +78,263 @@ function PaneScaffold({
     });
   }
   const [primaryFlex, secondaryFlex] = paneFlex;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
     flexGrow: 1,
     flexShrink: 1,
     flexBasis: "auto",
     minWidth: 0,
+    minHeight: 0,
     width: "100%",
-    gap,
+    alignItems: "stretch",
+    gap: gap ?? 0,
+    position: "relative",
     "data-testid": "pane-scaffold",
     "data-panes": "2",
     "data-size-class": sizeClass,
+    "data-sash": resizable ? "true" : "false",
     ...rest,
+    children: resizable ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ResizablePanes, {
+      primary,
+      secondary,
+      primaryFlex,
+      secondaryFlex,
+      minFraction: minPaneFraction,
+      maxFraction: maxPaneFraction,
+      fraction: primaryFractionProp,
+      onFractionChange: onPrimaryFractionChange
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        flex: primaryFlex,
+        minWidth: 0,
+        minHeight: 0,
+        ...(gapped ? void 0 : paneHairlineEnd),
+        "data-testid": "pane-primary",
+        children: primary
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        flex: secondaryFlex,
+        minWidth: 0,
+        minHeight: 0,
+        "data-testid": "pane-secondary",
+        children: secondary
+      })]
+    })
+  });
+}
+const paneHairlineEnd = import_tamagui.isWeb ? {
+  borderInlineEndWidth: import_theme.hairlineWidth,
+  borderInlineEndStyle: "solid",
+  borderColor: "$borderColor",
+  className: "mp-hairline-ie"
+} : {
+  borderEndWidth: import_theme.hairlineWidth,
+  borderColor: "$borderColor"
+};
+function clampFraction(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function ResizablePanes({
+  primary,
+  secondary,
+  primaryFlex,
+  secondaryFlex,
+  minFraction,
+  maxFraction,
+  fraction: fractionProp,
+  onFractionChange
+}) {
+  const sashId = (0, import_react.useId)();
+  const rtl = (0, import_useDirection.useDirection)() === "rtl";
+  const dirSign = rtl ? -1 : 1;
+  const defaultFraction = primaryFlex / Math.max(primaryFlex + secondaryFlex, 1);
+  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultFraction);
+  const fraction = clampFraction(fractionProp ?? uncontrolled, minFraction, maxFraction);
+  const [hot, setHot] = (0, import_react.useState)(false);
+  const [kbFocus, setKbFocus] = (0, import_react.useState)(false);
+  const [dragging, setDragging] = (0, import_react.useState)(false);
+  const widthRef = (0, import_react.useRef)(0);
+  const rowRef = (0, import_react.useRef)(null);
+  const dragRef = (0, import_react.useRef)(null);
+  const lastTapRef = (0, import_react.useRef)(0);
+  const measureWidth = () => {
+    const node = rowRef.current;
+    const rect = node?.getBoundingClientRect?.();
+    if (rect?.width) widthRef.current = rect.width;
+  };
+  (0, import_theme.ensureKeyboardModalityTracking)();
+  const commit = (0, import_react.useCallback)(next => {
+    const clamped = clampFraction(next, minFraction, maxFraction);
+    if (fractionProp === void 0) setUncontrolled(clamped);
+    onFractionChange?.(clamped);
+  }, [fractionProp, minFraction, maxFraction, onFractionChange]);
+  const reset = (0, import_react.useCallback)(() => commit(defaultFraction), [commit, defaultFraction]);
+  const finishDrag = (0, import_react.useCallback)(() => {
+    const session = dragRef.current;
+    dragRef.current = null;
+    setDragging(false);
+    setHot(false);
+    if (session && !session.moved) {
+      const now = Date.now();
+      if (now - lastTapRef.current < 400) reset();
+      lastTapRef.current = now;
+    }
+  }, [reset]);
+  (0, import_react.useEffect)(() => {
+    if (!import_tamagui.isWeb || !dragging || typeof window === "undefined") return;
+    const prevUserSelect = document.body.style.userSelect;
+    const prevCursor = document.documentElement.style.cursor;
+    document.body.style.userSelect = "none";
+    document.documentElement.style.cursor = "col-resize";
+    const onMove = e => {
+      const session = dragRef.current;
+      let width = widthRef.current;
+      if (width <= 0) {
+        const rect = rowRef.current?.getBoundingClientRect?.();
+        if (rect?.width) {
+          width = rect.width;
+          widthRef.current = width;
+        }
+      }
+      if (!session || width <= 0) return;
+      const dx = (e.clientX - session.startX) * dirSign;
+      if (Math.abs(dx) > 2) session.moved = true;
+      commit(session.startFraction + dx / width);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", finishDrag);
+    window.addEventListener("pointercancel", finishDrag);
+    return () => {
+      document.body.style.userSelect = prevUserSelect;
+      document.documentElement.style.cursor = prevCursor;
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", finishDrag);
+      window.removeEventListener("pointercancel", finishDrag);
+    };
+  }, [commit, dirSign, dragging, finishDrag]);
+  const onSashPointerDown = e => {
+    if (e.button != null && e.button !== 0) return;
+    e.preventDefault?.();
+    e.stopPropagation?.();
+    try {
+      e.currentTarget?.setPointerCapture?.(e.pointerId);
+    } catch {}
+    measureWidth();
+    dragRef.current = {
+      startX: e.clientX ?? e.nativeEvent?.pageX ?? 0,
+      startFraction: fraction,
+      moved: false
+    };
+    setDragging(true);
+    setHot(true);
+  };
+  const onSashPointerMove = e => {
+    if (!dragRef.current || import_tamagui.isWeb) return;
+    const width = widthRef.current;
+    if (width <= 0) return;
+    const x = e.clientX ?? e.nativeEvent?.pageX ?? 0;
+    const dx = (x - dragRef.current.startX) * dirSign;
+    if (Math.abs(dx) > 2) dragRef.current.moved = true;
+    commit(dragRef.current.startFraction + dx / width);
+  };
+  const onSashKeyDown = e => {
+    const key = e.key;
+    const step = e.shiftKey ? FRACTION_STEP_LARGE : FRACTION_STEP;
+    if (key === "ArrowLeft") {
+      e.preventDefault?.();
+      commit(fraction - step * dirSign);
+    } else if (key === "ArrowRight") {
+      e.preventDefault?.();
+      commit(fraction + step * dirSign);
+    } else if (key === "Home") {
+      e.preventDefault?.();
+      commit(minFraction);
+    } else if (key === "End") {
+      e.preventDefault?.();
+      commit(maxFraction);
+    } else if (key === "Enter" || key === " ") {
+      e.preventDefault?.();
+      reset();
+    }
+  };
+  const percent = Math.round(fraction * 100);
+  const lineHot = hot || dragging || kbFocus;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    ref: rowRef,
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "auto",
+    minWidth: 0,
+    minHeight: 0,
+    width: "100%",
+    alignItems: "stretch",
+    onLayout: e => {
+      widthRef.current = e.nativeEvent.layout.width;
+    },
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      flex: primaryFlex,
+      flexGrow: fraction,
+      flexShrink: 1,
+      flexBasis: 0,
       minWidth: 0,
+      minHeight: 0,
       "data-testid": "pane-primary",
       children: primary
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      flex: secondaryFlex,
+      width: import_theme.hairlineWidth,
+      flexGrow: 0,
+      flexShrink: 0,
+      alignSelf: "stretch",
+      position: "relative",
+      zIndex: 2,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        width: SASH_VISUAL,
+        left: -(SASH_VISUAL - import_theme.hairlineWidth) / 2,
+        alignItems: "center",
+        cursor: "col-resize",
+        userSelect: "none",
+        tabIndex: 0,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "aria-controls": sashId,
+        "aria-valuemin": Math.round(minFraction * 100),
+        "aria-valuemax": Math.round(maxFraction * 100),
+        "aria-valuenow": percent,
+        "aria-label": "Resize panes",
+        "data-testid": "pane-sash",
+        ...(!import_tamagui.isWeb ? {
+          hitSlop: (0, import_theme.pressTargetHitSlop)(SASH_VISUAL)
+        } : void 0),
+        ...(kbFocus ? (0, import_theme.ensureFocusVisibleRing)() : void 0),
+        onPointerDown: onSashPointerDown,
+        onPointerMove: onSashPointerMove,
+        onPointerUp: import_tamagui.isWeb ? void 0 : finishDrag,
+        onPointerCancel: import_tamagui.isWeb ? void 0 : finishDrag,
+        ...{
+          onHoverIn: () => setHot(true),
+          onHoverOut: () => {
+            if (!dragging) setHot(false);
+          }
+        },
+        onFocus: () => {
+          if ((0, import_theme.wasKeyboardFocus)()) setKbFocus(true);
+        },
+        onBlur: () => setKbFocus(false),
+        onKeyDown: onSashKeyDown,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          flex: 1,
+          width: lineHot ? 2 : import_theme.hairlineWidth,
+          backgroundColor: lineHot ? "$accentBackground" : "$borderColor",
+          ...(lineHot ? void 0 : import_theme.hairline.vline)
+        })
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      id: sashId,
+      flexGrow: 1 - fraction,
+      flexShrink: 1,
+      flexBasis: 0,
       minWidth: 0,
+      minHeight: 0,
       "data-testid": "pane-secondary",
       children: secondary
     })]
@@ -100,7 +350,7 @@ function ListDetailLayout({
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(PaneScaffold, {
     primary: list,
     secondary: detail,
-    paneFlex: [1, 1],
+    paneFlex: [1, 2],
     activePane: activePane ?? (selected ? "secondary" : "primary"),
     "data-canonical": "list-detail",
     ...rest
@@ -127,17 +377,27 @@ function FeedLayout({
   const gaps = (0, import_theme.useSemanticGaps)();
   const multi = (0, import_theme.useMultiPane)();
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    flexDirection: multi ? "row" : "column",
-    flexWrap: multi ? "wrap" : void 0,
+    flexDirection: multi && !import_tamagui.isWeb ? "row" : "column",
+    flexWrap: multi && !import_tamagui.isWeb ? "wrap" : void 0,
     gap: gaps.betweenGroups.gap,
     "data-testid": "feed-layout",
     "data-canonical": "feed",
+    ...(import_tamagui.isWeb && multi ? {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fill, minmax(${minItemWidth}px, 1fr))`
+      }
+    } : void 0),
     ...rest,
     children: import_react.Children.map(children, (child, i) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      flexGrow: 1,
-      flexBasis: multi ? minItemWidth : void 0,
-      minWidth: multi ? minItemWidth : void 0,
-      maxWidth: multi ? "100%" : void 0,
+      ...(multi && !import_tamagui.isWeb ? {
+        flexGrow: 1,
+        flexBasis: minItemWidth,
+        minWidth: minItemWidth,
+        maxWidth: "100%"
+      } : {
+        minWidth: 0
+      }),
       children: child
     }, i))
   });