@yahoo/uds 3.126.0 → 3.127.1

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

@@ -0,0 +1,21 @@
+
+"use client";
+import { UniversalTabProps } from "../../../types/dist/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tabs/Tab.d.ts
+type TabProps = UniversalTabProps;
+declare function Tab({
+  value,
+  children,
+  startIcon,
+  endIcon,
+  disabled,
+  asChild,
+  className
+}: TabProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tab {
+  var displayName: string;
+}
+//#endregion
+export { Tab, type TabProps };

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

@@ -0,0 +1,78 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { IconSlot } from "../../IconSlot.js";
+import { Text } from "../../Text.js";
+import { useTabsContext } from "./tabsContext.js";
+import { isValidElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tab as Tab$1, useStoreState, useTabContext } from "@ariakit/react";
+
+//#region src/components/client/Tabs/Tab.tsx
+/** Matches {@link TabList} sliding-indicator underline (token CSS variables on the tab root). */
+const tabRootUnderlineClassName = cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
+function Tab({ value, children, startIcon, endIcon, disabled, asChild = false, className }) {
+	const generatedId = useId();
+	const uid = value ?? `uds-tab-${generatedId}`;
+	const { variant, disableMotion } = useTabsContext();
+	const store = useTabContext();
+	if (!store) throw new Error("Tab must be wrapped in a Tabs component");
+	const selectedId = useStoreState(store, "selectedId");
+	const activeState = disabled || selectedId !== uid ? "off" : "on";
+	const rootBaseClass = getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "off"
+	});
+	const rootOnClass = getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "on"
+	});
+	const configClass = activeState === "on" ? cx(rootOnClass, !disableMotion && cx("!bg-transparent", "!shadow-none")) : rootBaseClass;
+	const iconConfigClass = getStyles({
+		tabSizeIcon: "default",
+		tabVariantIcon: variant,
+		tabVariantActiveIcon: activeState
+	});
+	const tabClass = cx(configClass, "inline-flex items-center shrink-0 box-border relative", !disableMotion && "z-[1]", "cursor-pointer select-none whitespace-nowrap", !disabled && "uds-ring", disabled && "opacity-50 cursor-default pointer-events-none", "border-solid border-b-solid", "transition-colors duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]", className);
+	const resolvedContent = asChild && isValidElement(children) ? children.props.children ?? null : children;
+	return /* @__PURE__ */ jsxs(Tab$1, {
+		id: uid,
+		disabled,
+		className: tabClass,
+		render: asChild && isValidElement(children) ? children : void 0,
+		children: [
+			!(activeState === "on" && !disableMotion) ? /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: tabRootUnderlineClassName
+			}) : null,
+			startIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: startIcon,
+				iconProps: {
+					size: "sm",
+					color: "current"
+				},
+				className: iconConfigClass
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				variant: "inherit",
+				as: "span",
+				color: "current",
+				children: resolvedContent
+			}),
+			endIcon && /* @__PURE__ */ jsx(IconSlot, {
+				icon: endIcon,
+				iconProps: {
+					size: "sm",
+					color: "current"
+				},
+				className: iconConfigClass
+			})
+		]
+	});
+}
+Tab.displayName = "Tab";
+
+//#endregion
+export { Tab };

package/dist/components/client/Tabs/TabList.cjs

