open-index/open-npm huggingface dataset:
npm package: @lynkit/api
Description: Utility functions for Lynkit
Author: LynnCen
Latest version: 0.3.0

# @lynkit/api

轻量级工具函数库，提供常用的时间控制、缓存、重试等功能。

## 特性

- **Tree-shaking** - 支持按需导入
- **TypeScript** - 完整的类型定义
- **零依赖** - 无外部依赖
- **双格式** - ESM + CommonJS

## 安装

```bash
pnpm add @lynkit/api
```

## API

### debounce - 防抖

```ts
import { debounce } from '@lynkit/api';
// 或路径导入
import { debounce } from '@lynkit/api/debounce';

const debouncedSearch = debounce((query: string) => {
  console.log('搜索:', query);
}, 300);

// 带选项
const debouncedSave = debounce(save, 1000, {
  leading: true, // 立即执行一次
  trailing: true, // 结束后执行
});

// 方法
debouncedSearch.cancel(); // 取消
debouncedSearch.flush(); // 立即执行
```

### throttle - 节流

```ts
import { throttle } from '@lynkit/api';

const throttledScroll = throttle(() => {
  console.log('滚动');
}, 200);

window.addEventListener('scroll', throttledScroll);

// 方法
throttledScroll.cancel();
```

### LRUCache - LRU 缓存

```ts
import { LRUCache } from '@lynkit/api';

const cache = new LRUCache<string>(100); // 容量 100

cache.set('key', 'value');
cache.get('key'); // 'value'
cache.has('key'); // true
cache.delete('key');
cache.clear();
cache.size; // 当前大小
cache.capacity; // 容量
cache.keys(); // 按最近使用排序
```

### ExponentialBackoff - 指数退避

```ts
import { ExponentialBackoff, retry } from '@lynkit/api';

// 手动控制
const backoff = new ExponentialBackoff({
  baseInterval: 1000,
  maxInterval: 30000,
  maxRetries: 5,
  jitter: 0.1,
});

const delay = backoff.nextDelay(); // 1000, 2000, 4000...
backoff.reset();
backoff.canRetry; // 是否可继续重试
backoff.retryCount; // 当前重试次数

// 简化用法
const result = await retry(() => fetch('/api/data'), { maxRetries: 3 });
```

## 路径导入

支持独立导入以获得更好的 tree-shaking：

```ts
import { debounce } from '@lynkit/api/debounce';
import { throttle } from '@lynkit/api/throttle';
import { LRUCache } from '@lynkit/api/LRUCache';
import { ExponentialBackoff } from '@lynkit/api/ExponentialBackoff';
```

## 许可证

[MIT](./LICENSE)
npm package: @lynkit/icons
Description: Icon components for Lynkit
Author: LynnCen
Latest version: 0.3.0

# @lynkit/icons

React 图标组件库，提供 1000+ 个高质量图标。

## 特性

- 🎨 **currentColor** - 支持 CSS 颜色继承
- 📐 **size/color Props** - 灵活配置尺寸和颜色
- 🔗 **forwardRef** - 支持 ref 转发
- 🌲 **Tree-shaking** - 按需加载，极致优化
- 📦 **双格式输出** - ES Modules + CommonJS

## 安装

```bash
npm install @lynkit/icons
# or
yarn add @lynkit/icons
# or
pnpm add @lynkit/icons
```

## 使用

### 基础使用

```tsx
import { Iconadd, Iconclose, Iconcheckcircle } from '@lynkit/icons';

function App() {
  return (
    <div>
      <Iconadd />
      <Iconclose size={20} />
      <Iconcheckcircle color="green" />
    </div>
  );
}
```

### CSS 颜色继承

图标默认使用 `currentColor`，会自动继承父元素的 `color` 属性：

```tsx
// 图标颜色跟随文字颜色
<button style={{ color: 'blue' }}>
  <Iconadd /> 添加
</button>

// 配合 CSS 变量
<span style={{ color: 'var(--primary-color)' }}>
  <Iconcheckcircle />
</span>
```

### 路径导入（极致 Tree-shaking）

```tsx
// 只打包需要的图标
import Iconadd from '@lynkit/icons/es/icons/Iconadd';
```

### Ref 引用

```tsx
import { useRef } from 'react';
import { Iconadd } from '@lynkit/icons';

function App() {
  const iconRef = useRef<SVGSVGElement>(null);
  return <Iconadd ref={iconRef} />;
}
```

## API

### IconProps

