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

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

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

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

@@ -4,34 +4,40 @@ import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interf
 
 // Touch-Friendly Button Component
 export interface TouchFriendlyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?}
+  variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive'
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  children: React.ReactNode
+}
 
 export const TouchFriendlyButton = forwardRef<HTMLButtonElement, TouchFriendlyButtonProps>(
   ({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
+      minSize: 44,
       feedback
     })
 
     const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance'
     const feedbackClasses = {
-      scale,
-      ripple,
-      color,
-      none}
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-active',
+      none: ''
+    }
 
     const variantClasses = {
-      default,
-      secondary,
-      outline,
-      ghost,
-      destructive}
+      default: 'touch-friendly-button',
+      secondary: 'touch-friendly-button-secondary',
+      outline: 'touch-target touch-spacing bg-transparent border border-cs-border text-cs-text-primary hover:bg-cs-hover-bg',
+      ghost: 'touch-target touch-spacing bg-transparent text-cs-text-primary hover:bg-cs-hover-bg',
+      destructive: 'touch-target touch-spacing bg-cs-error text-white hover:bg-cs-error-hover'
+    }
 
     const sizeClasses = {
-      sm] min-w-[44px] px-3 py-2 text-sm',
-      default] min-w-[48px] px-4 py-3 text-base',
-      lg] min-w-[56px] px-6 py-4 text-lg',
-      xl] min-w-[64px] px-8 py-5 text-xl'
+      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg',
+      xl: 'min-h-[64px] min-w-[64px] px-8 py-5 text-xl'
     }
 
     return (
@@ -45,8 +51,8 @@ export const TouchFriendlyButton = forwardRef<HTMLButtonElement, TouchFriendlyBu
           className
         )}
         style={{
-          minHeight)}px`,
-          minWidth)}px`
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
         }}
         {...props}
       >
@@ -65,26 +71,29 @@ TouchFriendlyButton.displayName = 'TouchFriendlyButton'
 
 // Touch-Friendly Input Component
 export interface TouchFriendlyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  touchSize?}
+  touchSize?: 'sm' | 'default' | 'lg'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+}
 
 export const TouchFriendlyInput = forwardRef<HTMLInputElement, TouchFriendlyInputProps>(
   ({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
     const { getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
+      minSize: 44,
       feedback
     })
 
     const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance'
     const feedbackClasses = {
-      scale,
-      ripple,
-      color,
-      none}
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-focus',
+      none: ''
+    }
 
     const sizeClasses = {
-      sm] min-w-[44px] px-3 py-2 text-sm',
-      default] min-w-[48px] px-4 py-3 text-base',
-      lg] min-w-[56px] px-6 py-4 text-lg'
+      sm: 'min-h-[44px] min-w-[44px] px-3 py-2 text-sm',
+      default: 'min-h-[48px] min-w-[48px] px-4 py-3 text-base',
+      lg: 'min-h-[56px] min-w-[56px] px-6 py-4 text-lg'
     }
 
     return (
@@ -97,8 +106,8 @@ export const TouchFriendlyInput = forwardRef<HTMLInputElement, TouchFriendlyInpu
           className
         )}
         style={{
-          minHeight)}px`,
-          minWidth)}px`
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
         }}
         {...props}
       />
@@ -110,29 +119,37 @@ TouchFriendlyInput.displayName = 'TouchFriendlyInput'
 
 // Touch-Friendly Card Component
 export interface TouchFriendlyCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  size?}
+  size?: 'sm' | 'default' | 'lg'
+  feedback?: 'scale' | 'ripple' | 'color' | 'none'
+  interactive?: boolean
+}
 
 export const TouchFriendlyCard = forwardRef<HTMLDivElement, TouchFriendlyCardProps>(
   ({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
+      minSize: 44,
       feedback
     })
 
     const baseClasses = 'touch-friendly-card touch-interaction touch-performance'
     const feedbackClasses = interactive ? {
-      scale,
-      ripple,
-      color,
-      none} , ripple, color, none}
+      scale: 'touch-feedback',
+      ripple: 'touch-ripple',
+      color: 'touch-state-hover touch-state-active',
+      none: ''
+    } : { scale: '', ripple: '', color: '', none: '' }
 
     const sizeClasses = {
-      sm] min-w-[44px] p-3',
-      default] min-w-[48px] p-4',
-      lg] min-w-[56px] p-6'
+      sm: 'min-h-[44px] min-w-[44px] p-3',
+      default: 'min-h-[48px] min-w-[48px] p-4',
+      lg: 'min-h-[56px] min-w-[56px] p-6'
     }
 
