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

package/dist/components/ui/touch-friendly-interface-demo.d.ts

@@ -1,512 +1,3 @@
-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 React from 'react';
+export declare const TouchFriendlyInterfaceDemo: React.FC;
+//# sourceMappingURL=touch-friendly-interface-demo.d.ts.map

package/dist/components/ui/touch-friendly-interface-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-friendly-interface-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/touch-friendly-interface-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,EA+f9C,CAAA"}