| 属性      | 类型               | 默认值           | 说明       |
| --------- | ------------------ | ---------------- | ---------- |
| size      | `number \| string` | `24`             | 图标尺寸   |
| color     | `string`           | `'currentColor'` | 图标颜色   |
| className | `string`           | -                | 自定义类名 |
| style     | `CSSProperties`    | -                | 自定义样式 |

继承所有 `SVGProps<SVGSVGElement>` 属性。

## 开发

```bash
# 转换图标（CLI 拉取后执行）
pnpm transform

# 构建
pnpm build

# 开发模式
pnpm dev
```

## 许可证

[MIT](./LICENSE)
npm package: @lynkit/ui
Description: React UI Component Library
Author: LynnCen
Latest version: 0.3.0

# @lynkit/ui

React UI 组件库，提供了一套高质量的基础 UI 组件。

## 特性

- 🎨 **Design Tokens** - 基于 CSS Variables 的设计令牌系统
- 🌓 **主题切换** - 支持亮色/暗色/跟随系统三种主题模式
- 📦 **双格式输出** - 同时支持 ES Modules 和 CommonJS
- 🛡 **TypeScript** - 使用 TypeScript 开发，提供完整的类型定义
- ✅ **测试覆盖** - 核心组件 100% 测试覆盖

## 安装

```bash
npm install @lynkit/ui
# or
yarn add @lynkit/ui
# or
pnpm add @lynkit/ui
```

## 快速开始

```tsx
import { ConfigProvider, Button, Input, Select } from '@lynkit/ui';
import '@lynkit/ui/styles.css';

function App() {
  return (
    <ConfigProvider theme="light">
      <Button type="primary">按钮</Button>
      <Input placeholder="请输入" />
      <Select options={[{ label: '选项', value: '1' }]} />
    </ConfigProvider>
  );
}
```

## 主题切换

### 基础用法

```tsx
import { ConfigProvider, Button } from '@lynkit/ui';
import '@lynkit/ui/styles.css';

// 亮色主题（默认）
<ConfigProvider theme="light">
  <Button>亮色主题</Button>
</ConfigProvider>

// 暗色主题
<ConfigProvider theme="dark">
  <Button>暗色主题</Button>
</ConfigProvider>

// 跟随系统
<ConfigProvider theme="system">
  <Button>跟随系统</Button>
</ConfigProvider>
```

### 动态切换

```tsx
import { ConfigProvider, Button, useConfig } from '@lynkit/ui';
import '@lynkit/ui/styles.css';

function ThemeSwitcher() {
  const { theme, setTheme, resolvedTheme } = useConfig();

  return (
    <div>
      <p>当前主题: {resolvedTheme}</p>
      <Button onClick={() => setTheme('light')}>亮色</Button>
      <Button onClick={() => setTheme('dark')}>暗色</Button>
      <Button onClick={() => setTheme('system')}>跟随系统</Button>
    </div>
  );
}

function App() {
  return (
    <ConfigProvider>
      <ThemeSwitcher />
    </ConfigProvider>
  );
}
```

## 按需导入

### 方式一：统一导入（推荐）

```tsx
import { Button, Input } from '@lynkit/ui';
import '@lynkit/ui/styles.css';
```

### 方式二：路径导入

```tsx
import Button from '@lynkit/ui/es/button';
import Input from '@lynkit/ui/es/input';
import '@lynkit/ui/styles.css';
```

## 组件列表

| 组件           | 说明         |
| -------------- | ------------ |
| Button         | 按钮组件     |
| Input          | 输入框组件   |
| Select         | 选择器组件   |
| ConfigProvider | 全局配置组件 |

## API

### ConfigProvider

| 参数      | 说明     | 类型                            | 默认值    |
| --------- | -------- | ------------------------------- | --------- |
| theme     | 主题模式 | `'light' \| 'dark' \| 'system'` | `'light'` |
| prefixCls | 类名前缀 | `string`                        | `'lyn'`   |

### useConfig

```tsx
const { theme, resolvedTheme, prefixCls, setTheme } = useConfig();
```

| 返回值        | 说明           | 类型                            |
| ------------- | -------------- | ------------------------------- |
| theme         | 当前主题设置   | `'light' \| 'dark' \| 'system'` |
| resolvedTheme | 实际生效的主题 | `'light' \| 'dark'`             |
| prefixCls     | 类名前缀       | `string`                        |
| setTheme      | 切换主题方法   | `(theme: ThemeMode) => void`    |

