@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/jsx/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/jsx/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/jsx/SkipLink/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","SkipLink_exports","SkipLink","module","exports","import_jsx_runtime","require","import_react","import_forms","import_theme","import_tamagui","_instanceof","left","right","Symbol","hasInstance","SkipLinkSurface","styled","YStack","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","current","focus","document","getElementById","_target_focus","HTMLElement","hasAttribute","setAttribute","_target_scrollIntoView","scrollIntoView","block","jsx","href"],"sources":["../../../src/SkipLink/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__defProp","Object","defineProperty","__getOwnPropDesc","getOwnPropertyDescriptor","__getOwnPropNames","getOwnPropertyNames","__hasOwnProp","prototype","hasOwnProperty","__export","target","all","name","get","enumerable","__copyProps","to","from","except","desc","key","call","__toCommonJS","mod","value","SkipLink_exports","SkipLink","module","exports","import_jsx_runtime","require","import_forms","import_theme","import_tamagui","_instanceof","left","right","Symbol","hasInstance","SkipLinkSurface","styled","YStack","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","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"],"sources":["../../../src/SkipLink/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/jsx/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);
       })