import { TNode, Value, Renderable } from '@tempots/dom'; import { ThemeColorName } from '../../tokens'; /** * Configuration options for the {@link ConfirmationDialog} component. */ export interface ConfirmationDialogOptions { /** * Dialog title displayed next to the icon. * @default 'Confirm action' */ title: Value; /** * Descriptive body text explaining what the action does. * @default 'Are you sure you want to proceed? This action cannot be undone.' */ body: Value; /** * Iconify icon identifier displayed in a colored circle. * @default 'lucide:alert-triangle' */ icon?: Value; /** * Semantic color applied to the icon background and confirm button. * @default 'danger' */ color?: Value; /** * Optional list of consequences displayed as bullet points. */ consequences?: Value; /** * Custom label for the confirm button. Falls back to i18n `confirm` string. * @default 'Confirm' */ confirmText?: Value; /** * Custom label for the cancel button. Falls back to i18n `cancel` string. * @default 'Cancel' */ cancelText?: Value; /** * Callback invoked when the user clicks the confirm button. */ onConfirm?: () => void; /** * Callback invoked when the user clicks the cancel button or dismisses the dialog. */ onCancel?: () => void; /** * Whether the dialog can be closed by clicking outside or pressing Escape. * @default true */ dismissable?: Value; } /** * A confirmation dialog for destructive or warning actions. * * Displays a title with an icon, a descriptive body, optional consequence list, * and confirm/cancel action buttons. Built on top of {@link Modal}. * * @param options - Configuration options for the dialog content and callbacks * @param fn - A render function that receives `open` and `close` callbacks and returns the trigger content. * @returns A renderable node * * @example * ```typescript * ConfirmationDialog( * { * title: 'Delete collection', * body: 'This will permanently remove all 24 records.', * icon: 'lucide:trash-2', * color: 'danger', * consequences: [ * 'All records will be moved to trash', * 'Shared access will be revoked', * ], * confirmText: 'Delete collection', * cancelText: 'Keep collection', * onConfirm: () => deleteCollection(), * }, * (open, close) => Button({ onClick: open }, 'Delete') * ) * ``` */ export declare function ConfirmationDialog(options: ConfirmationDialogOptions, fn: (open: () => void, close: () => void) => TNode): Renderable; /** * Visual variant for the {@link AlertDialog}, controlling the default icon and color. */ export type AlertDialogVariant = 'info' | 'success' | 'warning' | 'danger'; /** * Configuration options for the {@link AlertDialog} component. */ export interface AlertDialogOptions { /** * Dialog title displayed next to the icon. */ title: Value; /** * Body content of the alert. */ body: TNode; /** * Visual variant controlling the default icon and color. * @default 'info' */ variant?: AlertDialogVariant; /** * Override icon. If not provided, a default icon is used based on the variant. */ icon?: Value; /** * Custom label for the OK button. * @default 'OK' */ okText?: Value; /** * Callback invoked when the user acknowledges the alert. */ onOk?: () => void; /** * Whether the dialog can be closed by clicking outside or pressing Escape. * @default true */ dismissable?: Value; } /** * An alert dialog for displaying important messages to the user. * * Supports info, success, warning, and danger variants with appropriate icons and colors. * Has a single acknowledge button. Built on top of {@link Modal}. * * @param options - Configuration options for the alert content * @param fn - A render function that receives `open` and `close` callbacks and returns the trigger content. * @returns A renderable node * * @example * ```typescript * AlertDialog( * { * title: 'Changes saved', * body: html.p('Your settings have been updated successfully.'), * variant: 'success', * }, * (open, close) => Button({ onClick: open }, 'Save') * ) * ``` */ export declare function AlertDialog(options: AlertDialogOptions, fn: (open: () => void, close: () => void) => TNode): Renderable; /** * Configuration options for the {@link PromptDialog} component. */ export interface PromptDialogOptions { /** * Dialog title displayed in the header. * @default 'Enter a value' */ title: Value; /** * Optional descriptive text above the input field. */ body?: TNode; /** * Placeholder text for the input field. * @default 'Type here...' */ placeholder?: Value; /** * Default value pre-filled in the input field. * @default '' */ defaultValue?: Value; /** * Custom label for the confirm button. Falls back to i18n `confirm` string. * @default 'Save' */ confirmText?: Value; /** * Custom label for the cancel button. Falls back to i18n `cancel` string. * @default 'Cancel' */ cancelText?: Value; /** * Callback invoked with the input value when the user confirms. */ onConfirm?: (value: string) => void; /** * Callback invoked when the user cancels or dismisses the dialog. */ onCancel?: () => void; /** * Whether the dialog can be closed by clicking outside or pressing Escape. * @default true */ dismissable?: Value; } /** * A prompt dialog for collecting text input from the user. * * Displays a title, optional description, a text input field, and confirm/cancel buttons. * Built on top of {@link Modal}. * * @param options - Configuration options for the prompt * @param fn - A render function that receives `open` and `close` callbacks and returns the trigger content. * @returns A renderable node * * @example * ```typescript * PromptDialog( * { * title: 'Rename file', * body: html.p('Enter a new name for this file.'), * placeholder: 'File name', * defaultValue: 'untitled.txt', * confirmText: 'Rename', * onConfirm: (name) => renameFile(name), * }, * (open, close) => Button({ onClick: open }, 'Rename') * ) * ``` */ export declare function PromptDialog(options: PromptDialogOptions, fn: (open: () => void, close: () => void) => TNode): Renderable;