bits-lab 0.0.0-stage → 0.1.0

package/dist/PixelLoader.js

@@ -0,0 +1,142 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-pixel-loader";
+const CSS = `
+.bl-loader { display: grid; justify-items: center; gap: 18px; width: min(var(--bl-width), 100%); color: var(--bl-text); font-family: var(--bl-font, "Press Start 2P", ui-monospace, monospace); text-transform: uppercase; }
+.bl-loader__title { display: flex; align-items: center; gap: 14px; font-size: 14px; }
+.bl-loader__spinner { position: relative; width: 24px; height: 24px; animation: bl-loader-spin 0.8s steps(8) infinite; }
+.bl-loader__spinner i { position: absolute; left: 10px; top: 0; width: 4px; height: 4px; background: var(--bl-accent); transform-origin: 2px 12px; }
+.bl-loader__bar { display: grid; grid-template-columns: repeat(var(--bl-chunks), 1fr); gap: 3px; width: 100%; padding: 6px; background: #0b0b14; box-shadow: 0 0 0 3px var(--bl-frame); }
+.bl-loader__chunk { height: 18px; background: #1a1c2c; }
+.bl-loader__chunk[data-on] { background: var(--bl-accent); box-shadow: inset 0 -5px 0 0 rgba(0, 0, 0, 0.22), inset 0 4px 0 0 rgba(255, 255, 255, 0.25); }
+.bl-loader__chunk[data-new] { animation: bl-loader-pop 160ms steps(2); }
+.bl-loader__meta { display: flex; justify-content: space-between; width: 100%; font-size: 9px; color: var(--bl-muted); }
+.bl-loader__tip { min-height: 3em; max-width: 46ch; font-family: var(--bl-tip-font, ui-monospace, monospace); font-size: 14px; line-height: 1.5; text-transform: none; text-align: center; color: var(--bl-muted); }
+.bl-loader[data-done] .bl-loader__title { animation: bl-loader-flash 120ms steps(1) 6; color: var(--bl-accent); }
+@keyframes bl-loader-spin { to { transform: rotate(360deg); } }
+@keyframes bl-loader-pop { 50% { filter: brightness(1.8); transform: scaleY(1.2); } }
+@keyframes bl-loader-flash { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-loader__spinner, .bl-loader__chunk[data-new], .bl-loader[data-done] .bl-loader__title { 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 DEFAULT_TIPS = [
+  "Tip: torches keep the dark at bay.",
+  "Tip: you can stack up to 64 blocks in one slot.",
+  "Tip: save before you cross the lava.",
+  "Tip: night falls faster in the desert."
+];
+function PixelLoader({
+  progress,
+  label = "Loading",
+  doneLabel = "Complete!",
+  tips = DEFAULT_TIPS,
+  tipInterval = 3200,
+  chunks = 20,
+  width = 440,
+  accentColor = "#a7f070",
+  frameColor = "#566c86",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  simulateDuration = 6e3,
+  loop = true,
+  showPercent = true,
+  fontFamily,
+  onComplete,
+  className = "",
+  style
+}) {
+  useStyles();
+  const controlled = typeof progress === "number";
+  const [simulated, setSimulated] = useState(0);
+  const [tipIndex, setTipIndex] = useState(0);
+  const lastChunks = useRef(0);
+  const value = Math.min(100, Math.max(0, controlled ? progress : simulated));
+  const done = value >= 100;
+  useEffect(() => {
+    if (controlled) return void 0;
+    let timer;
+    const tick = () => {
+      setSimulated((current) => current >= 100 ? 100 : Math.min(100, current + Math.random() * (1600 / simulateDuration) * 12));
+      timer = setTimeout(tick, 120 + Math.random() * 260);
+    };
+    timer = setTimeout(tick, 300);
+    return () => clearTimeout(timer);
+  }, [controlled, simulateDuration]);
+  useEffect(() => {
+    if (controlled || !loop || !done) return void 0;
+    const timer = setTimeout(() => setSimulated(0), 1800);
+    return () => clearTimeout(timer);
+  }, [controlled, loop, done]);
+  useEffect(() => {
+    if (done) onComplete?.();
+  }, [done, onComplete]);
+  useEffect(() => {
+    if (tips.length < 2) return void 0;
+    const timer = setInterval(() => setTipIndex((index) => (index + 1) % tips.length), tipInterval);
+    return () => clearInterval(timer);
+  }, [tips.length, tipInterval]);
+  const filled = Math.round(value / 100 * chunks);
+  const previous = lastChunks.current;
+  lastChunks.current = filled;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-loader ${className}`,
+      "data-done": done || void 0,
+      style: {
+        "--bl-width": `${width}px`,
+        "--bl-accent": accentColor,
+        "--bl-frame": frameColor,
+        "--bl-text": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-chunks": chunks,
+        ...fontFamily ? { "--bl-font": fontFamily } : null,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-loader__title", "aria-hidden": "true", children: [
+          !done && /* @__PURE__ */ jsx("span", { className: "bl-loader__spinner", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx("i", { style: { transform: `rotate(${i * 45}deg)`, opacity: 0.25 + i / 8 * 0.75 } }, i)) }),
+          /* @__PURE__ */ jsx("span", { children: done ? doneLabel : `${label}\u2026` })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bl-loader__bar",
+            role: "progressbar",
+            "aria-label": label,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": Math.round(value),
+            children: Array.from({ length: chunks }, (_, i) => /* @__PURE__ */ jsx("span", { className: "bl-loader__chunk", "data-on": i < filled || void 0, "data-new": i < filled && i >= previous || void 0 }, i))
+          }
+        ),
+        showPercent && /* @__PURE__ */ jsxs("div", { className: "bl-loader__meta", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            Math.round(value),
+            "%"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            filled,
+            "/",
+            chunks,
+            " chunks"
+          ] })
+        ] }),
+        tips.length > 0 && /* @__PURE__ */ jsx("p", { className: "bl-loader__tip", "aria-live": "polite", children: tips[tipIndex % tips.length] })
+      ]
+    }
+  );
+}
+export {
+  PixelLoader as default
+};