@@ -0,0 +1,132 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_styles_styler = require('../../../styles/styler.cjs');
+const require_components_client_Tabs_tabsContext = require('./tabsContext.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+let motion_react = require("motion/react");
+
+//#region src/components/client/Tabs/TabList.tsx
+/** Matches {@link Tab} per-tab underline (token CSS variables on the indicator root). */
+const tabRootUnderlineClassName = require_styles_styler.cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
+const SELECTION_TRANSITION = "left 240ms cubic-bezier(0.2, 0, 0, 1), top 240ms cubic-bezier(0.2, 0, 0, 1), width 240ms cubic-bezier(0.2, 0, 0, 1), height 240ms cubic-bezier(0.2, 0, 0, 1)";
+/** Token vars set on {@link Tab} roots; the sliding indicator is a sibling, so it must mirror the selected tab's computed values (incl. :hover / :active). */
+const TAB_UNDERLINE_COLOR_VAR = "--uds-tab-underline-color";
+const TAB_UNDERLINE_WIDTH_VAR = "--uds-tab-underline-width";
+const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, className, ...props }, ref) {
+	const { variant, disableMotion } = require_components_client_Tabs_tabsContext.useTabsContext();
+	const selectedId = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useTabContext)(), "selectedId");
+	const listRef = (0, react.useRef)(null);
+	const indicatorRef = (0, react.useRef)(null);
+	const skipNextTransitionRef = (0, react.useRef)(true);
+	const reducedMotion = (0, motion_react.useReducedMotion)();
+	const applyIndicator = (0, react.useCallback)(() => {
+		const listEl = listRef.current;
+		const indicatorEl = indicatorRef.current;
+		if (!listEl || !indicatorEl || disableMotion) return;
+		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
+		if (!selected) {
+			indicatorEl.style.opacity = "0";
+			indicatorEl.style.transition = "none";
+			indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
+			indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
+			return;
+		}
+		const listRect = listEl.getBoundingClientRect();
+		const tabRect = selected.getBoundingClientRect();
+		const skipTransition = skipNextTransitionRef.current || reducedMotion;
+		skipNextTransitionRef.current = false;
+		indicatorEl.style.left = `${tabRect.left - listRect.left + listEl.scrollLeft}px`;
+		indicatorEl.style.top = `${tabRect.top - listRect.top + listEl.scrollTop}px`;
+		indicatorEl.style.width = `${tabRect.width}px`;
+		indicatorEl.style.height = `${tabRect.height}px`;
+		indicatorEl.style.opacity = "1";
+		indicatorEl.style.transition = skipTransition ? "none" : SELECTION_TRANSITION;
+		const cs = getComputedStyle(selected);
+		const underlineColor = cs.getPropertyValue(TAB_UNDERLINE_COLOR_VAR).trim();
+		const underlineWidth = cs.getPropertyValue(TAB_UNDERLINE_WIDTH_VAR).trim();
+		if (underlineColor) indicatorEl.style.setProperty(TAB_UNDERLINE_COLOR_VAR, underlineColor);
+		else indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
+		if (underlineWidth) indicatorEl.style.setProperty(TAB_UNDERLINE_WIDTH_VAR, underlineWidth);
+		else indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
+	}, [disableMotion, reducedMotion]);
+	(0, react.useLayoutEffect)(() => {
+		applyIndicator();
+	}, [selectedId, applyIndicator]);
+	(0, react.useLayoutEffect)(() => {
+		if (disableMotion) return;
+		const listEl = listRef.current;
+		if (!listEl) return;
+		const ro = new ResizeObserver(() => applyIndicator());
+		ro.observe(listEl);
+		const onScroll = () => applyIndicator();
+		listEl.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("resize", applyIndicator);
+		return () => {
+			ro.disconnect();
+			listEl.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", applyIndicator);
+		};
+	}, [disableMotion, applyIndicator]);
+	/** Re-sync underline tokens when the selected tab's hover/pressed state changes (indicator does not receive those pseudos). */
+	(0, react.useLayoutEffect)(() => {
+		if (disableMotion) return;
+		const listEl = listRef.current;
+		if (!listEl) return;
+		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
+		if (!selected) return;
+		const bump = () => applyIndicator();
+		const events = [
+			"mouseenter",
+			"mouseleave",
+			"mousedown",
+			"mouseup",
+			"pointerdown",
+			"pointerup"
+		];
+		events.forEach((e) => selected.addEventListener(e, bump));
+		return () => events.forEach((e) => selected.removeEventListener(e, bump));
+	}, [
+		selectedId,
+		disableMotion,
+		applyIndicator
+	]);
+	const setListRef = (el) => {
+		listRef.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	};
+	const tablistConfigClass = require_styles_styler.getStyles({ tabsVariantRoot: variant });
+	const indicatorClass = require_styles_styler.cx(require_styles_styler.getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "on"
+	}), "!m-0 !p-0 !gap-0 box-border pointer-events-none", "absolute z-0 min-w-0 min-h-0");
+	const styles = require_styles_styler.cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !disableMotion && "relative", className);
+	const indicatorBoxStyle = !disableMotion ? {
+		opacity: 0,
+		transition: "none"
+	} : {};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.TabList, {
+		ref: setListRef,
+		className: styles,
+		...props,
+		children: [!disableMotion ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			ref: indicatorRef,
+			className: indicatorClass,
+			style: indicatorBoxStyle,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"aria-hidden": true,
+				className: tabRootUnderlineClassName
+			})
+		}) : null, children]
+	});
+});
+TabList.displayName = "TabList";
+
+//#endregion
+exports.TabList = TabList;

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

