@coinbase/cdp-react 0.0.98 → 0.0.100

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

@@ -1,40 +1,252 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import { ButtonSize, ButtonVariant } from '../../theme/theme';
+/**
+ * The views of the inline MFA flow.
+ *
+ * @see {@link VerifyMfaInline}
+ */
 type VerifyMfaInlineView = "verify" | "content";
+/**
+ * The direction of the transition animation.
+ */
 type VerifyMfaInlineDirection = "left" | "right";
+/**
+ * The context value for the VerifyMfaInline component.
+ *
+ * @see {@link useVerifyMfaInlineContext}
+ */
 interface VerifyMfaInlineContextValue {
+    /** The current view of the inline MFA flow. */
     view: VerifyMfaInlineView;
+    /** A function to go to the verify view. */
     goToVerify: () => void;
+    /** A function to go to the content view. Optionally specify animation direction. */
     goToContent: (direction?: VerifyMfaInlineDirection) => void;
+    /** A function to go back to the previous view. */
     goBack: () => void;
 }
+/**
+ * A hook to get the VerifyMfaInline context value.
+ *
+ * @returns {VerifyMfaInlineContextValue} The link auth flow context value.
+ *
+ * @see {@link VerifyMfaInline}
+ *
+ * @group Hooks
+ */
 declare const useVerifyMfaInlineContext: () => VerifyMfaInlineContextValue;
+/**
+ * Props for the VerifyMfaInline component.
+ *
+ * @see {@link VerifyMfaInline}
+ */
 interface VerifyMfaInlineProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * The component children. Should include VerifyMfaInlineFlow.
+     * Can optionally include VerifyMfaInlineBackButton outside the Flow.
+     */
     children: ReactNode;
+    /**
+     * If true, forces MFA verification before showing content.
+     * Use this when you want users to verify BEFORE seeing the content.
+     *
+     * If false (default), content is shown first and MFA is triggered
+     * automatically when a protected action is called.
+     *
+     * @default true
+     */
     verifyFirst?: boolean;
+    /**
+     * Called when MFA verification completes successfully.
+     */
     onVerified?: () => void;
+    /**
+     * Called when MFA verification is cancelled.
+     * If provided, a back/cancel action in the verify view will trigger this
+     * and transition back to content.
+     */
     onCancel?: () => void;
+    /**
+     * The delay in milliseconds before transitioning to content after successful verification.
+     * This allows users to see the success state before the transition.
+     *
+     * @default 500
+     */
     successDelay?: number;
+    /**
+     * Additional class name for the container.
+     */
     className?: string;
 }
+/**
+ * Props for VerifyMfaInlineFlow component.
+ *
+ * @see {@link VerifyMfaInlineFlow}
+ */
 interface VerifyMfaInlineFlowProps {
+    /**
+     * The content to display. Can be:
+     * - A ReactNode: Used as the protected content (shown after MFA verification)
+     * - A render function: Receives `{ view, Content }` for full control over rendering
+     *
+     * When using a render function:
+     * - `view` is the current view ("verify" or "content")
+     * - `Content` is the default UI for that view (MFA form for "verify", null for "content")
+     */
     children: ReactNode | ((props: {
+        /** The verify view. */
         view: "verify";
+        /** The default content for for the "verify" view (i.e. the default MFA verification UI). */
         Content: ReactNode;
     } | {
+        /** The content view. */
         view: "content";
+        /** There is no default content for the "content" view (consumer provides content). */
         Content: null;
     }) => ReactNode);
+    /**
+     * Additional class name for the transition container.
+     */
     className?: string;
+    /**
+     * Whether to animate the height during transitions.
+     *
+     * @default true
+     */
     animateHeight?: boolean;
+    /**
+     * Whether to auto focus forms.
+     *
+     * @default true
+     */
     autoFocus?: boolean;
+    /**
+     * The type of transition to use between views.
+     * - "slide": Slides content left/right (default)
+     * - "fade": Fades content in/out
+     *
+     * @default "slide"
+     */
     transition?: "slide" | "fade";
 }
