@papernote/ui
Version:
A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive
93 lines • 2.64 kB
TypeScript
/**
* ConfirmDialog - Confirmation dialog for destructive actions
*
* Replaces window.confirm() with a styled, accessible modal dialog.
* Supports different variants (danger, warning, info) and customizable buttons.
*
* On mobile, automatically renders as a BottomSheet for better touch interaction.
*/
import React from 'react';
import { ModalProps } from './Modal';
export interface ConfirmDialogProps {
isOpen: boolean;
onClose: () => void;
onConfirm: () => void | Promise<void>;
title: string;
message: string;
confirmLabel?: string;
cancelLabel?: string;
variant?: 'danger' | 'warning' | 'info';
icon?: React.ReactNode;
isLoading?: boolean;
/** Mobile display mode (inherited from Modal) */
mobileMode?: ModalProps['mobileMode'];
/** Height preset for BottomSheet on mobile */
mobileHeight?: ModalProps['mobileHeight'];
}
/**
* ConfirmDialog - Confirmation dialog with mobile support
*
* @example Basic usage
* ```tsx
* <ConfirmDialog
* isOpen={isOpen}
* onClose={handleClose}
* onConfirm={handleDelete}
* title="Delete Item"
* message="Are you sure you want to delete this item? This action cannot be undone."
* variant="danger"
* />
* ```
*
* @example With useConfirmDialog hook
* ```tsx
* const confirmDialog = useConfirmDialog();
*
* const handleDelete = () => {
* confirmDialog.show({
* title: 'Delete Item',
* message: 'Are you sure?',
* onConfirm: async () => await deleteItem(),
* });
* };
*
* return (
* <>
* <button onClick={handleDelete}>Delete</button>
* <ConfirmDialog {...confirmDialog.props} />
* </>
* );
* ```
*/
export default function ConfirmDialog({ isOpen, onClose, onConfirm, title, message, confirmLabel, cancelLabel, variant, icon, isLoading, mobileMode, mobileHeight, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
/**
* Hook for managing ConfirmDialog state
*
* Usage:
* ```tsx
* const confirmDialog = useConfirmDialog();
*
* const handleDelete = () => {
* confirmDialog.show({
* title: 'Delete Item',
* message: 'Are you sure you want to delete this item?',
* onConfirm: async () => {
* await deleteItem();
* }
* });
* };
*
* return (
* <>
* <button onClick={handleDelete}>Delete</button>
* <ConfirmDialog {...confirmDialog.props} />
* </>
* );
* ```
*/
export declare function useConfirmDialog(): {
show: (newConfig: Omit<ConfirmDialogProps, "isOpen" | "onClose" | "isLoading">) => void;
close: () => void;
props: ConfirmDialogProps;
};
//# sourceMappingURL=ConfirmDialog.d.ts.map