aura-glass/dist/esm/components/input/GlassStep.js

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

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from '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';
import { GlassStepIcon } from './GlassStepIcon.js';
import { GlassStepLabel } from './GlassStepLabel.js';

// Get step state classes
const getStepStateClasses = (active, completed, disabled, clickable) => {
  const baseClasses = ['flex items-center relative flex-1 glass-p-2 transition-all duration-300 ease-in-out', clickable && !disabled ? 'cursor-pointer hover:bg-glass-light-primary/5 hover:scale-[1.01]' : 'cursor-default'];
  if (disabled) {
    baseClasses.push('opacity-50 pointer-events-none');
  }
  return baseClasses.filter(Boolean).join(' ');
};
// Get orientation classes
const getOrientationClasses = orientation => {
  return orientation === 'vertical' ? 'flex-col text-center' : 'flex-row text-left';
};
// Use the specific internal props type
const GlassStep = /*#__PURE__*/forwardRef(({
  step,
  index,
  active,
  completed,
  orientation,
  onClick,
  intent = 'neutral',
  elevation = 'level1',
  tier = 'medium',
  className,
  style
}, ref // Receive the forwarded ref
) => {
  const isClickable = !!onClick;
  const isDisabled = step.disabled || false;
  const finalOrientation = orientation || 'horizontal';
  const handleClick = () => {
    if (onClick && !isDisabled) {
      onClick(step);
    }
  };
  const stepStateClasses = getStepStateClasses(active, completed, isDisabled, isClickable);
  const orientationClasses = getOrientationClasses(finalOrientation);
  return jsx(MotionFramer, {
    "data-glass-component": true,
    children: jsxs(OptimizedGlassCore, {
      ref: ref,
      intent: intent,
      elevation: elevation,
      tier: tier,
      className: cn(stepStateClasses, orientationClasses, className),
      style: style,
      onClick: handleClick,
      role: isClickable ? 'button' : 'listitem',
      "aria-label": `Step ${index + 1}: ${step.label || step.title}${active ? ' (current)' : ''}${completed ? ' (completed)' : ''}${isDisabled ? ' (disabled)' : ''}`,
      "aria-current": active ? 'step' : undefined,
      "aria-disabled": isDisabled,
      tabIndex: isClickable && !isDisabled ? 0 : -1,
      onKeyDown: isClickable && !isDisabled ? e => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          handleClick();
        }
      } : undefined,
      children: [jsx(GlassStepIcon, {
        index: index,
        active: active,
        completed: completed,
        icon: step.icon,
        intent: intent,
        elevation: elevation,
        tier: tier
      }), jsx(GlassStepLabel, {
        label: step.label || step.title,
        active: active,
        completed: completed,
        orientation: finalOrientation,
        intent: intent,
        elevation: elevation,
        tier: tier
      })]
    })
  });
});
GlassStep.displayName = 'GlassStep';

export { GlassStep };
//# sourceMappingURL=GlassStep.js.map