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

package/dist/components/ui/advanced-transition-system-demo.d.ts

@@ -1,660 +0,0 @@
-export const AdvancedTransitionSystemDemo: React.FC = () => {
-  const [activeDemo, setActiveDemo] = useState<'transitions' | 'performance' | 'device' | 'accessibility'>('transitions')
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    message: ''
-  })
-
-  const { transitionState, performanceMetrics, isOptimizing, optimizations } = useAdvancedTransitionSystem({
-    duration: 300,
-    easing: 'ease-out',
-    performance: true,
-    deviceOptimization: true,
-    accessibility: true,
-    batteryAware: true
-  }, {
-    onTransitionStart: (config) => {
-      console.log('Transition started:', config)
-    },
-    onTransitionComplete: (duration) => {
-      console.log('Transition completed in:', duration, 'ms')
-    },
-    onPerformanceOptimized: (metrics) => {
-      console.log('Performance optimized:', metrics)
-    },
-    onDeviceOptimized: (deviceType) => {
-      console.log('Device optimized for:', deviceType)
-    },
-    onAccessibilityEnhanced: (feature) => {
-      console.log('Accessibility enhanced:', feature)
-    }
-  })
-
-  const handleInputChange = (field: string, value: string) => {
-    setFormData(prev => ({ ...prev, [field]: value }))
-  }
-
-  const renderTransitionsDemo = () => (
-    <div className="space-y-8">
-      {/* Cubic Bezier Curves Showcase */}
-      <div className="space-y-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary">🎨 Cubic Bezier Curves</h3>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="space-y-4">
-            <h4 className="font-medium text-cs-text-primary">Standard Easing</h4>
-
-            <div className="space-y-3">
-              <AdvancedTransitionButton
-                duration={300}
-                easing="ease-out"
-                variant="default"
-                size="default"
-              >
-                Ease Out (Standard)
-              </AdvancedTransitionButton>
-
-              <AdvancedTransitionButton
-                duration={300}
-                easing="ease-in"
-                variant="secondary"
-                size="default"
-              >
-                Ease In
-              </AdvancedTransitionButton>
-
-              <AdvancedTransitionButton
-                duration={300}
-                easing="ease-in-out"
-                variant="outline"
-                size="default"
-              >
-                Ease In Out
-              </AdvancedTransitionButton>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="font-medium text-cs-text-primary">Advanced Easing</h4>
-
-            <div className="space-y-3">
-              <AdvancedTransitionButton
-                duration={300}
-                easing="ease-out-quint"
-                variant="default"
-                size="default"
-              >
-                Ease Out Quint
-              </AdvancedTransitionButton>
-
-              <AdvancedTransitionButton
-                duration={300}
-                easing="ease-out-expo"
-                variant="secondary"
-                size="default"
-              >
-                Ease Out Expo
-              </AdvancedTransitionButton>
-
-              <AdvancedTransitionButton
-                duration={300}
-                easing="ease-out-circ"
-                variant="outline"
-                size="default"
-              >
-                Ease Out Circ
-              </AdvancedTransitionButton>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Transition Durations */}
-      <div className="space-y-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary">⏱️ Transition Durations</h3>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="space-y-4">
-            <h4 className="font-medium text-cs-text-primary">Fast Transitions</h4>
-
-            <div className="space-y-3">
-              <AdvancedTransitionButton
-                duration={75}
-                easing="ease-out"
-                variant="default"
-                size="sm"
-              >
-                75ms (Ultra Fast)
-              </AdvancedTransitionButton>
-
-              <AdvancedTransitionButton
-                duration={150}
-                easing="ease-out"
-                variant="secondary"
-                size="sm"
-              >
-                150ms (Fast)
-              </AdvancedTransitionButton>
-
-              <AdvancedTransitionButton
-                duration={200}
-                easing="ease-out"
-                variant="outline"
-                size="sm"
-              >
-                200ms (Quick)
-              </AdvancedTransitionButton>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="font-medium text-cs-text-primary">Slow Transitions</h4>
-
-            <div className="space-y-3">
-              <AdvancedTransitionButton
-                duration={500}
-                easing="ease-out"
-                variant="default"
-                size="lg"
-              >
-                500ms (Slow)
-              </AdvancedTransitionButton>
-
-              <AdvancedTransitionButton
-                duration={700}
-                easing="ease-out"
-                variant="secondary"
-                size="lg"
-              >
-                700ms (Slower)
-              </AdvancedTransitionButton>
-
-              <AdvancedTransitionButton
-                duration={1000}
-                easing="ease-out"
-                variant="outline"
-                size="lg"
-              >
-                1000ms (Very Slow)
-              </AdvancedTransitionButton>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Interactive Components */}
-      <div className="space-y-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary">🎭 Interactive Components</h3>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <div className="space-y-4">
-            <h4 className="font-medium text-cs-text-primary">Interactive Cards</h4>
-
-            <div className="space-y-3">
-              <AdvancedTransitionCard
-                duration={300}
-                easing="ease-out"
-                interactive
-              >
-                <div className="text-center">
-                  <div className="text-lg font-semibold">Interactive Card</div>
-                  <div className="text-sm text-cs-text-secondary">Click to trigger transition</div>
-                </div>
-              </AdvancedTransitionCard>
-
-              <AdvancedTransitionCard
-                duration={500}
-                easing="ease-out-quint"
-                interactive
-              >
-                <div className="text-center">
-                  <div className="text-lg font-semibold">Quint Easing</div>
-                  <div className="text-sm text-cs-text-secondary">Smooth shadow transition</div>
-                </div>
-              </AdvancedTransitionCard>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <h4 className="font-medium text-cs-text-primary">Form Inputs</h4>
-
-            <div className="space-y-3">
-              <AdvancedTransitionInput
-                duration={200}
-                easing="ease-out"
-                placeholder="Focus to trigger transition"
-                value={formData.name}
-                onChange={(e) => handleInputChange('name', e.target.value)}
-              />
-
-              <AdvancedTransitionInput
-                duration={300}
-                easing="ease-out-quint"
-                placeholder="Quint easing on focus"
-                value={formData.email}
-                onChange={(e) => handleInputChange('email', e.target.value)}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Staggered Animations */}
-      <div className="space-y-6">
-        <h3 className="text-lg font-semibold text-cs-text-primary">🎬 Staggered Animations</h3>
-
-        <AdvancedTransitionList
-          duration={300}
-          easing="ease-out"
-          staggerDelay={100}
-        >
-          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-1">
-            Item 1 - Fades in first
-          </li>
-          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-2">
-            Item 2 - Fades in second
-          </li>
-          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-3">
-            Item 3 - Fades in third
-          </li>
-          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-4">
-            Item 4 - Fades in fourth
-          </li>
-          <li className="p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-5">
-            Item 5 - Fades in last
-          </li>
-        </AdvancedTransitionList>
-      </div>
-    </div>
-  )
-
-  const renderPerformanceDemo = () => (
-    <div className="space-y-6">
-      {/* Performance Metrics */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">📊 Performance Metrics</h3>
-
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-            <div className="space-y-3">
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Frame Rate</span>
-                <span className={`text-lg font-bold ${
-                  performanceMetrics.frameRate >= 55 ? 'text-cs-success' :
-                  performanceMetrics.frameRate >= 45 ? 'text-cs-warning' : 'text-cs-error'
-                }`}>
-                  {performanceMetrics.frameRate} FPS
-                </span>
-              </div>
-
-              <div className="w-full bg-cs-border rounded-full h-2">
-                <div 
-                  className={`h-2 rounded-full transition-all duration-300 ${
-                    performanceMetrics.frameRate >= 55 ? 'bg-cs-success' :
-                    performanceMetrics.frameRate >= 45 ? 'bg-cs-warning' : 'bg-cs-error'
-                  }`}
-                  style={{ width: `${(performanceMetrics.frameRate / 60) * 100}%` }}
-                />
-              </div>
-
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Memory Usage</span>
-                <span className="font-medium">{performanceMetrics.memoryUsage}%</span>
-              </div>
-
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Smoothness</span>
-                <span className={`font-medium ${
-                  performanceMetrics.smoothness >= 80 ? 'text-cs-success' :
-                  performanceMetrics.smoothness >= 60 ? 'text-cs-warning' : 'text-cs-error'
-                }`}>
-                  {performanceMetrics.smoothness}%
-                </span>
-              </div>
-
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Battery Impact</span>
-                <span className={`font-medium ${
-                  performanceMetrics.batteryImpact >= 80 ? 'text-cs-success' :
-                  performanceMetrics.batteryImpact >= 60 ? 'text-cs-warning' : 'text-cs-error'
-                }`}>
-                  {performanceMetrics.batteryImpact}%
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">🎯 Performance Score</h3>
-
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-            <div className="text-center space-y-3">
-              <div className={`text-4xl font-bold ${
-                transitionState.performanceScore >= 80 ? 'text-cs-success' :
-                transitionState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
-              }`}>
-                {transitionState.performanceScore}/100
-              </div>
-
-              <div className="w-full bg-cs-border rounded-full h-3">
-                <div 
-                  className={`h-3 rounded-full transition-all duration-300 ${
-                    transitionState.performanceScore >= 80 ? 'bg-cs-success' :
-                    transitionState.performanceScore >= 60 ? 'bg-cs-warning' : 'bg-cs-error'
-                  }`}
-                  style={{ width: `${transitionState.performanceScore}%` }}
-                />
-              </div>
-
-              <div className="text-sm text-cs-text-secondary">
-                {transitionState.performanceScore >= 80 ? 'Excellent Performance' :
-                 transitionState.performanceScore >= 60 ? 'Good Performance' : 'Needs Optimization'}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Hardware Acceleration */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-cs-text-primary">🚀 Hardware Acceleration</h3>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center">
-            <div className="text-2xl mb-2">⚡</div>
-            <div className="font-medium">GPU Acceleration</div>
-            <div className="text-sm text-cs-text-secondary">Hardware-accelerated transforms</div>
-          </div>
-
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center">
-            <div className="text-2xl mb-2">💾</div>
-            <div className="font-medium">Memory Optimization</div>
-            <div className="text-sm text-cs-text-secondary">Efficient memory usage</div>
-          </div>
-
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center">
-            <div className="text-2xl mb-2">🔋</div>
-            <div className="font-medium">Battery Aware</div>
-            <div className="text-sm text-cs-text-secondary">Optimized for battery life</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-
-  const renderDeviceDemo = () => (
-    <div className="space-y-6">
-      {/* Device Detection */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">📱 Device Detection</h3>
-
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-            <div className="space-y-3">
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Current Device</span>
-                <Badge variant="default" className="capitalize">
-                  {transitionState.deviceType}
-                </Badge>
-              </div>
-
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Battery Level</span>
-                <Badge 
-                  variant={
-                    transitionState.batteryLevel === 'normal' ? 'default' :
-                    transitionState.batteryLevel === 'low' ? 'secondary' : 'outline'
-                  }
-                  className="capitalize"
-                >
-                  {transitionState.batteryLevel}
-                </Badge>
-              </div>
-
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Reduced Motion</span>
-                <Badge variant={transitionState.reducedMotion ? 'outline' : 'default'}>
-                  {transitionState.reducedMotion ? 'Enabled' : 'Disabled'}
-                </Badge>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">⚙️ Device Optimizations</h3>
-
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-            {isOptimizing ? (
-              <div className="text-center py-4">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-cs-primary mx-auto mb-2"></div>
-                <div className="text-sm text-cs-text-secondary">Optimizing for device...</div>
-              </div>
-            ) : optimizations.length > 0 ? (
-              <div className="space-y-2">
-                {optimizations.map((optimization, index) => (
-                  <div key={index} className="flex items-center space-x-2 text-sm">
-                    <span className="text-cs-success">✅</span>
-                    <span>{optimization}</span>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div className="text-center py-4 text-cs-text-secondary">
-                No optimizations applied yet
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-
-      {/* Device-Specific Transitions */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-cs-text-primary">🎯 Device-Specific Transitions</h3>
-
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <AdvancedTransitionCard
-            duration={transitionState.deviceType === 'mobile' ? 200 : 300}
-            easing="ease-out"
-            className="text-center"
-          >
-            <div className="text-lg font-semibold">Mobile Optimized</div>
-            <div className="text-sm text-cs-text-secondary">
-              Duration: {transitionState.deviceType === 'mobile' ? '200ms' : '300ms'}
-            </div>
-          </AdvancedTransitionCard>
-
-          <AdvancedTransitionCard
-            duration={transitionState.deviceType === 'tablet' ? 250 : 300}
-            easing="ease-out"
-            className="text-center"
-          >
-            <div className="text-lg font-semibold">Tablet Optimized</div>
-            <div className="text-sm text-cs-text-secondary">
-              Duration: {transitionState.deviceType === 'tablet' ? '250ms' : '300ms'}
-            </div>
-          </AdvancedTransitionCard>
-
-          <AdvancedTransitionCard
-            duration={300}
-            easing="ease-out"
-            className="text-center"
-          >
-            <div className="text-lg font-semibold">Desktop Optimized</div>
-            <div className="text-sm text-cs-text-secondary">
-              Duration: 300ms
-            </div>
-          </AdvancedTransitionCard>
-        </div>
-      </div>
-    </div>
-  )
-
-  const renderAccessibilityDemo = () => (
-    <div className="space-y-6">
-      {/* Accessibility Features */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">♿ Accessibility Features</h3>
-
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-            <div className="space-y-3">
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Reduced Motion</span>
-                <Badge variant={transitionState.reducedMotion ? 'default' : 'secondary'}>
-                  {transitionState.reducedMotion ? 'Supported' : 'Not Detected'}
-                </Badge>
-              </div>
-
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Screen Reader</span>
-                <Badge variant="default">Supported</Badge>
-              </div>
-
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">Focus Management</span>
-                <Badge variant="default">Enabled</Badge>
-              </div>
-
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium">ARIA Support</span>
-                <Badge variant="default">Full</Badge>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">🎭 Motion Preferences</h3>
-
-          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-            <div className="space-y-3">
-              <div className="text-center">
-                <div className="text-2xl mb-2">
-                  {transitionState.reducedMotion ? '🚫' : '✨'}
-                </div>
-                <div className="font-medium">
-                  {transitionState.reducedMotion ? 'Reduced Motion' : 'Full Motion'}
-                </div>
-                <div className="text-sm text-cs-text-secondary">
-                  {transitionState.reducedMotion 
-                    ? 'Transitions are disabled for accessibility' 
-                    : 'All transitions are enabled'}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Accessibility Test */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-cs-text-primary">🧪 Accessibility Test</h3>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <AdvancedTransitionButton
-            duration={transitionState.reducedMotion ? 0 : 300}
-            easing="ease-out"
-            variant="default"
-            size="default"
-            aria-label="Test button with accessibility support"
-          >
-            Test Button
-          </AdvancedTransitionButton>
-
-          <AdvancedTransitionInput
-            duration={transitionState.reducedMotion ? 0 : 200}
-            easing="ease-out"
-            placeholder="Test input accessibility"
-            aria-label="Test input with accessibility support"
-          />
-        </div>
-
-        <div className="text-sm text-cs-text-secondary">
-          <strong>Note:</strong> If you have reduced motion enabled in your system preferences, 
-          transitions will be automatically disabled for better accessibility.
-        </div>
-      </div>
-    </div>
-  )
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="text-center space-y-2">
-        <h2 className="text-2xl font-bold text-cs-text-primary">
-          Advanced Transition System with Cubic Bezier Curves
-        </h2>
-        <p className="text-cs-text-secondary">
-          Professional animation system with performance optimization, device-specific behavior, and accessibility support
-        </p>
-      </div>
-
-      {/* Navigation Tabs */}
-      <div className="flex flex-wrap gap-2 justify-center">
-        {(['transitions', 'performance', 'device', 'accessibility'] as const).map((demo) => (
-          <button
-            key={demo}
-            onClick={() => setActiveDemo(demo)}
-            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
-              activeDemo === demo
-                ? 'bg-cs-primary text-white'
-                : 'bg-cs-surface-bg text-cs-text-primary hover:bg-cs-hover-bg'
-            }`}
-          >
-            {demo === 'transitions' && '🎨 Transitions'}
-            {demo === 'performance' && '📊 Performance'}
-            {demo === 'device' && '📱 Device'}
-            {demo === 'accessibility' && '♿ Accessibility'}
-          </button>
-        ))}
-      </div>
-
-      {/* Demo Content */}
-      <div className="min-h-[400px]">
-        {activeDemo === 'transitions' && renderTransitionsDemo()}
-        {activeDemo === 'performance' && renderPerformanceDemo()}
-        {activeDemo === 'device' && renderDeviceDemo()}
-        {activeDemo === 'accessibility' && renderAccessibilityDemo()}
-      </div>
-
-      {/* Status Bar */}
-      <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-        <div className="flex flex-wrap items-center justify-between gap-4 text-sm">
-          <div className="flex items-center space-x-4">
-            <span className="font-medium">Device:</span>
-            <Badge variant="outline" className="capitalize">
-              {transitionState.deviceType}
-            </Badge>
-            <span className="font-medium">Battery:</span>
-            <Badge 
-              variant={
-                transitionState.batteryLevel === 'normal' ? 'default' :
-                transitionState.batteryLevel === 'low' ? 'secondary' : 'outline'
-              }
-              className="capitalize"
-            >
-              {transitionState.batteryLevel}
-            </Badge>
-          </div>
-
-          <div className="flex items-center space-x-4">
-            <span className="font-medium">Performance:</span>
-            <span className={`font-bold ${
-              transitionState.performanceScore >= 80 ? 'text-cs-success' :
-              transitionState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
-            }`}>
-              {transitionState.performanceScore}%
-            </span>
-            <span className="font-medium">Motion:</span>
-            <Badge variant={transitionState.reducedMotion ? 'outline' : 'default'}>
-              {transitionState.reducedMotion ? 'Reduced' : 'Full'}
-            </Badge>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}