open-index/open-npm huggingface dataset:
npm package: @jakubmazanec/changesets-changelog
Description: Changelog for projects using Changesets.
Author: Jakub Mazanec
Latest version: 2.0.16

<!-- header -->
<div align="center">

# @jakubmazanec/changesets-changelog

Changelog for projects using Changesets.

</div>
<!-- header -->

## Installation

```sh
npm install @jakubmazanec/changesets-changelog
```

<!-- prerequisites -->

#### Prerequisites

- Node.js 24 or later
- TypeScript 5 or later
<!-- prerequisites -->

## Usage

🚧 This section is under development. Please check back later for updates.

## Documentation

See [API reference](./docs) for auto-generated documentation.

## Contributing

If you want to contribute, see [CONTRIBUTING](./CONTRIBUTING.md) for details.

## License

This package is licensed under the MIT license. See [LICENSE](./LICENSE.md) for details.
npm package: @jakubmazanec/eslint-config
Description: ESLint config for TypeScript projects.
Author: Jakub Mazanec
Latest version: 4.1.12

<!-- header -->
<div align="center">

# @jakubmazanec/eslint-config

ESLint config for TypeScript projects.

</div>
<!-- header -->

## Installation

```sh
npm install @jakubmazanec/eslint-config
```

<!-- prerequisites -->

#### Prerequisites

- Node.js 24 or later
- TypeScript 5 or later
<!-- prerequisites -->

## Usage

🚧 This section is under development. Please check back later for updates.

## Contributing

If you want to contribute, see [CONTRIBUTING](./CONTRIBUTING.md) for details.

## License

