@coinbase/cdp-react 0.0.97 → 0.0.99

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

@@ -9,10 +9,134 @@ import { SignInImage, SignInImageProps } from './SignInImage';
 import { useSignInContext } from './SignInProvider';
 import { SignInTitle, SignInTitleProps } from './SignInTitle';
 import { SignInState, SignInAction } from './types';
+/**
+ * Props for the SignIn component
+ */
 export interface SignInProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * The children of the component. Leave empty to use the default sign-in flow UI.
+     *
+     * If a function is provided, it will be called with the current state of the sign-in flow.
+     * The function should return a `ReactNode`.
+     *
+     * @example
+     * ```tsx lines
+     * <SignIn>
+     *   {(state) => {
+     *     // Render a page title based on the current step
+     *     return (
+     *       <>
+     *         <SignInBackButton />
+     *         <SignInImage />
+     *         <h1>
+     *           {state.step === "credentials" && "Welcome"}
+     *           {state.step === "verification" && "Almost there"}
+     *         </h1>
+     *         <SignInTitle />
+     *         <SignInDescription />
+     *         <SignInForm />
+     *         {state.step === "credentials" && <SignInAuthMethodButtons activeMethod={state.authMethod} />}
+     *         <SignInFooter />
+     *       </>
+     *     );
+     *   }}
+     * </SignIn>
+     * ```
+     */
     children?: ReactNode | ((state: SignInState) => ReactNode);
+    /** A function to call when the sign-in flow is successful. */
     onSuccess?: () => void;
+    /** Filter the auth methods that are shown to the user (this still respects the CDP config auth methods). */
     authMethods?: AuthMethod[];
 }
+/**
+ * A sign-in component that handles the email and OTP flow.
+ *
+ * @param {SignInProps} props - The props for the component.
+ * @param {ReactNode} [props.children] - The children to render inside the component.
+ * @param {() => void} [props.onSuccess] - A function to call when the sign-in flow is successful.
+ * @returns {JSX.Element} The SignIn component.
+ *
+ * @group Components
+ *
+ * @document ./README.md
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Render the SignIn component with a custom onSuccess handler
+ *   const handleSuccess = () => {
+ *     console.log("Sign in successful");
+ *   }
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn onSuccess={handleSuccess} />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Render the title, description, and auth method buttons inside the transition containers
+ *   // This is the default UI if no children are provided.
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInForm>
+ *           {({ authMethod, step, Form }) => {
+ *             // Pass the authMethod and step from the render function args to the title
+ *             // and description components so the UI is rendered correctly when both states
+ *             // are visible during the transition
+ *             return (
+ *               <>
+ *                 <SignInTitle step={step} authMethod={authMethod} />
+ *                 <SignInDescription step={step} authMethod={authMethod} />
+ *                 {Form}
+ *                 {state.step === "credentials" && <SignInAuthMethodButtons activeMethod={authMethod} />}
+ *               </>
+ *             );
+ *           }}
+ *         </SignInForm>
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Render a page title based on the current step
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         {(state) => {
+ *            return (
+ *              <>
+ *                <SignInBackButton />
+ *                <SignInImage />
+ *                <h1>
+ *                  {state.step === "credentials" && "Welcome"}
+ *                  {state.step === "verification" && "Almost there"}
+ *                </h1>
+ *                <SignInTitle />
+ *                <SignInDescription />
+ *                <SignInForm />
+ *                {state.step === "credentials" && <SignInAuthMethodButtons activeMethod={state.authMethod} />}
+ *                <SignInFooter />
+ *              </>
+ *            );
+ *          }}
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignIn: ({ authMethods, ...props }: SignInProps) => import("react/jsx-runtime").JSX.Element;
 export { SignInAuthMethodButtons, SignInBackButton, SignInDescription, SignInFooter, SignInForm, SignInImage, SignInTitle, useSignInContext, type SignInAuthMethodButtonsProps, type SignInBackButtonProps, type SignInDescriptionProps, type SignInFormProps, type SignInImageProps, type SignInTitleProps, type SignInState, type SignInAction, };

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

@@ -1,10 +1,35 @@
 import { APIError } from '@coinbase/cdp-hooks';
 import { FC, ReactNode } from 'react';
 import { AuthMethod } from '../CDPReactProvider';
+/**
+ * Props for the SignInTitle and SignInDescription components.
+ *
+ * @see {@link SignInTitle}
+ * @see {@link SignInDescription}
+ */
 export interface SignInTitleAndDescriptionProps {
+    /** The auth method to render the title for. */
     authMethod?: AuthMethod;
+    /** If set, will render the title for this step of the sign in flow, regardless of the context value. */
     step?: SignInState["step"];
 }
