@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.11

package/dist/components/ui/overlay/focus-manager.esm.js

@@ -1,16 +1,16 @@
 import React, { useEffect, useRef, useCallback } from 'react';
 
 export interface FocusManagerProps {
-  children;
-  isActive;
-  onFocusChange?) => void;
-  trapFocus?;
-  restoreFocus?;
-  initialFocus?;
-  className?;
+  children: React.ReactNode;
+  isActive: boolean;
+  onFocusChange?: (focused: boolean) => void;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
+  initialFocus?: React.RefObject<HTMLElement>;
+  className?: string;
 }
 
-export const FocusManager= ({
+export const FocusManager: React.FC<FocusManagerProps> = ({
   children,
   isActive,
   onFocusChange,
@@ -28,12 +28,12 @@ export const FocusManager= ({
     if (!containerRef.current) return [];
     
     const selector = [
-      'button])',
-      'input])',
-      'select])',
-      'textarea])',
+      'button:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      'textarea:not([disabled])',
       'a[href]',
-      '[tabindex]="-1"])',
+      '[tabindex]:not([tabindex="-1"])',
       '[contenteditable="true"]'
     ].join(', ');
     
@@ -82,7 +82,7 @@ export const FocusManager= ({
   }, [isActive, restoreFocus, onFocusChange]);
 
   // Handle keyboard navigation for focus trapping
-  const handleKeyDown = useCallback((event) => {
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
     if (!isActive || !trapFocus || focusableElements.current.length === 0) return;
 
     const { key, shiftKey } = event;
@@ -94,16 +94,18 @@ export const FocusManager= ({
         el => el === document.activeElement
       );
       
-      let nextIndex;
+      let nextIndex: number;
       
       if (shiftKey) {
-        // Shift + Tab= currentIndex <= 0 
+        // Shift + Tab: move backward
+        nextIndex = currentIndex <= 0 
           ? focusableElements.current.length - 1 
-          ;
+          : currentIndex - 1;
       } else {
-        // Tab= currentIndex >= focusableElements.current.length - 1 
+        // Tab: move forward
+        nextIndex = currentIndex >= focusableElements.current.length - 1 
           ? 0 
-          ;
+          : currentIndex + 1;
       }
       
       focusableElements.current[nextIndex]?.focus();

package/dist/components/ui/overlay/focus-manager.js

@@ -1,16 +1,16 @@
 import React, { useEffect, useRef, useCallback } from 'react';
 
 export interface FocusManagerProps {
-  children;
-  isActive;
-  onFocusChange?) => void;
-  trapFocus?;
-  restoreFocus?;
-  initialFocus?;
-  className?;
+  children: React.ReactNode;
+  isActive: boolean;
+  onFocusChange?: (focused: boolean) => void;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
+  initialFocus?: React.RefObject<HTMLElement>;
+  className?: string;
 }
 
-export const FocusManager= ({
+export const FocusManager: React.FC<FocusManagerProps> = ({
   children,
   isActive,
   onFocusChange,
@@ -28,12 +28,12 @@ export const FocusManager= ({
     if (!containerRef.current) return [];
     
     const selector = [
-      'button])',
-      'input])',
-      'select])',
-      'textarea])',
+      'button:not([disabled])',
+      'input:not([disabled])',
+      'select:not([disabled])',
+      'textarea:not([disabled])',
       'a[href]',
-      '[tabindex]="-1"])',
+      '[tabindex]:not([tabindex="-1"])',
       '[contenteditable="true"]'
     ].join(', ');
     
@@ -82,7 +82,7 @@ export const FocusManager= ({
   }, [isActive, restoreFocus, onFocusChange]);
 
   // Handle keyboard navigation for focus trapping
-  const handleKeyDown = useCallback((event) => {
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
     if (!isActive || !trapFocus || focusableElements.current.length === 0) return;
 
     const { key, shiftKey } = event;
@@ -94,16 +94,18 @@ export const FocusManager= ({
         el => el === document.activeElement
       );
       
-      let nextIndex;
+      let nextIndex: number;
       
       if (shiftKey) {
-        // Shift + Tab= currentIndex <= 0 
+        // Shift + Tab: move backward
+        nextIndex = currentIndex <= 0 
           ? focusableElements.current.length - 1 
-          ;
+          : currentIndex - 1;
       } else {
-        // Tab= currentIndex >= focusableElements.current.length - 1 
+        // Tab: move forward
+        nextIndex = currentIndex >= focusableElements.current.length - 1 
           ? 0 
-          ;
+          : currentIndex + 1;
       }
       
       focusableElements.current[nextIndex]?.focus();

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

@@ -11,6 +11,4 @@ export { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter } fr
 
 // Types
 
-
 // Re-export types from the main types file
-

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

@@ -11,6 +11,4 @@ export { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter } fr
 
 // Types
 
-
 // Re-export types from the main types file
-

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

@@ -7,7 +7,7 @@ import { useOverlayManager } from './overlay-manager';
 import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types';
 
 // SVG Icons
-const XMarkIcon}> = ({ className = 'w-6 h-6' }) => (
+const XMarkIcon: React.FC<{ className?: string }> = ({ 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>
@@ -15,15 +15,15 @@ const XMarkIcon}> = ({ className = 'w-6 h-6' }) => (
 
 // Default color fallbacks
 const getDefaultColors = () => ({
-  surface, surface, border, divider},
-  text, secondary, muted, inverse},
-  interactive, active, focus, disabled},
-  primary, 600},
-  semantic, warning, error, info}
+  surface: { background: '#ffffff', surface: '#f9fafb', border: '#e5e7eb', divider: '#e5e7eb' },
+  text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff' },
+  interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
+  primary: { 500: '#3b82f6', 600: '#2563eb' },
+  semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
 });
 
 // Modal Header Component
-export const ModalHeader= ({
+export const ModalHeader: React.FC<ModalHeaderProps> = ({
   title,
   subtitle,
   onClose,
@@ -36,8 +36,8 @@ export const ModalHeader= ({
 }) => {
   const headerClasses = [
     'modal__header',
-    borderless ? 'modal__header--borderless' ,
-    noPadding ? 'modal__header--no-padding' ,
+    borderless ? 'modal__header--borderless' : '',
+    noPadding ? 'modal__header--no-padding' : '',
     className
   ].filter(Boolean).join(' ');
 
@@ -72,7 +72,7 @@ export const ModalHeader= ({
 };
 
 // Modal Body Component
-export const ModalBody= ({
+export const ModalBody: React.FC<ModalBodyProps> = ({
   children,
   className = '',
   padding = 'md',
@@ -81,17 +81,17 @@ export const ModalBody= ({
 }) => {
   const bodyClasses = [
     'modal__body',
-    padding === 'none' ? 'modal__body--no-padding' ,
-    padding === 'sm' ? 'modal__body--compact' ,
-    padding === 'lg' ? 'modal__body--spacious' ,
-    scrollable ? 'modal__body--scrollable' ,
+    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}}
+      style={{ maxHeight: scrollable ? maxHeight : undefined }}
     >
       {children}
     </div>
@@ -99,7 +99,7 @@ export const ModalBody= ({
 };
 
 // Modal Footer Component
-export const ModalFooter= ({
+export const ModalFooter: React.FC<ModalFooterProps> = ({
   children,
   className = '',
   justify = 'end',
@@ -108,11 +108,11 @@ export const ModalFooter= ({
 }) => {
   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' ,
+    !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(' ');
 
@@ -124,7 +124,7 @@ export const ModalFooter= ({
 };
 
 // Main Modal Component
-export const Modal= ({
+export const Modal: React.FC<ModalProps> = ({
   isOpen,
   onClose,
   title,
@@ -157,9 +157,9 @@ export const Modal= ({
   const getContainerClasses = () => {
     const classes = [
       'modal__container',
-      size ? `modal__container--size-${size}` ,
-      variant ? `modal__container--variant-${variant}` ,
-      loading ? 'modal__container--loading' ,
+      size ? `modal__container--size-${size}` : '',
+      variant ? `modal__container--variant-${variant}` : '',
+      loading ? 'modal__container--loading' : '',
       className
     ];
 
@@ -175,7 +175,7 @@ export const Modal= ({
   useEffect(() => {
     if (!isOpen || !closeOnEscape) return;
 
-    const handleEscape = (event) => {
+    const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         onClose();
       }
@@ -208,11 +208,11 @@ export const Modal= ({
     return null;
   }
 
-  const modalStyle= {
-    backgroundColor,
-    borderColor,
-    color,
-    zIndex)
+  const modalStyle: React.CSSProperties = {
+    backgroundColor: colors.surface.background,
+    borderColor: colors.surface.border,
+    color: colors.text.primary,
+    zIndex: zIndex || getTopZIndex()
   };
 
   return (
@@ -227,7 +227,7 @@ export const Modal= ({
         />
       )}
 
-      <div className="modal__overlay" style={{ zIndex) }}>
+      <div className="modal__overlay" style={{ zIndex: zIndex || getTopZIndex() }}>
         <FocusManager
           isActive={isOpen}
           trapFocus={trapFocus}
@@ -238,7 +238,7 @@ export const Modal= ({
             ref={modalRef}
             role="dialog"
             aria-modal="true"
-            aria-labelledby={title ? `${modalId}-title` }
+            aria-labelledby={title ? `${modalId}-title` : undefined}
             className={getContainerClasses()}
             style={modalStyle}
             onClick={(e) => e.stopPropagation()}
@@ -246,7 +246,11 @@ export const Modal= ({
             {/* Render children or default layout */}
             {React.Children.count(children) > 0 ? (
               children
-            ) ={title}
+            ) : (
+              <>
+                {title && (
+                  <ModalHeader
+                    title={title}
                     onClose={onClose}
                   />
                 )}

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

@@ -7,7 +7,7 @@ import { useOverlayManager } from './overlay-manager';
 import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types';
 
 // SVG Icons
-const XMarkIcon}> = ({ className = 'w-6 h-6' }) => (
+const XMarkIcon: React.FC<{ className?: string }> = ({ 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>
@@ -15,15 +15,15 @@ const XMarkIcon}> = ({ className = 'w-6 h-6' }) => (
 
 // Default color fallbacks
 const getDefaultColors = () => ({
-  surface, surface, border, divider},
-  text, secondary, muted, inverse},
-  interactive, active, focus, disabled},
-  primary, 600},
-  semantic, warning, error, info}
+  surface: { background: '#ffffff', surface: '#f9fafb', border: '#e5e7eb', divider: '#e5e7eb' },
+  text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff' },
+  interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
+  primary: { 500: '#3b82f6', 600: '#2563eb' },
+  semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
 });
 
 // Modal Header Component
-export const ModalHeader= ({
+export const ModalHeader: React.FC<ModalHeaderProps> = ({
   title,
   subtitle,
   onClose,
@@ -36,8 +36,8 @@ export const ModalHeader= ({
 }) => {
   const headerClasses = [
     'modal__header',
-    borderless ? 'modal__header--borderless' ,
-    noPadding ? 'modal__header--no-padding' ,
+    borderless ? 'modal__header--borderless' : '',
+    noPadding ? 'modal__header--no-padding' : '',
     className
   ].filter(Boolean).join(' ');
 
@@ -72,7 +72,7 @@ export const ModalHeader= ({
 };
 
 // Modal Body Component
-export const ModalBody= ({
+export const ModalBody: React.FC<ModalBodyProps> = ({
   children,
   className = '',
   padding = 'md',
@@ -81,17 +81,17 @@ export const ModalBody= ({
 }) => {
   const bodyClasses = [
     'modal__body',
-    padding === 'none' ? 'modal__body--no-padding' ,
-    padding === 'sm' ? 'modal__body--compact' ,
-    padding === 'lg' ? 'modal__body--spacious' ,
-    scrollable ? 'modal__body--scrollable' ,
+    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}}
+      style={{ maxHeight: scrollable ? maxHeight : undefined }}
     >
       {children}
     </div>
@@ -99,7 +99,7 @@ export const ModalBody= ({
 };
 
 // Modal Footer Component
-export const ModalFooter= ({
+export const ModalFooter: React.FC<ModalFooterProps> = ({
   children,
   className = '',
   justify = 'end',
@@ -108,11 +108,11 @@ export const ModalFooter= ({
 }) => {
   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' ,
+    !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(' ');
 
@@ -124,7 +124,7 @@ export const ModalFooter= ({
 };
 
 // Main Modal Component
-export const Modal= ({
+export const Modal: React.FC<ModalProps> = ({
   isOpen,
   onClose,
   title,
@@ -157,9 +157,9 @@ export const Modal= ({
   const getContainerClasses = () => {
     const classes = [
       'modal__container',
-      size ? `modal__container--size-${size}` ,
-      variant ? `modal__container--variant-${variant}` ,
-      loading ? 'modal__container--loading' ,
+      size ? `modal__container--size-${size}` : '',
+      variant ? `modal__container--variant-${variant}` : '',
+      loading ? 'modal__container--loading' : '',
       className
     ];
 
@@ -175,7 +175,7 @@ export const Modal= ({
   useEffect(() => {
     if (!isOpen || !closeOnEscape) return;
 
-    const handleEscape = (event) => {
+    const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         onClose();
       }
@@ -208,11 +208,11 @@ export const Modal= ({
     return null;
   }
 
-  const modalStyle= {
-    backgroundColor,
-    borderColor,
-    color,
-    zIndex)
+  const modalStyle: React.CSSProperties = {
+    backgroundColor: colors.surface.background,
+    borderColor: colors.surface.border,
+    color: colors.text.primary,
+    zIndex: zIndex || getTopZIndex()
   };
 
   return (
@@ -227,7 +227,7 @@ export const Modal= ({
         />
       )}
 
-      <div className="modal__overlay" style={{ zIndex) }}>
+      <div className="modal__overlay" style={{ zIndex: zIndex || getTopZIndex() }}>
         <FocusManager
           isActive={isOpen}
           trapFocus={trapFocus}
@@ -238,7 +238,7 @@ export const Modal= ({
             ref={modalRef}
             role="dialog"
             aria-modal="true"
-            aria-labelledby={title ? `${modalId}-title` }
+            aria-labelledby={title ? `${modalId}-title` : undefined}
             className={getContainerClasses()}
             style={modalStyle}
             onClick={(e) => e.stopPropagation()}
@@ -246,7 +246,11 @@ export const Modal= ({
             {/* Render children or default layout */}
             {React.Children.count(children) > 0 ? (
               children
-            ) ={title}
+            ) : (
+              <>
+                {title && (
+                  <ModalHeader
+                    title={title}
                     onClose={onClose}
                   />
                 )}

package/dist/components/ui/overlay/overlay-manager.esm.js

@@ -3,11 +3,11 @@ import { OverlayManagerProps, OverlayState, OverlayAction } from './types';
 
 // Overlay context for managing global overlay state
 interface OverlayContextType {
-  overlays];
-  addOverlay, zIndex) => void;
-  removeOverlay) => void;
-  getTopZIndex) => number;
-  isOverlayActive) => boolean;
+  overlays: OverlayState[];
+  addOverlay: (id: string, zIndex: number) => void;
+  removeOverlay: (id: string) => void;
+  getTopZIndex: () => number;
+  isOverlayActive: (id: string) => boolean;
 }
 
 const OverlayContext = createContext<OverlayContextType | undefined>(undefined);
@@ -22,31 +22,36 @@ export const useOverlayManager = () => {
 };
 
 // Overlay reducer for state management
-const overlayReducer = (state], action)] => {
+const overlayReducer = (state: OverlayState[], action: OverlayAction): OverlayState[] => {
   switch (action.type) {
-    case 'ADD_OVERLAY', { id, zIndex}];
+    case 'ADD_OVERLAY':
+      return [...state, { id: action.payload.id, zIndex: action.payload.zIndex || 1000 }];
     
-    case 'REMOVE_OVERLAY'=> overlay.id !== action.payload.id);
+    case 'REMOVE_OVERLAY':
+      return state.filter(overlay => overlay.id !== action.payload.id);
     
-    case 'UPDATE_Z_INDEX'=>
+    case 'UPDATE_Z_INDEX':
+      return state.map(overlay =>
         overlay.id === action.payload.id
-          ? { ...overlay, zIndex}
-          );
+          ? { ...overlay, zIndex: action.payload.zIndex || overlay.zIndex }
+          : overlay
+      );
     
-    default;
+    default:
+      return state;
   }
 };
 
 // Overlay provider component
-export const OverlayProvider}> = ({ children }) => {
+export const OverlayProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
   const [overlays, dispatch] = useReducer(overlayReducer, []);
 
-  const addOverlay = useCallback((id, zIndex) => {
-    dispatch({ type, payload, zIndex } });
+  const addOverlay = useCallback((id: string, zIndex: number) => {
+    dispatch({ type: 'ADD_OVERLAY', payload: { id, zIndex } });
   }, []);
 
-  const removeOverlay = useCallback((id) => {
-    dispatch({ type, payload} });
+  const removeOverlay = useCallback((id: string) => {
+    dispatch({ type: 'REMOVE_OVERLAY', payload: { id } });
   }, []);
 
   const getTopZIndex = useCallback(() => {
@@ -54,11 +59,11 @@ export const OverlayProvider}> = ({ children }) => {
     return Math.max(...overlays.map(o => o.zIndex)) + 1;
   }, [overlays]);
 
-  const isOverlayActive = useCallback((id) => {
+  const isOverlayActive = useCallback((id: string) => {
     return overlays.some(overlay => overlay.id === id);
   }, [overlays]);
 
-  const value= {
+  const value: OverlayContextType = {
     overlays,
     addOverlay,
     removeOverlay,
@@ -74,7 +79,7 @@ export const OverlayProvider}> = ({ children }) => {
 };
 
 // Overlay manager component for direct usage
-export const OverlayManager= ({
+export const OverlayManager: React.FC<OverlayManagerProps> = ({
   children,
   maxOverlays = 10,
   onOverlayChange