<!-- source-hash: 18962d8a10f85127f723da06d9d49622 -->
A React component for creating visual step-by-step progress indicators with automatic state management and connecting lines between steps.

## Key Components

- **`Steps`**: Main container component that manages step numbering and state distribution
  - Props: `currentStep` (number), standard HTML div attributes
  - Automatically counts children and passes state to each step
- **`Step`**: Individual step component with indicator, title, and optional description
  - Props: `title` (string), `description?` (string), plus auto-injected state props
  - Renders step number or checkmark based on completion state

## Usage Example

```typescript
import { Steps, Step } from "./components/ui/steps"

function RegistrationWizard() {
  const [currentStep, setCurrentStep] = useState(2)

  return (
    <Steps currentStep={currentStep}>
      <Step 
        title="Account Setup" 
        description="Create your account credentials" 
      />
      <Step 
        title="Profile Information" 
        description="Add your personal details" 
      />
      <Step 
        title="Verification" 
        description="Verify your email address" 
      />
      <Step 
        title="Complete" 
        description="Your account is ready" 
      />
    </Steps>
  )
}
```

The component automatically handles visual states (active, completed, pending) and renders connecting lines between steps. Each step displays a numbered indicator that becomes a checkmark when completed.