@multiplatform.one/components 7.4.0 → 7.5.0

package/dist/cjs/SortableList/useSortableRows.native.js

@@ -0,0 +1,399 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var useSortableRows_exports = {};
+__export(useSortableRows_exports, {
+  SortableSessionProvider: () => SortableSessionProvider,
+  useSortableDragging: () => useSortableDragging,
+  useSortableRows: () => useSortableRows
+});
+module.exports = __toCommonJS(useSortableRows_exports);
+var import_react = require("react");
+var import_kanbanDnd = require("../views/kanbanDnd.native.js");
+var DEFAULT_ROW_SELECTOR = "[data-sortable-row], [data-child-row]";
+var SortableSessionContext = (0, import_react.createContext)({
+  sourceId: null
+});
+function SortableSessionProvider(param) {
+  var {
+    sourceId,
+    children
+  } = param;
+  return (0, import_react.createElement)(SortableSessionContext.Provider, {
+    value: {
+      sourceId
+    }
+  }, children);
+}
+function useSortableDragging(itemId, dragging) {
+  var {
+    sourceId
+  } = (0, import_react.useContext)(SortableSessionContext);
+  return dragging !== null && dragging !== void 0 ? dragging : sourceId === itemId;
+}
+function useSortableRows(param) {
+  var {
+    items,
+    getId,
+    getLabel,
+    canReorder,
+    onChange,
+    enabled,
+    containerRef,
+    rowSelector = DEFAULT_ROW_SELECTOR
+  } = param;
+  var [session, setSession] = (0, import_react.useState)(null);
+  var [announcement, setAnnouncement] = (0, import_react.useState)("");
+  var [focusedIndex, setFocusedIndex] = (0, import_react.useState)(0);
+  var sessionRef = (0, import_react.useRef)(null);
+  sessionRef.current = session;
+  var itemsRef = (0, import_react.useRef)(items);
+  itemsRef.current = items;
+  var board = (0, import_react.useMemo)(function () {
+    return (0, import_kanbanDnd.listBoardSnapshot)(items.length);
+  }, [items.length]);
+  var ids = (0, import_react.useMemo)(function () {
+    return items.map(function (item, i) {
+      return getId(item, i);
+    });
+  }, [items, getId]);
+  var labels = (0, import_react.useMemo)(function () {
+    return items.map(function (item, i) {
+      return getLabel(item, i);
+    });
+  }, [items, getLabel]);
+  var rowEnabled = (0, import_react.useCallback)(function (index) {
+    if (!enabled) return false;
+    if (index < 0 || index >= items.length) return false;
+    return canReorder ? canReorder(items[index], index) : true;
+  }, [canReorder, enabled, items]);
+  var announce = (0, import_react.useCallback)(function (type, drag, label) {
+    if (type === "cancel") {
+      setAnnouncement((0, import_kanbanDnd.formatListAnnouncement)((0, import_kanbanDnd.describeCancel)(drag, board, label), {
+        sourcePosition: drag.sourceIndex + 1
+      }));
+      return;
+    }
+    setAnnouncement((0, import_kanbanDnd.formatListAnnouncement)((0, import_kanbanDnd.describeDragState)(type, drag, board, label)));
+  }, [board]);
+  var toDrag = (0, import_react.useCallback)(function (s) {
+    return {
+      sourceColumnId: import_kanbanDnd.LIST_COLUMN_ID,
+      sourceIndex: s.sourceIndex,
+      target: {
+        columnId: import_kanbanDnd.LIST_COLUMN_ID,
+        index: s.targetIndex
+      }
+    };
+  }, []);
+  var focusRow = (0, import_react.useCallback)(function (id) {
+    var _el_focus;
+    var root = containerRef.current;
+    if (!root) return;
+    var el = root.querySelector(`[data-sortable-row="${id}"], [data-child-row-id="${id}"]`);
+    el === null || el === void 0 ? void 0 : (_el_focus = el.focus) === null || _el_focus === void 0 ? void 0 : _el_focus.call(el);
+  }, [containerRef]);
+  var liftAt = (0, import_react.useCallback)(function (index, mode) {
+    if (!rowEnabled(index)) return false;
+    var kb = (0, import_kanbanDnd.keyboardLift)(board, import_kanbanDnd.LIST_COLUMN_ID, index);
+    if (!kb) return false;
+    var next = {
+      mode,
+      sourceIndex: index,
+      targetIndex: kb.target.index,
+      id: ids[index],
+      label: labels[index],
+      size: 44
+    };
+    setSession(next);
+    sessionRef.current = next;
+    announce("lift", kb, next.label);
+    return true;
+  }, [announce, board, ids, labels, rowEnabled]);
+  var moveSession = (0, import_react.useCallback)(function (direction) {
+    var current = sessionRef.current;
+    if (!current) return false;
+    var drag = toDrag(current);
+    var moved = (0, import_kanbanDnd.keyboardMove)(drag, board, direction);
+    if (moved === drag) return true;
+    var next = {
+      ...current,
+      targetIndex: moved.target.index
+    };
+    setSession(next);
+    sessionRef.current = next;
+    announce("move", moved, current.label);
+    return true;
+  }, [announce, board, toDrag]);
+  var dropSession = (0, import_react.useCallback)(function () {
+    var current = sessionRef.current;
+    if (!current) return false;
+    var drag = toDrag(current);
+    var result = (0, import_kanbanDnd.resolveDrop)(drag);
+    announce("drop", drag, current.label);
+    setSession(null);
+    sessionRef.current = null;
+    if (result.commit) {
+      onChange === null || onChange === void 0 ? void 0 : onChange((0, import_kanbanDnd.applyReorder)(itemsRef.current, result.from.index, result.to.index));
+    }
+    requestAnimationFrame(function () {
+      return focusRow(current.id);
+    });
+    return true;
+  }, [announce, focusRow, onChange, toDrag]);
+  var cancelSession = (0, import_react.useCallback)(function () {
+    var current = sessionRef.current;
+    if (!current) return false;
+    announce("cancel", toDrag(current), current.label);
+    setSession(null);
+    sessionRef.current = null;
+    requestAnimationFrame(function () {
+      return focusRow(current.id);
+    });
+    return true;
+  }, [announce, focusRow, toDrag]);
+  var onRowKeyDown = (0, import_react.useCallback)(function (index, e) {
+    if (!enabled) return;
+    if (sessionRef.current) return;
+    if (e.key === " ") {
+      e.preventDefault();
+      liftAt(index, "keyboard");
+    }
+  }, [enabled, liftAt]);
+  var onHandleKeyDown = (0, import_react.useCallback)(function (index, e) {
+    if (!enabled) return;
+    if (sessionRef.current) return;
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      liftAt(index, "keyboard");
+    }
+  }, [enabled, liftAt]);
+  (0, import_react.useEffect)(function () {
+    if (!enabled || typeof window === "undefined") return;
+    var onKey = function onKey2(e) {
+      var _e_target_closest, _e_target;
+      var current = sessionRef.current;
+      if (current) {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          cancelSession();
+          return;
+        }
+        if (e.key === "ArrowDown") {
+          e.preventDefault();
+          e.stopPropagation();
+          moveSession("down");
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault();
+          e.stopPropagation();
+          moveSession("up");
+          return;
+        }
+        if (e.key === " " || e.key === "Enter") {
+          e.preventDefault();
+          e.stopPropagation();
+          dropSession();
+        }
+        return;
+      }
+      if (e.key !== " " && e.key !== "Enter") return;
+      var handle = (_e_target = e.target) === null || _e_target === void 0 ? void 0 : (_e_target_closest = _e_target.closest) === null || _e_target_closest === void 0 ? void 0 : _e_target_closest.call(_e_target, "[data-sortable-handle]");
+      if (!handle) return;
+      var id = handle.getAttribute("data-sortable-handle");
+      var index = ids.indexOf(id !== null && id !== void 0 ? id : "");
+      if (index < 0) return;
+      e.preventDefault();
+      liftAt(index, "keyboard");
+    };
+    window.addEventListener("keydown", onKey, true);
+    return function () {
+      return window.removeEventListener("keydown", onKey, true);
+    };
+  }, [cancelSession, dropSession, enabled, ids, liftAt, moveSession]);
+  var measure = (0, import_react.useCallback)(function () {
+    var _ref;
+    var _rows_;
+    var root = containerRef.current;
+    if (!root) return {
+      items: [],
+      size: 44
+    };
+    var els = [...root.querySelectorAll(rowSelector)];
+    var top = root.getBoundingClientRect().top;
+    var rows = els.map(function (el, index) {
+      var r = el.getBoundingClientRect();
+      return {
+        index,
+        start: r.top - top + root.scrollTop,
+        size: r.height
+      };
+    });
+    return {
+      items: rows,
+      size: (_ref = (_rows_ = rows[0]) === null || _rows_ === void 0 ? void 0 : _rows_.size) !== null && _ref !== void 0 ? _ref : 44
+    };
+  }, [containerRef, rowSelector]);
+  var onHandlePointerDown = (0, import_react.useCallback)(function (index, e) {
+    var _e_pointerType;
+    var _e_preventDefault;
+    if (!enabled || !rowEnabled(index)) return;
+    (_e_preventDefault = e.preventDefault) === null || _e_preventDefault === void 0 ? void 0 : _e_preventDefault.call(e);
+    var pointerType = (_e_pointerType = e.pointerType) !== null && _e_pointerType !== void 0 ? _e_pointerType : "mouse";
+    var lifted = false;
+    var hold = null;
+    var liftPointer = function liftPointer2(clientY) {
+      if (lifted) return;
+      lifted = true;
+      var {
+        items: measured,
+        size
+      } = measure();
+      if (!liftAt(index, "pointer")) return;
+      var current = sessionRef.current;
+      if (current) {
+        var sized = {
+          ...current,
+          size
+        };
+        setSession(sized);
+        sessionRef.current = sized;
+      }
+      var localY = function () {
+        var root = containerRef.current;
+        if (!root) return 0;
+        return clientY - root.getBoundingClientRect().top + root.scrollTop;
+      }();
+      var target = (0, import_kanbanDnd.insertionIndexForY)({
+        localY,
+        items: measured,
+        sourceIndex: index,
+        count: itemsRef.current.length,
+        size
+      });
+      var next = sessionRef.current;
+      if (next && target !== next.targetIndex) {
+        var moved = {
+          ...next,
+          targetIndex: target
+        };
+        setSession(moved);
+        sessionRef.current = moved;
+        announce("move", toDrag(moved), moved.label);
+      }
+    };
+    var onMove = function onMove2(ev) {
+      if (!lifted) return;
+      var root = containerRef.current;
+      if (!root) return;
+      var rect = root.getBoundingClientRect();
+      var vel = (0, import_kanbanDnd.autoScrollVelocity)({
+        pos: ev.clientY,
+        start: rect.top,
+        end: rect.bottom,
+        edge: import_kanbanDnd.AUTO_SCROLL_EDGE_PX,
+        maxSpeed: import_kanbanDnd.AUTO_SCROLL_MAX_SPEED
+      });
+      if (vel) root.scrollTop += vel;
+      var {
+        items: measured,
+        size
+      } = measure();
+      var localY = ev.clientY - rect.top + root.scrollTop;
+      var current = sessionRef.current;
+      if (!current) return;
+      var target = (0, import_kanbanDnd.insertionIndexForY)({
+        localY,
+        items: measured,
+        sourceIndex: current.sourceIndex,
+        count: itemsRef.current.length,
+        size
+      });
+      if (target === current.targetIndex) return;
+      var moved = {
+        ...current,
+        targetIndex: target
+      };
+      setSession(moved);
+      sessionRef.current = moved;
+      announce("move", toDrag(moved), moved.label);
+    };
+    var teardown = function teardown2() {
+      if (hold != null) clearTimeout(hold);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+    };
+    var onUp = function onUp2() {
+      teardown();
+      if (lifted) dropSession();
+    };
+    var onCancel = function onCancel2() {
+      teardown();
+      if (lifted) cancelSession();
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    if (pointerType === "mouse") {
+      liftPointer(e.clientY);
+    } else {
+      hold = setTimeout(function () {
+        return liftPointer(e.clientY);
+      }, import_kanbanDnd.TOUCH_LONG_PRESS_MS);
+    }
+  }, [announce, cancelSession, containerRef, dropSession, enabled, liftAt, measure, rowEnabled, toDrag]);
+  var translateForIndex = (0, import_react.useCallback)(function (index) {
+    var current = session;
+    if (!current) return 0;
+    return (0, import_kanbanDnd.siblingOffset)({
+      index,
+      sourceIndex: current.sourceIndex,
+      gapIndex: current.targetIndex,
+      size: current.size
+    });
+  }, [session]);
+  return {
+    session,
+    announcement,
+    focusedIndex,
+    setFocusedIndex,
+    rowEnabled,
+    ids,
+    labels,
+    liftAt,
+    onRowKeyDown,
+    onHandleKeyDown,
+    onHandlePointerDown,
+    translateForIndex,
+    liveProps: {
+      "aria-live": "polite",
+      "aria-atomic": true,
+      "data-sortable-live": "true"
+    }
+  };
+}
+//# sourceMappingURL=useSortableRows.native.js.map

