@internxt/ui 0.0.25

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { MenuItemType } from '../';
+
+export type DropdownProps<T> = {
+    children: ReactNode | ((obj: {
+        open: boolean;
+    }) => JSX.Element);
+    options?: {
+        text: string;
+        onClick: () => void;
+    }[];
+    classButton?: string;
+    menuItems?: ReactNode[];
+    classMenuItems: string;
+    openDirection: 'left' | 'right';
+    dropdownActionsContext?: Array<MenuItemType<T>>;
+    item?: T;
+};
+declare const Dropdown: <T>({ children, options, classButton, menuItems, classMenuItems, openDirection, dropdownActionsContext, item, }: DropdownProps<T>) => JSX.Element;
+export default Dropdown;

package/dist/components/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Dropdown } from './Dropdown';
+export type { DropdownProps } from './Dropdown';

package/dist/components/empty/Empty.d.ts

@@ -0,0 +1,40 @@
+import { Upload } from '@phosphor-icons/react';
+
+export interface EmptyProps {
+    icon: JSX.Element;
+    title: string;
+    subtitle: string;
+    action?: {
+        text: string;
+        icon: typeof Upload;
+        style: 'plain' | 'elevated';
+        onClick: () => void;
+    };
+    contextMenuClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * Empty component
+ *
+ * This component is used to display a message or placeholder content when there is no data or items available.
+ * It allows for a customizable icon, title, subtitle, and an optional action button.
+ *
+ * @property {JSX.Element} icon
+ * - The icon to be displayed at the top of the component. This can be any valid React element.
+ *
+ * @property {string} title
+ * - The main title or heading to be displayed in the component.
+ *
+ * @property {string} subtitle
+ * - A secondary subtitle or description.
+ *
+ * @property {object} [action]
+ * - An optional object containing details for an action button that can be displayed.
+ *
+ * @property {string} action.text
+ * - The text to display on the action button.
+ *
+ * @property {Function} [contextMenuClick]
+ * - An optional function to handle right-click (context menu) interactions on the component.
+ */
+declare const Empty: ({ icon, title, subtitle, action, contextMenuClick }: EmptyProps) => JSX.Element;
+export default Empty;

package/dist/components/empty/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Empty } from './Empty';
+export type { EmptyProps } from './Empty';

package/dist/components/header/Header.d.ts

@@ -0,0 +1,24 @@
+export interface HeaderProps {
+    /**
+     * Elements to be rendered on the left side of the header
+     */
+    leftContent?: JSX.Element;
+    /**
+     * Elements to be rendered on the right side of the header
+     */
+    rightContent?: JSX.Element;
+    /**
+     * Optional class name for additional styling
+     */
+    className?: string;
+}
+/**
+ * Header component
+ *
+ * A flexible header component that can contain any content on its left and right sides.
+ *
+ * @param {HeaderProps} props - The properties for the Header component
+ * @returns {JSX.Element} The rendered Header component
+ */
+declare const Header: ({ leftContent, rightContent, className }: HeaderProps) => JSX.Element;
+export default Header;

package/dist/components/header/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Header } from './Header';
+export type { HeaderProps } from './Header';

package/dist/components/index.d.ts

@@ -0,0 +1,28 @@
+export * from './avatar';
+export * from './baseDialog';
+export * from './breadcrumbs';
+export * from './button';
+export * from './buttonCircle';
+export * from './card';
+export * from './checkbox';
+export * from './contextMenu';
+export * from './copyable';
+export * from './dialog';
+export * from './dropdown';
+export * from './empty';
+export * from './header';
+export * from './infiniteScroll';
+export * from './input';
+export * from './list';
+export * from './loader';
+export * from './menu';
+export * from './modal';
+export * from './modalTransparent';
+export * from './popover';
+export * from './radioButton';
+export * from './skeletonLoader';
+export * from './slider';
+export * from './switch';
+export * from './table/Table';
+export * from './textArea';
+export * from './tooltip';

package/dist/components/infiniteScroll/InfiniteScroll.d.ts

