aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
407 lines (404 loc) • 13.6 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { cn } from '../../lib/utilsComprehensive.js';
import { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from 'react';
import { GlassPhysicsEngine } from '../effects/GlassPhysicsEngine.js';
import { GlassMorphingEngine } from '../effects/GlassMorphingEngine.js';
import { Glass3DEngine } from '../effects/Glass3DEngine.js';
import { COMMON_SEQUENCES, OrganicAnimationEngine } from '../animations/OrganicAnimationEngine.js';
import { SpatialComputingEngine } from '../spatial/SpatialComputingEngine.js';
import { useEmotionalIntelligence } from '../../utils/emotionalIntelligence.js';
import { useAIPersonalization, useInteractionRecording } from '../../utils/aiPersonalization.js';
const EnhancedGlassButton = /*#__PURE__*/forwardRef(({
children,
className,
variant = 'primary',
size = 'md',
enhancedFeatures = {},
userId = 'default-user',
componentId = 'enhanced-glass-button',
onAdvancedInteraction,
onClick,
...restProps
}, ref) => {
useReducedMotion();
const buttonRef = useRef(null);
const [isInteracting, setIsInteracting] = useState(false);
const [adaptationApplied, setAdaptationApplied] = useState(false);
// Enhanced feature flags with defaults
const features = useMemo(() => ({
physics: {
enabled: true,
interaction: 'ripple',
intensity: 1,
...enhancedFeatures.physics
},
morphing: {
enabled: true,
environmentalAdaptation: true,
userActivityAdaptation: true,
contentTypeAdaptation: true,
...enhancedFeatures.morphing
},
spatial3D: {
enabled: true,
layers: 4,
parallax: true,
depthOfField: true,
holographic: true,
...enhancedFeatures.spatial3D
},
organicMotion: {
enabled: true,
patterns: ['gentle', 'interactive'],
emotionalContext: 'calm',
enableMicroInteractions: true,
...enhancedFeatures.organicMotion
},
emotionalAdaptation: {
enabled: true,
biometricTracking: true,
behaviorAnalysis: true,
uiAdaptation: true,
...enhancedFeatures.emotionalAdaptation
},
spatialComputing: {
enabled: false,
// Disabled by default for compatibility
gestureRecognition: true,
spatialAnchoring: false,
vrOptimized: false,
...enhancedFeatures.spatialComputing
},
aiPersonalization: {
enabled: true,
learningMode: 'adaptive',
recommendationLevel: 'moderate',
...enhancedFeatures.aiPersonalization
}
}), [enhancedFeatures]);
// Initialize intelligence systems
const {
currentEmotion,
uiAdaptation,
addBiometricData,
addBehaviorData,
analyzeEmotion
} = useEmotionalIntelligence();
const {
profile,
recommendations,
recordInteraction,
predictBehavior
} = useAIPersonalization(userId);
const {
startInteraction,
endInteraction
} = useInteractionRecording(componentId, userId);
// Base button styles with glass design tokens
const baseStyles = useMemo(() => {
const sizeStyles = {
xs: 'glass-h-xs glass-px-xs glass-text-xs',
sm: 'glass-h-sm glass-px-sm glass-text-sm',
md: 'glass-h-md glass-px-md glass-text-sm',
lg: 'glass-h-lg glass-px-lg glass-text-base',
xl: 'glass-h-xl glass-px-xl glass-text-lg'
};
const variantStyles = {
primary: 'glass-surface-primary glass-text-primary hover:glass-surface-primary-hover',
secondary: 'glass-surface-secondary glass-text-secondary hover:glass-surface-secondary-hover',
destructive: 'glass-surface-danger glass-text-danger hover:glass-surface-danger-hover',
ghost: 'glass-surface-transparent hover:glass-surface-accent glass-text-secondary hover:glass-text-primary',
outline: 'glass-border-subtle glass-surface-background hover:glass-surface-accent glass-text-secondary hover:glass-text-primary'
};
return cn(
// Base glass foundation
'glass-foundation-complete', 'inline-flex items-center justify-center whitespace-nowrap', 'glass-radius-md glass-transition glass-focus', 'font-medium cursor-pointer select-none', 'disabled:pointer-events-none disabled:opacity-50',
// Glass-specific utilities
'glass-overlay-specular glass-parallax', 'glass-magnet glass-ripple glass-press', sizeStyles[size], variantStyles[variant]);
}, [size, variant]);
// Apply AI personalization adaptations
useEffect(() => {
if (features.aiPersonalization.enabled && profile && !adaptationApplied) {
// Apply learned preferences
const buttonEl = buttonRef.current;
if (buttonEl) {
// Apply animation speed preference
if (profile.uiPreferences.animationSpeed !== 1) {
buttonEl.style.transitionDuration = `${300 / profile.uiPreferences.animationSpeed}ms`;
}
// Apply density preference
if (profile.uiPreferences.density === 'compact') {
buttonEl.style.padding = '0.25rem 0.75rem';
} else if (profile.uiPreferences.density === 'spacious') {
buttonEl.style.padding = '0.75rem 2rem';
}
setAdaptationApplied(true);
}
}
}, [features.aiPersonalization.enabled, profile, adaptationApplied]);
// Enhanced click handler with all intelligence systems
const handleEnhancedClick = useCallback(async event => {
setIsInteracting(true);
// Start interaction recording
const interaction = startInteraction('click', window.location.pathname);
// Record biometric data (simulated - would use real sensors)
if (features.emotionalAdaptation.enabled && features.emotionalAdaptation.biometricTracking) {
addBiometricData({
mouseVelocity: Math.sqrt(event.movementX ** 2 + event.movementY ** 2),
clickPressure: Math.random() * 0.5 + 0.5,
// Simulated
dwellTime: Date.now() % 5000 // Simulated
});
}
// Record behavioral data
if (features.emotionalAdaptation.enabled && features.emotionalAdaptation.behaviorAnalysis) {
addBehaviorData({
interactionFrequency: Math.floor(Math.random() * 20) + 5,
decisionTime: Math.random() * 2000 + 500,
errorRate: Math.random() * 0.1
});
}
// Analyze emotion and trigger UI adaptation
if (features.emotionalAdaptation.enabled) {
const emotion = analyzeEmotion();
if (emotion) {
onAdvancedInteraction?.('emotion-detected', emotion);
}
}
// Predict next likely behavior
if (features.aiPersonalization.enabled) {
const predictions = predictBehavior(window.location.pathname);
if (predictions.length > 0) {
onAdvancedInteraction?.('behavior-predicted', predictions[0]);
}
}
// Call original onClick
onClick?.(event);
// End interaction recording
endInteraction(interaction, {
x: event.clientX,
y: event.clientY
});
// Advanced interaction callback
onAdvancedInteraction?.('enhanced-click', {
emotion: currentEmotion,
predictions: predictBehavior(window.location.pathname),
adaptations: uiAdaptation
});
setTimeout(() => setIsInteracting(false), 300);
}, [startInteraction, endInteraction, onClick, features, addBiometricData, addBehaviorData, analyzeEmotion, predictBehavior, currentEmotion, uiAdaptation, onAdvancedInteraction]);
// Create the enhanced button with all systems
const {
['aria-label']: ariaLabelProp,
...buttonProps
} = restProps;
const buttonContent = children ?? "Action";
const accessibleLabel = ariaLabelProp || (typeof buttonContent === "string" ? buttonContent : "Enhanced glass button");
const enhancedButton = useMemo(() => {
let buttonElement = jsx("button", {
ref: buttonRef,
className: cn(baseStyles, className),
onClick: handleEnhancedClick,
"aria-label": accessibleLabel,
...buttonProps,
children: buttonContent
});
// Wrap with Physics Engine
if (features.physics.enabled) {
buttonElement = jsx(GlassPhysicsEngine, {
interaction: features.physics.interaction,
intensity: features.physics.intensity,
enabled: features.physics.enabled,
children: buttonElement
});
}
// Wrap with Morphing Engine
if (features.morphing.enabled) {
buttonElement = jsx(GlassMorphingEngine, {
enableRealTimeAdaptation: features.morphing.environmentalAdaptation,
userActivity: isInteracting ? 'focused' : 'browsing',
contentType: "interactive",
intensity: features.physics.intensity || 1,
children: buttonElement
});
}
// Wrap with 3D Engine
if (features.spatial3D.enabled) {
buttonElement = jsx(Glass3DEngine, {
enableParallax: features.spatial3D.parallax,
enableDepthOfField: features.spatial3D.depthOfField,
enableHolographic: features.spatial3D.holographic,
maxDepthLayers: features.spatial3D.layers,
children: buttonElement
});
}
// Wrap with Organic Animation Engine
if (features.organicMotion.enabled) {
const animationSequences = features.organicMotion.patterns?.flatMap(pattern => COMMON_SEQUENCES[pattern] || []);
buttonElement = jsx(OrganicAnimationEngine, {
sequences: animationSequences,
emotionalContext: currentEmotion?.primary || features.organicMotion.emotionalContext,
enableMicroInteractions: features.organicMotion.enableMicroInteractions,
children: buttonElement
});
}
// Wrap with Spatial Computing Engine (for AR/VR)
if (features.spatialComputing.enabled) {
buttonElement = jsx(SpatialComputingEngine, {
enableGestures: features.spatialComputing.gestureRecognition,
enableAnchoring: features.spatialComputing.spatialAnchoring,
spatialId: `${componentId}-spatial`,
onGesture: gesture => onAdvancedInteraction?.('gesture', gesture),
children: buttonElement
});
}
return buttonElement;
}, [accessibleLabel, baseStyles, buttonContent, buttonProps, className, componentId, currentEmotion, features, handleEnhancedClick, isInteracting, onAdvancedInteraction]);
// Forward ref to the actual button element
useEffect(() => {
if (typeof ref === 'function') {
ref(buttonRef.current);
} else if (ref) {
ref.current = buttonRef.current;
}
}, [ref]);
return enhancedButton;
});
EnhancedGlassButton.displayName = 'EnhancedGlassButton';
// Predefined enhanced button variants for common use cases
const PhysicsGlassButton = props => jsx(EnhancedGlassButton, {
...props,
enhancedFeatures: {
physics: {
enabled: true,
interaction: 'ripple',
intensity: 1.2
},
organicMotion: {
enabled: true,
patterns: ['interactive']
},
aiPersonalization: {
enabled: true
}
}
});
const ImmersiveGlassButton = props => jsx(EnhancedGlassButton, {
...props,
enhancedFeatures: {
physics: {
enabled: true,
interaction: 'ripple'
},
morphing: {
enabled: true,
environmentalAdaptation: true
},
spatial3D: {
enabled: true,
holographic: true
},
organicMotion: {
enabled: true,
patterns: ['gentle', 'interactive']
},
emotionalAdaptation: {
enabled: true
},
aiPersonalization: {
enabled: true
}
}
});
const VRGlassButton = props => jsx(EnhancedGlassButton, {
...props,
enhancedFeatures: {
spatialComputing: {
enabled: true,
gestureRecognition: true,
vrOptimized: true
},
spatial3D: {
enabled: true,
layers: 6
},
physics: {
enabled: true,
interaction: 'vibrate'
},
aiPersonalization: {
enabled: true
}
}
});
const SmartAdaptiveButton = props => jsx(EnhancedGlassButton, {
...props,
enhancedFeatures: {
emotionalAdaptation: {
enabled: true,
biometricTracking: true,
behaviorAnalysis: true,
uiAdaptation: true
},
aiPersonalization: {
enabled: true,
learningMode: 'adaptive',
recommendationLevel: 'comprehensive'
},
morphing: {
enabled: true,
userActivityAdaptation: true
},
organicMotion: {
enabled: true,
enableMicroInteractions: true
}
}
});
const UltraEnhancedButton = props => jsx(EnhancedGlassButton, {
...props,
enhancedFeatures: {
physics: {
enabled: true,
interaction: 'ripple',
intensity: 1.5
},
morphing: {
enabled: true,
environmentalAdaptation: true,
userActivityAdaptation: true,
contentTypeAdaptation: true
},
spatial3D: {
enabled: true,
layers: 6,
parallax: true,
depthOfField: true,
holographic: true
},
organicMotion: {
enabled: true,
patterns: ['gentle', 'energetic', 'interactive'],
enableMicroInteractions: true
},
emotionalAdaptation: {
enabled: true,
biometricTracking: true,
behaviorAnalysis: true,
uiAdaptation: true
},
spatialComputing: {
enabled: false
},
// Disabled for web compatibility
aiPersonalization: {
enabled: true,
learningMode: 'adaptive',
recommendationLevel: 'comprehensive'
}
}
});
export { EnhancedGlassButton, ImmersiveGlassButton, PhysicsGlassButton, SmartAdaptiveButton, UltraEnhancedButton, VRGlassButton, EnhancedGlassButton as default };
//# sourceMappingURL=EnhancedGlassButton.js.map