@coinbase/cdp-react 0.0.97 → 0.0.99

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

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;