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

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

@@ -1,81 +1,42 @@
-import React from 'react';
-
-export interface BackdropProps {
-  isVisible: boolean;
-  onClick?: () => void;
-  className?: string;
-  blur?: boolean;
-  opacity?: number;
-  zIndex?: number;
-  children?: React.ReactNode;
-  theme?: 'light' | 'dark' | 'primary' | 'success' | 'warning' | 'error';
-  animation?: boolean;
-}
-
-export const Backdrop: React.FC<BackdropProps> = ({
-  isVisible,
-  onClick,
-  className = '',
-  blur = false,
-  opacity = 0.5,
-  zIndex = 1000,
-  children,
-  theme = 'dark',
-  animation = true
-}) => {
-  if (!isVisible) {
-    return null;
-  }
-
-  const handleClick = (event: React.MouseEvent) => {
-    // Only trigger onClick if clicking directly on the backdrop
-    if (event.target === event.currentTarget && onClick) {
-      onClick();
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Backdrop = ({ isVisible, onClick, className = '', blur = false, opacity = 0.5, zIndex = 1000, children, theme = 'dark', animation = true }) => {
+    if (!isVisible) {
+        return null;
     }
-  };
-
-  // Convert opacity to nearest 10% for CSS class
-  const getOpacityClass = () => {
-    const rounded = Math.round(opacity * 10) * 10;
-    return `backdrop__container--opacity-${rounded}`;
-  };
-
-  const getZIndexClass = () => {
-    if (zIndex >= 1040) return 'backdrop__container--z-toast';
-    if (zIndex >= 1030) return 'backdrop__container--z-tooltip';
-    if (zIndex >= 1020) return 'backdrop__container--z-popover';
-    if (zIndex >= 1010) return 'backdrop__container--z-dropdown';
-    return 'backdrop__container--z-modal';
-  };
-
-  const containerClasses = [
-    'backdrop__container',
-    blur ? 'backdrop__container--blur' : '',
-    theme ? `backdrop__container--theme-${theme}` : '',
-    getOpacityClass(),
-    getZIndexClass(),
-    animation ? 'backdrop__container--enter' : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div
-      className={containerClasses}
-      style={{
-        '--backdrop-z-index': zIndex,
-        '--backdrop-opacity': opacity
-      } as React.CSSProperties}
-      onClick={handleClick}
-      role="presentation"
-      aria-hidden="true"
-    >
-      {children && (
-        <div className="backdrop__content">
-          {children}
-        </div>
-      )}
-    </div>
-  );
+    const handleClick = (event) => {
+        // Only trigger onClick if clicking directly on the backdrop
+        if (event.target === event.currentTarget && onClick) {
+            onClick();
+        }
+    };
+    // Convert opacity to nearest 10% for CSS class
+    const getOpacityClass = () => {
+        const rounded = Math.round(opacity * 10) * 10;
+        return `backdrop__container--opacity-${rounded}`;
+    };
+    const getZIndexClass = () => {
+        if (zIndex >= 1040)
+            return 'backdrop__container--z-toast';
+        if (zIndex >= 1030)
+            return 'backdrop__container--z-tooltip';
+        if (zIndex >= 1020)
+            return 'backdrop__container--z-popover';
+        if (zIndex >= 1010)
+            return 'backdrop__container--z-dropdown';
+        return 'backdrop__container--z-modal';
+    };
+    const containerClasses = [
+        'backdrop__container',
+        blur ? 'backdrop__container--blur' : '',
+        theme ? `backdrop__container--theme-${theme}` : '',
+        getOpacityClass(),
+        getZIndexClass(),
+        animation ? 'backdrop__container--enter' : '',
+        className
+    ].filter(Boolean).join(' ');
+    return (_jsx("div", { className: containerClasses, style: {
+            '--backdrop-z-index': zIndex,
+            '--backdrop-opacity': opacity
+        }, onClick: handleClick, role: "presentation", "aria-hidden": "true", children: children && (_jsx("div", { className: "backdrop__content", children: children })) }));
 };
-
 export default Backdrop;

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

@@ -1,81 +1,42 @@
-import React from 'react';
-
-export interface BackdropProps {
-  isVisible: boolean;
-  onClick?: () => void;
-  className?: string;
-  blur?: boolean;
-  opacity?: number;
-  zIndex?: number;
-  children?: React.ReactNode;
-  theme?: 'light' | 'dark' | 'primary' | 'success' | 'warning' | 'error';
-  animation?: boolean;
-}
-
-export const Backdrop: React.FC<BackdropProps> = ({
-  isVisible,
-  onClick,
-  className = '',
-  blur = false,
-  opacity = 0.5,
-  zIndex = 1000,
-  children,
-  theme = 'dark',
-  animation = true
-}) => {
-  if (!isVisible) {
-    return null;
-  }
-
-  const handleClick = (event: React.MouseEvent) => {
-    // Only trigger onClick if clicking directly on the backdrop
-    if (event.target === event.currentTarget && onClick) {
-      onClick();
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Backdrop = ({ isVisible, onClick, className = '', blur = false, opacity = 0.5, zIndex = 1000, children, theme = 'dark', animation = true }) => {
+    if (!isVisible) {
+        return null;
     }
-  };
-
-  // Convert opacity to nearest 10% for CSS class
-  const getOpacityClass = () => {
-    const rounded = Math.round(opacity * 10) * 10;
-    return `backdrop__container--opacity-${rounded}`;
-  };
-
-  const getZIndexClass = () => {
-    if (zIndex >= 1040) return 'backdrop__container--z-toast';
-    if (zIndex >= 1030) return 'backdrop__container--z-tooltip';
-    if (zIndex >= 1020) return 'backdrop__container--z-popover';
-    if (zIndex >= 1010) return 'backdrop__container--z-dropdown';
-    return 'backdrop__container--z-modal';
-  };
-
-  const containerClasses = [
-    'backdrop__container',
-    blur ? 'backdrop__container--blur' : '',
-    theme ? `backdrop__container--theme-${theme}` : '',
-    getOpacityClass(),
-    getZIndexClass(),
-    animation ? 'backdrop__container--enter' : '',
-    className
-  ].filter(Boolean).join(' ');
-
-  return (
-    <div
-      className={containerClasses}
-      style={{
-        '--backdrop-z-index': zIndex,
-        '--backdrop-opacity': opacity
-      } as React.CSSProperties}
-      onClick={handleClick}
-      role="presentation"
-      aria-hidden="true"
-    >
-      {children && (
-        <div className="backdrop__content">
-          {children}
-        </div>
-      )}
-    </div>
-  );
+    const handleClick = (event) => {
+        // Only trigger onClick if clicking directly on the backdrop
+        if (event.target === event.currentTarget && onClick) {
+            onClick();
+        }
+    };
+    // Convert opacity to nearest 10% for CSS class
+    const getOpacityClass = () => {
+        const rounded = Math.round(opacity * 10) * 10;
+        return `backdrop__container--opacity-${rounded}`;
+    };
+    const getZIndexClass = () => {
+        if (zIndex >= 1040)
+            return 'backdrop__container--z-toast';
+        if (zIndex >= 1030)
+            return 'backdrop__container--z-tooltip';
+        if (zIndex >= 1020)
+            return 'backdrop__container--z-popover';
+        if (zIndex >= 1010)
+            return 'backdrop__container--z-dropdown';
+        return 'backdrop__container--z-modal';
+    };
+    const containerClasses = [
+        'backdrop__container',
+        blur ? 'backdrop__container--blur' : '',
+        theme ? `backdrop__container--theme-${theme}` : '',
+        getOpacityClass(),
+        getZIndexClass(),
+        animation ? 'backdrop__container--enter' : '',
+        className
+    ].filter(Boolean).join(' ');
+    return (_jsx("div", { className: containerClasses, style: {
+            '--backdrop-z-index': zIndex,
+            '--backdrop-opacity': opacity
+        }, onClick: handleClick, role: "presentation", "aria-hidden": "true", children: children && (_jsx("div", { className: "backdrop__content", children: children })) }));
 };
-
 export default Backdrop;

package/dist/components/ui/overlay/focus-manager.esm.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;