open-index/open-npm huggingface dataset:
npm package: @nextail/core
Description: [![npm](https://img.shields.io/npm/v/@nextail/core)](https://www.npmjs.com/package/@nextail/core) [![npm downloads](https://img.shields.io/npm/dw/@nextail/core)](https://www.npmjs.com/package/@nextail/core)
Author: a-smiggle
Latest version: 0.12.5

# Nextail Core

[![npm](https://img.shields.io/npm/v/@nextail/core)](https://www.npmjs.com/package/@nextail/core)
[![npm downloads](https://img.shields.io/npm/dw/@nextail/core)](https://www.npmjs.com/package/@nextail/core)

Nextail Core provides a collection of ready to use React Components.
# Installation
Nextail Core is available as an [npm package](https://www.npmjs.com/package/@nextail/core).

```sh
// with pnpm
pnpm install @nextail/core

// with npm
npm install @nextail/core

// with yarn
yarn add @nextail/core
```

# Usage

Here is an example of a Next.JS page with button.

```tsx
import type { NextPage } from 'next';
import React from 'react';

import Button from '@nextail/core/Button';

const Home: NextPage = () => {
  return <Button link='https://nextail-ui.vercel.app'>Nextail</Button>
};

export default Home;
  return (
```
npm package: @nextail/hooks
Description: [![npm](https://img.shields.io/npm/v/@nextail/hooks)](https://www.npmjs.com/package/@nextail/hooks) [![npm downloads](https://img.shields.io/npm/dw/@nextail/providers)](https://www.npmjs.com/package/@nextail/hooks)
Author: a-smiggle
Latest version: 0.56.1

# Nextail Hooks
[![npm](https://img.shields.io/npm/v/@nextail/hooks)](https://www.npmjs.com/package/@nextail/hooks)
[![npm downloads](https://img.shields.io/npm/dw/@nextail/providers)](https://www.npmjs.com/package/@nextail/hooks)

Nextail Hooks is a collection of react hooks. **More to come.**

## Installation
Nextail Hooks is available as an [npm package](https://www.npmjs.com/package/@nextail/hooks).

```sh
// with pnpm
pnpm install @nextail/hooks

// with npm
npm install @nextail/hooks

// with yarn
yarn add @nextail/hooks
```

## Usage


### Use Location
Use Location allows access vanilla JS window.location from within you application.

Here is the app.tsx file of a Next.js project.

Example of use in a Next.Js page.

```tsx
import type { NextPage } from 'next';
import React from 'react';

import Button from '@nextail/core/Button';
import UseLocation from '@nextail/hooks/useLocation';

const Home: NextPage = () => {
  const { pathname } = UseLocation();

  return (
    <div className='w-full h-screen bg-white dark:bg-slate-300'>
      <h1 className='text-4xl text-black dark:text-slate-200'>{pathname}</h1>
    </div>
    );
};

export default Home;
```

If index page page would display '/'.
npm package: @nextastic/db
Description: Database utils to create migrations and types.
Author: mikewuu
Latest version: 5.0.2

# @nextastic/db

Database utils to create migrations, generate types, and run database commands


## Usage


### Commands

`npx db <command>`



#### `make:migration`

Creates a migration file.

#### `migrate`

Runs migration files

#### `make:types`

Generates database schema types.

#### `drop`

Drops the database and deletes all records permanently.

### DB Client

The database client is a type-safe query builder that references your database schema.
npm package: @nextbillion/nbmap-gl
Description: NBMap GL is a web map SDK for JavaScript that enables interactive maps with NextBillion's vector tiles service in your web apps.
Author: Yun Wang
Latest version: 0.0.7

# NBMap GL

NBMap GL is a web map SDK for JavaScript that enables interactive maps with NextBillion's vector tiles service in your web apps.

# Basic Usage

```html
<html lang="en">
  <head>
    <link rel="stylesheet" href="TBD" />
  </head>

  <body>
    <!-- A container for the interactive map -->
    <div id="map"></div>

    <!-- Including the scripts to show the map -->
    <script src="TBD"></script>
    <script>
      ;(function () {
        // Minimum code for displaying a map
        nextbillion.apiKey = '123456'
        var map = new nextbillion.maps.Map({
          container: 'map',
        })
      })()
    </script>
  </body>
</html>
```

# Development

Before start, please install `Node.js` and `yarn` to install dependencies.

```bash
yarn
```

You can start developing with this command:

```bash
yarn dev
```

You can build a minified version of the SDK with this command:

```bash
yarn build
```
npm package: @nextbitlabs/onepunch-style-nextbit
Description: Frictionless CSS style for the onepunch CLI
Latest version: 0.2.0

### Start a new presentation with [onepunch](https://github.com/nextbitlabs/onepunch).

Create a new presentation:

```sh
$ onepunch init [-n directory-name]
```

Link to the onepunch-nextbit-style adding the following line within the `<head>` element in the `index.html` file:

```
<head>
  <link href="https://unpkg.com/@nextbitlabs/onepunch-style-nextbit/nextbit.css" rel="stylesheet" type="text/css">
</head>
```

Read about how to create slides with **onepunch** and Nextbit style in the [internal documentation](./documentation.md).

---

[Onepunch](https://github.com/nextbitlabs/onepunch) and the `nextbit.css` file are provided by [Nextbit](https://www.nextbit.it/).
npm package: @nextbitlabs/trend-line
Description: Web component implementation of a trend-line.
Author: Riccardo Scalco
Latest version: 1.2.1

# &lt;trend-line&gt;

![Latest Release](https://badgen.net/github/release/nextbitlabs/trend-line) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/trend-line)

Web component implementation of a trend-line.

<img width="100px" src="image.png">

## Usage

Import `trend-line` and set CSS custom properties:

```html
<head>
  <script type="module">
    import "https://cdn.skypack.dev/@nextbitlabs/trend-line";
  </script>
  <style>
    /*
      CSS custom properties penetrate the Shadow DOM.
      They are useful to provide custom styling.
    */
    trend-line {
      --color: #333; /* default black */
      --stroke-width: 2px; /* default 2px */
      --background: #eee; /* default transparent */
    }
  </style>
</head>
```

Use the custom element:

```html
<body>
  <trend-line
    x-interval="[0, 10]"
    y-interval="[0, 1]"
    width="100"
    height="100"
    margin="20"
  ></trend-line>
</body>
```

Set the data to plot:

```html
<script>
  const element = document.querySelector("trend-line");
  element.data = [[1, 3], [2, 5], [3, 2]];
</script>
```

Please have a look at the [demo](https://github.com/nextbitlabs/trend-line/blob/main/demo/index.html) in the repo, or the live [demo](https://pp41i.csb.app/).

## License

MIT
npm package: @nextbitlabs/two-stacked-bar
Description: Web-component implementation of a two-stacked-bar.
Author: Riccardo Scalco
Latest version: 1.0.3

# &lt;two-stacked-bar&gt;

![Latest Release](https://badgen.net/github/release/nextbitlabs/two-stacked-bar) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/two-stacked-bar)

Web component implementation of a two-stacked-bar.

<img width="100px" src="image.png">

## Usage

Import `two-stacked-bar` and set CSS custom properties:

```html
<head>
  <script type="module">
    import "https://cdn.skypack.dev/@nextbitlabs/two-stacked-bar";
  </script>
  <style>
    /*
      CSS custom properties penetrate the Shadow DOM.
      They are useful to provide custom styling.
    */
    two-stacked-bar {
      --color-top: #999; /* default #999 */
      --color-bottom: #333; /* default #333 */
      --background: #eee; /* default transparent */
    }
  </style>
</head>
```

Use the custom element:

```html
<body>
  <two-stacked-bar
    gap="2"
    bar-width="2"
    width="100"
    height="100"
    margin="20"
  ></two-stacked-bar>
</body>
```

Set the data to plot:

```html
<script>
  const element = document.querySelector("two-stacked-bar");
  element.data = [[1, [12, 4]], [2, [3, 10]], [3, [5, 25]]];
</script>
```

Please have a look at the [demo](https://xbbzw.csb.app/).

## License

MIT
npm package: @nextbook/headlessui-react
Description: A set of completely unstyled, fully accessible UI components for React, designed to integrate beautifully with Tailwind CSS.
Latest version: 1.7.14-0.0.5

<h3 align="center">
  @headlessui/react
</h3>

<p align="center">
  A set of completely unstyled, fully accessible UI components for React, designed to integrate
  beautifully with Tailwind CSS.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@headlessui/react"><img src="https://img.shields.io/npm/dt/@headlessui/react.svg" alt="Total Downloads"></a>
  <a href="https://github.com/tailwindlabs/headlessui/releases"><img src="https://img.shields.io/npm/v/@headlessui/react.svg" alt="Latest Release"></a>
  <a href="https://github.com/tailwindlabs/headlessui/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@headlessui/react.svg" alt="License"></a>
</p>

## Installation

```sh
npm install @headlessui/react
```

## Documentation

For full documentation, visit [headlessui.dev](https://headlessui.dev/react/menu).

## Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)

For casual chit-chat with others using the library:

[Join the Tailwind CSS Discord Server](https://discord.gg/7NF8GNe)
npm package: @nextbusiness/react-pdf-fns
Description: React-pdf helper functions
Author: Diego Muracciole
Latest version: 3.1.2

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-fns

> React-pdf helper functions

## How to install

```sh
yarn add @nextbusiness/react-pdf-fns
```
npm package: @nextbusiness/react-pdf-font
Description: Register font and emoji source for react-pdf document
Author: Diego Muracciole
Latest version: 4.0.3

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-font
npm package: @nextbusiness/react-pdf-image
Description: Parses the images in png or jpeg format for react-pdf document
Author: Diego Muracciole
Latest version: 3.0.3

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-image
npm package: @nextbusiness/react-pdf-layout
Description: Resolve document component's layout
Author: Diego Muracciole
Latest version: 4.4.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-layout
npm package: @nextbusiness/react-pdf-pdfkit
Description: A PDF generation library for Node.js
Author: Devon Govett
Latest version: 4.0.4

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-pdfkit

A JavaScript PDF generation library for Node and the browser.

## Acknowledges

This project is a fork of [pdfkit](https://github.com/foliojs/pdfkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Description

PDFKit is a PDF document generation library for Node and the browser that makes creating complex, multi-page, printable documents easy.
It's written in CoffeeScript, but you can choose to use the API in plain 'ol JavaScript if you like. The API embraces
chainability, and includes both low level functions as well as abstractions for higher level functionality. The PDFKit API
is designed to be simple, so generating complex documents is often as simple as a few function calls.

Check out some of the [documentation and examples](http://pdfkit.org/docs/getting_started.html) to see for yourself!
You can also read the guide as a [self-generated PDF](http://pdfkit.org/docs/guide.pdf) with example output displayed inline.
If you'd like to see how it was generated, check out the README in the [docs](https://github.com/devongovett/pdfkit/tree/master/docs)
folder.

You can also try out an interactive in-browser demo of PDFKit [here](http://pdfkit.org/demo/browser.html).

## Installation

Installation uses the [npm](http://npmjs.org/) package manager. Just type the following command after installing npm.

    npm install @nextbusiness/react-pdf-pdfkit

## Features

- Vector graphics
  - HTML5 canvas-like API
  - Path operations
  - SVG path parser for easy path creation
  - Transformations
  - Linear and radial gradients
- Text
  - Line wrapping
  - Text alignments
  - Bulleted lists
- Font embedding
  - Supports TrueType (.ttf), OpenType (.otf), WOFF, WOFF2, TrueType Collections (.ttc), and Datafork TrueType (.dfont) fonts
  - Font subsetting
  - See [fontkit](http://github.com/devongovett/fontkit) for more details on advanced glyph layout support.
- Image embedding
  - Supports JPEG and PNG files (including indexed PNGs, and PNGs with transparency)
- Annotations
  - Links
  - Notes
  - Highlights
  - Underlines
  - etc.

## Coming soon!

- Patterns fills
- Outlines
- PDF Security
- Higher level APIs for creating tables and laying out content
- More performance optimizations
- Even more awesomeness, perhaps written by you! Please fork this repository and send me pull requests.

## Documentation

For complete API documentation and more examples, see the [PDFKit website](http://pdfkit.org/).

## License

PDFKit is available under the MIT license.
npm package: @nextbusiness/react-pdf-png-js
Description: A PNG decoder in JS
Author: Devon Govett
Latest version: 3.0.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-png-js

A PNG decoder in JS for the canvas element or Node.js.

## Acknowledges

This project is a fork of [png.js](https://github.com/foliojs/png.js) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## About this fork

> Updated to 977b857a11676c1e720e79ed8d9178a005a9abd6

- Build node and browser specific bundles
- Uses rollup for build

## Browser Usage

Simply include png.js and zlib.js on your HTML page, create a canvas element, and call PNG.load to load an image.

    <canvas></canvas>
    <script src="zlib.js"></script>
    <script src="png.js"></script>
    <script>
        var canvas = document.getElementsByTagName('canvas')[0];
        PNG.load('some.png', canvas);
    </script>

The source code for the browser version resides in `png.js` and also supports loading and displaying animated PNGs.

## Node.js Usage

Install the module using npm

    sudo npm install png-js

Require the module and decode a PNG

    import PNG from 'png-js';
    PNG.decode('some.png', function(pixels) {
        // pixels is a 1d array (in rgba order) of decoded pixel data
    });

You can also call `PNG.load` if you want to load the PNG (but not decode the pixels) synchronously. If you already
have the PNG data in a buffer, simply use `new PNG(buffer)`. In both of these cases, you need to call `png.decode`
yourself which passes your callback the decoded pixels as a buffer. If you already have a buffer you want the pixels
copied to, call `copyToImageData` with your buffer and the decoded pixels as returned from `decodePixels`.
npm package: @nextbusiness/react-pdf-primitives
Description: Define uninitialized elements
Author: Diego Muracciole
Latest version: 4.1.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-primitives
npm package: @nextbusiness/react-pdf-reconciler
Description: Define uninitialized elements
Author: Diego Muracciole
Latest version: 1.1.4

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-reconciler
npm package: @nextbusiness/react-pdf-stylesheet
Description: A styles engine for Node and the browser
Author: Diego Muracciole
Latest version: 6.1.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-stylesheet

> React-pdf styles engine

## How to install

```sh
yarn add @nextbusiness/react-pdf-stylesheet
```

## How it works

```js
import stylesheet from '@nextbusiness/react-pdf-stylesheet';

const container = {
  width: 400,
  height: 600,
  orientation: 'portrait',
};

const style = {
  margin: 20,
  width: '50vw',
  height: '20vh',
  borderRadius: 5,
  fontWeight: 'semibold',
  borderBottom: '2 solid yellow',
  '@media max-width: 500': {
    backgroundColor: 'rgb(255, 0, 0)',
  },
};

const computed = stylesheet(container, style);

// Computed
// {
//   width: 200,
//   height: 120,
//   marginTop: 20,
//   marginLeft: 20,
//   marginRight: 20,
//   marginBottom: 20,
//   marginBottom: 20,
//   borderTopLeftRadius: 5,
//   borderTopRightRadius: 5,
//   borderBottomLeftRadius: 5,
//   borderBottomRightRadius: 5,
//   fontWeight: 600,
//   borderBottomWidth: 2,
//   borderBottomStyle: 'solid',
//   borderBottomColor: 'yellow',
//   backgroundColor: '#FF0000'
// }
```

This library exports a `stylesheet` function that takes two arguments:

- _container_: Container where the styles are being computed into. It specifies the `width` and `height` in points (needed for media queries and unit conversions), and optionally the container `orientation` (needed for certain media queries).
- _style_: Style to be computed. JS object with raw styles that you would like to get in a normalized format.

## License

MIT © [Diego Muracciole](http://github.com/diegomura)
npm package: @nextbusiness/react-pdf-textkit
Description: An advanced text layout framework
Latest version: 6.0.0

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-textkit

## Acknowledges

This project is a fork of [textkit](https://github.com/foliojs/textkit) by @devongovett and continued under the scope of this project since it has react-pdf specific features. Any recongnition should go to him and the original project mantainers.

## Layout process

1. split into paragraphs
2. get bidi runs and paragraph direction
3. font substitution - map to resolved font runs
4. script itemization
5. font shaping - text to glyphs
6. line breaking
7. bidi reordering
8. justification
9. get a list of rectangles by intersecting path, line, and exclusion paths
10. perform line breaking to get acceptable break points for each fragment
11. ellipsize line if necessary
12. bidi reordering
13. justification
npm package: @nextbusiness/react-pdf-types
Description: React-pdf TypeScript definitions
Author: Diego Muracciole
Latest version: 2.9.1

<p align="center">
  <img src="https://user-images.githubusercontent.com/5600341/27505816-c8bc37aa-587f-11e7-9a86-08a2d081a8b9.png" height="280px">
</p>

# @nextbusiness/react-pdf-types

> React-pdf TypeScript definitions

## How to install

```sh
yarn add @nextbusiness/react-pdf-types
```

## License

MIT © [Diego Muracciole](http://github.com/diegomura)