@ozura/elements 1.3.1-next.73 → 1.3.1-next.75

package/dist/react/react/index.d.ts

@@ -45,7 +45,7 @@
  * ```
  */
 import React from 'react';
-import type { ElementOptions, ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
+import type { ElementOptions, ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance, FieldStatesSnapshot } from '../types';
 export interface OzElementsProps {
     /** System pub key for the tokenize endpoint. Obtain from Ozura admin.
      *
@@ -235,6 +235,12 @@ export interface UseOzElementsReturn {
      * <button disabled={!ready || !isComplete} onClick={() => createToken()}>Pay</button>
      */
     isComplete: boolean;
+    /**
+     * Like `isComplete`, but for bank-account fields (`OzBankCard` /
+     * `createBankElement`). Card and bank completion are tracked independently, so
+     * a card-only form isn't gated on bank fields and vice versa.
+     */
+    isBankComplete: boolean;
     /**
      * `true` while `createToken()` or `createBankToken()` is in progress,
      * including the transparent wax-key refresh phase. Use this to keep the
@@ -251,6 +257,18 @@ export interface UseOzElementsReturn {
  * an `<OzElements>` provider tree.
  */
 export declare function useOzElements(): UseOzElementsReturn;
+/**
+ * Reactive snapshot of every created field's state, keyed by element type
+ * (e.g. `cardNumber`, `cvv`, `accountNumber`). Each entry is
+ * `{ empty, complete, valid, error?, cardBrand? }`. Recomputes whenever any
+ * field fires a change event. Must be called inside an `<OzElements>` provider;
+ * returns `{}` otherwise.
+ *
+ * @example
+ * const states = useFieldStates();
+ * if (states.cvv?.error) showCvvError(states.cvv.error);
+ */
+export declare function useFieldStates(): FieldStatesSnapshot;
 export interface OzFieldProps {
     /** CSS-in-JS style object applied to the inner input. */
     style?: ElementOptions['style'];
@@ -437,6 +455,6 @@ export interface OzBankCardProps {
  * individually instead.
  */
 export declare function OzBankCard({ style, styles, classNames, labels, labelStyle, labelClassName, gap, hideErrors, errorStyle, errorClassName, renderError, onChange, onReady, onFocus, onBlur, disabled, className, placeholders, }: OzBankCardProps): import("react/jsx-runtime").JSX.Element;
-export type { ElementChangeEvent, TokenizeOptions, TokenResponse, CardMetadata, BankTokenizeOptions, BankTokenResponse, BankAccountMetadata, BankElementType, Appearance, AppearanceVariables, OzTheme } from '../types';
+export type { ElementChangeEvent, TokenizeOptions, TokenResponse, CardMetadata, BankTokenizeOptions, BankTokenResponse, BankAccountMetadata, BankElementType, Appearance, AppearanceVariables, OzTheme, FieldState, FieldStatesSnapshot } from '../types';
 export type { OzErrorCode } from '../sdk/errors';
 export { createSessionFetcher, createFetchWaxKey } from '../sdk';

package/dist/react/sdk/OzVault.d.ts

@@ -1,5 +1,5 @@
 import { OzElement } from './OzElement';
-import { ElementType, BankElementType, ElementOptions, VaultOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse } from '../types';
+import { ElementType, BankElementType, ElementOptions, VaultOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FieldStatesSnapshot } from '../types';
 /**
  * The main entry point for OzElements. Creates and manages iframe-based
  * card input elements that keep raw card data isolated from the merchant page.
@@ -33,6 +33,7 @@ export declare class OzVault {
     private tokenizeResolvers;
     private bankTokenizeResolvers;
     private completionState;
+    private fieldStates;
     private tokenizerFrame;
     private tokenizerWindow;
     private tokenizerReady;
@@ -121,6 +122,24 @@ export declare class OzVault {
      * });
      */
     get isComplete(): boolean;
+    /**
+     * Like {@link isComplete}, but for bank-account elements created via
+     * {@link createBankElement}. Card and bank fields are tracked separately so a
+     * card-only checkout is never gated on bank fields (and vice versa), matching
+     * the `createToken()` / `createBankToken()` split. A vault with both card and
+     * bank elements exposes each completion state independently.
+     */
+    get isBankComplete(): boolean;
+    /** True iff the set is non-empty and every element has reported complete-and-valid. */
+    private allComplete;
+    /**
+     * Snapshot of every created field's latest state, keyed by element type.
+     * Card and bank fields are combined (their type keys never collide). Useful for
+     * gating UI, rendering per-field errors, or showing the card brand without
+     * wiring an onChange listener per element. Returns shallow copies so callers
+     * cannot mutate the vault's internal state.
+     */
+    getFieldStates(): FieldStatesSnapshot;
     /**
      * `true` while a `createToken()` or `createBankToken()` call is in progress
      * (including the transparent wax-key refresh phase). Use this to keep the pay

package/dist/react/types/index.d.ts

@@ -92,6 +92,21 @@ export interface ElementChangeEvent {
     /** Human-readable error when valid is false and the field has been touched */
     error?: string;
 }
+export interface FieldState {
+    empty: boolean;
+    complete: boolean;
+    valid: boolean;
+    /** Present when valid is false and the field has been touched. */
+    error?: string;
+    /** Card brand — cardNumber field only. */
+    cardBrand?: string;
+}
+/**
+ * Snapshot of every created field's latest state, keyed by element type. Only
+ * fields that have been created are present; each is present from creation,
+ * starting at { empty:true, complete:false, valid:false } until first change.
+ */
+export type FieldStatesSnapshot = Partial<Record<ElementType | BankElementType, FieldState>>;
 export type ElementType = 'cardNumber' | 'cvv' | 'expirationDate';
 /** Bank account element types. */
 export type BankElementType = 'accountNumber' | 'routingNumber';

package/dist/react/vue/index.d.ts

@@ -24,7 +24,7 @@
  * ```
  */
 import { type Ref, type PropType, type ComputedRef } from 'vue';
