@stanfordspezi/spezi-web-design-system/dist/src/components/Sheet/Sheet.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { Dialog as SheetPrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
import { Size } from '../../utils/tailwind';
/**
 * Main wrapper for Sheet functionality.
 *
 * Sheets are used to present content that requires user interaction
 * while temporarily blocking interaction with the main content.
 * Unlike Dialog, Sheet slides in from the edge of the screen.
 *
 * Sheets are composed using smaller components to ensure high customization
 * yet maintaining consistency.
 *
 * Built on top of [radix-ui Dialog](https://www.radix-ui.com/primitives/docs/components/dialog)
 *
 * @example
 * ```tsx
 * // Basic usage with SheetTrigger
 * <Sheet>
 *   <SheetTrigger>Open Settings</SheetTrigger>
 *   <SheetContent>
 *     <SheetHeader>
 *       <SheetTitle>Settings</SheetTitle>
 *       <SheetDescription>
 *         Configure your application preferences
 *       </SheetDescription>
 *     </SheetHeader>
 *     <div className="space-y-4">
 *       content
 *     </div>
 *     <SheetFooter>
 *       <Button variant="outline">Reset</Button>
 *       <Button>Save Changes</Button>
 *     </SheetFooter>
 *   </SheetContent>
 * </Sheet>
 * ```
 *
 * @example
 * ```tsx
 * // Controlled sheet
 * const [open, setOpen] = useState(false);
 *
 * <Sheet open={open} onOpenChange={setOpen}>
 *   <SheetTrigger>View Profile</SheetTrigger>
 *   <SheetContent>
 *     <SheetHeader>
 *       <SheetTitle>User Profile</SheetTitle>
 *     </SheetHeader>
 *     <div className="space-y-4">
 *       content
 *     </div>
 *   </SheetContent>
 * </Sheet>
 * ```
 */
export declare const Sheet: import('react').FC<SheetPrimitive.DialogProps>;
export declare const SheetTrigger: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
export declare const SheetPortal: import('react').FC<SheetPrimitive.DialogPortalProps>;
export declare const SheetClose: import('react').ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
/**
 * A styled close button with an X icon for Sheet components.
 * Positioned in the top-right corner of a Sheet by default.
 *
 * @example
 * ```tsx
 * <SheetContent>
 *   <SheetTitle>Settings</SheetTitle>
 *   <SheetCloseX />
 *   <p>Sheet content...</p>
 * </SheetContent>
 * ```
 */
export declare const SheetCloseX: ({ className, ...props }: ComponentProps<typeof SheetPrimitive.Close>) => import("react").JSX.Element;
/**
 * Displays overlay behind the main sheet content. Necessary to achieve sheet's modality.
 */
export declare const SheetOverlay: ({ className, ...props }: ComponentProps<typeof SheetPrimitive.Overlay>) => import("react").JSX.Element;
export declare const sheetSides: readonly ["top", "right", "bottom", "left"];
export type SheetSide = (typeof sheetSides)[number];
export interface SheetContentElementProps extends ComponentProps<typeof SheetPrimitive.Content> {
    /**
     * Determines which side of the screen the sheet slides in from.
     * @default "right"
     */
    side?: SheetSide;
    /**
     * Determines maximum width of the sheet. Applies only if `side` is `left` or `right`.
     * If `null`, size is dynamically determined based on the content.
     *
     * @default "sm"
     */
    size?: Size | null;
}
/**
 * Ready to use SheetContent. Provides default modality styling and animations.
 */
export declare const SheetContentElement: ({ side, className, size, children, ...props }: SheetContentElementProps) => import("react").JSX.Element;
export interface SheetContentProps extends SheetContentElementProps {
}
/**
 * The main content container for the Sheet. Provides complete Sheet experience with reasonable defaults.
 *
 * Handles portal, overlay, animations, close button.
 * If Sheet has more specified needs, it has to opt out from this component and use primitives directly.
 *
 * @example
 * ```tsx
 * // Basic usage
 * <SheetContent>
 *   <SheetTitle>Sheet Title</SheetTitle>
 *   <p>Sheet content</p>
 * </SheetContent>
 * ```
 *
 * @example
 * ```tsx
 * // With custom side
 * <SheetContent side="left">
 *   <SheetTitle>Left Sheet</SheetTitle>
 * </SheetContent>
 * ```
 */
export declare const SheetContent: ({ children, ...props }: SheetContentProps) => import("react").JSX.Element;
/**
 * Container for sheet header elements.
 *
 * Typically contains {@link SheetTitle} and optionally {@link SheetDescription} components.
 *
 * @example
 * ```tsx
 * <SheetHeader>
 *   <SheetTitle>Settings</SheetTitle>
 *   <SheetDescription>Configure your preferences</SheetDescription>
 * </SheetHeader>
 * ```
 */
export declare const SheetHeader: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
/**
 * Container for Sheet footer elements.
 *
 * Provides consistent spacing and layout for sheet actions like buttons.
 *
 * @example
 * ```tsx
 * <SheetFooter>
 *   <Button variant="outline">Cancel</Button>
 *   <Button>Save Changes</Button>
 * </SheetFooter>
 * ```
 */
export declare const SheetFooter: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
/**
 * Title component for Sheet.
 *
 * Automatically sets the correct ARIA attributes for accessibility.
 * Renders a semantically marked heading for the sheet content.
 * Required for accessibility but can be visually hidden if necessary.
 *
 * @example
 * ```tsx
 * <SheetTitle>Account Settings</SheetTitle>
 * ```
 *
 * @example
 * ```tsx
 * // hidden visually
 * <SheetTitle className="hidden">Account Settings</SheetTitle>
 * ```
 */
export declare const SheetTitle: ({ className, ...props }: ComponentProps<typeof SheetPrimitive.Title>) => import("react").JSX.Element;
/**
 * Description component for Sheet.
 *
 * Provides additional context or explanation below the SheetTitle.
 * Automatically sets the correct ARIA attributes for accessibility.
 * Rendered with muted styling to create visual hierarchy.
 *
 * @example
 * ```tsx
 * <SheetDescription>
 *   Make changes to your profile information. Your data will be updated across all services.
 * </SheetDescription>
 * ```
 */
export declare const SheetDescription: ({ className, ...props }: ComponentProps<typeof SheetPrimitive.Description>) => import("react").JSX.Element;