open-index/open-npm huggingface dataset:
npm package: @panosen/rc-button
Description: 一个现代化的 React 按钮组件，支持自定义颜色和渐变效果。
Latest version: 0.2.3

# @panosen/rc-button

一个现代化的 React 按钮组件，支持自定义颜色和渐变效果。

## 特性

- 🎨 **自定义颜色** - 支持通过 `color` 属性自定义按钮颜色
- ✨ **现代化设计** - 优雅的渐变和悬停效果
- 🎯 **完整的交互状态** - 支持 hover、active、focus、disabled 状态
- 📦 **轻量级** - 零依赖（除了 React）
- 🔧 **TypeScript 支持** - 完整的类型定义
- 🎭 **灵活配置** - 支持图标、自定义样式等

## 安装

```bash
npm install @panosen/rc-button
```

或使用 pnpm：

```bash
pnpm add @panosen/rc-button
```

或使用 yarn：

```bash
yarn add @panosen/rc-button
```

## 使用

### 基础用法

```tsx
import { Button } from '@panosen/rc-button';
import '@panosen/rc-button/style.css';

function App() {
  return (
    <Button onClick={() => console.log('clicked')}>
      Click Me
    </Button>
  );
}
```

### 自定义颜色

```tsx
<Button color="#FF5733">Red Orange</Button>
<Button color="#33FF57">Lime Green</Button>
<Button color="#3357FF">Royal Blue</Button>
```

### 带图标

```tsx
<Button icon={<YourIcon />}>
  Button with Icon
</Button>
```

### 自定义样式

```tsx
<Button 
  className="my-custom-class"
  style={{ fontSize: '1.2rem' }}
>
  Custom Style
</Button>
```

## API

### Button Props

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `children` | `React.ReactNode` | - | 按钮内容 |
| `icon` | `React.ReactNode` | - | 按钮图标 |
| `className` | `string` | - | 自定义类名 |
| `style` | `React.CSSProperties` | - | 自定义样式 |
| `color` | `string` | `#667eea` | 按钮主题颜色（支持 hex 格式） |
| `onClick` | `React.MouseEventHandler` | - | 点击事件处理函数 |

组件使用 `React.forwardRef`，支持传递 ref 到按钮元素。

## 颜色系统

按钮使用 CSS 变量来实现动态颜色系统：

- `--button-color`: 主题色
- `--button-hover-color`: 悬停颜色（自动计算为较暗的颜色）
- `--button-active-color`: 激活颜色（自动计算为更暗的颜色）

当你传入 `color` 属性时，组件会自动计算 hover 和 active 状态的颜色。

## 样式特性

- **渐变背景** - 悬停时显示微妙的渐变效果
- **阴影效果** - 悬停和聚焦时的柔和阴影
- **平滑过渡** - 所有状态变化都有流畅的过渡动画
- **无障碍支持** - 完整的键盘导航和焦点管理

## 开发

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 代码检查
pnpm lint
```

## 技术栈

- React 18/19
- TypeScript
- Vite
- SCSS Modules

## 浏览器支持

支持所有现代浏览器：

- Chrome (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
- Edge (最新版本)

## 相关链接

- [GitHub Repository](https://github.com/panosen-react/panosen-rc-button)
- [npm Package](https://www.npmjs.com/package/@panosen/rc-button)