motion-brew 0.0.0-stage → 0.1.1

package/dist/chunk-TQ6KSDDE.js

@@ -0,0 +1,682 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/metal-card-stack/metal-card-stack.tsx
+import * as React from "react";
+import gsap from "gsap";
+import { useGSAP } from "@gsap/react";
+import { useReducedMotion } from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+gsap.registerPlugin(useGSAP);
+var DEFAULT_CARDS = [
+  {
+    holder: "Alex Morgan",
+    number: "4821660422591937",
+    network: "visa",
+    bank: "Northwind",
+    tier: "Reserve",
+    expiry: "08/29",
+    finish: "graphite"
+  },
+  {
+    holder: "Alex Morgan",
+    number: "5412751234561937",
+    network: "mastercard",
+    bank: "Harbor",
+    tier: "Private",
+    expiry: "11/28",
+    finish: "gold"
+  },
+  {
+    holder: "Alex Morgan",
+    number: "378282246310005",
+    network: "amex",
+    bank: "Meridian",
+    tier: "Platinum",
+    expiry: "03/30",
+    finish: "titanium"
+  },
+  {
+    holder: "Alex Morgan",
+    number: "6011000990139424",
+    network: "discover",
+    bank: "Summit",
+    tier: "Infinite",
+    expiry: "06/27",
+    finish: "obsidian"
+  }
+];
+var groups = (number, network) => {
+  const d = number.replace(/\D/g, "");
+  if (network === "amex")
+    return [d.slice(0, 4), d.slice(4, 10), d.slice(10, 15)].join(" ");
+  return d.replace(/(.{4})(?=.)/g, "$1 ");
+};
+function Network({
+  network,
+  ink
+}) {
+  const font = "ui-sans-serif, system-ui, -apple-system, Helvetica, Arial, sans-serif";
+  if (network === "mastercard")
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 52 32",
+        className: "h-8 w-[52px]",
+        role: "img",
+        "aria-label": "Mastercard",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "19", cy: "16", r: "13", fill: "#eb001b" }),
+          /* @__PURE__ */ jsx("circle", { cx: "33", cy: "16", r: "13", fill: "#f79e1b" }),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M26 5.1a13 13 0 0 1 0 21.8 13 13 0 0 1 0-21.8Z",
+              fill: "#ff5f00"
+            }
+          )
+        ]
+      }
+    );
+  if (network === "amex")
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 60 36",
+        className: "h-9 w-[60px]",
+        role: "img",
+        "aria-label": "American Express",
+        children: [
+          /* @__PURE__ */ jsx("rect", { width: "60", height: "36", rx: "4", fill: "#016fd0" }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "30",
+              y: "16",
+              textAnchor: "middle",
+              fill: "#fff",
+              fontFamily: font,
+              fontSize: "9.5",
+              fontWeight: "900",
+              letterSpacing: "0.4",
+              children: "AMERICAN"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "30",
+              y: "27",
+              textAnchor: "middle",
+              fill: "#fff",
+              fontFamily: font,
+              fontSize: "9.5",
+              fontWeight: "900",
+              letterSpacing: "0.4",
+              children: "EXPRESS"
+            }
+          )
+        ]
+      }
+    );
+  if (network === "discover")
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: "0 0 84 20",
+        className: "h-5 w-[84px]",
+        role: "img",
+        "aria-label": "Discover",
+        children: [
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "0",
+              y: "15",
+              fill: ink,
+              fontFamily: font,
+              fontSize: "14",
+              fontWeight: "800",
+              letterSpacing: "0.2",
+              children: "DISC"
+            }
+          ),
+          /* @__PURE__ */ jsx("circle", { cx: "42.5", cy: "10", r: "6", fill: "#f48120" }),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: "49",
+              y: "15",
+              fill: ink,
+              fontFamily: font,
+              fontSize: "14",
+              fontWeight: "800",
+              letterSpacing: "0.2",
+              children: "VER"
+            }
+          )
+        ]
+      }
+    );
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 64 22",
+      className: "h-[22px] w-16",
+      role: "img",
+      "aria-label": "Visa",
+      children: /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: "32",
+          y: "19",
+          textAnchor: "middle",
+          fill: ink,
+          fontFamily: font,
+          fontSize: "22",
+          fontStyle: "italic",
+          fontWeight: "900",
+          letterSpacing: "-0.5",
+          children: "VISA"
+        }
+      )
+    }
+  );
+}
+var METALS = {
+  graphite: {
+    base: "linear-gradient(135deg, #5b6068 0%, #2f3338 38%, #4a4f56 62%, #23262a 100%)",
+    ink: "rgba(255,255,255,0.88)",
+    edge: "#17191c"
+  },
+  gold: {
+    base: "linear-gradient(135deg, #f3dca2 0%, #c9a35a 34%, #e9cf8c 58%, #a8823c 100%)",
+    ink: "rgba(58,40,10,0.85)",
+    edge: "#7a5a22"
+  },
+  titanium: {
+    base: "linear-gradient(135deg, #eef0f2 0%, #b9bec4 36%, #dfe2e6 60%, #9aa0a7 100%)",
+    ink: "rgba(30,34,40,0.82)",
+    edge: "#6f757c"
+  },
+  obsidian: {
+    base: "linear-gradient(135deg, #2a2b2f 0%, #0c0c0e 40%, #1d1e22 64%, #050506 100%)",
+    ink: "rgba(255,255,255,0.82)",
+    edge: "#000000"
+  }
+};
+var RATIO = 1.586;
+var VISIBLE = 4;
+var THROW = 80;
+function Plate({
+  card,
+  width,
+  children
+}) {
+  const m = METALS[card.finish];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative overflow-hidden rounded-[18px]",
+      style: {
+        width,
+        height: width / RATIO,
+        background: m.base,
+        color: m.ink,
+        // Bevel: a bright top edge, a dark bottom edge and a hairline all round.
+        boxShadow: "inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0 opacity-70 mix-blend-overlay",
+            style: {
+              backgroundImage: "repeating-linear-gradient(0deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, rgba(0,0,0,0.05) 1px, rgba(0,0,0,0.05) 2px, transparent 2px, transparent 3px)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0 mix-blend-soft-light",
+            style: {
+              backgroundImage: "linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0.15) 52%, transparent 70%)",
+              backgroundSize: "260% 260%",
+              backgroundPosition: "var(--sheen-x, 50%) var(--sheen-y, 50%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": true,
+            className: "absolute inset-0",
+            style: {
+              background: "radial-gradient(120% 80% at var(--sheen-x, 50%) 0%, rgba(255,255,255,0.18), transparent 60%)"
+            }
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+var embossFor = (card) => card.finish === "gold" || card.finish === "titanium" ? "0 1px 0 rgba(255,255,255,0.55), 0 -1px 0 rgba(0,0,0,0.25)" : "0 1px 0 rgba(255,255,255,0.18), 0 -1px 0 rgba(0,0,0,0.6)";
+function Front({ card, width }) {
+  const m = METALS[card.finish];
+  return /* @__PURE__ */ jsx(Plate, { card, width, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative flex h-full flex-col px-5 pb-4 pt-4",
+      style: { textShadow: embossFor(card) },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-base font-semibold uppercase tracking-[0.14em]", children: card.bank ?? "Bank" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium uppercase tracking-[0.16em] opacity-70", children: card.tier })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "relative h-8 w-11 overflow-hidden rounded-[7px]",
+              style: {
+                background: "linear-gradient(135deg, #f6e3a8, #c79d4f 50%, #ecd38f)",
+                boxShadow: "inset 0 0 0 1px rgba(90,60,10,0.35), 0 1px 1px rgba(0,0,0,0.25)"
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/3 h-px bg-black/25" }),
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-2/3 h-px bg-black/25" }),
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-1/2 w-px bg-black/25" }),
+                /* @__PURE__ */ jsx("span", { className: "absolute inset-[30%] rounded-[3px] border border-black/25" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "relative h-9 w-[60px] overflow-hidden rounded-md",
+              style: {
+                background: "linear-gradient(135deg, #f4f5f7, #b8bcc2 45%, #e9ebee 60%, #9ea3aa)",
+                boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.5), 0 1px 1px rgba(0,0,0,0.25)"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 opacity-60 mix-blend-overlay",
+                    style: {
+                      backgroundImage: "linear-gradient(110deg, #ff9ad5, #9be7ff, #b8ffb0, #ffe59a, #ff9ad5)",
+                      backgroundSize: "300% 100%",
+                      backgroundPosition: "var(--sheen-x, 50%) 50%"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 opacity-40",
+                    style: {
+                      backgroundImage: "radial-gradient(rgba(60,64,70,0.55) 0.8px, transparent 1px)",
+                      backgroundSize: "4px 4px",
+                      maskImage: "radial-gradient(ellipse 70% 60% at 50% 50%, #000 55%, transparent 75%)"
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 whitespace-nowrap font-mono text-xl font-medium tracking-[0.08em]", children: groups(card.number, card.network) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-1 flex items-center gap-6 text-xs", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums opacity-70", children: card.number.slice(0, 4) }),
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto mr-6 flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "text-[length:inherit] uppercase leading-[1.05] tracking-[0.08em] opacity-60",
+                style: { fontSize: 8 * 1.5 },
+                children: [
+                  "Expires",
+                  /* @__PURE__ */ jsx("br", {}),
+                  "End"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-base tabular-nums", children: card.expiry })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-auto flex items-end justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium uppercase tracking-[0.12em]", children: card.holder }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { textShadow: "none" }, children: /* @__PURE__ */ jsx(Network, { network: card.network, ink: m.ink }) })
+        ] })
+      ]
+    }
+  ) });
+}
+function Back({ card, width }) {
+  return /* @__PURE__ */ jsx(Plate, { card, width, children: /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col", children: [
+    /* @__PURE__ */ jsx("p", { className: "truncate px-5 pt-3 text-xs opacity-80", children: "For customer service, call +1 800 555 0142" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "mt-2 h-9 w-full",
+        style: {
+          background: "linear-gradient(180deg, #1a1a1c, #050506 60%, #1f1f22)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-center gap-2 px-5", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "h-8 flex-1 rounded-sm",
+          style: {
+            background: "repeating-linear-gradient(-8deg, #ffffff 0px, #ffffff 3px, #dfe7f3 3px, #dfe7f3 4px)"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "grid h-8 w-12 place-items-center rounded-sm bg-white font-mono text-sm italic text-zinc-900", children: card.cvv ?? "123" })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "mt-auto px-5 pb-4 text-xs leading-snug opacity-70", children: [
+      "Use of this card is subject to the cardholder agreement. If found, please return it to any ",
+      card.bank ?? "branch",
+      "."
+    ] })
+  ] }) });
+}
+var MetalCardStack = React.forwardRef(function MetalCardStack2({ cards = DEFAULT_CARDS, width = 320, onChange, className }, ref) {
+  const still = !!useReducedMotion();
+  const root = React.useRef(null);
+  React.useImperativeHandle(ref, () => root.current);
+  const els = React.useRef([]);
+  const order = React.useRef(cards.map((_, i) => i));
+  const busy = React.useRef(false);
+  const [front, setFront] = React.useState(0);
+  const [side, setSide] = React.useState("front");
+  const height = width / RATIO;
+  const n = cards.length;
+  const slot = (depth) => {
+    const d = Math.min(depth, VISIBLE - 1);
+    return {
+      x: 0,
+      y: -d * 18,
+      // Real depth, so a tilting card never cuts through the one behind it.
+      z: -d * 48,
+      scale: 1 - d * 0.06,
+      rotation: 0,
+      rotationX: 0,
+      rotationY: 0,
+      autoAlpha: depth < VISIBLE ? 1 : 0,
+      zIndex: 100 - depth
+    };
+  };
+  const shade = (el, depth, duration) => gsap.to(el.querySelector("[data-shade]"), {
+    opacity: Math.min(depth, VISIBLE - 1) * 0.14,
+    duration,
+    ease: "power3.out"
+  });
+  const flips = React.useRef([]);
+  const flipped = React.useRef([]);
+  const { contextSafe } = useGSAP(
+    () => {
+      order.current.forEach((i, depth) => {
+        const el = els.current[i];
+        if (!el) return;
+        gsap.set(el, slot(depth));
+        shade(el, depth, 0);
+      });
+    },
+    { scope: root, dependencies: [n, width] }
+  );
+  const settle = contextSafe((skip) => {
+    order.current.forEach((i, depth) => {
+      const el = els.current[i];
+      if (!el || i === skip) return;
+      shade(el, depth, still ? 0 : 0.55);
+      gsap.to(el, {
+        ...slot(depth),
+        duration: still ? 0 : 0.55,
+        ease: "power3.out",
+        overwrite: "auto"
+      });
+    });
+  });
+  const announce = () => {
+    const i = order.current[0];
+    setFront(i);
+    onChange?.(cards[i], i);
+  };
+  const sendBack = contextSafe((dir) => {
+    if (busy.current || n < 2) return;
+    busy.current = true;
+    const i = order.current[0];
+    const el = els.current[i];
+    order.current = [...order.current.slice(1), i];
+    settle(i);
+    const out = {
+      left: { x: -width * 0.95, y: -10, z: 40, rotation: -14, rotationY: -18 },
+      right: { x: width * 0.95, y: -10, z: 40, rotation: 14, rotationY: 18 },
+      up: { x: 10, y: -height * 1.05, z: 40, rotation: 4, rotationX: 28 },
+      down: { x: -10, y: height * 1.05, z: 40, rotation: -4, rotationX: -28 }
+    }[dir];
+    const back = slot(order.current.length - 1);
+    unflip(i);
+    shade(el, order.current.length - 1, still ? 0 : 0.8);
+    gsap.timeline({ onComplete: () => void (busy.current = false, announce()) }).to(el, { ...out, duration: still ? 0 : 0.32, ease: "power2.out" }).set(el, { zIndex: back.zIndex }).to(el, { ...back, duration: still ? 0 : 0.5, ease: "power3.out" });
+  });
+  const flip = contextSafe((i) => {
+    const f = flips.current[i];
+    if (!f || busy.current) return;
+    const to = !flipped.current[i];
+    flipped.current[i] = to;
+    setSide(to ? "back" : "front");
+    if (still) return void gsap.set(f, { rotationY: to ? 180 : 0 });
+    turn(f, to ? 180 : 0, 0.75, "power3.inOut");
+  });
+  const unflip = (i) => {
+    const f = flips.current[i];
+    if (!f || !flipped.current[i]) return;
+    flipped.current[i] = false;
+    setSide("front");
+    if (still) return void gsap.set(f, { rotationY: 0, z: 0 });
+    turn(f, 0, 0.5, "power3.out");
+  };
+  const turn = (f, rotationY, duration, ease) => {
+    const reach = width / 2;
+    const gap = 48 - 20;
+    gsap.to(f, {
+      rotationY,
+      duration,
+      ease,
+      overwrite: "auto",
+      onUpdate: () => {
+        const r = gsap.getProperty(f, "rotationY") * (Math.PI / 180);
+        gsap.set(f, { z: Math.max(0, reach * Math.abs(Math.sin(r)) - gap) });
+      }
+    });
+  };
+  const dragging = React.useRef(null);
+  const onDown = contextSafe((e) => {
+    if (busy.current || e.button !== 0) return;
+    dragging.current = {
+      x: e.clientX,
+      y: e.clientY,
+      t: performance.now(),
+      vx: 0,
+      vy: 0
+    };
+    e.currentTarget.setPointerCapture(e.pointerId);
+  });
+  const onMove = contextSafe((e) => {
+    const el = els.current[order.current[0]];
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const px = (e.clientX - r.left) / r.width;
+    const py = (e.clientY - r.top) / r.height;
+    el.style.setProperty(
+      "--sheen-x",
+      `${Math.max(0, Math.min(100, px * 100))}%`
+    );
+    el.style.setProperty(
+      "--sheen-y",
+      `${Math.max(0, Math.min(100, py * 100))}%`
+    );
+    const g = dragging.current;
+    if (!g) {
+      if (still || busy.current) return;
+      gsap.to(el, {
+        rotationY: (px - 0.5) * 14,
+        rotationX: -(py - 0.5) * 12,
+        duration: 0.5,
+        ease: "power2.out",
+        overwrite: "auto"
+      });
+      return;
+    }
+    const dx = e.clientX - g.x;
+    const dy = e.clientY - g.y;
+    const now = performance.now();
+    const dt = Math.max(1, now - g.t);
+    g.vx = dx / dt * 16;
+    g.vy = dy / dt * 16;
+    gsap.to(el, {
+      x: dx,
+      y: dy,
+      rotation: dx * 0.04,
+      rotationY: dx * 0.06,
+      rotationX: -dy * 0.06,
+      duration: 0.15,
+      ease: "power2.out",
+      overwrite: "auto"
+    });
+  });
+  const onUp = contextSafe((e) => {
+    const g = dragging.current;
+    dragging.current = null;
+    if (!g) return;
+    const dx = e.clientX - g.x;
+    const dy = e.clientY - g.y;
+    const horizontal = Math.abs(dx) >= Math.abs(dy);
+    const far = horizontal ? Math.abs(dx) > THROW || Math.abs(g.vx) > 12 : Math.abs(dy) > THROW * 0.8 || Math.abs(g.vy) > 12;
+    if (!far) {
+      settle();
+      if (Math.hypot(dx, dy) < 6) flip(order.current[0]);
+      return;
+    }
+    if (horizontal) sendBack(dx < 0 ? "left" : "right");
+    else sendBack(dy < 0 ? "up" : "down");
+  });
+  const onLeave = contextSafe(() => {
+    if (dragging.current || busy.current) return;
+    const el = els.current[order.current[0]];
+    if (el)
+      gsap.to(el, {
+        rotationX: 0,
+        rotationY: 0,
+        duration: 0.6,
+        ease: "power2.out"
+      });
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      role: "region",
+      "aria-roledescription": "card stack",
+      "aria-label": "Payment cards",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ")
+          e.preventDefault(), flip(order.current[0]);
+        else if (e.key === "ArrowLeft") e.preventDefault(), sendBack("left");
+        else if (e.key === "ArrowUp") e.preventDefault(), sendBack("up");
+        else if (e.key === "ArrowRight")
+          e.preventDefault(), sendBack("right");
+        else if (e.key === "ArrowDown") e.preventDefault(), sendBack("down");
+      },
+      className: cn(
+        "relative grid select-none place-items-center outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-4",
+        className
+      ),
+      style: { width: width + 120, height: height + 140, perspective: 1100 },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative cursor-grab touch-none active:cursor-grabbing",
+            style: { width, height, marginTop: 50, transformStyle: "preserve-3d" },
+            onPointerDown: onDown,
+            onPointerMove: onMove,
+            onPointerUp: onUp,
+            onPointerCancel: onUp,
+            onPointerLeave: onLeave,
+            children: cards.map((card, i) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: (el) => void (els.current[i] = el),
+                "aria-hidden": i !== front,
+                className: "absolute left-0 top-0 will-change-transform",
+                style: { transformStyle: "preserve-3d" },
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    ref: (el) => void (flips.current[i] = el),
+                    className: "relative",
+                    style: { width, height, transformStyle: "preserve-3d" },
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          "aria-hidden": true,
+                          className: "absolute inset-x-[3px] top-[3px] rounded-[18px] [backface-visibility:hidden]",
+                          style: {
+                            height,
+                            background: METALS[card.finish].edge,
+                            transform: "translateZ(-1px)"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-[18px] shadow-[0_2px_4px_rgba(0,0,0,0.18),0_24px_44px_-18px_rgba(0,0,0,0.55)] [backface-visibility:hidden]", children: /* @__PURE__ */ jsx(Front, { card, width }) }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "absolute inset-0 rounded-[18px] shadow-[0_2px_4px_rgba(0,0,0,0.18),0_24px_44px_-18px_rgba(0,0,0,0.55)] [backface-visibility:hidden]",
+                          style: { transform: "rotateY(180deg)" },
+                          children: /* @__PURE__ */ jsx(Back, { card, width })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          "data-shade": true,
+                          "aria-hidden": true,
+                          className: "pointer-events-none absolute inset-0 rounded-[18px] bg-black opacity-0",
+                          style: { transform: "translateZ(1px)" }
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              i
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: `${cards[front].bank ?? "Card"} ${cards[front].tier ?? ""} ending in ${cards[front].number.slice(-4)}${side === "back" ? ", showing the back" : ""}, ${front + 1} of ${n}` })
+      ]
+    }
+  );
+});
+
+export {
+  MetalCardStack
+};