package/dist/cjs/SortableList/useSortableRows.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","useSortableRows_exports","__export","SortableSessionProvider","useSortableDragging","useSortableRows","module","exports","import_react","require","import_kanbanDnd","DEFAULT_ROW_SELECTOR","SortableSessionContext","createContext","sourceId","param","children","createElement","Provider","itemId","dragging","useContext","items","getId","getLabel","canReorder","onChange","enabled","containerRef","rowSelector","session","setSession","useState","announcement","setAnnouncement","focusedIndex","setFocusedIndex","sessionRef","useRef","current","itemsRef","board","useMemo","listBoardSnapshot","length","ids","map","item","i","labels","rowEnabled","useCallback","index","announce","type","drag","label","formatListAnnouncement","describeCancel","sourcePosition","sourceIndex","describeDragState","toDrag","s","sourceColumnId","LIST_COLUMN_ID","target","columnId","targetIndex","focusRow","id","_el_focus","root","el","querySelector","focus","call","liftAt","mode","kb","keyboardLift","next","size","moveSession","direction","moved","keyboardMove","dropSession","result","resolveDrop","commit","applyReorder","from","to","requestAnimationFrame","cancelSession","onRowKeyDown","e","key","preventDefault","onHandleKeyDown","useEffect","window","onKey","onKey2","_e_target_closest","_e_target","stopPropagation","handle","closest","getAttribute","indexOf","addEventListener","removeEventListener","measure","_ref","_rows_","els","querySelectorAll","top","getBoundingClientRect","rows","r","start","scrollTop","height","onHandlePointerDown","_e_pointerType","_e_preventDefault","pointerType","lifted","hold","liftPointer","liftPointer2","clientY","measured","sized","localY","insertionIndexForY","count","onMove","onMove2","ev","rect","vel","autoScrollVelocity","pos","end","bottom","edge","AUTO_SCROLL_EDGE_PX","maxSpeed","AUTO_SCROLL_MAX_SPEED","teardown","teardown2","clearTimeout"],"sources":["../../../src/SortableList/useSortableRows.ts"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/Tabs/index.cjs

