@multiplatform.one/components 6.7.0 → 7.1.0

package/dist/esm/SkipLink/index.mjs.map

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

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

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from "react";
 import { zIndex } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { SizableText, YStack, isWeb, styled, useTheme } from "tamagui";
+import { FOCUS_RING_MIN_WIDTH, FOCUS_VISIBLE_RING, useResolvedKnobs } from "@multiplatform.one/theme";
+import { SizableText, YStack, getTokenValue, isWeb, styled } from "tamagui";
 function _instanceof(left, right) {
   "@swc/helpers - instanceof";
 
@@ -17,36 +16,84 @@ var SkipLinkSurface = styled(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: 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: 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: ${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: ${zIndex.sheet};
+  text-decoration: none;
+  border-radius: var(--mp-skip-link-radius, 0px);
+}
+.mp-skip-link:focus-visible {
+  outline: ${FOCUS_RING_MIN_WIDTH}px ${FOCUS_VISIBLE_RING.outlineStyle} var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: ${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 = 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,
@@ -54,60 +101,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
   } = useResolvedKnobs({
     component: "SkipLink"
   });
-  var theme = useTheme();
-  var [focused, setFocused] = useState(false);
   if (!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__ */_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__ */_jsx(SkipLinkSurface, {
       ...knobProps.elevatedSurface,

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

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

package/dist/esm/Tabs/index.mjs

@@ -1,9 +1,22 @@
-import { MIN_PRESS_TARGET, ensureKeyboardModalityTracking, keyboardFocusRingProps, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
+import { MIN_PRESS_TARGET, ensureKeyboardModalityTracking, getGroupPosition, keyboardFocusRingProps, pressTargetHitSlop, stackEdgeRadius, stackRadiusProps, useAccentTintedSurface, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import React from "react";
-import { useTranslation } from "react-i18next";
-import { ScrollView, Tabs as TamaguiTabs, Text, Theme, View, XStack, YStack, getTokens, isWeb, styled } from "tamagui";
+import { useTranslation } from "../shared/i18n.mjs";
+import { ScrollView, Tabs as TamaguiTabs, Text, Theme, View, YStack, isWeb, styled } from "tamagui";
 import { componentColors } from "../componentColors.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
+function underlineStackRadius(position, radius) {
+  const start = position === "first" || position === "only";
+  const end = position === "last" || position === "only";
+  const full = stackEdgeRadius(radius, {
+    start,
+    end
+  }, "horizontal");
+  return {
+    ...full,
+    borderEndStartRadius: 0,
+    borderEndEndRadius: 0
+  };
+}
 const StripWrapper = styled(View, {
   name: "MpTabsStrip",
   width: "100%",
@@ -23,7 +36,14 @@ const TabsList = styled(TamaguiTabs.List, {
   flexDirection: "row",
   alignItems: "stretch",
   alignSelf: "flex-start",
-  position: "relative"
+  position: "relative",
+  variants: {
+    contained: {
+      true: {
+        overflow: "hidden"
+      }
+    }
+  }
 });
 const Trigger = styled(TamaguiTabs.Tab, {
   name: "MpTabsTab",
@@ -35,12 +55,17 @@ const Trigger = styled(TamaguiTabs.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 = styled(View, {
@@ -54,28 +79,20 @@ const UnderlineIndicator = styled(View, {
 const ThumbIndicator = styled(View, {
   name: "MpTabsThumb",
   position: "absolute",
-  backgroundColor: "$background"
-});
-const ThumbBorder = styled(View, {
-  name: "MpTabsThumbBorder",
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  borderWidth: 1,
-  borderColor: "$color9"
+  zIndex: 0
 });
 const TabLabel = styled(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,
@@ -98,16 +115,21 @@ function Tabs({
   } = useTranslation();
   const intent = accent && "accent" || error && "error" || warning && "warning" || success && "success" || void 0;
   const {
-    knobProps
+    knobProps,
+    disabledState
   } = useResolvedKnobs({
     intent,
     component: "Tabs",
     size,
     compact
   });
+  const selectedTint = useAccentTintedSurface();
+  const onSelectedTint = useReadableTextOn(selectedTint);
   if (isWeb) ensureKeyboardModalityTracking();
   const [kbFocusValue, setKbFocusValue] = React.useState(null);
   const [focusValue, setFocusValue] = React.useState(null);
+  const [hoverValue, setHoverValue] = React.useState(null);
+  const [pressValue, setPressValue] = React.useState(null);
   const [internalValue, setInternalValue] = React.useState(() => defaultValue ?? items[0]?.value ?? "");
   const currentValue = value ?? internalValue;
   const [visited, setVisited] = React.useState(() => new Set(currentValue ? [currentValue] : []));
@@ -176,13 +198,17 @@ function Tabs({
   }, [activeLayout]);
   const isUnderline = variant === "underline";
   const indicatorTheme = intent ?? "accent";
-  const sizeToken = knobProps.sizeToken;
-  const sizePx = getTokens().size?.[sizeToken]?.val ?? MIN_PRESS_TARGET;
-  const triggerOutset = Math.max(0, Math.ceil((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((MIN_PRESS_TARGET - sizePx) / 2));
+  const tabHitSlop = 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 = getGroupPosition(Math.max(0, activeIndex), enabledCount);
+  const thumbRadius = isUnderline ? void 0 : stackRadiusProps(activePosition, outerRadiusToken, "horizontal");
   const maskStyle = 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%";
@@ -201,25 +227,24 @@ function Tabs({
         transition
       } : void 0)
     })
-  }) : /* @__PURE__ */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__ */jsx(Theme, {
-      name: indicatorTheme,
-      children: /* @__PURE__ */jsx(ThumbBorder, {
-        borderRadius: radiusToken
-      })
+  }) : /* @__PURE__ */jsx(Theme, {
+    name: indicatorTheme,
+    children: /* @__PURE__ */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__ */jsxs(TamaguiTabs, {
     value: currentValue,
     onValueChange: handleChange,
@@ -227,6 +252,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__ */jsx(StripWrapper, {
       underline: isUnderline,
       children: /* @__PURE__ */jsx(ScrollView, {
@@ -236,9 +265,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();
@@ -254,15 +283,19 @@ function Tabs({
         children: /* @__PURE__ */jsxs(TabsList, {
           loop,
           "aria-label": t("Tabs"),
+          "data-tabs-list": variant,
+          "data-size-token": visualSizeToken,
+          "data-density": knobProps.density,
+          "data-visual-px": sizePx,
           ...(!isWeb ? {
             role: "tablist"
           } : void 0),
+          contained: !isUnderline,
           ...(isUnderline ? {
-            gap: gapToken
+            gap: 0
           } : {
             backgroundColor: 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
@@ -270,19 +303,19 @@ function Tabs({
           children: [indicator, items.map((item, itemIndex) => {
             const isActive = item.value === currentValue;
             const isDisabled = disabled || item.disabled;
+            const position = getGroupPosition(itemIndex, enabledCount);
+            const cornerProps = isUnderline ? underlineStackRadius(position, radiusToken) : 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__ */jsx(Trigger, {
               value: item.value,
               disabled: isDisabled,
+              "data-tab-position": position,
+              "data-kb-ring": kbRing ? "true" : void 0,
               ...(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,
@@ -290,52 +323,44 @@ function Tabs({
                   "aria-disabled": true
                 } : void 0)
               }),
-              height: sizeToken,
-              minHeight: 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),
               ...(isWeb ? {
-                onFocus: () => {
+                onFocusCapture: () => {
                   setFocusValue(item.value);
                   if (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 ? 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__ */jsxs(XStack, {
+              children: /* @__PURE__ */jsxs(View, {
+                ...cornerProps,
+                ...knobProps.control,
+                width: "100%",
+                flexDirection: "row",
                 alignItems: "center",
-                gap: "$1.5",
-                flexShrink: 0,
+                justifyContent: "center",
+                backgroundColor: isActive || isDisabled ? "transparent" : pressValue === item.value ? componentColors.interactive.hover : hoverValue === item.value ? componentColors.interactive.background : "transparent",
+                ...(kbRing ? keyboardFocusRingProps : void 0),
                 children: [item.icon, /* @__PURE__ */jsx(TabLabel, {
-                  fontSize,
-                  fontFamily: knobProps.body.fontFamily,
-                  fontWeight: isActive ? "600" : knobProps.body.fontWeight,
-                  color: isActive ? componentColors.text.primary : componentColors.text.secondary,
+                  active: isActive,
+                  ...knobProps.controlType,
+                  fontFamily: knobProps.label.fontFamily,
+                  fontWeight: isActive ? "700" : knobProps.label.fontWeight,
+                  color: isDisabled ? componentColors.text.muted : isActive ? !isUnderline && onSelectedTint ? onSelectedTint : componentColors.text.primary : componentColors.text.secondary,
                   children: item.label
                 }), item.badge]
               })
@@ -353,13 +378,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__ */jsx(TamaguiTabs.Content, {
           value: item.value,
-          paddingTop: gapToken,
+          ...knobProps.panelPadding,
+          tabIndex: -1,
+          outlineWidth: 0,
+          focusStyle: {
+            outlineWidth: 0
+          },
+          focusVisibleStyle: {
+            outlineWidth: 0
+          },
           children: item.content
         }, item.value);
       })