import { type LokeIcon } from "@loke/icons"; import * as DialogPrimitive from "@loke/ui/dialog"; import { type VariantProps } from "class-variance-authority"; import { type ComponentPropsWithoutRef, type HTMLAttributes } from "react"; /** * Sheet component for displaying content in a slide-out panel * * The Sheet component provides a flexible way to display additional content or controls that can be revealed on demand. It's commonly used for navigation menus, settings panels, or detailed views in mobile-first designs. * * Key features: * - Customizable position (top, bottom, left, right) * - Smooth animation for opening and closing * - Overlay background for focus * - Accessible close button * - Customizable content, title, and description components * - Fixed header and footer with scrollable content area * * Usage considerations: * - Use for secondary content that doesn't need to be always visible * - Ensure the sheet content is focused and easily dismissible * - Consider the impact on mobile devices and ensure responsive design * - Use appropriate positioning based on the context and content type * - Implement proper focus management for accessibility */ declare function Sheet({ ...props }: ComponentPropsWithoutRef): import("react/jsx-runtime").JSX.Element; declare function SheetTrigger({ ...props }: ComponentPropsWithoutRef): import("react/jsx-runtime").JSX.Element; declare function SheetClose({ ...props }: ComponentPropsWithoutRef): import("react/jsx-runtime").JSX.Element; declare function SheetPortal({ ...props }: ComponentPropsWithoutRef): import("react/jsx-runtime").JSX.Element; declare const SheetOverlay: import("react").ForwardRefExoticComponent, "ref"> & import("react").RefAttributes>; declare const sheetVariants: (props?: ({ side?: "right" | "bottom" | "left" | "top" | null | undefined; } & import("class-variance-authority/types").ClassProp) | undefined) => string; interface SheetContentProps extends ComponentPropsWithoutRef, VariantProps { } declare const SheetContent: import("react").ForwardRefExoticComponent>; declare const SheetHeader: { ({ className, ...props }: HTMLAttributes): import("react/jsx-runtime").JSX.Element; displayName: string; }; declare const SheetFooter: { ({ className, ...props }: HTMLAttributes): import("react/jsx-runtime").JSX.Element; displayName: string; }; declare const SheetTitle: import("react").ForwardRefExoticComponent, "ref"> & { icon?: LokeIcon; } & import("react").RefAttributes>; declare const SheetDescription: import("react").ForwardRefExoticComponent, "ref"> & import("react").RefAttributes>; export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, };