@zkpassport/ui 0.16.1 → 0.17.0-beta.1

package/dist/styles.css

@@ -25,8 +25,10 @@
     background: var(--zkp-bg);
     color: var(--zkp-fg);
     font-family: ui-sans-serif, system-ui, sans-serif;
+    text-align: left;
     font-size: 14px;
     line-height: 1.4;
+    min-height: 460px;
   }
 
   .zkp-card[data-theme="dark"] {
@@ -64,6 +66,19 @@
     font: inherit;
     cursor: pointer;
   }
+  .zkp-card button:focus-visible,
+  .zkp-card a:focus-visible,
+  .zkp-card input:focus-visible {
+    outline: 2px solid var(--zkp-brand);
+    outline-offset: 2px;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .zkp-card,
+    .zkp-card * {
+      animation: none !important;
+      transition: none !important;
+    }
+  }
 
   /* Header */
   .zkp-header {
@@ -237,11 +252,15 @@
     opacity: 0.65;
   }
   .zkp-qr-slot[data-state="generating"] .zkp-qr,
+  .zkp-qr-slot[data-state="local-proving"] .zkp-qr,
+  .zkp-qr-slot[data-state="save-offer"] .zkp-qr,
   .zkp-qr-slot[data-state="success"] .zkp-qr,
   .zkp-qr-slot[data-state="error"] .zkp-qr {
     opacity: 0.35;
   }
   .zkp-qr-slot[data-state="generating"] .zkp-qr-logo,
+  .zkp-qr-slot[data-state="local-proving"] .zkp-qr-logo,
+  .zkp-qr-slot[data-state="save-offer"] .zkp-qr-logo,
   .zkp-qr-slot[data-state="success"] .zkp-qr-logo,
   .zkp-qr-slot[data-state="error"] .zkp-qr-logo {
     opacity: 0;
@@ -249,6 +268,8 @@
   .zkp-qr-slot[data-state="connecting"] .zkp-overlay,
   .zkp-qr-slot[data-state="scanned"] .zkp-overlay,
   .zkp-qr-slot[data-state="generating"] .zkp-overlay,
+  .zkp-qr-slot[data-state="local-proving"] .zkp-overlay,
+  .zkp-qr-slot[data-state="save-offer"] .zkp-overlay,
   .zkp-qr-slot[data-state="success"] .zkp-overlay,
   .zkp-qr-slot[data-state="error"] .zkp-overlay {
     display: block;
@@ -422,30 +443,305 @@
     overflow: hidden;
   }
 
-  /* Open-in-app deep link (mobile only, waiting state) */
+  /* Open-in-app deep link (mobile: primary action; shown via .zkp-open-app-block) */
   .zkp-open-app {
-    display: none;
-    margin: 16px 0 0;
-    padding: 12px 16px;
-    border-radius: 10px;
-    background: var(--zkp-accent);
-    color: var(--zkp-bg);
-    font-size: 15px;
-    font-weight: 600;
-    text-align: center;
-    text-decoration: none;
-    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.18);
-    transition: transform 150ms ease;
+    display: none !important;
+    margin: 16px 0 0 !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+    background: var(--zkp-brand) !important;
+    color: var(--zkp-bg) !important;
+    font-size: 13px !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.09em !important;
+    text-transform: uppercase !important;
+    text-align: center !important;
+    text-decoration: none !important;
+    transition: transform 150ms ease !important;
   }
   .zkp-open-app:active {
     transform: translateY(1px);
   }
