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

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

@@ -1,219 +0,0 @@
-export interface DesktopLayoutProps {
-  children: ReactNode
-  title?: string
-  description?: string
-  showHeader?: boolean
-  showSidebar?: boolean
-  showTopBar?: boolean
-  enablePerformanceMonitoring?: boolean
-  enableAdvancedFeatures?: boolean
-  className?: string
-}
-
-export const DesktopLayout: React.FC<DesktopLayoutProps> = ({
-  children,
-  title = 'Desktop Layout',
-  description = 'Desktop-optimized layout with advanced features and performance monitoring',
-  showHeader = true,
-  showSidebar = true,
-  showTopBar = true,
-  enablePerformanceMonitoring = true,
-  enableAdvancedFeatures = true,
-  className = ''
-}) => {
-  const [performanceMetrics, setPerformanceMetrics] = useState({
-    renderTime: 0,
-    memoryUsage: 0,
-    cpuUsage: 0,
-    fps: 60
-  })
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
-
-  // 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,
-          cpuUsage: Math.random() * 50,
-          fps: 55 + Math.random() * 10
-        }))
-      }, 100)
-    }
-
-    measurePerformance()
-    const interval = setInterval(measurePerformance, 4000)
-
-    return () => clearInterval(interval)
-  }, [enablePerformanceMonitoring])
-
-  return (
-    <div className={`min-h-screen bg-cs-page-bg ${className}`}>
-      {/* Top Bar */}
-      {showTopBar && (
-        <div className="bg-cs-surface border-b border-cs-border px-6 py-2">
-          <div className="flex items-center justify-between text-sm text-cs-text-secondary">
-            <span>Stan Design System</span>
-            <div className="flex items-center gap-4">
-              <span>Desktop Layout</span>
-              {enableAdvancedFeatures && <span>Advanced Features Enabled</span>}
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Desktop Header */}
-      {showHeader && (
-        <header className="bg-cs-surface border-b border-cs-border px-8 py-6">
-          <div className="flex items-center justify-between">
-            <div className="flex-1">
-              <h1 className="text-3xl font-bold text-cs-text-primary">{title}</h1>
-              {description && (
-                <p className="text-lg text-cs-text-secondary mt-3">{description}</p>
-              )}
-            </div>
-            <div className="flex items-center gap-4">
-              <Badge variant="outline" className="text-base">
-                Desktop
-              </Badge>
-              {enableAdvancedFeatures && (
-                <Badge variant="default" className="text-base">
-                  Advanced
-                </Badge>
-              )}
-              {enablePerformanceMonitoring && (
-                <Badge variant="secondary" className="text-base">
-                  Performance
-                </Badge>
-              )}
-            </div>
-          </div>
-        </header>
-      )}
-
-      {/* Main Content with Sidebar */}
-      <div className="flex flex-1">
-        {/* Sidebar */}
-        {showSidebar && (
-          <aside className={`bg-cs-surface border-r border-cs-border transition-all duration-300 ${
-            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' : 'block'
-                }`}>
-                  Navigation
-                </h3>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
-                  className="ml-auto"
-                >
-                  {sidebarCollapsed ? '→' : '←'}
-                </Button>
-              </div>
-
-              <nav className="space-y-2">
-                <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' : 'px-4'
-                }`}>
-                  🏠 {!sidebarCollapsed && 'Dashboard'}
-                </Button>
-                <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' : 'px-4'
-                }`}>
-                  🎨 {!sidebarCollapsed && 'Design System'}
-                </Button>
-                <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' : 'px-4'
-                }`}>
-                  📱 {!sidebarCollapsed && 'Mobile Features'}
-                </Button>
-                <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' : 'px-4'
-                }`}>
-                  🧪 {!sidebarCollapsed && 'Interactive Demos'}
-                </Button>
-                <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' : 'px-4'
-                }`}>
-                  📊 {!sidebarCollapsed && 'Performance'}
-                </Button>
-                <Button variant="ghost" className={`w-full justify-start ${
-                  sidebarCollapsed ? 'px-2' : 'px-4'
-                }`}>
-                  ⚙️ {!sidebarCollapsed && 'Configuration'}
-                </Button>
-              </nav>
-            </div>
-          </aside>
-        )}
-
-        {/* Main Content */}
-        <main className="flex-1 p-8 space-y-8">
-          {/* Performance Metrics */}
-          {enablePerformanceMonitoring && (
-            <Card className="border-2 border-cs-accent">
-              <CardHeader>
-                <CardTitle className="text-2xl flex items-center gap-3">
-                  📊 Desktop Performance Metrics
-                  <Badge variant="outline" className="text-base">Real-time</Badge>
-                </CardTitle>
-                <CardDescription className="text-base">
-                  Advanced performance monitoring for desktop devices
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <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>
-                  </div>
-                  <div>
-                    <p className="text-4xl font-bold text-cs-secondary">
-                      {performanceMetrics.memoryUsage.toFixed(1)}%
-                    </p>
-                    <p className="text-base text-cs-text-secondary">Memory Usage</p>
-                  </div>
-                  <div>
-                    <p className="text-4xl font-bold text-cs-accent">
-                      {performanceMetrics.cpuUsage.toFixed(1)}%
-                    </p>
-                    <p className="text-base text-cs-text-secondary">CPU Usage</p>
-                  </div>
-                  <div>
-                    <p className="text-4xl font-bold text-cs-primary">
-                      {performanceMetrics.fps.toFixed(0)}
-                    </p>
-                    <p className="text-base text-cs-text-secondary">FPS</p>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          )}
-
-          {/* Content Area */}
-          <div className="space-y-8">
-            {children}
-          </div>
-        </main>
-      </div>
-    </div>
-  )
-}
-
-export default DesktopLayout

package/dist/components/ui/layouts/index.d.ts

@@ -1,5 +0,0 @@
-// Re-export types
-export type { MobileLayoutProps } from './mobile-layout'
-export type { TabletLayoutProps } from './tablet-layout'
-export type { DesktopLayoutProps } from './desktop-layout'
-export type { AdaptiveLayoutProps } from './adaptive-layout'

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

@@ -1,158 +0,0 @@
-export interface MobileLayoutProps {
-  children: ReactNode
-  title?: string
-  description?: string
-  showHeader?: boolean
-  showFooter?: boolean
-  enableTouchOptimization?: boolean
-  enablePerformanceMonitoring?: boolean
-  className?: string
-}
-
-export const MobileLayout: React.FC<MobileLayoutProps> = ({
-  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: 0,
-    memoryUsage: 0,
-    touchResponsiveness: 0
-  })
-
-  // Touch optimization
-  useEffect(() => {
-    if (!enableTouchOptimization) return
-
-    const handleTouchStart = () => setTouchActive(true)
-    const handleTouchEnd = () => setTouchActive(false)
-
-    document.addEventListener('touchstart', handleTouchStart, { passive: true })
-    document.addEventListener('touchend', handleTouchEnd, { passive: true })
-
-    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: Math.random() * 100,
-          touchResponsiveness: touchActive ? 95 : 85
-        }))
-      }, 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

@@ -1,192 +0,0 @@
-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