@@ -33,15 +33,42 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var Tabs_exports = {};
 __export(Tabs_exports, {
-  Tabs: () => Tabs
+  Tabs: () => Tabs,
+  tabsOverflowFades: () => tabsOverflowFades,
+  tabsScrollIntoViewX: () => tabsScrollIntoViewX
 });
 module.exports = __toCommonJS(Tabs_exports);
 var import_theme = require("@multiplatform.one/theme");
 var import_react = __toESM(require("react"));
+var import_useDirection = require("../hooks/useDirection.cjs");
 var import_i18n = require("../shared/i18n.cjs");
+var import_textRidesText = require("../shared/textRidesText.cjs");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function tabsOverflowFades(offset, viewport, content, direction, threshold = 4) {
+  const range = Math.max(content - viewport, 0);
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  const fromLeft = offset - minScrollLeft;
+  const fromRight = minScrollLeft + range - offset;
+  return {
+    left: fromLeft > threshold,
+    right: fromRight > threshold
+  };
+}
+function tabsScrollIntoViewX(layout, offset, viewport, content, direction, pad = 32) {
+  const range = Math.max(content - viewport, 0);
+  if (range <= 0) return void 0;
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  const fromLeft = offset - minScrollLeft;
+  let targetFromLeft;
+  if (layout.x < fromLeft + pad) {
+    targetFromLeft = Math.max(0, layout.x - pad);
+  } else if (layout.x + layout.width > fromLeft + viewport - pad) {
+    targetFromLeft = Math.min(range, layout.x + layout.width - viewport + pad);
+  }
+  return targetFromLeft === void 0 ? void 0 : targetFromLeft + minScrollLeft;
+}
 function underlineStackRadius(position, radius) {
   const start = position === "first" || position === "only";
   const end = position === "last" || position === "only";
@@ -62,15 +89,7 @@ const fillProps = {
 const StripWrapper = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "MpTabsStrip",
   width: "100%",
-  position: "relative",
-  variants: {
-    underline: {
-      true: {
-        borderBottomWidth: 1,
-        borderColor: import_componentColors.componentColors.surface.border
-      }
-    }
-  }
+  position: "relative"
 });
 const TabsList = (0, import_tamagui.styled)(import_tamagui.Tabs.List, {
   name: "MpTabsList",
@@ -115,7 +134,9 @@ const UnderlineIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
   position: "absolute",
   bottom: 0,
   height: 2,
-  borderRadius: 1,
+  // Token scale (design-audit): 0, not a 1px radius that isn't a stop.
+  // A 2px selection mark is a rectangle sitting on the G10 hairline.
+  borderRadius: 0,
   backgroundColor: "$color9"
 });
 const ThumbIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
