@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/navigation/Nav.mjs

@@ -3,15 +3,16 @@ import { cn as e } from "../../lib/cn.mjs";
 import { getElementType as t } from "../../lib/children.mjs";
 import { reportMissingContext as n, resolveDeprecatedProp as r, warnDeprecated as i, warnOnce as a } from "../../lib/dev.mjs";
 import { renderSlot as o, slotRendersContent as s } from "../../lib/slot.mjs";
-import { useEventCallback as c } from "../../hooks/useEventCallback.mjs";
-import { useControllable as l } from "../../hooks/useControllable.mjs";
-import { useId as u } from "../../hooks/useId.mjs";
-import { disabledStyles as d, focusRingInset as f } from "../../lib/styles.mjs";
-import { ChevronDownIcon as p } from "../../lib/icons.mjs";
-import * as m from "react";
-import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { navCategoryClassNames as c, navClassNames as l, navItemClassNames as u, navSubItemClassNames as d } from "../../lib/classNames.mjs";
+import { useEventCallback as f } from "../../hooks/useEventCallback.mjs";
+import { useControllable as p } from "../../hooks/useControllable.mjs";
+import { useId as m } from "../../hooks/useId.mjs";
+import { disabledStyles as h, focusRingInset as g } from "../../lib/styles.mjs";
+import { ChevronDownIcon as _ } from "../../lib/icons.mjs";
+import * as v from "react";
+import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
 //#region src/components/navigation/Nav.tsx
