@cascivo/react 0.6.3 → 0.7.0

package/dist/shell-header/shell-header.js

@@ -2,51 +2,51 @@
 
 import { usePopover as e } from "../popover/use-popover.js";
 import t from "./shell-header.module.js";
-import { cn as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { builtin as o, t as s } from "@cascivo/i18n";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { cn as n, getLinkComponent as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { builtin as s, t as c } from "@cascivo/i18n";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region ../components/src/shell-header/shell-header.tsx
-function u(e) {
+function d(e) {
 	return typeof e == "object" && !!e && "name" in e;
 }
-function d(e) {
+function f(e) {
 	return "items" in e;
 }
-function f({ item: n }) {
-	a();
-	let { triggerRef: o, popoverRef: s, isOpen: u, anchorName: d, toggle: f, close: p } = e(), m = n.items.some((e) => e.active), h = r(!1);
-	i(() => {
-		if (!h.value || !u.value) return;
-		h.value = !1;
-		let e = s.current;
+function p({ item: n }) {
+	o();
+	let s = r(), { triggerRef: c, popoverRef: d, isOpen: f, anchorName: p, toggle: m, close: h } = e(), g = n.items.some((e) => e.active), _ = i(!1);
+	a(() => {
+		if (!_.value || !f.value) return;
+		_.value = !1;
+		let e = d.current;
 		e && e.querySelector("[role=\"menuitem\"]")?.focus();
 	});
-	function g(e) {
-		e.key === "ArrowDown" ? (e.preventDefault(), u.value ? s.current?.querySelector("[role=\"menuitem\"]")?.focus() : (h.value = !0, f())) : e.key === "Escape" && (e.preventDefault(), p());
+	function v(e) {
+		e.key === "ArrowDown" ? (e.preventDefault(), f.value ? d.current?.querySelector("[role=\"menuitem\"]")?.focus() : (_.value = !0, m())) : e.key === "Escape" && (e.preventDefault(), h());
 	}
-	function _(e) {
-		let t = Array.from(s.current?.querySelectorAll("[role=\"menuitem\"]") ?? []), n = t.indexOf(document.activeElement);
-		e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Escape" && (p(), o.current?.focus());
+	function y(e) {
+		let t = Array.from(d.current?.querySelectorAll("[role=\"menuitem\"]") ?? []), n = t.indexOf(document.activeElement);
+		e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Escape" && (h(), c.current?.focus());
 	}
-	return /* @__PURE__ */ l("li", {
+	return /* @__PURE__ */ u("li", {
 		className: t.navMenuWrapper,
-		children: [/* @__PURE__ */ l("button", {
-			ref: o,
+		children: [/* @__PURE__ */ u("button", {
+			ref: c,
 			type: "button",
 			"aria-haspopup": "menu",
-			"aria-expanded": u.value,
-			"data-state": m ? "active" : void 0,
-			style: { anchorName: d },
+			"aria-expanded": f.value,
+			"data-state": g ? "active" : void 0,
+			style: { anchorName: p },
 			className: t.navMenuTrigger,
-			onClick: f,
-			onKeyDown: g,
-			children: [n.label, /* @__PURE__ */ c("svg", {
+			onClick: m,
+			onKeyDown: v,
+			children: [n.label, /* @__PURE__ */ l("svg", {
 				viewBox: "0 0 16 16",
 				width: "12",
 				height: "12",
 				"aria-hidden": "true",
 				className: t.chevron,
-				children: /* @__PURE__ */ c("path", {
+				children: /* @__PURE__ */ l("path", {
 					d: "M4 6l4 4 4-4",
 					fill: "none",
 					stroke: "currentColor",
@@ -55,51 +55,51 @@ function f({ item: n }) {
 					strokeLinejoin: "round"
 				})
 			})]
-		}), /* @__PURE__ */ c("div", {
-			ref: s,
+		}), /* @__PURE__ */ l("div", {
+			ref: d,
 			popover: "auto",
 			role: "menu",
 			"aria-label": n.label,
-			"data-state": u.value ? "open" : "closed",
-			style: { positionAnchor: d },
+			"data-state": f.value ? "open" : "closed",
+			style: { positionAnchor: p },
 			className: t.navMenuPanel,
-			onKeyDown: _,
-			children: n.items.map((e, n) => /* @__PURE__ */ c("a", {
+			onKeyDown: y,
+			children: n.items.map((e, n) => /* @__PURE__ */ l(s, {
 				href: e.href,
 				role: "menuitem",
 				"aria-current": e.active ? "page" : void 0,
 				"data-state": e.active ? "active" : void 0,
 				className: t.navMenuItem,
-				onClick: p,
+				onClick: h,
 				children: e.label
 			}, e.id ?? `${n}-${e.href}`))
 		})]
 	});
 }
-function p({ brand: e, nav: r, actions: i, end: p, onMenuClick: m, menuExpanded: h, skipToContentHref: g = "#cascade-main", labels: _, className: v }) {
-	a();
-	let y = _?.nav ?? s(o.shellHeader.nav), b = h ? _?.closeMenu ?? s(o.shellHeader.closeMenu) : _?.openMenu ?? s(o.shellHeader.openMenu);
-	return /* @__PURE__ */ l("header", {
+function m({ brand: e, nav: i, actions: a, end: m, onMenuClick: h, menuExpanded: g, skipToContentHref: _ = "#cascade-main", labels: v, className: y }) {
+	o();
+	let b = r(), x = v?.nav ?? c(s.shellHeader.nav), S = g ? v?.closeMenu ?? c(s.shellHeader.closeMenu) : v?.openMenu ?? c(s.shellHeader.openMenu);
+	return /* @__PURE__ */ u("header", {
 		role: "banner",
-		className: n(t.header, v),
+		className: n(t.header, y),
 		children: [
-			g !== !1 && /* @__PURE__ */ c("a", {
-				href: g,
+			_ !== !1 && /* @__PURE__ */ l("a", {
+				href: _,
 				className: t.skipLink,
-				children: _?.skipToContent ?? s(o.shellHeader.skipToContent)
+				children: v?.skipToContent ?? c(s.shellHeader.skipToContent)
 			}),
-			m && /* @__PURE__ */ c("button", {
+			h && /* @__PURE__ */ l("button", {
 				type: "button",
-				"aria-label": b,
-				"aria-expanded": h ?? !1,
+				"aria-label": S,
+				"aria-expanded": g ?? !1,
 				className: t.menuButton,
-				onClick: m,
-				children: /* @__PURE__ */ c("svg", {
+				onClick: h,
+				children: /* @__PURE__ */ l("svg", {
 					viewBox: "0 0 16 16",
 					width: "16",
 					height: "16",
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ c("path", {
+					children: /* @__PURE__ */ l("path", {
 						d: "M2 4h12M2 8h12M2 12h12",
 						stroke: "currentColor",
 						strokeWidth: "1.5",
@@ -107,27 +107,27 @@ function p({ brand: e, nav: r, actions: i, end: p, onMenuClick: m, menuExpanded:
 					})
 				})
 			}),
-			e != null && (u(e) ? /* @__PURE__ */ l("a", {
+			e != null && (d(e) ? /* @__PURE__ */ u(b, {
 				href: e.href ?? "/",
 				"aria-label": [e.prefix, e.name].filter(Boolean).join(" "),
 				className: t.brand,
-				children: [e.prefix && /* @__PURE__ */ c("span", {
+				children: [e.prefix && /* @__PURE__ */ l("span", {
 					className: t.brandPrefix,
 					children: e.prefix
-				}), /* @__PURE__ */ c("span", {
+				}), /* @__PURE__ */ l("span", {
 					className: t.brandName,
 					children: e.name
 				})]
-			}) : /* @__PURE__ */ c("div", {
+			}) : /* @__PURE__ */ l("div", {
 				className: t.brand,
 				children: e
 			})),
-			r && r.length > 0 && /* @__PURE__ */ c("nav", {
-				"aria-label": y,
+			i && i.length > 0 && /* @__PURE__ */ l("nav", {
+				"aria-label": x,
 				className: t.nav,
-				children: /* @__PURE__ */ c("ul", {
+				children: /* @__PURE__ */ l("ul", {
 					className: t.navList,
-					children: r.map((e, n) => d(e) ? /* @__PURE__ */ c(f, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ c("li", { children: /* @__PURE__ */ c("a", {
+					children: i.map((e, n) => f(e) ? /* @__PURE__ */ l(p, { item: e }, e.id ?? `${n}-${e.label}`) : /* @__PURE__ */ l("li", { children: /* @__PURE__ */ l(b, {
 						href: e.href,
 						"aria-current": e.active ? "page" : void 0,
 						"data-state": e.active ? "active" : void 0,
@@ -137,10 +137,10 @@ function p({ brand: e, nav: r, actions: i, end: p, onMenuClick: m, menuExpanded:
 					}) }, e.id ?? `${n}-${e.href}`))
 				})
 			}),
-			/* @__PURE__ */ c("div", { className: t.spacer }),
-			i && i.length > 0 && /* @__PURE__ */ c("div", {
+			/* @__PURE__ */ l("div", { className: t.spacer }),
+			a && a.length > 0 && /* @__PURE__ */ l("div", {
 				className: t.actions,
-				children: i.map((e) => /* @__PURE__ */ c("button", {
+				children: a.map((e) => /* @__PURE__ */ l("button", {
 					type: "button",
 					"aria-label": e.label,
 					"aria-pressed": e.active ?? !1,
@@ -148,19 +148,19 @@ function p({ brand: e, nav: r, actions: i, end: p, onMenuClick: m, menuExpanded:
 					"data-state": e.active ? "active" : void 0,
 					className: t.action,
 					onClick: e.onClick,
-					children: /* @__PURE__ */ c("span", {
+					children: /* @__PURE__ */ l("span", {
 						className: t.actionIcon,
 						"aria-hidden": "true",
 						children: e.icon
 					})
 				}, e.id))
 			}),
-			p && /* @__PURE__ */ c("div", {
+			m && /* @__PURE__ */ l("div", {
 				className: t.end,
-				children: p
+				children: m
 			})
 		]
 	});
 }
 //#endregion
-export { p as ShellHeader };
+export { m as ShellHeader };