@yahoo/uds-mobile 2.9.0 → 2.11.0

package/dist/components/Tabs/Tab.js

@@ -0,0 +1,174 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { IconSlot } from "../IconSlot.js";
+import { Pressable as Pressable$1 } from "../Pressable.js";
+import { useTabSelectionContext, useTabsVisualContext } from "./tabsContexts.js";
+import { getMergedTabLayerStyle, getTabLayerStyle } from "./tabTheme.js";
+import { memo, useCallback, useEffect, useId, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useUnistyles } from "react-native-unistyles";
+//#region src/components/Tabs/Tab.tsx
+const PRIMARY_TAB_UNDERLINE_HEIGHT = 2;
+const CLEAR_SELECTION_CHROME = {
+	backgroundColor: "transparent",
+	borderWidth: 0,
+	borderColor: "transparent",
+	shadowOpacity: 0,
+	elevation: 0,
+	boxShadow: []
+};
+function TabLabel({ style, children }) {
+	if (typeof children === "string" || typeof children === "number") return /* @__PURE__ */ jsx(Text, {
+		style,
+		children
+	});
+	return children;
+}
+/**
+* **⚙️ Tab**
+*
+* @description
+* A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.
+*
+* @category Navigation
+* @platform mobile
+*/
+const Tab = memo(function Tab({ value, children, startIcon, endIcon, disabled, style, ...pressableRest }) {
+	const generatedId = useId();
+	const uid = value ?? `uds-tab-${generatedId}`;
+	const { variant: visualVariant, reduceMotion } = useTabsVisualContext();
+	const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } = useTabSelectionContext();
+	const { theme } = useUnistyles();
+	const [pressed, setPressed] = useState(false);
+	const selected = !disabled && selectedId === uid;
+	const active = selected ? "on" : "off";
+	const interaction = pressed ? "pressed" : "rest";
+	useEffect(() => {
+		registerTab(uid);
+		return () => {
+			unregisterTab(uid);
+		};
+	}, [
+		uid,
+		registerTab,
+		unregisterTab
+	]);
+	const rootBase = useMemo(() => getMergedTabLayerStyle(theme, visualVariant, active, "root", interaction), [
+		theme,
+		visualVariant,
+		active,
+		interaction
+	]);
+	const textStyle = useMemo(() => getMergedTabLayerStyle(theme, visualVariant, active, "rootText", interaction), [
+		theme,
+		visualVariant,
+		active,
+		interaction
+	]);
+	const iconStyle = useMemo(() => getMergedTabLayerStyle(theme, visualVariant, active, "icon", interaction), [
+		theme,
+		visualVariant,
+		active,
+		interaction
+	]);
+	const iconColor = (() => {
+		const c = iconStyle?.color;
+		if (c === void 0 || c === null) return;
+		return c;
+	})();
+	/** Inactive primary tabs use transparent underline tokens on web; RN has no CSS vars for that layer. */
+	const showPrimaryPerTabUnderline = visualVariant === "primary" && !(selected && !reduceMotion);
+	const primaryUnderlineColor = useMemo(() => {
+		if (visualVariant !== "primary") return;
+		if (selected && reduceMotion) {
+			const c = getTabLayerStyle(theme, "primary", "on", "rootText", "rest").color;
+			if (typeof c === "string") return c;
+		}
+		return "transparent";
+	}, [
+		visualVariant,
+		selected,
+		reduceMotion,
+		theme
+	]);
+	const rootStyle = useMemo(() => {
+		const base = {
+			...rootBase,
+			flexDirection: "row",
+			alignItems: "center",
+			flexShrink: 0,
+			zIndex: 1,
+			position: "relative"
+		};
+		if (selected && !reduceMotion) return {
+			...base,
+			...CLEAR_SELECTION_CHROME
+		};
+		return base;
+	}, [
+		rootBase,
+		selected,
+		reduceMotion
+	]);
+	const onLayout = useCallback((e) => {
+		setTabLayout(uid, e.nativeEvent.layout);
+	}, [uid, setTabLayout]);
+	const onPress = useCallback(() => {
+		if (disabled) return;
+		setSelectedId(uid);
+	}, [
+		disabled,
+		setSelectedId,
+		uid
+	]);
+	return /* @__PURE__ */ jsxs(Pressable$1, {
+		accessibilityRole: "tab",
+		accessibilityState: {
+			selected,
+			disabled: !!disabled
+		},
+		disabled,
+		onPress,
+		onPressIn: () => setPressed(true),
+		onPressOut: () => setPressed(false),
+		onLayout,
+		style: [rootStyle, style],
+		...pressableRest,
+		children: [
+			startIcon ? /* @__PURE__ */ jsx(IconSlot, {
+				icon: startIcon,
+				size: "sm",
+				style: iconStyle,
+				...iconColor !== void 0 ? { color: iconColor } : {}
+			}) : null,
+			/* @__PURE__ */ jsx(TabLabel, {
+				style: textStyle,
+				children
+			}),
+			endIcon ? /* @__PURE__ */ jsx(IconSlot, {
+				icon: endIcon,
+				size: "sm",
+				style: iconStyle,
+				...iconColor !== void 0 ? { color: iconColor } : {}
+			}) : null,
+			showPrimaryPerTabUnderline && primaryUnderlineColor && primaryUnderlineColor !== "transparent" ? /* @__PURE__ */ jsx(View, {
+				accessibilityElementsHidden: true,
+				importantForAccessibility: "no-hide-descendants",
+				pointerEvents: "none",
+				style: {
+					position: "absolute",
+					left: 0,
+					right: 0,
+					bottom: 0,
+					height: PRIMARY_TAB_UNDERLINE_HEIGHT,
+					backgroundColor: primaryUnderlineColor
+				}
+			}) : null
+		]
+	});
+});
+Tab.displayName = "Tab";
+//#endregion
+export { Tab };
+
+//# sourceMappingURL=Tab.js.map

