motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-3B2RYSTL.js

@@ -0,0 +1,867 @@
+"use client";
+import {
+  SparklesIcon
+} from "./chunk-YGONLKWH.js";
+import {
+  PlusIcon
+} from "./chunk-HK34LPY6.js";
+import {
+  RotateCCWIcon
+} from "./chunk-YURGXJSP.js";
+import {
+  CheckIcon
+} from "./chunk-JHT6RCGY.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/calendar-agenda/calendar-agenda.tsx
+import * as React from "react";
+import {
+  animate,
+  AnimatePresence,
+  motion as motion2,
+  useMotionValue,
+  useReducedMotion as useReducedMotion2,
+  useTransform
+} from "motion/react";
+import { Trash2 } from "lucide-react";
+
+// src/icons/calendar-check-2.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CHECK_VARIANTS = {
+  normal: {
+    pathLength: 1,
+    opacity: 1,
+    transition: {
+      duration: 0.3
+    }
+  },
+  animate: {
+    pathLength: [0, 1],
+    opacity: [0, 1],
+    transition: {
+      pathLength: { duration: 0.4, ease: "easeInOut" },
+      opacity: { duration: 0.4, ease: "easeInOut" }
+    }
+  }
+};
+var CalendarCheck2Icon = forwardRef(({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: () => controls.start("animate"),
+      stopAnimation: () => controls.start("normal")
+    };
+  });
+  const handleMouseEnter = useCallback(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        controls.start("animate");
+      }
+    },
+    [controls, onMouseEnter]
+  );
+  const handleMouseLeave = useCallback(
+    (e) => {
+      if (isControlledRef.current) {
+        onMouseLeave?.(e);
+      } else {
+        controls.start("normal");
+      }
+    },
+    [controls, onMouseLeave]
+  );
+  const wrap = useRef(null);
+  const reduced = useReducedMotion();
+  const [hosted, setHosted] = useState(false);
+  useEffect(() => {
+    const fake = {};
+    if (reduced) {
+      setHosted(true);
+      return;
+    }
+    if (active !== void 0) {
+      setHosted(true);
+      (active ? handleMouseEnter : handleMouseLeave)(fake);
+      return;
+    }
+    const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+    setHosted(!!host);
+    if (!host) return;
+    const on = () => handleMouseEnter(fake);
+    const off = () => handleMouseLeave(fake);
+    host.addEventListener("pointerenter", on);
+    host.addEventListener("pointerleave", off);
+    return () => {
+      host.removeEventListener("pointerenter", on);
+      host.removeEventListener("pointerleave", off);
+    };
+  }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: wrap,
+      className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+      style: size ? { width: size, height: size, ...style } : style,
+      onMouseEnter: hosted ? void 0 : handleMouseEnter,
+      onMouseLeave: hosted ? void 0 : handleMouseLeave,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          fill: "none",
+          height: size,
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: strokeWidth ?? 2,
+          viewBox: "0 0 24 24",
+          width: size,
+          xmlns: "http://www.w3.org/2000/svg",
+          children: [
+            /* @__PURE__ */ jsx("path", { d: "M8 2v4" }),
+            /* @__PURE__ */ jsx("path", { d: "M16 2v4" }),
+            /* @__PURE__ */ jsx("path", { d: "M21 14V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8" }),
+            /* @__PURE__ */ jsx("path", { d: "M3 10h18" }),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "m16 20 2 2 4-4",
+                initial: "normal",
+                style: { transformOrigin: "center" },
+                variants: CHECK_VARIANTS
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+CalendarCheck2Icon.displayName = "CalendarCheck2Icon";
+
+// src/components/calendar-agenda/calendar-agenda.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var CONFETTI = [
+  "#3d66d6",
+  "#d6498f",
+  "#269a5a",
+  "#9150e0",
+  "#cf7a1c",
+  "#f5c542",
+  "#2a9fbf"
+];
+var OPEN = 104;
+var ev = (id, time, title, rest = {}) => ({ id, time, title, ...rest });
+var DEFAULT_DAYS = [
+  {
+    label: "Mon",
+    date: 10,
+    title: "Monday",
+    subtitle: "10 November",
+    events: [
+      ev("m1", "09:30", "Weekly planning", {
+        length: "45m",
+        meta: "Product team",
+        color: "#3d66d6"
+      }),
+      ev("m2", "14:00", "Dentist", {
+        length: "1h",
+        meta: "Harbour Street",
+        color: "#cf7a1c"
+      })
+    ]
+  },
+  {
+    label: "Tue",
+    date: 11,
+    title: "Today",
+    subtitle: "Tuesday, 11 November",
+    events: [
+      ev("t1", "10:00", "Design review", {
+        length: "1h",
+        meta: "4 people \xB7 Zoom",
+        color: "#d6498f",
+        tag: "in 19 min"
+      }),
+      ev("t2", "12:30", "Lunch with team", {
+        length: "1h",
+        meta: "Studio kitchen",
+        color: "#f5c542"
+      }),
+      ev("t3", "16:00", "30 min walk", {
+        length: "30m",
+        meta: "From the office",
+        color: "#242423"
+      }),
+      ev("t4", "17:00", "Free", {
+        meta: "Nothing booked until tomorrow",
+        free: true
+      })
+    ]
+  },
+  {
+    label: "Wed",
+    date: 12,
+    title: "Wednesday",
+    subtitle: "12 November",
+    events: [
+      ev("w1", "11:00", "Ship the release notes", {
+        length: "2h",
+        meta: "Deep work",
+        color: "#9150e0"
+      })
+    ]
+  },
+  {
+    label: "Thu",
+    date: 13,
+    title: "Thursday",
+    subtitle: "13 November",
+    events: [
+      ev("h1", "08:00", "Gym", {
+        length: "1h",
+        meta: "Before work",
+        color: "#269a5a"
+      }),
+      ev("h2", "15:30", "1:1 with Maya", {
+        length: "30m",
+        meta: "Coffee corner",
+        color: "#2a9fbf"
+      })
+    ]
+  },
+  {
+    label: "Fri",
+    date: 14,
+    title: "Friday",
+    subtitle: "14 November",
+    events: [
+      ev("f1", "16:30", "Demo day", {
+        length: "1h",
+        meta: "Whole company",
+        color: "#d6498f"
+      })
+    ]
+  },
+  {
+    label: "Sat",
+    date: 15,
+    title: "Saturday",
+    subtitle: "15 November",
+    events: []
+  },
+  {
+    label: "Sun",
+    date: 16,
+    title: "Sunday",
+    subtitle: "16 November",
+    events: []
+  }
+];
+function fit(c) {
+  const dpr = Math.min(2, window.devicePixelRatio || 1);
+  const w = Math.round(c.clientWidth * dpr);
+  const h = Math.round(c.clientHeight * dpr);
+  if (c.width !== w || c.height !== h) {
+    c.width = w;
+    c.height = h;
+  }
+}
+function useConfetti(enabled) {
+  const canvas = React.useRef(null);
+  const bits = React.useRef([]);
+  const raf = React.useRef(0);
+  const loop = React.useCallback(() => {
+    const c = canvas.current;
+    if (!c) return;
+    const ctx = c.getContext("2d");
+    let last = performance.now();
+    const frame = (now) => {
+      const dt = Math.min(0.05, (now - last) / 1e3);
+      last = now;
+      fit(c);
+      const dpr = c.width / Math.max(1, c.clientWidth);
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.clearRect(0, 0, c.width, c.height);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      bits.current = bits.current.filter((b) => (b.age += dt) < b.life);
+      for (const b of bits.current) {
+        b.vy += 1500 * dt;
+        b.vx *= 1 - 1.6 * dt;
+        b.vy *= 1 - 0.9 * dt;
+        b.x += b.vx * dt;
+        b.y += b.vy * dt;
+        b.r += b.vr * dt;
+        ctx.save();
+        ctx.globalAlpha = Math.min(1, (b.life - b.age) / (b.life * 0.35));
+        ctx.translate(b.x, b.y);
+        ctx.rotate(b.r);
+        ctx.fillStyle = b.color;
+        if (b.shape === 0)
+          ctx.fillRect(-b.size, -b.size / 2.4, b.size * 2, b.size / 1.2);
+        else if (b.shape === 1) {
+          ctx.beginPath();
+          ctx.arc(0, 0, b.size / 1.6, 0, Math.PI * 2);
+          ctx.fill();
+        } else {
+          const s = b.size * 1.1;
+          ctx.beginPath();
+          ctx.moveTo(0, -s);
+          ctx.quadraticCurveTo(0, 0, s, 0);
+          ctx.quadraticCurveTo(0, 0, 0, s);
+          ctx.quadraticCurveTo(0, 0, -s, 0);
+          ctx.quadraticCurveTo(0, 0, 0, -s);
+          ctx.fill();
+        }
+        ctx.restore();
+      }
+      if (bits.current.length) raf.current = requestAnimationFrame(frame);
+      else {
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.clearRect(0, 0, c.width, c.height);
+      }
+    };
+    cancelAnimationFrame(raf.current);
+    raf.current = requestAnimationFrame(frame);
+  }, []);
+  React.useEffect(() => () => cancelAnimationFrame(raf.current), []);
+  const burst = React.useCallback(
+    (area, accent, amount = 34) => {
+      const c = canvas.current;
+      if (!enabled || !c) return;
+      fit(c);
+      const rect = c.getBoundingClientRect();
+      const left = area.left - rect.left;
+      const y = area.top - rect.top + area.height / 2;
+      const colors = accent ? [accent, accent, ...CONFETTI] : CONFETTI;
+      for (let i = 0; i < amount; i++) {
+        bits.current.push({
+          x: left + 12 + Math.random() * Math.max(0, area.width - 24),
+          y: y + (Math.random() - 0.5) * area.height * 0.5,
+          vx: (Math.random() - 0.5) * 120,
+          vy: -(820 + Math.random() * 360),
+          r: Math.random() * Math.PI,
+          vr: (Math.random() - 0.5) * 12,
+          size: 2.5 + Math.random() * 3,
+          color: colors[Math.floor(Math.random() * colors.length)],
+          shape: i % 7 === 0 ? 2 : i % 3 === 0 ? 1 : 0,
+          age: 0,
+          life: 1.5 + Math.random() * 0.5
+        });
+      }
+      loop();
+    },
+    [enabled, loop]
+  );
+  return { canvas, burst };
+}
+function Row({ event, open, onOpen, onToggle, onDelete, still }) {
+  const x = useMotionValue(0);
+  const root = React.useRef(null);
+  const color = event.color ?? "#242423";
+  const done = !!event.done;
+  const lift = useTransform(x, (v) => {
+    const a = Math.min(1, Math.abs(v) / 40);
+    return `0 1px 2px rgba(0,0,0,${(0.06 * a).toFixed(3)}), 0 8px 20px -10px rgba(0,0,0,${(0.25 * a).toFixed(3)})`;
+  });
+  const doneOpacity = useTransform(x, [-8, -40], [0, 1]);
+  const deleteOpacity = useTransform(x, [8, 40], [0, 1]);
+  const doneLabel = useTransform(x, [-70, -100], [0, 1]);
+  const deleteLabel = useTransform(x, [70, 100], [0, 1]);
+  const spring = still ? { duration: 0 } : { type: "spring", stiffness: 520, damping: 40 };
+  const passing = React.useRef(false);
+  const [hideActions, setHideActions] = React.useState(false);
+  React.useEffect(() => {
+    if (passing.current) return;
+    animate(x, open === "done" ? -OPEN : open === "delete" ? OPEN : 0, spring);
+  }, [open, x, still]);
+  const markDone = async (releaseSpeed = 0) => {
+    if (done || still) {
+      onOpen(null);
+      onToggle(root.current);
+      animate(x, 0, spring);
+      return;
+    }
+    const width = root.current?.offsetWidth ?? 400;
+    passing.current = true;
+    setHideActions(true);
+    const distance = Math.abs(-(width + 24) - x.get());
+    const speed = Math.max(1400, Math.abs(releaseSpeed));
+    await animate(x, -(width + 24), {
+      duration: distance / speed,
+      ease: "linear"
+    });
+    x.jump(width + 24);
+    onToggle(root.current);
+    onOpen(null);
+    await animate(x, 0, { type: "spring", stiffness: 320, damping: 32 });
+    passing.current = false;
+    setHideActions(false);
+  };
+  const onDragEnd = (_, info) => {
+    const base = open === "done" ? -OPEN : open === "delete" ? OPEN : 0;
+    const dx = info.offset.x + base;
+    if (dx < -200 || info.velocity.x < -900) markDone(info.velocity.x);
+    else if (dx > 200 || info.velocity.x > 900)
+      animate(x, 480, { duration: 0.22, ease: "easeIn" }).then(onDelete);
+    else if (dx < -56) onOpen("done");
+    else if (dx > 56) onOpen("delete");
+    else {
+      onOpen(null);
+      animate(x, 0, spring);
+    }
+  };
+  if (event.free)
+    return /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3 rounded-xl border border-dashed border-zinc-300 px-3.5 py-3 text-zinc-400 dark:border-zinc-700 dark:text-zinc-500", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-[14px] font-medium tabular-nums", children: event.time }),
+      /* @__PURE__ */ jsxs2("span", { className: "truncate text-[12px]", children: [
+        event.title,
+        event.meta ? ` \xB7 ${event.meta}` : ""
+      ] })
+    ] });
+  return /* @__PURE__ */ jsxs2("div", { ref: root, className: "relative overflow-hidden rounded-xl", children: [
+    /* @__PURE__ */ jsx2(
+      motion2.div,
+      {
+        style: { opacity: hideActions ? 0 : deleteOpacity },
+        className: "absolute inset-0 flex rounded-xl bg-[#e5484d]",
+        children: /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            tabIndex: open === "delete" ? 0 : -1,
+            onClick: () => animate(x, 480, { duration: 0.22, ease: "easeIn" }).then(onDelete),
+            className: "flex w-[104px] shrink-0 cursor-pointer items-center gap-2 pl-5 text-[14px] font-semibold text-white outline-none focus-visible:underline",
+            children: [
+              /* @__PURE__ */ jsx2(Trash2, { className: "size-4 shrink-0", strokeWidth: 2.25 }),
+              /* @__PURE__ */ jsx2(motion2.span, { style: { opacity: deleteLabel }, children: "Delete" })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      motion2.div,
+      {
+        style: { opacity: hideActions ? 0 : doneOpacity },
+        className: cn(
+          "absolute inset-0 flex justify-end rounded-xl",
+          done ? "bg-zinc-500" : "bg-[#269a5a]"
+        ),
+        children: /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            tabIndex: open === "done" ? 0 : -1,
+            onClick: () => markDone(),
+            className: "flex w-[104px] shrink-0 cursor-pointer items-center justify-end gap-2 pr-5 text-[14px] font-semibold text-white outline-none focus-visible:underline",
+            children: [
+              /* @__PURE__ */ jsx2(motion2.span, { style: { opacity: doneLabel }, children: done ? "Undo" : "Done" }),
+              done ? /* @__PURE__ */ jsx2(RotateCCWIcon, { className: "size-4 shrink-0", strokeWidth: 2.25 }) : /* @__PURE__ */ jsx2(CheckIcon, { className: "size-4 shrink-0", strokeWidth: 2.5 })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      motion2.div,
+      {
+        drag: still ? false : "x",
+        dragDirectionLock: true,
+        dragConstraints: { left: -OPEN, right: OPEN },
+        dragElastic: 0.5,
+        dragMomentum: false,
+        onDragEnd,
+        style: { x, boxShadow: lift },
+        className: cn(
+          // A solid white mini card on the soft block, so nothing behind it ever shows through.
+          "relative flex touch-pan-y items-center gap-3 rounded-xl bg-white px-3.5 py-3 shadow-[0_1px_2px_rgba(0,0,0,0.04)] dark:bg-zinc-900",
+          !still && "cursor-grab active:cursor-grabbing"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2("div", { className: "w-11 shrink-0", children: [
+            /* @__PURE__ */ jsx2(
+              "p",
+              {
+                className: cn(
+                  "text-[14px] font-medium tabular-nums transition-colors",
+                  done ? "text-zinc-400" : "text-zinc-900 dark:text-zinc-100"
+                ),
+                children: event.time
+              }
+            ),
+            /* @__PURE__ */ jsx2("p", { className: "text-[12px] text-zinc-400", children: event.length ?? "" })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsxs2("p", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx2(
+                motion2.span,
+                {
+                  "aria-hidden": true,
+                  className: "size-2 shrink-0 rounded-full",
+                  initial: false,
+                  animate: { backgroundColor: done ? "#d4d4d8" : color },
+                  transition: { duration: 0.3 }
+                }
+              ),
+              /* @__PURE__ */ jsxs2(
+                "span",
+                {
+                  className: cn(
+                    "relative truncate text-[14px] font-medium transition-colors duration-300",
+                    done ? "text-zinc-400" : "text-zinc-900 dark:text-zinc-100"
+                  ),
+                  children: [
+                    event.title,
+                    /* @__PURE__ */ jsx2(
+                      motion2.span,
+                      {
+                        "aria-hidden": true,
+                        className: "absolute inset-x-0 top-1/2 h-[1.5px] origin-left rounded-full bg-zinc-400",
+                        initial: false,
+                        animate: { scaleX: done ? 1 : 0 },
+                        transition: {
+                          duration: still ? 0 : 0.45,
+                          ease: GLIDE,
+                          delay: done && !still ? 0.18 : 0
+                        }
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }),
+            event.meta && /* @__PURE__ */ jsx2("p", { className: "truncate pl-3.5 text-[12px] text-zinc-500 dark:text-zinc-400", children: event.meta })
+          ] }),
+          event.tag && !done && /* @__PURE__ */ jsxs2("span", { className: "inline-flex shrink-0 items-center gap-1.5 rounded-full bg-[#242423]/6 px-2.5 py-1 text-[12px] font-medium text-zinc-700 dark:bg-white/8 dark:text-zinc-200", children: [
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: "size-1.5 rounded-full",
+                style: { background: color }
+              }
+            ),
+            event.tag
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function EmptyDay({
+  day,
+  onAdd,
+  still
+}) {
+  const name = day.title === "Today" ? "day" : day.title;
+  const rise = (delay) => ({
+    initial: still ? { opacity: 0 } : { opacity: 0, y: 8, filter: "blur(4px)" },
+    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+    transition: { duration: 0.4, ease: GLIDE, delay: still ? 0 : delay }
+  });
+  return /* @__PURE__ */ jsxs2("li", { className: "flex flex-col items-center px-4 pb-6 pt-7 text-center", children: [
+    /* @__PURE__ */ jsxs2(
+      motion2.span,
+      {
+        initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.6 },
+        animate: { opacity: 1, scale: 1 },
+        transition: still ? { duration: 0.2 } : { type: "spring", stiffness: 420, damping: 18 },
+        className: "relative",
+        children: [
+          /* @__PURE__ */ jsx2(
+            motion2.span,
+            {
+              animate: still ? void 0 : { y: [0, -3, 0] },
+              transition: { duration: 2.6, repeat: Infinity, ease: "easeInOut" },
+              className: "grid size-12 place-items-center rounded-2xl bg-white text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_16px_-8px_rgba(0,0,0,0.2)] dark:bg-zinc-800 dark:text-zinc-100",
+              children: /* @__PURE__ */ jsx2(CalendarCheck2Icon, { className: "size-5", strokeWidth: 2 })
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            motion2.span,
+            {
+              initial: still ? false : { opacity: 0, scale: 0, rotate: -45 },
+              animate: still ? { opacity: 1 } : { opacity: 1, scale: 1, rotate: [0, 12, 0] },
+              transition: still ? { duration: 0.2 } : {
+                opacity: { delay: 0.25 },
+                scale: {
+                  delay: 0.25,
+                  type: "spring",
+                  stiffness: 500,
+                  damping: 14
+                },
+                rotate: {
+                  delay: 0.6,
+                  duration: 3,
+                  repeat: Infinity,
+                  ease: "easeInOut"
+                }
+              },
+              className: "absolute -right-2 -top-2 grid size-6 place-items-center rounded-full bg-[#f5c542] text-[#3b2f00] ring-2 ring-[#f6f6f5] dark:ring-zinc-900",
+              children: /* @__PURE__ */ jsx2(SparklesIcon, { className: "size-3", strokeWidth: 2.5 })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      motion2.p,
+      {
+        ...rise(0.12),
+        className: "mt-4 text-[14px] font-medium text-zinc-900 dark:text-zinc-100",
+        children: [
+          "Your ",
+          name,
+          " is clear"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      motion2.p,
+      {
+        ...rise(0.18),
+        className: "mt-1 max-w-[240px] text-[12px] leading-relaxed text-zinc-500 dark:text-zinc-400",
+        children: "Nothing planned yet. Add something, or keep the time for yourself."
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      motion2.button,
+      {
+        ...rise(0.24),
+        type: "button",
+        onClick: onAdd,
+        whileTap: still ? void 0 : { scale: 0.95 },
+        className: "group mt-4 inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-full bg-[#242423] px-3.5 text-[12px] 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",
+        children: [
+          /* @__PURE__ */ jsx2(
+            PlusIcon,
+            {
+              className: "size-3.5 transition-transform duration-300 group-hover:rotate-90",
+              strokeWidth: 2.5
+            }
+          ),
+          "Add event"
+        ]
+      }
+    )
+  ] });
+}
+var CalendarAgenda = React.forwardRef(function CalendarAgenda2({
+  days = DEFAULT_DAYS,
+  defaultDay = 1,
+  confetti = true,
+  onToggle,
+  onDelete,
+  onAdd,
+  className
+}, ref) {
+  const still = !!useReducedMotion2();
+  const uid = React.useId();
+  const [week, setWeek] = React.useState(days);
+  const [dayIndex, setDayIndex] = React.useState(
+    Math.min(defaultDay, days.length - 1)
+  );
+  const [opened, setOpened] = React.useState(
+    null
+  );
+  const [announce, setAnnounce] = React.useState("");
+  const { canvas, burst } = useConfetti(confetti && !still);
+  const day = week[dayIndex];
+  const left = day.events.filter((e) => !e.free && !e.done).length;
+  const update = (fn) => setWeek(
+    (w) => w.map((d, i) => i === dayIndex ? { ...d, events: fn(d.events) } : d)
+  );
+  const toggle = (event, row) => {
+    const done = !event.done;
+    update(
+      (events) => events.map((e) => e.id === event.id ? { ...e, done } : e)
+    );
+    setOpened(null);
+    onToggle?.(event, done);
+    setAnnounce(`${event.title} ${done ? "done" : "reopened"}`);
+    if (done && row) {
+      burst(row.getBoundingClientRect(), event.color);
+      const list = row.closest("ul")?.getBoundingClientRect();
+      if (left === 1 && list)
+        window.setTimeout(() => burst(list, void 0, 40), 220);
+    }
+  };
+  const remove = (event) => {
+    update((events) => events.filter((e) => e.id !== event.id));
+    setOpened(null);
+    onDelete?.(event);
+    setAnnounce(`${event.title} deleted`);
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      className: cn(
+        "relative w-[400px] max-w-full rounded-3xl bg-white px-4 pb-4 pt-5 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__ */ jsx2("span", { className: "sr-only", "aria-live": "polite", children: announce }),
+        /* @__PURE__ */ jsxs2("header", { className: "flex items-start justify-between gap-4 px-2", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx2(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx2(
+              motion2.h3,
+              {
+                initial: still ? { opacity: 0 } : { opacity: 0, y: 8, filter: "blur(4px)" },
+                animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                exit: still ? { opacity: 0 } : { opacity: 0, y: -6, filter: "blur(4px)" },
+                transition: { duration: 0.35, ease: GLIDE },
+                className: "text-lg font-semibold tracking-tight",
+                children: day.title
+              },
+              day.title
+            ) }),
+            /* @__PURE__ */ jsxs2("p", { className: "mt-0.5 text-sm text-zinc-500 dark:text-zinc-400", children: [
+              day.subtitle ? `${day.subtitle} \xB7 ` : "",
+              left ? `${left} left` : "All clear"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx2(
+            motion2.button,
+            {
+              type: "button",
+              "aria-label": "Add event",
+              onClick: onAdd,
+              whileTap: still ? void 0 : { scale: 0.9 },
+              className: "group grid size-9 shrink-0 cursor-pointer place-items-center rounded-full bg-[#242423]/6 text-[#242423] outline-none transition-colors hover:bg-[#242423]/10 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/8 dark:text-zinc-100",
+              children: /* @__PURE__ */ jsx2(
+                PlusIcon,
+                {
+                  className: "size-4 transition-transform duration-300 group-hover:rotate-90",
+                  strokeWidth: 2.5
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            role: "tablist",
+            "aria-label": "Day",
+            className: "mt-4 grid grid-cols-7 gap-1 rounded-2xl bg-[#242423]/[0.035] p-1 dark:bg-white/5",
+            children: week.map((d, i) => {
+              const on = i === dayIndex;
+              const busy = d.events.some((e) => !e.free && !e.done);
+              return /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": on,
+                  "aria-label": `${d.title}, ${d.date}`,
+                  onClick: () => {
+                    setDayIndex(i);
+                    setOpened(null);
+                  },
+                  className: cn(
+                    "relative flex h-14 cursor-pointer flex-col items-center justify-center rounded-xl outline-none transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400",
+                    on ? "text-white dark:text-zinc-900" : "text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100"
+                  ),
+                  children: [
+                    on && /* @__PURE__ */ jsx2(
+                      motion2.span,
+                      {
+                        layoutId: `${uid}-day`,
+                        transition: still ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 34 },
+                        className: "absolute inset-0 rounded-xl bg-[#242423] dark:bg-white"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx2("span", { className: "relative text-[12px]", children: d.label }),
+                    /* @__PURE__ */ jsx2("span", { className: "relative text-[16px] font-semibold tabular-nums", children: d.date }),
+                    /* @__PURE__ */ jsx2(
+                      "span",
+                      {
+                        className: cn(
+                          "relative mt-0.5 size-1 rounded-full transition-opacity",
+                          on ? "bg-current" : "bg-zinc-400",
+                          busy ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    )
+                  ]
+                },
+                d.label
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx2(AnimatePresence, { mode: "wait", initial: false, children: /* @__PURE__ */ jsxs2(
+          motion2.ul,
+          {
+            initial: still ? { opacity: 0 } : { opacity: 0, y: 8, filter: "blur(6px)" },
+            animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+            exit: still ? { opacity: 0 } : { opacity: 0, y: -6, filter: "blur(4px)" },
+            transition: { duration: 0.3, ease: GLIDE },
+            className: "mt-3 flex flex-col gap-1.5 rounded-[22px] bg-[#242423]/[0.035] p-1.5 dark:bg-white/5",
+            "aria-label": `${day.title} events`,
+            children: [
+              /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: day.events.map((e) => /* @__PURE__ */ jsx2(
+                motion2.li,
+                {
+                  layout: !still,
+                  exit: still ? { opacity: 0 } : { opacity: 0, height: 0, marginTop: -4 },
+                  transition: { duration: 0.3, ease: GLIDE },
+                  tabIndex: e.free ? -1 : 0,
+                  onKeyDown: (k) => {
+                    if (e.free || k.target !== k.currentTarget) return;
+                    if (k.key === "Enter" || k.key === " ") {
+                      k.preventDefault();
+                      toggle(e, k.currentTarget);
+                    }
+                    if (k.key === "Delete" || k.key === "Backspace") {
+                      k.preventDefault();
+                      remove(e);
+                    }
+                  },
+                  className: "rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                  children: /* @__PURE__ */ jsx2(
+                    Row,
+                    {
+                      event: e,
+                      open: opened?.id === e.id ? opened.side : null,
+                      onOpen: (side) => setOpened(side ? { id: e.id, side } : null),
+                      onToggle: (row) => toggle(e, row),
+                      onDelete: () => remove(e),
+                      still
+                    }
+                  )
+                },
+                e.id
+              )) }),
+              !day.events.some((e) => !e.free) && /* @__PURE__ */ jsx2(EmptyDay, { day, onAdd, still })
+            ]
+          },
+          dayIndex
+        ) }),
+        /* @__PURE__ */ jsx2(
+          "canvas",
+          {
+            ref: canvas,
+            "aria-hidden": true,
+            className: "pointer-events-none absolute -left-4 -top-60 z-20 h-[calc(100%+264px)] w-[calc(100%+32px)]"
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  CalendarAgenda
+};