@hyperpackai/hyperui 0.1.0

package/dist/components/CircularProgress/index.js

@@ -0,0 +1,58 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-circular-progress { display: inline-flex; align-items: center; justify-content: center; }
+.hu-circular-progress--indeterminate .hu-circular-progress__svg { animation: hu-cp-rotate 1.4s linear infinite; }
+.hu-circular-progress--indeterminate .hu-circular-progress__circle {
+  animation: hu-cp-dash 1.4s ease-in-out infinite;
+  stroke-dasharray: 80px,200px; stroke-dashoffset: 0;
+}
+.hu-circular-progress--determinate .hu-circular-progress__circle {
+  transition: stroke-dashoffset 300ms cubic-bezier(.4,0,.2,1);
+  transform: rotate(-90deg); transform-origin: 50% 50%;
+}
+.hu-circular-progress__svg { display: block; }
+.hu-circular-progress__circle { stroke-linecap: round; }
+.hu-circular-progress--primary   { color: var(--hu-primary); }
+.hu-circular-progress--secondary { color: var(--hu-text-2); }
+.hu-circular-progress--error     { color: var(--hu-error); }
+.hu-circular-progress--warning   { color: var(--hu-warning); }
+.hu-circular-progress--success   { color: var(--hu-success); }
+.hu-circular-progress--inherit   { color: inherit; }
+.hu-circular-progress__track { stroke: var(--hu-border-2); }
+.hu-circular-progress__label {
+  position: absolute; font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
+  color: var(--hu-text);
+}
+.hu-circular-progress--with-label { position: relative; }
+@keyframes hu-cp-rotate { 100% { transform: rotate(360deg); } }
+@keyframes hu-cp-dash {
+  0%   { stroke-dasharray: 1px,200px; stroke-dashoffset: 0; }
+  50%  { stroke-dasharray: 100px,200px; stroke-dashoffset: -15px; }
+  100% { stroke-dasharray: 100px,200px; stroke-dashoffset: -125px; }
+}
+`;
+export function CircularProgress(props) {
+    injectCSS("hu-circular-progress", CSS);
+    const { variant = "indeterminate", color = "primary", size = 40, thickness = 3.6, showLabel, value = 0 } = props;
+    const radius = (size - thickness) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = variant === "determinate" ? circumference * (1 - value / 100) : undefined;
+    return h("span", {
+        class: cn("hu-circular-progress", `hu-circular-progress--${variant}`, `hu-circular-progress--${color}`, showLabel && "hu-circular-progress--with-label", props.class),
+        role: "progressbar",
+        "aria-valuenow": variant === "determinate" ? value : undefined,
+        "aria-valuemin": variant === "determinate" ? "0" : undefined,
+        "aria-valuemax": variant === "determinate" ? "100" : undefined,
+        style: `width:${size}px;height:${size}px;`
+    }, h("svg", { class: "hu-circular-progress__svg", viewBox: `${size / 2} ${size / 2} ${size} ${size}`, style: `width:${size}px;height:${size}px;` }, variant === "determinate" && h("circle", {
+        class: "hu-circular-progress__track",
+        cx: size, cy: size, r: radius,
+        fill: "none", "stroke-width": thickness
+    }), h("circle", {
+        class: "hu-circular-progress__circle",
+        cx: size, cy: size, r: radius,
+        fill: "none", stroke: "currentColor", "stroke-width": thickness,
+        "stroke-dasharray": variant === "determinate" ? `${circumference}px` : undefined,
+        "stroke-dashoffset": dashOffset !== undefined ? `${dashOffset}px` : undefined
+    })), showLabel && variant === "determinate" && h("span", { class: "hu-circular-progress__label" }, `${Math.round(value)}%`));
+}

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

@@ -0,0 +1,11 @@
+import { type VNode } from "../../theme/index.js";
+export interface ClickAwayListenerProps {
+    disabled?: boolean;
+    mouseEvent?: "mousedown" | "mouseup" | "click";
+    touchEvent?: "touchstart" | "touchend";
+    onClickAway: (event: Event) => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function ClickAwayListener(props: ClickAwayListenerProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ClickAwayListener/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,UAAU,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,KAAK,CA8BtE"}

package/dist/components/ClickAwayListener/index.js

@@ -0,0 +1,31 @@
+import { onCleanup, onMount } from "@hyperpackai/hyperion";
+import { h } from "../../theme/index.js";
+export function ClickAwayListener(props) {
+    let root = null;
+    if (typeof document !== "undefined" && !props.disabled) {
+        const handle = (event) => {
+            if (!root)
+                return;
+            const target = event.target;
+            if (target && root.contains(target))
+                return;
+            props.onClickAway(event);
+        };
+        onMount(() => {
+            const mouseEvent = props.mouseEvent ?? "mousedown";
+            const touchEvent = props.touchEvent ?? "touchstart";
+            document.addEventListener(mouseEvent, handle, true);
+            document.addEventListener(touchEvent, handle, true);
+        });
+        onCleanup(() => {
+            const mouseEvent = props.mouseEvent ?? "mousedown";
+            const touchEvent = props.touchEvent ?? "touchstart";
+            document.removeEventListener(mouseEvent, handle, true);
+            document.removeEventListener(touchEvent, handle, true);
+        });
+    }
+    return h("div", {
+        class: props.class,
+        ref: (node) => { root = node; }
+    }, props.children);
+}

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

@@ -0,0 +1,9 @@
+import { type VNode } from "../../theme/index.js";
+export interface CodeProps {
+    inline?: boolean;
+    language?: string;
+    class?: string;
+    children?: unknown;
+}
+export declare function Code(props?: CodeProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Code/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsCpE,MAAM,WAAW,SAAS;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,KAAK,GAAE,SAAc,GAAG,KAAK,CAcjD"}

package/dist/components/Code/index.js

@@ -0,0 +1,50 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CODE_CSS = `
+.hu-code {
+  font-family: var(--hu-font-mono);
+  color: var(--hu-code-fg, var(--hu-primary));
+}
+.hu-code--inline {
+  display: inline;
+  padding: 2px 6px;
+  border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius);
+  background: var(--hu-bg-2);
+  font-size: .88em;
+}
+.hu-code-block {
+  margin: 0;
+  max-width: 100%;
+  overflow: auto;
+  padding: var(--hu-space-4);
+  border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-lg);
+  background: var(--hu-bg-2);
+  color: var(--hu-text);
+  font-family: var(--hu-font-mono);
+  font-size: var(--hu-font-size-sm);
+  line-height: 1.65;
+  white-space: pre;
+  scrollbar-width: thin;
+}
+.hu-code-block .hu-code {
+  color: inherit;
+  background: transparent;
+  border: 0;
+  padding: 0;
+}
+`;
+export function Code(props = {}) {
+    injectCSS("hu-code", CODE_CSS);
+    const inline = props.inline ?? true;
+    const code = h("code", {
+        class: cn("hu-code", inline && "hu-code--inline", props.class),
+        "data-language": props.language
+    }, props.children);
+    if (inline)
+        return code;
+    return h("pre", {
+        class: "hu-code-block",
+        "data-language": props.language
+    }, code);
+}

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

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

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

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

package/dist/components/Collapse/index.js

@@ -0,0 +1,30 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-collapse {
+  display: grid;
+  overflow: hidden;
+  transition: grid-template-rows var(--hu-duration) cubic-bezier(.4,0,.2,1), opacity var(--hu-duration) var(--hu-ease);
+}
+.hu-collapse--in  { grid-template-rows: 1fr; opacity: 1; }
+.hu-collapse--out { grid-template-rows: 0fr; opacity: .35; pointer-events: none; }
+.hu-collapse__inner { min-height: 0; overflow: hidden; }
+.hu-collapse--orientation-horizontal {
+  display: inline-grid;
+  grid-template-rows: none;
+  transition: grid-template-columns var(--hu-duration) cubic-bezier(.4,0,.2,1), opacity var(--hu-duration) var(--hu-ease);
+}
+.hu-collapse--orientation-horizontal.hu-collapse--in { grid-template-columns: 1fr; }
+.hu-collapse--orientation-horizontal.hu-collapse--out { grid-template-columns: 0fr; }
+.hu-collapse--orientation-horizontal .hu-collapse__inner { min-width: 0; min-height: auto; }
+`;
+export function Collapse(props) {
+    injectCSS("hu-collapse", CSS);
+    const { in: isIn, orientation = "vertical", unmountOnExit, children } = props;
+    if (!isIn && unmountOnExit)
+        return null;
+    const style = props.timeout ? `transition-duration:${props.timeout}ms` : undefined;
+    return h("div", {
+        class: cn("hu-collapse", isIn ? "hu-collapse--in" : "hu-collapse--out", orientation === "horizontal" && "hu-collapse--orientation-horizontal", props.class),
+        style
+    }, h("div", { class: "hu-collapse__inner" }, children));
+}

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

