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

package/dist/components/ui/overlay/overlay-manager.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

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

@@ -11,7 +11,7 @@ import {
 } from './types';
 
 // SVG Icons
-const XMarkIcon}> = ({ className = 'w-5 h-5' }) => (
+const XMarkIcon: React.FC<{ className?: string }> = ({ className = 'w-5 h-5' }) => (
   <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>
@@ -19,19 +19,19 @@ const XMarkIcon}> = ({ className = 'w-5 h-5' }) => (
 
 // 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' }
 });
 
 // Position calculations utility (similar to tooltip but adjusted for larger content)
 const calculatePosition = (
-  triggerRect,
-  popoverRect,
-  position] = 'bottom',
-  offset= 8
+  triggerRect: DOMRect,
+  popoverRect: DOMRect,
+  position: PopoverProps['position'] = 'bottom',
+  offset: number = 8
 ) => {
   const scrollX = window.scrollX || document.documentElement.scrollLeft;
   const scrollY = window.scrollY || document.documentElement.scrollTop;
@@ -44,40 +44,52 @@ const calculatePosition = (
   const triggerCenterY = triggerRect.top + triggerRect.height / 2;
   
   switch (position) {
-    case 'top'= triggerRect.top - popoverRect.height - offset;
+    case 'top':
+      top = triggerRect.top - popoverRect.height - offset;
       left = triggerCenterX - popoverRect.width / 2;
       break;
-    case 'top-start'= triggerRect.top - popoverRect.height - offset;
+    case 'top-start':
+      top = triggerRect.top - popoverRect.height - offset;
       left = triggerRect.left;
       break;
-    case 'top-end'= triggerRect.top - popoverRect.height - offset;
+    case 'top-end':
+      top = triggerRect.top - popoverRect.height - offset;
       left = triggerRect.right - popoverRect.width;
       break;
-    case 'bottom'= triggerRect.bottom + offset;
+    case 'bottom':
+      top = triggerRect.bottom + offset;
       left = triggerCenterX - popoverRect.width / 2;
       break;
-    case 'bottom-start'= triggerRect.bottom + offset;
+    case 'bottom-start':
+      top = triggerRect.bottom + offset;
       left = triggerRect.left;
       break;
-    case 'bottom-end'= triggerRect.bottom + offset;
+    case 'bottom-end':
+      top = triggerRect.bottom + offset;
       left = triggerRect.right - popoverRect.width;
       break;
-    case 'left'= triggerCenterY - popoverRect.height / 2;
+    case 'left':
+      top = triggerCenterY - popoverRect.height / 2;
       left = triggerRect.left - popoverRect.width - offset;
       break;
-    case 'left-start'= triggerRect.top;
+    case 'left-start':
+      top = triggerRect.top;
       left = triggerRect.left - popoverRect.width - offset;
       break;
-    case 'left-end'= triggerRect.bottom - popoverRect.height;
+    case 'left-end':
+      top = triggerRect.bottom - popoverRect.height;
       left = triggerRect.left - popoverRect.width - offset;
       break;
-    case 'right'= triggerCenterY - popoverRect.height / 2;
+    case 'right':
+      top = triggerCenterY - popoverRect.height / 2;
       left = triggerRect.right + offset;
       break;
-    case 'right-start'= triggerRect.top;
+    case 'right-start':
+      top = triggerRect.top;
       left = triggerRect.right + offset;
       break;
-    case 'right-end'= triggerRect.bottom - popoverRect.height;
+    case 'right-end':
+      top = triggerRect.bottom - popoverRect.height;
       left = triggerRect.right + offset;
       break;
   }
@@ -101,14 +113,16 @@ const calculatePosition = (
   }
   
   return {
-    top,
-    left};
+    top: top + scrollY,
+    left: left + scrollX
+  };
 };
 
 // Arrow component for popovers
-const PopoverArrow];
-  colors;
-  className?;
+const PopoverArrow: React.FC<{
+  position: PopoverProps['position'];
+  colors: any;
+  className?: string;
 }> = ({ className = '' }) => {
   return (
     <div className={`popover__arrow ${className}`} />
@@ -116,7 +130,7 @@ const PopoverArrow];
 };
 
 // Popover Content Component
