@buun_group/brutalist-ui/dist/react/sheet/Sheet.d.ts

A brutalist-styled component library

/**
 * @module Sheet
 * @description A slide-out panel component that displays content in an overlay from any side of the screen. Features backdrop blur, focus management, and smooth animations with multiple size variants.
 */
import React, { CSSProperties } from 'react';
/**
 * Props for the Sheet component
 */
interface SheetProps {
    /**
     * Whether the sheet is currently open (controlled mode)
     */
    open?: boolean;
    /**
     * Whether the sheet should be open by default (uncontrolled mode)
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Callback function called when the sheet open state changes
     */
    onOpenChange?: (open: boolean) => void;
    /**
     * Content to render within the sheet provider
     */
    children?: React.ReactNode;
    /**
     * Additional CSS classes to apply to the sheet container
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the SheetTrigger component
 */
interface SheetTriggerProps {
    /**
     * Content to render inside the trigger button
     */
    children: React.ReactNode;
    /**
     * Additional CSS classes to apply to the trigger
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
    /**
     * Whether to use the child element as the trigger instead of a button
     * @default false
     */
    asChild?: boolean;
}
/**
 * Props for the SheetContent component
 */
interface SheetContentProps {
    /**
     * Content to render inside the sheet
     */
    children: React.ReactNode;
    /**
     * Additional CSS classes to apply to the sheet content
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
    /**
     * Side of the screen from which the sheet should slide out
     * @default 'right'
     */
    side?: 'top' | 'bottom' | 'left' | 'right';
    /**
     * Size variant for the sheet
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
    /**
     * Visual style variant for the sheet
     * @default 'default'
     */
    variant?: 'default' | 'brutal' | 'outline';
    /**
     * Whether to show the backdrop overlay
     * @default true
     */
    showOverlay?: boolean;
    /**
     * Whether clicking the overlay should close the sheet
     * @default true
     */
    closeOnOverlayClick?: boolean;
    /**
     * Whether pressing Escape should close the sheet
     * @default true
     */
    closeOnEscape?: boolean;
    /**
     * Custom container element to portal the sheet into
     */
    container?: HTMLElement | null;
    /**
     * Callback when the Escape key is pressed
     */
    onEscapeKeyDown?: (event: KeyboardEvent) => void;
    /**
     * Callback when a pointer down event occurs outside the sheet
     */
    onPointerDownOutside?: (event: PointerEvent) => void;
    /**
     * Callback when any interaction occurs outside the sheet
     */
    onInteractOutside?: (event: Event) => void;
    /**
     * Callback when the sheet opens and focus is applied
     */
    onOpenAutoFocus?: (event: Event) => void;
    /**
     * Callback when the sheet closes and focus is restored
     */
    onCloseAutoFocus?: (event: Event) => void;
}
/**
 * Props for the SheetHeader component
 */
interface SheetHeaderProps {
    /**
     * Content to render in the sheet header
     */
    children: React.ReactNode;
    /**
     * Additional CSS classes to apply to the header
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the SheetTitle component
 */
interface SheetTitleProps {
    /**
     * Title text or content
     */
    children: React.ReactNode;
    /**
     * Additional CSS classes to apply to the title
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the SheetDescription component
 */
interface SheetDescriptionProps {
    /**
     * Description text or content
     */
    children: React.ReactNode;
    /**
     * Additional CSS classes to apply to the description
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the SheetFooter component
 */
interface SheetFooterProps {
    /**
     * Content to render in the sheet footer
     */
    children: React.ReactNode;
    /**
     * Additional CSS classes to apply to the footer
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
}
/**
 * Props for the SheetClose component
 */
interface SheetCloseProps {
    /**
     * Content to render inside the close button
     */
    children: React.ReactNode;
    /**
     * Additional CSS classes to apply to the close button
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
    /**
     * Whether to use the child element as the close trigger instead of a button
     * @default false
     */
    asChild?: boolean;
}
export declare const SheetNamespace: React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<HTMLDivElement>> & {
    Trigger: React.ForwardRefExoticComponent<SheetTriggerProps & React.RefAttributes<HTMLButtonElement>>;
    Content: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
    Header: React.ForwardRefExoticComponent<SheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
    Title: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
    Description: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
    Footer: React.ForwardRefExoticComponent<SheetFooterProps & React.RefAttributes<HTMLDivElement>>;
    Close: React.ForwardRefExoticComponent<SheetCloseProps & React.RefAttributes<HTMLButtonElement>>;
};
export { SheetNamespace as Sheet };
export type { SheetProps, SheetTriggerProps, SheetContentProps, SheetHeaderProps, SheetTitleProps, SheetDescriptionProps, SheetFooterProps, SheetCloseProps };