aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
51 lines (48 loc) • 1.46 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import React from 'react';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import { cn } from '../../lib/utilsComprehensive.js';
/**
* GlassPanel component
* A glassmorphism panel using the proper PerformantGlass primitive
*/
const GlassPanel = /*#__PURE__*/React.forwardRef(({
className,
elevation = 'level1',
variant = 'default',
interactive = false,
padding = 'md',
children,
...props
}, ref) => {
const getGlassIntent = () => {
switch (variant) {
case 'primary':
return 'primary';
case 'success':
return 'success';
case 'warning':
return 'warning';
case 'error':
return 'danger';
default:
return 'neutral';
}
};
return jsx(OptimizedGlassCore, {
"data-glass-component": true,
ref: ref,
elevation: elevation,
intent: getGlassIntent(),
interactive: interactive,
className: cn('relative overflow-hidden transition-all duration-200',
// Map padding to className since OptimizedGlass doesn't have padding prop
padding === 'none' ? 'glass-p-0' : padding === 'sm' ? 'glass-p-2' : padding === 'md' ? 'glass-p-4' : padding === 'lg' ? 'glass-p-6' : padding === 'xl' ? 'p-8' : 'glass-p-4', className),
...props,
children: children
});
});
GlassPanel.displayName = 'GlassPanel';
export { GlassPanel };
//# sourceMappingURL=glass-panel.js.map