-    const interactiveClasses = interactive ? 'cursor-pointer' ={ref}
+    const interactiveClasses = interactive ? 'cursor-pointer' : ''
+
+    return (
+      <div
+        ref={ref}
         className={cn(
           baseClasses,
           feedbackClasses[feedback],
@@ -141,8 +158,8 @@ export const TouchFriendlyCard = forwardRef<HTMLDivElement, TouchFriendlyCardPro
           className
         )}
         style={{
-          minHeight)}px`,
-          minWidth)}px`
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
         }}
         {...props}
       >
@@ -161,20 +178,23 @@ TouchFriendlyCard.displayName = 'TouchFriendlyCard'
 
 // Touch-Friendly Toggle Component
 export interface TouchFriendlyToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  checked?) => void
-  size?}
+  checked?: boolean
+  onCheckedChange?: (checked: boolean) => void
+  size?: 'sm' | 'default' | 'lg'
+}
 
 export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyToggleProps>(
   ({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
-      feedback})
+      minSize: 44,
+      feedback: 'scale'
+    })
 
     const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
     const sizeClasses = {
-      sm] min-w-[44px]',
-      default] min-w-[48px]',
-      lg] min-w-[56px]'
+      sm: 'min-h-[44px] min-w-[44px]',
+      default: 'min-h-[48px] min-w-[48px]',
+      lg: 'min-h-[56px] min-w-[56px]'
     }
 
     const handleClick = () => {
@@ -191,13 +211,13 @@ export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyTo
           baseClasses,
           sizeClasses[size],
           'relative inline-flex items-center justify-center rounded-full transition-colors',
-          checked ? 'bg-cs-primary' ,
-          'focus,
+          checked ? 'bg-cs-primary' : 'bg-cs-border',
+          'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2',
           className
         )}
         style={{
-          minHeight)}px`,
-          minWidth)}px`
+          minHeight: `${getTouchTargetSize()}px`,
+          minWidth: `${getTouchTargetSize()}px`
         }}
         onClick={handleClick}
         {...props}
@@ -205,8 +225,9 @@ export const TouchFriendlyToggle = forwardRef<HTMLButtonElement, TouchFriendlyTo
         <span
           className={cn(
             'inline-block rounded-full bg-white shadow transform transition-transform',
-            size === 'sm' ? 'w-5 h-5' === 'default' ? 'w-6 h-6' ,
-            checked ? 'translate-x-full' )}
+            size === 'sm' ? 'w-5 h-5' : size === 'default' ? 'w-6 h-6' : 'w-7 h-7',
+            checked ? 'translate-x-full' : 'translate-x-0'
+          )}
         />
         {!isTouchTargetCompliant() && (
           <span className="text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2">
@@ -222,19 +243,22 @@ TouchFriendlyToggle.displayName = 'TouchFriendlyToggle'
 
 // Touch-Friendly Slider Component
 export interface TouchFriendlySliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  touchSize?}
+  touchSize?: 'sm' | 'default' | 'lg'
+  showValue?: boolean
+}
 
 export const TouchFriendlySlider = forwardRef<HTMLInputElement, TouchFriendlySliderProps>(
   ({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
     const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
-      minSize,
-      feedback})
+      minSize: 44,
+      feedback: 'scale'
+    })
 
     const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback'
     const sizeClasses = {
-      sm] min-w-[44px]',
-      default] min-w-[48px]',
-      lg] min-w-[56px]'
+      sm: 'min-h-[44px] min-w-[44px]',
+      default: 'min-h-[48px] min-w-[48px]',
+      lg: 'min-h-[56px] min-w-[56px]'
     }
 
     return (
@@ -246,11 +270,11 @@ export const TouchFriendlySlider = forwardRef<HTMLInputElement, TouchFriendlySli
             baseClasses,
             sizeClasses[touchSize],
             'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer',
-            'focus,
+            'focus:outline-none focus:ring-2 focus:ring-cs-primary',
             className
           )}
           style={{
-            minHeight)}px`
+            minHeight: `${getTouchTargetSize()}px`
           }}
           {...props}
         />