bits-lab 0.0.0-stage → 0.1.2

package/dist/Polaroids.js

@@ -0,0 +1,293 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-polaroids";
+const CSS = `
+.bl-pola { position: relative; display: grid; gap: 10px; width: 100%; font-family: var(--bl-font); }
+.bl-pola__table { position: relative; width: 100%; height: var(--bl-h); overflow: hidden; border-radius: var(--bl-radius); background: var(--bl-bg); box-shadow: inset 0 0 0 2px var(--bl-line); touch-action: none; }
+.bl-pola__photo { position: absolute; top: 0; left: 0; box-sizing: border-box; width: var(--bl-pw); margin: 0; padding: var(--bl-frame) var(--bl-frame) 0; border: 0; background: var(--bl-paper); color: var(--bl-ink); font: inherit; text-align: center; cursor: grab; touch-action: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.4)); transition: filter 200ms; outline: none; will-change: transform; }
+.bl-pola__photo[data-held] { cursor: grabbing; filter: drop-shadow(0 22px 18px rgba(0,0,0,0.5)); }
+.bl-pola__photo[data-flying] { filter: drop-shadow(0 14px 12px rgba(0,0,0,0.45)); }
+.bl-pola__photo:focus-visible { box-shadow: 0 0 0 3px var(--bl-accent); }
+.bl-pola__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #0b0b14; pointer-events: none; user-select: none; }
+.bl-pola__caption { display: block; overflow: hidden; height: var(--bl-caption); line-height: var(--bl-caption); font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
+.bl-pola__bar { display: flex; justify-content: center; gap: 8px; }
+.bl-pola__btn { padding: 7px 14px; border: 0; border-radius: 8px; background: var(--bl-btn); color: var(--bl-btn-ink); font: inherit; font-size: 14px; cursor: pointer; }
+.bl-pola__btn:hover { filter: brightness(1.15); }
+.bl-pola__btn:focus-visible { outline: 2px solid var(--bl-accent); outline-offset: 2px; }
+.bl-pola__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+function useStyles() {
+  useInsertionEffect(() => {
+    if (typeof document === "undefined") return;
+    const style = document.getElementById(STYLE_ID) ?? Object.assign(document.createElement("style"), { id: STYLE_ID });
+    style.textContent = CSS;
+    if (!style.isConnected) document.head.appendChild(style);
+  }, []);
+}
+const jitter = (i, salt) => {
+  const x = Math.sin((i + 1) * 12.9898 + salt * 78.233) * 43758.5453;
+  return x - Math.floor(x) - 0.5;
+};
+function Polaroids({
+  photos = [],
+  height = 440,
+  photoWidth = 160,
+  frame = 10,
+  captionHeight = 34,
+  friction = 3.2,
+  bounce = 0.45,
+  spin = 1,
+  showControls = true,
+  scatterLabel = "Scatter",
+  tidyLabel = "Tidy up",
+  label = "Photo pile",
+  radius = 16,
+  backgroundColor = "#5d275d",
+  paperColor = "#f4f4f4",
+  textColor = "#1a1c2c",
+  lineColor = "rgba(0,0,0,0.25)",
+  accentColor = "#73eff7",
+  buttonColor = "#333c57",
+  buttonTextColor = "#f4f4f4",
+  fontFamily = '"Pixelify Sans", ui-sans-serif, system-ui, sans-serif',
+  className = "",
+  style
+}) {
+  useStyles();
+  const tableRef = useRef(null);
+  const nodes = useRef([]);
+  const api = useRef(null);
+  const [order, setOrder] = useState(() => photos.map((_, i) => i));
+  const [announce, setAnnounce] = useState("");
+  const name = (i) => photos[i]?.caption || photos[i]?.alt || `Photo ${i + 1}`;
+  const raise = (i) => setOrder((list) => [...list.filter((j) => j !== i), i]);
+  useEffect(() => {
+    setOrder((list) => {
+      const kept = list.filter((i) => i < photos.length);
+      return [...kept, ...photos.map((_, i) => i).filter((i) => !kept.includes(i))];
+    });
+  }, [photos.length]);
+  useEffect(() => {
+    const table = tableRef.current;
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    const count = photos.length;
+    let W = table.clientWidth;
+    let H = table.clientHeight;
+    const size = (i) => ({ w: nodes.current[i]?.offsetWidth || photoWidth, h: nodes.current[i]?.offsetHeight || photoWidth + captionHeight });
+    const bodies = Array.from({ length: count }, (_, i) => {
+      const { w, h } = size(i);
+      return { x: W / 2 - w / 2 + jitter(i, 1) * W * 0.35, y: H / 2 - h / 2 + jitter(i, 2) * H * 0.3, r: jitter(i, 3) * 30, vx: 0, vy: 0, vr: 0, held: false };
+    });
+    let raf = 0;
+    let last = 0;
+    const clamp = (i) => {
+      const b = bodies[i];
+      const { w, h } = size(i);
+      let hit = false;
+      if (b.x < 0 || b.x > W - w) {
+        b.x = Math.max(0, Math.min(W - w, b.x));
+        b.vx = -b.vx * bounce;
+        b.vr *= 0.7;
+        hit = true;
+      }
+      if (b.y < 0 || b.y > H - h) {
+        b.y = Math.max(0, Math.min(H - h, b.y));
+        b.vy = -b.vy * bounce;
+        b.vr *= 0.7;
+        hit = true;
+      }
+      return hit;
+    };
+    const place = (i) => {
+      const node = nodes.current[i];
+      const b = bodies[i];
+      if (node) node.style.transform = `translate(${b.x.toFixed(1)}px, ${b.y.toFixed(1)}px) rotate(${b.r.toFixed(2)}deg)`;
+    };
+    const tick = (now) => {
+      const dt = Math.max(0, Math.min(0.05, (now - last) / 1e3));
+      last = now;
+      const decay = Math.exp(-friction * dt);
+      let moving = false;
+      bodies.forEach((b, i) => {
+        const node = nodes.current[i];
+        if (b.held) return;
+        b.x += b.vx * dt;
+        b.y += b.vy * dt;
+        b.r += b.vr * dt;
+        b.vx *= decay;
+        b.vy *= decay;
+        b.vr *= decay;
+        clamp(i);
+        const flying = Math.hypot(b.vx, b.vy) > 8 || Math.abs(b.vr) > 4;
+        if (flying) moving = true;
+        else {
+          b.vx = 0;
+          b.vy = 0;
+          b.vr = 0;
+        }
+        if (node) node.toggleAttribute("data-flying", flying);
+        place(i);
+      });
+      raf = moving ? requestAnimationFrame(tick) : 0;
+    };
+    const wake = () => {
+      if (raf) return;
+      last = performance.now();
+      raf = requestAnimationFrame(tick);
+    };
+    const settle = (i) => {
+      const b = bodies[i];
+      const k = 1 / friction;
+      b.x += b.vx * k;
+      b.y += b.vy * k;
+      b.r += b.vr * k * 0.3;
+      b.vx = b.vy = b.vr = 0;
+      clamp(i);
+      place(i);
+    };
+    const launch = (i) => reduced ? settle(i) : wake();
+    let drag = null;
+    const onDown = (event) => {
+      const i = nodes.current.indexOf(event.target.closest(".bl-pola__photo"));
+      if (i < 0 || event.button > 0) return;
+      event.preventDefault();
+      const node = nodes.current[i];
+      node.focus({ preventScroll: true });
+      try {
+        node.setPointerCapture(event.pointerId);
+      } catch {
+      }
+      const rect = table.getBoundingClientRect();
+      const b = bodies[i];
+      const { w, h } = size(i);
+      b.held = true;
+      b.vx = b.vy = b.vr = 0;
+      node.dataset.held = "";
+      drag = { i, id: event.pointerId, rect, dx: event.clientX - rect.left - b.x, dy: event.clientY - rect.top - b.y, gx: event.clientX - rect.left - (b.x + w / 2), gy: event.clientY - rect.top - (b.y + h / 2), samples: [{ x: event.clientX, y: event.clientY, t: event.timeStamp }] };
+      raise(i);
+    };
+    const onMove = (event) => {
+      if (!drag || event.pointerId !== drag.id) return;
+      const b = bodies[drag.i];
+      b.x = event.clientX - drag.rect.left - drag.dx;
+      b.y = event.clientY - drag.rect.top - drag.dy;
+      clamp(drag.i);
+      place(drag.i);
+      drag.samples.push({ x: event.clientX, y: event.clientY, t: event.timeStamp });
+      while (drag.samples.length > 2 && event.timeStamp - drag.samples[0].t > 80) drag.samples.shift();
+    };
+    const onUp = (event) => {
+      if (!drag || event.pointerId !== drag.id) return;
+      const { i, samples, gx, gy } = drag;
+      const b = bodies[i];
+      const first = samples[0];
+      const lastSample = samples[samples.length - 1];
+      const span = Math.max(16, lastSample.t - first.t) / 1e3;
+      b.vx = (lastSample.x - first.x) / span;
+      b.vy = (lastSample.y - first.y) / span;
+      b.vr = spin * (gx * b.vy - gy * b.vx) / 900;
+      b.held = false;
+      delete nodes.current[i].dataset.held;
+      drag = null;
+      launch(i);
+      if (Math.hypot(b.vx, b.vy) > 200) setAnnounce(`${name(i)} tossed.`);
+    };
+    const onKey = (event) => {
+      const i = nodes.current.indexOf(event.target.closest?.(".bl-pola__photo"));
+      if (i < 0) return;
+      const step = event.shiftKey ? 40 : 10;
+      const moves = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+      if (moves[event.key]) {
+        event.preventDefault();
+        const b = bodies[i];
+        b.x += moves[event.key][0];
+        b.y += moves[event.key][1];
+        clamp(i);
+        place(i);
+        raise(i);
+        setAnnounce(`${name(i)} moved to ${Math.round(b.x)}, ${Math.round(b.y)}.`);
+      } else if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        raise(i);
+        setAnnounce(`${name(i)} on top.`);
+      }
+    };
+    api.current = {
+      scatter: () => {
+        bodies.forEach((b, i) => {
+          const a = Math.random() * Math.PI * 2;
+          const speed = 600 + Math.random() * 900;
+          b.vx = Math.cos(a) * speed;
+          b.vy = Math.sin(a) * speed;
+          b.vr = (Math.random() - 0.5) * 400 * spin;
+          if (reduced) settle(i);
+        });
+        if (!reduced) wake();
+        setAnnounce("Photos scattered.");
+      },
+      tidy: () => {
+        bodies.forEach((b, i) => {
+          const { w, h } = size(i);
+          b.x = W / 2 - w / 2 + jitter(i, 4) * 16;
+          b.y = H / 2 - h / 2 + jitter(i, 5) * 16;
+          b.r = jitter(i, 6) * 10;
+          b.vx = b.vy = b.vr = 0;
+          place(i);
+        });
+        setAnnounce("Photos stacked in a neat pile.");
+      }
+    };
+    const resize = new ResizeObserver(() => {
+      W = table.clientWidth;
+      H = table.clientHeight;
+      bodies.forEach((_, i) => {
+        clamp(i);
+        place(i);
+      });
+    });
+    resize.observe(table);
+    bodies.forEach((_, i) => place(i));
+    table.addEventListener("pointerdown", onDown);
+    table.addEventListener("pointermove", onMove);
+    table.addEventListener("pointerup", onUp);
+    table.addEventListener("pointercancel", onUp);
+    table.addEventListener("keydown", onKey);
+    return () => {
+      cancelAnimationFrame(raf);
+      resize.disconnect();
+      table.removeEventListener("pointerdown", onDown);
+      table.removeEventListener("pointermove", onMove);
+      table.removeEventListener("pointerup", onUp);
+      table.removeEventListener("pointercancel", onUp);
+      table.removeEventListener("keydown", onKey);
+    };
+  }, [photos.length, photoWidth, frame, captionHeight, friction, bounce, spin]);
+  return /* @__PURE__ */ jsxs("div", { className: `bl-pola ${className}`, style: { "--bl-h": `${height}px`, "--bl-pw": `${photoWidth}px`, "--bl-frame": `${frame}px`, "--bl-caption": `${captionHeight}px`, "--bl-radius": `${radius}px`, "--bl-bg": backgroundColor, "--bl-paper": paperColor, "--bl-ink": textColor, "--bl-line": lineColor, "--bl-accent": accentColor, "--bl-btn": buttonColor, "--bl-btn-ink": buttonTextColor, "--bl-font": fontFamily, ...style }, children: [
+    /* @__PURE__ */ jsx("div", { ref: tableRef, className: "bl-pola__table", role: "group", "aria-label": label, children: photos.map((photo, i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (node) => {
+          nodes.current[i] = node;
+        },
+        type: "button",
+        className: "bl-pola__photo",
+        style: { zIndex: order.indexOf(i) + 1 },
+        "aria-label": `${name(i)}. Drag to move, arrows to nudge, Enter to bring to the top.`,
+        children: [
+          /* @__PURE__ */ jsx("img", { className: "bl-pola__img", src: photo.src, alt: "", draggable: false }),
+          /* @__PURE__ */ jsx("span", { className: "bl-pola__caption", children: photo.caption })
+        ]
+      },
+      photo.src ?? i
+    )) }),
+    showControls && /* @__PURE__ */ jsxs("div", { className: "bl-pola__bar", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "bl-pola__btn", onClick: () => api.current?.scatter(), children: scatterLabel }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "bl-pola__btn", onClick: () => api.current?.tidy(), children: tidyLabel })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "bl-pola__sr", "aria-live": "polite", children: announce })
+  ] });
+}
+export {
+  Polaroids as default
+};

package/dist/PressStart.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties } from 'react';
+export interface PressStartProps {
+    /** Blinking prompt. */
+    text?: string;
+    /** Shown after the flash, until `resetAfter`. */
+    startedText?: string;
+    /** Small line underneath (copyright, version…). Empty to hide. */
+    subtext?: string;
+    color?: string;
+    shadowColor?: string;
+    subColor?: string;
+    /** Prompt font size, in px. */
+    size?: number;
+    /** Blink period, in seconds. */
+    blinkSpeed?: number;
+    /** How long the fast "starting" flash lasts, in ms. */
+    flashDuration?: number;
+    /** Start on any key press anywhere on the page (ignored while typing in a field). */
+    listenGlobally?: boolean;
+    /** Return to the prompt after this many ms; 0 to stay started. */
+    resetAfter?: number;
+    fontFamily?: string;
+    /** Called when the flash finishes. */
+    onStart?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PressStart({ text, startedText, subtext, color, shadowColor, subColor, size, blinkSpeed, flashDuration, listenGlobally, resetAfter, fontFamily, onStart, className, style }: PressStartProps): import("react").JSX.Element;

package/dist/PressStart.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-press-start";
+const CSS = `
+.bl-press-start {
+  display: inline-flex; flex-direction: column; align-items: center; gap: 18px;
+  border: 0; background: none; cursor: pointer; padding: 12px 16px;
+  font-family: var(--bl-font, "Press Start 2P", ui-monospace, monospace);
+}
+.bl-press-start:focus-visible { outline: 4px solid #41a6f6; outline-offset: 6px; }
+.bl-press-start__text {
+  color: var(--bl-color); font-size: var(--bl-size); line-height: 1.2; text-transform: uppercase;
+  text-shadow: calc(var(--bl-size) / 6) calc(var(--bl-size) / 6) 0 var(--bl-shadow);
+}
+.bl-press-start[data-state="idle"] .bl-press-start__text { animation: bl-ps-blink var(--bl-blink) steps(1) infinite; }
+.bl-press-start[data-state="starting"] .bl-press-start__text { animation: bl-ps-blink 90ms steps(1) infinite; }
+.bl-press-start__sub { color: var(--bl-sub); font-size: calc(var(--bl-size) * 0.45); letter-spacing: 0.1em; text-transform: uppercase; }
+@keyframes bl-ps-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) {
+  .bl-press-start[data-state] .bl-press-start__text { 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);
+  }, []);
+}
+function PressStart({
+  text = "Press start",
+  startedText = "Get ready!",
+  subtext = "\xA9 2026 Bits Lab",
+  color = "#ffcd75",
+  shadowColor = "#b13e53",
+  subColor = "#94b0c2",
+  size = 28,
+  blinkSpeed = 1.06,
+  flashDuration = 700,
+  listenGlobally = true,
+  resetAfter = 2500,
+  fontFamily,
+  onStart,
+  className = "",
+  style
+}) {
+  useStyles();
+  const [state, setState] = useState("idle");
+  const timers = useRef([]);
+  const start = useCallback(() => {
+    if (state !== "idle") return;
+    setState("starting");
+    timers.current.push(
+      setTimeout(() => {
+        setState("started");
+        onStart?.();
+        if (resetAfter > 0) timers.current.push(setTimeout(() => setState("idle"), resetAfter));
+      }, flashDuration)
+    );
+  }, [state, flashDuration, onStart, resetAfter]);
+  useEffect(() => () => timers.current.forEach(clearTimeout), []);
+  useEffect(() => {
+    if (!listenGlobally) return void 0;
+    const onKey = (event) => {
+      if (event.repeat || event.metaKey || event.ctrlKey || /input|textarea|select/i.test(event.target.tagName) || event.target.isContentEditable) return;
+      start();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [listenGlobally, start]);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: `bl-press-start ${className}`,
+      "data-state": state,
+      onClick: start,
+      "aria-live": "polite",
+      style: {
+        "--bl-color": color,
+        "--bl-shadow": shadowColor,
+        "--bl-sub": subColor,
+        "--bl-size": `${size}px`,
+        "--bl-blink": `${blinkSpeed}s`,
+        ...fontFamily ? { "--bl-font": fontFamily } : null,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "bl-press-start__text", children: state === "started" ? startedText : text }),
+        subtext && /* @__PURE__ */ jsx("span", { className: "bl-press-start__sub", children: subtext })
+      ]
+    }
+  );
+}
+export {
+  PressStart as default
+};

