@multiplatform.one/components 6.6.0 → 7.0.0

package/src/Tabs/index.tsx

@@ -4,41 +4,39 @@
  * Wraps `tamagui`'s Tabs (roving focus, tablist/tab/tabpanel aria, automatic
  * or manual activation) and adds MP1 anatomy + knob wiring:
  *
- * - variants: `underline` (desk-style, default) and `contained` (segmented
- *   track with a sliding content-bearing thumb)
- * - knobs: size (tab height/font), space (tab gap), radius (contained track
- *   and thumb), animation (active indicator slide), elevation (thumb)
+ * - variants: `underline` (desk / Primer / Linear) and `contained`
+ *   (Carbon contained / iOS segmented — CONTAINER-CLIP, selected = fill)
+ * - knobs: size (tab chrome via size recipe — height/pad/font/gap; radius
+ *   stays on the radius knob), density/space (pad + panel), animation
+ *   (indicator slide), elevation (thumb)
  * - intent: accent (default indicator hue) / error / warning / success
  * - overflow: horizontal scroll with web edge fades when tabs exceed width
  * - lazyMount: panels mount on first visit and stay mounted (state preserved)
  *
- * The strip is EDGE-TO-EDGE (SP-EDGE): padding lives inside each tab, the
- * underline hairline spans the full wrapper width.
+ * LC-71: selected = underline or sliding fill; unselected have zero chrome;
+ * keyboard ring on the focused tab only. LC-72: underline rounds only the
+ * strip's outer top corners; contained clips to the track.
  */
 
 import {
   MIN_PRESS_TARGET,
   ensureKeyboardModalityTracking,
+  getGroupPosition,
   keyboardFocusRingProps,
+  pressTargetHitSlop,
+  stackEdgeRadius,
+  stackRadiusProps,
+  useAccentTintedSurface,
+  useReadableTextOn,
   useResolvedKnobs,
   wasKeyboardFocus,
+  type GroupPosition,
 } from "@multiplatform.one/theme";
 import type { ReactNode } from "react";
 import React from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation } from "../shared/i18n";
 import type { GetProps, ThemeName } from "tamagui";
-import {
-  ScrollView,
-  Tabs as TamaguiTabs,
-  Text,
-  Theme,
-  View,
-  XStack,
-  YStack,
-  getTokens,
-  isWeb,
-  styled,
-} from "tamagui";
+import { ScrollView, Tabs as TamaguiTabs, Text, Theme, View, YStack, isWeb, styled } from "tamagui";
 import { componentColors } from "../componentColors";
 
 // ── Types ─────────────────────────────────────────────────────
