its-just-ui/dist/components/Drawer/Drawer.d.ts

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

import { default as React } from 'react';

export interface DrawerItemData {
    id: string | number;
    label: string;
    icon?: React.ReactNode;
    disabled?: boolean;
    group?: string;
    badge?: string | number;
    description?: string;
    href?: string;
    onClick?: () => void;
    [key: string]: unknown;
}
export type DrawerItem = DrawerItemData;
export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
    items?: DrawerItemData[];
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
    defaultOpen?: boolean;
    position?: 'left' | 'right' | 'top' | 'bottom';
    variant?: 'default' | 'overlay' | 'push' | 'mini' | 'persistent';
    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    width?: string;
    height?: string;
    maxWidth?: string;
    maxHeight?: string;
    minWidth?: string;
    minHeight?: string;
    title?: string;
    children?: React.ReactNode;
    footer?: React.ReactNode;
    header?: React.ReactNode;
    disabled?: boolean;
    loading?: boolean;
    collapsible?: boolean;
    collapsed?: boolean;
    onCollapsedChange?: (collapsed: boolean) => void;
    closeOnOverlayClick?: boolean;
    closeOnEscape?: boolean;
    preventScroll?: boolean;
    focusTrap?: boolean;
    showCloseIcon?: boolean;
    loadingMessage?: string;
    emptyMessage?: string;
    status?: 'default' | 'success' | 'warning' | 'error';
    transition?: 'none' | 'fade' | 'slide' | 'scale' | 'flip';
    transitionDuration?: number;
    renderItem?: (item: DrawerItemData, isActive: boolean) => React.ReactNode;
    renderHeader?: () => React.ReactNode;
    renderFooter?: () => React.ReactNode;
    renderEmpty?: () => React.ReactNode;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    backgroundColor?: string;
    overlayColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    headerBackgroundColor?: string;
    headerBorderColor?: string;
    headerPadding?: string;
    headerFontSize?: string;
    headerFontWeight?: string;
    headerTextColor?: string;
    footerBackgroundColor?: string;
    footerBorderColor?: string;
    footerPadding?: string;
    itemPadding?: string;
    itemHoverBackgroundColor?: string;
    itemActiveBackgroundColor?: string;
    itemActiveTextColor?: string;
    itemDisabledOpacity?: string;
    iconColor?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onItemClick?: (item: DrawerItemData) => void;
    onKeyDown?: (event: React.KeyboardEvent) => void;
    onTransitionStart?: () => void;
    onTransitionEnd?: () => void;
    closeIcon?: React.ReactNode;
    closeIconPosition?: 'left' | 'right';
    closeIconClassName?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-labelledby'?: string;
}
export interface DrawerContextValue {
    open: boolean;
    setOpen: (open: boolean) => void;
    collapsed: boolean;
    setCollapsed: (collapsed: boolean) => void;
    items: DrawerItemData[];
    position: string;
    variant: string;
    size: string;
    status: string;
    transition: string;
    transitionDuration: number;
    disabled: boolean;
    loading: boolean;
    collapsible: boolean;
    width?: string;
    height?: string;
    maxWidth?: string;
    maxHeight?: string;
    minWidth?: string;
    minHeight?: string;
    loadingMessage: string;
    emptyMessage: string;
    renderItem?: (item: DrawerItemData, isActive: boolean) => React.ReactNode;
    renderHeader?: () => React.ReactNode;
    renderFooter?: () => React.ReactNode;
    renderEmpty?: () => React.ReactNode;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    backgroundColor?: string;
    textColor?: string;
    overlayColor?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    boxShadow?: string;
    focusBoxShadow?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    headerBackgroundColor?: string;
    headerBorderColor?: string;
    headerPadding?: string;
    headerFontSize?: string;
    headerFontWeight?: string;
    headerTextColor?: string;
    footerBackgroundColor?: string;
    footerBorderColor?: string;
    footerPadding?: string;
    itemPadding?: string;
    itemHoverBackgroundColor?: string;
    itemActiveBackgroundColor?: string;
    itemActiveTextColor?: string;
    itemDisabledOpacity?: string;
    iconColor?: string;
    onFocus?: () => void;
    onBlur?: () => void;
    onItemClick?: (item: DrawerItemData) => void;
    showCloseIcon?: boolean;
    closeIcon?: React.ReactNode;
    closeIconPosition?: 'left' | 'right';
    closeIconClassName?: string;
    onOpenChange?: (open: boolean) => void;
}
export declare const useDrawer: () => DrawerContextValue;
export interface DrawerContainerProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const DrawerContainer: React.ForwardRefExoticComponent<DrawerContainerProps & React.RefAttributes<HTMLDivElement>>;
export interface DrawerOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const DrawerOverlay: React.ForwardRefExoticComponent<DrawerOverlayProps & React.RefAttributes<HTMLDivElement>>;
export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
export interface DrawerItemListProps extends React.HTMLAttributes<HTMLDivElement> {
    children?: React.ReactNode;
}
declare const DrawerItemList: React.ForwardRefExoticComponent<DrawerItemListProps & React.RefAttributes<HTMLDivElement>>;
export interface DrawerItemProps extends React.HTMLAttributes<HTMLElement> {
    item: DrawerItemData;
}
declare const DrawerItemComponent: React.ForwardRefExoticComponent<DrawerItemProps & React.RefAttributes<HTMLElement>>;
interface DrawerComponent extends React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>> {
    Container: typeof DrawerContainer;
    Overlay: typeof DrawerOverlay;
    Header: typeof DrawerHeader;
    Content: typeof DrawerContent;
    Footer: typeof DrawerFooter;
    ItemList: typeof DrawerItemList;
    Item: typeof DrawerItemComponent;
}
declare const DrawerCompound: DrawerComponent;
export { DrawerCompound, DrawerContainer, DrawerOverlay, DrawerHeader, DrawerContent, DrawerFooter, DrawerItemList, DrawerItemComponent as DrawerItem, };
export default DrawerCompound;