motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-Y6MTC46Q.js

@@ -0,0 +1,684 @@
+"use client";
+import {
+  BellIcon
+} from "./chunk-7PS2W7PU.js";
+import {
+  XIcon
+} from "./chunk-7FQ4XU7E.js";
+import {
+  DeleteIcon
+} from "./chunk-JFTD3YAL.js";
+import {
+  BadgeAlertIcon
+} from "./chunk-UD5OQ2T3.js";
+import {
+  CircleCheckIcon
+} from "./chunk-YU6B7YRO.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/toast-stack/toast-stack.tsx
+import * as React from "react";
+import {
+  animate,
+  AnimatePresence,
+  motion as motion2,
+  useMotionValue,
+  useReducedMotion as useReducedMotion2,
+  useTransform
+} from "motion/react";
+
+// src/icons/undo.tsx
+import { cubicBezier, motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CUSTOM_EASING = cubicBezier(0.25, 0.1, 0.25, 1);
+var UndoIcon = 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(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M3 7v6h6",
+                  transition: {
+                    duration: 0.6,
+                    ease: CUSTOM_EASING
+                  },
+                  variants: {
+                    normal: { translateX: 0, translateY: 0, rotate: 0 },
+                    animate: {
+                      translateX: [0, 2.1, 0],
+                      translateY: [0, -1.4, 0],
+                      rotate: [0, 12, 0]
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13",
+                  transition: {
+                    duration: 0.6,
+                    ease: CUSTOM_EASING
+                  },
+                  variants: {
+                    normal: { pathLength: 1 },
+                    animate: { pathLength: [1, 0.8, 1] }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+UndoIcon.displayName = "UndoIcon";
+
+// src/components/toast-stack/toast-stack.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 34,
+  mass: 0.9
+};
+var POP = { type: "spring", stiffness: 520, damping: 30 };
+var PEEK = 12;
+var GAP = 10;
+var MAX = 6;
+var SWIPE = 90;
+var KINDS = {
+  success: { color: "#269a5a", label: "Success", Icon: CircleCheckIcon },
+  warning: { color: "#c27a06", label: "Warning", Icon: BadgeAlertIcon },
+  error: { color: "#d23f3f", label: "Delete", Icon: DeleteIcon },
+  info: { color: "#242423", label: "Info", Icon: BellIcon }
+};
+var SAMPLES = {
+  success: [
+    {
+      kind: "success",
+      title: "Changes saved",
+      description: "Your workspace settings are live."
+    },
+    {
+      kind: "success",
+      title: "Invite sent",
+      description: "Priya will get an email in a moment."
+    }
+  ],
+  warning: [
+    {
+      kind: "warning",
+      title: "Storage almost full",
+      description: "You have used 92% of your plan."
+    },
+    {
+      kind: "warning",
+      title: "Card expires soon",
+      description: "Update your billing details by Friday."
+    }
+  ],
+  error: [
+    {
+      kind: "error",
+      title: "Project deleted",
+      description: "Moved to trash with 14 files.",
+      action: { label: "Undo" }
+    },
+    {
+      kind: "error",
+      title: "Member removed",
+      description: "Leo no longer has access.",
+      action: { label: "Undo" }
+    }
+  ],
+  info: [
+    {
+      kind: "info",
+      title: "New comment",
+      description: "Maya replied on Homepage redesign."
+    },
+    {
+      kind: "info",
+      title: "Deploy started",
+      description: "Building main, about a minute left."
+    }
+  ]
+};
+var DEFAULT_INITIAL = [
+  {
+    kind: "info",
+    title: "New comment",
+    description: "Maya replied on Homepage redesign.",
+    duration: 0
+  },
+  {
+    kind: "warning",
+    title: "Storage almost full",
+    description: "You have used 92% of your plan.",
+    duration: 0
+  },
+  {
+    kind: "success",
+    title: "Changes saved",
+    description: "Your workspace settings are live.",
+    duration: 0
+  }
+];
+function Toast({
+  toast,
+  index,
+  count,
+  open,
+  visible,
+  y,
+  height,
+  frontHeight,
+  still,
+  paused,
+  onMeasure,
+  onDismiss,
+  onDrag
+}) {
+  const inner = React.useRef(null);
+  const kind = KINDS[toast.kind];
+  const front = index === 0;
+  const shown = open || index < visible;
+  const folded = !open && !front;
+  const x = useMotionValue(0);
+  const rotate = useTransform(x, [-220, 220], [-7, 7]);
+  const fade = useTransform(
+    x,
+    [-240, -SWIPE, 0, SWIPE, 240],
+    [0, 0.65, 1, 0.65, 0]
+  );
+  const left = useMotionValue(1);
+  const [gone, setGone] = React.useState(false);
+  const [play, setPlay] = React.useState(true);
+  React.useLayoutEffect(() => {
+    const el = inner.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => onMeasure(toast.id, el.offsetHeight));
+    ro.observe(el);
+    onMeasure(toast.id, el.offsetHeight);
+    return () => ro.disconnect();
+  }, [toast.id, onMeasure]);
+  React.useEffect(() => {
+    const t = window.setTimeout(() => setPlay(false), 1100);
+    return () => window.clearTimeout(t);
+  }, []);
+  React.useEffect(() => {
+    if (!toast.duration || paused || gone) return;
+    let last = performance.now();
+    let raf = 0;
+    const step = (now) => {
+      const next = left.get() - (now - last) / toast.duration;
+      last = now;
+      if (next <= 0) {
+        left.set(0);
+        onDismiss(toast.id);
+        return;
+      }
+      left.set(next);
+      raf = requestAnimationFrame(step);
+    };
+    raf = requestAnimationFrame(step);
+    return () => cancelAnimationFrame(raf);
+  }, [toast.duration, toast.id, paused, gone, left, onDismiss]);
+  React.useEffect(() => {
+    if (gone) onDismiss(toast.id);
+  }, [gone, toast.id, onDismiss]);
+  const fling = (dir) => {
+    void animate(
+      x,
+      dir * 460,
+      still ? { duration: 0 } : { type: "spring", stiffness: 260, damping: 30, velocity: dir * 900 }
+    ).then(() => setGone(true));
+  };
+  return /* @__PURE__ */ jsx2(
+    motion2.li,
+    {
+      layout: false,
+      initial: still ? { opacity: 0 } : { opacity: 0, y: y + 48, scale: 0.9, filter: "blur(6px)" },
+      animate: {
+        opacity: shown ? 1 : 0,
+        y,
+        scale: open ? 1 : 1 - index * 0.05,
+        filter: "blur(0px)",
+        height: folded ? frontHeight : height ?? "auto"
+      },
+      exit: gone ? { opacity: 0, transition: { duration: 0 } } : still ? { opacity: 0 } : {
+        opacity: 0,
+        scale: 0.92,
+        y: y + 10,
+        filter: "blur(4px)",
+        transition: { duration: 0.22, ease: [0.4, 0, 1, 1] }
+      },
+      transition: still ? { duration: 0 } : SPRING,
+      style: {
+        zIndex: count - index,
+        transformOrigin: "50% 0%",
+        pointerEvents: shown ? "auto" : "none"
+      },
+      className: "absolute inset-x-0 bottom-0 list-none",
+      children: /* @__PURE__ */ jsxs2(
+        motion2.div,
+        {
+          role: "status",
+          tabIndex: front || open ? 0 : -1,
+          "aria-label": `${kind.label}: ${toast.title}`,
+          drag: front || open ? "x" : false,
+          dragConstraints: { left: 0, right: 0 },
+          dragElastic: 0.9,
+          dragSnapToOrigin: false,
+          onDragStart: () => onDrag(true),
+          onDragEnd: (_, info) => {
+            onDrag(false);
+            const far = Math.abs(info.offset.x) > SWIPE || Math.abs(info.velocity.x) > 600;
+            if (far) fling(Math.sign(info.offset.x || info.velocity.x) || 1);
+            else void animate(x, 0, POP);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Delete" || e.key === "Backspace") {
+              e.preventDefault();
+              onDismiss(toast.id);
+            }
+          },
+          style: { x, rotate, opacity: fade },
+          className: cn(
+            "group relative h-full cursor-grab touch-pan-y overflow-hidden rounded-[22px] bg-white outline-none active:cursor-grabbing",
+            "shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] ring-1 ring-[#242423]/[0.05]",
+            "focus-visible:ring-2 focus-visible:ring-zinc-400"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs2(
+              motion2.div,
+              {
+                ref: inner,
+                animate: { opacity: folded ? 0 : 1 },
+                transition: { duration: still ? 0 : 0.2 },
+                className: "flex items-start gap-3 p-3.5 pr-11",
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      className: "grid size-9 shrink-0 place-items-center rounded-full",
+                      style: { backgroundColor: `${kind.color}14`, color: kind.color },
+                      children: /* @__PURE__ */ jsx2(
+                        kind.Icon,
+                        {
+                          className: "size-[18px]",
+                          strokeWidth: 2,
+                          active: play && !still ? true : void 0
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+                    /* @__PURE__ */ jsx2("p", { className: "text-sm font-semibold leading-5 tracking-tight text-[#242423]", children: toast.title }),
+                    toast.description && /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-sm leading-5 text-zinc-500", children: toast.description }),
+                    toast.action && /* @__PURE__ */ jsxs2(
+                      "button",
+                      {
+                        type: "button",
+                        onPointerDown: (e) => e.stopPropagation(),
+                        onClick: () => {
+                          toast.action.onClick?.();
+                          onDismiss(toast.id);
+                        },
+                        className: "mt-2.5 inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-full bg-[#242423]/[0.06] px-3 text-sm font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400",
+                        children: [
+                          /* @__PURE__ */ jsx2(UndoIcon, { className: "size-3.5", strokeWidth: 2.25 }),
+                          toast.action.label
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Dismiss",
+                onPointerDown: (e) => e.stopPropagation(),
+                onClick: () => onDismiss(toast.id),
+                className: "absolute right-2.5 top-2.5 grid size-7 scale-75 cursor-pointer place-items-center rounded-full text-zinc-400 opacity-0 outline-none transition-[opacity,transform,background-color,color] duration-200 hover:bg-[#242423]/[0.06] hover:text-[#242423] focus-visible:scale-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-zinc-400 group-hover:scale-100 group-hover:opacity-100 group-focus-visible:scale-100 group-focus-visible:opacity-100",
+                children: /* @__PURE__ */ jsx2(XIcon, { className: "size-3.5", strokeWidth: 2.25 })
+              }
+            ),
+            toast.duration > 0 && !folded && /* @__PURE__ */ jsx2(
+              motion2.span,
+              {
+                "aria-hidden": true,
+                className: "absolute inset-x-4 bottom-0 h-[2px] origin-left rounded-full",
+                style: { scaleX: left, backgroundColor: kind.color, opacity: 0.35 }
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var ToastStack = React.forwardRef(
+  function ToastStack2({
+    initial = DEFAULT_INITIAL,
+    duration = 6e3,
+    visible = 3,
+    triggers = true,
+    onDismiss,
+    className
+  }, ref) {
+    const still = !!useReducedMotion2();
+    const seq = React.useRef(0);
+    const turn = React.useRef({
+      success: 0,
+      warning: 0,
+      error: 0,
+      info: 0
+    });
+    const make = React.useCallback(
+      (t) => ({
+        ...t,
+        id: t.id ?? `toast-${++seq.current}`,
+        duration: t.duration ?? duration
+      }),
+      [duration]
+    );
+    const [toasts, setToasts] = React.useState(
+      () => initial.map((t) => ({ ...make(t), duration: t.duration ?? 0 }))
+    );
+    const [heights, setHeights] = React.useState({});
+    const [hover, setHover] = React.useState(false);
+    const [focus, setFocus] = React.useState(false);
+    const [dragging, setDragging] = React.useState(false);
+    const box = React.useRef(null);
+    const all = React.useRef(toasts);
+    all.current = toasts;
+    const dismiss = React.useCallback(
+      (id) => {
+        const t = all.current.find((x) => x.id === id);
+        if (!t) return;
+        setToasts((list) => list.filter((x) => x.id !== id));
+        onDismiss?.(t);
+      },
+      [onDismiss]
+    );
+    const push = React.useCallback(
+      (t) => {
+        const live = make(t);
+        setToasts((list) => [...list, live].slice(-MAX));
+        return live.id;
+      },
+      [make]
+    );
+    const clear = React.useCallback(() => {
+      const ids = all.current.map((t) => t.id).reverse();
+      ids.forEach(
+        (id, i) => window.setTimeout(() => dismiss(id), still ? 0 : i * 70)
+      );
+    }, [dismiss, still]);
+    React.useImperativeHandle(ref, () => ({ push, dismiss, clear }), [
+      push,
+      dismiss,
+      clear
+    ]);
+    React.useEffect(() => {
+      if (!hover || dragging) return;
+      const away = (e) => {
+        if (e.pointerType === "mouse" && !box.current?.contains(e.target))
+          setHover(false);
+      };
+      window.addEventListener("pointermove", away);
+      return () => window.removeEventListener("pointermove", away);
+    }, [hover, dragging]);
+    const measure = React.useCallback((id, h) => {
+      setHeights((m) => m[id] === h ? m : { ...m, [id]: h });
+    }, []);
+    const order = [...toasts].reverse();
+    const count = order.length;
+    const open = (hover || focus) && count > 1;
+    const sized = (id) => heights[id] ?? 76;
+    const frontHeight = count ? sized(order[0].id) : 76;
+    const offsets = [];
+    let run = 0;
+    order.forEach((t, i) => {
+      offsets.push(open ? -run : -PEEK * Math.min(i, visible - 1));
+      run += sized(t.id) + GAP;
+    });
+    const height = !count ? 76 : open ? run - GAP : frontHeight + PEEK * (Math.min(count, visible) - 1);
+    const sample = (kind) => {
+      const list = SAMPLES[kind];
+      const t = list[turn.current[kind]++ % list.length];
+      push(
+        kind === "error" ? {
+          ...t,
+          duration: Math.max(duration, 8e3) || 0,
+          action: {
+            label: "Undo",
+            onClick: () => window.setTimeout(
+              () => push({
+                kind: "success",
+                title: "Restored",
+                description: `${t.title.split(" ")[0]} is back where it was.`
+              }),
+              still ? 0 : 160
+            )
+          }
+        } : t
+      );
+    };
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: cn(
+          "flex w-[380px] max-w-full flex-col items-center gap-6",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs2(
+            motion2.div,
+            {
+              ref: box,
+              className: "relative w-full",
+              animate: { height },
+              transition: still ? { duration: 0 } : SPRING,
+              onPointerEnter: (e) => e.pointerType === "mouse" && setHover(true),
+              onPointerLeave: (e) => e.pointerType === "mouse" && setHover(false),
+              onPointerDown: (e) => e.pointerType !== "mouse" && setHover((h) => !h),
+              onFocus: (e) => e.target.matches(":focus-visible") && setFocus(true),
+              onBlur: (e) => {
+                if (!e.currentTarget.contains(e.relatedTarget))
+                  setFocus(false);
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Escape") {
+                  setHover(false);
+                  document.activeElement?.blur();
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsx2(
+                  "ol",
+                  {
+                    "aria-label": "Notifications",
+                    "aria-live": "polite",
+                    className: "contents",
+                    children: /* @__PURE__ */ jsx2(AnimatePresence, { initial: false, children: order.map((t, i) => /* @__PURE__ */ jsx2(
+                      Toast,
+                      {
+                        toast: t,
+                        index: i,
+                        count,
+                        open,
+                        visible,
+                        y: offsets[i],
+                        height: heights[t.id],
+                        frontHeight,
+                        still,
+                        paused: open || dragging,
+                        onMeasure: measure,
+                        onDismiss: dismiss,
+                        onDrag: setDragging
+                      },
+                      t.id
+                    )) })
+                  }
+                ),
+                /* @__PURE__ */ jsx2(AnimatePresence, { children: count === 0 && /* @__PURE__ */ jsxs2(
+                  motion2.p,
+                  {
+                    initial: still ? { opacity: 0 } : { opacity: 0, y: 8, filter: "blur(4px)" },
+                    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                    exit: { opacity: 0, transition: { duration: 0.12 } },
+                    transition: {
+                      duration: 0.4,
+                      delay: still ? 0 : 0.2,
+                      ease: [0.22, 1, 0.36, 1]
+                    },
+                    className: "absolute inset-0 flex items-center justify-center gap-2 rounded-[22px] border border-dashed border-[#242423]/[0.12] text-sm text-zinc-500",
+                    children: [
+                      /* @__PURE__ */ jsx2(
+                        CircleCheckIcon,
+                        {
+                          className: "size-4 text-[#269a5a]",
+                          strokeWidth: 2,
+                          active: !still
+                        }
+                      ),
+                      "You are all caught up"
+                    ]
+                  }
+                ) })
+              ]
+            }
+          ),
+          triggers && /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [
+            Object.keys(KINDS).map((k) => /* @__PURE__ */ jsxs2(
+              motion2.button,
+              {
+                type: "button",
+                whileTap: still ? void 0 : { scale: 0.94 },
+                transition: POP,
+                onClick: () => sample(k),
+                className: "flex h-9 cursor-pointer items-center gap-2 rounded-full bg-white pl-3 pr-3.5 text-sm font-medium text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.05),0_6px_16px_-10px_rgba(0,0,0,0.25)] ring-1 ring-[#242423]/[0.06] outline-none transition-colors hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-zinc-400",
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "span",
+                    {
+                      className: "size-2 rounded-full",
+                      style: { backgroundColor: KINDS[k].color }
+                    }
+                  ),
+                  KINDS[k].label
+                ]
+              },
+              k
+            )),
+            /* @__PURE__ */ jsx2(AnimatePresence, { children: count > 1 && /* @__PURE__ */ jsx2(
+              motion2.button,
+              {
+                type: "button",
+                onClick: clear,
+                initial: still ? { opacity: 0 } : { opacity: 0, scale: 0.8, filter: "blur(4px)" },
+                animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+                exit: still ? { opacity: 0 } : { opacity: 0, scale: 0.8, filter: "blur(4px)" },
+                transition: POP,
+                className: "h-9 cursor-pointer rounded-full px-3 text-sm font-medium text-zinc-500 outline-none transition-colors hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-zinc-400",
+                children: "Clear all"
+              }
+            ) })
+          ] })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  ToastStack
+};