@lab206/ui 0.1.0

package/src/components/Accordion.tsx

@@ -0,0 +1,194 @@
+import { signal } from "@lab206/core";
+import { For, component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type AccordionItem = {
+  id: string;
+  title: string;
+  content: unknown;
+  disabled?: boolean;
+};
+
+export type AccordionProps = {
+  items: AccordionItem[] | (() => AccordionItem[]);
+  /** Controlled open ids (multi) */
+  value?: string[] | (() => string[]);
+  defaultValue?: string[];
+  /** Only one panel open at a time */
+  single?: boolean;
+  onChange?: (ids: string[]) => void;
+  class?: string | (() => string);
+};
+
+const ensure = createStyleSheet(
+  "accordion",
+  `
+.pu-accordion { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; }
+.pu-accordion__item {
+  border: 1px solid var(--pu-color-border);
+  border-radius: var(--pu-radius-md);
+  background: var(--pu-color-surface);
+  overflow: hidden;
+  transition:
+    border-color var(--pu-duration) var(--pu-ease),
+    box-shadow var(--pu-duration) var(--pu-ease);
+}
+.pu-accordion__item.is-open {
+  border-color: color-mix(in srgb, var(--pu-color-accent) 28%, var(--pu-color-border));
+  box-shadow: var(--pu-shadow-xs);
+}
+.pu-accordion__trigger {
+  width: 100%;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  text-align: left;
+  font: inherit;
+  font-size: var(--pu-text-sm);
+  font-weight: var(--pu-font-semibold);
+  color: var(--pu-color-text);
+  padding: 0.75rem 0.9rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  transition: background var(--pu-duration-fast) var(--pu-ease);
+}
+.pu-accordion__trigger:hover:not(:disabled) {
+  background: var(--pu-color-surface-2);
+}
+.pu-accordion__trigger:focus-visible {
+  outline: none;
+  box-shadow:
+    inset 0 0 0 2px color-mix(in srgb, var(--pu-color-focus) 45%, transparent);
+  background: var(--pu-color-surface-2);
+}
+.pu-accordion__trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+.pu-accordion__chevron {
+  color: var(--pu-color-text-muted);
+  transition: transform var(--pu-duration) var(--pu-ease-out);
+  font-size: 0.75rem;
+}
+.pu-accordion__item.is-open .pu-accordion__chevron { transform: rotate(180deg); }
+.pu-accordion__panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pu-duration-slow) var(--pu-ease-out);
+}
+.pu-accordion__item.is-open .pu-accordion__panel {
+  grid-template-rows: 1fr;
+}
+.pu-accordion__panel-inner {
+  overflow: hidden;
+  min-height: 0;
+  padding: 0 0.9rem;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text-muted);
+  line-height: 1.5;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition:
+    opacity var(--pu-duration) var(--pu-ease-out),
+    transform var(--pu-duration) var(--pu-ease-out),
+    padding var(--pu-duration-slow) var(--pu-ease-out);
+}
+.pu-accordion__item.is-open .pu-accordion__panel-inner {
+  opacity: 1;
+  transform: translateY(0);
+  padding-bottom: 0.85rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-accordion__panel,
+  .pu-accordion__panel-inner,
+  .pu-accordion__chevron { transition: none; }
+}
+`,
+);
+
+export const Accordion = component((raw: AccordionProps) => {
+  ensure();
+  const props = mergeProps(
+    { single: false, defaultValue: [] as string[] },
+    raw,
+  ) as ComponentProps<
+    AccordionProps & { single: boolean; defaultValue: string[] }
+  >;
+
+  const internal = signal<string[]>([...props.defaultValue]);
+
+  const openIds = (): string[] => {
+    if (props.value !== undefined) {
+      return typeof props.value === "function"
+        ? (props.value as () => string[])()
+        : props.value;
+    }
+    return internal();
+  };
+
+  const setOpen = (ids: string[]) => {
+    if (props.value === undefined) internal.set(ids);
+    props.onChange?.(ids);
+  };
+
+  const toggle = (id: string) => {
+    const cur = openIds();
+    const on = cur.includes(id);
+    if (props.single) {
+      setOpen(on ? [] : [id]);
+    } else if (on) {
+      setOpen(cur.filter((x) => x !== id));
+    } else {
+      setOpen([...cur, id]);
+    }
+  };
+
+  const getItems = () =>
+    typeof props.items === "function"
+      ? (props.items as () => AccordionItem[])()
+      : (props.items ?? []);
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-accordion",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <For each={getItems}>
+        {(item) => (
+          <div
+            class={() =>
+              cx(
+                "pu-accordion__item",
+                openIds().includes(item().id) && "is-open",
+              )
+            }
+          >
+            <button
+              type="button"
+              class="pu-accordion__trigger"
+              aria-expanded={() => openIds().includes(item().id)}
+              disabled={() => !!item().disabled}
+              onClick={() => toggle(item().id)}
+            >
+              <span>{() => item().title}</span>
+              <span class="pu-accordion__chevron" aria-hidden="true">
+                ▾
+              </span>
+            </button>
+            <div class="pu-accordion__panel">
+              <div class="pu-accordion__panel-inner">
+                {() => item().content as never}
+              </div>
+            </div>
+          </div>
+        )}
+      </For>
+    </div>
+  );
+});

