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

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

@@ -0,0 +1,152 @@
+import React, { ReactNode, useState, useEffect } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '../card'
+import { Badge } from '../badge'
+
+export interface MobileLayoutProps {
+  children}
+
+export const MobileLayout= ({
+  children,
+  title = 'Mobile Layout',
+  description = 'Touch-optimized mobile layout with performance monitoring',
+  showHeader = true,
+  showFooter = true,
+  enableTouchOptimization = true,
+  enablePerformanceMonitoring = true,
+  className = ''
+}) => {
+  const [touchActive, setTouchActive] = useState(false)
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    renderTime,
+    memoryUsage,
+    touchResponsiveness})
+
+  // Touch optimization
+  useEffect(() => {
+    if (!enableTouchOptimization) return
+
+    const handleTouchStart = () => setTouchActive(true)
+    const handleTouchEnd = () => setTouchActive(false)
+
+    document.addEventListener('touchstart', handleTouchStart, { passive})
+    document.addEventListener('touchend', handleTouchEnd, { passive})
+
+    return () => {
+      document.removeEventListener('touchstart', handleTouchStart)
+      document.removeEventListener('touchend', handleTouchEnd)
+    }
+  }, [enableTouchOptimization])
+
+  // Performance monitoring
+  useEffect(() => {
+    if (!enablePerformanceMonitoring) return
+
+    const measurePerformance = () => {
+      const startTime = performance.now()
+      
+      // Simulate performance measurement
+      setTimeout(() => {
+        const endTime = performance.now()
+        const renderTime = endTime - startTime
+        
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          renderTime,
+          memoryUsage) * 100,
+          touchResponsiveness}))
+      }, 100)
+    }
+
+    measurePerformance()
+    const interval = setInterval(measurePerformance, 2000)
+
+    return () => clearInterval(interval)
+  }, [enablePerformanceMonitoring, touchActive])
+
+  return (
+    <div className={`min-h-screen bg-cs-page-bg ${className}`}>
+      {/* Mobile Header */}
+      {showHeader && (
+        <header className="sticky top-0 z-50 bg-cs-surface border-b border-cs-border p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <h1 className="text-xl font-bold text-cs-text-primary">{title}</h1>
+              {description && (
+                <p className="text-sm text-cs-text-secondary mt-1">{description}</p>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="text-xs">
+                Mobile
+              </Badge>
+              {enableTouchOptimization && (
+                <Badge variant="default" className="text-xs">
+                  Touch
+                </Badge>
+              )}
+              {enablePerformanceMonitoring && (
+                <Badge variant="secondary" className="text-xs">
+                  Performance
+                </Badge>
+              )}
+            </div>
+          </div>
+        </header>
+      )}
+
+      {/* Main Content */}
+      <main className="p-4 space-y-4">
+        {/* Performance Metrics */}
+        {enablePerformanceMonitoring && (
+          <Card className="border-2 border-cs-accent">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg flex items-center gap-2">
+                📊 Performance Metrics
+                <Badge variant="outline">Real-time</Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-3 gap-4 text-center">
+                <div>
+                  <p className="text-2xl font-bold text-cs-primary">
+                    {performanceMetrics.renderTime.toFixed(1)}ms
+                  </p>
+                  <p className="text-xs text-cs-text-secondary">Render Time</p>
+                </div>
+                <div>
+                  <p className="text-2xl font-bold text-cs-secondary">
+                    {performanceMetrics.memoryUsage.toFixed(1)}%
+                  </p>
+                  <p className="text-xs text-cs-text-secondary">Memory</p>
+                </div>
+                <div>
+                  <p className="text-2xl font-bold text-cs-accent">
+                    {performanceMetrics.touchResponsiveness.toFixed(0)}%
+                  </p>
+                  <p className="text-xs text-cs-text-secondary">Touch</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Content Area */}
+        <div className="space-y-4">
+          {children}
+        </div>
+      </main>
+
+      {/* Mobile Footer */}
+      {showFooter && (
+        <footer className="sticky bottom-0 z-50 bg-cs-surface border-t border-cs-border p-4">
+          <div className="flex items-center justify-between text-sm text-cs-text-secondary">
+            <span>Mobile Layout</span>
+            <span>Touch Optimized</span>
+          </div>
+        </footer>
+      )}
+    </div>
+  )
+}
+
+export default MobileLayout

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

@@ -0,0 +1,152 @@
+import React, { ReactNode, useState, useEffect } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '../card'
+import { Badge } from '../badge'
+
+export interface MobileLayoutProps {
+  children}
+
+export const MobileLayout= ({
+  children,
+  title = 'Mobile Layout',
+  description = 'Touch-optimized mobile layout with performance monitoring',
+  showHeader = true,
+  showFooter = true,
+  enableTouchOptimization = true,
+  enablePerformanceMonitoring = true,
+  className = ''
+}) => {
+  const [touchActive, setTouchActive] = useState(false)
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    renderTime,
+    memoryUsage,
+    touchResponsiveness})
+
+  // Touch optimization
+  useEffect(() => {
+    if (!enableTouchOptimization) return
+
+    const handleTouchStart = () => setTouchActive(true)
+    const handleTouchEnd = () => setTouchActive(false)
+
+    document.addEventListener('touchstart', handleTouchStart, { passive})
+    document.addEventListener('touchend', handleTouchEnd, { passive})
+
+    return () => {
+      document.removeEventListener('touchstart', handleTouchStart)
+      document.removeEventListener('touchend', handleTouchEnd)
+    }
+  }, [enableTouchOptimization])
+
+  // Performance monitoring
+  useEffect(() => {
+    if (!enablePerformanceMonitoring) return
+
+    const measurePerformance = () => {
+      const startTime = performance.now()
+      
+      // Simulate performance measurement
+      setTimeout(() => {
+        const endTime = performance.now()
+        const renderTime = endTime - startTime
+        
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          renderTime,
+          memoryUsage) * 100,
+          touchResponsiveness}))
+      }, 100)
+    }
+
+    measurePerformance()
+    const interval = setInterval(measurePerformance, 2000)
+
+    return () => clearInterval(interval)
+  }, [enablePerformanceMonitoring, touchActive])
+
+  return (
+    <div className={`min-h-screen bg-cs-page-bg ${className}`}>
+      {/* Mobile Header */}
+      {showHeader && (
+        <header className="sticky top-0 z-50 bg-cs-surface border-b border-cs-border p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <h1 className="text-xl font-bold text-cs-text-primary">{title}</h1>
+              {description && (
+                <p className="text-sm text-cs-text-secondary mt-1">{description}</p>
+              )}
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant="outline" className="text-xs">
+                Mobile
+              </Badge>
+              {enableTouchOptimization && (
+                <Badge variant="default" className="text-xs">
+                  Touch
+                </Badge>
+              )}
+              {enablePerformanceMonitoring && (
+                <Badge variant="secondary" className="text-xs">
+                  Performance
+                </Badge>
+              )}
+            </div>
+          </div>
+        </header>
+      )}
+
+      {/* Main Content */}
+      <main className="p-4 space-y-4">
+        {/* Performance Metrics */}
+        {enablePerformanceMonitoring && (
+          <Card className="border-2 border-cs-accent">
+            <CardHeader className="pb-3">
+              <CardTitle className="text-lg flex items-center gap-2">
+                📊 Performance Metrics
+                <Badge variant="outline">Real-time</Badge>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-3 gap-4 text-center">
+                <div>
+                  <p className="text-2xl font-bold text-cs-primary">
+                    {performanceMetrics.renderTime.toFixed(1)}ms
+                  </p>
+                  <p className="text-xs text-cs-text-secondary">Render Time</p>
+                </div>
+                <div>
+                  <p className="text-2xl font-bold text-cs-secondary">
+                    {performanceMetrics.memoryUsage.toFixed(1)}%
+                  </p>
+                  <p className="text-xs text-cs-text-secondary">Memory</p>
+                </div>
+                <div>
+                  <p className="text-2xl font-bold text-cs-accent">
+                    {performanceMetrics.touchResponsiveness.toFixed(0)}%
+                  </p>
+                  <p className="text-xs text-cs-text-secondary">Touch</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Content Area */}
+        <div className="space-y-4">
+          {children}
+        </div>
+      </main>
+
+      {/* Mobile Footer */}
+      {showFooter && (
+        <footer className="sticky bottom-0 z-50 bg-cs-surface border-t border-cs-border p-4">
+          <div className="flex items-center justify-between text-sm text-cs-text-secondary">
+            <span>Mobile Layout</span>
+            <span>Touch Optimized</span>
+          </div>
+        </footer>
+      )}
+    </div>
+  )
+}
+
+export default MobileLayout

