@coincircuit/checkout 0.4.0 → 0.4.2

package/dist/react.cjs

@@ -69,6 +69,206 @@ function createMessageListener(allowedOrigin, handlers) {
   return () => window.removeEventListener("message", onMessage);
 }
 
+// src/overlay-styles.ts
+var OVERLAY_ID = "coincircuit-checkout-overlay";
+var OVERLAY_STYLES = `
+  #${OVERLAY_ID} {
+    --cc-surface: #fafafa;
+    --cc-foreground: #171717;
+    --cc-muted: #666;
+    --cc-edge: rgba(255, 255, 255, 0.85);
+    --cc-control: rgba(250, 250, 250, 0.88);
+    --cc-track: rgba(0, 0, 0, 0.1);
+    --cc-accent: oklch(0.52 0.22 255);
+    position: fixed;
+    inset: 0;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 24px 64px;
+    background: rgba(12, 14, 18, 0.42);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    color: var(--cc-foreground);
+    opacity: 0;
+    transition: opacity 200ms ease;
+  }
+  #${OVERLAY_ID}[data-theme="dark"] {
+    --cc-surface: #111216;
+    --cc-foreground: #f5f5f5;
+    --cc-muted: #aaa;
+    --cc-edge: rgba(255, 255, 255, 0.18);
+    --cc-control: rgba(28, 29, 33, 0.9);
+    --cc-track: rgba(255, 255, 255, 0.14);
+    --cc-accent: oklch(0.72 0.29 263.25);
+    color-scheme: dark;
+  }
+  #${OVERLAY_ID}, #${OVERLAY_ID} * {
+    box-sizing: border-box;
+  }
+  #${OVERLAY_ID}.cc-visible {
+    opacity: 1;
+  }
+  #${OVERLAY_ID} .cc-modal {
+    position: relative;
+    width: 100%;
+    max-width: 740px;
+    height: min(900px, calc(100vh - 48px));
+    height: min(900px, calc(100dvh - 48px));
+    border: 1px solid var(--cc-edge);
+    border-radius: 30px;
+    background: var(--cc-surface);
+    box-shadow: 0 32px 100px -24px rgba(0, 0, 0, 0.38);
+    transform: translateY(8px) scale(0.99);
+    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  #${OVERLAY_ID}.cc-visible .cc-modal {
+    transform: translateY(0) scale(1);
+  }
+  #${OVERLAY_ID} .cc-frame {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: inherit;
+    background: var(--cc-surface);
+  }
+  #${OVERLAY_ID} .cc-close {
+    position: absolute;
+    top: 0;
+    right: -56px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    margin: 0;
+    padding: 0;
+    border: 1px solid var(--cc-edge);
+    border-radius: 50%;
+    background: var(--cc-control);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    color: var(--cc-foreground);
+    cursor: pointer;
+    touch-action: manipulation;
+    transition: background-color 160ms ease, transform 160ms ease;
+  }
+  #${OVERLAY_ID} .cc-close:hover {
+    background: var(--cc-surface);
+  }
+  #${OVERLAY_ID} .cc-close:active {
+    transform: scale(0.96);
+  }
+  #${OVERLAY_ID} .cc-close:focus-visible {
+    outline: 2px solid var(--cc-accent);
+    outline-offset: 4px;
+  }
+  #${OVERLAY_ID} .cc-close svg {
+    display: block;
+    width: 18px;
+    height: 18px;
+    pointer-events: none;
+  }
+  #${OVERLAY_ID} iframe {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 200ms ease;
+  }
+  #${OVERLAY_ID} .cc-ready iframe {
+    opacity: 1;
+    visibility: visible;
+  }
+  #${OVERLAY_ID} .cc-spinner {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    background: var(--cc-surface);
+    color: var(--cc-muted);
+    font-size: 14px;
+    line-height: 1.5;
+    transition: opacity 200ms ease;
+  }
+  #${OVERLAY_ID} .cc-spinner-ring {
+    width: 32px;
+    height: 32px;
+    border: 2px solid var(--cc-track);
+    border-top-color: var(--cc-accent);
+    border-radius: 50%;
+    animation: cc-spin 800ms linear infinite;
+  }
+  #${OVERLAY_ID} .cc-ready .cc-spinner {
+    opacity: 0;
+    pointer-events: none;
+  }
+  @keyframes cc-spin { to { transform: rotate(360deg); } }
+  @media (max-width: 720px) {
+    #${OVERLAY_ID} {
+      padding: 0;
+      background: var(--cc-surface);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+    #${OVERLAY_ID} .cc-modal {
+      max-width: none;
+      height: 100vh;
+      height: 100dvh;
+      padding-top: calc(56px + env(safe-area-inset-top, 0px));
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      transform: none;
+    }
+    #${OVERLAY_ID} .cc-close {
+      top: calc(6px + env(safe-area-inset-top, 0px));
+      right: max(12px, env(safe-area-inset-right, 0px));
+      border-color: var(--cc-track);
+      background: transparent;
+      box-shadow: none;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    #${OVERLAY_ID}, #${OVERLAY_ID} * {
+      animation: none !important;
+      transition: none !important;
+    }
+    #${OVERLAY_ID} .cc-modal, #${OVERLAY_ID} .cc-close:active {
+      transform: none;
+    }
+  }
+  @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
+    #${OVERLAY_ID} {
+      background: rgba(12, 14, 18, 0.85);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+    #${OVERLAY_ID} .cc-close {
+      background: var(--cc-surface);
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+  @media (prefers-contrast: more) {
+    #${OVERLAY_ID} .cc-modal, #${OVERLAY_ID} .cc-close {
+      border-color: var(--cc-foreground);
+    }
+  }
+`;
+
 // src/utils.ts
 var DEFAULT_BASE_URL = "https://checkout.coincircuit.io";
 var ALLOWED_BASE_URLS = [
@@ -99,154 +299,138 @@ function extractOrigin(baseUrl) {
     return baseUrl;
   }
 }
