@lab206/ui 0.1.0

package/src/components/Popover.tsx

@@ -0,0 +1,219 @@
+import { effect } from "@lab206/core";
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { attachOverlay } from "../overlay.js";
+import { readBool, type MaybeReactive } from "../reactive.js";
+
+export type PopoverProps = {
+  /** Controlled open state (boolean, signal, or accessor) */
+  open: MaybeReactive<boolean>;
+  onOpenChange?: (open: boolean) => void;
+  /** Trigger content (usually a Button) */
+  trigger: unknown;
+  /** Panel body */
+  children?: unknown;
+  /** Preferred alignment under the trigger */
+  align?: "start" | "center" | "end";
+  class?: MaybeReactive<string>;
+};
+
+const styles = `
+.pu-popover {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  max-width: 100%;
+}
+.pu-popover--open {
+  z-index: var(--pu-z-overlay);
+}
+.pu-popover__trigger {
+  display: inline-flex;
+  max-width: 100%;
+  cursor: pointer;
+}
+.pu-popover__panel {
+  position: fixed;
+  z-index: var(--pu-z-overlay);
+  min-width: 12rem;
+  max-width: min(20rem, calc(100vw - 1.5rem));
+  max-height: min(70vh, 24rem);
+  overflow: auto;
+  padding: var(--pu-space-3);
+  border-radius: var(--pu-radius-lg);
+  background: var(--pu-color-surface-elevated);
+  color: var(--pu-color-text);
+  border: 1px solid var(--pu-color-border);
+  box-shadow: var(--pu-shadow-float);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(6px) scale(0.98);
+  transform-origin: top center;
+  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);
+}
+.pu-popover__panel[data-side="top"] {
+  transform: translateY(-6px) scale(0.98);
+  transform-origin: bottom center;
+}
+.pu-popover--open .pu-popover__panel {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0) scale(1);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-popover__panel { transition: none; transform: none; }
+  .pu-popover--open .pu-popover__panel { transform: none; }
+}
+`;
+
+function ensureStyles(doc: Document = document) {
+  if (typeof doc === "undefined") return;
+  if (doc.querySelector('style[data-pu-ui="popover"]')) return;
+  const el = doc.createElement("style");
+  el.setAttribute("data-pu-ui", "popover");
+  el.textContent = styles;
+  doc.head.appendChild(el);
+}
+
+/**
+ * Anchored floating panel. Control with `open` + `onOpenChange`.
+ * Escape + outside dismiss via shared `attachOverlay` (stacked with modals).
+ */
+export const Popover = component((raw: PopoverProps) => {
+  ensureStyles();
+  const props = mergeProps({ align: "start" as const }, raw) as ComponentProps<
+    PopoverProps & { align: "start" | "center" | "end" }
+  >;
+
+  const isOpen = () => readBool(props.open as MaybeReactive<boolean>);
+
+  let rootEl: HTMLElement | null = null;
+  let panelEl: HTMLElement | null = null;
+  let triggerEl: HTMLElement | null = null;
+
+  const placePanel = () => {
+    if (!rootEl || !panelEl || !triggerEl || !isOpen()) return;
+    const doc = rootEl.ownerDocument;
+    const win = doc.defaultView ?? window;
+    const gap = 8;
+    const pad = 8;
+    const rect = triggerEl.getBoundingClientRect();
+    const vw = win.innerWidth;
+    const vh = win.innerHeight;
+
+    panelEl.style.maxHeight = "";
+    const naturalH = panelEl.scrollHeight || panelEl.offsetHeight || 160;
+    const pw = Math.min(
+      panelEl.offsetWidth || 192,
+      Math.max(pad * 2, vw - pad * 2),
+    );
+
+    const spaceBelow = vh - rect.bottom - gap - pad;
+    const spaceAbove = rect.top - gap - pad;
+    const placeAbove =
+      spaceBelow < Math.min(naturalH, 120) && spaceAbove > spaceBelow;
+
+    const available = Math.max(96, placeAbove ? spaceAbove : spaceBelow);
+    const maxH = Math.min(naturalH, available, vh * 0.7);
+    panelEl.style.maxHeight = `${Math.round(maxH)}px`;
+
+    const ph = Math.min(panelEl.offsetHeight || maxH, maxH);
+
+    let top: number;
+    if (placeAbove) {
+      top = rect.top - gap - ph;
+      panelEl.dataset.side = "top";
+    } else {
+      top = rect.bottom + gap;
+      panelEl.dataset.side = "bottom";
+    }
+    top = Math.min(Math.max(pad, top), Math.max(pad, vh - ph - pad));
+
+    let left = rect.left;
+    if (props.align === "center") {
+      left = rect.left + rect.width / 2 - pw / 2;
+    } else if (props.align === "end") {
+      left = rect.right - pw;
+    }
+    left = Math.min(Math.max(pad, left), Math.max(pad, vw - pw - pad));
+
+    panelEl.style.top = `${Math.round(top)}px`;
+    panelEl.style.left = `${Math.round(left)}px`;
+    panelEl.style.width = "max-content";
+    panelEl.style.minWidth = `${Math.min(pw, Math.max(rect.width, 10.5 * 16))}px`;
+  };
+
+  effect(() => {
+    if (!isOpen()) return;
+    return attachOverlay({
+      getRoot: () => rootEl,
+      onClose: () => props.onOpenChange?.(false),
+      escape: true,
+      dismissOutside: true,
+      onAttach: ({ doc, win }) => {
+        ensureStyles(doc);
+        const onReposition = () => placePanel();
+        const placeTimer = win.setTimeout(() => {
+          placePanel();
+          win.setTimeout(placePanel, 16);
+        }, 0);
+        win.addEventListener("resize", onReposition);
+        doc.addEventListener("scroll", onReposition, true);
+        win.addEventListener("scroll", onReposition, true);
+        return () => {
+          win.clearTimeout(placeTimer);
+          win.removeEventListener("resize", onReposition);
+          doc.removeEventListener("scroll", onReposition, true);
+          win.removeEventListener("scroll", onReposition, true);
+        };
+      },
+    });
+  });
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-popover",
+          isOpen() && "pu-popover--open",
+          typeof props.class === "function"
+            ? (props.class as () => string)()
+            : props.class,
+        )
+      }
+      ref={(el) => {
+        rootEl = el;
+        ensureStyles(el.ownerDocument);
+      }}
+    >
+      <div
+        class="pu-popover__trigger"
+        ref={(el) => {
+          triggerEl = el;
+        }}
+        onClick={(e: MouseEvent) => {
+          e.stopPropagation();
+          props.onOpenChange?.(!isOpen());
+        }}
+      >
+        {props.trigger as never}
+      </div>
+      <div
+        class="pu-popover__panel"
+        role="dialog"
+        aria-modal="false"
+        aria-hidden={() => (!isOpen() ? "true" : "false")}
+        ref={(el) => {
+          panelEl = el;
+        }}
+      >
+        {props.children as never}
+      </div>
+    </div>
+  );
+});

