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

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

@@ -1,277 +0,0 @@
-// 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/types.d.ts

@@ -1,123 +0,0 @@
-// Base props for all feedback components
-export interface FeedbackBaseProps {
-  className?: string;
-  theme?: 'stan-design' | 'harvey';
-}
-
-// Alert Component Types
-export interface AlertProps extends FeedbackBaseProps {
-  title?: string;
-  message: string;
-  type: 'success' | 'warning' | 'error' | 'info';
-  dismissible?: boolean;
-  onDismiss?: () => void;
-  icon?: React.ReactNode;
-  actions?: AlertAction[];
-  showIcon?: boolean;
-  closable?: boolean;
-  persistent?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'bordered' | 'filled';
-}
-
-export interface AlertAction {
-  label: string;
-  onClick: () => void;
-  variant?: 'primary' | 'secondary' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
-}
-
-// Toast Component Types
-export interface ToastProps extends FeedbackBaseProps {
-  id: string;
-  title?: string;
-  message: string;
-  type: 'success' | 'warning' | 'error' | 'info' | 'default';
-  duration?: number; // milliseconds, 0 = persistent
-  onClose?: () => void;
-  onAction?: (action: string) => void;
-  actions?: ToastAction[];
-  icon?: React.ReactNode;
-  showIcon?: boolean;
-  closable?: boolean;
-  position?: 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center';
-  autoClose?: boolean;
-  pauseOnHover?: boolean;
-  draggable?: boolean;
-  progress?: boolean;
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'bordered' | 'filled';
-}
-
-export interface ToastAction {
-  label: string;
-  action: string;
-  variant?: 'primary' | 'secondary' | 'ghost';
-}
-
-export interface ToastContainerProps {
-  position?: ToastProps['position'];
-  maxToasts?: number;
-  autoClose?: boolean;
-  pauseOnHover?: boolean;
-  draggable?: boolean;
-  progress?: boolean;
-  className?: string;
-  theme?: 'stan-design' | 'harvey';
-}
-
-// Progress Component Types
-export interface ProgressProps extends FeedbackBaseProps {
-  value: number; // 0-100
-  max?: number;
-  min?: number;
-  label?: string;
-  showLabel?: boolean;
-  showValue?: boolean;
-  showPercentage?: boolean;
-  animated?: boolean;
-  striped?: boolean;
-  color?: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  variant?: 'linear' | 'circular' | 'steps';
-  thickness?: number;
-  trackColor?: string;
-  progressColor?: string;
-  indeterminate?: boolean;
-  onComplete?: () => void;
-}
-
-export interface ProgressStep {
-  label: string;
-  value: number;
-  status: 'pending' | 'active' | 'completed' | 'error';
-  description?: string;
-}
-
-// Skeleton Component Types
-export interface SkeletonProps extends FeedbackBaseProps {
-  width?: string | number;
-  height?: string | number;
-  variant?: 'text' | 'circular' | 'rectangular' | 'rounded';
-  animation?: 'pulse' | 'wave' | 'none';
-  rows?: number;
-  spacing?: number;
-  show?: boolean;
-  className?: string;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-}
-
-export interface SkeletonTextProps extends SkeletonProps {
-  lines?: number;
-  lineHeight?: string | number;
-  lastLineWidth?: string | number;
-}
-
-export interface SkeletonAvatarProps extends SkeletonProps {
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  shape?: 'circular' | 'square' | 'rounded';
-}
-
-export interface SkeletonButtonProps extends SkeletonProps {
-  fullWidth?: boolean;
-}

package/dist/components/ui/font-preview.d.ts