-  @media (hover: none) and (pointer: coarse) {
-    .zkp-card[data-state="waiting"] .zkp-open-app {
-      display: block;
+  .zkp-open-app-block {
+    display: block !important;
+    margin-top: 0 !important;
+    width: 100% !important;
+    box-sizing: border-box !important;
+  }
+  /* Mobile-first waiting screen: open-app primary, QR behind a toggle */
+  .zkp-open-app-hero {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 12px;
+    padding: 8px 0 4px;
+  }
+  .zkp-open-app-loading {
+    display: flex;
+  }
+  .zkp-qr-reveal {
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    border: none !important;
+    background: none !important;
+    padding: 4px !important;
+    cursor: pointer !important;
+    font-size: 12.5px !important;
+    color: var(--zkp-muted) !important;
+    text-decoration: underline !important;
+    text-underline-offset: 3px !important;
+  }
+  .zkp-inapp-hint {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.5;
+    text-align: center;
+    color: var(--zkp-muted);
+  }
+
+  /* Intro screen */
+  .zkp-intro {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 16px;
+    margin-top: 18px;
+    animation: zkp-screen-in 240ms ease;
+  }
+  .zkp-screen {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    animation: zkp-screen-in 240ms ease;
+  }
+  @keyframes zkp-screen-in {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+  .zkp-intro > .zkp-divider {
+    margin: 2px 0;
+  }
+  /* Passport data-page style micro-label */
+  .zkp-eyebrow {
+    margin: 0 0 6px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--zkp-muted);
+    padding-bottom: 1rem;
+  }
+  .zkp-intro-request {
+    padding: 16px;
+    border: 1px solid var(--zkp-border);
+    border-radius: 12px;
+    background: var(--zkp-surface);
+  }
+  .zkp-skel-rows {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .zkp-skel-row {
+    height: 12px;
+    border-radius: 6px;
+    background: color-mix(in srgb, var(--zkp-muted) 25%, transparent);
+    animation: zkp-skel-pulse 1.4s ease-in-out infinite;
+  }
+  .zkp-skel-row-detail {
+    height: 9px;
+    margin-left: 25px;
+    opacity: 0.7;
+  }
+  @keyframes zkp-skel-pulse {
+    0%,
+    100% {
+      opacity: 0.55;
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+  .zkp-intro-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+  }
+  .zkp-intro-list li {
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  .zkp-intro-list-hint {
+    font-size: 12px;
+    line-height: 1.45;
+    color: var(--zkp-muted);
+    margin-top: 5px;
+    text-align: center;
+  }
+  .zkp-intro-item {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+  }
+  .zkp-intro-item-title {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--zkp-fg);
+  }
+  .zkp-intro-item-detail {
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--zkp-muted);
+  }
+  .zkp-intro-check {
+    flex: none;
+    display: inline-flex;
+    width: 15px;
+    height: 15px;
+    margin-top: 2px;
+    color: var(--zkp-brand);
+  }
+  .zkp-intro-check svg {
+    width: 100%;
+    height: 100%;
+  }
+  .zkp-intro-explainer {
+    margin: 0;
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--zkp-muted);
+  }
+  .zkp-intro-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: auto;
+    padding-top: 4px;
+    text-align: center;
+  }
+  .zkp-intro-footer .zkp-divider {
+    margin-bottom: 4px;
+  }
+  .zkp-intro-footer-note {
+    margin: 0;
+    font-size: 11.5px;
+    line-height: 1.55;
+    color: var(--zkp-muted);
+  }
+  /* Passport-label style privacy assurances */
+  .zkp-privacy-strip {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    font-size: 10.5px;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--zkp-brand);
+  }
+  .zkp-privacy-dot {
+    color: var(--zkp-muted);
+    letter-spacing: 0;
+  }
+  .zkp-intro-question {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 8px;
+    padding-top: 6px;
+  }
+  .zkp-chip-symbol {
+    width: 54px;
+    color: var(--zkp-brand);
+  }
+  .zkp-chip-symbol svg {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
+  .zkp-intro-question-hint {
+    margin: 0;
+    max-width: 340px;
+    font-size: 12.5px;
+    line-height: 1.45;
+    color: var(--zkp-muted);
+  }
+  .zkp-intro-question .zkp-intro-continue {
+    margin-top: 6px;
+  }
+
+  .zkp-intro-question-text {
+    margin: 4px 0 0;
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--zkp-fg);
+  }
+  .zkp-intro-continue {
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+    display: block !important;
+    width: 100% !important;
+    padding: 16px !important;
+    border: none !important;
+    border-radius: 8px !important;
+    background: var(--zkp-brand) !important;
+    color: var(--zkp-bg) !important;
+    font-size: 13px !important;
+    font-weight: 700 !important;
+    letter-spacing: 0.09em !important;
+    text-transform: uppercase !important;
+    text-align: center !important;
+    cursor: pointer !important;
+    transition:
+      filter 150ms ease,
+      transform 150ms ease !important;
+  }
+  .zkp-intro-continue:hover {
+    filter: brightness(1.08) !important;
+  }
+  .zkp-intro-continue:active {
+    transform: translateY(1px) !important;
+    filter: brightness(0.95) !important;
+  }
+  /* Dark --zkp-brand is a muted accent tint and makes the CTA read as
+     disabled; the primary action gets its own saturated fill */
+  .zkp-card[data-theme="dark"] .zkp-intro-continue {
+    background: #4a68dd !important;
+    color: #ffffff !important;
+  }
+  @media (prefers-color-scheme: dark) {
+    .zkp-card[data-theme="auto"] .zkp-intro-continue {
+      background: #4a68dd !important;
+      color: #ffffff !important;
     }
   }
 
