@lab206/ui 0.1.0

package/dist/components/Drawer.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@lab206/dom/jsx-runtime";
+import { effect } from "@lab206/core";
+import { component, mergeProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+import { attachOverlay } from "../overlay.js";
+import { readBool } from "../reactive.js";
+const ensure = createStyleSheet("drawer", `
+.pu-drawer-root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--pu-z-overlay);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--pu-duration) var(--pu-ease-out),
+    visibility var(--pu-duration) var(--pu-ease-out);
+}
+.pu-drawer-root--open {
+  pointer-events: auto;
+  opacity: 1;
+  visibility: visible;
+}
+.pu-drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--pu-overlay-scrim);
+  backdrop-filter: blur(4px);
+}
+.pu-drawer-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: min(22rem, 92vw);
+  background: var(--pu-color-surface-elevated);
+  color: var(--pu-color-text);
+  border: 0 solid var(--pu-color-border);
+  box-shadow: var(--pu-shadow-float);
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--pu-duration-slow) var(--pu-ease-out);
+}
+.pu-drawer-panel--right {
+  right: 0;
+  border-left-width: 1px;
+  transform: translateX(100%);
+}
+.pu-drawer-panel--left {
+  left: 0;
+  border-right-width: 1px;
+  transform: translateX(-100%);
+}
+.pu-drawer-root--open .pu-drawer-panel { transform: translateX(0); }
+.pu-drawer__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: var(--pu-space-4);
+  border-bottom: 1px solid var(--pu-color-border);
+}
+.pu-drawer__title {
+  margin: 0;
+  font-size: var(--pu-text-lg);
+  font-weight: var(--pu-font-bold);
+  letter-spacing: var(--pu-tracking-tight);
+}
+.pu-drawer__close {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--pu-color-text-muted);
+  font-size: 1.2rem;
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--pu-radius-md);
+}
+.pu-drawer__close:hover {
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text);
+}
+.pu-drawer__close:focus-visible {
+  outline: none;
+  color: var(--pu-color-text);
+  box-shadow:
+    0 0 0 2px var(--pu-color-surface-elevated),
+    0 0 0 4px color-mix(in srgb, var(--pu-color-focus) 55%, transparent);
+}
+.pu-drawer__body {
+  padding: var(--pu-space-4);
+  overflow: auto;
+  flex: 1;
+  font-size: var(--pu-text-sm);
+  line-height: 1.55;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-drawer-root, .pu-drawer-panel { transition: none; }
+}
+`);
+/** Slide-over panel. Esc + backdrop + focus trap via shared `attachOverlay`. */
+export const Drawer = component((raw) => {
+    ensure();
+    const props = mergeProps({ side: "right" }, raw);
+    const isOpen = () => readBool(props.open);
+    let rootEl = null;
+    let panelEl = null;
+    effect(() => {
+        if (!isOpen())
+            return;
+        return attachOverlay({
+            getRoot: () => rootEl,
+            getFocusRoot: () => panelEl,
+            onClose: () => props.onClose?.(),
+            scrollLock: true,
+            escape: true,
+            onAttach: ({ doc }) => {
+                ensure(doc);
+            },
+        });
+    });
+    return (_jsxs("div", { class: () => cx("pu-drawer-root", isOpen() && "pu-drawer-root--open", typeof props.class === "function"
+            ? props.class()
+            : props.class), "aria-hidden": () => (!isOpen() ? "true" : "false"), ref: (el) => {
+            rootEl = el;
+            ensure(el.ownerDocument);
+        }, children: [_jsx("div", { class: "pu-drawer-backdrop", onClick: () => props.onClose?.(), "aria-hidden": "true" }), _jsxs("div", { class: () => cx("pu-drawer-panel", `pu-drawer-panel--${props.side}`), role: "dialog", "aria-modal": "true", ref: (el) => {
+                    panelEl = el;
+                }, children: [(props.title || props.onClose) && (_jsxs("div", { class: "pu-drawer__head", children: [props.title ? (_jsx("h2", { class: "pu-drawer__title", children: props.title })) : (_jsx("span", {})), props.onClose ? (_jsx("button", { type: "button", class: "pu-drawer__close", "aria-label": "Close", onClick: () => props.onClose?.(), children: "\u00D7" })) : null] })), _jsx("div", { class: "pu-drawer__body", children: props.children })] })] }));
+});
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/components/Drawer.tsx"],"names":[],"mappings":"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"}

package/dist/components/Empty.d.ts

@@ -0,0 +1,17 @@
+export type EmptyProps = {
+    title?: string;
+    description?: string;
+    /** Optional emoji / icon glyph */
+    icon?: string;
+    class?: string | (() => string);
+    children?: unknown;
+};
+/** Empty state for lists, tables, and panels. */
+export declare const Empty: import("@lab206/dom").Component<{
+    title?: string;
+    description?: string;
+    icon?: string;
+    class?: string | (() => string);
+    children?: unknown;
+}>;
+//# sourceMappingURL=Empty.d.ts.map

package/dist/components/Empty.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.d.ts","sourceRoot":"","sources":["../../src/components/Empty.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kCAAkC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA8CF,iDAAiD;AACjD,eAAO,MAAM,KAAK;YArDR,MAAM;kBACA,MAAM;WAEb,MAAM;YACL,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC;eACpB,OAAO;EA2ElB,CAAC"}

package/dist/components/Empty.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@lab206/dom/jsx-runtime";
+import { component } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+const ensure = createStyleSheet("empty", `
+.pu-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+  padding: 2.5rem 1.5rem;
+  border: 1px dashed var(--pu-color-border);
+  border-radius: var(--pu-radius-lg);
+  background: color-mix(in srgb, var(--pu-color-surface-2) 50%, transparent);
+}
+.pu-empty__icon {
+  font-size: 1.75rem;
+  line-height: 1;
+  opacity: 0.85;
+  margin-bottom: 0.25rem;
+}
+.pu-empty__title {
+  margin: 0;
+  font-size: var(--pu-text-md);
+  font-weight: var(--pu-font-semibold);
+  color: var(--pu-color-text);
+}
+.pu-empty__desc {
+  margin: 0;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text-muted);
+  max-width: 22rem;
+  line-height: 1.5;
+}
+.pu-empty__actions {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+`);
+/** Empty state for lists, tables, and panels. */
+export const Empty = component((raw) => {
+    ensure();
+    const props = raw;
+    return (_jsxs("div", { class: () => cx("pu-empty", typeof props.class === "function" ? props.class() : props.class), ref: (el) => ensure(el.ownerDocument), children: [props.icon ? (_jsx("div", { class: "pu-empty__icon", "aria-hidden": "true", children: props.icon })) : null, props.title ? _jsx("h3", { class: "pu-empty__title", children: props.title }) : null, props.description ? (_jsx("p", { class: "pu-empty__desc", children: props.description })) : null, props.children ? (_jsx("div", { class: "pu-empty__actions", children: props.children })) : null] }));
+});
+//# sourceMappingURL=Empty.js.map

package/dist/components/Empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.js","sourceRoot":"","sources":["../../src/components/Empty.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAWhD,MAAM,MAAM,GAAG,gBAAgB,CAC7B,OAAO,EACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCD,CACA,CAAC;AAEF,iDAAiD;AACjD,MAAM,CAAC,MAAM,KAAK,GAAG,SAAS,CAAC,CAAC,GAAe,EAAE,EAAE;IACjD,MAAM,EAAE,CAAC;IACT,MAAM,KAAK,GAAG,GAAiC,CAAC;IAChD,OAAO,CACL,eACE,KAAK,EAAE,GAAG,EAAE,CACV,EAAE,CACA,UAAU,EACV,OAAO,KAAK,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAChE,EAEH,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,aAEpC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,cAAK,KAAK,EAAC,gBAAgB,iBAAa,MAAM,YAC3C,KAAK,CAAC,IAAI,GACP,CACP,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAI,KAAK,EAAC,iBAAiB,YAAE,KAAK,CAAC,KAAK,GAAM,CAAC,CAAC,CAAC,IAAI,EACnE,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CACnB,YAAG,KAAK,EAAC,gBAAgB,YAAE,KAAK,CAAC,WAAW,GAAK,CAClD,CAAC,CAAC,CAAC,IAAI,EACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAChB,cAAK,KAAK,EAAC,mBAAmB,YAAE,KAAK,CAAC,QAAiB,GAAO,CAC/D,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/Field.d.ts

@@ -0,0 +1,27 @@
+export type FieldProps = {
+    label?: string;
+    /** Explicit control id. When omitted, Field generates one and wires the first control. */
+    htmlFor?: string;
+    hint?: string | (() => string);
+    error?: string | (() => string | undefined | null | false);
+    required?: boolean;
+    class?: string | (() => string);
+    children?: unknown;
+};
+/**
+ * Form field layout: label + control + hint/error.
+ *
+ * - Auto-wires `htmlFor` / control `id` when you pass a `label` (unless `htmlFor` set)
+ * - Mirrors error/hint onto `aria-invalid` / `aria-describedby` on the control
+ * - Error region never uses role="alert" (avoids scroll/steal focus while typing)
+ */
+export declare const Field: import("@lab206/dom").Component<{
+    label?: string;
+    htmlFor?: string;
+    hint?: string | (() => string);
+    error?: string | (() => string | undefined | null | false);
+    required?: boolean;
+    class?: string | (() => string);
+    children?: unknown;
+}>;
+//# sourceMappingURL=Field.d.ts.map

package/dist/components/Field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"AAKA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAwDF;;;;;;GAMG;AACH,eAAO,MAAM,KAAK;YAvER,MAAM;cAEJ,MAAM;WACT,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC;YACtB,MAAM,GAAG,CAAC,MAAM,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC;eAC/C,OAAO;YACV,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC;eACpB,OAAO;EA0KlB,CAAC"}

