@multiplatform.one/components 7.7.4 → 7.8.0

package/dist/cjs/Tabs/index.cjs

@@ -88,7 +88,8 @@ const fillProps = {
 };
 const StripWrapper = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "MpTabsStrip",
-  width: "100%",
+  alignSelf: "stretch",
+  minWidth: 0,
   position: "relative"
 });
 const TabsList = (0, import_tamagui.styled)(import_tamagui.Tabs.List, {
@@ -162,6 +163,7 @@ function TabsRoot({
   defaultValue,
   onChange,
   variant = "underline",
+  distribution = "content",
   accent,
   error,
   warning,
@@ -252,6 +254,20 @@ function TabsRoot({
     }
   }, [activeLayout, direction]);
   const isUnderline = variant === "underline";
+  const isBand = variant === "band";
+  const equalDistribution = isBand || distribution === "equal";
+  const tabRefs = import_react.default.useRef(/* @__PURE__ */new Map());
+  const onTabKeyDown = (event, value2) => {
+    if (!["Home", "End", "ArrowLeft", "ArrowRight"].includes(event.key)) return;
+    const enabled = items.filter(item => !disabled && !item.disabled);
+    if (!enabled.length) return;
+    const current = enabled.findIndex(item => item.value === value2);
+    const step = (event.key === "ArrowRight" ? 1 : -1) * (direction === "rtl" ? -1 : 1);
+    const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : loop ? (current + step + enabled.length) % enabled.length : Math.max(0, Math.min(enabled.length - 1, current + step));
+    event.preventDefault();
+    event.stopPropagation();
+    tabRefs.current.get(enabled[next].value)?.focus();
+  };
   const indicatorTheme = intent ?? "accent";
   const visualSizeToken = size ?? knobProps.sizeToken;
   const sizePx = knobProps.control.height;
@@ -273,7 +289,7 @@ function TabsRoot({
       WebkitMaskImage: mask
     };
   })() : void 0;
-  const indicator = activeLayout ? isUnderline ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+  const indicator = activeLayout && !isBand ? isUnderline ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
     name: indicatorTheme,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(UnderlineIndicator, {
       x: activeLayout.x,
@@ -303,29 +319,153 @@ function TabsRoot({
   }) : null;
   if (items.length === 0) return null;
   const tabListLabel = ariaLabel ?? t("Tabs");
+  const tabList = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(TabsList, {
+    loop,
+    "aria-label": tabListLabel,
+    "data-tabs-list": variant,
+    "data-size-token": visualSizeToken,
+    "data-density": knobProps.density,
+    "data-visual-px": sizePx,
+    ...(!import_tamagui.isWeb ? {
+      role: "tablist"
+    } : void 0),
+    alignSelf: equalDistribution ? "stretch" : "flex-start",
+    minWidth: 0,
+    contained: !isUnderline && !isBand,
+    ...(isUnderline || isBand ? {
+      gap: 0
+    } : {
+      backgroundColor: import_componentColors.componentColors.interactive.background,
+      gap: 0,
+      // Full fragment spread (AGENTS.md knob rule) so the
+      // cornerSmoothing class rides along with the radius.
+      ...knobProps.borderRadiusNested
+    }),
+    children: [indicator, items.map((item, itemIndex) => {
+      const isActive = item.value === currentValue;
+      const isDisabled = disabled || item.disabled;
+      const position = (0, import_theme.getGroupPosition)(itemIndex, enabledCount);
+      const cornerProps = isUnderline ? underlineStackRadius(position, radiusToken) : (0, import_theme.stackRadiusProps)(position, outerRadiusToken, "horizontal");
+      const anchorValue = (focusValue !== null && items.some(i => i.value === focusValue && !(disabled || i.disabled)) ? focusValue : void 0) ?? (items.some(i => i.value === currentValue && !(disabled || i.disabled)) ? currentValue : items.find(i => !(disabled || i.disabled))?.value);
+      const isTabStop = item.value === anchorValue && itemIndex === items.findIndex(i => i.value === anchorValue);
+      const kbRing = kbFocusValue === item.value;
+      const feedbackBackground = pressValue === item.value ? import_componentColors.componentColors.interactive.hover : hoverValue === item.value ? import_componentColors.componentColors.interactive.background : "transparent";
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Trigger, {
+        value: item.value,
+        ref: node => {
+          if (!import_tamagui.isWeb) return;
+          if (node) tabRefs.current.set(item.value, node);else tabRefs.current.delete(item.value);
+        },
+        flex: equalDistribution ? 1 : void 0,
+        minWidth: 0,
+        minHeight: equalDistribution ? import_theme.MIN_PRESS_TARGET : void 0,
+        borderEndWidth: isBand && itemIndex < items.length - 1 ? 1 : 0,
+        borderColor: isBand ? import_componentColors.componentColors.surface.border : void 0,
+        disabled: isDisabled,
+        ...(item.content === void 0 ? {
+          "aria-controls": void 0
+        } : void 0),
+        "data-tab-position": position,
+        "data-kb-ring": kbRing ? "true" : void 0,
+        ...(import_tamagui.isWeb ? {
+          tabIndex: isDisabled ? -1 : isTabStop ? 0 : -1,
+          "aria-label": item.accessibilityLabel,
+          onKeyDownCapture: event => onTabKeyDown(event, item.value)
+        } : {
+          accessible: true,
+          role: "button",
+          accessibilityRole: "button",
+          accessibilityLabel: item.accessibilityLabel ?? (typeof item.label === "string" || typeof item.label === "number" ? String(item.label) : void 0),
+          accessibilityState: {
+            selected: isActive,
+            disabled: Boolean(isDisabled)
+          }
+        }),
+        hitSlop: tabHitSlop,
+        onInteraction: handleInteraction,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        backgroundColor: isBand ? isActive ? import_componentColors.componentColors.surface.background : isDisabled ? "transparent" : feedbackBackground : "transparent",
+        borderRadius: 0,
+        ...(isDisabled ? isActive ? disabledState.chromeKnobProps : {
+          ...disabledState.chromeKnobProps,
+          ...disabledState.textKnobProps
+        } : void 0),
+        ...(import_tamagui.isWeb ? {
+          onFocusCapture: () => {
+            setFocusValue(item.value);
+            if ((0, import_theme.wasKeyboardFocus)()) setKbFocusValue(item.value);
+          },
+          onBlurCapture: () => {
+            setFocusValue(prev => prev === item.value ? null : prev);
+            setKbFocusValue(prev => prev === item.value ? null : prev);
+          },
+          onPointerEnter: () => setHoverValue(item.value),
+          onPointerLeave: () => setHoverValue(prev => prev === item.value ? null : prev),
+          onPointerDown: () => setPressValue(item.value),
+          onPointerUp: () => setPressValue(prev => prev === item.value ? null : prev)
+        } : void 0),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+          ...(isBand ? void 0 : cornerProps),
+          ...knobProps.control,
+          paddingHorizontal: isBand ? "$1" : knobProps.control.paddingHorizontal,
+          alignSelf: "stretch",
+          flexGrow: equalDistribution ? 1 : void 0,
+          flexShrink: equalDistribution ? 1 : void 0,
+          flexBasis: equalDistribution ? 0 : void 0,
+          minWidth: 0,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: isBand || isActive || isDisabled ? "transparent" : feedbackBackground,
+          ...(kbRing ? import_theme.keyboardFocusRingProps : void 0),
+          children: [item.icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabLabel, {
+            active: isActive,
+            flexShrink: 1,
+            minWidth: 0,
+            ...knobProps.controlType,
+            fontFamily: knobProps.label.fontFamily,
+            fontWeight: !isBand && isActive ? "700" : knobProps.label.fontWeight,
+            color: isDisabled ? import_componentColors.componentColors.text.muted : isActive ? variant === "contained" && onSelectedTint ? onSelectedTint : import_componentColors.componentColors.text.primary : import_componentColors.componentColors.text.secondary,
+            children: (0, import_textRidesText.wrapBareTextChildren)(item.label, label => label)
+          }), item.badge]
+        })
+      }, item.value);
+    })]
+  });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
     value: currentValue,
     onValueChange: handleChange,
     orientation: "horizontal",
     activationMode,
