@aseguragonzalez/ui 1.0.5 → 1.2.0

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, defaultCollapsed: y = !1, isCollapsed: b, onCollapsedChange: x, defaultMobileOpen: S = !1, isMobileOpen: C, onMobileOpenChange: w, className: T }, E) => {
+	let [D, O] = o(y), k = b ?? D, [A, j] = o(S), M = C ?? A, [N] = o(() => typeof document < "u"), P = a(null), F = a(null);
+	i(() => {
+		if (window.matchMedia?.("(max-width: 767px)")?.matches ?? !1) return M ? (F.current = document.activeElement, document.body.style.overflow = "hidden", (P.current?.querySelector(u))?.focus()) : (document.body.style.overflow = "", F.current?.focus(), F.current = null), () => {
 			document.body.style.overflow = "";
 		};
-	}, [A]);
-	let P = n(() => {
-		let e = !D;
-		v === void 0 && E(e), y?.(e);
+	}, [M]);
+	let I = r(() => {
+		let e = !k;
+		b === void 0 && O(e), x?.(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 ?? ""
+		k,
+		b,
+		x
+	]), L = r(() => {
+		C === void 0 && j(!1), w?.(!1);
+	}, [C, w]), R = r((e) => {
+		e.key === "Escape" && L();
+	}, [L]), z = [
+		t.sidebar,
+		k ? t.collapsed : "",
+		M ? t.mobileOpen : "",
+		T ?? ""
 	].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: E,
+		className: z,
+		children: [N && M && l(/* @__PURE__ */ s("div", {
+			className: t.backdrop,
+			onClick: L,
 			"aria-hidden": "true"
-		}), document.body), /* @__PURE__ */ s("div", {
-			ref: M,
-			className: e.panel,
-			onKeyDown: I,
+		}), document.body), /* @__PURE__ */ c("div", {
+			ref: P,
+			className: t.panel,
+			onKeyDown: R,
 			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,
+						className: t.mobileCloseButton,
+						onClick: L,
 						"aria-label": "Close sidebar",
-						children: /* @__PURE__ */ o(f, {})
+						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,
+						className: t.mobileCloseButton,
+						onClick: L,
 						"aria-label": "Close sidebar",
-						children: /* @__PURE__ */ o(f, {})
+						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?.(), M && L();
+								},
+								className: [t.navLink, n.isActive ? t.navLinkActive : ""].filter(Boolean).join(" "),
+								"aria-current": n.isActive ? "page" : void 0,
+								"aria-label": n.icon && k ? n.label : void 0,
+								title: n.icon && k ? 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: I,
+					"aria-label": k ? "Expand sidebar" : "Collapse sidebar",
+					"aria-expanded": !k,
+					children: s(k ? 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>;