open-index/open-npm huggingface dataset:
npm package: @iamhanson/view-bigimg
Description: purejs image viewer
Author: newming
Latest version: 1.0.2

# view-bigimg

a pure library for zooming and panning your web images

[demo](http://newming.cn/view-bigimg/demo/)

## Features

- Support touch devices
- Smooth dragging and panning images
- Pinch in / Pinch out to zoom in/ zoom out

## How to use

#### A. with inline script

```html
<link rel="stylesheet" href="view-bigimg.css">
<script src="view-bigimg.js"></script>
<script>
  var viewer = new ViewBigimg()

  var wrap = document.getElementById('wrap')
  wrap.onclick = function (e) {
    if (e.target.nodeName === 'IMG') {
      viewer.show(e.target.src.replace('.jpg', '-big.jpg'))
    }
  }
</script>
```

#### B. with npm

```bash
npm i view-bigimg
```

```js
import 'view-bigimg/lib/view-bigimg.css'
import ViewBigimg from 'view-bigimg'

var viewer = new ViewBigimg
viewer.show(imgsrc)
```

## API

- new ViewBigimg(options)
  - show(imgsrc)
  - destroy()

### new ViewBigimg(options)

Creates an instance of ViewBigimg

| Param | Type | Default | Description |
| ---- | ---- | ---- | ---- |
| options | Object | {} | options |
| options.zoomValue | Number | 100 | default zoom size |
| options.maxZoom | Number | 500 | maxium zoom size |
| options.refreshOnResize | Boolean | true | whether refresh when window resize, default is true |
| options.zoomOnMouseWheel | Boolean | true | enable mousewheel to zoom images |
npm package: @iamhaymc/svgpptr
Description: A tool for creating, modifying, and rendering SVG images.
Author: iamhaymc
Latest version: 1.0.1-alpha

# svgpptr

A tool for creating, modifying, and rendering SVG images.

It is powerful and heavy as hell because it is based on Puppeteer.

## Installation

```
npm i -g @iamhaymc/svgpptr
```

## Usage

```
svgpptr --input images/**/*.svg --render
```

## Options

| Name       | Summary                                     |
| ---------- | ------------------------------------------- |
| `--input`  | A glob to the input files                   |
| `--kernel` | A path to an input transformation script    |
| `--pretty` | A toggle for input formatting               |
| `--terse`  | A toggle for input minification             |
| `--write`  | A toggle for input replacement              |
| `--render` | A toggle for input rendering                |
| `--width`  | A render width to use if otherwise unknown  |
| `--height` | A render height to use if otherwise unknown |
| `--output` | A path to the output folder                 |
| `--debug`  | A toggle for verbose diagnostics            |
npm package: @iamhoonse-js/browser-utils
Description: Browser utilities for various tasks including string manipulation, DOM operations, and MSW integration, and more.
Author: iamhoonse-dev
Latest version: 0.0.1

# 🌐 Browser Utils

## 📖 개요

`browser-utils` 패키지는 브라우저 환경에서 유용하게 사용할 수 있는 유틸리티 함수와 도구를 제공해요. 이 패키지는 브라우저 관련 작업을 단순화하고, 코드 재사용성을 높이는 데 중점을 두고 있어요.

## 📦 제공 기능

- **[DOM](src/dom)**: 브라우저 DOM 조작을 위한 유틸리티 함수 제공해요.
- **[MSW](src/msw)**: Mock Service Worker와 관련된 유틸리티를 제공해요.
- **[String](src/string)**: 문자열 처리와 관련된 유틸리티 함수 제공해요.

## ⬇️ 설치

### pnpm 설치

```bash
pnpm add @your-org/browser-utils
```

## 🧑‍💻 사용법

```tsx
import React from "react";
import { alertHelloWorld } from "@your-org/browser-utils/dom";

const HelloWorldButton: React.FC = () => {
  return <button onClick={alertHelloWorld}>Click me to see Hello World</button>;
};

export default HelloWorldButton;
```

## 🤝 기여

이 패키지에 기여하려면, [CONTRIBUTING.md](../../CONTRIBUTING.md)를 참조해 주세요.

## 📜 라이선스

이 프로젝트는 MIT 라이선스 하에 배포돼요.
npm package: @iamhoonse-js/eslint-plugin-sample
Description: This is a sample plugin.
Author: iamhoonse-dev
Latest version: 0.0.1

# eslint-plugin-sample

This is a sample plugin.

## Installation

You'll first need to install [ESLint](https://eslint.org/):

```sh
npm i eslint --save-dev
```

Next, install `eslint-plugin-sample`:

```sh
npm install eslint-plugin-sample --save-dev
```

## Usage

In your [configuration file](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file), import the plugin `eslint-plugin-sample` and add `sample` to the `plugins` key:

```js
import sample from "eslint-plugin-sample";

export default [
  {
    plugins: {
      sample,
    },
  },
];
```

Then configure the rules you want to use under the `rules` key.

```js
import sample from "eslint-plugin-sample";

export default [
  {
    plugins: {
      sample,
    },
    rules: {
      "sample/rule-name": "warn",
    },
  },
];
```

## Configurations

<!-- begin auto-generated configs list -->

TODO: Run eslint-doc-generator to generate the configs list (or delete this section if no configs are offered).

<!-- end auto-generated configs list -->

## Rules

<!-- begin auto-generated rules list -->

| Name                                     | Description                                        |
| :--------------------------------------- | :------------------------------------------------- |
| [no-new-date](docs/rules/no-new-date.md) | Rule for detecting any usage of new Date() syntax. |

<!-- end auto-generated rules list -->
npm package: @iamhoonse-js/node-utils
Description: Node.js utilities for various tasks including file system operations, process management, and more.
Author: iamhoonse-dev
Latest version: 0.0.1

# 🛠️ Node Utils

## 📖 개요

`node-utils` 패키지는 Node.js 환경에서 사용할 수 있는 다양한 유틸리티 함수들을 제공하는 내부 패키지예요. 이 패키지는 파일 시스템 작업, MSW(Mock Service Worker) 설정, 그리고 기타 다양한 유틸리티 함수들을 모아 Node.js 개발을 단순화하도록 설계되었어요.

## 📦 제공 기능

- **[fs](./src/fs)**: 파일 시스템 관련 유틸리티 함수들을 제공해요.
- **[msw](./src/msw)**: API 목업을 위한 MSW 관련 유틸리티 함수들을 제공해요.
- **[misc](./src/misc)**: 기타 유용한 유틸리티 함수들을 제공해요.

## ⬇️ 설치

### pnpm 설치

```bash
pnpm add @your-org/node-utils
```

## 🧑‍💻 사용법

### fs 모듈 사용 예시

```typescript
import { ls } from "@your-org/node-utils/fs";

// 현재 디렉토리의 파일 및 폴더 목록 가져오기
const fileList = ls();
console.log("현재 디렉토리 파일 목록:", JSON.stringify(fileList, null, 2));
```

### msw 모듈 사용 예시

```typescript
import { initMockServer } from "@your-org/node-utils/msw";
import rootHandlers from "@your-org/http-clients/mocks";

// Mock 서버 설정 함수
async function setupMockServer() {
  // 환경 변수나 설정에 따라 MSW 활성화 여부 확인
  const USE_MSW = process.env.NEXT_PUBLIC_API_MOCKING === "enabled";

  if (!USE_MSW) return;

  // Mock 서버 초기화 및 핸들러 등록
  await initMockServer(rootHandlers);

  console.log("Mock 서버가 시작되었어요.");
}
```

### misc 모듈 사용 예시

```typescript
import { isInNodeRuntime } from "@your-org/node-utils/misc";

// 현재 Node.js 런타임에서 실행 중인지 확인
if (isInNodeRuntime()) {
  // Node.js 환경에서만 실행할 코드
}
```

## 🤝 기여

이 패키지에 기여하려면, [CONTRIBUTING.md](../../CONTRIBUTING.md)를 참조해 주세요.

## 📜 라이선스

이 프로젝트는 MIT 라이선스 하에 배포돼요.
npm package: @iamhoonse-js/react-ui
Description: React design system components built with shadcn/ui, providing a set of reusable UI components and utilities for building modern web applications.
Author: iamhoonse-dev
Latest version: 0.0.1

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    "react-x": reactX,
    "react-dom": reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs["recommended-typescript"].rules,
    ...reactDom.configs.recommended.rules,
  },
});
```
npm package: @iamhoonse-js/react-utils
Description: React utilities including hooks, higher-order components (HOCs), and providers for various tasks such as state management, event handling, and more.
Author: iamhoonse-dev
Latest version: 0.0.1

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default tseslint.config({
  extends: [
    // Remove ...tseslint.configs.recommended and replace with this
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    // other options...
    parserOptions: {
      project: ["./tsconfig.node.json", "./tsconfig.app.json"],
      tsconfigRootDir: import.meta.dirname,
    },
  },
});
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from "eslint-plugin-react-x";
import reactDom from "eslint-plugin-react-dom";

export default tseslint.config({
  plugins: {
    // Add the react-x and react-dom plugins
    "react-x": reactX,
    "react-dom": reactDom,
  },
  rules: {
    // other rules...
    // Enable its recommended typescript rules
    ...reactX.configs["recommended-typescript"].rules,
    ...reactDom.configs.recommended.rules,
  },
});
```
npm package: @iamhunter/temperature-converter
Description: A simple and flexible temperature converter for Node.js and the browser, with support for a wide range of temperature scales, including Celsius, Fahrenheit, Kelvin, and Newton.
Author: Andrew Hunter
Latest version: 1.0.3

