@coinbase/cdp-react 0.0.98 → 0.0.100

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

@@ -1,11 +1,20 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { SignInModalProps } from '../SignInModal';
 import { SignOutButtonProps } from '../SignOutButton';
+/**
+ * Component slots for the AuthButton.
+ */
 export type AuthButtonSlots = {
+    /** The placeholder to render while the CDP SDK is initializing. */
     placeholder?: (props: Pick<HTMLAttributes<HTMLDivElement>, "className">) => ReactNode;
+    /** The sign out button, rendered when the user is signed in. */
     signOutButton?: (props: Pick<SignOutButtonProps, "onSuccess">) => ReactNode;
+    /** The sign in modal, rendered when the user is signed out. */
     signInModal?: (props: Pick<SignInModalProps, "open" | "setIsOpen" | "onSuccess">) => ReactNode;
 };
+/**
+ * The props for the AuthButton component.
+ */
 export interface AuthButtonProps extends AuthButtonSlots {
     children?: (props: {
         [key in keyof AuthButtonSlots as Capitalize<key>]: ReactNode;
@@ -13,9 +22,102 @@ export interface AuthButtonProps extends AuthButtonSlots {
         isInitialized: boolean;
         isSignedIn: boolean;
     }) => ReactNode;
+    /**
+     * The delay in milliseconds before the sign in modal is closed and the sign out button is shown after the sign in is successful.
+     * If null, the sign in modal will not be closed automatically.
+     * If 0, the sign in modal will be closed immediately.
+     */
     closeOnSuccessDelay?: null | number;
+    /** A function to call when the sign in is successful. */
     onSignInSuccess?: () => void;
+    /** A function to call after the sign in success, when the dialog close transition ends. */
     onSignInSuccessTransitionEnd?: () => void;
+    /** A function to call when the sign out is successful. */
     onSignOutSuccess?: () => void;
 }
+/**
+ * A button that signs the user in or out.
+ *
+ * This component will render the {@link SignInModal} component when the user is signed out, and a {@link SignOutButton} when the user is signed in.
+ * If the SDK is initializing (i.e. the initial user state is pending), the component will render a loading skeleton.
+ *
+ * @param {AuthButtonProps & HTMLAttributes<HTMLDivElement>} props - The props for the component.
+ * @param {number} [props.closeOnSuccessDelay] - The delay in milliseconds before the sign in modal is closed and the sign out button is shown after the sign in is successful.
+ * @param {() => void} [props.onSignInSuccess] - The function to call when the sign in is successful.
+ * @param {() => void} [props.onSignInSuccessTransitionEnd] - The function to call when the sign in success transition ends.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the AuthButton component
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <AuthButton />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the AuthButton component with custom components
+ *
+ * // Define a custom placeholder
+ * const SmallPlaceholder: AuthButtonProps["placeholder"] = props => (
+ *   <LoadingSkeleton {...props} className={`${props.className} small-placeholder`} />
+ * );
+ *
+ * // Define a custom sign in modal using the secondary variant and small size for the trigger button
+ * const SmallSecondarySignInModal: AuthButtonProps["signInModal"] = props => (
+ *   <SignInModal {...props}>
+ *     <SignInModalTrigger variant="secondary" size="sm" label="Log me in" />
+ *   </SignInModal>
+ * );
+ *
+ * // Define a custom sign out button using the secondary variant and small size
+ * const SmallSecondarySignOutButton: AuthButtonProps["signOutButton"] = props => (
+ *   <SignOutButton {...props} variant="secondary" size="sm">Log me out</SignOutButton>
+ * );
+ *
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <AuthButton
+ *         placeholder={SmallPlaceholder}
+ *         signInModal={SmallSecondarySignInModal}
+ *         signOutButton={SmallSecondarySignOutButton}
+ *      />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the AuthButton component with custom containers around the slot content
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <AuthButton className="auth-wrapper">
+ *         {({ isInitialized, isSignedIn, Placeholder, SignOutButton, SignInModal }) => (
+ *           <>
+ *             {!isInitialized && Placeholder}
+ *             {isInitialized && (
+ *               <div>
+ *                 <p>Hello {isSignedIn ? "signed in" : "signed out"} user!</p>
+ *                 {isSignedIn && <div>{SignOutButton}</div>}
+ *                 {!isSignedIn && <div>{SignInModal}</div>}
+ *               </div>
+ *             )}
+ *           </>
+ *         )}
+ *       </AuthButton>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const AuthButton: ({ children, closeOnSuccessDelay, onSignInSuccess, onSignInSuccessTransitionEnd, onSignOutSuccess, placeholder, signInModal, signOutButton, ...props }: AuthButtonProps & Omit<HTMLAttributes<HTMLDivElement>, "children">) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,137 @@
 import { Config as CDPHooksConfig, OAuth2ProviderType } from '@coinbase/cdp-hooks';
 import { ThemeProviderProps } from '../ThemeProvider';
 export declare const OAUTH_METHODS: string[];
+/**
+ * The auth methods that can be used to sign in.
+ */
 export declare const AUTH_METHODS: readonly ["email", "sms"];
+/**
+ * All possible auth methods that can be used to sign in.
+ */
 export declare const ALL_AUTH_METHODS: string[];
+/**
+ * The auth method type.
+ */
 export type AuthMethod = (typeof AUTH_METHODS)[number] | `oauth:${OAuth2ProviderType}`;
+/**
+ * Optional app config to add branding
+ *
+ * @example
+ * ```tsx lines
+ * const appConfig: AppConfig = {
+ *   appName: "My App",
+ *   appLogoUrl: "https://placehold.co/64",
+ * };
+ * ```
+ */
 export interface AppConfig {
+    /** The name of the app. */
     appName?: string;
+    /** The URL of the app logo. This should be at least 64 by 64px and must start with `http` or `https`. */
     appLogoUrl?: string;
+    /** Whether to show the "secured by Coinbase" footer. Defaults to `true`. */
     showCoinbaseFooter?: boolean;
+    /** Authentication methods to allow for the user. Defaults to `["email"]`. */
     authMethods?: [AuthMethod, ...AuthMethod[]];
+    /** MFA verification configuration. */
     mfa?: {
+        /**
+         * Disable automatic prompting of the MFA verification modal.
+         * Set to `true` when using `useRegisterMfaListener` for custom MFA UI,
+         * or when you want to trigger the modal manually via `useVerifyMfaModal`.
+         *
+         * @default false
+         */
         disableAutoPrompt?: boolean;
     };
 }
+/**
+ * The CDP hooks provider config combined with the app config.
+ *
+ * @see {@link AppConfig}
+ * @see {@link @coinbase/cdp-hooks!Config | CDPHooksConfig}
+ */
 export type Config = AppConfig & CDPHooksConfig;
+/**
+ * @interface CDPReactProviderProps
+ * @augments {ThemeProviderProps}
+ * @property {ReactNode} children - The children of the component
+ * @property {Config} config - The app configuration
+ * @property {string} [name] - The provider name, i.e. to distinguish between multiple providers
+ * @property {Theme} [theme] - The theme values to override
+ */
 export type CDPReactProviderProps = {
     config: Config;
     name?: string;
 } & ThemeProviderProps;
+/**
+ * CDPReactProvider component.
+ *
+ * @param {CDPReactProviderProps} props - Props for the CDPReactProvider component
+ * @param {Config} props.config - The app configuration
+ * @param {Theme} [props.theme] - The theme values to override
+ * @returns {JSX.Element} The CDPReactProvider component
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <YourApp />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const CDPReactProvider: ({ children, className, config, name: nameFromProps, style, theme, }: CDPReactProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the app config from a component.
+ *
+ * @returns {AppConfig} The app config.
+ *
+ * @group Hooks
+ *
+ * @example
+ * ```tsx lines
+ * const MyComponent = () => {
+ *   // Access the app config from a child component
+ *   const appConfig = useAppConfig();
+ *   return <div>{appConfig.appName}</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <MyComponent />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const useAppConfig: () => Required<AppConfig>;
+/**
+ * Hook to access the provider name from a component.
+ *
+ * @returns {string} The provider name.
+ *
+ * @group Hooks
+ *
+ * @example
+ * ```tsx lines
+ * const MyComponent = () => {
+ *   const providerName = useProviderName();
+ *   return <div>{providerName}</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <CDPReactProvider name="provider-instance" config={config}>
+ *       <MyComponent />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const useProviderName: () => string;

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

@@ -1,8 +1,37 @@
 import { HTMLAttributes } from 'react';
+/**
+ * The props for the CopyAddress component.
+ *
+ * @see {@link CopyAddress}
+ */
 export interface CopyAddressProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The address to copy. */
     address: string;
+    /** The label for the input. */
     label?: string;
+    /** A function to call when the address copy button is clicked. */
     onCopy?: () => void;
+    /** A function to call when the address is copied successfully. */
     onCopySuccess?: () => void;
 }
