open-index/open-npm huggingface dataset:
npm package: @ksankarkumar34/react-toast-notify
Description: toast notification library for React
Author: Sankarkumar K
Latest version: 1.1.0

# React Toast Notification 🍞

A lightweight, customizable toast notification system for React applications built with TypeScript and Vite.

## Features ✨

- 🚀 Easy to integrate with React applications
- 🎨 Customizable toast notifications
- ⌨️ Built with TypeScript
- 🪶 Lightweight implementation
- 📱 Responsive design

## Installation 📦

This package is currently in development. To use it in your project:

1. Clone the repository
```bash
git clone [your-repository-url]
```

2. Install dependencies
```bash
npm install
```

3. Build the project
```bash
npm run build
```

## Usage 🚀

```tsx
import { ToastProvider, useToast } from './path-to-library';

// Wrap your app with ToastProvider
function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}

// Use in your components
function Example() {
  const toast = useToast();

  return (
    <button onClick={() => toast.show('Hello, World!')}>
      Show Toast
    </button>
  );
}
```

## Development 🛠️

```bash
# Start development server
npm run dev

# Build the library
npm run build

# Preview the build
npm run preview
```

## Contributing 🤝

Contributions are welcome! Feel free to open issues and pull requests.

## License 📄

MIT License
npm package: @ksassnowski/momentum-modal
Description: A Vue 3 plugin that lets you implement backend-driven modal dialogs for Inertia apps.
Author: Boris Lepikhin
Latest version: 0.1.12

# Momentum Modal

Momentum Modal is a Vue 3 plugin that lets you implement backend-driven modal dialogs for Inertia apps.

