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

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

@@ -0,0 +1,31 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Card } from './card.js';
+import { Button } from './button.js';
+import { Badge } from './badge.js';
+import { AnimatedContainer, StaggeredContainer, useAnimationProfile, usePerformanceMode } from './animation';
+export const AnimationDemo = () => {
+    const [currentAnimation, setCurrentAnimation] = useState('fadeIn');
+    const [isAnimating, setIsAnimating] = useState(false);
+    const { profile, performanceMetrics, deviceInfo } = useAnimationProfile();
+    const { performanceMode, shouldOptimizeForBattery } = usePerformanceMode();
+    const animations = [
+        { key: 'fadeIn', label: 'Fade In', icon: '✨' },
+        { key: 'slideIn', label: 'Slide In', icon: '➡️' },
+        { key: 'scaleIn', label: 'Scale In', icon: '🔍' },
+        { key: 'bounce', label: 'Bounce', icon: '🎾' }
+    ];
+    const handleAnimationChange = (animation) => {
+        setCurrentAnimation(animation);
+        setIsAnimating(true);
+        // Reset animation state after a delay
+        setTimeout(() => setIsAnimating(false), 1000);
+    };
+    const performanceIndicators = [
+        { label: 'FPS', value: performanceMetrics.fps, unit: '', color: performanceMetrics.fps > 50 ? 'green' : performanceMetrics.fps > 30 ? 'yellow' : 'red' },
+        { label: 'Memory', value: performanceMetrics.memoryUsage ? Math.round(performanceMetrics.memoryUsage * 100) : 'N/A', unit: '%', color: 'blue' },
+        { label: 'Battery', value: performanceMetrics.batteryLevel ? Math.round(performanceMetrics.batteryLevel * 100) : 'N/A', unit: '%', color: performanceMetrics.isLowPowerMode ? 'red' : 'green' }
+    ];
+    return (_jsxs("div", { className: "space-y-6 p-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: "Mobile-First Animation System" }), _jsx("p", { className: "text-gray-600 dark:text-gray-400", children: "Device-specific animations with performance optimization and battery awareness" })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Performance Metrics" }), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: performanceIndicators.map((indicator) => (_jsxs("div", { className: "text-center", children: [_jsxs("div", { className: `text-2xl font-bold text-${indicator.color}-600`, children: [indicator.value, indicator.unit] }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: indicator.label })] }, indicator.label))) }), _jsxs("div", { className: "mt-4 space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: "Performance Mode:" }), _jsx(Badge, { variant: performanceMode === 'high' ? 'default' : performanceMode === 'medium' ? 'secondary' : 'destructive', children: performanceMode.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: "Battery Optimization:" }), _jsx(Badge, { variant: shouldOptimizeForBattery ? 'destructive' : 'default', children: shouldOptimizeForBattery ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: "Reduced Motion:" }), _jsx(Badge, { variant: profile.performance.reducedMotion ? 'destructive' : 'default', children: profile.performance.reducedMotion ? 'Enabled' : 'Disabled' })] })] })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Device Profile" }), _jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: deviceInfo.screenSize }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Screen Size" })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: deviceInfo.orientation }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Orientation" })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: deviceInfo.touchDevice ? 'Touch' : 'Mouse' }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Input Type" })] }), _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-lg font-semibold", children: deviceInfo.isMobile ? 'Mobile' : deviceInfo.isTablet ? 'Tablet' : 'Desktop' }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Device Type" })] })] })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Animation Controls" }), _jsx("div", { className: "flex flex-wrap gap-2 mb-4", children: animations.map((animation) => (_jsxs(Button, { variant: currentAnimation === animation.key ? 'default' : 'outline', onClick: () => handleAnimationChange(animation.key), disabled: isAnimating, className: "flex items-center gap-2", children: [_jsx("span", { children: animation.icon }), animation.label] }, animation.key))) }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Current Animation Profile" }), _jsxs("div", { className: "space-y-2 text-sm", children: [_jsxs("div", { children: ["Duration: ", profile.duration.normal] }), _jsxs("div", { children: ["Easing: ", profile.easing.ease] }), _jsxs("div", { children: ["Performance: ", profile.performance.mode] })] })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Animation Classes" }), _jsxs("div", { className: "text-xs bg-gray-100 dark:bg-gray-800 p-2 rounded", children: [deviceInfo.isMobile && 'coach-stan-mobile-animation ', deviceInfo.isTablet && 'coach-stan-tablet-animation ', deviceInfo.isDesktop && 'coach-stan-desktop-animation ', shouldOptimizeForBattery && 'coach-stan-battery-saver ', profile.performance.reducedMotion && 'reduced-motion'] })] })] })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Animation Examples" }), _jsxs("div", { className: "mb-6", children: [_jsx("h3", { className: "text-lg font-medium mb-3", children: "Single Animation" }), _jsx(AnimatedContainer, { animation: currentAnimation, duration: "normal", easing: "ease", className: "h-32 bg-gradient-to-r from-blue-500 to-purple-500 rounded-lg flex items-center justify-center text-white font-semibold", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83C\uDFAD" }), _jsx("div", { children: "Animated Element" }), _jsx("div", { className: "text-sm opacity-75", children: currentAnimation })] }) })] }), _jsxs("div", { className: "mb-6", children: [_jsx("h3", { className: "text-lg font-medium mb-3", children: "Staggered Animations" }), _jsx(StaggeredContainer, { animation: "slideIn", duration: "fast", staggerDelay: 0.1, staggerDirection: "forward", className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: [1, 2, 3, 4].map((num) => (_jsx("div", { className: "h-20 bg-gradient-to-br from-green-400 to-blue-500 rounded-lg flex items-center justify-center text-white font-bold text-xl", children: num }, num))) })] }), _jsxs("div", { children: [_jsx("h3", { className: "text-lg font-medium mb-3", children: "Performance Mode Comparison" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(AnimatedContainer, { animation: "fadeIn", duration: "fast", className: "h-24 bg-red-400 rounded-lg flex items-center justify-center text-white font-semibold", children: "Fast Mode" }), _jsx(AnimatedContainer, { animation: "fadeIn", duration: "normal", className: "h-24 bg-yellow-400 rounded-lg flex items-center justify-center text-white font-semibold", children: "Normal Mode" }), _jsx(AnimatedContainer, { animation: "fadeIn", duration: "slow", className: "h-24 bg-green-400 rounded-lg flex items-center justify-center text-white font-semibold", children: "Slow Mode" })] })] })] }), _jsxs(Card, { className: "p-4", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: "Technical Details" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "font-medium mb-2", children: "Animation Profile" }), _jsx("pre", { className: "text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto", children: JSON.stringify(profile, null, 2) })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium mb-2", children: "Device Info" }), _jsx("pre", { className: "text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto", children: JSON.stringify(deviceInfo, null, 2) })] }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium mb-2", children: "Performance Metrics" }), _jsx("pre", { className: "text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto", children: JSON.stringify(performanceMetrics, null, 2) })] })] })] })] }));
+};

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: {
+    variant?: "default" | "secondary" | "outline" | "destructive";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/ui/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;sEAelB,CAAA;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,aAAa,CAAC;CAAG;AAEzC,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAI1D;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const badgeVariants = cva("badge", {
+    variants: {
+        variant: {
+            default: "badge--default",
+            secondary: "badge--secondary",
+            destructive: "badge--destructive",
+            outline: "badge--outline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant, ...props }) {
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const badgeVariants = cva("badge", {
+    variants: {
+        variant: {
+            default: "badge--default",
+            secondary: "badge--secondary",
+            destructive: "badge--destructive",
+            outline: "badge--outline",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant, ...props }) {
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/components/ui/battery-conscious-animation-demo.d.ts

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

package/dist/components/ui/battery-conscious-animation-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"battery-conscious-animation-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/battery-conscious-animation-demo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,6BAA6B,EAAE,KAAK,CAAC,EA8iBjD,CAAA;AAED,eAAe,6BAA6B,CAAA"}

package/dist/components/ui/battery-conscious-animation-demo.esm.js

@@ -0,0 +1,140 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { useBatteryAnimations } from '../../hooks/use-battery-animations.js';
+import { usePerformanceThrottling } from '../../hooks/use-performance-throttling.js';
+export const BatteryConsciousAnimationDemo = () => {
+    const [showBatteryInfo, setShowBatteryInfo] = useState(true);
+    const [showPerformanceInfo, setShowPerformanceInfo] = useState(true);
+    const [showAnimationDemo, setShowAnimationDemo] = useState(true);
+    const [showControls] = useState(true);
+    // Animation states
+    const [animationState, setAnimationState] = useState('idle');
+    const [animationType, setAnimationType] = useState('battery');
+    const [animationComplexity, setAnimationComplexity] = useState('medium');
+    // Hooks
+    const batteryAnimations = useBatteryAnimations({
+        enableBatteryMonitoring: true,
+        enablePerformanceThrottling: true,
+        enableReducedMotion: true,
+        enableUserPreferences: true,
+        enableAutomaticOptimization: true
+    }, {
+        onBatteryLevelChange: (level, isLow) => console.log('Battery level changed:', level, isLow),
+        onPerformanceWarning: (score, shouldThrottle) => console.log('Performance warning:', score, shouldThrottle),
+        onAnimationThrottled: (level, reason) => console.log('Animation throttled:', level, reason),
+        onUserPreferenceChange: (preference) => console.log('User preference changed:', preference),
+        onReducedMotionChange: (enabled) => console.log('Reduced motion changed:', enabled)
+    });
+    const performanceThrottling = usePerformanceThrottling({
+        enablePerformanceMonitoring: true,
+        enableAutomaticThrottling: true,
+        enableUserExperienceOptimization: true,
+        enableBatteryPreservation: true
+    }, {
+        onPerformanceWarning: (metrics) => console.log('Performance warning:', metrics),
+        onThrottlingApplied: (level, reason) => console.log('Throttling applied:', level, reason),
+        onPerformanceRecovery: (metrics) => console.log('Performance recovery:', metrics),
+        onUserExperienceOptimized: (optimization) => console.log('User experience optimized:', optimization)
+    });
+    // Animation controls
+    const startAnimation = useCallback(() => {
+        setAnimationState('running');
+        setTimeout(() => setAnimationState('idle'), 3000);
+    }, []);
+    const pauseAnimation = useCallback(() => {
+        setAnimationState('paused');
+    }, []);
+    const resumeAnimation = useCallback(() => {
+        setAnimationState('running');
+    }, []);
+    // Get animation classes based on current state
+    const getAnimationClasses = useCallback(() => {
+        const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out';
+        // Base battery-conscious animation
+        let classes = `${baseClasses} battery-conscious-animation`;
+        // Add battery-specific classes
+        if (batteryAnimations.state.isCriticalBattery) {
+            classes += ' battery-critical-animation';
+        }
+        else if (batteryAnimations.state.isLowBattery) {
+            classes += ' battery-optimized-animation';
+        }
+        // Add performance throttling classes
+        if (performanceThrottling.throttleLevel === 'aggressive') {
+            classes += ' performance-throttled-aggressive';
+        }
+        else if (performanceThrottling.throttleLevel === 'moderate') {
+            classes += ' performance-throttled-moderate';
+        }
+        else if (performanceThrottling.throttleLevel === 'light') {
+            classes += ' performance-throttled-light';
+        }
+        // Add complexity classes
+        if (animationComplexity === 'low') {
+            classes += ' animation-complexity-low';
+        }
+        else if (animationComplexity === 'high') {
+            classes += ' animation-complexity-high';
+        }
+        // Add user preference classes
+        classes += ` user-preference-${batteryAnimations.state.userPreference}`;
+        // Add performance optimization classes
+        if (performanceThrottling.metrics.performanceScore < 50) {
+            classes += ' performance-poor';
+        }
+        else if (performanceThrottling.metrics.performanceScore < 70) {
+            classes += ' performance-fair';
+        }
+        return classes;
+    }, [batteryAnimations.state, performanceThrottling.throttleLevel, animationComplexity]);
+    // Get animation styles based on state
+    const getAnimationStyles = useCallback(() => {
+        const settings = batteryAnimations.animationSettings;
+        if (!settings.shouldAnimate || batteryAnimations.shouldDisableAnimations) {
+            return {
+                transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                opacity: 1
+            };
+        }
+        switch (animationState) {
+            case 'running':
+                return {
+                    transform: `translate3d(100px, 0, 0) rotate(360deg) scale(1.2)`,
+                    opacity: 0.8,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+            case 'paused':
+                return {
+                    transform: `translate3d(50px, 0, 0) rotate(180deg) scale(1.1)`,
+                    opacity: 0.9,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+            default:
+                return {
+                    transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                    opacity: 1,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+        }
+    }, [animationState, batteryAnimations.animationSettings, batteryAnimations.shouldDisableAnimations]);
+    // Get background color based on battery level
+    const getBackgroundColor = useCallback(() => {
+        if (batteryAnimations.state.isCriticalBattery)
+            return 'bg-red-500';
+        if (batteryAnimations.state.isLowBattery)
+            return 'bg-yellow-500';
+        if (batteryAnimations.state.batteryLevel < 0.5)
+            return 'bg-orange-500';
+        return 'bg-green-500';
+    }, [batteryAnimations.state]);
+    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\uDD0B Battery-Conscious Mobile Animations" }), _jsx("p", { className: "text-lg text-cs-text-secondary mb-4", children: "Story 9 Implementation - Smart animation system that respects battery life, performance, and user preferences" }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Story 9" }), _jsx(Badge, { variant: "outline", children: "Battery Conscious" }), _jsx(Badge, { variant: "secondary", children: "Performance Optimized" }), _jsx(Badge, { variant: "outline", children: "Accessibility First" })] })] }), showBatteryInfo && (_jsxs(Card, { className: "border-2 border-cs-primary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDD0B Battery Status", _jsxs(Badge, { variant: batteryAnimations.state.isLowBattery ? 'secondary' : 'default', children: [batteryAnimations.batteryPercentage, "%"] })] }), _jsx(CardDescription, { children: "Real-time battery monitoring and animation optimization" })] }), _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 Information" }), _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: [batteryAnimations.batteryPercentage, "%"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Status:" }), _jsx(Badge, { variant: batteryAnimations.state.isCharging ? 'default' : 'secondary', children: batteryAnimations.state.isCharging ? 'Charging' : 'Discharging' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Health:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.getBatteryHealth() })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Throttle Level:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.state.throttleLevel })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Animation Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Duration:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryAnimations.animationSettings.duration, "ms"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Easing:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: batteryAnimations.animationSettings.easing })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Complexity:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.animationSettings.complexity })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Frame Rate:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryAnimations.animationSettings.frameRate, "fps"] })] })] })] })] }), _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: batteryAnimations.state.userPreference === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('performance'), children: "Performance" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'balanced' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('balanced'), children: "Balanced" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('battery'), children: "Battery" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'accessibility' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('accessibility'), children: "Accessibility" })] })] })] })] })), showPerformanceInfo && (_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 Monitoring", _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Throttling' : 'Optimal' })] }), _jsx(CardDescription, { children: "Real-time performance metrics and automatic throttling" })] }), _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: performanceThrottling.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: [performanceThrottling.metrics.frameTime.toFixed(1), "ms"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Frame Time" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-accent", children: performanceThrottling.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-primary", children: performanceThrottling.throttleLevel }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Throttle Level" })] })] }), _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: performanceThrottling.performanceLevel === 'excellent' || performanceThrottling.performanceLevel === 'good'
+                                                    ? 'default' : 'secondary', children: performanceThrottling.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium text-sm", children: "Throttling Status:" }), _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Active' : 'Inactive' })] })] })] })] })), showAnimationDemo && (_jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Battery-Conscious Animation Demo" }), _jsx(CardDescription, { children: "Test different animation types with real-time battery and performance optimization" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationType === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('battery'), children: "Battery Optimized" }), _jsx(Button, { variant: animationType === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('performance'), children: "Performance Optimized" }), _jsx(Button, { variant: animationType === 'reduced-motion' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('reduced-motion'), children: "Reduced Motion" }), _jsx(Button, { variant: animationType === 'user-preference' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('user-preference'), children: "User Preference" })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationComplexity === 'low' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('low'), children: "Low Complexity" }), _jsx(Button, { variant: animationComplexity === 'medium' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('medium'), children: "Medium Complexity" }), _jsx(Button, { variant: animationComplexity === 'high' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('high'), children: "High Complexity" })] }), _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()} ${getBackgroundColor()}`, style: getAnimationStyles() }) }), _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: ["Complexity: ", _jsx("span", { className: "font-medium", children: animationComplexity })] }), _jsxs("p", { children: ["State: ", _jsx("span", { className: "font-medium", children: animationState })] }), _jsxs("p", { children: ["Battery Optimized: ", _jsx("span", { className: "font-medium", children: batteryAnimations.isAnimationOptimized() ? 'Yes' : 'No' })] }), _jsxs("p", { children: ["Animations Disabled: ", _jsx("span", { className: "font-medium", children: batteryAnimations.shouldDisableAnimations ? 'Yes' : 'No' })] })] })] })] })), showControls && (_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 battery-conscious animation features" })] }), _jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: showBatteryInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowBatteryInfo(!showBatteryInfo), children: [showBatteryInfo ? 'Hide' : 'Show', " Battery Info"] }), _jsxs(Button, { variant: showPerformanceInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowPerformanceInfo(!showPerformanceInfo), children: [showPerformanceInfo ? 'Hide' : 'Show', " Performance"] }), _jsxs(Button, { variant: showAnimationDemo ? 'default' : 'outline', size: "sm", onClick: () => setShowAnimationDemo(!showAnimationDemo), children: [showAnimationDemo ? 'Hide' : 'Show', " Animation Demo"] })] }) })] })), _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: "Battery Optimization:" }), _jsx(Badge, { variant: batteryAnimations.isAnimationOptimized() ? 'default' : 'secondary', children: batteryAnimations.isAnimationOptimized() ? 'Active' : 'Inactive' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Performance Throttling:" }), _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Active' : 'Inactive' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Reduced Motion:" }), _jsx(Badge, { variant: batteryAnimations.state.reducedMotion ? 'secondary' : 'default', children: batteryAnimations.state.reducedMotion ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "User Preference:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.state.userPreference })] })] }), batteryAnimations.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: batteryAnimations.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), performanceThrottling.optimizations.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: "Performance Optimizations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: performanceThrottling.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), batteryAnimations.recommendations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-primary/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: batteryAnimations.recommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] })), performanceThrottling.recommendations.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: "Performance Recommendations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: performanceThrottling.recommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] }))] })] })] }));
+};
+export default BatteryConsciousAnimationDemo;

package/dist/components/ui/battery-conscious-animation-demo.js

@@ -0,0 +1,140 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './card.js';
+import { Badge } from './badge.js';
+import { Button } from './button.js';
+import { useBatteryAnimations } from '../../hooks/use-battery-animations.js';
+import { usePerformanceThrottling } from '../../hooks/use-performance-throttling.js';
+export const BatteryConsciousAnimationDemo = () => {
+    const [showBatteryInfo, setShowBatteryInfo] = useState(true);
+    const [showPerformanceInfo, setShowPerformanceInfo] = useState(true);
+    const [showAnimationDemo, setShowAnimationDemo] = useState(true);
+    const [showControls] = useState(true);
+    // Animation states
+    const [animationState, setAnimationState] = useState('idle');
+    const [animationType, setAnimationType] = useState('battery');
+    const [animationComplexity, setAnimationComplexity] = useState('medium');
+    // Hooks
+    const batteryAnimations = useBatteryAnimations({
+        enableBatteryMonitoring: true,
+        enablePerformanceThrottling: true,
+        enableReducedMotion: true,
+        enableUserPreferences: true,
+        enableAutomaticOptimization: true
+    }, {
+        onBatteryLevelChange: (level, isLow) => console.log('Battery level changed:', level, isLow),
+        onPerformanceWarning: (score, shouldThrottle) => console.log('Performance warning:', score, shouldThrottle),
+        onAnimationThrottled: (level, reason) => console.log('Animation throttled:', level, reason),
+        onUserPreferenceChange: (preference) => console.log('User preference changed:', preference),
+        onReducedMotionChange: (enabled) => console.log('Reduced motion changed:', enabled)
+    });
+    const performanceThrottling = usePerformanceThrottling({
+        enablePerformanceMonitoring: true,
+        enableAutomaticThrottling: true,
+        enableUserExperienceOptimization: true,
+        enableBatteryPreservation: true
+    }, {
+        onPerformanceWarning: (metrics) => console.log('Performance warning:', metrics),
+        onThrottlingApplied: (level, reason) => console.log('Throttling applied:', level, reason),
+        onPerformanceRecovery: (metrics) => console.log('Performance recovery:', metrics),
+        onUserExperienceOptimized: (optimization) => console.log('User experience optimized:', optimization)
+    });
+    // Animation controls
+    const startAnimation = useCallback(() => {
+        setAnimationState('running');
+        setTimeout(() => setAnimationState('idle'), 3000);
+    }, []);
+    const pauseAnimation = useCallback(() => {
+        setAnimationState('paused');
+    }, []);
+    const resumeAnimation = useCallback(() => {
+        setAnimationState('running');
+    }, []);
+    // Get animation classes based on current state
+    const getAnimationClasses = useCallback(() => {
+        const baseClasses = 'w-32 h-32 rounded-lg transition-all duration-1000 ease-in-out';
+        // Base battery-conscious animation
+        let classes = `${baseClasses} battery-conscious-animation`;
+        // Add battery-specific classes
+        if (batteryAnimations.state.isCriticalBattery) {
+            classes += ' battery-critical-animation';
+        }
+        else if (batteryAnimations.state.isLowBattery) {
+            classes += ' battery-optimized-animation';
+        }
+        // Add performance throttling classes
+        if (performanceThrottling.throttleLevel === 'aggressive') {
+            classes += ' performance-throttled-aggressive';
+        }
+        else if (performanceThrottling.throttleLevel === 'moderate') {
+            classes += ' performance-throttled-moderate';
+        }
+        else if (performanceThrottling.throttleLevel === 'light') {
+            classes += ' performance-throttled-light';
+        }
+        // Add complexity classes
+        if (animationComplexity === 'low') {
+            classes += ' animation-complexity-low';
+        }
+        else if (animationComplexity === 'high') {
+            classes += ' animation-complexity-high';
+        }
+        // Add user preference classes
+        classes += ` user-preference-${batteryAnimations.state.userPreference}`;
+        // Add performance optimization classes
+        if (performanceThrottling.metrics.performanceScore < 50) {
+            classes += ' performance-poor';
+        }
+        else if (performanceThrottling.metrics.performanceScore < 70) {
+            classes += ' performance-fair';
+        }
+        return classes;
+    }, [batteryAnimations.state, performanceThrottling.throttleLevel, animationComplexity]);
+    // Get animation styles based on state
+    const getAnimationStyles = useCallback(() => {
+        const settings = batteryAnimations.animationSettings;
+        if (!settings.shouldAnimate || batteryAnimations.shouldDisableAnimations) {
+            return {
+                transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                opacity: 1
+            };
+        }
+        switch (animationState) {
+            case 'running':
+                return {
+                    transform: `translate3d(100px, 0, 0) rotate(360deg) scale(1.2)`,
+                    opacity: 0.8,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+            case 'paused':
+                return {
+                    transform: `translate3d(50px, 0, 0) rotate(180deg) scale(1.1)`,
+                    opacity: 0.9,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+            default:
+                return {
+                    transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+                    opacity: 1,
+                    transitionDuration: `${settings.duration}ms`,
+                    transitionTimingFunction: settings.easing
+                };
+        }
+    }, [animationState, batteryAnimations.animationSettings, batteryAnimations.shouldDisableAnimations]);
+    // Get background color based on battery level
+    const getBackgroundColor = useCallback(() => {
+        if (batteryAnimations.state.isCriticalBattery)
+            return 'bg-red-500';
+        if (batteryAnimations.state.isLowBattery)
+            return 'bg-yellow-500';
+        if (batteryAnimations.state.batteryLevel < 0.5)
+            return 'bg-orange-500';
+        return 'bg-green-500';
+    }, [batteryAnimations.state]);
+    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\uDD0B Battery-Conscious Mobile Animations" }), _jsx("p", { className: "text-lg text-cs-text-secondary mb-4", children: "Story 9 Implementation - Smart animation system that respects battery life, performance, and user preferences" }), _jsxs("div", { className: "flex items-center justify-center gap-2", children: [_jsx(Badge, { variant: "default", children: "Story 9" }), _jsx(Badge, { variant: "outline", children: "Battery Conscious" }), _jsx(Badge, { variant: "secondary", children: "Performance Optimized" }), _jsx(Badge, { variant: "outline", children: "Accessibility First" })] })] }), showBatteryInfo && (_jsxs(Card, { className: "border-2 border-cs-primary", children: [_jsxs(CardHeader, { children: [_jsxs(CardTitle, { className: "text-xl flex items-center gap-2", children: ["\uD83D\uDD0B Battery Status", _jsxs(Badge, { variant: batteryAnimations.state.isLowBattery ? 'secondary' : 'default', children: [batteryAnimations.batteryPercentage, "%"] })] }), _jsx(CardDescription, { children: "Real-time battery monitoring and animation optimization" })] }), _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 Information" }), _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: [batteryAnimations.batteryPercentage, "%"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Status:" }), _jsx(Badge, { variant: batteryAnimations.state.isCharging ? 'default' : 'secondary', children: batteryAnimations.state.isCharging ? 'Charging' : 'Discharging' })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Health:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.getBatteryHealth() })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Throttle Level:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.state.throttleLevel })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("h4", { className: "font-medium", children: "Animation Settings" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Duration:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryAnimations.animationSettings.duration, "ms"] })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Easing:" }), _jsx("span", { className: "text-sm text-cs-text-secondary", children: batteryAnimations.animationSettings.easing })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Complexity:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.animationSettings.complexity })] }), _jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "text-sm", children: "Frame Rate:" }), _jsxs("span", { className: "text-sm text-cs-text-secondary", children: [batteryAnimations.animationSettings.frameRate, "fps"] })] })] })] })] }), _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: batteryAnimations.state.userPreference === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('performance'), children: "Performance" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'balanced' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('balanced'), children: "Balanced" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('battery'), children: "Battery" }), _jsx(Button, { variant: batteryAnimations.state.userPreference === 'accessibility' ? 'default' : 'outline', size: "sm", onClick: () => batteryAnimations.updateUserPreference('accessibility'), children: "Accessibility" })] })] })] })] })), showPerformanceInfo && (_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 Monitoring", _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Throttling' : 'Optimal' })] }), _jsx(CardDescription, { children: "Real-time performance metrics and automatic throttling" })] }), _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: performanceThrottling.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: [performanceThrottling.metrics.frameTime.toFixed(1), "ms"] }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Frame Time" })] }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-bold text-cs-accent", children: performanceThrottling.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-primary", children: performanceThrottling.throttleLevel }), _jsx("p", { className: "text-sm text-cs-text-secondary", children: "Throttle Level" })] })] }), _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: performanceThrottling.performanceLevel === 'excellent' || performanceThrottling.performanceLevel === 'good'
+                                                    ? 'default' : 'secondary', children: performanceThrottling.performanceLevel.toUpperCase() })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "font-medium text-sm", children: "Throttling Status:" }), _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Active' : 'Inactive' })] })] })] })] })), showAnimationDemo && (_jsxs(Card, { className: "border border-cs-border", children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "text-lg", children: "Battery-Conscious Animation Demo" }), _jsx(CardDescription, { children: "Test different animation types with real-time battery and performance optimization" })] }), _jsxs(CardContent, { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationType === 'battery' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('battery'), children: "Battery Optimized" }), _jsx(Button, { variant: animationType === 'performance' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('performance'), children: "Performance Optimized" }), _jsx(Button, { variant: animationType === 'reduced-motion' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('reduced-motion'), children: "Reduced Motion" }), _jsx(Button, { variant: animationType === 'user-preference' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationType('user-preference'), children: "User Preference" })] }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: animationComplexity === 'low' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('low'), children: "Low Complexity" }), _jsx(Button, { variant: animationComplexity === 'medium' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('medium'), children: "Medium Complexity" }), _jsx(Button, { variant: animationComplexity === 'high' ? 'default' : 'outline', size: "sm", onClick: () => setAnimationComplexity('high'), children: "High Complexity" })] }), _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()} ${getBackgroundColor()}`, style: getAnimationStyles() }) }), _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: ["Complexity: ", _jsx("span", { className: "font-medium", children: animationComplexity })] }), _jsxs("p", { children: ["State: ", _jsx("span", { className: "font-medium", children: animationState })] }), _jsxs("p", { children: ["Battery Optimized: ", _jsx("span", { className: "font-medium", children: batteryAnimations.isAnimationOptimized() ? 'Yes' : 'No' })] }), _jsxs("p", { children: ["Animations Disabled: ", _jsx("span", { className: "font-medium", children: batteryAnimations.shouldDisableAnimations ? 'Yes' : 'No' })] })] })] })] })), showControls && (_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 battery-conscious animation features" })] }), _jsx(CardContent, { className: "space-y-4", children: _jsxs("div", { className: "flex flex-wrap gap-4", children: [_jsxs(Button, { variant: showBatteryInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowBatteryInfo(!showBatteryInfo), children: [showBatteryInfo ? 'Hide' : 'Show', " Battery Info"] }), _jsxs(Button, { variant: showPerformanceInfo ? 'default' : 'outline', size: "sm", onClick: () => setShowPerformanceInfo(!showPerformanceInfo), children: [showPerformanceInfo ? 'Hide' : 'Show', " Performance"] }), _jsxs(Button, { variant: showAnimationDemo ? 'default' : 'outline', size: "sm", onClick: () => setShowAnimationDemo(!showAnimationDemo), children: [showAnimationDemo ? 'Hide' : 'Show', " Animation Demo"] })] }) })] })), _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: "Battery Optimization:" }), _jsx(Badge, { variant: batteryAnimations.isAnimationOptimized() ? 'default' : 'secondary', children: batteryAnimations.isAnimationOptimized() ? 'Active' : 'Inactive' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Performance Throttling:" }), _jsx(Badge, { variant: performanceThrottling.isThrottling ? 'secondary' : 'default', children: performanceThrottling.isThrottling ? 'Active' : 'Inactive' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "Reduced Motion:" }), _jsx(Badge, { variant: batteryAnimations.state.reducedMotion ? 'secondary' : 'default', children: batteryAnimations.state.reducedMotion ? 'Enabled' : 'Disabled' })] }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-sm", children: "User Preference:" }), _jsx(Badge, { variant: "outline", children: batteryAnimations.state.userPreference })] })] }), batteryAnimations.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: batteryAnimations.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), performanceThrottling.optimizations.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: "Performance Optimizations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: performanceThrottling.optimizations.slice(-3).map((optimization, index) => (_jsxs("li", { children: ["\u2022 ", optimization] }, index))) })] })), batteryAnimations.recommendations.length > 0 && (_jsxs("div", { className: "mt-4 p-3 bg-cs-primary/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: batteryAnimations.recommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] })), performanceThrottling.recommendations.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: "Performance Recommendations:" }), _jsx("ul", { className: "text-xs text-cs-text-secondary space-y-1", children: performanceThrottling.recommendations.slice(0, 3).map((recommendation, index) => (_jsxs("li", { children: ["\u2022 ", recommendation] }, index))) })] }))] })] })] }));
+};
+export default BatteryConsciousAnimationDemo;

package/dist/components/ui/border-radius-shadow-demo.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const BorderRadiusShadowDemo: React.FC;
+//# sourceMappingURL=border-radius-shadow-demo.d.ts.map

package/dist/components/ui/border-radius-shadow-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"border-radius-shadow-demo.d.ts","sourceRoot":"","sources":["../../../src/components/ui/border-radius-shadow-demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,EAsL1C,CAAC"}

package/dist/components/ui/border-radius-shadow-demo.esm.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+;
+import { Card } from './card.js';
+import { Button } from './button.js';
+export const BorderRadiusShadowDemo = () => {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-cs-text-primary mb-2", children: "Advanced Border Radius & Shadow System" }), _jsx("p", { className: "text-cs-text-secondary", children: "Sophisticated visual polish with calculated variants and multiple depth levels" })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Border Radius System" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-sm flex items-center justify-center text-white font-medium", children: "rounded-sm" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-sm (calc(var(--radius) - 4px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-md flex items-center justify-center text-white font-medium", children: "rounded-md" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-md (calc(var(--radius) - 2px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-lg flex items-center justify-center text-white font-medium", children: "rounded-lg" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-lg (var(--radius))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-xl flex items-center justify-center text-white font-medium", children: "rounded-xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-xl (calc(var(--radius) + 2px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-2xl flex items-center justify-center text-white font-medium", children: "rounded-2xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-2xl (calc(var(--radius) + 4px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-full flex items-center justify-center text-white font-medium", children: "rounded-full" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Native Tailwind (50%)" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Shadow System" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-sm flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-sm" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Subtle elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Default shadow" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-md flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-md" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Medium elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-lg flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-lg" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Large elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-xl flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Extra large elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-2xl flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-2xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Maximum elevation" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Component Integration" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(Button, { variant: "default", className: "w-full", children: "Default Button" }), _jsx(Button, { variant: "outline", className: "w-full", children: "Outline Button" }), _jsx(Button, { variant: "secondary", className: "w-full", children: "Secondary Button" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Input Field" }), _jsx("input", { type: "text", placeholder: "Type something...", className: "w-full h-11 rounded-md border border-cs-border bg-cs-surface-bg px-3 py-2 text-cs-text-primary focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Card Example" }), _jsx("div", { className: "p-4 rounded-lg border border-cs-border bg-cs-surface-bg shadow-sm", children: _jsx("p", { className: "text-sm text-cs-text-secondary", children: "This card uses rounded-lg and shadow-sm" }) })] })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Technical Implementation" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-cs-text-primary mb-2", children: "CSS Custom Properties" }), _jsxs("div", { className: "bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary overflow-auto", children: [_jsx("p", { children: "--radius: 0.5rem" }), _jsx("p", { children: "--radius-sm: calc(var(--radius) - 4px)" }), _jsx("p", { children: "--radius-md: calc(var(--radius) - 2px)" }), _jsx("p", { children: "--radius-lg: var(--radius)" }), _jsx("p", { children: "--radius-xl: calc(var(--radius) + 2px)" }), _jsx("p", { children: "--radius-2xl: calc(var(--radius) + 4px)" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-cs-text-primary mb-2", children: "Tailwind Classes" }), _jsxs("div", { className: "bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary", children: [_jsx("p", { children: "rounded-sm \u2192 var(--radius-sm)" }), _jsx("p", { children: "rounded-md \u2192 var(--radius-md)" }), _jsx("p", { children: "rounded-lg \u2192 var(--radius-lg)" }), _jsx("p", { children: "rounded-xl \u2192 var(--radius-xl)" }), _jsx("p", { children: "rounded-2xl \u2192 var(--radius-2xl)" })] })] })] })] })] }));
+};

