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

package/dist/components/ui/theme-switcher.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+;
+import { Button } from './button.js';
+import { useTheme } from '../../themes';
+export const ThemeSwitcher = ({ showPreview = true, showSystemTheme = true, className = '', variant = 'default' }) => {
+    const { currentTheme, availableThemes, setTheme, getTheme } = useTheme();
+    const [systemTheme, setSystemTheme] = useState('light');
+    const [showThemePreview, setShowThemePreview] = useState(false);
+    // Detect system theme preference
+    useEffect(() => {
+        if (!showSystemTheme)
+            return;
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const updateSystemTheme = (e) => {
+            setSystemTheme(e.matches ? 'dark' : 'light');
+        };
+        updateSystemTheme(mediaQuery);
+        mediaQuery.addEventListener('change', updateSystemTheme);
+        return () => mediaQuery.removeEventListener('change', updateSystemTheme);
+    }, [showSystemTheme]);
+    const getThemeDisplayName = (theme) => {
+        const themeNames = {
+            'stan-design': 'Stan Design',
+            'enterprise': 'Enterprise',
+            'harvey': 'Harvey Creative'
+        };
+        return themeNames[theme] || theme;
+    };
+    const getThemeEmoji = (theme) => {
+        const themeEmojis = {
+            'stan-design': '⚡',
+            'enterprise': '🏢',
+            'harvey': '🎨'
+        };
+        return themeEmojis[theme] || '🎯';
+    };
+    const getThemeDescription = (theme) => {
+        const themeConfig = getTheme(theme);
+        return themeConfig?.meta?.description || 'Custom theme';
+    };
+    const getThemeCategory = (theme) => {
+        const themeConfig = getTheme(theme);
+        return themeConfig?.meta?.category || 'custom';
+    };
+    const handleThemeSwitch = (themeName) => {
+        setTheme(themeName);
+        // Close preview if open
+        if (showThemePreview) {
+            setShowThemePreview(false);
+        }
+    };
+    const handleSystemThemeToggle = () => {
+        // For now, we'll just toggle between light/dark variants
+        // In a real implementation, this would switch to a system-aware theme
+        const currentConfig = getTheme(currentTheme);
+        if (currentConfig) {
+            // This is a placeholder - in practice, you'd have system-aware themes
+            console.log('System theme toggle - would switch to system-aware variant');
+        }
+    };
+    const renderCompactSwitcher = () => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Theme:" }), _jsx("div", { className: "flex gap-1", children: availableThemes.map((theme) => (_jsxs(Button, { variant: currentTheme === theme ? "default" : "outline", size: "sm", onClick: () => handleThemeSwitch(theme), className: "text-xs", children: [getThemeEmoji(theme), " ", getThemeDisplayName(theme)] }, theme))) })] }));
+    const renderDetailedSwitcher = () => (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "text-lg font-semibold", children: "Theme Selection" }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setShowThemePreview(!showThemePreview), children: [showThemePreview ? 'Hide' : 'Show', " Preview"] })] }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: availableThemes.map((theme) => {
+                    const isActive = currentTheme === theme;
+                    return (_jsxs("div", { className: `p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer ${isActive
+                            ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                            : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'}`, onClick: () => handleThemeSwitch(theme), children: [_jsxs("div", { className: "flex items-center gap-3 mb-3", children: [_jsx("span", { className: "text-2xl", children: getThemeEmoji(theme) }), _jsxs("div", { children: [_jsx("h4", { className: "font-semibold text-gray-900 dark:text-gray-100", children: getThemeDisplayName(theme) }), _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: getThemeCategory(theme) })] })] }), _jsx("p", { className: "text-sm text-gray-600 dark:text-gray-300 mb-3", children: getThemeDescription(theme) }), isActive && (_jsxs("div", { className: "flex items-center gap-2 text-blue-600 dark:text-blue-400", children: [_jsx("div", { className: "w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full" }), _jsx("span", { className: "text-sm font-medium", children: "Active" })] }))] }, theme));
+                }) }), showSystemTheme && (_jsx("div", { className: "mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-gray-900 dark:text-gray-100", children: "System Theme Detection" }), _jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["Current system preference: ", systemTheme] })] }), _jsx(Button, { variant: "outline", size: "sm", onClick: handleSystemThemeToggle, children: "Follow System" })] }) }))] }));
+    const renderDefaultSwitcher = () => (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Theme:" }), _jsx("div", { className: "flex gap-2", children: availableThemes.map((theme) => (_jsxs(Button, { variant: currentTheme === theme ? "default" : "outline", size: "sm", onClick: () => handleThemeSwitch(theme), className: "text-sm", children: [getThemeEmoji(theme), " ", getThemeDisplayName(theme)] }, theme))) })] }), showPreview && (_jsx("div", { className: "flex items-center gap-2", children: _jsxs(Button, { variant: "ghost", size: "sm", onClick: () => setShowThemePreview(!showThemePreview), className: "text-xs", children: [showThemePreview ? 'Hide' : 'Show', " Theme Details"] }) })), showThemePreview && (_jsx("div", { className: "mt-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg", children: _jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: availableThemes.map((theme) => {
+                        const isActive = currentTheme === theme;
+                        return (_jsxs("div", { className: `p-2 rounded border text-xs ${isActive
+                                ? 'border-blue-300 bg-blue-50 dark:bg-blue-900/20'
+                                : 'border-gray-200 dark:border-gray-700'}`, children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("span", { children: getThemeEmoji(theme) }), _jsx("span", { className: "font-medium", children: getThemeDisplayName(theme) }), isActive && (_jsx("span", { className: "text-blue-600 dark:text-blue-400 text-xs", children: "\u25CF" }))] }), _jsx("p", { className: "text-gray-600 dark:text-gray-400", children: getThemeDescription(theme) })] }, theme));
+                    }) }) }))] }));
+    const renderContent = () => {
+        switch (variant) {
+            case 'compact':
+                return renderCompactSwitcher();
+            case 'detailed':
+                return renderDetailedSwitcher();
+            default:
+                return renderDefaultSwitcher();
+        }
+    };
+    return (_jsx("div", { className: `theme-switcher ${className}`, children: renderContent() }));
+};

