/*! © 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, slotProps }) {
	const generatedId = useId();
	const uid = value ?? `uds-tab-${generatedId}`;
	const { variant, reduceMotion } = 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, !reduceMotion && 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", !reduceMotion && "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;
	const resolvedRender = asChild && isValidElement(children) ? children : void 0;
	const showPerTabUnderline = !(activeState === "on" && !reduceMotion);
	return /* @__PURE__ */ jsxs(Tab$1, {
		id: uid,
		disabled,
		className: tabClass,
		render: resolvedRender,
		...slotProps?.root,
		children: [
			showPerTabUnderline ? /* @__PURE__ */ jsx("div", {
				"aria-hidden": true,
				className: tabRootUnderlineClassName
			}) : null,
			startIcon && /* @__PURE__ */ jsx(IconSlot, {
				icon: startIcon,
				iconProps: {
					size: "sm",
					color: "current"
				},
				className: iconConfigClass,
				...slotProps?.startIcon
			}),
			/* @__PURE__ */ jsx(Text, {
				variant: "inherit",
				as: "span",
				color: "current",
				...slotProps?.content,
				children: resolvedContent
			}),
			endIcon && /* @__PURE__ */ jsx(IconSlot, {
				icon: endIcon,
				iconProps: {
					size: "sm",
					color: "current"
				},
				className: iconConfigClass,
				...slotProps?.endIcon
			})
		]
	});
}
Tab.displayName = "Tab";
//#endregion
export { Tab };
