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

package/dist/components/ui/semantic-input-system-demo.js

@@ -10,49 +10,55 @@ import { useTouchFriendlyInput } from '../../hooks/use-touch-friendly-input'
 import { useInputPerformance } from '../../hooks/use-input-performance'
 import { useInputAccessibility } from '../../hooks/use-input-accessibility'
 
-export const SemanticInputSystemDemo= () => {
+export const SemanticInputSystemDemo: React.FC = () => {
   const [activeDemo, setActiveDemo] = useState<'semantic' | 'mobile' | 'touch' | 'performance' | 'accessibility'>('semantic')
   const [formData, setFormData] = useState({
-    name,
-    email,
-    phone,
-    creditCard,
-    amount,
-    search})
+    name: '',
+    email: '',
+    phone: '',
+    creditCard: '',
+    amount: '',
+    search: ''
+  })
 
   // Initialize hooks with proper interfaces
   const { semanticState, detectInputType, optimizeKeyboard } = useSemanticInput(
-    { type, autocomplete, inputMode, keyboardType},
+    { type: 'text', autocomplete: 'on', inputMode: 'text', keyboardType: 'default' },
     {},
     {
-      enableAutoDetection,
-      enableKeyboardOptimization,
-      enableAutocomplete}
+      enableAutoDetection: true,
+      enableKeyboardOptimization: true,
+      enableAutocomplete: true
+    }
   )
 
   const { keyboardState, optimizations, autoOptimizeForInputType } = useMobileKeyboardOptimization({
-    enableKeyboardDetection,
-    enablePerformanceMonitoring,
-    enableBatteryOptimization})
+    enableKeyboardDetection: true,
+    enablePerformanceMonitoring: true,
+    enableBatteryOptimization: true
+  })
 
   const { touchState, touchOptimizations, autoOptimizeTouch } = useTouchFriendlyInput({
-    enableTouchOptimization,
-    enablePerformanceMonitoring,
-    enableAccessibilitySupport})
+    enableTouchOptimization: true,
+    enablePerformanceMonitoring: true,
+    enableAccessibilitySupport: true
+  })
 
   const { performanceMetrics, autoOptimize } = useInputPerformance({
-    enablePerformanceMonitoring,
-    enableMemoryManagement,
-    enableBatteryOptimization})
+    enablePerformanceMonitoring: true,
+    enableMemoryManagement: true,
+    enableBatteryOptimization: true
+  })
 
   const { accessibilityFeatures, enableARIASupport } = useInputAccessibility({
-    enableARIA,
-    enableKeyboardNavigation,
-    enableScreenReader,
-    enableFocusManagement})
-
-  const handleInputChange = (field, value) => {
-    setFormData(prev => ({ ...prev, [field]}))
+    enableARIA: true,
+    enableKeyboardNavigation: true,
+    enableScreenReader: true,
+    enableFocusManagement: true
+  })
+
+  const handleInputChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }))
     
     // Detect semantic type and optimize
     const detectedType = detectInputType(value, field)
@@ -62,16 +68,25 @@ export const SemanticInputSystemDemo= () => {
     }
   }
 
