@lab206/ui 0.1.0

package/src/components/Skeleton.tsx

@@ -0,0 +1,117 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type SkeletonProps = {
+  /** Visual shape */
+  variant?: "text" | "rect" | "circle";
+  width?: string;
+  height?: string;
+  /** Number of text lines when variant is text */
+  lines?: number;
+  class?: string | (() => string);
+};
+
+const styles = `
+.pu-skeleton {
+  display: block;
+  background: linear-gradient(
+    90deg,
+    var(--pu-color-surface-2) 0%,
+    color-mix(in srgb, var(--pu-color-surface-2) 55%, var(--pu-color-surface)) 50%,
+    var(--pu-color-surface-2) 100%
+  );
+  background-size: 200% 100%;
+  animation: pu-skeleton-shimmer 1.4s ease-in-out infinite;
+  border-radius: var(--pu-radius-sm);
+}
+.pu-skeleton--text {
+  height: 0.75rem;
+  width: 100%;
+  margin-bottom: 0.45rem;
+  border-radius: 4px;
+}
+.pu-skeleton--text:last-child {
+  width: 72%;
+  margin-bottom: 0;
+}
+.pu-skeleton--rect {
+  width: 100%;
+  height: 6rem;
+  border-radius: var(--pu-radius-md);
+}
+.pu-skeleton--circle {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+}
+.pu-skeleton-stack {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+@keyframes pu-skeleton-shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-skeleton { animation: none; }
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "skeleton");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/** Loading placeholder with soft shimmer. */
+export const Skeleton = component((raw: SkeletonProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    { variant: "text" as const, lines: 1 },
+    raw,
+  ) as ComponentProps<
+    SkeletonProps & { variant: "text" | "rect" | "circle"; lines: number }
+  >;
+
+  const style = () => {
+    const s: Record<string, string> = {};
+    if (props.width) s.width = props.width;
+    if (props.height) s.height = props.height;
+    return s;
+  };
+
+  if (props.variant === "text" && props.lines > 1) {
+    const n = Math.max(1, Math.min(12, props.lines));
+    const host = document.createElement("div");
+    host.className = cx(
+      "pu-skeleton-stack",
+      typeof props.class === "function" ? props.class() : props.class,
+    );
+    host.setAttribute("aria-hidden", "true");
+    for (let i = 0; i < n; i++) {
+      const line = document.createElement("span");
+      line.className = "pu-skeleton pu-skeleton--text";
+      host.appendChild(line);
+    }
+    return host;
+  }
+
+  return (
+    <span
+      class={() =>
+        cx(
+          "pu-skeleton",
+          `pu-skeleton--${props.variant}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      style={style}
+      aria-hidden="true"
+    />
+  );
+});

package/src/components/Slider.tsx

