open-index/open-npm huggingface dataset:
npm package: @milanthapa/nepali-datepicker_reactjs
Description: Nepali Datepicker for reactjs
Author: Milan Thapa
Latest version: 1.0.4

## 📜 License & Attribution
This project is a modified fork of [@sbmdkl/nepali-datepicker-reactjs](https://github.com/sbmdkl/nepali-datepicker-reactjs) (originally MIT Licensed).  
Modifications © [Milan Thapa].

## [1.0.1] - 2025-05-15
### Changed
- Fixed string-width dependency issue
- Added value prop support
- empty value accepted

## [1.0.3] - 2025-05-30
### Changed
- calendar width reduced
- days font size reduced

## [1.0.4] - 2025-05-30
### Changed
- total number of days in a month from year 2083 - 2086 updated/fixed
npm package: @milanthapa/react-toaster
Description: react toast popup package
Author: Milan Thapa
Latest version: 1.0.1

# React Toast Popup

React Toast Popup is a simple and customizable toast notification component for React applications.

## Installation

You can install React Toast Popup via npm:

```jsx
npm install @milanthapa/react-toaster
```

## Usage

To use React Toast Popup in your React application, follow these steps:

Import the useToaster hook and necessary styles in your component:

```jsx
import useToaster from "@milanthapa/react-toaster";
```

Initialize the useToaster hook with your preferred position:

```jsx
const { ToasterComponent, triggerToast } =
  useToaster("top-left");
```

#### Postions

- "bottom-left"
- "bottom-right"
- "top-left"
- "top-right"

Use NotificationComponent in your JSX to display notifications:

```jsx
return (
  <div className="App">
    {ToasterComponent}
    {/* Your other JSX content */}
  </div>
);
```

Trigger notifications using the triggerToast function:

```jsx
triggerToast({
  type: "success",
  message: "Hello! Developers",
  duration: 3000,
});
```

#### Animations

You can specify an animation type for the notifications. The available animations are:

- "fade"
- "pop"
- "slide"

```jsx
triggerToast({
  type: "success",
  message: "Success message with a pop animation!",
  duration: 3000,
  animation: "pop",
});
```

## API

```jsx
useToaster(position: PositionType)
```

This hook returns an object with the following properties:

- `ToasterComponent`: React element representing the notification container.
- `triggerToast(toasterProps: ToasterProps)`: Function to trigger a notification with the specified properties.

`ToasterProps`
The ToasterProps function accepts an object of ToasterProps, which includes:

- type: Type of the notification (success, info, warning, error).
- message: Message to display in the notification.
- duration: Duration in milliseconds for which the notification should be displayed.
- animation (optional): Animation type for the notification (fade, pop, slide).

## Example

Here's a basic example of how to use React Toast Popup:

```jsx
import React from "react";
import useToaster from "@milanthapa/react-toaster";

function App() {
  const { ToasterComponent, triggerToast } =
    useToaster("top-left");

  const showToastMessage = () => {
    triggerToast({
      type: "success",
      message: "This is a success message!",
      duration: 3000,
    });
  };

  return (
    <div className="App">
      {ToasterComponent}
      <h1>Toast Component</h1>
      <button onClick={showToastMessage}>Show Success</button>
    </div>
  );
}

export default App;
```

## License

This project is licensed under the MIT License - see the LICENSE file for details.
npm package: @milanthapamgr/nepali-date-picker
Description: A Nepali date picker component for React using Tailwind CSS
Author: Milan Thapa
Latest version: 1.0.0

# Nepali Date Picker

A React date picker component for Nepali (Bikram Sambat) calendar using Tailwind CSS.

## Features

- Full Nepali calendar support (Bikram Sambat 2000-2099)
- Bilingual support (Nepali and English)
- Date conversion between Nepali and English (AD)
- Customizable date format
- Min/Max date restrictions
- Accessible and responsive design
- Built with TypeScript and Tailwind CSS

## Installation

```bash
npm install nepali-date-picker
```

## Usage

```jsx
import NepaliDatePicker from 'nepali-date-picker';

function App() {
  const handleDateChange = (date) => {
    console.log('Selected Date:', date);
    // Output: { bsDate: '2081-01-15', adDate: '2024-04-28' }
  };

  return (
    <NepaliDatePicker
      onChange={handleDateChange}
      language="NE"
      dateFormat="YYYY-MM-DD"
    />
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| onChange | `(date: { bsDate: string; adDate: string }) => void` | `() => {}` | Callback when date is selected |
| className | `string` | `''` | Additional CSS classes |
| language | `'NE' \| 'EN'` | `'NE'` | Language for the calendar |
| dateFormat | `string` | `'YYYY-MM-DD'` | Output date format |
| style | `React.CSSProperties` | `{}` | Additional input styles |
| minDate | `string` | `''` | Minimum selectable date (YYYY-MM-DD) |
| maxDate | `string` | `''` | Maximum selectable date (YYYY-MM-DD) |
| defaultDate | `string` | `''` | Default selected date |
| value | `string \| null` | `null` | Controlled value |
| placeholder | `string` | `undefined` | Input placeholder |

## Date Format Options

Use the following tokens in your `dateFormat` prop:

- `YYYY` - Full year (2081)
- `YY` - Short year (81)
- `MMMM` - Full month name (बैशाख, Baishakh)
- `MM` - Month number (01-12)
- `M` - Month number (1-12)
- `DDDD` - Full day name (आइतवार, Sunday)
- `DDD` - Short day name (आइत, Sun)
- `DD` - Day with leading zero (01-31)
- `D` - Day without leading zero (1-31)

## Examples

### English Calendar

```jsx
<NepaliDatePicker
  onChange={handleDateChange}
  language="EN"
  dateFormat="DD-MMMM-YYYY"
/>
// Output: "28-Baishakh-2081"
```

### Custom Format

```jsx
<NepaliDatePicker
  onChange={handleDateChange}
  dateFormat="MMMM DD, YYYY"
/>
// Output: "बैशाख १५, २०८१"
```

### With Date Restrictions

```jsx
<NepaliDatePicker
  onChange={handleDateChange}
  minDate="2081-01-01"
  maxDate="2081-12-30"
/>
```

### Controlled Component

```jsx
const [date, setDate] = useState(null);

<NepaliDatePicker
  value={date}
  onChange={(newDate) => setDate(newDate.bsDate)}
/>
```

## License

MIT
npm package: @milantyeva/button
Description: `Button` - is core component of UI-system.
Author: n.milantyeva@propellerads.net
Latest version: 6.1.0

# Button
`Button` - is core component of UI-system.

![size](https://img.shields.io/bundlephobia/min/@propellerads/button.svg)
![](https://img.shields.io/npm/v/@propellerads/button.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/button) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/Button)

## Installation
* `yarn add @propellerads/button` or `npm install @propellerads/button -S`

### How to use
* `import Button, {BUTTON_TYPE, BUTTON_SIZE} from '@propellerads/button';`
* And render `<Button>Your text</Button>`

### isAsync prop 
Using `isAsync` prop allows the component perform async operation disable `onclick behaviour` and show `loading` automatically
npm package: @milantyeva/input-text
Description: Input text component
Author: n.milantyeva@propellerads.net
Latest version: 2.5.2

# InputText

![size](https://img.shields.io/bundlephobia/min/@propellerads/input-text.svg)
![](https://img.shields.io/npm/v/@propellerads/input-text.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/input-text) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/input-text)

## Installation
* `yarn add @propellerads/input-text` or `npm install @propellerads/input-text -S`

### How to use
* `import InputText from '@propellerads/input-text';`
* And render
```
<InputText
    onChange={(value) => {}}
    label="My label"
    value={value}
/>
```
npm package: @milantyeva/test-icon
Description: ![size](https://img.shields.io/bundlephobia/min/@propellerads/icon.svg) ![](https://img.shields.io/npm/v/@propellerads/icon.svg?style=flat-square)
Author: n.milantyeva@propellerads.net
Latest version: 1.0.0

# Icons
![size](https://img.shields.io/bundlephobia/min/@propellerads/icon.svg)
![](https://img.shields.io/npm/v/@propellerads/icon.svg?style=flat-square)

[NPM](https://www.npmjs.com/package/@propellerads/icon) |
[Github](https://github.com/propellerads/ui-components/tree/master/Components/icon)

## Installation
* `yarn add @propellerads/icon` or `npm install @propellerads/icon -S`

### How to use
* `import {AmericanExpress, SIZE, COLOR} from '@propellerads/icon';`
* And render `<AmericanExpress size={SIZE.MEDIUM} color={COLOR.GREEN}/>`
npm package: @milanzor/homey-mock
Description: Mock Homey for unit-testing purposes
Author: Milan van As
Latest version: 1.1.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Homey Mock
Mock Homey for unit-testing purposes


## What
This package provides a mocking class to allow developers to unit-test their Athom Homey apps


## Installation and usage
My preferred (the only one I have used actually...) JS unit testing utilities are Mocha together with Chai, so here's how you use them to mock Homey and unit test your app:

1. Install the following **DEV** dependencies in your app project:<br>
    `npm install -D mocha chai mock-require homey-mock`
2. Edit your package.json's `scripts => test` entry to `mocha ./test/**/*.test.js`, this will allow you to run `npm test` _later_ and all your test files will be executed.
3. Create a `test` directory in the root of your project
4. Create a file in the `test` directory called, say, `myapp.test.js` 
5. Have a look at the `./examples/basic.test.js` and `./examples/homeyapp.test.js` for some example code to put in your .test.js file.
6. Run `npm test` and see the result of your unit tests!

## Working example
For a working example, have a look at our Countdown app: https://github.com/NotQuiteZen/homey.countdown
and it's travis integration for automated Unit Tests: https://travis-ci.com/NotQuiteZen/homey.countdown


## IMPORTANT NOTE
- This currently only mocks a few functions that Homey supports, if you are missing anything, stuff will be added as I need them, but feel free te leave an issue or even a pull request.
- Hit me up on Athom's Slack community on `@milanzor`
npm package: @milcktoast/gltf-loader
Description: A Webpack loader for glTF assets. Automatically bundles all referenced files.
Author: Jay Weeks
Latest version: 2.0.0

# Webpack glTF Loader

A Webpack loader for __glTF__ assets. Automatically bundles all referenced files.

This loader is based on [MONOGRID/gltf-loader-2](https://github.com/MONOGRID/gltf-loader-2).

## Webpack configuration 

``` js
rules: [
  // IMPORTANT: if you have a loader for Image files (you would, normally)
  // you NEED to add an exclude option IN IT for GLTF images
  {
    // following is an example of YOUR loader config
    test: /\.(png|jpe?g|gif)(\?.*)?$/,
    // here I decided to put all my gltf files under a folder named 'gltf'
    // so I added and exclude rule to my existing loader
    exclude: /gltf/, // only add this line
    // (etc)
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'img/[name].[hash:7].[ext]'
    }
  },
  // GLTF configuration: add this to rules
  {
    // match all .gltf files
    test: /\.(gltf)$/,
    loader: '@jpweeks/gltf-loader'
  },
  {
    // here I match only IMAGE and BIN files under the gltf folder
    test: /gltf.*\.(bin|png|jpe?g|gif)$/,
    // or use url-loader if you would like to embed images in the source gltf
    loader: 'file-loader',
    options: {
      // output folder for bin and image files, configure as needed
      name: 'gltf/[name].[hash:7].[ext]'
    }
  }
  // end GLTF configuration
]
```

## Usage Example in Three.js

 ``` js
 // please notice the file and all its dependencies 
 // are under a folder named 'gltf' as per webpack config
