@coinflowlabs/vue 1.17.0 → 1.18.0

package/dist/components/card-form/CoinflowCardFormV2.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { CoinflowEnvs, MerchantTheme } from '../../lib/common';
+import { CardFormVariant, CoinflowEnvs, MerchantTheme } from '../../lib/common';
 export interface CardFormV2TokenResponse {
     token: string;
     expMonth?: string;
@@ -14,7 +14,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             merchantId: string;
             env?: CoinflowEnvs;
             theme?: MerchantTheme;
-            variant: "card-form" | "card-number-form" | "cvv-form";
+            variant: CardFormVariant;
             token?: string;
             onLoad?: () => void;
         }>;
@@ -28,13 +28,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
             merchantId: string;
             env?: CoinflowEnvs;
             theme?: MerchantTheme;
-            variant: "card-form" | "card-number-form" | "cvv-form";
+            variant: CardFormVariant;
             token?: string;
             onLoad?: () => void;
         }>;
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    wrapperRef: HTMLDivElement;
     iframeRef: HTMLIFrameElement;
-}, HTMLIFrameElement>;
+}, HTMLDivElement>;
 export default _default;

package/dist/index.d.ts

@@ -16,7 +16,7 @@ declare const CoinflowCardForm: import('vue').DefineComponent<import('vue').Extr
             merchantId: string;
             env?: import('.').CoinflowEnvs;
             theme?: import('.').MerchantTheme;
-            variant: "card-form" | "card-number-form" | "cvv-form";
+            variant: import('.').CardFormVariant;
             token?: string;
             onLoad?: () => void;
         }>;
@@ -30,15 +30,16 @@ declare const CoinflowCardForm: import('vue').DefineComponent<import('vue').Extr
             merchantId: string;
             env?: import('.').CoinflowEnvs;
             theme?: import('.').MerchantTheme;
-            variant: "card-form" | "card-number-form" | "cvv-form";
+            variant: import('.').CardFormVariant;
             token?: string;
             onLoad?: () => void;
         }>;
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    wrapperRef: HTMLDivElement;
     iframeRef: HTMLIFrameElement;
