Stepper

import { useState } from "react";
import { Button, Stepper } from "@smallest-inc/ui";

const steps = ["Choose a voice", "Connect a number", "Test call"];

export default function StepperDefault() {
  const [step, setStep] = useState(0);

  return (
    <div className="flex flex-col items-start gap-4">
      <Stepper aria-label="Agent setup" count={steps.length} value={step} labels={steps} />
      <p className="text-sm font-medium text-fg">
        {steps[step]} <span className="text-fg-tertiary tabular-nums">· {step + 1} of {steps.length}</span>
      </p>
      <div className="flex gap-2">
        <Button variant="secondary" size="sm" disabled={step === 0} onClick={() => setStep(step - 1)}>
          Back
        </Button>
        <Button size="sm" disabled={step === steps.length - 1} onClick={() => setStep(step + 1)}>
          Continue
        </Button>
      </div>
    </div>
  );
}

import { Stepper } from "@smallest-inc/ui";

export default function StepperCount() {
  return (
    <div className="flex flex-col items-start gap-4">
      <Stepper aria-label="Import contacts" count={3} value={0} />
      <Stepper aria-label="Campaign setup" count={5} value={2} />
      <Stepper aria-label="Onboarding" count={7} value={6} />
    </div>
  );
}

import { Stepper } from "@smallest-inc/ui";

const steps = ["Details", "Configuration", "Review"];

export default function StepperGhost() {
  return <Stepper variant="ghost" aria-label="Create agent" count={steps.length} value={1} labels={steps} />;
}

import { useState } from "react";
import { Stepper } from "@smallest-inc/ui";

const steps = ["Welcome message", "Collect details", "Book slot", "Confirm"];

export default function StepperInteractive() {
  const [step, setStep] = useState(1);

  return (
    <div className="flex flex-col items-start gap-4">
      <Stepper aria-label="Preview flow" count={steps.length} value={step} labels={steps} onValueChange={setStep} />
      <p className="text-sm font-medium text-fg">{steps[step]}</p>
    </div>
  );
}