package/src/components/Progress.tsx

@@ -0,0 +1,108 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type ProgressProps = {
+  /** 0–100 */
+  value?: number | (() => number);
+  /** Accessible label */
+  label?: string;
+  size?: "sm" | "md";
+  class?: string | (() => string);
+};
+
+const styles = `
+.pu-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pu-space-2);
+  width: 100%;
+  min-width: 0;
+}
+.pu-progress__meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--pu-space-3);
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+  font-weight: var(--pu-font-medium);
+}
+.pu-progress__track {
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--pu-radius-full);
+  background: var(--pu-color-surface-sunken);
+  border: 1px solid var(--pu-color-border);
+}
+.pu-progress--sm .pu-progress__track { height: 0.4rem; }
+.pu-progress--md .pu-progress__track { height: 0.55rem; }
+.pu-progress__bar {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(
+    90deg,
+    var(--pu-brand-500),
+    var(--pu-sage-400)
+  );
+  transition: width var(--pu-duration-slow) var(--pu-ease-out);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "progress");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Progress = component((raw: ProgressProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    { value: 0, size: "md" as const },
+    raw,
+  ) as ComponentProps<ProgressProps & { value: number | (() => number); size: "sm" | "md" }>;
+
+  const pct = () => {
+    const v =
+      typeof props.value === "function"
+        ? (props.value as () => number)()
+        : (props.value as number);
+    return Math.max(0, Math.min(100, Number.isFinite(v) ? v : 0));
+  };
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-progress",
+          `pu-progress--${props.size}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      {props.label ? (
+        <div class="pu-progress__meta">
+          <span>{props.label}</span>
+          <span>{() => `${Math.round(pct())}%`}</span>
+        </div>
+      ) : null}
+      <div
+        class="pu-progress__track"
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={() => Math.round(pct())}
+        aria-label={props.label}
+      >
+        <div
+          class="pu-progress__bar"
+          style={() => ({ width: `${pct()}%` })}
+        />
+      </div>
+    </div>
+  );
+});

