@mortenbrudvik/waveui 0.14.1 → 0.16.0

package/dist/components/layout/TabList.mjs

@@ -10,15 +10,18 @@ import { useControllable as h } from "../../hooks/useControllable.mjs";
 import { useId as g } from "../../hooks/useId.mjs";
 import { useRovingTabIndex as _ } from "../../hooks/useRovingTabIndex.mjs";
 import { useMergedRefs as v } from "../../hooks/useMergedRefs.mjs";
-import { disabledStyles as y, focusRing as b, focusRingInset as x, forcedColors as S } from "../../lib/styles.mjs";
-import { getPartId as C } from "./disclosureIds.mjs";
-import * as w from "react";
-import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { usePrefersReducedMotion as ee } from "../../hooks/usePrefersReducedMotion.mjs";
+import { disabledStyles as te, focusRing as y, focusRingInset as b, forcedColors as x } from "../../lib/styles.mjs";
+import { tabIndicatorMotion as S } from "../../lib/motion.mjs";
+import { useMotionClasses as C } from "../../hooks/useMotion.mjs";
+import { getPartId as w } from "./disclosureIds.mjs";
+import * as T from "react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
 //#region src/components/layout/TabList.tsx
-function D(e) {
+function O(e) {
 	o(`TabList:duplicate:${e}`, `TabList: several tabs share the value "${e}". Tab values must be unique within a TabList; tabs with the same value share one id and are selected (and tab stops) together.`);
 }
-function O() {
+function k() {
 	let e = {
 		tab: /* @__PURE__ */ new Map(),
 		panel: /* @__PURE__ */ new Map()
@@ -28,7 +31,7 @@ function O() {
 	return {
 		register(t, n, i) {
 			let a = e[t], o = a.get(n) ?? [];
-			return t === "tab" && o.length > 0 && D(n), a.set(n, [...o, i]), r(), () => {
+			return t === "tab" && o.length > 0 && O(n), a.set(n, [...o, i]), r(), () => {
 				let e = [...a.get(n) ?? []], t = e.indexOf(i);
 				t !== -1 && e.splice(t, 1), e.length > 0 ? a.set(n, e) : a.delete(n), r();
 			};
@@ -44,12 +47,12 @@ function O() {
 		}
 	};
 }
-var k = {
+var A = {
 	register: () => () => {},
 	get: () => void 0,
 	markReady: () => {},
 	subscribe: () => () => {}
-}, A = w.createContext(null), j = {
+}, j = T.createContext(null), M = {
 	orientation: "horizontal",
 	appearance: "transparent",
 	size: "medium",
@@ -59,83 +62,113 @@ var k = {
 	getGeneratedId: (e, t) => `wave-tablist-inert-${e}-${t}`,
 	getStaticTabId: (e) => `wave-tablist-inert-tab-${e}`,
 	getStaticPanelId: () => void 0,
-	registry: k
+	registry: A,
+	indicator: null,
+	indicatorMotion: ""
 };
-function M(e) {
-	return w.useContext(A) || (r(e, "<TabList>"), j);
-}
 function N(e) {
+	return T.useContext(j) || (r(e, "<TabList>"), M);
+}
+function P(e) {
 	let t = e["aria-disabled"];
 	return e.disabled === !0 || t === !0 || t === "true";
 }
-function P(e) {
+function F(e) {
 	return typeof e == "string" && e !== "" ? e : null;
 }
-function F(e, t) {
-	if (Array.isArray(e)) return e.forEach((e) => F(e, t)), t;
-	if (!w.isValidElement(e)) return t;
+function I(e, t) {
+	if (Array.isArray(e)) return e.forEach((e) => I(e, t)), t;
+	if (!T.isValidElement(e)) return t;
 	let { props: r } = e, i = n(e, { suspend: !1 }), a = typeof r.value == "string" ? r.value : void 0;
 	if (i === W) {
 		if (a !== void 0) {
-			t.firstEnabled === void 0 && !N(r) && (t.firstEnabled = a);
-			let e = P(r.id);
+			t.firstEnabled === void 0 && !P(r) && (t.firstEnabled = a);
+			let e = F(r.id);
 			e !== null && t.tabIds.push([a, e]);
 		}
 		return t;
 	}
-	return i === G ? (a !== void 0 && t.panels.push([a, P(r.id)]), t) : i === z ? t : F(r.children, t);
+	return i === G ? (a !== void 0 && t.panels.push([a, F(r.id)]), t) : i === B ? t : I(r.children, t);
 }
-function I(e, t) {
-	if (Array.isArray(e)) return e.some((e) => I(e, t));
-	if (!w.isValidElement(e)) return !1;
+function L(e, t) {
+	if (Array.isArray(e)) return e.some((e) => L(e, t));
+	if (!T.isValidElement(e)) return !1;
 	let r = n(e, { suspend: !1 });
-	return r === W ? t === "tab" : r === G || r === K ? t === "panel" : r !== z && I(e.props.children, t);
+	return r === W ? t === "tab" : r === G || r === K ? t === "panel" : r !== B && L(e.props.children, t);
 }
-function ee(e) {
-	return I(e, "panel") && !I(e, "tab");
+function ne(e) {
+	return L(e, "panel") && !L(e, "tab");
 }
-var L = w.createContext(null), R = "TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.", z = ({ value: n, defaultValue: r, onValueChange: o, orientation: s, appearance: c = "transparent", size: d = "medium", selectTabOnFocus: f = !0, selectedValue: p, defaultSelectedValue: y, onTabSelect: b, vertical: x, className: S, children: D, onKeyDown: k, onFocus: j, ref: M, ...N }) => {
-	let P = i("TabList", n, p, "selectedValue", "value"), I = i("TabList", r, y, "defaultSelectedValue", "defaultValue"), R = i("TabList", s, x === void 0 ? void 0 : x ? "vertical" : "horizontal", "vertical", "orientation") ?? "horizontal";
+var R = T.createContext(null), z = "TabList.Panel was rendered inside the role=\"tablist\" element, where only tabs belong (axe aria-required-children). The TabList moves a Panel after the tablist when it is its child, or in a wrapper that holds no Tab, but it cannot see a Panel that a component renders itself, or separate a wrapper's Panels from its Tabs. Place such panels inside TabList.Panels, which renders after the tablist.", B = ({ value: n, defaultValue: r, onValueChange: o, orientation: s, appearance: c = "transparent", size: d = "medium", selectTabOnFocus: f = !0, motion: p, selectedValue: te, defaultSelectedValue: y, onTabSelect: b, vertical: x, className: O, children: A, onKeyDown: M, onFocus: N, ref: P, ...F }) => {
+	let L = i("TabList", n, te, "selectedValue", "value"), z = i("TabList", r, y, "defaultSelectedValue", "defaultValue"), B = i("TabList", s, x === void 0 ? void 0 : x ? "vertical" : "horizontal", "vertical", "orientation") ?? "horizontal";
 	b && a("TabList", "onTabSelect", "onValueChange", "`onValueChange` is called only when the selected tab changes.");
-	let [z, B, V] = h(P, I ?? "", o), H = JSON.stringify(F(D, {
+	let [V, re, ie] = h(L, z ?? "", o), H = JSON.stringify(I(A, {
 		tabIds: [],
 		panels: []
-	})), U = w.useMemo(() => {
+	})), U = T.useMemo(() => {
 		let e = JSON.parse(H);
 		return {
 			firstEnabled: e.firstEnabled,
 			tabIds: new Map(e.tabIds),
 			panels: new Map(e.panels)
 		};
-	}, [H]), W = !V && z === "", { containerProps: G, getTabIndex: K } = _({
-		activeValue: W ? U.firstEnabled ?? null : z,
-		orientation: R,
+	}, [H]), W = !ie && V === "", { containerProps: G, getTabIndex: K } = _({
+		activeValue: W ? U.firstEnabled ?? null : V,
+		orientation: B,
 		loop: !0,
 		onFocusMove: f ? (e) => J(e) : void 0
-	}), q = w.useCallback((e) => W ? K(e) === 0 : z === e, [
+	}), q = T.useCallback((e) => W ? K(e) === 0 : V === e, [
 		W,
 		K,
-		z
+		V
 	]), J = m((e) => {
-		b?.(e), q(e) || B(e);
-	}), Y = g("tablist"), [X] = w.useState(O);
-	w.useLayoutEffect(() => X.markReady(), [X]);
-	let te = w.useMemo(() => ({
-		orientation: R,
+		b?.(e), q(e) || re(e);
+	}), Y = g("tablist"), [X] = T.useState(k);
+	T.useLayoutEffect(() => X.markReady(), [X]);
+	let Z = B === "vertical", Q = C(p, S), ae = ee(), oe = c === "transparent" && Q !== "" && !ae, [$, se] = T.useState(null), ce = T.useRef(null), le = T.useRef(null);
+	T.useLayoutEffect(() => {
+		let e = ce.current;
+		if (!e) return;
+		let t = Array.from(e.querySelectorAll("[role=\"tab\"]")), n = (e) => e.getAttribute("data-roving-value"), r = t.find((e) => {
+			let t = n(e);
+			return t !== null && q(t);
+		}), i = r ? n(r) : null, a = le.current;
+		if (le.current = i, !oe || !r || i === null || a === null || i === a) return;
+		let o = t.find((e) => n(e) === a);
+		if (!o) return;
+		let s = o.getBoundingClientRect(), c = r.getBoundingClientRect(), l = Z ? c.height : c.width;
+		l !== 0 && se({
+			value: i,
+			offset: Z ? s.top - c.top : s.left - c.left,
+			scale: (Z ? s.height : s.width) / l
+		});
+	}, [
+		q,
+		oe,
+		Z
+	]), T.useEffect(() => {
+		if (!$) return;
+		let e = requestAnimationFrame(() => se(null));
+		return () => cancelAnimationFrame(e);
+	}, [$]);
+	let ue = T.useMemo(() => ({
+		orientation: B,
 		appearance: c,
 		size: d,
 		isSelected: q,
 		select: J,
 		getTabIndex: K,
-		getGeneratedId: (e, t) => C(Y, e, t),
-		getStaticTabId: (e) => U.tabIds.get(e) ?? C(Y, "tab", e),
+		getGeneratedId: (e, t) => w(Y, e, t),
+		getStaticTabId: (e) => U.tabIds.get(e) ?? w(Y, "tab", e),
 		getStaticPanelId: (e) => {
 			let t = U.panels.get(e);
-			if (t !== void 0) return t ?? C(Y, "panel", e);
+			if (t !== void 0) return t ?? w(Y, "panel", e);
 		},
-		registry: X
+		registry: X,
+		indicator: $,
+		indicatorMotion: Q
 	}), [
-		R,
+		B,
 		c,
 		d,
 		q,
@@ -143,115 +176,123 @@ var L = w.createContext(null), R = "TabList.Panel was rendered inside the role=\
 		K,
 		Y,
 		U,
-		X
-	]), ne = v(M, G.ref), Z = [], Q = [];
-	t(D).forEach(({ key: e, node: t }) => {
-		let n = /* @__PURE__ */ T(w.Fragment, { children: t }, e);
-		(ee(t) ? Q : Z).push(n);
-	});
-	let $ = R === "vertical";
-	return /* @__PURE__ */ T(A.Provider, {
-		value: te,
-		children: /* @__PURE__ */ E("div", {
-			className: e($ && "flex"),
-			children: [/* @__PURE__ */ T("div", {
+		X,
+		$,
+		Q
+	]), de = v(P, G.ref, ce), fe = [], pe = [];
+	return t(A).forEach(({ key: e, node: t }) => {
+		let n = /* @__PURE__ */ E(T.Fragment, { children: t }, e);
+		(ne(t) ? pe : fe).push(n);
+	}), /* @__PURE__ */ E(j.Provider, {
+		value: ue,
+		children: /* @__PURE__ */ D("div", {
+			className: e(Z && "flex"),
+			children: [/* @__PURE__ */ E("div", {
 				role: "tablist",
-				"aria-orientation": R,
+				"aria-orientation": B,
 				"data-appearance": c,
 				"data-size": d,
-				"data-orientation": R,
-				className: e(u.root, $ ? "flex w-40 flex-col" : "flex", c === "transparent" ? $ ? "border-e border-border" : "border-b border-border" : "gap-1", S),
-				...N,
+				"data-orientation": B,
+				className: e(u.root, Z ? "flex w-40 flex-col" : "flex", c === "transparent" ? Z ? "border-e border-border" : "border-b border-border" : "gap-1", O),
+				...F,
 				"data-roving-container": "",
-				onKeyDown: l(k, G.onKeyDown),
-				onFocus: l(j, G.onFocus, { checkDefaultPrevented: !1 }),
-				ref: ne,
-				children: /* @__PURE__ */ T(L.Provider, {
+				onKeyDown: l(M, G.onKeyDown),
+				onFocus: l(N, G.onFocus, { checkDefaultPrevented: !1 }),
+				ref: de,
+				children: /* @__PURE__ */ E(R.Provider, {
 					value: "tabs",
-					children: Z
+					children: fe
 				})
-			}), /* @__PURE__ */ T(L.Provider, {
+			}), /* @__PURE__ */ E(R.Provider, {
 				value: "panels",
-				children: Q
+				children: pe
 			})]
 		})
 	});
 };
-z.displayName = "TabList";
-var B = {
+B.displayName = "TabList";
+var V = {
 	small: "px-3 py-1.5",
 	medium: "px-4 py-2",
 	large: "px-5 py-3"
-}, V = {
+}, re = {
 	small: "p-1.5",
 	medium: "p-2",
 	large: "p-3"
-}, H = {
+}, ie = {
 	small: "text-caption-1",
 	medium: "text-body-1",
 	large: "text-body-2"
+}, H = {
+	horizontal: "relative border-b-2 border-b-transparent after:absolute after:inset-x-0 after:-bottom-0.5 after:border-b-2 after:border-b-primary after:origin-left after:translate-x-[var(--wave-tab-indicator-offset,0px)] after:scale-x-[var(--wave-tab-indicator-scale,1)] forced-colors:after:border-[Highlight]",
+	vertical: "relative border-s-2 border-s-transparent after:absolute after:inset-y-0 after:-start-0.5 after:border-s-2 after:border-s-primary after:origin-top after:translate-y-[var(--wave-tab-indicator-offset,0px)] after:scale-y-[var(--wave-tab-indicator-scale,1)] forced-colors:after:border-[Highlight]"
 };
 function U(t, n, r) {
 	switch (t) {
 		case "subtle":
 		case "subtle-circular": {
 			let r = t === "subtle" ? "rounded-md" : "rounded-full";
-			return n ? e(r, "bg-subtle-selected text-foreground", S.selectedContainer) : e(r, "text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:active:bg-subtle-pressed");
+			return n ? e(r, "bg-subtle-selected text-foreground", x.selectedContainer) : e(r, "text-muted-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:active:bg-subtle-pressed");
 		}
-		case "filled-circular": return n ? e("rounded-full bg-primary text-primary-foreground not-disabled:not-aria-disabled:hover:bg-primary-hover not-disabled:not-aria-disabled:active:bg-primary-pressed", S.selectedContainer) : "rounded-full bg-muted text-muted-foreground not-disabled:not-aria-disabled:hover:bg-muted-hover not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:active:bg-muted-pressed";
-		default: return n ? e("text-primary forced-colors:border-[Highlight]", r ? "border-s-2 border-s-primary" : "border-b-2 border-b-primary") : "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground";
+		case "filled-circular": return n ? e("rounded-full bg-primary text-primary-foreground not-disabled:not-aria-disabled:hover:bg-primary-hover not-disabled:not-aria-disabled:active:bg-primary-pressed", x.selectedContainer) : "rounded-full bg-muted text-muted-foreground not-disabled:not-aria-disabled:hover:bg-muted-hover not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:active:bg-muted-pressed";
+		default: return e("border-transparent forced-colors:border-[Canvas]", n ? e("text-primary", H[r ? "vertical" : "horizontal"]) : "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground");
 	}
 }
-var W = ({ value: t, id: n, icon: r, className: i, children: a, onClick: u, ref: d, ...f }) => {
-	let m = M("TabList.Tab"), h = m.isSelected(t), g = m.orientation === "vertical", _ = N(f), v = !!r && c(r), b = v && !c(a), S = f["aria-label"], C = f["aria-labelledby"], T = typeof S == "string" && S.trim() !== "" || typeof C == "string" && C.trim() !== "";
-	w.useEffect(() => {
-		b && !T && o("TabList.Tab:icon-only-name", "TabList.Tab: a tab with an icon and no text has no accessible name. Pass `aria-label` (or `aria-labelledby`).");
-	}, [b, T]);
-	let { registry: D } = m, O = P(n) ?? m.getGeneratedId("tab", t);
-	w.useLayoutEffect(() => D.register("tab", t, O), [
-		D,
+var W = ({ value: t, id: n, icon: r, className: i, style: a, children: u, onClick: d, ref: f, ...m }) => {
+	let h = N("TabList.Tab"), g = h.isSelected(t), _ = h.orientation === "vertical", v = g && h.indicator?.value === t ? h.indicator : null, ee = g && h.appearance === "transparent" && !v ? h.indicatorMotion : void 0, y = v ? {
+		...a,
+		"--wave-tab-indicator-offset": `${v.offset}px`,
+		"--wave-tab-indicator-scale": String(v.scale)
+	} : a, x = P(m), S = !!r && c(r), C = S && !c(u), w = m["aria-label"], E = m["aria-labelledby"], O = typeof w == "string" && w.trim() !== "" || typeof E == "string" && E.trim() !== "";
+	T.useEffect(() => {
+		C && !O && o("TabList.Tab:icon-only-name", "TabList.Tab: a tab with an icon and no text has no accessible name. Pass `aria-label` (or `aria-labelledby`).");
+	}, [C, O]);
+	let { registry: k } = h, A = F(n) ?? h.getGeneratedId("tab", t);
+	T.useLayoutEffect(() => k.register("tab", t, A), [
+		k,
 		t,
-		O
+		A
 	]);
-	let k = w.useSyncExternalStore(D.subscribe, () => D.get("panel", t), () => void 0), A = k === void 0 ? m.getStaticPanelId(t) : k ?? void 0;
-	return /* @__PURE__ */ E("button", {
+	let j = T.useSyncExternalStore(k.subscribe, () => k.get("panel", t), () => void 0), M = j === void 0 ? h.getStaticPanelId(t) : j ?? void 0;
+	return /* @__PURE__ */ D("button", {
 		type: "button",
 		role: "tab",
-		className: e(p.root, "font-semibold transition-colors motion-reduce:transition-none", b ? V[m.size] : B[m.size], H[m.size], v && "inline-flex items-center justify-center gap-2", g && "text-start", U(m.appearance, h, g), y, x, i),
-		...f,
-		id: O,
-		"aria-selected": h,
-		"aria-controls": h ? A : void 0,
-		tabIndex: m.getTabIndex(t),
+		className: e(p.root, "font-semibold transition-colors motion-reduce:transition-none", C ? re[h.size] : V[h.size], ie[h.size], S && "inline-flex items-center justify-center gap-2", _ && "text-start", U(h.appearance, g, _), te, b, ee, i),
+		style: y,
+		...m,
+		id: A,
+		"aria-selected": g,
+		"aria-controls": g ? M : void 0,
+		tabIndex: h.getTabIndex(t),
 		"data-roving-value": t,
-		"data-selected": h ? "" : void 0,
-		"data-icon-only": b ? "" : void 0,
-		onClick: l(u, () => {
-			_ || m.select(t);
+		"data-selected": g ? "" : void 0,
+		"data-icon-only": C ? "" : void 0,
+		onClick: l(d, () => {
+			x || h.select(t);
 		}),
-		ref: d,
-		children: [v && s(r, "span", p.icon, { "aria-hidden": !0 }), a]
+		ref: f,
+		children: [S && s(r, "span", p.icon, { "aria-hidden": !0 }), u]
 	});
 };
 W.displayName = "Tab";
 var G = ({ value: t, id: n, children: r, className: i, ref: a, ...s }) => {
-	let c = M("TabList.Panel"), l = w.useContext(L) === "tabs";
-	w.useEffect(() => {
-		l && o("TabList.Panel:inside-tablist", R);
+	let c = N("TabList.Panel"), l = T.useContext(R) === "tabs";
+	T.useEffect(() => {
+		l && o("TabList.Panel:inside-tablist", z);
 	}, [l]);
-	let { registry: u } = c, f = P(n) ?? c.getGeneratedId("panel", t);
-	w.useLayoutEffect(() => u.register("panel", t, f), [
+	let { registry: u } = c, f = F(n) ?? c.getGeneratedId("panel", t);
+	T.useLayoutEffect(() => u.register("panel", t, f), [
 		u,
 		t,
 		f
 	]);
-	let p = w.useSyncExternalStore(u.subscribe, () => u.get("tab", t), () => void 0);
+	let p = T.useSyncExternalStore(u.subscribe, () => u.get("tab", t), () => void 0);
 	if (!c.isSelected(t)) return null;
 	let m = p === void 0 ? c.getStaticTabId(t) : p ?? void 0;
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ E("div", {
 		role: "tabpanel",
 		tabIndex: 0,
-		className: e(d.root, "p-4", b, i),
+		className: e(d.root, "p-4", y, i),
 		...s,
 		id: f,
 		"aria-labelledby": m,
@@ -260,14 +301,14 @@ var G = ({ value: t, id: n, children: r, className: i, ref: a, ...s }) => {
 	});
 };
 G.displayName = "TabPanel";
-var K = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ T("div", {
+var K = ({ className: t, children: n, ref: r, ...i }) => /* @__PURE__ */ E("div", {
 	ref: r,
 	className: e(f.root, "min-w-0 flex-1", t),
 	...i,
 	children: n
 });
 K.displayName = "TabPanels";
-var q = /* @__PURE__ */ Object.assign(z, {
+var q = /* @__PURE__ */ Object.assign(B, {
 	Tab: W,
 	Panel: G,
 	Panels: K