@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
73 lines (72 loc) • 2.27 kB
TypeScript
import type { ModalProps as FlowbiteModalProps } from 'flowbite-react';
import * as React from 'react';
import { type ButtonVariant } from './Button';
export interface ModalProps extends Omit<FlowbiteModalProps, 'theme' | 'title'> {
/** Title of the modal */
title?: React.ReactNode;
/** Modal content */
children: React.ReactNode;
/** Whether the modal is open */
isOpen: boolean;
/** Callback when modal is closed */
onClose: () => void;
/** Specify the size of the modal */
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
/** Button for the primary action */
primaryButton?: {
/** Text to display on the button */
label: string;
/** Click handler for the button */
onClick: () => void;
/** Button is in loading state */
loading?: boolean;
/** Button is disabled */
disabled?: boolean;
/** Custom variant for the button */
variant?: ButtonVariant;
};
/** Button for the secondary/cancel action */
secondaryButton?: {
/** Text to display on the button */
label: string;
/** Click handler for the button */
onClick: () => void;
/** Button is in loading state */
loading?: boolean;
/** Button is disabled */
disabled?: boolean;
/** Custom variant for the button */
variant?: ButtonVariant;
};
/** Custom header content */
headerContent?: React.ReactNode;
/** Custom footer content (will override primary/secondary buttons) */
footerContent?: React.ReactNode;
/** Additional class name for the modal */
className?: string;
}
/**
* Reusable Modal component that wraps Flowbite's Modal with Pagamio styling and structure
*
* @example
* ```tsx
* <Modal
* isOpen={isOpen}
* onClose={handleClose}
* title="Confirmation"
* primaryButton={{
* label: "Confirm",
* onClick: handleConfirm,
* }}
* secondaryButton={{
* label: "Cancel",
* onClick: handleClose,
* variant: "outline-primary"
* }}
* >
* <p>Are you sure you want to perform this action?</p>
* </Modal>
* ```
*/
declare const Modal: React.FC<ModalProps>;
export default Modal;