package/dist/components/Field.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@lab206/dom/jsx-runtime";
+import { effect } from "@lab206/core";
+import { component, mergeProps } from "@lab206/dom";
+import { cx, puId } from "../utils.js";
+import { Label } from "./Label.js";
+const styles = `
+.pu-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pu-field-gap);
+  min-width: 0;
+}
+/* Stable footer slot — prevents layout shift (and scroll jumps) when errors appear */
+.pu-field__footer {
+  min-height: 1.25em;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.pu-field__hint,
+.pu-field__error {
+  margin: 0;
+  font-size: var(--pu-text-xs);
+  line-height: 1.35;
+  min-height: 1.25em;
+}
+.pu-field__hint {
+  color: var(--pu-color-text-muted);
+}
+.pu-field__error {
+  color: var(--pu-color-danger);
+  font-weight: var(--pu-font-medium);
+}
+.pu-field__error:empty,
+.pu-field__hint:empty {
+  /* keep box for layout; empty text has zero width but min-height holds space when one is shown */
+}
+.pu-field--invalid :is(.pu-input, .pu-textarea, .pu-select) {
+  border-color: var(--pu-color-danger);
+}
+`;
+let injected = false;
+function ensureStyles() {
+    if (injected || typeof document === "undefined")
+        return;
+    injected = true;
+    const el = document.createElement("style");
+    el.setAttribute("data-pu-ui", "field");
+    el.textContent = styles;
+    document.head.appendChild(el);
+}
+const CONTROL_SEL = "input:not([type='hidden']):not([type='checkbox']):not([type='radio']), textarea, select, [role='combobox'], .pu-select";
+function findControl(root) {
+    return root.querySelector(CONTROL_SEL);
+}
+/**
+ * Form field layout: label + control + hint/error.
+ *
+ * - Auto-wires `htmlFor` / control `id` when you pass a `label` (unless `htmlFor` set)
+ * - Mirrors error/hint onto `aria-invalid` / `aria-describedby` on the control
+ * - Error region never uses role="alert" (avoids scroll/steal focus while typing)
+ */
+export const Field = component((raw) => {
+    ensureStyles();
+    const props = mergeProps({}, raw);
+    const controlId = props.htmlFor ?? puId("pu-field");
+    const msgId = puId("pu-field-msg");
+    let rootEl = null;
+    const errorText = () => {
+        const e = props.error;
+        return e ? String(e) : "";
+    };
+    const hintText = () => {
+        const h = props.hint;
+        return h ? String(h) : "";
+    };
+    effect(() => {
+        const err = errorText();
+        const hint = hintText();
+        // Re-run when messages change; also after microtask so children exist
+        const apply = () => {
+            const root = rootEl;
+            if (!root)
+                return;
+            const control = findControl(root);
+            if (!control)
+                return;
+            // Prefer explicit control id; else apply field id for label association
+            if (!control.id)
+                control.id = controlId;
+            if (err) {
+                control.setAttribute("aria-invalid", "true");
+                control.setAttribute("aria-describedby", msgId);
+            }
+            else if (hint) {
+                control.removeAttribute("aria-invalid");
+                control.setAttribute("aria-describedby", msgId);
+            }
+            else {
+                control.removeAttribute("aria-invalid");
+                // Only clear if we own the describedby
+                if (control.getAttribute("aria-describedby") === msgId) {
+                    control.removeAttribute("aria-describedby");
+                }
+            }
+        };
+        queueMicrotask(apply);
+        // Children may mount after first microtask (effects order)
+        const t = typeof window !== "undefined"
+            ? window.setTimeout(apply, 0)
+            : null;
+        return () => {
+            if (t != null && typeof window !== "undefined")
+                window.clearTimeout(t);
+        };
+    });
+    return (_jsxs("div", { class: () => cx("pu-field", errorText() && "pu-field--invalid", typeof props.class === "function" ? props.class() : props.class), ref: (el) => {
+            rootEl = el;
+        }, children: [props.label
+                ? Label({
+                    htmlFor: controlId,
+                    ...(props.required !== undefined
+                        ? { required: props.required }
+                        : {}),
+                    children: props.label,
+                })
+                : null, props.children, _jsx("div", { class: "pu-field__footer", children: () => {
+                    const err = errorText();
+                    const hint = hintText();
+                    if (err) {
+                        const p = document.createElement("p");
+                        p.className = "pu-field__error";
+                        p.id = msgId;
+                        p.setAttribute("role", "status");
+                        p.setAttribute("aria-live", "polite");
+                        p.textContent = err;
+                        return p;
+                    }
+                    if (hint) {
+                        const p = document.createElement("p");
+                        p.className = "pu-field__hint";
+                        p.id = msgId;
+                        p.textContent = hint;
+                        return p;
+                    }
+                    const spacer = document.createElement("p");
+                    spacer.className = "pu-field__hint";
+                    spacer.setAttribute("aria-hidden", "true");
+                    spacer.innerHTML = " ";
+                    return spacer;
+                } })] }));
+});
+//# sourceMappingURL=Field.js.map

