open-index/open-npm huggingface dataset:
npm package: @karibash/node-access-route
Description: Parse the http header to determine the client's IP address.
Latest version: 1.0.1

# node-access-route

Parse the http header to determine the client's IP address.

## 👏 Getting Started

The basic usage is as follows:

```typescript
import express from 'express';
import accessRoute from '@karibash/node-access-route';

const app = express();
const port = 3000;

app.get('/', (request, response) => {
  response.json(accessRoute(request));
});

app.listen(port, () => {
  console.log(`Example app listening at http://127.0.0.1:${port}`);
});
```

## 🚀 Installation

```
$ npm install @karibash/node-access-route
```

## 🤝 Contributing

Contributions, issues and feature requests are welcome.

Feel free to check [issues page](https://github.com/Karibash/node-access-route/issues) if you want to contribute.

## 📝 License

Copyright © 2020 [@Karibash](https://twitter.com/karibash).

This project is [```MIT```](https://github.com/Karibash/node-access-route/blob/master/LICENSE) licensed.
npm package: @karibash/password-generator
Description: A simple password generation helper function.
Author: Karibash
Latest version: 1.1.1

# password-generator

[![Github](https://img.shields.io/github/followers/Karibash?label=Follow&logo=github&style=social)](https://github.com/Karibash?tab=followers)
[![Twitter](https://img.shields.io/twitter/follow/Karibash?label=Follow&style=social)](https://twitter.com/intent/follow?screen_name=Karibash)

A simple password generation helper function.

## 👏 Getting Started

The basic usage is as follows:

```typescript
import password from '@karibash/password-generator';

console.log(password(9));
// -> C_Tpmf45L
```

By specifying a character array as the second argument, you can change the characters to be used during generation.
At least one character from each array will be used.

You can change the string to be used when generating by doing the following:
```typescript
import password, { alphabetLowercase, alphabetUppercase } from '@karibash/password-generator';

const charSet = [
  alphabetLowercase,
  alphabetUppercase,
];
console.log(password(9, charSet));
```

By default, a string containing uppercase and lowercase letters, numbers, and symbols will be generated.
```typescript
const defaultCharSet = [
  alphabetLowercase,
  alphabetUppercase,
  digits,
  sign,
];
```

## 🚀 Installation

```
$ npm install @karibash/password-generator
```

## 🤝 Contributing

Contributions, issues and feature requests are welcome.

Feel free to check [issues page](https://github.com/Karibash/password-generator/issues) if you want to contribute.
npm package: @karibash/pixel-units
Description: Type-safe and mutually convertible pixel units.
Author: Karibash
Latest version: 2.3.0

# pixel-units

[![Github](https://img.shields.io/github/followers/Karibash?label=Follow&logo=github&style=social)](https://github.com/Karibash?tab=followers)
[![Twitter](https://img.shields.io/twitter/follow/Karibash?label=Follow&style=social)](https://twitter.com/intent/follow?screen_name=Karibash)

## 🔧 Features

### Absolute length units

- [x] px
- [x] cm
- [x] mm
- [x] Q
- [x] in
- [x] pc
- [x] pt

### Relative length units

- [x] rem
- [x] em
- [x] vw
- [x] vh
- [x] vmin
- [x] vmax

### Multiplication units

- [x] percent
- [x] magnification

## 👏 Getting Started

The basic usage is as follows:

```typescript
import { Unit, convertUnits } from '@karibash/pixel-units';

const pixel: Unit<'px'> = '32px';
const rem = convertUnits(pixel, 'rem');

console.log(rem);
// -> 2rem
```

## 🚀 Installation

```
$ npm install @karibash/pixel-units
```

## 🤝 Contributing

Contributions, issues and feature requests are welcome.

Feel free to check [issues page](https://github.com/Karibash/pixel-units/issues) if you want to contribute.

## 📝 License

Copyright © 2020 [@Karibash](https://twitter.com/karibash).

This project is [```MIT```](https://github.com/Karibash/pixel-units/blob/master/LICENSE) licensed.
npm package: @karim-w/ava
Description: a React avatar component
Author: Karim Hassan
Latest version: 0.1.2

# Ava

short for avatar, ava is a **React** package that creates an avatar for a given string initial.
![avatar](docs/avatars.png)

## Installation

via npm

```bash
npm install @karim-w/ava
```

via yarn

```bash
yarn add @karim-w/ava
```

## Usage

```ts
import { ava } from "@karim-w/ava";

