import { P as e } from "../../../../packageName-CJwD6mUt.js";
const a = `
import { useCallback, type ReactNode } from 'react';
import { Box, Button, Text, StepperLayout, useStepperLayoutState } from '${e}';
import type { StepConfig } from '${e}';

const baseSteps: StepConfig[] = [
  { title: 'Required Fields', description: 'Mandatory data entry' },
  { title: 'Optional Data', description: 'Additional information' },
  { title: 'Confirmation', description: 'Review and confirm' },
  { title: 'Complete', description: 'Finished' },
];

const STEP_STATUSES: Array<StepConfig['status']> = ['error', 'warning', 'completed', undefined];

const StatusShowcase = () => {
  const { steps, activeStep, goNext, goBack, reset, setStepStatus } = useStepperLayoutState(baseSteps);

  const handleNext = useCallback(
    (current: number) => {
      setStepStatus(current, STEP_STATUSES[current]);
      goNext();
    },
    [setStepStatus, goNext],
  );

  const stepContent: ReactNode[] = [
    <Box key="step-0" className="flex flex-col gap-[var(--spacing-4)]">
      <Text>
        Click Next — this step will be marked status: 'error' in the stepper header,
        but navigation still advances.
      </Text>
    </Box>,

    <Box key="step-1" className="flex flex-col gap-[var(--spacing-4)]">
      <Text>
        Click Next — this step will be marked status: 'warning'. Notice step 0
        retains its error badge in the header.
      </Text>
    </Box>,

    <Box key="step-2" className="flex flex-col gap-[var(--spacing-4)]">
      <Text>
        Click Next — this step will be marked status: 'completed'. Explicit override
        forces completed regardless of position.
      </Text>
    </Box>,

    <Box key="step-3" className="flex flex-col gap-[var(--spacing-4)]">
      <Text>
        All steps have explicit statuses. Navigate back to confirm statuses persist —
        they are not cleared on Back.
      </Text>
      <Button label="Reset" variant="outline" onClick={reset} />
    </Box>,
  ];

  return (
    <StepperLayout steps={steps} activeStep={activeStep} onNext={handleNext} onBack={goBack}>
      {stepContent[activeStep]}
    </StepperLayout>
  );
};

export default StatusShowcase;
`.trim();
export {
  a as default
};
//# sourceMappingURL=statusShowcaseSource.js.map
