motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-OMJBDFEW.js

@@ -0,0 +1,506 @@
+"use client";
+import {
+  XIcon
+} from "./chunk-7FQ4XU7E.js";
+import {
+  ChevronRightIcon
+} from "./chunk-XH6YNONO.js";
+import {
+  UserPlusIcon
+} from "./chunk-SKEE23KW.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/team-morph/team-morph.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useReducedMotion
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var MORPH = {
+  type: "spring",
+  stiffness: 420,
+  damping: 38,
+  mass: 0.9
+};
+var LEAVE = { opacity: 0, transition: { duration: 0.08 } };
+var PALETTE = [
+  "#2a9fbf",
+  "#3d66d6",
+  "#d6498f",
+  "#9150e0",
+  "#269a5a",
+  "#cf7a1c",
+  "#5b6472",
+  "#c0435e"
+];
+var DEFAULT_MEMBERS = [
+  { name: "Alex Rivera", role: "Design lead" },
+  { name: "Elaine Park", role: "Product designer" },
+  { name: "Breno Costa", role: "Motion designer", awayFor: 12 },
+  { name: "Taitina Ellis", role: "Researcher" },
+  { name: "Raman Gill", role: "Design engineer", awayFor: 40 }
+];
+var initials = (name) => name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+function Avatar({
+  member,
+  color,
+  size,
+  layoutId,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      layoutId,
+      transition: MORPH,
+      "aria-hidden": true,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: 999,
+        background: color,
+        fontSize: Math.round(size * 0.34 / 2) * 2
+      },
+      className: cn(
+        "relative grid shrink-0 place-items-center font-semibold tracking-tight text-white ring-[2.5px] ring-white dark:ring-zinc-900",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(motion.span, { layout: "position", transition: MORPH, children: initials(member.name) })
+    }
+  );
+}
+var TeamMorph = React.forwardRef(
+  function TeamMorph2({
+    team = "Design team",
+    members = DEFAULT_MEMBERS,
+    stack = 3,
+    defaultOpen = false,
+    onInvite,
+    className
+  }, forwardedRef) {
+    const root = React.useRef(null);
+    React.useImperativeHandle(
+      forwardedRef,
+      () => root.current
+    );
+    const pillRef = React.useRef(null);
+    const closeRef = React.useRef(null);
+    const reduceMotion = useReducedMotion();
+    const uid = React.useId();
+    const [open, setOpen] = React.useState(defaultOpen);
+    const [hover, setHover] = React.useState(false);
+    const wasOpen = React.useRef(defaultOpen);
+    const people = members.map((m, i) => ({
+      ...m,
+      color: m.color ?? PALETTE[i % PALETTE.length]
+    }));
+    const online = people.filter((m) => m.awayFor === void 0).length;
+    const extra = Math.max(0, people.length - stack);
+    const t = reduceMotion ? { duration: 0 } : MORPH;
+    React.useEffect(() => {
+      if (open) closeRef.current?.focus({ preventScroll: true });
+      else if (wasOpen.current) pillRef.current?.focus({ preventScroll: true });
+      wasOpen.current = open;
+      if (!open) return;
+      const onDown = (e) => {
+        if (!root.current?.contains(e.target)) setOpen(false);
+      };
+      const onKey = (e) => e.key === "Escape" && setOpen(false);
+      document.addEventListener("pointerdown", onDown);
+      document.addEventListener("keydown", onKey);
+      return () => {
+        document.removeEventListener("pointerdown", onDown);
+        document.removeEventListener("keydown", onKey);
+      };
+    }, [open]);
+    return /* @__PURE__ */ jsx("div", { ref: root, className: cn("relative inline-flex", className), children: /* @__PURE__ */ jsx(LayoutGroup, { id: uid, children: /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        layout: true,
+        transition: t,
+        style: { borderRadius: 28 },
+        animate: {
+          y: !open && hover ? -1 : 0,
+          boxShadow: open ? "0 1px 2px rgba(0,0,0,0.05), 0 16px 40px -16px rgba(0,0,0,0.25)" : hover ? "0 2px 4px rgba(0,0,0,0.06), 0 16px 34px -14px rgba(0,0,0,0.32)" : "0 1px 2px rgba(0,0,0,0.05), 0 10px 28px -14px rgba(0,0,0,0.25)"
+        },
+        className: "relative overflow-hidden bg-white dark:bg-zinc-900",
+        children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: !open ? /* @__PURE__ */ jsxs(
+          motion.button,
+          {
+            ref: pillRef,
+            type: "button",
+            layout: "position",
+            transition: t,
+            exit: LEAVE,
+            "aria-expanded": false,
+            "aria-label": `${team}: ${online} of ${people.length} online. Show everyone.`,
+            onClick: () => setOpen(true),
+            onPointerEnter: () => setHover(true),
+            onPointerLeave: () => setHover(false),
+            whileTap: reduceMotion ? void 0 : { scale: 0.97 },
+            style: { borderRadius: 28 },
+            className: "flex cursor-pointer items-center gap-3 p-2 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-zinc-400",
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "flex items-center", children: [
+                people.slice(0, stack).map((m, i) => /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    animate: { y: hover ? -3 : 0 },
+                    transition: {
+                      type: "spring",
+                      stiffness: 420,
+                      damping: 18,
+                      delay: hover ? i * 0.04 : 0
+                    },
+                    className: cn("relative", i > 0 && "-ml-2"),
+                    style: { zIndex: stack - i },
+                    children: /* @__PURE__ */ jsx(
+                      Avatar,
+                      {
+                        member: m,
+                        color: m.color,
+                        size: 38,
+                        layoutId: `avatar-${m.name}`
+                      }
+                    )
+                  },
+                  m.name
+                )),
+                extra > 0 && // The chip has nothing to fly from, so it waits out the morph and fades in once the pill settles.
+                /* @__PURE__ */ jsxs(
+                  motion.span,
+                  {
+                    initial: { opacity: 0, scale: 0.6 },
+                    animate: { opacity: 1, scale: 1, y: hover ? -2 : 0 },
+                    transition: {
+                      opacity: { duration: 0.2, delay: 0.28 },
+                      scale: {
+                        type: "spring",
+                        stiffness: 420,
+                        damping: 22,
+                        delay: 0.28
+                      },
+                      y: { type: "spring", stiffness: 420, damping: 26 }
+                    },
+                    className: "relative -ml-2 grid size-[38px] place-items-center rounded-full bg-zinc-100 text-xs font-semibold text-zinc-600 ring-[2.5px] ring-white dark:bg-zinc-800 dark:text-zinc-300 dark:ring-zinc-900",
+                    children: [
+                      "+",
+                      extra
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                motion.span,
+                {
+                  layout: "position",
+                  transition: t,
+                  className: "flex flex-col items-start text-left",
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: team }),
+                    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 text-xs text-zinc-500 dark:text-zinc-400", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "relative flex size-1.5", children: [
+                        !reduceMotion && /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            className: "absolute inset-0 rounded-full bg-emerald-500",
+                            animate: { scale: [1, 2.4], opacity: [0.5, 0] },
+                            transition: {
+                              duration: 1.6,
+                              repeat: Infinity,
+                              ease: "easeOut"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "relative size-1.5 rounded-full bg-emerald-500" })
+                      ] }),
+                      online,
+                      " online"
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  "aria-hidden": true,
+                  layout: "position",
+                  initial: { opacity: 0, scale: 0.6 },
+                  animate: { opacity: 1, scale: 1 },
+                  transition: {
+                    opacity: { duration: 0.2, delay: 0.28 },
+                    scale: {
+                      type: "spring",
+                      stiffness: 420,
+                      damping: 22,
+                      delay: 0.28
+                    },
+                    layout: t
+                  },
+                  className: cn(
+                    "ml-2 grid size-[38px] shrink-0 place-items-center overflow-hidden rounded-full transition-colors duration-200",
+                    hover ? "bg-[#242423]/11 text-zinc-900 dark:bg-white/14 dark:text-zinc-100" : "bg-[#242423]/6 text-zinc-500 dark:bg-white/8 dark:text-zinc-300"
+                  ),
+                  children: /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      initial: false,
+                      animate: hover ? { x: [1, 22, -20, 1] } : { x: 1 },
+                      transition: hover ? {
+                        duration: 0.55,
+                        times: [0, 0.4, 0.401, 1],
+                        ease: ["easeIn", "linear", "easeOut"]
+                      } : { duration: 0.2 },
+                      className: "flex",
+                      children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-[18px]", strokeWidth: 2.5 })
+                    }
+                  )
+                }
+              )
+            ]
+          },
+          "pill"
+        ) : /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            layout: "position",
+            transition: t,
+            exit: LEAVE,
+            role: "region",
+            "aria-label": `${team} members`,
+            className: "w-[320px] max-w-full px-2 pb-3 pt-2",
+            children: [
+              /* @__PURE__ */ jsxs(
+                motion.header,
+                {
+                  layout: "position",
+                  transition: t,
+                  exit: LEAVE,
+                  className: "flex items-center justify-between gap-3 px-3 pb-1 pt-2",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      motion.div,
+                      {
+                        initial: { opacity: 0, y: 4 },
+                        animate: {
+                          opacity: 1,
+                          y: 0,
+                          transition: { delay: 0.12, duration: 0.3, ease: GLIDE }
+                        },
+                        className: "flex items-baseline gap-2",
+                        children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-[14px] font-semibold text-zinc-900 dark:text-zinc-100", children: team }),
+                          /* @__PURE__ */ jsx("p", { className: "text-[12px] text-zinc-400", children: people.length })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ jsx(
+                      motion.button,
+                      {
+                        ref: closeRef,
+                        type: "button",
+                        "aria-label": "Collapse",
+                        onClick: () => setOpen(false),
+                        initial: { opacity: 0, scale: 0.6, rotate: -90 },
+                        animate: {
+                          opacity: 1,
+                          scale: 1,
+                          rotate: 0,
+                          transition: {
+                            delay: 0.1,
+                            duration: 0.3,
+                            ease: GLIDE
+                          }
+                        },
+                        whileHover: { rotate: 90 },
+                        whileTap: { scale: 0.9 },
+                        className: "grid size-8 cursor-pointer place-items-center rounded-full text-zinc-500 transition-colors hover:bg-[#242423]/6 hover:text-zinc-900 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:hover:bg-white/8 dark:hover:text-zinc-100",
+                        children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", strokeWidth: 2 })
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              [
+                {
+                  label: "Online",
+                  rows: people.filter((m) => m.awayFor === void 0)
+                },
+                {
+                  label: "Away",
+                  rows: people.filter((m) => m.awayFor !== void 0)
+                }
+              ].filter((g) => g.rows.length > 0).map((group, g) => /* @__PURE__ */ jsxs(
+                motion.section,
+                {
+                  exit: LEAVE,
+                  "aria-label": `${group.label}, ${group.rows.length}`,
+                  className: "mt-2",
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      motion.p,
+                      {
+                        initial: { opacity: 0 },
+                        animate: {
+                          opacity: 1,
+                          transition: {
+                            delay: 0.14 + g * 0.08,
+                            duration: 0.3
+                          }
+                        },
+                        className: "px-3 pb-1 text-[12px] font-medium text-zinc-400",
+                        children: [
+                          group.label,
+                          " \xB7 ",
+                          group.rows.length
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("ul", { children: group.rows.map((m) => {
+                      const i = people.indexOf(m);
+                      const away = m.awayFor !== void 0;
+                      return /* @__PURE__ */ jsxs(
+                        "li",
+                        {
+                          className: "flex items-center gap-3 px-3 py-1.5",
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: cn("flex", away && "opacity-50"),
+                                children: i < stack ? /* @__PURE__ */ jsx(
+                                  Avatar,
+                                  {
+                                    member: m,
+                                    color: m.color,
+                                    size: 34,
+                                    layoutId: `avatar-${m.name}`
+                                  }
+                                ) : (
+                                  // People hidden behind the "+n" chip have no stack avatar to fly from, so they pop in.
+                                  /* @__PURE__ */ jsx(
+                                    motion.span,
+                                    {
+                                      initial: { opacity: 0, scale: 0.5 },
+                                      animate: {
+                                        opacity: 1,
+                                        scale: 1,
+                                        transition: {
+                                          type: "spring",
+                                          stiffness: 420,
+                                          damping: 24,
+                                          delay: 0.1 + i * 0.03
+                                        }
+                                      },
+                                      className: "flex",
+                                      children: /* @__PURE__ */ jsx(
+                                        Avatar,
+                                        {
+                                          member: m,
+                                          color: m.color,
+                                          size: 34
+                                        }
+                                      )
+                                    }
+                                  )
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              motion.div,
+                              {
+                                initial: { opacity: 0, x: -6 },
+                                animate: {
+                                  opacity: 1,
+                                  x: 0,
+                                  transition: {
+                                    delay: 0.16 + i * 0.03,
+                                    duration: 0.3,
+                                    ease: GLIDE
+                                  }
+                                },
+                                className: "min-w-0 flex-1",
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    "p",
+                                    {
+                                      className: cn(
+                                        "truncate text-sm font-medium",
+                                        away ? "text-zinc-500 dark:text-zinc-400" : "text-zinc-900 dark:text-zinc-100"
+                                      ),
+                                      children: m.name
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsx("p", { className: "truncate text-[12px] text-zinc-500 dark:text-zinc-400", children: m.role })
+                                ]
+                              }
+                            ),
+                            away && /* @__PURE__ */ jsxs(
+                              motion.span,
+                              {
+                                initial: { opacity: 0 },
+                                animate: {
+                                  opacity: 1,
+                                  transition: {
+                                    delay: 0.22 + i * 0.03,
+                                    duration: 0.25
+                                  }
+                                },
+                                className: "text-[12px] tabular-nums text-zinc-400",
+                                children: [
+                                  m.awayFor,
+                                  "m"
+                                ]
+                              }
+                            )
+                          ]
+                        },
+                        m.name
+                      );
+                    }) })
+                  ]
+                },
+                group.label
+              )),
+              onInvite && /* @__PURE__ */ jsxs(
+                motion.button,
+                {
+                  type: "button",
+                  onClick: onInvite,
+                  initial: { opacity: 0, y: 6 },
+                  animate: {
+                    opacity: 1,
+                    y: 0,
+                    transition: {
+                      delay: 0.22 + people.length * 0.03,
+                      duration: 0.3,
+                      ease: GLIDE
+                    }
+                  },
+                  exit: LEAVE,
+                  whileTap: { scale: 0.97 },
+                  className: "mx-1 mt-3 flex w-[calc(100%-0.5rem)] cursor-pointer items-center justify-center gap-2 rounded-2xl bg-[#242423]/5 py-2.5 text-sm font-medium text-zinc-700 transition-colors hover:bg-[#242423]/8 hover:text-zinc-900 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/6 dark:text-zinc-200 dark:hover:bg-white/10",
+                  children: [
+                    /* @__PURE__ */ jsx(UserPlusIcon, { className: "size-4", strokeWidth: 2 }),
+                    "Invite"
+                  ]
+                }
+              )
+            ]
+          },
+          "card"
+        ) })
+      }
+    ) }) });
+  }
+);
+
+export {
+  TeamMorph
+};