@hyperpackai/hyperui 0.1.0

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

@@ -0,0 +1,20 @@
+import { type VNode } from "../../theme/index.js";
+export interface ShortcutDefinition {
+    keys: string[];
+    handler: (event: KeyboardEvent) => void;
+    preventDefault?: boolean;
+    disabled?: boolean;
+}
+export interface ShortcutProviderProps {
+    shortcuts?: ShortcutDefinition[];
+    class?: string;
+    children?: unknown;
+}
+export interface KeyboardShortcutProps {
+    keys: string[];
+    label?: string;
+    class?: string;
+}
+export declare function ShortcutProvider(props?: ShortcutProviderProps): VNode;
+export declare function KeyboardShortcut(props: KeyboardShortcutProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/KeyboardShortcut/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsBD,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,qBAA0B,GAAG,KAAK,CAoBzE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAOpE"}

package/dist/components/KeyboardShortcut/index.js

@@ -0,0 +1,63 @@
+import { onCleanup, onMount } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { Kbd } from "../Kbd/index.js";
+const KEYBOARD_SHORTCUT_CSS = `
+.hu-shortcut-provider {
+  display: contents;
+}
+.hu-keyboard-shortcut {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--hu-space-2);
+  color: var(--hu-text-2);
+  font-size: var(--hu-font-size-sm);
+}
+.hu-keyboard-shortcut__label {
+  color: var(--hu-text);
+}
+`;
+function normalizeKey(key) {
+    return key.toLowerCase().replace("cmd", "meta").replace("command", "meta").replace("ctrl", "control");
+}
+function eventMatches(event, keys) {
+    const expected = new Set(keys.map(normalizeKey));
+    const modifiers = [
+        event.ctrlKey && "control",
+        event.metaKey && "meta",
+        event.altKey && "alt",
+        event.shiftKey && "shift"
+    ].filter(Boolean);
+    const pressed = new Set([...modifiers, normalizeKey(event.key)]);
+    if (expected.size !== pressed.size)
+        return false;
+    for (const key of expected) {
+        if (!pressed.has(key))
+            return false;
+    }
+    return true;
+}
+export function ShortcutProvider(props = {}) {
+    injectCSS("hu-keyboard-shortcut", KEYBOARD_SHORTCUT_CSS);
+    onMount(() => {
+        if (typeof document === "undefined")
+            return undefined;
+        const listener = (event) => {
+            for (const shortcut of props.shortcuts ?? []) {
+                if (shortcut.disabled || !eventMatches(event, shortcut.keys))
+                    continue;
+                if (shortcut.preventDefault ?? true)
+                    event.preventDefault();
+                shortcut.handler(event);
+                break;
+            }
+        };
+        document.addEventListener("keydown", listener);
+        return () => document.removeEventListener("keydown", listener);
+    });
+    onCleanup(() => undefined);
+    return h("div", { class: cn("hu-shortcut-provider", props.class) }, props.children);
+}
+export function KeyboardShortcut(props) {
+    injectCSS("hu-keyboard-shortcut", KEYBOARD_SHORTCUT_CSS);
+    return h("span", { class: cn("hu-keyboard-shortcut", props.class) }, props.label ? h("span", { class: "hu-keyboard-shortcut__label" }, props.label) : undefined, Kbd({ keys: props.keys }));
+}

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

@@ -0,0 +1,10 @@
+import { type VNode } from "../../theme/index.js";
+export interface LabelProps {
+    for?: string;
+    required?: boolean;
+    disabled?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Label(props: LabelProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAYpE,MAAM,WAAW,UAAU;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAM9C"}

package/dist/components/Label/index.js

@@ -0,0 +1,17 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const LABEL_CSS = `
+.hu-label {
+  display: block; font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-medium); color: var(--hu-text);
+  margin-bottom: var(--hu-space-1); cursor: default;
+}
+.hu-label--required::after { content: " *"; color: var(--hu-error); }
+.hu-label--disabled { opacity: .5; }
+`;
+export function Label(props) {
+    injectCSS("hu-label", LABEL_CSS);
+    return h("label", {
+        for: props.for, htmlFor: props.for,
+        class: cn("hu-label", props.required && "hu-label--required", props.disabled && "hu-label--disabled", props.class)
+    }, props.children);
+}

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

@@ -0,0 +1,13 @@
+import { type VNode } from "../../theme/index.js";
+export type LinearProgressVariant = "determinate" | "indeterminate" | "buffer";
+export type LinearProgressColor = "primary" | "secondary" | "error" | "warning" | "success" | "inherit";
+export interface LinearProgressProps {
+    value?: number;
+    valueBuffer?: number;
+    variant?: LinearProgressVariant;
+    color?: LinearProgressColor;
+    size?: "sm" | "md" | "lg";
+    class?: string;
+}
+export declare function LinearProgress(props: LinearProgressProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LinearProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAwDpE,MAAM,MAAM,qBAAqB,GAAG,aAAa,GAAG,eAAe,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAExG,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,qBAAqB,CAAC;IAChC,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,CAkBhE"}

package/dist/components/LinearProgress/index.js

@@ -0,0 +1,69 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-linear-progress {
+  position: relative; overflow: hidden; width: 100%;
+  height: 4px; border-radius: 2px; background: var(--hu-border-2);
+}
+.hu-linear-progress--primary   { --lp-color: var(--hu-primary); }
+.hu-linear-progress--secondary { --lp-color: var(--hu-text-2); }
+.hu-linear-progress--error     { --lp-color: var(--hu-error); }
+.hu-linear-progress--warning   { --lp-color: var(--hu-warning); }
+.hu-linear-progress--success   { --lp-color: var(--hu-success); }
+.hu-linear-progress--inherit   { --lp-color: currentColor; }
+
+/* Determinate */
+.hu-linear-progress__bar {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  background: var(--lp-color, var(--hu-primary)); border-radius: inherit;
+  transition: width 300ms cubic-bezier(.4,0,.2,1);
+}
+
+/* Indeterminate */
+.hu-linear-progress--indeterminate .hu-linear-progress__bar {
+  width: 100%;
+  animation: hu-lp-indeterminate1 2.1s cubic-bezier(.65,.815,.735,.395) infinite;
+}
+.hu-linear-progress--indeterminate .hu-linear-progress__bar2 {
+  position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit;
+  background: var(--lp-color, var(--hu-primary));
+  animation: hu-lp-indeterminate2 2.1s cubic-bezier(.165,.84,.44,1) 1.15s infinite;
+}
+
+/* Buffer */
+.hu-linear-progress__buffer {
+  position: absolute; left: 0; top: 0; bottom: 0;
+  background: var(--lp-color, var(--hu-primary)); opacity: .3; border-radius: inherit;
+  transition: width 300ms cubic-bezier(.4,0,.2,1);
+}
+
+/* Sizes */
+.hu-linear-progress--sm { height: 2px; }
+.hu-linear-progress--md { height: 4px; }
+.hu-linear-progress--lg { height: 8px; }
+
+@keyframes hu-lp-indeterminate1 {
+  0%   { left: -35%; right: 100%; }
+  60%  { left: 100%; right: -90%; }
+  100% { left: 100%; right: -90%; }
+}
+@keyframes hu-lp-indeterminate2 {
+  0%   { left: -200%; right: 100%; }
+  60%  { left: 107%;  right: -8%;  }
+  100% { left: 107%;  right: -8%;  }
+}
+`;
+export function LinearProgress(props) {
+    injectCSS("hu-linear-progress", CSS);
+    const { variant = "indeterminate", color = "primary", size = "md", value = 0, valueBuffer = 0 } = props;
+    return h("div", {
+        class: cn("hu-linear-progress", `hu-linear-progress--${color}`, `hu-linear-progress--${variant}`, `hu-linear-progress--${size}`, props.class),
+        role: "progressbar",
+        "aria-valuenow": variant === "determinate" ? value : undefined,
+        "aria-valuemin": "0", "aria-valuemax": "100"
+    }, variant === "buffer" && h("div", { class: "hu-linear-progress__buffer", style: `width:${valueBuffer}%` }), variant !== "indeterminate"
+        ? h("div", { class: "hu-linear-progress__bar", style: `width:${value}%` })
+        : [
+            h("div", { class: "hu-linear-progress__bar" }),
+            h("div", { class: "hu-linear-progress__bar2" })
+        ]);
+}

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

@@ -0,0 +1,16 @@
+import { type VNode } from "../../theme/index.js";
+export type LinkColor = "primary" | "inherit" | "secondary" | "error";
+export type LinkUnderline = "none" | "hover" | "always";
+export interface LinkProps {
+    href?: string;
+    target?: string;
+    rel?: string;
+    color?: LinkColor;
+    underline?: LinkUnderline;
+    component?: string;
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function Link(props: LinkProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiBpE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACtE,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAc5C"}

package/dist/components/Link/index.js

@@ -0,0 +1,25 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const LINK_CSS = `
+.hu-link {
+  color: var(--hu-primary); text-decoration: underline; text-underline-offset: 3px;
+  text-decoration-color: transparent; transition: all var(--hu-duration) var(--hu-ease);
+  cursor: pointer; font-family: var(--hu-font-sans);
+}
+.hu-link:hover { text-decoration-color: var(--hu-primary); }
+.hu-link--inherit { color: inherit; }
+.hu-link--secondary { color: var(--hu-text-2); }
+.hu-link--error { color: var(--hu-error); }
+.hu-link--underline-always { text-decoration-color: currentColor; }
+.hu-link--underline-none { text-decoration: none; }
+.hu-link--underline-none:hover { text-decoration: underline; text-underline-offset: 3px; }
+`;
+export function Link(props) {
+    injectCSS("hu-link", LINK_CSS);
+    const { href, target, rel, color = "primary", underline = "hover", component = "a", onClick, children } = props;
+    return h(component, {
+        class: cn("hu-link", color !== "primary" && `hu-link--${color}`, underline !== "hover" && `hu-link--underline-${underline}`, props.class),
+        href, target,
+        rel: target === "_blank" ? (rel ?? "noopener noreferrer") : rel,
+        onClick
+    }, children);
+}

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

@@ -0,0 +1,40 @@
+import { type VNode } from "../../theme/index.js";
+export interface ListSubheaderProps {
+    sticky?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function ListSubheader(props: ListSubheaderProps): VNode;
+export interface ListProps {
+    dense?: boolean;
+    bordered?: boolean;
+    disablePadding?: boolean;
+    subheader?: unknown;
+    class?: string;
+    children?: unknown;
+}
+export declare function List(props: ListProps): VNode;
+export interface ListItemProps {
+    button?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    divider?: boolean;
+    alignItems?: "flex-start" | "center";
+    secondaryAction?: unknown;
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function ListItem(props: ListItemProps): VNode;
+export interface ListItemIconProps {
+    class?: string;
+    children?: unknown;
+}
+export declare function ListItemIcon(props: ListItemIconProps): VNode;
+export interface ListItemTextProps {
+    primary?: unknown;
+    secondary?: unknown;
+    class?: string;
+}
+export declare function ListItemText(props: ListItemTextProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA6CpE,MAAM,WAAW,kBAAkB;IAAG,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAC5F,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,CAG9D;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAQ5C;AAED,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAkBpD;AAED,MAAM,WAAW,iBAAiB;IAAG,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AACzE,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAG5D;AAED,MAAM,WAAW,iBAAiB;IAAG,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE;AAC7F,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CAM5D"}

package/dist/components/List/index.js

@@ -0,0 +1,70 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const LIST_CSS = `
+.hu-list { list-style: none; padding: 0; margin: 0; min-width: 0; }
+.hu-list--dense .hu-list-item { padding-top: 4px; padding-bottom: 4px; }
+.hu-list--bordered {
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md); overflow: hidden;
+  background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2)); box-shadow: var(--hu-shadow-xs);
+}
+.hu-list--bordered .hu-list-item + .hu-list-item { border-top: 1px solid var(--hu-border); }
+.hu-list--disablePadding .hu-list-item { padding-left: 0; padding-right: 0; }
+
+.hu-list-subheader {
+  padding: 6px var(--hu-space-2) var(--hu-space-1);
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
+  color: var(--hu-text-2); text-transform: uppercase; letter-spacing: .06em;
+  line-height: 2.4;
+}
+.hu-list-subheader--sticky { position: sticky; top: 0; background: color-mix(in srgb, var(--hu-bg) 92%, transparent); backdrop-filter: blur(10px); z-index: 1; }
+
+.hu-list-item {
+  display: flex; align-items: center;
+  padding: 10px var(--hu-space-2);
+  min-height: 48px; box-sizing: border-box;
+  position: relative; gap: var(--hu-space-1); color: var(--hu-text);
+}
+.hu-list-item--button {
+  width: 100%; border: 0; background: transparent; font: inherit; text-align: left;
+  cursor: pointer; transition: background var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease);
+}
+.hu-list-item--button:hover { background: color-mix(in srgb, var(--hu-primary-bg) 42%, var(--hu-bg-2)); }
+.hu-list-item--button:focus-visible { background: color-mix(in srgb, var(--hu-primary-bg) 48%, var(--hu-bg-2)); outline: 2px solid var(--hu-primary); outline-offset: -2px; }
+.hu-list-item--selected { background: var(--hu-primary-bg); color: var(--hu-primary); }
+.hu-list-item--selected .hu-list-item-icon,
+.hu-list-item--selected .hu-list-item-text__primary { color: var(--hu-primary); }
+.hu-list-item--disabled { opacity: .5; pointer-events: none; }
+.hu-list-item--divider { border-bottom: 1px solid var(--hu-border); }
+.hu-list-item-icon { min-width: 40px; color: var(--hu-text-2); display: flex; align-items: center; justify-content: flex-start; }
+.hu-list-item-avatar { min-width: 56px; }
+.hu-list-item-text { flex: 1; min-width: 0; }
+.hu-list-item-text__primary { font-size: var(--hu-font-size-sm); color: var(--hu-text); font-weight: var(--hu-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-list-item-text__secondary { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-list-item-secondary-action { margin-left: var(--hu-space-2); }
+`;
+export function ListSubheader(props) {
+    injectCSS("hu-list", LIST_CSS);
+    return h("li", { class: cn("hu-list-subheader", props.sticky && "hu-list-subheader--sticky", props.class) }, props.children);
+}
+export function List(props) {
+    injectCSS("hu-list", LIST_CSS);
+    return h("ul", {
+        class: cn("hu-list", props.dense && "hu-list--dense", props.bordered && "hu-list--bordered", props.disablePadding && "hu-list--disablePadding", props.class)
+    }, props.subheader, props.children);
+}
+export function ListItem(props) {
+    injectCSS("hu-list", LIST_CSS);
+    const { button, selected, disabled, divider, secondaryAction, onClick, children } = props;
+    return h(button ? "button" : "li", {
+        class: cn("hu-list-item", button && "hu-list-item--button", selected && "hu-list-item--selected", disabled && "hu-list-item--disabled", divider && "hu-list-item--divider", props.class),
+        type: button ? "button" : undefined,
+        disabled, onClick, tabindex: button ? "0" : undefined
+    }, children, secondaryAction && h("div", { class: "hu-list-item-secondary-action" }, secondaryAction));
+}
+export function ListItemIcon(props) {
+    injectCSS("hu-list", LIST_CSS);
+    return h("div", { class: cn("hu-list-item-icon", props.class) }, props.children);
+}
+export function ListItemText(props) {
+    injectCSS("hu-list", LIST_CSS);
+    return h("div", { class: cn("hu-list-item-text", props.class) }, props.primary && h("div", { class: "hu-list-item-text__primary" }, props.primary), props.secondary && h("div", { class: "hu-list-item-text__secondary" }, props.secondary));
+}

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

@@ -0,0 +1,11 @@
+import { type VNode } from "../../theme/index.js";
+export interface LoadingStateProps {
+    label?: string;
+    description?: string;
+    variant?: "spinner" | "skeleton" | "dots" | "bars" | "wave";
+    size?: "sm" | "md" | "lg";
+    minHeight?: string | number;
+    class?: string;
+}
+export declare function LoadingState(props?: LoadingStateProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA+CpE,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5D,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAOD,wBAAgB,YAAY,CAAC,KAAK,GAAE,iBAAsB,GAAG,KAAK,CAsBjE"}

package/dist/components/LoadingState/index.js

@@ -0,0 +1,66 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { Spinner } from "../Spinner/index.js";
+const LOADING_STATE_CSS = `
+.hu-loading-state {
+  display: grid;
+  place-items: center;
+  gap: var(--hu-space-3);
+  width: 100%;
+  min-height: var(--hu-loading-state-min-height, 180px);
+  padding: var(--hu-space-8) var(--hu-space-6);
+  text-align: center;
+  color: var(--hu-text-2);
+}
+.hu-loading-state__label {
+  color: var(--hu-text);
+  font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-semibold);
+}
+.hu-loading-state__description {
+  margin: calc(var(--hu-space-2) * -1) 0 0;
+  max-width: 48ch;
+  font-size: var(--hu-font-size-sm);
+  line-height: 1.6;
+}
+.hu-loading-state__skeleton {
+  display: grid;
+  gap: var(--hu-space-3);
+  width: min(420px, 100%);
+}
+.hu-loading-state__skeleton span {
+  display: block;
+  height: 12px;
+  border-radius: var(--hu-radius-full);
+  background: linear-gradient(90deg, var(--hu-bg-3), var(--hu-bg-2), var(--hu-bg-3));
+  background-size: 220% 100%;
+  animation: hu-loading-state-shimmer 1.35s ease-in-out infinite;
+}
+.hu-loading-state__skeleton span:nth-child(1) { width: 72%; }
+.hu-loading-state__skeleton span:nth-child(2) { width: 100%; }
+.hu-loading-state__skeleton span:nth-child(3) { width: 54%; }
+@keyframes hu-loading-state-shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+`;
+function sizeValue(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function LoadingState(props = {}) {
+    injectCSS("hu-loading-state", LOADING_STATE_CSS);
+    const variant = props.variant ?? "spinner";
+    const minHeight = sizeValue(props.minHeight);
+    const spinnerSize = props.size ?? "md";
+    const spinnerVariant = variant === "spinner" || variant === "skeleton" ? "spin" : variant;
+    return h("section", {
+        class: cn("hu-loading-state", props.class),
+        role: "status",
+        "aria-live": "polite",
+        "aria-busy": "true",
+        style: minHeight ? `--hu-loading-state-min-height:${minHeight}` : undefined
+    }, variant === "skeleton"
+        ? h("div", { class: "hu-loading-state__skeleton", "aria-hidden": "true" }, h("span", {}), h("span", {}), h("span", {}))
+        : Spinner({ variant: spinnerVariant, size: spinnerSize, label: props.label ?? "Loading" }), props.label ? h("div", { class: "hu-loading-state__label" }, props.label) : undefined, props.description ? h("p", { class: "hu-loading-state__description" }, props.description) : undefined);
+}

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

@@ -0,0 +1,40 @@
+import { type VNode } from "../../theme/index.js";
+export type MenuPlacement = "bottom-left" | "bottom-right" | "top-left" | "top-right";
+export interface MenuItemDef {
+    label: string;
+    icon?: unknown;
+    shortcut?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    selected?: boolean;
+    destructive?: boolean;
+    type?: "item" | "divider" | "group";
+    groupLabel?: string;
+    children?: MenuItemDef[];
+}
+export interface MenuProps {
+    items: MenuItemDef[];
+    placement?: MenuPlacement;
+    trigger: unknown;
+    onOpenChange?: (open: boolean) => void;
+    onClose?: () => void;
+    class?: string;
+}
+export declare function Menu(props: MenuProps): VNode;
+export interface MenuListProps {
+    class?: string;
+    children?: unknown;
+}
+export declare function MenuList(props: MenuListProps): VNode;
+export interface MenuItemProps {
+    icon?: unknown;
+    shortcut?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    destructive?: boolean;
+    onClick?: () => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function MenuItem(props: MenuItemProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Menu/index.js

@@ -0,0 +1,103 @@
+import { signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-menu-root { position: relative; display: inline-block; }
+
+.hu-menu {
+  position: absolute; z-index: 150; min-width: 160px;
+  background: var(--hu-bg); border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  box-shadow: var(--hu-shadow-md); padding: var(--hu-space-1) 0; outline: none;
+  animation: hu-menu-in 120ms cubic-bezier(.4,0,.2,1) forwards;
+}
+.hu-menu--top-left     { bottom: 100%; left: 0;   margin-bottom: 4px; }
+.hu-menu--top-right    { bottom: 100%; right: 0;  margin-bottom: 4px; }
+.hu-menu--bottom-left  { top: 100%;    left: 0;   margin-top: 4px; }
+.hu-menu--bottom-right { top: 100%;    right: 0;  margin-top: 4px; }
+.hu-menu--top-left, .hu-menu--top-right { transform-origin: bottom center; }
+.hu-menu--bottom-left, .hu-menu--bottom-right { transform-origin: top center; }
+
+@keyframes hu-menu-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
+
+.hu-menu-item {
+  display: flex; align-items: center; gap: var(--hu-space-2);
+  padding: var(--hu-space-2) var(--hu-space-4); width: 100%; box-sizing: border-box;
+  font-size: var(--hu-font-size-sm); color: var(--hu-text);
+  background: none; border: none; cursor: pointer; text-align: left;
+  font-family: var(--hu-font-sans); transition: background var(--hu-duration);
+  white-space: nowrap;
+}
+.hu-menu-item:hover, .hu-menu-item:focus { background: var(--hu-bg-3); outline: none; }
+.hu-menu-item--selected { background: var(--hu-primary-bg); color: var(--hu-primary); }
+.hu-menu-item--disabled { opacity: .45; pointer-events: none; }
+.hu-menu-item--destructive { color: var(--hu-error); }
+.hu-menu-item--destructive:hover { background: var(--hu-error-bg); }
+.hu-menu-item__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--hu-text-2); display: flex; align-items: center; }
+.hu-menu-item--selected .hu-menu-item__icon { color: var(--hu-primary); }
+.hu-menu-item--destructive .hu-menu-item__icon { color: var(--hu-error); }
+.hu-menu-item__label { flex: 1; }
+.hu-menu-item__shortcut { font-size: var(--hu-font-size-xs); color: var(--hu-text-3); margin-left: auto; padding-left: var(--hu-space-4); }
+.hu-menu-item__arrow { color: var(--hu-text-2); font-size: 12px; margin-left: auto; }
+
+.hu-menu-divider { height: 1px; background: var(--hu-border); margin: var(--hu-space-1) 0; }
+
+.hu-menu-group-label {
+  padding: 6px var(--hu-space-4);
+  font-size: 11px; font-weight: var(--hu-font-weight-semibold);
+  text-transform: uppercase; letter-spacing: .06em; color: var(--hu-text-2);
+}
+`;
+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);
+        if (!next)
+            props.onClose?.();
+    };
+    const close = () => setOpen(false);
+    const toggle = () => setOpen(!isOpen.value);
+    const renderMenu = () => isOpen.value
+        ? h("div", {
+            class: cn("hu-menu", `hu-menu--${placement}`),
+            role: "menu",
+            tabindex: "-1",
+            onKeyDown: (e) => {
+                if (e.key === "Escape")
+                    close();
+            }
+        }, ...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();
+        }
+    }, h("div", { onClick: toggle, style: "display:contents;" }, trigger), renderMenu);
+}
+function renderMenuItem(item, close) {
+    if (item.type === "divider")
+        return h("div", { class: "hu-menu-divider", role: "separator" });
+    if (item.type === "group")
+        return h("div", {}, h("div", { class: "hu-menu-group-label" }, item.groupLabel), ...(item.children ?? []).map(child => renderMenuItem(child, close)));
+    return h("button", {
+        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,
+        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" }, "›"));
+}
+export function MenuList(props) {
+    injectCSS("hu-menu", CSS);
+    return h("ul", { class: cn("hu-menu", "hu-menu--static", props.class), role: "menu" }, props.children);
+}
+export function MenuItem(props) {
+    injectCSS("hu-menu", CSS);
+    return h("button", {
+        class: cn("hu-menu-item", props.selected && "hu-menu-item--selected", props.disabled && "hu-menu-item--disabled", props.destructive && "hu-menu-item--destructive", props.class),
+        role: "menuitem", disabled: props.disabled, onClick: props.onClick, tabindex: "-1"
+    }, props.icon && h("span", { class: "hu-menu-item__icon" }, props.icon), h("span", { class: "hu-menu-item__label" }, props.children), props.shortcut && h("span", { class: "hu-menu-item__shortcut" }, props.shortcut));
+}

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

@@ -0,0 +1,16 @@
+import { type VNode } from "../../theme/index.js";
+export type MobileStepperVariant = "dots" | "progress" | "text";
+export type MobileStepperPosition = "bottom" | "static";
+export interface MobileStepperProps {
+    steps: number;
+    activeStep: number;
+    variant?: MobileStepperVariant;
+    position?: MobileStepperPosition;
+    backButton?: unknown;
+    nextButton?: unknown;
+    onBack?: () => void;
+    onNext?: () => void;
+    class?: string;
+}
+export declare function MobileStepper(props: MobileStepperProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MobileStepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA8CpE,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,qBAAqB,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAExD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,CAgC9D"}