import gltfFile from 'assets/gltf/some.gltf';
// per configuration only the GLTF json het embedded in the source
// .bin and .png images are processed and outputted by webpack

var loader = new GLTFLoader()
loader.parse(shieldGLTF, '', (gltf) => {
  // here we go
  let scene = gltf.scene
})
 ```
npm package: @milcktoast/three.proton
Description: three.proton is a magical 3d particle engine using [three.js]
Author: a-jie
Latest version: 0.1.7

three.proton
======
three.proton is a magical 3d particle engine using [three.js](https://github.com/mrdoob/three.js). It is based on the [Proton](https://github.com/a-jie/Proton) Engine library. It inherited Proton's most api.<br>
I think it is the simplest three.js particle engine.Check out examples at https://a-jie.github.io/three.proton/<br>

## Features
- Four kinds of renderers
  - MeshRender 
  - SpriteRender 
  - PointsRender 
  - CustomRender 

- Three kinds of emitters which can simulate many different physical effects
  - Emitter 
  - BehaviourEmitter 
  - FollowEmitter 
  
- Perfectly compatible with the three.js library. 

#### It was very, very easy to use

## Installation

#### Install using npm 
[![anix](https://nodei.co/npm/three.proton.js.png)](https://npmjs.org/package/three.proton.js)

``` 
npm install three.proton.js --save
... 
import Proton from 'three.proton.js';
```

#### Include in html
``` 
<script type="text/javascript" src="js/three.proton.min.js"></script> 
```

## Usage
```javascript
var proton = new Proton();
var emitter = new Proton.Emitter();

