motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-AVOS73MR.js

@@ -0,0 +1,537 @@
+"use client";
+import {
+  MoonIcon,
+  SunIcon
+} from "./chunk-ZWGOAY27.js";
+import {
+  ClockIcon
+} from "./chunk-LBRMNY72.js";
+import {
+  ArrowRightIcon
+} from "./chunk-H7XKIWHA.js";
+import {
+  SparklesIcon
+} from "./chunk-YGONLKWH.js";
+import {
+  TrendingUpIcon
+} from "./chunk-SSWKGVRI.js";
+import {
+  FlameIcon
+} from "./chunk-YVYYDPE2.js";
+import {
+  FILE_TEXT
+} from "./chunk-OINRQUYT.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/recap-card/recap-card.tsx
+import * as React from "react";
+import {
+  animate,
+  motion as motion2,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion as useReducedMotion2,
+  useTransform
+} from "motion/react";
+
+// src/icons/feather.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FEATHER_VARIANTS = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    x: 0
+  },
+  animate: {
+    rotate: [0, -8, 4, -3, 0],
+    y: [0, -4, -2, -1, 0],
+    x: [0, 2, -2, 1, 0],
+    transition: {
+      duration: 1.6,
+      ease: "easeInOut"
+    }
+  }
+};
+var FeatherIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          motion.svg,
+          {
+            animate: controls,
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            variants: FEATHER_VARIANTS,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("path", { d: "M12.67 19a2 2 0 0 0 1.416-.588l6.154-6.172a6 6 0 0 0-8.49-8.49L5.586 9.914A2 2 0 0 0 5 11.328V18a1 1 0 0 0 1 1z" }),
+              /* @__PURE__ */ jsx("path", { d: "M16 8 2 22" }),
+              /* @__PURE__ */ jsx("path", { d: "M17.5 15H9" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+FeatherIcon.displayName = "FeatherIcon";
+
+// src/components/recap-card/recap-card.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ICONS = {
+  words: FILE_TEXT,
+  trend: TrendingUpIcon,
+  streak: FlameIcon,
+  time: ClockIcon,
+  spark: SparklesIcon,
+  sun: SunIcon,
+  moon: MoonIcon,
+  feather: FeatherIcon
+};
+var DEFAULT_PARTS = [
+  "This month you wrote ",
+  { value: 12480, suffix: " words", icon: "words" },
+  ", ",
+  { value: 18, suffix: "% more", icon: "trend" },
+  " than in October. You finished ",
+  { value: 9, suffix: " drafts" },
+  " and kept a ",
+  { value: 14, suffix: " day streak", icon: "streak" },
+  " going."
+];
+var DEFAULT_BADGES = [
+  { label: "Early riser", icon: "sun", note: "Wrote before 8 am on 10 mornings" },
+  { label: "Streak keeper", icon: "streak", note: "14 days in a row, your best yet" },
+  { label: "Wordsmith", icon: "feather", note: "Passed 10,000 words in a month" },
+  { label: "Night owl", icon: "moon", note: "4 of 7 late sessions, 3 to go", progress: 4 / 7 }
+];
+var EASE = [0.22, 1, 0.36, 1];
+var POP = { type: "spring", stiffness: 420, damping: 22 };
+var row = {
+  hidden: {},
+  shown: { transition: { staggerChildren: 0.08, delayChildren: 0.35 } }
+};
+var pop = {
+  hidden: { opacity: 0, scale: 0.6, rotate: -10, y: 8 },
+  shown: { opacity: 1, scale: 1, rotate: 0, y: 0, transition: POP }
+};
+var format = (n, decimals) => n.toLocaleString("en-US", {
+  minimumFractionDigits: decimals,
+  maximumFractionDigits: decimals
+});
+function StatChip({
+  stat,
+  run,
+  still,
+  delay
+}) {
+  const decimals = stat.decimals ?? 0;
+  const value = useMotionValue(still ? stat.value : 0);
+  const [text, setText] = React.useState(
+    () => format(still ? stat.value : 0, decimals)
+  );
+  const [playing, setPlaying] = React.useState(false);
+  useMotionValueEvent(value, "change", (v) => setText(format(v, decimals)));
+  React.useEffect(() => {
+    if (!run) return;
+    if (still) {
+      value.set(stat.value);
+      return;
+    }
+    const controls = animate(value, stat.value, {
+      duration: 1.2,
+      delay,
+      ease: EASE
+    });
+    const on = window.setTimeout(() => setPlaying(true), delay * 1e3);
+    const off = window.setTimeout(() => setPlaying(false), delay * 1e3 + 1100);
+    return () => {
+      controls.stop();
+      window.clearTimeout(on);
+      window.clearTimeout(off);
+    };
+  }, [run, still, stat.value, delay, value]);
+  const Icon = stat.icon ? ICONS[stat.icon] : null;
+  return /* @__PURE__ */ jsxs2("span", { className: "inline-flex h-7 translate-y-[-1px] items-center gap-1.5 rounded-full bg-[#242423]/[0.06] px-2.5 align-middle text-sm font-semibold text-[#242423] dark:bg-white/[0.08] dark:text-zinc-100", children: [
+    Icon && /* @__PURE__ */ jsx2(Icon, { className: "size-3.5", active: playing, strokeWidth: 2.25 }),
+    /* @__PURE__ */ jsxs2("span", { className: "tabular-nums", children: [
+      stat.prefix,
+      text,
+      stat.suffix
+    ] })
+  ] });
+}
+var NOTE_GAP = 8;
+var NOTE_NECK = 12;
+var NOTE_R = 14;
+var NOTE_MAX = 220;
+var RISE = { type: "spring", stiffness: 560, damping: 26 };
+var SPREAD = { type: "spring", stiffness: 300, damping: 21, delay: 0.05 };
+var NOTE_ANGLE = 58 * Math.PI / 180;
+function noteShape(r, w, h, rise, spread) {
+  const xt = r * Math.sin(NOTE_ANGLE);
+  const yt = -r * Math.cos(NOTE_ANGLE);
+  const pb = -r - NOTE_GAP * rise;
+  const W = 2 * xt + (w - 2 * xt) * spread;
+  const H = h * rise;
+  const top = pb - H;
+  const x = W / 2;
+  const R = Math.max(0, Math.min(NOTE_R, H / 2, x));
+  const n = Math.max(0, Math.min(NOTE_NECK * spread, x - xt - 1));
+  const xe = xt + n;
+  const Rb = Math.max(0, Math.min(R, x - xe));
+  const dy = Math.max(0, yt - pb);
+  const c1x = xt - Math.cos(NOTE_ANGLE) * dy * 0.45;
+  const c1y = yt - Math.sin(NOTE_ANGLE) * dy * 0.45;
+  const c2x = xe - n * 0.6;
+  return [
+    `M${-xt} ${yt}`,
+    `A${r} ${r} 0 1 0 ${xt} ${yt}`,
+    `C${c1x} ${c1y} ${c2x} ${pb} ${xe} ${pb}`,
+    `L${x - Rb} ${pb}`,
+    `A${Rb} ${Rb} 0 0 0 ${x} ${pb - Rb}`,
+    `L${x} ${top + R}`,
+    `A${R} ${R} 0 0 0 ${x - R} ${top}`,
+    `L${-x + R} ${top}`,
+    `A${R} ${R} 0 0 0 ${-x} ${top + R}`,
+    `L${-x} ${pb - Rb}`,
+    `A${Rb} ${Rb} 0 0 0 ${-x + Rb} ${pb}`,
+    `L${-xe} ${pb}`,
+    `C${-c2x} ${pb} ${-c1x} ${c1y} ${-xt} ${yt}`,
+    "Z"
+  ].join(" ");
+}
+function LiquidNote({
+  open,
+  note,
+  id,
+  radius,
+  still
+}) {
+  const rise = useMotionValue(0);
+  const spread = useMotionValue(0);
+  const measure = React.useRef(null);
+  const [size, setSize] = React.useState({ w: 160, h: 36 });
+  const [mounted, setMounted] = React.useState(false);
+  React.useLayoutEffect(() => {
+    const m = measure.current;
+    if (m) setSize({ w: Math.min(NOTE_MAX, m.offsetWidth), h: m.offsetHeight });
+  }, [note]);
+  React.useEffect(() => {
+    if (open) setMounted(true);
+    if (still) {
+      rise.set(open ? 1 : 0);
+      spread.set(open ? 1 : 0);
+      if (!open) setMounted(false);
+      return;
+    }
+    if (open) {
+      const a2 = animate(rise, 1, RISE);
+      const b2 = animate(spread, 1, SPREAD);
+      return () => {
+        a2.stop();
+        b2.stop();
+      };
+    }
+    const b = animate(spread, 0, { type: "spring", stiffness: 640, damping: 42, restDelta: 0.01 });
+    const a = animate(rise, 0, {
+      type: "spring",
+      stiffness: 560,
+      damping: 40,
+      delay: 0.04,
+      restDelta: 0.01,
+      restSpeed: 0.05
+    });
+    a.then(() => setMounted(false));
+    return () => {
+      a.stop();
+      b.stop();
+    };
+  }, [open, still, rise, spread]);
+  const d = useTransform(
+    () => noteShape(radius, Math.max(size.w, radius * 2), size.h, rise.get(), spread.get())
+  );
+  const textOpacity = useTransform(spread, [0.55, 0.95], [0, 1]);
+  const shapeOpacity = useTransform(rise, [0, 0.35], [0, 1]);
+  const textY = useTransform(rise, (p) => -radius - NOTE_GAP * p - size.h * p / 2 - size.h / 2);
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        ref: measure,
+        "aria-hidden": true,
+        className: "pointer-events-none invisible absolute w-max max-w-[220px] text-balance px-3.5 py-2 text-center text-xs font-medium leading-snug",
+        children: note
+      }
+    ),
+    mounted && /* @__PURE__ */ jsxs2("span", { className: "pointer-events-none absolute left-1/2 top-1/2 z-10 text-[#242423] dark:text-zinc-100", children: [
+      /* @__PURE__ */ jsx2("svg", { "aria-hidden": true, width: "1", height: "1", className: "absolute left-0 top-0 overflow-visible", children: /* @__PURE__ */ jsx2(motion2.path, { d, fill: "currentColor", style: { opacity: shapeOpacity } }) }),
+      /* @__PURE__ */ jsx2(
+        motion2.span,
+        {
+          role: "tooltip",
+          id,
+          style: { y: textY, opacity: textOpacity, x: "-50%" },
+          className: "absolute left-0 top-0 block w-max max-w-[220px] text-balance px-3.5 py-2 text-center text-xs font-medium leading-snug text-white dark:text-zinc-900",
+          children: note
+        }
+      )
+    ] })
+  ] });
+}
+function Badge({
+  badge,
+  index,
+  still,
+  shown
+}) {
+  const [open, setOpen] = React.useState(false);
+  const progress = Math.min(1, Math.max(0, badge.progress ?? 1));
+  const earned = progress >= 1;
+  const Icon = ICONS[badge.icon];
+  const noteId = React.useId();
+  const disc = React.useRef(null);
+  const [discRadius, setDiscRadius] = React.useState(26);
+  React.useLayoutEffect(() => {
+    const el = disc.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setDiscRadius(el.offsetWidth / 2));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const R = 30;
+  return /* @__PURE__ */ jsxs2(motion2.li, { variants: pop, className: cn("relative flex min-w-0 flex-1 justify-center", open && "z-20"), children: [
+    /* @__PURE__ */ jsxs2(
+      motion2.button,
+      {
+        type: "button",
+        "aria-describedby": noteId,
+        "aria-label": `${badge.label}${earned ? ", earned" : `, ${Math.round(progress * 100)}% there`}`,
+        onPointerEnter: () => setOpen(true),
+        onPointerLeave: () => setOpen(false),
+        onFocus: () => setOpen(true),
+        onBlur: () => setOpen(false),
+        whileHover: still ? void 0 : { y: -4 },
+        whileTap: still ? void 0 : { scale: 0.94 },
+        transition: POP,
+        className: "group/badge flex w-full flex-col items-center gap-2.5 rounded-2xl pb-1 pt-2 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+        children: [
+          /* @__PURE__ */ jsxs2("span", { className: "relative grid size-14 place-items-center sm:size-16", children: [
+            /* @__PURE__ */ jsx2(LiquidNote, { open, note: badge.note, id: noteId, radius: discRadius, still }),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                ref: disc,
+                className: cn(
+                  "absolute inset-1.5 rounded-full transition-colors duration-200",
+                  open ? "bg-[#242423] dark:bg-zinc-100" : earned ? "bg-[#242423]/[0.06] dark:bg-white/[0.08]" : "bg-[#242423]/[0.03] dark:bg-white/[0.04]"
+                )
+              }
+            ),
+            !earned && /* @__PURE__ */ jsxs2("svg", { viewBox: "0 0 64 64", "aria-hidden": true, className: "absolute inset-0 -rotate-90", children: [
+              /* @__PURE__ */ jsx2("circle", { cx: "32", cy: "32", r: R, fill: "none", strokeWidth: "3", className: "stroke-[#242423]/[0.08] dark:stroke-white/10" }),
+              /* @__PURE__ */ jsx2(
+                motion2.circle,
+                {
+                  cx: "32",
+                  cy: "32",
+                  r: R,
+                  fill: "none",
+                  strokeWidth: "3",
+                  strokeLinecap: "round",
+                  className: "stroke-[#242423] dark:stroke-zinc-100",
+                  initial: { pathLength: still ? progress : 0 },
+                  animate: { pathLength: shown ? progress : 0 },
+                  transition: { duration: 1.1, delay: still ? 0 : 0.6 + index * 0.08, ease: EASE }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx2(
+              Icon,
+              {
+                className: cn(
+                  "relative z-20 size-6 transition-colors duration-300",
+                  open ? "text-white dark:text-zinc-900" : earned ? "text-[#242423] dark:text-zinc-100" : "text-zinc-400 dark:text-zinc-500"
+                ),
+                strokeWidth: 1.75
+              }
+            ),
+            earned && /* @__PURE__ */ jsx2(
+              motion2.span,
+              {
+                "aria-hidden": true,
+                initial: still ? false : { scale: 0 },
+                animate: { scale: shown ? 1 : 0 },
+                transition: { ...POP, delay: still ? 0 : 0.75 + index * 0.08 },
+                className: "absolute bottom-1 right-1 z-20 grid size-4 place-items-center rounded-full bg-[#242423] text-white ring-2 ring-white dark:bg-zinc-100 dark:text-zinc-900 dark:ring-zinc-900",
+                children: /* @__PURE__ */ jsx2("svg", { viewBox: "0 0 12 12", className: "size-2.5", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("path", { d: "M3 6.2 5 8l4-4.2" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs2("span", { className: "flex flex-col items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx2("span", { className: "text-xs font-medium leading-tight text-[#242423] sm:text-sm dark:text-zinc-100", children: badge.label }),
+            /* @__PURE__ */ jsx2("span", { className: "text-xs tabular-nums text-zinc-500 dark:text-zinc-400", children: earned ? "Earned" : `${Math.round(progress * 100)}%` })
+          ] })
+        ]
+      }
+    ),
+    !open && /* @__PURE__ */ jsx2("span", { id: noteId, className: "sr-only", children: badge.note })
+  ] });
+}
+var RecapCard = React.forwardRef(
+  function RecapCard2({
+    title = "Your month in words",
+    period = "November",
+    parts = DEFAULT_PARTS,
+    badges = DEFAULT_BADGES,
+    actionLabel = "View full recap",
+    href,
+    onAction,
+    className
+  }, forwardedRef) {
+    const ref = React.useRef(null);
+    React.useImperativeHandle(forwardedRef, () => ref.current);
+    const inView = useInView(ref, { once: true, amount: 0.35 });
+    const still = !!useReducedMotion2();
+    const shown = still || inView;
+    const [hoverAction, setHoverAction] = React.useState(false);
+    let statIndex = 0;
+    const sentence = parts.map((p, i) => {
+      if (typeof p === "string") return /* @__PURE__ */ jsx2(React.Fragment, { children: p }, i);
+      const delay = 0.15 + statIndex++ * 0.12;
+      return /* @__PURE__ */ jsx2(StatChip, { stat: p, run: shown, still, delay }, i);
+    });
+    const spoken = parts.map(
+      (p) => typeof p === "string" ? p : `${p.prefix ?? ""}${format(p.value, p.decimals ?? 0)}${p.suffix ?? ""}`
+    ).join("");
+    const ActionTag = href ? motion2.a : motion2.button;
+    return /* @__PURE__ */ jsxs2(
+      motion2.div,
+      {
+        ref,
+        initial: still ? false : { opacity: 0, y: 16, scale: 0.98 },
+        animate: shown ? { opacity: 1, y: 0, scale: 1 } : void 0,
+        transition: { duration: 0.6, ease: EASE },
+        className: cn(
+          "relative w-[440px] max-w-full rounded-3xl bg-white p-6 text-[#242423] 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__ */ jsxs2("div", { className: "flex items-start justify-between gap-4", children: [
+            /* @__PURE__ */ jsx2("h3", { className: "text-lg font-semibold tracking-tight", children: title }),
+            period && /* @__PURE__ */ jsx2("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: period })
+          ] }),
+          /* @__PURE__ */ jsx2("p", { "aria-label": spoken, className: "mt-3 text-base leading-[2] text-zinc-500 dark:text-zinc-400", children: /* @__PURE__ */ jsx2("span", { "aria-hidden": true, children: sentence }) }),
+          /* @__PURE__ */ jsx2(
+            motion2.ul,
+            {
+              variants: row,
+              initial: still ? "shown" : "hidden",
+              animate: shown ? "shown" : "hidden",
+              className: "mt-5 flex items-start gap-1",
+              children: badges.map((b, i) => /* @__PURE__ */ jsx2(Badge, { badge: b, index: i, still, shown }, b.label))
+            }
+          ),
+          actionLabel && /* @__PURE__ */ jsxs2(
+            ActionTag,
+            {
+              ...href ? { href } : { type: "button" },
+              onClick: onAction,
+              onPointerEnter: () => setHoverAction(true),
+              onPointerLeave: () => setHoverAction(false),
+              onFocus: () => setHoverAction(true),
+              onBlur: () => setHoverAction(false),
+              whileTap: still ? void 0 : { scale: 0.98 },
+              initial: still ? false : { opacity: 0, y: 8 },
+              animate: shown ? { opacity: 1, y: 0 } : void 0,
+              transition: { duration: 0.5, delay: still ? 0 : 0.8, ease: EASE },
+              className: "mt-5 flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-full bg-[#242423]/[0.06] text-sm font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:text-zinc-100 dark:hover:bg-white/[0.12]",
+              children: [
+                actionLabel,
+                /* @__PURE__ */ jsx2(ArrowRightIcon, { className: "size-4", active: hoverAction })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  RecapCard
+};