+  .zkp-intro-link {
+    align-self: center !important;
+    padding: 4px 8px !important;
+    border: none !important;
+    background: transparent !important;
+    color: var(--zkp-muted) !important;
+    font-size: 13px !important;
+    text-decoration: underline !important;
+    cursor: pointer !important;
+  }
+
   /* Retry */
   .zkp-result-actions {
     display: flex;
@@ -551,3 +847,150 @@
     }
   }
 }
+
+@layer zkpassport {
+  /* "Verify with ZKPassport" button (opens the hosted popup).
+     Customize via CSS custom properties on the mount element or any ancestor:
+     --zkp-btn-bg/-fg/-border-color/-radius/-padding/-font/-font-size/-letter-spacing/
+     -text-transform, and --zkp-btn-success/-error for the verified and failed states.
+     Sizing hangs off --zkp-btn-font-size: the icon, gap and padding are all in em.
+
+     !important throughout: host resets (e.g. Tailwind preflight) are unlayered
+     and would otherwise strip these. */
+  .zkp-verify-button {
+    --zkp-bg: #ffffff;
+    --zkp-brand: #2139a3;
+    --zkp-border: #d3d9e8;
+    appearance: none !important;
+    -webkit-appearance: none !important;
+    -webkit-tap-highlight-color: transparent !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    padding: var(--zkp-btn-padding, 0.8667em 1.6em) !important;
+    border: 1px solid var(--zkp-btn-border-color, var(--zkp-border)) !important;
+    border-radius: var(--zkp-btn-radius, 8px) !important;
+    background: var(--zkp-btn-bg, var(--zkp-bg)) !important;
+    color: var(--zkp-btn-fg, var(--zkp-brand)) !important;
+    font-family: var(
+      --zkp-btn-font,
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      sans-serif
+    ) !important;
+    font-size: var(--zkp-btn-font-size, 15px) !important;
+    white-space: nowrap !important;
+    font-weight: 600 !important;
+    letter-spacing: var(--zkp-btn-letter-spacing, 0.04em) !important;
+    text-transform: var(--zkp-btn-text-transform, none) !important;
+    line-height: 1.2 !important;
+    cursor: pointer !important;
+    transition:
+      filter 150ms ease,
+      transform 150ms ease;
+  }
+  .zkp-verify-wrap[data-theme="dark"] .zkp-verify-button {
+    --zkp-bg: #0f172a;
+    --zkp-brand: #93b0f5;
+    --zkp-border: #334155;
+  }
+  @media (prefers-color-scheme: dark) {
+    .zkp-verify-wrap[data-theme="auto"] .zkp-verify-button {
+      --zkp-bg: #0f172a;
+      --zkp-brand: #93b0f5;
+      --zkp-border: #334155;
+    }
+  }
+  .zkp-verify-button:hover:not(:disabled) {
+    filter: brightness(0.97);
+  }
+  .zkp-verify-button:active:not(:disabled) {
+    transform: translateY(1px);
+    filter: brightness(0.95);
+  }
+  /* Both states share one grid cell, so the button is as wide as the longer of the two
+     and never resizes when it switches to "Verified" */
+  .zkp-verify-content {
+    display: grid !important;
+    grid-template-areas: "state" !important;
+    justify-items: center !important;
+  }
+  .zkp-verify-state {
+    grid-area: state !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 0.7333em !important;
+  }
+  .zkp-verify-button:not([data-status="success"]) .zkp-verify-state-success,
+  .zkp-verify-button[data-status="success"] .zkp-verify-state-default {
+    visibility: hidden !important;
+  }
+  .zkp-verify-button-mark {
+    position: relative;
+    display: inline-flex;
+    width: 1.3333em;
+    height: 1.3333em;
+    flex: none;
+  }
+  .zkp-verify-button-mark svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+  /* !important: unlayered host resets (Tailwind preflight sets border-width: 0
+     on all ::after elements) would otherwise erase the ring */
+  .zkp-verify-button[data-status="in-progress"] .zkp-verify-button-mark::after {
+    content: "" !important;
+    position: absolute !important;
+    inset: -0.3333em !important;
+    border-radius: 50% !important;
+    border: 0.1333em solid color-mix(in srgb, currentColor 35%, transparent) !important;
+    border-top-color: currentColor !important;
+    box-sizing: border-box !important;
+    animation: zkp-spinner-rotate 0.9s linear infinite !important;
+  }
+  .zkp-verify-wrap {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+    --zkp-success: #15803d;
+    --zkp-error: #dc2626;
+  }
+  .zkp-verify-wrap[data-theme="dark"] {
+    --zkp-success: #4ade80;
+    --zkp-error: #f87171;
+  }
+  @media (prefers-color-scheme: dark) {
+    .zkp-verify-wrap[data-theme="auto"] {
+      --zkp-success: #4ade80;
+      --zkp-error: #f87171;
+    }
+  }
+  .zkp-verify-error {
+    margin: 0 !important;
+    font-family: ui-sans-serif, system-ui, sans-serif !important;
+    font-size: 12.5px !important;
+    line-height: 1.4 !important;
+    color: var(--zkp-btn-error, var(--zkp-error)) !important;
+  }
+  .zkp-verify-button:disabled {
+    cursor: default !important;
+    transform: none !important;
+  }
+  /* Only the waiting state is dimmed; success is an outcome, not an unavailable button */
+  .zkp-verify-button[data-status="in-progress"] {
+    opacity: 0.65 !important;
+    filter: saturate(0.75) !important;
+  }
+  .zkp-verify-button[data-status="success"] {
+    color: var(--zkp-btn-success, var(--zkp-success)) !important;
+  }
+
+  @keyframes zkp-spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zkpassport/ui",
-  "version": "0.16.1",
+  "version": "0.17.0-beta.1",
   "description": "Drop-in QR verification card for ZKPassport. Vanilla JS by default; React component available at @zkpassport/ui/react.",
   "author": "ZKPassport",
   "license": "Apache-2.0",
@@ -34,20 +34,41 @@
         "default": "./dist/cjs/react.cjs"
       }
     },
