@loke/design-system/dist/components/sheet/sheet.d.ts

A design system with individually importable components

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<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
declare function SheetTrigger({ ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
declare function SheetClose({ ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
declare function SheetPortal({ ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
declare const SheetOverlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
declare const sheetVariants: (props?: ({
    side?: "right" | "bottom" | "left" | "top" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
interface SheetContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
}
declare const SheetContent: import("react").ForwardRefExoticComponent<SheetContentProps & import("react").RefAttributes<HTMLDivElement>>;
declare const SheetHeader: {
    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
declare const SheetFooter: {
    ({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
    displayName: string;
};
declare const SheetTitle: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & {
    icon?: LokeIcon;
} & import("react").RefAttributes<HTMLHeadingElement>>;
declare const SheetDescription: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, };