package/dist/components/ui/border-radius-shadow-demo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+;
+import { Card } from './card.js';
+import { Button } from './button.js';
+export const BorderRadiusShadowDemo = () => {
+    return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "text-center", children: [_jsx("h2", { className: "text-2xl font-bold text-cs-text-primary mb-2", children: "Advanced Border Radius & Shadow System" }), _jsx("p", { className: "text-cs-text-secondary", children: "Sophisticated visual polish with calculated variants and multiple depth levels" })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Border Radius System" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-sm flex items-center justify-center text-white font-medium", children: "rounded-sm" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-sm (calc(var(--radius) - 4px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-md flex items-center justify-center text-white font-medium", children: "rounded-md" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-md (calc(var(--radius) - 2px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-lg flex items-center justify-center text-white font-medium", children: "rounded-lg" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-lg (var(--radius))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-xl flex items-center justify-center text-white font-medium", children: "rounded-xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-xl (calc(var(--radius) + 2px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-2xl flex items-center justify-center text-white font-medium", children: "rounded-2xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "--radius-2xl (calc(var(--radius) + 4px))" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-cs-primary rounded-full flex items-center justify-center text-white font-medium", children: "rounded-full" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Native Tailwind (50%)" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Shadow System" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-sm flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-sm" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Subtle elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Default shadow" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-md flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-md" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Medium elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-lg flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-lg" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Large elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-xl flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Extra large elevation" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "h-20 bg-white rounded-lg shadow-2xl flex items-center justify-center text-cs-text-primary font-medium border", children: "shadow-2xl" }), _jsx("p", { className: "text-xs text-cs-text-muted text-center", children: "Maximum elevation" })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Component Integration" }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(Button, { variant: "default", className: "w-full", children: "Default Button" }), _jsx(Button, { variant: "outline", className: "w-full", children: "Outline Button" }), _jsx(Button, { variant: "secondary", className: "w-full", children: "Secondary Button" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Input Field" }), _jsx("input", { type: "text", placeholder: "Type something...", className: "w-full h-11 rounded-md border border-cs-border bg-cs-surface-bg px-3 py-2 text-cs-text-primary focus:outline-none focus:ring-2 focus:ring-cs-primary focus:ring-offset-2" })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { className: "text-sm font-medium text-cs-text-secondary", children: "Card Example" }), _jsx("div", { className: "p-4 rounded-lg border border-cs-border bg-cs-surface-bg shadow-sm", children: _jsx("p", { className: "text-sm text-cs-text-secondary", children: "This card uses rounded-lg and shadow-sm" }) })] })] })] })] }), _jsxs(Card, { className: "p-6", children: [_jsx("h3", { className: "text-lg font-semibold text-cs-text-primary mb-4", children: "Technical Implementation" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-cs-text-primary mb-2", children: "CSS Custom Properties" }), _jsxs("div", { className: "bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary overflow-auto", children: [_jsx("p", { children: "--radius: 0.5rem" }), _jsx("p", { children: "--radius-sm: calc(var(--radius) - 4px)" }), _jsx("p", { children: "--radius-md: calc(var(--radius) - 2px)" }), _jsx("p", { children: "--radius-lg: var(--radius)" }), _jsx("p", { children: "--radius-xl: calc(var(--radius) + 2px)" }), _jsx("p", { children: "--radius-2xl: calc(var(--radius) + 4px)" })] })] }), _jsxs("div", { children: [_jsx("h4", { className: "font-medium text-cs-text-primary mb-2", children: "Tailwind Classes" }), _jsxs("div", { className: "bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary", children: [_jsx("p", { children: "rounded-sm \u2192 var(--radius-sm)" }), _jsx("p", { children: "rounded-md \u2192 var(--radius-md)" }), _jsx("p", { children: "rounded-lg \u2192 var(--radius-lg)" }), _jsx("p", { children: "rounded-xl \u2192 var(--radius-xl)" }), _jsx("p", { children: "rounded-2xl \u2192 var(--radius-2xl)" })] })] })] })] })] }));
+};

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

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+    size?: 'xs' | 'sm' | 'default' | 'lg' | 'xl' | 'icon' | 'mobile';
+    /** Phase 2 Enhancement: Content density support for responsive design */
+    density?: 'compact' | 'comfortable' | 'spacious';
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button };
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/ui/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;IAChF,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAA;IAChE,yEAAyE;IACzE,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,UAAU,CAAA;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,QAAA,MAAM,MAAM,uFAuBX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,CAAA"}

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

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+const Button = React.forwardRef(({ className, variant = 'default', size = 'default', density, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    // Build semantic CSS classes using BEM methodology
+    const baseClass = 'button';
+    const variantClass = `button--variant-${variant}`;
+    const sizeClass = `button--size-${size}`;
+    const densityClass = density ? `button--density-${density}` : null;
+    // Combine classes
+    const buttonClasses = [baseClass, variantClass, sizeClass, densityClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(Comp, { className: buttonClasses, ref: ref, ...props }));
+});
+Button.displayName = "Button";
+export { Button };

package/dist/components/ui/button.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+const Button = React.forwardRef(({ className, variant = 'default', size = 'default', density, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    // Build semantic CSS classes using BEM methodology
+    const baseClass = 'button';
+    const variantClass = `button--variant-${variant}`;
+    const sizeClass = `button--size-${size}`;
+    const densityClass = density ? `button--density-${density}` : null;
+    // Combine classes
+    const buttonClasses = [baseClass, variantClass, sizeClass, densityClass, className]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx(Comp, { className: buttonClasses, ref: ref, ...props }));
+});
+Button.displayName = "Button";
+export { Button };