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

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

@@ -1,224 +1,39 @@
-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 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
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card';
+import { Badge } from '../badge';
+import { Button } from '../button';
+export const DesktopLayout = ({ 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 (_jsxs("div", { className: `min-h-screen bg-cs-page-bg ${className}`, children: [showTopBar && (_jsx("div", { className: "bg-cs-surface border-b border-cs-border px-6 py-2", children: _jsxs("div", { className: "flex items-center justify-between text-sm text-cs-text-secondary", children: [_jsx("span", { children: "Stan Design System" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("span", { children: "Desktop Layout" }), enableAdvancedFeatures && _jsx("span", { children: "Advanced Features Enabled" })] })] }) })), showHeader && (_jsx("header", { className: "bg-cs-surface border-b border-cs-border px-8 py-6", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-3xl font-bold text-cs-text-primary", children: title }), description && (_jsx("p", { className: "text-lg text-cs-text-secondary mt-3", children: description }))] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-base", children: "Desktop" }), enableAdvancedFeatures && (_jsx(Badge, { variant: "default", className: "text-base", children: "Advanced" })), enablePerformanceMonitoring && (_jsx(Badge, { variant: "secondary", className: "text-base", children: "Performance" }))] })] }) })), _jsxs("div", { className: "flex flex-1", children: [showSidebar && (_jsx("aside", { className: `bg-cs-surface border-r border-cs-border transition-all duration-300 ${sidebarCollapsed ? 'w-16' : 'w-80'}`, children: _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsx("h3", { className: `font-semibold text-cs-text-primary ${sidebarCollapsed ? 'hidden' : 'block'}`, children: "Navigation" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(!sidebarCollapsed), className: "ml-auto", children: sidebarCollapsed ? '→' : '←' })] }), _jsxs("nav", { className: "space-y-2", children: [_jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83C\uDFE0 ", !sidebarCollapsed && 'Dashboard'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83C\uDFA8 ", !sidebarCollapsed && 'Design System'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83D\uDCF1 ", !sidebarCollapsed && 'Mobile Features'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83E\uDDEA ", !sidebarCollapsed && 'Interactive Demos'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83D\uDCCA ", !sidebarCollapsed && 'Performance'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\u2699\uFE0F ", !sidebarCollapsed && 'Configuration'] })] })] }) })), _jsxs("main", { className: "flex-1 p-8 space-y-8", children: [enablePerformanceMonitoring && (_jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-2xl flex items-center gap-3", children: ["\uD83D\uDCCA Desktop Performance Metrics", _jsx(Badge, { variant: "outline", className: "text-base", children: "Real-time" })] }), _jsx(CardDescription, { className: "text-base", children: "Advanced performance monitoring for desktop devices" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-2 xl:grid-cols-4 gap-8 text-center", children: [_jsxs("div", { children: [_jsxs("p", { className: "text-4xl font-bold text-cs-primary", children: [performanceMetrics.renderTime.toFixed(1), "ms"] }), _jsx("p", { className: "text-base text-cs-text-secondary", children: "Render Time" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-4xl font-bold text-cs-secondary", children: [performanceMetrics.memoryUsage.toFixed(1), "%"] }), _jsx("p", { className: "text-base text-cs-text-secondary", children: "Memory Usage" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-4xl font-bold text-cs-accent", children: [performanceMetrics.cpuUsage.toFixed(1), "%"] }), _jsx("p", { className: "text-base text-cs-text-secondary", children: "CPU Usage" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-4xl font-bold text-cs-primary", children: performanceMetrics.fps.toFixed(0) }), _jsx("p", { className: "text-base text-cs-text-secondary", children: "FPS" })] })] }) })] })), _jsx("div", { className: "space-y-8", children: children })] })] })] }));
+};
+export default DesktopLayout;

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

@@ -1,224 +1,39 @@
-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 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
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../card';
+import { Badge } from '../badge';
+import { Button } from '../button';
+export const DesktopLayout = ({ 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 (_jsxs("div", { className: `min-h-screen bg-cs-page-bg ${className}`, children: [showTopBar && (_jsx("div", { className: "bg-cs-surface border-b border-cs-border px-6 py-2", children: _jsxs("div", { className: "flex items-center justify-between text-sm text-cs-text-secondary", children: [_jsx("span", { children: "Stan Design System" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("span", { children: "Desktop Layout" }), enableAdvancedFeatures && _jsx("span", { children: "Advanced Features Enabled" })] })] }) })), showHeader && (_jsx("header", { className: "bg-cs-surface border-b border-cs-border px-8 py-6", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex-1", children: [_jsx("h1", { className: "text-3xl font-bold text-cs-text-primary", children: title }), description && (_jsx("p", { className: "text-lg text-cs-text-secondary mt-3", children: description }))] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Badge, { variant: "outline", className: "text-base", children: "Desktop" }), enableAdvancedFeatures && (_jsx(Badge, { variant: "default", className: "text-base", children: "Advanced" })), enablePerformanceMonitoring && (_jsx(Badge, { variant: "secondary", className: "text-base", children: "Performance" }))] })] }) })), _jsxs("div", { className: "flex flex-1", children: [showSidebar && (_jsx("aside", { className: `bg-cs-surface border-r border-cs-border transition-all duration-300 ${sidebarCollapsed ? 'w-16' : 'w-80'}`, children: _jsxs("div", { className: "p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-6", children: [_jsx("h3", { className: `font-semibold text-cs-text-primary ${sidebarCollapsed ? 'hidden' : 'block'}`, children: "Navigation" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarCollapsed(!sidebarCollapsed), className: "ml-auto", children: sidebarCollapsed ? '→' : '←' })] }), _jsxs("nav", { className: "space-y-2", children: [_jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83C\uDFE0 ", !sidebarCollapsed && 'Dashboard'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83C\uDFA8 ", !sidebarCollapsed && 'Design System'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83D\uDCF1 ", !sidebarCollapsed && 'Mobile Features'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83E\uDDEA ", !sidebarCollapsed && 'Interactive Demos'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\uD83D\uDCCA ", !sidebarCollapsed && 'Performance'] }), _jsxs(Button, { variant: "ghost", className: `w-full justify-start ${sidebarCollapsed ? 'px-2' : 'px-4'}`, children: ["\u2699\uFE0F ", !sidebarCollapsed && 'Configuration'] })] })] }) })), _jsxs("main", { className: "flex-1 p-8 space-y-8", children: [enablePerformanceMonitoring && (_jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-2xl flex items-center gap-3", children: ["\uD83D\uDCCA Desktop Performance Metrics", _jsx(Badge, { variant: "outline", className: "text-base", children: "Real-time" })] }), _jsx(CardDescription, { className: "text-base", children: "Advanced performance monitoring for desktop devices" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-2 xl:grid-cols-4 gap-8 text-center", children: [_jsxs("div", { children: [_jsxs("p", { className: "text-4xl font-bold text-cs-primary", children: [performanceMetrics.renderTime.toFixed(1), "ms"] }), _jsx("p", { className: "text-base text-cs-text-secondary", children: "Render Time" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-4xl font-bold text-cs-secondary", children: [performanceMetrics.memoryUsage.toFixed(1), "%"] }), _jsx("p", { className: "text-base text-cs-text-secondary", children: "Memory Usage" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-4xl font-bold text-cs-accent", children: [performanceMetrics.cpuUsage.toFixed(1), "%"] }), _jsx("p", { className: "text-base text-cs-text-secondary", children: "CPU Usage" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-4xl font-bold text-cs-primary", children: performanceMetrics.fps.toFixed(0) }), _jsx("p", { className: "text-base text-cs-text-secondary", children: "FPS" })] })] }) })] })), _jsx("div", { className: "space-y-8", children: children })] })] })] }));
+};
+export default DesktopLayout;

package/dist/components/ui/layouts/index.esm.js

@@ -1,10 +1,4 @@
-export { MobileLayout, default as MobileLayoutDefault } from './mobile-layout'
-export { TabletLayout, default as TabletLayoutDefault } from './tablet-layout'
-export { DesktopLayout, default as DesktopLayoutDefault } from './desktop-layout'
-export { AdaptiveLayout, default as AdaptiveLayoutDefault, type DeviceType } from './adaptive-layout'
-
-// 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'
+export { MobileLayout, default as MobileLayoutDefault } from './mobile-layout';
+export { TabletLayout, default as TabletLayoutDefault } from './tablet-layout';
+export { DesktopLayout, default as DesktopLayoutDefault } from './desktop-layout';
+export { AdaptiveLayout, default as AdaptiveLayoutDefault } from './adaptive-layout';

package/dist/components/ui/layouts/index.js

@@ -1,10 +1,4 @@
-export { MobileLayout, default as MobileLayoutDefault } from './mobile-layout'
-export { TabletLayout, default as TabletLayoutDefault } from './tablet-layout'
-export { DesktopLayout, default as DesktopLayoutDefault } from './desktop-layout'
-export { AdaptiveLayout, default as AdaptiveLayoutDefault, type DeviceType } from './adaptive-layout'
-
-// 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'
+export { MobileLayout, default as MobileLayoutDefault } from './mobile-layout';
+export { TabletLayout, default as TabletLayoutDefault } from './tablet-layout';
+export { DesktopLayout, default as DesktopLayoutDefault } from './desktop-layout';
+export { AdaptiveLayout, default as AdaptiveLayoutDefault } from './adaptive-layout';