+/**
+ * Props for VerifyMfaInlineBackButton component.
+ *
+ * @see {@link VerifyMfaInlineBackButton}
+ */
 interface VerifyMfaInlineBackButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The size of the button. */
     size?: ButtonSize;
+    /** The variant of the button. */
     variant?: ButtonVariant;
 }
+/**
+ * Back button for navigating within the MFA verification flow or back to content.
+ *
+ * In `verifyFirst` mode, it only renders when the inner MFA flow has back navigation.
+ *
+ * Otherwise, it renders on the verify view and navigates back to content when the
+ * inner MFA flow can't go back.
+ *
+ * @param {VerifyMfaInlineBackButtonProps} props - The props for the component.
+ * @returns The back button, or null when there is nothing to navigate back to.
+ *
+ * @group Components
+ */
 declare const VerifyMfaInlineBackButton: ({ children, onClick, size, variant, ["aria-label"]: ariaLabel, className, ...props }: VerifyMfaInlineBackButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * The transition component for the inline MFA flow.
+ * Place this inside VerifyMfaInline, alongside VerifyMfaInlineBackButton if needed.
+ *
+ * @param props - The props for the VerifyMfaInlineFlow component.
+ * @param props.children - The protected content or a render function for full control.
+ * @param props.className - Additional class name.
+ * @param props.animateHeight - Whether to animate height during transitions.
+ * @param props.autoFocus - Whether to auto focus forms.
+ * @param props.transition - The type of transition animation ("slide" or "fade").
+ * @returns The rendered transition component.
+ *
+ * @group Components
+ *
+ * @see {@link VerifyMfaInline}
+ */
 declare const VerifyMfaInlineFlow: ({ children, className, animateHeight, autoFocus, transition, }: VerifyMfaInlineFlowProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A wrapper component that provides context and coordination for inline MFA verification.
+ * Use with VerifyMfaInlineFlow and optionally VerifyMfaInlineBackButton.
+ *
+ * By default, shows content first and automatically transitions to MFA verification
+ * when a protected action (like signing or exporting) is called. After verification,
+ * the action completes automatically.
+ *
+ * Use `verifyFirst` prop to force MFA verification before showing content.
+ *
+ * @param props - The props for the VerifyMfaInline component.
+ * @param props.children - Should include VerifyMfaInlineFlow and optionally VerifyMfaInlineBackButton.
+ * @param props.verifyFirst - If true, forces MFA verification before showing content.
+ * @param props.onVerified - Called when MFA verification completes.
+ * @param props.onCancel - Called when MFA verification is cancelled.
+ * @param props.className - Additional class name for the container.
+ * @param props.successDelay - The delay in milliseconds before transitioning to content after successful verification.
+ * @returns The rendered component.
+ *
+ * @group Components
+ *
+ * @document ./README.md
+ *
+ * @see {@link VerifyMfaInlineBackButton}
+ * @see {@link VerifyMfaInlineFlow}
+ * @see {@link useVerifyMfaInlineContext}
+ *
+ * @example
+ * ```tsx lines
+ * // Simple usage: Just the flow
+ * function ExportWalletModal({ address }) {
+ *   return (
+ *     <Modal>
+ *       <VerifyMfaInline verifyFirst>
+ *         <VerifyMfaInlineFlow>
+ *           <ExportWallet address={address} skipMfa />
+ *         </VerifyMfaInlineFlow>
+ *       </VerifyMfaInline>
+ *     </Modal>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // With back button outside the transition
+ * function CustomModal() {
+ *   return (
+ *     <Modal>
+ *       <VerifyMfaInline>
+ *         <VerifyMfaInlineBackButton />
+ *         <VerifyMfaInlineFlow transition="fade">
+ *           <MyProtectedContent />
+ *         </VerifyMfaInlineFlow>
+ *       </VerifyMfaInline>
+ *     </Modal>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // With render function for full control
+ * function AdvancedModal() {
+ *   return (
+ *     <VerifyMfaInline verifyFirst>
+ *       <VerifyMfaInlineBackButton />
+ *       <VerifyMfaInlineFlow>
+ *         {({ view, Content }) => (
+ *           view === "verify" ? <div>{Content}</div> : <MyProtectedContent />
+ *         )}
+ *       </VerifyMfaInlineFlow>
+ *     </VerifyMfaInline>
+ *   );
+ * }
+ * ```
+ */
 declare const VerifyMfaInline: ({ children, verifyFirst, onVerified, onCancel, successDelay, className, ...props }: VerifyMfaInlineProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfaInline, VerifyMfaInlineBackButton, VerifyMfaInlineFlow, useVerifyMfaInlineContext, type VerifyMfaInlineBackButtonProps, type VerifyMfaInlineContextValue, type VerifyMfaInlineDirection, type VerifyMfaInlineFlowProps, type VerifyMfaInlineProps, type VerifyMfaInlineView, };

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

@@ -2,22 +2,136 @@ import { ReactNode } from 'react';
 import { ButtonProps } from '../ui/Button';
 import { ModalContentProps } from '../ui/Modal';
 import { VerifyMfaProps } from '../VerifyMfa';
+/**
+ * Props for the verify MFA modal trigger button
+ *
+ * @see {@link VerifyMfaModalTrigger}
+ */
 interface VerifyMfaModalTriggerProps 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 VerifyMfaModal component.
+ *
+ * @see {@link VerifyMfaModal}
+ */
 interface VerifyMfaModalProps {
+    /** 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 verification is canceled. */
     onCancel?: () => void;
+    /** A function to call when the verification errors. */
     onError?: (error: Error) => void;
+    /** A function to call when MFA is successful verified. */
     onSuccess?: (mfaCode: string) => void;
 }
+/**
+ * Props for the VerifyMfaModalContent component.
+ *
+ * @see {@link VerifyMfaModalContent}
+ */
 interface VerifyMfaModalContentProps extends Omit<ModalContentProps, "children"> {
+    /** The children of the component. Leave empty to use the default verification UI. */
     children?: VerifyMfaProps["children"];
 }
+/**
+ * A trigger button that opens the verify MFA modal.
+ *
+ * @param {VerifyMfaModalTriggerProps} props - The props for the VerifyMfaModalTrigger 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 VerifyMfaModalTrigger component.
+ *
+ * @group Components
+ */
 declare const VerifyMfaModalTrigger: ({ children, className, label, ...props }: VerifyMfaModalTriggerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * The verify MFA modal content.
+ *
+ * @param {VerifyMfaModalContentProps} props - The props for the VerifyMfaModalContent component.
+ * @returns {JSX.Element} The VerifyMfaModalContent component.
+ *
+ * @group Components
+ */
 declare const VerifyMfaModalContent: ({ children, ...props }: VerifyMfaModalContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A verify MFA modal component that wraps the {@link VerifyMfa} component.
+ *
+ * @param {VerifyMfaModalProps} props - The props for the VerifyMfaModal component.
+ * @returns {JSX.Element} The VerifyMfaModal component.
+ *
+ * @see {@link VerifyMfaModalTrigger} for the trigger button.
+ * @see {@link VerifyMfaModalContent} for the modal content.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render the VerifyMfaModal component with a custom success handler
+ * function App() {
+ *   const handleSuccess = (mfaCode: string) => {
+ *     console.log(`Successfully verified`, mfaCode);
+ *   };
+ *
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <VerifyMfaModal onSuccess={handleSuccess} />
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the VerifyMfaModal component with a custom trigger button
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <VerifyMfaModal>
+ *         <button type="button">Verify</button>
+ *       </VerifyMfaModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the VerifyMfaModal component with a custom trigger button label
+ * function App() {
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <VerifyMfaModal>
+ *         <VerifyMfaModalTrigger variant="secondary" label="Verify" />
+ *       </VerifyMfaModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render the VerifyMfaModal with controlled open state
+ * function App() {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *
+ *   return (
+ *     <CDPReactProvider config={config}>
+ *       <VerifyMfaModal open={isOpen} setIsOpen={setIsOpen}>
+ *         <VerifyMfaModalTrigger />
+ *         <VerifyMfaModalContent />
+ *       </VerifyMfaModal>
+ *     </CDPReactProvider>
+ *   );
+ * }
+ * ```
+ */
 declare const VerifyMfaModal: ({ children, open, setIsOpen, onCancel, onError, onSuccess, }: VerifyMfaModalProps) => import("react/jsx-runtime").JSX.Element;
 export { VerifyMfaModal, VerifyMfaModalContent, VerifyMfaModalTrigger, type VerifyMfaModalProps, type VerifyMfaModalContentProps, type VerifyMfaModalTriggerProps, };

package/dist/components/forms/AmountInput/index.d.ts

@@ -1,3 +1,19 @@
 import { InputHTMLAttributes } from 'react';
 import { AmountInputProps } from './types';
+/**
+ * The AmountInput component
+ *
+ * @param {AmountInputProps} props - The props for the AmountInput component
+ * @param {number} props.amount - The amount to display
+ * @param {string} [props.className] - The class name for the input
+ * @param {string} props.unit - The unit to display
+ * @param {number} [props.decimalPlaces] - The number of decimal places to display (default 2)
+ * @param {string} [props.locale] - The locale in BCP 47 format (e.g. "en-US").
+ * @param {number} [props.max] - The maximum value for the input
+ * @param {number} [props.min] - The minimum value for the input
+ * @param {Function} props.setAmount - A function to set the amount
+ * @param {Function} props.onBlur - A function to call when the input is blurred
+ * @param {Function} props.onPaste - A function to call when a value is pasted
+ * @param {string} [props.placeholder] - The placeholder for the input
+ */
 export declare const AmountInput: import('react').ForwardRefExoticComponent<AmountInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "inputMode" | "onChange" | "max" | "min"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/forms/AmountInput/types.d.ts

@@ -1,4 +1,7 @@
 import { ChangeEvent, ClipboardEvent, FocusEvent, InputEvent, InputHTMLAttributes } from 'react';
+/**
+ * The props for the AmountInput component
+ */
 export interface AmountInputProps {
     amount: number | undefined;
     unit?: string;
@@ -8,7 +11,13 @@ export interface AmountInputProps {
     min?: number;
     setAmount: (amount: number) => void;
 }
+/**
+ * The parameters for the useAmountInput hook
+ */
 export type UseAmoutInputParams = Pick<AmountInputProps, "amount" | "decimalPlaces" | "locale" | "max" | "min" | "setAmount"> & Pick<InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onPaste">;
+/**
+ * The return value of the useAmountInput hook
+ */
 export interface UseAmoutInputReturn {
     handleBeforeInput: (e: InputEvent<HTMLInputElement>) => void;
     handleBlur: (e: FocusEvent<HTMLInputElement>) => void;

package/dist/components/forms/AmountInput/useAmountInput.d.ts

@@ -1,2 +1,16 @@
 import { UseAmoutInputParams, UseAmoutInputReturn } from './types';
+/**
+ * The hook for the AmountInput component
+ *
+ * @param {UseAmoutInputParams} params - The parameters for the useAmountInput hook
+ * @param {number} params.amount - The amount to display
+ * @param {number} params.decimalPlaces - The number of decimal places to display
+ * @param {string} [params.locale] - The locale to use
+ * @param {number} [params.max] - The maximum value
+ * @param {number} [params.min] - The minimum value
+ * @param {(e: FocusEvent<HTMLInputElement>) => void} [params.onBlur] - A function to call when the input is blurred
+ * @param {(e: ClipboardEvent<HTMLInputElement>) => void} [params.onPaste] - A function to call when the input is pasted
+ * @param {(value: number) => void} [params.setAmount] - The function to set the amount value
+ * @returns {UseAmoutInputReturn} - The number value, input value, and handlers for the input
+ */
 export declare const useAmountInput: ({ amount, decimalPlaces, locale, max, min, setAmount, onBlur, onPaste, }: UseAmoutInputParams) => UseAmoutInputReturn;

package/dist/components/forms/AmountInput/useInputScale.d.ts

@@ -7,6 +7,18 @@ interface UseInputScaleParams {
     inputRef: RefObject<HTMLInputElement | null>;
     scaleWrapperRef: RefObject<HTMLElement | null>;
 }
+/**
+ * The parameters for the useInputScale hook
+ *
+ * @param {UseInputScaleParams} params - The parameters for the useInputScale hook
+ * @param {number} [params.minScale] - The minimum scale to apply to the input.
+ * @param {RefObject<HTMLInputElement>} params.containerRef - The ref to the container (for the max available width)
+ * @param {RefObject<HTMLInputElement>} params.measureRef - The ref to the element to measure (the value + currency width)
+ * @param {RefObject<HTMLInputElement>} params.inputRef - The ref to the input element
+ * @param {RefObject<HTMLInputElement>} params.scaleWrapperRef - The ref to the wrapper that will be scaled to fit the container
+ * @param {RefObject<HTMLInputElement>} params.valueRef - The ref to the value element (the amount)
+ * @returns {number} The scale value to apply to ensure the content fits within the container
+ */
 export declare const useInputScale: ({ minScale, containerRef, measureRef, inputRef, scaleWrapperRef, valueRef, }: UseInputScaleParams) => {
     updateScale: () => void;
 };

package/dist/components/forms/AmountInput/useNumberParseAndFormat.d.ts

@@ -1,11 +1,31 @@
 import { NumberParser, NumberFormatter } from '@internationalized/number';
+/**
+ * The parameters for the useNumberParseAndFormat hook
+ */
 export interface UseNumberParseAndFormatParams {
+    /** An input value from which to detect the numbering system. If not provided, the numbering system will be detected from the locale. */
     inputValue?: string;
+    /** The locale in BCP 47 format (e.g. "en-US") */
     locale?: string;
+    /** The options for the NumberFormatter */
     options?: Intl.NumberFormatOptions;
 }
+/**
+ * The return type of the useNumberParseAndFormat hook
+ */
 export interface UseNumberParseAndFormatReturn {
+    /** The NumberParser instance */
     parser: NumberParser;
+    /** The NumberFormatter instance */
     formatter: NumberFormatter;
 }
+/**
+ * The useNumberParseAndFormat hook
+ *
+ * @param {UseNumberParseAndFormatParams} [params] - The parameters for the useNumberParseAndFormat hook
+ * @param {string} [params.inputValue] - An input value from which to detect the numbering system. If not provided, the numbering system will be detected from the locale.
+ * @param {string} [params.locale] - The locale in BCP 47 format (e.g. "en-US").
+ * @param {Intl.NumberFormatOptions} [params.options] - The options for the NumberFormatter.
+ * @returns {UseNumberParseAndFormatReturn} The formatter and parser instances
+ */
 export declare const useNumberParseAndFormat: (params?: UseNumberParseAndFormatParams) => UseNumberParseAndFormatReturn;

package/dist/components/forms/CountrySelect/index.d.ts

@@ -1,5 +1,8 @@
 import { CountryCode } from '../../../data/countries';
 import { InputSize } from '../../../theme/theme';
+/**
+ * CountrySelect component props
+ */
 export interface CountrySelectProps {
     className?: string;
     size?: InputSize;
@@ -7,4 +10,10 @@ export interface CountrySelectProps {
     value?: CountryCode;
     onValueChange?: (value: CountryCode) => void;
 }
+/**
+ * CountrySelect component.
+ *
+ * @param {CountrySelectProps} props - The props for the CountrySelect component.
+ * @returns {JSX.Element} The CountrySelect component.
+ */
 export declare const CountrySelect: ({ className, size, defaultValue, value, onValueChange, }: CountrySelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/EmailForm/index.d.ts

@@ -1,5 +1,8 @@
 import { APIError } from '@coinbase/cdp-hooks';
 import { FormHTMLAttributes } from 'react';
+/**
+ * The props for the EmailForm component.
+ */
 export interface EmailFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
     email?: string;
     error?: string | APIError;
@@ -8,4 +11,18 @@ export interface EmailFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>
     onEmailChange?: (value: string) => void;
     submitLabel?: string;
 }
+/**
+ * A form for signing in with an email address.
+ *
+ * @param {EmailFormProps} props - The props for the component.
+ * @param {string} [props.className] - The class name to apply to the form.
+ * @param {string} [props.email] - The value of the email input.
+ * @param {string} [props.error] - A (server) error message to display.
+ * @param {boolean} [props.isPending] - Whether the form is pending.
+ * @param {() => void} [props.onClearServerErrors] - A function to clear server errors.
+ * @param {(value: string) => void} [props.onEmailChange] - A function to handle email input value changes.
+ * @param {string} [props.submitLabel] - The label for the submit button.
+ * @param {FormEventHandler<HTMLFormElement>} [props.onSubmit] - A function to handle form submission.
+ * @returns {JSX.Element} The EmailForm component.
+ */
 export declare const EmailForm: ({ className, email, error, onEmailChange, isPending, submitLabel, ...props }: EmailFormProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/ExchangeAmountInput/index.d.ts

@@ -1,3 +1,22 @@
 import { InputHTMLAttributes } from 'react';
 import { ExchangeAmountInputProps } from './types';
+/**
+ * ExchangeAmountInput component
+ *
+ * @param {ExchangeAmountInputProps} props - The props for the ExchangeAmountInput component
+ * @param {string} props.cryptoAmount - The amount in crypto
+ * @param {string} props.cryptoCurrency - The currency of the crypto value
+ * @param {number} [props.cryptoDecimalPlaces] - The number of decimal places for the crypto amount (default 8)
+ * @param {string} props.exchangeRate - The exchange rate
+ * @param {string} props.fiatAmount - The amount in fiat
+ * @param {string} props.fiatCurrency - The currency of the fiat value
+ * @param {number} [props.fiatDecimalPlaces] - The number of decimal places for the fiat amount (defualt 2)
+ * @param {InputType} props.inputType - The type of input (crypto or fiat)
+ * @param {boolean} [props.isExchangeRatePending] - Whether the exchange rate is pending
+ * @param {string} [props.locale] - The locale in BCP 47 format (e.g. "en-US").
+ * @param {Function} props.setCryptoAmount - The function to set the crypto amount
+ * @param {Function} props.setFiatAmount - The function to set the fiat amount
+ * @param {Function} props.setInputType - The function to set the input type
+ * @returns {JSX.Element} The AmountInput component
+ */
 export declare const ExchangeAmountInput: import('react').ForwardRefExoticComponent<ExchangeAmountInputProps & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "inputMode" | "onChange" | "max" | "min"> & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/forms/ExchangeAmountInput/types.d.ts

@@ -1,5 +1,11 @@
 import { AmountInputProps } from '../AmountInput/types';
+/**
+ * The type of input (crypto or fiat)
+ */
 export type InputType = "crypto" | "fiat";
+/**
+ * The props for the ExchangeAmountInput component
+ */
 export type ExchangeAmountInputProps = {
     cryptoAmount: AmountInputProps["amount"];
     cryptoDecimalPlaces?: AmountInputProps["decimalPlaces"];
@@ -17,7 +23,13 @@ export type ExchangeAmountInputProps = {
     setFiatAmount: AmountInputProps["setAmount"];
     setInputType: (inputType: InputType) => void;
 };
+/**
+ * The parameters for the useExchangeAmountInput hook
+ */
 export type UseExchangeAmountInputParams = Omit<ExchangeAmountInputProps, "max" | "min" | "setInputType">;
+/**
+ * The return value of the useExchangeAmountInput hook
+ */
 export interface UseExchangeAmountInputReturn {
     formatInputValue: (value: number) => string;
     formatOutputValue: (value: number) => string;

package/dist/components/forms/ExchangeAmountInput/useExchangeAmountInput.d.ts

@@ -1,2 +1,19 @@
 import { UseExchangeAmountInputParams, UseExchangeAmountInputReturn } from './types';
+/**
+ * The hook for the ExchangeAmountInput component
+ *
+ * @param {UseExchangeAmountInputParams} params - The parameters for the useExchangeAmountInput hook
+ * @param {string} params.cryptoAmount - The amount in crypto
+ * @param {string} params.cryptoCurrency - The currency of the crypto value
+ * @param {number} [params.cryptoDecimalPlaces] - The number of decimal places for the crypto amount (default 8)
+ * @param {string} params.exchangeRate - The exchange rate
+ * @param {string} params.fiatAmount - The amount in fiat
+ * @param {string} params.fiatCurrency - The currency of the fiat value
+ * @param {number} [params.fiatDecimalPlaces] - The number of decimal places for the fiat amount (defualt 2)
+ * @param {InputType} params.inputType - The type of input (crypto or fiat)
+ * @param {string} [params.locale] - The locale in BCP 47 format (e.g. "en-US").
+ * @param {Function} params.setCryptoAmount - The function to set the crypto amount
+ * @param {Function} params.setFiatAmount - The function to set the fiat amount
+ * @returns {UseExchangeAmountInputReturn} - The active and inactive values, the active and inactive currencies, the active and inactive decimal places, and the functions to handle changing values.
+ */
 export declare const useExchangeAmountInput: ({ cryptoAmount, cryptoCurrency, cryptoDecimalPlaces, exchangeRate, fiatAmount, fiatCurrency, fiatDecimalPlaces, inputType, locale, setFiatAmount, setCryptoAmount, }: UseExchangeAmountInputParams) => UseExchangeAmountInputReturn;

package/dist/components/forms/Field/index.d.ts

@@ -1,5 +1,14 @@
 import { FormMessageProps, FormValidityStateProps } from '@radix-ui/react-form';
 import { CSSProperties, JSX, ReactNode } from 'react';
+/**
+ * The props for the Field component.
+ *
+ * @interface FormFieldProps
+ * @augments {HTMLAttributes<HTMLDivElement>}
+ * @property {string} label - The label for the input.
+ * @property {string} name - The name of the input.
+ * @property {FormMessageProps["match"]} validators - The validators for the input.
+ */
 export interface FormFieldProps {
     children?: FormValidityStateProps["children"];
     className?: string;
@@ -9,4 +18,10 @@ export interface FormFieldProps {
     style?: CSSProperties;
     validators?: [FormMessageProps["match"], ReactNode][];
 }
+/**
+ * A themed form field component with a label and validation messages.
+ *
+ * @param {FormFieldProps} props - The props for the component.
+ * @returns {JSX.Element} The Input component.
+ */
 export declare const Field: ({ children, className, inlineError, label, name, style, validators, }: FormFieldProps) => JSX.Element;

package/dist/components/forms/Input/index.d.ts

@@ -1,8 +1,23 @@
 import { FormValidityStateProps } from '@radix-ui/react-form';
 import { InputHTMLAttributes } from 'react';
 import { InputSize } from '../../../theme/theme';
+/**
+ * The props for the Input component.
+ */
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     size?: InputSize;
 }
+/**
+ * A themed input component with a label.
+ *
+ * @param {InputHTMLAttributes<HTMLInputElement>} props - The props for the input.
+ * @returns {JSX.Element} The Input component.
+ */
 export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+/**
+ * A higher-order component that adds validity state to the input.
+ *
+ * @param props - The props for the input.
+ * @returns {JSX.Element} The Input component.
+ */
 export declare const withValidityState: (props: InputProps) => FormValidityStateProps["children"];