@hyperpackai/hyperui 0.2.0 → 0.3.0

package/dist/components/Select/index.js

@@ -24,7 +24,14 @@ const SELECT_CSS = `
 `;
 export function Select(props) {
     injectCSS("hu-select", SELECT_CSS);
-    const { options, placeholder, error, label, size = "md", id, ...rest } = props;
+    const { options, placeholder, error, helper, label, size = "md", id, class: className, onChange, onValueChange, ...selectProps } = props;
+    const handleChange = (event) => {
+        onChange?.(event);
+        onValueChange?.(event.target.value, event);
+    };
+    const helperId = id && helper && !error ? `${id}-helper` : undefined;
+    const errorId = id && error ? `${id}-error` : undefined;
+    const describedBy = [props["aria-describedby"], errorId, helperId].filter(Boolean).join(" ") || undefined;
     const groups = new Map();
     const ungrouped = [];
     for (const opt of options) {
@@ -44,9 +51,19 @@ export function Select(props) {
     for (const [groupLabel, groupOpts] of groups) {
         children.push(h("optgroup", { label: groupLabel }, ...renderOptions(groupOpts)));
     }
-    const arrowSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>`;
-    return h("div", { class: cn("hu-select-wrap", props.class) }, label && Label({ for: id, required: props.required, children: label }), h("div", { class: "hu-select-field" }, h("select", {
-        ...rest, id,
+    const arrowIcon = h("svg", {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "aria-hidden": "true"
+    }, h("path", { d: "M4 6l4 4 4-4" }));
+    return h("div", { class: cn("hu-select-wrap", className) }, label && Label({ for: id, required: props.required, children: label }), h("div", { class: "hu-select-field" }, h("select", {
+        ...selectProps,
+        id,
+        onChange: handleChange,
+        "aria-invalid": error ? "true" : undefined,
+        "aria-describedby": describedBy,
         class: cn("hu-select", size !== "md" && `hu-select--${size}`, error && "hu-select--error")
-    }, ...children), h("span", { class: "hu-select-arrow", innerHTML: arrowSVG, "aria-hidden": "true" })), error && h("span", { class: "hu-input-error-msg", role: "alert" }, error));
+    }, ...children), h("span", { class: "hu-select-arrow", "aria-hidden": "true" }, arrowIcon)), 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/Sheet/index.d.ts

@@ -1,15 +1,21 @@
 import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface SheetProps {
-    open: boolean | Signal<boolean>;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
     side?: "right" | "left" | "top" | "bottom";
     title?: string;
     footer?: unknown;
-    onClose?: (reason?: "backdrop" | "close-button") => void;
-    onOpenChange?: (open: boolean, reason?: "backdrop" | "close-button") => void;
+    closeIcon?: unknown;
+    closeButton?: unknown | SheetCloseButtonRenderer;
+    onClose?: (reason?: SheetCloseReason) => void;
+    onOpenChange?: (open: boolean, reason?: SheetCloseReason) => void;
     closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
     children?: unknown;
     class?: string;
 }
+export type SheetCloseReason = "backdrop" | "escape" | "close-button";
+export type SheetCloseButtonRenderer = (close: (reason?: SheetCloseReason) => void) => unknown;
 export declare function Sheet(props: SheetProps): VNode;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiCpE,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC;IAC7E,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CA2C9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sheet/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiCpE,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,GAAG,wBAAwB,CAAC;IACjD,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,CAAC;AACtE,MAAM,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,gBAAgB,KAAK,IAAI,KAAK,OAAO,CAAC;AAE/F,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAoD9C"}

package/dist/components/Sheet/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";
@@ -31,31 +32,55 @@ const SHEET_CSS = `
 `;
 export function Sheet(props) {
     injectCSS("hu-sheet", SHEET_CSS);
-    const { side = "right", title, footer, onClose, onOpenChange, closeOnBackdrop = true, children } = props;
-    const isSignalOpen = typeof props.open === "object" && "peek" in props.open;
-    const isOpen = () => isSignalOpen
-        ? props.open.value
-        : props.open;
-    if (!isSignalOpen && !isOpen())
-        return h("span", { "aria-hidden": "true" });
-    const closeSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 2l12 12M14 2L2 14"/></svg>`;
+    const { side = "right", title, footer, onClose, onOpenChange, closeOnBackdrop = true, closeOnEscape = true, children } = 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 = "close-button") => {
+        if (!isControlled)
+            uncontrolledOpen.value = false;
+        if (isSignalOpen)
+            props.open.value = false;
+        onOpenChange?.(false, reason);
+        onClose?.(reason);
+    };
+    const closeIcon = props.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 showDefaultClose = props.closeButton === undefined && Boolean(title || onClose || onOpenChange || isSignalOpen || !isControlled);
+    const showCloseButton = props.closeButton !== null && (props.closeButton !== undefined || showDefaultClose);
     const renderSheet = () => renderInPortal(h("div", {}, h("div", {
         class: "hu-sheet-backdrop",
-        onClick: closeOnBackdrop ? () => {
-            onOpenChange?.(false, "backdrop");
-            onClose?.("backdrop");
-        } : undefined
-    }), FocusTrap({ active: true, restoreFocus: true, autoFocus: true, children: h("div", { class: cn("hu-sheet", `hu-sheet--${side}`, props.class), role: "dialog", "aria-modal": "true" }, title && h("div", { class: "hu-sheet-header" }, h("h2", { class: "hu-sheet-title" }, title), h("button", {
-            class: "hu-sheet-close",
-            onClick: () => {
-                onOpenChange?.(false, "close-button");
-                onClose?.("close-button");
-            },
-            "aria-label": "Close",
-            innerHTML: closeSVG
-        })), h("div", { class: "hu-sheet-body" }, children), footer && h("div", { class: "hu-sheet-footer" }, footer))
+        onClick: closeOnBackdrop ? () => close("backdrop") : undefined
+    }), FocusTrap({ active: true, restoreFocus: true, autoFocus: true, onEscape: closeOnEscape ? () => close("escape") : undefined, children: h("div", { class: cn("hu-sheet", `hu-sheet--${side}`, props.class), role: "dialog", "aria-modal": "true" }, (title || showCloseButton) && h("div", { class: "hu-sheet-header" }, title && h("h2", { class: "hu-sheet-title" }, title), showCloseButton && renderSheetCloseButton(props.closeButton, close, closeIcon)), h("div", { class: "hu-sheet-body" }, children), footer && h("div", { class: "hu-sheet-footer" }, footer))
     })), "sheet");
-    if (!isSignalOpen)
-        return renderSheet();
+    if (isControlled && typeof props.open === "boolean") {
+        return isOpen() ? renderSheet() : h("span", { "aria-hidden": "true" });
+    }
     return (() => isOpen() ? renderSheet() : h("span", { "aria-hidden": "true" }));
 }
+function renderSheetCloseButton(closeButton, close, closeIcon) {
+    if (typeof closeButton === "function")
+        return closeButton(close);
+    if (closeButton != null)
+        return closeButton;
+    return h("button", {
+        type: "button",
+        class: "hu-sheet-close",
+        onClick: () => close("close-button"),
+        "aria-label": "Close"
+    }, closeIcon);
+}

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

@@ -1,3 +1,4 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface SidebarItem {
     id: string;
@@ -5,18 +6,36 @@ export interface SidebarItem {
     icon?: unknown;
     badge?: unknown;
     href?: string;
-    active?: boolean;
+    active?: boolean | Signal<boolean> | (() => boolean);
     onClick?: () => void;
 }
 export interface SidebarSection {
     label?: string;
     items: SidebarItem[];
 }
+export type SidebarMobileMode = "top" | "side";
+export type SidebarPosition = "static" | "sticky" | "fixed";
+export type SidebarCloseReason = "backdrop" | "close-button" | "item-select" | "escape" | "programmatic" | "trigger";
+export type SidebarCloseButtonRenderer = (close: (reason?: SidebarCloseReason) => void) => unknown;
 export interface SidebarProps {
     header?: unknown;
     sections: SidebarSection[];
     footer?: unknown;
     width?: "sm" | "md" | "lg";
+    position?: SidebarPosition;
+    topOffset?: string | number;
+    height?: string | number;
+    responsive?: boolean;
+    mobileMode?: SidebarMobileMode;
+    menuLabel?: string;
+    menuIcon?: unknown;
+    drawerTitle?: string;
+    closeIcon?: unknown;
+    closeButton?: unknown | SidebarCloseButtonRenderer;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, reason?: SidebarCloseReason) => void;
+    onClose?: (reason: SidebarCloseReason) => void;
     class?: string;
 }
 export declare function Sidebar(props: SidebarProps): VNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA+BpE,MAAM,WAAW,WAAW;IAC1B,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,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAAG,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,WAAW,EAAE,CAAC;CAAE;AAEzE,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAyBlD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Sidebar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0LpE,MAAM,WAAW,WAAW;IAC1B,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;CACtB;AAED,MAAM,WAAW,cAAc;IAAG,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,WAAW,EAAE,CAAC;CAAE;AAEzE,MAAM,MAAM,iBAAiB,GAAG,KAAK,GAAG,MAAM,CAAC;AAC/C,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC5D,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,cAAc,GAAG,aAAa,GAAG,QAAQ,GAAG,cAAc,GAAG,SAAS,CAAC;AACrH,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,EAAE,kBAAkB,KAAK,IAAI,KAAK,OAAO,CAAC;AAEnG,MAAM,WAAW,YAAY;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,cAAc,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,GAAG,0BAA0B,CAAC;IACnD,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,kBAAkB,KAAK,IAAI,CAAC;IACpE,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAwIlD"}

package/dist/components/Sidebar/index.js

@@ -1,14 +1,22 @@
+import { signal } from "@hyperpackai/hyperion";
 import { injectCSS, cn, h } from "../../theme/index.js";
 const SIDEBAR_CSS = `
 .hu-sidebar {
+  --hu-sidebar-width: 260px;
+  --hu-sidebar-top: 0px;
+  --hu-sidebar-height: 100vh;
   display: flex; flex-direction: column; height: 100vh; overflow: hidden;
+  width: var(--hu-sidebar-width); min-width: var(--hu-sidebar-width);
   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: 0;
 }
-.hu-sidebar--sm { width: 220px; min-width: 220px; }
-.hu-sidebar--md { width: 260px; min-width: 260px; }
-.hu-sidebar--lg { width: 300px; min-width: 300px; }
+.hu-sidebar--sm { --hu-sidebar-width: 220px; }
+.hu-sidebar--md { --hu-sidebar-width: 260px; }
+.hu-sidebar--lg { --hu-sidebar-width: 300px; }
+.hu-sidebar--static { position: relative; top: auto; height: var(--hu-sidebar-height); }
+.hu-sidebar--sticky { position: sticky; top: var(--hu-sidebar-top); height: var(--hu-sidebar-height); }
+.hu-sidebar--fixed { position: fixed; top: var(--hu-sidebar-top); left: 0; bottom: 0; height: var(--hu-sidebar-height); }
 .hu-sidebar-header { padding: var(--hu-space-4) var(--hu-space-4) var(--hu-space-3); border-bottom: 1px solid var(--hu-border); }
 .hu-sidebar-nav { flex: 1; overflow-y: auto; padding: var(--hu-space-2); scrollbar-width: thin; }
 .hu-sidebar-section { margin-bottom: var(--hu-space-4); }
@@ -24,14 +32,283 @@ const SIDEBAR_CSS = `
 .hu-sidebar-item:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
 .hu-sidebar-item--active { background: var(--hu-primary-bg); color: var(--hu-primary); box-shadow: inset 3px 0 0 var(--hu-primary); }
 .hu-sidebar-item-icon { width: 18px; height: 18px; flex-shrink: 0; }
+.hu-sidebar-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hu-sidebar-item-badge { margin-left: auto; }
 .hu-sidebar-footer { padding: var(--hu-space-3) var(--hu-space-4); border-top: 1px solid var(--hu-border); background: color-mix(in srgb, var(--hu-bg-2) 62%, transparent); }
+.hu-sidebar-responsive-root { display: contents; }
+.hu-sidebar-mobile-shell { display: none; }
+.hu-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-sidebar-menu-button {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--hu-space-2);
+  min-height: 44px; max-width: 100%;
+  padding: 0 var(--hu-space-3);
+  color: var(--hu-text); 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-md); font-weight: var(--hu-font-weight-semibold);
+  cursor: pointer;
+  transition: border-color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), background var(--hu-duration) var(--hu-ease);
+}
+.hu-sidebar-menu-button:hover { background: var(--hu-bg-2); border-color: var(--hu-border-2); box-shadow: var(--hu-shadow-sm); }
+.hu-sidebar-menu-button:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-sidebar-menu-button__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; }
+.hu-sidebar-menu-button__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-sidebar-backdrop {
+  position: fixed; inset: 0; z-index: var(--hu-z-backdrop);
+  background: var(--hu-overlay);
+  animation: hu-sidebar-backdrop-in var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-sidebar-mobile-layer[hidden] { display: none !important; }
+.hu-sidebar-drawer {
+  position: fixed; z-index: var(--hu-z-modal);
+  top: 0; bottom: 0; left: 0;
+  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-sidebar-drawer-in var(--hu-duration-slow) var(--hu-ease-out);
+}
+.hu-sidebar-drawer__header {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--hu-space-3);
+  padding: var(--hu-space-4);
+  border-bottom: 1px solid var(--hu-border);
+}
+.hu-sidebar-drawer__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-sidebar-drawer__close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 34px; height: 34px; flex-shrink: 0;
+  padding: 0; color: var(--hu-text-2); background: var(--hu-bg);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  cursor: pointer;
+}
+.hu-sidebar-drawer__close:hover { color: var(--hu-text); background: var(--hu-bg-3); }
+.hu-sidebar-drawer__content { flex: 1; min-height: 0; overflow-y: auto; padding: var(--hu-space-3) 0; }
+.hu-sidebar-drawer__content .hu-sidebar-nav { flex: none; overflow: visible; padding: 0; }
+.hu-sidebar-drawer__content .hu-sidebar-section { margin-bottom: var(--hu-space-4); padding: 0 var(--hu-space-3); }
+.hu-sidebar-drawer__content .hu-sidebar-section + .hu-sidebar-section { padding-top: var(--hu-space-4); border-top: 1px solid var(--hu-border); }
+.hu-sidebar-drawer__content .hu-sidebar-item { min-height: 44px; border-radius: var(--hu-radius-md); }
+.hu-sidebar-drawer__footer { border-top: 1px solid var(--hu-border); background: color-mix(in srgb, var(--hu-bg-2) 62%, transparent); }
+@keyframes hu-sidebar-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes hu-sidebar-drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+
+@media (max-width: 1024px) {
+  .hu-sidebar--responsive {
+    --hu-sidebar-width: clamp(208px, 24vw, 232px);
+  }
+
+  .hu-sidebar--responsive .hu-sidebar-header {
+    padding: var(--hu-space-3);
+  }
+
+  .hu-sidebar--responsive .hu-sidebar-item {
+    min-height: 40px;
+    padding-inline: var(--hu-space-2);
+  }
+
+  .hu-sidebar--responsive.hu-sidebar--mobile-side {
+    display: none;
+  }
+
+  .hu-sidebar-responsive-root {
+    display: block;
+    width: 100%;
+  }
+
+  .hu-sidebar-mobile-shell {
+    display: block;
+  }
+
+  .hu-sidebar-mobile-bar {
+    position: sticky;
+    top: var(--hu-sidebar-top);
+    z-index: var(--hu-z-sticky);
+  }
+}
+
+@media (max-width: 700px) {
+  .hu-sidebar--responsive.hu-sidebar--mobile-top {
+    position: relative;
+    top: auto;
+    width: 100%;
+    min-width: 0;
+    height: auto;
+    max-height: none;
+    border-right: 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--hu-border) 82%, transparent);
+  }
+
+  .hu-sidebar--responsive.hu-sidebar--mobile-top .hu-sidebar-header,
+  .hu-sidebar--responsive.hu-sidebar--mobile-top .hu-sidebar-footer {
+    padding: var(--hu-space-3);
+  }
+
+  .hu-sidebar--responsive.hu-sidebar--mobile-top .hu-sidebar-nav {
+    flex: none;
+    display: flex;
+    gap: var(--hu-space-2);
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding: var(--hu-space-2) var(--hu-space-3);
+    scroll-snap-type: x proximity;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .hu-sidebar--responsive.hu-sidebar--mobile-top .hu-sidebar-section {
+    display: contents;
+  }
+
+  .hu-sidebar--responsive.hu-sidebar--mobile-top .hu-sidebar-section-label {
+    display: none;
+  }
+
+  .hu-sidebar--responsive.hu-sidebar--mobile-top .hu-sidebar-item {
+    flex: 0 0 auto;
+    width: auto;
+    min-width: 112px;
+    max-width: 176px;
+    justify-content: center;
+    scroll-snap-align: start;
+    white-space: nowrap;
+  }
+
+  .hu-sidebar--responsive.hu-sidebar--mobile-top .hu-sidebar-item--active {
+    box-shadow: inset 0 -3px 0 var(--hu-primary);
+  }
+
+}
 `;
+let sidebarId = 0;
 export function Sidebar(props) {
     injectCSS("hu-sidebar", SIDEBAR_CSS);
-    const { header, sections, footer, width = "md" } = props;
-    return h("aside", { class: cn("hu-sidebar", `hu-sidebar--${width}`, props.class) }, header && h("div", { class: "hu-sidebar-header" }, header), h("nav", { class: "hu-sidebar-nav", "aria-label": "Sidebar navigation" }, ...sections.map((section, si) => h("div", { key: si, class: "hu-sidebar-section" }, section.label && h("div", { class: "hu-sidebar-section-label" }, section.label), ...section.items.map((item) => h(item.href ? "a" : "button", {
-        key: item.id, class: cn("hu-sidebar-item", item.active && "hu-sidebar-item--active"),
-        href: item.href, onClick: item.onClick, "aria-current": item.active ? "page" : undefined
-    }, item.icon && h("span", { class: "hu-sidebar-item-icon", "aria-hidden": "true" }, item.icon), item.label, item.badge && h("span", { class: "hu-sidebar-item-badge" }, item.badge)))))), footer && h("div", { class: "hu-sidebar-footer" }, footer));
+    const { header, sections, footer, width = "md", position = "sticky", responsive = true, mobileMode = "top" } = props;
+    const generatedId = `hu-sidebar-${++sidebarId}`;
+    const drawerId = `${generatedId}-drawer`;
+    const drawerTitleId = `${generatedId}-drawer-title`;
+    const uncontrolledOpen = signal(props.defaultOpen ?? false);
+    const isControlled = typeof props.open === "boolean" || (typeof props.open === "object" && props.open != null && "peek" in props.open);
+    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 syncMobileDrawer = (open) => {
+        if (typeof document === "undefined")
+            return;
+        if (typeof document.querySelector !== "function")
+            return;
+        const root = document.querySelector(`[data-hu-sidebar-root="${generatedId}"]`);
+        root?.querySelector(".hu-sidebar-menu-button")?.setAttribute("aria-expanded", String(open));
+        const layer = root?.querySelector(".hu-sidebar-mobile-layer");
+        if (layer) {
+            layer.hidden = !open;
+            layer.dataset.open = String(open);
+        }
+    };
+    const setOpen = (next, reason = "programmatic") => {
+        if (!isControlled)
+            uncontrolledOpen.value = next;
+        if (typeof props.open === "object" && props.open != null && "peek" in props.open)
+            props.open.value = next;
+        syncMobileDrawer(next);
+        props.onOpenChange?.(next, reason);
+    };
+    const close = (reason) => {
+        setOpen(false, reason);
+        props.onClose?.(reason);
+    };
+    const closeFromCustomButton = (reason = "close-button") => close(reason);
+    const menuIcon = props.menuIcon ?? h("span", { class: "hu-sidebar-menu-icon-default", "aria-hidden": "true" }, "☰");
+    const menuLabel = props.menuLabel ?? "Menu";
+    const drawerTitle = props.drawerTitle ?? menuLabel;
+    const closeIcon = props.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 styleValue = [
+        props.topOffset !== undefined ? `--hu-sidebar-top:${formatCssSize(props.topOffset)}` : "",
+        props.height !== undefined ? `--hu-sidebar-height:${formatCssSize(props.height)}` : "",
+    ].filter(Boolean).join(";");
+    const renderNav = (closeOnSelect) => h("nav", { class: "hu-sidebar-nav", "aria-label": "Sidebar navigation" }, ...sections.map((section, si) => h("div", { key: si, class: "hu-sidebar-section" }, section.label && h("div", { class: "hu-sidebar-section-label" }, section.label), ...section.items.map((item) => {
+        const active = () => isSidebarItemActive(item);
+        return h(item.href ? "a" : "button", {
+            key: item.id,
+            class: () => cn("hu-sidebar-item", active() && "hu-sidebar-item--active"),
+            href: item.href,
+            type: item.href ? undefined : "button",
+            onClick: () => {
+                item.onClick?.();
+                if (closeOnSelect)
+                    close("item-select");
+            },
+            title: item.label, "aria-current": () => active() ? "page" : undefined
+        }, item.icon && h("span", { class: "hu-sidebar-item-icon", "aria-hidden": "true" }, item.icon), h("span", { class: "hu-sidebar-item-label" }, item.label), item.badge && h("span", { class: "hu-sidebar-item-badge" }, item.badge));
+    }))));
+    const sidebar = h("aside", {
+        class: cn("hu-sidebar", `hu-sidebar--${width}`, `hu-sidebar--${position}`, responsive && "hu-sidebar--responsive", responsive && `hu-sidebar--mobile-${mobileMode}`, props.class),
+        style: styleValue || undefined
+    }, header && h("div", { class: "hu-sidebar-header" }, header), renderNav(false), footer && h("div", { class: "hu-sidebar-footer" }, footer));
+    if (!responsive || mobileMode === "top")
+        return sidebar;
+    const drawerLayer = h("div", {
+        class: "hu-sidebar-mobile-layer",
+        hidden: () => !isOpen(),
+        "data-open": () => String(isOpen()),
+        onKeyDown: (event) => {
+            if (event.key === "Escape")
+                close("escape");
+        }
+    }, h("div", { class: "hu-sidebar-backdrop", onClick: () => close("backdrop") }), h("aside", {
+        id: drawerId,
+        class: "hu-sidebar-drawer",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": drawerTitleId,
+        tabindex: "-1"
+    }, h("div", { class: "hu-sidebar-drawer__header" }, h("div", { id: drawerTitleId, class: "hu-sidebar-drawer__title" }, drawerTitle), renderCloseButton(props.closeButton, closeFromCustomButton, closeIcon)), h("div", { class: "hu-sidebar-drawer__content" }, renderNav(true)), footer && h("div", { class: "hu-sidebar-drawer__footer" }, footer)));
+    return h("div", { class: "hu-sidebar-responsive-root", style: styleValue || undefined, "data-hu-sidebar-root": generatedId }, sidebar, h("div", { class: "hu-sidebar-mobile-shell" }, h("div", { class: "hu-sidebar-mobile-bar" }, h("button", {
+        type: "button",
+        class: "hu-sidebar-menu-button",
+        "aria-label": menuLabel,
+        "aria-controls": drawerId,
+        "aria-haspopup": "dialog",
+        "aria-expanded": () => String(isOpen()),
+        onClick: () => setOpen(true, "trigger")
+    }, h("span", { class: "hu-sidebar-menu-button__icon", "aria-hidden": "true" }, menuIcon), h("span", { class: "hu-sidebar-menu-button__label" }, menuLabel))), drawerLayer));
+}
+function formatCssSize(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+function isSidebarItemActive(item) {
+    if (typeof item.active === "function")
+        return item.active();
+    if (typeof item.active === "object" && item.active != null && "peek" in item.active)
+        return item.active.value;
+    return item.active === true;
+}
+function renderCloseButton(closeButton, close, closeIcon) {
+    if (typeof closeButton === "function") {
+        return closeButton(close);
+    }
+    if (closeButton != null) {
+        return closeButton;
+    }
+    return h("button", {
+        type: "button",
+        class: "hu-sidebar-drawer__close",
+        "aria-label": "Close menu",
+        onClick: () => close("close-button")
+    }, closeIcon);
 }

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

@@ -1,3 +1,4 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface SpeedDialAction {
     icon: unknown;
@@ -6,12 +7,21 @@ export interface SpeedDialAction {
     disabled?: boolean;
 }
 export type SpeedDialDirection = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+export type SpeedDialPosition = "fixed" | "absolute" | "static";
+export type SpeedDialCloseReason = "backdrop" | "escape" | "action" | "toggle" | "programmatic";
 export interface SpeedDialProps {
     icon?: unknown;
     openIcon?: unknown;
+    open?: boolean | Signal<boolean>;
+    defaultOpen?: boolean;
     actions: SpeedDialAction[];
     direction?: SpeedDialDirection;
+    position?: SpeedDialPosition;
     backdrop?: boolean;
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    onOpenChange?: (open: boolean, reason?: SpeedDialCloseReason) => void;
+    onClose?: (reason?: SpeedDialCloseReason) => void;
     ariaLabel: string;
 }
 export declare function SpeedDial(props: SpeedDialProps): VNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SpeedDial/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmDpE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;AAE3F,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAiCtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SpeedDial/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA8DpE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;AAC3F,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAAG,cAAc,CAAC;AAEhG,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACtE,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAyEtD"}