import { P as e } from "../../../../packageName-CJwD6mUt.js";
const p = `
import { useState, useCallback } from 'react';
import { Stepper, StepperStep, Box, Button } from '${e}';

const NavigableStepper: React.FC<INavigableStepperProps> = () => {
  const [activeStep, setActiveStep] = useState<number>(0);
  const [completedSteps, setCompletedSteps] = useState<number[]>([]);

  const handleStepClick = useCallback((stepIndex: number) => {
    setActiveStep(stepIndex);
  }, []);

  const handleNextStep = useCallback(() => {
    // Max limit to 2 since we have 3 steps (0, 1, 2)
    setActiveStep(prev => Math.min(prev + 1, 2));
  }, []);

  const handlePreviousStep = useCallback(() => {
    // Min limit to 0, since step index can't go below 0
    setActiveStep(prev => Math.max(prev - 1, 0));
  }, []);

  const handleCompleteStep = useCallback(() => {
    setCompletedSteps(prev => {
      if (!prev.includes(activeStep)) {
        return [...prev, activeStep];
      }

      return prev;
    });
  }, [activeStep]);

  const handleReset = useCallback(() => {
    setActiveStep(0);
    setCompletedSteps([]);
  }, []);

  return (
    <Box className="flex flex-col gap-[var(--spacing-6)] w-full">
      <Stepper type="horizontal" mode="navigation" activeSteps={activeStep} onClick={handleStepClick} completedSteps={completedSteps}>
        <StepperStep title="Step 1" />
        <StepperStep title="Step 2" />
        <StepperStep title="Step 3" />
      </Stepper>
      <Box className="flex gap-[var(--spacing-5)] justify-between">
        <Box>
          <Button label="Previous Step" onClick={handlePreviousStep} variant="secondary" />
        </Box>
        <Box className="space-x-[var(--spacing-2)]">
          <Button label="Reset" onClick={handleReset} variant="ghost" />
          <Button label="Complete Current Step" onClick={handleCompleteStep} variant="outline" />
          <Button label="Next Step" onClick={handleNextStep} variant="default" />
        </Box>
      </Box>
    </Box>
  );
};

export default NavigableStepper;
`;
export {
  p as default
};
//# sourceMappingURL=navigableStepperSource.js.map