package/dist/PixelParallax.d.ts

@@ -0,0 +1,41 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface ParallaxLayer {
+    /** Horizontally tiling image, drawn at the layer's full height. */
+    src?: string;
+    /** 0 stays fixed, 1 moves the most. Defaults to the layer's position in the list. */
+    depth?: number;
+    /** Distance from the bottom (px or any CSS length). */
+    bottom?: number | string;
+    /** Layer height (px or any CSS length); defaults to the full scene. */
+    height?: number | string;
+    opacity?: number;
+    /** Custom content that moves with the layer. */
+    node?: ReactNode;
+}
+export interface PixelParallaxProps {
+    /** Back to front. */
+    layers?: ParallaxLayer[];
+    /** Scene height, in px. */
+    height?: number;
+    /** Pan forever, follow the pointer, or move with the page scroll. */
+    mode?: 'auto' | 'mouse' | 'scroll';
+    /** Auto mode speed, in px per second for depth 1. */
+    speed?: number;
+    /** Mouse and scroll mode range, in px. */
+    intensity?: number;
+    /** Offsets snap to multiples of this, keeping pixel art crisp. */
+    pixelSize?: number;
+    /** Custom sky background (any CSS background). */
+    sky?: string;
+    /** Cycle the sky and a color tint through day, dusk and night. */
+    dayNight?: boolean;
+    /** Length of a full day, in seconds. */
+    cycleDuration?: number;
+    /** Accessible description of the scene. */
+    label?: string;
+    /** Centered content over the scene. */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PixelParallax({ layers, height, mode, speed, intensity, pixelSize, sky, dayNight, cycleDuration, label, children, className, style }: PixelParallaxProps): import("react").JSX.Element;

package/dist/PixelParallax.js

@@ -0,0 +1,151 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+const SKY = {
+  day: ["#41a6f6", "#73eff7"],
+  dusk: ["#5d275d", "#ef7d57"],
+  night: ["#0b0b14", "#29366f"]
+};
+const TINT = { day: "rgba(0,0,0,0)", dusk: "rgba(177,62,83,0.28)", night: "rgba(11,11,40,0.55)" };
+const lerp = (a, b, t) => a + (b - a) * t;
+const hexToRgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+const mixHex = (a, b, t) => `rgb(${hexToRgb(a).map((v, i) => Math.round(lerp(v, hexToRgb(b)[i], t))).join(",")})`;
+const parseRgba = (value) => value.match(/[\d.]+/g).map(Number);
+const mixRgba = (a, b, t) => {
+  const [r1, g1, b1, a1] = parseRgba(a);
+  const [r2, g2, b2, a2] = parseRgba(b);
+  return `rgba(${Math.round(lerp(r1, r2, t))},${Math.round(lerp(g1, g2, t))},${Math.round(lerp(b1, b2, t))},${lerp(a1, a2, t).toFixed(3)})`;
+};
+function phaseAt(t) {
+  const p = (t % 1 + 1) % 1 * 4;
+  const stops = ["day", "dusk", "night", "dusk", "day"];
+  const i = Math.floor(p);
+  return { from: stops[i], to: stops[i + 1], t: p - i };
+}
+function PixelParallax({
+  layers = [],
+  height = 360,
+  mode = "auto",
+  speed = 40,
+  intensity = 60,
+  pixelSize = 4,
+  sky,
+  dayNight = false,
+  cycleDuration = 24,
+  label = "Pixel landscape",
+  children,
+  className = "",
+  style
+}) {
+  const rootRef = useRef(null);
+  const layerRefs = useRef([]);
+  const skyRef = useRef(null);
+  const tintRef = useRef(null);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return void 0;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const pointer = { x: 0.5, y: 0.5, tx: 0.5, ty: 0.5 };
+    let visible = true;
+    const observer = new IntersectionObserver(([entry]) => {
+      visible = entry.isIntersecting;
+    });
+    observer.observe(root);
+    const onMove = (event) => {
+      const rect = root.getBoundingClientRect();
+      pointer.tx = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
+      pointer.ty = Math.min(1, Math.max(0, (event.clientY - rect.top) / rect.height));
+    };
+    if (mode === "mouse") window.addEventListener("pointermove", onMove);
+    const snap = (value) => Math.round(value / pixelSize) * pixelSize;
+    let frame = 0;
+    const start = performance.now();
+    const render = (now) => {
+      const elapsed = (now - start) / 1e3;
+      if (visible) {
+        pointer.x += (pointer.tx - pointer.x) * 0.08;
+        pointer.y += (pointer.ty - pointer.y) * 0.08;
+        const rect = root.getBoundingClientRect();
+        const scrollProgress = (window.innerHeight - rect.top) / (window.innerHeight + rect.height) - 0.5;
+        layers.forEach((layer, index) => {
+          const el = layerRefs.current[index];
+          if (!el) return;
+          const depth = layer.depth ?? index / Math.max(1, layers.length - 1);
+          let x = 0;
+          let y = 0;
+          if (!reduced) {
+            if (mode === "auto") x = -elapsed * speed * depth;
+            if (mode === "mouse") {
+              x = (0.5 - pointer.x) * intensity * depth;
+              y = (0.5 - pointer.y) * intensity * 0.25 * depth;
+            }
+            if (mode === "scroll") y = scrollProgress * intensity * 2 * depth;
+          }
+          el.style.backgroundPosition = `${snap(x)}px ${snap(y)}px`;
+          if (layer.node) el.style.transform = `translate(${snap(x)}px, ${snap(y)}px)`;
+        });
+        if (dayNight && skyRef.current && tintRef.current) {
+          const { from, to, t } = phaseAt(reduced ? 0 : elapsed / cycleDuration);
+          skyRef.current.style.background = `linear-gradient(to bottom, ${mixHex(SKY[from][0], SKY[to][0], t)}, ${mixHex(SKY[from][1], SKY[to][1], t)})`;
+          tintRef.current.style.background = mixRgba(TINT[from], TINT[to], t);
+        }
+      }
+      frame = requestAnimationFrame(render);
+    };
+    frame = requestAnimationFrame(render);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer.disconnect();
+      window.removeEventListener("pointermove", onMove);
+    };
+  }, [layers, mode, speed, intensity, pixelSize, dayNight, cycleDuration]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      role: "img",
+      "aria-label": label,
+      className,
+      style: { position: "relative", width: "100%", height, overflow: "hidden", imageRendering: "pixelated", ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: skyRef,
+            "aria-hidden": "true",
+            style: { position: "absolute", inset: 0, background: sky ?? `linear-gradient(to bottom, ${SKY.day[0]}, ${SKY.day[1]})` }
+          }
+        ),
+        layers.map((layer, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              layerRefs.current[index] = el;
+            },
+            "aria-hidden": "true",
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: layer.bottom ?? 0,
+              height: layer.height ?? "100%",
+              backgroundImage: layer.src ? `url(${layer.src})` : void 0,
+              backgroundRepeat: "repeat-x",
+              backgroundSize: "auto 100%",
+              backgroundPosition: "0 0",
+              imageRendering: "pixelated",
+              opacity: layer.opacity ?? 1
+            },
+            children: layer.node
+          },
+          index
+        )),
+        dayNight && /* @__PURE__ */ jsx("div", { ref: tintRef, "aria-hidden": "true", style: { position: "absolute", inset: 0, mixBlendMode: "multiply", pointerEvents: "none" } }),
+        children && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "grid", placeItems: "center" }, children })
+      ]
+    }
+  );
+}
+export {
+  PixelParallax as default
+};

