@hyperpackai/hyperui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 HyperPack contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,82 @@
+# @hyperpackai/hyperui
+
+> Rich, accessible, enterprise-grade UI component library for Hyperion.
+
+## Install
+
+```sh
+npm install @hyperpackai/hyperui
+```
+
+## Quick start
+
+```ts
+import { initHyperUI, ThemeProvider, Button, Dialog, DataTable, useToast } from "@hyperpackai/hyperui";
+import { applyTheme, createTheme } from "@hyperpackai/hyperui/tokens";
+
+// Initialise with system dark mode
+initHyperUI({ theme: "system" });
+
+// Or apply a built-in theme preset
+applyTheme("compact");  // "default" | "compact" | "comfortable" | "ocean" | "forest" | "sunset" | "violet" | "monochrome" | "highContrast"
+
+// Or use the provider API with industry themes
+ThemeProvider({
+  theme: "banking",
+  colorMode: "system",
+  direction: "ltr",
+  children: App()
+});
+
+// Build a custom brand theme
+const myBrand = createTheme("default", { primaryColor: "#7c3aed", radius: "12px" });
+applyTheme(myBrand);
+```
+
+Industry presets: `banking`, `government`, `healthcare`, `retail`, `education`, `telecom`.
+
+## Components
+
+| Category | Components |
+|---|---|
+| Form | Form · FormField · FormSection · WizardForm · DynamicForm · ValidationEngine · Button · Label · Input · Textarea · Checkbox · Radio · Switch · Select · TextField · Autocomplete · Slider · Rating · FormControl |
+| Date & Time | Calendar · DatePicker · TimePicker · DateTimePicker · DateRangePicker |
+| Overlay | Dialog · Modal · Sheet · Drawer · Backdrop · Toast · Snackbar · Tooltip · Popover · DropdownMenu · Menu |
+| Layout | Box · Container · Grid · Stack · Paper · Card · PageLayout · DashboardLayout · SplitPane · ResizablePanel · Navbar · Sidebar · Breadcrumb · Pagination · List · ImageList |
+| Data | DataGrid · DataTable · VirtualTable · TreeGrid · PivotGrid · AdvancedFilters · SearchBuilder · DataExporter · DataImporter |
+| Charts | LineChart · BarChart · PieChart · AreaChart · RadarChart · HeatMap · GaugeChart · Sparkline · FinancialChart · CandlestickChart |
+| Enterprise | ApprovalFlow · AuditTrail · PermissionMatrix · RoleManager · FeatureFlags · TenantSelector · NotificationCenter · ActivityFeed · OrgChart · GanttChart · KanbanBoard · WorkflowDesigner · DocumentViewer |
+| AI | AIChat · AIForm · AIGrid · AIChart · AIDashboard · AIInsights · AIWizard · AIReport |
+| Feedback | Alert · Badge · Avatar · AvatarGroup · Chip · Spinner · Skeleton · Progress |
+| Navigation | Tabs · Accordion · Stepper · Timeline · TreeView |
+| Typography | Typography · Link · Divider |
+
+## Enterprise Architecture
+
+HyperUI's production roadmap, package split, component inventory, accessibility standards, testing standards, AI-native patterns, A2UI architecture, and release gates are defined in [ARCHITECTURE.md](./ARCHITECTURE.md).
+
+Per-component implementation contracts are defined in [COMPONENT_BLUEPRINT.md](./COMPONENT_BLUEPRINT.md).
+
+## Design Token System
+
+```ts
+import { tokens, useTokens, tokenToCSS, exportTokens } from "@hyperpackai/hyperui/tokens";
+
+tokens.colors.indigo[500]      // "#6366f1"
+tokens.spacing[4]              // "16px"
+tokens.fontSize.xl[0]          // "20px"
+
+// Reactive theme in components
+const { isDark } = useTokens();
+
+// SSR head injection
+const css = tokenToCSS(myBrand);
+
+// Export for Figma / Style Dictionary
+const json = exportTokens();
+```
+
+## Requirements
+
+Node.js ≥ 20 (build) · Modern browser (runtime)
+Peer dependency: `@hyperpackai/hyperion ^0.1.0`

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