package/dist/components/ui/theme-toggle.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ThemeToggle: React.FC;
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/components/ui/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/theme-toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAgD/B,CAAC"}

package/dist/components/ui/theme-toggle.esm.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+;
+import { Button } from './button.js';
+import { Moon, Sun } from 'lucide-react';
+export const ThemeToggle = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        // Check initial theme from localStorage and DOM
+        const savedTheme = localStorage.getItem('theme');
+        const isDarkMode = savedTheme === 'dark' ||
+            (savedTheme === null && document.documentElement.classList.contains('dark'));
+        setIsDark(isDarkMode);
+        // Ensure DOM is in sync
+        if (isDarkMode) {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+    }, []);
+    const toggleTheme = () => {
+        const newDarkMode = !isDark;
+        setIsDark(newDarkMode);
+        if (newDarkMode) {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        }
+    };
+    return (_jsx(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, style: { borderRadius: 'var(--cs-border-radius-full)' }, "aria-label": `Switch to ${isDark ? 'light' : 'dark'} mode`, "aria-pressed": isDark, children: isDark ? (_jsx(Sun, { style: { width: 'var(--button-icon-size)', height: 'var(--button-icon-size)' } })) : (_jsx(Moon, { style: { width: 'var(--button-icon-size)', height: 'var(--button-icon-size)' } })) }));
+};

package/dist/components/ui/theme-toggle.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+;
+import { Button } from './button.js';
+import { Moon, Sun } from 'lucide-react';
+export const ThemeToggle = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        // Check initial theme from localStorage and DOM
+        const savedTheme = localStorage.getItem('theme');
+        const isDarkMode = savedTheme === 'dark' ||
+            (savedTheme === null && document.documentElement.classList.contains('dark'));
+        setIsDark(isDarkMode);
+        // Ensure DOM is in sync
+        if (isDarkMode) {
+            document.documentElement.classList.add('dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+        }
+    }, []);
+    const toggleTheme = () => {
+        const newDarkMode = !isDark;
+        setIsDark(newDarkMode);
+        if (newDarkMode) {
+            document.documentElement.classList.add('dark');
+            localStorage.setItem('theme', 'dark');
+        }
+        else {
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem('theme', 'light');
+        }
+    };
+    return (_jsx(Button, { variant: "ghost", size: "icon", onClick: toggleTheme, style: { borderRadius: 'var(--cs-border-radius-full)' }, "aria-label": `Switch to ${isDark ? 'light' : 'dark'} mode`, "aria-pressed": isDark, children: isDark ? (_jsx(Sun, { style: { width: 'var(--button-icon-size)', height: 'var(--button-icon-size)' } })) : (_jsx(Moon, { style: { width: 'var(--button-icon-size)', height: 'var(--button-icon-size)' } })) }));
+};

package/dist/components/ui/token-demo.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const TokenDemo: React.FC;
+//# sourceMappingURL=token-demo.d.ts.map

