@coinbase/cdp-react 0.0.98 → 0.0.100

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;

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

@@ -1,6 +1,31 @@
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * The props for the Banner component.
+ */
 export interface BannerProps extends HTMLAttributes<HTMLElement> {
+    /** A custom icon to display in the banner. If not provided, the variant icon will be displayed. */
     icon?: ReactNode;
+    /** The variant of the banner. When undefined, no icon will be rendered unless provided via the `icon` prop. */
     variant?: "success" | "warning" | "error";
 }
+/**
+ * The Banner component is used to display a message to the user.
+ *
+ * @param {BannerProps} props - The props for the Banner component.
+ * @returns {JSX.Element} The Banner component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render a success banner
+ * <Banner variant="success">A success message</Banner>
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render a banner with no variant and a custom icon
+ * <Banner icon={<CustomIcon />}>A banner message</Banner>
+ * ```
+ */
 export declare const Banner: ({ className, children, icon, variant, ...props }: BannerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,8 +1,58 @@
 import { ReactNode } from 'react';
 import { ButtonBaseProps } from '../ButtonBase';
 import { ButtonVariant } from '../../../theme/theme';
+/**
+ * The props for the Button component.
+ *
+ * @interface ButtonProps
+ * @augments {ButtonBaseProps}
+ * @property {ReactNode} [pendingLabel] - The label to display when the button is pending.
+ * @property {ButtonVariant} [variant] - The variant of the button. Defaults to "primary".
+ */
 export interface ButtonProps extends ButtonBaseProps {
+    /** A label to render when the button state is pending. */
     pendingLabel?: ReactNode;
+    /** The variant of the button. Defaults to "primary". */
     variant?: ButtonVariant;
 }
+/**
+ * A themed button component with loading state.
+ *
+ * @param {ButtonProps} props - The props for the component.
+ * @returns {JSX.Element} The Button component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx lines
+ * // Render a submit button
+ * <Button type="submit" onClick={() => console.log("Button clicked")}>Click me</Button>
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render a small secondary button
+ * <Button type="button" variant="secondary" size="sm">Secondary button</Button>
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render a full width button
+ * <Button fullWidth>Full width button</Button>
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render a button with a pending state
+ * <Button isPending pendingLabel="Sending...">Send transaction</Button>
+ * ```
+ *
+ * @example
+ * ```tsx lines
+ * // Render a button with a custom button element
+ * <Button onClick={() => console.log("Button clicked")} asChild>
+ *   <button>Send transaction</button>
+ * </Button>
+ * ```
+ */
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,9 +1,29 @@
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonSize } from '../../../theme/theme';
+/**
+ * The props for the Input component.
+ *
+ * @interface ButtonBaseProps
+ * @augments {ButtonHTMLAttributes<HTMLButtonElement>}
+ * @property {boolean} [asChild] - Set to true to use a custom element or component in place of the default one.
+ * @property {boolean} [fullWidth] - Whether the button should be full width.
+ * @property {boolean} [isPending] - Whether the button is pending.
+ * @property {ButtonSize} [size] - The size of the button. Defaults to "md".
+ */
 export interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Set to true to use a custom element or component in place of the default button element. */
     asChild?: boolean;
+    /** Whether the button should be full width. */
     fullWidth?: boolean;
+    /** Whether the button state is pending. */
     isPending?: boolean;
+    /** The size of the button. Defaults to "md". */
     size?: ButtonSize;
 }
+/**
+ * A themed button component with loading state.
+ *
+ * @param {ButtonBaseProps} props - The props for the component.
+ * @returns {JSX.Element} The Button component.
+ */
 export declare const ButtonBase: import('react').ForwardRefExoticComponent<ButtonBaseProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -1,2 +1,18 @@
 import { HTMLAttributes } from 'react';
+/**
+ * A footer component for the sign-in flow.
+ *
+ * @param {HTMLAttributes<HTMLDivElement>} props - The props for the component.
+ * @returns {JSX.Element} The sign-in footer.
+ *
+ * @example
+ * ```tsx lines
+ * function App() {
+ *   // Add class to the footer
+ *   return (
+ *     <CoinbaseFooter className="sign-in-footer" />
+ *   );
+ * }
+ * ```
+ */
 export declare const CoinbaseFooter: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,45 @@
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * The props for the CopyTextField component.
+ *
+ * @see {@link CopyTextField}
+ */
 export interface CopyTextFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** The value to copy to the clipboard. */
     value: string;
