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

package/dist/components/ui/touch-friendly-interface-demo.esm.js

@@ -5,42 +5,45 @@ import { Button } from './button'
 import { Card, CardContent } from './card'
 import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface'
 
-export const TouchFriendlyInterfaceDemo= () => {
+export const TouchFriendlyInterfaceDemo: React.FC = () => {
   const [activeDemo, setActiveDemo] = useState<'targets' | 'interactions' | 'performance' | 'accessibility'>('targets')
   const [formData, setFormData] = useState({
-    name,
-    email,
-    message})
+    name: '',
+    email: '',
+    message: ''
+  })
   const [toggleState, setToggleState] = useState(false)
   const [sliderValue, setSliderValue] = useState(50)
 
   const { touchTargetState, touchInteractionState, isOptimizing, optimizations } = useTouchFriendlyInterface({
-    minSize,
-    spacing,
-    feedback,
-    performance,
-    accessibility}, {
-    onTouchTargetOptimized) => {
-      console.log('Touch target optimized, config)
+    minSize: 44,
+    spacing: 'default',
+    feedback: 'scale',
+    performance: true,
+    accessibility: true
+  }, {
+    onTouchTargetOptimized: (config) => {
+      console.log('Touch target optimized:', config)
     },
-    onTouchInteractionDetected) => {
-      console.log('Touch interaction detected, interaction)
+    onTouchInteractionDetected: (interaction) => {
+      console.log('Touch interaction detected:', interaction)
     },
-    onPerformanceOptimized) => {
-      console.log('Performance optimized, score)
+    onPerformanceOptimized: (score) => {
+      console.log('Performance optimized:', score)
     },
-    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 renderTargetComplianceDemo = () => (
     <div className="space-y-6">
-      <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">44px Target Compliance</h3>
           
           <div className="space-y-3">
@@ -52,10 +55,12 @@ export const TouchFriendlyInterfaceDemo= () => {
               Default Button (48px)
             </Button>
             
-            <Button size="lg" variant="outline" className="touch-target touch-interaction touch-performance min-h-[56px] min-w-[56px] bg-transparent border border-cs-border text-cs-text-primary hover)
+            <Button size="lg" variant="outline" className="touch-target touch-interaction touch-performance min-h-[56px] min-w-[56px] bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg">
+              Large Button (56px)
             </Button>
             
-            <Button size="lg" variant="ghost" className="touch-target touch-interaction touch-performance min-h-[64px] min-w-[64px] bg-transparent text-cs-text-primary hover)
+            <Button size="lg" variant="ghost" className="touch-target touch-interaction touch-performance min-h-[64px] min-w-[64px] bg-transparent text-cs-text-primary hover:bg-cs-hover-bg">
+              Extra Large Button (64px)
             </Button>
           </div>
         </div>
@@ -88,7 +93,8 @@ export const TouchFriendlyInterfaceDemo= () => {
         </div>
       </div>
 
-      <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">Interactive Cards</h3>
           
           <div className="space-y-3">
@@ -125,14 +131,15 @@ export const TouchFriendlyInterfaceDemo= () => {
                 role="switch"
                 aria-checked={toggleState}
                 onClick={() => setToggleState(!toggleState)}
-                className="touch-target touch-interaction touch-performance touch-feedback relative inline-flex items-center justify-center rounded-full transition-colors min-h-[48px] min-w-[48px] focus={{
-                  backgroundColor)' )'
+                className="touch-target touch-interaction touch-performance touch-feedback relative inline-flex items-center justify-center rounded-full transition-colors min-h-[48px] min-w-[48px] focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2"
+                style={{
+                  backgroundColor: toggleState ? 'var(--cs-primary)' : 'var(--cs-border)'
                 }}
               >
                 <span
                   className="inline-block rounded-full bg-white shadow transform transition-transform w-6 h-6"
                   style={{
-                    transform)' )'
+                    transform: toggleState ? 'translateX(24px)' : 'translateX(0)'
                   }}
                 />
               </button>
@@ -140,7 +147,7 @@ export const TouchFriendlyInterfaceDemo= () => {
             </div>
             
             <div className="space-y-2">
-              <label className="text-sm font-medium">Slider Value}</label>
+              <label className="text-sm font-medium">Slider Value: {sliderValue}</label>
               <input
                 type="range"
                 value={sliderValue}
@@ -148,7 +155,7 @@ export const TouchFriendlyInterfaceDemo= () => {
                 min={0}
                 max={100}
                 step={1}
-                className="touch-target touch-interaction touch-performance touch-feedback w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer focus]"
+                className="touch-target touch-interaction touch-performance touch-feedback w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-cs-primary min-h-[48px]"
               />
             </div>
           </div>
@@ -159,25 +166,30 @@ export const TouchFriendlyInterfaceDemo= () => {
 
   const renderTouchInteractionsDemo = () => (
     <div className="space-y-6">
-      <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">Touch State</h3>
           
           <div className="space-y-3">
             <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
               <div className="grid grid-cols-2 gap-4 text-sm">
                 <div>
-                  <span className="font-medium">Touching={`ml-2 ${touchInteractionState.isTouching ? 'text-cs-success' }`}>
-                    {touchInteractionState.isTouching ? 'Yes' }
+                  <span className="font-medium">Touching:</span>
+                  <span className={`ml-2 ${touchInteractionState.isTouching ? 'text-cs-success' : 'text-cs-text-secondary'}`}>
+                    {touchInteractionState.isTouching ? 'Yes' : 'No'}
                   </span>
                 </div>
                 <div>
-                  <span className="font-medium">Touch Count="ml-2 text-cs-text-primary">{touchInteractionState.touchCount}</span>
+                  <span className="font-medium">Touch Count:</span>
+                  <span className="ml-2 text-cs-text-primary">{touchInteractionState.touchCount}</span>
                 </div>
                 <div>
-                  <span className="font-medium">Duration="ml-2 text-cs-text-primary">{touchInteractionState.touchDuration.toFixed(0)}ms</span>
+                  <span className="font-medium">Duration:</span>
+                  <span className="ml-2 text-cs-text-primary">{touchInteractionState.touchDuration.toFixed(0)}ms</span>
                 </div>
                 <div>
-                  <span className="font-medium">Velocity="ml-2 text-cs-text-primary">{touchInteractionState.touchVelocity.toFixed(2)}px/ms</span>
+                  <span className="font-medium">Velocity:</span>
+                  <span className="ml-2 text-cs-text-primary">{touchInteractionState.touchVelocity.toFixed(2)}px/ms</span>
                 </div>
               </div>
             </div>
@@ -191,13 +203,21 @@ export const TouchFriendlyInterfaceDemo= () => {
             <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
               <div className="text-center">
                 <div className="text-2xl font-bold text-cs-primary mb-2">
-                  {touchInteractionState.gestureType === 'none' ? '👆' === 'tap' ? '👆' === 'double-tap' ? '👆👆' === 'long-press' ? '⏰' === 'swipe' ? '👈👉' }
+                  {touchInteractionState.gestureType === 'none' ? '👆' : 
+                   touchInteractionState.gestureType === 'tap' ? '👆' :
+                   touchInteractionState.gestureType === 'double-tap' ? '👆👆' :
+                   touchInteractionState.gestureType === 'long-press' ? '⏰' :
+                   touchInteractionState.gestureType === 'swipe' ? '👈👉' : '🤏'}
                 </div>
                 <div className="text-lg font-semibold capitalize">
                   {touchInteractionState.gestureType.replace('-', ' ')}
                 </div>
                 <div className="text-sm text-cs-text-secondary">
-                  {touchInteractionState.gestureType === 'none' ? 'Touch to detect gesture' === 'tap' ? 'Quick touch detected' === 'double-tap' ? 'Double touch detected' === 'long-press' ? 'Long press detected' === 'swipe' ? 'Swipe gesture detected' }
+                  {touchInteractionState.gestureType === 'none' ? 'Touch to detect gesture' :
+                   touchInteractionState.gestureType === 'tap' ? 'Quick touch detected' :
+                   touchInteractionState.gestureType === 'double-tap' ? 'Double touch detected' :
+                   touchInteractionState.gestureType === 'long-press' ? 'Long press detected' :
+                   touchInteractionState.gestureType === 'swipe' ? 'Swipe gesture detected' : 'Pinch detected'}
                 </div>
               </div>
             </div>
@@ -208,19 +228,20 @@ export const TouchFriendlyInterfaceDemo= () => {
       <div className="space-y-4">
         <h3 className="text-lg font-semibold text-cs-text-primary">Touch Coordinates</h3>
         
-        <div className="grid grid-cols-1 md="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
             <h4 className="font-medium mb-2">Start Position</h4>
             <div className="text-sm space-y-1">
-              <div>X}px</div>
-              <div>Y}px</div>
+              <div>X: {touchInteractionState.touchStartX}px</div>
+              <div>Y: {touchInteractionState.touchStartY}px</div>
             </div>
           </div>
           
           <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
             <h4 className="font-medium mb-2">Current Position</h4>
             <div className="text-sm space-y-1">
-              <div>X}px</div>
-              <div>Y}px</div>
+              <div>X: {touchInteractionState.touchCurrentX}px</div>
+              <div>Y: {touchInteractionState.touchCurrentY}px</div>
             </div>
           </div>
         </div>
@@ -230,7 +251,8 @@ export const TouchFriendlyInterfaceDemo= () => {
 
   const renderPerformanceDemo = () => (
     <div className="space-y-6">
-      <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="space-y-3">
@@ -239,7 +261,9 @@ export const TouchFriendlyInterfaceDemo= () => {
                 <div className="flex justify-between items-center">
                   <span className="text-sm font-medium">Performance Score</span>
                   <span className={`text-lg font-bold ${
-                    touchTargetState.performanceScore >= 80 ? 'text-cs-success' = 60 ? 'text-cs-warning' }`}>
+                    touchTargetState.performanceScore >= 80 ? 'text-cs-success' :
+                    touchTargetState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
+                  }`}>
                     {touchTargetState.performanceScore}/100
                   </span>
                 </div>
@@ -247,13 +271,16 @@ export const TouchFriendlyInterfaceDemo= () => {
                 <div className="w-full bg-cs-border rounded-full h-2">
                   <div 
                     className={`h-2 rounded-full transition-all duration-300 ${
-                      touchTargetState.performanceScore >= 80 ? 'bg-cs-success' = 60 ? 'bg-cs-warning' }`}
-                    style={{ width}%` }}
+                      touchTargetState.performanceScore >= 80 ? 'bg-cs-success' :
+                      touchTargetState.performanceScore >= 60 ? 'bg-cs-warning' : 'bg-cs-error'
+                    }`}
+                    style={{ width: `${touchTargetState.performanceScore}%` }}
                   />
                 </div>
                 
                 <div className="text-xs text-cs-text-secondary">
-                  {touchTargetState.performanceScore >= 80 ? 'Excellent performance' = 60 ? 'Good performance' }
+                  {touchTargetState.performanceScore >= 80 ? 'Excellent performance' :
+                   touchTargetState.performanceScore >= 60 ? 'Good performance' : 'Needs optimization'}
                 </div>
               </div>
             </div>
@@ -273,8 +300,8 @@ export const TouchFriendlyInterfaceDemo= () => {
                 
                 <div className="flex justify-between items-center">
                   <span className="text-sm">Compliance</span>
-                  <span className={`font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' }`}>
-                    {touchTargetState.size >= 44 ? '✅ Compliant' }
+                  <span className={`font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' : 'text-cs-error'}`}>
+                    {touchTargetState.size >= 44 ? '✅ Compliant' : '❌ Non-compliant'}
                   </span>
                 </div>
                 
@@ -302,7 +329,8 @@ export const TouchFriendlyInterfaceDemo= () => {
               <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 touch targets...</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>
@@ -310,7 +338,8 @@ export const TouchFriendlyInterfaceDemo= () => {
                 </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>
           )}
@@ -321,7 +350,8 @@ export const TouchFriendlyInterfaceDemo= () => {
 
   const renderAccessibilityDemo = () => (
     <div className="space-y-6">
-      <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="space-y-3">
@@ -329,8 +359,8 @@ export const TouchFriendlyInterfaceDemo= () => {
               <div className="space-y-2">
                 <div className="flex justify-between items-center">
                   <span className="text-sm">ARIA Support</span>
-                  <span className={`font-medium ${touchTargetState.isAccessible ? 'text-cs-success' }`}>
-                    {touchTargetState.isAccessible ? '✅ Enabled' }
+                  <span className={`font-medium ${touchTargetState.isAccessible ? 'text-cs-success' : 'text-cs-warning'}`}>
+                    {touchTargetState.isAccessible ? '✅ Enabled' : '⚠️ Disabled'}
                   </span>
                 </div>
                 
@@ -361,8 +391,8 @@ export const TouchFriendlyInterfaceDemo= () => {
               <div className="space-y-2">
                 <div className="flex justify-between items-center">
                   <span className="text-sm">44px Minimum</span>
-                  <span className={`font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' }`}>
-                    {touchTargetState.size >= 44 ? '✅ Met' }
+                  <span className={`font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' : 'text-cs-error'}`}>
+                    {touchTargetState.size >= 44 ? '✅ Met' : '❌ Not Met'}
                   </span>
                 </div>
                 
@@ -389,7 +419,9 @@ export const TouchFriendlyInterfaceDemo= () => {
       <div className="space-y-4">
         <h3 className="text-lg font-semibold text-cs-text-primary">Interactive Test</h3>
         
-        <div className="grid grid-cols-1 md="default"
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <Button
+            size="default"
             className="touch-target touch-friendly-button touch-interaction touch-performance touch-feedback min-h-[48px] min-w-[48px]"
             aria-label="Test button with scale feedback"
           >
@@ -408,7 +440,8 @@ export const TouchFriendlyInterfaceDemo= () => {
           <Button
             size="default"
             variant="outline"
-            className="touch-target touch-interaction touch-performance touch-state-hover touch-state-active min-h-[48px] min-w-[48px] bg-transparent border border-cs-border text-cs-text-primary hover="Test button with color feedback"
+            className="touch-target touch-interaction touch-performance touch-state-hover touch-state-active min-h-[48px] min-w-[48px] bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg"
+            aria-label="Test button with color feedback"
           >
             Color Feedback
           </Button>
@@ -438,7 +471,8 @@ export const TouchFriendlyInterfaceDemo= () => {
             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 === 'targets' && '🎯 Target Compliance'}
             {demo === 'interactions' && '👆 Touch Interactions'}
@@ -460,17 +494,21 @@ export const TouchFriendlyInterfaceDemo= () => {
       <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">Status={touchTargetState.isOptimized ? 'default' }>
-              {touchTargetState.isOptimized ? 'Optimized' }
+            <span className="font-medium">Status:</span>
+            <Badge variant={touchTargetState.isOptimized ? 'default' : 'secondary'}>
+              {touchTargetState.isOptimized ? 'Optimized' : 'Optimizing...'}
             </Badge>
-            <Badge variant={touchTargetState.isAccessible ? 'default' }>
-              {touchTargetState.isAccessible ? 'Accessible' }
+            <Badge variant={touchTargetState.isAccessible ? 'default' : 'secondary'}>
+              {touchTargetState.isAccessible ? 'Accessible' : 'Enhancing...'}
             </Badge>
           </div>
           
           <div className="flex items-center space-x-4">
-            <span className="font-medium">Performance={`font-bold ${
-              touchTargetState.performanceScore >= 80 ? 'text-cs-success' = 60 ? 'text-cs-warning' }`}>
+            <span className="font-medium">Performance:</span>
+            <span className={`font-bold ${
+              touchTargetState.performanceScore >= 80 ? 'text-cs-success' :
+              touchTargetState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
+            }`}>
               {touchTargetState.performanceScore}%
             </span>
           </div>