@hyperpackai/hyperui 0.1.0 → 0.3.0

package/README.md

@@ -1,82 +1,90 @@
-# @hyperpackai/hyperui
+# HyperUI
 
-> Rich, accessible, enterprise-grade UI component library for Hyperion.
+Enterprise-ready component library with 50+ accessible, responsive components.
 
-## Install
+[![npm version](https://img.shields.io/npm/v/@hyperpackai/hyperui)](https://www.npmjs.com/package/@hyperpackai/hyperui)
+[![npm downloads](https://img.shields.io/npm/dm/@hyperpackai/hyperui)](https://www.npmjs.com/package/@hyperpackai/hyperui)
 
-```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" });
+## Features
 
-// Or apply a built-in theme preset
-applyTheme("compact");  // "default" | "compact" | "comfortable" | "ocean" | "forest" | "sunset" | "violet" | "monochrome" | "highContrast"
+- **50+ Components** — Buttons, forms, modals, tables, data grids, and more
+- **WCAG 2.1 AAA** — Full accessibility compliance
+- **Responsive Design** — Mobile-first, works on all screen sizes
+- **Theme-aware** — Support for light, dark, and custom themes
+- **Type-safe** — Full TypeScript support
+- **Enterprise Features** — Data tables, bulk actions, role-based UI, notifications
+- **Zero Configuration** — Works out of the box with sensible defaults
 
-// Or use the provider API with industry themes
-ThemeProvider({
-  theme: "banking",
-  colorMode: "system",
-  direction: "ltr",
-  children: App()
-});
+## Installation
 
-// Build a custom brand theme
-const myBrand = createTheme("default", { primaryColor: "#7c3aed", radius: "12px" });
-applyTheme(myBrand);
+```bash
+npm i @hyperpackai/hyperui
 ```
 
-Industry presets: `banking`, `government`, `healthcare`, `retail`, `education`, `telecom`.
+## Usage
 
-## Components
+```tsx
+import { Button, Card, Input } from "@hyperpackai/hyperui";
 
-| 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
+export function App() {
+  return (
+    <Card>
+      <h1>Hello World</h1>
+      <Input placeholder="Enter text..." />
+      <Button>Submit</Button>
+    </Card>
+  );
+}
+```
 
-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).
+## Component Categories
+
+- **Buttons & Actions** — Button, ButtonGroup, FAB, ToggleButton
+- **Form Controls** — Input, Select, Checkbox, Radio, Textarea, Slider
+- **Data Display** — Card, Table, DataGrid, List, Avatar, Badge
+- **Feedback** — Alert, Dialog, Toast, Snackbar, Progress
+- **Navigation** — Navbar, Sidebar, Breadcrumb, Pagination, Tabs
+- **Overlay** — Modal, Drawer, Popover, Dropdown, Menu
+- **Layout** — Stack, Grid, Container, Box, Paper
+- **AI Components** — AI chat, suggestions, completions
+
+## Theming
+
+```tsx
+import { ThemeProvider, useTheme } from "@hyperpackai/hyperui";
+
+export function App() {
+  return (
+    <ThemeProvider theme="dark">
+      <MyApp />
+    </ThemeProvider>
+  );
+}
+```
 
-Per-component implementation contracts are defined in [COMPONENT_BLUEPRINT.md](./COMPONENT_BLUEPRINT.md).
+## Customization
 
-## Design Token System
+All components support customization through CSS variables and theme config.
 
-```ts
-import { tokens, useTokens, tokenToCSS, exportTokens } from "@hyperpackai/hyperui/tokens";
+## Documentation
 
-tokens.colors.indigo[500]      // "#6366f1"
-tokens.spacing[4]              // "16px"
-tokens.fontSize.xl[0]          // "20px"
+- [Component Library](https://hyperpack.dev/docs/hyperui/components)
+- [Theming Guide](https://hyperpack.dev/docs/hyperui/theming)
+- [Component Gallery](https://hyperpack.dev/docs)
 
-// Reactive theme in components
-const { isDark } = useTokens();
+## Release Readiness
 
-// SSR head injection
-const css = tokenToCSS(myBrand);
+HyperUI owns its benchmark baselines and release gate. Before publishing
+HyperUI-facing changes, run:
 
-// Export for Figma / Style Dictionary
-const json = exportTokens();
+```bash
+npm run release:gate:hyperui
 ```
 
-## Requirements
+The gate builds HyperUI, runs API/accessibility/keyboard/theme tests, enforces
+Node and Chromium benchmark budgets, checks the HyperDocs bundle size, and
+captures HyperDocs visual smoke screenshots.
+
+## License
 
-Node.js ≥ 20 (build) · Modern browser (runtime)
-Peer dependency: `@hyperpackai/hyperion ^0.1.0`
+MIT

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

@@ -1,3 +1,4 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface AccordionItem {
     id: string;
@@ -9,7 +10,12 @@ export interface AccordionItem {
 export interface AccordionProps {
     items: AccordionItem[];
     multiple?: boolean;
+    openItems?: string[] | Signal<string[]>;
+    value?: string[] | Signal<string[]>;
     defaultOpen?: string[];
+    defaultValue?: string[];
+    onChange?: (openItems: string[]) => void;
+    onValueChange?: (openItems: string[]) => void;
     variant?: "default" | "ghost";
     class?: string;
 }

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,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,SAAS,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAmFtD"}

package/dist/components/Accordion/index.js

@@ -21,26 +21,82 @@ const ACCORDION_CSS = `
 `;
 export function Accordion(props) {
     injectCSS("hu-accordion", ACCORDION_CSS);
-    const { items, multiple = false, defaultOpen = [], variant = "default" } = props;
-    const open = signal(defaultOpen);
+    const { items, multiple = false, variant = "default", onChange, onValueChange } = props;
+    const uncontrolledOpen = signal(props.defaultValue ?? props.defaultOpen ?? []);
+    const controlledSignal = getStringArraySignalProp(props.value) ?? getStringArraySignalProp(props.openItems);
+    const controlledValue = Array.isArray(props.value) ? props.value : Array.isArray(props.openItems) ? props.openItems : undefined;
+    const controlled = controlledSignal != null || controlledValue !== undefined;
+    const getOpenItems = () => controlledSignal?.value ?? controlledValue ?? uncontrolledOpen.value;
+    const setOpenItems = (next) => {
+        if (!controlled)
+            uncontrolledOpen.value = next;
+        if (controlledSignal)
+            controlledSignal.value = next;
+        onChange?.(next);
+        onValueChange?.(next);
+    };
     const toggle = (id) => {
-        const current = open.value;
+        const current = getOpenItems();
+        let next;
         if (multiple) {
-            open.value = current.includes(id) ? current.filter((i) => i !== id) : [...current, id];
+            next = current.includes(id) ? current.filter((i) => i !== id) : [...current, id];
         }
         else {
-            open.value = current.includes(id) ? [] : [id];
+            next = current.includes(id) ? [] : [id];
         }
+        setOpenItems(next);
+    };
+    const focusTrigger = (id, event) => {
+        const root = event.currentTarget;
+        const next = root.querySelector(`#accordion-trigger-${cssEscape(id)}`);
+        next?.focus();
+    };
+    const handleKeyDown = (event) => {
+        const enabled = items.filter((item) => !item.disabled);
+        if (enabled.length === 0)
+            return;
+        const currentButton = event.target;
+        const currentId = currentButton.getAttribute("data-accordion-id");
+        const currentIndex = Math.max(0, enabled.findIndex((item) => item.id === currentId));
+        let nextIndex = currentIndex;
+        if (event.key === "ArrowDown")
+            nextIndex = (currentIndex + 1) % enabled.length;
+        else if (event.key === "ArrowUp")
+            nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+        else if (event.key === "Home")
+            nextIndex = 0;
+        else if (event.key === "End")
+            nextIndex = enabled.length - 1;
+        else
+            return;
+        event.preventDefault();
+        focusTrigger(enabled[nextIndex].id, event);
     };
-    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);
+    const chevronIcon = h("svg", {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "1.5",
+        "aria-hidden": "true"
+    }, h("path", { d: "M4 6l4 4 4-4" }));
+    return h("div", { class: cn("hu-accordion", variant !== "default" && `hu-accordion--${variant}`, props.class), onKeyDown: handleKeyDown }, ...items.map((item) => {
+        const isOpen = () => getOpenItems().includes(item.id);
         return h("div", { key: item.id, class: "hu-accordion-item" }, h("button", {
+            id: `accordion-trigger-${item.id}`,
             class: "hu-accordion-trigger",
+            "data-accordion-id": item.id,
             "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);
+        }, h("span", { style: "display:flex;align-items:center;gap:8px;" }, item.icon && h("span", {}, item.icon), item.title), h("span", { class: "hu-accordion-icon", "aria-hidden": "true" }, chevronIcon)), () => isOpen() ? h("div", { id: `accordion-${item.id}`, class: "hu-accordion-content", role: "region", "aria-labelledby": `accordion-trigger-${item.id}` }, item.content) : null);
     }));
 }
+function getStringArraySignalProp(value) {
+    return typeof value === "object" && value !== null && "peek" in value ? value : undefined;
+}
+function cssEscape(value) {
+    return typeof CSS !== "undefined" && typeof CSS.escape === "function"
+        ? CSS.escape(value)
+        : value.replace(/["\\#.;?+*~':!^$[\]()=>|/@]/g, "\\$&");
+}

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

@@ -1,3 +1,4 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface AutocompleteOption {
     label: string;
@@ -7,14 +8,23 @@ export interface AutocompleteOption {
 }
 export interface AutocompleteProps {
     options: AutocompleteOption[];
-    value?: string;
+    value?: string | Signal<string>;
+    defaultValue?: string;
     placeholder?: string;
     label?: string;
     multiple?: boolean;
     clearable?: boolean;
     disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    name?: string;
+    helper?: string;
+    error?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
     noOptionsText?: string;
-    onChange?: (value: string | null) => void;
+    onChange?: (value: string | null, option?: AutocompleteOption | null) => void;
+    onValueChange?: (value: string | null, option?: AutocompleteOption | null) => void;
     class?: string;
 }
 export declare function Autocomplete(props: AutocompleteProps): VNode;

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Autocomplete/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAyDpE,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,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,kBAAkB,GAAG,IAAI,KAAK,IAAI,CAAC;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,KAAK,CA2L5D"}

package/dist/components/Autocomplete/index.js

@@ -49,46 +49,170 @@ const AUTOCOMPLETE_CSS = `
 .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; }
+.hu-autocomplete__helper { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); line-height: 1.45; }
+.hu-autocomplete__error { font-size: var(--hu-font-size-xs); color: var(--hu-error); line-height: 1.45; }
+.hu-autocomplete--error .hu-autocomplete__input { border-color: var(--hu-error); }
+.hu-autocomplete--error .hu-autocomplete__input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-error) 18%, transparent), var(--hu-shadow-sm); }
 `;
+let autocompleteId = 0;
 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 { options, placeholder, label, clearable, disabled, required, helper, error, noOptionsText = "No options", onChange, onValueChange } = props;
+    const generatedId = props.id ?? `hu-autocomplete-${++autocompleteId}`;
+    const listboxId = `${generatedId}-listbox`;
+    const helperId = helper && !error ? `${generatedId}-helper` : undefined;
+    const errorId = error ? `${generatedId}-error` : undefined;
+    const describedBy = [props["aria-describedby"], errorId, helperId].filter(Boolean).join(" ") || undefined;
+    const valueSignal = getSignalProp(props.value);
+    const isControlled = typeof props.value === "string" || !!valueSignal;
+    const internalValue = signal(typeof props.value === "string" ? props.value : props.defaultValue ?? "");
+    const currentValue = () => valueSignal ? valueSignal.value : typeof props.value === "string" ? props.value : internalValue.value;
+    const optionForValue = (value) => options.find(o => o.value === value);
+    const inputVal = signal(optionForValue(currentValue())?.label ?? "");
     const isOpen = signal(false);
-    const selected = signal(props.value ?? "");
+    const activeIndex = signal(-1);
     const filtered = () => options.filter(o => !inputVal.value || o.label.toLowerCase().includes(inputVal.value.toLowerCase()));
+    const selectedValue = () => currentValue();
+    const activeOption = () => activeIndex.value >= 0 ? filtered()[activeIndex.value] : undefined;
+    const optionId = (opt) => `${generatedId}-option-${toIdPart(opt.value)}`;
+    const activeDescendant = () => {
+        const opt = activeOption();
+        return opt ? optionId(opt) : undefined;
+    };
+    const firstEnabledIndex = () => filtered().findIndex(opt => !opt.disabled);
+    const selectedIndex = () => {
+        const index = filtered().findIndex(opt => opt.value === selectedValue() && !opt.disabled);
+        return index >= 0 ? index : firstEnabledIndex();
+    };
+    const setOpen = (next) => {
+        isOpen.value = next;
+        if (next && activeIndex.value < 0)
+            activeIndex.value = selectedIndex();
+        if (!next)
+            activeIndex.value = -1;
+    };
+    const setValue = (value, option) => {
+        if (valueSignal)
+            valueSignal.value = value;
+        else if (!isControlled)
+            internalValue.value = value;
+        onChange?.(value || null, option);
+        onValueChange?.(value || null, option);
+    };
+    const selectOption = (opt) => {
+        if (!opt || opt.disabled)
+            return;
+        inputVal.value = opt.label;
+        setValue(opt.value, opt);
+        setOpen(false);
+    };
+    const clearSelection = () => {
+        inputVal.value = "";
+        setValue("", null);
+        setOpen(false);
+    };
+    const moveActive = (delta) => {
+        const items = filtered();
+        if (!items.length)
+            return;
+        let index = activeIndex.value;
+        for (let i = 0; i < items.length; i++) {
+            index = (index + delta + items.length) % items.length;
+            if (!items[index]?.disabled) {
+                activeIndex.value = index;
+                return;
+            }
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            if (!isOpen.value)
+                setOpen(true);
+            moveActive(e.key === "ArrowDown" ? 1 : -1);
+            return;
+        }
+        if (e.key === "Home" || e.key === "End") {
+            if (!isOpen.value)
+                return;
+            e.preventDefault();
+            const items = filtered();
+            const start = e.key === "Home" ? 0 : items.length - 1;
+            const step = e.key === "Home" ? 1 : -1;
+            for (let index = start; index >= 0 && index < items.length; index += step) {
+                if (!items[index]?.disabled) {
+                    activeIndex.value = index;
+                    break;
+                }
+            }
+            return;
+        }
+        if (e.key === "Enter" && isOpen.value) {
+            e.preventDefault();
+            selectOption(activeOption());
+            return;
+        }
+        if (e.key === "Escape") {
+            e.preventDefault();
+            setOpen(false);
+        }
+    };
     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: cn("hu-autocomplete", isOpen.value && "hu-autocomplete--open", error && "hu-autocomplete--error", props.class)
+    }, label && h("label", { class: "hu-autocomplete__label", for: generatedId }, label), h("div", { class: "hu-autocomplete__input-wrap" }, h("input", {
+        id: generatedId,
+        name: props.name,
         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", {
+        value: inputVal.value,
+        placeholder,
+        disabled,
+        required,
+        role: "combobox",
+        autocomplete: "off",
+        "aria-autocomplete": "list",
+        "aria-controls": listboxId,
+        "aria-expanded": isOpen.value ? "true" : "false",
+        "aria-activedescendant": activeDescendant(),
+        "aria-invalid": error ? "true" : undefined,
+        "aria-describedby": describedBy,
+        "aria-label": props["aria-label"],
+        onFocus: () => { setOpen(true); },
+        onInput: (e) => {
+            inputVal.value = e.target.value;
+            activeIndex.value = firstEnabledIndex();
+            setOpen(true);
+        },
+        onKeyDown: handleKeyDown,
+        onBlur: () => setTimeout(() => { setOpen(false); }, 150)
+    }), clearable && selectedValue() && h("button", {
         class: "hu-autocomplete__clear",
         type: "button",
+        "aria-label": "Clear selection",
         onMouseDown: (e) => {
             e.preventDefault();
-            selected.value = "";
-            inputVal.value = "";
-            onChange?.(null);
+            clearSelection();
         }
-    }, "×"), 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("span", { class: "hu-autocomplete__arrow" }, "▾")), isOpen.value && h("div", { class: "hu-autocomplete__listbox-wrap" }, h("ul", { id: listboxId, 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"),
+        : filtered().map((opt, index) => h("li", {
+            id: optionId(opt),
+            class: cn("hu-autocomplete__option", selectedValue() === opt.value && "hu-autocomplete__option--selected", activeIndex.value === index && "hu-autocomplete__option--focused", opt.disabled && "hu-autocomplete__option--disabled"),
             role: "option",
-            "aria-selected": selected.value === opt.value,
+            "aria-selected": selectedValue() === opt.value ? "true" : "false",
             "aria-disabled": opt.disabled ? "true" : undefined,
+            onMouseEnter: () => { if (!opt.disabled)
+                activeIndex.value = index; },
             onMouseDown: (e) => {
                 e.preventDefault();
-                if (opt.disabled)
-                    return;
-                selected.value = opt.value;
-                inputVal.value = opt.label;
-                isOpen.value = false;
-                onChange?.(opt.value);
+                selectOption(opt);
             }
-        }, opt.label, selected.value === opt.value && h("span", { class: "hu-autocomplete__check", "aria-hidden": "true" }, "✓"))))));
+        }, opt.label, selectedValue() === opt.value && h("span", { class: "hu-autocomplete__check", "aria-hidden": "true" }, "✓"))))), error && h("span", { id: errorId, class: "hu-autocomplete__error", role: "alert" }, error), !error && helper && h("span", { id: helperId, class: "hu-autocomplete__helper" }, helper));
+}
+function getSignalProp(value) {
+    return typeof value === "object" && value != null && "peek" in value ? value : undefined;
+}
+function toIdPart(value) {
+    return value.replace(/[^a-zA-Z0-9_-]/g, "-");
 }

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

@@ -1,6 +1,7 @@
+import { type Signal } from "@hyperpackai/hyperion";
 import { type VNode } from "../../theme/index.js";
 export interface BackdropProps {
-    open: boolean;
+    open: boolean | Signal<boolean>;
     invisible?: boolean;
     onClick?: (e: MouseEvent) => void;
     class?: string;

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Backdrop/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiBpE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,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,CAY3D"}

package/dist/components/Backdrop/index.js

@@ -15,11 +15,14 @@ const CSS = `
 `;
 export function Backdrop(props) {
     injectCSS("hu-backdrop", CSS);
-    if (!props.open)
-        return null;
-    return renderInPortal(h("div", {
+    const isSignalOpen = typeof props.open === "object" && props.open != null && "peek" in props.open;
+    const isOpen = () => isSignalOpen ? props.open.value : props.open;
+    const renderBackdrop = () => renderInPortal(h("div", {
         class: cn("hu-backdrop", props.invisible && "hu-backdrop--invisible", props.class),
         onClick: props.onClick,
         "aria-hidden": "true"
     }, props.children), "backdrop");
+    if (!isSignalOpen)
+        return isOpen() ? renderBackdrop() : null;
+    return (() => isOpen() ? renderBackdrop() : null);
 }

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

@@ -12,6 +12,7 @@ export interface CheckboxProps {
     description?: string;
     class?: string;
     onChange?: (e: Event) => void;
+    onCheckedChange?: (checked: boolean, e: Event) => void;
 }
 export declare function Checkbox(props: CheckboxProps): VNode;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAuCpE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAWpD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAuCpE,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CACxD;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAepD"}

package/dist/components/Checkbox/index.js

@@ -37,6 +37,10 @@ const CHECKBOX_CSS = `
 `;
 export function Checkbox(props) {
     injectCSS("hu-checkbox", CHECKBOX_CSS);
-    const { label, description, disabled, id, ...rest } = props;
-    return h("label", { class: cn("hu-checkbox-wrap", disabled && "hu-checkbox-wrap--disabled", props.class) }, h("input", { ...rest, type: "checkbox", id, disabled, class: "hu-checkbox" }), (label || description) && h("span", { class: "hu-checkbox-text" }, label && h("span", { class: "hu-checkbox-label" }, label), description && h("span", { class: "hu-checkbox-desc" }, description)));
+    const { label, description, disabled, id, onChange, onCheckedChange, ...rest } = props;
+    const handleChange = (event) => {
+        onChange?.(event);
+        onCheckedChange?.(event.target.checked, event);
+    };
+    return h("label", { class: cn("hu-checkbox-wrap", disabled && "hu-checkbox-wrap--disabled", props.class) }, h("input", { ...rest, type: "checkbox", id, disabled, onChange: handleChange, class: "hu-checkbox" }), (label || description) && h("span", { class: "hu-checkbox-text" }, label && h("span", { class: "hu-checkbox-label" }, label), description && h("span", { class: "hu-checkbox-desc" }, description)));
 }

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

@@ -1,15 +1,28 @@
 import { type VNode } from "../../theme/index.js";
 export interface DashboardLayoutProps {
+    id?: string;
     header?: unknown;
     sidebar?: unknown;
     aside?: unknown;
+    footer?: unknown;
     sidebarWidth?: string | number;
     collapsedSidebarWidth?: string | number;
     asideWidth?: string | number;
     collapsed?: boolean;
     padding?: string | number;
+    skipLinkLabel?: string | null;
+    skipLinkTarget?: string;
+    headerLabel?: string;
+    sidebarLabel?: string;
+    asideLabel?: string;
+    footerLabel?: string;
+    mainLabel?: string;
+    testId?: string;
+    style?: string;
     class?: string;
     children?: unknown;
 }
 export declare function DashboardLayout(props: DashboardLayoutProps): VNode;
+export type AppShellProps = DashboardLayoutProps;
+export declare function AppShell(props: AppShellProps): VNode;
 //# sourceMappingURL=index.d.ts.map

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

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