You can find the full documentation [here](https://github.com/lepikhinb/momentum-modal).

Check out the [demo app](https://modal.advanced-inertia.com) demonstrating the Modal package in action.

## Advanced Inertia

[<img src="https://advanced-inertia.com/og5.png" width="420px" />](https://advanced-inertia.com)

Make Inertia-powered frontend a breeze to build and maintain with my upcoming book [Advanced Inertia](https://advanced-inertia.com/). Join the waitlist and get **20% off** when the book is out.

## Momentum

Momentum is a set of packages designed to bring back the feeling of working on a single codebase to Inertia-powered apps.

- [Modal](https://github.com/lepikhinb/momentum-modal) — Build dynamic modal dialogs for Inertia apps
- [Paginator](https://github.com/lepikhinb/momentum-paginator) — Headless wrapper around Laravel Pagination
- State — Laravel package to manage the frontend state of Inertia apps *(coming soon)*
- Router — Frontend plugin to use Laravel routes with Inertia *(coming soon)*
- Permissions — Frontend plugin to use your Laravel permission with Inertia *(coming soon)*
- Locale — Use your Laravel translation files with Inertia *(coming soon)*

## Credits

- [Boris Lepikhin](https://twitter.com/lepikhinb)
- [All Contributors](../../contributors)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
npm package: @ksassnowski/motion-canvas-components
Description: A set of components for Motion Canvas
Author: Kai Sassnowski
Latest version: 0.4.1

# Motion Canvas Components

A collection of components for [Motion Canvas](https://motioncanvas.io) that I
often use in my projects. Feel free to use them in your own projects. While I
try to make the components as generic as possible, be aware that some behaviors
might still be specific to my particular use case.

## Disclaimer

> **Warning** <br> This project is open source but _not_ open for contributions.
> I simply put these components out there because others might benefit from it,
> too. I won't be accepting merge requests or feature requests, however.

Depending on the npm package should be fine as I will try to not introduce
breaking changes in minor versions. Oftentimes, you'll be better off just
copy&pasting whatever you need into your own project, however. This will also
allow you to customize the components to your own needs.

## Installation

You can install the components by running one of the following command in your
terminal:

`npm`

```
npm install --save-dev @ksassnowski/motion-canvas-components
```

`yarn`

```
yarn add --dev @ksassnowski/motion-canvas-components
```

## Components

- [`SurroundingRect`](/src/components/surrounding-rectangle) – A component to
  render a rectangle around a list of provided nodes. Automatically calculates
  its required size based on the provided nodes. Can be animated to move between
  different nodes.
- [`Physics Engine`](/src/components/physics) – A basic 2D physics engine for
  Motion Canvas. Because why the hell not?
- [`Brace`](/src/components/brace) – A component to draw a brace next to list of
  components.
npm package: @ksassnowski/vueclid
Description: <div align="center">     <img src="images/logo.png" width="130px"> </div>
Latest version: 1.2.0

<div align="center">
    <img src="images/logo.png" width="130px">
</div>

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

<p align="center">
    <img src="https://badge.fury.io/js/@ksassnowski%2Fvueclid.svg" />
</p>

<p align="center">
Pixel-perfect math diagrams for Vue.js.
</p>

<p align="center">
    <a href="https://ksassnowski.github.io/vueclid-docs/installation.html">Documentation</a>
</p>

## Installation

```bash
npm install @ksassnowski/vueclid
```

## Credits

- [Kai Sassnowski](https://github.com/ksassnowski)
- [All contributors](https://github.com/ksassnowski/vueclid/contributors)

## License

MIT
npm package: @kschloeg/meants
Description: Starter server using node.js, TypeScript, Mongoose, and MongoDB
Author: kschloeg@gmail.com
Latest version: 0.8.0

# meants
Starter project with node.js, mongo, TypeScript, AngularJS

* Install Node.js

* Install gulp globally

  ```npm install -g gulp```

* Install a local instance of Mongo

  ```brew install mongodb```

* Modify mongo.config file (line 5) to specify a local directory for mongo to store its data

  ```dbPath: '/Users/otherguy/Sites/meants/mongo'```

* Install, (build and) test, run server

  ```npm install```

  ```npm test```

  ```npm start```
npm package: @ksconsole/qq
Description: 一个极简、可组合的命令行工具，提供：
Author: musistudio
Latest version: 1.0.66

# Zero CLI (@ksconsole/zero)

一个极简、可组合的命令行工具，提供：

- 安全扫描：基于 `@ksconsole/security` 的一键扫描能力
- 本地代码执行透传：将参数原样转发给本机的 `kode` 可执行程序

> 使用场景：在一条命令里完成安全扫描，或把任务交给本地 Agent/CLI（`kode`）。

---

## 安装

```bash
npm i -g @ksconsole/zero
```

安装完成后将获得命令：`zero`

---

## 快速开始

```bash
# 运行安全扫描（具体参数由 @ksconsole/security 提供）
zero scan

# 透传给本机的 `kode`：以下会执行系统中的 `kode` 命令
zero code "write a hello world"
```

---

## 命令说明

- `zero scan [..args]`
  - 调用 `@ksconsole/security` 的扫描子命令，参数原样传入。
  - 示例：
    - `zero scan`
    - `zero scan --help`（查看 `@ksconsole/security` 的完整参数与说明）

- `zero code <args...>`
  - 将所有参数原样透传给本机的 `kode` 可执行文件。
  - 标准输入/输出与退出码均与子进程保持一致。
  - 示例：
    - `zero code "init a typescript project"`
    - `zero code --version`

---

## 先决条件

- Node.js：建议 18+，推荐 20（本项目构建目标为 Node 20）。
- 使用 `zero code` 时，系统需已安装 `kode` 并加入 `PATH`。
  - 若未安装，将看到错误提示：无法启动 `kode`，请确认已安装并在 PATH 中。
  - 请参考 `kode` 的官方文档获取安装方式。

---

## 退出码与日志

- `zero scan` 与 `zero code` 的退出码会尽量与其子进程保持一致：
  - 正常完成：返回子进程退出码（一般为 0）。
  - 运行时被信号终止：会输出终止信号并返回非 0。

---

## 开发与构建

本仓库使用 TypeScript 与 esbuild。

- 入口文件：`src/cli.ts`
- 构建命令：

```bash
npm run build
```

构建产物：`dist/cli.mjs`（由 `package.json` 的 `bin` 字段指向，命令名为 `zero`）。

---

## 许可证

MIT

---

## 致谢

- 安全扫描能力由 `@ksconsole/security` 提供。
npm package: @ksec/angular
Description: Angular components for Clarity
Author: clarity
Latest version: 2.3.0

### Installing Clarity Angular

1.  Install Clarity Icons package through npm:

    ```
    npm install @clr/icons
    ```

2.  Install Clarity UI package through npm:

    ```
    npm install @clr/ui
    ```

3.  Install the clarity-angular package through npm:

    ```
    npm install @clr/angular
    ```

4.  Import the ClarityModule into your Angular application's module. Your application's main module might look like this:

    ```
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ClarityModule } from '@clr/angular';
    import { AppComponent } from './app.component';

    @NgModule({
        imports: [
            BrowserModule,
            ClarityModule,
            ....
         ],
         declarations: [ AppComponent ],
         bootstrap: [ AppComponent ]
    })
    export class AppModule {    }
    ```
npm package: @ksec/icons
Description: Custom Element Icons for Clarity
Author: clarity
Latest version: 2.3.0

### Installing Clarity Icons

1.  Install Clarity Icons package through npm:

    ```
    npm install clr-icons
    ```

2.  Install the polyfill for Custom Elements:

    ```
    npm install @webcomponents/custom-elements
    ```

3.  Include the clr-icons.min.css and clr-icons.min.js in your HTML. As clr-icons.min.js is dependent on the Custom Elements polyfill, make sure to include it before clr-icons.min.js:

    ```
    <link rel="stylesheet" href="path/to/node_modules/clr-icons/clr-icons.min.css">

    <script src="path/to/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
    <script src="path/to/node_modules/clr-icons/clr-icons.min.js"></script>
    ```
npm package: @ksec/ui
Description: CSS for Clarity
Author: clarity
Latest version: 2.3.0

### Installing Clarity UI

1.  Install Clarity UI package through npm:

    ```
    npm install @clr/ui
    ```

2.  Install Clarity Icons package through npm:

    ```
    npm install @clr/icons
    ```

3.  Include the clr-ui.min.css and clr-icons.min.css files in your HTML file:

    ```
    <link rel="stylesheet" href="path/to/node_modules/@clr/ui/clr-ui.min.css">
    <link rel="stylesheet" href="path/to/node_modules/@clr/icons/clr-icons.min.css">
    ```

4.  Include the clr-icons.min.js in your HTML file:

    ```
    <script src="path/to/node_modules/clr-icons/clr-icons.min.js"></script>
    ```

5.  Write your HTML with the Clarity CSS class names and markup.
npm package: @kseniakap/media-query
Description: хук useMediaQuery.ts и компонент MediaQuery.tsx
Author: kseniakap096@gmail.com
Latest version: 1.0.2

### React - react-responsive

## Пример работы хука

useMediaQuery.ts

```typescript
import React from 'react'
import { useMediaQuery } from '@my-npm-user/react-responsive'

const Example = () => {
  const isDesktopOrLaptop = useMediaQuery({
    query: '(min-width: 1224px)',
  })
  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })
  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })
  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })

  return (
    <div>
      <h1>Device Test!</h1>
      {isDesktopOrLaptop && <p>You are a desktop or laptop</p>}
      {isBigScreen && <p>You have a huge screen</p>}
      {isTabletOrMobile && <p>You are a tablet or mobile phone</p>}
      <p>Your are in {isPortrait ? 'portrait' : 'landscape'} orientation</p>
      {isRetina && <p>You are retina</p>}
    </div>
  )
}
```

## Пример работы компонента

MediaQuery.tsx

```typescript
import React from 'react'
import MediaQuery from '@my-npm-user/react-responsive'

const Example = () => (
  <div>
    <h1>Device Test!</h1>
    <MediaQuery minWidth={1224}>
      <p>You are a desktop or laptop</p>
      <MediaQuery minWidth={1824}>
        <p>You also have a huge screen</p>
      </MediaQuery>
    </MediaQuery>
    <MediaQuery minResolution="2dppx">
      {' '}
      {/* @media (-webkit-min-device-pixel-ratio: 2) */}
      {/* You can also use a function (render prop) as a child */}
      {(matches) =>
        matches ? <p>You are retina</p> : <p>You are not retina</p>
      }
    </MediaQuery>
  </div>
)
```

Ожидаемые props этого компонента:

```
orientation
minResolution
maxResolution
minWidth
maxWidth
minHeight
maxHeight
```

Дополнительно:

- Типизировать minResolution, чтобы можно было указать либо строку вида "{число}dppx", либо просто number (то есть чтобы и так и так можно было, а строка только определённого вида)