-  const handleDemoChange = (demo) => {
+  const handleDemoChange = (demo: typeof activeDemo) => {
     setActiveDemo(demo)
     
     // Start relevant monitoring for the selected demo
     switch (demo) {
-      case 'semantic')
+      case 'semantic':
+        break
+      case 'mobile':
+        // Mobile keyboard detection is already running
         break
-      case 'performance')
+      case 'touch':
+        autoOptimizeTouch()
         break
-      case 'accessibility'=== 'function') {
+      case 'performance':
+        autoOptimize()
+        break
+      case 'accessibility':
+        // Call functions safely - simplified to avoid type issues
+        if (typeof enableARIASupport === 'function') {
           enableARIASupport()
         }
         break
@@ -80,7 +95,8 @@ export const SemanticInputSystemDemo= () => {
 
   const renderSemanticDemo = () => (
     <div className="space-y-6">
-      <div className="grid grid-cols-1 md="space-y-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
           <Label htmlFor="name">Full Name</Label>
           <Input
             id="name"
@@ -90,7 +106,7 @@ export const SemanticInputSystemDemo= () => {
             className="semantic-input"
           />
           <div className="text-sm text-gray-600">
-            Detected Type="secondary">{semanticState.detectedType?.type || 'text'}</Badge>
+            Detected Type: <Badge variant="secondary">{semanticState.detectedType?.type || 'text'}</Badge>
           </div>
         </div>
 
@@ -105,7 +121,7 @@ export const SemanticInputSystemDemo= () => {
             className="semantic-input"
           />
           <div className="text-sm text-gray-600">
-            Keyboard="secondary">{semanticState.keyboardOptimized ? 'Optimized' }</Badge>
+            Keyboard: <Badge variant="secondary">{semanticState.keyboardOptimized ? 'Optimized' : 'Default'}</Badge>
           </div>
         </div>
 
@@ -119,7 +135,7 @@ export const SemanticInputSystemDemo= () => {
             className="semantic-input"
           />
           <div className="text-sm text-gray-600">
-            Autocomplete="secondary">{semanticState.autocompleteEnhanced ? 'Enhanced' }</Badge>
+            Autocomplete: <Badge variant="secondary">{semanticState.autocompleteEnhanced ? 'Enhanced' : 'Default'}</Badge>
           </div>
         </div>
 
@@ -133,7 +149,7 @@ export const SemanticInputSystemDemo= () => {
             className="semantic-input"
           />
           <div className="text-sm text-gray-600">
-            Touch="secondary">{semanticState.touchOptimized ? 'Optimized' }</Badge>
+            Touch: <Badge variant="secondary">{semanticState.touchOptimized ? 'Optimized' : 'Default'}</Badge>
           </div>
         </div>
 
@@ -147,7 +163,7 @@ export const SemanticInputSystemDemo= () => {
             className="semantic-input"
           />
           <div className="text-sm text-gray-600">
-            Performance="secondary">{semanticState.isOptimized ? 'Optimized' }</Badge>
+            Performance: <Badge variant="secondary">{semanticState.isOptimized ? 'Optimized' : 'Default'}</Badge>
           </div>
         </div>
 
@@ -161,7 +177,7 @@ export const SemanticInputSystemDemo= () => {
             className="semantic-input"
           />
           <div className="text-sm text-gray-600">
-            Type="secondary">{semanticState.detectedType?.type || 'text'}</Badge>
+            Type: <Badge variant="secondary">{semanticState.detectedType?.type || 'text'}</Badge>
           </div>
         </div>
       </div>
@@ -177,14 +193,15 @@ export const SemanticInputSystemDemo= () => {
 
   const renderMobileDemo = () => (
     <div className="space-y-6">
-      <div className="grid grid-cols-1 md="space-y-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
           <Label>Keyboard State</Label>
           <div className="space-y-2 text-sm">
-            <div>Visible={keyboardState.isVisible ? 'default' }>{keyboardState.isVisible ? 'Yes' }</Badge></div>
-            <div>Height}px</div>
-            <div>Type="outline">{keyboardState.type}</Badge></div>
-            <div>Platform="outline">{keyboardState.platform}</Badge></div>
-            <div>Orientation="outline">{keyboardState.orientation}</Badge></div>
+            <div>Visible: <Badge variant={keyboardState.isVisible ? 'default' : 'secondary'}>{keyboardState.isVisible ? 'Yes' : 'No'}</Badge></div>
+            <div>Height: {keyboardState.height}px</div>
+            <div>Type: <Badge variant="outline">{keyboardState.type}</Badge></div>
+            <div>Platform: <Badge variant="outline">{keyboardState.platform}</Badge></div>
+            <div>Orientation: <Badge variant="outline">{keyboardState.orientation}</Badge></div>
           </div>
         </div>
 
@@ -194,8 +211,8 @@ export const SemanticInputSystemDemo= () => {
             {optimizations.map((opt, index) => (
               <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                 <span className="text-sm">{opt.name}</span>
-                <Badge variant={opt.applied ? 'default' }>
-                  {opt.applied ? 'Applied' }
+                <Badge variant={opt.applied ? 'default' : 'secondary'}>
+                  {opt.applied ? 'Applied' : 'Pending'}
                 </Badge>
               </div>
             ))}
@@ -218,14 +235,15 @@ export const SemanticInputSystemDemo= () => {
 
   const renderTouchDemo = () => (
     <div className="space-y-6">
-      <div className="grid grid-cols-1 md="space-y-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
           <Label>Touch State</Label>
           <div className="space-y-2 text-sm">
-            <div>Touching={touchState.isTouching ? 'default' }>{touchState.isTouching ? 'Yes' }</Badge></div>
-            <div>Touch Count}</div>
-            <div>Duration}ms</div>
-            <div>Velocity)}px/ms</div>
-            <div>Gesture="outline">{touchState.gestureType}</Badge></div>
+            <div>Touching: <Badge variant={touchState.isTouching ? 'default' : 'secondary'}>{touchState.isTouching ? 'Yes' : 'No'}</Badge></div>
+            <div>Touch Count: {touchState.touchCount}</div>
+            <div>Duration: {touchState.touchDuration}ms</div>
+            <div>Velocity: {touchState.touchVelocity.toFixed(2)}px/ms</div>
+            <div>Gesture: <Badge variant="outline">{touchState.gestureType}</Badge></div>
           </div>
         </div>
 
@@ -235,8 +253,8 @@ export const SemanticInputSystemDemo= () => {
             {touchOptimizations.map((opt, index) => (
               <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                 <span className="text-sm">{opt.name}</span>
-                <Badge variant={opt.applied ? 'default' }>
-                  {opt.applied ? 'Applied' }
+                <Badge variant={opt.applied ? 'default' : 'secondary'}>
+                  {opt.applied ? 'Applied' : 'Pending'}
                 </Badge>
               </div>
             ))}
@@ -259,13 +277,14 @@ export const SemanticInputSystemDemo= () => {
 
   const renderPerformanceDemo = () => (
     <div className="space-y-6">
-      <div className="grid grid-cols-1 md="space-y-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
           <Label>Performance Metrics</Label>
           <div className="space-y-2 text-sm">
-            <div>Frame Rate} FPS</div>
-            <div>Input Latency)}ms</div>
-            <div>Memory Usage}MB</div>
-            <div>Battery Level).toFixed(1)}%</div>
+            <div>Frame Rate: {performanceMetrics.frameRate} FPS</div>
+            <div>Input Latency: {performanceMetrics.inputLatency.toFixed(2)}ms</div>
+            <div>Memory Usage: {performanceMetrics.memoryUsage}MB</div>
+            <div>Battery Level: {(performanceMetrics.batteryLevel * 100).toFixed(1)}%</div>
           </div>
         </div>
 
@@ -274,20 +293,20 @@ export const SemanticInputSystemDemo= () => {
           <div className="space-y-2">
             <div className="flex items-center justify-between">
               <span className="text-sm">Frame Rate</span>
-              <Badge variant={performanceMetrics.frameRate >= 60 ? 'default' }>
-                {performanceMetrics.frameRate >= 60 ? 'Optimal' }
+              <Badge variant={performanceMetrics.frameRate >= 60 ? 'default' : 'destructive'}>
+                {performanceMetrics.frameRate >= 60 ? 'Optimal' : 'Low'}
               </Badge>
             </div>
             <div className="flex items-center justify-between">
               <span className="text-sm">Input Latency</span>
-              <Badge variant={performanceMetrics.inputLatency < 16 ? 'default' }>
-                {performanceMetrics.inputLatency < 16 ? 'Optimal' }
+              <Badge variant={performanceMetrics.inputLatency < 16 ? 'default' : 'destructive'}>
+                {performanceMetrics.inputLatency < 16 ? 'Optimal' : 'High'}
               </Badge>
             </div>
             <div className="flex items-center justify-between">
               <span className="text-sm">Memory</span>
-              <Badge variant={performanceMetrics.memoryUsage < 100 ? 'default' }>
-                {performanceMetrics.memoryUsage < 100 ? 'Optimal' }
+              <Badge variant={performanceMetrics.memoryUsage < 100 ? 'default' : 'destructive'}>
+                {performanceMetrics.memoryUsage < 100 ? 'Optimal' : 'High'}
               </Badge>
             </div>
           </div>
@@ -309,14 +328,15 @@ export const SemanticInputSystemDemo= () => {
 
   const renderAccessibilityDemo = () => (
     <div className="space-y-6">
-      <div className="grid grid-cols-1 md="space-y-2">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="space-y-2">
           <Label>Accessibility Features</Label>
           <div className="space-y-2">
             {accessibilityFeatures.map((feature, index) => (
               <div key={index} className="flex items-center justify-between p-2 bg-gray-50 rounded">
                 <span className="text-sm">{feature.name}</span>
-                <Badge variant={feature.enabled ? 'default' }>
-                  {feature.enabled ? 'Enabled' }
+                <Badge variant={feature.enabled ? 'default' : 'secondary'}>
+                  {feature.enabled ? 'Enabled' : 'Disabled'}
                 </Badge>
               </div>
             ))}
@@ -351,7 +371,9 @@ export const SemanticInputSystemDemo= () => {
     <div className="max-w-6xl mx-auto p-6 space-y-6">
       <div className="text-center space-y-4">
         <h1 className="text-4xl font-bold text-gray-900">
-          🎯 Story 12="text-xl text-gray-600 max-w-3xl mx-auto">
+          🎯 Story 12: Semantic Input System & Mobile Keyboard Optimization
+        </h1>
+        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
           Advanced input system with semantic type detection, mobile keyboard optimization, 
           touch-friendly behavior, performance monitoring, and accessibility support.
         </p>
@@ -366,31 +388,31 @@ export const SemanticInputSystemDemo= () => {
 
       <div className="flex flex-wrap gap-2 justify-center">
         <Button
-          variant={activeDemo === 'semantic' ? 'default' }
+          variant={activeDemo === 'semantic' ? 'default' : 'outline'}
           onClick={() => handleDemoChange('semantic')}
         >
           🧠 Semantic Input
         </Button>
         <Button
-          variant={activeDemo === 'mobile' ? 'default' }
+          variant={activeDemo === 'mobile' ? 'default' : 'outline'}
           onClick={() => handleDemoChange('mobile')}
         >
           📱 Mobile Keyboard
         </Button>
         <Button
-          variant={activeDemo === 'touch' ? 'default' }
+          variant={activeDemo === 'touch' ? 'default' : 'outline'}
           onClick={() => handleDemoChange('touch')}
         >
           👆 Touch Friendly
         </Button>
         <Button
-          variant={activeDemo === 'performance' ? 'default' }
+          variant={activeDemo === 'performance' ? 'default' : 'outline'}
           onClick={() => handleDemoChange('performance')}
         >
           ⚡ Performance
         </Button>
         <Button
-          variant={activeDemo === 'accessibility' ? 'default' }
+          variant={activeDemo === 'accessibility' ? 'default' : 'outline'}
           onClick={() => handleDemoChange('accessibility')}
         >
           ♿ Accessibility
@@ -423,12 +445,24 @@ export const SemanticInputSystemDemo= () => {
         </CardContent>
       </Card>
 
-      <div className="grid grid-cols-1 md="text-lg">🎯 Next Steps</CardTitle>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">🎯 Next Steps</CardTitle>
           </CardHeader>
           <CardContent>
             <ul className="text-sm space-y-2">
-              <li>✅ Story 12]</li>
-              <li>🔧 Story 13="text-lg">🚀 Features</CardTitle>
+              <li>✅ Story 12: Semantic Input System [COMPLETE]</li>
+              <li>🔧 Story 13: Touch-Friendly Interface</li>
+              <li>🎨 Story 14: Advanced Transitions</li>
+              <li>📱 Story 15: Mobile Experience Polish</li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">🚀 Features</CardTitle>
           </CardHeader>
           <CardContent>
             <ul className="text-sm space-y-2">
@@ -448,13 +482,16 @@ export const SemanticInputSystemDemo= () => {
           <CardContent>
             <div className="space-y-2">
               <div className="flex justify-between">
-                <span className="text-sm">Components="default">6/6</Badge>
+                <span className="text-sm">Components:</span>
+                <Badge variant="default">6/6</Badge>
               </div>
               <div className="flex justify-between">
-                <span className="text-sm">Hooks="default">6/6</Badge>
+                <span className="text-sm">Hooks:</span>
+                <Badge variant="default">6/6</Badge>
               </div>
               <div className="flex justify-between">
-                <span className="text-sm">Tests="default">Passing</Badge>
+                <span className="text-sm">Tests:</span>
+                <Badge variant="default">Passing</Badge>
               </div>
             </div>
           </CardContent>

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

@@ -4,30 +4,34 @@ import { Card, CardContent, CardHeader, CardTitle } from './card';
 import { Button } from './button';
 import { Input } from './input';
 import { ThemePreview } from './theme-preview';
-
+import type { CompleteThemeConfig } from '../../themes/types';
 
 export interface ThemeCustomizerProps {
-  initialTheme?;
-  onThemeChange?) => void;
-  showPreview?;
-  allowCustomization?;
-  className?;
+  initialTheme?: string;
+  onThemeChange?: (theme: CompleteThemeConfig) => void;
+  showPreview?: boolean;
+  allowCustomization?: boolean;
+  className?: string;
 }
 
 export interface CustomizationState {
-  colors;
-    secondary;
+  colors: {
+    primary: string;
+    secondary: string;
   };
-  fonts;
-    secondary;
+  fonts: {
+    primary: string;
+    secondary: string;
   };
-  spacing;
+  spacing: {
+    scale: number;
   };
-  shadows;
+  shadows: {
+    intensity: number;
   };
 }
 
-export const ThemeCustomizer= ({
+export const ThemeCustomizer: React.FC<ThemeCustomizerProps> = ({
   initialTheme = 'stan-design',
   onThemeChange,
   showPreview = true,
@@ -36,12 +40,20 @@ export const ThemeCustomizer= ({
 }) => {
   const { getTheme } = useTheme();
   const [customizationState, setCustomizationState] = useState<CustomizationState>({
-    colors,
-      secondary},
-    fonts,
-      secondary},
-    spacing},
-    shadows}
+    colors: {
+      primary: '#3b82f6',
+      secondary: '#10b981'
+    },
+    fonts: {
+      primary: 'Inter',
+      secondary: 'Roboto'
+    },
+    spacing: {
+      scale: 1.25
+    },
+    shadows: {
+      intensity: 0.1
+    }
   });
 
   const [activeTab, setActiveTab] = useState<'colors' | 'fonts' | 'spacing' | 'shadows' | 'preview'>('colors');
@@ -55,11 +67,13 @@ export const ThemeCustomizer= ({
     }
   }, [initialTheme]); // Removed getTheme from dependencies as it's stable
 
-  const handleCustomizationChange = useCallback((key, subKey, value) => {
+  const handleCustomizationChange = useCallback((key: keyof CustomizationState, subKey: string, value: any) => {
     setCustomizationState(prev => ({
       ...prev,
-      [key]],
-        [subKey]}
+      [key]: {
+        ...prev[key],
+        [subKey]: value
+      }
     }));
   }, []);
 
@@ -67,7 +81,7 @@ export const ThemeCustomizer= ({
     if (!customTheme) return;
 
     // Create a deep copy of the current theme
-    const newTheme= JSON.parse(JSON.stringify(customTheme));
+    const newTheme: CompleteThemeConfig = JSON.parse(JSON.stringify(customTheme));
     
     // Apply customizations
     // Generate color scales based on the selected primary color
@@ -75,18 +89,18 @@ export const ThemeCustomizer= ({
     const secondaryColor = customizationState.colors.secondary;
     
     // Simple color scale generation (in a real app, you'd use a color library)
-    const generateColorScale = (baseColor) => {
+    const generateColorScale = (baseColor: string) => {
       return {
-        50}0a`,
-        100}1a`,
-        200}33`,
-        300}4d`,
-        400}66`,
-        500,
-        600}99`,
-        700}b3`,
-        800}cc`,
-        900}e6`
+        50: `${baseColor}0a`,
+        100: `${baseColor}1a`,
+        200: `${baseColor}33`,
+        300: `${baseColor}4d`,
+        400: `${baseColor}66`,
+        500: baseColor,
+        600: `${baseColor}99`,
+        700: `${baseColor}b3`,
+        800: `${baseColor}cc`,
+        900: `${baseColor}e6`
       };
     };
 
@@ -110,14 +124,14 @@ export const ThemeCustomizer= ({
     if (newTheme.spacing && newTheme.spacing.scale) {
       // This is a simplified approach - in reality you'd want to recalculate all spacing values
       // For now, we'll just note that the scale factor has changed
-      console.log('Spacing scale factor updated to, customizationState.spacing.scale);
+      console.log('Spacing scale factor updated to:', customizationState.spacing.scale);
     }
 
     // Update shadow intensity (we'll adjust the existing shadows)
     if (newTheme.shadows) {
       // This is a simplified approach - in reality you'd want to recalculate all shadow values
       // For now, we'll just note that the intensity has changed
-      console.log('Shadow intensity updated to, customizationState.shadows.intensity);
+      console.log('Shadow intensity updated to:', customizationState.shadows.intensity);
     }
 
     setCustomTheme(newTheme);
@@ -131,7 +145,7 @@ export const ThemeCustomizer= ({
     if (!customTheme) return;
     
     const themeData = JSON.stringify(customTheme, null, 2);
-    const blob = new Blob([themeData], { type});
+    const blob = new Blob([themeData], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
@@ -147,12 +161,20 @@ export const ThemeCustomizer= ({
     if (originalTheme) {
       setCustomTheme(originalTheme);
       setCustomizationState({
-        colors,
-          secondary},
-        fonts,
-          secondary},
-        spacing},
-        shadows}
+        colors: {
+          primary: '#3b82f6',
+          secondary: '#10b981'
+        },
+        fonts: {
+          primary: 'Inter',
+          secondary: 'Roboto'
+        },
+        spacing: {
+          scale: 1.25
+        },
+        shadows: {
+          intensity: 0.1
+        }
       });
     }
   }, [initialTheme, getTheme]);
@@ -172,33 +194,38 @@ export const ThemeCustomizer= ({
           <CardTitle className="flex items-center gap-2">
             🎨 Theme Customizer
           </CardTitle>
-          <p className="text-sm text-gray-600 dark}
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            Customize and preview themes in real-time
+          </p>
+        </CardHeader>
+        <CardContent>
+          {/* Tab Navigation */}
           <div className="flex space-x-1 mb-6 border-b">
             {allowCustomization && (
               <>
                 <Button
-                  variant={activeTab === 'colors' ? 'default' }
+                  variant={activeTab === 'colors' ? 'default' : 'ghost'}
                   size="sm"
                   onClick={() => setActiveTab('colors')}
                 >
                   Colors
                 </Button>
                 <Button
-                  variant={activeTab === 'fonts' ? 'default' }
+                  variant={activeTab === 'fonts' ? 'default' : 'ghost'}
                   size="sm"
                   onClick={() => setActiveTab('fonts')}
                 >
                   Fonts
                 </Button>
                 <Button
-                  variant={activeTab === 'spacing' ? 'default' }
+                  variant={activeTab === 'spacing' ? 'default' : 'ghost'}
                   size="sm"
                   onClick={() => setActiveTab('spacing')}
                 >
                   Spacing
                 </Button>
                 <Button
-                  variant={activeTab === 'shadows' ? 'default' }
+                  variant={activeTab === 'shadows' ? 'default' : 'ghost'}
                   size="sm"
                   onClick={() => setActiveTab('shadows')}
                 >
@@ -208,7 +235,7 @@ export const ThemeCustomizer= ({
             )}
             {showPreview && (
               <Button
-                variant={activeTab === 'preview' ? 'default' }
+                variant={activeTab === 'preview' ? 'default' : 'ghost'}
                 size="sm"
                 onClick={() => setActiveTab('preview')}
               >
@@ -222,7 +249,9 @@ export const ThemeCustomizer= ({
             {activeTab === 'colors' && allowCustomization && (
               <div className="space-y-4">
                 <h3 className="text-lg font-semibold">Color Customization</h3>
-                <div className="grid grid-cols-1 md="block text-sm font-medium mb-2">Primary Color</label>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Primary Color</label>
                                          <Input
                        type="color"
                        value={customizationState.colors.primary}
@@ -261,7 +290,9 @@ export const ThemeCustomizer= ({
             {activeTab === 'fonts' && allowCustomization && (
               <div className="space-y-4">
                 <h3 className="text-lg font-semibold">Font Customization</h3>
-                <div className="grid grid-cols-1 md="block text-sm font-medium mb-2">Primary Font</label>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2">Primary Font</label>
                                          <Input
                        value={customizationState.fonts.primary}
                        onChange={(e) => handleCustomizationChange('fonts', 'primary', e.target.value)}
@@ -314,7 +345,8 @@ export const ThemeCustomizer= ({
                       onChange={(e) => handleCustomizationChange('shadows', 'intensity', Number(e.target.value))}
                       className="w-full"
                     />
-                    <span className="text-sm text-gray-600 dark}
+                    <span className="text-sm text-gray-600 dark:text-gray-400">
+                      {customizationState.shadows.intensity}
                     </span>
                   </div>
                 </div>