feat: add npm package with React and vanilla JS support

- Add packages/github-contribution-graph npm package
- React component (GitHubContributionGraph) with TypeScript
- React hook (useContributionData) for custom implementations
- Vanilla JS widget class (GitHubContributionWidget)
- Browser bundle for CDN/script tag usage
- 6 theme presets (default, void, slate, midnight, glacier, cyber)
- 42 tests with Vitest
- GitHub Actions CI/CD for testing and npm publishing
- Minified bundles (~3KB gzipped)

https://github.com/iamjr15/github-contribution-graph

Author: iamjr15

.github/workflows/ci.yml

@@ -0,0 +1,40 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'packages/**'
+      - '.github/workflows/ci.yml'
+  pull_request:
+    branches: [main]
+    paths:
+      - 'packages/**'
+      - '.github/workflows/ci.yml'
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Type check
+        run: npm run typecheck -w packages/github-contribution-graph
+
+      - name: Run tests
+        run: npm run test -w packages/github-contribution-graph
+
+      - name: Build package
+        run: npm run build

.github/workflows/release.yml

@@ -0,0 +1,47 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+  id-token: write
+
+jobs:
+  release:
+    name: Release to npm
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test -w packages/github-contribution-graph
+
+      - name: Build
+        run: npm run build
+
+      - name: Publish to npm
+        run: npm publish -w packages/github-contribution-graph --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Create GitHub Release
+        uses: softprops/action-gh-release@v2
+        with:
+          generate_release_notes: true

.gitignore

@@ -3,4 +3,6 @@ node_modules
 .env
 .netlify
 .gemini-clipboard
-.DS_Store
+.DS_Store
+packages/*/dist
+coverage

README.md

@@ -2,15 +2,55 @@
 
 A lightweight, customizable widget to embed your GitHub contribution graph on any website.
 
+[![npm version](https://img.shields.io/npm/v/github-contribution-graph.svg)](https://npmjs.com/package/github-contribution-graph)
 [![Live Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://github-contribution-graph.netlify.app)
 [![Netlify Status](https://api.netlify.com/api/v1/badges/478cfe35-5d4d-4ec2-939b-b58e4de45ebe/deploy-status)](https://app.netlify.com/sites/github-contribution-graph/deploys)
 [![License](https://img.shields.io/badge/license-Apache%202.0-blue)](LICENSE)
 
 ![Preview](assets/media/thumbnail.png)
 
-**[Live Demo](https://github-contribution-graph.netlify.app)** | **[GitHub Repo](https://github.com/iamjr15/github-contribution-graph)**
+**[Live Demo](https://github-contribution-graph.netlify.app)** | **[GitHub Repo](https://github.com/iamjr15/github-contribution-graph)** | **[npm Package](https://npmjs.com/package/github-contribution-graph)**
 
-## Quick Start (Standard)
+---
+
+## NPM Package
+
+Install via npm for React or vanilla JavaScript projects:
+
+```bash
+npm install github-contribution-graph
+```
+
+### React
+
+```tsx
+import { GitHubContributionGraph } from 'github-contribution-graph/react';
+import 'github-contribution-graph/styles.css';
+
+function App() {
+  return <GitHubContributionGraph username="octocat" theme="midnight" />;
+}
+```
+
+### Vanilla JavaScript
+
+```js
+import { GitHubContributionWidget } from 'github-contribution-graph/vanilla';
+import 'github-contribution-graph/styles.css';
+
+const widget = new GitHubContributionWidget({
+  username: 'octocat',
+  container: '#my-graph',
+  theme: 'void',
+});
+widget.render();
+```
+
+See the [package README](packages/github-contribution-graph/README.md) for full API documentation.
+
+---
+
+## Quick Start (CDN)
 
 Add the following to your HTML file to get the standard GitHub-styled graph:
 

assets/css/index.css

@@ -434,7 +434,28 @@ h1::after {
     to { opacity: 1; filter: blur(0); }
 }
 
-/* Footer */
+/* Status Dot */
+.meta-info {
+    font-size: 0.7rem;
+    color: var(--text-dim);
+    display: flex;
+    gap: 2rem;
+    margin-top: 1rem;
+}
+
+.meta-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.status-dot {
+    width: 6px;
+    height: 6px;
+    background-color: #00ff00;
+    border-radius: 50%;
+    box-shadow: 0 0 10px #00ff00;
+}
 .site-footer {
     margin-top: 4rem;
     font-size: 0.7rem;