@fanfare-io/fanfare-sdk-react 0.22.0 → 0.23.0

package/dist/styles/theme.css

@@ -240,8 +240,8 @@
     --ff-otp-shadow-focus: var(--ff-otp-shadow);
     --ff-otp-shadow-focus-error: var(--ff-otp-shadow-focus);
 
-    /* Product selector row: the box a row draws and the square its thumbnail
-     * occupies inside it. */
+    /* Selector rows (a product, a payment method): the box a row draws and the
+     * square a product thumbnail occupies inside it. */
     --ff-row-gap: 0.75rem;
     --ff-row-padding: 0.75rem;
     --ff-row-radius: 0.375rem;
@@ -487,6 +487,20 @@
     line-height: 1.4;
   }
 
+  /**
+   * The payment panel's section heading reads at body scale under its badge
+   * and hero stat. A retry moves focus to it so a screen reader starts from
+   * the explanation; it is not a control, and the Retry badge already marks
+   * the state, so the programmatic focus draws no ring.
+   */
+  .fanfare-themed [data-slot="checkout-title"] {
+    color: var(--ff-color-foreground);
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    outline: none;
+  }
+
   .fanfare-themed [data-slot="panel-body"],
   .fanfare-themed [data-slot="panel-stack"] {
     gap: var(--ff-panel-gap);
@@ -536,12 +550,132 @@
     box-shadow: var(--ff-loading-shadow);
   }
 
-  .fanfare-themed [data-slot="product-selector-row"] {
+  .fanfare-themed [data-slot="product-selector-row"],
+  .fanfare-themed [data-slot="payment-method-row"] {
     gap: var(--ff-row-gap);
     padding: var(--ff-row-padding);
     border-radius: var(--ff-row-radius);
   }
 
+  /**
+   * A payment method row draws the product selector's row, so a payment choice
+   * reads as the same kind of choice as the item it pays for. The native radio
+   * stays in the row: it carries the group's keyboard model, and the row takes
+   * its checked and focus states from it.
+   */
+  .fanfare-themed [data-slot="payment-method-row"] {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    cursor: pointer;
+    border: 1px solid color-mix(in oklab, var(--ff-color-border) 40%, transparent);
+    background-color: var(--ff-color-background);
+    transition:
+      background-color 150ms,
+      border-color 150ms,
+      box-shadow 150ms;
+  }
+
+  @media (hover: hover) {
+    .fanfare-themed [data-slot="payment-method-row"]:hover {
+      background-color: var(--ff-color-secondary);
+    }
+  }
+
+  .fanfare-themed [data-slot="payment-method-row"]:has(:checked) {
+    border-color: var(--ff-color-foreground);
+    box-shadow: inset 0 0 0 1px var(--ff-color-foreground);
+  }
+
+  .fanfare-themed [data-slot="payment-method-row"]:has(:focus-visible) {
+    outline: 2px solid var(--ff-color-primary);
+    outline-offset: 2px;
+  }
+
+  .fanfare-themed [data-slot="payment-method-row"] > input {
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    outline: none;
+    accent-color: var(--ff-color-foreground);
+  }
+
+  .fanfare-themed [data-slot="payment-method-row"] > svg {
+    flex-shrink: 0;
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--ff-color-muted);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /**
+   * The card field's frame draws the variant's text input around Stripe's
+   * iframe. Focus and validity live inside that iframe, where no selector
+   * reaches, so the element's own events publish them on the frame.
+   */
+  .fanfare-themed [data-fanfare-field="stripe-card-frame"][data-framed] {
+    padding: 0.625rem 0.75rem;
+    border: 1px solid var(--ff-color-border);
+    border-radius: 0.375rem;
+    background-color: var(--ff-color-background);
+    transition:
+      border-color 200ms,
+      box-shadow 200ms,
+      background-color 200ms;
+  }
+
+  .fanfare-themed [data-fanfare-field="stripe-card-frame"][data-focused] {
+    border-color: var(--ff-color-primary);
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--ff-color-primary) 20%, transparent);
+  }
+
+  .fanfare-themed[data-fanfare-variant="retro"] [data-fanfare-field="stripe-card-frame"][data-framed] {
+    border: 3px solid var(--ff-color-foreground);
+    border-radius: 0;
+    box-shadow: inset 3px 3px 0 var(--ff-color-secondary);
+  }
+
+  .fanfare-themed[data-fanfare-variant="retro"] [data-fanfare-field="stripe-card-frame"][data-focused] {
+    border-color: var(--ff-color-primary);
+    box-shadow: inset 3px 3px 0 var(--ff-color-primary);
+  }
+
+  .fanfare-themed[data-fanfare-variant="rounded"] [data-fanfare-field="stripe-card-frame"][data-framed] {
+    border-color: color-mix(in oklab, var(--ff-color-foreground) 12%, transparent);
+    border-radius: 0.75rem;
+    background-color: color-mix(in oklch, var(--ff-color-foreground) 3%, var(--ff-color-background));
+    box-shadow: var(--ff-input-shadow);
+  }
+
+  .fanfare-themed[data-fanfare-variant="rounded"] [data-fanfare-field="stripe-card-frame"][data-focused] {
+    border-color: color-mix(in oklab, var(--ff-color-primary) 50%, transparent);
+    background-color: var(--ff-color-background);
+    box-shadow: var(--ff-input-shadow-focus);
+  }
+
+  .fanfare-themed[data-fanfare-variant="clean"] [data-fanfare-field="stripe-card-frame"][data-framed] {
+    padding-inline: 0;
+    border-width: 0 0 1px;
+    border-color: color-mix(in oklab, var(--ff-color-foreground) 20%, transparent);
+    border-radius: 0;
+    background-color: transparent;
+  }
+
+  .fanfare-themed[data-fanfare-variant="clean"] [data-fanfare-field="stripe-card-frame"][data-focused] {
+    border-color: var(--ff-color-primary);
+    box-shadow: none;
+  }
+
+  /* Stated after the variants, at their specificity, so every variant shows it. */
+  .fanfare-themed [data-fanfare-field="stripe-card-frame"][data-framed][data-invalid] {
+    border-color: var(--ff-color-danger);
+  }
+
   .fanfare-themed [data-slot="product-thumb"] {
     width: var(--ff-row-thumb-size);
     height: var(--ff-row-thumb-size);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fanfare-io/fanfare-sdk-react",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "React adapter for Fanfare SDK",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -43,8 +43,8 @@
     "nanostores": "^1.1.0",
     "tailwind-merge": "^2.6.0",
     "valibot": "^1.1.0",
-    "@fanfare-io/fanfare-sdk-core": "0.22.0",
-    "@fanfare-io/fanfare-sdk-i18n": "0.22.0"
+    "@fanfare-io/fanfare-sdk-core": "0.23.0",
+    "@fanfare-io/fanfare-sdk-i18n": "0.23.0"
   },
   "devDependencies": {
     "@iconify-json/heroicons": "^1.2.3",
@@ -90,8 +90,8 @@
     "vite-plugin-dts": "^4.5.4",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^5.0.0",
-    "@fanfare-io/fanfare-sdk-core": "0.22.0",
-    "@fanfare-io/fanfare-sdk-solid": "0.22.0"
+    "@fanfare-io/fanfare-sdk-core": "0.23.0",
+    "@fanfare-io/fanfare-sdk-solid": "0.23.0"
   },
   "sideEffects": [
     "**/*.css"
@@ -109,7 +109,7 @@
     {
       "name": "React adapter",
       "path": "dist/index.js",
-      "limit": "70 KB",
+      "limit": "71 KB",
       "ignore": [
         "react",
         "react-dom",