@lab206/ui 0.1.0

package/src/components/Button.tsx

@@ -0,0 +1,148 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { readBool, type MaybeReactive } from "../reactive.js";
+
+export type ButtonVariant = "solid" | "soft" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+
+export type ButtonProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  type?: "button" | "submit" | "reset";
+  disabled?: MaybeReactive<boolean>;
+  class?: MaybeReactive<string>;
+  onClick?: (e: MouseEvent) => void;
+  children?: unknown;
+  /** Accessible label when children are not text */
+  "aria-label"?: string;
+};
+
+const styles = `
+.pu-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pu-space-2);
+  border: 1px solid transparent;
+  border-radius: var(--pu-radius-md);
+  font-weight: var(--pu-font-semibold);
+  letter-spacing: -0.015em;
+  cursor: pointer;
+  transition:
+    background var(--pu-duration) var(--pu-ease-out),
+    border-color 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),
+    filter var(--pu-duration-fast) var(--pu-ease);
+  user-select: none;
+}
+.pu-btn:hover:not(:disabled) { transform: translateY(-1px); }
+.pu-btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
+.pu-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.pu-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);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-btn { transition: background var(--pu-duration-fast) linear, border-color var(--pu-duration-fast) linear; }
+  .pu-btn:hover:not(:disabled),
+  .pu-btn:active:not(:disabled) { transform: none; }
+}
+
+.pu-btn--sm { height: var(--pu-control-h-sm); padding: 0 var(--pu-space-3); font-size: var(--pu-text-sm); }
+.pu-btn--md { height: var(--pu-control-h-md); padding: 0 var(--pu-control-px); font-size: var(--pu-text-sm); }
+.pu-btn--lg { height: var(--pu-control-h-lg); padding: 0 var(--pu-space-5); font-size: var(--pu-text-md); }
+
+.pu-btn--solid {
+  background: linear-gradient(
+    165deg,
+    color-mix(in srgb, var(--pu-color-accent) 92%, #fff) 0%,
+    var(--pu-color-accent) 48%,
+    color-mix(in srgb, var(--pu-color-accent) 88%, #000) 100%
+  );
+  color: var(--pu-color-accent-fg);
+  border-color: color-mix(in srgb, var(--pu-brass-500) 35%, var(--pu-color-accent));
+  box-shadow:
+    var(--pu-shadow-sm),
+    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent);
+}
+.pu-btn--solid:hover:not(:disabled) {
+  background: var(--pu-color-accent-hover);
+  box-shadow: var(--pu-shadow-md);
+}
+
+.pu-btn--soft {
+  background: var(--pu-color-soft-bg);
+  color: var(--pu-color-soft-fg);
+  border-color: var(--pu-color-soft-border);
+  box-shadow: none;
+}
+.pu-btn--soft:hover:not(:disabled) {
+  background: var(--pu-color-soft-bg-hover);
+}
+
+.pu-btn--ghost {
+  background: transparent;
+  color: var(--pu-color-text);
+  border-color: var(--pu-color-control-border, var(--pu-color-border-strong));
+  box-shadow: none;
+}
+.pu-btn--ghost:hover:not(:disabled) {
+  background: var(--pu-color-surface-2);
+  border-color: var(--pu-color-border-strong);
+}
+
+.pu-btn--danger {
+  background: var(--pu-color-danger);
+  color: var(--pu-color-danger-fg);
+  box-shadow: var(--pu-shadow-sm);
+}
+.pu-btn--danger:hover:not(:disabled) { filter: brightness(1.05); }
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "button");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/**
+ * Primary action control. Tokens drive color/size — edit `tokens.css` to retheme.
+ */
+export const Button = component((raw: ButtonProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    { variant: "solid" as ButtonVariant, size: "md" as ButtonSize, type: "button" as const },
+    raw,
+  ) as ComponentProps<Required<Pick<ButtonProps, "variant" | "size" | "type">> & ButtonProps>;
+
+  // Live accessor — createProps unwraps signals/() => on each read
+  const getDisabled = () =>
+    readBool(props.disabled as MaybeReactive<boolean>);
+
+  return (
+    <button
+      type={props.type}
+      class={() =>
+        cx(
+          "pu-btn",
+          `pu-btn--${props.variant}`,
+          `pu-btn--${props.size}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      disabled={getDisabled}
+      onClick={props.onClick}
+      aria-label={props["aria-label"]}
+    >
+      {props.children as never}
+    </button>
+  );
+});

package/src/components/Card.tsx