package/dist/PixelSpinners.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties } from 'react';
+export interface PixelSpinnersProps {
+    type?: 'blocks' | 'bar' | 'dots' | 'hourglass' | 'orbit';
+    /** Announced to screen readers (and shown with showLabel). */
+    label?: string;
+    showLabel?: boolean;
+    /** Pixel size. */
+    cell?: number;
+    gap?: number;
+    /** Seconds per cycle. */
+    speed?: number;
+    /** Lit pixels. */
+    color?: string;
+    /** Unlit pixels. */
+    dimColor?: string;
+    mutedColor?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PixelSpinners({ type, label, showLabel, cell, gap, speed, color, dimColor, mutedColor, fontFamily, className, style }: PixelSpinnersProps): import("react").JSX.Element;

package/dist/PixelSpinners.js

@@ -0,0 +1,110 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect } from "react";
+const STYLE_ID = "bl-pixel-spinners";
+const CSS = `
+.bl-spin { display: inline-grid; gap: 8px; justify-items: center; color: var(--bl-on); font-family: var(--bl-font); font-size: 12px; }
+.bl-spin__art { position: relative; display: grid; gap: var(--bl-gap); }
+.bl-spin__px { width: var(--bl-cell); height: var(--bl-cell); background: var(--bl-off); }
+.bl-spin__label { color: var(--bl-muted); }
+.bl-spin__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+
+/* blocks: a 3\xD73 grid, the ring of eight lights up in turn */
+.bl-spin[data-type="blocks"] .bl-spin__art { grid-template-columns: repeat(3, var(--bl-cell)); }
+.bl-spin[data-type="blocks"] .bl-spin__px[data-ring] { animation: bl-spin-chase var(--bl-speed) steps(1) infinite; animation-delay: calc(var(--i) * var(--bl-speed) / 8 - var(--bl-speed)); }
+
+/* bar: a row of eight, the bright one bounces */
+.bl-spin[data-type="bar"] .bl-spin__art { grid-auto-flow: column; }
+.bl-spin__runner { position: absolute; top: 0; left: 0; width: var(--bl-cell); height: var(--bl-cell); background: var(--bl-on); animation: bl-spin-run calc(var(--bl-speed) / 2) steps(7) infinite alternate; }
+
+/* dots: three hop in turn */
+.bl-spin[data-type="dots"] .bl-spin__art { grid-auto-flow: column; align-items: end; height: calc(var(--bl-cell) * 3); }
+.bl-spin[data-type="dots"] .bl-spin__px { background: var(--bl-on); animation: bl-spin-hop var(--bl-speed) steps(4) infinite; animation-delay: calc(var(--i) * var(--bl-speed) / 6); }
+
+/* hourglass: drains top to bottom, then flips */
+.bl-spin[data-type="hourglass"] .bl-spin__art { animation: bl-spin-flip var(--bl-speed) steps(1) infinite; }
+.bl-spin[data-type="hourglass"] svg { display: block; width: calc(var(--bl-cell) * 7); height: calc(var(--bl-cell) * 9); shape-rendering: crispEdges; }
+.bl-spin__glass { fill: var(--bl-off); }
+.bl-spin__sand-top { fill: var(--bl-on); animation: bl-spin-drain var(--bl-speed) steps(4) infinite; transform-origin: 50% 44%; }
+.bl-spin__sand-bottom { fill: var(--bl-on); animation: bl-spin-fill var(--bl-speed) steps(4) infinite; transform-origin: 50% 100%; }
+
+/* orbit: four pixels round a centre */
+.bl-spin[data-type="orbit"] .bl-spin__art { width: calc(var(--bl-cell) * 5); height: calc(var(--bl-cell) * 5); animation: bl-spin-turn var(--bl-speed) steps(8) infinite; }
+.bl-spin[data-type="orbit"] .bl-spin__px { position: absolute; background: var(--bl-on); }
+.bl-spin[data-type="orbit"] .bl-spin__px:nth-child(1) { left: calc(var(--bl-cell) * 2); top: 0; }
+.bl-spin[data-type="orbit"] .bl-spin__px:nth-child(2) { right: 0; top: calc(var(--bl-cell) * 2); opacity: 0.75; }
+.bl-spin[data-type="orbit"] .bl-spin__px:nth-child(3) { left: calc(var(--bl-cell) * 2); bottom: 0; opacity: 0.5; }
+.bl-spin[data-type="orbit"] .bl-spin__px:nth-child(4) { left: 0; top: calc(var(--bl-cell) * 2); opacity: 0.25; }
+
+@keyframes bl-spin-chase { 0%, 12% { background: var(--bl-on); } 13%, 100% { background: var(--bl-off); } }
+@keyframes bl-spin-run { to { transform: translateX(calc((var(--bl-cell) + var(--bl-gap)) * 7)); } }
+@keyframes bl-spin-hop { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(calc(var(--bl-cell) * -2)); } }
+@keyframes bl-spin-drain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
+@keyframes bl-spin-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
+@keyframes bl-spin-flip { 0%, 92% { transform: none; } 93%, 100% { transform: rotate(180deg); } }
+@keyframes bl-spin-turn { to { transform: rotate(360deg); } }
+@keyframes bl-spin-glow { 50% { opacity: 0.45; } }
+@media (prefers-reduced-motion: reduce) { .bl-spin .bl-spin__art, .bl-spin .bl-spin__px, .bl-spin .bl-spin__sand-top, .bl-spin .bl-spin__sand-bottom { animation: none !important; } .bl-spin .bl-spin__runner { animation: none !important; } .bl-spin .bl-spin__art { animation: bl-spin-glow 2.4s ease-in-out infinite !important; } }
+`;
+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 RING = [0, 1, 2, 5, 8, 7, 6, 3];
+function Art({ type }) {
+  if (type === "blocks") {
+    return Array.from({ length: 9 }, (_, cell) => {
+      const i = RING.indexOf(cell);
+      return /* @__PURE__ */ jsx("span", { className: "bl-spin__px", "data-ring": i >= 0 || void 0, style: { "--i": i } }, cell);
+    });
+  }
+  if (type === "bar") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx("span", { className: "bl-spin__px" }, i)),
+      /* @__PURE__ */ jsx("span", { className: "bl-spin__runner" })
+    ] });
+  }
+  if (type === "dots") return Array.from({ length: 3 }, (_, i) => /* @__PURE__ */ jsx("span", { className: "bl-spin__px", style: { "--i": i } }, i));
+  if (type === "orbit") return Array.from({ length: 4 }, (_, i) => /* @__PURE__ */ jsx("span", { className: "bl-spin__px" }, i));
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 7 9", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { className: "bl-spin__glass", d: "M0 0h7v1h-1v2h-1v1h-1v1h1v1h1v2h1v1H0V8h1V6h1V5h1V4H2V3H1V1H0z" }),
+    /* @__PURE__ */ jsx("rect", { className: "bl-spin__sand-top", x: "2", y: "1", width: "3", height: "3" }),
+    /* @__PURE__ */ jsx("rect", { className: "bl-spin__sand-bottom", x: "1", y: "6", width: "5", height: "2" })
+  ] });
+}
+function PixelSpinners({
+  type = "blocks",
+  label = "Loading",
+  showLabel = false,
+  cell = 6,
+  gap = 2,
+  speed = 1.2,
+  color = "#73eff7",
+  dimColor = "#333c57",
+  mutedColor = "#94b0c2",
+  fontFamily = "inherit",
+  className = "",
+  style
+}) {
+  useStyles();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: `bl-spin ${className}`,
+      role: "status",
+      "data-type": type,
+      style: { "--bl-cell": `${cell}px`, "--bl-gap": `${gap}px`, "--bl-speed": `${speed}s`, "--bl-on": color, "--bl-off": dimColor, "--bl-muted": mutedColor, "--bl-font": fontFamily, ...style },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-spin__art", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Art, { type }) }),
+        showLabel ? /* @__PURE__ */ jsx("span", { className: "bl-spin__label", children: label }) : /* @__PURE__ */ jsx("span", { className: "bl-spin__sr", children: label })
+      ]
+    }
+  );
+}
+export {
+  PixelSpinners as default
+};

package/dist/PixelType.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties } from 'react';
+export interface PixelTypeProps {
+    text?: string;
+    /** Fly in once, or hold, crumble and rebuild on a loop. */
+    effect?: 'assemble' | 'crumble';
+    /** Block size in px. */
+    pixelSize?: number;
+    gap?: number;
+    /** CSS font family the text is rasterised with. */
+    font?: string;
+    /** How many pixel rows tall the text is rasterised. */
+    rows?: number;
+    /** Colour bands from top to bottom. */
+    colors?: string[];
+    /** How far the pointer scatters blocks, in px. */
+    repel?: number;
+    stiffness?: number;
+    damping?: number;
+    /** Crumble: how long the word holds, in ms. */
+    hold?: number;
+    trigger?: 'view' | 'mount';
+    align?: 'center' | 'start' | 'end';
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PixelType({ text, effect, pixelSize, gap, font, rows, colors, repel, stiffness, damping, hold, trigger, align, className, style }: PixelTypeProps): import("react").JSX.Element;