# Temperature Converter

A simple and flexible temperature converter for Node.js and the browser, with support for a wide range of temperature scales, including Celsius, Fahrenheit, Kelvin, and Newton.

## Installation

You can install the package via npm:

```bash
npm install @iamhunter/temperature-converter
```

## Usage

```javascript
import { convertTemperature, TemperatureScale } from "@iamhunter/temperature-converter";

const temperature = 20;
const fromUnit: TemperatureScale = "C";
const toUnit: TemperatureScale = "F";

const convertedTemperature = convertTemperature(temperature, fromUnit, toUnit);

console.log(`${temperature} ${fromUnit} is ${convertedTemperature} ${toUnit}.`);
// Output: 20 C is 68 F.
```

## Supported Temperature Scales

The temperature converter supports the following temperature scales:

-   Celsius (C)
-   Fahrenheit (F)
-   Kelvin (K)
-   Newton (N)

## License

This package is open source and available under the MIT License.
npm package: @iaminiamin/lang-text-detect
Description: Simple offline-first text language detector with optional LibreTranslate fallback.
Latest version: 0.1.1

# lang-text-detect

Simple offline-first language detection for short text.

Website: https://livetalktranslate.com/

- Default: local detection (no paid API, no network).
- Optional fallback: LibreTranslate `/detect`.
- Works in Node.js 18+.

