aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
68 lines (65 loc) • 2.16 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import { Check } from 'lucide-react';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
// Get icon state classes
const getIconStateClasses = (active, completed) => {
if (active) {
return "bg-primary-500 glass-text-primary border-primary-300 shadow-[0_0_12px_3px_var(--glass-color-primary,0.5)]";
}
if (completed) {
return "bg-success-500 glass-text-primary border-success-300";
}
return "bg-gray-200 glass-text-secondary border-gray-200 dark:bg-gray-700 dark:glass-text-secondary dark:border-gray-600";
};
const GlassStepIcon = ({
index,
active,
completed,
icon,
intent = "neutral",
elevation = "level2",
tier = "medium",
className,
style
}) => {
const getIconContent = () => {
if (icon) {
// If icon is a React element, render it directly
return typeof icon === "string" ? icon : icon;
}
if (completed) {
return jsx(Check, {
size: 16
});
}
return index + 1; // Display step number
};
const iconStateClasses = getIconStateClasses(active, completed);
return jsx(MotionFramer, {
"data-glass-component": true,
className: 'inline-block',
children: jsx(OptimizedGlassCore, {
intent: intent,
elevation: elevation,
tier: tier,
"aria-hidden": "true",
className: cn(
// Base styles
"w-6 h-6 min-w-6 glass-radius-full", "flex items-center justify-center", "relative z-[1] flex-shrink-0", "glass-text-xs font-semibold", "transition-all duration-300 ease-in-out", "border",
// State-based styles
iconStateClasses, className),
style: style,
children: getIconContent()
})
});
};
GlassStepIcon.displayName = "GlassStepIcon";
export { GlassStepIcon };
//# sourceMappingURL=GlassStepIcon.js.map