aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
841 lines (838 loc) • 36.3 kB
JavaScript
'use client';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { IconButton, GlassButton } from '../button/GlassButton.js';
import { cn } from '../../lib/utilsComprehensive.js';
import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
import { FocusTrap } from '../../primitives/focus/FocusTrap.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
import { LiquidGlassMaterial } from '../../primitives/LiquidGlassMaterial.js';
import { GlassInput } from '../input/GlassInput.js';
import { usePredictiveEngine, useInteractionRecorder } from '../advanced/GlassPredictiveEngine.js';
import { useAchievements } from '../advanced/GlassAchievementSystem.js';
import { useBiometricAdaptation } from '../advanced/GlassBiometricAdaptation.js';
import { useEyeTracking } from '../advanced/GlassEyeTracking.js';
import { useSpatialAudio } from '../advanced/GlassSpatialAudio.js';
/**
* GlassHeader component
* A glassmorphism header with navigation, search, and user menu
*/
const GlassHeader = /*#__PURE__*/forwardRef(({
variant = "default",
size = "md",
material = "standard",
materialVariant = "regular",
scrollAdaptive = true,
logo,
navigation,
actions = [],
search,
userMenu,
mobileMenuOpen = false,
onMobileMenuToggle,
breadcrumbs,
children,
className,
// Consciousness features
predictive = false,
preloadContent = false,
eyeTracking = false,
gazeResponsive = false,
adaptive = false,
biometricResponsive = false,
spatialAudio = false,
audioFeedback = false,
trackAchievements = false,
achievementId,
usageContext = "main",
...props
}, ref) => {
useRef(null);
const [isScrolled, setIsScrolled] = useState(false);
const [scrollDensity, setScrollDensity] = useState(1.0); // For scroll-adaptive density
const [adaptiveSize, setAdaptiveSize] = useState(size);
const [predictiveSearchSuggestions, setPredictiveSearchSuggestions] = useState([]);
const [navigationUsage, setNavigationUsage] = useState({});
// Consciousness feature hooks - only initialize if features are enabled
const predictiveEngine = predictive ? usePredictiveEngine() : null;
eyeTracking ? useEyeTracking() : null;
const biometricAdapter = adaptive ? useBiometricAdaptation() : null;
const spatialAudioEngine = spatialAudio ? useSpatialAudio() : null;
const achievementTracker = trackAchievements ? useAchievements() : null;
const interactionRecorder = predictive || trackAchievements ? useInteractionRecorder(`glass-header-${variant}`) : null;
const [searchQuery, setSearchQuery] = useState("");
const [isSearchFocused, setIsSearchFocused] = useState(false);
// Enhanced scroll tracking with adaptive density for liquid glass
useEffect(() => {
const handleScroll = () => {
const scrollY = window.scrollY;
const scrolled = scrollY > 10;
setIsScrolled(scrolled);
// Scroll-adaptive density for liquid glass headers
if (material === "liquid" && scrollAdaptive) {
// Increase density (reduce transparency, enhance blur) as user scrolls
const maxScrollForDensity = 200; // Max scroll distance for full density
const densityFactor = Math.min(scrollY / maxScrollForDensity, 1);
const newDensity = 1 + densityFactor * 0.5; // 1.0 to 1.5 density range
setScrollDensity(newDensity);
}
// Record scroll interaction
if (interactionRecorder && scrolled !== isScrolled) {
// Note: recordScroll method may not be available, using recordClick as fallback
if (interactionRecorder.recordClick) {
interactionRecorder.recordClick({
target: "header",
data: {
type: "scroll",
scrolled,
scrollY,
density: scrollDensity,
material
}
});
}
}
};
window.addEventListener("scroll", handleScroll, {
passive: true
});
return () => window.removeEventListener("scroll", handleScroll);
}, [interactionRecorder, isScrolled, material, scrollAdaptive, scrollDensity]);
// Biometric adaptation effects
useEffect(() => {
if (!biometricResponsive || !biometricAdapter) return;
const adaptHeader = () => {
const stressLevel = biometricAdapter.currentStressLevel;
// Adapt header size based on stress level
if (stressLevel > 0.7) {
setAdaptiveSize("lg"); // Larger header when stressed
} else if (stressLevel < 0.3) {
setAdaptiveSize("sm"); // Compact header when relaxed
} else {
setAdaptiveSize(size); // Use original size
}
};
// Initial adaptation
adaptHeader();
// Listen for biometric changes
const interval = setInterval(adaptHeader, 5000);
return () => clearInterval(interval);
}, [biometricResponsive, biometricAdapter, size]);
// Predictive search suggestions
useEffect(() => {
if (!predictive || !predictiveEngine || !search) return;
const updatePredictiveSearch = () => {
const predictions = predictiveEngine.predictions;
const searchPredictions = predictions.filter(p => p.type === "suggest" && p.metadata?.searchQuery).map(p => p.metadata.searchQuery).slice(0, 5);
setPredictiveSearchSuggestions(searchPredictions);
};
// Update every 2 seconds during active search
const interval = isSearchFocused ? setInterval(updatePredictiveSearch, 2000) : null;
updatePredictiveSearch(); // Initial update
return () => {
if (interval) clearInterval(interval);
};
}, [predictive, predictiveEngine, search, isSearchFocused]);
// Navigation usage tracking
useCallback(navItem => {
if (!predictive) return;
setNavigationUsage(prev => ({
...prev,
[navItem]: (prev[navItem] || 0) + 1
}));
if (interactionRecorder) {
interactionRecorder.recordClick({
target: `nav-${navItem}`,
data: {
context: "header-navigation"
}
});
}
if (achievementTracker && trackAchievements) {
achievementTracker.recordAction("navigation_usage", {
navItem,
totalUsage: (navigationUsage[navItem] || 0) + 1
});
}
if (spatialAudioEngine && audioFeedback) {
spatialAudioEngine.playGlassSound("navigation_click");
}
}, [predictive, interactionRecorder, achievementTracker, trackAchievements, navigationUsage, spatialAudioEngine, audioFeedback]);
const effectiveSize = biometricResponsive ? adaptiveSize : size;
const sizeClasses = {
sm: "h-12 glass-px-4",
md: "h-16 glass-px-6",
lg: "h-20 glass-px-8"
};
const variantClasses = {
default: "border-b border-border/20",
floating: "border border-border/20 glass-radius-lg glass-mx-4 glass-mt-4",
sticky: "border-b border-border/30 sticky top-0 z-40",
transparent: "bg-transparent"
};
// Common props for both material types
const commonProps = {
ref,
className: cn("glass-w-full glass-flex glass-items-center glass-justify-between", "glass-transition", sizeClasses?.[effectiveSize], variantClasses?.[variant], variant === "floating" ? "squiricle" : "",
// Consciousness feature styles
{
"glass-glass-backdrop-blur-sm": isScrolled && (predictive || gazeResponsive),
"glass-shadow-lg": gazeResponsive
}, className),
// Use utility class instead of inline style
// Note: any external style prop is ignored to comply with no-inline-style-attr
"data-overflow": "visible",
...props
};
const elevation = variant === "transparent" ? "level1" : variant === "floating" ? "level3" : "level2";
// Render with LiquidGlassMaterial for enhanced effects
if (material === "liquid") {
return jsxs(LiquidGlassMaterial, {
"data-glass-component": true,
...commonProps,
material: "liquid",
variant: materialVariant,
intent: "primary",
elevation: elevation,
adaptToContent: true,
adaptToMotion: true,
enableMicroInteractions: true,
// Removed inline style to comply with no-inline-style-attr (opacity adaptation skipped)
performanceLevel: variant === "floating" ? "high" : "balanced",
interactive: true,
radius: variant === "floating" ? "xl" : "lg",
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-gap-4",
children: [onMobileMenuToggle && jsx(IconButton, {
className: 'glass-focus md:hidden',
icon: jsxs("div", {
className: 'w-5 h-5 glass-flex glass-flex-col glass-justify-center glass-gap-1',
children: [jsx("div", {
className: cn("h-0.5 bg-current transition-all duration-200", mobileMenuOpen ? "rotate-45 translate-y-1.5" : "w-5")
}), jsx("div", {
className: cn("h-0.5 bg-current transition-all duration-200", mobileMenuOpen ? "opacity-0" : "w-5")
}), jsx("div", {
className: cn("h-0.5 bg-current transition-all duration-200", mobileMenuOpen ? "-rotate-45 -translate-y-1.5" : "w-5")
})]
}),
intent: "neutral",
size: "sm",
onClick: onMobileMenuToggle,
"aria-label": mobileMenuOpen ? "Close menu" : "Open menu"
}), logo && jsx("div", {
className: "glass-flex-shrink-0",
children: logo
}), navigation && jsx("nav", {
className: 'hidden md:block',
children: navigation
})]
}), jsxs("div", {
className: "glass-flex-1 glass-flex glass-justify-center glass-px-4",
children: [search && jsxs("div", {
className: 'relative glass-w-full max-w-md',
children: [jsx(GlassInput, {
placeholder: search.placeholder || "Search...",
value: searchQuery,
onChange: e => setSearchQuery(e.target.value),
onFocus: () => setIsSearchFocused(true),
onBlur: () => setIsSearchFocused(false),
leftIcon: jsx("svg", {
className: 'w-4 h-4',
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: jsx("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
})
}),
clearable: true,
onClear: () => setSearchQuery(""),
className: "glass-w-full"
}), isSearchFocused && ((search.suggestions?.length ?? 0) > 0 || predictiveSearchSuggestions.length > 0) && jsx(MotionFramer, {
preset: "slideDown",
className: 'absolute top-full left-0 right-0 glass-mt-1 z-[1000]',
children: jsx(OptimizedGlassCore, {
intent: "neutral",
elevation: "level4",
intensity: "strong",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "high",
className: 'max-h-60 overflow-y-auto glass-radius-xl',
children: jsxs("div", {
className: "glass-p-3",
children: [predictiveSearchSuggestions.length > 0 && jsxs(Fragment, {
children: [jsx("div", {
className: 'glass-text-xs text-primary font-medium mb-2 glass-px-2',
children: "\uD83E\uDDE0 Predicted"
}), predictiveSearchSuggestions.map((suggestion, index) => jsxs(GlassButton, {
className: 'glass-w-full text-left glass-px-4 glass-py-3 glass-radius-xl hover:glass-surface-primary/20 transition-colors mb-2 glass-border glass-border',
onClick: e => {
setSearchQuery(suggestion);
search.onSearch?.(suggestion);
if (interactionRecorder) {
interactionRecorder.recordClick({
target: "predictive-search-suggestion",
data: {
value: suggestion,
type: "predictive"
}
});
}
},
children: [jsx("span", {
className: 'text-primary',
children: "\uD83D\uDCA1"
}), " ", suggestion]
}, `predictive-${index}`))]
}), search.suggestions && search.suggestions.length > 0 && jsxs(Fragment, {
children: [predictiveSearchSuggestions.length > 0 && jsx("div", {
className: "glass-border-t glass-border-white/10 glass-my-2"
}), jsx("div", {
className: 'glass-text-xs text-primary/60 font-medium mb-2 glass-px-2',
children: "Recent"
}), search.suggestions.map((suggestion, index) => jsx(GlassButton, {
className: 'glass-w-full text-left glass-px-4 glass-py-3 glass-radius-xl hover:glass-surface-subtle transition-colors mb-2 last:glass-mb-0',
onClick: e => {
setSearchQuery(suggestion);
search.onSearch?.(suggestion);
if (interactionRecorder) {
interactionRecorder.recordClick({
target: "search-suggestion",
data: {
value: suggestion,
type: "regular"
}
});
}
},
children: suggestion
}, `original-${index}`))]
})]
})
})
})]
}), breadcrumbs && !search && jsx("div", {
className: "glass-flex glass-items-center",
children: breadcrumbs
}), children && !search && !breadcrumbs && jsx("div", {
className: "glass-flex glass-items-center",
children: children
})]
}), jsxs("div", {
className: "glass-flex glass-items-center glass-gap-2",
children: [(actions || []).map(action => jsx(NotificationButton, {
action: action
}, action.id)), userMenu && jsx(UserMenu, {
...userMenu
})]
})]
});
}
// Fallback to OptimizedGlass for standard material
return jsxs(OptimizedGlassCore, {
...commonProps,
intent: "primary",
elevation: elevation,
intensity: "medium",
depth: 2,
tint: "lavender",
border: variant === "floating" ? "gradient" : "subtle",
animation: "none",
performanceMode: "medium",
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-gap-4",
children: [onMobileMenuToggle && jsx(IconButton, {
icon: jsxs("div", {
className: 'w-5 h-5 glass-flex glass-flex-col glass-justify-center glass-gap-1',
children: [jsx("div", {
className: cn("h-0.5 bg-current transition-all duration-200", mobileMenuOpen ? "rotate-45 translate-y-1.5" : "w-5")
}), jsx("div", {
className: cn("h-0.5 bg-current transition-all duration-200", mobileMenuOpen ? "opacity-0" : "w-5")
}), jsx("div", {
className: cn("h-0.5 bg-current transition-all duration-200", mobileMenuOpen ? "-rotate-45 -translate-y-1.5" : "w-5")
})]
}),
intent: "neutral",
size: "sm",
onClick: onMobileMenuToggle,
"aria-label": mobileMenuOpen ? "Close menu" : "Open menu",
className: 'md:hidden'
}), logo && jsx("div", {
className: "glass-flex-shrink-0",
children: logo
}), navigation && jsx("nav", {
className: 'hidden md:block',
children: navigation
})]
}), jsxs("div", {
className: "glass-flex-1 glass-flex glass-justify-center glass-px-4",
children: [search && jsxs("div", {
className: 'relative glass-w-full max-w-md',
children: [jsx(GlassInput, {
placeholder: search.placeholder || "Search...",
value: searchQuery,
onChange: e => setSearchQuery(e.target.value),
onFocus: () => setIsSearchFocused(true),
onBlur: () => setIsSearchFocused(false),
leftIcon: jsx("svg", {
className: 'w-4 h-4',
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: jsx("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
})
}),
clearable: true,
onClear: () => setSearchQuery(""),
className: "glass-w-full"
}), isSearchFocused && ((search.suggestions?.length ?? 0) > 0 || predictiveSearchSuggestions.length > 0) && jsx(MotionFramer, {
preset: "slideDown",
className: 'absolute top-full left-0 right-0 glass-mt-1 z-[1000]',
children: jsx(OptimizedGlassCore, {
intent: "neutral",
elevation: "level4",
intensity: "strong",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "high",
className: 'max-h-60 overflow-y-auto glass-radius-xl',
children: jsxs("div", {
className: "glass-p-3",
children: [predictiveSearchSuggestions.length > 0 && jsxs(Fragment, {
children: [jsx("div", {
className: 'glass-text-xs text-primary font-medium mb-2 glass-px-2',
children: "\uD83E\uDDE0 Predicted"
}), predictiveSearchSuggestions.map((suggestion, index) => jsxs(GlassButton, {
className: 'glass-w-full text-left glass-px-4 glass-py-3 glass-radius-xl hover:glass-surface-primary/20 transition-colors mb-2 glass-border glass-border',
onClick: e => {
setSearchQuery(suggestion);
search.onSearch?.(suggestion);
if (interactionRecorder) {
interactionRecorder.recordClick({
target: "predictive-search-suggestion",
data: {
value: suggestion,
type: "predictive"
}
});
}
},
children: [jsx("span", {
className: 'text-primary',
children: "\uD83D\uDCA1"
}), " ", suggestion]
}, `predictive-${index}`))]
}), search.suggestions && search.suggestions.length > 0 && jsxs(Fragment, {
children: [predictiveSearchSuggestions.length > 0 && jsx("div", {
className: "glass-border-t glass-border-white/10 glass-my-2"
}), jsx("div", {
className: 'glass-text-xs text-primary/60 font-medium mb-2 glass-px-2',
children: "Recent"
}), search.suggestions.map((suggestion, index) => jsx(GlassButton, {
className: 'glass-w-full text-left glass-px-4 glass-py-3 glass-radius-xl hover:glass-surface-subtle transition-colors mb-2 last:glass-mb-0',
onClick: e => {
setSearchQuery(suggestion);
search.onSearch?.(suggestion);
if (interactionRecorder) {
interactionRecorder.recordClick({
target: "search-suggestion",
data: {
value: suggestion,
type: "regular"
}
});
}
},
children: suggestion
}, `original-${index}`))]
})]
})
})
})]
}), breadcrumbs && !search && jsx("div", {
className: "glass-flex glass-items-center",
children: breadcrumbs
}), children && !search && !breadcrumbs && jsx("div", {
className: "glass-flex glass-items-center",
children: children
})]
}), jsxs("div", {
className: "glass-flex glass-items-center glass-gap-2",
children: [(actions || []).map(action => jsx(NotificationButton, {
action: action
}, action.id)), userMenu && jsx(UserMenu, {
...userMenu
})]
})]
});
});
GlassHeader.displayName = "GlassHeader";
function NotificationButton({
action
}) {
const [isOpen, setIsOpen] = useState(false);
// Close on Escape for accessibility and convenience
React.useEffect(() => {
if (!isOpen) return;
const onKeyDown = e => {
if (e.key === "Escape") setIsOpen(false);
};
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, [isOpen]);
return jsxs("div", {
className: 'relative',
children: [jsxs(GlassButton, {
variant: "ghost",
flat: true,
onClick: e => {
setIsOpen(!isOpen);
action.onClick?.();
},
disabled: action.disabled,
className: cn("relative glass-p-2 glass-radius-md transition-colors glass-focus", "hover:bg-white/10", action.disabled && "opacity-50 cursor-not-allowed"),
"aria-label": action.label,
children: [jsx("div", {
className: 'w-5 h-5 glass-flex glass-items-center glass-justify-center',
children: action.icon
}), action.badge && jsx("span", {
className: 'absolute top-0 right-0 z-20 pointer-events-none glass-surface-danger text-primary glass-text-xs glass-radius-full glass-min-w-4 h-4 glass-flex glass-items-center glass-justify-center glass-px-1 font-semibold glass-shadow-md',
children: action.badge
})]
}), isOpen && action.id === "notifications" && jsx(MotionFramer, {
preset: "slideDown",
className: 'absolute top-full right-0 glass-mt-2 z-[1000]',
children: jsx(OptimizedGlassCore, {
intent: "neutral",
elevation: "level4",
intensity: "strong",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "medium",
className: 'w-80 ring-1 ring-white/10 glass-shadow-[0_12px_40px_rgba(17,24,39,0.45)] glass-radius-xl',
children: jsxs("div", {
className: "glass-p-4",
children: [jsxs("h3", {
className: 'font-semibold text-primary mb-3 glass-flex glass-items-center glass-justify-between',
children: ["Notifications", jsx("span", {
className: 'glass-text-xs text-primary glass-surface-primary/10 glass-px-2 glass-py-1 glass-radius-full',
children: "3"
})]
}), jsxs("div", {
className: 'glass-gap-3 glass-max-h-64 overflow-y-auto',
children: [jsxs("div", {
className: 'glass-p-3 glass-surface-subtle/8 glass-border glass-border-white/15 transition-colors cursor-pointer glass-shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] glass-radius-xl',
children: [jsxs("div", {
className: "glass-flex glass-items-start glass-justify-between",
children: [jsxs("div", {
children: [jsx("p", {
className: 'glass-text-sm text-primary font-medium',
children: "New evaluation completed"
}), jsx("p", {
className: 'glass-text-xs text-primary glass-mt-1',
children: "Customer Support QA Template"
})]
}), jsx("span", {
className: 'w-2 h-2 glass-surface-primary glass-radius-full glass-mt-2'
})]
}), jsx("p", {
className: 'glass-text-xs text-primary/70 glass-mt-2',
children: "2 minutes ago"
})]
}), jsxs("div", {
className: 'glass-p-3 glass-surface-subtle/8 glass-border glass-border-white/15 transition-colors cursor-pointer glass-shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] glass-radius-xl',
children: [jsxs("div", {
className: "glass-flex glass-items-start glass-justify-between",
children: [jsxs("div", {
children: [jsx("p", {
className: 'glass-text-sm text-primary font-medium',
children: "Model comparison ready"
}), jsx("p", {
className: "glass-text-xs glass-text-success glass-mt-1",
children: "GPT-4 vs Claude-3.5 Sonnet"
})]
}), jsx("span", {
className: 'w-2 h-2 glass-surface-success glass-radius-full glass-mt-2'
})]
}), jsx("p", {
className: 'glass-text-xs text-primary/70 glass-mt-2',
children: "15 minutes ago"
})]
}), jsxs("div", {
className: 'glass-p-3 glass-surface-subtle/8 glass-border glass-border-white/15 transition-colors cursor-pointer glass-shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] glass-radius-xl',
children: [jsxs("div", {
className: "glass-flex glass-items-start glass-justify-between",
children: [jsxs("div", {
children: [jsx("p", {
className: 'glass-text-sm text-primary font-medium',
children: "Team member joined"
}), jsx("p", {
className: 'glass-text-xs text-primary glass-mt-1',
children: "Sarah Chen joined your organization"
})]
}), jsx("span", {
className: 'w-2 h-2 glass-surface-primary glass-radius-full glass-mt-2'
})]
}), jsx("p", {
className: 'glass-text-xs text-primary/70 glass-mt-2',
children: "1 hour ago"
})]
})]
}), jsx("div", {
className: "glass-pt-3 glass-mt-3 glass-border-t glass-border-white/10",
children: jsx(GlassButton, {
className: 'glass-w-full glass-text-sm text-primary hover:glass-text-secondary font-medium transition-colors glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-[14px]',
children: "View all notifications"
})
})]
})
})
}), isOpen && jsx("div", {
className: 'fixed inset-0 z-40',
onClick: e => setIsOpen(false)
})]
});
}
function UserMenu({
user,
items
}) {
const [isOpen, setIsOpen] = useState(false);
const triggerRef = useRef(null);
const statusColors = {
online: "glass-surface-success",
away: "glass-surface-warning",
busy: "glass-surface-danger",
offline: "glass-surface-primary"
};
const handleItemClick = item => {
if (item?.disabled) return;
item?.onClick?.();
setIsOpen(false);
if (item?.href) {
window.location.href = item?.href;
}
};
return jsxs("div", {
className: 'relative',
children: [jsxs(GlassButton, {
variant: "ghost",
flat: true,
ref: triggerRef,
onClick: e => setIsOpen(!isOpen),
className: 'glass-flex glass-items-center glass-gap-2 glass-p-1 glass-radius-md hover:glass-surface-subtle/5 active:glass-surface-subtle/10 transition-colors',
"aria-expanded": isOpen,
"aria-haspopup": "menu",
children: [jsxs("div", {
className: 'relative',
children: [user.avatar ? jsx("img", {
src: user.avatar,
alt: user.name,
className: 'w-8 h-8 glass-radius-full object-cover'
}) : jsx("div", {
className: 'w-8 h-8 glass-radius-full glass-surface-primary/20 glass-flex glass-items-center glass-justify-center',
children: jsx("span", {
className: 'glass-text-sm font-medium',
suppressHydrationWarning: true,
children: user.name.charAt(0)
})
}), user.status && jsx("div", {
className: cn("absolute -bottom-0.5 -right-0.5 w-3 h-3 glass-radius-full border-2 border-background", statusColors?.[user.status])
})]
}), jsxs("div", {
className: 'hidden sm:block text-left',
children: [jsx("p", {
className: 'glass-text-sm font-medium text-primary',
suppressHydrationWarning: true,
children: user.name
}), user.email && jsx("p", {
className: 'glass-text-xs text-primary/70',
suppressHydrationWarning: true,
children: user.email
})]
}), jsx("svg", {
className: cn("w-4 h-4 transition-transform duration-200", isOpen ? "rotate-180" : "rotate-0"),
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: jsx("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M19 9l-7 7-7-7"
})
})]
}), isOpen && jsx(MotionFramer, {
preset: "slideDown",
className: 'absolute top-full right-0 glass-mt-2 z-[1000]',
children: jsx(OptimizedGlassCore, {
intent: "neutral",
elevation: "level4",
intensity: "strong",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "medium",
className: 'w-80 glass-p-1 ring-1 ring-white/10 glass-shadow-[0_20px_60px_rgba(2,8,23,0.55)] glass-radius-2xl',
children: jsx(FocusTrap, {
active: isOpen,
onEscape: () => setIsOpen(false),
children: jsxs("div", {
className: "glass-p-3",
children: [jsx("div", {
className: 'glass-px-3 glass-py-3 glass-gradient-primary glass-gradient-primary via-white/3 glass-gradient-primary glass-border glass-border-white/12 glass-radius-[18px] mb-2 glass-shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]',
children: jsxs("div", {
className: "glass-flex glass-items-center glass-gap-3",
children: [user.avatar ? jsx("img", {
src: user.avatar,
alt: user.name,
className: 'w-10 h-10 glass-radius-full object-cover glass-border-2 glass-border-white/20'
}) : jsx("div", {
className: 'w-10 h-10 glass-radius-full glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-flex glass-items-center glass-justify-center glass-border-2 glass-border-white/20',
children: jsx("span", {
className: 'text-primary font-semibold',
suppressHydrationWarning: true,
children: user.name.charAt(0)
})
}), jsxs("div", {
children: [jsx("p", {
className: 'font-semibold text-primary glass-text-sm',
suppressHydrationWarning: true,
children: user.name
}), user.email && jsx("p", {
className: 'glass-text-xs text-primary',
suppressHydrationWarning: true,
children: user.email
}), user.status && jsxs("div", {
className: "glass-flex glass-items-center glass-gap-1 glass-mt-1",
children: [jsx("span", {
className: cn("w-2 h-2 glass-radius-full", statusColors?.[user.status])
}), jsx("span", {
className: 'glass-text-xs text-primary/70 capitalize',
children: user.status
})]
})]
})]
})
}), jsx("div", {
className: "glass-gap-1",
children: items.map(item => jsx(React.Fragment, {
children: item?.divider ? jsx("div", {
className: "glass-my-2 glass-border-t glass-border-white/10"
}) : jsxs("button", {
type: "button",
onClick: e => handleItemClick(item),
disabled: item?.disabled,
className: cn("w-full flex items-center justify-between glass-gap-3 glass-px-3 glass-py-2.5 rounded-[14px]", "glass-text-sm text-left transition-colors", item?.id === "logout" ? "glass-text-danger hover:glass-surface-danger/10" : "glass-text-primary/90 hover:glass-text-primary hover:bg-white/10", item?.disabled && "opacity-50 cursor-not-allowed"),
children: [jsxs("span", {
className: 'glass-inline-flex glass-items-center glass-gap-3 truncate',
children: [item?.icon && jsx("span", {
className: cn("w-4 h-4 flex items-center justify-center", item?.id === "logout" ? "glass-text-danger" : "glass-text-primary/80"),
children: item?.icon
}), jsx("span", {
className: 'truncate font-medium',
children: item?.label
})]
}), item?.id !== "logout" && jsx("svg", {
className: 'w-4 h-4 text-primary/40',
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
children: jsx("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 5l7 7-7 7"
})
})]
})
}, item?.id))
})]
})
})
})
}), isOpen && jsx("div", {
className: 'fixed inset-0 z-40',
onClick: e => setIsOpen(false)
})]
});
}
/**
* Enhanced GlassHeader with consciousness features enabled by default
* Use this for headers that should be intelligent and adaptive
*/
const ConsciousGlassHeader = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassHeader, {
ref: ref,
predictive: true,
adaptive: true,
biometricResponsive: true,
trackAchievements: true,
achievementId: "conscious_header_usage",
usageContext: "main",
...props
}));
ConsciousGlassHeader.displayName = "ConsciousGlassHeader";
/**
* Predictive header with intelligent search suggestions and navigation tracking
*/
const PredictiveHeader = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassHeader, {
ref: ref,
predictive: true,
preloadContent: true,
trackAchievements: true,
achievementId: "predictive_header_usage",
usageContext: "main",
...props
}));
PredictiveHeader.displayName = "PredictiveHeader";
/**
* Gaze-responsive header with eye tracking for enhanced interactions
*/
const GazeResponsiveHeader = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassHeader, {
ref: ref,
eyeTracking: true,
gazeResponsive: true,
spatialAudio: true,
audioFeedback: true,
trackAchievements: true,
achievementId: "gaze_header_interaction",
usageContext: "main",
...props
}));
GazeResponsiveHeader.displayName = "GazeResponsiveHeader";
/**
* Accessibility-focused header with biometric adaptation and spatial audio
*/
const AccessibleHeader = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassHeader, {
ref: ref,
adaptive: true,
biometricResponsive: true,
spatialAudio: true,
audioFeedback: true,
trackAchievements: true,
achievementId: "accessible_header_usage",
usageContext: "main",
...props
}));
AccessibleHeader.displayName = "AccessibleHeader";
export { AccessibleHeader, ConsciousGlassHeader, GazeResponsiveHeader, GlassHeader, PredictiveHeader };
//# sourceMappingURL=GlassHeader.js.map