package/src/components/Radio.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 RadioOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+export type RadioGroupProps = {
+  options: RadioOption[] | (() => RadioOption[]);
+  value?: string | (() => string);
+  name?: string;
+  disabled?: boolean | (() => boolean);
+  onChange?: (value: string) => void;
+  orientation?: "vertical" | "horizontal";
+  class?: string | (() => string);
+};
+
+const ensure = createStyleSheet(
+  "radio",
+  `
+.pu-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.pu-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.25rem;
+}
+.pu-radio {
+  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-radio[data-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.pu-radio__dot {
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  border: 1.5px solid var(--pu-color-control-border, var(--pu-color-border-strong));
+  background: var(--pu-color-surface);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  transition:
+    border-color var(--pu-duration) var(--pu-ease),
+    background var(--pu-duration) var(--pu-ease);
+}
+.pu-radio:hover:not([data-disabled="true"]) .pu-radio__dot {
+  border-color: var(--pu-color-border-strong);
+}
+.pu-radio[data-checked="true"] .pu-radio__dot {
+  border-color: var(--pu-color-accent);
+}
+.pu-radio__dot::after {
+  content: "";
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 50%;
+  background: var(--pu-color-accent);
+  opacity: 0;
+  transform: scale(0.5);
+  transition:
+    opacity var(--pu-duration) var(--pu-ease),
+    transform var(--pu-duration) var(--pu-ease);
+}
+.pu-radio[data-checked="true"] .pu-radio__dot::after {
+  opacity: 1;
+  transform: scale(1);
+}
+.pu-radio__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.pu-radio__input:focus-visible + .pu-radio__dot {
+  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);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-radio__dot,
+  .pu-radio__dot::after { transition: none; }
+}
+`,
+);
+
+/** Radio group — single selection from options. */
+export const RadioGroup = component((raw: RadioGroupProps) => {
+  ensure();
+  const props = mergeProps(
+    { orientation: "vertical" as const },
+    raw,
+  ) as ComponentProps<RadioGroupProps & { orientation: "vertical" | "horizontal" }>;
+
+  const name =
+    props.name ?? `pu-radio-${Math.random().toString(36).slice(2, 9)}`;
+
+  const current = () =>
+    typeof props.value === "function"
+      ? (props.value as () => string)()
+      : (props.value ?? "");
+  const groupDisabled = () =>
+    !!(typeof props.disabled === "function" ? props.disabled() : props.disabled);
+
+  const getOptions = () =>
+    typeof props.options === "function"
+      ? (props.options as () => RadioOption[])()
+      : (props.options ?? []);
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-radio-group",
+          props.orientation === "horizontal" && "pu-radio-group--horizontal",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      role="radiogroup"
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <For each={getOptions}>
+        {(opt) => (
+          <label
+            class="pu-radio"
+            data-checked={() => (current() === opt().value ? "true" : "false")}
+            data-disabled={() =>
+              groupDisabled() || opt().disabled ? "true" : "false"
+            }
+          >
+            <input
+              class="pu-radio__input"
+              type="radio"
+              name={name}
+              value={() => opt().value}
+              checked={() => current() === opt().value}
+              disabled={() => groupDisabled() || !!opt().disabled}
+              onChange={() => props.onChange?.(opt().value)}
+            />
+            <span class="pu-radio__dot" aria-hidden="true" />
+            <span>{() => opt().label}</span>
+          </label>
+        )}
+      </For>
+    </div>
+  );
+});

package/src/components/ScrollArea.tsx

