npm package: @sarthakb009/task
Description: Task
Author: Sarthak
Latest version: 1.0.2

# Task

A modern, interactive React component for displaying and managing task items with completion status, priority levels, and hover interactions. Built with TypeScript and GSAP animations.

## Installation

```bash
npm install @sarthakb009/task
```

## 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 { Task } from '@sarthakb009/task';

function App() {
  return (
    <Task
      title="Review Q3 Performance Metrics"
      description="Analyze the user retention data and prepare a summary report."
      priority="High"
      dueDate="Due tomorrow"
      completed={false}
    />
  );
}
```

### With Callbacks

```tsx
import { Task } from '@sarthakb009/task';
import { useState } from 'react';

function App() {
  const [completed, setCompleted] = useState(false);

  return (
    <Task
      title="Complete project documentation"
      description="Write comprehensive docs for the new feature"
      priority="Medium"
      dueDate="Due in 2 days"
      completed={completed}
      onToggle={(isCompleted) => {
        setCompleted(isCompleted);
        console.log('Task toggled:', isCompleted);
      }}
      onMenuClick={() => {
        console.log('Menu clicked');
      }}
    />
  );
}
```

### Completed Task

```tsx
import { Task } from '@sarthakb009/task';

function App() {
  return (
    <Task
      title="Fix login bug"
      description="Resolve authentication issue on mobile devices"
      priority="High"
      dueDate="Completed yesterday"
      completed={true}
    />
  );
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `title` | `string` | `undefined` | No | The task title/name |
| `description` | `string` | `undefined` | No | Detailed description of the task |
| `priority` | `'Low' \| 'Medium' \| 'High'` | `undefined` | No | Priority level of the task |
| `dueDate` | `string` | `undefined` | No | Due date text (e.g., "Due tomorrow", "Due in 2 days") |
| `completed` | `boolean` | `false` | No | Whether the task is completed |
| `onToggle` | `(completed: boolean) => void` | `undefined` | No | Callback fired when checkbox is clicked |
| `onMenuClick` | `() => void` | `undefined` | No | Callback fired when menu button is clicked |
| `className` | `string` | `undefined` | No | Additional CSS classes to apply to the container |

## Features

- ✅ **Completion Status**: Visual checkbox with completion state
- ✅ **Priority Levels**: Color-coded priority indicators
- ✅ **Hover Interactions**: Menu button appears on hover
- ✅ **Smooth Animations**: GSAP-powered entrance animations
- ✅ **Responsive Design**: Adapts to different screen sizes
- ✅ **TypeScript**: Full TypeScript support with exported types
- ✅ **Accessible**: Proper ARIA labels and keyboard navigation

## TypeScript

The component is written in TypeScript and exports all types:

```tsx
import { Task, TaskProps } from '@sarthakb009/task';

const props: TaskProps = {
  title: "My Task",
  priority: "High",
  completed: false,
};
```

## License

MIT