open-index/open-npm huggingface dataset:
npm package: @oyster-lib/ui
Description: AI-friendly, accessible React component library built with TypeScript, Tailwind CSS v4, and shadcn/ui
Author: icaria-inc
Latest version: 0.10.1

# @oyster-lib/ui

React/TypeScript ベースの UI コンポーネントライブラリです。

## インストール

```bash
npm install @oyster-lib/ui
```

## CSS のセットアップ

### 推奨設定（Tailwind CSS v4 との共存）

`@oyster-lib/ui` は Tailwind CSS v4 を使用しており、`oy:` プレフィックス付きのユーティリティクラスを提供します。

利用側プロジェクトでも Tailwind CSS を使用する場合、**分割インポート**を推奨します。

**layout.tsx（または _app.tsx）:**

```tsx
// @oyster-lib/ui のスタイルを先にインポート
import '@oyster-lib/ui/styles.css'
// 利用側のグローバルスタイル
import './globals.css'
```

**globals.css:**

```css
/* Tailwind CSS v4 の分割インポート */
@import 'tailwindcss/theme.css';
/* preflight は @oyster-lib/ui/styles.css が提供するためスキップ */
/* @import 'tailwindcss/preflight.css'; */
@import 'tailwindcss/utilities.css';

/* プロジェクト固有のスタイル */
```

### なぜ分割インポートが必要か

`@oyster-lib/ui/styles.css` は以下を含んでいます:

- `tailwindcss/theme.css`（`oy:` プレフィックス付き）
- `tailwindcss/preflight.css`
- `tailwindcss/utilities.css`（`oy:` プレフィックス付き）

利用側で `@import "tailwindcss"` を使うと、preflight が二重にロードされ、ユーティリティクラスが正しく生成されない場合があります。

### よくある問題

#### `pt-16`, `mt-4` などのユーティリティが効かない

**原因:** `@import "tailwindcss"` と `@oyster-lib/ui/styles.css` の競合

**解決:** 上記の分割インポートを使用してください。

#### スタイルの優先度がおかしい

**原因:** CSS のインポート順序が不適切

**解決:** `@oyster-lib/ui/styles.css` を **先に** インポートしてください。

```tsx
// ✅ 正しい順序
import '@oyster-lib/ui/styles.css'
import './globals.css'

// ❌ 間違った順序
import './globals.css'
import '@oyster-lib/ui/styles.css'
```

## 使用例

```tsx
import { Button, Stack } from '@oyster-lib/ui'

function App() {
  return (
    <Stack space="md">
      <Button>プライマリボタン</Button>
      <Button variant="outline">アウトラインボタン</Button>
    </Stack>
  )
}
```

## スタイルのカスタマイズ

### className prop

```tsx
// oy: プレフィックスで Oyster のユーティリティを使用
<Button className="oy:bg-red-500 oy:hover:bg-red-600">
  カスタムボタン
</Button>

// 利用側の Tailwind ユーティリティも併用可能
<Button className="oy:bg-red-500 mt-4">
  カスタムボタン
</Button>
```

## ダークモード

`<html>` 要素に `.dark` クラスを付与することでダークモードが有効になります:

```html
<html class="dark">
  <body>...</body>
</html>
```

## ドキュメント

詳細は [src/docs/getting-started.md](./src/docs/getting-started.md) を参照してください。

## ライセンス

MIT
npm package: @oysterlee/utils
Description: Collection of utility functions for common JavaScript/TypeScript task
Author: Oyster Lee
Latest version: 0.3.0

