aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
260 lines • 6.96 kB
TypeScript
/**
* AuraGlass Stable API Definitions - v1.0.0
*
* These interfaces represent the LOCKED API surface for AuraGlass.
* Breaking changes to these types require major version bump.
*
* STABILITY GUARANTEE: These interfaces will not change in v1.x releases.
*/
import type { CSSProperties } from 'react';
/**
* @stable - Primary glass configuration options
* @version 1.0.0
* @since 1.0.0
*/
export interface GlassOptions {
/**
* Visual intent affecting color theming
* @stable
* @default 'neutral'
*/
readonly intent?: GlassIntent;
/**
* Elevation level affecting depth and prominence
* @stable
* @default 'level2'
*/
readonly elevation?: GlassElevation;
/**
* Performance tier affecting visual quality
* @stable
* @default 'high'
*/
readonly tier?: GlassTier;
/**
* Enable interactive states and behaviors
* @stable
* @default false
*/
readonly interactive?: boolean;
/**
* Enable hover lift effect
* @stable
* @default false
*/
readonly hoverLift?: boolean;
/**
* Enable focus ring for accessibility
* @stable
* @default false
*/
readonly focusRing?: boolean;
/**
* Enable ripple effect on interaction
* @stable
* @default false
*/
readonly ripple?: boolean;
/**
* Enable touch device optimizations
* @stable
* @default false
*/
readonly touchOptimized?: boolean;
/**
* Enable accessibility enhancements
* @stable
* @default false
*/
readonly a11y?: boolean;
}
/**
* @stable - Glass visual intent enumeration
* @version 1.0.0
* @since 1.0.0
*/
export type GlassIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
/**
* @stable - Glass elevation levels
* @version 1.0.0
* @since 1.0.0
*/
export type GlassElevation = 'level1' | 'level2' | 'level3' | 'level4';
/**
* @stable - Performance tier system
* @version 1.0.0
* @since 1.0.0
*/
export type GlassTier = 'high' | 'medium' | 'low';
/**
* @stable - Primary glass styling function
* @version 1.0.0
* @since 1.0.0
*
* The single, authoritative function for creating glass styles.
* All other glass styling methods are deprecated.
*
* @param options - Glass configuration options
* @returns CSS properties object for glass styling
*
* @example
* ```typescript
* const styles = createGlassStyle({
* intent: 'primary',
* elevation: 'level2',
* tier: 'high',
* interactive: true
* });
* ```
*/
/**
* @stable - Glass CSS class naming convention
* @version 1.0.0
* @since 1.0.0
*
* Generated CSS classes follow this pattern:
* `.glass-{intent}-{elevation}`
*
* Combined with modifier classes:
* `.glass-tier-{tier}`
* `.glass-interactive`
* `.glass-state-{state}`
*/
export type GlassCSSClass = `glass-${GlassIntent}-${GlassElevation}`;
/**
* @stable - Glass component props interface
* @version 1.0.0
* @since 1.0.0
*
* Standard props interface for glass-enabled components
*/
export interface GlassComponentProps {
/** Glass configuration */
readonly glass?: GlassOptions;
/** Additional CSS classes */
readonly className?: string;
/** Inline styles (discouraged - use glass options instead) */
readonly style?: CSSProperties;
/** Test ID for automated testing */
readonly 'data-testid'?: string;
}
/**
* @stable - Glass design tokens interface
* @version 1.0.0
* @since 1.0.0
*
* Represents the structure of canonical glass tokens.
* Token values may change, but structure is stable.
*/
export interface GlassTokenStructure {
readonly surfaces: Record<GlassIntent, Record<GlassElevation, {
readonly backdropBlur: {
readonly px: number;
};
readonly surface: {
readonly base: string;
readonly overlay?: string;
};
readonly border: {
readonly color: string;
readonly width: number;
readonly style: 'solid' | 'dashed' | 'none';
};
readonly text: {
readonly primary: string;
readonly secondary: string;
};
readonly innerGlow?: {
readonly color: string;
readonly spread: number;
readonly blur: number;
};
readonly outerShadow?: {
readonly color: string;
readonly x: number;
readonly y: number;
readonly blur: number;
readonly spread: number;
};
}>>;
readonly performance: Record<GlassTier, {
readonly blurMultiplier: number;
readonly opacityMultiplier: number;
}>;
}
/**
* @stable - Quality constraints and guarantees
* @version 1.0.0
* @since 1.0.0
*/
export interface GlassQualityConstraints {
/** WCAG AA minimum contrast ratio */
readonly MIN_CONTRAST_RATIO: 4.5;
/** Minimum blur value (px) */
readonly MIN_BLUR_PX: 4;
/** Maximum blur value (px) */
readonly MAX_BLUR_PX: 32;
/** Minimum opacity for visibility */
readonly MIN_OPACITY: 0.05;
/** Maximum opacity to maintain glass effect */
readonly MAX_OPACITY: 0.45;
/** Maximum render time (ms) for performance */
readonly MAX_RENDER_TIME_MS: 16;
}
/**
* @stable - Runtime probe data structure
* @version 1.0.0
* @since 1.0.0
*/
export interface GlassProbeData {
readonly timestamp: number;
readonly elementId?: string;
readonly glassConfiguration: {
readonly intent: string;
readonly elevation: string;
readonly tier: string;
};
readonly performance: {
readonly backdropSupported: boolean;
readonly gpuAccelerated: boolean;
readonly renderTime?: number;
readonly memoryUsage?: number;
};
readonly compliance: {
readonly wcagContrast: number;
readonly minVisibility: boolean;
readonly accessibilityScore: number;
};
readonly usage: {
readonly deprecationWarnings: readonly string[];
};
}
/**
* @stable - Migration status for legacy APIs
* @version 1.0.0
* @since 1.0.0
*/
export interface GlassMigrationStatus {
readonly phase: 'deprecated' | 'removed';
readonly replacement: string;
readonly migrationGuide: string;
readonly removalVersion?: string;
}
/**
* @deprecated Legacy glass APIs - will be removed in v2.0.0
* @removal v2.0.0
*/
export interface DeprecatedGlassAPIs {
glassBorder: GlassMigrationStatus;
glassSurface: GlassMigrationStatus;
interactiveGlass: GlassMigrationStatus;
createGlassMixin: GlassMigrationStatus;
createGlassFoundation: GlassMigrationStatus;
}
/**
* Version metadata for API tracking
*/
export declare const GLASS_API_VERSION: "1.0.0";
export declare const GLASS_API_STABILITY: "stable";
export declare const GLASS_API_LOCKED_DATE: "2025-09-09T06:34:00Z";
//# sourceMappingURL=glass-api-stable.d.ts.map