@coinbase/cdp-react 0.0.98 → 0.0.100

package/dist/components/EnrollMfa/EnrollMfaImage.d.ts

@@ -1,6 +1,30 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { EnrollMfaMethodComponentProps } from './types';
+/**
+ * The props for the EnrollMfaImage component.
+ */
 export interface EnrollMfaImageProps extends EnrollMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
     as?: ElementType;
 }
+/**
+ * A description for the MfaVerification component.
+ *
+ * @param {EnrollMfaImageProps} 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 {MfaVerificationState["step"]} [props.step] - The step of the verification flow.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <EnrollMfa>
+ *   <EnrollMfaImage />
+ *   <EnrollMfaTitle />
+ *   <EnrollMfaDescription />
+ *   <EnrollMfaFlow />
+ * </EnrollMfa>
+ * ```
+ */
 export declare const EnrollMfaImage: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: EnrollMfaImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EnrollMfa/EnrollMfaItem.d.ts

@@ -1,11 +1,32 @@
 import { MouseEventHandler, ReactNode } from 'react';
 import { MfaMethod } from './types';
+/**
+ * The props for the EnrollMfaItem component.
+ *
+ * @see {@link EnrollMfaItem}
+ */
 interface EnrollMfaItemProps {
+    /** The MFA method this item represents */
     method: MfaMethod;
+    /** An icon to display */
     icon?: ReactNode;
+    /** A label for the MFA method */
     label: string;
+    /** Whether this method's enrollment is pending */
     isPending?: boolean;
+    /** A function to call when the user clicks to set up this method */
     onSetUp: MouseEventHandler<HTMLButtonElement>;
 }
+/**
+ * A component for displaying an MFA method in the enrollment list.
+ *
+ * @param {EnrollMfaItemProps} props - The props for the EnrollMfaItem component.
+ * @returns {JSX.Element} The EnrollMfaItem component.
+ *
+ * @see {@link EnrollMfaItems}
+ * @see {@link EnrollMfa}
+ *
+ * @group Components
+ */
 declare const EnrollMfaItem: ({ method, icon, label, isPending, onSetUp }: EnrollMfaItemProps) => import("react/jsx-runtime").JSX.Element;
 export { EnrollMfaItem, type EnrollMfaItemProps };

package/dist/components/EnrollMfa/EnrollMfaItems.d.ts

@@ -1,9 +1,26 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { EnrollMfaItemProps } from './EnrollMfaItem';
 import { MfaMethod } from './types';
+/**
+ * The props for the EnrollMfaItems component.
+ *
+ * @see {@link EnrollMfaItems}
+ */
 interface EnrollMfaItemsProps extends Omit<HTMLAttributes<HTMLUListElement>, "children"> {
+    /** A render function for the MFA method item. */
     children?: (props: EnrollMfaItemProps) => ReactNode;
+    /** A function to call when a method is selected for setup. */
     onSetUp?: (method: MfaMethod) => void | Promise<void>;
 }
+/**
+ * A list of MFA methods available for enrollment.
+ *
+ * @param {EnrollMfaItemsProps} props - The props for the EnrollMfaItems component.
+ * @returns {JSX.Element} The EnrollMfaItems component.
+ *
+ * @see {@link EnrollMfa}
+ *
+ * @group Components
+ */
 declare const EnrollMfaItems: ({ children, className, onSetUp, ...props }: EnrollMfaItemsProps) => import("react/jsx-runtime").JSX.Element;
 export { EnrollMfaItems, type EnrollMfaItemsProps };

package/dist/components/EnrollMfa/EnrollMfaProvider.d.ts

@@ -1,14 +1,49 @@
 import { Dispatch, ReactNode } from 'react';
 import { EnrollMfaAction, EnrollMfaState, MfaMethod } from './types';
+/**
+ * The value of the EnrollMfa context.
+ *
+ * @see {@link useEnrollMfaContext}
+ */
 export interface EnrollMfaContextValue {
+    /** The current state of the enrollment flow. */
     state: EnrollMfaState;
+    /** The dispatch function to update the state. */
     dispatch: Dispatch<EnrollMfaAction>;
+    /** The function to call when enrollment is successful. */
     onEnrollSuccess?: () => void;
 }
