/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
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 `reduceMotion={true}` to reduce 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", reduceMotion = false, defaultSelectedId, selectedId, onSelectionChange }) {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Tabs_tabsContext.TabsContext.Provider, {
		value: {
			variant,
			reduceMotion
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabProvider, {
			defaultSelectedId,
			selectedId,
			setSelectedId: onSelectionChange,
			children
		})
	});
}
Tabs.displayName = "Tabs";
//#endregion
exports.Tabs = Tabs;
