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

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

@@ -1,519 +1,63 @@
-import React, { useState } from 'react'
-import { Badge } from './badge'
-import { Input } from './input'
-import { Button } from './button'
-import { Card, CardContent } from './card'
-import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface'
-
-export const TouchFriendlyInterfaceDemo: React.FC = () => {
-  const [activeDemo, setActiveDemo] = useState<'targets' | 'interactions' | 'performance' | 'accessibility'>('targets')
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    message: ''
-  })
-  const [toggleState, setToggleState] = useState(false)
-  const [sliderValue, setSliderValue] = useState(50)
-
-  const { touchTargetState, touchInteractionState, isOptimizing, optimizations } = useTouchFriendlyInterface({
-    minSize: 44,
-    spacing: 'default',
-    feedback: 'scale',
-    performance: true,
-    accessibility: true
-  }, {
-    onTouchTargetOptimized: (config) => {
-      console.log('Touch target optimized:', config)
-    },
-    onTouchInteractionDetected: (interaction) => {
-      console.log('Touch interaction detected:', interaction)
-    },
-    onPerformanceOptimized: (score) => {
-      console.log('Performance optimized:', score)
-    },
-    onAccessibilityEnhanced: (feature) => {
-      console.log('Accessibility enhanced:', feature)
-    }
-  })
-
-  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: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">
-            <Button size="sm" className="touch-target touch-friendly-button touch-interaction touch-performance min-h-[44px] min-w-[44px]">
-              Small Button (44px)
-            </Button>
-            
-            <Button size="default" variant="secondary" className="touch-target touch-friendly-button-secondary touch-interaction touch-performance min-h-[48px] min-w-[48px]">
-              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: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:bg-cs-hover-bg">
-              Extra Large Button (64px)
-            </Button>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">Touch-Friendly Inputs</h3>
-          
-          <div className="space-y-3">
-            <Input
-              placeholder="Small Input (44px)"
-              value={formData.name}
-              onChange={(e) => handleInputChange('name', e.target.value)}
-              className="touch-target touch-friendly-input touch-interaction touch-performance min-h-[44px] min-w-[44px] px-3 py-2 text-sm"
-            />
-            
-            <Input
-              placeholder="Default Input (48px)"
-              value={formData.email}
-              onChange={(e) => handleInputChange('email', e.target.value)}
-              className="touch-target touch-friendly-input touch-interaction touch-performance min-h-[48px] min-w-[48px] px-4 py-3 text-base"
-            />
-            
-            <Input
-              placeholder="Large Input (56px)"
-              value={formData.message}
-              onChange={(e) => handleInputChange('message', e.target.value)}
-              className="touch-target touch-friendly-input touch-interaction touch-performance min-h-[56px] min-w-[56px] px-6 py-4 text-lg"
-            />
-          </div>
-        </div>
-      </div>
-
-      <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">
-            <Card className="touch-target touch-friendly-card touch-interaction touch-performance touch-feedback min-h-[44px] min-w-[44px] p-3 cursor-pointer">
-              <CardContent className="text-center">
-                <div className="text-lg font-semibold">Small Card</div>
-                <div className="text-sm text-cs-text-secondary">44px target</div>
-              </CardContent>
-            </Card>
-            
-            <Card className="touch-target touch-friendly-card touch-interaction touch-performance touch-ripple min-h-[48px] min-w-[48px] p-4 cursor-pointer">
-              <CardContent className="text-center">
-                <div className="text-lg font-semibold">Default Card</div>
-                <div className="text-sm text-cs-text-secondary">48px target</div>
-              </CardContent>
-            </Card>
-            
-            <Card className="touch-target touch-friendly-card touch-interaction touch-performance touch-state-hover touch-state-active min-h-[56px] min-w-[56px] p-6 cursor-pointer">
-              <CardContent className="text-center">
-                <div className="text-lg font-semibold">Large Card</div>
-                <div className="text-sm text-cs-text-secondary">56px target</div>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">Form Controls</h3>
-          
-          <div className="space-y-4">
-            <div className="flex items-center space-x-3">
-              <button
-                type="button"
-                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: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: toggleState ? 'translateX(24px)' : 'translateX(0)'
-                  }}
-                />
-              </button>
-              <span className="text-sm">Toggle Switch</span>
-            </div>
-            
-            <div className="space-y-2">
-              <label className="text-sm font-medium">Slider Value: {sliderValue}</label>
-              <input
-                type="range"
-                value={sliderValue}
-                onChange={(e) => setSliderValue(Number(e.target.value))}
-                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:outline-none focus:ring-2 focus:ring-cs-primary min-h-[48px]"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-
-  const renderTouchInteractionsDemo = () => (
-    <div className="space-y-6">
-      <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:</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:</span>
-                  <span className="ml-2 text-cs-text-primary">{touchInteractionState.touchCount}</span>
-                </div>
-                <div>
-                  <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:</span>
-                  <span className="ml-2 text-cs-text-primary">{touchInteractionState.touchVelocity.toFixed(2)}px/ms</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">Gesture Detection</h3>
-          
-          <div className="space-y-3">
-            <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' ? '👆' : 
-                   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' :
-                   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>
-          </div>
-        </div>
-      </div>
-
-      <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: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: {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: {touchInteractionState.touchCurrentX}px</div>
-              <div>Y: {touchInteractionState.touchCurrentY}px</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-
-  const renderPerformanceDemo = () => (
-    <div className="space-y-6">
-      <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">
-            <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">Performance Score</span>
-                  <span className={`text-lg font-bold ${
-                    touchTargetState.performanceScore >= 80 ? 'text-cs-success' :
-                    touchTargetState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
-                  }`}>
-                    {touchTargetState.performanceScore}/100
-                  </span>
-                </div>
-                
-                <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' :
-                      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' :
-                   touchTargetState.performanceScore >= 60 ? 'Good performance' : 'Needs optimization'}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">Touch Target Status</h3>
-          
-          <div className="space-y-3">
-            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-              <div className="space-y-2">
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Target Size</span>
-                  <span className="font-medium">{touchTargetState.size}px</span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Compliance</span>
-                  <span className={`font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' : 'text-cs-error'}`}>
-                    {touchTargetState.size >= 44 ? '✅ Compliant' : '❌ Non-compliant'}
-                  </span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Spacing</span>
-                  <span className="font-medium capitalize">{touchTargetState.spacing}</span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Feedback</span>
-                  <span className="font-medium capitalize">{touchTargetState.feedback}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-cs-text-primary">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 touch targets...</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>
-  )
-
-  const renderAccessibilityDemo = () => (
-    <div className="space-y-6">
-      <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">
-            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-              <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' : 'text-cs-warning'}`}>
-                    {touchTargetState.isAccessible ? '✅ Enabled' : '⚠️ Disabled'}
-                  </span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Focus Management</span>
-                  <span className="font-medium text-cs-success">✅ Enabled</span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Screen Reader</span>
-                  <span className="font-medium text-cs-success">✅ Supported</span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Keyboard Nav</span>
-                  <span className="font-medium text-cs-success">✅ Supported</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="space-y-4">
-          <h3 className="text-lg font-semibold text-cs-text-primary">Touch Standards</h3>
-          
-          <div className="space-y-3">
-            <div className="p-4 bg-cs-surface-bg rounded-lg border border-cs-border">
-              <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' : 'text-cs-error'}`}>
-                    {touchTargetState.size >= 44 ? '✅ Met' : '❌ Not Met'}
-                  </span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Touch Action</span>
-                  <span className="font-medium text-cs-success">✅ Optimized</span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">Tap Highlight</span>
-                  <span className="font-medium text-cs-success">✅ Disabled</span>
-                </div>
-                
-                <div className="flex justify-between items-center">
-                  <span className="text-sm">User Select</span>
-                  <span className="font-medium text-cs-success">✅ Disabled</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <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: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"
-          >
-            Scale Feedback
-          </Button>
-          
-          <Button
-            size="default"
-            variant="secondary"
-            className="touch-target touch-friendly-button-secondary touch-interaction touch-performance touch-ripple min-h-[48px] min-w-[48px]"
-            aria-label="Test button with ripple feedback"
-          >
-            Ripple Feedback
-          </Button>
-          
-          <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:bg-cs-hover-bg"
-            aria-label="Test button with color feedback"
-          >
-            Color Feedback
-          </Button>
-        </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">
-          Touch-Friendly Interface & 44px Target Compliance
-        </h2>
-        <p className="text-cs-text-secondary">
-          Advanced touch interface system with accessibility compliance and performance optimization
-        </p>
-      </div>
-
-      {/* Navigation Tabs */}
-      <div className="flex flex-wrap gap-2 justify-center">
-        {(['targets', 'interactions', 'performance', '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 === 'targets' && '🎯 Target Compliance'}
-            {demo === 'interactions' && '👆 Touch Interactions'}
-            {demo === 'performance' && '⚡ Performance'}
-            {demo === 'accessibility' && '♿ Accessibility'}
-          </button>
-        ))}
-      </div>
-
-      {/* Demo Content */}
-      <div className="min-h-[400px]">
-        {activeDemo === 'targets' && renderTargetComplianceDemo()}
-        {activeDemo === 'interactions' && renderTouchInteractionsDemo()}
-        {activeDemo === 'performance' && renderPerformanceDemo()}
-        {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">Status:</span>
-            <Badge variant={touchTargetState.isOptimized ? 'default' : 'secondary'}>
-              {touchTargetState.isOptimized ? 'Optimized' : 'Optimizing...'}
-            </Badge>
-            <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:</span>
-            <span className={`font-bold ${
-              touchTargetState.performanceScore >= 80 ? 'text-cs-success' :
-              touchTargetState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'
-            }`}>
-              {touchTargetState.performanceScore}%
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Badge } from './badge';
+import { Input } from './input';
+import { Button } from './button';
+import { Card, CardContent } from './card';
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface';
+export const TouchFriendlyInterfaceDemo = () => {
+    const [activeDemo, setActiveDemo] = useState('targets');
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        message: ''
+    });
+    const [toggleState, setToggleState] = useState(false);
+    const [sliderValue, setSliderValue] = useState(50);
+    const { touchTargetState, touchInteractionState, isOptimizing, optimizations } = useTouchFriendlyInterface({
+        minSize: 44,
+        spacing: 'default',
+        feedback: 'scale',
+        performance: true,
+        accessibility: true
+    }, {
+        onTouchTargetOptimized: (config) => {
+            console.log('Touch target optimized:', config);
+        },
+        onTouchInteractionDetected: (interaction) => {
+            console.log('Touch interaction detected:', interaction);
+        },
+        onPerformanceOptimized: (score) => {
+            console.log('Performance optimized:', score);
+        },
+        onAccessibilityEnhanced: (feature) => {
+            console.log('Accessibility enhanced:', feature);
+        }
+    });
+    const handleInputChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+    };
+    const renderTargetComplianceDemo = () => (_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: "44px Target Compliance" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Button, { size: "sm", className: "touch-target touch-friendly-button touch-interaction touch-performance min-h-[44px] min-w-[44px]", children: "Small Button (44px)" }), _jsx(Button, { size: "default", variant: "secondary", className: "touch-target touch-friendly-button-secondary touch-interaction touch-performance min-h-[48px] min-w-[48px]", children: "Default Button (48px)" }), _jsx(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", children: "Large Button (56px)" }), _jsx(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", children: "Extra Large Button (64px)" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "Touch-Friendly Inputs" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Input, { placeholder: "Small Input (44px)", value: formData.name, onChange: (e) => handleInputChange('name', e.target.value), className: "touch-target touch-friendly-input touch-interaction touch-performance min-h-[44px] min-w-[44px] px-3 py-2 text-sm" }), _jsx(Input, { placeholder: "Default Input (48px)", value: formData.email, onChange: (e) => handleInputChange('email', e.target.value), className: "touch-target touch-friendly-input touch-interaction touch-performance min-h-[48px] min-w-[48px] px-4 py-3 text-base" }), _jsx(Input, { placeholder: "Large Input (56px)", value: formData.message, onChange: (e) => handleInputChange('message', e.target.value), className: "touch-target touch-friendly-input touch-interaction touch-performance min-h-[56px] min-w-[56px] px-6 py-4 text-lg" })] })] })] }), _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: "Interactive Cards" }), _jsxs("div", { className: "space-y-3", children: [_jsx(Card, { className: "touch-target touch-friendly-card touch-interaction touch-performance touch-feedback min-h-[44px] min-w-[44px] p-3 cursor-pointer", children: _jsxs(CardContent, { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: "Small Card" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "44px target" })] }) }), _jsx(Card, { className: "touch-target touch-friendly-card touch-interaction touch-performance touch-ripple min-h-[48px] min-w-[48px] p-4 cursor-pointer", children: _jsxs(CardContent, { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: "Default Card" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "48px target" })] }) }), _jsx(Card, { className: "touch-target touch-friendly-card touch-interaction touch-performance touch-state-hover touch-state-active min-h-[56px] min-w-[56px] p-6 cursor-pointer", children: _jsxs(CardContent, { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: "Large Card" }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: "56px target" })] }) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "Form Controls" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("button", { type: "button", 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:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2", style: {
+                                                    backgroundColor: toggleState ? 'var(--cs-primary)' : 'var(--cs-border)'
+                                                }, children: _jsx("span", { className: "inline-block rounded-full bg-white shadow transform transition-transform w-6 h-6", style: {
+                                                        transform: toggleState ? 'translateX(24px)' : 'translateX(0)'
+                                                    } }) }), _jsx("span", { className: "text-sm", children: "Toggle Switch" })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "text-sm font-medium", children: ["Slider Value: ", sliderValue] }), _jsx("input", { type: "range", value: sliderValue, onChange: (e) => setSliderValue(Number(e.target.value)), 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:outline-none focus:ring-2 focus:ring-cs-primary min-h-[48px]" })] })] })] })] })] }));
+    const renderTouchInteractionsDemo = () => (_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: "Touch State" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Touching:" }), _jsx("span", { className: `ml-2 ${touchInteractionState.isTouching ? 'text-cs-success' : 'text-cs-text-secondary'}`, children: touchInteractionState.isTouching ? 'Yes' : 'No' })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Touch Count:" }), _jsx("span", { className: "ml-2 text-cs-text-primary", children: touchInteractionState.touchCount })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Duration:" }), _jsxs("span", { className: "ml-2 text-cs-text-primary", children: [touchInteractionState.touchDuration.toFixed(0), "ms"] })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Velocity:" }), _jsxs("span", { className: "ml-2 text-cs-text-primary", children: [touchInteractionState.touchVelocity.toFixed(2), "px/ms"] })] })] }) }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "Gesture Detection" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl font-bold text-cs-primary mb-2", children: touchInteractionState.gestureType === 'none' ? '👆' :
+                                                    touchInteractionState.gestureType === 'tap' ? '👆' :
+                                                        touchInteractionState.gestureType === 'double-tap' ? '👆👆' :
+                                                            touchInteractionState.gestureType === 'long-press' ? '⏰' :
+                                                                touchInteractionState.gestureType === 'swipe' ? '👈👉' : '🤏' }), _jsx("div", { className: "text-lg font-semibold capitalize", children: touchInteractionState.gestureType.replace('-', ' ') }), _jsx("div", { className: "text-sm text-cs-text-secondary", children: 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' })] }) }) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "Touch Coordinates" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: [_jsx("h4", { className: "font-medium mb-2", children: "Start Position" }), _jsxs("div", { className: "text-sm space-y-1", children: [_jsxs("div", { children: ["X: ", touchInteractionState.touchStartX, "px"] }), _jsxs("div", { children: ["Y: ", touchInteractionState.touchStartY, "px"] })] })] }), _jsxs("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: [_jsx("h4", { className: "font-medium mb-2", children: "Current Position" }), _jsxs("div", { className: "text-sm space-y-1", children: [_jsxs("div", { children: ["X: ", touchInteractionState.touchCurrentX, "px"] }), _jsxs("div", { children: ["Y: ", touchInteractionState.touchCurrentY, "px"] })] })] })] })] })] }));
+    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: "Performance Metrics" }), _jsx("div", { className: "space-y-3", children: _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: "Performance Score" }), _jsxs("span", { className: `text-lg font-bold ${touchTargetState.performanceScore >= 80 ? 'text-cs-success' :
+                                                            touchTargetState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'}`, children: [touchTargetState.performanceScore, "/100"] })] }), _jsx("div", { className: "w-full bg-cs-border rounded-full h-2", children: _jsx("div", { className: `h-2 rounded-full transition-all duration-300 ${touchTargetState.performanceScore >= 80 ? 'bg-cs-success' :
+                                                        touchTargetState.performanceScore >= 60 ? 'bg-cs-warning' : 'bg-cs-error'}`, style: { width: `${touchTargetState.performanceScore}%` } }) }), _jsx("div", { className: "text-xs text-cs-text-secondary", children: touchTargetState.performanceScore >= 80 ? 'Excellent performance' :
+                                                    touchTargetState.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: "Touch Target Status" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Target Size" }), _jsxs("span", { className: "font-medium", children: [touchTargetState.size, "px"] })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Compliance" }), _jsx("span", { className: `font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' : 'text-cs-error'}`, children: touchTargetState.size >= 44 ? '✅ Compliant' : '❌ Non-compliant' })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Spacing" }), _jsx("span", { className: "font-medium capitalize", children: touchTargetState.spacing })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Feedback" }), _jsx("span", { className: "font-medium capitalize", children: touchTargetState.feedback })] })] }) }) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "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 touch targets..." })] })) : 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" })) })] })] }));
+    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: "Accessibility Features" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "ARIA Support" }), _jsx("span", { className: `font-medium ${touchTargetState.isAccessible ? 'text-cs-success' : 'text-cs-warning'}`, children: touchTargetState.isAccessible ? '✅ Enabled' : '⚠️ Disabled' })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Focus Management" }), _jsx("span", { className: "font-medium text-cs-success", children: "\u2705 Enabled" })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Screen Reader" }), _jsx("span", { className: "font-medium text-cs-success", children: "\u2705 Supported" })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Keyboard Nav" }), _jsx("span", { className: "font-medium text-cs-success", children: "\u2705 Supported" })] })] }) }) })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "Touch Standards" }), _jsx("div", { className: "space-y-3", children: _jsx("div", { className: "p-4 bg-cs-surface-bg rounded-lg border border-cs-border", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "44px Minimum" }), _jsx("span", { className: `font-medium ${touchTargetState.size >= 44 ? 'text-cs-success' : 'text-cs-error'}`, children: touchTargetState.size >= 44 ? '✅ Met' : '❌ Not Met' })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Touch Action" }), _jsx("span", { className: "font-medium text-cs-success", children: "\u2705 Optimized" })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "Tap Highlight" }), _jsx("span", { className: "font-medium text-cs-success", children: "\u2705 Disabled" })] }), _jsxs("div", { className: "flex justify-between items-center", children: [_jsx("span", { className: "text-sm", children: "User Select" }), _jsx("span", { className: "font-medium text-cs-success", children: "\u2705 Disabled" })] })] }) }) })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary", children: "Interactive Test" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(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", children: "Scale Feedback" }), _jsx(Button, { size: "default", variant: "secondary", className: "touch-target touch-friendly-button-secondary touch-interaction touch-performance touch-ripple min-h-[48px] min-w-[48px]", "aria-label": "Test button with ripple feedback", children: "Ripple Feedback" }), _jsx(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:bg-cs-hover-bg", "aria-label": "Test button with color feedback", children: "Color Feedback" })] })] })] }));
+    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: "Touch-Friendly Interface & 44px Target Compliance" }), _jsx("p", { className: "text-cs-text-secondary", children: "Advanced touch interface system with accessibility compliance and performance optimization" })] }), _jsx("div", { className: "flex flex-wrap gap-2 justify-center", children: ['targets', 'interactions', 'performance', '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 === 'targets' && '🎯 Target Compliance', demo === 'interactions' && '👆 Touch Interactions', demo === 'performance' && '⚡ Performance', demo === 'accessibility' && '♿ Accessibility'] }, demo))) }), _jsxs("div", { className: "min-h-[400px]", children: [activeDemo === 'targets' && renderTargetComplianceDemo(), activeDemo === 'interactions' && renderTouchInteractionsDemo(), activeDemo === 'performance' && renderPerformanceDemo(), 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: "Status:" }), _jsx(Badge, { variant: touchTargetState.isOptimized ? 'default' : 'secondary', children: touchTargetState.isOptimized ? 'Optimized' : 'Optimizing...' }), _jsx(Badge, { variant: touchTargetState.isAccessible ? 'default' : 'secondary', children: touchTargetState.isAccessible ? 'Accessible' : 'Enhancing...' })] }), _jsxs("div", { className: "flex items-center space-x-4", children: [_jsx("span", { className: "font-medium", children: "Performance:" }), _jsxs("span", { className: `font-bold ${touchTargetState.performanceScore >= 80 ? 'text-cs-success' :
+                                        touchTargetState.performanceScore >= 60 ? 'text-cs-warning' : 'text-cs-error'}`, children: [touchTargetState.performanceScore, "%"] })] })] }) })] }));
+};