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

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

@@ -0,0 +1,298 @@
+// Default color fallbacks
+const getDefaultColors = () => ({
+  surface: { background: '#1f2937', surface: '#374151', border: '#4b5563' },
+  text: { primary: '#ffffff', secondary: '#d1d5db', inverse: '#111827' },
+  interactive: { hover: '#4b5563', focus: '#3b82f6' },
+  primary: { 500: '#3b82f6' }
+});
+
+// Position calculations utility
+const calculatePosition = (
+  triggerRect: DOMRect,
+  tooltipRect: DOMRect,
+  position: TooltipProps['position'] = 'top',
+  offset: number = 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':
+      top = triggerRect.top - tooltipRect.height - offset;
+      left = triggerCenterX - tooltipRect.width / 2;
+      break;
+    case 'top-start':
+      top = triggerRect.top - tooltipRect.height - offset;
+      left = triggerRect.left;
+      break;
+    case 'top-end':
+      top = triggerRect.top - tooltipRect.height - offset;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case 'bottom':
+      top = triggerRect.bottom + offset;
+      left = triggerCenterX - tooltipRect.width / 2;
+      break;
+    case 'bottom-start':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.left;
+      break;
+    case 'bottom-end':
+      top = triggerRect.bottom + offset;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case 'left':
+      top = triggerCenterY - tooltipRect.height / 2;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'left-start':
+      top = triggerRect.top;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'left-end':
+      top = triggerRect.bottom - tooltipRect.height;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'right':
+      top = triggerCenterY - tooltipRect.height / 2;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-start':
+      top = triggerRect.top;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-end':
+      top = triggerRect.bottom - tooltipRect.height;
+      left = triggerRect.right + offset;
+      break;
+  }
+
+  // Adjust for viewport boundaries
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  // Horizontal boundary checks
+  if (left < 0) {
+    left = offset;
+  } else if (left + tooltipRect.width > viewportWidth) {
+    left = viewportWidth - tooltipRect.width - offset;
+  }
+
+  // Vertical boundary checks
+  if (top < 0) {
+    top = offset;
+  } else if (top + tooltipRect.height > viewportHeight) {
+    top = viewportHeight - tooltipRect.height - offset;
+  }
+
+  return {
+    top: top + scrollY,
+    left: left + scrollX
+  };
+};
+
+// Arrow component for tooltips
+const TooltipArrow: React.FC<{
+  position: TooltipProps['position'];
+  className?: string;
+}> = ({ className = '' }) => {
+  return (
+    <div className={`tooltip__arrow ${className}`} />
+  );
+};
+
+// Tooltip Content Component
+export const TooltipContent: React.FC<TooltipContentProps> = ({
+  children,
+  className = '',
+  style = {}
+}) => {
+  return (
+    <div className={`tooltip__content ${className}`} style={style}>
+      {children}
+    </div>
+  );
+};
+
+// Main Tooltip Component
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  children,
+  position = 'top',
+  trigger = 'hover',
+  isOpen: controlledIsOpen,
+  onOpenChange,
+  delay = 200,
+  offset = 8,
+  size = 'md',
+  variant = 'default',
+  showArrow = true,
+  maxWidth = 320,
+  zIndex = 1000,
+  animation = 'fade',
+  className = '',
+  theme = 'stan-design'
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
+
+  const triggerRef = useRef<HTMLElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const isOpen = controlledIsOpen ?? internalIsOpen;
+
+  // Handle open/close state changes
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (controlledIsOpen === undefined) {
+      setInternalIsOpen(open);
+    }
+    onOpenChange?.(open);
+  }, [controlledIsOpen, onOpenChange]);
+
+  // Show tooltip with delay
+  const showTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        handleOpenChange(true);
+      }, delay);
+    } else {
+      handleOpenChange(true);
+    }
+  }, [delay, handleOpenChange]);
+
+  // Hide tooltip
+  const hideTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  // Position calculation
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current || !isOpen) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+
+    const newPosition = calculatePosition(triggerRect, tooltipRect, position, offset);
+    setTooltipPosition(newPosition);
+  }, [isOpen, position, offset]);
+
+  // Update position when tooltip opens or on scroll/resize
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+
+      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 tooltip content classes
+  const getContentClasses = () => {
+    const classes = [
+      'tooltip__content',
+      size ? `tooltip__content--size-${size}` : '',
+      variant ? `tooltip__content--variant-${variant}` : '',
+      position ? `tooltip__content--position-${position}` : '',
+      className
+    ];
+
+    // Add animation class
+    if (animation !== 'none' && isOpen) {
+      classes.push(`tooltip__content--${animation}-enter`);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  // Create trigger event handlers
+  const getTriggerProps = () => {
+    const props: any = {};
+
+    if (trigger === 'hover') {
+      props.onMouseEnter = showTooltip;
+      props.onMouseLeave = hideTooltip;
+    } else if (trigger === 'click') {
+      props.onClick = () => handleOpenChange(!isOpen);
+    } else if (trigger === 'focus') {
+      props.onFocus = showTooltip;
+      props.onBlur = hideTooltip;
+    }
+
+    return props;
+  };
+
+  // Clone trigger element with event handlers
+  const triggerElement = cloneElement(children, {
+    ...getTriggerProps(),
+    ref: triggerRef,
+    className: `tooltip__trigger ${children.props.className || ''}`
+  });
+
+  return (
+    <>
+      {triggerElement}
+
+      {isOpen && (
+        <Portal>
+          <div
+            ref={tooltipRef}
+            role="tooltip"
+            className={getContentClasses()}
+            style={{
+              ...tooltipPosition,
+              maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
+              zIndex,
+              backgroundColor: colors.surface.background,
+              color: colors.text.primary,
+              borderColor: colors.surface.border
+            }}
+          >
+            {content}
+
+            {showArrow && (
+              <TooltipArrow position={position} />
+            )}
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default Tooltip;

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

@@ -0,0 +1,288 @@
+import React, { useState, useRef, useEffect, useCallback, cloneElement } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { Portal } from './portal';
+import { TooltipProps, TooltipContentProps } from './types';
+
+// Default color fallbacks
+const getDefaultColors = () => ({
+  surface, surface, border},
+  text, secondary, inverse},
+  interactive, focus},
+  primary}
+});
+
+// Position calculations utility
+const calculatePosition = (
+  triggerRect,
+  tooltipRect,
+  position] = 'top',
+  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 - tooltipRect.height - offset;
+      left = triggerCenterX - tooltipRect.width / 2;
+      break;
+    case 'top-start'= triggerRect.top - tooltipRect.height - offset;
+      left = triggerRect.left;
+      break;
+    case 'top-end'= triggerRect.top - tooltipRect.height - offset;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case 'bottom'= triggerRect.bottom + offset;
+      left = triggerCenterX - tooltipRect.width / 2;
+      break;
+    case 'bottom-start'= triggerRect.bottom + offset;
+      left = triggerRect.left;
+      break;
+    case 'bottom-end'= triggerRect.bottom + offset;
+      left = triggerRect.right - tooltipRect.width;
+      break;
+    case 'left'= triggerCenterY - tooltipRect.height / 2;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'left-start'= triggerRect.top;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'left-end'= triggerRect.bottom - tooltipRect.height;
+      left = triggerRect.left - tooltipRect.width - offset;
+      break;
+    case 'right'= triggerCenterY - tooltipRect.height / 2;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-start'= triggerRect.top;
+      left = triggerRect.right + offset;
+      break;
+    case 'right-end'= triggerRect.bottom - tooltipRect.height;
+      left = triggerRect.right + offset;
+      break;
+  }
+  
+  // Adjust for viewport boundaries
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  
+  // Horizontal boundary checks
+  if (left < 0) {
+    left = offset;
+  } else if (left + tooltipRect.width > viewportWidth) {
+    left = viewportWidth - tooltipRect.width - offset;
+  }
+  
+  // Vertical boundary checks
+  if (top < 0) {
+    top = offset;
+  } else if (top + tooltipRect.height > viewportHeight) {
+    top = viewportHeight - tooltipRect.height - offset;
+  }
+  
+  return {
+    top,
+    left};
+};
+
+// Arrow component for tooltips
+const TooltipArrow];
+  className?;
+}> = ({ className = '' }) => {
+  return (
+    <div className={`tooltip__arrow ${className}`} />
+  );
+};
+
+// Tooltip Content Component
+export const TooltipContent= ({
+  children,
+  className = '',
+  style = {}
+}) => {
+  return (
+    <div className={`tooltip__content ${className}`} style={style}>
+      {children}
+    </div>
+  );
+};
+
+// Main Tooltip Component
+export const Tooltip= ({
+  content,
+  children,
+  position = 'top',
+  trigger = 'hover',
+  isOpen,
+  onOpenChange,
+  delay = 200,
+  offset = 8,
+  size = 'md',
+  variant = 'default',
+  showArrow = true,
+  maxWidth = 320,
+  zIndex = 1000,
+  animation = 'fade',
+  className = '',
+  theme = 'stan-design'
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ top, left});
+  
+  const triggerRef = useRef<HTMLElement>(null);
+  const tooltipRef = 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 tooltip with delay
+  const showTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        handleOpenChange(true);
+      }, delay);
+    } else {
+      handleOpenChange(true);
+    }
+  }, [delay, handleOpenChange]);
+
+  // Hide tooltip
+  const hideTooltip = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    handleOpenChange(false);
+  }, [handleOpenChange]);
+
+  // Position calculation
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !tooltipRef.current || !isOpen) return;
+    
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    
+    const newPosition = calculatePosition(triggerRect, tooltipRect, position, offset);
+    setTooltipPosition(newPosition);
+  }, [isOpen, position, offset]);
+
+  // Update position when tooltip opens or on scroll/resize
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition();
+      
+      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 tooltip content classes
+  const getContentClasses = () => {
+    const classes = [
+      'tooltip__content',
+      size ? `tooltip__content--size-${size}` ,
+      variant ? `tooltip__content--variant-${variant}` ,
+      position ? `tooltip__content--position-${position}` ,
+      className
+    ];
+
+    // Add animation class
+    if (animation !== 'none' && isOpen) {
+      classes.push(`tooltip__content--${animation}-enter`);
+    }
+
+    return classes.filter(Boolean).join(' ');
+  };
+
+  // Create trigger event handlers
+  const getTriggerProps = () => {
+    const props= {};
+    
+    if (trigger === 'hover') {
+      props.onMouseEnter = showTooltip;
+      props.onMouseLeave = hideTooltip;
+    } else if (trigger === 'click') {
+      props.onClick = () => handleOpenChange(!isOpen);
+    } else if (trigger === 'focus') {
+      props.onFocus = showTooltip;
+      props.onBlur = hideTooltip;
+    }
+    
+    return props;
+  };
+
+  // Clone trigger element with event handlers
+  const triggerElement = cloneElement(children, {
+    ...getTriggerProps(),
+    ref,
+    className}`
+  });
+
+  return (
+    <>
+      {triggerElement}
+      
+      {isOpen && (
+        <Portal>
+          <div
+            ref={tooltipRef}
+            role="tooltip"
+            className={getContentClasses()}
+            style={{
+              ...tooltipPosition,
+              maxWidth=== 'number' ? `${maxWidth}px` ,
+              zIndex,
+              backgroundColor,
+              color,
+              borderColor}}
+          >
+            {content}
+
+            {showArrow && (
+              <TooltipArrow position={position} />
+            )}
+          </div>
+        </Portal>
+      )}
+    </>
+  );
+};
+
+export default Tooltip;