@lab206/ui 0.1.0

package/src/components/Input.tsx

@@ -0,0 +1,169 @@
+import { effect, type Signal } from "@lab206/core";
+import {
+  component,
+  getRawProp,
+  mergeProps,
+  type ComponentProps,
+} from "@lab206/dom";
+import { cx } from "../utils.js";
+import { readBool, readStr, type MaybeReactive } from "../reactive.js";
+import type { Bindable } from "../form.js";
+import { warnPossibleSnapshotValue } from "../dev.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>;
+};
+
+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: InputProps) => {
+  ensureStyles();
+  const props = mergeProps({ type: "text" }, raw) as ComponentProps<
+    InputProps & { type: string }
+  >;
+
+  // bind is not unwrapped by createProps; value is — use getRawProp for dev checks
+  const bound = getRawProp(raw as object, "bind") as
+    | Bindable<string>
+    | Signal<string>
+    | undefined;
+  const valueRaw = getRawProp(raw as object, "value");
+  warnPossibleSnapshotValue("Input", {
+    hasBind: bound !== undefined && bound !== null,
+    valueIsPlainString: typeof valueRaw === "string",
+  });
+  const controlled = raw.value !== undefined || bound !== undefined;
+  let el: HTMLInputElement | null = null;
+
+  const readValue = () =>
+    bound
+      ? readStr(bound as MaybeReactive<string>)
+      : readStr(props.value as MaybeReactive<string>);
+
+  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 (
+    <input
+      id={props.id}
+      name={props.name}
+      type={props.type}
+      autocomplete={props.autocomplete}
+      class={() =>
+        cx("pu-input", readStr(props.class as MaybeReactive<string>) || undefined)
+      }
+      placeholder={props.placeholder}
+      disabled={() => readBool(props.disabled as MaybeReactive<boolean>)}
+      defaultValue={controlled ? initial : undefined}
+      onInput={(e: Event) => {
+        if (bound) {
+          const t = (e.currentTarget ?? e.target) as HTMLInputElement | null;
+          if (t && "value" in t) bound.set(t.value);
+        }
+        props.onInput?.(e);
+      }}
+      onKeyDown={props.onKeyDown}
+      onBlur={(e: FocusEvent) => {
+        if (controlled && el) {
+          const next = readValue();
+          if (el.value !== next) el.value = next;
+        }
+        props.onBlur?.(e);
+      }}
+      onFocus={props.onFocus}
+      ref={(node) => {
+        el = node as HTMLInputElement;
+        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"] as MaybeReactive<boolean>)
+          ? true
+          : undefined
+      }
+    />
+  );
+});

package/src/components/Kbd.tsx

