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

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

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';

function GlassCoachmarks({
  steps: incomingSteps = [],
  current = 0,
  onNext = () => {},
  onPrev = () => {},
  onClose = () => {}
}) {
  const steps = Array.isArray(incomingSteps) ? incomingSteps : [];
  const step = steps[current];
  if (!step) {
    return null;
  }
  return jsxs("div", {
    "data-glass-component": true,
    className: 'fixed inset-0 z-[2000]',
    children: [jsx("div", {
      className: 'absolute inset-0 glass-surface-dark/60',
      onClick: onClose
    }), jsx("div", {
      className: 'absolute inset-x-0 bottom-10 glass-mx-auto glass-w-full max-w-xl',
      children: jsxs("div", {
        className: 'glass-radius-2xl glass-surface-subtle/10 glass-border glass-border-white/20 glass-p-4 glass-mx-4 text-primary',
        children: [jsx("div", {
          className: 'mb-3',
          children: step.content
        }), jsxs("div", {
          className: "glass-flex glass-justify-between",
          children: [jsx("button", {
            className: "glass-px-3 glass-py-1 glass-radius-md glass-surface-subtle/10 glass-focus glass-touch-target glass-contrast-guard",
            onClick: onPrev,
            disabled: current === 0,
            children: "Back"
          }), jsxs("div", {
            className: "glass-gap-2",
            children: [jsx("button", {
              className: "glass-px-3 glass-py-1 glass-radius-md glass-surface-subtle/10 glass-focus glass-touch-target glass-contrast-guard",
              onClick: onClose,
              children: "Close"
            }), jsx("button", {
              className: 'glass-px-3 glass-py-1 glass-radius-md glass-surface-blue text-primary glass-focus glass-touch-target glass-contrast-guard',
              onClick: onNext,
              children: "Next"
            })]
          })]
        })]
      })
    })]
  });
}

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