open-index/open-npm huggingface dataset:
npm package: @jokkicn/leaflet-wind
Description: leaflet wind
Author: sakitam-fdd
Latest version: 1.2.3

# `leaflet-wind`

> [leaflet](https://leafletjs.com/) wind layer adapter

## Usage

### Install

```bash
pnpm i leaflet-wind -S
```

### Example

```vue
<template>
  <div class="demo-content">
    <div class="map-warp" ref="map"></div>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue'

const map = ref(null)

const initMap = async (dom) => {
  const L = await import('leaflet');
  const { WindLayer } = await import('leaflet-wind');

  const map = new L.map(dom, {
    // center: [113.53450137499999, 34.44104525],
    zoom: 5,
    center: [113.53450137499999, 34.44104525].reverse(),
    // zoom: 4
  });

  const layer = L.tileLayer('//{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
    subdomains: ['a', 'b', 'c', 'd'],
  });

  map.addLayer(layer);

  fetch('https://sakitam.oss-cn-beijing.aliyuncs.com/codepen/wind-layer/json/wind.json')
      .then(res => res.json())
      .then(res => {
        const velocityScale = [0.1, 0.2, 0.3, 0.4, 0.5];

        const windLayer = new WindLayer('wind', res, {
          windOptions: {
            // colorScale: (m) => {
            //   // console.log(m);
            //   return '#fff';
            // },
            colorScale: [
              "rgb(36,104, 180)",
              "rgb(60,157, 194)",
              "rgb(128,205,193 )",
              "rgb(151,218,168 )",
              "rgb(198,231,181)",
              "rgb(238,247,217)",
              "rgb(255,238,159)",
              "rgb(252,217,125)",
              "rgb(255,182,100)",
              "rgb(252,150,75)",
              "rgb(250,112,52)",
              "rgb(245,64,32)",
              "rgb(237,45,28)",
              "rgb(220,24,32)",
              "rgb(180,0,35)"
            ],
            // velocityScale: 1 / 20,
            // paths: 5000,
            frameRate: 16,
            maxAge: 60,
            globalAlpha: 0.9,
            velocityScale: () => {
              return velocityScale[map.getZoom() - 5] * 0.1 || 0.1;
            },
            // paths: 10000,
            paths: 1000,
          },
        });

        console.log(map, windLayer);

        map.addLayer(windLayer);
      });
}

onMounted(() => {
  initMap(map.value);
});
</script>

<style lang="less">
.demo-content {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #cbe0ff;

  &-datgui {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    pointer-events: auto;
  }

  .map-warp {
    width: 100%;
    height: 100%;
  }
}
</style>

```
npm package: @joknoll/lucide-svelte-animated
Description: Animated lucide icons in svelte.
Author: Johannes Knoll
Latest version: 0.0.3

# @joknoll/lucide-svelte-animated

Animated [Lucide](https://lucide.dev/) icons as Svelte 5 components.

## Usage

```svelte
<script lang="ts">
	import { Activity, ArrowRight, Bell } from '@joknoll/lucide-svelte-animated';
</script>

<Activity />
<ArrowRight size={20} />
<Bell color="#0f766e" strokeWidth={1.5} animate />
```

For smaller import graphs, you can import a single icon directly:

```svelte
<script lang="ts">
	import Activity from '@joknoll/lucide-svelte-animated/icons/activity';
</script>

<Activity />
```

All icons are exported as named components and share the same props:

- `size?: number` default `24`
- `color?: string` default `currentColor`
- `strokeWidth?: number` default `2`
- `animate?: boolean`
- `class?: string`

Icons animate on hover and can also be rendered in an animated state with `animate`.
npm package: @jokoprasetyo/ts-curl-impersonate
Description: A typescript wrapper around cURL-impersonate.
Author: battlesquid
Latest version: 1.0.10

# ts-curl-impersonate

Fork of [curl-impersonate-node](https://github.com/wearrrrr/curl-impersonate-node) that adds windows support along with some other features.

## Install

```sh
# yarn
yarn add ts-curl-impersonate

# npm
npm i ts-curl-impersonate
```

## Usage

```ts
// normal request
const response = await new RequestBuilder()
    .url(/** YOUR URL HERE **/)
    .header("x-foo-bar", "baz")
    .send();

// make a post request
const response = await new RequestBuilder()
    .url(/** YOUR URL HERE **/)
    .method("POST")
    .body({ foo: "bar" })
    .send();

// use a browser preset (options vary by platform)
const response = await new RequestBuilder()
    .url(/** YOUR URL HERE **/)
    .preset({ name: "chrome", version: "110" })
    .send();
```
npm package: @jokr-it/solid-select-bootstrap
Description: The Select component for Solid. Enhanced with bootstrap classes
Author: Martin Pengelly-Phillips / Jakob Kannenberg
Latest version: 0.0.11

# Solid Select Bootstrap

This repository is a fork of solid-select by Martin Pengelly-Phillips
enhanced with bootstrap classes

Install:
```bash
npm install @jokr-it/solid-select-bootstrap
```
npm package: @jokula-heroicons/react
Description: <p align="center">   <a href="https://heroicons.com" target="_blank">     <picture>       <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg">       <source media="(pref
Latest version: 1.2.0

<p align="center">
  <a href="https://heroicons.com" target="_blank">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg">
      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
      <img alt="Heroicons" width="315" height="117" style="max-width: 100%" src="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
    </picture>
  </a>
</p>

<p align="center">Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.<p>

<p align="center">
  <a href="https://heroicons.com"><strong>Browse at Heroicons.com &rarr;</strong></a>
</p>

<p align="center">
    <a href="https://github.com/tailwindlabs/heroicons/releases"><img src="https://img.shields.io/npm/v/@heroicons/react" alt="Latest Release"></a>
    <a href="https://github.com/tailwindlabs/heroicons/blob/master/react/LICENSE"><img src="https://img.shields.io/npm/l/@heroicons/react.svg" alt="License"></a>
</p>

## Basic Usage

First, install `@heroicons/react` from npm:

```sh
npm install @heroicons/react
```

Now each icon can be imported individually as a React component:

```js
import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="size-6 text-blue-500" />
      <p>...</p>
    </div>
  )
}
```

The 24x24 outline icons can be imported from `@heroicons/react/24/outline`, the 24x24 solid icons can be imported from `@heroicons/react/24/solid`, the 20x20 solid icons can be imported from `@heroicons/react/20/solid`, and 16x16 solid icons can be imported from `@heroicons/react/16/solid`.

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

[Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@heroicons/react/24/outline/)

## Contributing

While we absolutely appreciate anyone's willingness to try and improve the project, we're currently only interested in contributions that fix bugs, for example things like incorrect TypeScript types, or fixing an icon that's been exported with a fill instead of a stroke, etc.

**We're not accepting contributions for new icons or adding support for other frameworks like Svelte or SolidJS**. Instead we encourage you to release your own icons in your own library, and create your own packages for any other frameworks you'd like to see supported.

## License

This library is MIT licensed.
npm package: @jokula-heroicons/vue
Description: <p align="center">   <a href="https://heroicons.com" target="_blank">     <picture>       <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg">       <source media="(pref
Latest version: 1.2.0

<p align="center">
  <a href="https://heroicons.com" target="_blank">
    <picture>
      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-dark.svg">
      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
      <img alt="Heroicons" width="315" height="117" style="max-width: 100%" src="https://raw.githubusercontent.com/tailwindlabs/heroicons/HEAD/.github/logo-light.svg">
    </picture>
  </a>
</p>

<p align="center">Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.<p>

<p align="center">
  <a href="https://heroicons.com"><strong>Browse at Heroicons.com &rarr;</strong></a>
</p>

<p align="center">
    <a href="https://github.com/tailwindlabs/heroicons/releases"><img src="https://img.shields.io/npm/v/@heroicons/vue" alt="Latest Release"></a>
    <a href="https://github.com/tailwindlabs/heroicons/blob/master/vue/LICENSE"><img src="https://img.shields.io/npm/l/@heroicons/vue.svg" alt="License"></a>
</p>

## Basic Usage

First, install `@heroicons/vue` from npm:

```sh
npm install @heroicons/vue
```

Now each icon can be imported individually as a Vue component:

```vue
<template>
  <div>
    <BeakerIcon class="size-6 text-blue-500" />
    <p>...</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>
```

The 24x24 outline icons can be imported from `@heroicons/vue/24/outline`, the 24x24 solid icons can be imported from `@heroicons/vue/24/solid`, the 20x20 solid icons can be imported from `@heroicons/vue/20/solid`, and the 16x16 solid icons can be imported from `@heroicons/vue/16/solid`.

Icons use an upper camel case naming convention and are always suffixed with the word `Icon`.

[Browse the full list of icon names on UNPKG &rarr;](https://unpkg.com/browse/@heroicons/vue/24/outline/)

## Contributing

While we absolutely appreciate anyone's willingness to try and improve the project, we're currently only interested in contributions that fix bugs, for example things like incorrect TypeScript types, or fixing an icon that's been exported with a fill instead of a stroke, etc.

**We're not accepting contributions for new icons or adding support for other frameworks like Svelte or SolidJS**. Instead we encourage you to release your own icons in your own library, and create your own packages for any other frameworks you'd like to see supported.

## License

This library is MIT licensed.
npm package: @jokullsolberg/next-use-query-param
Description: React hook for type safe search param use in Next.js.
Author: Jökull Sólberg
Latest version: 0.2.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# `useQueryParam()`

Type-safe query param handling for [Next.js](https://nextjs.org/) using zod.

## Install

```
npm install @jokullsolberg/next-use-query-param
```

## Example usage

```tsx
function Counter() {
  const [num, setNum] = useSearchParam('num', z.number().default(1));

  return (
    <div>
      <pre>{num}</pre>
      <button onClick={() => setNum(num + 1)}>Click me</button>
    </div>
  );
}
```

Another example.

```tsx
function Stepper() {
  const [step, setStep] = useSearchParam(
    'step',
    z.enum(['login', 'signup', 'forgot-password']).default('signup')
  );

  return (
    <div>
      {step === 'login' ? <Login /> : null}
      {step === 'signup' ? <Signup /> : null}
      {step === 'forgot-password' ? <ForgotPassword /> : null}
    </div>
  );
}
```

These components can affect the state by simply routing with `Link` or `router.push` — instead of
prop drilling `onSuccess` handlers into each component to orchestrate transitions.

Default values are required. Let me know if this is annoying.

## Benefits

Keeping state in search params is user friendly and has DX benefits

- State lives in search params, like a poor man's global `Context`
- Browser back button works and updates state
- zod is a powerful tool to create types

## FAQ

- **URLSearchParams support multiple values for the same key, does this tool too?** No.
- **Values of URLSearchParams are always strings, do I need to zod `preprocess` them?** No. It is
  done by calling `JSON.parse` and `JSON.strinfify` on boolean and number values automatically.
- **What happens to unexpected or illegal values?** They are ignored and default values are used
  instead.

## Next.js 13 and SSR

This does not work inside `/app` client components since router is imported from `next/navigation`
now.

SSR will reach for the default values.
npm package: @jokullsolberg/next-use-search-params
Description: React hook for type safe search param use in Next.js.
Author: Jökull Sólberg
Latest version: 0.2.0

# `useSearchParams()`

Type-safe search param handling for [Next.js](https://nextjs.org/) using zod.

## Install

```
npm install @jokullsolberg/next-use-search-params
```

## Example usage

```tsx
function Signup() {
  const [{ foo, bar, date }, setSearchParam] = useSearchParams({
    foo: z.string().default(''),
    bar: z.coerce.number().default(1),
    date: z.coerce.date().default(new Date()),
    screen: z.enum(['login', 'signup']).default('login'),
  });
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '10px',
        alignItems: 'start',
      }}
    >
      <h2>Signup</h2>
      <input
        value={foo}
        onChange={(event) => setSearchParam('foo', event.target.value)}
      />
      <input
        type="number"
        value={String(bar)}
        onChange={(event) => setSearchParam('bar', event.target.valueAsNumber)}
      />
      <input
        type="date"
        value={date.toISOString().split('T')[0]}
        onChange={(event) =>
          setSearchParam('date', event.target.valueAsDate ?? new Date())
        }
      />
      <p>{date.toISOString()}</p>
      <button onClick={() => setSearchParam('screen', 'login')}>Login</button>
    </div>
  );
}

export default function Page() {
  const [{ screen }, setSearchParam] = useSearchParams({
    screen: z.enum(['login', 'signup']).default('login'),
  });
  return screen === 'login' ? (
    <div>
      Login{' '}
      <button onClick={() => setSearchParam('screen', 'signup')}>Signup</button>
    </div>
  ) : (
    <Signup />
  );
}
```

These components can affect the state by simply routing with `Link` or `router.push` — instead of
prop drilling `onSuccess` handlers into each component to orchestrate transitions.

Default values are required. Let me know if this is annoying.

## Benefits

Keeping state in search params is user friendly and has DX benefits

- State lives in search params, like a poor man's global `Context`.
- Browser back button works and updates state.
- zod is a powerful tool to validate data and type values.
- Default values are not displayed in the URL to keep it clean.
- Because state is global multiple components can bind simultaneously to the same param. This helps
  avoid prop drilling `onSuccess` handlers.

## FAQ

- **URLSearchParams support multiple values for the same key, does this tool too?** No.
- **Values of URLSearchParams are always strings, do I need to zod `preprocess` them?** No. Use the
  new `z.coerce` stuff instead. Internally we call `JSON.stringify` or `Date.toISOString()` to
  marshal back to URL.
- **What happens to unexpected or illegal values?** They are ignored and default values are used
  instead.

## Next.js 13 and SSR

This does not work inside `/app` client components since router is imported from `next/navigation`
now.

SSR will reach for the default values.