package/dist/components/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/components/Field.tsx"],"names":[],"mappings":"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"}

package/dist/components/Grid.d.ts

@@ -0,0 +1,13 @@
+export type GridProps = {
+    cols?: 1 | 2 | 3 | 4;
+    gap?: 2 | 3 | 4 | 5 | 6 | 8;
+    class?: string | (() => string);
+    children?: unknown;
+};
+export declare const Grid: import("@lab206/dom").Component<{
+    cols?: 1 | 2 | 3 | 4;
+    gap?: 2 | 3 | 4 | 5 | 6 | 8;
+    class?: string | (() => string);
+    children?: unknown;
+}>;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrB,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAsCF,eAAO,MAAM,IAAI;WA1CR,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;UACd,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;YACnB,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC;eACpB,OAAO;EA2DlB,CAAC"}

package/dist/components/Grid.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "@lab206/dom/jsx-runtime";
+import { component, mergeProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+const styles = `
+.pu-grid {
+  display: grid;
+  width: 100%;
+}
+.pu-grid--gap-2 { gap: var(--pu-space-2); }
+.pu-grid--gap-3 { gap: var(--pu-space-3); }
+.pu-grid--gap-4 { gap: var(--pu-space-4); }
+.pu-grid--gap-5 { gap: var(--pu-space-5); }
+.pu-grid--gap-6 { gap: var(--pu-space-6); }
+.pu-grid--gap-8 { gap: var(--pu-space-8); }
+.pu-grid--cols-1 { grid-template-columns: 1fr; }
+.pu-grid--cols-2 { grid-template-columns: 1fr; }
+.pu-grid--cols-3 { grid-template-columns: 1fr; }
+.pu-grid--cols-4 { grid-template-columns: 1fr; }
+@media (min-width: 640px) {
+  .pu-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .pu-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
+  .pu-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
+}
+@media (min-width: 900px) {
+  .pu-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .pu-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+}
+`;
+let injected = false;
+function ensureStyles() {
+    if (injected || typeof document === "undefined")
+        return;
+    injected = true;
+    const el = document.createElement("style");
+    el.setAttribute("data-pu-ui", "grid");
+    el.textContent = styles;
+    document.head.appendChild(el);
+}
+export const Grid = component((raw) => {
+    ensureStyles();
+    const props = mergeProps({ cols: 3, gap: 4 }, raw);
+    return (_jsx("div", { class: () => cx("pu-grid", `pu-grid--cols-${props.cols}`, `pu-grid--gap-${props.gap}`, typeof props.class === "function" ? props.class() : props.class), children: props.children }));
+});
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sourceRoot":"","sources":["../../src/components/Grid.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAuB,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AASjC,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;CAwBd,CAAC;AAEF,IAAI,QAAQ,GAAG,KAAK,CAAC;AACrB,SAAS,YAAY;IACnB,IAAI,QAAQ,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IACxD,QAAQ,GAAG,IAAI,CAAC;IAChB,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC3C,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;IACtC,EAAE,CAAC,WAAW,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,SAAS,CAAC,CAAC,GAAc,EAAE,EAAE;IAC/C,YAAY,EAAE,CAAC;IACf,MAAM,KAAK,GAAG,UAAU,CACtB,EAAE,IAAI,EAAE,CAAU,EAAE,GAAG,EAAE,CAAU,EAAE,EACrC,GAAG,CACqE,CAAC;IAC3E,OAAO,CACL,cACE,KAAK,EAAE,GAAG,EAAE,CACV,EAAE,CACA,SAAS,EACT,iBAAiB,KAAK,CAAC,IAAI,EAAE,EAC7B,gBAAgB,KAAK,CAAC,GAAG,EAAE,EAC3B,OAAO,KAAK,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAChE,YAGF,KAAK,CAAC,QAAiB,GACpB,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/components/Input.d.ts

@@ -0,0 +1,55 @@
+import { type Signal } from "@lab206/core";
+import { type MaybeReactive } from "../reactive.js";
+import type { Bindable } from "../form.js";
+export type InputProps = {
+    type?: string;
+    value?: MaybeReactive<string>;
+    /**
+     * Two-way bind a string signal — preferred over `value` + manual `onInput`.
+     * @example <Input bind={email} />
+     */
+    bind?: Bindable<string> | Signal<string>;
+    placeholder?: string;
+    disabled?: MaybeReactive<boolean>;
+    class?: MaybeReactive<string>;
+    onInput?: (e: Event) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    ref?: (el: HTMLInputElement) => void;
+    id?: string;
+    name?: string;
+    autocomplete?: string;
+    "aria-label"?: string;
+    "aria-invalid"?: MaybeReactive<boolean>;
+};
+/**
+ * Text input.
+ *
+ * **Preferred:** `<Input bind={mySignal} />` — two-way, no casts.
+ *
+ * Controlled mode (`value={signal}` or `bind={signal}`):
+ * - Seed via defaultValue once
+ * - onInput updates your signal (automatic with `bind`)
+ * - We never rewrite .value while focused (prevents caret reset + scroll jumps)
+ * - When unfocused, signal → DOM for external updates (reset, etc.)
+ */
+export declare const Input: import("@lab206/dom").Component<{
+    type?: string;
+    value?: MaybeReactive<string>;
+    bind?: Bindable<string>;
+    placeholder?: string;
+    disabled?: MaybeReactive<boolean>;
+    class?: MaybeReactive<string>;
+    onInput?: (e: Event) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onFocus?: (e: FocusEvent) => void;
+    ref?: (el: HTMLInputElement) => void;
+    id?: string;
+    name?: string;
+    autocomplete?: string;
+    "aria-label"?: string;
+    "aria-invalid"?: MaybeReactive<boolean>;
+}>;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAQnD,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAG3C,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9B;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACzC,CAAC;AA4CF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,KAAK;WA3ET,MAAM;YACL,aAAa,CAAC,MAAM,CAAC;;kBAMf,MAAM;eACT,aAAa,CAAC,OAAO,CAAC;YACzB,aAAa,CAAC,MAAM,CAAC;cACnB,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI;gBAChB,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI;aAC7B,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;cACtB,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI;UAC3B,CAAC,EAAE,EAAE,gBAAgB,KAAK,IAAI;SAC/B,MAAM;WACJ,MAAM;mBACE,MAAM;mBACN,MAAM;qBACJ,aAAa,CAAC,OAAO,CAAC;EAwIvC,CAAC"}

package/dist/components/Input.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx } from "@lab206/dom/jsx-runtime";
+import { effect } from "@lab206/core";
+import { component, getRawProp, mergeProps, } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { readBool, readStr } from "../reactive.js";
+import { warnPossibleSnapshotValue } from "../dev.js";
+const styles = `
+.pu-input {
+  width: 100%;
+  height: var(--pu-control-h-md);
+  padding: 0 var(--pu-control-px);
+  border-radius: var(--pu-radius-md);
+  border: 1px solid var(--pu-color-control-border, var(--pu-color-border));
+  background: var(--pu-color-surface);
+  color: var(--pu-color-text);
+  box-shadow: var(--pu-shadow-xs);
+  transition:
+    border-color var(--pu-duration) var(--pu-ease),
+    box-shadow var(--pu-duration) var(--pu-ease),
+    background var(--pu-duration) var(--pu-ease);
+}
+.pu-input::placeholder { color: var(--pu-color-text-muted); }
+.pu-input:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--pu-color-border) 40%, var(--pu-color-text-muted));
+}
+.pu-input:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--pu-color-focus) 55%, var(--pu-color-border));
+  box-shadow:
+    0 0 0 3px color-mix(in srgb, var(--pu-color-focus) 18%, transparent),
+    var(--pu-shadow-xs);
+}
+.pu-input:disabled { opacity: 0.55; cursor: not-allowed; }
+.pu-input[aria-invalid="true"] {
+  border-color: var(--pu-color-danger);
+}
+`;
+let injected = false;
+function ensureStyles() {
+    if (injected || typeof document === "undefined")
+        return;
+    injected = true;
+    const el = document.createElement("style");
+    el.setAttribute("data-pu-ui", "input");
+    el.textContent = styles;
+    document.head.appendChild(el);
+}
+/**
+ * Text input.
+ *
+ * **Preferred:** `<Input bind={mySignal} />` — two-way, no casts.
+ *
+ * Controlled mode (`value={signal}` or `bind={signal}`):
+ * - Seed via defaultValue once
+ * - onInput updates your signal (automatic with `bind`)
+ * - We never rewrite .value while focused (prevents caret reset + scroll jumps)
+ * - When unfocused, signal → DOM for external updates (reset, etc.)
+ */
+export const Input = component((raw) => {
+    ensureStyles();
+    const props = mergeProps({ type: "text" }, raw);
+    // bind is not unwrapped by createProps; value is — use getRawProp for dev checks
+    const bound = getRawProp(raw, "bind");
+    const valueRaw = getRawProp(raw, "value");
+    warnPossibleSnapshotValue("Input", {
+        hasBind: bound !== undefined && bound !== null,
+        valueIsPlainString: typeof valueRaw === "string",
+    });
+    const controlled = raw.value !== undefined || bound !== undefined;
+    let el = null;
+    const readValue = () => bound
+        ? readStr(bound)
+        : readStr(props.value);
+    const initial = controlled ? readValue() : "";
+    if (controlled) {
+        effect(() => {
+            const next = readValue();
+            const node = el;
+            if (!node)
+                return;
+            if (node.ownerDocument.activeElement === node)
+                return;
+            if (node.value !== next)
+                node.value = next;
+        });
+    }
+    return (_jsx("input", { id: props.id, name: props.name, type: props.type, autocomplete: props.autocomplete, class: () => cx("pu-input", readStr(props.class) || undefined), placeholder: props.placeholder, disabled: () => readBool(props.disabled), defaultValue: controlled ? initial : undefined, onInput: (e) => {
+            if (bound) {
+                const t = (e.currentTarget ?? e.target);
+                if (t && "value" in t)
+                    bound.set(t.value);
+            }
+            props.onInput?.(e);
+        }, onKeyDown: props.onKeyDown, onBlur: (e) => {
+            if (controlled && el) {
+                const next = readValue();
+                if (el.value !== next)
+                    el.value = next;
+            }
+            props.onBlur?.(e);
+        }, onFocus: props.onFocus, ref: (node) => {
+            el = node;
+            if (controlled && el && el.ownerDocument.activeElement !== el) {
+                const next = readValue();
+                if (el.value !== next)
+                    el.value = next;
+            }
+            props.ref?.(el);
+        }, "aria-label": props["aria-label"], "aria-invalid": () => readBool(props["aria-invalid"])
+            ? true
+            : undefined }));
+});
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"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"}