@hyperpackai/hyperui 0.1.0

package/dist/components/SpeedDial/index.js

@@ -0,0 +1,71 @@
+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--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__fab {
+  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
+  background: var(--hu-primary); color: var(--hu-primary-text);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.25);
+  transition: transform var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease);
+  user-select: none;
+}
+.hu-speed-dial__fab:hover { transform: scale(1.06); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
+.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--top-right .hu-speed-dial__actions,
+.hu-speed-dial--top-left .hu-speed-dial__actions { flex-direction: column; }
+
+.hu-speed-dial__action-wrap {
+  display: flex; align-items: center; gap: var(--hu-space-2);
+  animation: hu-sd-action-in 200ms cubic-bezier(.34,1.56,.64,1) backwards;
+}
+.hu-speed-dial--bottom-right .hu-speed-dial__action-wrap,
+.hu-speed-dial--top-right .hu-speed-dial__action-wrap { flex-direction: row-reverse; }
+
+.hu-speed-dial__action {
+  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
+  background: var(--hu-bg); color: var(--hu-text);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.2);
+  transition: transform var(--hu-duration) var(--hu-ease); user-select: none;
+}
+.hu-speed-dial__action:hover { transform: scale(1.1); background: var(--hu-bg-3); }
+.hu-speed-dial__action-tooltip {
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-medium);
+  background: var(--hu-text); color: var(--hu-bg);
+  padding: 4px 10px; border-radius: var(--hu-radius-sm);
+  white-space: nowrap; pointer-events: none;
+}
+.hu-speed-dial__backdrop {
+  position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.3);
+}
+@keyframes hu-sd-action-in { from { opacity: 0; transform: scale(.6) translateY(8px); } to { opacity: 1; transform: none; } }
+`;
+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", {
+        class: "hu-speed-dial__action-wrap",
+        style: `animation-delay:${i * 40}ms`
+    }, h("button", {
+        class: "hu-speed-dial__action",
+        onClick: () => { action.onClick(); close(); },
+        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"),
+        onClick: toggle,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen.value
+    }, isOpen.value && props.openIcon ? props.openIcon : (props.icon ?? "+")));
+}

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

@@ -0,0 +1,10 @@
+import { type VNode } from "../../theme/index.js";
+export interface SpinnerProps {
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    variant?: "spin" | "dots" | "bars" | "wave" | "pulse" | "orbit";
+    color?: string | "current";
+    class?: string;
+    label?: string;
+}
+export declare function Spinner(props?: SpinnerProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAwCpE,MAAM,WAAW,YAAY;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,OAAO,CAAC,KAAK,GAAE,YAAiB,GAAG,KAAK,CA2CvD"}

package/dist/components/Spinner/index.js

@@ -0,0 +1,67 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const SPINNER_CSS = `
+.hu-spinner {
+  display: inline-flex; align-items: center; justify-content: center;
+  color: var(--hu-primary);
+}
+.hu-spinner svg { display: block; }
+.hu-spinner--spin svg { animation: hu-spin .75s linear infinite; }
+.hu-spinner--pulse svg { animation: hu-pulse 1.15s ease-in-out infinite; }
+.hu-spinner--orbit svg { animation: hu-spin 1.1s cubic-bezier(.55,.15,.45,.85) infinite; }
+.hu-spinner--xs svg, .hu-spinner--xs .hu-spinner-dots, .hu-spinner--xs .hu-spinner-bars, .hu-spinner--xs .hu-spinner-wave { width: 12px; height: 12px; }
+.hu-spinner--sm svg, .hu-spinner--sm .hu-spinner-dots, .hu-spinner--sm .hu-spinner-bars, .hu-spinner--sm .hu-spinner-wave { width: 16px; height: 16px; }
+.hu-spinner--md svg, .hu-spinner--md .hu-spinner-dots, .hu-spinner--md .hu-spinner-bars, .hu-spinner--md .hu-spinner-wave { width: 24px; height: 24px; }
+.hu-spinner--lg svg, .hu-spinner--lg .hu-spinner-dots, .hu-spinner--lg .hu-spinner-bars, .hu-spinner--lg .hu-spinner-wave { width: 36px; height: 36px; }
+.hu-spinner--xl svg, .hu-spinner--xl .hu-spinner-dots, .hu-spinner--xl .hu-spinner-bars, .hu-spinner--xl .hu-spinner-wave { width: 48px; height: 48px; }
+.hu-spinner-dots, .hu-spinner-bars, .hu-spinner-wave {
+  display: inline-flex; align-items: center; justify-content: center; gap: 15%;
+}
+.hu-spinner-dots span {
+  width: 24%; aspect-ratio: 1; border-radius: var(--hu-radius-full); background: currentColor;
+  animation: hu-loader-bounce .9s ease-in-out infinite;
+}
+.hu-spinner-dots span:nth-child(2) { animation-delay: .12s; }
+.hu-spinner-dots span:nth-child(3) { animation-delay: .24s; }
+.hu-spinner-bars span, .hu-spinner-wave span {
+  width: 18%; height: 58%; border-radius: var(--hu-radius-full); background: currentColor;
+  animation: hu-loader-stretch 1s ease-in-out infinite;
+}
+.hu-spinner-bars span:nth-child(2) { animation-delay: .12s; }
+.hu-spinner-bars span:nth-child(3) { animation-delay: .24s; }
+.hu-spinner-wave span:nth-child(1) { animation-delay: 0s; }
+.hu-spinner-wave span:nth-child(2) { animation-delay: .1s; }
+.hu-spinner-wave span:nth-child(3) { animation-delay: .2s; }
+.hu-spinner-wave span:nth-child(4) { animation-delay: .3s; }
+.hu-spinner-wave span:nth-child(5) { animation-delay: .4s; }
+@keyframes hu-loader-bounce { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
+@keyframes hu-loader-stretch { 0%, 80%, 100% { transform: scaleY(.45); opacity: .5; } 40% { transform: scaleY(1); opacity: 1; } }
+`;
+export function Spinner(props = {}) {
+    injectCSS("hu-spinner", SPINNER_CSS);
+    const { size = "md", variant = "spin", color = "var(--hu-primary)", label = "Loading…" } = props;
+    const stroke = color === "current" ? "currentColor" : color;
+    const style = color === "current" ? "color:currentColor" : `color:${color}`;
+    const indicator = (() => {
+        if (variant === "dots") {
+            return h("span", { class: "hu-spinner-dots", "aria-hidden": "true" }, h("span", {}), h("span", {}), h("span", {}));
+        }
+        if (variant === "bars") {
+            return h("span", { class: "hu-spinner-bars", "aria-hidden": "true" }, h("span", {}), h("span", {}), h("span", {}));
+        }
+        if (variant === "wave") {
+            return h("span", { class: "hu-spinner-wave", "aria-hidden": "true" }, h("span", {}), h("span", {}), h("span", {}), h("span", {}), h("span", {}));
+        }
+        if (variant === "pulse") {
+            return h("svg", { viewBox: "0 0 24 24", fill: stroke, "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "8" }));
+        }
+        if (variant === "orbit") {
+            return h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: stroke, "stroke-width": "2", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "8", opacity: ".22" }), h("circle", { cx: "18", cy: "12", r: "3", fill: stroke, stroke: "none" }));
+        }
+        return h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: stroke, "stroke-width": "2.5", "aria-hidden": "true" }, h("path", { d: "M12 2a10 10 0 0 1 10 10", "stroke-linecap": "round" }));
+    })();
+    return h("span", {
+        class: cn("hu-spinner", `hu-spinner--${size}`, `hu-spinner--${variant}`, props.class),
+        style,
+        role: "status", "aria-label": label
+    }, indicator);
+}

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

@@ -0,0 +1,11 @@
+import { type VNode } from "../../theme/index.js";
+export interface SplitPaneProps {
+    orientation?: "horizontal" | "vertical";
+    primarySize?: string | number;
+    separatorLabel?: string;
+    class?: string;
+    start: unknown;
+    end: unknown;
+}
+export declare function SplitPane(props: SplitPaneProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SplitPane/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAgCpE,MAAM,WAAW,cAAc;IAC7B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,GAAG,EAAE,OAAO,CAAC;CACd;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,KAAK,CAqBtD"}

package/dist/components/SplitPane/index.js

@@ -0,0 +1,46 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const SPLIT_PANE_CSS = `
+.hu-split-pane {
+  display: grid; min-width: 0; min-height: 0; overflow: hidden;
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md);
+}
+.hu-split-pane--horizontal { grid-template-columns: minmax(0, var(--hu-split-primary, 50%)) auto minmax(0, 1fr); }
+.hu-split-pane--vertical { grid-template-rows: minmax(0, var(--hu-split-primary, 50%)) auto minmax(0, 1fr); }
+.hu-split-pane__pane { min-width: 0; min-height: 0; overflow: auto; }
+.hu-split-pane__separator {
+  display: flex; align-items: center; justify-content: center;
+  background: var(--hu-bg-3); color: var(--hu-text-3); flex: none;
+}
+.hu-split-pane__separator--horizontal {
+  width: var(--hu-split-handle, 8px); cursor: col-resize; border-inline: 1px solid var(--hu-border);
+}
+.hu-split-pane__separator--vertical {
+  height: var(--hu-split-handle, 8px); cursor: row-resize; border-block: 1px solid var(--hu-border);
+}
+.hu-split-pane__separator:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: -2px; }
+@media (max-width: 768px) {
+  .hu-split-pane--horizontal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
+  .hu-split-pane--horizontal .hu-split-pane__separator { width: auto; height: var(--hu-split-handle, 8px); cursor: row-resize; border-inline: 0; border-block: 1px solid var(--hu-border); }
+}
+`;
+function toCssUnit(value) {
+    return typeof value === "number" ? `${value}px` : value;
+}
+export function SplitPane(props) {
+    injectCSS("hu-split-pane", SPLIT_PANE_CSS);
+    const orientation = props.orientation ?? "horizontal";
+    const style = props.primarySize !== undefined
+        ? `--hu-split-primary:${toCssUnit(props.primarySize)}`
+        : undefined;
+    return h("div", {
+        class: cn("hu-split-pane", `hu-split-pane--${orientation}`, props.class),
+        style
+    }, h("div", { class: "hu-split-pane__pane" }, props.start), h("div", {
+        class: cn("hu-split-pane__separator", `hu-split-pane__separator--${orientation}`),
+        role: "separator",
+        tabindex: "0",
+        "aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal",
+        "aria-label": props.separatorLabel ?? "Resize panels"
+    }), h("div", { class: "hu-split-pane__pane" }, props.end));
+}

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

@@ -0,0 +1,17 @@
+import { type VNode } from "../../theme/index.js";
+export type StackDirection = "row" | "column";
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export type StackJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+export interface StackProps {
+    direction?: StackDirection;
+    spacing?: string | number;
+    alignItems?: StackAlign;
+    justifyContent?: StackJustify;
+    flexWrap?: boolean;
+    divider?: boolean;
+    useFlexGap?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function Stack(props: StackProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqBpE,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAChE,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAExF,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,KAAK,CAkB9C"}

package/dist/components/Stack/index.js

@@ -0,0 +1,30 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const STACK_CSS = `
+.hu-stack { display: flex; }
+.hu-stack--row { flex-direction: row; }
+.hu-stack--column { flex-direction: column; }
+.hu-stack--wrap { flex-wrap: wrap; }
+.hu-stack--align-start   { align-items: flex-start; }
+.hu-stack--align-center  { align-items: center; }
+.hu-stack--align-end     { align-items: flex-end; }
+.hu-stack--align-stretch { align-items: stretch; }
+.hu-stack--justify-start   { justify-content: flex-start; }
+.hu-stack--justify-center  { justify-content: center; }
+.hu-stack--justify-end     { justify-content: flex-end; }
+.hu-stack--justify-between { justify-content: space-between; }
+.hu-stack--justify-around  { justify-content: space-around; }
+.hu-stack--justify-evenly  { justify-content: space-evenly; }
+.hu-stack--divider > * + * { border-top: 1px solid var(--hu-border); }
+.hu-stack--row.hu-stack--divider > * + * { border-top: none; border-left: 1px solid var(--hu-border); }
+`;
+export function Stack(props) {
+    injectCSS("hu-stack", STACK_CSS);
+    const { direction = "column", spacing, alignItems, justifyContent, flexWrap, divider } = props;
+    const gapStyle = spacing !== undefined
+        ? `gap:${typeof spacing === "number" ? `${spacing * 8}px` : spacing}`
+        : undefined;
+    return h("div", {
+        class: cn("hu-stack", `hu-stack--${direction}`, alignItems && `hu-stack--align-${alignItems}`, justifyContent && `hu-stack--justify-${justifyContent}`, flexWrap && "hu-stack--wrap", divider && "hu-stack--divider", props.class),
+        style: gapStyle
+    }, props.children);
+}

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

@@ -0,0 +1,20 @@
+import { type VNode } from "../../theme/index.js";
+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;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAyCpE,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,KAAK,CAuClD"}

package/dist/components/Stepper/index.js

@@ -0,0 +1,66 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const STEPPER_CSS = `
+.hu-stepper { display: flex; gap: var(--hu-space-4); width: 100%; }
+.hu-stepper--vertical { flex-direction: column; }
+.hu-stepper--horizontal { align-items: flex-start; }
+.hu-stepper-step { display: flex; align-items: flex-start; gap: var(--hu-space-3); min-width: 0; position: relative; flex: 1; }
+.hu-stepper--vertical .hu-stepper-step { flex: none; }
+.hu-stepper-step:not(:last-child)::after {
+  content: ""; position: absolute; background: var(--hu-border);
+}
+.hu-stepper--horizontal .hu-stepper-step:not(:last-child)::after {
+  inset-inline-start: calc(var(--hu-space-8) + var(--hu-space-3)); inset-inline-end: var(--hu-space-3);
+  inset-block-start: 16px; height: 1px;
+}
+.hu-stepper--vertical .hu-stepper-step:not(:last-child)::after {
+  inset-inline-start: 16px; inset-block-start: 36px; inset-block-end: calc(-1 * var(--hu-space-4)); width: 1px;
+}
+.hu-stepper-step--complete:not(:last-child)::after { background: var(--hu-success); }
+.hu-stepper-indicator {
+  width: 32px; height: 32px; border-radius: var(--hu-radius-full);
+  display: inline-flex; align-items: center; justify-content: center; flex: none;
+  border: 1px solid var(--hu-border); background: var(--hu-bg); color: var(--hu-text-2);
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-stepper-step--active .hu-stepper-indicator { border-color: var(--hu-primary); background: var(--hu-primary); color: var(--hu-primary-text); }
+.hu-stepper-step--complete .hu-stepper-indicator { border-color: var(--hu-success); background: var(--hu-success); color: #fff; }
+.hu-stepper-step--error .hu-stepper-indicator { border-color: var(--hu-error); background: var(--hu-error); color: #fff; }
+.hu-stepper-step--disabled { opacity: .5; }
+.hu-stepper-content { min-width: 0; }
+.hu-stepper-label { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-stepper-description { margin-block-start: 2px; font-size: var(--hu-font-size-xs); color: var(--hu-text-2); line-height: 1.5; }
+@media (max-width: 640px) {
+  .hu-stepper--horizontal { flex-direction: column; }
+  .hu-stepper--horizontal .hu-stepper-step:not(:last-child)::after {
+    inset-inline-start: 16px; inset-inline-end: auto; inset-block-start: 36px; inset-block-end: calc(-1 * var(--hu-space-4));
+    width: 1px; height: auto;
+  }
+}
+`;
+export function Stepper(props) {
+    injectCSS("hu-stepper", STEPPER_CSS);
+    const { steps, completed = [], orientation = "horizontal", onStepClick } = props;
+    const activeIndex = typeof props.activeStep === "number"
+        ? props.activeStep
+        : Math.max(0, steps.findIndex((step) => step.id === props.activeStep));
+    return h("ol", {
+        class: cn("hu-stepper", `hu-stepper--${orientation}`, props.class),
+        "aria-label": "Progress"
+    }, ...steps.map((step, index) => {
+        const active = index === activeIndex;
+        const complete = completed.includes(step.id) || index < activeIndex;
+        const state = step.error ? "error" : complete ? "complete" : active ? "active" : "pending";
+        const indicator = step.icon ?? (complete ? "✓" : index + 1);
+        return h("li", {
+            key: step.id,
+            class: cn("hu-stepper-step", `hu-stepper-step--${state}`, step.disabled && "hu-stepper-step--disabled"),
+            "aria-current": active ? "step" : undefined
+        }, h(onStepClick && !step.disabled ? "button" : "span", {
+            class: "hu-stepper-indicator",
+            type: onStepClick && !step.disabled ? "button" : undefined,
+            disabled: step.disabled,
+            onClick: onStepClick && !step.disabled ? () => onStepClick(step.id, index) : undefined,
+            "aria-label": `${step.label}: ${state}`
+        }, indicator), h("div", { class: "hu-stepper-content" }, h("div", { class: "hu-stepper-label" }, step.label, step.optional && " (optional)"), step.description && h("div", { class: "hu-stepper-description" }, step.description)));
+    }));
+}

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

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

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

@@ -0,0 +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"}

package/dist/components/Switch/index.js

@@ -0,0 +1,38 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const SWITCH_CSS = `
+.hu-switch-wrap { display: inline-flex; align-items: center; gap: var(--hu-space-3); cursor: pointer; min-height: 30px; max-width: 100%; }
+.hu-switch-wrap--disabled { opacity: .5; cursor: not-allowed; }
+.hu-switch-input { position: absolute; opacity: 0; pointer-events: none; }
+.hu-switch-track {
+  position: relative; width: 40px; height: 22px; border-radius: var(--hu-radius-full);
+  background: linear-gradient(180deg, var(--hu-bg-4), var(--hu-bg-3)); border: 1px solid var(--hu-border);
+  box-shadow: inset 0 1px 2px rgba(0,0,0,.08), var(--hu-shadow-xs);
+  transition: background var(--hu-duration) var(--hu-ease), border-color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease);
+}
+.hu-switch-input:checked ~ .hu-switch-track {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--hu-primary) 86%, white), var(--hu-primary)); border-color: var(--hu-primary);
+}
+.hu-switch-thumb {
+  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
+  border-radius: var(--hu-radius-full); background: white;
+  box-shadow: var(--hu-shadow-sm); transition: transform var(--hu-duration) var(--hu-ease);
+}
+.hu-switch-input:checked ~ .hu-switch-track .hu-switch-thumb {
+  transform: translateX(18px);
+}
+.hu-switch-input:focus-visible ~ .hu-switch-track {
+  outline: 2px solid var(--hu-primary); outline-offset: 2px;
+}
+.hu-switch-label { font-size: var(--hu-font-size-sm); color: var(--hu-text); line-height: var(--hu-line-height-tight); }
+.hu-switch--sm .hu-switch-track { width: 32px; height: 18px; }
+.hu-switch--sm .hu-switch-thumb { width: 12px; height: 12px; }
+.hu-switch--sm .hu-switch-input:checked ~ .hu-switch-track .hu-switch-thumb { transform: translateX(14px); }
+.hu-switch--lg .hu-switch-track { width: 50px; height: 28px; }
+.hu-switch--lg .hu-switch-thumb { width: 22px; height: 22px; }
+.hu-switch--lg .hu-switch-input:checked ~ .hu-switch-track .hu-switch-thumb { transform: translateX(22px); }
+`;
+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));
+}

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

@@ -0,0 +1,20 @@
+import { type VNode } from "../../theme/index.js";
+import { type Signal } from "@hyperpackai/hyperion";
+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;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/Tabs/index.js

@@ -0,0 +1,62 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { signal } from "@hyperpackai/hyperion";
+const TABS_CSS = `
+.hu-tabs { display: flex; flex-direction: column; gap: 0; }
+.hu-tabs-list {
+  display: flex; border-bottom: 2px solid var(--hu-border); overflow-x: auto;
+  scrollbar-width: none; gap: 0;
+}
+.hu-tabs-list::-webkit-scrollbar { display: none; }
+.hu-tabs-list--pill {
+  background: var(--hu-bg-3); border-radius: var(--hu-radius-md); padding: 3px;
+  border-bottom: none; gap: 2px;
+}
+.hu-tabs-trigger {
+  display: inline-flex; align-items: center; gap: var(--hu-space-2); padding: 9px 16px;
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium);
+  color: var(--hu-text-3); border: none; background: transparent; cursor: pointer;
+  position: relative; white-space: nowrap; border-radius: 0;
+  transition: color var(--hu-duration) var(--hu-ease);
+}
+.hu-tabs-trigger:hover { color: var(--hu-text); }
+.hu-tabs-trigger[aria-selected="true"] { color: var(--hu-primary); }
+.hu-tabs-trigger[aria-selected="true"]::after {
+  content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--hu-primary);
+}
+.hu-tabs-list--pill .hu-tabs-trigger { border-radius: var(--hu-radius-sm); padding: 7px 14px; }
+.hu-tabs-list--pill .hu-tabs-trigger[aria-selected="true"] {
+  background: var(--hu-bg); color: var(--hu-text); box-shadow: var(--hu-shadow-xs); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-tabs-list--pill .hu-tabs-trigger[aria-selected="true"]::after { display: none; }
+.hu-tabs-trigger:disabled { opacity: .4; cursor: not-allowed; }
+.hu-tabs-badge { background: var(--hu-bg-4); color: var(--hu-text-2); font-size: 10px; padding: 1px 6px; border-radius: var(--hu-radius-full); }
+.hu-tabs-content { padding-top: var(--hu-space-5); }
+.hu-tabs-content[hidden] { display: none; }
+`;
+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 selectTab = (id) => {
+        if (!controlled && props.activeTab === undefined)
+            uncontrolledActive.value = id;
+        onChange?.(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", {
+        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}`,
+        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", {
+        key: item.id, id: `tabpanel-${item.id}`,
+        class: "hu-tabs-content", role: "tabpanel",
+        hidden: () => getActive() !== item.id || undefined,
+        "aria-labelledby": `tab-${item.id}`
+    }, () => getActive() === item.id ? item.content : null)));
+}

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

