@coinbase/cdp-react 0.0.98 → 0.0.100

package/dist/components/VerifyMfa/VerifyMfaFlow.d.ts

@@ -1,12 +1,42 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { MfaMethod, VerifyMfaStep } from './types';
+/**
+ * Props for the VerifyMfaFlow component.
+ */
 export interface VerifyMfaFlowProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** If set, will auto focus the form when the component mounts. */
     autoFocus?: boolean;
+    /** If set, will animate the height of the component. */
     animateHeight?: boolean;
+    /** The children of the component. */
     children?: (props: {
         step: VerifyMfaStep;
         method: MfaMethod;
         Content: ReactNode;
     }) => ReactNode;
 }
+/**
+ * The flow for the VerifyMfa component. Renders the appropriate content
+ * based on the current MFA method and step.
+ *
+ * The "verification" step renders the current method's content (verification form).
+ * The "list" step renders alternate method options.
+ *
+ * @param {VerifyMfaFlowProps} props - The component props.
+ * @param {boolean} [props.autoFocus] - Whether to auto focus the form when the component mounts.
+ * @param {boolean} [props.animateHeight] - Whether to animate the height of the component.
+ * @param {(props: { step: VerifyMfaStep; method: MfaMethod; Content: ReactNode }) => ReactNode} [props.children] - The children of the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <VerifyMfa>
+ *   <VerifyMfaTitle />
+ *   <VerifyMfaDescription />
+ *   <VerifyMfaFlow />
+ * </VerifyMfa>
+ * ```
+ */
 export declare const VerifyMfaFlow: ({ autoFocus, animateHeight, children, className, ...props }: VerifyMfaFlowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerifyMfa/VerifyMfaFlowBackButton.d.ts

@@ -1,9 +1,28 @@
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonProps } from '../ui/Button/Button';
 import { VerifyMfaStep } from './types';
+/**
+ * Props for the VerifyMfaFlowBackButton component.
+ *
+ * @see {@link VerifyMfaFlowBackButton}
+ */
 export interface VerifyMfaFlowBackButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** If set, will render the back button for this step of the flow, regardless of the context value. */
     step?: VerifyMfaStep;
+    /** The size of the button. */
     size?: ButtonProps["size"];
+    /** The variant of the button. */
     variant?: ButtonProps["variant"];
 }
