@lab206/ui 0.1.0

package/src/components/Divider.tsx

@@ -0,0 +1,72 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type DividerProps = {
+  /** Visual label centered on the line */
+  label?: string;
+  class?: string | (() => string);
+};
+
+const styles = `
+.pu-divider {
+  display: flex;
+  align-items: center;
+  gap: var(--pu-space-3);
+  width: 100%;
+  border: 0;
+  margin: var(--pu-space-4) 0;
+  color: var(--pu-color-text-muted);
+  font-size: var(--pu-text-xs);
+  font-weight: var(--pu-font-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.pu-divider::before,
+.pu-divider::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--pu-color-border);
+}
+.pu-divider--plain {
+  height: 1px;
+  margin: var(--pu-space-4) 0;
+  background: var(--pu-color-border);
+  gap: 0;
+  text-indent: -9999px;
+  overflow: hidden;
+}
+.pu-divider--plain::before,
+.pu-divider--plain::after { display: none; }
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "divider");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Divider = component((raw: DividerProps) => {
+  ensureStyles();
+  const props = mergeProps({}, raw) as ComponentProps<DividerProps>;
+  const hasLabel = !!props.label;
+
+  return (
+    <div
+      role="separator"
+      class={() =>
+        cx(
+          "pu-divider",
+          !hasLabel && "pu-divider--plain",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      {hasLabel ? props.label : "\u00a0"}
+    </div>
+  );
+});

package/src/components/Drawer.tsx

@@ -0,0 +1,191 @@
+import { effect } from "@lab206/core";
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+import { attachOverlay } from "../overlay.js";
+import { readBool, type MaybeReactive } from "../reactive.js";
+
+export type DrawerProps = {
+  open: MaybeReactive<boolean>;
+  onClose?: () => void;
+  title?: string;
+  side?: "left" | "right";
+  class?: MaybeReactive<string>;
+  children?: unknown;
+};
+
+const ensure = createStyleSheet(
+  "drawer",
+  `
+.pu-drawer-root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--pu-z-overlay);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--pu-duration) var(--pu-ease-out),
+    visibility var(--pu-duration) var(--pu-ease-out);
+}
+.pu-drawer-root--open {
+  pointer-events: auto;
+  opacity: 1;
+  visibility: visible;
+}
+.pu-drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background: var(--pu-overlay-scrim);
+  backdrop-filter: blur(4px);
+}
+.pu-drawer-panel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: min(22rem, 92vw);
+  background: var(--pu-color-surface-elevated);
+  color: var(--pu-color-text);
+  border: 0 solid var(--pu-color-border);
+  box-shadow: var(--pu-shadow-float);
+  display: flex;
+  flex-direction: column;
+  transition: transform var(--pu-duration-slow) var(--pu-ease-out);
+}
+.pu-drawer-panel--right {
+  right: 0;
+  border-left-width: 1px;
+  transform: translateX(100%);
+}
+.pu-drawer-panel--left {
+  left: 0;
+  border-right-width: 1px;
+  transform: translateX(-100%);
+}
+.pu-drawer-root--open .pu-drawer-panel { transform: translateX(0); }
+.pu-drawer__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: var(--pu-space-4);
+  border-bottom: 1px solid var(--pu-color-border);
+}
+.pu-drawer__title {
+  margin: 0;
+  font-size: var(--pu-text-lg);
+  font-weight: var(--pu-font-bold);
+  letter-spacing: var(--pu-tracking-tight);
+}
+.pu-drawer__close {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--pu-color-text-muted);
+  font-size: 1.2rem;
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--pu-radius-md);
+}
+.pu-drawer__close:hover {
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text);
+}
+.pu-drawer__close:focus-visible {
+  outline: none;
+  color: var(--pu-color-text);
+  box-shadow:
+    0 0 0 2px var(--pu-color-surface-elevated),
+    0 0 0 4px color-mix(in srgb, var(--pu-color-focus) 55%, transparent);
+}
+.pu-drawer__body {
+  padding: var(--pu-space-4);
+  overflow: auto;
+  flex: 1;
+  font-size: var(--pu-text-sm);
+  line-height: 1.55;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-drawer-root, .pu-drawer-panel { transition: none; }
+}
+`,
+);
+
+/** Slide-over panel. Esc + backdrop + focus trap via shared `attachOverlay`. */
+export const Drawer = component((raw: DrawerProps) => {
+  ensure();
+  const props = mergeProps({ side: "right" as const }, raw) as ComponentProps<
+    DrawerProps & { side: "left" | "right" }
+  >;
+  const isOpen = () => readBool(props.open as MaybeReactive<boolean>);
+  let rootEl: HTMLElement | null = null;
+  let panelEl: HTMLElement | null = null;
+
+  effect(() => {
+    if (!isOpen()) return;
+    return attachOverlay({
+      getRoot: () => rootEl,
+      getFocusRoot: () => panelEl,
+      onClose: () => props.onClose?.(),
+      scrollLock: true,
+      escape: true,
+      onAttach: ({ doc }) => {
+        ensure(doc);
+      },
+    });
+  });
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-drawer-root",
+          isOpen() && "pu-drawer-root--open",
+          typeof props.class === "function"
+            ? (props.class as () => string)()
+            : props.class,
+        )
+      }
+      aria-hidden={() => (!isOpen() ? "true" : "false")}
+      ref={(el) => {
+        rootEl = el;
+        ensure(el.ownerDocument);
+      }}
+    >
+      <div
+        class="pu-drawer-backdrop"
+        onClick={() => props.onClose?.()}
+        aria-hidden="true"
+      />
+      <div
+        class={() => cx("pu-drawer-panel", `pu-drawer-panel--${props.side}`)}
+        role="dialog"
+        aria-modal="true"
+        ref={(el) => {
+          panelEl = el;
+        }}
+      >
+        {(props.title || props.onClose) && (
+          <div class="pu-drawer__head">
+            {props.title ? (
+              <h2 class="pu-drawer__title">{props.title}</h2>
+            ) : (
+              <span />
+            )}
+            {props.onClose ? (
+              <button
+                type="button"
+                class="pu-drawer__close"
+                aria-label="Close"
+                onClick={() => props.onClose?.()}
+              >
+                ×
+              </button>
+            ) : null}
+          </div>
+        )}
+        <div class="pu-drawer__body">{props.children as never}</div>
+      </div>
+    </div>
+  );
+});

package/src/components/Empty.tsx

@@ -0,0 +1,86 @@
+import { component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type EmptyProps = {
+  title?: string;
+  description?: string;
+  /** Optional emoji / icon glyph */
+  icon?: string;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const ensure = createStyleSheet(
+  "empty",
+  `
+.pu-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+  padding: 2.5rem 1.5rem;
+  border: 1px dashed var(--pu-color-border);
+  border-radius: var(--pu-radius-lg);
+  background: color-mix(in srgb, var(--pu-color-surface-2) 50%, transparent);
+}
+.pu-empty__icon {
+  font-size: 1.75rem;
+  line-height: 1;
+  opacity: 0.85;
+  margin-bottom: 0.25rem;
+}
+.pu-empty__title {
+  margin: 0;
+  font-size: var(--pu-text-md);
+  font-weight: var(--pu-font-semibold);
+  color: var(--pu-color-text);
+}
+.pu-empty__desc {
+  margin: 0;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text-muted);
+  max-width: 22rem;
+  line-height: 1.5;
+}
+.pu-empty__actions {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+}
+`,
+);
+
+/** Empty state for lists, tables, and panels. */
+export const Empty = component((raw: EmptyProps) => {
+  ensure();
+  const props = raw as ComponentProps<EmptyProps>;
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-empty",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      {props.icon ? (
+        <div class="pu-empty__icon" aria-hidden="true">
+          {props.icon}
+        </div>
+      ) : null}
+      {props.title ? <h3 class="pu-empty__title">{props.title}</h3> : null}
+      {props.description ? (
+        <p class="pu-empty__desc">{props.description}</p>
+      ) : null}
+      {props.children ? (
+        <div class="pu-empty__actions">{props.children as never}</div>
+      ) : null}
+    </div>
+  );
+});

package/src/components/Field.tsx

@@ -0,0 +1,184 @@
+import { effect } from "@lab206/core";
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx, puId } from "../utils.js";
+import { Label } from "./Label.js";
+
+export type FieldProps = {
+  label?: string;
+  /** Explicit control id. When omitted, Field generates one and wires the first control. */
+  htmlFor?: string;
+  hint?: string | (() => string);
+  error?: string | (() => string | undefined | null | false);
+  required?: boolean;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pu-field-gap);
+  min-width: 0;
+}
+/* Stable footer slot — prevents layout shift (and scroll jumps) when errors appear */
+.pu-field__footer {
+  min-height: 1.25em;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.pu-field__hint,
+.pu-field__error {
+  margin: 0;
+  font-size: var(--pu-text-xs);
+  line-height: 1.35;
+  min-height: 1.25em;
+}
+.pu-field__hint {
+  color: var(--pu-color-text-muted);
+}
+.pu-field__error {
+  color: var(--pu-color-danger);
+  font-weight: var(--pu-font-medium);
+}
+.pu-field__error:empty,
+.pu-field__hint:empty {
+  /* keep box for layout; empty text has zero width but min-height holds space when one is shown */
+}
+.pu-field--invalid :is(.pu-input, .pu-textarea, .pu-select) {
+  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", "field");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+const CONTROL_SEL =
+  "input:not([type='hidden']):not([type='checkbox']):not([type='radio']), textarea, select, [role='combobox'], .pu-select";
+
+function findControl(root: HTMLElement): HTMLElement | null {
+  return root.querySelector(CONTROL_SEL) as HTMLElement | null;
+}
+
+/**
+ * Form field layout: label + control + hint/error.
+ *
+ * - Auto-wires `htmlFor` / control `id` when you pass a `label` (unless `htmlFor` set)
+ * - Mirrors error/hint onto `aria-invalid` / `aria-describedby` on the control
+ * - Error region never uses role="alert" (avoids scroll/steal focus while typing)
+ */
+export const Field = component((raw: FieldProps) => {
+  ensureStyles();
+  const props = mergeProps({}, raw) as ComponentProps<FieldProps>;
+
+  const controlId = props.htmlFor ?? puId("pu-field");
+  const msgId = puId("pu-field-msg");
+  let rootEl: HTMLElement | null = null;
+
+  const errorText = () => {
+    const e = props.error as string | undefined | null | false;
+    return e ? String(e) : "";
+  };
+  const hintText = () => {
+    const h = props.hint as string | undefined | null | false;
+    return h ? String(h) : "";
+  };
+
+  effect(() => {
+    const err = errorText();
+    const hint = hintText();
+    // Re-run when messages change; also after microtask so children exist
+    const apply = () => {
+      const root = rootEl;
+      if (!root) return;
+      const control = findControl(root);
+      if (!control) return;
+      // Prefer explicit control id; else apply field id for label association
+      if (!control.id) control.id = controlId;
+
+      if (err) {
+        control.setAttribute("aria-invalid", "true");
+        control.setAttribute("aria-describedby", msgId);
+      } else if (hint) {
+        control.removeAttribute("aria-invalid");
+        control.setAttribute("aria-describedby", msgId);
+      } else {
+        control.removeAttribute("aria-invalid");
+        // Only clear if we own the describedby
+        if (control.getAttribute("aria-describedby") === msgId) {
+          control.removeAttribute("aria-describedby");
+        }
+      }
+    };
+    queueMicrotask(apply);
+    // Children may mount after first microtask (effects order)
+    const t =
+      typeof window !== "undefined"
+        ? window.setTimeout(apply, 0)
+        : (null as unknown as number);
+    return () => {
+      if (t != null && typeof window !== "undefined") window.clearTimeout(t);
+    };
+  });
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-field",
+          errorText() && "pu-field--invalid",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => {
+        rootEl = el;
+      }}
+    >
+      {props.label
+        ? Label({
+            htmlFor: controlId,
+            ...(props.required !== undefined
+              ? { required: props.required }
+              : {}),
+            children: props.label,
+          })
+        : null}
+      {props.children as never}
+      <div class="pu-field__footer">
+        {() => {
+          const err = errorText();
+          const hint = hintText();
+          if (err) {
+            const p = document.createElement("p");
+            p.className = "pu-field__error";
+            p.id = msgId;
+            p.setAttribute("role", "status");
+            p.setAttribute("aria-live", "polite");
+            p.textContent = err;
+            return p;
+          }
+          if (hint) {
+            const p = document.createElement("p");
+            p.className = "pu-field__hint";
+            p.id = msgId;
+            p.textContent = hint;
+            return p;
+          }
+          const spacer = document.createElement("p");
+          spacer.className = "pu-field__hint";
+          spacer.setAttribute("aria-hidden", "true");
+          spacer.innerHTML = "&nbsp;";
+          return spacer;
+        }}
+      </div>
+    </div>
+  );
+});

package/src/components/Grid.tsx

@@ -0,0 +1,67 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type GridProps = {
+  cols?: 1 | 2 | 3 | 4;
+  gap?: 2 | 3 | 4 | 5 | 6 | 8;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-grid {
+  display: grid;
+  width: 100%;
+}
+.pu-grid--gap-2 { gap: var(--pu-space-2); }
+.pu-grid--gap-3 { gap: var(--pu-space-3); }
+.pu-grid--gap-4 { gap: var(--pu-space-4); }
+.pu-grid--gap-5 { gap: var(--pu-space-5); }
+.pu-grid--gap-6 { gap: var(--pu-space-6); }
+.pu-grid--gap-8 { gap: var(--pu-space-8); }
+.pu-grid--cols-1 { grid-template-columns: 1fr; }
+.pu-grid--cols-2 { grid-template-columns: 1fr; }
+.pu-grid--cols-3 { grid-template-columns: 1fr; }
+.pu-grid--cols-4 { grid-template-columns: 1fr; }
+@media (min-width: 640px) {
+  .pu-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .pu-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
+  .pu-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
+}
+@media (min-width: 900px) {
+  .pu-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .pu-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "grid");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Grid = component((raw: GridProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    { cols: 3 as const, gap: 4 as const },
+    raw,
+  ) as ComponentProps<Required<Pick<GridProps, "cols" | "gap">> & GridProps>;
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-grid",
+          `pu-grid--cols-${props.cols}`,
+          `pu-grid--gap-${props.gap}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      {props.children as never}
+    </div>
+  );
+});