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

package/dist/components/ui/layouts/adaptive-layout.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>
     }
   }
 

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

@@ -4,9 +4,18 @@ import { Badge } from '../badge'
 import { Button } from '../button'
 
 export interface DesktopLayoutProps {
-  children}
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showSidebar?: boolean
+  showTopBar?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableAdvancedFeatures?: boolean
+  className?: string
+}
 
-export const DesktopLayout= ({
+export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
   children,
   title = 'Desktop Layout',
   description = 'Desktop-optimized layout with advanced features and performance monitoring',
@@ -18,10 +27,11 @@ export const DesktopLayout= ({
   className = ''
 }) => {
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime,
-    memoryUsage,
-    cpuUsage,
-    fps})
+    renderTime: 0,
+    memoryUsage: 0,
+    cpuUsage: 0,
+    fps: 60
+  })
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
 
   // Performance monitoring
@@ -39,9 +49,9 @@ export const DesktopLayout= ({
         setPerformanceMetrics(prev => ({
           ...prev,
           renderTime,
-          memoryUsage) * 100,
-          cpuUsage) * 50,
-          fps) * 10
+          memoryUsage: Math.random() * 100,
+          cpuUsage: Math.random() * 50,
+          fps: 55 + Math.random() * 10
         }))
       }, 100)
     }
