@yahoo/uds-mobile 2.9.0 → 2.10.0

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"}

package/dist/components/Tabs/TabPanel.js

@@ -0,0 +1,31 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { useTabSelectionContext } from "./tabsContexts.js";
+import { memo } from "react";
+import { View } from "react-native";
+import { jsx } from "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 = memo(function TabPanel({ tabId, children, style, ...viewProps }) {
+	const { selectedId } = useTabSelectionContext();
+	if (selectedId !== tabId) return null;
+	return /* @__PURE__ */ jsx(View, {
+		accessibilityRole: "none",
+		style,
+		...viewProps,
+		children
+	});
+});
+TabPanel.displayName = "TabPanel";
+//#endregion
+export { TabPanel };
+
+//# sourceMappingURL=TabPanel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.js","names":[],"sources":["../../../src/components/Tabs/TabPanel.tsx"],"sourcesContent":["import type { UniversalTabPanelProps } from '@yahoo/uds-types';\nimport { memo } from 'react';\nimport type { ViewProps, ViewStyle } from 'react-native';\nimport { View } from 'react-native';\n\nimport { useTabSelectionContext } from './tabsContexts';\n\ninterface TabPanelProps\n  extends Omit<UniversalTabPanelProps, 'className'>, Omit<ViewProps, 'style' | 'children'> {\n  children: UniversalTabPanelProps['children'];\n  style?: ViewStyle;\n}\n\n/**\n * **⚙️ TabPanel**\n *\n * @description\n * Content associated with a tab id. Only the panel whose `tabId` matches the current\n * selection is rendered.\n *\n * @category Navigation\n * @platform mobile\n */\nconst TabPanel = memo(function TabPanel({ tabId, children, style, ...viewProps }: TabPanelProps) {\n  const { selectedId } = useTabSelectionContext();\n\n  if (selectedId !== tabId) {\n    return null;\n  }\n\n  return (\n    <View accessibilityRole=\"none\" style={style} {...viewProps}>\n      {children}\n    </View>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\n\nexport { TabPanel };\nexport type { TabPanelProps };\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,MAAM,WAAW,KAAK,SAAS,SAAS,EAAE,OAAO,UAAU,OAAO,GAAG,aAA4B;CAC/F,MAAM,EAAE,eAAe,wBAAwB;AAE/C,KAAI,eAAe,MACjB,QAAO;AAGT,QACE,oBAAC,MAAD;EAAM,mBAAkB;EAAc;EAAO,GAAI;EAC9C;EACI,CAAA;EAET;AAEF,SAAS,cAAc"}

package/dist/components/Tabs/Tabs.cjs

