open-index/open-npm huggingface dataset:
npm package: @pxd-co/pxd-auth-popup
Description: A react component that supply pxd auth client
Author: pxd
Latest version: 0.3.1

# @pxd-co/pxd-auth-popup

pxd auth client를 제공하는 react 컴포넌트입니다.

## 설명

이 프로젝트는 pxd auth client를 제공하는 react 컴포넌트입니다. 현재 버전은 0.1.3입니다.

## 설치

프로젝트를 설치하려면, 저장소를 클론하고 의존성을 설치할 수 있습니다:

```bash
git clone git+https://github.com/pxd-xe-group/pxd-auth-popup.git
cd pxd-auth-popup
npm install
```

## Custom Hook

이 프로젝트는 `useLogin.tsx`와 `tokenUtils.ts` 파일에서 다음 함수들을 제공합니다:

### `useLogin()`

`useLogin`은 로그인 팝업을 관리하는 함수를 반환하는 훅입니다.

```javascript
import { useLogin } from "./useLogin";

const { onLogin } = useLogin();
```

- `onLogin()`
  - onLogin(auto: boolean)
  - onLogin 함수는 클릭 시 로그인 팝업을 엽니다. 이 함수는 auto라는 불리언 타입의 매개변수를 받습니다. auto가 true일 경우, 자동 로그인 URL로 팝업을 엽니다.

```javascript
onLogin(true); // 자동 로그인 URL로 팝업을 엽니다.
onLogin(false); // 일반 로그인 URL로 팝업을 엽니다. (default)
```

## Token Utils

### `getToken()`

- `getToken` 함수는 저장된 토큰을 가져옵니다. 이 함수는 매개변수가 필요하지 않습니다.
- 이 함수는 저장된 토큰을 문자열로 반환합니다. 토큰이 없으면 null을 반환합니다.

```typescript
import { getToken } from "./tokenUtils";

const token = getToken();
```

### `decodeToken()`

- `decodeToken(token: string)`
  - `decodeToken` 함수는 주어진 토큰을 디코드합니다. 이 함수는 문자열 타입의 토큰을 매개변수로 받습니다.
  - 이 함수는 디코드된 토큰 객체를 반환합니다. 토큰이 유효하지 않으면 오류를 던집니다.

```javascript
import { decodeToken } from "./tokenUtils";

const decoded = decodeToken("your_token_here");
```

### `getDecodedToken()`

- 현재 쿠키 스토리지에 저장되어 있는 토큰을 가져와 디코드합니다.
- 이 함수는 디코드된 토큰 객체를 반환합니다. 토큰이 유효하지 않으면 오류를 던집니다.

```typescript
import { getDecodedToken } from "./tokenUtils";

const decodedToken = getDecodedToken();
```

## 기여

