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

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

@@ -5,7 +5,7 @@ import { Button } from './button'
 import { useBatteryAnimations } from '../../hooks/use-battery-animations'
 import { usePerformanceThrottling } from '../../hooks/use-performance-throttling'
 
-export const BatteryConsciousAnimationDemo= () => {
+export const BatteryConsciousAnimationDemo: React.FC = () => {
   const [showBatteryInfo, setShowBatteryInfo] = useState(true)
   const [showPerformanceInfo, setShowPerformanceInfo] = useState(true)
   const [showAnimationDemo, setShowAnimationDemo] = useState(true)
@@ -18,27 +18,29 @@ export const BatteryConsciousAnimationDemo= () => {
 
   // Hooks
   const batteryAnimations = useBatteryAnimations({
-    enableBatteryMonitoring,
-    enablePerformanceThrottling,
-    enableReducedMotion,
-    enableUserPreferences,
-    enableAutomaticOptimization}, {
-    onBatteryLevelChange, isLow) => console.log('Battery level changed, level, isLow),
-    onPerformanceWarning, shouldThrottle) => console.log('Performance warning, score, shouldThrottle),
-    onAnimationThrottled, reason) => console.log('Animation throttled, level, reason),
-    onUserPreferenceChange) => console.log('User preference changed, preference),
-    onReducedMotionChange) => console.log('Reduced motion changed, enabled)
+    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,
-    enableAutomaticThrottling,
-    enableUserExperienceOptimization,
-    enableBatteryPreservation}, {
-    onPerformanceWarning) => console.log('Performance warning, metrics),
-    onThrottlingApplied, reason) => console.log('Throttling applied, level, reason),
-    onPerformanceRecovery) => console.log('Performance recovery, metrics),
-    onUserExperienceOptimized) => console.log('User experience optimized, optimization)
+    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
@@ -104,23 +106,33 @@ export const BatteryConsciousAnimationDemo= () => {
     
     if (!settings.shouldAnimate || batteryAnimations.shouldDisableAnimations) {
       return {
-        transform, 0, 0) rotate(0deg) scale(1)',
-        opacity}
+        transform: 'translate3d(0, 0, 0) rotate(0deg) scale(1)',
+        opacity: 1
+      }
     }
     
     switch (animationState) {
-      case 'running', 0, 0) rotate(360deg) scale(1.2)`,
-          opacity,
-          transitionDuration}ms`,
-          transitionTimingFunction}
-      case 'paused', 0, 0) rotate(180deg) scale(1.1)`,
-          opacity,
-          transitionDuration}ms`,
-          transitionTimingFunction}
-      default, 0, 0) rotate(0deg) scale(1)',
-          opacity,
-          transitionDuration}ms`,
-          transitionTimingFunction}
+      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])
 
@@ -155,7 +167,7 @@ export const BatteryConsciousAnimationDemo= () => {
           <CardHeader>
             <CardTitle className="text-xl flex items-center gap-2">
               🔋 Battery Status
-              <Badge variant={batteryAnimations.state.isLowBattery ? 'secondary' }>
+              <Badge variant={batteryAnimations.state.isLowBattery ? 'secondary' : 'default'}>
                 {batteryAnimations.batteryPercentage}%
               </Badge>
             </CardTitle>
@@ -164,22 +176,27 @@ export const BatteryConsciousAnimationDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-1 md="space-y-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="space-y-3">
                 <h4 className="font-medium">Battery Information</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">Level="text-sm text-cs-text-secondary">{batteryAnimations.batteryPercentage}%</span>
+                    <span className="text-sm">Level:</span>
+                    <span className="text-sm text-cs-text-secondary">{batteryAnimations.batteryPercentage}%</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Status={batteryAnimations.state.isCharging ? 'default' }>
-                      {batteryAnimations.state.isCharging ? 'Charging' }
+                    <span className="text-sm">Status:</span>
+                    <Badge variant={batteryAnimations.state.isCharging ? 'default' : 'secondary'}>
+                      {batteryAnimations.state.isCharging ? 'Charging' : 'Discharging'}
                     </Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Health="outline">{batteryAnimations.getBatteryHealth()}</Badge>
+                    <span className="text-sm">Health:</span>
+                    <Badge variant="outline">{batteryAnimations.getBatteryHealth()}</Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Throttle Level="outline">{batteryAnimations.state.throttleLevel}</Badge>
+                    <span className="text-sm">Throttle Level:</span>
+                    <Badge variant="outline">{batteryAnimations.state.throttleLevel}</Badge>
                   </div>
                 </div>
               </div>
@@ -188,16 +205,20 @@ export const BatteryConsciousAnimationDemo= () => {
                 <h4 className="font-medium">Animation Settings</h4>
                 <div className="space-y-2">
                   <div className="flex justify-between">
-                    <span className="text-sm">Duration="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.duration}ms</span>
+                    <span className="text-sm">Duration:</span>
+                    <span className="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.duration}ms</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Easing="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.easing}</span>
+                    <span className="text-sm">Easing:</span>
+                    <span className="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.easing}</span>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Complexity="outline">{batteryAnimations.animationSettings.complexity}</Badge>
+                    <span className="text-sm">Complexity:</span>
+                    <Badge variant="outline">{batteryAnimations.animationSettings.complexity}</Badge>
                   </div>
                   <div className="flex justify-between">
-                    <span className="text-sm">Frame Rate="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.frameRate}fps</span>
+                    <span className="text-sm">Frame Rate:</span>
+                    <span className="text-sm text-cs-text-secondary">{batteryAnimations.animationSettings.frameRate}fps</span>
                   </div>
                 </div>
               </div>
@@ -205,30 +226,31 @@ export const BatteryConsciousAnimationDemo= () => {
 
             {/* User Preference Controls */}
             <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">User Preference="flex gap-2">
+              <h4 className="font-medium text-sm mb-2">User Preference:</h4>
+              <div className="flex gap-2">
                 <Button
-                  variant={batteryAnimations.state.userPreference === 'performance' ? 'default' }
+                  variant={batteryAnimations.state.userPreference === 'performance' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => batteryAnimations.updateUserPreference('performance')}
                 >
                   Performance
                 </Button>
                 <Button
-                  variant={batteryAnimations.state.userPreference === 'balanced' ? 'default' }
+                  variant={batteryAnimations.state.userPreference === 'balanced' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => batteryAnimations.updateUserPreference('balanced')}
                 >
                   Balanced
                 </Button>
                 <Button
-                  variant={batteryAnimations.state.userPreference === 'battery' ? 'default' }
+                  variant={batteryAnimations.state.userPreference === 'battery' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => batteryAnimations.updateUserPreference('battery')}
                 >
                   Battery
                 </Button>
                 <Button
-                  variant={batteryAnimations.state.userPreference === 'accessibility' ? 'default' }
+                  variant={batteryAnimations.state.userPreference === 'accessibility' ? 'default' : 'outline'}
                   size="sm"
                   onClick={() => batteryAnimations.updateUserPreference('accessibility')}
                 >
@@ -246,8 +268,8 @@ export const BatteryConsciousAnimationDemo= () => {
           <CardHeader>
             <CardTitle className="text-xl flex items-center gap-2">
               📊 Performance Monitoring
-              <Badge variant={performanceThrottling.isThrottling ? 'secondary' }>
-                {performanceThrottling.isThrottling ? 'Throttling' }
+              <Badge variant={performanceThrottling.isThrottling ? 'secondary' : 'default'}>
+                {performanceThrottling.isThrottling ? 'Throttling' : 'Optimal'}
               </Badge>
             </CardTitle>
             <CardDescription>
@@ -255,7 +277,9 @@ export const BatteryConsciousAnimationDemo= () => {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <div className="grid grid-cols-2 lg="text-2xl font-bold text-cs-primary">
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 text-center">
+              <div>
+                <p className="text-2xl font-bold text-cs-primary">
                   {performanceThrottling.metrics.fps}
                 </p>
                 <p className="text-sm text-cs-text-secondary">FPS</p>
@@ -282,15 +306,18 @@ export const BatteryConsciousAnimationDemo= () => {
             
             <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
               <div className="flex items-center justify-between mb-2">
-                <span className="font-medium text-sm">Performance Level={
+                <span className="font-medium text-sm">Performance Level:</span>
+                <Badge variant={
                   performanceThrottling.performanceLevel === 'excellent' || performanceThrottling.performanceLevel === 'good' 
-                    ? 'default' }>
+                    ? 'default' : 'secondary'
+                }>
                   {performanceThrottling.performanceLevel.toUpperCase()}
                 </Badge>
               </div>
               <div className="flex items-center justify-between">
-                <span className="font-medium text-sm">Throttling Status={performanceThrottling.isThrottling ? 'secondary' }>
-                  {performanceThrottling.isThrottling ? 'Active' }
+                <span className="font-medium text-sm">Throttling Status:</span>
+                <Badge variant={performanceThrottling.isThrottling ? 'secondary' : 'default'}>
+                  {performanceThrottling.isThrottling ? 'Active' : 'Inactive'}
                 </Badge>
               </div>
             </div>
@@ -311,28 +338,28 @@ export const BatteryConsciousAnimationDemo= () => {
             {/* Animation Type Selection */}
             <div className="flex flex-wrap gap-2">
               <Button
-                variant={animationType === 'battery' ? 'default' }
+                variant={animationType === 'battery' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setAnimationType('battery')}
               >
                 Battery Optimized
               </Button>
               <Button
-                variant={animationType === 'performance' ? 'default' }
+                variant={animationType === 'performance' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setAnimationType('performance')}
               >
                 Performance Optimized
               </Button>
               <Button
-                variant={animationType === 'reduced-motion' ? 'default' }
+                variant={animationType === 'reduced-motion' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setAnimationType('reduced-motion')}
               >
                 Reduced Motion
               </Button>
               <Button
-                variant={animationType === 'user-preference' ? 'default' }
+                variant={animationType === 'user-preference' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setAnimationType('user-preference')}
               >
@@ -343,21 +370,21 @@ export const BatteryConsciousAnimationDemo= () => {
             {/* Animation Complexity Selection */}
             <div className="flex flex-wrap gap-2">
               <Button
-                variant={animationComplexity === 'low' ? 'default' }
+                variant={animationComplexity === 'low' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setAnimationComplexity('low')}
               >
                 Low Complexity
               </Button>
               <Button
-                variant={animationComplexity === 'medium' ? 'default' }
+                variant={animationComplexity === 'medium' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setAnimationComplexity('medium')}
               >
                 Medium Complexity
               </Button>
               <Button
-                variant={animationComplexity === 'high' ? 'default' }
+                variant={animationComplexity === 'high' ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setAnimationComplexity('high')}
               >
@@ -400,14 +427,14 @@ export const BatteryConsciousAnimationDemo= () => {
 
             {/* Animation Info */}
             <div className="text-center text-sm text-cs-text-secondary">
-              <p>Animation Type="font-medium">{animationType}</span></p>
-              <p>Complexity="font-medium">{animationComplexity}</span></p>
-              <p>State="font-medium">{animationState}</span></p>
-              <p>Battery Optimized="font-medium">
-                {batteryAnimations.isAnimationOptimized() ? 'Yes' }
+              <p>Animation Type: <span className="font-medium">{animationType}</span></p>
+              <p>Complexity: <span className="font-medium">{animationComplexity}</span></p>
+              <p>State: <span className="font-medium">{animationState}</span></p>
+              <p>Battery Optimized: <span className="font-medium">
+                {batteryAnimations.isAnimationOptimized() ? 'Yes' : 'No'}
               </span></p>
-              <p>Animations Disabled="font-medium">
-                {batteryAnimations.shouldDisableAnimations ? 'Yes' }
+              <p>Animations Disabled: <span className="font-medium">
+                {batteryAnimations.shouldDisableAnimations ? 'Yes' : 'No'}
               </span></p>
             </div>
           </CardContent>
@@ -426,25 +453,25 @@ export const BatteryConsciousAnimationDemo= () => {
           <CardContent className="space-y-4">
             <div className="flex flex-wrap gap-4">
               <Button
-                variant={showBatteryInfo ? 'default' }
+                variant={showBatteryInfo ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setShowBatteryInfo(!showBatteryInfo)}
               >
-                {showBatteryInfo ? 'Hide' } Battery Info
+                {showBatteryInfo ? 'Hide' : 'Show'} Battery Info
               </Button>
               <Button
-                variant={showPerformanceInfo ? 'default' }
+                variant={showPerformanceInfo ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setShowPerformanceInfo(!showPerformanceInfo)}
               >
-                {showPerformanceInfo ? 'Hide' } Performance
+                {showPerformanceInfo ? 'Hide' : 'Show'} Performance
               </Button>
               <Button
-                variant={showAnimationDemo ? 'default' }
+                variant={showAnimationDemo ? 'default' : 'outline'}
                 size="sm"
                 onClick={() => setShowAnimationDemo(!showAnimationDemo)}
               >
-                {showAnimationDemo ? 'Hide' } Animation Demo
+                {showAnimationDemo ? 'Hide' : 'Show'} Animation Demo
               </Button>
             </div>
           </CardContent>
@@ -462,29 +489,34 @@ export const BatteryConsciousAnimationDemo= () => {
         <CardContent>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <span className="text-sm">Battery Optimization={batteryAnimations.isAnimationOptimized() ? 'default' }>
-                {batteryAnimations.isAnimationOptimized() ? 'Active' }
+              <span className="text-sm">Battery Optimization:</span>
+              <Badge variant={batteryAnimations.isAnimationOptimized() ? 'default' : 'secondary'}>
+                {batteryAnimations.isAnimationOptimized() ? 'Active' : 'Inactive'}
               </Badge>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm">Performance Throttling={performanceThrottling.isThrottling ? 'secondary' }>
-                {performanceThrottling.isThrottling ? 'Active' }
+              <span className="text-sm">Performance Throttling:</span>
+              <Badge variant={performanceThrottling.isThrottling ? 'secondary' : 'default'}>
+                {performanceThrottling.isThrottling ? 'Active' : 'Inactive'}
               </Badge>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm">Reduced Motion={batteryAnimations.state.reducedMotion ? 'secondary' }>
-                {batteryAnimations.state.reducedMotion ? 'Enabled' }
+              <span className="text-sm">Reduced Motion:</span>
+              <Badge variant={batteryAnimations.state.reducedMotion ? 'secondary' : 'default'}>
+                {batteryAnimations.state.reducedMotion ? 'Enabled' : 'Disabled'}
               </Badge>
             </div>
             <div className="flex items-center justify-between">
-              <span className="text-sm">User Preference="outline">{batteryAnimations.state.userPreference}</Badge>
+              <span className="text-sm">User Preference:</span>
+              <Badge variant="outline">{batteryAnimations.state.userPreference}</Badge>
             </div>
           </div>
 
           {/* Recent Optimizations */}
           {batteryAnimations.optimizations.length > 0 && (
             <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Recent Optimizations="text-xs text-cs-text-secondary space-y-1">
+              <h4 className="font-medium text-sm mb-2">Recent Optimizations:</h4>
+              <ul className="text-xs text-cs-text-secondary space-y-1">
                 {batteryAnimations.optimizations.slice(-3).map((optimization, index) => (
                   <li key={index}>• {optimization}</li>
                 ))}
@@ -495,7 +527,8 @@ export const BatteryConsciousAnimationDemo= () => {
           {/* Performance Optimizations */}
           {performanceThrottling.optimizations.length > 0 && (
             <div className="mt-4 p-3 bg-cs-secondary/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Performance Optimizations="text-xs text-cs-text-secondary space-y-1">
+              <h4 className="font-medium text-sm mb-2">Performance Optimizations:</h4>
+              <ul className="text-xs text-cs-text-secondary space-y-1">
                 {performanceThrottling.optimizations.slice(-3).map((optimization, index) => (
                   <li key={index}>• {optimization}</li>
                 ))}
@@ -506,7 +539,8 @@ export const BatteryConsciousAnimationDemo= () => {
           {/* Battery Recommendations */}
           {batteryAnimations.recommendations.length > 0 && (
             <div className="mt-4 p-3 bg-cs-primary/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Battery Recommendations="text-xs text-cs-text-secondary space-y-1">
+              <h4 className="font-medium text-sm mb-2">Battery Recommendations:</h4>
+              <ul className="text-xs text-cs-text-secondary space-y-1">
                 {batteryAnimations.recommendations.slice(0, 3).map((recommendation, index) => (
                   <li key={index}>• {recommendation}</li>
                 ))}
@@ -517,7 +551,8 @@ export const BatteryConsciousAnimationDemo= () => {
           {/* Performance Recommendations */}
           {performanceThrottling.recommendations.length > 0 && (
             <div className="mt-4 p-3 bg-cs-accent/10 rounded-lg">
-              <h4 className="font-medium text-sm mb-2">Performance Recommendations="text-xs text-cs-text-secondary space-y-1">
+              <h4 className="font-medium text-sm mb-2">Performance Recommendations:</h4>
+              <ul className="text-xs text-cs-text-secondary space-y-1">
                 {performanceThrottling.recommendations.slice(0, 3).map((recommendation, index) => (
                   <li key={index}>• {recommendation}</li>
                 ))}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card } from './card';
 import { Button } from './button';
 
-export const BorderRadiusShadowDemo= () => {
+export const BorderRadiusShadowDemo: React.FC = () => {
   return (
     <div className="space-y-6">
       <div className="text-center">
@@ -19,7 +19,8 @@ export const BorderRadiusShadowDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Border Radius System
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="space-y-2">
             <div className="h-20 bg-cs-primary rounded-sm flex items-center justify-center text-white font-medium">
               rounded-sm
             </div>
@@ -68,7 +69,8 @@ export const BorderRadiusShadowDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Shadow System
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="space-y-2">
             <div className="h-20 bg-white rounded-lg shadow-sm flex items-center justify-center text-cs-text-primary font-medium border">
               shadow-sm
             </div>
@@ -118,7 +120,8 @@ export const BorderRadiusShadowDemo= () => {
           Component Integration
         </h3>
         <div className="space-y-4">
-          <div className="grid grid-cols-1 md="default" className="w-full">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Button variant="default" className="w-full">
               Default Button
             </Button>
             <Button variant="outline" className="w-full">
@@ -129,12 +132,17 @@ export const BorderRadiusShadowDemo= () => {
             </Button>
           </div>
           
-          <div className="grid grid-cols-1 md="space-y-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
               <label className="text-sm font-medium text-cs-text-secondary">Input Field</label>
               <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="space-y-2">
+                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"
+              />
+            </div>
+            
+            <div className="space-y-2">
               <label className="text-sm font-medium text-cs-text-secondary">Card Example</label>
               <div className="p-4 rounded-lg border border-cs-border bg-cs-surface-bg shadow-sm">
                 <p className="text-sm text-cs-text-secondary">This card uses rounded-lg and shadow-sm</p>
@@ -149,13 +157,16 @@ export const BorderRadiusShadowDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Technical Implementation
         </h3>
-        <div className="grid grid-cols-1 md="font-medium text-cs-text-primary mb-2">CSS Custom Properties</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <h4 className="font-medium text-cs-text-primary mb-2">CSS Custom Properties</h4>
             <div className="bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary overflow-auto">
-              <p>--radius) - 4px)</p>
-              <p>--radius-md) - 2px)</p>
-              <p>--radius-lg)</p>
-              <p>--radius-xl) + 2px)</p>
-              <p>--radius-2xl) + 4px)</p>
+              <p>--radius: 0.5rem</p>
+              <p>--radius-sm: calc(var(--radius) - 4px)</p>
+              <p>--radius-md: calc(var(--radius) - 2px)</p>
+              <p>--radius-lg: var(--radius)</p>
+              <p>--radius-xl: calc(var(--radius) + 2px)</p>
+              <p>--radius-2xl: calc(var(--radius) + 4px)</p>
             </div>
           </div>
           

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Card } from './card';
 import { Button } from './button';
 
-export const BorderRadiusShadowDemo= () => {
+export const BorderRadiusShadowDemo: React.FC = () => {
   return (
     <div className="space-y-6">
       <div className="text-center">
@@ -19,7 +19,8 @@ export const BorderRadiusShadowDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Border Radius System
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="space-y-2">
             <div className="h-20 bg-cs-primary rounded-sm flex items-center justify-center text-white font-medium">
               rounded-sm
             </div>
@@ -68,7 +69,8 @@ export const BorderRadiusShadowDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Shadow System
         </h3>
-        <div className="grid grid-cols-1 md="space-y-2">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <div className="space-y-2">
             <div className="h-20 bg-white rounded-lg shadow-sm flex items-center justify-center text-cs-text-primary font-medium border">
               shadow-sm
             </div>
@@ -118,7 +120,8 @@ export const BorderRadiusShadowDemo= () => {
           Component Integration
         </h3>
         <div className="space-y-4">
-          <div className="grid grid-cols-1 md="default" className="w-full">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <Button variant="default" className="w-full">
               Default Button
             </Button>
             <Button variant="outline" className="w-full">
@@ -129,12 +132,17 @@ export const BorderRadiusShadowDemo= () => {
             </Button>
           </div>
           
-          <div className="grid grid-cols-1 md="space-y-2">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
               <label className="text-sm font-medium text-cs-text-secondary">Input Field</label>
               <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="space-y-2">
+                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"
+              />
+            </div>
+            
+            <div className="space-y-2">
               <label className="text-sm font-medium text-cs-text-secondary">Card Example</label>
               <div className="p-4 rounded-lg border border-cs-border bg-cs-surface-bg shadow-sm">
                 <p className="text-sm text-cs-text-secondary">This card uses rounded-lg and shadow-sm</p>
@@ -149,13 +157,16 @@ export const BorderRadiusShadowDemo= () => {
         <h3 className="text-lg font-semibold text-cs-text-primary mb-4">
           Technical Implementation
         </h3>
-        <div className="grid grid-cols-1 md="font-medium text-cs-text-primary mb-2">CSS Custom Properties</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <h4 className="font-medium text-cs-text-primary mb-2">CSS Custom Properties</h4>
             <div className="bg-cs-surface-bg p-3 rounded-md text-xs font-mono text-cs-text-secondary overflow-auto">
-              <p>--radius) - 4px)</p>
-              <p>--radius-md) - 2px)</p>
-              <p>--radius-lg)</p>
-              <p>--radius-xl) + 2px)</p>
-              <p>--radius-2xl) + 4px)</p>
+              <p>--radius: 0.5rem</p>
+              <p>--radius-sm: calc(var(--radius) - 4px)</p>
+              <p>--radius-md: calc(var(--radius) - 2px)</p>
+              <p>--radius-lg: var(--radius)</p>
+              <p>--radius-xl: calc(var(--radius) + 2px)</p>
+              <p>--radius-2xl: calc(var(--radius) + 4px)</p>
             </div>
           </div>
           

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

@@ -3,11 +3,17 @@ import { Slot } from "@radix-ui/react-slot"
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?}
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
+  size?: 'default' | 'sm' | 'lg' | 'icon' | 'mobile'
+  asChild?: boolean
+}
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant = 'default', size = 'default', asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot = 'button'
+    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}`