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

package/dist/components/ui/overlay/focus-manager.js

@@ -1,143 +1,99 @@
-import React, { useEffect, useRef, useCallback } from 'react';
-
-export interface FocusManagerProps {
-  children: React.ReactNode;
-  isActive: boolean;
-  onFocusChange?: (focused: boolean) => void;
-  trapFocus?: boolean;
-  restoreFocus?: boolean;
-  initialFocus?: React.RefObject<HTMLElement>;
-  className?: string;
-}
-
-export const FocusManager: React.FC<FocusManagerProps> = ({
-  children,
-  isActive,
-  onFocusChange,
-  trapFocus = true,
-  restoreFocus = true,
-  initialFocus,
-  className = ''
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const previousActiveElement = useRef<HTMLElement | null>(null);
-  const focusableElements = useRef<HTMLElement[]>([]);
-
-  // Get all focusable elements within the container
-  const getFocusableElements = useCallback(() => {
-    if (!containerRef.current) return [];
-    
-    const selector = [
-      'button:not([disabled])',
-      'input:not([disabled])',
-      'select:not([disabled])',
-      'textarea:not([disabled])',
-      'a[href]',
-      '[tabindex]:not([tabindex="-1"])',
-      '[contenteditable="true"]'
-    ].join(', ');
-    
-    return Array.from(containerRef.current.querySelectorAll(selector)) as HTMLElement[];
-  }, []);
-
-  // Store the previously focused element
-  useEffect(() => {
-    if (isActive && restoreFocus) {
-      previousActiveElement.current = document.activeElement as HTMLElement;
-    }
-  }, [isActive, restoreFocus]);
-
-  // Focus management when overlay becomes active
-  useEffect(() => {
-    if (!isActive) return;
-
-    // Get focusable elements
-    focusableElements.current = getFocusableElements();
-    
-    if (focusableElements.current.length === 0) return;
-
-    // Set initial focus
-    if (initialFocus?.current) {
-      initialFocus.current.focus();
-    } else {
-      // Focus the first focusable element
-      focusableElements.current[0].focus();
-    }
-
-    onFocusChange?.(true);
-  }, [isActive, initialFocus, onFocusChange, getFocusableElements]);
-
-  // Restore focus when overlay becomes inactive
-  useEffect(() => {
-    if (!isActive && restoreFocus && previousActiveElement.current) {
-      // Use setTimeout to ensure the overlay is fully removed
-      setTimeout(() => {
-        if (previousActiveElement.current && document.contains(previousActiveElement.current)) {
-          previousActiveElement.current.focus();
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useCallback } from 'react';
+export const FocusManager = ({ children, isActive, onFocusChange, trapFocus = true, restoreFocus = true, initialFocus, className = '' }) => {
+    const containerRef = useRef(null);
+    const previousActiveElement = useRef(null);
+    const focusableElements = useRef([]);
+    // Get all focusable elements within the container
+    const getFocusableElements = useCallback(() => {
+        if (!containerRef.current)
+            return [];
+        const selector = [
+            'button:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            'textarea:not([disabled])',
+            'a[href]',
+            '[tabindex]:not([tabindex="-1"])',
+            '[contenteditable="true"]'
+        ].join(', ');
+        return Array.from(containerRef.current.querySelectorAll(selector));
+    }, []);
+    // Store the previously focused element
+    useEffect(() => {
+        if (isActive && restoreFocus) {
+            previousActiveElement.current = document.activeElement;
         }
-      }, 0);
-      
-      onFocusChange?.(false);
-    }
-  }, [isActive, restoreFocus, onFocusChange]);
-
-  // Handle keyboard navigation for focus trapping
-  const handleKeyDown = useCallback((event: KeyboardEvent) => {
-    if (!isActive || !trapFocus || focusableElements.current.length === 0) return;
-
-    const { key, shiftKey } = event;
-    
-    if (key === 'Tab') {
-      event.preventDefault();
-      
-      const currentIndex = focusableElements.current.findIndex(
-        el => el === document.activeElement
-      );
-      
-      let nextIndex: number;
-      
-      if (shiftKey) {
-        // Shift + Tab: move backward
-        nextIndex = currentIndex <= 0 
-          ? focusableElements.current.length - 1 
-          : currentIndex - 1;
-      } else {
-        // Tab: move forward
-        nextIndex = currentIndex >= focusableElements.current.length - 1 
-          ? 0 
-          : currentIndex + 1;
-      }
-      
-      focusableElements.current[nextIndex]?.focus();
-    }
-  }, [isActive, trapFocus]);
-
-  // Add/remove keyboard event listeners
-  useEffect(() => {
-    if (isActive && trapFocus) {
-      document.addEventListener('keydown', handleKeyDown);
-      return () => {
-        document.removeEventListener('keydown', handleKeyDown);
-      };
-    }
-  }, [isActive, trapFocus, handleKeyDown]);
-
-  // Update focusable elements when children change
-  useEffect(() => {
-    if (isActive) {
-      focusableElements.current = getFocusableElements();
-    }
-  }, [isActive, getFocusableElements]);
-
-  return (
-    <div 
-      ref={containerRef}
-      className={`focus-manager ${className}`}
-      tabIndex={-1} // Make container focusable for focus management
-    >
-      {children}
-    </div>
-  );
+    }, [isActive, restoreFocus]);
+    // Focus management when overlay becomes active
+    useEffect(() => {
+        if (!isActive)
+            return;
+        // Get focusable elements
+        focusableElements.current = getFocusableElements();
+        if (focusableElements.current.length === 0)
+            return;
+        // Set initial focus
+        if (initialFocus?.current) {
+            initialFocus.current.focus();
+        }
+        else {
+            // Focus the first focusable element
+            focusableElements.current[0].focus();
+        }
+        onFocusChange?.(true);
+    }, [isActive, initialFocus, onFocusChange, getFocusableElements]);
+    // Restore focus when overlay becomes inactive
+    useEffect(() => {
+        if (!isActive && restoreFocus && previousActiveElement.current) {
+            // Use setTimeout to ensure the overlay is fully removed
+            setTimeout(() => {
+                if (previousActiveElement.current && document.contains(previousActiveElement.current)) {
+                    previousActiveElement.current.focus();
+                }
+            }, 0);
+            onFocusChange?.(false);
+        }
+    }, [isActive, restoreFocus, onFocusChange]);
+    // Handle keyboard navigation for focus trapping
+    const handleKeyDown = useCallback((event) => {
+        if (!isActive || !trapFocus || focusableElements.current.length === 0)
+            return;
+        const { key, shiftKey } = event;
+        if (key === 'Tab') {
+            event.preventDefault();
+            const currentIndex = focusableElements.current.findIndex(el => el === document.activeElement);
+            let nextIndex;
+            if (shiftKey) {
+                // Shift + Tab: move backward
+                nextIndex = currentIndex <= 0
+                    ? focusableElements.current.length - 1
+                    : currentIndex - 1;
+            }
+            else {
+                // Tab: move forward
+                nextIndex = currentIndex >= focusableElements.current.length - 1
+                    ? 0
+                    : currentIndex + 1;
+            }
+            focusableElements.current[nextIndex]?.focus();
+        }
+    }, [isActive, trapFocus]);
+    // Add/remove keyboard event listeners
+    useEffect(() => {
+        if (isActive && trapFocus) {
+            document.addEventListener('keydown', handleKeyDown);
+            return () => {
+                document.removeEventListener('keydown', handleKeyDown);
+            };
+        }
+    }, [isActive, trapFocus, handleKeyDown]);
+    // Update focusable elements when children change
+    useEffect(() => {
+        if (isActive) {
+            focusableElements.current = getFocusableElements();
+        }
+    }, [isActive, getFocusableElements]);
+    return (_jsx("div", { ref: containerRef, className: `focus-manager ${className}`, tabIndex: -1, children: children }));
 };
-
 export default FocusManager;

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

@@ -1,27 +1,10 @@
-// Overlay Architecture Components
-// Overlay Components
-// Types
-export type {
-  PortalProps,
-  OverlayManagerProps,
-  OverlayState,
-  OverlayAction,
-  FocusManagerProps,
-  BackdropProps
-} from './types';
-
-// Re-export types from the main types file
-export type {
-  OverlayBaseProps,
-  ModalProps,
-  ModalHeaderProps,
-  ModalBodyProps,
-  ModalFooterProps,
-  TooltipProps,
-  TooltipContentProps,
-  PopoverProps,
-  PopoverContentProps,
-  PopoverHeaderProps,
-  PopoverBodyProps,
-  PopoverFooterProps
-} from './types';
+export { Portal } from './portal';
+export { OverlayProvider, OverlayManager, useOverlayManager } from './overlay-manager';
+export { FocusManager } from './focus-manager';
+export { Backdrop } from './backdrop';
+export { Modal, ModalHeader, ModalBody, ModalFooter } from './modal';
+export { Tooltip, TooltipContent } from './tooltip';
+export { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter } from './popover';
+export type { PortalProps, OverlayManagerProps, OverlayState, OverlayAction, FocusManagerProps, BackdropProps } from './types';
+export type { OverlayBaseProps, ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps, TooltipProps, TooltipContentProps, PopoverProps, PopoverContentProps, PopoverHeaderProps, PopoverBodyProps, PopoverFooterProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/overlay/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGtC,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAG/F,YAAY,EACV,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,aAAa,EACd,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,gBAAgB,EAChB,UAAU,EACV,gBAAgB,EAChB,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,SAAS,CAAC"}

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

@@ -3,12 +3,7 @@ export { Portal } from './portal';
 export { OverlayProvider, OverlayManager, useOverlayManager } from './overlay-manager';
 export { FocusManager } from './focus-manager';
 export { Backdrop } from './backdrop';
-
 // Overlay Components
 export { Modal, ModalHeader, ModalBody, ModalFooter } from './modal';
 export { Tooltip, TooltipContent } from './tooltip';
 export { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter } from './popover';
-
-// Types
-
-// Re-export types from the main types file

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

@@ -3,12 +3,7 @@ export { Portal } from './portal';
 export { OverlayProvider, OverlayManager, useOverlayManager } from './overlay-manager';
 export { FocusManager } from './focus-manager';
 export { Backdrop } from './backdrop';
-
 // Overlay Components
 export { Modal, ModalHeader, ModalBody, ModalFooter } from './modal';
 export { Tooltip, TooltipContent } from './tooltip';
 export { Popover, PopoverContent, PopoverHeader, PopoverBody, PopoverFooter } from './popover';
-
-// Types
-
-// Re-export types from the main types file

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

@@ -1,262 +1,8 @@
-// SVG Icons
-const XMarkIcon: React.FC<{ className?: string }> = ({ className = 'w-6 h-6' }) => (
-  <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: { 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' }
-});
-
-// Modal Header Component
-export const ModalHeader: React.FC<ModalHeaderProps> = ({
-  title,
-  subtitle,
-  onClose,
-  showCloseButton = true,
-  closeButtonLabel = 'Close',
-  className = '',
-  borderless = false,
-  noPadding = false,
-  children
-}) => {
-  const headerClasses = [
-    'modal__header',
-    borderless ? 'modal__header--borderless' : '',
-    noPadding ? 'modal__header--no-padding' : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div className={headerClasses}>
-      <div>
-        {title && (
-          <h2 className="modal__title">
-            {title}
-          </h2>
-        )}
-        {subtitle && (
-          <p className="modal__subtitle">
-            {subtitle}
-          </p>
-        )}
-        {children}
-      </div>
-
-      {showCloseButton && onClose && (
-        <button
-          type="button"
-          className="modal__close"
-          onClick={onClose}
-          aria-label={closeButtonLabel}
-        >
-          <XMarkIcon />
-        </button>
-      )}
-    </div>
-  );
-};
-
-// Modal Body Component
-export const ModalBody: React.FC<ModalBodyProps> = ({
-  children,
-  className = '',
-  padding = 'md',
-  scrollable = true,
-  maxHeight = '70vh'
-}) => {
-  const bodyClasses = [
-    'modal__body',
-    padding === 'none' ? 'modal__body--no-padding' : '',
-    padding === 'sm' ? 'modal__body--compact' : '',
-    padding === 'lg' ? 'modal__body--spacious' : '',
-    scrollable ? 'modal__body--scrollable' : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div
-      className={bodyClasses}
-      style={{ maxHeight: scrollable ? maxHeight : undefined }}
-    >
-      {children}
-    </div>
-  );
-};
-
-// Modal Footer Component
-export const ModalFooter: React.FC<ModalFooterProps> = ({
-  children,
-  className = '',
-  justify = 'end',
-  padding = 'md',
-  borderTop = true
-}) => {
-  const footerClasses = [
-    'modal__footer',
-    !borderTop ? 'modal__footer--borderless' : '',
-    padding === 'none' ? 'modal__footer--no-padding' : '',
-    justify === 'start' ? 'modal__footer--start' : '',
-    justify === 'center' ? 'modal__footer--center' : '',
-    justify === 'between' ? 'modal__footer--space-between' : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div className={footerClasses}>
-      {children}
-    </div>
-  );
-};
-
-// Main Modal Component
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  size = 'md',
-  variant = 'default',
-  closeOnOverlayClick = true,
-  closeOnEscape = true,
-  showBackdrop = true,
-  backdropBlur = false,
-  backdropOpacity = 0.5,
-  trapFocus = true,
-  restoreFocus = true,
-  initialFocus,
-  zIndex = 1000,
-  animation = 'fade',
-  className = '',
-  theme = 'stan-design',
-  loading = false
-}) => {
-  const { getTheme } = useTheme();
-  const themeConfig = getTheme(theme);
-  const colors = themeConfig?.colors || getDefaultColors();
-
-  const modalId = useId();
-  const modalRef = useRef<HTMLDivElement>(null);
-  const { addOverlay, removeOverlay, getTopZIndex } = useOverlayManager();
-
-  // Modal container classes
-  const getContainerClasses = () => {
-    const classes = [
-      'modal__container',
-      size ? `modal__container--size-${size}` : '',
-      variant ? `modal__container--variant-${variant}` : '',
-      loading ? 'modal__container--loading' : '',
-      className
-    ];
-
-    // Add animation class
-    if (animation !== 'none' && isOpen) {
-      classes.push(`modal__container--${animation}-enter`);
-    }
-
-    return classes.filter(Boolean).join(' ');
-  };
-
-  // Handle escape key
-  useEffect(() => {
-    if (!isOpen || !closeOnEscape) return;
-
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, closeOnEscape, onClose]);
-
-  // Manage overlay registration
-  useEffect(() => {
-    if (isOpen) {
-      const currentZIndex = zIndex || getTopZIndex();
-      addOverlay(modalId, currentZIndex);
-
-      return () => {
-        removeOverlay(modalId);
-      };
-    }
-  }, [isOpen, modalId, addOverlay, removeOverlay, zIndex, getTopZIndex]);
-
-  // Handle backdrop click
-  const handleBackdropClick = () => {
-    if (closeOnOverlayClick) {
-      onClose();
-    }
-  };
-
-  if (!isOpen) {
-    return null;
-  }
-
-  const modalStyle: React.CSSProperties = {
-    backgroundColor: colors.surface.background,
-    borderColor: colors.surface.border,
-    color: colors.text.primary,
-    zIndex: zIndex || getTopZIndex()
-  };
-
-  return (
-    <Portal>
-      {showBackdrop && (
-        <Backdrop
-          isVisible={isOpen}
-          onClick={handleBackdropClick}
-          blur={backdropBlur}
-          opacity={backdropOpacity}
-          zIndex={(zIndex || getTopZIndex()) - 1}
-        />
-      )}
-
-      <div className="modal__overlay" style={{ zIndex: zIndex || getTopZIndex() }}>
-        <FocusManager
-          isActive={isOpen}
-          trapFocus={trapFocus}
-          restoreFocus={restoreFocus}
-          initialFocus={initialFocus}
-        >
-          <div
-            ref={modalRef}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby={title ? `${modalId}-title` : undefined}
-            className={getContainerClasses()}
-            style={modalStyle}
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Render children or default layout */}
-            {React.Children.count(children) > 0 ? (
-              children
-            ) : (
-              <>
-                {title && (
-                  <ModalHeader
-                    title={title}
-                    onClose={onClose}
-                  />
-                )}
-                <ModalBody>
-                  {/* Default empty content */}
-                  <p>Modal content goes here...</p>
-                </ModalBody>
-              </>
-            )}
-          </div>
-        </FocusManager>
-      </div>
-    </Portal>
-  );
-};
-
+import React from 'react';
+import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types';
+export declare const ModalHeader: React.FC<ModalHeaderProps>;
+export declare const ModalBody: React.FC<ModalBodyProps>;
+export declare const ModalFooter: React.FC<ModalFooterProps>;
+export declare const Modal: React.FC<ModalProps>;
 export default Modal;
+//# sourceMappingURL=modal.d.ts.map

package/dist/components/ui/overlay/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/overlay/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAMxD,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAmBzF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8ClD,CAAC;AAGF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsBlD,CAAC;AAGF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA6ItC,CAAC;AAEF,eAAe,KAAK,CAAC"}