+    "./button": {
+      "import": {
+        "types": "./dist/esm/button.d.ts",
+        "default": "./dist/esm/button.js"
+      },
+      "require": {
+        "types": "./dist/cjs/button.d.cts",
+        "default": "./dist/cjs/button.cjs"
+      }
+    },
+    "./react-button": {
+      "import": {
+        "types": "./dist/esm/react-button.d.ts",
+        "default": "./dist/esm/react-button.js"
+      },
+      "require": {
+        "types": "./dist/cjs/react-button.d.cts",
+        "default": "./dist/cjs/react-button.cjs"
+      }
+    },
     "./styles.css": "./dist/styles.css"
   },
   "scripts": {
     "build": "tsup --config tsup.config.ts",
     "dev:build": "DEV_BUILD=true bun run build",
     "clean": "rimraf dist tsconfig.tsbuildinfo",
-    "test": "echo 'no tests yet'",
-    "check": "tsc --noEmit && prettier -c src && eslint src --ext .ts,.tsx",
-    "format": "prettier -c -w src && eslint src --ext .ts,.tsx --fix",
-    "validate-package": "../../scripts/validate-package.sh --exclude-entrypoints ./styles.css",
+    "test": "bun test",
+    "check": "tsc --noEmit && prettier -c src tests && eslint src tests --ext .ts,.tsx",
+    "format": "prettier -c -w src tests && eslint src tests --ext .ts,.tsx --fix",
+    "validate-package": "../../scripts/validate-package.sh --exclude-entrypoints ./styles.css && node ../../scripts/check-dts-self-contained.mjs",
     "prepublishOnly": "../../scripts/prepublish.sh"
   },
   "files": [
-    "dist"
+    "dist",
+    "!dist/hosted*"
   ],
   "sideEffects": [
     "*.css"
@@ -61,14 +82,9 @@
     "verification",
     "widget"
   ],
