@hyperpackai/hyperui 0.1.0

package/dist/components/inputs.js

@@ -0,0 +1,437 @@
+/**
+ * HyperUI Input Components
+ * TextField · IconButton · ButtonGroup · ToggleButton · FAB · Rating · Slider · Autocomplete · FormControl
+ */
+import { signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../theme/index.js";
+// ============================================================
+// TEXT FIELD
+// ============================================================
+const TEXTFIELD_CSS = `
+.hu-textfield { display: flex; flex-direction: column; gap: var(--hu-space-1); width: 100%; }
+.hu-textfield__label { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium); color: var(--hu-text-2); }
+.hu-textfield__label--required::after { content: " *"; color: var(--hu-error); }
+.hu-textfield__input-wrap { position: relative; display: flex; align-items: center; }
+.hu-textfield__input {
+  width: 100%; padding: var(--hu-space-2-5) var(--hu-space-3);
+  font-size: var(--hu-font-size-sm); font-family: var(--hu-font-sans);
+  background: var(--hu-bg); color: var(--hu-text);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius);
+  transition: all var(--hu-duration) var(--hu-ease); outline: none; box-sizing: border-box;
+}
+.hu-textfield__input:hover { border-color: var(--hu-border-2); }
+.hu-textfield__input:focus { border-color: var(--hu-primary); box-shadow: 0 0 0 3px var(--hu-primary-bg); }
+.hu-textfield__input:disabled { opacity: .6; cursor: not-allowed; background: var(--hu-bg-3); }
+.hu-textfield__input::placeholder { color: var(--hu-text-3); }
+.hu-textfield--outlined .hu-textfield__input { background: transparent; }
+.hu-textfield--filled .hu-textfield__input {
+  background: var(--hu-bg-3); border-bottom: 2px solid var(--hu-border); border-radius: var(--hu-radius) var(--hu-radius) 0 0;
+  border-left: none; border-right: none; border-top: none;
+}
+.hu-textfield--filled .hu-textfield__input:focus { border-bottom-color: var(--hu-primary); background: var(--hu-bg-4); }
+.hu-textfield--standard .hu-textfield__input { border: none; border-bottom: 1px solid var(--hu-border); border-radius: 0; padding-left: 0; padding-right: 0; background: transparent; }
+.hu-textfield--standard .hu-textfield__input:focus { border-bottom: 2px solid var(--hu-primary); box-shadow: none; }
+.hu-textfield--error .hu-textfield__input { border-color: var(--hu-error); }
+.hu-textfield--error .hu-textfield__input:focus { box-shadow: 0 0 0 3px var(--hu-error-bg); }
+.hu-textfield--success .hu-textfield__input { border-color: var(--hu-success); }
+.hu-textfield__start-icon { position: absolute; left: var(--hu-space-3); color: var(--hu-text-2); pointer-events: none; }
+.hu-textfield__end-icon { position: absolute; right: var(--hu-space-3); color: var(--hu-text-2); }
+.hu-textfield__input--has-start { padding-left: calc(var(--hu-space-3) * 2 + 18px); }
+.hu-textfield__input--has-end { padding-right: calc(var(--hu-space-3) * 2 + 18px); }
+.hu-textfield__helper { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-textfield--error .hu-textfield__helper { color: var(--hu-error); }
+.hu-textfield--success .hu-textfield__helper { color: var(--hu-success); }
+.hu-textfield__char-count { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); text-align: right; }
+.hu-textfield--sm .hu-textfield__input { padding: var(--hu-space-1-5) var(--hu-space-2-5); font-size: var(--hu-font-size-xs); }
+.hu-textfield--lg .hu-textfield__input { padding: var(--hu-space-3) var(--hu-space-4); font-size: var(--hu-font-size-base); }
+`;
+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 errorMsg = typeof error === "string" ? error : undefined;
+    const hasError = !!error;
+    const hasStartIcon = startIcon != null;
+    const hasEndIcon = endIcon != null;
+    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,
+        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;
+    const inputEl = multiline
+        ? h("textarea", { ...inputProps, rows })
+        : h("input", { ...inputProps, type });
+    return h("div", {
+        class: cn("hu-textfield", `hu-textfield--${variant}`, size !== "md" && `hu-textfield--${size}`, hasError && "hu-textfield--error", success && "hu-textfield--success", props.fullWidth && "hu-textfield--full", props.class)
+    }, 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}`));
+}
+// ============================================================
+// ICON BUTTON
+// ============================================================
+const ICON_BUTTON_CSS = `
+.hu-icon-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  border: none; background: transparent; border-radius: 50%; cursor: pointer;
+  color: var(--hu-text-2); transition: all var(--hu-duration) var(--hu-ease);
+  padding: 0; position: relative; user-select: none;
+}
+.hu-icon-btn::after {
+  content: ""; position: absolute; inset: 0; border-radius: 50%;
+  background: currentColor; opacity: 0; transition: opacity var(--hu-duration) var(--hu-ease);
+}
+.hu-icon-btn:hover::after { opacity: .08; }
+.hu-icon-btn:active::after { opacity: .16; }
+.hu-icon-btn:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-icon-btn:disabled { opacity: .4; pointer-events: none; }
+.hu-icon-btn--sm { width: 32px; height: 32px; font-size: 16px; }
+.hu-icon-btn--md { width: 40px; height: 40px; font-size: 20px; }
+.hu-icon-btn--lg { width: 48px; height: 48px; font-size: 24px; }
+.hu-icon-btn--primary { color: var(--hu-primary); }
+.hu-icon-btn--error   { color: var(--hu-error); }
+.hu-icon-btn--warning { color: var(--hu-warning); }
+.hu-icon-btn--success { color: var(--hu-success); }
+.hu-icon-btn--contained { background: var(--hu-bg-3); border: 1px solid var(--hu-border); border-radius: 50%; }
+`;
+export function IconButton(props) {
+    injectCSS("hu-icon-btn", ICON_BUTTON_CSS);
+    const { color = "default", size = "md", variant = "standard", disabled, onClick, children } = props;
+    return h("button", {
+        class: cn("hu-icon-btn", `hu-icon-btn--${size}`, color !== "default" && `hu-icon-btn--${color}`, variant === "contained" && "hu-icon-btn--contained", props.class),
+        type: props.type ?? "button",
+        disabled,
+        onClick,
+        "aria-label": props["aria-label"]
+    }, children);
+}
+// ============================================================
+// BUTTON GROUP
+// ============================================================
+const BUTTON_GROUP_CSS = `
+.hu-btn-group { display: inline-flex; align-items: stretch; }
+.hu-btn-group--full { width: 100%; }
+.hu-btn-group--vertical { flex-direction: column; }
+.hu-btn-group .hu-btn { border-radius: 0; }
+.hu-btn-group--horizontal .hu-btn:not(:last-child) { border-right-width: 0; }
+.hu-btn-group--horizontal .hu-btn:first-child { border-radius: var(--hu-radius) 0 0 var(--hu-radius); }
+.hu-btn-group--horizontal .hu-btn:last-child  { border-radius: 0 var(--hu-radius) var(--hu-radius) 0; border-right-width: 1px; }
+.hu-btn-group--vertical .hu-btn:not(:last-child) { border-bottom-width: 0; }
+.hu-btn-group--vertical .hu-btn:first-child { border-radius: var(--hu-radius) var(--hu-radius) 0 0; }
+.hu-btn-group--vertical .hu-btn:last-child  { border-radius: 0 0 var(--hu-radius) var(--hu-radius); border-bottom-width: 1px; }
+.hu-btn-group .hu-btn:focus { z-index: 1; }
+`;
+export function ButtonGroup(props) {
+    injectCSS("hu-btn-group", BUTTON_GROUP_CSS);
+    const { orientation = "horizontal", fullWidth } = props;
+    return h("div", {
+        class: cn("hu-btn-group", `hu-btn-group--${orientation}`, fullWidth && "hu-btn-group--full", props.class),
+        role: "group"
+    }, props.children);
+}
+// ============================================================
+// TOGGLE BUTTON / TOGGLE BUTTON GROUP
+// ============================================================
+const TOGGLE_BTN_CSS = `
+.hu-toggle-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--hu-space-1);
+  padding: var(--hu-space-2) var(--hu-space-3); font-size: var(--hu-font-size-sm);
+  font-family: var(--hu-font-sans); border: 1px solid var(--hu-border);
+  background: transparent; color: var(--hu-text-2); cursor: pointer;
+  transition: all var(--hu-duration) var(--hu-ease); user-select: none;
+}
+.hu-toggle-btn:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-toggle-btn--selected { background: var(--hu-primary-bg); color: var(--hu-primary); border-color: var(--hu-primary); }
+.hu-toggle-btn:disabled { opacity: .4; pointer-events: none; }
+.hu-toggle-btn-group { display: inline-flex; }
+.hu-toggle-btn-group .hu-toggle-btn { border-radius: 0; }
+.hu-toggle-btn-group .hu-toggle-btn:not(:last-child) { border-right-width: 0; }
+.hu-toggle-btn-group .hu-toggle-btn:first-child { border-radius: var(--hu-radius) 0 0 var(--hu-radius); }
+.hu-toggle-btn-group .hu-toggle-btn:last-child  { border-radius: 0 var(--hu-radius) var(--hu-radius) 0; border-right-width: 1px; }
+.hu-toggle-btn-group--vertical { flex-direction: column; }
+.hu-toggle-btn-group--vertical .hu-toggle-btn { border-radius: 0; border-right-width: 1px; }
+.hu-toggle-btn-group--vertical .hu-toggle-btn:not(:last-child) { border-bottom-width: 0; }
+.hu-toggle-btn-group--vertical .hu-toggle-btn:first-child { border-radius: var(--hu-radius) var(--hu-radius) 0 0; }
+.hu-toggle-btn-group--vertical .hu-toggle-btn:last-child  { border-radius: 0 0 var(--hu-radius) var(--hu-radius); border-bottom-width: 1px; }
+`;
+export function ToggleButton(props) {
+    injectCSS("hu-toggle-btn", TOGGLE_BTN_CSS);
+    const { value, selected, disabled, onChange, children } = props;
+    return h("button", {
+        class: cn("hu-toggle-btn", selected && "hu-toggle-btn--selected", props.class),
+        type: "button",
+        "aria-pressed": selected,
+        disabled,
+        onClick: () => onChange?.(value)
+    }, children);
+}
+export function ToggleButtonGroup(props) {
+    injectCSS("hu-toggle-btn", TOGGLE_BTN_CSS);
+    const { value, exclusive = false, orientation = "horizontal", onChange, children = [] } = props;
+    const isSelected = (v) => Array.isArray(value) ? value.includes(v) : value === v;
+    const handleChange = (v) => {
+        if (!onChange)
+            return;
+        if (exclusive) {
+            onChange(isSelected(v) ? "" : v);
+        }
+        else {
+            const arr = Array.isArray(value) ? value : (value ? [value] : []);
+            onChange(isSelected(v) ? arr.filter(x => x !== v) : [...arr, v]);
+        }
+    };
+    return h("div", {
+        class: cn("hu-toggle-btn-group", orientation === "vertical" && "hu-toggle-btn-group--vertical", props.class),
+        role: "group"
+    }, ...children.map(child => ToggleButton({ ...child, selected: isSelected(child.value), onChange: handleChange })));
+}
+// ============================================================
+// FAB (Floating Action Button)
+// ============================================================
+const FAB_CSS = `
+.hu-fab {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--hu-space-2);
+  border: none; border-radius: 9999px; cursor: pointer;
+  font-family: var(--hu-font-sans); font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-semibold);
+  box-shadow: 0 3px 8px rgba(0,0,0,.25); transition: all var(--hu-duration) var(--hu-ease);
+  user-select: none; position: relative; overflow: hidden;
+  background: var(--hu-primary); color: var(--hu-primary-text);
+}
+.hu-fab:hover { box-shadow: 0 6px 14px rgba(0,0,0,.3); transform: translateY(-1px); filter: brightness(.95); }
+.hu-fab:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
+.hu-fab:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 3px; }
+.hu-fab:disabled { opacity: .4; pointer-events: none; box-shadow: none; }
+.hu-fab--sm   { width: 40px; height: 40px; font-size: 18px; }
+.hu-fab--md   { width: 56px; height: 56px; font-size: 22px; }
+.hu-fab--lg   { width: 64px; height: 64px; font-size: 26px; }
+.hu-fab--extended { padding: 0 var(--hu-space-4); width: auto; height: 48px; }
+.hu-fab--secondary { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-fab--error { background: var(--hu-error); color: #fff; }
+.hu-fab--fixed { position: fixed; bottom: var(--hu-space-6); right: var(--hu-space-6); z-index: 999; }
+`;
+export function Fab(props) {
+    injectCSS("hu-fab", FAB_CSS);
+    const { color = "primary", size = "md", extended, fixed, disabled, onClick, children } = props;
+    return h("button", {
+        class: cn("hu-fab", `hu-fab--${size}`, color !== "primary" && `hu-fab--${color}`, extended && "hu-fab--extended", fixed && "hu-fab--fixed", props.class),
+        type: "button", disabled, onClick,
+        "aria-label": props["aria-label"]
+    }, children);
+}
+// ============================================================
+// RATING
+// ============================================================
+const RATING_CSS = `
+.hu-rating { display: inline-flex; gap: 2px; user-select: none; }
+.hu-rating__star {
+  font-size: 24px; cursor: pointer; color: var(--hu-border-2);
+  transition: color var(--hu-duration) var(--hu-ease), transform 80ms;
+  line-height: 1;
+}
+.hu-rating__star--filled { color: #f59e0b; }
+.hu-rating__star--half { position: relative; color: var(--hu-border-2); }
+.hu-rating__star--half::after {
+  content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #f59e0b;
+}
+.hu-rating__star:hover { transform: scale(1.15); }
+.hu-rating--sm .hu-rating__star { font-size: 18px; }
+.hu-rating--lg .hu-rating__star { font-size: 30px; }
+.hu-rating--readonly .hu-rating__star { cursor: default; }
+.hu-rating--readonly .hu-rating__star:hover { transform: none; }
+.hu-rating--disabled { opacity: .5; pointer-events: none; }
+`;
+export function Rating(props) {
+    injectCSS("hu-rating", RATING_CSS);
+    const { max = 5, precision = 1, size = "md", readOnly, disabled, onChange } = props;
+    const val = signal(props.value ?? props.defaultValue ?? 0);
+    const stars = Array.from({ length: max }, (_, i) => {
+        const starVal = i + 1;
+        const filled = val.value >= starVal;
+        const half = !filled && precision === 0.5 && val.value >= starVal - 0.5;
+        return h("span", {
+            class: cn("hu-rating__star", filled && "hu-rating__star--filled", half && "hu-rating__star--half"),
+            onClick: !readOnly && !disabled ? () => { val.value = starVal; onChange?.(starVal); } : undefined,
+            "aria-label": `${starVal} star${starVal > 1 ? "s" : ""}`
+        }, "★");
+    });
+    return h("div", {
+        class: cn("hu-rating", `hu-rating--${size}`, readOnly && "hu-rating--readonly", disabled && "hu-rating--disabled", props.class),
+        role: "radiogroup",
+        "aria-label": "rating"
+    }, ...stars);
+}
+// ============================================================
+// SLIDER
+// ============================================================
+const SLIDER_CSS = `
+.hu-slider { display: flex; align-items: center; width: 100%; position: relative; padding: 12px 0; cursor: pointer; user-select: none; }
+.hu-slider__track-bg {
+  width: 100%; height: 4px; border-radius: 2px;
+  background: var(--hu-border-2); position: relative;
+}
+.hu-slider__track-fill {
+  position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px;
+  background: var(--hu-primary); transition: width 0ms;
+}
+.hu-slider__thumb {
+  position: absolute; top: 50%; transform: translate(-50%, -50%);
+  width: 18px; height: 18px; border-radius: 50%; background: var(--hu-primary);
+  box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: box-shadow var(--hu-duration);
+}
+.hu-slider__thumb:hover { box-shadow: 0 0 0 8px var(--hu-primary-bg); }
+.hu-slider:focus-within .hu-slider__thumb { box-shadow: 0 0 0 10px var(--hu-primary-bg); }
+.hu-slider__input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; margin: 0; }
+.hu-slider--disabled { opacity: .5; pointer-events: none; }
+.hu-slider--sm .hu-slider__track-bg { height: 2px; }
+.hu-slider--sm .hu-slider__thumb { width: 14px; height: 14px; }
+.hu-slider--lg .hu-slider__track-bg { height: 6px; }
+.hu-slider--lg .hu-slider__thumb { width: 22px; height: 22px; }
+.hu-slider__mark { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; border-radius: 50%; background: var(--hu-primary-bg); border: 2px solid var(--hu-primary); }
+.hu-slider__value-label {
+  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
+  background: var(--hu-text); color: var(--hu-bg); font-size: 11px; padding: 2px 6px;
+  border-radius: var(--hu-radius-sm); white-space: nowrap; pointer-events: none;
+}
+`;
+export function Slider(props) {
+    injectCSS("hu-slider", SLIDER_CSS);
+    const { min = 0, max = 100, step = 1, size = "md", disabled, onChange } = props;
+    const val = signal(props.value ?? props.defaultValue ?? 0);
+    const pct = () => ((val.value - min) / (max - min)) * 100;
+    return h("div", {
+        class: cn("hu-slider", `hu-slider--${size}`, disabled && "hu-slider--disabled", props.class)
+    }, h("div", { class: "hu-slider__track-bg" }, h("div", { class: "hu-slider__track-fill", style: `width:${pct()}%` }), h("div", { class: "hu-slider__thumb", style: `left:${pct()}%` }, props.showValueLabel && h("div", { class: "hu-slider__value-label" }, String(val.value)))), h("input", {
+        class: "hu-slider__input",
+        type: "range", min, max, step,
+        value: val.value, disabled,
+        onInput: (e) => {
+            val.value = Number(e.target.value);
+            onChange?.(val.value);
+        }
+    }));
+}
+// ============================================================
+// AUTOCOMPLETE
+// ============================================================
+const AUTOCOMPLETE_CSS = `
+.hu-autocomplete { position: relative; width: 100%; }
+.hu-autocomplete__input-wrap { position: relative; }
+.hu-autocomplete__input {
+  width: 100%; padding: var(--hu-space-2-5) var(--hu-space-3);
+  padding-right: var(--hu-space-8); font-size: var(--hu-font-size-sm);
+  font-family: var(--hu-font-sans); background: var(--hu-bg); color: var(--hu-text);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius);
+  outline: none; box-sizing: border-box; transition: all var(--hu-duration) var(--hu-ease);
+}
+.hu-autocomplete__input:focus { border-color: var(--hu-primary); box-shadow: 0 0 0 3px var(--hu-primary-bg); }
+.hu-autocomplete__arrow {
+  position: absolute; right: var(--hu-space-3); top: 50%; transform: translateY(-50%);
+  color: var(--hu-text-2); 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: 28px; top: 50%; transform: translateY(-50%);
+  background: none; border: none; cursor: pointer; color: var(--hu-text-2); font-size: 16px; line-height: 1; padding: 2px;
+}
+.hu-autocomplete__listbox {
+  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
+  background: var(--hu-bg); border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  box-shadow: var(--hu-shadow-lg); max-height: 240px; overflow-y: auto; padding: 4px 0;
+}
+.hu-autocomplete__option {
+  padding: var(--hu-space-2-5) var(--hu-space-3); cursor: pointer;
+  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);
+}
+.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-medium); }
+.hu-autocomplete__no-options { padding: var(--hu-space-3); font-size: var(--hu-font-size-sm); color: var(--hu-text-2); text-align: center; }
+.hu-autocomplete__group-label { padding: var(--hu-space-1-5) var(--hu-space-3); font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text-2); 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-textfield__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("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"),
+            role: "option",
+            "aria-selected": selected.value === opt.value,
+            onMouseDown: (e) => {
+                e.preventDefault();
+                selected.value = opt.value;
+                inputVal.value = opt.label;
+                isOpen.value = false;
+                onChange?.(opt.value);
+            }
+        }, opt.label))));
+}
+// ============================================================
+// FORM CONTROL / FORM GROUP / FORM LABEL / FORM HELPER TEXT
+// ============================================================
+const FORM_CSS = `
+.hu-form-control { display: flex; flex-direction: column; gap: var(--hu-space-1); }
+.hu-form-control--full { width: 100%; }
+.hu-form-control--row { flex-direction: row; flex-wrap: wrap; gap: var(--hu-space-3); }
+.hu-form-group { display: flex; flex-direction: column; gap: var(--hu-space-2); border: none; padding: 0; margin: 0; }
+.hu-form-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--hu-space-4); }
+.hu-form-label { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium); color: var(--hu-text-2); display: flex; gap: var(--hu-space-1); align-items: center; }
+.hu-form-label--required::after { content: " *"; color: var(--hu-error); }
+.hu-form-label--focused { color: var(--hu-primary); }
+.hu-form-label--error { color: var(--hu-error); }
+.hu-form-helper { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-form-helper--error { color: var(--hu-error); }
+.hu-form-helper--success { color: var(--hu-success); }
+`;
+export function FormControl(props) {
+    injectCSS("hu-form", FORM_CSS);
+    return h("div", {
+        class: cn("hu-form-control", props.fullWidth && "hu-form-control--full", props.row && "hu-form-control--row", props.class)
+    }, props.children);
+}
+export function FormGroup(props) {
+    injectCSS("hu-form", FORM_CSS);
+    return h("fieldset", { class: cn("hu-form-group", props.row && "hu-form-group--row", props.class) }, props.children);
+}
+export function FormLabel(props) {
+    injectCSS("hu-form", FORM_CSS);
+    return h("label", {
+        class: cn("hu-form-label", props.required && "hu-form-label--required", props.focused && "hu-form-label--focused", props.error && "hu-form-label--error", props.class),
+        for: props.for
+    }, props.children);
+}
+export function FormHelperText(props) {
+    injectCSS("hu-form", FORM_CSS);
+    return h("p", {
+        class: cn("hu-form-helper", props.error && "hu-form-helper--error", props.success && "hu-form-helper--success", props.class)
+    }, props.children);
+}