@@ -0,0 +1,45 @@
+import { default as React, ReactNode } from 'react';
+
+export interface InfiniteScrollProps {
+    children: ReactNode;
+    handleNextPage: () => void;
+    hasMoreItems: boolean | undefined;
+    loader: React.ReactNode;
+    scrollableTarget?: string;
+    classNameLoader?: string;
+}
+/**
+ * InfiniteScroll component
+ *
+ * @param {InfiniteScrollProps} props - The properties of the component.
+ *
+ * @property {ReactNode} children
+ * - The child components or elements to be rendered inside the scrollable container.
+ *
+ * @property {() => void} handleNextPage
+ * - A callback function that is triggered when the user reaches the bottom of the container
+ * and more items need to be loaded.
+ *
+ * @property {boolean | undefined} hasMoreItems
+ * - A flag indicating whether there are more items to load. If `false`, the loader will not be shown,
+ * and no more items will be fetched.
+ *
+ * @property {React.ReactNode} loader
+ * - The content to be shown as a loader while waiting for more items to load.
+ *
+ * @property {string} [scrollableTarget]
+ * - An optional ID of the scrollable container that will be observed for scroll events.
+ * If not provided, the default behavior is to observe the entire window.
+ *
+ * @property {string} [classNameLoader]
+ * - An optional custom class name for the loader element, used to style the loader component.
+ *
+ * @returns {JSX.Element}
+ * - A JSX element containing the children with the loader attached to the last item, if there are more items to load.
+ *
+ * The component uses the `IntersectionObserver` API to detect when the loader element (at the bottom of the list)
+ * comes into view. When this happens, it triggers the `handleNextPage` callback to load the next set of items.
+ * It also shows the loader element only when there are more items to load (`hasMoreItems` is `true`).
+ */
+declare const InfiniteScroll: ({ children, handleNextPage, hasMoreItems, loader, scrollableTarget, classNameLoader, }: InfiniteScrollProps) => import("react/jsx-runtime").JSX.Element;
+export default InfiniteScroll;

package/dist/components/infiniteScroll/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InfiniteScroll } from './InfiniteScroll';
+export type { InfiniteScrollProps } from './InfiniteScroll';

package/dist/components/input/Input.d.ts

@@ -0,0 +1,115 @@
+import { KeyboardEvent } from 'react';
+
+export interface InputProps {
+    className?: string;
+    label?: string;
+    variant?: 'default' | 'search' | 'password' | 'email';
+    accent?: 'error' | 'warning' | 'success';
+    disabled?: boolean;
+    placeholder?: string;
+    value?: string;
+    maxLength?: number;
+    onChange?: (v: string) => void;
+    onClear?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    message?: string;
+    autofocus?: boolean;
+    autoComplete?: 'on' | 'off';
+    dataTest?: string;
+    name?: string;
+    required?: boolean;
+    labelDataCy?: string;
+    inputDataCy?: string;
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    inputClassName?: string;
+    borderRadius?: string;
+    fontClasses?: string;
+}
+/**
+ * Input component
+ *
+ * @property {string} [className]
+ * - Optional custom class name to be applied to the outermost container of the input.
+ *
+ * @property {string} [label]
+ * - The label for the input field.
+ *
+ * @property {'default' | 'search' | 'password' | 'email'} [variant]
+ * - The variant of the input field. Determines the input type and visual style.
+ *   - 'default': Regular input field.
+ *   - 'search': Search field with a magnifying glass icon.
+ *   - 'password': Password input with an option to toggle visibility.
+ *   - 'email': Email input with specific email validation.
+ *
+ * @property {'error' | 'warning' | 'success'} [accent]
+ * - Optional accent color for the input border and message.
+ *   - 'error': Red border and error message.
+ *   - 'warning': Orange border and warning message.
+ *   - 'success': Green border and success message.
+ *
+ * @property {boolean} [disabled]
+ * - If true, disables the input field, preventing user interaction.
+ *
+ * @property {string} [placeholder]
+ * - The placeholder text displayed inside the input when it is empty.
+ *
+ * @property {string} [value]
+ * - The current value of the input field.
+ *
+ * @property {number} [maxLength]
+ * - Maximum number of characters allowed in the input field.
+ *
+ * @property {(v: string) => void} [onChange]
+ * - Callback function that is called whenever the input value changes.
+ *
+ * @property {() => void} [onClear]
+ * - Callback function that is called when the clear button is clicked in the search variant.
+ *
+ * @property {() => void} [onFocus]
+ * - Callback function that is called when the input gains focus.
+ *
+ * @property {() => void} [onBlur]
+ * - Callback function that is called when the input loses focus.
+ *
+ * @property {string} [message]
+ * - Optional message displayed below the input. Used for feedback like error or success.
+ *
+ * @property {boolean} [autofocus]
+ * - If true, the input will automatically gain focus when the component is rendered.
+ *
+ * @property {'on' | 'off'} [autoComplete]
+ * - Controls the auto-completion behavior of the input. Defaults to 'on'.
+ *
+ * @property {string} [dataTest]
+ * - Optional data attribute for testing purposes, used for targeting the input element in tests.
+ *
+ * @property {string} [name]
+ * - The name attribute of the input field, used in form submissions.
+ *
+ * @property {boolean} [required]
+ * - If true, the input is marked as required for form validation.
+ *
+ * @property {string} [labelDataCy]
+ * - Optional data attribute for targeting the label element in tests.
+ *
+ * @property {string} [inputDataCy]
+ * - Optional data attribute for targeting the input element itself in tests.
+ *
+ * @property {string} [inputClassName]
+ * - Optional custom class name to be applied directly to the input element.
+ * - These classes will be added after the default classes and can override them.
+ *
+ * @property {string} [borderRadius='rounded-md']
+ * - Optional Tailwind class to control the border radius of the input.
+ * - Defaults to 'rounded-md' if not specified.
+ *
+ * @property {string} [fontClasses='text-lg font-normal']
+ * - Optional Tailwind class to control the font size and font weight of the input.
+ * - Defaults to 'text-lg font-normal' if not specified.
+ *
+ * @property {(e: KeyboardEvent<HTMLInputElement>) => void} [onKeyDown]
+ * - Callback function for handling keydown events in the input field.
+ */
+declare const Input: ({ className, label, variant, accent, disabled, placeholder, value, maxLength, onChange, onClear, message, onFocus, onBlur, autofocus, autoComplete, dataTest, name, required, labelDataCy, inputDataCy, onKeyDown, inputClassName, borderRadius, fontClasses, }: InputProps) => JSX.Element;
+export default Input;

package/dist/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Input } from './Input';
+export type { InputProps } from './Input';

package/dist/components/list/List.d.ts

@@ -0,0 +1,135 @@
+import { ReactNode } from 'react';
+import { HeaderProps } from './ListHeader';
+import { MenuItemsType } from '../menu/Menu';
+
+export interface ListProps<T, F> {
+    header: HeaderProps<T, F>[];
+    checkboxDataCy?: string;
+    items: T[];
+    itemComposition: Array<(props: T) => JSX.Element>;
+    selectedItems: T[];
+    onClick?: (props: T) => void;
+    onDoubleClick?: (props: T) => void;
+    onEnterPressed?: (props: T) => void;
+    onSelectedItemsChanged: (changes: {
+        props: T;
+        value: boolean;
+    }[]) => void;
+    isLoading?: boolean;
+    forceLoading?: boolean;
+    skinSkeleton?: Array<JSX.Element>;
+    emptyState?: ReactNode;
+    onNextPage?: () => void;
+    onOrderByChanged?: (value: {
+        field: F;
+        direction: 'ASC' | 'DESC';
+    }) => void;
+    orderBy?: {
+        field: F;
+        direction: 'ASC' | 'DESC';
+    };
+    hasMoreItems?: boolean;
+    menu?: MenuItemsType<T>;
+    displayMenuDiv?: boolean;
+    className?: string;
+    keyboardShortcuts?: Array<'selectAll' | 'unselectAll' | 'multiselect' | Array<'delete' & (() => void)>>;
+    disableKeyboardShortcuts?: boolean;
+    disableItemCompositionStyles?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    keyBoardShortcutActions?: {
+        onShiftFKeysPressed?: () => void;
+        onRKeyPressed?: () => void;
+        onBackspaceKeyPressed?: () => void;
+    };
+}
+/**
+ * List component
+ *
+ * @property {HeaderProps<T, F>[]} header
+ * - Array of headers for the list. Each header defines the properties of the columns displayed.
+ *
+ * @property {string} [checkboxDataCy]
+ * - Optional `data-cy` attribute used for testing checkboxes in the list.
+ *
+ * @property {T[]} items
+ * - Array of items to be displayed in the list. Each item corresponds to the data for each row.
+ *
+ * @property {(props: T) => JSX.Element}[] itemComposition
+ * - Array of functions that return JSX elements for rendering each item in the list.
+ *
+ * @property {T[]} selectedItems
+ * - Array of selected items.
+ *
+ * @property {(props: T) => void} [onClick]
+ * - Optional callback triggered when an item is clicked.
+ *
+ * @property {(props: T) => void} [onDoubleClick]
+ * - Optional callback triggered when an item is double-clicked.
+ *
+ * @property {(props: T) => void} [onEnterPressed]
+ * - Optional callback triggered when the Enter key is pressed on an item.
+ *
+ * @property {(changes: { props: T; value: boolean }[]) => void} onSelectedItemsChanged
+ * - Callback triggered when the selection state of the items changes.
+ *
+ * @property {boolean} [isLoading]
+ * - Optional flag indicating if the list is loading. If true, a loading state will be shown.
+ *
+ * @property {boolean} [forceLoading]
+ * - Optional flag to force the loading state, even if no items are loading.
+ *
+ * @property {JSX.Element[]} [skinSkeleton]
+ * - Optional array of skeleton elements to be displayed while the list is loading.
+ *
+ * @property {ReactNode} [emptyState]
+ * - Optional content to display when there are no items in the list and no loading state.
+ *
+ * @property {() => void} [onNextPage]
+ * - Optional callback triggered when the user scrolls to load the next page of items.
+ *
+ * @property {({ field: F; direction: 'ASC' | 'DESC' }) => void} [onOrderByChanged]
+ * - Optional callback triggered when the user changes the sorting order of the list.
+ *
+ * @property {{ field: F; direction: 'ASC' | 'DESC' }} [orderBy]
+ * - Optional object specifying the current sorting state of the list.
+ *
+ * @property {boolean} [hasMoreItems]
+ * - Optional flag indicating if there are more items to load.
+ *
+ * @property {MenuItemsType<T>} [menu]
+ * - Optional menu items to be displayed for each item in the list.
+ *
+ * @property {boolean} [displayMenuDiv]
+ * - Optional flag to control whether the menu is displayed as a separate div.
+ *
+ * @property {string} [className]
+ * - Optional CSS class name to apply additional styles to the list container.
+ *
+ * @property {Array<'selectAll' | 'unselectAll' | 'multiselect' | Array<'delete' & (() => void)>>} [keyboardShortcuts]
+ * - Optional array of keyboard shortcut actions to be handled.
+ *
+ * @property {boolean} [disableKeyboardShortcuts]
+ * - Optional flag to disable keyboard shortcuts for the list.
+ *
+ * @property {boolean} [disableItemCompositionStyles]
+ * - Optional flag to disable custom styles for item composition.
+ *
+ * @property {() => void} [onMouseEnter]
+ * - Optional callback triggered when the mouse enters the list.
+ *
+ * @property {() => void} [onMouseLeave]
+ * - Optional callback triggered when the mouse leaves the list.
+ *
+ * @property {
+ *              { onShiftFKeysPressed?: () => void; onRKeyPressed?: () => void; onBackspaceKeyPressed?: () => void }
+ *           } [keyBoardShortcutActions]
+ * - Optional object with custom actions for specific keyboard shortcuts like Shift+F, R, and Backspace.
+ *
+ * @returns {JSX.Element}
+ * - The rendered list component.
+ */
+declare const List: <T extends {
+    id: number;
+}, F extends keyof T>({ header, checkboxDataCy, items, itemComposition, selectedItems, onClick, onDoubleClick, onEnterPressed, onSelectedItemsChanged, isLoading, forceLoading, skinSkeleton, emptyState, orderBy, onOrderByChanged, onNextPage, hasMoreItems, menu, displayMenuDiv, className, disableItemCompositionStyles, onMouseEnter, onMouseLeave, keyBoardShortcutActions, disableKeyboardShortcuts, }: ListProps<T, F>) => JSX.Element;
+export default List;

package/dist/components/list/ListHeader.d.ts

@@ -0,0 +1,33 @@
+import { MenuItemsType } from '../menu/Menu';
+
+export type HeaderProps<T, F> = {
+    label: string;
+    width: string;
+} & ({
+    name: F;
+    orderable: true;
+    defaultDirection: 'ASC' | 'DESC';
+    buttonDataCy?: string;
+    textDataCy?: string;
+} | {
+    name: keyof T;
+    orderable: false;
+});
+interface ListHeaderProps<T, F> {
+    selectedItems: T[];
+    items: T[];
+    header: HeaderProps<T, F>[];
+    isVerticalScrollbarVisible: boolean | null;
+    orderBy?: {
+        field: F;
+        direction: 'ASC' | 'DESC';
+    };
+    menu?: MenuItemsType<T>;
+    displayMenuDiv?: boolean;
+    checkboxDataCy?: string;
+    onTopSelectionCheckboxClick: () => void;
+    onOrderableColumnClicked: (column: HeaderProps<T, F>) => void;
+    onClose?: () => void;
+}
+declare const ListHeader: <T, F extends keyof T>({ selectedItems, onTopSelectionCheckboxClick, items, header, orderBy, onOrderableColumnClicked, menu, displayMenuDiv, isVerticalScrollbarVisible, checkboxDataCy, onClose, }: ListHeaderProps<T, F>) => import("react/jsx-runtime").JSX.Element;
+export default ListHeader;