버그를 발견하거나 기능 요청이 있으면, [GitHub 페이지](https://github.com/pxd-xe-group/pxd-auth-popup/issues)에 이슈를 열어 주세요.
npm package: @pxd-xe/pxd-auth-popup
Description: A react component that supply pxd auth client
Author: pxd
Latest version: 1.0.0

# @pxd-co/pxd-auth-popup

pxd auth client를 제공하는 react 컴포넌트입니다.

## 설명

이 프로젝트는 pxd auth client를 제공하는 react 컴포넌트입니다. 현재 버전은 0.1.3입니다.

## 설치

프로젝트를 설치하려면, 저장소를 클론하고 의존성을 설치할 수 있습니다:

```bash
git clone git+https://github.com/pxd-xe-group/pxd-auth-popup.git
cd pxd-auth-popup
npm install
```

## Custom Hook

이 프로젝트는 `useLogin.tsx`와 `tokenUtils.ts` 파일에서 다음 함수들을 제공합니다:

### `useLogin()`

`useLogin`은 로그인 팝업을 관리하는 함수를 반환하는 훅입니다.

```javascript
import { useLogin } from "./useLogin";

const { onLogin } = useLogin();
```

- `onLogin()`

  - onLogin(auto: boolean)
  - onLogin 함수는 클릭 시 로그인 팝업을 엽니다.

- `autoLogin()`
  - autoLogin()
  - 자동 로그인 함수입니다. 자동 로그인을 원하는 페이지 컴포넌트에서 호출합니다.

## Token Utils

### `getToken()`

- `getToken` 함수는 저장된 토큰을 가져옵니다. 이 함수는 매개변수가 필요하지 않습니다.
- 이 함수는 저장된 토큰을 문자열로 반환합니다. 토큰이 없으면 null을 반환합니다.

```typescript
import { getToken } from "./tokenUtils";

const token = getToken();
```

### `decodeToken()`

- `decodeToken(token: string)`
  - `decodeToken` 함수는 주어진 토큰을 디코드합니다. 이 함수는 문자열 타입의 토큰을 매개변수로 받습니다.
  - 이 함수는 디코드된 토큰 객체를 반환합니다. 토큰이 유효하지 않으면 오류를 던집니다.

```javascript
import { decodeToken } from "./tokenUtils";

const decoded = decodeToken("your_token_here");
```

### `getDecodedToken()`

- 현재 쿠키 스토리지에 저장되어 있는 토큰을 가져와 디코드합니다.
- 이 함수는 디코드된 토큰 객체를 반환합니다. 토큰이 유효하지 않으면 오류를 던집니다.

```typescript
import { getDecodedToken } from "./tokenUtils";

const decodedToken = getDecodedToken();
```

## 기여

버그를 발견하거나 기능 요청이 있으면, [GitHub 페이지](https://github.com/pxd-xe-group/pxd-auth-popup/issues)에 이슈를 열어 주세요.
npm package: @pxe/database
Description: A simple local database for Node.js
Author: reve-node
Latest version: 1.0.0

# Database
A local JSON database for Node.js

## Installation
```bash
# NPM
npm i @pxe/database vlds 

# Yarn
yarn add @pxe/database vlds
```

## Usage
```ts
import Database from "@pxe/database";
import types from "vlds";

// Create a new database 
const db = new Database("/path/to/db");

// For TS type checking 
type UserType = { id: string, password: string };

// Create a new collection
const User = db.collect<UserType>("users", {
    id: types.string,
    password: types.string
});

// Create a new user 
const user = new User({
    id: "t7348gun9vio",
    password: "38hbn0p0v"
});

// Save to database 
await user.save();

// Find user
const currentUser = User.findOne({
    id: "t7348gun9vio"
}); 
console.log(currentUser.data);

// Delete user
User.remove(currentUser.id);

// Remove the user collection
db.remove("users");

// Clear the database
db.clear();
```
npm package: @pxe/server
Description: A lightweight, simple and fast web server for Node.js
Author: reve-node
Latest version: 1.0.14

# PXE.js Server
[![install size](https://packagephobia.com/badge?p=%40pxe%2Fserver)](https://packagephobia.com/result?p=%40pxe%2Fserver)
[![Gitter](https://badges.gitter.im/pxe-js/community.svg)](https://gitter.im/pxe-js/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)

The server module of PXE.js.

## Installation
Install `@pxe/server`.

```bash
# NPM
npm i @pxe/server

# Yarn
yarn add @pxe/server
```

## Usage
A simple "Hello world" example:

```ts
import Server from "@pxe/server";

const app = new Server();

app.use(async ctx => {
    ctx.response.body = "Hello, world!";
});

app.ls(3000);
```

## Benchmarking
Install `autocannon` then run `node bench` in the root directory of this repo.
This will start a server then start benchmarking using `autocannon`.
Once benchmarking is done the process is terminated.

See our framework compares to other Node.js frameworks: https://web-frameworks-benchmark.netlify.app/result?l=javascript
npm package: @pxeeio/express-async-controller
Description: A TypeScript-focused package to help create fully-typed, async-capable Express controllers.
Author: Rodrigo Bondoc
Latest version: 0.1.0

# express-async-controller

`express-async-controller` is a TypeScript-focused package to help create fully-typed, async-capable Express controllers.

In this sense, a **Controller** is defined as an object whose keys are of type `string` and whose values are HTTP handler functions that take `Request`, `Response`, and
`NextFunction` as parameters and can be either synchronous or asynchronous.

## Features
- Easily define type-safe Express HTTP handlers.
- Supports `async` handlers through the `asyncHandler` function from [`express-async-handler`](https://www.npmjs.com/package/express-async-handler).
- Integrates well with type augmentation on the `Request` type (e.g. attaching properties to `request.session` from `express-session`).

## Installation

With `npm`:

`npm i @pxeeio/express-async-controller`

With `yarn`:

`yarn add @pxeeio/express-async-controller`

With `pnpm`:

`pnpm add @pxeeio/express-async-controller`

## Usage

You can directly pass in type definitions to the function:
```typescript
import Controller from '@pxeeio/express-async-controller';
import {Router} from 'express';

type CreatePostRequest = {
    body: {
        title: string;
    };
};

const postsController = Controller<{
    create: CreatePostRequest;
    list: undefined;
    read: {
        params: {
            id: string;
        };
    };
}>({
    list: async (request, response) => {
        // ...
    },
    read: async (request, response, next) => {
        // `id` is `string` | `undefined`
        const {id} = request.params;
    },
});

const router = Router();

router.get('/posts', postsController.list);
router.get('/posts/:id', postsController.read);
router.post('/posts', postsController.create);
```

or use the `AsynchronousRequestHandler` type to separate the function implementation from the object:
```typescript
import Controller, {type AsynchronousRequestHandler, type Request} from '@pxeeio/express-async-controller';
import {Router} from 'express';

// In `express-session.d.ts`:
declare module 'express-session' {
    interface SessionData {
        user?: {
            id: User['id'];
        };
    }
}

type LoginRequest = Request<{
    body: {
        email: string;
        password: number;
    };
}>;

const login: AsynchronousRequestHandler<LoginRequest> = async (request, response, next) => {
    const user = await User.findByEmail(email);

    if (await user?.isValid()) {
        request.session.user = {
            id: user.id,
        };
        response.status(200).json({
            success: true,
        });
    } else {
        next(new Error('Invalid credentials'));
    }
}

// The request type must still be passed in as a type definition.
const authController = Controller<{
    login: LoginRequest,
}>({
    login,
});

const router = Router();
router.post('/auth', authController.login);
```
npm package: @pxeeio/hygieia
Description: A TypeScript project configuration CLI tool that streamlines initial setup with linting, code style, and type checks.
Author: Rodrigo Bondoc
Latest version: 0.1.0-alpha.1

# Hygieia 👸
---
> Hygieia, the Greek goddess of health, cleanliness, and sanitation

Hygieia (pronounced "high-jee-uh") is a TypeScript project scaffolding tool CLI that streamlines initial setup with linting and code formatting on-save.

## Contribution
See the [Contributing Guide](./docs/CONTRIBUTING.md).

## License
[MIT](LICENSE)
npm package: @pxfed/dcui
Description: > tailwindcss plugin forked from daisyUI
Author: paulxiaooo
Latest version: 1.0.1

# dcui

> tailwindcss plugin forked from daisyUI


## keywords

- styled
Boolean (default: true)

If it's true, components will have colors and style so you won't need to design anything. If it's false, components will have no color and no visual style so you can design your own style on a basic skeleton.

- rtl
Boolean (default: false)

If it's true, your theme will be right-to-left. You need to add dir='rtl' to your body tag. If you're using daisyUI with RTL option, I suggest using tailwindcss-flip plugin to flip all your Tailwind utilities automatically.

## notes

拒绝重复造轮子！！！
npm package: @pxicons/lucide
Description: Lucide pixel-art icons for vanilla JavaScript and shared framework data.
Latest version: 0.1.0

# @pxicons/lucide

Pixel-art Lucide icons for vanilla JavaScript.

## Install

```bash
npm install @pxicons/lucide
```

## Quick Start (Vanilla)

```html
<script type="module">
  import { createIcons } from '@pxicons/lucide';

  createIcons();
</script>

<i data-px="lucide:alarm-clock-minus"></i>
```

## Runtime API

- `createIcons(options?)`: scans DOM and replaces matching elements with generated SVG.
- `replaceElement(element, icon, options?)`: replace one element with a rendered icon SVG.
- `iconToSvg(icon, options?)`: render icon definition to SVG string.

## Data Attribute

- Default attribute: `data-px`
- Token format: `library:icon`
- Current library support: `lucide`
- Example: `data-px="lucide:alarm-clock-minus"`

`createIcons` accepts tolerant icon naming (`alarm-clock-minus`, `alarmClockMinus`, `AlarmClockMinus`, `alarm_clock_minus`) and normalizes to canonical kebab-case.

## Icon Exports

```ts
import { alarmClockMinus, icons } from '@pxicons/lucide';
```

Deep icon subpath:

```ts
import alarmClockMinus from '@pxicons/lucide/icons/alarm-clock-minus';
```

## Compatibility Exports

Existing exports remain available:

- `lucideIcons`
- `lucideSvgMap`
- `lucidePixelMap`
- `getLucideIcon`
- `extractPixelCellsFromSvg`
- `buildRectRunsFromPixelCells`
- `extractPixelRectRunsFromSvg`
npm package: @pxicons/lucide-react
Description: Lucide pixel-art icon components for React.
Latest version: 0.1.0

# @pxicons/lucide-react

Pixel-art Lucide icon components for React.

## Install

```bash
npm install @pxicons/lucide-react
```

## Quick Start

```tsx
import { AlarmClockMinus } from '@pxicons/lucide-react';

export function App() {
  return <AlarmClockMinus size={24} color="currentColor" />;
}
```

## Import Patterns

```tsx
import { AlarmClockMinus, Icon, icons } from '@pxicons/lucide-react';
import AlarmClockMinusDeep from '@pxicons/lucide-react/icons/alarm-clock-minus';
```

## Props

All generated icons forward to the shared `Icon` base component.

| Prop | Type | Default |
| --- | --- | --- |
| `size` | `number \| string` | `24` |
| `color` | `string` | `'currentColor'` |
| `strokeWidth` | `number \| string` | `2` |
| `absoluteStrokeWidth` | `boolean` | `false` |
| `shape` | `'square' \| 'circle' \| 'rounded'` | `'square'` |
| `renderMode` | `'auto' \| 'raw' \| 'optimized'` | `'auto'` |
| `title` | `string` | `undefined` |
| `...svgProps` | `React.SVGProps<SVGSVGElement>` | - |

## Accessibility

- If `title` is set, `<title>` is rendered.
- If no `title` and no explicit accessibility props are passed, icons default to `aria-hidden="true"`.
npm package: @pxicons/lucide-svelte
Description: Lucide pixel-art icon components for Svelte.
Latest version: 0.1.0

# @pxicons/lucide-svelte

Pixel-art Lucide icon components for Svelte.

## Install

```bash
npm install @pxicons/lucide-svelte
```

```bash
deno add jsr:@pxicons/lucide-svelte
```

## Compatibility

- `svelte@^5`

## Quick Start

```svelte
<script lang="ts">
  import { Settings } from '@pxicons/lucide-svelte';
</script>

<Settings size={24} color="currentColor" />
```

## Import Patterns

```svelte
<script lang="ts">
  import { Settings } from '@pxicons/lucide-svelte';
  import { Settings as SettingsFromIcons } from '@pxicons/lucide-svelte/icons';
  import { icons } from '@pxicons/lucide-svelte';
</script>
```

## Props

All icons share the same API:

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `size` | `number \| string` | `24` | Sets SVG `width` and `height`. |
| `color` | `string` | `'currentColor'` | Fill color for generated pixel geometry. |
| `strokeWidth` | `number \| string` | `2` | Controls pixel density/weight. |
| `absoluteStrokeWidth` | `boolean` | `false` | Keeps stroke appearance consistent when size scales. |
| `shape` | `'square' \| 'circle' \| 'rounded'` | `'square'` | Pixel glyph style. |
| `renderMode` | `'auto' \| 'raw' \| 'optimized'` | `'auto'` | Chooses per-pixel vs optimized path rendering. |
| `title` | `string` | `undefined` | Adds a `<title>` for accessibility. |
| `...props` | `SVGAttributes<SVGSVGElement>` | - | Forwarded to the root `<svg>`. |

## Render Behavior

- `renderMode="auto"` picks optimized output when geometry is safe, otherwise raw per-pixel elements.
- `renderMode="optimized"` forces path-based rendering when possible.
- `renderMode="raw"` always renders per-pixel elements.
- `shape="square"` is grid-sharp.
- `shape="circle"` renders circular pixels.
- `shape="rounded"` renders rounded-corner pixels.

## Accessibility

- If `title` is provided, a `<title>` node is rendered.
- If no `title`, no children, and no explicit accessibility attributes are passed, the icon is marked `aria-hidden="true"`.

## Links

- npm: [@pxicons/lucide-svelte](https://www.npmjs.com/package/@pxicons/lucide-svelte)
- JSR: [@pxicons/lucide-svelte](https://jsr.io/@pxicons/lucide-svelte)
- Source: [pxicons repository](https://github.com/Royserg/pxicons/tree/dev/packages/frameworks/lucide-svelte)
- Release guide: [`RELEASING.md`](./RELEASING.md)
npm package: @pxjam/text-splitter
Description: Helper for splitting and wrapping each word/letter of text/html with a span tag
Author: Dmitry Udovichenko
Latest version: 0.1.5

# Text Splitter

A **< 1Kb** helper for splitting and wrapping each word/letter of text/html
with a span tag with custom class and computable styles.

It does not use DOM API, so it can be used outside
the browser (e.g. in Node.js for SSR).

## Basic usage

```shell
npm install @pxjam/text-splitter
```

```html
<p id="p">This is a <strong>HTML text</strong> that will be split into separate lines, words, and&nbsp;letters.</p>
```

```js
import { TextSplitter } from '@pxjam/text-splitter'

const el = document.getElementById('p')

const letters = textSplitter(el.innerHTML, {
  wordCls: 'W',
  letterCls: 'L',
  getWordStyle: (idx) => `transform: translateY(${idx * 5}px)`,
  getLetterStyle: (idx) => `transform: translateX(${idx * 10}px)`
})

el.innerHTML = letters
```

## Demo

https://pxjam.github.io/text-splitter/
npm package: @pxljp/pxl-player-react
Description: React wrapper for pxl-player
Latest version: 0.2.2

# Pxl Player React

Pxl Player React is a wrapper of the Pxl Player for React projects.

## Install

```
npm i --save @pxljp/pxl-player-react
```

## Usage

### Parameters

```typescript
export type PxlPlayerInitOptions = {
  eventId: string; // Event from pxl
  clientId: string; // Your OAuth2 client id
  code: string; // Code for OAuth2 authentication
  endpoint: string; // Endpoint used with `domain` to call for authentification
  domain: string; // Your pxl domain address (https://XXX.asn.jp)
  rootElement: RootElement; // The HTML element to add the pxl player as child
  i18n?: Language; // optional, en_US by default, interface language setup (en_US or ja_JP)
};
```

| Attribute     | Type                       | required? | default value | Description                                        |
| ------------- | -------------------------- | --------- | ------------- | -------------------------------------------------- |
| `eventId`     | `string`                   | required  | none          | Event id coming from admin.pxl                     |
| `clientId`    | `string`                   | required  | none          | OAuth2 client id                                   |
| `code`        | `string`                   | required  | none          | OAuth2 code used for authentication                |
| `endpoint`    | `string`                   | required  | none          | OAuth2 endpoint used with `domain`                 |
| `domain`      | `string`                   | required  | none          | Domain URL of your pxl artist (https://XXX.asn.jp) |
| `rootElement` | `HTMLElement` or `Element` | required  | none          | The HTML element to add the pxl player as child    |
| `i18n`        | `string`                   | optional  | `en_US`       | Interface language (`en_US` or `ja_JP`)            |

```typescript jsx
export const PagePlayer = () => {
  const element = useRef<HTMLDivElement>(null);

  initPxlPlayer({
    rootElement: element.current,
    clientId: 'XXXX',
    code: 'YYYY',
    endpoint: 'uri/to/endpoint',
    eventId: 'EVENT-ID-XXXX-YYYY-ZZZZ',
    domain: 'https://YOUR-ARTIST.asn.jp/',
    i18n: 'en_US',
    useChat: false,
  });
  return (
    <>
      <div ref={element} />
    </>
  );
};
```
npm package: @pxlmvr/use-onclickoutside
Description: A small, focused React hook that triggers a callback when a mouse or touch interaction occurs outside a specified element.
Author: Matteo Losi
Latest version: 0.1.0

# use-on-click-outside

A small, focused React hook that triggers a callback when a mouse or touch interaction occurs outside a specified element.

Designed to be:

- ✅ TypeScript-first
- ✅ Lightweight (no dependencies besides React)
- ✅ Safe to use across modals, dropdowns, popovers, etc.
- ✅ Compatible with React 16.8+ (hooks)

---

## Installation

```bash
npm install use-on-click-outside
# or
yarn add use-on-click-outside
```

## Usage

### Basic Example

```tsx
import { useRef } from 'react'
import { useOnClickOutside } from 'use-on-click-outside'

function Dropdown() {
  const ref = useRef<HTMLDivElement>(null)

  useOnClickOutside(ref, () => {
    console.log('Clicked outside')
  })

  return <div ref={ref}>Dropdown content</div>
}
```

### With allowed elements

You can provide additional refs that should be treated as “inside” clicks and therefore not trigger the callback:

```tsx
const containerRef = useRef<HTMLDivElement>(null)
const buttonRef = useRef<HTMLButtonElement>(null)

useOnClickOutside(containerRef, () => {
  setOpen(false)
}, [buttonRef])
```

## API

### `useOnClickOutside`

```ts
useOnClickOutside(
  ref: RefObject<HTMLElement | null>,
  handler: (event: MouseEvent | TouchEvent) => void,
  allowedNodes?: RefObject<HTMLElement | null>[]
): void
```

### Parameters

- `ref`: A React ref object pointing to the element you want to detect outside clicks for.
- `handler`: A callback function that gets called when a click or touch event occurs outside the referenced element.
- `allowedNodes` (optional): An array of React ref objects that should be considered as inside clicks and excluded from triggering the handler.

## Exclusion rules

The handler will not be called if:

- The event target is inside `ref`
- The event target is inside any `allowedNodes`
- The event target has the CSS class:

```css
__exclude-click-outside__
```

## Events

The hook listens for the following events:

- `mousedown`
- `touchstart`

This ensures consistent behavior across mouse and touch devices.

## React compatibility

- React 16.8+

React is listed as a peer dependency, no duplicate React instances are bundled.
npm package: @pxlprfct/word-wheel
Description: A dependency-free way to solve a word wheel or the NYT Spelling Bee!
Latest version: 1.0.11

# Word Wheel

[![deno land](http://img.shields.io/badge/available%20on-deno.land/x-lightgrey.svg?logo=deno&labelColor=black)](https://deno.land/x/word_wheel)
[![npm](https://img.shields.io/npm/v/@pxlprfct/word-wheel)](https://www.npmjs.com/package/@pxlprfct/word-wheel)

**A dependency-free(!) library to solve word wheels - or even the
[NYT Spelling Bee](https://www.nytimes.com/puzzles/spelling-bee)!**

## Rules

Each word must always include the centre letter, and each letter can only be
used as many times as it is on the wheel (in the example below - 'a' is on the
wheel twice, so it can be used twice in the same word).

![Example of "Word Wheel" - the letter 'L' in the center, and 'N', 'C', 'M'. 'U', 'A', 'B', 'E', 'A' surrounding it](https://user-images.githubusercontent.com/3811773/164109266-5f20da21-af02-450d-b8e8-77648703acec.png)

##### Valid words

- Calm
- Ale
- Bale

##### Invalid words

- Hello (Invalid Letters)
- Cane (Middle letter not used)
- Mama ('M' used twice, despite only appearing in the wheel once)

## How to use

```ts
import { wordWheel } from "word-wheel";
import { EXAMPLE_WORD_LIST } from "./example-word-list"; // supply your own dictionary

const REQUIRED_LETTERS = ["L"];
const OPTIONAL_LETTERS = ["A", "N", "C", "M", "U", "A", "B", "E"];

const result = wordWheel({
  letters: {
    requiredLetters: REQUIRED_LETTERS,
    optionalLetters: OPTIONAL_LETTERS,
  },
  dictionary: EXAMPLE_WORD_LIST,
  // options: {
  //   lettersCanBeUsedMultipleTimes: true,
  //   minimumLength: 4,
  // },
});

// result = [ "ambulance", "albumen", "alumnae", "balance", "calumba", "canulae", ... ]
```

---

You _could_ use this library to cheat the
[NYT Spelling Bee](https://www.nytimes.com/puzzles/spelling-bee). However, as
the dictionary the New York Times uses isn't public - you may get some false
positives. Best of luck getting those pangrams!

```ts
import { spellingBee } from "word-wheel";
import { EXAMPLE_WORD_LIST } from "./example-word-list"; // supply your own dictionary

const REQUIRED_LETTERS = ["C"];
const OPTIONAL_LETTERS = ["R", "J", "U", "A", "L", "O"];

const result = spellingBee({
  letters: {
    requiredLetters: REQUIRED_LETTERS,
    optionalLetters: OPTIONAL_LETTERS,
  },
  dictionary: EXAMPLE_WORD_LIST,
});

// result = [ "rollcollar", "calcular", "callaloo", "caracara", "carcajou", "carjacou", "corocoro", "jararaca", "oracular", "accrual", "calaloo", "caracal", "caracol", "caracul", "cloacal", "coralla", "corolla", "curacao", "curacoa", "jocular", ... ]
```

If you need an example dictionary to use
[checkout the word list used in the tests.](https://raw.githubusercontent.com/pxlprfct/word_wheel/main/test/example-word-list.ts)
npm package: @pxlrbt/animation
Description: Simple vanilla js animation class.
Author: Dennis Koch
Latest version: 1.0.0

# Animation

Very simple vanilla js animation library.

## Installation

```js
npm install @pxlrbt/animation
```

## Usage

```js
import { Animation, EasingFunctions } from '@pxlrbt/animation';

let animation = new Animation();
animation.from(0).to(100).delay(5000).duration(600).easing(EasingFunctions.easeInEaseOut).step((step) => {
    console.log('Current', step.current);
    console.log('Progress', step.progress);
    console.log('From', step.from);
    console.log('To', step.to);
});

animation.animate();
// or
await animation.animate()
console.log('Animation done');
```
npm package: @pxlrbt/filter-elements
Description: Filter HTML elements based on multiple filters. Supports lists and selects.
Author: Dennis Koch
Latest version: 1.0.1

# Filter Elements

Let's you filter HTML Elements by tag based filters by setting an data attribute. Supports clickable handles and selects.

## Installation

```bash
npm install @pxlrbt/filter-elements
```

## Usage

```js
import FilterElements from '@pxlrbt/filter-elements';
var filter = new FilterElements();
```

```html
<a data-filter-key="tags" data-filter-value="">All</a>
<a data-filter-key="tags" data-filter-value="js">JavaScript</a>
<a data-filter-key="tags" data-filter-value="html">HTML</a>

<div>
  <div data-filterable data-filter-tags="js"></div>
  <div data-filterable data-filter-tags="js,html"></div>
  <div data-filterable data-filter-tags="html"></div>
</div>
```

```css
[data-filterable] {
    display: none;
}

[data-filter-filtered="false"] {
    display: block;
}
```
npm package: @pxlrbt/smoothscroll
Description: Smoothly scroll to anchor links.
Author: Dennis Koch
Latest version: 1.0.0

# Smoothscroll

Smoothly scroll to anchor links.

## Installation

```bash
npm install @pxlrbt/smoothscroll
```

## Usage

```js
import Smoothscroll from '@pxlrbt/smoothscroll';
new Smoothscroll({
    speed: 400,
    elementSelector: 'a[href*="#"]',
    useHash: true,
    threshold: function () {
        return document.querySelector('header').offsetHeight;
    }
});
```

```html
<a href="#section">Scroll to section</a>
...
<section id="section">...</section>
````
npm package: @pxlwidgets/console-credits
Description: Tiny package to output company logo and collaborator credits to the console.
Author: Jeffrey Westerkamp
Latest version: 2.0.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @pxlwidgets/console-credits [![npm version](https://badge.fury.io/js/%40pxlwidgets%2Fconsole-credits.svg)](https://badge.fury.io/js/%40pxlwidgets%2Fconsole-credits)

Tiny package to output an ✨awesome✨ logo and collaborator credits to the console - just for fun.

**Usage:**

```javascript
import { PXLWidgetsCredits } from '@pxlwidgets/console-credits';

PXLWidgetsCredits({
    projectName: 'Some Project',
    collaborators: [
        { name: 'John', position: 'Developer' },
        { name: 'Jane', position: 'Design / UX' },
        // ...
    ],
});
```
**Console output:**

```text



Some Project by PXL.Widgets | https://pxlwidgets.com
------------------------------------------------------------

  ....            ...........................          
 ....  .         ..........................  ..        
      ...                             ....  ....       
 ..... ....     .................... .... .....        
  ..... ....     .....              .... ....          
   ..... ....      ....  ...       .... ....           
    ..... ....      ....  ...     .... ....            
     .....  ...      ..... ....  ...  ....      ....   
      .....  ...      ..... .... ..  ....      .... .. 
        ....  ...      ..... ....   ....      .... ....
         ..... ....     .....  ...  ..      ....  .... 
          ..... ....      ....  ...        ....  ....  
           ..... ....      ....  ...      ....  ....   
            .....  ...      ..... ....   ....  ....    
              ....  ...  ... ..... .... .... .....     
               ....  ...  .   ..... .... .. ....       
                ..... ....  .. .....  ...  ....        
                 ..... ........ .....  .......         
                  ..... .....     ....  .....          
                   .....  ..       ..... ...           
    
------------------------------------------------------------
Collaborators:
--------------
John (Developer)
Jane (Design / UX)
------------------------------------------------------------
```