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

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

@@ -0,0 +1,446 @@
+import React, { useState, useRef, useEffect, useCallback, cloneElement } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { Portal } from './portal';
+import { FocusManager } from './focus-manager';
+import { 
+  PopoverProps, 
+  PopoverContentProps, 
+  PopoverHeaderProps, 
+  PopoverBodyProps, 
+  PopoverFooterProps 
+} from './types';
+
+// SVG Icons
+const XMarkIcon}> = ({ 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>
+);
+
+// Default color fallbacks
+const getDefaultColors = () => ({
+  surface, surface, border, divider},
+  text, secondary, muted, inverse},
+  interactive, active, focus, disabled},
+  primary, 600},
+  semantic, warning, error, info}
+});
+
+// Position calculations utility (similar to tooltip but adjusted for larger content)
+const calculatePosition = (
+  triggerRect,
+  popoverRect,
+  position] = 'bottom',
+  offset= 8
+) => {
+  const scrollX = window.scrollX || document.documentElement.scrollLeft;
+  const scrollY = window.scrollY || document.documentElement.scrollTop;
+  
+  let top = 0;
+  let left = 0;
+  
+  // Base calculations
+  const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+  const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+  
+  switch (position) {
+    case 'top'= triggerRect.top - popoverRect.height - offset;
+      left = triggerCenterX - popoverRect.width / 2;
+      break;
+    case 'top-start'= triggerRect.top - popoverRect.height - offset;
+      left = triggerRect.left;
+      break;
+    case 'top-end'= triggerRect.top - popoverRect.height - offset;
+      left = triggerRect.right - popoverRect.width;
+      break;
+    case 'bottom'= triggerRect.bottom + offset;
+      left = triggerCenterX - popoverRect.width / 2;
+      break;
+    case 'bottom-start'= triggerRect.bottom + offset;
+      left = triggerRect.left;
+      break;
+    case 'bottom-end'= triggerRect.bottom + offset;
+      left = triggerRect.right - popoverRect.width;
+      break;
+    case 'left'= triggerCenterY - popoverRect.height / 2;
+      left = triggerRect.left - popoverRect.width - offset;
+      break;
+    case 'left-start'= triggerRect.top;
+      left = triggerRect.left - popoverRect.width - offset;
+      break;
+    case 'left-end'= triggerRect.bottom - popoverRect.height;
+      left = triggerRect.left - popoverRect.width - offset;
+      break;
+    case 'right'= triggerCenterY - popoverRect.height / 2;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-start'= triggerRect.top;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-end'= triggerRect.bottom - popoverRect.height;
+      left = triggerRect.right + offset;
+      break;
+  }
+  
+  // Adjust for viewport boundaries
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  
+  // Horizontal boundary checks
+  if (left < offset) {
+    left = offset;
+  } else if (left + popoverRect.width > viewportWidth - offset) {
+    left = viewportWidth - popoverRect.width - offset;
+  }
+  
+  // Vertical boundary checks
+  if (top < offset) {
+    top = offset;
+  } else if (top + popoverRect.height > viewportHeight - offset) {
+    top = viewportHeight - popoverRect.height - offset;
+  }
+  
+  return {
+    top,
+    left};
+};
+
+// Arrow component for popovers
+const PopoverArrow];
+  colors;
+  className?;
+}> = ({ className = '' }) => {
+  return (
+    <div className={`popover__arrow ${className}`} />
+  );
+};
+
+// Popover Content Component
+export const PopoverContent= ({
+  children,
+  className = '',
+  style = {}
+}) => {
+  return (
+    <div className={`popover__content ${className}`} style={style}>
+      {children}
+    </div>
+  );
+};
+
+// Popover Header Component
+export const PopoverHeader= ({
+  title,
+  subtitle,
+  onClose,
+  showCloseButton = true,
+  closeButtonLabel = 'Close',
+  className = '',
+  borderless = false,
+  noPadding = false,
+  children
+}) => {
+  const headerClasses = [
+    'popover__header',
+    borderless ? 'popover__header--borderless' ,
+    noPadding ? 'popover__header--no-padding' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={headerClasses}>
+      <div>
+        {title && (
+          <h3 className="popover__title">
+            {title}
+          </h3>
+        )}
+        {subtitle && (
+          <p className="popover__subtitle">
+            {subtitle}
+          </p>
+        )}
+        {children}
+      </div>
+
+      {showCloseButton && onClose && (
+        <button
+          type="button"
+          className="popover__close"
+          onClick={onClose}
+          aria-label={closeButtonLabel}
+        >
+          <XMarkIcon />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Popover Body Component
+export const PopoverBody= ({
+  children,
+  className = '',
+  padding = 'md',
+  scrollable = true,
+  maxHeight = '60vh'
+}) => {
+  const bodyClasses = [
+    'popover__body',
+    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}}
+    >
+      {children}
+    </div>
+  );
+};
+
+// Popover Footer Component
+export const PopoverFooter= ({
+  children,
+  className = '',
+  justify = 'end',
+  padding = 'md',
+  borderTop = true
+}) => {
+  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' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={footerClasses}>
+      {children}
+    </div>
+  );
+};
+
+// Main Popover Component
+export const Popover= ({
+  trigger,
+  children,
+  isOpen,
+  onOpenChange,
+  position = 'bottom',
+  triggerType = 'click',
+  delay = 0,
+  offset = 8,
+  size = 'md',
+  variant = 'default',
+  showArrow = true,
+  maxWidth = 400,
+  zIndex = 1000,
+  animation = 'fade',
+  closeOnBlur = true,
+  closeOnEscape = true,
+  className = '',
+  theme = 'stan-design'
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [popoverPosition, setPopoverPosition] = useState({ top, left});
+  
+  const triggerRef = useRef<HTMLElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  const isOpen = controlledIsOpen ?? internalIsOpen;
+  
+  // Handle open/close state changes
+  const handleOpenChange = useCallback((open) => {
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(open);
+    }
+    onOpenChange?.(open);
+  }, [controlledIsOpen, onOpenChange]);
+
+  // Show popover with delay
+  const showPopover = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        handleOpenChange(true);
+      }, delay);
+    } else {
+      handleOpenChange(true);
+    }
+  }, [delay, handleOpenChange]);
+
+  // Hide popover
+  const hidePopover = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  // Position calculation
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !popoverRef.current || !isOpen) return;
+    
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    
+    const newPosition = calculatePosition(triggerRect, popoverRect, position, offset);
+    setPopoverPosition(newPosition);
+  }, [isOpen, position, offset]);
+
+  // Handle escape key
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+
+    const handleEscape = (event) => {
+      if (event.key === 'Escape') {
+        hidePopover();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, closeOnEscape, hidePopover]);
+
+  // Handle click outside
+  useEffect(() => {
+    if (!isOpen || !closeOnBlur) return;
+
+    const handleClickOutside = (event) => {
+      const target = event.target as Node;
+      
+      if (
+        triggerRef.current && !triggerRef.current.contains(target) &&
+        popoverRef.current && !popoverRef.current.contains(target)
+      ) {
+        hidePopover();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isOpen, closeOnBlur, hidePopover]);
+
+  // Update position when popover opens or on scroll/resize
+  useEffect(() => {
+    if (isOpen) {
+      // Small delay to ensure DOM is updated
+      setTimeout(updatePosition, 0);
+      
+      const handleResize = () => updatePosition();
+      const handleScroll = () => updatePosition();
+      
+      window.addEventListener('resize', handleResize);
+      window.addEventListener('scroll', handleScroll, true);
+      
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('scroll', handleScroll, true);
+      };
+    }
+  }, [isOpen, updatePosition]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Get popover content classes
+  const getContentClasses = () => {
+    const classes = [
+      'popover__content',
+      size ? `popover__content--size-${size}` ,
+      variant ? `popover__content--variant-${variant}` ,
+      position ? `popover__content--position-${position}` ,
+      className
+    ];
+
+    // Add animation class
+    if (animation !== 'none' && isOpen) {
+      classes.push(`popover__content--${animation}-enter`);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  // Create trigger event handlers
+  const getTriggerProps = () => {
+    const props= {};
+    
+    if (triggerType === 'hover') {
+      props.onMouseEnter = showPopover;
+      props.onMouseLeave = hidePopover;
+    } else if (triggerType === 'click') {
+      props.onClick = () => handleOpenChange(!isOpen);
+    } else if (triggerType === 'focus') {
+      props.onFocus = showPopover;
+      props.onBlur = hidePopover;
+    }
+    
+    return props;
+  };
+
+  // Clone trigger element with event handlers
+  const triggerElement = cloneElement(trigger, {
+    ...getTriggerProps(),
+    ref});
+
+  return (
+    <>
+      {triggerElement}
+      
+      {isOpen && (
+        <Portal>
+          <FocusManager
+            isActive={isOpen}
+            trapFocus={false} // Don't trap focus for popovers by default
+            restoreFocus={true}
+          >
+            <div
+              ref={popoverRef}
+              role="dialog"
+              aria-modal="false"
+              className={getContentClasses()}
+              style={{
+                ...popoverPosition,
+                maxWidth=== 'number' ? `${maxWidth}px` ,
+                zIndex,
+                backgroundColor,
+                borderColor,
+                color}}
+            >
+              {children}
+
+              {showArrow && (
+                <PopoverArrow position={position} colors={colors} />
+              )}
+            </div>
+          </FocusManager>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default Popover;

package/dist/components/ui/overlay/portal.d.ts

@@ -0,0 +1,75 @@
+export const Portal: React.FC<PortalProps> = ({
+  children,
+  container,
+  className = '',
+  style = {},
+  onMount,
+  onUnmount,
+  variant = 'default',
+  position = 'fixed',
+  zIndex = 'modal',
+  debug = false
+}) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+
+    if (onMount) {
+      onMount();
+    }
+
+    return () => {
+      if (onUnmount) {
+        onUnmount();
+      }
+    };
+  }, [onMount, onUnmount]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  // Determine the container to render into
+  let targetContainer: Element | null = null;
+
+  if (container) {
+    if (typeof container === 'function') {
+      targetContainer = container();
+    } else {
+      targetContainer = container;
+    }
+  }
+
+  // Fallback to document.body if no container specified
+  if (!targetContainer) {
+    targetContainer = document.body;
+  }
+
+  // Ensure the container exists
+  if (!targetContainer) {
+    console.warn('Portal: Target container not found');
+    return null;
+  }
+
+  // Build container classes
+  const containerClasses = [
+    'portal__container',
+    variant !== 'default' ? `portal__container--${variant}` : '',
+    position ? `portal__container--${position}` : '',
+    zIndex ? `portal__container--${zIndex}` : '',
+    debug ? 'portal__container--debug' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return createPortal(
+    <div className={containerClasses} style={style}>
+      <div className="portal__content">
+        {children}
+      </div>
+    </div>,
+    targetContainer
+  );
+};
+
+export default Portal;

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

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { PortalProps } from './types';
+
+export const Portal= ({
+  children,
+  container,
+  className = '',
+  style = {},
+  onMount,
+  onUnmount,
+  variant = 'default',
+  position = 'fixed',
+  zIndex = 'modal',
+  debug = false
+}) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    
+    if (onMount) {
+      onMount();
+    }
+
+    return () => {
+      if (onUnmount) {
+        onUnmount();
+      }
+    };
+  }, [onMount, onUnmount]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  // Determine the container to render into
+  let targetContainer= null;
+  
+  if (container) {
+    if (typeof container === 'function') {
+      targetContainer = container();
+    } else {
+      targetContainer = container;
+    }
+  }
+
+  // Fallback to document.body if no container specified
+  if (!targetContainer) {
+    targetContainer = document.body;
+  }
+
+  // Ensure the container exists
+  if (!targetContainer) {
+    console.warn('Portal);
+    return null;
+  }
+
+  // Build container classes
+  const containerClasses = [
+    'portal__container',
+    variant !== 'default' ? `portal__container--${variant}` ,
+    position ? `portal__container--${position}` ,
+    zIndex ? `portal__container--${zIndex}` ,
+    debug ? 'portal__container--debug' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return createPortal(
+    <div className={containerClasses} style={style}>
+      <div className="portal__content">
+        {children}
+      </div>
+    </div>,
+    targetContainer
+  );
+};
+
+export default Portal;

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

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { PortalProps } from './types';
+
+export const Portal= ({
+  children,
+  container,
+  className = '',
+  style = {},
+  onMount,
+  onUnmount,
+  variant = 'default',
+  position = 'fixed',
+  zIndex = 'modal',
+  debug = false
+}) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    
+    if (onMount) {
+      onMount();
+    }
+
+    return () => {
+      if (onUnmount) {
+        onUnmount();
+      }
+    };
+  }, [onMount, onUnmount]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  // Determine the container to render into
+  let targetContainer= null;
+  
+  if (container) {
+    if (typeof container === 'function') {
+      targetContainer = container();
+    } else {
+      targetContainer = container;
+    }
+  }
+
+  // Fallback to document.body if no container specified
+  if (!targetContainer) {
+    targetContainer = document.body;
+  }
+
+  // Ensure the container exists
+  if (!targetContainer) {
+    console.warn('Portal);
+    return null;
+  }
+
+  // Build container classes
+  const containerClasses = [
+    'portal__container',
+    variant !== 'default' ? `portal__container--${variant}` ,
+    position ? `portal__container--${position}` ,
+    zIndex ? `portal__container--${zIndex}` ,
+    debug ? 'portal__container--debug' ,
+    className
+  ].filter(Boolean).join(' ');
+
+  return createPortal(
+    <div className={containerClasses} style={style}>
+      <div className="portal__content">
+        {children}
+      </div>
+    </div>,
+    targetContainer
+  );
+};
+
+export default Portal;