UNPKG

aura-glass

Version:

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

660 lines 24.9 kB
export declare const DESIGN_SYSTEM: { readonly name: "AuraGlass"; readonly version: "1.0.0"; readonly author: "AuraGlass Team"; readonly description: "Modern glassmorphism design system for React"; }; export declare const ANIMATION: { readonly DURATION: { readonly instant: 0; readonly fast: 150; readonly normal: 300; readonly slow: 500; readonly slower: 700; }; readonly EASING: { readonly linear: "linear"; readonly ease: "ease"; readonly easeIn: "ease-in"; readonly easeOut: "ease-out"; readonly easeInOut: "ease-in-out"; readonly bounceIn: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; readonly bounceOut: "cubic-bezier(0.34, 1.56, 0.64, 1)"; readonly elasticIn: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"; readonly elasticOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; }; readonly SPRING: { readonly gentle: { readonly stiffness: 120; readonly damping: 14; readonly mass: 1; }; readonly wobbly: { readonly stiffness: 180; readonly damping: 12; readonly mass: 1; }; readonly stiff: { readonly stiffness: 210; readonly damping: 20; readonly mass: 1; }; readonly slow: { readonly stiffness: 280; readonly damping: 60; readonly mass: 1; }; readonly bouncy: { readonly stiffness: 170; readonly damping: 8; readonly mass: 1; }; }; }; export declare const COLORS: { readonly glass: { readonly frosted: "rgba(255, 255, 255, 0.1)"; readonly dynamic: "rgba(255, 255, 255, 0.15)"; readonly clear: "transparent"; readonly tinted: "rgba(255, 255, 255, 0.08)"; readonly luminous: "rgba(255, 255, 255, 0.2)"; }; readonly semantic: { readonly primary: "var(--glass-color-primary)"; readonly secondary: "var(--glass-gray-500)"; readonly success: "var(--glass-color-success)"; readonly warning: "var(--glass-color-warning)"; readonly error: "var(--glass-color-danger)"; readonly info: "var(--glass-color-primary)"; }; readonly neutral: { readonly white: "var(--glass-white)"; readonly black: "var(--glass-black)"; readonly gray: { readonly 50: "var(--glass-gray-50)"; readonly 100: "var(--glass-gray-100)"; readonly 200: "var(--glass-gray-200)"; readonly 300: "var(--glass-gray-300)"; readonly 400: "var(--glass-gray-400)"; readonly 500: "var(--glass-gray-500)"; readonly 600: "var(--glass-gray-600)"; readonly 700: "var(--glass-gray-700)"; readonly 800: "var(--glass-gray-800)"; readonly 900: "var(--glass-gray-900)"; }; }; readonly glassColors: { readonly surface: "rgba(255, 255, 255, 0.1)"; readonly surfaceHover: "rgba(255, 255, 255, 0.15)"; readonly surfaceActive: "rgba(255, 255, 255, 0.08)"; readonly border: "rgba(255, 255, 255, 0.2)"; readonly borderHover: "rgba(255, 255, 255, 0.3)"; readonly text: "var(--glass-text-primary)"; readonly textSecondary: "var(--glass-text-secondary)"; readonly shadow: "rgba(0, 0, 0, 0.15)"; }; }; export declare const TYPOGRAPHY: { readonly fontFamily: { readonly sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif"; readonly mono: "\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\", monospace"; }; readonly fontSize: { readonly xs: "0.75rem"; readonly sm: "0.875rem"; readonly base: "1rem"; readonly lg: "1.125rem"; readonly xl: "1.25rem"; readonly "2xl": "1.5rem"; readonly "3xl": "1.875rem"; readonly "4xl": "2.25rem"; readonly "5xl": "3rem"; }; readonly fontWeight: { readonly thin: 100; readonly light: 300; readonly normal: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; readonly extrabold: 800; readonly black: 900; }; readonly lineHeight: { readonly none: 1; readonly tight: 1.25; readonly snug: 1.375; readonly normal: 1.5; readonly relaxed: 1.625; readonly loose: 2; }; readonly letterSpacing: { readonly tighter: "-0.05em"; readonly tight: "-0.025em"; readonly normal: "0em"; readonly wide: "0.025em"; readonly wider: "0.05em"; readonly widest: "0.1em"; }; }; export declare const SPACING: { readonly space: { readonly 0: "0"; readonly 1: "0.25rem"; readonly 2: "0.5rem"; readonly 3: "0.75rem"; readonly 4: "1rem"; readonly 5: "1.25rem"; readonly 6: "1.5rem"; readonly 8: "2rem"; readonly 10: "2.5rem"; readonly 12: "3rem"; readonly 16: "4rem"; readonly 20: "5rem"; readonly 24: "6rem"; readonly 32: "8rem"; readonly 40: "10rem"; readonly 48: "12rem"; readonly 56: "14rem"; readonly 64: "16rem"; }; readonly container: { readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly "2xl": "1536px"; }; }; export declare const BORDER_RADIUS: { readonly none: "0"; readonly sm: "0.125rem"; readonly md: "0.375rem"; readonly lg: "0.5rem"; readonly xl: "0.75rem"; readonly "2xl": "1rem"; readonly "3xl": "1.5rem"; readonly full: "9999px"; }; export declare const BOX_SHADOW: { readonly none: "none"; readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"; readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"; readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; readonly "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; readonly outline: "0 0 0 3px rgba(66, 153, 225, 0.5)"; }; export declare const Z_INDEX: { readonly auto: "auto"; readonly 0: 0; readonly 10: 10; readonly 20: 20; readonly 30: 30; readonly 40: 40; readonly 50: 50; readonly 60: 60; readonly 70: 70; readonly 80: 80; readonly 90: 90; readonly 100: 100; }; export declare const BREAKPOINTS: { readonly xs: "0px"; readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly "2xl": "1536px"; }; export declare const PERFORMANCE: { readonly fps: { readonly target: 60; readonly minimum: 30; readonly critical: 15; }; readonly memory: { readonly warning: number; readonly critical: number; readonly maximum: number; }; readonly quality: { readonly ultra: { readonly particleLimit: 1000; readonly textureSize: 2048; }; readonly high: { readonly particleLimit: 500; readonly textureSize: 1024; }; readonly medium: { readonly particleLimit: 200; readonly textureSize: 512; }; readonly low: { readonly particleLimit: 50; readonly textureSize: 256; }; }; }; export declare const ACCESSIBILITY: { readonly focusRing: { readonly width: "2px"; readonly style: "solid"; readonly color: "var(--glass-color-primary, 0.5)"; readonly offset: "2px"; }; readonly motion: { readonly reduced: "(prefers-reduced-motion: reduce)"; readonly enabled: "(prefers-reduced-motion: no-preference)"; }; readonly contrast: { readonly minimum: 4.5; readonly enhanced: 7; }; readonly touch: { readonly minimum: "44px"; readonly recommended: "48px"; }; }; export declare const GLASS: { readonly opacity: { readonly subtle: 0.05; readonly light: 0.1; readonly standard: 0.15; readonly strong: 0.2; readonly intense: 0.3; }; readonly blur: { readonly none: "none"; readonly subtle: "blur(2px)"; readonly light: "blur(4px)"; readonly standard: "blur(8px)"; readonly strong: "blur(12px)"; readonly heavy: "blur(16px)"; }; readonly variants: { readonly frosted: {}; readonly dynamic: {}; readonly clear: import("react").CSSProperties; }; }; export declare const constants: { getColor: (key: string) => { readonly frosted: "rgba(255, 255, 255, 0.1)"; readonly dynamic: "rgba(255, 255, 255, 0.15)"; readonly clear: "transparent"; readonly tinted: "rgba(255, 255, 255, 0.08)"; readonly luminous: "rgba(255, 255, 255, 0.2)"; } | { readonly primary: "var(--glass-color-primary)"; readonly secondary: "var(--glass-gray-500)"; readonly success: "var(--glass-color-success)"; readonly warning: "var(--glass-color-warning)"; readonly error: "var(--glass-color-danger)"; readonly info: "var(--glass-color-primary)"; } | { readonly white: "var(--glass-white)"; readonly black: "var(--glass-black)"; readonly gray: { readonly 50: "var(--glass-gray-50)"; readonly 100: "var(--glass-gray-100)"; readonly 200: "var(--glass-gray-200)"; readonly 300: "var(--glass-gray-300)"; readonly 400: "var(--glass-gray-400)"; readonly 500: "var(--glass-gray-500)"; readonly 600: "var(--glass-gray-600)"; readonly 700: "var(--glass-gray-700)"; readonly 800: "var(--glass-gray-800)"; readonly 900: "var(--glass-gray-900)"; }; } | { readonly surface: "rgba(255, 255, 255, 0.1)"; readonly surfaceHover: "rgba(255, 255, 255, 0.15)"; readonly surfaceActive: "rgba(255, 255, 255, 0.08)"; readonly border: "rgba(255, 255, 255, 0.2)"; readonly borderHover: "rgba(255, 255, 255, 0.3)"; readonly text: "var(--glass-text-primary)"; readonly textSecondary: "var(--glass-text-secondary)"; readonly shadow: "rgba(0, 0, 0, 0.15)"; }; getSpacing: (key: string | number) => "0" | "0.75rem" | "2rem" | "1rem" | "0.25rem" | "0.5rem" | "1.5rem" | "3rem" | "1.25rem" | "2.5rem" | "4rem" | "5rem" | "6rem" | "8rem" | "10rem" | "12rem" | "14rem" | "16rem"; getFontSize: (key: string) => "0.75rem" | "1rem" | "1.5rem" | "3rem" | "0.875rem" | "1.125rem" | "1.25rem" | "2.25rem" | "1.875rem"; getBorderRadius: (key: string) => "0" | "0.75rem" | "1rem" | "0.5rem" | "1.5rem" | "0.375rem" | "0.125rem" | "9999px"; getBoxShadow: (key: string) => "none" | "0 1px 2px 0 rgba(0, 0, 0, 0.05)" | "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" | "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" | "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" | "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" | "0 25px 50px -12px rgba(0, 0, 0, 0.25)" | "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" | "0 0 0 3px rgba(66, 153, 225, 0.5)"; getBreakpoint: (key: string) => "0px" | "768px" | "640px" | "1024px" | "1280px" | "1536px"; }; declare const _default: { DESIGN_SYSTEM: { readonly name: "AuraGlass"; readonly version: "1.0.0"; readonly author: "AuraGlass Team"; readonly description: "Modern glassmorphism design system for React"; }; ANIMATION: { readonly DURATION: { readonly instant: 0; readonly fast: 150; readonly normal: 300; readonly slow: 500; readonly slower: 700; }; readonly EASING: { readonly linear: "linear"; readonly ease: "ease"; readonly easeIn: "ease-in"; readonly easeOut: "ease-out"; readonly easeInOut: "ease-in-out"; readonly bounceIn: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; readonly bounceOut: "cubic-bezier(0.34, 1.56, 0.64, 1)"; readonly elasticIn: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"; readonly elasticOut: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; }; readonly SPRING: { readonly gentle: { readonly stiffness: 120; readonly damping: 14; readonly mass: 1; }; readonly wobbly: { readonly stiffness: 180; readonly damping: 12; readonly mass: 1; }; readonly stiff: { readonly stiffness: 210; readonly damping: 20; readonly mass: 1; }; readonly slow: { readonly stiffness: 280; readonly damping: 60; readonly mass: 1; }; readonly bouncy: { readonly stiffness: 170; readonly damping: 8; readonly mass: 1; }; }; }; COLORS: { readonly glass: { readonly frosted: "rgba(255, 255, 255, 0.1)"; readonly dynamic: "rgba(255, 255, 255, 0.15)"; readonly clear: "transparent"; readonly tinted: "rgba(255, 255, 255, 0.08)"; readonly luminous: "rgba(255, 255, 255, 0.2)"; }; readonly semantic: { readonly primary: "var(--glass-color-primary)"; readonly secondary: "var(--glass-gray-500)"; readonly success: "var(--glass-color-success)"; readonly warning: "var(--glass-color-warning)"; readonly error: "var(--glass-color-danger)"; readonly info: "var(--glass-color-primary)"; }; readonly neutral: { readonly white: "var(--glass-white)"; readonly black: "var(--glass-black)"; readonly gray: { readonly 50: "var(--glass-gray-50)"; readonly 100: "var(--glass-gray-100)"; readonly 200: "var(--glass-gray-200)"; readonly 300: "var(--glass-gray-300)"; readonly 400: "var(--glass-gray-400)"; readonly 500: "var(--glass-gray-500)"; readonly 600: "var(--glass-gray-600)"; readonly 700: "var(--glass-gray-700)"; readonly 800: "var(--glass-gray-800)"; readonly 900: "var(--glass-gray-900)"; }; }; readonly glassColors: { readonly surface: "rgba(255, 255, 255, 0.1)"; readonly surfaceHover: "rgba(255, 255, 255, 0.15)"; readonly surfaceActive: "rgba(255, 255, 255, 0.08)"; readonly border: "rgba(255, 255, 255, 0.2)"; readonly borderHover: "rgba(255, 255, 255, 0.3)"; readonly text: "var(--glass-text-primary)"; readonly textSecondary: "var(--glass-text-secondary)"; readonly shadow: "rgba(0, 0, 0, 0.15)"; }; }; TYPOGRAPHY: { readonly fontFamily: { readonly sans: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif"; readonly mono: "\"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\", monospace"; }; readonly fontSize: { readonly xs: "0.75rem"; readonly sm: "0.875rem"; readonly base: "1rem"; readonly lg: "1.125rem"; readonly xl: "1.25rem"; readonly "2xl": "1.5rem"; readonly "3xl": "1.875rem"; readonly "4xl": "2.25rem"; readonly "5xl": "3rem"; }; readonly fontWeight: { readonly thin: 100; readonly light: 300; readonly normal: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; readonly extrabold: 800; readonly black: 900; }; readonly lineHeight: { readonly none: 1; readonly tight: 1.25; readonly snug: 1.375; readonly normal: 1.5; readonly relaxed: 1.625; readonly loose: 2; }; readonly letterSpacing: { readonly tighter: "-0.05em"; readonly tight: "-0.025em"; readonly normal: "0em"; readonly wide: "0.025em"; readonly wider: "0.05em"; readonly widest: "0.1em"; }; }; SPACING: { readonly space: { readonly 0: "0"; readonly 1: "0.25rem"; readonly 2: "0.5rem"; readonly 3: "0.75rem"; readonly 4: "1rem"; readonly 5: "1.25rem"; readonly 6: "1.5rem"; readonly 8: "2rem"; readonly 10: "2.5rem"; readonly 12: "3rem"; readonly 16: "4rem"; readonly 20: "5rem"; readonly 24: "6rem"; readonly 32: "8rem"; readonly 40: "10rem"; readonly 48: "12rem"; readonly 56: "14rem"; readonly 64: "16rem"; }; readonly container: { readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly "2xl": "1536px"; }; }; BORDER_RADIUS: { readonly none: "0"; readonly sm: "0.125rem"; readonly md: "0.375rem"; readonly lg: "0.5rem"; readonly xl: "0.75rem"; readonly "2xl": "1rem"; readonly "3xl": "1.5rem"; readonly full: "9999px"; }; BOX_SHADOW: { readonly none: "none"; readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"; readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"; readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; readonly "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"; readonly outline: "0 0 0 3px rgba(66, 153, 225, 0.5)"; }; Z_INDEX: { readonly auto: "auto"; readonly 0: 0; readonly 10: 10; readonly 20: 20; readonly 30: 30; readonly 40: 40; readonly 50: 50; readonly 60: 60; readonly 70: 70; readonly 80: 80; readonly 90: 90; readonly 100: 100; }; BREAKPOINTS: { readonly xs: "0px"; readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly "2xl": "1536px"; }; PERFORMANCE: { readonly fps: { readonly target: 60; readonly minimum: 30; readonly critical: 15; }; readonly memory: { readonly warning: number; readonly critical: number; readonly maximum: number; }; readonly quality: { readonly ultra: { readonly particleLimit: 1000; readonly textureSize: 2048; }; readonly high: { readonly particleLimit: 500; readonly textureSize: 1024; }; readonly medium: { readonly particleLimit: 200; readonly textureSize: 512; }; readonly low: { readonly particleLimit: 50; readonly textureSize: 256; }; }; }; ACCESSIBILITY: { readonly focusRing: { readonly width: "2px"; readonly style: "solid"; readonly color: "var(--glass-color-primary, 0.5)"; readonly offset: "2px"; }; readonly motion: { readonly reduced: "(prefers-reduced-motion: reduce)"; readonly enabled: "(prefers-reduced-motion: no-preference)"; }; readonly contrast: { readonly minimum: 4.5; readonly enhanced: 7; }; readonly touch: { readonly minimum: "44px"; readonly recommended: "48px"; }; }; GLASS: { readonly opacity: { readonly subtle: 0.05; readonly light: 0.1; readonly standard: 0.15; readonly strong: 0.2; readonly intense: 0.3; }; readonly blur: { readonly none: "none"; readonly subtle: "blur(2px)"; readonly light: "blur(4px)"; readonly standard: "blur(8px)"; readonly strong: "blur(12px)"; readonly heavy: "blur(16px)"; }; readonly variants: { readonly frosted: {}; readonly dynamic: {}; readonly clear: import("react").CSSProperties; }; }; constants: { getColor: (key: string) => { readonly frosted: "rgba(255, 255, 255, 0.1)"; readonly dynamic: "rgba(255, 255, 255, 0.15)"; readonly clear: "transparent"; readonly tinted: "rgba(255, 255, 255, 0.08)"; readonly luminous: "rgba(255, 255, 255, 0.2)"; } | { readonly primary: "var(--glass-color-primary)"; readonly secondary: "var(--glass-gray-500)"; readonly success: "var(--glass-color-success)"; readonly warning: "var(--glass-color-warning)"; readonly error: "var(--glass-color-danger)"; readonly info: "var(--glass-color-primary)"; } | { readonly white: "var(--glass-white)"; readonly black: "var(--glass-black)"; readonly gray: { readonly 50: "var(--glass-gray-50)"; readonly 100: "var(--glass-gray-100)"; readonly 200: "var(--glass-gray-200)"; readonly 300: "var(--glass-gray-300)"; readonly 400: "var(--glass-gray-400)"; readonly 500: "var(--glass-gray-500)"; readonly 600: "var(--glass-gray-600)"; readonly 700: "var(--glass-gray-700)"; readonly 800: "var(--glass-gray-800)"; readonly 900: "var(--glass-gray-900)"; }; } | { readonly surface: "rgba(255, 255, 255, 0.1)"; readonly surfaceHover: "rgba(255, 255, 255, 0.15)"; readonly surfaceActive: "rgba(255, 255, 255, 0.08)"; readonly border: "rgba(255, 255, 255, 0.2)"; readonly borderHover: "rgba(255, 255, 255, 0.3)"; readonly text: "var(--glass-text-primary)"; readonly textSecondary: "var(--glass-text-secondary)"; readonly shadow: "rgba(0, 0, 0, 0.15)"; }; getSpacing: (key: string | number) => "0" | "0.75rem" | "2rem" | "1rem" | "0.25rem" | "0.5rem" | "1.5rem" | "3rem" | "1.25rem" | "2.5rem" | "4rem" | "5rem" | "6rem" | "8rem" | "10rem" | "12rem" | "14rem" | "16rem"; getFontSize: (key: string) => "0.75rem" | "1rem" | "1.5rem" | "3rem" | "0.875rem" | "1.125rem" | "1.25rem" | "2.25rem" | "1.875rem"; getBorderRadius: (key: string) => "0" | "0.75rem" | "1rem" | "0.5rem" | "1.5rem" | "0.375rem" | "0.125rem" | "9999px"; getBoxShadow: (key: string) => "none" | "0 1px 2px 0 rgba(0, 0, 0, 0.05)" | "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" | "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" | "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" | "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" | "0 25px 50px -12px rgba(0, 0, 0, 0.25)" | "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" | "0 0 0 3px rgba(66, 153, 225, 0.5)"; getBreakpoint: (key: string) => "0px" | "768px" | "640px" | "1024px" | "1280px" | "1536px"; }; }; export default _default; //# sourceMappingURL=designConstants.d.ts.map