@hyperpackai/hyperui 0.2.0 → 0.3.0

package/dist/components/NestedSidebar/index.js

@@ -0,0 +1,368 @@
+import { signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { FocusTrap } from "../FocusTrap/index.js";
+let sidebarCounter = 0;
+const NESTED_SIDEBAR_CSS = `
+/* ── Base ───────────────────────────────────────────────────────────── */
+.hu-nested-sidebar {
+  --hu-ns-width: 260px;
+  --hu-ns-top: 0px;
+  --hu-ns-height: 100vh;
+  display: flex; flex-direction: column;
+  width: var(--hu-ns-width); min-width: var(--hu-ns-width);
+  height: var(--hu-ns-height); overflow: hidden;
+  background: linear-gradient(180deg, var(--hu-bg), color-mix(in srgb, var(--hu-bg-2) 64%, var(--hu-bg)));
+  border-right: 1px solid color-mix(in srgb, var(--hu-border) 82%, transparent);
+  position: sticky; top: var(--hu-ns-top);
+}
+.hu-nested-sidebar--sm { --hu-ns-width: 220px; }
+.hu-nested-sidebar--md { --hu-ns-width: 260px; }
+.hu-nested-sidebar--lg { --hu-ns-width: 300px; }
+.hu-nested-sidebar--static  { position: static; }
+.hu-nested-sidebar--sticky  { position: sticky; top: var(--hu-ns-top); }
+.hu-nested-sidebar--fixed   { position: fixed; top: var(--hu-ns-top); left: 0; bottom: 0; }
+
+.hu-nested-sidebar__header {
+  padding: var(--hu-space-4) var(--hu-space-4) var(--hu-space-3);
+  border-bottom: 1px solid var(--hu-border); flex-shrink: 0;
+}
+.hu-nested-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--hu-space-2); scrollbar-width: thin; }
+.hu-nested-sidebar__footer { padding: var(--hu-space-3) var(--hu-space-4); border-top: 1px solid var(--hu-border); flex-shrink: 0; }
+
+/* Section */
+.hu-nested-sidebar__section { margin-bottom: var(--hu-space-4); }
+.hu-nested-sidebar__section-label {
+  padding: var(--hu-space-2) var(--hu-space-3); font-size: 11px;
+  font-weight: var(--hu-font-weight-semibold); color: var(--hu-text-3);
+  text-transform: uppercase; letter-spacing: .06em;
+}
+
+/* Flat item */
+.hu-nested-sidebar__item {
+  display: flex; align-items: center; gap: var(--hu-space-3); width: 100%;
+  min-height: 38px; padding: 8px var(--hu-space-3); border-radius: var(--hu-radius-md);
+  font-size: var(--hu-font-size-sm); font-family: inherit;
+  color: var(--hu-text-2); text-decoration: none;
+  border: none; background: transparent; cursor: pointer;
+  font-weight: var(--hu-font-weight-medium); text-align: left;
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease), transform var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-nested-sidebar__item:hover { background: var(--hu-bg-3); color: var(--hu-text); transform: translateX(1px); }
+.hu-nested-sidebar__item:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-sidebar__item--active { background: var(--hu-primary-bg); color: var(--hu-primary); box-shadow: inset 3px 0 0 var(--hu-primary); }
+.hu-nested-sidebar__item-icon { width: 18px; height: 18px; flex-shrink: 0; }
+.hu-nested-sidebar__item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-nested-sidebar__item-badge { margin-left: auto; flex-shrink: 0; }
+
+/* Nested group trigger */
+.hu-nested-sidebar__group-trigger {
+  display: flex; align-items: center; gap: var(--hu-space-3); width: 100%;
+  min-height: 38px; padding: 8px var(--hu-space-3); border-radius: var(--hu-radius-md);
+  font-size: var(--hu-font-size-sm); font-family: inherit;
+  color: var(--hu-text-2); background: transparent; border: none;
+  cursor: pointer; font-weight: var(--hu-font-weight-medium); text-align: left;
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-sidebar__group-trigger:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-sidebar__group-trigger:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-sidebar__group-trigger--active { color: var(--hu-primary); }
+.hu-nested-sidebar__group-chevron {
+  width: 14px; height: 14px; margin-left: auto; flex-shrink: 0;
+  transition: transform var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-sidebar__group-trigger[aria-expanded="true"] .hu-nested-sidebar__group-chevron { transform: rotate(90deg); }
+
+/* Child items */
+.hu-nested-sidebar__children {
+  padding-left: var(--hu-space-4); margin-top: 2px; margin-bottom: 2px;
+  border-left: 2px solid var(--hu-border);
+  margin-left: calc(var(--hu-space-3) + 9px);
+}
+.hu-nested-sidebar__group:not([data-expanded="true"]) .hu-nested-sidebar__children { display: none !important; }
+.hu-nested-sidebar__child {
+  display: flex; align-items: center; gap: var(--hu-space-2); width: 100%;
+  min-height: 34px; padding: 6px var(--hu-space-2); border-radius: var(--hu-radius-sm);
+  font-size: var(--hu-font-size-sm); font-family: inherit;
+  color: var(--hu-text-2); text-decoration: none;
+  border: none; background: transparent; cursor: pointer;
+  font-weight: var(--hu-font-weight-medium); text-align: left;
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-sidebar__child:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-sidebar__child:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-sidebar__child--active { color: var(--hu-primary); background: var(--hu-primary-bg); }
+
+/* ── Mobile Bar & Toggle ────────────────────────────────────────────── */
+.hu-nested-sidebar__root { display: contents; }
+.hu-nested-sidebar__mobile-shell { display: none; }
+.hu-nested-sidebar__mobile-bar {
+  width: 100%; padding: var(--hu-space-2) var(--hu-space-3);
+  background: color-mix(in srgb, var(--hu-bg) 92%, transparent);
+  border-bottom: 1px solid var(--hu-border);
+}
+.hu-nested-sidebar__menu-btn {
+  display: inline-flex; align-items: center; gap: var(--hu-space-2);
+  min-height: 44px; padding: 0 var(--hu-space-3); max-width: 100%;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); box-shadow: var(--hu-shadow-xs);
+  font: inherit; font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); cursor: pointer;
+  transition: border-color var(--hu-duration) var(--hu-ease), background var(--hu-duration) var(--hu-ease);
+}
+.hu-nested-sidebar__menu-btn:hover { background: var(--hu-bg-2); border-color: var(--hu-border-2); }
+.hu-nested-sidebar__menu-btn:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-sidebar__menu-btn-icon { display: inline-flex; align-items: center; width: 20px; height: 20px; flex-shrink: 0; }
+
+/* ── Mobile Backdrop ────────────────────────────────────────────────── */
+.hu-nested-sidebar__backdrop {
+  position: fixed; inset: 0; z-index: var(--hu-z-backdrop);
+  background: var(--hu-overlay);
+  animation: hu-ns-fade-in var(--hu-duration-fast) var(--hu-ease);
+}
+@keyframes hu-ns-fade-in { from { opacity: 0; } to { opacity: 1; } }
+
+/* ── Mobile Drawer ──────────────────────────────────────────────────── */
+.hu-nested-sidebar__drawer {
+  position: fixed; inset-y: 0; left: 0; z-index: var(--hu-z-modal);
+  width: min(82vw, 320px);
+  display: flex; flex-direction: column;
+  background: linear-gradient(180deg, var(--hu-bg), color-mix(in srgb, var(--hu-bg-2) 74%, var(--hu-bg)));
+  border-right: 1px solid var(--hu-border);
+  box-shadow: var(--hu-shadow-xl);
+  animation: hu-ns-drawer-in var(--hu-duration-slow) var(--hu-ease-out);
+}
+@keyframes hu-ns-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+.hu-nested-sidebar__drawer-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--hu-space-4); border-bottom: 1px solid var(--hu-border);
+}
+.hu-nested-sidebar__drawer-title { font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-nested-sidebar__drawer-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-sidebar__drawer-close:hover { color: var(--hu-text); background: var(--hu-bg-3); }
+.hu-nested-sidebar__drawer-close:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-sidebar__drawer-body { flex: 1; overflow-y: auto; padding: var(--hu-space-2); }
+
+/* The drawer items use the same .hu-nested-sidebar__item / .hu-nested-sidebar__child styles */
+.hu-nested-sidebar__drawer .hu-nested-sidebar__item { min-height: 44px; }
+.hu-nested-sidebar__drawer .hu-nested-sidebar__child { min-height: 40px; }
+
+/* ── Mobile Bottom Sheet ────────────────────────────────────────────── */
+.hu-nested-sidebar__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-ns-sheet-in var(--hu-duration-slow) var(--hu-ease-out);
+}
+@keyframes hu-ns-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
+.hu-nested-sidebar__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-sidebar__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-sidebar__sheet-title { font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); font-size: var(--hu-font-size-md); }
+.hu-nested-sidebar__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-sidebar__sheet-close:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-nested-sidebar__sheet-close:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-nested-sidebar__sheet-body { flex: 1; overflow-y: auto; padding: var(--hu-space-2); }
+.hu-nested-sidebar__sheet .hu-nested-sidebar__item { min-height: 44px; }
+.hu-nested-sidebar__sheet .hu-nested-sidebar__child { min-height: 40px; }
+
+/* ── Responsive Breakpoint ──────────────────────────────────────────── */
+@media (max-width: 1024px) {
+  .hu-nested-sidebar--responsive { display: none; }
+  .hu-nested-sidebar__root { display: block; width: 100%; }
+  .hu-nested-sidebar__mobile-shell { display: block; }
+  .hu-nested-sidebar__mobile-bar { position: sticky; top: var(--hu-ns-top); z-index: var(--hu-z-sticky); }
+}
+`;
+const nestedSidebarState = new Map();
+function getSidebarState(key, sections, defaultOpen) {
+    let state = nestedSidebarState.get(key);
+    const defaultExpanded = collectDefaultExpanded(sections);
+    if (!state) {
+        state = {
+            expandedItems: signal(defaultExpanded),
+            uncontrolledOpen: signal(defaultOpen),
+            seededDefaults: defaultExpanded
+        };
+        nestedSidebarState.set(key, state);
+        return state;
+    }
+    for (const itemId of defaultExpanded) {
+        if (!state.seededDefaults.has(itemId)) {
+            const next = new Set(state.expandedItems.value);
+            next.add(itemId);
+            state.expandedItems.value = next;
+            state.seededDefaults.add(itemId);
+        }
+    }
+    return state;
+}
+function collectDefaultExpanded(sections) {
+    const expanded = new Set();
+    for (const section of sections) {
+        for (const item of section.items) {
+            if (item.defaultExpanded && item.children?.length)
+                expanded.add(item.id);
+        }
+    }
+    return expanded;
+}
+function getSidebarKey(props) {
+    return props.id ?? props.class ?? props.drawerTitle ?? props.menuLabel ?? props.sections.map((section) => section.items.map((item) => item.id).join(",")).join("|") ?? `nested-sidebar-${sidebarCounter + 1}`;
+}
+// ── SVG helpers ───────────────────────────────────────────────────────────────
+const chevronRight = h("svg", { class: "hu-nested-sidebar__group-chevron", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2", "aria-hidden": "true" }, h("path", { d: "M6 4l4 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 menuHamburger = 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" }));
+// ── Helpers ───────────────────────────────────────────────────────────────────
+function isItemActive(active) {
+    if (typeof active === "function")
+        return active();
+    if (typeof active === "object" && active != null && "peek" in active)
+        return active.value;
+    return active === true;
+}
+function formatCssSize(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+// ── Component ─────────────────────────────────────────────────────────────────
+export function NestedSidebar(props) {
+    injectCSS("hu-nested-sidebar", NESTED_SIDEBAR_CSS);
+    const { sections, width = "md", position = "sticky", responsive = true, mobileVariant = "drawer" } = props;
+    const sid = props.id ?? `hu-ns-${++sidebarCounter}`;
+    const state = getSidebarState(getSidebarKey(props), sections, props.defaultOpen ?? false);
+    const { expandedItems, uncontrolledOpen } = state;
+    // Controlled / uncontrolled mobile open state
+    const isControlled = () => props.open !== undefined;
+    const isOpen = () => {
+        if (typeof props.open === "boolean")
+            return props.open;
+        if (typeof props.open === "object" && props.open != null && "peek" in props.open)
+            return props.open.value;
+        return uncontrolledOpen.value;
+    };
+    const setOpen = (next) => {
+        if (!isControlled())
+            uncontrolledOpen.value = next;
+        if (typeof props.open === "object" && props.open != null && "peek" in props.open)
+            props.open.value = next;
+        props.onOpenChange?.(next);
+    };
+    const closeMobile = () => setOpen(false);
+    const syncGroup = (groupEl, expanded) => {
+        groupEl?.setAttribute("data-expanded", String(expanded));
+        groupEl?.querySelector(".hu-nested-sidebar__group-trigger")?.setAttribute("aria-expanded", String(expanded));
+        groupEl?.querySelectorAll(".hu-nested-sidebar__children").forEach((panel) => {
+            panel.hidden = !expanded;
+        });
+    };
+    const toggleGroup = (event, id) => {
+        const next = new Set(expandedItems.value);
+        const groupEl = event ? event.currentTarget.closest(".hu-nested-sidebar__group") : null;
+        const expanded = !(groupEl?.dataset.expanded === "true" || next.has(id));
+        if (expanded)
+            next.add(id);
+        else
+            next.delete(id);
+        expandedItems.value = next;
+        syncGroup(groupEl, expanded);
+    };
+    const styleValue = [
+        props.topOffset !== undefined ? `--hu-ns-top:${formatCssSize(props.topOffset)}` : "",
+        props.height !== undefined ? `--hu-ns-height:${formatCssSize(props.height)}` : "",
+    ].filter(Boolean).join(";");
+    // ── Nav content renderer ───────────────────────────────────────────────────
+    const renderNav = (onClose) => h("nav", { class: "hu-nested-sidebar__nav", "aria-label": "Sidebar navigation" }, ...sections.map((section, si) => h("div", { key: si, class: "hu-nested-sidebar__section" }, section.label && h("div", { class: "hu-nested-sidebar__section-label" }, section.label), ...section.items.map((item) => {
+        const active = () => isItemActive(item.active);
+        if (!item.children?.length) {
+            return h(item.href ? "a" : "button", {
+                key: item.id,
+                class: () => cn("hu-nested-sidebar__item", active() && "hu-nested-sidebar__item--active"),
+                href: item.href,
+                type: item.href ? undefined : "button",
+                "aria-current": () => active() ? "page" : undefined,
+                onClick: () => { item.onClick?.(); onClose?.(); },
+            }, item.icon && h("span", { class: "hu-nested-sidebar__item-icon", "aria-hidden": "true" }, item.icon), h("span", { class: "hu-nested-sidebar__item-label" }, item.label), item.badge && h("span", { class: "hu-nested-sidebar__item-badge" }, item.badge));
+        }
+        // Group with children
+        const isExpanded = () => expandedItems.value.has(item.id);
+        return h("div", {
+            key: item.id,
+            class: "hu-nested-sidebar__group",
+            "data-expanded": () => String(isExpanded())
+        }, h("button", {
+            type: "button",
+            class: () => cn("hu-nested-sidebar__group-trigger", active() && "hu-nested-sidebar__group-trigger--active"),
+            "aria-expanded": () => String(isExpanded()),
+            onClick: (event) => toggleGroup(event, item.id),
+        }, item.icon && h("span", { class: "hu-nested-sidebar__item-icon", "aria-hidden": "true" }, item.icon), h("span", { class: "hu-nested-sidebar__item-label" }, item.label), item.badge && h("span", { class: "hu-nested-sidebar__item-badge" }, item.badge), chevronRight), h("div", {
+            class: "hu-nested-sidebar__children",
+            hidden: () => !isExpanded()
+        }, ...item.children.map((child) => {
+            const childActive = () => isItemActive(child.active);
+            return h(child.href ? "a" : "button", {
+                key: child.id,
+                class: () => cn("hu-nested-sidebar__child", childActive() && "hu-nested-sidebar__child--active"),
+                href: child.href,
+                type: child.href ? undefined : "button",
+                "aria-current": () => childActive() ? "page" : undefined,
+                onClick: () => { child.onClick?.(); onClose?.(); },
+            }, child.icon && h("span", { class: "hu-nested-sidebar__item-icon", "aria-hidden": "true" }, child.icon), child.label);
+        })));
+    }))));
+    // ── Mobile overlay ─────────────────────────────────────────────────────────
+    const renderOverlay = () => {
+        if (!isOpen())
+            return null;
+        const drawerTitle = props.drawerTitle ?? props.menuLabel ?? "Menu";
+        const closeBtn = (cls) => h("button", {
+            type: "button", class: cls, "aria-label": "Close menu", onClick: closeMobile,
+        }, closeIcon);
+        const overlayEl = mobileVariant === "bottom-sheet"
+            ? h("div", {
+                class: "hu-nested-sidebar__sheet",
+                role: "dialog", "aria-modal": "true", "aria-label": drawerTitle,
+            }, h("div", { class: "hu-nested-sidebar__sheet-handle" }), h("div", { class: "hu-nested-sidebar__sheet-header" }, h("span", { class: "hu-nested-sidebar__sheet-title" }, drawerTitle), closeBtn("hu-nested-sidebar__sheet-close")), h("div", { class: "hu-nested-sidebar__sheet-body" }, renderNav(closeMobile)))
+            : h("aside", {
+                class: "hu-nested-sidebar__drawer",
+                role: "dialog", "aria-modal": "true", "aria-label": drawerTitle,
+            }, h("div", { class: "hu-nested-sidebar__drawer-header" }, h("div", { class: "hu-nested-sidebar__drawer-title" }, drawerTitle), closeBtn("hu-nested-sidebar__drawer-close")), h("div", { class: "hu-nested-sidebar__drawer-body" }, props.header && h("div", { class: "hu-nested-sidebar__header" }, props.header), renderNav(closeMobile), props.footer && h("div", { class: "hu-nested-sidebar__footer" }, props.footer)));
+        return h("div", {}, h("div", { class: "hu-nested-sidebar__backdrop", onClick: closeMobile, "aria-hidden": "true" }), FocusTrap({ active: true, restoreFocus: true, autoFocus: true, onEscape: closeMobile, children: overlayEl }));
+    };
+    // ── Desktop sidebar VNode ──────────────────────────────────────────────────
+    const sidebarEl = h("aside", {
+        class: cn("hu-nested-sidebar", `hu-nested-sidebar--${width}`, `hu-nested-sidebar--${position}`, responsive && "hu-nested-sidebar--responsive", props.class),
+        style: styleValue || undefined,
+        id: sid,
+    }, props.header && h("div", { class: "hu-nested-sidebar__header" }, props.header), renderNav(), props.footer && h("div", { class: "hu-nested-sidebar__footer" }, props.footer));
+    if (!responsive)
+        return sidebarEl;
+    // ── Responsive root: sidebar + mobile bar + overlay ────────────────────────
+    const menuIcon = props.menuIcon ?? menuHamburger;
+    const menuLabel = props.menuLabel ?? "Menu";
+    return h("div", { class: "hu-nested-sidebar__root", style: styleValue || undefined }, sidebarEl, h("div", { class: "hu-nested-sidebar__mobile-shell" }, h("div", { class: "hu-nested-sidebar__mobile-bar" }, h("button", {
+        type: "button",
+        class: "hu-nested-sidebar__menu-btn",
+        "aria-label": menuLabel,
+        "aria-haspopup": "dialog",
+        "aria-expanded": () => String(isOpen()),
+        onClick: () => setOpen(true),
+    }, h("span", { class: "hu-nested-sidebar__menu-btn-icon", "aria-hidden": "true" }, menuIcon), menuLabel)), renderOverlay));
+}

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

@@ -1,13 +1,21 @@
 import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface PopoverProps {
-    open: boolean | Signal<boolean>;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
     side?: "top" | "bottom" | "left" | "right";
     trigger?: unknown;
-    onClose?: () => void;
-    onOpenChange?: (open: boolean) => void;
+    closeOnEscape?: boolean;
+    closeOnClickAway?: boolean;
+    id?: string;
+    role?: "dialog" | "menu" | "listbox" | "tooltip";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    onClose?: (reason?: PopoverCloseReason) => void;
+    onOpenChange?: (open: boolean, reason?: PopoverCloseReason) => void;
     children?: unknown;
     class?: string;
 }
+export type PopoverCloseReason = "click-away" | "escape" | "programmatic" | "trigger";
 export declare function Popover(props: PopoverProps): VNode;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAgBpE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAuBlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiBpE,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,QAAQ,GAAG,cAAc,GAAG,SAAS,CAAC;AAItF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CA2DlD"}

package/dist/components/Popover/index.js

@@ -1,4 +1,6 @@
+import { signal } from "@hyperpackai/hyperion";
 import { injectCSS, cn, h } from "../../theme/index.js";
+import { ClickAwayListener } from "../ClickAwayListener/index.js";
 const POPOVER_CSS = `
 .hu-popover-wrap { position: relative; display: inline-flex; }
 .hu-popover-content {
@@ -12,23 +14,57 @@ const POPOVER_CSS = `
 .hu-popover-content--left   { right:  calc(100% + 6px); top: 0; }
 .hu-popover-content--right  { left:   calc(100% + 6px); top: 0; }
 `;
+let popoverId = 0;
 export function Popover(props) {
     injectCSS("hu-popover", POPOVER_CSS);
-    const { side = "bottom", trigger, children } = props;
-    const isSignalOpen = typeof props.open === "object" && "peek" in props.open;
-    const isOpen = () => isSignalOpen
-        ? props.open.value
-        : props.open;
+    const { side = "bottom", trigger, children, closeOnEscape = true, closeOnClickAway = true, role = "dialog" } = props;
+    const id = props.id ?? `hu-popover-${++popoverId}`;
+    const signalOpen = getSignalProp(props.open);
+    const internalOpen = signal(props.defaultOpen ?? false);
+    const isControlled = typeof props.open === "boolean" || !!signalOpen;
+    const isOpen = () => signalOpen ? signalOpen.value : typeof props.open === "boolean" ? props.open : internalOpen.value;
+    const setOpen = (next, reason = "programmatic") => {
+        if (signalOpen)
+            signalOpen.value = next;
+        else if (!isControlled)
+            internalOpen.value = next;
+        props.onOpenChange?.(next, reason);
+        if (!next)
+            props.onClose?.(reason);
+    };
+    const close = (reason = "programmatic") => setOpen(false, reason);
+    const toggle = () => setOpen(!isOpen(), "trigger");
     const overlay = () => isOpen()
         ? h("div", {
+            id,
             class: cn("hu-popover-content", `hu-popover-content--${side}`),
+            role,
+            tabindex: "-1",
+            "aria-label": props["aria-label"],
+            "aria-labelledby": props["aria-labelledby"],
             onKeyDown: (e) => {
-                if (e.key === "Escape") {
-                    props.onOpenChange?.(false);
-                    props.onClose?.();
+                if (closeOnEscape && e.key === "Escape") {
+                    e.preventDefault();
+                    close("escape");
                 }
             }
         }, children)
         : null;
-    return h("div", { class: cn("hu-popover-wrap", props.class) }, trigger, typeof props.open === "boolean" ? overlay() : overlay);
+    const content = h("div", {
+        class: cn("hu-popover-wrap", props.class),
+        onBlur: closeOnClickAway ? (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                close("click-away");
+        } : undefined
+    }, trigger && (isControlled
+        ? trigger
+        : h("div", { onClick: toggle, style: "display:contents;", "aria-controls": id, "aria-expanded": isOpen() ? "true" : "false" }, trigger)), typeof props.open === "boolean" ? overlay() : overlay);
+    return ClickAwayListener({
+        disabled: !closeOnClickAway || !isOpen(),
+        onClickAway: () => close("click-away"),
+        children: content
+    });
+}
+function getSignalProp(value) {
+    return typeof value === "object" && value != null && "peek" in value ? value : undefined;
 }

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

@@ -1,7 +1,32 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 import type { CheckboxProps } from "../Checkbox/index.js";
-export interface RadioProps extends Omit<CheckboxProps, "indeterminate" | "defaultChecked"> {
+export interface RadioProps extends Omit<CheckboxProps, "indeterminate"> {
     value: string;
+    onValueChange?: (value: string, e: Event) => void;
+}
+export interface RadioGroupOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    options: RadioGroupOption[];
+    value?: string | Signal<string>;
+    defaultValue?: string;
+    name?: string;
+    label?: string;
+    helper?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    direction?: "vertical" | "horizontal";
+    id?: string;
+    class?: string;
+    onChange?: (e: Event) => void;
+    onValueChange?: (value: string, e: Event) => void;
 }
 export declare function Radio(props: RadioProps): VNode;
+export declare function RadioGroup(props: RadioGroupProps): VNode;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAyB1D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,aAAa,EAAE,eAAe,GAAG,gBAAgB,CAAC;IACzF,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAW9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AA8B1D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAgB9C;AAID,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CA4DxD"}

package/dist/components/Radio/index.js

@@ -1,3 +1,4 @@
+import { signal } from "@hyperpackai/hyperion";
 import { injectCSS, cn, h } from "../../theme/index.js";
 const RADIO_CSS = `
 .hu-radio-wrap { display: inline-flex; align-items: center; gap: var(--hu-space-2); cursor: pointer; min-height: 28px; max-width: 100%; }
@@ -20,9 +21,67 @@ const RADIO_CSS = `
 .hu-radio:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
 .hu-radio-group { display: flex; flex-direction: column; gap: var(--hu-space-2); }
 .hu-radio-group--horizontal { flex-direction: row; flex-wrap: wrap; }
+.hu-radio-group-wrap { display: flex; flex-direction: column; gap: 6px; }
+.hu-radio-group__label { color: var(--hu-text); font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); line-height: 1.35; }
+.hu-radio-group__label--required::after { content: " *"; color: var(--hu-error); }
+.hu-radio-group__helper { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); line-height: 1.45; }
+.hu-radio-group__error { font-size: var(--hu-font-size-xs); color: var(--hu-error); line-height: 1.45; }
 `;
 export function Radio(props) {
     injectCSS("hu-radio", RADIO_CSS);
-    const { label, description, disabled, id, ...rest } = props;
-    return h("label", { class: cn("hu-radio-wrap", disabled && "hu-radio-wrap--disabled", props.class) }, h("input", { ...rest, type: "radio", id, disabled, class: "hu-radio" }), (label || description) && h("span", { class: "hu-checkbox-text" }, label && h("span", { class: "hu-checkbox-label" }, label), description && h("span", { class: "hu-checkbox-desc" }, description)));
+    const { label, description, disabled, id, onChange, onCheckedChange, onValueChange, ...rest } = props;
+    const handleChange = (event) => {
+        onChange?.(event);
+        onCheckedChange?.(event.target.checked, event);
+        if (event.target.checked)
+            onValueChange?.(props.value, event);
+    };
+    return h("label", { class: cn("hu-radio-wrap", disabled && "hu-radio-wrap--disabled", props.class) }, h("input", { ...rest, type: "radio", id, disabled, onChange: handleChange, class: "hu-radio" }), (label || description) && h("span", { class: "hu-checkbox-text" }, label && h("span", { class: "hu-checkbox-label" }, label), description && h("span", { class: "hu-checkbox-desc" }, description)));
+}
+let radioGroupId = 0;
+export function RadioGroup(props) {
+    injectCSS("hu-radio", RADIO_CSS);
+    const { options, label, helper, error, required, disabled, direction = "vertical", onChange, onValueChange } = props;
+    const generatedId = props.id ?? `hu-radio-group-${++radioGroupId}`;
+    const labelId = label ? `${generatedId}-label` : undefined;
+    const helperId = helper && !error ? `${generatedId}-helper` : undefined;
+    const errorId = error ? `${generatedId}-error` : undefined;
+    const describedBy = [errorId, helperId].filter(Boolean).join(" ") || undefined;
+    const name = props.name ?? generatedId;
+    const valueSignal = getSignalProp(props.value);
+    const isControlled = typeof props.value === "string" || !!valueSignal;
+    const internalValue = signal(typeof props.value === "string" ? props.value : props.defaultValue ?? "");
+    const currentValue = () => valueSignal ? valueSignal.value : typeof props.value === "string" ? props.value : internalValue.value;
+    const handleValueChange = (value, event) => {
+        if (valueSignal)
+            valueSignal.value = value;
+        else if (!isControlled)
+            internalValue.value = value;
+        onChange?.(event);
+        onValueChange?.(value, event);
+    };
+    return h("div", { class: cn("hu-radio-group-wrap", props.class) }, label && h("div", {
+        id: labelId,
+        class: cn("hu-radio-group__label", required && "hu-radio-group__label--required")
+    }, label), h("div", {
+        class: cn("hu-radio-group", direction === "horizontal" && "hu-radio-group--horizontal"),
+        role: "radiogroup",
+        "aria-labelledby": labelId,
+        "aria-describedby": describedBy,
+        "aria-invalid": error ? "true" : undefined,
+        "aria-required": required ? "true" : undefined
+    }, ...options.map((option, index) => Radio({
+        id: `${generatedId}-${index}`,
+        name,
+        value: option.value,
+        label: option.label,
+        description: option.description,
+        checked: currentValue() === option.value,
+        required,
+        disabled: disabled || option.disabled,
+        onValueChange: handleValueChange
+    }))), error && h("span", { id: errorId, class: "hu-radio-group__error", role: "alert" }, error), !error && helper && h("span", { id: helperId, class: "hu-radio-group__helper" }, helper));
+}
+function getSignalProp(value) {
+    return typeof value === "object" && value != null && "peek" in value ? value : undefined;
 }

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

@@ -7,17 +7,22 @@ export interface SelectOption {
 }
 export interface SelectProps {
     value?: string;
+    defaultValue?: string;
     options: SelectOption[];
     placeholder?: string;
     disabled?: boolean;
     required?: boolean;
     size?: "sm" | "md" | "lg";
     error?: string;
+    helper?: string;
     label?: string;
     id?: string;
     name?: string;
     class?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
     onChange?: (e: Event) => void;
+    onValueChange?: (value: string, e: Event) => void;
 }
 export declare function Select(props: SelectProps): VNode;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0BpE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAoChD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0BpE,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACnD;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAkEhD"}