+    /** Custom display content. If not provided, displays the full value. */
     displayValue?: ReactNode;
+    /** The label for the field. */
     label?: string;
+    /** Aria label for the copy button. Defaults to "Copy". */
     copyAriaLabel?: string;
+    /** A function to call when the copy button is clicked. */
     onCopy?: () => void;
+    /** A function to call when the value is copied successfully. */
     onCopySuccess?: () => void;
 }
+/**
+ * A component that displays a value in a text field style container with a copy button.
+ *
+ * @param {CopyTextFieldProps} props - The props for the component.
+ * @returns {JSX.Element} The CopyTextField component.
+ *
+ * @group Components
+ *
+ * @example
+ * ```tsx
+ * // Display full value
+ * <CopyTextField value="some-secret-key" label="Secret Key" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With truncated display
+ * <CopyTextField
+ *   value={address}
+ *   displayValue={`${address.slice(0, 6)}...${address.slice(-4)}`}
+ *   label="Address"
+ * />
+ * ```
+ */
 export declare const CopyTextField: ({ className, value, displayValue, label, copyAriaLabel, onCopy, onCopySuccess, ...props }: CopyTextFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,21 @@
 import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * The props for the Error 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 Error component.
+ *
+ * @param {Props} props - The props for the component.
+ * @returns {JSX.Element} The Error component.
+ */
 export declare const Error: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLParagraphElement>>;

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

@@ -1,15 +1,32 @@
 import { IframeHTMLAttributes, ReactNode } from 'react';
 import { ButtonSize, ButtonVariant } from '../../../theme/theme';
 import { IframeTheme } from '../../../types/secureIframe';
+/**
+ * The props for the IframeButton component.
+ */
 interface IframeButtonProps extends IframeHTMLAttributes<HTMLIFrameElement> {
+    /** Whether to show an icon in the button. */
     icon?: boolean;
+    /** Whether the button is pending. */
     isPending?: boolean;
+    /** Whether the button should be full width. */
     fullWidth?: boolean;
+    /** The label to display on the button. */
     label: ReactNode;
+    /** A function to call when the theme changes. */
     onThemeChange?: (theme: IframeTheme) => void;
+    /** The size of the button. */
     size?: ButtonSize;
+    /** Theme overrides to apply to the button. The theme will be computed from the provided variant and then this theme object will be merged on top of it. */
     theme?: Partial<IframeTheme>;
+    /** The variant of the button. Defaults to "primary". */
     variant?: Extract<ButtonVariant, "primary" | "secondary">;
 }
+/**
+ * The IframeButton component is used to display a button that opens a secure iframe.
+ *
+ * @param {IframeButtonProps} props - The props for the IframeButton component.
+ * @returns {JSX.Element} The IframeButton component.
+ */
 declare const IframeButton: import('react').ForwardRefExoticComponent<IframeButtonProps & import('react').RefAttributes<HTMLIFrameElement>>;
 export { IframeButton, type IframeButtonProps, type IframeTheme };

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

@@ -5,5 +5,27 @@ interface LoadingSkeletonProps {
     style?: CSSProperties;
     children?: ReactNode;
 }
+/**
+ * Loading skeleton component.
+ * Applies a pulse animation to the component.
+ *
+ * @param {LoadingSkeletonProps} 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 "div".
+ * @param {ReactNode} [props.children] - The children of the component.
+ * @returns {JSX.Element} A loading skeleton component.
+ *
+ * @example
+ * ```tsx lines
+ * function LoadingCard() {
+ *   return (
+ *     <div className="loading-card">
+ *       <LoadingSkeleton className="loading-title" />
+ *       <LoadingSkeleton className="loading-p-line-1" />
+ *       <LoadingSkeleton className="loading-p-line-2" />
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
 export declare const LoadingSkeleton: ({ as: Component, children, className, style, }: LoadingSkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -6,5 +6,16 @@ interface LoadingSpinnerProps {
     strokeWidth?: string | number;
     style?: CSSProperties;
 }
+/**
+ * Loading spinner component.
+ *
+ * @param {object} props - The props for the component.
+ * @param {string} [props.className] - The class name for the component.
+ * @param {boolean} [props.staticStroke] - Whether to show the static outline.
+ * @param {string} [props.staticStrokeColor] - The color of the static outline.
+ * @param {string | number} [props.strokeWidth] - The width of the spinner.
+ * @param {CSSProperties} [props.style] - The style for the component.
+ * @returns {JSX.Element} A loading spinner component.
+ */
 export declare const LoadingSpinner: ({ className, staticStroke, staticStrokeColor, strokeWidth, style, }: LoadingSpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,12 +1,94 @@
 import { DialogContentProps } from '@radix-ui/react-dialog';
 import { CSSProperties, HTMLAttributes } from 'react';
+/**
+ * Props for the ModalContent component.
+ *
+ * @augments DialogContentProps
+ * @augments HTMLAttributes<HTMLDivElement>
+ * @property {string} overlayClassName - The class name to apply to the overlay.
+ * @property {CSSProperties} overlayStyle - The style to apply to the overlay.
+ *
+ * @see {@link ModalContent}
+ */
 export interface ModalContentProps extends DialogContentProps, HTMLAttributes<HTMLDivElement> {
     overlayClassName?: string;
     overlayStyle?: CSSProperties;
 }
+/**
+ * The ModalContent component is a wrapper around a DialogOverlay and DialogContent. It is intended to be used with the {@link Modal} component.
+ *
+ * @see {@link Modal}
+ * @see {@link ModalClose}
+ * @see {@link ModalDescription}
+ * @see {@link ModalTitle}
+ * @see {@link ModalTrigger}
+ * @see https://www.radix-ui.com/primitives/docs/components/dialog
+ *
+ * @group Components
+ */
 export declare const ModalContent: import('react').ForwardRefExoticComponent<ModalContentProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * The Modal component is the same as the Dialog component from Radix UI. This component is used to render the Radix UI Dialog component as a modal.
+ *
+ * @see {@link ModalClose}
+ * @see {@link ModalContent}
+ * @see {@link ModalDescription}
+ * @see {@link ModalTitle}
+ * @see {@link ModalTrigger}
+ * @see https://www.radix-ui.com/primitives/docs/components/dialog
+ *
+ * @group Components
+ */
 export declare const Modal: import('react').FC<import('@radix-ui/react-dialog').DialogProps>;
+/**
+ * The ModalClose component is the same as the DialogClose component from Radix UI. It is intended to be used with the {@link Modal} component.
+ *
+ * @see {@link Modal}
+ * @see {@link ModalContent}
+ * @see {@link ModalDescription}
+ * @see {@link ModalTitle}
+ * @see {@link ModalTrigger}
+ * @see https://www.radix-ui.com/primitives/docs/components/dialog
+ *
+ * @group Components
+ */
 export declare const ModalClose: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * The ModalDescription component is the same as the DialogDescription component from Radix UI. It is intended to be used with the {@link Modal} component.
+ *
+ * @see {@link Modal}
+ * @see {@link ModalClose}
+ * @see {@link ModalContent}
+ * @see {@link ModalTitle}
+ * @see {@link ModalTrigger}
+ * @see https://www.radix-ui.com/primitives/docs/components/dialog
+ *
+ * @group Components
+ */
 export declare const ModalDescription: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>>;
+/**
+ * The ModalTitle component is the same as the DialogTitle component from Radix UI. It is intended to be used with the {@link Modal} component.
+ *
+ * @see {@link Modal}
+ * @see {@link ModalClose}
+ * @see {@link ModalContent}
+ * @see {@link ModalDescription}
+ * @see {@link ModalTrigger}
+ * @see https://www.radix-ui.com/primitives/docs/components/dialog
+ *
+ * @group Components
+ */
 export declare const ModalTitle: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>>;
+/**
+ * The ModalTrigger component is the same as the DialogTrigger component from Radix UI. It is intended to be used with the {@link Modal} component.
+ *
+ * @see {@link Modal}
+ * @see {@link ModalClose}
+ * @see {@link ModalContent}
+ * @see {@link ModalDescription}
+ * @see {@link ModalTitle}
+ * @see https://www.radix-ui.com/primitives/docs/components/dialog
+ *
+ * @group Components
+ */
 export declare const ModalTrigger: import('react').ForwardRefExoticComponent<import('@radix-ui/react-dialog').DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;