-  "dependencies": {
-    "@zkpassport/sdk": "0.16.1",
-    "qrcode": "^1.5.4"
-  },
   "peerDependencies": {
     "react": ">=18",
-    "react-dom": ">=18",
-    "typescript": "^5.0.0"
+    "react-dom": ">=18"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -82,7 +98,9 @@
     "@types/qrcode": "^1.5.5",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "preact": "^10.22.0",
+    "@zkpassport/sdk": "0.17.0-beta.1",
+    "preact": "10.29.2",
+    "qrcode": "1.5.4",
     "react": "^18.3.0",
     "react-dom": "^18.3.0"
   },

package/dist/cjs/types-DV8w93iS.d.cts

@@ -1,31 +0,0 @@
-import { ZKPassport, QueryBuilder, QueryBuilderResult } from '@zkpassport/sdk';
-
-type SdkCallback<K extends keyof QueryBuilderResult> = QueryBuilderResult[K] extends (cb: infer C) => void ? C : never;
-type SdkRequestProps = Omit<Parameters<ZKPassport["request"]>[0], "projectID" | "topicOverride" | "keyPairOverride" | "cloudProverUrl" | "bridgeUrl">;
-type ZKPassportQRCodeDisplayOptions = {
-    header?: boolean;
-    steps?: boolean;
-    appLinks?: boolean;
-};
-type ZKPassportQRCodeOptions = SdkRequestProps & {
-    domain?: string;
-    theme?: "light" | "dark" | "auto";
-    display?: ZKPassportQRCodeDisplayOptions;
-    query: (queryBuilder: QueryBuilder) => QueryBuilderResult;
-    onReady?: () => void;
-    onRetryClicked?: () => void;
-    onBridgeConnect?: SdkCallback<"onBridgeConnect">;
-    onRequestReceived?: SdkCallback<"onRequestReceived">;
-    onGeneratingProof?: SdkCallback<"onGeneratingProof">;
-    onProofGenerated?: SdkCallback<"onProofGenerated">;
-    onResult?: SdkCallback<"onResult">;
-    onReject?: SdkCallback<"onReject">;
-    onError?: SdkCallback<"onError">;
-};
-type QRCardHandle = {
-    update(next: ZKPassportQRCodeOptions): void;
-    retry(): void;
-    unmount(): void;
-};
-
-export type { QRCardHandle as Q, ZKPassportQRCodeOptions as Z, ZKPassportQRCodeDisplayOptions as a };

package/dist/esm/types-DV8w93iS.d.ts

@@ -1,31 +0,0 @@
-import { ZKPassport, QueryBuilder, QueryBuilderResult } from '@zkpassport/sdk';
-
-type SdkCallback<K extends keyof QueryBuilderResult> = QueryBuilderResult[K] extends (cb: infer C) => void ? C : never;
-type SdkRequestProps = Omit<Parameters<ZKPassport["request"]>[0], "projectID" | "topicOverride" | "keyPairOverride" | "cloudProverUrl" | "bridgeUrl">;
-type ZKPassportQRCodeDisplayOptions = {
-    header?: boolean;
-    steps?: boolean;
-    appLinks?: boolean;
-};
-type ZKPassportQRCodeOptions = SdkRequestProps & {
-    domain?: string;
-    theme?: "light" | "dark" | "auto";
-    display?: ZKPassportQRCodeDisplayOptions;
-    query: (queryBuilder: QueryBuilder) => QueryBuilderResult;
-    onReady?: () => void;
-    onRetryClicked?: () => void;
-    onBridgeConnect?: SdkCallback<"onBridgeConnect">;
-    onRequestReceived?: SdkCallback<"onRequestReceived">;
-    onGeneratingProof?: SdkCallback<"onGeneratingProof">;
-    onProofGenerated?: SdkCallback<"onProofGenerated">;
-    onResult?: SdkCallback<"onResult">;
-    onReject?: SdkCallback<"onReject">;
-    onError?: SdkCallback<"onError">;
-};
-type QRCardHandle = {
-    update(next: ZKPassportQRCodeOptions): void;
-    retry(): void;
-    unmount(): void;
-};
-
-export type { QRCardHandle as Q, ZKPassportQRCodeOptions as Z, ZKPassportQRCodeDisplayOptions as a };