open-index/open-npm huggingface dataset:
npm package: @mxmweb/zui-components
Description: 一个包含复杂 UI 组件的 React 组件库，提供高质量的交互组件。
Author: hanfeng_Zhang
Latest version: 1.4.8

# @mxmweb/zui-components

一个包含复杂 UI 组件的 React 组件库，提供高质量的交互组件。

## 组件列表

### 1. GoogleNavbar - 侧边导航栏

一个类似 Google 风格的侧边导航栏组件，支持展开/收起、激活状态、图标和徽章。

#### 特性
- ✅ 支持展开/收起状态
- ✅ 支持激活状态高亮
- ✅ 支持图标和徽章显示
- ✅ 响应式设计
- ✅ 可自定义主题
- ✅ 支持受控和非受控模式

#### 使用示例

```tsx
import { GoogleNavbar } from '@mxmweb/zui-components';
import type { GoggleNavItem } from '@mxmweb/zui-components';

const items: GoggleNavItem[] = [
  {
    key: 'dashboard',
    name: '仪表盘',
    icon: '/icons/dashboard.svg',
    path: '/dashboard',
  },
  {
    key: 'projects',
    name: '项目',
    icon: '/icons/projects.svg',
    path: '/projects',
    badge: 5,
  },
];

<GoogleNavbar
  items={items}
  activePath="/dashboard"
  onItemClick={(item) => console.log(item)}
  logo="/logo.svg"
/>
```

### 2. CustomDock - 底部停靠栏

一个类似 macOS Dock 的底部停靠栏组件，支持悬停放大效果和毛玻璃背景。

#### 特性
- ✅ 支持单选/多选模式
- ✅ 悬停放大效果
- ✅ 毛玻璃背景
- ✅ 工具提示
- ✅ 可自定义尺寸和间距
- ✅ 支持激活状态管理

#### 使用示例

```tsx
import { CustomDock } from '@mxmweb/zui-components';
import type { DockItem } from '@mxmweb/zui-components';

const items: DockItem[] = [
  {
    id: 'home',
    label: '首页',
    icon: '/icons/home.svg',
    onClick: () => console.log('点击首页'),
  },
  {
    id: 'search',
    label: '搜索',
    icon: '/icons/search.svg',
  },
];

<CustomDock
  items={items}
  activeMode="single"
  defaultActiveId="home"
  onActiveChange={(id) => console.log('激活:', id)}
  itemWidth={60}
  itemHeight={60}
  magnification={1.3}
/>
```

### 3. Uploader - 文件上传器

一个功能完整的文件上传组件，支持拖拽上传、多文件上传、进度显示和错误处理。

#### 特性
- ✅ 支持拖拽上传
- ✅ 多文件上传
- ✅ 文件类型和大小限制
- ✅ 上传进度显示
- ✅ 错误处理和重试
- ✅ 可自定义表单字段
- ✅ 支持预览和删除
- ✅ 事件系统

#### 使用示例

```tsx
import { Uploader } from '@mxmweb/zui-components';
import type { UploaderProps } from '@mxmweb/zui-components';

const uploaderConfig: UploaderProps = {
  multiple: true,
  accept: 'image/*,.pdf,.doc,.docx',
  maxSize: 10, // 10MB
  maxFiles: 5,
  autoUpload: true,
  url: '/api/upload',
  placeholder: '拖拽文件到此处或点击选择文件',
  eventsEmit: (eventName, data) => {
    console.log('上传事件:', eventName, data);
  },
};

<Uploader {...uploaderConfig} />
```

## 安装

```bash
npm install @mxmweb/zui-components
# 或
yarn add @mxmweb/zui-components
# 或
pnpm add @mxmweb/zui-components
```

## 依赖

- React 16.8+
- React DOM 16.8+
- styled-components
- animejs (仅 CustomDock 需要)
- lucide-react (仅 Uploader 需要)

## 主题支持

所有组件都支持通过 `styles` 属性自定义主题：

```tsx
const customStyles = {
  theme: {
    colors: {
      primary: '#3b82f6',
      background: '#ffffff',
      text: '#1f2937',
    },
    space: {
      radius: '8px',
    },
  },
};

<GoogleNavbar styles={customStyles} />
```

## 开发

```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建
pnpm build

# 预览构建结果
pnpm preview
```

## 许可证

MIT