+/**
+ * The state of the SignIn component.
+ *
+ * @property {AuthMethod | null} authMethod - The auth method selected by the user.
+ * @property {boolean} canResetOTP - Whether the user can request a new OTP.
+ * @property {string} email - The email address of the user.
+ * @property {string | APIError | null} error - The error message or APIError object.
+ * @property {string} flowId - The flow ID of the current sign-in flow.
+ * @property {boolean} isPending - Whether the form state is pending.
+ * @property {boolean} isSuccess - Whether the sign-in flow is successful.
+ * @property {string} otp - The OTP code entered by the user.
+ * @property {string} phoneNumber - The phone number of the user.
+ * @property {AuthMethod | "otp" | "success"} step - The current step of the sign-in flow.
+ *
+ * @see {@link SignIn}
+ * @see {@link useSignInReducer}
+ */
 export interface SignInState {
     authMethod: AuthMethod;
     authMethods: AuthMethod[];
@@ -18,6 +43,12 @@ export interface SignInState {
     phoneNumber: string;
     step: "credentials" | "verification";
 }
+/**
+ * The actions that can be performed on the SignIn state.
+ *
+ * @see {@link SignIn}
+ * @see {@link useSignInReducer}
+ */
 export type SignInAction = {
     type: "SET_AUTH_METHOD";
     payload: {
@@ -99,6 +130,9 @@ export type SignInAction = {
 } | {
     type: "RESET_STATE";
 };
+/**
+ * Shared props for a sign in flow.
+ */
 export interface SignInFlowProps {
     step: SignInState["step"];
     autoFocus?: boolean;
@@ -108,6 +142,9 @@ export interface SignInFlowProps {
         Form: ReactNode;
     }) => ReactNode;
 }
+/**
+ * The configuration for a sign in flow.
+ */
 export interface SignInFlowConfig {
     forms: FC<SignInFlowProps>;
     description: FC<SignInTitleAndDescriptionProps>;

package/dist/components/SignIn/useSignInReducer.d.ts

@@ -1,2 +1,11 @@
 import { SignInAction, SignInState } from './types';
+/**
+ * A reducer hook for the SignIn component.
+ *
+ * @param {SignInState} initialState - The initial state of the component.
+ *
+ * @returns {[SignInState, SignInAction]} The current state and dispatcher to perform actions on the state.
+ *
+ * @group Hooks
+ */
 export declare const useSignInReducer: (initialState: SignInState) => [SignInState, import('react').ActionDispatch<[action: SignInAction]>];

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

@@ -2,20 +2,143 @@ import { ReactNode } from 'react';
 import { AuthMethod } from '../CDPReactProvider';
 import { ButtonProps } from '../ui/Button';
 import { ModalContentProps } from '../ui/Modal';
+/**
+ * Props for the sign in modal trigger button
+ *
+ * @see {@link SignInModalTrigger}
+ */
 export interface SignInModalTriggerProps 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 sign in modal content.
+ *
+ * @augments ModalContentProps
+ *
+ * @see {@link SignInModalContent}
+ */
 export interface SignInModalContentProps extends ModalContentProps {
+    /** A function to call when the sign-in flow is successful. */
     onSuccess?: () => void;
 }
+/**
+ * Props for the SignInModal component.
+ *
+ * @see {@link SignInModal}
+ */
 export interface SignInModalProps {
+    /** Filter the auth methods that are shown to the user (this still respects the CDP config auth methods). */
     authMethods?: AuthMethod[];
+    /** 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;
+    /** A function to call when the sign-in flow is successful. */
     onSuccess?: () => void;
 }
+/**
+ * A trigger button that opens the sign in modal.
+ *
+ * @param {SignInModalTriggerProps} props - The props for the SignInModalTrigger 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 SignInModalTrigger component.
+ *
+ * @group Components
+ */
 export declare const SignInModalTrigger: ({ children, className, label, ...props }: SignInModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The sign in modal content.
+ *
+ * @augments ModalContentProps
+ * @param {SignInModalContentProps} props - The props for the SignInModalContent component.
+ * @returns {JSX.Element} The SignInModalContent component.
+ *
+ * @group Components
+ */
 export declare const SignInModalContent: (props: SignInModalContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A sign-in modal component that wraps the {@link SignIn} component.
+ * In the SignIn modal, the description is hidden on the "credentials" step, and the title is hidden on the "verification" step.
+ *
+ * @see {@link SignInModalTrigger} for the trigger button.
+ * @see {@link SignInModalContent} for the modal content.
+ *
+ * @param {SignInModalProps} props - The props for the SignInModal component.
+ * @param {boolean} props.open - Whether the modal is open.
+ * @param {(value: boolean) => void} props.setIsOpen - A function to set the modal's open state.
+ * @param {ReactNode} props.children - The children to render inside the modal.
+ * @param {() => void} props.onSuccess - A function to call when the sign-in flow is successful.
+ * @returns {JSX.Element} The SignInModal component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the SignInModal component with a custom success handler
+ * function App() {
+ *   // optional custom success handler
+ *   const handleSignInSuccess = useCallback(() => {
+ *     console.log("Sign in successful");
+ *   }, []);
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignInModal onSuccess={handleSignInSuccess} />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the SignInModal component with a custom trigger button
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignInModal>
+ *         <button type="button" className="sign-in-button">
+ *           Sign in
+ *         </button>
+ *       </SignInModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the SignInModal component with a secondary variant trigger button and a custom label
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignInModal>
+ *         <SignInModalTrigger variant="secondary" label="Log in" />
+ *         <!-- modal content will be rendered automatically if not provided -->
+ *       </SignInModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the SignInModal component with a custom class on the modal overlay and window
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignInModal>
+ *         <!-- SignInModalTrigger must be rendered if SignInModalContent is provided and you want to display the trigger button -->
+ *         <SignInModalTrigger />
+ *         <SignInModalContent className="custom-class" overlayClassName="custom-overlay-class" />
+ *       </SignInModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInModal: ({ authMethods, children, open, setIsOpen, onSuccess, }: SignInModalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,46 @@
 import { ReactNode } from 'react';
 import { ButtonProps } from '../ui/Button';
+/**
+ * Props for the SignOutButton component.
+ *
+ * @augments {ButtonProps}
+ *
+ * @see {@link SignOutButton}
+ */
 export interface SignOutButtonProps extends ButtonProps {
+    /** The children to render inside the button. */
     children?: ReactNode;
+    /** A function to call when the sign-out is successful. */
     onSuccess?: () => void;
 }
+/**
+ * A button that signs the user out.
+ *
+ * @param {SignOutButtonProps} [props] - The props for the component.
+ * @param {ReactNode} [props.children] - The children to render inside the button.
+ * @param {() => void} [props.onSuccess] - A function to call when the sign-out is successful.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render a sign out button
+ * <SignOutButton onSuccess={() => console.log("Sign out success")} />
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render a sign out button with a custom label, size, and variant
+ * <SignOutButton size="sm" variant="secondary">Log out</SignOutButton>
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render a sign out button with a custom button element
+ * <SignOutButton asChild>
+ *   <button className="custom-button">Log out</button>
+ * </SignOutButton>
+ * ```
+ */
 export declare const SignOutButton: ({ children, className, onSuccess, ...props }: SignOutButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,83 @@
 import { HTMLAttributes, JSX } from 'react';
 import { Theme } from '../../theme/theme';
 import { CDPWebCSSVariables } from '../../theme/utils';
+/**
+ * Props for the ThemeProvider component.
+ *
+ * @see {@link ThemeProvider}
+ */
 export type ThemeProviderProps = {
+    /** Theme overrides */
     theme?: Partial<Theme>;
+    /**
+     * Provider name for multi-provider coordination.
+     * Used internally by CDPReactProvider to identify which provider owns focused elements.
+     * If not provided, a unique ID is generated automatically.
+     */
     "data-cdp-provider"?: string;
 } & HTMLAttributes<HTMLDivElement>;
+/**
+ * The value of the theme context.
+ *
+ * @see {@link useTheme}
+ */
 export interface ThemeContextValue {
     theme: Theme;
     cssVariables: CDPWebCSSVariables;
 }
+/**
+ * Provides the theme to its child components and injects CSS variables.
+ *
+ * @param {ThemeProviderProps} props - The props for the component.
+ * @returns {JSX.Element} The theme provider component.
+ *
+ * @see {@link useTheme}
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * const AuthBasedTheme = ({ children }: { children: React.ReactNode }) => {
+ *   const { isSignedIn: signedIn } = useIsSignedIn();
+ *   const { evmAddress: cdpEvmAddress } = useEvmAddress();
+ *   const isAuthenticated = signedIn && cdpEvmAddress;
+ *   const theme = useMemo(() => (isAuthenticated ? darkTheme : {}), [isAuthenticated]);
+ *   return (
+ *     <ThemeProvider theme={theme}>
+ *       {children}
+ *     </ThemeProvider>
+ *   );
+ * };
+ *
+ * function App() {
+ *   // Change the theme based on the user's authentication status
+ *   return (
+ *     <CDPHooksProvider config={cdpConfig}>
+ *       <AuthBasedTheme>
+ *         <YourApp />
+ *       </AuthBasedTheme>
+ *     </CDPHooksProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const ThemeProvider: ({ children, className, style, theme: themeOverrides, "data-cdp-provider": nameFromProps, ...props }: ThemeProviderProps) => JSX.Element;
+/**
+ * Hook to access the theme from a component.
+ *
+ * @returns {ThemeContextValue} The theme.
+ *
+ * @see {@link ThemeProvider}
+ *
+ * @group Hooks
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Style a paragraph with the secondary text color
+ *   const { theme } = useTheme();
+ *   return <p style={{ color: theme["colors-fg-muted"] }}>Secondary text</p>;
+ * }
+ * ```
+ */
 export declare const useTheme: () => ThemeContextValue;

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

@@ -1,6 +1,30 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { VerifyMfaMethodComponentProps } from './types';
+/**
+ * The props for the VerifyMfaDescription component.
+ */
 export interface VerifyMfaDescriptionProps extends VerifyMfaMethodComponentProps, HTMLAttributes<HTMLElement> {
+    /** The element type to render the description as. */
     as?: ElementType;
 }
+/**
+ * A description for the VerifyMfa component.
+ *
+ * @param {VerifyMfaDescriptionProps} 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 />
+ *   <VerifyMfaDescription />
+ *   <VerifyMfaFlow />
+ * </VerifyMfa>
+ * ```
+ */
 export declare const VerifyMfaDescription: ({ as: Component, children, className, method: methodFromProps, step: stepFromProps, ...props }: VerifyMfaDescriptionProps) => import("react/jsx-runtime").JSX.Element | null;

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;