open-index/open-npm huggingface dataset:
npm package: @hugeicons/static
Description: Static SVG files for Hugeicons
Author: Hugeicons
Latest version: 0.1.5

# Hugeicons Static

Your ultimate source for free, high-quality SVG icons—delivered as raw SVG files and JavaScript exports for maximum flexibility. Perfect for designers and developers who want to use icons in any framework, static site, or build process.

## Features

- **Extensive Collection**: Access over 4100+ beautifully crafted SVG icons.
- **Direct SVG Access**: Use icons as raw SVG files—no build step or framework required.
- **JavaScript Exports**: Import SVGs as JS/TS modules for seamless integration in modern web projects.
- **Customizable**: Easily adjust size, color, and other SVG properties to fit your design.
- **Usage License**: Icons can be used as-is; editing or redistribution is not permitted.

## Installation

Install via npm:

```bash
npm install @hugeicons/static
```

Or with yarn:

```bash
yarn add @hugeicons/static
```

Or with pnpm:

```bash
pnpm add @hugeicons/static
```

Or with bun:

```bash
bun add @hugeicons/static
```
npm package: @hugeinc/modal
Description: A simple modal framework
Author: wes hatch
Latest version: 0.2.1

# Modal

A simple, quick, and accessible modal.

## Overview

There are several ways to trigger the modal (ie. programmatically, or via a click Event), as well as to dismiss the modal (programmatically, mouse Events or the escape key). You can also easily customize the default CSS for a particular interaction.

## Getting Started
With npm: ```npm i @apathetic/modal```

with ```git clone git@github.com:apathetic/modals.git```

There is an ES6 module you may consume however you wish. Then:

```javascript
<!-- modal -->
<div id="terms" class="modal">
	<div class="modal--content">
		<i class="modal--close icon-close"></i>
		<h3>Hello</h3>
		<p>Random text here, something important.</p>
	</div>
</div>

<!-- modal trigger -->
<button data-modal="#terms">show</button>

```

## Methods

| method | args | description |
| ------ | ----------- | ---- |
| show() | querySelector (String) | shows the modal that is referenced by the given querySelector |
| hide() | - | hides the currently-displaying modal |
| bind() | querySelector (String) | programmatically binds modal functionality to an element |

## Demo

After cloning the repo:
```
npm i
npm start
```

A server will spin up at ```http://localhost:8080```, where you may play with the various examples.

## Support
* IE9+
* Safari / Chrome
* Firefox
* iOS
* Android 4.0+

## Examples

Please see the _test / demo_ directory

## Release History

### 0.1
* first release
npm package: @hugeinc/panels
Description: A simple navigation object for sliding panels
Author: wes hatch
Latest version: 0.2.2

# Panels

A sliding-panel, carousel-like component that transitions through a series of slides.

## Introduction

This Navigator component can move through a series of slides using whatever CSS3 transitions you desire. Additionally,
it'll dynamically adapt its width via CSS media queries.

A strict separation of state and style is maintained. That is to say, the Javascript maintains the state of the Navigator, while the CSS takes care of the presentation of this state. While this is a basic component that achieves a particular use-case (i.e. a single slide at a time), you may use whatever CSS you desire to control the transition itself.

## Getting Started
Download the [production version][min] or the [development version][max].

[min]: https://raw.githubusercontent.com/apathetic/navigator/master/dist/nav.min.js
[max]: https://raw.githubusercontent.com/apathetic/navigator/master/src/nav.js

Include the relevant scripts in your web page, and then:

```html
<script>

	// available options
	var options = {
		activeClass: 'active',
		beforeClass: 'before',
		afterClass: 'after',
		animateClass: 'animating',
		slides: '.step',
		speed: 400
	};

	// sample instantiation:
	var container = document.querySelector('.panels');
	var nav = new Nav(container, options);

</script>
```

## Methods

+ **next()** : advances the carousel by one slide
+ **prev()** : returns to the previous slide
+ **go()** : function(to) advances slide to the index


## Support
* IE9+ (although, now requires Object.assign polyfill)
* Safari / Chrome
* Firefox
* iOS
* Android

## Examples

Please see the _demo_ directory

## Release History

### 0.3
* Fixed: when snapping back to _same_ slide, prev / next slides were not getting class="animate"
* Fixed: uses ecma5 js (ie. bind, forEach). ==> added IE8 check

### 0.2
* add tabs demo
* Fixed: uses non-IE8 friendly class manipulation (ie. classList)
* Fixed: if mobile and not infinite, can see wrapping slides

### 0.1
* still a proof of concept
* uses ecma5 js (ie. bind, forEach)
* uses non-IE8 friendly class manipulation (ie. classList)
* uses non-IE8 friendly translate on slides
* mobile transforms are currently webkit-only
* if mobile and not infinite, can see wrapping slides
npm package: @hugeinc/scrollify
Description: A simple thing for triggering 'them scroll effects that everybody loves
Author: wes hatch
Latest version: 0.4.7

