bits-lab 0.0.0-stage → 0.1.2

package/dist/StepperForm.js

@@ -0,0 +1,206 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-stepper-form";
+const CSS = `
+.bl-stepper { width: 100%; max-width: var(--bl-w); box-sizing: border-box; padding: 20px; 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 24px 50px -28px rgba(0,0,0,0.85); }
+.bl-stepper__rail { position: relative; display: flex; justify-content: space-between; margin: 0 0 22px; padding: 0; list-style: none; }
+.bl-stepper__rail::before, .bl-stepper__rail::after { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 3px; border-radius: 3px; background: var(--bl-track); }
+.bl-stepper__rail::after { right: auto; width: calc((100% - 28px) * var(--bl-p)); background: var(--bl-accent); transition: width 420ms cubic-bezier(.3,1.1,.5,1); }
+.bl-stepper__step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; }
+.bl-stepper__dot { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--bl-bg); color: var(--bl-muted); font: inherit; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 2px var(--bl-track); cursor: default; transition: background-color 200ms, color 200ms, box-shadow 200ms; }
+.bl-stepper__step[data-state="done"] .bl-stepper__dot { background: var(--bl-accent); color: var(--bl-on-accent); box-shadow: none; cursor: pointer; }
+.bl-stepper__step[data-state="current"] .bl-stepper__dot { color: var(--bl-ink); box-shadow: inset 0 0 0 2px var(--bl-accent), 0 0 0 5px color-mix(in srgb, var(--bl-accent) 22%, transparent); }
+.bl-stepper__dot:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 3px; }
+.bl-stepper__name { max-width: 90px; overflow: hidden; color: var(--bl-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
+.bl-stepper__step[data-state="current"] .bl-stepper__name { color: var(--bl-ink); font-weight: 600; }
+.bl-stepper__panel { animation: bl-stepper-in 380ms cubic-bezier(.2,.9,.25,1) both; }
+.bl-stepper__panel[data-shake] { animation: bl-stepper-shake 380ms ease; }
+.bl-stepper__title { margin: 0 0 4px; font-size: 18px; font-weight: 700; outline: none; }
+.bl-stepper__desc { margin: 0 0 16px; color: var(--bl-muted); font-size: 14px; line-height: 1.5; }
+.bl-stepper__error { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--bl-error) 16%, transparent); color: var(--bl-error); font-size: 13px; font-weight: 600; }
+.bl-stepper__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
+.bl-stepper__btn { padding: 10px 18px; border: 0; border-radius: 10px; background: var(--bl-track); color: var(--bl-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
+.bl-stepper__btn[data-primary] { margin-left: auto; background: var(--bl-accent); color: var(--bl-on-accent); }
+.bl-stepper__btn:disabled { opacity: 0.6; cursor: progress; }
+.bl-stepper__btn:focus-visible { outline: 2px solid var(--bl-ink); outline-offset: 2px; }
+.bl-stepper__done { display: grid; justify-items: center; gap: 10px; padding: 20px 0 6px; text-align: center; animation: bl-stepper-in 380ms cubic-bezier(.2,.9,.25,1) both; }
+@keyframes bl-stepper-in { from { opacity: 0; transform: translateX(calc(var(--bl-dir, 1) * 26px)); } }
+@keyframes bl-stepper-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
+@media (prefers-reduced-motion: reduce) { .bl-stepper__panel, .bl-stepper__panel[data-shake], .bl-stepper__done { animation: none; } .bl-stepper__rail::after, .bl-stepper__dot { transition: none; } }
+@media (max-width: 520px) { .bl-stepper__name { display: 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 FIELDS = "input, select, textarea";
+function StepperForm({
+  steps = [],
+  defaultStep = 0,
+  onStepChange,
+  onComplete,
+  doneContent,
+  backLabel = "Back",
+  nextLabel = "Continue",
+  finishLabel = "Finish",
+  checkingLabel = "Checking\u2026",
+  label = "Form",
+  width = 520,
+  backgroundColor = "#1a1c2c",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  trackColor = "#333c57",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  onAccentColor = "#0b0b14",
+  errorColor = "#ef7d57",
+  radius = 16,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [index, setIndex] = useState(defaultStep);
+  const [reached, setReached] = useState(defaultStep);
+  const [dir, setDir] = useState(1);
+  const [error, setError] = useState("");
+  const [shake, setShake] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [done, setDone] = useState(false);
+  const formRef = useRef(null);
+  const moved = useRef(false);
+  const last = index === steps.length - 1;
+  const go = (next) => {
+    setDir(next > index ? 1 : -1);
+    setIndex(next);
+    setReached((r) => Math.max(r, next));
+    setError("");
+    moved.current = true;
+    onStepChange?.(next);
+  };
+  useEffect(() => {
+    if (!moved.current) return;
+    moved.current = false;
+    formRef.current?.querySelector(`#${uid}-title-${index}`)?.focus({ preventScroll: true });
+  }, [index, uid]);
+  const fail = (message, field) => {
+    setError(message);
+    setShake(true);
+    field?.focus();
+  };
+  const check = async () => {
+    const panel = formRef.current.querySelector(`[data-step="${index}"]`);
+    for (const field of panel.querySelectorAll(FIELDS)) {
+      if (!field.checkValidity()) {
+        const name = field.labels?.[0]?.textContent?.trim();
+        fail(name ? `${name}: ${field.validationMessage}` : field.validationMessage, field);
+        return false;
+      }
+    }
+    const validate = steps[index].validate;
+    if (!validate) return true;
+    setBusy(true);
+    try {
+      const verdict = await validate(new FormData(formRef.current));
+      if (verdict === true || verdict === void 0) return true;
+      fail(typeof verdict === "string" ? verdict : "Please check this step.");
+      return false;
+    } catch (err) {
+      fail(err instanceof Error ? err.message : "Something went wrong.");
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+  const onSubmit = async (event) => {
+    event.preventDefault();
+    if (busy || !await check()) return;
+    if (!last) go(index + 1);
+    else {
+      onComplete?.(new FormData(formRef.current));
+      setDone(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      ref: formRef,
+      className: `bl-stepper ${className}`,
+      "aria-label": label,
+      noValidate: true,
+      onSubmit,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-p": done ? 1 : steps.length > 1 ? index / (steps.length - 1) : 1,
+        "--bl-dir": dir,
+        "--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("ol", { className: "bl-stepper__rail", "aria-label": "Progress", children: steps.map((step, i) => {
+          const state = done || i < index ? "done" : i === index ? "current" : "todo";
+          const canJump = !done && i !== index && i <= reached;
+          return /* @__PURE__ */ jsxs("li", { className: "bl-stepper__step", "data-state": state, "aria-current": state === "current" ? "step" : void 0, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "bl-stepper__dot",
+                disabled: !canJump,
+                "aria-label": `Step ${i + 1}: ${step.title}${state === "done" ? " (done)" : state === "current" ? " (current)" : ""}`,
+                onClick: () => canJump && go(i),
+                children: state === "done" ? /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 6.5 5 9l4.5-5.5" }) }) : i + 1
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "bl-stepper__name", "aria-hidden": "true", children: step.title })
+          ] }, step.id ?? i);
+        }) }),
+        steps.map((step, i) => /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "data-step": i,
+            className: "bl-stepper__panel",
+            hidden: done || i !== index,
+            "data-shake": shake && i === index || void 0,
+            onAnimationEnd: () => setShake(false),
+            "aria-labelledby": `${uid}-title-${i}`,
+            children: [
+              /* @__PURE__ */ jsx("h3", { id: `${uid}-title-${i}`, className: "bl-stepper__title", tabIndex: -1, children: step.title }),
+              step.description && /* @__PURE__ */ jsx("p", { className: "bl-stepper__desc", children: step.description }),
+              typeof step.content === "function" ? step.content({ index: i, go }) : step.content
+            ]
+          },
+          step.id ?? i
+        )),
+        done ? /* @__PURE__ */ jsx("div", { className: "bl-stepper__done", role: "status", children: doneContent ?? /* @__PURE__ */ jsx("strong", { children: "All done!" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          error && /* @__PURE__ */ jsxs("p", { className: "bl-stepper__error", role: "alert", children: [
+            /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M7 1 13.5 12.5h-13zM6.3 5v3.6h1.4V5zm0 4.8v1.4h1.4V9.8z" }) }),
+            error
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "bl-stepper__foot", children: [
+            index > 0 && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-stepper__btn", onClick: () => go(index - 1), children: backLabel }),
+            /* @__PURE__ */ jsx("button", { type: "submit", className: "bl-stepper__btn", "data-primary": "", disabled: busy, children: busy ? checkingLabel : last ? finishLabel : nextLabel })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  StepperForm as default
+};

package/dist/StickerBoard.d.ts

@@ -0,0 +1,39 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface Sticker {
+    id: string;
+    /** Accessible name. */
+    label?: string;
+    /** An image URL or any node. */
+    content?: ReactNode;
+    x?: number;
+    y?: number;
+    /** Starting rotation in degrees. */
+    rotate?: number;
+    /** Width in px. */
+    size?: number;
+}
+/** Position (px), rotation (deg) and stacking order per sticker id. */
+export type StickerLayout = Record<string, {
+    x: number;
+    y: number;
+    r: number;
+    z: number;
+}>;
+export interface StickerBoardProps {
+    stickers?: Sticker[];
+    height?: number;
+    /** Save the layout in localStorage under this key. */
+    storageKey?: string;
+    onChange?: (layout: StickerLayout) => void;
+    radius?: number;
+    stickerRadius?: number;
+    backgroundColor?: string;
+    /** The sticker's white edge. */
+    paperColor?: string;
+    peelColor?: string;
+    accentColor?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function StickerBoard({ stickers, height, storageKey, onChange, radius, stickerRadius, backgroundColor, paperColor, peelColor, accentColor, label, className, style }: StickerBoardProps): import("react").JSX.Element;

package/dist/StickerBoard.js

@@ -0,0 +1,209 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-sticker-board";
+const CSS = `
+.bl-stickers { position: relative; width: 100%; height: var(--bl-h); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); touch-action: none; }
+.bl-sticker { position: absolute; left: 0; top: 0; width: var(--s); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; transform: translate(var(--x), var(--y)) rotate(var(--r)); transition: transform 380ms cubic-bezier(.3,1.5,.5,1), filter 200ms; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35)); outline: none; }
+.bl-sticker[data-dragging] { cursor: grabbing; transition: filter 200ms; filter: drop-shadow(0 18px 18px rgba(0,0,0,0.45)); }
+.bl-sticker__body { position: relative; display: block; overflow: hidden; border-radius: var(--bl-sticker-radius); background: var(--bl-paper); box-shadow: 0 0 0 4px var(--bl-paper); transition: transform 300ms cubic-bezier(.3,1.5,.5,1); }
+.bl-sticker[data-dragging] .bl-sticker__body { transform: scale(1.08) rotate(-3deg); }
+.bl-sticker__body > img, .bl-sticker__body > svg { display: block; width: 100%; height: auto; }
+.bl-sticker__peel { position: absolute; right: -4px; bottom: -4px; width: 0; height: 0; background: linear-gradient(135deg, transparent 50%, var(--bl-peel) 50%, color-mix(in srgb, var(--bl-peel) 70%, #000)); border-top-left-radius: 6px; box-shadow: -2px -2px 4px rgba(0,0,0,0.25); transition: width 220ms cubic-bezier(.3,1.4,.5,1), height 220ms cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
+.bl-sticker:hover .bl-sticker__peel, .bl-sticker:focus-visible .bl-sticker__peel { width: 26%; height: 26%; }
+.bl-sticker:focus-visible .bl-sticker__body { box-shadow: 0 0 0 4px var(--bl-paper), 0 0 0 7px var(--bl-accent); }
+.bl-sticker[data-landed] .bl-sticker__body { animation: bl-sticker-slap 420ms cubic-bezier(.3,1.6,.5,1); }
+.bl-stickers__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@keyframes bl-sticker-slap { 0% { transform: scale(1.08); } 45% { transform: scale(0.94) rotate(2deg); } 100% { transform: none; } }
+@media (prefers-reduced-motion: reduce) { .bl-sticker, .bl-sticker__body, .bl-sticker__peel { transition: none; } .bl-sticker[data-landed] .bl-sticker__body { animation: none; } .bl-sticker[data-dragging] .bl-sticker__body { transform: 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 load = (key) => {
+  try {
+    return key ? JSON.parse(localStorage.getItem(key) ?? "null") : null;
+  } catch {
+    return null;
+  }
+};
+function StickerBoard({
+  stickers = [],
+  height = 420,
+  storageKey,
+  onChange,
+  radius = 16,
+  stickerRadius = 12,
+  backgroundColor = "#5d275d",
+  paperColor = "#f4f4f4",
+  peelColor = "#e8e8e8",
+  accentColor = "#73eff7",
+  label = "Sticker board",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const boardRef = useRef(null);
+  const [layout, setLayout] = useState(() => {
+    const saved = load(storageKey);
+    return Object.fromEntries(stickers.map((s, i) => [s.id, saved?.[s.id] ?? { x: s.x ?? 20 + i * 40, y: s.y ?? 20 + i * 30, r: s.rotate ?? 0, z: i }]));
+  });
+  const [dragging, setDragging] = useState(null);
+  const [landed, setLanded] = useState(null);
+  const [announce, setAnnounce] = useState("");
+  const drag = useRef(null);
+  useEffect(() => {
+    if (storageKey) {
+      try {
+        localStorage.setItem(storageKey, JSON.stringify(layout));
+      } catch {
+      }
+    }
+    onChange?.(layout);
+  }, [layout, storageKey]);
+  const topZ = () => Math.max(0, ...Object.values(layout).map((l) => l.z)) + 1;
+  const clamp = (id, x, y, inside = 0.5) => {
+    const board = boardRef.current;
+    const node = board?.querySelector(`[data-id="${id}"]`);
+    if (!board || !node) return { x, y };
+    const w = node.offsetWidth;
+    const h = node.offsetHeight;
+    const out = (1 - inside) * 0.6;
+    return { x: Math.max(-w * out, Math.min(board.clientWidth - w * inside, x)), y: Math.max(-h * out, Math.min(board.clientHeight - h * inside, y)) };
+  };
+  useEffect(() => {
+    const board = boardRef.current;
+    const fit = () => setLayout((current) => {
+      let changed = false;
+      const next = { ...current };
+      Object.entries(current).forEach(([id, l]) => {
+        const { x, y } = clamp(id, l.x, l.y, 1);
+        if (x !== l.x || y !== l.y) {
+          next[id] = { ...l, x, y };
+          changed = true;
+        }
+      });
+      return changed ? next : current;
+    });
+    const resize = new ResizeObserver(fit);
+    resize.observe(board);
+    return () => resize.disconnect();
+  }, []);
+  const update = (id, patch) => setLayout((current) => ({ ...current, [id]: { ...current[id], ...patch } }));
+  const onPointerDown = (event, id) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+    }
+    event.currentTarget.focus({ preventScroll: true });
+    drag.current = { id, startX: event.clientX, startY: event.clientY, x: layout[id].x, y: layout[id].y, moved: false };
+    update(id, { z: topZ() });
+    setDragging(id);
+  };
+  const onPointerMove = (event) => {
+    const d = drag.current;
+    if (!d) return;
+    const dx = event.clientX - d.startX;
+    const dy = event.clientY - d.startY;
+    if (Math.abs(dx) + Math.abs(dy) > 3) d.moved = true;
+    update(d.id, clamp(d.id, d.x + dx, d.y + dy));
+  };
+  const onPointerUp = () => {
+    const d = drag.current;
+    if (!d) return;
+    drag.current = null;
+    setDragging(null);
+    setLanded(d.id);
+    const name = stickers.find((s) => s.id === d.id)?.label ?? "Sticker";
+    if (d.moved) setAnnounce(`${name} placed.`);
+  };
+  const onWheel = (event, id) => {
+    if (!event.shiftKey) return;
+    event.preventDefault();
+    update(id, { r: (layout[id].r + Math.sign(event.deltaY || event.deltaX) * 8) % 360 });
+  };
+  const onKeyDown = (event, id, name) => {
+    const step = event.shiftKey ? 32 : 8;
+    const l = layout[id];
+    const moves = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+    if (moves[event.key]) {
+      event.preventDefault();
+      const [dx, dy] = moves[event.key];
+      const next = clamp(id, l.x + dx, l.y + dy);
+      update(id, { ...next, z: topZ() });
+      setAnnounce(`${name} moved to ${Math.round(next.x)}, ${Math.round(next.y)}.`);
+    } else if (event.key === "[" || event.key === "]") {
+      event.preventDefault();
+      const r = (l.r + (event.key === "]" ? 15 : -15)) % 360;
+      update(id, { r });
+      setAnnounce(`${name} rotated to ${Math.round(r)} degrees.`);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      update(id, { z: topZ() });
+      setLanded(id);
+      setAnnounce(`${name} brought to the front.`);
+    }
+  };
+  useEffect(() => {
+    const board = boardRef.current;
+    const handler = (event) => {
+      const node = event.target.closest?.("[data-id]");
+      if (node && event.shiftKey) onWheel(event, node.getAttribute("data-id"));
+    };
+    board.addEventListener("wheel", handler, { passive: false });
+    return () => board.removeEventListener("wheel", handler);
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: boardRef,
+      className: `bl-stickers ${className}`,
+      role: "group",
+      "aria-label": label,
+      "aria-describedby": `${uid}-help`,
+      style: { "--bl-h": `${height}px`, "--bl-radius": `${radius}px`, "--bl-sticker-radius": `${stickerRadius}px`, "--bl-bg": backgroundColor, "--bl-paper": paperColor, "--bl-peel": peelColor, "--bl-accent": accentColor, ...style },
+      children: [
+        stickers.map((sticker) => {
+          const l = layout[sticker.id];
+          const name = sticker.label ?? "Sticker";
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "data-id": sticker.id,
+              className: "bl-sticker",
+              "aria-label": name,
+              "data-dragging": dragging === sticker.id || void 0,
+              "data-landed": landed === sticker.id || void 0,
+              onAnimationEnd: () => landed === sticker.id && setLanded(null),
+              style: { "--x": `${l.x}px`, "--y": `${l.y}px`, "--r": `${l.r}deg`, "--s": `${sticker.size ?? 120}px`, zIndex: l.z },
+              onPointerDown: (event) => onPointerDown(event, sticker.id),
+              onPointerMove,
+              onPointerUp,
+              onPointerCancel: onPointerUp,
+              onKeyDown: (event) => onKeyDown(event, sticker.id, name),
+              children: /* @__PURE__ */ jsxs("span", { className: "bl-sticker__body", children: [
+                typeof sticker.content === "string" ? /* @__PURE__ */ jsx("img", { src: sticker.content, alt: "", draggable: false }) : sticker.content,
+                /* @__PURE__ */ jsx("span", { className: "bl-sticker__peel", "aria-hidden": "true" })
+              ] })
+            },
+            sticker.id
+          );
+        }),
+        /* @__PURE__ */ jsx("p", { id: `${uid}-help`, className: "bl-stickers__sr", children: "Drag stickers to move them. With a sticker focused, arrow keys move it, Shift for bigger steps, square brackets rotate it, Enter brings it to the front." }),
+        /* @__PURE__ */ jsx("span", { className: "bl-stickers__sr", "aria-live": "polite", children: announce })
+      ]
+    }
+  );
+}
+export {
+  StickerBoard as default
+};

package/dist/StickyReveal.d.ts

@@ -0,0 +1,42 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface StickySection {
+    id?: string | number;
+    title?: ReactNode;
+    /** A string renders as a paragraph; any other node renders as-is. */
+    body?: ReactNode;
+    /** Shown in the sticky column while this section is active. */
+    media?: ReactNode;
+}
+export interface StickyRevealProps {
+    /** Story steps, in order. */
+    sections?: StickySection[];
+    /** How media swaps. Slide wipes the next item up over the last. */
+    effect?: 'fade' | 'zoom' | 'slide';
+    mediaSide?: 'right' | 'left';
+    /** Min height of each text section (any CSS length). */
+    sectionHeight?: string;
+    /** Height of the sticky media (any CSS length). */
+    stageHeight?: string;
+    /** Sticky offset from the top (any CSS length). */
+    stickyTop?: string;
+    /** Viewport position (0 top, 1 bottom) where a section becomes active. */
+    activeLine?: number;
+    /** Called with the new active index. */
+    onChange?: (index: number) => void;
+    /** Progress dots on the media. */
+    showDots?: boolean;
+    gap?: number;
+    radius?: number;
+    textColor?: string;
+    mutedColor?: string;
+    accentColor?: string;
+    stageColor?: string;
+    lineColor?: string;
+    titleSize?: number;
+    fontFamily?: string;
+    titleFontFamily?: string;
+    labelFontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function StickyReveal({ sections, effect, mediaSide, sectionHeight, stageHeight, stickyTop, activeLine, onChange, showDots, gap, radius, textColor, mutedColor, accentColor, stageColor, lineColor, titleSize, fontFamily, titleFontFamily, labelFontFamily, className, style }: StickyRevealProps): import("react").JSX.Element;