@hyperpackai/hyperui 0.1.0

package/dist/components/Dialog/index.js

@@ -0,0 +1,96 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { renderInPortal } from "../../portal.js";
+import { FocusTrap } from "../FocusTrap/index.js";
+const DIALOG_CSS = `
+.hu-dialog-backdrop {
+  position: fixed; inset: 0; background: color-mix(in srgb, var(--hu-overlay) 82%, transparent);
+  backdrop-filter: blur(8px);
+  z-index: var(--hu-z-backdrop); display: grid; place-items: center; padding: var(--hu-space-4);
+  animation: hu-fade-in var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-dialog-backdrop--closing { animation: hu-fade-out var(--hu-duration-fast) var(--hu-ease) forwards; }
+
+.hu-dialog {
+  background: color-mix(in srgb, var(--hu-bg) 96%, var(--hu-bg-2));
+  border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-xl);
+  box-shadow: var(--hu-shadow-xl), 0 0 0 1px rgb(255 255 255/.04) inset;
+  width: 100%; max-width: 480px;
+  max-height: 90vh; overflow: auto; position: relative;
+  animation: hu-scale-in var(--hu-duration) var(--hu-ease-spring);
+}
+.hu-dialog--sm { max-width: 360px; }
+.hu-dialog--md { max-width: 480px; }
+.hu-dialog--lg { max-width: 640px; }
+.hu-dialog--xl { max-width: 800px; }
+.hu-dialog--full { max-width: 95vw; max-height: 95vh; }
+
+.hu-dialog-header {
+  padding: var(--hu-space-6) var(--hu-space-6) 0;
+  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hu-space-4);
+}
+.hu-dialog-title { font-size: var(--hu-font-size-lg); font-weight: var(--hu-font-weight-bold); color: var(--hu-text); line-height: 1.3; margin: 0; }
+.hu-dialog-desc { font-size: var(--hu-font-size-sm); color: var(--hu-text-2); margin-top: var(--hu-space-1); }
+.hu-dialog-close {
+  display: flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; border-radius: var(--hu-radius-md);
+  background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2));
+  border: 1px solid var(--hu-border); cursor: pointer; color: var(--hu-text-3);
+  transition: background var(--hu-duration) var(--hu-ease), border-color var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), transform var(--hu-duration-fast) var(--hu-ease);
+  flex-shrink: 0; padding: 0; box-shadow: var(--hu-shadow-xs);
+}
+.hu-dialog-close:hover { background: var(--hu-bg-3); color: var(--hu-text); border-color: var(--hu-border-2); box-shadow: var(--hu-shadow-sm); transform: translateY(-1px); }
+.hu-dialog-close:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-dialog-body { padding: var(--hu-space-4) var(--hu-space-6); }
+.hu-dialog-footer {
+  padding: var(--hu-space-4) var(--hu-space-6) var(--hu-space-6);
+  display: flex; align-items: center; justify-content: flex-end; gap: var(--hu-space-2);
+  border-top: 1px solid var(--hu-border); margin-top: var(--hu-space-2);
+}
+.hu-dialog-footer--start { justify-content: flex-start; }
+.hu-dialog-footer--between { justify-content: space-between; }
+`;
+export function Dialog(props) {
+    injectCSS("hu-dialog", DIALOG_CSS);
+    const { title, description, size = "md", closeOnBackdrop = true, closeOnEscape = true, showClose = true, footer, footerAlign = "end", onClose, onOpenChange, children } = props;
+    const isSignalOpen = typeof props.open === "object" && "peek" in props.open;
+    const isOpen = () => isSignalOpen
+        ? props.open.value
+        : props.open;
+    const handleKeyDown = (e) => {
+        if (closeOnEscape && e.key === "Escape") {
+            onOpenChange?.(false, "escape");
+            onClose?.("escape");
+        }
+    };
+    const closeSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 2l12 12M14 2L2 14"/></svg>`;
+    const renderDialog = () => h("div", {
+        class: "hu-dialog-backdrop", role: "presentation", tabIndex: -1,
+        onClick: closeOnBackdrop ? (e) => {
+            if (e.target.classList.contains("hu-dialog-backdrop")) {
+                onOpenChange?.(false, "backdrop");
+                onClose?.("backdrop");
+            }
+        } : undefined,
+        onKeyDown: handleKeyDown
+    }, FocusTrap({ active: true, restoreFocus: true, autoFocus: true, onEscape: closeOnEscape ? () => {
+            onOpenChange?.(false, "escape");
+            onClose?.("escape");
+        } : undefined, children: h("div", {
+            class: cn("hu-dialog", `hu-dialog--${size}`, props.class),
+            role: "dialog", "aria-modal": "true",
+            "aria-labelledby": title ? "hu-dialog-title" : undefined,
+            "aria-describedby": description ? "hu-dialog-description" : undefined
+        }, (title || showClose) && h("div", { class: "hu-dialog-header" }, title && h("div", {}, h("h2", { id: "hu-dialog-title", class: "hu-dialog-title" }, title), description && h("p", { id: "hu-dialog-description", class: "hu-dialog-desc" }, description)), showClose && h("button", {
+            class: "hu-dialog-close",
+            onClick: () => {
+                onOpenChange?.(false, "close-button");
+                onClose?.("close-button");
+            },
+            "aria-label": "Close dialog", innerHTML: closeSVG
+        })), h("div", { class: "hu-dialog-body" }, children), footer && h("div", { class: cn("hu-dialog-footer", `hu-dialog-footer--${footerAlign}`) }, footer))
+    }));
+    if (!isSignalOpen)
+        return isOpen() ? renderInPortal(renderDialog(), "dialog") : h("span", { "aria-hidden": "true" });
+    return (() => isOpen() ? renderInPortal(renderDialog(), "dialog") : h("span", { "aria-hidden": "true" }));
+}

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

