@coinbase/cdp-react 0.0.98 → 0.0.99

package/dist/components/Fund/hooks/useSetupOnrampEventListeners.d.ts

@@ -1 +1,7 @@
+/**
+ * This code was copied and adapted from Coinbase Onchainkit (fund/hooks/useFundCardSetupOnrampEventListeners.ts)
+ */
+/**
+ * Setup Onramp event listeners
+ */
 export declare const useSetupOnrampEventListeners: () => void;

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

@@ -5,6 +5,93 @@ import { useFundContext } from './FundProvider';
 import { FundTitle, FundTitleProps } from './FundTitle';
 import { FetchBuyUrlParams } from './hooks/useBuyUrl';
 import { CamelToSnakeCase, CamelToSnakeCaseNested, FundAction, FetchBuyOptions, FetchBuyQuote, FundPaymentMethod, FundPresetAmountInputs, FundProps, FundState, FundStateError, FundStateProps, FundContextType, FundLifecycleStatus, OnrampAmount, OnrampBuyQuoteResponse, OnrampBuyOptionsResponse, OnrampBuyOptionsSnakeCaseResponse, OnrampBuyQuoteSnakeCaseResponse, OnrampError, OnrampNetwork, OnrampPaymentCurrency, OnrampPaymentMethodLimit, OnrampPurchaseCurrency, OnrampSuccessEventData } from './types';
