motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-BPF3FQRS.js

@@ -0,0 +1,590 @@
+"use client";
+import {
+  MonitorCheckIcon
+} from "./chunk-NNKC6NEH.js";
+import {
+  ArrowDownRightIcon
+} from "./chunk-25254AZA.js";
+import {
+  SmartphoneNfcIcon
+} from "./chunk-OS6REIBR.js";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/device-traffic/device-traffic.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion as motion2,
+  useInView,
+  useReducedMotion as useReducedMotion2
+} from "motion/react";
+import { Tablet } from "lucide-react";
+
+// src/icons/radio.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 VARIANTS = {
+  normal: {
+    opacity: 1,
+    transition: {
+      duration: 0.4
+    }
+  },
+  fadeOut: {
+    opacity: 0,
+    transition: { duration: 0.3 }
+  },
+  fadeIn: (i) => ({
+    opacity: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 20,
+      delay: i * 0.1
+    }
+  })
+};
+var RadioIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: async () => {
+          await controls.start("fadeOut");
+          controls.start("fadeIn");
+        },
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      async (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          await controls.start("fadeOut");
+          controls.start("fadeIn");
+        }
+      },
+      [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(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  custom: 1,
+                  d: "M4.9 19.1C1 15.2 1 8.8 4.9 4.9",
+                  initial: { opacity: 1 },
+                  variants: VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  custom: 0,
+                  d: "M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5",
+                  initial: { opacity: 1 },
+                  variants: VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" }),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  custom: 0,
+                  d: "M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5",
+                  initial: { opacity: 1 },
+                  variants: VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  custom: 1,
+                  d: "M19.1 4.9C23 8.8 23 15.1 19.1 19",
+                  initial: { opacity: 1 },
+                  variants: VARIANTS
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+RadioIcon.displayName = "RadioIcon";
+
+// src/components/device-traffic/device-traffic.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PALETTE = ["#4f46e5", "#38bdf8", "#34d399"];
+var GOOD = "#269a5a";
+var BAD = "#d64545";
+var GLIDE = [0.22, 1, 0.36, 1];
+var ROLL = { type: "spring", stiffness: 200, damping: 26 };
+var LEVEL = { type: "spring", stiffness: 120, damping: 18 };
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+var DEFAULT_DEVICES = [
+  { name: "Desktop", kind: "desktop", share: 27, change: -3.2 },
+  { name: "Tablet", kind: "tablet", share: 12, change: -6.4 },
+  { name: "Mobile", kind: "mobile", share: 61, change: 0.8 }
+];
+function Digit({ digit, still }) {
+  return /* @__PURE__ */ jsx2("span", { className: "relative inline-block h-[1em] w-[0.62em] overflow-hidden", children: /* @__PURE__ */ jsx2(
+    motion2.span,
+    {
+      className: "absolute inset-x-0 top-0 flex flex-col",
+      initial: false,
+      animate: { y: `${-digit * 10}%` },
+      transition: still ? { duration: 0 } : ROLL,
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx2("span", { className: "flex h-[1em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function RollText({ text, still }) {
+  const chars = Array.from(text);
+  return /* @__PURE__ */ jsx2("span", { "aria-hidden": true, className: "inline-flex leading-none tabular-nums", children: chars.map((ch, i) => {
+    const key = chars.length - i;
+    return /\d/.test(ch) ? /* @__PURE__ */ jsx2(Digit, { digit: Number(ch), still }, key) : /* @__PURE__ */ jsx2("span", { className: "whitespace-pre", children: ch }, `${key}${ch}`);
+  }) });
+}
+var zeroed = (text) => text.replace(/\d/g, "0");
+function TabletIcon({
+  active,
+  className
+}) {
+  const still = !!useReducedMotion2();
+  return /* @__PURE__ */ jsx2(
+    motion2.span,
+    {
+      className: cn("inline-grid place-items-center", className),
+      animate: active && !still ? { rotate: [0, -90, -90, 0] } : { rotate: 0 },
+      transition: { duration: 1.1, times: [0, 0.35, 0.7, 1], ease: GLIDE },
+      children: /* @__PURE__ */ jsx2(Tablet, { className: "size-full" })
+    }
+  );
+}
+var ICONS = {
+  desktop: MonitorCheckIcon,
+  tablet: TabletIcon,
+  mobile: SmartphoneNfcIcon
+};
+function Change({
+  change,
+  nudge,
+  chip
+}) {
+  const up = change >= 0;
+  const color = up ? GOOD : BAD;
+  const Arrow = up ? ArrowUpRightIcon : ArrowDownRightIcon;
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 text-sm font-medium tabular-nums",
+        chip && "h-7 rounded-full px-2.5"
+      ),
+      style: { color, background: chip ? `${color}14` : void 0 },
+      children: [
+        up ? "+" : "\u2212",
+        Math.abs(change).toFixed(1),
+        "%",
+        /* @__PURE__ */ jsx2(
+          motion2.span,
+          {
+            className: "grid",
+            animate: nudge ? { x: 2, y: up ? -2 : 2 } : { x: 0, y: 0 },
+            transition: { duration: 0.25, ease: GLIDE },
+            children: /* @__PURE__ */ jsx2(Arrow, { className: "size-3.5", strokeWidth: 2.5 })
+          }
+        )
+      ]
+    }
+  );
+}
+function normalize(shares) {
+  const sum = shares.reduce((a, b) => a + b, 0) || 1;
+  return shares.map((s) => s / sum * 100);
+}
+function wholePercents(shares) {
+  const floors = shares.map(Math.floor);
+  let spare = 100 - floors.reduce((a, b) => a + b, 0);
+  const order = shares.map((s, i) => ({ i, r: s - Math.floor(s) })).sort((a, b) => b.r - a.r);
+  for (const { i } of order) {
+    if (spare <= 0) break;
+    floors[i]++;
+    spare--;
+  }
+  return floors;
+}
+var DeviceTraffic = React.forwardRef(function DeviceTraffic2({
+  title = "Traffic by device",
+  description = "Watch where visitors arrive from, and spot shifts between screens as they happen.",
+  label = "Total visitors",
+  total: startTotal = 237456,
+  change = -1.4,
+  devices = DEFAULT_DEVICES,
+  live = true,
+  interval = 2.6,
+  colors = PALETTE,
+  onReport,
+  locale = "en-US",
+  header = true,
+  className
+}, ref) {
+  const still = !!useReducedMotion2();
+  const root = React.useRef(null);
+  React.useImperativeHandle(ref, () => root.current);
+  const seen = useInView(root, { once: true, amount: 0.35 });
+  const visible = useInView(root, { amount: 0.1 });
+  const shown = seen || still;
+  const format = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const [total, setTotal] = React.useState(startTotal);
+  const [shares, setShares] = React.useState(
+    () => normalize(devices.map((d) => d.share))
+  );
+  const [bump, setBump] = React.useState(
+    null
+  );
+  const [hover, setHover] = React.useState(null);
+  const [headHover, setHeadHover] = React.useState(false);
+  const shareKey = devices.map((d) => d.share).join(",");
+  React.useEffect(() => {
+    setTotal(startTotal);
+    setShares(normalize(shareKey.split(",").map(Number)));
+  }, [startTotal, shareKey]);
+  React.useEffect(() => {
+    if (!live || !seen || !visible) return;
+    const t = window.setInterval(() => {
+      if (document.hidden) return;
+      const n = 4 + Math.floor(Math.random() * 32);
+      setTotal((v) => v + n);
+      setBump((b) => ({ n, key: (b?.key ?? 0) + 1 }));
+      setShares(
+        (s) => normalize(s.map((x) => Math.max(1, x + (Math.random() - 0.5) * 1.2)))
+      );
+    }, interval * 1e3);
+    return () => window.clearInterval(t);
+  }, [live, seen, visible, interval]);
+  React.useEffect(() => {
+    if (!bump) return;
+    const t = window.setTimeout(() => setBump(null), 1400);
+    return () => window.clearTimeout(t);
+  }, [bump]);
+  const percents = wholePercents(shares);
+  const totalText = format.format(total);
+  return /* @__PURE__ */ jsxs2(
+    motion2.div,
+    {
+      ref: root,
+      initial: still ? false : { opacity: 0, y: 16, filter: "blur(8px)" },
+      animate: shown ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+      transition: { duration: 0.6, ease: GLIDE },
+      className: cn(
+        "w-[400px] max-w-full overflow-hidden rounded-[32px] bg-white text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)]",
+        className
+      ),
+      children: [
+        header && /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "bg-[#f1f1ef] px-6 pb-14 pt-6",
+            onPointerEnter: () => setHeadHover(true),
+            onPointerLeave: () => setHeadHover(false),
+            children: [
+              /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: "grid size-11 place-items-center rounded-2xl bg-white shadow-[0_1px_2px_rgba(0,0,0,0.06)]",
+                  style: { color: colors[0] ?? PALETTE[0] },
+                  children: /* @__PURE__ */ jsx2(
+                    RadioIcon,
+                    {
+                      className: "size-5",
+                      active: headHover || live && bump !== null
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx2("h3", { className: "mt-6 text-xl font-semibold tracking-tight", children: title }),
+              /* @__PURE__ */ jsx2("p", { className: "mt-1.5 text-pretty text-sm leading-relaxed text-zinc-500", children: description })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          motion2.div,
+          {
+            initial: still ? false : { opacity: 0, y: 12 },
+            animate: shown ? { opacity: 1, y: 0 } : void 0,
+            transition: { duration: 0.55, ease: GLIDE, delay: still ? 0 : 0.12 },
+            className: cn(
+              "relative bg-white px-6 pb-6 pt-6",
+              header && "-mt-8 rounded-t-[28px]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-3", children: [
+                /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm text-zinc-500", children: [
+                    label,
+                    live && /* @__PURE__ */ jsxs2("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[#269a5a]/10 px-2 py-0.5 text-xs font-medium text-[#269a5a]", children: [
+                      /* @__PURE__ */ jsxs2("span", { className: "relative grid size-1.5 place-items-center", children: [
+                        !still && /* @__PURE__ */ jsx2(
+                          motion2.span,
+                          {
+                            className: "absolute inset-0 rounded-full bg-[#269a5a]",
+                            animate: { scale: [1, 2.6], opacity: [0.6, 0] },
+                            transition: {
+                              duration: 1.6,
+                              repeat: Infinity,
+                              ease: "easeOut"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2("span", { className: "relative size-1.5 rounded-full bg-[#269a5a]" })
+                      ] }),
+                      "Live"
+                    ] }),
+                    /* @__PURE__ */ jsx2("span", { className: "relative h-5 w-10", children: /* @__PURE__ */ jsx2(AnimatePresence, { children: bump && !still && /* @__PURE__ */ jsxs2(
+                      motion2.span,
+                      {
+                        "aria-hidden": true,
+                        initial: { opacity: 0, y: 6 },
+                        animate: { opacity: 1, y: 0 },
+                        exit: { opacity: 0, y: -8 },
+                        transition: { duration: 0.5, ease: GLIDE },
+                        className: "pointer-events-none absolute left-0 top-0 text-xs font-semibold leading-5 tabular-nums text-[#269a5a]",
+                        children: [
+                          "+",
+                          bump.n
+                        ]
+                      },
+                      bump.key
+                    ) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+                    /* @__PURE__ */ jsxs2("span", { className: "text-[32px] font-semibold leading-none tracking-tight", children: [
+                      /* @__PURE__ */ jsx2("span", { className: "sr-only", children: totalText }),
+                      /* @__PURE__ */ jsx2(
+                        RollText,
+                        {
+                          text: shown ? totalText : zeroed(totalText),
+                          still
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx2(Change, { change, nudge: false, chip: true })
+                  ] })
+                ] }),
+                onReport && /* @__PURE__ */ jsxs2(
+                  motion2.button,
+                  {
+                    type: "button",
+                    onClick: onReport,
+                    whileTap: still ? void 0 : { scale: 0.95 },
+                    className: "group/btn flex h-9 shrink-0 cursor-pointer items-center gap-1 overflow-hidden rounded-full bg-[#242423]/[0.05] pl-3.5 pr-2.5 text-sm font-medium outline-none transition-colors hover:bg-[#242423]/[0.09] focus-visible:ring-2 focus-visible:ring-zinc-400",
+                    children: [
+                      "Report",
+                      /* @__PURE__ */ jsxs2("span", { className: "relative grid size-4 place-items-center overflow-hidden", children: [
+                        /* @__PURE__ */ jsx2(
+                          ArrowUpRightIcon,
+                          {
+                            className: "size-3.5 transition-transform duration-300 ease-out group-hover/btn:-translate-y-4 group-hover/btn:translate-x-4",
+                            strokeWidth: 2.5
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          ArrowUpRightIcon,
+                          {
+                            className: "absolute size-3.5 -translate-x-4 translate-y-4 transition-transform duration-300 ease-out group-hover/btn:translate-x-0 group-hover/btn:translate-y-0",
+                            strokeWidth: 2.5
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: "-mx-6 my-5 h-px bg-[#242423]/[0.07]" }),
+              /* @__PURE__ */ jsx2("div", { className: "grid grid-cols-3", onPointerLeave: () => setHover(null), children: devices.map((d, i) => {
+                const Icon = ICONS[d.kind];
+                const color = d.color ?? colors[i % colors.length] ?? PALETTE[i % PALETTE.length];
+                const on = hover === i;
+                const dim = hover !== null && !on;
+                const visitors = format.format(
+                  Math.round(total * (shares[i] ?? 0) / 100)
+                );
+                const pct = `${percents[i] ?? 0}%`;
+                return /* @__PURE__ */ jsxs2(
+                  motion2.div,
+                  {
+                    tabIndex: 0,
+                    "aria-label": `${d.name}: ${pct} of visitors, ${visitors} visitors, ${d.change >= 0 ? "up" : "down"} ${Math.abs(d.change)}%`,
+                    onPointerEnter: () => setHover(i),
+                    onFocus: () => setHover(i),
+                    onBlur: () => setHover(null),
+                    animate: { opacity: dim ? 0.45 : 1 },
+                    transition: { duration: 0.25, ease: GLIDE },
+                    className: "relative flex min-w-0 flex-col px-3 outline-none focus-visible:bg-[#242423]/[0.02]",
+                    children: [
+                      i > 0 && /* @__PURE__ */ jsx2(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: "absolute -bottom-6 -top-5 left-0 w-px bg-[#242423]/[0.07]"
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs2(
+                        "span",
+                        {
+                          className: cn(
+                            "flex items-center gap-2 text-sm transition-colors",
+                            on ? "text-[#242423]" : "text-zinc-500"
+                          ),
+                          children: [
+                            /* @__PURE__ */ jsx2(
+                              "span",
+                              {
+                                className: "grid transition-colors",
+                                style: on ? { color } : void 0,
+                                children: /* @__PURE__ */ jsx2(Icon, { className: "size-4", active: on })
+                              }
+                            ),
+                            /* @__PURE__ */ jsx2("span", { className: "truncate", children: d.name })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2("span", { className: "mt-2 text-2xl font-semibold leading-none tracking-tight", children: /* @__PURE__ */ jsx2(RollText, { text: shown ? pct : zeroed(pct), still }) }),
+                      /* @__PURE__ */ jsxs2(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: "relative mt-4 block h-28 overflow-hidden rounded-xl bg-[#242423]/[0.04]",
+                          children: [
+                            [25, 50, 75].map((g) => /* @__PURE__ */ jsx2(
+                              "span",
+                              {
+                                className: "absolute inset-x-2 h-px bg-[#242423]/[0.05]",
+                                style: { bottom: `${g}%` }
+                              },
+                              g
+                            )),
+                            /* @__PURE__ */ jsx2(
+                              motion2.span,
+                              {
+                                className: "absolute inset-0 origin-bottom rounded-xl",
+                                style: {
+                                  background: `linear-gradient(to top, ${color}, ${color}b3)`
+                                },
+                                initial: still ? false : { scaleY: 0 },
+                                animate: {
+                                  scaleY: shown ? (shares[i] ?? 0) / 100 : 0,
+                                  opacity: on || hover === null ? 1 : 0.55
+                                },
+                                transition: still ? { duration: 0 } : {
+                                  scaleY: {
+                                    ...LEVEL,
+                                    delay: seen && total === startTotal ? 0.35 + i * 0.12 : 0
+                                  },
+                                  opacity: { duration: 0.25 }
+                                }
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx2("span", { className: "relative mt-3 flex h-5 items-center", children: /* @__PURE__ */ jsx2(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx2(
+                        motion2.span,
+                        {
+                          initial: { opacity: 0, y: 6, filter: "blur(3px)" },
+                          animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                          exit: { opacity: 0, y: -6, filter: "blur(3px)" },
+                          transition: { duration: still ? 0 : 0.2, ease: GLIDE },
+                          className: "flex items-center whitespace-nowrap",
+                          children: on ? /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium tabular-nums text-zinc-600", children: visitors }) : /* @__PURE__ */ jsx2(Change, { change: d.change, nudge: false })
+                        },
+                        on ? "count" : "change"
+                      ) }) })
+                    ]
+                  },
+                  d.name
+                );
+              }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  DeviceTraffic
+};