+/**
+ * A component that copies an address to the clipboard.
+ *
+ * @param {CopyAddressProps} props - The props for the component.
+ * @returns {JSX.Element} The CopyAddress component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopyAddress component with a custom label
+ * function CopyAddressExample() {
+ *   const { evmAddress } = useEvmAddress();
+ *   if (!evmAddress) return null;
+ *   return (
+ *     <CopyAddress address={evmAddress} label="My EVM address" />
+ *   );
+ * }
+ * ```
+ */
 export declare const CopyAddress: ({ className, address, label, onCopy, onCopySuccess, ...props }: CopyAddressProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +1,94 @@
 import { ButtonProps } from '../ui/Button';
 import { IframeTheme } from '../../types/secureIframe';
+/**
+ * The props for the CopyEvmKeyButton component.
+ *
+ * @see {@link CopyEvmKeyButton}
+ * @see {@link IframeTheme}
+ */
 interface CopyEvmKeyButtonProps extends Pick<ButtonProps, "size" | "fullWidth"> {
+    /** The address of the evm account to copy. */
     address: string;
+    /** The class name to apply to the button. */
     className?: string;
+    /** The label to display when the private key is copied. */
     copiedLabel?: string;
+    /** Whether to show an icon in the button. */
     icon?: boolean;
+    /** The label to display on the button. */
     label?: string;
+    /** A function to call when the iframe UI is ready. */
     onReady?: () => void;
+    /** A function to call when the iframe session has expired. */
     onSessionExpired?: () => void;
+    /** A function to call when the key is copied successfully. */
     onSuccess?: () => void;
+    /** A function to call when there is an error in the secure iframe */
     onError?: (error?: string) => void;
+    /** Theme overrides for the iframe. */
     theme?: Partial<IframeTheme>;
+    /** The variant of the button. */
     variant?: Extract<ButtonProps["variant"], "primary" | "secondary">;
 }
+/**
+ * The CopyEvmKeyButton component is used to copy the private key of an EVM account.
+ *
+ * @param {CopyEvmKeyButtonProps} props - The props for the CopyEvmKeyButton component.
+ * @returns {JSX.Element} The CopyEvmKeyButton component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopyEvmKeyButton component
+ * function CopyEvmKeyButtonExample() {
+ *   const { currentUser } = useCurrentUser();
+ *   const evmAddress = currentUser?.evmAccountObjects?.[0]?.address;
+ *   if (!evmAddress) return null;
+ *   return (
+ *     <CopyEvmKeyButton address={evmAddress} />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopyEvmKeyButton component with custom labels
+ * function CopyEvmKeyButtonExample() {
+ *   const { currentUser } = useCurrentUser();
+ *   const evmAddress = currentUser?.evmAccountObjects?.[0]?.address;
+ *   if (!evmAddress) return null;
+ *   return (
+ *     <CopyEvmKeyButton address={evmAddress} label="Copy private key" copiedLabel="Private key copied" />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopyEvmKeyButton component with a different variant
+ * function CopyEvmKeyButtonExample() {
+ *   const { currentUser } = useCurrentUser();
+ *   const evmAddress = currentUser?.evmAccountObjects?.[0]?.address;
+ *   if (!evmAddress) return null;
+ *   return (
+ *     <CopyEvmKeyButton address={evmAddress} variant="secondary" />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopyEvmKeyButton component with theme overrides
+ * function CopyEvmKeyButtonExample() {
+ *   const { currentUser } = useCurrentUser();
+ *   const evmAddress = currentUser?.evmAccountObjects?.[0]?.address;
+ *   if (!evmAddress) return null;
+ *   return (
+ *     <CopyEvmKeyButton address={evmAddress} theme={{ fontUrl: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap", fontFamily: '"Roboto", sans-serif' }} />
+ *   );
+ * }
+ * ```
+ */
 declare const CopyEvmKeyButton: ({ address, className, copiedLabel, icon, fullWidth, label, onReady, onSessionExpired, onSuccess, onError, size, theme: themeOverrides, variant, }: CopyEvmKeyButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export { CopyEvmKeyButton, type CopyEvmKeyButtonProps };

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

@@ -1,17 +1,90 @@
 import { ButtonProps } from '../ui/Button';
 import { IframeTheme } from '../../types/secureIframe';
+/**
+ * The props for the CopySolanaKeyButton component.
+ *
+ * @see {@link CopySolanaKeyButton}
+ * @see {@link IframeTheme}
+ */
 interface CopySolanaKeyButtonProps extends Pick<ButtonProps, "size" | "fullWidth"> {
+    /** The address of the solana account to copy. */
     address: string;
+    /** The class name to apply to the button. */
     className?: string;
+    /** The label to display when the private key is copied. */
     copiedLabel?: string;
+    /** Whether to show an icon in the button. */
     icon?: boolean;
+    /** The label to display on the button. */
     label?: string;
+    /** A function to call when the iframe UI is ready. */
     onReady?: () => void;
+    /** A function to call when the iframe session has expired. */
     onSessionExpired?: () => void;
+    /** A function to call when the key is copied successfully. */
     onSuccess?: () => void;
+    /** A function to call when there is an error in the secure iframe */
     onError?: (error?: string) => void;
+    /** Theme overrides for the iframe. */
     theme?: Partial<IframeTheme>;
+    /** The variant of the button. */
     variant?: Extract<ButtonProps["variant"], "primary" | "secondary">;
 }
+/**
+ * The CopySolanaKeyButton component is used to copy the private key of a Solana account.
+ *
+ * @param {CopySolanaKeyButtonProps} props - The props for the CopySolanaKeyButton component.
+ * @returns {JSX.Element} The CopySolanaKeyButton component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopySolanaKeyButton component
+ * function CopySolanaKeyButtonExample() {
+ *   const { solanaAddress } = useSolanaAddress();
+ *   if (!solanaAddress) return null;
+ *   return (
+ *     <CopySolanaKeyButton address={solanaAddress} />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopySolanaKeyButton component with custom labels
+ * function CopySolanaKeyButtonExample() {
+ *   const { solanaAddress } = useSolanaAddress();
+ *   if (!solanaAddress) return null;
+ *   return (
+ *     <CopySolanaKeyButton address={solanaAddress} label="Copy private key" copiedLabel="Private key copied" />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopySolanaKeyButton component with a different variant
+ * function CopySolanaKeyButtonExample() {
+ *   const { solanaAddress } = useSolanaAddress();
+ *   if (!solanaAddress) return null;
+ *   return (
+ *     <CopySolanaKeyButton address={solanaAddress} variant="secondary" />
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the CopySolanaKeyButton component with theme overrides
+ * function CopySolanaKeyButtonExample() {
+ *   const { solanaAddress } = useSolanaAddress();
+ *   if (!solanaAddress) return null;
+ *   return (
+ *     <CopySolanaKeyButton address={solanaAddress} theme={{ fontUrl: "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap", fontFamily: '"Roboto", sans-serif' }} />
+ *   );
+ * }
+ * ```
+ */
 declare const CopySolanaKeyButton: ({ address, className, copiedLabel, icon, fullWidth, label, onReady, onSessionExpired, onSuccess, onError, size, theme: themeOverrides, variant, }: CopySolanaKeyButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export { CopySolanaKeyButton, type CopySolanaKeyButtonProps };

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

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

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

@@ -1,12 +1,39 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { EnrollMfaStep, MfaMethod } from './types';
+/**
+ * Props for the EnrollMfaFlow component.
+ */
 export interface EnrollMfaFlowProps 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: EnrollMfaStep;
         method: MfaMethod;
         Content: ReactNode;
     }) => ReactNode;
 }
