npm package: @sarthakb009/plan
Description: Plan
Author: Sarthak
Latest version: 1.0.7

# Plan

A React component for displaying step-by-step plans or processes with completion status, active states, and smooth animations. Perfect for workflows, onboarding steps, or progress tracking. Built with TypeScript and GSAP animations.

## Installation

```bash
npm install @sarthakb009/plan
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
npm install react react-dom lucide-react gsap @gsap/react
```

Required versions:
- `react` ^18.0.0
- `react-dom` ^18.0.0
- `lucide-react` ^0.294.0
- `gsap` ^3.13.0
- `@gsap/react` ^2.1.2

## Usage

### Basic Example

```tsx
import { Plan } from '@sarthakb009/plan';

function App() {
  const steps = [
    { label: 'Initialize project', completed: true },
    { label: 'Set up dependencies', completed: true },
    { label: 'Configure build tools', completed: false, active: true },
    { label: 'Deploy to production', completed: false },
  ];

  return (
    <Plan
      title="Setup Plan"
      steps={steps}
    />
  );
}
```

### With Active Step

```tsx
import { Plan } from '@sarthakb009/plan';

function App() {
  const steps = [
    { label: 'Step 1', completed: true },
    { label: 'Step 2', completed: true },
    { label: 'Step 3', completed: false, active: true }, // Currently active
    { label: 'Step 4', completed: false },
  ];

  return (
    <Plan
      steps={steps}
      title="Current Progress"
    />
  );
}
```

### All Completed

```tsx
import { Plan } from '@sarthakb009/plan';

function App() {
  const steps = [
    { label: 'Step 1', completed: true },
    { label: 'Step 2', completed: true },
    { label: 'Step 3', completed: true },
    { label: 'Step 4', completed: true },
  ];

  return (
    <Plan
      steps={steps}
      title="Completed Plan"
    />
  );
}
```

### Custom Title

```tsx
import { Plan } from '@sarthakb009/plan';

function App() {
  return (
    <Plan
      steps={steps}
      title="Implementation Steps"
      className="my-plan"
    />
  );
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `steps` | `PlanStep[]` | `undefined` | No | Array of plan steps to display |
| `title` | `string` | `undefined` | No | Header title text |
| `className` | `string` | `undefined` | No | Additional CSS classes for container |

## PlanStep Type

```tsx
interface PlanStep {
  label: string;
  completed?: boolean;
  active?: boolean;
}
```

## Features

- ✅ **Step Display**: Clear visual representation of steps
- ✅ **Completion Status**: Visual indicators for completed steps
- ✅ **Active State**: Highlight currently active step
- ✅ **Connecting Lines**: Visual connection between steps
- ✅ **Smooth Animations**: GSAP-powered entrance animations
- ✅ **TypeScript**: Full TypeScript support with exported types
- ✅ **Accessible**: Proper ARIA labels and semantic HTML

## TypeScript

The component is written in TypeScript and exports all types:

```tsx
import { Plan, PlanProps, PlanStep } from '@sarthakb009/plan';

const step: PlanStep = {
  label: 'Complete step',
  completed: true,
  active: false,
};

const props: PlanProps = {
  steps: [step],
  title: 'My Plan',
};
```

## License

MIT