motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-SQ7F3VBU.js

@@ -0,0 +1,1069 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/payment-form/payment-form.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useAnimationControls,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import {
+  ArrowRight,
+  CalendarDays,
+  CreditCard,
+  Plus,
+  UserRound
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var GLIDE = [0.22, 1, 0.36, 1];
+var RING = { type: "spring", stiffness: 420, damping: 34 };
+var POP = { type: "spring", stiffness: 520, damping: 22 };
+var SUCCESS = "#269a5a";
+var FORM = {
+  hidden: {},
+  shown: {
+    opacity: 1,
+    scale: 1,
+    filter: "blur(0px)",
+    transition: {
+      duration: 0.3,
+      ease: GLIDE,
+      staggerChildren: 0.06,
+      delayChildren: 0.1
+    }
+  },
+  away: {
+    opacity: 0,
+    scale: 0.97,
+    filter: "blur(6px)",
+    transition: { duration: 0.35, ease: GLIDE, delay: 0.35 }
+  }
+};
+var ROW = {
+  hidden: { opacity: 0, y: 14, filter: "blur(4px)" },
+  shown: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: 0.45, ease: GLIDE }
+  }
+};
+var ERROR = "#d6453d";
+var digitsOf = (v) => v.replace(/\D/g, "");
+function brandOf(digits) {
+  if (/^4/.test(digits)) return "Visa";
+  if (/^(5[1-5]|2[2-7])/.test(digits)) return "Mastercard";
+  if (/^3[47]/.test(digits)) return "Amex";
+  if (/^6(011|5)/.test(digits)) return "Discover";
+  return null;
+}
+function formatNumber(digits) {
+  const amex = brandOf(digits) === "Amex";
+  const d = digits.slice(0, amex ? 15 : 19);
+  if (amex)
+    return [d.slice(0, 4), d.slice(4, 10), d.slice(10, 15)].filter(Boolean).join(" ");
+  return d.replace(/(.{4})(?=.)/g, "$1 ");
+}
+function luhn(digits) {
+  let sum = 0;
+  for (let i = 0; i < digits.length; i++) {
+    let n = Number(digits[digits.length - 1 - i]);
+    if (i % 2) {
+      n *= 2;
+      if (n > 9) n -= 9;
+    }
+    sum += n;
+  }
+  return sum % 10 === 0;
+}
+function formatExpiry(raw) {
+  let d = digitsOf(raw).slice(0, 4);
+  if (d.length === 1 && Number(d) > 1) d = `0${d}`;
+  return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d;
+}
+function expiryValid(v) {
+  const m = /^(\d{2})\/(\d{2})$/.exec(v);
+  if (!m) return false;
+  const month = Number(m[1]);
+  const year = 2e3 + Number(m[2]);
+  if (month < 1 || month > 12) return false;
+  const now = /* @__PURE__ */ new Date();
+  return year > now.getFullYear() || year === now.getFullYear() && month >= now.getMonth() + 1;
+}
+function BrandLogo({ brand }) {
+  const tile = "block h-6 w-9 overflow-hidden rounded-[6px] shadow-[0_0_0_1px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.08)]";
+  const font = "ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif";
+  if (brand === "Mastercard")
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 36 24",
+        className: tile,
+        role: "img",
+        "aria-label": "Mastercard",
+        children: [
+          /* @__PURE__ */ jsx("rect", { width: "36", height: "24", fill: "#fff" }),
+          /* @__PURE__ */ jsx("circle", { cx: "14.5", cy: "12", r: "6.5", fill: "#eb001b" }),
+          /* @__PURE__ */ jsx("circle", { cx: "21.5", cy: "12", r: "6.5", fill: "#f79e1b" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M18 6.52a6.5 6.5 0 0 1 0 10.96 6.5 6.5 0 0 1 0-10.96Z",
+              fill: "#ff5f00"
+            }
+          )
+        ]
+      }
+    );
+  if (brand === "Amex")
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 36 24",
+        className: tile,
+        role: "img",
+        "aria-label": "American Express",
+        children: [
+          /* @__PURE__ */ jsx("rect", { width: "36", height: "24", fill: "#016fd0" }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "18",
+              y: "15.5",
+              textAnchor: "middle",
+              fill: "#fff",
+              fontFamily: font,
+              fontSize: "8.5",
+              fontWeight: "800",
+              letterSpacing: "0.3",
+              children: "AMEX"
+            }
+          )
+        ]
+      }
+    );
+  if (brand === "Discover")
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 36 24",
+        className: tile,
+        role: "img",
+        "aria-label": "Discover",
+        children: [
+          /* @__PURE__ */ jsx("rect", { width: "36", height: "24", fill: "#fff" }),
+          /* @__PURE__ */ jsx("path", { d: "M20 24 36 16v8Z", fill: "#f48120", opacity: "0.9" }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "3",
+              y: "13.9",
+              fill: "#231f20",
+              fontFamily: font,
+              fontSize: "5.2",
+              fontWeight: "800",
+              letterSpacing: "0.1",
+              children: "DISC"
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: "18.4", cy: "12.1", r: "2.1", fill: "#f48120" }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "20.9",
+              y: "13.9",
+              fill: "#231f20",
+              fontFamily: font,
+              fontSize: "5.2",
+              fontWeight: "800",
+              children: "VER"
+            }
+          )
+        ]
+      }
+    );
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 24", className: tile, role: "img", "aria-label": "Visa", children: [
+    /* @__PURE__ */ jsx("rect", { width: "36", height: "24", fill: "#fff" }),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: "18",
+        y: "16",
+        textAnchor: "middle",
+        fill: "#1a1f71",
+        fontFamily: font,
+        fontSize: "11",
+        fontStyle: "italic",
+        fontWeight: "900",
+        letterSpacing: "-0.2",
+        children: "VISA"
+      }
+    )
+  ] });
+}
+function Rolling({ text, still }) {
+  return /* @__PURE__ */ jsx("span", { className: "relative inline-grid overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "whitespace-nowrap",
+      initial: still ? { opacity: 0 } : { opacity: 0, y: "70%", filter: "blur(4px)" },
+      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+      exit: still ? { opacity: 0 } : { opacity: 0, y: "-70%", filter: "blur(4px)" },
+      transition: { duration: 0.32, ease: GLIDE },
+      children: text
+    },
+    text
+  ) }) });
+}
+function CvcIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 20 20",
+      className: "size-5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "2", y: "4.5", width: "16", height: "11", rx: "2.5" }),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "2",
+            y: "7",
+            width: "16",
+            height: "2.5",
+            fill: "currentColor",
+            stroke: "none"
+          }
+        ),
+        /* @__PURE__ */ jsx("rect", { x: "11", y: "11", width: "4.5", height: "2.5", rx: "0.75" })
+      ]
+    }
+  );
+}
+function LockIcon({ shut, still }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      className: "size-4",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.path,
+          {
+            d: "M5 7.5V5.25a3 3 0 0 1 6 0V7.5",
+            initial: false,
+            animate: { y: shut ? 0 : -2.25, rotate: shut ? 0 : -14 },
+            style: { originX: "11px", originY: "7.5px" },
+            transition: still ? { duration: 0 } : { type: "spring", stiffness: 600, damping: 16 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: "3.25",
+            y: "7.5",
+            width: "9.5",
+            height: "6.5",
+            rx: "1.75",
+            fill: "currentColor",
+            stroke: "none"
+          }
+        )
+      ]
+    }
+  );
+}
+function Field({
+  id,
+  label,
+  value,
+  onChange,
+  focused,
+  setFocused,
+  icon,
+  valid,
+  error,
+  right,
+  disabled,
+  still,
+  inputProps,
+  className,
+  uid,
+  wide
+}) {
+  const [touched, setTouched] = React.useState(false);
+  const shake = useAnimationControls();
+  const isFocused = focused === id;
+  const floated = isFocused || value.length > 0;
+  const showError = touched && !isFocused && !valid && value.length > 0;
+  const inputId = `${uid}-${id}`;
+  return /* @__PURE__ */ jsxs(motion.div, { variants: still ? void 0 : ROW, className, children: [
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        animate: shake,
+        className: cn(
+          "relative h-14 rounded-full bg-zinc-100 transition-colors duration-200 dark:bg-white/6",
+          !isFocused && !disabled && "hover:bg-zinc-200/70 dark:hover:bg-white/10"
+        ),
+        children: [
+          isFocused && /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              layoutId: `${uid}-ring`,
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 rounded-full ring-2 ring-inset ring-[#242423] dark:ring-white",
+              transition: still ? { duration: 0 } : RING
+            }
+          ),
+          showError && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "pointer-events-none absolute inset-0 rounded-full",
+              style: { boxShadow: `inset 0 0 0 2px ${ERROR}80` }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute left-5 top-1/2 -translate-y-1/2 transition-colors duration-200",
+                isFocused ? "text-zinc-900 dark:text-zinc-100" : "text-zinc-400 dark:text-zinc-500"
+              ),
+              children: /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  className: "grid",
+                  initial: false,
+                  animate: isFocused && !still ? { scale: [1, 1.18, 1], rotate: [0, -10, 6, 0] } : { scale: 1, rotate: 0 },
+                  transition: { duration: 0.45, ease: GLIDE },
+                  children: icon
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.label,
+            {
+              htmlFor: inputId,
+              className: "pointer-events-none absolute left-[52px] top-1/2 origin-left -translate-y-1/2 text-sm text-zinc-500 dark:text-zinc-400",
+              initial: false,
+              animate: { y: floated ? -11 : 0, scale: floated ? 12 / 14 : 1 },
+              transition: still ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 34 },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              value,
+              disabled,
+              onChange: (e) => onChange(e.target.value),
+              onFocus: () => setFocused(id),
+              onBlur: () => {
+                setFocused(null);
+                if (value.length) setTouched(true);
+                if (value.length && !valid && !still)
+                  shake.start({
+                    x: [0, -6, 6, -4, 4, 0],
+                    transition: { duration: 0.4 }
+                  });
+              },
+              "aria-invalid": showError || void 0,
+              "aria-describedby": showError ? `${inputId}-error` : void 0,
+              className: cn(
+                "absolute inset-0 w-full rounded-full bg-transparent pb-1.5 pl-[52px] pt-5 text-base tabular-nums text-zinc-900 outline-none placeholder:text-transparent disabled:cursor-not-allowed dark:text-zinc-100",
+                wide ? "pr-32" : "pr-14"
+              ),
+              ...inputProps
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute right-5 top-1/2 flex -translate-y-1/2 items-center gap-2", children: [
+            right,
+            /* @__PURE__ */ jsx(AnimatePresence, { children: valid && /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                className: "grid size-5 place-items-center",
+                style: { color: SUCCESS },
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: { duration: 0.15 },
+                children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", className: "size-4", "aria-hidden": true, children: /* @__PURE__ */ jsx(
+                  motion.path,
+                  {
+                    d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 1.75,
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    initial: { pathLength: still ? 1 : 0 },
+                    animate: { pathLength: 1 },
+                    transition: { duration: 0.3, ease: GLIDE }
+                  }
+                ) })
+              },
+              "ok"
+            ) })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: showError && /* @__PURE__ */ jsx(
+      motion.p,
+      {
+        id: `${inputId}-error`,
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: still ? 0 : 0.25, ease: GLIDE },
+        className: "overflow-hidden px-5 text-xs",
+        style: { color: ERROR },
+        children: /* @__PURE__ */ jsx("span", { className: "block pt-1.5", children: error })
+      }
+    ) })
+  ] });
+}
+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.6 }).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 ContinueButton({
+  label,
+  onClick,
+  still
+}) {
+  const arrow = "absolute inset-0 size-4 transition-transform duration-[420ms] ease-[cubic-bezier(0.22,1,0.36,1)]";
+  return /* @__PURE__ */ jsxs(
+    motion.button,
+    {
+      type: "button",
+      onClick,
+      whileTap: still ? void 0 : { scale: 0.97 },
+      className: "group flex h-12 min-w-0 flex-1 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-full bg-[#242423] px-5 text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-white dark:text-zinc-900 dark:focus-visible:ring-offset-zinc-900",
+      children: [
+        label,
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "relative size-4 shrink-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsx(
+            ArrowRight,
+            {
+              className: cn(arrow, !still && "group-hover:translate-x-[140%]"),
+              strokeWidth: 2.25
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ArrowRight,
+            {
+              className: cn(
+                arrow,
+                "-translate-x-[140%]",
+                !still && "group-hover:translate-x-0 group-hover:delay-75"
+              ),
+              strokeWidth: 2.25
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Confirmation({
+  brand,
+  last4,
+  expiry,
+  title,
+  cta,
+  onContinue,
+  onAnother,
+  still
+}) {
+  const heading = React.useRef(null);
+  React.useEffect(() => heading.current?.focus(), []);
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "absolute inset-0 flex flex-col gap-4 p-6",
+      initial: { opacity: 0, y: still ? 0 : 8 },
+      animate: { opacity: 1, y: 0 },
+      exit: still ? { opacity: 0, transition: { duration: 0 } } : {
+        opacity: 0,
+        scale: 0.96,
+        filter: "blur(6px)",
+        transition: { duration: 0.28, ease: GLIDE }
+      },
+      transition: { duration: 0.4, ease: GLIDE, delay: still ? 0 : 0.45 },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center rounded-[22px] bg-[#242423]/[0.035] px-4 pb-5 pt-6 text-center dark:bg-white/5", children: [
+          /* @__PURE__ */ jsx(SuccessSeal, { accent: SUCCESS, still }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              ref: heading,
+              tabIndex: -1,
+              className: "mt-3 text-lg font-semibold tracking-tight outline-none",
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: still ? false : { opacity: 0, y: 6 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.4, ease: GLIDE, delay: still ? 0 : 1.15 },
+              className: "mt-2 flex items-center gap-2 rounded-full bg-white py-1 pl-1 pr-3 text-xs text-zinc-500 shadow-[0_1px_2px_rgba(0,0,0,0.06)] dark:bg-zinc-800 dark:text-zinc-400",
+              children: [
+                brand && /* @__PURE__ */ jsx("span", { className: "grid origin-left scale-[0.8]", children: /* @__PURE__ */ jsx(BrandLogo, { brand }) }),
+                /* @__PURE__ */ jsxs("span", { className: "font-medium tabular-nums text-zinc-900 dark:text-zinc-100", children: [
+                  "\u2022\u2022\u2022\u2022 ",
+                  last4
+                ] }),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\xB7" }),
+                /* @__PURE__ */ jsxs("span", { className: "tabular-nums", children: [
+                  "Expires ",
+                  expiry
+                ] })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            motion.button,
+            {
+              type: "button",
+              onClick: onAnother,
+              whileTap: still ? void 0 : { scale: 0.96 },
+              className: "group flex h-12 shrink-0 cursor-pointer items-center gap-1.5 whitespace-nowrap rounded-full bg-zinc-100 px-4 text-sm font-medium outline-none transition-colors hover:bg-zinc-200/80 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/6 dark:hover:bg-white/10",
+              children: [
+                /* @__PURE__ */ jsx(
+                  Plus,
+                  {
+                    className: "size-4 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:rotate-90",
+                    strokeWidth: 2.25,
+                    "aria-hidden": true
+                  }
+                ),
+                "Add another"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(ContinueButton, { label: cta, onClick: onContinue, still })
+        ] })
+      ]
+    }
+  );
+}
+var PaymentForm = React.forwardRef(
+  function PaymentForm2({
+    title = "Payment details",
+    subtitle = "Add a card to finish setting up your plan. You can remove it any time.",
+    cta = "Save card",
+    doneLabel = "Card saved",
+    defaultSave = true,
+    onSubmit,
+    continueLabel = "Continue to checkout",
+    onContinue,
+    className
+  }, ref) {
+    const still = !!useReducedMotion();
+    const uid = React.useId();
+    const [focused, setFocused] = React.useState(null);
+    const [number, setNumber] = React.useState("");
+    const [name, setName] = React.useState("");
+    const [expiry, setExpiry] = React.useState("");
+    const [cvc, setCvc] = React.useState("");
+    const [save, setSave] = React.useState(defaultSave);
+    const [phase, setPhase] = React.useState("idle");
+    const [round, setRound] = React.useState(0);
+    const form = React.useRef(null);
+    const card = React.useRef(null);
+    const inView = useInView(card, { once: true, amount: 0.3 });
+    const show = still || inView || round > 0;
+    React.useImperativeHandle(ref, () => form.current);
+    React.useEffect(() => {
+      if (form.current) form.current.inert = phase === "done";
+    }, [phase]);
+    const another = () => {
+      setNumber("");
+      setName("");
+      setExpiry("");
+      setCvc("");
+      setSave(defaultSave);
+      setPhase("idle");
+      setRound((r) => r + 1);
+    };
+    const digits = digitsOf(number);
+    const brand = brandOf(digits);
+    const amex = brand === "Amex";
+    const numberOk = digits.length === (amex ? 15 : 16) && luhn(digits);
+    const nameOk = name.trim().length > 1;
+    const expiryOk = expiryValid(expiry);
+    const cvcOk = cvc.length === (amex ? 4 : 3);
+    const ready = numberOk && nameOk && expiryOk && cvcOk;
+    const locked = phase !== "idle";
+    const submit = async (e) => {
+      e.preventDefault();
+      if (!ready || locked) return;
+      setPhase("loading");
+      try {
+        await Promise.all([
+          onSubmit?.({
+            number: digits,
+            name: name.trim(),
+            expiry,
+            cvc,
+            brand,
+            save
+          }),
+          new Promise((r) => setTimeout(r, still ? 200 : 1e3))
+        ]);
+        setPhase("done");
+      } catch {
+        setPhase("idle");
+      }
+    };
+    const muted = "#f4f4f5";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: card,
+        className: cn(
+          "relative w-[400px] max-w-full overflow-hidden rounded-3xl bg-white text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs(
+            motion.form,
+            {
+              ref: form,
+              onSubmit: submit,
+              noValidate: true,
+              "aria-hidden": phase === "done",
+              variants: still ? void 0 : FORM,
+              initial: still ? false : "hidden",
+              animate: phase === "done" ? still ? { opacity: 0 } : "away" : still ? { opacity: 1 } : show ? "shown" : "hidden",
+              onAnimationComplete: (def) => {
+                if (def === "shown" && round > 0)
+                  form.current?.querySelector("input")?.focus();
+              },
+              className: "p-6",
+              children: [
+                /* @__PURE__ */ jsxs(motion.div, { variants: still ? void 0 : ROW, children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title }),
+                  /* @__PURE__ */ jsx("p", { className: "mt-1 text-base leading-relaxed text-zinc-500 dark:text-zinc-400", children: subtitle })
+                ] }),
+                /* @__PURE__ */ jsx(LayoutGroup, { id: uid, children: /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-2 gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    Field,
+                    {
+                      uid,
+                      id: "number",
+                      wide: true,
+                      label: "Card number",
+                      value: number,
+                      onChange: (v) => setNumber(formatNumber(digitsOf(v))),
+                      focused,
+                      setFocused,
+                      valid: numberOk,
+                      error: "Check the card number.",
+                      disabled: locked,
+                      still,
+                      className: "col-span-2",
+                      icon: /* @__PURE__ */ jsx(CreditCard, { className: "size-5", strokeWidth: 1.75 }),
+                      right: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: brand && /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          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: -8, filter: "blur(4px)" },
+                          transition: { duration: 0.3, ease: GLIDE },
+                          className: "grid",
+                          children: /* @__PURE__ */ jsx(BrandLogo, { brand })
+                        },
+                        brand
+                      ) }),
+                      inputProps: {
+                        inputMode: "numeric",
+                        autoComplete: "cc-number",
+                        maxLength: 23
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Field,
+                    {
+                      uid,
+                      id: "name",
+                      label: "Name on card",
+                      value: name,
+                      onChange: (v) => setName(v.replace(/[^\p{L}\s'.-]/gu, "").slice(0, 40)),
+                      focused,
+                      setFocused,
+                      valid: nameOk,
+                      error: "Enter the name on the card.",
+                      disabled: locked,
+                      still,
+                      className: "col-span-2",
+                      icon: /* @__PURE__ */ jsx(UserRound, { className: "size-5", strokeWidth: 1.75 }),
+                      inputProps: {
+                        autoComplete: "cc-name",
+                        autoCapitalize: "words"
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Field,
+                    {
+                      uid,
+                      id: "expiry",
+                      label: "Expiry",
+                      value: expiry,
+                      onChange: (v) => (
+                        // Let backspace pass through the slash.
+                        setExpiry(
+                          v.length < expiry.length && expiry.endsWith("/") ? v.replace("/", "") : formatExpiry(v)
+                        )
+                      ),
+                      focused,
+                      setFocused,
+                      valid: expiryOk,
+                      error: "Use a future date, MM/YY.",
+                      disabled: locked,
+                      still,
+                      icon: /* @__PURE__ */ jsx(CalendarDays, { className: "size-5", strokeWidth: 1.75 }),
+                      inputProps: {
+                        inputMode: "numeric",
+                        autoComplete: "cc-exp",
+                        maxLength: 5
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Field,
+                    {
+                      uid,
+                      id: "cvc",
+                      label: "CVC",
+                      value: cvc,
+                      onChange: (v) => setCvc(digitsOf(v).slice(0, amex ? 4 : 3)),
+                      focused,
+                      setFocused,
+                      valid: cvcOk,
+                      error: amex ? "Four digits on the front." : "Three digits on the back.",
+                      disabled: locked,
+                      still,
+                      icon: /* @__PURE__ */ jsx(CvcIcon, {}),
+                      inputProps: {
+                        inputMode: "numeric",
+                        autoComplete: "cc-csc",
+                        maxLength: 4
+                      }
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx(motion.div, { variants: still ? void 0 : ROW, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    role: "switch",
+                    "aria-checked": save,
+                    disabled: locked,
+                    onClick: () => setSave((v) => !v),
+                    className: "group mt-5 flex w-full cursor-pointer items-center justify-between gap-4 rounded-xl text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 disabled:cursor-not-allowed",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { children: "Save card for future payments" }),
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "relative flex h-6 w-10 shrink-0 items-center rounded-full p-0.5 transition-colors duration-200",
+                            save ? "justify-end bg-[#242423] dark:bg-white" : "justify-start bg-zinc-200 dark:bg-white/15"
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            motion.span,
+                            {
+                              layout: true,
+                              transition: still ? { duration: 0 } : { type: "spring", stiffness: 600, damping: 32 },
+                              className: "block size-5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.2)] group-active:w-6 dark:bg-zinc-900"
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(motion.div, { variants: still ? void 0 : ROW, children: /* @__PURE__ */ jsxs(
+                  motion.button,
+                  {
+                    type: "submit",
+                    "aria-disabled": !ready || locked,
+                    whileTap: ready && !locked && !still ? { scale: 0.98 } : void 0,
+                    animate: {
+                      backgroundColor: phase === "done" ? SUCCESS : ready || locked ? "#242423" : muted,
+                      color: ready || locked ? "#ffffff" : "#a1a1aa"
+                    },
+                    transition: { duration: still ? 0 : 0.3, ease: GLIDE },
+                    className: cn(
+                      "mt-6 flex h-12 w-full items-center justify-center gap-2 rounded-full text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+                      ready && !locked ? "cursor-pointer" : "cursor-default"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "relative grid size-4 place-items-center", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: phase === "loading" ? /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "size-4 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"
+                      ) : phase === "done" ? /* @__PURE__ */ jsx(
+                        motion.svg,
+                        {
+                          viewBox: "0 0 16 16",
+                          className: "size-4",
+                          initial: { opacity: 0, scale: 0.6 },
+                          animate: { opacity: 1, scale: 1 },
+                          transition: POP,
+                          "aria-hidden": true,
+                          children: /* @__PURE__ */ jsx(
+                            motion.path,
+                            {
+                              d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+                              fill: "none",
+                              stroke: "currentColor",
+                              strokeWidth: 2.25,
+                              strokeLinecap: "round",
+                              strokeLinejoin: "round",
+                              initial: { pathLength: still ? 1 : 0 },
+                              animate: { pathLength: 1 },
+                              transition: {
+                                duration: 0.35,
+                                ease: GLIDE,
+                                delay: 0.08
+                              }
+                            }
+                          )
+                        },
+                        "check"
+                      ) : /* @__PURE__ */ jsx(
+                        motion.span,
+                        {
+                          className: "grid",
+                          exit: { opacity: 0, scale: 0.6 },
+                          children: /* @__PURE__ */ jsx(LockIcon, { shut: ready, still })
+                        },
+                        "lock"
+                      ) }) }),
+                      /* @__PURE__ */ jsx(
+                        Rolling,
+                        {
+                          text: phase === "loading" ? "Saving card" : phase === "done" ? doneLabel : cta,
+                          still
+                        }
+                      )
+                    ]
+                  }
+                ) })
+              ]
+            },
+            round
+          ),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: phase === "done" && /* @__PURE__ */ jsx(
+            Confirmation,
+            {
+              brand,
+              last4: digits.slice(-4),
+              expiry,
+              title: doneLabel,
+              cta: continueLabel,
+              onContinue,
+              onAnother: another,
+              still
+            },
+            "done"
+          ) }),
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: phase === "loading" ? "Saving card." : phase === "done" ? `${brand ?? "Card"} ending in ${digits.slice(-4)} saved.` : "" })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  PaymentForm
+};