@@ -0,0 +1,26 @@
+import { type VNode } from "../../theme/index.js";
+export interface CommandPaletteItem {
+    id: string;
+    title: string;
+    description?: string;
+    section?: string;
+    keywords?: string[];
+    disabled?: boolean;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    items: CommandPaletteItem[];
+    query?: string;
+    title?: string;
+    placeholder?: string;
+    emptyText?: string;
+    activeId?: string;
+    shortcut?: string[];
+    class?: string;
+    onQueryChange?: (query: string) => void;
+    onSelect?: (item: CommandPaletteItem) => void;
+    onOpenChange?: (open: boolean) => void;
+    onClose?: () => void;
+}
+export declare function CommandPalette(props: CommandPaletteProps): VNode | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CommandPalette/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0FpE,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAUD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,KAAK,GAAG,IAAI,CA8DvE"}

package/dist/components/CommandPalette/index.js

@@ -0,0 +1,141 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { Modal } from "../Modal/index.js";
+import { Input } from "../Input/index.js";
+import { Kbd } from "../Kbd/index.js";
+const COMMAND_PALETTE_CSS = `
+.hu-command-palette {
+  width: min(680px, calc(100vw - 32px));
+  max-height: min(720px, calc(100vh - 64px));
+  overflow: hidden;
+  border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-xl);
+  background: var(--hu-bg);
+  box-shadow: var(--hu-shadow-xl);
+}
+.hu-command-palette__header {
+  padding: var(--hu-space-4);
+  border-bottom: 1px solid var(--hu-border);
+}
+.hu-command-palette__title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--hu-space-3);
+  margin-bottom: var(--hu-space-3);
+}
+.hu-command-palette__title {
+  margin: 0;
+  color: var(--hu-text);
+  font-size: var(--hu-font-size-md);
+  font-weight: var(--hu-font-weight-bold);
+}
+.hu-command-palette__hint {
+  display: flex;
+  align-items: center;
+  gap: var(--hu-space-2);
+  color: var(--hu-text-3);
+  font-size: var(--hu-font-size-xs);
+}
+.hu-command-palette__list {
+  max-height: 440px;
+  overflow-y: auto;
+  padding: var(--hu-space-2);
+  margin: 0;
+  list-style: none;
+}
+.hu-command-palette__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--hu-space-3);
+  align-items: center;
+  width: 100%;
+  padding: var(--hu-space-3);
+  border: 0;
+  border-radius: var(--hu-radius-lg);
+  background: transparent;
+  color: var(--hu-text);
+  text-align: left;
+  cursor: pointer;
+}
+.hu-command-palette__item:hover,
+.hu-command-palette__item:focus-visible,
+.hu-command-palette__item--active {
+  outline: none;
+  background: var(--hu-primary-bg);
+}
+.hu-command-palette__item-title {
+  display: block;
+  color: var(--hu-text);
+  font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-semibold);
+}
+.hu-command-palette__item-description {
+  display: block;
+  margin-top: 2px;
+  color: var(--hu-text-2);
+  font-size: var(--hu-font-size-xs);
+  line-height: 1.45;
+}
+.hu-command-palette__item-section {
+  color: var(--hu-text-3);
+  font-size: var(--hu-font-size-xs);
+}
+.hu-command-palette__empty {
+  padding: var(--hu-space-8) var(--hu-space-4);
+  color: var(--hu-text-2);
+  text-align: center;
+}
+`;
+function matchesItem(item, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return true;
+    return [item.title, item.description, item.section, ...(item.keywords ?? [])]
+        .filter(Boolean)
+        .some((value) => String(value).toLowerCase().includes(needle));
+}
+export function CommandPalette(props) {
+    injectCSS("hu-command-palette", COMMAND_PALETTE_CSS);
+    const query = props.query ?? "";
+    const items = props.items.filter((item) => matchesItem(item, query));
+    const close = () => {
+        props.onOpenChange?.(false);
+        props.onClose?.();
+    };
+    return Modal({
+        open: props.open,
+        align: "top",
+        onClose: close,
+        onOpenChange: (open) => {
+            if (!open)
+                close();
+            else
+                props.onOpenChange?.(true);
+        },
+        children: h("section", {
+            class: cn("hu-command-palette", props.class),
+            role: "search",
+            "aria-label": props.title ?? "Command palette"
+        }, h("div", { class: "hu-command-palette__header" }, h("div", { class: "hu-command-palette__title-row" }, h("h2", { class: "hu-command-palette__title" }, props.title ?? "Command palette"), props.shortcut?.length ? h("span", { class: "hu-command-palette__hint" }, "Shortcut", Kbd({ keys: props.shortcut })) : undefined), Input({
+            value: query,
+            placeholder: props.placeholder ?? "Search commands...",
+            autoComplete: "off",
+            "aria-label": "Search commands",
+            onInput: (event) => props.onQueryChange?.(event.target.value),
+            onKeyDown: (event) => {
+                if (event.key === "Escape")
+                    close();
+            }
+        })), items.length > 0
+            ? h("ul", { class: "hu-command-palette__list", role: "listbox", "aria-label": "Command results" }, ...items.map((item) => h("li", { role: "option", "aria-selected": item.id === props.activeId ? "true" : "false" }, h("button", {
+                type: "button",
+                class: cn("hu-command-palette__item", item.id === props.activeId && "hu-command-palette__item--active"),
+                disabled: item.disabled,
+                onClick: () => {
+                    if (!item.disabled)
+                        props.onSelect?.(item);
+                }
+            }, h("span", {}, h("span", { class: "hu-command-palette__item-title" }, item.title), item.description ? h("span", { class: "hu-command-palette__item-description" }, item.description) : undefined), item.section ? h("span", { class: "hu-command-palette__item-section" }, item.section) : undefined))))
+            : h("div", { class: "hu-command-palette__empty", role: "status" }, props.emptyText ?? "No commands found"))
+    });
+}

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