@@ -135,7 +156,7 @@ const TabLabel = (0, import_tamagui.styled)(import_tamagui.Text, {
     }
   }
 });
-function Tabs({
+function TabsRoot({
   items,
   value,
   defaultValue,
@@ -151,11 +172,13 @@ function Tabs({
   fill = false,
   activationMode = "automatic",
   loop = true,
-  disabled = false
+  disabled = false,
+  ariaLabel
 }) {
   const {
     t
   } = (0, import_i18n.useTranslation)();
+  const direction = (0, import_useDirection.useDirection)();
   const intent = accent && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
   const {
     knobProps,
@@ -210,12 +233,8 @@ function Tabs({
       viewport,
       content
     } = scrollMetrics.current;
-    const left = offset > 4;
-    const right = content - viewport - offset > 4;
-    setFades(prev => prev.left === left && prev.right === right ? prev : {
-      left,
-      right
-    });
+    const next = tabsOverflowFades(offset, viewport, content, direction);
+    setFades(prev => prev.left === next.left && prev.right === next.right ? prev : next);
   };
   import_react.default.useEffect(() => {
     if (!activeLayout) return;
@@ -224,21 +243,14 @@ function Tabs({
       viewport,
       content
     } = scrollMetrics.current;
-    if (content <= viewport) return;
-    const pad = 32;
-    let target;
-    if (activeLayout.x < offset + pad) {
-      target = Math.max(0, activeLayout.x - pad);
-    } else if (activeLayout.x + activeLayout.width > offset + viewport - pad) {
-      target = Math.min(content - viewport, activeLayout.x + activeLayout.width - viewport + pad);
-    }
+    const target = tabsScrollIntoViewX(activeLayout, offset, viewport, content, direction);
     if (target !== void 0) {
       scrollRef.current?.scrollTo({
         x: target,
         animated: true
       });
     }
-  }, [activeLayout]);
+  }, [activeLayout, direction]);
   const isUnderline = variant === "underline";
   const indicatorTheme = intent ?? "accent";
   const visualSizeToken = size ?? knobProps.sizeToken;
@@ -246,7 +258,7 @@ function Tabs({
   const slop = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - sizePx) / 2));
   const tabHitSlop = (0, import_theme.pressTargetHitSlop)(sizePx);
   const radiusToken = knobProps.borderRadius.borderRadius;
-  const outerRadiusToken = knobProps.borderRadiusOuter.borderRadius;
+  const outerRadiusToken = knobProps.borderRadiusNested.borderRadius;
   const transition = knobProps.transition;
   const enabledCount = items.length;
   const activeIndex = items.findIndex(i => i.value === currentValue);
@@ -266,6 +278,7 @@ function Tabs({
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(UnderlineIndicator, {
       x: activeLayout.x,
       width: activeLayout.width,
+      "data-tabs-indicator": "underline",
       ...(transition ? {
         transition
       } : void 0)
@@ -278,6 +291,7 @@ function Tabs({
       width: activeLayout.width,
       height: activeLayout.height,
       backgroundColor: selectedTint ?? "$color4",
+      "data-tabs-indicator": "thumb",
       ...thumbRadius,
       ...(knobProps.elevation !== void 0 ? {
         elevation: knobProps.elevation
@@ -288,6 +302,7 @@ function Tabs({
     })
   }) : null;
   if (items.length === 0) return null;
+  const tabListLabel = ariaLabel ?? t("Tabs");
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
     value: currentValue,
     onValueChange: handleChange,
@@ -298,11 +313,17 @@ function Tabs({
     ...(fill ? fillProps : void 0),
     "data-tabs-variant": variant,
     "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, {
-      underline: isUnderline,
+      ...(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, {
         ref: scrollRef,
         horizontal: true,
@@ -327,7 +348,7 @@ function Tabs({
         },
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(TabsList, {
           loop,
-          "aria-label": t("Tabs"),
+          "aria-label": tabListLabel,
           "data-tabs-list": variant,
           "data-size-token": visualSizeToken,
           "data-density": knobProps.density,
@@ -343,7 +364,7 @@ function Tabs({
             gap: 0,
             // Full fragment spread (AGENTS.md knob rule) so the
             // cornerSmoothing class rides along with the radius.
-            ...knobProps.borderRadiusOuter
+            ...knobProps.borderRadiusNested
           }),
           children: [indicator, items.map((item, itemIndex) => {
             const isActive = item.value === currentValue;
@@ -406,7 +427,7 @@ function Tabs({
                   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: item.label
+                  children: (0, import_textRidesText.wrapBareTextChildren)(item.label, label => label)
                 }), item.badge]
               })
             }, item.value);
@@ -456,6 +477,9 @@ function Tabs({
     })]
   });
 }
-Tabs.List = import_tamagui.Tabs.List;
-Tabs.Tab = import_tamagui.Tabs.Tab;
-Tabs.Content = import_tamagui.Tabs.Content;
+TabsRoot.displayName = "Tabs";
+const Tabs = (0, import_tamagui.withStaticProperties)(TabsRoot, {
+  List: import_tamagui.Tabs.List,
+  Tab: import_tamagui.Tabs.Tab,
+  Content: import_tamagui.Tabs.Content
+});