package/dist/components/ui/token-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/token-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EA2L7B,CAAC"}

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

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+;
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { useTheme } from '../../themes';
+import { createTokenManager } from '../../tokens';
+export const TokenDemo = () => {
+    const { currentTheme, currentThemeConfig } = useTheme();
+    const [tokenManager] = useState(() => createTokenManager());
+    const [exportFormat, setExportFormat] = useState('json');
+    const [exportedTokens, setExportedTokens] = useState('');
+    const [tokenStats, setTokenStats] = useState(null);
+    const generateTokens = () => {
+        if (currentThemeConfig) {
+            const tokens = tokenManager.generateTokens(currentThemeConfig);
+            const stats = tokenManager.getTokenStats();
+            setTokenStats(stats);
+            return tokens;
+        }
+        return null;
+    };
+    const exportTokens = () => {
+        if (currentThemeConfig) {
+            const tokens = tokenManager.generateTokens(currentThemeConfig);
+            const exported = tokenManager.exportTokens(tokens, exportFormat);
+            setExportedTokens(exported);
+        }
+    };
+    const exportAllFormats = () => {
+        if (currentThemeConfig) {
+            const tokens = tokenManager.generateTokens(currentThemeConfig);
+            const allFormats = ['json', 'css', 'scss', 'js', 'ts'];
+            const results = allFormats.map(format => ({
+                format,
+                content: tokenManager.exportTokens(tokens, format)
+            }));
+            const combined = results.map(r => `=== ${r.format.toUpperCase()} ===\n${r.content}\n\n`).join('');
+            setExportedTokens(combined);
+        }
+    };
+    const clearTokens = () => {
+        tokenManager.clearTokens();
+        setTokenStats(null);
+        setExportedTokens('');
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFA8 Design Token System", _jsx(Badge, { variant: "outline", children: "Story 8" })] }), _jsx(CardDescription, { children: "Generate, validate, and export design tokens from your current theme" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { onClick: generateTokens, variant: "default", children: "Generate Tokens" }), _jsxs(Button, { onClick: exportTokens, variant: "outline", children: ["Export ", exportFormat.toUpperCase()] }), _jsx(Button, { onClick: exportAllFormats, variant: "outline", children: "Export All Formats" }), _jsx(Button, { onClick: clearTokens, variant: "destructive", children: "Clear Tokens" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("label", { className: "text-sm font-medium", children: "Export Format:" }), _jsxs("select", { value: exportFormat, onChange: (e) => setExportFormat(e.target.value), className: "px-3 py-1 border rounded text-sm", children: [_jsx("option", { value: "json", children: "JSON" }), _jsx("option", { value: "css", children: "CSS" }), _jsx("option", { value: "scss", children: "SCSS" }), _jsx("option", { value: "js", children: "JavaScript" }), _jsx("option", { value: "ts", children: "TypeScript" })] })] }), tokenStats && (_jsxs("div", { className: "p-4 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-3", children: "Token Statistics" }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Total Themes:" }), _jsx("div", { className: "text-lg font-bold", children: tokenStats.totalThemes })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Total Tokens:" }), _jsx("div", { className: "text-lg font-bold", children: tokenStats.totalTokens })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Current Theme:" }), _jsx("div", { className: "text-lg font-bold", children: currentTheme })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Theme Version:" }), _jsx("div", { className: "text-lg font-bold", children: currentThemeConfig?.meta.version || 'N/A' })] })] }), tokenStats.tokenBreakdown && (_jsxs("div", { className: "mt-4", children: [_jsx("h5", { className: "font-medium mb-2", children: "Token Breakdown:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Object.entries(tokenStats.tokenBreakdown).map(([category, count]) => (_jsxs(Badge, { variant: "secondary", children: [category, ": ", count] }, category))) })] }))] }))] })] }), exportedTokens && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Exported Tokens" }), _jsxs(CardDescription, { children: ["Tokens exported in ", exportFormat.toUpperCase(), " format"] })] }), _jsx(CardContent, { children: _jsxs("div", { className: "relative", children: [_jsx(Button, { onClick: () => navigator.clipboard.writeText(exportedTokens), variant: "outline", size: "sm", className: "absolute top-2 right-2", children: "Copy" }), _jsx("pre", { className: "bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto max-h-96", children: _jsx("code", { children: exportedTokens }) })] }) })] })), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Current Theme Info" }), _jsx(CardDescription, { children: "Information about the currently active theme" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium mb-2", children: "Theme Details" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Name:" }), " ", currentThemeConfig?.meta.name] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Description:" }), " ", currentThemeConfig?.meta.description] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Category:" }), " ", currentThemeConfig?.meta.category] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Version:" }), " ", currentThemeConfig?.meta.version] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Author:" }), " ", currentThemeConfig?.meta.author] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium mb-2", children: "Font Configuration" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Primary:" }), " ", currentThemeConfig?.fonts.primary.family] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Secondary:" }), " ", currentThemeConfig?.fonts.secondary.family] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Display:" }), " ", currentThemeConfig?.fonts.display.family] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Body:" }), " ", currentThemeConfig?.fonts.body.family] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Mono:" }), " ", currentThemeConfig?.fonts.mono.family] })] })] })] }) })] })] }));
+};

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

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+;
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { useTheme } from '../../themes';
+import { createTokenManager } from '../../tokens';
+export const TokenDemo = () => {
+    const { currentTheme, currentThemeConfig } = useTheme();
+    const [tokenManager] = useState(() => createTokenManager());
+    const [exportFormat, setExportFormat] = useState('json');
+    const [exportedTokens, setExportedTokens] = useState('');
+    const [tokenStats, setTokenStats] = useState(null);
+    const generateTokens = () => {
+        if (currentThemeConfig) {
+            const tokens = tokenManager.generateTokens(currentThemeConfig);
+            const stats = tokenManager.getTokenStats();
+            setTokenStats(stats);
+            return tokens;
+        }
+        return null;
+    };
+    const exportTokens = () => {
+        if (currentThemeConfig) {
+            const tokens = tokenManager.generateTokens(currentThemeConfig);
+            const exported = tokenManager.exportTokens(tokens, exportFormat);
+            setExportedTokens(exported);
+        }
+    };
+    const exportAllFormats = () => {
+        if (currentThemeConfig) {
+            const tokens = tokenManager.generateTokens(currentThemeConfig);
+            const allFormats = ['json', 'css', 'scss', 'js', 'ts'];
+            const results = allFormats.map(format => ({
+                format,
+                content: tokenManager.exportTokens(tokens, format)
+            }));
+            const combined = results.map(r => `=== ${r.format.toUpperCase()} ===\n${r.content}\n\n`).join('');
+            setExportedTokens(combined);
+        }
+    };
+    const clearTokens = () => {
+        tokenManager.clearTokens();
+        setTokenStats(null);
+        setExportedTokens('');
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFA8 Design Token System", _jsx(Badge, { variant: "outline", children: "Story 8" })] }), _jsx(CardDescription, { children: "Generate, validate, and export design tokens from your current theme" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { onClick: generateTokens, variant: "default", children: "Generate Tokens" }), _jsxs(Button, { onClick: exportTokens, variant: "outline", children: ["Export ", exportFormat.toUpperCase()] }), _jsx(Button, { onClick: exportAllFormats, variant: "outline", children: "Export All Formats" }), _jsx(Button, { onClick: clearTokens, variant: "destructive", children: "Clear Tokens" })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("label", { className: "text-sm font-medium", children: "Export Format:" }), _jsxs("select", { value: exportFormat, onChange: (e) => setExportFormat(e.target.value), className: "px-3 py-1 border rounded text-sm", children: [_jsx("option", { value: "json", children: "JSON" }), _jsx("option", { value: "css", children: "CSS" }), _jsx("option", { value: "scss", children: "SCSS" }), _jsx("option", { value: "js", children: "JavaScript" }), _jsx("option", { value: "ts", children: "TypeScript" })] })] }), tokenStats && (_jsxs("div", { className: "p-4 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [_jsx("h4", { className: "font-semibold mb-3", children: "Token Statistics" }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Total Themes:" }), _jsx("div", { className: "text-lg font-bold", children: tokenStats.totalThemes })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Total Tokens:" }), _jsx("div", { className: "text-lg font-bold", children: tokenStats.totalTokens })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Current Theme:" }), _jsx("div", { className: "text-lg font-bold", children: currentTheme })] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Theme Version:" }), _jsx("div", { className: "text-lg font-bold", children: currentThemeConfig?.meta.version || 'N/A' })] })] }), tokenStats.tokenBreakdown && (_jsxs("div", { className: "mt-4", children: [_jsx("h5", { className: "font-medium mb-2", children: "Token Breakdown:" }), _jsx("div", { className: "flex flex-wrap gap-2", children: Object.entries(tokenStats.tokenBreakdown).map(([category, count]) => (_jsxs(Badge, { variant: "secondary", children: [category, ": ", count] }, category))) })] }))] }))] })] }), exportedTokens && (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Exported Tokens" }), _jsxs(CardDescription, { children: ["Tokens exported in ", exportFormat.toUpperCase(), " format"] })] }), _jsx(CardContent, { children: _jsxs("div", { className: "relative", children: [_jsx(Button, { onClick: () => navigator.clipboard.writeText(exportedTokens), variant: "outline", size: "sm", className: "absolute top-2 right-2", children: "Copy" }), _jsx("pre", { className: "bg-gray-900 text-green-400 p-4 rounded-lg text-sm overflow-x-auto max-h-96", children: _jsx("code", { children: exportedTokens }) })] }) })] })), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Current Theme Info" }), _jsx(CardDescription, { children: "Information about the currently active theme" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium mb-2", children: "Theme Details" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Name:" }), " ", currentThemeConfig?.meta.name] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Description:" }), " ", currentThemeConfig?.meta.description] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Category:" }), " ", currentThemeConfig?.meta.category] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Version:" }), " ", currentThemeConfig?.meta.version] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Author:" }), " ", currentThemeConfig?.meta.author] })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium mb-2", children: "Font Configuration" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Primary:" }), " ", currentThemeConfig?.fonts.primary.family] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Secondary:" }), " ", currentThemeConfig?.fonts.secondary.family] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Display:" }), " ", currentThemeConfig?.fonts.display.family] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Body:" }), " ", currentThemeConfig?.fonts.body.family] }), _jsxs("div", { children: [_jsx("span", { className: "font-medium", children: "Mono:" }), " ", currentThemeConfig?.fonts.mono.family] })] })] })] }) })] })] }));
+};

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const TouchDemo: React.FC;
+//# sourceMappingURL=touch-demo.d.ts.map

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

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

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

