@hyperpackai/hyperui 0.2.0 → 0.3.0

package/dist/components/SpeedDial/index.js

@@ -1,11 +1,20 @@
 import { signal } from "@hyperpackai/hyperion";
 import { injectCSS, cn, h } from "../../theme/index.js";
 const CSS = `
-.hu-speed-dial { position: fixed; z-index: 50; display: flex; flex-direction: column-reverse; align-items: center; gap: var(--hu-space-2); }
+.hu-speed-dial { z-index: 50; display: flex; flex-direction: column-reverse; align-items: center; gap: var(--hu-space-2); }
+.hu-speed-dial--fixed { position: fixed; }
+.hu-speed-dial--absolute { position: absolute; }
+.hu-speed-dial--static { position: static; }
 .hu-speed-dial--bottom-right { bottom: var(--hu-space-6); right: var(--hu-space-6); }
 .hu-speed-dial--bottom-left  { bottom: var(--hu-space-6); left:  var(--hu-space-6); }
 .hu-speed-dial--top-right    { top: var(--hu-space-6);    right: var(--hu-space-6); flex-direction: column; }
 .hu-speed-dial--top-left     { top: var(--hu-space-6);    left:  var(--hu-space-6); flex-direction: column; }
+.hu-speed-dial--static.hu-speed-dial--bottom-right,
+.hu-speed-dial--static.hu-speed-dial--bottom-left,
+.hu-speed-dial--static.hu-speed-dial--top-right,
+.hu-speed-dial--static.hu-speed-dial--top-left {
+  inset: auto;
+}
 
 .hu-speed-dial__fab {
   width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
@@ -19,6 +28,8 @@ const CSS = `
 .hu-speed-dial__fab--open { transform: rotate(45deg); }
 
 .hu-speed-dial__actions { display: flex; flex-direction: column-reverse; gap: var(--hu-space-2); align-items: center; }
+.hu-speed-dial__actions[hidden],
+.hu-speed-dial__backdrop[hidden] { display: none; }
 .hu-speed-dial--top-right .hu-speed-dial__actions,
 .hu-speed-dial--top-left .hu-speed-dial__actions { flex-direction: column; }
 
