@hyperpackai/hyperui 0.1.0

package/dist/components/ResizablePanel/index.js

@@ -0,0 +1,41 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const RESIZABLE_PANEL_CSS = `
+.hu-resizable-panel {
+  min-width: var(--hu-panel-min-width, 160px); max-width: var(--hu-panel-max-width, none);
+  min-height: var(--hu-panel-min-height, 120px); max-height: var(--hu-panel-max-height, none);
+  width: var(--hu-panel-width, auto); height: var(--hu-panel-height, auto);
+  resize: var(--hu-panel-resize, both); overflow: auto;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md);
+}
+.hu-resizable-panel__header {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--hu-space-3);
+  padding: var(--hu-space-3) var(--hu-space-4); border-block-end: 1px solid var(--hu-border);
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-resizable-panel__body { padding: var(--hu-space-4); min-width: 0; }
+`;
+function toCssUnit(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function ResizablePanel(props) {
+    injectCSS("hu-resizable-panel", RESIZABLE_PANEL_CSS);
+    const styles = [];
+    if (props.width !== undefined)
+        styles.push(`--hu-panel-width:${toCssUnit(props.width)}`);
+    if (props.height !== undefined)
+        styles.push(`--hu-panel-height:${toCssUnit(props.height)}`);
+    if (props.minWidth !== undefined)
+        styles.push(`--hu-panel-min-width:${toCssUnit(props.minWidth)}`);
+    if (props.maxWidth !== undefined)
+        styles.push(`--hu-panel-max-width:${toCssUnit(props.maxWidth)}`);
+    if (props.minHeight !== undefined)
+        styles.push(`--hu-panel-min-height:${toCssUnit(props.minHeight)}`);
+    if (props.maxHeight !== undefined)
+        styles.push(`--hu-panel-max-height:${toCssUnit(props.maxHeight)}`);
+    styles.push(`--hu-panel-resize:${props.resize ?? "both"}`);
+    return h("section", {
+        class: cn("hu-resizable-panel", props.class),
+        style: styles.join(";")
+    }, (props.title || props.actions) && h("div", { class: "hu-resizable-panel__header" }, h("div", {}, props.title), props.actions && h("div", {}, props.actions)), h("div", { class: "hu-resizable-panel__body" }, props.children));
+}

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

@@ -0,0 +1,12 @@
+import { type VNode } from "../../theme/index.js";
+export interface ScrollAreaProps {
+    orientation?: "vertical" | "horizontal" | "both";
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    class?: string;
+    viewportClass?: string;
+    children?: unknown;
+    onScroll?: (event: Event) => void;
+}
+export declare function ScrollArea(props?: ScrollAreaProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA6BpE,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC;AAOD,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB,GAAG,KAAK,CAoB7D"}

package/dist/components/ScrollArea/index.js

@@ -0,0 +1,50 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const SCROLL_AREA_CSS = `
+.hu-scroll-area {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
+.hu-scroll-area__viewport {
+  min-width: 0;
+  min-height: 0;
+  max-width: var(--hu-scroll-area-max-width, none);
+  max-height: var(--hu-scroll-area-max-height, none);
+  scrollbar-width: thin;
+  scrollbar-color: var(--hu-border-2) transparent;
+}
+.hu-scroll-area__viewport::-webkit-scrollbar { width: 10px; height: 10px; }
+.hu-scroll-area__viewport::-webkit-scrollbar-thumb {
+  background: var(--hu-border-2);
+  border-radius: var(--hu-radius-full);
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+.hu-scroll-area__viewport::-webkit-scrollbar-track { background: transparent; }
+.hu-scroll-area--vertical .hu-scroll-area__viewport { overflow-x: hidden; overflow-y: auto; }
+.hu-scroll-area--horizontal .hu-scroll-area__viewport { overflow-x: auto; overflow-y: hidden; }
+.hu-scroll-area--both .hu-scroll-area__viewport { overflow: auto; }
+`;
+function sizeValue(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function ScrollArea(props = {}) {
+    injectCSS("hu-scroll-area", SCROLL_AREA_CSS);
+    const orientation = props.orientation ?? "vertical";
+    const maxHeight = sizeValue(props.maxHeight);
+    const maxWidth = sizeValue(props.maxWidth);
+    const style = [
+        maxHeight && `--hu-scroll-area-max-height:${maxHeight}`,
+        maxWidth && `--hu-scroll-area-max-width:${maxWidth}`
+    ].filter(Boolean).join(";");
+    return h("div", {
+        class: cn("hu-scroll-area", `hu-scroll-area--${orientation}`, props.class),
+        style: style || undefined
+    }, h("div", {
+        class: cn("hu-scroll-area__viewport", props.viewportClass),
+        onScroll: props.onScroll,
+        tabindex: "0"
+    }, props.children));
+}

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

@@ -0,0 +1,23 @@
+import { type VNode } from "../../theme/index.js";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    group?: string;
+}
+export interface SelectProps {
+    value?: string;
+    options: SelectOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    required?: boolean;
+    size?: "sm" | "md" | "lg";
+    error?: string;
+    label?: string;
+    id?: string;
+    name?: string;
+    class?: string;
+    onChange?: (e: Event) => void;
+}
+export declare function Select(props: SelectProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Select/index.js

@@ -0,0 +1,52 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { Label } from "../Label/index.js";
+const SELECT_CSS = `
+.hu-select-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.hu-select-field { position: relative; display: flex; align-items: center; }
+.hu-select {
+  width: 100%; min-height: 40px; font-family: var(--hu-font-sans); font-size: var(--hu-font-size-sm);
+  color: var(--hu-text); background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2));
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  padding: 9px 40px 9px 12px; outline: none; appearance: none; 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);
+  box-shadow: var(--hu-shadow-xs);
+}
+.hu-select:hover:not(:disabled) { border-color: color-mix(in srgb, var(--hu-primary) 35%, var(--hu-border-2)); }
+.hu-select:focus { border-color: var(--hu-primary); background: var(--hu-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-primary) 18%, transparent), var(--hu-shadow-sm); }
+.hu-select:disabled { opacity: .5; cursor: not-allowed; background: var(--hu-bg-3); }
+.hu-select--error { border-color: var(--hu-error) !important; }
+.hu-select-arrow {
+  position: absolute; right: 12px; pointer-events: none; color: var(--hu-text-3);
+  width: 18px; height: 18px; display: grid; place-items: center;
+}
+.hu-select--sm { min-height: 34px; padding: 6px 34px 6px 10px; font-size: var(--hu-font-size-xs); border-radius: var(--hu-radius); }
+.hu-select--lg { min-height: 46px; padding: 11px 42px 11px 14px; font-size: var(--hu-font-size-base); }
+`;
+export function Select(props) {
+    injectCSS("hu-select", SELECT_CSS);
+    const { options, placeholder, error, label, size = "md", id, ...rest } = props;
+    const groups = new Map();
+    const ungrouped = [];
+    for (const opt of options) {
+        if (opt.group) {
+            if (!groups.has(opt.group))
+                groups.set(opt.group, []);
+            groups.get(opt.group).push(opt);
+        }
+        else
+            ungrouped.push(opt);
+    }
+    const renderOptions = (opts) => opts.map((opt) => h("option", { value: opt.value, disabled: opt.disabled }, opt.label));
+    const children = [];
+    if (placeholder)
+        children.push(h("option", { value: "", disabled: true }, placeholder));
+    children.push(...renderOptions(ungrouped));
+    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,
+        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));
+}

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

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

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

@@ -0,0 +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"}

package/dist/components/Sheet/index.js

@@ -0,0 +1,61 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { renderInPortal } from "../../portal.js";
+import { FocusTrap } from "../FocusTrap/index.js";
+const SHEET_CSS = `
+.hu-sheet-backdrop {
+  position: fixed; inset: 0; background: var(--hu-overlay);
+  z-index: var(--hu-z-backdrop);
+  animation: hu-fade-in var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-sheet {
+  position: fixed; background: var(--hu-bg); box-shadow: var(--hu-shadow-xl);
+  z-index: var(--hu-z-modal); overflow: auto; display: flex; flex-direction: column;
+}
+.hu-sheet--right  { top: 0; right: 0; bottom: 0; width: 400px; max-width: 90vw; border-radius: var(--hu-radius-lg) 0 0 var(--hu-radius-lg); animation: hu-slide-in-right var(--hu-duration) var(--hu-ease-out); }
+.hu-sheet--left   { top: 0; left: 0; bottom: 0; width: 400px; max-width: 90vw; border-radius: 0 var(--hu-radius-lg) var(--hu-radius-lg) 0; animation: hu-slide-in-left var(--hu-duration) var(--hu-ease-out); }
+.hu-sheet--bottom { bottom: 0; left: 0; right: 0; max-height: 90vh; border-radius: var(--hu-radius-lg) var(--hu-radius-lg) 0 0; animation: hu-slide-down var(--hu-duration) var(--hu-ease-out); }
+.hu-sheet--top    { top: 0; left: 0; right: 0; max-height: 90vh; border-radius: 0 0 var(--hu-radius-lg) var(--hu-radius-lg); animation: hu-slide-up var(--hu-duration) var(--hu-ease-out); }
+.hu-sheet-header { padding: var(--hu-space-5) var(--hu-space-6); border-bottom: 1px solid var(--hu-border); display: flex; align-items: center; justify-content: space-between; }
+.hu-sheet-title { margin: 0; font-size: var(--hu-font-size-md); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-sheet-body { padding: var(--hu-space-6); flex: 1; overflow: auto; }
+.hu-sheet-footer { padding: var(--hu-space-4) var(--hu-space-6); border-top: 1px solid var(--hu-border); }
+.hu-sheet-close {
+  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
+  border-radius:var(--hu-radius-md);background:linear-gradient(180deg,var(--hu-bg),var(--hu-bg-2));
+  border:1px solid var(--hu-border);cursor:pointer;color:var(--hu-text-3);
+  transition:background var(--hu-duration) var(--hu-ease),border-color var(--hu-duration) var(--hu-ease),color var(--hu-duration) var(--hu-ease),box-shadow var(--hu-duration) var(--hu-ease),transform var(--hu-duration-fast) var(--hu-ease);
+  flex-shrink:0;padding:0;box-shadow:var(--hu-shadow-xs);
+}
+.hu-sheet-close:hover { background:var(--hu-bg-3);color:var(--hu-text);border-color:var(--hu-border-2);box-shadow:var(--hu-shadow-sm);transform:translateY(-1px); }
+.hu-sheet-close:focus-visible { outline:2px solid var(--hu-primary);outline-offset:2px; }
+`;
+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 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))
+    })), "sheet");
+    if (!isSignalOpen)
+        return renderSheet();
+    return (() => isOpen() ? renderSheet() : h("span", { "aria-hidden": "true" }));
+}

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

