@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.9 → 0.2.10

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

@@ -3,7 +3,11 @@ import { cn } from '../../lib/utils'
 
 // Enterprise Button Component
 export interface EnterpriseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?}
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'premium'
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  loading?: boolean
+  children: React.ReactNode
+}
 
 export const EnterpriseButton = forwardRef<HTMLButtonElement, EnterpriseButtonProps>(
   ({ className, variant = 'default', size = 'default', loading = false, children, ...props }, ref) => {
@@ -12,17 +16,18 @@ export const EnterpriseButton = forwardRef<HTMLButtonElement, EnterpriseButtonPr
     const baseClasses = 'enterprise-button enterprise-mobile-optimized enterprise-interaction-refined'
     
     const variantClasses = {
-      default,
-      secondary,
-      outline,
-      ghost,
-      premium}
+      default: 'enterprise-button',
+      secondary: 'enterprise-button-secondary',
+      outline: 'enterprise-button-outline',
+      ghost: 'enterprise-button-ghost',
+      premium: 'enterprise-button enterprise-interaction-premium'
+    }
 
     const sizeClasses = {
-      sm] min-w-[40px]',
-      default] min-w-[48px]',
-      lg] min-w-[56px]',
-      xl] min-w-[64px]'
+      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)
@@ -59,17 +64,20 @@ EnterpriseButton.displayName = 'EnterpriseButton'
 
 // Enterprise Card Component
 export interface EnterpriseCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?}
+  variant?: 'default' | 'interactive' | 'premium' | 'featured'
+  children: React.ReactNode
+}
 
 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}
+      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
@@ -91,7 +99,11 @@ EnterpriseCard.displayName = 'EnterpriseCard'
 
 // Enterprise Input Component
 export interface EnterpriseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  variant?}
+  variant?: 'default' | 'success' | 'error' | 'warning'
+  label?: string
+  required?: boolean
+  children?: React.ReactNode
+}
 
 export const EnterpriseInput = forwardRef<HTMLInputElement, EnterpriseInputProps>(
   ({ className, variant = 'default', label, required = false, children, ...props }, ref) => {
@@ -100,10 +112,11 @@ export const EnterpriseInput = forwardRef<HTMLInputElement, EnterpriseInputProps
     const baseClasses = 'enterprise-input enterprise-mobile-optimized enterprise-accessibility'
     
     const variantClasses = {
-      default,
-      success,
-      error,
-      warning}
+      default: '',
+      success: 'enterprise-input-success',
+      error: 'enterprise-input-error',
+      warning: 'enterprise-input-warning'
+    }
 
     const handleFocus = () => setIsFocused(true)
     const handleBlur = () => setIsFocused(false)
@@ -142,9 +155,15 @@ EnterpriseInput.displayName = 'EnterpriseInput'
 
 // Enterprise Progress Component
 export interface EnterpriseProgressProps {
-  value}
+  value: number
+  max?: number
+  variant?: 'default' | 'success' | 'warning' | 'error'
+  size?: 'sm' | 'default' | 'lg'
+  showLabel?: boolean
+  className?: string
+}
 
