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

package/dist/components/ui/advanced-transition-system-demo.js

@@ -1,670 +1,59 @@
-import React, { useState } from 'react'
-import { Badge } from './badge'
-import { useAdvancedTransitionSystem } from '../../hooks/use-advanced-transition-system'
-import {
-  AdvancedTransitionButton,
-  AdvancedTransitionCard,
-  AdvancedTransitionInput,
-  AdvancedTransitionList
-} from './advanced-transition-system'
-
-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>
-  )
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Badge } from './badge';
+import { useAdvancedTransitionSystem } from '../../hooks/use-advanced-transition-system';
+import { AdvancedTransitionButton, AdvancedTransitionCard, AdvancedTransitionInput, AdvancedTransitionList } from './advanced-transition-system';
+export const AdvancedTransitionSystemDemo = () => {
+    const [activeDemo, setActiveDemo] = useState('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, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    };
+    const renderTransitionsDemo = () => (_jsxs("div", { className: "space-y-8", children: [_jsxs("div", { className: "space-y-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83C\uDFA8 Cubic Bezier Curves" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-medium text-cs-text-primary", children: "Standard Easing" }), _jsxs("div", { className: "space-y-3", children: [_jsx(AdvancedTransitionButton, { duration: 300, easing: "ease-out", variant: "default", size: "default", children: "Ease Out (Standard)" }), _jsx(AdvancedTransitionButton, { duration: 300, easing: "ease-in", variant: "secondary", size: "default", children: "Ease In" }), _jsx(AdvancedTransitionButton, { duration: 300, easing: "ease-in-out", variant: "outline", size: "default", children: "Ease In Out" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-medium text-cs-text-primary", children: "Advanced Easing" }), _jsxs("div", { className: "space-y-3", children: [_jsx(AdvancedTransitionButton, { duration: 300, easing: "ease-out-quint", variant: "default", size: "default", children: "Ease Out Quint" }), _jsx(AdvancedTransitionButton, { duration: 300, easing: "ease-out-expo", variant: "secondary", size: "default", children: "Ease Out Expo" }), _jsx(AdvancedTransitionButton, { duration: 300, easing: "ease-out-circ", variant: "outline", size: "default", children: "Ease Out Circ" })] })] })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\u23F1\uFE0F Transition Durations" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-medium text-cs-text-primary", children: "Fast Transitions" }), _jsxs("div", { className: "space-y-3", children: [_jsx(AdvancedTransitionButton, { duration: 75, easing: "ease-out", variant: "default", size: "sm", children: "75ms (Ultra Fast)" }), _jsx(AdvancedTransitionButton, { duration: 150, easing: "ease-out", variant: "secondary", size: "sm", children: "150ms (Fast)" }), _jsx(AdvancedTransitionButton, { duration: 200, easing: "ease-out", variant: "outline", size: "sm", children: "200ms (Quick)" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-medium text-cs-text-primary", children: "Slow Transitions" }), _jsxs("div", { className: "space-y-3", children: [_jsx(AdvancedTransitionButton, { duration: 500, easing: "ease-out", variant: "default", size: "lg", children: "500ms (Slow)" }), _jsx(AdvancedTransitionButton, { duration: 700, easing: "ease-out", variant: "secondary", size: "lg", children: "700ms (Slower)" }), _jsx(AdvancedTransitionButton, { duration: 1000, easing: "ease-out", variant: "outline", size: "lg", children: "1000ms (Very Slow)" })] })] })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83C\uDFAD Interactive Components" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-medium text-cs-text-primary", children: "Interactive Cards" }), _jsxs("div", { className: "space-y-3", children: [_jsx(AdvancedTransitionCard, { duration: 300, easing: "ease-out", interactive: true, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: "Interactive Card" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "Click to trigger transition" })] }) }), _jsx(AdvancedTransitionCard, { duration: 500, easing: "ease-out-quint", interactive: true, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: "Quint Easing" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "Smooth shadow transition" })] }) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h4", { className: "font-medium text-cs-text-primary", children: "Form Inputs" }), _jsxs("div", { className: "space-y-3", children: [_jsx(AdvancedTransitionInput, { duration: 200, easing: "ease-out", placeholder: "Focus to trigger transition", value: formData.name, onChange: (e) => handleInputChange('name', e.target.value) }), _jsx(AdvancedTransitionInput, { duration: 300, easing: "ease-out-quint", placeholder: "Quint easing on focus", value: formData.email, onChange: (e) => handleInputChange('email', e.target.value) })] })] })] })] }), _jsxs("div", { className: "space-y-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83C\uDFAC Staggered Animations" }), _jsxs(AdvancedTransitionList, { duration: 300, easing: "ease-out", staggerDelay: 100, children: [_jsx("li", { className: "p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-1", children: "Item 1 - Fades in first" }), _jsx("li", { className: "p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-2", children: "Item 2 - Fades in second" }), _jsx("li", { className: "p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-3", children: "Item 3 - Fades in third" }), _jsx("li", { className: "p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-4", children: "Item 4 - Fades in fourth" }), _jsx("li", { className: "p-3 bg-cs-surface-bg border border-cs-border rounded-lg animate-fade-in animate-stagger-5", children: "Item 5 - Fades in last" })] })] })] }));
+    const renderPerformanceDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83D\uDCCA Performance Metrics" }), _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Frame Rate" }), _jsxs("span", { className: `text-lg font-bold ${performanceMetrics.frameRate >= 55 ? 'text-cs-success' :
+                                                        performanceMetrics.frameRate >= 45 ? 'text-cs-warning' : 'text-cs-error'}`, children: [performanceMetrics.frameRate, " FPS"] })] }), _jsx("div", { className: "w-full bg-cs-border rounded-full h-2", children: _jsx("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}%` } }) }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Memory Usage" }), _jsxs("span", { className: "font-medium", children: [performanceMetrics.memoryUsage, "%"] })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Smoothness" }), _jsxs("span", { className: `font-medium ${performanceMetrics.smoothness >= 80 ? 'text-cs-success' :
+                                                        performanceMetrics.smoothness >= 60 ? 'text-cs-warning' : 'text-cs-error'}`, children: [performanceMetrics.smoothness, "%"] })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Battery Impact" }), _jsxs("span", { className: `font-medium ${performanceMetrics.batteryImpact >= 80 ? 'text-cs-success' :
+                                                        performanceMetrics.batteryImpact >= 60 ? 'text-cs-warning' : 'text-cs-error'}`, children: [performanceMetrics.batteryImpact, "%"] })] })] }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83C\uDFAF Performance Score" }), _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "text-center space-y-3", children: [_jsxs("div", { className: `text-4xl font-bold ${transitionState.performanceScore >= 80 ? 'text-cs-success' :
+                                                transitionState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'}`, children: [transitionState.performanceScore, "/100"] }), _jsx("div", { className: "w-full bg-cs-border rounded-full h-3", children: _jsx("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}%` } }) }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: transitionState.performanceScore >= 80 ? 'Excellent Performance' :
+                                                transitionState.performanceScore >= 60 ? 'Good Performance' : 'Needs Optimization' })] }) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83D\uDE80 Hardware Acceleration" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\u26A1" }), _jsx("div", { className: "font-medium", children: "GPU Acceleration" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "Hardware-accelerated transforms" })] }), _jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDCBE" }), _jsx("div", { className: "font-medium", children: "Memory Optimization" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "Efficient memory usage" })] }), _jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDD0B" }), _jsx("div", { className: "font-medium", children: "Battery Aware" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "Optimized for battery life" })] })] })] })] }));
+    const renderDeviceDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83D\uDCF1 Device Detection" }), _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Current Device" }), _jsx(Badge, { variant: "default", className: "capitalize", children: transitionState.deviceType })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Battery Level" }), _jsx(Badge, { variant: transitionState.batteryLevel === 'normal' ? 'default' :
+                                                        transitionState.batteryLevel === 'low' ? 'secondary' : 'outline', className: "capitalize", children: transitionState.batteryLevel })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Reduced Motion" }), _jsx(Badge, { variant: transitionState.reducedMotion ? 'outline' : 'default', children: transitionState.reducedMotion ? 'Enabled' : 'Disabled' })] })] }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\u2699\uFE0F Device Optimizations" }), _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: isOptimizing ? (_jsxs("div", { className: "text-center py-4", children: [_jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-cs-primary mx-auto mb-2" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "Optimizing for device..." })] })) : optimizations.length > 0 ? (_jsx("div", { className: "space-y-2", children: optimizations.map((optimization, index) => (_jsxs("div", { className: "flex items-center space-x-2 text-sm", children: [_jsx("span", { className: "text-cs-success", children: "\u2705" }), _jsx("span", { children: optimization })] }, index))) })) : (_jsx("div", { className: "text-center py-4 text-cs-text-secondary", children: "No optimizations applied yet" })) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83C\uDFAF Device-Specific Transitions" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs(AdvancedTransitionCard, { duration: transitionState.deviceType === 'mobile' ? 200 : 300, easing: "ease-out", className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: "Mobile Optimized" }), _jsxs("div", { className: "text-sm text-cs-text-secondary", children: ["Duration: ", transitionState.deviceType === 'mobile' ? '200ms' : '300ms'] })] }), _jsxs(AdvancedTransitionCard, { duration: transitionState.deviceType === 'tablet' ? 250 : 300, easing: "ease-out", className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: "Tablet Optimized" }), _jsxs("div", { className: "text-sm text-cs-text-secondary", children: ["Duration: ", transitionState.deviceType === 'tablet' ? '250ms' : '300ms'] })] }), _jsxs(AdvancedTransitionCard, { duration: 300, easing: "ease-out", className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: "Desktop Optimized" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "Duration: 300ms" })] })] })] })] }));
+    const renderAccessibilityDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\u267F Accessibility Features" }), _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Reduced Motion" }), _jsx(Badge, { variant: transitionState.reducedMotion ? 'default' : 'secondary', children: transitionState.reducedMotion ? 'Supported' : 'Not Detected' })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Screen Reader" }), _jsx(Badge, { variant: "default", children: "Supported" })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "Focus Management" }), _jsx(Badge, { variant: "default", children: "Enabled" })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm font-medium", children: "ARIA Support" }), _jsx(Badge, { variant: "default", children: "Full" })] })] }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83C\uDFAD Motion Preferences" }), _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsx("div", { className: "space-y-3", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: transitionState.reducedMotion ? '🚫' : '✨' }), _jsx("div", { className: "font-medium", children: transitionState.reducedMotion ? 'Reduced Motion' : 'Full Motion' }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: transitionState.reducedMotion
+                                                    ? 'Transitions are disabled for accessibility'
+                                                    : 'All transitions are enabled' })] }) }) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "\uD83E\uDDEA Accessibility Test" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsx(AdvancedTransitionButton, { duration: transitionState.reducedMotion ? 0 : 300, easing: "ease-out", variant: "default", size: "default", "aria-label": "Test button with accessibility support", children: "Test Button" }), _jsx(AdvancedTransitionInput, { duration: transitionState.reducedMotion ? 0 : 200, easing: "ease-out", placeholder: "Test input accessibility", "aria-label": "Test input with accessibility support" })] }), _jsxs("div", { className: "text-sm text-cs-text-secondary", children: [_jsx("strong", { children: "Note:" }), " If you have reduced motion enabled in your system preferences, transitions will be automatically disabled for better accessibility."] })] })] }));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center space-y-2", children: [_jsx("h2", { className: "text-2xl font-bold text-cs-text-primary", children: "Advanced Transition System with Cubic Bezier Curves" }), _jsx("p", { className: "text-cs-text-secondary", children: "Professional animation system with performance optimization, device-specific behavior, and accessibility support" })] }), _jsx("div", { className: "flex flex-wrap gap-2 justify-center", children: ['transitions', 'performance', 'device', 'accessibility'].map((demo) => (_jsxs("button", { 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'}`, children: [demo === 'transitions' && '🎨 Transitions', demo === 'performance' && '📊 Performance', demo === 'device' && '📱 Device', demo === 'accessibility' && '♿ Accessibility'] }, demo))) }), _jsxs("div", { className: "min-h-[400px]", children: [activeDemo === 'transitions' && renderTransitionsDemo(), activeDemo === 'performance' && renderPerformanceDemo(), activeDemo === 'device' && renderDeviceDemo(), activeDemo === 'accessibility' && renderAccessibilityDemo()] }), _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-4 text-sm", children: [_jsxs("div", { className: "flex items-center space-x-4", children: [_jsx("span", { className: "font-medium", children: "Device:" }), _jsx(Badge, { variant: "outline", className: "capitalize", children: transitionState.deviceType }), _jsx("span", { className: "font-medium", children: "Battery:" }), _jsx(Badge, { variant: transitionState.batteryLevel === 'normal' ? 'default' :
+                                        transitionState.batteryLevel === 'low' ? 'secondary' : 'outline', className: "capitalize", children: transitionState.batteryLevel })] }), _jsxs("div", { className: "flex items-center space-x-4", children: [_jsx("span", { className: "font-medium", children: "Performance:" }), _jsxs("span", { className: `font-bold ${transitionState.performanceScore >= 80 ? 'text-cs-success' :
+                                        transitionState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'}`, children: [transitionState.performanceScore, "%"] }), _jsx("span", { className: "font-medium", children: "Motion:" }), _jsx(Badge, { variant: transitionState.reducedMotion ? 'outline' : 'default', children: transitionState.reducedMotion ? 'Reduced' : 'Full' })] })] }) })] }));
+};