motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-CMTGYFT7.js

@@ -0,0 +1,395 @@
+"use client";
+import {
+  TrendingUpIcon
+} from "./chunk-SSWKGVRI.js";
+import {
+  ActivityIcon
+} from "./chunk-62RBYLIN.js";
+import {
+  FlameIcon
+} from "./chunk-YVYYDPE2.js";
+import {
+  ZapIcon
+} from "./chunk-6GRDT3OE.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/activity-grid/activity-grid.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion
+} from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ACTIVITY_PALETTES = {
+  ink: ["#dcdcda", "#a6a6a3", "#6e6e6b", "#242423"],
+  green: ["#c9f2d5", "#7ddc96", "#2fbf5c", "#17803a"],
+  violet: ["#ddd6ff", "#ad9bff", "#7b61ff", "#4a2fd1"],
+  mint: ["#c6f4e3", "#6fe0b8", "#16c79a", "#0b8a6a"],
+  amber: ["#ffe7b3", "#ffc85c", "#ffad1f", "#d98200"],
+  sky: ["#cbeaff", "#7cc8ff", "#2aa8f2", "#0a72b8"]
+};
+var WEEKS = 53;
+var GAP = 3;
+var DAY_LABEL_W = 26;
+var MAX_CELL = 16;
+var LEVELS = [0, 1, 2, 3, 4];
+var EASE = [0.22, 1, 0.36, 1];
+var EASE_CSS = "cubic-bezier(0.22,1,0.36,1)";
+var DAY = 864e5;
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+function sampleData(days) {
+  let seed = 11;
+  const rand = () => {
+    seed = seed * 16807 % 2147483647;
+    return (seed - 1) / 2147483646;
+  };
+  const out = [];
+  for (let i = 0; i < days; i++) {
+    const weekday = (i + 2) % 7 < 5;
+    const wave = 0.5 + 0.3 * Math.sin(i / days * Math.PI * 6) + 0.2 * Math.sin(i / days * Math.PI * 2 + 1.2);
+    const quiet = i > 96 && i < 106 || i > 236 && i < 242;
+    const run = i > days - 16;
+    const r = rand();
+    let v = 0;
+    if (run) v = 2 + Math.round(r * 6);
+    else if (!quiet && r < (weekday ? 0.86 : 0.45)) v = Math.max(1, Math.round((0.25 + rand()) * 8 * wave));
+    out.push(v);
+  }
+  return out;
+}
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var shortDate = (d) => `${WEEKDAYS[(d.getDay() + 6) % 7]} ${d.getDate()} ${MONTHS[d.getMonth()]}`;
+var longDate = (d) => `${MONTHS[d.getMonth()]} ${d.getDate()}`;
+function Count({ value, run, still, delay = 0 }) {
+  const mv = useMotionValue(still ? value : 0);
+  const [text, setText] = React.useState(() => Math.round(still ? value : 0).toLocaleString("en-US"));
+  useMotionValueEvent(mv, "change", (v) => setText(Math.round(v).toLocaleString("en-US")));
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (!run) return;
+    if (still) {
+      mv.set(value);
+      return;
+    }
+    const c = animate(mv, value, { duration: first.current ? 1.3 : 0.7, delay: first.current ? delay : 0, ease: EASE });
+    first.current = false;
+    return () => c.stop();
+  }, [run, still, value, delay, mv]);
+  return /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: text });
+}
+var ActivityGrid = React.forwardRef(function ActivityGrid2({
+  title = "Focus sessions",
+  data: dataProp,
+  endDate,
+  unit = "session",
+  palette = "ink",
+  colors: colorsProp,
+  cellSize = 11,
+  showStats = true,
+  className
+}, forwardedRef) {
+  const ref = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => ref.current);
+  const colors = colorsProp ?? ACTIVITY_PALETTES[palette] ?? ACTIVITY_PALETTES.ink;
+  const inView = useInView(ref, { once: true, amount: 0.3 });
+  const still = !!useReducedMotion();
+  const shown = still || inView;
+  const [today] = React.useState(() => startOfDay(endDate ?? /* @__PURE__ */ new Date()));
+  const todayRow = (today.getDay() + 6) % 7;
+  const totalDays = (WEEKS - 1) * 7 + todayRow + 1;
+  const data = React.useMemo(() => {
+    const src = dataProp ?? sampleData(totalDays);
+    const tail = src.slice(-totalDays);
+    return [...Array(Math.max(0, totalDays - tail.length)).fill(0), ...tail];
+  }, [dataProp, totalDays]);
+  const firstDay = new Date(today.getTime() - (totalDays - 1) * DAY);
+  const thresholds = React.useMemo(() => {
+    const active2 = data.filter((v) => v > 0).sort((a, b) => a - b);
+    if (!active2.length) return [1, 1, 1];
+    const q = (p) => active2[Math.min(active2.length - 1, Math.floor(p * active2.length))];
+    return [q(0.25), q(0.5), q(0.75)];
+  }, [data]);
+  const levelOf = (v) => v <= 0 ? 0 : v <= thresholds[0] ? 1 : v <= thresholds[1] ? 2 : v <= thresholds[2] ? 3 : 4;
+  const gridRef = React.useRef(null);
+  const [width, setWidth] = React.useState(0);
+  React.useLayoutEffect(() => {
+    const el = gridRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([e]) => setWidth(e.contentRect.width));
+    ro.observe(el);
+    setWidth(el.getBoundingClientRect().width);
+    return () => ro.disconnect();
+  }, []);
+  const area = Math.max(0, width - DAY_LABEL_W);
+  const fit = Math.max(8, Math.floor((area + GAP) / (cellSize + GAP)));
+  const cols = Math.min(WEEKS, fit);
+  const cell = cols === WEEKS ? Math.max(cellSize, Math.min(MAX_CELL, Math.floor((area + GAP) / WEEKS) - GAP)) : cellSize;
+  const firstCol = WEEKS - cols;
+  const dayIndex = (col, row) => col * 7 + row;
+  const windowStart = firstCol * 7;
+  const windowValues = data.slice(windowStart);
+  const total = windowValues.reduce((a, b) => a + b, 0);
+  const prevStart = windowStart - windowValues.length;
+  const prevTotal = prevStart >= 0 ? data.slice(prevStart, windowStart).reduce((a, b) => a + b, 0) : null;
+  const change = prevTotal ? Math.round((total - prevTotal) / prevTotal * 100) : null;
+  const streaks = React.useMemo(() => {
+    let best = 0, bestEnd = -1, run = 0;
+    windowValues.forEach((v, i) => {
+      run = v > 0 ? run + 1 : 0;
+      if (run > best) {
+        best = run;
+        bestEnd = i;
+      }
+    });
+    let current = 0;
+    for (let i = windowValues.length - 1; i >= 0 && windowValues[i] > 0; i--) current++;
+    const at = (i) => new Date(firstDay.getTime() + (windowStart + i) * DAY);
+    return {
+      best,
+      bestRange: best ? `${longDate(at(bestEnd - best + 1))} to ${longDate(at(bestEnd))}` : "No streak yet",
+      current,
+      currentRange: current ? `Since ${longDate(at(windowValues.length - current))}` : "Start one today"
+    };
+  }, [windowValues, firstDay, windowStart]);
+  const weeksLabel = cols >= 52 ? "Last 12 months" : `Last ${cols} weeks`;
+  const plural = (n) => `${n.toLocaleString("en-US")} ${unit}${n === 1 ? "" : "s"}`;
+  const months = React.useMemo(() => {
+    const out = [];
+    let last = -1, lastCol = -10;
+    for (let c = 0; c < cols; c++) {
+      const d = new Date(firstDay.getTime() + dayIndex(firstCol + c, 0) * DAY);
+      if (d.getMonth() !== last) {
+        if (c - lastCol >= 3 && !(c === 0 && d.getDate() > 20)) {
+          out.push({ col: c, label: MONTHS[d.getMonth()] });
+          lastCol = c;
+        }
+        last = d.getMonth();
+      }
+    }
+    return out;
+  }, [cols, firstCol, firstDay]);
+  const [active, setActive] = React.useState(null);
+  const [level, setLevel] = React.useState(null);
+  const activeIdx = active ? dayIndex(firstCol + active.col, active.row) : -1;
+  const activeDate = active ? new Date(firstDay.getTime() + activeIdx * DAY) : null;
+  const tip = active && activeIdx < totalDays ? `${plural(data[activeIdx])}, ${shortDate(activeDate)}` : "";
+  const onKey = (e) => {
+    const moves = {
+      ArrowRight: [1, 0],
+      ArrowLeft: [-1, 0],
+      ArrowDown: [0, 1],
+      ArrowUp: [0, -1]
+    };
+    const m = moves[e.key];
+    if (e.key === "Escape") return setActive(null);
+    if (!m) return;
+    e.preventDefault();
+    setActive((a) => {
+      const from = a ?? { col: cols - 1, row: todayRow };
+      let col = Math.max(0, Math.min(cols - 1, from.col + m[0]));
+      let row = Math.max(0, Math.min(6, from.row + m[1]));
+      if (col === cols - 1 && row > todayRow) row = todayRow;
+      return { col, row };
+    });
+  };
+  const [hoverStat, setHoverStat] = React.useState(null);
+  const stats = [
+    { label: `Total ${unit}s`, value: total, suffix: "", note: weeksLabel, Icon: ActivityIcon },
+    { label: "Longest streak", value: streaks.best, suffix: streaks.best === 1 ? " day" : " days", note: streaks.bestRange, Icon: FlameIcon },
+    { label: "Current streak", value: streaks.current, suffix: streaks.current === 1 ? " day" : " days", note: streaks.currentRange, Icon: ZapIcon }
+  ];
+  const gridH = 7 * cell + 6 * GAP;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref,
+      initial: still ? false : { opacity: 0, y: 16 },
+      animate: shown ? { opacity: 1, y: 0 } : void 0,
+      transition: { duration: 0.6, ease: EASE },
+      style: {
+        "--ag": colors[3],
+        "--l1": colors[0],
+        "--l2": colors[1],
+        "--l3": colors[2],
+        "--l4": colors[3]
+      },
+      className: cn(
+        // Ink would vanish on a dark card, so it turns into a light ramp there.
+        !colorsProp && palette === "ink" && "dark:[--ag:#e4e4e7] dark:[--l1:#3f3f46] dark:[--l2:#71717a] dark:[--l3:#a1a1aa] dark:[--l4:#e4e4e7]",
+        "relative w-full min-w-[260px] rounded-3xl bg-white p-5 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] sm:p-6 dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: title }),
+            /* @__PURE__ */ jsxs("p", { className: "mt-1 flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[32px] font-semibold leading-none tracking-[-0.03em]", children: /* @__PURE__ */ jsx(Count, { value: total, run: shown, still, delay: 0.2 }) }),
+              /* @__PURE__ */ jsxs("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [
+                unit,
+                "s"
+              ] }),
+              change !== null && /* @__PURE__ */ jsxs(
+                "span",
+                {
+                  className: cn(
+                    "inline-flex h-6 items-center gap-1 self-center rounded-full px-2 text-xs font-medium tabular-nums",
+                    change >= 0 ? "bg-[#269a5a]/10 text-[#269a5a]" : "bg-[#242423]/[0.06] text-zinc-500 dark:bg-white/[0.08] dark:text-zinc-400"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(TrendingUpIcon, { className: cn("size-3", change < 0 && "-scale-y-100"), active: shown, strokeWidth: 2.5 }),
+                    change >= 0 ? "+" : "",
+                    change,
+                    "%"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-[#242423]/[0.06] px-3 py-1 text-xs font-medium text-zinc-500 dark:bg-white/[0.08] dark:text-zinc-400", children: weeksLabel })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { ref: gridRef, className: "relative mt-5 w-full", children: [
+          width > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "relative h-4 text-xs text-zinc-400 dark:text-zinc-500", style: { marginLeft: DAY_LABEL_W }, children: months.map((m) => /* @__PURE__ */ jsx("span", { className: "absolute top-0", style: { left: m.col * (cell + GAP) }, children: m.label }, `${m.col}-${m.label}`)) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex", children: [
+              /* @__PURE__ */ jsx("div", { className: "relative shrink-0 text-xs text-zinc-400 dark:text-zinc-500", style: { width: DAY_LABEL_W, height: gridH }, children: [0, 2, 4].map((r) => /* @__PURE__ */ jsx("span", { className: "absolute left-0 leading-none", style: { top: r * (cell + GAP) + cell / 2 - 6 }, children: WEEKDAYS[r] }, r)) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "grid",
+                  tabIndex: 0,
+                  "aria-label": `${title}: ${plural(total)} in the ${weeksLabel.toLowerCase()}. Use the arrow keys to read each day.`,
+                  onKeyDown: onKey,
+                  onBlur: () => setActive(null),
+                  onPointerLeave: () => setActive(null),
+                  className: "relative grid rounded-md outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4 dark:focus-visible:ring-offset-zinc-900",
+                  style: {
+                    gridTemplateColumns: `repeat(${cols}, ${cell}px)`,
+                    gridTemplateRows: `repeat(7, ${cell}px)`,
+                    gridAutoFlow: "column",
+                    gap: GAP
+                  },
+                  children: Array.from({ length: cols * 7 }, (_, i) => {
+                    const col = Math.floor(i / 7);
+                    const row = i % 7;
+                    const idx = dayIndex(firstCol + col, row);
+                    if (idx >= totalDays) return /* @__PURE__ */ jsx("span", { "aria-hidden": true }, i);
+                    const v = data[idx];
+                    const lv = levelOf(v);
+                    const lit = level !== null ? lv === level : active ? active.col === col || active.row === row : true;
+                    const isActive = active?.col === col && active.row === row;
+                    const isToday = idx === totalDays - 1;
+                    return /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": true,
+                        onPointerEnter: () => setActive({ col, row }),
+                        className: "relative transition-opacity duration-150",
+                        style: { opacity: lit ? 1 : 0.35 },
+                        children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "absolute inset-0 rounded-[3px] bg-[#242423]/[0.06] dark:bg-white/[0.07]",
+                              isToday && "ring-1 ring-[var(--ag)] ring-offset-1 ring-offset-white dark:ring-offset-zinc-900"
+                            ),
+                            style: {
+                              opacity: shown ? 1 : 0,
+                              transform: shown ? isActive ? "scale(1.35)" : "scale(1)" : "scale(0.3)",
+                              transition: still ? "none" : `opacity 0.4s ${EASE_CSS} ${shown && !active ? (col * 0.014 + row * 0.02).toFixed(3) : 0}s, transform 0.45s cubic-bezier(0.34,1.56,0.64,1) ${shown && !active ? (col * 0.014 + row * 0.02).toFixed(3) : 0}s`,
+                              zIndex: isActive ? 2 : void 0
+                            },
+                            children: lv > 0 && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-[3px]", style: { backgroundColor: `var(--l${lv})` } })
+                          }
+                        )
+                      },
+                      i
+                    );
+                  })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: active && tip && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                role: "status",
+                initial: { opacity: 0, y: 4, scale: 0.96 },
+                animate: { opacity: 1, y: 0, scale: 1 },
+                exit: { opacity: 0, y: 2, scale: 0.98, transition: { duration: 0.1 } },
+                transition: { duration: 0.16, ease: EASE },
+                className: "pointer-events-none absolute z-10 -translate-x-1/2 whitespace-nowrap rounded-lg bg-[#242423] px-2.5 py-1.5 text-xs font-medium text-white shadow-[0_8px_20px_-8px_rgba(0,0,0,0.35)] dark:bg-zinc-100 dark:text-zinc-900",
+                style: {
+                  left: Math.min(
+                    Math.max(DAY_LABEL_W + active.col * (cell + GAP) + cell / 2, 70),
+                    Math.max(70, width - 70)
+                  ),
+                  top: 16 + 6 + active.row * (cell + GAP) - 34
+                },
+                children: tip
+              },
+              "tip"
+            ) })
+          ] }),
+          width === 0 && /* @__PURE__ */ jsx("div", { style: { height: gridH + 22 } })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-end gap-1.5 text-xs text-zinc-400 dark:text-zinc-500", children: [
+          /* @__PURE__ */ jsx("span", { className: "mr-0.5", children: "Less" }),
+          LEVELS.map((lv) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": lv === 0 ? "Show days with none" : `Show level ${lv} of 4`,
+              onPointerEnter: () => setLevel(lv),
+              onPointerLeave: () => setLevel(null),
+              onFocus: () => setLevel(lv),
+              onBlur: () => setLevel(null),
+              className: cn(
+                "relative size-3 rounded-[3px] bg-[#242423]/[0.06] outline-none transition-transform duration-150 hover:scale-125 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.07]",
+                level === lv && "scale-125"
+              ),
+              children: lv > 0 && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-[3px]", style: { backgroundColor: `var(--l${lv})` } })
+            },
+            lv
+          )),
+          /* @__PURE__ */ jsx("span", { className: "ml-0.5", children: "More" })
+        ] }),
+        showStats && /* @__PURE__ */ jsx("div", { className: "mt-4 grid grid-cols-3 gap-2", children: stats.map((s, i) => /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            onPointerEnter: () => setHoverStat(i),
+            onPointerLeave: () => setHoverStat(null),
+            initial: still ? false : { opacity: 0, y: 10 },
+            animate: shown ? { opacity: 1, y: 0 } : void 0,
+            transition: { duration: 0.5, delay: still ? 0 : 0.5 + i * 0.08, ease: EASE },
+            className: "min-w-0 rounded-2xl bg-[#242423]/[0.04] p-3 transition-colors duration-200 hover:bg-[#242423]/[0.07] dark:bg-white/[0.05] dark:hover:bg-white/[0.08]",
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400", children: [
+                /* @__PURE__ */ jsx(s.Icon, { className: "size-3.5 shrink-0", active: hoverStat === i, strokeWidth: 2.25 }),
+                /* @__PURE__ */ jsx("span", { className: "truncate", children: s.label })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "mt-1.5 truncate text-base font-semibold tracking-tight", children: [
+                /* @__PURE__ */ jsx(Count, { value: s.value, run: shown, still, delay: 0.55 + i * 0.08 }),
+                /* @__PURE__ */ jsx("span", { className: "font-normal text-zinc-500 dark:text-zinc-400", children: s.suffix })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-xs text-zinc-400 dark:text-zinc-500", children: s.note })
+            ]
+          },
+          s.label
+        )) })
+      ]
+    }
+  );
+});
+
+export {
+  ACTIVITY_PALETTES,
+  ActivityGrid
+};

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
+};