"use client";
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../../styles/styler.js";
import { createSlot } from "../../../utils/createSlot.js";
import { Text } from "../../Text.js";
import { Icon } from "../../Icon.js";
import { Pressable } from "../../client/Pressable.js";
import { forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { Tab as Tab$1, TabList as TabList$1, TabPanel as TabPanel$1, TabProvider, useTabContext } from "@ariakit/react";

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

//#endregion
export { Tab, TabList, TabPanel, Tabs };