@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.9

package/dist/components/ui/feedback/alert.js

@@ -0,0 +1,150 @@
+import React, { useState, useCallback } from 'react';
+import { AlertProps, AlertAction } from './types';
+
+// Simple icon components
+const CheckCircleIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+  </svg>
+);
+
+const ExclamationTriangleIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+    <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+  </svg>
+);
+
+const XCircleIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+  </svg>
+);
+
+const InformationCircleIcon}> = ({ className = '' }) => (
+  <svg className={className} 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 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
+  </svg>
+);
+
+const XMarkIcon}> = ({ className = '' }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 20 20">
+    <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
+  </svg>
+);
+
+// Get icon for alert type
+const getAlertIcon = (type], className) => {
+  switch (type) {
+    case 'success'={className} />;
+    case 'warning'={className} />;
+    case 'error'={className} />;
+    case 'info'={className} />;
+    default;
+  }
+};
+
+// Alert Action Button Component
+const AlertActionButton}> = ({
+  label,
+  onClick,
+  variant = 'primary'
+}) => {
+  return (
+    <button
+      type="button"
+      className={`alert__action-button alert__action-button--${variant}`}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+};
+
+// Main Alert Component
+export const Alert= ({
+  title,
+  message,
+  type = 'info',
+  dismissible = false,
+  onDismiss,
+  icon,
+  actions = [],
+  showIcon = true,
+  closable = false,
+  persistent = false,
+  className = '',
+  theme = 'stan-design',
+  size = 'md',
+  variant = 'default'
+}) => {
+  // const { getTheme } = useTheme();
+  // const themeConfig = getTheme(theme);
+  // Note, setIsVisible] = useState(true);
+
+  const handleDismiss = useCallback(() => {
+    if (onDismiss) {
+      onDismiss();
+    }
+    if (!persistent) {
+      setIsVisible(false);
+    }
+  }, [onDismiss, persistent]);
+
+  const shouldShowIcon = showIcon && (icon || type);
+  const shouldShowClose = (closable || dismissible) && !persistent;
+
+  if (!isVisible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`alert__container alert__container--${size} alert__container--${type} alert__container--${variant} ${className}`}
+      role="alert"
+      aria-live="polite"
+    >
+      {shouldShowIcon && (
+        <div className={`alert__icon alert__icon--${type}`}>
+          {icon || getAlertIcon(type, 'alert__icon')}
+        </div>
+      )}
+
+      <div className="alert__content">
+        {title && (
+          <h3 className="alert__title">
+            {title}
+          </h3>
+        )}
+
+        <div className={`alert__message ${!title ? 'alert__message--only' }`}>
+          {message}
+        </div>
+
+        {actions.length > 0 && (
+          <div className="alert__actions">
+            {actions.map((action, index) => (
+              <AlertActionButton
+                key={index}
+                {...action}
+                theme={theme}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {shouldShowClose && (
+        <button
+          type="button"
+          className="alert__close-button"
+          onClick={handleDismiss}
+          aria-label="Close alert"
+        >
+          <XMarkIcon className="alert__close-icon" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default Alert;

package/dist/components/ui/feedback/progress.d.ts

@@ -0,0 +1,288 @@
+// 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' }
+});
+
+// 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>
+  );
+};
+
+// 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>
+  );
+};
+
+// 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>
+        );
+    }
+  };
+
+  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>
+  );
+};
+
+// 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 default Progress;

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

@@ -0,0 +1,269 @@
+import React, { 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, surface, border, divider},
+  text, secondary, muted, inverse, onPrimary, onSecondary, onSurface},
+  interactive, active, focus, disabled},
+  primary},
+  semantic, warning, error, info}
+});
+
+// Linear Progress Component
+const LinearProgress= ({
+  value,
+  max = 100,
+  min = 0,
+  animated = true,
+  striped = false,
+  color,
+  size = 'md',
+  className = ''
+}) => {
+  // Note= 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}%` }}
+      />
+    </div>
+  );
+};
+
+// Circular Progress Component
+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 (
+    <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>
+  );
+};
+
+// Steps Progress Component
+const StepsProgress] }> = ({
+  steps = [],
+  className = ''
+}) => {
+  // Note= (status]) => {
+    switch (status) {
+      case 'completed'="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'="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'="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'="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>
+        );
+    }
+  };
+
+  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>
+  );
+};
+
+// Main Progress Component
+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'={currentValue}
+            max={max}
+            min={min}
+            animated={animated}
+            color={color}
+            size={size}
+            thickness={thickness}
+            trackColor={trackColor}
+            progressColor={progressColor}
+            className={className}
+          />
+        );
+      case 'steps'={currentValue}
+            max={max}
+            min={min}
+            size={size}
+            className={className}
+          />
+        );
+      case 'linear'={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}}>
+              {label}
+            </span>
+          )}
+          {(showValue || showPercentage) && (
+            <span className="text-sm" style={{ color}}>
+              {showValue && `${currentValue}/${max}`}
+              {showValue && showPercentage && ' - '}
+              {showPercentage && `${Math.round(((currentValue - min) / (max - min)) * 100)}%`}
+            </span>
+          )}
+        </div>
+      )}
+      
+      {/* Progress Component */}
+      {renderProgress()}
+    </div>
+  );
+};
+
+export default Progress;