@multiplatform.one/components 6.7.0 → 7.1.0

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

@@ -28,7 +28,6 @@ __export(SkipLink_exports, {
 });
 module.exports = __toCommonJS(SkipLink_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_forms = require("@multiplatform.one/forms");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
@@ -46,36 +45,84 @@ var SkipLinkSurface = (0, import_tamagui.styled)(import_tamagui.YStack, {
   paddingVertical: "$2.5",
   paddingHorizontal: "$3.5"
 });
-var hiddenStyle = {
-  position: "absolute",
-  top: 0,
-  insetInlineStart: 0,
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0,
-  // Sheet tier (Axiom 14): the revealed chip must sit above page content
-  // and sticky chrome when the first Tab lands on it.
-  zIndex: import_forms.zIndex.sheet,
-  textDecoration: "none"
-};
-var revealedStyle = {
-  position: "fixed",
-  top: 12,
-  insetInlineStart: 12,
-  width: "auto",
-  height: "auto",
-  margin: 0,
-  padding: 0,
-  overflow: "visible",
-  clip: "auto",
-  zIndex: import_forms.zIndex.sheet,
-  textDecoration: "none"
-};
+var SKIP_LINK_STYLE_ID = "mp-skip-link-css";
+var SKIP_LINK_TARGET_CLASS = "mp-skip-link-target";
+var skipLinkCss = `.mp-skip-link {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  display: inline-block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  z-index: ${import_forms.zIndex.sheet};
+  text-decoration: none;
+  color: inherit;
+}
+.mp-skip-link:focus,
+.mp-skip-link:focus-visible {
+  position: fixed;
+  top: 12px;
+  inset-inline-start: 12px;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  clip-path: none;
+  white-space: nowrap;
+  z-index: ${import_forms.zIndex.sheet};
+  text-decoration: none;
+  border-radius: var(--mp-skip-link-radius, 0px);
+}
+.mp-skip-link:focus-visible {
+  outline: ${import_theme.FOCUS_RING_MIN_WIDTH}px ${import_theme.FOCUS_VISIBLE_RING.outlineStyle} var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: ${import_theme.FOCUS_VISIBLE_RING.outlineOffset}px;
+}
+.mp-skip-link:focus:not(:focus-visible) {
+  outline: none;
+}
+.${SKIP_LINK_TARGET_CLASS}:focus {
+  outline: none;
+}`;
+function ensureSkipLinkStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(SKIP_LINK_STYLE_ID)) return;
+  var tag = document.createElement("style");
+  tag.id = SKIP_LINK_STYLE_ID;
+  tag.textContent = skipLinkCss;
+  document.head.appendChild(tag);
+}
+function resolveRadiusPx(token) {
+  if (typeof token === "number" && Number.isFinite(token)) return token;
+  if (typeof token !== "string" || token.length === 0) return void 0;
+  try {
+    var value = (0, import_tamagui.getTokenValue)(token, "radius");
+    return typeof value === "number" && Number.isFinite(value) ? value : void 0;
+  } catch (unused) {
+    return void 0;
+  }
+}
+function focusSkipTarget(target) {
+  var hadTabIndex = target.hasAttribute("tabindex");
+  if (!hadTabIndex) {
+    target.setAttribute("tabindex", "-1");
+  }
+  target.classList.add(SKIP_LINK_TARGET_CLASS);
+  var cleanup = function cleanup1() {
+    if (!hadTabIndex) target.removeAttribute("tabindex");
+    target.classList.remove(SKIP_LINK_TARGET_CLASS);
+    target.removeEventListener("blur", cleanup);
+  };
+  target.addEventListener("blur", cleanup);
+  target.focus();
+}
 function SkipLink(param) {
   var {
     targetId,
@@ -83,60 +130,39 @@ function SkipLink(param) {
     children = "Skip to content",
     onSkip
   } = param;
-  var _ref, _ref1, _knobProps_elevatedSurface_elevation;
-  var _theme_outlineColor, _theme_color8;
+  var _knobProps_elevatedSurface_elevation;
   var {
     knobProps
   } = (0, import_theme.useResolvedKnobs)({
     component: "SkipLink"
   });
-  var theme = (0, import_tamagui.useTheme)();
-  var [focused, setFocused] = (0, import_react.useState)(false);
   if (!import_tamagui.isWeb) return null;
+  ensureSkipLinkStyles();
+  var radiusPx = resolveRadiusPx(knobProps.elevatedSurface.borderRadius);
+  var href = targetId ? `#${targetId}` : "#";
   var handleActivate = function handleActivate2(event) {
-    var _event_preventDefault;
-    event === null || event === void 0 ? void 0 : (_event_preventDefault = event.preventDefault) === null || _event_preventDefault === void 0 ? void 0 : _event_preventDefault.call(event);
     var target = null;
     if (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) {
+      event.preventDefault();
       var current = targetRef.current;
       if (typeof current.focus === "function") {
         target = current;
       }
     } else if (targetId && typeof document !== "undefined") {
       target = document.getElementById(targetId);
+    } else {
+      event.preventDefault();
     }
-    if (target) {
-      var _target_focus;
-      if (_instanceof(target, HTMLElement) && !target.hasAttribute("tabindex")) {
-        target.setAttribute("tabindex", "-1");
-      }
-      (_target_focus = target.focus) === null || _target_focus === void 0 ? void 0 : _target_focus.call(target);
-      if (_instanceof(target, HTMLElement)) {
-        var _target_scrollIntoView;
-        (_target_scrollIntoView = target.scrollIntoView) === null || _target_scrollIntoView === void 0 ? void 0 : _target_scrollIntoView.call(target, {
-          block: "start"
-        });
-      }
-    }
+    if (target) focusSkipTarget(target);
     onSkip === null || onSkip === void 0 ? void 0 : onSkip(_instanceof(target, HTMLElement) ? target : null);
   };
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)("a", {
-    href: targetId ? `#${targetId}` : "#",
-    style: {
-      ...(focused ? revealedStyle : hiddenStyle),
-      // Focus ring on the revealed chip: the theme's $outlineColor token
-      // (DG-A11Y-01, ≥3:1 vs page surfaces). The previous color8 measured
-      // 1.89:1 on the light page — an invisible ring on the one control
-      // whose entire job is keyboard visibility.
-      outline: focused ? `2px solid ${(_ref = (_ref1 = (_theme_outlineColor = theme.outlineColor) === null || _theme_outlineColor === void 0 ? void 0 : _theme_outlineColor.get()) !== null && _ref1 !== void 0 ? _ref1 : (_theme_color8 = theme.color8) === null || _theme_color8 === void 0 ? void 0 : _theme_color8.get()) !== null && _ref !== void 0 ? _ref : "currentColor"}` : "none",
-      outlineOffset: 2
-    },
-    onFocus: function onFocus() {
-      return setFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setFocused(false);
-    },
+    className: "mp-skip-link",
+    href,
+    style: typeof radiusPx === "number" ? {
+      borderRadius: radiusPx,
+      ["--mp-skip-link-radius"]: `${radiusPx}px`
+    } : void 0,
     onClick: handleActivate,
     children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(SkipLinkSurface, {
       ...knobProps.elevatedSurface,

package/dist/cjs/SkipLink/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SkipLink_exports","__export","SkipLink","module","exports","import_jsx_runtime","require","import_react","import_forms","import_theme","import_tamagui","_instanceof","left","right","Symbol","hasInstance","SkipLinkSurface","styled","YStack","name","paddingVertical","paddingHorizontal","hiddenStyle","position","top","insetInlineStart","width","height","margin","padding","overflow","clip","whiteSpace","border","zIndex","sheet","textDecoration","revealedStyle","param","targetId","targetRef","children","onSkip","_ref","_ref1","_knobProps_elevatedSurface_elevation","_theme_outlineColor","_theme_color8","knobProps","useResolvedKnobs","component","theme","useTheme","focused","setFocused","useState","isWeb","handleActivate","handleActivate2","event","_event_preventDefault","preventDefault","call","target","current","focus","document","getElementById","_target_focus","HTMLElement","hasAttribute","setAttribute","_target_scrollIntoView","scrollIntoView","block","jsx","href","style","outline","outlineColor","get","color8","outlineOffset","onFocus","onBlur","onClick","elevatedSurface","borderWidth","Math","max","elevation","SizableText","body"],"sources":["../../../src/SkipLink/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","SkipLink_exports","__export","SkipLink","module","exports","import_jsx_runtime","require","import_forms","import_theme","import_tamagui","_instanceof","left","right","Symbol","hasInstance","SkipLinkSurface","styled","YStack","name","paddingVertical","paddingHorizontal","SKIP_LINK_STYLE_ID","SKIP_LINK_TARGET_CLASS","skipLinkCss","zIndex","sheet","FOCUS_RING_MIN_WIDTH","FOCUS_VISIBLE_RING","outlineStyle","outlineOffset","ensureSkipLinkStyles","document","getElementById","tag","createElement","id","textContent","head","appendChild","resolveRadiusPx","token","Number","isFinite","length","getTokenValue","unused","focusSkipTarget","target","hadTabIndex","hasAttribute","setAttribute","classList","add","cleanup","cleanup1","removeAttribute","remove","removeEventListener","addEventListener","focus","param","targetId","targetRef","children","onSkip","_knobProps_elevatedSurface_elevation","knobProps","useResolvedKnobs","component","isWeb","radiusPx","elevatedSurface","borderRadius","href","handleActivate","handleActivate2","event","current","preventDefault","HTMLElement","jsx","className","style","onClick","borderWidth","Math","max","elevation","SizableText","body","fontWeight","fontSize","color","whiteSpace"],"sources":["../../../src/SkipLink/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/Tabs/index.cjs

@@ -38,10 +38,23 @@ __export(Tabs_exports, {
 module.exports = __toCommonJS(Tabs_exports);
 var import_theme = require("@multiplatform.one/theme");
 var import_react = __toESM(require("react"));
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
 var import_componentColors = require("../componentColors.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function underlineStackRadius(position, radius) {
+  const start = position === "first" || position === "only";
+  const end = position === "last" || position === "only";
+  const full = (0, import_theme.stackEdgeRadius)(radius, {
+    start,
+    end
+  }, "horizontal");
+  return {
+    ...full,
+    borderEndStartRadius: 0,
+    borderEndEndRadius: 0
+  };
+}
 const StripWrapper = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "MpTabsStrip",
   width: "100%",
@@ -61,7 +74,14 @@ const TabsList = (0, import_tamagui.styled)(import_tamagui.Tabs.List, {
   flexDirection: "row",
   alignItems: "stretch",
   alignSelf: "flex-start",
-  position: "relative"
+  position: "relative",
+  variants: {
+    contained: {
+      true: {
+        overflow: "hidden"
+      }
+    }
+  }
 });
 const Trigger = (0, import_tamagui.styled)(import_tamagui.Tabs.Tab, {
   name: "MpTabsTab",
@@ -73,12 +93,17 @@ const Trigger = (0, import_tamagui.styled)(import_tamagui.Tabs.Tab, {
   borderWidth: 0,
   cursor: "pointer",
   zIndex: 1,
-  paddingHorizontal: "$3",
+  // LC-71: rest and mouse-focus paint no ring. Keyboard ring is applied
+  // per-item via keyboardFocusRingProps when wasKeyboardFocus().
+  outlineWidth: 0,
+  outlineStyle: "none",
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none"
+  },
   focusVisibleStyle: {
-    outlineColor: "$outlineColor",
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineOffset: -2
+    outlineWidth: 0,
+    outlineStyle: "none"
   }
 });
 const UnderlineIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
@@ -92,28 +117,20 @@ const UnderlineIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
 const ThumbIndicator = (0, import_tamagui.styled)(import_tamagui.View, {
   name: "MpTabsThumb",
   position: "absolute",
-  backgroundColor: "$background"
-});
-const ThumbBorder = (0, import_tamagui.styled)(import_tamagui.View, {
-  name: "MpTabsThumbBorder",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  borderWidth: 1,
-  borderColor: "$color9"
+  zIndex: 0
 });
 const TabLabel = (0, import_tamagui.styled)(import_tamagui.Text, {
   name: "MpTabsLabel",
   numberOfLines: 1,
-  userSelect: "none"
+  userSelect: "none",
+  variants: {
+    active: {
+      true: {
+        fontWeight: "700"
+      }
+    }
+  }
 });
-const fontSizeMap = {
-  $3: "$2",
-  $4: "$3",
-  $5: "$4"
-};
 function Tabs({
   items,
   value,
@@ -133,19 +150,24 @@ function Tabs({
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const intent = accent && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
   const {
-    knobProps
+    knobProps,
+    disabledState
   } = (0, import_theme.useResolvedKnobs)({
     intent,
     component: "Tabs",
     size,
     compact
   });
+  const selectedTint = (0, import_theme.useAccentTintedSurface)();
+  const onSelectedTint = (0, import_theme.useReadableTextOn)(selectedTint);
   if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   const [kbFocusValue, setKbFocusValue] = import_react.default.useState(null);
   const [focusValue, setFocusValue] = import_react.default.useState(null);
+  const [hoverValue, setHoverValue] = import_react.default.useState(null);
+  const [pressValue, setPressValue] = import_react.default.useState(null);
   const [internalValue, setInternalValue] = import_react.default.useState(() => defaultValue ?? items[0]?.value ?? "");
   const currentValue = value ?? internalValue;
   const [visited, setVisited] = import_react.default.useState(() => new Set(currentValue ? [currentValue] : []));
@@ -214,13 +236,17 @@ function Tabs({
   }, [activeLayout]);
   const isUnderline = variant === "underline";
   const indicatorTheme = intent ?? "accent";
-  const sizeToken = knobProps.sizeToken;
-  const sizePx = (0, import_tamagui.getTokens)().size?.[sizeToken]?.val ?? import_theme.MIN_PRESS_TARGET;
-  const triggerOutset = Math.max(0, Math.ceil((import_theme.MIN_PRESS_TARGET - sizePx) / 2));
-  const fontSize = fontSizeMap[sizeToken] ?? "$3";
-  const gapToken = knobProps.gap.gap;
+  const visualSizeToken = size ?? knobProps.sizeToken;
+  const sizePx = knobProps.control.height;
+  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 transition = knobProps.transition;
+  const enabledCount = items.length;
+  const activeIndex = items.findIndex(i => i.value === currentValue);
+  const activePosition = (0, import_theme.getGroupPosition)(Math.max(0, activeIndex), enabledCount);
+  const thumbRadius = isUnderline ? void 0 : (0, import_theme.stackRadiusProps)(activePosition, outerRadiusToken, "horizontal");
   const maskStyle = import_tamagui.isWeb && (fades.left || fades.right) ? (() => {
     const leftStop = fades.left ? "transparent 0px, black 32px" : "black 0px";
     const rightStop = fades.right ? "black calc(100% - 32px), transparent 100%" : "black 100%";
@@ -239,25 +265,24 @@ function Tabs({
         transition
       } : void 0)
     })
-  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(ThumbIndicator, {
-    x: activeLayout.x,
-    y: activeLayout.y + triggerOutset,
-    width: activeLayout.width,
-    height: Math.max(0, activeLayout.height - triggerOutset * 2),
-    borderRadius: radiusToken,
-    ...(knobProps.elevation !== void 0 ? {
-      elevation: knobProps.elevation
-    } : void 0),
-    ...(transition ? {
-      transition
-    } : void 0),
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
-      name: indicatorTheme,
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ThumbBorder, {
-        borderRadius: radiusToken
-      })
+  }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
+    name: indicatorTheme,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ThumbIndicator, {
+      x: activeLayout.x,
+      y: activeLayout.y,
+      width: activeLayout.width,
+      height: activeLayout.height,
+      backgroundColor: selectedTint ?? "$color4",
+      ...thumbRadius,
+      ...(knobProps.elevation !== void 0 ? {
+        elevation: knobProps.elevation
+      } : void 0),
+      ...(transition ? {
+        transition
+      } : void 0)
     })
   }) : null;
+  if (items.length === 0) return null;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Tabs, {
     value: currentValue,
     onValueChange: handleChange,
@@ -265,6 +290,10 @@ function Tabs({
     activationMode,
     width: "100%",
     flexDirection: "column",
+    "data-tabs-variant": variant,
+    "data-size-token": visualSizeToken,
+    "data-density": knobProps.density,
+    "data-visual-px": sizePx,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(StripWrapper, {
       underline: isUnderline,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
@@ -274,9 +303,9 @@ function Tabs({
         scrollEventThrottle: 16,
         style: maskStyle,
         contentContainerStyle: {
-          paddingVertical: triggerOutset
+          paddingVertical: slop
         },
-        marginVertical: -triggerOutset,
+        marginVertical: -slop,
         onScroll: e => {
           scrollMetrics.current.offset = e.nativeEvent.contentOffset.x;
           updateFades();
@@ -292,15 +321,19 @@ function Tabs({
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(TabsList, {
           loop,
           "aria-label": t("Tabs"),
+          "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: gapToken
+            gap: 0
           } : {
             backgroundColor: import_componentColors.componentColors.interactive.background,
-            padding: "$1",
-            gap: "$1",
+            gap: 0,
             // Full fragment spread (AGENTS.md knob rule) so the
             // cornerSmoothing class rides along with the radius.
             ...knobProps.borderRadiusOuter
@@ -308,19 +341,19 @@ function Tabs({
           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
               } : {
-                // Native: one a11y element per tab with tab role +
-                // selected state (the label text composes the name).
-                // `role`/`aria-selected` are the tamagui-canonical
-                // spellings — raw accessibilityRole/State are dropped
-                // by the style system. Web keeps tamagui's ARIA tabs.
                 accessible: true,
                 role: "tab",
                 "aria-selected": isActive,
@@ -328,52 +361,44 @@ function Tabs({
                   "aria-disabled": true
                 } : void 0)
               }),
-              height: sizeToken,
-              minHeight: import_theme.MIN_PRESS_TARGET,
-              marginVertical: -triggerOutset,
+              hitSlop: tabHitSlop,
               onInteraction: handleInteraction,
-              opacity: isDisabled ? 0.4 : 1,
-              cursor: isDisabled ? "default" : "pointer",
+              cursor: isDisabled ? "not-allowed" : "pointer",
+              backgroundColor: "transparent",
+              borderRadius: 0,
+              ...(isDisabled ? isActive ? disabledState.chromeKnobProps : {
+                ...disabledState.chromeKnobProps,
+                ...disabledState.textKnobProps
+              } : void 0),
               ...(import_tamagui.isWeb ? {
-                onFocus: () => {
+                onFocusCapture: () => {
                   setFocusValue(item.value);
                   if ((0, import_theme.wasKeyboardFocus)()) setKbFocusValue(item.value);
                 },
-                onBlur: () => {
+                onBlurCapture: () => {
                   setFocusValue(prev => prev === item.value ? null : prev);
                   setKbFocusValue(prev => prev === item.value ? null : prev);
-                }
-              } : void 0),
-              ...(kbFocusValue === item.value ? import_theme.keyboardFocusRingProps : void 0),
-              ...(!isActive && !isDisabled ? isUnderline ? {
-                hoverStyle: {
-                  backgroundColor: "$color2"
                 },
-                pressStyle: {
-                  backgroundColor: "$color3"
-                }
-              } : {
-                hoverStyle: {
-                  backgroundColor: "$color4"
-                },
-                pressStyle: {
-                  backgroundColor: "$color5"
-                }
-              } : void 0),
-              borderRadius: isUnderline ? void 0 : radiusToken,
-              ...(isUnderline ? {
-                borderTopLeftRadius: radiusToken,
-                borderTopRightRadius: radiusToken
+                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.XStack, {
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.View, {
+                ...cornerProps,
+                ...knobProps.control,
+                width: "100%",
+                flexDirection: "row",
                 alignItems: "center",
-                gap: "$1.5",
-                flexShrink: 0,
+                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, {
-                  fontSize,
-                  fontFamily: knobProps.body.fontFamily,
-                  fontWeight: isActive ? "600" : knobProps.body.fontWeight,
-                  color: isActive ? import_componentColors.componentColors.text.primary : import_componentColors.componentColors.text.secondary,
+                  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: item.label
                 }), item.badge]
               })
@@ -391,13 +416,29 @@ function Tabs({
             value: item.value,
             forceMount: true,
             display: isActive ? "flex" : "none",
-            paddingTop: gapToken,
+            ...knobProps.panelPadding,
+            tabIndex: -1,
+            outlineWidth: 0,
+            focusStyle: {
+              outlineWidth: 0
+            },
+            focusVisibleStyle: {
+              outlineWidth: 0
+            },
             children: item.content
           }, item.value);
         }
         return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Tabs.Content, {
           value: item.value,
-          paddingTop: gapToken,
+          ...knobProps.panelPadding,
+          tabIndex: -1,
+          outlineWidth: 0,
+          focusStyle: {
+            outlineWidth: 0
+          },
+          focusVisibleStyle: {
+            outlineWidth: 0
+          },
           children: item.content
         }, item.value);
       })