-    width: "100%",
+    width: equalDistribution ? "100%" : void 0,
+    alignSelf: "stretch",
+    minWidth: 0,
     flexDirection: "column",
     ...(fill ? fillProps : void 0),
     "data-tabs-variant": variant,
+    "data-tabs-distribution": equalDistribution ? "equal" : "content",
     "data-tabs-fill": fill ? "true" : void 0,
     "data-tabs-dir": direction,
     "data-size-token": visualSizeToken,
     "data-density": knobProps.density,
     "data-visual-px": sizePx,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(StripWrapper, {
+      backgroundColor: isBand ? "$color2" : void 0,
+      borderBottomWidth: isBand ? 1 : void 0,
+      borderBottomColor: isBand ? import_componentColors.componentColors.surface.border : void 0,
       ...(isUnderline ? {
         ...import_theme.hairline.bottom,
         borderColor: import_componentColors.componentColors.surface.border
       } : void 0),
       "data-fade-left": fades.left ? "true" : void 0,
       "data-fade-right": fades.right ? "true" : void 0,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+      children: equalDistribution ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        alignSelf: "stretch",
+        minWidth: 0,
+        children: tabList
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
         ref: scrollRef,
+        "data-tabs-scroll": "true",
         horizontal: true,
         showsHorizontalScrollIndicator: false,
         scrollEventThrottle: 16,
@@ -346,93 +486,7 @@ function TabsRoot({
           scrollMetrics.current.content = w;
           updateFades();
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(TabsList, {
-          loop,
-          "aria-label": tabListLabel,
-          "data-tabs-list": variant,
-          "data-size-token": visualSizeToken,
-          "data-density": knobProps.density,
-          "data-visual-px": sizePx,
-          ...(!import_tamagui.isWeb ? {
-            role: "tablist"
-          } : void 0),
-          contained: !isUnderline,
-          ...(isUnderline ? {
-            gap: 0
-          } : {
-            backgroundColor: import_componentColors.componentColors.interactive.background,
-            gap: 0,
-            // Full fragment spread (AGENTS.md knob rule) so the
-            // cornerSmoothing class rides along with the radius.
-            ...knobProps.borderRadiusNested
-          }),
-          children: [indicator, items.map((item, itemIndex) => {
-            const isActive = item.value === currentValue;
-            const isDisabled = disabled || item.disabled;
-            const position = (0, import_theme.getGroupPosition)(itemIndex, enabledCount);
-            const cornerProps = isUnderline ? underlineStackRadius(position, radiusToken) : (0, import_theme.stackRadiusProps)(position, outerRadiusToken, "horizontal");
-            const anchorValue = (focusValue !== null && items.some(i => i.value === focusValue && !(disabled || i.disabled)) ? focusValue : void 0) ?? (items.some(i => i.value === currentValue) ? currentValue : items[0]?.value);
-            const isTabStop = item.value === anchorValue && itemIndex === items.findIndex(i => i.value === anchorValue);
-            const kbRing = kbFocusValue === item.value;
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Trigger, {
-              value: item.value,
-              disabled: isDisabled,
-              "data-tab-position": position,
-              "data-kb-ring": kbRing ? "true" : void 0,
-              ...(import_tamagui.isWeb ? {
-                tabIndex: isDisabled ? -1 : isTabStop ? 0 : -1
-              } : {
-                accessible: true,
-                role: "tab",
-                "aria-selected": isActive,
-                ...(isDisabled ? {
-                  "aria-disabled": true
-                } : void 0)
-              }),
-              hitSlop: tabHitSlop,
-              onInteraction: handleInteraction,
-              cursor: isDisabled ? "not-allowed" : "pointer",
-              backgroundColor: "transparent",
-              borderRadius: 0,
-              ...(isDisabled ? isActive ? disabledState.chromeKnobProps : {
-                ...disabledState.chromeKnobProps,
-                ...disabledState.textKnobProps
-              } : void 0),
-              ...(import_tamagui.isWeb ? {
-                onFocusCapture: () => {
-                  setFocusValue(item.value);
-                  if ((0, import_theme.wasKeyboardFocus)()) setKbFocusValue(item.value);
-                },
-                onBlurCapture: () => {
-                  setFocusValue(prev => prev === item.value ? null : prev);
-                  setKbFocusValue(prev => prev === item.value ? null : prev);
-                },
-                onPointerEnter: () => setHoverValue(item.value),
-                onPointerLeave: () => setHoverValue(prev => prev === item.value ? null : prev),
-                onPointerDown: () => setPressValue(item.value),
-                onPointerUp: () => setPressValue(prev => prev === item.value ? null : prev)
-              } : void 0),
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-                ...cornerProps,
-                ...knobProps.control,
-                width: "100%",
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: isActive || isDisabled ? "transparent" : pressValue === item.value ? import_componentColors.componentColors.interactive.hover : hoverValue === item.value ? import_componentColors.componentColors.interactive.background : "transparent",
-                ...(kbRing ? import_theme.keyboardFocusRingProps : void 0),
-                children: [item.icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabLabel, {
-                  active: isActive,
-                  ...knobProps.controlType,
-                  fontFamily: knobProps.label.fontFamily,
-                  fontWeight: isActive ? "700" : knobProps.label.fontWeight,
-                  color: isDisabled ? import_componentColors.componentColors.text.muted : isActive ? !isUnderline && onSelectedTint ? onSelectedTint : import_componentColors.componentColors.text.primary : import_componentColors.componentColors.text.secondary,
-                  children: (0, import_textRidesText.wrapBareTextChildren)(item.label, label => label)
-                }), item.badge]
-              })
-            }, item.value);
-          })]
-        })
+        children: tabList
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
       "data-tabs-panels": "",

