/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../../_virtual/_rolldown/runtime.cjs");
const require_styles_styler = require("../../../styles/styler.cjs");
const require_components_IconSlot = require("../../IconSlot.cjs");
const require_components_Text = require("../../Text.cjs");
const require_components_client_Tabs_tabsContext = require("./tabsContext.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _ariakit_react = require("@ariakit/react");
//#region src/components/client/Tabs/Tab.tsx
/** Matches {@link TabList} sliding-indicator underline (token CSS variables on the tab root). */
const tabRootUnderlineClassName = require_styles_styler.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 = (0, react.useId)();
	const uid = value ?? `uds-tab-${generatedId}`;
	const { variant, reduceMotion } = require_components_client_Tabs_tabsContext.useTabsContext();
	const store = (0, _ariakit_react.useTabContext)();
	if (!store) throw new Error("Tab must be wrapped in a Tabs component");
	const selectedId = (0, _ariakit_react.useStoreState)(store, "selectedId");
	const activeState = disabled || selectedId !== uid ? "off" : "on";
	const rootBaseClass = require_styles_styler.getStyles({
		tabSizeRoot: "default",
		tabVariantRoot: variant,
		tabVariantActiveRoot: "off"
	});
	const rootOnClass = require_styles_styler.getStyles({
		tabSizeRoot: "default",
		tabVariantRoot: variant,
		tabVariantActiveRoot: "on"
	});
	const configClass = activeState === "on" ? require_styles_styler.cx(rootOnClass, !reduceMotion && require_styles_styler.cx("!bg-transparent", "!shadow-none")) : rootBaseClass;
	const iconConfigClass = require_styles_styler.getStyles({
		tabSizeIcon: "default",
		tabVariantIcon: variant,
		tabVariantActiveIcon: activeState
	});
	const tabClass = require_styles_styler.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 && (0, react.isValidElement)(children) ? children.props.children ?? null : children;
	const resolvedRender = asChild && (0, react.isValidElement)(children) ? children : void 0;
	const showPerTabUnderline = !(activeState === "on" && !reduceMotion);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.Tab, {
		id: uid,
		disabled,
		className: tabClass,
		render: resolvedRender,
		...slotProps?.root,
		children: [
			showPerTabUnderline ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				"aria-hidden": true,
				className: tabRootUnderlineClassName
			}) : null,
			startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
				icon: startIcon,
				iconProps: {
					size: "sm",
					color: "current"
				},
				className: iconConfigClass,
				...slotProps?.startIcon
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Text.Text, {
				variant: "inherit",
				as: "span",
				color: "current",
				...slotProps?.content,
				children: resolvedContent
			}),
			endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_IconSlot.IconSlot, {
				icon: endIcon,
				iconProps: {
					size: "sm",
					color: "current"
				},
				className: iconConfigClass,
				...slotProps?.endIcon
			})
		]
	});
}
Tab.displayName = "Tab";
//#endregion
exports.Tab = Tab;
