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

package/dist/components/ui/enterprise-mobile-experience.esm.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>
+  )
+}