@@ -0,0 +1,35 @@
+import { type VNode } from "../../theme/index.js";
+export type TextFieldVariant = "outlined" | "filled" | "standard";
+export type TextFieldSize = "sm" | "md" | "lg";
+export interface TextFieldProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    type?: string;
+    variant?: TextFieldVariant;
+    size?: TextFieldSize;
+    helperText?: string;
+    error?: boolean | string;
+    success?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    fullWidth?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    maxRows?: number;
+    startIcon?: unknown;
+    endIcon?: unknown;
+    maxLength?: number;
+    id?: string;
+    name?: string;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    onChange?: (value: string, e: Event) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    class?: string;
+}
+export declare function TextField(props: TextFieldProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/TextField/index.js

@@ -0,0 +1,69 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const TEXTFIELD_CSS = `
+.hu-textfield { display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.hu-textfield__label { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); line-height: 1.35; }
+.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%; min-height: 40px; padding: 9px 12px;
+  font-size: var(--hu-font-size-sm); font-family: var(--hu-font-sans);
+  background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2)); color: var(--hu-text);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  transition: border-color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), background var(--hu-duration) var(--hu-ease);
+  outline: none; box-sizing: border-box; box-shadow: var(--hu-shadow-xs);
+}
+.hu-textfield__input:hover { border-color: color-mix(in srgb, var(--hu-primary) 35%, var(--hu-border-2)); }
+.hu-textfield__input:focus { border-color: var(--hu-primary); background: var(--hu-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-primary) 18%, transparent), var(--hu-shadow-sm); }
+.hu-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: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2)); }
+.hu-textfield--filled .hu-textfield__input {
+  background: var(--hu-bg-3); border-color: transparent; border-bottom: 2px solid var(--hu-border-2);
+  border-radius: var(--hu-radius-md) var(--hu-radius-md) var(--hu-radius-sm) var(--hu-radius-sm);
+}
+.hu-textfield--filled .hu-textfield__input:focus { border-color: transparent; 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 color-mix(in srgb, var(--hu-error) 18%, transparent); }
+.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); line-height: 1.45; }
+.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 { 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); }
+`;
+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}`));
+}