react-restyle-components 0.4.48 → 0.4.50

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.d.ts

@@ -70,6 +70,8 @@ export interface ModalProps {
     overlayOpacity?: number;
     /** Overlay background color */
     overlayColor?: string;
+    /** Base z-index for overlay/content stack */
+    zIndex?: number;
     /** Click overlay to close */
     closeOnOverlayClick?: boolean;
     /** Close on Escape key */
@@ -97,4 +99,4 @@ export interface ModalProps {
     /** Modal content */
     children: React.ReactNode;
 }
-export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => React.JSX.Element | null;
+export declare const Modal: ({ visible, title, className, contentClassName, headerClassName, style, contentStyle, onClose, isAutoClose, autoCloseDelay, size, position, showCloseButton, closeButton, overlayOpacity, overlayColor, zIndex, closeOnOverlayClick, closeOnEscape, showHeader, headerBgColor, headerTextColor, borderRadius, maxWidth, contentPadding, headerPadding, animationDuration, classNames, styles, children, }: ModalProps) => React.JSX.Element | null;

package/lib/src/core-components/src/components/Modal/BasicModal/modal.component.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from 'react';
 import s from '../../../tc.module.css';
 import { cn } from '../../../utils';
-export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, closeOnOverlayClick = true, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
+export const Modal = ({ visible, title = '', className = '', contentClassName = '', headerClassName = '', style = {}, contentStyle = {}, onClose, isAutoClose = false, autoCloseDelay = 1000, size = 'md', position = 'center', showCloseButton = true, closeButton, overlayOpacity = 0.5, overlayColor, zIndex = 11000, closeOnOverlayClick = true, closeOnEscape = true, showHeader = true, headerBgColor, headerTextColor, borderRadius = '0.5rem', maxWidth, contentPadding = '1rem', headerPadding = '1rem', animationDuration = 300, classNames = {}, styles = {}, children, }) => {
     const [showModal, setShowModal] = useState(visible);
     const [isAnimating, setIsAnimating] = useState(false);
     useEffect(() => {
@@ -56,17 +56,24 @@ export const Modal = ({ visible, title = '', className = '', contentClassName =
         bottom: s['items-end'],
     };
     const modalMaxWidth = maxWidth || (size !== 'full' ? sizeMaxWidths[size] : '95%');
+    const baseZIndex = zIndex ?? 11000;
+    const overlayZIndex = styles.overlay?.zIndex ?? baseZIndex;
+    const containerZIndex = styles.container?.zIndex ??
+        (typeof style.zIndex === 'number' ? style.zIndex : undefined) ??
+        baseZIndex + 1;
     if (!showModal)
         return null;
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn(s['fixed'], s['inset-0'], s['z-40'], s['bg-black'], classNames.overlay), style: {
                     opacity: isAnimating ? overlayOpacity : 0,
                     transition: `opacity ${animationDuration}ms ease-in-out`,
                     backgroundColor: overlayColor || undefined,
+                    zIndex: overlayZIndex,
                     ...styles.overlay,
                 }, onClick: handleOverlayClick }), _jsx("div", { className: cn(s['flex'], s['justify-center'], positionClasses[position], s['overflow-x-hidden'], s['overflow-y-auto'], s['fixed'], s['inset-0'], s['z-50'], s['outline-none'], s['focus:outline-none'], className, classNames.container), style: {
                     ...style,
                     transition: `opacity ${animationDuration}ms ease-in-out`,
                     opacity: isAnimating ? 1 : 0,
+                    zIndex: containerZIndex,
                     ...styles.container,
                 }, onClick: handleOverlayClick, children: _jsx("div", { className: cn(s['relative'], s['w-full'], s['my-5'], s['mx-auto'], classNames.wrapper), style: {
                         maxWidth: modalMaxWidth,

package/lib/src/core-components/src/components/ProgressStepper/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ProgressBarProps } from './types';
+export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;

package/lib/src/core-components/src/components/ProgressStepper/ProgressBar/ProgressBar.js

@@ -0,0 +1,237 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useEffect } from 'react';
+// Inject keyframes animation styles
+const injectAnimationStyles = () => {
+    const styleId = 'progress-bar-animations';
+    if (typeof document !== 'undefined' && !document.getElementById(styleId)) {
+        const styleSheet = document.createElement('style');
+        styleSheet.id = styleId;
+        styleSheet.textContent = `
+      @keyframes progressBarShimmer {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(100%);
+        }
+      }
+      @keyframes progressBarIndeterminate {
+        0% {
+          left: -25%;
+        }
+        100% {
+          left: 100%;
+        }
+      }
+      @keyframes progressBarPulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.7;
+        }
+      }
+      @keyframes progressBarStripe {
+        0% {
+          background-position: 0 0;
+        }
+        100% {
+          background-position: 40px 0;
+        }
+      }
+      @keyframes progressBarGlow {
+        0%, 100% {
+          box-shadow: 0 0 4px currentColor, inset 0 0 4px rgba(255,255,255,0.2);
+        }
+        50% {
+          box-shadow: 0 0 12px currentColor, inset 0 0 8px rgba(255,255,255,0.3);
+        }
+      }
+      @keyframes progressBarSegmentPulse {
+        0%, 100% {
+          transform: scale(1);
+          opacity: 1;
+        }
+        50% {
+          transform: scale(1.02);
+          opacity: 0.9;
+        }
+      }
+    `;
+        document.head.appendChild(styleSheet);
+    }
+};
+// Color constants
+const colors = {
+    primary: '#8B5CF6',
+    track: '#E5E7EB',
+    text: '#374151',
+    supportText: '#6B7280',
+};
+// Size configurations
+const sizeConfig = {
+    small: {
+        height: '4px',
+        borderRadius: '2px',
+        labelSize: '0.75rem',
+        supportSize: '0.625rem',
+    },
+    medium: {
+        height: '6px',
+        borderRadius: '3px',
+        labelSize: '0.875rem',
+        supportSize: '0.75rem',
+    },
+    large: {
+        height: '8px',
+        borderRadius: '4px',
+        labelSize: '1rem',
+        supportSize: '0.875rem',
+    },
+};
+export const ProgressBar = forwardRef(({ label, supportText, value, max = 100, size = 'medium', variant = 'continuous', segments = 4, color, trackColor, showValue = false, isIndeterminate = false, showAnimation = true, className, style, ...rest }, ref) => {
+    // Inject animation styles on mount
+    useEffect(() => {
+        injectAnimationStyles();
+    }, []);
+    const percentage = useMemo(() => {
+        const clampedValue = Math.max(0, Math.min(value, max));
+        return (clampedValue / max) * 100;
+    }, [value, max]);
+    // Check if progress is active (not 0 and not 100)
+    const isActive = percentage > 0 && percentage < 100;
+    const activeSegments = useMemo(() => {
+        if (variant !== 'segmented')
+            return 0;
+        return Math.ceil((percentage / 100) * segments);
+    }, [percentage, segments, variant]);
+    const ariaLabel = useMemo(() => {
+        if (isIndeterminate)
+            return 'Loading...';
+        return `${Math.round(percentage)}% complete`;
+    }, [percentage, isIndeterminate]);
+    const config = sizeConfig[size];
+    const containerStyle = {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+        width: '100%',
+    };
+    const labelStyle = {
+        fontSize: config.labelSize,
+        fontWeight: 600,
+        color: colors.text,
+        lineHeight: 1.4,
+    };
+    const supportTextStyle = {
+        fontSize: config.supportSize,
+        fontWeight: 400,
+        color: colors.supportText,
+        lineHeight: 1.4,
+    };
+    const trackStyle = {
+        width: '100%',
+        height: config.height,
+        backgroundColor: trackColor || colors.track,
+        borderRadius: config.borderRadius,
+        overflow: 'hidden',
+        position: 'relative',
+    };
+    const fillColor = color || colors.primary;
+    const fillStyle = {
+        height: '100%',
+        backgroundColor: fillColor,
+        borderRadius: config.borderRadius,
+        transition: 'width 0.5s ease-out',
+        width: isIndeterminate ? '30%' : `${percentage}%`,
+        position: 'relative',
+        overflow: 'hidden',
+        ...(isIndeterminate
+            ? {
+                position: 'absolute',
+                animation: 'progressBarIndeterminate 1.5s ease-in-out infinite',
+            }
+            : {}),
+        ...(showAnimation && isActive && !isIndeterminate
+            ? {
+                animation: 'progressBarPulse 2s ease-in-out infinite',
+            }
+            : {}),
+    };
+    // Shimmer overlay for the fill
+    const shimmerStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.4) 50%,
+        transparent 100%
+      )`,
+        animation: 'progressBarShimmer 1.5s ease-in-out infinite',
+    };
+    // Striped effect style (alternative animation)
+    const stripedStyle = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundImage: `linear-gradient(
+        45deg,
+        rgba(255, 255, 255, 0.15) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.15) 50%,
+        rgba(255, 255, 255, 0.15) 75%,
+        transparent 75%,
+        transparent
+      )`,
+        backgroundSize: '40px 40px',
+        animation: 'progressBarStripe 1s linear infinite',
+    };
+    const segmentedTrackStyle = {
+        display: 'flex',
+        gap: '0.25rem',
+        width: '100%',
+        height: config.height,
+    };
+    const getSegmentStyle = (isActiveSegment, segmentIndex) => {
+        const isLastActiveSegment = segmentIndex === activeSegments - 1 && activeSegments > 0;
+        return {
+            flex: 1,
+            height: '100%',
+            backgroundColor: isActiveSegment ? fillColor : trackColor || colors.track,
+            borderRadius: config.borderRadius,
+            transition: 'all 0.3s ease-in-out',
+            position: 'relative',
+            overflow: 'hidden',
+            ...(showAnimation && isLastActiveSegment && isActive
+                ? {
+                    animation: 'progressBarSegmentPulse 1.5s ease-in-out infinite',
+                    boxShadow: `0 0 8px ${fillColor}`,
+                }
+                : {}),
+        };
+    };
+    const valueContainerStyle = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    };
+    const valueTextStyle = {
+        fontSize: config.supportSize,
+        fontWeight: 500,
+        color: colors.text,
+    };
+    return (_jsxs("div", { ref: ref, className: className, style: { ...containerStyle, ...style }, "data-aui": "progress-bar", ...rest, children: [(label || showValue) && (_jsxs("div", { style: valueContainerStyle, children: [label && _jsx("span", { style: labelStyle, children: label }), showValue && !isIndeterminate && (_jsxs("span", { style: valueTextStyle, children: [Math.round(percentage), "%"] }))] })), variant === 'continuous' ? (_jsx("div", { style: trackStyle, role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": ariaLabel, children: _jsxs("div", { style: fillStyle, children: [showAnimation && (isActive || isIndeterminate) && percentage > 0 && (_jsx("div", { style: shimmerStyle, "aria-hidden": "true" })), showAnimation && isIndeterminate && (_jsx("div", { style: stripedStyle, "aria-hidden": "true" }))] }) })) : (_jsx("div", { style: segmentedTrackStyle, role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": ariaLabel, children: Array.from({ length: segments }).map((_, index) => {
+                    const isActiveSegment = index < activeSegments;
+                    const isLastActiveSegment = index === activeSegments - 1 && activeSegments > 0;
+                    return (_jsx("div", { style: getSegmentStyle(isActiveSegment, index), children: showAnimation && isLastActiveSegment && isActive && (_jsx("div", { style: shimmerStyle, "aria-hidden": "true" })) }, index));
+                }) })), supportText && _jsx("span", { style: supportTextStyle, children: supportText })] }));
+});
+ProgressBar.displayName = 'ProgressBar';

package/lib/src/core-components/src/components/ProgressStepper/ProgressBar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ProgressBar';
+export type { ProgressBarProps } from './types';

package/lib/src/core-components/src/components/ProgressStepper/ProgressBar/index.js

@@ -0,0 +1 @@
+export * from './ProgressBar';

package/lib/src/core-components/src/components/ProgressStepper/ProgressBar/types.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Label text displayed above the progress bar */
+    label?: string;
+    /** Support text displayed below the progress bar */
+    supportText?: string;
+    /** Current progress value */
+    value: number;
+    /** Maximum value (default: 100) */
+    max?: number;
+    /** Size of the progress bar */
+    size?: 'small' | 'medium' | 'large';
+    /** Variant of the progress bar */
+    variant?: 'continuous' | 'segmented';
+    /** Number of segments (for segmented variant) */
+    segments?: number;
+    /** Custom color for the progress fill */
+    color?: string;
+    /** Custom color for the track */
+    trackColor?: string;
+    /** Whether to show the percentage value */
+    showValue?: boolean;
+    /** Whether the progress bar is in loading/indeterminate state */
+    isIndeterminate?: boolean;
+    /** Whether to show loading animations (shimmer, pulse effects). Default: true */
+    showAnimation?: boolean;
+    /** Custom class name */
+    className?: string;
+}

package/lib/src/core-components/src/components/ProgressStepper/ProgressBar/types.js

@@ -0,0 +1 @@
+export {};

package/lib/src/core-components/src/components/ProgressStepper/ProgressStepper/ProgressStepper.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ProgressStepperProps } from './types';
+export declare const ProgressStepper: React.ForwardRefExoticComponent<ProgressStepperProps & React.RefAttributes<HTMLUListElement>>;

package/lib/src/core-components/src/components/ProgressStepper/ProgressStepper/ProgressStepper.js

@@ -0,0 +1,42 @@
+'use client';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from 'react';
+import { StepItem } from './StepItem';
+export const ProgressStepper = forwardRef(({ steps, size = 'medium', orientation = 'horizontal', isPacked = false, indicatorType = 'dot', activeColor = '#8B5CF6', inactiveColor = '#E5E7EB', className, style, ...rest }, ref) => {
+    // Generate accessible aria label based on current step
+    const ariaLabel = useMemo(() => {
+        const currentStepIndex = steps
+            .map((step) => step.state !== 'incomplete')
+            .lastIndexOf(true);
+        const currentStep = steps[currentStepIndex];
+        const label = `step ${currentStepIndex + 1} out of ${steps.length}`;
+        if (!currentStep?.subSteps?.length) {
+            return label;
+        }
+        if (currentStep.state === 'inprogress') {
+            return `${label} part 1`;
+        }
+        const subStepIndex = currentStep.subSteps?.findIndex((subStep) => subStep.state === 'inprogress');
+        if (subStepIndex !== undefined && subStepIndex >= 0) {
+            return `${label} part ${subStepIndex + 2}`;
+        }
+        return label;
+    }, [steps]);
+    const hiddenAriaStyle = {
+        height: 0,
+        opacity: 0,
+        position: 'absolute',
+        overflow: 'hidden',
+    };
+    const listContainerStyle = {
+        display: 'flex',
+        flexDirection: orientation === 'horizontal' ? 'row' : 'column',
+        alignItems: 'flex-start',
+        listStyleType: 'none',
+        padding: 0,
+        margin: 0,
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: hiddenAriaStyle, "aria-live": "polite", role: "status", children: ariaLabel }), _jsx("ul", { "data-aui": "progress-stepper", ref: ref, "aria-hidden": true, "data-testid": "progress-stepper", style: { ...listContainerStyle, ...style }, className: className, ...rest, children: steps.map((step, index) => (_createElement(StepItem, { ...step, key: step.id || index, index: index, stepsAmount: steps.length, size: size, orientation: orientation, isPacked: isPacked, indicatorType: indicatorType, activeColor: activeColor, inactiveColor: inactiveColor }))) })] }));
+});
+ProgressStepper.displayName = 'ProgressStepper';

package/lib/src/core-components/src/components/ProgressStepper/ProgressStepper/StepItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ProgressStepperLineItem } from './types';
+export declare const StepItem: React.FC<ProgressStepperLineItem>;