+/**
+ * A button to go back to the previous step of the MFA verification flow.
+ *
+ * @param {VerifyMfaFlowBackButtonProps} props - The props for the component.
+ * @returns {JSX.Element | null} The rendered component.
+ *
+ * @see {@link VerifyMfaFlow}
+ * @see {@link VerifyMfa}
+ *
+ * @group Components
+ */
 export declare const VerifyMfaFlowBackButton: ({ ["aria-label"]: ariaLabel, children, className, size, onClick, variant, step: stepFromProps, ...props }: VerifyMfaFlowBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VerifyMfa/VerifyMfaFlowProvider.d.ts

@@ -1,23 +1,74 @@
 import { ReactNode, RefObject } from 'react';
 import { SwitchSlideTransitionRef } from '../ui/SwitchSlideTransition';
 import { MfaMethod, VerifyMfaStep } from './types';
+/**
+ * The value of the MFA verification flow context.
+ *
+ * @see {@link useVerifyMfaFlow}
+ */
 export interface VerifyMfaFlowContextValue {
+    /** A function to go back to the previous step. */
     back: () => void;
+    /** The direction of the flow transition. */
     direction: "left" | "right";
+    /** A function to select an alternate verification method. */
     selectMethod: (method: MfaMethod) => void;
+    /** A function to show the alternate methods list. */
     showMethodList: () => void;
 }
+/**
+ * The value of the MFA verification flow context for internal use.
+ *
+ * @see {@link useVerifyMfaFlowInternal}
+ */
 export interface VerifyMfaFlowContextValueInternal extends VerifyMfaFlowContextValue {
+    /** A ref to the flow transition. */
     transitionRef: RefObject<SwitchSlideTransitionRef<VerifyMfaStep> | null> | null;
 }
+/**
+ * Props for the VerifyMfaFlowProvider component.
+ *
+ * @see {@link VerifyMfaFlowProvider}
+ */
 export interface VerifyMfaFlowProviderProps {
+    /** The children of the component. */
     children?: ReactNode;
+    /** The direction of the flow transition. */
     direction: VerifyMfaFlowContextValue["direction"];
+    /** A function to go back to the previous step. */
     onBack: VerifyMfaFlowContextValue["back"];
+    /** A function to select an alternate verification method. */
     onSelectMethod: VerifyMfaFlowContextValue["selectMethod"];
+    /** A function to show the alternate methods list. */
     onShowMethodList: VerifyMfaFlowContextValue["showMethodList"];
+    /** A ref to the flow transition. */
     transitionRef: VerifyMfaFlowContextValueInternal["transitionRef"];
 }
+/**
+ * A hook to get the MFA verification flow context value (internal).
+ *
+ * @returns {VerifyMfaFlowContextValueInternal} The context value.
+ *
+ * @group Hooks
+ */
 export declare const useVerifyMfaFlowInternal: () => VerifyMfaFlowContextValueInternal;
+/**
+ * A hook to get the MFA verification flow context value.
+ *
+ * @returns {VerifyMfaFlowContextValue} The context value.
+ *
+ * @see {@link VerifyMfaFlow}
+ * @see {@link VerifyMfa}
+ *
+ * @group Hooks
+ */
 export declare const useVerifyMfaFlow: () => VerifyMfaFlowContextValue;
+/**
+ * A provider for the MFA verification flow.
+ *
+ * @param {VerifyMfaFlowProviderProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ */
 export declare const VerifyMfaFlowProvider: ({ children, direction, onBack, onSelectMethod, onShowMethodList, transitionRef, }: VerifyMfaFlowProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerifyMfa/VerifyMfaFooter.d.ts

@@ -1,2 +1,20 @@
 import { HTMLAttributes } from 'react';
+/**
+ * A footer component for the MFA verification flow.
+ *
+ * @param props - The props for the component.
+ * @returns The rendered footer.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <VerifyMfa>
+ *   <VerifyMfaTitle />
+ *   <VerifyMfaDescription />
+ *   <VerifyMfaFlow />
+ *   <VerifyMfaFooter />
+ * </VerifyMfa>
+ * ```
+ */
 export declare const VerifyMfaFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerifyMfa/VerifyMfaImage.d.ts

@@ -1,6 +1,29 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { VerifyMfaMethodComponentProps } from './types';
+/**
+ * The props for the VerifyMfaImage component.
+ */
 export interface VerifyMfaImageProps extends VerifyMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
+/**
+ * A description for the VerifyMfa component.
+ *
+ * @param {VerifyMfaImageProps} props - The props for the component.
+ * @param {ElementType} [props.as] - The element type to render the description as.
+ * @param {MfaMethod} [props.method] - The MFA method to render the description for.
+ * @param {VerifyMfaState["step"]} [props.step] - The step of the verification flow.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <VerifyMfa>
+ *   <VerifyMfaTitle />
+ *   <VerifyMfaImage />
+ *   <VerifyMfaFlow />
+ * </VerifyMfa>
+ * ```
+ */
 export declare const VerifyMfaImage: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaImageProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VerifyMfa/VerifyMfaItem.d.ts

@@ -1,10 +1,30 @@
 import { MouseEventHandler, ReactNode } from 'react';
 import { MfaMethod } from './types';
+/**
+ * The props for the VerifyMfaItem component.
+ *
+ * @see {@link VerifyMfaItem}
+ */
 export interface VerifyMfaItemProps {
+    /** The MFA method this item represents. */
     method: MfaMethod;
+    /** An icon to display. */
     icon?: ReactNode;
+    /** A label for the MFA method. */
     label: string;
+    /** A function to call when the user selects this method. */
     onSelect: MouseEventHandler<HTMLButtonElement>;
 }
+/**
+ * A component for displaying an MFA method in the verification list.
+ *
+ * @param {VerifyMfaItemProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @see {@link VerifyMfaItems}
+ * @see {@link VerifyMfa}
+ *
+ * @group Components
+ */
 declare const VerifyMfaItem: ({ icon, label, onSelect }: VerifyMfaItemProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfaItem };

package/dist/components/VerifyMfa/VerifyMfaItems.d.ts

@@ -1,9 +1,27 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { MfaMethod } from './types';
 import { VerifyMfaItemProps } from './VerifyMfaItem';
+/**
+ * The props for the VerifyMfaItems component.
+ *
+ * @see {@link VerifyMfaItems}
+ */
 interface VerifyMfaItemsProps extends Omit<HTMLAttributes<HTMLUListElement>, "children" | "onSelect"> {
+    /** A render function for the MFA method item. */
     children?: (props: VerifyMfaItemProps) => ReactNode;
+    /** A function to call when a method is selected. */
     onSelect?: (method: MfaMethod) => void;
 }
+/**
+ * A list of alternate MFA verification methods.
+ * Filters out the currently selected method.
+ *
+ * @param {VerifyMfaItemsProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @see {@link VerifyMfa}
+ *
+ * @group Components
+ */
 declare const VerifyMfaItems: ({ children, className, onSelect, ...props }: VerifyMfaItemsProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfaItems, type VerifyMfaItemsProps };

package/dist/components/VerifyMfa/VerifyMfaProvider.d.ts

@@ -1,15 +1,55 @@
 import { Dispatch, ReactNode } from 'react';
 import { VerifyMfaAction, VerifyMfaState } from './types';
+/**
+ * The context value for the VerifyMfa component.
+ *
+ * @see {@link useVerifyMfaContext}
+ */
 export interface VerifyMfaContextValue {
+    /** The function to call when verification is successful. */
     onSuccess?: (mfaCode: string) => void;
+    /** The function to call when verification errors. */
     onError?: (error: Error) => void;
+    /** The current state of the verification flow. */
     state: VerifyMfaState;
+    /** The dispatch function to update the state. */
     dispatch: Dispatch<VerifyMfaAction>;
 }
+/**
+ * Hook to access the VerifyMfa context.
+ *
+ * @returns The current state and dispatch function of the VerifyMfa component.
+ *
+ * @group Hooks
+ *
+ * @see {@link VerifyMfa}
+ *
+ * @example
+ * ```tsx
+ * function MfaCodeDisplay() {
+ *   const { state } = useVerifyMfaContext();
+ *   return <div>Code: {state.mfaCode}</div>;
+ * }
+ * ```
+ */
 export declare const useVerifyMfaContext: () => VerifyMfaContextValue;
+/**
+ * Props for the VerifyMfaProvider component.
+ */
 export interface VerifyMfaProviderProps {
     children: ReactNode;
+    /** The function to call when verification is successful. */
     onSuccess?: (mfaCode: string) => void;
+    /** The function to call when verification errors. */
     onError?: (error: Error) => void;
 }
+/**
+ * A provider for the VerifyMfaContext.
+ *
+ * @param props - The props for the VerifyMfaProvider component.
+ * @param props.children - The children to render inside the provider.
+ * @param props.onSuccess - The function to call when verification is successful.
+ * @param props.onError - The function to call when verification errors.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const VerifyMfaProvider: ({ children, onError, onSuccess }: VerifyMfaProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/VerifyMfa/VerifyMfaTitle.d.ts

@@ -1,6 +1,30 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { VerifyMfaMethodComponentProps } from './types';
+/**
+ * The props for the VerifyMfaTitle component.
+ */
 export interface VerifyMfaTitleProps extends VerifyMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
+    /** The element type to render the title as. */
     as?: ElementType;
 }
+/**
+ * A title for the VerifyMfa component.
+ *
+ * @param {VerifyMfaTitleProps} props - The props for the component.
+ * @param {ElementType} [props.as] - The element type to render the title as.
+ * @param {MfaMethod} [props.method] - The MFA method to render the title for.
+ * @param {VerifyMfaState["step"]} [props.step] - The step of the verification flow.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <VerifyMfa>
+ *   <VerifyMfaTitle />
+ *   <VerifyMfaDescription />
+ *   <VerifyMfaFlow />
+ * </VerifyMfa>
+ * ```
+ */
 export declare const VerifyMfaTitle: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaTitleProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/VerifyMfa/index.d.ts

@@ -11,10 +11,65 @@ import { VerifyMfaItem, VerifyMfaItemProps } from './VerifyMfaItem';
 import { VerifyMfaItems, VerifyMfaItemsProps } from './VerifyMfaItems';
 import { useVerifyMfaContext, VerifyMfaContextValue } from './VerifyMfaProvider';
 import { VerifyMfaTitle, VerifyMfaTitleProps } from './VerifyMfaTitle';
+/**
+ * Props for the VerifyMfa component.
+ */
 interface VerifyMfaProps extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "onSubmit" | "onError"> {
+    /**
+     * The children of the component. Leave empty to use the default verification UI.
+     *
+     * If a function is provided, it will be called with the current state of the verification flow.
+     * The function should return a `ReactNode`.
+     *
+     * @example
+     * ```tsx
+     * <VerifyMfa>
+     *   {(state) => (
+     *     <>
+     *       <VerifyMfaTitle />
+     *       <VerifyMfaDescription />
+     *       <VerifyMfaFlow />
+     *     </>
+     *   )}
+     * </VerifyMfa>
+     * ```
+     */
     children?: ReactNode | ((state: VerifyMfaState) => ReactNode);
+    /** A function to call when the verification is successful. */
     onSuccess?: (mfaCode: string) => void;
+    /** A function to call when the verification errors. */
     onError?: (error: APIError | Error) => void;
 }
+/**
+ * A component for MFA verification. Prompts enrolled users to enter their
+ * authenticator code.
+ *
+ * @param {VerifyMfaProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @document ./README.md
+ *
+ * @example
+ * ```tsx
+ * // Default usage
+ * <VerifyMfa onSuccess={(mfaCode) => console.log("Verified!", mfaCode)} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom UI
+ * <VerifyMfa onSuccess={handleSuccess}>
+ *   {(state) => (
+ *     <>
+ *       <h2>Enter your code</h2>
+ *       <VerifyMfaFlow />
+ *       {state.error && <p className="error">{state.error}</p>}
+ *     </>
+ *   )}
+ * </VerifyMfa>
+ * ```
+ */
 declare const VerifyMfa: ({ onSuccess, onError, ...props }: VerifyMfaProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfa, VerifyMfaDescription, VerifyMfaFlow, VerifyMfaFlowBackButton, VerifyMfaFooter, VerifyMfaImage, VerifyMfaItem, VerifyMfaItems, VerifyMfaTitle, useVerifyMfaContext, useVerifyMfaFlow, type VerifyMfaProps, type VerifyMfaContextValue, type VerifyMfaDescriptionProps, type VerifyMfaFlowBackButtonProps, type VerifyMfaFlowContextValue, type VerifyMfaFlowProps, type VerifyMfaImageProps, type VerifyMfaItemProps, type VerifyMfaItemsProps, type VerifyMfaTitleProps, type VerifyMfaAction, type VerifyMfaState, type VerifyMfaStep, };

package/dist/components/VerifyMfa/methods/sms.d.ts

@@ -1,6 +1,35 @@
 import { MfaMethodConfig, MfaMethodContentProps, VerifyMfaMethodComponentProps } from '../types';
+/**
+ * Content component for SMS verification.
+ * Renders an OTP form for entering the SMS code.
+ *
+ * @param {MfaMethodContentProps} props - The props for the component.
+ * @param {boolean} [props.autoFocus] - Whether to auto-focus the input.
+ * @param {(error: Error) => void} [props.onError] - The callback to call when verification errors.
+ * @param {(mfaCode: string) => void} [props.onSuccess] - The callback to call when verification is successful.
+ * @param {(props: { step: VerifyMfaStep; Content: ReactNode }) => ReactNode} [props.children] - Optional render prop for custom rendering.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsContent: ({ autoFocus, onError, onSuccess, children, }: MfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Title component for SMS verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsTitle: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Image component for SMS verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsImage: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Description component for SMS verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsDescription: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const smsMethodConfig: MfaMethodConfig;

package/dist/components/VerifyMfa/methods/totp.d.ts

@@ -1,6 +1,35 @@
 import { MfaMethodConfig, MfaMethodContentProps, VerifyMfaMethodComponentProps } from '../types';
+/**
+ * Content component for TOTP verification.
+ * Renders an OTP form for entering the authenticator code.
+ *
+ * @param {MfaMethodContentProps} props - The props for the component.
+ * @param {boolean} [props.autoFocus] - Whether to auto-focus the input.
+ * @param {(error: Error) => void} [props.onError] - The callback to call when verification errors.
+ * @param {(mfaCode: string) => void} [props.onSuccess] - The callback to call when verification is successful.
+ * @param {(props: { step: VerifyMfaState["step"]; Content: ReactNode }) => ReactNode} [props.children] - Optional render prop for custom rendering.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpContent: ({ autoFocus, onError, onSuccess, children, }: MfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Title component for TOTP verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpTitle: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Image component for TOTP verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpImage: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Description component for TOTP verification.
+ *
+ * @param {VerifyMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpDescription: (_props: VerifyMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
 export declare const totpMethodConfig: MfaMethodConfig;

package/dist/components/VerifyMfa/types.d.ts

@@ -2,21 +2,43 @@ import { APIError } from '@coinbase/cdp-hooks';
 import { FC, ReactNode } from 'react';
 import { MfaMethod } from '../EnrollMfa/types';
 export { type MfaMethod };
+/**
+ * The steps in the MFA verification flow.
+ */
 export type VerifyMfaStep = "verification" | "list";
+/**
+ * Props for the VerifyMfaTitle and VerifyMfaDescription components.
+ */
 export interface VerifyMfaMethodComponentProps {
+    /** The MFA method to render the title/description for. */
     method?: MfaMethod;
+    /** If set, will render for this step regardless of context value. */
     step?: VerifyMfaStep;
 }
+/**
+ * The state of the VerifyMfa component.
+ */
 export interface VerifyMfaState {
+    /** The currently selected MFA method. */
     method: MfaMethod;
+    /** The available MFA methods for verification (from user's enrolled methods). */
     methods: MfaMethod[];
+    /** The current step of the verification flow. */
     step: VerifyMfaStep;
+    /** The direction of the flow transition. */
     flowDirection: "left" | "right";
+    /** The MFA code entered by the user. */
     mfaCode: string;
+    /** Error message or APIError object. */
     error: string | APIError | null;
+    /** Whether a verification request is pending. */
     isPending: boolean;
+    /** Whether the verification was successful. */
     isSuccess: boolean;
 }
+/**
+ * The actions that can be performed on the VerifyMfa state.
+ */
 export type VerifyMfaAction = {
     type: "SET_STEP";
     payload: {
@@ -61,6 +83,9 @@ export type VerifyMfaAction = {
 } | {
     type: "RESET_STATE";
 };
+/**
+ * Shared props for an MFA method content component.
+ */
 export interface MfaMethodContentProps {
     step: VerifyMfaState["step"];
     autoFocus?: boolean;
@@ -71,9 +96,17 @@ export interface MfaMethodContentProps {
         Content: ReactNode;
     }) => ReactNode;
 }
+/**
+ * The configuration for an MFA verification method.
+ * Each method has its own title, description, and content components.
+ */
 export interface MfaMethodConfig {
+    /** The main content component for this method (e.g., OTPForm, PasskeyUI). */
     content: FC<MfaMethodContentProps>;
+    /** The description component for this method. */
     description: FC<VerifyMfaMethodComponentProps>;
+    /** The image component for this method. */
     image: FC<VerifyMfaMethodComponentProps>;
+    /** The title component for this method. */
     title: FC<VerifyMfaMethodComponentProps>;
 }

package/dist/components/VerifyMfa/useVerifyMfaReducer.d.ts

@@ -1,3 +1,10 @@
 import { VerifyMfaAction, VerifyMfaState, VerifyMfaStep } from './types';
 export declare const STEPS: readonly VerifyMfaStep[];
+/**
+ * A reducer hook for the VerifyMfa component.
+ *
+ * @param initialState - The initial state of the component.
+ *
+ * @returns The current state and dispatcher to perform actions on the state.
+ */
 export declare const useVerifyMfaReducer: (initialState: VerifyMfaState) => [VerifyMfaState, import('react').ActionDispatch<[action: VerifyMfaAction]>];