open-index/open-npm huggingface dataset:
npm package: @harenetwork/uikit
Description: Set of UI components for pancake projects
Latest version: 0.10.7

# 🥞 Pancake UIkit

[![Version](https://img.shields.io/npm/v/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit) [![Size](https://img.shields.io/bundlephobia/min/@pancakeswap-libs/uikit)](https://www.npmjs.com/package/@pancakeswap-libs/uikit)

Pancake UIkit is a set of React components and hooks used to build pages on Pancake's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @pancakeswap-libs/uikit`

## Setup

### Theme

Before using Pancake UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@pancakeswap-libs/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@pancakeswap-libs/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @hareprnd/vite-plugin-react
Description: Forked from https://github.com/vitejs/vite-plugin-react
Author: Evan You
Latest version: 0.1.1

# Vite Plugin React Class HMR Fix

Forked from https://github.com/vitejs/vite-plugin-react

```
npm install @hareprnd/vite-plugin-react
```

or

```
yarn add @hareprnd/vite-plugin-react
```

## Usage

This package usage direction is just the same as the forked source in https://www.npmjs.com/package/@vitejs/plugin-react , the only different thing is:

```
// import react from '@vitejs/plugin-react'

// change the code above to:

import react from '@hareprnd/vite-plugin-react'
```
npm package: @hareru/registry
Description: Shared registry types, loaders, and artifacts for Hareru UI
Latest version: 0.4.2

# @hareru/registry

Shared registry types, loaders, and CSS mode recommendation for [Hareru UI](https://github.com/hareru-ai/ui).

[![npm](https://img.shields.io/npm/v/@hareru/registry)](https://www.npmjs.com/package/@hareru/registry)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../../LICENSE)

## Overview

`@hareru/registry` is the shared contract layer used by `@hareru/mcp` and `@hareru/cli`. It provides:

- **Type definitions** — `ComponentEntry`, `TaskBundle`, `CssMode`, `ConsumerRulesJSON`, `StateDef`, `A11yDef`, `ExampleDef`, `SlotDef`, `SlotRole` (slot contracts for compound components), and 10+ other types
- **Artifact loaders** — `loadRegistry()`, `loadTokens()`, `loadSchema()`, `loadConsumerRules()`, `loadComponentSchema()`
- **Slot utilities** — `buildSlotTree(rootName, slots, notes?)` renders a `SlotDef[]` as a formatted ASCII tree string. Optional `notes` are appended after the tree (e.g. Table's dual-parent note)
- **CSS mode recommendation** — `recommendCssMode()` shared function with `CSS_MODES` and `CSS_MODE_DESCRIPTIONS`

## Installation

```bash
npm install @hareru/registry
```

> Most users do not need to install this package directly. It is a dependency of `@hareru/mcp` and `@hareru/cli`.

## Usage

```ts
import {
  loadRegistry,
  recommendCssMode,
  CSS_MODES,
  type ComponentEntry,
  type CssMode,
} from "@hareru/registry";

// Load the component registry
const registry = loadRegistry();
console.log(registry.components.length); // 51

// Recommend a CSS mode
const { mode, reason } = recommendCssMode({
  hasTailwind: true,
  componentCount: 10,
});
console.log(mode); // 'tailwind'
```

## CSS Mode Recommendation

The `recommendCssMode()` function suggests the best CSS import strategy based on project context:

| Context | Recommended Mode |
|---------|-----------------|
| Tailwind CSS detected | `tailwind` |
| 1–3 components used | `per-component` |
| Existing CSS reset/framework | `portable` |
| Default | `standalone` |

## Links

- [Documentation](https://ui.hareru.ai/docs)
- [MCP Server](../mcp)
- [CLI](../cli)

## License

[MIT](../../LICENSE) — Copyright (c) 2026 MUSUBI Inc.
npm package: @hareru/tokens
Description: Design tokens and CSS custom properties for Hareru UI
Latest version: 0.1.1

# @hareru/tokens

Design tokens and CSS custom properties for [Hareru UI](https://github.com/hareru-ai/ui).

[![npm](https://img.shields.io/npm/v/@hareru/tokens)](https://www.npmjs.com/package/@hareru/tokens)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](../../LICENSE)

## Features

- **DTCG format** — Tokens follow the [W3C Design Token Community Group](https://design-tokens.github.io/community-group/format/) specification
- **OKLCH colors** — Perceptually uniform color space with automatic dark theme generation
- **150+ CSS variables** — All prefixed with `--hui-*` for collision avoidance
- **Light & dark themes** — Zero-runtime switching via `data-theme` attribute
- **Multiple output formats** — CSS, DTCG JSON, and JSON Schema
- **Zero runtime** — Pure CSS, no JavaScript overhead

## Installation

```bash
# npm
npm install @hareru/tokens

# pnpm
pnpm add @hareru/tokens

# yarn
yarn add @hareru/tokens
```

## Usage

### Import the CSS theme

Add to your global CSS file:

```css
@import "@hareru/tokens/css";
```

This provides all `--hui-*` CSS custom properties with light and dark theme support.

### Use CSS variables

```css
.my-component {
  color: var(--hui-color-foreground);
  background-color: var(--hui-color-background);
  padding: var(--hui-spacing-4);
  border-radius: var(--hui-radius-md);
  font-family: var(--hui-font-family-sans);
  box-shadow: var(--hui-shadow-md);
}
```

### Access tokens programmatically

```ts
import { defaultTheme } from "@hareru/tokens/presets";
```

## Token Categories

| Category | Prefix | Examples |
|----------|--------|----------|
| Color | `--hui-color-*` | `primary`, `background`, `foreground`, `muted` |
| Spacing | `--hui-spacing-*` | `1` (0.25rem) through `16` (4rem) |
| Radius | `--hui-radius-*` | `sm`, `md`, `lg`, `full` |
| Font | `--hui-font-*` | `family-sans`, `size-base`, `weight-bold` |
| Typography | `--hui-typography-*` | `h1-font-size`, `body-line-height` |
| Shadow | `--hui-shadow-*` | `sm`, `md`, `lg`, `xl` |
| Duration | `--hui-duration-*` | `fast`, `normal`, `slow` |
| Easing | `--hui-easing-*` | `in`, `out`, `in-out` |
| Z-Index | `--hui-z-index-*` | `dropdown`, `modal`, `toast` |

## Output Formats

| Export | Path | Description |
|--------|------|-------------|
| CSS | `@hareru/tokens/css` | Theme stylesheet with all CSS custom properties |
| DTCG JSON | `@hareru/tokens/tokens.json` | W3C DTCG format token definitions |
| JSON Schema | `@hareru/tokens/tokens.schema.json` | Schema for token validation |
| Presets | `@hareru/tokens/presets` | TypeScript token objects (light/dark) |

## Customization

Override any token in your CSS:

```css
:root {
  --hui-color-primary: oklch(0.6 0.25 260);
  --hui-font-family-sans: 'Your Brand Font', system-ui, sans-serif;
  --hui-radius-md: 0.5rem;
}
```

## Links

- [Documentation](https://ui.hareru.ai/docs/tokens)
- [GitHub](https://github.com/hareru-ai/ui/tree/main/packages/tokens)

## License

[MIT](../../LICENSE) — Copyright (c) 2026 MUSUBI Inc.
npm package: @harexs/emitter
Description: a simple event emitter
Author: Harexs
Latest version: 1.1.3

# harexs-emitter

a simple event emitter

## Install

```
$ npm install @harexs/emitter
```

## Usage

```js
import harexsEmitter from "@harexs/emitter";

const emitter = harexsEmitter();

emitter.on("harexs", (e) => console.log(e));
//or by once
emitter.once("harexs"); //remove itself after use emit

emitter.emit("harexs", "whoami");
// remove emit
emitter.off("harexs");
```
npm package: @harexs/limit
Description: Promise-Async functions with limited concurrency
Author: Harexs
Latest version: 1.0.1

# harexs-limit

Promise-Async functions with limited concurrency

## Install

```
$ npm install @harexs/limit
```

## Usage

```js
import harexsLimit from "harexs-limit";
let limit = harexsLimit(3);

function sleep(sec) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve();
    }, sec * 1000);
  });
}

limit(sleep, 1);
limit(sleep, 1.1);
limit(sleep, 1.2);
limit(sleep, 3);
limit(sleep, 1.3);
```
npm package: @harexs/pack-await
Description: Don't need use try..catch, Promise to package await results
Author: Harexs
Latest version: 1.0.1

# @harexs/pack-await

Don't need use try..catch, Promise to package await results

## Install

```
$ npm install @harexs/pack-await
```

## Usage

```js
import pAwait from "@harexs/pack-await";

const p1 = () => Promise.reject("harexs");
const [res, err] = pAwait(p1()); // [null,'harexs']

const p2 = () => Promise.resolve({ code: 200, msg: "OK", data: [] });
const [res, err] = pAwait(p1()); // [{code:200,msg:'OK',data:[]},null]

//use errObj
const p3 = () => Promise.resolve({ code: 200, msg: "OK", data: [] });
const [res, err] = pAwait(p3(), { msg: "change msg" }); // [{code:200,msg:'change msg',data:[]},null]
```
npm package: @harexs/style-log
Description: a simple console style log for devtools or nodejs
Author: Harexs
Latest version: 1.0.0

# @harexs/style-log

a simple console style log for devtools or nodejs

## Install

```
$ npm install @harexs/style-log
```

## Usage

```js
import hLog from "@harexs/style-log";

const Log = hLog();
const warningLog = hLog({ type: "warning", title: "This is a Warning Log" });

Log("do something...", 1000);
warningLog("Let me see");
```

## configuration

> You can customize the title content and type
> Eexample:

```js
const Log = hLog({
  type: "warning",
  title: "This is a Warning Log",
  icon: "🌈",
  windowLogType: "trace",
  nodeLogType: "log",
});
```

Options Props:

```typescript
interface OptionsProps {
  type?: optionTypes; // primary | secondary | success | warning | error | info
  icon?: string;
  title?: string;
  windowLogType?: logTypes; // log | trace | warn;
  nodeLogType?: logTypes; // log | trace | warn;
}
```