Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@evervault/react
Advanced tools
@evervault/react - npm Package Compare versions
Comparing version 2.3.1 to 2.3.2
@@ -1,19 +0,93 @@ | ||
| import type { CardPayload } from 'types'; | ||
| import type { CardTranslations } from 'types'; | ||
| import type { CustomConfig as CustomConfig_2 } from '@evervault/browser'; | ||
| import type EvervaultClient from '@evervault/browser'; | ||
| import type { EvervaultRequestProps } from '@evervault/browser'; | ||
| import type { InputSettings } from '@evervault/browser'; | ||
| import type { PinOptions } from 'types'; | ||
| import type { PinPayload } from 'types'; | ||
| import { events } from 'events'; | ||
| import * as React_2 from 'react'; | ||
| import { ReactNode } from 'react'; | ||
| import type { RevealFormat } from 'types'; | ||
| import type { RevealSettings } from '@evervault/browser'; | ||
| import type { SwipedCard } from 'types'; | ||
| import type { ThemeDefinition } from 'types'; | ||
| import * as themes from 'themes'; | ||
| import type { Styles } from 'jss'; | ||
| declare interface CageKey { | ||
| teamUuid: string; | ||
| appUuid: string; | ||
| key: string; | ||
| ecdhKey: string; | ||
| ecdhP256Key: string; | ||
| ecdhP256KeyUncompressed: string; | ||
| isDebugMode: boolean; | ||
| } | ||
| export declare function Card({ theme, onSwipe, onReady, onError, onChange, translations, }: CardProps): React_2.JSX.Element; | ||
| declare class Card_2 { | ||
| #private; | ||
| values?: CardPayload; | ||
| constructor(client: EvervaultClient, options?: CardOptions); | ||
| get config(): { | ||
| theme: ThemeDefinition | undefined; | ||
| config: { | ||
| autoFocus: boolean | undefined; | ||
| translations: Partial<CardTranslations> | undefined; | ||
| hiddenFields: string; | ||
| }; | ||
| }; | ||
| mount(selector: SelectorType): this; | ||
| update(options?: CardOptions): this; | ||
| unmount(): this; | ||
| on<T extends keyof CardEvents>(event: T, callback: CardEvents[T]): () => void; | ||
| validate(): this; | ||
| } | ||
| declare interface CardEvents { | ||
| ready: () => void; | ||
| error: () => void; | ||
| change: (payload: CardPayload) => void; | ||
| swipe: (payload: SwipedCard) => void; | ||
| } | ||
| declare interface CardExpiry { | ||
| month: string | null; | ||
| year: string | null; | ||
| } | ||
| export declare type CardField = "number" | "expiry" | "cvc"; | ||
| declare interface CardFieldTranslations<E extends TranslationsObject> | ||
| extends TranslationsObject { | ||
| label?: string; | ||
| placeholder?: string; | ||
| errors?: E; | ||
| } | ||
| export declare interface CardFrameClientMessages | ||
| extends EvervaultFrameClientMessages { | ||
| EV_SWIPE: SwipedCard; | ||
| EV_CHANGE: CardPayload; | ||
| } | ||
| export declare interface CardFrameHostMessages | ||
| extends EvervaultFrameHostMessages { | ||
| EV_VALIDATE: undefined; | ||
| } | ||
| export declare interface CardOptions { | ||
| theme?: ThemeDefinition; | ||
| autoFocus?: boolean; | ||
| hiddenFields?: CardField[]; | ||
| translations?: Partial<CardTranslations>; | ||
| } | ||
| export declare interface CardPayload { | ||
| isValid: boolean; | ||
| card: { | ||
| brand: string | undefined; | ||
| number: string | null; | ||
| lastFour: string | null; | ||
| bin: string | null; | ||
| expiry: CardExpiry; | ||
| cvc: string | null; | ||
| }; | ||
| errors: null | Partial<{ | ||
| number?: string; | ||
| cvc?: string; | ||
| expiry?: string; | ||
| }>; | ||
| } | ||
| declare interface CardProps { | ||
@@ -28,2 +102,91 @@ theme?: ThemeDefinition; | ||
| export declare interface CardTranslations extends TranslationsObject { | ||
| number: CardFieldTranslations<{ invalid?: string }>; | ||
| expiry: CardFieldTranslations<{ invalid?: string }>; | ||
| cvc: CardFieldTranslations<{ invalid?: string }>; | ||
| } | ||
| declare function clean(extended?: ThemeDefinition): ThemeDefinition { | ||
| return (utils) => ({ | ||
| styles: { | ||
| body: { | ||
| paddingBottom: 2, | ||
| }, | ||
| label: { | ||
| fontSize: 14, | ||
| marginBottom: 4, | ||
| display: "block", | ||
| color: "#0a2540", | ||
| }, | ||
| input: { | ||
| height: 40, | ||
| fontSize: 16, | ||
| borderRadius: 6, | ||
| color: "#0a2540", | ||
| padding: "0 12px", | ||
| backgroundColor: "#fff", | ||
| border: "1px solid #e6ebf1", | ||
| boxShadow: | ||
| "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)", | ||
| "&::placeholder": { | ||
| color: "#717f96", | ||
| }, | ||
| "&:focus": { | ||
| outline: "none", | ||
| borderColor: "#63e", | ||
| }, | ||
| }, | ||
| ".field[ev-valid=false] input": { | ||
| color: "#df1c41", | ||
| borderColor: "#df1c41", | ||
| }, | ||
| ".error": { | ||
| color: "#df1c41", | ||
| fontSize: "0.75rem", | ||
| padding: "0.25rem 0", | ||
| }, | ||
| "[ev-component=card]": { | ||
| gap: 16, | ||
| }, | ||
| "[ev-component=pin] input": { | ||
| height: 80, | ||
| fontSize: 20, | ||
| caretColor: "transparent", | ||
| }, | ||
| ...(extended ? utils.extend(extended) : {}), | ||
| }, | ||
| }); | ||
| } | ||
| declare interface ComponentsConfig { | ||
| url: string; | ||
| } | ||
| declare interface Config { | ||
| teamId: string; | ||
| appId: string; | ||
| encryption: EncryptionSubConfig; | ||
| http: HttpConfig; | ||
| input: InputConfig; | ||
| components: ComponentsConfig; | ||
| debugKey: typeof debugKey; | ||
| } | ||
| declare interface ConfigUrls { | ||
| keysUrl?: string; | ||
| inputsUrl?: string; | ||
| inputsOrigin?: string; | ||
| apiUrl?: string; | ||
| componentsUrl?: string; | ||
| } | ||
| declare class CoreCrypto { | ||
| #private; | ||
| constructor(ecdhTeamKey: Uint8Array, ecdhPublicKey: CryptoKey, derivedSecret: ArrayBuffer, config: EncryptionSubConfig, isDebug: boolean); | ||
| encrypt(data: unknown): Promise<string | Blob | File | Datatypes.EncryptedValue | Datatypes.EncryptedValue[] | Datatypes.EncrypedObject>; | ||
| } | ||
| export declare interface CustomConfig extends CustomConfig_2 { | ||
@@ -33,2 +196,167 @@ jsSdkUrl: string; | ||
| declare interface CustomConfig_2 { | ||
| isDebugMode?: boolean; | ||
| urls?: ConfigUrls; | ||
| publicKey?: string; | ||
| } | ||
| declare interface CustomStyles { | ||
| cardNumberText?: CSSStyleDeclaration; | ||
| cardNumberLabel?: CSSStyleDeclaration; | ||
| cardNumberGroup?: CSSStyleDeclaration; | ||
| securityCodeText?: CSSStyleDeclaration; | ||
| securityCodeLabel?: CSSStyleDeclaration; | ||
| securityCodeGroup?: CSSStyleDeclaration; | ||
| expirationDateText?: CSSStyleDeclaration; | ||
| expirationDateLabel?: CSSStyleDeclaration; | ||
| expirationDateGroup?: CSSStyleDeclaration; | ||
| topRow?: CSSStyleDeclaration; | ||
| bottomRow?: CSSStyleDeclaration; | ||
| copyButton?: CSSStyleDeclaration; | ||
| } | ||
| declare namespace Datatypes { | ||
| { | ||
| EncryptableAsString, | ||
| EncryptableValue, | ||
| EncryptableObject, | ||
| EncryptedValue, | ||
| EncrypedObject, | ||
| isDefined, | ||
| isArray, | ||
| isArrayBuffer, | ||
| isObject, | ||
| isObjectStrict, | ||
| isString, | ||
| isEmptyString, | ||
| isUndefined, | ||
| isNumber, | ||
| isBoolean, | ||
| isFile, | ||
| isEncryptableAsString, | ||
| getHeaderType, | ||
| ensureString, | ||
| utf8ToBase64URL | ||
| } | ||
| } | ||
| declare const debugKey: { | ||
| readonly ecdhP256KeyUncompressed: "BF1/Mo85D7t/XvC3I+YYpJvP+OsSyxIbSrhtDhg1SClQ2xdoyGpXYrplO/f8AZ+7cGkUnMF3tzSfLC5Io8BuNyw="; | ||
| readonly ecdhP256Key: "Al1/Mo85D7t/XvC3I+YYpJvP+OsSyxIbSrhtDhg1SClQ"; | ||
| readonly isDebugMode: true; | ||
| }; | ||
| declare const encryptionConstants: { | ||
| cipherAlgorithm: "aes-256-gcm"; | ||
| keyLength: 32; | ||
| ivLength: 12; | ||
| authTagLength: 128; | ||
| publicHash: "sha256"; | ||
| evVersion: "NOC"; | ||
| header: { | ||
| iss: "evervault"; | ||
| version: 1; | ||
| }; | ||
| maxFileSizeInMB: 25; | ||
| maxFileSizeInBytes: number; | ||
| }; | ||
| declare type EncryptionSubConfig = typeof encryptionConstants & { | ||
| publicKey?: string; | ||
| }; | ||
| declare class EvervaultClient { | ||
| #private; | ||
| /** @deprecated */ | ||
| forms: { | ||
| handleForm(form: any): Promise<{}>; | ||
| register(): void; | ||
| events: events; | ||
| }; | ||
| config: Config; | ||
| http: { | ||
| getCageKey: () => Promise<CageKey>; | ||
| decryptWithToken: <T>(token: string, data: T) => Promise<{ | ||
| value: T; | ||
| }>; | ||
| }; | ||
| input: { | ||
| generate(id: string, settings: InputSettings | RevealSettings, isReveal?: boolean, request?: Request | EvervaultRequestProps | undefined, onCopyCallback?: (() => void) | undefined): { | ||
| isInputsLoaded: Promise<boolean>; | ||
| getData: () => Promise<unknown>; | ||
| on: (e: unknown, fn: (data: unknown) => void) => void; | ||
| setLabels: (labels: Record<string, unknown>) => void; | ||
| }; | ||
| }; | ||
| ui: UIComponents; | ||
| /** | ||
| * The SDK constructor accepts two parameters: | ||
| * - Your Team ID | ||
| * - Your App ID | ||
| * | ||
| * @param teamId The ID of your Evervault team. This can be found inside of your team settings on the [Evervault dashboard](https://app.evervault.com). | ||
| * @param appId The ID of your Evervault app. This can be found inside of your app settings on the [Evervault dashboard](https://app.evervault.com). | ||
| */ | ||
| constructor(teamId: string, appId: string, customConfig?: CustomConfig_2); | ||
| loadKeys(): Promise<CoreCrypto>; | ||
| getContext(origin: string, inputsUrl: string): SdkContext; | ||
| /** | ||
| * Initializes Evervault Inputs. Evervault Inputs makes it easy to collect encrypted cardholder data in a completely PCI-compliant environment. | ||
| * Evervault Inputs are served within an iFrame retrieved directly from Evervault’s PCI-compliant infrastructure, which can reduce your PCI DSS compliance scope to the simplest form (SAQ A). | ||
| * Simply pass the ID of the element in which the iFrame should be embedded. | ||
| * We also support themes and custom styles so you can customise how Inputs looks in your UI. | ||
| * @param data - The data to encrypt. | ||
| * @returns The encrypted data. | ||
| */ | ||
| encrypt(data: File): Promise<File>; | ||
| encrypt(data: Blob): Promise<Blob>; | ||
| encrypt(data: Datatypes.EncryptableAsString): Promise<string>; | ||
| encrypt(data: Datatypes.EncryptableValue[]): Promise<Datatypes.EncryptedValue[]>; | ||
| encrypt(data: Datatypes.EncryptableObject): Promise<NonNullable<unknown>>; | ||
| encrypt(data: unknown): Promise<string>; | ||
| /** | ||
| * Initializes Evervault Inputs. Evervault Inputs makes it easy to collect encrypted cardholder data in a completely PCI-compliant environment. | ||
| * Evervault Inputs are served within an iFrame retrieved directly from Evervault’s PCI-compliant infrastructure, which can reduce your PCI DSS compliance scope to the simplest form (SAQ A). | ||
| * Simply pass the ID of the element in which the iFrame should be embedded. | ||
| * We also support themes and custom styles so you can customise how Inputs looks in your UI. | ||
| * @param elementId ID of the DOM element in which the Evervault Inputs iFrame should be embedded. | ||
| * @param config A theme string (supported: default, minimal or material), or a config object for custom styles. | ||
| * @returns | ||
| */ | ||
| inputs(elementId: string, config?: string | InputSettings): { | ||
| isInputsLoaded: Promise<boolean>; | ||
| getData: () => Promise<unknown>; | ||
| on: (event: unknown, fn: (data: unknown) => void) => void; | ||
| setLabels: (labels: Record<string, unknown>) => void; | ||
| }; | ||
| reveal(elementId: string, request: Request | EvervaultRequestProps, config?: RevealSettings, onCopy?: () => void): { | ||
| isRevealLoaded: Promise<boolean>; | ||
| }; | ||
| /** | ||
| * @deprecated | ||
| */ | ||
| auto(fieldsToEncrypt?: never[]): void; | ||
| decrypt<T>(token: string, data: T): Promise<{ | ||
| value: T; | ||
| }>; | ||
| isInDebugMode(): boolean; | ||
| } | ||
| export declare interface EvervaultFrameClientMessages { | ||
| EV_RESIZE: { height: number }; | ||
| EV_FRAME_READY: undefined; | ||
| EV_FRAME_HANDSHAKE: undefined; | ||
| } | ||
| export declare interface EvervaultFrameHostMessages { | ||
| EV_INIT: { | ||
| theme?: ThemeObject; | ||
| config?: unknown; | ||
| }; | ||
| EV_UPDATE: { | ||
| theme?: ThemeObject; | ||
| config?: unknown; | ||
| }; | ||
| } | ||
| export declare function EvervaultInput({ onChange, config, onInputsLoad, }: EvervaultInputProps): React_2.JSX.Element; | ||
@@ -51,2 +379,16 @@ | ||
| declare interface EvervaultRequestProps { | ||
| cache?: RequestCache; | ||
| credentials?: RequestCredentials; | ||
| destination?: RequestDestination; | ||
| headers?: Record<string, string>; | ||
| integrity?: string; | ||
| keepalive?: boolean; | ||
| method?: string; | ||
| mode?: RequestMode; | ||
| referrer?: string; | ||
| referrerPolicy?: ReferrerPolicy; | ||
| url?: string; | ||
| } | ||
| export declare function EvervaultReveal({ request, config, onCopy, onRevealLoad, onRevealError, }: EvervaultRevealProps): React_2.JSX.Element; | ||
@@ -62,4 +404,299 @@ | ||
| declare interface HttpConfig { | ||
| keysUrl: string; | ||
| apiUrl: string; | ||
| } | ||
| declare interface InputConfig { | ||
| inputsOrigin: string; | ||
| } | ||
| declare interface InputSettings { | ||
| theme?: string; | ||
| height?: string; | ||
| primaryColor?: string; | ||
| labelColor?: string; | ||
| inputBorderColor?: string; | ||
| inputTextColor?: string; | ||
| inputBackgroundColor?: string; | ||
| inputBorderRadius?: string; | ||
| inputHeight?: string; | ||
| cardNumberLabel?: string; | ||
| expirationDateLabel?: string; | ||
| securityCodeLabel?: string; | ||
| expirationDatePlaceholder?: string; | ||
| invalidCardNumberLabel?: string; | ||
| invalidExpirationDateLabel?: string; | ||
| invalidSecurityCodeLabel?: string; | ||
| fontUrl?: string; | ||
| fontFamily?: string; | ||
| inputFontSize?: string; | ||
| inputBoxShadow?: string; | ||
| labelFontSize?: string; | ||
| labelWeight?: string; | ||
| disableCVV?: string; | ||
| disableExpiry?: string; | ||
| } | ||
| declare function material(extended?: ThemeDefinition): ThemeDefinition { | ||
| return (utils) => ({ | ||
| styles: { | ||
| body: { | ||
| paddingTop: 4, | ||
| }, | ||
| ".field": { | ||
| position: "relative", | ||
| }, | ||
| label: { | ||
| top: 10, | ||
| left: 8, | ||
| zIndex: 3, | ||
| fontSize: 14, | ||
| lineHeight: 1, | ||
| height: "20px", | ||
| display: "flex", | ||
| color: "#717f96", | ||
| padding: "0 4px", | ||
| alignItems: "center", | ||
| position: "absolute", | ||
| pointerEvents: "none", | ||
| transformOrigin: "center left", | ||
| transition: "transform 150ms, background 150ms", | ||
| }, | ||
| input: { | ||
| height: 40, | ||
| fontSize: 16, | ||
| borderRadius: 6, | ||
| color: "#0a2540", | ||
| padding: "0 12px", | ||
| backgroundColor: "#fff", | ||
| border: "1px solid #e6ebf1", | ||
| "&::placeholder": { | ||
| color: "transparent", | ||
| }, | ||
| "&:focus": { | ||
| outline: "none", | ||
| borderColor: "#63e", | ||
| }, | ||
| }, | ||
| ".field[ev-valid=false] input": { | ||
| color: "#df1c41", | ||
| borderColor: "#df1c41", | ||
| }, | ||
| ".field:focus-within label, .field:not([ev-has-value=false]) label": { | ||
| background: "white", | ||
| transform: "translateY(-100%) scale(0.8)", | ||
| }, | ||
| ".error": { | ||
| color: "#df1c41", | ||
| fontSize: "0.75rem", | ||
| padding: "0.25rem 0", | ||
| }, | ||
| ".field:not([ev-valid=false]):focus-within label": { | ||
| color: "#63e", | ||
| }, | ||
| ".field[ev-valid=false] label": { | ||
| color: "#df1c41", | ||
| }, | ||
| ".field[ev-has-value=true][ev-valid=true]:not(:focus-within) label": { | ||
| color: "#0a2540", | ||
| }, | ||
| "[ev-component=card]": { | ||
| gap: 16, | ||
| }, | ||
| ...(extended ? utils.extend(extended) : {}), | ||
| }, | ||
| }); | ||
| } | ||
| declare function minimal(extended?: ThemeDefinition): ThemeDefinition { | ||
| return (utils) => ({ | ||
| styles: { | ||
| body: { | ||
| paddingBottom: 2, | ||
| }, | ||
| label: { | ||
| fontSize: 14, | ||
| marginBottom: "0.5rem", | ||
| color: "#0a2540", | ||
| display: "none", | ||
| }, | ||
| ".field:first-child label": { | ||
| display: "block", | ||
| }, | ||
| "fieldset[ev-valid=false]": { | ||
| paddingBottom: "1.5rem", | ||
| }, | ||
| input: { | ||
| height: 40, | ||
| fontSize: 16, | ||
| borderRadius: 0, | ||
| color: "#0a2540", | ||
| padding: "0 12px", | ||
| backgroundColor: "#fff", | ||
| border: "1px solid #e6ebf1", | ||
| boxShadow: | ||
| "0px 1px 1px rgba(0, 0, 0, .03), 0px 3px 6px rgba(0, 0, 0, .02)", | ||
| "&::placeholder": { | ||
| color: "#717f96", | ||
| }, | ||
| "&:focus": { | ||
| outline: "none", | ||
| borderColor: "#63e", | ||
| }, | ||
| }, | ||
| ".field[ev-valid=false] input": { | ||
| color: "#df1c41", | ||
| borderColor: "#df1c41", | ||
| }, | ||
| ".error": { | ||
| color: "#df1c41", | ||
| fontSize: "0.75rem", | ||
| padding: "0.25rem 0", | ||
| position: "absolute", | ||
| left: 0, | ||
| bottom: 0, | ||
| display: "none", | ||
| }, | ||
| ".field[ev-valid=false]": { | ||
| zIndex: 4, | ||
| }, | ||
| ".field:focus-within": { | ||
| zIndex: 5, | ||
| }, | ||
| "[ev-component=card]": { | ||
| gap: 0, | ||
| "& .field[ev-valid=false]:nth-child(1) .error": { | ||
| display: "block", | ||
| }, | ||
| "& [ev-valid=true]:nth-child(1) + [ev-valid=false] .error": { | ||
| display: "block", | ||
| }, | ||
| "& [ev-valid=true]:nth-child(1) + [ev-valid=true]:nth-child(2) + [ev-valid=false] .error": | ||
| { | ||
| display: "block", | ||
| }, | ||
| "& [ev-name=number]": { | ||
| marginBottom: "-1px", | ||
| "& input": { | ||
| borderTopLeftRadius: 6, | ||
| borderTopRightRadius: 6, | ||
| }, | ||
| }, | ||
| "& .field:nth-child(2) input": { | ||
| borderBottomLeftRadius: 6, | ||
| }, | ||
| "& .field:nth-child(3)": { | ||
| marginLeft: "-1px", | ||
| }, | ||
| "& .field:last-child input": { | ||
| borderBottomRightRadius: 6, | ||
| }, | ||
| }, | ||
| "[ev-component=pin]": { | ||
| gap: 0, | ||
| "& input": { | ||
| height: 60, | ||
| }, | ||
| "& .field:not(:first-child)": { | ||
| marginLeft: "-1px", | ||
| }, | ||
| "& .field:first-child input": { | ||
| borderTopLeftRadius: 6, | ||
| borderBottomLeftRadius: 6, | ||
| }, | ||
| "& .field:last-child input": { | ||
| borderTopRightRadius: 6, | ||
| borderBottomRightRadius: 6, | ||
| }, | ||
| }, | ||
| ...(extended ? utils.extend(extended) : {}), | ||
| }, | ||
| }); | ||
| } | ||
| export declare function Pin({ theme, onReady, onChange, onError, length }: PinProps): React_2.JSX.Element; | ||
| declare class Pin_2 { | ||
| #private; | ||
| values: PinPayload; | ||
| constructor(client: EvervaultClient, options?: PinOptions); | ||
| get config(): { | ||
| theme: ThemeDefinition | undefined; | ||
| config: { | ||
| length: number; | ||
| mode: "numeric" | "alphanumeric"; | ||
| autoFocus: boolean | undefined; | ||
| inputType: "number" | "text" | "password" | undefined; | ||
| }; | ||
| }; | ||
| mount(selector: SelectorType): this; | ||
| unmount(): this; | ||
| update(options: PinOptions): this; | ||
| on<T extends keyof PinEvents>(event: T, callback: PinEvents[T]): () => void; | ||
| } | ||
| declare interface PinEvents { | ||
| ready: () => void; | ||
| error: () => void; | ||
| change: (payload: PinPayload) => void; | ||
| complete: (payload: PinPayload) => void; | ||
| } | ||
| export declare interface PinFrameClientMessages extends EvervaultFrameClientMessages { | ||
| EV_CHANGE: PinPayload; | ||
| EV_COMPLETE: PinPayload; | ||
| } | ||
| export declare interface PinOptions { | ||
| theme?: ThemeDefinition; | ||
| length?: number; | ||
| autoFocus?: boolean; | ||
| mode?: "numeric" | "alphanumeric"; | ||
| inputType?: "number" | "text" | "password"; | ||
| } | ||
| export declare interface PinPayload { | ||
| isComplete: boolean; | ||
| value: string | null; | ||
| } | ||
| declare type PinProps = PinOptions & { | ||
@@ -82,4 +719,46 @@ onReady?: () => void; | ||
| declare class Reveal_2 { | ||
| #private; | ||
| ready: boolean; | ||
| channel: string; | ||
| consumers: (RevealText_2 | RevealCopyButton_2)[]; | ||
| constructor(client: EvervaultClient, request: Request); | ||
| text(path: string, options?: RevealTextOptions): RevealText_2; | ||
| copyButton(path: string, options?: RevealCopyButtonOptions): RevealCopyButton_2; | ||
| unmount(): this; | ||
| on<T extends keyof RevealEvents>(event: T, callback: RevealEvents[T]): () => void; | ||
| checkIfReady(): void; | ||
| } | ||
| export declare interface RevealConsumerClientMessages | ||
| extends EvervaultFrameClientMessages { | ||
| EV_COPY: undefined; | ||
| EV_REVEAL_CONSUMER_READY: undefined; | ||
| EV_REVEAL_CONSUMER_ERROR: string; | ||
| } | ||
| declare function RevealCopyButton({ path, onCopy, ...options }: RevealCopyButtonProps): React_2.JSX.Element; | ||
| declare class RevealCopyButton_2 { | ||
| #private; | ||
| path: string; | ||
| ready: boolean; | ||
| options: RevealCopyButtonOptions; | ||
| constructor(reveal: Reveal_2, client: EvervaultClient, path: string, options?: RevealCopyButtonOptions); | ||
| mount(selector: SelectorType): this; | ||
| unmount(): this; | ||
| on<T extends keyof RevealCopyButtonEvents>(event: T, callback: RevealCopyButtonEvents[T]): () => void; | ||
| } | ||
| declare interface RevealCopyButtonEvents { | ||
| copy: () => void; | ||
| } | ||
| declare interface RevealCopyButtonOptions { | ||
| theme?: ThemeDefinition; | ||
| text?: string; | ||
| icon?: string; | ||
| format?: RevealFormat; | ||
| } | ||
| declare interface RevealCopyButtonProps { | ||
@@ -90,2 +769,12 @@ path: string; | ||
| declare interface RevealEvents { | ||
| ready: () => void; | ||
| error: () => void; | ||
| } | ||
| export declare interface RevealFormat { | ||
| regex: RegExp; | ||
| replace: string; | ||
| } | ||
| declare interface RevealProps { | ||
@@ -98,4 +787,41 @@ request: Request; | ||
| export declare interface RevealRequestClientMessages | ||
| extends EvervaultFrameClientMessages { | ||
| EV_REVEAL_REQUEST_READY: undefined; | ||
| EV_ERROR: undefined; | ||
| } | ||
| declare interface RevealSettings { | ||
| theme?: string; | ||
| height?: string; | ||
| revealFontSize?: string; | ||
| revealFontWeight?: string; | ||
| revealTextColor?: string; | ||
| fontUrl?: string; | ||
| fontFamily?: string; | ||
| cardNumberLabel?: string; | ||
| expirationDateLabel?: string; | ||
| securityCodeLabel?: string; | ||
| labelFontSize?: string; | ||
| labelFontWeight?: string; | ||
| labelColor?: string; | ||
| customStyles?: CustomStyles; | ||
| } | ||
| declare function RevealText({ path, theme, format }: RevealTextProps): React_2.JSX.Element; | ||
| declare class RevealText_2 { | ||
| #private; | ||
| path: string; | ||
| ready: boolean; | ||
| constructor(reveal: Reveal_2, client: EvervaultClient, path: string, options?: RevealTextOptions); | ||
| mount(selector: SelectorType): this; | ||
| unmount(): this; | ||
| } | ||
| declare interface RevealTextOptions { | ||
| theme?: ThemeDefinition; | ||
| format?: RevealFormat; | ||
| } | ||
| declare interface RevealTextProps { | ||
@@ -107,9 +833,61 @@ path: string; | ||
| declare type SdkContext = "inputs" | "default"; | ||
| export declare type SelectorType = string | HTMLElement; | ||
| export declare interface SwipedCard { | ||
| brand: string | undefined; | ||
| number: string | null; | ||
| expiry: CardExpiry | null; | ||
| firstName: string | null; | ||
| lastName: string | null; | ||
| lastFour: string | null; | ||
| bin: string | null; | ||
| } | ||
| export declare type ThemeDefinition = ThemeObject | ThemeFunction; | ||
| export declare type ThemeFunction = (utilities: ThemeUtilities) => ThemeObject; | ||
| export declare interface ThemeObject { | ||
| fonts?: string[]; | ||
| styles?: ThemeStyles; | ||
| } | ||
| declare namespace themes { | ||
| export { | ||
| clean, | ||
| material, | ||
| minimal | ||
| } | ||
| } | ||
| export { themes } | ||
| export declare function useEvervault(): PromisifiedEvervaultClient | null; | ||
| export declare type ThemeStyles = Partial<Styles>; | ||
| export declare interface ThemeUtilities { | ||
| media: (property: string, styles: ThemeStyles) => object; | ||
| extend: (theme: ThemeDefinition) => object; | ||
| } | ||
| export * from "types"; | ||
| export declare interface TranslationsObject { | ||
| [key: string]: string | TranslationsObject | undefined; | ||
| } | ||
| export declare interface UIComponentMessageDetail { | ||
| type: string; | ||
| payload: unknown; | ||
| } | ||
| declare class UIComponents { | ||
| client: EvervaultClient; | ||
| themes: typeof themes; | ||
| constructor(client: EvervaultClient); | ||
| card(opts?: CardOptions): Card_2; | ||
| pin(opts?: PinOptions): Pin_2; | ||
| reveal(request: Request): Reveal_2; | ||
| } | ||
| export declare function useEvervault(): PromisifiedEvervaultClient | null; | ||
| export { } |
| { | ||
| "private": false, | ||
| "name": "@evervault/react", | ||
| "version": "2.3.1", | ||
| "version": "2.3.2", | ||
| "description": "React package for the Evervault SDK", | ||
@@ -37,5 +37,5 @@ "license": "MIT", | ||
| "types": "^0.0.0", | ||
| "@evervault/browser": "^2.17.0", | ||
| "themes": "^0.0.0", | ||
| "tsconfig": "^0.0.1", | ||
| "@evervault/browser": "^2.17.0" | ||
| "tsconfig": "^0.0.1" | ||
| }, | ||
@@ -42,0 +42,0 @@ "scripts": { |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by53.24%
65649
- Lines of code
- increased by109.13%
1305
No dependency changes