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

package/dist/components/ui/input.esm.js

@@ -1,35 +1,16 @@
-import * as React from "react"
-
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  variant?: 'default' | 'error' | 'success' | 'warning' | 'loading'
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  state?: 'normal' | 'focused' | 'disabled' | 'readonly'
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type = 'text', variant = 'default', size = 'md', state = 'normal', ...props }, ref) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const Input = React.forwardRef(({ className, type = 'text', variant = 'default', size = 'md', state = 'normal', ...props }, ref) => {
     // Build semantic CSS classes using BEM methodology
-    const baseClass = 'input'
-    const variantClass = `input--variant-${variant}`
-    const sizeClass = `input--size-${size}`
-    const stateClass = `input--state-${state}`
-
+    const baseClass = 'input';
+    const variantClass = `input--variant-${variant}`;
+    const sizeClass = `input--size-${size}`;
+    const stateClass = `input--state-${state}`;
     // Combine classes
     const inputClasses = [baseClass, variantClass, sizeClass, stateClass, className]
-      .filter(Boolean)
-      .join(' ')
-
-    return (
-      <input
-        type={type}
-        className={inputClasses}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("input", { type: type, className: inputClasses, ref: ref, ...props }));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/components/ui/input.js

@@ -1,35 +1,16 @@
-import * as React from "react"
-
-export interface InputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  variant?: 'default' | 'error' | 'success' | 'warning' | 'loading'
-  size?: 'sm' | 'md' | 'lg' | 'xl'
-  state?: 'normal' | 'focused' | 'disabled' | 'readonly'
-}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type = 'text', variant = 'default', size = 'md', state = 'normal', ...props }, ref) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+const Input = React.forwardRef(({ className, type = 'text', variant = 'default', size = 'md', state = 'normal', ...props }, ref) => {
     // Build semantic CSS classes using BEM methodology
-    const baseClass = 'input'
-    const variantClass = `input--variant-${variant}`
-    const sizeClass = `input--size-${size}`
-    const stateClass = `input--state-${state}`
-
+    const baseClass = 'input';
+    const variantClass = `input--variant-${variant}`;
+    const sizeClass = `input--size-${size}`;
+    const stateClass = `input--state-${state}`;
     // Combine classes
     const inputClasses = [baseClass, variantClass, sizeClass, stateClass, className]
-      .filter(Boolean)
-      .join(' ')
-
-    return (
-      <input
-        type={type}
-        className={inputClasses}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = "Input"
-
-export { Input }
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("input", { type: type, className: inputClasses, ref: ref, ...props }));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/components/ui/label.esm.js

@@ -1,16 +1,6 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={`label ${className || ''}`}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: `label ${className || ''}`, ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };

package/dist/components/ui/label.js

@@ -1,16 +1,6 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={`label ${className || ''}`}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx(LabelPrimitive.Root, { ref: ref, className: `label ${className || ''}`, ...props })));
+Label.displayName = LabelPrimitive.Root.displayName;
+export { Label };

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

