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

package/dist/components/ui/semantic-input-system-demo.d.ts

@@ -1,490 +1,3 @@
-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()
-        }
-        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>
-  )
-}
+import React from 'react';
+export declare const SemanticInputSystemDemo: React.FC;
+//# sourceMappingURL=semantic-input-system-demo.d.ts.map

package/dist/components/ui/semantic-input-system-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"semantic-input-system-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/semantic-input-system-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAYvC,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAye3C,CAAA"}