package/dist/components/Tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","names":["RNText","Pressable"],"sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import type { UniversalTabProps } from '@yahoo/uds-types';\nimport type { ReactElement, ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';\nimport type { LayoutChangeEvent, PressableProps, TextStyle, ViewStyle } from 'react-native';\nimport { Text as RNText, View } from 'react-native';\n// eslint-disable-next-line uds/no-use-unistyles -- theme.components path lookups for tab layers\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport type { StyleProps } from '../../../generated/styles';\nimport type { IconSlotType } from '../IconSlot';\nimport { IconSlot } from '../IconSlot';\nimport { Pressable } from '../Pressable';\nimport { useTabSelectionContext, useTabsVisualContext } from './tabsContexts';\nimport { getMergedTabLayerStyle, getTabLayerStyle } from './tabTheme';\n\nconst PRIMARY_TAB_UNDERLINE_HEIGHT = 2;\n\ninterface TabProps\n  extends\n    Omit<PressableProps, 'children' | 'style' | 'disabled' | 'onPress'>,\n    Omit<UniversalTabProps, 'asChild' | 'className' | 'startIcon' | 'endIcon'> {\n  children: UniversalTabProps['children'];\n  startIcon?: IconSlotType;\n  endIcon?: IconSlotType;\n  style?: ViewStyle;\n}\n\nconst CLEAR_SELECTION_CHROME: ViewStyle = {\n  backgroundColor: 'transparent',\n  borderWidth: 0,\n  borderColor: 'transparent',\n  shadowOpacity: 0,\n  elevation: 0,\n  boxShadow: [],\n};\n\nfunction TabLabel({ style, children }: { style: TextStyle; children: ReactNode }) {\n  if (typeof children === 'string' || typeof children === 'number') {\n    return <RNText style={style}>{children}</RNText>;\n  }\n  return children as ReactElement;\n}\n\n/**\n * **⚙️ Tab**\n *\n * @description\n * A single selectable tab. Must be used inside {@link TabList} within {@link Tabs}.\n *\n * @category Navigation\n * @platform mobile\n */\nconst Tab = memo(function Tab({\n  value,\n  children,\n  startIcon,\n  endIcon,\n  disabled,\n  style,\n  ...pressableRest\n}: TabProps) {\n  const generatedId = useId();\n  const uid = value ?? `uds-tab-${generatedId}`;\n  const { variant: visualVariant, reduceMotion } = useTabsVisualContext();\n  const { selectedId, setSelectedId, registerTab, unregisterTab, setTabLayout } =\n    useTabSelectionContext();\n  const { theme } = useUnistyles();\n  const [pressed, setPressed] = useState(false);\n\n  const selected = !disabled && selectedId === uid;\n  const active: 'on' | 'off' = selected ? 'on' : 'off';\n  const interaction: 'rest' | 'pressed' = pressed ? 'pressed' : 'rest';\n\n  useEffect(() => {\n    registerTab(uid);\n    return () => {\n      unregisterTab(uid);\n    };\n  }, [uid, registerTab, unregisterTab]);\n\n  const rootBase = useMemo(\n    () => getMergedTabLayerStyle(theme, visualVariant, active, 'root', interaction) as ViewStyle,\n    [theme, visualVariant, active, interaction],\n  );\n  const textStyle = useMemo(\n    () =>\n      getMergedTabLayerStyle(theme, visualVariant, active, 'rootText', interaction) as TextStyle,\n    [theme, visualVariant, active, interaction],\n  );\n  const iconStyle = useMemo(\n    () => getMergedTabLayerStyle(theme, visualVariant, active, 'icon', interaction) as TextStyle,\n    [theme, visualVariant, active, interaction],\n  );\n\n  const iconColor = ((): StyleProps['color'] | undefined => {\n    const c = iconStyle?.color;\n    if (c === undefined || c === null) {\n      return undefined;\n    }\n    return c as StyleProps['color'];\n  })();\n\n  /** Inactive primary tabs use transparent underline tokens on web; RN has no CSS vars for that layer. */\n  const showPrimaryPerTabUnderline = visualVariant === 'primary' && !(selected && !reduceMotion);\n\n  const primaryUnderlineColor = useMemo(() => {\n    if (visualVariant !== 'primary') {\n      return undefined;\n    }\n    if (selected && reduceMotion) {\n      const onText = getTabLayerStyle(theme, 'primary', 'on', 'rootText', 'rest') as TextStyle;\n      const c = onText.color;\n      if (typeof c === 'string') {\n        return c;\n      }\n    }\n    return 'transparent';\n  }, [visualVariant, selected, reduceMotion, theme]);\n\n  const rootStyle = useMemo((): ViewStyle => {\n    const base: ViewStyle = {\n      ...rootBase,\n      flexDirection: 'row',\n      alignItems: 'center',\n      flexShrink: 0,\n      zIndex: 1,\n      position: 'relative',\n    };\n    if (selected && !reduceMotion) {\n      return { ...base, ...CLEAR_SELECTION_CHROME };\n    }\n    return base;\n  }, [rootBase, selected, reduceMotion]);\n\n  const onLayout = useCallback(\n    (e: LayoutChangeEvent) => {\n      setTabLayout(uid, e.nativeEvent.layout);\n    },\n    [uid, setTabLayout],\n  );\n\n  const onPress = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n    setSelectedId(uid);\n  }, [disabled, setSelectedId, uid]);\n\n  return (\n    <Pressable\n      accessibilityRole=\"tab\"\n      accessibilityState={{ selected, disabled: !!disabled }}\n      disabled={disabled}\n      onPress={onPress}\n      onPressIn={() => setPressed(true)}\n      onPressOut={() => setPressed(false)}\n      onLayout={onLayout}\n      style={[rootStyle, style]}\n      {...pressableRest}\n    >\n      {startIcon ? (\n        <IconSlot\n          icon={startIcon}\n          size=\"sm\"\n          style={iconStyle}\n          {...(iconColor !== undefined ? { color: iconColor } : {})}\n        />\n      ) : null}\n      <TabLabel style={textStyle}>{children}</TabLabel>\n      {endIcon ? (\n        <IconSlot\n          icon={endIcon}\n          size=\"sm\"\n          style={iconStyle}\n          {...(iconColor !== undefined ? { color: iconColor } : {})}\n        />\n      ) : null}\n      {showPrimaryPerTabUnderline &&\n      primaryUnderlineColor &&\n      primaryUnderlineColor !== 'transparent' ? (\n        <View\n          accessibilityElementsHidden\n          importantForAccessibility=\"no-hide-descendants\"\n          pointerEvents=\"none\"\n          style={{\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            height: PRIMARY_TAB_UNDERLINE_HEIGHT,\n            backgroundColor: primaryUnderlineColor,\n          }}\n        />\n      ) : null}\n    </Pressable>\n  );\n});\n\nTab.displayName = 'Tab';\n\nexport { Tab };\nexport type { TabProps };\n"],"mappings":"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"}

package/dist/components/Tabs/TabList.cjs

@@ -0,0 +1,142 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Tabs_tabsContexts = require("./tabsContexts.cjs");
+const require_components_Tabs_tabTheme = require("./tabTheme.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+let generated_styles = require("../../../generated/styles");
+let react_native_unistyles = require("react-native-unistyles");
+let react_native_reanimated = require("react-native-reanimated");
+react_native_reanimated = require_runtime.__toESM(react_native_reanimated);
+//#region src/components/Tabs/TabList.tsx
+const TAB_INDICATOR_MS = 240;
+const TAB_INDICATOR_EASING = react_native_reanimated.Easing.bezier(.2, 0, 0, 1);
+const PRIMARY_SLIDE_UNDERLINE_HEIGHT = 2;
+function TabListIndicator({ visualVariant, reduceMotion }) {
+	const { selectedId, tabLayouts } = require_components_Tabs_tabsContexts.useTabSelectionContext();
+	const { theme } = (0, react_native_unistyles.useUnistyles)();
+	const x = (0, react_native_reanimated.useSharedValue)(0);
+	const y = (0, react_native_reanimated.useSharedValue)(0);
+	const w = (0, react_native_reanimated.useSharedValue)(0);
+	const h = (0, react_native_reanimated.useSharedValue)(0);
+	const opacity = (0, react_native_reanimated.useSharedValue)(0);
+	(0, react.useEffect)(() => {
+		if (reduceMotion || !selectedId) {
+			opacity.value = (0, react_native_reanimated.withTiming)(0, {
+				duration: 120,
+				easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.quad)
+			});
+			return;
+		}
+		const layout = tabLayouts.get(selectedId);
+		if (!layout || layout.width <= 0 || layout.height <= 0) {
+			opacity.value = (0, react_native_reanimated.withTiming)(0, {
+				duration: 120,
+				easing: react_native_reanimated.Easing.out(react_native_reanimated.Easing.quad)
+			});
+			return;
+		}
+		const timing = {
+			duration: TAB_INDICATOR_MS,
+			easing: TAB_INDICATOR_EASING
+		};
+		x.value = (0, react_native_reanimated.withTiming)(layout.x, timing);
+		y.value = (0, react_native_reanimated.withTiming)(layout.y, timing);
+		w.value = (0, react_native_reanimated.withTiming)(layout.width, timing);
+		h.value = (0, react_native_reanimated.withTiming)(layout.height, timing);
+		opacity.value = (0, react_native_reanimated.withTiming)(1, timing);
+	}, [
+		selectedId,
+		tabLayouts,
+		reduceMotion,
+		x,
+		y,
+		w,
+		h,
+		opacity
+	]);
+	const indicatorChrome = (0, react.useMemo)(() => require_components_Tabs_tabTheme.getTabLayerStyle(theme, visualVariant, "on", "root", "rest"), [theme, visualVariant]);
+	const primaryAccentColor = (0, react.useMemo)(() => {
+		const t = require_components_Tabs_tabTheme.getTabLayerStyle(theme, "primary", "on", "rootText", "rest");
+		return typeof t.color === "string" ? t.color : "#7d2eff";
+	}, [theme]);
+	const animatedStyle = (0, react_native_reanimated.useAnimatedStyle)(() => ({
+		position: "absolute",
+		left: x.value,
+		top: y.value,
+		width: w.value,
+		height: h.value,
+		opacity: opacity.value,
+		zIndex: 0,
+		overflow: "hidden"
+	}));
+	if (reduceMotion) return null;
+	/** Primary: sliding accent line at bottom (web uses underline layer, not full pill). */
+	if (visualVariant === "primary") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+		pointerEvents: "none",
+		style: [animatedStyle, { backgroundColor: "transparent" }],
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+			style: {
+				flex: 1,
+				justifyContent: "flex-end"
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: {
+				height: PRIMARY_SLIDE_UNDERLINE_HEIGHT,
+				width: "100%",
+				backgroundColor: primaryAccentColor
+			} })
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native_reanimated.default.View, {
+		pointerEvents: "none",
+		style: animatedStyle,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, { style: [indicatorChrome, { flex: 1 }] })
+	});
+}
+/**
+* **⚙️ TabList**
+*
+* @description
+* Horizontal row of {@link Tab} items. Set `scrollable` when tabs may overflow the viewport.
+*
+* @category Navigation
+* @platform mobile
+*/
+const TabList = (0, react.memo)(function TabList({ children, scrollable = false, style, accessibilityLabel, ...viewProps }) {
+	const { variant: visualVariant, reduceMotion } = require_components_Tabs_tabsContexts.useTabsVisualContext();
+	generated_styles.tabsStyles.useVariants({ variant: visualVariant });
+	const row = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_native.View, {
+		style: {
+			flexDirection: "row",
+			alignItems: "center",
+			position: "relative",
+			...generated_styles.tabsStyles.root,
+			...visualVariant === "secondary" && !scrollable ? { alignSelf: "flex-start" } : {}
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabListIndicator, {
+			visualVariant,
+			reduceMotion
+		}), children]
+	});
+	if (scrollable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.ScrollView, {
+		horizontal: true,
+		showsHorizontalScrollIndicator: false,
+		accessibilityRole: "tablist",
+		accessibilityLabel,
+		...viewProps,
+		style,
+		children: row
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		accessibilityRole: "tablist",
+		accessibilityLabel,
+		style,
+		...viewProps,
+		children: row
+	});
+});
+TabList.displayName = "TabList";
+//#endregion
+exports.TabList = TabList;

