@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

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

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

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

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export interface TouchFriendlyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+    size?: 'sm' | 'default' | 'lg' | 'xl';
+    feedback?: 'scale' | 'ripple' | 'color' | 'none';
+    children: React.ReactNode;
+}
+export declare const TouchFriendlyButton: React.ForwardRefExoticComponent<TouchFriendlyButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TouchFriendlyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    touchSize?: 'sm' | 'default' | 'lg';
+    feedback?: 'scale' | 'ripple' | 'color' | 'none';
+}
+export declare const TouchFriendlyInput: React.ForwardRefExoticComponent<TouchFriendlyInputProps & React.RefAttributes<HTMLInputElement>>;
+export interface TouchFriendlyCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: 'sm' | 'default' | 'lg';
+    feedback?: 'scale' | 'ripple' | 'color' | 'none';
+    interactive?: boolean;
+}
+export declare const TouchFriendlyCard: React.ForwardRefExoticComponent<TouchFriendlyCardProps & React.RefAttributes<HTMLDivElement>>;
+export interface TouchFriendlyToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: 'sm' | 'default' | 'lg';
+}
+export declare const TouchFriendlyToggle: React.ForwardRefExoticComponent<TouchFriendlyToggleProps & React.RefAttributes<HTMLButtonElement>>;
+export interface TouchFriendlySliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    touchSize?: 'sm' | 'default' | 'lg';
+    showValue?: boolean;
+}
+export declare const TouchFriendlySlider: React.ForwardRefExoticComponent<TouchFriendlySliderProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=touch-friendly-interface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"touch-friendly-interface.d.ts","sourceRoot":"","sources":["../../../src/components/ui/touch-friendly-interface.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAA;IACvE,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;IACrC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,eAAO,MAAM,mBAAmB,oGAuD/B,CAAA;AAKD,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACxG,SAAS,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;CACjD;AAED,eAAO,MAAM,kBAAkB,kGAsC9B,CAAA;AAKD,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAClF,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAA;IAChD,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,eAAO,MAAM,iBAAiB,+FAgD7B,CAAA;AAKD,MAAM,WAAW,wBAAyB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC7F,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;CAC/B;AAED,eAAO,MAAM,mBAAmB,oGAsD/B,CAAA;AAKD,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClH,SAAS,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,mBAAmB,mGA4C/B,CAAA"}

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

@@ -0,0 +1,119 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utils';
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface.js';
+export const TouchFriendlyButton = forwardRef(({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance';
+    const feedbackClasses = {
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-active',
+        none: ''
+    };
+    const variantClasses = {
+        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-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 (_jsxs("button", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], variantClasses[variant], sizeClasses[size], className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props, children: [children, !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning ml-2", children: "\u26A0\uFE0F Target too small" }))] }));
+});
+TouchFriendlyButton.displayName = 'TouchFriendlyButton';
+export const TouchFriendlyInput = forwardRef(({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
+    const { getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance';
+    const feedbackClasses = {
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-focus',
+        none: ''
+    };
+    const sizeClasses = {
+        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 (_jsx("input", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], sizeClasses[touchSize], className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props }));
+});
+TouchFriendlyInput.displayName = 'TouchFriendlyInput';
+export const TouchFriendlyCard = forwardRef(({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-friendly-card touch-interaction touch-performance';
+    const feedbackClasses = interactive ? {
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-active',
+        none: ''
+    } : { scale: '', ripple: '', color: '', none: '' };
+    const sizeClasses = {
+        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' : '';
+    return (_jsxs("div", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], sizeClasses[size], interactiveClasses, className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props, children: [children, interactive && !isTouchTargetCompliant() && (_jsx("div", { className: "text-xs text-cs-warning mt-2", children: "\u26A0\uFE0F Interactive target too small" }))] }));
+});
+TouchFriendlyCard.displayName = 'TouchFriendlyCard';
+export const TouchFriendlyToggle = forwardRef(({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback: 'scale'
+    });
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback';
+    const sizeClasses = {
+        sm: 'min-h-[44px] min-w-[44px]',
+        default: 'min-h-[48px] min-w-[48px]',
+        lg: 'min-h-[56px] min-w-[56px]'
+    };
+    const handleClick = () => {
+        onCheckedChange?.(!checked);
+    };
+    return (_jsxs("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, className: cn(baseClasses, sizeClasses[size], 'relative inline-flex items-center justify-center rounded-full transition-colors', checked ? 'bg-cs-primary' : 'bg-cs-border', 'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2', className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, onClick: handleClick, ...props, children: [_jsx("span", { className: cn('inline-block rounded-full bg-white shadow transform transition-transform', size === 'sm' ? 'w-5 h-5' : size === 'default' ? 'w-6 h-6' : 'w-7 h-7', checked ? 'translate-x-full' : 'translate-x-0') }), !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2", children: "\u26A0\uFE0F Target too small" }))] }));
+});
+TouchFriendlyToggle.displayName = 'TouchFriendlyToggle';
+export const TouchFriendlySlider = forwardRef(({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback: 'scale'
+    });
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback';
+    const sizeClasses = {
+        sm: 'min-h-[44px] min-w-[44px]',
+        default: 'min-h-[48px] min-w-[48px]',
+        lg: 'min-h-[56px] min-w-[56px]'
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx("input", { ref: ref, type: "range", className: cn(baseClasses, sizeClasses[touchSize], 'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer', 'focus:outline-none focus:ring-2 focus:ring-cs-primary', className), style: {
+                    minHeight: `${getTouchTargetSize()}px`
+                }, ...props }), showValue && (_jsx("span", { className: "text-sm text-cs-text-secondary", children: props.value || props.defaultValue || 0 })), !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning", children: "\u26A0\uFE0F Slider target too small" }))] }));
+});
+TouchFriendlySlider.displayName = 'TouchFriendlySlider';

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

