@aseguragonzalez/ui 1.0.5 → 1.2.0

package/dist/components/AppShell/AppShell.cjs

@@ -1 +1 @@
-const e=require("./AppShell.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={"sidebar-only":e.default.sidebarOnly,"navbar-only":e.default.navbarOnly,both:e.default.both},i=(0,t.forwardRef)(({variant:t,sidebar:i,navbar:a,children:o,className:s,...c},l)=>{let u=t??(i&&a?`both`:i?`sidebar-only`:`navbar-only`),d=[e.default.shell,r[u],s??``].filter(Boolean).join(` `);return(0,n.jsxs)(`div`,{ref:l,className:d,...c,children:[i&&(0,n.jsx)(`div`,{className:e.default.sidebarSlot,children:i}),a&&(0,n.jsx)(`div`,{className:e.default.navbarSlot,children:a}),(0,n.jsx)(`main`,{className:e.default.mainArea,children:o})]})});i.displayName=`AppShell`,exports.AppShell=i;
+const e=require("./AppShell.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={"sidebar-only":e.default.sidebarOnly,"navbar-only":e.default.navbarOnly,both:e.default.both},i=(0,t.forwardRef)(({variant:t,sidebar:i,navbar:a,footer:o,children:s,className:c,...l},u)=>{let d=t??(i&&a?`both`:i?`sidebar-only`:`navbar-only`),f=[e.default.shell,r[d],c??``].filter(Boolean).join(` `);return(0,n.jsxs)(`div`,{ref:u,className:f,...l,children:[i&&(0,n.jsx)(`div`,{className:e.default.sidebarSlot,children:i}),a&&(0,n.jsx)(`div`,{className:e.default.navbarSlot,children:a}),o?(0,n.jsxs)(`div`,{className:[e.default.mainArea,e.default.withFooter].join(` `),children:[(0,n.jsx)(`main`,{className:e.default.main,children:s}),(0,n.jsx)(`footer`,{className:e.default.footer,children:o})]}):(0,n.jsx)(`main`,{className:e.default.mainArea,children:s})]})});i.displayName=`AppShell`,exports.AppShell=i;

package/dist/components/AppShell/AppShell.d.ts

@@ -12,6 +12,11 @@ export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
     navbar?: ReactNode;
     /** Main page content. Rendered inside a `<main>` element. */
     children: ReactNode;
+    /**
+     * Page footer. Rendered in a `<footer>` after `<main>`, not inside it, so it is exposed as the
+     * `contentinfo` landmark. It scrolls with the main content and sits at the bottom when the content is short.
+     */
+    footer?: ReactNode;
 }
 declare const AppShell: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
 export { AppShell };

package/dist/components/AppShell/AppShell.js

@@ -6,16 +6,16 @@ var i = {
 	"sidebar-only": e.sidebarOnly,
 	"navbar-only": e.navbarOnly,
 	both: e.both
-}, a = t(({ variant: t, sidebar: a, navbar: o, children: s, className: c, ...l }, u) => {
-	let d = t ?? (a && o ? "both" : a ? "sidebar-only" : "navbar-only"), f = [
+}, a = t(({ variant: t, sidebar: a, navbar: o, footer: s, children: c, className: l, ...u }, d) => {
+	let f = t ?? (a && o ? "both" : a ? "sidebar-only" : "navbar-only"), p = [
 		e.shell,
-		i[d],
-		c ?? ""
+		i[f],
+		l ?? ""
 	].filter(Boolean).join(" ");
 	return /* @__PURE__ */ r("div", {
-		ref: u,
-		className: f,
-		...l,
+		ref: d,
+		className: p,
+		...u,
 		children: [
 			a && /* @__PURE__ */ n("div", {
 				className: e.sidebarSlot,
@@ -25,9 +25,18 @@ var i = {
 				className: e.navbarSlot,
 				children: o
 			}),
-			/* @__PURE__ */ n("main", {
+			s ? /* @__PURE__ */ r("div", {
+				className: [e.mainArea, e.withFooter].join(" "),
+				children: [/* @__PURE__ */ n("main", {
+					className: e.main,
+					children: c
+				}), /* @__PURE__ */ n("footer", {
+					className: e.footer,
+					children: s
+				})]
+			}) : /* @__PURE__ */ n("main", {
 				className: e.mainArea,
-				children: s
+				children: c
 			})
 		]
 	});

package/dist/components/AppShell/AppShell.module.css.cjs

@@ -1 +1 @@
-var e=`_shell_5ehfr_1`,t=`_sidebarOnly_5ehfr_9`,n=`_mainArea_5ehfr_13`,r=`_navbarOnly_5ehfr_19`,i=`_navbarSlot_5ehfr_23`,a=`_both_5ehfr_33`,o=`_sidebarSlot_5ehfr_38`,s={shell:e,sidebarOnly:t,mainArea:n,navbarOnly:r,navbarSlot:i,both:a,sidebarSlot:o};exports.both=a,exports.default=s,exports.mainArea=n,exports.navbarOnly=r,exports.navbarSlot=i,exports.shell=e,exports.sidebarOnly=t,exports.sidebarSlot=o;
+var e=`_shell_1fhn5_1`,t=`_sidebarOnly_1fhn5_9`,n=`_mainArea_1fhn5_13`,r=`_navbarOnly_1fhn5_19`,i=`_navbarSlot_1fhn5_23`,a=`_both_1fhn5_33`,o=`_sidebarSlot_1fhn5_38`,s=`_withFooter_1fhn5_70`,c=`_main_1fhn5_13`,l=`_footer_1fhn5_79`,u={shell:e,sidebarOnly:t,mainArea:n,navbarOnly:r,navbarSlot:i,both:a,sidebarSlot:o,withFooter:s,main:c,footer:l};exports.both=a,exports.default=u,exports.footer=l,exports.main=c,exports.mainArea=n,exports.navbarOnly=r,exports.navbarSlot=i,exports.shell=e,exports.sidebarOnly=t,exports.sidebarSlot=o,exports.withFooter=s;

package/dist/components/AppShell/AppShell.module.css.js

@@ -1,12 +1,15 @@
 //#region src/components/AppShell/AppShell.module.css
-var e = "_shell_5ehfr_1", t = "_sidebarOnly_5ehfr_9", n = "_mainArea_5ehfr_13", r = "_navbarOnly_5ehfr_19", i = "_navbarSlot_5ehfr_23", a = "_both_5ehfr_33", o = "_sidebarSlot_5ehfr_38", s = {
+var e = "_shell_1fhn5_1", t = "_sidebarOnly_1fhn5_9", n = "_mainArea_1fhn5_13", r = "_navbarOnly_1fhn5_19", i = "_navbarSlot_1fhn5_23", a = "_both_1fhn5_33", o = "_sidebarSlot_1fhn5_38", s = "_withFooter_1fhn5_70", c = "_main_1fhn5_13", l = "_footer_1fhn5_79", u = {
 	shell: e,
 	sidebarOnly: t,
 	mainArea: n,
 	navbarOnly: r,
 	navbarSlot: i,
 	both: a,
-	sidebarSlot: o
+	sidebarSlot: o,
+	withFooter: s,
+	main: c,
+	footer: l
 };
 //#endregion
-export { a as both, s as default, n as mainArea, r as navbarOnly, i as navbarSlot, e as shell, t as sidebarOnly, o as sidebarSlot };
+export { a as both, u as default, l as footer, c as main, n as mainArea, r as navbarOnly, i as navbarSlot, e as shell, t as sidebarOnly, o as sidebarSlot, s as withFooter };

package/dist/components/Breadcrumb/Breadcrumb.cjs

@@ -1 +1 @@
-const e=require("./Breadcrumb.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.forwardRef)(({items:t,"aria-label":r=`Breadcrumb`,className:i},a)=>(0,n.jsx)(`nav`,{ref:a,"aria-label":r,className:[e.default.nav,i??``].filter(Boolean).join(` `),children:(0,n.jsx)(`ol`,{className:e.default.list,children:t.map((r,i)=>{let a=i===t.length-1;return(0,n.jsx)(`li`,{className:e.default.item,children:a?(0,n.jsx)(`span`,{className:e.default.current,"aria-current":`page`,children:r.label}):r.href?(0,n.jsx)(`a`,{href:r.href,className:e.default.link,children:r.label}):(0,n.jsx)(`span`,{className:e.default.link,children:r.label})},`${r.label}-${i}`)})})}));r.displayName=`Breadcrumb`,exports.Breadcrumb=r;
+const e=require("./Breadcrumb.module.css.cjs"),t=require("../shared/ItemLink.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=(0,n.forwardRef)(({items:n,"aria-label":i=`Breadcrumb`,linkComponent:a,className:o},s)=>(0,r.jsx)(`nav`,{ref:s,"aria-label":i,className:[e.default.nav,o??``].filter(Boolean).join(` `),children:(0,r.jsx)(`ol`,{className:e.default.list,children:n.map((i,o)=>{let s=o===n.length-1;return(0,r.jsx)(`li`,{className:e.default.item,children:s?(0,r.jsx)(`span`,{className:e.default.current,"aria-current":`page`,children:i.label}):i.href?(0,r.jsx)(t.ItemLink,{linkComponent:a,href:i.href,className:e.default.link,children:i.label}):(0,r.jsx)(`span`,{className:e.default.link,children:i.label})},`${i.label}-${o}`)})})}));i.displayName=`Breadcrumb`,exports.Breadcrumb=i;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,3 +1,4 @@
+import type { LinkComponent } from '../shared/LinkComponent';
 export interface BreadcrumbItem {
     label: string;
     href?: string;
@@ -5,6 +6,11 @@ export interface BreadcrumbItem {
 export interface BreadcrumbProps {
     items: BreadcrumbItem[];
     'aria-label'?: string;
+    /**
+     * Component rendered for ancestor items with an `href` instead of a plain `<a>`, such as an adapter over the
+     * router's link, so navigation happens without a full page load. Defaults to `<a>`.
+     */
+    linkComponent?: LinkComponent;
     className?: string;
 }
 declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,33 +1,35 @@
 import e from "./Breadcrumb.module.css.js";
-import { forwardRef as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
+import { ItemLink as t } from "../shared/ItemLink.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/Breadcrumb/Breadcrumb.tsx
-var r = t(({ items: t, "aria-label": r = "Breadcrumb", className: i }, a) => /* @__PURE__ */ n("nav", {
-	ref: a,
-	"aria-label": r,
-	className: [e.nav, i ?? ""].filter(Boolean).join(" "),
-	children: /* @__PURE__ */ n("ol", {
+var i = n(({ items: n, "aria-label": i = "Breadcrumb", linkComponent: a, className: o }, s) => /* @__PURE__ */ r("nav", {
+	ref: s,
+	"aria-label": i,
+	className: [e.nav, o ?? ""].filter(Boolean).join(" "),
+	children: /* @__PURE__ */ r("ol", {
 		className: e.list,
-		children: t.map((r, i) => {
-			let a = i === t.length - 1;
-			return /* @__PURE__ */ n("li", {
+		children: n.map((i, o) => {
+			let s = o === n.length - 1;
+			return /* @__PURE__ */ r("li", {
 				className: e.item,
-				children: a ? /* @__PURE__ */ n("span", {
+				children: s ? /* @__PURE__ */ r("span", {
 					className: e.current,
 					"aria-current": "page",
-					children: r.label
-				}) : r.href ? /* @__PURE__ */ n("a", {
-					href: r.href,
+					children: i.label
+				}) : i.href ? /* @__PURE__ */ r(t, {
+					linkComponent: a,
+					href: i.href,
 					className: e.link,
-					children: r.label
-				}) : /* @__PURE__ */ n("span", {
+					children: i.label
+				}) : /* @__PURE__ */ r("span", {
 					className: e.link,
-					children: r.label
+					children: i.label
 				})
-			}, `${r.label}-${i}`);
+			}, `${i.label}-${o}`);
 		})
 	})
 }));
-r.displayName = "Breadcrumb";
+i.displayName = "Breadcrumb";
 //#endregion
-export { r as Breadcrumb };
+export { i as Breadcrumb };

package/dist/components/Navbar/Navbar.cjs

@@ -1 +1 @@
-const e=require("./Navbar.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=()=>(0,n.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{fillRule:`evenodd`,d:`M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z`,clipRule:`evenodd`})}),i=()=>(0,n.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z`})}),a=(0,t.forwardRef)(({brand:a,items:o=[],actions:s,sticky:c=!1,"aria-label":l=`Main navigation`,defaultMobileOpen:u=!1,isMobileOpen:d,onMobileOpenChange:f,className:p},m)=>{let[h,g]=(0,t.useState)(u),_=d??h,v=(0,t.useId)(),y=()=>{let e=!_;d===void 0&&g(e),f?.(e)},b=()=>{d===void 0&&g(!1),f?.(!1)},x=[e.default.navbar,c?e.default.sticky:``,p??``].filter(Boolean).join(` `);return(0,n.jsxs)(`header`,{ref:m,className:x,children:[(0,n.jsxs)(`div`,{className:e.default.inner,children:[a&&(0,n.jsx)(`div`,{className:e.default.brand,children:a}),o.length>0&&(0,n.jsx)(`nav`,{className:e.default.nav,"aria-label":l,children:(0,n.jsx)(`ul`,{className:e.default.navList,children:o.map(t=>(0,n.jsx)(`li`,{className:e.default.navItem,children:(0,n.jsx)(`a`,{href:t.href,onClick:t.onClick,className:[e.default.navLink,t.isActive?e.default.navLinkActive:``].filter(Boolean).join(` `),"aria-current":t.isActive?`page`:void 0,children:t.label})},t.key))})}),s&&(0,n.jsx)(`div`,{className:e.default.actions,children:s}),(0,n.jsx)(`button`,{type:`button`,className:e.default.menuButton,onClick:y,"aria-expanded":_,"aria-controls":v,"aria-label":_?`Close menu`:`Open menu`,children:_?(0,n.jsx)(i,{}):(0,n.jsx)(r,{})})]}),(0,n.jsx)(`div`,{id:v,className:[e.default.mobileMenu,_?e.default.mobileMenuOpen:``].filter(Boolean).join(` `),children:(0,n.jsx)(`nav`,{"aria-label":`${l} — menu`,children:(0,n.jsx)(`ul`,{className:e.default.mobileNavList,children:o.map(t=>(0,n.jsx)(`li`,{className:e.default.mobileNavItem,children:(0,n.jsx)(`a`,{href:t.href,onClick:()=>{t.onClick?.(),b()},className:[e.default.mobileNavLink,t.isActive?e.default.mobileNavLinkActive:``].filter(Boolean).join(` `),"aria-current":t.isActive?`page`:void 0,children:t.label})},t.key))})})})]})});a.displayName=`Navbar`,exports.Navbar=a;
+const e=require("../shared/ItemLink.cjs"),t=require("./Navbar.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=()=>(0,r.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-hidden":`true`,children:(0,r.jsx)(`path`,{fillRule:`evenodd`,d:`M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z`,clipRule:`evenodd`})}),a=()=>(0,r.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-hidden":`true`,children:(0,r.jsx)(`path`,{d:`M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z`})}),o=(0,n.forwardRef)(({brand:o,items:s=[],actions:c,sticky:l=!1,"aria-label":u=`Main navigation`,linkComponent:d,defaultMobileOpen:f=!1,isMobileOpen:p,onMobileOpenChange:m,className:h},g)=>{let[_,v]=(0,n.useState)(f),y=p??_,b=(0,n.useId)(),x=()=>{let e=!y;p===void 0&&v(e),m?.(e)},S=()=>{p===void 0&&v(!1),m?.(!1)},C=[t.default.navbar,l?t.default.sticky:``,h??``].filter(Boolean).join(` `);return(0,r.jsxs)(`header`,{ref:g,className:C,children:[(0,r.jsxs)(`div`,{className:t.default.inner,children:[o&&(0,r.jsx)(`div`,{className:t.default.brand,children:o}),s.length>0&&(0,r.jsx)(`nav`,{className:t.default.nav,"aria-label":u,children:(0,r.jsx)(`ul`,{className:t.default.navList,children:s.map(n=>(0,r.jsx)(`li`,{className:t.default.navItem,children:(0,r.jsx)(e.ItemLink,{linkComponent:d,href:n.href,onClick:n.onClick,className:[t.default.navLink,n.isActive?t.default.navLinkActive:``].filter(Boolean).join(` `),"aria-current":n.isActive?`page`:void 0,children:n.label})},n.key))})}),c&&(0,r.jsx)(`div`,{className:t.default.actions,children:c}),(0,r.jsx)(`button`,{type:`button`,className:t.default.menuButton,onClick:x,"aria-expanded":y,"aria-controls":b,"aria-label":y?`Close menu`:`Open menu`,children:y?(0,r.jsx)(a,{}):(0,r.jsx)(i,{})})]}),(0,r.jsx)(`div`,{id:b,className:[t.default.mobileMenu,y?t.default.mobileMenuOpen:``].filter(Boolean).join(` `),children:(0,r.jsx)(`nav`,{"aria-label":`${u} — menu`,children:(0,r.jsx)(`ul`,{className:t.default.mobileNavList,children:s.map(n=>(0,r.jsx)(`li`,{className:t.default.mobileNavItem,children:(0,r.jsx)(e.ItemLink,{linkComponent:d,href:n.href,onClick:()=>{n.onClick?.(),S()},className:[t.default.mobileNavLink,n.isActive?t.default.mobileNavLinkActive:``].filter(Boolean).join(` `),"aria-current":n.isActive?`page`:void 0,children:n.label})},n.key))})})})]})});o.displayName=`Navbar`,exports.Navbar=o;

package/dist/components/Navbar/Navbar.d.ts

@@ -1,3 +1,4 @@
+import type { LinkComponent } from '../shared/LinkComponent';
 export interface NavItem {
     key: string;
     label: string;
@@ -11,6 +12,11 @@ export interface NavbarProps {
     actions?: React.ReactNode;
     sticky?: boolean;
     'aria-label'?: string;
+    /**
+     * Component rendered for items with an `href` instead of a plain `<a>`, such as an adapter over the
+     * router's link, so navigation happens without a full page load. Defaults to `<a>`.
+     */
+    linkComponent?: LinkComponent;
     defaultMobileOpen?: boolean;
     isMobileOpen?: boolean;
     onMobileOpenChange?: (open: boolean) => void;

package/dist/components/Navbar/Navbar.js

@@ -1,101 +1,104 @@
-import e from "./Navbar.module.css.js";
-import { forwardRef as t, useId as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ItemLink as e } from "../shared/ItemLink.js";
+import t from "./Navbar.module.css.js";
+import { forwardRef as n, useId as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Navbar/Navbar.tsx
-var o = () => /* @__PURE__ */ i("svg", {
+var s = () => /* @__PURE__ */ a("svg", {
 	width: "20",
 	height: "20",
 	viewBox: "0 0 20 20",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ i("path", {
+	children: /* @__PURE__ */ a("path", {
 		fillRule: "evenodd",
 		d: "M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z",
 		clipRule: "evenodd"
 	})
-}), s = () => /* @__PURE__ */ i("svg", {
+}), c = () => /* @__PURE__ */ a("svg", {
 	width: "20",
 	height: "20",
 	viewBox: "0 0 20 20",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ i("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
-}), c = t(({ brand: t, items: c = [], actions: l, sticky: u = !1, "aria-label": d = "Main navigation", defaultMobileOpen: f = !1, isMobileOpen: p, onMobileOpenChange: m, className: h }, g) => {
-	let [_, v] = r(f), y = p ?? _, b = n(), x = () => {
-		let e = !y;
-		p === void 0 && v(e), m?.(e);
-	}, S = () => {
-		p === void 0 && v(!1), m?.(!1);
-	}, C = [
-		e.navbar,
-		u ? e.sticky : "",
-		h ?? ""
+	children: /* @__PURE__ */ a("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+}), l = n(({ brand: n, items: l = [], actions: u, sticky: d = !1, "aria-label": f = "Main navigation", linkComponent: p, defaultMobileOpen: m = !1, isMobileOpen: h, onMobileOpenChange: g, className: _ }, v) => {
+	let [y, b] = i(m), x = h ?? y, S = r(), C = () => {
+		let e = !x;
+		h === void 0 && b(e), g?.(e);
+	}, w = () => {
+		h === void 0 && b(!1), g?.(!1);
+	}, T = [
+		t.navbar,
+		d ? t.sticky : "",
+		_ ?? ""
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ a("header", {
-		ref: g,
-		className: C,
-		children: [/* @__PURE__ */ a("div", {
-			className: e.inner,
+	return /* @__PURE__ */ o("header", {
+		ref: v,
+		className: T,
+		children: [/* @__PURE__ */ o("div", {
+			className: t.inner,
 			children: [
-				t && /* @__PURE__ */ i("div", {
-					className: e.brand,
-					children: t
+				n && /* @__PURE__ */ a("div", {
+					className: t.brand,
+					children: n
 				}),
-				c.length > 0 && /* @__PURE__ */ i("nav", {
-					className: e.nav,
-					"aria-label": d,
-					children: /* @__PURE__ */ i("ul", {
-						className: e.navList,
-						children: c.map((t) => /* @__PURE__ */ i("li", {
-							className: e.navItem,
-							children: /* @__PURE__ */ i("a", {
-								href: t.href,
-								onClick: t.onClick,
-								className: [e.navLink, t.isActive ? e.navLinkActive : ""].filter(Boolean).join(" "),
-								"aria-current": t.isActive ? "page" : void 0,
-								children: t.label
+				l.length > 0 && /* @__PURE__ */ a("nav", {
+					className: t.nav,
+					"aria-label": f,
+					children: /* @__PURE__ */ a("ul", {
+						className: t.navList,
+						children: l.map((n) => /* @__PURE__ */ a("li", {
+							className: t.navItem,
+							children: /* @__PURE__ */ a(e, {
+								linkComponent: p,
+								href: n.href,
+								onClick: n.onClick,
+								className: [t.navLink, n.isActive ? t.navLinkActive : ""].filter(Boolean).join(" "),
+								"aria-current": n.isActive ? "page" : void 0,
+								children: n.label
 							})
-						}, t.key))
+						}, n.key))
 					})
 				}),
-				l && /* @__PURE__ */ i("div", {
-					className: e.actions,
-					children: l
+				u && /* @__PURE__ */ a("div", {
+					className: t.actions,
+					children: u
 				}),
-				/* @__PURE__ */ i("button", {
+				/* @__PURE__ */ a("button", {
 					type: "button",
-					className: e.menuButton,
-					onClick: x,
-					"aria-expanded": y,
-					"aria-controls": b,
-					"aria-label": y ? "Close menu" : "Open menu",
-					children: i(y ? s : o, {})
+					className: t.menuButton,
+					onClick: C,
+					"aria-expanded": x,
+					"aria-controls": S,
+					"aria-label": x ? "Close menu" : "Open menu",
+					children: a(x ? c : s, {})
 				})
 			]
-		}), /* @__PURE__ */ i("div", {
-			id: b,
-			className: [e.mobileMenu, y ? e.mobileMenuOpen : ""].filter(Boolean).join(" "),
-			children: /* @__PURE__ */ i("nav", {
-				"aria-label": `${d} — menu`,
-				children: /* @__PURE__ */ i("ul", {
-					className: e.mobileNavList,
-					children: c.map((t) => /* @__PURE__ */ i("li", {
-						className: e.mobileNavItem,
-						children: /* @__PURE__ */ i("a", {
-							href: t.href,
+		}), /* @__PURE__ */ a("div", {
+			id: S,
+			className: [t.mobileMenu, x ? t.mobileMenuOpen : ""].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ a("nav", {
+				"aria-label": `${f} — menu`,
+				children: /* @__PURE__ */ a("ul", {
+					className: t.mobileNavList,
+					children: l.map((n) => /* @__PURE__ */ a("li", {
+						className: t.mobileNavItem,
+						children: /* @__PURE__ */ a(e, {
+							linkComponent: p,
+							href: n.href,
 							onClick: () => {
-								t.onClick?.(), S();
+								n.onClick?.(), w();
 							},
-							className: [e.mobileNavLink, t.isActive ? e.mobileNavLinkActive : ""].filter(Boolean).join(" "),
-							"aria-current": t.isActive ? "page" : void 0,
-							children: t.label
+							className: [t.mobileNavLink, n.isActive ? t.mobileNavLinkActive : ""].filter(Boolean).join(" "),
+							"aria-current": n.isActive ? "page" : void 0,
+							children: n.label
 						})
-					}, t.key))
+					}, n.key))
 				})
 			})
 		})]
 	});
 });
-c.displayName = "Navbar";
+l.displayName = "Navbar";
 //#endregion
-export { c as Navbar };
+export { l as Navbar };

package/dist/components/Sidebar/Sidebar.cjs

@@ -1 +1 @@
-const e=require("./Sidebar.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("react-dom");var i=`a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])`,a=()=>(0,n.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M10 4L6 8L10 12`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})}),o=()=>(0,n.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M6 4L10 8L6 12`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})}),s=()=>(0,n.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z`})}),c=(0,t.forwardRef)(({items:c,logo:l,header:u,footer:d,"aria-label":f=`Sidebar navigation`,defaultCollapsed:p=!1,isCollapsed:m,onCollapsedChange:h,defaultMobileOpen:g=!1,isMobileOpen:_,onMobileOpenChange:v,className:y},b)=>{let[x,S]=(0,t.useState)(p),C=m??x,[w,T]=(0,t.useState)(g),E=_??w,[D]=(0,t.useState)(()=>typeof document<`u`),O=(0,t.useRef)(null),k=(0,t.useRef)(null);(0,t.useEffect)(()=>{if(window.matchMedia?.(`(max-width: 767px)`)?.matches??!1)return E?(k.current=document.activeElement,document.body.style.overflow=`hidden`,(O.current?.querySelector(i))?.focus()):(document.body.style.overflow=``,k.current?.focus(),k.current=null),()=>{document.body.style.overflow=``}},[E]);let A=(0,t.useCallback)(()=>{let e=!C;m===void 0&&S(e),h?.(e)},[C,m,h]),j=(0,t.useCallback)(()=>{_===void 0&&T(!1),v?.(!1)},[_,v]),M=(0,t.useCallback)(e=>{e.key===`Escape`&&j()},[j]),N=[e.default.sidebar,C?e.default.collapsed:``,E?e.default.mobileOpen:``,y??``].filter(Boolean).join(` `);return(0,n.jsxs)(`aside`,{ref:b,className:N,children:[D&&E&&(0,r.createPortal)((0,n.jsx)(`div`,{className:e.default.backdrop,onClick:j,"aria-hidden":`true`}),document.body),(0,n.jsxs)(`div`,{ref:O,className:e.default.panel,onKeyDown:M,tabIndex:-1,children:[(l||u)&&(0,n.jsxs)(`div`,{className:e.default.panelTop,children:[(0,n.jsxs)(`div`,{className:e.default.logoRow,children:[l&&(0,n.jsx)(`div`,{className:e.default.logoSlot,children:l}),u&&(0,n.jsx)(`div`,{className:e.default.headerContent,children:u})]}),(0,n.jsx)(`button`,{type:`button`,className:e.default.mobileCloseButton,onClick:j,"aria-label":`Close sidebar`,children:(0,n.jsx)(s,{})})]}),!l&&!u&&(0,n.jsx)(`div`,{className:e.default.mobileCloseRow,children:(0,n.jsx)(`button`,{type:`button`,className:e.default.mobileCloseButton,onClick:j,"aria-label":`Close sidebar`,children:(0,n.jsx)(s,{})})}),(0,n.jsx)(`nav`,{"aria-label":f,className:e.default.nav,children:(0,n.jsx)(`ul`,{className:e.default.navList,tabIndex:0,children:c.map(t=>(0,n.jsx)(`li`,{className:e.default.navItem,children:(0,n.jsxs)(`a`,{href:t.href,onClick:t.onClick,className:[e.default.navLink,t.isActive?e.default.navLinkActive:``].filter(Boolean).join(` `),"aria-current":t.isActive?`page`:void 0,"aria-label":t.icon&&C?t.label:void 0,title:t.icon&&C?t.label:void 0,children:[t.icon&&(0,n.jsx)(`span`,{className:e.default.navLinkIcon,"aria-hidden":`true`,children:t.icon}),(0,n.jsx)(`span`,{className:e.default.navLinkLabel,children:t.label})]})},t.key))})}),d&&(0,n.jsx)(`div`,{className:e.default.footer,children:d}),(0,n.jsx)(`button`,{type:`button`,className:e.default.collapseButton,onClick:A,"aria-label":C?`Expand sidebar`:`Collapse sidebar`,"aria-expanded":!C,children:C?(0,n.jsx)(o,{}):(0,n.jsx)(a,{})})]})]})});c.displayName=`Sidebar`,exports.Sidebar=c;
+const e=require("../shared/ItemLink.cjs"),t=require("./Sidebar.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("react-dom");var a=`a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])`,o=()=>(0,r.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,r.jsx)(`path`,{d:`M10 4L6 8L10 12`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})}),s=()=>(0,r.jsx)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,r.jsx)(`path`,{d:`M6 4L10 8L6 12`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})}),c=()=>(0,r.jsx)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 20 20`,fill:`currentColor`,"aria-hidden":`true`,children:(0,r.jsx)(`path`,{d:`M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z`})}),l=(0,n.forwardRef)(({items:l,logo:u,header:d,footer:f,"aria-label":p=`Sidebar navigation`,linkComponent:m,defaultCollapsed:h=!1,isCollapsed:g,onCollapsedChange:_,defaultMobileOpen:v=!1,isMobileOpen:y,onMobileOpenChange:b,className:x},S)=>{let[C,w]=(0,n.useState)(h),T=g??C,[E,D]=(0,n.useState)(v),O=y??E,[k]=(0,n.useState)(()=>typeof document<`u`),A=(0,n.useRef)(null),j=(0,n.useRef)(null);(0,n.useEffect)(()=>{if(window.matchMedia?.(`(max-width: 767px)`)?.matches??!1)return O?(j.current=document.activeElement,document.body.style.overflow=`hidden`,(A.current?.querySelector(a))?.focus()):(document.body.style.overflow=``,j.current?.focus(),j.current=null),()=>{document.body.style.overflow=``}},[O]);let M=(0,n.useCallback)(()=>{let e=!T;g===void 0&&w(e),_?.(e)},[T,g,_]),N=(0,n.useCallback)(()=>{y===void 0&&D(!1),b?.(!1)},[y,b]),P=(0,n.useCallback)(e=>{e.key===`Escape`&&N()},[N]),F=[t.default.sidebar,T?t.default.collapsed:``,O?t.default.mobileOpen:``,x??``].filter(Boolean).join(` `);return(0,r.jsxs)(`aside`,{ref:S,className:F,children:[k&&O&&(0,i.createPortal)((0,r.jsx)(`div`,{className:t.default.backdrop,onClick:N,"aria-hidden":`true`}),document.body),(0,r.jsxs)(`div`,{ref:A,className:t.default.panel,onKeyDown:P,tabIndex:-1,children:[(u||d)&&(0,r.jsxs)(`div`,{className:t.default.panelTop,children:[(0,r.jsxs)(`div`,{className:t.default.logoRow,children:[u&&(0,r.jsx)(`div`,{className:t.default.logoSlot,children:u}),d&&(0,r.jsx)(`div`,{className:t.default.headerContent,children:d})]}),(0,r.jsx)(`button`,{type:`button`,className:t.default.mobileCloseButton,onClick:N,"aria-label":`Close sidebar`,children:(0,r.jsx)(c,{})})]}),!u&&!d&&(0,r.jsx)(`div`,{className:t.default.mobileCloseRow,children:(0,r.jsx)(`button`,{type:`button`,className:t.default.mobileCloseButton,onClick:N,"aria-label":`Close sidebar`,children:(0,r.jsx)(c,{})})}),(0,r.jsx)(`nav`,{"aria-label":p,className:t.default.nav,children:(0,r.jsx)(`ul`,{className:t.default.navList,tabIndex:0,children:l.map(n=>(0,r.jsx)(`li`,{className:t.default.navItem,children:(0,r.jsxs)(e.ItemLink,{linkComponent:m,href:n.href,onClick:()=>{n.onClick?.(),O&&N()},className:[t.default.navLink,n.isActive?t.default.navLinkActive:``].filter(Boolean).join(` `),"aria-current":n.isActive?`page`:void 0,"aria-label":n.icon&&T?n.label:void 0,title:n.icon&&T?n.label:void 0,children:[n.icon&&(0,r.jsx)(`span`,{className:t.default.navLinkIcon,"aria-hidden":`true`,children:n.icon}),(0,r.jsx)(`span`,{className:t.default.navLinkLabel,children:n.label})]})},n.key))})}),f&&(0,r.jsx)(`div`,{className:t.default.footer,children:f}),(0,r.jsx)(`button`,{type:`button`,className:t.default.collapseButton,onClick:M,"aria-label":T?`Expand sidebar`:`Collapse sidebar`,"aria-expanded":!T,children:T?(0,r.jsx)(s,{}):(0,r.jsx)(o,{})})]})]})});l.displayName=`Sidebar`,exports.Sidebar=l;

package/dist/components/Sidebar/Sidebar.d.ts

@@ -1,3 +1,4 @@
+import type { LinkComponent } from '../shared/LinkComponent';
 export interface SidebarItem {
     key: string;
     label: string;
@@ -15,6 +16,11 @@ export interface SidebarProps {
     /** Pinned to the bottom of the panel, above the collapse button. */
     footer?: React.ReactNode;
     'aria-label'?: string;
+    /**
+     * Component rendered for items with an `href` instead of a plain `<a>`, such as an adapter over the
+     * router's link, so navigation happens without a full page load. Defaults to `<a>`.
+     */
+    linkComponent?: LinkComponent;
     /** Desktop collapse — uncontrolled default */
     defaultCollapsed?: boolean;
     /** Desktop collapse — controlled */