package/dist/components/Tabs/TabList.d.cts

@@ -0,0 +1,24 @@
+
+import { UniversalTabListProps } from "../../types/dist/index.cjs";
+import * as _$react from "react";
+import { ViewProps, ViewStyle } from "react-native";
+
+//#region src/components/Tabs/TabList.d.ts
+/** RN View/ScrollView aria types differ from `React.AriaAttributes` on web; keep parity fields only. */
+interface TabListProps extends Omit<ViewProps, 'children' | 'style'>, Pick<UniversalTabListProps, 'scrollable'> {
+  children: UniversalTabListProps['children'];
+  style?: ViewStyle;
+}
+/**
+ * **⚙️ TabList**
+ *
+ * @description
+ * Horizontal row of {@link Tab} items. Set `scrollable` when tabs may overflow the viewport.
+ *
+ * @category Navigation
+ * @platform mobile
+ */
+declare const TabList: _$react.NamedExoticComponent<TabListProps>;
+//#endregion
+export { TabList, type TabListProps };
+//# sourceMappingURL=TabList.d.cts.map

package/dist/components/Tabs/TabList.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.d.cts","names":[],"sources":["../../../src/components/Tabs/TabList.tsx"],"mappings":";;;;;;;UAsBU,YAAA,SACA,IAAA,CAAK,SAAA,yBAAkC,IAAA,CAAK,qBAAA;EACpD,QAAA,EAAU,qBAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;cAiGJ,OAAA,EAAO,OAAA,CAAA,oBAAA,CAAA,YAAA"}

