@coinbase/cdp-react 0.0.98 → 0.0.100

package/dist/components/ui/QRCode/QRCodeSvg.d.ts

@@ -1,17 +1,52 @@
+/**
+ * The props for the QRCodeSVG component.
+ */
 export type QRCodeSVGProps = {
+    /** The value of the QR code */
     value: string;
+    /** The size of the QR code */
     size?: number;
+    /** The color of the QR code */
     color?: string;
+    /** The background color of the QR code */
     backgroundColor?: string;
+    /** The logo of the QR code */
     logo?: {
         uri: string;
     };
+    /** The size of the logo */
     logoSize?: number;
+    /** The background color of the logo */
     logoBackgroundColor?: string;
+    /** The margin of the logo */
     logoMargin?: number;
+    /** The border radius of the logo */
     logoBorderRadius?: number;
+    /** The error correction level of the QR code */
     ecl?: "L" | "M" | "Q" | "H";
+    /** Whether the data is async data fetched */
     isAsyncDataFetched?: boolean;
+    /** The fill color of the corners */
     cornerFillColor?: string;
 };
+/**
+ * The QR code SVG component.
+ *
+ * @param {QRCodeSVGProps} props - The props for the QR code SVG.
+ * @param {string} props.value - The value of the QR code.
+ * @param {number} props.size - The size of the QR code.
+ * @param {string} props.color - The color of the QR code.
+ * @param {string} props.backgroundColor - The background color of the QR code.
+ * @param {string} props.logo - The logo of the QR code.
+ * @param {number} props.logoSize - The size of the logo.
+ * @param {string} props.logoBackgroundColor - The background color of the logo.
+ * @param {number} props.logoMargin - The margin of the logo.
+ * @param {number} props.logoBorderRadius - The border radius of the logo.
+ * @param {number} props.quietZone - The quiet zone of the QR code.
+ * @param {number} props.quietZoneBorderRadius - The border radius of the quiet zone.
+ * @param {string} props.ecl - The error correction level of the QR code.
+ * @param {string} props.gradientType - The type of gradient to use.
+ * @param {string} props.cornerFillColor - The fill color of the corners.
+ * @returns The QR code SVG component.
+ */
 export declare function QRCodeSVG({ value, size, color, backgroundColor, logo, logoSize, logoBackgroundColor, logoMargin, logoBorderRadius, ecl, cornerFillColor, }: QRCodeSVGProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,5 +1,12 @@
 import { HTMLAttributes } from 'react';
 import { QRCodeSVGProps } from './QRCodeSvg';
 type QRCodeProps = QRCodeSVGProps & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+/**
+ * The QR code component.
+ *
+ * @param {QRCodeProps} props - The props for the QR code.
+ * @param {ReactNode} props.children - The children of the QR code.
+ * @returns The QR code.
+ */
 export declare const QRCode: ({ value, size, color, backgroundColor, ecl, isAsyncDataFetched, cornerFillColor, className, ...props }: QRCodeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ui/QRCode/useCorners.d.ts

@@ -1 +1,10 @@
+/**
+ * Get the corners of the QR code.
+ *
+ * @param {number} size - The size of the QR code.
+ * @param {number} matrixLength - The length of the matrix of the QR code.
+ * @param {string} backgroundColor - The background color of the corners.
+ * @param {string} fillColor - The fill color of the corners.
+ * @returns The corners of the QR code.
+ */
 export declare function useCorners(size: number, matrixLength: number, backgroundColor: string, fillColor?: string): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/QRCode/useDotsPath.d.ts

@@ -1,11 +1,29 @@
 export declare const CORNER_SIZE = 7;
 type UseDotsPathProps = {
+    /** The matrix of the QR code */
     matrix: number[][];
+    /** The size of the QR code */
     size: number;
+    /** The size of the logo */
     logoSize: number;
+    /** The margin of the logo */
     logoMargin: number;
+    /** The border radius of the logo */
     logoBorderRadius: number;
+    /** Whether the QR code has a logo */
     hasLogo: boolean;
 };
+/**
+ * Get the path of the QR code.
+ *
+ * @param {UseDotsPathProps} props - The props for the useDotsPath hook.
+ * @param {number[][]} props.matrix - The matrix of the QR code.
+ * @param {number} props.size - The size of the QR code.
+ * @param {number} props.logoSize - The size of the logo.
+ * @param {number} props.logoMargin - The margin of the logo.
+ * @param {number} props.logoBorderRadius - The border radius of the logo.
+ * @param {boolean} props.hasLogo - Whether the QR code has a logo.
+ * @returns The path of the QR code.
+ */
 export declare function useDotsPath({ matrix, size, logoSize, logoMargin, logoBorderRadius, hasLogo, }: UseDotsPathProps): string;
 export {};

package/dist/components/ui/QRCode/useLogo.d.ts

@@ -1,12 +1,30 @@
 type RenderLogoProps = {
+    /** The size of the QR code */
     size: number;
+    /** The logo to render */
     logo: {
         uri: string;
     } | undefined;
+    /** The size of the logo */
     logoSize: number;
+    /** The background color of the logo */
     logoBackgroundColor: string;
+    /** The margin of the logo */
     logoMargin: number;
+    /** The border radius of the logo */
     logoBorderRadius: number;
 };
+/**
+ * Get the logo for the QR code.
+ *
+ * @param {RenderLogoProps} props - The props for the useLogo hook.
+ * @param {number} props.size - The size of the QR code.
+ * @param {string} props.logo - The logo to render.
+ * @param {number} props.logoSize - The size of the logo.
+ * @param {string} props.logoBackgroundColor - The background color of the logo.
+ * @param {number} props.logoMargin - The margin of the logo.
+ * @param {number} props.logoBorderRadius - The border radius of the logo.
+ * @returns The logo.
+ */
 export declare function useLogo({ size, logo, logoSize, logoBackgroundColor, logoMargin, logoBorderRadius, }: RenderLogoProps): import("react/jsx-runtime").JSX.Element | undefined;
 export {};

package/dist/components/ui/QRCode/useMatrix.d.ts

@@ -1 +1,8 @@
+/**
+ * Generate the matrix for a QR code.
+ *
+ * @param value - The value to generate the matrix for.
+ * @param errorCorrectionLevel - The error correction level to use.
+ * @returns The matrix.
+ */
 export declare function useMatrix(value: string, errorCorrectionLevel: "L" | "M" | "Q" | "H"): any;

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

@@ -4,5 +4,11 @@ interface Props {
     id?: string;
     className?: string;
 }
+/**
+ * A themed Error component.
+ *
+ * @param {Props} props - The props for the component.
+ * @returns {JSX.Element} The ServerError component.
+ */
 export declare const ServerError: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLDivElement>>;
 export {};

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

@@ -1,7 +1,21 @@
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * The props for the SuccessMessage component.
+ *
+ * @interface Props
+ * @property {ReactNode} children - The children of the component.
+ * @property {string} [id] - The id of the component.
+ * @property {string} [className] - The class name of the component.
+ */
 export interface Props extends HTMLAttributes<HTMLParagraphElement> {
     children: ReactNode;
     id?: string;
     className?: string;
 }
+/**
+ * A themed SuccessMessage component.
+ *
+ * @param {Props} props - The props for the component.
+ * @returns {JSX.Element} The SuccessMessage component.
+ */
 export declare const SuccessMessage: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLParagraphElement>>;

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

@@ -1,5 +1,20 @@
 import { Key } from 'react';
 import { SwitchTransitionProps, SwitchTransitionRef } from '../SwitchTransition';
+/**
+ * The props for the SwitchFadeTransition component.
+ */
 export type SwitchFadeTransitionProps<T extends Key> = Omit<SwitchTransitionProps<T>, "transitionName" | "unmountOnExit" | "mountOnEnter" | "preEnter">;
+/**
+ * The ref for the SwitchFadeTransition component.
+ */
 export type SwitchFadeTransitionRef<T extends Key> = SwitchTransitionRef<T>;
+/**
+ * A transition that slides the content in and out.
+ *
+ * @param props - The props for the component.
+ * @param props.children - The children to render.
+ * @param props.className - The class name to apply to the component.
+ * @param props.direction - The direction of the transition.
+ * @returns {JSX.Element} The SwitchFadeTransition component.
+ */
 export declare const SwitchFadeTransition: <T extends Key>({ children, className, ...props }: SwitchFadeTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,23 @@
 import { Key } from 'react';
 import { SwitchTransitionProps, SwitchTransitionRef } from '../SwitchTransition';
+/**
+ * The props for the SwitchSlideTransition component.
+ */
 export interface SwitchSlideTransitionProps<T extends Key> extends Omit<SwitchTransitionProps<T>, "transitionName" | "unmountOnExit" | "mountOnEnter" | "preEnter"> {
     direction?: "left" | "right";
 }
+/**
+ * The ref for the SwitchSlideTransition component.
+ */
 export type SwitchSlideTransitionRef<T extends Key> = SwitchTransitionRef<T>;
+/**
+ * A transition that slides the content in and out.
+ *
+ * @param props - The props for the component.
+ * @param props.children - The children to render.
+ * @param props.className - The class name to apply to the component.
+ * @param props.direction - The direction of the transition.
+ * @param props.timeout - The timeout for the transition.
+ * @returns {JSX.Element} The SwitchSlideTransition component.
+ */
 export declare const SwitchSlideTransition: <T extends Key>({ children, className, direction, timeout, ...props }: SwitchSlideTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,13 +2,26 @@ import { ElementType, HTMLAttributes, Key, ReactNode, Ref } from 'react';
 import { TransitionMapOptions, TransitionMapResult } from '../../../hooks/useTransitionMap';
 import { TransitionState } from '../../../utils/transition';
 export { type TransitionMapOptions, type TransitionMapResult, type TransitionState };
+/**
+ * TransitionRef type for the SwitchTransition component.
+ */
 export interface SwitchTransitionRef<T extends Key> {
+    /** The transition result. */
     transition: TransitionMapResult<T>;
 }
+/**
+ * Props for the SwitchTransition component.
+ *
+ * @template T - The type of the key for the transition.
+ */
 export interface SwitchTransitionProps<T extends Key> extends Omit<HTMLAttributes<HTMLElement>, "children" | "autoFocus">, TransitionMapOptions<T> {
+    /** Whether to animate the height of the component. */
     animateHeight?: boolean;
+    /** Whether to auto focus on transition change. If a string is provided, it will be used as the selector for the focusable element. */
     autoFocus?: boolean | string;
+    /** The component or element to render. */
     as?: ElementType;
+    /** The children to transition between. */
     children: (props: {
         "data-index": number;
         inert?: boolean;
@@ -19,9 +32,38 @@ export interface SwitchTransitionProps<T extends Key> extends Omit<HTMLAttribute
         "data-is-resolved": TransitionState["isResolved"] | undefined;
         "data-parent": string;
     }) => ReactNode;
+    /** The class name to apply to the component. */
     className?: string;
+    /** Item keys to transition between. */
     items: readonly T[] | T[];
+    /** The name of the transition. Use one of the defined values to use a pre-defined transition, or a custom string to use a custom transition. */
     transitionName: "fade" | "slide-left" | "slide-right" | string;
+    /** A ref to provide access to the transition result. */
     transitionRef?: Ref<SwitchTransitionRef<T>>;
 }
+/**
+ * A component that transitions between two children.
+ *
+ * @param {object} props - The props for the component.
+ * @param {TransitionMapOptions["allowMultiple"]} props.allowMultiple - Allow multiple items to be in the 'entered' state at the same time.
+ * @param {boolean} props.animateHeight - Whether to animate the height of the component.
+ * @param {boolean} props.autoFocus - Whether to auto focus the first focusable child on transition change.
+ * @param {ElementType} props.as - The component to render.
+ * @param {(props: { key: T } & Partial<TransitionState>) => ReactNode} props.children - A render function for each child. A child will be rednered for each item in the `items` prop, which will be passed to the render function as the `key` prop. The TransitionState (status, isMounted, isEnter, isResolved) will also be passed to the render function as data-attributes.
+ * @param {string} props.className - The class name to apply to the component.
+ * @param {T[]} props.items - Item keys to transition between.
+ * @param {TransitionMapOptions["enter"]} props.enter - Enable or disable enter phase transitions.
+ * @param {TransitionMapOptions["exit"]} props.exit - Enable or disable exit phase transition.
+ * @param {TransitionMapOptions["initialEntered"]} props.initialEntered - Beginning from 'entered' state.
+ * @param {TransitionMapOptions["mountOnEnter"]} props.mountOnEnter - State will be 'unmounted' until hit enter phase for the first time. It allows you to create lazily mounted component.
+ * @param {TransitionMapOptions["onStateChange"]} props.onStateChange - A callback function that is called when the state of the transition changes.
+ * @param {TransitionMapOptions["preEnter"]} props.preEnter - Add a 'preEnter' state immediately before 'entering', which is necessary to change DOM elements from unmounted or display: none with CSS transition (not necessary for CSS animation).
+ * @param {TransitionMapOptions["preExit"]} props.preExit - Add a 'preExit' state immediately before 'exiting'.
+ * @param {TransitionMapOptions["timeout"]} props.timeout - Set timeout in ms for transitions; you can set a single value or different values for enter and exit transitions.
+ * @param {TransitionMapOptions["unmountOnExit"]} props.unmountOnExit - State will become 'unmounted' after 'exiting' finishes. It allows you to transition component out of DOM.
+ * @param {"fade" | "slide-left" | "slide-right" | string} props.transitionName - The name of the transition. Use one of the defined values to use a pre-defined transition, or a custom string to use a custom transition.
+ * @param {Ref<TransitionMapResult<T>>} props.transitionRef - A ref to provide access to the transition result.
+ * @param {CSSProperties} props.style - Styles to apply to the component.
+ * @returns {JSX.Element} The component.
+ */
 export declare const SwitchTransition: <T extends Key>({ allowMultiple, animateHeight, autoFocus, initialEntered, as: Component, children, className, enter, exit, items, mountOnEnter, onStateChange, preEnter, preExit, style, timeout, transitionName, transitionRef, unmountOnExit, ...props }: SwitchTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,46 @@
 import { MouseEventHandler, ReactNode } from 'react';
+/**
+ * The props for the ToggleListItem component.
+ */
 interface ToggleListItemProps {
+    /** An icon to display */
     icon?: ReactNode;
+    /** A label for the item */
     label: ReactNode;
+    /** Whether the item is in the active/enabled state */
     isActive?: boolean;
+    /** Whether the action button is pending */
     isPending?: boolean;
+    /** Whether the action button is disabled */
     isDisabled?: boolean;
+    /** A function to call when the activate button is clicked */
     onActivate?: MouseEventHandler<HTMLButtonElement>;
+    /** A function to call when the deactivate button is clicked */
     onDeactivate?: MouseEventHandler<HTMLButtonElement>;
+    /** Accessibility label for the activate button. Defaults to "Activate {label}" */
     activateAriaLabel?: string;
+    /** Accessibility label for the deactivate button. Defaults to "Deactivate {label}" */
     deactivateAriaLabel?: string;
+    /** The size of the list item. Defaults to "md" */
     size?: "md" | "sm";
 }
+/**
+ * A component for displaying a list item with an activate/deactivate toggle button.
+ * Shows a plus icon when inactive, minus icon when active.
+ *
+ * @param {ToggleListItemProps} props - The props for the ToggleListItem component.
+ * @returns {JSX.Element} The ToggleListItem component.
+ *
+ * @example
+ * ```tsx
+ * <ToggleListItem
+ *   icon={<IconEmail />}
+ *   label="Email"
+ *   isActive={isLinked}
+ *   onActivate={handleLink}
+ *   onDeactivate={handleUnlink}
+ * />
+ * ```
+ */
 export declare const ToggleListItem: ({ icon, label, isActive, isPending, isDisabled, onActivate, onDeactivate, activateAriaLabel, deactivateAriaLabel, size, }: ToggleListItemProps) => import("react/jsx-runtime").JSX.Element;
 export type { ToggleListItemProps };

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

@@ -3,5 +3,23 @@ interface VisuallyHiddenProps {
     as?: ElementType;
     children?: ReactNode;
 }
+/**
+ * Visually hidden component.
+ * Used to expose content to screen readers only.
+ *
+ * @param {VisuallyHiddenProps} props - The props for the component.
+ * @param {ElementType} [props.as] - The component to render. Note it must not have a Fragment as the root element. Defaults to "span".
+ * @param {ReactNode} [props.children] - The children of the component.
+ * @returns {JSX.Element} A visually hidden component.
+ *
+ * @example
+ * ```tsx lines
+ * // provide screen-reader accessible text for an abbreviation
+ * <p>
+ *   <span aria-hidden="true">30s</span>
+ *   <VisuallyHidden>30 seconds</VisuallyHidden>
+ * </p>
+ * ```
+ */
 export declare const VisuallyHidden: ({ as: Component, children }: VisuallyHiddenProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/data/countries.d.ts

@@ -1,12 +1,27 @@
 import { CountryCallingCode, CountryCode as ICountryCode } from 'libphonenumber-js';
+/**
+ * Re-export the type for the country code.
+ */
 export type CountryCode = ICountryCode;
+/**
+ * A country option for the country code select list.
+ */
 export type CountryOption = {
     callingCode: CountryCallingCode;
     code: CountryCode;
     flag: string;
     name: string;
 };
+/**
+ * These contries are completely removed from the phone dropdown
+ */
 export declare const OFAC_BLOCKED_COUNTRIES: string[];
 export declare const DEFAULT_COUNTRY_CODE: CountryCode;
+/**
+ * Returns the country calling code for a given country code.
+ *
+ * @param countryCode - The country code to get the calling code for.
+ * @returns The country calling code for the given country code.
+ */
 export declare const nonThrowingGetCountryCallingCode: (countryCode: CountryCode) => CountryCallingCode | undefined;
 export declare const countries: CountryOption[];

package/dist/data/countryNames.d.ts

@@ -1 +1,5 @@
+/**
+ * This file was copied from @cbhq/two-factor-register (/data/countryNames.ts)
+ * and currently only contains the country name for the US
+ */
 export declare const countryNames: Record<string, string>;

package/dist/hooks/useKeyExportPostMessage.d.ts

@@ -1,18 +1,43 @@
 import { RefObject } from 'react';
 import { SecureIframeChainType, SecureIframeKeyExportIncomingMessage, SecureIframeStatus, IframeTheme } from '../types/secureIframe';
+/**
+ * The props for the useKeyExportPostMessage hook.
+ */
 export interface UseKeyExportPostMessageProps {
+    /** The address of the account to export. */
     address: string;
+    /** The type of account to export. */
     type: SecureIframeChainType;
+    /** The base path of the secure iframe. */
     basePath?: string;
+    /** The project ID. */
     projectId: string;
+    /** The label of the button. */
     label?: string;
+    /** The label to display on copy success. */
     copiedLabel?: string;
+    /** Whether to show an icon in the button. */
     icon: boolean;
+    /** The ref to the iframe. */
     iframeRef: RefObject<HTMLIFrameElement | null>;
+    /** The function to call when the status is updated. */
     onStatusUpdate?: (status: SecureIframeStatus, message?: string) => void;
+    /** The theme to use for the iframe. */
     theme?: IframeTheme;
 }
+/**
+ * Sends a message to the secure iframe.
+ *
+ * @param el - The iframe element to send the message to.
+ * @param message - The message to send to the iframe.
+ */
 export declare const sendKeyExportMessage: (el: HTMLIFrameElement | null, message: SecureIframeKeyExportIncomingMessage) => void;
+/**
+ * The hook to use the key export post message.
+ *
+ * @param {UseKeyExportPostMessageProps} props - The props for the useKeyExportPostMessage hook.
+ * @returns The iframe url and the onLoad function.
+ */
 export declare const useKeyExportPostMessage: ({ address, basePath, copiedLabel, icon, iframeRef, label, onStatusUpdate, projectId, theme, type, }: UseKeyExportPostMessageProps) => {
     iframeUrl: string;
     isPending: boolean;

package/dist/hooks/usePhoneNumberState.d.ts

@@ -1,15 +1,62 @@
 import { CountryCode } from 'libphonenumber-js';
 import { PhoneNumber } from '../utils/parseValuesFromPhoneNumber';
+/**
+ * Options for the usePhoneNumberState hook.
+ */
 export interface UsePhoneNumberStateOptions {
+    /** The initial E.164 phone number string. */
     phoneNumber?: string;
+    /** The initial country code. Defaults to "US". */
     countryCode?: CountryCode;
+    /** Callback when the E.164 phone number changes. */
     onPhoneNumberChange?: (e164: string) => void;
+    /** Callback when the country code changes. */
     onCountryCodeChange?: (countryCode: CountryCode) => void;
 }
+/**
+ * Return value from the usePhoneNumberState hook.
+ */
 export interface UsePhoneNumberStateResult {
+    /** The phone number object with value and e164 fields. */
     phoneNumberObject: PhoneNumber;
+    /** The current country code. */
     countryCode: CountryCode;
+    /** Handler for PhoneNumberInput/PhoneNumberForm onPhoneNumberChange prop. */
     handlePhoneNumberChange: (pn: PhoneNumber) => void;
+    /** Handler for PhoneNumberInput/PhoneNumberForm onCountryCodeChange prop. */
     handleCountryCodeChange: (countryCode: CountryCode) => void;
 }
+/**
+ * A hook for managing phone number state with conversion between E.164 string
+ * and PhoneNumber object formats.
+ *
+ * This hook handles the bidirectional sync between:
+ * - An E.164 formatted string (used for API calls)
+ * - A PhoneNumber object with value/e164 fields (used by PhoneNumberInput/PhoneNumberForm)
+ *
+ * @param options - Configuration options for the hook.
+ * @param options.phoneNumber - The initial phone number.
+ * @param options.countryCode - The initial country code. Defaults to "US".
+ * @param options.onPhoneNumberChange - Callback when the phone number changes.
+ * @param options.onCountryCodeChange - Callback when the country code changes.
+ * @returns Phone number state and handlers for use with PhoneNumberInput/PhoneNumberForm.
+ *
+ * @example
+ * ```tsx
+ * const { phoneNumberObject, countryCode, handlePhoneNumberChange, handleCountryCodeChange } =
+ *   usePhoneNumberState({
+ *     phoneNumber: state.phoneNumber,
+ *     onPhoneNumberChange: (e164) => dispatch({ type: "SET_PHONE_NUMBER", payload: { phoneNumber: e164 } }),
+ *   });
+ *
+ * <PhoneNumberForm
+ *   phoneNumber={phoneNumberObject}
+ *   countryCode={countryCode}
+ *   onPhoneNumberChange={handlePhoneNumberChange}
+ *   onCountryCodeChange={handleCountryCodeChange}
+ * />
+ * ```
+ *
+ * @group Hooks
+ */
 export declare const usePhoneNumberState: ({ phoneNumber, countryCode: initialCountryCode, onPhoneNumberChange, onCountryCodeChange, }?: UsePhoneNumberStateOptions) => UsePhoneNumberStateResult;

package/dist/hooks/usePhoneNumberValidators.d.ts

@@ -3,6 +3,14 @@ import { CountryCode } from '../data/countries';
 interface UsePhoneNumberValidatorsProps {
     countryCode?: CountryCode;
 }
+/**
+ * A hook that returns a set of phone number validation functions.
+ *
+ * @param {UsePhoneNumberValidatorsProps} props - The props for the hook.
+ * @param {UsePhoneNumberValidatorsProps["error"]} [props.error] - The error message or API error.
+ * @param {UsePhoneNumberValidatorsProps["countryCode"]} [props.countryCode] - The country code to use for validation. Defaults to "US".
+ * @returns {object} An object containing the validation functions.
+ */
 export declare const usePhoneNumberValidators: ({ countryCode }: UsePhoneNumberValidatorsProps) => {
     isInvalidCountry: (v: string) => boolean;
     isInvalidLength: (v: string) => boolean;

package/dist/hooks/useTimeout.d.ts

@@ -1,3 +1,21 @@
+/**
+ * A hook that returns a `schedule` function for delayed callbacks with automatic cleanup.
+ *
+ * Calling `schedule` cancels any previously pending timeout. The timeout is
+ * automatically cancelled when the component unmounts, preventing state updates
+ * on unmounted components.
+ *
+ * @returns An object with `schedule` and `cancel` functions.
+ *
+ * @example
+ * ```tsx
+ * const { schedule } = useTimeout();
+ *
+ * const handleSuccess = () => {
+ *   schedule(() => resetView(), 800);
+ * };
+ * ```
+ */
 export declare const useTimeout: () => {
     schedule: (callback: () => void, delay: number) => void;
     cancel: () => void;

package/dist/hooks/useTimer.d.ts

@@ -1,3 +1,9 @@
+/**
+ * A countdown timer hook.
+ * It uses timestamp comparisons to remain accurate despite browser throttling or event loop delays.
+ *
+ * @returns {object} An object containing the current time left, a function to start the timer, and a function to reset the timer.
+ */
 export declare const useTimer: () => {
     timeRemaining: number | null;
     start: (durationSeconds: number) => void;

package/dist/hooks/useTransitionMap.d.ts

@@ -1,4 +1,7 @@
 import { TransitionState } from '../utils/transition';
+/**
+ * The options for a transition.
+ */
 export interface TransitionOptions {
     initialEntered?: boolean;
     mountOnEnter?: boolean;
@@ -15,9 +18,15 @@ export interface TransitionOptions {
         current: TransitionState;
     }) => void;
 }
+/**
+ * The options for a transition item.
+ */
 export interface TransitionItemOptions {
     initialEntered?: boolean;
 }
+/**
+ * The options for a transition map.
+ */
 export interface TransitionMapOptions<K> extends Omit<TransitionOptions, "onStateChange"> {
     allowMultiple?: boolean;
     onStateChange?: (event: {
@@ -25,6 +34,9 @@ export interface TransitionMapOptions<K> extends Omit<TransitionOptions, "onStat
         current: TransitionState;
     }) => void;
 }
+/**
+ * The result of a transition map.
+ */
 export interface TransitionMapResult<K> {
     stateMap: ReadonlyMap<K, TransitionState>;
     toggle: (key: K, toEnter?: boolean) => void;
@@ -33,6 +45,16 @@ export interface TransitionMapResult<K> {
     setItem: (key: K, options?: TransitionItemOptions) => void;
     deleteItem: (key: K) => boolean;
 }
+/**
+ * The useTransitionMap hook is a hook that provides a transition state map.
+ *
+ * @param {TransitionMapOptions<K>} options - The options for the transition map.
+ * @returns {TransitionMapResult<K>} - The result of the transition map.
+ *
+ * @see {@link SwitchTransition}
+ *
+ * @group Hooks
+ */
 declare const useTransitionMap: <K>(options?: TransitionMapOptions<K>) => {
     stateMap: Map<K, Readonly<{
         _s: number;