package/dist/components/ui/layouts/tablet-layout.d.ts

@@ -0,0 +1,192 @@
+export interface TabletLayoutProps {
+  children: ReactNode
+  title?: string
+  description?: string
+  showHeader?: boolean
+  showSidebar?: boolean
+  enableTouchOptimization?: boolean
+  enablePerformanceMonitoring?: boolean
+  className?: string
+}
+
+export const TabletLayout: React.FC<TabletLayoutProps> = ({
+  children,
+  title = 'Tablet Layout',
+  description = 'Tablet-optimized layout with touch and performance features',
+  showHeader = true,
+  showSidebar = true,
+  enableTouchOptimization = true,
+  enablePerformanceMonitoring = true,
+  className = ''
+}) => {
+  const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('portrait')
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    renderTime: 0,
+    memoryUsage: 0,
+    touchResponsiveness: 0,
+    orientation: 'portrait'
+  })
+
+  // Orientation detection
+  useEffect(() => {
+    const handleOrientationChange = () => {
+      const newOrientation = window.innerWidth > window.innerHeight ? 'landscape' : 'portrait'
+      setOrientation(newOrientation)
+      setPerformanceMetrics(prev => ({ ...prev, orientation: newOrientation }))
+    }
+
+    handleOrientationChange()
+    window.addEventListener('resize', handleOrientationChange)
+    window.addEventListener('orientationchange', handleOrientationChange)
+
+    return () => {
+      window.removeEventListener('resize', handleOrientationChange)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+    }
+  }, [])
+
+  // Performance monitoring
+  useEffect(() => {
+    if (!enablePerformanceMonitoring) return
+
+    const measurePerformance = () => {
+      const startTime = performance.now()
+
+      // Simulate performance measurement
+      setTimeout(() => {
+        const endTime = performance.now()
+        const renderTime = endTime - startTime
+
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          renderTime,
+          memoryUsage: Math.random() * 100,
+          touchResponsiveness: orientation === 'landscape' ? 90 : 95
+        }))
+      }, 100)
+    }
+
+    measurePerformance()
+    const interval = setInterval(measurePerformance, 3000)
+
+    return () => clearInterval(interval)
+  }, [enablePerformanceMonitoring, orientation])
+
+  return (
+    <div className={`min-h-screen bg-cs-page-bg ${className}`}>
+      {/* Tablet Header */}
+      {showHeader && (
+        <header className="sticky top-0 z-50 bg-cs-surface border-b border-cs-border p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold text-cs-text-primary">{title}</h1>
+              {description && (
+                <p className="text-base text-cs-text-secondary mt-2">{description}</p>
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <Badge variant="outline">
+                Tablet
+              </Badge>
+              <Badge variant={orientation === 'landscape' ? 'default' : 'secondary'}>
+                {orientation === 'landscape' ? 'Landscape' : 'Portrait'}
+              </Badge>
+              {enableTouchOptimization && (
+                <Badge variant="default">
+                  Touch
+                </Badge>
+              )}
+              {enablePerformanceMonitoring && (
+                <Badge variant="secondary">
+                  Performance
+                </Badge>
+              )}
+            </div>
+          </div>
+        </header>
+      )}
+
+      {/* Main Content with Sidebar */}
+      <div className="flex flex-1">
+        {/* Sidebar */}
+        {showSidebar && (
+          <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">
+                  🏠 Dashboard
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  🎨 Design System
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  📱 Mobile Features
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  🧪 Interactive Demos
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  📊 Performance
+                </Button>
+              </nav>
+            </div>
+          </aside>
+        )}
+
+        {/* Main Content */}
+        <main className="flex-1 p-6 space-y-6">
+          {/* Performance Metrics */}
+          {enablePerformanceMonitoring && (
+            <Card className="border-2 border-cs-accent">
+              <CardHeader>
+                <CardTitle className="text-xl flex items-center gap-2">
+                  📊 Tablet Performance Metrics
+                  <Badge variant="outline">Real-time</Badge>
+                </CardTitle>
+                <CardDescription>
+                  Performance monitoring optimized for tablet devices
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <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>
+                  </div>
+                  <div>
+                    <p className="text-3xl font-bold text-cs-secondary">
+                      {performanceMetrics.memoryUsage.toFixed(1)}%
+                    </p>
+                    <p className="text-sm text-cs-text-secondary">Memory Usage</p>
+                  </div>
+                  <div>
+                    <p className="text-3xl font-bold text-cs-accent">
+                      {performanceMetrics.touchResponsiveness.toFixed(0)}%
+                    </p>
+                    <p className="text-sm text-cs-text-secondary">Touch Responsiveness</p>
+                  </div>
+                  <div>
+                    <p className="text-3xl font-bold text-cs-primary">
+                      {performanceMetrics.orientation}
+                    </p>
+                    <p className="text-sm text-cs-text-secondary">Orientation</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Content Area */}
+          <div className="space-y-6">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default TabletLayout

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

@@ -0,0 +1,183 @@
+import React, { ReactNode, useState, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card'
+import { Badge } from '../badge'
+import { Button } from '../button'
+
+export interface TabletLayoutProps {
+  children}
+
+export const TabletLayout= ({
+  children,
+  title = 'Tablet Layout',
+  description = 'Tablet-optimized layout with touch and performance features',
+  showHeader = true,
+  showSidebar = true,
+  enableTouchOptimization = true,
+  enablePerformanceMonitoring = true,
+  className = ''
+}) => {
+  const [orientation, setOrientation] = useState<'portrait' | 'landscape'>('portrait')
+  const [performanceMetrics, setPerformanceMetrics] = useState({
+    renderTime,
+    memoryUsage,
+    touchResponsiveness,
+    orientation})
+
+  // Orientation detection
+  useEffect(() => {
+    const handleOrientationChange = () => {
+      const newOrientation = window.innerWidth > window.innerHeight ? 'landscape' )
+      setPerformanceMetrics(prev => ({ ...prev, orientation}))
+    }
+
+    handleOrientationChange()
+    window.addEventListener('resize', handleOrientationChange)
+    window.addEventListener('orientationchange', handleOrientationChange)
+
+    return () => {
+      window.removeEventListener('resize', handleOrientationChange)
+      window.removeEventListener('orientationchange', handleOrientationChange)
+    }
+  }, [])
+
+  // Performance monitoring
+  useEffect(() => {
+    if (!enablePerformanceMonitoring) return
+
+    const measurePerformance = () => {
+      const startTime = performance.now()
+      
+      // Simulate performance measurement
+      setTimeout(() => {
+        const endTime = performance.now()
+        const renderTime = endTime - startTime
+        
+        setPerformanceMetrics(prev => ({
+          ...prev,
+          renderTime,
+          memoryUsage) * 100,
+          touchResponsiveness=== 'landscape' ? 90 }))
+      }, 100)
+    }
+
+    measurePerformance()
+    const interval = setInterval(measurePerformance, 3000)
+
+    return () => clearInterval(interval)
+  }, [enablePerformanceMonitoring, orientation])
+
+  return (
+    <div className={`min-h-screen bg-cs-page-bg ${className}`}>
+      {/* Tablet Header */}
+      {showHeader && (
+        <header className="sticky top-0 z-50 bg-cs-surface border-b border-cs-border p-6">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">
+              <h1 className="text-2xl font-bold text-cs-text-primary">{title}</h1>
+              {description && (
+                <p className="text-base text-cs-text-secondary mt-2">{description}</p>
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <Badge variant="outline">
+                Tablet
+              </Badge>
+              <Badge variant={orientation === 'landscape' ? 'default' }>
+                {orientation === 'landscape' ? 'Landscape' }
+              </Badge>
+              {enableTouchOptimization && (
+                <Badge variant="default">
+                  Touch
+                </Badge>
+              )}
+              {enablePerformanceMonitoring && (
+                <Badge variant="secondary">
+                  Performance
+                </Badge>
+              )}
+            </div>
+          </div>
+        </header>
+      )}
+
+      {/* Main Content with Sidebar */}
+      <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">
+              <h3 className="font-semibold text-cs-text-primary">Navigation</h3>
+              <nav className="space-y-2">
+                <Button variant="ghost" className="w-full justify-start">
+                  🏠 Dashboard
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  🎨 Design System
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  📱 Mobile Features
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  🧪 Interactive Demos
+                </Button>
+                <Button variant="ghost" className="w-full justify-start">
+                  📊 Performance
+                </Button>
+              </nav>
+            </div>
+          </aside>
+        )}
+
+        {/* Main Content */}
+        <main className="flex-1 p-6 space-y-6">
+          {/* Performance Metrics */}
+          {enablePerformanceMonitoring && (
+            <Card className="border-2 border-cs-accent">
+              <CardHeader>
+                <CardTitle className="text-xl flex items-center gap-2">
+                  📊 Tablet Performance Metrics
+                  <Badge variant="outline">Real-time</Badge>
+                </CardTitle>
+                <CardDescription>
+                  Performance monitoring optimized for tablet devices
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 lg="text-3xl font-bold text-cs-primary">
+                      {performanceMetrics.renderTime.toFixed(1)}ms
+                    </p>
+                    <p className="text-sm text-cs-text-secondary">Render Time</p>
+                  </div>
+                  <div>
+                    <p className="text-3xl font-bold text-cs-secondary">
+                      {performanceMetrics.memoryUsage.toFixed(1)}%
+                    </p>
+                    <p className="text-sm text-cs-text-secondary">Memory Usage</p>
+                  </div>
+                  <div>
+                    <p className="text-3xl font-bold text-cs-accent">
+                      {performanceMetrics.touchResponsiveness.toFixed(0)}%
+                    </p>
+                    <p className="text-sm text-cs-text-secondary">Touch Responsiveness</p>
+                  </div>
+                  <div>
+                    <p className="text-3xl font-bold text-cs-primary">
+                      {performanceMetrics.orientation}
+                    </p>
+                    <p className="text-sm text-cs-text-secondary">Orientation</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Content Area */}
+          <div className="space-y-6">
+            {children}
+          </div>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default TabletLayout