open-index/open-npm huggingface dataset:
npm package: @holdr-ui/icons
Description: <img src="https://d174jt5gj6yzzg.cloudfront.net/wQ8Sqi_E.png" style="object-fit: cover" alt="logo" width="300"/>
Author: tak
Latest version: 3.4.4


<img src="https://d174jt5gj6yzzg.cloudfront.net/wQ8Sqi_E.png" style="object-fit: cover" alt="logo" width="300"/>

# Holdr UI Icons

Includes the icons used for developing all Holdr-related React applications,
which utilize ES6 import. All icons used in this package are SVG icons.

## Installation

```
yarn add @holdr-ui/icons
# or
npm install @holdr-ui/icons --save
```

## Example Usage

An example of usage

```jsx
import { ArticleReadFill } from '@holdr-ui/icons'

function Example() {
  return (
    <span>
      I enjoy reading books <ArticleReadFill/>
    </span>
  )
}
```

# Styling and customization

The logo inherits the color of the parent by default and the size of the font
is determined by the system's font size. You can customize this by wrapping
the component in an element and specifying the styles you want to add on the parent.

```jsx
import { ArticleReadFill } from '@holdr-ui/icons'

function StyledIcon() {
  return (
    // Here we are changing the color and size of the icon
    <span style={{color: '#c4ffee', fontSize: '2em'}}>
      <ArticleReadFill/>
    </span>
  )
}
```

# Typescript?

This package works with typescript projects.

## Why React SVG components instead of fonts?

SVG is supported by all major browsers.
npm package: @holdr-ui/react
Description: The official React component library used by Holdr developers to build cool and simple web applications.
Author: Holdr
Latest version: 3.4.1

<img src="https://d174jt5gj6yzzg.cloudfront.net/wQ8Sqi_E.png" style="object-fit: cover" alt="logo" width="300"/>

# Holdr UI React

The official React component library used by Holdr developers to build cool and simple web applications.

## Installation

```
yarn add @holdr-ui/react
# or
npm install @holdr-ui/react --save
```

## Example Usage

An example of usage

```jsx
import { Box, Button } from '@holdr-ui/react'

function Example() {
  const {switchState, toggle} = useSwitch()
  
  const switchStateText = switchState? 'on' : 'off'
  
  return (
    <Box bgColor='base800' color='white50'>
      I am {switchStateText}
      <Button variant='ghost' label='toggle' onClick={toggle}/>
    </Box>
  )
}
```

## Expectations

The components are fully customizable and offer a responsive API to select props. We have also added 
some useful hooks that you can use, and we will be adding more hooks in the future!

## Learn more

