feat(modal): add priority prop to BBBModal for z-index stacking control

src/components/Modal/component.tsx

@@ -5,6 +5,7 @@ import { BBBTypography } from '../Typography';
 import { MdClose } from 'react-icons/md';
 import { BBBDivider } from '../Divider';
 import { ModalProps } from './types';
+import { MODAL_PRIORITY_Z_INDEX } from './constants';
 import { BBButton } from '../..';
 
 /**
@@ -13,6 +14,8 @@ import { BBButton } from '../..';
  * This component provides a customizable modal with optional title, body, and footer.
  * It supports accessibility, dividers, scrollable body, and sticky footer.
  *
+ * Use the `priority` prop to control z-index stacking when multiple modals
+ * coexist: `'low'` (1001), `'medium'` (1002), `'high'` (1003).
  */
 const Modal: React.FC<ModalProps> = ({
   isOpen = true,
@@ -28,16 +31,25 @@ const Modal: React.FC<ModalProps> = ({
   footerContent = null,
   stickyFooter = true,
   children,
+  priority,
   ...rest
 }) => {
+  const overlayStyle = priority
+    ? { ...Styled.modalStyles.overlay, zIndex: MODAL_PRIORITY_Z_INDEX[priority] }
+    : Styled.modalStyles.overlay;
+
+  const modalStyles = {
+    overlay: overlayStyle,
+    content: Styled.modalStyles.content,
+  };
 
   return (
     <ReactModal
       {...rest}
       isOpen={isOpen}
       onRequestClose={onRequestClose}
       contentLabel={contentLabel}
-      style={Styled.modalStyles}
+      style={modalStyles}
       shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       shouldCloseOnEsc={shouldCloseOnEsc}
       appElement={appElement}

src/components/Modal/constants.ts

@@ -0,0 +1,11 @@
+export const MODAL_PRIORITIES = {
+  LOW: 'low',
+  MEDIUM: 'medium',
+  HIGH: 'high',
+} as const;
+export const MODAL_PRIORITY_VALUES = Object.values(MODAL_PRIORITIES);
+export const MODAL_PRIORITY_Z_INDEX: Record<typeof MODAL_PRIORITY_VALUES[number], number> = {
+  low: 1001,
+  medium: 1002,
+  high: 1003,
+};

src/components/Modal/index.ts

@@ -1 +1,3 @@
 export { default as BBBModal } from './component';
+export type { ModalPriority } from './types';
+export { MODAL_PRIORITIES, MODAL_PRIORITY_VALUES, MODAL_PRIORITY_Z_INDEX } from './constants';

src/components/Modal/types.ts

@@ -1,5 +1,8 @@
 import React from 'react';
-import ReactModal from 'react-modal';
+import { MODAL_PRIORITY_VALUES } from './constants';
+
+export type ModalPriority = typeof MODAL_PRIORITY_VALUES[number];
+
 
 export interface StyledModalBodyProps {
   $allowScroll: boolean;
@@ -19,4 +22,13 @@ export interface ModalProps extends Omit<ReactModal.Props, 'style'> {
   stickyFooter?: boolean;
   footerContent?: React.ReactNode;
   children: React.ReactNode;
+  /**
+   * Controls z-index when multiple modals coexist.
+   * - `low`    → z-index 1001
+   * - `medium` → z-index 1002
+   * - `high`   → z-index 1003
+   *
+   * When omitted the default overlay z-index (100) is used.
+   */
+  priority?: ModalPriority;
 }

src/components/index.ts

@@ -3,7 +3,8 @@ export { BBButton } from './Button';
 export { BBBCheckbox } from './Checkbox';
 export { BBBDivider } from './Divider';
 export { BBBHint } from './Hint';
-export { BBBModal } from './Modal';
+export { BBBModal, MODAL_PRIORITY_Z_INDEX } from './Modal';
+export type { ModalPriority } from './Modal';
 export { BBBNavigation } from './Navigation';
 export { BBBSelect } from './Select';
 export { BBBSpinner } from './Spinner';