package/dist/components/Tabs/TabList.d.ts

@@ -0,0 +1,24 @@
+
+import { UniversalTabListProps } from "../../types/dist/index.js";
+import * as _$react from "react";
+import { ViewProps, ViewStyle } from "react-native";
+
+//#region src/components/Tabs/TabList.d.ts
+/** RN View/ScrollView aria types differ from `React.AriaAttributes` on web; keep parity fields only. */
+interface TabListProps extends Omit<ViewProps, 'children' | 'style'>, Pick<UniversalTabListProps, 'scrollable'> {
+  children: UniversalTabListProps['children'];
+  style?: ViewStyle;
+}
+/**
+ * **⚙️ TabList**
+ *
+ * @description
+ * Horizontal row of {@link Tab} items. Set `scrollable` when tabs may overflow the viewport.
+ *
+ * @category Navigation
+ * @platform mobile
+ */
+declare const TabList: _$react.NamedExoticComponent<TabListProps>;
+//#endregion
+export { TabList, type TabListProps };
+//# sourceMappingURL=TabList.d.ts.map

package/dist/components/Tabs/TabList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.d.ts","names":[],"sources":["../../../src/components/Tabs/TabList.tsx"],"mappings":";;;;;;;UAsBU,YAAA,SACA,IAAA,CAAK,SAAA,yBAAkC,IAAA,CAAK,qBAAA;EACpD,QAAA,EAAU,qBAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;cAiGJ,OAAA,EAAO,OAAA,CAAA,oBAAA,CAAA,YAAA"}