package/src/components/Alert.tsx

@@ -0,0 +1,88 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type AlertTone = "info" | "success" | "warning" | "danger";
+
+export type AlertProps = {
+  tone?: AlertTone;
+  title?: string;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-alert {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pu-space-1);
+  padding: var(--pu-space-3) var(--pu-space-4);
+  border-radius: var(--pu-radius-md);
+  border: 1px solid var(--pu-color-border);
+  font-size: var(--pu-text-sm);
+  line-height: 1.45;
+}
+.pu-alert__title {
+  font-weight: var(--pu-font-semibold);
+  margin: 0;
+}
+.pu-alert__body { margin: 0; color: inherit; opacity: 0.92; }
+
+.pu-alert--info {
+  background: color-mix(in srgb, var(--pu-color-accent) 12%, var(--pu-color-surface));
+  border-color: color-mix(in srgb, var(--pu-color-accent) 35%, var(--pu-color-border));
+  color: var(--pu-color-text);
+}
+.pu-alert--success {
+  background: color-mix(in srgb, var(--pu-sage-500) 12%, var(--pu-color-surface));
+  border-color: color-mix(in srgb, var(--pu-sage-500) 40%, var(--pu-color-border));
+}
+.pu-alert--warning {
+  background: color-mix(in srgb, #a67c3d 10%, var(--pu-color-surface));
+  border-color: color-mix(in srgb, #a67c3d 35%, var(--pu-color-border));
+}
+.pu-alert--danger {
+  background: color-mix(in srgb, var(--pu-color-danger) 12%, var(--pu-color-surface));
+  border-color: color-mix(in srgb, var(--pu-color-danger) 40%, var(--pu-color-border));
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "alert");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/**
+ * Inline status message. Uses role="status" (info/success) or role="alert" (warning/danger).
+ */
+export const Alert = component((raw: AlertProps) => {
+  ensureStyles();
+  const props = mergeProps({ tone: "info" as AlertTone }, raw) as ComponentProps<
+    AlertProps & { tone: AlertTone }
+  >;
+  const tone = () => props.tone;
+  const role = () =>
+    tone() === "warning" || tone() === "danger" ? "alert" : "status";
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-alert",
+          `pu-alert--${tone()}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      role={role()}
+    >
+      {props.title ? <p class="pu-alert__title">{props.title}</p> : null}
+      {props.children != null ? (
+        <div class="pu-alert__body">{props.children as never}</div>
+      ) : null}
+    </div>
+  );
+});

package/src/components/AspectRatio.tsx

@@ -0,0 +1,64 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type AspectRatioProps = {
+  /** Width / height ratio, e.g. 16/9 */
+  ratio?: number;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const ensure = createStyleSheet(
+  "aspect-ratio",
+  `
+.pu-aspect {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--pu-radius-md);
+  background: var(--pu-color-surface-2);
+}
+.pu-aspect::before {
+  content: "";
+  display: block;
+  padding-bottom: calc(100% / var(--pu-aspect-ratio, 1.777));
+}
+.pu-aspect__content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pu-aspect__content > img,
+.pu-aspect__content > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+`,
+);
+
+/** Lock child media to a fixed aspect ratio. */
+export const AspectRatio = component((raw: AspectRatioProps) => {
+  ensure();
+  const props = mergeProps({ ratio: 16 / 9 }, raw) as ComponentProps<
+    AspectRatioProps & { ratio: number }
+  >;
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-aspect",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      style={() => ({ "--pu-aspect-ratio": String(props.ratio) })}
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <div class="pu-aspect__content">{props.children as never}</div>
+    </div>
+  );
+});

package/src/components/Avatar.tsx

@@ -0,0 +1,89 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type AvatarSize = "sm" | "md" | "lg";
+
+export type AvatarProps = {
+  /** Initials when no src (e.g. "SP") */
+  name?: string;
+  src?: string;
+  alt?: string;
+  size?: AvatarSize;
+  class?: string | (() => string);
+};
+
+const styles = `
+.pu-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: var(--pu-font-semibold);
+  letter-spacing: -0.02em;
+  color: var(--pu-color-accent-fg);
+  background: linear-gradient(
+    145deg,
+    var(--pu-brand-500),
+    var(--pu-sage-600)
+  );
+  border: 1px solid color-mix(in srgb, var(--pu-color-border) 50%, transparent);
+  box-shadow: var(--pu-shadow-xs);
+  user-select: none;
+}
+.pu-avatar--sm { width: 1.75rem; height: 1.75rem; font-size: 0.65rem; }
+.pu-avatar--md { width: 2.25rem; height: 2.25rem; font-size: 0.75rem; }
+.pu-avatar--lg { width: 3rem; height: 3rem; font-size: 0.9rem; }
+.pu-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "avatar");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+function initials(name?: string): string {
+  if (!name?.trim()) return "?";
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 1) return parts[0]!.slice(0, 2).toUpperCase();
+  return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase();
+}
+
+export const Avatar = component((raw: AvatarProps) => {
+  ensureStyles();
+  const props = mergeProps({ size: "md" as AvatarSize }, raw) as ComponentProps<
+    AvatarProps & { size: AvatarSize }
+  >;
+
+  return (
+    <span
+      class={() =>
+        cx(
+          "pu-avatar",
+          `pu-avatar--${props.size}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      title={() => props.name ?? ""}
+      role="img"
+      aria-label={() => props.alt ?? props.name ?? "Avatar"}
+    >
+      {props.src ? (
+        <img src={props.src} alt={props.alt ?? props.name ?? ""} />
+      ) : (
+        () => initials(props.name)
+      )}
+    </span>
+  );
+});

package/src/components/Badge.tsx

@@ -0,0 +1,84 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type BadgeTone = "neutral" | "accent" | "success" | "warning";
+
+export type BadgeProps = {
+  tone?: BadgeTone | (() => BadgeTone);
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pu-space-1);
+  padding: 0.2em 0.65em;
+  border-radius: var(--pu-radius-full);
+  font-size: var(--pu-text-xs);
+  font-weight: var(--pu-font-semibold);
+  letter-spacing: 0.02em;
+  line-height: 1.4;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+.pu-badge--neutral {
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text);
+  border-color: var(--pu-color-border-strong, var(--pu-color-border));
+}
+.pu-badge--accent {
+  background: var(--pu-color-soft-bg);
+  color: var(--pu-color-soft-fg);
+  border-color: var(--pu-color-soft-border);
+}
+.pu-badge--success {
+  background: color-mix(in srgb, var(--pu-color-success, var(--pu-sage-500)) 16%, var(--pu-color-surface));
+  color: var(--pu-sage-800, #2a5410);
+  border-color: color-mix(in srgb, var(--pu-color-success, var(--pu-sage-500)) 36%, var(--pu-color-border));
+}
+.pu-badge--warning {
+  background: color-mix(in srgb, var(--pu-color-warning, #a67c3d) 16%, var(--pu-color-surface));
+  color: var(--pu-color-warning-fg, #5c4018);
+  border-color: color-mix(in srgb, var(--pu-color-warning, #a67c3d) 32%, var(--pu-color-border));
+}
+[data-pu-theme="dark"] .pu-badge--success {
+  color: var(--pu-sage-300, #8fd44f);
+  background: color-mix(in srgb, var(--pu-sage-400) 18%, var(--pu-color-surface));
+}
+[data-pu-theme="dark"] .pu-badge--warning {
+  color: #f0c14d;
+  background: color-mix(in srgb, #e0b45c 16%, var(--pu-color-surface));
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "badge");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Badge = component((raw: BadgeProps) => {
+  ensureStyles();
+  const props = mergeProps({ tone: "neutral" as const }, raw) as ComponentProps<
+    BadgeProps & { tone: NonNullable<BadgeProps["tone"]> }
+  >;
+  return (
+    <span
+      class={() =>
+        cx(
+          "pu-badge",
+          `pu-badge--${props.tone}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      {props.children as never}
+    </span>
+  );
+});

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,116 @@
+import { For, component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type BreadcrumbItem = {
+  id: string;
+  label: string;
+  href?: string;
+};
+
+export type BreadcrumbProps = {
+  items: BreadcrumbItem[] | (() => BreadcrumbItem[]);
+  onNavigate?: (id: string) => void;
+  class?: string | (() => string);
+};
+
+const ensure = createStyleSheet(
+  "breadcrumb",
+  `
+.pu-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: var(--pu-text-sm);
+  color: var(--pu-color-text-muted);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pu-breadcrumb__sep {
+  opacity: 0.5;
+  user-select: none;
+}
+.pu-breadcrumb__link {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: var(--pu-color-accent);
+  cursor: pointer;
+  padding: 0;
+  text-decoration: none;
+}
+.pu-breadcrumb__link:hover { text-decoration: underline; }
+.pu-breadcrumb__link:focus-visible {
+  outline: none;
+  border-radius: 2px;
+  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-breadcrumb__current {
+  color: var(--pu-color-text);
+  font-weight: var(--pu-font-medium);
+}
+`,
+);
+
+export const Breadcrumb = component((raw: BreadcrumbProps) => {
+  ensure();
+  const props = raw as ComponentProps<BreadcrumbProps>;
+  const getItems = () =>
+    typeof props.items === "function"
+      ? (props.items as () => BreadcrumbItem[])()
+      : (props.items ?? []);
+
+  return (
+    <nav
+      aria-label="Breadcrumb"
+      class={() =>
+        cx(
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <ol class="pu-breadcrumb">
+        <For each={getItems}>
+          {(item, index) => (
+            <li style={{ display: "inline-flex", alignItems: "center", gap: "0.35rem" }}>
+              {() =>
+                index() > 0
+                  ? (() => {
+                      const s = document.createElement("span");
+                      s.className = "pu-breadcrumb__sep";
+                      s.setAttribute("aria-hidden", "true");
+                      s.textContent = "/";
+                      return s;
+                    })()
+                  : null
+              }
+              {() => {
+                const it = item();
+                const last = index() === getItems().length - 1;
+                if (last) {
+                  const span = document.createElement("span");
+                  span.className = "pu-breadcrumb__current";
+                  span.setAttribute("aria-current", "page");
+                  span.textContent = it.label;
+                  return span;
+                }
+                const btn = document.createElement("button");
+                btn.type = "button";
+                btn.className = "pu-breadcrumb__link";
+                btn.textContent = it.label;
+                btn.onclick = () => props.onNavigate?.(it.id);
+                return btn;
+              }}
+            </li>
+          )}
+        </For>
+      </ol>
+    </nav>
+  );
+});