@lab206/ui 0.1.0

package/src/components/Toast.tsx

@@ -0,0 +1,221 @@
+import { signal, type Signal } from "@lab206/core";
+import { For, component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type ToastTone = "info" | "success" | "danger";
+
+export type ToastItem = {
+  id: number;
+  title: string;
+  description?: string;
+  tone: ToastTone;
+};
+
+export type ToastController = {
+  items: Signal<ToastItem[]>;
+  push: (opts: {
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    duration?: number;
+  }) => number;
+  dismiss: (id: number) => void;
+  clear: () => void;
+};
+
+let nextId = 1;
+
+/**
+ * Create a toast queue. Call `push()` from event handlers; mount `<Toaster />`
+ * once near the app root.
+ */
+export function createToaster(): ToastController {
+  const items = signal<ToastItem[]>([]);
+
+  function dismiss(id: number) {
+    items.update((list) => list.filter((t) => t.id !== id));
+  }
+
+  function push(opts: {
+    title: string;
+    description?: string;
+    tone?: ToastTone;
+    duration?: number;
+  }): number {
+    const id = nextId++;
+    const item: ToastItem = {
+      id,
+      title: opts.title,
+      tone: opts.tone ?? "info",
+      ...(opts.description !== undefined
+        ? { description: opts.description }
+        : {}),
+    };
+    items.update((list) => [...list, item].slice(-5));
+    const ms = opts.duration ?? 3200;
+    if (ms > 0 && typeof window !== "undefined") {
+      window.setTimeout(() => dismiss(id), ms);
+    }
+    return id;
+  }
+
+  return {
+    items,
+    push,
+    dismiss,
+    clear: () => items.set([]),
+  };
+}
+
+export type ToasterProps = {
+  toaster: ToastController;
+  class?: string | (() => string);
+};
+
+const styles = `
+.pu-toaster {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+  z-index: var(--pu-z-toast);
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+  width: min(22rem, calc(100vw - 2rem));
+  pointer-events: none;
+}
+.pu-toast {
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  padding: 0.75rem 0.85rem;
+  border-radius: var(--pu-radius-lg);
+  background: var(--pu-color-surface-elevated);
+  border: 1px solid var(--pu-color-border);
+  box-shadow: var(--pu-shadow-float);
+  animation: pu-toast-in var(--pu-duration) var(--pu-ease-out);
+}
+.pu-toast__body {
+  flex: 1;
+  min-width: 0;
+}
+.pu-toast__title {
+  margin: 0;
+  font-size: var(--pu-text-sm);
+  font-weight: var(--pu-font-semibold);
+  letter-spacing: -0.015em;
+  color: var(--pu-color-text);
+}
+.pu-toast__desc {
+  margin: 0.2rem 0 0;
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  line-height: 1.4;
+}
+.pu-toast__close {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--pu-color-text-muted);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0.1rem;
+  border-radius: var(--pu-radius-sm);
+}
+.pu-toast__close:hover {
+  color: var(--pu-color-text);
+  background: var(--pu-color-surface-2);
+}
+.pu-toast--info {
+  border-color: color-mix(in srgb, var(--pu-color-accent) 30%, var(--pu-color-border));
+}
+.pu-toast--success {
+  border-color: color-mix(in srgb, var(--pu-sage-500) 40%, var(--pu-color-border));
+}
+.pu-toast--danger {
+  border-color: color-mix(in srgb, var(--pu-color-danger) 40%, var(--pu-color-border));
+}
+.pu-toast__dot {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  margin-top: 0.35rem;
+  flex-shrink: 0;
+  background: var(--pu-color-accent);
+}
+.pu-toast--success .pu-toast__dot { background: var(--pu-sage-500); }
+.pu-toast--danger .pu-toast__dot { background: var(--pu-color-danger); }
+@keyframes pu-toast-in {
+  from { opacity: 0; transform: translateY(8px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-toast { animation: none; }
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "toast");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/**
+ * Renders the toast stack for a `createToaster()` controller.
+ */
+export const Toaster = component((raw: ToasterProps) => {
+  ensureStyles();
+  const props = raw as ComponentProps<ToasterProps>;
+  const toaster = props.toaster;
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-toaster",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      aria-live="polite"
+      aria-relevant="additions"
+    >
+      <For each={() => toaster.items()}>
+        {(item) => (
+          <div
+            class={() => `pu-toast pu-toast--${item().tone}`}
+            role="status"
+          >
+            <span class="pu-toast__dot" aria-hidden="true" />
+            <div class="pu-toast__body">
+              <p class="pu-toast__title">{() => item().title}</p>
+              <p
+                class="pu-toast__desc"
+                style={() =>
+                  item().description
+                    ? { display: "block" }
+                    : { display: "none" }
+                }
+              >
+                {() => item().description ?? ""}
+              </p>
+            </div>
+            <button
+              type="button"
+              class="pu-toast__close"
+              aria-label="Dismiss"
+              onClick={() => toaster.dismiss(item().id)}
+            >
+              ×
+            </button>
+          </div>
+        )}
+      </For>
+    </div>
+  );
+});

package/src/components/ToggleGroup.tsx

@@ -0,0 +1,161 @@
+import { For, component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type ToggleOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type ToggleGroupProps = {
+  options: ToggleOption[] | (() => ToggleOption[]);
+  /** Controlled value(s) — string for single, string[] for multi */
+  value?: string | string[] | (() => string | string[]);
+  /** Allow multiple selections */
+  multiple?: boolean;
+  onChange?: (value: string | string[]) => void;
+  size?: "sm" | "md";
+  class?: string | (() => string);
+};
+
+const ensure = createStyleSheet(
+  "toggle-group",
+  `
+.pu-toggle-group {
+  display: inline-flex;
+  align-items: stretch;
+  padding: 3px;
+  gap: 2px;
+  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%;
+  flex-wrap: wrap;
+}
+.pu-toggle {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--pu-color-text-muted);
+  font: inherit;
+  font-weight: var(--pu-font-semibold);
+  letter-spacing: -0.01em;
+  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-out);
+}
+.pu-toggle--sm { padding: 0.3rem 0.65rem; font-size: var(--pu-text-xs); }
+.pu-toggle--md { padding: 0.4rem 0.85rem; font-size: var(--pu-text-sm); }
+.pu-toggle:hover:not(:disabled):not(.is-on) {
+  color: var(--pu-color-text);
+  background: color-mix(in srgb, var(--pu-color-surface) 70%, transparent);
+}
+.pu-toggle:active:not(:disabled) { transform: scale(0.96); }
+.pu-toggle:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--pu-color-surface-sunken),
+    0 0 0 4px color-mix(in srgb, var(--pu-color-focus) 55%, transparent);
+  z-index: 1;
+}
+.pu-toggle.is-on {
+  background: var(--pu-color-surface);
+  color: var(--pu-color-text);
+  box-shadow: var(--pu-shadow-xs);
+}
+.pu-toggle.is-on:focus-visible {
+  box-shadow:
+    var(--pu-shadow-xs),
+    0 0 0 2px var(--pu-color-surface),
+    0 0 0 4px color-mix(in srgb, var(--pu-color-focus) 55%, transparent);
+}
+.pu-toggle:disabled { opacity: 0.45; cursor: not-allowed; }
+@media (prefers-reduced-motion: reduce) {
+  .pu-toggle {
+    transition: background var(--pu-duration-fast) linear, color var(--pu-duration-fast) linear;
+  }
+  .pu-toggle:active:not(:disabled) { transform: none; }
+}
+`,
+);
+
+/** Segmented control — single or multi select. */
+export const ToggleGroup = component((raw: ToggleGroupProps) => {
+  ensure();
+  const props = mergeProps(
+    { multiple: false, size: "md" as const },
+    raw,
+  ) as ComponentProps<
+    ToggleGroupProps & { multiple: boolean; size: "sm" | "md" }
+  >;
+
+  const current = (): string | string[] => {
+    if (props.value === undefined) return props.multiple ? [] : "";
+    return typeof props.value === "function"
+      ? (props.value as () => string | string[])()
+      : props.value;
+  };
+
+  const isOn = (v: string) => {
+    const c = current();
+    return Array.isArray(c) ? c.includes(v) : c === v;
+  };
+
+  const toggle = (v: string) => {
+    if (props.multiple) {
+      const c = current();
+      const arr = Array.isArray(c) ? [...c] : c ? [c] : [];
+      const i = arr.indexOf(v);
+      if (i >= 0) arr.splice(i, 1);
+      else arr.push(v);
+      props.onChange?.(arr);
+    } else {
+      props.onChange?.(v);
+    }
+  };
+
+  const getOptions = () =>
+    typeof props.options === "function"
+      ? (props.options as () => ToggleOption[])()
+      : (props.options ?? []);
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-toggle-group",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      role="group"
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <For each={getOptions}>
+        {(opt) => (
+          <button
+            type="button"
+            class={() =>
+              cx(
+                "pu-toggle",
+                `pu-toggle--${props.size}`,
+                isOn(opt().value) && "is-on",
+              )
+            }
+            aria-pressed={() => isOn(opt().value)}
+            disabled={() => !!opt().disabled}
+            onClick={() => toggle(opt().value)}
+          >
+            {() => opt().label}
+          </button>
+        )}
+      </For>
+    </div>
+  );
+});

package/src/components/Tooltip.tsx

@@ -0,0 +1,187 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type TooltipProps = {
+  /** Tooltip text */
+  content: string | (() => string);
+  /** Preferred side */
+  side?: "top" | "bottom";
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-tooltip {
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+}
+.pu-tooltip__trigger {
+  display: inline-flex;
+  max-width: 100%;
+}
+.pu-tooltip__bubble {
+  position: fixed;
+  z-index: var(--pu-z-toast);
+  padding: 0.35rem 0.55rem;
+  border-radius: var(--pu-radius-sm);
+  background: var(--pu-gray-900);
+  color: var(--pu-gray-50);
+  font-size: var(--pu-text-xs);
+  font-weight: var(--pu-font-medium);
+  line-height: 1.35;
+  letter-spacing: -0.01em;
+  max-width: min(16rem, 70vw);
+  white-space: normal;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(4px) scale(0.96);
+  transition:
+    opacity var(--pu-duration) var(--pu-ease-out),
+    transform var(--pu-duration) var(--pu-ease-out),
+    visibility var(--pu-duration) var(--pu-ease-out);
+  box-shadow: var(--pu-shadow-md);
+  border: 1px solid color-mix(in srgb, var(--pu-gray-700) 80%, transparent);
+}
+[data-pu-theme="dark"] .pu-tooltip__bubble {
+  background: var(--pu-gray-800);
+  border-color: var(--pu-gray-700);
+}
+.pu-tooltip__bubble.is-open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0) scale(1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-tooltip__bubble { transition: none; transform: none; }
+  .pu-tooltip__bubble.is-open { transform: none; }
+}
+`;
+
+let injected = false;
+function ensureStyles(doc: Document = document) {
+  if (typeof doc === "undefined") return;
+  if (doc.querySelector('style[data-pu-ui="tooltip"]')) return;
+  const el = doc.createElement("style");
+  el.setAttribute("data-pu-ui", "tooltip");
+  el.textContent = styles;
+  doc.head.appendChild(el);
+  if (doc === document) injected = true;
+}
+
+/**
+ * Lightweight hover/focus tooltip.
+ * Bubble is portaled to `document.body` so overflow:hidden ancestors cannot clip it.
+ */
+export const Tooltip = component((raw: TooltipProps) => {
+  ensureStyles();
+  const props = mergeProps({ side: "top" as const }, raw) as ComponentProps<
+    TooltipProps & { side: "top" | "bottom" }
+  >;
+
+  const text = () =>
+    typeof props.content === "function"
+      ? (props.content as () => string)()
+      : props.content;
+
+  let rootEl: HTMLElement | null = null;
+  let triggerEl: HTMLElement | null = null;
+  let bubbleEl: HTMLElement | null = null;
+  let portaled = false;
+
+  const place = () => {
+    if (!triggerEl || !bubbleEl) return;
+    if (!bubbleEl.classList.contains("is-open")) return;
+    const doc = triggerEl.ownerDocument;
+    const win = doc.defaultView ?? window;
+    const gap = 8;
+    const pad = 8;
+    const rect = triggerEl.getBoundingClientRect();
+    const bw = bubbleEl.offsetWidth || 120;
+    const bh = bubbleEl.offsetHeight || 28;
+    const vw = win.innerWidth;
+    const vh = win.innerHeight;
+
+    const prefer = props.side;
+    const spaceAbove = rect.top - gap - pad;
+    const spaceBelow = vh - rect.bottom - gap - pad;
+    let side: "top" | "bottom" = prefer;
+    if (prefer === "top" && spaceAbove < bh && spaceBelow > spaceAbove) {
+      side = "bottom";
+    } else if (
+      prefer === "bottom" &&
+      spaceBelow < bh &&
+      spaceAbove > spaceBelow
+    ) {
+      side = "top";
+    }
+
+    let top = side === "top" ? rect.top - gap - bh : rect.bottom + gap;
+    top = Math.min(Math.max(pad, top), Math.max(pad, vh - bh - pad));
+
+    let left = rect.left + rect.width / 2 - bw / 2;
+    left = Math.min(Math.max(pad, left), Math.max(pad, vw - bw - pad));
+
+    bubbleEl.dataset.side = side;
+    bubbleEl.style.top = `${Math.round(top)}px`;
+    bubbleEl.style.left = `${Math.round(left)}px`;
+  };
+
+  const ensurePortal = () => {
+    if (!bubbleEl || portaled) return;
+    const doc = bubbleEl.ownerDocument;
+    ensureStyles(doc);
+    doc.body.appendChild(bubbleEl);
+    portaled = true;
+  };
+
+  const open = () => {
+    ensurePortal();
+    bubbleEl?.classList.add("is-open");
+    rootEl?.classList.add("is-open");
+    const win = triggerEl?.ownerDocument.defaultView ?? window;
+    win.setTimeout(place, 0);
+  };
+  const close = () => {
+    bubbleEl?.classList.remove("is-open");
+    rootEl?.classList.remove("is-open");
+  };
+
+  return (
+    <span
+      class={() =>
+        cx(
+          "pu-tooltip",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => {
+        rootEl = el;
+        ensureStyles(el.ownerDocument);
+      }}
+      onMouseEnter={open}
+      onMouseLeave={close}
+      onFocusIn={open}
+      onFocusOut={close}
+    >
+      <span
+        class="pu-tooltip__trigger"
+        ref={(el) => {
+          triggerEl = el;
+        }}
+      >
+        {props.children as never}
+      </span>
+      <span
+        class="pu-tooltip__bubble"
+        role="tooltip"
+        ref={(el) => {
+          bubbleEl = el;
+        }}
+      >
+        {text}
+      </span>
+    </span>
+  );
+});