-export const EnterpriseProgress= ({
+export const EnterpriseProgress: React.FC<EnterpriseProgressProps> = ({
   value,
   max = 100,
   variant = 'default',
@@ -157,15 +176,17 @@ export const EnterpriseProgress= ({
   const baseClasses = 'enterprise-progress enterprise-performance'
   
   const sizeClasses = {
-    sm,
-    default,
-    lg}
+    sm: 'h-1',
+    default: 'h-2',
+    lg: 'h-3'
+  }
 
   const variantClasses = {
-    default,
-    success,
-    warning,
-    error}
+    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)}>
@@ -178,7 +199,7 @@ export const EnterpriseProgress= ({
       <div className={cn(baseClasses, sizeClasses[size])}>
         <div
           className={cn(variantClasses[variant])}
-          style={{ width}%` }}
+          style={{ width: `${percentage}%` }}
         />
       </div>
     </div>
@@ -187,9 +208,14 @@ export const EnterpriseProgress= ({
 
 // Enterprise Quality Metric Component
 export interface EnterpriseQualityMetricProps {
-  score}
+  score: number
+  label: string
+  description?: string
+  variant?: 'default' | 'excellent' | 'good' | 'needs-improvement'
+  className?: string
+}
 
-export const EnterpriseQualityMetric= ({
+export const EnterpriseQualityMetric: React.FC<EnterpriseQualityMetricProps> = ({
   score,
   label,
   description,
@@ -228,28 +254,33 @@ export const EnterpriseQualityMetric= ({
 
 // Enterprise Status Component
 export interface EnterpriseStatusProps {
-  phase}
+  phase: 'initializing' | 'optimizing' | 'polishing' | 'verifying' | 'complete' | 'enterprise-ready'
+  children: React.ReactNode
+  className?: string
+}
 
-export const EnterpriseStatus= ({
+export const EnterpriseStatus: React.FC<EnterpriseStatusProps> = ({
   phase,
   children,
   className
 }) => {
   const phaseClasses = {
-    initializing,
-    optimizing,
-    polishing,
-    verifying,
-    complete,
-    'enterprise-ready'}
+    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'}
+    initializing: '🔄',
+    optimizing: '⚡',
+    polishing: '✨',
+    verifying: '🔍',
+    complete: '✅',
+    'enterprise-ready': '🏆'
+  }
 
   return (
     <span className={cn('enterprise-status', phaseClasses[phase], className)}>
@@ -261,9 +292,10 @@ export const EnterpriseStatus= ({
 
 // Enterprise Container Component
 export interface EnterpriseContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  children}
+  children: React.ReactNode
+}
 
-export const EnterpriseContainer= ({
+export const EnterpriseContainer: React.FC<EnterpriseContainerProps> = ({
   className,
   children,
   ...props
@@ -280,9 +312,10 @@ export const EnterpriseContainer= ({
 
 // Enterprise Section Component
 export interface EnterpriseSectionProps extends React.HTMLAttributes<HTMLElement> {
-  children}
+  children: React.ReactNode
+}
 
-export const EnterpriseSection= ({
+export const EnterpriseSection: React.FC<EnterpriseSectionProps> = ({
   className,
   children,
   ...props
@@ -299,19 +332,22 @@ export const EnterpriseSection= ({
 
 // Enterprise Grid Component
 export interface EnterpriseGridProps extends React.HTMLAttributes<HTMLDivElement> {
-  cols?}
+  cols?: 1 | 2 | 3 | 4
+  children: React.ReactNode
+}
 
-export const EnterpriseGrid= ({
+export const EnterpriseGrid: React.FC<EnterpriseGridProps> = ({
   cols = 1,
   className,
   children,
   ...props
 }) => {
   const colsClasses = {
-    1,
-    2,
-    3,
-    4}
+    1: 'enterprise-grid-cols-1',
+    2: 'enterprise-grid-cols-2',
+    3: 'enterprise-grid-cols-3',
+    4: 'enterprise-grid-cols-4'
+  }
 
   return (
     <div
@@ -325,17 +361,21 @@ export const EnterpriseGrid= ({
 
 // Enterprise Loading Component
 export interface EnterpriseLoadingProps {
-  size?}
+  size?: 'sm' | 'default' | 'lg'
+  text?: string
+  className?: string
+}
 
-export const EnterpriseLoading= ({
+export const EnterpriseLoading: React.FC<EnterpriseLoadingProps> = ({
   size = 'default',
   text = 'Loading...',
   className
 }) => {
   const sizeClasses = {
-    sm,
-    default,
-    lg}
+    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)}>
@@ -351,10 +391,15 @@ export const EnterpriseLoading= ({
 
 // Enterprise Notification Component
 export interface EnterpriseNotificationProps {
-  type) => void
-  duration?}
+  type: 'success' | 'warning' | 'error' | 'info'
+  title: string
+  message?: string
+  onClose?: () => void
+  duration?: number
+  className?: string
+}
 
-export const EnterpriseNotification= ({
+export const EnterpriseNotification: React.FC<EnterpriseNotificationProps> = ({
   type,
   title,
   message,
@@ -376,16 +421,18 @@ export const EnterpriseNotification= ({
   }, [duration, onClose])
 
   const typeClasses = {
-    success,
-    warning,
-    error,
-    info}
+    success: 'enterprise-notification-success',
+    warning: 'enterprise-notification-warning',
+    error: 'enterprise-notification-error',
+    info: 'enterprise-notification-info'
+  }
 
   const typeIcons = {
-    success,
-    warning,
-    error,
-    info}
+    success: '✅',
+    warning: '⚠️',
+    error: '❌',
+    info: 'ℹ️'
+  }
 
   if (!isVisible) return null
 
@@ -406,7 +453,11 @@ export const EnterpriseNotification= ({
         {onClose && (
           <button
             onClick={onClose}
-            className="text-cs-text-secondary hover)}
+            className="text-cs-text-secondary hover:text-cs-text-primary transition-colors"
+          >
+            ✕
+          </button>
+        )}
       </div>
     </div>
   )

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

@@ -3,7 +3,11 @@ import { cn } from '../../lib/utils'
 
 // Enterprise Button Component
 export interface EnterpriseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?}
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'premium'
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  loading?: boolean
+  children: React.ReactNode
+}
 
 export const EnterpriseButton = forwardRef<HTMLButtonElement, EnterpriseButtonProps>(
   ({ className, variant = 'default', size = 'default', loading = false, children, ...props }, ref) => {
@@ -12,17 +16,18 @@ export const EnterpriseButton = forwardRef<HTMLButtonElement, EnterpriseButtonPr
     const baseClasses = 'enterprise-button enterprise-mobile-optimized enterprise-interaction-refined'
     
     const variantClasses = {
-      default,
-      secondary,
-      outline,
-      ghost,
-      premium}
+      default: 'enterprise-button',
+      secondary: 'enterprise-button-secondary',
+      outline: 'enterprise-button-outline',
+      ghost: 'enterprise-button-ghost',
+      premium: 'enterprise-button enterprise-interaction-premium'
+    }
 
     const sizeClasses = {
-      sm] min-w-[40px]',
-      default] min-w-[48px]',
-      lg] min-w-[56px]',
-      xl] min-w-[64px]'
+      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)
@@ -59,17 +64,20 @@ EnterpriseButton.displayName = 'EnterpriseButton'
 
 // Enterprise Card Component
 export interface EnterpriseCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  variant?}
+  variant?: 'default' | 'interactive' | 'premium' | 'featured'
+  children: React.ReactNode
+}
 
 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}
+      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
@@ -91,7 +99,11 @@ EnterpriseCard.displayName = 'EnterpriseCard'
 
 // Enterprise Input Component
 export interface EnterpriseInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  variant?}
+  variant?: 'default' | 'success' | 'error' | 'warning'
+  label?: string
+  required?: boolean
+  children?: React.ReactNode
+}
 
 export const EnterpriseInput = forwardRef<HTMLInputElement, EnterpriseInputProps>(
   ({ className, variant = 'default', label, required = false, children, ...props }, ref) => {
@@ -100,10 +112,11 @@ export const EnterpriseInput = forwardRef<HTMLInputElement, EnterpriseInputProps
     const baseClasses = 'enterprise-input enterprise-mobile-optimized enterprise-accessibility'
     
     const variantClasses = {
-      default,
-      success,
-      error,
-      warning}
+      default: '',
+      success: 'enterprise-input-success',
+      error: 'enterprise-input-error',
+      warning: 'enterprise-input-warning'
+    }
 
     const handleFocus = () => setIsFocused(true)
     const handleBlur = () => setIsFocused(false)
@@ -142,9 +155,15 @@ EnterpriseInput.displayName = 'EnterpriseInput'
 
 // Enterprise Progress Component
 export interface EnterpriseProgressProps {
-  value}
+  value: number
+  max?: number
+  variant?: 'default' | 'success' | 'warning' | 'error'
+  size?: 'sm' | 'default' | 'lg'
+  showLabel?: boolean
+  className?: string
+}
 
-export const EnterpriseProgress= ({
+export const EnterpriseProgress: React.FC<EnterpriseProgressProps> = ({
   value,
   max = 100,
   variant = 'default',
@@ -157,15 +176,17 @@ export const EnterpriseProgress= ({
   const baseClasses = 'enterprise-progress enterprise-performance'
   
   const sizeClasses = {
-    sm,
-    default,
-    lg}
+    sm: 'h-1',
+    default: 'h-2',
+    lg: 'h-3'
+  }
 
   const variantClasses = {
-    default,
-    success,
-    warning,
-    error}
+    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)}>
@@ -178,7 +199,7 @@ export const EnterpriseProgress= ({
       <div className={cn(baseClasses, sizeClasses[size])}>
         <div
           className={cn(variantClasses[variant])}
-          style={{ width}%` }}
+          style={{ width: `${percentage}%` }}
         />
       </div>
     </div>
@@ -187,9 +208,14 @@ export const EnterpriseProgress= ({
 
 // Enterprise Quality Metric Component
 export interface EnterpriseQualityMetricProps {
-  score}
+  score: number
+  label: string
+  description?: string
+  variant?: 'default' | 'excellent' | 'good' | 'needs-improvement'
+  className?: string
+}
 
-export const EnterpriseQualityMetric= ({
+export const EnterpriseQualityMetric: React.FC<EnterpriseQualityMetricProps> = ({
   score,
   label,
   description,
@@ -228,28 +254,33 @@ export const EnterpriseQualityMetric= ({
 
 // Enterprise Status Component
 export interface EnterpriseStatusProps {
-  phase}
+  phase: 'initializing' | 'optimizing' | 'polishing' | 'verifying' | 'complete' | 'enterprise-ready'
+  children: React.ReactNode
+  className?: string
+}
 
-export const EnterpriseStatus= ({
+export const EnterpriseStatus: React.FC<EnterpriseStatusProps> = ({
   phase,
   children,
   className
 }) => {
   const phaseClasses = {
-    initializing,
-    optimizing,
-    polishing,
-    verifying,
-    complete,
-    'enterprise-ready'}
+    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'}
+    initializing: '🔄',
+    optimizing: '⚡',
+    polishing: '✨',
+    verifying: '🔍',
+    complete: '✅',
+    'enterprise-ready': '🏆'
+  }
 
   return (
     <span className={cn('enterprise-status', phaseClasses[phase], className)}>
@@ -261,9 +292,10 @@ export const EnterpriseStatus= ({
 
 // Enterprise Container Component
 export interface EnterpriseContainerProps extends React.HTMLAttributes<HTMLDivElement> {
-  children}
+  children: React.ReactNode
+}
 
-export const EnterpriseContainer= ({
+export const EnterpriseContainer: React.FC<EnterpriseContainerProps> = ({
   className,
   children,
   ...props
@@ -280,9 +312,10 @@ export const EnterpriseContainer= ({
 
 // Enterprise Section Component
 export interface EnterpriseSectionProps extends React.HTMLAttributes<HTMLElement> {
-  children}
+  children: React.ReactNode
+}
 
-export const EnterpriseSection= ({
+export const EnterpriseSection: React.FC<EnterpriseSectionProps> = ({
   className,
   children,
   ...props
@@ -299,19 +332,22 @@ export const EnterpriseSection= ({
 
 // Enterprise Grid Component
 export interface EnterpriseGridProps extends React.HTMLAttributes<HTMLDivElement> {
-  cols?}
+  cols?: 1 | 2 | 3 | 4
+  children: React.ReactNode
+}
 
-export const EnterpriseGrid= ({
+export const EnterpriseGrid: React.FC<EnterpriseGridProps> = ({
   cols = 1,
   className,
   children,
   ...props
 }) => {
   const colsClasses = {
-    1,
-    2,
-    3,
-    4}
+    1: 'enterprise-grid-cols-1',
+    2: 'enterprise-grid-cols-2',
+    3: 'enterprise-grid-cols-3',
+    4: 'enterprise-grid-cols-4'
+  }
 
   return (
     <div
@@ -325,17 +361,21 @@ export const EnterpriseGrid= ({
 
 // Enterprise Loading Component
 export interface EnterpriseLoadingProps {
-  size?}
+  size?: 'sm' | 'default' | 'lg'
+  text?: string
+  className?: string
+}
 
-export const EnterpriseLoading= ({
+export const EnterpriseLoading: React.FC<EnterpriseLoadingProps> = ({
   size = 'default',
   text = 'Loading...',
   className
 }) => {
   const sizeClasses = {
-    sm,
-    default,
-    lg}
+    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)}>
@@ -351,10 +391,15 @@ export const EnterpriseLoading= ({
 
 // Enterprise Notification Component
 export interface EnterpriseNotificationProps {
-  type) => void
-  duration?}
+  type: 'success' | 'warning' | 'error' | 'info'
+  title: string
+  message?: string
+  onClose?: () => void
+  duration?: number
+  className?: string
+}
 
-export const EnterpriseNotification= ({
+export const EnterpriseNotification: React.FC<EnterpriseNotificationProps> = ({
   type,
   title,
   message,
@@ -376,16 +421,18 @@ export const EnterpriseNotification= ({
   }, [duration, onClose])
 
   const typeClasses = {
-    success,
-    warning,
-    error,
-    info}
+    success: 'enterprise-notification-success',
+    warning: 'enterprise-notification-warning',
+    error: 'enterprise-notification-error',
+    info: 'enterprise-notification-info'
+  }
 
   const typeIcons = {
-    success,
-    warning,
-    error,
-    info}
+    success: '✅',
+    warning: '⚠️',
+    error: '❌',
+    info: 'ℹ️'
+  }
 
   if (!isVisible) return null
 
@@ -406,7 +453,11 @@ export const EnterpriseNotification= ({
         {onClose && (
           <button
             onClick={onClose}
-            className="text-cs-text-secondary hover)}
+            className="text-cs-text-secondary hover:text-cs-text-primary transition-colors"
+          >
+            ✕
+          </button>
+        )}
       </div>
     </div>
   )