@hyperpackai/hyperui 0.1.0

package/dist/components/typography.js

@@ -0,0 +1,206 @@
+/**
+ * HyperUI Typography Components
+ * Typography · Chip · Divider · Link · AvatarGroup
+ */
+import { injectCSS, cn, h } from "../theme/index.js";
+// ============================================================
+// TYPOGRAPHY
+// ============================================================
+const TYPOGRAPHY_CSS = `
+.hu-typography { margin: 0; color: var(--hu-text); font-family: var(--hu-font-sans); }
+.hu-typography--h1 { font-size: var(--hu-font-size-5xl); font-weight: var(--hu-font-weight-bold); letter-spacing: -.025em; line-height: 1.1; }
+.hu-typography--h2 { font-size: var(--hu-font-size-4xl); font-weight: var(--hu-font-weight-bold); letter-spacing: -.02em; line-height: 1.15; }
+.hu-typography--h3 { font-size: var(--hu-font-size-3xl); font-weight: var(--hu-font-weight-semibold); letter-spacing: -.015em; line-height: 1.2; }
+.hu-typography--h4 { font-size: var(--hu-font-size-2xl); font-weight: var(--hu-font-weight-semibold); line-height: 1.25; }
+.hu-typography--h5 { font-size: var(--hu-font-size-xl);  font-weight: var(--hu-font-weight-semibold); line-height: 1.3; }
+.hu-typography--h6 { font-size: var(--hu-font-size-md);  font-weight: var(--hu-font-weight-semibold); line-height: 1.4; }
+.hu-typography--subtitle1 { font-size: var(--hu-font-size-base); font-weight: var(--hu-font-weight-medium); line-height: 1.6; }
+.hu-typography--subtitle2 { font-size: var(--hu-font-size-sm);   font-weight: var(--hu-font-weight-medium); line-height: 1.6; }
+.hu-typography--body1 { font-size: var(--hu-font-size-base); line-height: 1.7; }
+.hu-typography--body2 { font-size: var(--hu-font-size-sm);   line-height: 1.65; }
+.hu-typography--caption { font-size: var(--hu-font-size-xs); line-height: 1.5; color: var(--hu-text-2); }
+.hu-typography--overline { font-size: 11px; font-weight: var(--hu-font-weight-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--hu-text-2); }
+.hu-typography--inherit { font-size: inherit; font-weight: inherit; line-height: inherit; }
+.hu-typography--gutterBottom { margin-bottom: .35em; }
+.hu-typography--noWrap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-typography--paragraph { margin-bottom: var(--hu-space-4); }
+.hu-typography--color-primary   { color: var(--hu-primary); }
+.hu-typography--color-secondary { color: var(--hu-text-2); }
+.hu-typography--color-error     { color: var(--hu-error); }
+.hu-typography--color-warning   { color: var(--hu-warning); }
+.hu-typography--color-info      { color: var(--hu-info); }
+.hu-typography--color-success   { color: var(--hu-success); }
+.hu-typography--align-left    { text-align: left; }
+.hu-typography--align-center  { text-align: center; }
+.hu-typography--align-right   { text-align: right; }
+.hu-typography--align-justify { text-align: justify; }
+`;
+const VARIANT_TAGS = {
+    h1: "h1", h2: "h2", h3: "h3", h4: "h4", h5: "h5", h6: "h6",
+    subtitle1: "h6", subtitle2: "h6",
+    body1: "p", body2: "p",
+    caption: "span", overline: "span", inherit: "span"
+};
+export function Typography(props) {
+    injectCSS("hu-typography", TYPOGRAPHY_CSS);
+    const { variant = "body1", color, align, gutterBottom, noWrap, paragraph, children } = props;
+    const tag = props.component ?? (paragraph ? "p" : VARIANT_TAGS[variant] ?? "span");
+    return h(tag, {
+        class: cn("hu-typography", `hu-typography--${variant}`, color && `hu-typography--color-${color}`, align && `hu-typography--align-${align}`, gutterBottom && "hu-typography--gutterBottom", noWrap && "hu-typography--noWrap", paragraph && "hu-typography--paragraph", props.class)
+    }, children);
+}
+// ============================================================
+// CHIP
+// ============================================================
+const CHIP_CSS = `
+.hu-chip {
+  display: inline-flex; align-items: center; gap: var(--hu-space-1);
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-medium);
+  font-family: var(--hu-font-sans); border-radius: 9999px;
+  border: 1px solid transparent; white-space: nowrap;
+  user-select: none; transition: all var(--hu-duration) var(--hu-ease);
+  vertical-align: middle;
+}
+.hu-chip--sm  { height: 24px; padding: 0 var(--hu-space-2); font-size: 11px; }
+.hu-chip--md  { height: 32px; padding: 0 var(--hu-space-3); }
+.hu-chip--lg  { height: 40px; padding: 0 var(--hu-space-4); font-size: var(--hu-font-size-sm); }
+
+.hu-chip--filled-default   { background: var(--hu-bg-3); color: var(--hu-text); border-color: var(--hu-border); }
+.hu-chip--filled-primary   { background: var(--hu-primary); color: var(--hu-primary-text); }
+.hu-chip--filled-secondary { background: var(--hu-bg-4); color: var(--hu-text-2); border-color: var(--hu-border); }
+.hu-chip--filled-error     { background: var(--hu-error); color: #fff; }
+.hu-chip--filled-warning   { background: var(--hu-warning); color: #fff; }
+.hu-chip--filled-info      { background: var(--hu-info); color: #fff; }
+.hu-chip--filled-success   { background: var(--hu-success); color: #fff; }
+
+.hu-chip--outlined-default   { background: transparent; border-color: var(--hu-border); color: var(--hu-text); }
+.hu-chip--outlined-primary   { background: transparent; border-color: var(--hu-primary); color: var(--hu-primary); }
+.hu-chip--outlined-error     { background: transparent; border-color: var(--hu-error); color: var(--hu-error); }
+.hu-chip--outlined-warning   { background: transparent; border-color: var(--hu-warning); color: var(--hu-warning); }
+.hu-chip--outlined-info      { background: transparent; border-color: var(--hu-info); color: var(--hu-info); }
+.hu-chip--outlined-success   { background: transparent; border-color: var(--hu-success); color: var(--hu-success); }
+
+.hu-chip--clickable { cursor: pointer; }
+.hu-chip--clickable:hover { filter: brightness(.92); }
+.hu-chip--clickable:active { transform: scale(.97); }
+.hu-chip--disabled { opacity: .5; pointer-events: none; }
+
+.hu-chip__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-left: -4px; }
+.hu-chip__icon { width: 16px; height: 16px; flex-shrink: 0; }
+.hu-chip__delete {
+  display: flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px; border-radius: 50%; margin-right: -4px;
+  background: none; border: none; cursor: pointer; color: inherit; opacity: .7; padding: 0;
+  font-size: 14px; line-height: 1;
+}
+.hu-chip__delete:hover { opacity: 1; background: rgba(0,0,0,.1); }
+`;
+export function Chip(props) {
+    injectCSS("hu-chip", CHIP_CSS);
+    const { label, color = "default", variant = "filled", size = "md", icon, avatar, onDelete, onClick, disabled } = props;
+    return h("div", {
+        class: cn("hu-chip", `hu-chip--${size}`, `hu-chip--${variant}-${color}`, onClick && "hu-chip--clickable", disabled && "hu-chip--disabled", props.class),
+        onClick,
+        role: onClick ? "button" : undefined,
+        tabindex: onClick ? "0" : undefined
+    }, avatar && h("img", { class: "hu-chip__avatar", src: avatar, alt: "" }), icon && h("span", { class: "hu-chip__icon" }, icon), h("span", {}, label), onDelete && h("button", {
+        class: "hu-chip__delete",
+        onClick: (e) => { e.stopPropagation(); onDelete(); },
+        "aria-label": "delete"
+    }, "×"));
+}
+// ============================================================
+// DIVIDER
+// ============================================================
+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
+    });
+}
+// ============================================================
+// LINK
+// ============================================================
+const LINK_CSS = `
+.hu-link {
+  color: var(--hu-primary); text-decoration: underline; text-underline-offset: 3px;
+  text-decoration-color: transparent; transition: all var(--hu-duration) var(--hu-ease);
+  cursor: pointer; font-family: var(--hu-font-sans);
+}
+.hu-link:hover { text-decoration-color: var(--hu-primary); }
+.hu-link--inherit { color: inherit; }
+.hu-link--secondary { color: var(--hu-text-2); }
+.hu-link--error { color: var(--hu-error); }
+.hu-link--underline-always { text-decoration-color: currentColor; }
+.hu-link--underline-none { text-decoration: none; }
+.hu-link--underline-none:hover { text-decoration: underline; text-underline-offset: 3px; }
+`;
+export function Link(props) {
+    injectCSS("hu-link", LINK_CSS);
+    const { href, target, rel, color = "primary", underline = "hover", component = "a", onClick, children } = props;
+    return h(component, {
+        class: cn("hu-link", color !== "primary" && `hu-link--${color}`, underline !== "hover" && `hu-link--underline-${underline}`, props.class),
+        href, target,
+        rel: target === "_blank" ? (rel ?? "noopener noreferrer") : rel,
+        onClick
+    }, children);
+}
+// ============================================================
+// AVATAR GROUP
+// ============================================================
+const AVATAR_GROUP_CSS = `
+.hu-avatar-group { display: flex; flex-direction: row-reverse; }
+.hu-avatar-group .hu-avatar { margin-left: -8px; border: 2px solid var(--hu-bg); ring: none; }
+.hu-avatar-group .hu-avatar:last-child { margin-left: 0; }
+.hu-avatar-group__extra {
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 50%; background: var(--hu-bg-3); border: 2px solid var(--hu-bg);
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
+  color: var(--hu-text-2); flex-shrink: 0; margin-left: -8px;
+}
+`;
+const AVATAR_SIZES = { sm: "24px", md: "32px", lg: "40px", xl: "48px" };
+export function AvatarGroup(props) {
+    injectCSS("hu-avatar-group", AVATAR_GROUP_CSS);
+    const { max = 5, size = "md", children = [] } = props;
+    const sz = AVATAR_SIZES[size] ?? "32px";
+    const visible = children.slice(0, max);
+    const extra = children.length - max;
+    return h("div", { class: cn("hu-avatar-group", props.class) }, ...visible, extra > 0 && h("div", {
+        class: "hu-avatar-group__extra",
+        style: `width:${sz};height:${sz};`
+    }, `+${extra}`));
+}

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @hyperpackai/hyperui — Rich, accessible, enterprise-grade UI component library
+ * for Hyperion applications. Framework-agnostic, zero external dependencies.
+ *
+ * Quick start:
+ *   import { initHyperUI, Button, Dialog, DataTable } from "@hyperpackai/hyperui";
+ *   import { applyTheme, createTheme, tokens, useTokens } from "@hyperpackai/hyperui/tokens";
+ *   initHyperUI({ theme: "system" });
+ */
+export { initHyperUI, injectCSS, cn, h } from "./theme/index.js";
+export type { HyperUIConfig, VNode } from "./theme/index.js";
+export { tokens, primitives, applyTheme, createTheme, setColorMode, ThemeProvider, useTheme, useTokens, getCSSVar, tokenToCSS, exportTokens, getAllCSSVars, themes, getDarkVariant, lightSemanticTokens, darkSemanticTokens, defaultComponentTokens } from "./tokens/index.js";
+export type { FullTokens, ThemeInput, ColorMode, ThemeOverrides, BuiltinTheme, ThemeDirection, ThemeDensity, ThemeProviderProps, ThemeState, SemanticTokens, SemanticColors, ComponentTokens, ButtonTokens, InputTokens, CardTokens } from "./tokens/index.js";
+export * from "./components/index.js";
+export * from "./components/ai.js";
+export * from "./components/charts.js";
+export * from "./components/data.js";
+export * from "./components/date.js";
+export * from "./components/enterprise.js";
+export * from "./components/form.js";
+export { ColorPicker, Dropzone, FileUpload, OTPInput, PinInput } from "./components/form.js";
+export type { ColorPickerProps, DropzoneProps, FileUploadFile, FileUploadProps, OTPInputProps, PinInputProps } from "./components/form.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,kBAAkB,CAAC;AACjE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG7D,OAAO,EACL,MAAM,EAAE,UAAU,EAClB,UAAU,EAAE,WAAW,EAAE,YAAY,EACrC,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EACtF,MAAM,EAAE,cAAc,EACtB,mBAAmB,EAAE,kBAAkB,EACvC,sBAAsB,EACvB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,YAAY,EAC/D,cAAc,EAAE,YAAY,EAAE,kBAAkB,EAAE,UAAU,EAC5D,cAAc,EAAE,cAAc,EAAE,eAAe,EAC/C,YAAY,EAAE,WAAW,EAAE,UAAU,EACtC,MAAM,mBAAmB,CAAC;AAO3B,cAAc,uBAAuB,CAAC;AAItC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,OAAO,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EACV,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,eAAe,EACf,aAAa,EACb,aAAa,EACd,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1,29 @@
+/**
+ * @hyperpackai/hyperui — Rich, accessible, enterprise-grade UI component library
+ * for Hyperion applications. Framework-agnostic, zero external dependencies.
+ *
+ * Quick start:
+ *   import { initHyperUI, Button, Dialog, DataTable } from "@hyperpackai/hyperui";
+ *   import { applyTheme, createTheme, tokens, useTokens } from "@hyperpackai/hyperui/tokens";
+ *   initHyperUI({ theme: "system" });
+ */
+// Theme system (CSS injection engine + initHyperUI)
+export { initHyperUI, injectCSS, cn, h } from "./theme/index.js";
+// Design token system
+export { tokens, primitives, applyTheme, createTheme, setColorMode, ThemeProvider, useTheme, useTokens, getCSSVar, tokenToCSS, exportTokens, getAllCSSVars, themes, getDarkVariant, lightSemanticTokens, darkSemanticTokens, defaultComponentTokens } from "./tokens/index.js";
+// All UI components — re-export the entire component barrel so every
+// component (including SpeedDial, Menu, AppBar, Modal, Drawer, Backdrop,
+// BottomNavigation, MobileStepper, Circular/LinearProgress, transitions,
+// etc.) is available from the package root. Using `export *` keeps this
+// in sync automatically as new components are added to the barrel.
+export * from "./components/index.js";
+// Specialist component files (AI, charts, data grid, date pickers, enterprise,
+// advanced forms) — these export distinct symbols with no overlap.
+export * from "./components/ai.js";
+export * from "./components/charts.js";
+export * from "./components/data.js";
+export * from "./components/date.js";
+export * from "./components/enterprise.js";
+export * from "./components/form.js";
+export { ColorPicker, Dropzone, FileUpload, OTPInput, PinInput } from "./components/form.js";
+// All component prop/variant types flow through `export *` from the barrel above.

