import { default as React } from 'react';
import { VariantProps } from 'class-variance-authority';
import * as SheetPrimitive from '@radix-ui/react-dialog';
/**
* Sheet component based on Radix UI Dialog for creating accessible slide-in panels
* A sheet is a panel that slides in from the edge of the screen, typically used for secondary content or actions
*
* @example
* ```tsx
* // Basic usage: Sheet with right position (default)
* function App() {
* return (
*
*
*
*
*
*
* Edit profile
* Make changes to your profile here.
*
*
*
*
*
*
*
*
*
*
*
*
* );
* }
* ```
*
* @example
* ```tsx
* // Sheet with different position (left, top, or bottom)
* function App() {
* return (
*
*
*
*
*
*
* Left Sheet
* This sheet slides in from the left.
*
*
*
*
*
*
*
*
* );
* }
* ```
*/
declare const Sheet: React.FC;
/**
* SheetTrigger component for triggering the opening of the sheet
*
* @example
* ```tsx
*
*
*
* ```
*/
declare const SheetTrigger: React.ForwardRefExoticComponent>;
/**
* SheetClose component for closing the sheet
*
* @example
* ```tsx
*
*
*
* ```
*/
declare const SheetClose: React.ForwardRefExoticComponent>;
/**
* Portal component for rendering sheet content in a portal
* Used internally by SheetContent
*/
declare const SheetPortal: React.FC;
/**
* Semi-transparent overlay that appears behind the sheet
* Used internally by SheetContent
*/
declare const SheetOverlay: React.FC>;
declare const sheetVariants: (props?: ({
side?: "top" | "right" | "bottom" | "left" | null | undefined;
size?: "sm" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
interface SheetContentProps extends React.ComponentPropsWithRef, VariantProps {
}
/**
* The component that contains the sheet content
* Slides in from one of the four sides of the screen
*
* @param side - The side from which the sheet slides in: 'top', 'right', 'bottom', or 'left' (default: 'right')
*
* @example
* ```tsx
*
*
* Left Sheet
* This sheet slides in from the left.
*
*
*
*
*
* ```
*/
declare const SheetContent: React.FC;
/**
* Layout component for the sheet header
* Contains the title and description with proper spacing
*
* @example
* ```tsx
*
* Sheet Title
* Sheet description goes here.
*
* ```
*/
declare const SheetHeader: {
({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
/**
* Layout component for the sheet footer
* Contains action buttons with responsive layout
* Arranges buttons in a column on mobile and a row on desktop
*
* @example
* ```tsx
*
*
*
*
* ```
*/
declare const SheetFooter: {
({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
/**
* The title of the sheet
* Should be concise and descriptive of the sheet's purpose
*
* @example
* ```tsx
* Edit Profile
* ```
*/
declare const SheetTitle: React.FC>;
/**
* The description of the sheet
* Provides additional context about the sheet's purpose
*
* @example
* ```tsx
* Make changes to your profile here. Click save when you're done.
* ```
*/
declare const SheetDescription: React.FC>;
export { Sheet, SheetPortal, SheetOverlay, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription };