aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
59 lines (56 loc) • 1.78 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
// Get label state classes
const getLabelStateClasses = (active, completed) => {
if (active) {
return 'text-primary-600 font-semibold dark:text-primary-400';
}
if (completed) {
return 'glass-text-secondary font-normal dark:glass-text-secondary';
}
return 'glass-text-secondary font-normal dark:glass-text-secondary';
};
// Get orientation classes
const getOrientationClasses = orientation => {
return orientation === 'horizontal' ? 'glass-ml-2' : 'glass-mt-1';
};
const GlassStepLabel = ({
label,
active,
completed,
orientation,
intent = 'neutral',
elevation = 'level1',
tier = 'low',
className,
style
}) => {
if (!label) {
return null;
}
const labelStateClasses = getLabelStateClasses(active, completed);
const orientationClasses = getOrientationClasses(orientation);
return jsx(MotionFramer, {
"data-glass-component": true,
className: cn(orientationClasses, 'transition-all duration-300 ease-in-out'),
children: jsx("span", {
className: cn(
// Base styles
'glass-text-sm leading-tight', 'transition-all duration-300 ease-in-out',
// State-based styles
labelStateClasses, className),
style: style,
children: label
})
});
};
GlassStepLabel.displayName = 'GlassStepLabel';
export { GlassStepLabel };
//# sourceMappingURL=GlassStepLabel.js.map