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

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

@@ -8,39 +8,41 @@ import {
   AdvancedTransitionList
 } from './advanced-transition-system'
 
-export const AdvancedTransitionSystemDemo= () => {
+export const AdvancedTransitionSystemDemo: React.FC = () => {
   const [activeDemo, setActiveDemo] = useState<'transitions' | 'performance' | 'device' | 'accessibility'>('transitions')
   const [formData, setFormData] = useState({
-    name,
-    email,
-    message})
+    name: '',
+    email: '',
+    message: ''
+  })
 
   const { transitionState, performanceMetrics, isOptimizing, optimizations } = useAdvancedTransitionSystem({
-    duration,
-    easing,
-    performance,
-    deviceOptimization,
-    accessibility,
-    batteryAware}, {
-    onTransitionStart) => {
-      console.log('Transition started, config)
+    duration: 300,
+    easing: 'ease-out',
+    performance: true,
+    deviceOptimization: true,
+    accessibility: true,
+    batteryAware: true
+  }, {
+    onTransitionStart: (config) => {
+      console.log('Transition started:', config)
     },
-    onTransitionComplete) => {
-      console.log('Transition completed in, duration, 'ms')
+    onTransitionComplete: (duration) => {
+      console.log('Transition completed in:', duration, 'ms')
     },
-    onPerformanceOptimized) => {
-      console.log('Performance optimized, metrics)
+    onPerformanceOptimized: (metrics) => {
+      console.log('Performance optimized:', metrics)
     },
-    onDeviceOptimized) => {
-      console.log('Device optimized for, deviceType)
+    onDeviceOptimized: (deviceType) => {
+      console.log('Device optimized for:', deviceType)
     },
-    onAccessibilityEnhanced) => {
-      console.log('Accessibility enhanced, feature)
+    onAccessibilityEnhanced: (feature) => {
+      console.log('Accessibility enhanced:', feature)
     }
   })
 
-  const handleInputChange = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]}))
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
   }
 
   const renderTransitionsDemo = () => (
@@ -49,7 +51,8 @@ export const AdvancedTransitionSystemDemo= () => {
       <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="space-y-4">
+        <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">
@@ -121,7 +124,8 @@ export const AdvancedTransitionSystemDemo= () => {
       <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="space-y-4">
+        <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">
@@ -193,7 +197,8 @@ export const AdvancedTransitionSystemDemo= () => {
       <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="space-y-4">
+        <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">
@@ -277,7 +282,8 @@ export const AdvancedTransitionSystemDemo= () => {
   const renderPerformanceDemo = () => (
     <div className="space-y-6">
       {/* Performance Metrics */}
-      <div className="grid grid-cols-1 md="space-y-4">
+      <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">
@@ -285,7 +291,9 @@ export const AdvancedTransitionSystemDemo= () => {
               <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' = 45 ? 'text-cs-warning' }`}>
+                  performanceMetrics.frameRate >= 55 ? 'text-cs-success' :
+                  performanceMetrics.frameRate >= 45 ? 'text-cs-warning' : 'text-cs-error'
+                }`}>
                   {performanceMetrics.frameRate} FPS
                 </span>
               </div>
@@ -293,8 +301,10 @@ export const AdvancedTransitionSystemDemo= () => {
               <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' = 45 ? 'bg-cs-warning' }`}
-                  style={{ width) * 100}%` }}
+                    performanceMetrics.frameRate >= 55 ? 'bg-cs-success' :
+                    performanceMetrics.frameRate >= 45 ? 'bg-cs-warning' : 'bg-cs-error'
+                  }`}
+                  style={{ width: `${(performanceMetrics.frameRate / 60) * 100}%` }}
                 />
               </div>
               
@@ -306,7 +316,9 @@ export const AdvancedTransitionSystemDemo= () => {
               <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' = 60 ? 'text-cs-warning' }`}>
+                  performanceMetrics.smoothness >= 80 ? 'text-cs-success' :
+                  performanceMetrics.smoothness >= 60 ? 'text-cs-warning' : 'text-cs-error'
+                }`}>
                   {performanceMetrics.smoothness}%
                 </span>
               </div>
@@ -314,7 +326,9 @@ export const AdvancedTransitionSystemDemo= () => {
               <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' = 60 ? 'text-cs-warning' }`}>
+                  performanceMetrics.batteryImpact >= 80 ? 'text-cs-success' :
+                  performanceMetrics.batteryImpact >= 60 ? 'text-cs-warning' : 'text-cs-error'
+                }`}>
                   {performanceMetrics.batteryImpact}%
                 </span>
               </div>
@@ -328,20 +342,25 @@ export const AdvancedTransitionSystemDemo= () => {
           <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' = 60 ? 'text-cs-warning' }`}>
+                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' = 60 ? 'bg-cs-warning' }`}
-                  style={{ width}%` }}
+                    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' = 60 ? 'Good Performance' }
+                {transitionState.performanceScore >= 80 ? 'Excellent Performance' :
+                 transitionState.performanceScore >= 60 ? 'Good Performance' : 'Needs Optimization'}
               </div>
             </div>
           </div>
@@ -352,7 +371,8 @@ export const AdvancedTransitionSystemDemo= () => {
       <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="p-4 bg-cs-surface-bg rounded-lg border border-cs-border text-center">
+        <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>
@@ -377,7 +397,8 @@ export const AdvancedTransitionSystemDemo= () => {
   const renderDeviceDemo = () => (
     <div className="space-y-6">
       {/* Device Detection */}
-      <div className="grid grid-cols-1 md="space-y-4">
+      <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">
@@ -393,7 +414,9 @@ export const AdvancedTransitionSystemDemo= () => {
                 <span className="text-sm font-medium">Battery Level</span>
                 <Badge 
                   variant={
-                    transitionState.batteryLevel === 'normal' ? 'default' === 'low' ? 'secondary' }
+                    transitionState.batteryLevel === 'normal' ? 'default' :
+                    transitionState.batteryLevel === 'low' ? 'secondary' : 'outline'
+                  }
                   className="capitalize"
                 >
                   {transitionState.batteryLevel}
@@ -402,8 +425,8 @@ export const AdvancedTransitionSystemDemo= () => {
               
               <div className="flex justify-between items-center">
                 <span className="text-sm font-medium">Reduced Motion</span>
-                <Badge variant={transitionState.reducedMotion ? 'outline' }>
-                  {transitionState.reducedMotion ? 'Enabled' }
+                <Badge variant={transitionState.reducedMotion ? 'outline' : 'default'}>
+                  {transitionState.reducedMotion ? 'Enabled' : 'Disabled'}
                 </Badge>
               </div>
             </div>
@@ -419,7 +442,8 @@ export const AdvancedTransitionSystemDemo= () => {
                 <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>
-            ) ="space-y-2">
+            ) : 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>
@@ -427,7 +451,8 @@ export const AdvancedTransitionSystemDemo= () => {
                   </div>
                 ))}
               </div>
-            ) ="text-center py-4 text-cs-text-secondary">
+            ) : (
+              <div className="text-center py-4 text-cs-text-secondary">
                 No optimizations applied yet
               </div>
             )}
@@ -439,24 +464,26 @@ export const AdvancedTransitionSystemDemo= () => {
       <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={transitionState.deviceType === 'mobile' ? 200 }
+        <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=== 'mobile' ? '200ms' }
+              Duration: {transitionState.deviceType === 'mobile' ? '200ms' : '300ms'}
             </div>
           </AdvancedTransitionCard>
           
           <AdvancedTransitionCard
-            duration={transitionState.deviceType === 'tablet' ? 250 }
+            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=== 'tablet' ? '250ms' }
+              Duration: {transitionState.deviceType === 'tablet' ? '250ms' : '300ms'}
             </div>
           </AdvancedTransitionCard>
           
@@ -467,20 +494,27 @@ export const AdvancedTransitionSystemDemo= () => {
           >
             <div className="text-lg font-semibold">Desktop Optimized</div>
             <div className="text-sm text-cs-text-secondary">
-              Duration)
+              Duration: 300ms
+            </div>
+          </AdvancedTransitionCard>
+        </div>
+      </div>
+    </div>
+  )
 
   const renderAccessibilityDemo = () => (
     <div className="space-y-6">
       {/* Accessibility Features */}
-      <div className="grid grid-cols-1 md="space-y-4">
+      <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' }>
-                  {transitionState.reducedMotion ? 'Supported' }
+                <Badge variant={transitionState.reducedMotion ? 'default' : 'secondary'}>
+                  {transitionState.reducedMotion ? 'Supported' : 'Not Detected'}
                 </Badge>
               </div>
               
@@ -509,15 +543,15 @@ export const AdvancedTransitionSystemDemo= () => {
             <div className="space-y-3">
               <div className="text-center">
                 <div className="text-2xl mb-2">
-                  {transitionState.reducedMotion ? '🚫' }
+                  {transitionState.reducedMotion ? '🚫' : '✨'}
                 </div>
                 <div className="font-medium">
-                  {transitionState.reducedMotion ? 'Reduced Motion' }
+                  {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>
@@ -529,7 +563,9 @@ export const AdvancedTransitionSystemDemo= () => {
       <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={transitionState.reducedMotion ? 0 }
+        <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"
@@ -539,7 +575,7 @@ export const AdvancedTransitionSystemDemo= () => {
           </AdvancedTransitionButton>
           
           <AdvancedTransitionInput
-            duration={transitionState.reducedMotion ? 0 }
+            duration={transitionState.reducedMotion ? 0 : 200}
             easing="ease-out"
             placeholder="Test input accessibility"
             aria-label="Test input with accessibility support"
@@ -547,7 +583,7 @@ export const AdvancedTransitionSystemDemo= () => {
         </div>
         
         <div className="text-sm text-cs-text-secondary">
-          <strong>Note, 
+          <strong>Note:</strong> If you have reduced motion enabled in your system preferences, 
           transitions will be automatically disabled for better accessibility.
         </div>
       </div>
@@ -575,7 +611,8 @@ export const AdvancedTransitionSystemDemo= () => {
             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'}
@@ -597,11 +634,16 @@ export const AdvancedTransitionSystemDemo= () => {
       <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="outline" className="capitalize">
+            <span className="font-medium">Device:</span>
+            <Badge variant="outline" className="capitalize">
               {transitionState.deviceType}
             </Badge>
-            <span className="font-medium">Battery={
-                transitionState.batteryLevel === 'normal' ? 'default' === 'low' ? 'secondary' }
+            <span className="font-medium">Battery:</span>
+            <Badge 
+              variant={
+                transitionState.batteryLevel === 'normal' ? 'default' :
+                transitionState.batteryLevel === 'low' ? 'secondary' : 'outline'
+              }
               className="capitalize"
             >
               {transitionState.batteryLevel}
@@ -609,12 +651,16 @@ export const AdvancedTransitionSystemDemo= () => {
           </div>
           
           <div className="flex items-center space-x-4">
-            <span className="font-medium">Performance={`font-bold ${
-              transitionState.performanceScore >= 80 ? 'text-cs-success' = 60 ? 'text-cs-warning' }`}>
+            <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={transitionState.reducedMotion ? 'outline' }>
-              {transitionState.reducedMotion ? 'Reduced' }
+            <span className="font-medium">Motion:</span>
+            <Badge variant={transitionState.reducedMotion ? 'outline' : 'default'}>
+              {transitionState.reducedMotion ? 'Reduced' : 'Full'}
             </Badge>
           </div>
         </div>