@@ -0,0 +1,13 @@
+import { type VNode } from "../../theme/index.js";
+export type DividerOrientation = "horizontal" | "vertical";
+export type DividerTextAlign = "left" | "center" | "right";
+export interface DividerProps {
+    orientation?: DividerOrientation;
+    variant?: "fullWidth" | "inset" | "middle";
+    textAlign?: DividerTextAlign;
+    dashed?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Divider(props: DividerProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA2BpE,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,UAAU,CAAC;AAC3D,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,YAAY;IAC3B,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAyBlD"}

package/dist/components/Divider/index.js

@@ -0,0 +1,40 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const DIVIDER_CSS = `
+.hu-divider {
+  border: none; flex-shrink: 0;
+}
+.hu-divider--horizontal {
+  width: 100%; height: 1px; background: var(--hu-border); margin: var(--hu-space-2) 0;
+}
+.hu-divider--vertical {
+  width: 1px; height: auto; align-self: stretch; background: var(--hu-border); margin: 0 var(--hu-space-2);
+  display: inline-block;
+}
+.hu-divider--dashed { background: none; border-top: 1px dashed var(--hu-border); }
+.hu-divider--vertical.hu-divider--dashed { border-top: none; border-left: 1px dashed var(--hu-border); }
+
+.hu-divider--with-text {
+  display: flex; align-items: center; gap: var(--hu-space-3);
+  height: auto; background: none;
+}
+.hu-divider--with-text::before,
+.hu-divider--with-text::after { content: ""; flex: 1; height: 1px; background: var(--hu-border); }
+.hu-divider--with-text--left::before  { flex: 0 0 16px; }
+.hu-divider--with-text--right::after  { flex: 0 0 16px; }
+.hu-divider__text { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); white-space: nowrap; font-weight: var(--hu-font-weight-medium); }
+`;
+export function Divider(props) {
+    injectCSS("hu-divider", DIVIDER_CSS);
+    const { orientation = "horizontal", textAlign = "center", dashed, children } = props;
+    if (children) {
+        return h("div", {
+            class: cn("hu-divider", "hu-divider--horizontal", "hu-divider--with-text", textAlign !== "center" && `hu-divider--with-text--${textAlign}`, props.class),
+            role: "separator"
+        }, h("span", { class: "hu-divider__text" }, children));
+    }
+    return h("hr", {
+        class: cn("hu-divider", `hu-divider--${orientation}`, dashed && "hu-divider--dashed", props.class),
+        role: "separator",
+        "aria-orientation": orientation
+    });
+}

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

@@ -0,0 +1,17 @@
+import { type VNode } from "../../theme/index.js";
+export type DrawerAnchor = "left" | "right" | "top" | "bottom";
+export type DrawerVariant = "temporary" | "permanent" | "persistent";
+export type DrawerSize = "sm" | "md" | "lg";
+export interface DrawerProps {
+    open: boolean;
+    anchor?: DrawerAnchor;
+    variant?: DrawerVariant;
+    size?: DrawerSize;
+    title?: string;
+    onClose?: (reason?: "backdrop" | "close-button") => void;
+    onOpenChange?: (open: boolean, reason?: "backdrop" | "close-button") => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function Drawer(props: DrawerProps): VNode | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0DpE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC/D,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;AACrE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,UAAU,GAAG,cAAc,KAAK,IAAI,CAAC;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,GAAG,IAAI,CA8BvD"}

package/dist/components/Drawer/index.js

@@ -0,0 +1,77 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { renderInPortal } from "../../portal.js";
+const CSS = `
+.hu-drawer-root { }
+
+/* Backdrop */
+.hu-drawer-backdrop {
+  position: fixed; inset: 0; z-index: var(--hu-z-backdrop);
+  background: var(--hu-overlay);
+  animation: hu-drawer-bg-in 200ms ease forwards;
+}
+@keyframes hu-drawer-bg-in  { from { opacity: 0; } to { opacity: 1; } }
+
+/* Drawer panel */
+.hu-drawer {
+  position: fixed; z-index: var(--hu-z-modal); background: var(--hu-bg);
+  display: flex; flex-direction: column;
+  overflow-y: auto; overflow-x: hidden;
+  box-shadow: var(--hu-shadow-md);
+  transition: transform 250ms cubic-bezier(.4,0,.2,1);
+}
+.hu-drawer--left   { top: 0; bottom: 0; left: 0; width: 280px; animation: hu-drawer-left-in 250ms cubic-bezier(.4,0,.2,1) forwards; }
+.hu-drawer--right  { top: 0; bottom: 0; right: 0; width: 280px; animation: hu-drawer-right-in 250ms cubic-bezier(.4,0,.2,1) forwards; }
+.hu-drawer--top    { top: 0; left: 0; right: 0; height: auto; max-height: 50vh; animation: hu-drawer-top-in 250ms cubic-bezier(.4,0,.2,1) forwards; }
+.hu-drawer--bottom { bottom: 0; left: 0; right: 0; height: auto; max-height: 50vh; border-radius: var(--hu-radius-lg) var(--hu-radius-lg) 0 0; animation: hu-drawer-bottom-in 250ms cubic-bezier(.4,0,.2,1) forwards; }
+
+/* Sizes */
+.hu-drawer--sm.hu-drawer--left, .hu-drawer--sm.hu-drawer--right { width: 200px; }
+.hu-drawer--lg.hu-drawer--left, .hu-drawer--lg.hu-drawer--right { width: 360px; }
+
+/* Permanent variant — no overlay, stays in layout */
+.hu-drawer--permanent { position: relative; box-shadow: none; border-right: 1px solid var(--hu-border); animation: none; }
+.hu-drawer--permanent.hu-drawer--right { border-right: none; border-left: 1px solid var(--hu-border); }
+
+/* Persistent — stays open, pushes content */
+.hu-drawer--persistent { position: relative; box-shadow: none; border-right: 1px solid var(--hu-border); animation: none; }
+
+.hu-drawer__header { padding: var(--hu-space-4); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--hu-border); flex-shrink: 0; }
+.hu-drawer__title { font-size: var(--hu-font-size-md); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-drawer__close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2));
+  border: 1px solid var(--hu-border); cursor: pointer; color: var(--hu-text-3);
+  border-radius: var(--hu-radius-md); box-shadow: var(--hu-shadow-xs);
+  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;
+}
+.hu-drawer__close:hover { background: var(--hu-bg-3); color: var(--hu-text); border-color: var(--hu-border-2); box-shadow: var(--hu-shadow-sm); transform: translateY(-1px); }
+.hu-drawer__close:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-drawer__content { flex: 1; overflow-y: auto; padding: var(--hu-space-2) 0; }
+
+@keyframes hu-drawer-left-in   { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes hu-drawer-right-in  { from { transform: translateX(100%); }  to { transform: translateX(0); } }
+@keyframes hu-drawer-top-in    { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes hu-drawer-bottom-in { from { transform: translateY(100%); }  to { transform: translateY(0); } }
+`;
+export function Drawer(props) {
+    injectCSS("hu-drawer", CSS);
+    const { open, anchor = "left", variant = "temporary", size = "md", title, onClose, onOpenChange } = props;
+    const close = (reason) => {
+        onOpenChange?.(false, reason);
+        onClose?.(reason);
+    };
+    if (!open && variant === "temporary")
+        return null;
+    if (!open && variant !== "permanent")
+        return null;
+    const closeSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 2l12 12M14 2L2 14"/></svg>`;
+    const panel = h("div", {
+        class: cn("hu-drawer", `hu-drawer--${anchor}`, `hu-drawer--${variant}`, size !== "md" && `hu-drawer--${size}`, props.class),
+        role: "dialog",
+        "aria-modal": variant === "temporary" ? "true" : undefined
+    }, (title || onClose) && h("div", { class: "hu-drawer__header" }, title && h("span", { class: "hu-drawer__title" }, title), onClose && h("button", { class: "hu-drawer__close", onClick: () => close("close-button"), "aria-label": "Close drawer", innerHTML: closeSVG })), h("div", { class: "hu-drawer__content" }, props.children));
+    if (variant !== "temporary")
+        return panel;
+    return renderInPortal(h("div", { class: "hu-drawer-root" }, h("div", { class: "hu-drawer-backdrop", onClick: () => close("backdrop") }), panel), "drawer");
+}

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

@@ -0,0 +1,25 @@
+import { type Signal } from "@hyperpackai/hyperion";
+import { type VNode } from "../../theme/index.js";
+export interface MenuItem {
+    type?: "item" | "separator" | "label";
+    id?: string;
+    label?: string;
+    icon?: unknown;
+    shortcut?: string;
+    destructive?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    children?: MenuItem[];
+}
+export interface DropdownMenuProps {
+    open: boolean | Signal<boolean>;
+    items: MenuItem[];
+    align?: "left" | "right";
+    side?: "top" | "bottom";
+    trigger?: unknown;
+    onClose?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    class?: string;
+}
+export declare function DropdownMenu(props: DropdownMenuProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmCpE,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CA4C5D"}

package/dist/components/DropdownMenu/index.js

@@ -0,0 +1,67 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const DROPDOWN_CSS = `
+.hu-dropdown { position: relative; display: inline-block; }
+.hu-dropdown-menu {
+  position: absolute; z-index: var(--hu-z-dropdown); min-width: 180px;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); box-shadow: var(--hu-shadow-lg);
+  padding: var(--hu-space-1); outline: none;
+  animation: hu-scale-in var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-dropdown-menu--top-left   { bottom: calc(100% + 4px); left: 0; transform-origin: bottom left; }
+.hu-dropdown-menu--top-right  { bottom: calc(100% + 4px); right: 0; transform-origin: bottom right; }
+.hu-dropdown-menu--bottom-left  { top: calc(100% + 4px); left: 0; transform-origin: top left; }
+.hu-dropdown-menu--bottom-right { top: calc(100% + 4px); right: 0; transform-origin: top right; }
+
+.hu-dropdown-item {
+  display: flex; align-items: center; gap: var(--hu-space-2); width: 100%;
+  padding: 7px var(--hu-space-3); border-radius: var(--hu-radius-sm);
+  font-size: var(--hu-font-size-sm); color: var(--hu-text);
+  cursor: pointer; border: none; background: transparent; text-align: left;
+  transition: background var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-dropdown-item:hover { background: var(--hu-bg-3); }
+.hu-dropdown-item:focus-visible { outline: none; background: var(--hu-bg-3); }
+.hu-dropdown-item--destructive { color: var(--hu-error); }
+.hu-dropdown-item--destructive:hover { background: var(--hu-error-bg); }
+.hu-dropdown-item--disabled { opacity: .5; pointer-events: none; }
+.hu-dropdown-item-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
+.hu-dropdown-item-shortcut { margin-left: auto; font-size: var(--hu-font-size-xs); color: var(--hu-text-3); font-family: var(--hu-font-mono); }
+
+.hu-dropdown-separator { height: 1px; background: var(--hu-border); margin: var(--hu-space-1) 0; }
+.hu-dropdown-label { padding: 6px var(--hu-space-3) 4px; font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text-3); text-transform: uppercase; letter-spacing: .05em; }
+`;
+export function DropdownMenu(props) {
+    injectCSS("hu-dropdown", DROPDOWN_CSS);
+    const { items, align = "left", side = "bottom", trigger, onClose, onOpenChange } = props;
+    const isSignalOpen = typeof props.open === "object" && "peek" in props.open;
+    const isOpen = () => isSignalOpen
+        ? props.open.value
+        : props.open;
+    const close = () => {
+        onOpenChange?.(false);
+        onClose?.();
+    };
+    const menuClass = `hu-dropdown-menu--${side}-${align}`;
+    const renderMenu = () => isOpen()
+        ? h("ul", {
+            class: cn("hu-dropdown-menu", menuClass),
+            role: "menu",
+            onKeyDown: (e) => {
+                if (e.key === "Escape")
+                    close();
+            }
+        }, ...items.map((item, i) => {
+            if (item.type === "separator")
+                return h("li", { key: `sep-${i}`, class: "hu-dropdown-separator", role: "separator" });
+            if (item.type === "label")
+                return h("li", { key: item.label, class: "hu-dropdown-label", role: "presentation" }, item.label);
+            return h("li", { key: item.id ?? item.label, role: "none" }, h("button", {
+                class: cn("hu-dropdown-item", item.destructive && "hu-dropdown-item--destructive", item.disabled && "hu-dropdown-item--disabled"),
+                role: "menuitem", disabled: item.disabled,
+                onClick: () => { item.onClick?.(); close(); }
+            }, item.icon && h("span", { class: "hu-dropdown-item-icon", "aria-hidden": "true" }, item.icon), item.label, item.shortcut && h("span", { class: "hu-dropdown-item-shortcut" }, item.shortcut)));
+        }))
+        : null;
+    return h("div", { class: cn("hu-dropdown", props.class) }, trigger, typeof props.open === "boolean" ? renderMenu() : renderMenu);
+}

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

@@ -0,0 +1,11 @@
+import { type VNode } from "../../theme/index.js";
+export interface EmptyStateProps {
+    title: string;
+    description?: string;
+    icon?: unknown;
+    action?: unknown;
+    minHeight?: string | number;
+    class?: string;
+}
+export declare function EmptyState(props: EmptyStateProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAyCpE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAOD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAcxD"}

package/dist/components/EmptyState/index.js

@@ -0,0 +1,53 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const EMPTY_STATE_CSS = `
+.hu-empty-state {
+  display: grid;
+  place-items: center;
+  gap: var(--hu-space-3);
+  width: 100%;
+  min-height: var(--hu-empty-state-min-height, 220px);
+  padding: var(--hu-space-8) var(--hu-space-6);
+  text-align: center;
+  color: var(--hu-text-2);
+}
+.hu-empty-state__icon {
+  display: inline-grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--hu-radius-lg);
+  background: var(--hu-primary-bg);
+  color: var(--hu-primary);
+  font-weight: var(--hu-font-weight-bold);
+}
+.hu-empty-state__title {
+  margin: 0;
+  color: var(--hu-text);
+  font-size: var(--hu-font-size-lg);
+  font-weight: var(--hu-font-weight-bold);
+  line-height: 1.2;
+}
+.hu-empty-state__description {
+  margin: 0;
+  max-width: 56ch;
+  font-size: var(--hu-font-size-sm);
+  line-height: 1.6;
+}
+.hu-empty-state__action {
+  margin-top: var(--hu-space-2);
+}
+`;
+function sizeValue(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function EmptyState(props) {
+    injectCSS("hu-empty-state", EMPTY_STATE_CSS);
+    const minHeight = sizeValue(props.minHeight);
+    return h("section", {
+        class: cn("hu-empty-state", props.class),
+        role: "status",
+        style: minHeight ? `--hu-empty-state-min-height:${minHeight}` : undefined
+    }, h("div", { class: "hu-empty-state__icon", "aria-hidden": "true" }, props.icon ?? "0"), h("h3", { class: "hu-empty-state__title" }, props.title), props.description ? h("p", { class: "hu-empty-state__description" }, props.description) : undefined, props.action ? h("div", { class: "hu-empty-state__action" }, props.action) : undefined);
+}

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

@@ -0,0 +1,12 @@
+import { type VNode } from "../../theme/index.js";
+export interface ErrorStateProps {
+    title?: string;
+    description?: string;
+    retryLabel?: string;
+    icon?: unknown;
+    minHeight?: string | number;
+    class?: string;
+    onRetry?: () => void;
+}
+export declare function ErrorState(props?: ErrorStateProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorState/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0CpE,MAAM,WAAW,eAAe;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAOD,wBAAgB,UAAU,CAAC,KAAK,GAAE,eAAoB,GAAG,KAAK,CAgB7D"}

package/dist/components/ErrorState/index.js

@@ -0,0 +1,54 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { Button } from "../Button/index.js";
+const ERROR_STATE_CSS = `
+.hu-error-state {
+  display: grid;
+  place-items: center;
+  gap: var(--hu-space-3);
+  width: 100%;
+  min-height: var(--hu-error-state-min-height, 220px);
+  padding: var(--hu-space-8) var(--hu-space-6);
+  text-align: center;
+  color: var(--hu-text-2);
+}
+.hu-error-state__icon {
+  display: inline-grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: var(--hu-radius-lg);
+  background: var(--hu-error-bg);
+  color: var(--hu-error);
+  font-weight: var(--hu-font-weight-bold);
+}
+.hu-error-state__title {
+  margin: 0;
+  color: var(--hu-text);
+  font-size: var(--hu-font-size-lg);
+  font-weight: var(--hu-font-weight-bold);
+  line-height: 1.2;
+}
+.hu-error-state__description {
+  margin: 0;
+  max-width: 56ch;
+  font-size: var(--hu-font-size-sm);
+  line-height: 1.6;
+}
+.hu-error-state__action {
+  margin-top: var(--hu-space-2);
+}
+`;
+function sizeValue(value) {
+    if (value === undefined)
+        return undefined;
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function ErrorState(props = {}) {
+    injectCSS("hu-error-state", ERROR_STATE_CSS);
+    const minHeight = sizeValue(props.minHeight);
+    return h("section", {
+        class: cn("hu-error-state", props.class),
+        role: "alert",
+        style: minHeight ? `--hu-error-state-min-height:${minHeight}` : undefined
+    }, h("div", { class: "hu-error-state__icon", "aria-hidden": "true" }, props.icon ?? "!"), h("h3", { class: "hu-error-state__title" }, props.title ?? "Something went wrong"), props.description ? h("p", { class: "hu-error-state__description" }, props.description) : undefined, props.onRetry ? h("div", { class: "hu-error-state__action" }, Button({ variant: "outline", children: props.retryLabel ?? "Try again", onClick: props.onRetry })) : undefined);
+}

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

@@ -0,0 +1,16 @@
+import { type VNode } from "../../theme/index.js";
+export type FabColor = "primary" | "secondary" | "error";
+export type FabSize = "sm" | "md" | "lg";
+export interface FabProps {
+    color?: FabColor;
+    size?: FabSize;
+    extended?: boolean;
+    fixed?: boolean;
+    disabled?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    "aria-label": string;
+    class?: string;
+    children?: unknown;
+}
+export declare function Fab(props: FabProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Fab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAgCpE,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,CAAC;AACzD,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,GAAG,KAAK,CAc1C"}

package/dist/components/Fab/index.js

@@ -0,0 +1,39 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const FAB_CSS = `
+.hu-fab {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--hu-space-2);
+  border: 1px solid color-mix(in srgb, var(--hu-primary) 54%, transparent); border-radius: var(--hu-radius-full); cursor: pointer;
+  font-family: var(--hu-font-sans); font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-semibold);
+  box-shadow: var(--hu-shadow-md);
+  transition: background var(--hu-duration) var(--hu-ease), border-color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), filter var(--hu-duration) var(--hu-ease), transform var(--hu-duration-fast) var(--hu-ease);
+  user-select: none; position: relative; overflow: hidden;
+  background: linear-gradient(180deg, color-mix(in srgb, var(--hu-primary) 88%, white), var(--hu-primary)); color: var(--hu-primary-text);
+}
+.hu-fab:hover { box-shadow: var(--hu-shadow-lg); transform: translateY(-1px); filter: brightness(.98); }
+.hu-fab:active { transform: translateY(0); box-shadow: var(--hu-shadow-sm); }
+.hu-fab:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 3px; }
+.hu-fab:disabled { opacity: .4; pointer-events: none; box-shadow: none; }
+.hu-fab--sm   { width: 40px; height: 40px; font-size: 18px; }
+.hu-fab--md   { width: 56px; height: 56px; font-size: 22px; }
+.hu-fab--lg   { width: 64px; height: 64px; font-size: 26px; }
+.hu-fab--extended {
+  width: auto; min-width: 132px; height: 48px; padding: 0 var(--hu-space-5);
+  border-radius: var(--hu-radius-full); font-size: var(--hu-font-size-sm);
+  letter-spacing: 0; white-space: nowrap;
+}
+.hu-fab--extended.hu-fab--sm { height: 40px; min-width: 112px; padding: 0 var(--hu-space-4); font-size: var(--hu-font-size-xs); }
+.hu-fab--extended.hu-fab--lg { height: 56px; min-width: 152px; padding: 0 var(--hu-space-6); font-size: var(--hu-font-size-md); }
+.hu-fab--secondary { background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-3)); color: var(--hu-text); border-color: var(--hu-border); }
+.hu-fab--error { background: linear-gradient(180deg, color-mix(in srgb, var(--hu-error) 86%, white), var(--hu-error)); border-color: var(--hu-error); color: #fff; }
+.hu-fab--fixed { position: fixed; bottom: var(--hu-space-6); right: var(--hu-space-6); z-index: var(--hu-z-tooltip); }
+`;
+export function Fab(props) {
+    injectCSS("hu-fab", FAB_CSS);
+    const { color = "primary", size = "md", extended, fixed, disabled, onClick, children } = props;
+    return h("button", {
+        class: cn("hu-fab", `hu-fab--${size}`, color !== "primary" && `hu-fab--${color}`, extended && "hu-fab--extended", fixed && "hu-fab--fixed", props.class),
+        type: "button", disabled, onClick,
+        "aria-label": props["aria-label"]
+    }, children);
+}

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

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

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

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

package/dist/components/Fade/index.js

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

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

@@ -0,0 +1,11 @@
+import { type VNode } from "../../theme/index.js";
+export interface FocusTrapProps {
+    active?: boolean;
+    restoreFocus?: boolean;
+    autoFocus?: boolean;
+    onEscape?: () => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function FocusTrap(props: FocusTrapProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FocusTrap/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAWrD,MAAM,WAAW,cAAc;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAgEtD"}