function App() {
  //...
  return (
    <div>
      <Ava initials="KH" width="100px" height="100px" />;
    </div>
  );
}
```

## Props

| Name     | Type   | Default | Description                                  |
| -------- | ------ | ------- | -------------------------------------------- |
| initials | string |         | The initials to be used to create the avatar |
| width    | string |         | The width of the avatar                      |
| height   | string |         | The height of the avatar                     |
| textSize | string | 1.5rem  | The size of the text inside the avatar       |

## License

MIT

## Author

Karim Hassam

## Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
npm package: @karim04/dropdown-menu
Description: Create ready-to-go dropdown menus in Javascript
Author: Karim04
Latest version: 1.1.0

# @karim04/dropdown-menu
a Javascript module that creates ready-to-go dropdown menus <br>
![Preview Image](https://live.staticflickr.com/65535/52185159485_5647a5ec60_o.png)

## installation
```
npm install --save @karim04/dropdown-menu
```
## Usage
##### import the module in your code
```javascript
import Dropdown from '@karim04/dropdown-menu';
```
##### and create a dropdown menu using:
```javascript
const menuName = Dropdown.create(triggeringElement);
```
pass any element to the create method and it will create a dropdown menu for that element that will be toggled by clicking on that triggering element, and it returns you the dropdown menu object
#### disabling default styling
if you want to disable default styling to add your own, pass false to the second paramater in the create method
```javascript
const menuName = Dropdown.create(triggeringElement, false);
```
### Returned Object Methods and properties
###### Add Menu Item
```javascript
menuName.add(itemElement, onClickFunc);
```
first arguement takes an element or a string and adds it to the menu as an item, and the second argument takes a function that is trigged when the item is clicked
###### menu property
```javascript
menuName.menu;
```
returns the menu element that contains the items
###### element property
```javascript
menuName.element;
```
returns the parent element that triggers the menu
## License
This project is licensed under the <a href="LICENSE.txt">MIT</a> license.
npm package: @karim04/image-slider
Description: A module for creating image sliders inside Javascript
Author: karim04
Latest version: 1.0.0

# @karim04/image-slider
<b>A javascript package that provides quick and easy-to-use image sliders/carousels</b> <br> <br>
![GIF example of the carousel](https://live.staticflickr.com/65535/52185926287_664075e2d3_o.gif "GIF example of th carousel with edited color and slidingTimer options") <br>

```javascript
// code used to generate the carousel in the GIF above
import ImageSlider from '@karim04/image-slider';

const body = document.querySelector('body');

const random1 = 'https://picsum.photos/500/500.jpg';
const random2 = 'https://picsum.photos/600/600.jpg';
const random3 = 'https://picsum.photos/700/700.jpg';

const slider = ImageSlider(random1, random2,
  random3, {color: '#43af56', slidingTimer: 1000});

body.appendChild(slider);
```


# Installation
Run:
```
npm install --save @karim04/image-slider
```
# Usage
Import the module into your code:

```javascript
import ImageSlider from '@karim04/image-slider';
```

Create and store the slider element using:

```javascript
const myCarousel = ImageSlider(image1Source, image2Source, ...)
```

pass the module all the image sources <em>'strings'</em> you want in the slider as parameters.
# Options
additionally you can modifiy the default options by passing an object to the slider with the options as properties <br>
##### Example:

```javascript
const myCarousel = ImageSlider({color: 'blue', slidingTimer: 4000},
image1Source, image2Source, image3Source, ...);
```
## All Tweakable Options
### color
###### (Default: #6b7280)
takes a string and Sets the color of the navigation buttons

```javascript
const myCarousel = ImageSlider({color: 'blue'}, image1Source, image2Source, image3Source, ...);
```

### slidingTimer
###### (Default: 5000)
takes a number and sets the time between automatic sliding in milliseconds, you can set it to false to disable automatic sliding

```javascript
const myCarousel = ImageSlider({slidingTimer: 5000},
image1Source, image2Source, image3Source, ...);
```

### transitionFunc
###### (Default: 'ease-in-out')
sets the transition function used for some slider elements

```javascript
const myCarousel = ImageSlider({transitionFunc: 'ease-in'}, image1Source, ...)
```
### transitionSpeed
###### (Default: 700)
takes a number and sets the transition speed in milliseconds for some elements

```javascript
const myCarousel = ImageSlider({transitionSpeed: '1000'}, image1Source, ...)
```

# License
This project is licensed under the <a href="LICENSE.txt">MIT<a> license
npm package: @karimdaw/anthropic-azure-provider
Description: Azure Anthropic provider for Vercel AI SDK v5
Author: Karim Daw
Latest version: 1.0.1

# anthropic-azure-provider

Use Claude models on Azure AI Foundry with the Vercel AI SDK.

## Install

```bash
npm install @karimdaw/anthropic-azure-provider @ai-sdk/provider
```

## Quick Start

```typescript
import { createAzureAnthropic } from '@karimdaw/anthropic-azure-provider';
import { generateText } from 'ai';