# @oysterlee/utils
[![npm](https://img.shields.io/npm/v/@oysterlee/utils)](https://www.npmjs.com/package/@oysterlee/utils)
[![Download](https://img.shields.io/npm/dw/@oysterlee/utils)](https://www.npmjs.com/package/@oysterlee/utils)
[![Bundle Size](https://img.shields.io/bundlephobia/min/@oysterlee/utils)](https://www.npmjs.com/package/@oysterlee/utils)
[![LICENSE](https://img.shields.io/github/license/OysterD3/utils)](https://github.com/OysterD3/utils)

Collection of utility functions for common JavaScript/TypeScript task

## Features
- Tree-shakable
- No dependencies

## Installation
```shell
pnpm i @oysterlee/utils
# or
npm i @oysterlee/utils
# or
yarn add @oysterlee/utils
```

## Basic usage
Checkout the documentation [https://oysterd3.github.io/utils/](https://oysterd3.github.io/utils/)


## TODO
- [x] Documentation
- [ ] Unit test for DOM
npm package: @oysterlee/vue-color-picker
Description: [![npm](https://img.shields.io/npm/v/@oysterlee/vue-color-picker)](https://www.npmjs.com/package/@oysterlee/vue-color-picker) [![Download](https://img.shields.io/npm/dw/@oysterlee/vue-color-picker)](https://www.npmjs.com/package/@oysterlee/vue-color-picke
Author: Oyster Lee
Latest version: 0.1.2

# @oysterlee/vue-color-picker
[![npm](https://img.shields.io/npm/v/@oysterlee/vue-color-picker)](https://www.npmjs.com/package/@oysterlee/vue-color-picker)
[![Download](https://img.shields.io/npm/dw/@oysterlee/vue-color-picker)](https://www.npmjs.com/package/@oysterlee/vue-color-picker)
[![Bundle Size](https://img.shields.io/bundlephobia/min/@oysterlee/vue-color-picker)](https://www.npmjs.com/package/@oysterlee/vue-color-picker)
[![LICENSE](https://img.shields.io/github/license/OysterD3/vue-color-picker)](https://github.com/OysterD3/vue-color-picker)

A lightweight color picker component for Vue 3 apps. Inspired by [react-colorful](https://github.com/omgovich/react-colorful)

## Features
- One dependency

## Installation
```shell
pnpm i @oysterlee/vue-color-picker
# or
npm i @oysterlee/vue-color-picker
# or
yarn add @oysterlee/vue-color-picker
```

## How to use
```javascript
// main.js
import { createApp } from "vue";
import ColorPicker from "@oysterlee/vue-color-picker";
import App from "./App.vue";

createApp(App).use(ColorPicker).mount("#app");

// component.vue
<VColorPicker v-model="rgb" v-model:alpha="alpha" mode="rgb" />
```

### Type
```typescript
type RGB = { r: number; g: number; b: number };
type RGBA = RGB & { a: number };
type HSV = { h: number; s: number; v: number };
type HSVA = HSV & { a: number };
type HSL = { h: number; s: number; l: number };
type HSLA = HSL & { a: number };
type Interaction = {
  top: number;
  left: number;
};
type Color = RGB | HSV | HSL | string;
type AvailableColorType = "rgb" | "hex" | "hsl" | "hsv";

type Props = {
  mode: AvailableColorType;
  modelValue: Color;
  alpha: number;
}
```

## Demo
https://oysterd3.github.io/vue-color-picker/
npm package: @oystrfinance/direct-debit-client
Description: ### Installation
Latest version: 0.2.5-alpha.0

## Oystr Direct Debit SDK Documentation

### Installation

To use the direct debit SDK, you need to include the SDK script in your HTML file. You can either host the script locally or use a CDN. Here's an example of including the SDK and using a CDN:

#### Using NPM
```bash
npm i @oystrfinance/direct-debit-client
```

OR
#### Inline Script 
```html
<script src="https://cdn.jsdelivr.net/npm/@oystrfinance/direct-debit-client@latest/dist/bundle.js"></script>
```

### Usage

The SDK expects that you have a backend and have called the create collection API endpoint like this
```bash
curl -X POST "https://oystr-direct-debit-api-staging.azurewebsites.net/v1/debits/create" -H "Content-Type: application/json" -H "api-key: xxxxxx" -d '{
  "amount": 5000,
  "frequency": "daily",
  "description": "Collection On John Doe",
  "start_date": "2023-09-30",
  "duration_in_days": 19,
  "reference": "'"$(($RANDOM % 1000000000))"'",
  "payer_data": {
    "bvn": "00000000000",
    "name": "John Doe",
    "phone_number": "+2348012345678",
    "email": "john@doe.com"
  }
}'

```
#### Warning
> :warning: **Never call the create collection endpoint from the frontend.**

The above endpoint should only be called from the backend. Calling it from the frontend exposes your API key and allows anyone to create a collection on your behalf.

#### Initializing the SDK
The token gotten from the above endpoint can now be used to initialize the SDK like this

```js
DirectDebit.setup(token).initialize({
            toggleLive: true,
});
```

#### Test Mode

The SDK has a test mode that can be used to test the SDK without making real payments. To enable test mode, pass `toggleLive` as `false` when initializing the SDK. The default value is `true`.

```js
DirectDebit.setup(token).initialize({
            toggleLive: false,
});
```

#### Retries

For incomplete collections, passing the same token to the SDK will retry the collection. The SDK can retry the collection until it is successful or the collection expires.
npm package: @oyvindher/preserve
Description: A handy localstorage util
Author: Øyvind Hermansen
Latest version: 0.3.1

# Preserve

A state lib for keeping track of and change localStorage data

[![Build Status](https://travis-ci.org/oyvindhermansen/preserve.svg?branch=master)](https://travis-ci.org/oyvindhermansen/preserve) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

## Install

```sh
 npm install @oyvindher/preserve
```

or with Yarn

```sh
yarn add @oyvindher/preserve
```

## API

`preserve(key:string, initialData?: any)`

The preserve function gives you 4 methods in return:

- `get<T>()` Gives the current state of your localstorage item.
- `set<T>(data:T)` Set the current state of your localstorage item.
- `subscribe(callback: (prevData, nextData) => void)` Gives you a callback to listen to current state changes
- `clearItem()` Clears the localStorge item

## Basic usage

```ts
import preserve from '@oyvindher/preserve';

// Make an item you want to keep track of.
// The initial state is optional.
const myItem = preserve('myData', 0);
```

```ts
// Get the current data from localStorage key
myItem.get(); // 0
```

```ts
// Update the localStorage data.
myItem.set(1);
```

```ts
// Listen to changes that happens within your localStorage item
myItem.subscribe((prevData, nextData) => {
  console.log(prevData); // 0
  console.log(nextData); // 1
});
```

```ts
// Clear the item from localStorage
myItem.clearItem();
```

---

## preserveLogger

PreserveLogger is a handy util for development for logging out previous and next state of any given preserved item when it changes.

This is how you would use it:

```ts
import preserve, { preserveLogger } from '@oyvindher/preserve';

const myItem = preserve('myItem');

// Pass the item you want to log.
preserveLogger(myItem);
```
npm package: @oyvindher/react-state-connector
Description: Simple state management with native React context
Author: Øyvind Hermansen
Latest version: 0.1.0

# React state connector

Simple global state management with native React context

## Usage

```tsx
import createState from '@oyvindher/react-state-connector';

interface MyGlobalStateInterface {
  counter: number;
}

// Export as a singleton
const { StateProvider, StateContext } = createState<MyGlobalStateInterface>(
  counter: 0
)

// Wrap StateProvider around your application.
function App() {
  return (
    <StateProvider>
      {/* Application */}
    </StateProvider>
  )
}

// Use StateContext together with useContext to access your global state
function Counter() {
  const { state, setState } = useContext(StateContext);

  return (
    <div>
      <h1>{state.counter}</h1>
      <button onClick={() => setState({...state, counter: +1 })}>Increment</button>
    </div>
  )
}

```

> Nice to know: You can also use `StateContext.Consumer` instead of `useContext(StateContext)`, and use the render-prop to access the global state!
npm package: @oyvindher/react-translate
Description: A simple React translation library
Author: Øyvind Hermansen
Latest version: 0.1.3

# react-translate

## Setup and installation

Clone repository

```bash
$ git clone https://github.com/oyvindhermansen/react-translate.git
```

To install dependencies:

```bash
bun install
```

To build:

```bash
bun run build
```

## What challenge does this attempt to solve?

This is a solution for creating easy translations for React SPA's.
It provides a scalable solution to adding different languages to e.g a dashboard or some other type of SPA-application.

This is how it works:

### Provider setup

```jsx
import { TranslateProvider } from "@oyvindher/react-translate";

const translations = {
  no: {
    intro: "Velkommen",
  },
  en: {
    intro: "Welcome",
  },
};

const App: React.FC = () => {
  return (
    <TranslateProvider translations={translations} lang="no">
      <MyApplication />
    </TranslateProvider>
  );
};
```

### Hook it up

```jsx
import { useTranslate } from "@oyvindher/react-translate";

const MyApplication: React.FC = () => {
  const { t } = useTranslate();

  return (
    <div>
      <h1>{t("intro")}</h1>
    </div>
  );
};
```

### Dynamic values?? We got em.

The translations can contain a variable if wrapped in `{{ }}`.

So if the translation object looks like this:

```ts
const translations = {
  no: {
    intro: "Velkommen, {{username}}",
  },
  en: {
    intro: "Welcome, {{username}}",
  },
};
```

The translator function takes variables as a second argument, and will be mapped to the name of the variable.

```jsx
import { useTranslate } from "@oyvindher/react-translate";

const MyApplication: React.FC = () => {
  const { t } = useTranslate();
  const user = "John Doe";

  return (
    <div>
      <h1>{t("intro", { username: user })}</h1>
    </div>
  );
};
```

### BUN for the win.

This project was created using `bun init` in bun v1.2.4. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime.
npm package: @oyvinmar-forks/describe-ref
Description: Parse git describe output for lerna-related tags
Author: Daniel Stockman
Latest version: 4.0.0

# `@lerna/describe-ref`

> Parse [git describe][] output for lerna-related tags

## Usage

```js
const { describe } = require("@lerna/describe-ref");

(async () => {
  const { lastTagName, lastVersion, refCount, sha, isDirty } = await describe();
})();

// values listed here are their defaults
const options = {
  cwd: process.cwd(),
  // pass a glob to match tag name, e.g. "v*.*.*"
  match: undefined,
  // if true, omit --first-parent option
  includeMergedTags: false,
};

const { lastTagName, lastVersion, refCount, sha, isDirty } = describe.sync(options);

const result = describe.parse("v1.0.0-5-gdeadbeef");
// { lastTagName, lastVersion, refCount, sha, isDirty }
```

Install [lerna](https://www.npmjs.com/package/lerna) for access to the `lerna` CLI.

[git describe]: https://git-scm.com/docs/git-describe
npm package: @oyxiao/rollup-plugin-image-files
Description: Like rollup-plugin-image, but writes image files to dest instead of inlining base64.
Author: Bradley J. Spaulding
Latest version: 1.4.4

# rollup-plugin-image-files

![Build Status](https://github.com/bspaulding/rollup-plugin-image-files/workflows/Node%20CI/badge.svg)

Like rollup-plugin-image, but writes image files to dest instead of inlining base64.
This was written for a library that would be consumed by react-native applications.

## Usage

Install the plugin via npm:

```bash
npm install --save-dev rollup-plugin-image-files
```

Add the plugin to your rollup config:

```javascript
import images from 'rollup-plugin-image-files';

export default {
  entry: 'src/index.js',
  des: 'dist/bundle.js',
  plugins: [images()]
}
```

Require some images in your source:

```javascript
import React from 'react';
import { Image } from 'react-native';
import imageSrc from '../path/to/image.png';

export default const MyComponent = () => (
  <Image source={imageSrc}/>
);
```

## What it does

The plugin does two things:

1. Copies the source image into the same directory as the destination file.
2. Replaces the image required with a module that exports the result of calling require on the copied image.
npm package: @oyy-gus/lavasfy
Description: Spotify album, playlist, and track resolver for Lavalink.
Author: oyy-gus
Latest version: 0.0.5

# lavasfy [![npm](https://img.shields.io/npm/v/lavasfy)](https://npmjs.com/package/lavasfy "lavasfy")
Spotify album, playlist, and track resolver for Lavalink.

## Installing
```sh
# npm
npm i lavasfy

# yarn
yarn add lavasfy
```

## Example Usage
```js
const { LavasfyClient } = require("lavasfy");

const lavasfy = new LavasfyClient({
    clientID: "a client id",
    clientSecret: "a client secret"
}, [
    {
        id: "main",
        host: "localhost",
        port: 2333,
        password: "youshallnotpass",
        secure: false
    }
]);

(async () => {
    // We need to call this to get the Spotify API access token (only needs once after the LavasfyClient instantiated).
    await lavasfy.requestToken();

    // Select node to use with its id.
    const node = lavasfy.getNode("main");

    // Use Node#load to load album, playlist, and track
    const album = await node.load("https://open.spotify.com/album/4sZni6V6NvVYhfUFGqKuR3");
    console.log(album);

    const playlist = await node.load("https://open.spotify.com/playlist/2NdDBIGHUCu977yW5iKWQY");
    console.log(playlist);

    const track = await node.load("https://open.spotify.com/track/4zsxBgPkUFYEoOGDncGIBd");
    console.log(track);

    // Response object: https://github.com/Allvaa/lava-spotify/blob/master/src/typings/Lavalink/index.ts#L22
})();
```
[Documentation](https://allvaa.github.io/lava-spotify "Documentaion")
npm package: @oyyy/slider-img-verify
Description: 图片滑块组件
Author: oyyy
Latest version: 2.1.0

<!--
 * @Author: ouyangyuying
 * @Date: 2022-06-23 17:13:55
 * @LastEditTime: 2022-06-23 19:14:49
 * @Description: 
-->
### 使用包管理器

```bash
# 选择一个你喜欢的包管理器
# NPM
$ npm i @oyyy/slider-img-verify --save

# Yarn
$ yarn add @oyyy/slider-img-verify

# pnpm
$ pnpm add @oyyy/slider-img-verify
```

```html
<script setup lang="ts">
import { YoungImgSlider } from '@oyyy/slider-img-verify';
const slider = new YoungImgSlider(() => {
  console.log('验证通过！')
});

</script>

<template>
  <div>
    <button @click="slider.show()">开始</button>
  </div>
</template>
```

### 浏览器直接引入

```html
<!-- 国内推荐使用 jsdelivr -->
<script src="//cdn.jsdelivr.net/npm/@oyyy/slider-img-verify"></script>
<!-- or -->
<script src="//unpkg.com/@oyyy/slider-img-verify"></script>

<script>
const { YoungImgSlider } = window.YoungSlideVerify;
const slide = new YoungImgSlider();

slide.show();
</script>
```

## 开发环境

```bash
node: 16.13.1
pnpm: 7.1.9
```
npm package: @oyz-lib/province-city-china-min
Description: 中国省市县数据,树形结构,用于前端树形选择组件，数据经过极致压缩
Author: oyz-lib
Latest version: 1.0.6

[![npm package](https://img.shields.io/npm/v/@oyz-lib/province-city-china-min.svg?logo=npm)](https://www.npmjs.com/package/@oyz-lib/province-city-china-min?logo=npm) ![Downloads](https://img.shields.io/npm/dw/@oyz-lib/province-city-china-min.svg?logo=npm)

## 中华人民共和国行政区划代码数据

- 通过压缩数据，减少体积，提高加载速度
- 中华人民共和国行政区划（五级）：省级、地级、县级、乡级和村级。来自中华人民共和国民政部，用于查询中国省，市和区数据的网站。

- 中华人民共和国行政区划代码，更新时间：2021-01-04
- 统计用区划和城乡划分代码，更新时间：2021-12-30

```
npm install @oyz-lib/province-city-china-min
```

使用：

```typescript
import DataMin from "@oyz-lib/province-city-china-min";
import levelData from "@oyz-lib/province-city-china-min/data/level.json";

const tree = DataMin.getData(levelData);
console.log(tree);
```

| 名称       | 类型          | 说明                  |
| ---------- | ------------- | ------------- | 
| getData    | (data: string \| string[]) => DataItem | 获取数据     |
| getCountry | (data: string \| string[]) => Country  | 获取国家数据 |



json数据：

| 名称                                  | 说明               | 使用方法   | 文件大小 | 下载地址 |
| ------------------------------------- | ------------------ | ---------- | -------- | -------- |
| country.json  | 国家               | getCountry | 11kb      | [下载](./data/country.json) |
| province.json | 省级(省/直辖市/特别行政区)               | getData    | 496字节  | [下载](./data/province.json) |
| city.json        | 地级(城市)               | getData    | 5kb      | [下载](./data/city.json) |
| area.json        | 县级(区县)               | getData    | 47kb     | [下载](./data/area.json) |
| town.json     | 乡级(乡镇/街)               | getData    | 591kb    | [下载](./data/town.json) |
| level.json      | 树形结构，省/市/县 | getData    | 53kb     | [下载](./data/level.json) |
| data.json        | 省/市/县           | getData    | 641kb    | [下载](./data/data.json) |
| district-code.json       | 国内长途电话区号           | getData    | 4kb    | [下载](./data/district-code.json) |


可以将文件放入资源目录，异步下载后调用`DataMin`方法。

类型定义：

```typescript
export declare interface Country {
  // 序号
  id: number;
  // 中文简称
  cnname: string;
  // 英文简称
  name: string;
  // 英文全称
  fullnam: string;
  // 两字母代码
  alpha2: string;
  // 三字母代码
  alpha3: string;
  // 数字代码
  numeric: number;
}

export declare interface DataItem {
  code: string;
  name: string;
  // 省级(省/直辖市/特别行政区)
  province: string;
  // 地级(城市)
  city: string;
  // 县级(区县)
  area: string;
  // 乡级(乡镇/街)
  town: string;
  children?: DataItem[];
}
```

> province 第一位表示：华北区1，东北区2，华东区3，中南区4，西南区5，西北区6。 如 湖北省 -> 42 以 4 开头，表示为 中南区。

## License

MIT