open-index/open-npm huggingface dataset:
npm package: @mateusz_lisowski/merge-classnames
Description: Simple javascript library which handle and merge conditional class names
Author: Mateusz Lisowski
Latest version: 1.0.2

# @mateusz_lisowski/merge-classnames

[![npm (scoped)](https://img.shields.io/npm/v/@mateusz_lisowski/merge-classnames.svg)](https://www.npmjs.com/package/@mateusz_lisowski/merge-classnames)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@mateusz_lisowski/merge-classnames.svg)](https://www.npmjs.com/package/@mateusz_lisowski/merge-classnames)

Simple package for merging multiple classes where some of the classes are conditionally applied.

It could be used for example in the React project.

No dependencies.


## Install

```
$ npm install @mateusz_lisowski/merge-classnames
```


## Usage

```js


import cx from '@mateusz_lisowski/merge-classnames';

or

const cx = require("@mateusz_lisowski/merge-classnames");

```


## Examples

```js
cx([{ "any-className": true }, "fixed-class"]); // 'any-className fixed-class'

cx([{ "any-className": false }, { "second-className": true }]); // 'second-className'

cx([{ "any-className": false }, { "second-className": false }]); // ''
```
npm package: @mateuszgietner/zest-test
Description: Test package for Figma Make POC - simplified Zest components
Author: Mateusz Gietner
Latest version: 0.1.0

# @mateuszgietner/zest-test

Test package for Figma Make POC - simplified Zest design system components.

## Purpose

This package is a **proof of concept** to test if the Semantic Bridge approach works with Figma Make. It contains simplified versions of Zest components with the same API.

## Installation

```bash
npm install @mateuszgietner/zest-test styled-components
```

## Components

### Button

```tsx
import { Button } from '@mateuszgietner/zest-test';

<Button.Primary>Add to Cart</Button.Primary>
<Button.Secondary>Cancel</Button.Secondary>
<Button.Tertiary>Learn More</Button.Tertiary>
<Button.Primary appearance="negative">Delete</Button.Primary>
<Button.Primary size="sm">Small</Button.Primary>
```

### Card

```tsx
import { Card } from '@mateuszgietner/zest-test';

<Card.Static padding="lg">
  <Text variant="heading-md">Title</Text>
</Card.Static>

<Card.Clickable onClick={handleClick}>
  <Text variant="body-md">Click me</Text>
</Card.Clickable>
```

### Text

```tsx
import { Text } from '@mateuszgietner/zest-test';

<Text variant="heading-lg">Page Title</Text>
<Text variant="body-md" color="text.subtle">Description</Text>
<Text variant="body-md" clamp={2}>Truncated text...</Text>
```

### Badge

```tsx
import { Badge } from '@mateuszgietner/zest-test';

<Badge appearance="success">Active</Badge>
<Badge appearance="negative">Error</Badge>
<Badge appearance="warning">Pending</Badge>
<Badge appearance="neutral">Draft</Badge>
```

### Box

```tsx
import { Box } from '@mateuszgietner/zest-test';

<Box display="flex" gap="md" padding="lg">
  <Box>Item 1</Box>
  <Box>Item 2</Box>
</Box>
```

## Props Reference

### Button Props

| Prop | Type | Default |
|------|------|---------|
| size | 'sm' \| 'lg' | 'lg' |
| appearance | 'brand' \| 'negative' \| 'neutral' | 'brand' |
| loading | boolean | false |
| fullWidth | boolean | false |

### Card Props

| Prop | Type | Default |
|------|------|---------|
| elevation | 0 \| 1 \| 2 \| 3 | 1 |
| padding | 'none' \| 'sm' \| 'md' \| 'lg' | 'md' |
| borderRadius | 'sm' \| 'md' \| 'lg' | 'md' |

### Text Props

| Prop | Type | Default |
|------|------|---------|
| variant | TextVariant | 'body-md' |
| color | ColorToken | 'text.default' |
| align | 'left' \| 'center' \| 'right' | 'left' |
| clamp | number | - |

### Badge Props

| Prop | Type | Default |
|------|------|---------|
| appearance | 'success' \| 'negative' \| 'warning' \| 'neutral' \| 'brand' | 'neutral' |
| size | 'sm' \| 'md' | 'md' |

## Note

This is a **test package** for POC purposes. It is not the official Zest design system.
npm package: @mateusznejman/neutralinojs-neu-piskel
Description: neu CLI for Neutralinojs
Author: Neutralinojs and contributors
Latest version: 11.2.1

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

[![GitHub release (latest by date)](https://img.shields.io/github/v/release/neutralinojs/neutralinojs-cli)](https://github.com/neutralinojs/neutralinojs-cli/releases)
![npm](https://img.shields.io/npm/v/@neutralinojs/neu)
![npm](https://img.shields.io/npm/dt/@neutralinojs/neu)
[![GitHub last commit](https://img.shields.io/github/last-commit/neutralinojs/neutralinojs-cli.svg)](https://github.com/neutralinojs/neutralinojs-cli/commits/main)
![Build status](https://github.com/neutralinojs/neutralinojs-cli/actions/workflows/test_suite.yml/badge.svg)

The official CLI of Neutralinojs. See neu CLI [documentation](https://neutralino.js.org/docs/cli/neu-cli/) for more details. Release notes are available at [this page](https://neutralino.js.org/docs/release-notes/cli).

```bash
npm i -g @neutralinojs/neu
```
### Requirements

- Node.js v14 or later version.
- npm, yarn, or any Node.js package manager.

### License

[MIT](LICENSE)

### Contributing to Neutralinojs

We really appreciate your code contributions. Please read [this contribution guide](https://neutralino.js.org/docs/contributing/framework-developer-guide#contribution-guidelines) before sending a pull request. Thank you for your contributions.

#### ⚠️ Notice for contributors
Please note that we would like to keep this project's dependencies list minimal as possible. Make sure that you don't add new dependencies (external `npm` modules) with your pull requests. Also, don't use latest Node/JavaScript features that won't work on older Node.js versions. Thank you :tada:

### Contributors

<a href="https://github.com/neutralinojs/neutralinojs-cli/graphs/contributors">
  <img src="https://contrib.rocks/image?repo=neutralinojs/neutralinojs-cli" />
</a>

Made with [contributors-img](https://contrib.rocks).
npm package: @mateuszzajacs/bindings
Description: The `Binding` is how Node-SerialPort talks to the underlying system. By default, we auto detect Windows, Linux and OS X, and load the appropriate module for your system. You can assign `SerialPort.Binding` to any binding you like. Find more by searching [
Latest version: 8.0.5

# @serialport/Bindings

The `Binding` is how Node-SerialPort talks to the underlying system. By default, we auto detect Windows, Linux and OS X, and load the appropriate module for your system. You can assign `SerialPort.Binding` to any binding you like. Find more by searching ["serialport-binding" at npm](https://www.npmjs.com/search?q=serialport-binding).

Learn more at our [bindings documentation](https://serialport.io/docs/api-bindings) page.

# Android users

When using termux there is a way to compile serialport to be used under Android

```sh
CFLAGS=-fPIC CXXFLAGS=-fPIC yarn rebuild
```
npm package: @matew/ng-daterangepicker-2
Latest version: 1.1.1

# Angular DateRange Picker II


This date picker is forked from [this repo](https://github.com/jkuri/ng-daterangepicker) authored by [jankuri.](https://github.com/jkuri)
The date picker is completely re-factored. It contain fixes for issues from original repo and implements a few new features.

You can try it live on [stackblitz](https://stackblitz.com/edit/ng-daterangepicker-2?file=src/app/app.module.ts)

## Installation
---
```sh
npm i @matew/ng-daterangepicker-2 --save
```
or
```sh
yarn add @matew/ng-daterangepicker-2
```

## Configuration
---

```ts
interface NgDateRangePickerOptions {
    initialDateRange: NgDateRange;
    inputFormat: (input: any) => NgDateRange;
    outputFormat: (dateRange: NgDateRange) => any;
    startOfWeek: number;
    dayNames: string[];
    inputNames: {
        from: string;
        to: string;
    };
    visibleDateFormat: string | ((date: Date) => string);
    alignment: 'left' | 'center' | 'right';
    shortCuts: 'thisMonth' | 'lastMonth' | 'lastWeek' | 'thisWeek' | 'thisYear' | 'lastYear' | NgDaterangeShortcutEntity;
    limitRange?: NgDateRange | null;
}
```
```ts
interface NgDaterangeShortcutEntity {
    title: string;
    range: (now: Date) => NgDateRange;
    visibleMonth: (state: 'from' | 'to') => Date;
}

```
```ts
interface NgDateRange {
    from: Date;
    to: Date;
}
```


| Variable   |      Default      |  Description |
|----------|:-------------:|------|
| initialDateRange |  ```{ from: now, to: now }``` | This value will used when you don't set value by formControl or ngModel |
| inputFormat |    ```(input: NgDateRange) => NgDateRange```   | Allow you to map input value |
| outputFormat | ```(data: NgDateRange) => NgDateRange``` | Allow you to map output value |
| startOfWeek | ```number``` | Allow you to apply offset for week start e.g value 0 mark sunday as first day of week |
| dayNames | ```['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']``` | Allow you to define prefixes of days visible on top of calendar. It's relative to `startOfWeek`  |
| inputNames | ```{ from: 'Start', to: 'End'}``` | Allow you to set label for inputs  |
| visibleDateFormat | ```DD-MM-YYYY``` | Allow you to define visible [date format](https://date-fns.org/v1.29.0/docs/format) |
| alignment | ```left``` | Allow you to select alignment of calendar |
| shortCuts | ```['thisMonth', 'lastMonth', 'lastWeek', 'thisWeek', 'thisYear', 'lastYear']``` | Allow you to use predefined shortcuts or define own shortcuts visible next to calendar |
| limitRange | ```null``` | Allow you to set limit range |

## Running the demo
---

```sh
git clone https://github.com/jkuri/ng-daterangepicker.git --depth 1
cd ng-daterangepicker
npm start
```

## Licence
---
MIT
npm package: @matfire/adonis-logsnag
Description: expose logsnag in a controller's http context
Author: Matteo Gassend
Latest version: 0.2.0

# Adonis Logsnag

![NPM Version](https://img.shields.io/npm/v/%40matfire%2Fadonis-logsnag)
![GitHub License](https://img.shields.io/github/license/matfire/adonis-logsnag)
A package to expose a [logsnag](https://logsnag.com) instance inside AdonisJS's http handler.

## Install

install the package by using 
```sh
npm install @matfire/adonis-logsnag
```

## Configure

configure the package using **ace**
```sh
node ace configure @matfire/adonis-logsnag
```

This will create a **logsnag.ts** config file in the **config** folder, along with adding a couple validation rules for your .env file.
Once all this is done, you'll need to add some variable to the .env:

- LOGSNAG_TOKEN: your logsnag token
- LOGSNAG_PROJECT: your logsnag project id

## Use

Once the module is enabled, it will inject a **logsnag** instance into your HttpContext: you can use like you would any logsnag instance.
One way to get that instance would be:

```js
class AppController {
  index({logsnag}: HttpContext) {
    logsnag.track() // or anything else logsnag can do
  }
}
```
npm package: @matfire/adonis-simple-admin
Description: > An all included admin section for your Adonis application
Latest version: 0.0.1

# Adonis Simple Admin

> An all included admin section for your Adonis application

Adonis Simple Admin's goal is to provide a small, easy to configure admin dashboard allowing basic crud operations.

## Requirements

To use this package, your Adonis application needs to use:

- Lucid
- Edge (this can also only be just configured)

## Setup

- install this package:

```sh
npm i @matfire/adonis-simple-admin
```

- configure the package using ace:

```sh
node ace configure @matfire/adonis-simple-admin
```

## Configuration

After running the configuration script with ace, you'll find a `simple_admin.ts` file containing all the configuration you'll need to customize Simple Admin

- models: This is the list of models you want to be able to see in the admin section. It is a list of Lucid models.
- path: the base path all the Simple Admin routes will use (defaults to `/admin`)
npm package: @matfire/concorde
Description: A TypeScript wrapper for Pusher that ensures end-to-end type safety with schema validation
Latest version: 0.0.4

# Concorde

> a wrapper for pusher to ensure E2E typesafety

<!-- automd:badges license  bundlephobia packagephobia name="@matfire/concorde" -->

[![npm version](https://img.shields.io/npm/v/@matfire/concorde)](https://npmjs.com/package/@matfire/concorde)
[![npm downloads](https://img.shields.io/npm/dm/@matfire/concorde)](https://npm.chart.dev/@matfire/concorde)
[![bundle size](https://img.shields.io/bundlephobia/minzip/@matfire/concorde)](https://bundlephobia.com/package/@matfire/concorde)
[![install size](https://badgen.net/packagephobia/install/@matfire/concorde)](https://packagephobia.com/result?p=@matfire/concorde)
[![license](https://img.shields.io/github/license/matfire/concorde)](https://github.com/matfire/concorde/blob/main/LICENSE)

<!-- /automd -->



## Install

<!-- automd:pm-install name="@matfire/concorde" -->

```sh
# ✨ Auto-detect
npx nypm install @matfire/concorde

# npm
npm install @matfire/concorde

# yarn
yarn add @matfire/concorde

# pnpm
pnpm add @matfire/concorde

# bun
bun install @matfire/concorde

# deno
deno install npm:@matfire/concorde
```

<!-- /automd -->

<!-- automd:with-automd -->

---

_🤖 auto updated with [automd](https://automd.unjs.io)_

<!-- /automd -->
npm package: @matfire/edge-view-transitions
Description: ![NPM Version](https://img.shields.io/npm/v/%40matfire%2Fedge-view-transitions) ![GitHub Release](https://img.shields.io/github/v/release/matfire/edge-view-transitions)
Author: Matteo Gassend
Latest version: 0.0.4

# Edge View Transitions

![NPM Version](https://img.shields.io/npm/v/%40matfire%2Fedge-view-transitions)
![GitHub Release](https://img.shields.io/github/v/release/matfire/edge-view-transitions)

utilities to handle view transitions when using [edge.js](https://edgejs.dev/)

## Installation

- Install with your preferred package manager
```sh
npm|pnpm|yarn install|add @matfire/edge-view-transitions
```

## Usage

- register the plugin with your edge instance

```js
import edge from "edge.js";
import { edgeViewTransitions } from "@matfire/edge-view-transitions";

edge.use(edgeViewTransitions);
```

### Transition Name

To add a `view-transition-name` css property to the element, you can add `{{transitionName('name_of_the_transition')}}` to an element's `style` property. For instance:

```html
<p style="{{transitionName('para')}}">this is a paragraph</p>
```

renders to:

```html
<p style="view-transition-name: para;">this is a paragraph</p>
```

### Transition Group

Useful when you need to write styles for view transitions, it will be replaced with the right ::view-transition selector. You can use it like this: `{{transitionGroup('name_of_element', 'old|new')}}`

These lines:
```html
{{transitionGroup()}}
{{transitionGroup('para')}}
{{transitionGroup('para', 'new')}}
```

renders to:
```css
::view-transition-old(root)
::view-transition-old(para)
::view-transition-new(para)
```
npm package: @matfire/remark-directive-to-custom-tag
Description: a remark plugin to map custom directives to custom tags (like webcomponents, for example)
Author: Matteo Gassend
Latest version: 1.0.0

# remark-directive-to-custom-tag

![NPM Version](https://img.shields.io/npm/v/%40matfire%2Fremark-directive-to-custom-tag?style=for-the-badge)

> A remark extension to automatically parse markdown directives into specified tags while preserving all the provided attributes

## Install

> [!IMPORTANT]
> You need to have install the [remark-directive](https://github.com/remarkjs/remark-directive/tree/main) extension

```bash
npm install @matfire/remark-directive-to-custom-tag
```

## Usage

```js
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkDirective from 'remark-directive'
import remarkDirectiveToCustomTag from "@matfire/remark-directive-to-custom-tag"

const html = await unified()
    .use(remarkParse)
    .use(remarkDirective)
    .use(remarkDirectiveToCustomTag, {/* config goes here */})
    .process('...')
```

## Configuration Options

The configuration options are structured as such:

```js
{
    log: boolean //whether or not to allow log output (useful for debugging): defaults to false,
    associations: [
        {
            type: string; // can be either "containerDirective", "leafDirective" or "textDirective"; check the remark-directive documentation to learn more
            directiveName: string; // the name of the directive you want to select. To target a directive written like ::youtube, you would write here 'youtube'
            tagName: string; // the name of the output node tag (here I personally use webcomponents, but you do you),
            validator?: StandardSchema // optional validator. Accepts any library implementing the StandardSchema specification (includind zod, arktype and more) 
        }
    ]
}
```

## Using Validators

Since version 0.1.0, you can provide a `validator` object/function. This validator uses the [StandardSchema](https://standardschema.dev/) and thus supports all validation libraries implementing said interface (including zod, arktype, valibot etc).

Here's an example (taken from the tests for this package) that uses arktype to define a validator:

```ts
import { type } from "arktype"

//the rest of your unified process would go here
.use(remarkDirectiveToCustomTag, {
    associations: [
        {
            type: 'leafDirective',
            directiveName: 'test',
            tagName: 'test',
            validator: type({ // the import bit is here
                name: 'string',
                surname: 'string'
            })
        }
    ]
})

```
npm package: @matfire/webcomponents
Description: a list of web components I use on my website
Author: Matteo Gassend
Latest version: 0.0.3

# @matfire/webcomponents

> A list of webcomponents I use on my website

## Install

```sh
npm install @matfire/webcomponents
```

## Usage

```js
import "@matfire/webcomponents"
```
npm package: @matgpereira/eslint-config
Description: ESlint config used by me
Author: Matheus G. Pereira
Latest version: 2.2.2

# ESLint Config

Aqui consta-se configurações que eu uso no meu dia a dia para criar aplicações em Next, React e Node.
Tenho intenções que adicionar ainda configurações para Vue.js, Nuxt.js e Svelte.

## Como rodar

### React.js com Next.js

1. Instalar dependências
```bash
npm i -D eslint @matgpereira/eslint-config
```

2. Crie um arquivo `.eslintrc` ou `.eslintrc.json` e, dentro do arquivo, coloque
```json
{
  "extends": [
    "@matgpereira/eslint-config/next",
    "next/core-web-vitals"
  ]
}
```

### React.js sem Next.js

1. Instalar dependências
```bash
npm i -D eslint @matgpereira/eslint-config
```

2. Crie um arquivo `.eslintrc` ou `.eslintrc.json` e, dentro do arquivo, coloque
```json
{
  "extends": "@matgpereira/eslint-config/react"
}
```

### Node.js

1. Instalar dependências
```bash
npm i -D eslint @matgpereira/eslint-config
```

2. Crie um arquivo `.eslintrc` ou `.eslintrc.json` e, dentro do arquivo, coloque
```json
{
  "extends": "@matgpereira/eslint-config/node"
}
```