package/dist/cjs/Tabs/index.native.js

@@ -92,7 +92,8 @@ var fillProps = {
 };
 var StripWrapper = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "MpTabsStrip",
-  width: "100%",
+  alignSelf: "stretch",
+  minWidth: 0,
   position: "relative"
 });
 var TabsList = (0, import_tamagui.styled)(import_tamagui.Tabs.List, {
@@ -167,6 +168,7 @@ function TabsRoot(param) {
     defaultValue,
     onChange,
     variant = "underline",
+    distribution = "content",
     accent,
     error,
     warning,
@@ -268,6 +270,25 @@ function TabsRoot(param) {
     }
   }, [activeLayout, direction]);
   var isUnderline = variant === "underline";
+  var isBand = variant === "band";
+  var equalDistribution = isBand || distribution === "equal";
+  var tabRefs = import_react.default.useRef(/* @__PURE__ */new Map());
+  var onTabKeyDown = function onTabKeyDown2(event, value2) {
+    var _tabRefs_current_get;
+    if (!["Home", "End", "ArrowLeft", "ArrowRight"].includes(event.key)) return;
+    var enabled = items.filter(function (item) {
+      return !disabled && !item.disabled;
+    });
+    if (!enabled.length) return;
+    var current = enabled.findIndex(function (item) {
+      return item.value === value2;
+    });
+    var step = (event.key === "ArrowRight" ? 1 : -1) * (direction === "rtl" ? -1 : 1);
+    var next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : loop ? (current + step + enabled.length) % enabled.length : Math.max(0, Math.min(enabled.length - 1, current + step));
+    event.preventDefault();
+    event.stopPropagation();
+    (_tabRefs_current_get = tabRefs.current.get(enabled[next].value)) === null || _tabRefs_current_get === void 0 ? void 0 : _tabRefs_current_get.focus();
+  };
   var indicatorTheme = intent !== null && intent !== void 0 ? intent : "accent";
   var visualSizeToken = size !== null && size !== void 0 ? size : knobProps.sizeToken;
   var sizePx = knobProps.control.height;
@@ -291,7 +312,7 @@ function TabsRoot(param) {
       WebkitMaskImage: mask
     };
   }() : void 0;
