motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-AQN6BHWC.js

@@ -0,0 +1,325 @@
+"use client";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/metric-split/metric-split.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 GLIDE = [0.22, 1, 0.36, 1];
+var FILL = [0.5, 1, 0.89, 1];
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+var MAX_BLUR = 0.5;
+var MIN_SHARE = 0.15;
+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 numeric = ["integer", "group", "decimal", "fraction"];
+  const lastNum = parts.reduce((last, p, i) => numeric.includes(p.type) ? i : last, -1);
+  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 ?? 0;
+  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}`));
+  }
+  if (fractionDigits > 0) 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 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -4 },
+  transition: { duration: 0.25, ease: GLIDE }
+};
+var DEFAULT_METRICS = ["Total visits", "Page views", "Downloads"];
+var DEFAULT_PERIODS = [
+  { label: "Week", values: [124, 87, 10] },
+  { label: "Month", values: [690, 240, 61] },
+  { label: "Year", values: [5200, 4100, 1300] }
+];
+function barStyle(index, color) {
+  if (index === 0) return { background: color };
+  if (index === 1) return { background: color, opacity: 0.45 };
+  return {
+    backgroundImage: `repeating-linear-gradient(120deg, ${color} 0 2px, transparent 2px 5px)`,
+    opacity: 0.6
+  };
+}
+function dotStyle(index, color) {
+  if (index === 0) return { background: color };
+  if (index === 1) return { background: color, opacity: 0.45 };
+  return { boxShadow: `inset 0 0 0 1.5px ${color}`, opacity: 0.7 };
+}
+function Column({
+  index,
+  label,
+  count,
+  share,
+  total,
+  color,
+  format,
+  shown,
+  dim,
+  active,
+  inView,
+  still,
+  onActive
+}) {
+  const grow = useTransform(share, (s) => Math.max(MIN_SHARE, s));
+  const percent = total > 0 ? Math.round(shown / total * 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      tabIndex: 0,
+      "aria-label": `${format.format(shown)} ${label}, ${percent}% of total`,
+      onPointerEnter: () => onActive(true),
+      onPointerLeave: () => onActive(false),
+      onFocus: () => onActive(true),
+      onBlur: () => onActive(false),
+      style: { flexGrow: grow, flexBasis: 0 },
+      animate: { opacity: dim ? 0.28 : 1 },
+      transition: { duration: 0.25, ease: GLIDE },
+      className: "flex min-w-[92px] flex-col rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4",
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "relative h-2.5 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800/60", children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "absolute inset-0 rounded-full",
+            style: barStyle(index, color),
+            initial: { x: "-101%" },
+            animate: { x: inView ? "0%" : "-101%" },
+            transition: still ? { duration: 0 } : { duration: 0.8, ease: GLIDE, delay: 0.1 + index * 0.12 }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 grid text-[12px] text-zinc-500 dark:text-zinc-400", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsxs(
+          motion.span,
+          {
+            ...POP,
+            className: "col-start-1 row-start-1 inline-flex min-w-0 items-center gap-1.5",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "size-2 shrink-0 rounded-full", style: dotStyle(index, color) }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: active ? `${percent}% of total` : label })
+            ]
+          },
+          active ? "share" : "label"
+        ) }) }),
+        /* @__PURE__ */ jsx("p", { className: "mt-1 text-[22px] font-medium tracking-tight text-zinc-900 dark:text-zinc-100", children: /* @__PURE__ */ jsx(Odometer, { amount: count, format, label: format.format(shown) }) })
+      ]
+    }
+  );
+}
+var MetricSplit = React.forwardRef(function MetricSplit2({
+  metrics = DEFAULT_METRICS,
+  periods = DEFAULT_PERIODS,
+  defaultPeriod,
+  color = "#8b5cf6",
+  title = "Site activity",
+  subtitle = "How people find and use your page",
+  duration = 1.4,
+  locale = "en-US",
+  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 pillId = React.useId();
+  const [period, setPeriod] = React.useState(defaultPeriod ?? periods[0]?.label ?? "");
+  const [active, setActive] = React.useState(null);
+  const format = React.useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }), [locale]);
+  const values = periods.find((p) => p.label === period)?.values ?? periods[0]?.values ?? [];
+  const total = values.reduce((sum, v) => sum + v, 0);
+  const c0 = useMotionValue(0);
+  const c1 = useMotionValue(0);
+  const c2 = useMotionValue(0);
+  const s0 = useMotionValue(1 / 3);
+  const s1 = useMotionValue(1 / 3);
+  const s2 = useMotionValue(1 / 3);
+  const counts = [c0, c1, c2];
+  const shares = [s0, s1, s2];
+  React.useEffect(() => {
+    if (!inView) return;
+    const runs = [0, 1, 2].flatMap((i) => {
+      const v = values[i] ?? 0;
+      const sh = total > 0 ? v / total : 1 / 3;
+      if (reduceMotion) {
+        counts[i].set(v);
+        shares[i].set(sh);
+        return [];
+      }
+      return [
+        animate(counts[i], v, { duration, ease: FILL }),
+        animate(shares[i], sh, { duration: duration * 0.8, ease: FILL })
+      ];
+    });
+    return () => runs.forEach((r) => r.stop());
+  }, [inView, period, total, duration, reduceMotion]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: cn(
+        "w-[420px] max-w-full rounded-3xl bg-white px-5 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 px-1", 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 })
+          ] }),
+          onAction && /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              type: "button",
+              onClick: onAction,
+              "aria-label": typeof actionLabel === "string" ? actionLabel : "View report",
+              initial: "rest",
+              whileHover: "hover",
+              whileTap: "press",
+              variants: { rest: { scale: 1 }, hover: { scale: 1 }, press: { scale: 0.94 } },
+              transition: { duration: 0.15, ease: GLIDE },
+              className: "grid size-9 shrink-0 cursor-pointer place-items-center rounded-full bg-[#242423]/6 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: /* @__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-4", strokeWidth: 2.5 })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "radiogroup",
+            "aria-label": "Period",
+            className: "mt-4 inline-flex rounded-full bg-[#242423]/6 p-0.5 dark:bg-white/8",
+            children: periods.map((p) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "radio",
+                "aria-checked": period === p.label,
+                onClick: () => setPeriod(p.label),
+                className: "relative cursor-pointer rounded-full px-3 py-1 text-[12px] font-medium text-zinc-500 outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 aria-checked:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 dark:aria-checked:text-zinc-100",
+                children: [
+                  period === p.label && /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      layoutId: `${pillId}-pill`,
+                      transition: { duration: 0.35, ease: GLIDE },
+                      className: "absolute inset-0 rounded-full bg-white shadow-sm dark:bg-zinc-700"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "relative", children: p.label })
+                ]
+              },
+              p.label
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { role: "group", "aria-label": `${period} breakdown`, className: "mt-12 flex gap-1.5", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+          Column,
+          {
+            index: i,
+            label: metrics[i] ?? "",
+            count: counts[i],
+            share: shares[i],
+            total,
+            color,
+            format,
+            shown: values[i] ?? 0,
+            dim: active !== null && active !== i,
+            active: active === i,
+            inView,
+            still: reduceMotion,
+            onActive: (on) => setActive((cur) => on ? i : cur === i ? null : cur)
+          },
+          metrics[i] ?? i
+        )) })
+      ]
+    }
+  );
+});
+
+export {
+  MetricSplit
+};