nextuiq/dist/index41.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import * as React from 'react';
import { StepIndicator } from './index54.mjs';
import { Button } from './index8.mjs';

function MultiStep({
  steps,
  onComplete,
  onStepChange,
  defaultData = {},
  autoSave = false
}) {
  const [currentStep, setCurrentStep] = React.useState(0);
  const [formData, setFormData] = React.useState(defaultData);
  const [completedSteps, setCompletedSteps] = React.useState([]);
  const [isValidating, setIsValidating] = React.useState(false);
  React.useEffect(() => {
    if (autoSave) {
      localStorage.setItem("multistep-data", JSON.stringify(formData));
    }
  }, [formData, autoSave]);
  const handleNext = async () => {
    const currentStepData = steps[currentStep];
    if (currentStepData.validation) {
      setIsValidating(true);
      try {
        const isValid = await currentStepData.validation(formData);
        if (!isValid) return;
      } finally {
        setIsValidating(false);
      }
    }
    if (currentStep < steps.length - 1) {
      setCompletedSteps([...completedSteps, currentStep]);
      setCurrentStep((current) => current + 1);
      onStepChange?.(currentStep + 1, formData);
    } else {
      onComplete?.(formData);
    }
  };
  const handleBack = () => {
    if (currentStep > 0) {
      setCurrentStep((current) => current - 1);
      onStepChange?.(currentStep - 1, formData);
    }
  };
  const handleStepClick = (step) => {
    if (completedSteps.includes(step - 1) || step <= currentStep) {
      setCurrentStep(step);
      onStepChange?.(step, formData);
    }
  };
  const updateFormData = (data) => {
    setFormData((current) => ({ ...current, ...data }));
  };
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-8", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      StepIndicator,
      {
        currentStep,
        totalSteps: steps.length,
        completedSteps,
        titles: steps.map((step) => step.title),
        onStepClick: handleStepClick
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-h-[200px]", children: React.cloneElement(steps[currentStep].content, {
      data: formData,
      updateData: updateFormData
    }) }),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        Button,
        {
          variant: "outline",
          onClick: handleBack,
          disabled: currentStep === 0,
          children: "Back"
        }
      ),
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        Button,
        {
          onClick: handleNext,
          disabled: isValidating,
          children: currentStep === steps.length - 1 ? "Complete" : "Next"
        }
      )
    ] })
  ] });
}

export { MultiStep };