const provider = createAzureAnthropic({
  baseURL: process.env.AZURE_ANTHROPIC_BASE_URL,
  apiKey: process.env.AZURE_ANTHROPIC_API_KEY,
});

const { text } = await generateText({
  model: provider('claude-sonnet-4-5-20251001'),
  prompt: 'Hello!',
});
```

## Options

**Provider:**
- `baseURL` (required) - Your Azure Foundry endpoint
- `apiKey` (required) - API key from Azure Portal
- `headers` (optional) - Custom headers

**Model:**
- `maxOutputTokens` (default: 4096) - Max tokens to generate

## Examples

**Streaming:**

```typescript
const { textStream } = streamText({
  model: provider('claude-sonnet-4-5-20251001'),
  prompt: 'Tell me a story',
});

for await (const chunk of textStream) {
  process.stdout.write(chunk);
}
```

**Tool Calling:**

```typescript
const { text, toolCalls } = await generateText({
  model: provider('claude-sonnet-4-5-20251001'),
  prompt: 'What is the weather in Tokyo?',
  tools: {
    getWeather: tool({
      description: 'Get weather for a location',
      parameters: z.object({ location: z.string() }),
      execute: async ({ location }) => ({ temp: 22, condition: 'sunny' }),
    }),
  },
});
```

**Custom Max Tokens:**

```typescript
const model = provider('claude-sonnet-4-5-20251001', {
  maxOutputTokens: 8192,
});
```

## Supported Models

All Claude models on Azure Foundry work. Common ones:

- `claude-sonnet-4-5-20251001`
- `claude-opus-4-5-20251001`
- `claude-haiku-4-5-20251001`
- `claude-3-5-sonnet-20241022`

Custom model IDs work too.

## Error Handling

```typescript
import { AzureAnthropicError } from '@karimdaw/anthropic-azure-provider';

try {
  // ... your code
} catch (error) {
  if (error instanceof AzureAnthropicError) {
    console.error(`${error.code}: ${error.message}`);
  }
}
```

Error codes: `"validation"` (config issues) or `"conversion"` (data issues).

## Environment Variables

```bash
AZURE_ANTHROPIC_BASE_URL=https://your-resource.services.ai.azure.com/anthropic
AZURE_ANTHROPIC_API_KEY=your-api-key
AZURE_ANTHROPIC_MODEL_ID=claude-sonnet-4-5-20251001
```

## License

MIT
npm package: @karimdev/eslint-config-markhkr-remix-ts
Description: ESLint and Remix TS Config from Mark Hkr
Author: Mark Hkr
Latest version: 1.0.4

# Mark Hkr Eslint and Remix TS Setup
My settings for ESLint and Remix TS

## What it does
* Lints JavaScript based on the latest standards
* Lints + Fixes inside of html script tags
* You can see all the [rules here](https://github.com/markhker/eslint-config-markhkr-remix-ts/blob/master/.eslintrc.js)

## Installing

You can use eslint globally and/or locally per project.

## Local / Per Project Install

1. If you don't already have a `package.json` file, create one with `yarn init` or `npm init`.

2. Create a `.eslintrc` file in the root of your project's directory (it should live where package.json does). Your `.eslintrc` file should look like this:

```json
{
  "extends": [
    "@karimdev/eslint-config-markhkr-remix-ts"
  ]
}
```

3. You can add two scripts to your package.json to lint and/or fix:

```json
"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix"
},
```

4. Now you can manually lint your code by running `npm run lint` and fix all fixable issues with `npm run lint:fix`.

## Settings

If you'd like to overwrite eslint settings, you can add the rules in your `.eslintrc` file. The [ESLint rules](https://eslint.org/docs/rules/) go directly under `"rules"`.

```js
{
  "extends": [
    "markhkr"
  ],
  "rules": {
    "no-console": 2,
  }
}
```

## With VS Code

Once you have done the install. You probably want your editor to lint and fix for you. Here are the instructions for VS Code:

1. Install the [ESLint package](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
2. Now we need to setup some VS Code settings via `Code/File` → `Preferences` → `Settings`. It's easier to enter these settings while editing the `settings.json` file, so click the Open (Open Settings) icon in the top right corner:

  ```js
  // These are all my auto-save configs
  "editor.formatOnSave": true,
  // turn it off for JS and JSX, we will do this via eslint
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  // show eslint icon at bottom toolbar
  "eslint.alwaysShowStatus": true,
  // tell the ESLint plugin to run on save
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  ```

After attempting to lint your file for the first time, you may need to click on 'ESLint' in the bottom right and select 'Allow Everywhere' in the alert window.

Finally you'll usually need to restart VS code. They say you don't need to, but it's never worked for me until I restart.


## With Yarn

It should just work, but if they aren't showing up in your package.json, try `npx install-peerdeps --dev eslint-config-markhkr -Y`
npm package: @karimdev/remix-auth-google
Description: <!-- Description -->
Author: Mark Hkr
Latest version: 1.1.2

# GoogleStrategy

<!-- Description -->

The Google strategy is used to authenticate users against a Google account. It extends the OAuth2Strategy.

## Supported runtimes

| Runtime    | Has Support |
| ---------- | ----------- |
| Node.js    | ✅          |
| Cloudflare | ✅          |

<!-- If it doesn't support one runtime, explain here why -->

## Usage

### Create an OAuth application

Follow the steps on [the Google documentation](https://developers.google.com/identity/protocols/oauth2/web-server#creatingcred) to create a new application and get a client ID and secret.

### Create the strategy instance

```ts
// app/services/auth.server.ts
import { GoogleStrategy } from 'remix-auth-google'

