@lab206/ui 0.1.0

package/src/components/Menu.tsx

@@ -0,0 +1,195 @@
+import { signal, effect } from "@lab206/core";
+import { For, component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { Popover } from "./Popover.js";
+import {
+  focusRovingItem,
+  handleRovingKeydown,
+  initRovingFocus,
+  listRovingItems,
+} from "../rovingFocus.js";
+
+export type MenuItem = {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  danger?: boolean;
+};
+
+export type MenuProps = {
+  /** Items shown in the menu */
+  items: MenuItem[] | (() => MenuItem[]);
+  /** Trigger node (Button recommended) */
+  trigger: unknown;
+  /** Called when an enabled item is chosen */
+  onSelect?: (id: string) => void;
+  align?: "start" | "center" | "end";
+  class?: string | (() => string);
+};
+
+const ITEM_SEL = '[role="menuitem"]:not([disabled])';
+
+const styles = `
+.pu-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 10.5rem;
+  margin: 0;
+  padding: 0;
+}
+.pu-menu__item {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  width: 100%;
+  font: inherit;
+  font-size: var(--pu-text-sm);
+  font-weight: var(--pu-font-medium);
+  letter-spacing: -0.01em;
+  color: var(--pu-color-text);
+  padding: 0.5rem 0.65rem;
+  border-radius: var(--pu-radius-sm);
+  cursor: pointer;
+  transition:
+    background var(--pu-duration-fast) var(--pu-ease-out),
+    transform var(--pu-duration-fast) var(--pu-ease-out),
+    color var(--pu-duration-fast) var(--pu-ease-out);
+}
+.pu-menu__item:hover:not(:disabled),
+.pu-menu__item:focus-visible:not(:disabled) {
+  background: var(--pu-color-surface-2);
+  transform: translateX(2px);
+  outline: none;
+}
+.pu-menu__item:focus-visible:not(:disabled) {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pu-color-focus) 45%, transparent);
+}
+.pu-menu__item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.pu-menu__item--danger {
+  color: var(--pu-color-danger);
+}
+.pu-menu__item--danger:hover:not(:disabled),
+.pu-menu__item--danger:focus-visible:not(:disabled) {
+  background: color-mix(in srgb, var(--pu-color-danger) 12%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-menu__item { transition: none; }
+  .pu-menu__item:hover:not(:disabled),
+  .pu-menu__item:focus-visible:not(:disabled) { transform: none; }
+}
+`;
+
+function ensureStyles(doc: Document = document) {
+  if (typeof doc === "undefined") return;
+  if (doc.querySelector('style[data-pu-ui="menu"]')) return;
+  const el = doc.createElement("style");
+  el.setAttribute("data-pu-ui", "menu");
+  el.textContent = styles;
+  doc.head.appendChild(el);
+}
+
+/**
+ * Action menu built on Popover.
+ * Arrow / Home / End roving focus · Enter / Space select · Esc closes (Popover).
+ */
+export const Menu = component((raw: MenuProps) => {
+  ensureStyles();
+  const props = mergeProps({ align: "start" as const }, raw) as ComponentProps<
+    MenuProps & { align: "start" | "center" | "end" }
+  >;
+
+  const open = signal(false);
+  let menuEl: HTMLElement | null = null;
+
+  const getItems = (): MenuItem[] => {
+    const i = props.items;
+    return typeof i === "function" ? (i as () => MenuItem[])() : (i ?? []);
+  };
+
+  const pick = (id: string) => {
+    const item = getItems().find((x) => x.id === id);
+    if (!item || item.disabled) return;
+    props.onSelect?.(id);
+    open.set(false);
+  };
+
+  // Focus first enabled item when menu opens
+  effect(() => {
+    if (!open()) return;
+    const t = window.setTimeout(() => {
+      if (!menuEl) return;
+      initRovingFocus(menuEl, ITEM_SEL, 0);
+      const items = listRovingItems(menuEl, ITEM_SEL);
+      focusRovingItem(items, 0);
+    }, 0);
+    return () => window.clearTimeout(t);
+  });
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-menu-root",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensureStyles(el.ownerDocument)}
+    >
+      <Popover
+        open={open}
+        onOpenChange={(v) => open.set(v)}
+        align={props.align}
+        trigger={props.trigger}
+      >
+        <div
+          class="pu-menu"
+          role="menu"
+          ref={(el) => {
+            menuEl = el;
+          }}
+          onKeyDown={(e: KeyboardEvent) => {
+            if (!menuEl) return;
+            handleRovingKeydown(e, menuEl, ITEM_SEL, {
+              orientation: "vertical",
+              loop: true,
+              onActivate: (el) => {
+                const id = el.dataset.menuId;
+                if (id) pick(id);
+              },
+            });
+          }}
+        >
+          <For each={getItems}>
+            {(item) => (
+              <button
+                type="button"
+                role="menuitem"
+                tabindex={-1}
+                data-menu-id={() => item().id}
+                class={() =>
+                  cx(
+                    "pu-menu__item",
+                    item().danger && "pu-menu__item--danger",
+                  )
+                }
+                disabled={() => !!item().disabled}
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  if (item().disabled) return;
+                  pick(item().id);
+                }}
+              >
+                {() => item().label}
+              </button>
+            )}
+          </For>
+        </div>
+      </Popover>
+    </div>
+  );
+});

