aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
399 lines • 12 kB
TypeScript
import React from 'react';
export interface GlassInteractiveProps extends React.HTMLAttributes<HTMLDivElement> {
/** Glass morphism variant */
glassVariant?: 'frosted' | 'dynamic' | 'clear' | 'tinted' | 'luminous';
/** Blur strength */
blurStrength?: 'none' | 'light' | 'standard' | 'heavy';
/** Interactive state */
interactive?: boolean;
/** Enable hover effects */
hoverable?: boolean;
/** Enable focus effects */
focusable?: boolean;
/** Enable click effects */
clickable?: boolean;
/** Enable magnetic effects */
magnetic?: boolean;
/** Enable physics-based animations */
physics?: boolean;
/** Animation configuration */
animation?: InteractiveAnimationConfig;
/** Accessibility configuration */
accessibility?: InteractiveAccessibilityConfig;
/** Custom styles */
glassStyles?: React.CSSProperties;
/** Glass surface intent */
intent?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
/** Glass surface elevation */
elevation?: 'level1' | 'level2' | 'level3' | 'level4';
/** Performance tier */
tier?: 'low' | 'medium' | 'high';
}
export interface InteractiveAnimationConfig {
/** Enable entrance animation */
entrance?: boolean;
/** Entrance animation type */
entranceType?: 'fadeIn' | 'slideIn' | 'scaleIn' | 'bounceIn' | 'elasticIn';
/** Entrance duration */
entranceDuration?: number;
/** Enable hover animations */
hoverAnimations?: boolean;
/** Hover animation type */
hoverType?: 'lift' | 'glow' | 'scale' | 'tilt' | 'pulse';
/** Hover duration */
hoverDuration?: number;
/** Enable click animations */
clickAnimations?: boolean;
/** Click animation type */
clickType?: 'scale' | 'ripple' | 'bounce' | 'shake';
/** Click duration */
clickDuration?: number;
/** Enable physics animations */
physicsAnimations?: boolean;
/** Physics configuration */
physicsConfig?: {
stiffness: number;
damping: number;
mass: number;
velocity: number;
};
}
export interface InteractiveAccessibilityConfig {
/** ARIA label */
'aria-label'?: string;
/** ARIA description */
'aria-describedby'?: string;
/** ARIA role */
role?: string;
/** Tab index */
tabIndex?: number;
/** Focus management */
autoFocus?: boolean;
/** Keyboard navigation */
keyboardNavigation?: boolean;
/** Screen reader support */
screenReaderSupport?: boolean;
}
export interface ContextAwareGlassProps extends GlassInteractiveProps {
/** Context sensitivity */
contextSensitivity?: 'low' | 'medium' | 'high';
/** Context triggers */
contextTriggers?: ContextTrigger[];
/** Adaptation rules */
adaptationRules?: AdaptationRule[];
/** Context state */
contextState?: ContextState;
}
export interface ContextTrigger {
type: 'hover' | 'focus' | 'click' | 'scroll' | 'resize' | 'time' | 'user-activity';
condition: (context: ContextState) => boolean;
action: (element: HTMLElement) => void;
}
export interface AdaptationRule {
condition: (context: ContextState) => boolean;
adaptations: {
glassVariant?: 'frosted' | 'dynamic' | 'clear' | 'tinted' | 'luminous';
blurStrength?: 'none' | 'light' | 'standard' | 'heavy';
opacity?: number;
scale?: number;
glow?: boolean;
animation?: Partial<InteractiveAnimationConfig>;
};
}
export interface ContextState {
userActivity: 'idle' | 'active' | 'focused';
scrollPosition: number;
viewportSize: {
width: number;
height: number;
};
timeOfDay: 'morning' | 'afternoon' | 'evening' | 'night';
userPreferences: {
reducedMotion: boolean;
highContrast: boolean;
prefersDark: boolean;
};
interactionHistory: InteractionEvent[];
}
export interface InteractionEvent {
type: string;
timestamp: number;
target: string;
data?: any;
}
export interface GlassA11yAuditorProps extends GlassInteractiveProps {
/** Audit scope */
scope?: 'element' | 'component' | 'page' | 'application';
/** Audit rules */
auditRules?: A11yAuditRule[];
/** Real-time auditing */
realTime?: boolean;
/** Audit report callback */
onAuditReport?: (report: A11yAuditReport) => void;
/** Auto-fix violations */
autoFix?: boolean;
/** Highlight violations */
highlightViolations?: boolean;
}
export interface A11yAuditRule {
id: string;
name: string;
description: string;
category: 'critical' | 'serious' | 'moderate' | 'minor';
check: (element: HTMLElement) => A11yViolation | null;
fix?: (element: HTMLElement, violation: A11yViolation) => void;
}
export interface A11yViolation {
ruleId: string;
message: string;
element: HTMLElement;
severity: 'critical' | 'serious' | 'moderate' | 'minor';
suggestion?: string;
}
export interface A11yAuditReport {
timestamp: Date;
scope: string;
violations: A11yViolation[];
score: number;
recommendations: string[];
passedRules: string[];
failedRules: string[];
}
export interface GlassThemeDemoProps extends GlassInteractiveProps {
/** Demo title */
title?: string;
/** Demo description */
description?: string;
/** Demo themes */
themes?: ThemeDemo[];
/** Current theme */
currentTheme?: string;
/** Enable theme switching */
themeSwitching?: boolean;
/** Demo components */
demoComponents?: DemoComponent[];
/** Theme change callback */
onThemeChange?: (themeId: string) => void;
/** Demo layout */
layout?: 'grid' | 'list' | 'tabs' | 'carousel';
/** Show theme switcher */
showThemeSwitcher?: boolean;
/** Show examples */
showExamples?: boolean;
/** Custom examples */
customExamples?: React.ReactNode;
/** Glass intensity */
glassIntensity?: number;
/** Header component */
header?: React.ReactNode;
/** Footer component */
footer?: React.ReactNode;
/** Show performance metrics */
showPerformanceMetrics?: boolean;
/** Use tabs layout */
useTabs?: boolean;
/** Show code previews */
showCode?: boolean;
/** Interactive mode */
interactive?: boolean;
/** Included categories */
includedCategories?: string[];
/** Minimal layout */
minimal?: boolean;
}
export interface ThemeDemo {
id: string;
name: string;
description?: string;
colors: {
primary: string;
secondary: string;
accent: string;
background: string;
surface: string;
text: {
primary: string;
secondary: string;
disabled: string;
};
border: string;
};
glassVariant: 'frosted' | 'dynamic' | 'clear' | 'tinted' | 'luminous';
blurStrength: 'none' | 'light' | 'standard' | 'heavy';
preview: React.ReactNode;
}
export interface DemoComponent {
id: string;
name: string;
component: React.ComponentType<any>;
props: Record<string, any>;
category: string;
}
export interface ThemedGlassComponentsProps extends GlassInteractiveProps {
/** Component theme */
theme?: GlassComponentTheme;
/** Component variants */
variants?: ComponentVariant[];
/** Active variant */
activeVariant?: string;
/** Component size */
size?: 'sm' | 'md' | 'lg' | 'xl';
/** Enable theming */
themingEnabled?: boolean;
/** Theme override */
themeOverride?: Partial<GlassComponentTheme>;
}
export interface GlassComponentTheme {
colors: {
primary: string;
secondary: string;
accent: string;
background: string;
surface: string;
text: {
primary: string;
secondary: string;
disabled: string;
};
border: string;
};
spacing: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
};
effects: {
borderRadius: string;
boxShadow: string;
backdropFilter: string;
glow: string;
};
animations: {
duration: string;
easing: string;
hover: string;
focus: string;
};
}
export interface ComponentVariant {
id: string;
name: string;
theme: Partial<GlassComponentTheme>;
preview: React.ReactNode;
}
export interface GlassFocusRingProps extends Omit<GlassInteractiveProps, 'style'> {
/** Focus target element */
target?: HTMLElement | React.RefObject<HTMLElement>;
/** Focus ring color */
color?: string;
/** Focus ring width */
width?: number;
/** Focus ring style */
ringStyle?: 'solid' | 'dashed' | 'dotted' | 'glow';
/** Focus ring shape */
shape?: 'rectangle' | 'rounded' | 'circle' | 'pill';
/** Focus ring offset */
offset?: number;
/** Focus ring thickness */
thickness?: number;
/** Border radius */
borderRadius?: number;
/** Disabled state */
disabled?: boolean;
/** Focus ring animation */
animated?: boolean;
/** Animation duration */
animationDuration?: number;
/** Keyboard navigation */
keyboardNavigation?: boolean;
}
export interface GlassPresetsProps extends GlassInteractiveProps {
/** Available presets */
presets?: GlassPreset[];
/** Current preset */
currentPreset?: string;
/** Preset categories */
categories?: PresetCategory[];
/** Enable preset switching */
presetSwitching?: boolean;
/** Preset change callback */
onPresetChange?: (presetId: string) => void;
/** Custom preset renderer */
renderPreset?: (preset: GlassPreset) => React.ReactNode;
}
export interface GlassPreset {
id: string;
name: string;
description?: string;
category: string;
config: {
glassVariant: 'frosted' | 'dynamic' | 'clear' | 'tinted' | 'luminous';
blurStrength: 'none' | 'light' | 'standard' | 'heavy';
colors: {
primary: string;
secondary: string;
accent: string;
background: string;
surface: string;
text: {
primary: string;
secondary: string;
disabled: string;
};
border: string;
};
effects: {
borderRadius: string;
boxShadow: string;
backdropFilter: string;
glow: string;
};
animations: Partial<InteractiveAnimationConfig>;
};
preview: React.ReactNode;
tags?: string[];
}
export interface PresetCategory {
id: string;
name: string;
description?: string;
presets: string[];
}
export interface InteractiveState {
isHovered: boolean;
isFocused: boolean;
isActive: boolean;
isLoading: boolean;
isDisabled: boolean;
isExpanded: boolean;
isSelected: boolean;
interactionCount: number;
lastInteraction: Date;
}
export interface InteractiveContext {
theme: GlassComponentTheme;
accessibility: InteractiveAccessibilityConfig;
animation: InteractiveAnimationConfig;
state: InteractiveState;
preferences: {
reducedMotion: boolean;
highContrast: boolean;
prefersDark: boolean;
};
}
export type InteractiveComponentProps<T = {}> = GlassInteractiveProps & T;
export type InteractiveRef = React.RefObject<HTMLElement>;
export interface InteractiveEventHandlers {
onHover?: (hovered: boolean) => void;
onFocus?: (focused: boolean) => void;
onActivate?: (active: boolean) => void;
onSelect?: (selected: boolean) => void;
onExpand?: (expanded: boolean) => void;
onContextChange?: (context: ContextState) => void;
onThemeChange?: (theme: GlassComponentTheme) => void;
onPresetChange?: (preset: GlassPreset) => void;
onA11yReport?: (report: A11yAuditReport) => void;
}
//# sourceMappingURL=types.d.ts.map