@lab206/ui 0.1.0

package/src/components/Tabs.tsx

@@ -0,0 +1,246 @@
+import { signal, effect } from "@lab206/core";
+import { For, component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import {
+  applyRovingTabIndex,
+  handleRovingKeydown,
+  listRovingItems,
+} from "../rovingFocus.js";
+
+export type TabItem = {
+  id: string;
+  label: string;
+  content: unknown;
+  disabled?: boolean;
+};
+
+export type TabsProps = {
+  items: TabItem[] | (() => TabItem[]);
+  /** Controlled value (id) */
+  value?: string | (() => string);
+  /** Uncontrolled initial id */
+  defaultValue?: string;
+  onChange?: (id: string) => void;
+  class?: string | (() => string);
+};
+
+const TAB_SEL = '[role="tab"]:not([disabled])';
+
+const styles = `
+.pu-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pu-space-4);
+  min-width: 0;
+}
+.pu-tabs__list {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: var(--pu-radius-md);
+  background: var(--pu-color-surface-sunken);
+  border: 1px solid var(--pu-color-border);
+  width: fit-content;
+  max-width: 100%;
+  overflow-x: auto;
+}
+.pu-tabs__tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--pu-color-text-muted);
+  font: inherit;
+  font-size: var(--pu-text-sm);
+  font-weight: var(--pu-font-semibold);
+  letter-spacing: -0.01em;
+  padding: 0.45rem 0.9rem;
+  border-radius: calc(var(--pu-radius-md) - 2px);
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background var(--pu-duration) var(--pu-ease-out),
+    color var(--pu-duration) var(--pu-ease-out),
+    box-shadow var(--pu-duration) var(--pu-ease-out),
+    transform var(--pu-duration-fast) var(--pu-ease);
+}
+.pu-tabs__tab:hover:not(:disabled):not(.pu-tabs__tab--active) {
+  color: var(--pu-color-text);
+  background: color-mix(in srgb, var(--pu-color-surface) 60%, transparent);
+}
+.pu-tabs__tab:active:not(:disabled) {
+  transform: scale(0.97);
+}
+.pu-tabs__tab--active {
+  background: var(--pu-color-surface);
+  color: var(--pu-color-text);
+  box-shadow: var(--pu-shadow-sm);
+}
+.pu-tabs__tab:focus-visible {
+  outline: none;
+  box-shadow:
+    var(--pu-shadow-sm),
+    0 0 0 2px color-mix(in srgb, var(--pu-color-focus) 50%, transparent);
+}
+.pu-tabs__tab:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.pu-tabs__panel {
+  min-width: 0;
+  animation: pu-tabs-panel-in var(--pu-duration) var(--pu-ease-out);
+}
+@keyframes pu-tabs-panel-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-tabs__panel { animation: none; }
+  .pu-tabs__tab { transition: none; }
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "tabs");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/**
+ * Segmented tabs with WAI-ARIA keyboard:
+ * ArrowLeft/Right · Home/End move focus and activate · Tab exits to panel.
+ */
+export const Tabs = component((raw: TabsProps) => {
+  ensureStyles();
+  const props = mergeProps({}, raw) as ComponentProps<TabsProps>;
+  let listEl: HTMLElement | null = null;
+
+  const getItems = (): TabItem[] => {
+    const i = props.items;
+    return typeof i === "function" ? (i as () => TabItem[])() : (i ?? []);
+  };
+  const firstEnabledId = () => {
+    const items = getItems();
+    return items.find((t) => !t.disabled)?.id ?? items[0]?.id ?? "";
+  };
+  const internal = signal(props.defaultValue ?? firstEnabledId());
+
+  const active = () => {
+    if (props.value !== undefined) {
+      return typeof props.value === "function"
+        ? (props.value as () => string)()
+        : props.value;
+    }
+    return internal();
+  };
+
+  const select = (id: string) => {
+    const item = getItems().find((t) => t.id === id);
+    if (!item || item.disabled) return;
+    if (props.value === undefined) internal.set(id);
+    props.onChange?.(id);
+  };
+
+  const tabIdOf = (el: HTMLElement) =>
+    el.getAttribute("data-tab-id") ||
+    el.id.replace(/^pu-tab-/, "") ||
+    "";
+
+  const syncTabIndex = () => {
+    if (!listEl) return;
+    const items = listRovingItems(listEl, TAB_SEL);
+    const idx = items.findIndex((el) => tabIdOf(el) === active());
+    applyRovingTabIndex(items, idx >= 0 ? idx : 0);
+  };
+
+  effect(() => {
+    active(); // track
+    // Defer so For has painted buttons
+    const t = window.setTimeout(syncTabIndex, 0);
+    return () => window.clearTimeout(t);
+  });
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-tabs",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      <div
+        class="pu-tabs__list"
+        role="tablist"
+        aria-orientation="horizontal"
+        ref={(el) => {
+          listEl = el;
+        }}
+        onKeyDown={(e: KeyboardEvent) => {
+          if (!listEl) return;
+          handleRovingKeydown(e, listEl, TAB_SEL, {
+            orientation: "horizontal",
+            loop: true,
+            onMove: (el) => {
+              const id = tabIdOf(el);
+              if (id) select(id);
+            },
+            onActivate: (el) => {
+              const id = tabIdOf(el);
+              if (id) select(id);
+            },
+          });
+        }}
+      >
+        <For each={getItems}>
+          {(item) => (
+            <button
+              type="button"
+              role="tab"
+              tabindex={-1}
+              id={() => `pu-tab-${item().id}`}
+              data-tab-id={() => item().id}
+              aria-selected={() => active() === item().id}
+              aria-controls={() => `pu-tabpanel-${item().id}`}
+              disabled={() => !!item().disabled}
+              class={() =>
+                cx(
+                  "pu-tabs__tab",
+                  active() === item().id && "pu-tabs__tab--active",
+                )
+              }
+              onClick={() => select(item().id)}
+              onFocus={() => {
+                // Keep roving index aligned when user tabs into the list
+                if (!listEl) return;
+                const items = listRovingItems(listEl, TAB_SEL);
+                const idx = items.findIndex(
+                  (el) => el.getAttribute("data-tab-id") === item().id,
+                );
+                if (idx >= 0) applyRovingTabIndex(items, idx);
+              }}
+            >
+              {() => item().label}
+            </button>
+          )}
+        </For>
+      </div>
+      <div
+        class="pu-tabs__panel"
+        role="tabpanel"
+        id={() => `pu-tabpanel-${active()}`}
+        aria-labelledby={() => `pu-tab-${active()}`}
+        tabindex={0}
+      >
+        {() => {
+          const cur = getItems().find((i) => i.id === active());
+          return (cur?.content as never) ?? null;
+        }}
+      </div>
+    </div>
+  );
+});

package/src/components/Text.tsx

@@ -0,0 +1,69 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type TextProps = {
+  as?: "p" | "span" | "h1" | "h2" | "h3" | "h4" | "label";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  muted?: boolean | (() => boolean);
+  weight?: "normal" | "medium" | "semibold" | "bold";
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-text { margin: 0; color: var(--pu-color-text); line-height: var(--pu-leading); }
+.pu-text--muted { color: var(--pu-color-text-muted); }
+.pu-text--xs { font-size: var(--pu-text-xs); }
+.pu-text--sm { font-size: var(--pu-text-sm); }
+.pu-text--md { font-size: var(--pu-text-md); }
+.pu-text--lg { font-size: var(--pu-text-lg); }
+.pu-text--xl { font-size: var(--pu-text-xl); font-weight: var(--pu-font-semibold); letter-spacing: var(--pu-tracking-tight); line-height: var(--pu-leading-tight); }
+.pu-text--2xl { font-size: var(--pu-text-2xl); font-weight: var(--pu-font-bold); letter-spacing: var(--pu-tracking-display); line-height: var(--pu-leading-tight); }
+.pu-text--medium { font-weight: var(--pu-font-medium); }
+.pu-text--semibold { font-weight: var(--pu-font-semibold); }
+.pu-text--bold { 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", "text");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Text = component((raw: TextProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    { as: "p" as const, size: "md" as const, weight: "normal" as const, muted: false },
+    raw,
+  ) as ComponentProps<Required<Pick<TextProps, "as" | "size" | "weight">> & TextProps>;
+
+  const tag = props.as;
+  const className = () =>
+    cx(
+      "pu-text",
+      `pu-text--${props.size}`,
+      props.weight !== "normal" && `pu-text--${props.weight}`,
+      (typeof props.muted === "function" ? props.muted() : props.muted) &&
+        "pu-text--muted",
+      typeof props.class === "function" ? props.class() : props.class,
+    );
+
+  // Dynamic tag via h would be cleaner; jsx needs static tag — use span wrapper for rare tags via attribute
+  if (tag === "h1")
+    return <h1 class={className}>{props.children as never}</h1>;
+  if (tag === "h2")
+    return <h2 class={className}>{props.children as never}</h2>;
+  if (tag === "h3")
+    return <h3 class={className}>{props.children as never}</h3>;
+  if (tag === "h4")
+    return <h4 class={className}>{props.children as never}</h4>;
+  if (tag === "span")
+    return <span class={className}>{props.children as never}</span>;
+  if (tag === "label")
+    return <label class={className}>{props.children as never}</label>;
+  return <p class={className}>{props.children as never}</p>;
+});

package/src/components/Textarea.tsx

@@ -0,0 +1,128 @@
+import { effect, type Signal } from "@lab206/core";
+import { component, 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";
+
+export type TextareaProps = {
+  value?: MaybeReactive<string>;
+  /** Two-way bind a string signal — preferred over value + onInput. */
+  bind?: Bindable<string> | Signal<string>;
+  placeholder?: string;
+  rows?: number;
+  disabled?: MaybeReactive<boolean>;
+  class?: MaybeReactive<string>;
+  onInput?: (e: Event) => void;
+  onBlur?: (e: FocusEvent) => void;
+  id?: string;
+  "aria-label"?: string;
+  "aria-invalid"?: MaybeReactive<boolean>;
+};
+
+const styles = `
+.pu-textarea {
+  width: 100%;
+  min-height: calc(var(--pu-control-h-md) * 2.2);
+  padding: 0.65rem 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);
+  resize: vertical;
+  line-height: 1.45;
+  transition: border-color var(--pu-duration) var(--pu-ease), box-shadow var(--pu-duration) var(--pu-ease);
+}
+.pu-textarea::placeholder { color: var(--pu-color-text-muted); }
+.pu-textarea:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--pu-color-border) 60%, var(--pu-color-text-muted));
+}
+.pu-textarea: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);
+}
+.pu-textarea:disabled { opacity: 0.55; cursor: not-allowed; }
+.pu-textarea[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", "textarea");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/** Multiline text. Prefer `<Textarea bind={notes} />`. */
+export const Textarea = component((raw: TextareaProps) => {
+  ensureStyles();
+  const props = mergeProps({ rows: 4 }, raw) as ComponentProps<
+    TextareaProps & { rows: number }
+  >;
+
+  const bound = raw.bind;
+  const controlled = raw.value !== undefined || bound !== undefined;
+  let el: HTMLTextAreaElement | 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 (
+    <textarea
+      id={props.id}
+      class={() =>
+        cx(
+          "pu-textarea",
+          readStr(props.class as MaybeReactive<string>) || undefined,
+        )
+      }
+      rows={props.rows}
+      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 HTMLTextAreaElement | null;
+          if (t && "value" in t) bound.set(t.value);
+        }
+        props.onInput?.(e);
+      }}
+      onBlur={(e: FocusEvent) => {
+        if (controlled && el) {
+          const next = readValue();
+          if (el.value !== next) el.value = next;
+        }
+        props.onBlur?.(e);
+      }}
+      ref={(node) => {
+        el = node as HTMLTextAreaElement;
+        if (controlled && el && el.ownerDocument.activeElement !== el) {
+          const next = readValue();
+          if (el.value !== next) el.value = next;
+        }
+      }}
+      aria-label={props["aria-label"]}
+      aria-invalid={() =>
+        readBool(props["aria-invalid"] as MaybeReactive<boolean>)
+          ? true
+          : undefined
+      }
+    />
+  );
+});