@@ -0,0 +1,11 @@
+import { type VNode } from "../../theme/index.js";
+export type ContainerMaxWidth = "xs" | "sm" | "md" | "lg" | "xl" | "fluid";
+export interface ContainerProps {
+    maxWidth?: ContainerMaxWidth;
+    disableGutters?: boolean;
+    fixed?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Container(props: ContainerProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Container/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAapE,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,CAAC;AAE3E,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAMtD"}

package/dist/components/Container/index.js

@@ -0,0 +1,18 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CONTAINER_CSS = `
+.hu-container { width: 100%; margin-left: auto; margin-right: auto; padding-left: var(--hu-space-4); padding-right: var(--hu-space-4); box-sizing: border-box; }
+.hu-container--xs { max-width: 444px; }
+.hu-container--sm { max-width: 600px; }
+.hu-container--md { max-width: 900px; }
+.hu-container--lg { max-width: 1200px; }
+.hu-container--xl { max-width: 1536px; }
+.hu-container--fluid { max-width: 100%; }
+.hu-container--disableGutters { padding-left: 0; padding-right: 0; }
+`;
+export function Container(props) {
+    injectCSS("hu-container", CONTAINER_CSS);
+    const { maxWidth = "lg", disableGutters } = props;
+    return h("div", {
+        class: cn("hu-container", `hu-container--${maxWidth}`, disableGutters && "hu-container--disableGutters", props.class)
+    }, props.children);
+}

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

@@ -0,0 +1,15 @@
+import { type VNode } from "../../theme/index.js";
+export interface DashboardLayoutProps {
+    header?: unknown;
+    sidebar?: unknown;
+    aside?: unknown;
+    sidebarWidth?: string | number;
+    collapsedSidebarWidth?: string | number;
+    asideWidth?: string | number;
+    collapsed?: boolean;
+    padding?: string | number;
+    class?: string;
+    children?: unknown;
+}
+export declare function DashboardLayout(props: DashboardLayoutProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsDpE,MAAM,WAAW,oBAAoB;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,KAAK,CAsBlE"}

package/dist/components/DashboardLayout/index.js

@@ -0,0 +1,67 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const DASHBOARD_LAYOUT_CSS = `
+.hu-dashboard-layout {
+  min-height: 100dvh; display: grid; color: var(--hu-text); background: var(--hu-bg-2);
+  grid-template-areas:
+    "sidebar header"
+    "sidebar main";
+  grid-template-columns: var(--hu-dashboard-sidebar, 280px) minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
+}
+.hu-dashboard-layout--collapsed { grid-template-columns: var(--hu-dashboard-sidebar-collapsed, 72px) minmax(0, 1fr); }
+.hu-dashboard-layout__header {
+  grid-area: header; min-width: 0; position: sticky; inset-block-start: 0;
+  z-index: var(--hu-z-sticky); background: var(--hu-bg);
+  border-block-end: 1px solid var(--hu-border);
+}
+.hu-dashboard-layout__sidebar {
+  grid-area: sidebar; min-width: 0; min-height: 0; overflow: auto;
+  background: var(--hu-bg); border-inline-end: 1px solid var(--hu-border);
+}
+.hu-dashboard-layout__main {
+  grid-area: main; min-width: 0; min-height: 0; overflow: auto;
+  padding: var(--hu-dashboard-padding, var(--hu-space-6));
+}
+.hu-dashboard-layout__aside {
+  border-inline-start: 1px solid var(--hu-border); background: var(--hu-bg);
+  min-width: 0; overflow: auto;
+}
+.hu-dashboard-layout--with-aside {
+  grid-template-areas:
+    "sidebar header header"
+    "sidebar main aside";
+  grid-template-columns: var(--hu-dashboard-sidebar, 280px) minmax(0, 1fr) var(--hu-dashboard-aside, 320px);
+}
+@media (max-width: 768px) {
+  .hu-dashboard-layout,
+  .hu-dashboard-layout--with-aside {
+    grid-template-areas:
+      "header"
+      "main";
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+  .hu-dashboard-layout__sidebar,
+  .hu-dashboard-layout__aside { display: none; }
+  .hu-dashboard-layout__main { padding: var(--hu-space-4); }
+}
+`;
+function toCssUnit(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function DashboardLayout(props) {
+    injectCSS("hu-dashboard-layout", DASHBOARD_LAYOUT_CSS);
+    const styles = [];
+    if (props.sidebarWidth !== undefined)
+        styles.push(`--hu-dashboard-sidebar:${toCssUnit(props.sidebarWidth)}`);
+    if (props.collapsedSidebarWidth !== undefined)
+        styles.push(`--hu-dashboard-sidebar-collapsed:${toCssUnit(props.collapsedSidebarWidth)}`);
+    if (props.asideWidth !== undefined)
+        styles.push(`--hu-dashboard-aside:${toCssUnit(props.asideWidth)}`);
+    if (props.padding !== undefined)
+        styles.push(`--hu-dashboard-padding:${toCssUnit(props.padding)}`);
+    return h("div", {
+        class: cn("hu-dashboard-layout", props.collapsed && "hu-dashboard-layout--collapsed", props.aside != null && "hu-dashboard-layout--with-aside", props.class),
+        style: styles.join(";") || undefined
+    }, props.header && h("header", { class: "hu-dashboard-layout__header" }, props.header), props.sidebar && h("aside", { class: "hu-dashboard-layout__sidebar", "aria-label": "Primary navigation" }, props.sidebar), h("main", { class: "hu-dashboard-layout__main" }, props.children), props.aside && h("aside", { class: "hu-dashboard-layout__aside", "aria-label": "Secondary panel" }, props.aside));
+}

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

@@ -0,0 +1,27 @@
+import { type VNode } from "../../theme/index.js";
+export interface TableColumn<T> {
+    key: string;
+    header: string;
+    width?: string;
+    sortable?: boolean;
+    render?: (row: T, i: number) => unknown;
+    align?: "left" | "center" | "right";
+}
+export interface DataTableProps<T extends Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    rows: T[];
+    rowKey?: (row: T) => string;
+    sortColumn?: string;
+    sortDir?: "asc" | "desc";
+    onSort?: (key: string) => void;
+    onRowClick?: (row: T) => void;
+    emptyMessage?: string;
+    footer?: unknown;
+    selectable?: boolean;
+    selectedRows?: Set<string>;
+    onSelectRow?: (key: string, selected: boolean) => void;
+    onSelectAll?: (selected: boolean) => void;
+    class?: string;
+}
+export declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA8BpE,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAC/D,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK,CAkE5F"}

package/dist/components/DataTable/index.js

@@ -0,0 +1,59 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const TABLE_CSS = `
+.hu-table-wrap {
+  overflow-x: auto; border-radius: var(--hu-radius-lg);
+  border: 1px solid color-mix(in srgb, var(--hu-border) 82%, transparent);
+  background: var(--hu-bg); box-shadow: var(--hu-shadow-sm);
+}
+.hu-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--hu-font-size-sm); min-width: 560px; }
+.hu-table th {
+  padding: 10px 16px; text-align: left; font-size: 11px; font-weight: var(--hu-font-weight-semibold);
+  color: var(--hu-text-3); text-transform: uppercase; letter-spacing: .05em;
+  background: linear-gradient(180deg, var(--hu-bg-2), color-mix(in srgb, var(--hu-bg-3) 70%, var(--hu-bg-2)));
+  border-bottom: 1px solid var(--hu-border);
+  white-space: nowrap;
+}
+.hu-table th.hu-table-sortable { cursor: pointer; user-select: none; }
+.hu-table th.hu-table-sortable:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-table-sort-icon { display: inline-flex; align-items: center; margin-left: 4px; opacity: .4; vertical-align: middle; }
+.hu-table-sort-icon--asc, .hu-table-sort-icon--desc { opacity: 1; color: var(--hu-primary); }
+.hu-table td { padding: 12px 16px; border-bottom: 1px solid var(--hu-border); color: var(--hu-text); vertical-align: middle; background: var(--hu-bg); }
+.hu-table tr:last-child td { border-bottom: none; }
+.hu-table tbody tr { transition: background var(--hu-duration) var(--hu-ease); }
+.hu-table tbody tr:hover td { background: color-mix(in srgb, var(--hu-primary-bg) 28%, var(--hu-bg-2)); }
+.hu-table-empty { text-align: center; padding: var(--hu-space-12) var(--hu-space-6); color: var(--hu-text-3); }
+.hu-table-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--hu-space-3); flex-wrap: wrap; padding: var(--hu-space-3) var(--hu-space-4); border-top: 1px solid var(--hu-border); background: var(--hu-bg-2); font-size: var(--hu-font-size-xs); color: var(--hu-text-3); }
+.hu-table-checkbox-col { width: 40px; padding-left: 16px !important; }
+.hu-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--hu-primary); }
+`;
+export function DataTable(props) {
+    injectCSS("hu-table", TABLE_CSS);
+    const { columns, rows, rowKey, sortColumn, sortDir, onSort, onRowClick, emptyMessage = "No data available.", footer, selectable, selectedRows, onSelectRow, onSelectAll } = props;
+    const sortSVG = (dir) => dir === "asc"
+        ? `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 3l4 5H2l4-5z"/></svg>`
+        : dir === "desc"
+            ? `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 9L2 4h8L6 9z"/></svg>`
+            : `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" opacity=".4"><path d="M6 3l3 3H3l3-3zM6 9L3 6h6L6 9z"/></svg>`;
+    const allSelected = rows.length > 0 && rows.every((r) => selectedRows?.has(rowKey?.(r) ?? String(r["id"] ?? "")));
+    return h("div", { class: cn("hu-table-wrap", props.class) }, h("table", { class: "hu-table", role: "table" }, h("thead", {}, h("tr", {}, selectable && h("th", { class: "hu-table-checkbox-col" }, h("input", { type: "checkbox", checked: allSelected, onChange: (e) => onSelectAll?.(e.target.checked) })), ...columns.map((col) => h("th", {
+        key: col.key,
+        class: col.sortable ? "hu-table-sortable" : undefined,
+        style: [col.width && `width:${col.width}`, col.align && `text-align:${col.align}`].filter(Boolean).join(";"),
+        onClick: col.sortable ? () => onSort?.(col.key) : undefined
+    }, col.header, col.sortable && h("span", {
+        class: cn("hu-table-sort-icon", sortColumn === col.key && `hu-table-sort-icon--${sortDir}`),
+        innerHTML: sortSVG(sortColumn === col.key ? sortDir ?? "" : ""),
+        "aria-hidden": "true"
+    }))))), h("tbody", {}, rows.length === 0
+        ? h("tr", {}, h("td", { colspan: columns.length + (selectable ? 1 : 0), class: "hu-table-empty" }, emptyMessage))
+        : rows.map((row, i) => {
+            const key = rowKey?.(row) ?? String(row["id"] ?? i);
+            return h("tr", {
+                key, style: onRowClick ? "cursor:pointer" : undefined,
+                onClick: onRowClick ? () => onRowClick(row) : undefined
+            }, selectable && h("td", { class: "hu-table-checkbox-col" }, h("input", {
+                type: "checkbox", checked: selectedRows?.has(key) ?? false,
+                onChange: (e) => { e.stopPropagation(); onSelectRow?.(key, e.target.checked); }
+            })), ...columns.map((col) => h("td", { key: col.key, style: col.align ? `text-align:${col.align}` : undefined }, col.render ? col.render(row, i) : row[col.key])));
+        }))), footer && h("div", { class: "hu-table-footer" }, footer));
+}

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

@@ -0,0 +1,19 @@
+import { type Signal } from "@hyperpackai/hyperion";
+import { type VNode } from "../../theme/index.js";
+export interface DialogProps {
+    open: boolean | Signal<boolean>;
+    onClose?: (reason?: "backdrop" | "escape" | "close-button") => void;
+    onOpenChange?: (open: boolean, reason?: "backdrop" | "escape" | "close-button") => void;
+    title?: string;
+    description?: string;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    closeOnBackdrop?: boolean;
+    closeOnEscape?: boolean;
+    showClose?: boolean;
+    footer?: unknown;
+    footerAlign?: "start" | "end" | "between";
+    class?: string;
+    children?: unknown;
+}
+export declare function Dialog(props: DialogProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsDpE,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,cAAc,KAAK,IAAI,CAAC;IACpE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,cAAc,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAiEhD"}