/** * @fileoverview Sheet primitive — slide-in panel overlay from any edge of the viewport. * Built on Radix UI Dialog. Part of the Saasflare base component layer. * @module packages/ui/components/ui/sheet * @layer core * * @component * @example * import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '@saasflare/ui'; * * Open * * * Sheet Title * Sheet description text. * * * */ import * as React from "react"; import * as SheetPrimitive from "@radix-ui/react-dialog"; import { type SaasflareComponentProps } from "../../providers"; /** * Slide-in panel overlay that enters from an edge of the viewport. Built on * Radix Dialog — owns open state, focus trapping, and dismissal. Compose with * {@link SheetTrigger} and {@link SheetContent}; use it for side navigation, * filters, or detail panels that should not leave the current page. * * @component * @layer core */ declare function Sheet({ ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** * Button that opens the sheet. * * @component * @layer core */ declare function SheetTrigger({ ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** * Button that closes the sheet from anywhere inside it. * * @component * @layer core */ declare function SheetClose({ ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** * Props for {@link SheetContent}. * * `side` picks the viewport edge the panel slides in from (default `"right"`); * `showCloseButton` toggles the built-in top-right close button. */ interface SheetContentProps extends Omit, keyof SaasflareComponentProps>, SaasflareComponentProps { side?: "top" | "right" | "bottom" | "left"; showCloseButton?: boolean; } /** * The sliding panel itself — portaled behind a dimmed overlay, slides in from * the chosen `side`, and renders an optional built-in close button. * * @component * @layer core */ declare function SheetContent({ className, children, side, showCloseButton, surface, radius, animated, iconWeight, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element; /** * Sheet header — stacks {@link SheetTitle} and {@link SheetDescription} at the * top of the panel. * * @component * @layer core */ declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element; /** * Sheet footer — actions area pinned to the bottom of the panel. * * @component * @layer core */ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element; /** * Accessible sheet title — announced to screen readers when the sheet opens. * * @component * @layer core */ declare function SheetTitle({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; /** * Accessible sheet description text below the title. * * @component * @layer core */ declare function SheetDescription({ className, ...props }: React.ComponentProps): import("react/jsx-runtime").JSX.Element; export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, type SheetContentProps, };