@rakeyshgidwani/roger-ui-bank-theme-jeremy 0.5.3

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

@@ -0,0 +1,6 @@
+/**
+ * Layout Components Index
+ * Exports all layout components for Phase 2 implementation
+ */
+export { ResponsiveGrid, ResponsiveGridItem } from './responsive-grid';
+export { Container, ContentContainer, SectionContainer } from './container';

package/dist/components/ui/layout/responsive-grid.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Responsive Grid Component
+ * Implements Phase 2 responsive grid system as defined in the implementation plan
+ *
+ * Grid Progression:
+ * - xs: 1 column (Single column mobile)
+ * - sm: 2 columns (2 columns small tablet)
+ * - md: 2 columns (2 columns tablet)
+ * - lg: 3 columns (3 columns desktop)
+ * - xl: 4 columns (4 columns large desktop)
+ * - 2xl: 4 columns (4 columns ultra-wide)
+ * - 3xl: 5 columns (5 columns large displays)
+ *
+ * Gap Progression:
+ * - xs: 16px, sm: 20px, md: 24px, lg: 28px, xl: 32px, 2xl: 36px, 3xl: 40px
+ */
+import * as React from 'react';
+export interface ResponsiveGridProps {
+    children: React.ReactNode;
+    columns?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    gaps?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        '3xl'?: string;
+    };
+    pattern?: 'default' | 'content' | 'dashboard' | 'gallery' | 'cards';
+    autoFit?: boolean;
+    minItemWidth?: string;
+    alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
+    'aria-label'?: string;
+    'data-testid'?: string;
+    className?: string;
+}
+export declare const ResponsiveGrid: React.FC<ResponsiveGridProps>;
+export interface ResponsiveGridItemProps {
+    children: React.ReactNode;
+    colSpan?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    rowSpan?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    colStart?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    rowStart?: {
+        xs?: number;
+        sm?: number;
+        md?: number;
+        lg?: number;
+        xl?: number;
+        '2xl'?: number;
+        '3xl'?: number;
+    };
+    alignSelf?: 'auto' | 'start' | 'center' | 'end' | 'stretch';
+    justifySelf?: 'auto' | 'start' | 'center' | 'end' | 'stretch';
+    className?: string;
+    'data-testid'?: string;
+}
+export declare const ResponsiveGridItem: React.FC<ResponsiveGridItemProps>;
+export default ResponsiveGrid;
+//# sourceMappingURL=responsive-grid.d.ts.map

package/dist/components/ui/layout/responsive-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"responsive-grid.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layout/responsive-grid.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/layout/responsive-grid.esm.js