@@ -0,0 +1,175 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type SliderProps = {
+  value?: number | (() => number);
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean | (() => boolean);
+  onChange?: (value: number) => void;
+  label?: string;
+  showValue?: boolean;
+  class?: string | (() => string);
+  id?: string;
+};
+
+const ensure = createStyleSheet(
+  "slider",
+  `
+.pu-slider {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  width: 100%;
+  min-width: 8rem;
+}
+.pu-slider__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.5rem;
+  font-size: var(--pu-text-sm);
+}
+.pu-slider__label {
+  color: var(--pu-color-text);
+  font-weight: var(--pu-font-medium);
+}
+.pu-slider__value {
+  color: var(--pu-color-text-muted);
+  font-variant-numeric: tabular-nums;
+  font-family: var(--pu-font-mono);
+  font-size: var(--pu-text-xs);
+}
+.pu-slider__track {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 0.4rem;
+  border-radius: var(--pu-radius-full);
+  background: linear-gradient(
+    to right,
+    var(--pu-color-accent) 0%,
+    var(--pu-color-accent) var(--pu-slider-pct, 0%),
+    var(--pu-color-surface-sunken) var(--pu-slider-pct, 0%),
+    var(--pu-color-surface-sunken) 100%
+  );
+  border: 1px solid var(--pu-color-control-border, var(--pu-color-border));
+  outline: none;
+  cursor: pointer;
+}
+.pu-slider__track:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pu-slider__track:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pu-color-focus) 22%, transparent);
+}
+.pu-slider__track::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  background: var(--pu-color-accent);
+  border: 2px solid var(--pu-color-accent-fg);
+  box-shadow: var(--pu-shadow-sm);
+  cursor: pointer;
+  transition: transform var(--pu-duration-fast) var(--pu-ease-out);
+}
+.pu-slider__track:hover:not(:disabled)::-webkit-slider-thumb {
+  transform: scale(1.08);
+}
+.pu-slider__track:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    var(--pu-shadow-sm),
+    0 0 0 3px color-mix(in srgb, var(--pu-color-focus) 40%, transparent);
+}
+.pu-slider__track::-moz-range-thumb {
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  background: var(--pu-color-accent);
+  border: 2px solid var(--pu-color-accent-fg);
+  box-shadow: var(--pu-shadow-sm);
+  cursor: pointer;
+}
+.pu-slider__track:focus-visible::-moz-range-thumb {
+  box-shadow:
+    var(--pu-shadow-sm),
+    0 0 0 3px color-mix(in srgb, var(--pu-color-focus) 40%, transparent);
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-slider__track::-webkit-slider-thumb { transition: none; }
+  .pu-slider__track:hover:not(:disabled)::-webkit-slider-thumb { transform: none; }
+}
+`,
+);
+
+/** Range slider with fill track. */
+export const Slider = component((raw: SliderProps) => {
+  ensure();
+  const props = mergeProps(
+    { min: 0, max: 100, step: 1, showValue: true },
+    raw,
+  ) as ComponentProps<
+    SliderProps & { min: number; max: number; step: number; showValue: boolean }
+  >;
+  const id = props.id ?? `pu-slider-${Math.random().toString(36).slice(2, 9)}`;
+
+  const val = () => {
+    const v =
+      typeof props.value === "function"
+        ? (props.value as () => number)()
+        : (props.value ?? props.min);
+    return Math.min(props.max, Math.max(props.min, Number(v)));
+  };
+  const isDisabled = () =>
+    !!(typeof props.disabled === "function" ? props.disabled() : props.disabled);
+  const pct = () => {
+    const span = props.max - props.min || 1;
+    return ((val() - props.min) / span) * 100;
+  };
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-slider",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      ref={(el) => ensure(el.ownerDocument)}
+    >
+      {(props.label || props.showValue) && (
+        <div class="pu-slider__head">
+          {props.label ? (
+            <label class="pu-slider__label" for={id}>
+              {props.label}
+            </label>
+          ) : (
+            <span />
+          )}
+          {props.showValue ? (
+            <span class="pu-slider__value">{() => String(val())}</span>
+          ) : null}
+        </div>
+      )}
+      <input
+        id={id}
+        class="pu-slider__track"
+        type="range"
+        min={props.min}
+        max={props.max}
+        step={props.step}
+        value={val}
+        disabled={isDisabled}
+        style={() => ({ "--pu-slider-pct": `${pct()}%` })}
+        onInput={(e: Event) => {
+          props.onChange?.(Number((e.target as HTMLInputElement).value));
+        }}
+      />
+    </div>
+  );
+});

package/src/components/Spinner.tsx

