@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

package/dist/components/ui/navigation/user-menu.js

@@ -0,0 +1,205 @@
+/**
+ * UserMenu Component
+ * Comprehensive user menu with custom trigger, user header, and grouped menu items
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { Button } from '../button.js';
+import { UserAvatar } from './user-avatar.js';
+import { SubscriptionBadge } from './subscription-badge.js';
+// Icons
+const ChevronDownIcon = () => (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("polyline", { points: "6,9 12,15 18,9" }) }));
+// Sub-components
+const UserMenuHeader = ({ user, subscription, className = '', custom }) => {
+    if (custom) {
+        return _jsx("div", { className: `user-menu__header ${className}`, children: custom });
+    }
+    return (_jsxs("div", { className: `user-menu__header ${className}`, children: [_jsx("div", { className: "user-menu__header-avatar", children: _jsx(UserAvatar, { user: user, size: "lg" }) }), _jsxs("div", { className: "user-menu__header-info", children: [_jsxs("div", { className: "user-menu__header-name-row", children: [_jsx("div", { className: "user-menu__header-name", children: user.fullName || user.firstName || 'User' }), subscription && (_jsx("div", { className: "user-menu__header-subscription", children: _jsx(SubscriptionBadge, { subscription: subscription, size: "sm" }) }))] }), user.email && (_jsx("div", { className: "user-menu__header-email", children: user.email }))] })] }));
+};
+const UserMenuSection = ({ group, onItemClick }) => {
+    const handleItemClick = useCallback((item) => {
+        if (item.disabled)
+            return;
+        // Handle navigation or action
+        if (item.href && !item.onClick) {
+            // Pure navigation - let default behavior handle it
+            window.location.href = item.href;
+        }
+        else if (item.onClick) {
+            // Function call
+            item.onClick();
+        }
+        // Call external handler
+        if (onItemClick) {
+            onItemClick(item);
+        }
+    }, [onItemClick]);
+    return (_jsxs("div", { className: `user-menu__section ${group.divider ? 'user-menu__section--bordered' : ''}`, children: [group.title && (_jsx("div", { className: "user-menu__section-title", children: group.title })), _jsx("div", { className: "user-menu__section-items", children: group.items.map((item) => {
+                    const Element = item.href ? 'a' : 'button';
+                    const elementProps = item.href ? { href: item.href } : { type: 'button' };
+                    return (_jsxs(Element, { onClick: () => handleItemClick(item), disabled: item.disabled, className: `user-menu__item ${item.variant === 'danger' ? 'user-menu__item--danger' : ''} ${item.disabled ? 'user-menu__item--disabled' : ''}`, "data-testid": `user-menu-item-${item.id}`, ...elementProps, children: [_jsxs("div", { className: "user-menu__item-content", children: [item.icon && (_jsx("span", { className: "user-menu__item-icon", children: item.icon })), _jsxs("div", { className: "user-menu__item-text", children: [_jsx("span", { className: "user-menu__item-label", children: item.label }), item.description && (_jsx("span", { className: "user-menu__item-description", children: item.description }))] })] }), item.badge && (_jsx("span", { className: "user-menu__item-badge", children: item.badge }))] }, item.id));
+                }) })] }));
+};
+export const UserMenu = ({ user, subscription, trigger, triggerProps, groups, showHeader = true, headerCustom, placement = 'bottom-right', offset = 8, width = 288, maxHeight = 400, onItemClick, onSignOut, open, defaultOpen = false, onOpenChange, className = '', headerClassName = '', dropdownClassName = '', 'aria-label': ariaLabel = 'User menu', 'data-testid': testId = 'user-menu' }) => {
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const [smartPlacement, setSmartPlacement] = useState(placement);
+    // const [focusedIndex, setFocusedIndex] = useState(-1);
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    // Use controlled or uncontrolled state
+    const isOpen = open !== undefined ? open : internalOpen;
+    const handleToggle = useCallback(() => {
+        const newOpen = !isOpen;
+        if (open === undefined) {
+            setInternalOpen(newOpen);
+        }
+        if (onOpenChange) {
+            onOpenChange(newOpen);
+        }
+        // Reset focus when opening
+        // if (newOpen) {
+        //   setFocusedIndex(-1);
+        // }
+    }, [isOpen, open, onOpenChange]);
+    const handleClose = useCallback(() => {
+        if (open === undefined) {
+            setInternalOpen(false);
+        }
+        if (onOpenChange) {
+            onOpenChange(false);
+        }
+        // Return focus to trigger
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    }, [open, onOpenChange]);
+    const handleItemClick = useCallback((item) => {
+        // Handle sign out specially
+        if (item.variant === 'danger' && onSignOut) {
+            onSignOut();
+        }
+        // Call external handler
+        if (onItemClick) {
+            onItemClick(item);
+        }
+        // Close menu after item click
+        handleClose();
+    }, [onItemClick, onSignOut, handleClose]);
+    // Click outside handler
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (isOpen &&
+                dropdownRef.current &&
+                !dropdownRef.current.contains(event.target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(event.target)) {
+                handleClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen, handleClose]);
+    // Escape key handler
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === 'Escape' && isOpen) {
+                handleClose();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('keydown', handleEscape);
+        }
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [isOpen, handleClose]);
+    // Smart positioning to prevent viewport overflow
+    useEffect(() => {
+        if (!isOpen || !triggerRef.current)
+            return;
+        const updatePlacement = () => {
+            const trigger = triggerRef.current;
+            if (!trigger)
+                return;
+            const triggerRect = trigger.getBoundingClientRect();
+            const viewportHeight = window.innerHeight;
+            const viewportWidth = window.innerWidth;
+            // Calculate space available below and above
+            const spaceBelow = viewportHeight - triggerRect.bottom;
+            const spaceAbove = triggerRect.top;
+            const spaceRight = viewportWidth - triggerRect.left;
+            const spaceLeft = triggerRect.right;
+            // Estimate dropdown height (use max-height or approximate)
+            const estimatedDropdownHeight = Math.min(400, viewportHeight * 0.6);
+            let newPlacement = placement;
+            // Vertical positioning logic
+            if (placement.includes('bottom') && spaceBelow < estimatedDropdownHeight && spaceAbove > spaceBelow) {
+                // Flip to top if more space above
+                newPlacement = placement.replace('bottom', 'top');
+            }
+            else if (placement.includes('top') && spaceAbove < estimatedDropdownHeight && spaceBelow > spaceAbove) {
+                // Flip to bottom if more space below
+                newPlacement = placement.replace('top', 'bottom');
+            }
+            // Horizontal positioning logic
+            if (placement.includes('right') && spaceRight < 300 && spaceLeft > spaceRight) {
+                // Flip to left if more space on left
+                newPlacement = newPlacement.replace('right', 'left');
+            }
+            else if (placement.includes('left') && spaceLeft < 300 && spaceRight > spaceLeft) {
+                // Flip to right if more space on right
+                newPlacement = newPlacement.replace('left', 'right');
+            }
+            setSmartPlacement(newPlacement);
+        };
+        // Update on open and on scroll/resize
+        updatePlacement();
+        window.addEventListener('scroll', updatePlacement, { passive: true });
+        window.addEventListener('resize', updatePlacement, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', updatePlacement);
+            window.removeEventListener('resize', updatePlacement);
+        };
+    }, [isOpen, placement]);
+    // Get placement classes using smart placement
+    const getPlacementClasses = () => {
+        switch (smartPlacement) {
+            case 'bottom-left':
+                return 'user-menu__dropdown--bottom-left';
+            case 'bottom-right':
+                return 'user-menu__dropdown--bottom-right';
+            case 'top-left':
+                return 'user-menu__dropdown--top-left';
+            case 'top-right':
+                return 'user-menu__dropdown--top-right';
+            default:
+                return 'user-menu__dropdown--bottom-right';
+        }
+    };
+    // Default trigger
+    const defaultTrigger = (_jsxs(Button, { ref: triggerRef, variant: "ghost", className: "user-menu__trigger-default", ...triggerProps, children: [_jsx(UserAvatar, { user: user, size: "sm" }), _jsx("span", { className: "user-menu__trigger-name", children: user.firstName || user.fullName || 'Account' }), subscription && (_jsx(SubscriptionBadge, { subscription: subscription, size: "sm" })), _jsx(ChevronDownIcon, {})] }));
+    // Custom trigger with added props
+    const customTrigger = trigger ? (React.cloneElement(trigger, {
+        ref: triggerRef,
+        onClick: handleToggle,
+        'aria-expanded': isOpen,
+        'aria-haspopup': 'true',
+        'aria-label': ariaLabel,
+        className: `${trigger.props.className || ''} user-menu__trigger`.trim()
+    })) : null;
+    return (_jsxs("div", { className: `user-menu ${className}`, "data-testid": testId, children: [customTrigger || (_jsx("button", { ref: triggerRef, onClick: handleToggle, className: "user-menu__trigger", "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel, children: defaultTrigger })), isOpen && (_jsxs("div", { ref: dropdownRef, className: `user-menu__dropdown ${getPlacementClasses()} ${dropdownClassName}`, role: "menu", "aria-label": ariaLabel, style: {
+                    width: typeof width === 'number' ? `${width}px` : width,
+                    maxHeight: typeof maxHeight === 'number'
+                        ? `min(${maxHeight}px, calc(100vh - 120px))`
+                        : `min(${maxHeight}, calc(100vh - 120px))`,
+                    marginTop: smartPlacement.includes('bottom') ? `${offset}px` : undefined,
+                    marginBottom: smartPlacement.includes('top') ? `${offset}px` : undefined
+                }, children: [showHeader && (_jsx(UserMenuHeader, { user: user, subscription: subscription, className: headerClassName, custom: headerCustom })), _jsx("div", { className: "user-menu__sections", children: groups.map((group, sectionIndex) => (_jsx(UserMenuSection, { group: group, onItemClick: handleItemClick, sectionIndex: sectionIndex }, group.id))) })] }))] }));
+};
+export default UserMenu;

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

@@ -0,0 +1,15 @@
+import * as 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 declare const Backdrop: React.FC<BackdropProps>;
+export default Backdrop;
+//# sourceMappingURL=backdrop.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/overlay/backdrop.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACvE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgE5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

@@ -0,0 +1,44 @@
+'use client';
+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;
+    }
+    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

@@ -0,0 +1,44 @@
+'use client';
+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;
+    }
+    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.d.ts

@@ -0,0 +1,13 @@
+import * as React 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 declare const FocusManager: React.FC<FocusManagerProps>;
+export default FocusManager;
+//# sourceMappingURL=focus-manager.d.ts.map

package/dist/components/ui/overlay/focus-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-manager.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/overlay/focus-manager.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgIpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

@@ -0,0 +1,101 @@
+'use client';
+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;
+        }
+    }, [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/focus-manager.js

@@ -0,0 +1,101 @@
+'use client';
+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;
+        }
+    }, [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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,9 @@
+// Overlay Architecture Components
+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';

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

@@ -0,0 +1,9 @@
+// Overlay Architecture Components
+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';

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './types.js';
+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":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAmB5F,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"}