@payfit/unity-components
Version:
114 lines (113 loc) • 4.06 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { PropsWithChildren } from 'react';
import { DialogTrigger } from 'react-aria-components/Dialog';
export declare const dialog: import('tailwind-variants').TVReturnType<{
size: {
sm: {
wrapper: string;
};
md: {
wrapper: string;
};
};
}, {
overlay: string[];
wrapper: string[];
content: string[];
dismissIcon: string[];
}, undefined, {
size: {
sm: {
wrapper: string;
};
md: {
wrapper: string;
};
};
}, {
overlay: string[];
wrapper: string[];
content: string[];
dismissIcon: string[];
}, import('tailwind-variants').TVReturnType<{
size: {
sm: {
wrapper: string;
};
md: {
wrapper: string;
};
};
}, {
overlay: string[];
wrapper: string[];
content: string[];
dismissIcon: string[];
}, undefined, unknown, unknown, undefined>>;
export interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
/** aria-label has to be defined if the dialog does not have a visible label*/
'aria-label'?: string;
/** (optional) modal opened by default or not **If it is set to true, the closing should be handled from outside** /*/
isOpen?: boolean;
/** it is used for controlled mode (need to be used with isOpen property) */
onOpenChange?: (isOpen: boolean) => void;
/** if false it does not allow to close the modal when click outside, default: true*/
isDismissable?: boolean;
}
/**
* The Dialog component provides a modal interface for displaying important information and gathering user input
* without requiring navigation to a different page. It maintains context and focus while demanding attention.
*
* Use Dialog when you need to capture user attention, gather critical input, or display important information
* that requires acknowledgment before proceeding.
*
* The Dialog consists of several parts that work together:
* - `DialogTitle`: Displays the title of the dialog
* - `DialogContent`: Contains the main content of the dialog (required)
* - `DialogActions`: Contains action buttons for user interaction
* - `DialogButton`: Handles specific actions (close, confirm, or danger)
* @param props - The props for the Dialog component
* @param props.children - The dialog content including title, content, and actions
* @param props.isOpen - Controls the open state in controlled mode
* @param props.onOpenChange - Callback fired when open state changes
* @param props.isDismissable - Whether the dialog can be dismissed by clicking outside or pressing Escape
* @param props.size - The size variant of the dialog (sm, md)
* @param props.aria-label - Accessible label when DialogTitle is not provided
* @see {@link DialogProps} for all available props
* @example
* ```tsx
* import {
* Dialog,
* DialogTrigger,
* DialogTitle,
* DialogContent,
* DialogActions,
* DialogButton
* } from '@payfit/unity-components'
*
* function BasicExample() {
* return (
* <DialogTrigger>
* <Button>Open dialog</Button>
* <Dialog>
* <DialogTitle>Important information</DialogTitle>
* <DialogContent>
* This content requires your attention before proceeding.
* </DialogContent>
* <DialogActions>
* <DialogButton variant="close">Cancel</DialogButton>
* <DialogButton variant="confirm">Confirm</DialogButton>
* </DialogActions>
* </Dialog>
* </DialogTrigger>
* )
* }
* ```
* @remarks
* [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-dialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
*/
export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, size, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
export declare namespace Dialog {
var displayName: string;
}
export { DialogTrigger };