+/**
+ * The Fund component.
+ *
+ * @param {FundProps} props - The props of the Fund component.
+ * @param {ReactNode | ((state: FundState) => ReactNode)} props.children - The children of the Fund component. If a function is provided, it will be called with the current state of the Fund component.
+ * @param {string} [props.className] - The class name of the Fund component.
+ * @returns {JSX.Element} The Fund component.
+ *
+ * @group Components
+ *
+ * @document ./README.md
+ *
+ * @example
+ * ```tsx lines
+ * // Basic usage
+ * const App = () => {
+ *   const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
+ *     // call the buy quote API
+ *   }
+ *   const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
+ *     // call the buy options API
+ *   }
+ *   return (
+ *     <Fund
+ *       country="US"
+ *       subdivision="NY"
+ *       cryptoCurrency="eth"
+ *       fiatCurrency="usd"
+ *       fetchBuyQuote={fetchBuyQuote}
+ *       fetchBuyOptions={fetchBuyOptions}
+ *       network="base"
+ *       presetAmountInputs={[10, 25, 50]}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Example customizing the children to render the title as a page title
+ * // and add a custom error message
+ * const App = () => {
+ *   const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
+ *     // call the buy quote API
+ *   }
+ *   const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
+ *     // call the buy options API
+ *   }
+ *   const title = "Buy ETH";
+ *   const titleId = useId();
+ *   const submitLabel = "Purchase now";
+ *   return (
+ *     <Fund
+ *       country="US"
+ *       subdivision="NY"
+ *       cryptoCurrency="eth"
+ *       fiatCurrency="usd"
+ *       fetchBuyQuote={fetchBuyQuote}
+ *       fetchBuyOptions={fetchBuyOptions}
+ *       network="base"
+ *       presetAmountInputs={[10, 25, 50]}
+ *       submitLabel={submitLabel}
+ *       title={title}
+ *     >
+ *       <FundTitle as="h1" id={titleId}>{title}</FundTitle>
+ *       <FundForm aria-labelledby={titleId} submitLabel={submitLabel}>
+ *         {({ view, Content }) => (
+ *           <>
+ *             {Content}
+ *             {view === "error" && <p>Contact support at support@example.com</p>}
+ *           </>
+ *         )}
+ *       </FundForm>
+ *       <FundFooter />
+ *     </Fund>
+ *   )
+ * }
+ * ```
+ */
 declare const Fund: ({ className, children, openIn, style, submitLabel, title, ...props }: FundProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The FundFooter component.
+ *
+ * @param {HTMLAttributes<HTMLDivElement>} props - The props of the FundFooter component.
+ * @returns {JSX.Element} The FundFooter component.
+ *
+ * @group Components
+ */
 declare const FundFooter: (props: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 export { Fund, FundFooter, FundForm, FundTitle, useFundContext, type CamelToSnakeCase, type CamelToSnakeCaseNested, type FundAction, type FetchBuyOptions, type FetchBuyQuote, type FetchBuyUrlParams, type FundContextType, type FundFormProps, type FundLifecycleStatus, type FundPaymentMethod, type FundPresetAmountInputs, type FundProps, type FundState, type FundStateError, type FundStateProps, type FundTitleProps, type InputType, type OnrampAmount, type OnrampBuyQuoteResponse, type OnrampBuyOptionsResponse, type OnrampBuyOptionsSnakeCaseResponse, type OnrampBuyQuoteSnakeCaseResponse, type OnrampError, type OnrampNetwork, type OnrampPaymentCurrency, type OnrampPaymentMethodLimit, type OnrampPurchaseCurrency, type OnrampSuccessEventData, };

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

@@ -1,11 +1,23 @@
 import { CSSProperties, Dispatch, ReactNode } from 'react';
 import { InputType } from '../forms/ExchangeAmountInput/types';
 import { FetchBuyUrlParams } from './hooks/useBuyUrl';
+/**
+ * Convert a camel case string to a snake case string
+ */
 export type CamelToSnakeCase<T extends string> = T extends `${infer A}${infer B}` ? B extends Uncapitalize<B> ? `${A}${CamelToSnakeCase<B>}` : `${Uncapitalize<A>}_${CamelToSnakeCase<Uncapitalize<B>>}` : T;
+/**
+ * Convert a camel case object to a snake case object
+ */
 export type CamelToSnakeCaseNested<T> = T extends readonly any[] ? T : T extends object ? {
     [K in keyof T as K extends string ? CamelToSnakeCase<K> : K]: CamelToSnakeCaseNested<T[K]>;
 } : T;
+/**
+ * Present amounts for the fund component.
+ */
 export type FundPresetAmountInputs = readonly [number, number, number];
+/**
+ * A payment method for the fund component.
+ */
 export interface FundPaymentMethod {
     id: string;
     name: string;
@@ -14,42 +26,72 @@ export interface FundPaymentMethod {
     minAmount?: number;
     maxAmount?: number;
 }
+/**
+ * The event that is emitted when the onramp widget is opened.
+ */
 export type OnrampOpenEvent = {
     eventName: "open";
     widgetName: string;
 };
+/**
+ * The event that is emitted when the onramp widget transitions to a new view.
+ */
 export type OnrampTransitionViewEvent = {
     eventName: "transition_view";
     pageRoute: string;
 };
+/**
+ * The event that is emitted when an error occurs in the onramp widget.
+ */
 export type OnrampPublicErrorEvent = {
     eventName: "error";
     error: OnrampError;
 };
+/**
+ * The event that is emitted when the onramp widget is exited.
+ */
 export type OnrampExitEvent = {
     eventName: "exit";
     error?: OnrampError;
 };
+/**
+ * The event that is emitted when the transaction inside the onramp widget is successful.
+ */
 export type OnrampSuccessEvent = {
     eventName: "success";
     data?: OnrampSuccessEventData;
 };
+/**
+ * Data that is emitted with the onramp transaction success event.
+ */
 export type OnrampSuccessEventData = {
     assetImageUrl: string;
     assetName: string;
     assetSymbol: string;
     chainId: string;
 };
+/**
+ * Todo: figure out when this is emitted
+ */
 export type RequestOpenUrlEvent = {
     eventName: "request_open_url";
     url: string;
 };
+/**
+ * Union type of all events that can be emitted by the onramp widget.
+ */
 export type EventMetadata = OnrampOpenEvent | OnrampTransitionViewEvent | OnrampPublicErrorEvent | OnrampExitEvent | OnrampSuccessEvent | RequestOpenUrlEvent;
+/**
+ * An error that occurred during the onramp process.
+ */
 export interface OnrampError {
     errorType: "internal_error" | "handled_error" | "network_error" | "unknown_error";
     code?: string;
     debugMessage?: string;
 }
+/**
+ * The lifecycle statuses of the Fund component.
+ */
 export type FundLifecycleStatus = {
     statusName: "init";
     statusData: null;
@@ -69,16 +111,26 @@ export type FundLifecycleStatus = {
     statusName: "transactionPending";
     statusData: null;
 };
+/** Lifecycle statuses that indicate a transaction resolution. */
 export type FundTxResolution = Extract<FundLifecycleStatus["statusName"], "transactionSubmitted" | "transactionSuccess" | "error"> | null;
+/**
+ * The events that can be emitted by the Fund component.
+ */
 export type FundLifecycleEvents = {
     onError?: (e: OnrampError | undefined) => void;
     onStatus?: (lifecycleStatus: FundLifecycleStatus) => void;
     onSuccess?: (result?: OnrampSuccessEventData) => void;
 };
+/**
+ * The type for an error that may get displayed in the UI.
+ */
 export type FundStateError = {
     code: string;
     message: string;
 };
+/**
+ * The state of the Fund component.
+ */
 export interface FundState {
     country: string;
     cryptoAmount?: number;
@@ -102,7 +154,13 @@ export interface FundState {
     transactionStatus: FundLifecycleStatus;
     destinationAddress: string;
 }
+/**
+ * Props from the Fund component that are used in the FundState.
+ */
 export type FundStateProps = Pick<FundState, "country" | "cryptoCurrency" | "cryptoDecimalPlaces" | "fiatCurrency" | "fiatDecimalPlaces" | "locale" | "network" | "presetAmountInputs" | "subdivision" | "destinationAddress">;
+/**
+ * All the props for the Fund component.
+ */
 export interface FundProps extends FundStateProps, FundLifecycleEvents {
     children?: ReactNode | ((state: FundState) => ReactNode);
     className?: string;
@@ -115,6 +173,9 @@ export interface FundProps extends FundStateProps, FundLifecycleEvents {
     submitLabel?: ReactNode;
     title?: ReactNode;
 }
+/**
+ * The actions that can be dispatched to the Fund component.
+ */
 export type FundAction = {
     type: "SET_FIELD";
     payload: {
@@ -162,20 +223,36 @@ export type FundAction = {
     type: "SYNC_WITH_PROPS";
     payload: FundStateProps;
 };
+/**
+ * The context type for the Fund component.
+ */
 export type FundContextType = {
     state: FundState;
     dispatch: Dispatch<FundAction>;
     fetchBuyUrl: (params: FetchBuyUrlParams, onError?: (e: OnrampError | undefined) => void) => Promise<string>;
 };
+/**
+ * Onramp API types
+ * We define the types in camel case and derive snake case types for backwards compatibility with the old version of the API.
+ */
+/**
+ * Payment method limit data
+ */
 export type OnrampPaymentMethodLimit = {
     id: string;
     min: string;
     max: string;
 };
+/**
+ * Payment currency data
+ */
 export type OnrampPaymentCurrency = {
     id: string;
     limits: OnrampPaymentMethodLimit[];
 };
+/**
+ * Network data
+ */
 export type OnrampNetwork = {
     name: string;
     displayName: string;
@@ -183,6 +260,9 @@ export type OnrampNetwork = {
     contractAddress: string;
     iconUrl: string;
 };
+/**
+ * Purchase currency data
+ */
 export type OnrampPurchaseCurrency = {
     id: string;
     name: string;
@@ -190,29 +270,86 @@ export type OnrampPurchaseCurrency = {
     iconUrl: string;
     networks: OnrampNetwork[];
 };
+/**
+ * Onramp Amount
+ */
 export type OnrampAmount = {
     value: string;
     currency: string;
 };
+/**
+ * The response from the Onramp Buy Options API
+ */
 export type OnrampBuyOptionsResponse = {
+    /**
+     * List of supported fiat currencies that can be exchanged for crypto on Onramp in the given location.
+     * Each currency contains a list of available payment methods, with min and max transaction limits for that currency.
+     */
     paymentCurrencies: OnrampPaymentCurrency[];
+    /**
+     * List of available crypto assets that can be bought on Onramp in the given location.
+     */
     purchaseCurrencies: OnrampPurchaseCurrency[];
 };
+/**
+ * The response from the Onramp Buy Options API in snake case.
+ * For the v1 API, the response is in snake case.
+ */
 export type OnrampBuyOptionsSnakeCaseResponse = CamelToSnakeCaseNested<OnrampBuyOptionsResponse>;
+/**
+ * The response from the Onramp Buy Quote API
+ */
 export type OnrampBuyQuoteResponse = {
+    /**
+     * Object with amount and currency of the total fiat payment required to complete the purchase, inclusive of any fees.
+     * The currency will match the `paymentCurrency` in the request if it is supported, otherwise it falls back to USD.
+     */
     paymentTotal: OnrampAmount;
+    /**
+     * Object with amount and currency of the fiat cost of the crypto asset to be purchased, exclusive of any fees.
+     * The currency will match the `paymentCurrency`.
+     */
     paymentSubtotal: OnrampAmount;
+    /**
+     * Object with amount and currency of the crypto that to be purchased.
+     * The currency will match the `purchaseCurrency` in the request.
+     * The number of decimals will be based on the crypto asset.
+     */
     purchaseAmount: OnrampAmount;
+    /**
+     * Object with amount and currency of the fee changed by the Coinbase exchange to complete the transaction.
+     * The currency will match the `paymentCurrency`.
+     */
     coinbaseFee: OnrampAmount;
+    /**
+     * Object with amount and currency of the network fee required to send the purchased crypto to the user's wallet.
+     * The currency will match the `paymentCurrency`.
+     */
     networkFee: OnrampAmount;
+    /**
+     * Reference to the quote that should be passed into the initialization parameters when launching the Coinbase Onramp widget via the SDK or URL generator.
+     */
     quoteId: string;
+    /**
+     * Ready-to-use one-click-buy URL. Only returned when destination_address is provided in the request.
+     */
     onrampUrl?: string;
 };
+/**
+ * The response from the Onramp Buy Quote API in snake case.
+ * For the v1 API, the response is in snake case.
+ */
 export type OnrampBuyQuoteSnakeCaseResponse = CamelToSnakeCaseNested<OnrampBuyQuoteResponse>;
+/**
+ * Get Buy Options function (used for building list of payment methods)
+ */
 export type FetchBuyOptions = (params: {
     country: string;
     subdivision?: string;
 }) => Promise<OnrampBuyOptionsResponse>;
+/**
+ * Get Buy Quote function (used for fetching the exchange rate and building the buy url)
+ */
 export type FetchBuyQuote = (params: {
     destinationAddress: string;
     purchaseCurrency: string;

package/dist/components/Fund/useFundReducer.d.ts

@@ -1,5 +1,20 @@
 import { FundAction, FundState } from './types';
+/**
+ * A reducer hook for the Fund component.
+ *
+ * @param {FundState} initialState - The initial state of the component.
+ *
+ * @returns {[FundState, FundAction]} The current state and dispatcher to perform actions on the state.
+ */
 export declare const useFundReducer: (initialState: FundState) => [FundState, import('react').ActionDispatch<[action: FundAction]>];
+/**
+ * A generic function to build a SET_FIELD action.
+ *
+ * @param field - The field from the FundState to set.
+ * @param value - The value to set for the field.
+ *
+ * @returns {FundAction} The action to perform on the state.
+ */
 export declare const createSetFieldAction: <K extends keyof FundState>(field: K, value: FundState[K]) => {
     type: "SET_FIELD";
     payload: {

package/dist/components/Fund/utils/buildPaymentMethods.d.ts

@@ -1,5 +1,20 @@
 import { OnrampBuyOptionsResponse, FundPaymentMethod } from '../types';
+/**
+ * Coinbase payment method description is built using the available payment methods and adding Crypto Balance to the end of the array.
+ * i.e. If the API returns Card, ACH, and Fiat, the description will be "Card, ACH, Cash, Crypto Balance".
+ *
+ * @param paymentMethodLimits - The limits for the payment methods.
+ * @returns The description of the payment methods.
+ */
 export declare const buildCoinbasePaymentMethodDescription: (paymentMethodLimits: Array<{
     id: string;
 }>) => string;
+/**
+ * Builds the payment methods for the given payment options.
+ *
+ * @param paymentOptions - The payment options from the Buy Options API.
+ * @param currency - The currency.
+ * @param country - The country.
+ * @returns The payment methods.
+ */
 export declare const buildPaymentMethods: (paymentOptions: OnrampBuyOptionsResponse, currency: string, country: string) => FundPaymentMethod[];

package/dist/components/Fund/utils/setupOnrampEventListeners.d.ts

@@ -4,5 +4,15 @@ type SetupOnrampEventListenersParams = {
     onExit?: (error?: OnrampError) => void;
     onSuccess?: (data?: OnrampSuccessEventData) => void;
 };
+/**
+ * Subscribes to events from the Coinbase Onramp widget.
+ *
+ * @param {SetupOnrampEventListenersParams} params - The function params
+ * @param {string} [params.host] - The host to subscribe to.
+ * @param {(event: EventMetadata) => void} params.onEvent - Callback for when any event is received.
+ * @param {(error?: OnrampError) => void} params.onExit - Callback for when an exit event is received.
+ * @param {(data?: SuccessEventData) => void} params.onSuccess - Callback for when a success event is received.
+ * @returns a function to unsubscribe from the event listener.
+ */
 export declare function setupOnrampEventListeners({ onEvent, onExit, onSuccess, }: SetupOnrampEventListenersParams): () => void;
 export {};

package/dist/components/Fund/utils/subscribeToWindowMessage.d.ts

@@ -1,11 +1,38 @@
+/**
+ * This code was copied and adapted from Coinbase Onchainkit (fund/utils/subscribeToWindowMessage.ts)
+ */
+/**
+ * Matches a JSON object.
+ * This type can be useful to enforce some input to be JSON-compatible or as a super-type to be extended from. Don't use this as a direct return type as the user would have to double-cast it: `jsonObject as unknown as CustomResponse`. Instead, you could extend your CustomResponse type from it to ensure your type only uses JSON-compatible types: `interface CustomResponse extends JsonObject { … }`.
+ */
 export type JsonObject = {
     [Key in string]?: JsonValue;
 };
+/**
+ * Matches a JSON array.
+ */
 export type JsonArray = JsonValue[];
+/**
+ * Matches any valid JSON primitive value.
+ */
 export type JsonPrimitive = string | number | boolean | null;
+/**
+ * Matches any valid JSON value.
+ *
+ * @see `Jsonify` if you need to transform a type to one that is assignable to `JsonValue`.
+ */
 export type JsonValue = JsonPrimitive | JsonObject | JsonArray;
 export declare const DEFAULT_ONRAMP_URL: string[];
 type MessageData = JsonObject;
+/**
+ * Subscribes to a message from the parent window.
+ *
+ * @param {object} params - The function params
+ * @param {(data?: MessageData) => void} params.onMessage - Callback for when the message is received.
+ * @param {string} params.allowedOrigin - The origin to allow messages from.
+ * @param {(origin: string) => Promise<boolean>} [params.onValidateOrigin] - Callback to validate the origin of the message.
+ * @returns A function to unsubscribe from the event listener.
+ */
 export declare function subscribeToWindowMessage({ onMessage, allowedOrigin, onValidateOrigin, }: {
     onMessage: (data?: MessageData) => void;
     allowedOrigin?: string | string[];

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

@@ -2,18 +2,124 @@ import { ReactNode } from 'react';
 import { FundProps } from '../Fund';
 import { ButtonProps } from '../ui/Button';
 import { ModalContentProps } from '../ui/Modal';
+/**
+ * Props for the fund modal trigger button
+ */
 interface FundModalTriggerProps 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 fund modal content
+ */
 interface FundModalContentProps extends ModalContentProps {
 }
 interface FundModalProps extends Omit<FundProps, "children"> {
+    /** The children to render inside the modal. */
     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 trigger button that opens the fund modal.
+ *
+ * @see {@link FundModal} for the fund modal component.
+ *
+ * @param {FundModalTriggerProps} props - The props for the FundModalTrigger component.
+ * @param {ReactNode} [props.children] - The children to render inside the modal trigger instead of the default Button component.
+ * @param {ReactNode} [props.label] - The label to display on the trigger button.
+ * @returns {JSX.Element} The FundModalTrigger component.
+ *
+ * @group Components
+ */
 declare const FundModalTrigger: ({ children, className, label, ...props }: FundModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The fund modal content.
+ *
+ * @see {@link FundModal} for the fund modal component.
+ *
+ * @augments ModalContentProps
+ * @param {FundModalContentProps} props - The props for the FundModalContent component.
+ * @returns {JSX.Element} The FundModalContent component.
+ *
+ * @group Components
+ */
 declare const FundModalContent: (props: FundModalContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A fund modal component that wraps the {@link Fund} component.
+ *
+ * @param {FundModalProps} props - The props for the FundModal component.
+ * @param {ReactNode} [props.children] - The children to render inside the modal.
+ * @param {boolean} [props.open] - Whether the modal is open.
+ * @param {() => void} [props.setIsOpen] - A function to set the modal's open state.
+ * @returns {JSX.Element} The FundModal component.
+ *
+ * @see {@link FundModalTrigger} for the trigger button.
+ * @see {@link FundModalContent} for the modal content.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the FundModal component
+ * function App() {
+ *   const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
+ *     // call the buy quote API
+ *   }
+ *   const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
+ *     // call the buy options API
+ *   }
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <FundModal
+ *         country="US"
+ *         subdivision="NY"
+ *         cryptoCurrency="eth"
+ *         fiatCurrency="usd"
+ *         fetchBuyQuote={fetchBuyQuote}
+ *         fetchBuyOptions={fetchBuyOptions}
+ *         network="base"
+ *         presetAmountInputs={[10, 25, 50]}
+ *       />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the FundModal component with a custom trigger button
+ * function App() {
+ *   const fetchBuyQuote: FundProps["fetchBuyQuote"] = async (params) => {
+ *     // call the buy quote API
+ *   }
+ *   const fetchBuyOptions: FundProps["fetchBuyOptions"] = async params => {
+ *     // call the buy options API
+ *   }
+ *   return (
+ *     <CDPReactProvider config={config} theme={themeOverrides}>
+ *       <FundModal
+ *         country="US"
+ *         subdivision="NY"
+ *         cryptoCurrency="eth"
+ *         fiatCurrency="usd"
+ *         fetchBuyQuote={fetchBuyQuote}
+ *         fetchBuyOptions={fetchBuyOptions}
+ *         network="base"
+ *         presetAmountInputs={[10, 25, 50]}
+ *       >
+ *         <button className="fund-button">
+ *           Get ETH
+ *         </button>
+ *       </FundModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 declare const FundModal: ({ children, open, setIsOpen, ...fundProps }: FundModalProps) => import("react/jsx-runtime").JSX.Element;
 export { FundModal, FundModalContent, FundModalTrigger, type FundModalProps, type FundModalContentProps, type FundModalTriggerProps, };

package/dist/components/LinkAuth/LinkAuthFlow.d.ts

@@ -1,13 +1,38 @@
 import { ReactNode } from 'react';
 import { LinkAuthFlowView } from './types';
+/**
+ * A ref to the sign in content.
+ *
+ * @see {@link LinkAuthFlowProps}
+ */
 export interface SignInContentRef {
+    /** Whether the user can go back to the previous step of the sign in flow. */
     canGoBack: boolean;
+    /** A function to go back to the previous step of the sign in flow. */
     goBack: () => void;
 }
+/**
+ * Props for the LinkAuthFlow component.
+ *
+ * @see {@link LinkAuthFlow}
+ */
 export interface LinkAuthFlowProps {
+    /** A render function for the children of the component. The render function provides the current view and the rendered content for the view. */
     children?: ((props: {
         view: LinkAuthFlowView;
         Content: ReactNode;
     }) => ReactNode) | undefined;
 }
+/**
+ * A component for the flow of the link auth component.
+ *
+ * LinkAuthFlow renders the LinkAuthItems component when the view is "list" and the SignIn component when the view is "email" or "sms". It also handles the transition between the views.
+ *
+ * @param {LinkAuthFlowProps} props - The props for the LinkAuthFlow component.
+ * @returns {JSX.Element} The LinkAuthFlow component.
+ *
+ * @see {@link LinkAuth}
+ *
+ * @group Components
+ */
 export declare const LinkAuthFlow: ({ children }: LinkAuthFlowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/LinkAuth/LinkAuthFlowBackButton.d.ts

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