motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-GUQINNWS.js

@@ -0,0 +1,770 @@
+"use client";
+import {
+  GithubIcon
+} from "./chunk-NCEAUODT.js";
+import {
+  LockKeyholeIcon
+} from "./chunk-IGI6OLRX.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/verify-flow/verify-flow.tsx
+import * as React from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var GLIDE = [0.22, 1, 0.36, 1];
+var FILL = [0.5, 1, 0.89, 1];
+var DEFAULT_CHECKS = ["Account age", "Two-factor enabled", "Public activity"];
+var SUBTITLES = {
+  waiting: "Connect an account to start",
+  checking: "Running a few quick checks",
+  done: "Everything checks out"
+};
+var fmt = (s) => `${String(Math.floor(s / 60)).padStart(2, "0")}:${String(s % 60).padStart(2, "0")}`;
+function Roll({
+  children,
+  still,
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: cn("relative inline-grid overflow-hidden", className), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      initial: still ? { opacity: 0 } : { y: "100%", opacity: 0, filter: "blur(3px)" },
+      animate: { y: 0, opacity: 1, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { y: "-100%", opacity: 0, filter: "blur(3px)" },
+      transition: { duration: still ? 0 : 0.35, ease: GLIDE },
+      className: "col-start-1 row-start-1 whitespace-nowrap",
+      children
+    },
+    children
+  ) }) });
+}
+function Spinner({ className, still }) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      if (!still)
+        gsap.to(ref.current, {
+          rotation: 360,
+          duration: 0.8,
+          ease: "none",
+          repeat: -1,
+          transformOrigin: "50% 50%"
+        });
+    },
+    { scope: ref }
+  );
+  return /* @__PURE__ */ jsxs("svg", { ref, viewBox: "0 0 16 16", className, "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "8",
+        cy: "8",
+        r: "6",
+        fill: "none",
+        stroke: "currentColor",
+        strokeOpacity: "0.18",
+        strokeWidth: "2"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        cx: "8",
+        cy: "8",
+        r: "6",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        pathLength: 100,
+        strokeDasharray: "28 100"
+      }
+    )
+  ] });
+}
+function HeaderStatus({
+  stage,
+  accent,
+  still
+}) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      if (stage !== "done" || still) return;
+      gsap.fromTo(
+        ref.current.querySelector(".pulse"),
+        { scale: 1, autoAlpha: 0.5 },
+        {
+          scale: 1.9,
+          autoAlpha: 0,
+          duration: 0.9,
+          ease: "power2.out",
+          delay: 0.15
+        }
+      );
+      gsap.fromTo(
+        ref.current.querySelector(".tick"),
+        { strokeDashoffset: 1 },
+        {
+          strokeDashoffset: 0,
+          duration: 0.35,
+          ease: "power2.out",
+          delay: 0.12
+        }
+      );
+    },
+    { dependencies: [stage], scope: ref }
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      className: "relative grid size-9 shrink-0 place-items-center rounded-full text-[#242423] transition-colors duration-500 dark:text-zinc-100",
+      style: { background: stage === "done" ? accent : "rgb(36 36 35 / 0.06)" },
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "pulse absolute inset-0 rounded-full opacity-0",
+            style: { background: accent }
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+          motion.span,
+          {
+            initial: { opacity: 0, scale: 0.6 },
+            animate: { opacity: 1, scale: 1 },
+            exit: { opacity: 0, scale: 0.6 },
+            transition: { duration: still ? 0 : 0.3, ease: GLIDE },
+            className: "relative grid place-items-center",
+            children: [
+              stage === "waiting" && /* @__PURE__ */ jsx(LockKeyholeIcon, { className: "size-4", strokeWidth: 2.25 }),
+              stage === "checking" && /* @__PURE__ */ jsx(Spinner, { className: "size-4", still }),
+              stage === "done" && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", className: "size-4", children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "tick",
+                  d: "M3.5 8.4l2.8 2.8 6.2-6.4",
+                  fill: "none",
+                  stroke: "#fff",
+                  strokeWidth: "2.2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  pathLength: 1,
+                  strokeDasharray: "1",
+                  strokeDashoffset: still ? 0 : 1
+                }
+              ) })
+            ]
+          },
+          stage
+        ) })
+      ]
+    }
+  );
+}
+function ShimmerButton({
+  children,
+  onClick,
+  pressed,
+  still
+}) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      if (still) return;
+      gsap.fromTo(
+        ref.current.querySelector(".sheen"),
+        { xPercent: -160 },
+        {
+          xPercent: 260,
+          duration: 1.1,
+          ease: "power2.inOut",
+          repeat: -1,
+          repeatDelay: 1.3
+        }
+      );
+    },
+    { scope: ref }
+  );
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      ref,
+      type: "button",
+      onClick,
+      animate: pressed && !still ? { scale: [1, 0.94, 1] } : { scale: 1 },
+      whileTap: still ? void 0 : { scale: 0.94 },
+      transition: { duration: 0.3, ease: GLIDE },
+      className: "relative h-8 shrink-0 cursor-pointer overflow-hidden 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__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "sheen absolute inset-y-0 left-0 w-1/2 -skew-x-12 bg-gradient-to-r from-transparent via-white/25 to-transparent"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "relative", children })
+      ]
+    }
+  );
+}
+function ContinueButton({
+  label,
+  seconds,
+  total,
+  onClick,
+  still
+}) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      gsap.fromTo(
+        ref.current.querySelector(".ring"),
+        { strokeDashoffset: 0 },
+        { strokeDashoffset: 1, duration: still ? 0 : total, ease: "none" }
+      );
+    },
+    { scope: ref }
+  );
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      ref,
+      type: "button",
+      onClick,
+      initial: "rest",
+      whileHover: "hover",
+      whileTap: still ? void 0 : { scale: 0.97 },
+      className: "group flex h-12 w-full cursor-pointer items-center justify-between rounded-full bg-[#242423] pl-5 pr-2 text-[14px] 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__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+          label,
+          /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              variants: { rest: { x: 0 }, hover: { x: still ? 0 : 3 } },
+              transition: { duration: 0.3, ease: GLIDE },
+              className: "flex",
+              children: /* @__PURE__ */ jsx(ArrowRight, { className: "size-4", strokeWidth: 2.25 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "relative grid size-8 place-items-center text-[12px] tabular-nums",
+            "aria-label": `${seconds} seconds left`,
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  viewBox: "0 0 32 32",
+                  className: "absolute inset-0 size-full -rotate-90",
+                  "aria-hidden": true,
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "16",
+                        cy: "16",
+                        r: "13",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeOpacity: "0.2",
+                        strokeWidth: "2.5"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        className: "ring",
+                        cx: "16",
+                        cy: "16",
+                        r: "13",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        pathLength: 1,
+                        strokeDasharray: "1"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Roll, { still, className: "h-[1.2em] leading-[1.2em]", children: String(seconds) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function sealPath(bumps = 9, depth = 0.085, r = 42) {
+  const pts = [];
+  for (let i = 0; i <= 180; i++) {
+    const t = i / 180 * Math.PI * 2;
+    const rr = r * (1 + depth * Math.cos(bumps * t));
+    pts.push(
+      `${(50 + Math.cos(t) * rr).toFixed(2)} ${(50 + Math.sin(t) * rr).toFixed(2)}`
+    );
+  }
+  return `M${pts.join(" L")}Z`;
+}
+var SEAL = sealPath();
+function SuccessSeal({ accent, still }) {
+  const ref = React.useRef(null);
+  useGSAP(
+    () => {
+      const q = (sel) => ref.current.querySelectorAll(sel);
+      if (still) {
+        gsap.set(q(".seal-tick"), { strokeDashoffset: 0 });
+        return;
+      }
+      gsap.timeline({ delay: 0.15 }).from(q(".seal"), {
+        scale: 0,
+        rotation: -60,
+        svgOrigin: "60 60",
+        duration: 0.7,
+        ease: "back.out(1.9)"
+      }).to(
+        q(".seal-tick"),
+        { strokeDashoffset: 0, duration: 0.35, ease: "power2.out" },
+        0.32
+      ).fromTo(
+        q(".spark"),
+        {
+          autoAlpha: 1,
+          attr: { "stroke-dashoffset": 1 },
+          scale: 0.6,
+          svgOrigin: "60 60"
+        },
+        {
+          attr: { "stroke-dashoffset": 0 },
+          scale: 1,
+          duration: 0.35,
+          ease: "power3.out",
+          stagger: 0.02
+        },
+        0.28
+      ).to(
+        q(".spark"),
+        {
+          autoAlpha: 0,
+          scale: 1.18,
+          svgOrigin: "60 60",
+          duration: 0.45,
+          ease: "power2.in",
+          stagger: 0.02
+        },
+        0.62
+      ).fromTo(
+        q(".dot"),
+        { autoAlpha: 1, scale: 0.3, svgOrigin: "60 60" },
+        {
+          scale: 1.35,
+          autoAlpha: 0,
+          duration: 0.9,
+          ease: "power2.out",
+          stagger: 0.03
+        },
+        0.3
+      ).to(
+        q(".seal-wrap"),
+        { y: -3, duration: 1.6, ease: "sine.inOut", repeat: -1, yoyo: true },
+        1.1
+      );
+    },
+    { scope: ref }
+  );
+  const sparks = Array.from({ length: 8 }, (_, i) => {
+    const a = i / 8 * Math.PI * 2 - Math.PI / 2 + 0.2;
+    return {
+      x1: 60 + Math.cos(a) * 48,
+      y1: 60 + Math.sin(a) * 48,
+      x2: 60 + Math.cos(a) * 58,
+      y2: 60 + Math.sin(a) * 58
+    };
+  });
+  const dots = Array.from({ length: 6 }, (_, i) => {
+    const a = i / 6 * Math.PI * 2 + 0.5;
+    return { cx: 60 + Math.cos(a) * 54, cy: 60 + Math.sin(a) * 54 };
+  });
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      viewBox: "0 0 120 120",
+      className: "size-[104px] overflow-visible",
+      "aria-hidden": true,
+      children: [
+        sparks.map((p, i) => /* @__PURE__ */ jsx(
+          "line",
+          {
+            className: "spark",
+            ...p,
+            stroke: accent,
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            pathLength: 1,
+            strokeDasharray: "1",
+            style: { visibility: "hidden" }
+          },
+          i
+        )),
+        dots.map((p, i) => /* @__PURE__ */ jsx(
+          "circle",
+          {
+            className: "dot",
+            ...p,
+            r: "2.4",
+            fill: i % 2 ? "#f5c542" : accent,
+            style: { visibility: "hidden" }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx("g", { className: "seal-wrap", children: /* @__PURE__ */ jsxs("g", { className: "seal", children: [
+          /* @__PURE__ */ jsx("path", { d: SEAL, transform: "translate(10 10)", fill: accent }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              className: "seal-tick",
+              d: "M44 61l11 11 22-23",
+              fill: "none",
+              stroke: "#fff",
+              strokeWidth: "7",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              pathLength: 1,
+              strokeDasharray: "1",
+              strokeDashoffset: "1"
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+function AutoHeight({
+  children,
+  still
+}) {
+  const inner = React.useRef(null);
+  const [h, setH] = React.useState("auto");
+  React.useLayoutEffect(() => {
+    const el = inner.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => setH(el.offsetHeight));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      animate: { height: h },
+      initial: false,
+      transition: { duration: still ? 0 : 0.55, ease: GLIDE },
+      className: "relative -mx-2 overflow-hidden px-2",
+      children: /* @__PURE__ */ jsx("div", { ref: inner, children })
+    }
+  );
+}
+var VerifyFlow = React.forwardRef(
+  function VerifyFlow2({
+    stage: stageProp,
+    completed: completedProp,
+    checks = DEFAULT_CHECKS,
+    title = "Verify your account",
+    provider = "GitHub",
+    providerIcon,
+    onSignIn,
+    destination = "Acme",
+    redirectSeconds = 5,
+    onContinue,
+    loop = false,
+    accent = "#269a5a",
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const uid = React.useId();
+    const demo = stageProp === void 0;
+    const [demoStage, setDemoStage] = React.useState("waiting");
+    const [demoDone, setDemoDone] = React.useState(0);
+    const [demoPress, setDemoPress] = React.useState(false);
+    const [run, setRun] = React.useState(0);
+    const stage = stageProp ?? demoStage;
+    const completed = Math.min(
+      checks.length,
+      stage === "done" ? checks.length : stage === "waiting" ? 0 : completedProp ?? demoDone
+    );
+    const [elapsed, setElapsed] = React.useState(0);
+    const [seconds, setSeconds] = React.useState(redirectSeconds);
+    React.useEffect(() => {
+      if (!demo) return;
+      setDemoStage("waiting");
+      setDemoDone(0);
+      setDemoPress(false);
+      const timers = [];
+      let at = 2400;
+      timers.push(window.setTimeout(() => setDemoPress(true), at));
+      at += 450;
+      timers.push(window.setTimeout(() => setDemoStage("checking"), at));
+      checks.forEach((_, i) => {
+        at += i === 0 ? 1500 : 1300;
+        timers.push(window.setTimeout(() => setDemoDone(i + 1), at));
+      });
+      at += 600;
+      timers.push(window.setTimeout(() => setDemoStage("done"), at));
+      return () => timers.forEach((t) => window.clearTimeout(t));
+    }, [demo, run, checks]);
+    React.useEffect(() => {
+      if (stage === "waiting") setElapsed(0);
+      if (stage !== "checking") return;
+      const id = window.setInterval(() => setElapsed((s) => s + 1), 1e3);
+      return () => window.clearInterval(id);
+    }, [stage]);
+    React.useEffect(() => {
+      if (stage !== "done") return;
+      setSeconds(redirectSeconds);
+      let left = redirectSeconds;
+      const id = window.setInterval(() => {
+        left -= 1;
+        setSeconds(Math.max(0, left));
+        if (left <= 0) {
+          window.clearInterval(id);
+          onContinue?.();
+          if (demo && loop) window.setTimeout(() => setRun((r) => r + 1), 1200);
+        }
+      }, 1e3);
+      return () => window.clearInterval(id);
+    }, [stage, redirectSeconds]);
+    const step = stage === "waiting" ? 1 : stage === "checking" ? 2 : 3;
+    const fills = [
+      stage === "waiting" ? 0 : 1,
+      stage === "done" ? 1 : stage === "checking" ? completed / checks.length : 0,
+      stage === "done" ? 1 : 0
+    ];
+    const tr = { duration: still ? 0 : 0.45, ease: GLIDE };
+    const swap = {
+      initial: still ? { opacity: 0 } : { opacity: 0, y: 10, filter: "blur(6px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { opacity: 0, y: -6, filter: "blur(4px)" },
+      transition: { ...tr, delay: still ? 0 : 0.06 }
+    };
+    const live = stage === "waiting" ? `Waiting for ${provider} sign-in` : stage === "checking" ? `Checking: ${checks[completed] ?? ""}` : "Verified";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-[400px] max-w-full rounded-3xl bg-white px-5 pb-5 pt-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__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: live }),
+          /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-4 px-1", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title }),
+              /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-zinc-500 dark:text-zinc-400", children: /* @__PURE__ */ jsx(Roll, { still, children: SUBTITLES[stage] }) })
+            ] }),
+            /* @__PURE__ */ jsx(HeaderStatus, { stage, accent, still })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-6 px-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex gap-1.5", "aria-hidden": true, children: fills.map((f, i) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "relative h-2.5 flex-1 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800/60",
+                children: /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    className: "absolute inset-0 origin-left rounded-full",
+                    style: { background: i === 2 ? accent : "#242423" },
+                    initial: false,
+                    animate: { scaleX: f },
+                    transition: { duration: still ? 0 : 0.8, ease: FILL }
+                  }
+                )
+              },
+              i
+            )) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center justify-between text-[12px] text-zinc-500 dark:text-zinc-400", children: [
+              /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "size-2 rounded-full transition-colors duration-500",
+                    style: { background: stage === "done" ? accent : "#242423" }
+                  }
+                ),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Step",
+                  " ",
+                  /* @__PURE__ */ jsx(Roll, { still, className: "align-bottom", children: String(step) }),
+                  " ",
+                  "of 3"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+                stage === "done" ? "Done in " : "",
+                fmt(elapsed).split("").map((ch, i) => /* @__PURE__ */ jsx(Roll, { still, children: ch }, i))
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-5", children: /* @__PURE__ */ jsx(AutoHeight, { still, children: /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", initial: false, children: [
+            stage === "waiting" && /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                ...swap,
+                className: "flex items-center gap-3 rounded-[22px] bg-[#242423]/[0.035] p-3 dark:bg-white/5",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "grid size-10 shrink-0 place-items-center rounded-full bg-white text-[#242423] ring-1 ring-black/[0.06] dark:bg-zinc-800 dark:text-zinc-100 dark:ring-white/10", children: providerIcon ?? /* @__PURE__ */ jsx(GithubIcon, { className: "size-[18px]", strokeWidth: 2 }) }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: "block text-[14px] font-medium", children: provider }),
+                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[12px] text-zinc-500 dark:text-zinc-400", children: [
+                      /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "size-1.5 rounded-full bg-zinc-400",
+                          animate: still ? void 0 : { opacity: [1, 0.25, 1] },
+                          transition: {
+                            duration: 1.6,
+                            repeat: Infinity,
+                            ease: "easeInOut"
+                          }
+                        }
+                      ),
+                      "Not connected yet"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    ShimmerButton,
+                    {
+                      onClick: onSignIn,
+                      pressed: demoPress,
+                      still,
+                      children: "Sign in"
+                    }
+                  )
+                ]
+              },
+              "waiting"
+            ),
+            stage === "checking" && /* @__PURE__ */ jsx(
+              motion.ul,
+              {
+                ...swap,
+                className: "relative rounded-[22px] bg-[#242423]/[0.035] p-1.5 dark:bg-white/5",
+                children: checks.map((label, i) => {
+                  const state = i < completed ? "passed" : i === completed ? "running" : "queued";
+                  return /* @__PURE__ */ jsxs(
+                    "li",
+                    {
+                      className: "relative flex h-11 items-center justify-between px-3.5",
+                      children: [
+                        state === "running" && /* @__PURE__ */ jsx(
+                          motion.span,
+                          {
+                            layoutId: `${uid}-running`,
+                            transition: {
+                              type: "spring",
+                              stiffness: 420,
+                              damping: 36
+                            },
+                            className: "absolute inset-0 rounded-2xl bg-white shadow-[0_1px_2px_rgba(0,0,0,0.05)] dark:bg-zinc-800"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "relative text-[14px] transition-colors duration-500",
+                              state === "queued" ? "text-zinc-400" : "text-zinc-900 dark:text-zinc-100"
+                            ),
+                            children: label
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: cn(
+                              "relative inline-flex items-center gap-1.5 text-[12px]",
+                              state === "queued" ? "text-zinc-400" : "text-zinc-500 dark:text-zinc-400"
+                            ),
+                            children: [
+                              state === "running" && /* @__PURE__ */ jsx(
+                                Spinner,
+                                {
+                                  className: "size-3.5 text-[#242423] dark:text-zinc-100",
+                                  still
+                                }
+                              ),
+                              state === "passed" && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  initial: still ? false : { scale: 0 },
+                                  animate: { scale: 1 },
+                                  transition: {
+                                    type: "spring",
+                                    stiffness: 600,
+                                    damping: 20
+                                  },
+                                  className: "size-2 rounded-full",
+                                  style: { background: accent }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(Roll, { still, children: state === "passed" ? "Passed" : state === "running" ? "Checking" : "Queued" })
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    label
+                  );
+                })
+              },
+              "checking"
+            ),
+            stage === "done" && /* @__PURE__ */ jsxs(motion.div, { ...swap, className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center rounded-[22px] bg-[#242423]/[0.035] px-4 pb-5 pt-6 text-center dark:bg-white/5", children: [
+                /* @__PURE__ */ jsx(SuccessSeal, { accent, still }),
+                /* @__PURE__ */ jsxs("p", { className: "mt-3 text-[18px] font-semibold tracking-tight", children: [
+                  provider,
+                  " connected"
+                ] }),
+                /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-[12px] text-zinc-500 dark:text-zinc-400", children: [
+                  checks.length,
+                  " of ",
+                  checks.length,
+                  " checks passed"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                ContinueButton,
+                {
+                  label: `Continue to ${destination}`,
+                  seconds,
+                  total: redirectSeconds,
+                  onClick: onContinue,
+                  still
+                }
+              )
+            ] }, "done")
+          ] }) }) })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  VerifyFlow
+};