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

package/dist/components/ui/hardware-acceleration-demo.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { useHardwareAcceleration } from '../../hooks/use-hardware-acceleration.js';
+import { useBatteryOptimization } from '../../hooks/use-battery-optimization.js';
+export const HardwareAccelerationDemo = () => {
+    const [showGPUInfo, setShowGPUInfo] = useState(true);
+    const [showPerformanceMetrics, setShowPerformanceMetrics] = useState(true);
+    const [showBatteryInfo, setShowBatteryInfo] = useState(true);
+    const [enableHardwareAcceleration, setEnableHardwareAcceleration] = useState(true);
+    const [enableBatteryOptimization, setEnableBatteryOptimization] = useState(true);
+    const [error, setError] = useState(null);
+    // Hooks with error handling
+    const hardwareAcceleration = useHardwareAcceleration({
+        enableGPUMonitoring: true,
+        enablePerformanceTracking: true,
+        enableBatteryOptimization: true,
+        enableAutomaticOptimization: true
+    }, {
+        onGPUDetected: (gpuInfo) => console.log('GPU detected:', gpuInfo),
+        onPerformanceWarning: (warning, metrics) => console.log('Performance warning:', warning, metrics),
+        onBatteryWarning: (level, isLow) => console.log('Battery warning:', level, isLow),
+        onOptimizationApplied: (optimization) => console.log('Optimization applied:', optimization)
+    });
+    const batteryOptimization = useBatteryOptimization({
+        enableBatteryMonitoring: true,
+        enablePerformanceThrottling: true,
+        enableUserPreferences: true,
+        enableAdaptiveOptimization: true
+    }, {
+        onBatteryStatusChange: (status) => console.log('Battery status changed:', status),
+        onLowBatteryWarning: (status) => console.log('Low battery warning:', status),
+        onCriticalBatteryWarning: (status) => console.log('Critical battery warning:', status),
+        onPerformanceThrottled: (level, reason) => console.log('Performance throttled:', level, reason),
+        onOptimizationApplied: (optimization) => console.log('Battery optimization applied:', optimization)
+    });
+    // Error boundary effect
+    useEffect(() => {
+        const handleError = (error) => {
+            console.error('Hardware acceleration demo error:', error);
+            setError(error.message);
+        };
+        window.addEventListener('error', handleError);
+        return () => window.removeEventListener('error', handleError);
+    }, []);
+    // Demo animations with hardware acceleration
+    const [animationState, setAnimationState] = useState('idle');
+    const [animationType, setAnimationType] = useState('basic');
+    const startAnimation = useCallback(() => {
+        setAnimationState('running');
+        setTimeout(() => setAnimationState('idle'), 3000);
+    }, []);
+    const pauseAnimation = useCallback(() => {
+        setAnimationState('paused');
+    }, []);
+    const resumeAnimation = useCallback(() => {
+        setAnimationState('running');
+    }, []);
+    // Get animation classes based on type
+    const getAnimationClasses = useCallback((type) => {
+        const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out';
+        switch (type) {
+            case 'basic':
+                return `${baseClasses} bg-cs-primary hover:bg-cs-secondary`;
+            case 'gpu':
+                return `${baseClasses} bg-cs-secondary gpu-optimized hover:bg-cs-accent`;
+            case 'transform3d':
+                return `${baseClasses} bg-cs-accent transform3d-optimized hover:bg-cs-primary`;
+            case 'performance':
+                return `${baseClasses} bg-cs-primary performance-accelerated hover:bg-cs-secondary`;
+            default:
+                return baseClasses;
+        }
+    }, []);
+    // Get animation styles based on state
+    const getAnimationStyles = useCallback((state) => {
+        switch (state) {
+            case 'running':
+                return {
+                    transform: 'translate3d(100px, 0, 0) rotate(360deg) scale(1.2)',
+                    opacity: 0.8
+                };
+            case 'paused':
+                return {
+                    transform: 'translate3d(50px, 0, 0) rotate(180deg) scale(1.1)',
+                    opacity: 0.9
+                };
+            default:
+                return {
+                    transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                    opacity: 1
+                };
+        }
+    }, []);
+    // Show error if any
+    if (error) {
+        return (_jsxs("div", { className: "p-6 bg-red-50 border border-red-200 rounded-lg", children: [_jsx("h2", { className: "text-lg font-semibold text-red-800 mb-2", children: "Error Loading Hardware Acceleration Demo" }), _jsx("p", { className: "text-red-600 mb-4", children: error }), _jsx(Button, { onClick: () => setError(null), variant: "outline", children: "Try Again" })] }));
+    }
+    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 Hardware Acceleration & GPU Optimization" }), _jsx("p", { className: "text-lg text-cs-text-secondary mb-4", children: "Story 8 Implementation - Advanced hardware acceleration with GPU optimization and battery awareness" }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Story 8" }), _jsx(Badge, { variant: "outline", children: "Hardware Acceleration" }), _jsx(Badge, { variant: "secondary", children: "GPU Optimization" }), _jsx(Badge, { variant: "outline", children: "Battery Optimization" })] })] }), showGPUInfo && hardwareAcceleration.gpuInfo && (_jsxs(Card, { className: "border-2 border-cs-primary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83C\uDFAE GPU Information", _jsx(Badge, { variant: hardwareAcceleration.isGPUSupported ? 'default' : 'secondary', children: hardwareAcceleration.isGPUSupported ? 'Supported' : 'Not Supported' })] }), _jsx(CardDescription, { children: "Real-time GPU capability detection and WebGL support information" })] }), _jsx(CardContent, { children: _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Vendor:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.vendor })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Renderer:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.renderer })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Version:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.version })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "WebGL Support:" }), _jsx(Badge, { variant: hardwareAcceleration.gpuInfo.isWebGLSupported ? 'default' : 'secondary', children: hardwareAcceleration.gpuInfo.isWebGLSupported ? 'Yes' : 'No' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "WebGL2 Support:" }), _jsx(Badge, { variant: hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'default' : 'secondary', children: hardwareAcceleration.gpuInfo.isWebGL2Supported ? 'Yes' : 'No' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm font-medium", children: "Max Texture Size:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: hardwareAcceleration.gpuInfo.maxTextureSize })] })] })] }) })] })), showPerformanceMetrics && (_jsxs(Card, { className: "border-2 border-cs-secondary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDCCA Performance Metrics", _jsx(Badge, { variant: "outline", children: "Real-time" })] }), _jsx(CardDescription, { children: "Hardware acceleration performance monitoring and optimization status" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4 text-center", children: [_jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: hardwareAcceleration.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-secondary", children: [hardwareAcceleration.metrics.frameTime.toFixed(1), "ms"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Frame Time" })] }), _jsxs("div", { children: [_jsxs("p", { className: "text-2xl font-bold text-cs-accent", children: [hardwareAcceleration.metrics.gpuUtilization.toFixed(1), "%"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "GPU Usage" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-primary", children: hardwareAcceleration.metrics.performanceScore }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Performance Score" })] })] }), _jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("span", { className: "font-medium text-sm", children: "Performance Level:" }), _jsx(Badge, { variant: hardwareAcceleration.performanceLevel === 'excellent' ? 'default' :
+                                                    hardwareAcceleration.performanceLevel === 'good' ? 'default' :
+                                                        hardwareAcceleration.performanceLevel === 'fair' ? 'secondary' : 'secondary', children: hardwareAcceleration.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium text-sm", children: "Hardware Acceleration:" }), _jsx(Badge, { variant: hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary', children: hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled' })] })] })] })] })), showBatteryInfo && (_jsxs(Card, { className: "border-2 border-cs-accent", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDD0B Battery Optimization", _jsxs(Badge, { variant: batteryOptimization.isLowBattery ? 'secondary' : 'default', children: [batteryOptimization.batteryPercentage, "%"] })] }), _jsx(CardDescription, { children: "Battery-aware performance optimization and user preference management" })] }), _jsxs(CardContent, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Battery Status" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Level:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryOptimization.batteryPercentage, "%"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Status:" }), _jsx(Badge, { variant: batteryOptimization.isCharging ? 'default' : 'secondary', children: batteryOptimization.isCharging ? 'Charging' : 'Discharging' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Health:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.getBatteryHealth() })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Performance Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Throttle Level:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.currentThrottleLevel })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "User Preference:" }), _jsx(Badge, { variant: "outline", children: batteryOptimization.userPreferences })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Optimization:" }), _jsx(Badge, { variant: batteryOptimization.isOptimizing ? 'secondary' : 'default', children: batteryOptimization.isOptimizing ? 'Active' : 'Idle' })] })] })] })] }), _jsxs("div", { className: "mt-4 p-3 bg-cs-accent/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "User Preference:" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: batteryOptimization.userPreferences === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('performance'), children: "Performance" }), _jsx(Button, { variant: batteryOptimization.userPreferences === 'balanced' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('balanced'), children: "Balanced" }), _jsx(Button, { variant: batteryOptimization.userPreferences === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => batteryOptimization.updateUserPreferences('battery'), children: "Battery" })] })] })] })] })), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Hardware Acceleration Demo" }), _jsx(CardDescription, { children: "Test different types of hardware acceleration with real-time animations" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationType === 'basic' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('basic'), children: "Basic" }), _jsx(Button, { variant: animationType === 'gpu' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('gpu'), children: "GPU Optimized" }), _jsx(Button, { variant: animationType === 'transform3d' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('transform3d'), children: "Transform3D" }), _jsx(Button, { variant: animationType === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('performance'), children: "Performance" })] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { variant: "default", onClick: startAnimation, disabled: animationState === 'running', children: "Start Animation" }), _jsx(Button, { variant: "outline", onClick: pauseAnimation, disabled: animationState !== 'running', children: "Pause" }), _jsx(Button, { variant: "outline", onClick: resumeAnimation, disabled: animationState !== 'paused', children: "Resume" })] }), _jsx("div", { className: "flex justify-center", children: _jsx("div", { className: getAnimationClasses(animationType), style: getAnimationStyles(animationState) }) }), _jsxs("div", { className: "text-center text-sm text-cs-text-secondary", children: [_jsxs("p", { children: ["Animation Type: ", _jsx("span", { className: "font-medium", children: animationType })] }), _jsxs("p", { children: ["State: ", _jsx("span", { className: "font-medium", children: animationState })] }), _jsxs("p", { children: ["Hardware Acceleration: ", _jsx("span", { className: "font-medium", children: hardwareAcceleration.isHardwareAccelerated ? 'Enabled' : 'Disabled' })] })] })] })] }), _jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Demo Controls" }), _jsx(CardDescription, { children: "Configure and test different hardware acceleration features" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: showGPUInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowGPUInfo(!showGPUInfo), children: [showGPUInfo ? 'Hide' : 'Show', " GPU Info"] }), _jsxs(Button, { variant: showPerformanceMetrics ? 'default' : 'outline', size: "sm", onClick: () => setShowPerformanceMetrics(!showPerformanceMetrics), children: [showPerformanceMetrics ? 'Hide' : 'Show', " Performance"] }), _jsxs(Button, { variant: showBatteryInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowBatteryInfo(!showBatteryInfo), children: [showBatteryInfo ? 'Hide' : 'Show', " Battery Info"] })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: enableHardwareAcceleration ? 'default' : 'outline', size: "sm", onClick: () => setEnableHardwareAcceleration(!enableHardwareAcceleration), children: [enableHardwareAcceleration ? 'Disable' : 'Enable', " Hardware Acceleration"] }), _jsxs(Button, { variant: enableBatteryOptimization ? 'default' : 'outline', size: "sm", onClick: () => setEnableBatteryOptimization(!enableBatteryOptimization), children: [enableBatteryOptimization ? 'Disable' : 'Enable', " Battery Optimization"] })] })] })] }), _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: "Hardware Acceleration:" }), _jsx(Badge, { variant: hardwareAcceleration.isHardwareAccelerated ? 'default' : 'secondary', children: hardwareAcceleration.isHardwareAccelerated ? 'Optimal' : 'Needs Optimization' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Performance Level:" }), _jsx(Badge, { variant: hardwareAcceleration.performanceLevel === 'excellent' || hardwareAcceleration.performanceLevel === 'good'
+                                                    ? 'default' : 'secondary', children: hardwareAcceleration.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Battery Optimization:" }), _jsx(Badge, { variant: batteryOptimization.isLowBattery ? 'secondary' : 'default', children: batteryOptimization.isLowBattery ? 'Needs Optimization' : 'Optimized' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "GPU Utilization:" }), _jsx(Badge, { variant: hardwareAcceleration.metrics.gpuUtilization < 80 ? 'default' : 'secondary', children: hardwareAcceleration.metrics.gpuUtilization < 80 ? 'Optimal' : 'High Usage' })] })] }), hardwareAcceleration.optimizations.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: "Recent Optimizations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: hardwareAcceleration.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), batteryOptimization.optimizationRecommendations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-secondary/10 rounded-lg", children: [_jsx("h4", { className: "font-medium text-sm mb-2", children: "Battery Recommendations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: batteryOptimization.optimizationRecommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] }))] })] })] }));
+};
+export default HardwareAccelerationDemo;