@@ -0,0 +1,124 @@
+/**
+ * Responsive Grid Component
+ * Implements Phase 2 responsive grid system as defined in the implementation plan
+ *
+ * Grid Progression:
+ * - xs: 1 column (Single column mobile)
+ * - sm: 2 columns (2 columns small tablet)
+ * - md: 2 columns (2 columns tablet)
+ * - lg: 3 columns (3 columns desktop)
+ * - xl: 4 columns (4 columns large desktop)
+ * - 2xl: 4 columns (4 columns ultra-wide)
+ * - 3xl: 5 columns (5 columns large displays)
+ *
+ * Gap Progression:
+ * - xs: 16px, sm: 20px, md: 24px, lg: 28px, xl: 32px, 2xl: 36px, 3xl: 40px
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// Pre-defined grid patterns
+const GRID_PATTERNS = {
+    default: {
+        columns: { xs: 1, sm: 2, md: 2, lg: 3, xl: 4, '2xl': 4, '3xl': 5 },
+        gaps: { xs: '16px', sm: '20px', md: '24px', lg: '28px', xl: '32px', '2xl': '36px', '3xl': '40px' }
+    },
+    content: {
+        columns: { xs: 1, sm: 1, md: 2, lg: 2, xl: 3, '2xl': 3, '3xl': 4 },
+        gaps: { xs: '16px', sm: '20px', md: '24px', lg: '28px', xl: '32px', '2xl': '36px', '3xl': '40px' }
+    },
+    dashboard: {
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6, '3xl': 7 },
+        gaps: { xs: '12px', sm: '16px', md: '20px', lg: '24px', xl: '28px', '2xl': '32px', '3xl': '36px' }
+    },
+    gallery: {
+        columns: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6, '2xl': 7, '3xl': 8 },
+        gaps: { xs: '8px', sm: '12px', md: '16px', lg: '20px', xl: '24px', '2xl': '28px', '3xl': '32px' }
+    },
+    cards: {
+        columns: { xs: 1, sm: 1, md: 2, lg: 3, xl: 3, '2xl': 4, '3xl': 4 },
+        gaps: { xs: '20px', sm: '24px', md: '28px', lg: '32px', xl: '36px', '2xl': '40px', '3xl': '44px' }
+    }
+};
+export const ResponsiveGrid = ({ children, columns: customColumns, gaps: customGaps, pattern = 'default', autoFit = false, minItemWidth = '250px', alignItems = 'stretch', justifyItems = 'stretch', 'aria-label': ariaLabel, 'data-testid': testId = 'responsive-grid', className = '', }) => {
+    // Get pattern configuration
+    const patternConfig = GRID_PATTERNS[pattern];
+    // Use custom configuration or fall back to pattern
+    const columns = customColumns || patternConfig.columns;
+    const gaps = customGaps || patternConfig.gaps;
+    // Build CSS custom properties for responsive grid
+    const gridStyle = React.useMemo(() => {
+        const style = {};
+        // Set column configurations
+        Object.entries(columns).forEach(([breakpoint, columnCount]) => {
+            style[`--responsive-grid-columns-${breakpoint}`] = columnCount;
+        });
+        // Set gap configurations
+        Object.entries(gaps).forEach(([breakpoint, gapValue]) => {
+            style[`--responsive-grid-gap-${breakpoint}`] = gapValue;
+        });
+        // Set alignment
+        style['--responsive-grid-align-items'] = alignItems;
+        style['--responsive-grid-justify-items'] = justifyItems;
+        // Set auto-fit configuration
+        if (autoFit) {
+            style['--responsive-grid-min-item-width'] = minItemWidth;
+        }
+        return style;
+    }, [columns, gaps, alignItems, justifyItems, autoFit, minItemWidth]);
+    // Build CSS classes
+    const gridClasses = React.useMemo(() => {
+        const baseClass = 'responsive-grid';
+        const patternClass = `responsive-grid--${pattern}`;
+        const autoFitClass = autoFit ? 'responsive-grid--auto-fit' : '';
+        return [baseClass, patternClass, autoFitClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [pattern, autoFit, className]);
+    return (_jsx("div", { className: gridClasses, style: gridStyle, "aria-label": ariaLabel, "data-testid": testId, children: children }));
+};
+export const ResponsiveGridItem = ({ children, colSpan, rowSpan, colStart, rowStart, alignSelf = 'auto', justifySelf = 'auto', className = '', 'data-testid': testId = 'responsive-grid-item', }) => {
+    // Build CSS custom properties for grid item
+    const itemStyle = React.useMemo(() => {
+        const style = {};
+        // Set column span configurations
+        if (colSpan) {
+            Object.entries(colSpan).forEach(([breakpoint, span]) => {
+                style[`--responsive-grid-item-col-span-${breakpoint}`] = span;
+            });
+        }
+        // Set row span configurations
+        if (rowSpan) {
+            Object.entries(rowSpan).forEach(([breakpoint, span]) => {
+                style[`--responsive-grid-item-row-span-${breakpoint}`] = span;
+            });
+        }
+        // Set column start configurations
+        if (colStart) {
+            Object.entries(colStart).forEach(([breakpoint, start]) => {
+                style[`--responsive-grid-item-col-start-${breakpoint}`] = start;
+            });
+        }
+        // Set row start configurations
+        if (rowStart) {
+            Object.entries(rowStart).forEach(([breakpoint, start]) => {
+                style[`--responsive-grid-item-row-start-${breakpoint}`] = start;
+            });
+        }
+        // Set alignment
+        style['--responsive-grid-item-align-self'] = alignSelf;
+        style['--responsive-grid-item-justify-self'] = justifySelf;
+        return style;
+    }, [colSpan, rowSpan, colStart, rowStart, alignSelf, justifySelf]);
+    // Build CSS classes
+    const itemClasses = React.useMemo(() => {
+        const baseClass = 'responsive-grid-item';
+        const spanClass = colSpan || rowSpan ? 'responsive-grid-item--has-span' : '';
+        const positionClass = colStart || rowStart ? 'responsive-grid-item--has-position' : '';
+        return [baseClass, spanClass, positionClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [colSpan, rowSpan, colStart, rowStart, className]);
+    return (_jsx("div", { className: itemClasses, style: itemStyle, "data-testid": testId, children: children }));
+};
+export default ResponsiveGrid;

package/dist/components/ui/layout/responsive-grid.js

@@ -0,0 +1,124 @@
+/**
+ * Responsive Grid Component
+ * Implements Phase 2 responsive grid system as defined in the implementation plan
+ *
+ * Grid Progression:
+ * - xs: 1 column (Single column mobile)
+ * - sm: 2 columns (2 columns small tablet)
+ * - md: 2 columns (2 columns tablet)
+ * - lg: 3 columns (3 columns desktop)
+ * - xl: 4 columns (4 columns large desktop)
+ * - 2xl: 4 columns (4 columns ultra-wide)
+ * - 3xl: 5 columns (5 columns large displays)
+ *
+ * Gap Progression:
+ * - xs: 16px, sm: 20px, md: 24px, lg: 28px, xl: 32px, 2xl: 36px, 3xl: 40px
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// Pre-defined grid patterns
+const GRID_PATTERNS = {
+    default: {
+        columns: { xs: 1, sm: 2, md: 2, lg: 3, xl: 4, '2xl': 4, '3xl': 5 },
+        gaps: { xs: '16px', sm: '20px', md: '24px', lg: '28px', xl: '32px', '2xl': '36px', '3xl': '40px' }
+    },
+    content: {
+        columns: { xs: 1, sm: 1, md: 2, lg: 2, xl: 3, '2xl': 3, '3xl': 4 },
+        gaps: { xs: '16px', sm: '20px', md: '24px', lg: '28px', xl: '32px', '2xl': '36px', '3xl': '40px' }
+    },
+    dashboard: {
+        columns: { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, '2xl': 6, '3xl': 7 },
+        gaps: { xs: '12px', sm: '16px', md: '20px', lg: '24px', xl: '28px', '2xl': '32px', '3xl': '36px' }
+    },
+    gallery: {
+        columns: { xs: 2, sm: 3, md: 4, lg: 5, xl: 6, '2xl': 7, '3xl': 8 },
+        gaps: { xs: '8px', sm: '12px', md: '16px', lg: '20px', xl: '24px', '2xl': '28px', '3xl': '32px' }
+    },
+    cards: {
+        columns: { xs: 1, sm: 1, md: 2, lg: 3, xl: 3, '2xl': 4, '3xl': 4 },
+        gaps: { xs: '20px', sm: '24px', md: '28px', lg: '32px', xl: '36px', '2xl': '40px', '3xl': '44px' }
+    }
+};
+export const ResponsiveGrid = ({ children, columns: customColumns, gaps: customGaps, pattern = 'default', autoFit = false, minItemWidth = '250px', alignItems = 'stretch', justifyItems = 'stretch', 'aria-label': ariaLabel, 'data-testid': testId = 'responsive-grid', className = '', }) => {
+    // Get pattern configuration
+    const patternConfig = GRID_PATTERNS[pattern];
+    // Use custom configuration or fall back to pattern
+    const columns = customColumns || patternConfig.columns;
+    const gaps = customGaps || patternConfig.gaps;
+    // Build CSS custom properties for responsive grid
+    const gridStyle = React.useMemo(() => {
+        const style = {};
+        // Set column configurations
+        Object.entries(columns).forEach(([breakpoint, columnCount]) => {
+            style[`--responsive-grid-columns-${breakpoint}`] = columnCount;
+        });
+        // Set gap configurations
+        Object.entries(gaps).forEach(([breakpoint, gapValue]) => {
+            style[`--responsive-grid-gap-${breakpoint}`] = gapValue;
+        });
+        // Set alignment
+        style['--responsive-grid-align-items'] = alignItems;
+        style['--responsive-grid-justify-items'] = justifyItems;
+        // Set auto-fit configuration
+        if (autoFit) {
+            style['--responsive-grid-min-item-width'] = minItemWidth;
+        }
+        return style;
+    }, [columns, gaps, alignItems, justifyItems, autoFit, minItemWidth]);
+    // Build CSS classes
+    const gridClasses = React.useMemo(() => {
+        const baseClass = 'responsive-grid';
+        const patternClass = `responsive-grid--${pattern}`;
+        const autoFitClass = autoFit ? 'responsive-grid--auto-fit' : '';
+        return [baseClass, patternClass, autoFitClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [pattern, autoFit, className]);
+    return (_jsx("div", { className: gridClasses, style: gridStyle, "aria-label": ariaLabel, "data-testid": testId, children: children }));
+};
+export const ResponsiveGridItem = ({ children, colSpan, rowSpan, colStart, rowStart, alignSelf = 'auto', justifySelf = 'auto', className = '', 'data-testid': testId = 'responsive-grid-item', }) => {
+    // Build CSS custom properties for grid item
+    const itemStyle = React.useMemo(() => {
+        const style = {};
+        // Set column span configurations
+        if (colSpan) {
+            Object.entries(colSpan).forEach(([breakpoint, span]) => {
+                style[`--responsive-grid-item-col-span-${breakpoint}`] = span;
+            });
+        }
+        // Set row span configurations
+        if (rowSpan) {
+            Object.entries(rowSpan).forEach(([breakpoint, span]) => {
+                style[`--responsive-grid-item-row-span-${breakpoint}`] = span;
+            });
+        }
+        // Set column start configurations
+        if (colStart) {
+            Object.entries(colStart).forEach(([breakpoint, start]) => {
+                style[`--responsive-grid-item-col-start-${breakpoint}`] = start;
+            });
+        }
+        // Set row start configurations
+        if (rowStart) {
+            Object.entries(rowStart).forEach(([breakpoint, start]) => {
+                style[`--responsive-grid-item-row-start-${breakpoint}`] = start;
+            });
+        }
+        // Set alignment
+        style['--responsive-grid-item-align-self'] = alignSelf;
+        style['--responsive-grid-item-justify-self'] = justifySelf;
+        return style;
+    }, [colSpan, rowSpan, colStart, rowStart, alignSelf, justifySelf]);
+    // Build CSS classes
+    const itemClasses = React.useMemo(() => {
+        const baseClass = 'responsive-grid-item';
+        const spanClass = colSpan || rowSpan ? 'responsive-grid-item--has-span' : '';
+        const positionClass = colStart || rowStart ? 'responsive-grid-item--has-position' : '';
+        return [baseClass, spanClass, positionClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [colSpan, rowSpan, colStart, rowStart, className]);
+    return (_jsx("div", { className: itemClasses, style: itemStyle, "data-testid": testId, children: children }));
+};
+export default ResponsiveGrid;

package/dist/components/ui/layout-demo.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const LayoutDemo: React.FC;
+export default LayoutDemo;
+//# sourceMappingURL=layout-demo.d.ts.map

package/dist/components/ui/layout-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/layout-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EA6V9B,CAAA;AAED,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { MobileLayout, TabletLayout, DesktopLayout, AdaptiveLayout } from './layouts';
+import { useAdaptiveLayout } from '../../hooks/use-adaptive-layout.js';
+import { useLayoutPerformance } from '../../hooks/use-layout-performance.js';
+import { useMobileLayout } from '../../hooks/use-mobile-layout.js';
+import { useTabletLayout } from '../../hooks/use-tablet-layout.js';
+export const LayoutDemo = () => {
+    const [activeLayout, setActiveLayout] = useState('adaptive');
+    const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true);
+    const [enableTouchOptimization, setEnableTouchOptimization] = useState(true);
+    const [enableAdvancedFeatures, setEnableAdvancedFeatures] = useState(true);
+    // Hooks
+    useAdaptiveLayout({
+        enablePerformanceOptimization: true,
+        enableTouchOptimization: true,
+        enableBatteryOptimization: true,
+        enableMemoryOptimization: true
+    }, {
+        onDeviceChange: (deviceType) => console.log('Device changed to:', deviceType),
+        onOrientationChange: (orientation) => console.log('Orientation changed to:', orientation),
+        onPerformanceChange: (score) => console.log('Performance score:', score)
+    });
+    const layoutPerformance = useLayoutPerformance({
+        enableLayoutCalculationOptimization: true,
+        enableMemoryManagement: true,
+        enableBatteryOptimization: true,
+        enablePerformanceMonitoring: true
+    }, {
+        onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+        onMemoryWarning: (usage, threshold) => console.log('Memory warning:', usage, threshold),
+        onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow)
+    });
+    const mobileLayout = useMobileLayout({
+        enableTouchTargetOptimization: true,
+        enableGestureSupport: true,
+        enableTouchFeedback: true,
+        enablePerformanceOptimization: true
+    }, {
+        onTouchTargetOptimized: (target) => console.log('Touch target optimized:', target),
+        onGestureDetected: (event) => console.log('Gesture detected:', event),
+        onTouchFeedback: (type, target) => console.log('Touch feedback:', type, target)
+    });
+    useTabletLayout({
+        enableOrientationOptimization: true,
+        enableSplitViewSupport: true,
+        enableKeyboardOptimization: true,
+        enableSafeAreaOptimization: true,
+        enablePerformanceOptimization: true,
+        enableTouchOptimization: true
+    }, {
+        onOrientationChange: (orientation) => console.log('Tablet orientation:', orientation),
+        onSplitViewChange: (isSplitView) => console.log('Split view:', isSplitView),
+        onKeyboardChange: (isVisible) => console.log('Keyboard visible:', isVisible)
+    });
+    // Layout content
+    const renderLayoutContent = () => {
+        const commonContent = (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs(Card, { className: "border-2 border-cs-primary", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: ["\uD83C\uDFA8 Design System", _jsx(Badge, { variant: "default", children: "Core" })] }) }), _jsxs(CardContent, { children: [_jsx("p", { className: "text-sm text-cs-text-secondary mb-3", children: "Complete design system with themes, components, and customization" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: "Components" }), _jsx(Badge, { variant: "outline", children: "Themes" }), _jsx(Badge, { variant: "outline", children: "Customization" })] })] })] }), _jsxs(Card, { className: "border-2 border-cs-secondary", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: ["\uD83D\uDCF1 Mobile Features", _jsx(Badge, { variant: "secondary", children: "Stories 3-6" })] }) }), _jsxs(CardContent, { children: [_jsx("p", { className: "text-sm text-cs-text-secondary mb-3", children: "Mobile-first animations, performance monitoring, touch optimization, and forms" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: "Animations" }), _jsx(Badge, { variant: "outline", children: "Performance" }), _jsx(Badge, { variant: "outline", children: "Touch" }), _jsx(Badge, { variant: "outline", children: "Forms" })] })] })] }), _jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: ["\uD83D\uDE80 Layout System", _jsx(Badge, { variant: "outline", children: "Story 7" })] }) }), _jsxs(CardContent, { children: [_jsx("p", { className: "text-sm text-cs-text-secondary mb-3", children: "Device-specific layouts with responsive excellence and performance optimization" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: "Responsive" }), _jsx(Badge, { variant: "outline", children: "Performance" }), _jsx(Badge, { variant: "outline", children: "Touch" }), _jsx(Badge, { variant: "outline", children: "Adaptive" })] })] })] })] }), showPerformanceMetrics && (_jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDCCA Performance Overview", _jsx(Badge, { variant: "outline", children: "Real-time" })] }), _jsx(CardDescription, { children: "Comprehensive performance metrics across all layout systems" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-6 text-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: layoutPerformance.metrics.performanceScore }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Performance Score" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-secondary", children: layoutPerformance.metrics.fps }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "FPS" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-2xl font-bold text-cs-accent", children: [layoutPerformance.metrics.memoryUsage.toFixed(1), "%"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Memory" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: layoutPerformance.metrics.batteryLevel.toFixed(1) }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Battery" })] })] }) })] })), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Layout Controls" }), _jsx(CardDescription, { children: "Configure and test different layout behaviors" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: activeLayout === 'mobile' ? 'default' : 'outline', onClick: () => setActiveLayout('mobile'), children: "\uD83D\uDCF1 Mobile" }), _jsx(Button, { variant: activeLayout === 'tablet' ? 'default' : 'outline', onClick: () => setActiveLayout('tablet'), children: "\uD83D\uDCF1 Tablet" }), _jsx(Button, { variant: activeLayout === 'desktop' ? 'default' : 'outline', onClick: () => setActiveLayout('desktop'), children: "\uD83D\uDCBB Desktop" }), _jsx(Button, { variant: activeLayout === 'adaptive' ? 'default' : 'outline', onClick: () => setActiveLayout('adaptive'), children: "\uD83D\uDD04 Adaptive" })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: showPerformanceMetrics ? 'default' : 'outline', size: "sm", onClick: () => setShowPerformanceMetrics(!showPerformanceMetrics), children: [showPerformanceMetrics ? 'Hide' : 'Show', " Performance"] }), _jsxs(Button, { variant: enableTouchOptimization ? 'default' : 'outline', size: "sm", onClick: () => setEnableTouchOptimization(!enableTouchOptimization), children: [enableTouchOptimization ? 'Disable' : 'Enable', " Touch"] }), _jsxs(Button, { variant: enableAdvancedFeatures ? 'default' : 'outline', size: "sm", onClick: () => setEnableAdvancedFeatures(!enableAdvancedFeatures), children: [enableAdvancedFeatures ? 'Disable' : 'Enable', " Advanced"] })] })] })] }), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Optimization Status" }), _jsx(CardDescription, { children: "Current optimization status and recommendations" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Layout Performance:" }), _jsx(Badge, { variant: layoutPerformance.isPerformanceOptimal ? 'default' : 'secondary', children: layoutPerformance.isPerformanceOptimal ? 'Optimal' : 'Needs Optimization' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Memory Usage:" }), _jsx(Badge, { variant: layoutPerformance.isMemoryOptimal ? 'default' : 'secondary', children: layoutPerformance.isMemoryOptimal ? 'Optimal' : 'High Usage' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Battery Status:" }), _jsx(Badge, { variant: layoutPerformance.isBatteryOptimal ? 'default' : 'secondary', children: layoutPerformance.isBatteryOptimal ? 'Good' : 'Low Battery' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Touch Optimization:" }), _jsx(Badge, { variant: mobileLayout.isTouchOptimized ? 'default' : 'secondary', children: mobileLayout.isTouchOptimized ? 'Optimized' : 'Needs Optimization' })] })] }), layoutPerformance.layoutOptimizations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "Recommendations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: layoutPerformance.layoutOptimizations.map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] }))] })] })] }));
+        switch (activeLayout) {
+            case 'mobile':
+                return (_jsx(MobileLayout, { title: "Mobile Layout Demo", description: "Touch-optimized mobile layout with performance monitoring", enableTouchOptimization: enableTouchOptimization, enablePerformanceMonitoring: showPerformanceMetrics, children: commonContent }));
+            case 'tablet':
+                return (_jsx(TabletLayout, { title: "Tablet Layout Demo", description: "Tablet-optimized layout with orientation and split view support", enableTouchOptimization: enableTouchOptimization, enablePerformanceMonitoring: showPerformanceMetrics, children: commonContent }));
+            case 'desktop':
+                return (_jsx(DesktopLayout, { title: "Desktop Layout Demo", description: "Desktop-optimized layout with advanced features and performance monitoring", enableAdvancedFeatures: enableAdvancedFeatures, enablePerformanceMonitoring: showPerformanceMetrics, children: commonContent }));
+            case 'adaptive':
+            default:
+                return (_jsx(AdaptiveLayout, { title: "Adaptive Layout Demo", description: "Automatically adapts to different device types with optimal layouts", enableTouchOptimization: enableTouchOptimization, enablePerformanceMonitoring: showPerformanceMetrics, enableAdvancedFeatures: enableAdvancedFeatures, children: commonContent }));
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-cs-text-primary mb-2", children: "\uD83D\uDE80 Device-Specific Layout & Responsive Excellence" }), _jsx("p", { className: "text-lg text-cs-text-secondary mb-4", children: "Story 7 Implementation - Comprehensive layout system with device-specific optimizations" }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Story 7" }), _jsx(Badge, { variant: "outline", children: "Responsive Design" }), _jsx(Badge, { variant: "secondary", children: "Performance" }), _jsx(Badge, { variant: "outline", children: "Touch Optimization" })] })] }), renderLayoutContent()] }));
+};
+export default LayoutDemo;

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

@@ -0,0 +1,77 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { MobileLayout, TabletLayout, DesktopLayout, AdaptiveLayout } from './layouts';
+import { useAdaptiveLayout } from '../../hooks/use-adaptive-layout.js';
+import { useLayoutPerformance } from '../../hooks/use-layout-performance.js';
+import { useMobileLayout } from '../../hooks/use-mobile-layout.js';
+import { useTabletLayout } from '../../hooks/use-tablet-layout.js';
+export const LayoutDemo = () => {
+    const [activeLayout, setActiveLayout] = useState('adaptive');
+    const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true);
+    const [enableTouchOptimization, setEnableTouchOptimization] = useState(true);
+    const [enableAdvancedFeatures, setEnableAdvancedFeatures] = useState(true);
+    // Hooks
+    useAdaptiveLayout({
+        enablePerformanceOptimization: true,
+        enableTouchOptimization: true,
+        enableBatteryOptimization: true,
+        enableMemoryOptimization: true
+    }, {
+        onDeviceChange: (deviceType) => console.log('Device changed to:', deviceType),
+        onOrientationChange: (orientation) => console.log('Orientation changed to:', orientation),
+        onPerformanceChange: (score) => console.log('Performance score:', score)
+    });
+    const layoutPerformance = useLayoutPerformance({
+        enableLayoutCalculationOptimization: true,
+        enableMemoryManagement: true,
+        enableBatteryOptimization: true,
+        enablePerformanceMonitoring: true
+    }, {
+        onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+        onMemoryWarning: (usage, threshold) => console.log('Memory warning:', usage, threshold),
+        onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow)
+    });
+    const mobileLayout = useMobileLayout({
+        enableTouchTargetOptimization: true,
+        enableGestureSupport: true,
+        enableTouchFeedback: true,
+        enablePerformanceOptimization: true
+    }, {
+        onTouchTargetOptimized: (target) => console.log('Touch target optimized:', target),
+        onGestureDetected: (event) => console.log('Gesture detected:', event),
+        onTouchFeedback: (type, target) => console.log('Touch feedback:', type, target)
+    });
+    useTabletLayout({
+        enableOrientationOptimization: true,
+        enableSplitViewSupport: true,
+        enableKeyboardOptimization: true,
+        enableSafeAreaOptimization: true,
+        enablePerformanceOptimization: true,
+        enableTouchOptimization: true
+    }, {
+        onOrientationChange: (orientation) => console.log('Tablet orientation:', orientation),
+        onSplitViewChange: (isSplitView) => console.log('Split view:', isSplitView),
+        onKeyboardChange: (isVisible) => console.log('Keyboard visible:', isVisible)
+    });
+    // Layout content
+    const renderLayoutContent = () => {
+        const commonContent = (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs(Card, { className: "border-2 border-cs-primary", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: ["\uD83C\uDFA8 Design System", _jsx(Badge, { variant: "default", children: "Core" })] }) }), _jsxs(CardContent, { children: [_jsx("p", { className: "text-sm text-cs-text-secondary mb-3", children: "Complete design system with themes, components, and customization" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: "Components" }), _jsx(Badge, { variant: "outline", children: "Themes" }), _jsx(Badge, { variant: "outline", children: "Customization" })] })] })] }), _jsxs(Card, { className: "border-2 border-cs-secondary", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: ["\uD83D\uDCF1 Mobile Features", _jsx(Badge, { variant: "secondary", children: "Stories 3-6" })] }) }), _jsxs(CardContent, { children: [_jsx("p", { className: "text-sm text-cs-text-secondary mb-3", children: "Mobile-first animations, performance monitoring, touch optimization, and forms" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: "Animations" }), _jsx(Badge, { variant: "outline", children: "Performance" }), _jsx(Badge, { variant: "outline", children: "Touch" }), _jsx(Badge, { variant: "outline", children: "Forms" })] })] })] }), _jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "text-lg flex items-center gap-2", children: ["\uD83D\uDE80 Layout System", _jsx(Badge, { variant: "outline", children: "Story 7" })] }) }), _jsxs(CardContent, { children: [_jsx("p", { className: "text-sm text-cs-text-secondary mb-3", children: "Device-specific layouts with responsive excellence and performance optimization" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: "Responsive" }), _jsx(Badge, { variant: "outline", children: "Performance" }), _jsx(Badge, { variant: "outline", children: "Touch" }), _jsx(Badge, { variant: "outline", children: "Adaptive" })] })] })] })] }), showPerformanceMetrics && (_jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDCCA Performance Overview", _jsx(Badge, { variant: "outline", children: "Real-time" })] }), _jsx(CardDescription, { children: "Comprehensive performance metrics across all layout systems" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-6 text-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: layoutPerformance.metrics.performanceScore }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Performance Score" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-secondary", children: layoutPerformance.metrics.fps }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "FPS" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-2xl font-bold text-cs-accent", children: [layoutPerformance.metrics.memoryUsage.toFixed(1), "%"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Memory" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: layoutPerformance.metrics.batteryLevel.toFixed(1) }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Battery" })] })] }) })] })), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Layout Controls" }), _jsx(CardDescription, { children: "Configure and test different layout behaviors" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsx(Button, { variant: activeLayout === 'mobile' ? 'default' : 'outline', onClick: () => setActiveLayout('mobile'), children: "\uD83D\uDCF1 Mobile" }), _jsx(Button, { variant: activeLayout === 'tablet' ? 'default' : 'outline', onClick: () => setActiveLayout('tablet'), children: "\uD83D\uDCF1 Tablet" }), _jsx(Button, { variant: activeLayout === 'desktop' ? 'default' : 'outline', onClick: () => setActiveLayout('desktop'), children: "\uD83D\uDCBB Desktop" }), _jsx(Button, { variant: activeLayout === 'adaptive' ? 'default' : 'outline', onClick: () => setActiveLayout('adaptive'), children: "\uD83D\uDD04 Adaptive" })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: showPerformanceMetrics ? 'default' : 'outline', size: "sm", onClick: () => setShowPerformanceMetrics(!showPerformanceMetrics), children: [showPerformanceMetrics ? 'Hide' : 'Show', " Performance"] }), _jsxs(Button, { variant: enableTouchOptimization ? 'default' : 'outline', size: "sm", onClick: () => setEnableTouchOptimization(!enableTouchOptimization), children: [enableTouchOptimization ? 'Disable' : 'Enable', " Touch"] }), _jsxs(Button, { variant: enableAdvancedFeatures ? 'default' : 'outline', size: "sm", onClick: () => setEnableAdvancedFeatures(!enableAdvancedFeatures), children: [enableAdvancedFeatures ? 'Disable' : 'Enable', " Advanced"] })] })] })] }), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Optimization Status" }), _jsx(CardDescription, { children: "Current optimization status and recommendations" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Layout Performance:" }), _jsx(Badge, { variant: layoutPerformance.isPerformanceOptimal ? 'default' : 'secondary', children: layoutPerformance.isPerformanceOptimal ? 'Optimal' : 'Needs Optimization' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Memory Usage:" }), _jsx(Badge, { variant: layoutPerformance.isMemoryOptimal ? 'default' : 'secondary', children: layoutPerformance.isMemoryOptimal ? 'Optimal' : 'High Usage' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Battery Status:" }), _jsx(Badge, { variant: layoutPerformance.isBatteryOptimal ? 'default' : 'secondary', children: layoutPerformance.isBatteryOptimal ? 'Good' : 'Low Battery' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Touch Optimization:" }), _jsx(Badge, { variant: mobileLayout.isTouchOptimized ? 'default' : 'secondary', children: mobileLayout.isTouchOptimized ? 'Optimized' : 'Needs Optimization' })] })] }), layoutPerformance.layoutOptimizations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "Recommendations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: layoutPerformance.layoutOptimizations.map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] }))] })] })] }));
+        switch (activeLayout) {
+            case 'mobile':
+                return (_jsx(MobileLayout, { title: "Mobile Layout Demo", description: "Touch-optimized mobile layout with performance monitoring", enableTouchOptimization: enableTouchOptimization, enablePerformanceMonitoring: showPerformanceMetrics, children: commonContent }));
+            case 'tablet':
+                return (_jsx(TabletLayout, { title: "Tablet Layout Demo", description: "Tablet-optimized layout with orientation and split view support", enableTouchOptimization: enableTouchOptimization, enablePerformanceMonitoring: showPerformanceMetrics, children: commonContent }));
+            case 'desktop':
+                return (_jsx(DesktopLayout, { title: "Desktop Layout Demo", description: "Desktop-optimized layout with advanced features and performance monitoring", enableAdvancedFeatures: enableAdvancedFeatures, enablePerformanceMonitoring: showPerformanceMetrics, children: commonContent }));
+            case 'adaptive':
+            default:
+                return (_jsx(AdaptiveLayout, { title: "Adaptive Layout Demo", description: "Automatically adapts to different device types with optimal layouts", enableTouchOptimization: enableTouchOptimization, enablePerformanceMonitoring: showPerformanceMetrics, enableAdvancedFeatures: enableAdvancedFeatures, children: commonContent }));
+        }
+    };
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold text-cs-text-primary mb-2", children: "\uD83D\uDE80 Device-Specific Layout & Responsive Excellence" }), _jsx("p", { className: "text-lg text-cs-text-secondary mb-4", children: "Story 7 Implementation - Comprehensive layout system with device-specific optimizations" }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Story 7" }), _jsx(Badge, { variant: "outline", children: "Responsive Design" }), _jsx(Badge, { variant: "secondary", children: "Performance" }), _jsx(Badge, { variant: "outline", children: "Touch Optimization" })] })] }), renderLayoutContent()] }));
+};
+export default LayoutDemo;

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+export type DeviceType = 'mobile' | 'tablet' | 'desktop';
+export interface AdaptiveLayoutProps {
+    children: ReactNode;
+    title?: string;
+    description?: string;
+    showHeader?: boolean;
+    showSidebar?: boolean;
+    showFooter?: boolean;
+    enableTouchOptimization?: boolean;
+    enablePerformanceMonitoring?: boolean;
+    enableAdvancedFeatures?: boolean;
+    className?: string;
+}
+export declare const AdaptiveLayout: React.FC<AdaptiveLayoutProps>;
+export default AdaptiveLayout;
+//# sourceMappingURL=adaptive-layout.d.ts.map

package/dist/components/ui/layouts/adaptive-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"adaptive-layout.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layouts/adaptive-layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAKvD,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;AAExD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8FxD,CAAA;AAED,eAAe,cAAc,CAAA"}

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

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { MobileLayout } from './mobile-layout.js';
+import { TabletLayout } from './tablet-layout.js';
+import { DesktopLayout } from './desktop-layout.js';
+export const AdaptiveLayout = ({ children, title = 'Adaptive Layout', description = 'Automatically adapts to different device types with optimal layouts', showHeader = true, showSidebar = true, showFooter = false, enableTouchOptimization = true, enablePerformanceMonitoring = true, enableAdvancedFeatures = true, className = '' }) => {
+    const [deviceType, setDeviceType] = useState('desktop');
+    // Device detection and adaptation
+    useEffect(() => {
+        const detectDevice = () => {
+            const width = window.innerWidth;
+            // Device type detection based on screen size
+            if (width < 768) {
+                setDeviceType('mobile');
+            }
+            else if (width < 1024) {
+                setDeviceType('tablet');
+            }
+            else {
+                setDeviceType('desktop');
+            }
+        };
+        detectDevice();
+        window.addEventListener('resize', detectDevice);
+        window.addEventListener('orientationchange', detectDevice);
+        return () => {
+            window.removeEventListener('resize', detectDevice);
+            window.removeEventListener('orientationchange', detectDevice);
+        };
+    }, []);
+    // Render appropriate layout based on device type
+    const renderLayout = () => {
+        const commonProps = {
+            title,
+            description,
+            showHeader,
+            enablePerformanceMonitoring,
+            className
+        };
+        switch (deviceType) {
+            case 'mobile':
+                return (_jsx(MobileLayout, { ...commonProps, showFooter: showFooter, enableTouchOptimization: enableTouchOptimization, children: children }));
+            case 'tablet':
+                return (_jsx(TabletLayout, { ...commonProps, showSidebar: showSidebar, enableTouchOptimization: enableTouchOptimization, children: children }));
+            case 'desktop':
+                return (_jsx(DesktopLayout, { ...commonProps, showSidebar: showSidebar, enableAdvancedFeatures: enableAdvancedFeatures, children: children }));
+            default:
+                return _jsx("div", { children: children });
+        }
+    };
+    return (_jsx("div", { className: className, children: renderLayout() }));
+};
+export default AdaptiveLayout;