import { default as React } from 'react';
import { ExtendProps } from '../../utils/type';
/**
 * It's common that you decide whether this component is modaled by
 * the screen width, example code:
 * Note that you will always want to set `onScrimClick` to close the
 * drawer when scrim is clicked
 *
 * ```jsx
 * const [open, setOpen] = useState(false)
 * const isScreenExpanded = useWindowSizeType() === 'expanded'
 * return <NavigationDrawer
 *            modal={!isScreenExpanded}
 *            open={open}
 *            onScrimClick={() => setOpen(false)}
 *        />
 * ```
 * This component DO NOT have ref forwarded.
 *
 * @specs https://m3.material.io/components/navigation-drawer/specs
 */
export declare function NavigationDrawer({ open, onScrimClick, modal, headline, zIndex, className, children, ...props }: ExtendProps<{
    /**
     * See `modal`
     */
    open?: boolean;
    /**
     * Headline text, can be omitted
     */
    headline?: React.ReactNode;
    /**
     * Usually you'd like to put `<NavigationDrawerItem>` component here
     */
    children?: React.ReactNode;
    /**
     * When enable `modal`, you can toggle `open` property to
     * open and hide the SideSheet without any help of other component
     *
     * See also `open` `onScrimClick` `zIndex`
     */
    modal?: boolean;
    /**
     * Only works if `modal` set to true
     *
     * Most of the case you want toggle `open` to false
     *
     * See also `zIndex`
     */
    onScrimClick?(): void;
    /**
     * CSS `z-index`, if `modal` set to `true`
     *
     * @default 2
     */
    zIndex?: number;
}>): React.JSX.Element;
/**
 * This component has ref forwarded.
 */
export declare const NavigationDrawerItem: React.ForwardRefExoticComponent<{
    icon?: React.ReactNode;
    badge?: React.ReactNode;
    active?: boolean;
    children?: React.ReactNode;
    onClick?: VoidFunction;
} & Omit<React.HTMLProps<HTMLElement>, "as" | "ref" | "children" | "onClick" | "icon" | "active" | "badge"> & React.RefAttributes<HTMLDivElement>>;