@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.6 → 0.2.8

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

@@ -0,0 +1,175 @@
+import React from 'react';
+import { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonButtonProps } from './types';
+
+// Base Skeleton Component
+const BaseSkeleton= ({
+  width,
+  height,
+  variant = 'rectangular',
+  animation = 'pulse',
+  className = '',
+  size = 'md'
+}) => {
+  // Note= () => {
+    if (width && height) return { width, height };
+
+    switch (variant) {
+      case 'circular') {
+          case 'sm', height};
+          case 'lg', height};
+          default, height};
+        }
+      case 'text') {
+          case 'sm', height};
+          case 'lg', height};
+          default, height};
+        }
+      case 'rectangular') {
+          case 'sm', height};
+          case 'lg', height};
+          default, height};
+        }
+    }
+  };
+
+  const dimensions = getDefaultDimensions();
+
+  return (
+    <div
+      className={`skeleton__base skeleton__base--${variant} skeleton__base--${animation} skeleton__base--${size} ${className}`}
+      style={{
+        width,
+        height}}
+      aria-busy="true"
+      role="progressbar"
+      aria-label="Loading content"
+    />
+  );
+};
+
+// Skeleton Text Component
+export const SkeletonText= ({
+  lines = 3,
+  lineHeight,
+  lastLineWidth,
+  spacing = 2,
+  className = '',
+  ...props
+}) => {
+  const getLineHeight = () => {
+    if (lineHeight) return lineHeight;
+    switch (props.size) {
+      case 'sm';
+      case 'lg';
+      default;
+    }
+  };
+
+  const getLastLineWidth = () => {
+    if (lastLineWidth) return lastLineWidth;
+    return '75%';
+  };
+
+  return (
+    <div className={`skeleton__text skeleton__text--spacing-${spacing} ${className}`}>
+      {Array.from({ length}).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=== lines - 1 ? getLastLineWidth() ,
+            height)
+          }}
+          aria-busy="true"
+        />
+      ))}
+    </div>
+  );
+};
+
+// Skeleton Avatar Component
+export const SkeletonAvatar= ({
+  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= ({
+  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= ({
+  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}).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}
+    />
+  );
+};
+
+export default Skeleton;

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

@@ -0,0 +1,277 @@
+// Simple icon components
+const CheckCircleIcon: React.FC<{ className?: string }> = ({ 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: React.FC<{ className?: string }> = ({ 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: React.FC<{ className?: string }> = ({ 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: React.FC<{ className?: string }> = ({ 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: React.FC<{ className?: string }> = ({ 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 toast type
+const getToastIcon = (type: ToastProps['type'], className: string) => {
+  switch (type) {
+    case 'success':
+      return <CheckCircleIcon className={className} />;
+    case 'warning':
+      return <ExclamationTriangleIcon className={className} />;
+    case 'error':
+      return <XCircleIcon className={className} />;
+    case 'info':
+      return <InformationCircleIcon className={className} />;
+    default:
+      return null;
+  }
+};
+
+// Note: getToastColors function removed as we're using semantic CSS classes
+/*
+const getToastColors = (type: ToastProps['type'], colors: any) => {
+  switch (type) {
+    case 'success':
+      return {
+        background: colors.semantic.success + '10',
+        border: colors.semantic.success + '30',
+        text: colors.semantic.success,
+        icon: colors.semantic.success
+      };
+    case 'warning':
+      return {
+        background: colors.semantic.warning + '10',
+        border: colors.semantic.warning + '30',
+        text: colors.semantic.warning,
+        icon: colors.semantic.warning
+      };
+    case 'error':
+      return {
+        background: colors.semantic.error + '10',
+        border: colors.semantic.error + '30',
+        text: colors.semantic.error,
+        icon: colors.semantic.error
+      };
+    case 'info':
+      return {
+        background: colors.semantic.info + '10',
+        border: colors.semantic.info + '30',
+        text: colors.semantic.info,
+        icon: colors.semantic.info
+      };
+    default:
+      return {
+        background: colors.surface.surface,
+        border: colors.surface.border,
+        text: colors.text.primary,
+        icon: colors.text.secondary
+      };
+  }
+};
+*/
+
+// Toast Action Button Component
+const ToastActionButton: React.FC<ToastAction> = ({
+  label,
+  action,
+  variant = 'primary'
+}) => {
+  return (
+    <button
+      type="button"
+      className={`toast__action-button toast__action-button--${variant}`}
+      onClick={() => action}
+    >
+      {label}
+    </button>
+  );
+};
+
+// Individual Toast Component
+export const Toast: React.FC<ToastProps> = ({
+  title,
+  message,
+  type = 'default',
+  duration = 5000,
+  onClose,
+  actions = [],
+  icon,
+  showIcon = true,
+  closable = true,
+  autoClose = true,
+  pauseOnHover = true,
+  progress = false,
+  size = 'md',
+  variant = 'default',
+  className = '',
+}) => {
+  // Note: theme and colors not needed as we're using semantic CSS classes
+
+  const [isVisible, setIsVisible] = useState(true);
+  const [progressValue, setProgressValue] = useState(100);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const progressRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  const handleMouseEnter = useCallback(() => {
+    if (pauseOnHover && autoClose) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (progressRef.current) {
+        clearInterval(progressRef.current);
+      }
+    }
+  }, [pauseOnHover, autoClose]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (pauseOnHover && autoClose) {
+      startAutoClose();
+    }
+  }, [pauseOnHover, autoClose]);
+
+  const startAutoClose = useCallback(() => {
+    if (duration > 0 && autoClose) {
+      timeoutRef.current = setTimeout(() => {
+        handleClose();
+      }, duration);
+
+      if (progress) {
+        const startTime = Date.now();
+        const endTime = startTime + duration;
+
+        progressRef.current = setInterval(() => {
+          const now = Date.now();
+          const remaining = Math.max(0, endTime - now);
+          const newProgress = (remaining / duration) * 100;
+          setProgressValue(newProgress);
+
+          if (remaining <= 0) {
+            if (progressRef.current) {
+              clearInterval(progressRef.current);
+            }
+          }
+        }, 10);
+      }
+    }
+  }, [duration, autoClose, progress, handleClose]);
+
+  useEffect(() => {
+    startAutoClose();
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (progressRef.current) {
+        clearInterval(progressRef.current);
+      }
+    };
+  }, [startAutoClose]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const shouldShowIcon = showIcon && (icon || type);
+
+  return (
+    <div
+      className={`toast__container toast__container--${size} toast__container--${variant} toast__container--${type} ${className}`}
+      role="alert"
+      aria-live="polite"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {progress && (
+        <div className="toast__progress">
+          <div
+            className={`toast__progress-bar toast__progress-bar--${type}`}
+            style={{ width: `${progressValue}%` }}
+          />
+        </div>
+      )}
+
+      {shouldShowIcon && (
+        <div className={`toast__icon toast__icon--${type}`}>
+          {icon || getToastIcon(type, 'toast__icon')}
+        </div>
+      )}
+
+      <div className="toast__content">
+        {title && (
+          <h3 className="toast__title">
+            {title}
+          </h3>
+        )}
+
+        <div className={`toast__message ${!title ? 'toast__message--only' : ''}`}>
+          {message}
+        </div>
+
+        {actions.length > 0 && (
+          <div className="toast__actions">
+            {actions.map((action, index) => (
+              <ToastActionButton
+                key={index}
+                {...action}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {closable && (
+        <button
+          type="button"
+          className="toast__close-button"
+          onClick={handleClose}
+          aria-label="Close toast"
+        >
+          <XMarkIcon className="toast__close-icon" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Toast Container Component
+export const ToastContainer: React.FC<ToastContainerProps & { children: React.ReactNode }> = ({
+  position = 'top-right',
+  className = '',
+  children
+}) => {
+  return (
+    <div className={`toast-container toast-container--${position} ${className}`}>
+      <div className="toast-container__list">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Toast;

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

@@ -0,0 +1,256 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { ToastProps, ToastAction, ToastContainerProps } 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 toast type
+const getToastIcon = (type], className) => {
+  switch (type) {
+    case 'success'={className} />;
+    case 'warning'={className} />;
+    case 'error'={className} />;
+    case 'info'={className} />;
+    default;
+  }
+};
+
+// Note= (type], colors) => {
+  switch (type) {
+    case 'success',
+        border,
+        text,
+        icon};
+    case 'warning',
+        border,
+        text,
+        icon};
+    case 'error',
+        border,
+        text,
+        icon};
+    case 'info',
+        border,
+        text,
+        icon};
+    default,
+        border,
+        text,
+        icon};
+  }
+};
+*/
+
+// Toast Action Button Component
+const ToastActionButton= ({
+  label,
+  action,
+  variant = 'primary'
+}) => {
+  return (
+    <button
+      type="button"
+      className={`toast__action-button toast__action-button--${variant}`}
+      onClick={() => action}
+    >
+      {label}
+    </button>
+  );
+};
+
+// Individual Toast Component
+export const Toast= ({
+  title,
+  message,
+  type = 'default',
+  duration = 5000,
+  onClose,
+  actions = [],
+  icon,
+  showIcon = true,
+  closable = true,
+  autoClose = true,
+  pauseOnHover = true,
+  progress = false,
+  size = 'md',
+  variant = 'default',
+  className = '',
+}) => {
+  // Note, setIsVisible] = useState(true);
+  const [progressValue, setProgressValue] = useState(100);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const progressRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  const handleMouseEnter = useCallback(() => {
+    if (pauseOnHover && autoClose) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (progressRef.current) {
+        clearInterval(progressRef.current);
+      }
+    }
+  }, [pauseOnHover, autoClose]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (pauseOnHover && autoClose) {
+      startAutoClose();
+    }
+  }, [pauseOnHover, autoClose]);
+
+  const startAutoClose = useCallback(() => {
+    if (duration > 0 && autoClose) {
+      timeoutRef.current = setTimeout(() => {
+        handleClose();
+      }, duration);
+
+      if (progress) {
+        const startTime = Date.now();
+        const endTime = startTime + duration;
+        
+        progressRef.current = setInterval(() => {
+          const now = Date.now();
+          const remaining = Math.max(0, endTime - now);
+          const newProgress = (remaining / duration) * 100;
+          setProgressValue(newProgress);
+          
+          if (remaining <= 0) {
+            if (progressRef.current) {
+              clearInterval(progressRef.current);
+            }
+          }
+        }, 10);
+      }
+    }
+  }, [duration, autoClose, progress, handleClose]);
+
+  useEffect(() => {
+    startAutoClose();
+    
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (progressRef.current) {
+        clearInterval(progressRef.current);
+      }
+    };
+  }, [startAutoClose]);
+
+  if (!isVisible) {
+    return null;
+  }
+
+  const shouldShowIcon = showIcon && (icon || type);
+
+  return (
+    <div
+      className={`toast__container toast__container--${size} toast__container--${variant} toast__container--${type} ${className}`}
+      role="alert"
+      aria-live="polite"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {progress && (
+        <div className="toast__progress">
+          <div
+            className={`toast__progress-bar toast__progress-bar--${type}`}
+            style={{ width}%` }}
+          />
+        </div>
+      )}
+
+      {shouldShowIcon && (
+        <div className={`toast__icon toast__icon--${type}`}>
+          {icon || getToastIcon(type, 'toast__icon')}
+        </div>
+      )}
+
+      <div className="toast__content">
+        {title && (
+          <h3 className="toast__title">
+            {title}
+          </h3>
+        )}
+
+        <div className={`toast__message ${!title ? 'toast__message--only' }`}>
+          {message}
+        </div>
+
+        {actions.length > 0 && (
+          <div className="toast__actions">
+            {actions.map((action, index) => (
+              <ToastActionButton
+                key={index}
+                {...action}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {closable && (
+        <button
+          type="button"
+          className="toast__close-button"
+          onClick={handleClose}
+          aria-label="Close toast"
+        >
+          <XMarkIcon className="toast__close-icon" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+// Toast Container Component
+export const ToastContainer}> = ({
+  position = 'top-right',
+  className = '',
+  children
+}) => {
+  return (
+    <div className={`toast-container toast-container--${position} ${className}`}>
+      <div className="toast-container__list">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Toast;