@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/components/ui/feedback/progress.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;

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

@@ -1,182 +1,8 @@
-// Base Skeleton Component
-const BaseSkeleton: React.FC<SkeletonProps> = ({
-  width,
-  height,
-  variant = 'rectangular',
-  animation = 'pulse',
-  className = '',
-  size = 'md'
-}) => {
-  // Note: theme and colors not needed as we're using semantic CSS classes
-
-  const getDefaultDimensions = () => {
-    if (width && height) return { width, height };
-
-    switch (variant) {
-      case 'circular':
-        switch (size) {
-          case 'sm': return { width: '2rem', height: '2rem' };
-          case 'lg': return { width: '4rem', height: '4rem' };
-          default: return { width: '3rem', height: '3rem' };
-        }
-      case 'text':
-        switch (size) {
-          case 'sm': return { width: '100%', height: '0.875rem' };
-          case 'lg': return { width: '100%', height: '1.25rem' };
-          default: return { width: '100%', height: '1rem' };
-        }
-      case 'rectangular':
-      case 'rounded':
-      default:
-        switch (size) {
-          case 'sm': return { width: '100%', height: '2rem' };
-          case 'lg': return { width: '100%', height: '4rem' };
-          default: return { width: '100%', height: '3rem' };
-        }
-    }
-  };
-
-  const dimensions = getDefaultDimensions();
-
-  return (
-    <div
-      className={`skeleton__base skeleton__base--${variant} skeleton__base--${animation} skeleton__base--${size} ${className}`}
-      style={{
-        width: dimensions.width,
-        height: dimensions.height
-      }}
-      aria-busy="true"
-      role="progressbar"
-      aria-label="Loading content"
-    />
-  );
-};
-
-// Skeleton Text Component
-export const SkeletonText: React.FC<SkeletonTextProps> = ({
-  lines = 3,
-  lineHeight,
-  lastLineWidth,
-  spacing = 2,
-  className = '',
-  ...props
-}) => {
-  const getLineHeight = () => {
-    if (lineHeight) return lineHeight;
-    switch (props.size) {
-      case 'sm': return '0.875rem';
-      case 'lg': return '1.25rem';
-      default: return '1rem';
-    }
-  };
-
-  const getLastLineWidth = () => {
-    if (lastLineWidth) return lastLineWidth;
-    return '75%';
-  };
-
-  return (
-    <div className={`skeleton__text skeleton__text--spacing-${spacing} ${className}`}>
-      {Array.from({ length: lines }).map((_, index) => (
-        <div
-          key={index}
-          className={`skeleton__text-line skeleton__text-line--${props.size || 'md'} skeleton__base--${props.animation || 'pulse'} ${
-            index === lines - 1 ? 'skeleton__text-line--last' : ''
-          }`}
-          style={{
-            width: index === lines - 1 ? getLastLineWidth() : '100%',
-            height: getLineHeight()
-          }}
-          aria-busy="true"
-        />
-      ))}
-    </div>
-  );
-};
-
-// Skeleton Avatar Component
-export const SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({
-  size = 'md',
-  shape = 'circular',
-  className = '',
-  ...props
-}) => {
-  return (
-    <div
-      className={`skeleton__avatar skeleton__avatar--${size} skeleton__avatar--${shape} skeleton__base--${props.animation || 'pulse'} ${className}`}
-      aria-busy="true"
-      role="progressbar"
-      aria-label="Loading avatar"
-    />
-  );
-};
-
-// Skeleton Button Component
-export const SkeletonButton: React.FC<SkeletonButtonProps> = ({
-  size = 'md',
-  variant = 'contained',
-  fullWidth = false,
-  className = '',
-  ...props
-}) => {
-  return (
-    <div
-      className={`skeleton__button skeleton__button--${size} skeleton__button--${variant} ${
-        fullWidth ? 'skeleton__button--full-width' : ''
-      } skeleton__base--${props.animation || 'pulse'} ${className}`}
-      aria-busy="true"
-      role="progressbar"
-      aria-label="Loading button"
-    />
-  );
-};
-
-// Main Skeleton Component
-export const Skeleton: React.FC<SkeletonProps> = ({
-  width,
-  height,
-  variant = 'rectangular',
-  animation = 'pulse',
-  rows = 1,
-  spacing = 2,
-  show = true,
-  className = '',
-  theme = 'stan-design',
-  size = 'md'
-}) => {
-  if (!show) {
-    return null;
-  }
-
-  if (rows > 1) {
-    return (
-      <div className={`skeleton__container skeleton__container--spacing-${spacing} ${className}`}>
-        {Array.from({ length: rows }).map((_, index) => (
-          <BaseSkeleton
-            key={index}
-            width={width}
-            height={height}
-            variant={variant}
-            animation={animation}
-            size={size}
-            theme={theme}
-          />
-        ))}
-      </div>
-    );
-  }
-
-  return (
-    <BaseSkeleton
-      width={width}
-      height={height}
-      variant={variant}
-      animation={animation}
-      size={size}
-      theme={theme}
-      className={className}
-    />
-  );
-};
-
+import React from 'react';
+import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types';
+export declare const SkeletonText: React.FC<SkeletonTextProps>;
+export declare const SkeletonAvatar: React.FC<SkeletonAvatarProps>;
+export declare const SkeletonButton: React.FC<SkeletonButtonProps>;
+export declare const Skeleton: React.FC<SkeletonProps>;
 export default Skeleton;
+//# sourceMappingURL=skeleton.d.ts.map

package/dist/components/ui/feedback/skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/feedback/skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAyDrG,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuCpD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAcxD,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAiBxD,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6C5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}