open-index/open-npm huggingface dataset:
npm package: @reach/slider
Description: Accessible React Slider Component
Author: React Training
Latest version: 0.18.0

# @reach/slider

[![Stable release](https://img.shields.io/npm/v/@reach/slider.svg)](https://npm.im/@reach/slider) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/slider) | [Source](https://github.com/reach/reach-ui/tree/main/packages/slider) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#slider)

A UI input component where the user selects a value from within a given range. A Slider has a handle that can be moved along a track to change its value. When the user's mouse or focus is on the Slider's handle, the value can be incremented with keyboard controls.

```jsx
import {
	Slider,
	SliderInput,
	SliderTrack,
	SliderRange,
	SliderHandle,
	SliderMarker,
} from "@reach/slider";
import "@reach/slider/styles.css";

function Example() {
	return <Slider min={0} max={200} step={10} />;
}

function ExampleComposed() {
	return (
		<SliderInput min={0} max={200} step={10}>
			<SliderTrack>
				<SliderRange />
				<SliderHandle />
			</SliderTrack>
		</SliderInput>
	);
}
```
npm package: @reach/tabs
Description: Accessible React Tabs Component
Author: React Training
Latest version: 0.18.0

# @reach/tabs

[![Stable release](https://img.shields.io/npm/v/@reach/tabs.svg)](https://npm.im/@reach/tabs) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/tabs) | [Source](https://github.com/reach/reach-ui/tree/main/packages/tabs) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#tabpanel)

An accessible tabs component.

The `Tab` and `TabPanel` elements are associated by their order in the tree. None of the components are empty wrappers, each is associated with a real DOM element in the document, giving you maximum control over styling and composition.

You can render any other elements you want inside of `Tabs`, but `TabList` should only render `Tab` elements, and `TabPanels` should only render `TabPanel` elements.

```jsx
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";
import "@reach/tabs/styles.css";

function Example() {
	return (
		<Tabs>
			<TabList>
				<Tab>One</Tab>
				<Tab>Two</Tab>
				<Tab>Three</Tab>
			</TabList>

			<TabPanels>
				<TabPanel>
					<p>one!</p>
				</TabPanel>
				<TabPanel>
					<p>two!</p>
				</TabPanel>
				<TabPanel>
					<p>three!</p>
				</TabPanel>
			</TabPanels>
		</Tabs>
	);
}
```
npm package: @reach/tooltip
Description: Accessible tooltips
Author: React Training
Latest version: 0.18.0

# @reach/tooltip

[![Stable release](https://img.shields.io/npm/v/@reach/tooltip.svg)](https://npm.im/@reach/tooltip) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/tooltip) | [Source](https://github.com/reach/reach-ui/tree/main/packages/tooltip) | [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/#tooltip)

When the user's mouse or focus rests on an element, a non-interactive popup is displayed near it.

A couple notes on using tooltips:

- Do not use tooltips for information vital to task completion. The elements they are attached to should usually make sense on their own, but a tooltip can help provide a little bit more information--especially for new users of your app.
- Keep the content minimal, they are not intended to hide critical content.
- If you want interactive content, you can use a [Dialog](/dialog).

_Touch Events_: Touch events are currently not supported. There's not a lot of research or examples of these types of tooltips on mobile. We have some ideas but need to validate them first before implementing. Please adjust your interfaces on mobile to account for this.

```jsx
import { Tooltip, useTooltip, TooltipPopup } from "@reach/tooltip";
import { VisuallyHidden } from "@reach/visually-hidden";
import "@reach/tooltip/styles.css";

function Example() {
	return (
		<Tooltip label="Save">
			<button>
				<VisuallyHidden>Save</VisuallyHidden>
				<span aria-hidden>💾</span>
			</button>
		</Tooltip>
	);
}
```
npm package: @reach/utils
Description: Internal, shared utilities for Reach UI.
Author: React Training
Latest version: 0.18.0

# @reach/utils

[![Stable release](https://img.shields.io/npm/v/@reach/utils.svg)](https://npm.im/@reach/utils) ![MIT license](https://badgen.now.sh/badge/license/MIT)

Shared utilities for various `@reach` packages.

**Important:** This package is intended for internal use by the Reach UI library. You should not use it directly in your production projects, as the APIs can and will change often without regard to semver. You have been warned!
npm package: @reach/visually-hidden
Description: Render text that is announced to screen readers but visually hidden.
Author: React Training
Latest version: 0.18.0

# @reach/visually-hidden

[![Stable release](https://img.shields.io/npm/v/@reach/visually-hidden.svg)](https://npm.im/@reach/visually-hidden) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/visually-hidden) | [Source](https://github.com/reach/reach-ui/tree/main/packages/visually-hidden) | [Origin](https://snook.ca/archives/html_and_css/hiding-content-for-accessibility) | [Further reading](https://a11yproject.com/posts/how-to-hide-content/)

Provides text for screen readers that is visually hidden. It is the logical opposite of the `aria-hidden` attribute.

In the following example, screen readers will announce "Save" and will ignore the icon; the browser displays the icon and ignores the text.

```jsx
import { VisuallyHidden } from "@reach/visually-hidden";

function Example() {
	return (
		<button>
			<VisuallyHidden>Save</VisuallyHidden>
			<span aria-hidden>💾</span>
		</button>
	);
}
```
npm package: @reach/window-size
Description: Measure the window size in React
Author: React Training
Latest version: 0.18.0

# @reach/window-size

[![Stable release](https://img.shields.io/npm/v/@reach/window-size.svg)](https://npm.im/@reach/window-size) ![MIT license](https://badgen.now.sh/badge/license/MIT)

[Docs](https://reach.tech/window-size) | [Source](https://github.com/reach/reach-ui/tree/main/packages/window-size)

Measure the current window dimensions.

```jsx
import WindowSize, { useWindowSize } from "@reach/window-size";

function Example() {
	const { width, height } = useWindowSize();
	return (
		<div>
			<p>
				Looks like a pretty{" "}
				{width <= 400 ? "small" : width >= 1000 ? "large" : "normal"} screen!
			</p>
		</div>
	);
}
```
npm package: @reachable/reachable
Description: Make your data reachable.
Author: JacobLinCool
Latest version: 0.0.0

# reachable

> Work In Progress!

Reachable is a tool that enables the utilization of large language models (LLMs) in real-world applications by leveraging embeddings to expand the model's contextual understanding. With Reachable, data such as documentations and codebases can become more accessible and easily understood by LLMs.

## Motivation

As the use of LLMs becomes increasingly prevalent in various fields, the limitations of their context window have become a challenge in their effective application. To overcome this challenge, Reachable utilizes embeddings to provide LLMs with almost unlimited memory capacity. By doing so, LLMs can understand and analyze data in a more comprehensive manner, allowing for improved performance and efficacy.

## Features

Reachable offers a package and CLI tool that facilitates the creation and management of embeddings for various data types, including text and code. By using Reachable, you can:

- Generate embeddings for your data
- Store embeddings in a database (e.g. pinecone)
- Retrieve embeddings and associated data for use with LLMs
- Perform similarity searches on embeddings to find related data
npm package: @reachalpha/movable
Description: Angular directive that allows HTML Element movement
Latest version: 5.0.0

# @reachalpha/movable [![npm version](https://badge.fury.io/js/%40reachalpha%2Fmovable.svg)](https://badge.fury.io/js/%40reachalpha%2Fmovable)

This is an angular directive that helps you move HTMLElements in Angular.

## How to use

### Installing and Usage

```bash
npm install --save @reachalpha/movable
```

### Add the libary to a module's imports' array (i.e. app.module.ts)
```
import {MovableModule} from '@reachalpha/movable';

@NgModule({
  imports: [ 
    (...)
    MovableModule,
    (...)
  ],
})
```

### Add it to your HTML Element (i.e. app.component.html)

```html
<div style="position: relative; width: 100%; height: 100%" #container>

  <div libMovable [relativeTo]="container" direction="left"
    style="position: absolute; left: 0; top: 0; width: 50px; height: 50px">
  </div>

</div>
```

### Available configuration properties:

| Property | Description | Required / Default | Type |
|---|---|---|---|
| relativeTo | parent element | required | HTMLElement |
| direction | direction the element is suposed to move | required | 'left', 'right', 'top' |
| minSize | minimum size of the element after moving it | 0 or handlerSize | number (px) |
| otherElement | element next to the one moving that adapts to it | void | HTMLElement |
| handlerSize | size of the element that allows the moving | 10 | number (px) |
| handlerInside | put the handler inside the element | false | boolean |
| clickToggle | if clicking the handler opens or closes the element | true | boolean |
| toggle | Element that opens / closes the element on click | null | HTMLElement |
| classOpen | class that is added to the toggle when the element is opened | null | string |
| classClose | class that is added to the toggle when the element is closed | null | string |

### Available events:

| Event | Description | Type |
|---|---|---|
| positionChanged | Sends an event every time the element changes its position | number |
| opened | sends an event if the element is considered open | void |
| minSize | sends an event if the element is considered open | void |
npm package: @reachfive/identity-core
Description: ReachFive Identity Web Core SDK
Author: ReachFive
Latest version: 1.41.0

[![CircleCI](https://circleci.com/gh/ReachFive/identity-web-core-sdk/tree/master.svg?style=svg)](https://circleci.com/gh/ReachFive/identity-web-core-sdk/tree/master) [![npm](https://img.shields.io/npm/v/@reachfive/identity-core.svg?color=blue)](https://www.npmjs.com/package/@reachfive/identity-core)

# ReachFive Identity Web Core SDK

## Installation

The following command installs the Identity Web Core SDK as a Node.js dependency:

```sh
npm install --save @reachfive/identity-core
```

## Documentation

You'll find the documentation of the methods exposed [here](https://developer.reachfive.com/sdk-core/index.html).

## Changelog

Please refer to [changelog](CHANGELOG.md) to learn about release notes.

## License

MIT © [ReachFive](https://www.reachfive.com)
npm package: @reachfive/identity-ui
Description: ReachFive Identity Web UI SDK
Author: ReachFive
Latest version: 1.43.0

[![CircleCI](https://circleci.com/gh/ReachFive/identity-web-ui-sdk/tree/master.svg?style=svg)](https://circleci.com/gh/ReachFive/identity-web-ui-sdk/tree/master) [![npm](https://img.shields.io/npm/v/@reachfive/identity-ui.svg?color=blue)](https://www.npmjs.com/package/@reachfive/identity-ui)

# ReachFive Identity Web UI SDK

## Installation

The following command installs the Identity Web UI SDK as a Node.js dependency:

```sh
npm install --save @reachfive/identity-ui
```

## Documentation

You'll find the documentation of the widgets [here](https://developer.reachfive.com/sdk-ui/index.html).

## Changelog

Please refer to [changelog](CHANGELOG.md) to see the descriptions of each release.

## License

MIT © [ReachFive](https://www.reachfive.com)
npm package: @reachlabs/nextjs-pipeline-cdk
Description: AWS CDK utility for creating a pipeline for a serverless nextjs application
Latest version: 0.0.18

# Opinionated AWS CDK codepipeline setup for a serverless-next.js application

#### Requirements:
- Code repository must be on AWS CodeCommit.
- NextJS 11.
- Peer dependencies (only required to install manually if using npm version below 7):
```
npm install --save --save-exact @aws-cdk/core@1.116.0 @aws-cdk/aws-codecommit@1.116.0 @aws-cdk/pipelines@1.116.0 @aws-cdk/aws-route53-patterns@1.116.0 @aws-cdk/aws-s3-deployment@1.116.0 @aws-cdk/aws-cloudfront-origins@1.116.0 @aws-cdk/aws-lambda-event-sources@1.116.0 @aws-cdk/aws-lambda-nodejs@1.116.0
```

#### AWS Resources created:
- AWS CodePipeline with *n* number of stages.
- Each stage deploys a stack consisting of:
  
  - Resources found in here: https://github.com/serverless-nextjs/serverless-next.js/tree/master/packages/serverless-components/nextjs-cdk-construct
  - (Optional) Cloudfront redirect.
npm package: @reachrepeat/angular-modalbox
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.5.
Author: Mario Sommereder, Reach & Repeat oHG
Latest version: 0.0.3

# AngularModalbox

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.5.

## Code scaffolding

Run `ng generate component component-name --project angular-modalbox` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-modalbox`.
> Note: Don't forget to add `--project angular-modalbox` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build angular-modalbox` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build angular-modalbox`, go to the dist folder `cd dist/angular-modalbox` and run `npm publish`.

## Running unit tests

Run `ng test angular-modalbox` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @reachsuite/tinymce-react
Description: Official TinyMCE React Component
Author: Ephox Corporation DBA Tiny Technologies, Inc.
Latest version: 4.3.1-rc-rs.0

# Official TinyMCE React component

## About

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

* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/6/).
* For the TinyMCE React Quick Start, see: [TinyMCE Documentation - React Integration](https://www.tiny.cloud/docs/tinymce/6/react-cloud/).
* For the TinyMCE React Technical Reference, see: [TinyMCE Documentation - TinyMCE React Technical Reference](https://www.tiny.cloud/docs/tinymce/6/react-ref/).
* For our quick demos, check out the TinyMCE React [Storybook](https://tinymce.github.io/tinymce-react/).


### Issues

Have you found an issue with tinymce-react or do you have a feature request? Open up an [issue](https://github.com/tinymce/tinymce-react/issues) and let us know or submit a [pull request](https://github.com/tinymce/tinymce-react/pulls). *Note: For issues concerning TinyMCE please visit the [TinyMCE repository](https://github.com/tinymce/tinymce).*
npm package: @reachy/audience-module
Description: Módulo reutilizável para consultas e criação de audiences
Author: Reachy Team
Latest version: 1.0.19

# @reachy/audience-module

Módulo reutilizável para consultas e criação de audiences em múltiplos projetos Reachy.

## 🚀 Instalação

```bash
npm install @reachy/audience-module
```

## 📋 Uso Básico

```typescript
import { AudienceModule } from '@reachy/audience-module'
import { ContactRepository } from './repositories/contactRepository'
import { AudienceRepository } from './repositories/audienceRepository'

// Criar instância do módulo
const audienceModule = new AudienceModule({
  enableDebugLogs: true
})

// Configurar repositórios necessários
audienceModule.setRepositories({
  contactRepository: new ContactRepository(),
  audienceRepository: new AudienceRepository()
})

// Executar query de audiência
const result = await audienceModule.executeQuery(
  {
    filters: [
      {
        id: '1',
        operator: 'AND',
        conditions: [
          { field: 'city', operator: 'equals', value: 'São Paulo' },
          { field: 'opted_in', operator: 'equals', value: true }
        ]
      }
    ]
  },
  {
    organizationId: 'org-123',
    projectId: 'proj-456',
    pagination: { page: 1, limit: 50 }
  }
)

console.log(`Encontrados ${result.count} contatos`)
```

## 🔧 Features

- ✅ Suporte a múltiplos formatos de critérios
- ✅ Query builder otimizado
- ✅ Execução de audiences estáticas e live
- ✅ Validação de critérios
- ✅ Type-safe com TypeScript
- ✅ Fácil integração com Supabase

## 📖 API

### AudienceModule

#### `executeQuery(criteria, options)`

Executa uma query de audiência e retorna os resultados.

#### `getContactCount(criteria, options)`

Retorna apenas a contagem de contatos (mais rápido).

#### `getContactIds(criteria, organizationId, projectId)`

Retorna apenas os IDs dos contatos.

#### `validateCriteria(criteria)`

Valida se os critérios são válidos.

## 📦 Build

```bash
npm run build
```

## 🔗 Links

- [Repository](https://github.com/reachy/audience-module)
- [Issues](https://github.com/reachy/audience-module/issues)

## 📄 License

MIT