package/dist/components/ui/input.d.ts

@@ -0,0 +1,9 @@
+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';
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/ui/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/ui/input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACjE,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;IACjE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAChC,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,CAAA;CACvD;AAED,QAAA,MAAM,KAAK,qFAsBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,CAAA"}

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

@@ -0,0 +1,17 @@
+'use client';
+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}`;
+    // Combine classes
+    const inputClasses = [baseClass, variantClass, sizeClass, stateClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("input", { type: type, className: inputClasses, ref: ref, ...props }));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/components/ui/input.js

@@ -0,0 +1,17 @@
+'use client';
+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}`;
+    // Combine classes
+    const inputClasses = [baseClass, variantClass, sizeClass, stateClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("input", { type: type, className: inputClasses, ref: ref, ...props }));
+});
+Input.displayName = "Input";
+export { Input };

package/dist/components/ui/label.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };
+//# sourceMappingURL=label.d.ts.map

package/dist/components/ui/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAEvD,QAAA,MAAM,KAAK,yJAST,CAAA;AAGF,OAAO,EAAE,KAAK,EAAE,CAAA"}

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

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

@@ -0,0 +1,6 @@
+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/container.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Container Component
+ * Implements Phase 2 container max-widths and content width system
+ *
+ * Container Max-Widths:
+ * - xs: 100%, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1792px
+ *
+ * Content Width Patterns:
+ * - narrow: Optimal for reading content (65ch-75ch)
+ * - standard: General content (80%-90% width)
+ * - wide: Data/dashboards (90%-100% width)
+ */
+import * as React from 'react';
+export interface ContainerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    children: React.ReactNode;
+    type?: 'container' | 'content' | 'fluid';
+    width?: 'narrow' | 'standard' | 'wide' | 'full';
+    maxWidths?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        '3xl'?: string;
+    };
+    padding?: {
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+        '2xl'?: string;
+        '3xl'?: string;
+    };
+    centered?: boolean;
+    breakout?: boolean;
+    characterWidth?: {
+        min?: string;
+        max?: string;
+        optimal?: string;
+    };
+    as?: keyof JSX.IntrinsicElements;
+}
+export declare const Container: React.FC<ContainerProps>;
+export interface ContentContainerProps extends Omit<ContainerProps, 'type' | 'width'> {
+    lineLength?: 'short' | 'optimal' | 'long';
+    textAlign?: 'left' | 'center' | 'justify';
+}
+export declare const ContentContainer: React.FC<ContentContainerProps>;
+export interface SectionContainerProps extends ContainerProps {
+    fullWidthBackground?: boolean;
+    backgroundVariant?: 'default' | 'muted' | 'accent' | 'inverse';
+}
+export declare const SectionContainer: React.FC<SectionContainerProps>;
+export default Container;
+//# sourceMappingURL=container.d.ts.map

