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

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

@@ -5,18 +5,18 @@ import { TooltipProps, TooltipContentProps } from './types';
 
 // Default color fallbacks
 const getDefaultColors = () => ({
-  surface, surface, border},
-  text, secondary, inverse},
-  interactive, focus},
-  primary}
+  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,
-  tooltipRect,
-  position] = 'top',
-  offset= 8
+  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;
@@ -29,40 +29,52 @@ const calculatePosition = (
   const triggerCenterY = triggerRect.top + triggerRect.height / 2;
   
   switch (position) {
-    case 'top'= triggerRect.top - tooltipRect.height - offset;
+    case 'top':
+      top = triggerRect.top - tooltipRect.height - offset;
       left = triggerCenterX - tooltipRect.width / 2;
       break;
-    case 'top-start'= triggerRect.top - tooltipRect.height - offset;
+    case 'top-start':
+      top = triggerRect.top - tooltipRect.height - offset;
       left = triggerRect.left;
       break;
-    case 'top-end'= triggerRect.top - tooltipRect.height - offset;
+    case 'top-end':
+      top = triggerRect.top - tooltipRect.height - offset;
       left = triggerRect.right - tooltipRect.width;
       break;
-    case 'bottom'= triggerRect.bottom + offset;
+    case 'bottom':
+      top = triggerRect.bottom + offset;
       left = triggerCenterX - tooltipRect.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 - tooltipRect.width;
       break;
-    case 'left'= triggerCenterY - tooltipRect.height / 2;
+    case 'left':
+      top = triggerCenterY - tooltipRect.height / 2;
       left = triggerRect.left - tooltipRect.width - offset;
       break;
-    case 'left-start'= triggerRect.top;
+    case 'left-start':
+      top = triggerRect.top;
       left = triggerRect.left - tooltipRect.width - offset;
       break;
-    case 'left-end'= triggerRect.bottom - tooltipRect.height;
+    case 'left-end':
+      top = triggerRect.bottom - tooltipRect.height;
       left = triggerRect.left - tooltipRect.width - offset;
       break;
-    case 'right'= triggerCenterY - tooltipRect.height / 2;
+    case 'right':
+      top = triggerCenterY - tooltipRect.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 - tooltipRect.height;
+    case 'right-end':
+      top = triggerRect.bottom - tooltipRect.height;
       left = triggerRect.right + offset;
       break;
   }
@@ -86,13 +98,15 @@ const calculatePosition = (
   }
   
   return {
-    top,
-    left};
+    top: top + scrollY,
+    left: left + scrollX
+  };
 };
 
 // Arrow component for tooltips
-const TooltipArrow];
-  className?;
+const TooltipArrow: React.FC<{
+  position: TooltipProps['position'];
+  className?: string;
 }> = ({ className = '' }) => {
   return (
     <div className={`tooltip__arrow ${className}`} />
@@ -100,7 +114,7 @@ const TooltipArrow];
 };
 
 // Tooltip Content Component