@@ -0,0 +1,70 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type SpinnerSize = "sm" | "md" | "lg";
+
+export type SpinnerProps = {
+  size?: SpinnerSize;
+  label?: string;
+  class?: string | (() => string);
+};
+
+const styles = `
+.pu-spinner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pu-space-2);
+  color: var(--pu-color-accent);
+  font-size: var(--pu-text-sm);
+}
+.pu-spinner__disk {
+  border-radius: 50%;
+  border-style: solid;
+  border-color: color-mix(in srgb, currentColor 25%, transparent);
+  border-top-color: currentColor;
+  animation: pu-spin 0.7s linear infinite;
+}
+.pu-spinner--sm .pu-spinner__disk { width: 1rem; height: 1rem; border-width: 2px; }
+.pu-spinner--md .pu-spinner__disk { width: 1.35rem; height: 1.35rem; border-width: 2.5px; }
+.pu-spinner--lg .pu-spinner__disk { width: 1.75rem; height: 1.75rem; border-width: 3px; }
+@keyframes pu-spin {
+  to { transform: rotate(360deg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .pu-spinner__disk { animation: none; border-top-color: currentColor; opacity: 0.7; }
+}
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "spinner");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+export const Spinner = component((raw: SpinnerProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    { size: "md" as SpinnerSize, label: "Loading" },
+    raw,
+  ) as ComponentProps<SpinnerProps & { size: SpinnerSize; label: string }>;
+
+  return (
+    <span
+      class={() =>
+        cx(
+          "pu-spinner",
+          `pu-spinner--${props.size}`,
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+      role="status"
+    >
+      <span class="pu-spinner__disk" aria-hidden="true" />
+      <span class="pu-sr-only">{props.label}</span>
+    </span>
+  );
+});

package/src/components/Stack.tsx

@@ -0,0 +1,79 @@
+import { component, mergeProps, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+
+export type StackProps = {
+  /** flex direction */
+  direction?: "row" | "column";
+  gap?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8;
+  align?: "start" | "center" | "end" | "stretch";
+  justify?: "start" | "center" | "end" | "between";
+  wrap?: boolean;
+  class?: string | (() => string);
+  children?: unknown;
+};
+
+const styles = `
+.pu-stack { display: flex; min-width: 0; }
+.pu-stack--row { flex-direction: row; }
+.pu-stack--column { flex-direction: column; }
+.pu-stack--wrap { flex-wrap: wrap; }
+.pu-stack--gap-0 { gap: var(--pu-space-0); }
+.pu-stack--gap-1 { gap: var(--pu-space-1); }
+.pu-stack--gap-2 { gap: var(--pu-space-2); }
+.pu-stack--gap-3 { gap: var(--pu-space-3); }
+.pu-stack--gap-4 { gap: var(--pu-space-4); }
+.pu-stack--gap-5 { gap: var(--pu-space-5); }
+.pu-stack--gap-6 { gap: var(--pu-space-6); }
+.pu-stack--gap-8 { gap: var(--pu-space-8); }
+.pu-stack--align-start { align-items: flex-start; }
+.pu-stack--align-center { align-items: center; }
+.pu-stack--align-end { align-items: flex-end; }
+.pu-stack--align-stretch { align-items: stretch; }
+.pu-stack--justify-start { justify-content: flex-start; }
+.pu-stack--justify-center { justify-content: center; }
+.pu-stack--justify-end { justify-content: flex-end; }
+.pu-stack--justify-between { justify-content: space-between; }
+`;
+
+let injected = false;
+function ensureStyles() {
+  if (injected || typeof document === "undefined") return;
+  injected = true;
+  const el = document.createElement("style");
+  el.setAttribute("data-pu-ui", "stack");
+  el.textContent = styles;
+  document.head.appendChild(el);
+}
+
+/** Layout primitive — row/column with tokenized gap. */
+export const Stack = component((raw: StackProps) => {
+  ensureStyles();
+  const props = mergeProps(
+    {
+      direction: "column" as const,
+      gap: 3 as const,
+      align: "stretch" as const,
+      justify: "start" as const,
+      wrap: false,
+    },
+    raw,
+  ) as ComponentProps<Required<StackProps>>;
+
+  return (
+    <div
+      class={() =>
+        cx(
+          "pu-stack",
+          `pu-stack--${props.direction}`,
+          `pu-stack--gap-${props.gap}`,
+          `pu-stack--align-${props.align}`,
+          `pu-stack--justify-${props.justify}`,
+          props.wrap && "pu-stack--wrap",
+          typeof props.class === "function" ? props.class() : props.class,
+        )
+      }
+    >
+      {props.children as never}
+    </div>
+  );
+});

package/src/components/Stat.tsx

@@ -0,0 +1,169 @@
+import { component, type ComponentProps } from "@lab206/dom";
+import { cx } from "../utils.js";
+import { createStyleSheet } from "../styles.js";
+
+export type StatProps = {
+  label: string;
+  value: string | number | (() => string | number);
+  /** e.g. "+12%" or "vs last week" */
+  delta?: string | (() => string);
+  /** Visual tone for delta */
+  tone?: "neutral" | "positive" | "negative";
+  hint?: string | (() => string);
+  /** When set, the card is a button that navigates / filters. */
+  onClick?: () => void;
+  class?: string | (() => string);
+};
+
+const ensure = createStyleSheet(
+  "stat",
+  `
+.pu-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1rem 1.1rem;
+  border: 1px solid var(--pu-color-border);
+  border-radius: var(--pu-radius-lg);
+  background: var(--pu-color-surface);
+  min-width: 0;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+button.pu-stat {
+  appearance: none;
+  cursor: pointer;
+  width: 100%;
+  transition:
+    border-color var(--pu-duration) var(--pu-ease),
+    box-shadow var(--pu-duration) var(--pu-ease),
+    transform var(--pu-duration-fast) var(--pu-ease);
+}
+button.pu-stat:hover {
+  border-color: color-mix(in srgb, var(--pu-color-accent) 40%, var(--pu-color-border));
+  box-shadow: var(--pu-shadow-sm);
+  transform: translateY(-1px);
+}
+button.pu-stat:focus-visible {
+  outline: 2px solid var(--pu-color-accent);
+  outline-offset: 2px;
+}
+.pu-stat__label {
+  font-size: var(--pu-text-xs);
+  font-weight: var(--pu-font-semibold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--pu-color-text-muted);
+}
+.pu-stat__value {
+  font-size: var(--pu-text-2xl, 1.65rem);
+  font-weight: var(--pu-font-bold);
+  letter-spacing: var(--pu-tracking-tight);
+  color: var(--pu-color-text);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+}
+.pu-stat__row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pu-stat__delta {
+  font-size: var(--pu-text-xs);
+  font-weight: var(--pu-font-semibold);
+  padding: 0.1rem 0.4rem;
+  border-radius: var(--pu-radius-full);
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text-muted);
+}
+.pu-stat__delta--positive {
+  background: color-mix(in srgb, var(--pu-color-success, #69be28) 18%, transparent);
+  color: var(--pu-color-success, #69be28);
+}
+.pu-stat__delta--negative {
+  background: color-mix(in srgb, var(--pu-color-danger) 16%, transparent);
+  color: var(--pu-color-danger);
+}
+.pu-stat__hint {
+  font-size: var(--pu-text-xs);
+  color: var(--pu-color-text-muted);
+}
+`,
+);
+
+/** KPI / metric card for dashboards. */
+export const Stat = component((raw: StatProps) => {
+  ensure();
+  const props = raw as ComponentProps<StatProps>;
+  const value = () =>
+    typeof props.value === "function"
+      ? (props.value as () => string | number)()
+      : props.value;
+  const delta = () =>
+    typeof props.delta === "function"
+      ? (props.delta as () => string)()
+      : props.delta;
+
+  const hint = () =>
+    typeof props.hint === "function"
+      ? (props.hint as () => string)()
+      : props.hint;
+
+  const body = (
+    <>
+      <div class="pu-stat__label">{props.label}</div>
+      <div class="pu-stat__value">{() => String(value())}</div>
+      {(props.delta || props.hint) && (
+        <div class="pu-stat__row">
+          {() => {
+            const d = delta();
+            if (!d) return null;
+            const s = document.createElement("span");
+            s.className = cx(
+              "pu-stat__delta",
+              props.tone === "positive" && "pu-stat__delta--positive",
+              props.tone === "negative" && "pu-stat__delta--negative",
+            );
+            s.textContent = d;
+            return s;
+          }}
+          {() => {
+            const h = hint();
+            if (!h) return null;
+            const s = document.createElement("span");
+            s.className = "pu-stat__hint";
+            s.textContent = h;
+            return s;
+          }}
+        </div>
+      )}
+    </>
+  );
+
+  const cls = () =>
+    cx(
+      "pu-stat",
+      typeof props.class === "function" ? props.class() : props.class,
+    );
+
+  if (props.onClick) {
+    return (
+      <button
+        type="button"
+        class={cls}
+        onClick={() => props.onClick?.()}
+        ref={(el) => ensure(el.ownerDocument)}
+      >
+        {body}
+      </button>
+    );
+  }
+
+  return (
+    <div class={cls} ref={(el) => ensure(el.ownerDocument)}>
+      {body}
+    </div>
+  );
+});