bits-lab 0.0.0-stage → 0.1.0

package/dist/ScrollTilt.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-scroll-tilt";
+const CSS = `
+.bl-tilt { --bl-p: 0; position: relative; perspective: var(--bl-perspective); }
+.bl-tilt__card { position: relative; overflow: hidden; border-radius: var(--bl-radius); box-shadow: 0 0 0 var(--bl-border) var(--bl-edge), 0 calc(10px + var(--bl-p) * 40px) calc(30px + var(--bl-p) * 60px) -20px var(--bl-shadow); transform-origin: 50% 0; transform: rotateX(calc((1 - var(--bl-p)) * var(--bl-tilt))) scale(calc(var(--bl-scale) + (1 - var(--bl-scale)) * var(--bl-p))) translateY(calc((1 - var(--bl-p)) * var(--bl-lift))); will-change: transform; }
+.bl-tilt__card > img, .bl-tilt__card > video { display: block; width: 100%; height: auto; }
+.bl-tilt__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, var(--bl-shine) 48%, transparent 66%); background-size: 250% 100%; background-position: calc(100% - var(--bl-p) * 100%) 0; opacity: calc(1 - var(--bl-p) * 0.7); mix-blend-mode: screen; }
+@media (prefers-reduced-motion: reduce) {
+  .bl-tilt__card { transform: none; }
+  .bl-tilt__shine { 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);
+  }, []);
+}
+function scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+const ease = (t) => t * t * (3 - 2 * t);
+function ScrollTilt({
+  children,
+  tilt = 32,
+  scale = 0.88,
+  lift = 40,
+  start = 1,
+  end = 0.35,
+  perspective = 1200,
+  shine = true,
+  radius = 16,
+  borderWidth = 1,
+  borderColor = "rgba(255,255,255,0.12)",
+  shineColor = "rgba(255,255,255,0.35)",
+  shadowColor = "rgba(0,0,0,0.6)",
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  useEffect(() => {
+    const root = ref.current;
+    const scroller = scrollParent(root);
+    let frame = 0;
+    const update = () => {
+      frame = 0;
+      const rect = root.getBoundingClientRect();
+      const viewTop = scroller === window ? 0 : scroller.getBoundingClientRect().top;
+      const viewHeight = scroller === window ? window.innerHeight : scroller.clientHeight;
+      const top = (rect.top - viewTop) / viewHeight;
+      const raw = Math.min(1, Math.max(0, (start - top) / Math.max(0.01, start - end)));
+      root.style.setProperty("--bl-p", ease(raw).toFixed(4));
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    update();
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    return () => {
+      cancelAnimationFrame(frame);
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+    };
+  }, [start, end]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: `bl-tilt ${className}`,
+      style: {
+        "--bl-tilt": `${tilt}deg`,
+        "--bl-scale": scale,
+        "--bl-lift": `${lift}px`,
+        "--bl-perspective": `${perspective}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-border": `${borderWidth}px`,
+        "--bl-edge": borderColor,
+        "--bl-shine": shineColor,
+        "--bl-shadow": shadowColor,
+        ...style
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "bl-tilt__card", children: [
+        children,
+        shine && /* @__PURE__ */ jsx("div", { className: "bl-tilt__shine", "aria-hidden": "true" })
+      ] })
+    }
+  );
+}
+export {
+  ScrollTilt as default
+};