@@ -0,0 +1,92 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type CardVariant = "default" | "glass" | "elevated" | "soft";
+
+export type CardProps = {
+  padded?: boolean;
+  /** Visual treatment — glass/elevated for modern layered UIs */
+  variant?: CardVariant;
+  /** Subtle hover lift (for interactive tiles) */
+  interactive?: boolean;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-card {
+  background: var(--pu-color-surface);
+  border: 1px solid var(--pu-color-border);
+  border-radius: var(--pu-radius-lg);
+  box-shadow: var(--pu-shadow-sm);
+  transition:
+    box-shadow var(--pu-duration) var(--pu-ease),
+    border-color var(--pu-duration) var(--pu-ease),
+    transform var(--pu-duration) var(--pu-ease),
+    background var(--pu-duration) var(--pu-ease);
+}
+.pu-card--padded { padding: var(--pu-space-5); }
+.pu-card--glass {
+  background: var(--pu-glass-bg);
+  border-color: var(--pu-glass-border);
+  backdrop-filter: blur(var(--pu-glass-blur)) saturate(1.2);
+  -webkit-backdrop-filter: blur(var(--pu-glass-blur)) saturate(1.2);
+  box-shadow: var(--pu-shadow-float);
+}
+.pu-card--elevated {
+  box-shadow: var(--pu-shadow-md);
+  border-color: color-mix(in srgb, var(--pu-holo-cyan, transparent) 12%, var(--pu-color-border));
+}
+.pu-card--soft {
+  background: var(--pu-color-surface-2);
+  border-color: transparent;
+  box-shadow: none;
+}
+.pu-card--interactive {
+  cursor: default;
+}
+.pu-card--interactive:hover {
+  box-shadow: var(--pu-shadow-lg);
+  border-color: color-mix(in srgb, var(--pu-holo-cyan, var(--pu-color-accent)) 22%, var(--pu-color-border));
+  transform: translateY(-1px);
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "card");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Card = component((raw: CardProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    { padded: true, variant: "default" as CardVariant, interactive: false },
+    raw,
+  ) as ComponentProps<
+    CardProps & {
+      padded: boolean;
+      variant: CardVariant;
+      interactive: boolean;
+    }
+  >;
+  return (
+    <section
+      class={() =>
+        cx(
+          "pu-card",
+          props.padded && "pu-card--padded",
+          props.variant !== "default" && `pu-card--${props.variant}`,
+          props.interactive && "pu-card--interactive",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      {props.children as never}
+    </section>
+  );
+});

package/src/components/Checkbox.tsx

@@ -0,0 +1,143 @@
+import { type Signal } from "@lab206/core";
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { readBool, type MaybeReactive } from "../reactive.js";
+import type { Bindable } from "../form.js";
+
+export type CheckboxProps = {
+  checked?: MaybeReactive<boolean>;
+  /** Two-way bind a boolean signal. */
+  bind?: Bindable<boolean> | Signal<boolean>;
+  disabled?: MaybeReactive<boolean>;
+  onChange?: (checked: boolean) => void;
+  label?: string;
+  class?: MaybeReactive<string>;
+  id?: string;
+};
+
+const styles = `
+.pu-checkbox {
+  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-checkbox[data-disabled="true"] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.pu-checkbox__box {
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 5px;
+  border: 1.5px solid var(--pu-color-control-border, var(--pu-color-border-strong));
+  background: var(--pu-color-surface);
+  display: grid;
+  place-items: center;
+  transition:
+    background var(--pu-duration) var(--pu-ease-out),
+    border-color var(--pu-duration) var(--pu-ease-out),
+    transform var(--pu-duration-fast) var(--pu-ease-spring);
+  flex-shrink: 0;
+}
+.pu-checkbox:hover:not([data-disabled="true"]) .pu-checkbox__box {
+  border-color: var(--pu-color-border-strong);
+}
+.pu-checkbox[data-checked="true"] .pu-checkbox__box {
+  background: var(--pu-color-accent);
+  border-color: var(--pu-color-accent);
+  transform: scale(1.05);
+}
+.pu-checkbox__box svg {
+  width: 0.7rem;
+  height: 0.7rem;
+  opacity: 0;
+  color: var(--pu-color-accent-fg);
+  transform: scale(0.5);
+  transition:
+    opacity var(--pu-duration-fast) var(--pu-ease-out),
+    transform var(--pu-duration) var(--pu-ease-spring);
+}
+.pu-checkbox[data-checked="true"] .pu-checkbox__box svg {
+  opacity: 1;
+  transform: scale(1);
+}
+.pu-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.pu-checkbox__input:focus-visible + .pu-checkbox__box {
+  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-checkbox__box,
+  .pu-checkbox__box svg { transition: none; }
+  .pu-checkbox[data-checked="true"] .pu-checkbox__box { transform: none; }
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "checkbox");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Checkbox = component((raw: CheckboxProps) => {
+  ensureStyles();
+  const props = mergeProps({}, raw) as ComponentProps<CheckboxProps>;
+  const id = props.id ?? `pu-check-${Math.random().toString(36).slice(2, 9)}`;
+  const bound = raw.bind;
+
+  const isChecked = () =>
+    bound
+      ? readBool(bound as MaybeReactive<boolean>)
+      : readBool(props.checked as MaybeReactive<boolean>);
+  const isDisabled = () => readBool(props.disabled as MaybeReactive<boolean>);
+
+  const box = document.createElement("span");
+  box.className = "pu-checkbox__box";
+  box.setAttribute("aria-hidden", "true");
+  box.innerHTML =
+    '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3.5 8.5 L6.5 11.5 L12.5 4.5"/></svg>';
+
+  return (
+    <label
+      class={() =>
+        cx(
+          "pu-checkbox",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      data-checked={() => (isChecked() ? "true" : "false")}
+      data-disabled={() => (isDisabled() ? "true" : "false")}
+    >
+      <input
+        id={id}
+        class="pu-checkbox__input"
+        type="checkbox"
+        checked={isChecked}
+        disabled={isDisabled}
+        onChange={(e: Event) => {
+          if (isDisabled()) return;
+          const next = (e.target as HTMLInputElement).checked;
+          if (bound) bound.set(next);
+          props.onChange?.(next);
+        }}
+      />
+      {box}
+      {props.label ? <span>{props.label}</span> : null}
+    </label>
+  );
+});

package/src/components/Chip.tsx

@@ -0,0 +1,153 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type ChipTone = "neutral" | "accent" | "success" | "warning" | "danger";
+
+export type ChipProps = {
+  tone?: ChipTone;
+  /** Show × remove control */
+  onRemove?: () => void;
+  onClick?: () => void;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const ensure = createStyleSheet(
+  "chip",
+  `
+.pu-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  max-width: 100%;
+  padding: 0.2rem 0.55rem;
+  border-radius: var(--pu-radius-full);
+  font-size: var(--pu-text-xs);
+  font-weight: var(--pu-font-semibold);
+  line-height: 1.4;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+.pu-chip--clickable {
+  cursor: pointer;
+  transition:
+    filter var(--pu-duration-fast) var(--pu-ease),
+    box-shadow var(--pu-duration-fast) var(--pu-ease);
+}
+.pu-chip--clickable:hover { filter: brightness(0.97); }
+.pu-chip--clickable: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-chip--neutral {
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text);
+  border-color: var(--pu-color-border-strong, var(--pu-color-border));
+}
+.pu-chip--accent {
+  background: var(--pu-color-soft-bg);
+  color: var(--pu-color-soft-fg);
+  border-color: var(--pu-color-soft-border);
+}
+.pu-chip--success {
+  background: color-mix(in srgb, var(--pu-color-success, #69be28) 16%, var(--pu-color-surface));
+  color: var(--pu-sage-800, #2a5410);
+  border-color: color-mix(in srgb, var(--pu-color-success, #69be28) 36%, var(--pu-color-border));
+}
+.pu-chip--warning {
+  background: color-mix(in srgb, var(--pu-color-warning, #d4a017) 18%, var(--pu-color-surface));
+  color: var(--pu-color-warning-fg, #5c4018);
+  border-color: color-mix(in srgb, var(--pu-color-warning, #d4a017) 32%, var(--pu-color-border));
+}
+.pu-chip--danger {
+  background: color-mix(in srgb, var(--pu-color-danger) 14%, var(--pu-color-surface));
+  color: var(--pu-color-danger);
+  border-color: color-mix(in srgb, var(--pu-color-danger) 32%, var(--pu-color-border));
+}
+[data-pu-theme="dark"] .pu-chip--success {
+  color: var(--pu-sage-300, #8fd44f);
+}
+[data-pu-theme="dark"] .pu-chip--warning {
+  color: #f0c14d;
+}
+[data-pu-theme="dark"] .pu-chip--danger {
+  color: #fda4af;
+}
+.pu-chip__x {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  font-size: 0.95em;
+  line-height: 1;
+  opacity: 0.7;
+  display: inline-flex;
+}
+.pu-chip__x:hover { opacity: 1; }
+.pu-chip__x:focus-visible {
+  outline: none;
+  opacity: 1;
+  border-radius: 50%;
+  box-shadow:
+    0 0 0 2px var(--pu-color-surface),
+    0 0 0 4px color-mix(in srgb, var(--pu-color-focus) 55%, transparent);
+}
+`,
+);
+
+/** Compact tag / filter chip. */
+export const Chip = component((raw: ChipProps) => {
+  ensure();
+  const props = mergeProps({ tone: "neutral" as const }, raw) as ComponentProps<
+    ChipProps & { tone: ChipTone }
+  >;
+
+  const className = () =>
+    cx(
+      "pu-chip",
+      `pu-chip--${props.tone}`,
+      props.onClick && "pu-chip--clickable",
+      typeof props.class === "function" ? props.class() : props.class,
+    );
+
+  const removeBtn = props.onRemove ? (
+    <button
+      type="button"
+      class="pu-chip__x"
+      aria-label="Remove"
+      onClick={(e: MouseEvent) => {
+        e.stopPropagation();
+        props.onRemove?.();
+      }}
+    >
+      ×
+    </button>
+  ) : null;
+
+  if (props.onClick) {
+    return (
+      <button
+        type="button"
+        class={className}
+        onClick={props.onClick}
+        ref={(el) => ensure(el.ownerDocument)}
+      >
+        {props.children as never}
+        {removeBtn}
+      </button>
+    );
+  }
+
+  return (
+    <span class={className} ref={(el) => ensure(el.ownerDocument)}>
+      {props.children as never}
+      {removeBtn}
+    </span>
+  );
+});

package/src/components/Code.tsx

@@ -0,0 +1,71 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type CodeProps = {
+  /** Inline vs block panel */
+  block?: boolean;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-code {
+  font-family: var(--pu-font-mono);
+  font-size: 0.84em;
+  font-feature-settings: "liga" 0;
+}
+.pu-code--inline {
+  padding: 0.12em 0.4em;
+  border-radius: 6px;
+  background: var(--pu-color-surface-2);
+  border: 1px solid var(--pu-color-border);
+  color: var(--pu-color-text);
+}
+.pu-code--block {
+  display: block;
+  margin: 0;
+  padding: var(--pu-space-4) var(--pu-space-5);
+  border-radius: var(--pu-radius-lg);
+  background: var(--pu-gray-900);
+  color: var(--pu-gray-100);
+  border: 1px solid color-mix(in srgb, var(--pu-brand-400) 18%, transparent);
+  overflow-x: auto;
+  line-height: 1.65;
+  white-space: pre;
+  box-shadow: var(--pu-shadow-md);
+}
+[data-pu-theme="dark"] .pu-code--block {
+  background: #080c14;
+}
+.pu-code--block .pu-k { color: var(--pu-brand-300); }
+.pu-code--block .pu-s { color: var(--pu-sage-400); }
+.pu-code--block .pu-c { color: var(--pu-gray-400); }
+.pu-code--block .pu-p { color: #6e8298; }
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "code");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Code = component((raw: CodeProps) => {
+  ensureStyles();
+  const props = mergeProps({ block: false }, raw) as ComponentProps<
+    CodeProps & { block: boolean }
+  >;
+  const cls = () =>
+    cx(
+      "pu-code",
+      props.block ? "pu-code--block" : "pu-code--inline",
+      typeof props.class === "function" ? props.class() : props.class,
+    );
+  if (props.block) {
+    return <pre class={cls}>{props.children as never}</pre>;
+  }
+  return <code class={cls}>{props.children as never}</code>;
+});

package/src/components/Collapse.tsx

@@ -0,0 +1,76 @@
+import { signal, effect } from "@lab206/core";
+import { component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type CollapseProps = {
+  open: boolean | (() => boolean);
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const ensure = createStyleSheet(
+  "collapse",
+  `
+.pu-collapse {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pu-duration-slow) var(--pu-ease-out);
+}
+.pu-collapse.is-open {
+  grid-template-rows: 1fr;
+}
+.pu-collapse__inner {
+  overflow: hidden;
+  min-height: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-collapse { transition: none; }
+}
+`,
+);
+
+/**
+ * Height-animated show/hide region (CSS grid 0fr → 1fr).
+ * Prefer this over manual max-height hacks.
+ */
+export const Collapse = component((raw: CollapseProps) => {
+  ensure();
+  const props = raw as ComponentProps<CollapseProps>;
+  const isOpen = () =>
+    typeof props.open === "function"
+      ? !!(props.open as () => boolean)()
+      : !!props.open;
+
+  // Keep children mounted while open so height can animate; optionally keep for exit
+  const mounted = signal(isOpen());
+
+  effect(() => {
+    if (isOpen()) {
+      mounted.set(true);
+      return;
+    }
+    // delay unmount slightly so exit anim can run (grid collapse is CSS-driven)
+    const t = window.setTimeout(() => {
+      if (!isOpen()) mounted.set(false);
+    }, 280);
+    return () => window.clearTimeout(t);
+  });
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-collapse",
+          isOpen() && "is-open",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      <div class="pu-collapse__inner">
+        {() => (mounted() || isOpen() ? (props.children as never) : null)}
+      </div>
+    </div>
+  );
+});