@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.10 → 0.2.16

package/dist/components/ui/feedback/progress.esm.js

@@ -1,292 +1,88 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { useTheme } from '../../../themes/useTheme';
-import { ProgressProps, ProgressStep } from './types';
-
 // Default color fallbacks for when theme is not available
 const getDefaultColors = () => ({
-  surface: { background: '#ffffff', surface: '#f3f4f6', border: '#d1d5db', divider: '#e5e7eb' },
-  text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff', onPrimary: '#ffffff', onSecondary: '#ffffff', onSurface: '#111827' },
-  interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
-  primary: { 500: '#3b82f6' },
-  semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
+    surface: { background: '#ffffff', surface: '#f3f4f6', border: '#d1d5db', divider: '#e5e7eb' },
+    text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff', onPrimary: '#ffffff', onSecondary: '#ffffff', onSurface: '#111827' },
+    interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
+    primary: { 500: '#3b82f6' },
+    semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
 });
-
 // Linear Progress Component
-const LinearProgress: React.FC<ProgressProps> = ({
-  value,
-  max = 100,
-  min = 0,
-  animated = true,
-  striped = false,
-  color,
-  size = 'md',
-  className = ''
-}) => {
-  // Note: theme and colors not needed as we're using semantic CSS classes
-
-  const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
-
-  return (
-    <div className={`progress__container progress__container--${size} ${className}`}>
-      <div
-        className={`progress__bar ${animated ? 'progress__bar--animated' : ''} ${striped ? 'progress__bar--striped' : ''} ${color ? `progress__bar--${color}` : ''}`}
-        style={{ width: `${percentage}%` }}
-      />
-    </div>
-  );
+const LinearProgress = ({ value, max = 100, min = 0, animated = true, striped = false, color, size = 'md', className = '' }) => {
+    // Note: theme and colors not needed as we're using semantic CSS classes
+    const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+    return (_jsx("div", { className: `progress__container progress__container--${size} ${className}`, children: _jsx("div", { className: `progress__bar ${animated ? 'progress__bar--animated' : ''} ${striped ? 'progress__bar--striped' : ''} ${color ? `progress__bar--${color}` : ''}`, style: { width: `${percentage}%` } }) }));
 };
-
 // Circular Progress Component
-const CircularProgress: React.FC<ProgressProps> = ({
-  value,
-  max = 100,
-  min = 0,
-  animated = true,
-  color,
-  size = 'md',
-  thickness = 4,
-  trackColor,
-  progressColor,
-  className = ''
-}) => {
-  const { getTheme } = useTheme();
-  const themeConfig = getTheme('stan-design');
-  const colors = themeConfig?.colors || getDefaultColors();
-
-  const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
-  const radius = 50 - (thickness / 2);
-  const circumference = 2 * Math.PI * radius;
-  const strokeDasharray = circumference;
-  const strokeDashoffset = circumference - (percentage / 100) * circumference;
-
-  return (
-    <div className={`progress__circular progress__circular--${size} ${className}`}>
-      <svg className="progress__circle" viewBox="0 0 100 100">
-        {/* Track */}
-        <circle
-          cx="50"
-          cy="50"
-          r={radius}
-          className="progress__circle-track"
-          stroke={trackColor || colors.surface.border}
-          strokeWidth={thickness}
-        />
-        {/* Progress */}
-        <circle
-          cx="50"
-          cy="50"
-          r={radius}
-          className={`progress__circle-progress ${animated ? 'progress__circle-progress--animated' : ''}`}
-          stroke={progressColor || color || colors.primary[500]}
-          strokeWidth={thickness}
-          strokeDasharray={strokeDasharray}
-          strokeDashoffset={strokeDashoffset}
-        />
-      </svg>
-      {/* Center text */}
-      <div className="progress__circle-label">
-        {Math.round(percentage)}%
-      </div>
-    </div>
-  );
+const CircularProgress = ({ value, max = 100, min = 0, animated = true, color, size = 'md', thickness = 4, trackColor, progressColor, className = '' }) => {
+    const { getTheme } = useTheme();
+    const themeConfig = getTheme('stan-design');
+    const colors = themeConfig?.colors || getDefaultColors();
+    const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
+    const radius = 50 - (thickness / 2);
+    const circumference = 2 * Math.PI * radius;
+    const strokeDasharray = circumference;
+    const strokeDashoffset = circumference - (percentage / 100) * circumference;
+    return (_jsxs("div", { className: `progress__circular progress__circular--${size} ${className}`, children: [_jsxs("svg", { className: "progress__circle", viewBox: "0 0 100 100", children: [_jsx("circle", { cx: "50", cy: "50", r: radius, className: "progress__circle-track", stroke: trackColor || colors.surface.border, strokeWidth: thickness }), _jsx("circle", { cx: "50", cy: "50", r: radius, className: `progress__circle-progress ${animated ? 'progress__circle-progress--animated' : ''}`, stroke: progressColor || color || colors.primary[500], strokeWidth: thickness, strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset })] }), _jsxs("div", { className: "progress__circle-label", children: [Math.round(percentage), "%"] })] }));
 };
-
 // Steps Progress Component
-const StepsProgress: React.FC<ProgressProps & { steps?: ProgressStep[] }> = ({
-  steps = [],
-  className = ''
-}) => {
-  // Note: size and colors not needed as we're using semantic CSS classes
-
-  const getStatusIcon = (status: ProgressStep['status']) => {
-    switch (status) {
-      case 'completed':
-        return (
-          <svg className="progress__step-icon" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-          </svg>
-        );
-      case 'active':
-        return (
-          <svg className="progress__step-icon" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
-          </svg>
-        );
-      case 'error':
-        return (
-          <svg className="progress__step-icon" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-          </svg>
-        );
-      case 'pending':
-      default:
-        return (
-          <svg className="progress__step-icon" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
-          </svg>
-        );
+const StepsProgress = ({ steps = [], className = '' }) => {
+    // Note: size and colors not needed as we're using semantic CSS classes
+    const getStatusIcon = (status) => {
+        switch (status) {
+            case 'completed':
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }));
+            case 'active':
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }));
+            case 'error':
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }));
+            case 'pending':
+            default:
+                return (_jsx("svg", { className: "progress__step-icon", fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" }) }));
+        }
+    };
+    if (steps.length === 0) {
+        return null;
     }
-  };
-
-  if (steps.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className={`progress__steps ${className}`}>
-      {steps.map((step, index) => (
-        <div key={index} className="progress__step">
-          {/* Step indicator */}
-          <div
-            className={`progress__step-indicator progress__step-indicator--${step.status}`}
-          >
-            {getStatusIcon(step.status)}
-          </div>
-
-          {/* Step connector */}
-          {index < steps.length - 1 && (
-            <div
-              className={`progress__step-connector ${step.status === 'completed' ? 'progress__step-connector--completed' : ''}`}
-            />
-          )}
-
-          {/* Step label */}
-          <div className={`progress__step-label progress__step-label--${step.status}`}>
-            <div className="progress__step-title">
-              {step.label}
-            </div>
-            {step.description && (
-              <div className="progress__step-description">
-                {step.description}
-              </div>
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
+    return (_jsx("div", { className: `progress__steps ${className}`, children: steps.map((step, index) => (_jsxs("div", { className: "progress__step", children: [_jsx("div", { className: `progress__step-indicator progress__step-indicator--${step.status}`, children: getStatusIcon(step.status) }), index < steps.length - 1 && (_jsx("div", { className: `progress__step-connector ${step.status === 'completed' ? 'progress__step-connector--completed' : ''}` })), _jsxs("div", { className: `progress__step-label progress__step-label--${step.status}`, children: [_jsx("div", { className: "progress__step-title", children: step.label }), step.description && (_jsx("div", { className: "progress__step-description", children: step.description }))] })] }, index))) }));
 };
-
 // Main Progress Component
-export const Progress: React.FC<ProgressProps> = ({
-  value,
-  max = 100,
-  min = 0,
-  label,
-  showLabel = false,
-  showValue = false,
-  showPercentage = false,
-  animated = true,
-  striped = false,
-  color,
-  size = 'md',
-  variant = 'linear',
-  thickness,
-  trackColor,
-  progressColor,
-  indeterminate = false,
-  onComplete,
-  className = '',
-  theme = 'stan-design'
-}) => {
-  const { getTheme } = useTheme();
-  const themeConfig = getTheme(theme);
-  const colors = themeConfig?.colors || getDefaultColors();
-  
-  const [currentValue, setCurrentValue] = useState(value);
-
-  useEffect(() => {
-    setCurrentValue(value);
-    
-    if (value >= max && onComplete) {
-      onComplete();
-    }
-  }, [value, max, onComplete]);
-
-  useEffect(() => {
-    if (indeterminate) {
-      const interval = setInterval(() => {
-        setCurrentValue(prev => {
-          if (prev >= max) return min;
-          return prev + (max - min) / 20;
-        });
-      }, 100);
-      
-      return () => clearInterval(interval);
-    }
-  }, [indeterminate, min, max]);
-
-  const renderProgress = () => {
-    switch (variant) {
-      case 'circular':
-        return (
-          <CircularProgress
-            value={currentValue}
-            max={max}
-            min={min}
-            animated={animated}
-            color={color}
-            size={size}
-            thickness={thickness}
-            trackColor={trackColor}
-            progressColor={progressColor}
-            className={className}
-          />
-        );
-      case 'steps':
-        return (
-          <StepsProgress
-            value={currentValue}
-            max={max}
-            min={min}
-            size={size}
-            className={className}
-          />
-        );
-      case 'linear':
-      default:
-        return (
-          <LinearProgress
-            value={currentValue}
-            max={max}
-            min={min}
-            animated={animated}
-            striped={striped}
-            color={color}
-            size={size}
-            thickness={thickness}
-            trackColor={trackColor}
-            progressColor={progressColor}
-            className={className}
-          />
-        );
-    }
-  };
-
-  return (
-    <div className="w-full">
-      {/* Label and Value Display */}
-      {(showLabel || showValue || showPercentage) && (
-        <div className="flex justify-between items-center mb-2">
-          {showLabel && label && (
-            <span className="text-sm font-medium" style={{ color: colors.text.primary }}>
-              {label}
-            </span>
-          )}
-          {(showValue || showPercentage) && (
-            <span className="text-sm" style={{ color: colors.text.secondary }}>
-              {showValue && `${currentValue}/${max}`}
-              {showValue && showPercentage && ' - '}
-              {showPercentage && `${Math.round(((currentValue - min) / (max - min)) * 100)}%`}
-            </span>
-          )}
-        </div>
-      )}
-      
-      {/* Progress Component */}
-      {renderProgress()}
-    </div>
-  );
+export const Progress = ({ value, max = 100, min = 0, label, showLabel = false, showValue = false, showPercentage = false, animated = true, striped = false, color, size = 'md', variant = 'linear', thickness, trackColor, progressColor, indeterminate = false, onComplete, className = '', theme = 'stan-design' }) => {
+    const { getTheme } = useTheme();
+    const themeConfig = getTheme(theme);
+    const colors = themeConfig?.colors || getDefaultColors();
+    const [currentValue, setCurrentValue] = useState(value);
+    useEffect(() => {
+        setCurrentValue(value);
+        if (value >= max && onComplete) {
+            onComplete();
+        }
+    }, [value, max, onComplete]);
+    useEffect(() => {
+        if (indeterminate) {
+            const interval = setInterval(() => {
+                setCurrentValue(prev => {
+                    if (prev >= max)
+                        return min;
+                    return prev + (max - min) / 20;
+                });
+            }, 100);
+            return () => clearInterval(interval);
+        }
+    }, [indeterminate, min, max]);
+    const renderProgress = () => {
+        switch (variant) {
+            case 'circular':
+                return (_jsx(CircularProgress, { value: currentValue, max: max, min: min, animated: animated, color: color, size: size, thickness: thickness, trackColor: trackColor, progressColor: progressColor, className: className }));
+            case 'steps':
+                return (_jsx(StepsProgress, { value: currentValue, max: max, min: min, size: size, className: className }));
+            case 'linear':
+            default:
+                return (_jsx(LinearProgress, { value: currentValue, max: max, min: min, animated: animated, striped: striped, color: color, size: size, thickness: thickness, trackColor: trackColor, progressColor: progressColor, className: className }));
+        }
+    };
+    return (_jsxs("div", { className: "w-full", children: [(showLabel || showValue || showPercentage) && (_jsxs("div", { className: "flex justify-between items-center mb-2", children: [showLabel && label && (_jsx("span", { className: "text-sm font-medium", style: { color: colors.text.primary }, children: label })), (showValue || showPercentage) && (_jsxs("span", { className: "text-sm", style: { color: colors.text.secondary }, children: [showValue && `${currentValue}/${max}`, showValue && showPercentage && ' - ', showPercentage && `${Math.round(((currentValue - min) / (max - min)) * 100)}%`] }))] })), renderProgress()] }));
 };
-
 export default Progress;