open-index/open-npm huggingface dataset:
npm package: @makotot/ghostui
Description: [![npm](https://img.shields.io/npm/v/@makotot/ghostui?style=for-the-badge)](https://www.npmjs.com/package/@makotot/ghostui) [![ghostUI](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/ipjs5c&style=for-the-badge&logo=cypress)]
Author: makotot
Latest version: 2.0.0

# [GhostUI](https://ghostui.netlify.app/)

[![npm](https://img.shields.io/npm/v/@makotot/ghostui?style=for-the-badge)](https://www.npmjs.com/package/@makotot/ghostui)
[![ghostUI](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/ipjs5c&style=for-the-badge&logo=cypress)](https://dashboard.cypress.io/projects/ipjs5c/runs)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg?style=for-the-badge)](https://github.com/semantic-release/semantic-release)

> Headless UI copmonent collection for React.

```sh
$ npm i @makotot/ghostui
```

## Components

- [Scrollspy](./src/Scrollspy)
- [ReadingProgress](./src/ReadingProgress)
- [Pagination](./src/Pagination)

## Authors

- [makotot](https://github.com/makotot)

## License

Licensed under the MIT License
npm package: @makotot/react-tabbed
Description: Tab component with render props
Author: makotot
Latest version: 0.1.0

# `<Tabbed />`

> Tab component with render props.


## Install

```sh
$ npm i react-tabbed
```


## Usage

```js
import Tabbed from 'react-tabbed'

<Tabbed
  render={
    ({ getTabProps, isActiveTab, setActiveTab }) => {
      return (
        <div>
          <nav>
            <a
              href="#"
              {
                ...getTabProps({
                  index: 0,
                  onClick: (e) => { e.preventDefault(); console.log(this) },
                })
              }
              style={{ color: isActiveTab(0) ? '#f00' : '#000' }}
            >tab 1</a>
            <a href="#" { ...getTabProps({ index: 1 }) } style={{ color: isActiveTab(1) ? '#f00' : '#000' }}>tab 2</a>
            <a href="#" { ...getTabProps({ index: 2 }) } style={{ color: isActiveTab(2) ? '#f00' : '#000' }}>tab 3</a>
          </nav>
          <div>
            { isActiveTab(0) && <div>1</div> }
            { isActiveTab(1) && <div>2</div> }
            { isActiveTab(2) && <div>3</div> }
          </div>
        </div>
      )
    }
  }
/>
```


## License

MIT
npm package: @makozi/react-input-otp
Description: A stylized OTP (One Time Password) input field component for React with auto focus, paste support, and accessibility.
Author: Makozi Marizu-Ibewiro
Latest version: 1.0.0

# @makozi/react-input-otp

A stylized OTP (One Time Password) input component for React with **auto-focus**, **paste support**, and **accessibility**.

---

## Features

- Multiple input fields for OTP digits
- Auto-focus and keyboard navigation
- Paste support (entire OTP at once)
- Accessible with screen readers
- Customizable length and styling

---

## Installation

```bash
npm install @makozi/react-input-otp

```

or with yarn:

```bash
yarn add @makozi/react-input-otp

```



## Usage

```
import React, { useState } from 'react';
import { InputOTP } from '@makozi/react-input-otp';

const App = () => {
  const [otp, setOtp] = useState('');

  return (
    <div>
      <h2>Enter OTP</h2>
      <InputOTP
        length={6}
        onChange={(value) => setOtp(value)}
        autoFocus
      />
      <p>Current OTP: {otp}</p>
    </div>
  );
};


export default App;

```



## Props

| Prop       | Type     | Default | Description                              |
|------------|----------|---------|------------------------------------------|
| length     | number   | 6       | Number of OTP digits                     |
| onChange   | function | -       | Callback with concatenated OTP value     |
| autoFocus  | boolean  | true    | Auto focus first input on mount          |
| className  | string   | -       | Custom wrapper class for styling         |

## Styling

Each input is styled with a default width, height, border, and font size.
You can override styles by passing a className to the component and targeting the input fields.
Example (CSS)

```
.my-otp-wrapper input {
  border-color: #0078d4;
  background: #f0f6ff;
}
```


## HomePage

Project Home: [https://github.com/makozi/react-input-otp](https://github.com/makozi/react-input-otp)


## Repository

Repository: [https://github.com/makozi/react-input-otp](https://github.com/makozi/react-input-otp)


## License

MIT © Makozi Marizu-Ibewiro
npm package: @makozi/react-qr-code-generator
Description: A customizable QR Code generator with support for logos, SVG/Canvas, and colors for React.
Author: Makozi Marizu-Ibewiro
Latest version: 1.0.2


# React QR Code Generator

Generate customizable QR codes in your React applications with ease.

---

## Features

- Generate QR codes from any string or URL
- Customizable size, color, and error correction level
- Lightweight and fast
- Easy integration with React
- TypeScript support

---

## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [API Reference](#api-reference)
- [Options](#options)
- [Styling](#styling)
- [Contributing](#contributing)
- [License](#license)

---

## Installation

```bash
npm install @makozi/react-qr-code-generator
```

---

## Usage

Import and use the `QRCodeGenerator` component:

```tsx
import React from 'react';
import { QRCodeGenerator } from '@makozi/react-qr-code-generator';

const App = () => (
  <div>
    <h2>Scan this QR code:</h2>
    <QRCodeGenerator
      value="https://example.com"
      size={200}
      bgColor="#ffffff"
      fgColor="#000000"
      level="M"
    />
  </div>
);

export default App;
```

---

## API Reference

### `<QRCodeGenerator />`
Renders a QR code SVG for the provided value.

#### Props
- `value` (`string`, required): The data to encode in the QR code
- `size` (`number`, optional): Size of the QR code in pixels (default: 128)
- `bgColor` (`string`, optional): Background color (default: `#fff`)
- `fgColor` (`string`, optional): Foreground color (default: `#000`)
- `level` (`string`, optional): Error correction level (`L`, `M`, `Q`, `H`) (default: `M`)

---

## Options

| Option    | Type     | Description                                   | Default   |
|-----------|----------|-----------------------------------------------|-----------|
| value     | string   | Data to encode in the QR code                 | —         |
| size      | number   | Size of the QR code in pixels                 | 128       |
| bgColor   | string   | Background color                             | #fff      |
| fgColor   | string   | Foreground color                             | #000      |
| level     | string   | Error correction level (L, M, Q, H)           | M         |

---

## Styling

The QR code is rendered as an SVG. You can style the container or SVG using CSS as needed.

---

## Contributing

Contributions are welcome! Please open issues or submit PRs for improvements or bug fixes.

---

## License

MIT © Makozi Marizu-Ibewiro

---

## Repository

[https://github.com/makozi/react-qr-code-generator](https://github.com/makozi/react-qr-code-generator)

## Homepage

[https://github.com/makozi/react-qr-code-generator](https://github.com/makozi/react-qr-code-generator)
npm package: @makozi/react-user-avatar-generator
Description: Dynamically generates placeholder avatars using initials, random colors, or uploaded images.
Author: Makozi Marizu-Ibewiro
Latest version: 1.0.1

# @makozi/react-user-avatar-generator

Dynamically generates placeholder avatars using initials, random colors, or uploaded images. Ideal for social platforms and apps with profiles.

## Features

- Generate avatars from **initials** or **uploaded images**
- Random background colors or custom themes
- Supports **circle** or **square** shapes
- Auto fallback to initials if image fails
- **SVG/Canvas**-ready
- Lightweight and customizable

---

## Installation

```bash
npm install @makozi/react-user-avatar-generator
```

# or

```
yarn add @makozi/react-user-avatar-generator
```

## Usage

```
import { Avatar } from "@makozi/react-user-avatar-generator";

export default function App() {
  return (
    <div>
      <Avatar name="John Doe" size={60} />
      <Avatar name="Jane Smith" src="https://example.com/avatar.jpg" size={60} shape="square" />
    </div>
  );
}
```

## Props

| Prop            | Type                      | Default     | Description                        |
|-----------------|--------------------------|-------------|------------------------------------|
| name            | string                    | "User"      | Name used to generate initials     |
| src             | string                    | null        | Image URL to display               |
| size            | number                    | 50          | Avatar size in pixels              |
| shape           | "circle" or "square"      | "circle"    | Shape of the avatar                |
| backgroundColor | string                    | random      | Background color                   |
| textColor       | string                    | #fff        | Initials text color                |
| fontSize        | number                    | 18          | Font size for initials             |
| style           | object                    | {}          | Custom CSS styles                  |



## HomePage

Project Home: [https://github.com/makozi/react-user-avatar-generator](https://github.com/makozi/react-user-avatar-generator)


## Repository

Repository: [https://github.com/makozi/react-user-avatar-generator](https://github.com/makozi/react-user-avatar-generator)


## License

MIT © Makozi Marizu-Ibewiro
npm package: @makp0/arc-cli
Description: A CLI for the Arc Browser
Author: Georgi Gardev
Latest version: 0.1.2

# arc-cli

`arc-cli` is a command line interface for the [Arc Browser](https://arc.net/).
This project is not affiliated with Arc Browser or The Browser Company


# Installation

Required: NodeJS

```
npm install -g @georgesg/arc-cli
```

# Usage

```
arc-cli [command]

Commands:
  arc-cli arc-version                      Show Arc version
  arc-cli list-spaces                      List spaces             [aliases: ls]
  arc-cli select-space <space-id>          Select a space          [aliases: s]
  arc-cli select-space-name <space-name>   Select a space by name  [aliases: sn]
  arc-cli list-tabs                        List tabs               [aliases: lt]
  arc-cli new-tab <url>                    Open URL in a new tab   [aliases: nt]
  arc-cli select-tab <window-id> <tab-id>  Select tab              [aliases: st]
  arc-cli reload-tab <window-id> <tab-id>  Reload tab              [aliases: rt]
  arc-cli close-tab <window-id> <tab-id>   Close tab               [aliases: ct]
  arc-cli new-little-arc <url>             Open URL in a new Little Arc window
                                                                  [aliases: nla]

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]
```

# Credits

Inspired by and reusing some code from the [Racyast Arc extension](https://www.raycast.com/the-browser-company/arc).
npm package: @makpo/playwright-i18next-fixture
Description: <div align="center">   <br>   <header>     <img src="https://github.com/cubanducko/playwright-i18next-fixture/blob/main/assets/logo.png?raw=true" height="64" />   </header>   <br>   <h1>playwright-i18next-fixture</h1>   <p> 📝 Use your `i18next` translati
Author: Ricardo Domínguez
Latest version: 1.0.2

<div align="center">
  <br>
  <header>
    <img src="https://github.com/cubanducko/playwright-i18next-fixture/blob/main/assets/logo.png?raw=true" height="64" />
  </header>
  <br>
  <h1>playwright-i18next-fixture</h1>
  <p> 📝 Use your `i18next` translations in <strong>Playwright</strong> to create multi-language selectors</p>
</div>

<div align="center">

[![Build Status][build-badge]][build-link]
[![Code Style][prettier-badge]][prettier-link]
[![Package Version][npm-badge]][npm-link]
[![MIT License][license-badge]][license-link]

</div>

<br>

## 🚀 Use case

<p>Selecting by text can be a problem with e2e testing. Tying your expectations to text can led to problems with multi-language pages.
<p>With the power <code>i18next</code> and fixtures we can easily create multi-language selectors by defining keys for our text selectors</p>

<br>

## 🌱 Installation

```bash
# Yarn
yarn add --dev playwright-i18next-fixture

# PNPM
pnpm add --D playwright-i18next-fixture

# NPM
npm install --save-dev playwright-i18next-fixture

```

<br>

## 📝 Usage

Create the `i18next` instance as you would in your browser

```ts
import { test as base } from "@playwright/test";
import { createI18nFixture, getI18nInstance } from "playwright-i18next-fixture";

const i18nFixture = createI18nFixture({
  // i18n plugins
  plugins: [ ... ]
  // i18n configuration options
  options: {
    lng: 'en',
    resources: { ... }
  },
  // Fetch translations in every test or fetch once
  // Default: true
  cache: false
  // Run as auto fixture to be available through all tests by getI18nInstance()
  // Default: true
  auto: true
})

const test = base.extend(i18nFixture);

// Context is now shared
test("my test", async ({ i18n, t }) => {});

// If auto is enabled, you can also use the manual fn
// This is useful to inject directly in classes
class ExampleClass {
   readonly i18n: i18n = getI18nInstance()
}
```

<br>

## LICENSE

MIT

[license-badge]: https://img.shields.io/badge/License-MIT-yellow.svg
[license-link]: https://opensource.org/licenses/MIT
[npm-badge]: https://img.shields.io/npm/v/playwright-i18next-fixture
[npm-link]: https://www.npmjs.com/package/playwright-i18next-fixture
[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?logo=prettier
[prettier-link]: https://prettierjs.org/en/download/
[build-badge]: https://github.com/cubanducko/playwright-i18next-fixture/actions/workflows/build.yml/badge.svg
[build-link]: https://github.com/cubanducko/playwright-i18next-fixture/actions/workflows/build.yml
npm package: @maks11060/ed25519-verify-request
Description: Request validation using the Ed25519 algorithm
Author: MAKS11060
Latest version: 0.0.5

# Ed25519 Verify request

[Request] validation using the Ed25519 algorithm.

## Usage
```ts
import {verify, getCryptoKey} from '@maks11060/ed25519-verify-request'

const publicKey = env['PUBLIC_KEY']
const cryptoKey = await getCryptoKey(publicKey) 

if (await verify(request, cryptoKey)) {
  return new Response('Verify')
}
```

## Example
```ts
import {verify, getCryptoKey} from '@maks11060/ed25519-verify-request'

const request = new Request(new URL('https://localhost.com'), {
  method: 'POST',
  headers: {
    'X-Signature-Ed25519': '99c4903df0b00ac32ba158db956ee39586adf05fea6be714055ac79a80bfd9dff59399b7da01ced95d0a252daee6bdb07e5f59cc546322bb779fd749b04f170c',
    'X-Signature-Timestamp': '202204091535',
  },
  body: new TextEncoder().encode('testmessage'),
})

const publicKey = '9c7d775851a98ceb09a80928c1f8ff56706a0f5d91d841c72850fcd92e065b8f'
const cryptoKey = await getCryptoKey(publicKey)

await verify(request, cryptoKey) // true
```

## Api

* `getCryptoKey()` Import **Ed25519** Public key to [CryptoKey]

* `verify(request, key)` return **Boolean**


[Request]: https://developer.mozilla.org/ru/docs/Web/API/Request
[CryptoKey]: https://developer.mozilla.org/en-US/docs/Web/API/CryptoKey
npm package: @maks1mio/pulsesync-uikit
Description: PulseSync UI Kit — shared component library for PulseSync apps
Latest version: 1.1.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# PulseSync UIKit

Библиотека UI-компонентов для экосистемы PulseSync. React-компоненты с SCSS-модулями, дизайн-токенами и анимациями.

## Установка

```bash
npm install @maks1mio/pulsesync-uikit
```

**Peer-зависимости:** `react`, `react-dom`, `framer-motion` (опционально).

## Использование

```tsx
import { Button, Input, PulseSyncUIProvider } from '@maks1mio/pulsesync-uikit'
import '@maks1mio/pulsesync-uikit/styles'

function App() {
  return (
    <PulseSyncUIProvider>
      <Button variant="primary">Кнопка</Button>
      <Input placeholder="Поле ввода" />
    </PulseSyncUIProvider>
  )
}
```

## Компоненты

| Компонент | Описание |
|-----------|----------|
| **Accordion** | Раскрывающиеся секции |
| **Avatar** | Аватар с группой и индикатором статуса |
| **Badge** | Бейджи и теги |
| **Button** | Кнопки: primary, secondary, ghost, outline |
| **ColorPicker** | Выбор цвета |
| **ConfirmModal** | Модальное окно подтверждения |
| **DropdownMenu** | Вложенное выпадающее меню |
| **FilePicker** | Выбор файлов |
| **Input** | Поле ввода |
| **NavigationBar** | Вертикальная панель навигации |
| **NavLink** | Ссылка для роутера |
| **OptionPicker** | Выбор опций |
| **Pagination** | Пагинация |
| **PromptModal** | Модальное окно с вводом |
| **Select** | Выпадающий список |
| **Skeleton** | Заглушка загрузки |
| **Slider** | Слайдер |
| **Tabs** | Вкладки |
| **TextInput** | contentEditable-поле |
| **Toast** | Уведомления |
| **Toggle** | Переключатель |
| **Tooltip** | Всплывающая подсказка |
| **UserCard** | Карточка пользователя |
| **UserMenu** | Меню профиля |
| **UserMention** | Упоминание пользователя |

## Дизайн-токены

Библиотека использует CSS-переменные из `tokens.css`. Их можно переопределить в своём приложении.

## Публикация

**Выпуск версии:**
```bash
git tag v1.0.0
git push origin v1.0.0
```

```bash
npm run release:local           # текущая версия из package.json
npm run release:local -- 1.0.0  # указать версию
```

## Лицензия

MIT
npm package: @maks1ms/forgejo-js
Description: [![NPM Version](https://img.shields.io/npm/v/forgejo-js)](https://www.npmjs.com/package/forgejo-js) [![NPM Types](https://img.shields.io/npm/types/forgejo-js)](https://www.npmjs.com/package/forgejo-js/) [![NPM license](https://img.shields.io/npm/l/forgejo
Author: Anbraten
Latest version: 11.0.0

# Forgejo-js api client with Typescript support

[![NPM Version](https://img.shields.io/npm/v/forgejo-js)](https://www.npmjs.com/package/forgejo-js)
[![NPM Types](https://img.shields.io/npm/types/forgejo-js)](https://www.npmjs.com/package/forgejo-js/)
[![NPM license](https://img.shields.io/npm/l/forgejo-js)](https://codeberg.org/anbraten/forgejo-js/src/branch/main/LICENSE)
[![CI status badge](https://ci.codeberg.org/api/badges/13958/status.svg)](https://ci.codeberg.org/repos/13958)

Forgejo-js is an api client automatically created from the official [OpenAPI definition](https://codeberg.org/swagger.v1.json) of Forgejo. The client uses the [Fetch Api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) (native browser support) to make requests. For node you can use [cross-fetch](https://www.npmjs.com/package/cross-fetch) to polyfill the Fetch Api.

> For Gitea you can use [gitea-js](https://github.com/anbraten/gitea-js).

## Version mapping

The major and minor version of this library is mapped to the version of the Forgejo api. The patch version of this library is incremented for every release and uses the latest patch version of Forgejo.

| Forgejo-js | Forgejo |
| ---------- | ------- |
| 11.0.x     | 11.0    |
| 9.0.x      | 9.0     |

## Examples

### Browser

```ts
import { forgejoApi } from 'forgejo-js';

const api = forgejoApi('https://codeberg.org/', {
  token: 'access-token', // generate one at https://forgejo.example.com/user/settings/applications
});

const repo = api.repos.repoGet('anbraten', 'forgejo-js');
console.log(repo);
```

### Node.js

```js
const { forgejoApi } = require('forgejo-js');
const fetch = require('cross-fetch'); // You have to use a fetch compatible polyfill like cross-fetch for older Node.JS versions

const api = forgejoApi('https://codeberg.org/', {
  token: 'access-token', // generate one at https://forgejo.example.com/user/settings/applications
  customFetch: fetch,
});

const repo = api.repos.repoGet('anbraten', 'forgejo-js');
console.log(repo);
```
npm package: @maks1ms/nestjs-telegraf
Description: Telegraf module for NestJS
Author: Hypeer
Latest version: 2.7.1

# NestJS Telegraf ![npm](https://img.shields.io/npm/dm/@maks1ms/nestjs-telegraf) ![GitHub last commit](https://img.shields.io/github/last-commit/maks1ms/nestjs-telegraf) ![NPM](https://img.shields.io/npm/l/@maks1ms/nestjs-telegraf)

<img align="right" width="95" height="148" title="NestJS logotype"
     src="https://nestjs.com/img/logo-small.svg">

NestJS Telegraf – powerful solution for creating Telegram bots.

This package uses the best of the NodeJS world under the hood. [Telegraf](https://github.com/telegraf/telegraf) is the most powerful library for creating bots and [NestJS](https://github.com/nestjs) is a progressive framework for creating well-architectured applications. This module provides fast and easy way for creating Telegram bots and deep integration with your NestJS application. 

**Features**

- Simple. Easy to use.
- Ton of decorators available out of the box for handling bot actions.
- Ability to create custom decorators.
- Scenes support.
- Telegraf plugins and custom plugins support.
- Ability to run multiple bots simultaneously.
- Full support of NestJS guards, interceptors, filters and pipes!

## Installation

```bash
$ npm i @maks1ms/nestjs-telegraf telegraf
```

## Documentation
Check out the [documentation site](https://nestjs-telegraf-maks1ms.vercel.app).