import { P as t } from "../../../../packageName-CJwD6mUt.js";
const s = `
import { useCallback, useState } from 'react';
import { Box, Text, StepperLayout } from '${t}';
import type { StepConfig } from '${t}';

const StepContent = ({ step }: { step: number }) => (
  <Box className="flex flex-col gap-[var(--spacing-4)]">
    <Text>Step {step + 1}</Text>
    <Text>Replace this placeholder with your form or view for step {step + 1}.</Text>
  </Box>
);

// Consumer owns all step statuses.
// Update status in state after validation — StepperLayout never infers error/warning.
const initialSteps: StepConfig[] = [
  { title: 'Grundlagen', description: 'Very Basic information', status: 'completed' },
  { title: 'Grundlagen', description: 'Basic information' },
  { title: 'Validation', description: 'Validate your data', status: 'error' },
  { title: 'Review', description: 'Review your settings', status: 'warning' },
  { title: 'Zusammenfassung', description: 'Review and submit' },
];

const StepStatuses = () => {
  const [activeStep, setActiveStep] = useState(1);
  const [steps, setSteps] = useState<StepConfig[]>(initialSteps);

  // Clear explicit status when user navigates away from a step
  const clearStepStatus = useCallback((index: number) => {
    setSteps(prev => prev.map((s, i) => (i === index ? { ...s, status: undefined } : s)));
  }, []);

  return (
    <StepperLayout
      steps={steps}
      activeStep={activeStep}
      onNext={current => {
        clearStepStatus(current);
        setActiveStep(current + 1);
      }}
      onBack={current => {
        clearStepStatus(current);
        setActiveStep(current - 1);
      }}
    >
      <StepContent step={activeStep} />
    </StepperLayout>
  );
};

export default StepStatuses;
`;
export {
  s as default
};
//# sourceMappingURL=stepStatusesSource.js.map
