motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-ONUWTWKP.js

@@ -0,0 +1,345 @@
+"use client";
+import {
+  ChevronRightIcon
+} from "./chunk-XH6YNONO.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/slide-commit/slide-commit.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useTransform
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HANDLE = 48;
+var PAD = 4;
+var INK = "#242423";
+var SUCCESS = "#269a5a";
+var TRACK = "rgba(36, 36, 35, 0.06)";
+var GLIDE = [0.22, 1, 0.36, 1];
+var HOME = { type: "spring", stiffness: 520, damping: 26 };
+var SlideCommit = React.forwardRef(
+  function SlideCommit2({
+    label = "Slide to commit",
+    pendingLabel = "Committing",
+    doneLabel = "Committed",
+    threshold = 0.82,
+    onCommit,
+    resetAfter = 2.4,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const track = React.useRef(null);
+    React.useImperativeHandle(ref, () => track.current);
+    const [phase, setPhase] = React.useState("idle");
+    const [armed, setArmed] = React.useState(false);
+    const [max, setMax] = React.useState(0);
+    const x = useMotionValue(0);
+    const pass = Math.min(0.95, Math.max(0.5, threshold));
+    const progress = useTransform(x, (v) => max > 0 ? v / max : 0);
+    const fill = useTransform(x, (v) => v + HANDLE + PAD * 2);
+    const labelOpacity = useTransform(progress, [0, 0.55], [1, 0]);
+    const labelShift = useTransform(progress, [0, 1], [0, 18]);
+    React.useLayoutEffect(() => {
+      const el = track.current;
+      if (!el) return;
+      const measure = () => setMax(el.clientWidth - HANDLE - PAD * 2);
+      measure();
+      const ro = new ResizeObserver(measure);
+      ro.observe(el);
+      return () => ro.disconnect();
+    }, []);
+    React.useEffect(
+      () => progress.on("change", (p) => {
+        if (phase !== "idle") return;
+        const on = p >= pass;
+        setArmed((a) => a === on ? a : on);
+      }),
+      [progress, pass, phase]
+    );
+    const reset = React.useCallback(() => {
+      setPhase("idle");
+      setArmed(false);
+      animate(x, 0, still ? { duration: 0 } : HOME);
+    }, [still, x]);
+    React.useEffect(() => {
+      if (phase !== "done" || resetAfter <= 0) return;
+      const t = window.setTimeout(reset, resetAfter * 1e3);
+      return () => window.clearTimeout(t);
+    }, [phase, resetAfter, reset]);
+    const commit = async () => {
+      if (phase !== "idle") return;
+      setPhase("loading");
+      await animate(
+        x,
+        max,
+        still ? { duration: 0 } : { type: "spring", stiffness: 600, damping: 34 }
+      );
+      try {
+        await Promise.all([
+          onCommit?.(),
+          new Promise((r) => setTimeout(r, still ? 150 : 900))
+        ]);
+        setPhase("done");
+      } catch {
+        reset();
+      }
+    };
+    const release = () => {
+      if (phase !== "idle") return;
+      if (x.get() >= max * pass) void commit();
+      else animate(x, 0, still ? { duration: 0 } : HOME);
+    };
+    const onKey = (e) => {
+      if (phase === "done" && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault();
+        return reset();
+      }
+      if (phase !== "idle") return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        void commit();
+      } else if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        const next = Math.max(
+          0,
+          Math.min(
+            max,
+            x.get() + (e.key === "ArrowRight" ? 1 : -1) * max * 0.2
+          )
+        );
+        animate(
+          x,
+          next,
+          still ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 32 }
+        );
+        if (next >= max * pass) void commit();
+      }
+    };
+    const done = phase === "done";
+    return /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        ref: track,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": done ? doneLabel : `${label}. Press Enter to confirm.`,
+        "aria-busy": phase === "loading",
+        onKeyDown: onKey,
+        onClick: () => done && reset(),
+        style: { backgroundColor: TRACK },
+        animate: done && !still ? { scaleX: [1, 1.025, 1] } : { scaleX: 1 },
+        transition: { duration: 0.45, ease: GLIDE },
+        className: cn(
+          "relative h-14 w-[320px] max-w-full select-none overflow-hidden rounded-full outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+          done ? "cursor-pointer" : "cursor-default",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              "aria-hidden": true,
+              className: "absolute inset-y-0 left-0 rounded-full",
+              style: { width: fill },
+              animate: {
+                backgroundColor: armed ? "rgba(36, 36, 35, 0.12)" : "rgba(36, 36, 35, 0.07)"
+              },
+              transition: { duration: 0.25 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              "aria-hidden": true,
+              className: "absolute inset-0 rounded-full",
+              style: { backgroundColor: SUCCESS },
+              initial: false,
+              animate: {
+                clipPath: done ? "inset(0% 0% 0% 0% round 999px)" : "inset(0% 0% 0% 100% round 999px)"
+              },
+              transition: { duration: still ? 0 : done ? 0.55 : 0.35, ease: GLIDE }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              className: cn(
+                "pointer-events-none absolute inset-0 grid place-items-center text-sm font-medium",
+                phase === "idle" ? "pl-[60px] pr-6" : "pl-6 pr-[60px]"
+              ),
+              style: phase === "idle" ? { opacity: labelOpacity, x: labelShift } : { opacity: 1, x: 0 },
+              children: phase === "idle" ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "bg-clip-text text-transparent",
+                    !still && "animate-[slide-commit-shine_2.2s_linear_infinite]"
+                  ),
+                  style: {
+                    backgroundImage: "linear-gradient(90deg, #71717a 0%, #71717a 40%, #18181b 50%, #71717a 60%, #71717a 100%)",
+                    backgroundSize: "250% 100%"
+                  },
+                  children: label
+                }
+              ) : /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: done ? /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  className: "text-white",
+                  initial: still ? { opacity: 0 } : { opacity: 0, y: "70%", filter: "blur(4px)" },
+                  animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                  transition: { duration: 0.32, ease: GLIDE },
+                  children: doneLabel
+                },
+                "done"
+              ) : (
+                // While it works, a light sweeps through the label and its dots, like the idle shimmer.
+                /* @__PURE__ */ jsxs(
+                  motion.span,
+                  {
+                    className: cn(
+                      "bg-clip-text text-transparent",
+                      !still && "animate-[slide-commit-shine_1.6s_linear_infinite]"
+                    ),
+                    style: {
+                      backgroundImage: "linear-gradient(90deg, #52525b 0%, #52525b 38%, #d4d4d8 50%, #52525b 62%, #52525b 100%)",
+                      backgroundSize: "250% 100%"
+                    },
+                    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: [
+                      pendingLabel,
+                      "..."
+                    ]
+                  },
+                  "pending"
+                )
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: done && !still && [0, 0.12].map((d) => /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute right-1 top-1 size-12 rounded-full border-2 border-white",
+              initial: { scale: 1, opacity: 0.8 },
+              animate: { scale: 2.2, opacity: 0 },
+              exit: { opacity: 0 },
+              transition: { duration: 0.8, ease: "easeOut", delay: 0.1 + d }
+            },
+            d
+          )) }),
+          /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-hidden": true,
+              drag: phase === "idle" ? "x" : false,
+              dragConstraints: { left: 0, right: max },
+              dragElastic: 0.06,
+              dragMomentum: false,
+              onDragEnd: release,
+              style: { x },
+              animate: {
+                // On commit the handle pops, then settles, as the check lands.
+                scale: done && !still ? [1, 1.16, 1] : armed && phase === "idle" && !still ? 1.06 : 1,
+                backgroundColor: done ? "#ffffff" : INK
+              },
+              whileTap: phase === "idle" && !still ? { scale: 0.96 } : void 0,
+              transition: {
+                scale: done ? { duration: 0.5, ease: GLIDE, times: [0, 0.35, 1] } : { type: "spring", stiffness: 500, damping: 22 },
+                backgroundColor: { duration: 0.3, ease: GLIDE }
+              },
+              className: cn(
+                "absolute left-1 top-1 grid size-12 place-items-center rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.12),0_6px_16px_-6px_rgba(0,0,0,0.35)] outline-none",
+                phase === "idle" ? "cursor-grab active:cursor-grabbing" : "cursor-default"
+              ),
+              children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", initial: false, children: [
+                phase === "idle" && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    className: "flex translate-x-px text-white",
+                    initial: { opacity: 0, scale: 0.6 },
+                    animate: { opacity: 1, scale: 1 },
+                    exit: { opacity: 0, scale: 0.6 },
+                    children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(
+                      motion.span,
+                      {
+                        className: cn("flex", i > 0 && "-ml-2.5"),
+                        animate: still ? { opacity: 1 } : { opacity: [0.35, 1, 0.35] },
+                        transition: {
+                          duration: 1.2,
+                          repeat: Infinity,
+                          delay: i * 0.18,
+                          ease: "easeInOut"
+                        },
+                        children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-4", strokeWidth: 2.5 })
+                      },
+                      i
+                    ))
+                  },
+                  "go"
+                ),
+                phase === "loading" && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    className: "size-5 rounded-full border-2 border-white/30 border-t-white",
+                    initial: { opacity: 0, scale: 0.6 },
+                    animate: { opacity: 1, scale: 1, rotate: still ? 0 : 360 },
+                    exit: { opacity: 0, scale: 0.6 },
+                    transition: {
+                      rotate: { duration: 0.8, ease: "linear", repeat: Infinity },
+                      default: { duration: 0.2 }
+                    }
+                  },
+                  "spin"
+                ),
+                done && /* @__PURE__ */ jsx(
+                  motion.svg,
+                  {
+                    viewBox: "0 0 16 16",
+                    className: "size-5",
+                    style: { color: SUCCESS },
+                    initial: { opacity: 0, scale: 0.6 },
+                    animate: { opacity: 1, scale: 1 },
+                    transition: { type: "spring", stiffness: 500, damping: 20 },
+                    children: /* @__PURE__ */ jsx(
+                      motion.path,
+                      {
+                        d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: 2.4,
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        initial: { pathLength: still ? 1 : 0 },
+                        animate: { pathLength: 1 },
+                        transition: { duration: 0.35, ease: GLIDE, delay: 0.08 }
+                      }
+                    )
+                  },
+                  "check"
+                )
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: phase === "loading" ? `${pendingLabel}.` : done ? `${doneLabel}.` : "" }),
+          /* @__PURE__ */ jsx("style", { children: `@keyframes slide-commit-shine { from { background-position: 100% 0 } to { background-position: -150% 0 } }` })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  SlideCommit
+};

