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

package/dist/components/ui/form-demo.esm.js

@@ -0,0 +1,192 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { Tabs } from './navigation/tabs.js';
+import MobileFormValidation from './mobile-form-validation.js';
+export const FormDemo = () => {
+    const [activeTab, setActiveTab] = useState('basic');
+    const [formResults, setFormResults] = useState([]);
+    const [enableEnhancedFeatures, setEnableEnhancedFeatures] = useState(true);
+    const basicFormRef = useRef(null);
+    const advancedFormRef = useRef(null);
+    // Basic form fields
+    const basicFields = [
+        {
+            name: 'name',
+            label: 'Full Name',
+            type: { type: 'text' },
+            placeholder: 'Enter your full name',
+            rules: [
+                { type: 'required', message: 'Name is required' },
+                { type: 'minLength', value: 2, message: 'Name must be at least 2 characters' }
+            ]
+        },
+        {
+            name: 'email',
+            label: 'Email Address',
+            type: { type: 'email' },
+            placeholder: 'Enter your email',
+            rules: [
+                { type: 'required', message: 'Email is required' },
+                { type: 'email', message: 'Please enter a valid email address' }
+            ]
+        }
+    ];
+    // Advanced form fields
+    const advancedFields = [
+        {
+            name: 'fullName',
+            label: 'Full Name',
+            type: { type: 'text' },
+            placeholder: 'Enter your full name',
+            rules: [
+                { type: 'required', message: 'Full name is required' },
+                { type: 'minLength', value: 3, message: 'Name must be at least 3 characters' },
+                { type: 'maxLength', value: 50, message: 'Name must be less than 50 characters' }
+            ]
+        },
+        {
+            name: 'emailAddress',
+            label: 'Email Address',
+            type: { type: 'email' },
+            placeholder: 'Enter your email address',
+            rules: [
+                { type: 'required', message: 'Email is required' },
+                { type: 'email', message: 'Please enter a valid email address' }
+            ]
+        },
+        {
+            name: 'phoneNumber',
+            label: 'Phone Number',
+            type: { type: 'tel' },
+            placeholder: 'Enter your phone number',
+            rules: [
+                { type: 'required', message: 'Phone number is required' },
+                { type: 'pattern', value: /^[\+]?[0-9\s\-\(\)]{7,}$/, message: 'Please enter a valid phone number' }
+            ]
+        },
+        {
+            name: 'website',
+            label: 'Website',
+            type: { type: 'url' },
+            placeholder: 'Enter your website URL',
+            rules: [
+                { type: 'pattern', value: /^https?:\/\/.+/, message: 'Please enter a valid URL starting with http:// or https://' }
+            ]
+        },
+        {
+            name: 'age',
+            label: 'Age',
+            type: { type: 'number' },
+            placeholder: 'Enter your age',
+            rules: [
+                { type: 'required', message: 'Age is required' },
+                { type: 'minLength', value: 1, message: 'Age must be at least 1' },
+                { type: 'maxLength', value: 3, message: 'Age must be less than 1000' }
+            ]
+        },
+        {
+            name: 'password',
+            label: 'Password',
+            type: { type: 'password' },
+            placeholder: 'Enter your password',
+            rules: [
+                { type: 'required', message: 'Password is required' },
+                { type: 'minLength', value: 8, message: 'Password must be at least 8 characters' },
+                { type: 'pattern', value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message: 'Password must contain lowercase, uppercase, and number' }
+            ]
+        },
+        {
+            name: 'confirmPassword',
+            label: 'Confirm Password',
+            type: { type: 'password' },
+            placeholder: 'Confirm your password',
+            rules: [
+                { type: 'required', message: 'Please confirm your password' },
+                { type: 'custom', message: 'Passwords do not match', validator: (value) => {
+                        const passwordField = advancedFields.find(f => f.name === 'password');
+                        const passwordValue = passwordField ? document.getElementById('password')?.value : '';
+                        return value === passwordValue;
+                    } }
+            ]
+        }
+    ];
+    // Handle form submission
+    const handleFormSubmit = (formData, formType) => {
+        const result = {
+            type: formType,
+            data: formData,
+            timestamp: new Date()
+        };
+        setFormResults(prev => [result, ...prev.slice(0, 9)]); // Keep last 10 results
+        console.log(`${formType} form submitted:`, formData);
+    };
+    // Handle form validation change
+    const handleValidationChange = (isValid, formType) => {
+        console.log(`${formType} form validation:`, isValid ? 'Valid' : 'Invalid');
+    };
+    // Clear form results
+    const clearResults = () => {
+        setFormResults([]);
+    };
+    // Test form submission programmatically
+    const testFormSubmission = async (formType) => {
+        const formRef = formType === 'basic' ? basicFormRef : advancedFormRef;
+        if (formRef.current) {
+            try {
+                const result = await formRef.current.submit();
+                console.log(`${formType} form test submission:`, result);
+            }
+            catch (error) {
+                console.error(`${formType} form test submission error:`, error);
+            }
+        }
+    };
+    // Test form validation programmatically
+    const testFormValidation = async (formType) => {
+        const formRef = formType === 'basic' ? basicFormRef : advancedFormRef;
+        if (formRef.current) {
+            try {
+                const isValid = await formRef.current.validate();
+                console.log(`${formType} form validation test:`, isValid ? 'Valid' : 'Invalid');
+            }
+            catch (error) {
+                console.error(`${formType} form validation test error:`, error);
+            }
+        }
+    };
+    // Test form reset programmatically
+    const testFormReset = (formType) => {
+        const formRef = formType === 'basic' ? basicFormRef : advancedFormRef;
+        if (formRef.current) {
+            formRef.current.reset();
+            console.log(`${formType} form reset`);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center space-y-2", children: [_jsx("h1", { className: "text-3xl font-bold", children: "\uD83D\uDCF1 Mobile Form Validation Demo" }), _jsx("p", { className: "text-gray-600", children: "Advanced form system with mobile validation, animated feedback, and performance optimization" }), _jsx(Badge, { variant: "outline", className: "text-sm", children: "Story 6: Advanced Form System with Mobile Validation" })] }), _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "flex items-center gap-2 p-3 bg-gray-50 rounded-lg", children: [_jsx("span", { className: "text-sm font-medium", children: "Enhanced Features:" }), _jsx(Button, { variant: enableEnhancedFeatures ? 'default' : 'outline', size: "sm", onClick: () => setEnableEnhancedFeatures(!enableEnhancedFeatures), children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }) }), _jsx(Tabs, { tabs: [
+                    {
+                        id: 'basic',
+                        label: 'Basic Form',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDE80 Basic Form Validation", _jsx(Badge, { variant: "secondary", children: "Simple Example" })] }), _jsx(CardDescription, { children: "Basic form with name and email validation. Demonstrates core validation features." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(MobileFormValidation, { ref: basicFormRef, title: "Basic Contact Form", description: "Simple form with essential validation", fields: basicFields, onSubmit: (data) => handleFormSubmit(data, 'Basic'), onValidationChange: (isValid) => handleValidationChange(isValid, 'Basic'), enableEnhancedFeatures: enableEnhancedFeatures }), _jsxs("div", { className: "flex gap-2 pt-4 border-t", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormSubmission('basic'), children: "Test Submit" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormValidation('basic'), children: "Test Validation" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormReset('basic'), children: "Test Reset" })] })] })] }) }))
+                    },
+                    {
+                        id: 'advanced',
+                        label: 'Advanced Form',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAF Advanced Form Validation", _jsx(Badge, { variant: "default", children: "Full Featured" })] }), _jsx(CardDescription, { children: "Comprehensive form with multiple field types, complex validation rules, and all features enabled." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(MobileFormValidation, { ref: advancedFormRef, title: "Advanced Registration Form", description: "Complete form with all validation types and optimizations", fields: advancedFields, onSubmit: (data) => handleFormSubmit(data, 'Advanced'), onValidationChange: (isValid) => handleValidationChange(isValid, 'Advanced'), enableEnhancedFeatures: enableEnhancedFeatures }), _jsxs("div", { className: "flex gap-2 pt-4 border-t", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormSubmission('advanced'), children: "Test Submit" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormValidation('advanced'), children: "Test Validation" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormReset('advanced'), children: "Test Reset" })] })] })] }) }))
+                    },
+                    {
+                        id: 'performance',
+                        label: 'Performance',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\u26A1 Performance Monitoring", _jsx(Badge, { variant: "outline", children: "Real-time Metrics" })] }), _jsx(CardDescription, { children: "Monitor form performance, memory usage, battery status, and optimization scores." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Performance Features" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Validation Throttling:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Event Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Memory Management:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Battery Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Optimization Benefits" }), _jsxs("div", { className: "space-y-2 text-sm text-gray-600", children: [_jsx("p", { children: "\u2022 Reduced validation frequency for better performance" }), _jsx("p", { children: "\u2022 Touch event throttling for smooth mobile experience" }), _jsx("p", { children: "\u2022 Automatic memory cleanup to prevent leaks" }), _jsx("p", { children: "\u2022 Battery-aware optimizations for mobile devices" }), _jsx("p", { children: "\u2022 Real-time performance scoring and recommendations" })] })] })] }), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-semibold text-blue-800 mb-2", children: "Performance Tips" }), _jsxs("ul", { className: "text-sm text-blue-700 space-y-1", children: [_jsx("li", { children: "\u2022 Use validation throttling to reduce unnecessary validations" }), _jsx("li", { children: "\u2022 Enable touch event optimization for better mobile performance" }), _jsx("li", { children: "\u2022 Monitor memory usage and enable cleanup when needed" }), _jsx("li", { children: "\u2022 Enable battery optimization for mobile devices" }), _jsx("li", { children: "\u2022 Check performance scores and apply recommendations" })] })] })] })] }) }))
+                    },
+                    {
+                        id: 'semantic',
+                        label: 'Semantic Input',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83E\uDDE0 Semantic Input Optimization", _jsx(Badge, { variant: "outline", children: "Smart Detection" })] }), _jsx(CardDescription, { children: "Automatic input type detection, mobile keyboard optimization, and enhanced autocomplete." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Semantic Features" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Auto Type Detection:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Keyboard Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Autocomplete Enhancement:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Optimization:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Detection Examples" }), _jsxs("div", { className: "space-y-2 text-sm text-gray-600", children: [_jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Email:" }), " Detects @ symbol, sets email keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Phone:" }), " Detects numeric patterns, sets phone keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "URL:" }), " Detects http/https, sets URL keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Search:" }), " Detects search context, optimizes input"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Number:" }), " Detects numeric patterns, sets numeric keyboard"] })] })] })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-semibold text-green-800 mb-2", children: "Semantic Benefits" }), _jsxs("ul", { className: "text-sm text-green-700 space-y-1", children: [_jsx("li", { children: "\u2022 Automatic input type detection based on field name and content" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization for better user experience" }), _jsx("li", { children: "\u2022 Enhanced autocomplete with appropriate suggestions" }), _jsx("li", { children: "\u2022 Touch-friendly input optimization" }), _jsx("li", { children: "\u2022 Accessibility improvements with proper input modes" })] })] })] })] }) }))
+                    }
+                ], activeTab: activeTab, onTabChange: (tabId) => setActiveTab(tabId), className: "w-full" }), formResults.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDCCA Form Submission Results", _jsx(Button, { variant: "outline", size: "sm", onClick: clearResults, children: "Clear Results" })] }), _jsx(CardDescription, { children: "Recent form submissions and their data" })] }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-3 max-h-64 overflow-y-auto", children: formResults.map((result, index) => (_jsxs("div", { className: "p-3 bg-gray-50 rounded-lg", children: [_jsxs("div", { className: "flex justify-between items-start mb-2", children: [_jsx(Badge, { variant: "outline", children: result.type }), _jsx("span", { className: "text-xs text-gray-500", children: result.timestamp.toLocaleTimeString() })] }), _jsx("pre", { className: "text-xs bg-white p-2 rounded border overflow-x-auto", children: JSON.stringify(result.data, null, 2) })] }, index))) }) })] })), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "\uD83C\uDFAF Story 6 Implementation Summary" }), _jsx(CardDescription, { children: "Complete mobile form validation system with all requested features" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "\u2705 Completed Features" }), _jsxs("ul", { className: "text-sm space-y-1 text-gray-600", children: [_jsx("li", { children: "\u2022 Mobile form validation system" }), _jsx("li", { children: "\u2022 Animated success/error states" }), _jsx("li", { children: "\u2022 Touch-friendly form layouts" }), _jsx("li", { children: "\u2022 Semantic input optimization" }), _jsx("li", { children: "\u2022 Performance-optimized validation" }), _jsx("li", { children: "\u2022 Haptic feedback and touch sounds" }), _jsx("li", { children: "\u2022 Battery-aware optimizations" }), _jsx("li", { children: "\u2022 Memory management and cleanup" })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "\uD83D\uDE80 Advanced Capabilities" }), _jsxs("ul", { className: "text-sm space-y-1 text-gray-600", children: [_jsx("li", { children: "\u2022 Real-time performance monitoring" }), _jsx("li", { children: "\u2022 Automatic input type detection" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization" }), _jsx("li", { children: "\u2022 Touch event throttling" }), _jsx("li", { children: "\u2022 Responsive layout adaptation" }), _jsx("li", { children: "\u2022 Accessibility enhancements" }), _jsx("li", { children: "\u2022 Performance scoring system" }), _jsx("li", { children: "\u2022 Optimization recommendations" })] })] })] }) })] })] }));
+};
+export default FormDemo;

package/dist/components/ui/form-demo.js

@@ -0,0 +1,192 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { Tabs } from './navigation/tabs.js';
+import MobileFormValidation from './mobile-form-validation.js';
+export const FormDemo = () => {
+    const [activeTab, setActiveTab] = useState('basic');
+    const [formResults, setFormResults] = useState([]);
+    const [enableEnhancedFeatures, setEnableEnhancedFeatures] = useState(true);
+    const basicFormRef = useRef(null);
+    const advancedFormRef = useRef(null);
+    // Basic form fields
+    const basicFields = [
+        {
+            name: 'name',
+            label: 'Full Name',
+            type: { type: 'text' },
+            placeholder: 'Enter your full name',
+            rules: [
+                { type: 'required', message: 'Name is required' },
+                { type: 'minLength', value: 2, message: 'Name must be at least 2 characters' }
+            ]
+        },
+        {
+            name: 'email',
+            label: 'Email Address',
+            type: { type: 'email' },
+            placeholder: 'Enter your email',
+            rules: [
+                { type: 'required', message: 'Email is required' },
+                { type: 'email', message: 'Please enter a valid email address' }
+            ]
+        }
+    ];
+    // Advanced form fields
+    const advancedFields = [
+        {
+            name: 'fullName',
+            label: 'Full Name',
+            type: { type: 'text' },
+            placeholder: 'Enter your full name',
+            rules: [
+                { type: 'required', message: 'Full name is required' },
+                { type: 'minLength', value: 3, message: 'Name must be at least 3 characters' },
+                { type: 'maxLength', value: 50, message: 'Name must be less than 50 characters' }
+            ]
+        },
+        {
+            name: 'emailAddress',
+            label: 'Email Address',
+            type: { type: 'email' },
+            placeholder: 'Enter your email address',
+            rules: [
+                { type: 'required', message: 'Email is required' },
+                { type: 'email', message: 'Please enter a valid email address' }
+            ]
+        },
+        {
+            name: 'phoneNumber',
+            label: 'Phone Number',
+            type: { type: 'tel' },
+            placeholder: 'Enter your phone number',
+            rules: [
+                { type: 'required', message: 'Phone number is required' },
+                { type: 'pattern', value: /^[\+]?[0-9\s\-\(\)]{7,}$/, message: 'Please enter a valid phone number' }
+            ]
+        },
+        {
+            name: 'website',
+            label: 'Website',
+            type: { type: 'url' },
+            placeholder: 'Enter your website URL',
+            rules: [
+                { type: 'pattern', value: /^https?:\/\/.+/, message: 'Please enter a valid URL starting with http:// or https://' }
+            ]
+        },
+        {
+            name: 'age',
+            label: 'Age',
+            type: { type: 'number' },
+            placeholder: 'Enter your age',
+            rules: [
+                { type: 'required', message: 'Age is required' },
+                { type: 'minLength', value: 1, message: 'Age must be at least 1' },
+                { type: 'maxLength', value: 3, message: 'Age must be less than 1000' }
+            ]
+        },
+        {
+            name: 'password',
+            label: 'Password',
+            type: { type: 'password' },
+            placeholder: 'Enter your password',
+            rules: [
+                { type: 'required', message: 'Password is required' },
+                { type: 'minLength', value: 8, message: 'Password must be at least 8 characters' },
+                { type: 'pattern', value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/, message: 'Password must contain lowercase, uppercase, and number' }
+            ]
+        },
+        {
+            name: 'confirmPassword',
+            label: 'Confirm Password',
+            type: { type: 'password' },
+            placeholder: 'Confirm your password',
+            rules: [
+                { type: 'required', message: 'Please confirm your password' },
+                { type: 'custom', message: 'Passwords do not match', validator: (value) => {
+                        const passwordField = advancedFields.find(f => f.name === 'password');
+                        const passwordValue = passwordField ? document.getElementById('password')?.value : '';
+                        return value === passwordValue;
+                    } }
+            ]
+        }
+    ];
+    // Handle form submission
+    const handleFormSubmit = (formData, formType) => {
+        const result = {
+            type: formType,
+            data: formData,
+            timestamp: new Date()
+        };
+        setFormResults(prev => [result, ...prev.slice(0, 9)]); // Keep last 10 results
+        console.log(`${formType} form submitted:`, formData);
+    };
+    // Handle form validation change
+    const handleValidationChange = (isValid, formType) => {
+        console.log(`${formType} form validation:`, isValid ? 'Valid' : 'Invalid');
+    };
+    // Clear form results
+    const clearResults = () => {
+        setFormResults([]);
+    };
+    // Test form submission programmatically
+    const testFormSubmission = async (formType) => {
+        const formRef = formType === 'basic' ? basicFormRef : advancedFormRef;
+        if (formRef.current) {
+            try {
+                const result = await formRef.current.submit();
+                console.log(`${formType} form test submission:`, result);
+            }
+            catch (error) {
+                console.error(`${formType} form test submission error:`, error);
+            }
+        }
+    };
+    // Test form validation programmatically
+    const testFormValidation = async (formType) => {
+        const formRef = formType === 'basic' ? basicFormRef : advancedFormRef;
+        if (formRef.current) {
+            try {
+                const isValid = await formRef.current.validate();
+                console.log(`${formType} form validation test:`, isValid ? 'Valid' : 'Invalid');
+            }
+            catch (error) {
+                console.error(`${formType} form validation test error:`, error);
+            }
+        }
+    };
+    // Test form reset programmatically
+    const testFormReset = (formType) => {
+        const formRef = formType === 'basic' ? basicFormRef : advancedFormRef;
+        if (formRef.current) {
+            formRef.current.reset();
+            console.log(`${formType} form reset`);
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center space-y-2", children: [_jsx("h1", { className: "text-3xl font-bold", children: "\uD83D\uDCF1 Mobile Form Validation Demo" }), _jsx("p", { className: "text-gray-600", children: "Advanced form system with mobile validation, animated feedback, and performance optimization" }), _jsx(Badge, { variant: "outline", className: "text-sm", children: "Story 6: Advanced Form System with Mobile Validation" })] }), _jsx("div", { className: "flex justify-center", children: _jsxs("div", { className: "flex items-center gap-2 p-3 bg-gray-50 rounded-lg", children: [_jsx("span", { className: "text-sm font-medium", children: "Enhanced Features:" }), _jsx(Button, { variant: enableEnhancedFeatures ? 'default' : 'outline', size: "sm", onClick: () => setEnableEnhancedFeatures(!enableEnhancedFeatures), children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }) }), _jsx(Tabs, { tabs: [
+                    {
+                        id: 'basic',
+                        label: 'Basic Form',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDE80 Basic Form Validation", _jsx(Badge, { variant: "secondary", children: "Simple Example" })] }), _jsx(CardDescription, { children: "Basic form with name and email validation. Demonstrates core validation features." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(MobileFormValidation, { ref: basicFormRef, title: "Basic Contact Form", description: "Simple form with essential validation", fields: basicFields, onSubmit: (data) => handleFormSubmit(data, 'Basic'), onValidationChange: (isValid) => handleValidationChange(isValid, 'Basic'), enableEnhancedFeatures: enableEnhancedFeatures }), _jsxs("div", { className: "flex gap-2 pt-4 border-t", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormSubmission('basic'), children: "Test Submit" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormValidation('basic'), children: "Test Validation" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormReset('basic'), children: "Test Reset" })] })] })] }) }))
+                    },
+                    {
+                        id: 'advanced',
+                        label: 'Advanced Form',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAF Advanced Form Validation", _jsx(Badge, { variant: "default", children: "Full Featured" })] }), _jsx(CardDescription, { children: "Comprehensive form with multiple field types, complex validation rules, and all features enabled." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(MobileFormValidation, { ref: advancedFormRef, title: "Advanced Registration Form", description: "Complete form with all validation types and optimizations", fields: advancedFields, onSubmit: (data) => handleFormSubmit(data, 'Advanced'), onValidationChange: (isValid) => handleValidationChange(isValid, 'Advanced'), enableEnhancedFeatures: enableEnhancedFeatures }), _jsxs("div", { className: "flex gap-2 pt-4 border-t", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormSubmission('advanced'), children: "Test Submit" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormValidation('advanced'), children: "Test Validation" }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => testFormReset('advanced'), children: "Test Reset" })] })] })] }) }))
+                    },
+                    {
+                        id: 'performance',
+                        label: 'Performance',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\u26A1 Performance Monitoring", _jsx(Badge, { variant: "outline", children: "Real-time Metrics" })] }), _jsx(CardDescription, { children: "Monitor form performance, memory usage, battery status, and optimization scores." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Performance Features" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Validation Throttling:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Event Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Memory Management:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Battery Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Optimization Benefits" }), _jsxs("div", { className: "space-y-2 text-sm text-gray-600", children: [_jsx("p", { children: "\u2022 Reduced validation frequency for better performance" }), _jsx("p", { children: "\u2022 Touch event throttling for smooth mobile experience" }), _jsx("p", { children: "\u2022 Automatic memory cleanup to prevent leaks" }), _jsx("p", { children: "\u2022 Battery-aware optimizations for mobile devices" }), _jsx("p", { children: "\u2022 Real-time performance scoring and recommendations" })] })] })] }), _jsxs("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [_jsx("h4", { className: "font-semibold text-blue-800 mb-2", children: "Performance Tips" }), _jsxs("ul", { className: "text-sm text-blue-700 space-y-1", children: [_jsx("li", { children: "\u2022 Use validation throttling to reduce unnecessary validations" }), _jsx("li", { children: "\u2022 Enable touch event optimization for better mobile performance" }), _jsx("li", { children: "\u2022 Monitor memory usage and enable cleanup when needed" }), _jsx("li", { children: "\u2022 Enable battery optimization for mobile devices" }), _jsx("li", { children: "\u2022 Check performance scores and apply recommendations" })] })] })] })] }) }))
+                    },
+                    {
+                        id: 'semantic',
+                        label: 'Semantic Input',
+                        content: (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83E\uDDE0 Semantic Input Optimization", _jsx(Badge, { variant: "outline", children: "Smart Detection" })] }), _jsx(CardDescription, { children: "Automatic input type detection, mobile keyboard optimization, and enhanced autocomplete." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Semantic Features" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Auto Type Detection:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Keyboard Optimization:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Autocomplete Enhancement:" }), _jsx(Badge, { variant: enableEnhancedFeatures ? 'default' : 'secondary', children: enableEnhancedFeatures ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Optimization:" }), _jsx(Badge, { variant: "default", children: "Enabled" })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Detection Examples" }), _jsxs("div", { className: "space-y-2 text-sm text-gray-600", children: [_jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Email:" }), " Detects @ symbol, sets email keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Phone:" }), " Detects numeric patterns, sets phone keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "URL:" }), " Detects http/https, sets URL keyboard"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Search:" }), " Detects search context, optimizes input"] }), _jsxs("p", { children: ["\u2022 ", _jsx("strong", { children: "Number:" }), " Detects numeric patterns, sets numeric keyboard"] })] })] })] }), _jsxs("div", { className: "p-4 bg-green-50 border border-green-200 rounded-lg", children: [_jsx("h4", { className: "font-semibold text-green-800 mb-2", children: "Semantic Benefits" }), _jsxs("ul", { className: "text-sm text-green-700 space-y-1", children: [_jsx("li", { children: "\u2022 Automatic input type detection based on field name and content" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization for better user experience" }), _jsx("li", { children: "\u2022 Enhanced autocomplete with appropriate suggestions" }), _jsx("li", { children: "\u2022 Touch-friendly input optimization" }), _jsx("li", { children: "\u2022 Accessibility improvements with proper input modes" })] })] })] })] }) }))
+                    }
+                ], activeTab: activeTab, onTabChange: (tabId) => setActiveTab(tabId), className: "w-full" }), formResults.length > 0 && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDCCA Form Submission Results", _jsx(Button, { variant: "outline", size: "sm", onClick: clearResults, children: "Clear Results" })] }), _jsx(CardDescription, { children: "Recent form submissions and their data" })] }), _jsx(CardContent, { children: _jsx("div", { className: "space-y-3 max-h-64 overflow-y-auto", children: formResults.map((result, index) => (_jsxs("div", { className: "p-3 bg-gray-50 rounded-lg", children: [_jsxs("div", { className: "flex justify-between items-start mb-2", children: [_jsx(Badge, { variant: "outline", children: result.type }), _jsx("span", { className: "text-xs text-gray-500", children: result.timestamp.toLocaleTimeString() })] }), _jsx("pre", { className: "text-xs bg-white p-2 rounded border overflow-x-auto", children: JSON.stringify(result.data, null, 2) })] }, index))) }) })] })), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "\uD83C\uDFAF Story 6 Implementation Summary" }), _jsx(CardDescription, { children: "Complete mobile form validation system with all requested features" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "\u2705 Completed Features" }), _jsxs("ul", { className: "text-sm space-y-1 text-gray-600", children: [_jsx("li", { children: "\u2022 Mobile form validation system" }), _jsx("li", { children: "\u2022 Animated success/error states" }), _jsx("li", { children: "\u2022 Touch-friendly form layouts" }), _jsx("li", { children: "\u2022 Semantic input optimization" }), _jsx("li", { children: "\u2022 Performance-optimized validation" }), _jsx("li", { children: "\u2022 Haptic feedback and touch sounds" }), _jsx("li", { children: "\u2022 Battery-aware optimizations" }), _jsx("li", { children: "\u2022 Memory management and cleanup" })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "\uD83D\uDE80 Advanced Capabilities" }), _jsxs("ul", { className: "text-sm space-y-1 text-gray-600", children: [_jsx("li", { children: "\u2022 Real-time performance monitoring" }), _jsx("li", { children: "\u2022 Automatic input type detection" }), _jsx("li", { children: "\u2022 Mobile keyboard optimization" }), _jsx("li", { children: "\u2022 Touch event throttling" }), _jsx("li", { children: "\u2022 Responsive layout adaptation" }), _jsx("li", { children: "\u2022 Accessibility enhancements" }), _jsx("li", { children: "\u2022 Performance scoring system" }), _jsx("li", { children: "\u2022 Optimization recommendations" })] })] })] }) })] })] }));
+};
+export default FormDemo;

package/dist/components/ui/hardware-acceleration-demo.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const HardwareAccelerationDemo: React.FC;
+export default HardwareAccelerationDemo;
+//# sourceMappingURL=hardware-acceleration-demo.d.ts.map

package/dist/components/ui/hardware-acceleration-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hardware-acceleration-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/hardware-acceleration-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAyhB5C,CAAA;AAED,eAAe,wBAAwB,CAAA"}

package/dist/components/ui/hardware-acceleration-demo.esm.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { useHardwareAcceleration } from '../../hooks/use-hardware-acceleration.js';
+import { useBatteryOptimization } from '../../hooks/use-battery-optimization.js';
+export const HardwareAccelerationDemo = () => {
+    const [showGPUInfo, setShowGPUInfo] = useState(true);
+    const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true);
+    const [showBatteryInfo, setShowBatteryInfo] = useState(true);
+    const [enableHardwareAcceleration, setEnableHardwareAcceleration] = useState(true);
+    const [enableBatteryOptimization, setEnableBatteryOptimization] = useState(true);
+    const [error, setError] = useState(null);
+    // Hooks with error handling
+    const hardwareAcceleration = useHardwareAcceleration({
+        enableGPUMonitoring: true,
+        enablePerformanceTracking: true,
+        enableBatteryOptimization: true,
+        enableAutomaticOptimization: true
+    }, {
+        onGPUDetected: (gpuInfo) => console.log('GPU detected:', gpuInfo),
+        onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+        onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow),
+        onOptimizationApplied: (optimization) => console.log('Optimization applied:', optimization)
+    });
+    const batteryOptimization = useBatteryOptimization({
+        enableBatteryMonitoring: true,
+        enablePerformanceThrottling: true,
+        enableUserPreferences: true,
+        enableAdaptiveOptimization: true
+    }, {
+        onBatteryStatusChange: (status) => console.log('Battery status changed:', status),
+        onLowBatteryWarning: (status) => console.log('Low battery warning:', status),
+        onCriticalBatteryWarning: (status) => console.log('Critical battery warning:', status),
+        onPerformanceThrottled: (level, reason) => console.log('Performance throttled:', level, reason),
+        onOptimizationApplied: (optimization) => console.log('Battery optimization applied:', optimization)
+    });
+    // Error boundary effect
+    useEffect(() => {
+        const handleError = (error) => {
+            console.error('Hardware acceleration demo error:', error);
+            setError(error.message);
+        };
+        window.addEventListener('error', handleError);
+        return () => window.removeEventListener('error', handleError);
+    }, []);
+    // Demo animations with hardware acceleration
+    const [animationState, setAnimationState] = useState('idle');
+    const [animationType, setAnimationType] = useState('basic');
+    const startAnimation = useCallback(() => {
+        setAnimationState('running');
+        setTimeout(() => setAnimationState('idle'), 3000);
+    }, []);
+    const pauseAnimation = useCallback(() => {
+        setAnimationState('paused');
+    }, []);
+    const resumeAnimation = useCallback(() => {
+        setAnimationState('running');
+    }, []);
+    // Get animation classes based on type
+    const getAnimationClasses = useCallback((type) => {
+        const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out';
+        switch (type) {
+            case 'basic':
+                return `${baseClasses} bg-cs-primary hover:bg-cs-secondary`;
+            case 'gpu':
+                return `${baseClasses} bg-cs-secondary gpu-optimized hover:bg-cs-accent`;
+            case 'transform3d':
+                return `${baseClasses} bg-cs-accent transform3d-optimized hover:bg-cs-primary`;
+            case 'performance':
+                return `${baseClasses} bg-cs-primary performance-accelerated hover:bg-cs-secondary`;
+            default:
+                return baseClasses;
+        }
+    }, []);
+    // Get animation styles based on state
+    const getAnimationStyles = useCallback((state) => {
+        switch (state) {
+            case 'running':
+                return {
+                    transform: 'translate3d(100px, 0, 0) rotate(360deg) scale(1.2)',
+                    opacity: 0.8
+                };
+            case 'paused':
+                return {
+                    transform: 'translate3d(50px, 0, 0) rotate(180deg) scale(1.1)',
+                    opacity: 0.9
+                };
+            default:
+                return {
+                    transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                    opacity: 1
+                };
+        }
+    }, []);
+    // Show error if any
+    if (error) {
+        return (_jsxs("div", { className: "p-6 bg-red-50 border border-red-200 rounded-lg", children: [_jsx("h2", { className: "text-lg font-semibold text-red-800 mb-2", children: "Error Loading Hardware Acceleration Demo" }), _jsx("p", { className: "text-red-600 mb-4", children: error }), _jsx(Button, { onClick: () => setError(null), variant: "outline", children: "Try Again" })] }));
+    }
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-cs-text-primary mb-2", children: "\uD83D\uDE80 Hardware Acceleration & GPU Optimization" }), _jsx("p", { className: "text-lg text-cs-text-secondary mb-4", children: "Story 8 Implementation - Advanced hardware acceleration with GPU optimization and battery awareness" }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Story 8" }), _jsx(Badge, { variant: "outline", children: "Hardware Acceleration" }), _jsx(Badge, { variant: "secondary", children: "GPU Optimization" }), _jsx(Badge, { variant: "outline", children: "Battery Optimization" })] })] }), showGPUInfo && hardwareAcceleration.gpuInfo && (_jsxs(Card, { className: "border-2 border-cs-primary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83C\uDFAE GPU Information", _jsx(Badge, { variant: hardwareAcceleration.isGPUSupported ? 'default' : 'secondary', children: hardwareAcceleration.isGPUSupported ? 'Supported' : 'Not Supported' })] }), _jsx(CardDescription, { children: "Real-time GPU capability detection and WebGL support information" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Vendor:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.vendor })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Renderer:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.renderer })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Version:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.version })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "WebGL Support:" }), _jsx(Badge, { variant: hardwareAcceleration.gpuInfo.isWebGLSupported ? 'default' : 'secondary', children: hardwareAcceleration.gpuInfo.isWebGLSupported ? 'Yes' : 'No' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "WebGL2 Support:" }), _jsx(Badge, { variant: hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'default' : 'secondary', children: hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'Yes' : 'No' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Max Texture Size:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.maxTextureSize })] })] })] }) })] })), showPerformanceMetrics && (_jsxs(Card, { className: "border-2 border-cs-secondary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDCCA Performance Metrics", _jsx(Badge, { variant: "outline", children: "Real-time" })] }), _jsx(CardDescription, { children: "Hardware acceleration performance monitoring and optimization status" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4 text-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: hardwareAcceleration.metrics.fps }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "FPS" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-2xl font-bold text-cs-secondary", children: [hardwareAcceleration.metrics.frameTime.toFixed(1), "ms"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Frame Time" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-2xl font-bold text-cs-accent", children: [hardwareAcceleration.metrics.gpuUtilization.toFixed(1), "%"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "GPU Usage" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: hardwareAcceleration.metrics.performanceScore }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Performance Score" })] })] }), _jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "font-medium text-sm", children: "Performance Level:" }), _jsx(Badge, { variant: hardwareAcceleration.performanceLevel === 'excellent' ? 'default' :
+                                                    hardwareAcceleration.performanceLevel === 'good' ? 'default' :
+                                                        hardwareAcceleration.performanceLevel === 'fair' ? 'secondary' : 'secondary', children: hardwareAcceleration.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium text-sm", children: "Hardware Acceleration:" }), _jsx(Badge, { variant: hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary', children: hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled' })] })] })] })] })), showBatteryInfo && (_jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDD0B Battery Optimization", _jsxs(Badge, { variant: batteryOptimization.isLowBattery ? 'secondary' : 'default', children: [batteryOptimization.batteryPercentage, "%"] })] }), _jsx(CardDescription, { children: "Battery-aware performance optimization and user preference management" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Battery Status" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Level:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryOptimization.batteryPercentage, "%"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Status:" }), _jsx(Badge, { variant: batteryOptimization.isCharging ? 'default' : 'secondary', children: batteryOptimization.isCharging ? 'Charging' : 'Discharging' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Health:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.getBatteryHealth() })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Performance Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Throttle Level:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.currentThrottleLevel })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "User Preference:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.userPreferences })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Optimization:" }), _jsx(Badge, { variant: batteryOptimization.isOptimizing ? 'secondary' : 'default', children: batteryOptimization.isOptimizing ? 'Active' : 'Idle' })] })] })] })] }), _jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "User Preference:" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: batteryOptimization.userPreferences === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('performance'), children: "Performance" }), _jsx(Button, { variant: batteryOptimization.userPreferences === 'balanced' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('balanced'), children: "Balanced" }), _jsx(Button, { variant: batteryOptimization.userPreferences === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('battery'), children: "Battery" })] })] })] })] })), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Hardware Acceleration Demo" }), _jsx(CardDescription, { children: "Test different types of hardware acceleration with real-time animations" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationType === 'basic' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('basic'), children: "Basic" }), _jsx(Button, { variant: animationType === 'gpu' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('gpu'), children: "GPU Optimized" }), _jsx(Button, { variant: animationType === 'transform3d' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('transform3d'), children: "Transform3D" }), _jsx(Button, { variant: animationType === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('performance'), children: "Performance" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "default", onClick: startAnimation, disabled: animationState === 'running', children: "Start Animation" }), _jsx(Button, { variant: "outline", onClick: pauseAnimation, disabled: animationState !== 'running', children: "Pause" }), _jsx(Button, { variant: "outline", onClick: resumeAnimation, disabled: animationState !== 'paused', children: "Resume" })] }), _jsx("div", { className: "flex justify-center", children: _jsx("div", { className: getAnimationClasses(animationType), style: getAnimationStyles(animationState) }) }), _jsxs("div", { className: "text-center text-sm text-cs-text-secondary", children: [_jsxs("p", { children: ["Animation Type: ", _jsx("span", { className: "font-medium", children: animationType })] }), _jsxs("p", { children: ["State: ", _jsx("span", { className: "font-medium", children: animationState })] }), _jsxs("p", { children: ["Hardware Acceleration: ", _jsx("span", { className: "font-medium", children: hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled' })] })] })] })] }), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Demo Controls" }), _jsx(CardDescription, { children: "Configure and test different hardware acceleration features" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: showGPUInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowGPUInfo(!showGPUInfo), children: [showGPUInfo ? 'Hide' : 'Show', " GPU Info"] }), _jsxs(Button, { variant: showPerformanceMetrics ? 'default' : 'outline', size: "sm", onClick: () => setShowPerformanceMetrics(!showPerformanceMetrics), children: [showPerformanceMetrics ? 'Hide' : 'Show', " Performance"] }), _jsxs(Button, { variant: showBatteryInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowBatteryInfo(!showBatteryInfo), children: [showBatteryInfo ? 'Hide' : 'Show', " Battery Info"] })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: enableHardwareAcceleration ? 'default' : 'outline', size: "sm", onClick: () => setEnableHardwareAcceleration(!enableHardwareAcceleration), children: [enableHardwareAcceleration ? 'Disable' : 'Enable', " Hardware Acceleration"] }), _jsxs(Button, { variant: enableBatteryOptimization ? 'default' : 'outline', size: "sm", onClick: () => setEnableBatteryOptimization(!enableBatteryOptimization), children: [enableBatteryOptimization ? 'Disable' : 'Enable', " Battery Optimization"] })] })] })] }), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Optimization Status" }), _jsx(CardDescription, { children: "Current optimization status and recommendations" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Hardware Acceleration:" }), _jsx(Badge, { variant: hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary', children: hardwareAcceleration.isHardwareAccelerated ? 'Optimal' : 'Needs Optimization' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Performance Level:" }), _jsx(Badge, { variant: hardwareAcceleration.performanceLevel === 'excellent' || hardwareAcceleration.performanceLevel === 'good'
+                                                    ? 'default' : 'secondary', children: hardwareAcceleration.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Battery Optimization:" }), _jsx(Badge, { variant: batteryOptimization.isLowBattery ? 'secondary' : 'default', children: batteryOptimization.isLowBattery ? 'Needs Optimization' : 'Optimized' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "GPU Utilization:" }), _jsx(Badge, { variant: hardwareAcceleration.metrics.gpuUtilization < 80 ? 'default' : 'secondary', children: hardwareAcceleration.metrics.gpuUtilization < 80 ? 'Optimal' : 'High Usage' })] })] }), hardwareAcceleration.optimizations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "Recent Optimizations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: hardwareAcceleration.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), batteryOptimization.optimizationRecommendations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-secondary/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "Battery Recommendations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: batteryOptimization.optimizationRecommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] }))] })] })] }));
+};
+export default HardwareAccelerationDemo;