/*! © 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_client_Tabs_tabsContext = require("./tabsContext.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
let _ariakit_react = require("@ariakit/react");
let motion_react = require("motion/react");
//#region src/components/client/Tabs/TabList.tsx
/** Matches {@link Tab} per-tab underline (token CSS variables on the indicator 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)]");
const SELECTION_TRANSITION = "left 240ms cubic-bezier(0.2, 0, 0, 1), top 240ms cubic-bezier(0.2, 0, 0, 1), width 240ms cubic-bezier(0.2, 0, 0, 1), height 240ms cubic-bezier(0.2, 0, 0, 1)";
/** Token vars set on {@link Tab} roots; the sliding indicator is a sibling, so it must mirror the selected tab's computed values (incl. :hover / :active). */
const TAB_UNDERLINE_COLOR_VAR = "--uds-tab-underline-color";
const TAB_UNDERLINE_WIDTH_VAR = "--uds-tab-underline-width";
const TabList = (0, react.forwardRef)(function TabList({ children, scrollable, className, ...props }, ref) {
	const { variant, reduceMotion } = require_components_client_Tabs_tabsContext.useTabsContext();
	const selectedId = (0, _ariakit_react.useStoreState)((0, _ariakit_react.useTabContext)(), "selectedId");
	const listRef = (0, react.useRef)(null);
	const indicatorRef = (0, react.useRef)(null);
	const skipNextTransitionRef = (0, react.useRef)(true);
	const reducedMotion = (0, motion_react.useReducedMotion)();
	const applyIndicator = (0, react.useCallback)(() => {
		const listEl = listRef.current;
		const indicatorEl = indicatorRef.current;
		if (!listEl || !indicatorEl || reduceMotion) return;
		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
		if (!selected) {
			indicatorEl.style.opacity = "0";
			indicatorEl.style.transition = "none";
			indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
			indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
			return;
		}
		const listRect = listEl.getBoundingClientRect();
		const tabRect = selected.getBoundingClientRect();
		const skipTransition = skipNextTransitionRef.current || reducedMotion;
		skipNextTransitionRef.current = false;
		indicatorEl.style.left = `${tabRect.left - listRect.left + listEl.scrollLeft}px`;
		indicatorEl.style.top = `${tabRect.top - listRect.top + listEl.scrollTop}px`;
		indicatorEl.style.width = `${tabRect.width}px`;
		indicatorEl.style.height = `${tabRect.height}px`;
		indicatorEl.style.opacity = "1";
		indicatorEl.style.transition = skipTransition ? "none" : SELECTION_TRANSITION;
		const cs = getComputedStyle(selected);
		const underlineColor = cs.getPropertyValue(TAB_UNDERLINE_COLOR_VAR).trim();
		const underlineWidth = cs.getPropertyValue(TAB_UNDERLINE_WIDTH_VAR).trim();
		if (underlineColor) indicatorEl.style.setProperty(TAB_UNDERLINE_COLOR_VAR, underlineColor);
		else indicatorEl.style.removeProperty(TAB_UNDERLINE_COLOR_VAR);
		if (underlineWidth) indicatorEl.style.setProperty(TAB_UNDERLINE_WIDTH_VAR, underlineWidth);
		else indicatorEl.style.removeProperty(TAB_UNDERLINE_WIDTH_VAR);
	}, [reduceMotion, reducedMotion]);
	(0, react.useLayoutEffect)(() => {
		applyIndicator();
	}, [selectedId, applyIndicator]);
	(0, react.useLayoutEffect)(() => {
		if (reduceMotion) return;
		const listEl = listRef.current;
		if (!listEl) return;
		const ro = new ResizeObserver(() => applyIndicator());
		ro.observe(listEl);
		const onScroll = () => applyIndicator();
		listEl.addEventListener("scroll", onScroll, { passive: true });
		window.addEventListener("resize", applyIndicator);
		return () => {
			ro.disconnect();
			listEl.removeEventListener("scroll", onScroll);
			window.removeEventListener("resize", applyIndicator);
		};
	}, [reduceMotion, applyIndicator]);
	/** Re-sync underline tokens when the selected tab's hover/pressed state changes (indicator does not receive those pseudos). */
	(0, react.useLayoutEffect)(() => {
		if (reduceMotion) return;
		const listEl = listRef.current;
		if (!listEl) return;
		const selected = listEl.querySelector("[role=\"tab\"][aria-selected=\"true\"]:not([aria-disabled=\"true\"])");
		if (!selected) return;
		const bump = () => applyIndicator();
		const events = [
			"mouseenter",
			"mouseleave",
			"mousedown",
			"mouseup",
			"pointerdown",
			"pointerup"
		];
		events.forEach((e) => selected.addEventListener(e, bump));
		return () => events.forEach((e) => selected.removeEventListener(e, bump));
	}, [
		selectedId,
		reduceMotion,
		applyIndicator
	]);
	const setListRef = (el) => {
		listRef.current = el;
		if (typeof ref === "function") ref(el);
		else if (ref) ref.current = el;
	};
	const tablistConfigClass = require_styles_styler.getStyles({ tabsVariantRoot: variant });
	const indicatorClass = require_styles_styler.cx(require_styles_styler.getStyles({
		tabSizeRoot: "default",
		tabVariantRoot: variant,
		tabVariantActiveRoot: "on"
	}), "!m-0 !p-0 !gap-0 box-border pointer-events-none", "absolute z-0 min-w-0 min-h-0");
	const styles = require_styles_styler.cx(tablistConfigClass, "flex flex-row items-center", scrollable ? "overflow-x-auto overflow-y-clip scrollbar-none [overflow-clip-margin:6px]" : "overflow-clip [overflow-clip-margin:8px]", !reduceMotion && "relative", className);
	const indicatorBoxStyle = !reduceMotion ? {
		opacity: 0,
		transition: "none"
	} : {};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_ariakit_react.TabList, {
		ref: setListRef,
		className: styles,
		...props,
		children: [!reduceMotion ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
			ref: indicatorRef,
			className: indicatorClass,
			style: indicatorBoxStyle,
			"aria-hidden": true,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
				"aria-hidden": true,
				className: tabRootUnderlineClassName
			})
		}) : null, children]
	});
});
TabList.displayName = "TabList";
//#endregion
exports.TabList = TabList;