//setRate
emitter.rate = new Proton.Rate(new Proton.Span(4, 16), new Proton.Span(.01));

//addInitialize
emitter.addInitialize(new Proton.Position(new Proton.PointZone(0, 0)));
emitter.addInitialize(new Proton.Mass(1));
emitter.addInitialize(new Proton.Radius(6, 12));
emitter.addInitialize(new Proton.Life(3));
emitter.addInitialize(new Proton.V(45, new Proton.Vector3D(0, 1, 0), 180));

//addBehaviour
emitter.addBehaviour(new Proton.Alpha(1, 0));
emitter.addBehaviour(new Proton.Scale(.1, 1.3));

var color1 = new THREE.Color();
var color2 = new THREE.Color();
var colorBehaviour = new Proton.Color(color1, color2);
emitter.addBehaviour(colorBehaviour);
emitter.emit();

//add emitter
proton.addEmitter(emitter);

//add renderer
proton.addRender(new Proton.SpriteRender(scene));
```

## Building three.proton
Node is a dependency, use terminal to install it with with:<br>
`git clone git://github.com/a-jie/three.proton.git`<br>
Then navigate to the build directory by running:<br>
`cd ./build`<br>
Finally run the build command:<br>
`node build.js`

## License
Proton is released under the MIT License. http://www.opensource.org/licenses/mit-license
npm package: @milcktoast/vite-plugin-glslify
Description: A plugin for Vite to compile glslify shader code
Author: KusStar
Latest version: 2.2.0