@@ -0,0 +1,17 @@
+import { type VNode } from "../../theme/index.js";
+export interface AccordionItem {
+    id: string;
+    title: string;
+    content: unknown;
+    icon?: unknown;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    multiple?: boolean;
+    defaultOpen?: string[];
+    variant?: "default" | "ghost";
+    class?: string;
+}
+export declare function Accordion(props: AccordionProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAqCtD"}

package/dist/components/Accordion/index.js

@@ -0,0 +1,46 @@
+import { signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+const ACCORDION_CSS = `
+.hu-accordion { border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md); overflow: hidden; }
+.hu-accordion-item { border-bottom: 1px solid var(--hu-border); }
+.hu-accordion-item:last-child { border-bottom: none; }
+.hu-accordion-trigger {
+  display: flex; align-items: center; justify-content: space-between; width: 100%;
+  padding: var(--hu-space-4) var(--hu-space-5); background: transparent; border: none;
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium); color: var(--hu-text);
+  cursor: pointer; text-align: left; transition: background var(--hu-duration) var(--hu-ease);
+}
+.hu-accordion-trigger:hover { background: var(--hu-bg-2); }
+.hu-accordion-trigger[aria-expanded="true"] { color: var(--hu-primary); }
+.hu-accordion-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--hu-text-3); transition: transform var(--hu-duration) var(--hu-ease); }
+.hu-accordion-trigger[aria-expanded="true"] .hu-accordion-icon { transform: rotate(180deg); color: var(--hu-primary); }
+.hu-accordion-content { padding: 0 var(--hu-space-5) var(--hu-space-4); font-size: var(--hu-font-size-sm); color: var(--hu-text-2); line-height: 1.6; animation: hu-slide-down var(--hu-duration-fast) var(--hu-ease); }
+.hu-accordion--ghost { border: none; }
+.hu-accordion--ghost .hu-accordion-item { border-bottom: 1px solid var(--hu-border); }
+.hu-accordion--ghost .hu-accordion-item:last-child { border-bottom: none; }
+`;
+export function Accordion(props) {
+    injectCSS("hu-accordion", ACCORDION_CSS);
+    const { items, multiple = false, defaultOpen = [], variant = "default" } = props;
+    const open = signal(defaultOpen);
+    const toggle = (id) => {
+        const current = open.value;
+        if (multiple) {
+            open.value = current.includes(id) ? current.filter((i) => i !== id) : [...current, id];
+        }
+        else {
+            open.value = current.includes(id) ? [] : [id];
+        }
+    };
+    const chevronSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>`;
+    return h("div", { class: cn("hu-accordion", variant !== "default" && `hu-accordion--${variant}`, props.class) }, ...items.map((item) => {
+        const isOpen = () => open.value.includes(item.id);
+        return h("div", { key: item.id, class: "hu-accordion-item" }, h("button", {
+            class: "hu-accordion-trigger",
+            "aria-expanded": () => isOpen() ? "true" : "false",
+            "aria-controls": `accordion-${item.id}`,
+            disabled: item.disabled,
+            onClick: () => toggle(item.id)
+        }, h("span", { style: "display:flex;align-items:center;gap:8px;" }, item.icon && h("span", {}, item.icon), item.title), h("span", { class: "hu-accordion-icon", innerHTML: chevronSVG, "aria-hidden": "true" })), () => isOpen() ? h("div", { id: `accordion-${item.id}`, class: "hu-accordion-content" }, item.content) : null);
+    }));
+}

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

@@ -0,0 +1,13 @@
+import { type VNode } from "../../theme/index.js";
+export interface AlertProps {
+    type?: "info" | "success" | "warning" | "error";
+    title?: string;
+    description?: string;
+    icon?: unknown | false;
+    onClose?: () => void;
+    closeLabel?: string;
+    class?: string;
+    children?: unknown;
+}
+export declare function Alert(props: AlertProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAoCpE,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAoB9C"}

package/dist/components/Alert/index.js

@@ -0,0 +1,46 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const ALERT_CSS = `
+.hu-alert {
+  display: flex; align-items: flex-start; gap: var(--hu-space-3);
+  padding: var(--hu-space-4); border-radius: var(--hu-radius-lg);
+  border: 1px solid; font-size: var(--hu-font-size-sm);
+  box-shadow: var(--hu-shadow-xs);
+}
+.hu-alert--info    { background: var(--hu-info-bg);    border-color: var(--hu-info);    color: var(--hu-info-text); }
+.hu-alert--success { background: var(--hu-success-bg); border-color: var(--hu-success); color: var(--hu-success-text); }
+.hu-alert--warning { background: var(--hu-warning-bg); border-color: var(--hu-warning); color: var(--hu-warning-text); }
+.hu-alert--error   { background: var(--hu-error-bg);   border-color: var(--hu-error);   color: var(--hu-error-text); }
+.hu-alert-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
+.hu-alert-content { flex: 1; min-width: 0; }
+.hu-alert-title { font-weight: var(--hu-font-weight-semibold); margin-bottom: 2px; }
+.hu-alert-desc { opacity: .85; line-height: 1.45; }
+.hu-alert-close {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--hu-radius-md);
+  background: color-mix(in srgb, currentColor 6%, transparent);
+  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
+  color: currentColor; cursor: pointer; opacity: .72; padding: 0; flex-shrink: 0;
+  transition: background var(--hu-duration) var(--hu-ease), border-color var(--hu-duration) var(--hu-ease), opacity var(--hu-duration) var(--hu-ease), transform var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-alert-close:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); border-color: color-mix(in srgb, currentColor 24%, transparent); transform: translateY(-1px); }
+.hu-alert-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+`;
+const ALERT_ICONS = {
+    info: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"/></svg>`,
+    success: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"/></svg>`,
+    warning: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"/></svg>`,
+    error: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"/></svg>`
+};
+export function Alert(props) {
+    injectCSS("hu-alert", ALERT_CSS);
+    const { type = "info", title, description, icon, children } = props;
+    const iconContent = icon === false ? null : icon ?? h("span", { innerHTML: ALERT_ICONS[type], "aria-hidden": "true" });
+    const closeSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 2l12 12M14 2L2 14"/></svg>`;
+    return h("div", { class: cn("hu-alert", `hu-alert--${type}`, props.class), role: "alert" }, iconContent && h("span", { class: "hu-alert-icon" }, iconContent), h("div", { class: "hu-alert-content" }, title && h("div", { class: "hu-alert-title" }, title), (description || children) && h("div", { class: "hu-alert-desc" }, description ?? children)), props.onClose && h("button", {
+        class: "hu-alert-close",
+        type: "button",
+        onClick: props.onClose,
+        "aria-label": props.closeLabel ?? "Dismiss alert",
+        innerHTML: closeSVG
+    }));
+}

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