package/dist/chunk-OS6REIBR.js

@@ -0,0 +1,154 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/smartphone-nfc.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 PATH_VARIANTS = {
+  normal: {
+    opacity: 1,
+    transition: {
+      duration: 0.4
+    }
+  },
+  fadeOut: {
+    opacity: 0,
+    transition: { duration: 0.3 }
+  },
+  fadeIn: (i) => ({
+    opacity: 1,
+    transition: {
+      type: "spring",
+      stiffness: 300,
+      damping: 20,
+      delay: i * 0.1
+    }
+  })
+};
+var SmartphoneNfcIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+  const controls = useAnimation();
+  const isControlledRef = useRef(false);
+  useImperativeHandle(ref, () => {
+    isControlledRef.current = true;
+    return {
+      startAnimation: async () => {
+        await controls.start("fadeOut");
+        controls.start("fadeIn");
+      },
+      stopAnimation: () => controls.start("normal")
+    };
+  });
+  const handleMouseEnter = useCallback(
+    async (e) => {
+      if (isControlledRef.current) {
+        onMouseEnter?.(e);
+      } else {
+        await controls.start("fadeOut");
+        controls.start("fadeIn");
+      }
+    },
+    [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("rect", { height: "12", rx: "1", width: "7", x: "2", y: "6" }),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                custom: 0,
+                d: "M13 8.32a7.43 7.43 0 0 1 0 7.36",
+                initial: { opacity: 1 },
+                variants: PATH_VARIANTS
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                custom: 1,
+                d: "M16.46 6.21a11.76 11.76 0 0 1 0 11.58",
+                initial: { opacity: 1 },
+                variants: PATH_VARIANTS
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                custom: 2,
+                d: "M19.91 4.1a15.91 15.91 0 0 1 .01 15.8",
+                initial: { opacity: 1 },
+                variants: PATH_VARIANTS
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+SmartphoneNfcIcon.displayName = "SmartphoneNfcIcon";
+
+export {
+  SmartphoneNfcIcon
+};