@@ -0,0 +1,58 @@
+import { component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type ScrollAreaProps = {
+  /** Max height (CSS length) */
+  maxHeight?: string;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const ensure = createStyleSheet(
+  "scroll-area",
+  `
+.pu-scroll {
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  border-radius: var(--pu-radius-md);
+}
+.pu-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.pu-scroll::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--pu-color-text-muted) 35%, transparent);
+  border-radius: 999px;
+}
+.pu-scroll::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--pu-color-text-muted) 55%, transparent);
+}
+.pu-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+`,
+);
+
+/** Scrollable region with refined scrollbars. */
+export const ScrollArea = component((raw: ScrollAreaProps) => {
+  ensure();
+  const props = raw as ComponentProps<ScrollAreaProps>;
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-scroll",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      style={() =>
+        props.maxHeight ? { maxHeight: props.maxHeight } : undefined
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      {props.children as never}
+    </div>
+  );
+});

package/src/components/Select.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, readProp, type MaybeReactive } from "../reactive.js";
+import type { Bindable } from "../form.js";
+
+export type SelectOption = { value: string; label: string; disabled?: boolean };
+
+export type SelectProps = {
+  value?: MaybeReactive<string>;
+  /** Two-way bind a string signal — preferred over value + onChange. */
+  bind?: Bindable<string> | Signal<string>;
+  options: MaybeReactive<SelectOption[]>;
+  /** Shown as a disabled first option when value is empty (optional). */
+  placeholder?: string;
+  disabled?: MaybeReactive<boolean>;
+  class?: MaybeReactive<string>;
+  onChange?: (e: Event) => void;
+  id?: string;
+  "aria-label"?: string;
+};
+
+const styles = `
+.pu-select {
+  width: 100%;
+  height: var(--pu-control-h-md);
+  padding: 0 calc(var(--pu-control-px) + 1rem) 0 var(--pu-control-px);
+  border-radius: var(--pu-radius-md);
+  border: 1px solid var(--pu-color-control-border, var(--pu-color-border));
+  background-color: var(--pu-color-surface);
+  color: var(--pu-color-text);
+  appearance: none;
+  background-image: linear-gradient(45deg, transparent 50%, var(--pu-color-text-muted) 50%),
+    linear-gradient(135deg, var(--pu-color-text-muted) 50%, transparent 50%);
+  background-position: calc(100% - 14px) calc(50% - 3px), calc(100% - 9px) calc(50% - 3px);
+  background-size: 5px 5px, 5px 5px;
+  background-repeat: no-repeat;
+  transition: border-color var(--pu-duration) var(--pu-ease), box-shadow var(--pu-duration) var(--pu-ease);
+}
+.pu-select:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--pu-color-border) 60%, var(--pu-color-text-muted));
+}
+.pu-select: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-select:disabled { opacity: 0.55; cursor: not-allowed; }
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "select");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/** Native select. Prefer `<Select bind={status} options={…} />`. */
+export const Select = component((raw: SelectProps) => {
+  ensureStyles();
+  const props = mergeProps({}, raw) as ComponentProps<SelectProps>;
+  const bound = raw.bind;
+
+  const selectEl = document.createElement("select");
+  if (props.id) selectEl.id = props.id;
+  if (props["aria-label"]) selectEl.setAttribute("aria-label", props["aria-label"]);
+
+  selectEl.addEventListener("change", (e) => {
+    if (bound) {
+      const t = (e.currentTarget ?? e.target) as HTMLSelectElement | null;
+      if (t && "value" in t) bound.set(t.value);
+    }
+    props.onChange?.(e);
+  });
+
+  effect(() => {
+    // mergeProps unwraps accessors on read; readProp stays defensive.
+    selectEl.className = cx("pu-select", readProp(props.class as MaybeReactive<string>));
+    selectEl.disabled = readBool(props.disabled as MaybeReactive<boolean>);
+
+    const opts = readProp(props.options as MaybeReactive<SelectOption[]>) ?? [];
+    const current = bound
+      ? readProp(bound as MaybeReactive<string>)
+      : readProp(props.value as MaybeReactive<string>);
+    const prev = selectEl.value;
+    const placeholder = raw.placeholder;
+
+    selectEl.innerHTML = "";
+    const values = new Set<string>();
+
+    if (placeholder) {
+      const ph = document.createElement("option");
+      ph.value = "";
+      ph.textContent = placeholder;
+      ph.disabled = true;
+      // Keep selectable only when nothing chosen yet so the label can show
+      ph.hidden = !!(current && current !== "");
+      selectEl.appendChild(ph);
+      values.add("");
+    }
+
+    for (const opt of opts) {
+      const o = document.createElement("option");
+      o.value = opt.value;
+      o.textContent = opt.label;
+      if (opt.disabled) o.disabled = true;
+      selectEl.appendChild(o);
+      values.add(opt.value);
+    }
+
+    // Prefer controlled value when it exists in the list; else keep prev; else first option.
+    // Avoid browser “blank select” when options shrink (reactive project/client filters).
+    let next = "";
+    if (current !== undefined && values.has(current)) {
+      next = current;
+    } else if (prev && values.has(prev)) {
+      next = prev;
+    } else if (opts[0]) {
+      next = opts[0].value;
+    }
+    if (selectEl.value !== next) selectEl.value = next;
+  });
+
+  return selectEl;
+});