@hyperpackai/hyperui 0.1.0

package/dist/components/FocusTrap/index.js

@@ -0,0 +1,69 @@
+import { onCleanup, onMount } from "@hyperpackai/hyperion";
+import { h } from "../../theme/index.js";
+const FOCUSABLE_SELECTOR = [
+    "a[href]",
+    "button:not([disabled])",
+    "textarea:not([disabled])",
+    "input:not([disabled])",
+    "select:not([disabled])",
+    "[tabindex]:not([tabindex='-1'])"
+].join(",");
+export function FocusTrap(props) {
+    let root = null;
+    const active = props.active ?? true;
+    const restoreFocus = props.restoreFocus ?? true;
+    const autoFocus = props.autoFocus ?? true;
+    if (typeof document !== "undefined" && active) {
+        const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        const getFocusable = () => root
+            ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR))
+                .filter((node) => !node.hasAttribute("disabled") && node.getAttribute("aria-hidden") !== "true")
+            : [];
+        const focusFirst = () => {
+            const nodes = getFocusable();
+            (nodes[0] ?? root)?.focus();
+        };
+        const onKeyDown = (event) => {
+            if (!root)
+                return;
+            if (event.key === "Escape") {
+                props.onEscape?.();
+                return;
+            }
+            if (event.key !== "Tab")
+                return;
+            const nodes = getFocusable();
+            if (nodes.length === 0) {
+                event.preventDefault();
+                root.focus();
+                return;
+            }
+            const first = nodes[0];
+            const last = nodes[nodes.length - 1];
+            const current = document.activeElement;
+            if (event.shiftKey && current === first) {
+                event.preventDefault();
+                last.focus();
+            }
+            else if (!event.shiftKey && current === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        };
+        onMount(() => {
+            root?.addEventListener("keydown", onKeyDown);
+            if (autoFocus)
+                queueMicrotask(focusFirst);
+        });
+        onCleanup(() => {
+            root?.removeEventListener("keydown", onKeyDown);
+            if (restoreFocus && previouslyFocused?.isConnected)
+                previouslyFocused.focus();
+        });
+    }
+    return h("div", {
+        class: props.class,
+        tabindex: "-1",
+        ref: (node) => { root = node; }
+    }, props.children);
+}

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

