ywana-core8 0.1.74 → 0.1.76

package/src/html/progress.js

@@ -1,28 +1,925 @@
-import React from 'react'
+import React, { useState, useEffect, useCallback, useMemo } from 'react'
+import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import './progress.css'
 
 /**
- * Circular Progress
+ * Enhanced Circular Progress component with professional features
  */
 export const CircularProgress = (props) => {
+    const {
+        value = 0,
+        max = 100,
+        size = 'medium',
+        thickness = 4,
+        variant = 'indeterminate',
+        color = 'primary',
+        showValue = false,
+        showLabel = false,
+        label,
+        icon,
+        animated = true,
+        disabled = false,
+        className,
+        style,
+        children,
+        onComplete,
+        formatValue,
+        ariaLabel,
+        ...restProps
+    } = props
+
+    const [animatedValue, setAnimatedValue] = useState(0)
+    const [isComplete, setIsComplete] = useState(false)
+
+    // Animate value changes
+    useEffect(() => {
+        if (variant === 'determinate' && animated) {
+            const startValue = animatedValue
+            const endValue = Math.min(Math.max(value, 0), max)
+            const duration = 300
+            const startTime = Date.now()
+
+            const animate = () => {
+                const elapsed = Date.now() - startTime
+                const progress = Math.min(elapsed / duration, 1)
+                const easeOutQuart = 1 - Math.pow(1 - progress, 4)
+                const currentValue = startValue + (endValue - startValue) * easeOutQuart
+
+                setAnimatedValue(currentValue)
+
+                if (progress < 1) {
+                    requestAnimationFrame(animate)
+                } else {
+                    if (endValue >= max && !isComplete) {
+                        setIsComplete(true)
+                        if (onComplete) onComplete()
+                    }
+                }
+            }
+
+            requestAnimationFrame(animate)
+        } else {
+            setAnimatedValue(value)
+        }
+    }, [value, max, variant, animated, animatedValue, isComplete, onComplete])
+
+    // Calculate dimensions based on size
+    const dimensions = useMemo(() => {
+        const sizes = {
+            small: { size: 24, strokeWidth: 2 },
+            medium: { size: 40, strokeWidth: 3 },
+            large: { size: 56, strokeWidth: 4 },
+            xlarge: { size: 80, strokeWidth: 5 }
+        }
+        return sizes[size] || sizes.medium
+    }, [size])
+
+    // Calculate circle properties
+    const radius = (dimensions.size - thickness) / 2
+    const circumference = 2 * Math.PI * radius
+    const strokeDasharray = circumference
+    const strokeDashoffset = variant === 'determinate'
+        ? circumference - (animatedValue / max) * circumference
+        : 0
+
+    // Format display value
+    const displayValue = useMemo(() => {
+        if (formatValue) {
+            return formatValue(animatedValue, max)
+        }
+        return variant === 'determinate'
+            ? `${Math.round((animatedValue / max) * 100)}%`
+            : ''
+    }, [animatedValue, max, formatValue, variant])
+
+    // Generate CSS classes
+    const cssClasses = [
+        'circular-progress',
+        `circular-progress--${size}`,
+        `circular-progress--${variant}`,
+        `circular-progress--${color}`,
+        disabled && 'circular-progress--disabled',
+        isComplete && 'circular-progress--complete',
+        animated && 'circular-progress--animated',
+        className
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || (variant === 'determinate' ? `Progress: ${displayValue}` : 'Loading'),
+        'aria-valuenow': variant === 'determinate' ? animatedValue : undefined,
+        'aria-valuemin': variant === 'determinate' ? 0 : undefined,
+        'aria-valuemax': variant === 'determinate' ? max : undefined,
+        'aria-valuetext': variant === 'determinate' ? displayValue : 'Loading',
+        role: 'progressbar'
+    }
+
     return (
-        <div className="circular-progress">
-            <Icon icon="refresh" size="small" />
+        <div
+            className={cssClasses}
+            style={{
+                width: dimensions.size,
+                height: dimensions.size,
+                ...style
+            }}
+            {...ariaAttributes}
+            {...restProps}
+        >
+            <svg
+                className="circular-progress__svg"
+                width={dimensions.size}
+                height={dimensions.size}
+                viewBox={`0 0 ${dimensions.size} ${dimensions.size}`}
+            >
+                {/* Background circle */}
+                <circle
+                    className="circular-progress__background"
+                    cx={dimensions.size / 2}
+                    cy={dimensions.size / 2}
+                    r={radius}
+                    fill="none"
+                    strokeWidth={thickness}
+                />
+
+                {/* Progress circle */}
+                <circle
+                    className="circular-progress__progress"
+                    cx={dimensions.size / 2}
+                    cy={dimensions.size / 2}
+                    r={radius}
+                    fill="none"
+                    strokeWidth={thickness}
+                    strokeDasharray={strokeDasharray}
+                    strokeDashoffset={strokeDashoffset}
+                    strokeLinecap="round"
+                    transform={`rotate(-90 ${dimensions.size / 2} ${dimensions.size / 2})`}
+                />
+            </svg>
+
+            {/* Content overlay */}
+            <div className="circular-progress__content">
+                {icon && (
+                    <Icon
+                        icon={icon}
+                        size={size === 'small' ? 'small' : 'medium'}
+                        className="circular-progress__icon"
+                    />
+                )}
+
+                {showValue && variant === 'determinate' && (
+                    <span className="circular-progress__value">
+                        {displayValue}
+                    </span>
+                )}
+
+                {children}
+            </div>
+
+            {(showLabel || label) && (
+                <div className="circular-progress__label">
+                    {label || (variant === 'determinate' ? displayValue : 'Loading...')}
+                </div>
+            )}
         </div>
     )
 }
 
 /**
- * Linear Progress
+ * Enhanced Linear Progress component with professional features
  */
 export const LinearProgress = (props) => {
+    const {
+        value = 0,
+        max = 100,
+        variant = 'determinate',
+        color = 'primary',
+        size = 'medium',
+        showValue = false,
+        showLabel = false,
+        label,
+        buffer,
+        animated = true,
+        striped = false,
+        disabled = false,
+        rounded = true,
+        className,
+        style,
+        onComplete,
+        formatValue,
+        ariaLabel,
+        estimatedTime,
+        speed,
+        ...restProps
+    } = props
+
+    const [animatedValue, setAnimatedValue] = useState(0)
+    const [animatedBuffer, setAnimatedBuffer] = useState(0)
+    const [isComplete, setIsComplete] = useState(false)
+    const [timeRemaining, setTimeRemaining] = useState(null)
+
+    // Animate value changes
+    useEffect(() => {
+        if (variant === 'determinate' && animated) {
+            const startValue = animatedValue
+            const endValue = Math.min(Math.max(value, 0), max)
+            const duration = 300
+            const startTime = Date.now()
+
+            const animate = () => {
+                const elapsed = Date.now() - startTime
+                const progress = Math.min(elapsed / duration, 1)
+                const easeOutQuart = 1 - Math.pow(1 - progress, 4)
+                const currentValue = startValue + (endValue - startValue) * easeOutQuart
+
+                setAnimatedValue(currentValue)
+
+                if (progress < 1) {
+                    requestAnimationFrame(animate)
+                } else {
+                    if (endValue >= max && !isComplete) {
+                        setIsComplete(true)
+                        if (onComplete) onComplete()
+                    }
+                }
+            }
+
+            requestAnimationFrame(animate)
+        } else {
+            setAnimatedValue(value)
+        }
+    }, [value, max, variant, animated, animatedValue, isComplete, onComplete])
+
+    // Animate buffer changes
+    useEffect(() => {
+        if (buffer !== undefined && animated) {
+            const startBuffer = animatedBuffer
+            const endBuffer = Math.min(Math.max(buffer, 0), max)
+            const duration = 200
+            const startTime = Date.now()
+
+            const animate = () => {
+                const elapsed = Date.now() - startTime
+                const progress = Math.min(elapsed / duration, 1)
+                const easeOutQuart = 1 - Math.pow(1 - progress, 4)
+                const currentBuffer = startBuffer + (endBuffer - startBuffer) * easeOutQuart
+
+                setAnimatedBuffer(currentBuffer)
+
+                if (progress < 1) {
+                    requestAnimationFrame(animate)
+                }
+            }
 
-    const { progress= 0, max = 100 } = props
+            requestAnimationFrame(animate)
+        } else if (buffer !== undefined) {
+            setAnimatedBuffer(buffer)
+        }
+    }, [buffer, max, animated, animatedBuffer])
+
+    // Calculate time remaining
+    useEffect(() => {
+        if (estimatedTime && variant === 'determinate') {
+            const progressPercent = animatedValue / max
+            const remaining = progressPercent > 0
+                ? estimatedTime * (1 - progressPercent)
+                : estimatedTime
+            setTimeRemaining(remaining)
+        } else if (speed && variant === 'determinate') {
+            const remaining = (max - animatedValue) / speed
+            setTimeRemaining(remaining)
+        }
+    }, [animatedValue, max, estimatedTime, speed, variant])
+
+    // Calculate percentages
+    const progressPercent = (animatedValue / max) * 100
+    const bufferPercent = buffer !== undefined ? (animatedBuffer / max) * 100 : 0
+
+    // Format display value
+    const displayValue = useMemo(() => {
+        if (formatValue) {
+            return formatValue(animatedValue, max)
+        }
+        return variant === 'determinate'
+            ? `${Math.round(progressPercent)}%`
+            : ''
+    }, [animatedValue, max, formatValue, variant, progressPercent])
+
+    // Format time remaining
+    const displayTimeRemaining = useMemo(() => {
+        if (!timeRemaining) return ''
+
+        const minutes = Math.floor(timeRemaining / 60)
+        const seconds = Math.floor(timeRemaining % 60)
+
+        if (minutes > 0) {
+            return `${minutes}m ${seconds}s remaining`
+        }
+        return `${seconds}s remaining`
+    }, [timeRemaining])
+
+    // Generate CSS classes
+    const cssClasses = [
+        'linear-progress',
+        `linear-progress--${size}`,
+        `linear-progress--${variant}`,
+        `linear-progress--${color}`,
+        striped && 'linear-progress--striped',
+        rounded && 'linear-progress--rounded',
+        disabled && 'linear-progress--disabled',
+        isComplete && 'linear-progress--complete',
+        animated && 'linear-progress--animated',
+        className
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || (variant === 'determinate' ? `Progress: ${displayValue}` : 'Loading'),
+        'aria-valuenow': variant === 'determinate' ? animatedValue : undefined,
+        'aria-valuemin': variant === 'determinate' ? 0 : undefined,
+        'aria-valuemax': variant === 'determinate' ? max : undefined,
+        'aria-valuetext': variant === 'determinate' ? displayValue : 'Loading',
+        role: 'progressbar'
+    }
+
+    return (
+        <div className={cssClasses} style={style} {...restProps}>
+            {/* Header with label and value */}
+            {(showLabel || showValue || label || timeRemaining) && (
+                <div className="linear-progress__header">
+                    <div className="linear-progress__label">
+                        {label || (showLabel && variant === 'determinate' ? 'Progress' : '')}
+                    </div>
+                    <div className="linear-progress__info">
+                        {showValue && variant === 'determinate' && (
+                            <span className="linear-progress__value">
+                                {displayValue}
+                            </span>
+                        )}
+                        {timeRemaining && (
+                            <span className="linear-progress__time">
+                                {displayTimeRemaining}
+                            </span>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* Progress track */}
+            <div className="linear-progress__track" {...ariaAttributes}>
+                {/* Buffer bar (if provided) */}
+                {buffer !== undefined && (
+                    <div
+                        className="linear-progress__buffer"
+                        style={{ width: `${bufferPercent}%` }}
+                    />
+                )}
+
+                {/* Progress bar */}
+                <div
+                    className="linear-progress__bar"
+                    style={{
+                        width: variant === 'determinate' ? `${progressPercent}%` : undefined
+                    }}
+                >
+                    {/* Indeterminate animation elements */}
+                    {variant === 'indeterminate' && (
+                        <>
+                            <div className="linear-progress__bar-primary" />
+                            <div className="linear-progress__bar-secondary" />
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Step Progress component for multi-step processes
+ */
+export const StepProgress = (props) => {
+    const {
+        steps = [],
+        currentStep = 0,
+        variant = 'horizontal',
+        color = 'primary',
+        size = 'medium',
+        showLabels = true,
+        showNumbers = true,
+        allowClickNavigation = false,
+        animated = true,
+        className,
+        onStepClick,
+        ...restProps
+    } = props
+
+    const handleStepClick = useCallback((stepIndex, step) => {
+        if (allowClickNavigation && onStepClick && stepIndex <= currentStep) {
+            onStepClick(stepIndex, step)
+        }
+    }, [allowClickNavigation, onStepClick, currentStep])
+
+    // Generate CSS classes
+    const cssClasses = [
+        'step-progress',
+        `step-progress--${variant}`,
+        `step-progress--${size}`,
+        `step-progress--${color}`,
+        animated && 'step-progress--animated',
+        className
+    ].filter(Boolean).join(' ')
 
     return (
-        <div className="linear-progress">
-            <progress value={progress} max={max}/>
+        <div className={cssClasses} {...restProps}>
+            {steps.map((step, index) => {
+                const isCompleted = index < currentStep
+                const isCurrent = index === currentStep
+                const isClickable = allowClickNavigation && index <= currentStep
+
+                const stepClasses = [
+                    'step-progress__step',
+                    isCompleted && 'step-progress__step--completed',
+                    isCurrent && 'step-progress__step--current',
+                    isClickable && 'step-progress__step--clickable',
+                    step.error && 'step-progress__step--error'
+                ].filter(Boolean).join(' ')
+
+                return (
+                    <div key={step.id || index} className={stepClasses}>
+                        {/* Connector line (except for last step) */}
+                        {index < steps.length - 1 && (
+                            <div className="step-progress__connector" />
+                        )}
+
+                        {/* Step circle */}
+                        <div
+                            className="step-progress__circle"
+                            onClick={() => handleStepClick(index, step)}
+                            role={isClickable ? 'button' : undefined}
+                            tabIndex={isClickable ? 0 : -1}
+                            aria-label={`Step ${index + 1}: ${step.label}`}
+                        >
+                            {step.error ? (
+                                <Icon icon="error" size="small" />
+                            ) : isCompleted ? (
+                                <Icon icon="check" size="small" />
+                            ) : showNumbers ? (
+                                <span className="step-progress__number">
+                                    {index + 1}
+                                </span>
+                            ) : (
+                                step.icon && <Icon icon={step.icon} size="small" />
+                            )}
+                        </div>
+
+                        {/* Step label */}
+                        {showLabels && (
+                            <div className="step-progress__label">
+                                <div className="step-progress__title">
+                                    {step.label}
+                                </div>
+                                {step.description && (
+                                    <div className="step-progress__description">
+                                        {step.description}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </div>
+                )
+            })}
         </div>
     )
-}
+}
+
+/**
+ * Radial Progress component for dashboard-style displays
+ */
+export const RadialProgress = (props) => {
+    const {
+        value = 0,
+        max = 100,
+        size = 120,
+        thickness = 8,
+        color = 'primary',
+        backgroundColor = 'rgba(0,0,0,0.1)',
+        showValue = true,
+        showLabel = false,
+        label,
+        icon,
+        animated = true,
+        gradient = false,
+        className,
+        formatValue,
+        children,
+        ...restProps
+    } = props
+
+    const [animatedValue, setAnimatedValue] = useState(0)
+
+    // Animate value changes
+    useEffect(() => {
+        if (animated) {
+            const startValue = animatedValue
+            const endValue = Math.min(Math.max(value, 0), max)
+            const duration = 800
+            const startTime = Date.now()
+
+            const animate = () => {
+                const elapsed = Date.now() - startTime
+                const progress = Math.min(elapsed / duration, 1)
+                const easeOutCubic = 1 - Math.pow(1 - progress, 3)
+                const currentValue = startValue + (endValue - startValue) * easeOutCubic
+
+                setAnimatedValue(currentValue)
+
+                if (progress < 1) {
+                    requestAnimationFrame(animate)
+                }
+            }
+
+            requestAnimationFrame(animate)
+        } else {
+            setAnimatedValue(value)
+        }
+    }, [value, max, animated, animatedValue])
+
+    // Calculate circle properties
+    const radius = (size - thickness) / 2
+    const circumference = 2 * Math.PI * radius
+    const strokeDasharray = circumference
+    const strokeDashoffset = circumference - (animatedValue / max) * circumference
+    const percentage = Math.round((animatedValue / max) * 100)
+
+    // Format display value
+    const displayValue = formatValue ? formatValue(animatedValue, max) : `${percentage}%`
+
+    // Generate CSS classes
+    const cssClasses = [
+        'radial-progress',
+        `radial-progress--${color}`,
+        gradient && 'radial-progress--gradient',
+        animated && 'radial-progress--animated',
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <div
+            className={cssClasses}
+            style={{ width: size, height: size }}
+            {...restProps}
+        >
+            <svg
+                className="radial-progress__svg"
+                width={size}
+                height={size}
+                viewBox={`0 0 ${size} ${size}`}
+            >
+                {/* Gradient definition */}
+                {gradient && (
+                    <defs>
+                        <linearGradient id={`gradient-${color}`} x1="0%" y1="0%" x2="100%" y2="100%">
+                            <stop offset="0%" stopColor="var(--primary-color-light)" />
+                            <stop offset="100%" stopColor="var(--primary-color-dark)" />
+                        </linearGradient>
+                    </defs>
+                )}
+
+                {/* Background circle */}
+                <circle
+                    className="radial-progress__background"
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    fill="none"
+                    stroke={backgroundColor}
+                    strokeWidth={thickness}
+                />
+
+                {/* Progress circle */}
+                <circle
+                    className="radial-progress__progress"
+                    cx={size / 2}
+                    cy={size / 2}
+                    r={radius}
+                    fill="none"
+                    stroke={gradient ? `url(#gradient-${color})` : undefined}
+                    strokeWidth={thickness}
+                    strokeDasharray={strokeDasharray}
+                    strokeDashoffset={strokeDashoffset}
+                    strokeLinecap="round"
+                    transform={`rotate(-90 ${size / 2} ${size / 2})`}
+                />
+            </svg>
+
+            {/* Content overlay */}
+            <div className="radial-progress__content">
+                {icon && (
+                    <Icon
+                        icon={icon}
+                        size="large"
+                        className="radial-progress__icon"
+                    />
+                )}
+
+                {showValue && (
+                    <div className="radial-progress__value">
+                        {displayValue}
+                    </div>
+                )}
+
+                {(showLabel || label) && (
+                    <div className="radial-progress__label">
+                        {label || 'Progress'}
+                    </div>
+                )}
+
+                {children}
+            </div>
+        </div>
+    )
+}
+
+/**
+ * Multi Progress component for showing multiple progress bars
+ */
+export const MultiProgress = (props) => {
+    const {
+        items = [],
+        showLabels = true,
+        showValues = true,
+        size = 'medium',
+        animated = true,
+        className,
+        ...restProps
+    } = props
+
+    const cssClasses = [
+        'multi-progress',
+        `multi-progress--${size}`,
+        animated && 'multi-progress--animated',
+        className
+    ].filter(Boolean).join(' ')
+
+    return (
+        <div className={cssClasses} {...restProps}>
+            {items.map((item, index) => (
+                <div key={item.id || index} className="multi-progress__item">
+                    {showLabels && (
+                        <div className="multi-progress__header">
+                            <span className="multi-progress__label">
+                                {item.label}
+                            </span>
+                            {showValues && (
+                                <span className="multi-progress__value">
+                                    {item.formatValue ?
+                                        item.formatValue(item.value, item.max) :
+                                        `${Math.round((item.value / item.max) * 100)}%`
+                                    }
+                                </span>
+                            )}
+                        </div>
+                    )}
+                    <LinearProgress
+                        value={item.value}
+                        max={item.max}
+                        color={item.color || 'primary'}
+                        size={size}
+                        animated={animated}
+                        className="multi-progress__bar"
+                    />
+                </div>
+            ))}
+        </div>
+    )
+}
+
+// PropTypes for all components
+CircularProgress.propTypes = {
+    /** Current progress value */
+    value: PropTypes.number,
+    /** Maximum value */
+    max: PropTypes.number,
+    /** Size variant */
+    size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
+    /** Stroke thickness */
+    thickness: PropTypes.number,
+    /** Progress variant */
+    variant: PropTypes.oneOf(['determinate', 'indeterminate']),
+    /** Color theme */
+    color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'error']),
+    /** Show percentage value */
+    showValue: PropTypes.bool,
+    /** Show label below */
+    showLabel: PropTypes.bool,
+    /** Custom label text */
+    label: PropTypes.string,
+    /** Icon to display */
+    icon: PropTypes.string,
+    /** Enable animations */
+    animated: PropTypes.bool,
+    /** Disabled state */
+    disabled: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Inline styles */
+    style: PropTypes.object,
+    /** Child elements */
+    children: PropTypes.node,
+    /** Callback when progress completes */
+    onComplete: PropTypes.func,
+    /** Custom value formatter */
+    formatValue: PropTypes.func,
+    /** ARIA label */
+    ariaLabel: PropTypes.string
+}
+
+CircularProgress.defaultProps = {
+    value: 0,
+    max: 100,
+    size: 'medium',
+    thickness: 4,
+    variant: 'indeterminate',
+    color: 'primary',
+    showValue: false,
+    showLabel: false,
+    animated: true,
+    disabled: false
+}
+
+LinearProgress.propTypes = {
+    /** Current progress value */
+    value: PropTypes.number,
+    /** Maximum value */
+    max: PropTypes.number,
+    /** Progress variant */
+    variant: PropTypes.oneOf(['determinate', 'indeterminate']),
+    /** Color theme */
+    color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'error']),
+    /** Size variant */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /** Show percentage value */
+    showValue: PropTypes.bool,
+    /** Show label */
+    showLabel: PropTypes.bool,
+    /** Custom label text */
+    label: PropTypes.string,
+    /** Buffer value for buffered progress */
+    buffer: PropTypes.number,
+    /** Enable animations */
+    animated: PropTypes.bool,
+    /** Show striped pattern */
+    striped: PropTypes.bool,
+    /** Disabled state */
+    disabled: PropTypes.bool,
+    /** Rounded corners */
+    rounded: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Inline styles */
+    style: PropTypes.object,
+    /** Callback when progress completes */
+    onComplete: PropTypes.func,
+    /** Custom value formatter */
+    formatValue: PropTypes.func,
+    /** ARIA label */
+    ariaLabel: PropTypes.string,
+    /** Estimated time to completion */
+    estimatedTime: PropTypes.number,
+    /** Progress speed (units per second) */
+    speed: PropTypes.number
+}
+
+LinearProgress.defaultProps = {
+    value: 0,
+    max: 100,
+    variant: 'determinate',
+    color: 'primary',
+    size: 'medium',
+    showValue: false,
+    showLabel: false,
+    animated: true,
+    striped: false,
+    disabled: false,
+    rounded: true
+}
+
+StepProgress.propTypes = {
+    /** Array of step objects */
+    steps: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        label: PropTypes.string.isRequired,
+        description: PropTypes.string,
+        icon: PropTypes.string,
+        error: PropTypes.bool
+    })).isRequired,
+    /** Current active step index */
+    currentStep: PropTypes.number,
+    /** Layout variant */
+    variant: PropTypes.oneOf(['horizontal', 'vertical']),
+    /** Color theme */
+    color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'error']),
+    /** Size variant */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /** Show step labels */
+    showLabels: PropTypes.bool,
+    /** Show step numbers */
+    showNumbers: PropTypes.bool,
+    /** Allow clicking to navigate */
+    allowClickNavigation: PropTypes.bool,
+    /** Enable animations */
+    animated: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Callback when step is clicked */
+    onStepClick: PropTypes.func
+}
+
+StepProgress.defaultProps = {
+    currentStep: 0,
+    variant: 'horizontal',
+    color: 'primary',
+    size: 'medium',
+    showLabels: true,
+    showNumbers: true,
+    allowClickNavigation: false,
+    animated: true
+}
+
+RadialProgress.propTypes = {
+    /** Current progress value */
+    value: PropTypes.number,
+    /** Maximum value */
+    max: PropTypes.number,
+    /** Circle size in pixels */
+    size: PropTypes.number,
+    /** Stroke thickness */
+    thickness: PropTypes.number,
+    /** Color theme */
+    color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'error']),
+    /** Background color */
+    backgroundColor: PropTypes.string,
+    /** Show percentage value */
+    showValue: PropTypes.bool,
+    /** Show label */
+    showLabel: PropTypes.bool,
+    /** Custom label text */
+    label: PropTypes.string,
+    /** Icon to display */
+    icon: PropTypes.string,
+    /** Enable animations */
+    animated: PropTypes.bool,
+    /** Use gradient colors */
+    gradient: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Custom value formatter */
+    formatValue: PropTypes.func,
+    /** Child elements */
+    children: PropTypes.node
+}
+
+RadialProgress.defaultProps = {
+    value: 0,
+    max: 100,
+    size: 120,
+    thickness: 8,
+    color: 'primary',
+    backgroundColor: 'rgba(0,0,0,0.1)',
+    showValue: true,
+    showLabel: false,
+    animated: true,
+    gradient: false
+}
+
+MultiProgress.propTypes = {
+    /** Array of progress items */
+    items: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        label: PropTypes.string.isRequired,
+        value: PropTypes.number.isRequired,
+        max: PropTypes.number,
+        color: PropTypes.string,
+        formatValue: PropTypes.func
+    })).isRequired,
+    /** Show item labels */
+    showLabels: PropTypes.bool,
+    /** Show item values */
+    showValues: PropTypes.bool,
+    /** Size variant */
+    size: PropTypes.oneOf(['small', 'medium', 'large']),
+    /** Enable animations */
+    animated: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string
+}
+
+MultiProgress.defaultProps = {
+    showLabels: true,
+    showValues: true,
+    size: 'medium',
+    animated: true
+}
+
+export default { CircularProgress, LinearProgress, StepProgress, RadialProgress, MultiProgress }