motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-6GAKTS3D.js

@@ -0,0 +1,329 @@
+"use client";
+import {
+  ChevronLeftIcon
+} from "./chunk-LNBTWX4J.js";
+import {
+  ChevronRightIcon
+} from "./chunk-XH6YNONO.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/roadmap-card/roadmap-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_PHASES = [
+  {
+    title: "Discovery",
+    body: "Talk to customers, map the problem and agree on what success looks like.",
+    focus: ["Twelve customer calls", "Problem brief signed off"]
+  },
+  {
+    title: "Design",
+    body: "Shape the flows, test prototypes and lock the scope for the first release.",
+    focus: ["Prototype tested with users", "Scope frozen"]
+  },
+  {
+    title: "Private beta",
+    body: "Ship to a small group of design partners and fix what they run into.",
+    focus: ["Ten design partners live", "Weekly feedback review"]
+  },
+  {
+    title: "Public launch",
+    body: "Open the doors, announce it and watch adoption, errors and support load.",
+    focus: ["Launch post and changelog", "Status page green"]
+  },
+  {
+    title: "General availability",
+    body: "Harden for scale, add enterprise controls and turn on billing for everyone.",
+    focus: ["SSO and audit log", "Pricing live"]
+  }
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var ROLL = {
+  type: "spring",
+  stiffness: 280,
+  damping: 26,
+  mass: 0.8
+};
+var DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+function Digit({ digit, still }) {
+  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",
+      initial: { y: "0%" },
+      animate: { y: `${-digit * 10}%` },
+      transition: still ? { duration: 0 } : ROLL,
+      children: DIGITS.map((d) => /* @__PURE__ */ jsx("span", { className: "flex h-[1em] items-center justify-center", children: d }, d))
+    }
+  ) });
+}
+function Bar({
+  state,
+  fill,
+  label,
+  onPick
+}) {
+  const width = useTransform(fill, (f) => `${f * 100}%`);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      "aria-current": state === "now" ? "step" : void 0,
+      onClick: onPick,
+      className: "group/bar relative flex h-5 flex-1 cursor-pointer items-center outline-none focus-visible:rounded-full focus-visible:ring-2 focus-visible:ring-zinc-400",
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "relative w-full overflow-hidden rounded-full transition-[height,background-color] duration-300 group-hover/bar:h-1.5",
+            // The current bar reads as current even before it starts to fill.
+            state === "now" ? "h-1.5 bg-[#242423]/25 dark:bg-white/30" : "h-1 bg-[#242423]/10 dark:bg-white/15"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "absolute inset-y-0 left-0 w-full origin-left rounded-full bg-[#242423] dark:bg-zinc-100",
+                initial: false,
+                animate: { scaleX: state === "past" ? 1 : 0 },
+                transition: { duration: 0.3, ease: GLIDE }
+              }
+            ),
+            state === "now" && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "absolute inset-y-0 left-0 rounded-full bg-[#242423] dark:bg-zinc-100",
+                style: { width }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var RoadmapCard = React.forwardRef(
+  function RoadmapCard2({
+    label = "Product roadmap",
+    phases = DEFAULT_PHASES,
+    defaultPhase = 2,
+    autoplay = 5,
+    onChange,
+    className
+  }, ref) {
+    const root = React.useRef(null);
+    React.useImperativeHandle(ref, () => root.current);
+    const still = !!useReducedMotion();
+    const inView = useInView(root, { amount: 0.4 });
+    const n = phases.length;
+    const [at, setAt] = React.useState(
+      Math.min(n - 1, Math.max(0, defaultPhase))
+    );
+    const [dir, setDir] = React.useState(1);
+    const [paused, setPaused] = React.useState(false);
+    const fill = useMotionValue(0);
+    const go = React.useCallback(
+      (to) => {
+        const next = (to % n + n) % n;
+        setDir(next >= at ? 1 : -1);
+        setAt(next);
+        fill.set(0);
+        onChange?.(next);
+      },
+      [at, n, onChange, fill]
+    );
+    const playing = !!autoplay && !still && inView && !paused;
+    React.useEffect(() => {
+      if (!playing) return;
+      const left = (1 - fill.get()) * autoplay;
+      const c = animate(fill, 1, {
+        duration: Math.max(0.05, left),
+        ease: "linear",
+        onComplete: () => go(at + 1)
+      });
+      return () => c.stop();
+    }, [playing, at, autoplay, fill, go]);
+    const phase = phases[at];
+    const slide = still ? 0 : 24;
+    const num = String(at + 1).padStart(2, "0");
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: root,
+        role: "group",
+        "aria-roledescription": "stepper",
+        "aria-label": label,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "ArrowRight") {
+            e.preventDefault();
+            go(at + 1);
+          } else if (e.key === "ArrowLeft") {
+            e.preventDefault();
+            go(at - 1);
+          }
+        },
+        initial: still ? false : { opacity: 0, y: 16 },
+        animate: inView || still ? { opacity: 1, y: 0 } : void 0,
+        transition: { duration: 0.6, ease: GLIDE },
+        className: cn(
+          "w-[360px] 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)] outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-zinc-900 dark:text-zinc-100",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", children: phases.map((p, i) => /* @__PURE__ */ jsx(
+            Bar,
+            {
+              state: i < at ? "past" : i === at ? "now" : "next",
+              fill,
+              label: `Phase ${i + 1}, ${p.title}`,
+              onPick: () => go(i)
+            },
+            p.title
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-400", children: label }),
+            /* @__PURE__ */ jsxs(
+              motion.button,
+              {
+                type: "button",
+                "aria-pressed": paused,
+                "aria-label": paused ? "Resume" : "Pause",
+                onClick: () => setPaused((x) => !x),
+                whileTap: still ? void 0 : { scale: 0.94 },
+                className: "inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-full bg-[#242423]/[0.06] px-2.5 text-xs font-medium text-zinc-500 outline-none transition-colors hover:bg-[#242423]/[0.1] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:text-zinc-400",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "size-1.5 rounded-full bg-[#269a5a]",
+                      animate: playing ? { opacity: [1, 0.3, 1] } : { opacity: 1 },
+                      transition: { duration: 1.4, repeat: playing ? Infinity : 0 }
+                    }
+                  ),
+                  playing ? "Playing" : "Paused"
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-end gap-4", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "inline-flex text-[48px] font-semibold leading-none tracking-tight text-[#242423]/15 tabular-nums dark:text-white/20",
+                children: Array.from(num).map((ch, i) => /* @__PURE__ */ jsx(Digit, { digit: Number(ch), still }, num.length - i))
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "relative min-w-0 flex-1 pb-1", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+              motion.p,
+              {
+                className: "text-xl font-semibold leading-tight tracking-tight",
+                initial: still ? false : { x: slide * dir, opacity: 0, filter: "blur(4px)" },
+                animate: { x: 0, opacity: 1, filter: "blur(0px)" },
+                exit: still ? void 0 : { x: -slide * dir, opacity: 0, filter: "blur(4px)" },
+                transition: { duration: 0.4, ease: GLIDE },
+                children: phase.title
+              },
+              at
+            ) }) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "relative mt-4 min-h-[148px]", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: still ? false : { x: slide * dir, opacity: 0, filter: "blur(4px)" },
+              animate: { x: 0, opacity: 1, filter: "blur(0px)" },
+              exit: still ? void 0 : { x: -slide * dir, opacity: 0, filter: "blur(4px)" },
+              transition: {
+                duration: 0.4,
+                ease: GLIDE,
+                delay: still ? 0 : 0.04
+              },
+              children: [
+                /* @__PURE__ */ jsx("p", { className: "text-base leading-relaxed text-zinc-500 dark:text-zinc-400", children: phase.body }),
+                phase.focus?.length ? /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-2", children: phase.focus.map((f, i) => /* @__PURE__ */ jsxs(
+                  motion.li,
+                  {
+                    className: "flex items-center gap-2.5 text-sm font-medium",
+                    initial: still ? false : { opacity: 0, y: 6 },
+                    animate: { opacity: 1, y: 0 },
+                    transition: {
+                      duration: 0.35,
+                      delay: still ? 0 : 0.18 + i * 0.1,
+                      ease: GLIDE
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "grid size-5 shrink-0 place-items-center rounded-full bg-[#269a5a]/10 text-[#269a5a]", children: /* @__PURE__ */ jsx(
+                        CheckIcon,
+                        {
+                          className: "size-3",
+                          strokeWidth: 2.5,
+                          active: true
+                        }
+                      ) }),
+                      f
+                    ]
+                  },
+                  f
+                )) }) : null
+              ]
+            },
+            at
+          ) }) }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "text-sm tabular-nums text-zinc-500 dark:text-zinc-400",
+                "aria-live": "polite",
+                children: [
+                  "Phase ",
+                  at + 1,
+                  " of ",
+                  n
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: [
+              { label: "Previous phase", to: at - 1, Icon: ChevronLeftIcon },
+              { label: "Next phase", to: at + 1, Icon: ChevronRightIcon }
+            ].map(({ label: l, to, Icon }) => /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                "aria-label": l,
+                onClick: () => go(to),
+                whileTap: still ? void 0 : { scale: 0.9 },
+                className: cn(
+                  "grid size-10 cursor-pointer place-items-center rounded-full outline-none transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400",
+                  l === "Next phase" ? "bg-[#242423] text-white hover:bg-[#242423]/90 dark:bg-zinc-100 dark:text-[#242423]" : "bg-[#242423]/[0.06] text-[#242423] hover:bg-[#242423]/[0.1] dark:bg-white/[0.08] dark:text-zinc-100"
+                ),
+                children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
+              },
+              l
+            )) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  RoadmapCard
+};

package/dist/chunk-6GRDT3OE.js

@@ -0,0 +1,124 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/zap.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var PATH_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var ZapIcon = 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: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+                variants: PATH_VARIANTS
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+ZapIcon.displayName = "ZapIcon";
+
+export {
+  ZapIcon
+};