## Install

```bash
npm install @iaminiamin/lang-text-detect
```

## Usage (JS)

```js
import { detectLanguage } from "@iaminiamin/lang-text-detect";

const result = await detectLanguage("hola gracias por tu ayuda");
console.log(result);
// { language: 'es', confidence: 0.95, source: 'local', ... }
```

## Usage with fallback (LibreTranslate)

```js
import { detectLanguage } from "@iaminiamin/lang-text-detect";

const result = await detectLanguage("blorpt zibble flargh", {
  remoteUrl: "https://your-libretranslate-host",
  minConfidence: 0.8
});
```

## CLI

```bash
lang-text-detect "bonjour merci beaucoup"
lang-text-detect "hola gracias" --json
echo "blorpt zibble flargh" | lang-text-detect --remote-url https://your-libretranslate-host --json
```

## API

### `detectLanguage(text, options?)`

Returns best result. Uses local detection first, then optional remote fallback.

Options:
- `remoteUrl?: string`
- `remoteApiKey?: string`
- `minConfidence?: number` (default `0.65`)
- `timeoutMs?: number` (default `2500`)
- `fetchImpl?: typeof fetch` (for testing/custom runtime)

### `detectLanguageLocal(text)`

Local-only detection (fast, no network).

### `detectWithLibreTranslate(text, options)`

Remote-only detection using LibreTranslate `/detect`.

## Output shape

```js
{
  language: "es",           // ISO-639-1 or "und"
  confidence: 0.95,         // 0..1
  source: "local",          // "local" | "libretranslate"
  candidates: [
    { language: "es", confidence: 0.95 }
  ]
}
```

## Notes

- This package is intentionally lightweight.
- Local detection is heuristic-based; for production-grade accuracy, use remote fallback.
npm package: @iamit-team/react-scripts
Description: @iamit-team Configuration and scripts for Create React App.
Latest version: 3.3.0

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @iamit-work/react-scripts
Description: @iamit-work Configuration and scripts for Create React App.
Latest version: 3.4.1

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
npm package: @iamjaime/web3modal-angular
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6.
Latest version: 1.3.0

# Web3modal

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.1.6.

## Code scaffolding

Run `ng generate component component-name --project web3modal` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project web3modal`.
> Note: Don't forget to add `--project web3modal` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build web3modal` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build web3modal`, go to the dist folder `cd dist/web3modal` and run `npm publish`.

## Running unit tests

Run `ng test web3modal` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @iamjam/envclass
Description: Turns .env-like files into TypeScript and JavaScript class files usable in Next.js
Author: Maetel
Latest version: 0.2.9

## envclass

- Generates environment class from .env file for Next.js
- Use ENV_PUBLIC for client code, then ENV_SERVER for server side.

- When ENV_SERVER is used on the client side, it will throw an error.
- When following env variables are not added to .env file, it will throw an error before build

#### Install

```bash
npm i -D @iamjam/envclass
```

Then add following script to package.json

```json
{
  "scripts": {
    "envclass": "envclass"
  }
}
```

Finally, run the script

```bash
npm run envclass
```

To generate default options, run

```bash
npx envclass --init
```

For JS transpilation, run

```bash
npx envclass --transpile
# or add to package.json
{
  "scripts": { "envclass": "envclass --transpile" }
}
```

For help, run

```bash
npx envclass -- --help
```

#### Usage

- #1. write variables on .env file

```bash
# client side
NEXT_PUBLIC_COOKIE_NAME=cookie_name

# server side
SERVER_URL=http://localhost:3000

# set NEXT_PUBLIC_ENVIRONMENT as 'dev', 'qa', 'prod', so that a variable can vary as per the environment
# This will set "ENV_PUBLIC.IS_DEV" as true
NEXT_PUBLIC_ENVIRONMENT=dev

# Referring to the 'NEXT_PUBLIC_ENVIRONMENT' variable, following variables will be generated as ENV_SERVER.VARIABLE.
# This comes in handy on controlling SERVER_URL
VARIABLE_DEV=variable_dev
VARIABLE_QA=variable_qa
VARIABLE_PROD=variable_prod

# usable in process.env, but will not be in ENV_SERVER
@env-ignore
IGNORED_VARIABLE=ignored

# or ignore in block
@env-ignore-start
IGNORED_VARIABLE1=ignored_as_well
IGNORED_VARIABLE2=ignored_as_well
@env-ignore-end

# even if it's not defined in .env files, don't throw error on build time
# add the prefix : NULLABLE_
NULLABLE_VARIABLE=nullable
```

- #2. Use it in Next.js

```ts
// Client side
import { ENV_PUBLIC } from "./envclass";

