@hyperpackai/hyperui 0.2.0 → 0.3.0

package/dist/components/FocusTrap/index.js

@@ -13,50 +13,51 @@ export function FocusTrap(props) {
     const active = props.active ?? true;
     const restoreFocus = props.restoreFocus ?? true;
     const autoFocus = props.autoFocus ?? true;
-    if (typeof document !== "undefined" && active) {
-        const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const onKeyDown = (event) => {
+        if (!active)
+            return;
+        if (event.key === "Escape") {
+            props.onEscape?.();
+            return;
+        }
+        if (!root || event.key !== "Tab")
+            return;
         const getFocusable = () => root
             ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR))
                 .filter((node) => !node.hasAttribute("disabled") && node.getAttribute("aria-hidden") !== "true")
             : [];
+        const nodes = getFocusable();
+        if (nodes.length === 0) {
+            event.preventDefault();
+            root.focus();
+            return;
+        }
+        const first = nodes[0];
+        const last = nodes[nodes.length - 1];
+        const current = document.activeElement;
+        if (event.shiftKey && current === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && current === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    if (typeof document !== "undefined" && typeof HTMLElement !== "undefined" && active) {
+        const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
         const focusFirst = () => {
-            const nodes = getFocusable();
+            const nodes = root
+                ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR))
+                    .filter((node) => !node.hasAttribute("disabled") && node.getAttribute("aria-hidden") !== "true")
+                : [];
             (nodes[0] ?? root)?.focus();
         };
-        const onKeyDown = (event) => {
-            if (!root)
-                return;
-            if (event.key === "Escape") {
-                props.onEscape?.();
-                return;
-            }
-            if (event.key !== "Tab")
-                return;
-            const nodes = getFocusable();
-            if (nodes.length === 0) {
-                event.preventDefault();
-                root.focus();
-                return;
-            }
-            const first = nodes[0];
-            const last = nodes[nodes.length - 1];
-            const current = document.activeElement;
-            if (event.shiftKey && current === first) {
-                event.preventDefault();
-                last.focus();
-            }
-            else if (!event.shiftKey && current === last) {
-                event.preventDefault();
-                first.focus();
-            }
-        };
         onMount(() => {
-            root?.addEventListener("keydown", onKeyDown);
             if (autoFocus)
                 queueMicrotask(focusFirst);
         });
         onCleanup(() => {
-            root?.removeEventListener("keydown", onKeyDown);
             if (restoreFocus && previouslyFocused?.isConnected)
                 previouslyFocused.focus();
         });
@@ -64,6 +65,7 @@ export function FocusTrap(props) {
     return h("div", {
         class: props.class,
         tabindex: "-1",
+        onKeyDown,
         ref: (node) => { root = node; }
     }, props.children);
 }

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

@@ -20,11 +20,13 @@ export interface InputProps {
     minLength?: number;
     class?: string;
     "aria-label"?: string;
+    "aria-describedby"?: string;
     "aria-controls"?: string;
     "aria-expanded"?: string | boolean;
     "aria-activedescendant"?: string;
     onInput?: (e: InputEvent) => void;
     onChange?: (e: Event) => void;
+    onValueChange?: (value: string, e: Event) => void;
     onBlur?: (e: FocusEvent) => void;
     onFocus?: (e: FocusEvent) => void;
     onKeyDown?: (e: KeyboardEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqCpE,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CA+B9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqCpE,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,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;IAClD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC;AAID,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CA4C9C"}

package/dist/components/Input/index.js

@@ -33,13 +33,27 @@ const INPUT_CSS = `
 .hu-input-helper { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); line-height: 1.45; }
 .hu-input-error-msg { font-size: var(--hu-font-size-xs); color: var(--hu-error); line-height: 1.45; }
 `;
+let inputId = 0;
 export function Input(props) {
     injectCSS("hu-input", INPUT_CSS);
-    const { type = "text", size = "md", error, helper, label, prefix, suffix, id, ...rest } = props;
+    const { type = "text", size = "md", error, helper, label, prefix, suffix, onInput, onValueChange, class: className, ...rest } = props;
+    const id = props.id ?? (label || helper || error ? `hu-input-${++inputId}` : undefined);
+    const helperId = helper && !error ? `${id}-helper` : undefined;
+    const errorId = error ? `${id}-error` : undefined;
+    const describedBy = [props["aria-describedby"], errorId, helperId].filter(Boolean).join(" ") || undefined;
+    const handleInput = (event) => {
+        onInput?.(event);
+        onValueChange?.(event.target.value, event);
+    };
     const inputEl = h("input", {
-        ...rest, type, id,
-        class: cn("hu-input", size !== "md" && `hu-input--${size}`, error && "hu-input--error", Boolean(prefix) && "hu-input--has-prefix", Boolean(suffix) && "hu-input--has-suffix", props.class)
+        ...rest,
+        type,
+        id,
+        onInput: handleInput,
+        "aria-invalid": error ? "true" : undefined,
+        "aria-describedby": describedBy,
+        class: cn("hu-input", size !== "md" && `hu-input--${size}`, error && "hu-input--error", Boolean(prefix) && "hu-input--has-prefix", Boolean(suffix) && "hu-input--has-suffix", className)
     });
     const field = h("div", { class: "hu-input-field" }, prefix && h("span", { class: "hu-input-prefix" }, prefix), inputEl, suffix && h("span", { class: "hu-input-suffix" }, suffix));
-    return h("div", { class: "hu-input-wrap" }, label && Label({ for: id, required: props.required, children: label }), field, error && h("span", { class: "hu-input-error-msg", role: "alert" }, error), !error && helper && h("span", { class: "hu-input-helper" }, helper));
+    return h("div", { class: "hu-input-wrap" }, label && Label({ for: id, required: props.required, children: label }), field, error && h("span", { id: errorId, class: "hu-input-error-msg", role: "alert" }, error), !error && helper && h("span", { id: helperId, class: "hu-input-helper" }, helper));
 }

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

@@ -1,5 +1,7 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export type MenuPlacement = "bottom-left" | "bottom-right" | "top-left" | "top-right";
+export type MenuCloseReason = "blur" | "escape" | "item-select" | "programmatic" | "trigger";
 export interface MenuItemDef {
     label: string;
     icon?: unknown;
@@ -16,8 +18,10 @@ export interface MenuProps {
     items: MenuItemDef[];
     placement?: MenuPlacement;
     trigger: unknown;
-    onOpenChange?: (open: boolean) => void;
-    onClose?: () => void;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, reason?: MenuCloseReason) => void;
+    onClose?: (reason?: MenuCloseReason) => void;
     class?: string;
 }
 export declare function Menu(props: MenuProps): VNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiDpE,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;AAEtF,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAkC5C;AAsBD,MAAM,WAAW,aAAa;IAAG,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AACrE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAGpD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAUpD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiDpE,MAAM,MAAM,aAAa,GAAG,aAAa,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC;AACtF,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,aAAa,GAAG,cAAc,GAAG,SAAS,CAAC;AAE7F,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IACjE,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,eAAe,KAAK,IAAI,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAwE5C;AA0BD,MAAM,WAAW,aAAa;IAAG,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AACrE,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAGpD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAUpD"}

package/dist/components/Menu/index.js

@@ -49,33 +49,65 @@ const CSS = `
 export function Menu(props) {
     injectCSS("hu-menu", CSS);
     const { items, placement = "bottom-left", trigger } = props;
-    const isOpen = signal(false);
-    const setOpen = (next) => {
-        isOpen.value = next;
-        props.onOpenChange?.(next);
+    const internalOpen = signal(props.defaultOpen ?? false);
+    const signalOpen = getSignalProp(props.open);
+    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?.();
+            props.onClose?.(reason);
     };
-    const close = () => setOpen(false);
-    const toggle = () => setOpen(!isOpen.value);
-    const renderMenu = () => isOpen.value
+    const close = (reason = "programmatic") => setOpen(false, reason);
+    const toggle = () => setOpen(!isOpen(), "trigger");
+    const handleMenuKeyDown = (e) => {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            close("escape");
+            return;
+        }
+        if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(e.key))
+            return;
+        const menu = e.currentTarget;
+        const items = Array.from(menu.querySelectorAll('[role="menuitem"]:not(:disabled)'));
+        if (!items.length)
+            return;
+        e.preventDefault();
+        const activeIndex = items.indexOf((typeof document !== "undefined" ? document.activeElement : null));
+        const lastIndex = items.length - 1;
+        if (e.key === "Home") {
+            items[0]?.focus();
+            return;
+        }
+        if (e.key === "End") {
+            items[lastIndex]?.focus();
+            return;
+        }
+        const delta = e.key === "ArrowDown" ? 1 : -1;
+        const nextIndex = activeIndex === -1
+            ? (delta === 1 ? 0 : lastIndex)
+            : (activeIndex + delta + items.length) % items.length;
+        items[nextIndex]?.focus();
+    };
+    const renderMenu = () => isOpen()
         ? h("div", {
             class: cn("hu-menu", `hu-menu--${placement}`),
             role: "menu",
             tabindex: "-1",
-            onKeyDown: (e) => {
-                if (e.key === "Escape")
-                    close();
-            }
+            onKeyDown: handleMenuKeyDown
         }, ...items.map(item => renderMenuItem(item, close)))
         : null;
     return h("div", {
         class: cn("hu-menu-root", props.class),
         onBlur: (e) => {
             if (!e.currentTarget.contains(e.relatedTarget))
-                close();
+                close("blur");
         }
-    }, h("div", { onClick: toggle, style: "display:contents;" }, trigger), renderMenu);
+    }, h("div", { onClick: toggle, style: "display:contents;" }, trigger), typeof props.open === "boolean" ? renderMenu() : renderMenu);
 }
 function renderMenuItem(item, close) {
     if (item.type === "divider")
@@ -86,10 +118,13 @@ function renderMenuItem(item, close) {
         class: cn("hu-menu-item", item.selected && "hu-menu-item--selected", item.disabled && "hu-menu-item--disabled", item.destructive && "hu-menu-item--destructive"),
         role: "menuitem",
         disabled: item.disabled,
-        onClick: item.onClick ? () => { item.onClick(); close(); } : undefined,
+        onClick: () => { item.onClick?.(); close("item-select"); },
         tabindex: "-1"
     }, item.icon && h("span", { class: "hu-menu-item__icon" }, item.icon), h("span", { class: "hu-menu-item__label" }, item.label), item.shortcut && h("span", { class: "hu-menu-item__shortcut" }, item.shortcut), item.children && h("span", { class: "hu-menu-item__arrow" }, "›"));
 }
+function getSignalProp(value) {
+    return typeof value === "object" && value != null && "peek" in value ? value : undefined;
+}
 export function MenuList(props) {
     injectCSS("hu-menu", CSS);
     return h("ul", { class: cn("hu-menu", "hu-menu--static", props.class), role: "menu" }, props.children);

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

@@ -1,6 +1,8 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface ModalProps {
-    open: boolean;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
     onClose?: (reason?: "backdrop" | "escape") => void;
     onOpenChange?: (open: boolean, reason?: "backdrop" | "escape") => void;
     align?: "center" | "top" | "bottom";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAyBpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,KAAK,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,KAAK,IAAI,CAAC;IACvE,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,GAAG,IAAI,CA6BrD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAyBpE,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,KAAK,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,KAAK,IAAI,CAAC;IACvE,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,GAAG,IAAI,CA8CrD"}

package/dist/components/Modal/index.js

@@ -1,3 +1,4 @@
+import { signal } from "@hyperpackai/hyperion";
 import { injectCSS, cn, h } from "../../theme/index.js";
 import { renderInPortal } from "../../portal.js";
 import { FocusTrap } from "../FocusTrap/index.js";
@@ -23,29 +24,46 @@ const CSS = `
 `;
 export function Modal(props) {
     injectCSS("hu-modal", CSS);
-    const { open, onClose, onOpenChange, align = "center", disableBackdropClick } = props;
+    const { onClose, onOpenChange, align = "center", disableBackdropClick } = props;
+    const uncontrolledOpen = signal(props.defaultOpen ?? false);
+    const isSignalOpen = typeof props.open === "object" && props.open != null && "peek" in props.open;
+    const isControlled = typeof props.open === "boolean" || isSignalOpen;
+    const isOpen = () => {
+        if (typeof props.open === "boolean")
+            return props.open;
+        if (isSignalOpen)
+            return props.open.value;
+        return uncontrolledOpen.value;
+    };
     const close = (reason) => {
+        if (!isControlled)
+            uncontrolledOpen.value = false;
+        if (isSignalOpen)
+            props.open.value = false;
         onOpenChange?.(false, reason);
         onClose?.(reason);
     };
-    if (!open && !props.keepMounted)
-        return null;
-    if (!open)
-        return h("div", { style: "display:none", "aria-hidden": "true" }, props.children);
-    return renderInPortal(h("div", {
+    const renderModal = () => renderInPortal(h("div", {
         class: cn("hu-modal", align !== "center" && `hu-modal--align-${align}`, props.class),
         role: "dialog",
         "aria-modal": "true",
-        onKeydown: !props.disableEscapeKey && onClose ? (e) => { if (e.key === "Escape")
+        onKeyDown: !props.disableEscapeKey ? (e) => { if (e.key === "Escape")
             close("escape"); } : undefined
     }, h("div", {
         class: "hu-modal__backdrop",
-        onClick: !disableBackdropClick && onClose ? () => close("backdrop") : undefined
+        onClick: !disableBackdropClick ? () => close("backdrop") : undefined
     }), FocusTrap({
         active: true,
         restoreFocus: true,
         autoFocus: true,
-        onEscape: !props.disableEscapeKey && onClose ? () => close("escape") : undefined,
+        onEscape: !props.disableEscapeKey ? () => close("escape") : undefined,
         children: h("div", { class: "hu-modal__content", tabindex: "-1" }, props.children)
     })), "modal");
+    const renderClosed = () => props.keepMounted
+        ? h("div", { style: "display:none", "aria-hidden": "true" }, props.children)
+        : null;
+    if (isControlled && typeof props.open === "boolean") {
+        return isOpen() ? renderModal() : renderClosed();
+    }
+    return (() => isOpen() ? renderModal() : renderClosed());
 }

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

@@ -0,0 +1,33 @@
+import { type VNode } from "../../theme/index.js";
+export interface NavChildItem {
+    id?: string;
+    label: string;
+    href: string;
+    description?: string;
+    icon?: unknown;
+    active?: boolean | (() => boolean);
+    onClick?: (event: Event) => void;
+}
+export interface NestedNavItem {
+    id?: string;
+    label: string;
+    href?: string;
+    active?: boolean | (() => boolean);
+    icon?: unknown;
+    children?: NavChildItem[];
+    onClick?: (event: Event) => void;
+}
+export type NavbarMobileVariant = "drawer" | "bottom-sheet";
+export interface NestedNavbarProps {
+    id?: string;
+    brand?: unknown;
+    brandHref?: string;
+    onBrandClick?: (event: Event) => void;
+    items?: NestedNavItem[];
+    actions?: unknown;
+    mobileVariant?: NavbarMobileVariant;
+    mobileTitle?: string;
+    class?: string;
+}
+export declare function NestedNavbar(props: NestedNavbarProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NestedNavbar/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAkNpE,MAAM,WAAW,YAAY;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAED,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAMD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,cAAc,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+CD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAoR5D"}