To learn more about the components, check out the [docs](https://holdr.dev)

# Typescript?

This package works with typescript projects.

# Contributers

[@Tak](https://github.com/takumhonde9)
npm package: @holdstation/worldchain-ethers-v6
Description: > Ethers.js v6 integration for Worldchain SDK
Latest version: 4.0.34

# @holdstation/worldchain-ethers-v6

> Ethers.js v6 integration for Worldchain SDK

[![NPM](https://img.shields.io/npm/v/@holdstation/worldchain-ethers-v6.svg)](https://www.npmjs.com/package/@holdstation/worldchain-ethers-v6)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Overview

This package provides ethers.js v6 integration for interacting with the Worldchain blockchain. It implements the interfaces defined in `@holdstation/worldchain-core` using ethers.js v6 as the underlying provider.

## Installation

```bash
npm install @holdstation/worldchain-ethers-v6 ethers@^6.0.0
```

## Simple Example

```typescript
import { ethers } from "ethers";
import { EthersClient, EthersMulticall3 } from "@holdstation/worldchain-ethers-v6";

const provider = new ethers.JsonRpcProvider("RPC_URL");
const client = new EthersClient(provider);
```

## Documentation & Usage

For detailed documentation and more examples, please visit:

📚 [Worldchain SDK Documentation](https://www.npmjs.com/package/@holdstation/worldchain-sdk)

## License

MIT

---

# @holdstation/worldchain-viem

> Viem integration for Worldchain SDK

[![NPM](https://img.shields.io/npm/v/@holdstation/worldchain-viem.svg)](https://www.npmjs.com/package/@holdstation/worldchain-viem)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Overview

This package provides viem integration for interacting with the Worldchain blockchain. It implements the interfaces defined in `@holdstation/worldchain-core` using viem as the underlying provider.

## Installation

```bash
npm install @holdstation/worldchain-viem viem
```

## Simple Example

```typescript
import { createPublicClient, http } from "viem";
import { worldchain } from "viem/chains";
import { ViemClient, ViemMulticall3 } from "@holdstation/worldchain-viem";

const publicClient = createPublicClient({
  chain: worldchain,
  transport: http("RPC_URL"),
});

const client = new ViemClient(publicClient);
```

## Documentation & Usage

For detailed documentation and more examples, please visit:

📚 [Worldchain SDK Documentation](https://www.npmjs.com/package/@holdstation/worldchain-sdk)

## License

MIT
npm package: @holdstation/worldchain-viem
Description: > Viem integration for Worldchain SDK
Latest version: 4.0.34

# @holdstation/worldchain-viem

> Viem integration for Worldchain SDK

[![NPM](https://img.shields.io/npm/v/@holdstation/worldchain-viem.svg)](https://www.npmjs.com/package/@holdstation/worldchain-viem)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Overview

This package provides viem integration for interacting with the Worldchain blockchain. It implements the interfaces defined in `@holdstation/worldchain-sdk` using viem as the underlying provider.

## Installation

```bash
npm install @holdstation/worldchain-viem viem
```

## Simple Example

```typescript
import { createPublicClient, http } from 'viem'
import { worldchain } from 'viem/chains'
import { Client, Multicall3 } from '@holdstation/worldchain-viem'

const publicClient = createPublicClient({
  chain: worldchain,
  transport: http('RPC_URL'),
})

const client = new Client(publicClient)
```

## Documentation & Usage

For detailed documentation and more examples, please visit:

📚 [Worldchain SDK Documentation](https://www.npmjs.com/package/@holdstation/worldchain-sdk)

## License

MIT
npm package: @holdy/jsonfig
Description: Chaining configuration loader for node.
Author: Chris H
Latest version: 1.0.2

# Jsonfig - A simple and flexible configuration loader.

In your main application - setup as follows:

```javascript
var jsonfig = require('@holdy/jsonfig');

var config = jsonfig.setup('root')                      
    .lookInEnvironment()                              // Environment first.
    .lookInFile('./env_specific_config.json')         // Then look in here.
    .lookInFile('./distributed_default_config.json'); // Etc...
    
    jsonfig.setLoggingFunction   // Optionally tell jsonfig where to log.
        ('warn', myFavouriteLogger.warn)
        ('info', myFavouriteLogger.info);
    
var dbHost = config.getValue('database-host-name');
```

Now, assuming we have a shared library who's config is overrideable by the main application:

```javascript
var config = jsonfig.setup('module1')
    .lookInConfig('root')                 // Use 'root' from above.
    .lookInFile('./module1-config.json'); // Check here next.

var dbHost = config.getValue('database-host-name');
```
npm package: @holdyourwaffle/portal-vue
Description: > A Portal Component for Vuejs, to render DOM outside of a component, anywhere in the document.
Author: Thorsten Lünborg
Latest version: 2.1.8

# PortalVue

> A Portal Component for Vuejs, to render DOM outside of a component, anywhere in the document.

<!-- markdownlint-disable MD033 -->
<p style="tex-align: center">
  <img src="https://portal-vue.linusb.org/logo.png" alt="PortalVue Logo">
</p>

<p>
<a href='https://ko-fi.com/R6R7QW4D' target='_blank'>
  <img height='36' style='border:0px;height:36px;margin-bottom:30px;' src='https://az743702.vo.msecnd.net/cdn/kofi4.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' />
</a>
<p>

For more detailed documentation and additional Information, [please visit the docs](https://portal-vue.linusb.org).

> Looking for version 1.\*? [Docs for version 1 are here](https://v1.portal-vue.linusb.org)

## In this fork...
Upstream pull requests [#340](https://github.com/LinusBorg/portal-vue/pull/340) and [#341](https://github.com/LinusBorg/portal-vue/pull/341) have been merged.

This adds a new `suspension` property to `<portal-target>`, which _suspends_ all teleportation as long as its value is `true`.

## Installation

```bash
npm i @holdyourwaffle/portal-vue

# or

yarn add @holdyourwaffle/portal-vue
```

```javascript
import PortalVue from '@holdyourwaffle/portal-vue'
Vue.use(PortalVue)
```


### Transitive dependencies

If you're using [bootstrap-vue](https://bootstrap-vue.org/) or another library that has `portal-vue` as a transitive dependency, you might prefer installing this fork with a Git dependency instead:

```bash
npm i git://github.com/HoldYourWaffle/portal-vue.git#suspension-built

# or

yarn add git://github.com/HoldYourWaffle/portal-vue.git#suspension-built
```

This keeps the module under the standard `portal-vue` name, allowing NPM to de-dupe the (unforked) transitive dependency.
```javascript
import PortalVue from 'portal-vue'
Vue.use(PortalVue)
```


## Usage

```html
<portal to="destination">
  <p>This slot content will be rendered wherever the <portal-target> with name 'destination'
    is  located.</p>
</portal>

<portal-target name="destination">
  <!--
  This component can be located anywhere in your App.
  The slot content of the above portal component will be rendered here.
  -->
</portal-target>
```

## Nuxt module

Add `@holdyourwaffle/portal-vue/nuxt` to modules section of `nuxt.config.js`

```javascript
{
  modules: ['@holdyourwaffle/portal-vue/nuxt']
}
```

Or when using a Git dependency:

```javascript
{
  modules: ['portal-vue/nuxt']
}
```
npm package: @holejs/wc
Description: **Hole.js** provides a diverse suite of web components made in [TypeScript](https://www.typescriptlang.org/) and [Lit](https://lit.dev/) 🔌. These components are easy to configure and use 🧩, allowing you to modify the original design in a practical way. 
Author: Ivan Guevara
Latest version: 0.19.0

# @holejs/wc

**Hole.js** provides a diverse suite of web components made in [TypeScript](https://www.typescriptlang.org/) and [Lit](https://lit.dev/) 🔌. These components are easy to configure and use 🧩, allowing you to modify the original design in a practical way. ✨ In addition, they can be seamlessly integrated into the most popular frameworks. 🚀

> If you want to interact with the components, we have prepared a [**Demo**](https://codesandbox.io/s/holejs-web-components-kzslns).

> **Warning**
> This package is under development and is not suitable for production environments due to possible changes in future versions. Thanks for your understanding. ❤️

## Installation.

To start using the suite of components it is necessary to install the package.

```bash
npm i @holejs/wc
```

## Setup.

Import the component suite into your main input file. Generally the `index.ts` is used.

```ts
// Imports styles.
import '@holejs/wc/styles/elevations.css'
import '@holejs/wc/styles/colors.css'

// Import all components.
import '@holejs/wc'

// Import specific components.
import '@holejs/wc/button/button.js'

// Import via CDN's. (Not recommended for production environments)
import 'https://unpkg.com/@holejs/wc?module'
import 'https://unpkg.com/@holejs/wc@0.11.1/dist/button.js?module'
```

## Usage.

Once the components are imported, they can be used in the HTML file.

```html
<hwc-button>Click me!</hwc-button>

<hwc-button appearance="outlined" color="orange-darken-2">Click me!</hwc-button>

<hwc-button appearance="text" color="#468D5A">Click me!</hwc-button>
```

## Components.

Bellow you can see the list of components that are currently available.

- [Alerts](/docs/components/alerts.md)
- [Avatars](/docs/components/avatars.md)
- [Buttons](/docs/components/buttons.md)
- [Cards](/docs/components/cards.md)
- [Checkboxes](/docs/components/checkboxes.md)
- [Chips](/docs/components/chips.md)
- [Dialogs](/docs/components/dialogs.md)
- [Radios](/docs/components/radios.md)
- [Ripples](/docs/components/ripples.md)
- [Selects](/docs/components/selects.md)
- [TextFields](/docs/components/text-fields.md)

## Additional info.

- [Dark mode](/docs/advance/dark-mode.md)
- [Customize design](/docs/advance/customize-design.md)

## Stay in touch.

- [Creator](https://twitter.com/thebug404)

## License.

This project is licensed under the terms of the [MIT license](/LICENSE).
npm package: @holema/datepicker
Description: Date picker plugin for input fields.
Author: H2Entwicklung
Latest version: 1.0.0

duDatepicker
=========
[![jquery version](https://img.shields.io/npm/dt/@dmuy/jquery-datepicker?style=flat-square)](https://www.npmjs.com/package/@dmuy/jquery-datepicker)
[![vanilla js](https://img.shields.io/npm/dt/@dmuy/datepicker?style=flat-square)](https://www.npmjs.com/package/@dmuy/datepicker)

[![Buy Me A Coffee](https://i.imgur.com/PbiWKn8.png)](https://www.buymeacoffee.com/dmuy)

This is the enhanced date picker extracted from [DCalendar plugin](https://github.com/dmuy/DCalendar).

## Documentation
* [Installation](https://github.com/dmuy/duDatepicker/wiki/Installation)
* [Options](https://github.com/dmuy/duDatepicker/wiki/Options)
  * [Configurations](https://github.com/dmuy/duDatepicker/wiki/Options#configurations)
    * [Callback Functions](https://github.com/dmuy/duDatepicker/wiki/Options#callback-functions)
  * [Formatting](https://github.com/dmuy/duDatepicker/wiki/Options#formatting)
* [Usage](https://github.com/dmuy/duDatepicker/wiki/Usage)
  * [Built-in Methods](https://github.com/dmuy/duDatepicker/wiki/Usage#usable-built-in-methods)
  * [Min and Max](https://github.com/dmuy/duDatepicker/wiki/Usage#min-and-max)
  * [Disabling Dates/Days](https://github.com/dmuy/duDatepicker/wiki/Usage#disabling-specific-dates-andor-days)
  * [Date Range](https://github.com/dmuy/duDatepicker/wiki/Usage#date-range)
  * [Internationalization](https://github.com/dmuy/duDatepicker/wiki/Usage#internationalization)
  * [Event Handling](https://github.com/dmuy/duDatepicker/wiki/Usage#event-handling)
  * [Themes](https://github.com/dmuy/duDatepicker/wiki/Usage#themes)
* [Usage (Vue)](https://github.com/dmuy/duDatepicker/wiki/Usage-(Vue))
  * [Nuxt](https://github.com/dmuy/duDatepicker/wiki/Usage-(Vue)#nuxt)

[**DEMO**](https://dmuy.github.io/duDatepicker/)

## Screenshots
![alt text](https://i.imgur.com/cBFuALu.png "Date picker")
![alt text](https://i.imgur.com/DHtNcEN.png "with Clear button")
![alt text](https://i.imgur.com/iBYl49d.png "Months view")
![alt text](https://i.imgur.com/wgvJYCf.png "Years view")
![alt text](https://i.imgur.com/cezrhRv.png "Date range mode")
![alt text](https://i.imgur.com/KZxDxsW.png "Dark theme")
![alt text](https://i.imgur.com/Gqt8UzL.png "Inline date picker")
![alt text](https://i.imgur.com/5YfbZm9.png "Inline range date picker")
npm package: @holema/h2datetimepicker
Description: This is a combination of date and timepicker
Author: H2Entwicklung
Latest version: 1.14.0

# H2 date Time Picker
Dies ist die Kombination von

https://www.npmjs.com/package/@holema/mdtimepicker
https://www.npmjs.com/package/@holema/datepicker

First the two packages are completly ungoogled, so the Roboto Font was made offline available.
This is needed in Germany to be completle GDPR compliant.

## Demo
https://codepen.io/h2entwicklung/pen/abwQvPz


The Package creates a new Input Field.
![img.png](https://imgur.com/ydE1plD.png)
The Field existing field still stays and will be sand by the form submit to the Server.
The visible Field is only a dummy field.

When klicking the small clock then the timepicker opens
![img_1.png](https://imgur.com/mswlHZH.png)

When no Date was selected before, then the date today will be selected.
When clicking the Datefield, then first the datepicker is opend.
![img_2.png](https://imgur.com/jXaIpPj.png)
After selecting the date, the timepicker opens automaticaly.




Installation:

`npm i @holema/datepicker`

In die haupt CSS:

`@import "~@holema/h2datetimepicker/css/dateTimePicker.css";`

in die Haupt-JS:

`import {initdateTimePicker,cleanDateTimePicker} from '@holema/h2datetimepicker';`

To render a datetime input field as datetimepicker, activate the plugin with:

Input the class or id of the element.

`initdateTimePicker('#schedulePickr')`

To clean the input, enter the original DOM element.
`cleanDateTimePicker(document.getElementById('schedulePickr'))`

This package was brought to you by https://h2-invent.com

![](https://imgur.com/LxTvCbV.png)
npm package: @holema/mdtimepicker
Description: Material design inspired time picker plugin for input elements.
Author: H2Entwicklung
Latest version: 1.1.0

MDTimePicker
========
[![jquery version](https://img.shields.io/npm/dt/@dmuy/jquery-timepicker?style=flat-square)](https://www.npmjs.com/package/@dmuy/jquery-timepicker)
[![vanilla js](https://img.shields.io/npm/dt/@dmuy/timepicker?style=flat-square)](https://www.npmjs.com/package/@dmuy/timepicker)

[![Buy Me A Coffee](https://i.imgur.com/PbiWKn8.png)](https://www.buymeacoffee.com/dmuy)

Material design inspired time picker plugin.

## Documentation
* [Installation](https://github.com/dmuy/MDTimePicker/wiki/Installation)
* [Options](https://github.com/dmuy/MDTimePicker/wiki/Options)
  * [Configurations](https://github.com/dmuy/MDTimePicker/wiki/Options#configurations)
    * [Callback Functions](https://github.com/dmuy/MDTimePicker/wiki/Options#callback-functions)
  * [Formatting](https://github.com/dmuy/MDTimePicker/wiki/Options#formatting)
* [Usage](https://github.com/dmuy/MDTimePicker/wiki/Usage)
  * [Min and Max](https://github.com/dmuy/MDTimePicker/wiki/Usage#min-and-max)
  * [Built-in Methods](https://github.com/dmuy/MDTimePicker/wiki/Usage#usable-built-in-methods)
  * [Event Handling](https://github.com/dmuy/MDTimePicker/wiki/Usage#event)
  * [Themes](https://github.com/dmuy/MDTimePicker/wiki/Usage#themes)
* [Usage (Vue)](https://github.com/dmuy/MDTimePicker/wiki/Usage-(Vue))
  * [Nuxt](https://github.com/dmuy/MDTimePicker/wiki/Usage-(Vue)#nuxt)

**[DEMO](https://dmuy.github.io/MDTimePicker/)**

## Screenshots
![alt text](https://i.imgur.com/M7Jb5H3.png "TimePicker: Hour")
![alt text](https://i.imgur.com/LmIkHoU.png "TimePicker: Minute")
![alt text](https://i.imgur.com/WyS2aHd.png "TimePicker: Dark")
![alt text](https://i.imgur.com/kNqqKMZ.png "TimePicker: 24-hour mode")