@@ -0,0 +1,23 @@
+import { type VNode } from "../../theme/index.js";
+export interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: unknown;
+    badge?: unknown;
+    href?: string;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface SidebarSection {
+    label?: string;
+    items: SidebarItem[];
+}
+export interface SidebarProps {
+    header?: unknown;
+    sections: SidebarSection[];
+    footer?: unknown;
+    width?: "sm" | "md" | "lg";
+    class?: string;
+}
+export declare function Sidebar(props: SidebarProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Sidebar/index.js

@@ -0,0 +1,37 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const SIDEBAR_CSS = `
+.hu-sidebar {
+  display: flex; flex-direction: column; height: 100vh; 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: 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-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); }
+.hu-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; }
+.hu-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);
+  color: var(--hu-text-2); text-decoration: none; border: none; background: transparent;
+  cursor: pointer; font-weight: var(--hu-font-weight-medium);
+  transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), transform var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-sidebar-item:hover { background: var(--hu-bg-3); color: var(--hu-text); transform: translateX(1px); }
+.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-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); }
+`;
+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));
+}

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

@@ -0,0 +1,9 @@
+import { type VNode } from "../../theme/index.js";
+export interface SkeletonProps {
+    width?: string | number;
+    height?: string | number;
+    variant?: "rect" | "text" | "circle" | "title";
+    class?: string;
+}
+export declare function Skeleton(props: SkeletonProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAapE,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAWpD"}

package/dist/components/Skeleton/index.js

@@ -0,0 +1,22 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const SKELETON_CSS = `
+.hu-skeleton {
+  display: block; border-radius: var(--hu-radius);
+  background: linear-gradient(90deg, var(--hu-bg-3) 25%, var(--hu-bg-4) 50%, var(--hu-bg-3) 75%);
+  background-size: 200% 100%; animation: hu-shimmer 1.5s infinite;
+}
+.hu-skeleton--text { height: 14px; border-radius: var(--hu-radius-sm); }
+.hu-skeleton--circle { border-radius: var(--hu-radius-full); }
+.hu-skeleton--title { height: 24px; border-radius: var(--hu-radius-sm); }
+`;
+export function Skeleton(props) {
+    injectCSS("hu-skeleton", SKELETON_CSS);
+    const { width, height, variant = "rect" } = props;
+    const w = typeof width === "number" ? `${width}px` : width;
+    const h_ = typeof height === "number" ? `${height}px` : height;
+    return h("span", {
+        class: cn("hu-skeleton", variant !== "rect" && `hu-skeleton--${variant}`, props.class),
+        style: [w && `width:${w}`, h_ && `height:${h_}`].filter(Boolean).join(";"),
+        "aria-hidden": "true"
+    });
+}

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

@@ -0,0 +1,12 @@
+import { type VNode } from "../../theme/index.js";
+export type SlideDirection = "left" | "right" | "up" | "down";
+export interface SlideProps {
+    in: boolean;
+    direction?: SlideDirection;
+    timeout?: number;
+    unmountOnExit?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Slide(props: SlideProps): VNode | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAYpE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9D,MAAM,WAAW,UAAU;IAAG,EAAE,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,cAAc,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAEtJ,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,GAAG,IAAI,CASrD"}

package/dist/components/Slide/index.js

@@ -0,0 +1,21 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-slide { transition: transform var(--hu-duration) cubic-bezier(.4,0,.2,1), opacity var(--hu-duration) var(--hu-ease); }
+.hu-slide--in  { transform: translate(0,0); opacity: 1; }
+.hu-slide--out { opacity: 0; pointer-events: none; }
+.hu-slide--out-left   { transform: translateX(-100%); }
+.hu-slide--out-right  { transform: translateX(100%); }
+.hu-slide--out-up     { transform: translateY(-100%); }
+.hu-slide--out-down   { transform: translateY(100%); }
+`;
+export function Slide(props) {
+    injectCSS("hu-slide", CSS);
+    const { in: isIn, direction = "down", unmountOnExit } = props;
+    if (!isIn && unmountOnExit)
+        return null;
+    const style = props.timeout ? `transition-duration:${props.timeout}ms` : undefined;
+    return h("div", {
+        class: cn("hu-slide", isIn ? "hu-slide--in" : `hu-slide--out hu-slide--out-${direction}`, props.class),
+        style
+    }, props.children);
+}

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

@@ -0,0 +1,19 @@
+import { type VNode } from "../../theme/index.js";
+export interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: "sm" | "md" | "lg";
+    disabled?: boolean;
+    marks?: boolean | Array<{
+        value: number;
+        label?: string;
+    }>;
+    showValueLabel?: boolean;
+    onChange?: (value: number) => void;
+    class?: string;
+}
+export declare function Slider(props: SliderProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiCpE,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC3D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAyBhD"}

package/dist/components/Slider/index.js

@@ -0,0 +1,49 @@
+import { signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+const SLIDER_CSS = `
+.hu-slider { display: flex; align-items: center; width: 100%; position: relative; padding: 12px 0; cursor: pointer; user-select: none; }
+.hu-slider__track-bg {
+  width: 100%; height: 4px; border-radius: 2px;
+  background: var(--hu-border-2); position: relative;
+}
+.hu-slider__track-fill {
+  position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px;
+  background: var(--hu-primary); transition: width 0ms;
+}
+.hu-slider__thumb {
+  position: absolute; top: 50%; transform: translate(-50%, -50%);
+  width: 18px; height: 18px; border-radius: 50%; background: var(--hu-primary);
+  box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: box-shadow var(--hu-duration);
+}
+.hu-slider__thumb:hover { box-shadow: 0 0 0 8px var(--hu-primary-bg); }
+.hu-slider:focus-within .hu-slider__thumb { box-shadow: 0 0 0 10px var(--hu-primary-bg); }
+.hu-slider__input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; margin: 0; }
+.hu-slider--disabled { opacity: .5; pointer-events: none; }
+.hu-slider--sm .hu-slider__track-bg { height: 2px; }
+.hu-slider--sm .hu-slider__thumb { width: 14px; height: 14px; }
+.hu-slider--lg .hu-slider__track-bg { height: 6px; }
+.hu-slider--lg .hu-slider__thumb { width: 22px; height: 22px; }
+.hu-slider__mark { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: var(--hu-primary-bg); border: 2px solid var(--hu-primary); }
+.hu-slider__value-label {
+  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
+  background: var(--hu-text); color: var(--hu-bg); font-size: 11px; padding: 2px 6px;
+  border-radius: var(--hu-radius-sm); white-space: nowrap; pointer-events: none;
+}
+`;
+export function Slider(props) {
+    injectCSS("hu-slider", SLIDER_CSS);
+    const { min = 0, max = 100, step = 1, size = "md", disabled, onChange } = props;
+    const val = signal(props.value ?? props.defaultValue ?? 0);
+    const pct = () => ((val.value - min) / (max - min)) * 100;
+    return h("div", {
+        class: cn("hu-slider", `hu-slider--${size}`, disabled && "hu-slider--disabled", props.class)
+    }, h("div", { class: "hu-slider__track-bg" }, h("div", { class: "hu-slider__track-fill", style: `width:${pct()}%` }), h("div", { class: "hu-slider__thumb", style: `left:${pct()}%` }, props.showValueLabel && h("div", { class: "hu-slider__value-label" }, String(val.value)))), h("input", {
+        class: "hu-slider__input",
+        type: "range", min, max, step,
+        value: val.value, disabled,
+        onInput: (e) => {
+            val.value = Number(e.target.value);
+            onChange?.(val.value);
+        }
+    }));
+}

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

@@ -0,0 +1,28 @@
+import { type VNode } from "../../theme/index.js";
+export type SnackbarSeverity = "default" | "success" | "error" | "warning" | "info";
+export type SnackbarPosition = "bottom-left" | "bottom-center" | "bottom-right" | "top-left" | "top-center" | "top-right";
+export interface SnackbarItem {
+    id: string;
+    message: string;
+    severity?: SnackbarSeverity;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    duration?: number;
+}
+export declare function useSnackbar(): {
+    show: (message: string, options?: Partial<Omit<SnackbarItem, "id" | "message">>) => string;
+    dismiss: (id: string) => void;
+    clear: () => void;
+    success: (msg: string, opts?: Partial<SnackbarItem>) => string;
+    error: (msg: string, opts?: Partial<SnackbarItem>) => string;
+    warning: (msg: string, opts?: Partial<SnackbarItem>) => string;
+    info: (msg: string, opts?: Partial<SnackbarItem>) => string;
+};
+export interface SnackbarRegionProps {
+    position?: SnackbarPosition;
+    maxItems?: number;
+}
+export declare function SnackbarRegion(props: SnackbarRegionProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Snackbar/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0CpE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,GAAG,UAAU,GAAG,YAAY,GAAG,WAAW,CAAC;AAE1H,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAKD,wBAAgB,WAAW;oBACF,MAAM,YAAW,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,GAAG,SAAS,CAAC,CAAC;kBAShE,MAAM;;mBAGV,MAAM,SAAS,OAAO,CAAC,YAAY,CAAC;iBACpC,MAAM,SAAS,OAAO,CAAC,YAAY,CAAC;mBACpC,MAAM,SAAS,OAAO,CAAC,YAAY,CAAC;gBACpC,MAAM,SAAS,OAAO,CAAC,YAAY,CAAC;EAEtD;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,CAiBhE"}

package/dist/components/Snackbar/index.js

@@ -0,0 +1,71 @@
+import { signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { renderInPortal } from "../../portal.js";
+const CSS = `
+.hu-snackbar {
+  position: fixed; z-index: var(--hu-z-toast); pointer-events: none;
+  display: flex; flex-direction: column; gap: var(--hu-space-2);
+  max-width: min(480px, calc(100vw - 32px));
+}
+.hu-snackbar--bottom-left   { bottom: var(--hu-space-4); left: var(--hu-space-4); }
+.hu-snackbar--bottom-center { bottom: var(--hu-space-4); left: 50%; transform: translateX(-50%); }
+.hu-snackbar--bottom-right  { bottom: var(--hu-space-4); right: var(--hu-space-4); }
+.hu-snackbar--top-left      { top: var(--hu-space-4); left: var(--hu-space-4); }
+.hu-snackbar--top-center    { top: var(--hu-space-4); left: 50%; transform: translateX(-50%); }
+.hu-snackbar--top-right     { top: var(--hu-space-4); right: var(--hu-space-4); }
+
+.hu-snackbar__item {
+  display: flex; align-items: center; gap: var(--hu-space-3);
+  min-width: min(280px, calc(100vw - 32px)); max-width: 480px;
+  padding: var(--hu-space-3) var(--hu-space-4); border-radius: var(--hu-radius-lg);
+  background: #1e293b; color: #f1f5f9; font-size: var(--hu-font-size-sm);
+  box-shadow: var(--hu-shadow-lg); pointer-events: all;
+  animation: hu-snack-in 200ms cubic-bezier(.34,1.56,.64,1) forwards;
+}
+.hu-snackbar__item--success { background: var(--hu-success); color: #fff; }
+.hu-snackbar__item--error   { background: var(--hu-error);   color: #fff; }
+.hu-snackbar__item--warning { background: var(--hu-warning); color: #fff; }
+.hu-snackbar__item--info    { background: var(--hu-info);    color: #fff; }
+.hu-snackbar__message { flex: 1; min-width: 0; line-height: var(--hu-line-height-normal); }
+.hu-snackbar__action { background: none; border: none; color: inherit; cursor: pointer; font-weight: var(--hu-font-weight-semibold); font-size: var(--hu-font-size-sm); padding: 4px 8px; border-radius: var(--hu-radius-sm); opacity: .85; font-family: var(--hu-font-sans); }
+.hu-snackbar__action:hover { opacity: 1; background: rgba(255,255,255,.1); }
+.hu-snackbar__action:focus-visible,
+.hu-snackbar__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.hu-snackbar__close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; background: none; border: 1px solid transparent; border-radius: var(--hu-radius);
+  color: inherit; cursor: pointer; padding: 0; font-size: 18px; line-height: 1; opacity: .76;
+}
+.hu-snackbar__close:hover { opacity: 1; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); }
+@keyframes hu-snack-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
+`;
+// Global snackbar queue
+const _items = signal([]);
+export function useSnackbar() {
+    const show = (message, options = {}) => {
+        const id = Math.random().toString(36).slice(2);
+        const item = { id, message, severity: "default", duration: 4000, ...options };
+        _items.value = [..._items.value, item];
+        if (item.duration && item.duration > 0) {
+            setTimeout(() => dismiss(id), item.duration);
+        }
+        return id;
+    };
+    const dismiss = (id) => { _items.value = _items.value.filter(i => i.id !== id); };
+    const clear = () => { _items.value = []; };
+    return { show, dismiss, clear,
+        success: (msg, opts) => show(msg, { severity: "success", ...opts }),
+        error: (msg, opts) => show(msg, { severity: "error", ...opts }),
+        warning: (msg, opts) => show(msg, { severity: "warning", ...opts }),
+        info: (msg, opts) => show(msg, { severity: "info", ...opts }),
+    };
+}
+export function SnackbarRegion(props) {
+    injectCSS("hu-snackbar", CSS);
+    const { position = "bottom-left", maxItems = 5 } = props;
+    const snackbar = useSnackbar();
+    return (() => {
+        const items = _items.value.slice(-maxItems);
+        return renderInPortal(h("div", { class: cn("hu-snackbar", `hu-snackbar--${position}`), "aria-live": "polite" }, ...items.map(item => h("div", { class: cn("hu-snackbar__item", item.severity !== "default" && `hu-snackbar__item--${item.severity}`), role: "alert" }, h("span", { class: "hu-snackbar__message" }, item.message), item.action && h("button", { class: "hu-snackbar__action", onClick: item.action.onClick }, item.action.label), h("button", { class: "hu-snackbar__close", onClick: () => snackbar.dismiss(item.id), "aria-label": "close" }, "×")))), "snackbar");
+    });
+}

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

@@ -0,0 +1,18 @@
+import { type VNode } from "../../theme/index.js";
+export interface SpeedDialAction {
+    icon: unknown;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export type SpeedDialDirection = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+export interface SpeedDialProps {
+    icon?: unknown;
+    openIcon?: unknown;
+    actions: SpeedDialAction[];
+    direction?: SpeedDialDirection;
+    backdrop?: boolean;
+    ariaLabel: string;
+}
+export declare function SpeedDial(props: SpeedDialProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}