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

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

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useRef, useId } from 'react';
+;
+import { useTheme } from '../../../themes/useTheme.js';
+import { Portal } from './portal.js';
+import { Backdrop } from './backdrop.js';
+import { FocusManager } from './focus-manager.js';
+import { useOverlayManager } from './overlay-manager.js';
+// SVG Icons
+const XMarkIcon = ({ className = 'w-6 h-6' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+// 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 = ({ 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 (_jsxs("div", { className: headerClasses, children: [_jsxs("div", { children: [title && (_jsx("h2", { className: "modal__title", children: title })), subtitle && (_jsx("p", { className: "modal__subtitle", children: subtitle })), children] }), showCloseButton && onClose && (_jsx("button", { type: "button", className: "modal__close", onClick: onClose, "aria-label": closeButtonLabel, children: _jsx(XMarkIcon, {}) }))] }));
+};
+// Modal Body Component
+export const ModalBody = ({ 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 (_jsx("div", { className: bodyClasses, style: { maxHeight: scrollable ? maxHeight : undefined }, children: children }));
+};
+// Modal Footer Component
+export const ModalFooter = ({ 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 (_jsx("div", { className: footerClasses, children: children }));
+};
+// Main Modal Component
+export const Modal = ({ 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(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) => {
+            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 = {
+        backgroundColor: colors.surface.background,
+        borderColor: colors.surface.border,
+        color: colors.text.primary,
+        zIndex: zIndex || getTopZIndex()
+    };
+    return (_jsxs(Portal, { children: [showBackdrop && (_jsx(Backdrop, { isVisible: isOpen, onClick: handleBackdropClick, blur: backdropBlur, opacity: backdropOpacity, zIndex: (zIndex || getTopZIndex()) - 1 })), _jsx("div", { className: "modal__overlay", style: { zIndex: zIndex || getTopZIndex() }, children: _jsx(FocusManager, { isActive: isOpen, trapFocus: trapFocus, restoreFocus: restoreFocus, initialFocus: initialFocus, children: _jsx("div", { ref: modalRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? `${modalId}-title` : undefined, className: getContainerClasses(), style: modalStyle, onClick: (e) => e.stopPropagation(), children: React.Children.count(children) > 0 ? (children) : (_jsxs(_Fragment, { children: [title && (_jsx(ModalHeader, { title: title, onClose: onClose })), _jsx(ModalBody, { children: _jsx("p", { children: "Modal content goes here..." }) })] })) }) }) })] }));
+};
+export default Modal;

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

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useEffect, useRef, useId } from 'react';
+;
+import { useTheme } from '../../../themes/useTheme.js';
+import { Portal } from './portal.js';
+import { Backdrop } from './backdrop.js';
+import { FocusManager } from './focus-manager.js';
+import { useOverlayManager } from './overlay-manager.js';
+// SVG Icons
+const XMarkIcon = ({ className = 'w-6 h-6' }) => (_jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }));
+// 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 = ({ 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 (_jsxs("div", { className: headerClasses, children: [_jsxs("div", { children: [title && (_jsx("h2", { className: "modal__title", children: title })), subtitle && (_jsx("p", { className: "modal__subtitle", children: subtitle })), children] }), showCloseButton && onClose && (_jsx("button", { type: "button", className: "modal__close", onClick: onClose, "aria-label": closeButtonLabel, children: _jsx(XMarkIcon, {}) }))] }));
+};
+// Modal Body Component
+export const ModalBody = ({ 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 (_jsx("div", { className: bodyClasses, style: { maxHeight: scrollable ? maxHeight : undefined }, children: children }));
+};
+// Modal Footer Component
+export const ModalFooter = ({ 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 (_jsx("div", { className: footerClasses, children: children }));
+};
+// Main Modal Component
+export const Modal = ({ 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(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) => {
+            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 = {
+        backgroundColor: colors.surface.background,
+        borderColor: colors.surface.border,
+        color: colors.text.primary,
+        zIndex: zIndex || getTopZIndex()
+    };
+    return (_jsxs(Portal, { children: [showBackdrop && (_jsx(Backdrop, { isVisible: isOpen, onClick: handleBackdropClick, blur: backdropBlur, opacity: backdropOpacity, zIndex: (zIndex || getTopZIndex()) - 1 })), _jsx("div", { className: "modal__overlay", style: { zIndex: zIndex || getTopZIndex() }, children: _jsx(FocusManager, { isActive: isOpen, trapFocus: trapFocus, restoreFocus: restoreFocus, initialFocus: initialFocus, children: _jsx("div", { ref: modalRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? `${modalId}-title` : undefined, className: getContainerClasses(), style: modalStyle, onClick: (e) => e.stopPropagation(), children: React.Children.count(children) > 0 ? (children) : (_jsxs(_Fragment, { children: [title && (_jsx(ModalHeader, { title: title, onClose: onClose })), _jsx(ModalBody, { children: _jsx("p", { children: "Modal content goes here..." }) })] })) }) }) })] }));
+};
+export default Modal;

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { OverlayManagerProps, OverlayState } from './types.js';
+interface OverlayContextType {
+    overlays: OverlayState[];
+    addOverlay: (id: string, zIndex: number) => void;
+    removeOverlay: (id: string) => void;
+    getTopZIndex: () => number;
+    isOverlayActive: (id: string) => boolean;
+}
+export declare const useOverlayManager: () => OverlayContextType;
+export declare const OverlayProvider: React.FC<{
+    children: ReactNode;
+}>;
+export declare const OverlayManager: React.FC<OverlayManagerProps>;
+export default OverlayManager;
+//# sourceMappingURL=overlay-manager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-manager.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/overlay/overlay-manager.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAsD,SAAS,EAAE,MAAM,OAAO,CAAC;AACtF,OAAO,EAAE,mBAAmB,EAAE,YAAY,EAAiB,MAAM,YAAY,CAAC;AAG9E,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,YAAY,EAAE,MAAM,MAAM,CAAC;IAC3B,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;CAC1C;AAKD,eAAO,MAAM,iBAAiB,0BAM7B,CAAC;AAwBF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAiC7D,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0BxD,CAAC;AAEF,eAAe,cAAc,CAAC"}

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

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { createContext, useContext, useReducer, useCallback } from 'react';
+;
+const OverlayContext = createContext(undefined);
+// Custom hook to use overlay context
+export const useOverlayManager = () => {
+    const context = useContext(OverlayContext);
+    if (!context) {
+        throw new Error('useOverlayManager must be used within an OverlayProvider');
+    }
+    return context;
+};
+// Overlay reducer for state management
+const overlayReducer = (state, action) => {
+    switch (action.type) {
+        case 'ADD_OVERLAY':
+            return [...state, { id: action.payload.id, zIndex: action.payload.zIndex || 1000 }];
+        case 'REMOVE_OVERLAY':
+            return state.filter(overlay => overlay.id !== action.payload.id);
+        case 'UPDATE_Z_INDEX':
+            return state.map(overlay => overlay.id === action.payload.id
+                ? { ...overlay, zIndex: action.payload.zIndex || overlay.zIndex }
+                : overlay);
+        default:
+            return state;
+    }
+};
+// Overlay provider component
+export const OverlayProvider = ({ children }) => {
+    const [overlays, dispatch] = useReducer(overlayReducer, []);
+    const addOverlay = useCallback((id, zIndex) => {
+        dispatch({ type: 'ADD_OVERLAY', payload: { id, zIndex } });
+    }, []);
+    const removeOverlay = useCallback((id) => {
+        dispatch({ type: 'REMOVE_OVERLAY', payload: { id } });
+    }, []);
+    const getTopZIndex = useCallback(() => {
+        if (overlays.length === 0)
+            return 1000; // Base z-index
+        return Math.max(...overlays.map(o => o.zIndex)) + 1;
+    }, [overlays]);
+    const isOverlayActive = useCallback((id) => {
+        return overlays.some(overlay => overlay.id === id);
+    }, [overlays]);
+    const value = {
+        overlays,
+        addOverlay,
+        removeOverlay,
+        getTopZIndex,
+        isOverlayActive
+    };
+    return (_jsx(OverlayContext.Provider, { value: value, children: children }));
+};
+// Overlay manager component for direct usage
+export const OverlayManager = ({ children, maxOverlays = 10, onOverlayChange }) => {
+    const { overlays } = useOverlayManager();
+    // Notify parent of overlay changes
+    React.useEffect(() => {
+        if (onOverlayChange) {
+            onOverlayChange(overlays);
+        }
+    }, [overlays, onOverlayChange]);
+    // Enforce maximum overlay limit
+    React.useEffect(() => {
+        if (overlays.length > maxOverlays) {
+            console.warn(`Maximum overlay limit (${maxOverlays}) exceeded`);
+        }
+    }, [overlays.length, maxOverlays]);
+    return (_jsx("div", { className: "overlay-manager", children: children }));
+};
+export default OverlayManager;

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

@@ -0,0 +1,73 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { createContext, useContext, useReducer, useCallback } from 'react';
+;
+const OverlayContext = createContext(undefined);
+// Custom hook to use overlay context
+export const useOverlayManager = () => {
+    const context = useContext(OverlayContext);
+    if (!context) {
+        throw new Error('useOverlayManager must be used within an OverlayProvider');
+    }
+    return context;
+};
+// Overlay reducer for state management
+const overlayReducer = (state, action) => {
+    switch (action.type) {
+        case 'ADD_OVERLAY':
+            return [...state, { id: action.payload.id, zIndex: action.payload.zIndex || 1000 }];
+        case 'REMOVE_OVERLAY':
+            return state.filter(overlay => overlay.id !== action.payload.id);
+        case 'UPDATE_Z_INDEX':
+            return state.map(overlay => overlay.id === action.payload.id
+                ? { ...overlay, zIndex: action.payload.zIndex || overlay.zIndex }
+                : overlay);
+        default:
+            return state;
+    }
+};
+// Overlay provider component
+export const OverlayProvider = ({ children }) => {
+    const [overlays, dispatch] = useReducer(overlayReducer, []);
+    const addOverlay = useCallback((id, zIndex) => {
+        dispatch({ type: 'ADD_OVERLAY', payload: { id, zIndex } });
+    }, []);
+    const removeOverlay = useCallback((id) => {
+        dispatch({ type: 'REMOVE_OVERLAY', payload: { id } });
+    }, []);
+    const getTopZIndex = useCallback(() => {
+        if (overlays.length === 0)
+            return 1000; // Base z-index
+        return Math.max(...overlays.map(o => o.zIndex)) + 1;
+    }, [overlays]);
+    const isOverlayActive = useCallback((id) => {
+        return overlays.some(overlay => overlay.id === id);
+    }, [overlays]);
+    const value = {
+        overlays,
+        addOverlay,
+        removeOverlay,
+        getTopZIndex,
+        isOverlayActive
+    };
+    return (_jsx(OverlayContext.Provider, { value: value, children: children }));
+};
+// Overlay manager component for direct usage
+export const OverlayManager = ({ children, maxOverlays = 10, onOverlayChange }) => {
+    const { overlays } = useOverlayManager();
+    // Notify parent of overlay changes
+    React.useEffect(() => {
+        if (onOverlayChange) {
+            onOverlayChange(overlays);
+        }
+    }, [overlays, onOverlayChange]);
+    // Enforce maximum overlay limit
+    React.useEffect(() => {
+        if (overlays.length > maxOverlays) {
+            console.warn(`Maximum overlay limit (${maxOverlays}) exceeded`);
+        }
+    }, [overlays.length, maxOverlays]);
+    return (_jsx("div", { className: "overlay-manager", children: children }));
+};
+export default OverlayManager;

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { PopoverProps, PopoverContentProps, PopoverHeaderProps, PopoverBodyProps, PopoverFooterProps } from './types.js';
+export declare const PopoverContent: React.FC<PopoverContentProps>;
+export declare const PopoverHeader: React.FC<PopoverHeaderProps>;
+export declare const PopoverBody: React.FC<PopoverBodyProps>;
+export declare const PopoverFooter: React.FC<PopoverFooterProps>;
+export declare const Popover: React.FC<PopoverProps>;
+export default Popover;
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/overlay/popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,YAAY,CAAC;AA0HpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAUxD,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA8CtD,CAAC;AAGF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAwBlD,CAAC;AAGF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsBtD,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqN1C,CAAC;AAEF,eAAe,OAAO,CAAC"}