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
* function App() {
* return (
*
*
*
*
*
*
*
* Edit profile
*
* Make changes to your profile here.
*
*
*
*
*
*
Helper text
*
*
*
*
*
*
*
* );
* }
* ```
*
* @example
* ```tsx
* 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 SheetBody
*/
declare const SheetPortal: React.FC;
/**
* Semi-transparent overlay that appears behind the sheet
* Used internally by SheetBody
*/
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 SheetBodyProps extends React.ComponentPropsWithRef, VariantProps {
/**
* Classes for the backdrop behind the panel. Needed when a sheet has to get
* out of the way without closing — hiding the panel alone still leaves the
* dimmed backdrop covering the page.
*/
overlayClassName?: string;
}
/**
* The sliding panel container — renders the visible sheet with the overlay.
* Place SheetHeader, SheetContent, and SheetFooter as direct children.
*
* @param side - The side from which the sheet slides in: 'top', 'right', 'bottom', or 'left' (default: 'right')
* @param size - Maximum width of the panel (default: 'sm')
*
* @example
* ```tsx
*
*
* Left Sheet
*
* ...
*
*
*
*
*
* ```
*/
declare const SheetBody: React.FC;
/**
* Layout component for the sheet header.
* Place SheetTitle, SheetDescription, and any action rows (buttons, badges) inside.
* Users compose their own icons, badges, and quick-action buttons as children.
*
* @example
* ```tsx
*
*
* Sheet Title
*
* Sheet description goes here.
*
* ```
*/
declare const SheetHeader: {
({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
/**
* Scrollable content area between the header and footer.
* Grows to fill available space and scrolls vertically when content overflows.
*
* @example
* ```tsx
*
*
*
*
* ```
*/
declare const SheetContent: {
({ className, ...props }: React.HTMLAttributes): import("react/jsx-runtime").JSX.Element;
displayName: string;
};
/**
* Layout component for the sheet footer.
* Uses justify-between: place helper text on the left and action buttons on the right.
*
* @example
* ```tsx
*
*
Helper text
*
*
*
*
*
* ```
*/
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, SheetBody, SheetHeader, SheetContent, SheetFooter, SheetTitle, SheetDescription, };