const Component = () => {
  return <div>{ENV_PUBLIC.NEXT_PUBLIC_COOKIE_NAME}</div>;
};
```

// Server side

```ts
import { ENV_SERVER } from "./envclass";
export const getServerSideProps = () => {
  const serverUrl = ENV_SERVER.SERVER_URL;
  fetch(serverUrl);
};
```
npm package: @iamjoseph/react-scripts
Description: Configuration and scripts for Create React App.
Latest version: 1.4.3

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @iamjrtilak/bored
Description: CLI to create boilerplate codes
Author: iamjrtilak
Latest version: 0.1.1

## BORED

Created a template cloner CLI called bored to automate the process of creating a new project from a template.

### Usage

```
npx @iamjrtilak/bored@latest clone <template-name> <directory>
```

###Example

```
npx @iamjrtilak/bored@latest clone vite-react-ts .
```
npm package: @iamkenos/ellie
Description: An abstraction of the popular WebdriverIO test automation framework
Author: iamkenos
Latest version: 2.0.4

<h1 align="center">ELLIE</h1>

<p align="center">
  <a href="./docs/SEEDED_STEPS.md">Steps</a> |
  <a href="./docs/DETAILED_GUIDE.md">Detailed Guide</a> |
  <a href="./docs/RELEASES.md">Releases</a>
</p>

---

## About

An abstraction of the popular [WebdriverIO](https://webdriver.io/) test automation framework.

Key features:

- write tests with [TypeScript](https://www.typescriptlang.org/docs/handbook/modules.html) and [Cucumber](https://cucumber.io/docs/guides/overview/)
- cucumber steps that can be used out of the box
- run tests synchronously and present results in [Allure](https://webdriver.io/docs/allure-reporter.html)
- internal polling and retries when interacting with the browser and its elements

Check out the [steps](./docs/SEEDED_STEPS.md) readily available for you to use and know more by going through the [detailed guide](./docs/DETAILED_GUIDE.md).

## Requirements

- NodeJS _`12.18.3`_ or higher
- JDK

## Get Started

1. Get it

   `npm install @iamkenos/ellie`

2. Try it

   `npx ellie whistle`

3. Run it

   `npx ellie ./samples/ellie.conf.ts`

## Acknowledgements

Huge thanks to the [WebdriverIO team](https://github.com/webdriverio/webdriverio/blob/master/AUTHORS.md) for their awesome work!

## Contribute

Pull requests are welcome, you can find the backlog / roadmap [here](https://github.com/iamkenos/ellie/projects/1). Fork the repo and raise away!

## License

MIT
npm package: @iamkenos/fragile
Description: A mocking framework powered by Express, designed to serve mock HTTP/s responses.
Author: iamkenos
Latest version: 0.2.1

<h1 align="center">FRAGILE</h1>

<p align="center">
  <a href="./docs/DETAILED_GUIDE.md">Detailed Guide</a> |
  <a href="./docs/RELEASES.md">Releases</a>
</p>

---

## About

A mocking framework powered by [Express](https://expressjs.com/), designed to serve mock HTTP/s responses.

Key features:

- write mocks with [TypeScript](https://www.typescriptlang.org/docs/handbook/modules.html)
- http / https support using a unified port
- proxy requests to another target
- record responses returned by a proxy and output as a mock response module
- serve static files
- rate limit
- xml content type request parsing
- response delays

Know more by going through the [detailed guide](./docs/DETAILED_GUIDE.md).

## Requirements

- NodeJS _`14.16.1`_ or LTS

## Get Started

1. Get it

   `npm install @iamkenos/fragile`

2. Try it

   `npx fragile samples`

3. Run it

   `npx fragile ./samples/fragile.conf.ts`

## License

MIT
npm package: @iamkhan21/base-utils
Description: Utils which usually used in my projects
Author: Ivan Khanevich
Latest version: 1.0.4

# @iamkhan21/base-utils [![NPM version](https://img.shields.io/npm/v/@iamkhan21/base-utils?color=a1b858&label=)](https://www.npmjs.com/package/@iamkhan21/base-utils)

Utils which usually used in my projects


## License
[MIT](./LICENSE) License © 2022 [Ivan Khanevich](https://github.com/iamkhan21)
npm package: @iamkhan21/fxform
Description: Reactive forms based on effector and zod
Author: Ivan Khanevich
Latest version: 2.4.0

# @iamkhan21/fxform [![NPM version](https://img.shields.io/npm/v/@iamkhan21/fxform?color=a1b858&label=)](https://www.npmjs.com/package/@iamkhan21/fxform)

Reactive forms based on effector and zod


## Usage example

```ts
import { z, ZodLiteral, type ZodNumber, type ZodString } from "zod";
import { createForm } from "@iamkhan21/fxform";


/**
 * email: ["", z.string().trim().email()] as [string, ZodString]
 * email - Name of field
 * '' - initial value
 * z.string().trim().email() - zod validation scheme
 */
const formData = {
  email: ["", z.string().trim().email()] as [string, ZodString],
  age: [null, z.number().gte(18)] as [number | null, ZodNumber],
  agreeWithRules: [false, z.literal(true)] as [boolean, ZodLiteral<true>],
};

const form = createForm(formData);
```


## License

[MIT](./LICENSE) License © 2022 [Ivan Khanevich](https://github.com/iamkhan21)
npm package: @iamkhan21/media-query-js
Description: Use same mechanics like CSS media queries in JavaScript instead ResizeObserver
Author: Ivan Khanevich
Latest version: 1.4.3

# @iamkhan21/media-query-js

Use like css media queries in code instead ResizeObserver

[![npm version](https://badgen.net/npm/v/@iamkhan21/media-query-js)](https://npm.im/@iamkhan21/media-query-js) [![npm downloads](https://badgen.net/npm/dm/@iamkhan21/media-query-js)](https://npm.im/@iamkhan21/media-query-js)

## Install

```bash
npm i @iamkhan21/media-query-js
```

## Usage

```ts
import { MediaQuery } from "@iamkhan21/media-query-js";

const query = "(max-width: 768px)";
function onChange(matches: boolean) {
  console.log(`Screen width is ${matches ? "less" : "more"} than 768px`);
}

// You will recieve match result after class initialization
const mq = new MediaQuery(query, onChange);
// For screen width more than 768px
// console.log("Screen width is more than 768px")

// Also you can subscribe and track width changes
mq.on();

// To unsubscribe call next:
mq.off();
```
npm package: @iamkiet/amethyst-ether-ui
Description: Amethyst Ether high-key minimalist editorial UI library
Author: iamkiet
Latest version: 1.0.4
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @iamkiet/amethyst-ether-ui

Amethyst Ether is a high-key minimalist editorial UI library built with React, TypeScript, and TailwindCSS. It is designed for premium, content-heavy web experiences with a focus on typography, spacing, and subtle motion.

## Features

- **High-Key Minimalism**: A clean, airy aesthetic inspired by modern editorial design.
- **Premium Components**: Built on top of Radix UI and shadcn/ui.
- **Tailwind Ready**: Fully customizable using Tailwind CSS 4.
- **Storybook Included**: Complete isolation for development and testing.

## Installation

```bash
npm install @iamkiet/amethyst-ether-ui
```

Import the styles and wrap your application (or specific section) with the `AmethystProvider`:

```tsx
import "@iamkiet/amethyst-ether-ui/style.css";
import { Button, AmethystProvider } from "@iamkiet/amethyst-ether-ui";

export function App() {
  return (
    <AmethystProvider defaultTheme="light">
      <Button variant="outline">Amethyst Ether</Button>
    </AmethystProvider>
  );
}
```

## License

MIT © [iamkiet](https://github.com/iamkiet)

## Publishing New Versions

To publish a new version of this library to GitHub Packages:

1.  **Bump the Version**: Use `npm version` to update the version number (this also creates a git tag).
    ```bash
    npm version patch  # for small fixes (1.0.1)
    npm version minor  # for new features (1.1.0)
    npm version major  # for breaking changes (2.0.0)
    ```
2.  **Build**: Ensure the latest code is compiled.
    ```bash
    npm run build
    ```
3.  **Publish**:
    ```bash
    npm publish
    ```
4.  **Push Tags**: Push the new version information to GitHub.
    ```bash
    git push origin main --tags
    ```

> **Note**: You must be logged in to `https://npm.pkg.github.com` using your Personal Access Token (classic) to publish.
npm package: @iamkjw/eslint-plugin-nonewdate
Description: nonewdate
Author: nonewdate
Latest version: 0.0.2

# eslint-plugin-nonewdate

nonewdate

## Installation

You'll first need to install [ESLint](https://eslint.org/):

```sh
npm i eslint --save-dev
```

Next, install `eslint-plugin-nonewdate`:

```sh
npm install eslint-plugin-nonewdate --save-dev
```

## Usage

In your [configuration file](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file), import the plugin `eslint-plugin-nonewdate` and add `nonewdate` to the `plugins` key:

```js
import nonewdate from "eslint-plugin-nonewdate";

export default [
    {
        plugins: {
            nonewdate
        }
    }
];
```


Then configure the rules you want to use under the `rules` key.

```js
import nonewdate from "eslint-plugin-nonewdate";

export default [
    {
        plugins: {
            nonewdate
        },
        rules: {
            "nonewdate/rule-name": "warn"
        }
    }
];
```



## Configurations

<!-- begin auto-generated configs list -->
TODO: Run eslint-doc-generator to generate the configs list (or delete this section if no configs are offered).
<!-- end auto-generated configs list -->



## Rules

<!-- begin auto-generated rules list -->
TODO: Run eslint-doc-generator to generate the rules list.
<!-- end auto-generated rules list -->
npm package: @iamklb/eslint-config
Description: ESLint configuration used by Kalebe Oliveira.
Latest version: 1.0.0

# ESLint config

## Whats included?

- Standard config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;

## Setup

### React (with Next.js)

Install dependencies:
```
npm i -D eslint @iamklb/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": [
    "@iamklb/eslint-config/next", 
    "next/core-web-vitals"
  ]
}
```

### React (without Next.js)

Install dependencies:
```
npm i -D eslint @iamklb/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@iamklb/eslint-config/react"
}
```

### Node.js

Install dependencies:
```
npm i -D eslint @iamklb/eslint-config
```
Inside `.eslintrc.json`
```
{
  "extends": "@iamklb/eslint-config/node"
}
```
npm package: @iamkoushik/kp-textinput
Description: This is a simple TextInput
Author: Koushik Paul
Latest version: 1.0.27

# KPTextInput

A simple react-native implementation of TextInput.

Features

  - Can be used as a Custom TextInput
  - Custom Styling
  - Supports Password show/hide
  - Supports Label Text as TextInput Label


