Step Indicator

import { StepIndicator } from '@hanzo/ui'

export function Default() {
  return (
    <YStack maxW={480}>
      <StepIndicator
        steps={["Cart", "Shipping", "Payment", "Review"]}
        currentStep={1}
      />
    </YStack>
  )
}

export function DotSize() {
  return (
    <YStack gap="$5" maxW={480}>
      <StepIndicator
        steps={["Upload", "Map columns", "Import"]}
        currentStep={1}
        dotSizeRem={0.5}
      />
      <StepIndicator
        steps={["Upload", "Map columns", "Import"]}
        currentStep={1}
      />
      <StepIndicator
        steps={["Upload", "Map columns", "Import"]}
        currentStep={1}
        dotSizeRem={1.5}
      />
    </YStack>
  )
}

export function Controlled() {
  const steps = ["Account", "Workspace", "Invite team", "Done"]
  const [step, setStep] = useState(0)
  return (
    <YStack gap="$4" maxW={480}>
      <StepIndicator steps={steps} currentStep={step} />
      <Paragraph color="$quiet">
        Step {step + 1} of {steps.length}: {steps[step]}
      </Paragraph>
      <XStack gap="$2">
        <Button
          variant="outline"
          disabled={step === 0}
          onPress={() => setStep(step - 1)}
        >
          Back
        </Button>
        <Button
          variant="primary"
          disabled={step === steps.length - 1}
          onPress={() => setStep(step + 1)}
        >
          Next
        </Button>
      </XStack>
    </YStack>
  )
}

export function Finished() {
  return (
    <YStack maxW={480}>
      <StepIndicator steps={["Build", "Test", "Publish"]} currentStep={2} />
    </YStack>
  )
}

Types

export type StepIndicatorProps = Omit<React.ComponentProps<typeof Box>, 'children'> & {
  steps: string[]
  /** Zero-based. Steps before it are done; this one is current. */
  currentStep: number
  /** Diameter, in rem. */
  dotSizeRem?: number
}

Exports