@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

package/dist/components/ui/overlay/modal.esm.js

@@ -0,0 +1,266 @@
+import React, { useEffect, useRef, useId } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { Portal } from './portal';
+import { Backdrop } from './backdrop';
+import { FocusManager } from './focus-manager';
+import { useOverlayManager } from './overlay-manager';
+import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types';
+
+// SVG Icons
+const XMarkIcon}> = ({ className = 'w-6 h-6' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+// Default color fallbacks
+const getDefaultColors = () => ({
+  surface, surface, border, divider},
+  text, secondary, muted, inverse},
+  interactive, active, focus, disabled},
+  primary, 600},
+  semantic, warning, error, info}
+});
+
+// Modal Header Component
+export const ModalHeader= ({
+  title,
+  subtitle,
+  onClose,
+  showCloseButton = true,
+  closeButtonLabel = 'Close',
+  className = '',
+  borderless = false,
+  noPadding = false,
+  children
+}) => {
+  const headerClasses = [
+    'modal__header',
+    borderless ? 'modal__header--borderless' ,
+    noPadding ? 'modal__header--no-padding' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={headerClasses}>
+      <div>
+        {title && (
+          <h2 className="modal__title">
+            {title}
+          </h2>
+        )}
+        {subtitle && (
+          <p className="modal__subtitle">
+            {subtitle}
+          </p>
+        )}
+        {children}
+      </div>
+
+      {showCloseButton && onClose && (
+        <button
+          type="button"
+          className="modal__close"
+          onClick={onClose}
+          aria-label={closeButtonLabel}
+        >
+          <XMarkIcon />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Modal Body Component
+export const ModalBody= ({
+  children,
+  className = '',
+  padding = 'md',
+  scrollable = true,
+  maxHeight = '70vh'
+}) => {
+  const bodyClasses = [
+    'modal__body',
+    padding === 'none' ? 'modal__body--no-padding' ,
+    padding === 'sm' ? 'modal__body--compact' ,
+    padding === 'lg' ? 'modal__body--spacious' ,
+    scrollable ? 'modal__body--scrollable' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={bodyClasses}
+      style={{ maxHeight}}
+    >
+      {children}
+    </div>
+  );
+};
+
+// Modal Footer Component
+export const ModalFooter= ({
+  children,
+  className = '',
+  justify = 'end',
+  padding = 'md',
+  borderTop = true
+}) => {
+  const footerClasses = [
+    'modal__footer',
+    !borderTop ? 'modal__footer--borderless' ,
+    padding === 'none' ? 'modal__footer--no-padding' ,
+    justify === 'start' ? 'modal__footer--start' ,
+    justify === 'center' ? 'modal__footer--center' ,
+    justify === 'between' ? 'modal__footer--space-between' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={footerClasses}>
+      {children}
+    </div>
+  );
+};
+
+// Main Modal Component
+export const Modal= ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = 'md',
+  variant = 'default',
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  showBackdrop = true,
+  backdropBlur = false,
+  backdropOpacity = 0.5,
+  trapFocus = true,
+  restoreFocus = true,
+  initialFocus,
+  zIndex = 1000,
+  animation = 'fade',
+  className = '',
+  theme = 'stan-design',
+  loading = false
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  
+  const modalId = useId();
+  const modalRef = useRef<HTMLDivElement>(null);
+  const { addOverlay, removeOverlay, getTopZIndex } = useOverlayManager();
+
+  // Modal container classes
+  const getContainerClasses = () => {
+    const classes = [
+      'modal__container',
+      size ? `modal__container--size-${size}` ,
+      variant ? `modal__container--variant-${variant}` ,
+      loading ? 'modal__container--loading' ,
+      className
+    ];
+
+    // Add animation class
+    if (animation !== 'none' && isOpen) {
+      classes.push(`modal__container--${animation}-enter`);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+
+    const handleEscape = (event) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+
+  // Manage overlay registration
+  useEffect(() => {
+    if (isOpen) {
+      const currentZIndex = zIndex || getTopZIndex();
+      addOverlay(modalId, currentZIndex);
+      
+      return () => {
+        removeOverlay(modalId);
+      };
+    }
+  }, [isOpen, modalId, addOverlay, removeOverlay, zIndex, getTopZIndex]);
+
+  // Handle backdrop click
+  const handleBackdropClick = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const modalStyle= {
+    backgroundColor,
+    borderColor,
+    color,
+    zIndex)
+  };
+
+  return (
+    <Portal>
+      {showBackdrop && (
+        <Backdrop
+          isVisible={isOpen}
+          onClick={handleBackdropClick}
+          blur={backdropBlur}
+          opacity={backdropOpacity}
+          zIndex={(zIndex || getTopZIndex()) - 1}
+        />
+      )}
+
+      <div className="modal__overlay" style={{ zIndex) }}>
+        <FocusManager
+          isActive={isOpen}
+          trapFocus={trapFocus}
+          restoreFocus={restoreFocus}
+          initialFocus={initialFocus}
+        >
+          <div
+            ref={modalRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? `${modalId}-title` }
+            className={getContainerClasses()}
+            style={modalStyle}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Render children or default layout */}
+            {React.Children.count(children) > 0 ? (
+              children
+            ) ={title}
+                    onClose={onClose}
+                  />
+                )}
+                <ModalBody>
+                  {/* Default empty content */}
+                  <p>Modal content goes here...</p>
+                </ModalBody>
+              </>
+            )}
+          </div>
+        </FocusManager>
+      </div>
+    </Portal>
+  );
+};
+
+export default Modal;

package/dist/components/ui/overlay/modal.js

@@ -0,0 +1,266 @@
+import React, { useEffect, useRef, useId } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { Portal } from './portal';
+import { Backdrop } from './backdrop';
+import { FocusManager } from './focus-manager';
+import { useOverlayManager } from './overlay-manager';
+import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types';
+
+// SVG Icons
+const XMarkIcon}> = ({ className = 'w-6 h-6' }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+
+// Default color fallbacks
+const getDefaultColors = () => ({
+  surface, surface, border, divider},
+  text, secondary, muted, inverse},
+  interactive, active, focus, disabled},
+  primary, 600},
+  semantic, warning, error, info}
+});
+
+// Modal Header Component
+export const ModalHeader= ({
+  title,
+  subtitle,
+  onClose,
+  showCloseButton = true,
+  closeButtonLabel = 'Close',
+  className = '',
+  borderless = false,
+  noPadding = false,
+  children
+}) => {
+  const headerClasses = [
+    'modal__header',
+    borderless ? 'modal__header--borderless' ,
+    noPadding ? 'modal__header--no-padding' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={headerClasses}>
+      <div>
+        {title && (
+          <h2 className="modal__title">
+            {title}
+          </h2>
+        )}
+        {subtitle && (
+          <p className="modal__subtitle">
+            {subtitle}
+          </p>
+        )}
+        {children}
+      </div>
+
+      {showCloseButton && onClose && (
+        <button
+          type="button"
+          className="modal__close"
+          onClick={onClose}
+          aria-label={closeButtonLabel}
+        >
+          <XMarkIcon />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Modal Body Component
+export const ModalBody= ({
+  children,
+  className = '',
+  padding = 'md',
+  scrollable = true,
+  maxHeight = '70vh'
+}) => {
+  const bodyClasses = [
+    'modal__body',
+    padding === 'none' ? 'modal__body--no-padding' ,
+    padding === 'sm' ? 'modal__body--compact' ,
+    padding === 'lg' ? 'modal__body--spacious' ,
+    scrollable ? 'modal__body--scrollable' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={bodyClasses}
+      style={{ maxHeight}}
+    >
+      {children}
+    </div>
+  );
+};
+
+// Modal Footer Component
+export const ModalFooter= ({
+  children,
+  className = '',
+  justify = 'end',
+  padding = 'md',
+  borderTop = true
+}) => {
+  const footerClasses = [
+    'modal__footer',
+    !borderTop ? 'modal__footer--borderless' ,
+    padding === 'none' ? 'modal__footer--no-padding' ,
+    justify === 'start' ? 'modal__footer--start' ,
+    justify === 'center' ? 'modal__footer--center' ,
+    justify === 'between' ? 'modal__footer--space-between' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={footerClasses}>
+      {children}
+    </div>
+  );
+};
+
+// Main Modal Component
+export const Modal= ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = 'md',
+  variant = 'default',
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  showBackdrop = true,
+  backdropBlur = false,
+  backdropOpacity = 0.5,
+  trapFocus = true,
+  restoreFocus = true,
+  initialFocus,
+  zIndex = 1000,
+  animation = 'fade',
+  className = '',
+  theme = 'stan-design',
+  loading = false
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  
+  const modalId = useId();
+  const modalRef = useRef<HTMLDivElement>(null);
+  const { addOverlay, removeOverlay, getTopZIndex } = useOverlayManager();
+
+  // Modal container classes
+  const getContainerClasses = () => {
+    const classes = [
+      'modal__container',
+      size ? `modal__container--size-${size}` ,
+      variant ? `modal__container--variant-${variant}` ,
+      loading ? 'modal__container--loading' ,
+      className
+    ];
+
+    // Add animation class
+    if (animation !== 'none' && isOpen) {
+      classes.push(`modal__container--${animation}-enter`);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+
+    const handleEscape = (event) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+
+  // Manage overlay registration
+  useEffect(() => {
+    if (isOpen) {
+      const currentZIndex = zIndex || getTopZIndex();
+      addOverlay(modalId, currentZIndex);
+      
+      return () => {
+        removeOverlay(modalId);
+      };
+    }
+  }, [isOpen, modalId, addOverlay, removeOverlay, zIndex, getTopZIndex]);
+
+  // Handle backdrop click
+  const handleBackdropClick = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const modalStyle= {
+    backgroundColor,
+    borderColor,
+    color,
+    zIndex)
+  };
+
+  return (
+    <Portal>
+      {showBackdrop && (
+        <Backdrop
+          isVisible={isOpen}
+          onClick={handleBackdropClick}
+          blur={backdropBlur}
+          opacity={backdropOpacity}
+          zIndex={(zIndex || getTopZIndex()) - 1}
+        />
+      )}
+
+      <div className="modal__overlay" style={{ zIndex) }}>
+        <FocusManager
+          isActive={isOpen}
+          trapFocus={trapFocus}
+          restoreFocus={restoreFocus}
+          initialFocus={initialFocus}
+        >
+          <div
+            ref={modalRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? `${modalId}-title` }
+            className={getContainerClasses()}
+            style={modalStyle}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Render children or default layout */}
+            {React.Children.count(children) > 0 ? (
+              children
+            ) ={title}
+                    onClose={onClose}
+                  />
+                )}
+                <ModalBody>
+                  {/* Default empty content */}
+                  <p>Modal content goes here...</p>
+                </ModalBody>
+              </>
+            )}
+          </div>
+        </FocusManager>
+      </div>
+    </Portal>
+  );
+};
+
+export default Modal;