package/dist/portal.d.ts

@@ -0,0 +1,3 @@
+import { type VNode } from "./theme/index.js";
+export declare function renderInPortal(children: unknown, layer: string): VNode;
+//# sourceMappingURL=portal.d.ts.map

package/dist/portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal.d.ts","sourceRoot":"","sources":["../src/portal.ts"],"names":[],"mappings":"AACA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAIjD,wBAAgB,cAAc,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,CAgBtE"}

package/dist/portal.js

@@ -0,0 +1,17 @@
+import { createPortal, onCleanup } from "@hyperpackai/hyperion";
+import { h } from "./theme/index.js";
+let portalId = 0;
+export function renderInPortal(children, layer) {
+    if (typeof document === "undefined" || !document.body) {
+        return h("span", { "data-hu-portal": layer }, children);
+    }
+    const root = document.createElement("div");
+    root.className = "hu-portal-root";
+    root.dataset.huPortal = layer;
+    root.dataset.huPortalId = String(++portalId);
+    document.body.appendChild(root);
+    onCleanup(() => {
+        root.remove();
+    });
+    return createPortal(children, root);
+}

package/dist/theme/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * HyperUI Design System
+ *
+ * All component styles flow from CSS custom properties defined here.
+ * Override any token to customise the entire system — no build step needed.
+ *
+ *   document.documentElement.style.setProperty("--hu-primary", "#7c3aed");
+ */
+export declare function injectCSS(id: string, css: string): void;
+export declare const BASE_CSS = "\n/* ------------------------------------------------------------------ */\n/* HyperUI Design Tokens                                               */\n/* ------------------------------------------------------------------ */\n:root {\n  /* Radius */\n  --hu-radius-xs:   3px;\n  --hu-radius-sm:   5px;\n  --hu-radius:      8px;\n  --hu-radius-md:   10px;\n  --hu-radius-lg:   14px;\n  --hu-radius-xl:   20px;\n  --hu-radius-full: 9999px;\n\n  /* Spacing (4-pt grid) */\n  --hu-space-1:  4px;\n  --hu-space-2:  8px;\n  --hu-space-3:  12px;\n  --hu-space-4:  16px;\n  --hu-space-5:  20px;\n  --hu-space-6:  24px;\n  --hu-space-8:  32px;\n  --hu-space-10: 40px;\n  --hu-space-12: 48px;\n  --hu-space-16: 64px;\n\n  /* Typography */\n  --hu-font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --hu-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace;\n  --hu-font-size-xs:   11px;\n  --hu-font-size-sm:   13px;\n  --hu-font-size-base: 14px;\n  --hu-font-size-md:   15px;\n  --hu-font-size-lg:   18px;\n  --hu-font-size-xl:   22px;\n  --hu-font-size-2xl:  28px;\n  --hu-font-size-3xl:  36px;\n  --hu-line-height: 1.5;\n  --hu-font-weight-normal:   400;\n  --hu-font-weight-medium:   500;\n  --hu-font-weight-semibold: 600;\n  --hu-font-weight-bold:     700;\n\n  /* Colours \u2014 Light */\n  --hu-bg:          #ffffff;\n  --hu-bg-2:        #f8fafc;\n  --hu-bg-3:        #f1f5f9;\n  --hu-bg-4:        #e8edf5;\n  --hu-border:      #e2e8f0;\n  --hu-border-2:    #cbd5e1;\n  --hu-text:        #0f172a;\n  --hu-text-2:      #475569;\n  --hu-text-3:      #94a3b8;\n  --hu-text-inv:    #ffffff;\n\n  /* Primary \u2014 Indigo */\n  --hu-primary:       #6366f1;\n  --hu-primary-dk:    #4f46e5;\n  --hu-primary-lt:    #818cf8;\n  --hu-primary-bg:    #eef2ff;\n  --hu-primary-text:  #ffffff;\n\n  /* Semantic */\n  --hu-success:     #22c55e;\n  --hu-success-bg:  #f0fdf4;\n  --hu-success-text:#15803d;\n  --hu-warning:     #f59e0b;\n  --hu-warning-bg:  #fffbeb;\n  --hu-warning-text:#92400e;\n  --hu-error:       #ef4444;\n  --hu-error-bg:    #fef2f2;\n  --hu-error-text:  #b91c1c;\n  --hu-info:        #3b82f6;\n  --hu-info-bg:     #eff6ff;\n  --hu-info-text:   #1d4ed8;\n\n  /* Shadows */\n  --hu-shadow-xs: 0 1px 2px rgb(0 0 0/6%);\n  --hu-shadow-sm: 0 1px 3px rgb(0 0 0/8%), 0 1px 2px rgb(0 0 0/4%);\n  --hu-shadow:    0 4px 6px -1px rgb(0 0 0/8%), 0 2px 4px -2px rgb(0 0 0/4%);\n  --hu-shadow-md: 0 10px 15px -3px rgb(0 0 0/8%), 0 4px 6px -4px rgb(0 0 0/4%);\n  --hu-shadow-lg: 0 20px 25px -5px rgb(0 0 0/8%), 0 8px 10px -6px rgb(0 0 0/4%);\n  --hu-shadow-xl: 0 25px 50px -12px rgb(0 0 0/20%);\n\n  /* Overlays */\n  --hu-overlay:     rgb(0 0 0/50%);\n\n  /* Transitions */\n  --hu-duration-fast:   100ms;\n  --hu-duration:        150ms;\n  --hu-duration-slow:   250ms;\n  --hu-ease:            cubic-bezier(0.4, 0, 0.2, 1);\n  --hu-ease-in:         cubic-bezier(0.4, 0, 1, 1);\n  --hu-ease-out:        cubic-bezier(0, 0, 0.2, 1);\n  --hu-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);\n\n  /* Z-index */\n  --hu-z-dropdown:  1000;\n  --hu-z-sticky:    1020;\n  --hu-z-fixed:     1030;\n  --hu-z-backdrop:  1040;\n  --hu-z-modal:     1050;\n  --hu-z-popover:   1060;\n  --hu-z-tooltip:   1070;\n  --hu-z-toast:     1080;\n}\n\n/* Dark mode */\n[data-theme=\"dark\"], .hu-dark {\n  --hu-bg:          #0a0a0f;\n  --hu-bg-2:        #111118;\n  --hu-bg-3:        #1a1a24;\n  --hu-bg-4:        #22222f;\n  --hu-border:      #2a2a38;\n  --hu-border-2:    #3a3a4a;\n  --hu-text:        #f0f0ff;\n  --hu-text-2:      #a0a0c0;\n  --hu-text-3:      #606080;\n  --hu-text-inv:    #0a0a0f;\n\n  --hu-primary:       #818cf8;\n  --hu-primary-dk:    #6366f1;\n  --hu-primary-lt:    #a5b4fc;\n  --hu-primary-bg:    #1e1b4b30;\n  --hu-primary-text:  #ffffff;\n\n  --hu-success:     #4ade80;\n  --hu-success-bg:  #052e16;\n  --hu-success-text:#86efac;\n  --hu-warning:     #fbbf24;\n  --hu-warning-bg:  #1c1500;\n  --hu-warning-text:#fde68a;\n  --hu-error:       #f87171;\n  --hu-error-bg:    #1f0505;\n  --hu-error-text:  #fca5a5;\n  --hu-info:        #60a5fa;\n  --hu-info-bg:     #030d1a;\n  --hu-info-text:   #93c5fd;\n\n  --hu-shadow-xs: 0 1px 2px rgb(0 0 0/30%);\n  --hu-shadow-sm: 0 1px 3px rgb(0 0 0/40%), 0 1px 2px rgb(0 0 0/24%);\n  --hu-shadow:    0 4px 6px -1px rgb(0 0 0/40%), 0 2px 4px -2px rgb(0 0 0/24%);\n  --hu-shadow-md: 0 10px 15px -3px rgb(0 0 0/40%), 0 4px 6px -4px rgb(0 0 0/24%);\n  --hu-shadow-lg: 0 20px 25px -5px rgb(0 0 0/40%), 0 8px 10px -6px rgb(0 0 0/24%);\n  --hu-shadow-xl: 0 25px 50px -12px rgb(0 0 0/60%);\n\n  --hu-overlay: rgb(0 0 0/70%);\n}\n\n/* Base reset */\n*, *::before, *::after { box-sizing: border-box; }\n[data-hu-root] {\n  font-family: var(--hu-font-sans);\n  font-size: var(--hu-font-size-base);\n  line-height: var(--hu-line-height);\n  color: var(--hu-text);\n  background: var(--hu-bg);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Focus ring */\n.hu-focus:focus-visible {\n  outline: 2px solid var(--hu-primary);\n  outline-offset: 2px;\n}\n\n/* Screen-reader only */\n.hu-sr-only {\n  position: absolute; width: 1px; height: 1px; padding: 0;\n  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);\n  white-space: nowrap; border: 0;\n}\n\n/* Animations */\n@keyframes hu-spin { to { transform: rotate(360deg); } }\n@keyframes hu-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }\n@keyframes hu-ping { 75%,100%{transform:scale(2);opacity:0} }\n@keyframes hu-bounce { 0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)} 50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)} }\n@keyframes hu-fade-in { from{opacity:0} to{opacity:1} }\n@keyframes hu-fade-out { from{opacity:1} to{opacity:0} }\n@keyframes hu-slide-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }\n@keyframes hu-slide-down { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }\n@keyframes hu-slide-in-right { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }\n@keyframes hu-slide-in-left { from{opacity:0;transform:translateX(-100%)} to{opacity:1;transform:translateX(0)} }\n@keyframes hu-scale-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }\n@keyframes hu-shimmer { from{background-position:-200% 0} to{background-position:200% 0} }\n";
+export interface HyperUIConfig {
+    theme?: "light" | "dark" | "system";
+    primaryColor?: string;
+    radius?: string;
+    fontFamily?: string;
+}
+/**
+ * Initialises HyperUI — injects base CSS tokens and optionally applies
+ * theme overrides. Call once at app startup before rendering.
+ *
+ *   initHyperUI({ theme: "system", primaryColor: "#7c3aed" });
+ */
+export declare function initHyperUI(config?: HyperUIConfig): void;
+export declare function cn(...classes: (string | false | null | undefined)[]): string;
+export interface VNode {
+    type: string | symbol | ((...args: unknown[]) => unknown);
+    props: Record<string, unknown>;
+    children: unknown[];
+}
+export declare function h(type: VNode["type"], props: Record<string, unknown> | null, ...children: unknown[]): VNode;
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAOvD;AAMD,eAAO,MAAM,QAAQ,i1MA2LpB,CAAC;AAMF,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,aAAkB,GAAG,IAAI,CA8B5D;AAMD,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAE5E;AAMD,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,wBAAgB,CAAC,CACf,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,EACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,EACrC,GAAG,QAAQ,EAAE,OAAO,EAAE,GACrB,KAAK,CAIP"}