let googleStrategy = new GoogleStrategy(
  {
    clientID: 'YOUR_CLIENT_ID',
    clientSecret: 'YOUR_CLIENT_SECRET',
    callbackURL: 'https://example.com/auth/google/callback',
  },
  async ({ accessToken, refreshToken, extraParams, profile }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.emails[0].value })
  },
)

authenticator.use(googleStrategy)
```

### Setup your routes

```tsx
// app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/google" method="post">
      <button>Login with Google</button>
    </Form>
  )
}
```

```tsx
// app/routes/auth/google.tsx
import { ActionFunctionArgs, redirect } from '@remix-run/node'
import { authenticator } from '~/services/auth.server'

export let loader = () => redirect('/login')

export let action = ({ request }: ActionFunctionArgs) => {
  return authenticator.authenticate('google', request)
}
```

```tsx
// app/routes/auth/google/callback.tsx
import { LoaderFunctionArgs } from '@remix-run/node'
import { authenticator } from '~/services/auth.server'

export let loader = ({ request }: LoaderFunctionArgs) => {
  return authenticator.authenticate('google', request, {
    successRedirect: '/dashboard',
    failureRedirect: '/login',
  })
}
```
npm package: @karimdev/web-otp-generator
Description: One time password generator, web crypto
Author: Mark Hkr
Latest version: 1.2.1

#otp-generator

> 'otp-generator' is simple one time password generator and can be used as password generator.

[![Build Status][travis-ci-img]][travis-ci-url] 
[![npm version][npm-version-img]][npm-version-url]
![npm](https://img.shields.io/npm/dm/otp-generator?style=plastic)
[![Test Coverage][coveralls-image]][coveralls-url]
[![js-standard-style][js-standard-style-img]][js-standard-style-url] 

[![NPM](https://nodei.co/npm/otp-generator.png?downloadRank=true&downloads=true)](https://nodei.co/npm/otp-generator/)

## Index
* [Install](#install)
* [Usage](#usage)
* [Test](#test)
* [License](#license)

## Install

```bash
npm install otp-generator --save
```

## Usage

```js
const otpGenerator = require('otp-generator')

otpGenerator.generate(6, { upperCaseAlphabets: false, specialChars: false });