This package is licensed under the MIT license. See [LICENSE](./LICENSE.md) for details.
npm package: @jakubzet/use-openweathermap-api
Description: React hook for fetching and displaying weather data using OpenWeatherMap API (https://openweathermap.org/)
Author: jakubzet
Latest version: 1.0.0

# @jakubzet/use-openweathermap-api

> React hook for fetching and displaying weather data using OpenWeatherMap API

[![NPM](https://img.shields.io/npm/v/@jakubzet/use-openweathermap-api.svg)](https://www.npmjs.com/package/@jakubzet/use-openweathermap-api) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jakubzet/use-openweathermap-api
```

## Usage

```tsx
import * as React from "react";

import { useOpenWeatherMapAPI } from "@jakubzet/use-openweathermap-api";

const Example = () => {
  const [state, fetchWeather] = useOpenWeatherMapAPI({
    key: "REPLACE_ME_WITH_API_KEY",
    queryConfig: {
      cityName: "Warszawa",
      countryCode: "pl"
    },
    queryType: "name",
    units: "metric"
  });

  return (
    <main>
      <h1>Demo of useOpenWeatherMapAPI hook</h1>

      <section>
        <h4>Loading state:</h4>
        <p>{state.pending ? "true" : "false"}</p>
      </section>

      <section>
        <h4>Error:</h4>
        <p>
          {state.error
            ? `Error: ${state.error.cod} - ${state.error.message}`
            : "Nope"}
        </p>
      </section>

      <section>
        <h4>Data:</h4>
        {state.data && state.data.name && state.data.main ? (
          <>
            <p>Weather in {state.data.name}:</p>
            <ul>
              <li>Currently: {state.data.main.temp} degrees</li>
              <li>Max: {state.data.main.temp_max} degrees</li>
              <li>Min: {state.data.main.temp_min} degrees</li>
            </ul>
          </>
        ) : (
          <p>Nope</p>
        )}
      </section>

      <button onClick={fetchWeather}>
        Fetch data (please remember to add your API key to config beforehand)
      </button>
    </main>
  );
};
```

## License

MIT © [jakubzet](https://github.com/jakubzet)
npm package: @jakxz/docgen-typescript
Description: [![Build Status](https://github.com/jakxz/react-docgen-typescript/actions/workflows/nodejs.yml/badge.svg)](https://github.com/jakxz/react-docgen-typescript/actions/workflows/nodejs.yml)
Latest version: 3.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm package: @jakxz/functional-or
Description: curryable OR for predicate functions
Author: Jason Kurian
Latest version: 2.0.2

<a name="module_@jakxz/functional-or"></a>

## @jakxz/functional-or

<a name="exp_module_@jakxz/functional-or--functionalOr"></a>

### functionalOr(...fns) ⇒ <code>function</code> ⏏

A utility for composing a set of predicate functions that check against the
curried data to find if one of the predicate conditions is met. This is most
helpful when your predicates are relatively complex and you want to compose
the checks in existing piped or composed functions; for the simplest example,
if you have:

```js
const isFoo = (str) => str === "foo";
const isBar = (str) => str === "bar";
```

you can compose these functions into:

```js
import or from "@jakxz/functional-or";

const isFooOrBar = or(isFoo, isBar);
```

and use it like so:

```js
const results = ["foo", "bar", "baz"].filter(isFooOrBar);
```

If you don't want to pass any functions at all, you can just check the truthyness
of your data args:

```js
const isAnyTruthy = or()("x", "y", 0, null);
```

**Kind**: Exported function

| Param  | Description                                     |
| ------ | ----------------------------------------------- |
| ...fns | pass in any number of functions or none at all. |
npm package: @jakxz/mdx-mermaid
Description: Display mermaid diagrams in mdx files.
Author: Sam Wall
Latest version: 2.0.0

# mdx-mermaid

Plug and play Mermaid in MDX

[![npm version](https://badge.fury.io/js/mdx-mermaid.svg)][npm]
[![GitHub license](https://img.shields.io/github/license/sjwall/mdx-mermaid)][license]
[![build](https://github.com/sjwall/mdx-mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/sjwall/mdx-mermaid/actions/workflows/build.yml)
[![codecov](https://codecov.io/gh/sjwall/mdx-mermaid/branch/main/graph/badge.svg?token=OBSGK4GGX8)](https://codecov.io/gh/sjwall/mdx-mermaid)
[![Maintainability](https://api.codeclimate.com/v1/badges/9d89c7483bb1a906ecdf/maintainability)](https://codeclimate.com/github/sjwall/mdx-mermaid/maintainability)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)][pr]

Use [Mermaid][mermaid] in `.md`, `.mdx`, `.jsx` and `.tsx` files with ease.

Based off the answer [here][inspire] by unknown.

More documentation available [here][documentation]

Use version `^1.3.0` for `@mdxjs/mdx` `v1` and `Docusaurus`.

Use version `^2.0.0` for `@mdxjs/mdx` `v2`.

## Quick start with Docusaurus

Install `mdx-mermaid` and `mermaid`

`mermaid` is a peer dependency so you can specify the version to use

```bash
yarn add mdx-mermaid@^v1.3.0 mermaid
```

Update `docusaurus.config.js`

```js
async function createConfig() {
  const mdxMermaid = await import("mdx-mermaid");

  return {
    presets: [
      [
        "classic",
        {
          docs: {
            remarkPlugins: [mdxMermaid.default],
          },
        },
      ],
    ],
  };
}

module.exports = createConfig;
```

Use code blocks in `.md` or `.mdx` files:

````md
```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```
````

Use the component in `.mdx`, `.jsx` or `.tsx` files:

```jsx
import { Mermaid } from "mdx-mermaid/Mermaid";

<Mermaid
  chart={`graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
`}
/>;
```

There are more examples [here][examples]

## License

[MIT][license] © [Samuel Wall][author]

<!-- Definitions -->

[license]: https://github.com/sjwall/mdx-mermaid/blob/main/license
[author]: https://samuelwall.co.uk
[npm]: https://www.npmjs.com/package/mdx-mermaid
[mermaid]: http://mermaid-js.github.io/mermaid/
[inspire]: https://github.com/facebook/docusaurus/issues/1258#issuecomment-594393744
[pr]: http://makeapullrequest.com
[examples]: https://sjwall.github.io/mdx-mermaid/docs/examples/
[documentation]: https://sjwall.github.io/mdx-mermaid/
npm package: @jakxz/push-dir
Description: Push a directory to a remote branch
Latest version: 0.4.1

# push-dir

[![Version][version-badge]][version-href]
[![Build status][build-badge]][build-href]

Push the contents of a directory to a remote branch

* No messing around with `.gitignore` (no need to commit the directory)
* Perfect for pushing a `dist`/`build` directory to `gh-pages`

## install

```
npm install push-dir
```

## example

```
push-dir --dir=build --branch=gh-pages
```

## usage

```
Usage: push-dir {OPTIONS}

Required Options:

--dir
The name of the directory whose contents will be committed to branch

--branch
The name of the remote branch to push to

Advanced Options:

--remote
The name of the remote to push to (defaults to origin)

--cleanup
Whether to delete the local branch after creating

--local-branch-name
Force the name of the local branch that is pushed to the remote branch

--allow-unclean
Whether to attempt push even if git unclean

--overwrite-local
Whether to override a local branch of the same name, if exists

--force
Alias for both --allow-unclean and --overwrite-local

--verbose
Display stdout and stderr from internal commands
```


[version-badge]: https://img.shields.io/npm/v/push-dir.svg
[version-href]: https://www.npmjs.com/package/push-dir

[build-badge]: https://travis-ci.org/L33T-KR3W/push-dir.svg?branch=master
[build-href]: https://travis-ci.org/L33T-KR3W/push-dir
npm package: @jakxz/react-user-avatar
Description: React component for a user avatar with fallback to colored initials
Author: Will Binns-Smith
Latest version: 1.10.0

# React UserAvatar

A bare-bones user avatar display with support for falling back to using the user's initials on a colored background as the avatar.

![](https://cloud.githubusercontent.com/assets/755844/11612136/7dc28cae-9ba2-11e5-8c6e-999d5d524642.png)

## Installation

`npm install -S react-user-avatar`

## Usage

```js
  <UserAvatar size="48" name="Will Binns-Smith" />
  <UserAvatar size="48" name="Will Binns-Smith" src="https://pbs.twimg.com/profile_images/429442426038538240/6Ac9kykG_400x400.jpeg" />
  <UserAvatar size="48" name="John Doe" colors={['#ccc', '#fafafa', '#ccaabb']}/>
  <UserAvatar size="48" name="Mary Ann Gilligans" />
  <UserAvatar size="48" name="Jane Doe" color="#FFF" />
  <UserAvatar size="48" name="Madonna" />
```

This module uses react-style inline styles to narrow the api, yet allows for reasonable extensibility by exposing
a number of DOM classes. Take a look (or simply use) `example.css` for ideas.

The fallback avatar's color may be set by passing in the `color` prop, or you can customize the range of colors
used by passing in an array of `colors`. The component uses a simple calculation to consistently use the same
color for the same user's name every time.

If the component determines that the color chosen was visually light, it will apply a `UserAvatar--light` class to the root element.
If the color chosen was dark, it will apply `UserAvatar--dark`. Take advantage of these to use the appropriately colored text or border
when styling the component.
npm package: @jakxz/tw-classnames
Description: This is a convenience wrapper around [`tailwind-merge`](https://npm.im/tailwind-merge) and [`clsx`](https://npm.im/clsx).
Latest version: 1.2.3

# @jakxz/tw-classnames

This is a convenience wrapper around [`tailwind-merge`](https://npm.im/tailwind-merge) and [`clsx`](https://npm.im/clsx).

## Usage

```ts
import { classNames } from "@jakxz/tw-classnames";
// OR
import howeveryouwannanameit from "@jakxz/tw-classnames";
```

You can also use [`twMerge`](https://github.com/dcastil/tailwind-merge/blob/main/docs/features.md) directly as needed:

```ts
import { twMerge } from "@jakxz/tw-classnames";
```

## Contributing & Releasing

1. Fork it ( https://github.com/jakxz/tw-classnames/fork )
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`), do not modify the version in `package.json`
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request

The PR will be squash merged following the [conventional commits spec](https://www.conventionalcommits.org/en/v1.0.0/#specification).

We use `npx standard-version -a` to generate the CHANGELOG and version update according to the commits.
npm package: @jakzo/eternal-wordle
Description: Yet another Wordle clone.
Latest version: 0.1.7

# Eternal Wordle

> Yet another Wordle clone.

It's [Wordle](https://www.nytimes.com/games/wordle/index.html) but with multiple words being guessed simultaneously (like [Dordle](https://zaratustra.itch.io/dordle), [Quordle](quordle.com) or [Octordle](https://octordle.com/)) but also when you guess a word, it is replaced with a new one. The game keeps going until you fail to guess a word.
npm package: @jakzo/project
Description: Javascript project tooling in a box.
Author: Jack Field
Latest version: 0.0.3

# @jakzo/project

_Javascript project tooling in a box._

## Usage

Run `yarn init` to create a blank project (no `.gitignore` file, no tooling installed, just a `package.json`) then run:

```sh
yarn add -D @jakzo/project
```

**That's it!** All the tooling should now be set up. Note that you may need to restart your IDE for the integrations to pick up the changes.

### Why use this instead of Yeoman or even just copying a boilerplate folder?

For **free maintainence**. This package is more than just a template for code; all the tooling and configuration is inside a dependency which means that by running `yarn upgrade @jakzo/project --latest` your tooling will be updated to the current state-of-the-art JS project setup. Any bugs in tooling can be fixed and tool dependency versions upgraded. These upgrades can even be automated with a bot like [Renovate](https://github.com/renovatebot/renovate). With templates they help you get started quickly but leave all the maintenance to you. If you have many separate repositories, the maintenance time savings add up quickly.

### Why would I not want to use this?

If you require a unique tooling setup which the project's setup is not compatible with or you don't like my choice of tooling. Right now it only caters for a narrow set of projects but in the future I'd like to see it be made modular where you can create extensions which add new technologies and associated linting rules. You can always start off with it then eject when you need.

### How do I eject?

That's a manual process for now. The basic idea is to remove the dependency and add in all the tooling yourself. One way you could do this is by installing all the packages depended on by `@jakzo/project`, replacing all the config files with the config that they retrieve from `node_modules/@jakzo/project`, then run `yarn remove @jakzo/project`.
npm package: @jakzo/stream-notifier
Description: Sends link to unlisted YouTube stream on Discord.
Author: jakzo
Latest version: 1.0.0

Posts a link to your latest currently-running Youtube live stream to Discord.

## Usage

- Create a file in the current directory named `discord_webhook.json` then create a Discord webhook URL for a channel and put in this file as a JSON string
  - Contents should look like `"https://discordapp.com/api/webhooks/123.../xyz..."`
- Start with: `npx @jakzo/stream-notifier`
npm package: @jakzo/type-gymnastics
Description: Collection of crazy advanced types in TypeScript.
Author: jakzo
Latest version: 1.0.14

> Collection of crazy advanced types in TypeScript. Just for fun, not intended for use in production.

TypeScript's type system is pretty powerful and as it turns out, is turing-complete, meaning any possible logic can be written with it. You may have seen types pushed to the limit in blog posts like [this](https://aphyr.com/posts/342-typing-the-technical-interview). This repository is my own collection of insane utility types.

The available types are listed in the [API documentation](https://jakzo.github.io/type-gymnastics/modules.html).

### Example

```sh
npm install --save-dev @jakzo/type-gymnastics
```

your-code.ts:

```ts
import type { Math, Problems } from "@jakzo/type-gymnastics";

type Result = Math.Evaluate<"12 + 34 - 5*(6*7 % 8) + 9">;
// The type of `Result` is: 45
const b: Result = 45;

type NumQueensToPlace = 8;
type GridSize = 8;
type Board = Problems.NQueensVisualized<
  Problems.NQueens<NumQueensToPlace, GridSize>,
  GridSize
>;
// The type of `Board` is: "
// ♕ ◼️ ◻️ ◼️ ◻️ ◼️ ◻️ ◼️
// ◼️ ◻️ ◼️ ◻️ ♕ ◻️ ◼️ ◻️
// ◻️ ◼️ ◻️ ◼️ ◻️ ◼️ ◻️ ♕
// ◼️ ◻️ ◼️ ◻️ ◼️ ♕ ◼️ ◻️
// ◻️ ◼️ ♕ ◼️ ◻️ ◼️ ◻️ ◼️
// ◼️ ◻️ ◼️ ◻️ ◼️ ◻️ ♕ ◻️
// ◻️ ♕ ◻️ ◼️ ◻️ ◼️ ◻️ ◼️
// ◼️ ◻️ ◼️ ♕ ◼️ ◻️ ◼️ ◻️"
```

You can try it out at the [TypeScript Playground](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBDAnmApnA3nAsgQxgCwBo4AFKCAIwBsUQBnOAXzgDNyQ4AiAAQCscA1gC8IAeiSoAtAHNEIAHY46MYAGM6nANwAobRLQAlFHQCuVeAF5sefADoAogDccVE3hQAeTgEYATHABqOABmABY4STgAVgAqAAoANhiAdjgAUjgADgBKQLgATk4APh1RUTgAFXw0fTgIFjgAAyNTc0a4YDoALjhQqO1VCHllOAoelrNLXqidPWQ0ADkTEABFExQUYYqIEiocVTQrTJ1agHEoYAATAGVgIUOsk-m4ACEIHChLuCsyShp6WwLNYbYYANU6biodxQlw82jgpHI1FodEBwM2dA8S1W6wx212+xQxHOV1u9yKhHhcBJN2h2hK2jKlWqCGe9Sabw+l3anR6nEZ5UAqmRwQA-pIB4P7ggG-SCXiqUyiXS0VigVKuWqxXCxWy6UqrUK+Vq7USwUqo3qg3Co26i3m23i036u2OzXKpkaw2Os32ple41OuX8oA).

### Why?

For fun. 😄

### Usage Tips

#### Restarting TypeScript server

If you're in VSCode, **use this command whenever things start going wonky**:

```
CTRL/CMD+SHIFT+P -> Restart TypeScript Server
```

The TS server will frequently get into a broken state while you're in the process of typing code so you may find that you quickly memorize this command. 🙂

#### Efficiently chaining function calls

When using the library, you will notice that many exported functions have an equivalent which begins with a `_`. This is because the library uses its own representation for certain data types (most notably numbers). The `_` functions accept the internal representations so that functions can be chained together without constant converting to and from internal types.

For example, this library represents numbers as binary strings instead of TypeScript's `number` type. You can do `String.Repeat<"a", Math.Fibonacci<3>>` and it will work but if you want (or in some cases need) more efficiency, you can do this which will avoid converting the binary number to a number then back to a binary number:

```ts
type R = String._Repeat<"a", Math._Fibonacci<Integer.FromDecimal<3>>>;
```
npm package: @jala-banyu/accordion
Description: Collapse display a list of high-level options that can expand/collapse to reveal more information.
Author: Dika Mahendra
Latest version: 3.0.10

# @jala-banyu/accordion

Accordion display a list of high-level options that can expand/collapse to reveal more information.

Please refer to the [documentation](https://nextui.org//docs/components/accordion) for more information.

## Installation

```sh
yarn add @jala-banyu/accordion
# or
npm i @jala-banyu/accordion
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/nextui-org/nextui/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/nextui-org/nextui/blob/master/LICENSE).
npm package: @jala-banyu/alert
Description: Alert is a notification that typically appears as a small popup with text, an image, or a button.
Author: Dika Mahendra
Latest version: 1.1.6

# @jala-banyu/alert

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/alert
# or
npm i @jala-banyu/alert
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/aria-utils
Description: A package for managing @react-aria Banyu utils.
Author: Muhammad Amien
Latest version: 1.1.0

# @jala-banyu/aria-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/aria-utils
# or
npm i @jala-banyu/aria-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/avatar
Description: The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Author: Muhammad Amien
Latest version: 6.0.11

# @jala-banyu/avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/avatar
# or
npm i @jala-banyu/avatar
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/breadcrumbs
Description: Breadcrumbs display a hierarchy of links to the current page or resource in an application.
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/breadcrumbs

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/breadcrumbs
# or
npm i @jala-banyu/breadcrumbs
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/button
Description: Buttons allow users to perform actions and choose with a single tap.
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/button

Buttons allow users to perform actions and choose with a single tap.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/button
# or
npm i @jala-banyu/button
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/card
Description: Card is a container for text, photos, and actions in the context of a single subject.
Author: Muhammad Amien
Latest version: 6.0.11

# @jala-banyu/card

Card is a container for text, photos, and actions in the context of a single subject.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/card
# or
npm i @jala-banyu/card
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/checkbox
Description: Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Author: Dika Mahendra
Latest version: 3.0.10

# @jala-banyu/checkbox

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/checkbox
# or
npm i @jala-banyu/checkbox
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/chip
Description: A Chip is a small block of essential information that represent an input, attribute, or action.
Author: Dika Mahendra
Latest version: 3.0.10

# @jala-banyu/chip

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/chip
# or
npm i @jala-banyu/chip
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/code
Description: Code is a component used to display inline code.
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/code

Code is a component used to display inline code.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/code
# or
npm i @jala-banyu/code
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/divider
Description: . A separator is a visual divider between two groups of content
Author: Muhammad Amien
Latest version: 4.1.1

# @jala-banyu/divider

Divider is a component that separates content in a page.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/divider
# or
npm i @jala-banyu/divider
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/dropdown
Description: A dropdown displays a list of actions or options that a user can choose.
Author: Muhammad Amien
Latest version: 1.2.2

# @jala-banyu/dropdown

Displays a list of actions or options that a user can choose.

Please refer to the [documentation](https://localhost:3000/components/dropdown) for more information.

## Installation

```sh
yarn add @jala-banyu/dropdown
# or
npm i @jala-banyu/dropdown
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/framer-transitions
Description: A set of framer motion transitions for react
Author: Muhammad Amien
Latest version: 1.1.0

# !banyu/framer-transitions

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add !banyu/framer-transitions
# or
npm i !banyu/framer-transitions
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/icons
Description: Banyu icons set for React by JALA
Author: Muhammad Amien
Latest version: 1.0.8

# jala-icons
![Node](https://img.shields.io/badge/-Node.js-808080?logo=node.js&colorA=404040&logoColor=66cc33)

``Jala icon`` is an icon library designed for the react project by Jala Tech, provided to help develop the JALA Web App

Visit documentation page: https://banyu-icons.vercel.app/

## Installation
Choose the following package manager used in your project
#### npm
```
npm install @jala-banyu/icons --save
```
#### yarn
```
yarn add @jala-banyu/icons
```
#### pnpm
```
pnpm install @jala-banyu/icons --save
```

## Example:
This is an example how to use this library:
```
import {JalaBiomass,JalaAge} from '@jala-banyu/iconss'

function App() {

  return (
    <>
        <JalaBiomass/>
        <JalaAge/>
    </>
  )
}

export default App

```
npm package: @jala-banyu/image
Description: A simple image component
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/image

The Image component is used to display images with support for fallback.

Please refer to the [documentation](https://localhost:3000/docs/components/image) for more information.

## Installation

```sh
yarn add @jala-banyu/image
# or
npm i @jala-banyu/image
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/input
Description: The input component is designed for capturing user input within a text field.
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/input

Input is a component that allows users to enter text. It can be used to get user inputs in forms, search fields, and more.

This package contains the Input component and the TextArea component.

Please refer to the [documentation](https://localhost:3000/docs/components/input) for more information.

## Installation

```sh
yarn add @jala-banyu/input
# or
npm i @jala-banyu/input
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/kbd
Description: The keyboard key components indicates which key or set of keys used to execute a specificv  action
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/kbd

Keyboard key or kbd is a component to display which key or combination of keys performs a given action.

Please refer to the [documentation](https://localhost:3000/docs/components/kbd) for more information.

## Installation

```sh
yarn add @jala-banyu/kbd
# or
npm i @jala-banyu/kbd
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/link
Description: Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/link

Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>` tag.

Please refer to the [documentation](https://localhost:3000/docs/components/link) for more information.

## Installation

```sh
yarn add @jala-banyu/link
# or
npm i @jala-banyu/link
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/listbox
Description: A listbox displays a list of options and allows a user to select one or more of them.
Author: Dika Mahendra
Latest version: 3.0.10

# @jala-banyu/listbox

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/listbox
# or
npm i @jala-banyu/listbox
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/menu
Description: A menu displays a list of options and allows a user to select one or more of them.
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/menu

A menu displays a list of options and allows a user to select one or more of them.

Please refer to the [documentation](https://localhost:3000/docs/components/menu) for more information.

## Installation

```sh
yarn add @jala-banyu/menu
# or
npm i @jala-banyu/menu
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/modal
Description: Displays a dialog with a custom content that requires attention or provides additional information.
Author: Muhammad Amien
Latest version: 1.0.5

# @jala-banyu/modal

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/modal
# or
npm i @jala-banyu/modal
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/pagination
Description: The Pagination component allows you to display active page and navigate between multiple pages.
Author: Dika Mahendra
Latest version: 1.1.40

# @jala-banyu/pagination

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/pagination
# or
npm i @jala-banyu/pagination
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/popover
Description: A popover is an overlay element positioned relative to a trigger.
Author: Muhammad Amien
Latest version: 5.0.10

# @jala-banyu/popover

Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.

Please refer to the [documentation](https://localhost:3000/docs/components/popover) for more information.

## Installation

```sh
yarn add @jala-banyu/popover
# or
npm i @jala-banyu/popover
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/progress
Description: Progress bars show either determinate or indeterminate progress of an operation over time.
Author: Dika Mahendra
Latest version: 1.1.1

# @jala-banyu/progress

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/progress
# or
npm i @jala-banyu/progress
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/radio
Description: Radios allow users to select a single option from a list of mutually exclusive options.
Author: Dika Mahendra
Latest version: 1.0.2

# @jala-banyu/radio

Radios allow users to select a single option from a list of mutually exclusive options.

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/radio
# or
npm i @jala-banyu/radio
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/react
Description: Banyu core React UI library
Author: Muhammad Amien
Latest version: 1.3.12

<p align="center">
  <a href="#">
      <h1 align="center">Banyu Design</h1>
  </a>
</p>
</br>
<p align="center">
  <a href="https://github.com/jrgarciadev/Banyu/blob/main/LICENSE">
    <img src="https://img.shields.io/npm/l/@jala-banyu/react?style=flat" alt="License">
  </a>
  <a href="https://codecov.io/gh/jrgarciadev/Banyu">
    <img src="https://codecov.io/gh/jrgarciadev/Banyu/branch/main/graph/badge.svg?token=QJF2QKR5N4" alt="codecov badge">
  </a>
  <!-- <a href="https://github.com/Banyu-org/Banyu/actions/workflows/main.yaml">
    <img src="https://github.com/Banyu-org/Banyu/actions/workflows/main.yaml/badge.svg" alt="CI/CD Banyu">
  </a> -->
  <a href="https://www.npmjs.com/package/@jala-banyu/react">
    <img src="https://img.shields.io/npm/dm/@jala-banyu/react.svg?style=flat-round" alt="npm downloads">
  </a>
</p>

<p align="center">
  <a rel="noopener noreferrer" target="_blank" href="https://www.vercel.com?utm_source=Banyu&utm_marketing=oss">
    <img height="34px" src="https://raw.githubusercontent.com/Banyu-org/Banyu/main/apps/docs/public/deployed-on-vercel.svg" alt="Deployed on vercel">
  </a>
</p>

### Community

We're excited to see the community adopt Banyu, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!

- [GitHub Discussions](https://github.com/Atnic/banyu/discussions)

## Contributing

Contributions are always welcome!

See [CONTRIBUTING.md](https://github.com/Atnic/banyu/blob/main/CONTRIBUTING.md) for ways to get started.

Please adhere to this project's [CODE_OF_CONDUCT](https://github.com/Atnic/banyu/blob/main/CODE_OF_CONDUCT.md).

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @jala-banyu/react-rsc-utils
Description: A set of utilities for react compatible with RSC
Author: Muhammad Amien
Latest version: 1.1.0

# @jala-banyu/react-rsc-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/react-rsc-utils
# or
npm i @jala-banyu/react-rsc-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/react-utils
Description: A set of utilities for react on client side
Author: Muhammad Amien
Latest version: 1.1.0

# @jala-banyu/react-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/react-utils
# or
npm i @jala-banyu/react-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/ripple
Description: A simple implementation to display a ripple animation when the source component is clicked
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/ripple

This is a component that creates a ripple effect on the screen.

Please refer to the [documentation](https://localhost:3000/docs/components/button) for more information.

## Installation

```sh
yarn add @jala-banyu/ripple
# or
npm i @jala-banyu/ripple
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/scroll-shadow
Description: A component that applies top and bottom shadows when content overflows on scroll.
Author: Dika Mahendra
Latest version: 3.0.10

# @jala-banyu/scroll-shadow

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/scroll-shadow
# or
npm i @jala-banyu/scroll-shadow
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/select
Description: A select displays a collapsible list of options and allows a user to select one of them.
Author: Dika Mahendra
Latest version: 3.0.10

# @jala-banyu/select

Skeleton is a placeholder to show a loading state and the expected shape of a component.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/select
# or
npm i @jala-banyu/select
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/shared-icons
Description: Internal icons set, commonly used in the components stories
Author: Muhammad Amien
Latest version: 1.2.2

# @jala-banyu/shared-icons

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/shared-icons
# or
npm i @jala-banyu/shared-icons
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/shared-utils
Description: A Quick description of the component
Author: Muhammad Amien
Latest version: 1.1.1

# @jala-banyu/system

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/system
# or
npm i @jala-banyu/system
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/skeleton
Description: Skeleton is used to display the loading state of some component.
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/skeleton

Skeleton is a placeholder to show a loading state and the expected shape of a component.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/skeleton
# or
npm i @jala-banyu/skeleton
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/spacer
Description: Spacer is a component used to add space between components.
Author: Dika Mahendra
Latest version: 3.0.10

# @jala-banyu/spacer

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/spacer
# or
npm i @jala-banyu/spacer
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/spinner
Description: Loaders express an unspecified wait time or display the length of a process.
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/loading

Spinner express an unspecified wait time or display the length of a process.

Please refer to the [documentation](https://localhost:3000/docs/components/loading) for more information.

## Installation

```sh
yarn add @jala-banyu/loading
# or
npm i @jala-banyu/loading
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/stories-utils
Description: A list of utilities for storybook' stories.
Author: Muhammad Amien
Latest version: 1.1.0

# @jala-banyu/stories-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/stories-utils
# or
npm i @jala-banyu/stories-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/switch
Description: A switch is similar to a checkbox, but represents on/off values as opposed to selection.
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/switch

The Switch component is used as an alternative between checked and not checked states.

Please refer to the [documentation](#) for more information.

## Installation

```sh
yarn add @jala-banyu/switch
# or
npm i @jala-banyu/switch
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/system
Description: Banyu system primitives
Author: Muhammad Amien
Latest version: 1.1.0

# @jala-banyu/system

Banyu system primitives, here you can find the `extendVariants` utility, `BanyuProvider` and some other utilities.

Please refer to the [documentation](https://banyu.org) for more information.

## Installation

```sh
yarn add @jala-banyu/system
# or
npm i @jala-banyu/system
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/system-rsc
Description: Banyu system primitives compatibles with RSC imports
Author: Muhammad Amien
Latest version: 6.0.10

# @jala-banyu/system-rsc

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/system-rsc
# or
npm i @jala-banyu/system-rsc
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/table
Description: Tables are used to display tabular data using rows and columns.
Author: Dika Mahendra
Latest version: 1.0.37

# @jala-banyu/table

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @jala-banyu/table
# or
npm i @jala-banyu/table
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).
npm package: @jala-banyu/tabs
Description: Tabs organize content into multiple sections and allow users to navigate between them.
Author: Muhammad Amein
Latest version: 1.1.4

# @jala-banyu/tabs

Tooltips display a brief, informative message that appears when a user interacts with an element.

Please refer to the [documentation](https://localhost:3000/docs/components/tabs) for more information.

## Installation

```sh
yarn add @jala-banyu/tabs
# or
npm i @jala-banyu/tabs
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/Atnic/banyu/blob/master/CONTRIBUTING.md)
for details.

## Licence

This project is licensed under the terms of the
[MIT license](https://github.com/Atnic/banyu/blob/master/LICENSE).