aura-glass/dist/esm/components/interactive/GlassStepper.js

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

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { useRef, useEffect } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';

function GlassStepper({
  steps,
  active,
  onChange,
  className
}) {
  const lastActiveRef = useRef(null);
  useEffect(() => {
    lastActiveRef.current = active;
  }, [active]);
  return jsx("div", {
    "data-glass-component": true,
    className: cn("flex items-center glass-gap-3", className),
    children: steps.map((s, i) => {
      const isActive = s.id === active;
      const wasJustActivated = isActive && lastActiveRef.current !== active;
      return jsxs("div", {
        className: "glass-flex glass-items-center glass-gap-3",
        children: [jsx("button", {
          type: "button",
          "aria-current": isActive ? "step" : undefined,
          className: cn("glass-px-3 glass-py-1.5 glass-radius-full glass-text-sm transition-all duration-200", "ring-1 ring-white/10 bg-glass-fill hover:-translate-y-0.5 glass-press glass-ripple", "glass-focus glass-touch-target glass-contrast-guard", isActive ? "glass-text-primary" : "glass-text-primary/80"),
          onClick: e => onChange?.(s.id),
          children: jsx("span", {
            className: cn("relative", wasJustActivated && "glass-pulse-ring"),
            children: s.label
          })
        }), i < steps.length - 1 && jsx("div", {
          className: 'w-8 h-px glass-surface-subtle/15'
        })]
      }, s.id);
    })
  });
}

export { GlassStepper, GlassStepper as default };
//# sourceMappingURL=GlassStepper.js.map