open-index/open-npm huggingface dataset:
npm package: @hydroperx/event
Description: Statically typed event facilities.
Author: Hydroper
Latest version: 2.0.0

# Event

## Getting started

The following program defines `play` and `stop` events.

```ts
import { EventRecord, EventTarget } from "@hydroperx/event";

// media player
class MediaPlayer extends EventTarget {
    // declare events
    declare [EventRecord]: {
        play: MediaPlayerEvent,
        stop: MediaPlayerEvent,
    };
}
```

Extending `MediaPlayer` with more events:

```ts
// media player
class MoreSpecializedPlayer extends MediaPlayer {
    // declare events
    declare [EventRecord]: MediaPlayer[typeof EventRecord] & {
        // more events...
    };
}
```

> Note that event types must implement the `Event` interface.
npm package: @hydroperx/fluent
Description: Work with Project Fluent translation lists.
Author: hydroper
Latest version: 1.1.1

# Fluent Project rapid integration

Rapidly support Fluent Project's translation in your web application. Both client-side and server-side applications are supported.

That is an updated version of [com.hydroper.ftl](https://www.npmjs.com/package/com.hydroper.ftl).

## Getting Started

Install dependency:

```sh
npm install @hydroperx/fluent
```

Example TypeScript:

```ts
import { FluentBox } from "@hydroperx/fluent";

class Main {
    fluentBox: FluentBox;

    constructor() {
        this.fluentBox = new FluentBox({
            locales: ["en"],
            fallbacks: {
                // "pt-BR": ["en"],
            },
            defaultLocale: "en",

            source: "res/lang",
            files: [
                "_", // res/lang/LANG/_.ftl
            ],

            clean: true,

            // specify either 'http' or 'fileSystem' as load method
            method: "fileSystem",
        });
        this.initialize();
    }

    async initialize() {
        if (!(await this.fluentBox.load())) {
            // failed to load
            return;
        }

        console.log(this.fluentBox.getMessage("hello", { to: "Diantha" }));
    }
}

new Main();
```

Example FTL file at `res/lang/en/_.ftl`:

```
hello = Hello, { $to }!
```

## Server Usage

Usually, for server applications, set the `clean` option to `false` and clone the `FluentBox` object when necessary by invoking `fluentBox.clone();` to change the current locale.

The `fluentBox.clone();` method clones the `FluentBox` object, but still re-uses resources from the original object, avoiding resource duplication.
npm package: @hydroperx/inputaction
Description: Input actions library.
Author: Hydroper
Latest version: 1.1.2

# Input action

<p align="center">
  <a href="./docs/globals.md"><img src="https://img.shields.io/badge/TypeScript%20API%20Documentation-gray"></a>
</p>

Input action library for web applications.

This library allows managing and handling keyboard actions such as shortcuts. It may support gamepads in the future.

Features:

* Reflect actions
* Shortcut display text
* Pooling of pressed keys

## Getting started

```ts
import { input } from "@hydroperx/inputaction";

input.setActions({
    "moveLeft": [
        { key: "a" },
        { key: "leftArrow" },
    ],
    "moveRight": [
        { key: "d" },
        { key: "rightArrow" },
    ],
    "moveUp": [
        { key: "w" },
        { key: "upArrow" },
    ],
    "moveDown": [
        { key: "s" },
        { key: "downArrow" },
    ],
});

input.on("inputPressed", () => {
    // use isPressed() or justPressed()
    const shouldMoveRight = input.justPressed("moveRight");
});
```
npm package: @hydroperx/metro
Description: Metro design components for React.js.
Author: Hydroper
Latest version: 2.0.9

# Metro UI

<p align="center">
  <a href="https://hydroperx.github.io/metro.js/docs"><img src="https://img.shields.io/badge/TypeScript%20API%20Documentation-gray"></a>
  <a href="https://hydroper-metro-demo.vercel.app"><img src="https://img.shields.io/badge/Demo-gray"></a>
</p>

<img width="758" height="581" alt="image" src="https://github.com/user-attachments/assets/66f8a456-8212-4c35-8a07-71d60538f684" />

A HTML5+React.js library accurately mimmicking the Metro design present in the Windows 8 operating system.

## Documentation

Refer to the wiki for guides.

## Examples

[Check the demo source](https://github.com/hydroperx/metro.demo.js/tree/master/src) for some usage of the various components.

## License

Apache 2.0
npm package: @hydroperx/metrodesign
Description: Metro design components for React.js.
Author: Hydroper
Latest version: 1.0.5

# Metro design

<p align="center">
  <a href="https://hydroperx.github.io/metrodesign.js/docs"><img src="https://img.shields.io/badge/TypeScript%20API%20Documentation-gray"></a>
</p>

Modern Metro design library for React.js, with look and feel close to Windows 8.

## Documentation

- [Getting started](./docs/getting-started.md)
- [Icons and logos](./docs/icons-logos.md)
- [Scale factor](./docs/scale-factor.md)
- [Escapable](./docs/escapable.md)
- [Button navigable](./docs/button-navigable.md)
- [Scrolling](./docs/scrolling.md)
- [Themes](./docs/themes.md)
- Components
  - [Live tiles](./docs/live-tiles.md)
  - [Popover menu](./docs/components/popover-menu.md)

## Examples

We're a bit undocumented yet, but you can check these sources for ideas on general component usage:

- [test/src/_recover](./test/src/_recover)

## License

Apache 2.0
npm package: @hydroperx/metrodragon
Description: Metro design components for React.js.
Author: Hydroper
Latest version: 1.0.6

# MetroDragon

<p align="center">
  <a href="https://hydroperx.github.io/metrodragon.js/docs"><img src="https://img.shields.io/badge/TypeScript%20API%20Documentation-gray"></a>
  <a href="https://metrodragon-demo.vercel.app"><img src="https://img.shields.io/badge/Demo-gray"></a>
</p>

A HTML5+React.js library accurately mimmicking the Metro design present in the Windows 8 operating system.

## Documentation

Refer to the wiki for guides.

## License

Apache 2.0