npm package: @sarthakb009/context
Description: Context
Author: Sarthak
Latest version: 1.0.2

# Context

A React component for displaying a list of context files or items with remove functionality, hover interactions, and customizable rendering. Perfect for file attachments, document lists, or context management UIs. Built with TypeScript.

## Installation

```bash
npm install @sarthakb009/context
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
npm install react react-dom lucide-react
```

Required versions:
- `react` ^18.0.0
- `react-dom` ^18.0.0
- `lucide-react` ^0.294.0

**Note**: GSAP is optional. If you want GSAP animations, ensure GSAP is available globally.

## Usage

### Basic Example

```tsx
import { Context } from '@sarthakb009/context';
import { FileText } from 'lucide-react';

function App() {
  const items = [
    {
      id: '1',
      name: 'document.pdf',
      type: 'PDF',
      size: '2.4 MB',
      icon: FileText,
    },
    {
      id: '2',
      name: 'spreadsheet.xlsx',
      type: 'XLSX',
      size: '1.2 MB',
    },
  ];

  return (
    <Context
      items={items}
      title="Context Files"
      onRemove={(index, item) => {
        console.log('Removed:', item);
      }}
    />
  );
}
```

### Using `files` Prop (Alternative)

```tsx
import { Context } from '@sarthakb009/context';

function App() {
  const files = [
    { name: 'file1.txt', type: 'TXT', size: '100 KB' },
    { name: 'file2.txt', type: 'TXT', size: '200 KB' },
  ];

  return (
    <Context
      files={files}
      title="Attached Files"
    />
  );
}
```

### With Custom Renderers

```tsx
import { Context } from '@sarthakb009/context';

function App() {
  const items = [
    { id: '1', name: 'Custom Item', type: 'CUSTOM', size: '1 MB' },
  ];

  return (
    <Context
      items={items}
      renderStep={(item, index) => (
        <div>Step {index + 1}</div>
      )}
      renderSection={(item, index) => (
        <div>
          <h3>{item.name}</h3>
          <p>Custom content for {item.type}</p>
        </div>
      )}
    />
  );
}
```

### With Variants and Animations

```tsx
import { Context } from '@sarthakb009/context';

function App() {
  return (
    <Context
      items={items}
      variant="bordered" // 'default' | 'flat' | 'bordered'
      animated="css" // 'gsap' | 'css' | false
      onToggle={(index, item) => {
        console.log('Toggled:', item);
      }}
    />
  );
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `items` | `ContextItem[]` | `undefined` | No | List of files or items to display |
| `files` | `ContextItem[]` | `undefined` | No | Alternate prop name for items (same as items) |
| `title` | `string` | `"Context Files"` | No | Header title text |
| `variant` | `'default' \| 'flat' \| 'bordered'` | `'default'` | No | Visual variant (affects borders/shadows) |
| `animated` | `'gsap' \| 'css' \| false` | `'css'` | No | Animation type. GSAP requires global GSAP |
| `onRemove` | `(index: number, item: ContextItem) => void` | `undefined` | No | Callback fired when remove button is clicked |
| `onToggle` | `(index: number, item: ContextItem) => void` | `undefined` | No | Callback fired when item is clicked |
| `renderStep` | `(item: ContextItem, index: number) => React.ReactNode` | `undefined` | No | Custom renderer for the icon/step area |
| `renderSection` | `(item: ContextItem, index: number) => React.ReactNode` | `undefined` | No | Custom renderer for the content section |
| `classes` | `object` | `undefined` | No | Custom CSS classes for root, header, item, iconBox, removeBtn |
| `className` | `string` | `""` | No | Additional CSS classes for container |
| `style` | `React.CSSProperties` | `undefined` | No | Inline styles for container |
| `id` | `string` | `undefined` | No | HTML id attribute |

## ContextItem Type

```tsx
interface ContextItem {
  id?: string;
  name: string;
  type: string;
  size: string;
  icon?: LucideIcon;
  [key: string]: any; // Allows additional properties
}
```

## Features

- ✅ **File Display**: Clean list of files with icons and metadata
- ✅ **Remove Functionality**: Remove items with callback support
- ✅ **Custom Rendering**: Full control over item rendering
- ✅ **Hover Interactions**: Actions appear on hover
- ✅ **Animations**: CSS or GSAP-powered entrance animations
- ✅ **Variants**: Multiple visual styles
- ✅ **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 { Context, ContextProps, ContextItem, AnimationType } from '@sarthakb009/context';

const item: ContextItem = {
  name: 'file.pdf',
  type: 'PDF',
  size: '1 MB',
};

const props: ContextProps = {
  items: [item],
  variant: 'default',
  animated: 'css' as AnimationType,
};
```

## License

MIT