-import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
+import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance, FieldStatesSnapshot } from '../types';
 export interface OzElementsProps {
     /** Omit when using a test vault key from a Test project at ozuravault.com.
      *  Required for production vault keys. */
@@ -229,6 +229,12 @@ export interface UseOzElementsReturn {
      * // <button :disabled="!ready || !isComplete" @click="createToken()">Pay</button>
      */
     isComplete: ComputedRef<boolean>;
+    /**
+     * Like `isComplete`, but for bank-account fields (`createBankElement`). Card
+     * and bank completion are tracked independently, so a card-only form isn't
+     * gated on bank fields and vice versa.
+     */
+    isBankComplete: ComputedRef<boolean>;
     /**
      * `true` while `createToken()` or `createBankToken()` is in progress,
      * including the transparent wax-key refresh phase. Use this to keep the
@@ -247,6 +253,18 @@ export interface UseOzElementsReturn {
  * @throws {Error} if called outside an <OzElements> provider
  */
 export declare function useOzElements(): UseOzElementsReturn;
+/**
+ * Reactive snapshot of every created field's state, keyed by element type
+ * (e.g. `cardNumber`, `cvv`, `accountNumber`). Each entry is
+ * `{ empty, complete, valid, error?, cardBrand? }`. Recomputes whenever any
+ * field fires a change event.
+ *
+ * @throws if called outside an `<OzElements>` provider tree.
+ * @example
+ * const fields = useFieldStates();
+ * // fields.value.cvv?.error
+ */
+export declare function useFieldStates(): ComputedRef<FieldStatesSnapshot>;
 /** Props accepted by all individual field components (OzCardNumber, OzExpiry, OzCvv, etc.). */
 export interface OzFieldProps {
     placeholder?: string;
@@ -353,4 +371,4 @@ export declare const OzBankRoutingNumber: import("vue").DefineComponent<{
     placeholder: string;
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export type { ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, Appearance, FontSource, } from '../types';
+export type { ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, Appearance, FontSource, FieldState, FieldStatesSnapshot, } from '../types';

package/dist/server/sdk/OzVault.d.ts

@@ -1,5 +1,5 @@
 import { OzElement } from './OzElement';
-import { ElementType, BankElementType, ElementOptions, VaultOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse } from '../types';
+import { ElementType, BankElementType, ElementOptions, VaultOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FieldStatesSnapshot } from '../types';
 /**
  * The main entry point for OzElements. Creates and manages iframe-based
  * card input elements that keep raw card data isolated from the merchant page.
@@ -33,6 +33,7 @@ export declare class OzVault {
     private tokenizeResolvers;
     private bankTokenizeResolvers;
     private completionState;
+    private fieldStates;
     private tokenizerFrame;
     private tokenizerWindow;
     private tokenizerReady;
@@ -121,6 +122,24 @@ export declare class OzVault {
      * });
      */
     get isComplete(): boolean;
+    /**
+     * Like {@link isComplete}, but for bank-account elements created via
+     * {@link createBankElement}. Card and bank fields are tracked separately so a
+     * card-only checkout is never gated on bank fields (and vice versa), matching
+     * the `createToken()` / `createBankToken()` split. A vault with both card and
+     * bank elements exposes each completion state independently.
+     */
+    get isBankComplete(): boolean;
+    /** True iff the set is non-empty and every element has reported complete-and-valid. */
+    private allComplete;
+    /**
+     * Snapshot of every created field's latest state, keyed by element type.
+     * Card and bank fields are combined (their type keys never collide). Useful for
+     * gating UI, rendering per-field errors, or showing the card brand without
+     * wiring an onChange listener per element. Returns shallow copies so callers
+     * cannot mutate the vault's internal state.
+     */
+    getFieldStates(): FieldStatesSnapshot;
     /**
      * `true` while a `createToken()` or `createBankToken()` call is in progress
      * (including the transparent wax-key refresh phase). Use this to keep the pay

package/dist/server/types/index.d.ts

@@ -92,6 +92,21 @@ export interface ElementChangeEvent {
     /** Human-readable error when valid is false and the field has been touched */
     error?: string;
 }
+export interface FieldState {
+    empty: boolean;
+    complete: boolean;
+    valid: boolean;
+    /** Present when valid is false and the field has been touched. */
+    error?: string;
+    /** Card brand — cardNumber field only. */
+    cardBrand?: string;
+}
+/**
+ * Snapshot of every created field's latest state, keyed by element type. Only
+ * fields that have been created are present; each is present from creation,
+ * starting at { empty:true, complete:false, valid:false } until first change.
+ */
+export type FieldStatesSnapshot = Partial<Record<ElementType | BankElementType, FieldState>>;
 export type ElementType = 'cardNumber' | 'cvv' | 'expirationDate';
 /** Bank account element types. */
 export type BankElementType = 'accountNumber' | 'routingNumber';

package/dist/server/vue/index.d.ts

@@ -24,7 +24,7 @@
  * ```
  */
 import { type Ref, type PropType, type ComputedRef } from 'vue';
-import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
+import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance, FieldStatesSnapshot } from '../types';
 export interface OzElementsProps {
     /** Omit when using a test vault key from a Test project at ozuravault.com.
      *  Required for production vault keys. */
@@ -229,6 +229,12 @@ export interface UseOzElementsReturn {
      * // <button :disabled="!ready || !isComplete" @click="createToken()">Pay</button>
      */
     isComplete: ComputedRef<boolean>;
+    /**
+     * Like `isComplete`, but for bank-account fields (`createBankElement`). Card
+     * and bank completion are tracked independently, so a card-only form isn't
+     * gated on bank fields and vice versa.
+     */
+    isBankComplete: ComputedRef<boolean>;
     /**
      * `true` while `createToken()` or `createBankToken()` is in progress,
      * including the transparent wax-key refresh phase. Use this to keep the
@@ -247,6 +253,18 @@ export interface UseOzElementsReturn {
  * @throws {Error} if called outside an <OzElements> provider
  */
 export declare function useOzElements(): UseOzElementsReturn;
+/**
+ * Reactive snapshot of every created field's state, keyed by element type
+ * (e.g. `cardNumber`, `cvv`, `accountNumber`). Each entry is
+ * `{ empty, complete, valid, error?, cardBrand? }`. Recomputes whenever any
+ * field fires a change event.
+ *
+ * @throws if called outside an `<OzElements>` provider tree.
+ * @example
+ * const fields = useFieldStates();
+ * // fields.value.cvv?.error
+ */
+export declare function useFieldStates(): ComputedRef<FieldStatesSnapshot>;
 /** Props accepted by all individual field components (OzCardNumber, OzExpiry, OzCvv, etc.). */
 export interface OzFieldProps {
     placeholder?: string;
@@ -353,4 +371,4 @@ export declare const OzBankRoutingNumber: import("vue").DefineComponent<{
     placeholder: string;
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export type { ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, Appearance, FontSource, } from '../types';
+export type { ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, Appearance, FontSource, FieldState, FieldStatesSnapshot, } from '../types';

package/dist/types/sdk/OzVault.d.ts

@@ -1,5 +1,5 @@
 import { OzElement } from './OzElement';
-import { ElementType, BankElementType, ElementOptions, VaultOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse } from '../types';
+import { ElementType, BankElementType, ElementOptions, VaultOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FieldStatesSnapshot } from '../types';
 /**
  * The main entry point for OzElements. Creates and manages iframe-based
  * card input elements that keep raw card data isolated from the merchant page.
@@ -33,6 +33,7 @@ export declare class OzVault {
     private tokenizeResolvers;
     private bankTokenizeResolvers;
     private completionState;
+    private fieldStates;
     private tokenizerFrame;
     private tokenizerWindow;
     private tokenizerReady;
@@ -121,6 +122,24 @@ export declare class OzVault {
      * });
      */
     get isComplete(): boolean;
+    /**
+     * Like {@link isComplete}, but for bank-account elements created via
+     * {@link createBankElement}. Card and bank fields are tracked separately so a
+     * card-only checkout is never gated on bank fields (and vice versa), matching
+     * the `createToken()` / `createBankToken()` split. A vault with both card and
+     * bank elements exposes each completion state independently.
+     */
+    get isBankComplete(): boolean;
+    /** True iff the set is non-empty and every element has reported complete-and-valid. */
+    private allComplete;
+    /**
+     * Snapshot of every created field's latest state, keyed by element type.
+     * Card and bank fields are combined (their type keys never collide). Useful for
+     * gating UI, rendering per-field errors, or showing the card brand without
+     * wiring an onChange listener per element. Returns shallow copies so callers
+     * cannot mutate the vault's internal state.
+     */
+    getFieldStates(): FieldStatesSnapshot;
     /**
      * `true` while a `createToken()` or `createBankToken()` call is in progress
      * (including the transparent wax-key refresh phase). Use this to keep the pay

package/dist/types/types/index.d.ts

@@ -92,6 +92,21 @@ export interface ElementChangeEvent {
     /** Human-readable error when valid is false and the field has been touched */
     error?: string;
 }
+export interface FieldState {
+    empty: boolean;
+    complete: boolean;
+    valid: boolean;
+    /** Present when valid is false and the field has been touched. */
+    error?: string;
+    /** Card brand — cardNumber field only. */
+    cardBrand?: string;
+}
+/**
+ * Snapshot of every created field's latest state, keyed by element type. Only
+ * fields that have been created are present; each is present from creation,
+ * starting at { empty:true, complete:false, valid:false } until first change.
+ */
+export type FieldStatesSnapshot = Partial<Record<ElementType | BankElementType, FieldState>>;
 export type ElementType = 'cardNumber' | 'cvv' | 'expirationDate';
 /** Bank account element types. */
 export type BankElementType = 'accountNumber' | 'routingNumber';

package/dist/types/vue/index.d.ts

@@ -24,7 +24,7 @@
  * ```
  */
 import { type Ref, type PropType, type ComputedRef } from 'vue';
-import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance } from '../types';
+import type { ElementOptions, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, FontSource, Appearance, FieldStatesSnapshot } from '../types';
 export interface OzElementsProps {
     /** Omit when using a test vault key from a Test project at ozuravault.com.
      *  Required for production vault keys. */
@@ -229,6 +229,12 @@ export interface UseOzElementsReturn {
      * // <button :disabled="!ready || !isComplete" @click="createToken()">Pay</button>
      */
     isComplete: ComputedRef<boolean>;
+    /**
+     * Like `isComplete`, but for bank-account fields (`createBankElement`). Card
+     * and bank completion are tracked independently, so a card-only form isn't
+     * gated on bank fields and vice versa.
+     */
+    isBankComplete: ComputedRef<boolean>;
     /**
      * `true` while `createToken()` or `createBankToken()` is in progress,
      * including the transparent wax-key refresh phase. Use this to keep the
@@ -247,6 +253,18 @@ export interface UseOzElementsReturn {
  * @throws {Error} if called outside an <OzElements> provider
  */
 export declare function useOzElements(): UseOzElementsReturn;
+/**
+ * Reactive snapshot of every created field's state, keyed by element type
+ * (e.g. `cardNumber`, `cvv`, `accountNumber`). Each entry is
+ * `{ empty, complete, valid, error?, cardBrand? }`. Recomputes whenever any
+ * field fires a change event.
+ *
+ * @throws if called outside an `<OzElements>` provider tree.
+ * @example
+ * const fields = useFieldStates();
+ * // fields.value.cvv?.error
+ */
+export declare function useFieldStates(): ComputedRef<FieldStatesSnapshot>;
 /** Props accepted by all individual field components (OzCardNumber, OzExpiry, OzCvv, etc.). */
 export interface OzFieldProps {
     placeholder?: string;
@@ -353,4 +371,4 @@ export declare const OzBankRoutingNumber: import("vue").DefineComponent<{
     placeholder: string;
     disabled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export type { ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, Appearance, FontSource, } from '../types';
+export type { ElementChangeEvent, TokenizeOptions, TokenResponse, BankTokenizeOptions, BankTokenResponse, Appearance, FontSource, FieldState, FieldStatesSnapshot, } from '../types';

package/dist/vue/index.cjs.js

@@ -1066,6 +1066,8 @@ class OzVault {
         this.bankTokenizeResolvers = new Map();
         // Track completion state per element for auto-advance (only fire on transition)
         this.completionState = new Map();
+        // Latest per-field state for getFieldStates(), keyed by frameId.
+        this.fieldStates = new Map();
         this.tokenizerFrame = null;
         this.tokenizerWindow = null;
         this.tokenizerReady = false;
@@ -1263,13 +1265,41 @@ class OzVault {
      * });
      */
     get isComplete() {
-        if (this.elements.size === 0)
+        return this.allComplete([...this.elementsByType.values()]);
+    }
+    /**
+     * Like {@link isComplete}, but for bank-account elements created via
+     * {@link createBankElement}. Card and bank fields are tracked separately so a
+     * card-only checkout is never gated on bank fields (and vice versa), matching
+     * the `createToken()` / `createBankToken()` split. A vault with both card and
+     * bank elements exposes each completion state independently.
+     */
+    get isBankComplete() {
+        return this.allComplete([...this.bankElementsByType.values()]);
+    }
+    /** True iff the set is non-empty and every element has reported complete-and-valid. */
+    allComplete(els) {
+        if (els.length === 0)
             return false;
-        for (const frameId of this.elements.keys()) {
-            if (this.completionState.get(frameId) !== true)
-                return false;
+        return els.every(el => this.completionState.get(el.frameId) === true);
+    }
+    /**
+     * Snapshot of every created field's latest state, keyed by element type.
+     * Card and bank fields are combined (their type keys never collide). Useful for
+     * gating UI, rendering per-field errors, or showing the card brand without
+     * wiring an onChange listener per element. Returns shallow copies so callers
+     * cannot mutate the vault's internal state.
+     */
+    getFieldStates() {
+        var _a, _b;
+        const snapshot = {};
+        for (const [type, el] of this.elementsByType) {
+            snapshot[type] = Object.assign({}, ((_a = this.fieldStates.get(el.frameId)) !== null && _a !== void 0 ? _a : { empty: true, complete: false, valid: false }));
+        }
+        for (const [type, el] of this.bankElementsByType) {
+            snapshot[type] = Object.assign({}, ((_b = this.fieldStates.get(el.frameId)) !== null && _b !== void 0 ? _b : { empty: true, complete: false, valid: false }));
         }
-        return true;
+        return snapshot;
     }
     /**
      * `true` while a `createToken()` or `createBankToken()` call is in progress
@@ -1323,6 +1353,7 @@ class OzVault {
         if (existing) {
             this.elements.delete(existing.frameId);
             this.completionState.delete(existing.frameId);
+            this.fieldStates.delete(existing.frameId);
             existing.destroy();
         }
         const el = new OzElement(type, options, this.vaultId, this.frameBaseUrl, this.fonts, this.resolvedAppearance, () => {
@@ -1330,9 +1361,11 @@ class OzVault {
             // don't grow unboundedly in SPA scenarios with repeated mount/unmount cycles.
             this.elements.delete(el.frameId);
             this.completionState.delete(el.frameId);
+            this.fieldStates.delete(el.frameId);
         }, this._debug);
         this.elements.set(el.frameId, el);
         typeMap.set(type, el);
+        this.fieldStates.set(el.frameId, { empty: true, complete: false, valid: false });
         return el;
     }
     /**
@@ -1632,6 +1665,10 @@ class OzVault {
         for (const frameId of this.completionState.keys()) {
             this.completionState.set(frameId, false);
         }
+        // Mirror for field states: every created field returns to its default.
+        for (const frameId of this.fieldStates.keys()) {
+            this.fieldStates.set(frameId, { empty: true, complete: false, valid: false });
+        }
         // NOTE: _tokenizeSuccessCount is intentionally NOT reset.
         // It reflects real server-side wax key budget consumption. Zeroing it
         // would desync the proactive refresh logic from the vault's state and
@@ -1679,6 +1716,7 @@ class OzVault {
         this.elementsByType.clear();
         this.bankElementsByType.clear();
         this.completionState.clear();
+        this.fieldStates.clear();
         this._tokenizeSuccessCount = 0;
         (_a = this.tokenizerFrame) === null || _a === void 0 ? void 0 : _a.remove();
         this.tokenizerFrame = null;
@@ -1883,6 +1921,8 @@ class OzVault {
         const valid = msg.valid;
         const wasComplete = (_a = this.completionState.get(el.frameId)) !== null && _a !== void 0 ? _a : false;
         this.completionState.set(el.frameId, complete && valid);
+        this.fieldStates.set(el.frameId, Object.assign(Object.assign({ empty: msg.empty, complete,
+            valid }, (typeof msg.error === 'string' ? { error: msg.error } : {})), (typeof msg.cardBrand === 'string' ? { cardBrand: msg.cardBrand } : {})));
         // Require valid too — avoids advancing at 13 digits for unknown-brand cards
         // where isComplete() fires before the user has finished typing.
         const justCompleted = complete && valid && !wasComplete;
@@ -2461,13 +2501,39 @@ function useOzElements() {
             notifyChange();
         }
     };
-    const reset = () => { var _a; (_a = vault.value) === null || _a === void 0 ? void 0 : _a.reset(); };
+    const reset = () => {
+        var _a;
+        (_a = vault.value) === null || _a === void 0 ? void 0 : _a.reset();
+        // reset() clears completion state and cancels any in-flight tokenization;
+        // bump changeTick so the derived computeds below recompute.
+        notifyChange();
+    };
     // `void changeTick.value` registers a reactive dependency so these recompute when
     // notifyChange() fires (field change / tokenize start-stop). vault.isComplete and
     // vault.isTokenizing read non-reactive internal Maps/flags that Vue cannot track.
     const isComplete = vue.computed(() => { var _a, _b; void changeTick.value; return (_b = (_a = vault.value) === null || _a === void 0 ? void 0 : _a.isComplete) !== null && _b !== void 0 ? _b : false; });
+    const isBankComplete = vue.computed(() => { var _a, _b; void changeTick.value; return (_b = (_a = vault.value) === null || _a === void 0 ? void 0 : _a.isBankComplete) !== null && _b !== void 0 ? _b : false; });
     const isTokenizing = vue.computed(() => { var _a, _b; void changeTick.value; return (_b = (_a = vault.value) === null || _a === void 0 ? void 0 : _a.isTokenizing) !== null && _b !== void 0 ? _b : false; });
-    return { createToken, createBankToken, ready, initError, tokenizeCount, reset, isComplete, isTokenizing };
+    return { createToken, createBankToken, ready, initError, tokenizeCount, reset, isComplete, isBankComplete, isTokenizing };
+}
+/**
+ * Reactive snapshot of every created field's state, keyed by element type
+ * (e.g. `cardNumber`, `cvv`, `accountNumber`). Each entry is
+ * `{ empty, complete, valid, error?, cardBrand? }`. Recomputes whenever any
+ * field fires a change event.
+ *
+ * @throws if called outside an `<OzElements>` provider tree.
+ * @example
+ * const fields = useFieldStates();
+ * // fields.value.cvv?.error
+ */
+function useFieldStates() {
+    const ctx = vue.inject(OZ_KEY);
+    if (!ctx) {
+        throw new Error('[OzVault] useFieldStates() must be called inside an <OzElements> provider');
+    }
+    const { vault, changeTick } = ctx;
+    return vue.computed(() => { var _a, _b; void changeTick.value; return (_b = (_a = vault.value) === null || _a === void 0 ? void 0 : _a.getFieldStates()) !== null && _b !== void 0 ? _b : {}; });
 }
 function createFieldComponent(displayName, mountElement) {
     return vue.defineComponent({
@@ -2535,5 +2601,6 @@ exports.OzCardNumber = OzCardNumber;
 exports.OzCvv = OzCvv;
 exports.OzElements = OzElements;
 exports.OzExpiry = OzExpiry;
+exports.useFieldStates = useFieldStates;
 exports.useOzElements = useOzElements;
 //# sourceMappingURL=index.cjs.js.map