@coinbase/cdp-react 0.0.98 → 0.0.99

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"];

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

@@ -3,5 +3,13 @@ interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     as?: ElementType;
     children?: ReactNode;
 }
+/**
+ * A label component.
+ *
+ * @param {LabelProps} props - The props for the component.
+ * @param {ElementType} [props.as] - The element type to render the label as.
+ * @param {ReactNode} [props.children] - The children to render inside the label.
+ * @returns {JSX.Element} The label component.
+ */
 export declare const Label: ({ as: Component, children, className, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,5 +6,11 @@ type OTPProps = {
     label?: ReactNode;
     passwordLength?: number;
 } & OneTimePasswordFieldProps;
+/**
+ * A themed OTP component with a label.
+ *
+ * @param {OTPProps} props - The props for the component.
+ * @returns {JSX.Element} The OTP component.
+ */
 export declare const OTP: import('react').ForwardRefExoticComponent<Omit<OTPProps, "ref"> & import('react').RefAttributes<HTMLInputElement[]>>;
 export {};

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

@@ -1,5 +1,8 @@
 import { APIError } from '@coinbase/cdp-hooks';
 import { FormHTMLAttributes, Ref } from 'react';
+/**
+ * The props for the OTPForm component.
+ */
 export interface OTPFormProps extends FormHTMLAttributes<HTMLFormElement> {
     canResetOTP?: boolean;
     error?: string | APIError;
@@ -13,4 +16,21 @@ export interface OTPFormProps extends FormHTMLAttributes<HTMLFormElement> {
     resendCountdown?: number | null;
     successMessage?: string;
 }
+/**
+ * A form for signing in with an email address.
+ *
+ * @param {OTPFormProps} props - The props for the component.
+ * @param {OTPFormProps["canResetOTP"]} [props.canResetOTP] - Whether the OTP can be reset.
+ * @param {OTPFormProps["error"]} [props.error] - A (server) error message.
+ * @param {OTPFormProps["isPending"]} [props.isPending] - Whether the sign in is pending.
+ * @param {OTPFormProps["onOTPChange"]} [props.onOTPChange] - A function to call when the OTP input value changes.
+ * @param {OTPFormProps["onResendOTP"]} [props.onResendOTP] - A function to call when the OTP is resent.
+ * @param {OTPFormProps["otp"]} [props.otp] - The value for the OTP input group.
+ * @param {OTPFormProps["otpInputsRef"]} [props.otpInputsRef] - A ref for the OTP inputs (one input per digit).
+ * @param {OTPFormProps["passwordLength"]} [props.passwordLength] - The length of the password. Defaults to 6.
+ * @param {OTPFormProps["resendCountdown"]} [props.resendCountdown] - The number of seconds remaining before the OTP can be resent.
+ * @param {OTPFormProps["successMessage"]} [props.successMessage] - A success message to display.
+ * @param {FormEventHandler<HTMLFormElement>} [props.onSubmit] - A function to handle form submission.
+ * @returns {JSX.Element} The OTPForm component.
+ */
 export declare const OTPForm: ({ canResetOTP, children, error, isPending, onOTPChange, onResendOTP, otp, otpInputsRef, passwordLength, resendCountdown, successMessage, ...props }: OTPFormProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,42 @@
 import { APIError } from '@coinbase/cdp-hooks';
 import { FormHTMLAttributes, ReactNode } from 'react';
 import { PhoneNumberInputProps } from '../PhoneNumberInput';
+/**
+ * The props for the PhoneNumberForm component.
+ */
 export interface PhoneNumberFormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "children"> {
+    /** The value of the country code input. */
     countryCode: PhoneNumberInputProps["countryCode"];
+    /** Either a boolean to enable or disable the default list of countries or an array of country options to display. */
     countryOptions?: PhoneNumberInputProps["countryOptions"];
+    /** An error message to display. */
     error?: string | APIError;
+    /** Whether the form is pending. */
     isPending?: boolean;
+    /** A function to call to clear the provided error. */
     onClearServerErrors?: () => void;
+    /** A function to call when the country code changes. */
     onCountryCodeChange: PhoneNumberInputProps["onCountryCodeChange"];
+    /** A function to call when the phone number changes. */
     onPhoneNumberChange: PhoneNumberInputProps["onPhoneNumberChange"];
+    /** The value of the phone number input. */
     phoneNumber: PhoneNumberInputProps["phoneNumber"];
+    /** The label for the submit button. */
     submitLabel?: ReactNode;
 }
+/**
+ * A form for signing in with a phone number.
+ *
+ * @param {PhoneNumberFormProps} props - The props for the component.
+ * @param {PhoneNumberFormProps["className"]} [props.className] - The class name to apply to the form.
+ * @param {PhoneNumberFormProps["countryCode"]} [props.countryCode] - The value of the country code input.
+ * @param {PhoneNumberFormProps["error"]} [props.error] - A (server) error message.
+ * @param {PhoneNumberFormProps["isPending"]} [props.isPending] - Whether the form is pending.
+ * @param {PhoneNumberFormProps["onClearServerErrors"]} [props.onClearServerErrors] - A function to clear server errors.
+ * @param {PhoneNumberFormProps["onCountryCodeChange"]} [props.onCountryCodeChange] - A function to call when the country code changes.
+ * @param {PhoneNumberFormProps["onPhoneNumberChange"]} [props.onPhoneNumberChange] - A function to call when the phone number changes.
+ * @param {PhoneNumberFormProps["phoneNumber"]} [props.phoneNumber] - The value of the phone number input.
+ * @param {PhoneNumberFormProps["submitLabel"]} [props.submitLabel] - The label for the submit button.
+ * @returns {JSX.Element} The PhoneNumberForm component.
+ */
 export declare const PhoneNumberForm: ({ className, countryCode, countryOptions, error, isPending, onCountryCodeChange, onPhoneNumberChange, phoneNumber, submitLabel, ...props }: PhoneNumberFormProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,6 +2,9 @@ import { CountryCode } from 'libphonenumber-js';
 import { InputProps } from '../Input';
 import { CountryOption } from '../../../data/countries';
 import { PhoneNumber } from '../../../utils/parseValuesFromPhoneNumber';
+/**
+ * Props for the PhoneNumberInput component.
+ */
 export interface PhoneNumberInputProps extends Omit<InputProps, "value" | "onChange"> {
     onCountryCodeChange?: (newCountry: CountryCode) => void;
     countryCode?: CountryCode;
@@ -9,4 +12,17 @@ export interface PhoneNumberInputProps extends Omit<InputProps, "value" | "onCha
     onPhoneNumberChange: (phoneNumber: PhoneNumber) => void;
     phoneNumber: PhoneNumber;
 }
+/**
+ * A phone number input component.
+ *
+ * @param props - The props for the PhoneNumberInput component.
+ * @param {string} [props.autoComplete] - The auto complete attribute for the input.
+ * @param {string} [props.className] - The class name for the PhoneNumberInput component.
+ * @param {CountryCode} [props.countryCode] - The country code for the phone number.
+ * @param {boolean | CountryOption[]} [props.countryOptions] - The country options to display.
+ * @param {(value: CountryCode) => void} props.onCountryCodeChange - The function to call when the country code changes.
+ * @param {(value: string) => void} props.onPhoneNumberChange - The function to call when the phone number changes.
+ * @param {string} props.phoneNumber - The value of the phone number.
+ * @returns {JSX.Element} The PhoneNumberInput component.
+ */
 export declare const PhoneNumberInput: import('react').ForwardRefExoticComponent<PhoneNumberInputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/forms/PhoneNumberInput/maskOverride.d.ts

@@ -4,5 +4,11 @@ type MaskFormatOverride = {
     maxLength?: number;
     normalizer?: (value: string) => string;
 };
+/**
+ * Get the mask override for a country code.
+ *
+ * @param [countryCode] - The country code to get the mask override for.
+ * @returns {MaskFormatOverride} The mask override for the country code.
+ */
 export declare const getMaskOverride: (countryCode?: CountryCode) => MaskFormatOverride;
 export {};

package/dist/components/forms/PhoneNumberInput/usePhoneNumberFormatter.d.ts

@@ -1,4 +1,11 @@
 import { CountryCode } from 'libphonenumber-js';
+/**
+ * A hook that formats a phone number.
+ *
+ * @param phoneNumber - The phone number to format.
+ * @param [countryCode] - The country code to format the phone number for.
+ * @returns {object} An object with the formatted phone number, a placeholder string, and functions to format the phone number and country code.
+ */
 export declare const usePhoneNumberFormatter: (phoneNumber: string, countryCode: CountryCode | undefined) => {
     formatBeforePhoneNumberChange: (inputPhoneNumber: string) => import('../../../utils/parseValuesFromPhoneNumber').PhoneNumber;
     formatBeforeCountryCodeChange: (newCountryCode: CountryCode) => import('../../../utils/parseValuesFromPhoneNumber').PhoneNumber;

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

@@ -1,20 +1,50 @@
 import { SelectProps as SelectPropsPrimitive, SelectContentProps as SelectContentPropsPrimitive, SelectItemProps as SelectItemPropsPrimitive, SelectTriggerProps as SelectTriggerPropsPrimitive, SelectValueProps } from '@radix-ui/react-select';
 import { ReactNode } from 'react';
 import { InputSize } from '../../../theme/theme';
+/**
+ * Select component props
+ */
 export interface SelectProps extends SelectPropsPrimitive {
     className?: string;
 }
+/**
+ * SelectTrigger component props
+ */
 export interface SelectTriggerProps extends SelectTriggerPropsPrimitive {
     className?: string;
     placeholder?: SelectValueProps["placeholder"];
     size?: InputSize;
 }
+/**
+ * SelectContent component props
+ */
 export interface SelectContentProps extends SelectContentPropsPrimitive {
     className?: string;
 }
+/**
+ * SelectItem component props
+ */
 export interface SelectItemProps extends SelectItemPropsPrimitive {
     indicator?: boolean | ReactNode;
 }
+/**
+ * Select component.
+ *
+ * @param {SelectProps} props - The props for the select.
+ * @returns {JSX.Element} The select component.
+ *
+ * @example
+ * ```tsx lines
+ * <Select>
+ *   <SelectTrigger placeholder="Select an option" aria-label="Select an option" />
+ *   <SelectContent>
+ *     <SelectItem value="option-1">Option 1</SelectItem>
+ *     <SelectItem value="option-2">Option 2</SelectItem>
+ *     <SelectItem value="option-3">Option 3</SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
 export declare const Select: ({ children, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SelectTrigger: import('react').ForwardRefExoticComponent<SelectTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
 export declare const SelectContent: import('react').ForwardRefExoticComponent<SelectContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/ui/Badge/index.d.ts

@@ -1,6 +1,25 @@
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * The props for the Badge component.
+ */
 export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** The content of the badge. */
     children?: ReactNode;
+    /** The variant of the badge. Defaults to "primary". */
     variant?: "primary" | "secondary" | "warning";
 }
+/**
+ * The props for the Badge component.
+ *
+ * @param {BadgeProps} props - The props for the Badge component.
+ * @returns {JSX.Element} The Badge component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render a primary badge
+ * <Badge variant="primary">1</Badge>
+ * ```
+ */
 export declare const Badge: ({ children, className, variant, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;