package/dist/ScrollTypography.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type ElementType } from 'react';
+export interface ScrollTypographyProps {
+    /** Plain text, split into words. */
+    text?: string;
+    as?: ElementType;
+    /** Scroll speed (px/s) that gives the full effect. */
+    sensitivity?: number;
+    minWeight?: number;
+    maxWeight?: number;
+    /** Vertical stretch at full speed (0.25 = 25% taller). */
+    stretch?: number;
+    /** How much wider fast words get, in %, if the font has a width axis. */
+    widthRange?: number;
+    /** Lean in degrees at full speed; follows the scroll direction. */
+    skew?: number;
+    /** Delay per word in ms, which makes the ripple. */
+    stagger?: number;
+    fontSize?: number | string;
+    textColor?: string;
+    /** Colour at full speed. */
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ScrollTypography({ text, as: Tag, sensitivity, minWeight, maxWeight, stretch, widthRange, skew, stagger, fontSize, textColor, accentColor, fontFamily, className, style }: ScrollTypographyProps): import("react").JSX.Element;

package/dist/ScrollTypography.js

@@ -0,0 +1,124 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-scroll-typography";
+const CSS = `
+.bl-stype { margin: 0; font-family: var(--bl-font); font-size: var(--bl-size); line-height: 1.15; color: var(--bl-ink); text-wrap: balance; }
+.bl-stype__word { --t: 0; --s: 0; display: inline-block; font-weight: calc(var(--bl-wmin) + var(--t) * (var(--bl-wmax) - var(--bl-wmin))); font-stretch: calc(100% + var(--t) * var(--bl-wdth)); color: color-mix(in srgb, var(--bl-accent) calc(var(--t) * 100%), var(--bl-ink)); transform: skewX(calc(var(--s) * var(--bl-skew))) scaleY(calc(1 + var(--t) * var(--bl-stretch))); transform-origin: 50% 100%; will-change: transform; }
+`;
+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 scrollerOf(node) {
+  for (let el = node.parentElement; el && el !== document.body; el = el.parentElement) {
+    const { overflowY } = getComputedStyle(el);
+    if (/(auto|scroll|overlay)/.test(overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+function ScrollTypography({
+  text = "",
+  as: Tag = "p",
+  sensitivity = 2400,
+  minWeight = 300,
+  maxWeight = 900,
+  stretch = 0.25,
+  widthRange = 0,
+  skew = 10,
+  stagger = 35,
+  fontSize = 56,
+  textColor = "#f4f4f4",
+  accentColor = "#73eff7",
+  fontFamily = '"Roboto Flex", ui-sans-serif, system-ui, sans-serif',
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  const words = text.split(/\s+/).filter(Boolean);
+  useEffect(() => {
+    const root = rootRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (reduced) return void 0;
+    const nodes = [...root.querySelectorAll(".bl-stype__word")];
+    const scroller = scrollerOf(root);
+    const position = () => scroller === window ? window.scrollY : scroller.scrollTop;
+    const history = [];
+    let lastY = position();
+    let smooth = 0;
+    let visible = true;
+    let raf = 0;
+    let last = 0;
+    const at = (time) => {
+      for (let i = history.length - 1; i >= 0; i--) if (history[i].t <= time) return history[i].v;
+      return history.length ? history[0].v : 0;
+    };
+    const tick = (now) => {
+      const dt = Math.max(1e-3, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      const y = position();
+      const raw = Math.max(-1, Math.min(1, (y - lastY) / dt / sensitivity));
+      lastY = y;
+      smooth += (raw - smooth) * (1 - Math.exp(-dt * 9));
+      history.push({ t: now, v: smooth });
+      while (history.length > 2 && now - history[0].t > stagger * nodes.length + 200) history.shift();
+      let active = Math.abs(smooth) > 2e-3;
+      nodes.forEach((node, i) => {
+        const v = at(now - i * stagger);
+        if (Math.abs(v) > 2e-3) active = true;
+        node.style.setProperty("--t", Math.abs(v).toFixed(3));
+        node.style.setProperty("--s", v.toFixed(3));
+      });
+      if (active) raf = requestAnimationFrame(tick);
+      else {
+        raf = 0;
+        smooth = 0;
+        history.length = 0;
+        nodes.forEach((node) => {
+          node.style.setProperty("--t", "0");
+          node.style.setProperty("--s", "0");
+        });
+      }
+    };
+    const onScroll = () => {
+      if (raf || !visible) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+      lastY = position();
+    });
+    observer.observe(root);
+    scroller.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+      scroller.removeEventListener("scroll", onScroll);
+      nodes.forEach((node) => {
+        node.style.removeProperty("--t");
+        node.style.removeProperty("--s");
+      });
+    };
+  }, [text, sensitivity, stagger]);
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref: rootRef,
+      className: `bl-stype ${className}`,
+      style: { "--bl-size": typeof fontSize === "number" ? `${fontSize}px` : fontSize, "--bl-wmin": minWeight, "--bl-wmax": maxWeight, "--bl-stretch": stretch, "--bl-wdth": `${widthRange}%`, "--bl-skew": `${-skew}deg`, "--bl-ink": textColor, "--bl-accent": accentColor, "--bl-font": fontFamily, ...style },
+      children: words.map((word, i) => /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-stype__word", children: word }),
+        i < words.length - 1 && " "
+      ] }, i))
+    }
+  );
+}
+export {
+  ScrollTypography as default
+};

package/dist/ScrollZoom.d.ts