@@ -50,22 +61,61 @@ const CSS = `
 `;
 export function SpeedDial(props) {
     injectCSS("hu-speed-dial", CSS);
-    const { actions, direction = "bottom-right", backdrop, ariaLabel } = props;
-    const isOpen = signal(false);
-    const toggle = () => { isOpen.value = !isOpen.value; };
-    const close = () => { isOpen.value = false; };
-    return h("div", { class: cn("hu-speed-dial", `hu-speed-dial--${direction}`), "aria-label": ariaLabel }, backdrop && isOpen.value && h("div", { class: "hu-speed-dial__backdrop", onClick: close }), isOpen.value && h("div", { class: "hu-speed-dial__actions" }, ...actions.map((action, i) => h("div", {
+    const { actions, direction = "bottom-right", position = "fixed", backdrop, closeOnBackdrop = true, closeOnEscape = true, ariaLabel } = props;
+    const uncontrolledOpen = signal(props.defaultOpen ?? false);
+    const isSignalOpen = typeof props.open === "object" && props.open != null && "peek" in props.open;
+    const isControlled = typeof props.open === "boolean" || isSignalOpen;
+    const isOpen = () => {
+        if (typeof props.open === "boolean")
+            return props.open;
+        if (isSignalOpen)
+            return props.open.value;
+        return uncontrolledOpen.value;
+    };
+    const setOpen = (next, reason = "programmatic") => {
+        if (!isControlled)
+            uncontrolledOpen.value = next;
+        if (isSignalOpen)
+            props.open.value = next;
+        props.onOpenChange?.(next, reason);
+        if (!next)
+            props.onClose?.(reason);
+    };
+    const toggle = () => { setOpen(!isOpen(), "toggle"); };
+    const close = (reason = "programmatic") => { setOpen(false, reason); };
+    return h("div", {
+        class: cn("hu-speed-dial", `hu-speed-dial--${position}`, `hu-speed-dial--${direction}`),
+        "aria-label": ariaLabel,
+        onKeyDown: closeOnEscape ? (event) => {
+            if (event.key === "Escape" && isOpen())
+                close("escape");
+        } : undefined
+    }, backdrop && h("div", {
+        class: "hu-speed-dial__backdrop",
+        hidden: () => !isOpen(),
+        onClick: closeOnBackdrop ? () => close("backdrop") : undefined
+    }), h("div", {
+        class: "hu-speed-dial__actions",
+        hidden: () => !isOpen(),
+        "aria-hidden": () => String(!isOpen())
+    }, ...actions.map((action, i) => h("div", {
         class: "hu-speed-dial__action-wrap",
         style: `animation-delay:${i * 40}ms`
     }, h("button", {
         class: "hu-speed-dial__action",
-        onClick: () => { action.onClick(); close(); },
+        onClick: () => {
+            if (action.disabled)
+                return;
+            action.onClick();
+            close("action");
+        },
         disabled: action.disabled,
         "aria-label": action.label
     }, action.icon), h("span", { class: "hu-speed-dial__action-tooltip" }, action.label)))), h("button", {
-        class: cn("hu-speed-dial__fab", isOpen.value && "hu-speed-dial__fab--open"),
+        type: "button",
+        class: () => cn("hu-speed-dial__fab", isOpen() && "hu-speed-dial__fab--open"),
         onClick: toggle,
-        "aria-haspopup": "true",
-        "aria-expanded": isOpen.value
-    }, isOpen.value && props.openIcon ? props.openIcon : (props.icon ?? "+")));
+        "aria-haspopup": "menu",
+        "aria-expanded": () => String(isOpen())
+    }, () => isOpen() && props.openIcon ? props.openIcon : (props.icon ?? "+")));
 }

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

@@ -1,6 +1,7 @@
 import { type VNode } from "../../theme/index.js";
 export interface SwitchProps {
     checked?: boolean;
+    defaultChecked?: boolean;
     disabled?: boolean;
     size?: "sm" | "md" | "lg";
     label?: string;
@@ -8,6 +9,7 @@ export interface SwitchProps {
     name?: string;
     class?: string;
     onChange?: (e: Event) => void;
+    onCheckedChange?: (checked: boolean, e: Event) => void;
 }
 export declare function Switch(props: SwitchProps): VNode;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmCpE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC/B;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAWhD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmCpE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAehD"}

package/dist/components/Switch/index.js

@@ -33,6 +33,10 @@ const SWITCH_CSS = `
 `;
 export function Switch(props) {
     injectCSS("hu-switch", SWITCH_CSS);
-    const { label, disabled, size = "md", id, ...rest } = props;
-    return h("label", { class: cn("hu-switch-wrap", disabled && "hu-switch-wrap--disabled", size !== "md" && `hu-switch--${size}`, props.class) }, h("input", { ...rest, type: "checkbox", id, disabled, class: "hu-switch-input", role: "switch" }), h("span", { class: "hu-switch-track" }, h("span", { class: "hu-switch-thumb" })), label && h("span", { class: "hu-switch-label" }, label));
+    const { label, disabled, size = "md", id, onChange, onCheckedChange, ...rest } = props;
+    const handleChange = (event) => {
+        onChange?.(event);
+        onCheckedChange?.(event.target.checked, event);
+    };
+    return h("label", { class: cn("hu-switch-wrap", disabled && "hu-switch-wrap--disabled", size !== "md" && `hu-switch--${size}`, props.class) }, h("input", { ...rest, type: "checkbox", id, disabled, onChange: handleChange, class: "hu-switch-input", role: "switch" }), h("span", { class: "hu-switch-track" }, h("span", { class: "hu-switch-thumb" })), label && h("span", { class: "hu-switch-label" }, label));
 }

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

@@ -10,10 +10,13 @@ export interface TabItem {
 }
 export interface TabsProps {
     items: TabItem[];
+    value?: string | Signal<string>;
+    defaultValue?: string;
     defaultTab?: string;
     activeTab?: string | Signal<string>;
     variant?: "underline" | "pill";
     onChange?: (id: string) => void;
+    onValueChange?: (id: string) => void;
     class?: string;
 }
 export declare function Tabs(props: TabsProps): VNode;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAoC5D,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAyC5C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAoC5D,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACpC,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAsE5C"}

package/dist/components/Tabs/index.js

@@ -35,22 +35,53 @@ const TABS_CSS = `
 `;
 export function Tabs(props) {
     injectCSS("hu-tabs", TABS_CSS);
-    const { items, variant = "underline", onChange } = props;
-    const uncontrolledActive = signal(props.defaultTab ?? items[0]?.id ?? "");
-    const controlled = typeof props.activeTab === "object" && props.activeTab !== null && "peek" in props.activeTab;
-    const getActive = () => controlled
-        ? props.activeTab.value
-        : props.activeTab ?? uncontrolledActive.value;
+    const { items, variant = "underline", onChange, onValueChange } = props;
+    const uncontrolledActive = signal(props.defaultValue ?? props.defaultTab ?? items[0]?.id ?? "");
+    const controlledSignal = getSignalProp(props.value) ?? getSignalProp(props.activeTab);
+    const controlledValue = typeof props.value === "string" ? props.value : typeof props.activeTab === "string" ? props.activeTab : undefined;
+    const controlled = controlledSignal != null || controlledValue !== undefined;
+    const enabledItems = () => items.filter((item) => !item.disabled);
+    const getActive = () => controlledSignal?.value ?? controlledValue ?? uncontrolledActive.value;
     const selectTab = (id) => {
-        if (!controlled && props.activeTab === undefined)
+        if (!controlled)
             uncontrolledActive.value = id;
+        if (controlledSignal)
+            controlledSignal.value = id;
         onChange?.(id);
+        onValueChange?.(id);
     };
-    return h("div", { class: cn("hu-tabs", props.class) }, h("div", { class: cn("hu-tabs-list", variant === "pill" && "hu-tabs-list--pill"), role: "tablist" }, ...items.map((item) => h("button", {
+    const focusTab = (id, event) => {
+        const root = event.currentTarget;
+        const next = root.querySelector(`#tab-${cssEscape(id)}`);
+        next?.focus();
+        selectTab(id);
+    };
+    const handleKeyDown = (event) => {
+        const enabled = enabledItems();
+        if (enabled.length === 0)
+            return;
+        const current = getActive();
+        const currentIndex = Math.max(0, enabled.findIndex((item) => item.id === current));
+        let nextIndex = currentIndex;
+        if (event.key === "ArrowRight" || event.key === "ArrowDown")
+            nextIndex = (currentIndex + 1) % enabled.length;
+        else if (event.key === "ArrowLeft" || 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();
+        focusTab(enabled[nextIndex].id, event);
+    };
+    return h("div", { class: cn("hu-tabs", props.class) }, h("div", { class: cn("hu-tabs-list", variant === "pill" && "hu-tabs-list--pill"), role: "tablist", onKeyDown: handleKeyDown }, ...items.map((item) => h("button", {
         key: item.id, id: `tab-${item.id}`, role: "tab",
         class: "hu-tabs-trigger",
         "aria-selected": () => getActive() === item.id ? "true" : "false",
         "aria-controls": `tabpanel-${item.id}`,
+        tabindex: () => getActive() === item.id ? "0" : "-1",
         disabled: item.disabled,
         onClick: () => selectTab(item.id)
     }, item.icon && h("span", { "aria-hidden": "true" }, item.icon), item.label, item.badge !== undefined && h("span", { class: "hu-tabs-badge" }, item.badge)))), ...items.map((item) => h("div", {
@@ -60,3 +91,11 @@ export function Tabs(props) {
         "aria-labelledby": `tab-${item.id}`
     }, () => getActive() === item.id ? item.content : null)));
 }
+function getSignalProp(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/TextField/index.d.ts

@@ -26,6 +26,8 @@ export interface TextFieldProps {
     name?: string;
     autoFocus?: boolean;
     autoComplete?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
     onChange?: (value: string, e: Event) => void;
     onBlur?: (e: FocusEvent) => void;
     onFocus?: (e: FocusEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0CpE,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAyDtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0CpE,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAC;AAClE,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE/C,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAiEtD"}

package/dist/components/TextField/index.js

@@ -38,25 +38,33 @@ const TEXTFIELD_CSS = `
 .hu-textfield--sm .hu-textfield__input { min-height: 34px; padding: 6px 10px; font-size: var(--hu-font-size-xs); border-radius: var(--hu-radius); }
 .hu-textfield--lg .hu-textfield__input { min-height: 46px; padding: 11px 14px; font-size: var(--hu-font-size-base); }
 `;
+let textFieldId = 0;
 export function TextField(props) {
     injectCSS("hu-textfield", TEXTFIELD_CSS);
-    const { label, placeholder, value, type = "text", variant = "outlined", size = "md", helperText, error, success, required, disabled, readOnly, multiline, rows = 3, startIcon, endIcon, maxLength, id, name, autoFocus, autoComplete, onChange, onBlur, onFocus } = props;
+    const { label, placeholder, value, type = "text", variant = "outlined", size = "md", helperText, error, success, required, disabled, readOnly, multiline, rows = 3, startIcon, endIcon, maxLength, name, autoFocus, autoComplete, onChange, onBlur, onFocus } = props;
+    const id = props.id ?? (label || helperText || error ? `hu-textfield-${++textFieldId}` : undefined);
     const errorMsg = typeof error === "string" ? error : undefined;
     const hasError = !!error;
     const hasStartIcon = startIcon != null;
     const hasEndIcon = endIcon != null;
+    const helperId = helperText && !errorMsg ? `${id}-helper` : undefined;
+    const errorId = errorMsg ? `${id}-error` : undefined;
+    const describedBy = [props["aria-describedby"], errorId, helperId].filter(Boolean).join(" ") || undefined;
     const inputProps = {
         class: cn("hu-textfield__input", hasStartIcon && "hu-textfield__input--has-start", hasEndIcon && "hu-textfield__input--has-end"),
         id, name, placeholder, disabled, required, "readonly": readOnly,
         autofocus: autoFocus, autocomplete: autoComplete,
         maxlength: maxLength,
+        "aria-invalid": hasError ? "true" : undefined,
+        "aria-describedby": describedBy,
+        "aria-label": props["aria-label"],
         onInput: onChange ? (e) => onChange(e.target.value, e) : undefined,
         onBlur, onFocus
     };
     if (value !== undefined)
         inputProps["value"] = value;
-    if (props.defaultValue !== undefined)
-        inputProps["value"] = props.defaultValue;
+    if (value === undefined && props.defaultValue !== undefined)
+        inputProps["defaultValue"] = props.defaultValue;
     const inputEl = multiline
         ? h("textarea", { ...inputProps, rows })
         : h("input", { ...inputProps, type });
@@ -65,5 +73,5 @@ export function TextField(props) {
     }, label && h("label", {
         class: cn("hu-textfield__label", required && "hu-textfield__label--required"),
         for: id
-    }, label), h("div", { class: "hu-textfield__input-wrap" }, startIcon && h("span", { class: "hu-textfield__start-icon" }, startIcon), inputEl, endIcon && h("span", { class: "hu-textfield__end-icon" }, endIcon)), (helperText || errorMsg) && h("span", { class: "hu-textfield__helper" }, errorMsg ?? helperText), maxLength && h("span", { class: "hu-textfield__char-count" }, `${(value ?? "").length}/${maxLength}`));
+    }, label), h("div", { class: "hu-textfield__input-wrap" }, startIcon && h("span", { class: "hu-textfield__start-icon" }, startIcon), inputEl, endIcon && h("span", { class: "hu-textfield__end-icon" }, endIcon)), errorMsg && h("span", { id: errorId, class: "hu-textfield__helper", role: "alert" }, errorMsg), !errorMsg && helperText && h("span", { id: helperId, class: "hu-textfield__helper" }, helperText), maxLength && h("span", { class: "hu-textfield__char-count" }, `${(value ?? "").length}/${maxLength}`));
 }

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

@@ -1,6 +1,7 @@
 import { type VNode } from "../../theme/index.js";
 export interface TextareaProps {
     value?: string;
+    defaultValue?: string;
     placeholder?: string;
     disabled?: boolean;
     readOnly?: boolean;
@@ -14,9 +15,13 @@ export interface TextareaProps {
     name?: string;
     maxLength?: number;
     class?: string;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
     onInput?: (e: InputEvent) => void;
     onChange?: (e: Event) => void;
+    onValueChange?: (value: string, e: Event) => void;
     onBlur?: (e: FocusEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
 }
 export declare function Textarea(props: TextareaProps): VNode;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqBpE,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CAClC;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAapD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC;AAID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,KAAK,CAyCpD"}

package/dist/components/Textarea/index.js

@@ -16,12 +16,29 @@ const TEXTAREA_CSS = `
 .hu-textarea--error { border-color: var(--hu-error) !important; }
 .hu-textarea--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-error) 18%, transparent); }
 .hu-textarea--no-resize { resize: none; }
+.hu-textarea__count { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); text-align: right; }
 `;
+let textareaId = 0;
 export function Textarea(props) {
     injectCSS("hu-textarea", TEXTAREA_CSS);
-    const { error, helper, label, resize = true, id, ...rest } = props;
+    const { error, helper, label, resize = true, value, defaultValue, onInput, onChange, onValueChange, class: className, ...rest } = props;
+    const id = props.id ?? (label || helper || error ? `hu-textarea-${++textareaId}` : undefined);
+    const helperId = helper && !error ? `${id}-helper` : undefined;
+    const errorId = error ? `${id}-error` : undefined;
+    const describedBy = [props["aria-describedby"], errorId, helperId].filter(Boolean).join(" ") || undefined;
+    const handleInput = (event) => {
+        onInput?.(event);
+        onValueChange?.(event.target.value, event);
+    };
     return h("div", { class: "hu-input-wrap" }, label && Label({ for: id, required: props.required, children: label }), h("textarea", {
-        ...rest, id,
-        class: cn("hu-textarea", error && "hu-textarea--error", !resize && "hu-textarea--no-resize", props.class)
-    }), error && h("span", { class: "hu-input-error-msg", role: "alert" }, error), !error && helper && h("span", { class: "hu-input-helper" }, helper));
+        ...rest,
+        id,
+        value,
+        defaultValue: value === undefined ? defaultValue : undefined,
+        onInput: handleInput,
+        onChange,
+        "aria-invalid": error ? "true" : undefined,
+        "aria-describedby": describedBy,
+        class: cn("hu-textarea", error && "hu-textarea--error", !resize && "hu-textarea--no-resize", className)
+    }), error && h("span", { id: errorId, class: "hu-input-error-msg", role: "alert" }, error), !error && helper && h("span", { id: helperId, class: "hu-input-helper" }, helper), props.maxLength && h("span", { class: "hu-textarea__count" }, `${(value ?? defaultValue ?? "").length}/${props.maxLength}`));
 }

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

@@ -0,0 +1,14 @@
+import { type Signal, type TransitionOptions } from "@hyperpackai/hyperion";
+import { type VNode } from "../../theme/index.js";
+export interface TransitionProps extends TransitionOptions {
+    show: boolean | Signal<boolean>;
+    class?: string;
+    children?: unknown;
+}
+/**
+ * Mounts/unmounts `children` based on `show`, applying enter/leave CSS
+ * classes (Vue-style: `*-from` / `*-active` / `*-to`) around the transition.
+ * Override the class names via props to plug in custom animations.
+ */
+export declare function Transition(props: TransitionProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Transition/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,MAAM,EAAE,KAAK,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC3G,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAUpE,MAAM,WAAW,eAAgB,SAAQ,iBAAiB;IACxD,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAgDxD"}

package/dist/components/Transition/index.js

@@ -0,0 +1,49 @@
+import { signal, effect, useTransition } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-transition-enter-active, .hu-transition-leave-active {
+  transition: opacity var(--hu-duration) var(--hu-ease), transform var(--hu-duration) var(--hu-ease);
+}
+.hu-transition-enter-from, .hu-transition-leave-to { opacity: 0; transform: scale(0.96); }
+.hu-transition-enter-to, .hu-transition-leave-from { opacity: 1; transform: scale(1); }
+`;
+/**
+ * Mounts/unmounts `children` based on `show`, applying enter/leave CSS
+ * classes (Vue-style: `*-from` / `*-active` / `*-to`) around the transition.
+ * Override the class names via props to plug in custom animations.
+ */
+export function Transition(props) {
+    injectCSS("hu-transition", CSS);
+    const { enterClass = "hu-transition-enter-from", enterActiveClass = "hu-transition-enter-active", enterToClass = "hu-transition-enter-to", leaveClass = "hu-transition-leave-from", leaveActiveClass = "hu-transition-leave-active", leaveToClass = "hu-transition-leave-to" } = props;
+    const { state, shouldRender } = useTransition(props.show, props);
+    // Drives the dynamic part of the `class` attribute. Kept as its own signal
+    // (rather than mutating `classList` from a side-effect) so it composes
+    // cleanly with `props.class` through the reactive `class` getter below —
+    // applyProp re-sets the whole `class` attribute on every change, which
+    // would otherwise wipe out classes toggled imperatively.
+    const transitionClass = signal("");
+    effect(() => {
+        switch (state.value) {
+            case "entering":
+                transitionClass.value = cn(enterClass, enterActiveClass);
+                requestAnimationFrame(() => {
+                    transitionClass.value = cn(enterActiveClass, enterToClass);
+                });
+                break;
+            case "leaving":
+                transitionClass.value = cn(leaveClass, leaveActiveClass);
+                requestAnimationFrame(() => {
+                    transitionClass.value = cn(leaveActiveClass, leaveToClass);
+                });
+                break;
+            default:
+                transitionClass.value = "";
+                break;
+        }
+    });
+    return (() => shouldRender.value
+        ? h("div", {
+            class: () => cn(props.class, transitionClass.value)
+        }, props.children)
+        : null);
+}

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

@@ -0,0 +1,16 @@
+import { type Signal } from "@hyperpackai/hyperion";
+import { type VNode } from "../../theme/index.js";
+export interface TransitionGroupProps<T> {
+    each: T[] | Signal<T[]>;
+    key: (item: T, index: number) => string | number;
+    children: (item: T, index: number) => unknown;
+    duration?: number;
+    tag?: string;
+    class?: string;
+}
+/**
+ * Animates list items in/out with enter/leave CSS classes and applies a
+ * best-effort FLIP transform to items that moved on reorder.
+ */
+export declare function TransitionGroup<T>(props: TransitionGroupProps<T>): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TransitionGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAsBpE,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,IAAI,EAAE,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;IACxB,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IACjD,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG,KAAK,CA4FxE"}

package/dist/components/TransitionGroup/index.js

@@ -0,0 +1,95 @@
+import { signal, effect, For } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-transition-group-item {
+  transition: opacity var(--hu-duration) var(--hu-ease), transform var(--hu-duration) var(--hu-ease);
+}
+.hu-transition-group-item-enter-from,
+.hu-transition-group-item-leave-to {
+  opacity: 0;
+  transform: scale(0.96);
+}
+`;
+/**
+ * Animates list items in/out with enter/leave CSS classes and applies a
+ * best-effort FLIP transform to items that moved on reorder.
+ */
+export function TransitionGroup(props) {
+    injectCSS("hu-transition-group", CSS);
+    const duration = props.duration ?? 150;
+    const entries = signal([]);
+    const elements = new Map();
+    // JSX delivers a single function child as `[fn]` (see `For`'s same handling).
+    const childrenFn = (Array.isArray(props.children) ? props.children[0] : props.children);
+    effect(() => {
+        const list = Array.isArray(props.each) ? props.each : props.each.value;
+        const current = entries.peek();
+        const nextKeys = list.map((item, i) => props.key(item, i));
+        const nextKeySet = new Set(nextKeys);
+        // FLIP: capture positions before the DOM updates.
+        const rectsBefore = new Map();
+        for (const [key, el] of elements) {
+            if (el)
+                rectsBefore.set(key, el.getBoundingClientRect());
+        }
+        const updated = [];
+        // Items removed from `each`: animate out, then drop after `duration`.
+        for (const entry of current) {
+            if (!nextKeySet.has(entry.key)) {
+                if (entry.status.peek() !== "leaving") {
+                    entry.status.value = "leaving";
+                    setTimeout(() => {
+                        entries.value = entries.peek().filter((e) => e.key !== entry.key);
+                        elements.delete(entry.key);
+                    }, duration);
+                }
+                updated.push(entry);
+            }
+        }
+        // Items present in the new list: reuse existing entries or create new ones.
+        list.forEach((item, index) => {
+            const key = nextKeys[index];
+            const existing = current.find((e) => e.key === key);
+            if (existing) {
+                existing.item = item;
+                existing.index = index;
+                updated.push(existing);
+            }
+            else {
+                const status = signal("entering");
+                updated.push({ key, item, index, status });
+                requestAnimationFrame(() => { status.value = "entered"; });
+            }
+        });
+        entries.value = updated;
+        // FLIP: animate items whose position changed due to reordering.
+        requestAnimationFrame(() => {
+            for (const [key, el] of elements) {
+                if (!el)
+                    continue;
+                const before = rectsBefore.get(key);
+                if (!before)
+                    continue;
+                const after = el.getBoundingClientRect();
+                const dx = before.left - after.left;
+                const dy = before.top - after.top;
+                if (dx || dy) {
+                    el.style.transition = "none";
+                    el.style.transform = `translate(${dx}px, ${dy}px)`;
+                    requestAnimationFrame(() => {
+                        el.style.transition = `transform ${duration}ms var(--hu-ease, ease)`;
+                        el.style.transform = "";
+                    });
+                }
+            }
+        });
+    });
+    return h(props.tag ?? "div", { class: cn("hu-transition-group", props.class) }, For({
+        each: entries,
+        key: (entry) => entry.key,
+        children: (entry) => h("div", {
+            ref: (el) => { elements.set(entry.key, el); },
+            class: () => cn("hu-transition-group-item", entry.status.value === "entering" && "hu-transition-group-item-enter-from", entry.status.value === "leaving" && "hu-transition-group-item-leave-to")
+        }, childrenFn(entry.item, entry.index))
+    }));
+}