+/**
+ * Hook to access the EnrollMfa context.
+ *
+ * @returns The EnrollMfa context value.
+ * @throws If used outside of EnrollMfaProvider.
+ *
+ * @group Hooks
+ *
+ * @see {@link EnrollMfa}
+ */
 export declare const useEnrollMfaContext: () => EnrollMfaContextValue;
+/**
+ * Props for the EnrollMfaProvider component.
+ *
+ * @see {@link EnrollMfaProvider}
+ */
 export interface EnrollMfaProviderProps {
     children: ReactNode;
+    /** The available MFA methods for enrollment. Defaults to ["totp"]. */
     methods?: MfaMethod[];
+    /** The function to call when enrollment is successful. */
     onEnrollSuccess?: () => void;
 }
+/**
+ * Provider for EnrollMfa context.
+ *
+ * @param {EnrollMfaProviderProps} props - The props for the provider.
+ * @param {ReactNode} props.children - The children to render.
+ * @param {MfaMethod[]} [props.methods] - The available MFA methods for enrollment.
+ * @returns {JSX.Element} The provider component.
+ *
+ * @see {@link EnrollMfa}
+ */
 export declare const EnrollMfaProvider: ({ children, onEnrollSuccess, methods, }: EnrollMfaProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EnrollMfa/EnrollMfaTitle.d.ts

@@ -1,6 +1,27 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { EnrollMfaMethodComponentProps } from './types';
+/**
+ * The props for the EnrollMfaTitle component.
+ */
 export interface EnrollMfaTitleProps extends EnrollMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
+    /** The element type to render the title as. */
     as?: ElementType;
 }
+/**
+ * A title for the EnrollMfa component.
+ *
+ * @param {EnrollMfaTitleProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <EnrollMfa>
+ *   <EnrollMfaTitle />
+ *   <EnrollMfaDescription />
+ *   <EnrollMfaFlow />
+ * </EnrollMfa>
+ * ```
+ */
 export declare const EnrollMfaTitle: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: EnrollMfaTitleProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -10,11 +10,76 @@ import { EnrollMfaItems, EnrollMfaItemsProps } from './EnrollMfaItems';
 import { useEnrollMfaContext, EnrollMfaContextValue } from './EnrollMfaProvider';
 import { EnrollMfaTitle, EnrollMfaTitleProps } from './EnrollMfaTitle';
 import { EnrollMfaAction, EnrollMfaState, EnrollMfaStep, MfaMethod } from './types';
+/**
+ * Props for the EnrollMfa component.
+ */
 interface EnrollMfaProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * The children of the component. Leave empty to use the default enrollment UI.
+     *
+     * If a function is provided, it will be called with the current state of the enrollment flow.
+     * The function should return a `ReactNode`.
+     *
+     * @example
+     * ```tsx
+     * <EnrollMfa>
+     *   {(state) => (
+     *     <>
+     *       <EnrollMfaTitle />
+     *       <EnrollMfaDescription />
+     *       <EnrollMfaFlow />
+     *     </>
+     *   )}
+     * </EnrollMfa>
+     * ```
+     */
     children?: ReactNode | ((state: EnrollMfaState) => ReactNode);
+    /** A function to call when the enrollment is successful. */
     onEnrollSuccess?: () => void;
+    /** Whether to reset the enrollment state when the enrollment is successful. Defaults to `true`. */
     resetOnSuccess?: boolean;
 }
+/**
+ * A component for displaying an error banner in the EnrollMfa component.
+ *
+ * @param {HTMLAttributes<HTMLDivElement>} props - The props for the EnrollMfaError component.
+ * @returns {JSX.Element} The EnrollMfaError component.
+ *
+ * @group Components
+ */
 declare const EnrollMfaError: ({ role, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * A component for MFA enrollment. Guides users through setting up
+ * two-factor authentication.
+ *
+ * @param {EnrollMfaProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @document ./README.md
+ *
+ * @example
+ * ```tsx
+ * // Default usage
+ * <EnrollMfa onEnrollSuccess={() => console.log("Enrolled!")} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom UI
+ * <EnrollMfa onEnrollSuccess={onEnrollSuccess}>
+ *   {(state) => (
+ *     <>
+ *       <h1>{state.step === "list" ? "Multi-factor authentication" : "Add new method"}</h1>
+ *       <EnrollMfaTitle />
+ *       <EnrollMfaDescription />
+ *       {state.step === "list" && <EnrollMfaError />}
+ *       <EnrollMfaFlow />
+ *     </>
+ *   )}
+ * </EnrollMfa>
+ * ```
+ */
 declare const EnrollMfa: ({ onEnrollSuccess, ...props }: EnrollMfaProps) => import("react/jsx-runtime").JSX.Element;
 export { EnrollMfa, EnrollMfaDescription, EnrollMfaError, EnrollMfaFlow, EnrollMfaFlowBackButton, EnrollMfaFooter, EnrollMfaImage, EnrollMfaItem, EnrollMfaItems, EnrollMfaTitle, useEnrollMfaContext, useEnrollMfaFlow, type EnrollMfaProps, type EnrollMfaContextValue, type EnrollMfaDescriptionProps, type EnrollMfaFlowBackButtonProps, type EnrollMfaFlowContextValue, type EnrollMfaFlowProps, type EnrollMfaImageProps, type EnrollMfaItemProps, type EnrollMfaItemsProps, type EnrollMfaTitleProps, type EnrollMfaAction, type EnrollMfaState, type EnrollMfaStep, type MfaMethod, };

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

@@ -1,6 +1,31 @@
 import { EnrollMfaMethodConfig, EnrollMfaMethodContentProps, EnrollMfaMethodComponentProps } from '../types';
+/**
+ * Content component for SMS enrollment.
+ * Handles the setup (phone number entry) and verification (OTP) steps.
+ *
+ * @param {EnrollMfaMethodContentProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsContent: ({ autoFocus, step, onSubmit, children, }: EnrollMfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Title component for SMS enrollment.
+ *
+ * @param {EnrollMfaMethodComponentProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SmsTitle: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Description component for SMS enrollment.
+ *
+ * @param {EnrollMfaMethodComponentProps} props - The props for the component.
+ * @returns {JSX.Element | null} The rendered component.
+ */
 export declare const SmsDescription: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Image component for SMS enrollment.
+ *
+ * @param {EnrollMfaMethodComponentProps} props - The props for the component.
+ * @returns {JSX.Element | null} The rendered component.
+ */
 export declare const SmsImage: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare const smsMethodConfig: EnrollMfaMethodConfig;

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

@@ -1,6 +1,31 @@
 import { EnrollMfaMethodConfig, EnrollMfaMethodContentProps, EnrollMfaMethodComponentProps } from '../types';
+/**
+ * Content component for TOTP enrollment.
+ * Handles the setup (QR code) and verification steps.
+ *
+ * @param {EnrollMfaMethodContentProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpContent: ({ autoFocus, step, onSubmit, children, }: EnrollMfaMethodContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Title component for TOTP enrollment.
+ *
+ * @param {EnrollMfaMethodComponentProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpTitle: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Description component for TOTP enrollment.
+ *
+ * @param {EnrollMfaMethodComponentProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const TotpDescription: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Image component for TOTP enrollment.
+ *
+ * @param {EnrollMfaMethodComponentProps} _props - The props for the component.
+ * @returns {JSX.Element | null} The rendered component.
+ */
 export declare const TotpImage: ({ step }: EnrollMfaMethodComponentProps) => import("react/jsx-runtime").JSX.Element | null;
 export declare const totpMethodConfig: EnrollMfaMethodConfig;

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

@@ -1,28 +1,61 @@
 import { InitiateMfaEnrollmentResult, InitiateMfaOptions } from '@coinbase/cdp-core';
 import { APIError } from '@coinbase/cdp-hooks';
 import { FC, FormEvent, ReactNode } from 'react';
+/**
+ * The MFA methods available for enrollment.
+ */
 export type MfaMethod = InitiateMfaOptions["mfaMethod"];
+/**
+ * The steps in the MFA enrollment flow.
+ */
 export type EnrollMfaStep = "list" | "setup" | "setup-verification";
+/**
+ * The method-specific steps (excludes prompt which is handled by parent).
+ */
 export type EnrollMfaMethodStep = Exclude<EnrollMfaStep, "list">;
+/**
+ * Props for method-specific components (title, description, image).
+ */
 export interface EnrollMfaMethodComponentProps {
+    /** The MFA method to render for. */
     method?: MfaMethod;
+    /** If set, will render for this step regardless of context value. */
     step?: EnrollMfaStep;
 }
+/**
+ * The state of the EnrollMfa component.
+ */
 export interface EnrollMfaState {
+    /** The currently selected MFA method. */
     method: MfaMethod;
+    /** The available MFA methods for enrollment. */
     methods: MfaMethod[];
+    /** The current step of the enrollment flow. */
     step: EnrollMfaStep;
+    /** The direction of the flow. */
     flowDirection: "left" | "right";
+    /** The MFA code entered by the user (for verification step). */
     mfaCode: string;
+    /** The otpauth:// URL for QR code generation (from initiate). */
     authUrl: string | null;
+    /** The base32-encoded secret for manual entry (from initiate). */
     secret: string | null;
+    /** The phone number for SMS MFA enrollment (E.164 format). */
     phoneNumber: string;
+    /** The timestamp when enrollment was initiated. */
     initiatedAt: number | null;
+    /** Whether the enrollment session has expired. */
     isExpired: boolean;
+    /** Error message or APIError object. */
     error: string | APIError | null;
+    /** Whether a request is pending. */
     isPending: boolean;
+    /** Whether the enrollment was successful. */
     isSuccess: boolean;
 }
+/**
+ * The actions that can be performed on the EnrollMfa state.
+ */
 export type EnrollMfaAction = {
     type: "SET_STEP";
     payload: {
@@ -76,6 +109,11 @@ export type EnrollMfaAction = {
 } | {
     type: "RESET_STATE";
 };
+/**
+ * Shared props for an MFA method content component.
+ * Note: Methods only handle "setup" and "setup-verification" steps.
+ * The "list" step is handled by the parent EnrollMfaFlow.
+ */
 export interface EnrollMfaMethodContentProps {
     step: EnrollMfaMethodStep;
     autoFocus?: boolean;
@@ -85,11 +123,21 @@ export interface EnrollMfaMethodContentProps {
         Content: ReactNode;
     }) => ReactNode;
 }
+/**
+ * The configuration for an MFA enrollment method.
+ * Each method has its own title, description, image, and content components.
+ */
 export interface EnrollMfaMethodConfig {
+    /** The main content component for this method. */
     content: FC<EnrollMfaMethodContentProps>;
+    /** The description component for this method. */
     description: FC<EnrollMfaMethodComponentProps>;
+    /** Build the InitiateMfaOptions from current state. Defaults to `{ mfaMethod: method }`. */
     getInitiateOptions: (state: EnrollMfaState) => InitiateMfaOptions;
+    /** The image component for this method. */
     image: FC<EnrollMfaMethodComponentProps>;
+    /** Whether this method needs user input before calling the initiate API. */
     requiresInput?: boolean;
+    /** The title component for this method. */
     title: FC<EnrollMfaMethodComponentProps>;
 }

package/dist/components/EnrollMfa/useEnrollMfaReducer.d.ts

@@ -1,3 +1,9 @@
 import { EnrollMfaAction, EnrollMfaState, MfaMethod } from './types';
 export declare const STEPS: readonly ["list", "setup", "setup-verification"];
+/**
+ * A hook for managing the state of the EnrollMfa component.
+ *
+ * @param methods - The available MFA methods for enrollment.
+ * @returns The state and dispatch function for the EnrollMfa component.
+ */
 export declare const useEnrollMfaReducer: (methods?: MfaMethod[]) => [EnrollMfaState, import('react').ActionDispatch<[action: EnrollMfaAction]>];

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

@@ -2,19 +2,130 @@ import { ReactNode } from 'react';
 import { EnrollMfaProps } from '../EnrollMfa';
 import { ButtonProps } from '../ui/Button';
 import { ModalContentProps } from '../ui/Modal';
+/**
+ * Props for the enroll MFA modal trigger button
+ *
+ * @see {@link EnrollMfaModalTrigger}
+ */
 interface EnrollMfaModalTriggerProps extends Partial<Pick<ButtonProps, "className" | "fullWidth" | "size" | "style" | "variant">> {
+    /** If provided, will render the children instead of the default trigger button. */
     children?: ReactNode;
+    /** The label to display on the trigger button. */
     label?: ReactNode;
 }
+/**
+ * Props for the EnrollMfaModal component.
+ *
+ * @see {@link EnrollMfaModal}
+ */
 interface EnrollMfaModalProps extends Pick<EnrollMfaProps, "onEnrollSuccess" | "resetOnSuccess"> {
+    /** If provided, will render the children instead of the default trigger button. */
     children?: ReactNode;
+    /** Whether the modal is open. Note: if you set this, you must also set `setIsOpen`. */
     open?: boolean;
+    /** A function to set the modal's open state. Note: if you set this, you must also set `open`. */
     setIsOpen?: (value: boolean) => void;
 }
+/**
+ * Props for the EnrollMfaModalContent component.
+ *
+ * @see {@link EnrollMfaModalContent}
+ */
 interface EnrollMfaModalContentProps extends Omit<ModalContentProps, "children"> {
+    /** The children of the component. Leave empty to use the default verification UI. */
     children?: EnrollMfaProps["children"];
 }
+/**
+ * A trigger button that opens the enroll MFA modal.
+ *
+ * @param {EnrollMfaModalTriggerProps} props - The props for the EnrollMfaModalTrigger component.
+ * @param {ReactNode} [props.children] - The children to render inside the trigger button.
+ * @param {ReactNode} [props.label] - The label to display on the trigger button.
+ * @returns {JSX.Element} The EnrollMfaModalTrigger component.
+ *
+ * @group Components
+ */
 declare const EnrollMfaModalTrigger: ({ children, className, label, ...props }: EnrollMfaModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The enroll MFA modal content.
+ *
+ * @param {EnrollMfaModalContentProps} props - The props for the EnrollMfaModalContent component.
+ * @returns {JSX.Element} The EnrollMfaModalContent component.
+ *
+ * @group Components
+ */
 declare const EnrollMfaModalContent: ({ children, ...props }: EnrollMfaModalContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A enroll MFA modal component that wraps the {@link EnrollMfa} component.
+ *
+ * @param {EnrollMfaModalProps} props - The props for the EnrollMfaModal component.
+ * @returns {JSX.Element} The EnrollMfaModal component.
+ *
+ * @see {@link EnrollMfaModalTrigger} for the trigger button.
+ * @see {@link EnrollMfaModalContent} for the modal content.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the EnrollMfaModal component with a custom success handler
+ * function App() {
+ *   const handleSuccess = (mfaCode: string) => {
+ *     console.log(`Successfully verified`, mfaCode);
+ *   };
+ *
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <EnrollMfaModal onSuccess={handleSuccess} />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the EnrollMfaModal component with a custom trigger button
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <EnrollMfaModal>
+ *         <button type="button">Verify</button>
+ *       </EnrollMfaModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the EnrollMfaModal component with a custom trigger button label
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <EnrollMfaModal>
+ *         <EnrollMfaModalTrigger variant="secondary" label="Verify" />
+ *       </EnrollMfaModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the EnrollMfaModal with controlled open state
+ * function App() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <EnrollMfaModal open={isOpen} setIsOpen={setIsOpen}>
+ *         <EnrollMfaModalTrigger />
+ *         <EnrollMfaModalContent />
+ *       </EnrollMfaModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 declare const EnrollMfaModal: ({ children, open, setIsOpen, onEnrollSuccess, resetOnSuccess, }: EnrollMfaModalProps) => import("react/jsx-runtime").JSX.Element;
 export { EnrollMfaModal, EnrollMfaModalContent, EnrollMfaModalTrigger, type EnrollMfaModalProps, type EnrollMfaModalContentProps, type EnrollMfaModalTriggerProps, };