![Image1](https://raw.githubusercontent.com/Koushik26011997/KPTextInput/koushik/kp-textinput-package/images/image1.png)

## Getting started
Install the library using either Yarn:


```
npm i @iamkoushik/kp-textinput
```

or yarn:


```
js
yarn add @iamkoushik/kp-textinput
```


### Usage
```javascript
import KPTextInput from '@iamkoushik/kp-textinput';

const App = () => {

const [value, setValue] = useState('');

  return (
    <View>
      <KPTextInput
            textboxStyle={{ height: 48, fontSize: 14, marginTop: 12 }}
            placeholder="Email Address"
            textboxvalue={value}
            type={"email-address"}
            isPassword={false}
            onChangeText={(value) => setValue(value)}
            keyboardType={"default"}
            labelplaceholder="Email Address"
          />

          <KPTextInput
            textboxStyle={{ height: 48, fontSize: 14, marginTop: 12 }}
            placeholder="Email Address"
            textboxvalue={value}
            type={"email-address"}
            isPassword={false}
            onChangeText={(value) => setValue(value)}
            keyboardType={"default"}
            editable={false} // Can't edit now
            isShowLabel={false} // Not to show the label text
          />

          <KPTextInput
            labelBackgroundColor="red"
            customlabelStyle={{ borderRadius: 3, padding: 2 }}
            labelTextColor="#fff"
            textboxStyle={{ height: 48, fontSize: 15, marginTop: 12, fontWeight: 'bold' }}
            placeholder="Password"
            textboxvalue={value}
            type={"email-address"}
            isPassword={true} // To show the TextInput as Password field
            onChangeText={(value) => setValue(value)}
            keyboardType={"default"}
            showPassword={true}
            labelplaceholder="Password"
      />
    </View>
  )
}
```

### Properties

| Name | Type | Description | Default
| ------------ | ------------- | ------------ |------------ |
| `textboxStyle` | Object  | Custom styling | {}
| ```textboxvalue``` | String  | value of the textinput | ''
| ```isPassword``` | Boolean  | To show as Password | false
| ```isShowLabel``` | Boolean  | To show the label | false
| ```showPassword``` | Boolean  | To show the eye-icon | false
| ```editable``` | Boolean  | To restrict the edit mode | false
| `onChangeText` | Function (value: String) | Function called when user start typing | null
| `labelBackgroundColor` | String | Background color of the Label text | "#fff" 
| `labelTextColor` | String | Text color of the Label | "#000" 


### Contributing

If you'd like to see something added or changed to this module please open a new GitHub issue. Pull requests are always welcome.

### License

 © Koushik Paul
npm package: @iamkrishnagupta10/empire-ui
Description: CLI for Empire UI components - AI-ready React components
Author: Empire Code Foundation
Latest version: 1.1.0

# Empire UI CLI

A command-line interface for adding Empire UI components to your Next.js projects.

## Installation

You can install the CLI globally using npm:

```bash
npm install -g @empireui/empire-ui
```

Or use it directly with npx:

```bash
npx @empireui/empire-ui <command>
```

## Commands

### Initialize Empire UI

Sets up Empire UI in your project by creating necessary configuration files and directories.

```bash
npx @empireui/empire-ui init
```

This will:

- Create `components.json` configuration file
- Set up required directories (components/ui, lib)
- Create Tailwind CSS configuration
- Add necessary CSS variables and styles

### Add Components

Add pre-built components to your project:

```bash
npx @empireui/empire-ui add <component>
```

Example:

```bash
npx @empireui/empire-ui add button
```

Available components:

- button
- dialog
- dropdown-menu
- input
- label
- select
- textarea
- toast

Options:

- `--overwrite`: Overwrites existing component files (default: false)

## Project Requirements

- Next.js 13+
- Tailwind CSS
- TypeScript

## Directory Structure

After initialization, Empire UI will create the following structure:
npm package: @iammati/git-ai
Description: A simple CLI tool to generate commit messages using GPT-3
Author: Mati
Latest version: 0.4.2

# @iammati/git-ai

This AI-powered tool, based on Node.js, will help you summarizing changes done in a Git repository by analzying
diffs / code changes and using [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/) to do that.

## Why? AI.

I was lazy going through all my changes everytime and pull something together for a commit message. I wanted to have a tool that does that for me.

## Requirements

You need a OpenAI API Key to use this tool. You can get one [here](https://platform.openai.com/account/api-keys).

## Installation

```bash
npm install -g @iammati/git-ai
```

## Usage

Just run the `git-ai` command in a Git repository where you added files into your staged-area and want to summarize a commit message for:

```bash
git-ai
```

Copy n paste the response into your commit message and you're done!
npm package: @iammattburns/react-carousel
Description: A lightweight carousel component.
Author: Matt Burns
Latest version: 1.0.1

# React Carousel

React Carousel is a lightweight and customizable carousel component for React applications.

### Installation

You can install React Carousel using npm:

```bash
npm install @iammattburns/react-carousel
```

### Usage

To use React Carousel, import the component and render it with your desired configuration:

```bash
import React from 'react';
import Carousel from '@iammattburns/react-carousel';

const MyCarousel = () => {
  return (
    <Carousel>
        <Carousel.Slide>
            <img src="image1.jpg" alt="Image 1" />
        </Carousel.Slide>
        <Carousel.Slide>
            <img src="image2.jpg" alt="Image 2" />
        </Carousel.Slide>
        <Carousel.Slide>
            <img src="image3.jpg" alt="Image 3" />
        </Carousel.Slide>
    </Carousel>
  );
};

export default MyCarousel;
```

### Props

React Carousel accepts the following props:

- `autoplay`: boolean - Whether the carousel should autoplay (default: `false`)
- `autoplaySpeed`: number - The speed at which the carousel should autoplay (default: `3000`)
- `dots`: boolean - Whether to show navigation dots (default: `true`)
- `infinite`: boolean - Whether to enable infinite looping (default: `true`)
- `speed`: number - The speed of the carousel animation (default: `500`)
- `slidesToShow`: number - The number of slides to show at once (default: `1`)
- `slidesToScroll`: number - The number of slides to scroll at once (default: `1`)

## License

React Carousel is licensed under the MIT License.
npm package: @iammattburns/react-package-boilerplate
Description: A boilerplate for creating React packages with Rollup, Storybook, and Typescript.
Author: Matt Burns
Latest version: 1.0.1

# React Package Boilerplate

This boilerplate aids in creating React packages utilizing Rollup, Storybook, and Typescript. Kickstart your React library development with a configuration that provides a seamless development experience.

![npm bundle size](https://img.shields.io/bundlephobia/min/@iammattburns/react-package-boilerplate?style=flat-square) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@iammattburns/react-package-boilerplate?style=flat-square) ![npm downloads](https://img.shields.io/npm/dt/@iammattburns/react-package-boilerplate?style=flat-square) ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)

## Features

- **Rollup**: Efficiently bundles your React components for optimal use in other projects.
- **Storybook**: Visually test and showcase your components in an isolated environment.
- **Typescript**: Benefit from static type checking and the latest ECMAScript features.

## Getting Started

### Prerequisites

Ensure you have the following software installed:

- Node.js (v12 or newer)
- Yarn or npm

### Installation

Clone the repository:

```bash
git clone https://github.com/iammattburns/react-package-boilerplate.git
```

Move to the project directory:
```bash
cd react-package-boilerplate
```

Install dependencies:
```bash
npm install
```

### Development
#####Running Storybook
To start the Storybook server:

```bash
npm run storybook
```

This will start the Storybook server, and you can begin developing your components.

### Building the Package
To build the React components for distribution:
```bash
npm run build
```
This will produce an optimized bundle in the dist directory, ready for publishing.

### Publishing
Once you are ready to publish your package:

1. Modify the `package.json` with your package name, description, repository  information, and other relevant details.
2. Run the build script.
3. Publish to npm:

```bash
npm publish
```

### Contributing
We welcome contributions! Please see `CONTRIBUTING.md` for guidelines on how to proceed.

### License
This project is licensed under the MIT License. See the `LICENSE` file for more details.
npm package: @iammouaz/only-one-tab
Description: [![standard badge](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)  [![npm](https://img.shields.io/npm/v/only-one-tab.svg)](https://www.npmjs.com/package/only-one-tab)
Author: Mouaz El Molkey
Latest version: 2.8.0


# React Only One Tab

[![standard badge](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) 
[![npm](https://img.shields.io/npm/v/only-one-tab.svg)](https://www.npmjs.com/package/only-one-tab)


> Prevent react app to open in multiple tabs at the same time.



### Install
``` 
npm i @iammouaz/only-one-tab 
```


### Usage

``` 
import OnlyOneTab from '@iammouaz/only-one-tab'

```

and Wrap the App or the route with it 

``` 
<OnlyOneTab>
<App />
</OnlyOneTab>
```

### Props

You can Pass ```Massage="This is the error text"``` as String or as JSX Elements  ```Massage={<ErrorMassge />}``` to the provider

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the [issues page](../../issues/).

## Show your support

Give a ⭐️ if you like this project!

## 📝 License

This project is [MIT](./LICENSE) licensed.
npm package: @iammrverma/file-previewer
Description: React file previewer modal for image, video, audio, and PDF files.
Latest version: 0.1.2

[![npm version](https://img.shields.io/npm/v/@iammrverma/file-previewer.svg)](https://www.npmjs.com/package/@iammrverma/file-previewer)
[![npm downloads](https://img.shields.io/npm/dm/@iammrverma/file-previewer.svg)](https://www.npmjs.com/package/@iammrverma/file-previewer)
[![license](https://img.shields.io/npm/l/@iammrverma/file-previewer.svg)](LICENSE)
![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue)

---

# File Previewer

React file previewer modal for image, video, audio, and PDF files.

## Install

```bash
npm i @iammrverma/file-previewer
```

## Usage

```tsx
import { useState } from "react";
import { FilePreviewer, type PreviewFile } from "@iammrverma/file-previewer;
import "@iammrverma/file-previewerstyles.css";

const files: PreviewFile[] = [
  {
    id: "1",
    name: "photo.jpg",
    url: "https://example.com/photo.jpg",
    mimeType: "image/jpeg"
  }
];

export function Demo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open preview</button>
      <FilePreviewer open={open} files={files} onClose={() => setOpen(false)} />
    </>
  );
}
```

## API

- `FilePreviewer`
- `PreviewFile` type
- `PreviewFileKind` type
- `getFileKind(mimeType)`
npm package: @iamnafets/react-query
Description: tRPC React lib
Author: KATT
Latest version: 10.20.0

<p align="center">
  <a href="https://trpc.io/"><img src="https://assets.trpc.io/icons/svgs/blue-bg-rounded.svg" alt="tRPC" height="75"/></a>
</p>

<h3 align="center">tRPC</h3>

<p align="center">
  <strong>End-to-end typesafe APIs made easy</strong>
</p>

<p align="center">
  <img src="https://assets.trpc.io/www/v10/v10-dark-landscape.gif" alt="Demo" />
</p>

# `@trpc/react-query`

> A tRPC wrapper around react-query.

## Documentation

Full documentation for `@trpc/react-query` can be found [here](https://trpc.io/docs/react-query)

## Installation

```bash
# npm
npm install @trpc/react-query @tanstack/react-query

# Yarn
yarn add @trpc/react-query @tanstack/react-query

# pnpm
pnpm add @trpc/react-query @tanstack/react-query
```

## Basic Example

Create a utils file that exports tRPC hooks and providers.

```ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from './server';

export const trpc = createTRPCReact<AppRouter>();
```

Use the provider to connect to your API.

```ts
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import { useState } from 'react';
import { trpc } from '~/utils/trpc';

export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      url: 'http://localhost:5000/trpc',
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}
```

Now in any component, you can query your API using the proxy exported from the utils file.

```ts
import { trpc } from '~/utils/trpc';

export function Hello() {
  const { data, error, status } = trpc.greeting.useQuery({ name: 'tRPC' });

  if (error) {
    return <p>{error.message}</p>;
  }

  if (status !== 'success') {
    return <p>Loading...</p>;
  }

  return <div>{data && <p>{data.greeting}</p>}</div>;
}
```
npm package: @iamnafets/trpc-client
Description: The tRPC client library
Author: KATT
Latest version: 10.29.1-alpha.0

<p align="center">
  <a href="https://trpc.io/"><img src="https://assets.trpc.io/icons/svgs/blue-bg-rounded.svg" alt="tRPC" height="75"/></a>
</p>

<h3 align="center">tRPC</h3>

<p align="center">
  <strong>End-to-end typesafe APIs made easy</strong>
</p>

<p align="center">
  <img src="https://assets.trpc.io/www/v10/v10-dark-landscape.gif" alt="Demo" />
</p>

# `@trpc/client`

> Communicate with a tRPC server on the client side.

## Documentation

Full documentation for `@trpc/client` can be found [here](https://trpc.io/docs/vanilla)

## Installation

```bash
# npm
npm install @trpc/client

# Yarn
yarn add @trpc/client

# pnpm
pnpm add @trpc/client
```

## Basic Example

```ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
// Importing the router type from the server file
import type { AppRouter } from './server';

// Initializing the tRPC client
const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
    }),
  ],
});

async function main() {
  // Querying the greeting
  const helloResponse = await trpc.greeting.query({
    name: 'world',
  });

  console.log('helloResponse', helloResponse); // Hello world
}

main();
```
npm package: @iamnafets/trpc-server
Description: The tRPC server library
Author: KATT
Latest version: 10.29.1-alpha.0

<p align="center">
  <a href="https://trpc.io/"><img src="https://assets.trpc.io/icons/svgs/blue-bg-rounded.svg" alt="tRPC" height="75"/></a>
</p>

<h3 align="center">tRPC</h3>

<p align="center">
  <strong>End-to-end typesafe APIs made easy</strong>
</p>

<p align="center">
  <img src="https://assets.trpc.io/www/v10/v10-dark-landscape.gif" alt="Demo" />
</p>

# `@trpc/server`

> Create tRPC routers and connect them to a server.

## Documentation

Full documentation for `@trpc/server` can be found [here](https://trpc.io/docs/router)

## Installation

```bash
# npm
npm install @trpc/server

# Yarn
yarn add @trpc/server

# pnpm
pnpm add @trpc/server
```

We also recommend installing `zod` to validate procedure inputs.

## Basic Example

```ts
import { inferAsyncReturnType, initTRPC } from '@trpc/server';
import {
  CreateHTTPContextOptions,
  createHTTPServer,
} from '@trpc/server/adapters/standalone';
import { z } from 'zod';

// Initialize a context for the server
function createContext(opts: CreateHTTPContextOptions) {
  return {};
}

// Get the context type
type Context = inferAsyncReturnType<typeof createContext>;

// Initialize tRPC
const t = initTRPC.context<Context>().create();

// Create main router
const appRouter = t.router({
  // Greeting procedure
  greeting: t.procedure
    .input(
      z.object({
        name: z.string(),
      }),
    )
    .query(({ input }) => `Hello, ${input.name}!`),
});

// Export the app router type to be imported on the client side
export type AppRouter = typeof appRouter;

// Create HTTP server
const { listen } = createHTTPServer({
  router: appRouter,
  createContext,
});

// Listen on port 2022
listen(2022);
```
npm package: @iamnapo/average
Description: Small utility function to calculate the average value of an array
Author: Napoleon-Christos Oikonomou
Latest version: 1.3.1

# @iamnapo/average

> Small utility function to calculate the average value of an array

[![build](https://badges.iamnapo.me/ci/iamnapo/average)](https://github.com/iamnapo/average/actions) [![npm](https://badges.iamnapo.me/npm/@iamnapo/average)](https://www.npmjs.com/package/@iamnapo/average)

## Install

```sh
$ npm i @iamnapo/average
```

## Usage

```js
import average from "@iamnapo/average";

average([0, 1, 2, 3, 4, 5]); // => 2.5
average([0, 1, 2, 3, 4, 5], { excludeZeroes: true }); // => 3
average([0, 1, 2, Number.NaN, undefined], { excludeFalsies: true }); // => 1.5
average([{ name: "iamnapo", age: 28 }, { age: 28 }, { name: "Alice", age: 25 }], { get: (v) => v.age }); // => 27
average([]); // => NaN
```

## API

### average(input, options?)

Get the average value from an array.

#### input

Type: `unknown[]`

Input array.

#### options

Type: `object`

You can specify the below options.

##### excludeZeroes

Type: `boolean`\
Default: `false`

Exclude zero values from the calculation.

##### excludeFalsies

Type: `boolean`\
Default: `false`

Exclude [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) values from the calculation.

##### get

Type: `Function`\
Default: `(v) => v`

Function used to extract each value.