package/dist/PricingFlip.d.ts

@@ -0,0 +1,52 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export type BillingPeriod = 'monthly' | 'yearly';
+export interface PricingPlan {
+    id?: string;
+    name: string;
+    description?: ReactNode;
+    /** Price per month when billed monthly; 0 shows freeLabel. */
+    monthly: number;
+    /** Price per month when billed yearly. */
+    yearly?: number;
+    features?: string[];
+    /** Button label; omit for no button. */
+    cta?: ReactNode;
+    featured?: boolean;
+    /** Ribbon such as "Most popular". */
+    badge?: ReactNode;
+}
+export interface PricingFlipProps {
+    plans?: PricingPlan[];
+    period?: BillingPeriod;
+    defaultPeriod?: BillingPeriod;
+    onPeriodChange?: (period: BillingPeriod) => void;
+    onSelect?: (plan: PricingPlan, period: BillingPeriod) => void;
+    /** ISO currency code for Intl.NumberFormat. */
+    currency?: string;
+    locale?: string;
+    monthlyLabel?: string;
+    yearlyLabel?: string;
+    perLabel?: string;
+    freeLabel?: string;
+    /** Text under the price in yearly mode, given the formatted yearly total. */
+    billedYearly?: (total: string) => string;
+    /** Max width of the card grid in px. */
+    width?: number;
+    priceSize?: number;
+    backgroundColor?: string;
+    cardColor?: string;
+    trackColor?: string;
+    textColor?: string;
+    mutedColor?: string;
+    lineColor?: string;
+    accentColor?: string;
+    onAccentColor?: string;
+    saveColor?: string;
+    radius?: number;
+    fontFamily?: string;
+    /** Accessible name of the period switch. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+export default function PricingFlip({ plans, period: controlled, defaultPeriod, onPeriodChange, onSelect, currency, locale, monthlyLabel, yearlyLabel, perLabel, freeLabel, billedYearly, width, priceSize, backgroundColor, cardColor, trackColor, textColor, mutedColor, lineColor, accentColor, onAccentColor, saveColor, radius, fontFamily, label, className, style }: PricingFlipProps): import("react").JSX.Element;

package/dist/PricingFlip.js

@@ -0,0 +1,190 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useInsertionEffect, useRef, useState } from "react";
+const STYLE_ID = "bl-pricing-flip";
+const CSS = `
+.bl-price { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; justify-items: center; width: 100%; color: var(--bl-ink); font-family: var(--bl-font); }
+.bl-price__switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--bl-track); box-shadow: inset 0 0 0 1px var(--bl-line); }
+.bl-price__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--bl-accent); transition: transform 320ms cubic-bezier(.3,1.35,.5,1); }
+.bl-price__switch[data-yearly] .bl-price__thumb { transform: translateX(100%); }
+.bl-price__opt { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border: 0; border-radius: 999px; background: transparent; color: var(--bl-muted); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color 200ms; }
+.bl-price__opt[aria-checked="true"] { color: var(--bl-on-accent); }
+.bl-price__opt:focus-visible { outline: 2px solid var(--bl-ink); outline-offset: 2px; }
+.bl-price__save { padding: 2px 7px; border-radius: 999px; background: var(--bl-save); color: var(--bl-on-accent); font-size: 11px; font-weight: 700; transform: scale(0.85); transition: transform 320ms cubic-bezier(.3,1.6,.5,1); }
+.bl-price__switch[data-yearly] .bl-price__save { transform: scale(1.08) rotate(-4deg); }
+.bl-price__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 18px; width: 100%; max-width: var(--bl-w); }
+.bl-price__card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--bl-radius); background: var(--bl-card); box-shadow: 0 0 0 1px var(--bl-line); }
+.bl-price__card[data-featured] { box-shadow: 0 0 0 2px var(--bl-accent), 0 24px 50px -28px var(--bl-accent); }
+.bl-price__badge { position: absolute; top: 0; right: 20px; padding: 4px 10px; border-radius: 999px; background: var(--bl-accent); color: var(--bl-on-accent); font-size: 12px; font-weight: 700; transform: translateY(-50%); }
+.bl-price__name { margin: 0; font-size: 18px; font-weight: 700; }
+.bl-price__desc { margin: -6px 0 0; color: var(--bl-muted); font-size: 14px; line-height: 1.5; }
+.bl-price__amount { display: flex; align-items: baseline; gap: 6px; min-height: 1.2em; }
+.bl-price__figure { display: inline-flex; font-size: var(--bl-size); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
+.bl-price__drum { display: inline-block; width: 1ch; height: 1.1em; overflow: hidden; }
+.bl-price__strip { display: block; transition: transform 640ms cubic-bezier(.25,1.25,.5,1); transition-delay: calc(var(--bl-col) * 45ms); }
+.bl-price__strip > span { display: block; height: 1.1em; text-align: center; }
+.bl-price__per { color: var(--bl-muted); font-size: 14px; }
+.bl-price__billed { min-height: 1.4em; margin: -8px 0 0; color: var(--bl-muted); font-size: 13px; transition: opacity 240ms; }
+.bl-price__billed[data-hidden] { opacity: 0; }
+.bl-price__features { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; }
+.bl-price__features li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
+.bl-price__features svg { flex: 0 0 auto; margin-top: 3px; color: var(--bl-accent); }
+.bl-price__cta { margin-top: auto; padding: 11px 16px; border: 0; border-radius: calc(var(--bl-radius) * 0.6); background: var(--bl-track); color: var(--bl-ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: inset 0 0 0 1px var(--bl-line); }
+.bl-price__card[data-featured] .bl-price__cta { background: var(--bl-accent); color: var(--bl-on-accent); box-shadow: none; }
+.bl-price__cta:hover { filter: brightness(1.12); }
+.bl-price__cta:focus-visible { outline: 2px solid var(--bl-ink); outline-offset: 2px; }
+.bl-price__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .bl-price__thumb, .bl-price__strip, .bl-price__save { 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 DIGITS = Array.from({ length: 10 }, (_, i) => i);
+function RollingPrice({ text }) {
+  const chars = [...text];
+  return /* @__PURE__ */ jsx("span", { className: "bl-price__figure", "aria-hidden": "true", children: chars.map((ch, i) => {
+    const fromRight = chars.length - i;
+    if (!/\d/.test(ch)) return /* @__PURE__ */ jsx("span", { children: ch }, `s${fromRight}-${ch}`);
+    return /* @__PURE__ */ jsx("span", { className: "bl-price__drum", children: /* @__PURE__ */ jsx("span", { className: "bl-price__strip", style: { transform: `translateY(${-Number(ch) * 1.1}em)`, "--bl-col": fromRight }, children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { children: d }, d)) }) }, `d${fromRight}`);
+  }) });
+}
+const Check = () => /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2.5 7.5 5.5 10.5 11.5 3.5" }) });
+function PricingFlip({
+  plans = [],
+  period: controlled,
+  defaultPeriod = "monthly",
+  onPeriodChange,
+  onSelect,
+  currency = "USD",
+  locale = "en-US",
+  monthlyLabel = "Monthly",
+  yearlyLabel = "Yearly",
+  perLabel = "/mo",
+  freeLabel = "Free",
+  billedYearly = (total) => `Billed ${total} yearly`,
+  width = 1e3,
+  priceSize = 44,
+  backgroundColor = "#1a1c2c",
+  cardColor = "#262b44",
+  trackColor = "#0b0b14",
+  textColor = "#f4f4f4",
+  mutedColor = "#94b0c2",
+  lineColor = "#333c57",
+  accentColor = "#73eff7",
+  onAccentColor = "#0b0b14",
+  saveColor = "#ffcd75",
+  radius = 18,
+  fontFamily = "ui-sans-serif, system-ui, sans-serif",
+  label = "Billing period",
+  className = "",
+  style
+}) {
+  useStyles();
+  const uid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  const [inner, setInner] = useState(defaultPeriod);
+  const period = controlled ?? inner;
+  const yearly = period === "yearly";
+  const [announce, setAnnounce] = useState("");
+  const optRefs = useRef([]);
+  const money = (value) => new Intl.NumberFormat(locale, { style: "currency", currency, maximumFractionDigits: Number.isInteger(value) ? 0 : 2 }).format(value);
+  const savings = plans.filter((p) => p.monthly > 0 && p.yearly != null).map((p) => Math.round((1 - p.yearly / p.monthly) * 100));
+  const bestSaving = savings.length ? Math.max(...savings) : 0;
+  const choose = (next) => {
+    if (next === period) return;
+    if (controlled === void 0) setInner(next);
+    onPeriodChange?.(next);
+    setAnnounce(next === "yearly" ? `Showing yearly prices.${bestSaving > 0 ? ` Save up to ${bestSaving}%.` : ""}` : "Showing monthly prices.");
+  };
+  const onKeyDown = (event) => {
+    if (!["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    event.preventDefault();
+    const next = yearly ? "monthly" : "yearly";
+    choose(next);
+    optRefs.current[next === "yearly" ? 1 : 0]?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bl-price ${className}`,
+      style: {
+        "--bl-w": `${width}px`,
+        "--bl-size": `${priceSize}px`,
+        "--bl-radius": `${radius}px`,
+        "--bl-bg": backgroundColor,
+        "--bl-card": cardColor,
+        "--bl-track": trackColor,
+        "--bl-ink": textColor,
+        "--bl-muted": mutedColor,
+        "--bl-line": lineColor,
+        "--bl-accent": accentColor,
+        "--bl-on-accent": onAccentColor,
+        "--bl-save": saveColor,
+        "--bl-font": fontFamily,
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "bl-price__switch", role: "radiogroup", "aria-label": label, "data-yearly": yearly || void 0, children: [
+          /* @__PURE__ */ jsx("span", { className: "bl-price__thumb", "aria-hidden": "true" }),
+          [
+            ["monthly", monthlyLabel],
+            ["yearly", yearlyLabel]
+          ].map(([value, text], i) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              ref: (node) => {
+                optRefs.current[i] = node;
+              },
+              type: "button",
+              role: "radio",
+              className: "bl-price__opt",
+              "aria-checked": period === value,
+              tabIndex: period === value ? 0 : -1,
+              onClick: () => choose(value),
+              onKeyDown,
+              children: [
+                text,
+                value === "yearly" && bestSaving > 0 && /* @__PURE__ */ jsxs("span", { className: "bl-price__save", children: [
+                  "Save ",
+                  bestSaving,
+                  "%"
+                ] })
+              ]
+            },
+            value
+          ))
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bl-price__grid", children: plans.map((plan) => {
+          const perMonth = yearly && plan.yearly != null ? plan.yearly : plan.monthly;
+          const free = perMonth === 0;
+          const shown = free ? freeLabel : money(perMonth);
+          const nameId = `${uid}-${plan.id ?? plan.name}`;
+          return /* @__PURE__ */ jsxs("section", { className: "bl-price__card", "data-featured": plan.featured || void 0, "aria-labelledby": nameId, children: [
+            plan.badge && /* @__PURE__ */ jsx("span", { className: "bl-price__badge", children: plan.badge }),
+            /* @__PURE__ */ jsx("h3", { id: nameId, className: "bl-price__name", children: plan.name }),
+            plan.description && /* @__PURE__ */ jsx("p", { className: "bl-price__desc", children: plan.description }),
+            /* @__PURE__ */ jsxs("div", { className: "bl-price__amount", children: [
+              free ? /* @__PURE__ */ jsx("span", { className: "bl-price__figure", "aria-hidden": "true", children: freeLabel }) : /* @__PURE__ */ jsx(RollingPrice, { text: shown }),
+              !free && /* @__PURE__ */ jsx("span", { className: "bl-price__per", "aria-hidden": "true", children: perLabel }),
+              /* @__PURE__ */ jsx("span", { className: "bl-price__sr", children: free ? freeLabel : `${shown} per month` })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "bl-price__billed", "data-hidden": !yearly || free || plan.yearly == null || void 0, children: yearly && !free && plan.yearly != null ? billedYearly(money(plan.yearly * 12)) : "\xA0" }),
+            plan.features && plan.features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "bl-price__features", children: plan.features.map((feature) => /* @__PURE__ */ jsxs("li", { children: [
+              /* @__PURE__ */ jsx(Check, {}),
+              feature
+            ] }, feature)) }),
+            plan.cta && /* @__PURE__ */ jsx("button", { type: "button", className: "bl-price__cta", onClick: () => onSelect?.(plan, period), children: plan.cta })
+          ] }, plan.id ?? plan.name);
+        }) }),
+        /* @__PURE__ */ jsx("span", { className: "bl-price__sr", "aria-live": "polite", children: announce })
+      ]
+    }
+  );
+}
+export {
+  PricingFlip as default
+};