open-index/open-npm huggingface dataset:
npm package: @htmlos-next/ui
Description: Default component library for htmlOS NEXT.
Author: JCionx
Latest version: 0.0.17

# React + TypeScript + Vite

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

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

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

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

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

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

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @htmlplus/core
Description: The Next generation of UI elements.
Author: Masood Abdolian
Latest version: 1.2.1

# HTMLPLUS

The Next generation of UI elements for modern browsers based on [Custom Elements](https://mdn.io/custom-elements) API. All UI elements are Frameworkless, Flexible, Lightweight, Independent, Customizable, and Configurable.

## Installation

UI Elements is available as an [npm package](https://npmjs.com/package/@htmlplus/core).

npm

```
npm install @htmlplus/core
```

yarn

```
yarn add @htmlplus/core
```

pnpm

```
pnpm install @htmlplus/core
```

## Usage

An example of basic usage of UI elements in React, Angular, Vue, Svelte and etc.

Import dependency into your application.

```js
import '@htmlplus/core';
```

UI elements same as native HTML tags are available.

```html
<plus-switch></plus-switch>
```

## Documentation

Full documentation is available [here](https://htmlplus.io).

## License

Code released under the [MIT License](https://github.com/htmlplus/core/blob/main/LICENSE).
npm package: @htmlplus/ui
Description: The Next generation of UI elements.
Author: Masood Abdolian
Latest version: 1.8.4

# HTMLPLUS

The Next generation of UI elements for modern browsers based on [Custom Elements](https://mdn.io/custom-elements) API. All UI elements are Frameworkless, Flexible, Lightweight, Independent, Customizable, and Configurable.

## Installation

UI Elements is available as an [npm package](https://npmjs.com/package/@htmlplus/ui).

npm

```
npm install @htmlplus/ui
```

yarn

```
yarn add @htmlplus/ui
```

pnpm

```
pnpm install @htmlplus/ui
```

## Usage

An example of basic usage of UI elements in React, Angular, Vue, Svelte and etc.

Import dependency into your application.

```js
import '@htmlplus/ui';
```

UI elements same as native HTML tags are available.

```html
<plus-switch></plus-switch>
```

## Documentation

Full documentation is available [here](https://htmlplus.io).

## License

Code released under the [MIT License](https://github.com/htmlplus/ui/blob/main/LICENSE).
npm package: @htmlplusplus/code-block
Description: Webcomponent code-block following open-wc recommendations
Author: Zach Dodson
Latest version: 1.0.3

# \<code-block>

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Description

Web component that formats text to appear in a box similar to a code block in markdown, with optional copy functionality.

* [NPM](https://www.npmjs.com/package/@htmlplusplus/code-block)
* [GitHub](https://github.com/htmlplusplus/code-block)

---

## Getting Started

### Installation

```bash
npm i @htmlplusplus/code-block
```

### Import

#### HTML

```html
<!-- Import into HTML -->
<script type="module">
  import '@htmlplusplus/code-block/code-block.js';
</script>

<!-- OR -->
<script type="module" src="@htmlplusplus/code-block/code-block.js"></script>

<!-- Place the below tag into your HTML -->
<code-block></code-block>
```

#### JavaScript / TypeScript

```JavaScript
// import into an existing JS module / web component
import '@htmlplusplus/code-block/code-block.js';
```

---

## Usage

### Attributes

```HTML
<!-- Will enable a "Copy" button on the right side of the component, 
 which will copy component contents to clipboard -->
<code-block allow-copy></code-block>

<!-- Border will be white instead of gray -->
<code-block dark-mode></code-block>
```

---

## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

---

## Local Demo with `web-dev-server`

```bash
npm start
```

To run a local development server that serves the basic demo located in `demo/index.html`
npm package: @htmoon/htmoon-uikit
Description: Set of UI components for HTMoon projects
Latest version: 0.10.7

# 🥞 HTMoon UIkit

[![Version](https://img.shields.io/npm/v/@htmoon/htmoon-uikit)](https://www.npmjs.com/package/@htmoon/htmoon-uikit) [![Size](https://img.shields.io/bundlephobia/min/@htmoon/htmoon-uikit)](https://www.npmjs.com/package/@htmoon/htmoon-uikit)

HTMoon UIkit is a set of React components and hooks used to build pages on HTMoon's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @htmoon/htmoon-uikit`

## Setup

### Theme

Before using HTMoon UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@htmoon/htmoon-uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@htmoon/htmoon-uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://pancakeswap.github.io/pancake-uikit/)
npm package: @htmoon/sdk
Description: 🛠 An SDK for building applications on top of HTMoon.
Latest version: 1.0.2

# HTMoon SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/htmoon/htmoon-sdk/workflows/CI/badge.svg)](https://github.com/htmoon/htmoon-sdk)
[![npm version](https://img.shields.io/npm/v/@htmoon/sdk/latest.svg)](https://www.npmjs.com/package/@htmoon/sdk/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@htmoon/sdk/latest.svg)](https://bundlephobia.com/result?p=@htmoon/sdk@latest)

Common library used accross for HTMoon Frontend implementation [https://github.com/bscswap/bscswap-interface](https://github.com/bscswap/bscswap-interface).

In-depth documentation on this SDK is available at [uniswap.org](https://uniswap.org/docs/v2/SDK/getting-started/).

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/htmoon/htmoon-sdk.git
```

Move into the uniswap-sdk working directory

```sh
cd bscswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @htmx/htmx-dark-mode
Description: A custom element for adding a toolbar to a textarea for markdown editing.
Latest version: 0.2.0

# 🥪 HTMX Dark Mode

[![Node CI](https://github.com/katallaxie/htmx-dark-mode-element/actions/workflows/main.yml/badge.svg)](https://github.com/katallaxie/htmx-dark-mode-element/actions/workflows/main.yml)
[![Taylor Swift](https://img.shields.io/badge/secured%20by-taylor%20swift-brightgreen.svg)](https://twitter.com/SwiftOnSecurity)
[![Volkswagen](https://auchenberg.github.io/volkswagen/volkswargen_ci.svg?v=1)](https://github.com/auchenberg/volkswagen)
![GitHub License](https://img.shields.io/github/license/katallaxie/htmx-dark-mode-element-element)

This is a simple HTMX element that can be used to toggle the dark mode on a site.

## Usage

```html
<htmx-dark-mode>
    <input type="checkbox" value="synthwave" />
</htmx-dark-mode>
```

## Attributes

- `dark-theme` - The name of the dark theme (default: dark)
- `light-theme` - The name of the light theme (default: light)

## Installation

```bash
npm install @htmx/htmx-dark-mode
```

Use as a module in your application:

```html
<script src="https://unpkg.com/@htmx/htmx-dark-mode@latest/dist/index.js" type="module"></script>
```

## License

[MIT](/LICENSE)
npm package: @htmx/htmx-toasts
Description: A simple toast notification system for htmx
Author: Sebastian Döll
Latest version: 1.0.5

# 🥪 HTMX Toasts Element

[![Node CI](https://github.com/katallaxie/htmx-toasts-element/actions/workflows/main.yml/badge.svg)](https://github.com/katallaxie/htmx-toasts-element/actions/workflows/main.yml)
[![Taylor Swift](https://img.shields.io/badge/secured%20by-taylor%20swift-brightgreen.svg)](https://twitter.com/SwiftOnSecurity)
[![Volkswagen](https://auchenberg.github.io/volkswagen/volkswargen_ci.svg?v=1)](https://github.com/auchenberg/volkswagen)
![GitHub License](https://img.shields.io/github/license/katallaxie/htmx-toasts-element)

This is a simple HTMX element that can be used to display toasts in your web application.

## Usage

```html
<template>
  <div class="alert" slot="alert">
    <span slot="message"></span>
    <button type="button" class="btn btn-sm btn-outline" aria-label="Close" slot="close">Close</button>
  </div>
</template>
<htmx-toasts
  timeout="3000"
  class="toast"
  role="status"
  aria-live="polite"
  success-class="alert-success"
  error-class="alert-error"
  info-class="alert-info"
  warn-class="alert-warning"></htmx-toasts>
```

## Attributes

- `timeout` - The time in milliseconds that the toast will be displayed.
- `success-class` - The class to apply to the toast when it is a success.
- `error-class` - The class to apply to the toast when it is an error.
- `info-class` - The class to apply to the toast when it is an info message.
- `warn-class` - The class to apply to the toast when it is a warning.
- `template-id`- The id of the `template` element to use to insert in the toast.
- `stylesheet-href` - The url to the stylesheet for the toasts.

## Installation

```bash
npm install @htmx/htmx-toast
```

Use as a module in your application:

```html
<script src="https://unpkg.com/@htmx/htmx-toasts@latest/dist/index.js" type="module"></script>
```

## License

[MIT](/LICENSE)