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

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

@@ -13,7 +13,7 @@ import { useLayoutPerformance } from '../../hooks/use-layout-performance'
 import { useMobileLayout } from '../../hooks/use-mobile-layout'
 import { useTabletLayout } from '../../hooks/use-tablet-layout'
 
-export const LayoutDemo= () => {
+export const LayoutDemo: React.FC = () => {
   const [activeLayout, setActiveLayout] = useState<'mobile' | 'tablet' | 'desktop' | 'adaptive'>('adaptive')
   const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true)
   const [enableTouchOptimization, setEnableTouchOptimization] = useState(true)
@@ -21,45 +21,49 @@ export const LayoutDemo= () => {
 
   // Hooks
   useAdaptiveLayout({
-    enablePerformanceOptimization,
-    enableTouchOptimization,
-    enableBatteryOptimization,
-    enableMemoryOptimization}, {
-    onDeviceChange) => console.log('Device changed to, deviceType),
-    onOrientationChange) => console.log('Orientation changed to, orientation),
-    onPerformanceChange) => console.log('Performance score, score)
+    enablePerformanceOptimization: true,
+    enableTouchOptimization: true,
+    enableBatteryOptimization: true,
+    enableMemoryOptimization: true
+  }, {
+    onDeviceChange: (deviceType) => console.log('Device changed to:', deviceType),
+    onOrientationChange: (orientation) => console.log('Orientation changed to:', orientation),
+    onPerformanceChange: (score) => console.log('Performance score:', score)
   })
 
   const layoutPerformance = useLayoutPerformance({
-    enableLayoutCalculationOptimization,
-    enableMemoryManagement,
-    enableBatteryOptimization,
-    enablePerformanceMonitoring}, {
-    onPerformanceWarning, metrics) => console.log('Performance warning, warning, metrics),
-    onMemoryWarning, threshold) => console.log('Memory warning, usage, threshold),
-    onBatteryWarning, isLow) => console.log('Battery warning, level, isLow)
+    enableLayoutCalculationOptimization: true,
+    enableMemoryManagement: true,
+    enableBatteryOptimization: true,
+    enablePerformanceMonitoring: true
+  }, {
+    onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+    onMemoryWarning: (usage, threshold) => console.log('Memory warning:', usage, threshold),
+    onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow)
   })
 
   const mobileLayout = useMobileLayout({
-    enableTouchTargetOptimization,
-    enableGestureSupport,
-    enableTouchFeedback,
-    enablePerformanceOptimization}, {
-    onTouchTargetOptimized) => console.log('Touch target optimized, target),
-    onGestureDetected) => console.log('Gesture detected, event),
-    onTouchFeedback, target) => console.log('Touch feedback, type, target)
+    enableTouchTargetOptimization: true,
+    enableGestureSupport: true,
+    enableTouchFeedback: true,
+    enablePerformanceOptimization: true
+  }, {
+    onTouchTargetOptimized: (target) => console.log('Touch target optimized:', target),
+    onGestureDetected: (event) => console.log('Gesture detected:', event),
+    onTouchFeedback: (type, target) => console.log('Touch feedback:', type, target)
   })
 
   useTabletLayout({
-    enableOrientationOptimization,
-    enableSplitViewSupport,
-    enableKeyboardOptimization,
-    enableSafeAreaOptimization,
-    enablePerformanceOptimization,
-    enableTouchOptimization}, {
-    onOrientationChange) => console.log('Tablet orientation, orientation),
-    onSplitViewChange) => console.log('Split view, isSplitView),
-    onKeyboardChange) => console.log('Keyboard visible, isVisible)
+    enableOrientationOptimization: true,
+    enableSplitViewSupport: true,
+    enableKeyboardOptimization: true,
+    enableSafeAreaOptimization: true,
+    enablePerformanceOptimization: true,
+    enableTouchOptimization: true
+  }, {
+    onOrientationChange: (orientation) => console.log('Tablet orientation:', orientation),
+    onSplitViewChange: (isSplitView) => console.log('Split view:', isSplitView),
+    onKeyboardChange: (isVisible) => console.log('Keyboard visible:', isVisible)
   })
 
   // Layout content
@@ -67,7 +71,8 @@ export const LayoutDemo= () => {
     const commonContent = (
       <div className="space-y-6">
         {/* Feature Cards */}
-        <div className="grid grid-cols-1 md="border-2 border-cs-primary">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <Card className="border-2 border-cs-primary">
             <CardHeader className="pb-3">
               <CardTitle className="text-lg flex items-center gap-2">
                 🎨 Design System
@@ -140,7 +145,9 @@ export const LayoutDemo= () => {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-2 lg="text-2xl font-bold text-cs-primary">
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 text-center">
+                <div>
+                  <p className="text-2xl font-bold text-cs-primary">
                     {layoutPerformance.metrics.performanceScore}
                   </p>
                   <p className="text-sm text-cs-text-secondary">Performance Score</p>
@@ -179,25 +186,25 @@ export const LayoutDemo= () => {
           <CardContent className="space-y-4">
             <div className="flex flex-wrap gap-4">
               <Button
-                variant={activeLayout === 'mobile' ? 'default' }
+                variant={activeLayout === 'mobile' ? 'default' : 'outline'}
                 onClick={() => setActiveLayout('mobile')}
               >
                 📱 Mobile
               </Button>
               <Button
-                variant={activeLayout === 'tablet' ? 'default' }
+                variant={activeLayout === 'tablet' ? 'default' : 'outline'}
                 onClick={() => setActiveLayout('tablet')}
               >
                 📱 Tablet
               </Button>
               <Button
-                variant={activeLayout === 'desktop' ? 'default' }
+                variant={activeLayout === 'desktop' ? 'default' : 'outline'}
                 onClick={() => setActiveLayout('desktop')}
               >
                 💻 Desktop
               </Button>
               <Button
-                variant={activeLayout === 'adaptive' ? 'default' }
+                variant={activeLayout === 'adaptive' ? 'default' : 'outline'}
                 onClick={() => setActiveLayout('adaptive')}
               >
                 🔄 Adaptive
@@ -206,25 +213,25 @@ export const LayoutDemo= () => {
 
             <div className="flex flex-wrap gap-4">
               <Button
-                variant={showPerformanceMetrics ? 'default' }
+                variant={showPerformanceMetrics ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setShowPerformanceMetrics(!showPerformanceMetrics)}
               >
-                {showPerformanceMetrics ? 'Hide' } Performance
+                {showPerformanceMetrics ? 'Hide' : 'Show'} Performance
               </Button>
               <Button
-                variant={enableTouchOptimization ? 'default' }
+                variant={enableTouchOptimization ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setEnableTouchOptimization(!enableTouchOptimization)}
               >
-                {enableTouchOptimization ? 'Disable' } Touch
+                {enableTouchOptimization ? 'Disable' : 'Enable'} Touch
               </Button>
               <Button
-                variant={enableAdvancedFeatures ? 'default' }
+                variant={enableAdvancedFeatures ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setEnableAdvancedFeatures(!enableAdvancedFeatures)}
               >
-                {enableAdvancedFeatures ? 'Disable' } Advanced
+                {enableAdvancedFeatures ? 'Disable' : 'Enable'} Advanced
               </Button>
             </div>
           </CardContent>
@@ -241,30 +248,35 @@ export const LayoutDemo= () => {
           <CardContent>
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <span className="text-sm">Layout Performance={layoutPerformance.isPerformanceOptimal ? 'default' }>
-                  {layoutPerformance.isPerformanceOptimal ? 'Optimal' }
+                <span className="text-sm">Layout Performance:</span>
+                <Badge variant={layoutPerformance.isPerformanceOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isPerformanceOptimal ? 'Optimal' : 'Needs Optimization'}
                 </Badge>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-sm">Memory Usage={layoutPerformance.isMemoryOptimal ? 'default' }>
-                  {layoutPerformance.isMemoryOptimal ? 'Optimal' }
+                <span className="text-sm">Memory Usage:</span>
+                <Badge variant={layoutPerformance.isMemoryOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isMemoryOptimal ? 'Optimal' : 'High Usage'}
                 </Badge>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-sm">Battery Status={layoutPerformance.isBatteryOptimal ? 'default' }>
-                  {layoutPerformance.isBatteryOptimal ? 'Good' }
+                <span className="text-sm">Battery Status:</span>
+                <Badge variant={layoutPerformance.isBatteryOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isBatteryOptimal ? 'Good' : 'Low Battery'}
                 </Badge>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-sm">Touch Optimization={mobileLayout.isTouchOptimized ? 'default' }>
-                  {mobileLayout.isTouchOptimized ? 'Optimized' }
+                <span className="text-sm">Touch Optimization:</span>
+                <Badge variant={mobileLayout.isTouchOptimized ? 'default' : 'secondary'}>
+                  {mobileLayout.isTouchOptimized ? 'Optimized' : 'Needs Optimization'}
                 </Badge>
               </div>
             </div>
 
             {layoutPerformance.layoutOptimizations.length > 0 && (
               <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-                <h4 className="font-medium text-sm mb-2">Recommendations="text-xs text-cs-text-secondary space-y-1">
+                <h4 className="font-medium text-sm mb-2">Recommendations:</h4>
+                <ul className="text-xs text-cs-text-secondary space-y-1">
                   {layoutPerformance.layoutOptimizations.map((optimization, index) => (
                     <li key={index}>• {optimization}</li>
                   ))}
@@ -277,7 +289,10 @@ export const LayoutDemo= () => {
     )
 
     switch (activeLayout) {
-      case 'mobile'="Mobile Layout Demo"
+      case 'mobile':
+        return (
+          <MobileLayout
+            title="Mobile Layout Demo"
             description="Touch-optimized mobile layout with performance monitoring"
             enableTouchOptimization={enableTouchOptimization}
             enablePerformanceMonitoring={showPerformanceMetrics}
@@ -286,7 +301,10 @@ export const LayoutDemo= () => {
           </MobileLayout>
         )
       
-      case 'tablet'="Tablet Layout Demo"
+      case 'tablet':
+        return (
+          <TabletLayout
+            title="Tablet Layout Demo"
             description="Tablet-optimized layout with orientation and split view support"
             enableTouchOptimization={enableTouchOptimization}
             enablePerformanceMonitoring={showPerformanceMetrics}
@@ -295,7 +313,10 @@ export const LayoutDemo= () => {
           </TabletLayout>
         )
       
-      case 'desktop'="Desktop Layout Demo"
+      case 'desktop':
+        return (
+          <DesktopLayout
+            title="Desktop Layout Demo"
             description="Desktop-optimized layout with advanced features and performance monitoring"
             enableAdvancedFeatures={enableAdvancedFeatures}
             enablePerformanceMonitoring={showPerformanceMetrics}
@@ -304,7 +325,11 @@ export const LayoutDemo= () => {
           </DesktopLayout>
         )
       
-      case 'adaptive'="Adaptive Layout Demo"
+      case 'adaptive':
+      default:
+        return (
+          <AdaptiveLayout
+            title="Adaptive Layout Demo"
             description="Automatically adapts to different device types with optimal layouts"
             enableTouchOptimization={enableTouchOptimization}
             enablePerformanceMonitoring={showPerformanceMetrics}

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

@@ -13,7 +13,7 @@ import { useLayoutPerformance } from '../../hooks/use-layout-performance'
 import { useMobileLayout } from '../../hooks/use-mobile-layout'
 import { useTabletLayout } from '../../hooks/use-tablet-layout'
 
-export const LayoutDemo= () => {
+export const LayoutDemo: React.FC = () => {
   const [activeLayout, setActiveLayout] = useState<'mobile' | 'tablet' | 'desktop' | 'adaptive'>('adaptive')
   const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true)
   const [enableTouchOptimization, setEnableTouchOptimization] = useState(true)
@@ -21,45 +21,49 @@ export const LayoutDemo= () => {
 
   // Hooks
   useAdaptiveLayout({
-    enablePerformanceOptimization,
-    enableTouchOptimization,
-    enableBatteryOptimization,
-    enableMemoryOptimization}, {
-    onDeviceChange) => console.log('Device changed to, deviceType),
-    onOrientationChange) => console.log('Orientation changed to, orientation),
-    onPerformanceChange) => console.log('Performance score, score)
+    enablePerformanceOptimization: true,
+    enableTouchOptimization: true,
+    enableBatteryOptimization: true,
+    enableMemoryOptimization: true
+  }, {
+    onDeviceChange: (deviceType) => console.log('Device changed to:', deviceType),
+    onOrientationChange: (orientation) => console.log('Orientation changed to:', orientation),
+    onPerformanceChange: (score) => console.log('Performance score:', score)
   })
 
   const layoutPerformance = useLayoutPerformance({
-    enableLayoutCalculationOptimization,
-    enableMemoryManagement,
-    enableBatteryOptimization,
-    enablePerformanceMonitoring}, {
-    onPerformanceWarning, metrics) => console.log('Performance warning, warning, metrics),
-    onMemoryWarning, threshold) => console.log('Memory warning, usage, threshold),
-    onBatteryWarning, isLow) => console.log('Battery warning, level, isLow)
+    enableLayoutCalculationOptimization: true,
+    enableMemoryManagement: true,
+    enableBatteryOptimization: true,
+    enablePerformanceMonitoring: true
+  }, {
+    onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+    onMemoryWarning: (usage, threshold) => console.log('Memory warning:', usage, threshold),
+    onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow)
   })
 
   const mobileLayout = useMobileLayout({
-    enableTouchTargetOptimization,
-    enableGestureSupport,
-    enableTouchFeedback,
-    enablePerformanceOptimization}, {
-    onTouchTargetOptimized) => console.log('Touch target optimized, target),
-    onGestureDetected) => console.log('Gesture detected, event),
-    onTouchFeedback, target) => console.log('Touch feedback, type, target)
+    enableTouchTargetOptimization: true,
+    enableGestureSupport: true,
+    enableTouchFeedback: true,
+    enablePerformanceOptimization: true
+  }, {
+    onTouchTargetOptimized: (target) => console.log('Touch target optimized:', target),
+    onGestureDetected: (event) => console.log('Gesture detected:', event),
+    onTouchFeedback: (type, target) => console.log('Touch feedback:', type, target)
   })
 
   useTabletLayout({
-    enableOrientationOptimization,
-    enableSplitViewSupport,
-    enableKeyboardOptimization,
-    enableSafeAreaOptimization,
-    enablePerformanceOptimization,
-    enableTouchOptimization}, {
-    onOrientationChange) => console.log('Tablet orientation, orientation),
-    onSplitViewChange) => console.log('Split view, isSplitView),
-    onKeyboardChange) => console.log('Keyboard visible, isVisible)
+    enableOrientationOptimization: true,
+    enableSplitViewSupport: true,
+    enableKeyboardOptimization: true,
+    enableSafeAreaOptimization: true,
+    enablePerformanceOptimization: true,
+    enableTouchOptimization: true
+  }, {
+    onOrientationChange: (orientation) => console.log('Tablet orientation:', orientation),
+    onSplitViewChange: (isSplitView) => console.log('Split view:', isSplitView),
+    onKeyboardChange: (isVisible) => console.log('Keyboard visible:', isVisible)
   })
 
   // Layout content
@@ -67,7 +71,8 @@ export const LayoutDemo= () => {
     const commonContent = (
       <div className="space-y-6">
         {/* Feature Cards */}
-        <div className="grid grid-cols-1 md="border-2 border-cs-primary">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <Card className="border-2 border-cs-primary">
             <CardHeader className="pb-3">
               <CardTitle className="text-lg flex items-center gap-2">
                 🎨 Design System
@@ -140,7 +145,9 @@ export const LayoutDemo= () => {
               </CardDescription>
             </CardHeader>
             <CardContent>
-              <div className="grid grid-cols-2 lg="text-2xl font-bold text-cs-primary">
+              <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 text-center">
+                <div>
+                  <p className="text-2xl font-bold text-cs-primary">
                     {layoutPerformance.metrics.performanceScore}
                   </p>
                   <p className="text-sm text-cs-text-secondary">Performance Score</p>
@@ -179,25 +186,25 @@ export const LayoutDemo= () => {
           <CardContent className="space-y-4">
             <div className="flex flex-wrap gap-4">
               <Button
-                variant={activeLayout === 'mobile' ? 'default' }
+                variant={activeLayout === 'mobile' ? 'default' : 'outline'}
                 onClick={() => setActiveLayout('mobile')}
               >
                 📱 Mobile
               </Button>
               <Button
-                variant={activeLayout === 'tablet' ? 'default' }
+                variant={activeLayout === 'tablet' ? 'default' : 'outline'}
                 onClick={() => setActiveLayout('tablet')}
               >
                 📱 Tablet
               </Button>
               <Button
-                variant={activeLayout === 'desktop' ? 'default' }
+                variant={activeLayout === 'desktop' ? 'default' : 'outline'}
                 onClick={() => setActiveLayout('desktop')}
               >
                 💻 Desktop
               </Button>
               <Button
-                variant={activeLayout === 'adaptive' ? 'default' }
+                variant={activeLayout === 'adaptive' ? 'default' : 'outline'}
                 onClick={() => setActiveLayout('adaptive')}
               >
                 🔄 Adaptive
@@ -206,25 +213,25 @@ export const LayoutDemo= () => {
 
             <div className="flex flex-wrap gap-4">
               <Button
-                variant={showPerformanceMetrics ? 'default' }
+                variant={showPerformanceMetrics ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setShowPerformanceMetrics(!showPerformanceMetrics)}
               >
-                {showPerformanceMetrics ? 'Hide' } Performance
+                {showPerformanceMetrics ? 'Hide' : 'Show'} Performance
               </Button>
               <Button
-                variant={enableTouchOptimization ? 'default' }
+                variant={enableTouchOptimization ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setEnableTouchOptimization(!enableTouchOptimization)}
               >
-                {enableTouchOptimization ? 'Disable' } Touch
+                {enableTouchOptimization ? 'Disable' : 'Enable'} Touch
               </Button>
               <Button
-                variant={enableAdvancedFeatures ? 'default' }
+                variant={enableAdvancedFeatures ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setEnableAdvancedFeatures(!enableAdvancedFeatures)}
               >
-                {enableAdvancedFeatures ? 'Disable' } Advanced
+                {enableAdvancedFeatures ? 'Disable' : 'Enable'} Advanced
               </Button>
             </div>
           </CardContent>
@@ -241,30 +248,35 @@ export const LayoutDemo= () => {
           <CardContent>
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <span className="text-sm">Layout Performance={layoutPerformance.isPerformanceOptimal ? 'default' }>
-                  {layoutPerformance.isPerformanceOptimal ? 'Optimal' }
+                <span className="text-sm">Layout Performance:</span>
+                <Badge variant={layoutPerformance.isPerformanceOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isPerformanceOptimal ? 'Optimal' : 'Needs Optimization'}
                 </Badge>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-sm">Memory Usage={layoutPerformance.isMemoryOptimal ? 'default' }>
-                  {layoutPerformance.isMemoryOptimal ? 'Optimal' }
+                <span className="text-sm">Memory Usage:</span>
+                <Badge variant={layoutPerformance.isMemoryOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isMemoryOptimal ? 'Optimal' : 'High Usage'}
                 </Badge>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-sm">Battery Status={layoutPerformance.isBatteryOptimal ? 'default' }>
-                  {layoutPerformance.isBatteryOptimal ? 'Good' }
+                <span className="text-sm">Battery Status:</span>
+                <Badge variant={layoutPerformance.isBatteryOptimal ? 'default' : 'secondary'}>
+                  {layoutPerformance.isBatteryOptimal ? 'Good' : 'Low Battery'}
                 </Badge>
               </div>
               <div className="flex items-center justify-between">
-                <span className="text-sm">Touch Optimization={mobileLayout.isTouchOptimized ? 'default' }>
-                  {mobileLayout.isTouchOptimized ? 'Optimized' }
+                <span className="text-sm">Touch Optimization:</span>
+                <Badge variant={mobileLayout.isTouchOptimized ? 'default' : 'secondary'}>
+                  {mobileLayout.isTouchOptimized ? 'Optimized' : 'Needs Optimization'}
                 </Badge>
               </div>
             </div>
 
             {layoutPerformance.layoutOptimizations.length > 0 && (
               <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-                <h4 className="font-medium text-sm mb-2">Recommendations="text-xs text-cs-text-secondary space-y-1">
+                <h4 className="font-medium text-sm mb-2">Recommendations:</h4>
+                <ul className="text-xs text-cs-text-secondary space-y-1">
                   {layoutPerformance.layoutOptimizations.map((optimization, index) => (
                     <li key={index}>• {optimization}</li>
                   ))}
@@ -277,7 +289,10 @@ export const LayoutDemo= () => {
     )
 
     switch (activeLayout) {
-      case 'mobile'="Mobile Layout Demo"
+      case 'mobile':
+        return (
+          <MobileLayout
+            title="Mobile Layout Demo"
             description="Touch-optimized mobile layout with performance monitoring"
             enableTouchOptimization={enableTouchOptimization}
             enablePerformanceMonitoring={showPerformanceMetrics}
@@ -286,7 +301,10 @@ export const LayoutDemo= () => {
           </MobileLayout>
         )
       
-      case 'tablet'="Tablet Layout Demo"
+      case 'tablet':
+        return (
+          <TabletLayout
+            title="Tablet Layout Demo"
             description="Tablet-optimized layout with orientation and split view support"
             enableTouchOptimization={enableTouchOptimization}
             enablePerformanceMonitoring={showPerformanceMetrics}
@@ -295,7 +313,10 @@ export const LayoutDemo= () => {
           </TabletLayout>
         )
       
-      case 'desktop'="Desktop Layout Demo"
+      case 'desktop':
+        return (
+          <DesktopLayout
+            title="Desktop Layout Demo"
             description="Desktop-optimized layout with advanced features and performance monitoring"
             enableAdvancedFeatures={enableAdvancedFeatures}
             enablePerformanceMonitoring={showPerformanceMetrics}
@@ -304,7 +325,11 @@ export const LayoutDemo= () => {
           </DesktopLayout>
         )
       
-      case 'adaptive'="Adaptive Layout Demo"
+      case 'adaptive':
+      default:
+        return (
+          <AdaptiveLayout
+            title="Adaptive Layout Demo"
             description="Automatically adapts to different device types with optimal layouts"
             enableTouchOptimization={enableTouchOptimization}
             enablePerformanceMonitoring={showPerformanceMetrics}

package/dist/components/ui/layouts/adaptive-layout.esm.js

@@ -8,9 +8,18 @@ import { DesktopLayout } from './desktop-layout'
 export type DeviceType = 'mobile' | 'tablet' | 'desktop'
 
 export interface AdaptiveLayoutProps {
-  children}
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showSidebar?: boolean
+  enableTouchOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableAdvancedFeatures?: boolean
+  className?: string
+}
 
-export const AdaptiveLayout= ({
+export const AdaptiveLayout: React.FC<AdaptiveLayoutProps> = ({
   children,
   title = 'Adaptive Layout',
   description = 'Automatically adapts to different device types with optimal layouts',
@@ -22,7 +31,7 @@ export const AdaptiveLayout= ({
   className = ''
 }) => {
   const [deviceType, setDeviceType] = useState<DeviceType>('desktop')
-  const [screenSize, setScreenSize] = useState({ width, height})
+  const [screenSize, setScreenSize] = useState({ width: 0, height: 0 })
   const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('landscape')
 
   // Device detection and adaptation
@@ -32,7 +41,7 @@ export const AdaptiveLayout= ({
       const height = window.innerHeight
       
       setScreenSize({ width, height })
-      setOrientation(width > height ? 'landscape' )
+      setOrientation(width > height ? 'landscape' : 'portrait')
 
       // Device type detection based on screen size
       if (width < 768) {
@@ -65,7 +74,10 @@ export const AdaptiveLayout= ({
     }
 
     switch (deviceType) {
-      case 'mobile'}
+      case 'mobile':
+        return (
+          <MobileLayout
+            {...commonProps}
             showFooter={true}
             enableTouchOptimization={enableTouchOptimization}
           >
@@ -73,7 +85,10 @@ export const AdaptiveLayout= ({
           </MobileLayout>
         )
       
-      case 'tablet'}
+      case 'tablet':
+        return (
+          <TabletLayout
+            {...commonProps}
             showSidebar={showSidebar}
             enableTouchOptimization={enableTouchOptimization}
           >
@@ -81,7 +96,10 @@ export const AdaptiveLayout= ({
           </TabletLayout>
         )
       
-      case 'desktop'}
+      case 'desktop':
+        return (
+          <DesktopLayout
+            {...commonProps}
             showSidebar={showSidebar}
             showTopBar={true}
             enableAdvancedFeatures={enableAdvancedFeatures}
@@ -90,7 +108,8 @@ export const AdaptiveLayout= ({
           </DesktopLayout>
         )
       
-      default}</div>
+      default:
+        return <div>{children}</div>
     }
   }