/*! © 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 `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__ */ jsx(TabsContext.Provider, {
		value: {
			variant,
			reduceMotion
		},
		children: /* @__PURE__ */ jsx(TabProvider, {
			defaultSelectedId,
			selectedId,
			setSelectedId: onSelectionChange,
			children
		})
	});
}
Tabs.displayName = "Tabs";
//#endregion
export { Tabs };
