motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-6FTC5OQF.js

@@ -0,0 +1,384 @@
+"use client";
+import {
+  MapPinIcon
+} from "./chunk-EEQ2WHTN.js";
+import {
+  MessageCircleIcon
+} from "./chunk-WFWO2EIW.js";
+import {
+  BookmarkIcon
+} from "./chunk-VIR5NV5W.js";
+import {
+  CircleCheckIcon
+} from "./chunk-YU6B7YRO.js";
+import {
+  UserPlusIcon
+} from "./chunk-SKEE23KW.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/profile-card/profile-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion,
+  useSpring,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var EASE = [0.22, 1, 0.36, 1];
+var POP = { type: "spring", stiffness: 460, damping: 26 };
+var PILL = { type: "spring", stiffness: 520, damping: 34 };
+var SHOWN_SKILLS = 3;
+var DEFAULT_STATS = [
+  { label: "Followers", value: 12480 },
+  { label: "Projects", value: 86 },
+  { label: "Rating", value: 4.9, decimals: 1 }
+];
+function formatStat(v, s) {
+  if (s.compact && Math.abs(v) >= 1e3) {
+    const k = v / 1e3;
+    return `${k.toFixed(k >= 100 ? 0 : 1)}k`;
+  }
+  return v.toLocaleString("en-US", {
+    minimumFractionDigits: s.decimals ?? 0,
+    maximumFractionDigits: s.decimals ?? 0
+  });
+}
+function Stat({ stat, value, run, still, delay }) {
+  const mv = useMotionValue(still ? value : 0);
+  const [text, setText] = React.useState(() => formatStat(still ? value : 0, stat));
+  useMotionValueEvent(mv, "change", (v) => setText(formatStat(v, stat)));
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (!run) return;
+    if (still) return mv.set(value);
+    const c = animate(mv, value, { duration: first.current ? 1.2 : 0.5, delay: first.current ? delay : 0, ease: EASE });
+    first.current = false;
+    return () => c.stop();
+  }, [value, run, still, delay, mv]);
+  return /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 rounded-2xl bg-[#242423]/[0.04] px-1.5 py-2.5 text-center dark:bg-white/[0.05]", children: [
+    /* @__PURE__ */ jsx("p", { className: "truncate text-lg font-semibold tabular-nums tracking-tight", children: text }),
+    /* @__PURE__ */ jsx("p", { className: "truncate text-xs text-zinc-500 dark:text-zinc-400", children: stat.label })
+  ] });
+}
+var ProfileCard = React.forwardRef(function ProfileCard2({
+  name = "Lena Hartmann",
+  role = "Brand and motion designer",
+  location = "Lisbon",
+  bio = "I shape identities that move: logos with a heartbeat and interfaces with a little joy in every tap.",
+  avatar = "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=240&h=240&fit=crop&crop=faces",
+  verified = true,
+  status = "Available",
+  skills = ["Motion", "Branding", "3D", "Prototyping", "Type", "Illustration"],
+  stats = DEFAULT_STATS,
+  cover = ["#ffc9a8", "#d9c6ff", "#b9e3ff"],
+  defaultFollowing = false,
+  onFollowChange,
+  onMessage,
+  onSaveChange,
+  className
+}, forwardedRef) {
+  const ref = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => ref.current);
+  const inView = useInView(ref, { once: true, amount: 0.3 });
+  const still = !!useReducedMotion();
+  const shown = still || inView;
+  const uid = React.useId();
+  const px = useMotionValue(0.5);
+  const py = useMotionValue(0.5);
+  const sx = useSpring(px, { stiffness: 120, damping: 18 });
+  const sy = useSpring(py, { stiffness: 120, damping: 18 });
+  const blobX = useTransform(sx, [0, 1], ["10%", "90%"]);
+  const blobY = useTransform(sy, [0, 1], ["20%", "80%"]);
+  const [hover, setHover] = React.useState(false);
+  const onMove = (e) => {
+    if (still) return;
+    const r = e.currentTarget.getBoundingClientRect();
+    px.set((e.clientX - r.left) / r.width);
+    py.set((e.clientY - r.top) / r.height);
+  };
+  const onLeave = () => {
+    setHover(false);
+    px.set(0.5);
+    py.set(0.5);
+  };
+  const [following, setFollowing] = React.useState(defaultFollowing);
+  const [saved, setSaved] = React.useState(false);
+  const [more, setMore] = React.useState(false);
+  const [hoverBtn, setHoverBtn] = React.useState(null);
+  const follow = () => {
+    setFollowing((f) => {
+      onFollowChange?.(!f);
+      return !f;
+    });
+  };
+  const save = () => {
+    setSaved((s) => {
+      onSaveChange?.(!s);
+      return !s;
+    });
+  };
+  const extra = skills.length - SHOWN_SKILLS;
+  const showSkills = more ? skills : skills.slice(0, SHOWN_SKILLS);
+  const reveal = (i) => ({
+    initial: still ? false : { opacity: 0, y: 10, filter: "blur(4px)" },
+    animate: shown ? { opacity: 1, y: 0, filter: "blur(0px)" } : void 0,
+    transition: { duration: 0.45, delay: still ? 0 : 0.25 + i * 0.07, ease: EASE }
+  });
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref,
+      initial: still ? false : { opacity: 0, y: 18, scale: 0.98 },
+      animate: shown ? { opacity: 1, y: 0, scale: 1 } : void 0,
+      transition: { duration: 0.6, ease: EASE },
+      onPointerEnter: () => setHover(true),
+      onPointerMove: onMove,
+      onPointerLeave: onLeave,
+      className: cn(
+        "relative w-[340px] max-w-full rounded-[28px] bg-white p-2 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_16px_40px_-18px_rgba(0,0,0,0.22)] dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative h-32 overflow-hidden rounded-[22px] bg-[#f6f3f1] dark:bg-zinc-800", children: [
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              "aria-hidden": true,
+              className: "absolute size-56 rounded-full blur-2xl",
+              style: { background: cover[0], left: "-10%", top: "-40%" },
+              animate: still ? void 0 : { x: [0, 30, -10, 0], y: [0, 20, 10, 0] },
+              transition: { duration: 14, repeat: Infinity, ease: "easeInOut" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              "aria-hidden": true,
+              className: "absolute size-52 rounded-full blur-2xl",
+              style: { background: cover[2], right: "-15%", top: "-30%" },
+              animate: still ? void 0 : { x: [0, -24, 12, 0], y: [0, 16, -8, 0] },
+              transition: { duration: 16, repeat: Infinity, ease: "easeInOut" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              "aria-hidden": true,
+              className: "absolute size-48 -translate-x-1/2 -translate-y-1/2 rounded-full blur-2xl",
+              style: { background: cover[1], left: still ? "55%" : blobX, top: still ? "60%" : blobY },
+              animate: { scale: hover && !still ? 1.15 : 1, opacity: hover ? 1 : 0.85 },
+              transition: { type: "spring", stiffness: 160, damping: 20 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-0 opacity-[0.18] mix-blend-overlay",
+              style: {
+                backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.6'/></svg>")`
+              }
+            }
+          ),
+          status && /* @__PURE__ */ jsxs(
+            motion.span,
+            {
+              initial: still ? false : { opacity: 0, y: -6, scale: 0.9 },
+              animate: shown ? { opacity: 1, y: 0, scale: 1 } : void 0,
+              transition: { ...POP, delay: still ? 0 : 0.5 },
+              className: "absolute right-3 top-3 inline-flex h-7 items-center gap-1.5 rounded-full bg-white/70 px-2.5 text-xs font-medium text-[#242423] backdrop-blur-md dark:bg-zinc-900/60 dark:text-zinc-100",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "relative grid size-1.5 place-items-center", children: [
+                  !still && /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute inset-0 rounded-full bg-[#16a36a]",
+                      animate: { scale: [1, 2.6], opacity: [0.6, 0] },
+                      transition: { duration: 1.8, repeat: Infinity, ease: "easeOut" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "relative size-1.5 rounded-full bg-[#16a36a]" })
+                ] }),
+                status
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4", children: [
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: still ? false : { opacity: 0, scale: 0.6, y: 10 },
+              animate: shown ? { opacity: 1, scale: 1, y: 0 } : void 0,
+              transition: { ...POP, delay: still ? 0 : 0.18 },
+              whileHover: still ? void 0 : { scale: 1.05, rotate: -3 },
+              className: "relative -mt-10 size-20 rounded-full bg-white p-1 dark:bg-zinc-900",
+              children: [
+                /* @__PURE__ */ jsx("img", { src: avatar, alt: "", className: "size-full rounded-full bg-zinc-100 object-cover dark:bg-zinc-800", draggable: false }),
+                /* @__PURE__ */ jsx("span", { className: "absolute bottom-1 right-1 grid size-4 place-items-center rounded-full bg-white dark:bg-zinc-900", children: /* @__PURE__ */ jsxs("span", { className: "relative grid size-2.5 place-items-center", children: [
+                  !still && /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "absolute inset-0 rounded-full bg-[#16a36a]",
+                      animate: { scale: [1, 2], opacity: [0.5, 0] },
+                      transition: { duration: 2, repeat: Infinity, ease: "easeOut" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "relative size-2.5 rounded-full bg-[#16a36a]" })
+                ] }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(motion.div, { ...reveal(0), className: "mt-3 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("h3", { className: "truncate text-xl font-semibold tracking-tight", children: name }),
+            verified && /* @__PURE__ */ jsx("span", { className: "text-[#3b82f6]", "aria-label": "Verified", role: "img", children: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-[18px]", active: hover, strokeWidth: 2.25 }) })
+          ] }),
+          /* @__PURE__ */ jsxs(motion.p, { ...reveal(1), className: "mt-0.5 flex flex-wrap items-center gap-x-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [
+            /* @__PURE__ */ jsx("span", { children: role }),
+            location && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+              /* @__PURE__ */ jsx(MapPinIcon, { className: "size-3.5", active: hover, strokeWidth: 2.25 }),
+              location
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(motion.p, { ...reveal(2), className: "mt-3 text-pretty text-sm leading-relaxed text-zinc-600 dark:text-zinc-300", children: bio }),
+          /* @__PURE__ */ jsx(LayoutGroup, { id: uid, children: /* @__PURE__ */ jsx(motion.ul, { ...reveal(3), layout: !still, className: "mt-3 flex flex-wrap gap-1.5", children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, mode: "popLayout", children: [
+            showSkills.map((s) => /* @__PURE__ */ jsx(
+              motion.li,
+              {
+                layout: !still,
+                initial: still ? false : { opacity: 0, scale: 0.8 },
+                animate: { opacity: 1, scale: 1 },
+                exit: still ? void 0 : { opacity: 0, scale: 0.8, transition: { duration: 0.14 } },
+                transition: POP,
+                className: "inline-flex h-7 items-center rounded-full bg-[#242423]/[0.06] px-3 text-xs font-medium dark:bg-white/[0.08]",
+                children: s
+              },
+              s
+            )),
+            extra > 0 && /* @__PURE__ */ jsx(motion.li, { layout: !still, transition: POP, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": more,
+                onClick: () => setMore((m) => !m),
+                className: "inline-flex h-7 items-center rounded-full bg-[#242423]/[0.03] px-3 text-xs font-medium text-zinc-500 outline-none transition-colors hover:bg-[#242423]/[0.07] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.04] dark:text-zinc-400 dark:hover:bg-white/[0.08] dark:hover:text-zinc-100",
+                children: more ? "Less" : `+${extra}`
+              }
+            ) }, "more")
+          ] }) }) }),
+          /* @__PURE__ */ jsx(motion.div, { ...reveal(4), className: "mt-4 flex gap-2", children: stats.slice(0, 3).map((s, i) => /* @__PURE__ */ jsx(
+            Stat,
+            {
+              stat: s,
+              value: i === 0 && following !== defaultFollowing ? s.value + (following ? 1 : -1) : s.value,
+              run: shown,
+              still,
+              delay: 0.45 + i * 0.08
+            },
+            s.label
+          )) }),
+          /* @__PURE__ */ jsxs(motion.div, { ...reveal(5), className: "mt-4 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                layout: !still,
+                "aria-pressed": following,
+                onClick: follow,
+                onPointerEnter: () => setHoverBtn("follow"),
+                onPointerLeave: () => setHoverBtn(null),
+                whileTap: still ? void 0 : { scale: 0.96 },
+                transition: PILL,
+                className: cn(
+                  "inline-flex h-11 flex-1 items-center justify-center gap-2 rounded-full text-sm font-medium outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+                  following ? "bg-[#242423]/[0.06] text-[#242423] hover:bg-[#242423]/[0.1] dark:bg-white/[0.08] dark:text-zinc-100" : "bg-[#242423] text-white dark:bg-zinc-100 dark:text-zinc-900"
+                ),
+                children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+                  motion.span,
+                  {
+                    initial: still ? false : { opacity: 0, y: 10, filter: "blur(4px)" },
+                    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                    exit: still ? void 0 : { opacity: 0, y: -10, filter: "blur(4px)" },
+                    transition: { duration: 0.2, ease: EASE },
+                    className: "inline-flex items-center gap-2",
+                    children: [
+                      following ? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4", active: true, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx(UserPlusIcon, { className: "size-4", active: hoverBtn === "follow", strokeWidth: 2.25 }),
+                      following ? "Following" : "Follow"
+                    ]
+                  },
+                  following ? "on" : "off"
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                type: "button",
+                "aria-label": `Message ${name}`,
+                onClick: onMessage,
+                onPointerEnter: () => setHoverBtn("msg"),
+                onPointerLeave: () => setHoverBtn(null),
+                whileTap: still ? void 0 : { scale: 0.92 },
+                className: "grid size-11 shrink-0 place-items-center rounded-full bg-[#242423]/[0.06] outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:hover:bg-white/[0.12]",
+                children: /* @__PURE__ */ jsx(MessageCircleIcon, { className: "size-[18px]", active: hoverBtn === "msg", strokeWidth: 2 })
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              motion.button,
+              {
+                type: "button",
+                "aria-label": saved ? "Saved" : "Save profile",
+                "aria-pressed": saved,
+                onClick: save,
+                onPointerEnter: () => setHoverBtn("save"),
+                onPointerLeave: () => setHoverBtn(null),
+                whileTap: still ? void 0 : { scale: 0.92 },
+                className: "relative grid size-11 shrink-0 place-items-center rounded-full bg-[#242423]/[0.06] outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:hover:bg-white/[0.12]",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      animate: saved && !still ? { scale: [1, 1.35, 0.92, 1] } : { scale: 1 },
+                      transition: { duration: 0.45, ease: EASE },
+                      className: cn(saved && "[&_path]:fill-current"),
+                      children: /* @__PURE__ */ jsx(BookmarkIcon, { className: "size-[18px]", active: hoverBtn === "save", strokeWidth: 2 })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AnimatePresence, { children: saved && !still && /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      "aria-hidden": true,
+                      className: "pointer-events-none absolute inset-0 rounded-full ring-2 ring-[#242423]/30 dark:ring-white/30",
+                      initial: { scale: 0.6, opacity: 1 },
+                      animate: { scale: 1.5, opacity: 0 },
+                      exit: { opacity: 0 },
+                      transition: { duration: 0.5, ease: "easeOut" }
+                    },
+                    "burst"
+                  ) })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  ProfileCard
+};