@hyperpackai/hyperui 0.1.0

package/dist/components/Badge/index.js

@@ -0,0 +1,30 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const BADGE_CSS = `
+.hu-badge {
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+  border-radius: var(--hu-radius-full); font-size: 11px; font-weight: var(--hu-font-weight-semibold);
+  line-height: 1; white-space: nowrap;
+}
+.hu-badge--xs { padding: 2px 6px; }
+.hu-badge--sm { padding: 3px 8px; font-size: 11px; }
+.hu-badge--md { padding: 4px 10px; font-size: var(--hu-font-size-xs); }
+.hu-badge--lg { padding: 5px 12px; font-size: var(--hu-font-size-sm); }
+
+.hu-badge--default    { background: var(--hu-bg-3); color: var(--hu-text-2); }
+.hu-badge--primary    { background: var(--hu-primary-bg); color: var(--hu-primary); }
+.hu-badge--success    { background: var(--hu-success-bg); color: var(--hu-success-text); }
+.hu-badge--warning    { background: var(--hu-warning-bg); color: var(--hu-warning-text); }
+.hu-badge--error      { background: var(--hu-error-bg); color: var(--hu-error-text); }
+.hu-badge--info       { background: var(--hu-info-bg); color: var(--hu-info-text); }
+.hu-badge--solid-primary { background: var(--hu-primary); color: white; }
+.hu-badge--solid-success { background: var(--hu-success); color: white; }
+.hu-badge--solid-error   { background: var(--hu-error); color: white; }
+.hu-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+`;
+export function Badge(props) {
+    injectCSS("hu-badge", BADGE_CSS);
+    const { variant = "default", size = "sm", dot = false } = props;
+    return h("span", {
+        class: cn("hu-badge", `hu-badge--${size}`, `hu-badge--${variant}`, dot && "hu-badge--dot", props.class)
+    }, props.children);
+}

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