package/src/components/Timeline.tsx

@@ -0,0 +1,150 @@
+import { For, component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type TimelineItem = {
+  id: string;
+  title: string;
+  description?: string;
+  time?: string;
+  tone?: "default" | "accent" | "success" | "danger";
+};
+
+export type TimelineProps = {
+  items: TimelineItem[] | (() => TimelineItem[]);
+  class?: string | (() => string);
+};
+
+const ensure = createStyleSheet(
+  "timeline",
+  `
+.pu-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.pu-timeline__item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0 0.85rem;
+}
+.pu-timeline__rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 0.85rem;
+}
+.pu-timeline__dot {
+  width: 0.7rem;
+  height: 0.7rem;
+  border-radius: 50%;
+  background: var(--pu-color-border-strong, var(--pu-color-border));
+  border: 2px solid var(--pu-color-surface);
+  box-shadow: 0 0 0 1px var(--pu-color-border);
+  z-index: 1;
+  margin-top: 0.35rem;
+  flex-shrink: 0;
+}
+.pu-timeline__dot--accent { background: var(--pu-color-accent); box-shadow: 0 0 0 1px var(--pu-color-accent); }
+.pu-timeline__dot--success { background: var(--pu-color-success, #69be28); box-shadow: 0 0 0 1px var(--pu-color-success, #69be28); }
+.pu-timeline__dot--danger { background: var(--pu-color-danger); box-shadow: 0 0 0 1px var(--pu-color-danger); }
+.pu-timeline__line {
+  flex: 1;
+  width: 2px;
+  background: var(--pu-color-border);
+  min-height: 1.25rem;
+  margin: 0.25rem 0 0;
+}
+.pu-timeline__item:last-child .pu-timeline__line { display: none; }
+.pu-timeline__body {
+  padding-bottom: 1.15rem;
+  min-width: 0;
+}
+.pu-timeline__item:last-child .pu-timeline__body { padding-bottom: 0; }
+.pu-timeline__time {
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  font-variant-numeric: tabular-nums;
+  margin-bottom: 0.15rem;
+}
+.pu-timeline__title {
+  margin: 0;
+  font-size: var(--pu-text-sm);
+  font-weight: var(--pu-font-semibold);
+  color: var(--pu-color-text);
+}
+.pu-timeline__desc {
+  margin: 0.25rem 0 0;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text-muted);
+  line-height: 1.5;
+}
+`,
+);
+
+/** Activity / event timeline. */
+export const Timeline = component((raw: TimelineProps) => {
+  ensure();
+  const props = raw as ComponentProps<TimelineProps>;
+  const getItems = () =>
+    typeof props.items === "function"
+      ? (props.items as () => TimelineItem[])()
+      : (props.items ?? []);
+
+  return (
+    <ol
+      class={() =>
+        cx(
+          "pu-timeline",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <For each={getItems}>
+        {(item) => (
+          <li class="pu-timeline__item">
+            <div class="pu-timeline__rail" aria-hidden="true">
+              <div
+                class={() =>
+                  cx(
+                    "pu-timeline__dot",
+                    item().tone &&
+                      item().tone !== "default" &&
+                      `pu-timeline__dot--${item().tone}`,
+                  )
+                }
+              />
+              <div class="pu-timeline__line" />
+            </div>
+            <div class="pu-timeline__body">
+              {() =>
+                item().time
+                  ? (() => {
+                      const t = document.createElement("div");
+                      t.className = "pu-timeline__time";
+                      t.textContent = item().time!;
+                      return t;
+                    })()
+                  : null
+              }
+              <h4 class="pu-timeline__title">{() => item().title}</h4>
+              {() =>
+                item().description
+                  ? (() => {
+                      const p = document.createElement("p");
+                      p.className = "pu-timeline__desc";
+                      p.textContent = item().description!;
+                      return p;
+                    })()
+                  : null
+              }
+            </div>
+          </li>
+        )}
+      </For>
+    </ol>
+  );
+});