aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
67 lines (64 loc) • 2.02 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import { useRef, useState } from 'react';
import { useContrastGuard, applyContrastAdjustment } from '../../utils/contrastGuard.js';
import { cn } from '../../lib/utilsComprehensive.js';
/**
* ContrastGuard wrapper component
* Ensures text content meets WCAG contrast requirements
*/
const ContrastGuard = ({
children,
level = 'AA',
minContrast = 4.5,
fallbackColor = 'var(--glass-text-primary)',
backgroundColor,
textColor = 'var(--glass-text-primary)',
material = 'liquid',
variant = 'regular',
autoAdjust = true,
className,
as: Component = 'span',
onAdjustment
}) => {
const elementRef = useRef(null);
const [appliedStyles, setAppliedStyles] = useState({});
// Use ContrastGuard hook if autoAdjust is enabled
const adjustment = useContrastGuard(elementRef, autoAdjust ? {
targetLevel: level,
material,
variant,
textColor,
onAdjustment: adj => {
if (elementRef.current) {
applyContrastAdjustment(elementRef.current, adj);
}
onAdjustment?.(adj.meetsRequirement, adj.adjustedContrast);
// Apply styles dynamically
const styles = {};
if (adj.modifications.fallbackMode && fallbackColor) {
styles.color = fallbackColor;
}
setAppliedStyles(styles);
}
} : undefined);
return jsx(Component, {
"data-glass-component": true,
...{
ref: elementRef,
className: cn('contrast-guard', adjustment?.meetsRequirement && 'contrast-guard--compliant', adjustment?.modifications.fallbackMode && 'contrast-guard--fallback', className),
style: {
...appliedStyles,
...(backgroundColor && {
backgroundColor
})
},
'data-contrast-level': level,
'data-contrast-ratio': adjustment?.adjustedContrast?.toFixed(2),
'data-meets-wcag': adjustment?.meetsRequirement,
children
}
});
};
export { ContrastGuard, ContrastGuard as default };
//# sourceMappingURL=ContrastGuard.js.map