@@ -0,0 +1,53 @@
+/*! © 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_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/Tabs/Tabs.tsx
+/**
+* **⚙️ Tabs**
+*
+* @description
+* Organizes content into sections with a tab list and tab panels. Supports `primary` and
+* `secondary` variants. When `reduceMotion` is false, a sliding indicator animates between
+* tabs (240ms, cubic-bezier(0.2, 0, 0, 1)) to match web UDS.
+*
+* @category Navigation
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Tabs, TabList, Tab, TabPanel } from '@yahoo/uds-mobile/Tabs';
+*
+* <Tabs variant="primary" defaultSelectedId="home">
+*   <TabList accessibilityLabel="Main">
+*     <Tab value="home">Home</Tab>
+*     <Tab value="about">About</Tab>
+*   </TabList>
+*   <TabPanel tabId="home">Home content</TabPanel>
+*   <TabPanel tabId="about">About content</TabPanel>
+* </Tabs>
+* ```
+*/
+const Tabs = (0, react.memo)(function Tabs({ children, variant = "primary", reduceMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
+	const visual = (0, react.useMemo)(() => ({
+		variant,
+		reduceMotion
+	}), [variant, reduceMotion]);
+	const selection = require_components_Tabs_tabsContexts.useTabSelectionState({
+		defaultSelectedId,
+		selectedId,
+		onSelectionChange
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Tabs_tabsContexts.TabsVisualContext.Provider, {
+		value: visual,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Tabs_tabsContexts.TabSelectionContext.Provider, {
+			value: selection,
+			children
+		})
+	});
+});
+Tabs.displayName = "Tabs";
+//#endregion
+exports.Tabs = Tabs;

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

@@ -0,0 +1,35 @@
+
+import { UniversalTabsProps } from "../../types/dist/index.cjs";
+import * as _$react from "react";
+
+//#region src/components/Tabs/Tabs.d.ts
+interface TabsProps extends UniversalTabsProps {}
+/**
+ * **⚙️ Tabs**
+ *
+ * @description
+ * Organizes content into sections with a tab list and tab panels. Supports `primary` and
+ * `secondary` variants. When `reduceMotion` is false, a sliding indicator animates between
+ * tabs (240ms, cubic-bezier(0.2, 0, 0, 1)) to match web UDS.
+ *
+ * @category Navigation
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Tabs, TabList, Tab, TabPanel } from '@yahoo/uds-mobile/Tabs';
+ *
+ * <Tabs variant="primary" defaultSelectedId="home">
+ *   <TabList accessibilityLabel="Main">
+ *     <Tab value="home">Home</Tab>
+ *     <Tab value="about">About</Tab>
+ *   </TabList>
+ *   <TabPanel tabId="home">Home content</TabPanel>
+ *   <TabPanel tabId="about">About content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: _$react.NamedExoticComponent<TabsProps>;
+//#endregion
+export { Tabs, type TabsProps };
+//# sourceMappingURL=Tabs.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.cts","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"mappings":";;;;;UAMU,SAAA,SAAkB,kBAAA;;AAN+B;;;;;AAMb;;;;;;;;;;;;;;;;;;;cA2BxC,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}

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

@@ -0,0 +1,35 @@
+
+import { UniversalTabsProps } from "../../types/dist/index.js";
+import * as _$react from "react";
+
+//#region src/components/Tabs/Tabs.d.ts
+interface TabsProps extends UniversalTabsProps {}
+/**
+ * **⚙️ Tabs**
+ *
+ * @description
+ * Organizes content into sections with a tab list and tab panels. Supports `primary` and
+ * `secondary` variants. When `reduceMotion` is false, a sliding indicator animates between
+ * tabs (240ms, cubic-bezier(0.2, 0, 0, 1)) to match web UDS.
+ *
+ * @category Navigation
+ * @platform mobile
+ *
+ * @example
+ * ```tsx
+ * import { Tabs, TabList, Tab, TabPanel } from '@yahoo/uds-mobile/Tabs';
+ *
+ * <Tabs variant="primary" defaultSelectedId="home">
+ *   <TabList accessibilityLabel="Main">
+ *     <Tab value="home">Home</Tab>
+ *     <Tab value="about">About</Tab>
+ *   </TabList>
+ *   <TabPanel tabId="home">Home content</TabPanel>
+ *   <TabPanel tabId="about">About content</TabPanel>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: _$react.NamedExoticComponent<TabsProps>;
+//#endregion
+export { Tabs, type TabsProps };
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"mappings":";;;;;UAMU,SAAA,SAAkB,kBAAA;;AAN+B;;;;;AAMb;;;;;;;;;;;;;;;;;;;cA2BxC,IAAA,EAAI,OAAA,CAAA,oBAAA,CAAA,SAAA"}

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,53 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { TabSelectionContext, TabsVisualContext, useTabSelectionState } from "./tabsContexts.js";
+import { memo, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Tabs/Tabs.tsx
+/**
+* **⚙️ Tabs**
+*
+* @description
+* Organizes content into sections with a tab list and tab panels. Supports `primary` and
+* `secondary` variants. When `reduceMotion` is false, a sliding indicator animates between
+* tabs (240ms, cubic-bezier(0.2, 0, 0, 1)) to match web UDS.
+*
+* @category Navigation
+* @platform mobile
+*
+* @example
+* ```tsx
+* import { Tabs, TabList, Tab, TabPanel } from '@yahoo/uds-mobile/Tabs';
+*
+* <Tabs variant="primary" defaultSelectedId="home">
+*   <TabList accessibilityLabel="Main">
+*     <Tab value="home">Home</Tab>
+*     <Tab value="about">About</Tab>
+*   </TabList>
+*   <TabPanel tabId="home">Home content</TabPanel>
+*   <TabPanel tabId="about">About content</TabPanel>
+* </Tabs>
+* ```
+*/
+const Tabs = memo(function Tabs({ children, variant = "primary", reduceMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
+	const visual = useMemo(() => ({
+		variant,
+		reduceMotion
+	}), [variant, reduceMotion]);
+	const selection = useTabSelectionState({
+		defaultSelectedId,
+		selectedId,
+		onSelectionChange
+	});
+	return /* @__PURE__ */ jsx(TabsVisualContext.Provider, {
+		value: visual,
+		children: /* @__PURE__ */ jsx(TabSelectionContext.Provider, {
+			value: selection,
+			children
+		})
+	});
+});
+Tabs.displayName = "Tabs";
+//#endregion
+export { Tabs };
+
+//# sourceMappingURL=Tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","names":[],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import type { UniversalTabsProps } from '@yahoo/uds-types';\nimport { memo, useMemo } from 'react';\n\nimport { TabSelectionContext, TabsVisualContext, useTabSelectionState } from './tabsContexts';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type -- alias for doc extraction / parity with web\ninterface TabsProps extends UniversalTabsProps {}\n\n/**\n * **⚙️ Tabs**\n *\n * @description\n * Organizes content into sections with a tab list and tab panels. Supports `primary` and\n * `secondary` variants. When `reduceMotion` is false, a sliding indicator animates between\n * tabs (240ms, cubic-bezier(0.2, 0, 0, 1)) to match web UDS.\n *\n * @category Navigation\n * @platform mobile\n *\n * @example\n * ```tsx\n * import { Tabs, TabList, Tab, TabPanel } from '@yahoo/uds-mobile/Tabs';\n *\n * <Tabs variant=\"primary\" defaultSelectedId=\"home\">\n *   <TabList accessibilityLabel=\"Main\">\n *     <Tab value=\"home\">Home</Tab>\n *     <Tab value=\"about\">About</Tab>\n *   </TabList>\n *   <TabPanel tabId=\"home\">Home content</TabPanel>\n *   <TabPanel tabId=\"about\">About content</TabPanel>\n * </Tabs>\n * ```\n */\nconst Tabs = memo(function Tabs({\n  children,\n  variant = 'primary',\n  reduceMotion = false,\n  defaultSelectedId,\n  selectedId,\n  onSelectionChange,\n}: TabsProps) {\n  const visual = useMemo(() => ({ variant, reduceMotion }), [variant, reduceMotion]);\n  const selection = useTabSelectionState({\n    defaultSelectedId,\n    selectedId,\n    onSelectionChange,\n  });\n\n  return (\n    <TabsVisualContext.Provider value={visual}>\n      <TabSelectionContext.Provider value={selection}>{children}</TabSelectionContext.Provider>\n    </TabsVisualContext.Provider>\n  );\n});\n\nTabs.displayName = 'Tabs';\n\nexport { Tabs };\nexport type { TabsProps };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,OAAO,KAAK,SAAS,KAAK,EAC9B,UACA,UAAU,WACV,eAAe,OACf,mBACA,YACA,qBACY;CACZ,MAAM,SAAS,eAAe;EAAE;EAAS;EAAc,GAAG,CAAC,SAAS,aAAa,CAAC;CAClF,MAAM,YAAY,qBAAqB;EACrC;EACA;EACA;EACD,CAAC;AAEF,QACE,oBAAC,kBAAkB,UAAnB;EAA4B,OAAO;YACjC,oBAAC,oBAAoB,UAArB;GAA8B,OAAO;GAAY;GAAwC,CAAA;EAC9D,CAAA;EAE/B;AAEF,KAAK,cAAc"}

package/dist/components/Tabs/index.cjs

@@ -0,0 +1,10 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_components_Tabs_Tab = require("./Tab.cjs");
+const require_components_Tabs_TabList = require("./TabList.cjs");
+const require_components_Tabs_TabPanel = require("./TabPanel.cjs");
+const require_components_Tabs_Tabs = require("./Tabs.cjs");
+exports.Tab = require_components_Tabs_Tab.Tab;
+exports.TabList = require_components_Tabs_TabList.TabList;
+exports.TabPanel = require_components_Tabs_TabPanel.TabPanel;
+exports.Tabs = require_components_Tabs_Tabs.Tabs;

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

@@ -0,0 +1,13 @@
+
+import { UniversalTabsVariant } from "../../types/dist/index.cjs";
+import { Tab, TabProps } from "./Tab.cjs";
+import { TabList, TabListProps } from "./TabList.cjs";
+import { TabPanel, TabPanelProps } from "./TabPanel.cjs";
+import { Tabs, TabsProps } from "./Tabs.cjs";
+
+//#region src/components/Tabs/index.d.ts
+/** @alias {@link UniversalTabsVariant} — matches web `TabsVariant` naming */
+type TabsVariant = UniversalTabsVariant;
+//#endregion
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TabsVariant, type UniversalTabsVariant };
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","names":[],"sources":["../../../src/components/Tabs/index.ts"],"mappings":";;;;;;;;;KAQY,WAAA,GAAc,oBAAA"}

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

@@ -0,0 +1,13 @@
+
+import { UniversalTabsVariant } from "../../types/dist/index.js";
+import { Tab, TabProps } from "./Tab.js";
+import { TabList, TabListProps } from "./TabList.js";
+import { TabPanel, TabPanelProps } from "./TabPanel.js";
+import { Tabs, TabsProps } from "./Tabs.js";
+
+//#region src/components/Tabs/index.d.ts
+/** @alias {@link UniversalTabsVariant} — matches web `TabsVariant` naming */
+type TabsVariant = UniversalTabsVariant;
+//#endregion
+export { Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TabsVariant, type UniversalTabsVariant };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/Tabs/index.ts"],"mappings":";;;;;;;;;KAQY,WAAA,GAAc,oBAAA"}

package/dist/components/Tabs/index.js

@@ -0,0 +1,6 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { Tab } from "./Tab.js";
+import { TabList } from "./TabList.js";
+import { TabPanel } from "./TabPanel.js";
+import { Tabs } from "./Tabs.js";
+export { Tab, TabList, TabPanel, Tabs };

package/dist/components/Tabs/tabTheme.cjs

@@ -0,0 +1,29 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/components/Tabs/tabTheme.ts
+function tabComponentPath(visual, active, layer, state) {
+	return `tab/variant/${visual}/active/${active}/${layer === "rootText" ? "rootText" : layer}/${state}`;
+}
+/** Default tab dimensions / spacing from tokens (`tab/size/default/...`). */
+function getTabSizeLayerStyle(theme, layer) {
+	const path = `tab/size/default/${layer}/rest`;
+	const s = theme.components[path];
+	return s && typeof s === "object" ? s : {};
+}
+/** Variant + interaction layer (active on/off, pressed/rest). */
+function getTabLayerStyle(theme, visual, active, layer, state) {
+	const path = tabComponentPath(visual, active, layer, state);
+	const s = theme.components[path];
+	return s && typeof s === "object" ? s : {};
+}
+/** Size tokens + variant state (matches web stacking size + variant classes). */
+function getMergedTabLayerStyle(theme, visual, active, layer, state) {
+	return {
+		...getTabSizeLayerStyle(theme, layer === "rootText" ? "rootText" : layer === "icon" ? "icon" : "root"),
+		...getTabLayerStyle(theme, visual, active, layer, state)
+	};
+}
+//#endregion
+exports.getMergedTabLayerStyle = getMergedTabLayerStyle;
+exports.getTabLayerStyle = getTabLayerStyle;
+exports.getTabSizeLayerStyle = getTabSizeLayerStyle;

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

@@ -0,0 +1,23 @@
+
+import { UniversalTabsVariant } from "../../types/dist/index.cjs";
+import { TextStyle, ViewStyle } from "react-native";
+
+//#region src/components/Tabs/tabTheme.d.ts
+type TabActiveState = 'on' | 'off';
+type TabLayer = 'root' | 'rootText' | 'icon';
+type InteractionState = 'rest' | 'pressed';
+/** Default tab dimensions / spacing from tokens (`tab/size/default/...`). */
+declare function getTabSizeLayerStyle(theme: {
+  components: Record<string, any>;
+}, layer: 'root' | 'rootText' | 'icon'): ViewStyle | TextStyle;
+/** Variant + interaction layer (active on/off, pressed/rest). */
+declare function getTabLayerStyle(theme: {
+  components: Record<string, any>;
+}, visual: UniversalTabsVariant, active: TabActiveState, layer: TabLayer, state: InteractionState): ViewStyle | TextStyle;
+/** Size tokens + variant state (matches web stacking size + variant classes). */
+declare function getMergedTabLayerStyle(theme: {
+  components: Record<string, any>;
+}, visual: UniversalTabsVariant, active: TabActiveState, layer: TabLayer, state: InteractionState): ViewStyle | TextStyle;
+//#endregion
+export { getMergedTabLayerStyle, getTabLayerStyle, getTabSizeLayerStyle };
+//# sourceMappingURL=tabTheme.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabTheme.d.cts","names":[],"sources":["../../../src/components/Tabs/tabTheme.ts"],"mappings":";;;;;KAGK,cAAA;AAAA,KACA,QAAA;AAAA,KACA,gBAAA;;iBAaW,oBAAA,CAEd,KAAA;EAAS,UAAA,EAAY,MAAA;AAAA,GACrB,KAAA,iCACC,SAAA,GAAY,SAAA;AAnBI;AAAA,iBA0BH,gBAAA,CAEd,KAAA;EAAS,UAAA,EAAY,MAAA;AAAA,GACrB,MAAA,EAAQ,oBAAA,EACR,MAAA,EAAQ,cAAA,EACR,KAAA,EAAO,QAAA,EACP,KAAA,EAAO,gBAAA,GACN,SAAA,GAAY,SAAA;;iBAOC,sBAAA,CAEd,KAAA;EAAS,UAAA,EAAY,MAAA;AAAA,GACrB,MAAA,EAAQ,oBAAA,EACR,MAAA,EAAQ,cAAA,EACR,KAAA,EAAO,QAAA,EACP,KAAA,EAAO,gBAAA,GACN,SAAA,GAAY,SAAA"}

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

@@ -0,0 +1,23 @@
+
+import { UniversalTabsVariant } from "../../types/dist/index.js";
+import { TextStyle, ViewStyle } from "react-native";
+
+//#region src/components/Tabs/tabTheme.d.ts
+type TabActiveState = 'on' | 'off';
+type TabLayer = 'root' | 'rootText' | 'icon';
+type InteractionState = 'rest' | 'pressed';
+/** Default tab dimensions / spacing from tokens (`tab/size/default/...`). */
+declare function getTabSizeLayerStyle(theme: {
+  components: Record<string, any>;
+}, layer: 'root' | 'rootText' | 'icon'): ViewStyle | TextStyle;
+/** Variant + interaction layer (active on/off, pressed/rest). */
+declare function getTabLayerStyle(theme: {
+  components: Record<string, any>;
+}, visual: UniversalTabsVariant, active: TabActiveState, layer: TabLayer, state: InteractionState): ViewStyle | TextStyle;
+/** Size tokens + variant state (matches web stacking size + variant classes). */
+declare function getMergedTabLayerStyle(theme: {
+  components: Record<string, any>;
+}, visual: UniversalTabsVariant, active: TabActiveState, layer: TabLayer, state: InteractionState): ViewStyle | TextStyle;
+//#endregion
+export { getMergedTabLayerStyle, getTabLayerStyle, getTabSizeLayerStyle };
+//# sourceMappingURL=tabTheme.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabTheme.d.ts","names":[],"sources":["../../../src/components/Tabs/tabTheme.ts"],"mappings":";;;;;KAGK,cAAA;AAAA,KACA,QAAA;AAAA,KACA,gBAAA;;iBAaW,oBAAA,CAEd,KAAA;EAAS,UAAA,EAAY,MAAA;AAAA,GACrB,KAAA,iCACC,SAAA,GAAY,SAAA;AAnBI;AAAA,iBA0BH,gBAAA,CAEd,KAAA;EAAS,UAAA,EAAY,MAAA;AAAA,GACrB,MAAA,EAAQ,oBAAA,EACR,MAAA,EAAQ,cAAA,EACR,KAAA,EAAO,QAAA,EACP,KAAA,EAAO,gBAAA,GACN,SAAA,GAAY,SAAA;;iBAOC,sBAAA,CAEd,KAAA;EAAS,UAAA,EAAY,MAAA;AAAA,GACrB,MAAA,EAAQ,oBAAA,EACR,MAAA,EAAQ,cAAA,EACR,KAAA,EAAO,QAAA,EACP,KAAA,EAAO,gBAAA,GACN,SAAA,GAAY,SAAA"}