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

package/dist/components/ui/enterprise-mobile-experience.js

@@ -0,0 +1,413 @@
+import React, { forwardRef, useState, useEffect } from 'react'
+import { cn } from '../../lib/utils'
+
+// Enterprise Button Component
+export interface EnterpriseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?}
+
+export const EnterpriseButton = forwardRef<HTMLButtonElement, EnterpriseButtonProps>(
+  ({ className, variant = 'default', size = 'default', loading = false, children, ...props }, ref) => {
+    const [isPressed, setIsPressed] = useState(false)
+
+    const baseClasses = 'enterprise-button enterprise-mobile-optimized enterprise-interaction-refined'
+    
+    const variantClasses = {
+      default,
+      secondary,
+      outline,
+      ghost,
+      premium}
+
+    const sizeClasses = {
+      sm] min-w-[40px]',
+      default] min-w-[48px]',
+      lg] min-w-[56px]',
+      xl] min-w-[64px]'
+    }
+
+    const handleMouseDown = () => setIsPressed(true)
+    const handleMouseUp = () => setIsPressed(false)
+    const handleMouseLeave = () => setIsPressed(false)
+
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          sizeClasses[size],
+          loading && 'enterprise-loading',
+          isPressed && 'scale-95',
+          className
+        )}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+        disabled={loading}
+        {...props}
+      >
+        {loading && (
+          <span className="enterprise-loading-spinner mr-2" />
+        )}
+        {children}
+      </button>
+    )
+  }
+)
+
+EnterpriseButton.displayName = 'EnterpriseButton'
+
+// Enterprise Card Component
+export interface EnterpriseCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?}
+
+export const EnterpriseCard = forwardRef<HTMLDivElement, EnterpriseCardProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    const baseClasses = 'enterprise-card enterprise-visual-refined'
+    
+    const variantClasses = {
+      default,
+      interactive,
+      premium,
+      featured}
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          baseClasses,
+          variantClasses[variant],
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+EnterpriseCard.displayName = 'EnterpriseCard'
+
+// Enterprise Input Component
+export interface EnterpriseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  variant?}
+
+export const EnterpriseInput = forwardRef<HTMLInputElement, EnterpriseInputProps>(
+  ({ className, variant = 'default', label, required = false, children, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false)
+
+    const baseClasses = 'enterprise-input enterprise-mobile-optimized enterprise-accessibility'
+    
+    const variantClasses = {
+      default,
+      success,
+      error,
+      warning}
+
+    const handleFocus = () => setIsFocused(true)
+    const handleBlur = () => setIsFocused(false)
+
+    return (
+      <div className="space-y-2">
+        {label && (
+          <label className={cn(
+            'enterprise-label',
+            required && 'enterprise-label-required'
+          )}>
+            {label}
+          </label>
+        )}
+        <div className="relative">
+          <input
+            ref={ref}
+            className={cn(
+              baseClasses,
+              variantClasses[variant],
+              isFocused && 'enterprise-input-focused',
+              className
+            )}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            {...props}
+          />
+          {children}
+        </div>
+      </div>
+    )
+  }
+)
+
+EnterpriseInput.displayName = 'EnterpriseInput'
+
+// Enterprise Progress Component
+export interface EnterpriseProgressProps {
+  value}
+
+export const EnterpriseProgress= ({
+  value,
+  max = 100,
+  variant = 'default',
+  size = 'default',
+  showLabel = true,
+  className
+}) => {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100))
+  
+  const baseClasses = 'enterprise-progress enterprise-performance'
+  
+  const sizeClasses = {
+    sm,
+    default,
+    lg}
+
+  const variantClasses = {
+    default,
+    success,
+    warning,
+    error}
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {showLabel && (
+        <div className="flex justify-between items-center text-sm">
+          <span className="text-cs-text-primary font-medium">Progress</span>
+          <span className="text-cs-text-secondary">{Math.round(percentage)}%</span>
+        </div>
+      )}
+      <div className={cn(baseClasses, sizeClasses[size])}>
+        <div
+          className={cn(variantClasses[variant])}
+          style={{ width}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+// Enterprise Quality Metric Component
+export interface EnterpriseQualityMetricProps {
+  score}
+
+export const EnterpriseQualityMetric= ({
+  score,
+  label,
+  description,
+  className
+}) => {
+  const getVariantClass = () => {
+    if (score >= 90) return 'enterprise-quality-excellent'
+    if (score >= 80) return 'enterprise-quality-good'
+    if (score < 80) return 'enterprise-quality-needs-improvement'
+    return 'enterprise-quality-metric'
+  }
+
+  const getScoreColor = () => {
+    if (score >= 90) return 'text-cs-success'
+    if (score >= 80) return 'text-cs-warning'
+    if (score < 80) return 'text-cs-error'
+    return 'text-cs-primary'
+  }
+
+  return (
+    <div className={cn('enterprise-quality-metric', getVariantClass(), className)}>
+      <div className={cn('enterprise-quality-score', getScoreColor())}>
+        {score}
+      </div>
+      <div className="enterprise-quality-label">
+        {label}
+      </div>
+      {description && (
+        <div className="enterprise-quality-description">
+          {description}
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Enterprise Status Component
+export interface EnterpriseStatusProps {
+  phase}
+
+export const EnterpriseStatus= ({
+  phase,
+  children,
+  className
+}) => {
+  const phaseClasses = {
+    initializing,
+    optimizing,
+    polishing,
+    verifying,
+    complete,
+    'enterprise-ready'}
+
+  const phaseIcons = {
+    initializing,
+    optimizing,
+    polishing,
+    verifying,
+    complete,
+    'enterprise-ready'}
+
+  return (
+    <span className={cn('enterprise-status', phaseClasses[phase], className)}>
+      <span className="text-lg">{phaseIcons[phase]}</span>
+      {children}
+    </span>
+  )
+}
+
+// Enterprise Container Component
+export interface EnterpriseContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children}
+
+export const EnterpriseContainer= ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={cn('enterprise-container', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Enterprise Section Component
+export interface EnterpriseSectionProps extends React.HTMLAttributes<HTMLElement> {
+  children}
+
+export const EnterpriseSection= ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <section
+      className={cn('enterprise-section', className)}
+      {...props}
+    >
+      {children}
+    </section>
+  )
+}
+
+// Enterprise Grid Component
+export interface EnterpriseGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  cols?}
+
+export const EnterpriseGrid= ({
+  cols = 1,
+  className,
+  children,
+  ...props
+}) => {
+  const colsClasses = {
+    1,
+    2,
+    3,
+    4}
+
+  return (
+    <div
+      className={cn('enterprise-grid', colsClasses[cols], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Enterprise Loading Component
+export interface EnterpriseLoadingProps {
+  size?}
+
+export const EnterpriseLoading= ({
+  size = 'default',
+  text = 'Loading...',
+  className
+}) => {
+  const sizeClasses = {
+    sm,
+    default,
+    lg}
+
+  return (
+    <div className={cn('flex items-center justify-center space-x-2', className)}>
+      <div className={cn('enterprise-loading-spinner', sizeClasses[size])} />
+      {text && (
+        <span className="text-cs-text-secondary text-sm font-medium">
+          {text}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// Enterprise Notification Component
+export interface EnterpriseNotificationProps {
+  type) => void
+  duration?}
+
+export const EnterpriseNotification= ({
+  type,
+  title,
+  message,
+  onClose,
+  duration = 5000,
+  className
+}) => {
+  const [isVisible, setIsVisible] = useState(true)
+
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(() => {
+        setIsVisible(false)
+        onClose?.()
+      }, duration)
+
+      return () => clearTimeout(timer)
+    }
+  }, [duration, onClose])
+
+  const typeClasses = {
+    success,
+    warning,
+    error,
+    info}
+
+  const typeIcons = {
+    success,
+    warning,
+    error,
+    info}
+
+  if (!isVisible) return null
+
+  return (
+    <div className={cn('enterprise-notification', typeClasses[type], className)}>
+      <div className="flex items-start space-x-3">
+        <span className="text-lg">{typeIcons[type]}</span>
+        <div className="flex-1">
+          <h4 className="text-sm font-semibold text-cs-text-primary">
+            {title}
+          </h4>
+          {message && (
+            <p className="text-sm text-cs-text-secondary mt-1">
+              {message}
+            </p>
+          )}
+        </div>
+        {onClose && (
+          <button
+            onClick={onClose}
+            className="text-cs-text-secondary hover)}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,154 @@
+// 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 alert type
+const getAlertIcon = (type: AlertProps['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;
+  }
+};
+
+// Alert Action Button Component
+const AlertActionButton: React.FC<AlertAction & { theme: string }> = ({
+  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: React.FC<AlertProps> = ({
+  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: colors not needed as we're using semantic CSS classes
+
+  const [isVisible, 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/alert.esm.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;