package/dist/components/Tabs/TabList.js

@@ -0,0 +1,141 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useTabSelectionContext, useTabsVisualContext } from "./tabsContexts.js";
+import { getTabLayerStyle } from "./tabTheme.js";
+import { memo, useEffect, useMemo } from "react";
+import { ScrollView, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { tabsStyles } from "../../../generated/styles";
+import { useUnistyles } from "react-native-unistyles";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+//#region src/components/Tabs/TabList.tsx
+const TAB_INDICATOR_MS = 240;
+const TAB_INDICATOR_EASING = Easing.bezier(.2, 0, 0, 1);
+const PRIMARY_SLIDE_UNDERLINE_HEIGHT = 2;
+function TabListIndicator({ visualVariant, reduceMotion }) {
+	const { selectedId, tabLayouts } = useTabSelectionContext();
+	const { theme } = useUnistyles();
+	const x = useSharedValue(0);
+	const y = useSharedValue(0);
+	const w = useSharedValue(0);
+	const h = useSharedValue(0);
+	const opacity = useSharedValue(0);
+	useEffect(() => {
+		if (reduceMotion || !selectedId) {
+			opacity.value = withTiming(0, {
+				duration: 120,
+				easing: Easing.out(Easing.quad)
+			});
+			return;
+		}
+		const layout = tabLayouts.get(selectedId);
+		if (!layout || layout.width <= 0 || layout.height <= 0) {
+			opacity.value = withTiming(0, {
+				duration: 120,
+				easing: Easing.out(Easing.quad)
+			});
+			return;
+		}
+		const timing = {
+			duration: TAB_INDICATOR_MS,
+			easing: TAB_INDICATOR_EASING
+		};
+		x.value = withTiming(layout.x, timing);
+		y.value = withTiming(layout.y, timing);
+		w.value = withTiming(layout.width, timing);
+		h.value = withTiming(layout.height, timing);
+		opacity.value = withTiming(1, timing);
+	}, [
+		selectedId,
+		tabLayouts,
+		reduceMotion,
+		x,
+		y,
+		w,
+		h,
+		opacity
+	]);
+	const indicatorChrome = useMemo(() => getTabLayerStyle(theme, visualVariant, "on", "root", "rest"), [theme, visualVariant]);
+	const primaryAccentColor = useMemo(() => {
+		const t = getTabLayerStyle(theme, "primary", "on", "rootText", "rest");
+		return typeof t.color === "string" ? t.color : "#7d2eff";
+	}, [theme]);
+	const animatedStyle = useAnimatedStyle(() => ({
+		position: "absolute",
+		left: x.value,
+		top: y.value,
+		width: w.value,
+		height: h.value,
+		opacity: opacity.value,
+		zIndex: 0,
+		overflow: "hidden"
+	}));
+	if (reduceMotion) return null;
+	/** Primary: sliding accent line at bottom (web uses underline layer, not full pill). */
+	if (visualVariant === "primary") return /* @__PURE__ */ jsx(Animated.View, {
+		pointerEvents: "none",
+		style: [animatedStyle, { backgroundColor: "transparent" }],
+		children: /* @__PURE__ */ jsx(View, {
+			style: {
+				flex: 1,
+				justifyContent: "flex-end"
+			},
+			children: /* @__PURE__ */ jsx(View, { style: {
+				height: PRIMARY_SLIDE_UNDERLINE_HEIGHT,
+				width: "100%",
+				backgroundColor: primaryAccentColor
+			} })
+		})
+	});
+	return /* @__PURE__ */ jsx(Animated.View, {
+		pointerEvents: "none",
+		style: animatedStyle,
+		children: /* @__PURE__ */ jsx(View, { style: [indicatorChrome, { flex: 1 }] })
+	});
+}
+/**
+* **⚙️ TabList**
+*
+* @description
+* Horizontal row of {@link Tab} items. Set `scrollable` when tabs may overflow the viewport.
+*
+* @category Navigation
+* @platform mobile
+*/
+const TabList = memo(function TabList({ children, scrollable = false, style, accessibilityLabel, ...viewProps }) {
+	const { variant: visualVariant, reduceMotion } = useTabsVisualContext();
+	tabsStyles.useVariants({ variant: visualVariant });
+	const row = /* @__PURE__ */ jsxs(View, {
+		style: {
+			flexDirection: "row",
+			alignItems: "center",
+			position: "relative",
+			...tabsStyles.root,
+			...visualVariant === "secondary" && !scrollable ? { alignSelf: "flex-start" } : {}
+		},
+		children: [/* @__PURE__ */ jsx(TabListIndicator, {
+			visualVariant,
+			reduceMotion
+		}), children]
+	});
+	if (scrollable) return /* @__PURE__ */ jsx(ScrollView, {
+		horizontal: true,
+		showsHorizontalScrollIndicator: false,
+		accessibilityRole: "tablist",
+		accessibilityLabel,
+		...viewProps,
+		style,
+		children: row
+	});
+	return /* @__PURE__ */ jsx(View, {
+		accessibilityRole: "tablist",
+		accessibilityLabel,
+		style,
+		...viewProps,
+		children: row
+	});
+});
+TabList.displayName = "TabList";
+//#endregion
+export { TabList };
+
+//# sourceMappingURL=TabList.js.map

package/dist/components/Tabs/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.js","names":[],"sources":["../../../src/components/Tabs/TabList.tsx"],"sourcesContent":["import type { UniversalTabListProps } from '@yahoo/uds-types';\nimport { memo, useEffect, useMemo } from 'react';\nimport type { ViewProps, ViewStyle } from 'react-native';\nimport { ScrollView, View } from 'react-native';\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated';\n// eslint-disable-next-line uds/no-use-unistyles -- theme.components path lookups for tab indicator\nimport { useUnistyles } from 'react-native-unistyles';\n\nimport { tabsStyles } from '../../../generated/styles';\nimport { useTabSelectionContext, useTabsVisualContext } from './tabsContexts';\nimport { getTabLayerStyle } from './tabTheme';\n\nconst TAB_INDICATOR_MS = 240;\nconst TAB_INDICATOR_EASING = Easing.bezier(0.2, 0, 0, 1);\nconst PRIMARY_SLIDE_UNDERLINE_HEIGHT = 2;\n\n/** RN View/ScrollView aria types differ from `React.AriaAttributes` on web; keep parity fields only. */\ninterface TabListProps\n  extends Omit<ViewProps, 'children' | 'style'>, Pick<UniversalTabListProps, 'scrollable'> {\n  children: UniversalTabListProps['children'];\n  style?: ViewStyle;\n}\n\nfunction TabListIndicator({\n  visualVariant,\n  reduceMotion,\n}: {\n  visualVariant: 'primary' | 'secondary';\n  reduceMotion: boolean;\n}) {\n  const { selectedId, tabLayouts } = useTabSelectionContext();\n  const { theme } = useUnistyles();\n  const x = useSharedValue(0);\n  const y = useSharedValue(0);\n  const w = useSharedValue(0);\n  const h = useSharedValue(0);\n  const opacity = useSharedValue(0);\n\n  useEffect(() => {\n    if (reduceMotion || !selectedId) {\n      opacity.value = withTiming(0, { duration: 120, easing: Easing.out(Easing.quad) });\n      return;\n    }\n    const layout = tabLayouts.get(selectedId);\n    if (!layout || layout.width <= 0 || layout.height <= 0) {\n      opacity.value = withTiming(0, { duration: 120, easing: Easing.out(Easing.quad) });\n      return;\n    }\n    const timing = { duration: TAB_INDICATOR_MS, easing: TAB_INDICATOR_EASING };\n    x.value = withTiming(layout.x, timing);\n    y.value = withTiming(layout.y, timing);\n    w.value = withTiming(layout.width, timing);\n    h.value = withTiming(layout.height, timing);\n    opacity.value = withTiming(1, timing);\n  }, [selectedId, tabLayouts, reduceMotion, x, y, w, h, opacity]);\n\n  const indicatorChrome = useMemo(\n    () => getTabLayerStyle(theme, visualVariant, 'on', 'root', 'rest') as ViewStyle,\n    [theme, visualVariant],\n  );\n\n  const primaryAccentColor = useMemo(() => {\n    const t = getTabLayerStyle(theme, 'primary', 'on', 'rootText', 'rest') as { color?: string };\n    return typeof t.color === 'string' ? t.color : '#7d2eff';\n  }, [theme]);\n\n  const animatedStyle = useAnimatedStyle(() => ({\n    position: 'absolute' as const,\n    left: x.value,\n    top: y.value,\n    width: w.value,\n    height: h.value,\n    opacity: opacity.value,\n    zIndex: 0,\n    overflow: 'hidden' as const,\n  }));\n\n  if (reduceMotion) {\n    return null;\n  }\n\n  /** Primary: sliding accent line at bottom (web uses underline layer, not full pill). */\n  if (visualVariant === 'primary') {\n    return (\n      <Animated.View\n        pointerEvents=\"none\"\n        style={[animatedStyle, { backgroundColor: 'transparent' }]}\n      >\n        <View style={{ flex: 1, justifyContent: 'flex-end' }}>\n          <View\n            style={{\n              height: PRIMARY_SLIDE_UNDERLINE_HEIGHT,\n              width: '100%',\n              backgroundColor: primaryAccentColor,\n            }}\n          />\n        </View>\n      </Animated.View>\n    );\n  }\n\n  return (\n    <Animated.View pointerEvents=\"none\" style={animatedStyle}>\n      <View style={[indicatorChrome, { flex: 1 }]} />\n    </Animated.View>\n  );\n}\n\n/**\n * **⚙️ TabList**\n *\n * @description\n * Horizontal row of {@link Tab} items. Set `scrollable` when tabs may overflow the viewport.\n *\n * @category Navigation\n * @platform mobile\n */\nconst TabList = memo(function TabList({\n  children,\n  scrollable = false,\n  style,\n  accessibilityLabel,\n  ...viewProps\n}: TabListProps) {\n  const { variant: visualVariant, reduceMotion } = useTabsVisualContext();\n  tabsStyles.useVariants({ variant: visualVariant });\n\n  const rowStyle: ViewStyle = {\n    flexDirection: 'row',\n    alignItems: 'center',\n    position: 'relative',\n    ...tabsStyles.root,\n    // Secondary track tokens include horizontal padding; shrink-wrap so inset matches on both ends.\n    ...(visualVariant === 'secondary' && !scrollable ? { alignSelf: 'flex-start' as const } : {}),\n  };\n\n  const row = (\n    <View style={rowStyle}>\n      <TabListIndicator visualVariant={visualVariant} reduceMotion={reduceMotion} />\n      {children}\n    </View>\n  );\n\n  if (scrollable) {\n    return (\n      <ScrollView\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        accessibilityRole=\"tablist\"\n        accessibilityLabel={accessibilityLabel}\n        {...viewProps}\n        style={style}\n      >\n        {row}\n      </ScrollView>\n    );\n  }\n\n  return (\n    <View\n      accessibilityRole=\"tablist\"\n      accessibilityLabel={accessibilityLabel}\n      style={style}\n      {...viewProps}\n    >\n      {row}\n    </View>\n  );\n});\n\nTabList.displayName = 'TabList';\n\nexport { TabList };\nexport type { TabListProps };\n"],"mappings":"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"}

package/dist/components/Tabs/TabPanel.cjs

@@ -0,0 +1,31 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_components_Tabs_tabsContexts = require("./tabsContexts.cjs");
+let react = require("react");
+let react_native = require("react-native");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Tabs/TabPanel.tsx
+/**
+* **⚙️ TabPanel**
+*
+* @description
+* Content associated with a tab id. Only the panel whose `tabId` matches the current
+* selection is rendered.
+*
+* @category Navigation
+* @platform mobile
+*/
+const TabPanel = (0, react.memo)(function TabPanel({ tabId, children, style, ...viewProps }) {
+	const { selectedId } = require_components_Tabs_tabsContexts.useTabSelectionContext();
+	if (selectedId !== tabId) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_native.View, {
+		accessibilityRole: "none",
+		style,
+		...viewProps,
+		children
+	});
+});
+TabPanel.displayName = "TabPanel";
+//#endregion
+exports.TabPanel = TabPanel;

