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

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

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { PortalProps } from './types';
 
-export const Portal= ({
+export const Portal: React.FC<PortalProps> = ({
   children,
   container,
   className = '',
@@ -35,7 +35,7 @@ export const Portal= ({
   }
 
   // Determine the container to render into
-  let targetContainer= null;
+  let targetContainer: Element | null = null;
   
   if (container) {
     if (typeof container === 'function') {
@@ -52,17 +52,17 @@ export const Portal= ({
 
   // Ensure the container exists
   if (!targetContainer) {
-    console.warn('Portal);
+    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' ,
+    variant !== 'default' ? `portal__container--${variant}` : '',
+    position ? `portal__container--${position}` : '',
+    zIndex ? `portal__container--${zIndex}` : '',
+    debug ? 'portal__container--debug' : '',
     className
   ].filter(Boolean).join(' ');
 

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

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { PortalProps } from './types';
 
-export const Portal= ({
+export const Portal: React.FC<PortalProps> = ({
   children,
   container,
   className = '',
@@ -35,7 +35,7 @@ export const Portal= ({
   }
 
   // Determine the container to render into
-  let targetContainer= null;
+  let targetContainer: Element | null = null;
   
   if (container) {
     if (typeof container === 'function') {
@@ -52,17 +52,17 @@ export const Portal= ({
 
   // Ensure the container exists
   if (!targetContainer) {
-    console.warn('Portal);
+    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' ,
+    variant !== 'default' ? `portal__container--${variant}` : '',
+    position ? `portal__container--${position}` : '',
+    zIndex ? `portal__container--${zIndex}` : '',
+    debug ? 'portal__container--debug' : '',
     className
   ].filter(Boolean).join(' ');
 

package/dist/components/ui/overlay/tooltip.esm.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}