@navinc/base-react-components/dist/wayfinder/drawer/drawer.d.ts

Nav's Pattern Library

import React, { ReactNode } from 'react';
export declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export declare const DrawerTitle: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
export declare const DrawerPortal: typeof import("vaul").Portal;
export declare const DrawerRoot: typeof import("vaul").Root;
/**
 * Props for the Drawer component
 */
export interface DrawerProps {
    /**
     * Direction from which the drawer appears on desktop. On mobile, it always appears from bottom.
     * @default 'right'
     */
    direction?: 'right' | 'top' | 'bottom';
    /**
     * Content to display in the trigger button that opens the drawer
     * @default 'Open Drawer'
     */
    trigger?: ReactNode;
    /**
     * Content to display as the drawer title. Can be a ReactNode or a function returning a ReactNode.
     * When using a function, it receives an object with an onClose function.
     * @default 'Drawer Title'
     */
    title?: ReactNode | ((props: {
        onClose: () => void;
    }) => ReactNode);
    /**
     * Custom footer content to render at the bottom of the drawer.
     * Can be a ReactNode or a function returning a ReactNode.
     * When using a function, it receives an object with an onClose function.
     */
    footer?: ReactNode | ((props: {
        onClose: () => void;
    }) => ReactNode);
    /**
     * Whether to show a close button in the title area
     * @default false
     */
    shouldShowCloseButtonInTitle?: boolean;
    /**
     * Content to render inside the drawer body
     */
    children?: ReactNode;
    /**
     * Controlled open state. When provided, the drawer becomes a controlled component.
     */
    open?: boolean;
    /**
     * Callback fired when the open state changes
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * Whether to show a gradient overlay at the bottom of the drawer content
     * @default false
     */
    shouldHaveGradient?: boolean;
    /**
     * Height of the gradient overlay when shouldHaveGradient is true
     * @default '80px'
     */
    gradientHeight?: string;
}
export declare const Drawer: ({ direction, trigger, title, footer, shouldShowCloseButtonInTitle, children, open: controlledOpen, onOpenChange, shouldHaveGradient, gradientHeight, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;