-var OVERLAY_ID = "coincircuit-checkout-overlay";
 var STYLES_ID = "coincircuit-checkout-styles";
+var overlayStates = /* @__PURE__ */ new WeakMap();
 function injectStyles() {
   if (document.getElementById(STYLES_ID)) return;
   const style = document.createElement("style");
   style.id = STYLES_ID;
-  style.textContent = `
-    #${OVERLAY_ID} {
-      position: fixed;
-      inset: 0;
-      z-index: 999999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba(0, 0, 0, 0.6);
-      backdrop-filter: blur(4px);
-      opacity: 0;
-      transition: opacity 0.2s ease;
-    }
-    #${OVERLAY_ID}.cc-visible {
-      opacity: 1;
-    }
-    #${OVERLAY_ID} .cc-modal {
-      position: relative;
-      width: min(600px, 96vw);
-      max-width: 600px;
-      height: min(88vh, 800px);
-      border-radius: 16px;
-      background: #fff;
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
-      opacity: 0;
-      transform: scale(0.96);
-      transition: opacity 0.25s ease, transform 0.25s ease;
-    }
-    #${OVERLAY_ID} .cc-modal.cc-ready {
-      opacity: 1;
-      transform: scale(1);
-    }
-    #${OVERLAY_ID} .cc-close {
-      position: fixed;
-      top: 16px;
-      right: 16px;
-      z-index: 1000000;
-      width: 36px;
-      height: 36px;
-      border: none;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.15);
-      backdrop-filter: blur(8px);
-      color: #fff;
-      font-size: 20px;
-      line-height: 1;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: background 0.15s, transform 0.15s;
-    }
-    #${OVERLAY_ID} .cc-close:hover {
-      background: rgba(255, 255, 255, 0.25);
-      transform: scale(1.1);
-    }
-    #${OVERLAY_ID} iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-      display: block;
-    }
-    #${OVERLAY_ID} .cc-spinner {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 1;
-      transition: opacity 0.2s;
-    }
-    #${OVERLAY_ID} .cc-spinner div {
-      width: 36px;
-      height: 36px;
-      border: 3px solid rgba(255, 255, 255, 0.3);
-      border-top-color: #fff;
-      border-radius: 50%;
-      animation: cc-spin 0.8s linear infinite;
-    }
-    @keyframes cc-spin { to { transform: rotate(360deg); } }
-    @media (max-width: 720px) {
-      #${OVERLAY_ID} .cc-modal {
-        width: 100%;
-        max-width: 100%;
-        height: 100dvh;
-        border-radius: 0;
-      }
-    }
-  `;
+  style.textContent = OVERLAY_STYLES;
   document.head.appendChild(style);
 }
