motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-DD55JZOI.js

@@ -0,0 +1,257 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/receipt-button/receipt-button.tsx
+import * as React from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var DEFAULT_ITEMS = [
+  { qty: 2, name: "Cortado", price: 6.8 },
+  { qty: 1, name: "Cardamom bun", price: 4.2 },
+  { qty: 1, name: "Sparkling water", price: 2.5 }
+];
+var TEETH = 18;
+var TOOTH = 5;
+function paperClip(bottom) {
+  const pts = [];
+  for (let i = 0; i <= TEETH * 2; i++) pts.push(`${i / (TEETH * 2) * 100}% ${i % 2 ? 0 : TOOTH}px`);
+  for (let i = TEETH * 2; i >= 0; i--) pts.push(`${i / (TEETH * 2) * 100}% calc(100% - ${i % 2 ? bottom : 0}px)`);
+  return `polygon(${pts.join(", ")})`;
+}
+function barcode(seed) {
+  let h = 2166136261;
+  for (const ch of seed) h = Math.imul(h ^ ch.charCodeAt(0), 16777619);
+  const bars = [];
+  let x = 0;
+  while (x < 176) {
+    h = Math.imul(h ^ h >>> 13, 2654435761);
+    const w = 1 + Math.abs(h) % 3;
+    const gap = 1 + Math.abs(h >> 7) % 2;
+    bars.push({ x, w });
+    x += w + gap;
+  }
+  return bars;
+}
+var money = (n) => n.toFixed(2);
+var WAVE_W = 14;
+function wavePath(amplitude, phase) {
+  const pts = [];
+  for (let y = 0; y <= 96; y += 4) {
+    const x = WAVE_W / 2 + amplitude * Math.sin(y / 48 * Math.PI * 2 + phase);
+    pts.push(`${x.toFixed(2)} ${y}`);
+  }
+  return `M0 0 L${pts.join(" L")} L0 96 Z`;
+}
+var WAVE_FRONT = wavePath(4, 0);
+var WAVE_BACK = wavePath(5, Math.PI / 1.5);
+var ReceiptButton = React.forwardRef(function ReceiptButton2({
+  items = DEFAULT_ITEMS,
+  currency = "$",
+  merchant = "NORTH ROAST",
+  tagline = "Coffee bar",
+  orderId = "1042",
+  footer = "Thank you, come again",
+  label,
+  paidLabel = "Paid",
+  processing = 1200,
+  feedSpeed = 0.09,
+  color = "#141414",
+  successColor = "#2f8a4f",
+  resetAfter = 3200,
+  onPay,
+  onComplete,
+  className
+}, forwardedRef) {
+  const root = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => root.current);
+  const [phase, setPhase] = React.useState("idle");
+  const [stamp, setStamp] = React.useState("");
+  const resetTimer = React.useRef(null);
+  const total = items.reduce((sum, i) => sum + i.qty * i.price, 0);
+  const bars = React.useMemo(() => barcode(orderId), [orderId]);
+  const { contextSafe } = useGSAP(
+    () => {
+      gsap.set("[data-receipt]", { yPercent: 100, y: 0, rotation: 0, autoAlpha: 1 });
+      gsap.set("[data-paper]", { clipPath: paperClip(0) });
+      gsap.set("[data-fill]", { xPercent: -100, x: -WAVE_W });
+      gsap.set("[data-part]", { autoAlpha: 0, y: 8 });
+      gsap.set("[data-check]", { strokeDashoffset: 24 });
+      gsap.set("[data-label]", { autoAlpha: 1, y: 0 });
+    },
+    { scope: root }
+  );
+  React.useEffect(() => () => void (resetTimer.current && clearTimeout(resetTimer.current)), []);
+  const reset = contextSafe(() => {
+    if (resetTimer.current) clearTimeout(resetTimer.current);
+    gsap.timeline({ onComplete: () => setPhase("idle") }).to("[data-receipt]", { y: "+=24", autoAlpha: 0, duration: 0.35, ease: "power2.in" }).to("[data-part]", { autoAlpha: 0, y: -8, duration: 0.2, stagger: 0.02 }, "<").to("[data-fill]", { xPercent: 100, x: 0, duration: 0.5, ease: "power3.inOut" }, "<0.1").to("[data-label]", { autoAlpha: 1, y: 0, duration: 0.3, ease: "power2.out" }, "-=0.15").add(() => {
+      gsap.set("[data-receipt]", { yPercent: 100, y: 0, rotation: 0, autoAlpha: 1 });
+      gsap.set("[data-paper]", { clipPath: paperClip(0) });
+      gsap.set("[data-check]", { strokeDashoffset: 24 });
+      gsap.set("[data-part]", { y: 8 });
+      gsap.set("[data-fill]", { xPercent: -100, x: -WAVE_W });
+    });
+  });
+  const pay = contextSafe(() => {
+    if (phase !== "idle") return;
+    const now = /* @__PURE__ */ new Date();
+    const pad = (n) => String(n).padStart(2, "0");
+    setStamp(
+      `${pad(now.getDate())}.${pad(now.getMonth() + 1)}.${String(now.getFullYear()).slice(2)} \xB7 ${pad(now.getHours())}:${pad(now.getMinutes())}`
+    );
+    setPhase("paying");
+    onPay?.();
+    const rows = gsap.utils.toArray("[data-row]", root.current);
+    const tear = { depth: 0 };
+    const tl = gsap.timeline({
+      onComplete: () => {
+        setPhase("printed");
+        onComplete?.();
+        if (resetAfter !== null) resetTimer.current = setTimeout(reset, resetAfter);
+      }
+    });
+    const ripples = [
+      gsap.fromTo("[data-wave=front]", { yPercent: 0 }, { yPercent: -50, duration: 0.7, ease: "none", repeat: -1 }),
+      gsap.fromTo("[data-wave=back]", { yPercent: -50 }, { yPercent: 0, duration: 1.1, ease: "none", repeat: -1 })
+    ];
+    tl.to("[data-label]", { autoAlpha: 0, y: -10, duration: 0.25, ease: "power2.in" }).to(
+      "[data-fill]",
+      {
+        xPercent: 0,
+        x: 0,
+        duration: processing / 1e3,
+        ease: "power2.inOut",
+        onComplete: () => ripples.forEach((r) => r.kill())
+      },
+      "<"
+    ).to("[data-check]", { strokeDashoffset: 0, duration: 0.35, ease: "power2.out" }).to("[data-part]", { autoAlpha: 1, y: 0, duration: 0.3, ease: "power3.out", stagger: 0.03 }, "<");
+    rows.forEach((_, i) => {
+      tl.to("[data-receipt]", {
+        yPercent: 100 - (i + 1) / rows.length * 100,
+        duration: feedSpeed,
+        ease: "power1.out"
+      }).to({}, { duration: feedSpeed * 0.45 });
+    });
+    tl.to("[data-receipt]", { x: -3, duration: 0.05, yoyo: true, repeat: 3, ease: "none" }, "+=0.2").to(tear, {
+      depth: TOOTH,
+      duration: 0.12,
+      ease: "power2.out",
+      onUpdate: () => gsap.set("[data-paper]", { clipPath: paperClip(tear.depth) })
+    }).to("[data-receipt]", { y: -64, rotation: -3, duration: 0.7, ease: "back.out(1.6)" }, "<");
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) tl.progress(1);
+  });
+  const printed = phase === "printed";
+  return /* @__PURE__ */ jsxs("div", { ref: root, className: cn("relative inline-flex flex-col items-center pt-[26rem]", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": phase === "idle",
+        className: "absolute bottom-7 left-1/2 w-60 -translate-x-1/2",
+        style: { clipPath: "inset(-40rem -4rem 0 -4rem)" },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-receipt": true,
+            role: printed ? "button" : void 0,
+            tabIndex: printed ? 0 : -1,
+            onClick: () => printed && reset(),
+            onKeyDown: (e) => {
+              if (printed && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                reset();
+              }
+            },
+            "aria-label": printed ? "Receipt. Press to dismiss." : void 0,
+            className: cn(
+              "block w-full text-left drop-shadow-[0_10px_18px_rgba(0,0,0,0.14)] outline-none",
+              printed && "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsxs("div", { "data-paper": true, className: "bg-[#fdfcf8] px-5 pb-6 pt-6 font-mono text-[12px] text-zinc-800", children: [
+              /* @__PURE__ */ jsxs("div", { "data-row": true, className: "text-center", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-lg font-bold tracking-[0.25em] text-zinc-900", children: merchant }),
+                /* @__PURE__ */ jsx("p", { className: "mt-0.5 uppercase tracking-[0.2em] text-zinc-500", children: tagline })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { "data-row": true, className: "mt-4 flex justify-between text-zinc-500", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Order #",
+                  orderId
+                ] }),
+                /* @__PURE__ */ jsx("span", { children: stamp })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "my-3 border-t border-dashed border-zinc-300" }),
+              items.map((item) => /* @__PURE__ */ jsxs("div", { "data-row": true, className: "flex justify-between py-0.5", children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  item.qty,
+                  "\xD7 ",
+                  item.name
+                ] }),
+                /* @__PURE__ */ jsx("span", { children: money(item.qty * item.price) })
+              ] }, item.name)),
+              /* @__PURE__ */ jsx("div", { className: "my-3 border-t border-dashed border-zinc-300" }),
+              /* @__PURE__ */ jsxs("div", { "data-row": true, className: "flex items-baseline justify-between text-sm font-bold text-zinc-900", children: [
+                /* @__PURE__ */ jsx("span", { children: "TOTAL" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  currency,
+                  money(total)
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { "data-row": true, className: "mt-1 flex justify-between text-[10px] uppercase tracking-wider text-zinc-500", children: [
+                /* @__PURE__ */ jsx("span", { children: "Card \xB7 tap" }),
+                /* @__PURE__ */ jsx("span", { children: "Approved" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { "data-row": true, className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx("svg", { width: "176", height: "36", viewBox: "0 0 176 36", "aria-hidden": true, children: bars.map((bar, i) => /* @__PURE__ */ jsx("rect", { x: bar.x, y: "0", width: bar.w, height: "36", fill: "#18181b" }, i)) }) }),
+              /* @__PURE__ */ jsx("p", { "data-row": true, className: "mt-2 text-center text-[10px] uppercase tracking-[0.2em] text-zinc-500", children: footer })
+            ] })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: pay,
+        "aria-disabled": phase !== "idle",
+        "aria-live": "polite",
+        style: { background: color },
+        className: "relative isolate grid h-14 w-72 cursor-pointer place-items-center overflow-hidden rounded-full text-base font-semibold text-white shadow-[0_12px_28px_-12px_rgba(0,0,0,0.45)] outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 aria-disabled:cursor-default",
+        children: [
+          /* @__PURE__ */ jsx("span", { "data-fill": true, "aria-hidden": true, className: "absolute inset-0 -z-10", style: { background: successColor }, children: /* @__PURE__ */ jsxs("span", { className: "absolute left-full top-0 h-full overflow-hidden", style: { width: WAVE_W }, children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "data-wave": "back",
+                viewBox: `0 0 ${WAVE_W} 96`,
+                preserveAspectRatio: "none",
+                className: "absolute left-0 top-0 h-[200%] w-full opacity-45",
+                children: /* @__PURE__ */ jsx("path", { d: WAVE_BACK, fill: successColor })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                "data-wave": "front",
+                viewBox: `0 0 ${WAVE_W} 96`,
+                preserveAspectRatio: "none",
+                className: "absolute left-0 top-0 h-[200%] w-full",
+                children: /* @__PURE__ */ jsx("path", { d: WAVE_FRONT, fill: successColor })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("span", { "data-label": true, className: "col-start-1 row-start-1", children: label ?? `Pay ${currency}${money(total)}` }),
+          /* @__PURE__ */ jsxs("span", { "data-paid": true, className: "col-start-1 row-start-1 flex items-center gap-2", "aria-hidden": phase === "idle", children: [
+            /* @__PURE__ */ jsx("svg", { "data-part": true, viewBox: "0 0 24 24", className: "size-5", fill: "none", stroke: "currentColor", strokeWidth: 2.75, children: /* @__PURE__ */ jsx("path", { "data-check": true, d: "M20 6 9 17l-5-5", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "24" }) }),
+            /* @__PURE__ */ jsx("span", { className: "flex", "aria-label": paidLabel, children: Array.from(paidLabel).map((ch, i) => /* @__PURE__ */ jsx("span", { "data-part": true, "aria-hidden": true, className: "inline-block whitespace-pre", children: ch }, i)) })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+
+export {
+  ReceiptButton
+};

package/dist/chunk-DQUXBNSH.js

@@ -0,0 +1,412 @@
+"use client";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/goal-gauge/goal-gauge.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useTransform,
+  useVelocity
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var W = 280;
+var R = 120;
+var STROKE = 10;
+var CX = W / 2;
+var CY = R + STROKE / 2 + 6;
+var H = CY + STROKE / 2 + 2;
+var ARC = `M ${CX - R} ${CY} A ${R} ${R} 0 0 1 ${CX + R} ${CY}`;
+var GLIDE = [0.22, 1, 0.36, 1];
+var ROLL = { type: "spring", stiffness: 280, damping: 26, mass: 0.8 };
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+var MAX_BLUR = 0.5;
+function Digit({ digit, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-block h-[1em] w-[0.62em] overflow-hidden", children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "absolute inset-x-0 top-0 flex flex-col",
+      initial: { y: "0%" },
+      animate: { y: `${-digit * 10}%` },
+      transition: still ? { duration: 0 } : ROLL,
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { className: "flex h-[1em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function Rolling({ text, still }) {
+  const chars = Array.from(text);
+  return /* @__PURE__ */ jsx("span", { "aria-label": text, className: "inline-flex leading-none tabular-nums", children: chars.map((ch, i) => {
+    const key = chars.length - i;
+    return /\d/.test(ch) ? /* @__PURE__ */ jsx(Digit, { digit: Number(ch), still }, key) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-block h-[1em]", children: ch }, `${key}-${ch}`);
+  }) });
+}
+function Wheel({
+  amount,
+  rate,
+  place,
+  unit
+}) {
+  const position = useTransform(amount, (a) => {
+    const ticks = Math.max(0, a) / unit + 1e-6;
+    const whole = Math.floor(ticks);
+    const turning = ticks - whole;
+    const span = Math.round(place / unit);
+    const digit = Math.floor(whole / span) % 10;
+    const turn = span === 1 ? turning : whole % span === span - 1 ? turning : 0;
+    return digit + turn;
+  });
+  const y = useTransform(position, (p) => `${-p * 100 / 11}%`);
+  const filter = useTransform(rate, (v) => {
+    const px = Math.min(MAX_BLUR, Math.abs(v) / place * 0.015);
+    return px < 0.1 ? "none" : `blur(${px.toFixed(2)}px)`;
+  });
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-block h-[1em] w-[0.62em] overflow-hidden", children: /* @__PURE__ */ jsx(motion.span, { className: "absolute inset-x-0 top-0 flex flex-col", style: { y, filter }, children: [...DIGITS, 0].map((d, i) => /* @__PURE__ */ jsx("span", { className: "flex h-[1em] items-center justify-center", children: d }, i)) }) });
+}
+function Odometer({
+  amount,
+  format,
+  label
+}) {
+  const parts = React.useMemo(() => format.formatToParts(1234.5), [format]);
+  const before = parts.slice(
+    0,
+    parts.findIndex((p) => p.type === "integer")
+  ).map((p) => p.value).join("");
+  const lastNum = parts.map((p) => p.type).lastIndexOf("fraction");
+  const after = parts.slice(lastNum + 1).map((p) => p.value).join("");
+  const group = parts.find((p) => p.type === "group")?.value ?? ",";
+  const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+  const fractionDigits = parts.find((p) => p.type === "fraction")?.value.length ?? 2;
+  const rate = useVelocity(amount);
+  const wholeDigits = (a) => Math.max(1, String(Math.floor(Math.max(0, a) + 1e-6)).length);
+  const [count, setCount] = React.useState(() => wholeDigits(amount.get()));
+  useMotionValueEvent(amount, "change", (a) => {
+    const next = wholeDigits(a);
+    if (next !== count) setCount(next);
+  });
+  const cells = [];
+  for (let k = count - 1; k >= 0; k--) {
+    cells.push(
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          className: "inline-flex",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          transition: { duration: 0.2 },
+          children: /* @__PURE__ */ jsx(Wheel, { amount, rate, place: 10 ** k, unit: 10 ** -fractionDigits })
+        },
+        `w${k}`
+      )
+    );
+    if (k > 0 && k % 3 === 0) cells.push(/* @__PURE__ */ jsx("span", { children: group }, `g${k}`));
+  }
+  cells.push(/* @__PURE__ */ jsx("span", { children: decimal }, "dec"));
+  for (let f = 1; f <= fractionDigits; f++) {
+    cells.push(/* @__PURE__ */ jsx(Wheel, { amount, rate, place: 10 ** -f, unit: 10 ** -fractionDigits }, `f${f}`));
+  }
+  return /* @__PURE__ */ jsx("span", { "aria-label": label, className: "inline-flex leading-none tabular-nums", children: /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "inline-flex", children: [
+    before,
+    cells,
+    after
+  ] }) });
+}
+var POP = {
+  initial: { opacity: 0, y: 6, scale: 0.96 },
+  animate: { opacity: 1, y: 0, scale: 1 },
+  exit: { opacity: 0, y: 4, scale: 0.98 },
+  transition: { duration: 0.25, ease: GLIDE }
+};
+function pointAt(p) {
+  const angle = Math.PI * (1 - p);
+  return { x: CX + R * Math.cos(angle), y: CY - R * Math.sin(angle) };
+}
+function arcBetween(from, to) {
+  const a = pointAt(from);
+  const b = pointAt(to);
+  return `M ${a.x} ${a.y} A ${R} ${R} 0 0 1 ${b.x} ${b.y}`;
+}
+var GAP = (STROKE + 3) / (Math.PI * R);
+var PALETTE = ["#2a9fbf", "#3d66d6", "#d6498f", "#9150e0", "#269a5a"];
+var DEFAULT_SEGMENTS = [
+  { label: "Salary", value: 520 },
+  { label: "Freelance", value: 280 },
+  { label: "Side shop", value: 140 },
+  { label: "Gifts", value: 70 },
+  { label: "Interest", value: 42.98 }
+];
+function normalize(segments) {
+  const head = segments.slice(0, PALETTE.length - 1);
+  const tail = segments.slice(PALETTE.length - 1);
+  const folded = tail.length > 1 ? [{ label: "Other", value: tail.reduce((sum, t) => sum + t.value, 0) }] : tail;
+  return [...head, ...folded].map((seg, i) => ({ ...seg, color: seg.color ?? PALETTE[i] }));
+}
+function Segment({
+  progress,
+  from,
+  to,
+  color,
+  dim
+}) {
+  const span = Math.max(1e-6, to - from);
+  const length = useTransform(progress, (p) => Math.min(1, Math.max(0, (p - from) / span)));
+  const opacity = useTransform(length, (l) => l > 1e-3 ? 1 : 0);
+  return /* @__PURE__ */ jsx(motion.g, { animate: { opacity: dim ? 0.28 : 1 }, transition: { duration: 0.25, ease: GLIDE }, children: /* @__PURE__ */ jsx(
+    motion.path,
+    {
+      d: arcBetween(from, to),
+      fill: "none",
+      stroke: color,
+      strokeWidth: STROKE,
+      strokeLinecap: "round",
+      style: { pathLength: length, opacity }
+    }
+  ) });
+}
+var GoalGauge = React.forwardRef(function GoalGauge2({
+  segments,
+  value,
+  color = "#269a5a",
+  goal = 1200,
+  title = "Saving goal",
+  subtitle = "1 to 12 Apr, 2026",
+  currency = "USD",
+  locale = "en-US",
+  duration = 1.4,
+  actionLabel = "View report",
+  onAction,
+  className
+}, forwardedRef) {
+  const root = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => root.current);
+  const inView = useInView(root, { once: true, amount: 0.4 });
+  const reduceMotion = useReducedMotion();
+  const [active, setActive] = React.useState(null);
+  const money = React.useMemo(
+    () => new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 2 }),
+    [locale, currency]
+  );
+  const whole = React.useMemo(
+    () => new Intl.NumberFormat(locale, { style: "currency", currency, maximumFractionDigits: 0 }),
+    [locale, currency]
+  );
+  const segs = React.useMemo(
+    () => segments ? normalize(segments) : value !== void 0 ? [{ label: typeof title === "string" ? title : "Saved", value, color }] : normalize(DEFAULT_SEGMENTS),
+    [segments, value, color, title]
+  );
+  const total = segs.reduce((sum, seg) => sum + seg.value, 0);
+  const remaining = Math.max(0, goal - total);
+  const done = total >= goal;
+  const ranges = React.useMemo(() => {
+    let cursor = 0;
+    return segs.map((seg, i) => {
+      const start = Math.min(1, cursor / goal);
+      cursor += seg.value;
+      const end = Math.min(1, cursor / goal);
+      return {
+        from: start + (i > 0 ? GAP / 2 : 0),
+        to: Math.max(start + (i > 0 ? GAP / 2 : 0), end - (i < segs.length - 1 || end < 1 ? GAP / 2 : 0)),
+        hitFrom: start,
+        hitTo: end
+      };
+    });
+  }, [segs, goal]);
+  const amount = useMotionValue(0);
+  const shown = useMotionValue(0);
+  const progress = useTransform(amount, (a) => Math.min(1, Math.max(0, a / goal)));
+  const trackLength = useTransform(progress, (p) => Math.max(0, 1 - Math.min(1, p + GAP / 2)));
+  useMotionValueEvent(amount, "change", (a) => {
+    if (active === null) shown.set(a);
+  });
+  React.useEffect(() => {
+    if (!inView) return;
+    if (reduceMotion) {
+      amount.set(total);
+      shown.set(total);
+      return;
+    }
+    const controls = animate(amount, total, { duration, ease: GLIDE });
+    return () => controls.stop();
+  }, [inView, total, duration, reduceMotion, amount, shown]);
+  React.useEffect(() => {
+    const target = active === null ? amount.get() : active === "rest" ? remaining : segs[active].value;
+    if (reduceMotion) {
+      shown.set(target);
+      return;
+    }
+    const controls = animate(shown, target, { duration: 0.6, ease: GLIDE });
+    return () => controls.stop();
+  }, [active, remaining, segs, amount, shown, reduceMotion]);
+  const step = (dir) => setActive((cur) => {
+    const order = [...segs.map((_, i) => i), ...remaining > 0 ? ["rest"] : []];
+    const at = cur === null ? dir === 1 ? -1 : order.length : order.indexOf(cur);
+    return order[(at + dir + order.length) % order.length];
+  });
+  const caption = active === "rest" ? { dot: void 0, text: `To go \xB7 ${Math.round(remaining / goal * 100)}% of goal` } : active !== null ? {
+    dot: segs[active].color,
+    text: `${segs[active].label} \xB7 ${Math.round(segs[active].value / total * 100)}%`
+  } : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: cn(
+        "w-[340px] max-w-full rounded-3xl bg-white px-6 pb-5 pt-6 text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-zinc-500 dark:text-zinc-400", children: subtitle })
+          ] }),
+          actionLabel !== null && /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              type: "button",
+              onClick: onAction,
+              initial: "rest",
+              whileHover: "hover",
+              whileTap: "press",
+              variants: { rest: { scale: 1 }, hover: { scale: 1 }, press: { scale: 0.96 } },
+              transition: { duration: 0.15, ease: GLIDE },
+              className: "inline-flex shrink-0 cursor-pointer items-center gap-1 rounded-full bg-[#242423]/6 px-3.5 py-1.5 text-sm font-medium text-[#242423] transition-colors hover:bg-[#242423]/10 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/8 dark:text-zinc-100 dark:hover:bg-white/12",
+              children: [
+                actionLabel,
+                /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    variants: { rest: { x: 0, y: 0, opacity: 1 }, hover: { x: 2, y: -2, opacity: 1 } },
+                    transition: { duration: 0.25, ease: GLIDE },
+                    className: "flex",
+                    children: /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-3.5", strokeWidth: 2.5 })
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "meter",
+            tabIndex: 0,
+            "aria-label": typeof title === "string" ? title : "Goal progress",
+            "aria-valuemin": 0,
+            "aria-valuemax": goal,
+            "aria-valuenow": total,
+            "aria-valuetext": `${money.format(total)} of ${whole.format(goal)}: ${segs.map((seg) => `${seg.label} ${money.format(seg.value)}`).join(", ")}`,
+            onKeyDown: (e) => {
+              if (e.key === "ArrowRight" || e.key === "ArrowDown") e.preventDefault(), step(1);
+              if (e.key === "ArrowLeft" || e.key === "ArrowUp") e.preventDefault(), step(-1);
+              if (e.key === "Escape") setActive(null);
+            },
+            onBlur: () => setActive(null),
+            onPointerLeave: () => setActive(null),
+            className: "relative mt-[52px] rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+            children: [
+              /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${W} ${H}`, className: "block w-full overflow-visible", "aria-hidden": true, children: [
+                /* @__PURE__ */ jsx(
+                  motion.path,
+                  {
+                    d: arcBetween(1, 1),
+                    fill: "none",
+                    className: "stroke-zinc-100 dark:stroke-zinc-800/60",
+                    strokeWidth: STROKE,
+                    strokeLinecap: "round"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  motion.path,
+                  {
+                    d: `M ${pointAt(1).x} ${pointAt(1).y} A ${R} ${R} 0 0 0 ${pointAt(0).x} ${pointAt(0).y}`,
+                    fill: "none",
+                    strokeWidth: STROKE,
+                    strokeLinecap: "round",
+                    className: "stroke-zinc-100 dark:stroke-zinc-800/60",
+                    animate: { opacity: active === null || active === "rest" ? 1 : 0.5 },
+                    style: { pathLength: trackLength }
+                  }
+                ),
+                segs.map((seg, i) => /* @__PURE__ */ jsx(
+                  Segment,
+                  {
+                    progress,
+                    from: ranges[i].from,
+                    to: ranges[i].to,
+                    color: seg.color,
+                    dim: active !== null && active !== i
+                  },
+                  seg.label
+                )),
+                segs.map((seg, i) => /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: arcBetween(ranges[i].hitFrom, ranges[i].hitTo),
+                    fill: "none",
+                    stroke: "transparent",
+                    strokeWidth: STROKE + 26,
+                    pointerEvents: "stroke",
+                    onPointerEnter: () => setActive(i)
+                  },
+                  `hit-${seg.label}`
+                )),
+                remaining > 0 && /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: arcBetween(Math.min(1, total / goal), 1),
+                    fill: "none",
+                    stroke: "transparent",
+                    strokeWidth: STROKE + 26,
+                    pointerEvents: "stroke",
+                    onPointerEnter: () => setActive("rest")
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-x-0 bottom-3 flex flex-col items-center", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-[24px] font-medium tracking-tight", children: /* @__PURE__ */ jsx(Odometer, { amount: shown, format: money, label: money.format(total) }) }),
+                /* @__PURE__ */ jsx("div", { className: "mt-1.5 grid h-5 text-sm text-zinc-500 dark:text-zinc-400", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: caption ? /* @__PURE__ */ jsxs(
+                  motion.span,
+                  {
+                    ...POP,
+                    className: "col-start-1 row-start-1 inline-flex items-center justify-center gap-1.5",
+                    children: [
+                      caption.dot && /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full", style: { background: caption.dot } }),
+                      caption.text
+                    ]
+                  },
+                  caption.text
+                ) : done ? /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    ...POP,
+                    className: "col-start-1 row-start-1 font-medium text-zinc-900 dark:text-zinc-100",
+                    children: "Goal reached"
+                  },
+                  "done"
+                ) : /* @__PURE__ */ jsxs(motion.span, { ...POP, className: "col-start-1 row-start-1", children: [
+                  "of ",
+                  /* @__PURE__ */ jsx(Rolling, { text: whole.format(goal), still: !!reduceMotion })
+                ] }, "of") }) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  GoalGauge
+};