package/dist/components/layout.d.ts

@@ -0,0 +1,224 @@
+/**
+ * HyperUI Layout & Navigation Components
+ * Card · Alert · Badge · Avatar · Skeleton · Progress · Accordion
+ * Tabs · Breadcrumb · Pagination · Navbar · Sidebar · DataTable
+ */
+import { type Signal } from "@hyperpackai/hyperion";
+import { type VNode } from "../theme/index.js";
+export interface CardProps {
+    title?: string;
+    description?: string;
+    media?: unknown;
+    footer?: unknown;
+    hoverable?: boolean;
+    variant?: "default" | "ghost" | "elevated";
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+    children?: unknown;
+}
+export declare function Card(props: CardProps): VNode;
+export interface AlertProps {
+    type?: "info" | "success" | "warning" | "error";
+    title?: string;
+    description?: string;
+    icon?: unknown | false;
+    class?: string;
+    children?: unknown;
+}
+export declare function Alert(props: AlertProps): VNode;
+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;
+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;
+export interface SkeletonProps {
+    width?: string | number;
+    height?: string | number;
+    variant?: "rect" | "text" | "circle" | "title";
+    class?: string;
+}
+export declare function Skeleton(props: SkeletonProps): VNode;
+export interface ProgressProps {
+    value?: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    size?: "sm" | "md" | "lg";
+    color?: "primary" | "success" | "error" | "warning";
+    indeterminate?: boolean;
+    class?: string;
+}
+export declare function Progress(props: ProgressProps): VNode;
+export interface TabItem {
+    id: string;
+    label: string;
+    icon?: unknown;
+    badge?: string | number;
+    disabled?: boolean;
+    content: unknown;
+}
+export interface TabsProps {
+    items: TabItem[];
+    defaultTab?: string;
+    activeTab?: string | Signal<string>;
+    variant?: "underline" | "pill";
+    onChange?: (id: string) => void;
+    class?: string;
+}
+export declare function Tabs(props: TabsProps): VNode;
+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;
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: string;
+    class?: string;
+}
+export declare function Breadcrumb(props: BreadcrumbProps): VNode;
+export interface PaginationProps {
+    page: number;
+    totalPages: number;
+    siblingCount?: number;
+    onChange: (page: number) => void;
+    showFirstLast?: boolean;
+    class?: string;
+}
+export declare function Pagination(props: PaginationProps): VNode;
+export interface StepperItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: unknown;
+    optional?: boolean;
+    disabled?: boolean;
+    error?: boolean;
+}
+export interface StepperProps {
+    steps: StepperItem[];
+    activeStep?: string | number;
+    completed?: string[];
+    orientation?: "horizontal" | "vertical";
+    onStepClick?: (id: string, index: number) => void;
+    class?: string;
+}
+export declare function Stepper(props: StepperProps): VNode;
+export interface TimelineItem {
+    id: string;
+    title: string;
+    description?: unknown;
+    time?: string;
+    status?: "default" | "success" | "warning" | "error" | "info";
+    marker?: unknown;
+    actions?: unknown;
+}
+export interface TimelineProps {
+    items: TimelineItem[];
+    class?: string;
+}
+export declare function Timeline(props: TimelineProps): VNode;
+export interface TreeViewItem {
+    id: string;
+    label: string;
+    icon?: unknown;
+    badge?: unknown;
+    disabled?: boolean;
+    children?: TreeViewItem[];
+}
+export interface TreeViewProps {
+    items: TreeViewItem[];
+    expanded?: string[];
+    selected?: string;
+    onToggle?: (id: string, expanded: boolean) => void;
+    onSelect?: (id: string) => void;
+    class?: string;
+}
+export declare function TreeView(props: TreeViewProps): VNode;
+export interface NavLink {
+    label: string;
+    href: string;
+    active?: boolean;
+}
+export interface NavbarProps {
+    brand?: unknown;
+    links?: NavLink[];
+    actions?: unknown;
+    class?: string;
+}
+export declare function Navbar(props: NavbarProps): VNode;
+export interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: unknown;
+    badge?: unknown;
+    href?: string;
+    active?: boolean;
+    onClick?: () => void;
+}
+export interface SidebarSection {
+    label?: string;
+    items: SidebarItem[];
+}
+export interface SidebarProps {
+    header?: unknown;
+    sections: SidebarSection[];
+    footer?: unknown;
+    width?: "sm" | "md" | "lg";
+    class?: string;
+}
+export declare function Sidebar(props: SidebarProps): VNode;
+export interface TableColumn<T> {
+    key: string;
+    header: string;
+    width?: string;
+    sortable?: boolean;
+    render?: (row: T, i: number) => unknown;
+    align?: "left" | "center" | "right";
+}
+export interface DataTableProps<T extends Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    rows: T[];
+    rowKey?: (row: T) => string;
+    sortColumn?: string;
+    sortDir?: "asc" | "desc";
+    onSort?: (key: string) => void;
+    onRowClick?: (row: T) => void;
+    emptyMessage?: string;
+    footer?: unknown;
+    selectable?: boolean;
+    selectedRows?: Set<string>;
+    onSelectRow?: (key: string, selected: boolean) => void;
+    onSelectAll?: (selected: boolean) => void;
+    class?: string;
+}
+export declare function DataTable<T extends Record<string, unknown>>(props: DataTableProps<T>): VNode;
+//# sourceMappingURL=layout.d.ts.map