-}, HTMLIFrameElement>;
+}, HTMLDivElement>;
 /** @deprecated Use CoinflowCardForm instead */
 declare const CoinflowLegacyCardNumberInput: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     args: {

package/dist/lib/common/card-form/cardEntryLayout.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Single source of truth for the card-entry responsive layout.
+ *
+ * The real card-entry form (`UnifiedCardEntry` in the core-flows app) and the
+ * React/Vue/Angular skeleton loaders all render the same grid. Historically the
+ * form drove the inline↔two-row switch from JS (a ResizeObserver toggling React
+ * state) while the skeletons hard-coded their own guesses, so the two drifted.
+ *
+ * This module defines the grid templates and the breakpoint ONCE, as pure data
+ * plus a CSS builder, so every consumer reflows at exactly the same width via a
+ * CSS container query — no JS width measurement, nothing to keep in sync.
+ */
+export type CardEntryInputName = 'card-number' | 'expiration' | 'cvv';
+/**
+ * Minimum width (px) each field needs before the row is too cramped and the
+ * layout drops to two rows. Mirrors the real form's field sizing.
+ */
+export declare const CARD_ENTRY_MIN_WIDTHS: Record<CardEntryInputName, number>;
+/** Notional gap (px) between fields, summed into the reflow breakpoint. */
+export declare const CARD_ENTRY_SLOT_GAP_PX = 8;
+/** Field row height — matches the real form's `3rem` grid rows. */
+export declare const CARD_ENTRY_ROW_HEIGHT = "3rem";
+export declare const CARD_ENTRY_ROW_HEIGHT_PX = 48;
+/** 1px accent line between rows / between exp & cvv in the two-row layout. */
+export declare const CARD_ENTRY_DIVIDER_PX = 1;
+/**
+ * The form draws its fields inside a 1px border, so the query container (the
+ * full iframe width) is 2px wider than the field row that `minRowWidth`
+ * describes. The breakpoint bakes this in so form and skeleton flip together.
+ */
+export declare const CARD_ENTRY_BORDER_PX = 1;
+/**
+ * The form insets its box by this much on every side (Tailwind `m-0.5`) so the
+ * focus ring has room and isn't clipped at the iframe edge. It adds to the box's
+ * rendered height, so the skeleton's height guess includes it to avoid a jump
+ * when the loaded form replaces the skeleton.
+ */
+export declare const CARD_ENTRY_MARGIN_PX = 2;
+export type CardEntryConfig = {
+    /** Mounted fields, in DOM/visual order. */
+    inputs: CardEntryInputName[];
+    /** Whether the animated card-brand icon renders left of the PAN slot. */
+    hasIcon?: boolean;
+    /** Whether the layout may drop to two rows when narrow (default true). */
+    allowTwoRow?: boolean;
+};
+export type CardEntryDivider = {
+    area: string;
+    orientation: 'v' | 'h';
+};
+export type CardEntryLayout = {
+    /** grid-template for the wide (inline) layout. */
+    inline: string;
+    /** grid-template for the narrow (two-row) layout, or null if it never reflows. */
+    twoRow: string | null;
+    /**
+     * Container width (px) below which the two-row layout applies, measured on the
+     * query container (full iframe width, incl. the form's border). Null when the
+     * config never reflows.
+     */
+    breakpointPx: number | null;
+    /** grid-area names that hold a field, in DOM order (same in both layouts). */
+    fieldAreas: string[];
+    /** Whether an `icon` area is present (both layouts). */
+    hasIconArea: boolean;
+    /** Accent-line elements shown only in the two-row layout. */
+    twoRowDividers: CardEntryDivider[];
+};
+/** Resolve the full layout (templates + breakpoint + areas) for a config. */
+export declare function buildCardEntryLayout({ inputs, hasIcon, allowTwoRow, }: CardEntryConfig): CardEntryLayout;
+/**
+ * Container-query CSS that switches `gridSelector` between the inline and
+ * two-row templates at the layout's breakpoint. The element matched by
+ * `gridSelector` must be a descendant of a `container-type: inline-size`
+ * ancestor named `containerName`.
+ *
+ * `extraBaseRules` are emitted before the `@container` block (e.g. the default
+ * hidden state of two-row-only dividers); `extraCompactRules` are emitted inside
+ * it (e.g. revealing those dividers / hiding wide-only chrome). Keeping the base
+ * state first ensures the compact rules win when the query matches.
+ */
+export declare function buildCardEntryGridCss({ gridSelector, layout, containerName, extraBaseRules, extraCompactRules, }: {
+    gridSelector: string;
+    layout: CardEntryLayout;
+    containerName?: string;
+    extraBaseRules?: string;
+    extraCompactRules?: string;
+}): string;

package/dist/lib/common/card-form/cardFormSkeleton.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Framework-agnostic definitions for the V2 card-form skeleton loader.
+ *
+ * The React, Vue, and Angular libraries all render the same skeleton while the
+ * card-form iframe loads. The grid templates and breakpoint come from the shared
+ * {@link buildCardEntryLayout} — the SAME source of truth the real form uses —
+ * so the skeleton reflows at exactly the width the loaded form does. Only the
+ * box styling and per-framework wiring live here.
+ */
+export type CardFormVariant = 'card-form' | 'card-number-form' | 'cvv-form';
+export declare const INLINE_SKELETON_HEIGHT_PX: number;
+/** Two-row layouts are a second field row plus the 1px divider taller. */
+export declare const COMPACT_SKELETON_HEIGHT_PX: number;
+export type SkeletonLayout = {
+    /** Single-row grid used at the iframe's default (wide) width. */
+    inline: string;
+    /** Two-row grid applied below `compactMaxWidthPx`; omitted when it never reflows. */
+    compact?: string;
+    /** Container width (px) below which the two-row grid applies. */
+    compactMaxWidthPx?: number;
+    /** grid-area names to render one skeleton box for, in DOM order (same in both layouts). */
+    areas: string[];
+};
+export declare const SKELETON_LAYOUTS: Record<CardFormVariant, SkeletonLayout>;
+/** Name of the shared pulse keyframes; referenced by the box `animation`. */
+export declare const SKELETON_PULSE_ANIMATION_NAME = "coinflow-card-form-skeleton-pulse";
+/**
+ * Duration (ms) of the skeleton's opacity fade-out. Matches the `opacity 300ms`
+ * transition each renderer applies. Renderers unmount the skeleton on
+ * `transitionend`, but that event can be skipped (reduced-motion, an ancestor
+ * `display:none`, or opacity already 0) — so they also use this as a fallback
+ * timeout to force the unmount and avoid a stuck (invisible) skeleton.
+ */
+export declare const SKELETON_FADE_MS = 300;
+/**
+ * Whether the given container width would trigger the variant's two-row layout.
+ * Mirrors the real form's container query (`width < breakpoint`). Variants
+ * without a two-row layout never reflow.
+ */
+export declare function shouldStackSkeleton({ variant, width, }: {
+    variant: CardFormVariant;
+    width: number;
+}): boolean;
+/**
+ * Height to guess before the iframe reports its real height. The two-row layout
+ * is a field row plus divider taller than the inline one.
+ */
+export declare function guessSkeletonHeightPx({ variant, width, }: {
+    variant: CardFormVariant;
+    width: number;
+}): number;
+/**
+ * The `grid-template` to apply for the given container width. Frameworks that
+ * drive the layout from JS (Vue, Angular) call this from their resize observer;
+ * React instead injects a CSS container query via {@link buildSkeletonCss}.
+ */
+export declare function getSkeletonGridTemplate({ variant, width, }: {
+    variant: CardFormVariant;
+    width: number;
+}): string;
+/** Stable class name for a variant's skeleton grid element. */
+export declare function getSkeletonGridClass(variant: CardFormVariant): string;
+/**
+ * CSS (keyframes + grid + container-query breakpoint) for the container-query
+ * driven renderer used by React, where the skeleton root is a query container.
+ */
+export declare function buildSkeletonCss(variant: CardFormVariant): string;
+/**
+ * Padding (px) to inset the skeleton grid by, applied on the skeleton root. It
+ * equals the form's own chrome — its `m-0.5` margin plus 1px border — so the
+ * boxes land in the same area the real fields will, and the grid fills the root
+ * exactly (no dead space that would make the boxes look too short).
+ */
+export declare const SKELETON_ROOT_PADDING_PX: number;
+/**
+ * Inline style for each skeleton box, MINUS the `background` — the fill color is
+ * theme-dependent (see {@link getSkeletonColors}) so each renderer merges it in.
+ * A hairline margin keeps a subtle gap between boxes while letting them fill
+ * nearly the full field height (the root padding handles the outer inset). Uses
+ * string units so it renders identically in React, Vue, and Angular.
+ */
+export declare const SKELETON_BOX_STYLE: {
+    readonly minWidth: "0";
+    readonly margin: "1px";
+    readonly borderRadius: "4px";
+    readonly opacity: "1";
+    readonly animation: "coinflow-card-form-skeleton-pulse 1.5s ease-in-out infinite";
+};
+export type SkeletonColors = {
+    /** Faint backdrop behind the boxes. */
+    backdrop: string;
+    /** Box fill. */
+    box: string;
+};
+/**
+ * Best-effort skeleton palette. The skeleton renders in the SDK (parent), so it
+ * can't see the form's resolved colors — it only has the optional `theme` the
+ * integrator passed. When `theme.background` is a parseable color we tint the
+ * skeleton light-on-dark or dark-on-light to match; otherwise we fall back to a
+ * neutral mid-grey that stays visible on any surface.
+ */
+export declare function getSkeletonColors(theme?: {
+    background?: string;
+}): SkeletonColors;

package/dist/lib/common/index.d.ts

@@ -4,6 +4,8 @@ export * from './CoinflowLibMessageHandlers';
 export * from './EventBus';
 export * from './card-form/TokenEx';
 export * from './card-form/tokenexHelpers';
+export * from './card-form/cardEntryLayout';
+export * from './card-form/cardFormSkeleton';
 export * from './types/Subtotal';
 export * from './types/AnyObject';
 export * from './types/giftCardCartItem';

package/dist/testing/CardFormV2Test.vue.d.ts

@@ -1,11 +1,12 @@
+import { CardFormVariant, MerchantTheme } from '../lib/common';
 declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    cardForm: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+    tokenizer: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
         args: {
             type: import('vue').PropType<{
                 merchantId: string;
                 env?: import('..').CoinflowEnvs;
-                theme?: import('..').MerchantTheme;
-                variant: "card-form" | "card-number-form" | "cvv-form";
+                theme?: MerchantTheme;
+                variant: CardFormVariant;
                 token?: string;
                 onLoad?: () => void;
             }>;
@@ -14,8 +15,9 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
     }>> & Readonly<{}>, {
         tokenize: () => Promise<import('../components/card-form/CoinflowCardFormV2.vue').CardFormV2TokenResponse>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        wrapperRef: HTMLDivElement;
         iframeRef: HTMLIFrameElement;
-    }, HTMLIFrameElement, import('vue').ComponentProvideOptions, {
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -27,8 +29,8 @@ declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import
             type: import('vue').PropType<{
                 merchantId: string;
                 env?: import('..').CoinflowEnvs;
-                theme?: import('..').MerchantTheme;
-                variant: "card-form" | "card-number-form" | "cvv-form";
+                theme?: MerchantTheme;
+                variant: CardFormVariant;
                 token?: string;
                 onLoad?: () => void;
             }>;

package/dist/testing/SingleTest.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coinflowlabs/vue",
   "private": false,
-  "version": "1.17.0",
+  "version": "1.18.0",
   "type": "module",
   "files": [
     "dist",