@loke/design-system/dist/components/dialog/dialog.d.mts

A design system with individually importable components

import * as DialogPrimitive from "@loke/ui/dialog";
import { type ComponentPropsWithoutRef } from "react";
/**
 * Dialog component for displaying modal content
 *
 * The Dialog component provides a way to show content in a modal overlay, interrupting the user's current task to focus on important information or actions.
 *
 * Key features:
 * - Controlled visibility of modal content
 * - Customizable trigger element
 * - Overlay background for focus
 * - Accessible keyboard navigation and focus management
 * - Customizable content, title, and description components
 *
 * Usage considerations:
 * - Use for important interactions that require user attention
 * - Ensure the dialog content is concise and focused
 * - Provide clear actions for the user to proceed or dismiss the dialog
 * - Consider the impact on mobile devices and ensure responsive design
 */
declare function Dialog({ ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
/**
 * DialogTrigger component for opening the dialog
 *
 * This component renders a button that opens the associated Dialog when clicked. It automatically handles the open state of the dialog.
 */
declare const DialogTrigger: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
declare function DialogPortal({ ...props }: ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
/**
 * DialogOverlay component for the background overlay of the dialog
 *
 * This component renders a semi-transparent overlay that covers the entire screen when the dialog is open, helping to focus attention on the dialog content.
 */
declare const DialogOverlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
    showCloseButton?: boolean;
} & import("react").RefAttributes<HTMLDivElement>>;
/**
 * DialogClose component for closing the dialog
 *
 * This component renders a button that closes the dialog when clicked. It's typically used for secondary dismissal actions, as the main close button is already included in the DialogContent.
 */
declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
declare function DialogHeader({ className, ...props }: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
declare function DialogFooter({ className, showCloseButton, children, ...props }: ComponentPropsWithoutRef<"div"> & {
    showCloseButton?: boolean;
}): import("react/jsx-runtime").JSX.Element;
/**
 * DialogTitle component for the title of the dialog
 *
 * This component renders the main heading of the dialog. It should clearly communicate the purpose or subject of the dialog to the user.
 */
declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
/**
 * DialogDescription component for the description of the dialog
 *
 * This component renders additional explanatory text for the dialog. It's used to provide more context or instructions to the user about the dialog's purpose or required actions.
 */
declare const DialogDescription: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };