@lab206/ui 0.1.0

package/src/components/Steps.tsx

@@ -0,0 +1,191 @@
+import { For, component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type StepItem = {
+  id: string;
+  label: string;
+  description?: string;
+};
+
+export type StepsProps = {
+  steps: StepItem[] | (() => StepItem[]);
+  /** 0-based current step index */
+  current: number | (() => number);
+  class?: string | (() => string);
+  onStepClick?: (index: number) => void;
+};
+
+const ensure = createStyleSheet(
+  "steps",
+  `
+.pu-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.pu-steps__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.75rem;
+  position: relative;
+}
+.pu-steps__marker {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 1.75rem;
+}
+.pu-steps__dot {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 50%;
+  border: 2px solid var(--pu-color-border);
+  background: var(--pu-color-surface);
+  color: var(--pu-color-text-muted);
+  font-size: var(--pu-text-xs);
+  font-weight: var(--pu-font-bold);
+  display: grid;
+  place-items: center;
+  z-index: 1;
+  transition:
+    background var(--pu-duration) var(--pu-ease),
+    border-color var(--pu-duration) var(--pu-ease),
+    color var(--pu-duration) var(--pu-ease);
+}
+.pu-steps__item.is-done .pu-steps__dot,
+.pu-steps__item.is-current .pu-steps__dot {
+  border-color: var(--pu-color-accent);
+  background: var(--pu-color-accent);
+  color: var(--pu-color-accent-fg);
+}
+.pu-steps__item.is-current .pu-steps__dot {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pu-color-accent) 22%, transparent);
+}
+.pu-steps__line {
+  flex: 1;
+  width: 2px;
+  min-height: 1.25rem;
+  background: var(--pu-color-border);
+  margin: 0.2rem 0;
+}
+.pu-steps__item.is-done .pu-steps__line {
+  background: var(--pu-color-accent);
+}
+.pu-steps__item:last-child .pu-steps__line { display: none; }
+.pu-steps__body {
+  padding-bottom: 1.1rem;
+  min-width: 0;
+}
+.pu-steps__item:last-child .pu-steps__body { padding-bottom: 0; }
+.pu-steps__label {
+  font-size: var(--pu-text-sm);
+  font-weight: var(--pu-font-semibold);
+  color: var(--pu-color-text);
+  margin: 0.2rem 0 0;
+}
+.pu-steps__item.is-todo .pu-steps__label {
+  color: var(--pu-color-text-muted);
+}
+.pu-steps__desc {
+  margin: 0.2rem 0 0;
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  line-height: 1.45;
+}
+.pu-steps__btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+  border-radius: var(--pu-radius-sm);
+}
+.pu-steps__btn:focus-visible {
+  outline: none;
+  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-steps__btn:disabled { cursor: default; }
+`,
+);
+
+/** Vertical step / wizard indicator. */
+export const Steps = component((raw: StepsProps) => {
+  ensure();
+  const props = raw as ComponentProps<StepsProps>;
+  const getSteps = () =>
+    typeof props.steps === "function"
+      ? (props.steps as () => StepItem[])()
+      : (props.steps ?? []);
+  const current = () =>
+    typeof props.current === "function"
+      ? (props.current as () => number)()
+      : props.current;
+
+  return (
+    <ol
+      class={() =>
+        cx(
+          "pu-steps",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <For each={getSteps}>
+        {(step, index) => (
+          <li
+            class={() => {
+              const i = index();
+              const c = current();
+              return cx(
+                "pu-steps__item",
+                i < c && "is-done",
+                i === c && "is-current",
+                i > c && "is-todo",
+              );
+            }}
+          >
+            <div class="pu-steps__marker" aria-hidden="true">
+              <div class="pu-steps__dot">
+                {() =>
+                  index() < current() ? "✓" : String(index() + 1)
+                }
+              </div>
+              <div class="pu-steps__line" />
+            </div>
+            <div class="pu-steps__body">
+              <button
+                type="button"
+                class="pu-steps__btn"
+                disabled={() => !props.onStepClick}
+                onClick={() => props.onStepClick?.(index())}
+              >
+                <div class="pu-steps__label">{() => step().label}</div>
+                {() =>
+                  step().description
+                    ? (() => {
+                        const p = document.createElement("p");
+                        p.className = "pu-steps__desc";
+                        p.textContent = step().description!;
+                        return p;
+                      })()
+                    : null
+                }
+              </button>
+            </div>
+          </li>
+        )}
+      </For>
+    </ol>
+  );
+});

package/src/components/Switch.tsx

@@ -0,0 +1,146 @@
+import { type Signal } from "@lab206/core";
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { readBool, type MaybeReactive } from "../reactive.js";
+import type { Bindable } from "../form.js";
+
+export type SwitchProps = {
+  checked?: MaybeReactive<boolean>;
+  /** Two-way bind a boolean signal. */
+  bind?: Bindable<boolean> | Signal<boolean>;
+  disabled?: MaybeReactive<boolean>;
+  onChange?: (checked: boolean) => void;
+  label?: string;
+  class?: MaybeReactive<string>;
+  id?: string;
+};
+
+const styles = `
+.pu-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pu-space-2);
+  cursor: pointer;
+  user-select: none;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text);
+}
+.pu-switch[data-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.pu-switch__track {
+  position: relative;
+  width: 2.5rem;
+  height: 1.4rem;
+  border-radius: var(--pu-radius-full);
+  background: var(--pu-color-surface-2);
+  border: 1.5px solid var(--pu-color-control-border, var(--pu-color-border-strong));
+  box-sizing: border-box;
+  transition:
+    background var(--pu-duration) var(--pu-ease-out),
+    border-color var(--pu-duration) var(--pu-ease-out);
+  flex-shrink: 0;
+}
+.pu-switch:hover:not([data-disabled="true"]) .pu-switch__track {
+  border-color: var(--pu-color-border-strong);
+}
+.pu-switch[data-checked="true"] .pu-switch__track {
+  background: var(--pu-color-accent);
+  border-color: var(--pu-color-accent);
+}
+.pu-switch__thumb {
+  position: absolute;
+  top: 1.5px;
+  left: 1.5px;
+  width: calc(1.4rem - 6px);
+  height: calc(1.4rem - 6px);
+  border-radius: 50%;
+  /* Always a clear knob — surface-elevated blends into the track in dark mode */
+  background: #fff;
+  border: 1px solid color-mix(in srgb, var(--pu-color-text) 14%, transparent);
+  box-shadow:
+    var(--pu-shadow-sm),
+    0 1px 2px color-mix(in srgb, #000 18%, transparent);
+  transition:
+    transform var(--pu-duration) var(--pu-ease-spring),
+    background var(--pu-duration) var(--pu-ease-out),
+    border-color var(--pu-duration) var(--pu-ease-out);
+}
+.pu-switch[data-checked="true"] .pu-switch__thumb {
+  background: var(--pu-color-accent-fg, #fff);
+  border-color: transparent;
+  transform: translateX(1.05rem);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-switch__thumb,
+  .pu-switch__track { transition: none; }
+}
+.pu-switch__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.pu-switch__input:focus-visible + .pu-switch__track {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--pu-color-surface),
+    0 0 0 4px color-mix(in srgb, var(--pu-color-focus) 55%, transparent);
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "switch");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Switch = component((raw: SwitchProps) => {
+  ensureStyles();
+  const props = mergeProps({}, raw) as ComponentProps<SwitchProps>;
+  const id = props.id ?? `pu-switch-${Math.random().toString(36).slice(2, 9)}`;
+  const bound = raw.bind;
+
+  const isChecked = () =>
+    bound
+      ? readBool(bound as MaybeReactive<boolean>)
+      : readBool(props.checked as MaybeReactive<boolean>);
+  const isDisabled = () => readBool(props.disabled as MaybeReactive<boolean>);
+
+  return (
+    <label
+      class={() =>
+        cx(
+          "pu-switch",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      data-checked={() => (isChecked() ? "true" : "false")}
+      data-disabled={() => (isDisabled() ? "true" : "false")}
+    >
+      <input
+        id={id}
+        class="pu-switch__input"
+        type="checkbox"
+        role="switch"
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={(e: Event) => {
+          if (isDisabled()) return;
+          const next = (e.target as HTMLInputElement).checked;
+          if (bound) bound.set(next);
+          props.onChange?.(next);
+        }}
+      />
+      <span class="pu-switch__track" aria-hidden="true">
+        <span class="pu-switch__thumb" />
+      </span>
+      {props.label ? <span>{props.label}</span> : null}
+    </label>
+  );
+});

package/src/components/Table.tsx

@@ -0,0 +1,168 @@
+import { For, component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type TableColumn<T = Record<string, unknown>> = {
+  key: string;
+  header: string;
+  /** Cell renderer; defaults to row[key] */
+  cell?: (row: T) => unknown;
+  align?: "left" | "center" | "right";
+  width?: string;
+};
+
+export type TableProps<T = Record<string, unknown>> = {
+  columns: TableColumn<T>[] | (() => TableColumn<T>[]);
+  rows: T[] | (() => T[]);
+  /** Row key field or function */
+  rowKey?: string | ((row: T) => string);
+  dense?: boolean;
+  class?: string | (() => string);
+  onRowClick?: (row: T) => void;
+};
+
+const ensure = createStyleSheet(
+  "table",
+  `
+.pu-table-wrap {
+  width: 100%;
+  overflow: auto;
+  border: 1px solid var(--pu-color-border);
+  border-radius: var(--pu-radius-lg);
+  background: var(--pu-color-surface);
+}
+.pu-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--pu-text-sm);
+}
+.pu-table th,
+.pu-table td {
+  padding: 0.7rem 0.9rem;
+  text-align: left;
+  border-bottom: 1px solid var(--pu-color-border);
+  vertical-align: middle;
+}
+.pu-table--dense th,
+.pu-table--dense td {
+  padding: 0.45rem 0.7rem;
+}
+.pu-table th {
+  font-weight: var(--pu-font-semibold);
+  color: var(--pu-color-text-muted);
+  background: var(--pu-color-surface-2);
+  font-size: var(--pu-text-xs);
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.pu-table tbody tr:last-child td { border-bottom: 0; }
+.pu-table tbody tr.is-clickable { cursor: pointer; }
+.pu-table tbody tr.is-clickable:hover td {
+  background: color-mix(in srgb, var(--pu-color-accent) 6%, transparent);
+}
+.pu-table .align-center { text-align: center; }
+.pu-table .align-right { text-align: right; }
+.pu-table__empty {
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--pu-color-text-muted);
+  font-size: var(--pu-text-sm);
+}
+`,
+);
+
+function keyOf<T>(row: T, rowKey: TableProps<T>["rowKey"], index: number): string {
+  if (typeof rowKey === "function") return rowKey(row);
+  if (typeof rowKey === "string" && row && typeof row === "object") {
+    const v = (row as Record<string, unknown>)[rowKey];
+    if (v != null) return String(v);
+  }
+  return String(index);
+}
+
+/** Data table with optional dense mode + row click. */
+export const Table = component((raw: TableProps) => {
+  ensure();
+  const props = raw as ComponentProps<TableProps>;
+  const getCols = () =>
+    typeof props.columns === "function"
+      ? (props.columns as () => TableColumn[])()
+      : (props.columns ?? []);
+  const getRows = () =>
+    typeof props.rows === "function"
+      ? (props.rows as () => Record<string, unknown>[])()
+      : (props.rows ?? []);
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-table-wrap",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <table class={() => cx("pu-table", props.dense && "pu-table--dense")}>
+        <thead>
+          <tr>
+            <For each={getCols}>
+              {(col) => (
+                <th
+                  class={() =>
+                    col().align && col().align !== "left"
+                      ? `align-${col().align}`
+                      : undefined
+                  }
+                  style={() =>
+                    col().width ? { width: col().width } : undefined
+                  }
+                >
+                  {() => col().header}
+                </th>
+              )}
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          {() => {
+            const rows = getRows();
+            if (rows.length === 0) {
+              const tr = document.createElement("tr");
+              const td = document.createElement("td");
+              td.colSpan = Math.max(1, getCols().length);
+              td.className = "pu-table__empty";
+              td.textContent = "No rows";
+              tr.appendChild(td);
+              return tr;
+            }
+            const frag = document.createDocumentFragment();
+            rows.forEach((row, i) => {
+              const tr = document.createElement("tr");
+              if (props.onRowClick) {
+                tr.classList.add("is-clickable");
+                tr.onclick = () => props.onRowClick?.(row);
+              }
+              for (const col of getCols()) {
+                const td = document.createElement("td");
+                if (col.align && col.align !== "left") {
+                  td.className = `align-${col.align}`;
+                }
+                const content = col.cell
+                  ? col.cell(row)
+                  : (row as Record<string, unknown>)[col.key];
+                if (content instanceof Node) td.appendChild(content);
+                else td.textContent = content == null ? "" : String(content);
+                tr.appendChild(td);
+              }
+              tr.dataset.key = keyOf(row, props.rowKey, i);
+              frag.appendChild(tr);
+            });
+            return frag;
+          }}
+        </tbody>
+      </table>
+    </div>
+  );
+});