-function v() {
+function S() {
 	let e = /* @__PURE__ */ new Map(), t = /* @__PURE__ */ new Set(), n = () => t.forEach((e) => e());
 	return {
 		record(t, r) {
@@ -28,40 +29,40 @@ function v() {
 		}
 	};
 }
-var y = m.createContext(null);
-y.displayName = "NavContext";
-var b = () => {}, x = {
+var C = v.createContext(null);
+C.displayName = "NavContext";
+var w = () => {}, T = {
 	value: "",
-	select: b,
+	select: w,
 	openCategories: [],
-	toggleCategory: b,
-	registerValue: () => b,
+	toggleCategory: w,
+	registerValue: () => w,
 	currentCategory: void 0,
 	categoryStore: {
-		record: b,
-		forget: b,
+		record: w,
+		forget: w,
 		get: () => void 0,
-		subscribe: () => b
+		subscribe: () => w
 	}
-}, S = m.createContext(null);
-S.displayName = "NavCategoryValueContext";
-function C(e) {
-	return m.useContext(y) || (n(e, "Nav"), x);
+}, E = v.createContext(null);
+E.displayName = "NavCategoryValueContext";
+function D(e) {
+	return v.useContext(C) || (n(e, "Nav"), T);
 }
-function w(e, t) {
+function O(e, t) {
 	a(`Nav:duplicate-${e}:${t}`, e === "item" ? `Nav: several items share the value "${t}". Nav.Item and Nav.SubItem values must be unique within a Nav; every item with the current value is marked as the current page.` : `Nav: several categories share the value "${t}". Nav.Category values must be unique within a Nav; they open and close together.`);
 }
-function T(e, t, n) {
+function k(e, t, n) {
 	let { registerValue: r } = e;
-	m.useEffect(() => r(t, n), [
+	v.useEffect(() => r(t, n), [
 		r,
 		t,
 		n
 	]);
 }
-function E(e, t) {
-	let n = m.useContext(S), { categoryStore: r } = e;
-	m.useLayoutEffect(() => {
+function A(e, t) {
+	let n = v.useContext(E), { categoryStore: r } = e;
+	v.useLayoutEffect(() => {
 		r.record(t, n);
 	}, [
 		r,
@@ -69,208 +70,222 @@ function E(e, t) {
 		n
 	]);
 }
-var D = "flex h-5 w-5 shrink-0 items-center justify-center";
-function O(e) {
-	return e && s(e) ? o(e, "span", D, { "aria-hidden": !0 }) : null;
+var j = "flex h-5 w-5 shrink-0 items-center justify-center";
+function M(t, n) {
+	return t && s(t) ? o(t, "span", e(n, j), { "aria-hidden": !0 }) : null;
 }
-var k = {
-	base: e("flex w-full items-center gap-2 px-4 py-2 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", f, d),
+var N = {
+	base: e("flex w-full items-center gap-2 px-4 py-2 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", g, h),
 	selected: "bg-subtle-selected text-primary font-semibold border-s-2 border-s-primary",
 	idle: "text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover"
-}, A = {
-	base: e("flex w-full items-center ps-11 pe-4 py-1.5 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", f, d),
+}, P = {
+	base: e("flex w-full items-center ps-11 pe-4 py-1.5 text-body-1 text-start no-underline transition-colors motion-reduce:transition-none", g, h),
 	selected: "text-primary font-semibold",
 	idle: "text-muted-foreground not-disabled:not-aria-disabled:hover:text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover"
-}, j = e("flex w-full items-center gap-2 px-4 py-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover transition-colors motion-reduce:transition-none", "data-[contains-current]:bg-subtle-selected data-[contains-current]:text-primary data-[contains-current]:border-s-2 data-[contains-current]:border-s-primary", f);
-function M(e) {
+}, F = e("flex w-full items-center gap-2 px-4 py-2 text-body-1 font-semibold text-foreground not-disabled:not-aria-disabled:hover:bg-subtle-hover transition-colors motion-reduce:transition-none", "data-[contains-current]:bg-subtle-selected data-[contains-current]:text-primary data-[contains-current]:border-s-2 data-[contains-current]:border-s-primary", g);
+function I(e) {
 	let { children: t } = e.props;
 	return typeof t == "function" ? void 0 : t;
 }
-function N(e) {
+function L(e) {
 	return (typeof e == "object" || typeof e == "function") && e !== null && typeof e.then == "function";
 }
-function P(e, t) {
+function R(e, t) {
 	if (Array.isArray(e)) {
-		for (let n of e) P(n, t);
+		for (let n of e) R(n, t);
 		return;
 	}
 	try {
-		m.Children.forEach(e, (e) => {
-			m.isValidElement(e) && t(e);
+		v.Children.forEach(e, (e) => {
+			v.isValidElement(e) && t(e);
 		});
 	} catch (e) {
-		if (!N(e)) throw e;
+		if (!L(e)) throw e;
 	}
 }
-function F(e, ...n) {
+function z(e, ...n) {
 	return n.includes(t(e, { suspend: !1 }));
 }
-function I(e, t) {
+function B(e, t) {
 	let n = !1;
-	return P(e, (e) => {
-		n ||= F(e, V, H) && e.props.value === t ? !0 : I(M(e), t);
+	return R(e, (e) => {
+		n ||= z(e, G, K) && e.props.value === t ? !0 : B(I(e), t);
 	}), n;
 }
-function L(e, t) {
+function V(e, t) {
 	let n = [];
 	if (!t) return n;
 	let r = (e) => {
-		P(e, (e) => {
-			let i = M(e);
-			F(e, B) && typeof e.props.value == "string" && I(i, t) && n.push(e.props.value), r(i);
+		R(e, (e) => {
+			let i = I(e);
+			z(e, W) && typeof e.props.value == "string" && B(i, t) && n.push(e.props.value), r(i);
 		});
 	};
 	return r(e), n;
 }
-function R(e) {
+function H(e) {
 	if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return !0;
 	let t = e.currentTarget, n = t.getAttribute("target");
 	return !!n && n.toLowerCase() !== "_self" || t.hasAttribute("download");
 }
-function z(t, n, r, i) {
-	let { value: a, icon: o, disabled: s = !1, href: c, className: l, children: u, onClick: d, ref: f, ...p } = t, m = n.value === a, v = c !== void 0, y = (e) => {
-		if (s) {
+function U(t, n, r, i, a) {
+	let { value: o, icon: s, disabled: c = !1, href: l, className: u, children: d, onClick: f, ref: p, ...m } = t, h = n.value === o, g = l !== void 0, _ = (e) => {
+		if (c) {
 			e.preventDefault();
 			return;
 		}
-		d?.(e), !(v ? !e.defaultPrevented && R(e) : e.defaultPrevented) && n.select(a);
-	}, b = /* @__PURE__ */ _(h, { children: [i && O(o), i ? /* @__PURE__ */ g("span", {
-		className: "flex-1 text-start",
-		children: u
-	}) : u] }), x = e(r.base, m ? r.selected : r.idle, l);
-	if (v) return /* @__PURE__ */ g("li", { children: /* @__PURE__ */ g("a", {
-		...p,
-		ref: f,
-		href: s ? void 0 : c,
-		role: s ? "link" : p.role,
-		"aria-disabled": s ? !0 : p["aria-disabled"],
-		"aria-current": m ? "page" : void 0,
-		onClick: y,
-		className: x,
-		children: b
-	}) });
-	let { rel: S, ...C } = p;
-	return /* @__PURE__ */ g("li", { children: /* @__PURE__ */ g("button", {
-		type: "button",
-		...C,
-		ref: f,
-		disabled: s,
-		"aria-current": m ? "page" : void 0,
-		onClick: y,
-		className: x,
-		children: b
-	}) });
+		f?.(e), !(g ? !e.defaultPrevented && H(e) : e.defaultPrevented) && n.select(o);
+	}, v = /* @__PURE__ */ x(y, { children: [a && M(s, i.icon), a ? /* @__PURE__ */ b("span", {
+		className: e(i.content, "flex-1 text-start"),
+		children: d
+	}) : d] }), S = e(i.root, r.base, h ? r.selected : r.idle, u);
+	if (g) return /* @__PURE__ */ b("li", {
+		className: i.listItem,
+		children: /* @__PURE__ */ b("a", {
+			...m,
+			ref: p,
+			href: c ? void 0 : l,
+			role: c ? "link" : m.role,
+			"aria-disabled": c ? !0 : m["aria-disabled"],
+			"aria-current": h ? "page" : void 0,
+			onClick: _,
+			className: S,
+			children: v
+		})
+	});
+	let { rel: C, ...w } = m;
+	return /* @__PURE__ */ b("li", {
+		className: i.listItem,
+		children: /* @__PURE__ */ b("button", {
+			type: "button",
+			...w,
+			ref: p,
+			disabled: c,
+			"aria-current": h ? "page" : void 0,
+			onClick: _,
+			className: S,
+			children: v
+		})
+	});
 }
-var B = ({ value: t, label: n, icon: r, className: a, children: o, ref: s, ...c }) => {
-	let l = C("Nav.Category"), { value: d, openCategories: f, toggleCategory: h, currentCategory: v, categoryStore: y } = l;
-	T(l, "category", t);
-	let b = u("wave-nav-category"), x = f.includes(t), w = !x && d !== "" && I(o, d), E = m.useSyncExternalStore(y.subscribe, () => d !== "" && y.get(d) === t, () => !1);
-	m.useLayoutEffect(() => {
-		if (w) return y.record(d, t), () => y.forget(d, t);
+var W = ({ value: t, label: n, icon: r, className: a, children: o, ref: s, ...l }) => {
+	let u = D("Nav.Category"), { value: d, openCategories: f, toggleCategory: p, currentCategory: h, categoryStore: g } = u;
+	k(u, "category", t);
+	let y = m("wave-nav-category"), S = f.includes(t), C = !S && d !== "" && B(o, d), w = v.useSyncExternalStore(g.subscribe, () => d !== "" && g.get(d) === t, () => !1);
+	v.useLayoutEffect(() => {
+		if (C) return g.record(d, t), () => g.forget(d, t);
 	}, [
-		y,
-		w,
+		g,
+		C,
 		d,
 		t
 	]);
-	let D = !x && (v === t || E || w), k = n, A = o;
+	let T = !S && (h === t || w || C), O = n, A = o;
 	if (n === void 0) {
 		i("Nav.Category", "text children as the label", "label", "Pass the category label in `label` and only the sub-items as children.");
-		let e = m.Children.toArray(o), t = (e) => typeof e == "string" || typeof e == "number";
-		k = e.filter(t).join(""), A = e.filter((e) => !t(e));
+		let e = v.Children.toArray(o), t = (e) => typeof e == "string" || typeof e == "number";
+		O = e.filter(t).join(""), A = e.filter((e) => !t(e));
 	}
-	return /* @__PURE__ */ _("li", {
+	return /* @__PURE__ */ x("li", {
 		ref: s,
-		...c,
-		className: a,
-		children: [/* @__PURE__ */ _("button", {
+		...l,
+		className: e(c.root, a),
+		children: [/* @__PURE__ */ x("button", {
 			type: "button",
-			"aria-expanded": x,
-			"aria-controls": x ? b : void 0,
-			"aria-current": D ? !0 : void 0,
-			"data-contains-current": D ? "" : void 0,
-			onClick: () => h(t),
-			className: j,
+			"aria-expanded": S,
+			"aria-controls": S ? y : void 0,
+			"aria-current": T ? !0 : void 0,
+			"data-contains-current": T ? "" : void 0,
+			onClick: () => p(t),
+			className: e(c.button, F),
 			children: [
-				O(r),
-				/* @__PURE__ */ g("span", {
-					className: "flex-1 text-start",
-					children: k
+				M(r, c.icon),
+				/* @__PURE__ */ b("span", {
+					className: e(c.label, "flex-1 text-start"),
+					children: O
 				}),
-				/* @__PURE__ */ g(p, { className: e("shrink-0 transition-transform motion-reduce:transition-none", x && "rotate-180") })
+				/* @__PURE__ */ b(_, { className: e(c.expandIcon, "shrink-0 transition-transform motion-reduce:transition-none", S && "rotate-180") })
 			]
-		}), x && /* @__PURE__ */ g(S.Provider, {
+		}), S && /* @__PURE__ */ b(E.Provider, {
 			value: t,
-			children: /* @__PURE__ */ g("ul", {
-				id: b,
-				className: "m-0 list-none p-0",
+			children: /* @__PURE__ */ b("ul", {
+				id: y,
+				className: e(c.list, "m-0 list-none p-0"),
 				children: A
 			})
 		})]
 	});
 };
-B.displayName = "NavCategory";
-function V(e) {
-	let t = C("Nav.Item");
-	return T(t, "item", e.value), E(t, e.value), z(e, t, k, !0);
+W.displayName = "NavCategory";
+function G(e) {
+	let t = D("Nav.Item");
+	return k(t, "item", e.value), A(t, e.value), U(e, t, N, {
+		root: u.root,
+		listItem: u.listItem,
+		icon: u.icon,
+		content: u.content
+	}, !0);
 }
-V.displayName = "NavItem";
-function H(e) {
-	let t = C("Nav.SubItem");
-	return T(t, "item", e.value), E(t, e.value), z(e, t, A, !1);
+G.displayName = "NavItem";
+function K(e) {
+	let t = D("Nav.SubItem");
+	return k(t, "item", e.value), A(t, e.value), U(e, t, P, {
+		root: d.root,
+		listItem: d.listItem
+	}, !1);
 }
-H.displayName = "NavSubItem";
-var U = ({ value: t, defaultValue: n, onValueChange: a, selectedValue: o, defaultSelectedValue: s, onNavItemSelect: u, openCategories: d, defaultOpenCategories: f, onOpenCategoriesChange: p, currentCategory: h, className: _, children: b, ref: x, ...S }) => {
-	let C = r("Nav", t, o, "selectedValue", "value"), T = r("Nav", n, s, "defaultSelectedValue", "defaultValue") ?? "";
-	u !== void 0 && i("Nav", "onNavItemSelect", "onValueChange");
-	let [E, D] = l(C, T, a), O = c(u), k = m.useCallback((e) => {
-		D(e), O(e);
-	}, [D, O]), [A] = m.useState(() => f ?? L(b, C ?? T)), [j, M] = l(d, A, (e) => p?.([...e])), N = m.useCallback((e) => {
-		M((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
-	}, [M]), P = m.useRef(null), F = m.useCallback((e, t) => {
-		let n = P.current ??= /* @__PURE__ */ new Map(), r = `${e}:${t}`, i = (n.get(r) ?? 0) + 1;
-		return n.set(r, i), i > 1 && w(e, t), () => {
+K.displayName = "NavSubItem";
+var q = ({ value: t, defaultValue: n, onValueChange: a, selectedValue: o, defaultSelectedValue: s, onNavItemSelect: c, openCategories: u, defaultOpenCategories: d, onOpenCategoriesChange: m, currentCategory: h, className: g, children: _, ref: y, ...x }) => {
+	let w = r("Nav", t, o, "selectedValue", "value"), T = r("Nav", n, s, "defaultSelectedValue", "defaultValue") ?? "";
+	c !== void 0 && i("Nav", "onNavItemSelect", "onValueChange");
+	let [E, D] = p(w, T, a), k = f(c), A = v.useCallback((e) => {
+		D(e), k(e);
+	}, [D, k]), [j] = v.useState(() => d ?? V(_, w ?? T)), [M, N] = p(u, j, (e) => m?.([...e])), P = v.useCallback((e) => {
+		N((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, [N]), F = v.useRef(null), I = v.useCallback((e, t) => {
+		let n = F.current ??= /* @__PURE__ */ new Map(), r = `${e}:${t}`, i = (n.get(r) ?? 0) + 1;
+		return n.set(r, i), i > 1 && O(e, t), () => {
 			let e = (n.get(r) ?? 1) - 1;
 			e > 0 ? n.set(r, e) : n.delete(r);
 		};
-	}, []), [I] = m.useState(v), R = m.useMemo(() => ({
+	}, []), [L] = v.useState(S), R = v.useMemo(() => ({
 		value: E,
-		select: k,
-		openCategories: j,
-		toggleCategory: N,
-		registerValue: F,
+		select: A,
+		openCategories: M,
+		toggleCategory: P,
+		registerValue: I,
 		currentCategory: h,
-		categoryStore: I
+		categoryStore: L
 	}), [
 		E,
-		k,
-		j,
-		N,
-		F,
+		A,
+		M,
+		P,
+		I,
 		h,
-		I
+		L
 	]);
-	return /* @__PURE__ */ g(y.Provider, {
+	return /* @__PURE__ */ b(C.Provider, {
 		value: R,
-		children: /* @__PURE__ */ g("nav", {
+		children: /* @__PURE__ */ b("nav", {
 			"aria-label": "Navigation",
-			...S,
-			ref: x,
-			className: e("w-60 border-e border-border bg-background py-2", _),
-			children: /* @__PURE__ */ g("ul", {
-				className: "m-0 list-none p-0",
-				children: b
+			...x,
+			ref: y,
+			className: e(l.root, "w-60 border-e border-border bg-background py-2", g),
+			children: /* @__PURE__ */ b("ul", {
+				className: e(l.list, "m-0 list-none p-0"),
+				children: _
 			})
 		})
 	});
 };
-U.displayName = "Nav";
-var W = /* @__PURE__ */ Object.assign(U, {
-	Category: B,
-	Item: V,
-	SubItem: H
+q.displayName = "Nav";
+var J = /* @__PURE__ */ Object.assign(q, {
+	Category: W,
+	Item: G,
+	SubItem: K
 });
 //#endregion
-export { W as Nav, B as NavCategory, V as NavItem, H as NavSubItem };
+export { J as Nav, W as NavCategory, G as NavItem, K as NavSubItem };
 
 //# sourceMappingURL=Nav.mjs.map