```
### generate(length, options)

**Arguments**

* `length` - length of password. Optional if `options` is optional. default length is 10.
* `options` - optional
  - `digits` - Default: `true` true value includes digits in OTP 
  - `lowerCaseAlphabets` - Default: `true` true value includes lowercase alphabets in OTP
  - `upperCaseAlphabets` - Default: `true` true value includes uppercase alphabets in OTP
  - `specialChars` - Default: `true` true value includes special Characters in OTP

## Tests

```js
npm test
```

## License
[MIT][license-url]

[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE
[travis-ci-img]: https://travis-ci.org/Maheshkumar-Kakade/otp-generator.svg?branch=master
[travis-ci-url]: https://travis-ci.org/Maheshkumar-Kakade/otp-generator 
[npm-version-img]: https://badge.fury.io/js/otp-generator.svg
[npm-version-url]: http://badge.fury.io/js/otp-generator
[coveralls-image]: https://coveralls.io/repos/github/Maheshkumar-Kakade/otp-generator/badge.svg?branch=master
[coveralls-url]: https://coveralls.io/github/Maheshkumar-Kakade/otp-generator?branch=master
[js-standard-style-img]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg
[js-standard-style-url]: http://standardjs.com/
npm package: @karimov_s/react-native-iphone-x-helper
Description: A library to help you design your react-native app for the iPhone X
Author: Elad Gil
Latest version: 1.0.0

## ❗❗❗ PLEASE NOTICE ❗❗❗ This package is not longer maintained, plaease use alternatives like `react-native-safe-area-context`

[![npm version](https://badge.fury.io/js/react-native-iphone-x-helper.svg)](https://badge.fury.io/js/react-native-iphone-x-helper)

# react-native-iphone-x-helper
A library to help you design your react-native app for notched iPhones.

## Installing ##
`npm i react-native-iphone-x-helper --save`

## API ##

### ifIphoneX(iphoneXStyle, \[regularStyle\]) ###
this method it for creating stylesheets with the iPhone X in mind

#### Parameters ####
**iphoneXStyle** - the style to apply if you're on iPhone X

**regularStyle (*optional*)** - the style to apply if you're not on iPhone X

#### Example ####
```js
// in style.js

import { StyleSheet } from 'react-native';
import { ifIphoneX } from 'react-native-iphone-x-helper'

export default StyleSheet.create({
    header:{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        padding:10,
        height: 60,
        backgroundColor: 'transparent',
        ...ifIphoneX({
            paddingTop: 50
        }, {
            paddingTop: 20
        })
    },
});
```

### isIphoneX() ###

**returns** - `true` if you running on an iPhone X.

#### Example ####
```js
import { isIphoneX } from 'react-native-iphone-x-helper'

// ...

if (isIphoneX()) {
    // do this...
} else {
    // do that...
}
```

### getStatusBarHeight([safe]) ###

#### Parameters ####
**safe** - whether you want for get safe area height or not

**returns** - the height of the status bar: `44` for safe iPhoneX, `30` for unsafe iPhoneX, `20` for other iOS devices and `StatusBar.currentHeight` for Android.

#### Example ####

```js
// in style.js

import { StyleSheet } from 'react-native';
import { getStatusBarHeight } from 'react-native-iphone-x-helper'

export default StyleSheet.create({
    header:{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        padding:10,
        height: 60,
        backgroundColor: 'transparent',
        paddingTop: getStatusBarHeight()
    },
});
```

***NOTE:*** If your using the the unsafe statusbar height, make sure to add 14dp of padding to your content, otherwise it's going to be flush against the notch

### getBottomSpace ###

**returns** - the height of the bottom to fit the safe area: `34` for iPhone X and `0` for other devices.

#### Example ####

```js
// in style.js

import { StyleSheet } from 'react-native';
import { getBottomSpace } from 'react-native-iphone-x-helper'

export default StyleSheet.create({
    totalview: {
        flex: 1,
        backgroundColor: 'transparent',
        marginBottom: getBottomSpace()
    },
});
```

## Licence ##
**MIT**
npm package: @karimov_s/rn-foreground-service
Description: A Foreground Service for React Native
Author: Raja Osama
Latest version: 1.1.0

# @supersami/rn-foreground-service v2 🤟

Looking for contributors to help maintain this repository, as I am currently busy and unable to keep it up to date.

>> Documentation has been moved to https://rn-foreground.vercel.app/

## License

MIT © [rajaosama](https://github.com/raja0sama)
npm package: @karimsa/bench
Description: Minimal benchmarking JS library.
Latest version: 0.16.2

# `@karimsa/bench`

Minimal benchmarking library for JS. Extracted from `@karimsa/wiz`.

## Usage

Sample benchmark file

```javascript
const { benchmark } = require('@karimsa/bench')

benchmark('test', async b => {
    // do setup
    b.resetTimer()

    for (let i = 0; i < b.N(); i++) {
        // do expensive op
        await foo()
    }
})
```

Run it like a regular node program:

```
$ node bench.js
```

## License

Licensed under MIT.