motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-INV5FI6O.js

@@ -0,0 +1,394 @@
+"use client";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/action-menu/action-menu.tsx
+import * as React from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var GLIDE = [0.22, 1, 0.36, 1];
+var PANEL = { type: "spring", stiffness: 520, damping: 34, mass: 0.7 };
+var SWAP = {
+  initial: { opacity: 0, y: 6 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -6 },
+  transition: { duration: 0.2, ease: GLIDE }
+};
+var WAVE_W = 20;
+function wavePath(amplitude, phase) {
+  const pts = [];
+  for (let y = 0; y <= 96; y += 4) {
+    const x = WAVE_W / 2 + amplitude * Math.sin(y / 48 * Math.PI * 2 + phase);
+    pts.push(`${x.toFixed(2)} ${y}`);
+  }
+  return `M0 0 L${pts.join(" L")} L0 96 Z`;
+}
+var WAVE_FRONT = wavePath(6, 0);
+var WAVE_BACK = wavePath(7.5, Math.PI / 1.5);
+var DEFAULT_ITEMS = [
+  { kind: "copy", label: "Copy logo SVG", copyText: "<svg><!-- logo --></svg>" },
+  { kind: "copy", label: "Copy wordmark SVG", copyText: "<svg><!-- wordmark --></svg>" },
+  { kind: "download", label: "Download SVGs" },
+  { kind: "separator" },
+  { kind: "link", label: "Usage guidelines" },
+  { kind: "link", label: "Download press kit" }
+];
+function CopyIcon() {
+  return /* @__PURE__ */ jsxs("g", { "data-face": "copy", children: [
+    /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M5 15H4.5A1.5 1.5 0 0 1 3 13.5v-9A1.5 1.5 0 0 1 4.5 3h9A1.5 1.5 0 0 1 15 4.5V5" })
+  ] });
+}
+function DownloadIcon() {
+  return /* @__PURE__ */ jsxs("g", { "data-face": "download", children: [
+    /* @__PURE__ */ jsx("path", { d: "M7 17.5H6a4 4 0 0 1-.7-7.94A6 6 0 0 1 17 8.2a4.5 4.5 0 0 1 1 8.8" }),
+    /* @__PURE__ */ jsxs("g", { "data-arrow": true, children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 11v9" }),
+      /* @__PURE__ */ jsx("path", { d: "m8.5 16.5 3.5 3.5 3.5-3.5" })
+    ] })
+  ] });
+}
+function ActionRow({
+  item,
+  index,
+  active,
+  highlightId,
+  confirmFor,
+  onHover
+}) {
+  const row = React.useRef(null);
+  const [done, setDone] = React.useState(false);
+  const busy = React.useRef(false);
+  const { contextSafe } = useGSAP({ scope: row });
+  const $ = (sel) => row.current ? Array.from(row.current.querySelectorAll(sel)) : [];
+  const run = contextSafe(async () => {
+    if (busy.current) return;
+    busy.current = true;
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const tl = gsap.timeline();
+    if (item.kind === "download") {
+      const ripples = [
+        gsap.fromTo(
+          $("[data-wave=front]"),
+          { yPercent: 0 },
+          { yPercent: -50, duration: 0.55, ease: "none", repeat: -1 }
+        ),
+        gsap.fromTo($("[data-wave=back]"), { yPercent: -50 }, { yPercent: 0, duration: 0.85, ease: "none", repeat: -1 })
+      ];
+      tl.to($("[data-arrow]"), { y: 3, duration: 0.18, ease: "power2.in", yoyo: true, repeat: 3 }).fromTo(
+        $("[data-progress]"),
+        { xPercent: -100, x: -WAVE_W, opacity: 1 },
+        {
+          xPercent: 0,
+          x: 0,
+          duration: 0.9,
+          ease: "power2.inOut",
+          onComplete: () => ripples.forEach((r) => r.kill())
+        },
+        0
+      );
+    }
+    try {
+      if (item.kind === "copy" && item.copyText) await navigator.clipboard?.writeText(item.copyText);
+      await item.onSelect?.();
+    } catch {
+    }
+    tl.to($("[data-face]"), { scale: 0.5, opacity: 0, duration: 0.15, ease: "power2.in", transformOrigin: "50% 50%" }).set($("[data-check]"), { opacity: 1 }).fromTo($("[data-check]"), { strokeDashoffset: 24 }, { strokeDashoffset: 0, duration: 0.3, ease: "power2.out" }).to($("[data-progress]"), { opacity: 0, duration: 0.35, ease: "power2.out" }, "<").add(() => setDone(true), "<");
+    if (reduce) tl.progress(1);
+    await tl.then();
+    window.setTimeout(
+      contextSafe(() => {
+        setDone(false);
+        gsap.timeline({ onComplete: () => void (busy.current = false) }).to($("[data-check]"), { opacity: 0, duration: 0.15 }).fromTo(
+          $("[data-face]"),
+          { scale: 0.5, opacity: 0 },
+          { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(2)", transformOrigin: "50% 50%" }
+        ).set($("[data-progress]"), { xPercent: -100, x: -WAVE_W });
+      }),
+      confirmFor
+    );
+  });
+  const doneLabel = item.doneLabel ?? (item.kind === "copy" ? "Copied" : "Downloaded");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: row,
+      type: "button",
+      role: "menuitem",
+      "data-item": index,
+      tabIndex: active ? 0 : -1,
+      onPointerEnter: onHover,
+      onFocus: onHover,
+      onClick: run,
+      className: "relative flex w-full cursor-pointer items-center gap-3 rounded-xl px-3 py-2 text-left text-sm outline-none",
+      children: [
+        active && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layoutId: highlightId,
+            transition: { duration: 0.25, ease: GLIDE },
+            className: "absolute inset-0 rounded-xl bg-[#242423]/6 dark:bg-white/8"
+          }
+        ),
+        item.kind === "download" && // Same rounded shape as the hover highlight; starts parked off the left edge. Solid grays,
+        // not translucent ones, so the fill and its two wave layers never double up where they overlap.
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute inset-0 overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-progress": true,
+            className: "absolute inset-0 bg-[#e6e6e5] text-[#e6e6e5] dark:bg-zinc-700 dark:text-zinc-700",
+            style: { transform: `translateX(calc(-100% - ${WAVE_W}px))` },
+            children: /* @__PURE__ */ jsxs("span", { className: "absolute left-full top-0 h-full overflow-hidden", style: { width: WAVE_W }, children: [
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "data-wave": "back",
+                  viewBox: `0 0 ${WAVE_W} 96`,
+                  preserveAspectRatio: "none",
+                  className: "absolute left-0 top-0 h-[200%] w-full text-[#ececeb] dark:text-zinc-800",
+                  children: /* @__PURE__ */ jsx("path", { d: WAVE_BACK, fill: "currentColor" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  "data-wave": "front",
+                  viewBox: `0 0 ${WAVE_W} 96`,
+                  preserveAspectRatio: "none",
+                  className: "absolute left-0 top-0 h-[200%] w-full",
+                  children: /* @__PURE__ */ jsx("path", { d: WAVE_FRONT, fill: "currentColor" })
+                }
+              )
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            className: cn(
+              "relative size-[18px] shrink-0 fill-none stroke-current transition-colors",
+              active ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-400"
+            ),
+            strokeWidth: 1.75,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: [
+              item.kind === "copy" ? /* @__PURE__ */ jsx(CopyIcon, {}) : /* @__PURE__ */ jsx(DownloadIcon, {}),
+              /* @__PURE__ */ jsx("path", { "data-check": true, d: "M20 6 9 17l-5-5", strokeWidth: 2.25, strokeDasharray: 24, opacity: 0 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative grid flex-1 font-medium transition-colors",
+              active ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-600 dark:text-zinc-300"
+            ),
+            children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsx(motion.span, { ...SWAP, className: "col-start-1 row-start-1", children: done ? doneLabel : item.label }, done ? "done" : "idle") })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: done ? doneLabel : "" })
+      ]
+    }
+  );
+}
+function LinkRow({
+  item,
+  index,
+  active,
+  highlightId,
+  onHover,
+  onPick
+}) {
+  const Tag = item.href ? motion.a : motion.button;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ...item.href ? { href: item.href } : { type: "button" },
+      role: "menuitem",
+      "data-item": index,
+      tabIndex: active ? 0 : -1,
+      onPointerEnter: onHover,
+      onFocus: onHover,
+      onClick: () => {
+        item.onSelect?.();
+        onPick();
+      },
+      initial: "rest",
+      animate: active ? "hover" : "rest",
+      className: cn(
+        "relative flex w-full cursor-pointer items-center justify-between gap-3 rounded-xl px-3 py-2 text-left text-sm font-medium outline-none transition-colors",
+        active ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-500 dark:text-zinc-400"
+      ),
+      children: [
+        active && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            layoutId: highlightId,
+            transition: { duration: 0.25, ease: GLIDE },
+            className: "absolute inset-0 rounded-xl bg-[#242423]/6 dark:bg-white/8"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative", children: item.label }),
+        /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            variants: { rest: { x: 0, y: 0, opacity: 0.5 }, hover: { x: 2, y: -2, opacity: 1 } },
+            transition: { duration: 0.25, ease: GLIDE },
+            className: "relative flex",
+            children: /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: "size-4", strokeWidth: 2 })
+          }
+        )
+      ]
+    }
+  );
+}
+var ActionMenu = React.forwardRef(function ActionMenu2({ label = "Brand assets", items = DEFAULT_ITEMS, defaultOpen = false, confirmFor = 1400, className }, forwardedRef) {
+  const root = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => root.current);
+  const triggerRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const [open, setOpen] = React.useState(defaultOpen);
+  const [active, setActive] = React.useState(null);
+  const uid = React.useId();
+  const highlightId = `${uid}-highlight`;
+  const menuId = `${uid}-menu`;
+  const selectable = items.flatMap((it, i) => it.kind === "separator" ? [] : [i]);
+  useGSAP(
+    () => {
+      if (!open) return;
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+      const rows = panelRef.current?.querySelectorAll("[data-row]");
+      if (!rows?.length) return;
+      gsap.fromTo(
+        rows,
+        { opacity: 0, y: 6 },
+        { opacity: 1, y: 0, duration: 0.32, ease: "power2.out", stagger: 0.035, delay: 0.04 }
+      );
+    },
+    { scope: panelRef, dependencies: [open] }
+  );
+  React.useEffect(() => {
+    if (!open) return;
+    const onDown = (e) => {
+      if (!root.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onDown);
+    return () => document.removeEventListener("pointerdown", onDown);
+  }, [open]);
+  React.useEffect(() => {
+    if (!open || active === null) return;
+    const el = panelRef.current?.querySelector(`[data-item="${active}"]`);
+    if (el && document.activeElement !== el && panelRef.current?.contains(document.activeElement)) el.focus();
+  }, [active, open]);
+  const close = (refocus = true) => {
+    setOpen(false);
+    setActive(null);
+    if (refocus) triggerRef.current?.focus();
+  };
+  const move = (dir) => {
+    const at = active === null ? -1 : selectable.indexOf(active);
+    const next = dir === "first" ? 0 : dir === "last" ? selectable.length - 1 : (at + dir + selectable.length) % selectable.length;
+    const target = selectable[next];
+    setActive(target);
+    panelRef.current?.querySelector(`[data-item="${target}"]`)?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: root, className: cn("relative inline-flex flex-col items-start", className), children: [
+    /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": menuId,
+        onClick: () => setOpen((o) => !o),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            setOpen(true);
+            requestAnimationFrame(() => move(e.key === "ArrowDown" ? "first" : "last"));
+          }
+        },
+        whileTap: { scale: 0.97 },
+        className: "inline-flex cursor-pointer items-center gap-2 rounded-full bg-[#242423]/6 px-4 py-2 text-sm font-medium text-[#242423] transition-colors hover:bg-[#242423]/10 outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/8 dark:text-zinc-100 dark:hover:bg-white/12",
+        children: [
+          label,
+          /* @__PURE__ */ jsx(motion.span, { animate: { rotate: open ? 180 : 0 }, transition: { duration: 0.3, ease: GLIDE }, className: "flex", children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", strokeWidth: 2.25 }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        ref: panelRef,
+        id: menuId,
+        role: "menu",
+        "aria-label": typeof label === "string" ? label : "Menu",
+        initial: { opacity: 0, scale: 0.94, y: -6 },
+        animate: { opacity: 1, scale: 1, y: 0 },
+        exit: { opacity: 0, scale: 0.96, y: -4, transition: { duration: 0.15, ease: GLIDE } },
+        transition: PANEL,
+        style: { transformOrigin: "top left" },
+        onPointerLeave: () => setActive(null),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown") e.preventDefault(), move(1);
+          if (e.key === "ArrowUp") e.preventDefault(), move(-1);
+          if (e.key === "Home") e.preventDefault(), move("first");
+          if (e.key === "End") e.preventDefault(), move("last");
+          if (e.key === "Escape") e.preventDefault(), close();
+          if (e.key === "Tab") close(false);
+        },
+        className: "absolute left-0 top-full z-20 mt-2 w-64 rounded-2xl bg-white p-1.5 shadow-[0_1px_2px_rgba(0,0,0,0.05),0_16px_40px_-12px_rgba(0,0,0,0.22)] ring-1 ring-black/5 dark:bg-zinc-900 dark:ring-white/10",
+        children: items.map(
+          (item, i) => item.kind === "separator" ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-row": true,
+              role: "separator",
+              className: "mx-3 my-1.5 h-px bg-zinc-100 dark:bg-zinc-800"
+            },
+            `sep-${i}`
+          ) : /* @__PURE__ */ jsx("div", { "data-row": true, children: item.kind === "link" ? /* @__PURE__ */ jsx(
+            LinkRow,
+            {
+              item,
+              index: i,
+              active: active === i,
+              highlightId,
+              onHover: () => setActive(i),
+              onPick: () => close()
+            }
+          ) : /* @__PURE__ */ jsx(
+            ActionRow,
+            {
+              item,
+              index: i,
+              active: active === i,
+              highlightId,
+              confirmFor,
+              onHover: () => setActive(i)
+            }
+          ) }, item.label)
+        )
+      }
+    ) })
+  ] });
+});
+
+export {
+  ActionMenu
+};