open-index/open-npm huggingface dataset:
npm package: @mrstrange1708/heat-map
Description: A beautiful, customizable heatmap calendar component for React.
Author: Shaik Junaid Sami
Latest version: 1.0.1

# @mrstrange1708/heat-map

A beautiful, customizable heatmap calendar component for React, built with Tailwind CSS and Framer Motion.

[**Live Demo & Website**](https://mrstrange1708-heatmap.vercel.app/)

## Features

- 📅 **Annual View**: Displays a full year of activity data.
- 🎨 **Built-in Themes**: Ready-to-use themes like Green, Blue, and Fire.
- 🖌️ **Customizable**: Create your own color scales or use the built-in ones.
- 🔧 **Flexible Configuration**: Adjust thresholds, gaps, and styles.
- ✨ **Animations**: Smooth entry animations powered by Framer Motion.
- 📱 **Responsive**: Built with responsive design in mind.

## Installation

```bash
npm install @mrstrange1708/heat-map
# or
yarn add @mrstrange1708/heat-map
# or
pnpm add @mrstrange1708/heat-map
```

## Peer Dependencies

- `react` (>=18)
- `react-dom` (>=18)
- `framer-motion`
- `tailwindcss`

## Usage

### Basic Usage (Default Green Theme)

```tsx
import { Heatmap } from '@mrstrange1708/heat-map';

export default function App() {
  return <Heatmap data={data} year={2024} />;
}
```

### Using Built-in Themes

You can easily switch themes using the `theme` prop. Available themes: `"green"`, `"blue"`, `"fire"`.

```tsx
// Blue Theme
<Heatmap 
  data={data} 
  year={2024} 
  theme="blue"
/>

// Fire Theme
<Heatmap 
  data={data} 
  year={2024} 
  theme="fire"
/>
```

## API Reference

### `Heatmap` Component Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `data` | `HeatmapData[]` | **Required** | Array of `{ date: string, count: number }`. |
| `theme` | `"green" \| "blue" \| "fire"` | `"green"` | Built-in color theme to use. |
| `colors` | `HeatmapTheme` | - | Custom color map (overrides `theme`). |
| `year` | `number` | `current year` | The year to render. |
| `gap` | `number` | `2` | Gap between cells in pixels. |
| `className` | `string` | `""` | Additional CSS classes. |
| `thresholds` | `[number, number, number]` | `[10, 25, 50]` | Breakpoints for intensity levels. |

### Interfaces

#### `HeatmapData`
```tsx
interface HeatmapData {
    date: string; // YYYY-MM-DD
    count: number;
}
```

#### `HeatmapTheme`
Define custom styles for each activity level (0-4).

```tsx
type HeatmapTheme = {
  0: string; // Empty
  1: string; // Low
  2: string; // Medium
  3: string; // High
  4: string; // Max
};
```

## Customization Example

```tsx
<Heatmap
  data={data}
  colors={{
    0: "bg-slate-800",
    1: "bg-purple-900",
    2: "bg-purple-700",
    3: "bg-purple-500",
    4: "bg-purple-300",
  }}
/>
```

## License

MIT
npm package: @mrsuel/ds-react-native
Description: test
Author: Henrique Suel
Latest version: 3.0.0

# @mrsuel/react-native

Design system

## Installation

```sh
npm install @mrsuel/react-native
```

## Usage

```js
import { multiply } from '@mrsuel/react-native';

// ...

const result = await multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @mrsuel/react-native
Description: test
Author: Henrique Suel
Latest version: 2.0.0

# @mrsuel/react-native

Design system

## Installation

```sh
npm install @mrsuel/react-native
```

## Usage

```js
import { multiply } from '@mrsuel/react-native';

// ...

const result = await multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @mrsyl/tiny
Description: Removes all spaces from a string
Latest version: 4.0.0

# @mrsyl/tiny

[![npm (scoped)](https://img.shields.io/npm/v/@bamblehorse/tiny.svg)](https://www.npmjs.com/package/@bamblehorse/tiny)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@bamblehorse/tiny.svg)](https://www.npmjs.com/package/@bamblehorse/tiny)

Removes all spaces from a string.

## Install

```
$ npm install @mrsyl/tiny
```

## Usage

```js
const tiny = require("@mrsyl/tiny");

tiny("So much space!");
//=> "Somuchspace!"

tiny(1337);
//=> Uncaught TypeError: Tiny wants a string!
//    at tiny (<anonymous>:2:41)
//    at <anonymous>:1:1
```
npm package: @mrtangyun/fusion-ui
Description: A component library based on Fusion Next
Latest version: 1.0.8-beta.5

# README

## 开发常用命令

- `cnpm start` 运行所有组件的开发调试环境
- `cnpm start page-header` 运行单个组件的开发调试环境
- `cnpm run lowcode:dev` 启动低代码开发调试环境
- `cnpm run lowcode:build` 构建低代码产物
- `cnpm run build` 打包生成 lib/ es/ dist/ build/文件
- `cnpm run materials` 生成物料中心需要的入库 JSON 文件
- `cnpm run lint` 进行代码检查