motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-NGX34WJO.js

@@ -0,0 +1,335 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/rolling-card-stack/rolling-card-stack.tsx
+import * as React from "react";
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import {
+  Clock3,
+  Target,
+  TrendingDown,
+  TrendingUp,
+  Users
+} from "lucide-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 DEPTH_SPRING = { type: "spring", stiffness: 260, damping: 30 };
+var CARD_H = 196;
+var LIFT = 22;
+var SHRINK = 0.05;
+var PEEK_PX = LIFT - SHRINK * CARD_H;
+var DEFAULT_CARDS = [
+  {
+    title: "Monthly revenue",
+    value: 48290,
+    prefix: "$",
+    delta: "+12.4%",
+    progress: 0.72,
+    color: "#3d66d6",
+    icon: TrendingUp
+  },
+  {
+    title: "Active users",
+    value: 12840,
+    delta: "+8.1%",
+    progress: 0.64,
+    color: "#269a5a",
+    icon: Users
+  },
+  {
+    title: "Conversion",
+    value: 3.8,
+    suffix: "%",
+    decimals: 1,
+    delta: "+0.6 pts",
+    progress: 0.38,
+    color: "#d6498f",
+    icon: Target
+  },
+  {
+    title: "Avg. session",
+    value: 6.7,
+    suffix: " min",
+    decimals: 1,
+    delta: "+42s",
+    progress: 0.55,
+    color: "#9150e0",
+    icon: Clock3
+  },
+  {
+    title: "Churn",
+    value: 1.9,
+    suffix: "%",
+    decimals: 1,
+    delta: "-0.3 pts",
+    progress: 0.19,
+    color: "#cf7a1c",
+    caption: "Below the 2.5% limit",
+    icon: TrendingDown
+  }
+];
+function CountUp({
+  card,
+  active,
+  still
+}) {
+  const mv = useMotionValue(active || still ? card.value : 0);
+  const fmt = React.useMemo(
+    () => new Intl.NumberFormat("en-US", {
+      minimumFractionDigits: card.decimals ?? 0,
+      maximumFractionDigits: card.decimals ?? 0
+    }),
+    [card.decimals]
+  );
+  const text = useTransform(
+    mv,
+    (v) => `${card.prefix ?? ""}${fmt.format(v)}${card.suffix ?? ""}`
+  );
+  React.useEffect(() => {
+    if (still) return void mv.set(card.value);
+    if (!active) return;
+    mv.set(0);
+    const c = animate(mv, card.value, {
+      duration: 1.1,
+      ease: FILL,
+      delay: 0.15
+    });
+    return () => c.stop();
+  }, [active, card.value, still, mv]);
+  return /* @__PURE__ */ jsx(motion.span, { className: "tabular-nums", children: text });
+}
+function Card({
+  card,
+  active,
+  pills,
+  still
+}) {
+  const Icon = card.icon ?? TrendingUp;
+  const lit = Math.round(Math.max(0, Math.min(1, card.progress)) * pills);
+  const drop = card.delta?.trim().startsWith("-") ?? false;
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[12px] text-zinc-500 dark:text-zinc-400", children: card.title }),
+      /* @__PURE__ */ jsx("span", { className: "grid size-9 shrink-0 place-items-center rounded-full bg-[#242423]/6 text-[#242423] dark:bg-white/8 dark:text-zinc-100", children: /* @__PURE__ */ jsx(Icon, { className: "size-4", strokeWidth: 2.25 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "-mt-2 flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[32px] font-medium leading-none tracking-tight text-zinc-900 dark:text-zinc-100", children: /* @__PURE__ */ jsx(CountUp, { card, active, still }) }),
+      card.delta && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-[12px] font-medium",
+            drop ? "text-[#cf7a1c]" : "text-[#269a5a]"
+          ),
+          children: card.delta.replace(/^-/, "\u2212")
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-auto flex gap-1", "aria-hidden": true, children: Array.from({ length: pills }, (_, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "relative h-2.5 flex-1 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800/60",
+        children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "absolute inset-0 rounded-full",
+            style: { background: card.color },
+            initial: false,
+            animate: { x: i < lit && (active || still) ? "0%" : "-101%" },
+            transition: {
+              duration: still ? 0 : 0.45,
+              ease: FILL,
+              delay: active && !still ? 0.25 + i * 0.045 : 0
+            }
+          }
+        )
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxs("p", { className: "mt-3 inline-flex items-center gap-1.5 text-[12px] text-zinc-500 dark:text-zinc-400", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "size-2 rounded-full",
+          style: { background: card.color }
+        }
+      ),
+      card.caption ?? `${Math.round(card.progress * 100)}% of target`
+    ] })
+  ] });
+}
+var RollingCardStack = React.forwardRef(function RollingCardStack2({
+  cards = DEFAULT_CARDS,
+  interval = 3600,
+  peek = 2,
+  pills = 10,
+  onChange,
+  label = "Metrics",
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const n = cards.length;
+  const [active, setActive] = React.useState(0);
+  const [dir, setDir] = React.useState(1);
+  const [paused, setPaused] = React.useState(false);
+  const wheelLock = React.useRef(0);
+  const go = React.useCallback(
+    (step) => {
+      if (n < 2) return;
+      setDir(step > 0 ? 1 : -1);
+      setActive((a) => {
+        const next = (a + step + n) % n;
+        onChange?.(next);
+        return next;
+      });
+    },
+    [n, onChange]
+  );
+  React.useEffect(() => {
+    if (!interval || paused || n < 2) return;
+    const id = window.setInterval(() => go(1), interval);
+    return () => window.clearInterval(id);
+  }, [interval, paused, go, n]);
+  const onDragEnd = (_, info) => {
+    if (info.offset.y > 60 || info.velocity.y > 500) go(1);
+    else if (info.offset.y < -60 || info.velocity.y < -500) go(-1);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": label,
+      tabIndex: 0,
+      onPointerEnter: () => setPaused(true),
+      onPointerLeave: () => setPaused(false),
+      onFocus: () => setPaused(true),
+      onBlur: () => setPaused(false),
+      onKeyDown: (e) => {
+        if (e.key === "ArrowDown" || e.key === "ArrowRight")
+          e.preventDefault(), go(1);
+        if (e.key === "ArrowUp" || e.key === "ArrowLeft")
+          e.preventDefault(), go(-1);
+      },
+      onWheel: (e) => {
+        const now = performance.now();
+        if (Math.abs(e.deltaY) < 12 || now - wheelLock.current < 450) return;
+        wheelLock.current = now;
+        go(e.deltaY > 0 ? 1 : -1);
+      },
+      className: cn(
+        "w-[360px] max-w-full rounded-[28px] outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: `${cards[active]?.title}: ${cards[active]?.prefix ?? ""}${cards[active]?.value}${cards[active]?.suffix ?? ""}, ${active + 1} of ${n}` }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative",
+            style: {
+              perspective: 900,
+              height: CARD_H,
+              marginTop: Math.min(peek, cards.length - 1) * PEEK_PX
+            },
+            children: cards.map((card, i) => {
+              const depth = (i - active + n) % n;
+              const front = depth === 0;
+              const behind = Math.min(depth, peek + 1);
+              const leaving = dir > 0 && depth === n - 1 && n > 1;
+              const arriving = dir < 0 && depth === 0 && n > 1;
+              const rest = {
+                y: -behind * LIFT,
+                scale: 1 - behind * SHRINK,
+                opacity: depth > peek ? 0 : 1 - behind * 0.18,
+                rotateX: 0,
+                filter: "blur(0px)",
+                zIndex: n - depth
+              };
+              let animateTo = rest;
+              let transition = still ? { duration: 0.2 } : DEPTH_SPRING;
+              if (!still && leaving) {
+                animateTo = {
+                  y: [0, 70, -behind * LIFT],
+                  rotateX: [0, -62, 0],
+                  scale: [1, 0.96, rest.scale],
+                  opacity: [1, 0, 0],
+                  filter: ["blur(0px)", "blur(6px)", "blur(0px)"],
+                  zIndex: [n + 1, n + 1, rest.zIndex]
+                };
+                transition = {
+                  duration: 0.75,
+                  times: [0, 0.5, 1],
+                  ease: [[0.55, 0, 0.8, 0.4], "linear"]
+                };
+              } else if (!still && arriving) {
+                animateTo = {
+                  y: [70, 70, 0],
+                  rotateX: [-62, -62, 0],
+                  scale: [0.96, 0.96, 1],
+                  opacity: [0, 0, 1],
+                  filter: ["blur(6px)", "blur(6px)", "blur(0px)"],
+                  zIndex: [n + 1, n + 1, n]
+                };
+                transition = {
+                  duration: 0.7,
+                  times: [0, 0.05, 1],
+                  ease: ["linear", GLIDE]
+                };
+              }
+              return /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  "aria-hidden": !front,
+                  drag: front && !still ? "y" : false,
+                  dragConstraints: { top: 0, bottom: 0 },
+                  dragElastic: 0.35,
+                  onDragEnd: front ? onDragEnd : void 0,
+                  initial: false,
+                  animate: animateTo,
+                  transition,
+                  whileDrag: { scale: 0.985, cursor: "grabbing" },
+                  style: { height: CARD_H },
+                  className: cn(
+                    "absolute inset-x-0 top-0 origin-bottom rounded-3xl bg-white px-5 pb-5 pt-5 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",
+                    front && !still && "cursor-grab touch-none",
+                    !front && "pointer-events-none"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    motion.div,
+                    {
+                      className: "h-full",
+                      initial: false,
+                      animate: { opacity: front || leaving ? 1 : 0 },
+                      transition: {
+                        duration: still ? 0 : 0.35,
+                        ease: GLIDE,
+                        delay: front && !still ? 0.1 : 0
+                      },
+                      children: /* @__PURE__ */ jsx(Card, { card, active: front, pills, still })
+                    }
+                  )
+                },
+                `${i}-${card.title}`
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  RollingCardStack
+};

package/dist/chunk-NIQFSLPC.js

@@ -0,0 +1,114 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/chevron-down.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_TRANSITION = {
+  times: [0, 0.4, 1],
+  duration: 0.5
+};
+var ChevronDownIcon = 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__ */ jsx(
+          "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,
+                d: "m6 9 6 6 6-6",
+                transition: DEFAULT_TRANSITION,
+                variants: {
+                  normal: { y: 0 },
+                  animate: { y: [0, 2, 0] }
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+ChevronDownIcon.displayName = "ChevronDownIcon";
+
+export {
+  ChevronDownIcon
+};