package/dist/components/list/ListItem.d.ts

@@ -0,0 +1,25 @@
+import { MenuItemsType } from '../menu/Menu';
+
+interface ListItemProps<T> {
+    item: T;
+    listIndex: number;
+    itemComposition: Array<(props: T) => JSX.Element>;
+    selected: boolean;
+    isOpen: boolean;
+    columnsWidth: Array<string>;
+    onClose: () => void;
+    onSelectedChanged: (value: boolean) => void;
+    onDoubleClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onClickContextMenu?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onThreeDotsButtonPressed?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    menu?: MenuItemsType<T>;
+    disableItemCompositionStyles?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    genericEnterKey: () => void;
+}
+declare const ListItem: <T extends {
+    id: number;
+}>({ item, listIndex, itemComposition, selected, isOpen, columnsWidth, onClose, onSelectedChanged, onDoubleClick, onClick, onClickContextMenu, onThreeDotsButtonPressed, disableItemCompositionStyles, menu, onMouseEnter, onMouseLeave, genericEnterKey, }: ListItemProps<T>) => JSX.Element;
+export default ListItem;

package/dist/components/list/index.d.ts

@@ -0,0 +1,2 @@
+export { default as List } from './List';
+export type { ListProps } from './List';

package/dist/components/loader/Loader.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+
+export interface LoaderProps {
+    classNameContainer?: string;
+    classNameLoader?: string;
+    classNameText?: string;
+    type?: 'spinner' | 'pulse';
+    text?: string;
+    size?: number;
+}
+/**
+ * Loader component.
+ *
+ * @property {string} [classNameContainer]
+ * - Optional class name for the container wrapping the loader.
+ * Useful for applying custom styles to the outermost container.
+ *
+ * @property {string} [classNameLoader]
+ * - Optional class name for the loader element itself (spinner or pulse).
+ * Allows custom styling of the loading animation.
+ *
+ * @property {string} [classNameText]
+ * - Optional class name for the text displayed below the loader.
+ * Allows style or adjust the appearance of the text.
+ *
+ * @property {'spinner' | 'pulse'} [type='spinner']
+ * - Determines the type of loader to render.
+ * Can be `'spinner'` for a rotating animation or `'pulse'` for a pulsing effect.
+ * Defaults to `'spinner'`.
+ *
+ * @property {string} [text]
+ * - Optional text to display below the loader.
+ *
+ * @property {number} [size=32]
+ * - Size of the spinner loader in pixels.
+ * Applies to the width and height of the SVG element for the `'spinner'` type.
+ * Defaults to `32`.
+ */
+declare const Loader: React.FC<LoaderProps>;
+export default Loader;

package/dist/components/loader/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Loader } from './Loader';
+export type { LoaderProps } from './Loader';

