@funkit/connect/dist/components/Dialog/Dialog.d.ts

Funkit Connect SDK elevates DeFi apps via web2 sign-ins and one-click checkouts.

import React, { type ReactNode } from 'react';
import { type BoxProps } from '../Box/Box';
export { CHECKOUT_MODAL_TITLE_COUNTDOWN_ID, MODAL_BOTTOM_BAR_IDS, useBottomSectionRef, useTitleCountdownRef, } from './hooks';
interface DialogProps {
    open: boolean;
    onClose: () => void;
    onAnimationComplete?: () => void;
    titleId: string;
    onMountAutoFocus?: (event: Event) => void;
    children: ReactNode;
    /** To hide the dialog without removing the object from the DOM **/
    isHidden?: boolean;
    /** Whether clicking outside the dialog or pressing escape key would close the modal */
    isSmartCloseable?: boolean;
    /** Whether side padding around the content of the modal should be applied */
    withoutSidePadding?: boolean;
    /** Whether the transition animation should be used on open/close */
    withTransition?: boolean;
    testId?: string;
    /** Whether to use the fanatics bottom sheet style on mobile */
    isFanaticsBottomSheet?: boolean;
    /**
     * Optional CSS `background` painted as a *translucent overlay* on top of
     * the modal's regular `modalBackground`. Rendered as an absolutely-
     * positioned sibling inside the modal outer; the underlying
     * `modalBackground` still shows through wherever the overlay's layers are
     * transparent. Use a stack of `linear-gradient(...)` with `rgba(..., 0)`
     * stops (no opaque base) so the overlay reads correctly in both light
     * and dark themes.
     */
    backgroundOverlay?: string;
}
/**
 * Dialog components (title, content, bottom bar) must be rendered as direct children of Dialog for correct scrolling behavior
 */
export declare function Dialog({ children, onClose, onAnimationComplete, open, titleId, isHidden, isSmartCloseable, withoutSidePadding, withTransition, testId, isFanaticsBottomSheet, backgroundOverlay, }: DialogProps): React.ReactPortal | null;
export declare namespace Dialog {
    var Title: ({ title, titleMeta, hasCloseButton: hasCloseButtonProp, isCloseDisabled, onClose, hasBackButton: hasBackButtonProp, isBackDisabled, onBack, className, }: DialogTitleProps) => React.JSX.Element;
    var Content: ({ children, fullHeight, className, id, paddingTop, withTopDivider, withBottomDivider, withoutBottomPadding, withoutSidePadding, extraContentTopPadding, withChildScrollArea, ...boxProps }: DialogContentProps) => React.JSX.Element;
    var BottomSection: ({ paddingX, children, ...boxProps }: BoxProps) => React.JSX.Element;
    var BottomBar: ({ topSection, topSectionVisible, actionButtonProps, onClose, onCloseLabel, }: import("../FunBottomBar/FunBottomBar").FunBottomBarProps) => React.JSX.Element | null;
}
interface DialogContentProps extends Omit<BoxProps, 'padding' | 'paddingX' | 'paddingY' | 'paddingLeft' | 'paddingRight' | 'paddingBottom'> {
    children: ReactNode;
    /** Whether the content should fill all available space */
    fullHeight?: boolean;
    withTopDivider?: 'always' | 'scroll' | 'never';
    withBottomDivider?: 'always' | 'scroll' | 'never';
    id?: string;
    /** Whether bottom padding should be applied */
    withoutBottomPadding?: boolean;
    /** Whether side padding should be applied */
    withoutSidePadding?: boolean;
    /** Whether to add extra top padding to visually balance the FunBottomBar */
    extraContentTopPadding?: boolean;
    /**
     * When true, Dialog.Content becomes a non-scrolling flex column container, delegating
     * scrolling to a child PaddedScrollableArea. Applies expanded side margins so that
     * full-width dividers inside the child can visually reach the dialog border edges.
     */
    withChildScrollArea?: boolean;
}
export interface DialogTitleProps {
    title?: string;
    titleMeta?: string;
    /** Can hide the close button, eg. when using a countdown element in its place */
    hasCloseButton?: boolean;
    isCloseDisabled?: boolean;
    onClose?: () => void;
    hasBackButton?: boolean;
    isBackDisabled?: boolean;
    onBack?: () => void;
    className?: string;
}