package/src/components/NumberInput.tsx

@@ -0,0 +1,158 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+import { readBool, readNum, type MaybeReactive } from "../reactive.js";
+
+export type NumberInputProps = {
+  value?: MaybeReactive<number>;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: MaybeReactive<boolean>;
+  onChange?: (value: number) => void;
+  placeholder?: string;
+  class?: MaybeReactive<string>;
+  id?: string;
+  "aria-label"?: string;
+};
+
+const ensure = createStyleSheet(
+  "number-input",
+  `
+.pu-number {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--pu-color-control-border, var(--pu-color-border));
+  border-radius: var(--pu-radius-md);
+  background: var(--pu-color-surface);
+  overflow: hidden;
+  height: var(--pu-control-h-md);
+}
+.pu-number:focus-within {
+  border-color: var(--pu-color-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pu-color-accent) 18%, transparent);
+}
+.pu-number[data-disabled="true"] {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.pu-number__btn {
+  appearance: none;
+  border: 0;
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text);
+  width: 2rem;
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.pu-number__btn:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--pu-color-accent) 12%, var(--pu-color-surface-2));
+}
+.pu-number__btn:focus-visible {
+  outline: none;
+  z-index: 1;
+  box-shadow:
+    inset 0 0 0 2px color-mix(in srgb, var(--pu-color-focus) 45%, transparent);
+}
+.pu-number__btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.pu-number__input {
+  appearance: textfield;
+  -moz-appearance: textfield;
+  border: 0;
+  background: transparent;
+  color: var(--pu-color-text);
+  font: inherit;
+  font-size: var(--pu-text-sm);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  width: 4rem;
+  min-width: 0;
+  padding: 0 0.25rem;
+  outline: none;
+}
+.pu-number__input::-webkit-outer-spin-button,
+.pu-number__input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+`,
+);
+
+function clamp(n: number, min?: number, max?: number) {
+  let v = n;
+  if (min != null && !Number.isNaN(min)) v = Math.max(min, v);
+  if (max != null && !Number.isNaN(max)) v = Math.min(max, v);
+  return v;
+}
+
+/** Numeric stepper with − / + controls. */
+export const NumberInput = component((raw: NumberInputProps) => {
+  ensure();
+  const props = mergeProps({ step: 1 }, raw) as ComponentProps<
+    NumberInputProps & { step: number }
+  >;
+  const id = props.id ?? `pu-num-${Math.random().toString(36).slice(2, 9)}`;
+
+  const val = () => readNum(props.value as MaybeReactive<number>, 0);
+  const isDisabled = () =>
+    readBool(props.disabled as MaybeReactive<boolean>);
+
+  const set = (n: number) => {
+    const next = clamp(n, props.min, props.max);
+    if (!Number.isNaN(next)) props.onChange?.(next);
+  };
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-number",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      data-disabled={() => (isDisabled() ? "true" : "false")}
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <button
+        type="button"
+        class="pu-number__btn"
+        aria-label="Decrease"
+        disabled={() =>
+          isDisabled() || (props.min != null && val() <= props.min)
+        }
+        onClick={() => set(val() - props.step)}
+      >
+        −
+      </button>
+      <input
+        id={id}
+        class="pu-number__input"
+        type="number"
+        value={val}
+        min={props.min}
+        max={props.max}
+        step={props.step}
+        disabled={isDisabled}
+        placeholder={props.placeholder}
+        aria-label={props["aria-label"]}
+        onInput={(e: Event) => {
+          const n = Number((e.target as HTMLInputElement).value);
+          if (!Number.isNaN(n)) set(n);
+        }}
+      />
+      <button
+        type="button"
+        class="pu-number__btn"
+        aria-label="Increase"
+        disabled={() =>
+          isDisabled() || (props.max != null && val() >= props.max)
+        }
+        onClick={() => set(val() + props.step)}
+      >
+        +
+      </button>
+    </div>
+  );
+});