@@ -80,9 +78,9 @@ export interface TabsProps {
   warning?: boolean;
   /** Success intent */
   success?: boolean;
-  /** Size token override for tab height/font */
+  /** Size token override for tab height/font (size axis — not density) */
   size?: TabsSize;
-  /** Compact sizing (steps size and space down one level) */
+  /** Compact density (tighter layout gaps; control size unchanged) */
   compact?: boolean;
   /** Mount panels on first visit and keep them mounted (preserves state) */
   lazyMount?: boolean;
@@ -107,6 +105,22 @@ interface TabLayout {
 // neither :focus-visible nor focusVisibleStyle fire for the redirected tab —
 // the ring is painted manually via the theme keyboard-modality tracker.
 
+/**
+ * Underline tabs sit on a full-bleed hairline, so only the TOP outer corners
+ * round (LC-72 adapted to a baseline). Bottoms stay square against the rule.
+ * Contained uses the full horizontal stack fragment (or CONTAINER-CLIP).
+ */
+function underlineStackRadius(position: GroupPosition, radius: string | number | undefined) {
+  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,
+  };
+}
+
 // ── Styled components ─────────────────────────────────────────
 
 const StripWrapper = styled(View, {
@@ -131,6 +145,14 @@ const TabsList = styled(TamaguiTabs.List, {
   alignItems: "stretch",
   alignSelf: "flex-start",
   position: "relative",
+
+  variants: {
+    contained: {
+      true: {
+        overflow: "hidden",
+      },
+    },
+  } as const,
 });
 
 const Trigger = styled(TamaguiTabs.Tab, {
@@ -143,14 +165,12 @@ const Trigger = styled(TamaguiTabs.Tab, {
   borderWidth: 0,
   cursor: "pointer",
   zIndex: 1,
-  paddingHorizontal: "$3",
-
-  focusVisibleStyle: {
-    outlineColor: "$outlineColor",
-    outlineWidth: 2,
-    outlineStyle: "solid",
-    outlineOffset: -2,
-  },
+  // LC-71: rest and mouse-focus paint no ring. Keyboard ring is applied
+  // per-item via keyboardFocusRingProps when wasKeyboardFocus().
+  outlineWidth: 0,
+  outlineStyle: "none" as any,
+  focusStyle: { outlineWidth: 0, outlineStyle: "none" as any },
+  focusVisibleStyle: { outlineWidth: 0, outlineStyle: "none" as any },
 });
 
 const UnderlineIndicator = styled(View, {
@@ -162,42 +182,26 @@ const UnderlineIndicator = styled(View, {
   backgroundColor: "$color9",
 });
 
-// NEUTRAL raised surface (deliberately outside the intent Theme: intent
-// sub-theme ramps stay hue-anchored at every step, so no step reads as a
-// neutral thumb). The intent hue rides on a border overlay child instead.
+// Selected fill (LC-71): accent-tinted thumb, never a border on every tab.
+// Neutral `$background` thumbs were indistinguishable from hover; selection
+// is the accent language (LC-05 / ViewSwitcher).
 const ThumbIndicator = styled(View, {
   name: "MpTabsThumb",
   position: "absolute",
-  backgroundColor: "$background",
-});
-
-// Intent-hued hairline: $color9 measures >=3:1 against the thumb in both
-// schemes (non-text UI contrast), where $color11 washes out on light.
-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",
-});
 
-// ── Maps ──────────────────────────────────────────────────────
-
-// knob sizeToken → label font size (one step down keeps desk-density labels)
-const fontSizeMap: Record<string, string> = {
-  $3: "$2",
-  $4: "$3",
-  $5: "$4",
-};
+  variants: {
+    active: {
+      true: { fontWeight: "700" },
+    },
+  } as const,
+});
 
 // ── Tabs Component ────────────────────────────────────────────
 
@@ -225,15 +229,23 @@ export function Tabs({
     (warning && "warning") ||
     (success && "success") ||
     undefined;
-  const { knobProps } = useResolvedKnobs({ intent, component: "Tabs", size, compact });
+  // Size and density are independent axes: `size` pins height/type;
+  // `compact` still steps spacing (and the default size when `size` is omitted).
+  const { knobProps, disabledState } = useResolvedKnobs({
+    intent,
+    component: "Tabs",
+    size,
+    compact,
+  });
+  const selectedTint = useAccentTintedSurface();
+  const onSelectedTint = useReadableTextOn(selectedTint);
 
   if (isWeb) ensureKeyboardModalityTracking();
   // Tab value currently showing the manual keyboard focus ring (see tracker note)
   const [kbFocusValue, setKbFocusValue] = React.useState<string | null>(null);
-  // Roving anchor: while a tab is focused it owns the tablist's single tab
-  // stop (Shift+Tab exits instead of hopping to the selected tab — matters
-  // in manual activation mode where focus and selection diverge).
   const [focusValue, setFocusValue] = React.useState<string | null>(null);
+  const [hoverValue, setHoverValue] = React.useState<string | null>(null);
+  const [pressValue, setPressValue] = React.useState<string | null>(null);
 
   const [internalValue, setInternalValue] = React.useState(
     () => defaultValue ?? items[0]?.value ?? "",
@@ -303,17 +315,22 @@ export function Tabs({
 
   const isUnderline = variant === "underline";
   const indicatorTheme = (intent ?? "accent") as ThemeName;
-  const sizeToken = knobProps.sizeToken;
-  // DG-LAY-04 / D-02 press-floor: small size knobs ($2/$3) shrink the visual
-  // strip below 44 — the trigger box is floored at 44 via the house
-  // pressTarget* channel (minHeight + negative vertical outset keeps the
-  // strip's layout height at the knob size; hit area extends past the strip).
-  const sizePx = (getTokens().size as any)?.[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;
+  // Size recipe owns chrome (LC-75). Explicit `size` already flowed into
+  // knobProps via useResolvedKnobs. Compact tightens gaps only (LC-76).
+  // Press floor is hitSlop, never painted minHeight.
+  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
+    ? undefined
+    : stackRadiusProps(activePosition, outerRadiusToken, "horizontal");
 
   // Web-only edge fades: a scroll-state mask keeps the fade background-agnostic
   const maskStyle: Record<string, string> | undefined =
@@ -338,24 +355,23 @@ export function Tabs({
         />
       </Theme>
     ) : (
-      <ThumbIndicator
-        x={activeLayout.x}
-        // The trigger's measured box includes the press-floor outset; the
-        // painted thumb keeps the knob-sized visual geometry.
-        y={activeLayout.y + triggerOutset}
-        width={activeLayout.width}
-        height={Math.max(0, activeLayout.height - triggerOutset * 2)}
-        borderRadius={radiusToken}
-        {...(knobProps.elevation !== undefined ? { elevation: knobProps.elevation } : undefined)}
-        {...(transition ? { transition } : undefined)}
-      >
-        <Theme name={indicatorTheme}>
-          <ThumbBorder borderRadius={radiusToken} />
-        </Theme>
-      </ThumbIndicator>
+      <Theme name={indicatorTheme}>
+        <ThumbIndicator
+          x={activeLayout.x}
+          y={activeLayout.y}
+          width={activeLayout.width}
+          height={activeLayout.height}
+          backgroundColor={selectedTint ?? "$color4"}
+          {...thumbRadius}
+          {...(knobProps.elevation !== undefined ? { elevation: knobProps.elevation } : undefined)}
+          {...(transition ? { transition } : undefined)}
+        />
+      </Theme>
     )
   ) : null;
 
+  if (items.length === 0) return null;
+
   return (
     <TamaguiTabs
       value={currentValue}
@@ -364,6 +380,10 @@ export function Tabs({
       activationMode={activationMode}
       width="100%"
       flexDirection="column"
+      data-tabs-variant={variant}
+      data-size-token={visualSizeToken}
+      data-density={knobProps.density}
+      data-visual-px={sizePx}
     >
       <StripWrapper underline={isUnderline}>
         <ScrollView
@@ -372,11 +392,10 @@ export function Tabs({
           showsHorizontalScrollIndicator={false}
           scrollEventThrottle={16}
           style={maskStyle as never}
-          // The scroller clips vertically; pad the content by the press-floor
-          // outset (and pull the scroller back by the same amount) so the
-          // triggers' enlarged hit boxes are never clipped. Net layout: zero.
-          contentContainerStyle={{ paddingVertical: triggerOutset }}
-          marginVertical={-triggerOutset}
+          // Slop padding keeps the 44px press floor from being clipped when
+          // the painted tab is smaller than the floor (LC-54 / nested scale).
+          contentContainerStyle={{ paddingVertical: slop }}
+          marginVertical={-slop}
           onScroll={(e) => {
             scrollMetrics.current.offset = e.nativeEvent.contentOffset.x;
             updateFades();
@@ -393,16 +412,17 @@ export function Tabs({
           <TabsList
             loop={loop}
             aria-label={t("Tabs")}
-            // Native: tamagui's Tabs.List only emits ARIA (web); VO/TalkBack
-            // need the explicit container role (tamagui maps `role` to the
-            // native accessibilityRole — raw accessibility* props are dropped).
+            data-tabs-list={variant}
+            data-size-token={visualSizeToken}
+            data-density={knobProps.density}
+            data-visual-px={sizePx}
             {...(!isWeb ? { role: "tablist" as const } : undefined)}
+            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,
@@ -412,6 +432,10 @@ export function Tabs({
             {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");
               // Roving tabindex (single tab stop): tamagui's vendored
               // roving-focus item hardcodes tabIndex=0 on every tab, making
               // each tab its own Tab stop. Exactly one tab stays in the page
@@ -427,76 +451,95 @@ export function Tabs({
               const isTabStop =
                 item.value === anchorValue &&
                 itemIndex === items.findIndex((i) => i.value === anchorValue);
+              const kbRing = kbFocusValue === item.value;
               return (
                 <Trigger
                   key={item.value}
                   value={item.value}
                   disabled={isDisabled}
+                  data-tab-position={position}
+                  data-kb-ring={kbRing ? "true" : undefined}
                   {...(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" as const,
                         "aria-selected": isActive,
                         ...(isDisabled ? { "aria-disabled": true } : undefined),
                       })}
-                  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 }
+                    : undefined)}
                   {...(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));
                         },
-                      }
-                    : undefined)}
-                  {...(kbFocusValue === item.value ? keyboardFocusRingProps : undefined)}
-                  {...(!isActive && !isDisabled
-                    ? isUnderline
-                      ? {
-                          hoverStyle: { backgroundColor: "$color2" },
-                          pressStyle: { backgroundColor: "$color3" },
-                        }
-                      : {
-                          hoverStyle: { backgroundColor: "$color4" },
-                          pressStyle: { backgroundColor: "$color5" },
-                        }
-                    : undefined)}
-                  borderRadius={isUnderline ? undefined : 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)),
                       }
                     : undefined)}
                 >
-                  <XStack alignItems="center" gap="$1.5" flexShrink={0}>
+                  <View
+                    {...cornerProps}
+                    // ONE chrome owner (LC-75/LC-79): the full control recipe
+                    // (height/paddingHorizontal/gap) lives on this inner row —
+                    // it also paints hover/press fill, so the pill covers the
+                    // padded box. The Trigger stays an unpainted hit target
+                    // (spreading the recipe there too doubled the horizontal
+                    // padding).
+                    {...knobProps.control}
+                    width="100%"
+                    flexDirection="row"
+                    alignItems="center"
+                    justifyContent="center"
+                    backgroundColor={
+                      isActive || isDisabled
+                        ? "transparent"
+                        : pressValue === item.value
+                          ? componentColors.interactive.hover
+                          : hoverValue === item.value
+                            ? componentColors.interactive.background
+                            : "transparent"
+                    }
+                    {...(kbRing ? keyboardFocusRingProps : undefined)}
+                  >
                     {item.icon}
                     <TabLabel
-                      fontSize={fontSize}
-                      fontFamily={knobProps.body.fontFamily}
-                      fontWeight={isActive ? "600" : knobProps.body.fontWeight}
+                      active={isActive}
+                      {...knobProps.controlType}
+                      fontFamily={knobProps.label.fontFamily}
+                      fontWeight={isActive ? "700" : knobProps.label.fontWeight}
                       color={
-                        isActive ? componentColors.text.primary : componentColors.text.secondary
+                        isDisabled
+                          ? componentColors.text.muted
+                          : isActive
+                            ? !isUnderline && onSelectedTint
+                              ? onSelectedTint
+                              : componentColors.text.primary
+                            : componentColors.text.secondary
                       }
                     >
                       {item.label}
                     </TabLabel>
                     {item.badge}
-                  </XStack>
+                  </View>
                 </Trigger>
               );
             })}
@@ -516,14 +559,26 @@ export function Tabs({
                 value={item.value}
                 forceMount
                 display={isActive ? "flex" : "none"}
-                paddingTop={gapToken}
+                {...knobProps.panelPadding}
+                tabIndex={-1}
+                outlineWidth={0}
+                focusStyle={{ outlineWidth: 0 }}
+                focusVisibleStyle={{ outlineWidth: 0 }}
               >
                 {item.content}
               </TamaguiTabs.Content>
             );
           }
           return (
-            <TamaguiTabs.Content key={item.value} value={item.value} paddingTop={gapToken}>
+            <TamaguiTabs.Content
+              key={item.value}
+              value={item.value}
+              {...knobProps.panelPadding}
+              tabIndex={-1}
+              outlineWidth={0}
+              focusStyle={{ outlineWidth: 0 }}
+              focusVisibleStyle={{ outlineWidth: 0 }}
+            >
               {item.content}
             </TamaguiTabs.Content>
           );