package/dist/components/menu/Menu.d.ts

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+
+export type MenuItemType<T> = {
+    separator: true;
+} | {
+    name?: string;
+    separator?: false;
+    disabled?: (target: T) => boolean;
+    isTitle?: (target: T) => boolean;
+    icon?: React.ForwardRefExoticComponent<{
+        size?: number | string;
+    }>;
+    keyboardShortcutOptions?: {
+        keyboardShortcutIcon?: React.ForwardRefExoticComponent<{
+            size?: number | string;
+        }>;
+        keyboardShortcutText?: string;
+    };
+    action?: (target: T) => void | Promise<void>;
+    onClick?: () => void;
+    node?: ReactNode;
+};
+export type MenuItemsType<T> = Array<MenuItemType<T>>;
+export interface MenuProps<T> {
+    item?: T;
+    isOpen: boolean;
+    menu?: MenuItemsType<T>;
+    handleMenuClose: () => void;
+    genericEnterKey?: () => void;
+    paddingX?: string;
+    paddingY?: string;
+}
+/**
+ * Menu component
+ *
+ * @template T
+ * @param {MenuProps<T>} props - Properties of the Menu component.
+ *
+ * @property {T} [item]
+ * - Optional item that may be used in menu actions (e.g., data passed for actions).
+ *
+ * @property {boolean} [isOpen]
+ * - To know is Menu is visible.
+ *
+ * @property {MenuItemsType<T>} [menu]
+ * - Optional array of menu items. Each item can define a separator, title, icon, action, etc.
+ *
+ * @property {() => void} handleMenuClose
+ * - Function to close the menu.
+ *
+ * @property {() => void} [genericEnterKey]
+ * - Optional callback for when the Enter key is pressed without selecting a menu item.
+ *
+ * @property {string} [paddingX='px-4']
+ * - Optional padding for the X axis (horizontal) of each menu item. Defaults to `px-4`.
+ *
+ * @property {string} [paddingY='py-1.5']
+ * - Optional padding for the Y axis (vertical) of each menu item. Defaults to `py-1.5`.
+ *
+ * @returns {JSX.Element}
+ * - The rendered Menu component.
+ *
+ * The component handles key events such as Arrow Down, Arrow Up, and Enter for navigation and action execution.
+ * It also supports mouse interactions for hovering and selecting menu items.
+ *
+ * Each menu item can have an action, an optional keyboard shortcut, and an icon.
+ * If the item is disabled or marked as a title, it won't be clickable.
+ *
+ * It features a dynamic index for item selection, with keyboard and mouse-based navigation.
+ */
+declare const Menu: <T>({ item, menu, isOpen, genericEnterKey, handleMenuClose, paddingX, paddingY, }: MenuProps<T>) => JSX.Element;
+export default Menu;

package/dist/components/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Menu } from './Menu';
+export type { MenuItemType, MenuProps } from './Menu';

package/dist/components/modal/Modal.d.ts

@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    maxWidth?: string;
+    className?: string;
+    width?: string;
+    preventClosing?: boolean;
+}
+/**
+ * Modal component
+ *
+ * @param {ModalProps} props - Properties of the Modal component.
+ *
+ * @property {boolean} isOpen
+ * - Controls the visibility of the modal. If `true`, the modal is shown; if `false`, the modal is hidden.
+ *
+ * @property {() => void} onClose
+ * - Callback function that is called when the modal is closed.
+ * This function is triggered by clicking outside the modal or
+ * pressing the 'Escape' key (unless `preventClosing` is `true`).
+ *
+ * @property {ReactNode} children
+ * - The content to be displayed inside the modal.
+ *
+ * @property {string} [maxWidth]
+ * - Optional maximum width for the modal. Defaults to `'max-w-lg'` if not specified.
+ *
+ * @property {string} [className]
+ * - Optional custom class names to apply to the modal content wrapper.
+ *
+ * @property {string} [width]
+ * - Optional width for the modal. Defaults to `'w-full'` if not specified.
+ *
+ * @property {boolean} [preventClosing=false]
+ * - Optional flag to prevent the modal from closing when clicking outside or pressing the 'Escape' key.
+ *
+ * @returns {JSX.Element | null}
+ * - The rendered Modal component, or `null` if `isOpen` is `false`.
+ *
+ * The component uses a series of hooks and effects to manage modal transitions and handle click and key press events.
+ * It supports smooth opacity and scale transitions during opening and closing,
+ * and prevents interaction with the modal's background during the transitions.
+ *
+ * The `preventClosing` prop ensures the modal stays open when interacting outside of the modal or pressing 'Escape'.
+ *
+ * The modal is displayed with a fixed position in the center of the screen, with a backdrop overlay.
+ * The content of the modal is rendered inside a flex container with transition effects to animate its appearance.
+ */
+declare const Modal: ({ isOpen, onClose, children, maxWidth, className, width, preventClosing, }: ModalProps) => JSX.Element | null;
+export default Modal;