@@ -0,0 +1,97 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } 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 { useGestures, useTouchOptimization, useMobileTouch } from '../../hooks';
+import { useDevice } from '../../hooks/use-device.js';
+export const TouchDemo = () => {
+    const [activeTab, setActiveTab] = useState('overview');
+    const [gestureHistory, setGestureHistory] = useState([]);
+    const [touchFeedback, setTouchFeedback] = useState('');
+    const gestureElementRef = useRef(null);
+    const optimizationElementRef = useRef(null);
+    const mobileTouchElementRef = useRef(null);
+    const device = useDevice();
+    // Gesture recognition hook
+    const { isGestureActive, currentGestureType, resetGestureState } = useGestures(gestureElementRef, {
+        onSwipe: (gesture) => {
+            const gestureInfo = {
+                type: 'Swipe',
+                details: `${gesture.direction} - ${gesture.distance.toFixed(0)}px, ${gesture.velocity.toFixed(1)}px/ms`,
+                timestamp: new Date()
+            };
+            setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)]);
+        },
+        onPinch: (gesture) => {
+            const gestureInfo = {
+                type: 'Pinch',
+                details: `Scale: ${gesture.scale.toFixed(2)}, Distance: ${gesture.distance.toFixed(0)}px`,
+                timestamp: new Date()
+            };
+            setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)]);
+        },
+        onTap: (position) => {
+            const gestureInfo = {
+                type: 'Tap',
+                details: `Position: (${position.x}, ${position.y})`,
+                timestamp: new Date()
+            };
+            setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)]);
+        },
+        onLongPress: (position) => {
+            const gestureInfo = {
+                type: 'Long Press',
+                details: `Position: (${position.x}, ${position.y})`,
+                timestamp: new Date()
+            };
+            setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)]);
+        }
+    });
+    // Touch optimization hook
+    const { optimizationState, performanceMetrics, applyOptimizations, resetOptimizations } = useTouchOptimization(optimizationElementRef, {
+        onTouchPerformanceWarning: (metrics) => {
+            console.warn('Touch performance warning:', metrics);
+        },
+        onBatteryOptimization: (enabled) => {
+            console.log('Battery optimization:', enabled ? 'enabled' : 'disabled');
+        }
+    });
+    // Mobile touch hook
+    const { mobileTouchState, clearAllGestureHints, getTouchFeedbackClasses } = useMobileTouch(mobileTouchElementRef, {
+        onTouchFeedback: (state) => {
+            setTouchFeedback(`${state.feedbackType} feedback - ${state.feedbackIntensity} intensity`);
+        },
+        onGestureHint: (hint) => {
+            console.log('Gesture hint:', hint);
+        }
+    });
+    const clearGestureHistory = () => {
+        setGestureHistory([]);
+        resetGestureState();
+    };
+    const getPerformanceScoreColor = (score) => {
+        switch (score) {
+            case 'excellent': return 'text-green-600';
+            case 'good': return 'text-blue-600';
+            case 'fair': return 'text-yellow-600';
+            case 'poor': return 'text-red-600';
+            default: return 'text-gray-600';
+        }
+    };
+    const getBatteryImpactColor = (impact) => {
+        switch (impact) {
+            case 'low': return 'text-green-600';
+            case 'medium': return 'text-yellow-600';
+            case 'high': return 'text-red-600';
+            default: return 'text-gray-600';
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: [
+                    { id: 'overview', label: 'Overview', icon: '📱' },
+                    { id: 'gestures', label: 'Gesture Recognition', icon: '👆' },
+                    { id: 'optimization', label: 'Touch Optimization', icon: '⚡' },
+                    { id: 'mobile', label: 'Mobile Touch', icon: '📱' }
+                ].map((tab) => (_jsxs(Button, { variant: activeTab === tab.id ? 'default' : 'outline', size: "sm", onClick: () => setActiveTab(tab.id), className: "touch-button", children: [tab.icon, " ", tab.label] }, tab.id))) }), activeTab === 'overview' && (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { className: "touch-card", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAF Touch Optimization & Gesture Support", _jsx(Badge, { variant: "outline", children: "Story 5 Implementation" })] }), _jsx(CardDescription, { children: "Comprehensive touch optimization system with gesture recognition, performance monitoring, and mobile-first interactions" })] }), _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-2", children: [_jsx("h4", { className: "font-semibold", children: "Device Information" }), _jsxs("div", { className: "text-sm space-y-1", children: [_jsxs("p", { children: ["Screen Size: ", _jsx(Badge, { variant: "secondary", children: device.screenSize })] }), _jsxs("p", { children: ["Touch Device: ", _jsx(Badge, { variant: "secondary", children: device.touchDevice ? 'Yes' : 'No' })] }), _jsxs("p", { children: ["Orientation: ", _jsx(Badge, { variant: "secondary", children: device.orientation })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-semibold", children: "Touch Capabilities" }), _jsxs("div", { className: "text-sm space-y-1", children: [_jsxs("p", { children: ["Max Touch Points: ", _jsx(Badge, { variant: "secondary", children: mobileTouchState.deviceCapabilities.maxTouchPoints })] }), _jsxs("p", { children: ["Haptic Support: ", _jsx(Badge, { variant: "secondary", children: mobileTouchState.deviceCapabilities.supportsHaptics ? 'Yes' : 'No' })] }), _jsxs("p", { children: ["Audio Support: ", _jsx(Badge, { variant: "secondary", children: mobileTouchState.deviceCapabilities.supportsAudio ? 'Yes' : 'No' })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDC46" }), _jsx("h4", { className: "font-semibold", children: "Gesture Recognition" }), _jsx("p", { className: "text-sm text-gray-600", children: "Swipe, pinch, tap, and long press detection" })] }), _jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\u26A1" }), _jsx("h4", { className: "font-semibold", children: "Performance Optimization" }), _jsx("p", { className: "text-sm text-gray-600", children: "Touch event optimization and battery awareness" })] }), _jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDCF1" }), _jsx("h4", { className: "font-semibold", children: "Mobile Touch" }), _jsx("p", { className: "text-sm text-gray-600", children: "Touch feedback, haptics, and gesture hints" })] })] })] })] }) })), activeTab === 'gestures' && (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { className: "touch-card", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDC46 Gesture Recognition", _jsx(Badge, { variant: isGestureActive ? 'default' : 'secondary', children: isGestureActive ? 'Active' : 'Inactive' })] }), _jsx(CardDescription, { children: "Test gesture recognition on the interactive area below. Try swiping, pinching, tapping, and long pressing." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: resetGestureState, variant: "outline", size: "sm", children: "Reset Gestures" }), _jsx(Button, { onClick: clearGestureHistory, variant: "outline", size: "sm", children: "Clear History" })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [_jsx("div", { ref: gestureElementRef, className: "min-h-[300px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target", style: { touchAction: 'manipulation' }, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDC46" }), _jsx("p", { className: "font-medium", children: "Gesture Test Area" }), _jsx("p", { className: "text-sm text-gray-600", children: currentGestureType !== 'none' ? `Current: ${currentGestureType}` : 'Touch to start' }), _jsx("p", { className: "text-xs text-gray-500 mt-2", children: "Swipe, pinch, tap, or long press here" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-semibold", children: "Gesture History" }), _jsx("div", { className: "max-h-[300px] overflow-y-auto space-y-2", children: gestureHistory.length === 0 ? (_jsx("p", { className: "text-gray-500 text-sm", children: "No gestures detected yet" })) : (gestureHistory.map((gesture, index) => (_jsxs("div", { className: "p-2 bg-gray-50 rounded text-sm", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsx("span", { className: "font-medium", children: gesture.type }), _jsx("span", { className: "text-xs text-gray-500", children: gesture.timestamp.toLocaleTimeString() })] }), _jsx("p", { className: "text-gray-600", children: gesture.details })] }, index)))) })] })] })] })] }) })), activeTab === 'optimization' && (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { className: "touch-card", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\u26A1 Touch Optimization", _jsx(Badge, { variant: optimizationState.isOptimized ? 'default' : 'secondary', children: optimizationState.isOptimized ? 'Optimized' : 'Not Optimized' })] }), _jsx(CardDescription, { children: "Monitor touch performance and apply optimizations for better user experience." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: applyOptimizations, variant: "default", size: "sm", children: "Apply Optimizations" }), _jsx(Button, { onClick: resetOptimizations, variant: "outline", size: "sm", children: "Reset Optimizations" })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Optimization Status" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Action:" }), _jsx(Badge, { variant: "outline", children: optimizationState.currentTouchAction })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Passive Listeners:" }), _jsx(Badge, { variant: optimizationState.passiveListenersEnabled ? 'default' : 'secondary', children: optimizationState.passiveListenersEnabled ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Battery Optimization:" }), _jsx(Badge, { variant: optimizationState.batteryOptimizationEnabled ? 'default' : 'secondary', children: optimizationState.batteryOptimizationEnabled ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Throttling:" }), _jsx(Badge, { variant: optimizationState.throttlingEnabled ? 'default' : 'secondary', children: optimizationState.throttlingEnabled ? 'Enabled' : 'Disabled' })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Performance Metrics" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Events:" }), _jsx("span", { children: performanceMetrics.touchEventCount })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Avg Duration:" }), _jsxs("span", { children: [performanceMetrics.averageTouchDuration.toFixed(1), "ms"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Latency:" }), _jsxs("span", { children: [performanceMetrics.touchEventLatency.toFixed(1), "ms"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Performance:" }), _jsx("span", { className: getPerformanceScoreColor(performanceMetrics.performanceScore), children: performanceMetrics.performanceScore })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Battery Impact:" }), _jsx("span", { className: getBatteryImpactColor(performanceMetrics.batteryImpact), children: performanceMetrics.batteryImpact })] })] })] })] }), _jsx("div", { ref: optimizationElementRef, className: "min-h-[200px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target", style: { touchAction: optimizationState.currentTouchAction }, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\u26A1" }), _jsx("p", { className: "font-medium", children: "Optimization Test Area" }), _jsx("p", { className: "text-sm text-gray-600", children: "Touch here to test optimizations" })] }) })] })] }) })), activeTab === 'mobile' && (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { className: "touch-card", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDCF1 Mobile Touch Behaviors", _jsx(Badge, { variant: mobileTouchState.isActive ? 'default' : 'secondary', children: mobileTouchState.isActive ? 'Active' : 'Inactive' })] }), _jsx(CardDescription, { children: "Experience mobile touch feedback, haptics, and gesture hints." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("div", { className: "flex gap-2", children: _jsx(Button, { onClick: clearAllGestureHints, variant: "outline", size: "sm", children: "Clear Hints" }) }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Touch Feedback Status" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Count:" }), _jsx(Badge, { variant: "outline", children: mobileTouchState.touchCount })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Feedback Type:" }), _jsx(Badge, { variant: "outline", children: mobileTouchState.currentFeedback.feedbackType })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Intensity:" }), _jsx(Badge, { variant: "outline", children: mobileTouchState.currentFeedback.feedbackIntensity })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Active Hints:" }), _jsx(Badge, { variant: "outline", children: mobileTouchState.activeGestureHints.length })] })] }), touchFeedback && (_jsx("div", { className: "p-2 bg-blue-50 border border-blue-200 rounded text-sm", children: touchFeedback }))] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Active Gesture Hints" }), _jsx("div", { className: "max-h-[200px] overflow-y-auto space-y-2", children: mobileTouchState.activeGestureHints.length === 0 ? (_jsx("p", { className: "text-gray-500 text-sm", children: "No active hints" })) : (mobileTouchState.activeGestureHints.map((hint, index) => (_jsxs("div", { className: "p-2 bg-yellow-50 border border-yellow-200 rounded text-sm", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsx("span", { className: "font-medium", children: hint.type }), _jsx("span", { className: "text-xs text-gray-500", children: new Date(hint.timeout).toLocaleTimeString() })] }), _jsx("p", { className: "text-gray-600", children: hint.message })] }, index)))) })] })] }), _jsx("div", { ref: mobileTouchElementRef, className: `min-h-[300px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target ${getTouchFeedbackClasses()}`, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCF1" }), _jsx("p", { className: "font-medium", children: "Mobile Touch Test Area" }), _jsx("p", { className: "text-sm text-gray-600", children: mobileTouchState.isActive ? 'Touch active' : 'Touch to start' }), _jsx("p", { className: "text-xs text-gray-500 mt-2", children: "Experience haptic feedback and touch sounds" })] }) })] })] }) }))] }));
+};

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

