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

package/dist/components/ui/enterprise-mobile-experience.d.ts

@@ -0,0 +1,461 @@
+// Enterprise Button Component
+export interface EnterpriseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'premium'
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  loading?: boolean
+  children: React.ReactNode
+}
+
+export declare 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: 'enterprise-button',
+      secondary: 'enterprise-button-secondary',
+      outline: 'enterprise-button-outline',
+      ghost: 'enterprise-button-ghost',
+      premium: 'enterprise-button enterprise-interaction-premium'
+    }
+
+    const sizeClasses = {
+      sm: 'px-4 py-2 text-sm min-h-[40px] min-w-[40px]',
+      default: 'px-6 py-3 text-base min-h-[48px] min-w-[48px]',
+      lg: 'px-8 py-4 text-lg min-h-[56px] min-w-[56px]',
+      xl: 'px-10 py-5 text-xl min-h-[64px] 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?: 'default' | 'interactive' | 'premium' | 'featured'
+  children: React.ReactNode
+}
+
+export declare const EnterpriseCard: forwardRef<HTMLDivElement, EnterpriseCardProps>(
+  ({ className, variant = 'default', children, ...props }, ref) => {
+    const baseClasses = 'enterprise-card enterprise-visual-refined'
+
+    const variantClasses = {
+      default: '',
+      interactive: 'enterprise-card-interactive enterprise-interaction-refined',
+      premium: 'enterprise-card-premium enterprise-interaction-premium',
+      featured: 'enterprise-card-premium enterprise-interaction-premium border-2 border-cs-accent'
+    }
+
+    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?: 'default' | 'success' | 'error' | 'warning'
+  label?: string
+  required?: boolean
+  children?: React.ReactNode
+}
+
+export declare 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: 'enterprise-input-success',
+      error: 'enterprise-input-error',
+      warning: 'enterprise-input-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: number
+  max?: number
+  variant?: 'default' | 'success' | 'warning' | 'error'
+  size?: 'sm' | 'default' | 'lg'
+  showLabel?: boolean
+  className?: string
+}
+
+export const EnterpriseProgress: React.FC<EnterpriseProgressProps> = ({
+  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: 'h-1',
+    default: 'h-2',
+    lg: 'h-3'
+  }
+
+  const variantClasses = {
+    default: 'enterprise-progress-bar',
+    success: 'enterprise-progress-bar bg-gradient-to-r from-cs-success to-cs-success/80',
+    warning: 'enterprise-progress-bar bg-gradient-to-r from-cs-warning to-cs-warning/80',
+    error: 'enterprise-progress-bar bg-gradient-to-r from-cs-error to-cs-error/80'
+  }
+
+  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: `${percentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+// Enterprise Quality Metric Component
+export interface EnterpriseQualityMetricProps {
+  score: number
+  label: string
+  description?: string
+  variant?: 'default' | 'excellent' | 'good' | 'needs-improvement'
+  className?: string
+}
+
+export const EnterpriseQualityMetric: React.FC<EnterpriseQualityMetricProps> = ({
+  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: 'initializing' | 'optimizing' | 'polishing' | 'verifying' | 'complete' | 'enterprise-ready'
+  children: React.ReactNode
+  className?: string
+}
+
+export const EnterpriseStatus: React.FC<EnterpriseStatusProps> = ({
+  phase,
+  children,
+  className
+}) => {
+  const phaseClasses = {
+    initializing: 'enterprise-status-initializing',
+    optimizing: 'enterprise-status-optimizing',
+    polishing: 'enterprise-status-polishing',
+    verifying: 'enterprise-status-verifying',
+    complete: 'enterprise-status-complete',
+    'enterprise-ready': 'enterprise-status-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: React.ReactNode
+}
+
+export const EnterpriseContainer: React.FC<EnterpriseContainerProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div
+      className={cn('enterprise-container', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Enterprise Section Component
+export interface EnterpriseSectionProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode
+}
+
+export const EnterpriseSection: React.FC<EnterpriseSectionProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <section
+      className={cn('enterprise-section', className)}
+      {...props}
+    >
+      {children}
+    </section>
+  )
+}
+
+// Enterprise Grid Component
+export interface EnterpriseGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  cols?: 1 | 2 | 3 | 4
+  children: React.ReactNode
+}
+
+export const EnterpriseGrid: React.FC<EnterpriseGridProps> = ({
+  cols = 1,
+  className,
+  children,
+  ...props
+}) => {
+  const colsClasses = {
+    1: 'enterprise-grid-cols-1',
+    2: 'enterprise-grid-cols-2',
+    3: 'enterprise-grid-cols-3',
+    4: 'enterprise-grid-cols-4'
+  }
+
+  return (
+    <div
+      className={cn('enterprise-grid', colsClasses[cols], className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+// Enterprise Loading Component
+export interface EnterpriseLoadingProps {
+  size?: 'sm' | 'default' | 'lg'
+  text?: string
+  className?: string
+}
+
+export const EnterpriseLoading: React.FC<EnterpriseLoadingProps> = ({
+  size = 'default',
+  text = 'Loading...',
+  className
+}) => {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    default: 'w-6 h-6',
+    lg: 'w-8 h-8'
+  }
+
+  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: 'success' | 'warning' | 'error' | 'info'
+  title: string
+  message?: string
+  onClose?: () => void
+  duration?: number
+  className?: string
+}
+
+export const EnterpriseNotification: React.FC<EnterpriseNotificationProps> = ({
+  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: 'enterprise-notification-success',
+    warning: 'enterprise-notification-warning',
+    error: 'enterprise-notification-error',
+    info: 'enterprise-notification-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:text-cs-text-primary transition-colors"
+          >
+            ✕
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}