@aseguragonzalez/ui 1.1.0 → 1.3.0

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,openMenuLabel:f=`Open menu`,closeMenuLabel:p=`Close menu`,menuLabel:m,defaultMobileOpen:h=!1,isMobileOpen:g,onMobileOpenChange:_,className:v},y)=>{let[b,x]=(0,n.useState)(h),S=g??b,C=(0,n.useId)(),w=()=>{let e=!S;g===void 0&&x(e),_?.(e)},T=()=>{g===void 0&&x(!1),_?.(!1)},E=[t.default.navbar,l?t.default.sticky:``,v??``].filter(Boolean).join(` `);return(0,r.jsxs)(`header`,{ref:y,className:E,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:w,"aria-expanded":S,"aria-controls":C,"aria-label":S?p:f,children:S?(0,r.jsx)(a,{}):(0,r.jsx)(i,{})})]}),(0,r.jsx)(`div`,{id:C,className:[t.default.mobileMenu,S?t.default.mobileMenuOpen:``].filter(Boolean).join(` `),children:(0,r.jsx)(`nav`,{"aria-label":m??`${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?.(),T()},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,17 @@ 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;
+    /** Accessible name of the mobile menu button while closed. Default: `'Open menu'`. */
+    openMenuLabel?: string;
+    /** Accessible name of the mobile menu button while open. Default: `'Close menu'`. */
+    closeMenuLabel?: string;
+    /** Accessible name of the mobile menu's navigation landmark. Default: `` `${aria-label} — menu` ``. */
+    menuLabel?: string;
     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, openMenuLabel: m = "Open menu", closeMenuLabel: h = "Close menu", menuLabel: g, defaultMobileOpen: _ = !1, isMobileOpen: v, onMobileOpenChange: y, className: b }, x) => {
+	let [S, C] = i(_), w = v ?? S, T = r(), E = () => {
+		let e = !w;
+		v === void 0 && C(e), y?.(e);
+	}, D = () => {
+		v === void 0 && C(!1), y?.(!1);
+	}, O = [
+		t.navbar,
+		d ? t.sticky : "",
+		b ?? ""
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ a("header", {
-		ref: g,
-		className: C,
-		children: [/* @__PURE__ */ a("div", {
-			className: e.inner,
+	return /* @__PURE__ */ o("header", {
+		ref: x,
+		className: O,
+		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: E,
+					"aria-expanded": w,
+					"aria-controls": T,
+					"aria-label": w ? h : m,
+					children: a(w ? 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: T,
+			className: [t.mobileMenu, w ? t.mobileMenuOpen : ""].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ a("nav", {
+				"aria-label": g ?? `${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?.(), D();
 							},
-							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,closeLabel:h=`Close sidebar`,collapseLabel:g=`Collapse sidebar`,expandLabel:_=`Expand sidebar`,defaultCollapsed:v=!1,isCollapsed:y,onCollapsedChange:b,defaultMobileOpen:x=!1,isMobileOpen:S,onMobileOpenChange:C,className:w},T)=>{let[E,D]=(0,n.useState)(v),O=y??E,[k,A]=(0,n.useState)(x),j=S??k,[M]=(0,n.useState)(()=>typeof document<`u`),N=(0,n.useRef)(null),P=(0,n.useRef)(null);(0,n.useEffect)(()=>{if(window.matchMedia?.(`(max-width: 767px)`)?.matches??!1)return j?(P.current=document.activeElement,document.body.style.overflow=`hidden`,(N.current?.querySelector(a))?.focus()):(document.body.style.overflow=``,P.current?.focus(),P.current=null),()=>{document.body.style.overflow=``}},[j]);let F=(0,n.useCallback)(()=>{let e=!O;y===void 0&&D(e),b?.(e)},[O,y,b]),I=(0,n.useCallback)(()=>{S===void 0&&A(!1),C?.(!1)},[S,C]),L=(0,n.useCallback)(e=>{e.key===`Escape`&&I()},[I]),R=[t.default.sidebar,O?t.default.collapsed:``,j?t.default.mobileOpen:``,w??``].filter(Boolean).join(` `);return(0,r.jsxs)(`aside`,{ref:T,className:R,children:[M&&j&&(0,i.createPortal)((0,r.jsx)(`div`,{className:t.default.backdrop,onClick:I,"aria-hidden":`true`}),document.body),(0,r.jsxs)(`div`,{ref:N,className:t.default.panel,onKeyDown:L,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:I,"aria-label":h,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:I,"aria-label":h,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?.(),j&&I()},className:[t.default.navLink,n.isActive?t.default.navLinkActive:``].filter(Boolean).join(` `),"aria-current":n.isActive?`page`:void 0,"aria-label":n.icon&&O?n.label:void 0,title:n.icon&&O?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:F,"aria-label":O?_:g,"aria-expanded":!O,children:O?(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,17 @@ 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;
+    /** Accessible name of the mobile drawer's close button. Default: `'Close sidebar'`. */
+    closeLabel?: string;
+    /** Accessible name of the collapse button while expanded. Default: `'Collapse sidebar'`. */
+    collapseLabel?: string;
+    /** Accessible name of the collapse button while collapsed. Default: `'Expand sidebar'`. */
+    expandLabel?: string;
     /** Desktop collapse — uncontrolled default */
     defaultCollapsed?: boolean;
     /** Desktop collapse — controlled */

package/dist/components/Sidebar/Sidebar.js

@@ -1,150 +1,154 @@
-import e from "./Sidebar.module.css.js";
-import { forwardRef as t, useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { createPortal as c } from "react-dom";
+import { ItemLink as e } from "../shared/ItemLink.js";
+import t from "./Sidebar.module.css.js";
+import { forwardRef as n, useCallback as r, useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { createPortal as l } from "react-dom";
 //#region src/components/Sidebar/Sidebar.tsx
-var l = "a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", u = () => /* @__PURE__ */ o("svg", {
+var u = "a[href], button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", d = () => /* @__PURE__ */ s("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 16 16",
 	fill: "none",
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ o("path", {
+	children: /* @__PURE__ */ s("path", {
 		d: "M10 4L6 8L10 12",
 		stroke: "currentColor",
 		strokeWidth: "1.5",
 		strokeLinecap: "round",
 		strokeLinejoin: "round"
 	})
-}), d = () => /* @__PURE__ */ o("svg", {
+}), f = () => /* @__PURE__ */ s("svg", {
 	width: "16",
 	height: "16",
 	viewBox: "0 0 16 16",
 	fill: "none",
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ o("path", {
+	children: /* @__PURE__ */ s("path", {
 		d: "M6 4L10 8L6 12",
 		stroke: "currentColor",
 		strokeWidth: "1.5",
 		strokeLinecap: "round",
 		strokeLinejoin: "round"
 	})
-}), f = () => /* @__PURE__ */ o("svg", {
+}), p = () => /* @__PURE__ */ s("svg", {
 	width: "20",
 	height: "20",
 	viewBox: "0 0 20 20",
 	fill: "currentColor",
 	"aria-hidden": "true",
-	children: /* @__PURE__ */ o("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" })
-}), p = t(({ items: t, logo: p, header: m, footer: h, "aria-label": g = "Sidebar navigation", defaultCollapsed: _ = !1, isCollapsed: v, onCollapsedChange: y, defaultMobileOpen: b = !1, isMobileOpen: x, onMobileOpenChange: S, className: C }, w) => {
-	let [T, E] = a(_), D = v ?? T, [O, k] = a(b), A = x ?? O, [j] = a(() => typeof document < "u"), M = i(null), N = i(null);
-	r(() => {
-		if (window.matchMedia?.("(max-width: 767px)")?.matches ?? !1) return A ? (N.current = document.activeElement, document.body.style.overflow = "hidden", (M.current?.querySelector(l))?.focus()) : (document.body.style.overflow = "", N.current?.focus(), N.current = null), () => {
+	children: /* @__PURE__ */ s("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" })
+}), m = n(({ items: n, logo: m, header: h, footer: g, "aria-label": _ = "Sidebar navigation", linkComponent: v, closeLabel: y = "Close sidebar", collapseLabel: b = "Collapse sidebar", expandLabel: x = "Expand sidebar", defaultCollapsed: S = !1, isCollapsed: C, onCollapsedChange: w, defaultMobileOpen: T = !1, isMobileOpen: E, onMobileOpenChange: D, className: O }, k) => {
+	let [A, j] = o(S), M = C ?? A, [N, P] = o(T), F = E ?? N, [I] = o(() => typeof document < "u"), L = a(null), R = a(null);
+	i(() => {
+		if (window.matchMedia?.("(max-width: 767px)")?.matches ?? !1) return F ? (R.current = document.activeElement, document.body.style.overflow = "hidden", (L.current?.querySelector(u))?.focus()) : (document.body.style.overflow = "", R.current?.focus(), R.current = null), () => {
 			document.body.style.overflow = "";
 		};
-	}, [A]);
-	let P = n(() => {
-		let e = !D;
-		v === void 0 && E(e), y?.(e);
+	}, [F]);
+	let z = r(() => {
+		let e = !M;
+		C === void 0 && j(e), w?.(e);
 	}, [
-		D,
-		v,
-		y
-	]), F = n(() => {
-		x === void 0 && k(!1), S?.(!1);
-	}, [x, S]), I = n((e) => {
-		e.key === "Escape" && F();
-	}, [F]), L = [
-		e.sidebar,
-		D ? e.collapsed : "",
-		A ? e.mobileOpen : "",
-		C ?? ""
+		M,
+		C,
+		w
+	]), B = r(() => {
+		E === void 0 && P(!1), D?.(!1);
+	}, [E, D]), V = r((e) => {
+		e.key === "Escape" && B();
+	}, [B]), H = [
+		t.sidebar,
+		M ? t.collapsed : "",
+		F ? t.mobileOpen : "",
+		O ?? ""
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ s("aside", {
-		ref: w,
-		className: L,
-		children: [j && A && c(/* @__PURE__ */ o("div", {
-			className: e.backdrop,
-			onClick: F,
+	return /* @__PURE__ */ c("aside", {
+		ref: k,
+		className: H,
+		children: [I && F && l(/* @__PURE__ */ s("div", {
+			className: t.backdrop,
+			onClick: B,
 			"aria-hidden": "true"
-		}), document.body), /* @__PURE__ */ s("div", {
-			ref: M,
-			className: e.panel,
-			onKeyDown: I,
+		}), document.body), /* @__PURE__ */ c("div", {
+			ref: L,
+			className: t.panel,
+			onKeyDown: V,
 			tabIndex: -1,
 			children: [
-				(p || m) && /* @__PURE__ */ s("div", {
-					className: e.panelTop,
-					children: [/* @__PURE__ */ s("div", {
-						className: e.logoRow,
-						children: [p && /* @__PURE__ */ o("div", {
-							className: e.logoSlot,
-							children: p
-						}), m && /* @__PURE__ */ o("div", {
-							className: e.headerContent,
+				(m || h) && /* @__PURE__ */ c("div", {
+					className: t.panelTop,
+					children: [/* @__PURE__ */ c("div", {
+						className: t.logoRow,
+						children: [m && /* @__PURE__ */ s("div", {
+							className: t.logoSlot,
 							children: m
+						}), h && /* @__PURE__ */ s("div", {
+							className: t.headerContent,
+							children: h
 						})]
-					}), /* @__PURE__ */ o("button", {
+					}), /* @__PURE__ */ s("button", {
 						type: "button",
-						className: e.mobileCloseButton,
-						onClick: F,
-						"aria-label": "Close sidebar",
-						children: /* @__PURE__ */ o(f, {})
+						className: t.mobileCloseButton,
+						onClick: B,
+						"aria-label": y,
+						children: /* @__PURE__ */ s(p, {})
 					})]
 				}),
-				!p && !m && /* @__PURE__ */ o("div", {
-					className: e.mobileCloseRow,
-					children: /* @__PURE__ */ o("button", {
+				!m && !h && /* @__PURE__ */ s("div", {
+					className: t.mobileCloseRow,
+					children: /* @__PURE__ */ s("button", {
 						type: "button",
-						className: e.mobileCloseButton,
-						onClick: F,
-						"aria-label": "Close sidebar",
-						children: /* @__PURE__ */ o(f, {})
+						className: t.mobileCloseButton,
+						onClick: B,
+						"aria-label": y,
+						children: /* @__PURE__ */ s(p, {})
 					})
 				}),
-				/* @__PURE__ */ o("nav", {
-					"aria-label": g,
-					className: e.nav,
-					children: /* @__PURE__ */ o("ul", {
-						className: e.navList,
+				/* @__PURE__ */ s("nav", {
+					"aria-label": _,
+					className: t.nav,
+					children: /* @__PURE__ */ s("ul", {
+						className: t.navList,
 						tabIndex: 0,
-						children: t.map((t) => /* @__PURE__ */ o("li", {
-							className: e.navItem,
-							children: /* @__PURE__ */ s("a", {
-								href: t.href,
-								onClick: t.onClick,
-								className: [e.navLink, t.isActive ? e.navLinkActive : ""].filter(Boolean).join(" "),
-								"aria-current": t.isActive ? "page" : void 0,
-								"aria-label": t.icon && D ? t.label : void 0,
-								title: t.icon && D ? t.label : void 0,
-								children: [t.icon && /* @__PURE__ */ o("span", {
-									className: e.navLinkIcon,
+						children: n.map((n) => /* @__PURE__ */ s("li", {
+							className: t.navItem,
+							children: /* @__PURE__ */ c(e, {
+								linkComponent: v,
+								href: n.href,
+								onClick: () => {
+									n.onClick?.(), F && B();
+								},
+								className: [t.navLink, n.isActive ? t.navLinkActive : ""].filter(Boolean).join(" "),
+								"aria-current": n.isActive ? "page" : void 0,
+								"aria-label": n.icon && M ? n.label : void 0,
+								title: n.icon && M ? n.label : void 0,
+								children: [n.icon && /* @__PURE__ */ s("span", {
+									className: t.navLinkIcon,
 									"aria-hidden": "true",
-									children: t.icon
-								}), /* @__PURE__ */ o("span", {
-									className: e.navLinkLabel,
-									children: t.label
+									children: n.icon
+								}), /* @__PURE__ */ s("span", {
+									className: t.navLinkLabel,
+									children: n.label
 								})]
 							})
-						}, t.key))
+						}, n.key))
 					})
 				}),
-				h && /* @__PURE__ */ o("div", {
-					className: e.footer,
-					children: h
+				g && /* @__PURE__ */ s("div", {
+					className: t.footer,
+					children: g
 				}),
-				/* @__PURE__ */ o("button", {
+				/* @__PURE__ */ s("button", {
 					type: "button",
-					className: e.collapseButton,
-					onClick: P,
-					"aria-label": D ? "Expand sidebar" : "Collapse sidebar",
-					"aria-expanded": !D,
-					children: o(D ? d : u, {})
+					className: t.collapseButton,
+					onClick: z,
+					"aria-label": M ? x : b,
+					"aria-expanded": !M,
+					children: s(M ? f : d, {})
 				})
 			]
 		})]
 	});
 });
-p.displayName = "Sidebar";
+m.displayName = "Sidebar";
 //#endregion
-export { p as Sidebar };
+export { m as Sidebar };

package/dist/components/shared/ItemLink.cjs

@@ -0,0 +1 @@
+let e=require("react/jsx-runtime");function t({linkComponent:t,href:n,...r}){return t&&n?(0,e.jsx)(t,{href:n,...r}):(0,e.jsx)(`a`,{href:n,...r})}exports.ItemLink=t;

package/dist/components/shared/ItemLink.d.ts

@@ -0,0 +1,7 @@
+import type { LinkComponent, LinkComponentProps } from './LinkComponent';
+export interface ItemLinkProps extends Omit<LinkComponentProps, 'href'> {
+    href?: string;
+    linkComponent?: LinkComponent;
+}
+/** Renders a navigation item's link through `linkComponent` when it has an `href`, otherwise as a plain `<a>`. */
+export declare function ItemLink({ linkComponent: Link, href, ...rest }: ItemLinkProps): import("react").JSX.Element;

package/dist/components/shared/ItemLink.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/shared/ItemLink.tsx
+function t({ linkComponent: t, href: n, ...r }) {
+	return e(t && n ? t : "a", {
+		href: n,
+		...r
+	});
+}
+//#endregion
+export { t as ItemLink };

package/dist/components/shared/LinkComponent.d.ts

@@ -0,0 +1,16 @@
+import type { AriaAttributes, ComponentType, MouseEventHandler, ReactNode } from 'react';
+/** Props a navigation component passes to a consumer-supplied link component. */
+export interface LinkComponentProps {
+    href: string;
+    className?: string;
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+    'aria-current'?: AriaAttributes['aria-current'];
+    'aria-label'?: string;
+    title?: string;
+}
+/**
+ * A link component, typically a thin adapter over the router's own (`<Link to={href} … />`), that a
+ * navigation component renders for items with an `href` instead of a plain `<a>`.
+ */
+export type LinkComponent = ComponentType<LinkComponentProps>;

package/dist/index.d.ts

@@ -101,6 +101,7 @@ export { Navbar } from './components/Navbar/Navbar';
 export type { NavbarProps, NavItem } from './components/Navbar/Navbar';
 export { Sidebar } from './components/Sidebar/Sidebar';
 export type { SidebarProps, SidebarItem } from './components/Sidebar/Sidebar';
+export type { LinkComponent, LinkComponentProps } from './components/shared/LinkComponent';
 export { DataTable } from './components/DataTable/DataTable';
 export type { DataTableProps, TableColumn, SortDirection } from './components/DataTable/DataTable';
 export { BarChart } from './components/BarChart/BarChart';

package/dist/patterns/AuthLayout/AuthLayout.cjs

@@ -1 +1 @@
-const e=require("./AuthLayout.module.css.cjs");let t=require("react/jsx-runtime");var n=()=>(0,t.jsxs)(`svg`,{width:`36`,height:`36`,viewBox:`0 0 36 36`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`rect`,{width:`36`,height:`36`,rx:`8`,fill:`var(--ds-color-action-primary)`}),(0,t.jsx)(`path`,{d:`M10 12h16M10 18h11M10 24h8`,stroke:`white`,strokeWidth:`2.5`,strokeLinecap:`round`})]});function r({children:r,branding:i,logo:a,brandingLabel:o=`Product branding`,footer:s}){let c=a??(0,t.jsx)(n,{});return(0,t.jsxs)(`div`,{className:[e.default.layout,s?e.default.withFooter:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`aside`,{className:e.default.brandPanel,"aria-label":o,"aria-hidden":`true`,children:(0,t.jsx)(`div`,{className:e.default.brandContent,children:i??(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:e.default.brandLogo,children:c}),(0,t.jsxs)(`p`,{className:e.default.brandTagline,children:[`Build better products,`,(0,t.jsx)(`br`,{}),`together.`]})]})})}),(0,t.jsx)(`main`,{className:e.default.formPanel,children:(0,t.jsxs)(`div`,{className:e.default.formContent,children:[(0,t.jsx)(`div`,{className:e.default.mobileLogo,"aria-hidden":`true`,children:c}),r]})}),s&&(0,t.jsx)(`footer`,{className:e.default.footer,children:s})]})}r.displayName=`AuthLayout`,exports.AuthLayout=r;
+const e=require("./AuthLayout.module.css.cjs");let t=require("react/jsx-runtime");var n=()=>(0,t.jsxs)(`svg`,{width:`36`,height:`36`,viewBox:`0 0 36 36`,fill:`none`,"aria-hidden":`true`,children:[(0,t.jsx)(`rect`,{width:`36`,height:`36`,rx:`8`,fill:`var(--ds-color-action-primary)`}),(0,t.jsx)(`path`,{d:`M10 12h16M10 18h11M10 24h8`,stroke:`white`,strokeWidth:`2.5`,strokeLinecap:`round`})]});function r({children:r,branding:i,tagline:a,logo:o,brandingLabel:s=`Product branding`,footer:c}){let l=o??(0,t.jsx)(n,{});return(0,t.jsxs)(`div`,{className:[e.default.layout,c?e.default.withFooter:``].filter(Boolean).join(` `),children:[(0,t.jsx)(`aside`,{className:e.default.brandPanel,"aria-label":s,"aria-hidden":`true`,children:(0,t.jsx)(`div`,{className:e.default.brandContent,children:i??(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`div`,{className:e.default.brandLogo,children:l}),(0,t.jsx)(`p`,{className:e.default.brandTagline,children:a??(0,t.jsxs)(t.Fragment,{children:[`Build better products,`,(0,t.jsx)(`br`,{}),`together.`]})})]})})}),(0,t.jsx)(`main`,{className:e.default.formPanel,children:(0,t.jsxs)(`div`,{className:e.default.formContent,children:[(0,t.jsx)(`div`,{className:e.default.mobileLogo,"aria-hidden":`true`,children:l}),r]})}),c&&(0,t.jsx)(`footer`,{className:e.default.footer,children:c})]})}r.displayName=`AuthLayout`,exports.AuthLayout=r;

package/dist/patterns/AuthLayout/AuthLayout.d.ts

@@ -2,8 +2,10 @@ import type { ReactNode } from 'react';
 export interface AuthLayoutProps {
     /** Form or main content rendered in the right panel. */
     children: ReactNode;
-    /** Custom branding content for the left panel. Replaces the default tagline. */
+    /** Custom branding content for the left panel. Replaces the default logo and tagline. */
     branding?: ReactNode;
+    /** Tagline shown under the logo in the branding panel. Default: `'Build better products, together.'`. */
+    tagline?: ReactNode;
     /** Logo shown at the top of the form panel on mobile, and inside the branding panel on desktop. */
     logo?: ReactNode;
     /** Accessible label for the branding panel (hidden from visual display). */
@@ -14,7 +16,7 @@ export interface AuthLayoutProps {
      */
     footer?: ReactNode;
 }
-export declare function AuthLayout({ children, branding, logo, brandingLabel, footer, }: AuthLayoutProps): import("react").JSX.Element;
+export declare function AuthLayout({ children, branding, tagline, logo, brandingLabel, footer, }: AuthLayoutProps): import("react").JSX.Element;
 export declare namespace AuthLayout {
     var displayName: string;
 }

package/dist/patterns/AuthLayout/AuthLayout.js

@@ -19,27 +19,27 @@ var i = () => /* @__PURE__ */ r("svg", {
 		strokeLinecap: "round"
 	})]
 });
-function a({ children: a, branding: o, logo: s, brandingLabel: c = "Product branding", footer: l }) {
-	let u = s ?? /* @__PURE__ */ n(i, {});
+function a({ children: a, branding: o, tagline: s, logo: c, brandingLabel: l = "Product branding", footer: u }) {
+	let d = c ?? /* @__PURE__ */ n(i, {});
 	return /* @__PURE__ */ r("div", {
-		className: [e.layout, l ? e.withFooter : ""].filter(Boolean).join(" "),
+		className: [e.layout, u ? e.withFooter : ""].filter(Boolean).join(" "),
 		children: [
 			/* @__PURE__ */ n("aside", {
 				className: e.brandPanel,
-				"aria-label": c,
+				"aria-label": l,
 				"aria-hidden": "true",
 				children: /* @__PURE__ */ n("div", {
 					className: e.brandContent,
 					children: o ?? /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("div", {
 						className: e.brandLogo,
-						children: u
-					}), /* @__PURE__ */ r("p", {
+						children: d
+					}), /* @__PURE__ */ n("p", {
 						className: e.brandTagline,
-						children: [
+						children: s ?? /* @__PURE__ */ r(t, { children: [
 							"Build better products,",
 							/* @__PURE__ */ n("br", {}),
 							"together."
-						]
+						] })
 					})] })
 				})
 			}),
@@ -50,13 +50,13 @@ function a({ children: a, branding: o, logo: s, brandingLabel: c = "Product bran
 					children: [/* @__PURE__ */ n("div", {
 						className: e.mobileLogo,
 						"aria-hidden": "true",
-						children: u
+						children: d
 					}), a]
 				})
 			}),
-			l && /* @__PURE__ */ n("footer", {
+			u && /* @__PURE__ */ n("footer", {
 				className: e.footer,
-				children: l
+				children: u
 			})
 		]
 	});

package/dist/primitives/Toast/Toast.cjs

@@ -1 +1 @@
-const e=require("./Toast.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("react-dom");var i=(0,t.createContext)(null),a={info:(0,n.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:[(0,n.jsx)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,strokeWidth:`1.5`}),(0,n.jsx)(`path`,{d:`M8 7v4M8 5v.5`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})]}),success:(0,n.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:[(0,n.jsx)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,strokeWidth:`1.5`}),(0,n.jsx)(`path`,{d:`M5 8l2 2 4-4`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})]}),error:(0,n.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:[(0,n.jsx)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,strokeWidth:`1.5`}),(0,n.jsx)(`path`,{d:`M10 6L6 10M6 6l4 4`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})]}),warning:(0,n.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:[(0,n.jsx)(`path`,{d:`M8 2L14.9 14H1.1L8 2z`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinejoin:`round`}),(0,n.jsx)(`path`,{d:`M8 6.5v3M8 11v.5`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})]})};function o({item:t,onDismiss:r,onPause:i,onResume:o}){return(0,n.jsxs)(`div`,{className:[e.default.toast,e.default[t.variant]].join(` `),role:`status`,onMouseEnter:()=>i(t.id),onMouseLeave:()=>o(t.id),onFocus:()=>i(t.id),onBlur:()=>o(t.id),children:[(0,n.jsx)(`span`,{className:e.default.icon,children:a[t.variant]}),(0,n.jsx)(`span`,{className:e.default.message,children:t.message}),(0,n.jsx)(`button`,{type:`button`,"aria-label":`Close notification`,className:e.default.closeButton,onClick:()=>r(t.id),children:(0,n.jsx)(`svg`,{width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M9 3L3 9M3 3l6 6`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})})})]})}function s({children:a,maxToasts:s=5}){let[c,l]=(0,t.useState)([]),u=(0,t.useRef)(new Map),d=(0,t.useRef)(new Map),f=(0,t.useRef)(new Map),p=(0,t.useRef)(0),m=(0,t.useCallback)(e=>{let t=u.current.get(e);t!==void 0&&(clearTimeout(t),u.current.delete(e)),d.current.delete(e),f.current.delete(e),l(t=>t.filter(t=>t.id!==e))},[]),h=(0,t.useCallback)((e,t)=>{let n=setTimeout(()=>m(e),t);u.current.set(e,n)},[m]),g=(0,t.useCallback)(e=>{let t=u.current.get(e);t!==void 0&&(clearTimeout(t),u.current.delete(e),d.current.set(e,Date.now()))},[]),_=(0,t.useCallback)(e=>{let t=d.current.get(e);if(t===void 0)return;let n=Date.now()-t,r=Math.max(0,(f.current.get(e)??0)-n);d.current.delete(e),f.current.set(e,r),r>0?h(e,r):m(e)},[m,h]),v=(0,t.useCallback)(e=>{let t=`toast-${++p.current}`,n=e.variant??`info`,r=e.duration??5e3,i={id:t,message:e.message,variant:n,duration:r};return l(e=>{let t=[...e,i];return t.length>s?t.slice(t.length-s):t}),r>0&&(f.current.set(t,r),h(t,r)),t},[s,h]);return(0,n.jsxs)(i.Provider,{value:{show:v,dismiss:m},children:[a,(0,r.createPortal)((0,n.jsx)(`div`,{role:`region`,className:e.default.region,"aria-label":`Notifications`,"aria-live":`polite`,"aria-atomic":`false`,"aria-relevant":`additions text`,children:c.map(e=>(0,n.jsx)(o,{item:e,onDismiss:m,onPause:g,onResume:_},e.id))}),document.body)]})}s.displayName=`ToastProvider`;function c(){let e=(0,t.useContext)(i);if(!e)throw Error(`useToast must be used inside a <ToastProvider>`);return e}exports.ToastProvider=s,exports.useToast=c;
+const e=require("./Toast.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("react-dom");var i=(0,t.createContext)(null),a={info:(0,n.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:[(0,n.jsx)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,strokeWidth:`1.5`}),(0,n.jsx)(`path`,{d:`M8 7v4M8 5v.5`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})]}),success:(0,n.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:[(0,n.jsx)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,strokeWidth:`1.5`}),(0,n.jsx)(`path`,{d:`M5 8l2 2 4-4`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})]}),error:(0,n.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:[(0,n.jsx)(`circle`,{cx:`8`,cy:`8`,r:`7`,stroke:`currentColor`,strokeWidth:`1.5`}),(0,n.jsx)(`path`,{d:`M10 6L6 10M6 6l4 4`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})]}),warning:(0,n.jsxs)(`svg`,{width:`16`,height:`16`,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:[(0,n.jsx)(`path`,{d:`M8 2L14.9 14H1.1L8 2z`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinejoin:`round`}),(0,n.jsx)(`path`,{d:`M8 6.5v3M8 11v.5`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})]})};function o({item:t,dismissLabel:r,onDismiss:i,onPause:o,onResume:s}){return(0,n.jsxs)(`div`,{className:[e.default.toast,e.default[t.variant]].join(` `),role:`status`,onMouseEnter:()=>o(t.id),onMouseLeave:()=>s(t.id),onFocus:()=>o(t.id),onBlur:()=>s(t.id),children:[(0,n.jsx)(`span`,{className:e.default.icon,children:a[t.variant]}),(0,n.jsx)(`span`,{className:e.default.message,children:t.message}),(0,n.jsx)(`button`,{type:`button`,"aria-label":r,className:e.default.closeButton,onClick:()=>i(t.id),children:(0,n.jsx)(`svg`,{width:`12`,height:`12`,viewBox:`0 0 12 12`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M9 3L3 9M3 3l6 6`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`})})})]})}function s({children:a,maxToasts:s=5,dismissLabel:c=`Close notification`,regionLabel:l=`Notifications`}){let[u,d]=(0,t.useState)([]),f=(0,t.useRef)(new Map),p=(0,t.useRef)(new Map),m=(0,t.useRef)(new Map),h=(0,t.useRef)(0),g=(0,t.useCallback)(e=>{let t=f.current.get(e);t!==void 0&&(clearTimeout(t),f.current.delete(e)),p.current.delete(e),m.current.delete(e),d(t=>t.filter(t=>t.id!==e))},[]),_=(0,t.useCallback)((e,t)=>{let n=setTimeout(()=>g(e),t);f.current.set(e,n)},[g]),v=(0,t.useCallback)(e=>{let t=f.current.get(e);t!==void 0&&(clearTimeout(t),f.current.delete(e),p.current.set(e,Date.now()))},[]),y=(0,t.useCallback)(e=>{let t=p.current.get(e);if(t===void 0)return;let n=Date.now()-t,r=Math.max(0,(m.current.get(e)??0)-n);p.current.delete(e),m.current.set(e,r),r>0?_(e,r):g(e)},[g,_]),b=(0,t.useCallback)(e=>{let t=`toast-${++h.current}`,n=e.variant??`info`,r=e.duration??5e3,i={id:t,message:e.message,variant:n,duration:r};return d(e=>{let t=[...e,i];return t.length>s?t.slice(t.length-s):t}),r>0&&(m.current.set(t,r),_(t,r)),t},[s,_]);return(0,n.jsxs)(i.Provider,{value:{show:b,dismiss:g},children:[a,(0,r.createPortal)((0,n.jsx)(`div`,{role:`region`,className:e.default.region,"aria-label":l,"aria-live":`polite`,"aria-atomic":`false`,"aria-relevant":`additions text`,children:u.map(e=>(0,n.jsx)(o,{item:e,dismissLabel:c,onDismiss:g,onPause:v,onResume:y},e.id))}),document.body)]})}s.displayName=`ToastProvider`;function c(){let e=(0,t.useContext)(i);if(!e)throw Error(`useToast must be used inside a <ToastProvider>`);return e}exports.ToastProvider=s,exports.useToast=c;

package/dist/primitives/Toast/Toast.d.ts

@@ -19,8 +19,12 @@ export interface ToastProviderProps {
     children: React.ReactNode;
     /** Max toasts visible at once. Default: 5. */
     maxToasts?: number;
+    /** Accessible name of each toast's dismiss button. Default: `'Close notification'`. */
+    dismissLabel?: string;
+    /** Accessible name of the notifications region. Default: `'Notifications'`. */
+    regionLabel?: string;
 }
-export declare function ToastProvider({ children, maxToasts }: ToastProviderProps): import("react").JSX.Element;
+export declare function ToastProvider({ children, maxToasts, dismissLabel, regionLabel, }: ToastProviderProps): import("react").JSX.Element;
 export declare namespace ToastProvider {
     var displayName: string;
 }

package/dist/primitives/Toast/Toast.js

@@ -81,14 +81,14 @@ var l = t(null), u = {
 		})]
 	})
 };
-function d({ item: t, onDismiss: n, onPause: r, onResume: i }) {
+function d({ item: t, dismissLabel: n, onDismiss: r, onPause: i, onResume: a }) {
 	return /* @__PURE__ */ s("div", {
 		className: [e.toast, e[t.variant]].join(" "),
 		role: "status",
-		onMouseEnter: () => r(t.id),
-		onMouseLeave: () => i(t.id),
-		onFocus: () => r(t.id),
-		onBlur: () => i(t.id),
+		onMouseEnter: () => i(t.id),
+		onMouseLeave: () => a(t.id),
+		onFocus: () => i(t.id),
+		onBlur: () => a(t.id),
 		children: [
 			/* @__PURE__ */ o("span", {
 				className: e.icon,
@@ -100,9 +100,9 @@ function d({ item: t, onDismiss: n, onPause: r, onResume: i }) {
 			}),
 			/* @__PURE__ */ o("button", {
 				type: "button",
-				"aria-label": "Close notification",
+				"aria-label": n,
 				className: e.closeButton,
-				onClick: () => n(t.id),
+				onClick: () => r(t.id),
 				children: /* @__PURE__ */ o("svg", {
 					width: "12",
 					height: "12",
@@ -120,50 +120,51 @@ function d({ item: t, onDismiss: n, onPause: r, onResume: i }) {
 		]
 	});
 }
-function f({ children: t, maxToasts: r = 5 }) {
-	let [u, f] = a([]), p = i(/* @__PURE__ */ new Map()), m = i(/* @__PURE__ */ new Map()), h = i(/* @__PURE__ */ new Map()), g = i(0), _ = n((e) => {
-		let t = p.current.get(e);
-		t !== void 0 && (clearTimeout(t), p.current.delete(e)), m.current.delete(e), h.current.delete(e), f((t) => t.filter((t) => t.id !== e));
-	}, []), v = n((e, t) => {
-		let n = setTimeout(() => _(e), t);
-		p.current.set(e, n);
-	}, [_]), y = n((e) => {
-		let t = p.current.get(e);
-		t !== void 0 && (clearTimeout(t), p.current.delete(e), m.current.set(e, Date.now()));
-	}, []), b = n((e) => {
-		let t = m.current.get(e);
+function f({ children: t, maxToasts: r = 5, dismissLabel: u = "Close notification", regionLabel: f = "Notifications" }) {
+	let [p, m] = a([]), h = i(/* @__PURE__ */ new Map()), g = i(/* @__PURE__ */ new Map()), _ = i(/* @__PURE__ */ new Map()), v = i(0), y = n((e) => {
+		let t = h.current.get(e);
+		t !== void 0 && (clearTimeout(t), h.current.delete(e)), g.current.delete(e), _.current.delete(e), m((t) => t.filter((t) => t.id !== e));
+	}, []), b = n((e, t) => {
+		let n = setTimeout(() => y(e), t);
+		h.current.set(e, n);
+	}, [y]), x = n((e) => {
+		let t = h.current.get(e);
+		t !== void 0 && (clearTimeout(t), h.current.delete(e), g.current.set(e, Date.now()));
+	}, []), S = n((e) => {
+		let t = g.current.get(e);
 		if (t === void 0) return;
-		let n = Date.now() - t, r = Math.max(0, (h.current.get(e) ?? 0) - n);
-		m.current.delete(e), h.current.set(e, r), r > 0 ? v(e, r) : _(e);
-	}, [_, v]), x = n((e) => {
-		let t = `toast-${++g.current}`, n = e.variant ?? "info", i = e.duration ?? 5e3, a = {
+		let n = Date.now() - t, r = Math.max(0, (_.current.get(e) ?? 0) - n);
+		g.current.delete(e), _.current.set(e, r), r > 0 ? b(e, r) : y(e);
+	}, [y, b]), C = n((e) => {
+		let t = `toast-${++v.current}`, n = e.variant ?? "info", i = e.duration ?? 5e3, a = {
 			id: t,
 			message: e.message,
 			variant: n,
 			duration: i
 		};
-		return f((e) => {
+		return m((e) => {
 			let t = [...e, a];
 			return t.length > r ? t.slice(t.length - r) : t;
-		}), i > 0 && (h.current.set(t, i), v(t, i)), t;
-	}, [r, v]);
+		}), i > 0 && (_.current.set(t, i), b(t, i)), t;
+	}, [r, b]);
 	return /* @__PURE__ */ s(l.Provider, {
 		value: {
-			show: x,
-			dismiss: _
+			show: C,
+			dismiss: y
 		},
 		children: [t, c(/* @__PURE__ */ o("div", {
 			role: "region",
 			className: e.region,
-			"aria-label": "Notifications",
+			"aria-label": f,
 			"aria-live": "polite",
 			"aria-atomic": "false",
 			"aria-relevant": "additions text",
-			children: u.map((e) => /* @__PURE__ */ o(d, {
+			children: p.map((e) => /* @__PURE__ */ o(d, {
 				item: e,
-				onDismiss: _,
-				onPause: y,
-				onResume: b
+				dismissLabel: u,
+				onDismiss: y,
+				onPause: x,
+				onResume: S
 			}, e.id))
 		}), document.body)]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aseguragonzalez/ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "description": "Accessible, themeable design system for React SPAs",