retro-react/dist/cjs/components/drawer/Drawer.d.ts

A React component library for building retro-style websites

/** @jsxImportSource theme-ui */
import React, { Dispatch } from 'react';
import { ThemeUICSSObject } from 'theme-ui';
import { ComponentColors } from "../../utils/getColorScheme";
export declare type DrawerDirection = 'left' | 'right';
export declare type DrawerColors = ComponentColors | 'greyscale' | 'greyscale-dark';
interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Whether the drawer is visible or not.
     *
     * @default false
     */
    isOpen: boolean;
    /**
     * A function to set the visibility of the drawer.
     *
     * @default () => {}
     */
    setIsOpen: Dispatch<React.SetStateAction<boolean>>;
    /**
     * The direction from which the drawer will appear.
     *
     * @default 'right'
     */
    direction?: DrawerDirection;
    /**
     * The main color of the drawer.
     *
     * @default 'primary'
     */
    color?: DrawerColors;
    sx?: ThemeUICSSObject;
}
/**
 * Drawers provide a flexible and effective way to display side content.
 * They can slide from the left or right side of the screen, providing additional space to place content.
 * With the `isOpen` prop, you can control the visibility of the Drawer and with the `setIsOpen` prop you can set its state.
 *
 * Pressing the `Escape` key will close the Drawer.
 * The `direction` prop allows you to set the direction from which the drawer will appear.
 *
 * @example
 * const [isOpen, setIsOpen] = useState(false);
 *
 * <Drawer isOpen={isOpen} setIsOpen={setIsOpen} direction="right" color="primary">
 *     Drawer Content
 * </Drawer>
 * <button onClick={() => setIsOpen(true)}>Open Drawer</button>
 */
export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
export {};