@@ -1,282 +0,0 @@
-export interface FontPreviewProps {
-  fontConfig?: FontConfig;
-  fontType?: 'primary' | 'secondary' | 'display' | 'body' | 'mono';
-  showAllVariations?: boolean;
-  className?: string;
-}
-
-export const FontPreview: React.FC<FontPreviewProps> = ({
-  fontConfig,
-  fontType = 'primary',
-  showAllVariations = false,
-  className = ''
-}) => {
-  const { currentThemeConfig } = useTheme();
-
-  // Use provided fontConfig or get from current theme
-  const config = fontConfig || currentThemeConfig?.fonts[fontType];
-
-  if (!config) {
-    return (
-      <Card className={className}>
-        <CardContent className="p-4">
-          <p className="text-sm text-muted-foreground">Font configuration not available</p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  const { family, weights, sizes, lineHeights, letterSpacing, fallbacks, source } = config;
-
-  // Build full font family string with fallbacks
-  const fullFontFamily = fallbacks 
-    ? `${family}, ${fallbacks.join(', ')}`
-    : family;
-
-  // Sample text for preview
-  const sampleText = "The quick brown fox jumps over the lazy dog";
-  const sampleNumbers = "1234567890";
-  const sampleSpecial = "!@#$%^&*()_+-={}[]|\\:;\"'<>,.?/";
-
-  return (
-    <Card className={className}>
-      <CardHeader>
-        <CardTitle className="flex items-center justify-between">
-          <span className="capitalize">{fontType} Font</span>
-          <div className="flex gap-2">
-            {source && (
-              <Badge variant="outline" className="text-xs">
-                {source.type}
-              </Badge>
-            )}
-            <Badge variant="secondary" className="text-xs">
-              {weights?.length || 0} weights
-            </Badge>
-          </div>
-        </CardTitle>
-        <CardDescription>
-          <span className="font-mono text-xs">{family}</span>
-          {fallbacks && fallbacks.length > 0 && (
-            <div className="mt-1 text-xs text-muted-foreground">
-              Fallbacks: {fallbacks.slice(0, 3).join(', ')}
-              {fallbacks.length > 3 && ` (+${fallbacks.length - 3} more)`}
-            </div>
-          )}
-        </CardDescription>
-      </CardHeader>
-
-      <CardContent className="space-y-6">
-        {/* Font Weights Preview */}
-        <div>
-          <h4 className="text-sm font-medium mb-3">Font Weights</h4>
-          <div className="space-y-2">
-            {weights?.map(weight => (
-              <div key={weight} className="flex items-center gap-4">
-                <Badge variant="outline" className="text-xs w-12 justify-center">
-                  {weight}
-                </Badge>
-                <p 
-                  style={{ 
-                    fontFamily: fullFontFamily,
-                    fontWeight: weight,
-                    fontSize: sizes?.md || '1rem'
-                  }}
-                  className="flex-1"
-                >
-                  {sampleText}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {showAllVariations && (
-          <>
-            {/* Font Sizes Preview */}
-            <div>
-              <h4 className="text-sm font-medium mb-3">Font Sizes</h4>
-              <div className="space-y-2">
-                {Object.entries(sizes || {}).map(([size, value]) => (
-                  <div key={size} className="flex items-center gap-4">
-                    <Badge variant="outline" className="text-xs w-12 justify-center">
-                      {size}
-                    </Badge>
-                    <span className="text-xs text-muted-foreground w-16">{value}</span>
-                    <p 
-                      style={{ 
-                        fontFamily: fullFontFamily,
-                        fontSize: value,
-                        fontWeight: weights?.[0] || 400
-                      }}
-                    >
-                      Sample text
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Line Heights Preview */}
-            <div>
-              <h4 className="text-sm font-medium mb-3">Line Heights</h4>
-              <div className="space-y-4">
-                {Object.entries(lineHeights || {}).map(([height, value]) => (
-                  <div key={height} className="space-y-2">
-                    <div className="flex items-center gap-2">
-                      <Badge variant="outline" className="text-xs">
-                        {height}
-                      </Badge>
-                      <span className="text-xs text-muted-foreground">{value}</span>
-                    </div>
-                    <p 
-                      style={{ 
-                        fontFamily: fullFontFamily,
-                        fontSize: sizes?.md || '1rem',
-                        lineHeight: value,
-                        fontWeight: weights?.[0] || 400
-                      }}
-                      className="text-sm border-l-2 border-muted pl-4"
-                    >
-                      This is a multiline text example to demonstrate how line height affects the spacing between lines of text. 
-                      The line height setting controls the vertical space between each line, which is crucial for readability and 
-                      overall typography appearance.
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Letter Spacing Preview */}
-            <div>
-              <h4 className="text-sm font-medium mb-3">Letter Spacing</h4>
-              <div className="space-y-2">
-                {Object.entries(letterSpacing || {}).map(([spacing, value]) => (
-                  <div key={spacing} className="flex items-center gap-4">
-                    <Badge variant="outline" className="text-xs w-16 justify-center">
-                      {spacing}
-                    </Badge>
-                    <span className="text-xs text-muted-foreground w-16">{value}</span>
-                    <p 
-                      style={{ 
-                        fontFamily: fullFontFamily,
-                        fontSize: sizes?.md || '1rem',
-                        letterSpacing: value,
-                        fontWeight: weights?.[0] || 400
-                      }}
-                      className="flex-1"
-                    >
-                      Letter spacing example
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Character Set Preview */}
-        <div>
-          <h4 className="text-sm font-medium mb-3">Character Support</h4>
-          <div className="space-y-3">
-            <div>
-              <span className="text-xs text-muted-foreground block mb-1">Alphabet</span>
-              <p 
-                style={{ 
-                  fontFamily: fullFontFamily,
-                  fontSize: sizes?.md || '1rem',
-                  fontWeight: weights?.[0] || 400
-                }}
-                className="text-sm"
-              >
-                {sampleText}
-              </p>
-            </div>
-
-            <div>
-              <span className="text-xs text-muted-foreground block mb-1">Numbers</span>
-              <p 
-                style={{ 
-                  fontFamily: fullFontFamily,
-                  fontSize: sizes?.lg || '1.125rem',
-                  fontWeight: weights?.[0] || 400,
-                  letterSpacing: letterSpacing?.wide || '0.025em'
-                }}
-                className="text-sm"
-              >
-                {sampleNumbers}
-              </p>
-            </div>
-
-            <div>
-              <span className="text-xs text-muted-foreground block mb-1">Special Characters</span>
-              <p 
-                style={{ 
-                  fontFamily: fullFontFamily,
-                  fontSize: sizes?.sm || '0.875rem',
-                  fontWeight: weights?.[0] || 400
-                }}
-                className="text-sm"
-              >
-                {sampleSpecial}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Font Loading Information */}
-        {source && (
-          <div className="pt-4 border-t">
-            <h4 className="text-sm font-medium mb-2">Font Loading</h4>
-            <div className="space-y-1 text-xs text-muted-foreground">
-              <div>Source: <span className="capitalize">{source.type}</span></div>
-              {source.url && <div>URL: {source.url}</div>}
-              {source.files && (
-                <div>
-                  Files: {Object.keys(source.files).join(', ')}
-                </div>
-              )}
-              {config.display && (
-                <div>Display: {config.display}</div>
-              )}
-            </div>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-};
-
-// Multi-font preview component
-export interface FontShowcaseProps {
-  showAllVariations?: boolean;
-  className?: string;
-}
-
-export const FontShowcase: React.FC<FontShowcaseProps> = ({
-  showAllVariations = false,
-  className = ''
-}) => {
-  const { currentThemeConfig } = useTheme();
-
-  if (!currentThemeConfig?.fonts) {
-    return (
-      <div className={className}>
-        <p className="text-sm text-muted-foreground">No font configuration available</p>
-      </div>
-    );
-  }
-
-  const fontTypes: Array<keyof typeof currentThemeConfig.fonts> = ['primary', 'secondary', 'display', 'body', 'mono'];
-
-  return (
-    <div className={`space-y-6 ${className}`}>
-      {fontTypes.map(fontType => (
-        <FontPreview
-          key={fontType}
-          fontType={fontType}
-          showAllVariations={showAllVariations}
-        />
-      ))}
-    </div>
-  );
-};