@loke/design-system
Version:
A design system with individually importable components
72 lines (71 loc) • 6.38 kB
TypeScript
import * as AlertDialogPrimitive from "@loke/ui/alert-dialog";
import { type ComponentPropsWithoutRef } from "react";
/**
* AlertDialog is a modal dialog that interrupts the user with important content and expects a response. This component is designed for critical interactions that require immediate user attention and action. It's more disruptive than a standard dialog and should be used sparingly for high-stakes decisions or important notifications that the user must acknowledge.
*
* Key features:
* - Interrupts the user flow, ensuring important information is not missed
* - Typically requires a user response before it can be dismissed
* - Can be used for confirmations of destructive actions, important notifications, or critical choices
* - Provides a structured way to present a title, description, and action buttons
*
* Use AlertDialog when you need to get the user's attention and confirmation for a critical action, such as deleting data, confirming a significant change, or acknowledging important information.
*/
declare function AlertDialog({ ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
/**
* AlertDialogTrigger is the button that opens the alert dialog when clicked. This component serves as the initiator for the alert dialog interaction. It should be placed in a location that makes sense within the user interface, typically near the action or information that the alert dialog is related to.
*
* Key points:
* - Acts as the initiator for the alert dialog
* - Should be clearly visible and understandable
* - Often styled to stand out or match the importance of the action it represents
* - Typically placed near the related action or information in the UI
*/
declare const AlertDialogTrigger: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
declare function AlertDialogPortal({ ...props }: ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
/**
* AlertDialogOverlay is a semi-transparent background that covers the entire screen when the dialog is open. This component creates a visual separation between the alert dialog and the rest of the application.
*
* Key features:
* - Covers the entire viewport
* - Creates visual separation for the dialog
* - Typically semi-transparent to dim the background
* - Sits behind the main dialog content but in front of other UI elements
* - May have a click handler to dismiss the dialog (behavior can vary)
*
* The overlay helps focus the user's attention on the dialog content by dimming or obscuring the background.
*/
declare const AlertDialogOverlay: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
declare const AlertDialogContent: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
size?: "default" | "sm";
} & import("react").RefAttributes<HTMLDivElement>>;
declare function AlertDialogHeader({ className, ...props }: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
declare function AlertDialogFooter({ className, ...props }: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
declare function AlertDialogMedia({ className, ...props }: ComponentPropsWithoutRef<"div">): import("react/jsx-runtime").JSX.Element;
/**
* AlertDialogTitle is the main heading of the alert dialog. This component displays the primary message or question of the alert dialog. It should clearly state the purpose or main point of the dialog in a concise manner.
*
* Key points:
* - Displays the primary message or question
* - Should be clear and concise
* - Crucial for quickly informing the user about the nature of the alert or decision
* - Typically styled to be prominent and easily readable
* - Often uses larger font size or bold weight to distinguish from other content
*/
declare const AlertDialogTitle: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
/**
* AlertDialogDescription provides additional context or details about the alert dialog's purpose. This component is used to give more information about the alert or decision presented to the user.
*
* Key aspects:
* - Expands on the title with necessary details
* - Offers explanations of consequences or instructions
* - Should be clear and concise, but comprehensive
* - Typically styled for easy readability
* - Often uses appropriate spacing and possibly a slightly smaller font size than the title
*
* The description should provide all the information a user needs to understand the situation and make an informed decision.
*/
declare const AlertDialogDescription: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
declare const AlertDialogAction: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & Pick<Omit<import("@loke/design-system/button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "size" | "variant"> & import("react").RefAttributes<HTMLButtonElement>>;
declare const AlertDialogCancel: import("react").ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & Pick<Omit<import("@loke/design-system/button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "size" | "variant"> & import("react").RefAttributes<HTMLButtonElement>>;
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, };