+/**
+ * The flow for the EnrollMfa component. Renders the appropriate content
+ * based on the current MFA method and step.
+ *
+ * The "list" step is handled directly by this component.
+ * The "setup" and "setup-verification" steps are delegated to method-specific content.
+ *
+ * @param {EnrollMfaFlowProps} props - The component props.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * <EnrollMfa>
+ *   <EnrollMfaTitle />
+ *   <EnrollMfaDescription />
+ *   <EnrollMfaFlow />
+ * </EnrollMfa>
+ * ```
+ */
 export declare const EnrollMfaFlow: ({ autoFocus, animateHeight, children, className, ...props }: EnrollMfaFlowProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,28 @@
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonProps } from '../ui/Button/Button';
 import { EnrollMfaStep } from './types';
+/**
+ * Props for the EnrollMfaFlowBackButton component.
+ *
+ * @see {@link EnrollMfaFlowBackButton}
+ */
 export interface EnrollMfaFlowBackButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** If set, will render the back button for this step of the flow, regardless of the context value. */
     step?: EnrollMfaStep;
+    /** 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 enrollment flow.
+ *
+ * @param {EnrollMfaFlowBackButtonProps} props - The props for the component.
+ * @returns {JSX.Element | null} The EnrollMfaFlowBackButton component.
+ *
+ * @see {@link EnrollMfaFlow}
+ * @see {@link EnrollMfa}
+ *
+ * @group Components
+ */
 export declare const EnrollMfaFlowBackButton: ({ ["aria-label"]: ariaLabel, children, className, size, onClick, variant, step: stepFromProps, ...props }: EnrollMfaFlowBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,21 +1,73 @@
 import { FormEvent, ReactNode, RefObject } from 'react';
 import { SwitchSlideTransitionRef } from '../ui/SwitchSlideTransition';
 import { EnrollMfaStep, MfaMethod } from './types';
+/**
+ * The value of the MFA enrollment flow context.
+ *
+ * @see {@link useEnrollMfaFlow}
+ */
 export interface EnrollMfaFlowContextValue {
+    /** A function to go back to the previous step. */
     back: () => void;
+    /** A function to start enrollment for a method. */
     startEnrollment: (method: MfaMethod) => Promise<void>;
+    /** A function to submit the MFA code. */
     submit: (e: FormEvent<HTMLFormElement>) => void;
 }
+/**
+ * The value of the MFA enrollment flow context for internal use.
+ *
+ * @see {@link useEnrollMfaFlowInternal}
+ */
 export interface EnrollMfaFlowContextValueInternal extends EnrollMfaFlowContextValue {
+    /** A ref to the flow transition. */
     transitionRef: RefObject<SwitchSlideTransitionRef<EnrollMfaStep> | null> | null;
 }
+/**
+ * Props for the EnrollMfaFlowProvider component.
+ *
+ * @see {@link EnrollMfaFlowProvider}
+ */
 export interface EnrollMfaFlowProviderProps {
+    /** The children of the component. */
     children?: ReactNode;
+    /** A function to go back to the previous step. */
     onBack: EnrollMfaFlowContextValue["back"];
+    /** A function to start enrollment for a method. */
     onStartEnrollment: EnrollMfaFlowContextValue["startEnrollment"];
+    /** A function to submit the MFA code. */
     onSubmit: EnrollMfaFlowContextValue["submit"];
+    /** A ref to the flow transition. */
     transitionRef: EnrollMfaFlowContextValueInternal["transitionRef"];
 }
+/**
+ * A hook to get the MFA enrollment flow context value (internal).
+ *
+ * @returns {EnrollMfaFlowContextValueInternal} The MFA enrollment flow context value.
+ *
+ * @group Hooks
+ */
 export declare const useEnrollMfaFlowInternal: () => EnrollMfaFlowContextValueInternal;
+/**
+ * A hook to get the MFA enrollment flow context value.
+ *
+ * @returns {EnrollMfaFlowContextValue} The MFA enrollment flow context value.
+ *
+ * @see {@link EnrollMfaFlow}
+ * @see {@link EnrollMfa}
+ *
+ * @group Hooks
+ */
 export declare const useEnrollMfaFlow: () => EnrollMfaFlowContextValue;
+/**
+ * A provider for the MFA enrollment flow.
+ *
+ * @param {EnrollMfaFlowProviderProps} props - The props for the EnrollMfaFlowProvider component.
+ * @returns {JSX.Element} The EnrollMfaFlowProvider component.
+ *
+ * @see {@link EnrollMfaFlow}
+ * @see {@link EnrollMfa}
+ *
+ * @group Components
+ */
 export declare const EnrollMfaFlowProvider: ({ children, onBack, onStartEnrollment, onSubmit, transitionRef, }: EnrollMfaFlowProviderProps) => import("react/jsx-runtime").JSX.Element;

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

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