@@ -0,0 +1,97 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } 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 { useGestures, useTouchOptimization, useMobileTouch } from '../../hooks';
+import { useDevice } from '../../hooks/use-device.js';
+export const TouchDemo = () => {
+    const [activeTab, setActiveTab] = useState('overview');
+    const [gestureHistory, setGestureHistory] = useState([]);
+    const [touchFeedback, setTouchFeedback] = useState('');
+    const gestureElementRef = useRef(null);
+    const optimizationElementRef = useRef(null);
+    const mobileTouchElementRef = useRef(null);
+    const device = useDevice();
+    // Gesture recognition hook
+    const { isGestureActive, currentGestureType, resetGestureState } = useGestures(gestureElementRef, {
+        onSwipe: (gesture) => {
+            const gestureInfo = {
+                type: 'Swipe',
+                details: `${gesture.direction} - ${gesture.distance.toFixed(0)}px, ${gesture.velocity.toFixed(1)}px/ms`,
+                timestamp: new Date()
+            };
+            setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)]);
+        },
+        onPinch: (gesture) => {
+            const gestureInfo = {
+                type: 'Pinch',
+                details: `Scale: ${gesture.scale.toFixed(2)}, Distance: ${gesture.distance.toFixed(0)}px`,
+                timestamp: new Date()
+            };
+            setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)]);
+        },
+        onTap: (position) => {
+            const gestureInfo = {
+                type: 'Tap',
+                details: `Position: (${position.x}, ${position.y})`,
+                timestamp: new Date()
+            };
+            setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)]);
+        },
+        onLongPress: (position) => {
+            const gestureInfo = {
+                type: 'Long Press',
+                details: `Position: (${position.x}, ${position.y})`,
+                timestamp: new Date()
+            };
+            setGestureHistory(prev => [gestureInfo, ...prev.slice(0, 9)]);
+        }
+    });
+    // Touch optimization hook
+    const { optimizationState, performanceMetrics, applyOptimizations, resetOptimizations } = useTouchOptimization(optimizationElementRef, {
+        onTouchPerformanceWarning: (metrics) => {
+            console.warn('Touch performance warning:', metrics);
+        },
+        onBatteryOptimization: (enabled) => {
+            console.log('Battery optimization:', enabled ? 'enabled' : 'disabled');
+        }
+    });
+    // Mobile touch hook
+    const { mobileTouchState, clearAllGestureHints, getTouchFeedbackClasses } = useMobileTouch(mobileTouchElementRef, {
+        onTouchFeedback: (state) => {
+            setTouchFeedback(`${state.feedbackType} feedback - ${state.feedbackIntensity} intensity`);
+        },
+        onGestureHint: (hint) => {
+            console.log('Gesture hint:', hint);
+        }
+    });
+    const clearGestureHistory = () => {
+        setGestureHistory([]);
+        resetGestureState();
+    };
+    const getPerformanceScoreColor = (score) => {
+        switch (score) {
+            case 'excellent': return 'text-green-600';
+            case 'good': return 'text-blue-600';
+            case 'fair': return 'text-yellow-600';
+            case 'poor': return 'text-red-600';
+            default: return 'text-gray-600';
+        }
+    };
+    const getBatteryImpactColor = (impact) => {
+        switch (impact) {
+            case 'low': return 'text-green-600';
+            case 'medium': return 'text-yellow-600';
+            case 'high': return 'text-red-600';
+            default: return 'text-gray-600';
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx("div", { className: "flex flex-wrap gap-2", children: [
+                    { id: 'overview', label: 'Overview', icon: '📱' },
+                    { id: 'gestures', label: 'Gesture Recognition', icon: '👆' },
+                    { id: 'optimization', label: 'Touch Optimization', icon: '⚡' },
+                    { id: 'mobile', label: 'Mobile Touch', icon: '📱' }
+                ].map((tab) => (_jsxs(Button, { variant: activeTab === tab.id ? 'default' : 'outline', size: "sm", onClick: () => setActiveTab(tab.id), className: "touch-button", children: [tab.icon, " ", tab.label] }, tab.id))) }), activeTab === 'overview' && (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { className: "touch-card", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83C\uDFAF Touch Optimization & Gesture Support", _jsx(Badge, { variant: "outline", children: "Story 5 Implementation" })] }), _jsx(CardDescription, { children: "Comprehensive touch optimization system with gesture recognition, performance monitoring, and mobile-first interactions" })] }), _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-2", children: [_jsx("h4", { className: "font-semibold", children: "Device Information" }), _jsxs("div", { className: "text-sm space-y-1", children: [_jsxs("p", { children: ["Screen Size: ", _jsx(Badge, { variant: "secondary", children: device.screenSize })] }), _jsxs("p", { children: ["Touch Device: ", _jsx(Badge, { variant: "secondary", children: device.touchDevice ? 'Yes' : 'No' })] }), _jsxs("p", { children: ["Orientation: ", _jsx(Badge, { variant: "secondary", children: device.orientation })] })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-semibold", children: "Touch Capabilities" }), _jsxs("div", { className: "text-sm space-y-1", children: [_jsxs("p", { children: ["Max Touch Points: ", _jsx(Badge, { variant: "secondary", children: mobileTouchState.deviceCapabilities.maxTouchPoints })] }), _jsxs("p", { children: ["Haptic Support: ", _jsx(Badge, { variant: "secondary", children: mobileTouchState.deviceCapabilities.supportsHaptics ? 'Yes' : 'No' })] }), _jsxs("p", { children: ["Audio Support: ", _jsx(Badge, { variant: "secondary", children: mobileTouchState.deviceCapabilities.supportsAudio ? 'Yes' : 'No' })] })] })] })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDC46" }), _jsx("h4", { className: "font-semibold", children: "Gesture Recognition" }), _jsx("p", { className: "text-sm text-gray-600", children: "Swipe, pinch, tap, and long press detection" })] }), _jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\u26A1" }), _jsx("h4", { className: "font-semibold", children: "Performance Optimization" }), _jsx("p", { className: "text-sm text-gray-600", children: "Touch event optimization and battery awareness" })] }), _jsxs("div", { className: "text-center p-4 bg-gray-50 rounded-lg", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDCF1" }), _jsx("h4", { className: "font-semibold", children: "Mobile Touch" }), _jsx("p", { className: "text-sm text-gray-600", children: "Touch feedback, haptics, and gesture hints" })] })] })] })] }) })), activeTab === 'gestures' && (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { className: "touch-card", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDC46 Gesture Recognition", _jsx(Badge, { variant: isGestureActive ? 'default' : 'secondary', children: isGestureActive ? 'Active' : 'Inactive' })] }), _jsx(CardDescription, { children: "Test gesture recognition on the interactive area below. Try swiping, pinching, tapping, and long pressing." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: resetGestureState, variant: "outline", size: "sm", children: "Reset Gestures" }), _jsx(Button, { onClick: clearGestureHistory, variant: "outline", size: "sm", children: "Clear History" })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [_jsx("div", { ref: gestureElementRef, className: "min-h-[300px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target", style: { touchAction: 'manipulation' }, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDC46" }), _jsx("p", { className: "font-medium", children: "Gesture Test Area" }), _jsx("p", { className: "text-sm text-gray-600", children: currentGestureType !== 'none' ? `Current: ${currentGestureType}` : 'Touch to start' }), _jsx("p", { className: "text-xs text-gray-500 mt-2", children: "Swipe, pinch, tap, or long press here" })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsx("h4", { className: "font-semibold", children: "Gesture History" }), _jsx("div", { className: "max-h-[300px] overflow-y-auto space-y-2", children: gestureHistory.length === 0 ? (_jsx("p", { className: "text-gray-500 text-sm", children: "No gestures detected yet" })) : (gestureHistory.map((gesture, index) => (_jsxs("div", { className: "p-2 bg-gray-50 rounded text-sm", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsx("span", { className: "font-medium", children: gesture.type }), _jsx("span", { className: "text-xs text-gray-500", children: gesture.timestamp.toLocaleTimeString() })] }), _jsx("p", { className: "text-gray-600", children: gesture.details })] }, index)))) })] })] })] })] }) })), activeTab === 'optimization' && (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { className: "touch-card", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\u26A1 Touch Optimization", _jsx(Badge, { variant: optimizationState.isOptimized ? 'default' : 'secondary', children: optimizationState.isOptimized ? 'Optimized' : 'Not Optimized' })] }), _jsx(CardDescription, { children: "Monitor touch performance and apply optimizations for better user experience." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: applyOptimizations, variant: "default", size: "sm", children: "Apply Optimizations" }), _jsx(Button, { onClick: resetOptimizations, variant: "outline", size: "sm", children: "Reset Optimizations" })] }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Optimization Status" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Action:" }), _jsx(Badge, { variant: "outline", children: optimizationState.currentTouchAction })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Passive Listeners:" }), _jsx(Badge, { variant: optimizationState.passiveListenersEnabled ? 'default' : 'secondary', children: optimizationState.passiveListenersEnabled ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Battery Optimization:" }), _jsx(Badge, { variant: optimizationState.batteryOptimizationEnabled ? 'default' : 'secondary', children: optimizationState.batteryOptimizationEnabled ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Throttling:" }), _jsx(Badge, { variant: optimizationState.throttlingEnabled ? 'default' : 'secondary', children: optimizationState.throttlingEnabled ? 'Enabled' : 'Disabled' })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Performance Metrics" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Events:" }), _jsx("span", { children: performanceMetrics.touchEventCount })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Avg Duration:" }), _jsxs("span", { children: [performanceMetrics.averageTouchDuration.toFixed(1), "ms"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Latency:" }), _jsxs("span", { children: [performanceMetrics.touchEventLatency.toFixed(1), "ms"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Performance:" }), _jsx("span", { className: getPerformanceScoreColor(performanceMetrics.performanceScore), children: performanceMetrics.performanceScore })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Battery Impact:" }), _jsx("span", { className: getBatteryImpactColor(performanceMetrics.batteryImpact), children: performanceMetrics.batteryImpact })] })] })] })] }), _jsx("div", { ref: optimizationElementRef, className: "min-h-[200px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target", style: { touchAction: optimizationState.currentTouchAction }, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\u26A1" }), _jsx("p", { className: "font-medium", children: "Optimization Test Area" }), _jsx("p", { className: "text-sm text-gray-600", children: "Touch here to test optimizations" })] }) })] })] }) })), activeTab === 'mobile' && (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { className: "touch-card", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: ["\uD83D\uDCF1 Mobile Touch Behaviors", _jsx(Badge, { variant: mobileTouchState.isActive ? 'default' : 'secondary', children: mobileTouchState.isActive ? 'Active' : 'Inactive' })] }), _jsx(CardDescription, { children: "Experience mobile touch feedback, haptics, and gesture hints." })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx("div", { className: "flex gap-2", children: _jsx(Button, { onClick: clearAllGestureHints, variant: "outline", size: "sm", children: "Clear Hints" }) }), _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Touch Feedback Status" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Touch Count:" }), _jsx(Badge, { variant: "outline", children: mobileTouchState.touchCount })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Feedback Type:" }), _jsx(Badge, { variant: "outline", children: mobileTouchState.currentFeedback.feedbackType })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Intensity:" }), _jsx(Badge, { variant: "outline", children: mobileTouchState.currentFeedback.feedbackIntensity })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { children: "Active Hints:" }), _jsx(Badge, { variant: "outline", children: mobileTouchState.activeGestureHints.length })] })] }), touchFeedback && (_jsx("div", { className: "p-2 bg-blue-50 border border-blue-200 rounded text-sm", children: touchFeedback }))] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-semibold", children: "Active Gesture Hints" }), _jsx("div", { className: "max-h-[200px] overflow-y-auto space-y-2", children: mobileTouchState.activeGestureHints.length === 0 ? (_jsx("p", { className: "text-gray-500 text-sm", children: "No active hints" })) : (mobileTouchState.activeGestureHints.map((hint, index) => (_jsxs("div", { className: "p-2 bg-yellow-50 border border-yellow-200 rounded text-sm", children: [_jsxs("div", { className: "flex justify-between items-start", children: [_jsx("span", { className: "font-medium", children: hint.type }), _jsx("span", { className: "text-xs text-gray-500", children: new Date(hint.timeout).toLocaleTimeString() })] }), _jsx("p", { className: "text-gray-600", children: hint.message })] }, index)))) })] })] }), _jsx("div", { ref: mobileTouchElementRef, className: `min-h-[300px] border-2 border-dashed border-gray-300 rounded-lg p-4 flex items-center justify-center bg-gray-50 touch-target ${getTouchFeedbackClasses()}`, children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-4xl mb-2", children: "\uD83D\uDCF1" }), _jsx("p", { className: "font-medium", children: "Mobile Touch Test Area" }), _jsx("p", { className: "text-sm text-gray-600", children: mobileTouchState.isActive ? 'Touch active' : 'Touch to start' }), _jsx("p", { className: "text-xs text-gray-500 mt-2", children: "Experience haptic feedback and touch sounds" })] }) })] })] }) }))] }));
+};

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const TouchFriendlyInterfaceDemo: React.FC;
+//# sourceMappingURL=touch-friendly-interface-demo.d.ts.map

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

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