-export const TooltipContent= ({
+export const TooltipContent: React.FC<TooltipContentProps> = ({
   children,
   className = '',
   style = {}
@@ -113,12 +127,12 @@ export const TooltipContent= ({
 };
 
 // Main Tooltip Component
-export const Tooltip= ({
+export const Tooltip: React.FC<TooltipProps> = ({
   content,
   children,
   position = 'top',
   trigger = 'hover',
-  isOpen,
+  isOpen: controlledIsOpen,
   onOpenChange,
   delay = 200,
   offset = 8,
@@ -136,7 +150,7 @@ export const Tooltip= ({
   const colors = themeConfig?.colors || getDefaultColors();
   
   const [internalIsOpen, setInternalIsOpen] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState({ top, left});
+  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
   
   const triggerRef = useRef<HTMLElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
@@ -145,7 +159,7 @@ export const Tooltip= ({
   const isOpen = controlledIsOpen ?? internalIsOpen;
   
   // Handle open/close state changes
-  const handleOpenChange = useCallback((open) => {
+  const handleOpenChange = useCallback((open: boolean) => {
     if (controlledIsOpen === undefined) {
       setInternalIsOpen(open);
     }
@@ -217,9 +231,9 @@ export const Tooltip= ({
   const getContentClasses = () => {
     const classes = [
       'tooltip__content',
-      size ? `tooltip__content--size-${size}` ,
-      variant ? `tooltip__content--variant-${variant}` ,
-      position ? `tooltip__content--position-${position}` ,
+      size ? `tooltip__content--size-${size}` : '',
+      variant ? `tooltip__content--variant-${variant}` : '',
+      position ? `tooltip__content--position-${position}` : '',
       className
     ];
 
@@ -233,7 +247,7 @@ export const Tooltip= ({
 
   // Create trigger event handlers
   const getTriggerProps = () => {
-    const props= {};
+    const props: any = {};
     
     if (trigger === 'hover') {
       props.onMouseEnter = showTooltip;
@@ -251,8 +265,8 @@ export const Tooltip= ({
   // Clone trigger element with event handlers
   const triggerElement = cloneElement(children, {
     ...getTriggerProps(),
-    ref,
-    className}`
+    ref: triggerRef,
+    className: `tooltip__trigger ${children.props.className || ''}`
   });
 
   return (
@@ -267,11 +281,12 @@ export const Tooltip= ({
             className={getContentClasses()}
             style={{
               ...tooltipPosition,
-              maxWidth=== 'number' ? `${maxWidth}px` ,
+              maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
               zIndex,
-              backgroundColor,
-              color,
-              borderColor}}
+              backgroundColor: colors.surface.background,
+              color: colors.text.primary,
+              borderColor: colors.surface.border
+            }}
           >
             {content}
 

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

@@ -2,194 +2,195 @@ import React from 'react';
 
 // Base overlay properties
 export interface OverlayBaseProps {
-  className?;
-  theme?;
-  onClose?) => void;
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
+  onClose?: () => void;
 }
 
 // Portal Component Types
 export interface PortalProps {
-  children;
-  container?) => Element | null);
-  className?;
-  style?;
-  variant?;
-  position?;
-  zIndex?;
-  debug?;
-  onMount?) => void;
-  onUnmount?) => void;
+  children: React.ReactNode;
+  container?: Element | (() => Element | null);
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: 'default' | 'modal' | 'popover' | 'tooltip' | 'toast' | 'dropdown';
+  position?: 'fixed' | 'absolute' | 'relative';
+  zIndex?: 'modal' | 'popover' | 'tooltip' | 'toast' | 'dropdown';
+  debug?: boolean;
+  onMount?: () => void;
+  onUnmount?: () => void;
 }
 
 // Overlay Manager Types
 export interface OverlayState {
-  id;
-  zIndex;
+  id: string;
+  zIndex: number;
 }
 
 export interface OverlayAction {
-  type;
-  payload;
-    zIndex?;
+  type: 'ADD_OVERLAY' | 'REMOVE_OVERLAY' | 'UPDATE_Z_INDEX';
+  payload: {
+    id: string;
+    zIndex?: number;
   };
 }
 
 export interface OverlayManagerProps {
-  children;
-  baseZIndex?;
-  maxOverlays?;
-  onOverlayChange?]) => void;
+  children: React.ReactNode;
+  baseZIndex?: number;
+  maxOverlays?: number;
+  onOverlayChange?: (overlays: OverlayState[]) => void;
 }
 
 // Focus Manager Types
 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;
 }
 
 // Backdrop Types
 export interface BackdropProps {
-  isVisible;
-  onClick?) => void;
-  className?;
-  theme?;
-  blur?;
-  opacity?;
-  zIndex?;
-  children?;
+  isVisible: boolean;
+  onClick?: () => void;
+  className?: string;
+  theme?: 'stan-design' | 'harvey';
+  blur?: boolean;
+  opacity?: number;
+  zIndex?: number;
+  children?: React.ReactNode;
 }
 
 // Modal Component Types
 export interface ModalProps extends OverlayBaseProps {
-  isOpen;
-  onClose) => void;
-  title?;
-  children;
-  size?;
-  variant?;
-  closeOnOverlayClick?;
-  closeOnEscape?;
-  showBackdrop?;
-  backdropBlur?;
-  backdropOpacity?;
-  trapFocus?;
-  restoreFocus?;
-  initialFocus?;
-  zIndex?;
-  animation?;
-  duration?;
-  loading?;
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  variant?: 'default' | 'borderless' | 'elevated' | 'centered';
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  showBackdrop?: boolean;
+  backdropBlur?: boolean;
+  backdropOpacity?: number;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
+  initialFocus?: React.RefObject<HTMLElement>;
+  zIndex?: number;
+  animation?: 'fade' | 'slide' | 'scale' | 'none';
+  duration?: number;
+  loading?: boolean;
 }
 
 export interface ModalHeaderProps {
-  title?;
-  subtitle?;
-  onClose?) => void;
-  showCloseButton?;
-  closeButtonLabel?;
-  className?;
-  borderless?;
-  noPadding?;
-  children?;
+  title?: string;
+  subtitle?: string;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  closeButtonLabel?: string;
+  className?: string;
+  borderless?: boolean;
+  noPadding?: boolean;
+  children?: React.ReactNode;
 }
 
 export interface ModalBodyProps {
-  children;
-  className?;
-  padding?;
-  scrollable?;
-  maxHeight?;
+  children: React.ReactNode;
+  className?: string;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  scrollable?: boolean;
+  maxHeight?: string | number;
 }
 
 export interface ModalFooterProps {
-  children;
-  className?;
-  justify?;
-  padding?;
-  borderTop?;
+  children: React.ReactNode;
+  className?: string;
+  justify?: 'start' | 'center' | 'end' | 'between';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  borderTop?: boolean;
 }
 
 // Tooltip Component Types
 export interface TooltipProps extends OverlayBaseProps {
-  content;
-  children;
-  position?;
-  trigger?;
-  isOpen?;
-  onOpenChange?) => void;
-  delay?;
-  offset?;
-  size?;
-  variant?;
-  showArrow?;
-  maxWidth?;
-  zIndex?;
-  animation?;
-  duration?;
+  content: React.ReactNode;
+  children: React.ReactElement;
+  position?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+  trigger?: 'hover' | 'click' | 'focus' | 'manual';
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  delay?: number;
+  offset?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'filled' | 'outlined';
+  showArrow?: boolean;
+  maxWidth?: string | number;
+  zIndex?: number;
+  animation?: 'fade' | 'slide' | 'scale' | 'none';
+  duration?: number;
 }
 
 export interface TooltipContentProps {
-  children;
-  className?;
-  style?;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 // Popover Component Types
 export interface PopoverProps extends OverlayBaseProps {
-  trigger;
-  children;
-  isOpen?;
-  onOpenChange?) => void;
-  position?;
-  triggerType?;
-  delay?;
-  offset?;
-  size?;
-  variant?;
-  showArrow?;
-  maxWidth?;
-  zIndex?;
-  animation?;
-  duration?;
-  closeOnBlur?;
-  closeOnEscape?;
+  trigger: React.ReactElement;
+  children: React.ReactNode;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  position?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+  triggerType?: 'hover' | 'click' | 'focus' | 'manual';
+  delay?: number;
+  offset?: number;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'filled' | 'outlined';
+  showArrow?: boolean;
+  maxWidth?: string | number;
+  zIndex?: number;
+  animation?: 'fade' | 'slide' | 'scale' | 'none';
+  duration?: number;
+  closeOnBlur?: boolean;
+  closeOnEscape?: boolean;
 }
 
 export interface PopoverContentProps {
-  children;
-  className?;
-  style?;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export interface PopoverHeaderProps {
-  title?;
-  subtitle?;
-  onClose?) => void;
-  showCloseButton?;
-  closeButtonLabel?;
-  className?;
-  borderless?;
-  noPadding?;
-  children?;
+  title?: string;
+  subtitle?: string;
+  onClose?: () => void;
+  showCloseButton?: boolean;
+  closeButtonLabel?: string;
+  className?: string;
+  borderless?: boolean;
+  noPadding?: boolean;
+  children?: React.ReactNode;
 }
 
 export interface PopoverBodyProps {
-  children;
-  className?;
-  padding?;
-  scrollable?;
-  maxHeight?;
+  children: React.ReactNode;
+  className?: string;
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  scrollable?: boolean;
+  maxHeight?: string | number;
 }
 
 export interface PopoverFooterProps {
-  children;
-  className?;
-  justify?;
-  padding?;
-  borderTop?;
+  children: React.ReactNode;
+  className?: string;
+  justify?: 'start' | 'center' | 'end' | 'between';
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  borderTop?: boolean;
 }