highsoft-ui 1.0.152 → 1.0.154

package/dist/components/Sidebar/Sidebar.js

@@ -1,107 +1,140 @@
 "use client";
 import { t as e } from "../../clsx-BWCAbrjV.js";
-import { t } from "../../Button-BGsqFCRW.js";
-import { SidebarSectionContext as n, useSidebarLayout as r } from "./context.js";
-import { t as i } from "../../styles.module-Bd4HbnpA.js";
-import { SidebarResizer as a } from "./SidebarResizer.js";
-import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { E as t, t as n } from "../../esm-C4Ybr9s4.js";
+import { t as r } from "../../Button-DSGsV45k.js";
+import { t as i } from "../../Icon-VeXJMj8Q.js";
+import { t as a } from "../../Typography-AvvBRu-u.js";
+import { SidebarSectionContext as o, useSidebarLayout as s } from "./context.js";
+import { t as c } from "../../styles.module-DGKft2EO.js";
+import { SidebarResizer as l } from "./SidebarResizer.js";
+import { useCallback as u, useEffect as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region lib/components/Sidebar/Sidebar.tsx
-function f({ children: t, "aria-label": n = "Sidebar navigation", closeLabel: o = "Close navigation", className: l }) {
-	let { resizable: f, mobileOpen: p, closeMobile: m } = r(), h = c(null);
-	return s(() => {
-		p && h.current?.focus();
-	}, [p]), /* @__PURE__ */ d("aside", {
+var g = 72, _ = 56, v = .84, y = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+function b({ children: t, "aria-label": a = "Sidebar navigation", closeLabel: o = "Close navigation", className: p }) {
+	let { resizable: b, isMobile: x, mobileOpen: S, closeMobile: C, openFocus: w } = s(), T = f(null), E = x && S;
+	d(() => {
+		let e = T.current;
+		!S || !e || ((w === "search" ? e.querySelector(`.${c.header} input:not([type='hidden']):not([disabled])`) : null) ?? e).focus();
+	}, [S, w]), d(() => {
+		let e = window.visualViewport, t = T.current;
+		if (!E || !e || !t) return;
+		let n = () => {
+			let n = document.documentElement.clientHeight, r = Math.max(0, Math.round(n - e.offsetTop - e.height)), i = Math.max(0, Math.round(Math.min(e.height - _, n * v)));
+			t.style.setProperty("--hs-sheet-lift", `${r}px`), t.style.setProperty("--hs-sheet-max-h", `${i}px`);
+		};
+		return n(), e.addEventListener("resize", n), e.addEventListener("scroll", n), () => {
+			e.removeEventListener("resize", n), e.removeEventListener("scroll", n), t.style.removeProperty("--hs-sheet-lift"), t.style.removeProperty("--hs-sheet-max-h");
+		};
+	}, [E]), d(() => {
+		if (!E) return;
+		let e = (e) => {
+			let t = T.current;
+			if (e.key !== "Tab" || !t) return;
+			let n = Array.from(t.querySelectorAll(y)).filter((e) => e.offsetParent !== null || e === document.activeElement);
+			if (!n.length) return;
+			let r = n[0], i = n[n.length - 1], a = document.activeElement;
+			a === t ? e.shiftKey && (e.preventDefault(), i.focus()) : t.contains(a) ? a === (e.shiftKey ? r : i) && (e.preventDefault(), (e.shiftKey ? i : r).focus()) : (e.preventDefault(), r.focus());
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [E]);
+	let D = f(!1), O = f(0), k = f(0), A = u((e) => {
+		D.current = !1;
+		let t = T.current;
+		t?.classList.remove(c.sheetDragging), t?.style.removeProperty("--hs-sheet-dy"), e && C();
+	}, [C]), j = (e) => {
+		E && (e.currentTarget.setPointerCapture(e.pointerId), D.current = !0, O.current = e.clientY, k.current = 0, T.current?.classList.add(c.sheetDragging));
+	}, M = (e) => {
+		D.current && (k.current = Math.max(0, e.clientY - O.current), T.current?.style.setProperty("--hs-sheet-dy", `${k.current}px`));
+	}, N = (e) => {
+		D.current && (e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), A(k.current > g));
+	};
+	return d(() => {
+		!S && D.current && A(!1);
+	}, [S, A]), /* @__PURE__ */ h("aside", {
+		ref: T,
 		id: "hs-sidebar-drawer",
-		className: e(i.sidebar, p && i.sidebarOpen, l),
-		"aria-label": n,
+		className: e(c.sidebar, S && c.sidebarOpen, p),
+		"aria-label": a,
+		role: E ? "dialog" : void 0,
+		"aria-modal": E ? !0 : void 0,
+		tabIndex: -1,
+		inert: x && !S ? !0 : void 0,
 		children: [
-			/* @__PURE__ */ u("button", {
-				ref: h,
-				type: "button",
-				className: i.close,
-				"aria-label": o,
-				onClick: m,
-				children: /* @__PURE__ */ u(_, {})
+			/* @__PURE__ */ m("div", {
+				className: c.grabber,
+				"aria-hidden": "true",
+				onPointerDown: j,
+				onPointerMove: M,
+				onPointerUp: N,
+				onPointerCancel: N,
+				children: /* @__PURE__ */ m("span", { className: c.grabberPill })
 			}),
+			x ? /* @__PURE__ */ m("span", {
+				className: c.close,
+				children: /* @__PURE__ */ m(r, {
+					variant: "plain",
+					size: 300,
+					"aria-label": o,
+					onClick: C,
+					children: /* @__PURE__ */ m(i, {
+						name: n,
+						size: 16
+					})
+				})
+			}) : null,
 			t,
-			f ? /* @__PURE__ */ u(a, {}) : null
+			b ? /* @__PURE__ */ m(l, {}) : null
 		]
 	});
 }
-function p({ children: t, className: n }) {
-	return /* @__PURE__ */ u("div", {
-		className: e(i.header, n),
+function x({ children: t, className: n }) {
+	return /* @__PURE__ */ m("div", {
+		className: e(c.header, n),
 		children: t
 	});
 }
-function m({ children: t, className: n }) {
-	return /* @__PURE__ */ u("div", {
-		className: e(i.body, n),
+function S({ children: t, className: n }) {
+	return /* @__PURE__ */ m("div", {
+		className: e(c.body, n),
 		children: t
 	});
 }
-function h({ children: r, label: a, collapsible: s = !1, minimizeLabel: f = "Minimize", action: p, className: m }) {
-	let [h, _] = l(0), v = c(/* @__PURE__ */ new Set()), [y, b] = l(0), x = o((e, t) => {
-		let n = v.current;
-		t ? n.add(e) : n.delete(e), b(n.size);
-	}, []), S = s && p == null && y > 0, C = a != null || p != null || S;
-	return /* @__PURE__ */ u(n.Provider, {
+function C({ children: n, label: s, collapsible: l = !1, minimizeLabel: d = "Minimize", action: g, className: _ }) {
+	let [v, y] = p(0), b = f(/* @__PURE__ */ new Set()), [x, S] = p(0), C = u((e, t) => {
+		let n = b.current;
+		t ? n.add(e) : n.delete(e), S(n.size);
+	}, []), w = l && g == null && x > 0, T = s != null || g != null || w;
+	return /* @__PURE__ */ m(o.Provider, {
 		value: {
-			collapseNonce: h,
-			reportOpen: x
+			collapseNonce: v,
+			reportOpen: C
 		},
-		children: /* @__PURE__ */ d("section", {
-			className: e(i.section, C && i.hasStickyHead, m),
-			children: [C ? /* @__PURE__ */ d("div", {
-				className: i.sectionHead,
-				children: [a == null ? null : /* @__PURE__ */ u("h3", {
-					className: i.sectionLabel,
-					children: a
-				}), p ?? (S ? /* @__PURE__ */ u(t, {
+		children: /* @__PURE__ */ h("section", {
+			className: e(c.section, T && c.hasStickyHead, _),
+			children: [T ? /* @__PURE__ */ h("div", {
+				className: c.sectionHead,
+				children: [s == null ? null : /* @__PURE__ */ m(a, {
+					as: "h3",
+					size: 75,
+					weight: "semi",
+					color: "secondary",
+					className: c.sectionLabel,
+					children: s
+				}), g ?? (w ? /* @__PURE__ */ m(r, {
 					variant: "plain",
 					size: 100,
-					className: i.minimizeBtn,
-					iconLeft: /* @__PURE__ */ u(g, {}),
-					onClick: () => _((e) => e + 1),
-					children: f
+					className: c.minimizeBtn,
+					iconLeft: /* @__PURE__ */ m(i, {
+						name: t,
+						size: 12
+					}),
+					onClick: () => y((e) => e + 1),
+					children: d
 				}) : null)]
-			}) : null, r]
+			}) : null, n]
 		})
 	});
 }
-function g() {
-	return /* @__PURE__ */ d("svg", {
-		width: "14",
-		height: "14",
-		viewBox: "0 0 16 16",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "1.25",
-		strokeLinecap: "round",
-		strokeLinejoin: "round",
-		"aria-hidden": "true",
-		children: [/* @__PURE__ */ u("rect", {
-			x: "2.5",
-			y: "2.5",
-			width: "11",
-			height: "11",
-			rx: "2"
-		}), /* @__PURE__ */ u("path", { d: "M5.5 8h5" })]
-	});
-}
-function _() {
-	return /* @__PURE__ */ u("svg", {
-		width: "18",
-		height: "18",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ u("path", { d: "M18 6 6 18M6 6l12 12" })
-	});
-}
 //#endregion
-export { f as Sidebar, m as SidebarBody, p as SidebarHeader, h as SidebarSection };
+export { b as Sidebar, S as SidebarBody, x as SidebarHeader, C as SidebarSection };

package/dist/components/Sidebar/SidebarLayout.js

@@ -1,95 +1,135 @@
 "use client";
-import { t as e } from "../../clsx-BWCAbrjV.js";
-import { SidebarLayoutContext as t } from "./context.js";
-import { t as n } from "../../styles.module-Bd4HbnpA.js";
-import { 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 { a as e } from "../../utils-K9S_6_Eq.js";
+import { t } from "../../clsx-BWCAbrjV.js";
+import { G as n } from "../../esm-C4Ybr9s4.js";
+import { t as r } from "../../Typography-AvvBRu-u.js";
+import { SidebarLayoutContext as i } from "./context.js";
+import { t as a } from "../../styles.module-DGKft2EO.js";
+import { useCallback as o, useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region lib/components/Sidebar/SidebarLayout.tsx
-function l({ children: l, defaultWidth: u = 320, minWidth: f = 230, maxWidth: p = 460, resizable: m = !0, storageKey: h, mobileTriggerLabel: g = "Menu", fill: _ = !0, className: v, style: y }) {
-	let [b, x] = o(u), [S, C] = o(!1), w = a(null), T = r((e) => {
-		let t = Math.min(Math.max(Math.round(e), f), p);
-		if (x(t), h) try {
-			localStorage.setItem(h, String(t));
+var f = "(max-width: 760px)";
+function p({ children: p, defaultWidth: m = 320, minWidth: h = 230, maxWidth: g = 460, resizable: _ = !0, storageKey: v, mobileTriggerLabel: y = "Navigation", mobileTriggerValue: b, mobileTriggerIcon: x, mobileTriggerAction: S, mobileBar: C = !0, fill: w = !0, className: T, style: E }) {
+	let [D, O] = l(m), [k, A] = l(!1), [j, M] = l("sheet"), [N, P] = l(""), F = e(f), I = c(null), L = c(null), R = o((e, t) => {
+		if (t === null) {
+			L.current === e && (L.current = null, P(""));
+			return;
+		}
+		L.current = e, P(t);
+	}, []), z = o((e) => {
+		let t = Math.min(Math.max(Math.round(e), h), g);
+		if (O(t), v) try {
+			localStorage.setItem(v, String(t));
 		} catch {}
 	}, [
-		f,
-		p,
-		h
+		h,
+		g,
+		v
 	]);
-	i(() => {
-		if (h) try {
-			let e = localStorage.getItem(h);
-			e && T(Number(e) || u);
+	s(() => {
+		if (v) try {
+			let e = localStorage.getItem(v);
+			e && z(Number(e) || m);
 		} catch {}
 	}, []);
-	let E = r(() => {
-		C(!1), w.current?.focus();
-	}, []), D = r(() => C(!0), []);
-	return i(() => {
-		if (!S) return;
+	let B = o(() => {
+		A(!1), I.current?.focus();
+	}, []), V = o((e) => {
+		M(e?.focus === "search" ? "search" : "sheet"), A(!0);
+	}, []);
+	s(() => {
+		F || A(!1);
+	}, [F]), s(() => {
+		if (!k) return;
 		let e = (e) => {
-			e.key === "Escape" && E();
+			e.key === "Escape" && B();
 		};
 		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-	}, [S, E]), /* @__PURE__ */ s(t.Provider, {
+	}, [k, B]), s(() => {
+		if (!k || !F) return;
+		let { body: e } = document, t = e.style.overflow, n = e.style.paddingRight, r = window.innerWidth - document.documentElement.clientWidth;
+		return e.style.overflow = "hidden", r > 0 && (e.style.paddingRight = `${r}px`), () => {
+			e.style.overflow = t, e.style.paddingRight = n;
+		};
+	}, [k, F]);
+	let H = b === !1 ? null : (b ?? N) || null;
+	return /* @__PURE__ */ u(i.Provider, {
 		value: {
-			resizable: m,
-			width: b,
-			setWidth: T,
-			minWidth: f,
-			maxWidth: p,
-			mobileOpen: S,
-			openMobile: D,
-			closeMobile: E
+			resizable: _,
+			width: D,
+			setWidth: z,
+			minWidth: h,
+			maxWidth: g,
+			isMobile: F,
+			mobileOpen: k,
+			openMobile: V,
+			closeMobile: B,
+			openFocus: j,
+			activePage: N,
+			reportActivePage: R
 		},
-		children: /* @__PURE__ */ c("div", {
-			className: e(n.layout, _ && n.fill, v),
+		children: /* @__PURE__ */ d("div", {
+			className: t(a.layout, w && a.fill, C && a.hasMobileBar, T),
 			style: {
-				"--hs-sidebar-w": `${b}px`,
-				...y
+				"--hs-sidebar-w": `${D}px`,
+				...E
 			},
 			children: [
-				/* @__PURE__ */ s("div", {
-					className: n.mobileBar,
-					children: /* @__PURE__ */ c("button", {
-						ref: w,
+				C ? /* @__PURE__ */ d("div", {
+					className: a.mobileBar,
+					children: [/* @__PURE__ */ d("button", {
+						ref: I,
 						type: "button",
-						className: n.trigger,
-						"aria-expanded": S,
+						className: a.trigger,
+						"aria-expanded": k,
 						"aria-controls": "hs-sidebar-drawer",
-						onClick: D,
-						children: [/* @__PURE__ */ s(d, {}), g]
-					})
-				}),
-				l,
-				/* @__PURE__ */ s("div", {
-					className: e(n.backdrop, S && n.backdropOpen),
-					onClick: E,
+						onClick: () => V(),
+						children: [
+							x == null ? null : /* @__PURE__ */ u("span", {
+								className: a.triggerIcon,
+								children: x
+							}),
+							/* @__PURE__ */ d("span", {
+								className: a.triggerText,
+								children: [/* @__PURE__ */ u(r, {
+									size: H ? 75 : 100,
+									weight: "semi",
+									color: H ? "tertiary" : "primary",
+									className: t(a.triggerLine, H && a.triggerOverline),
+									children: y
+								}), H ? /* @__PURE__ */ u(r, {
+									size: 100,
+									weight: "semi",
+									className: a.triggerLine,
+									children: H
+								}) : null]
+							}),
+							/* @__PURE__ */ u(n, {
+								className: a.triggerChevron,
+								"aria-hidden": "true"
+							})
+						]
+					}), S == null ? null : /* @__PURE__ */ u("div", {
+						className: a.mobileBarAction,
+						children: S
+					})]
+				}) : null,
+				p,
+				/* @__PURE__ */ u("div", {
+					className: t(a.backdrop, k && a.backdropOpen),
+					onClick: B,
 					"aria-hidden": "true"
 				})
 			]
 		})
 	});
 }
-function u({ children: t, className: r, ...i }) {
-	return /* @__PURE__ */ s("main", {
-		className: e(n.main, r),
-		...i,
-		children: t
-	});
-}
-function d() {
-	return /* @__PURE__ */ s("svg", {
-		width: "18",
-		height: "18",
-		viewBox: "0 0 24 24",
-		fill: "none",
-		stroke: "currentColor",
-		strokeWidth: "2",
-		strokeLinecap: "round",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ s("path", { d: "M3 6h18M3 12h18M3 18h18" })
+function m({ children: e, className: n, ...r }) {
+	return /* @__PURE__ */ u("main", {
+		className: t(a.main, n),
+		...r,
+		children: e
 	});
 }
 //#endregion
-export { l as SidebarLayout, u as SidebarMain };
+export { p as SidebarLayout, m as SidebarMain };

package/dist/components/Sidebar/SidebarResizer.js

@@ -1,6 +1,6 @@
 "use client";
 import { useSidebarLayout as e } from "./context.js";
-import { t } from "../../styles.module-Bd4HbnpA.js";
+import { t } from "../../styles.module-DGKft2EO.js";
 import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region lib/components/Sidebar/SidebarResizer.tsx

package/dist/components/Sidebar/navPath.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext as e, isValidElement as t, useContext as n } from "react";
+//#region lib/components/Sidebar/navPath.ts
+var r = e([]);
+function i() {
+	return n(r);
+}
+function a(e) {
+	return e == null || typeof e == "boolean" ? "" : typeof e == "string" || typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(a).join("") : t(e) ? a(e.props.children) : "";
+}
+//#endregion
+export { r as NavPathContext, a as textOf, i as useNavPath };

package/dist/components/VideoCover/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../VideoCover-DqMDvzvA.js";
+import { t as e } from "../../VideoCover-BkbLsmQ_.js";
 export { e as VideoCover };

package/dist/components/VideoPlayer/VideoPlayerModal.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../VideoPlayerModal-D1v1O2kW.js";
+import { t as e } from "../../VideoPlayerModal-DIHMoFgS.js";
 export { e as VideoPlayerModal };

package/dist/components/VideoPlayer/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../VideoPlayer-Cq_garSg.js";
+import { t as e } from "../../VideoPlayer-CY63501h.js";
 export { e as VideoPlayer };

package/dist/{create-element-CDnUGrhg.js → create-element-C3ORyDVw.js}

@@ -1,5 +1,5 @@
 import { r as e } from "./chunk-jwUa06l-.js";
-import { nt as t } from "./esm-BnxclXHW.js";
+import { at as t } from "./esm-C4Ybr9s4.js";
 import n from "react";
 //#region node_modules/@babel/runtime/helpers/esm/typeof.js
 function r(e) {