@evervault/evervault-react-native 1.0.0 → 1.1.0

package/dist/typescript/src/components/Card/CardHolder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardHolder.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/CardHolder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAErD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAyBhD"}
+{"version":3,"file":"CardHolder.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/CardHolder.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,MAAM,WAAW,eAAgB,SAAQ,SAAS;CAAG;AAErD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBA4BhD"}

package/dist/typescript/src/components/Card/CardNumber.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { BaseProps } from './Card';
+import * as React from "react";
+import { BaseProps } from "./Card";
 interface CardNumberProps extends BaseProps {
 }
 export declare function CardNumber(props: CardNumberProps): React.JSX.Element;

package/dist/typescript/src/components/Card/CardNumber.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardNumber.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/CardNumber.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,UAAU,eAAgB,SAAQ,SAAS;CAAG;AAE9C,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBA6ChD"}
+{"version":3,"file":"CardNumber.d.ts","sourceRoot":"","sources":["../../../../../src/components/Card/CardNumber.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAEnC,UAAU,eAAgB,SAAQ,SAAS;CAAG;AAE9C,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAgDhD"}

package/dist/typescript/src/components/Card/context.d.ts

@@ -1,9 +1,9 @@
-import { UseFormReturn } from '../useForm';
-import { Dispatch, SetStateAction } from 'react';
-import { CardForm, CardField } from './types';
+import { UseFormReturn } from "../useForm";
+import { Dispatch, SetStateAction } from "react";
+import { CardForm, CardField } from "./types";
 type Context<T> = {
     values: CardForm;
-    register: UseFormReturn<T>['register'];
+    register: UseFormReturn<T>["register"];
     setRegisteredFields: Dispatch<SetStateAction<Set<CardField>>>;
 };
 export declare const removeFieldFromSet: (prev: Set<CardField>, field: CardField) => Set<CardField>;

package/dist/typescript/src/components/Card/index.d.ts

@@ -1,2 +1,2 @@
-export { Card, type CardProps } from './Card';
+export { Card, type CardProps } from "./Card";
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/components/Card/types.d.ts

@@ -1,4 +1,4 @@
-export type CardBrandName = 'american-express' | 'visa' | 'mastercard' | 'discover' | 'jcb' | 'diners-club' | 'unionpay' | 'maestro' | 'mir' | 'elo' | 'hipercard' | 'hiper' | 'szep';
+export type CardBrandName = "american-express" | "visa" | "mastercard" | "discover" | "jcb" | "diners-club" | "unionpay" | "maestro" | "mir" | "elo" | "hipercard" | "hiper" | "szep";
 export interface CardConfig {
     acceptedBrands?: CardBrandName[];
 }
@@ -8,7 +8,7 @@ export interface CardForm {
     cvc: string;
     expiry: string;
 }
-export type CardField = 'name' | 'number' | 'expiry' | 'cvc';
+export type CardField = "name" | "number" | "expiry" | "cvc";
 export interface CardExpiry {
     month: string | null;
     year: string | null;

package/dist/typescript/src/components/Card/utilities.d.ts

@@ -1,6 +1,6 @@
-import { CardNumberValidationResult } from '@evervault/card-validator';
-import type { CardForm, CardBrandName, CardField, CardPayload } from './types';
-import { UseFormReturn } from '../useForm';
+import { CardNumberValidationResult } from "@evervault/card-validator";
+import type { CardForm, CardBrandName, CardField, CardPayload } from "./types";
+import { UseFormReturn } from "../useForm";
 export declare function changePayload(encrypt: (value: string) => Promise<string>, form: UseFormReturn<CardForm>, fields: CardField[]): Promise<CardPayload>;
 export declare function isComplete(form: UseFormReturn<CardForm>, fields: CardField[]): boolean;
 export declare function isAcceptedBrand(acceptedBrands: CardBrandName[] | undefined, cardNumberValidationResult: CardNumberValidationResult): boolean;

package/dist/typescript/src/components/EvervaultProvider.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+import * as React from "react";
+export interface EvervaultContext {
+    teamUuid?: string;
+    appUuid?: string;
+}
+export declare const useEvervault: () => EvervaultContext;
+interface EvervaultProps {
+    appId: string;
+    teamId: string;
+    children: ReactNode;
+}
+/**
+ * @example
+ * ```tsx
+ * function App() {
+ *  return (
+ *    <EvervaultProvider teamId="team_123" appId="app_123">
+ *      <Card onChange={(card) => console.log(card)}>
+ *        <Card.Number />
+ *      </Card>
+ *    </EvervaultProvider>
+ *  );
+ * }
+ * ```
+ */
+declare const EvervaultProvider: ({ teamId, appId, children }: EvervaultProps) => React.JSX.Element;
+export default EvervaultProvider;
+//# sourceMappingURL=EvervaultProvider.d.ts.map

package/dist/typescript/src/components/EvervaultProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EvervaultProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/EvervaultProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAQD,eAAO,MAAM,YAAY,wBAAwB,CAAC;AAElD,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,iBAAiB,gCAAiC,cAAc,sBAwBrE,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/typescript/src/index.d.ts

@@ -1,4 +1,5 @@
-export { type CardProps, Card } from './components/Card';
-export { init, encrypt } from './sdk';
-export type { CardPayload, CardExpiry, CardBrandName, CardConfig, CardForm, CardField, } from './components/Card/types';
+export { type CardProps, Card } from "./components/Card";
+export { init, encrypt } from "./sdk";
+export type { CardPayload, CardExpiry, CardBrandName, CardConfig, CardForm, CardField, } from "./components/Card/types";
+export { default as EvervaultProvider } from "./components/EvervaultProvider";
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACtC,YAAY,EACV,WAAW,EACX,UAAU,EACV,aAAa,EACb,UAAU,EACV,QAAQ,EACR,SAAS,GACV,MAAM,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACtC,YAAY,EACV,WAAW,EACX,UAAU,EACV,aAAa,EACb,UAAU,EACV,QAAQ,EACR,SAAS,GACV,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,gCAAgC,CAAC"}

package/dist/typescript/src/sdk.d.ts

@@ -1,3 +1,10 @@
+/**
+ * @deprecated Deprecated since version 1.1.0. Use `EvervaultProvider` instead.
+ * @see `EvervaultProvider` instead
+ * ```tsx
+ * import { EvervaultProvider } from "@evervault/evervault-react-native";
+ * ```
+ */
 export declare function init(teamUuid: string, appUuid: string): Promise<void>;
 export declare function encrypt(data: any): Promise<string>;
 //# sourceMappingURL=sdk.d.ts.map

package/dist/typescript/src/sdk.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../../src/sdk.ts"],"names":[],"mappings":"AAGA,wBAAsB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAU3E;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CASxD"}
+{"version":3,"file":"sdk.d.ts","sourceRoot":"","sources":["../../../src/sdk.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,wBAAsB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAU3E;AAED,wBAAsB,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,CAAC,CASxD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evervault/evervault-react-native",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Evervault react native sdk",
   "main": "./dist/commonjs/index.js",
   "module": "./dist/module/index.js",
@@ -45,6 +45,7 @@
     "access": "public"
   },
   "dependencies": {
+    "nodemon": "^3.1.4",
     "react-native-masked-text": "^1.13.0",
     "@evervault/card-validator": "1.0.5"
   },
@@ -77,87 +78,11 @@
   "engines": {
     "node": ">= 18.0.0"
   },
-  "jest": {
-    "preset": "react-native",
-    "modulePathIgnorePatterns": [
-      "<rootDir>/dist/"
-    ]
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "release-it": {
-    "git": {
-      "commitMessage": "chore: release ${version}",
-      "tagName": "v${version}"
-    },
-    "npm": {
-      "publish": true
-    },
-    "github": {
-      "release": true
-    },
-    "plugins": {
-      "@release-it/conventional-changelog": {
-        "preset": "angular"
-      }
-    }
-  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@react-native",
-      "prettier"
-    ],
-    "rules": {
-      "prettier/prettier": [
-        "error",
-        {
-          "quoteProps": "consistent",
-          "singleQuote": true,
-          "tabWidth": 2,
-          "trailingComma": "es5",
-          "useTabs": false
-        }
-      ]
-    }
-  },
-  "eslintIgnore": [
-    "node_modules/",
-    "dist/"
-  ],
-  "prettier": {
-    "quoteProps": "consistent",
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "es5",
-    "useTabs": false
-  },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "dist",
-    "typescript": [
-      {
-        "project": "tsconfig.build.json"
-      }
-    ],
-    "targets": [
-      "module",
-      "commonjs",
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
-  },
   "scripts": {
+    "dev": "nodemon --watch ./src --exec 'bob build' --ext ts,tsx",
     "build": "bob build",
     "typecheck": "tsc --noEmit",
     "clean": "del-cli android/build dist",
-    "release": "release-it"
+    "format": "prettier --write ."
   }
 }

package/src/components/Card/Card.tsx

@@ -2,29 +2,24 @@ import {
   validateNumber,
   validateCVC,
   validateExpiry,
-} from '@evervault/card-validator';
-import * as React from 'react';
-import { ReactNode, useEffect, useState } from 'react';
-import { useForm } from '../useForm';
-import { changePayload, isAcceptedBrand, isComplete } from './utilities';
-import type { CardForm, CardConfig, CardField, CardPayload } from './types';
-import { CardNumber } from './CardNumber';
-import { CardContext } from './context';
-import { encrypt } from '../../sdk';
-import { CardCVC } from './CardCVC';
-import { CardHolder } from './CardHolder';
-import { CardExpiry } from './CardExpiry';
-import { StyleProp, TextInputProps, TextStyle, View } from 'react-native';
+} from "@evervault/card-validator";
+import * as React from "react";
+import { ReactNode, useState } from "react";
+import { useForm } from "../useForm";
+import { changePayload, isAcceptedBrand, isComplete } from "./utilities";
+import type { CardForm, CardConfig, CardField, CardPayload } from "./types";
+import { CardNumber } from "./CardNumber";
+import { CardContext } from "./context";
+import { encrypt } from "../../sdk";
+import { CardCVC } from "./CardCVC";
+import { CardHolder } from "./CardHolder";
+import { CardExpiry } from "./CardExpiry";
+import { StyleProp, TextInputProps, TextStyle, View } from "react-native";
 
 export interface BaseProps
   extends Omit<
     TextInputProps,
-    | 'onChange'
-    | 'onBlur'
-    | 'onChangeText'
-    | 'inputMode'
-    | 'autoComplete'
-    | 'value'
+    "onChange" | "onChangeText" | "inputMode" | "autoComplete" | "value"
   > {}
 
 export interface CardProps {
@@ -42,56 +37,56 @@ function Card({ initialValue, config, children, onChange, style }: CardProps) {
 
   const form = useForm<CardForm>({
     initialValues: initialValue ?? {
-      cvc: '',
-      expiry: '',
-      number: '',
-      name: '',
+      cvc: "",
+      expiry: "",
+      number: "",
+      name: "",
     },
     validate: {
       name: (values) => {
-        if (!registeredFields.has('name')) {
+        if (!registeredFields.has("name")) {
           return undefined;
         }
 
         if (values.name.length === 0) {
-          return 'invalid';
+          return "invalid";
         }
 
         return undefined;
       },
       number: (values) => {
-        if (!registeredFields.has('number')) {
+        if (!registeredFields.has("number")) {
           return undefined;
         }
         const cardValidation = validateNumber(values.number);
         if (!cardValidation.isValid) {
-          return 'invalid';
+          return "invalid";
         }
 
         if (!isAcceptedBrand(config?.acceptedBrands, cardValidation)) {
-          return 'unsupportedBrand';
+          return "unsupportedBrand";
         }
 
         return undefined;
       },
       expiry: (values) => {
-        if (!registeredFields.has('expiry')) {
+        if (!registeredFields.has("expiry")) {
           return undefined;
         }
         const expiryValidation = validateExpiry(values.expiry);
         if (!expiryValidation.isValid) {
-          return 'invalid';
+          return "invalid";
         }
 
         return undefined;
       },
       cvc: (values) => {
-        if (!registeredFields.has('cvc')) {
+        if (!registeredFields.has("cvc")) {
           return undefined;
         }
         const cvcValidation = validateCVC(values.cvc, values.number);
         if (!cvcValidation.isValid) {
-          return 'invalid';
+          return "invalid";
         }
 
         return undefined;

package/src/components/Card/CardCVC.tsx

@@ -1,9 +1,9 @@
-import { validateNumber } from '@evervault/card-validator';
-import * as React from 'react';
-import { useEffect, useMemo } from 'react';
-import { TextInputMask } from 'react-native-masked-text';
-import { removeFieldFromSet, useCardContext } from './context';
-import { BaseProps } from './Card';
+import { validateNumber } from "@evervault/card-validator";
+import * as React from "react";
+import { useEffect, useMemo } from "react";
+import { TextInputMask } from "react-native-masked-text";
+import { removeFieldFromSet, useCardContext } from "./context";
+import { BaseProps } from "./Card";
 
 export interface CVCProps extends BaseProps {}
 
@@ -11,21 +11,21 @@ export const CardCVC = (props: CVCProps) => {
   const context = useCardContext();
   const mask = useMemo(() => {
     if (!context.values.number) {
-      return '9999';
+      return "9999";
     }
     const type = validateNumber(context.values.number).brand;
-    if (type === 'american-express') {
-      return '9999';
+    if (type === "american-express") {
+      return "9999";
     }
-    return '999';
+    return "999";
   }, [context.values.number]);
 
-  const { onChange, onBlur } = context.register('cvc');
+  const { onChange, onBlur } = context.register("cvc");
 
   useEffect(() => {
-    context.setRegisteredFields((prev) => new Set(prev).add('cvc'));
+    context.setRegisteredFields((prev) => new Set(prev).add("cvc"));
     return () =>
-      context.setRegisteredFields((prev) => removeFieldFromSet(prev, 'cvc'));
+      context.setRegisteredFields((prev) => removeFieldFromSet(prev, "cvc"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -37,7 +37,10 @@ export const CardCVC = (props: CVCProps) => {
       value={context.values.cvc}
       onChangeText={(t) => onChange(t)}
       id="cvc"
-      onBlur={onBlur}
+      onBlur={(e) => {
+        onBlur(e);
+        props.onBlur?.(e);
+      }}
       inputMode="numeric"
       autoComplete="cc-csc"
     />

package/src/components/Card/CardExpiry.tsx

@@ -1,20 +1,20 @@
-import { TextInputMask } from 'react-native-masked-text';
-import { removeFieldFromSet, useCardContext } from './context';
-import * as React from 'react';
-import { useEffect } from 'react';
-import { BaseProps } from './Card';
+import { TextInputMask } from "react-native-masked-text";
+import { removeFieldFromSet, useCardContext } from "./context";
+import * as React from "react";
+import { useEffect } from "react";
+import { BaseProps } from "./Card";
 
 export interface CardExpiryProps extends BaseProps {}
 
 export function CardExpiry(props: CardExpiryProps) {
   const context = useCardContext();
 
-  const { onBlur, onChange } = context.register('expiry');
+  const { onBlur, onChange } = context.register("expiry");
 
   useEffect(() => {
-    context.setRegisteredFields((prev) => new Set(prev).add('expiry'));
+    context.setRegisteredFields((prev) => new Set(prev).add("expiry"));
     return () =>
-      context.setRegisteredFields((prev) => removeFieldFromSet(prev, 'expiry'));
+      context.setRegisteredFields((prev) => removeFieldFromSet(prev, "expiry"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -24,13 +24,16 @@ export function CardExpiry(props: CardExpiryProps) {
       type="datetime"
       value={context.values.expiry}
       // store the expiry as MMYY not MM / YY
-      onChangeText={(rawExpiry) => onChange(rawExpiry.replace(' / ', ''))}
+      onChangeText={(rawExpiry) => onChange(rawExpiry.replace(" / ", ""))}
       options={{
-        format: '99 / 99',
+        format: "99 / 99",
       }}
       id="expiry"
-      onBlur={onBlur}
-      placeholder={props.placeholder ?? 'MM / YY'}
+      onBlur={(e) => {
+        onBlur(e);
+        props.onBlur?.(e);
+      }}
+      placeholder={props.placeholder ?? "MM / YY"}
       inputMode="numeric"
       autoComplete="cc-exp"
     />

package/src/components/Card/CardHolder.tsx

@@ -1,20 +1,20 @@
-import { useEffect } from 'react';
-import * as React from 'react';
-import { Platform, TextInput } from 'react-native';
-import { removeFieldFromSet, useCardContext } from './context';
-import { BaseProps } from './Card';
+import { useEffect } from "react";
+import * as React from "react";
+import { Platform, TextInput } from "react-native";
+import { removeFieldFromSet, useCardContext } from "./context";
+import { BaseProps } from "./Card";
 
 export interface CardHolderProps extends BaseProps {}
 
 export function CardHolder(props: CardHolderProps) {
   const context = useCardContext();
 
-  const { onBlur, onChange } = context.register('name');
+  const { onBlur, onChange } = context.register("name");
 
   useEffect(() => {
-    context.setRegisteredFields((prev) => new Set(prev).add('name'));
+    context.setRegisteredFields((prev) => new Set(prev).add("name"));
     return () =>
-      context.setRegisteredFields((prev) => removeFieldFromSet(prev, 'name'));
+      context.setRegisteredFields((prev) => removeFieldFromSet(prev, "name"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -23,10 +23,13 @@ export function CardHolder(props: CardHolderProps) {
       {...props}
       id="name"
       value={context.values.name}
-      onBlur={onBlur}
+      onBlur={(e) => {
+        onBlur(e);
+        props.onBlur?.(e);
+      }}
       autoComplete={Platform.select({
-        ios: 'cc-name',
-        android: 'name',
+        ios: "cc-name",
+        android: "name",
       })}
       onChangeText={(v) => onChange(v)}
     />

package/src/components/Card/CardNumber.tsx

@@ -1,9 +1,9 @@
-import { validateNumber } from '@evervault/card-validator';
-import * as React from 'react';
-import { useEffect, useMemo, useRef } from 'react';
-import { TextInputMask } from 'react-native-masked-text';
-import { removeFieldFromSet, useCardContext } from './context';
-import { BaseProps } from './Card';
+import { validateNumber } from "@evervault/card-validator";
+import * as React from "react";
+import { useEffect, useMemo, useRef } from "react";
+import { TextInputMask } from "react-native-masked-text";
+import { removeFieldFromSet, useCardContext } from "./context";
+import { BaseProps } from "./Card";
 
 interface CardNumberProps extends BaseProps {}
 
@@ -17,9 +17,9 @@ export function CardNumber(props: CardNumberProps) {
     const { brand } = validateNumber(value);
 
     const masks = {
-      'default': '9999 9999 9999 9999',
-      'unionpay': '9999 9999 9999 9999 999',
-      'american-express': '9999 999999 99999',
+      default: "9999 9999 9999 9999",
+      unionpay: "9999 9999 9999 9999 999",
+      "american-express": "9999 999999 99999",
     } as Record<string, string>;
 
     if (brand && !!masks[brand]) {
@@ -28,13 +28,13 @@ export function CardNumber(props: CardNumberProps) {
     return [value, masks.default];
   }, [context.values.number]);
 
-  const { onBlur, onChange } = context.register('number');
+  const { onBlur, onChange } = context.register("number");
 
   useEffect(() => {
-    context.setRegisteredFields((prev) => new Set(prev).add('number'));
+    context.setRegisteredFields((prev) => new Set(prev).add("number"));
 
     return () =>
-      context.setRegisteredFields((prev) => removeFieldFromSet(prev, 'number'));
+      context.setRegisteredFields((prev) => removeFieldFromSet(prev, "number"));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -47,7 +47,10 @@ export function CardNumber(props: CardNumberProps) {
       id="number"
       value={innerValue}
       onChangeText={onChange}
-      onBlur={onBlur}
+      onBlur={(e) => {
+        onBlur(e);
+        props.onBlur?.(e);
+      }}
       inputMode="numeric"
       autoComplete="cc-number"
     />

package/src/components/Card/context.tsx

@@ -1,25 +1,25 @@
-import { UseFormReturn } from '../useForm';
-import { Dispatch, SetStateAction, createContext, useContext } from 'react';
-import { CardForm, CardField } from './types';
+import { UseFormReturn } from "../useForm";
+import { Dispatch, SetStateAction, createContext, useContext } from "react";
+import { CardForm, CardField } from "./types";
 
 type Context<T> = {
   values: CardForm;
-  register: UseFormReturn<T>['register'];
+  register: UseFormReturn<T>["register"];
   setRegisteredFields: Dispatch<SetStateAction<Set<CardField>>>;
 };
 
 export const removeFieldFromSet = (prev: Set<CardField>, field: CardField) => {
   const next = new Set(prev);
-  next.delete('name');
+  next.delete("name");
   return next;
 };
 
 export const CardContext = createContext<Context<CardForm>>({
   values: {
-    name: '',
-    number: '',
-    cvc: '',
-    expiry: '',
+    name: "",
+    number: "",
+    cvc: "",
+    expiry: "",
   },
   register: () => ({
     onChange: () => {},

package/src/components/Card/index.ts

@@ -1 +1 @@
-export { Card, type CardProps } from './Card';
+export { Card, type CardProps } from "./Card";

package/src/components/Card/types.ts

@@ -1,17 +1,17 @@
 export type CardBrandName =
-  | 'american-express'
-  | 'visa'
-  | 'mastercard'
-  | 'discover'
-  | 'jcb'
-  | 'diners-club'
-  | 'unionpay'
-  | 'maestro'
-  | 'mir'
-  | 'elo'
-  | 'hipercard'
-  | 'hiper'
-  | 'szep';
+  | "american-express"
+  | "visa"
+  | "mastercard"
+  | "discover"
+  | "jcb"
+  | "diners-club"
+  | "unionpay"
+  | "maestro"
+  | "mir"
+  | "elo"
+  | "hipercard"
+  | "hiper"
+  | "szep";
 
 export interface CardConfig {
   acceptedBrands?: CardBrandName[];
@@ -24,7 +24,7 @@ export interface CardForm {
   expiry: string;
 }
 
-export type CardField = 'name' | 'number' | 'expiry' | 'cvc';
+export type CardField = "name" | "number" | "expiry" | "cvc";
 
 export interface CardExpiry {
   month: string | null;