funda-ui 4.7.624 → 4.7.625

package/publish/lib/esm/Stepper/index.scss

@@ -1,315 +0,0 @@
-
-/* ======================================================
-   <!-- Stepper -->
-/* ====================================================== */
-
-.stepper-container {
-
-    --stepper-color-default: #333;
-    --stepper-color-active: white;
-    --stepper-color-complete: #2563eb;
-    --stepper-indicator-default: white;
-    --stepper-indicator-active: #2563eb;
-    --stepper-indicator-complete: #22c55e;
-    --stepper-border-default: #ccc;
-    --stepper-border-active: #2563eb;
-    --stepper-border-complete: #22c55e;
-    --stepper-line-default: #dfdfdf;
-    --stepper-line-active: #2563eb;
-    --stepper-line-complete: #22c55e;
-    --stepper-indicator-font-size: 0.875rem;
-    --stepper-indicator-offset: 60px;
-    --stepper-title-size: 0.875rem;
-    --stepper-indicator-size: 32px;
-    
-
-
-    position: relative;
-
-    /* Navigation Header (only horizontal) */
-    .stepper-header {
-        display: flex;
-        align-items: flex-start;
-        flex-wrap: nowrap;
-        position: relative;
-        max-width: calc(100% - var(--stepper-indicator-size));
-
-        /* background line */
-        &::before {
-            content: '';
-            position: absolute;
-            top: 16px;  /* Subtract the height of the title */
-            left: 0;
-            right: 0;
-            height: 2px;
-            background-color: var(--stepper-line-default);
-            z-index: 1;
-            width: 100%;
-            
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: 16px; /* Subtract the height of the title */
-            left: 0;
-            height: 2px;
-            background-color: var(--stepper-line-complete);
-            z-index: 2;
-            transition: width 0.3s ease-in-out;
-            width: 0;
-        }
-
-        &::after {
-            width: var(--stepper-progress-width, 0%);
-            max-width: 100%;
-        }
-    }
-
-    /* Main Navigation - Each step item (with circle + title) */
-    .step-item {
-        flex: none;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        max-width: 0;
-        position: relative;
-        z-index: 3;
-
-        &.step-item--clickable {
-            cursor: pointer;
-        }
-        
-    }
-
-
-    /* Line */
-    .step-line {
-        flex: 1;
-        height: 2px;
-        background-color:  var(--stepper-line-default);
-        margin: 0 4px;
-        position: relative;
-        top: -10px;
-        z-index: 0;
-        overflow: hidden;
-        opacity: 0;
-
-        &--active {
-            background-color: var(--stepper-line-default);
-        }
-
-        &--complete {
-            background-color: var(--stepper-line-default);
-        }
-              
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: var(--stepper-line-complete);
-            transform: scaleX(0);
-            transform-origin: left;
-            transition: transform 0.3s ease-in-out;
-        }   
-        
-        &--active::after,
-        &--complete::after {
-            transform: scaleX(1);
-        }
-    }
-
-
-
-    /* Indicator */
-    .step-indicator {
-        width: var(--stepper-indicator-size);
-        height: var(--stepper-indicator-size);
-        margin: 0 auto 0.25rem;
-        border-radius: 9999px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: 2px solid #ccc;
-        font-size: var(--stepper-indicator-font-size);
-
-        /* default */
-        background-color: var(--stepper-indicator-default);
-        color: var(--stepper-color-default);
-        border-color: var(--stepper-border-default);
-
-        &--active {
-            background-color: var(--stepper-indicator-active);
-            color: var(--stepper-color-active);
-            border-color: var(--stepper-border-active);
-        } 
-
-        &--complete {
-            background-color: var(--stepper-indicator-complete);
-            color: var(--stepper-color-active);
-            border-color: var(--stepper-border-complete);
-        }
-
-    }
-
-
-    /* Title */
-    .step-title {
-        white-space: nowrap;
-        font-size: var(--stepper-title-size);
-        margin-left: calc(var(--stepper-indicator-offset) / 2);
-
-        /* default */
-        color: var(--stepper-color-default);
-
-        &--active {
-            color: var(--stepper-indicator-active);
-        }
-
-        &--complete {
-            color: var(--stepper-indicator-complete);
-        }
-    }
-
-
-
-    /* Panels Area */
-    .stepper-panels {
-
-    }
-
-    /* Buttons */
-    .stepper-buttons {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 1rem;
-    }
-
-    /* Panel */
-    .stepper-panel {
-        width: 100%;
-    }
-    .stepper-panel-header {
-        font-size: 1.25rem;
-        font-weight: bold;
-        margin-bottom: 1rem;
-        display: none;
-    }
-    .stepper-panel-content {
-        width: 100%;
-    }
-
-
-
-}
-
-
-/*------ Verticle ------*/
-.stepper-container.stepper-container--vertical {
-
-
-    display: flex;
-    flex-direction: column;
-    gap: 2.5rem; /* line length */
-    max-height: calc(100% - var(--stepper-indicator-size));
-
-    /* background line */
-    &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: calc(var(--stepper-indicator-size) / 2);
-        width: 2px;
-        height: 100%;
-        background-color: var(--stepper-line-default);
-        z-index: 1;
-    }
-
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: calc(var(--stepper-indicator-size) / 2);
-        width: 2px;
-        background-color: var(--stepper-line-complete);
-        z-index: 2;
-        transition: height 0.3s ease-in-out;
-        height: 0;
-    }
-
-    &::after {
-        height: var(--stepper-progress-height, 0%);
-        max-height: 100%;
-    }
-
-
-    /* Layout */
-    .vertical-step-row {
-        display: flex;
-        align-items: flex-start;
-    }
-    .vertical-step-left {
-        flex-shrink: 0;
-        width: var(--stepper-indicator-size);
-        height: var(--stepper-indicator-size);
-        position: relative;
-        
-        /* Main Navigation - Each step item (with circle + title) */
-        .step-item {
-            margin-top: 0;
-        }
-
-        /* Line */
-        .step-line {
-            position: absolute;
-            left: 20px;
-            opacity: 0;
-        }
-
-    }
-    
-    .vertical-step-right {
-        flex: 1;
-        left: 70px;
-        width: calc(100% - 70px);
-        position: absolute;
-        top: 0; /* required */
-    }
-
-    /* Title */
-    .step-title {
-        display: none;
-        margin-left: .3rem;
-    }
-    
-    /* Panel */
-    .stepper-panel-header {
-        display: block;
-    }
-
-
-
-    /* Line */
-    .step-line {
-        flex: auto;
-        width: 2px;
-        height: 40px;
-        margin-top: 4px;
-        top: auto;
-        left: -24px;
-
-        &::after {
-            transform-origin: top;
-            transform: scaleY(0);
-        }   
-        
-        &--active::after,
-        &--complete::after {
-            transform: scaleY(1);
-        }
-
-    }
-}