package/src/components/Pagination.tsx

@@ -0,0 +1,153 @@
+import { component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type PaginationProps = {
+  page: number | (() => number);
+  pageCount: number | (() => number);
+  onChange?: (page: number) => void;
+  class?: string | (() => string);
+};
+
+const ensure = createStyleSheet(
+  "pagination",
+  `
+.pu-pagination {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex-wrap: wrap;
+}
+.pu-pagination__btn {
+  appearance: none;
+  border: 1px solid var(--pu-color-border);
+  background: var(--pu-color-surface);
+  color: var(--pu-color-text);
+  font: inherit;
+  font-size: var(--pu-text-sm);
+  font-weight: var(--pu-font-medium);
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.5rem;
+  border-radius: var(--pu-radius-md);
+  cursor: pointer;
+}
+.pu-pagination__btn:hover:not(:disabled) {
+  background: var(--pu-color-surface-2);
+}
+.pu-pagination__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-pagination__btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.pu-pagination__btn.is-active {
+  background: var(--pu-color-accent);
+  color: var(--pu-color-accent-fg);
+  border-color: transparent;
+}
+.pu-pagination__btn {
+  transition:
+    background var(--pu-duration-fast) var(--pu-ease),
+    color var(--pu-duration-fast) var(--pu-ease),
+    border-color var(--pu-duration-fast) var(--pu-ease),
+    box-shadow var(--pu-duration-fast) var(--pu-ease);
+}
+.pu-pagination__meta {
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  margin-left: 0.35rem;
+}
+`,
+);
+
+export const Pagination = component((raw: PaginationProps) => {
+  ensure();
+  const props = raw as ComponentProps<PaginationProps>;
+  const page = () =>
+    typeof props.page === "function"
+      ? (props.page as () => number)()
+      : props.page;
+  const count = () =>
+    typeof props.pageCount === "function"
+      ? (props.pageCount as () => number)()
+      : props.pageCount;
+
+  const go = (p: number) => {
+    const c = Math.max(1, count());
+    const next = Math.min(c, Math.max(1, p));
+    props.onChange?.(next);
+  };
+
+  // Build a compact page list: 1 … n around current
+  const pages = () => {
+    const c = Math.max(1, count());
+    const p = page();
+    const set = new Set<number>([1, c, p - 1, p, p + 1]);
+    return [...set].filter((n) => n >= 1 && n <= c).sort((a, b) => a - b);
+  };
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-pagination",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      role="navigation"
+      aria-label="Pagination"
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <button
+        type="button"
+        class="pu-pagination__btn"
+        disabled={() => page() <= 1}
+        onClick={() => go(page() - 1)}
+        aria-label="Previous page"
+      >
+        ‹
+      </button>
+      {() => {
+        const list = pages();
+        const frag = document.createDocumentFragment();
+        let prev = 0;
+        for (const n of list) {
+          if (prev && n - prev > 1) {
+            const dots = document.createElement("span");
+            dots.className = "pu-pagination__meta";
+            dots.textContent = "…";
+            frag.appendChild(dots);
+          }
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className =
+            "pu-pagination__btn" + (n === page() ? " is-active" : "");
+          btn.textContent = String(n);
+          btn.setAttribute("aria-label", `Page ${n}`);
+          if (n === page()) btn.setAttribute("aria-current", "page");
+          btn.onclick = () => go(n);
+          frag.appendChild(btn);
+          prev = n;
+        }
+        return frag;
+      }}
+      <button
+        type="button"
+        class="pu-pagination__btn"
+        disabled={() => page() >= count()}
+        onClick={() => go(page() + 1)}
+        aria-label="Next page"
+      >
+        ›
+      </button>
+      <span class="pu-pagination__meta">
+        {() => `Page ${page()} / ${count()}`}
+      </span>
+    </div>
+  );
+});