aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
85 lines • 2.13 kB
TypeScript
/**
* ContrastGuard Component
* A React wrapper component that ensures WCAG contrast compliance
*/
import React from 'react';
import { type ContrastLevel } from '../../utils/contrastGuard';
import type { LiquidGlassMaterial, MaterialVariant } from '../../tokens/glass';
export interface ContrastGuardProps {
/**
* Content to be rendered with contrast protection
*/
children: React.ReactNode;
/**
* Target WCAG compliance level
* @default 'AA'
*/
level?: ContrastLevel;
/**
* Minimum contrast ratio
* @default 4.5
*/
minContrast?: number;
/**
* Fallback text color if contrast cannot be met
*/
fallbackColor?: string;
/**
* Background color to test against
*/
backgroundColor?: string;
/**
* Text color
* @default 'var(--glass-text-primary)'
*/
textColor?: string;
/**
* Glass material type
*/
material?: LiquidGlassMaterial;
/**
* Material variant
*/
variant?: MaterialVariant;
/**
* Whether to automatically adjust contrast
* @default true
*/
autoAdjust?: boolean;
/**
* Custom className
*/
className?: string;
/**
* Element type to render
* @default 'span'
*/
as?: keyof JSX.IntrinsicElements;
/**
* Callback when contrast adjustment is applied
*/
onAdjustment?: (meetsRequirement: boolean, ratio: number) => void;
}
/**
* ContrastGuard wrapper component
* Ensures text content meets WCAG contrast requirements
*/
export declare const ContrastGuard: React.FC<ContrastGuardProps>;
/**
* Simpler text wrapper with contrast protection
*/
export interface TextWithContrastProps {
children: React.ReactNode;
level?: 'AA' | 'AAA';
className?: string;
}
export declare const TextWithContrast: React.FC<TextWithContrastProps>;
/**
* High contrast mode wrapper for critical UI elements
*/
export declare const HighContrastText: React.FC<{
children: React.ReactNode;
className?: string;
}>;
export default ContrastGuard;
//# sourceMappingURL=ContrastGuard.d.ts.map