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

Stanford Biodesign Digital Health Spezi Web Design System

import { Dialog as DialogPrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
import { Size } from '../../utils/tailwind';
/**
 * Main wrapper for Dialog functionality.
 *
 * Dialogs are used to present content that requires user interaction
 * while temporarily blocking interaction with the main content.
 *
 * Dialogs 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 DialogTrigger
 * <Dialog>
 *   <DialogTrigger>Open Settings</DialogTrigger>
 *   <DialogContent>
 *     <DialogHeader>
 *       <DialogTitle>Settings</DialogTitle>
 *       <DialogDescription>
 *         Configure your application preferences
 *       </DialogDescription>
 *     </DialogHeader>
 *     <div className="space-y-4">
 *       content
 *     </div>
 *     <DialogFooter>
 *       <Button variant="outline">Reset</Button>
 *       <Button>Save Changes</Button>
 *     </DialogFooter>
 *   </DialogContent>
 * </Dialog>
 * ```
 *
 * @example
 * ```tsx
 * // Controlled dialog
 * const [open, setOpen] = useState(false);
 *
 * <Dialog open={open} onOpenChange={setOpen}>
 *   <DialogTrigger>View Profile</DialogTrigger>
 *   <DialogContent>
 *     <DialogHeader>
 *       <DialogTitle>User Profile</DialogTitle>
 *     </DialogHeader>
 *     <div className="space-y-4">
 *       content
 *     </div>
 *   </DialogContent>
 * </Dialog>
 * ```
 */
export declare const Dialog: import('react').FC<DialogPrimitive.DialogProps>;
export declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
export declare const DialogPortal: import('react').FC<DialogPrimitive.DialogPortalProps>;
export declare const DialogClose: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
/**
 * A styled close button with an X icon for Dialog components.
 * Positioned in the top-right corner of a Dialog by default.
 *
 * @example
 * ```tsx
 * <DialogContent>
 *   <DialogTitle>Settings</DialogTitle>
 *   <DialogCloseX />
 *   <p>Dialog content...</p>
 * </DialogContent>
 * ```
 */
export declare const DialogCloseX: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Close>) => import("react").JSX.Element;
/**
 * Displays overlay behind the main dialog content. Necessary to achieve dialog's modality.
 */
export declare const DialogOverlay: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>) => import("react").JSX.Element;
interface DialogContentElementProps extends ComponentProps<typeof DialogPrimitive.Content> {
    /**
     * Determines maximum width of the modal.
     * @default "lg"
     */
    size?: Size | null;
}
/**
 * Ready to use DialogContent. Provides default modality styling and size constraints. .
 */
export declare const DialogContentElement: ({ size, className, children, ...props }: DialogContentElementProps) => import("react").JSX.Element;
interface DialogContentProps extends DialogContentElementProps {
}
/**
 * The main content container for the Dialog. Provides complete Dialog experience with reasonable defaults.
 *
 * Handles portal, overlay, size constraints, close button, centered positioning, animations.
 * If Dialog has more specified needs, it has to opt out from this component and use primitives directly.
 *
 *
 * @example
 * ```tsx
 * // Basic usage
 * <DialogContent>
 *   <DialogTitle>Dialog Title</DialogTitle>
 *   <p>Dialog content</p>
 * </DialogContent>
 * ```
 *
 * @example
 * ```tsx
 * // With custom size
 * <DialogContent size="sm">
 *   <DialogTitle>Small Dialog</DialogTitle>
 * </DialogContent>
 * ```
 */
export declare const DialogContent: ({ className, children, size, ...props }: DialogContentProps) => import("react").JSX.Element;
/**
 * Container for dialog header elements.
 *
 * Typically contains {@link DialogTitle} and optionally {@link DialogDescription} components.
 *
 * @example
 * ```tsx
 * <DialogHeader>
 *   <DialogTitle>Settings</DialogTitle>
 *   <DialogDescription>Configure your preferences</DialogDescription>
 * </DialogHeader>
 * ```
 */
export declare const DialogHeader: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
/**
 * Container for Dialog footer elements.
 *
 * Provides consistent spacing and layout for dialog actions like buttons.
 * On mobile, buttons are stacked with primary action on top.
 * On desktop, buttons are placed side-by-side with right alignment.
 *
 * @example
 * ```tsx
 * <DialogFooter>
 *   <Button variant="outline">Cancel</Button>
 *   <Button>Save Changes</Button>
 * </DialogFooter>
 * ```
 */
export declare const DialogFooter: ({ className, ...props }: ComponentProps<"div">) => import("react").JSX.Element;
/**
 * Title component for Dialog.
 *

 * Automatically sets the correct ARIA attributes for accessibility.
 * Renders a semantically marked heading for the dialog content.
 * Required for accessibility but can be visually hidden if necessary.
 *
 * @example
 * ```tsx
 * <DialogTitle>Account Settings</DialogTitle>
 * ```
 *
 * @example
 * ```tsx
 * // hidden visually
 * <DialogTitle className="hidden">Account Settings</DialogTitle>
 * ```
 */
export declare const DialogTitle: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>) => import("react").JSX.Element;
/**
 * Description component for Dialog.
 *
 * Provides additional context or explanation below the DialogTitle.
 * Automatically sets the correct ARIA attributes for accessibility.
 * Rendered with muted styling to create visual hierarchy.
 *
 * @example
 * ```tsx
 * <DialogDescription>
 *   Make changes to your profile information. Your data will be updated across all services.
 * </DialogDescription>
 * ```
 */
export declare const DialogDescription: ({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>) => import("react").JSX.Element;
export {};