open-index/open-npm huggingface dataset:
npm package: @svondervoort/safe-triangles
Description: A helper for users to navigation more easilly through dropdowns
Author: Sander van de Vondervoort
Latest version: 1.0.1

# Safe-Triangles

Inspired by: https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/

---
# Usage

### 1. Installing
Install the package using one of the following options:

#### NPM
```bash
npm install @svondervoort/safe-triangles
```

#### Yarn
```bash
yarn add @svondervoort/safe-triangles
```

### 2. Requiring resources

#### Javascript
```javascript 
import generateSafeTriangles from "@svondervoort/safe-triangles";
```

#### Styling
```javascript
// CSS
import '@svondervoort/safe-triangles/dist/css/style.css';

// SCSS
import '@svondervoort/safe-triangles/src/scss/style.scss';
```

### 3. Adding data-attribute

```html
data-safe-triangle-dropdown="..."
```
Add this to the menu-item anchor element and the dropdown it is associated with.

### 4. Initializing
Initialize the logic using `generateSafeTriangles();`.
The function requires either a `selector <string>` or a `DOM node list <NodeList>`.

---
# Options
| Name | Type | Default | Description                                                                                                                                     |
| ---- | ---- | ------- |-------------------------------------------------------------------------------------------------------------------------------------------------|
| delay | `number` | `100` | The delay of which the path of the safe-triangle gets updated. A minimum of 100ms is recommended since the path follows the cursor of the user. |
| debug | `boolean` | `false` | If set to true it will show the overlays so you can see the Safe Triangles doing their work                                                     |

---
# Example
```javascript
// Import Javascript
import generateSafeTriangles from "@svondervoort/safe-triangles";

// Import SCSS
import '@svondervoort/safe-triangles/src/scss/style.scss';

// Create NodeList
let elements = document.querySelectorAll('.header-main-nav-l1__item-link--has-children-js, .header-main-nav-l2__item-link--has-children-js');

// Initialize with delay and debug
generateSafeTriangles(elements, { delay: 100, debug: true });
```

---
# Demo
You can find a demo here with 3 variants:
- [Without Safe-Triangles](https://safe-triangles.vercel.app/demo1.html)
- [With Safe-Triangles ( debug: true )](https://safe-triangles.vercel.app/)
- [Without Safe-Triangles ( debug: false )](https://safe-triangles.vercel.app/demo3.html)

---
# Roadmap

- Add `left` and `top` options for dropdown direction/position.
npm package: @svpkg/calendarly
Description: A sleek, dependency-free React calendar with Tailwind styling, date range selection, and quick presets. 🚀📅
Author: Shubham Verma
Latest version: 0.0.3

# 🚧 Package Under Progress 🚧


# 📅 `@svpkg/calendarly` – A Simple & Flexible React Calendar Component  

`@svpkg/calendarly` is a lightweight, customizable calendar component built with React, Day.js, and CSS. It provides both single-date and date-range selection with an intuitive UI.  

## ✨ Features  

✅ Single and multiple-month view  
✅ Quick selection options (Today, Yesterday, This Week, etc.)  
✅ Single-date and date-range selection  
✅ Minimal dependencies (React + Day.js)  
✅ Fully customizable  

---

## 🚀 Installation  

```sh
npm install @svpkg/calendarly
```

or  

```sh
yarn add @svpkg/calendarly
```

---

## 🛠️ Usage  

### Basic Example  

```tsx
import { Calendarly } from "@svpkg/calendarly";

<Calendarly 
    type="single" 
    isRange={false} 
    quickSelection={true} 
    onSelect={(date) => console.log("Selected date:", date)}
/>
```

### Props  

| Prop             | Type      | Description |
|-----------------|----------|-------------|
| `type`          | `"single"` \| `"multiple"` | `"single"` shows one month, `"multiple"` shows two months side by side. |
| `isRange`       | `boolean` | If `true`, enables date range selection. If `false`, allows single date selection. |
| `quickSelection` | `boolean` | If `true`, displays quick selection options like Today, This Week, etc. |
| `onSelect`      | `(date: string \| [string, string]) => void` | Callback function triggered on date selection. Returns either a single date or a date range. |

---

## 📌 Example Use Cases  

### 1️⃣ Single-Date Picker  

```tsx
<Calendarly 
    type="single"
    isRange={false}
    quickSelection={false}
    onSelect={(date) => console.log("Selected:", date)}
/>
```

![single calendar](https://github.com/shubhamvermadev/public_images/blob/master/packages/calendarly/single.png?raw=true)

### 📆 Date-Range Picker  

```tsx
<Calendarly 
    type="multiple"
    isRange={true}
    quickSelection={true}
    onSelect={(range) => console.log("Selected Range:", range)}
/>
```
![Multiple calendar](https://github.com/shubhamvermadev/public_images/blob/master/packages/calendarly/multiple.png?raw=true)
---
<!-- 
## 🎨 Customization  

You can style `Calendarly` by overriding the default CSS in `Calendar.css`.   -->

## 🔥 Why Use `@svpkg/calendarly`?  

✔ No external calendar packages – pure React & Day.js  
✔ Simple, minimal UI with easy customization  
✔ Quick date selection options for faster input  

---

## 📜 License  

MIT License. Feel free to use  

---

Enjoy using `@svpkg/calendarly`? 🌟 Star the repo on [github](https://github.com/shubhamvermadev/calendarly) and share your feedback! 🚀
npm package: @svpkg/otp-generator
Description: Generate OTPs faster than you can say 'secure login'—because even your passwords deserve a little fun!
Author: Shubham Verma
Latest version: 0.0.2

# OTP Generator

### Generate OTPs faster than you can say 'secure login'—because even your passwords deserve a little fun!

Secure and Versatile OTP Generator: Your Ultimate Key to Digital Safety!
Unlock the power of robust security with our OTP Generator, designed to keep your digital world secure and hassle-free! Whether you need a quick, numeric code for fast authentication or a complex, alphanumeric string for heightened security, our generator has you covered.

## Features:

Custom Length: Create OTPs of any length you need—short for convenience or long for extra protection.
Flexible Options: Choose between numeric codes for simplicity or alphanumeric for enhanced security.
Instant Generation: Get your OTPs on-the-fly, ensuring a seamless and secure user experience.
Safeguard your accounts, protect sensitive transactions, and ensure that only authorized users gain access. With our OTP Generator, security is just a click away!

## Installation

You can install the package using npm:

```bash
npm install @svpkg/otp-generator
```


## Usage
```bash
const generateOTP = require('@svpkg/otp-generator');

const otp = generateOTP();
console.log(otp);
```

## API
`generateOTP(): string`
Generates and returns a otp string.
npm package: @svpkg/uuid-generator
Description: Effortless, Unique, Reliable - Generate UUIDs in a Snap!
Author: Shubham Verma
Latest version: 0.0.2

# UUID Generator

### Effortless, Unique, Reliable - Generate UUIDs in a Snap!

Create universally unique identifiers (UUIDs) with ease using our lightweight, lightning-fast Node.js package. Perfect for adding unique IDs to your projects without any hassle. Say goodbye to collisions and hello to uniqueness!

## Installation

You can install the package using npm:

```bash
npm install @svpkg/uuid-generator
```


## Usage
```bash
const generateUUID = require('@svpkg/uuid-generator');

const uuid = generateUUID();
console.log(uuid);
```

## API
`generateUUID(): string`
Generates and returns a UUID string.