@@ -0,0 +1,119 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../../lib/utils';
+import { useTouchFriendlyInterface } from '../../hooks/use-touch-friendly-interface.js';
+export const TouchFriendlyButton = forwardRef(({ className, variant = 'default', size = 'default', feedback = 'scale', children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-target touch-friendly-button touch-interaction touch-performance';
+    const feedbackClasses = {
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-active',
+        none: ''
+    };
+    const variantClasses = {
+        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-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 (_jsxs("button", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], variantClasses[variant], sizeClasses[size], className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props, children: [children, !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning ml-2", children: "\u26A0\uFE0F Target too small" }))] }));
+});
+TouchFriendlyButton.displayName = 'TouchFriendlyButton';
+export const TouchFriendlyInput = forwardRef(({ className, touchSize = 'default', feedback = 'scale', ...props }, ref) => {
+    const { getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-target touch-friendly-input touch-interaction touch-performance';
+    const feedbackClasses = {
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-focus',
+        none: ''
+    };
+    const sizeClasses = {
+        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 (_jsx("input", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], sizeClasses[touchSize], className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props }));
+});
+TouchFriendlyInput.displayName = 'TouchFriendlyInput';
+export const TouchFriendlyCard = forwardRef(({ className, size = 'default', feedback = 'scale', interactive = false, children, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback
+    });
+    const baseClasses = 'touch-friendly-card touch-interaction touch-performance';
+    const feedbackClasses = interactive ? {
+        scale: 'touch-feedback',
+        ripple: 'touch-ripple',
+        color: 'touch-state-hover touch-state-active',
+        none: ''
+    } : { scale: '', ripple: '', color: '', none: '' };
+    const sizeClasses = {
+        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' : '';
+    return (_jsxs("div", { ref: ref, className: cn(baseClasses, feedbackClasses[feedback], sizeClasses[size], interactiveClasses, className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, ...props, children: [children, interactive && !isTouchTargetCompliant() && (_jsx("div", { className: "text-xs text-cs-warning mt-2", children: "\u26A0\uFE0F Interactive target too small" }))] }));
+});
+TouchFriendlyCard.displayName = 'TouchFriendlyCard';
+export const TouchFriendlyToggle = forwardRef(({ className, checked = false, onCheckedChange, size = 'default', ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback: 'scale'
+    });
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback';
+    const sizeClasses = {
+        sm: 'min-h-[44px] min-w-[44px]',
+        default: 'min-h-[48px] min-w-[48px]',
+        lg: 'min-h-[56px] min-w-[56px]'
+    };
+    const handleClick = () => {
+        onCheckedChange?.(!checked);
+    };
+    return (_jsxs("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, className: cn(baseClasses, sizeClasses[size], 'relative inline-flex items-center justify-center rounded-full transition-colors', checked ? 'bg-cs-primary' : 'bg-cs-border', 'focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2', className), style: {
+            minHeight: `${getTouchTargetSize()}px`,
+            minWidth: `${getTouchTargetSize()}px`
+        }, onClick: handleClick, ...props, children: [_jsx("span", { className: cn('inline-block rounded-full bg-white shadow transform transition-transform', size === 'sm' ? 'w-5 h-5' : size === 'default' ? 'w-6 h-6' : 'w-7 h-7', checked ? 'translate-x-full' : 'translate-x-0') }), !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning absolute -bottom-6 left-1/2 transform -translate-x-1/2", children: "\u26A0\uFE0F Target too small" }))] }));
+});
+TouchFriendlyToggle.displayName = 'TouchFriendlyToggle';
+export const TouchFriendlySlider = forwardRef(({ className, touchSize = 'default', showValue = true, ...props }, ref) => {
+    const { isTouchTargetCompliant, getTouchTargetSize } = useTouchFriendlyInterface({
+        minSize: 44,
+        feedback: 'scale'
+    });
+    const baseClasses = 'touch-target touch-interaction touch-performance touch-feedback';
+    const sizeClasses = {
+        sm: 'min-h-[44px] min-w-[44px]',
+        default: 'min-h-[48px] min-w-[48px]',
+        lg: 'min-h-[56px] min-w-[56px]'
+    };
+    return (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx("input", { ref: ref, type: "range", className: cn(baseClasses, sizeClasses[touchSize], 'w-full h-2 bg-cs-border rounded-lg appearance-none cursor-pointer', 'focus:outline-none focus:ring-2 focus:ring-cs-primary', className), style: {
+                    minHeight: `${getTouchTargetSize()}px`
+                }, ...props }), showValue && (_jsx("span", { className: "text-sm text-cs-text-secondary", children: props.value || props.defaultValue || 0 })), !isTouchTargetCompliant() && (_jsx("span", { className: "text-xs text-cs-warning", children: "\u26A0\uFE0F Slider target too small" }))] }));
+});
+TouchFriendlySlider.displayName = 'TouchFriendlySlider';

package/dist/hooks/index.d.ts

@@ -0,0 +1,47 @@
+export { usePerformance } from './use-performance';
+export type { PerformanceMetrics, PerformanceThresholds, PerformanceCallbacks, PerformanceOptions } from './use-performance';
+export { useFrameRate } from './use-frame-rate';
+export type { FrameRateMetrics, FrameRateThresholds, FrameRateCallbacks, FrameRateOptions } from './use-frame-rate';
+export { useMemoryUsage } from './use-memory-usage';
+export type { MemoryMetrics, MemoryThresholds, MemoryCallbacks, MemoryOptions } from './use-memory-usage';
+export { useBatteryStatus } from './use-battery-status';
+export type { BatteryMetrics, BatteryThresholds, BatteryCallbacks, BatteryOptions } from './use-battery-status';
+export { usePerformanceThrottling } from './use-performance-throttling';
+export type { PerformanceThrottlingConfig, PerformanceThrottlingCallbacks } from './use-performance-throttling';
+export { useGestures, useSwipeGesture, usePinchGesture, useTapGesture, useLongPressGesture } from './use-gestures';
+export type { GestureConfig, SwipeGesture, PinchGesture, GestureCallbacks, GestureState } from './use-gestures';
+export { useTouchOptimization, useBasicTouchOptimization, useBatteryAwareTouchOptimization } from './use-touch-optimization';
+export type { TouchOptimizationConfig, TouchPerformanceMetrics, TouchOptimizationCallbacks, TouchOptimizationState } from './use-touch-optimization';
+export { useMobileTouch, useBasicMobileTouch, useEnhancedMobileTouch } from './use-mobile-touch';
+export type { MobileTouchConfig, TouchFeedbackState, GestureHint, MobileTouchCallbacks, MobileTouchState } from './use-mobile-touch';
+export { useAnimationProfile, useAnimationDuration, useAnimationEasing, useAnimationClasses, usePerformanceMode } from './use-animation-profile';
+export type { AnimationProfile, PerformanceMetrics as AnimationPerformanceMetrics } from './use-animation-profile';
+export { useDevice } from './use-device';
+export type { DeviceInfo } from './use-device';
+export { useBatteryAnimations } from './use-battery-animations';
+export type { BatteryAnimationConfig, BatteryAnimationState, BatteryAnimationCallbacks } from './use-battery-animations';
+export { useHardwareAcceleration } from './use-hardware-acceleration';
+export type { GPUInfo, HardwareAccelerationMetrics, HardwareAccelerationConfig, HardwareAccelerationCallbacks } from './use-hardware-acceleration';
+export { useBatteryOptimization } from './use-battery-optimization';
+export type { BatteryStatus, BatteryOptimizationConfig, BatteryOptimizationCallbacks } from './use-battery-optimization';
+export { useAdvancedPatterns } from './use-advanced-patterns';
+export type { AdvancedPatternsConfig, AdvancedPatternsCallbacks, CompoundComponentContext, RenderPropsConfig, HigherOrderComponentConfig } from './use-advanced-patterns';
+export { useComponentPerformance } from './use-component-performance';
+export type { ComponentPerformanceConfig, ComponentPerformanceCallbacks, PerformanceMetrics as ComponentPerformanceMetrics } from './use-component-performance';
+export { useMobileOptimization } from './use-mobile-optimization';
+export type { MobileOptimizationConfig, MobileOptimizationCallbacks, MobileOptimizationState } from './use-mobile-optimization';
+export { useReusableArchitecture } from './use-reusable-architecture';
+export type { ReusableArchitectureConfig, ReusableArchitectureCallbacks, ComponentTemplate, SharedPattern, SharedStyle, SharedBehavior } from './use-reusable-architecture';
+export { useAccessibilitySupport } from './use-accessibility-support';
+export type { AccessibilitySupportConfig, AccessibilitySupportCallbacks, AccessibilityState, AccessibilityFeatures } from './use-accessibility-support';
+export { default as useMobileSkeleton } from './use-mobile-skeleton';
+export type { MobileSkeletonConfig, SkeletonVariant, DeviceLoadingState, MobileSkeletonCallbacks } from './use-mobile-skeleton';
+export { default as useDeviceLoadingStates } from './use-device-loading-states';
+export type { DeviceLoadingStatesConfig, LoadingState, DeviceSpecificState, DeviceLoadingStatesCallbacks } from './use-device-loading-states';
+export { default as useLoadingPerformance } from './use-loading-performance';
+export type { LoadingPerformanceConfig, PerformanceMetrics as LoadingPerformanceMetrics, OptimizationStrategy as LoadingOptimizationStrategy, LoadingPerformanceCallbacks } from './use-loading-performance';
+export { default as useBatteryConsciousLoading } from './use-battery-conscious-loading';
+export type { BatteryConsciousLoadingConfig, BatteryState as BatteryLoadingState, LoadingOptimization, BatteryConsciousLoadingCallbacks } from './use-battery-conscious-loading';
+export { default as useLoadingAccessibility } from './use-loading-accessibility';
+export type { LoadingAccessibilityConfig, AccessibilityFeature, AccessibilityState as LoadingAccessibilityState, LoadingAccessibilityCallbacks } from './use-loading-accessibility';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"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"}

package/dist/hooks/index.esm.js

@@ -0,0 +1,32 @@
+// Performance monitoring hooks
+export { usePerformance } from './use-performance';
+export { useFrameRate } from './use-frame-rate';
+export { useMemoryUsage } from './use-memory-usage';
+export { useBatteryStatus } from './use-battery-status';
+export { usePerformanceThrottling } from './use-performance-throttling';
+// Touch optimization & gesture support hooks
+export { useGestures, useSwipeGesture, usePinchGesture, useTapGesture, useLongPressGesture } from './use-gestures';
+export { useTouchOptimization, useBasicTouchOptimization, useBatteryAwareTouchOptimization } from './use-touch-optimization';
+export { useMobileTouch, useBasicMobileTouch, useEnhancedMobileTouch } from './use-mobile-touch';
+// Animation hooks
+export { useAnimationProfile, useAnimationDuration, useAnimationEasing, useAnimationClasses, usePerformanceMode } from './use-animation-profile';
+// Device hook
+export { useDevice } from './use-device';
+// Battery-conscious animation hooks
+export { useBatteryAnimations } from './use-battery-animations';
+// Hardware acceleration hooks
+export { useHardwareAcceleration } from './use-hardware-acceleration';
+// Battery optimization hooks
+export { useBatteryOptimization } from './use-battery-optimization';
+// Advanced component architecture hooks
+export { useAdvancedPatterns } from './use-advanced-patterns';
+export { useComponentPerformance } from './use-component-performance';
+export { useMobileOptimization } from './use-mobile-optimization';
+export { useReusableArchitecture } from './use-reusable-architecture';
+export { useAccessibilitySupport } from './use-accessibility-support';
+// Mobile skeleton and loading states hooks
+export { default as useMobileSkeleton } from './use-mobile-skeleton';
+export { default as useDeviceLoadingStates } from './use-device-loading-states';
+export { default as useLoadingPerformance } from './use-loading-performance';
+export { default as useBatteryConsciousLoading } from './use-battery-conscious-loading';
+export { default as useLoadingAccessibility } from './use-loading-accessibility';