bits-lab 0.0.0-stage → 0.1.0

package/dist/SpriteAnimator.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+function SpriteAnimator({
+  src,
+  frameWidth = 16,
+  frameHeight = 16,
+  animations,
+  animation,
+  row = 0,
+  frames = 8,
+  fps = 10,
+  scale = 6,
+  loop = true,
+  pingPong = false,
+  playing = true,
+  flipX = false,
+  label = "Animated sprite",
+  onEnd,
+  className = "",
+  style
+}) {
+  const canvasRef = useRef(null);
+  const state = useRef({ image: null, frame: 0, direction: 1, elapsed: 0 });
+  const onEndRef = useRef(onEnd);
+  onEndRef.current = onEnd;
+  const current = animations && animations[animation] || { row, frames, fps };
+  const config = { row: current.row ?? 0, frames: Math.max(1, current.frames ?? 1), fps: current.fps ?? fps, loop: current.loop ?? loop, pingPong: current.pingPong ?? pingPong };
+  useEffect(() => {
+    if (!src) return void 0;
+    let cancelled = false;
+    const image = new Image();
+    image.onload = () => {
+      if (cancelled) return;
+      state.current.image = image;
+      draw();
+    };
+    image.src = src;
+    return () => {
+      cancelled = true;
+    };
+  }, [src]);
+  function draw() {
+    const canvas = canvasRef.current;
+    const { image, frame } = state.current;
+    if (!canvas || !image) return;
+    const ctx = canvas.getContext("2d");
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.save();
+    if (flipX) {
+      ctx.translate(canvas.width, 0);
+      ctx.scale(-1, 1);
+    }
+    ctx.drawImage(image, frame * frameWidth, config.row * frameHeight, frameWidth, frameHeight, 0, 0, canvas.width, canvas.height);
+    ctx.restore();
+  }
+  useEffect(() => {
+    state.current.frame = 0;
+    state.current.direction = 1;
+    state.current.elapsed = 0;
+    draw();
+  }, [animation, config.row, config.frames, flipX, scale]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (!canvas || !playing || reduced || config.frames < 2) return void 0;
+    let visible = true;
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+    });
+    observer.observe(canvas);
+    let frameId = 0;
+    let last = performance.now();
+    const tick = (now) => {
+      const s = state.current;
+      const dt = Math.min(250, now - last);
+      last = now;
+      if (visible && s.image) {
+        s.elapsed += dt;
+        const step = 1e3 / Math.max(1, config.fps);
+        while (s.elapsed >= step) {
+          s.elapsed -= step;
+          let next = s.frame + s.direction;
+          if (config.pingPong && (next >= config.frames || next < 0)) {
+            s.direction *= -1;
+            next = s.frame + s.direction;
+          }
+          if (!config.pingPong && next >= config.frames) {
+            if (!config.loop) {
+              onEndRef.current?.();
+              draw();
+              return;
+            }
+            next = 0;
+          }
+          s.frame = Math.max(0, Math.min(config.frames - 1, next));
+        }
+        draw();
+      }
+      frameId = requestAnimationFrame(tick);
+    };
+    frameId = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(frameId);
+      observer.disconnect();
+    };
+  }, [playing, config.fps, config.frames, config.row, config.loop, config.pingPong, src]);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      role: "img",
+      "aria-label": label,
+      width: frameWidth * scale,
+      height: frameHeight * scale,
+      className,
+      style: { imageRendering: "pixelated", width: frameWidth * scale, height: frameHeight * scale, maxWidth: "100%", ...style }
+    }
+  );
+}
+export {
+  SpriteAnimator as default
+};

package/dist/StatCard.d.ts