@@ -1,367 +1,76 @@
-import React, { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card'
-import { Badge } from './badge'
-import { Button } from './button'
-import { 
-  MobileLayout, 
-  TabletLayout, 
-  DesktopLayout, 
-  AdaptiveLayout
-} from './layouts'
-import { useAdaptiveLayout } from '../../hooks/use-adaptive-layout'
-import { useLayoutPerformance } from '../../hooks/use-layout-performance'
-import { useMobileLayout } from '../../hooks/use-mobile-layout'
-import { useTabletLayout } from '../../hooks/use-tablet-layout'
-
-export const LayoutDemo: React.FC = () => {
-  const [activeLayout, setActiveLayout] = useState<'mobile' | 'tablet' | 'desktop' | 'adaptive'>('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 = (
-      <div className="space-y-6">
-        {/* Feature Cards */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          <Card className="border-2 border-cs-primary">
-            <CardHeader className="pb-3">
-              <CardTitle className="text-lg flex items-center gap-2">
-                🎨 Design System
-                <Badge variant="default">Core</Badge>
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-cs-text-secondary mb-3">
-                Complete design system with themes, components, and customization
-              </p>
-              <div className="flex items-center gap-2">
-                <Badge variant="outline">Components</Badge>
-                <Badge variant="outline">Themes</Badge>
-                <Badge variant="outline">Customization</Badge>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card className="border-2 border-cs-secondary">
-            <CardHeader className="pb-3">
-              <CardTitle className="text-lg flex items-center gap-2">
-                📱 Mobile Features
-                <Badge variant="secondary">Stories 3-6</Badge>
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-cs-text-secondary mb-3">
-                Mobile-first animations, performance monitoring, touch optimization, and forms
-              </p>
-              <div className="flex items-center gap-2">
-                <Badge variant="outline">Animations</Badge>
-                <Badge variant="outline">Performance</Badge>
-                <Badge variant="outline">Touch</Badge>
-                <Badge variant="outline">Forms</Badge>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card className="border-2 border-cs-accent">
-            <CardHeader className="pb-3">
-              <CardTitle className="text-lg flex items-center gap-2">
-                🚀 Layout System
-                <Badge variant="outline">Story 7</Badge>
-              </CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-cs-text-secondary mb-3">
-                Device-specific layouts with responsive excellence and performance optimization
-              </p>
-              <div className="flex items-center gap-2">
-                <Badge variant="outline">Responsive</Badge>
-                <Badge variant="outline">Performance</Badge>
-                <Badge variant="outline">Touch</Badge>
-                <Badge variant="outline">Adaptive</Badge>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Performance Overview */}
-        {showPerformanceMetrics && (
-          <Card className="border-2 border-cs-accent">
-            <CardHeader>
-              <CardTitle className="text-xl flex items-center gap-2">
-                📊 Performance Overview
-                <Badge variant="outline">Real-time</Badge>
-              </CardTitle>
-              <CardDescription>
-                Comprehensive performance metrics across all layout systems
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 text-center">
-                <div>
-                  <p className="text-2xl font-bold text-cs-primary">
-                    {layoutPerformance.metrics.performanceScore}
-                  </p>
-                  <p className="text-sm text-cs-text-secondary">Performance Score</p>
-                </div>
-                <div>
-                  <p className="text-2xl font-bold text-cs-secondary">
-                    {layoutPerformance.metrics.fps}
-                  </p>
-                  <p className="text-sm text-cs-text-secondary">FPS</p>
-                </div>
-                <div>
-                  <p className="text-2xl font-bold text-cs-accent">
-                    {layoutPerformance.metrics.memoryUsage.toFixed(1)}%
-                  </p>
-                  <p className="text-sm text-cs-text-secondary">Memory</p>
-                </div>
-                <div>
-                  <p className="text-2xl font-bold text-cs-primary">
-                    {layoutPerformance.metrics.batteryLevel.toFixed(1)}
-                  </p>
-                  <p className="text-sm text-cs-text-secondary">Battery</p>
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Layout Controls */}
-        <Card className="border border-cs-border">
-          <CardHeader>
-            <CardTitle className="text-lg">Layout Controls</CardTitle>
-            <CardDescription>
-              Configure and test different layout behaviors
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex flex-wrap gap-4">
-              <Button
-                variant={activeLayout === 'mobile' ? 'default' : 'outline'}
-                onClick={() => setActiveLayout('mobile')}
-              >
-                📱 Mobile
-              </Button>
-              <Button
-                variant={activeLayout === 'tablet' ? 'default' : 'outline'}
-                onClick={() => setActiveLayout('tablet')}
-              >
-                📱 Tablet
-              </Button>
-              <Button
-                variant={activeLayout === 'desktop' ? 'default' : 'outline'}
-                onClick={() => setActiveLayout('desktop')}
-              >
-                💻 Desktop
-              </Button>
-              <Button
-                variant={activeLayout === 'adaptive' ? 'default' : 'outline'}
-                onClick={() => setActiveLayout('adaptive')}
-              >
-                🔄 Adaptive
-              </Button>
-            </div>
-
-            <div className="flex flex-wrap gap-4">
-              <Button
-                variant={showPerformanceMetrics ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setShowPerformanceMetrics(!showPerformanceMetrics)}
-              >
-                {showPerformanceMetrics ? 'Hide' : 'Show'} Performance
-              </Button>
-              <Button
-                variant={enableTouchOptimization ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setEnableTouchOptimization(!enableTouchOptimization)}
-              >
-                {enableTouchOptimization ? 'Disable' : 'Enable'} Touch
-              </Button>
-              <Button
-                variant={enableAdvancedFeatures ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setEnableAdvancedFeatures(!enableAdvancedFeatures)}
-              >
-                {enableAdvancedFeatures ? 'Disable' : 'Enable'} Advanced
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Optimization Status */}
-        <Card className="border border-cs-border">
-          <CardHeader>
-            <CardTitle className="text-lg">Optimization Status</CardTitle>
-            <CardDescription>
-              Current optimization status and recommendations
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Layout Performance:</span>
-                <Badge variant={layoutPerformance.isPerformanceOptimal ? 'default' : 'secondary'}>
-                  {layoutPerformance.isPerformanceOptimal ? 'Optimal' : 'Needs Optimization'}
-                </Badge>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Memory Usage:</span>
-                <Badge variant={layoutPerformance.isMemoryOptimal ? 'default' : 'secondary'}>
-                  {layoutPerformance.isMemoryOptimal ? 'Optimal' : 'High Usage'}
-                </Badge>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Battery Status:</span>
-                <Badge variant={layoutPerformance.isBatteryOptimal ? 'default' : 'secondary'}>
-                  {layoutPerformance.isBatteryOptimal ? 'Good' : 'Low Battery'}
-                </Badge>
-              </div>
-              <div className="flex items-center justify-between">
-                <span className="text-sm">Touch Optimization:</span>
-                <Badge variant={mobileLayout.isTouchOptimized ? 'default' : 'secondary'}>
-                  {mobileLayout.isTouchOptimized ? 'Optimized' : 'Needs Optimization'}
-                </Badge>
-              </div>
-            </div>
-
-            {layoutPerformance.layoutOptimizations.length > 0 && (
-              <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-                <h4 className="font-medium text-sm mb-2">Recommendations:</h4>
-                <ul className="text-xs text-cs-text-secondary space-y-1">
-                  {layoutPerformance.layoutOptimizations.map((optimization, index) => (
-                    <li key={index}>• {optimization}</li>
-                  ))}
-                </ul>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-    )
-
-    switch (activeLayout) {
-      case 'mobile':
-        return (
-          <MobileLayout
-            title="Mobile Layout Demo"
-            description="Touch-optimized mobile layout with performance monitoring"
-            enableTouchOptimization={enableTouchOptimization}
-            enablePerformanceMonitoring={showPerformanceMetrics}
-          >
-            {commonContent}
-          </MobileLayout>
-        )
-      
-      case 'tablet':
-        return (
-          <TabletLayout
-            title="Tablet Layout Demo"
-            description="Tablet-optimized layout with orientation and split view support"
-            enableTouchOptimization={enableTouchOptimization}
-            enablePerformanceMonitoring={showPerformanceMetrics}
-          >
-            {commonContent}
-          </TabletLayout>
-        )
-      
-      case 'desktop':
-        return (
-          <DesktopLayout
-            title="Desktop Layout Demo"
-            description="Desktop-optimized layout with advanced features and performance monitoring"
-            enableAdvancedFeatures={enableAdvancedFeatures}
-            enablePerformanceMonitoring={showPerformanceMetrics}
-          >
-            {commonContent}
-          </DesktopLayout>
-        )
-      
-      case 'adaptive':
-      default:
-        return (
-          <AdaptiveLayout
-            title="Adaptive Layout Demo"
-            description="Automatically adapts to different device types with optimal layouts"
-            enableTouchOptimization={enableTouchOptimization}
-            enablePerformanceMonitoring={showPerformanceMetrics}
-            enableAdvancedFeatures={enableAdvancedFeatures}
-          >
-            {commonContent}
-          </AdaptiveLayout>
-        )
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold text-cs-text-primary mb-2">
-          🚀 Device-Specific Layout & Responsive Excellence
-        </h1>
-        <p className="text-lg text-cs-text-secondary mb-4">
-          Story 7 Implementation - Comprehensive layout system with device-specific optimizations
-        </p>
-        <div className="flex items-center justify-center gap-2">
-          <Badge variant="default">Story 7</Badge>
-          <Badge variant="outline">Responsive Design</Badge>
-          <Badge variant="secondary">Performance</Badge>
-          <Badge variant="outline">Touch Optimization</Badge>
-        </div>
-      </div>
-
-      {/* Layout Demo */}
-      {renderLayoutContent()}
-    </div>
-  )
-}
-
-export default LayoutDemo
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card';
+import { Badge } from './badge';
+import { Button } from './button';
+import { MobileLayout, TabletLayout, DesktopLayout, AdaptiveLayout } from './layouts';
+import { useAdaptiveLayout } from '../../hooks/use-adaptive-layout';
+import { useLayoutPerformance } from '../../hooks/use-layout-performance';
+import { useMobileLayout } from '../../hooks/use-mobile-layout';
+import { useTabletLayout } from '../../hooks/use-tablet-layout';
+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;