@hyperpackai/hyperui 0.2.0 → 0.3.0

package/dist/components/NestedNavbar/index.js

@@ -0,0 +1,435 @@
+import { onCleanup, signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { FocusTrap } from "../FocusTrap/index.js";
+let navbarCounter = 0;
+const NESTED_NAVBAR_CSS = `
+/* ── Base ───────────────────────────────────────────────────────────── */
+.hu-nested-navbar {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--hu-space-4); padding: 0 var(--hu-space-6); min-height: 60px;
+  border-bottom: 1px solid color-mix(in srgb, var(--hu-border) 82%, transparent);
+  position: sticky; top: 0; z-index: var(--hu-z-sticky);
+  backdrop-filter: blur(12px);
+  background: color-mix(in srgb, var(--hu-bg) 88%, transparent);
+  box-shadow: var(--hu-shadow-xs);
+  overflow: visible;
+}
+.hu-nested-navbar__brand {
+  display: flex; align-items: center; gap: var(--hu-space-3); min-width: max-content;
+  text-decoration: none; color: var(--hu-text);
+  font-weight: var(--hu-font-weight-bold); font-size: var(--hu-font-size-md);
+}
+.hu-nested-navbar__end { display: flex; align-items: center; gap: var(--hu-space-2); min-width: max-content; }
+.hu-nested-navbar__actions { display: flex; align-items: center; gap: var(--hu-space-2); }
+
+/* ── Desktop Nav ────────────────────────────────────────────────────── */
+.hu-nested-navbar__nav { display: flex; align-items: center; gap: var(--hu-space-1); flex: 1; min-width: 0; overflow: visible; padding: 0 var(--hu-space-2); }
+.hu-nested-navbar__item { position: relative; }
+.hu-nested-navbar__item:not([data-open="true"]) [data-hu-nn-dropdown-panel] { display: none !important; }
+.hu-nested-navbar__link,
+.hu-nested-navbar__trigger {
+  display: inline-flex; align-items: center; gap: 4px;
+  padding: 7px 12px; border-radius: var(--hu-radius-md);
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium);
+  color: var(--hu-text-2); text-decoration: none; white-space: nowrap;
+  border: none; background: transparent; cursor: pointer;
+  font-family: inherit; font-size: inherit;
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-navbar__link:hover,
+.hu-nested-navbar__trigger:hover { color: var(--hu-text); background: var(--hu-bg-3); }
+.hu-nested-navbar__link:focus-visible,
+.hu-nested-navbar__trigger:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-navbar__link--active,
+.hu-nested-navbar__trigger--active {
+  color: var(--hu-primary); background: var(--hu-primary-bg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hu-primary) 20%, transparent);
+}
+.hu-nested-navbar__chevron {
+  width: 14px; height: 14px; flex-shrink: 0;
+  transition: transform var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-navbar__trigger[aria-expanded="true"] .hu-nested-navbar__chevron { transform: rotate(180deg); }
+
+/* ── Desktop Dropdown ───────────────────────────────────────────────── */
+.hu-nested-navbar__dropdown {
+  position: absolute; top: calc(100% + 6px); left: 0;
+  min-width: 220px; max-width: 320px;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-lg); box-shadow: var(--hu-shadow-lg);
+  padding: var(--hu-space-2); z-index: var(--hu-z-dropdown);
+  animation: hu-nn-dropdown-in var(--hu-duration-fast) var(--hu-ease-out);
+}
+@keyframes hu-nn-dropdown-in {
+  from { opacity: 0; transform: translateY(-6px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.hu-nested-navbar__child {
+  display: flex; align-items: flex-start; gap: var(--hu-space-3);
+  padding: var(--hu-space-2) var(--hu-space-3); border-radius: var(--hu-radius-md);
+  text-decoration: none; color: var(--hu-text-2); width: 100%;
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-navbar__child:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-navbar__child:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-navbar__child--active { color: var(--hu-primary); background: var(--hu-primary-bg); }
+.hu-nested-navbar__child-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--hu-text-3); }
+.hu-nested-navbar__child-body { min-width: 0; }
+.hu-nested-navbar__child-label { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium); color: inherit; line-height: 1.3; }
+.hu-nested-navbar__child-desc { font-size: var(--hu-font-size-xs); color: var(--hu-text-3); margin-top: 2px; line-height: 1.4; }
+
+/* ── Mobile Toggle ──────────────────────────────────────────────────── */
+.hu-nested-navbar__toggle {
+  display: none; align-items: center; justify-content: center;
+  width: 40px; height: 40px; padding: 0; flex-shrink: 0;
+  background: transparent; border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); cursor: pointer; color: var(--hu-text-2);
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-navbar__toggle:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-navbar__toggle:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+
+/* ── Mobile Backdrop ────────────────────────────────────────────────── */
+.hu-nested-navbar__backdrop {
+  position: fixed; inset: 0; z-index: var(--hu-z-backdrop);
+  background: var(--hu-overlay);
+  animation: hu-nn-fade-in var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-nested-navbar__mobile-overlay[hidden] { display: none !important; }
+@keyframes hu-nn-fade-in { from { opacity: 0; } to { opacity: 1; } }
+
+/* ── Mobile Drawer ──────────────────────────────────────────────────── */
+.hu-nested-navbar__drawer {
+  position: fixed; inset-y: 0; left: 0; z-index: var(--hu-z-modal);
+  width: min(82vw, 320px);
+  display: flex; flex-direction: column;
+  background: var(--hu-bg); border-right: 1px solid var(--hu-border);
+  box-shadow: var(--hu-shadow-xl);
+  animation: hu-nn-drawer-in var(--hu-duration-slow) var(--hu-ease-out);
+}
+@keyframes hu-nn-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+.hu-nested-navbar__drawer-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--hu-space-3) var(--hu-space-4); min-height: 60px;
+  border-bottom: 1px solid var(--hu-border);
+}
+.hu-nested-navbar__drawer-brand {
+  display: flex; align-items: center; gap: var(--hu-space-3);
+  text-decoration: none; color: var(--hu-text);
+  font-weight: var(--hu-font-weight-bold); font-size: var(--hu-font-size-md);
+}
+.hu-nested-navbar__drawer-close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 36px; height: 36px; padding: 0; flex-shrink: 0;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); cursor: pointer; color: var(--hu-text-2);
+}
+.hu-nested-navbar__drawer-close:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-navbar__drawer-close:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-navbar__drawer-body { flex: 1; overflow-y: auto; padding: var(--hu-space-2); }
+
+/* Accordion in drawer / sheet */
+.hu-nested-navbar__mob-link {
+  display: flex; align-items: center; gap: var(--hu-space-3);
+  min-height: 48px; padding: 10px var(--hu-space-3);
+  border-radius: var(--hu-radius-md); font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-medium); color: var(--hu-text-2);
+  text-decoration: none; transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-navbar__mob-link:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-navbar__mob-link--active { color: var(--hu-primary); background: var(--hu-primary-bg); }
+.hu-nested-navbar__acc-trigger {
+  display: flex; align-items: center; justify-content: space-between;
+  width: 100%; min-height: 48px; padding: 10px var(--hu-space-3);
+  background: transparent; border: none; border-radius: var(--hu-radius-md);
+  font-family: inherit; font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-medium); color: var(--hu-text-2);
+  cursor: pointer; text-align: left;
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-navbar__acc-trigger:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-navbar__acc-trigger--active { color: var(--hu-primary); }
+.hu-nested-navbar__acc-trigger:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-navbar__acc-chevron {
+  width: 16px; height: 16px; flex-shrink: 0;
+  transition: transform var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-navbar__acc-trigger[aria-expanded="true"] .hu-nested-navbar__acc-chevron { transform: rotate(180deg); }
+.hu-nested-navbar__acc-content { padding-left: var(--hu-space-3); }
+.hu-nested-navbar__acc-item:not([data-expanded="true"]) .hu-nested-navbar__acc-content { display: none !important; }
+.hu-nested-navbar__acc-child {
+  display: flex; align-items: center; gap: var(--hu-space-2);
+  min-height: 40px; padding: 8px var(--hu-space-3);
+  border-radius: var(--hu-radius-md); font-size: var(--hu-font-size-sm);
+  color: var(--hu-text-2); text-decoration: none;
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-navbar__acc-child:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-navbar__acc-child--active { color: var(--hu-primary); background: var(--hu-primary-bg); }
+
+/* ── Mobile Bottom Sheet ────────────────────────────────────────────── */
+.hu-nested-navbar__sheet {
+  position: fixed; inset-x: 0; bottom: 0; z-index: var(--hu-z-modal);
+  max-height: 85vh; display: flex; flex-direction: column;
+  background: var(--hu-bg);
+  border-top: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-xl) var(--hu-radius-xl) 0 0;
+  box-shadow: var(--hu-shadow-xl);
+  animation: hu-nn-sheet-in var(--hu-duration-slow) var(--hu-ease-out);
+}
+@keyframes hu-nn-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
+.hu-nested-navbar__sheet-handle {
+  width: 36px; height: 4px; border-radius: 2px;
+  background: var(--hu-border); margin: var(--hu-space-3) auto var(--hu-space-1); flex-shrink: 0;
+}
+.hu-nested-navbar__sheet-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--hu-space-2) var(--hu-space-4) var(--hu-space-3);
+  border-bottom: 1px solid var(--hu-border);
+}
+.hu-nested-navbar__sheet-title { font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); font-size: var(--hu-font-size-md); }
+.hu-nested-navbar__sheet-close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 34px; height: 34px; padding: 0;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); cursor: pointer; color: var(--hu-text-2);
+}
+.hu-nested-navbar__sheet-close:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-navbar__sheet-close:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-navbar__sheet-body { flex: 1; overflow-y: auto; padding: var(--hu-space-2); }
+
+/* ── Responsive Breakpoint ──────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .hu-nested-navbar__nav { display: none; }
+  .hu-nested-navbar__toggle { display: inline-flex; }
+}
+`;
+function isActive(a) {
+    return typeof a === "function" ? a() : (a ?? false);
+}
+const navbarState = new Map();
+function getNavbarState(key) {
+    let state = navbarState.get(key);
+    if (!state) {
+        state = {
+            openDropdown: signal(null),
+            mobileOpen: signal(false),
+            expandedItems: signal(new Set())
+        };
+        navbarState.set(key, state);
+    }
+    return state;
+}
+function getNavbarKey(props, items) {
+    return props.id ?? props.class ?? props.mobileTitle ?? items.map((item) => item.label).join("|") ?? `navbar-${navbarCounter + 1}`;
+}
+// ── SVG helpers ───────────────────────────────────────────────────────────────
+const chevronDown = h("svg", { class: "hu-nested-navbar__chevron", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("path", { d: "M4 6l4 4 4-4" }));
+const chevronDown16 = h("svg", { class: "hu-nested-navbar__acc-chevron", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("path", { d: "M4 6l4 4 4-4" }));
+const closeIcon = h("svg", { viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("path", { d: "M2 2l12 12M14 2L2 14" }));
+const menuIcon = h("svg", { viewBox: "0 0 20 20", width: "18", height: "18", fill: "none", stroke: "currentColor", "stroke-width": "1.75", "aria-hidden": "true" }, h("path", { d: "M3 5h14M3 10h14M3 15h14" }));
+// ── Component ─────────────────────────────────────────────────────────────────
+export function NestedNavbar(props) {
+    injectCSS("hu-nested-navbar", NESTED_NAVBAR_CSS);
+    const { items = [], mobileVariant = "drawer" } = props;
+    const instanceKey = getNavbarKey(props, items);
+    const id = props.id ?? `hu-nn-${++navbarCounter}`;
+    const { openDropdown, mobileOpen, expandedItems } = getNavbarState(instanceKey);
+    if (typeof document !== "undefined" && typeof document.addEventListener === "function") {
+        const closeOnOutsideClick = (event) => {
+            if (!openDropdown.value)
+                return;
+            const target = event.target;
+            if (target?.closest(".hu-nested-navbar__item[data-hu-nn-dropdown]"))
+                return;
+            closeDropdown();
+        };
+        document.addEventListener("click", closeOnOutsideClick);
+        onCleanup(() => document.removeEventListener("click", closeOnOutsideClick));
+    }
+    const syncDesktopDropdowns = (activeItem, open) => {
+        if (typeof document === "undefined")
+            return;
+        const root = activeItem?.closest(".hu-nested-navbar")
+            ?? (typeof document.getElementById === "function" ? document.getElementById(id) : null);
+        const dropdownItems = root?.querySelectorAll(".hu-nested-navbar__item[data-hu-nn-dropdown]");
+        dropdownItems?.forEach((itemEl) => {
+            const isOpen = open && itemEl === activeItem;
+            itemEl.dataset.open = String(isOpen);
+            itemEl.querySelector(".hu-nested-navbar__trigger")?.setAttribute("aria-expanded", String(isOpen));
+            itemEl.querySelectorAll("[data-hu-nn-dropdown-panel]").forEach((panel) => {
+                panel.hidden = !isOpen;
+            });
+        });
+    };
+    const closeDropdown = () => {
+        openDropdown.value = null;
+        syncDesktopDropdowns(null, false);
+    };
+    const syncMobile = (open) => {
+        if (typeof document === "undefined")
+            return;
+        if (typeof document.querySelector !== "function")
+            return;
+        const root = document.querySelector(`[data-hu-nn-root="${id}"]`);
+        root?.querySelector(".hu-nested-navbar__toggle")?.setAttribute("aria-expanded", String(open));
+        const overlay = root?.querySelector(".hu-nested-navbar__mobile-overlay");
+        if (overlay) {
+            overlay.hidden = !open;
+            overlay.dataset.open = String(open);
+        }
+    };
+    const setMobileOpen = (open) => {
+        mobileOpen.value = open;
+        syncMobile(open);
+    };
+    const closeMobile = () => { setMobileOpen(false); };
+    const handleLinkClick = (event, onClick, onClose) => {
+        onClick?.(event);
+        onClose?.();
+    };
+    const setDropdownOpen = (event, key, open) => {
+        const itemEl = event ? event.currentTarget.closest(".hu-nested-navbar__item") : null;
+        openDropdown.value = open ? key : null;
+        syncDesktopDropdowns(itemEl, open);
+    };
+    const toggleDropdown = (event, key) => {
+        const itemEl = event ? event.currentTarget.closest(".hu-nested-navbar__item") : null;
+        const isOpen = itemEl?.dataset.open === "true" || openDropdown.value === key;
+        openDropdown.value = isOpen ? null : key;
+        syncDesktopDropdowns(itemEl, !isOpen);
+    };
+    const syncMobileAccordion = (itemEl, expanded) => {
+        itemEl?.setAttribute("data-expanded", String(expanded));
+        itemEl?.querySelector(".hu-nested-navbar__acc-trigger")?.setAttribute("aria-expanded", String(expanded));
+        itemEl?.querySelectorAll(".hu-nested-navbar__acc-content").forEach((panel) => {
+            panel.hidden = !expanded;
+        });
+    };
+    const toggleAccordion = (event, key) => {
+        const next = new Set(expandedItems.value);
+        const itemEl = event ? event.currentTarget.closest(".hu-nested-navbar__acc-item") : null;
+        const expanded = !(itemEl?.dataset.expanded === "true" || next.has(key));
+        if (expanded)
+            next.add(key);
+        else
+            next.delete(key);
+        expandedItems.value = next;
+        syncMobileAccordion(itemEl, expanded);
+    };
+    // ── Desktop nav items ──────────────────────────────────────────────────────
+    const renderDesktopItems = () => items.map((item, i) => {
+        const key = item.id ?? item.label + i;
+        if (!item.children?.length) {
+            return h("div", { key, class: "hu-nested-navbar__item" }, h("a", {
+                href: item.href ?? "#",
+                class: () => cn("hu-nested-navbar__link", isActive(item.active) && "hu-nested-navbar__link--active"),
+                onClick: (event) => handleLinkClick(event, item.onClick),
+            }, item.label));
+        }
+        return h("div", {
+            key,
+            class: "hu-nested-navbar__item",
+            "data-hu-nn-dropdown": key,
+        }, h("button", {
+            type: "button",
+            class: () => cn("hu-nested-navbar__trigger", isActive(item.active) && "hu-nested-navbar__trigger--active"),
+            "aria-haspopup": "true",
+            "aria-expanded": () => String(openDropdown.value === key),
+            onKeydown: (event) => {
+                if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+                    event.preventDefault();
+                    setDropdownOpen(event, key, true);
+                }
+                if (event.key === "Escape") {
+                    event.preventDefault();
+                    setDropdownOpen(event, key, false);
+                }
+            },
+            onClick: (event) => toggleDropdown(event, key),
+        }, item.label, chevronDown), h("div", {
+            hidden: () => openDropdown.value !== key,
+            "data-hu-nn-dropdown-panel": "layer"
+        }, h("div", {
+            class: "hu-nested-navbar__dropdown",
+            role: "menu",
+            hidden: () => openDropdown.value !== key,
+            "data-hu-nn-dropdown-panel": "menu"
+        }, ...item.children.map((child) => h("a", {
+            key: child.href,
+            href: child.href,
+            class: () => cn("hu-nested-navbar__child", isActive(child.active) && "hu-nested-navbar__child--active"),
+            role: "menuitem",
+            onClick: (event) => handleLinkClick(event, child.onClick, closeDropdown),
+        }, child.icon && h("span", { class: "hu-nested-navbar__child-icon", "aria-hidden": "true" }, child.icon), h("span", { class: "hu-nested-navbar__child-body" }, h("span", { class: "hu-nested-navbar__child-label" }, child.label), child.description && h("span", { class: "hu-nested-navbar__child-desc" }, child.description)))))));
+    });
+    // ── Mobile accordion menu items ────────────────────────────────────────────
+    const renderMobileItems = (onClose) => items.map((item, i) => {
+        const key = item.id ?? item.label + i;
+        if (!item.children?.length) {
+            return h("a", {
+                key,
+                href: item.href ?? "#",
+                class: () => cn("hu-nested-navbar__mob-link", isActive(item.active) && "hu-nested-navbar__mob-link--active"),
+                onClick: (event) => handleLinkClick(event, item.onClick, onClose),
+            }, item.label);
+        }
+        const isExpanded = () => expandedItems.value.has(key);
+        return h("div", {
+            key,
+            class: "hu-nested-navbar__acc-item",
+            "data-expanded": () => String(isExpanded())
+        }, h("button", {
+            type: "button",
+            class: () => cn("hu-nested-navbar__acc-trigger", isActive(item.active) && "hu-nested-navbar__acc-trigger--active"),
+            "aria-expanded": () => String(isExpanded()),
+            onClick: (event) => toggleAccordion(event, key),
+        }, item.label, chevronDown16), h("div", {
+            class: "hu-nested-navbar__acc-content",
+            hidden: () => !isExpanded()
+        }, ...item.children.map((child) => h("a", {
+            key: child.href,
+            href: child.href,
+            class: () => cn("hu-nested-navbar__acc-child", isActive(child.active) && "hu-nested-navbar__acc-child--active"),
+            onClick: (event) => handleLinkClick(event, child.onClick, onClose),
+        }, child.label))));
+    });
+    // ── Mobile overlay ─────────────────────────────────────────────────────────
+    const renderMobileOverlay = () => {
+        const title = props.mobileTitle ?? "Menu";
+        const body = h("div", { class: mobileVariant === "bottom-sheet" ? "hu-nested-navbar__sheet-body" : "hu-nested-navbar__drawer-body" }, ...renderMobileItems(closeMobile));
+        const closeBtn = (cls) => h("button", {
+            type: "button",
+            class: cls,
+            "aria-label": "Close menu",
+            onClick: closeMobile,
+        }, closeIcon);
+        const overlay = mobileVariant === "bottom-sheet"
+            ? h("div", { class: "hu-nested-navbar__sheet", role: "dialog", "aria-modal": "true", "aria-label": title }, h("div", { class: "hu-nested-navbar__sheet-handle" }), h("div", { class: "hu-nested-navbar__sheet-header" }, h("span", { class: "hu-nested-navbar__sheet-title" }, title), closeBtn("hu-nested-navbar__sheet-close")), body)
+            : h("aside", { class: "hu-nested-navbar__drawer", role: "dialog", "aria-modal": "true", "aria-label": title }, h("div", { class: "hu-nested-navbar__drawer-header" }, props.brand
+                ? h("a", {
+                    href: props.brandHref ?? "/",
+                    class: "hu-nested-navbar__drawer-brand",
+                    onClick: (event) => handleLinkClick(event, props.onBrandClick, closeMobile)
+                }, props.brand)
+                : h("span", { class: "hu-nested-navbar__drawer-brand" }, title), closeBtn("hu-nested-navbar__drawer-close")), body);
+        return h("div", {
+            class: "hu-nested-navbar__mobile-overlay",
+            hidden: () => !mobileOpen.value,
+            "data-open": () => String(mobileOpen.value)
+        }, h("div", { class: "hu-nested-navbar__backdrop", onClick: closeMobile, "aria-hidden": "true" }), FocusTrap({ active: true, restoreFocus: true, autoFocus: true, onEscape: closeMobile, children: overlay }));
+    };
+    // ── Root VNode ─────────────────────────────────────────────────────────────
+    return h("div", { style: "display:contents;", "data-hu-nn-root": id }, h("header", { class: cn("hu-nested-navbar", props.class), id }, props.brand && h("a", {
+        href: props.brandHref ?? "/",
+        class: "hu-nested-navbar__brand",
+        onClick: props.onBrandClick
+    }, props.brand), h("nav", { class: "hu-nested-navbar__nav", "aria-label": "Main navigation" }, ...renderDesktopItems()), h("div", { class: "hu-nested-navbar__end" }, props.actions && h("div", { class: "hu-nested-navbar__actions" }, props.actions), h("button", {
+        type: "button",
+        class: "hu-nested-navbar__toggle",
+        "aria-label": "Open menu",
+        "aria-expanded": () => String(mobileOpen.value),
+        "aria-haspopup": "dialog",
+        onClick: () => { setMobileOpen(true); },
+    }, menuIcon))), renderMobileOverlay);
+}

package/dist/components/NestedSidebar/index.d.ts

@@ -0,0 +1,48 @@
+import { type Signal } from "@hyperpackai/hyperion";
+import { type VNode } from "../../theme/index.js";
+export interface NestedSidebarChildItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: unknown;
+    active?: boolean | Signal<boolean> | (() => boolean);
+    onClick?: () => void;
+}
+export interface NestedSidebarItem {
+    id: string;
+    label: string;
+    icon?: unknown;
+    badge?: unknown;
+    href?: string;
+    active?: boolean | Signal<boolean> | (() => boolean);
+    onClick?: () => void;
+    children?: NestedSidebarChildItem[];
+    defaultExpanded?: boolean;
+}
+export interface NestedSidebarSection {
+    label?: string;
+    items: NestedSidebarItem[];
+}
+export type NestedSidebarMobileVariant = "drawer" | "bottom-sheet";
+export type NestedSidebarPosition = "static" | "sticky" | "fixed";
+export interface NestedSidebarProps {
+    id?: string;
+    header?: unknown;
+    sections: NestedSidebarSection[];
+    footer?: unknown;
+    width?: "sm" | "md" | "lg";
+    position?: NestedSidebarPosition;
+    topOffset?: string | number;
+    height?: string | number;
+    responsive?: boolean;
+    mobileVariant?: NestedSidebarMobileVariant;
+    menuLabel?: string;
+    menuIcon?: unknown;
+    drawerTitle?: string;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    class?: string;
+}
+export declare function NestedSidebar(props: NestedSidebarProps): VNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NestedSidebar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NestedSidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqMpE,MAAM,WAAW,sBAAsB;IACrC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,sBAAsB,EAAE,CAAC;IACpC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B;AAED,MAAM,MAAM,0BAA0B,GAAG,QAAQ,GAAG,cAAc,CAAC;AACnE,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAElE,MAAM,WAAW,kBAAkB;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,oBAAoB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,0BAA0B,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4ED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,CAuM9D"}