@@ -0,0 +1,43 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type StatFormat = 'compact' | 'currency' | 'percent' | 'number' | ((value: number) => string);
+export interface StatCardProps {
+    label?: string;
+    value?: number;
+    /** The previous value; the delta is computed from it. */
+    previous?: number;
+    /** Or pass the delta directly (0.12 = +12%). */
+    delta?: number;
+    /** What the delta compares to. */
+    period?: string;
+    /** Whether up is good (green) or bad (red). */
+    goodDirection?: 'up' | 'down' | 'neutral';
+    format?: StatFormat;
+    currency?: string;
+    locale?: string;
+    /** Sparkline points (12 is ideal). */
+    trend?: number[];
+    trendLabels?: string[];
+    icon?: ReactNode;
+    /** Roll duration in ms. */
+    duration?: number;
+    width?: number;
+    valueSize?: number;
+    sparkHeight?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    trendColor?: string;
+    accentColor?: string;
+    goodColor?: string;
+    badColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function formatStat(value: number, format?: StatFormat, { locale, currency }?: {
+    locale?: string;
+    currency?: string;
+}): string;
+export default function StatCard({ label, value, previous, delta, period, goodDirection, format, currency, locale, trend, trendLabels, icon, duration, width, valueSize, sparkHeight, backgroundColor, textColor, mutedColor, lineColor, trendColor, accentColor, goodColor, badColor, radius, fontFamily, className, style }: StatCardProps): import("react").JSX.Element;

package/dist/StatCard.js

@@ -0,0 +1,168 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-stat-card";
+const CSS = `
+.bl-stat { position: relative; display: grid; gap: 6px; width: 100%; max-width: var(--bl-w); box-sizing: border-box; padding: 16px 18px 14px; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 1px var(--bl-line); }
+.bl-stat__top { display: flex; align-items: center; gap: 8px; color: var(--bl-muted); font-size: 13px; font-weight: 600; }
+.bl-stat__icon { display: grid; place-items: center; width: 22px; height: 22px; }
+.bl-stat__value { font-size: var(--bl-size); font-weight: 650; line-height: 1.1; letter-spacing: -0.01em; }
+.bl-stat__delta { display: flex; align-items: center; gap: 6px; font-size: 13px; }
+.bl-stat__chip { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; color: var(--bl-delta); }
+.bl-stat__period { color: var(--bl-muted); }
+.bl-stat__spark { position: relative; height: var(--bl-spark-h); margin-top: 6px; }
+.bl-stat__spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
+.bl-stat__line { fill: none; stroke: var(--bl-trend); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
+.bl-stat__area { fill: var(--bl-trend); opacity: 0.1; }
+.bl-stat__cross { stroke: var(--bl-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
+.bl-stat__tip { position: absolute; bottom: calc(100% + 6px); padding: 5px 8px; border-radius: 7px; background: var(--bl-ink); color: var(--bl-bg); font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; transform: translateX(-50%); }
+.bl-stat__tip b { display: block; font-size: 13px; }
+.bl-stat__dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bl-bg); pointer-events: none; }
+.bl-stat__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+function formatStat(value, format = "compact", { locale, currency = "USD" } = {}) {
+  if (typeof format === "function") return format(value);
+  const options = format === "currency" ? { style: "currency", currency, currencyDisplay: "narrowSymbol", notation: Math.abs(value) >= 1e4 ? "compact" : "standard", maximumFractionDigits: Math.abs(value) >= 1e4 ? 1 : 2 } : format === "percent" ? { style: "percent", maximumFractionDigits: 1 } : format === "compact" ? { notation: Math.abs(value) >= 1e4 ? "compact" : "standard", maximumFractionDigits: Math.abs(value) >= 1e4 ? 1 : 0 } : { maximumFractionDigits: 2 };
+  return new Intl.NumberFormat(locale, options).format(value);
+}
+function StatCard({
+  label = "Metric",
+  value = 0,
+  previous,
+  delta,
+  period = "vs last period",
+  goodDirection = "up",
+  format = "compact",
+  currency = "USD",
+  locale,
+  trend = [],
+  trendLabels,
+  icon,
+  duration = 900,
+  width = 300,
+  valueSize = 34,
+  sparkHeight = 44,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  trendColor = "#566c86",
+  accentColor = "#3987e5",
+  goodColor = "#0ca30c",
+  badColor = "#e66767",
+  radius = 14,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [shown, setShown] = useState(value);
+  const shownRef = useRef(value);
+  const [hover, setHover] = useState(null);
+  const sparkRef = useRef(null);
+  const fmt = (v) => formatStat(v, format, { locale, currency });
+  useEffect(() => {
+    const from = shownRef.current;
+    if (from === value) return void 0;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || !duration) {
+      shownRef.current = value;
+      setShown(value);
+      return void 0;
+    }
+    const start = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const p = Math.min(1, (now - start) / duration);
+      const eased = 1 - (1 - p) ** 3;
+      const v = from + (value - from) * eased;
+      shownRef.current = v;
+      setShown(v);
+      if (p < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [value, duration]);
+  const change = delta ?? (previous != null && previous !== 0 ? (value - previous) / Math.abs(previous) : null);
+  const direction = change == null || change === 0 ? "flat" : change > 0 ? "up" : "down";
+  const good = goodDirection === "neutral" || direction === "flat" ? null : direction === goodDirection;
+  const deltaColor = good == null ? mutedColor : good ? goodColor : badColor;
+  const deltaText = change == null ? "" : `${change > 0 ? "+" : change < 0 ? "\u2212" : ""}${new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 1 }).format(Math.abs(change))}`;
+  const n = trend.length;
+  const lo = Math.min(...trend);
+  const hi = Math.max(...trend);
+  const span = hi - lo || 1;
+  const pts = trend.map((v, i) => [n > 1 ? i / (n - 1) * 100 : 50, 38 - (v - lo) / span * 34]);
+  const line = pts.map((p, i) => `${i ? "L" : "M"}${p[0].toFixed(2)} ${p[1].toFixed(2)}`).join(" ");
+  const area = n > 1 ? `${line} L100 40 L0 40 Z` : "";
+  const at = hover ?? n - 1;
+  const onMove = (event) => {
+    const rect = sparkRef.current.getBoundingClientRect();
+    const x = (event.clientX - rect.left) / rect.width;
+    setHover(Math.max(0, Math.min(n - 1, Math.round(x * (n - 1)))));
+  };
+  const summary = n > 1 ? `Trend: from ${fmt(trend[0])} to ${fmt(trend[n - 1])}, low ${fmt(lo)}, high ${fmt(hi)}.` : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-stat ${className}`,
+      role: "group",
+      "aria-labelledby": `${uid}-label`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-size": `${valueSize}px`,
+        "--bl-spark-h": `${sparkHeight}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-trend": trendColor,
+        "--bl-delta": deltaColor,
+        "--bl-radius": `${radius}px`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-stat__top", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "bl-stat__icon", "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ jsx("span", { id: `${uid}-label`, children: label })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bl-stat__value", "aria-hidden": "true", children: fmt(shown) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-stat__sr", children: fmt(value) }),
+        change != null && /* @__PURE__ */ jsxs("div", { className: "bl-stat__delta", children: [
+          /* @__PURE__ */ jsxs("span", { className: "bl-stat__chip", children: [
+            /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: direction === "up" ? /* @__PURE__ */ jsx("path", { d: "M6 10V2M2.5 5.5 6 2l3.5 3.5" }) : direction === "down" ? /* @__PURE__ */ jsx("path", { d: "M6 2v8M2.5 6.5 6 10l3.5-3.5" }) : /* @__PURE__ */ jsx("path", { d: "M2 6h8" }) }),
+            /* @__PURE__ */ jsx("span", { className: "bl-stat__sr", children: direction === "up" ? "Up" : direction === "down" ? "Down" : "No change" }),
+            deltaText
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "bl-stat__period", children: period })
+        ] }),
+        n > 1 && /* @__PURE__ */ jsxs("div", { ref: sparkRef, className: "bl-stat__spark", onPointerMove: onMove, onPointerLeave: () => setHover(null), "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
+            /* @__PURE__ */ jsx("path", { className: "bl-stat__area", d: area }),
+            /* @__PURE__ */ jsx("path", { className: "bl-stat__line", d: line }),
+            hover != null && /* @__PURE__ */ jsx("line", { className: "bl-stat__cross", x1: pts[hover][0], x2: pts[hover][0], y1: 0, y2: 40 })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "bl-stat__dot", style: { left: `${pts[at][0]}%`, top: `${pts[at][1] / 40 * 100}%`, background: at === n - 1 ? accentColor : textColor } }),
+          hover != null && /* @__PURE__ */ jsxs("span", { className: "bl-stat__tip", style: { left: `${Math.max(12, Math.min(88, pts[hover][0]))}%` }, children: [
+            /* @__PURE__ */ jsx("b", { children: fmt(trend[hover]) }),
+            trendLabels?.[hover] ?? `Point ${hover + 1} of ${n}`
+          ] })
+        ] }),
+        summary && /* @__PURE__ */ jsx("span", { className: "bl-stat__sr", children: summary })
+      ]
+    }
+  );
+}
+export {
+  StatCard as default,
+  formatStat
+};

package/dist/StepLoader.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type StepStatus = 'running' | 'done' | 'error';
+export interface LoaderStep {
+    id?: string;
+    label: string;
+    description?: ReactNode;
+}
+export interface StepLoaderProps {
+    steps?: LoaderStep[];
+    /** Index of the step in progress. */
+    current?: number;
+    status?: StepStatus;
+    title?: ReactNode;
+    open?: boolean;
+    /** Show as a modal overlay. */
+    fixed?: boolean;
+    onCancel?: () => void;
+    onDone?: () => void;
+    onRetry?: () => void;
+    cancelLabel?: string;
+    doneLabel?: string;
+    retryLabel?: string;
+    successMessage?: string;
+    errorMessage?: string;
+    width?: number;
+    maxListHeight?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    trackColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    onAccentColor?: string;
+    errorColor?: string;
+    backdropColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function StepLoader({ steps, current, status, title, open, fixed, onCancel, onDone, onRetry, cancelLabel, doneLabel, retryLabel, successMessage, errorMessage, width, maxListHeight, backgroundColor, textColor, mutedColor, trackColor, lineColor, accentColor, onAccentColor, errorColor, backdropColor, radius, fontFamily, className, style }: StepLoaderProps): import("react").JSX.Element | null;

package/dist/StepLoader.js

@@ -0,0 +1,191 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-step-loader";
+const CSS = `
+.bl-steps { position: relative; width: 100%; max-width: var(--bl-w); box-sizing: border-box; padding: 22px; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); box-shadow: 0 0 0 1px var(--bl-line), 0 30px 60px -30px rgba(0,0,0,0.85); }
+.bl-steps-overlay { position: fixed; inset: 0; z-index: 1900; display: grid; place-items: center; padding: 16px; background: var(--bl-backdrop); animation: bl-steps-fade 200ms both; }
+.bl-steps-overlay > .bl-steps { animation: bl-steps-pop 360ms cubic-bezier(.3,1.35,.5,1) both; }
+.bl-steps__title { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
+.bl-steps__meta { display: flex; justify-content: space-between; gap: 12px; color: var(--bl-muted); font-size: 13px; }
+.bl-steps__bar { height: 6px; margin: 10px 0 18px; overflow: hidden; border-radius: 999px; background: var(--bl-track); }
+.bl-steps__fill { height: 100%; width: calc(var(--bl-p) * 100%); border-radius: inherit; background: var(--bl-accent); transition: width 500ms cubic-bezier(.2,.9,.25,1), background-color 200ms; }
+.bl-steps[data-status="error"] .bl-steps__fill { background: var(--bl-error); }
+.bl-steps__list { position: relative; display: grid; gap: 0; max-height: var(--bl-max-h); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
+.bl-steps__step { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 16px; color: var(--bl-muted); transition: color 200ms; }
+.bl-steps__step:last-child { padding-bottom: 0; }
+.bl-steps__step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--bl-track); }
+.bl-steps__step:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--bl-accent); transform-origin: top; transform: scaleY(0); transition: transform 400ms cubic-bezier(.2,.9,.25,1); }
+.bl-steps__step[data-state="done"]::after { transform: scaleY(1); }
+.bl-steps__step[data-state="active"], .bl-steps__step[data-state="done"] { color: var(--bl-ink); }
+.bl-steps__step[data-state="error"] { color: var(--bl-error); }
+.bl-steps__icon { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bl-track); color: var(--bl-on-accent); }
+.bl-steps__step[data-state="done"] .bl-steps__icon { background: var(--bl-accent); animation: bl-steps-pop-icon 360ms cubic-bezier(.3,1.6,.5,1); }
+.bl-steps__step[data-state="error"] .bl-steps__icon { background: var(--bl-error); }
+.bl-steps__spin { position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--bl-track); border-top-color: var(--bl-accent); animation: bl-steps-spin 800ms linear infinite; }
+.bl-steps__icon path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: bl-steps-draw 320ms 80ms cubic-bezier(.2,.9,.25,1) forwards; }
+.bl-steps__text { display: grid; gap: 2px; padding-top: 4px; min-width: 0; }
+.bl-steps__label { font-size: 15px; font-weight: 600; }
+.bl-steps__desc { color: var(--bl-muted); font-size: 13px; line-height: 1.4; }
+.bl-steps__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
+.bl-steps__btn { padding: 9px 16px; border: 0; border-radius: 8px; background: var(--bl-track); color: var(--bl-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
+.bl-steps__btn[data-primary] { background: var(--bl-accent); color: var(--bl-on-accent); }
+.bl-steps__btn:hover { filter: brightness(1.15); }
+.bl-steps__btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-steps__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-steps-spin { to { transform: rotate(360deg); } }
+@keyframes bl-steps-draw { to { stroke-dashoffset: 0; } }
+@keyframes bl-steps-pop-icon { 40% { transform: scale(1.25); } }
+@keyframes bl-steps-fade { from { opacity: 0; } }
+@keyframes bl-steps-pop { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-steps__spin { animation-duration: 2.4s; }
+  .bl-steps__icon path { animation: none; stroke-dashoffset: 0; }
+  .bl-steps__fill, .bl-steps__step::after { transition: none; }
+  .bl-steps__step[data-state="done"] .bl-steps__icon, .bl-steps-overlay, .bl-steps-overlay > .bl-steps { animation: none; }
+}
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const Check = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 7.5 5.5 10.5 11.5 3.5" }) });
+const Cross = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5" }) });
+function StepLoader({
+  steps = [],
+  current = 0,
+  status = "running",
+  title = "Working on it",
+  open = true,
+  fixed = false,
+  onCancel,
+  onDone,
+  onRetry,
+  cancelLabel = "Cancel",
+  doneLabel = "Done",
+  retryLabel = "Retry",
+  successMessage = "All done!",
+  errorMessage = "Something went wrong.",
+  width = 440,
+  maxListHeight = 320,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  trackColor = "#333c57",
+  lineColor = "#333c57",
+  accentColor = "#38b764",
+  onAccentColor = "#0b0b14",
+  errorColor = "#b13e53",
+  backdropColor = "rgba(8,8,16,0.65)",
+  radius = 16,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const listRef = useRef(null);
+  const actionRef = useRef(null);
+  const total = steps.length;
+  const finished = status === "done";
+  const failed = status === "error";
+  const index = Math.max(0, Math.min(total - 1, current));
+  const doneCount = finished ? total : index;
+  const progress = total ? doneCount / total : 0;
+  const stateOf = (i) => finished || i < index ? "done" : i === index ? failed ? "error" : "active" : "pending";
+  useEffect(() => {
+    const list = listRef.current;
+    const node = list?.children[index];
+    if (!list || !node) return;
+    const top = node.offsetTop;
+    const bottom = top + node.offsetHeight;
+    const behavior = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
+    if (top < list.scrollTop) list.scrollTo({ top, behavior });
+    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTo({ top: bottom - list.clientHeight, behavior });
+  }, [index]);
+  useEffect(() => {
+    if (open && fixed) actionRef.current?.focus({ preventScroll: true });
+  }, [open, fixed, status]);
+  useEffect(() => {
+    if (!open || !fixed) return void 0;
+    const onKey = (event) => {
+      if (event.key === "Escape" && !finished && !failed) onCancel?.();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, fixed, finished, failed, onCancel]);
+  if (!open) return null;
+  const announcement = finished ? successMessage : failed ? `${errorMessage} ${steps[index]?.label ?? ""}` : `Step ${index + 1} of ${total}: ${steps[index]?.label ?? ""}`;
+  const panel = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-steps ${className}`,
+      role: fixed ? "dialog" : "region",
+      "aria-modal": fixed || void 0,
+      "aria-labelledby": `${uid}-title`,
+      "aria-busy": !finished && !failed,
+      "data-status": status,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-max-h": `${maxListHeight}px`,
+        "--bl-p": progress,
+        "--bl-bg": backgroundColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-track": trackColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-on-accent": onAccentColor,
+        "--bl-error": errorColor,
+        "--bl-radius": `${radius}px`,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("h2", { id: `${uid}-title`, className: "bl-steps__title", children: finished ? successMessage : failed ? errorMessage : title }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-steps__meta", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { children: finished ? `${total} of ${total} steps` : `Step ${index + 1} of ${total}` }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            Math.round(progress * 100),
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bl-steps__bar", role: "progressbar", "aria-label": "Overall progress", "aria-valuemin": 0, "aria-valuemax": total, "aria-valuenow": doneCount, children: /* @__PURE__ */ jsx("div", { className: "bl-steps__fill" }) }),
+        /* @__PURE__ */ jsx("ol", { ref: listRef, className: "bl-steps__list", children: steps.map((step, i) => {
+          const state = stateOf(i);
+          return /* @__PURE__ */ jsxs("li", { className: "bl-steps__step", "data-state": state, "aria-current": state === "active" ? "step" : void 0, children: [
+            /* @__PURE__ */ jsxs("span", { className: "bl-steps__icon", "aria-hidden": "true", children: [
+              state === "active" && /* @__PURE__ */ jsx("span", { className: "bl-steps__spin" }),
+              state === "done" && /* @__PURE__ */ jsx(Check, {}),
+              state === "error" && /* @__PURE__ */ jsx(Cross, {})
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "bl-steps__text", children: [
+              /* @__PURE__ */ jsxs("span", { className: "bl-steps__label", children: [
+                step.label,
+                /* @__PURE__ */ jsx("span", { className: "bl-steps__sr", children: state === "done" ? " (done)" : state === "error" ? " (failed)" : state === "active" ? " (in progress)" : "" })
+              ] }),
+              step.description && /* @__PURE__ */ jsx("span", { className: "bl-steps__desc", children: step.description })
+            ] })
+          ] }, step.id ?? i);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-steps__actions", children: [
+          finished && /* @__PURE__ */ jsx("button", { ref: actionRef, type: "button", className: "bl-steps__btn", "data-primary": "", onClick: () => onDone?.(), children: doneLabel }),
+          failed && /* @__PURE__ */ jsxs(Fragment, { children: [
+            onCancel && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-steps__btn", onClick: () => onCancel(), children: cancelLabel }),
+            /* @__PURE__ */ jsx("button", { ref: actionRef, type: "button", className: "bl-steps__btn", "data-primary": "", onClick: () => onRetry?.(), children: retryLabel })
+          ] }),
+          !finished && !failed && onCancel && /* @__PURE__ */ jsx("button", { ref: actionRef, type: "button", className: "bl-steps__btn", onClick: () => onCancel(), children: cancelLabel })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "bl-steps__sr", role: "status", children: announcement })
+      ]
+    }
+  );
+  return fixed ? /* @__PURE__ */ jsx("div", { className: "bl-steps-overlay", style: { "--bl-backdrop": backdropColor }, children: panel }) : panel;
+}
+export {
+  StepLoader as default
+};

package/dist/StepperForm.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from 'react';
+type Verdict = true | string | void;
+export interface FormStep {
+    id?: string;
+    title: ReactNode;
+    description?: ReactNode;
+    content?: ReactNode | ((api: {
+        index: number;
+        go: (index: number) => void;
+    }) => ReactNode);
+    /** Runs after the native field rules; a string is shown as the error. */
+    validate?: (data: FormData) => Verdict | Promise<Verdict>;
+}
+export interface StepperFormProps {
+    steps?: FormStep[];
+    defaultStep?: number;
+    onStepChange?: (index: number) => void;
+    /** All steps' fields together. */
+    onComplete?: (data: FormData) => void;
+    doneContent?: ReactNode;
+    backLabel?: string;
+    nextLabel?: string;
+    finishLabel?: string;
+    checkingLabel?: string;
+    label?: string;
+    width?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    trackColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    onAccentColor?: string;
+    errorColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function StepperForm({ steps, defaultStep, onStepChange, onComplete, doneContent, backLabel, nextLabel, finishLabel, checkingLabel, label, width, backgroundColor, textColor, mutedColor, trackColor, lineColor, accentColor, onAccentColor, errorColor, radius, fontFamily, className, style }: StepperFormProps): import("react").JSX.Element;
+export {};