open-index/open-npm huggingface dataset:
npm package: @faressoft/node-pty-prebuilt
Description: A parallel fork of node-pty providing prebuilt packages for Node.js and Electron
Author: Mohammad Fares
Latest version: 0.9.0

# node-pty-prebuilt

This project is a parallel fork of [`node-pty`](https://github.com/Microsoft/node-pty)
providing prebuilt packages for certain Node.js and Electron versions.

## Usage

Thanks to the excellent [`prebuild`](https://github.com/prebuild/prebuild) and
[`prebuild-install`](https://github.com/prebuild/prebuild) modules, using this module
is extremely easy.  You merely have to change your `node-pty` dependency to
`node-pty-prebuilt` and then change any `require` statements in your code from
`require('node-pty')` to `require('node-pty-prebuilt')`.

> **NOTE**: We started shipping prebuilds as of node-pty version 0.7.3, no prior versions
> are provided!  If you were using an earlier version of `node-pty` you will need
> to update your code to account for any API changes that may have occurred.

## How It Works

We maintain a parallel fork of the `node-pty` codebase that will be updated as new
releases are shipped.  When we merge new updates to the code into the `prebuild`
branch, new prebuilt packages for our supported Node.js and Electron versions
are updated to the corresponding [GitHub release](https://github.com/daviwil/node-pty-prebuilt/releases).

When `node-pty-prebuilt` is installed as a package dependency, the
[`install` script](https://github.com/daviwil/node-pty-prebuilt/blob/prebuild/package.json#L37)
checks to see if there's a prebuilt package on this repo for the OS, ABI version,
and architecture of the current process and then downloads it, extracting it into
the module path.  If a corresponding prebuilt package is not found, `node-gyp`
is invoked to build the package for the current platform.

## Prebuilt Versions

We currently build packages for all versions of Node.js and Electron that are
supported by the `prebuild` module.  You can see the full list of versions by checking
out the [`supportedTargets`](https://github.com/lgeiger/node-abi/blob/master/index.js#L51)
list in [`node-abi`](https://github.com/lgeiger/node-abi/blob/master/index.js#L51).

## License

Copyright (c) 2012-2015, Christopher Jeffrey (MIT License).
Copyright (c) 2016, Daniel Imms (MIT License).
Copyright (c) 2018, Microsoft Corporation (MIT License).
Copyright (c) 2018, David Wilson (MIT License).
Copyright (c) 2019, Mohammad Fares (MIT License).
npm package: @farfadev/ngx-a-tooltip
Description: An angular directive to popup a tooltip on mouse hover/ click
Author: farfadev
Latest version: 0.3.3

<h1> @farfadev/ngx-a-tooltip </h1>

An [Angular](https://angular.dev/) component to popup a html tooltip on either a mouse hover or click

<a href='https://stackblitz.com/github/farfadev/ngx-lib'>Run Showcase on Stackblitz</a><span> Select tooltip showcase</span>

<h2>installation</h2>
npm i @farfadev/ngx-a-tooltip

<h2>configuration</h2>
In the importing angular module, or the standalone component:

```ts
import { FarfaTooltipModule } from '@farfadev/ngx-a-tooltip';
```
under the @NgModule or @Component decorator

```ts
imports: [..., FarfaTooltipModule ,...]
```

<h2>utilisation</h2>
add the farfa-tooltip attribute to your HTML element. the farfa-tooltip value shall be an object with the following properties:
<pre>
html: the html to display
mode: 'hover' or 'click', default to 'hover'. 
style: the style of the tooltip
</pre>

```html
<div [farfa-tooltip]="{
    html: '<div><span style=\'color:blue;\'>HELLO</span></div>',
    mode: 'hover',
    style: 'border-radius:15px;background-color:#FAA0A0;'
  }">...</div>
```
npm package: @farfadev/ngx-object-editor
Description: An angular component to edit typecript/ javascript objects
Author: farfadev
Latest version: 0.0.9

<h1> @farfadev/ngx-object-editor </h1>

An [Angular](https://angular.dev/) component to edit typescript/ javascript object following a user defined editing scheme

<a href='https://stackblitz.com/github/farfadev/ngx-lib'>Run Showcase on Stackblitz</a>

<span style='color:red;font-weight:bold;'>WARNING:</span> this component is at a <span style='color:red;font-weight:bold;'>VERY DRAFT</span> development stage and we expect to have a stable release by June 2025 => Wait for release 0.1.0


<h2>installation</h2>
npm i @farfadev/ngx-object-editor

<h2>sample utilisation</h2>
See showcases at <a href=https://github.com/farfadev/ngx-lib/tree/main/projects/showcase/src/app/showcases>Showcases on Github</a> or <a href='https://stackblitz.com/github/farfadev/ngx-lib'>Run Showcase on Stackblitz</a>


<h2>further references (imask)</h2>
<a href="https://imask.js.org/guide.html#getting-started">imask</a>
npm package: @farfarawaylabs/fllogger
Description: A sensible logger allowing better console.log statements and easier debugging
Author: Shahar Nechmad
Latest version: 1.0.2

# FLLogger

FLLogger is an opinionated logger for JavaScript based projects. It allows you to better log to the console for easier debugging.

## Installation

yarn add @farfarawaylabs/fllogger

## Usage

```python
import FLLogger from '@farfarawaylabs/fllogger'

FLLogger.info("test this") # logs an info message
FLLogger.warning("warning this") # logs a warning
FLLogger.error("error this") # logs an error
FLLogger.important("This is important") # logs an important message
FLLogger.array(["one", "two", "three"]) # logs an array to a beautiful table view
FLLogger.setFontSize(20) # sets the font size of all log message to 20px
FLLogger.enableLogging() # enables logging to the console (true by default)
FLLogger.disableLogging() # diables logging to the console
```

You can also control enabling or disabling of log message using the environment variable FLLOGGER_ENABLED

## Example

![Drag Racing](src/example.png?raw=true)

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @farfarawaylabs/react-native-hooks
Description: Collection of hooks to be used in React Native projects
Author: Shahar Nechmad
Latest version: 0.1.0

# @farfarawaylabs/react-native-hooks

Collection of hooks to be used in React Native projects

## Installation

```sh
npm install @farfarawaylabs/react-native-hooks
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @farfarawaylabs/react-native-slides-scroller
Description: Beautiful slides scrollbar component for React Native
Author: FarFarAwayLabs
Latest version: 1.0.0

# @farfarawaylabs/react-native-slides-scroller

Beautiful slides scrollbar component for React Native

## Installation

This library is using react-native-reanimated V2. You should install it before using this library.

```sh
yarn add @farfarawaylabs/react-native-slides-scroller
```

## Installation

This library is based and inspired by the video tutorial from William Candillon (Can It Be Done In React Native). Find this and many other awesome videos on his YouTube channel: https://www.youtube.com/channel/UC806fwFWpiLQV5y-qifzHnA

## Demo

In th egithub reposiroty you can find an example project. Clone the repository, yarn and run "yarn example ios"

Please note that the following is an animated gif which is why the animations looks "choppy".

<img width="300" height="600" src="https://github.com/nechmads/demo_images/blob/master/react-native-animated-scroller.gif?raw=true">

## How to use this library?

```js
import { Scroller } from '@farfarawaylabs/react-native-slides-scroller';

// Have a ready set of items (slides) in json format or load them from DB
import { items } from './Model';

export default function App() {
  return (
    <View style={styles.container}>
      <Scroller items={items} />
    </View>
  );
}
```

### Items Structure

Each Slide/Item you pass to the scroller should be in the following structure:

```js

{
    title: 'Example title',
    subtitle: 'EXAMPLE SUBTITLE',
    picture: require('./assets/backgroundImage.jpg'),
    top: 0,
}

```

### Customization

You can customize the look of the Scroller and its items using the following properties:

```js
/** The background color of the scroller view. Defaults to black */
  backgroundColor?: string;

  /** The maximum height of each slide item. Defaults to half the screen height */
  maximumItemHeight?: number;

  /** The minimum height of each slide item. Defaults to 128 */
  minItemHeight?: number;

  /** Specify if the scroller should stop on each item or keep scrolling with velocity. Defaults to false */
  shouldSnapOnEachItem?: boolean;

  items: SlideItemInterface[];

  /** Additional styles to append to the scroller */
  style?: StyleProp<ViewStyle>;

  /** Additional style to add to the title of each item */
  slideTitleStyle?: StyleProp<TextStyle>;

  /** Additional style to add to the subtitle of each item */
  slideSubtitleStyle?: StyleProp<TextStyle>;

```

## License

MIT
npm package: @farfetch/blackout-react-native-metro-transformer
Description: Custom transformer for metro to be used by FPS react-native apps
Latest version: 0.2.1

# @farfetch/blackout-react-native-metro-transformer

Custom transformer for `metro` to be used by FPS react-native apps.

Imported `package.json` files will have all their fields removed from the bundle, except for the `name` and `version` fields. This reduces final bundle size.

## Installation

**yarn**

```sh
yarn add @farfetch/blackout-react-native-metro-transformer
```

**npm**

```sh
npm i @farfetch/blackout-react-native-metro-transformer
```

## Usage

> This was tested for `metro` versions 0.59 and higher but it is possible that it works in lower versions of `metro` if they support the `transformerPath` configuration key in `metro.config.js`.
> Make sure the version of `metro` you are using satisfies this constraint.

Configure the transformer for your app:

- Create a `metro.config.js` file in the root directory of your react-native project.
- Edit the file to include a `transformerPath` pointing to this module.
  ```js
  module.exports = {
    transformerPath: require.resolve(
      '@farfetch/blackout-react-native-metro-transformer',
    ),
  };
  ```

## Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.

Please read the [CONTRIBUTING](../../CONTRIBUTING.md) file to know what we expect from your contribution and the guidelines you should follow.

## License

[MIT](../../LICENSE) @ Farfetch
npm package: @farhan21/cosmic-store
Description: A tiny React state management library with hooks, inspired by Zustand & Redux
Author: Farhan Tafader
Latest version: 1.0.4

# @farhan21/cosmic-store

A tiny **React state management library** with hooks, inspired by Zustand & Redux. Lightweight, fully typed, and easy to use.

## 🚀 Installation

```bash
npm install @farhan21/cosmic-store
# or
yarn add @farhan21/cosmic-store
```

## 📖 Usage

```typescript
import { createStore } from "@farhan21/cosmic-store";

type AppState = { count: number; user: string | null };

const appStore = createStore<AppState>(
  { count: 0, user: null },
  (set, get) => ({
    increment: () => set({ count: get().count + 1 }),
    decrement: () => set({ count: get().count - 1 }),
    login: (username: string) => set({ user: username }),
    logout: () => set({ user: null }),
  })
);

export function Counter() {
  const count = appStore.useStore((s) => s.count);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={appStore.actions.increment}>+</button>
      <button onClick={appStore.actions.decrement}>-</button>
    </div>
  );
}

export function User() {
  const user = appStore.useStore((s) => s.user);

  return (
    <div>
      {user ? (
        <>
          <p>Welcome, {user}</p>
          <button onClick={appStore.actions.logout}>Logout</button>
        </>
      ) : (
        <button onClick={() => appStore.actions.login("Alice")}>Login</button>
      )}
    </div>
  );
}
```

## ✨ Features

- ⚡ Tiny API surface — minimal learning curve
- 🔗 Global store with React hooks (`useStore`)
- 🛠 Actions layer like Redux, but simpler
- 🧩 Middleware support (logging, persistence, async)
- 📝 TypeScript first — fully typed

## 🛠 Middleware Example

```typescript
const loggerMiddleware = (next: any, get: any) => (partial: any) => {
  console.log("Prev state:", get());
  next(partial);
  console.log("Next state:", get());
};

const storeWithLogger = createStore(
  { count: 0 },
  (set, get) => ({
    increment: () => set({ count: get().count + 1 }),
  }),
  [loggerMiddleware]
);
```

## 🧪 Testing

```bash
npm run test
```

- Uses **Vitest** for fast and simple testing.
- Fully compatible with TypeScript.

## 📜 License

MIT — free to use and modify 🌟
npm package: @farhanbarcha/number-guessing-game
Description: A CLI based number guessing game developed using Typescript and Inquirer
Author: Farhan Hussain
Latest version: 1.0.0

# number-guessing-game
A CLI based number guessing game developed using Typescript and Inquirer

## Instructions

1. Clone or download this repository
2. Open the folder in your terminal
3. Run `npm install` to install the dependencies

## Game Levels

* Easy (1-6)
* Medium (1-100)
* Hard (1-1000)
npm package: @farhanbarcha/piaic-currency-converter
Description: A CLI based currency converter developed in Typescript using Inquirer.
Latest version: 1.0.0

# CLI Currency Converter

A command-line interface (CLI) based currency converter developed in TypeScript using Inquirer.

## Description

This simple tool allows users to convert currency values from one currency to another using current exchange rates. It provides a straightforward interface where users can select the currency they want to convert from, the currency they want to convert to, and enter the amount they wish to convert.

## Features

- Easy-to-use CLI interface.
- Supports conversion between multiple currencies.
- Validates user input to ensure accurate conversions.
- Displays converted amount with clear formatting.

## Available Currencies

The following currencies are supported for conversion:

- USD (United States Dollar)
- EUR (Euro)
- GBP (British Pound Sterling)
- CNY (Chinese Yuan)
- JPY (Japanese Yen)
- INR (Indian Rupee)
- PKR (Pakistani Rupee)
- SAR (Saudi Riyal)
- AED (United Arab Emirates Dirham)

## Installation

To use the currency converter, you need to have Node.js and npm installed on your system. Then, follow these steps:

1. Clone the repository to your local machine:
2. Navigate to the project directory:
3. Install dependencies:

    ```bash
    npm install
    ```

## Usage

Once installed, you can use the currency converter by running the following command:

```bash
npx piaic-currency-converter
```

Follow the prompts on the screen to select the currency you want to convert from, the currency you want to convert to, and enter the amount you wish to convert.

## Configuration

The base currency for conversion is set to USD by default. You can modify the `currencyList` object in the `index.ts` file to add or remove currencies and their exchange rates as needed.

## Dependencies

- [Inquirer](https://www.npmjs.com/package/inquirer): A collection of common interactive command-line user interfaces.
- [Chalk](https://www.npmjs.com/package/chalk): Terminal string styling done right.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## Acknowledgments

- This project was developed as part of a coding exercise.
- Special thanks to the developers of Inquirer and Chalk for their excellent libraries.
npm package: @farhanbarcha/typescript-piaic-atm
Description: A CLI based ATM machine created using TypeScript and Inquirer.
Latest version: 1.0.0

# typescript-piaic-atm
A CLI based ATM machine created using TypeScript and Inquirer.

## Overview
This is a Command Line Interface (CLI) based ATM (Automated Teller Machine) application built using TypeScript, Inquirer, and Chalk. The application allows users to perform basic banking transactions such as checking balance, withdrawing cash, and cancelling transactions.

## Features
- **PIN Code Authentication:** Users are required to enter a PIN code to access their account. After a certain number (three tries) of failed attempts, the account gets blocked.
- **Transaction Options:** Users can choose from options like checking balance, withdrawing cash, or cancelling the transaction.
- **Cash Withdrawal:** Users can withdraw cash in denominations of 1000 or 5000, or enter a custom amount (multiples of 500).
- **Balance Display:** The application displays the user's current account balance after each transaction.

## Setup
1. Clone the repository to your local machine.
2. Install dependencies using npm:
    ```
    npm install
    ```
3. Run the application:
    ```
    npm start
    ```

## Usage
- Upon running the application, follow the on-screen prompts to navigate through the ATM options.
- Enter your PIN code to access your account.
- Select transaction type (check balance, withdraw cash, cancel).
- If withdrawing cash, choose from available denominations or enter a custom amount.
- After each transaction, the application displays the updated account balance.
- To exit the application, choose the cancel option.


## License
This project is licensed under the [MIT License](LICENSE).
npm package: @farhanbshafiq/faceguard-sdk
Description: Professional Face Recognition Biometric SDK with Anti-Spoofing.
Author: Farhan
Latest version: 1.0.1

# FaceGuard Biometric SDK 🛡️

**FaceGuard** is a professional-grade biometric face recognition and verification SDK. It provides an easy-to-use interface for adding face authentication to your web applications, with built-in **Anti-Spoofing (Liveness Detection)** and premium UI components.

## Features
- ✅ **Face Detection & Alignment**: Powered by InsightFace.
- 🛡️ **Anti-Spoofing**: Prevents attacks using photos, screens, or printed images.
- ⚡ **High Performance**: FAISS-powered super-fast face matching (1M+ faces in milliseconds).
- ⚛️ **React Support**: Ready-to-use hooks and components.
- 🍦 **Vanilla JS Support**: Lightweight class-based implementation for any framework.
- 🎨 **Premium UI**: Cyber-lume theme with scanning animations.

---

## Installation

```bash
npm install @farhanbshafiq/faceguard-sdk
```

---

## Usage in React

### 1. Wrap your app with the Provider
```jsx
// Wrap your whole app with the Provider
import { FaceGuardProvider } from '@farhanbshafiq/faceguard-sdk';

function App() {
  return (
    // Replace with your FastAPI backend URL (e.g., http://localhost:8000/api)
    <FaceGuardProvider baseUrl="https://your-face-api.com/api">
      <YourAppComponent />
    </FaceGuardProvider>
  );
}
```

### 2. Use the Auth component
```jsx
import { FaceGuardAuth } from '@farhanbshafiq/faceguard-sdk';

const MyPage = () => {
  const handleSuccess = (user) => {
    console.log("Verified User:", user);
  };

  return (
    <FaceGuardAuth 
      mode="verify" 
      onSuccess={handleSuccess} 
      onError={(err) => alert(err.detail)} 
    />
  );
};
```

---

## Usage in Vanilla JS

You can mount the FaceGuard UI directly to any DOM element.

```javascript
import { VanillaFaceGuard } from '@farhanbshafiq/faceguard-sdk';

const fg = new VanillaFaceGuard({ baseUrl: '/api' });

// Mount to an element with ID 'camera-container'
fg.mount('camera-container');

// Listen for results
fg.onSuccess = (data) => {
  console.log("Success:", data);
};

fg.onError = (err) => {
  console.error("Failed:", err);
};
```

---

## Using the API Client (JS only)

If you want to build your own custom UI and only use our API client:

```javascript
import { FaceGuardClient } from '@farhanbshafiq/faceguard-sdk';

const client = new FaceGuardClient('/api');

// Example: Register with base64 image
const result = await client.registerUserBase64("John Doe", "john@example.com", base64Image);
```

---

## Backend Requirements
This SDK requires the **FaceGuard Backend** (FastAPI) to process biometric data. 
Ensure your backend is running and the `baseUrl` in the SDK points to it.

## License
MIT © [Farhan Bin Shafiq](https://github.com/FarhanBinShafiq)

## Repository
Built with ❤️ by [Farhan Bin Shafiq](https://github.com/FarhanBinShafiq). Check out the source on [GitHub](https://github.com/FarhanBinShafiq/FaceGuard).
npm package: @farhanmansuri/ignite-core
Description: Serverless cold-start elimination — framework-agnostic signal logic
Latest version: 2.0.0

# @farhanmansuri/ignite-core

Framework-agnostic core for [Ignite](https://github.com/farhanmansurii/ignite) -- eliminates serverless cold starts by sending warm-up signals before the user clicks.

## Install

```bash
npm install @farhanmansuri/ignite-core
```

## Usage

```ts
import { configureIgnite } from '@farhanmansuri/ignite-core';

const ignite = configureIgnite({
  serverBaseURL: 'https://us-central1-myapp.cloudfunctions.net',
});

// Warm a function
await ignite.warm('createProject');

// Warm multiple functions
await ignite.warmMany(['createProject', 'processPayment']);

// Check cache
ignite.isWarmed('createProject'); // true
```

### Low-level API

```ts
import { sendIgniteSignal, clearWarmCache } from '@farhanmansuri/ignite-core';

await sendIgniteSignal('createProject', {
  serverBaseURL: 'https://us-central1-myapp.cloudfunctions.net',
  onWarm: (fn, ms) => console.log(`${fn} warmed in ${ms}ms`),
});
```

## How it works

Uses `navigator.sendBeacon` (non-blocking, survives tab close) with a `fetch` fallback. Each function is cached for 5 minutes to avoid redundant signals.

## Links

- [Main repository](https://github.com/farhanmansurii/ignite)
- [npm](https://www.npmjs.com/package/@farhanmansuri/ignite-core)
npm package: @farhanmansuri/ignite-firebase
Description: Firebase Functions middleware for Ignite — early-exit on warm signals
Latest version: 2.0.0

# @farhanmansuri/ignite-firebase

Firebase middleware for [Ignite](https://github.com/farhanmansurii/ignite) -- detects warm-up signals and exits early, keeping your container alive without running business logic.

## Install

```bash
npm install @farhanmansuri/ignite-firebase
```

## Usage

### onCall functions

```ts
import { igniteWrapper } from '@farhanmansuri/ignite-firebase';

export const createProject = igniteWrapper(async (request) => {
  // Your logic -- only runs on real calls, never on warm signals
  return { success: true };
}, process.env.IGNITE_SECRET);
```

### onRequest (HTTP) functions

```ts
import { igniteMiddleware } from '@farhanmansuri/ignite-firebase';

export const processPayment = igniteMiddleware(async (req, res) => {
  // Your logic
  res.json({ success: true });
}, process.env.IGNITE_SECRET);
```

When a warm signal arrives (`X-Ignite-Warm: true` header or `{ __ignite: true }` body), the middleware returns `{ status: "ignited" }` immediately. The container wakes up but your business logic is never executed.

## Links

- [Main repository](https://github.com/farhanmansurii/ignite)
- [npm](https://www.npmjs.com/package/@farhanmansuri/ignite-firebase)
npm package: @farhanmansuri/ignite-js
Description: Vanilla JS client for serverless cold-start warming — framework-agnostic
Latest version: 2.0.0

# @farhanmansuri/ignite-js

Vanilla JavaScript client for warming serverless functions on user intent — no framework required.

## Install

```bash
npm install @farhanmansuri/ignite-js
```

## Usage

```js
import { configureIgnite } from '@farhanmansuri/ignite-js'

const ignite = configureIgnite({
  serverBaseURL: 'https://your-serverless-backend.com',
  apiKey: 'optional-secret',
})

// Warm a function before the user needs it
document.querySelector('#submit-btn').addEventListener('mouseenter', () => {
  ignite.warm('createProject')
})
```

## API

- `configureIgnite(config)` — Create a configured ignite instance
- `ignite.warm(functionName)` — Send a warm signal
- `ignite.warmMany(functionNames)` — Warm multiple functions
- `ignite.isWarmed(functionName)` — Check if already warmed
- `sendIgniteSignal(functionName, options)` — Low-level signal function
- `clearWarmCache()` — Reset the warm cache

For full documentation, see the [main repository](https://github.com/farhanmansurii/ignite).
npm package: @farhanmansuri/ignite-svelte
Description: Svelte action for Ignite — pre-warms serverless functions on hover intent
Latest version: 2.0.0

# @farhanmansuri/ignite-svelte

Svelte action for [Ignite](https://github.com/farhanmansurii/ignite) -- eliminates serverless cold starts by pre-warming functions on hover intent.

## Install

```bash
npm install @farhanmansuri/ignite-svelte @farhanmansuri/ignite-core
```

## Usage

Set config in a parent component, then use the `ignite` action:

```svelte
<!-- App.svelte -->
<script>
  import { setIgniteConfig } from '@farhanmansuri/ignite-svelte';

  setIgniteConfig({
    serverBaseURL: 'https://us-central1-myapp.cloudfunctions.net',
  });
</script>

<slot />
```

```svelte
<!-- CreateProject.svelte -->
<script>
  import { ignite } from '@farhanmansuri/ignite-svelte';
</script>

<button use:ignite={{ functionName: 'createProject' }} on:click={handleSubmit}>
  Create Project
</button>
```

When the user hovers for 150ms, a warm signal fires. By the time they click, the function is already warm.

## Links

- [Main repository](https://github.com/farhanmansurii/ignite)
- [npm](https://www.npmjs.com/package/@farhanmansuri/ignite-svelte)
npm package: @farhansyah/imask-svelte
Description: Svelte input mask
Author: Alexey Kryazhev
Latest version: 7.0.0-alpha.2-0

# Svelte IMask Plugin
@imask/svelte

[![npm version](https://badge.fury.io/js/%40imask%2Fsvelte.svg)](https://badge.fury.io/js/%40imask%2Fsvelte)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

<a href="https://opencollective.com/imask/donate" target="_blank">
  <img src="https://opencollective.com/imask/donate/button.png?color=blue" width=300 />
</a>

## Install
`npm install @imask/svelte`

## Mask Action Example
```html
<input
  {value}
  use:imask={options}
  on:accept={accept}
  on:complete={complete}
>

<script>
  import { imask } from '@imask/svelte';

  const options = {
    mask: '{8}000000',
    lazy: false
  };

  let value = '';

  function accept({ detail: maskRef }) {
    console.log('accept', maskRef.value);
    value = maskRef.value;
  }

  function complete({ detail: maskRef }) {
    console.log('complete', maskRef.unmaskedValue);
  }
</script>
```
More options see in a [guide](https://imask.js.org/guide.html).

## Input Mask Component
Currently plugin does not have component for input with 2-way binding support because it is not possible to pass all event listeners to child ([issue](https://github.com/sveltejs/svelte/issues/2837)).

Workaround is here:
https://svelte.dev/repl/b590cddb69f4452b8f7704bd1e721e76?version=3.16.7
npm package: @farhantallei/hono-route-spec
Description: Schema-driven route helpers for Hono with OpenAPI metadata and runtime validation.
Author: farhantallei
Latest version: 0.1.2

# @hono/route-spec

Compose route definitions with schema-driven validation & OpenAPI metadata.

- Request validation: `validator('json'|'form'|'query'|'param'|'header'|'cookie')`
- Response validation: `describeResponse(...)`
- Docs metadata: `describeRoute(...)`

```ts
import { Hono } from 'hono'
import { withRouteSpec, type Schema } from '@hono/route-spec'
import { z } from 'zod'

const app = new Hono()

const userSchema = {
  params: z.object({ id: z.string() }),
  query: z.object({ verbose: z.boolean().optional() }),
  responses: {
    200: /* ...StandardSchema... */
  }
} satisfies Schema

app.get(
  '/users/:id',
  ...withRouteSpec(
    {
      summary: 'Get user',
      params: userSchema.params,
      query: userSchema.query,
      responses: userSchema.responses,
    },
    async (c) => {
      return c.json({ ok: true })
    }
  )
)

export default app
```

This package builds on [hono-openapi](https://github.com/rhinobase/hono-openapi)’s describeRoute and describeResponse. See Hono docs for OpenAPI examples.

JS usage (no TypeScript):

- Install and import normally; runtime is plain JS.
- Optionally add JSDoc types:

```js
// @ts-check
import { withRouteSpec } from "@hono/route-spec"

/** @typedef {import('@hono/route-spec').Schema} Schema */
```