declare const navigableStepperSource = "\n    import { useState } from 'react';\n    import { Stepper, StepperStep, Box, Button } from '@jtl-software/platform-ui-react';\n\n    const [activeStep, setActiveStep] = useState<number>(0);\n    const [completedSteps, setCompletedSteps] = useState<number[]>([]);\n    \n    const handleStepClick = useCallback((stepIndex: number) => {\n      setActiveStep(stepIndex);\n    }, []);\n    \n    const handleNextStep = useCallback(() => {\n      // Max limit to 2 since we have 3 steps (0, 1, 2)\n      setActiveStep(prev => Math.min(prev + 1, 2));\n    }, []);\n    \n    const handlePreviousStep = useCallback(() => {\n      // Min limit to 0, since step index can't go below 0\n      setActiveStep(prev => Math.max(prev - 1, 0));\n    }, []);\n    \n    const handleCompleteStep = useCallback(() => {\n      setCompletedSteps(prev => {\n        if (!prev.includes(activeStep)) {\n          return [...prev, activeStep];\n        }\n  \n        return prev;\n      });\n    }, [activeStep]);\n    \n    const handleReset = useCallback(() => {\n        setActiveStep(0);\n        setCompletedSteps([]);\n      }, []);\n    \n      return (\n        <Box className=\"flex flex-col gap-[var(--spacing-6)] w-full\">\n          <Stepper type=\"horizontal\" mode=\"navigation\" activeSteps={activeStep} onClick={handleStepClick} completedSteps={completedSteps}>\n            <StepperStep title=\"Step 1\" description=\"Description of Step 1\" />\n            <StepperStep title=\"Step 2\" description=\"Description of Step 2\" />\n            <StepperStep title=\"Step 3\" description=\"Description of Step 3\" />\n          </Stepper>\n          <Box className=\"flex gap-[var(--spacing-5)] justify-start\">\n            <Button label=\"Previous Step\" onClick={handlePreviousStep} variant=\"secondary\" />\n            <Button label=\"Next Step\" onClick={handleNextStep} variant=\"secondary\" />\n            <Button label=\"Complete Current Step\" onClick={handleCompleteStep} variant=\"highlight\" />\n            <Button label=\"Reset\" onClick={handleReset} variant=\"ghost\" />\n          </Box>\n        </Box>\n    );";
export default navigableStepperSource;