npm package: @sarthakb009/checkpoint
Description: Checkpoint
Author: Sarthak
Latest version: 1.0.11

# Checkpoint

A React component for displaying version checkpoints with restore and view details functionality. Perfect for version control UIs, deployment history, or system state management. Built with TypeScript and supports GSAP animations.

## Installation

```bash
npm install @sarthakb009/checkpoint
```

## 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, install:
```bash
npm install gsap @gsap/react
```

## Usage

### Basic Example

```tsx
import { Checkpoint } from '@sarthakb009/checkpoint';

function App() {
  return (
    <Checkpoint
      version="v2.4"
      title="Checkpoint"
      description="Optimized context window and updated system prompts."
      timestamp="2 mins ago"
      commitId="8f3a2c"
      isActive={false}
    />
  );
}
```

### Active Checkpoint

```tsx
import { Checkpoint } from '@sarthakb009/checkpoint';

function App() {
  return (
    <Checkpoint
      version="v2.5"
      title="Current Version"
      description="Latest stable release with bug fixes."
      timestamp="Just now"
      commitId="a1b2c3"
      isActive={true}
      onRestore={(e) => {
        console.log('Restore clicked');
      }}
      onViewDetails={(e) => {
        console.log('View details clicked');
      }}
    />
  );
}
```

### With Animations

```tsx
import { Checkpoint } from '@sarthakb009/checkpoint';

function App() {
  return (
    <Checkpoint
      version="v2.4"
      title="Checkpoint"
      description="Optimized context window"
      timestamp="2 mins ago"
      animated="gsap" // or "css" or false
    />
  );
}
```

### Custom Styling

```tsx
import { Checkpoint } from '@sarthakb009/checkpoint';

function App() {
  return (
    <Checkpoint
      version="v2.4"
      title="Checkpoint"
      description="Custom styled checkpoint"
      styles={{
        container: { backgroundColor: '#f0f0f0' },
        title: { color: '#333' },
      }}
    />
  );
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `version` | `string` | `"v2.4"` | No | Version identifier to display |
| `title` | `string` | `"Checkpoint"` | No | Title of the checkpoint |
| `description` | `string` | `"Optimized context window and updated system prompts."` | No | Description text |
| `timestamp` | `string` | `"2 mins ago"` | No | Time string (e.g., "2 mins ago", "Just now") |
| `commitId` | `string` | `"8f3a2c"` | No | Commit or identifier to display |
| `isActive` | `boolean` | `false` | No | Whether this checkpoint is currently active (shows badge) |
| `animated` | `'gsap' \| 'css' \| false` | `'css'` | No | Animation type. Requires GSAP for 'gsap' option |
| `onRestore` | `(e: React.MouseEvent<HTMLButtonElement>) => void` | `undefined` | No | Callback fired when restore button is clicked |
| `onViewDetails` | `(e: React.MouseEvent<HTMLButtonElement>) => void` | `undefined` | No | Callback fired when view details button is clicked |
| `styles` | `object` | `undefined` | No | Override internal styles (see TypeScript types) |
| `className` | `string` | `undefined` | No | Additional CSS classes |
| `style` | `React.CSSProperties` | `undefined` | No | Inline styles for container |
| `id` | `string` | `undefined` | No | HTML id attribute |

## Features

- ✅ **Version Display**: Clear version and commit information
- ✅ **Active State**: Visual indicator for active checkpoints
- ✅ **Action Buttons**: Restore and view details functionality
- ✅ **Animations**: CSS or GSAP-powered entrance animations
- ✅ **Customizable**: Style overrides via styles prop
- ✅ **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 { Checkpoint, CheckpointProps, AnimationType } from '@sarthakb009/checkpoint';

const props: CheckpointProps = {
  version: "v2.4",
  title: "Checkpoint",
  animated: "css" as AnimationType,
};
```

## License

MIT