@@ -0,0 +1,9 @@
+
+import { UniversalTabListProps } from "../../../types/dist/index.cjs";
+import * as react from "react";
+
+//#region src/components/client/Tabs/TabList.d.ts
+type TabListProps = UniversalTabListProps;
+declare const TabList: react.ForwardRefExoticComponent<UniversalTabListProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabList, type TabListProps };

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

@@ -0,0 +1,10 @@
+
+"use client";
+import { UniversalTabListProps } from "../../../types/dist/index.js";
+import * as react from "react";
+
+//#region src/components/client/Tabs/TabList.d.ts
+type TabListProps = UniversalTabListProps;
+declare const TabList: react.ForwardRefExoticComponent<UniversalTabListProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabList, type TabListProps };

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

@@ -0,0 +1,130 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { cx, getStyles } from "../../../styles/styler.js";
+import { useTabsContext } from "./tabsContext.js";
+import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TabList as TabList$1, useStoreState, useTabContext } from "@ariakit/react";
+import { useReducedMotion } from "motion/react";
+
+//#region src/components/client/Tabs/TabList.tsx
+/** Matches {@link Tab} per-tab underline (token CSS variables on the indicator root). */
+const tabRootUnderlineClassName = cx("pointer-events-none absolute bottom-0 left-0 right-0", "h-[var(--uds-tab-underline-width,0px)] bg-[var(--uds-tab-underline-color,transparent)]", "transition-[height,background-color] duration-[240ms] ease-[cubic-bezier(0.2,0,0,1)]");
+const SELECTION_TRANSITION = "left 240ms cubic-bezier(0.2, 0, 0, 1), top 240ms cubic-bezier(0.2, 0, 0, 1), width 240ms cubic-bezier(0.2, 0, 0, 1), height 240ms cubic-bezier(0.2, 0, 0, 1)";
+/** Token vars set on {@link Tab} roots; the sliding indicator is a sibling, so it must mirror the selected tab's computed values (incl. :hover / :active). */
+const TAB_UNDERLINE_COLOR_VAR = "--uds-tab-underline-color";
+const TAB_UNDERLINE_WIDTH_VAR = "--uds-tab-underline-width";
+const TabList = forwardRef(function TabList({ children, scrollable, className, ...props }, ref) {
+	const { variant, disableMotion } = useTabsContext();
+	const selectedId = useStoreState(useTabContext(), "selectedId");
+	const listRef = useRef(null);
+	const indicatorRef = useRef(null);
+	const skipNextTransitionRef = useRef(true);
+	const reducedMotion = useReducedMotion();
+	const applyIndicator = useCallback(() => {
+		const listEl = listRef.current;
+		const indicatorEl = indicatorRef.current;
+		if (!listEl || !indicatorEl || disableMotion) return;
+		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
+		if (!selected) {
+			indicatorEl.style.opacity = "0";
+			indicatorEl.style.transition = "none";
+			indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
+			indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
+			return;
+		}
+		const listRect = listEl.getBoundingClientRect();
+		const tabRect = selected.getBoundingClientRect();
+		const skipTransition = skipNextTransitionRef.current || reducedMotion;
+		skipNextTransitionRef.current = false;
+		indicatorEl.style.left = `${tabRect.left - listRect.left + listEl.scrollLeft}px`;
+		indicatorEl.style.top = `${tabRect.top - listRect.top + listEl.scrollTop}px`;
+		indicatorEl.style.width = `${tabRect.width}px`;
+		indicatorEl.style.height = `${tabRect.height}px`;
+		indicatorEl.style.opacity = "1";
+		indicatorEl.style.transition = skipTransition ? "none" : SELECTION_TRANSITION;
+		const cs = getComputedStyle(selected);
+		const underlineColor = cs.getPropertyValue(TAB_UNDERLINE_COLOR_VAR).trim();
+		const underlineWidth = cs.getPropertyValue(TAB_UNDERLINE_WIDTH_VAR).trim();
+		if (underlineColor) indicatorEl.style.setProperty(TAB_UNDERLINE_COLOR_VAR, underlineColor);
+		else indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
+		if (underlineWidth) indicatorEl.style.setProperty(TAB_UNDERLINE_WIDTH_VAR, underlineWidth);
+		else indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
+	}, [disableMotion, reducedMotion]);
+	useLayoutEffect(() => {
+		applyIndicator();
+	}, [selectedId, applyIndicator]);
+	useLayoutEffect(() => {
+		if (disableMotion) return;
+		const listEl = listRef.current;
+		if (!listEl) return;
+		const ro = new ResizeObserver(() => applyIndicator());
+		ro.observe(listEl);
+		const onScroll = () => applyIndicator();
+		listEl.addEventListener("scroll", onScroll, { passive: true });
+		window.addEventListener("resize", applyIndicator);
+		return () => {
+			ro.disconnect();
+			listEl.removeEventListener("scroll", onScroll);
+			window.removeEventListener("resize", applyIndicator);
+		};
+	}, [disableMotion, applyIndicator]);
+	/** Re-sync underline tokens when the selected tab's hover/pressed state changes (indicator does not receive those pseudos). */
+	useLayoutEffect(() => {
+		if (disableMotion) return;
+		const listEl = listRef.current;
+		if (!listEl) return;
+		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
+		if (!selected) return;
+		const bump = () => applyIndicator();
+		const events = [
+			"mouseenter",
+			"mouseleave",
+			"mousedown",
+			"mouseup",
+			"pointerdown",
+			"pointerup"
+		];
+		events.forEach((e) => selected.addEventListener(e, bump));
+		return () => events.forEach((e) => selected.removeEventListener(e, bump));
+	}, [
+		selectedId,
+		disableMotion,
+		applyIndicator
+	]);
+	const setListRef = (el) => {
+		listRef.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	};
+	const tablistConfigClass = getStyles({ tabsVariantRoot: variant });
+	const indicatorClass = cx(getStyles({
+		tabSizeRoot: "default",
+		tabVariantRoot: variant,
+		tabVariantActiveRoot: "on"
+	}), "!m-0 !p-0 !gap-0 box-border pointer-events-none", "absolute z-0 min-w-0 min-h-0");
+	const styles = cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !disableMotion && "relative", className);
+	const indicatorBoxStyle = !disableMotion ? {
+		opacity: 0,
+		transition: "none"
+	} : {};
+	return /* @__PURE__ */ jsxs(TabList$1, {
+		ref: setListRef,
+		className: styles,
+		...props,
+		children: [!disableMotion ? /* @__PURE__ */ jsx("span", {
+			ref: indicatorRef,
+			className: indicatorClass,
+			style: indicatorBoxStyle,
+			"aria-hidden": true,
+			children: /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: tabRootUnderlineClassName
+			})
+		}) : null, children]
+	});
+});
+TabList.displayName = "TabList";
+
+//#endregion
+export { TabList };