@@ -0,0 +1,16 @@
+import { type VNode } from "../../theme/index.js";
+export interface BottomNavigationActionDef {
+    label: string;
+    icon: unknown;
+    value: string;
+}
+export interface BottomNavigationProps {
+    value?: string;
+    showLabels?: boolean;
+    fixed?: boolean;
+    actions: BottomNavigationActionDef[];
+    onChange?: (value: string) => void;
+    class?: string;
+}
+export declare function BottomNavigation(props: BottomNavigationProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BottomNavigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAiCpE,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,yBAAyB,EAAE,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAsBpE"}

package/dist/components/BottomNavigation/index.js

@@ -0,0 +1,43 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CSS = `
+.hu-bottom-nav {
+  display: flex; align-items: stretch;
+  width: 100%; background: var(--hu-bg); border-top: 1px solid var(--hu-border);
+  box-shadow: 0 -2px 8px rgba(0,0,0,.08);
+  height: 56px;
+}
+.hu-bottom-nav--fixed { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; }
+
+.hu-bottom-nav-action {
+  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 2px; padding: 6px 4px 8px; cursor: pointer;
+  background: none; border: none; color: var(--hu-text-2);
+  font-family: var(--hu-font-sans); font-size: 10px; font-weight: var(--hu-font-weight-medium);
+  transition: color var(--hu-duration) var(--hu-ease); user-select: none;
+  position: relative;
+}
+.hu-bottom-nav-action::before {
+  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
+  width: 64px; height: 32px; border-radius: 16px;
+  background: transparent; transition: background var(--hu-duration) var(--hu-ease);
+}
+.hu-bottom-nav-action:hover::before { background: var(--hu-bg-3); }
+.hu-bottom-nav-action--selected { color: var(--hu-primary); }
+.hu-bottom-nav-action--selected::before { background: var(--hu-primary-bg); }
+.hu-bottom-nav-action__icon { font-size: 22px; line-height: 1; z-index: 1; }
+.hu-bottom-nav-action__label { z-index: 1; }
+.hu-bottom-nav-action--hide-label .hu-bottom-nav-action__label { display: none; }
+.hu-bottom-nav-action--selected.hu-bottom-nav-action--hide-label .hu-bottom-nav-action__label { display: block; }
+`;
+export function BottomNavigation(props) {
+    injectCSS("hu-bottom-nav", CSS);
+    const { value, showLabels = false, fixed, actions, onChange } = props;
+    return h("nav", {
+        class: cn("hu-bottom-nav", fixed && "hu-bottom-nav--fixed", props.class)
+    }, ...actions.map(action => h("button", {
+        class: cn("hu-bottom-nav-action", value === action.value && "hu-bottom-nav-action--selected", !showLabels && "hu-bottom-nav-action--hide-label"),
+        onClick: () => onChange?.(action.value),
+        "aria-label": action.label,
+        "aria-current": value === action.value ? "page" : undefined
+    }, h("span", { class: "hu-bottom-nav-action__icon" }, action.icon), h("span", { class: "hu-bottom-nav-action__label" }, action.label))));
+}

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

@@ -0,0 +1,21 @@
+import { type VNode } from "../../theme/index.js";
+export interface BoxProps {
+    component?: string;
+    display?: string;
+    flexDirection?: string;
+    alignItems?: string;
+    justifyContent?: string;
+    gap?: string | number;
+    padding?: string | number;
+    margin?: string | number;
+    width?: string | number;
+    height?: string | number;
+    overflow?: string;
+    position?: string;
+    style?: string;
+    class?: string;
+    onClick?: (e: MouseEvent) => void;
+    children?: unknown;
+}
+export declare function Box(props: BoxProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,QAAQ;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,GAAG,KAAK,CAqB1C"}

package/dist/components/Box/index.js

@@ -0,0 +1,30 @@
+import { h } from "../../theme/index.js";
+export function Box(props) {
+    const { component = "div", display, flexDirection, alignItems, justifyContent, gap, padding, margin, width, height, overflow, position, style, onClick, children } = props;
+    const styles = [];
+    if (display)
+        styles.push(`display:${display}`);
+    if (flexDirection)
+        styles.push(`flex-direction:${flexDirection}`);
+    if (alignItems)
+        styles.push(`align-items:${alignItems}`);
+    if (justifyContent)
+        styles.push(`justify-content:${justifyContent}`);
+    if (gap !== undefined)
+        styles.push(`gap:${typeof gap === "number" ? `${gap}px` : gap}`);
+    if (padding !== undefined)
+        styles.push(`padding:${typeof padding === "number" ? `${padding}px` : padding}`);
+    if (margin !== undefined)
+        styles.push(`margin:${typeof margin === "number" ? `${margin}px` : margin}`);
+    if (width !== undefined)
+        styles.push(`width:${typeof width === "number" ? `${width}px` : width}`);
+    if (height !== undefined)
+        styles.push(`height:${typeof height === "number" ? `${height}px` : height}`);
+    if (overflow)
+        styles.push(`overflow:${overflow}`);
+    if (position)
+        styles.push(`position:${position}`);
+    if (style)
+        styles.push(style);
+    return h(component, { class: props.class, style: styles.join(";") || undefined, onClick }, children);
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAWpE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,KAAK,CAiBxD"}

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,19 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const BREADCRUMB_CSS = `
+.hu-breadcrumb { display: flex; align-items: center; gap: var(--hu-space-1); flex-wrap: wrap; }
+.hu-breadcrumb-item { display: flex; align-items: center; gap: var(--hu-space-1); }
+.hu-breadcrumb-link { font-size: var(--hu-font-size-sm); color: var(--hu-text-3); text-decoration: none; transition: color var(--hu-duration) var(--hu-ease); }
+.hu-breadcrumb-link:hover { color: var(--hu-text); }
+.hu-breadcrumb-current { font-size: var(--hu-font-size-sm); color: var(--hu-text); font-weight: var(--hu-font-weight-medium); }
+.hu-breadcrumb-sep { color: var(--hu-text-3); font-size: var(--hu-font-size-sm); user-select: none; }
+`;
+export function Breadcrumb(props) {
+    injectCSS("hu-breadcrumb", BREADCRUMB_CSS);
+    const { items, separator = "/" } = props;
+    return h("nav", { class: cn("hu-breadcrumb", props.class), "aria-label": "Breadcrumb" }, ...items.map((item, i) => h("span", { key: item.label, class: "hu-breadcrumb-item" }, i < items.length - 1
+        ? h(item.href ? "a" : "button", {
+            class: "hu-breadcrumb-link",
+            href: item.href, onClick: item.onClick
+        }, item.label)
+        : h("span", { class: "hu-breadcrumb-current", "aria-current": "page" }, item.label), i < items.length - 1 && h("span", { class: "hu-breadcrumb-sep", "aria-hidden": "true" }, separator))));
+}

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

@@ -0,0 +1,22 @@
+import { type VNode } from "../../theme/index.js";
+export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
+export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl" | "icon";
+export interface ButtonProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    disabled?: boolean;
+    full?: boolean;
+    type?: "button" | "submit" | "reset";
+    href?: string;
+    target?: string;
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+    id?: string;
+    "aria-label"?: string;
+    children?: unknown;
+    icon?: unknown;
+    iconRight?: unknown;
+}
+export declare function Button(props: ButtonProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA0EpE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,GAAG,MAAM,CAAC;AACnG,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEnE,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,KAAK,CAgChD"}

package/dist/components/Button/index.js

@@ -0,0 +1,93 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+import { Spinner } from "../Spinner/index.js";
+const BUTTON_CSS = `
+.hu-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: var(--hu-space-2);
+  font-family: var(--hu-font-sans); font-size: var(--hu-font-size-sm);
+  font-weight: var(--hu-font-weight-semibold); line-height: 1;
+  border: 1px solid transparent; border-radius: var(--hu-radius-md);
+  cursor: pointer; white-space: nowrap; user-select: none;
+  transition: background var(--hu-duration) var(--hu-ease), border-color var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), transform var(--hu-duration-fast) var(--hu-ease);
+  text-decoration: none; position: relative; overflow: hidden;
+  letter-spacing: 0; min-height: 36px;
+}
+.hu-btn:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-btn:disabled, .hu-btn--disabled { opacity: .5; pointer-events: none; cursor: not-allowed; }
+.hu-btn--loading { pointer-events: none; }
+.hu-btn--loading .hu-btn__text { opacity: 0; }
+.hu-btn__spinner {
+  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+}
+
+/* Variants */
+.hu-btn--primary {
+  background: linear-gradient(180deg, var(--hu-primary-lt), var(--hu-primary));
+  color: var(--hu-primary-text); border-color: color-mix(in srgb, var(--hu-primary) 80%, black);
+  box-shadow: 0 1px 2px rgb(0 0 0/.12), 0 8px 18px color-mix(in srgb, var(--hu-primary) 28%, transparent);
+}
+.hu-btn--primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--hu-primary), var(--hu-primary-dk)); border-color: var(--hu-primary-dk); box-shadow: 0 2px 4px rgb(0 0 0/.16), 0 10px 22px color-mix(in srgb, var(--hu-primary) 34%, transparent); transform: translateY(-1px); }
+.hu-btn--primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
+
+.hu-btn--secondary {
+  background: var(--hu-bg-2); color: var(--hu-text); border-color: var(--hu-border);
+  box-shadow: var(--hu-shadow-xs);
+}
+.hu-btn--secondary:hover:not(:disabled) { background: var(--hu-bg-3); border-color: var(--hu-border-2); transform: translateY(-1px); }
+
+.hu-btn--outline {
+  background: color-mix(in srgb, var(--hu-primary-bg) 40%, transparent);
+  color: var(--hu-primary); border-color: color-mix(in srgb, var(--hu-primary) 58%, var(--hu-border));
+}
+.hu-btn--outline:hover:not(:disabled) { background: var(--hu-primary-bg); border-color: var(--hu-primary); box-shadow: 0 6px 14px color-mix(in srgb, var(--hu-primary) 18%, transparent); transform: translateY(-1px); }
+
+.hu-btn--ghost {
+  background: transparent; color: var(--hu-text-2); border-color: transparent;
+}
+.hu-btn--ghost:hover:not(:disabled) { background: var(--hu-bg-3); color: var(--hu-text); }
+
+.hu-btn--destructive {
+  background: linear-gradient(180deg, #fb7185, var(--hu-error)); color: #fff; border-color: var(--hu-error);
+  box-shadow: 0 1px 2px rgb(0 0 0/.12), 0 8px 18px rgb(239 68 68/.26);
+}
+.hu-btn--destructive:hover:not(:disabled) { background: #dc2626; box-shadow: 0 2px 6px rgb(239 68 68/.4); transform: translateY(-1px); }
+
+.hu-btn--link {
+  background: none; color: var(--hu-primary); border: none;
+  padding: 0; text-decoration: underline; text-underline-offset: 3px;
+}
+.hu-btn--link:hover:not(:disabled) { color: var(--hu-primary-dk); }
+
+/* Sizes */
+.hu-btn--xs { padding: 5px 10px; min-height: 28px; font-size: var(--hu-font-size-xs); border-radius: var(--hu-radius); }
+.hu-btn--sm { padding: 7px 14px; min-height: 32px; font-size: var(--hu-font-size-sm); }
+.hu-btn--md { padding: 9px 18px; min-height: 38px; font-size: var(--hu-font-size-sm); }
+.hu-btn--lg { padding: 12px 24px; min-height: 44px; font-size: var(--hu-font-size-base); border-radius: var(--hu-radius-md); }
+.hu-btn--xl { padding: 14px 32px; min-height: 50px; font-size: var(--hu-font-size-md); border-radius: var(--hu-radius-lg); }
+.hu-btn--icon { padding: 9px; width: 38px; min-width: 38px; }
+.hu-btn--icon.hu-btn--sm { padding: 7px; }
+.hu-btn--icon.hu-btn--lg { padding: 12px; }
+
+/* Full width */
+.hu-btn--full { width: 100%; }
+`;
+export function Button(props) {
+    injectCSS("hu-btn", BUTTON_CSS);
+    const { variant = "primary", size = "md", loading = false, disabled = false, full = false, type = "button", href, target, onClick, children, icon, iconRight } = props;
+    const cls = cn("hu-btn", `hu-btn--${variant}`, `hu-btn--${size}`, loading && "hu-btn--loading", disabled && "hu-btn--disabled", full && "hu-btn--full", props.class);
+    const content = [];
+    if (loading)
+        content.push(h("span", { class: "hu-btn__spinner" }, Spinner({ size: "sm", color: "current" })));
+    const inner = [];
+    if (icon)
+        inner.push(icon);
+    inner.push(h("span", { class: "hu-btn__text" }, children));
+    if (iconRight)
+        inner.push(iconRight);
+    content.push(...inner);
+    return h(href ? "a" : "button", {
+        class: cls, disabled: disabled || loading, type: href ? undefined : type,
+        href, target, onClick,
+        "aria-label": props["aria-label"], id: props.id,
+        "aria-disabled": disabled || loading ? "true" : undefined
+    }, ...content);
+}

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

@@ -0,0 +1,9 @@
+import { type VNode } from "../../theme/index.js";
+export interface ButtonGroupProps {
+    orientation?: "horizontal" | "vertical";
+    fullWidth?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function ButtonGroup(props: ButtonGroupProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAqBpE,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAY1D"}

package/dist/components/ButtonGroup/index.js

@@ -0,0 +1,27 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const BUTTON_GROUP_CSS = `
+.hu-btn-group {
+  display: inline-flex; align-items: stretch; max-width: 100%;
+  border-radius: var(--hu-radius-md); box-shadow: var(--hu-shadow-xs);
+}
+.hu-btn-group--full { width: 100%; }
+.hu-btn-group--vertical { flex-direction: column; overflow: hidden; }
+.hu-btn-group--horizontal { overflow-x: auto; }
+.hu-btn-group .hu-btn { border-radius: 0; position: relative; box-shadow: none; flex-shrink: 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-md) 0 0 var(--hu-radius-md); }
+.hu-btn-group--horizontal .hu-btn:last-child  { border-radius: 0 var(--hu-radius-md) var(--hu-radius-md) 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-md) var(--hu-radius-md) 0 0; }
+.hu-btn-group--vertical .hu-btn:last-child  { border-radius: 0 0 var(--hu-radius-md) var(--hu-radius-md); border-bottom-width: 1px; }
+.hu-btn-group .hu-btn:hover { z-index: 1; }
+.hu-btn-group .hu-btn:focus-visible { z-index: 2; }
+`;
+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);
+}

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

@@ -0,0 +1,14 @@
+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;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AA2BpE,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;IAC3C,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAgB5C"}

package/dist/components/Card/index.js

@@ -0,0 +1,33 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CARD_CSS = `
+.hu-card {
+  background: linear-gradient(180deg, var(--hu-bg), color-mix(in srgb, var(--hu-bg-2) 62%, var(--hu-bg)));
+  border: 1px solid color-mix(in srgb, var(--hu-border) 78%, transparent);
+  border-radius: var(--hu-radius-lg); overflow: hidden;
+  box-shadow: var(--hu-shadow-sm);
+}
+.hu-card--hoverable { transition: box-shadow var(--hu-duration) var(--hu-ease), transform var(--hu-duration) var(--hu-ease); cursor: pointer; }
+.hu-card--hoverable:hover { box-shadow: var(--hu-shadow-md); transform: translateY(-2px); }
+.hu-card--ghost { border: none; box-shadow: none; background: transparent; }
+.hu-card--elevated { box-shadow: var(--hu-shadow-md); border-color: transparent; }
+
+.hu-card-header { padding: var(--hu-space-5) var(--hu-space-6) 0; }
+.hu-card-title { margin: 0; font-size: var(--hu-font-size-md); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); line-height: var(--hu-line-height-tight); }
+.hu-card-desc { font-size: var(--hu-font-size-sm); color: var(--hu-text-2); margin: var(--hu-space-1) 0 0; line-height: var(--hu-line-height-normal); }
+.hu-card-media img, .hu-card-media video { width: 100%; display: block; object-fit: cover; }
+.hu-card-body { padding: var(--hu-space-5) var(--hu-space-6); }
+.hu-card-footer {
+  padding: var(--hu-space-4) var(--hu-space-6);
+  border-top: 1px solid var(--hu-border);
+  background: color-mix(in srgb, var(--hu-bg-2) 70%, transparent);
+  display: flex; align-items: center; gap: var(--hu-space-2); flex-wrap: wrap;
+}
+`;
+export function Card(props) {
+    injectCSS("hu-card", CARD_CSS);
+    const { title, description, media, footer, hoverable = false, variant = "default", onClick, children } = props;
+    return h("div", {
+        class: cn("hu-card", hoverable && "hu-card--hoverable", variant !== "default" && `hu-card--${variant}`, props.class),
+        onClick
+    }, media && h("div", { class: "hu-card-media" }, media), (title || description) && h("div", { class: "hu-card-header" }, title && h("h3", { class: "hu-card-title" }, title), description && h("p", { class: "hu-card-desc" }, description)), children && h("div", { class: "hu-card-body" }, children), footer && h("div", { class: "hu-card-footer" }, footer));
+}

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

@@ -0,0 +1,17 @@
+import { type VNode } from "../../theme/index.js";
+export interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    name?: string;
+    value?: string;
+    label?: string;
+    description?: string;
+    class?: string;
+    onChange?: (e: Event) => void;
+}
+export declare function Checkbox(props: CheckboxProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Checkbox/index.js

@@ -0,0 +1,42 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CHECKBOX_CSS = `
+.hu-checkbox-wrap {
+  display: inline-flex; align-items: center; gap: var(--hu-space-2); cursor: pointer;
+  min-height: 28px; max-width: 100%;
+}
+.hu-checkbox-wrap--disabled { opacity: .5; cursor: not-allowed; }
+.hu-checkbox {
+  appearance: none; width: 18px; height: 18px; min-width: 18px;
+  border: 1.5px solid var(--hu-border-2); border-radius: var(--hu-radius-xs);
+  background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2)); cursor: pointer; position: relative;
+  box-shadow: 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);
+  margin: 0;
+}
+.hu-checkbox:hover { border-color: var(--hu-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hu-primary) 10%, transparent); }
+.hu-checkbox:checked {
+  background: linear-gradient(180deg, color-mix(in srgb, var(--hu-primary) 88%, white), var(--hu-primary));
+  border-color: var(--hu-primary);
+}
+.hu-checkbox:checked::after {
+  content: ""; position: absolute; left: 5px; top: 2px;
+  width: 5px; height: 9px; border: 2px solid white;
+  border-top: none; border-left: none; transform: rotate(45deg);
+}
+.hu-checkbox:indeterminate {
+  background: var(--hu-primary); border-color: var(--hu-primary);
+}
+.hu-checkbox:indeterminate::after {
+  content: ""; position: absolute; left: 3px; top: 6px;
+  width: 8px; height: 2px; background: white; border-radius: 2px;
+}
+.hu-checkbox:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 2px; }
+.hu-checkbox-text { display: inline-flex; flex-direction: column; justify-content: center; min-height: 22px; min-width: 0; }
+.hu-checkbox-label { font-size: var(--hu-font-size-sm); color: var(--hu-text); line-height: var(--hu-line-height-tight); }
+.hu-checkbox-desc { font-size: var(--hu-font-size-xs); color: var(--hu-text-3); margin-top: 2px; line-height: var(--hu-line-height-normal); }
+`;
+export function Checkbox(props) {
+    injectCSS("hu-checkbox", CHECKBOX_CSS);
+    const { label, description, disabled, id, ...rest } = props;
+    return h("label", { class: cn("hu-checkbox-wrap", disabled && "hu-checkbox-wrap--disabled", props.class) }, h("input", { ...rest, type: "checkbox", id, disabled, class: "hu-checkbox" }), (label || description) && h("span", { class: "hu-checkbox-text" }, label && h("span", { class: "hu-checkbox-label" }, label), description && h("span", { class: "hu-checkbox-desc" }, description)));
+}

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

@@ -0,0 +1,18 @@
+import { type VNode } from "../../theme/index.js";
+export type ChipColor = "default" | "primary" | "secondary" | "error" | "warning" | "info" | "success";
+export type ChipVariant = "filled" | "outlined";
+export type ChipSize = "sm" | "md" | "lg";
+export interface ChipProps {
+    label: string;
+    color?: ChipColor;
+    variant?: ChipVariant;
+    size?: ChipSize;
+    icon?: unknown;
+    avatar?: string;
+    onDelete?: () => void;
+    onClick?: (e: MouseEvent) => void;
+    disabled?: boolean;
+    class?: string;
+}
+export declare function Chip(props: ChipProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAgDpE,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC;AACvG,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,KAAK,CAwB5C"}

package/dist/components/Chip/index.js

@@ -0,0 +1,60 @@
+import { injectCSS, cn, h } from "../../theme/index.js";
+const CHIP_CSS = `
+.hu-chip {
+  display: inline-flex; align-items: center; gap: var(--hu-space-1);
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-medium);
+  font-family: var(--hu-font-sans); border-radius: 9999px;
+  border: 1px solid transparent; white-space: nowrap;
+  user-select: none;
+  transition: background var(--hu-duration) var(--hu-ease), border-color var(--hu-duration) var(--hu-ease), color var(--hu-duration) var(--hu-ease), box-shadow var(--hu-duration) var(--hu-ease), transform var(--hu-duration-fast) var(--hu-ease), filter var(--hu-duration) var(--hu-ease);
+  vertical-align: middle;
+}
+.hu-chip--sm  { height: 24px; padding: 0 var(--hu-space-2); font-size: 11px; }
+.hu-chip--md  { height: 32px; padding: 0 var(--hu-space-3); }
+.hu-chip--lg  { height: 40px; padding: 0 var(--hu-space-4); font-size: var(--hu-font-size-sm); }
+
+.hu-chip--filled-default   { background: linear-gradient(180deg, var(--hu-bg-2), var(--hu-bg-3)); color: var(--hu-text); border-color: var(--hu-border); }
+.hu-chip--filled-primary   { background: linear-gradient(180deg, color-mix(in srgb, var(--hu-primary) 86%, white), var(--hu-primary)); color: var(--hu-primary-text); }
+.hu-chip--filled-secondary { background: var(--hu-bg-4); color: var(--hu-text-2); border-color: var(--hu-border); }
+.hu-chip--filled-error     { background: var(--hu-error); color: #fff; }
+.hu-chip--filled-warning   { background: var(--hu-warning); color: #fff; }
+.hu-chip--filled-info      { background: var(--hu-info); color: #fff; }
+.hu-chip--filled-success   { background: var(--hu-success); color: #fff; }
+
+.hu-chip--outlined-default   { background: transparent; border-color: var(--hu-border); color: var(--hu-text); }
+.hu-chip--outlined-primary   { background: transparent; border-color: var(--hu-primary); color: var(--hu-primary); }
+.hu-chip--outlined-error     { background: transparent; border-color: var(--hu-error); color: var(--hu-error); }
+.hu-chip--outlined-warning   { background: transparent; border-color: var(--hu-warning); color: var(--hu-warning); }
+.hu-chip--outlined-info      { background: transparent; border-color: var(--hu-info); color: var(--hu-info); }
+.hu-chip--outlined-success   { background: transparent; border-color: var(--hu-success); color: var(--hu-success); }
+
+.hu-chip--clickable { cursor: pointer; }
+.hu-chip--clickable:hover { filter: brightness(.96); box-shadow: var(--hu-shadow-xs); transform: translateY(-1px); }
+.hu-chip--clickable:active { transform: scale(.97); }
+.hu-chip--disabled { opacity: .5; pointer-events: none; }
+
+.hu-chip__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-left: -4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--hu-bg) 84%, transparent); }
+.hu-chip__icon { width: 16px; height: 16px; flex-shrink: 0; }
+.hu-chip__delete {
+  display: flex; align-items: center; justify-content: center;
+  width: 18px; height: 18px; border-radius: 50%; margin-right: -4px;
+  background: none; border: none; cursor: pointer; color: inherit; opacity: .7; padding: 0;
+  font-size: 14px; line-height: 1;
+}
+.hu-chip__delete:hover { opacity: 1; background: rgba(0,0,0,.1); }
+.hu-chip__delete:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
+`;
+export function Chip(props) {
+    injectCSS("hu-chip", CHIP_CSS);
+    const { label, color = "default", variant = "filled", size = "md", icon, avatar, onDelete, onClick, disabled } = props;
+    return h("div", {
+        class: cn("hu-chip", `hu-chip--${size}`, `hu-chip--${variant}-${color}`, onClick && "hu-chip--clickable", disabled && "hu-chip--disabled", props.class),
+        onClick,
+        role: onClick ? "button" : undefined,
+        tabindex: onClick ? "0" : undefined
+    }, avatar && h("img", { class: "hu-chip__avatar", src: avatar, alt: "" }), icon && h("span", { class: "hu-chip__icon" }, icon), h("span", {}, label), onDelete && h("button", {
+        class: "hu-chip__delete",
+        onClick: (e) => { e.stopPropagation(); onDelete(); },
+        "aria-label": "delete"
+    }, "×"));
+}

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

@@ -0,0 +1,14 @@
+import { type VNode } from "../../theme/index.js";
+export type CircularProgressColor = "primary" | "secondary" | "error" | "warning" | "success" | "inherit";
+export type CircularProgressVariant = "determinate" | "indeterminate";
+export interface CircularProgressProps {
+    value?: number;
+    variant?: CircularProgressVariant;
+    color?: CircularProgressColor;
+    size?: number;
+    thickness?: number;
+    showLabel?: boolean;
+    class?: string;
+}
+export declare function CircularProgress(props: CircularProgressProps): VNode;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CircularProgress/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAmCpE,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAC1G,MAAM,MAAM,uBAAuB,GAAG,aAAa,GAAG,eAAe,CAAC;AAEtE,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,uBAAuB,CAAC;IAClC,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAgCpE"}