package/publish/lib/esm/Stepper/index.tsx

@@ -1,325 +0,0 @@
-import React, { useRef, useEffect, forwardRef, useImperativeHandle, useState } from 'react';
-
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-interface StepperPanelProps {
-    header?: React.ReactNode;
-    children?: React.ReactNode;
-    style?: React.CSSProperties;
-}
-
-interface StepperProps {
-    wrapperClassName?: string;
-    indicatorClickAllowed?: boolean;
-    style?: React.CSSProperties;
-    initialStep?: number;
-    layout?: 'horizontal' | 'vertical';
-    completeIcon?: React.ReactNode;
-    disableCompleteIcon?: boolean;
-    onChange?: (index: number, isLastStepComplete: boolean) => void;
-    children: React.ReactElement<StepperPanelProps>[];
-}
-
-interface StepperRef {
-    goto: (index: number) => void;
-    next: () => void;
-    prev: () => void;
-}
-
-const StepperPanel: React.FC<StepperPanelProps> = (props) => {
-    const {
-        header = <><svg width="1rem" height="1rem"><rect fill="none"/></svg></>, 
-        children, 
-        style
-    } = props;
-
-    return (
-        <div className="stepper-panel" style={style}>
-            <div className="stepper-panel-header">{header}</div>
-            <div className="stepper-panel-content">{children}</div>
-        </div>
-    );
-};
-
-const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
-    const {
-        wrapperClassName,
-        indicatorClickAllowed = false,
-        style,
-        initialStep = 0,
-        layout = 'horizontal',
-        completeIcon = <><svg width="20px" height="20px" viewBox="0 0 20 20" fill="none"><path d="M15.3742 5.98559L10.3742 14.9856C9.72664 16.1511 7.97832 15.1798 8.62585 14.0143L13.6258 5.01431C14.2734 3.84876 16.0217 4.82005 15.3742 5.98559Z" fill="#fff"/><path d="M5.1247 9.71907L10.1247 13.7191C11.1659 14.552 9.91646 16.1137 8.87531 15.2808L3.87531 11.2808C2.83415 10.4479 4.08354 8.88615 5.1247 9.71907Z" fill="#fff"/></svg></>,
-        disableCompleteIcon = true,
-        onChange,
-        children
-    } = props;
-
-
-    const rootRef = useRef<HTMLDivElement>(null);
-    const [isLastStepComplete, setIsLastStepComplete] = useState<boolean>(false);
-    const [activeIndex, setActiveIndex] = useState<number>(initialStep);
-    const panels = React.Children.toArray(children) as React.ReactElement<StepperPanelProps>[];
-    const isVertical: boolean = layout === 'vertical';
-    const prevActiveIndexRef = useRef<number>(activeIndex);
-    const prevIsLastStepCompleteRef = useRef<boolean>(isLastStepComplete);
-
-    useImperativeHandle(
-        ref,
-        () => ({
-            goto: (index: number) => {
-                if (index >= 0 && index < panels.length) {
-                    setActiveIndex(index);
-                }
-            },
-            next: () => {
-                setActiveIndex((prevState) => {
-                    const _val = Math.min(prevState + 1, panels.length - 1);
-                    return _val;
-                });
-            },
-            prev: () => {
-                setActiveIndex((prevState) => {
-                    const _val = Math.max(prevState - 1, 0);
-                    return _val;
-                });
-
-                setIsLastStepComplete(false);
-            },
-            setLastStepComplete: (val: boolean) => {
-                setIsLastStepComplete(val);
-            },
-        }),
-        [panels.length],
-    );
-
-    const horizontalPanelsGenerator = (): JSX.Element => {
-        return <>
-            <div className="stepper-header">
-                {panels.map((panel, index) => {
-                    const { header } = panel.props;
-                    const isActive = index === activeIndex;
-                    const isCompleted = index < activeIndex || (index === panels.length - 1 && isLastStepComplete); 
-
-                    return (
-                        <React.Fragment key={index}>
-                            <div 
-                                data-step-index={index}
-                                className={combinedCls(
-                                    'step-item',
-                                    {
-                                        'step-item--clickable': indicatorClickAllowed && !isLastStepComplete
-                                    }
-                                )} 
-                                onClick={indicatorClickAllowed && !isLastStepComplete ? () => {
-                                    setActiveIndex(index);
-                                    setIsLastStepComplete(false);
-                                } : undefined}
-                            >
-                                <div
-                                    className={combinedCls(
-                                        'step-indicator',
-                                        {
-                                            'step-indicator--active': isActive,
-                                            'step-indicator--complete': isCompleted
-                                        }
-                                    )} 
-                                >
-                                    {isCompleted ? <>{disableCompleteIcon ? index + 1 : completeIcon}</> : index + 1}
-                                </div>
-                                <div
-                                    className={combinedCls(
-                                        'step-title',
-                                        {
-                                            'step-title--active': isActive,
-                                            'step-title--complete': isCompleted
-                                        }
-                                    )} 
-                                >
-                                    {header}
-                                </div>
-                            </div>
-                            {index < panels.length - 1 && (
-                                <div
-                                    className={combinedCls(
-                                        'step-line',
-                                        {
-                                            'step-line--active': index === activeIndex - 1,
-                                            'step-line--complete': index < activeIndex - 1
-                                        }
-                                    )} 
-                                />
-                            )}
-                        </React.Fragment>
-                    );
-                })}
-            </div>
-
-            <div className="stepper-panels">
-                {panels[activeIndex]}
-            </div>
-        </>;
-    };
-
-    const verticalPanelsGenerator = (): JSX.Element => {
-        return <>
-            {panels.map((panel, index) => {
-                const { header } = panel.props;
-                const isActive = index === activeIndex;
-                const isCompleted = index < activeIndex || (index === panels.length - 1 && isLastStepComplete);
-
-                return (
-                    <div 
-                        key={index} 
-                        className={combinedCls(
-                            'vertical-step-row',
-                            {
-                                'vertical-step-row--active': isActive,
-                                'vertical-step-row--complete': isCompleted
-                            }
-                        )} 
-                    >
-                        {/* Left */}
-                        <div className="vertical-step-left">
-                            <div
-                                data-step-index={index}
-                                className={combinedCls(
-                                    'step-item',
-                                    {
-                                        'step-item--clickable': indicatorClickAllowed && !isLastStepComplete
-                                    }
-                                )} 
-                                onClick={indicatorClickAllowed && !isLastStepComplete ? () => {
-                                    setActiveIndex(index);
-                                    setIsLastStepComplete(false);
-                                } : undefined}
-                            >
-                                <div
-                                    className={combinedCls(
-                                        'step-indicator',
-                                        {
-                                            'step-indicator--active': isActive,
-                                            'step-indicator--complete': isCompleted
-                                        }
-                                    )} 
-                                >
-                                    {isCompleted ?  <>{disableCompleteIcon ? index + 1 : completeIcon}</> : index + 1}
-                                </div>
-                                <div
-                                    className={combinedCls(
-                                        'step-title',
-                                        {
-                                            'step-title--active': isActive,
-                                            'step-title--complete': isCompleted
-                                        }
-                                    )} 
-                                >
-                                    {header}
-                                </div>
-                            </div>
-
-                            {index < panels.length - 1 && (
-                                <div
-                                    className={combinedCls(
-                                        'step-line',
-                                        {
-                                            'step-line--active': index === activeIndex - 1,
-                                            'step-line--complete': index < activeIndex - 1
-                                        }
-                                    )} 
-                                />
-                            )}
-                        </div>
-
-                        {/* Right */}
-                        {isActive && (
-                            <div className="vertical-step-right">
-                                {panels[activeIndex]}
-                            </div>
-                        )}
-                    </div>
-                );
-            })}
-        </>;
-    };
-
-    // Calculate the width/height of the progress line
-    const calculateProgressStyle = () => {
-        if (!panels.length || rootRef.current === null) return {};
-        
-        const stepItems = rootRef.current.querySelectorAll('.step-item');
-        if (!stepItems.length) return {};
-
-        if (isVertical) {
-            const totalHeight = stepItems[0].clientHeight * (panels.length - 1);
-            const progress = (activeIndex / (panels.length - 1)) * 100;
-            return {
-                '--stepper-progress-height': `${progress}%`
-            } as React.CSSProperties;
-        } else {
-            
-            const defaultProgress = (activeIndex / (panels.length - 1)) * 100;
-            const firstItem = stepItems[0] as HTMLDivElement;
-            const lastItem = stepItems[stepItems.length - 1] as HTMLDivElement;
-            if (!firstItem || !lastItem) return {};
-
-            const firstCenter = firstItem.offsetLeft + (firstItem.clientWidth / 2);
-            const lastCenter = lastItem.offsetLeft + (lastItem.clientWidth / 2);
-            const totalWidth = lastCenter - firstCenter;
-
-            const currentItem = stepItems[activeIndex] as HTMLDivElement;
-            if (!currentItem) return {};
-
-            const currentCenter = currentItem.offsetLeft + (currentItem.clientWidth / 2);
-            const progress = defaultProgress !== 0 && activeIndex > 0 ? defaultProgress : ((currentCenter - firstCenter) / totalWidth) * 100;
-
-            return {
-                '--stepper-progress-width': `${isNaN(progress) ? 0 : progress}%`
-            } as React.CSSProperties;
-        }
-    };
-
-    useEffect(() => {
-        // Only trigger onChange if values actually changed from previous values
-        if (prevActiveIndexRef.current !== activeIndex || 
-            prevIsLastStepCompleteRef.current !== isLastStepComplete) {
-            
-            prevActiveIndexRef.current = activeIndex;
-            prevIsLastStepCompleteRef.current = isLastStepComplete;
-            
-            onChange?.(activeIndex, isLastStepComplete);
-        }
-    }, [activeIndex, isLastStepComplete]);
-
-
-    useEffect(() => {
-        // Force a recalculation of the progress line
-        const timer = setTimeout(() => {
-            setActiveIndex(prev => prev);
-        }, 0);
-        return () => clearTimeout(timer);
-    }, []);
-
-    return (
-        <div 
-            ref={rootRef}
-            className={combinedCls(
-                'stepper-container',
-                clsWrite(wrapperClassName, ''),
-                {
-                    'stepper-container--vertical': isVertical
-                }
-            )} 
-            style={{
-                ...style,
-                ...calculateProgressStyle()
-            }}
-        >
-            {!isVertical && horizontalPanelsGenerator()}
-            {isVertical && verticalPanelsGenerator()}
-        </div>
-    );
-});
-
-export { Stepper, StepperPanel };
-export type { StepperProps, StepperPanelProps, StepperRef };