motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-GRUDTDLX.js

@@ -0,0 +1,534 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/reaction-card/reaction-card.tsx
+import * as React from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var SPRING = { type: "spring", stiffness: 520, damping: 26 };
+var OPEN_DELAY = 380;
+var CLOSE_DELAY = 280;
+var DEFAULT_FACES = [
+  { key: "like", emoji: "\u{1F44D}", label: "Like" },
+  { key: "love", emoji: "\u{1F60D}", label: "Adore" },
+  { key: "haha", emoji: "\u{1F602}", label: "Haha" },
+  { key: "wow", emoji: "\u{1F62E}", label: "Wow" },
+  { key: "sad", emoji: "\u{1F622}", label: "Sad" },
+  { key: "angry", emoji: "\u{1F621}", label: "Angry" }
+];
+var DEFAULT_HEARTS = [
+  { key: "red", emoji: "\u2764\uFE0F", label: "Love" },
+  { key: "pink", emoji: "\u{1FA77}", label: "Sweet" },
+  { key: "orange", emoji: "\u{1F9E1}", label: "Warm" },
+  { key: "green", emoji: "\u{1F49A}", label: "Fresh" },
+  { key: "blue", emoji: "\u{1F499}", label: "Calm" },
+  { key: "purple", emoji: "\u{1F49C}", label: "Dreamy" }
+];
+var DEFAULT_BOOSTS = [
+  { key: "1", emoji: "+1", label: "Nice", amount: 1 },
+  { key: "5", emoji: "+5", label: "Great", amount: 5 },
+  { key: "10", emoji: "+10", label: "Superb", amount: 10 },
+  { key: "25", emoji: "+25", label: "Epic", amount: 25 },
+  { key: "50", emoji: "+50", label: "Legend", amount: 50 }
+];
+var DEFAULT_TEXT = "Shipped the new onboarding today. Three screens instead of seven, and the first test group finished it in under a minute.";
+var format = (n) => n >= 1e4 ? `${(n / 1e3).toFixed(n >= 1e5 ? 0 : 1)}k` : n.toLocaleString("en-US");
+function Rolling({
+  text,
+  still,
+  down = false
+}) {
+  const from = down ? "-70%" : "70%";
+  const to = down ? "70%" : "-70%";
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "whitespace-nowrap tabular-nums",
+      initial: still ? { opacity: 0 } : { opacity: 0, y: from, filter: "blur(3px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { opacity: 0, y: to, filter: "blur(3px)" },
+      transition: { duration: 0.3, ease: GLIDE },
+      children: text
+    },
+    text
+  ) }) });
+}
+function Burst({ emoji, still }) {
+  if (still) return null;
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: "pointer-events-none absolute inset-0 grid place-items-center",
+      children: Array.from({ length: 6 }, (_, i) => {
+        const a = i / 6 * Math.PI * 2 - Math.PI / 2;
+        return /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            className: "absolute text-xs",
+            initial: { x: 0, y: 0, scale: 0.4, opacity: 1 },
+            animate: {
+              x: Math.cos(a) * 26,
+              y: Math.sin(a) * 22 - 6,
+              scale: 0.9,
+              opacity: 0
+            },
+            transition: { duration: 0.6, ease: "easeOut" },
+            children: emoji
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function ReactionButton({
+  name,
+  rest,
+  options,
+  mode,
+  picked,
+  count,
+  onPick,
+  align,
+  still
+}) {
+  const id = React.useId();
+  const [open, setOpen] = React.useState(false);
+  const [hover, setHover] = React.useState(-1);
+  const [burst, setBurst] = React.useState(
+    null
+  );
+  const [floats, setFloats] = React.useState([]);
+  const timer = React.useRef(0);
+  const held = React.useRef(false);
+  const button = React.useRef(null);
+  const items = React.useRef([]);
+  const current = options.find((o) => o.key === picked) ?? null;
+  const later = (fn, ms) => {
+    window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(fn, ms);
+  };
+  React.useEffect(() => () => window.clearTimeout(timer.current), []);
+  const choose = (r, keyboard = false) => {
+    setOpen(false);
+    setHover(-1);
+    onPick(r);
+    if (r) {
+      setBurst({
+        n: Date.now(),
+        emoji: r.emoji.startsWith("+") ? "\u2728" : r.emoji
+      });
+      window.setTimeout(() => setBurst(null), 700);
+      if (mode === "add")
+        setFloats((f) => [...f.slice(-3), { n: Date.now(), text: r.emoji }]);
+    }
+    if (keyboard) button.current?.focus();
+  };
+  const quick = () => {
+    if (held.current) {
+      held.current = false;
+      return;
+    }
+    if (open) return;
+    if (mode === "add") return choose(options[0]);
+    choose(current ? null : options[0]);
+  };
+  const onKey = (e) => {
+    if (!open) {
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setOpen(true);
+        setHover(0);
+        requestAnimationFrame(() => items.current[0]?.focus());
+      }
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      button.current?.focus();
+    }
+    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    if (step) {
+      e.preventDefault();
+      const next = (hover + step + options.length) % options.length;
+      setHover(next);
+      items.current[next]?.focus();
+    }
+  };
+  const label = mode === "pick" && current ? current.label : name;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative flex-1",
+      onPointerEnter: (e) => e.pointerType === "mouse" && later(() => setOpen(true), OPEN_DELAY),
+      onPointerLeave: (e) => e.pointerType === "mouse" && later(() => setOpen(false), CLOSE_DELAY),
+      onKeyDown: onKey,
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            id: `${id}-menu`,
+            role: "menu",
+            "aria-label": `${name} choices`,
+            initial: still ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.9, filter: "blur(4px)" },
+            animate: { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" },
+            exit: still ? { opacity: 0 } : { opacity: 0, y: 6, scale: 0.95, filter: "blur(4px)" },
+            transition: { duration: 0.22, ease: GLIDE },
+            style: {
+              transformOrigin: align === "start" ? "0% 100%" : align === "end" ? "100% 100%" : "50% 100%"
+            },
+            onPointerEnter: () => window.clearTimeout(timer.current),
+            onPointerLeave: () => setHover(-1),
+            className: cn(
+              "absolute bottom-full z-30 mb-3 flex items-end gap-1",
+              align === "start" && "left-0",
+              align === "center" && "left-1/2 -translate-x-1/2",
+              align === "end" && "right-0",
+              "rounded-full bg-white p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.06),0_16px_40px_-12px_rgba(0,0,0,0.3)] ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/10"
+            ),
+            children: options.map((o, i) => {
+              const on = hover === i;
+              const number = o.emoji.startsWith("+");
+              return /* @__PURE__ */ jsxs(
+                motion.button,
+                {
+                  ref: (el) => void (items.current[i] = el),
+                  type: "button",
+                  role: "menuitemradio",
+                  "aria-checked": o.key === picked,
+                  "aria-label": o.label,
+                  tabIndex: on ? 0 : -1,
+                  onPointerEnter: () => setHover(i),
+                  onFocus: () => setHover(i),
+                  onClick: (e) => choose(o, e.detail === 0),
+                  initial: still ? false : { opacity: 0, y: 12, scale: 0.4 },
+                  animate: {
+                    opacity: 1,
+                    y: on && !still ? -8 : 0,
+                    scale: on && !still ? 1.35 : 1
+                  },
+                  transition: {
+                    ...SPRING,
+                    delay: still ? 0 : on ? 0 : i * 0.035
+                  },
+                  className: cn(
+                    "relative grid size-10 cursor-pointer place-items-center rounded-full outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                    number ? "bg-zinc-100 text-xs font-semibold tabular-nums text-zinc-900 dark:bg-white/10 dark:text-zinc-100" : "text-2xl"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: o.emoji }),
+                    /* @__PURE__ */ jsx(AnimatePresence, { children: on && /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        initial: { opacity: 0, y: 4, scale: 0.8 },
+                        animate: { opacity: 1, y: 0, scale: 1 / 1.35 },
+                        exit: { opacity: 0, y: 4 },
+                        transition: { duration: 0.15 },
+                        className: "pointer-events-none absolute bottom-full mb-1.5 whitespace-nowrap rounded-full bg-[#242423] px-2.5 py-1 text-xs font-medium text-white dark:bg-white dark:text-zinc-900",
+                        children: o.label
+                      }
+                    ) })
+                  ]
+                },
+                o.key
+              );
+            })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          motion.button,
+          {
+            ref: button,
+            type: "button",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-controls": open ? `${id}-menu` : void 0,
+            "aria-pressed": mode === "pick" ? !!current : void 0,
+            "aria-label": `${label}, ${count}`,
+            onClick: quick,
+            onPointerDown: (e) => {
+              if (e.pointerType === "mouse") return;
+              held.current = false;
+              later(() => {
+                held.current = true;
+                setOpen(true);
+              }, 420);
+            },
+            onPointerUp: (e) => e.pointerType !== "mouse" && !held.current && window.clearTimeout(timer.current),
+            onContextMenu: (e) => e.preventDefault(),
+            whileTap: still ? void 0 : { scale: 0.94 },
+            className: cn(
+              "relative flex h-11 w-full cursor-pointer select-none items-center justify-center gap-2 rounded-full text-sm font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400 [-webkit-touch-callout:none]",
+              mode === "pick" && current || mode === "add" && count > 0 && current ? "bg-zinc-200/80 text-zinc-900 dark:bg-white/12 dark:text-zinc-100" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200/70 hover:text-zinc-900 dark:bg-white/6 dark:text-zinc-300 dark:hover:bg-white/10"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "relative grid size-5 place-items-center", children: [
+                /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    className: cn(
+                      "grid place-items-center",
+                      current && mode === "pick" && "text-lg leading-none"
+                    ),
+                    initial: still ? { opacity: 0 } : { scale: 0.2, opacity: 0, rotate: -30 },
+                    animate: { scale: 1, opacity: 1, rotate: 0 },
+                    exit: still ? { opacity: 0 } : { scale: 0.2, opacity: 0 },
+                    transition: { type: "spring", stiffness: 600, damping: 18 },
+                    children: mode === "pick" && current ? current.emoji : rest
+                  },
+                  mode === "add" ? "rest" : current?.key ?? "rest"
+                ) }),
+                burst && /* @__PURE__ */ jsx(Burst, { emoji: burst.emoji, still }, burst.n)
+              ] }),
+              /* @__PURE__ */ jsx(Rolling, { text: label, still }),
+              /* @__PURE__ */ jsx(AnimatePresence, { children: floats.map((f) => /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  "aria-hidden": true,
+                  className: "pointer-events-none absolute -top-2 right-6 rounded-full bg-[#242423] px-2 py-0.5 text-xs font-semibold text-white dark:bg-white dark:text-zinc-900",
+                  initial: { opacity: 0, y: 6, scale: 0.6 },
+                  animate: { opacity: [0, 1, 1, 0], y: -26, scale: 1 },
+                  transition: { duration: still ? 0.3 : 0.9, ease: "easeOut" },
+                  onAnimationComplete: () => setFloats((all) => all.filter((x) => x.n !== f.n)),
+                  children: f.text
+                },
+                f.n
+              )) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ReactionCard = React.forwardRef(
+  function ReactionCard2({
+    author = "Maya Lindqvist",
+    avatar = "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96&h=96&fit=crop&crop=faces",
+    time = "2h",
+    text = DEFAULT_TEXT,
+    faces = DEFAULT_FACES,
+    hearts = DEFAULT_HEARTS,
+    boosts = DEFAULT_BOOSTS,
+    reactions = 128,
+    loves = 64,
+    boosted = 320,
+    onChange,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const [face, setFace] = React.useState(null);
+    const [heart, setHeart] = React.useState(null);
+    const [boost, setBoost] = React.useState(0);
+    const [lastBoost, setLastBoost] = React.useState(null);
+    const [status, setStatus] = React.useState("");
+    const changed = React.useRef(false);
+    React.useEffect(() => {
+      if (!changed.current) return void (changed.current = true);
+      onChange?.({ face, heart, boost });
+    }, [face, heart, boost]);
+    const mine = faces.find((f) => f.key === face);
+    const stack = [mine, ...faces.filter((f) => f.key !== face)].filter(Boolean).slice(0, 3);
+    const total = reactions + (face ? 1 : 0);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-[400px] max-w-full rounded-3xl bg-white p-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("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: avatar,
+                alt: "",
+                draggable: false,
+                className: "size-10 rounded-full bg-zinc-200 object-cover"
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: author }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: time })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-4 text-base leading-relaxed", children: text }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-5 flex items-center justify-between gap-3 text-sm text-zinc-500 dark:text-zinc-400", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "flex -space-x-1", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: stack.map((f, i) => /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  layout: true,
+                  className: "grid size-7 place-items-center rounded-full bg-zinc-100 text-sm ring-2 ring-white dark:bg-zinc-800 dark:ring-zinc-900",
+                  style: { zIndex: 3 - i },
+                  initial: still ? { opacity: 0 } : { scale: 0, opacity: 0 },
+                  animate: { scale: 1, opacity: 1 },
+                  exit: still ? { opacity: 0 } : { scale: 0, opacity: 0 },
+                  transition: SPRING,
+                  children: f.emoji
+                },
+                f.key
+              )) }) }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: face ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: "You" }),
+                " ",
+                "and ",
+                /* @__PURE__ */ jsx(Rolling, { text: format(total - 1), still }),
+                " others"
+              ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(Rolling, { text: format(total), still }),
+                " reactions"
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-2 text-xs", children: [
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx(Rolling, { text: format(loves + (heart ? 1 : 0)), still }),
+                " ",
+                "loves"
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "size-1 rounded-full bg-zinc-300 dark:bg-zinc-600"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsx(Rolling, { text: format(boosted + boost), still }),
+                " boosts"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "-mx-6 mt-4 h-px bg-zinc-100 dark:bg-white/8" }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              ReactionButton,
+              {
+                name: "React",
+                rest: /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    className: "size-5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    "aria-hidden": true,
+                    children: [
+                      /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.25" }),
+                      /* @__PURE__ */ jsx("path", { d: "M7.25 11.75c.75 1 1.65 1.5 2.75 1.5s2-.5 2.75-1.5" }),
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "7.5",
+                          cy: "8.25",
+                          r: ".9",
+                          fill: "currentColor",
+                          stroke: "none"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "12.5",
+                          cy: "8.25",
+                          r: ".9",
+                          fill: "currentColor",
+                          stroke: "none"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                options: faces,
+                mode: "pick",
+                align: "start",
+                picked: face,
+                count: total,
+                onPick: (r) => {
+                  setFace(r?.key ?? null);
+                  setStatus(r ? `Reacted with ${r.label}.` : "Reaction removed.");
+                },
+                still
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ReactionButton,
+              {
+                name: "Love",
+                rest: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    className: "size-5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinejoin: "round",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx("path", { d: "M10 16.25s-6.25-3.6-6.25-8.1A3.4 3.4 0 0 1 10 6.35a3.4 3.4 0 0 1 6.25 1.8c0 4.5-6.25 8.1-6.25 8.1Z" })
+                  }
+                ),
+                options: hearts,
+                mode: "pick",
+                align: "center",
+                picked: heart,
+                count: loves + (heart ? 1 : 0),
+                onPick: (r) => {
+                  setHeart(r?.key ?? null);
+                  setStatus(r ? `Loved with ${r.label}.` : "Love removed.");
+                },
+                still
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ReactionButton,
+              {
+                name: "Boost",
+                rest: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    viewBox: "0 0 20 20",
+                    className: "size-5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "1.6",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsx("path", { d: "M10 16V4.5M5.5 9 10 4.5 14.5 9" })
+                  }
+                ),
+                options: boosts,
+                mode: "add",
+                align: "end",
+                picked: lastBoost,
+                count: boosted + boost,
+                onPick: (r) => {
+                  if (!r) return;
+                  setBoost((b) => b + (r.amount ?? 1));
+                  setLastBoost(r.key);
+                  setStatus(`Boosted by ${r.amount ?? 1}.`);
+                },
+                still
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: status })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ReactionCard
+};