# Scrollify

Scrollify. Do things on scroll. 3KB minified and gzipped.

## What sorts of things?

Well, whatever you want. Common effects such as parallax or toggling a class on/off are possible and bundled within. However, you may also easily create your own custom scroll function, and pass it in to Scrollify. The built-in effects include:

- **Stick**: sticks an element to a particular point and holds in there for a pre-defined number of pixels.
- **Parallax**: move stuff on scroll. A subtle effect that transitions elements more slowly (or perhaps quickly) than the speed of the user-scroll.
- **Toggle**: turn a CSS class on or off if the element crosses a particular threshold on the page.
- **Translate**: translate an element along the X- or Y- axis.
- **Rotate**: rotate an element via scroll.
- **Scale**: scale an element.
- **Fade**: change an element's opacity.


### Notes
Scrollify works by first calculating an element's position in the page so that it may be manipulated on scroll. It is important to note that as the page loads, this position may jump around as the DOM is constructed and images are loaded, etc.  Therefore, it is recommended that Scrollify'd elements are not initialized until the page has finished loading all images and the DOM is stable. For example, if you're trying to _Scrollify_ an element whose position on the page is dependent on assets loading above of it, you may wish to use ```window.addEventListener('load'...``` rather than the more common ```'DOMContentLoaded'```.

## Demo