package/dist/components/ui/overlay/overlay-manager.d.ts

@@ -0,0 +1,107 @@
+// Overlay context for managing global overlay state
+interface OverlayContextType {
+  overlays: OverlayState[];
+  addOverlay: (id: string, zIndex: number) => void;
+  removeOverlay: (id: string) => void;
+  getTopZIndex: () => number;
+  isOverlayActive: (id: string) => boolean;
+}
+
+const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
+
+// Custom hook to use overlay context
+export declare const useOverlayManager: () => {
+  const context = useContext(OverlayContext);
+  if (!context) {
+    throw new Error('useOverlayManager must be used within an OverlayProvider');
+  }
+  return context;
+};
+
+// Overlay reducer for state management
+const overlayReducer = (state: OverlayState[], action: OverlayAction): OverlayState[] => {
+  switch (action.type) {
+    case 'ADD_OVERLAY':
+      return [...state, { id: action.payload.id, zIndex: action.payload.zIndex || 1000 }];
+
+    case 'REMOVE_OVERLAY':
+      return state.filter(overlay => overlay.id !== action.payload.id);
+
+    case 'UPDATE_Z_INDEX':
+      return state.map(overlay =>
+        overlay.id === action.payload.id
+          ? { ...overlay, zIndex: action.payload.zIndex || overlay.zIndex }
+          : overlay
+      );
+
+    default:
+      return state;
+  }
+};
+
+// Overlay provider component
+export const OverlayProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [overlays, dispatch] = useReducer(overlayReducer, []);
+
+  const addOverlay = useCallback((id: string, zIndex: number) => {
+    dispatch({ type: 'ADD_OVERLAY', payload: { id, zIndex } });
+  }, []);
+
+  const removeOverlay = useCallback((id: string) => {
+    dispatch({ type: 'REMOVE_OVERLAY', payload: { id } });
+  }, []);
+
+  const getTopZIndex = useCallback(() => {
+    if (overlays.length === 0) return 1000; // Base z-index
+    return Math.max(...overlays.map(o => o.zIndex)) + 1;
+  }, [overlays]);
+
+  const isOverlayActive = useCallback((id: string) => {
+    return overlays.some(overlay => overlay.id === id);
+  }, [overlays]);
+
+  const value: OverlayContextType = {
+    overlays,
+    addOverlay,
+    removeOverlay,
+    getTopZIndex,
+    isOverlayActive
+  };
+
+  return (
+    <OverlayContext.Provider value={value}>
+      {children}
+    </OverlayContext.Provider>
+  );
+};
+
+// Overlay manager component for direct usage
+export const OverlayManager: React.FC<OverlayManagerProps> = ({
+  children,
+  maxOverlays = 10,
+  onOverlayChange
+}) => {
+  const { overlays } = useOverlayManager();
+
+  // Notify parent of overlay changes
+  React.useEffect(() => {
+    if (onOverlayChange) {
+      onOverlayChange(overlays);
+    }
+  }, [overlays, onOverlayChange]);
+
+  // Enforce maximum overlay limit
+  React.useEffect(() => {
+    if (overlays.length > maxOverlays) {
+      console.warn(`Maximum overlay limit (${maxOverlays}) exceeded`);
+    }
+  }, [overlays.length, maxOverlays]);
+
+  return (
+    <div className="overlay-manager">
+      {children}
+    </div>
+  );
+};
+
+export default OverlayManager;