motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-6XSJC7M7.js

@@ -0,0 +1,764 @@
+"use client";
+import {
+  CalendarDaysIcon
+} from "./chunk-JJEWOQYQ.js";
+import {
+  ChevronDownIcon
+} from "./chunk-NIQFSLPC.js";
+import {
+  PlusIcon
+} from "./chunk-HK34LPY6.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/event-card/event-card.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { ArrowRight, Video } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var GLIDE = [0.22, 1, 0.36, 1];
+var POP = { type: "spring", stiffness: 520, damping: 24 };
+var DANGER = "#d6453d";
+var headshot = (id) => `https://images.unsplash.com/${id}?w=96&h=96&fit=crop&crop=faces`;
+var DEFAULT_GUESTS = [
+  { name: "Sienna Hart", avatar: headshot("photo-1494790108377-be9c29b29330") },
+  { name: "Marcus Lee", avatar: headshot("photo-1507003211169-0a1dd7228f2d") },
+  { name: "Priya Nair", avatar: headshot("photo-1534528741775-53994a69daeb") },
+  { name: "Leo Grant", avatar: headshot("photo-1500648767791-00dcc994a43e") },
+  { name: "Ava Brooks", avatar: headshot("photo-1438761681033-6461ffad8d80") },
+  { name: "Omar Reyes", going: false }
+];
+var EXTRA_GUESTS = [
+  { name: "Nina Park", going: false },
+  { name: "Theo Ward", going: false },
+  { name: "Maya Cole", going: false }
+];
+var DEFAULT_ABOUT = [
+  "Sienna is inviting you to a scheduled video call.",
+  "Topic: a walk through the new dashboard, followed by questions from the team.",
+  "Bring anything you want us to look at. The recording and notes will be shared afterwards."
+];
+function defaultStart() {
+  const d = /* @__PURE__ */ new Date();
+  d.setDate(d.getDate() + ((5 - d.getDay() + 7) % 7 || 7));
+  d.setHours(13, 30, 0, 0);
+  return d;
+}
+var initials = (name) => name.split(/\s+/).map((p) => p[0]).slice(0, 2).join("").toUpperCase();
+function CopyIcon({ hover, still }) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      gsap.to("[data-front]", {
+        x: hover && !still ? 1.5 : 0,
+        y: hover && !still ? 1.5 : 0,
+        duration: 0.3,
+        ease: "power3.out"
+      });
+      gsap.to("[data-back]", {
+        x: hover && !still ? -1 : 0,
+        y: hover && !still ? -1 : 0,
+        duration: 0.3,
+        ease: "power3.out"
+      });
+    },
+    { scope: ref, dependencies: [hover] }
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      className: "size-[18px]",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            "data-back": true,
+            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"
+          }
+        ),
+        /* @__PURE__ */ jsx("rect", { "data-front": true, x: "8", y: "8", width: "13", height: "13", rx: "2" })
+      ]
+    }
+  );
+}
+function TrashIcon({ hover, still }) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      gsap.to("[data-lid]", {
+        y: hover && !still ? -2 : 0,
+        rotation: hover && !still ? -14 : 0,
+        svgOrigin: "4 6",
+        duration: 0.35,
+        ease: hover ? "back.out(3)" : "power2.out"
+      });
+    },
+    { scope: ref, dependencies: [hover] }
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      className: "size-[18px]",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsxs("g", { "data-lid": true, children: [
+          /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+          /* @__PURE__ */ jsx("path", { d: "M8.5 6V4.5A1.5 1.5 0 0 1 10 3h4a1.5 1.5 0 0 1 1.5 1.5V6" })
+        ] }),
+        /* @__PURE__ */ jsx("path", { d: "M5.5 6l1 13.5A1.5 1.5 0 0 0 8 21h8a1.5 1.5 0 0 0 1.5-1.5l1-13.5" }),
+        /* @__PURE__ */ jsx("path", { d: "M10 11v5M14 11v5" })
+      ]
+    }
+  );
+}
+function PencilIcon({ hover, still }) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      gsap.set("[data-line]", { strokeDasharray: 1, strokeDashoffset: 1 });
+      if (!hover || still) {
+        gsap.to("[data-pencil]", {
+          rotation: 0,
+          x: 0,
+          duration: 0.25,
+          svgOrigin: "4 20"
+        });
+        gsap.to("[data-line]", { strokeDashoffset: 1, duration: 0.2 });
+        return;
+      }
+      gsap.timeline().to("[data-pencil]", {
+        keyframes: { rotation: [0, -8, 6, 0], x: [0, 1, 2, 2.5] },
+        duration: 0.5,
+        ease: "sine.inOut",
+        svgOrigin: "4 20"
+      }).to(
+        "[data-line]",
+        { strokeDashoffset: 0, duration: 0.45, ease: "power2.out" },
+        0.05
+      );
+    },
+    { scope: ref, dependencies: [hover] }
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      className: "size-[18px] overflow-visible",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("path", { "data-line": true, d: "M13 21h8", pathLength: 1 }),
+        /* @__PURE__ */ jsxs("g", { "data-pencil": true, children: [
+          /* @__PURE__ */ jsx("path", { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" }),
+          /* @__PURE__ */ jsx("path", { d: "m15 5 3 3" })
+        ] })
+      ]
+    }
+  );
+}
+function SweepClock({
+  time,
+  play,
+  still
+}) {
+  const ref = React.useRef(null);
+  const h = time.getHours();
+  const m = time.getMinutes();
+  useGSAP(
+    () => {
+      const hour = (h % 12 + m / 60) * 30;
+      const minute = m * 6;
+      const o = {
+        svgOrigin: "12 12",
+        ease: "power3.out",
+        duration: still ? 0 : 1.3
+      };
+      if (!play && !still) {
+        gsap.set("[data-hour], [data-minute]", {
+          rotation: 0,
+          svgOrigin: "12 12"
+        });
+        return;
+      }
+      gsap.to("[data-hour]", { rotation: hour, ...o });
+      gsap.to("[data-minute]", { rotation: minute + (still ? 0 : 360), ...o });
+    },
+    { scope: ref, dependencies: [play, h, m] }
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 24 24",
+      className: "size-[18px]",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+        /* @__PURE__ */ jsx("line", { "data-hour": true, x1: "12", y1: "12", x2: "12", y2: "7.5" }),
+        /* @__PURE__ */ jsx("line", { "data-minute": true, x1: "12", y1: "12", x2: "12", y2: "5.5" })
+      ]
+    }
+  );
+}
+function Rolling({ text, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-grid overflow-hidden align-bottom", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "whitespace-nowrap",
+      initial: still ? { opacity: 0 } : { opacity: 0, y: "70%", filter: "blur(4px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { opacity: 0, y: "-70%", filter: "blur(4px)" },
+      transition: { duration: 0.32, ease: GLIDE },
+      children: text
+    },
+    text
+  ) }) });
+}
+function ToolButton({
+  label,
+  onClick,
+  children,
+  className,
+  still
+}) {
+  const [hover, setHover] = React.useState(false);
+  return /* @__PURE__ */ jsx(
+    motion.button,
+    {
+      type: "button",
+      "aria-label": label,
+      onClick,
+      onPointerEnter: () => setHover(true),
+      onPointerLeave: () => setHover(false),
+      onFocus: () => setHover(true),
+      onBlur: () => setHover(false),
+      whileTap: still ? void 0 : { scale: 0.9 },
+      className: cn(
+        "grid size-12 shrink-0 cursor-pointer place-items-center rounded-full bg-zinc-100 text-zinc-700 outline-none transition-colors hover:bg-zinc-200/80 hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/6 dark:text-zinc-300 dark:hover:bg-white/10 dark:hover:text-zinc-100",
+        className
+      ),
+      children: children(hover)
+    }
+  );
+}
+var ROWS = {
+  hidden: {},
+  shown: { transition: { staggerChildren: 0.06, delayChildren: 0.05 } }
+};
+var ROW = {
+  hidden: { opacity: 0, y: 12, filter: "blur(4px)" },
+  shown: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.45, ease: GLIDE }
+  }
+};
+var EventCard = React.forwardRef(
+  function EventCard2({
+    title = "Product demo",
+    start: startProp,
+    end: endProp,
+    guests: guestsProp,
+    about = DEFAULT_ABOUT,
+    locale = "en-US",
+    onEdit,
+    onDelete,
+    onInvite,
+    kind = "Video call",
+    cta = "Join call",
+    onJoin,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const card = React.useRef(null);
+    React.useImperativeHandle(ref, () => card.current);
+    const inView = useInView(card, { once: true, amount: 0.3 });
+    const show = still || inView;
+    const start = React.useMemo(() => startProp ?? defaultStart(), [startProp]);
+    const end = React.useMemo(
+      () => endProp ?? new Date(start.getTime() + 2 * 36e5),
+      [endProp, start]
+    );
+    const [added, setAdded] = React.useState([]);
+    const guests = [...guestsProp ?? DEFAULT_GUESTS, ...added];
+    const yes = guests.filter((g) => g.going !== false).length;
+    const [fanned, setFanned] = React.useState(false);
+    const [hoverGuest, setHoverGuest] = React.useState(null);
+    const [copied, setCopied] = React.useState(false);
+    const [confirming, setConfirming] = React.useState(false);
+    const [binHover, setBinHover] = React.useState(false);
+    const [deleted, setDeleted] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    const [status, setStatus] = React.useState("");
+    const date = start.toLocaleDateString(locale, {
+      weekday: "long",
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+    const t = (d) => d.toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" });
+    const time = `${t(start)} to ${t(end)}`;
+    const copy = async () => {
+      const text = `${title}
+${date}
+${time}`;
+      try {
+        await navigator.clipboard?.writeText(text);
+      } catch {
+      }
+      setCopied(true);
+      setStatus("Event details copied.");
+      window.setTimeout(() => setCopied(false), 1400);
+    };
+    React.useEffect(() => {
+      if (!confirming) return;
+      const id = window.setTimeout(() => setConfirming(false), 3e3);
+      return () => window.clearTimeout(id);
+    }, [confirming]);
+    const remove = () => {
+      if (!confirming) return setConfirming(true);
+      setConfirming(false);
+      setDeleted(true);
+      setStatus("Event deleted.");
+      onDelete?.();
+    };
+    const invite = () => {
+      if (onInvite) return onInvite();
+      const next = EXTRA_GUESTS[added.length % EXTRA_GUESTS.length];
+      setAdded((a) => [...a, { ...next }]);
+      setStatus(`${next.name} invited.`);
+    };
+    const STEP = fanned ? 34 : 24;
+    const month = start.toLocaleDateString(locale, { month: "short" });
+    const weekday = start.toLocaleDateString(locale, { weekday: "short" });
+    const arrow = "absolute inset-0 size-4 transition-transform duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: card,
+        className: cn(
+          "relative w-[360px] max-w-full overflow-hidden 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(
+            motion.div,
+            {
+              variants: still ? void 0 : ROWS,
+              initial: still ? false : "hidden",
+              animate: show ? "shown" : "hidden",
+              children: [
+                /* @__PURE__ */ jsxs(motion.div, { variants: still ? void 0 : ROW, children: [
+                  /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-xs font-medium text-zinc-500 dark:text-zinc-400", children: [
+                    /* @__PURE__ */ jsx(Video, { className: "size-3.5", strokeWidth: 2, "aria-hidden": true }),
+                    kind
+                  ] }),
+                  /* @__PURE__ */ jsx("h3", { className: "mt-1 text-lg font-semibold tracking-tight", children: title })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    variants: still ? void 0 : ROW,
+                    className: "mt-3 space-y-2 text-sm text-zinc-600 dark:text-zinc-300",
+                    children: [
+                      /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2.5", children: [
+                        /* @__PURE__ */ jsx(
+                          CalendarDaysIcon,
+                          {
+                            className: "size-[18px] text-zinc-400",
+                            strokeWidth: 1.75,
+                            "aria-hidden": true
+                          }
+                        ),
+                        date
+                      ] }),
+                      /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2.5", children: [
+                        /* @__PURE__ */ jsx("span", { className: "text-zinc-400", children: /* @__PURE__ */ jsx(SweepClock, { time: start, play: show, still }) }),
+                        time
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: deleted ? /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    initial: { opacity: 0, y: 8 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0 },
+                    transition: { duration: 0.35, ease: GLIDE },
+                    className: "mt-4 flex items-center justify-between rounded-full bg-zinc-100 py-2 pl-5 pr-2 text-sm dark:bg-white/6",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-zinc-500 dark:text-zinc-400", children: "This event was deleted." }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            setDeleted(false);
+                            setStatus("Event restored.");
+                          },
+                          className: "h-8 cursor-pointer rounded-full bg-white px-4 text-sm font-medium shadow-[0_1px_2px_rgba(0,0,0,0.06)] outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-zinc-800",
+                          children: "Undo"
+                        }
+                      )
+                    ]
+                  },
+                  "gone"
+                ) : /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    initial: false,
+                    exit: still ? { opacity: 0 } : { opacity: 0, y: -8, filter: "blur(6px)" },
+                    transition: { duration: 0.3, ease: GLIDE },
+                    children: [
+                      /* @__PURE__ */ jsxs(motion.div, { variants: still ? void 0 : ROW, className: "mt-5", children: [
+                        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+                          /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold", children: [
+                            /* @__PURE__ */ jsx(Rolling, { text: String(guests.length), still }),
+                            " ",
+                            "guests"
+                          ] }),
+                          /* @__PURE__ */ jsxs("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [
+                            /* @__PURE__ */ jsx(Rolling, { text: String(yes), still }),
+                            " going,",
+                            " ",
+                            /* @__PURE__ */ jsx(
+                              Rolling,
+                              {
+                                text: String(guests.length - yes),
+                                still
+                              }
+                            ),
+                            " ",
+                            "awaiting"
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2", children: [
+                          /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              className: "relative h-9",
+                              style: { width: (guests.length - 1) * STEP + 36 },
+                              onPointerEnter: () => setFanned(true),
+                              onPointerLeave: () => {
+                                setFanned(false);
+                                setHoverGuest(null);
+                              },
+                              children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: guests.map((g, i) => /* @__PURE__ */ jsxs(
+                                motion.span,
+                                {
+                                  className: "absolute left-0 top-0",
+                                  style: { zIndex: hoverGuest === i ? 50 : i },
+                                  initial: still ? { opacity: 0 } : { scale: 0, opacity: 0, x: i * STEP },
+                                  animate: {
+                                    x: i * STEP,
+                                    scale: hoverGuest === i ? 1.12 : 1,
+                                    opacity: 1,
+                                    y: hoverGuest === i ? -2 : 0
+                                  },
+                                  exit: { scale: 0, opacity: 0 },
+                                  transition: still ? { duration: 0 } : {
+                                    type: "spring",
+                                    stiffness: 420,
+                                    damping: 26
+                                  },
+                                  onPointerEnter: () => setHoverGuest(i),
+                                  children: [
+                                    /* @__PURE__ */ jsx(
+                                      "span",
+                                      {
+                                        className: cn(
+                                          "grid size-9 place-items-center overflow-hidden rounded-full text-xs font-semibold ring-2 ring-white dark:ring-zinc-900",
+                                          g.avatar ? "bg-zinc-200" : "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300"
+                                        ),
+                                        children: g.avatar ? /* @__PURE__ */ jsx(
+                                          "img",
+                                          {
+                                            src: g.avatar,
+                                            alt: g.name,
+                                            draggable: false,
+                                            className: "size-full object-cover"
+                                          }
+                                        ) : initials(g.name)
+                                      }
+                                    ),
+                                    g.going === false && /* @__PURE__ */ jsx("span", { className: "absolute -bottom-0.5 -right-0.5 size-3 rounded-full bg-amber-400 ring-2 ring-white dark:ring-zinc-900" }),
+                                    /* @__PURE__ */ jsx(AnimatePresence, { children: hoverGuest === i && /* @__PURE__ */ jsxs(
+                                      motion.span,
+                                      {
+                                        initial: { opacity: 0, y: -4 },
+                                        animate: { opacity: 1, y: 0 },
+                                        exit: { opacity: 0, y: -4 },
+                                        transition: { duration: 0.18 },
+                                        className: "pointer-events-none absolute left-1/2 top-full z-10 mt-2 -translate-x-1/2 whitespace-nowrap rounded-full bg-[#242423] px-2.5 py-1 text-xs text-white dark:bg-white dark:text-zinc-900",
+                                        children: [
+                                          g.name,
+                                          g.going === false ? ", awaiting" : ""
+                                        ]
+                                      }
+                                    ) })
+                                  ]
+                                },
+                                g.name
+                              )) })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            motion.button,
+                            {
+                              type: "button",
+                              "aria-label": "Invite a guest",
+                              onClick: invite,
+                              whileTap: still ? void 0 : { scale: 0.9 },
+                              className: "group grid size-9 shrink-0 cursor-pointer place-items-center rounded-full border border-dashed border-zinc-300 text-zinc-500 outline-none transition-colors hover:border-zinc-400 hover:bg-zinc-100 hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:border-white/20 dark:text-zinc-400 dark:hover:bg-white/8",
+                              children: /* @__PURE__ */ jsx(
+                                PlusIcon,
+                                {
+                                  className: "size-4 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:rotate-90",
+                                  strokeWidth: 2
+                                }
+                              )
+                            }
+                          )
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs(motion.div, { variants: still ? void 0 : ROW, className: "mt-5", children: [
+                        /* @__PURE__ */ jsxs(
+                          motion.div,
+                          {
+                            initial: false,
+                            animate: { height: open ? "auto" : 68 },
+                            transition: still ? { duration: 0 } : { duration: 0.45, ease: GLIDE },
+                            className: "relative overflow-hidden",
+                            children: [
+                              /* @__PURE__ */ jsx("div", { className: "space-y-3 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400", children: about.map((para, i) => /* @__PURE__ */ jsx("p", { children: para }, i)) }),
+                              /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  "aria-hidden": true,
+                                  initial: false,
+                                  animate: { opacity: open ? 0 : 1 },
+                                  transition: { duration: 0.3 },
+                                  className: "pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t from-white to-transparent dark:from-zinc-900"
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "button",
+                          {
+                            type: "button",
+                            "aria-expanded": open,
+                            onClick: () => setOpen((o) => !o),
+                            className: "mt-1 flex cursor-pointer items-center gap-1 rounded-full text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                Rolling,
+                                {
+                                  text: open ? "Show less" : "Show more",
+                                  still
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  animate: { rotate: open ? 180 : 0 },
+                                  transition: still ? { duration: 0 } : POP,
+                                  className: "grid",
+                                  children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", strokeWidth: 2 })
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        motion.div,
+                        {
+                          variants: still ? void 0 : ROW,
+                          className: "mt-5 flex items-center gap-2",
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              motion.button,
+                              {
+                                layout: true,
+                                type: "button",
+                                onClick: () => onJoin?.(),
+                                whileTap: still ? void 0 : { scale: 0.98 },
+                                transition: still ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 36 },
+                                style: { borderRadius: 999 },
+                                className: "group flex h-12 min-w-0 flex-1 cursor-pointer items-center justify-center gap-2 whitespace-nowrap bg-[#242423] px-5 text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-white dark:text-zinc-900 dark:focus-visible:ring-offset-zinc-900",
+                                children: [
+                                  cta,
+                                  /* @__PURE__ */ jsxs(
+                                    "span",
+                                    {
+                                      "aria-hidden": true,
+                                      className: "relative size-4 shrink-0 overflow-hidden",
+                                      children: [
+                                        /* @__PURE__ */ jsx(
+                                          ArrowRight,
+                                          {
+                                            className: cn(
+                                              arrow,
+                                              !still && "group-hover:translate-x-[140%]"
+                                            ),
+                                            strokeWidth: 2.25
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx(
+                                          ArrowRight,
+                                          {
+                                            className: cn(
+                                              arrow,
+                                              "-translate-x-[140%]",
+                                              !still && "group-hover:translate-x-0 group-hover:delay-75"
+                                            ),
+                                            strokeWidth: 2.25
+                                          }
+                                        )
+                                      ]
+                                    }
+                                  )
+                                ]
+                              }
+                            ),
+                            !confirming && /* @__PURE__ */ jsx(
+                              ToolButton,
+                              {
+                                label: copied ? "Copied" : "Copy event details",
+                                onClick: copy,
+                                still,
+                                children: (hover) => /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: copied ? /* @__PURE__ */ jsx(
+                                  motion.span,
+                                  {
+                                    className: "grid text-[#269a5a]",
+                                    initial: still ? { opacity: 0 } : { scale: 0.4, opacity: 0, rotate: -45 },
+                                    animate: { scale: 1, opacity: 1, rotate: 0 },
+                                    exit: { scale: 0.4, opacity: 0 },
+                                    transition: POP,
+                                    children: /* @__PURE__ */ jsx(
+                                      CheckIcon,
+                                      {
+                                        className: "size-[18px]",
+                                        strokeWidth: 2.25
+                                      }
+                                    )
+                                  },
+                                  "ok"
+                                ) : /* @__PURE__ */ jsx(
+                                  motion.span,
+                                  {
+                                    className: "grid",
+                                    initial: { scale: 0.4, opacity: 0 },
+                                    animate: { scale: 1, opacity: 1 },
+                                    exit: { scale: 0.4, opacity: 0 },
+                                    transition: POP,
+                                    children: /* @__PURE__ */ jsx(CopyIcon, { hover, still })
+                                  },
+                                  "copy"
+                                ) })
+                              }
+                            ),
+                            !confirming && /* @__PURE__ */ jsx(
+                              ToolButton,
+                              {
+                                label: "Edit event",
+                                onClick: () => onEdit?.(),
+                                still,
+                                children: (hover) => /* @__PURE__ */ jsx(PencilIcon, { hover, still })
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs(
+                              motion.button,
+                              {
+                                layout: true,
+                                type: "button",
+                                "aria-label": confirming ? "Confirm delete" : "Delete event",
+                                onClick: remove,
+                                whileTap: still ? void 0 : { scale: 0.92 },
+                                onPointerEnter: () => setBinHover(true),
+                                onPointerLeave: () => setBinHover(false),
+                                transition: still ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 34 },
+                                style: { borderRadius: 999 },
+                                animate: {
+                                  backgroundColor: confirming ? DANGER : binHover ? "rgba(120,120,120,0.18)" : "rgba(120,120,120,0.1)"
+                                },
+                                className: cn(
+                                  "flex h-12 shrink-0 cursor-pointer items-center justify-center gap-1.5 overflow-hidden text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                                  confirming ? "px-5 text-white" : "w-12 text-zinc-700 dark:text-zinc-300"
+                                ),
+                                children: [
+                                  /* @__PURE__ */ jsx(motion.span, { layout: true, className: "grid", children: /* @__PURE__ */ jsx(TrashIcon, { hover: binHover || confirming, still }) }),
+                                  /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: confirming && /* @__PURE__ */ jsx(
+                                    motion.span,
+                                    {
+                                      layout: true,
+                                      initial: { opacity: 0, filter: "blur(4px)" },
+                                      animate: { opacity: 1, filter: "blur(0px)" },
+                                      exit: { opacity: 0 },
+                                      transition: { duration: 0.2 },
+                                      children: "Delete"
+                                    }
+                                  ) })
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  },
+                  "body"
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: status })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  EventCard
+};