@coinbase/cdp-react 0.0.98 → 0.0.100

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

@@ -2,20 +2,132 @@ import { ReactNode } from 'react';
 import { AuthMethod } from '../CDPReactProvider';
 import { ButtonProps } from '../ui/Button';
 import { ModalContentProps } from '../ui/Modal';
+/**
+ * Props for the link auth modal trigger button
+ *
+ * @see {@link LinkAuthModalTrigger}
+ */
 interface LinkAuthModalTriggerProps 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 link auth modal content.
+ *
+ * @see {@link LinkAuthModalContent}
+ */
 interface LinkAuthModalContentProps extends ModalContentProps {
+    /** A function to call when an auth method is successfully linked. */
     onLinkSuccess?: (method: string) => void;
 }
+/**
+ * Props for the LinkAuthModal component.
+ *
+ * @see {@link LinkAuthModal}
+ */
 interface LinkAuthModalProps {
+    /** 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 an auth method is successfully linked. */
     onLinkSuccess?: (method: AuthMethod | null) => void;
 }
+/**
+ * A trigger button that opens the link auth modal.
+ *
+ * @param {LinkAuthModalTriggerProps} props - The props for the LinkAuthModalTrigger 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 LinkAuthModalTrigger component.
+ *
+ * @group Components
+ */
 declare const LinkAuthModalTrigger: ({ children, className, label, ...props }: LinkAuthModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The link auth modal content.
+ *
+ * @param {LinkAuthModalContentProps} props - The props for the LinkAuthModalContent component.
+ * @returns {JSX.Element} The LinkAuthModalContent component.
+ *
+ * @group Components
+ */
 declare const LinkAuthModalContent: (props: LinkAuthModalContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A link auth modal component that wraps the {@link LinkAuth} component.
+ *
+ * @param {LinkAuthModalProps} props - The props for the LinkAuthModal component.
+ * @returns {JSX.Element} The LinkAuthModal component.
+ *
+ * @see {@link LinkAuthModalTrigger} for the trigger button.
+ * @see {@link LinkAuthModalContent} for the modal content.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the LinkAuthModal component with a custom success handler
+ * function App() {
+ *   const handleLinkSuccess = (method: string) => {
+ *     console.log(`Successfully linked ${method}`);
+ *   };
+ *
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <LinkAuthModal onLinkSuccess={handleLinkSuccess} />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the LinkAuthModal component with a custom trigger button
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <LinkAuthModal>
+ *         <button type="button">Manage linked accounts</button>
+ *       </LinkAuthModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the LinkAuthModal component with a custom trigger button label
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <LinkAuthModal>
+ *         <LinkAuthModalTrigger variant="secondary" label="Link more accounts" />
+ *       </LinkAuthModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the LinkAuthModal with controlled open state
+ * function App() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <LinkAuthModal open={isOpen} setIsOpen={setIsOpen}>
+ *         <LinkAuthModalTrigger />
+ *         <LinkAuthModalContent />
+ *       </LinkAuthModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 declare const LinkAuthModal: ({ children, open, setIsOpen, onLinkSuccess }: LinkAuthModalProps) => import("react/jsx-runtime").JSX.Element;
 export { LinkAuthModal, LinkAuthModalContent, LinkAuthModalTrigger, type LinkAuthModalProps, type LinkAuthModalContentProps, type LinkAuthModalTriggerProps, };

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

@@ -4,10 +4,34 @@ type OAuthStatusModalContentProps = {
     isAccountLink?: boolean;
     handleClose: () => void;
 };
+/**
+ * The useOauthStatusModal hook provides a function to persist state for the oauth status modal for use on redirect.
+ *
+ * The returned function sets two values in session storage:
+ *   1. The app provider name (set in app config): this is used to identify which app intiiated the flow, in case of multiple CDPReactProvider instances.
+ *   2. Whether this is an account link flow: this is used to determine whether the user is signing in or linking an account.
+ *
+ * @returns {{persistOAuthState: (isAccountLink?: boolean) => void}} An object with a function to prepare the oauth status modal for use.
+ *
+ * @see {@link OAuthStatusModal}
+ *
+ * @group Hooks
+ */
 export declare const useOauthStatusModal: () => {
     persistOAuthState: (isAccountLink?: boolean) => void;
     cleanupOAuthState: () => void;
 };
+/**
+ * The OAuthStatusModal component is a modal that displays the status of an OAuth flow.
+ *
+ * @returns {JSX.Element} The OAuthStatusModal component.
+ */
 export declare const OAuthStatusModal: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * The OAuthStatusModalContent component is a component that displays the status of an OAuth flow.
+ *
+ * @param {OAuthStatusModalContentProps} props - The props for the OAuthStatusModalContent component.
+ * @returns {JSX.Element} The OAuthStatusModalContent component.
+ */
 export declare const OAuthStatusModalContent: ({ isAccountLink, handleClose, }: OAuthStatusModalContentProps) => import("react/jsx-runtime").JSX.Element;
 export default OAuthStatusModal;

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

@@ -1,5 +1,17 @@
 import { APIError, SendEvmTransactionOptions } from '@coinbase/cdp-hooks';
 import { ButtonProps } from '../ui/Button';
+/**
+ * The props for the SendEvmTransactionButton component.
+ *
+ * @augments {Omit<ButtonProps, "onError">}
+ * @property {SendEvmTransactionOptions["evmAccount"]} account - The account to send the transaction from.
+ * @property {SendEvmTransactionOptions["network"]} network - The network to send the transaction on.
+ * @property {(error: APIError | Error) => void} [onError] - A function to call when the transaction errors.
+ * @property {(hash: string) => void} [onSuccess] - A function to call when the transaction is successful.
+ * @property {SendEvmTransactionOptions["transaction"]} transaction - The transaction to send.
+ *
+ * @see {@link SendEvmTransactionButton}
+ */
 export interface SendEvmTransactionButtonProps extends Omit<ButtonProps, "onError"> {
     account: SendEvmTransactionOptions["evmAccount"];
     network: SendEvmTransactionOptions["network"];
@@ -7,4 +19,19 @@ export interface SendEvmTransactionButtonProps extends Omit<ButtonProps, "onErro
     onSuccess?: (hash: string) => void;
     transaction: SendEvmTransactionOptions["transaction"];
 }
+/**
+ * A button that signs and sends a transaction.
+ *
+ * @param {SendEvmTransactionButtonProps} props - The props for the SendEvmTransactionButton component.
+ * @param {SendEvmTransactionOptions["evmAccount"]} props.account - The account to send the transaction from.
+ * @param {SendEvmTransactionOptions["network"]} props.network - The network to send the transaction on.
+ * @param {(error: APIError | Error) => void} [props.onError] - A function to call when the transaction errors.
+ * @param {(hash: string) => void} [props.onSuccess] - A function to call when the transaction is successful.
+ * @param {ReactNode} [props.pendingLabel] - The label to display when the transaction is pending.
+ * @param {SendEvmTransactionOptions["transaction"]} props.transaction - The transaction to send.
+ * @param {ButtonVariant} [props.variant] - The variant of the button.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ */
 export declare const SendEvmTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, ...props }: SendEvmTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,17 @@
 import { APIError, SendSolanaTransactionOptions } from '@coinbase/cdp-hooks';
 import { ButtonProps } from '../ui/Button';
+/**
+ * The props for the SendSolanaTransactionButton component.
+ *
+ * @augments {Omit<ButtonProps, "onError">}
+ * @property {SendSolanaTransactionOptions["solanaAccount"]} account - The Solana account to send the transaction from.
+ * @property {SendSolanaTransactionOptions["network"]} network - The network to send the transaction on.
+ * @property {(error: APIError | Error) => void} [onError] - A function to call when the transaction errors.
+ * @property {(signature: string) => void} [onSuccess] - A function to call when the transaction is successful.
+ * @property {SendSolanaTransactionOptions["transaction"]} transaction - The base64 encoded transaction to send.
+ *
+ * @see {@link SendSolanaTransactionButton}
+ */
 export interface SendSolanaTransactionButtonProps extends Omit<ButtonProps, "onError"> {
     account: SendSolanaTransactionOptions["solanaAccount"];
     network: SendSolanaTransactionOptions["network"];
@@ -7,4 +19,19 @@ export interface SendSolanaTransactionButtonProps extends Omit<ButtonProps, "onE
     onSuccess?: (signature: string) => void;
     transaction: SendSolanaTransactionOptions["transaction"];
 }
+/**
+ * A button that signs and sends a Solana transaction.
+ *
+ * @param {SendSolanaTransactionButtonProps} props - The props for the SendSolanaTransactionButton component.
+ * @param {SendSolanaTransactionOptions["solanaAccount"]} props.account - The Solana account to send the transaction from.
+ * @param {SendSolanaTransactionOptions["network"]} props.network - The network to send the transaction on.
+ * @param {(error: APIError | Error) => void} [props.onError] - A function to call when the transaction errors.
+ * @param {(signature: string) => void} [props.onSuccess] - A function to call when the transaction is successful.
+ * @param {ReactNode} [props.pendingLabel] - The label to display when the transaction is pending.
+ * @param {SendSolanaTransactionOptions["transaction"]} props.transaction - The base64 encoded transaction to send.
+ * @param {ButtonVariant} [props.variant] - The variant of the button.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ */
 export declare const SendSolanaTransactionButton: ({ account, children, className, network, onClick, onError, onSuccess, pendingLabel, transaction, ...props }: SendSolanaTransactionButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,40 @@
 import { ReactNode } from 'react';
 import { AuthMethod } from '../CDPReactProvider';
+/**
+ * The props for an AuthMethodButton.
+ *
+ * @see {@link SignInAuthMethodButtonProps}
+ */
 export interface SignInAuthMethodButtonProps {
+    /** The key of the auth method. */
     key: AuthMethod;
+    /** The label of the auth method. */
     label: string;
+    /** The aria label of the auth method. */
     ariaLabel?: string;
+    /** The icon of the auth method. */
     icon: ReactNode;
+    /** Whether the auth method is pending. */
     isPending?: boolean;
+    /** The function to call when the auth method is clicked. */
     onClick: () => void;
 }
+/**
+ * The props for the AuthMethodButtons component.
+ *
+ * @see {@link SignInAuthMethodButtons}
+ */
 export interface SignInAuthMethodButtonsProps {
+    /** The active auth method. */
     activeMethod?: AuthMethod;
 }
+/**
+ * The AuthMethodButtons component.
+ *
+ * @param {AuthMethodButtonProps} props - The props for the AuthMethodButtons component.
+ * @param {AuthMethod} [props.activeMethod] - The active auth method.
+ * @returns {JSX.Element} The AuthMethodButtons component.
+ *
+ * @group Components
+ */
 export declare const SignInAuthMethodButtons: ({ activeMethod }: SignInAuthMethodButtonsProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,9 +1,49 @@
 import { HTMLAttributes } from 'react';
 import { ButtonSize, ButtonVariant } from '../../theme/theme';
 import { SignInState } from './types';
+/**
+ * A button to go back to the previous step of the sign-in flow.
+ *
+ * @see {@link SignInBackButton}
+ */
 export interface SignInBackButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    /** If set, will render the back button for this step of the sign in flow, regardless of the context value. */
     step?: SignInState["step"];
+    /** The size of the button. */
     size?: ButtonSize;
+    /** The variant of the button. */
     variant?: ButtonVariant;
 }
+/**
+ * A button to go back to the previous step of the sign-in flow.
+ *
+ * @param {SignInBackButtonProps} props - The props for the component.
+ * @param {SignInState["step"]} [props.step] - If set, will render the back button for this step of the sign in flow, regardless of the context value.
+ * @param {ButtonSize} [props.size] - The size of the button.
+ * @param {ButtonVariant} [props.variant] - The variant of the button.
+ * @returns {JSX.Element} The sign-in back button.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Customize the back button icon and label
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton aria-label="go back">
+ *           <MyCustomIcon />
+ *         </SignInBackButton>
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <SignInForm />
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInBackButton: ({ step: stepFromProps, children, onClick, size, variant, ["aria-label"]: ariaLabel, ...props }: SignInBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,2 +1,15 @@
 import { HTMLAttributes } from 'react';
+/**
+ * A component that renders styled credentials for the sign in flow.
+ *
+ * @param {HTMLAttributes<HTMLSpanElement>} props - The props for the component.
+ * @param {ReactNode} props.children - The children of the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * Email: <SignInCredentials>name@example.com</SignInCredentials>
+ */
 export declare const SignInCredentials: ({ children, ...props }: HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,41 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { SignInTitleAndDescriptionProps } from './types';
+/**
+ * The props for the SignInDescription component.
+ *
+ * @see {@link SignInDescription}
+ */
 export interface SignInDescriptionProps extends SignInTitleAndDescriptionProps, HTMLAttributes<HTMLElement> {
+    /** The element type to render the description as. */
     as?: ElementType;
 }
+/**
+ * A description for the SignIn component.
+ *
+ * @param {SignInDescriptionProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Render a custom description in the SignIn component
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription>
+ *           Custom Sign In Description
+ *         </SignInDescription>
+ *         <SignInForm />
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInDescription: ({ as: Component, authMethod: authMethodFromProps, children, className, step: stepFromProps, ...props }: SignInDescriptionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,29 @@
 import { HTMLAttributes } from 'react';
+/**
+ * A footer component for the sign-in flow.
+ *
+ * @param {HTMLAttributes<HTMLDivElement>} props - The props for the component.
+ * @returns {JSX.Element} The sign-in footer.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Add class to the footer
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <SignInForm />
+ *         <SignInFooter className="sign-in-footer" />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,54 @@
 import { ElementType, HTMLAttributes, ReactNode } from 'react';
 import { AuthMethod } from '../CDPReactProvider';
 import { SignInState } from './types';
+/**
+ * Props for the SignInForm component.
+ *
+ * @see {@link SignInForm}
+ */
 export interface SignInFormProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /** The element type to render the form as. */
     as?: ElementType;
+    /** If set, will auto focus the form when the component mounts and after transitions. */
     autoFocus?: boolean;
+    /** The function to call when the sign in is successful. */
     onSuccess?: () => void;
+    /** If set, will render the form for this step of the sign in flow, regardless of the context value. */
     step?: SignInState["step"];
+    /** The children of the component. */
     children?: (props: {
         step: SignInState["step"];
         authMethod: AuthMethod;
         Form: ReactNode;
     }) => ReactNode;
 }
+/**
+ * The form for the SignIn component.
+ *
+ * @param {SignInFormProps} props - The component props.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Add div wrapper and class to the form
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <div className="sign-in-form-wrapper">
+ *           <SignInForm className="sign-in-form" />
+ *         </div>
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInForm: ({ autoFocus, onSuccess, step: stepFromProps, children, ...props }: SignInFormProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,44 @@
+/**
+ * Props for the SignInImage component.
+ *
+ * @see {@link SignInImage}
+ */
 export interface SignInImageProps {
+    /** The class name to apply to the component. */
     className?: string;
+    /** The alt text for the image. */
     alt?: string;
+    /** The source URL for the image. Uses the app logo by default. */
     src?: string;
 }
+/**
+ * A logo or success icon for the SignIn component.
+ *
+ * @param {SignInImageProps} props - The props for the component.
+ * @param {string} [props.className] - The class name to apply to the component.
+ * @param {string} [props.alt] - The alt text for the image.
+ * @param {string} [props.src] - The source URL for the image. Uses the app logo by default.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Use a different image from your app logo in the SignIn component
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage src="https://example.com/image.png" alt="Example Image" />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <SignInForm />
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInImage: ({ className, alt, src }: SignInImageProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,13 +1,67 @@
 import { Dispatch, ReactNode } from 'react';
 import { SignInAction, SignInState } from './types';
+/**
+ * Context for the SignIn component.
+ */
 export declare const SignInContext: import('react').Context<{
     state: SignInState;
     dispatch: Dispatch<SignInAction>;
 }>;
+/**
+ * A context for the SignIn component.
+ *
+ * @returns {SignInState} The current state of the SignIn component.
+ *
+ * @group Hooks
+ *
+ * @example
+ * ```tsx lines
+ * function EmailComponent() {
+ *   const { state } = useSignInContext();
+ *   return <div>Submitted email: {state.email}</div>;
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <EmailComponent />
+ *         <SignInForm />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ */
 export declare const useSignInContext: () => {
     state: SignInState;
     dispatch: Dispatch<SignInAction>;
 };
+/**
+ * A provider for the SignInContext.
+ *
+ * @param {SignInProviderProps} props - The props for the SignInProvider component.
+ * @param {ReactNode} props.children - The children to render inside the provider.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignInProvider>
+ *         <SignInImage />
+ *         <SignInTitle />
+ *         <SignInDescription />
+ *         <SignInForm />
+ *       </SignInProvider>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInProvider: ({ children, authMethods: authMethodsFromProps, }: {
     children: ReactNode;
     authMethods?: SignInState["authMethods"];

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

@@ -1,6 +1,41 @@
 import { ElementType, HTMLAttributes } from 'react';
 import { SignInTitleAndDescriptionProps } from './types';
+/**
+ * The props for the SignInTitle component.
+ *
+ * @see {@link SignInTitle}
+ */
 export interface SignInTitleProps extends SignInTitleAndDescriptionProps, HTMLAttributes<HTMLElement> {
+    /** The element type to render the title as. */
     as?: ElementType;
 }
+/**
+ * A title for the SignIn component.
+ *
+ * @param {SignInTitleAndDescriptionProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Render a custom title in the SignIn component
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <SignIn>
+ *         <SignInBackButton />
+ *         <SignInImage />
+ *         <SignInTitle>
+ *           Custom Sign In Title
+ *         </SignInTitle>
+ *         <SignInDescription />
+ *         <SignInForm />
+ *         <SignInFooter />
+ *       </SignIn>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 export declare const SignInTitle: ({ as: Component, children, className, authMethod: authMethodFromProps, step: stepFromProps, ...props }: SignInTitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SignIn/flows/SignInWithEmail.d.ts

@@ -1,6 +1,32 @@
 import { SignInFlowProps, SignInTitleAndDescriptionProps, SignInFlowConfig } from '../types';
+/**
+ * The step of the email OTP flow.
+ */
 export type Step = "email" | "otp";
+/**
+ * A component that renders the sign in with email flow.
+ *
+ * @param {SignInFlowProps} props - The props for the sign in with email flow.
+ * @param {SignInFlowProps["children"]} [props.children] - A function to render the children. If provided, the function will be called with the current step of the flow and the form component.
+ * @param {SignInFlowProps["onSuccess"]} props.onSuccess - The callback to call when the sign in is successful.
+ * @param {SignInFlowProps["step"]} props.step - The step to render the flow for.
+ * @returns {JSX.Element} The SignInWithEmail component.
+ */
 export declare const SignInWithEmail: ({ step: stepFromProps, autoFocus, onSuccess, children, }: SignInFlowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that renders the title for the sign in with email flow.
+ *
+ * @param {SignInTitleAndDescriptionProps} props - The props for the component.
+ * @param {Step} props.step - The step to render the component for.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SignInWithEmailTitle: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that renders the description for the sign in with email flow.
+ *
+ * @param {SignInTitleAndDescriptionProps} props - The props for the component.
+ * @param {Step} props.step - The step to render the component for.
+ * @returns {JSX.Element} The rendered component.
+ */
 export declare const SignInWithEmailDescription: ({ step }: SignInTitleAndDescriptionProps) => import("react/jsx-runtime").JSX.Element;
 export declare const config: SignInFlowConfig;