[Showcase](http://apathetic.github.io/showcase/components/scrollify/).

First, install dependencies and spin up a webserver via ```npm i && npm start```. Navigate to ```localhost:8080/demo``` to check out the demos. Code samples are therein.

## Getting Started

Either:
* npm: ```npm i @hugeinc/scrollify```
* github: download it from [Github](https://github.com/apathetic/scrollify).

## Support
* IE9+
* Safari / Chrome
* Firefox

## TODO
* sticky effect glitchy on resize
* relative units "+=", "-=", etc
* getComputedStyle to avoid defining default vals
* simplify API for effects / options definition

## Release History

### 0.3
* start and duration can accept various parameter types: float, 'px', '%'
* internalized applyTransform check

### 0.2
* quick scrolling bug fixing
* better IE support

### 0.1
* initial commit
npm package: @hugeinc/stickynav
Description: A simple navigation bar that efficiently attaches / detaches to the top of the viewport upon scrolling
Author: wes hatch
Latest version: 0.5.8

# Sticky Nav

A simple navigation bar that efficiently attaches / detaches to the top of the viewport upon scrolling

## Introduction

...


## Getting Started
Download the [production version][min] or the [development version][max].

[min]: https://stash.hugeinc.com/projects/BOWER/repos/stickynav/browse/dist/stickynav.min.js?at=b524c3b74362a516cca1d7c3cde1be7e508480e3&raw
[max]: https://github.com/apathetic/stickynav/blob/master/dist/stickynav.js

### ES6
```javascript
import { stickyElement, stickyNav } from '../src/stickynav.es6.js';
```

### CommonJS
```javascript
var stickyElement = require('../src/stickynav.es6.js').stickyElement;
var stickyNav = require('../src/stickynav.es6.js').stickyNav;
```

### AMD
```javascript
require(['stickyElement', 'stickyNav'], function(stickyElement, stickyNav){
	// ...
})
```

### Browser

```html
<script src="path/to/stickyNav.js"></script>
<script>
	new stickyNav({
		nav: '#sticky',
		boundedBy: 'main'
	});
</script>
```

## Documentation

...

## Support
* IE8+
* Safari / Chrome
* Firefox
* iOS
* Android

## Known Issues

## Examples

Please see the _test / demo_ directory

## Release History

### 0.5
* Complete rewrite of StickyNav into an ES6 class
* updating docs to better reflect options

### 0.4
* adding offset to allow stickiness that is not necessarily at the top of the viewport

### 0.3
* Breaking change: updating ```bounded``` to ```boundedBy```
* Better treatment of bounding element

### 0.1
* initial commit
npm package: @hugeinc/validator
Description: A simple, extendable client-side valiator
Author: wes hatch
Latest version: 0.1.3

# Validator

A simple and extendable client-side form Validator.

## Overview

This a simple, extensible client-side validation class. It's "simple" because it includes only a small and basic set of validation functions. However, it's easily extensible so you may add your own types of custom validation.

While most other Validators require a particular accompanying Javascript framework, this one does not. Additionally, rather than a bloaty, full-featured validator, the approach taken herein is to create a basic validator that covers most general use-cases. If it doesn't cover yours, you can easily add any required functionality.</p>

## Getting Started

* with npm:  ```npm install @apathetic/validator```
* with git:  ```git clone git@github.com:apathetic/validator.git```

There is an ES6 module you may consume however you wish. Then:

**Check a form**
```javascript
var form = document.querySelector('#userForm');
var valid = Validator.check(form);
```

```html
<form id="userForm">
  <input id="email" name="email" data-validate="email" required />
</form>
```

**Check a form section**
This is useful if you have multi-page forms, or wish to selectively validate sections.
```javascript
var fieldset = document.querySelectorAll('fieldset');
var valid = Validator.check(fieldset[0]);
```

**Add a custom rule**
```javascript
// add a rule called "count" that checks an input's length
Validator.addRule('count', function count(val) {
  return val.length <= 40;
});
```
```html
<textarea data-validate="count" required>40 characters or less, here</textarea>
```

## Methods

| method | args | description |
| ------ | ----------- | ---------|
| check() | element (HTMLElement), success (Function) | Pass in a field or a DOM fragment. Checks if field (or fields within the fragment) are valid according to any data-validate/required attributes |
| addRule() | name (String), validator (Function) | Add your own validation function. The validation function receives the field value to check against. Use your new rule by placing _data-validate="name"_ on a field |


## Events

| Event | description |
| ------ | ---------|
| validation:failure | Triggered when a form/section fails validation. The target is the form/section used |
| validation:success | Triggered when a form/section passes validation. The target is the form/section used |

## Demo

After cloning the repo:
```
npm i
npm start
```

A server will spin up at ```http://localhost:8080```, where you may play with the various examples.

## Support
* IE9+
* Safari / Chrome
* Firefox
* iOS
* Android 4.0+

## Examples

Please see the _test / demo_ directory

## Release History

### 0.1
* first release
npm package: @hugekontrast/test-titles
Description: Generate semantic titles for test cases.
Author: Ashish Khare
Latest version: 0.2.0

![Banner for test titles.](banner.jpg)

# Test Titles

A simple formatting-language-based string generator to produce more vivid and practical test titles for your next project.

## Features:

1. Simple to use
2. 0 dependencies
3. Easy to learn and set up

## Core Philosophy

| Symbol | Element | Color   | Purpose  |
| ------ | ------- | ------- | -------- |
| \.     | Meta    | Yellow  | Classify |
| \#     | Topic   | Magenta | Identify |
|        | Title   | White   | Text     |
| \*     | Args    | Red     | Modifier |

1. You can use more than one meta element; they function like classes assigned to an HTML element.
2. However, you can only add a single topic name to each title, which behaves like an ID assigned to an HTML element.
3. You can also add any number of arguments to the title, which are similar to the arguments passed to a function.
4. Every other word without any symbol prefixed to it will be regarded as text for the title.

## Usage

1. Install the package

   ```sh
   npm i -D @hugekontrast/test-titles
   ```

2. Use the `t` function in your test blocks for the colorful test titles.

   ```js
   // sum.test.js
   import { expect, test } from "vitest";
   import { sum } from "./sum.js";
   import { t } from "@hugekontrast/test-titles";

   test(t("#addition 1 + 2 to equal 3"), () => {
     expect(sum(1, 2)).toBe(3);
   });
   ```
npm package: @hugerte/hugerte-angular
Description: HugeRTE Angular Component
Latest version: 1.1.1

# Official HugeRTE Angular Component

This package is a thin wrapper around [HugeRTE](https://github.com/hugerte/hugerte) to make it easier to use in an Angular application.

Documentation for this package is available at the [HugeRTE Angular integration docs page](https://github.com/hugerte/hugerte-docs/blob/main/integrations/angular.md).
npm package: @hugerte/hugerte-react
Description: Official HugeRTE React Component
Latest version: 2.0.2

# HugeRTE React component

This package is a thin wrapper around [HugeRTE](https://github.com/hugerte/hugerte) to make it easier to use in a React application.

Documentation for this package is available at the [HugeRTE React Integration docs page](https://github.com/hugerte/hugerte-docs/blob/main/integrations/react.md).
npm package: @huggg/bar-staff
Description: Huggg Utility Library
Author: Alex McCabe
Latest version: 0.7.2

[![pipeline status](https://gitlab.com/huggg/lib/barstaff/badges/master/pipeline.svg)](https://gitlab.com/huggg/lib/barstaff/commits/master)
[![coverage report](https://gitlab.com/huggg/lib/barstaff/badges/master/coverage.svg)](https://gitlab.com/huggg/lib/barstaff/commits/master)

# Huggg Bar Staff

This is the JavaScript utility library used across the many applications in the company.

# Why?

Some utility functions are far more useful outside of the project they are initially written in.

# How?

```
yarn add @huggg/bar-staff
```

### ES2016

```js
import { functionName } from '@huggg/bar-staff';
// or
import functionName from '@huggg/bar-staff/functionName';
```

### Browser

```js
import '@huggg/bar-staff/bar-staff.umd.min'
```

Or you can copy the same file to somewhere in your local directory to reference in a `<script>` tag.