package/dist/components/ui/layout/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layout/container.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IACzF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAG1B,IAAI,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;IAGzC,KAAK,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAGhD,SAAS,CAAC,EAAE;QACV,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAGF,OAAO,CAAC,EAAE;QACR,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IAGF,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,cAAc,CAAC,EAAE;QACf,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAGF,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CAClC;AAgED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAgG9C,CAAC;AAGF,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,OAAO,CAAC;IAEnF,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC3C;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0C5D,CAAC;AAGF,MAAM,WAAW,qBAAsB,SAAQ,cAAc;IAE3D,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,iBAAiB,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;CAChE;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0B5D,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/ui/layout/container.esm.js

@@ -0,0 +1,173 @@
+/**
+ * Container Component
+ * Implements Phase 2 container max-widths and content width system
+ *
+ * Container Max-Widths:
+ * - xs: 100%, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1792px
+ *
+ * Content Width Patterns:
+ * - narrow: Optimal for reading content (65ch-75ch)
+ * - standard: General content (80%-90% width)
+ * - wide: Data/dashboards (90%-100% width)
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// Default container max-widths (from implementation plan)
+const DEFAULT_CONTAINER_MAX_WIDTHS = {
+    xs: '100%',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+    '3xl': '1792px'
+};
+// Default content width patterns (from implementation plan)
+const CONTENT_WIDTH_PATTERNS = {
+    narrow: {
+        xs: '100%',
+        sm: '100%',
+        md: '65ch',
+        lg: '70ch',
+        xl: '75ch',
+        '2xl': '75ch',
+        '3xl': '75ch'
+    },
+    standard: {
+        xs: '100%',
+        sm: '100%',
+        md: '90%',
+        lg: '85%',
+        xl: '80%',
+        '2xl': '80%',
+        '3xl': '80%'
+    },
+    wide: {
+        xs: '100%',
+        sm: '100%',
+        md: '100%',
+        lg: '95%',
+        xl: '90%',
+        '2xl': '90%',
+        '3xl': '90%'
+    },
+    full: {
+        xs: '100%',
+        sm: '100%',
+        md: '100%',
+        lg: '100%',
+        xl: '100%',
+        '2xl': '100%',
+        '3xl': '100%'
+    }
+};
+// Default padding configuration
+const DEFAULT_PADDING = {
+    xs: 'var(--cs-spacing-scale-md)',
+    sm: 'var(--cs-spacing-scale-lg)',
+    md: 'var(--cs-spacing-scale-xl)',
+    lg: 'var(--cs-spacing-scale-2xl)',
+    xl: 'var(--cs-spacing-scale-2xl)',
+    '2xl': 'var(--cs-spacing-scale-3xl)',
+    '3xl': 'var(--cs-spacing-scale-3xl)'
+};
+export const Container = ({ children, type = 'container', width = 'standard', maxWidths: customMaxWidths, padding: customPadding, centered = true, breakout = false, characterWidth, className = '', style: userStyle, as: Component = 'div', ...restProps }) => {
+    const testId = restProps['data-testid'] || 'container';
+    // Determine max-widths based on type and width
+    const maxWidths = React.useMemo(() => {
+        if (customMaxWidths) {
+            return customMaxWidths;
+        }
+        switch (type) {
+            case 'container':
+                return DEFAULT_CONTAINER_MAX_WIDTHS;
+            case 'content':
+                return CONTENT_WIDTH_PATTERNS[width];
+            case 'fluid':
+                return CONTENT_WIDTH_PATTERNS.full;
+            default:
+                return DEFAULT_CONTAINER_MAX_WIDTHS;
+        }
+    }, [type, width, customMaxWidths]);
+    // Determine padding
+    const padding = customPadding || DEFAULT_PADDING;
+    // Build CSS custom properties
+    const containerStyle = React.useMemo(() => {
+        const style = {};
+        // Set max-width configurations
+        Object.entries(maxWidths).forEach(([breakpoint, maxWidth]) => {
+            style[`--container-max-width-${breakpoint}`] = maxWidth;
+        });
+        // Set padding configurations
+        Object.entries(padding).forEach(([breakpoint, paddingValue]) => {
+            style[`--container-padding-${breakpoint}`] = paddingValue;
+        });
+        // Set character width constraints
+        if (characterWidth) {
+            if (characterWidth.min) {
+                style['--container-character-width-min'] = characterWidth.min;
+            }
+            if (characterWidth.max) {
+                style['--container-character-width-max'] = characterWidth.max;
+            }
+            if (characterWidth.optimal) {
+                style['--container-character-width-optimal'] = characterWidth.optimal;
+            }
+        }
+        return style;
+    }, [maxWidths, padding, characterWidth]);
+    // Build CSS classes
+    const containerClasses = React.useMemo(() => {
+        const baseClass = 'container';
+        const typeClass = `container--${type}`;
+        const widthClass = width !== 'standard' ? `container--width-${width}` : '';
+        const centeredClass = centered ? 'container--centered' : '';
+        const breakoutClass = breakout ? 'container--breakout' : '';
+        const characterWidthClass = characterWidth ? 'container--character-width' : '';
+        return [baseClass, typeClass, widthClass, centeredClass, breakoutClass, characterWidthClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [type, width, centered, breakout, characterWidth, className]);
+    // Merge user styles with container styles
+    const mergedStyle = React.useMemo(() => ({
+        ...containerStyle,
+        ...userStyle
+    }), [containerStyle, userStyle]);
+    return (_jsx(Component, { className: containerClasses, style: mergedStyle, "data-testid": testId, ...restProps, children: children }));
+};
+export const ContentContainer = ({ children, lineLength = 'optimal', textAlign = 'left', characterWidth: customCharacterWidth, style: userStyle, ...props }) => {
+    // Map line length to character widths
+    const characterWidth = React.useMemo(() => {
+        if (customCharacterWidth) {
+            return customCharacterWidth;
+        }
+        switch (lineLength) {
+            case 'short':
+                return { min: '45ch', max: '65ch', optimal: '55ch' };
+            case 'optimal':
+                return { min: '65ch', max: '75ch', optimal: '70ch' };
+            case 'long':
+                return { min: '75ch', max: '85ch', optimal: '80ch' };
+            default:
+                return { min: '65ch', max: '75ch', optimal: '70ch' };
+        }
+    }, [lineLength, customCharacterWidth]);
+    const mergedStyle = React.useMemo(() => ({
+        textAlign: textAlign,
+        ...userStyle
+    }), [textAlign, userStyle]);
+    return (_jsx(Container, { type: "content", width: "narrow", characterWidth: characterWidth, style: mergedStyle, ...props, children: children }));
+};
+export const SectionContainer = ({ children, fullWidthBackground = false, backgroundVariant = 'default', className = '', ...props }) => {
+    const sectionClasses = React.useMemo(() => {
+        const baseClass = 'section-container';
+        const backgroundClass = fullWidthBackground ? 'section-container--full-width-bg' : '';
+        const variantClass = backgroundVariant !== 'default' ? `section-container--${backgroundVariant}` : '';
+        return [baseClass, backgroundClass, variantClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [fullWidthBackground, backgroundVariant, className]);
+    return (_jsx(Container, { className: sectionClasses, as: "section", ...props, children: children }));
+};
+export default Container;

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

@@ -0,0 +1,173 @@
+/**
+ * Container Component
+ * Implements Phase 2 container max-widths and content width system
+ *
+ * Container Max-Widths:
+ * - xs: 100%, sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px, 3xl: 1792px
+ *
+ * Content Width Patterns:
+ * - narrow: Optimal for reading content (65ch-75ch)
+ * - standard: General content (80%-90% width)
+ * - wide: Data/dashboards (90%-100% width)
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+// Default container max-widths (from implementation plan)
+const DEFAULT_CONTAINER_MAX_WIDTHS = {
+    xs: '100%',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+    '3xl': '1792px'
+};
+// Default content width patterns (from implementation plan)
+const CONTENT_WIDTH_PATTERNS = {
+    narrow: {
+        xs: '100%',
+        sm: '100%',
+        md: '65ch',
+        lg: '70ch',
+        xl: '75ch',
+        '2xl': '75ch',
+        '3xl': '75ch'
+    },
+    standard: {
+        xs: '100%',
+        sm: '100%',
+        md: '90%',
+        lg: '85%',
+        xl: '80%',
+        '2xl': '80%',
+        '3xl': '80%'
+    },
+    wide: {
+        xs: '100%',
+        sm: '100%',
+        md: '100%',
+        lg: '95%',
+        xl: '90%',
+        '2xl': '90%',
+        '3xl': '90%'
+    },
+    full: {
+        xs: '100%',
+        sm: '100%',
+        md: '100%',
+        lg: '100%',
+        xl: '100%',
+        '2xl': '100%',
+        '3xl': '100%'
+    }
+};
+// Default padding configuration
+const DEFAULT_PADDING = {
+    xs: 'var(--cs-spacing-scale-md)',
+    sm: 'var(--cs-spacing-scale-lg)',
+    md: 'var(--cs-spacing-scale-xl)',
+    lg: 'var(--cs-spacing-scale-2xl)',
+    xl: 'var(--cs-spacing-scale-2xl)',
+    '2xl': 'var(--cs-spacing-scale-3xl)',
+    '3xl': 'var(--cs-spacing-scale-3xl)'
+};
+export const Container = ({ children, type = 'container', width = 'standard', maxWidths: customMaxWidths, padding: customPadding, centered = true, breakout = false, characterWidth, className = '', style: userStyle, as: Component = 'div', ...restProps }) => {
+    const testId = restProps['data-testid'] || 'container';
+    // Determine max-widths based on type and width
+    const maxWidths = React.useMemo(() => {
+        if (customMaxWidths) {
+            return customMaxWidths;
+        }
+        switch (type) {
+            case 'container':
+                return DEFAULT_CONTAINER_MAX_WIDTHS;
+            case 'content':
+                return CONTENT_WIDTH_PATTERNS[width];
+            case 'fluid':
+                return CONTENT_WIDTH_PATTERNS.full;
+            default:
+                return DEFAULT_CONTAINER_MAX_WIDTHS;
+        }
+    }, [type, width, customMaxWidths]);
+    // Determine padding
+    const padding = customPadding || DEFAULT_PADDING;
+    // Build CSS custom properties
+    const containerStyle = React.useMemo(() => {
+        const style = {};
+        // Set max-width configurations
+        Object.entries(maxWidths).forEach(([breakpoint, maxWidth]) => {
+            style[`--container-max-width-${breakpoint}`] = maxWidth;
+        });
+        // Set padding configurations
+        Object.entries(padding).forEach(([breakpoint, paddingValue]) => {
+            style[`--container-padding-${breakpoint}`] = paddingValue;
+        });
+        // Set character width constraints
+        if (characterWidth) {
+            if (characterWidth.min) {
+                style['--container-character-width-min'] = characterWidth.min;
+            }
+            if (characterWidth.max) {
+                style['--container-character-width-max'] = characterWidth.max;
+            }
+            if (characterWidth.optimal) {
+                style['--container-character-width-optimal'] = characterWidth.optimal;
+            }
+        }
+        return style;
+    }, [maxWidths, padding, characterWidth]);
+    // Build CSS classes
+    const containerClasses = React.useMemo(() => {
+        const baseClass = 'container';
+        const typeClass = `container--${type}`;
+        const widthClass = width !== 'standard' ? `container--width-${width}` : '';
+        const centeredClass = centered ? 'container--centered' : '';
+        const breakoutClass = breakout ? 'container--breakout' : '';
+        const characterWidthClass = characterWidth ? 'container--character-width' : '';
+        return [baseClass, typeClass, widthClass, centeredClass, breakoutClass, characterWidthClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [type, width, centered, breakout, characterWidth, className]);
+    // Merge user styles with container styles
+    const mergedStyle = React.useMemo(() => ({
+        ...containerStyle,
+        ...userStyle
+    }), [containerStyle, userStyle]);
+    return (_jsx(Component, { className: containerClasses, style: mergedStyle, "data-testid": testId, ...restProps, children: children }));
+};
+export const ContentContainer = ({ children, lineLength = 'optimal', textAlign = 'left', characterWidth: customCharacterWidth, style: userStyle, ...props }) => {
+    // Map line length to character widths
+    const characterWidth = React.useMemo(() => {
+        if (customCharacterWidth) {
+            return customCharacterWidth;
+        }
+        switch (lineLength) {
+            case 'short':
+                return { min: '45ch', max: '65ch', optimal: '55ch' };
+            case 'optimal':
+                return { min: '65ch', max: '75ch', optimal: '70ch' };
+            case 'long':
+                return { min: '75ch', max: '85ch', optimal: '80ch' };
+            default:
+                return { min: '65ch', max: '75ch', optimal: '70ch' };
+        }
+    }, [lineLength, customCharacterWidth]);
+    const mergedStyle = React.useMemo(() => ({
+        textAlign: textAlign,
+        ...userStyle
+    }), [textAlign, userStyle]);
+    return (_jsx(Container, { type: "content", width: "narrow", characterWidth: characterWidth, style: mergedStyle, ...props, children: children }));
+};
+export const SectionContainer = ({ children, fullWidthBackground = false, backgroundVariant = 'default', className = '', ...props }) => {
+    const sectionClasses = React.useMemo(() => {
+        const baseClass = 'section-container';
+        const backgroundClass = fullWidthBackground ? 'section-container--full-width-bg' : '';
+        const variantClass = backgroundVariant !== 'default' ? `section-container--${backgroundVariant}` : '';
+        return [baseClass, backgroundClass, variantClass, className]
+            .filter(Boolean)
+            .join(' ');
+    }, [fullWidthBackground, backgroundVariant, className]);
+    return (_jsx(Container, { className: sectionClasses, as: "section", ...props, children: children }));
+};
+export default Container;

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

@@ -0,0 +1,9 @@
+/**
+ * Layout Components Index
+ * Exports all layout components for Phase 2 implementation
+ */
+export { ResponsiveGrid, ResponsiveGridItem } from './responsive-grid';
+export type { ResponsiveGridProps, ResponsiveGridItemProps } from './responsive-grid';
+export { Container, ContentContainer, SectionContainer } from './container';
+export type { ContainerProps, ContentContainerProps, SectionContainerProps } from './container';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/layout/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvE,YAAY,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAEtF,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC5E,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/ui/layout/index.esm.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';