# vite-plugin-glslify

> A plugin for Vite to compile [glslify](https://github.com/glslify/glslify) shader code

## Usage

Install

```cmd
$ yarn add --D vite-plugin-glslify
# or npm i -D vite-plugin-glslify
```

Add it to `vite.config.*`

```js
// vite.config.js
import { glslify } from 'vite-plugin-glslify'

export default {
  plugins: [
    glslify()
  ],
}
```

That's it, now it will compile your glslify shader code.

It will transpile **glsl\`...\`** or **glsl(\`...\`)**.

Other details, see [glslify](https://github.com/glslify/glslify).

## Example


```js
const frag = glsl`
  #pragma glslify: ease = require('glsl-easings/sine-in')
  precision mediump float;

  varying vec3 vpos;
  void main () {
    gl_FragColor = vec4(ease(vpos*25.0),1);
  }
`
```

Will be transpiled to

```js
const frag = `
  #ifndef HALF_PI
  #define HALF_PI 1.5707963267948966
  #endif

  float sineIn(float t) {
    return sin((t - 1.0) * HALF_PI) + 1.0;
  }

  precision mediump float;

  varying vec3 vpos;
  void main () {
    gl_FragColor = vec4(ease(vpos*25.0),1);
  }
`
```

Or you can import files with extensions like `*.glsl`, `*.vert`, `*.frag`, see [example](./example).

## Interfaces

```ts
/**
 * A valid `minimatch` pattern, or array of patterns.
 */
export type FilterPattern = ReadonlyArray<string | RegExp> | string | RegExp | null;

import { Plugin } from 'vite';
import { FilterPattern } from '@rollup/pluginutils';

declare type GlslifyTransform<Options = any> = (filename: string, src: string, options: Options, done: (error: any, src: string) => void) => string;
interface GlslifyOptions {
    transforms?: (GlslifyTransform | string | [
        GlslifyTransform | string,
        any
    ])[];
}
interface Options {
    /**
     * included files or folder, defaults to [/\.ts$/, /\.js$/]
     */
    include?: FilterPattern;
    /**
     * excluded files or folder, defaults to ['node_modules/**']
     */
    exclude?: FilterPattern;
    /**
     * should transform literals with literalsCompiler, defaults to true
     */
    transformLiterals?: boolean;
    /**
     * function calling that should be compiled, defaults to [/glsl/]
     */
    funcName?: FilterPattern;
    /**
     * should transform files with filesCompiler, defaults to true
     */
    transformFiles?: boolean;
    /**
     * extensions of files that should be compiled, defaults to [/\.vert$/, /\.frag$/, /\.glsl$/]
     */
    extensions?: FilterPattern;
    /**
     * options passed to glslify
     */
    options?: GlslifyOptions;
}

declare const DEFAULT_EXTENSIONS: RegExp[];
declare function glslify(options?: Options): Plugin[];

export { DEFAULT_EXTENSIONS, glslify as default, glslify };
```

## LICENSE

[MIT](./LICENSE)
npm package: @mild-ts/npm-typescript-boilerplate
Description: NPM TypeScript Boilerplate with Changesets CLI & GitHub Actions
Author: Thada Wangthammang
Latest version: 0.0.2

# NPM TypeScript Boilerplate

> This repo is only the boilerplate for npm packages, found in npm registry for testing purpose only,

## Use this repo

```
git clone https://github.com/mildronize/simple-typescript-boilerplate.git [project_name]
```

```bash
# start
npm start
# Test watch mode
npm run test:watch
```

## Thanks
- https://www.youtube.com/watch?v=eh89VE3Mk5g
npm package: @mild-ts/rest-client
Description: TypeScript Rest Client utility with Axios
Author: Thada Wangthammang
Latest version: 0.4.0
Deprecated: This package is deprecated. Please use '@thaitype/rest-client' instead.

# @mild-ts/rest-client

Lightweight REST client helper function wrapping with type and [Axios](https://github.com/axios/axios)

[![CI](https://github.com/mild-ts/rest-client/actions/workflows/main.yml/badge.svg)](https://github.com/mild-ts/rest-client/actions/workflows/main.yml) [![](https://img.shields.io/npm/v/@mild-ts/rest-client)](https://www.npmjs.com/package/@mild-ts/rest-client)

## Introduction

Lightweight REST client helper function with basic type support and [Axios](https://github.com/axios/axios) wrapper. However, if you need more type-safety, we recommend considering [untypeable](https://github.com/total-typescript/untypeable). 

Alternatively, if you have control over both the server and client types, options like [tRPC](https://trpc.io/) or [GraphQL](https://graphql.org/) are great choices. So go ahead and choose the option that works best for your needs!

## Installation
```
npm i @mild-ts/rest-client
```

### Examples
```ts
import { RestClient } from '@mild-ts/rest-client';

async function main() {
  const client = new RestClient();
  const res = await client.request('GET https://jsonplaceholder.typicode.com/posts/{postId}/comments', {
    params: {
      postId: 1,
    },
  });
  console.log(res.data);
}

main();
```

# API

to be add later
npm package: @mild-ts/utils
Author: Thada Wangthammang
Latest version: 0.1.3
Deprecated: This package is deprecated. Use @thaitype/utils instead.

# @mild-ts/utils


## Installation
```
npm i @mild-ts
```

### Examples
```ts
import { createSymbolRecord } from '@mild-ts/utils';

export const Tokens = createSymbolRecord('HealthAlertOption', 'SlackOption');

// Equal to 
export const Tokens = {
  HealthAlertOption: Symbol.for('HealthAlertOption'),
  SlackOption: Symbol.for('SlackOption'),
}
```