-function createOverlay(checkoutUrl, onCloseClick) {
+function createOverlay(checkoutUrl, onCloseClick, theme = "light") {
   injectStyles();
   const overlay = document.createElement("div");
   overlay.id = OVERLAY_ID;
+  overlay.dataset.theme = theme;
+  let dismissed = false;
+  const dismiss = () => {
+    if (dismissed) return;
+    dismissed = true;
+    onCloseClick();
+  };
   overlay.addEventListener("click", (e) => {
-    if (e.target === overlay) onCloseClick();
+    if (e.target === overlay) dismiss();
   });
+  const isTopmostOverlay = () => {
+    const overlays = document.querySelectorAll(`#${OVERLAY_ID}.cc-visible`);
+    return overlays[overlays.length - 1] === overlay;
+  };
   const onKeydown = (e) => {
-    if (e.key === "Escape") onCloseClick();
+    if (!isTopmostOverlay()) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      dismiss();
+    }
+    if (e.key === "Tab" && e.shiftKey && document.activeElement === closeBtn) {
+      e.preventDefault();
+      if (modal.classList.contains("cc-ready")) iframe.focus();
+    }
+  };
+  const onFocus = (e) => {
+    if (isTopmostOverlay() && !overlay.contains(e.target)) closeBtn.focus();
   };
   document.addEventListener("keydown", onKeydown);
-  overlay.dataset.keydownAttached = "true";
-  overlay._removeKeydown = () => document.removeEventListener("keydown", onKeydown);
+  document.addEventListener("focusin", onFocus);
+  overlayStates.set(overlay, {
+    removeListeners: () => {
+      document.removeEventListener("keydown", onKeydown);
+      document.removeEventListener("focusin", onFocus);
+    },
+    previousFocus: document.activeElement instanceof HTMLElement ? document.activeElement : null,
+    previousOverflow: document.body.style.overflow,
+    previousPaddingRight: document.body.style.paddingRight
+  });
   const modal = document.createElement("div");
   modal.className = "cc-modal";
+  modal.setAttribute("role", "dialog");
+  modal.setAttribute("aria-modal", "true");
+  modal.setAttribute("aria-label", "CoinCircuit checkout");
+  const frame = document.createElement("div");
+  frame.className = "cc-frame";
+  frame.setAttribute("aria-busy", "true");
   const spinner = document.createElement("div");
   spinner.className = "cc-spinner";
+  spinner.setAttribute("role", "status");
   const spinnerRing = document.createElement("div");
+  spinnerRing.className = "cc-spinner-ring";
+  spinnerRing.setAttribute("aria-hidden", "true");
+  const spinnerLabel = document.createElement("span");
+  spinnerLabel.textContent = "Loading checkout";
   spinner.appendChild(spinnerRing);
+  spinner.appendChild(spinnerLabel);
   const iframe = document.createElement("iframe");
   iframe.src = checkoutUrl;
   iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox");
   iframe.setAttribute("referrerpolicy", "strict-origin-when-cross-origin");
   iframe.setAttribute("title", "CoinCircuit Checkout");
   iframe.setAttribute("allow", "payment");
+  iframe.tabIndex = -1;
   const closeBtn = document.createElement("button");
   closeBtn.className = "cc-close";
+  closeBtn.type = "button";
   closeBtn.setAttribute("aria-label", "Close checkout");
-  closeBtn.textContent = "\u2715";
-  closeBtn.addEventListener("click", onCloseClick);
-  modal.appendChild(iframe);
-  overlay.appendChild(spinner);
+  const closeIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  closeIcon.setAttribute("viewBox", "0 0 24 24");
+  closeIcon.setAttribute("aria-hidden", "true");
+  closeIcon.setAttribute("fill", "none");
+  closeIcon.setAttribute("stroke", "currentColor");
+  closeIcon.setAttribute("stroke-width", "1.75");
+  closeIcon.setAttribute("stroke-linecap", "round");
+  const closePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  closePath.setAttribute("d", "M6 6l12 12M18 6L6 18");
+  closeIcon.appendChild(closePath);
+  closeBtn.appendChild(closeIcon);
+  closeBtn.addEventListener("click", dismiss);
+  frame.appendChild(iframe);
+  frame.appendChild(spinner);
+  modal.appendChild(closeBtn);
+  modal.appendChild(frame);
   overlay.appendChild(modal);
-  overlay.appendChild(closeBtn);
   return { overlay, iframe };
 }
 function showOverlay(overlay) {
   document.body.appendChild(overlay);
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+  if (scrollbarWidth > 0) {
+    const padding = parseFloat(window.getComputedStyle(document.body).paddingRight) || 0;
+    document.body.style.paddingRight = `${padding + scrollbarWidth}px`;
+  }
   document.body.style.overflow = "hidden";
   overlay.offsetHeight;
   overlay.classList.add("cc-visible");
+  overlay.querySelector(".cc-close")?.focus({ preventScroll: true });
 }
 function removeOverlay(overlay) {
-  overlay._removeKeydown?.();
+  const state = overlayStates.get(overlay);
+  state?.removeListeners();
   overlay.classList.remove("cc-visible");
-  document.body.style.overflow = "";
+  overlay.style.pointerEvents = "none";
+  overlay.inert = true;
+  if (state) {
+    document.body.style.overflow = state.previousOverflow;
+    document.body.style.paddingRight = state.previousPaddingRight;
+    state.previousFocus?.focus({ preventScroll: true });
+    overlayStates.delete(overlay);
+  }
   setTimeout(() => {
     overlay.parentNode?.removeChild(overlay);
   }, 200);
 }
 function hideSpinner(overlay) {
+  overlay.querySelector(".cc-frame")?.setAttribute("aria-busy", "false");
+  const iframe = overlay.querySelector("iframe");
+  if (iframe) iframe.tabIndex = 0;
   const spinner = overlay.querySelector(".cc-spinner");
   if (spinner) {
     spinner.style.opacity = "0";
@@ -324,14 +508,14 @@ var CoinCircuitCheckout = class {
     const { overlay, iframe } = createOverlay(checkoutUrl, () => {
       options.onClose?.();
       this.close();
-    });
+    }, options.theme);
     this.overlay = overlay;
     this.loadTimeout = setTimeout(() => {
       showErrorToast(
         "Checkout failed to load."
       );
       this.close();
-    }, 15e3);
+    }, 3e4);
     iframe.addEventListener("error", () => {
       if (this.loadTimeout) clearTimeout(this.loadTimeout);
       console.error(`[CoinCircuit] iframe error after ${Math.round(performance.now() - this.openedAt)}ms`);

package/dist/react.js

@@ -1,6 +1,6 @@
 import {
   CoinCircuitCheckout
-} from "./chunk-RJ3FMO5K.js";
+} from "./chunk-FKC27TV4.js";
 
 // src/react.ts
 import { useRef, useCallback, useEffect, createElement } from "react";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coincircuit/checkout",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Embed CoinCircuit checkout in your site via iframe, with vanilla JS and React support",
   "type": "module",
   "main": "./dist/index.js",