package/dist/components/Tabs/TabPanel.d.cts

@@ -0,0 +1,24 @@
+
+import { UniversalTabPanelProps } from "../../types/dist/index.cjs";
+import * as _$react from "react";
+import { ViewProps, ViewStyle } from "react-native";
+
+//#region src/components/Tabs/TabPanel.d.ts
+interface TabPanelProps extends Omit<UniversalTabPanelProps, 'className'>, Omit<ViewProps, 'style' | 'children'> {
+  children: UniversalTabPanelProps['children'];
+  style?: ViewStyle;
+}
+/**
+ * **⚙️ TabPanel**
+ *
+ * @description
+ * Content associated with a tab id. Only the panel whose `tabId` matches the current
+ * selection is rendered.
+ *
+ * @category Navigation
+ * @platform mobile
+ */
+declare const TabPanel: _$react.NamedExoticComponent<TabPanelProps>;
+//#endregion
+export { TabPanel, type TabPanelProps };
+//# sourceMappingURL=TabPanel.d.cts.map

package/dist/components/Tabs/TabPanel.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.cts","names":[],"sources":["../../../src/components/Tabs/TabPanel.tsx"],"mappings":";;;;;;UAOU,aAAA,SACA,IAAA,CAAK,sBAAA,gBAAsC,IAAA,CAAK,SAAA;EACxD,QAAA,EAAU,sBAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;;cAaJ,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}

