open-index/open-npm huggingface dataset:
npm package: @!!!!!/elemental
Description: Control the elements using JS
Latest version: 0.5.40

# Try this library in the Browser Console on [Deno.land](https://deno.land/x/elementalist)!

For VS Code use [this extension](https://marketplace.visualstudio.com/items?itemName=pushqrdx.inline-html) to get syntax highlighting.

```js
var { html } = await import("https://deno.land/x/elementalist@0.5.39/main/deno.js?code")

// create a custom component
const myAsyncCustomComponent = async ({ style, children, ...props }) => {
    // load a big'ole depenency like d3
    const d3 = await import('https://cdn.skypack.dev/d3')
    return html`<div style=${style}>
        Do you even Async?
        Keys of the d3 library: ${JSON.stringify(Object.keys(d3))}
    </div>`
}

// add it to the local scope
html = html.extend({myAsyncCustomComponent})

// change some elements
document.body = html`<body style="padding:1rem;">
    Hello World (I render Immediately)
    <br>
    <myAsyncCustomComponent style='background: darkgray; color: white; padding: 1rem; border-radius: 1rem; margin: 0.3rem;' />
    <br>
    this ^ takes a second to render cause it has a massive async depenency
</body>`

```

You can also use it with JSX:

```jsx
/** @jsx html */
var { html } = await import("https://deno.land/x/elementalist@0.5.34/main/deno.js?code")

// create a custom component
const myAsyncCustomComponent = async ({ style, children, ...props }) => {
    // load a big'ole depenency like d3
    const d3 = await import('https://cdn.skypack.dev/d3')
    return <div style={style}>
        Do you even Async?
        Keys of the d3 library: {JSON.stringify(Object.keys(d3))}
    </div>
}

// change some elements
document.body = <body style="padding:1rem;">
    Hello World (I render Immediately)
    <br>
    <myAsyncCustomComponent style='background: darkgray; color: white; padding: 1rem; border-radius: 1rem; margin: 0.3rem;' />
    <br>
    this ^ takes a second to render cause it has a massive async depenency
</body>

```
npm package: @!!!!!/polarbear
Description: A fork of dataframe-js
Author: Guillaume Mousnier
Latest version: 1.0.2

# dataframe-js

![](https://travis-ci.org/Gmousse/dataframe-js.svg?branch=develop)
![](https://coveralls.io/repos/github/Gmousse/dataframe-js/badge.svg?branch=master)

**Official Documentation**: <https://gmousse.gitbooks.io/dataframe-js/>

**Current Version**: [1.4.3](https://gmousse.gitbooks.io/dataframe-js/content/CHANGELOG.html)

**Last Major Update**:

-   Bugfixes and refactor
-   Change build ecosystem (easier, smaller bundles)
-   Add `tail`, `head`, `slice`, `getRow`, `setRow`, `fillMissingValues`, `dropMissingValues` methods
-   `sortBy` now handles missing values.
-   Fix bugs on IE !

**Compatibility**:

-   Browsers (IE > 10, Edge, Firefox, Chrome...)
-   NodeJS 4.x.x, 5.x.x, 6.x.x, 8.x.x

**License**: MIT

## Presentation

DataFrame-js provides an immutable data structure for javascript and datascience, the DataFrame, which allows to work on rows and columns with a sql and functional programming inspired api.

With the DataFrame, you can easily do a ton of complex stuff such as join, groupby, exploration tasks, machine learning...

It's mainly designed to work on server-side (with node) but it also works in the browser (without file system related features).

Example:

```javascript
import DataFrame from "dataframe-js";
import { data, columns } from "./titanic_data.js";
const df = new DataFrame(data, columns);
const filteredDf = df
    .filter(row => row.get("survived") === "yes")
    .select("class", "age", "sex");
filteredDf.show(3);
```

```
| class       | age        | sex        |
----------------------------------------
| 1st class   | adults     | man        |
| 1st class   | adults     | man        |
| 1st class   | adults     | woman      |
```

## Installation

via git: `npm install git+https://github.com/Gmousse/dataframe-js.git`

via npm: `npm install dataframe-js`

via yarn: `yarn add dataframe-js`

**For the browser, we have change the script provider ([rawgit](https://rawgit.com/)) because it will close soon, consider to update the url!!!**

in the browser (1.4.0):

-   for production `<script src="https://gmousse.github.io/dataframe-js/dist/dataframe.min.js"></script>` (~ 80ko)
-   for development `<script src="https://gmousse.github.io/dataframe-js/dist/dataframe.js"></script>` (~ 300ko)

## Usage

[Basic Usage](https://gmousse.gitbooks.io/dataframe-js/content/doc/BASIC_USAGE.html)

[Advanced Usage](https://gmousse.gitbooks.io/dataframe-js/content/doc/ADVANCED_USAGE.html)

[API Reference](https://gmousse.gitbooks.io/dataframe-js/content/doc/api/dataframe.html)

## Contribution

[The code of conduct](https://gmousse.gitbooks.io/dataframe-js/content/CODE_OF_CONDUCT.md)

[How to contribute ?](https://gmousse.gitbooks.io/dataframe-js/content/CONTRIBUTING.html)
npm package: @(._.)/execute
Description: Executes script in a child process
Author: omrilotan
Latest version: 1.0.0

# Execute <a href="https://www.npmjs.com/package/@(._.)/execute"><img src="https://img.shields.io/npm/v/@(._.)/execute.svg"></a> [![](https://img.shields.io/badge/mono--000000.svg?logo=github&style=social)](https://github.com/omrilotan/mono)

Executes script in a child process

```js
const execute = require('@(._.)/execute');

const commit_message = await execute('git log -1 --pretty=%B'); // Committed some changes
```
npm package: @-ft/mode
Description: Theme mode manager
Author: Juyeong Maing
Latest version: 0.1.0

# `mode` - Theme mode manager

Dark/light theme mode manager for web

## Usage

```ts
import { mode } from '@-ft/mode';

// initialize mode manager with persistent settings if available
const modeManager = mode(getCookie('mode') ?? 'system');

// apply actual theme when theme is changed
modeManager.watchTheme((theme) => {
  if (theme === 'dark') {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
});

// save persistent theme settings when mode is changed
modeManager.watchMode((mode) => {
  document.cookie = 'mode=' + mode;
});
```
npm package: @-ft/mode-react
Description: React wrapper for theme mode manager
Author: Juyeong Maing
Latest version: 0.1.3

# `mode-react` - Theme mode manager wrapper for React

React wrapper of dark/light theme mode manager for web

## Usage

- Generate `mode.js` using `@-ft/mode-codegen` package.

```json
{
  "variableName": "__theme_mode"
}
```

- Load `mode.js` _**BEFORE load react app**_.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ./mode.js is generated by @-ft/mode-codegen package -->
    <script src="./mode.js"></script>
    <script type="module" src="./index.tsx"></script>
  </head>
</html>
```

- Then wrap your app with `ModeContextProvider`

```jsx
import { ModeContextProvider, ModeContext } from '@-ft/mode-react';

function Provider({ children }) {
  return (
    <ModeContextProvider variableName="__theme_mode">
      {children}
    </ModeContextProvider>
  );
}

function ModeBar() {
  const { mode, setMode } = useContext(ModeContext);

  return (
    <Bar>
      Current theme mode is {mode}.
      <Select
        onChange={useCallback((mode) => setMode(mode), [setMode])}
      >
        {['system', 'light', 'dark']}
      </Select>
    </Bar>
  )
}

```
npm package: @-ft/use-memo-object
Description: React useMemoObject hook
Author: Juyeong Maing
Latest version: 0.1.0

# use-memo-object - react `useMemoObject` hook

memo the context value conveniently

## Usage

```jsx
import { useMemoObject } from '@-ft/use-memo-object';

function AppContextProvider({ children, something }) {
  const someValue = useSomeValue();

  const value = useMemoObject({ something, someValue });
  // instead of...
  const v = useMemo(() => ({ something, someValue }), [something, someValue]);

  return (
    <AppContext.Provider value={value}>
      {children}
    </AppContext.Provider>
  );
}
```
npm package: @-ft/use-persist
Description: React usePersist hook
Author: Juyeong Maing
Latest version: 0.1.0

# use-persist - react `usePersist` hook

have something like member variable of class component, in function component.

## Usage

```jsx
import { usePersist } from '@-ft/use-persist';

function AppContextProvider({ children }) {
  const persist = usePersist(null);
  useEffect(() => {
    persist.current = initializeSomething();
    return () => {
      persist.current.dispose();
      persist.current = null;
    };
  }, []);
  return (
    <AppContext.Provider value={persist.current}>
      {children}
    </AppContext.Provider>
  );
}
```
npm package: @-ft/use-value-persist
Description: React useValuePersist hook
Author: Juyeong Maing
Latest version: 0.1.0

# use-value-persist - react `useValuePersist` hook

use persist to prevent unnecessary re-attach event handlers

## Usage

```jsx
import { useValuePersist } from '@-ft/use-value-persist';

function MyComponent() {
  const { enabled } = useContext(MyContext);
  const enabledPersist = useValuePersist(enabled);
  const handlePress = useCallback(() => {
    if (enabledPersist.current) alert('button is pressed when enabled');
  }, [enabledPersist]);
  // instead of below which will cause re-attach event handler
  const DONT_DO_THIS_badHandlePress = useCallback(() => {
    if (enabled) alert('button is pressed when enabled');
  }, [enabled]);

  return <button onPress={handlePress}>Click me!</button>;
}
```
npm package: @-ft/watch-target
Description: util watchTarget
Author: Juyeong Maing
Latest version: 0.1.1

# Util - `watchTarget`

get notified when the watch target value changes

## Usage

```javascript
const a = watchTarget('a');

const cleanup = a.watch((a) => console.log(`a is now '${a}'`));
// console output: a is now 'a'

a.get(); // 'a'

a.set('A');
// console output: a is now 'A'

cleanup();

a.set('X'); // (no more console output)
```
npm package: @-ft/watch-target-react
Description: React wrapper for util watchTarget
Author: Juyeong Maing
Latest version: 0.0.9

# `watch-target-react` - Util watchTarget wrapper for React

React wrapper of util watchTarget

## Usage

```jsx
function Portal({ children }) {
  const { addComponent } = useContext(PortalContext);
  const childrenWatchTarget = useLayoutWatchTarget(children);
  useEffect(
    () => addComponent(toComponent(childrenWatchTarget.watch)),
    [addComponent]
  );
  return null;
}

function toComponent(childrenWatchTarget) {
  return function Component() {
    return <>{useWatchValue(childrenWatchTarget)}</>;
  };
}
```
npm package: @-k/eslint-plugin-dependencies
Description: require/import dependency validation
Author: Andres Suarez
Latest version: 2.4.0
Deprecated: Fork cancelled (you should use eslint-plugin-import instead)

# @k/eslint-plugin-dependencies

[![Build Status](https://travis-ci.org/AdrieanKhisbe/eslint-plugin-dependencies.svg?branch=master)](https://travis-ci.org/AdrieanKhisbe/eslint-plugin-dependencies)

:warning: This is a _(temporary)_ fork :warning:
Aim is to have a release that is comptabible with eslint 6 thanks to https://github.com/zertosh/eslint-plugin-dependencies/pull/21/files



## Usage

```sh
npm install eslint-plugin-dependencies
```

In your `.eslintrc`:

```json
{
  "plugins": [
    "dependencies"
  ],
  "rules": {
    "dependencies/case-sensitive": 1,
    "dependencies/no-cycles": 1,
    "dependencies/no-unresolved": 1,
    "dependencies/require-json-ext": 1
  }
}
```

## Rules

An [eslint](https://github.com/eslint/eslint) plugin that ...

### `dependencies/case-sensitive`

Verifies that `require("…")`, `require.resolve(…)`, `import "…"` and `export … from "…"` ids match the case that is reported by a directory listing.

```json
{
  "plugins": [
    "dependencies"
  ],
  "rules": {
    "dependencies/case-sensitive": [1, {"paths": ["custom-path-to-search-for-modules"]}]
  }
}
```

### `dependencies/no-cycles`

Prevents cyclic references between modules. It resolves `require("…")`, `import "…"` and `export … from "…"` references to internal modules (i.e. not `node_modules`), to determine whether there is a cycle. If you're using a custom parser, the rule will use that to parse the dependencies. The rule takes a `skip` array of strings, that will be treated as regexps to skip checking files.

Additionally, with the `types` option enabled, you can detect and prevent `import type` cycles as well. This can be helpful, since the [Flow checker](https://flow.org) can exhibit unexpected behavior with such cycles.

```json
{
  "plugins": [
    "dependencies"
  ],
  "rules": {
    "dependencies/no-cyles": [1, {"skip": ["/spec/", "/vendor/"], "types": true}]
  }
}
```

### `dependencies/no-unresolved`

Checks that `require("…")`, `require.resolve(…)`, `import "…"` and `export … from "…"` reference modules that exist. Takes an `ignore` array of modules to ignore.

```json
{
  "plugins": [
    "dependencies"
  ],
  "rules": {
    "dependencies/no-unresolved": [1, {"ignore": ["atom"], "paths": ["custom-path-to-search-for-modules"]}]
  }
}
```

### `dependencies/require-json-ext`

Ensures that modules are that are `.json` include their extension in the module id. Supports auto fix.
npm package: @-silver/random-rng
Description: Random assortment of RNG-based functions.
Author: silvxrcat
Latest version: 1.0.1

# random-rng
Random assortment of RNG-based functions. You never needed this, but now you have it.

## Installing
I prefer `require()` but I don't care what you use.
```js
const { ... } = require("random-rng")
```
```js
import { ... } from 'random-rng'
```

## Usage
- [odds](#odds)
- [gen_word](#genword)
- [gen_sentence](#gensen)
- [gen_paragraph](#genpar)
- [gen_title](#gentitle)

<div id="odds"></div>

### odds
Uses a number through 1 - 99 to use as a percentage in RNG.

**Example**
```js
const { odds } = require("random-rng")

if (odds(15)) { // 15% of the time
  console.log("You win!")
} else {
  console.log("You lose...")
}
```

<div id="genword"></div>

### gen_word
Generates a random word that may or may not be real. (we don't know)

**Example**
```js
const { gen_word } = require("random-rng")

if (gen_word() == "hi") { // pretty small chance
  console.log("Hello!!")
} else {
  console.log("???????")
}
```

<div id="gensen"></div>

### gen_sentence
Generates a random sentence with random punctuation and random words. I'm going to admit this uses [gen_word](#genword).

`len` - Length of the sentence in words.

**Example**
```js
const { gen_sentence } = require("random-rng")

// possible social app code

if (user.new) {
  user.bio = gen_sentence(8) // generates a random 8 sentence bio.
}
```

<div id="genpar"></div>

### gen_paragraph
Generates a full-blown paragraph using [gen_word](#genword) and [gen_sentence](#gensen). This was made for fun.

`min` - Minimum length of a sentence in words.<br>
`max` - Maximum length of a sentence in words.<br>
`len` - The amount of sentences in the paragraph.

**Example**
```js
const { gen_paragraph } = require("random-rng")

// possible showcase app here

app.box[92].content = gen_paragraph() // generates filler text for box 92.
```

<div id="gentitle"></div>

### gen_title
Generates a title for a movie, a video game, I don't know. Some combinations might be- uh... mature.

**Example**
```js
const { gen_title } = require("random-rng")

// possible book creation code here

book.filler_title = gen_title() // generates a filler title that the user can change (if they want to)
```

## *Have fun.*
npm package: @-ui/mq
Description: A utility function for adding stored media queries and breakpoints to dash-ui styles
Latest version: 2.1.0
Deprecated: This package has moved to @dash-ui/mq

<hr>
<div align="center">
  <h1 align="center">
    @-ui/mq
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@-ui/mq">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@-ui/mq?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@-ui/mq">
    <img alt="Types" src="https://img.shields.io/npm/types/@-ui/mq?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Code coverage report" href="https://codecov.io/gh/dash-ui/mq">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/dash-ui/mq?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.org/dash-ui/mq">
    <img alt="Build status" src="https://img.shields.io/travis/com/dash-ui/mq?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@-ui/mq">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@-ui/mq?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@-ui/mq?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @-ui/mq</pre>
<hr>

A utility function for adding stored media queries and breakpoints to -ui styles

## Quick Start

```js
import mq from '@-ui/mq'
import styles from '@-ui/styles'

const breakpoint = mq({
  // 0px
  phone: 'only screen and (min-width: 0em)',
  // 560px
  tablet: 'only screen and (min-width: 35em)',
  // 1280px
  desktop: 'only screen and (min-width: 80em)',
})

const responsiveBox = styles({
  default: `
    display: block;
    background: #000;
    width: 400px;
    height: 400px;
  `,
  big: breakpoint({
    default: `
      width: 800px;
      height: 800px;
    `,
    desktop: `
      width: 1000px;
      height: 1000px;
    `,
  }),
  small: `
    width: 300px;
    height: 300px;

    ${breakpoint('phone')} {
      width: 200px;
      height: 200px;
    }
  `,
})
```

## API

## LICENSE

MIT
npm package: @-ui/react
Description: React components and hooks for -ui
Author: Jared Lunde
Latest version: 1.2.3
Deprecated: This package has moved to @dash-ui/react

<hr>
<div align="center">
  <h1 align="center">
    @-ui/react
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@-ui/react">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@-ui/react?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@-ui/react">
    <img alt="Types" src="https://img.shields.io/npm/types/@-ui/react?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Code coverage report" href="https://codecov.io/gh/dash-ui/react">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/dash-ui/react?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.org/dash-ui/react">
    <img alt="Build status" src="https://img.shields.io/travis/dash-ui/react?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@-ui/react">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@-ui/react?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@-ui/react?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @-ui/react</pre>
<hr>

React components and hooks for [-ui](https://github.com/dash-ui/styles)

## Quick Start

```jsx harmony
import _ from '@-ui/react'
```

## API

### Props

| Prop | Type | Default | Required? | Description |
| ---- | ---- | ------- | --------- | ----------- |
|      |      |         |           |             |

## LICENSE

MIT
npm package: @-ui/reset
Description: A modern browser reset for dash-ui
Latest version: 1.1.0
Deprecated: This package has moved to @dash-ui/reset

<hr>
<div align="center">
  <h1 align="center">
    @-ui/reset
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@-ui/reset">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@-ui/reset?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@-ui/reset">
    <img alt="Types" src="https://img.shields.io/npm/types/@-ui/reset?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Code coverage report" href="https://codecov.io/gh/dash-ui/reset">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/dash-ui/reset?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.org/dash-ui/reset">
    <img alt="Build status" src="https://img.shields.io/travis/dash-ui/reset?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@-ui/reset">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@-ui/reset?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@-ui/reset?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @-ui/reset</pre>
<hr>

A modern CSS reset for -ui

## Quick Start

```js
import {reset} from '@-ui/reset'
styles.global(reset)
```

## LICENSE

MIT
npm package: @-ui/spacing
Description: Create spacing scales for design systems with dash-ui
Latest version: 1.1.0
Deprecated: This package has moved to @dash-ui/spacing

<hr>
<div align="center">
  <h1 align="center">
    @-ui/spacing
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@-ui/spacing">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@-ui/spacing?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@-ui/spacing">
    <img alt="Types" src="https://img.shields.io/npm/types/@-ui/spacing?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Code coverage report" href="https://codecov.io/gh/dash-ui/spacing">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/dash-ui/spacing?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/dash-ui/spacing">
    <img alt="Build status" src="https://img.shields.io/travis/com/dash-ui/spacing?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@-ui/spacing">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@-ui/spacing?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@-ui/spacing?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @-ui/spacing</pre>
<hr>

Create spacing scales for design systems with dash-ui

## Quick Start

```typescript
import styles from '@-ui/styles'
import * as spacing from '@-ui/spacing'

const variables = {
  gap: {
    sm: '0.5rem',
    md: '1rem',
    lg: '2rem',
  },
  pad: {
    sm: '0.5rem',
    md: '1rem',
    lg: '2rem',
  },
}
// Creates CSS variables for the scales (optional)
styles.variables(variables)
// Creates the scales
export const gap = spacing.gap(style, variables.gap)
export const pad = spacing.pad(style, variables.pad)
pad('sm')
```

## API

## LICENSE

MIT
npm package: @-ui/transition
Description: A library for creating CSS transitions with -ui
Latest version: 1.1.0
Deprecated: This package has moved to @dash-ui/transition

<hr>
<div align="center">
  <h1 align="center">
    @-ui/transition
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@-ui/transition">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@-ui/transition?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@-ui/transition">
    <img alt="Types" src="https://img.shields.io/npm/types/@-ui/transition?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Code coverage report" href="https://codecov.io/gh/dash-ui/transition">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/dash-ui/transition?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://travis-ci.com/dash-ui/transition">
    <img alt="Build status" src="https://img.shields.io/travis/com/dash-ui/transition?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@-ui/transition">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@-ui/transition?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@-ui/transition?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @-ui/transition</pre>
<hr>

A library for creating CSS transitions with -ui

## Quick Start

```jsx harmony
import styles from '@-ui/styles'
import transition from '@-ui/transition'

styles.variables({
  transitions: {
    duration: {
      slow: '1s',
    },
  },
})

const fade = transition(styles, {
  // default styles and options
  default: {
    duration: 100,
  },
  // Use a callback to access variables
  in: ({transitions}) => ({
    opacity: 1,
    duration: transitions.duration.slow,
  }),
  out: {
    opacity: 0,
  },
})

const Component = ({visible}) => (
  <div className={fade(visible ? 'in' : 'out')}>
    <div className={fade({in: visible, out: !visible})}>Foo</div>
  </div>
)
```

## API

## LICENSE

MIT
npm package: @-xun/no-hoist
Description: An empty dummy package used to control NPM hoisting behavior
Author: Xunnamius
Latest version: 1.0.0

# no-hoist (`@-xun/no-hoist`)

See [noist](https://github.com/zackerydev/noist) and
[prisma/prisma#9649](https://github.com/prisma/prisma/issues/9649#issuecomment-1064466501).
npm package: @0010capacity/reddit-cli
Description: A powerful CLI client for Reddit
Latest version: 0.1.3

# @0010capacity/reddit-cli

A powerful CLI client for Reddit, written in Rust.

## Installation

```bash
npm install -g @0010capacity/reddit-cli
```

## Usage

```bash
# View hot posts
reddit hot

# View a specific subreddit
reddit subreddit show rust

# Search Reddit
reddit search "rust programming" --subreddit rust

# Login for full access
reddit auth login

# After login, access your account
reddit me
reddit me karma

# Subscribe to a subreddit
reddit subscribe rust
```

## Commands

### Browsing (No Auth Required)

| Command | Description |
|---------|-------------|
| `reddit hot` | View hot posts |
| `reddit new` | View new posts |
| `reddit top [--time hour/day/week/month/year/all]` | View top posts |
| `reddit rising` | View rising posts |
| `reddit controversial` | View controversial posts |
| `reddit subreddit show <name>` | View subreddit info |
| `reddit user show <username>` | View user info |
| `reddit search <query>` | Search Reddit |

### Account (Auth Required)

| Command | Description |
|---------|-------------|
| `reddit me` | View your account info |
| `reddit me karma` | View karma breakdown |
| `reddit me subreddits` | View subscribed subreddits |

### Interactions (Auth Required)

| Command | Description |
|---------|-------------|
| `reddit upvote <id>` | Upvote a post/comment |
| `reddit downvote <id>` | Downvote a post/comment |
| `reddit save <id>` | Save a post/comment |
| `reddit subscribe <subreddit>` | Subscribe to subreddit |

### Posting (Auth Required)

| Command | Description |
|---------|-------------|
| `reddit submit link -r <sr> -t <title> -u <url>` | Submit a link |
| `reddit submit text -r <sr> -t <title> --text <body>` | Submit a text post |
| `reddit comment <parent> --text <text>` | Post a comment |

### Moderation (Auth + Mod Required)

| Command | Description |
|---------|-------------|
| `reddit mod reports <subreddit>` | View reports |
| `reddit mod queue <subreddit>` | View mod queue |
| `reddit mod approve <id>` | Approve post/comment |
| `reddit mod remove <id>` | Remove post/comment |

## Output Formats

```bash
# Table format (default)
reddit hot

# JSON output
reddit hot --format json

# Plain text
reddit hot --format plain
```

## Authentication

Reddit CLI uses OAuth2 for authentication. On first use:

```bash
reddit auth login
```

This will open your browser for authentication.

## License

MIT
npm package: @007.surajit2023/agm-core
Description: Angular components for Google Maps
Author: Sebastian Holstein
Latest version: 15.0.0

Angular Google Maps (AGM) Core - Angular 2+ Google Maps components
=========

@agm/core contains solutions for the Google Maps JavaScript Core API.

The sources for this package are in the [angular-google-maps](https://github.com/SebastianM/angular-google-maps) repository. Please file issues and pull requests against that repo.
npm package: @00farol/conversational-form
Description: Turning web forms into conversations
Author: Felix Nielsen
Latest version: 1.0.6

# Conversational Form

Conversational Form is an open-source concept by [SPACE10](https://www.space10.io) to easily turn your content into conversations. It features conversational replacement of all input elements, reusable variables from previous questions and complete customization and control over the styling.

## Acknowledgement
Thank you to everyone who has taken part in the creation of Conversational Form prior to <a href="https://github.com/space10-community/conversational-form/blob/master/README.md">release v1.0.2</a>.

## Copyright and license
Conversational Form is licensed under <a href="https://github.com/farolinar/conversational-form/blob/master/LICENSE.md" target="_blank">MIT</a>.
npm package: @01/as-lzma
Description: LZMA Decoder written in AssemblyScript
Author: Nidin Vinayakan
Latest version: 1.0.2

LZMA Decoder (AssemblyScript)
============

This is an experimental lzma decoder written in [AssemblyScript](https://github.com/AssemblyScript/assemblyscript)

Example
-------

[example code](/examples)

```javascript
var memory = new WebAssembly.Memory({ initial: 160 })
...
// You know how to instantiate WASM module
var lzma = module.instance.exports

// Get compressed data by fetch or by some other means
var inputData = new Uint8Array(await (await fetch('PATH/TO/COMPRESSED_FILE.lzma')).arrayBuffer())

// Allocate memory to copy input data. 
const inputDataPtr = lzma.newU8Array(inputData.length)

// AssemblyScript ArrayBuffer header length
const AS_ARRAY_OFFSET = 24

// Create an Uint8Array using allocated buffer and set input data
const u8Array = new Uint8Array(
  memory.buffer,
  inputDataPtr + AS_ARRAY_OFFSET,
  inputData.length
)
u8Array.set(inputData)

class DecodeResult {
  constructor(ptr, memory) {
    const result = new Uint32Array(memory.buffer, ptr, 4)
    const [success, error, unpackSize, dataPtr] = result;
    this.success = success
    this.error = error
    if (this.success) {
      this.unpackSize = unpackSize
      this.data = new Uint8Array(
        memory.buffer,
        dataPtr + AS_ARRAY_OFFSET,
        unpackSize
      )
    }
  }
}

// Decode LZMA data
const resultPtr = lzma.decode(inputDataPtr)
const result = new DecodeResult(resultPtr, memory)

// Decompressed data
console.log(result.data)

// If the data is plain text, decode using TextDecoder
// const decoder = new TextDecoder()
// const text = decoder.decode(result.data)
// console.log(text)

```

How to make lzma file
----------------------

Download [lzma sdk] and use following command

```sh
lzma e input_filename.extension output_filename.lzma
```

Developed by [Nidin Vinayakan]

License
----

MIT

[lzma sdk]:http://www.7-zip.org/sdk.html
[Nidin Vinayakan]:https://github.com/nidin
npm package: @01/env
Description: A tiny env parser for nodejs and browser
Author: 01 Alchemist
Latest version: 2.4.2

# env
[![CircleCI](https://circleci.com/gh/01alchemist/env.svg?style=svg)](https://circleci.com/gh/01alchemist/env) [![Maintainability](https://api.codeclimate.com/v1/badges/bde8b67054974cae1f0a/maintainability)](https://codeclimate.com/github/01alchemist/env/maintainability) [![Test Coverage](https://api.codeclimate.com/v1/badges/bde8b67054974cae1f0a/test_coverage)](https://codeclimate.com/github/01alchemist/env/test_coverage)

Nodejs env utils

### env
```ts
const nodeEnv:string = env("NODE_ENV", "development")
// process.env.NODE_ENV or "development"
```
### envInt
```ts
const timeout:number = envInt("TIMEOUT", 5000)
// process.env.TIMEOUT as int or 5000
```
### envFloat
```ts
const scaleFactor:number = envFloat("SCALE_FACTOR", 2.56)
// process.env.SCALE_FACTOR as float or 2.56
```
### envBoolean
```ts
const isEnabled:boolean = envBoolean("IS_ENABLED", false)
// process.env.IS_ENABLED as boolean or false
```