-  var indicator = activeLayout ? isUnderline ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+  var indicator = activeLayout && !isBand ? isUnderline ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
     name: indicatorTheme,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(UnderlineIndicator, {
       x: activeLayout.x,
@@ -321,32 +342,193 @@ function TabsRoot(param) {
   }) : null;
   if (items.length === 0) return null;
   var tabListLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : t("Tabs");
+  var tabList = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(TabsList, {
+    loop,
+    "aria-label": tabListLabel,
+    "data-tabs-list": variant,
+    "data-size-token": visualSizeToken,
+    "data-density": knobProps.density,
+    "data-visual-px": sizePx,
+    ...(!import_tamagui.isWeb ? {
+      role: "tablist"
+    } : void 0),
+    alignSelf: equalDistribution ? "stretch" : "flex-start",
+    minWidth: 0,
+    contained: !isUnderline && !isBand,
+    ...(isUnderline || isBand ? {
+      gap: 0
+    } : {
+      backgroundColor: import_componentColors.componentColors.interactive.background,
+      gap: 0,
+      // Full fragment spread (AGENTS.md knob rule) so the
+      // cornerSmoothing class rides along with the radius.
+      ...knobProps.borderRadiusNested
+    }),
+    children: [indicator, items.map(function (item, itemIndex) {
+      var _ref, _item_accessibilityLabel;
+      var _items_find;
+      var isActive = item.value === currentValue;
+      var isDisabled = disabled || item.disabled;
+      var position = (0, import_theme.getGroupPosition)(itemIndex, enabledCount);
+      var cornerProps = isUnderline ? underlineStackRadius(position, radiusToken) : (0, import_theme.stackRadiusProps)(position, outerRadiusToken, "horizontal");
+      var anchorValue = (_ref = focusValue !== null && items.some(function (i) {
+        return i.value === focusValue && !(disabled || i.disabled);
+      }) ? focusValue : void 0) !== null && _ref !== void 0 ? _ref : items.some(function (i) {
+        return i.value === currentValue && !(disabled || i.disabled);
+      }) ? currentValue : (_items_find = items.find(function (i) {
+        return !(disabled || i.disabled);
+      })) === null || _items_find === void 0 ? void 0 : _items_find.value;
+      var isTabStop = item.value === anchorValue && itemIndex === items.findIndex(function (i) {
+        return i.value === anchorValue;
+      });
+      var kbRing = kbFocusValue === item.value;
+      var feedbackBackground = pressValue === item.value ? import_componentColors.componentColors.interactive.hover : hoverValue === item.value ? import_componentColors.componentColors.interactive.background : "transparent";
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Trigger, {
+        value: item.value,
+        ref: function ref(node) {
+          if (!import_tamagui.isWeb) return;
+          if (node) tabRefs.current.set(item.value, node);else tabRefs.current.delete(item.value);
+        },
+        flex: equalDistribution ? 1 : void 0,
+        minWidth: 0,
+        minHeight: equalDistribution ? import_theme.MIN_PRESS_TARGET : void 0,
+        borderEndWidth: isBand && itemIndex < items.length - 1 ? 1 : 0,
+        borderColor: isBand ? import_componentColors.componentColors.surface.border : void 0,
+        disabled: isDisabled,
+        ...(item.content === void 0 ? {
+          "aria-controls": void 0
+        } : void 0),
+        "data-tab-position": position,
+        "data-kb-ring": kbRing ? "true" : void 0,
+        ...(import_tamagui.isWeb ? {
+          tabIndex: isDisabled ? -1 : isTabStop ? 0 : -1,
+          "aria-label": item.accessibilityLabel,
+          onKeyDownCapture: function onKeyDownCapture(event) {
+            return onTabKeyDown(event, item.value);
+          }
+        } : {
+          accessible: true,
+          role: "button",
+          accessibilityRole: "button",
+          accessibilityLabel: (_item_accessibilityLabel = item.accessibilityLabel) !== null && _item_accessibilityLabel !== void 0 ? _item_accessibilityLabel : typeof item.label === "string" || typeof item.label === "number" ? String(item.label) : void 0,
+          accessibilityState: {
+            selected: isActive,
+            disabled: Boolean(isDisabled)
+          }
+        }),
+        hitSlop: tabHitSlop,
+        onInteraction: handleInteraction,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        backgroundColor: isBand ? isActive ? import_componentColors.componentColors.surface.background : isDisabled ? "transparent" : feedbackBackground : "transparent",
+        borderRadius: 0,
+        ...(isDisabled ? isActive ? disabledState.chromeKnobProps : {
+          ...disabledState.chromeKnobProps,
+          ...disabledState.textKnobProps
+        } : void 0),
+        ...(import_tamagui.isWeb ? {
+          onFocusCapture: function onFocusCapture() {
+            setFocusValue(item.value);
+            if ((0, import_theme.wasKeyboardFocus)()) setKbFocusValue(item.value);
+          },
+          onBlurCapture: function onBlurCapture() {
+            setFocusValue(function (prev) {
+              return prev === item.value ? null : prev;
+            });
+            setKbFocusValue(function (prev) {
+              return prev === item.value ? null : prev;
+            });
+          },
+          onPointerEnter: function onPointerEnter() {
+            return setHoverValue(item.value);
+          },
+          onPointerLeave: function onPointerLeave() {
+            return setHoverValue(function (prev) {
+              return prev === item.value ? null : prev;
+            });
+          },
+          onPointerDown: function onPointerDown() {
+            return setPressValue(item.value);
+          },
+          onPointerUp: function onPointerUp() {
+            return setPressValue(function (prev) {
+              return prev === item.value ? null : prev;
+            });
+          }
+        } : void 0),
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+          ...(isBand ? void 0 : cornerProps),
+          // ONE chrome owner (LC-75/LC-79): the full control recipe
+          // (height/paddingHorizontal/gap) lives on this inner row —
+          // it also paints hover/press fill, so the pill covers the
+          // padded box. The Trigger stays an unpainted hit target
+          // (spreading the recipe there too doubled the horizontal
+          // padding).
+          ...knobProps.control,
+          // Band columns share width; a minimal inset keeps labels off the edges.
+          paddingHorizontal: isBand ? "$1" : knobProps.control.paddingHorizontal,
+          alignSelf: "stretch",
+          flexGrow: equalDistribution ? 1 : void 0,
+          flexShrink: equalDistribution ? 1 : void 0,
+          flexBasis: equalDistribution ? 0 : void 0,
+          minWidth: 0,
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: isBand || isActive || isDisabled ? "transparent" : feedbackBackground,
+          ...(kbRing ? import_theme.keyboardFocusRingProps : void 0),
+          children: [item.icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabLabel, {
+            active: isActive,
+            flexShrink: 1,
+            minWidth: 0,
+            ...knobProps.controlType,
+            fontFamily: knobProps.label.fontFamily,
+            fontWeight: !isBand && isActive ? "700" : knobProps.label.fontWeight,
+            color: isDisabled ? import_componentColors.componentColors.text.muted : isActive ? variant === "contained" && onSelectedTint ? onSelectedTint : import_componentColors.componentColors.text.primary : import_componentColors.componentColors.text.secondary,
+            children: (0, import_textRidesText.wrapBareTextChildren)(item.label, function (label) {
+              return label;
+            })
+          }), item.badge]
+        })
+      }, item.value);
+    })]
+  });
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
     value: currentValue,
     onValueChange: handleChange,
     orientation: "horizontal",
     activationMode,