package/dist/components/Tabs/TabPanel.d.ts

@@ -0,0 +1,24 @@
+
+import { UniversalTabPanelProps } from "../../types/dist/index.js";
+import * as _$react from "react";
+import { ViewProps, ViewStyle } from "react-native";
+
+//#region src/components/Tabs/TabPanel.d.ts
+interface TabPanelProps extends Omit<UniversalTabPanelProps, 'className'>, Omit<ViewProps, 'style' | 'children'> {
+  children: UniversalTabPanelProps['children'];
+  style?: ViewStyle;
+}
+/**
+ * **⚙️ TabPanel**
+ *
+ * @description
+ * Content associated with a tab id. Only the panel whose `tabId` matches the current
+ * selection is rendered.
+ *
+ * @category Navigation
+ * @platform mobile
+ */
+declare const TabPanel: _$react.NamedExoticComponent<TabPanelProps>;
+//#endregion
+export { TabPanel, type TabPanelProps };
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/components/Tabs/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","names":[],"sources":["../../../src/components/Tabs/TabPanel.tsx"],"mappings":";;;;;;UAOU,aAAA,SACA,IAAA,CAAK,sBAAA,gBAAsC,IAAA,CAAK,SAAA;EACxD,QAAA,EAAU,sBAAA;EACV,KAAA,GAAQ,SAAA;AAAA;;;;;;;;;;;cAaJ,QAAA,EAAQ,OAAA,CAAA,oBAAA,CAAA,aAAA"}