package/dist/components/client/Tabs/TabPanel.cjs

@@ -0,0 +1,22 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Tabs/TabPanel.tsx
+const TabPanel = (0, react.forwardRef)(function TabPanel({ tabId, children, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabPanel, {
+		ref,
+		tabId,
+		className,
+		...props,
+		children
+	});
+});
+TabPanel.displayName = "TabPanel";
+
+//#endregion
+exports.TabPanel = TabPanel;

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

@@ -0,0 +1,9 @@
+
+import { UniversalTabPanelProps } from "../../../types/dist/index.cjs";
+import * as react from "react";
+
+//#region src/components/client/Tabs/TabPanel.d.ts
+type TabPanelProps = UniversalTabPanelProps;
+declare const TabPanel: react.ForwardRefExoticComponent<UniversalTabPanelProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabPanel, type TabPanelProps };

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

@@ -0,0 +1,10 @@
+
+"use client";
+import { UniversalTabPanelProps } from "../../../types/dist/index.js";
+import * as react from "react";
+
+//#region src/components/client/Tabs/TabPanel.d.ts
+type TabPanelProps = UniversalTabPanelProps;
+declare const TabPanel: react.ForwardRefExoticComponent<UniversalTabPanelProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { TabPanel, type TabPanelProps };

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