@@ -0,0 +1,31 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ScrollZoomProps {
+    src?: string;
+    alt?: string;
+    /** Any node (video, canvas) instead of an image. */
+    media?: ReactNode;
+    /** Shown above the small frame; fades as the zoom starts. */
+    heading?: ReactNode;
+    /** Revealed over the full-bleed media after the zoom. */
+    children?: ReactNode;
+    /** Section length in screen heights. */
+    length?: number;
+    /** Share of the scroll spent zooming; the rest reveals. */
+    zoomEnd?: number;
+    /** Starting frame width as a share of the stage. */
+    startWidth?: number;
+    startAspect?: number;
+    radius?: number;
+    /** Space above the frame for the heading, as a share of the stage height. */
+    headingSpace?: number;
+    dim?: number;
+    dimColor?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    /** Style for the media wrapper (e.g. imageRendering: "pixelated"). */
+    mediaStyle?: CSSProperties;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ScrollZoom({ src, alt, media, heading, children, length, zoomEnd, startWidth, startAspect, radius, headingSpace, dim, dimColor, textColor, backgroundColor, mediaStyle, fontFamily, className, style }: ScrollZoomProps): import("react").JSX.Element;

package/dist/ScrollZoom.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-scroll-zoom";
+const CSS = `
+.bl-zoom { position: relative; height: calc(var(--bl-view, 100vh) * var(--bl-length)); color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-zoom__stage { position: sticky; top: 0; height: var(--bl-view, 100vh); overflow: hidden; }
+.bl-zoom__media { position: absolute; inset: 0; clip-path: var(--bl-clip, inset(0)); will-change: clip-path; }
+.bl-zoom__media > img, .bl-zoom__media > video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.18 - var(--bl-p, 1) * 0.18)); }
+.bl-zoom__media > :not(img):not(video) { width: 100%; height: 100%; }
+.bl-zoom__dim { position: absolute; inset: 0; background: var(--bl-dim-color); opacity: calc(var(--bl-reveal, 1) * var(--bl-dim)); pointer-events: none; }
+.bl-zoom__heading { position: absolute; left: 0; right: 0; top: 0; display: grid; place-items: center; height: var(--bl-head-h); padding: 0 16px; text-align: center; opacity: calc(1 - var(--bl-p, 1) * 3); transform: translateY(calc(var(--bl-p, 1) * -40px)); pointer-events: none; }
+.bl-zoom__reveal { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; opacity: var(--bl-reveal, 1); transform: translateY(calc((1 - var(--bl-reveal, 1)) * 30px)); }
+.bl-zoom[data-hidden-reveal] .bl-zoom__reveal { visibility: hidden; }
+.bl-zoom[data-static] { height: auto; }
+.bl-zoom[data-static] .bl-zoom__stage { position: relative; height: var(--bl-view, 100vh); }
+`;
+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 scrollParent(node) {
+  for (let el = node?.parentElement; el; el = el.parentElement) {
+    if (/(auto|scroll|overlay)/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight) return el;
+  }
+  return window;
+}
+const clamp = (value) => Math.max(0, Math.min(1, value));
+const ease = (t) => 1 - (1 - t) ** 3;
+function ScrollZoom({
+  src,
+  alt = "",
+  media,
+  heading,
+  children,
+  length = 3,
+  zoomEnd = 0.6,
+  startWidth = 0.46,
+  startAspect = 4 / 3,
+  radius = 18,
+  headingSpace = 0.24,
+  dim = 0.55,
+  dimColor = "#0b0b14",
+  textColor = "#f4f4f4",
+  backgroundColor = "#1a1c2c",
+  mediaStyle,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  className = "",
+  style
+}) {
+  useStyles();
+  const rootRef = useRef(null);
+  useEffect(() => {
+    const root = rootRef.current;
+    const scroller = scrollParent(root);
+    const isWindow = scroller === window;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    let frame = 0;
+    const viewport = () => isWindow ? { top: 0, height: window.innerHeight } : { top: scroller.getBoundingClientRect().top, height: scroller.clientHeight };
+    const update = () => {
+      frame = 0;
+      const view = viewport();
+      root.style.setProperty("--bl-view", `${view.height}px`);
+      root.style.setProperty("--bl-head-h", `${view.height * headingSpace}px`);
+      const rect = root.getBoundingClientRect();
+      const travel = rect.height - view.height;
+      const p = reduced ? 1 : clamp((view.top - rect.top) / Math.max(1, travel));
+      const zoom = ease(clamp(p / zoomEnd));
+      const reveal = clamp((p - zoomEnd) / Math.max(0.01, (1 - zoomEnd) * 0.6));
+      const width = rect.width;
+      const height = view.height;
+      const frameW = Math.min(width * startWidth, (height * (1 - headingSpace) - 24) * startAspect);
+      const frameH = frameW / startAspect;
+      const x = (width - frameW) / 2 * (1 - zoom);
+      const top = height * headingSpace * (1 - zoom);
+      const bottom = Math.max(0, height - height * headingSpace - frameH) * (1 - zoom);
+      root.style.setProperty("--bl-clip", `inset(${top}px ${x}px ${bottom}px ${x}px round ${radius * (1 - zoom)}px)`);
+      root.style.setProperty("--bl-p", String(zoom));
+      root.style.setProperty("--bl-reveal", String(reveal));
+      root.toggleAttribute("data-hidden-reveal", reveal < 0.02);
+    };
+    const schedule = () => {
+      if (!frame) frame = requestAnimationFrame(update);
+    };
+    if (reduced) root.setAttribute("data-static", "");
+    else root.removeAttribute("data-static");
+    scroller.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    const resize = new ResizeObserver(schedule);
+    resize.observe(root);
+    if (!isWindow) resize.observe(scroller);
+    update();
+    return () => {
+      cancelAnimationFrame(frame);
+      scroller.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      resize.disconnect();
+    };
+  }, [zoomEnd, startWidth, startAspect, radius, headingSpace, length]);
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      ref: rootRef,
+      className: `bl-zoom ${className}`,
+      style: { "--bl-length": length, "--bl-dim": dim, "--bl-dim-color": dimColor, "--bl-ink": textColor, "--bl-font": fontFamily, background: backgroundColor, ...style },
+      children: /* @__PURE__ */ jsxs("div", { className: "bl-zoom__stage", children: [
+        heading && /* @__PURE__ */ jsx("div", { className: "bl-zoom__heading", children: heading }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-zoom__media", style: mediaStyle, children: [
+          media ?? /* @__PURE__ */ jsx("img", { src, alt }),
+          /* @__PURE__ */ jsx("div", { className: "bl-zoom__dim", "aria-hidden": "true" })
+        ] }),
+        children && /* @__PURE__ */ jsx("div", { className: "bl-zoom__reveal", children })
+      ] })
+    }
+  );
+}
+export {
+  ScrollZoom as default
+};