## 本地开发

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 运行测试
pnpm test
```

## 浏览器支持

- Chrome >= 87
- Firefox >= 78
- Safari >= 14
- Edge >= 88

## 许可证

[MIT](./LICENSE)
npm package: @lynksen/react-gsap-utils
Description: Collection of zero-config, drop-in utilities to animate React elements and components using GSAP Tween animation props.
Author: Lynksen
Latest version: 0.9.9

# React GSAP Utils

Collection of zero-config, drop-in utilities to animate React elements and components using GSAP.
Supports all GSAP Tween animation props.

#### DEMO on Codepen

- 👍🏻 Zero-config, easy to use
- 🧩 Fully written in TypeScript
- ✅ Compatible with existing GSAP's ScrollSmoother, ScrollTriggers in your project

## Installation

`npm install @lynksen/react-gsap-utils`

## Usage

### 1. Animate On Mount

Easily animate conditional rendering (mount/unmount) of any custom elements.

Parameters:

- **mounted** (boolean) - Mount/unmount condition.
- **fromTo** (gsap.fromToVars) - Animation properties, as in [gsap.fromTo()](<https://gsap.com/docs/v3/GSAP/gsap.fromTo()>).
- **className** (string) - CSS classname for the component.

Returns:
React.ReactElement || null

```JSX
import { AnimateOnMount } from "@lynksen/react-gsap-utils";

<AnimateOnMount
    mounted={condition}
    fromTo={[
      { opacity: 0, y: "60%" },
      { opacity: 1, y: "0%", duration: 1 },
    ]}
>
   <div>Animating mount and unmount on condition change</div>
</AnimateOnMount>
```

### 2. Animate On Scroll

Zero-config ScrollTrigger component for children reveal animation.

Parameters:

- **children** - The content to be animated.
- **YOffset** (int) - The offset in percentage from the top of the viewport where the animation should start. Default value is 80 (80% from the top of the screen).
- **from** (gsap.fromVars) - The initial animation properties, as in [gsap.from()](<https://gsap.com/docs/v3/GSAP/gsap.from()>). Default value is { opacity: 0, y: "60%", duration: 0.6, ease: "power2.out" }.
- **className** (string) - CSS classname for the container.
- **childClassName** (string) - CSS classname for the child element.
- **onComplete** (function) - Callback function to be called when the animation completes.
- **onStart** (function) - Callback function to be called when the animation starts.
- **debug** (boolean) - Whether to show debug markers.

Returns:
React.ReactElement

```JSX
import { AnimateOnScroll } from "@lynksen/react-gsap-utils";

<AnimateOnScroll>
   <p>Revealing and disappearing on scroll according to the defined animation.</p>
</AnimateOnScroll>
```

## Caveats

- ⚠️ Compatibility with custom scroll smoothing libraries may not be possible.

#### License

[MIT](LICENSE).
npm package: @lynn1286/chrome-extension-cli
Description: 一个用于创建 Chrome Extension MV3 项目的脚手架工具
Author: lynn1286
Latest version: 2.2.0

# Chrome Extension CLI

一个用于快速创建基于 Manifest V3 的 Chrome 扩展项目的命令行工具。

## 功能特点

- 基于 TypeScript 开发
- 支持交互式项目配置
- 提供完整的项目模板
- 支持多种包管理器 (npm, yarn, pnpm)
- 友好的命令行界面

## 安装

### 全局安装

```bash
npm install -g @lynn1286/chrome-extension-cli
# 或
yarn global add @lynn1286/chrome-extension-cli
# 或
pnpm add -g @lynn1286/chrome-extension-cli
```

### 使用 npx 直接运行

```bash
npx @lynn1286/chrome-extension-cli create my-extension
```

## 使用方法

### 创建新项目

```bash
# 使用交互式命令创建项目
chrome-cli create my-extension

# 跳过依赖安装
chrome-cli create my-extension --skip-install

# 指定包管理器
chrome-cli create my-extension --package-manager yarn
```

## 模板源码

此项目使用 [lynn1286/chrome-extension-mv3](https://github.com/lynn1286/chrome-extension-mv3) 作为基础模板。

## 开发指南

### 安装依赖

```bash
npm install
# 或
yarn install
# 或
pnpm install
```

### 开发模式

```bash
npm run dev
# 或
yarn dev
# 或
pnpm dev
```

### 构建

```bash
npm run build
# 或
yarn build
# 或
pnpm build
```

## 许可证

MIT