@@ -101,11 +111,13 @@ export const DesktopLayout= ({
         {/* Sidebar */}
         {showSidebar && (
           <aside className={`bg-cs-surface border-r border-cs-border transition-all duration-300 ${
-            sidebarCollapsed ? 'w-16' }`}>
+            sidebarCollapsed ? 'w-16' : 'w-80'
+          }`}>
             <div className="p-4">
               <div className="flex items-center justify-between mb-6">
                 <h3 className={`font-semibold text-cs-text-primary ${
-                  sidebarCollapsed ? 'hidden' }`}>
+                  sidebarCollapsed ? 'hidden' : 'block'
+                }`}>
                   Navigation
                 </h3>
                 <Button
@@ -114,33 +126,39 @@ export const DesktopLayout= ({
                   onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
                   className="ml-auto"
                 >
-                  {sidebarCollapsed ? '→' }
+                  {sidebarCollapsed ? '→' : '←'}
                 </Button>
               </div>
               
               <nav className="space-y-2">
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   🏠 {!sidebarCollapsed && 'Dashboard'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   🎨 {!sidebarCollapsed && 'Design System'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   📱 {!sidebarCollapsed && 'Mobile Features'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   🧪 {!sidebarCollapsed && 'Interactive Demos'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   📊 {!sidebarCollapsed && 'Performance'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   ⚙️ {!sidebarCollapsed && 'Configuration'}
                 </Button>
               </nav>
@@ -163,7 +181,9 @@ export const DesktopLayout= ({
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="grid grid-cols-2 xl="text-4xl font-bold text-cs-primary">
+                <div className="grid grid-cols-2 xl:grid-cols-4 gap-8 text-center">
+                  <div>
+                    <p className="text-4xl font-bold text-cs-primary">
                       {performanceMetrics.renderTime.toFixed(1)}ms
                     </p>
                     <p className="text-base text-cs-text-secondary">Render Time</p>

package/dist/components/ui/layouts/desktop-layout.js

@@ -4,9 +4,18 @@ import { Badge } from '../badge'
 import { Button } from '../button'
 
 export interface DesktopLayoutProps {
-  children}
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showSidebar?: boolean
+  showTopBar?: boolean
+  enablePerformanceMonitoring?: boolean
+  enableAdvancedFeatures?: boolean
+  className?: string
+}
 
-export const DesktopLayout= ({
+export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
   children,
   title = 'Desktop Layout',
   description = 'Desktop-optimized layout with advanced features and performance monitoring',
@@ -18,10 +27,11 @@ export const DesktopLayout= ({
   className = ''
 }) => {
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime,
-    memoryUsage,
-    cpuUsage,
-    fps})
+    renderTime: 0,
+    memoryUsage: 0,
+    cpuUsage: 0,
+    fps: 60
+  })
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
 
   // Performance monitoring
@@ -39,9 +49,9 @@ export const DesktopLayout= ({
         setPerformanceMetrics(prev => ({
           ...prev,
           renderTime,
-          memoryUsage) * 100,
-          cpuUsage) * 50,
-          fps) * 10
+          memoryUsage: Math.random() * 100,
+          cpuUsage: Math.random() * 50,
+          fps: 55 + Math.random() * 10
         }))
       }, 100)
     }
@@ -101,11 +111,13 @@ export const DesktopLayout= ({
         {/* Sidebar */}
         {showSidebar && (
           <aside className={`bg-cs-surface border-r border-cs-border transition-all duration-300 ${
-            sidebarCollapsed ? 'w-16' }`}>
+            sidebarCollapsed ? 'w-16' : 'w-80'
+          }`}>
             <div className="p-4">
               <div className="flex items-center justify-between mb-6">
                 <h3 className={`font-semibold text-cs-text-primary ${
-                  sidebarCollapsed ? 'hidden' }`}>
+                  sidebarCollapsed ? 'hidden' : 'block'
+                }`}>
                   Navigation
                 </h3>
                 <Button
@@ -114,33 +126,39 @@ export const DesktopLayout= ({
                   onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
                   className="ml-auto"
                 >
-                  {sidebarCollapsed ? '→' }
+                  {sidebarCollapsed ? '→' : '←'}
                 </Button>
               </div>
               
               <nav className="space-y-2">
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   🏠 {!sidebarCollapsed && 'Dashboard'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   🎨 {!sidebarCollapsed && 'Design System'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   📱 {!sidebarCollapsed && 'Mobile Features'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   🧪 {!sidebarCollapsed && 'Interactive Demos'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   📊 {!sidebarCollapsed && 'Performance'}
                 </Button>
                 <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' }`}>
+                  sidebarCollapsed ? 'px-2' : 'px-4'
+                }`}>
                   ⚙️ {!sidebarCollapsed && 'Configuration'}
                 </Button>
               </nav>
@@ -163,7 +181,9 @@ export const DesktopLayout= ({
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="grid grid-cols-2 xl="text-4xl font-bold text-cs-primary">
+                <div className="grid grid-cols-2 xl:grid-cols-4 gap-8 text-center">
+                  <div>
+                    <p className="text-4xl font-bold text-cs-primary">
                       {performanceMetrics.renderTime.toFixed(1)}ms
                     </p>
                     <p className="text-base text-cs-text-secondary">Render Time</p>

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

@@ -3,9 +3,17 @@ import { Card, CardContent, CardHeader, CardTitle } from '../card'
 import { Badge } from '../badge'
 
 export interface MobileLayoutProps {
-  children}
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showFooter?: boolean
+  enableTouchOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  className?: string
+}
 
-export const MobileLayout= ({
+export const MobileLayout: React.FC<MobileLayoutProps> = ({
   children,
   title = 'Mobile Layout',
   description = 'Touch-optimized mobile layout with performance monitoring',
@@ -17,9 +25,10 @@ export const MobileLayout= ({
 }) => {
   const [touchActive, setTouchActive] = useState(false)
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime,
-    memoryUsage,
-    touchResponsiveness})
+    renderTime: 0,
+    memoryUsage: 0,
+    touchResponsiveness: 0
+  })
 
   // Touch optimization
   useEffect(() => {
@@ -28,8 +37,8 @@ export const MobileLayout= ({
     const handleTouchStart = () => setTouchActive(true)
     const handleTouchEnd = () => setTouchActive(false)
 
-    document.addEventListener('touchstart', handleTouchStart, { passive})
-    document.addEventListener('touchend', handleTouchEnd, { passive})
+    document.addEventListener('touchstart', handleTouchStart, { passive: true })
+    document.addEventListener('touchend', handleTouchEnd, { passive: true })
 
     return () => {
       document.removeEventListener('touchstart', handleTouchStart)
@@ -52,8 +61,9 @@ export const MobileLayout= ({
         setPerformanceMetrics(prev => ({
           ...prev,
           renderTime,
-          memoryUsage) * 100,
-          touchResponsiveness}))
+          memoryUsage: Math.random() * 100,
+          touchResponsiveness: touchActive ? 95 : 85
+        }))
       }, 100)
     }
 

package/dist/components/ui/layouts/mobile-layout.js

@@ -3,9 +3,17 @@ import { Card, CardContent, CardHeader, CardTitle } from '../card'
 import { Badge } from '../badge'
 
 export interface MobileLayoutProps {
-  children}
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showFooter?: boolean
+  enableTouchOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  className?: string
+}
 
-export const MobileLayout= ({
+export const MobileLayout: React.FC<MobileLayoutProps> = ({
   children,
   title = 'Mobile Layout',
   description = 'Touch-optimized mobile layout with performance monitoring',
@@ -17,9 +25,10 @@ export const MobileLayout= ({
 }) => {
   const [touchActive, setTouchActive] = useState(false)
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime,
-    memoryUsage,
-    touchResponsiveness})
+    renderTime: 0,
+    memoryUsage: 0,
+    touchResponsiveness: 0
+  })
 
   // Touch optimization
   useEffect(() => {
@@ -28,8 +37,8 @@ export const MobileLayout= ({
     const handleTouchStart = () => setTouchActive(true)
     const handleTouchEnd = () => setTouchActive(false)
 
-    document.addEventListener('touchstart', handleTouchStart, { passive})
-    document.addEventListener('touchend', handleTouchEnd, { passive})
+    document.addEventListener('touchstart', handleTouchStart, { passive: true })
+    document.addEventListener('touchend', handleTouchEnd, { passive: true })
 
     return () => {
       document.removeEventListener('touchstart', handleTouchStart)
@@ -52,8 +61,9 @@ export const MobileLayout= ({
         setPerformanceMetrics(prev => ({
           ...prev,
           renderTime,
-          memoryUsage) * 100,
-          touchResponsiveness}))
+          memoryUsage: Math.random() * 100,
+          touchResponsiveness: touchActive ? 95 : 85
+        }))
       }, 100)
     }
 

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

@@ -4,9 +4,17 @@ import { Badge } from '../badge'
 import { Button } from '../button'
 
 export interface TabletLayoutProps {
-  children}
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showSidebar?: boolean
+  enableTouchOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  className?: string
+}
 
-export const TabletLayout= ({
+export const TabletLayout: React.FC<TabletLayoutProps> = ({
   children,
   title = 'Tablet Layout',
   description = 'Tablet-optimized layout with touch and performance features',
@@ -18,16 +26,18 @@ export const TabletLayout= ({
 }) => {
   const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('portrait')
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime,
-    memoryUsage,
-    touchResponsiveness,
-    orientation})
+    renderTime: 0,
+    memoryUsage: 0,
+    touchResponsiveness: 0,
+    orientation: 'portrait'
+  })
 
   // Orientation detection
   useEffect(() => {
     const handleOrientationChange = () => {
-      const newOrientation = window.innerWidth > window.innerHeight ? 'landscape' )
-      setPerformanceMetrics(prev => ({ ...prev, orientation}))
+      const newOrientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
+      setOrientation(newOrientation)
+      setPerformanceMetrics(prev => ({ ...prev, orientation: newOrientation }))
     }
 
     handleOrientationChange()
@@ -55,8 +65,9 @@ export const TabletLayout= ({
         setPerformanceMetrics(prev => ({
           ...prev,
           renderTime,
-          memoryUsage) * 100,
-          touchResponsiveness=== 'landscape' ? 90 }))
+          memoryUsage: Math.random() * 100,
+          touchResponsiveness: orientation === 'landscape' ? 90 : 95
+        }))
       }, 100)
     }
 
@@ -82,8 +93,8 @@ export const TabletLayout= ({
               <Badge variant="outline">
                 Tablet
               </Badge>
-              <Badge variant={orientation === 'landscape' ? 'default' }>
-                {orientation === 'landscape' ? 'Landscape' }
+              <Badge variant={orientation === 'landscape' ? 'default' : 'secondary'}>
+                {orientation === 'landscape' ? 'Landscape' : 'Portrait'}
               </Badge>
               {enableTouchOptimization && (
                 <Badge variant="default">
@@ -104,7 +115,8 @@ export const TabletLayout= ({
       <div className="flex flex-1">
         {/* Sidebar */}
         {showSidebar && (
-          <aside className="w-64 bg-cs-surface border-r border-cs-border p-4 hidden lg="space-y-4">
+          <aside className="w-64 bg-cs-surface border-r border-cs-border p-4 hidden lg:block">
+            <div className="space-y-4">
               <h3 className="font-semibold text-cs-text-primary">Navigation</h3>
               <nav className="space-y-2">
                 <Button variant="ghost" className="w-full justify-start">
@@ -142,7 +154,9 @@ export const TabletLayout= ({
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="grid grid-cols-2 lg="text-3xl font-bold text-cs-primary">
+                <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 text-center">
+                  <div>
+                    <p className="text-3xl font-bold text-cs-primary">
                       {performanceMetrics.renderTime.toFixed(1)}ms
                     </p>
                     <p className="text-sm text-cs-text-secondary">Render Time</p>

package/dist/components/ui/layouts/tablet-layout.js

@@ -4,9 +4,17 @@ import { Badge } from '../badge'
 import { Button } from '../button'
 
 export interface TabletLayoutProps {
-  children}
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showSidebar?: boolean
+  enableTouchOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  className?: string
+}
 
-export const TabletLayout= ({
+export const TabletLayout: React.FC<TabletLayoutProps> = ({
   children,
   title = 'Tablet Layout',
   description = 'Tablet-optimized layout with touch and performance features',
@@ -18,16 +26,18 @@ export const TabletLayout= ({
 }) => {
   const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('portrait')
   const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime,
-    memoryUsage,
-    touchResponsiveness,
-    orientation})
+    renderTime: 0,
+    memoryUsage: 0,
+    touchResponsiveness: 0,
+    orientation: 'portrait'
+  })
 
   // Orientation detection
   useEffect(() => {
     const handleOrientationChange = () => {
-      const newOrientation = window.innerWidth > window.innerHeight ? 'landscape' )
-      setPerformanceMetrics(prev => ({ ...prev, orientation}))
+      const newOrientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
+      setOrientation(newOrientation)
+      setPerformanceMetrics(prev => ({ ...prev, orientation: newOrientation }))
     }
 
     handleOrientationChange()
@@ -55,8 +65,9 @@ export const TabletLayout= ({
         setPerformanceMetrics(prev => ({
           ...prev,
           renderTime,
-          memoryUsage) * 100,
-          touchResponsiveness=== 'landscape' ? 90 }))
+          memoryUsage: Math.random() * 100,
+          touchResponsiveness: orientation === 'landscape' ? 90 : 95
+        }))
       }, 100)
     }
 
@@ -82,8 +93,8 @@ export const TabletLayout= ({
               <Badge variant="outline">
                 Tablet
               </Badge>
-              <Badge variant={orientation === 'landscape' ? 'default' }>
-                {orientation === 'landscape' ? 'Landscape' }
+              <Badge variant={orientation === 'landscape' ? 'default' : 'secondary'}>
+                {orientation === 'landscape' ? 'Landscape' : 'Portrait'}
               </Badge>
               {enableTouchOptimization && (
                 <Badge variant="default">
@@ -104,7 +115,8 @@ export const TabletLayout= ({
       <div className="flex flex-1">
         {/* Sidebar */}
         {showSidebar && (
-          <aside className="w-64 bg-cs-surface border-r border-cs-border p-4 hidden lg="space-y-4">
+          <aside className="w-64 bg-cs-surface border-r border-cs-border p-4 hidden lg:block">
+            <div className="space-y-4">
               <h3 className="font-semibold text-cs-text-primary">Navigation</h3>
               <nav className="space-y-2">
                 <Button variant="ghost" className="w-full justify-start">
@@ -142,7 +154,9 @@ export const TabletLayout= ({
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <div className="grid grid-cols-2 lg="text-3xl font-bold text-cs-primary">
+                <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 text-center">
+                  <div>
+                    <p className="text-3xl font-bold text-cs-primary">
                       {performanceMetrics.renderTime.toFixed(1)}ms
                     </p>
                     <p className="text-sm text-cs-text-secondary">Render Time</p>