@@ -0,0 +1,20 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { TabPanel as TabPanel$1 } from "@ariakit/react";
+
+//#region src/components/client/Tabs/TabPanel.tsx
+const TabPanel = forwardRef(function TabPanel({ tabId, children, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(TabPanel$1, {
+		ref,
+		tabId,
+		className,
+		...props,
+		children
+	});
+});
+TabPanel.displayName = "TabPanel";
+
+//#endregion
+export { TabPanel };

package/dist/components/client/Tabs/Tabs.cjs

@@ -0,0 +1,53 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_components_client_Tabs_tabsContext = require('./tabsContext.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let _ariakit_react = require("@ariakit/react");
+
+//#region src/components/client/Tabs/Tabs.tsx
+/**
+* **⚙️️ A composable Tabs component
+*
+* @componentType Client component
+*
+* @description
+* Tabs organize content into multiple sections and allow users to navigate between them.
+* Supports two visual variants: `primary` and `secondary`. By default, the active selection
+* indicator (underline or pill) animates between tabs with the same timing as the design reference
+* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `disableMotion={true}` to disable that motion.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tabs, TabList, Tab, TabPanel } from "@yahoo/uds";
+*
+* <Tabs variant="primary" defaultSelectedId="tab-home">
+*   <TabList aria-label="Navigation">
+*     <Tab value="tab-home">Home</Tab>
+*     <Tab value="tab-about">About</Tab>
+*   </TabList>
+*   <TabPanel tabId="tab-home">Home content</TabPanel>
+*   <TabPanel tabId="tab-about">About content</TabPanel>
+* </Tabs>
+* ```
+**/
+function Tabs({ children, variant = "primary", disableMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Tabs_tabsContext.TabsContext.Provider, {
+		value: {
+			variant,
+			disableMotion
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabProvider, {
+			defaultSelectedId,
+			selectedId,
+			setSelectedId: onSelectionChange,
+			children
+		})
+	});
+}
+Tabs.displayName = "Tabs";
+
+//#endregion
+exports.Tabs = Tabs;

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

@@ -0,0 +1,45 @@
+
+import { UniversalTabsProps } from "../../../types/dist/index.cjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tabs/Tabs.d.ts
+type TabsProps = UniversalTabsProps;
+/**
+ * **⚙️️ A composable Tabs component
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tabs organize content into multiple sections and allow users to navigate between them.
+ * Supports two visual variants: `primary` and `secondary`. By default, the active selection
+ * indicator (underline or pill) animates between tabs with the same timing as the design reference
+ * (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `disableMotion={true}` to disable that motion.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tabs, TabList, Tab, TabPanel } from "@yahoo/uds";
+ *
+ * <Tabs variant="primary" defaultSelectedId="tab-home">
+ *   <TabList aria-label="Navigation">
+ *     <Tab value="tab-home">Home</Tab>
+ *     <Tab value="tab-about">About</Tab>
+ *   </TabList>
+ *   <TabPanel tabId="tab-home">Home content</TabPanel>
+ *   <TabPanel tabId="tab-about">About content</TabPanel>
+ * </Tabs>
+ * ```
+ **/
+declare function Tabs({
+  children,
+  variant,
+  disableMotion,
+  defaultSelectedId,
+  selectedId,
+  onSelectionChange
+}: TabsProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tabs {
+  var displayName: string;
+}
+//#endregion
+export { Tabs, type TabsProps };

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

@@ -0,0 +1,46 @@
+
+"use client";
+import { UniversalTabsProps } from "../../../types/dist/index.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/client/Tabs/Tabs.d.ts
+type TabsProps = UniversalTabsProps;
+/**
+ * **⚙️️ A composable Tabs component
+ *
+ * @componentType Client component
+ *
+ * @description
+ * Tabs organize content into multiple sections and allow users to navigate between them.
+ * Supports two visual variants: `primary` and `secondary`. By default, the active selection
+ * indicator (underline or pill) animates between tabs with the same timing as the design reference
+ * (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `disableMotion={true}` to disable that motion.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { Tabs, TabList, Tab, TabPanel } from "@yahoo/uds";
+ *
+ * <Tabs variant="primary" defaultSelectedId="tab-home">
+ *   <TabList aria-label="Navigation">
+ *     <Tab value="tab-home">Home</Tab>
+ *     <Tab value="tab-about">About</Tab>
+ *   </TabList>
+ *   <TabPanel tabId="tab-home">Home content</TabPanel>
+ *   <TabPanel tabId="tab-about">About content</TabPanel>
+ * </Tabs>
+ * ```
+ **/
+declare function Tabs({
+  children,
+  variant,
+  disableMotion,
+  defaultSelectedId,
+  selectedId,
+  onSelectionChange
+}: TabsProps): react_jsx_runtime0.JSX.Element;
+declare namespace Tabs {
+  var displayName: string;
+}
+//#endregion
+export { Tabs, type TabsProps };

package/dist/components/client/Tabs/Tabs.js

@@ -0,0 +1,51 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+import { TabsContext } from "./tabsContext.js";
+import { jsx } from "react/jsx-runtime";
+import { TabProvider } from "@ariakit/react";
+
+//#region src/components/client/Tabs/Tabs.tsx
+/**
+* **⚙️️ A composable Tabs component
+*
+* @componentType Client component
+*
+* @description
+* Tabs organize content into multiple sections and allow users to navigate between them.
+* Supports two visual variants: `primary` and `secondary`. By default, the active selection
+* indicator (underline or pill) animates between tabs with the same timing as the design reference
+* (`240ms` and `cubic-bezier(0.2, 0, 0, 1)`). Set `disableMotion={true}` to disable that motion.
+*
+* @example
+* ```tsx
+* 'use client';
+* import { Tabs, TabList, Tab, TabPanel } from "@yahoo/uds";
+*
+* <Tabs variant="primary" defaultSelectedId="tab-home">
+*   <TabList aria-label="Navigation">
+*     <Tab value="tab-home">Home</Tab>
+*     <Tab value="tab-about">About</Tab>
+*   </TabList>
+*   <TabPanel tabId="tab-home">Home content</TabPanel>
+*   <TabPanel tabId="tab-about">About content</TabPanel>
+* </Tabs>
+* ```
+**/
+function Tabs({ children, variant = "primary", disableMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: {
+			variant,
+			disableMotion
+		},
+		children: /* @__PURE__ */ jsx(TabProvider, {
+			defaultSelectedId,
+			selectedId,
+			setSelectedId: onSelectionChange,
+			children
+		})
+	});
+}
+Tabs.displayName = "Tabs";
+
+//#endregion
+export { Tabs };

package/dist/components/client/Tabs/index.cjs

@@ -0,0 +1,12 @@
+/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_components_client_Tabs_Tab = require('./Tab.cjs');
+const require_components_client_Tabs_TabList = require('./TabList.cjs');
+const require_components_client_Tabs_TabPanel = require('./TabPanel.cjs');
+const require_components_client_Tabs_Tabs = require('./Tabs.cjs');
+
+exports.Tab = require_components_client_Tabs_Tab.Tab;
+exports.TabList = require_components_client_Tabs_TabList.TabList;
+exports.TabPanel = require_components_client_Tabs_TabPanel.TabPanel;
+exports.Tabs = require_components_client_Tabs_Tabs.Tabs;