@@ -0,0 +1,57 @@
+import { component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type KbdProps = {
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.4em;
+  padding: 0.12em 0.4em;
+  border-radius: 6px;
+  border: 1px solid var(--pu-color-border);
+  border-bottom-width: 2px;
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text-muted);
+  font-family: var(--pu-font-mono);
+  font-size: 0.78em;
+  font-weight: var(--pu-font-semibold);
+  line-height: 1.3;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  box-shadow: var(--pu-shadow-xs);
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "kbd");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/** Keyboard key affordance for shortcuts and docs. */
+export const Kbd = component((raw: KbdProps) => {
+  ensureStyles();
+  const props = raw as ComponentProps<KbdProps>;
+  return (
+    <kbd
+      class={() =>
+        cx(
+          "pu-kbd",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      {props.children as never}
+    </kbd>
+  );
+});

package/src/components/Label.tsx

@@ -0,0 +1,54 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type LabelProps = {
+  htmlFor?: string;
+  required?: boolean;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-label {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.25rem;
+  font-size: var(--pu-label-size);
+  font-weight: var(--pu-font-semibold);
+  color: var(--pu-color-text);
+  line-height: 1.3;
+}
+.pu-label__req {
+  color: var(--pu-color-danger);
+  font-weight: var(--pu-font-bold);
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "label");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Label = component((raw: LabelProps) => {
+  ensureStyles();
+  const props = mergeProps({}, raw) as ComponentProps<LabelProps>;
+  return (
+    <label
+      class={() =>
+        cx(
+          "pu-label",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      for={props.htmlFor}
+    >
+      {props.children as never}
+      {props.required ? <span class="pu-label__req" aria-hidden="true">*</span> : null}
+    </label>
+  );
+});

package/src/components/Link.tsx

@@ -0,0 +1,87 @@
+import { component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type LinkProps = {
+  href?: string;
+  external?: boolean;
+  muted?: boolean;
+  class?: string | (() => string);
+  onClick?: (e: MouseEvent) => void;
+  children?: unknown;
+};
+
+const ensure = createStyleSheet(
+  "link",
+  `
+.pu-link {
+  color: var(--pu-color-accent);
+  text-decoration: none;
+  font-weight: var(--pu-font-medium);
+  transition: color var(--pu-duration) var(--pu-ease);
+  cursor: pointer;
+}
+.pu-link:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.pu-link:focus-visible {
+  outline: none;
+  border-radius: 2px;
+  box-shadow:
+    0 0 0 2px var(--pu-color-surface),
+    0 0 0 4px color-mix(in srgb, var(--pu-color-focus) 55%, transparent);
+}
+.pu-link--muted {
+  color: var(--pu-color-text-muted);
+  font-weight: var(--pu-font-normal);
+}
+.pu-link--muted:hover {
+  color: var(--pu-color-text);
+}
+`,
+);
+
+/** Styled anchor (or button-like when no href). */
+export const Link = component((raw: LinkProps) => {
+  ensure();
+  const props = raw as ComponentProps<LinkProps>;
+
+  if (props.href) {
+    return (
+      <a
+        class={() =>
+          cx(
+            "pu-link",
+            props.muted && "pu-link--muted",
+            typeof props.class === "function" ? props.class() : props.class,
+          )
+        }
+        href={props.href}
+        target={props.external ? "_blank" : undefined}
+        rel={props.external ? "noopener noreferrer" : undefined}
+        onClick={props.onClick}
+        ref={(el) => ensure(el.ownerDocument)}
+      >
+        {props.children as never}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      class={() =>
+        cx(
+          "pu-link",
+          props.muted && "pu-link--muted",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      onClick={props.onClick}
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      {props.children as never}
+    </button>
+  );
+});

package/src/components/List.tsx

@@ -0,0 +1,236 @@
+import { For, component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+import {
+  applyRovingTabIndex,
+  focusRovingItem,
+  handleRovingKeydown,
+  listRovingItems,
+} from "../rovingFocus.js";
+
+export type ListItemData = {
+  id: string;
+  label: string;
+  description?: string;
+  meta?: string;
+  disabled?: boolean;
+};
+
+export type ListProps = {
+  items: ListItemData[] | (() => ListItemData[]);
+  /** Selected id (optional highlight) */
+  value?: string | (() => string);
+  onSelect?: (id: string) => void;
+  class?: string | (() => string);
+};
+
+const OPT_SEL = '[role="option"]:not([disabled])';
+
+const ensure = createStyleSheet(
+  "list",
+  `
+.pu-list {
+  list-style: none;
+  margin: 0;
+  padding: 0.25rem;
+  border: 1px solid var(--pu-color-border);
+  border-radius: var(--pu-radius-lg);
+  background: var(--pu-color-surface);
+  overflow: hidden;
+}
+.pu-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  padding: 0.7rem 0.85rem;
+  border-radius: var(--pu-radius-md);
+  cursor: pointer;
+  color: var(--pu-color-text);
+  transition:
+    background var(--pu-duration) var(--pu-ease-out),
+    transform var(--pu-duration-fast) var(--pu-ease-out),
+    box-shadow var(--pu-duration) var(--pu-ease-out);
+}
+.pu-list__item:hover:not(:disabled) {
+  background: var(--pu-color-surface-2);
+  transform: translateX(2px);
+}
+.pu-list__item.is-selected {
+  background: color-mix(in srgb, var(--pu-color-accent) 12%, transparent);
+  box-shadow: inset 2px 0 0 var(--pu-color-accent);
+}
+.pu-list__item:focus-visible:not(:disabled) {
+  outline: none;
+  background: var(--pu-color-surface-2);
+  box-shadow:
+    inset 2px 0 0 var(--pu-color-accent),
+    0 0 0 2px color-mix(in srgb, var(--pu-color-focus) 40%, transparent);
+}
+.pu-list__item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-list__item { transition: none; }
+  .pu-list__item:hover:not(:disabled) { transform: none; }
+}
+.pu-list__main {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+.pu-list__label {
+  font-size: var(--pu-text-sm);
+  font-weight: var(--pu-font-medium);
+}
+.pu-list__desc {
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  line-height: 1.4;
+}
+.pu-list__meta {
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+`,
+);
+
+/** Interactive list group with arrow-key roving focus. */
+export const List = component((raw: ListProps) => {
+  ensure();
+  const props = raw as ComponentProps<ListProps>;
+  let listEl: HTMLElement | null = null;
+
+  const getItems = () =>
+    typeof props.items === "function"
+      ? (props.items as () => ListItemData[])()
+      : (props.items ?? []);
+  const selected = () =>
+    typeof props.value === "function"
+      ? (props.value as () => string)()
+      : (props.value ?? "");
+
+  const syncTabIndex = () => {
+    if (!listEl) return;
+    const opts = listRovingItems(listEl, OPT_SEL);
+    const idx = opts.findIndex(
+      (el) => el.getAttribute("data-list-id") === selected(),
+    );
+    applyRovingTabIndex(opts, idx >= 0 ? idx : 0);
+  };
+
+  return (
+    <ul
+      class={() =>
+        cx(
+          "pu-list",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      role="listbox"
+      tabindex={0}
+      aria-activedescendant={() => {
+        const id = selected();
+        return id ? `pu-list-opt-${id}` : undefined;
+      }}
+      ref={(el) => {
+        listEl = el;
+        ensure(el.ownerDocument);
+        window.setTimeout(syncTabIndex, 0);
+      }}
+      onFocus={() => {
+        // When listbox receives focus, move into an option
+        if (!listEl) return;
+        if (listEl.contains(listEl.ownerDocument.activeElement) &&
+            listEl.ownerDocument.activeElement !== listEl) {
+          return;
+        }
+        const opts = listRovingItems(listEl, OPT_SEL);
+        const idx = opts.findIndex(
+          (el) => el.getAttribute("data-list-id") === selected(),
+        );
+        focusRovingItem(opts, idx >= 0 ? idx : 0);
+      }}
+      onKeyDown={(e: KeyboardEvent) => {
+        if (!listEl) return;
+        handleRovingKeydown(e, listEl, OPT_SEL, {
+          orientation: "vertical",
+          loop: true,
+          onActivate: (el) => {
+            const id = el.getAttribute("data-list-id");
+            if (id) props.onSelect?.(id);
+          },
+          onMove: (el) => {
+            // Optional: live-select on move — keep selection on activate only
+            void el;
+          },
+        });
+      }}
+    >
+      <For each={getItems}>
+        {(item) => (
+          <li role="none" style={{ display: "block", margin: 0, padding: 0 }}>
+            <button
+              type="button"
+              role="option"
+              tabindex={-1}
+              id={() => `pu-list-opt-${item().id}`}
+              data-list-id={() => item().id}
+              class={() =>
+                cx(
+                  "pu-list__item",
+                  selected() === item().id && "is-selected",
+                )
+              }
+              aria-selected={() => selected() === item().id}
+              disabled={() => !!item().disabled}
+              onClick={() => props.onSelect?.(item().id)}
+              onFocus={() => {
+                if (!listEl) return;
+                const opts = listRovingItems(listEl, OPT_SEL);
+                const idx = opts.findIndex(
+                  (el) => el.getAttribute("data-list-id") === item().id,
+                );
+                if (idx >= 0) applyRovingTabIndex(opts, idx);
+              }}
+            >
+              <span class="pu-list__main">
+                <span class="pu-list__label">{() => item().label}</span>
+                {() =>
+                  item().description
+                    ? (() => {
+                        const s = document.createElement("span");
+                        s.className = "pu-list__desc";
+                        s.textContent = item().description!;
+                        return s;
+                      })()
+                    : null
+                }
+              </span>
+              {() =>
+                item().meta
+                  ? (() => {
+                      const s = document.createElement("span");
+                      s.className = "pu-list__meta";
+                      s.textContent = item().meta!;
+                      return s;
+                    })()
+                  : null
+              }
+            </button>
+          </li>
+        )}
+      </For>
+    </ul>
+  );
+});