bits-lab 0.0.0-stage → 0.1.2

package/dist/BarRace.d.ts

@@ -0,0 +1,39 @@
+import { type CSSProperties } from 'react';
+export interface RaceSeries {
+    name: string;
+    /** One value per step. */
+    values: number[];
+    /** Override the slot color. */
+    color?: string;
+}
+export interface BarRaceProps {
+    series?: RaceSeries[];
+    /** Labels for the time steps. */
+    steps?: string[];
+    title?: string;
+    subtitle?: string;
+    /** Bars shown. */
+    top?: number;
+    /** Time per step in ms. */
+    stepDuration?: number;
+    autoPlay?: boolean;
+    loop?: boolean;
+    format?: (value: number) => string;
+    rowHeight?: number;
+    nameWidth?: number;
+    colors?: string[];
+    width?: number;
+    textColor?: string;
+    mutedColor?: string;
+    dimColor?: string;
+    gridColor?: string;
+    periodColor?: string;
+    accentColor?: string;
+    onAccentColor?: string;
+    fontFamily?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const RACE_COLORS: string[];
+export default function BarRace({ series, steps, title, subtitle, top, stepDuration, autoPlay, loop, format, rowHeight, nameWidth, colors, width, textColor, mutedColor, dimColor, gridColor, periodColor, accentColor, onAccentColor, fontFamily, label, className, style }: BarRaceProps): import("react").JSX.Element;

package/dist/BarRace.js

@@ -0,0 +1,227 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useInsertionEffect, useMemo, useRef, useState } from "react";
+const STYLE_ID = "bl-bar-race";
+const CSS = `
+.bl-race { position: relative; width: 100%; max-width: var(--bl-w); color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-race__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
+.bl-race__sub { margin: 0 0 12px; color: var(--bl-muted); font-size: 13px; }
+.bl-race__plot { position: relative; height: calc(var(--bl-rows) * var(--bl-row)); margin-top: 22px; }
+.bl-race__grid { position: absolute; top: -20px; bottom: 0; left: var(--bl-name-w); right: var(--bl-value-w); pointer-events: none; }
+.bl-race__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--bl-grid); transition: left 300ms linear; }
+.bl-race__tick span { position: absolute; top: 0; left: 4px; color: var(--bl-dim); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.bl-race__bar { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; height: var(--bl-row); transform: translateY(calc(var(--rank) * var(--bl-row))); transition: transform var(--bl-swap) cubic-bezier(.3,1,.4,1), opacity 300ms; }
+.bl-race__bar[data-out] { opacity: 0; }
+.bl-race__name { flex: 0 0 var(--bl-name-w); box-sizing: border-box; padding-right: 10px; overflow: hidden; color: var(--bl-ink); font-size: 13px; font-weight: 600; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
+.bl-race__track { position: relative; flex: 1; min-width: 0; height: calc(var(--bl-row) - 8px); margin-right: var(--bl-value-w); }
+.bl-race__fill { display: block; height: 100%; width: calc(var(--frac) * 100%); min-width: 2px; border-radius: 0 4px 4px 0; background: var(--c); }
+.bl-race__value { position: absolute; top: 50%; left: calc(var(--frac) * 100% + 6px); transform: translateY(-50%); color: var(--bl-muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.bl-race__period { position: absolute; right: var(--bl-value-w); bottom: 4px; color: var(--bl-period); font-size: clamp(28px, 7vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; pointer-events: none; }
+.bl-race__controls { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
+.bl-race__play { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--bl-accent); color: var(--bl-on-accent); cursor: pointer; }
+.bl-race__play:focus-visible, .bl-race__scrub:focus-visible { outline: 2px solid var(--bl-ink); outline-offset: 2px; }
+.bl-race__scrub { flex: 1; min-width: 0; accent-color: var(--bl-accent); }
+.bl-race__now { flex: 0 0 auto; min-width: 4ch; color: var(--bl-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
+.bl-race__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .bl-race__bar, .bl-race__tick { transition: 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 RACE_COLORS = ["#3987e5", "#d95926", "#199e70", "#c98500", "#d55181", "#008300", "#9085e9", "#e66767"];
+const OVERFLOW_COLOR = "#566c86";
+const niceStep = (max) => {
+  const raw = max / 4;
+  const mag = 10 ** Math.floor(Math.log10(raw || 1));
+  const n = raw / mag;
+  return (n < 1.5 ? 1 : n < 3 ? 2 : n < 7 ? 5 : 10) * mag;
+};
+function BarRace({
+  series = [],
+  steps = [],
+  title,
+  subtitle,
+  top = 8,
+  stepDuration = 1200,
+  autoPlay = true,
+  loop = false,
+  format = (v) => Math.round(v).toLocaleString(),
+  rowHeight = 34,
+  nameWidth = 110,
+  colors = RACE_COLORS,
+  width = 720,
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  dimColor = "#566c86",
+  gridColor = "rgba(148,176,194,0.14)",
+  periodColor = "rgba(148,176,194,0.28)",
+  accentColor = "#73eff7",
+  onAccentColor = "#0b0b14",
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label = "Bar chart race",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const last = Math.max(0, steps.length - 1);
+  const [t, setT] = useState(0);
+  const tRef = useRef(0);
+  tRef.current = t;
+  const [playing, setPlaying] = useState(false);
+  const rootRef = useRef(null);
+  const visible = useRef(true);
+  const reduced = useRef(false);
+  const colorOf = useMemo(() => {
+    const map = {};
+    series.forEach((s, i) => {
+      map[s.name] = s.color ?? colors[i] ?? OVERFLOW_COLOR;
+    });
+    return map;
+  }, [series, colors]);
+  useEffect(() => {
+    reduced.current = !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (autoPlay && !reduced.current) setPlaying(true);
+    const io = new IntersectionObserver(([entry]) => {
+      visible.current = entry.isIntersecting;
+    });
+    io.observe(rootRef.current);
+    return () => io.disconnect();
+  }, [autoPlay]);
+  useEffect(() => {
+    if (!playing) return void 0;
+    let frame = 0;
+    let prev = performance.now();
+    const tick = (now) => {
+      const dt = Math.min(100, now - prev);
+      prev = now;
+      if (visible.current) {
+        let next = tRef.current + dt / stepDuration;
+        if (next >= last) {
+          if (!loop) {
+            setT(last);
+            setPlaying(false);
+            return;
+          }
+          next = 0;
+        }
+        tRef.current = next;
+        setT(next);
+      }
+      frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [playing, stepDuration, last, loop]);
+  const i0 = Math.floor(t);
+  const i1 = Math.min(last, i0 + 1);
+  const f = t - i0;
+  const rows = series.map((s) => ({ name: s.name, value: (s.values[i0] ?? 0) * (1 - f) + (s.values[i1] ?? 0) * f })).sort((a, b) => b.value - a.value);
+  const ranked = Object.fromEntries(rows.map((row, i) => [row.name, i]));
+  const shown = rows.slice(0, top);
+  const max = Math.max(1e-9, shown[0]?.value ?? 1) * 1.04;
+  const step = niceStep(max);
+  const ticks = Array.from({ length: Math.floor(max / step) + 1 }, (_, i) => i * step).filter((v) => v <= max);
+  const period = steps[Math.round(t)] ?? "";
+  const settled = steps[Math.min(last, Math.round(t))];
+  const togglePlay = () => {
+    if (!playing && t >= last) setT(0);
+    setPlaying((p) => !p);
+  };
+  return /* @__PURE__ */ jsxs(
+    "figure",
+    {
+      ref: rootRef,
+      className: `bl-race ${className}`,
+      "aria-labelledby": title ? `${uid}-title` : void 0,
+      "aria-label": title ? void 0 : label,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-row": `${rowHeight}px`,
+        "--bl-rows": Math.min(top, series.length),
+        "--bl-name-w": `${nameWidth}px`,
+        "--bl-value-w": "64px",
+        "--bl-swap": `${Math.min(600, stepDuration * 0.5)}ms`,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-dim": dimColor,
+        "--bl-grid": gridColor,
+        "--bl-period": periodColor,
+        "--bl-accent": accentColor,
+        "--bl-on-accent": onAccentColor,
+        "--bl-font": fontFamily,
+        margin: 0,
+        ...style
+      },
+      children: [
+        title && /* @__PURE__ */ jsxs("figcaption", { children: [
+          /* @__PURE__ */ jsx("p", { id: `${uid}-title`, className: "bl-race__title", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "bl-race__sub", children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-race__plot", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "bl-race__grid", children: ticks.map((v) => /* @__PURE__ */ jsx("div", { className: "bl-race__tick", style: { left: `${v / max * 100}%` }, children: /* @__PURE__ */ jsx("span", { children: format(v) }) }, v)) }),
+          series.map((s) => {
+            const rank = ranked[s.name];
+            const row = rows[rank];
+            const out = rank >= top;
+            return /* @__PURE__ */ jsxs("div", { className: "bl-race__bar", "data-out": out || void 0, style: { "--rank": Math.min(rank, top), "--c": colorOf[s.name], "--frac": out ? 0 : row.value / max }, children: [
+              /* @__PURE__ */ jsx("span", { className: "bl-race__name", children: s.name }),
+              /* @__PURE__ */ jsxs("span", { className: "bl-race__track", children: [
+                /* @__PURE__ */ jsx("span", { className: "bl-race__fill" }),
+                /* @__PURE__ */ jsx("span", { className: "bl-race__value", children: format(row.value) })
+              ] })
+            ] }, s.name);
+          }),
+          /* @__PURE__ */ jsx("span", { className: "bl-race__period", children: period })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-race__controls", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "bl-race__play", "aria-label": playing ? "Pause" : t >= last ? "Replay" : "Play", onClick: togglePlay, children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", "aria-hidden": "true", children: playing ? /* @__PURE__ */ jsx("path", { d: "M3 2h3v10H3zM8 2h3v10H8z" }) : /* @__PURE__ */ jsx("path", { d: "M3.5 1.8v10.4L12 7z" }) }) }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "bl-race__scrub",
+              type: "range",
+              min: 0,
+              max: last,
+              step: 0.01,
+              value: t,
+              "aria-label": "Time",
+              "aria-valuetext": String(settled ?? ""),
+              onChange: (event) => {
+                setPlaying(false);
+                setT(Number(event.target.value));
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "bl-race__now", "aria-hidden": "true", children: period })
+        ] }),
+        /* @__PURE__ */ jsxs("table", { className: "bl-race__sr", children: [
+          /* @__PURE__ */ jsxs("caption", { children: [
+            title ?? label,
+            ", ",
+            settled
+          ] }),
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Rank" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Name" }),
+            /* @__PURE__ */ jsx("th", { scope: "col", children: "Value" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: series.map((s) => ({ name: s.name, value: s.values[Math.min(last, Math.round(t))] ?? 0 })).sort((a, b) => b.value - a.value).slice(0, top).map((row, i) => /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("td", { children: i + 1 }),
+            /* @__PURE__ */ jsx("th", { scope: "row", children: row.name }),
+            /* @__PURE__ */ jsx("td", { children: format(row.value) })
+          ] }, row.name)) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  RACE_COLORS,
+  BarRace as default
+};

package/dist/BentoGrid.d.ts

@@ -0,0 +1,50 @@
+import { type CSSProperties, type ReactNode, type MouseEvent } from 'react';
+export interface BentoCardProps {
+    /** Columns the card covers. */
+    colSpan?: number;
+    /** Rows the card covers. */
+    rowSpan?: number;
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    /** Image or video behind the content; it fades into the card color. */
+    background?: ReactNode;
+    /** Call-to-action text revealed on hover or focus (links and buttons only). */
+    cta?: string;
+    /** Makes the card a link. */
+    href?: string;
+    /** Makes the card a button. */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function BentoCard({ colSpan, rowSpan, title, description, icon, background, cta, href, onClick, children, className, style }: BentoCardProps): import("react").JSX.Element;
+export interface BentoGridProps {
+    /** BentoCard elements, in reading order. */
+    children?: ReactNode;
+    /** Columns at full width (collapses to 2 under 860px and 1 under 560px of container width). */
+    columns?: number;
+    /** Row height, in px. */
+    rowHeight?: number;
+    gap?: number;
+    radius?: number;
+    cardColor?: string;
+    lineColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    accentColor?: string;
+    chipColor?: string;
+    /** Cursor-following border light. */
+    spotlightColor?: string;
+    /** Soft fill behind the spotlight. */
+    washColor?: string;
+    /** Spotlight radius, in px. */
+    spotlightSize?: number;
+    titleSize?: number;
+    fontFamily?: string;
+    bodyFontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function BentoGrid({ children, columns, rowHeight, gap, radius, cardColor, lineColor, textColor, mutedColor, accentColor, chipColor, spotlightColor, washColor, spotlightSize, titleSize, fontFamily, bodyFontFamily, className, style }: BentoGridProps): import("react").JSX.Element;

package/dist/BentoGrid.js

@@ -0,0 +1,145 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInsertionEffect, useRef } from "react";
+const STYLE_ID = "bl-bento";
+const CSS = `
+.bl-bento-wrap { container-type: inline-size; width: 100%; }
+.bl-bento { display: grid; grid-template-columns: repeat(var(--bl-cols), minmax(0, 1fr)); grid-auto-rows: var(--bl-row); gap: var(--bl-gap); }
+.bl-bento__card { --bl-mx: -999px; --bl-my: -999px; position: relative; grid-column: span var(--bl-cs, 1); grid-row: span var(--bl-rs, 1); display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; overflow: hidden; padding: 22px; border-radius: var(--bl-radius); background: var(--bl-card); color: var(--bl-ink); isolation: isolate; text-decoration: none; outline: none; box-shadow: inset 0 0 0 1px var(--bl-line); transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
+.bl-bento__card::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; background: radial-gradient(var(--bl-spot-size) circle at var(--bl-mx) var(--bl-my), var(--bl-spot), transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
+.bl-bento__card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(calc(var(--bl-spot-size) * 1.4) circle at var(--bl-mx) var(--bl-my), var(--bl-wash), transparent 55%); }
+.bl-bento__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
+.bl-bento__bg > img, .bl-bento__bg > video { width: 100%; height: 100%; object-fit: cover; }
+.bl-bento__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--bl-card) 8%, transparent 70%); }
+.bl-bento__body { position: relative; transform: translateY(var(--bl-lift)); transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
+.bl-bento__icon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 10px; background: var(--bl-chip); color: var(--bl-accent); }
+.bl-bento__title { margin: 0 0 6px; font: 700 var(--bl-title-size)/1.2 var(--bl-font); }
+.bl-bento__desc { margin: 0; color: var(--bl-muted); font: 400 14px/1.5 var(--bl-font-body); }
+.bl-bento__cta { position: absolute; left: 0; top: 100%; display: inline-flex; align-items: center; gap: 6px; padding-top: 12px; color: var(--bl-accent); font: 600 13px/1 var(--bl-font-body); opacity: 0; transition: opacity 220ms; }
+.bl-bento__card[data-cta] { --bl-lift: 0px; }
+.bl-bento__card[data-cta]:hover, .bl-bento__card[data-cta]:focus-within, .bl-bento__card[data-cta]:focus-visible { --bl-lift: -30px; }
+.bl-bento__card[data-cta]:hover .bl-bento__cta, .bl-bento__card[data-cta]:focus-within .bl-bento__cta, .bl-bento__card[data-cta]:focus-visible .bl-bento__cta { opacity: 1; }
+.bl-bento__card:focus-visible { box-shadow: inset 0 0 0 2px var(--bl-accent); }
+a.bl-bento__card:hover { transform: translateY(-2px); }
+@container (max-width: 860px) {
+  .bl-bento { grid-template-columns: repeat(min(var(--bl-cols), 2), minmax(0, 1fr)); }
+  .bl-bento__card { grid-column: span min(var(--bl-cs, 1), 2); }
+}
+@container (max-width: 560px) {
+  .bl-bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(var(--bl-row), auto); }
+  .bl-bento__card { grid-column: span 1; grid-row: span 1; }
+  .bl-bento__card[data-cta] { --bl-lift: -30px; }
+  .bl-bento__card[data-cta] .bl-bento__cta { opacity: 1; }
+}
+@media (hover: none) {
+  .bl-bento__card[data-cta] { --bl-lift: -30px; }
+  .bl-bento__card[data-cta] .bl-bento__cta { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) { .bl-bento__card, .bl-bento__body { transition: 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 BentoCard({ colSpan = 1, rowSpan = 1, title, description, icon, background, cta = "Learn more", href, onClick, children, className = "", style }) {
+  const Tag = href ? "a" : onClick ? "button" : "div";
+  const interactive = Boolean(href || onClick);
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      className: `bl-bento__card ${className}`,
+      "data-cta": interactive && cta ? "" : void 0,
+      href,
+      onClick,
+      type: Tag === "button" ? "button" : void 0,
+      tabIndex: Tag === "div" ? void 0 : 0,
+      style: { "--bl-cs": colSpan, "--bl-rs": rowSpan, textAlign: "left", border: 0, cursor: interactive ? "pointer" : void 0, ...style },
+      children: [
+        background && /* @__PURE__ */ jsx("div", { className: "bl-bento__bg", "aria-hidden": "true", children: background }),
+        /* @__PURE__ */ jsxs("div", { className: "bl-bento__body", children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "bl-bento__icon", "aria-hidden": "true", children: icon }),
+          title && /* @__PURE__ */ jsx("h3", { className: "bl-bento__title", children: title }),
+          description && /* @__PURE__ */ jsx("p", { className: "bl-bento__desc", children: description }),
+          children,
+          interactive && cta && /* @__PURE__ */ jsxs("span", { className: "bl-bento__cta", "aria-hidden": "true", children: [
+            cta,
+            " \u2192"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function BentoGrid({
+  children,
+  columns = 3,
+  rowHeight = 200,
+  gap = 14,
+  radius = 18,
+  cardColor = "#1a1c2c",
+  lineColor = "rgba(255,255,255,0.08)",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  accentColor = "#73eff7",
+  chipColor = "rgba(115,239,247,0.12)",
+  spotlightColor = "rgba(115,239,247,0.85)",
+  washColor = "rgba(115,239,247,0.08)",
+  spotlightSize = 320,
+  titleSize = 18,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  bodyFontFamily,
+  className = "",
+  style
+}) {
+  useStyles();
+  const ref = useRef(null);
+  const onPointerMove = (event) => {
+    for (const card of ref.current.children) {
+      const rect = card.getBoundingClientRect();
+      card.style.setProperty("--bl-mx", `${event.clientX - rect.left}px`);
+      card.style.setProperty("--bl-my", `${event.clientY - rect.top}px`);
+    }
+  };
+  const onPointerLeave = () => {
+    for (const card of ref.current.children) {
+      card.style.setProperty("--bl-mx", "-999px");
+      card.style.setProperty("--bl-my", "-999px");
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: `bl-bento-wrap ${className}`, style, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "bl-bento",
+      onPointerMove,
+      onPointerLeave,
+      style: {
+        "--bl-cols": columns,
+        "--bl-row": `${rowHeight}px`,
+        "--bl-gap": `${gap}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-card": cardColor,
+        "--bl-line": lineColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-accent": accentColor,
+        "--bl-chip": chipColor,
+        "--bl-spot": spotlightColor,
+        "--bl-wash": washColor,
+        "--bl-spot-size": `${spotlightSize}px`,
+        "--bl-title-size": `${titleSize}px`,
+        "--bl-font": fontFamily,
+        "--bl-font-body": bodyFontFamily ?? fontFamily
+      },
+      children
+    }
+  ) });
+}
+export {
+  BentoCard,
+  BentoGrid as default
+};

package/dist/BootSequence.d.ts

@@ -0,0 +1,48 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type BootStatus = 'ok' | 'warn' | 'fail';
+export interface BootLineObject {
+    text: string;
+    /** Tag shown at the end of the line. */
+    status?: BootStatus;
+    /** A number that ticks up after the text (e.g. memory). */
+    count?: number;
+    unit?: string;
+    /** Pause after this line in ms (overrides lineDelay). */
+    delay?: number;
+}
+export type BootLine = string | BootLineObject;
+export interface BootSequenceProps {
+    /** Lines shown immediately at the top. */
+    header?: string[];
+    lines?: BootLine[];
+    /** Characters per second. */
+    speed?: number;
+    lineDelay?: number;
+    countDuration?: number;
+    /** Pause on the finished screen before the reveal, in ms. */
+    holdAfter?: number;
+    /** Click or any key (outside text fields) skips. */
+    skippable?: boolean;
+    beep?: boolean;
+    /** Change to boot again. */
+    replayKey?: string | number;
+    onComplete?: () => void;
+    /** Revealed with a CRT power-on when the boot finishes. */
+    children?: ReactNode;
+    minHeight?: number;
+    fontSize?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    accentColor?: string;
+    okColor?: string;
+    warnColor?: string;
+    failColor?: string;
+    mutedColor?: string;
+    scanlines?: boolean;
+    hint?: string;
+    label?: string;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function BootSequence({ header, lines, speed, lineDelay, countDuration, holdAfter, skippable, beep, replayKey, onComplete, children, minHeight, fontSize, backgroundColor, textColor, accentColor, okColor, warnColor, failColor, mutedColor, scanlines, hint, label, fontFamily, className, style }: BootSequenceProps): import("react").JSX.Element;