@@ -0,0 +1,19 @@
+import { type VNode } from "../../theme/index.js";
+export type AppBarPosition = "fixed" | "sticky" | "static" | "absolute" | "relative";
+export type AppBarColor = "primary" | "default" | "dark" | "transparent" | "inherit";
+export interface AppBarProps {
+    position?: AppBarPosition;
+    color?: AppBarColor;
+    elevation?: 0 | 1 | 2 | 3 | 4;
+    class?: string;
+    children?: unknown;
+}
+export declare function AppBar(props: AppBarProps): VNode;
+export interface ToolbarProps {
+    dense?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Toolbar(props: ToolbarProps): VNode;
+export declare function ToolbarSpacer(): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAoCpE,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AACrF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,CAAC;AAErF,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,SAAS,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAMhD;AAED,MAAM,WAAW,YAAY;IAAG,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AACrF,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAGlD;AAED,wBAAgB,aAAa,IAAI,KAAK,CAErC"}

package/dist/components/AppBar/index.js

@@ -0,0 +1,48 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-appbar {
+  display: flex; align-items: center; width: 100%; box-sizing: border-box;
+  font-family: var(--hu-font-sans); z-index: 100;
+  transition: box-shadow var(--hu-duration) var(--hu-ease), background var(--hu-duration) var(--hu-ease);
+}
+.hu-appbar--fixed    { position: fixed; top: 0; left: 0; right: 0; }
+.hu-appbar--sticky   { position: sticky; top: 0; }
+.hu-appbar--static   { position: static; }
+.hu-appbar--absolute { position: absolute; top: 0; left: 0; right: 0; }
+.hu-appbar--relative { position: relative; }
+
+.hu-appbar--primary  { background: var(--hu-primary); color: var(--hu-primary-text); }
+.hu-appbar--default  { background: var(--hu-bg); color: var(--hu-text); border-bottom: 1px solid var(--hu-border); }
+.hu-appbar--dark     { background: #111827; color: #f9fafb; }
+.hu-appbar--transparent { background: transparent; box-shadow: none; }
+.hu-appbar--inherit  { background: inherit; color: inherit; }
+
+.hu-appbar--elevation-0 { box-shadow: none; }
+.hu-appbar--elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08); }
+.hu-appbar--elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,.15), 0 2px 4px rgba(0,0,0,.1); }
+.hu-appbar--elevation-3 { box-shadow: 0 8px 16px rgba(0,0,0,.18), 0 3px 6px rgba(0,0,0,.12); }
+.hu-appbar--elevation-4 { box-shadow: 0 16px 32px rgba(0,0,0,.2), 0 6px 12px rgba(0,0,0,.14); }
+
+.hu-toolbar {
+  display: flex; align-items: center; gap: var(--hu-space-2);
+  width: 100%; min-height: 56px;
+  padding-left: var(--hu-space-4); padding-right: var(--hu-space-4);
+}
+.hu-toolbar--dense { min-height: 48px; }
+.hu-toolbar--spacer { flex: 1; }
+.hu-toolbar__title { font-size: var(--hu-font-size-md); font-weight: var(--hu-font-weight-semibold); flex: 1; }
+`;
+export function AppBar(props) {
+    injectCSS("hu-appbar", CSS);
+    const { position = "sticky", color = "default", elevation = 1 } = props;
+    return h("header", {
+        class: cn("hu-appbar", `hu-appbar--${position}`, `hu-appbar--${color}`, `hu-appbar--elevation-${elevation}`, props.class)
+    }, props.children);
+}
+export function Toolbar(props) {
+    injectCSS("hu-appbar", CSS);
+    return h("div", { class: cn("hu-toolbar", props.dense && "hu-toolbar--dense", props.class) }, props.children);
+}
+export function ToolbarSpacer() {
+    return h("span", { class: "hu-toolbar__spacer" });
+}

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

@@ -0,0 +1,8 @@
+import { type VNode } from "../../theme/index.js";
+export interface AspectRatioProps {
+    ratio?: number | `${number}/${number}` | `${number} / ${number}`;
+    class?: string;
+    children?: unknown;
+}
+export declare function AspectRatio(props?: AspectRatioProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AspectRatio/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmBpE,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,GAAG,MAAM,IAAI,MAAM,EAAE,GAAG,GAAG,MAAM,MAAM,MAAM,EAAE,CAAC;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAQD,wBAAgB,WAAW,CAAC,KAAK,GAAE,gBAAqB,GAAG,KAAK,CAQ/D"}

package/dist/components/AspectRatio/index.js

@@ -0,0 +1,32 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const ASPECT_RATIO_CSS = `
+.hu-aspect-ratio {
+  position: relative;
+  width: 100%;
+  aspect-ratio: var(--hu-aspect-ratio, 16 / 9);
+  overflow: hidden;
+}
+.hu-aspect-ratio > img,
+.hu-aspect-ratio > video,
+.hu-aspect-ratio > iframe,
+.hu-aspect-ratio > canvas {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+`;
+function ratioValue(value) {
+    if (value === undefined)
+        return "16 / 9";
+    if (typeof value === "number")
+        return String(value);
+    return value.replace(/\s+/g, " ");
+}
+export function AspectRatio(props = {}) {
+    injectCSS("hu-aspect-ratio", ASPECT_RATIO_CSS);
+    const ratio = ratioValue(props.ratio);
+    return h("div", {
+        class: cn("hu-aspect-ratio", props.class),
+        style: `--hu-aspect-ratio:${ratio};aspect-ratio:${ratio}`
+    }, props.children);
+}

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

@@ -0,0 +1,21 @@
+import { type VNode } from "../../theme/index.js";
+export interface AutocompleteOption {
+    label: string;
+    value: string;
+    group?: string;
+    disabled?: boolean;
+}
+export interface AutocompleteProps {
+    options: AutocompleteOption[];
+    value?: string;
+    placeholder?: string;
+    label?: string;
+    multiple?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    noOptionsText?: string;
+    onChange?: (value: string | null) => void;
+    class?: string;
+}
+export declare function Autocomplete(props: AutocompleteProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqDpE,MAAM,WAAW,kBAAkB;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAExG,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CA+D5D"}

package/dist/components/Autocomplete/index.js

@@ -0,0 +1,94 @@
+import { signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+const AUTOCOMPLETE_CSS = `
+.hu-autocomplete { position: relative; width: 100%; display: flex; flex-direction: column; gap: 6px; }
+.hu-autocomplete__label { color: var(--hu-text); font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); line-height: 1.35; }
+.hu-autocomplete__input-wrap { position: relative; }
+.hu-autocomplete__input {
+  width: 100%; min-height: 40px; padding: 9px 42px 9px 12px;
+  font-size: var(--hu-font-size-sm); font-family: var(--hu-font-sans);
+  background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2)); color: var(--hu-text);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  outline: none; box-sizing: border-box;
+  transition: border-color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), background var(--hu-duration) var(--hu-ease);
+  box-shadow: var(--hu-shadow-xs);
+}
+.hu-autocomplete__input::placeholder { color: var(--hu-text-3); }
+.hu-autocomplete__input:hover:not(:disabled) { border-color: color-mix(in srgb, var(--hu-primary) 35%, var(--hu-border-2)); }
+.hu-autocomplete__input:focus { border-color: var(--hu-primary); background: var(--hu-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-primary) 18%, transparent), var(--hu-shadow-sm); }
+.hu-autocomplete__input:disabled { opacity: .55; cursor: not-allowed; background: var(--hu-bg-3); }
+.hu-autocomplete__arrow {
+  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
+  color: var(--hu-text-3); pointer-events: none; font-size: 12px; transition: transform var(--hu-duration);
+}
+.hu-autocomplete--open .hu-autocomplete__arrow { transform: translateY(-50%) rotate(180deg); }
+.hu-autocomplete__clear {
+  position: absolute; right: 32px; top: 50%; transform: translateY(-50%);
+  width: 22px; height: 22px; display: inline-grid; place-items: center;
+  background: var(--hu-bg-3); border: 1px solid var(--hu-border); border-radius: var(--hu-radius-full);
+  cursor: pointer; color: var(--hu-text-2); font-size: 14px; line-height: 1; padding: 0;
+}
+.hu-autocomplete__clear:hover { color: var(--hu-text); border-color: var(--hu-border-2); }
+.hu-autocomplete__input:has(+ .hu-autocomplete__clear) { padding-right: 68px; }
+.hu-autocomplete__listbox-wrap {
+  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: var(--hu-z-popover);
+  padding: 4px; background: var(--hu-bg); border: 1px solid color-mix(in srgb, var(--hu-border) 82%, var(--hu-primary));
+  border-radius: var(--hu-radius-lg); box-shadow: var(--hu-shadow-xl);
+}
+.hu-autocomplete__listbox {
+  max-height: 260px; overflow-y: auto; padding: 0; margin: 0; list-style: none; scrollbar-width: thin;
+}
+.hu-autocomplete__option {
+  padding: 9px 10px; cursor: pointer; border-radius: var(--hu-radius);
+  font-size: var(--hu-font-size-sm); color: var(--hu-text); display: flex; align-items: center; gap: var(--hu-space-2);
+  transition: background var(--hu-duration-fast) var(--hu-ease), color var(--hu-duration-fast) var(--hu-ease);
+}
+.hu-autocomplete__option:hover, .hu-autocomplete__option--focused { background: var(--hu-bg-3); }
+.hu-autocomplete__option--selected { background: var(--hu-primary-bg); color: var(--hu-primary); font-weight: var(--hu-font-weight-semibold); }
+.hu-autocomplete__option--disabled { opacity: .5; cursor: not-allowed; }
+.hu-autocomplete__check { margin-inline-start: auto; color: var(--hu-primary); font-size: 12px; }
+.hu-autocomplete__no-options { padding: var(--hu-space-5); font-size: var(--hu-font-size-sm); color: var(--hu-text-2); text-align: center; }
+.hu-autocomplete__group-label { padding: var(--hu-space-2) var(--hu-space-3); font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text-3); text-transform: uppercase; letter-spacing: .06em; }
+`;
+export function Autocomplete(props) {
+    injectCSS("hu-autocomplete", AUTOCOMPLETE_CSS);
+    const { options, placeholder, label, clearable, disabled, noOptionsText = "No options", onChange } = props;
+    const inputVal = signal(props.value ? (options.find(o => o.value === props.value)?.label ?? "") : "");
+    const isOpen = signal(false);
+    const selected = signal(props.value ?? "");
+    const filtered = () => options.filter(o => !inputVal.value || o.label.toLowerCase().includes(inputVal.value.toLowerCase()));
+    return h("div", {
+        class: cn("hu-autocomplete", isOpen.value && "hu-autocomplete--open", props.class)
+    }, label && h("label", { class: "hu-autocomplete__label" }, label), h("div", { class: "hu-autocomplete__input-wrap" }, h("input", {
+        class: "hu-autocomplete__input",
+        value: inputVal.value, placeholder, disabled,
+        onFocus: () => { isOpen.value = true; },
+        onInput: (e) => { inputVal.value = e.target.value; isOpen.value = true; },
+        onBlur: () => setTimeout(() => { isOpen.value = false; }, 150)
+    }), clearable && selected.value && h("button", {
+        class: "hu-autocomplete__clear",
+        type: "button",
+        onMouseDown: (e) => {
+            e.preventDefault();
+            selected.value = "";
+            inputVal.value = "";
+            onChange?.(null);
+        }
+    }, "×"), h("span", { class: "hu-autocomplete__arrow" }, "▾")), isOpen.value && h("div", { class: "hu-autocomplete__listbox-wrap" }, h("ul", { class: "hu-autocomplete__listbox", role: "listbox" }, filtered().length === 0
+        ? h("li", { class: "hu-autocomplete__no-options" }, noOptionsText)
+        : filtered().map(opt => h("li", {
+            class: cn("hu-autocomplete__option", selected.value === opt.value && "hu-autocomplete__option--selected", opt.disabled && "hu-autocomplete__option--disabled"),
+            role: "option",
+            "aria-selected": selected.value === opt.value,
+            "aria-disabled": opt.disabled ? "true" : undefined,
+            onMouseDown: (e) => {
+                e.preventDefault();
+                if (opt.disabled)
+                    return;
+                selected.value = opt.value;
+                inputVal.value = opt.label;
+                isOpen.value = false;
+                onChange?.(opt.value);
+            }
+        }, opt.label, selected.value === opt.value && h("span", { class: "hu-autocomplete__check", "aria-hidden": "true" }, "✓"))))));
+}

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

@@ -0,0 +1,12 @@
+import { type VNode } from "../../theme/index.js";
+export interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    shape?: "circle" | "square";
+    color?: string;
+    class?: string;
+}
+export declare function Avatar(props: AvatarProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAehD"}

package/dist/components/Avatar/index.js

@@ -0,0 +1,32 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const AVATAR_CSS = `
+.hu-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: var(--hu-radius-full); overflow: hidden; flex-shrink: 0;
+  background: var(--hu-primary-bg); color: var(--hu-primary);
+  font-weight: var(--hu-font-weight-semibold); user-select: none;
+}
+.hu-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.hu-avatar--xs  { width: 24px; height: 24px; font-size: 10px; }
+.hu-avatar--sm  { width: 32px; height: 32px; font-size: 12px; }
+.hu-avatar--md  { width: 40px; height: 40px; font-size: 14px; }
+.hu-avatar--lg  { width: 48px; height: 48px; font-size: 16px; }
+.hu-avatar--xl  { width: 64px; height: 64px; font-size: 22px; }
+.hu-avatar--2xl { width: 80px; height: 80px; font-size: 28px; }
+.hu-avatar--square { border-radius: var(--hu-radius-md); }
+.hu-avatar-group { display: flex; }
+.hu-avatar-group .hu-avatar { border: 2px solid var(--hu-bg); margin-left: -8px; }
+.hu-avatar-group .hu-avatar:first-child { margin-left: 0; }
+`;
+export function Avatar(props) {
+    injectCSS("hu-avatar", AVATAR_CSS);
+    const { src, alt, name, size = "md", shape = "circle" } = props;
+    const initials = name
+        ? name.split(" ").slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("")
+        : "?";
+    return h("span", {
+        class: cn("hu-avatar", `hu-avatar--${size}`, shape === "square" && "hu-avatar--square", props.class),
+        style: props.color ? `background: ${props.color}20; color: ${props.color}` : undefined,
+        "aria-label": alt ?? name
+    }, src ? h("img", { src, alt: alt ?? name ?? "", loading: "lazy" }) : initials);
+}

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

@@ -0,0 +1,9 @@
+import { type VNode } from "../../theme/index.js";
+export interface AvatarGroupProps {
+    max?: number;
+    size?: "sm" | "md" | "lg" | "xl";
+    class?: string;
+    children?: unknown[];
+}
+export declare function AvatarGroup(props: AvatarGroupProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AvatarGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAcpE,MAAM,WAAW,gBAAgB;IAC/B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;CACtB;AAID,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAa1D"}

package/dist/components/AvatarGroup/index.js

@@ -0,0 +1,24 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+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/components/Backdrop/index.d.ts

@@ -0,0 +1,10 @@
+import { type VNode } from "../../theme/index.js";
+export interface BackdropProps {
+    open: boolean;
+    invisible?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function Backdrop(props: BackdropProps): VNode | null;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Backdrop/index.js

@@ -0,0 +1,25 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { renderInPortal } from "../../portal.js";
+const CSS = `
+.hu-backdrop {
+  position: fixed; inset: 0; z-index: var(--hu-z-backdrop);
+  background: var(--hu-overlay);
+  display: flex; align-items: center; justify-content: center;
+  transition: opacity var(--hu-duration) var(--hu-ease);
+}
+.hu-backdrop--invisible { background: transparent; }
+.hu-backdrop--enter { opacity: 0; animation: hu-backdrop-in var(--hu-duration) var(--hu-ease) forwards; }
+.hu-backdrop--exit  { animation: hu-backdrop-out var(--hu-duration) var(--hu-ease) forwards; }
+@keyframes hu-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
+@keyframes hu-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+`;
+export function Backdrop(props) {
+    injectCSS("hu-backdrop", CSS);
+    if (!props.open)
+        return null;
+    return renderInPortal(h("div", {
+        class: cn("hu-backdrop", props.invisible && "hu-backdrop--invisible", props.class),
+        onClick: props.onClick,
+        "aria-hidden": "true"
+    }, props.children), "backdrop");
+}

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

@@ -0,0 +1,10 @@
+import { type VNode } from "../../theme/index.js";
+export interface BadgeProps {
+    variant?: "default" | "primary" | "success" | "warning" | "error" | "info" | "solid-primary" | "solid-success" | "solid-error";
+    size?: "xs" | "sm" | "md" | "lg";
+    dot?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Badge(props: BadgeProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAyBpE,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,eAAe,GAAG,eAAe,GAAG,aAAa,CAAC;IAC/H,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAM9C"}