-    width: "100%",
+    width: equalDistribution ? "100%" : void 0,
+    alignSelf: "stretch",
+    minWidth: 0,
     flexDirection: "column",
     // The root is the first link in the chain a filling panel needs.
     // `flex: 1` alone is not enough — without `minHeight: 0` the column
     // refuses to shrink below its content and the panel never gets a box.
     ...(fill ? fillProps : void 0),
     "data-tabs-variant": variant,
+    "data-tabs-distribution": equalDistribution ? "equal" : "content",
     "data-tabs-fill": fill ? "true" : void 0,
     "data-tabs-dir": direction,
     "data-size-token": visualSizeToken,
     "data-density": knobProps.density,
     "data-visual-px": sizePx,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(StripWrapper, {
+      backgroundColor: isBand ? "$color2" : void 0,
+      borderBottomWidth: isBand ? 1 : void 0,
+      borderBottomColor: isBand ? import_componentColors.componentColors.surface.border : void 0,
       ...(isUnderline ? {
         ...import_theme.hairline.bottom,
         borderColor: import_componentColors.componentColors.surface.border
       } : void 0),
       "data-fade-left": fades.left ? "true" : void 0,
       "data-fade-right": fades.right ? "true" : void 0,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+      children: equalDistribution ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        alignSelf: "stretch",
+        minWidth: 0,
+        children: tabList
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
         ref: scrollRef,
+        "data-tabs-scroll": "true",
         horizontal: true,
         showsHorizontalScrollIndicator: false,
         scrollEventThrottle: 16,
@@ -369,125 +551,7 @@ function TabsRoot(param) {
           scrollMetrics.current.content = w;
           updateFades();
         },
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(TabsList, {
-          loop,
-          "aria-label": tabListLabel,
-          "data-tabs-list": variant,
-          "data-size-token": visualSizeToken,
-          "data-density": knobProps.density,
-          "data-visual-px": sizePx,
-          ...(!import_tamagui.isWeb ? {
-            role: "tablist"
-          } : void 0),
-          contained: !isUnderline,
-          ...(isUnderline ? {
-            gap: 0
-          } : {
-            backgroundColor: import_componentColors.componentColors.interactive.background,
-            gap: 0,
-            // Full fragment spread (AGENTS.md knob rule) so the
-            // cornerSmoothing class rides along with the radius.
-            ...knobProps.borderRadiusNested
-          }),
-          children: [indicator, items.map(function (item, itemIndex) {
-            var _ref;
-            var _items_;
-            var isActive = item.value === currentValue;
-            var isDisabled = disabled || item.disabled;
-            var position = (0, import_theme.getGroupPosition)(itemIndex, enabledCount);
-            var cornerProps = isUnderline ? underlineStackRadius(position, radiusToken) : (0, import_theme.stackRadiusProps)(position, outerRadiusToken, "horizontal");
-            var anchorValue = (_ref = focusValue !== null && items.some(function (i) {
-              return i.value === focusValue && !(disabled || i.disabled);
-            }) ? focusValue : void 0) !== null && _ref !== void 0 ? _ref : items.some(function (i) {
-              return i.value === currentValue;
-            }) ? currentValue : (_items_ = items[0]) === null || _items_ === void 0 ? void 0 : _items_.value;
-            var isTabStop = item.value === anchorValue && itemIndex === items.findIndex(function (i) {
-              return i.value === anchorValue;
-            });
-            var kbRing = kbFocusValue === item.value;
-            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Trigger, {
-              value: item.value,
-              disabled: isDisabled,
-              "data-tab-position": position,
-              "data-kb-ring": kbRing ? "true" : void 0,
-              ...(import_tamagui.isWeb ? {
-                tabIndex: isDisabled ? -1 : isTabStop ? 0 : -1
-              } : {
-                accessible: true,
-                role: "tab",
-                "aria-selected": isActive,
-                ...(isDisabled ? {
-                  "aria-disabled": true
-                } : void 0)
-              }),
-              hitSlop: tabHitSlop,
-              onInteraction: handleInteraction,
-              cursor: isDisabled ? "not-allowed" : "pointer",
-              backgroundColor: "transparent",
-              borderRadius: 0,
-              ...(isDisabled ? isActive ? disabledState.chromeKnobProps : {
-                ...disabledState.chromeKnobProps,
-                ...disabledState.textKnobProps
-              } : void 0),
-              ...(import_tamagui.isWeb ? {
-                onFocusCapture: function onFocusCapture() {
-                  setFocusValue(item.value);
-                  if ((0, import_theme.wasKeyboardFocus)()) setKbFocusValue(item.value);
-                },
-                onBlurCapture: function onBlurCapture() {
-                  setFocusValue(function (prev) {
-                    return prev === item.value ? null : prev;
-                  });
-                  setKbFocusValue(function (prev) {
-                    return prev === item.value ? null : prev;
-                  });
-                },
-                onPointerEnter: function onPointerEnter() {
-                  return setHoverValue(item.value);
-                },
-                onPointerLeave: function onPointerLeave() {
-                  return setHoverValue(function (prev) {
-                    return prev === item.value ? null : prev;
-                  });
-                },
-                onPointerDown: function onPointerDown() {
-                  return setPressValue(item.value);
-                },
-                onPointerUp: function onPointerUp() {
-                  return setPressValue(function (prev) {
-                    return prev === item.value ? null : prev;
-                  });
-                }
-              } : void 0),
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
-                ...cornerProps,
-                // ONE chrome owner (LC-75/LC-79): the full control recipe
-                // (height/paddingHorizontal/gap) lives on this inner row —
-                // it also paints hover/press fill, so the pill covers the
-                // padded box. The Trigger stays an unpainted hit target
-                // (spreading the recipe there too doubled the horizontal
-                // padding).
-                ...knobProps.control,
-                width: "100%",
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "center",
-                backgroundColor: isActive || isDisabled ? "transparent" : pressValue === item.value ? import_componentColors.componentColors.interactive.hover : hoverValue === item.value ? import_componentColors.componentColors.interactive.background : "transparent",
-                ...(kbRing ? import_theme.keyboardFocusRingProps : void 0),
-                children: [item.icon, /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabLabel, {
-                  active: isActive,
-                  ...knobProps.controlType,
-                  fontFamily: knobProps.label.fontFamily,
-                  fontWeight: isActive ? "700" : knobProps.label.fontWeight,
-                  color: isDisabled ? import_componentColors.componentColors.text.muted : isActive ? !isUnderline && onSelectedTint ? onSelectedTint : import_componentColors.componentColors.text.primary : import_componentColors.componentColors.text.secondary,
-                  children: (0, import_textRidesText.wrapBareTextChildren)(item.label, function (label) {
-                    return label;
-                  })
-                }), item.badge]
-              })
-            }, item.value);
-          })]
-        })
+        children: tabList
       })
     }),
     /*