"use client";
import { t as e } from "../../chunks/clsx.js";
import { Select as t } from "../forms/Select.js";
import { TabsProvider as n } from "../contexts/TabControl.js";
import { useActiveTab as r, useActiveTabControl as i, useRegisterTabControl as a, useTabDispatch as o, useTabsUid as s } from "../hooks/tabControl.js";
import { useKeyboardControls as c } from "../hooks/useKeyboardControls.js";
import { useCallback as l, useEffect as u, useRef as d } from "react";
import { jsx as f, jsxs as p } from "react/jsx-runtime";
//#region lib/ui/tabs/Tabs.tsx
var m = ({ className: t, compacted: r = !1, selected: i, children: a }) => /* @__PURE__ */ f("div", {
	className: e("flex flex-col", t, { "sm:gap-y-20": !r }),
	"data-name": "Tabs",
	children: /* @__PURE__ */ f(n, {
		selected: i,
		children: a
	})
}), h = ({ className: t, children: n }) => /* @__PURE__ */ f("div", {
	"data-name": "TabsBody",
	className: e("grid grid-rows-1 overflow-hidden", t),
	children: n
}), g = ({ value: t, className: n, onSelect: i, children: a, ...o }) => {
	let c = s(), l = d(!1), p = r() === t;
	return u(() => {
		if (!l.current) {
			l.current = !0;
			return;
		}
		p && i?.({ value: t });
	}, [
		p,
		t,
		i
	]), /* @__PURE__ */ f("div", {
		...o,
		"aria-hidden": !p,
		className: e(n, "relative col-start-1 row-start-1 transition-opacity duration-500", {
			"pointer-events-none z-0 h-0 opacity-0": !p,
			"pointer-events-auto z-1 h-auto opacity-100": p
		}),
		inert: p ? void 0 : !0,
		tabIndex: p ? 0 : -1,
		id: `TabPanel_${t}_${c}`,
		"data-name": `TabPanel_${t}`,
		role: "tabpanel",
		"aria-labelledby": `Tab_${t}_${c}`,
		children: a
	});
}, _ = ({ className: t, constrained: n = !1, children: r }) => {
	let a = d(null), o = d(null), [s, c] = i();
	u(() => {
		if (!c?.current || !a.current) return;
		let e = o.current.offsetWidth ?? 0, t = c.current.getBoundingClientRect(), n = a.current.getBoundingClientRect(), r = a.current.scrollLeft;
		a.current.scrollLeft = r + (t.left - n.left) - e;
	}, [c]);
	let l = { "--active-tab": s };
	return /* @__PURE__ */ f("div", {
		"data-name": "TabsHeader",
		className: e("scrollbar-hidden relative isolate flex max-w-full overflow-x-auto scroll-smooth py-20", t),
		ref: a,
		children: /* @__PURE__ */ p("div", {
			role: "tablist",
			className: "flex flex-row",
			style: l,
			children: [
				/* @__PURE__ */ f("div", {
					ref: o,
					className: e("shrink-0", { "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !n })
				}),
				r,
				/* @__PURE__ */ f("div", { className: e("shrink-0", { "w-16 lg:w-[max(calc((100vw-1212px)/2),116px)] xl:w-[max(calc((100vw-1212px)/2),156px)]": !n }) })
			]
		})
	});
}, v = ({ items: n, className: i, "aria-label": a = "Select tab" }) => {
	let s = r(), c = o();
	return /* @__PURE__ */ f(t, {
		value: (s === -1 ? void 0 : s)?.toString(),
		onChange: (e, t) => {
			c({
				type: "update",
				payload: Number(t)
			});
		},
		name: a,
		className: e(i),
		children: n.map((e) => /* @__PURE__ */ f("option", {
			value: e.value,
			children: e.label
		}, e.value))
	});
}, y = ({ as: t = "h2", label: n, children: i, value: o, onSelect: m, className: h, ...g }) => {
	let _ = d(null), v = r(), y = s(), b = a({
		value: o,
		ref: _
	}), x = d(v), S = d(v === o);
	S.current = v === o;
	let C = { "--tab-index": o };
	u(() => {
		x.current !== v && o === v && (_.current?.focus(), m?.({
			value: o,
			label: n
		})), x.current !== v && (x.current = v);
	}, [
		n,
		o,
		m,
		v
	]);
	let w = c({
		start: l(() => {
			b({ type: "start" });
		}, [b]),
		end: l(() => {
			b({ type: "end" });
		}, [b]),
		up: l(() => {
			b({ type: "previous" });
		}, [b]),
		down: l(() => {
			b({ type: "next" });
		}, [b]),
		left: l(() => {
			b({ type: document.documentElement.dir === "rtl" ? "next" : "previous" });
		}, [b]),
		right: l(() => {
			b({ type: document.documentElement.dir === "rtl" ? "previous" : "next" });
		}, [b])
	}), T = l((e) => {
		let t = e.key === " " || e.key === "Spacebar" || e.code === "Space", n = e.key === "Enter" || e.code === "Enter";
		if (S.current && (t || n)) {
			e.preventDefault();
			return;
		}
		w(e);
	}, [w]), E = () => {
		S.current || b({
			type: "update",
			payload: o
		});
	};
	return /* @__PURE__ */ f("div", {
		...g,
		id: g.id || `Tab_${o}_${y}`,
		"data-name": "Tab",
		ref: _,
		role: "tab",
		"aria-selected": S.current,
		"aria-controls": `TabPanel_${o}_${y}`,
		tabIndex: S.current ? 0 : -1,
		className: e("group text-b3 inline-block cursor-pointer overflow-hidden bg-transparent pe-4 align-middle font-semibold whitespace-nowrap outline-none", {
			"text-white": S.current,
			"text-black": !S.current,
			"transition-transform active:scale-[1.03]": S.current
		}),
		onKeyDown: T,
		onClick: E,
		children: /* @__PURE__ */ p(t, {
			className: e("relative inline-block px-20 py-12", "before:rounded-pill before:transition-colors/opacity before:absolute before:inset-0 before:-z-1 before:duration-300 group-focus-within:before:bg-(--color-pearl) group-hover:before:bg-(--color-pearl) group-focus:before:bg-(--color-pearl)", h),
			...S ? {} : { role: "presentation" },
			children: [/* @__PURE__ */ f("span", {
				className: e("tab-focus-pill ease transition-transform/colors", "rounded-pill absolute inset-0 -z-1 duration-300", "bg-black"),
				style: C
			}), i ?? n]
		})
	});
};
//#endregion
export { y as Tab, _ as TabList, g as TabPanel, v as TabSelect, m as Tabs, h as TabsBody };

//# sourceMappingURL=Tabs.js.map