"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
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_utils_createSlot = require('../../../utils/createSlot.cjs');
const require_components_Text = require('../../Text.cjs');
const require_components_Icon = require('../../Icon.cjs');
const require_components_client_Pressable = require('../../client/Pressable.cjs');
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _ariakit_react = require("@ariakit/react");

//#region src/components/experimental/client/Tabs.tsx
const Slot = require_utils_createSlot.createSlot();
function Tabs(props) {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabProvider, { ...props });
}
Tabs.displayName = "Tabs";
const TabList = (0, react.forwardRef)(function TabList({ className, ...props }, ref) {
	const styles = require_styles_styler.getStyles({
		display: "flex",
		flexDirection: "row",
		columnGap: "6",
		className
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabList, {
		ref,
		...props,
		className: styles
	});
});
TabList.displayName = "TabList";
const Tab = function Tab({ asChild, label, value, startIcon }) {
	const Comp = asChild ? Slot : "button";
	const styles = require_styles_styler.getStyles({});
	if (!(0, _ariakit_react.useTabContext)()) throw new Error("Tab must be wrapped in a Tabs component");
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.Tab, {
		id: value,
		className: styles,
		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Pressable.Pressable, {
			borderBottomWidth: "medium",
			spacingBottom: "1",
			spacingTop: "4",
			className: require_styles_styler.cx("text-tertiary", "border-b-transparent", "aria-selected:border-b-brand", "aria-selected:text-secondary"),
			asChild: true,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Comp, { children: [startIcon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Icon.Icon, {
				name: startIcon,
				className: "text-current",
				size: "md"
			}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
				className: "text-current",
				variant: "headline1",
				as: "span",
				children: label
			})] })
		})
	});
};
Tab.displayName = "Tab";
const TabPanel = (0, react.forwardRef)(function TabPanel(props, ref) {
	const store = (0, _ariakit_react.useTabContext)();
	if (!store) throw new Error("TabPanel must be wrapped in a Tabs component");
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ariakit_react.TabPanel, {
		ref,
		tabId: store.useState("selectedId"),
		...props
	});
});
TabPanel.displayName = "TabPanel";

//#endregion
exports.Tab = Tab;
exports.TabList = TabList;
exports.TabPanel = TabPanel;
exports.Tabs = Tabs;