@@ -0,0 +1,34 @@
+import { type VNode } from "../../theme/index.js";
+export interface FormControlProps {
+    fullWidth?: boolean;
+    row?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function FormControl(props: FormControlProps): VNode;
+export interface FormGroupProps {
+    row?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function FormGroup(props: FormGroupProps): VNode;
+export interface FormLabelProps {
+    required?: boolean;
+    focused?: boolean;
+    error?: boolean;
+    for?: string;
+    class?: string;
+    children?: unknown;
+}
+export declare function FormLabel(props: FormLabelProps): VNode;
+export interface FormHelperTextProps {
+    error?: boolean;
+    success?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function FormHelperText(props: FormHelperTextProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA8BpE,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,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,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAa1D;AAED,MAAM,WAAW,cAAc;IAAG,GAAG,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AACrF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAGtD;AAED,MAAM,WAAW,cAAc;IAAG,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAC5I,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAMtD;AAED,MAAM,WAAW,mBAAmB;IAAG,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAC/G,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,CAKhE"}

package/dist/components/FormControl/index.js

@@ -0,0 +1,52 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const FORM_CSS = `
+.hu-form-control { display: flex; flex-direction: column; gap: 7px; min-width: 0; color: var(--hu-text); }
+.hu-form-control--full { width: 100%; }
+.hu-form-control--row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--hu-space-3); }
+.hu-form-control--disabled { opacity: .62; }
+.hu-form-control--error .hu-form-label { color: var(--hu-error); }
+.hu-form-group {
+  display: flex; flex-direction: column; gap: var(--hu-space-2);
+  border: 1px solid color-mix(in srgb, var(--hu-border) 84%, transparent);
+  border-radius: var(--hu-radius-lg);
+  padding: var(--hu-space-4); margin: 0; min-width: 0;
+  background: linear-gradient(180deg, var(--hu-bg), color-mix(in srgb, var(--hu-bg-2) 72%, var(--hu-bg)));
+  box-shadow: var(--hu-shadow-xs);
+}
+.hu-form-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--hu-space-4); }
+.hu-form-label {
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold);
+  color: var(--hu-text); display: flex; gap: var(--hu-space-1); align-items: center;
+  line-height: var(--hu-line-height-tight);
+}
+.hu-form-label--required::after { content: " *"; color: var(--hu-error); }
+.hu-form-label--focused { color: var(--hu-primary); }
+.hu-form-label--error { color: var(--hu-error); }
+.hu-form-helper { margin: 0; font-size: var(--hu-font-size-xs); color: var(--hu-text-2); line-height: var(--hu-line-height-normal); max-width: 70ch; }
+.hu-form-helper--error { color: var(--hu-error); }
+.hu-form-helper--success { color: var(--hu-success); }
+`;
+export function FormControl(props) {
+    injectCSS("hu-form", FORM_CSS);
+    return h("div", {
+        class: cn("hu-form-control", props.fullWidth && "hu-form-control--full", props.row && "hu-form-control--row", props.error && "hu-form-control--error", props.disabled && "hu-form-control--disabled", props.class),
+        "aria-disabled": props.disabled ? "true" : undefined
+    }, props.children);
+}
+export function FormGroup(props) {
+    injectCSS("hu-form", FORM_CSS);
+    return h("fieldset", { class: cn("hu-form-group", props.row && "hu-form-group--row", props.class) }, props.children);
+}
+export function FormLabel(props) {
+    injectCSS("hu-form", FORM_CSS);
+    return h("label", {
+        class: cn("hu-form-label", props.required && "hu-form-label--required", props.focused && "hu-form-label--focused", props.error && "hu-form-label--error", props.class),
+        for: props.for
+    }, props.children);
+}
+export function FormHelperText(props) {
+    injectCSS("hu-form", FORM_CSS);
+    return h("p", {
+        class: cn("hu-form-helper", props.error && "hu-form-helper--error", props.success && "hu-form-helper--success", props.class)
+    }, props.children);
+}

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

@@ -0,0 +1,23 @@
+import { type VNode } from "../../theme/index.js";
+export interface GlobalSearchResult {
+    id: string;
+    title: string;
+    description?: string;
+    href?: string;
+    category?: string;
+    disabled?: boolean;
+}
+export interface GlobalSearchProps {
+    value?: string;
+    placeholder?: string;
+    results?: GlobalSearchResult[];
+    open?: boolean;
+    width?: string | number;
+    shortcut?: string[];
+    emptyText?: string;
+    class?: string;
+    onChange?: (value: string) => void;
+    onSelect?: (result: GlobalSearchResult) => void;
+}
+export declare function GlobalSearch(props?: GlobalSearchProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/GlobalSearch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA4DpE,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACjD;AAOD,wBAAgB,YAAY,CAAC,KAAK,GAAE,iBAAsB,GAAG,KAAK,CA4CjE"}

package/dist/components/GlobalSearch/index.js

@@ -0,0 +1,91 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { Input } from "../Input/index.js";
+import { Kbd } from "../Kbd/index.js";
+const GLOBAL_SEARCH_CSS = `
+.hu-global-search {
+  position: relative;
+  width: min(100%, var(--hu-global-search-width, 520px));
+}
+.hu-global-search__results {
+  position: absolute;
+  inset-inline: 0;
+  top: calc(100% + var(--hu-space-2));
+  z-index: var(--hu-z-popover);
+  max-height: 360px;
+  overflow-y: auto;
+  padding: var(--hu-space-2);
+  margin: 0;
+  list-style: none;
+  border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-lg);
+  background: var(--hu-bg);
+  box-shadow: var(--hu-shadow-lg);
+}
+.hu-global-search__item {
+  display: grid;
+  gap: 2px;
+  width: 100%;
+  padding: var(--hu-space-3);
+  border: 0;
+  border-radius: var(--hu-radius);
+  background: transparent;
+  color: var(--hu-text);
+  text-align: left;
+  cursor: pointer;
+}
+.hu-global-search__item:hover,
+.hu-global-search__item:focus-visible {
+  outline: none;
+  background: var(--hu-primary-bg);
+}
+.hu-global-search__title {
+  color: var(--hu-text);
+  font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-semibold);
+}
+.hu-global-search__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--hu-space-2);
+  color: var(--hu-text-2);
+  font-size: var(--hu-font-size-xs);
+}
+.hu-global-search__empty {
+  padding: var(--hu-space-5);
+  color: var(--hu-text-2);
+  text-align: center;
+}
+`;
+function sizeValue(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function GlobalSearch(props = {}) {
+    injectCSS("hu-global-search", GLOBAL_SEARCH_CSS);
+    const results = props.results ?? [];
+    const open = props.open ?? results.length > 0;
+    const width = sizeValue(props.width);
+    return h("div", {
+        class: cn("hu-global-search", props.class),
+        role: "search",
+        style: width ? `--hu-global-search-width:${width}` : undefined
+    }, Input({
+        value: props.value ?? "",
+        placeholder: props.placeholder ?? "Search...",
+        suffix: props.shortcut?.length ? Kbd({ keys: props.shortcut }) : undefined,
+        autoComplete: "off",
+        "aria-label": "Global search",
+        onInput: (event) => props.onChange?.(event.target.value)
+    }), open ? (results.length > 0
+        ? h("ul", { class: "hu-global-search__results", role: "listbox", "aria-label": "Search results" }, ...results.map((result) => h("li", { role: "option", "aria-disabled": result.disabled ? "true" : undefined }, h("button", {
+            type: "button",
+            class: "hu-global-search__item",
+            disabled: result.disabled,
+            onClick: () => {
+                if (!result.disabled)
+                    props.onSelect?.(result);
+            }
+        }, h("span", { class: "hu-global-search__title" }, result.title), h("span", { class: "hu-global-search__meta" }, result.category ? h("span", {}, result.category) : undefined, result.description ? h("span", {}, result.description) : undefined)))))
+        : h("div", { class: "hu-global-search__results hu-global-search__empty", role: "status" }, props.emptyText ?? "No results found")) : undefined);
+}

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

@@ -0,0 +1,19 @@
+import { type VNode } from "../../theme/index.js";
+export interface GridProps {
+    container?: boolean;
+    item?: boolean;
+    columns?: number;
+    spacing?: number;
+    columnSpacing?: number;
+    rowSpacing?: number;
+    xs?: number | "auto" | true;
+    sm?: number | "auto" | true;
+    md?: number | "auto" | true;
+    lg?: number | "auto" | true;
+    xl?: number | "auto" | true;
+    zeroMinWidth?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Grid(props: GridProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAQpE,MAAM,WAAW,SAAS;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAsB5C"}

package/dist/components/Grid/index.js

@@ -0,0 +1,30 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const GRID_CSS = `
+.hu-grid { display: grid; box-sizing: border-box; }
+.hu-grid--container { width: 100%; }
+.hu-grid--item { box-sizing: border-box; }
+`;
+export function Grid(props) {
+    injectCSS("hu-grid", GRID_CSS);
+    const { container, item, columns = 12, spacing = 0, xs, sm, md, lg, xl } = props;
+    const styles = [];
+    if (container) {
+        styles.push(`grid-template-columns: repeat(${columns}, 1fr)`);
+        if (spacing)
+            styles.push(`gap: ${spacing * 8}px`);
+        if (props.columnSpacing)
+            styles.push(`column-gap: ${props.columnSpacing * 8}px`);
+        if (props.rowSpacing)
+            styles.push(`row-gap: ${props.rowSpacing * 8}px`);
+    }
+    if (item) {
+        const colSpan = (v) => v === true ? "1 / -1" : v === "auto" ? "auto" : v ? `span ${v}` : undefined;
+        const span = colSpan(xs) ?? colSpan(sm) ?? colSpan(md) ?? colSpan(lg) ?? colSpan(xl);
+        if (span)
+            styles.push(`grid-column: ${span}`);
+    }
+    return h("div", {
+        class: cn("hu-grid", container && "hu-grid--container", item && "hu-grid--item", props.class),
+        style: styles.join(";") || undefined
+    }, props.children);
+}

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

@@ -0,0 +1,10 @@
+import { type VNode } from "../../theme/index.js";
+export interface GrowProps {
+    in: boolean;
+    timeout?: number;
+    unmountOnExit?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Grow(props: GrowProps): VNode | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAQpE,MAAM,WAAW,SAAS;IAAG,EAAE,EAAE,OAAO,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;AAEzH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,GAAG,IAAI,CAKnD"}

package/dist/components/Grow/index.js

@@ -0,0 +1,13 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-grow { transition: opacity var(--hu-duration) var(--hu-ease), transform var(--hu-duration) cubic-bezier(.34,1.56,.64,1); transform-origin: center center; }
+.hu-grow--in  { opacity: 1; transform: scale(1); }
+.hu-grow--out { opacity: 0; transform: scale(.75); pointer-events: none; }
+`;
+export function Grow(props) {
+    injectCSS("hu-grow", CSS);
+    if (!props.in && props.unmountOnExit)
+        return null;
+    const style = props.timeout ? `transition-duration:${props.timeout}ms` : undefined;
+    return h("div", { class: cn("hu-grow", props.in ? "hu-grow--in" : "hu-grow--out", props.class), style }, props.children);
+}

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

@@ -0,0 +1,16 @@
+import { type VNode } from "../../theme/index.js";
+export type IconButtonColor = "default" | "primary" | "error" | "warning" | "success";
+export type IconButtonSize = "sm" | "md" | "lg";
+export interface IconButtonProps {
+    color?: IconButtonColor;
+    size?: IconButtonSize;
+    variant?: "standard" | "contained";
+    disabled?: boolean;
+    "aria-label": string;
+    onClick?: (e: MouseEvent) => void;
+    type?: "button" | "submit" | "reset";
+    class?: string;
+    children?: unknown;
+}
+export declare function IconButton(props: IconButtonProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAkCpE,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAC;AACtF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAgBxD"}

package/dist/components/IconButton/index.js

@@ -0,0 +1,43 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const ICON_BUTTON_CSS = `
+.hu-icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid transparent; background: transparent; border-radius: var(--hu-radius-full); cursor: pointer;
+  color: var(--hu-text-2);
+  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);
+  padding: 0; position: relative; user-select: none;
+}
+.hu-icon-btn::after {
+  content: ""; position: absolute; inset: 0; border-radius: 50%;
+  background: currentColor; opacity: 0; transition: opacity var(--hu-duration) var(--hu-ease);
+}
+.hu-icon-btn:hover::after { opacity: .08; }
+.hu-icon-btn:active::after { opacity: .16; }
+.hu-icon-btn:hover { color: var(--hu-text); transform: translateY(-1px); }
+.hu-icon-btn:active { transform: translateY(0); }
+.hu-icon-btn:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-icon-btn:disabled { opacity: .4; pointer-events: none; }
+.hu-icon-btn--sm { width: 32px; height: 32px; font-size: 16px; }
+.hu-icon-btn--md { width: 40px; height: 40px; font-size: 20px; }
+.hu-icon-btn--lg { width: 48px; height: 48px; font-size: 24px; }
+.hu-icon-btn--primary { color: var(--hu-primary); }
+.hu-icon-btn--error   { color: var(--hu-error); }
+.hu-icon-btn--warning { color: var(--hu-warning); }
+.hu-icon-btn--success { color: var(--hu-success); }
+.hu-icon-btn--contained {
+  background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2));
+  border-color: var(--hu-border); box-shadow: var(--hu-shadow-xs);
+}
+.hu-icon-btn--contained:hover { border-color: var(--hu-border-2); box-shadow: var(--hu-shadow-sm); }
+`;
+export function IconButton(props) {
+    injectCSS("hu-icon-btn", ICON_BUTTON_CSS);
+    const { color = "default", size = "md", variant = "standard", disabled, onClick, children } = props;
+    return h("button", {
+        class: cn("hu-icon-btn", `hu-icon-btn--${size}`, color !== "default" && `hu-icon-btn--${color}`, variant === "contained" && "hu-icon-btn--contained", props.class),
+        type: props.type ?? "button",
+        disabled,
+        onClick,
+        "aria-label": props["aria-label"]
+    }, children);
+}

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

@@ -0,0 +1,21 @@
+import { type VNode } from "../../theme/index.js";
+export interface ImageListItemProps {
+    src: string;
+    alt?: string;
+    title?: string;
+    subtitle?: string;
+    titleBarPosition?: "top" | "bottom";
+    cols?: number;
+    rows?: number;
+    onClick?: (e: MouseEvent) => void;
+}
+export interface ImageListProps {
+    cols?: number;
+    rowHeight?: number | "auto";
+    gap?: number;
+    variant?: "standard" | "masonry" | "quilted";
+    items: ImageListItemProps[];
+    class?: string;
+}
+export declare function ImageList(props: ImageListProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ImageList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,GAAG,SAAS,CAAC;IAC7C,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CA2BtD"}

package/dist/components/ImageList/index.js

@@ -0,0 +1,39 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const IMAGE_LIST_CSS = `
+.hu-image-list { display: grid; overflow-y: auto; list-style: none; padding: 0; margin: 0; }
+.hu-image-list--standard { align-items: start; }
+.hu-image-list--masonry { display: block; columns: 3; column-gap: 8px; }
+.hu-image-list--quilted { }
+.hu-image-list__item { overflow: hidden; position: relative; }
+.hu-image-list--masonry .hu-image-list__item { break-inside: avoid; margin-bottom: 8px; }
+.hu-image-list__img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.hu-image-list--standard .hu-image-list__img { height: inherit; }
+.hu-image-list__bar {
+  position: absolute; bottom: 0; left: 0; right: 0;
+  background: linear-gradient(transparent, rgba(0,0,0,.65));
+  padding: var(--hu-space-3) var(--hu-space-2) var(--hu-space-2);
+  color: #fff;
+}
+.hu-image-list__bar--top { top: 0; bottom: auto; background: linear-gradient(rgba(0,0,0,.65), transparent); }
+.hu-image-list__title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium); }
+.hu-image-list__subtitle { font-size: var(--hu-font-size-xs); opacity: .8; }
+`;
+export function ImageList(props) {
+    injectCSS("hu-image-list", IMAGE_LIST_CSS);
+    const { cols = 3, rowHeight = 180, gap = 8, variant = "standard", items } = props;
+    const styles = [
+        variant !== "masonry" ? `grid-template-columns: repeat(${cols}, 1fr)` : "",
+        variant !== "masonry" ? `grid-auto-rows: ${rowHeight === "auto" ? "auto" : `${rowHeight}px`}` : "",
+        `gap: ${gap}px`
+    ].filter(Boolean);
+    return h("ul", {
+        class: cn("hu-image-list", `hu-image-list--${variant}`, props.class),
+        style: styles.join(";")
+    }, ...items.map(item => h("li", {
+        class: "hu-image-list__item",
+        style: item.cols || item.rows
+            ? `grid-column: span ${item.cols ?? 1}; grid-row: span ${item.rows ?? 1};`
+            : undefined,
+        onClick: item.onClick
+    }, h("img", { class: "hu-image-list__img", src: item.src, alt: item.alt ?? item.title ?? "" }), item.title && h("div", { class: cn("hu-image-list__bar", item.titleBarPosition === "top" && "hu-image-list__bar--top") }, h("div", { class: "hu-image-list__title" }, item.title), item.subtitle && h("div", { class: "hu-image-list__subtitle" }, item.subtitle)))));
+}

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

@@ -0,0 +1,33 @@
+import { type VNode } from "../../theme/index.js";
+export interface InputProps {
+    type?: string;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    size?: "sm" | "md" | "lg";
+    error?: string;
+    helper?: string;
+    label?: string;
+    prefix?: unknown;
+    suffix?: unknown;
+    id?: string;
+    name?: string;
+    autoComplete?: string;
+    maxLength?: number;
+    minLength?: number;
+    class?: string;
+    "aria-label"?: string;
+    "aria-controls"?: string;
+    "aria-expanded"?: string | boolean;
+    "aria-activedescendant"?: string;
+    onInput?: (e: InputEvent) => void;
+    onChange?: (e: Event) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+}
+export declare function Input(props: InputProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Input/index.js

@@ -0,0 +1,45 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { Label } from "../Label/index.js";
+const INPUT_CSS = `
+.hu-input-wrap { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.hu-input-field {
+  display: flex; align-items: center; position: relative;
+}
+.hu-input {
+  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 12px; transition: border-color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), background var(--hu-duration) var(--hu-ease);
+  outline: none; appearance: none;
+  box-shadow: var(--hu-shadow-xs);
+}
+.hu-input::placeholder { color: var(--hu-text-3); }
+.hu-input:hover:not(:disabled) { border-color: color-mix(in srgb, var(--hu-primary) 35%, var(--hu-border-2)); }
+.hu-input: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-input:disabled { opacity: .5; cursor: not-allowed; background: var(--hu-bg-3); }
+.hu-input--error { border-color: var(--hu-error) !important; }
+.hu-input--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-error) 20%, transparent); }
+.hu-input--sm { min-height: 34px; padding: 6px 10px; font-size: var(--hu-font-size-xs); border-radius: var(--hu-radius); }
+.hu-input--lg { min-height: 46px; padding: 11px 14px; font-size: var(--hu-font-size-base); }
+.hu-input-prefix, .hu-input-suffix {
+  position: absolute; top: 50%; transform: translateY(-50%);
+  color: var(--hu-text-3); pointer-events: none; display: flex; align-items: center;
+  font-size: var(--hu-font-size-sm);
+}
+.hu-input-prefix { left: 12px; }
+.hu-input-suffix { right: 12px; }
+.hu-input--has-prefix { padding-left: 36px !important; }
+.hu-input--has-suffix { padding-right: 36px !important; }
+.hu-input-helper { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); line-height: 1.45; }
+.hu-input-error-msg { font-size: var(--hu-font-size-xs); color: var(--hu-error); line-height: 1.45; }
+`;
+export function Input(props) {
+    injectCSS("hu-input", INPUT_CSS);
+    const { type = "text", size = "md", error, helper, label, prefix, suffix, id, ...rest } = props;
+    const inputEl = h("input", {
+        ...rest, type, id,
+        class: cn("hu-input", size !== "md" && `hu-input--${size}`, error && "hu-input--error", Boolean(prefix) && "hu-input--has-prefix", Boolean(suffix) && "hu-input--has-suffix", props.class)
+    });
+    const field = h("div", { class: "hu-input-field" }, prefix && h("span", { class: "hu-input-prefix" }, prefix), inputEl, suffix && h("span", { class: "hu-input-suffix" }, suffix));
+    return h("div", { class: "hu-input-wrap" }, label && Label({ for: id, required: props.required, children: label }), field, error && h("span", { class: "hu-input-error-msg", role: "alert" }, error), !error && helper && h("span", { class: "hu-input-helper" }, helper));
+}

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

@@ -0,0 +1,8 @@
+import { type VNode } from "../../theme/index.js";
+export interface KbdProps {
+    keys?: string[];
+    class?: string;
+    children?: unknown;
+}
+export declare function Kbd(props?: KbdProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Kbd/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA4BpE,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,GAAG,CAAC,KAAK,GAAE,QAAa,GAAG,KAAK,CAgB/C"}

package/dist/components/Kbd/index.js

@@ -0,0 +1,41 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const KBD_CSS = `
+.hu-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 1.6em;
+  min-height: 1.55em;
+  padding: 2px 6px;
+  border: 1px solid var(--hu-border);
+  border-bottom-color: var(--hu-border-2);
+  border-radius: var(--hu-radius);
+  background: linear-gradient(180deg, var(--hu-bg-1), var(--hu-bg-3));
+  color: var(--hu-text);
+  box-shadow: inset 0 -1px 0 rgb(0 0 0/.08), var(--hu-shadow-xs);
+  font-family: var(--hu-font-mono);
+  font-size: .82em;
+  font-weight: var(--hu-font-weight-semibold);
+  line-height: 1;
+  white-space: nowrap;
+}
+.hu-kbd__separator {
+  color: var(--hu-text-3);
+  font-size: .85em;
+}
+`;
+export function Kbd(props = {}) {
+    injectCSS("hu-kbd", KBD_CSS);
+    const keys = props.keys?.length ? props.keys : undefined;
+    if (!keys) {
+        return h("kbd", { class: cn("hu-kbd", props.class) }, props.children);
+    }
+    const children = keys.flatMap((key, index) => {
+        const parts = [];
+        if (index > 0)
+            parts.push(h("span", { class: "hu-kbd__separator", "aria-hidden": "true" }, "+"));
+        parts.push(h("span", {}, key));
+        return parts;
+    });
+    return h("kbd", { class: cn("hu-kbd", props.class), "aria-label": keys.join(" plus ") }, ...children);
+}