package/dist/theme/index.js

@@ -0,0 +1,258 @@
+/**
+ * HyperUI Design System
+ *
+ * All component styles flow from CSS custom properties defined here.
+ * Override any token to customise the entire system — no build step needed.
+ *
+ *   document.documentElement.style.setProperty("--hu-primary", "#7c3aed");
+ */
+// ---------------------------------------------------------------------------
+// CSS injection engine — each style block is injected at most once
+// ---------------------------------------------------------------------------
+const _injected = new Set();
+export function injectCSS(id, css) {
+    if (typeof document === "undefined" || _injected.has(id))
+        return;
+    const el = document.createElement("style");
+    el.setAttribute("data-hu", id);
+    el.textContent = css;
+    document.head.appendChild(el);
+    _injected.add(id);
+}
+// ---------------------------------------------------------------------------
+// Base reset + design tokens (inject once via initHyperUI)
+// ---------------------------------------------------------------------------
+export const BASE_CSS = `
+/* ------------------------------------------------------------------ */
+/* HyperUI Design Tokens                                               */
+/* ------------------------------------------------------------------ */
+:root {
+  /* Radius */
+  --hu-radius-xs:   3px;
+  --hu-radius-sm:   5px;
+  --hu-radius:      8px;
+  --hu-radius-md:   10px;
+  --hu-radius-lg:   14px;
+  --hu-radius-xl:   20px;
+  --hu-radius-full: 9999px;
+
+  /* Spacing (4-pt grid) */
+  --hu-space-1:  4px;
+  --hu-space-2:  8px;
+  --hu-space-3:  12px;
+  --hu-space-4:  16px;
+  --hu-space-5:  20px;
+  --hu-space-6:  24px;
+  --hu-space-8:  32px;
+  --hu-space-10: 40px;
+  --hu-space-12: 48px;
+  --hu-space-16: 64px;
+
+  /* Typography */
+  --hu-font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --hu-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  --hu-font-size-xs:   11px;
+  --hu-font-size-sm:   13px;
+  --hu-font-size-base: 14px;
+  --hu-font-size-md:   15px;
+  --hu-font-size-lg:   18px;
+  --hu-font-size-xl:   22px;
+  --hu-font-size-2xl:  28px;
+  --hu-font-size-3xl:  36px;
+  --hu-line-height: 1.5;
+  --hu-font-weight-normal:   400;
+  --hu-font-weight-medium:   500;
+  --hu-font-weight-semibold: 600;
+  --hu-font-weight-bold:     700;
+
+  /* Colours — Light */
+  --hu-bg:          #ffffff;
+  --hu-bg-2:        #f8fafc;
+  --hu-bg-3:        #f1f5f9;
+  --hu-bg-4:        #e8edf5;
+  --hu-border:      #e2e8f0;
+  --hu-border-2:    #cbd5e1;
+  --hu-text:        #0f172a;
+  --hu-text-2:      #475569;
+  --hu-text-3:      #94a3b8;
+  --hu-text-inv:    #ffffff;
+
+  /* Primary — Indigo */
+  --hu-primary:       #6366f1;
+  --hu-primary-dk:    #4f46e5;
+  --hu-primary-lt:    #818cf8;
+  --hu-primary-bg:    #eef2ff;
+  --hu-primary-text:  #ffffff;
+
+  /* Semantic */
+  --hu-success:     #22c55e;
+  --hu-success-bg:  #f0fdf4;
+  --hu-success-text:#15803d;
+  --hu-warning:     #f59e0b;
+  --hu-warning-bg:  #fffbeb;
+  --hu-warning-text:#92400e;
+  --hu-error:       #ef4444;
+  --hu-error-bg:    #fef2f2;
+  --hu-error-text:  #b91c1c;
+  --hu-info:        #3b82f6;
+  --hu-info-bg:     #eff6ff;
+  --hu-info-text:   #1d4ed8;
+
+  /* Shadows */
+  --hu-shadow-xs: 0 1px 2px rgb(0 0 0/6%);
+  --hu-shadow-sm: 0 1px 3px rgb(0 0 0/8%), 0 1px 2px rgb(0 0 0/4%);
+  --hu-shadow:    0 4px 6px -1px rgb(0 0 0/8%), 0 2px 4px -2px rgb(0 0 0/4%);
+  --hu-shadow-md: 0 10px 15px -3px rgb(0 0 0/8%), 0 4px 6px -4px rgb(0 0 0/4%);
+  --hu-shadow-lg: 0 20px 25px -5px rgb(0 0 0/8%), 0 8px 10px -6px rgb(0 0 0/4%);
+  --hu-shadow-xl: 0 25px 50px -12px rgb(0 0 0/20%);
+
+  /* Overlays */
+  --hu-overlay:     rgb(0 0 0/50%);
+
+  /* Transitions */
+  --hu-duration-fast:   100ms;
+  --hu-duration:        150ms;
+  --hu-duration-slow:   250ms;
+  --hu-ease:            cubic-bezier(0.4, 0, 0.2, 1);
+  --hu-ease-in:         cubic-bezier(0.4, 0, 1, 1);
+  --hu-ease-out:        cubic-bezier(0, 0, 0.2, 1);
+  --hu-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  /* Z-index */
+  --hu-z-dropdown:  1000;
+  --hu-z-sticky:    1020;
+  --hu-z-fixed:     1030;
+  --hu-z-backdrop:  1040;
+  --hu-z-modal:     1050;
+  --hu-z-popover:   1060;
+  --hu-z-tooltip:   1070;
+  --hu-z-toast:     1080;
+}
+
+/* Dark mode */
+[data-theme="dark"], .hu-dark {
+  --hu-bg:          #0a0a0f;
+  --hu-bg-2:        #111118;
+  --hu-bg-3:        #1a1a24;
+  --hu-bg-4:        #22222f;
+  --hu-border:      #2a2a38;
+  --hu-border-2:    #3a3a4a;
+  --hu-text:        #f0f0ff;
+  --hu-text-2:      #a0a0c0;
+  --hu-text-3:      #606080;
+  --hu-text-inv:    #0a0a0f;
+
+  --hu-primary:       #818cf8;
+  --hu-primary-dk:    #6366f1;
+  --hu-primary-lt:    #a5b4fc;
+  --hu-primary-bg:    #1e1b4b30;
+  --hu-primary-text:  #ffffff;
+
+  --hu-success:     #4ade80;
+  --hu-success-bg:  #052e16;
+  --hu-success-text:#86efac;
+  --hu-warning:     #fbbf24;
+  --hu-warning-bg:  #1c1500;
+  --hu-warning-text:#fde68a;
+  --hu-error:       #f87171;
+  --hu-error-bg:    #1f0505;
+  --hu-error-text:  #fca5a5;
+  --hu-info:        #60a5fa;
+  --hu-info-bg:     #030d1a;
+  --hu-info-text:   #93c5fd;
+
+  --hu-shadow-xs: 0 1px 2px rgb(0 0 0/30%);
+  --hu-shadow-sm: 0 1px 3px rgb(0 0 0/40%), 0 1px 2px rgb(0 0 0/24%);
+  --hu-shadow:    0 4px 6px -1px rgb(0 0 0/40%), 0 2px 4px -2px rgb(0 0 0/24%);
+  --hu-shadow-md: 0 10px 15px -3px rgb(0 0 0/40%), 0 4px 6px -4px rgb(0 0 0/24%);
+  --hu-shadow-lg: 0 20px 25px -5px rgb(0 0 0/40%), 0 8px 10px -6px rgb(0 0 0/24%);
+  --hu-shadow-xl: 0 25px 50px -12px rgb(0 0 0/60%);
+
+  --hu-overlay: rgb(0 0 0/70%);
+}
+
+/* Base reset */
+*, *::before, *::after { box-sizing: border-box; }
+[data-hu-root] {
+  font-family: var(--hu-font-sans);
+  font-size: var(--hu-font-size-base);
+  line-height: var(--hu-line-height);
+  color: var(--hu-text);
+  background: var(--hu-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Focus ring */
+.hu-focus:focus-visible {
+  outline: 2px solid var(--hu-primary);
+  outline-offset: 2px;
+}
+
+/* Screen-reader only */
+.hu-sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0;
+  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
+  white-space: nowrap; border: 0;
+}
+
+/* Animations */
+@keyframes hu-spin { to { transform: rotate(360deg); } }
+@keyframes hu-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
+@keyframes hu-ping { 75%,100%{transform:scale(2);opacity:0} }
+@keyframes hu-bounce { 0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)} 50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)} }
+@keyframes hu-fade-in { from{opacity:0} to{opacity:1} }
+@keyframes hu-fade-out { from{opacity:1} to{opacity:0} }
+@keyframes hu-slide-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
+@keyframes hu-slide-down { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
+@keyframes hu-slide-in-right { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }
+@keyframes hu-slide-in-left { from{opacity:0;transform:translateX(-100%)} to{opacity:1;transform:translateX(0)} }
+@keyframes hu-scale-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
+@keyframes hu-shimmer { from{background-position:-200% 0} to{background-position:200% 0} }
+`;
+/**
+ * Initialises HyperUI — injects base CSS tokens and optionally applies
+ * theme overrides. Call once at app startup before rendering.
+ *
+ *   initHyperUI({ theme: "system", primaryColor: "#7c3aed" });
+ */
+export function initHyperUI(config = {}) {
+    injectCSS("hu-base", BASE_CSS);
+    const root = typeof document !== "undefined" ? document.documentElement : null;
+    if (!root)
+        return;
+    root.setAttribute("data-hu-root", "");
+    // Apply custom overrides
+    if (config.primaryColor) {
+        root.style.setProperty("--hu-primary", config.primaryColor);
+    }
+    if (config.radius) {
+        root.style.setProperty("--hu-radius", config.radius);
+    }
+    if (config.fontFamily) {
+        root.style.setProperty("--hu-font-sans", config.fontFamily);
+    }
+    // Theme
+    const theme = config.theme ?? "system";
+    if (theme === "system") {
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        root.setAttribute("data-theme", mq.matches ? "dark" : "light");
+        mq.addEventListener("change", (e) => {
+            root.setAttribute("data-theme", e.matches ? "dark" : "light");
+        });
+    }
+    else {
+        root.setAttribute("data-theme", theme);
+    }
+}
+// ---------------------------------------------------------------------------
+// Utility — merge class names (handles undefined/false gracefully)
+// ---------------------------------------------------------------------------
+export function cn(...classes) {
+    return classes.filter(Boolean).join(" ");
+}
+export function h(type, props, ...children) {
+    const { children: propsChildren, ...rest } = props ?? {};
+    const allChildren = children.length > 0 ? children.flat() : (propsChildren ? (Array.isArray(propsChildren) ? propsChildren : [propsChildren]) : []);
+    return { type, props: rest, children: allChildren };
+}