@papernote/ui
Version:
A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive
93 lines • 2.69 kB
TypeScript
import React from 'react';
export interface ModalProps {
isOpen: boolean;
onClose: () => void;
title: string;
children: React.ReactNode;
size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
showCloseButton?: boolean;
/** Animation variant for modal entrance (default: 'scale') */
animation?: 'scale' | 'slide-up' | 'slide-down' | 'fade' | 'none';
/** Enable automatic scrolling for content that exceeds viewport height */
scrollable?: boolean;
/** Maximum height of the modal content area (e.g., '70vh', '500px') */
maxHeight?: string;
/** Mobile display mode: 'auto' uses BottomSheet on mobile, 'modal' always uses modal, 'sheet' always uses BottomSheet */
mobileMode?: 'auto' | 'modal' | 'sheet';
/** Height preset for BottomSheet on mobile (default: 'lg') */
mobileHeight?: 'sm' | 'md' | 'lg' | 'full';
/** Show drag handle on BottomSheet (default: true) */
mobileShowHandle?: boolean;
}
/**
* Modal - Adaptive dialog component
*
* On desktop, renders as a centered modal dialog.
* On mobile (when mobileMode='auto'), automatically renders as a BottomSheet
* for better touch interaction and visibility.
*
* @example Basic modal
* ```tsx
* <Modal isOpen={isOpen} onClose={handleClose} title="Edit User">
* <form>...</form>
* <ModalFooter>
* <Button onClick={handleClose}>Cancel</Button>
* <Button variant="primary" onClick={handleSave}>Save</Button>
* </ModalFooter>
* </Modal>
* ```
*
* @example Scrollable modal for long content
* ```tsx
* <Modal
* isOpen={isOpen}
* onClose={handleClose}
* title="Terms and Conditions"
* scrollable
* >
* {longContent}
* </Modal>
* ```
*
* @example Modal with custom max height
* ```tsx
* <Modal
* isOpen={isOpen}
* onClose={handleClose}
* title="Document Preview"
* maxHeight="70vh"
* >
* {documentContent}
* </Modal>
* ```
*
* @example Force modal on mobile
* ```tsx
* <Modal
* isOpen={isOpen}
* onClose={handleClose}
* title="Settings"
* mobileMode="modal"
* >
* ...
* </Modal>
* ```
*
* @example Always use BottomSheet
* ```tsx
* <Modal
* isOpen={isOpen}
* onClose={handleClose}
* title="Select Option"
* mobileMode="sheet"
* mobileHeight="md"
* >
* ...
* </Modal>
* ```
*/
export default function Modal({ isOpen, onClose, title, children, size, showCloseButton, animation, scrollable, maxHeight, mobileMode, mobileHeight, mobileShowHandle, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
export declare function ModalFooter({ children }: {
children: React.ReactNode;
}): import("react/jsx-runtime").JSX.Element;
//# sourceMappingURL=Modal.d.ts.map