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

package/dist/components/ui/semantic-input-system-demo.esm.js

@@ -1,502 +1,88 @@
-import React, { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Button } from './button'
-import { Input } from './input'
-import { Label } from './label'
-import { Badge } from './badge'
-import { useSemanticInput } from '../../hooks/use-semantic-input'
-import { useMobileKeyboardOptimization } from '../../hooks/use-mobile-keyboard-optimization'
-import { useTouchFriendlyInput } from '../../hooks/use-touch-friendly-input'
-import { useInputPerformance } from '../../hooks/use-input-performance'
-import { useInputAccessibility } from '../../hooks/use-input-accessibility'
-
-export const SemanticInputSystemDemo: React.FC = () => {
-  const [activeDemo, setActiveDemo] = useState<'semantic' | 'mobile' | 'touch' | 'performance' | 'accessibility'>('semantic')
-  const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    phone: '',
-    creditCard: '',
-    amount: '',
-    search: ''
-  })
-
-  // Initialize hooks with proper interfaces
-  const { semanticState, detectInputType, optimizeKeyboard } = useSemanticInput(
-    { type: 'text', autocomplete: 'on', inputMode: 'text', keyboardType: 'default' },
-    {},
-    {
-      enableAutoDetection: true,
-      enableKeyboardOptimization: true,
-      enableAutocomplete: true
-    }
-  )
-
-  const { keyboardState, optimizations, autoOptimizeForInputType } = useMobileKeyboardOptimization({
-    enableKeyboardDetection: true,
-    enablePerformanceMonitoring: true,
-    enableBatteryOptimization: true
-  })
-
-  const { touchState, touchOptimizations, autoOptimizeTouch } = useTouchFriendlyInput({
-    enableTouchOptimization: true,
-    enablePerformanceMonitoring: true,
-    enableAccessibilitySupport: true
-  })
-
-  const { performanceMetrics, autoOptimize } = useInputPerformance({
-    enablePerformanceMonitoring: true,
-    enableMemoryManagement: true,
-    enableBatteryOptimization: true
-  })
-
-  const { accessibilityFeatures, enableARIASupport } = useInputAccessibility({
-    enableARIA: true,
-    enableKeyboardNavigation: true,
-    enableScreenReader: true,
-    enableFocusManagement: true
-  })
-
-  const handleInputChange = (field: string, value: string) => {
-    setFormData(prev => ({ ...prev, [field]: value }))
-    
-    // Detect semantic type and optimize
-    const detectedType = detectInputType(value, field)
-    if (detectedType && detectedType.type !== 'text') {
-      optimizeKeyboard(detectedType)
-      autoOptimizeForInputType(detectedType.type)
-    }
-  }
-
-  const handleDemoChange = (demo: typeof activeDemo) => {
-    setActiveDemo(demo)
-    
-    // Start relevant monitoring for the selected demo
-    switch (demo) {
-      case 'semantic':
-        break
-      case 'mobile':
-        // Mobile keyboard detection is already running
-        break
-      case 'touch':
-        autoOptimizeTouch()
-        break
-      case 'performance':
-        autoOptimize()
-        break
-      case 'accessibility':
-        // Call functions safely - simplified to avoid type issues
-        if (typeof enableARIASupport === 'function') {
-          enableARIASupport()
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Button } from './button';
+import { Input } from './input';
+import { Label } from './label';
+import { Badge } from './badge';
+import { useSemanticInput } from '../../hooks/use-semantic-input';
+import { useMobileKeyboardOptimization } from '../../hooks/use-mobile-keyboard-optimization';
+import { useTouchFriendlyInput } from '../../hooks/use-touch-friendly-input';
+import { useInputPerformance } from '../../hooks/use-input-performance';
+import { useInputAccessibility } from '../../hooks/use-input-accessibility';
+export const SemanticInputSystemDemo = () => {
+    const [activeDemo, setActiveDemo] = useState('semantic');
+    const [formData, setFormData] = useState({
+        name: '',
+        email: '',
+        phone: '',
+        creditCard: '',
+        amount: '',
+        search: ''
+    });
+    // Initialize hooks with proper interfaces
+    const { semanticState, detectInputType, optimizeKeyboard } = useSemanticInput({ type: 'text', autocomplete: 'on', inputMode: 'text', keyboardType: 'default' }, {}, {
+        enableAutoDetection: true,
+        enableKeyboardOptimization: true,
+        enableAutocomplete: true
+    });
+    const { keyboardState, optimizations, autoOptimizeForInputType } = useMobileKeyboardOptimization({
+        enableKeyboardDetection: true,
+        enablePerformanceMonitoring: true,
+        enableBatteryOptimization: true
+    });
+    const { touchState, touchOptimizations, autoOptimizeTouch } = useTouchFriendlyInput({
+        enableTouchOptimization: true,
+        enablePerformanceMonitoring: true,
+        enableAccessibilitySupport: true
+    });
+    const { performanceMetrics, autoOptimize } = useInputPerformance({
+        enablePerformanceMonitoring: true,
+        enableMemoryManagement: true,
+        enableBatteryOptimization: true
+    });
+    const { accessibilityFeatures, enableARIASupport } = useInputAccessibility({
+        enableARIA: true,
+        enableKeyboardNavigation: true,
+        enableScreenReader: true,
+        enableFocusManagement: true
+    });
+    const handleInputChange = (field, value) => {
+        setFormData(prev => ({ ...prev, [field]: value }));
+        // Detect semantic type and optimize
+        const detectedType = detectInputType(value, field);
+        if (detectedType && detectedType.type !== 'text') {
+            optimizeKeyboard(detectedType);
+            autoOptimizeForInputType(detectedType.type);
         }
-        break
-    }
-  }
-
-  const renderSemanticDemo = () => (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label htmlFor="name">Full Name</Label>
-          <Input
-            id="name"
-            value={formData.name}
-            onChange={(e) => handleInputChange('name', e.target.value)}
-            placeholder="Enter your full name"
-            className="semantic-input"
-          />
-          <div className="text-sm text-gray-600">
-            Detected Type: <Badge variant="secondary">{semanticState.detectedType?.type || 'text'}</Badge>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="email">Email Address</Label>
-          <Input
-            id="email"
-            type="email"
-            value={formData.email}
-            onChange={(e) => handleInputChange('email', e.target.value)}
-            placeholder="Enter your email"
-            className="semantic-input"
-          />
-          <div className="text-sm text-gray-600">
-            Keyboard: <Badge variant="secondary">{semanticState.keyboardOptimized ? 'Optimized' : 'Default'}</Badge>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="phone">Phone Number</Label>
-          <Input
-            id="phone"
-            value={formData.phone}
-            onChange={(e) => handleInputChange('phone', e.target.value)}
-            placeholder="Enter your phone number"
-            className="semantic-input"
-          />
-          <div className="text-sm text-gray-600">
-            Autocomplete: <Badge variant="secondary">{semanticState.autocompleteEnhanced ? 'Enhanced' : 'Default'}</Badge>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="creditCard">Credit Card</Label>
-          <Input
-            id="creditCard"
-            value={formData.creditCard}
-            onChange={(e) => handleInputChange('creditCard', e.target.value)}
-            placeholder="Enter credit card number"
-            className="semantic-input"
-          />
-          <div className="text-sm text-gray-600">
-            Touch: <Badge variant="secondary">{semanticState.touchOptimized ? 'Optimized' : 'Default'}</Badge>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="amount">Amount</Label>
-          <Input
-            id="amount"
-            value={formData.amount}
-            onChange={(e) => handleInputChange('amount', e.target.value)}
-            placeholder="Enter amount"
-            className="semantic-input"
-          />
-          <div className="text-sm text-gray-600">
-            Performance: <Badge variant="secondary">{semanticState.isOptimized ? 'Optimized' : 'Default'}</Badge>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label htmlFor="search">Search</Label>
-          <Input
-            id="search"
-            value={formData.search}
-            onChange={(e) => handleInputChange('search', e.target.value)}
-            placeholder="Search..."
-            className="semantic-input"
-          />
-          <div className="text-sm text-gray-600">
-            Type: <Badge variant="secondary">{semanticState.detectedType?.type || 'text'}</Badge>
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-gray-50 p-4 rounded-lg">
-        <h4 className="font-semibold mb-2">Semantic State</h4>
-        <pre className="text-xs text-gray-700 overflow-auto">
-          {JSON.stringify(semanticState, null, 2)}
-        </pre>
-      </div>
-    </div>
-  )
-
-  const renderMobileDemo = () => (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label>Keyboard State</Label>
-          <div className="space-y-2 text-sm">
-            <div>Visible: <Badge variant={keyboardState.isVisible ? 'default' : 'secondary'}>{keyboardState.isVisible ? 'Yes' : 'No'}</Badge></div>
-            <div>Height: {keyboardState.height}px</div>
-            <div>Type: <Badge variant="outline">{keyboardState.type}</Badge></div>
-            <div>Platform: <Badge variant="outline">{keyboardState.platform}</Badge></div>
-            <div>Orientation: <Badge variant="outline">{keyboardState.orientation}</Badge></div>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label>Keyboard Optimizations</Label>
-          <div className="space-y-2">
-            {optimizations.map((opt, index) => (
-              <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
-                <span className="text-sm">{opt.name}</span>
-                <Badge variant={opt.applied ? 'default' : 'secondary'}>
-                  {opt.applied ? 'Applied' : 'Pending'}
-                </Badge>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-blue-50 p-4 rounded-lg">
-        <h4 className="font-semibold mb-2 text-blue-800">Mobile Keyboard Features</h4>
-        <ul className="text-sm text-blue-700 space-y-1">
-          <li>• Automatic keyboard type detection</li>
-          <li>• Platform-specific optimizations</li>
-          <li>• Orientation-aware adjustments</li>
-          <li>• Performance monitoring integration</li>
-          <li>• Battery optimization support</li>
-        </ul>
-      </div>
-    </div>
-  )
-
-  const renderTouchDemo = () => (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label>Touch State</Label>
-          <div className="space-y-2 text-sm">
-            <div>Touching: <Badge variant={touchState.isTouching ? 'default' : 'secondary'}>{touchState.isTouching ? 'Yes' : 'No'}</Badge></div>
-            <div>Touch Count: {touchState.touchCount}</div>
-            <div>Duration: {touchState.touchDuration}ms</div>
-            <div>Velocity: {touchState.touchVelocity.toFixed(2)}px/ms</div>
-            <div>Gesture: <Badge variant="outline">{touchState.gestureType}</Badge></div>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label>Touch Optimizations</Label>
-          <div className="space-y-2">
-            {touchOptimizations.map((opt, index) => (
-              <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
-                <span className="text-sm">{opt.name}</span>
-                <Badge variant={opt.applied ? 'default' : 'secondary'}>
-                  {opt.applied ? 'Applied' : 'Pending'}
-                </Badge>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-green-50 p-4 rounded-lg">
-        <h4 className="font-semibold mb-2 text-green-800">Touch-Friendly Features</h4>
-        <ul className="text-sm text-green-700 space-y-1">
-          <li>• 44px minimum touch targets</li>
-          <li>• Multi-touch gesture support</li>
-          <li>• Touch feedback and animations</li>
-          <li>• Performance monitoring</li>
-          <li>• Accessibility compliance</li>
-        </ul>
-      </div>
-    </div>
-  )
-
-  const renderPerformanceDemo = () => (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label>Performance Metrics</Label>
-          <div className="space-y-2 text-sm">
-            <div>Frame Rate: {performanceMetrics.frameRate} FPS</div>
-            <div>Input Latency: {performanceMetrics.inputLatency.toFixed(2)}ms</div>
-            <div>Memory Usage: {performanceMetrics.memoryUsage}MB</div>
-            <div>Battery Level: {(performanceMetrics.batteryLevel * 100).toFixed(1)}%</div>
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label>Performance Status</Label>
-          <div className="space-y-2">
-            <div className="flex items-center justify-between">
-              <span className="text-sm">Frame Rate</span>
-              <Badge variant={performanceMetrics.frameRate >= 60 ? 'default' : 'destructive'}>
-                {performanceMetrics.frameRate >= 60 ? 'Optimal' : 'Low'}
-              </Badge>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm">Input Latency</span>
-              <Badge variant={performanceMetrics.inputLatency < 16 ? 'default' : 'destructive'}>
-                {performanceMetrics.inputLatency < 16 ? 'Optimal' : 'High'}
-              </Badge>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-sm">Memory</span>
-              <Badge variant={performanceMetrics.memoryUsage < 100 ? 'default' : 'destructive'}>
-                {performanceMetrics.memoryUsage < 100 ? 'Optimal' : 'High'}
-              </Badge>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-purple-50 p-4 rounded-lg">
-        <h4 className="font-semibold mb-2 text-purple-800">Performance Features</h4>
-        <ul className="text-sm text-purple-700 space-y-1">
-          <li>• Real-time performance monitoring</li>
-          <li>• Memory usage optimization</li>
-          <li>• Battery-conscious operations</li>
-          <li>• Frame rate optimization</li>
-          <li>• Input latency tracking</li>
-        </ul>
-      </div>
-    </div>
-  )
-
-  const renderAccessibilityDemo = () => (
-    <div className="space-y-6">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div className="space-y-2">
-          <Label>Accessibility Features</Label>
-          <div className="space-y-2">
-            {accessibilityFeatures.map((feature, index) => (
-              <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
-                <span className="text-sm">{feature.name}</span>
-                <Badge variant={feature.enabled ? 'default' : 'secondary'}>
-                  {feature.enabled ? 'Enabled' : 'Disabled'}
-                </Badge>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="space-y-2">
-          <Label>Accessibility Score</Label>
-          <div className="text-center p-4 bg-blue-50 rounded-lg">
-            <div className="text-3xl font-bold text-blue-600">
-              {accessibilityFeatures.filter(f => f.enabled).length}/{accessibilityFeatures.length}
-            </div>
-            <div className="text-sm text-blue-700">Features Enabled</div>
-          </div>
-        </div>
-      </div>
-
-      <div className="bg-orange-50 p-4 rounded-lg">
-        <h4 className="font-semibold mb-2 text-orange-800">Accessibility Features</h4>
-        <ul className="text-sm text-orange-700 space-y-1">
-          <li>• ARIA labels and descriptions</li>
-          <li>• Keyboard navigation support</li>
-          <li>• Screen reader optimization</li>
-          <li>• Focus management</li>
-          <li>• High contrast support</li>
-        </ul>
-      </div>
-    </div>
-  )
-
-  return (
-    <div className="max-w-6xl mx-auto p-6 space-y-6">
-      <div className="text-center space-y-4">
-        <h1 className="text-4xl font-bold text-gray-900">
-          🎯 Story 12: Semantic Input System & Mobile Keyboard Optimization
-        </h1>
-        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
-          Advanced input system with semantic type detection, mobile keyboard optimization, 
-          touch-friendly behavior, performance monitoring, and accessibility support.
-        </p>
-        <div className="flex flex-wrap justify-center gap-2">
-          <Badge variant="default">Semantic Types</Badge>
-          <Badge variant="secondary">Mobile Keyboard</Badge>
-          <Badge variant="outline">Touch Optimization</Badge>
-          <Badge variant="destructive">Performance</Badge>
-          <Badge variant="default">Accessibility</Badge>
-        </div>
-      </div>
-
-      <div className="flex flex-wrap gap-2 justify-center">
-        <Button
-          variant={activeDemo === 'semantic' ? 'default' : 'outline'}
-          onClick={() => handleDemoChange('semantic')}
-        >
-          🧠 Semantic Input
-        </Button>
-        <Button
-          variant={activeDemo === 'mobile' ? 'default' : 'outline'}
-          onClick={() => handleDemoChange('mobile')}
-        >
-          📱 Mobile Keyboard
-        </Button>
-        <Button
-          variant={activeDemo === 'touch' ? 'default' : 'outline'}
-          onClick={() => handleDemoChange('touch')}
-        >
-          👆 Touch Friendly
-        </Button>
-        <Button
-          variant={activeDemo === 'performance' ? 'default' : 'outline'}
-          onClick={() => handleDemoChange('performance')}
-        >
-          ⚡ Performance
-        </Button>
-        <Button
-          variant={activeDemo === 'accessibility' ? 'default' : 'outline'}
-          onClick={() => handleDemoChange('accessibility')}
-        >
-          ♿ Accessibility
-        </Button>
-      </div>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="flex items-center gap-2">
-            {activeDemo === 'semantic' && '🧠 Semantic Input System'}
-            {activeDemo === 'mobile' && '📱 Mobile Keyboard Optimization'}
-            {activeDemo === 'touch' && '👆 Touch-Friendly Interface'}
-            {activeDemo === 'performance' && '⚡ Performance Monitoring'}
-            {activeDemo === 'accessibility' && '♿ Accessibility Features'}
-          </CardTitle>
-          <CardDescription>
-            {activeDemo === 'semantic' && 'Intelligent input type detection and mobile keyboard optimization'}
-            {activeDemo === 'mobile' && 'Platform-aware keyboard behavior and mobile-specific enhancements'}
-            {activeDemo === 'touch' && 'Touch-optimized interactions with 44px minimum targets'}
-            {activeDemo === 'performance' && 'Real-time performance monitoring and optimization'}
-            {activeDemo === 'accessibility' && 'Comprehensive accessibility support and compliance'}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          {activeDemo === 'semantic' && renderSemanticDemo()}
-          {activeDemo === 'mobile' && renderMobileDemo()}
-          {activeDemo === 'touch' && renderTouchDemo()}
-          {activeDemo === 'performance' && renderPerformanceDemo()}
-          {activeDemo === 'accessibility' && renderAccessibilityDemo()}
-        </CardContent>
-      </Card>
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">🎯 Next Steps</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ul className="text-sm space-y-2">
-              <li>✅ Story 12: Semantic Input System [COMPLETE]</li>
-              <li>🔧 Story 13: Touch-Friendly Interface</li>
-              <li>🎨 Story 14: Advanced Transitions</li>
-              <li>📱 Story 15: Mobile Experience Polish</li>
-            </ul>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">🚀 Features</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ul className="text-sm space-y-2">
-              <li>• Semantic input type detection</li>
-              <li>• Mobile keyboard optimization</li>
-              <li>• Touch-friendly behavior</li>
-              <li>• Performance monitoring</li>
-              <li>• Accessibility compliance</li>
-            </ul>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">📊 Status</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-2">
-              <div className="flex justify-between">
-                <span className="text-sm">Components:</span>
-                <Badge variant="default">6/6</Badge>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-sm">Hooks:</span>
-                <Badge variant="default">6/6</Badge>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-sm">Tests:</span>
-                <Badge variant="default">Passing</Badge>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  )
-}
+    };
+    const handleDemoChange = (demo) => {
+        setActiveDemo(demo);
+        // Start relevant monitoring for the selected demo
+        switch (demo) {
+            case 'semantic':
+                break;
+            case 'mobile':
+                // Mobile keyboard detection is already running
+                break;
+            case 'touch':
+                autoOptimizeTouch();
+                break;
+            case 'performance':
+                autoOptimize();
+                break;
+            case 'accessibility':
+                // Call functions safely - simplified to avoid type issues
+                if (typeof enableARIASupport === 'function') {
+                    enableARIASupport();
+                }
+                break;
+        }
+    };
+    const renderSemanticDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "name", children: "Full Name" }), _jsx(Input, { id: "name", value: formData.name, onChange: (e) => handleInputChange('name', e.target.value), placeholder: "Enter your full name", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Detected Type: ", _jsx(Badge, { variant: "secondary", children: semanticState.detectedType?.type || 'text' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "email", children: "Email Address" }), _jsx(Input, { id: "email", type: "email", value: formData.email, onChange: (e) => handleInputChange('email', e.target.value), placeholder: "Enter your email", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Keyboard: ", _jsx(Badge, { variant: "secondary", children: semanticState.keyboardOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "phone", children: "Phone Number" }), _jsx(Input, { id: "phone", value: formData.phone, onChange: (e) => handleInputChange('phone', e.target.value), placeholder: "Enter your phone number", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Autocomplete: ", _jsx(Badge, { variant: "secondary", children: semanticState.autocompleteEnhanced ? 'Enhanced' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "creditCard", children: "Credit Card" }), _jsx(Input, { id: "creditCard", value: formData.creditCard, onChange: (e) => handleInputChange('creditCard', e.target.value), placeholder: "Enter credit card number", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Touch: ", _jsx(Badge, { variant: "secondary", children: semanticState.touchOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "amount", children: "Amount" }), _jsx(Input, { id: "amount", value: formData.amount, onChange: (e) => handleInputChange('amount', e.target.value), placeholder: "Enter amount", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Performance: ", _jsx(Badge, { variant: "secondary", children: semanticState.isOptimized ? 'Optimized' : 'Default' })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "search", children: "Search" }), _jsx(Input, { id: "search", value: formData.search, onChange: (e) => handleInputChange('search', e.target.value), placeholder: "Search...", className: "semantic-input" }), _jsxs("div", { className: "text-sm text-gray-600", children: ["Type: ", _jsx(Badge, { variant: "secondary", children: semanticState.detectedType?.type || 'text' })] })] })] }), _jsxs("div", { className: "bg-gray-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2", children: "Semantic State" }), _jsx("pre", { className: "text-xs text-gray-700 overflow-auto", children: JSON.stringify(semanticState, null, 2) })] })] }));
+    const renderMobileDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Keyboard State" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Visible: ", _jsx(Badge, { variant: keyboardState.isVisible ? 'default' : 'secondary', children: keyboardState.isVisible ? 'Yes' : 'No' })] }), _jsxs("div", { children: ["Height: ", keyboardState.height, "px"] }), _jsxs("div", { children: ["Type: ", _jsx(Badge, { variant: "outline", children: keyboardState.type })] }), _jsxs("div", { children: ["Platform: ", _jsx(Badge, { variant: "outline", children: keyboardState.platform })] }), _jsxs("div", { children: ["Orientation: ", _jsx(Badge, { variant: "outline", children: keyboardState.orientation })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Keyboard Optimizations" }), _jsx("div", { className: "space-y-2", children: optimizations.map((opt, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: opt.name }), _jsx(Badge, { variant: opt.applied ? 'default' : 'secondary', children: opt.applied ? 'Applied' : 'Pending' })] }, index))) })] })] }), _jsxs("div", { className: "bg-blue-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-blue-800", children: "Mobile Keyboard Features" }), _jsxs("ul", { className: "text-sm text-blue-700 space-y-1", children: [_jsx("li", { children: "\u2022 Automatic keyboard type detection" }), _jsx("li", { children: "\u2022 Platform-specific optimizations" }), _jsx("li", { children: "\u2022 Orientation-aware adjustments" }), _jsx("li", { children: "\u2022 Performance monitoring integration" }), _jsx("li", { children: "\u2022 Battery optimization support" })] })] })] }));
+    const renderTouchDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Touch State" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Touching: ", _jsx(Badge, { variant: touchState.isTouching ? 'default' : 'secondary', children: touchState.isTouching ? 'Yes' : 'No' })] }), _jsxs("div", { children: ["Touch Count: ", touchState.touchCount] }), _jsxs("div", { children: ["Duration: ", touchState.touchDuration, "ms"] }), _jsxs("div", { children: ["Velocity: ", touchState.touchVelocity.toFixed(2), "px/ms"] }), _jsxs("div", { children: ["Gesture: ", _jsx(Badge, { variant: "outline", children: touchState.gestureType })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Touch Optimizations" }), _jsx("div", { className: "space-y-2", children: touchOptimizations.map((opt, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: opt.name }), _jsx(Badge, { variant: opt.applied ? 'default' : 'secondary', children: opt.applied ? 'Applied' : 'Pending' })] }, index))) })] })] }), _jsxs("div", { className: "bg-green-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-green-800", children: "Touch-Friendly Features" }), _jsxs("ul", { className: "text-sm text-green-700 space-y-1", children: [_jsx("li", { children: "\u2022 44px minimum touch targets" }), _jsx("li", { children: "\u2022 Multi-touch gesture support" }), _jsx("li", { children: "\u2022 Touch feedback and animations" }), _jsx("li", { children: "\u2022 Performance monitoring" }), _jsx("li", { children: "\u2022 Accessibility compliance" })] })] })] }));
+    const renderPerformanceDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Performance Metrics" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Frame Rate: ", performanceMetrics.frameRate, " FPS"] }), _jsxs("div", { children: ["Input Latency: ", performanceMetrics.inputLatency.toFixed(2), "ms"] }), _jsxs("div", { children: ["Memory Usage: ", performanceMetrics.memoryUsage, "MB"] }), _jsxs("div", { children: ["Battery Level: ", (performanceMetrics.batteryLevel * 100).toFixed(1), "%"] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Performance Status" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Frame Rate" }), _jsx(Badge, { variant: performanceMetrics.frameRate >= 60 ? 'default' : 'destructive', children: performanceMetrics.frameRate >= 60 ? 'Optimal' : 'Low' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Input Latency" }), _jsx(Badge, { variant: performanceMetrics.inputLatency < 16 ? 'default' : 'destructive', children: performanceMetrics.inputLatency < 16 ? 'Optimal' : 'High' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Memory" }), _jsx(Badge, { variant: performanceMetrics.memoryUsage < 100 ? 'default' : 'destructive', children: performanceMetrics.memoryUsage < 100 ? 'Optimal' : 'High' })] })] })] })] }), _jsxs("div", { className: "bg-purple-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-purple-800", children: "Performance Features" }), _jsxs("ul", { className: "text-sm text-purple-700 space-y-1", children: [_jsx("li", { children: "\u2022 Real-time performance monitoring" }), _jsx("li", { children: "\u2022 Memory usage optimization" }), _jsx("li", { children: "\u2022 Battery-conscious operations" }), _jsx("li", { children: "\u2022 Frame rate optimization" }), _jsx("li", { children: "\u2022 Input latency tracking" })] })] })] }));
+    const renderAccessibilityDemo = () => (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Accessibility Features" }), _jsx("div", { className: "space-y-2", children: accessibilityFeatures.map((feature, index) => (_jsxs("div", { className: "flex items-center justify-between p-2 bg-gray-50 rounded", children: [_jsx("span", { className: "text-sm", children: feature.name }), _jsx(Badge, { variant: feature.enabled ? 'default' : 'secondary', children: feature.enabled ? 'Enabled' : 'Disabled' })] }, index))) })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { children: "Accessibility Score" }), _jsxs("div", { className: "text-center p-4 bg-blue-50 rounded-lg", children: [_jsxs("div", { className: "text-3xl font-bold text-blue-600", children: [accessibilityFeatures.filter(f => f.enabled).length, "/", accessibilityFeatures.length] }), _jsx("div", { className: "text-sm text-blue-700", children: "Features Enabled" })] })] })] }), _jsxs("div", { className: "bg-orange-50 p-4 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-2 text-orange-800", children: "Accessibility Features" }), _jsxs("ul", { className: "text-sm text-orange-700 space-y-1", children: [_jsx("li", { children: "\u2022 ARIA labels and descriptions" }), _jsx("li", { children: "\u2022 Keyboard navigation support" }), _jsx("li", { children: "\u2022 Screen reader optimization" }), _jsx("li", { children: "\u2022 Focus management" }), _jsx("li", { children: "\u2022 High contrast support" })] })] })] }));
+    return (_jsxs("div", { className: "max-w-6xl mx-auto p-6 space-y-6", children: [_jsxs("div", { className: "text-center space-y-4", children: [_jsx("h1", { className: "text-4xl font-bold text-gray-900", children: "\uD83C\uDFAF Story 12: Semantic Input System & Mobile Keyboard Optimization" }), _jsx("p", { className: "text-xl text-gray-600 max-w-3xl mx-auto", children: "Advanced input system with semantic type detection, mobile keyboard optimization, touch-friendly behavior, performance monitoring, and accessibility support." }), _jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Semantic Types" }), _jsx(Badge, { variant: "secondary", children: "Mobile Keyboard" }), _jsx(Badge, { variant: "outline", children: "Touch Optimization" }), _jsx(Badge, { variant: "destructive", children: "Performance" }), _jsx(Badge, { variant: "default", children: "Accessibility" })] })] }), _jsxs("div", { className: "flex flex-wrap gap-2 justify-center", children: [_jsx(Button, { variant: activeDemo === 'semantic' ? 'default' : 'outline', onClick: () => handleDemoChange('semantic'), children: "\uD83E\uDDE0 Semantic Input" }), _jsx(Button, { variant: activeDemo === 'mobile' ? 'default' : 'outline', onClick: () => handleDemoChange('mobile'), children: "\uD83D\uDCF1 Mobile Keyboard" }), _jsx(Button, { variant: activeDemo === 'touch' ? 'default' : 'outline', onClick: () => handleDemoChange('touch'), children: "\uD83D\uDC46 Touch Friendly" }), _jsx(Button, { variant: activeDemo === 'performance' ? 'default' : 'outline', onClick: () => handleDemoChange('performance'), children: "\u26A1 Performance" }), _jsx(Button, { variant: activeDemo === 'accessibility' ? 'default' : 'outline', onClick: () => handleDemoChange('accessibility'), children: "\u267F Accessibility" })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [activeDemo === 'semantic' && '🧠 Semantic Input System', activeDemo === 'mobile' && '📱 Mobile Keyboard Optimization', activeDemo === 'touch' && '👆 Touch-Friendly Interface', activeDemo === 'performance' && '⚡ Performance Monitoring', activeDemo === 'accessibility' && '♿ Accessibility Features'] }), _jsxs(CardDescription, { children: [activeDemo === 'semantic' && 'Intelligent input type detection and mobile keyboard optimization', activeDemo === 'mobile' && 'Platform-aware keyboard behavior and mobile-specific enhancements', activeDemo === 'touch' && 'Touch-optimized interactions with 44px minimum targets', activeDemo === 'performance' && 'Real-time performance monitoring and optimization', activeDemo === 'accessibility' && 'Comprehensive accessibility support and compliance'] })] }), _jsxs(CardContent, { children: [activeDemo === 'semantic' && renderSemanticDemo(), activeDemo === 'mobile' && renderMobileDemo(), activeDemo === 'touch' && renderTouchDemo(), activeDemo === 'performance' && renderPerformanceDemo(), activeDemo === 'accessibility' && renderAccessibilityDemo()] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83C\uDFAF Next Steps" }) }), _jsx(CardContent, { children: _jsxs("ul", { className: "text-sm space-y-2", children: [_jsx("li", { children: "\u2705 Story 12: Semantic Input System [COMPLETE]" }), _jsx("li", { children: "\uD83D\uDD27 Story 13: Touch-Friendly Interface" }), _jsx("li", { children: "\uD83C\uDFA8 Story 14: Advanced Transitions" }), _jsx("li", { children: "\uD83D\uDCF1 Story 15: Mobile Experience Polish" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83D\uDE80 Features" }) }), _jsx(CardContent, { children: _jsxs("ul", { className: "text-sm space-y-2", children: [_jsx("li", { children: "\u2022 Semantic input type detection" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization" }), _jsx("li", { children: "\u2022 Touch-friendly behavior" }), _jsx("li", { children: "\u2022 Performance monitoring" }), _jsx("li", { children: "\u2022 Accessibility compliance" })] }) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-lg", children: "\uD83D\uDCCA Status" }) }), _jsx(CardContent, { children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Components:" }), _jsx(Badge, { variant: "default", children: "6/6" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Hooks:" }), _jsx(Badge, { variant: "default", children: "6/6" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Tests:" }), _jsx(Badge, { variant: "default", children: "Passing" })] })] }) })] })] })] }));
+};