-export const PopoverContent= ({
+export const PopoverContent: React.FC<PopoverContentProps> = ({
   children,
   className = '',
   style = {}
@@ -129,7 +143,7 @@ export const PopoverContent= ({
 };
 
 // Popover Header Component
-export const PopoverHeader= ({
+export const PopoverHeader: React.FC<PopoverHeaderProps> = ({
   title,
   subtitle,
   onClose,
@@ -142,8 +156,8 @@ export const PopoverHeader= ({
 }) => {
   const headerClasses = [
     'popover__header',
-    borderless ? 'popover__header--borderless' ,
-    noPadding ? 'popover__header--no-padding' ,
+    borderless ? 'popover__header--borderless' : '',
+    noPadding ? 'popover__header--no-padding' : '',
     className
   ].filter(Boolean).join(' ');
 
@@ -178,7 +192,7 @@ export const PopoverHeader= ({
 };
 
 // Popover Body Component
-export const PopoverBody= ({
+export const PopoverBody: React.FC<PopoverBodyProps> = ({
   children,
   className = '',
   padding = 'md',
@@ -187,17 +201,17 @@ export const PopoverBody= ({
 }) => {
   const bodyClasses = [
     'popover__body',
-    padding === 'none' ? 'popover__body--no-padding' ,
-    padding === 'sm' ? 'popover__body--compact' ,
-    padding === 'lg' ? 'popover__body--spacious' ,
-    scrollable ? 'popover__body--scrollable' ,
+    padding === 'none' ? 'popover__body--no-padding' : '',
+    padding === 'sm' ? 'popover__body--compact' : '',
+    padding === 'lg' ? 'popover__body--spacious' : '',
+    scrollable ? 'popover__body--scrollable' : '',
     className
   ].filter(Boolean).join(' ');
 
   return (
     <div
       className={bodyClasses}
-      style={{ maxHeight}}
+      style={{ maxHeight: scrollable ? maxHeight : undefined }}
     >
       {children}
     </div>
@@ -205,7 +219,7 @@ export const PopoverBody= ({
 };
 
 // Popover Footer Component
-export const PopoverFooter= ({
+export const PopoverFooter: React.FC<PopoverFooterProps> = ({
   children,
   className = '',
   justify = 'end',
@@ -214,11 +228,11 @@ export const PopoverFooter= ({
 }) => {
   const footerClasses = [
     'popover__footer',
-    !borderTop ? 'popover__footer--borderless' ,
-    padding === 'none' ? 'popover__footer--no-padding' ,
-    justify === 'start' ? 'popover__footer--start' ,
-    justify === 'center' ? 'popover__footer--center' ,
-    justify === 'between' ? 'popover__footer--space-between' ,
+    !borderTop ? 'popover__footer--borderless' : '',
+    padding === 'none' ? 'popover__footer--no-padding' : '',
+    justify === 'start' ? 'popover__footer--start' : '',
+    justify === 'center' ? 'popover__footer--center' : '',
+    justify === 'between' ? 'popover__footer--space-between' : '',
     className
   ].filter(Boolean).join(' ');
 
@@ -230,10 +244,10 @@ export const PopoverFooter= ({
 };
 
 // Main Popover Component
-export const Popover= ({
+export const Popover: React.FC<PopoverProps> = ({
   trigger,
   children,
-  isOpen,
+  isOpen: controlledIsOpen,
   onOpenChange,
   position = 'bottom',
   triggerType = 'click',
@@ -255,7 +269,7 @@ export const Popover= ({
   const colors = themeConfig?.colors || getDefaultColors();
   
   const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const [popoverPosition, setPopoverPosition] = useState({ top, left});
+  const [popoverPosition, setPopoverPosition] = useState({ top: 0, left: 0 });
   
   const triggerRef = useRef<HTMLElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
@@ -264,7 +278,7 @@ export const Popover= ({
   const isOpen = controlledIsOpen ?? internalIsOpen;
   
   // Handle open/close state changes
-  const handleOpenChange = useCallback((open) => {
+  const handleOpenChange = useCallback((open: boolean) => {
     if (controlledIsOpen === undefined) {
       setInternalIsOpen(open);
     }
@@ -309,7 +323,7 @@ export const Popover= ({
   useEffect(() => {
     if (!isOpen || !closeOnEscape) return;
 
-    const handleEscape = (event) => {
+    const handleEscape = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         hidePopover();
       }
@@ -323,7 +337,7 @@ export const Popover= ({
   useEffect(() => {
     if (!isOpen || !closeOnBlur) return;
 
-    const handleClickOutside = (event) => {
+    const handleClickOutside = (event: MouseEvent) => {
       const target = event.target as Node;
       
       if (
@@ -370,9 +384,9 @@ export const Popover= ({
   const getContentClasses = () => {
     const classes = [
       'popover__content',
-      size ? `popover__content--size-${size}` ,
-      variant ? `popover__content--variant-${variant}` ,
-      position ? `popover__content--position-${position}` ,
+      size ? `popover__content--size-${size}` : '',
+      variant ? `popover__content--variant-${variant}` : '',
+      position ? `popover__content--position-${position}` : '',
       className
     ];
 
@@ -386,7 +400,7 @@ export const Popover= ({
 
   // Create trigger event handlers
   const getTriggerProps = () => {
-    const props= {};
+    const props: any = {};
     
     if (triggerType === 'hover') {
       props.onMouseEnter = showPopover;
@@ -404,7 +418,8 @@ export const Popover= ({
   // Clone trigger element with event handlers
   const triggerElement = cloneElement(trigger, {
     ...getTriggerProps(),
-    ref});
+    ref: triggerRef
+  });
 
   return (
     <>
@@ -424,11 +439,12 @@ export const Popover= ({
               className={getContentClasses()}
               style={{
                 ...popoverPosition,
-                maxWidth=== 'number' ? `${maxWidth}px` ,
+                maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
                 zIndex,
-                backgroundColor,
-                borderColor,
-                color}}
+                backgroundColor: colors.surface.background,
+                borderColor: colors.surface.border,
+                color: colors.text.primary
+              }}
             >
               {children}