package/dist/ScrubNumber.d.ts

@@ -0,0 +1,29 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ScrubNumberProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    /** Step; decimals follow it. */
+    step?: number;
+    /** Drag distance per step; Shift ×10, Alt ×0.1. */
+    pixelsPerStep?: number;
+    /** Accessible name. */
+    label?: string;
+    /** What the drag handle shows (defaults to the label). */
+    handle?: ReactNode;
+    unit?: string;
+    width?: number;
+    radius?: number;
+    backgroundColor?: string;
+    chipColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ScrubNumber({ value: controlled, defaultValue, onChange, min, max, step, pixelsPerStep, label, handle, unit, width, radius, backgroundColor, chipColor, textColor, mutedColor, lineColor, accentColor, fontFamily, className, style }: ScrubNumberProps): import("react").JSX.Element;

package/dist/ScrubNumber.js

@@ -0,0 +1,152 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-scrub-number";
+const CSS = `
+.bl-scrub { position: relative; display: inline-flex; align-items: stretch; overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); color: var(--bl-ink); font-family: var(--bl-font); font-size: 14px; box-shadow: inset 0 0 0 1px var(--bl-line); }
+.bl-scrub:focus-within { box-shadow: inset 0 0 0 2px var(--bl-accent); }
+.bl-scrub__handle { position: relative; display: grid; place-items: center; min-width: 30px; padding: 0 10px; background: var(--bl-chip); color: var(--bl-muted); font-weight: 700; cursor: ew-resize; user-select: none; touch-action: none; }
+.bl-scrub[data-scrubbing] .bl-scrub__handle { color: var(--bl-accent); }
+.bl-scrub__input { width: var(--bl-w); min-width: 0; margin: 0; padding: 8px 10px; border: 0; background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; outline: none; }
+.bl-scrub__unit { display: grid; place-items: center; padding-right: 10px; color: var(--bl-muted); }
+.bl-scrub__ruler { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--bl-accent) 0 1px, transparent 1px 8px); background-position: var(--off) 0; opacity: 0; pointer-events: none; transition: opacity 120ms; }
+.bl-scrub[data-scrubbing] .bl-scrub__ruler { opacity: 0.8; }
+`;
+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 decimalsOf = (step) => (String(step).split(".")[1] ?? "").length;
+function ScrubNumber({
+  value: controlled,
+  defaultValue = 0,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  pixelsPerStep = 4,
+  label = "Value",
+  handle,
+  unit = "",
+  width = 64,
+  radius = 8,
+  backgroundColor = "#1a1c2c",
+  chipColor = "#262b44",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  const id = useId();
+  const [inner, setInner] = useState(defaultValue);
+  const value = controlled ?? inner;
+  const decimals = decimalsOf(step);
+  const [draft, setDraft] = useState(null);
+  const [scrubbing, setScrubbing] = useState(false);
+  const handleRef = useRef(null);
+  const rootRef = useRef(null);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const commit = (next) => {
+    const snapped = Math.round(next / step) * step;
+    const v = Number(Math.max(min, Math.min(max, snapped)).toFixed(decimals));
+    if (v === valueRef.current) return;
+    if (controlled === void 0) setInner(v);
+    onChange?.(v);
+  };
+  const commitRef = useRef(commit);
+  commitRef.current = commit;
+  useEffect(() => {
+    const el = handleRef.current;
+    const root = rootRef.current;
+    let drag = null;
+    const onDown = (event) => {
+      if (event.button > 0) return;
+      event.preventDefault();
+      el.setPointerCapture?.(event.pointerId);
+      drag = { x: event.clientX, from: valueRef.current };
+      setScrubbing(true);
+    };
+    const onMove = (event) => {
+      if (!drag) return;
+      const dx = event.clientX - drag.x;
+      const scale = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
+      root.style.setProperty("--off", `${dx}px`);
+      commitRef.current(drag.from + Math.round(dx / pixelsPerStep) * step * scale);
+    };
+    const onUp = () => {
+      drag = null;
+      setScrubbing(false);
+    };
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+    el.addEventListener("pointercancel", onUp);
+    return () => {
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointercancel", onUp);
+    };
+  }, [step, pixelsPerStep]);
+  const finishTyping = () => {
+    if (draft === null) return;
+    const parsed = Number(draft.replace(",", "."));
+    if (Number.isFinite(parsed)) commit(parsed);
+    setDraft(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: rootRef,
+      className: `bl-scrub ${className}`,
+      "data-scrubbing": scrubbing || void 0,
+      style: { "--bl-w": `${width}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-chip": chipColor, "--bl-ink": textColor, "--bl-muted": mutedColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-font": fontFamily, "--off": "0px", ...style },
+      children: [
+        /* @__PURE__ */ jsx("label", { ref: handleRef, htmlFor: id, className: "bl-scrub__handle", title: `Drag to change ${label}`, children: handle ?? label }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            className: "bl-scrub__input",
+            type: "text",
+            inputMode: "decimal",
+            role: "spinbutton",
+            "aria-label": handle ? label : void 0,
+            "aria-valuenow": value,
+            "aria-valuemin": Number.isFinite(min) ? min : void 0,
+            "aria-valuemax": Number.isFinite(max) ? max : void 0,
+            value: draft ?? value.toFixed(decimals),
+            onChange: (event) => setDraft(event.target.value),
+            onBlur: finishTyping,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                finishTyping();
+                event.currentTarget.select();
+              } else if (event.key === "Escape") setDraft(null);
+              else if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                event.preventDefault();
+                setDraft(null);
+                const scale = event.shiftKey ? 10 : event.altKey ? 0.1 : 1;
+                commit(value + (event.key === "ArrowUp" ? 1 : -1) * step * scale);
+              }
+            }
+          }
+        ),
+        unit && /* @__PURE__ */ jsx("span", { className: "bl-scrub__unit", "aria-hidden": "true", children: unit }),
+        /* @__PURE__ */ jsx("span", { className: "bl-scrub__ruler", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+export {
+  ScrubNumber as default
+};

package/dist/ShadowStack.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties, type ElementType } from 'react';
+export interface ShadowStackProps {
+    text?: string;
+    as?: ElementType;
+    /** A solid stair-stepped block, or spaced fading copies that breathe. */
+    mode?: 'extrude' | 'echo';
+    /** Extrude depth in px. */
+    depth?: number;
+    /** Direction of the depth in degrees (0 = right, 90 = down). */
+    angle?: number;
+    /** Px per extrude layer. */
+    step?: number;
+    echoes?: number;
+    /** Gap between echoes in px. */
+    spacing?: number;
+    /** Depth falls away from the pointer, snapped to 15°. */
+    follow?: boolean;
+    /** Pressing squashes the title like a key. */
+    press?: boolean;
+    faceColor?: string;
+    /** Colours the depth steps through, front to back. */
+    colors?: string[];
+    fontSize?: number | string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function ShadowStack({ text, as: Tag, mode, depth, angle, step, echoes, spacing, follow, press, faceColor, colors, fontSize, fontFamily, className, style }: ShadowStackProps): import("react").JSX.Element;