React Input Styles

一个基于 TypeScript + React 的输入框样式组件库，封装了多种可复用的输入框风格，帮助你在项目中快速切换不同风格的输入体验。

功能特性

• 🎨 四种常用的输入框视觉风格（经典边框 / 浮动标签 / 拟物 / 荧光胶囊）。
• ♻️ 统一的 InputProps API，可随时互换不同样式。
• ⚙️ 基础逻辑集中在 InputBase，包含聚焦、禁用、受控/非受控处理。
• 🧩 支持前后缀图标、状态提示、Label、className 等扩展。
• 🛠️ 采用 tsup 输出 CommonJS + ESM + 类型声明，方便发布到 npm。

目录结构

src/
├─ components/
│  └─ InputBase.tsx        # 统一的输入逻辑
├─ page/
│  ├─ page1/               # 经典边框风格
│  ├─ page2/               # 浮动标签风格
│  ├─ page3/               # 拟物柔光风格
│  └─ page4/               # 荧光胶囊风格
└─ index.ts                # 导出入口

每个 pageX 目录都包含 index.tsx 和 style.css，方便独立维护样式。

安装依赖

npm install

开发 & 构建

npm run dev    # tsup watch 模式
npm run build  # 生成 dist（cjs + esm + d.ts）
npm run lint   # 类型检查

使用方式

重要：需要手动导入样式文件！

import { Page1Input, Page2Input } from 'react-input-styles';
// 导入样式（必须）
import 'react-input-styles/styles.css';

export function Demo() {
  return (
    <div>
      <Page1Input placeholder="请输入用户名" status="success" />
      <Page2Input label="邮箱" status="error" />
    </div>
  );
}

InputProps 统一具备以下能力：

• value / defaultValue / onChange
• status?: 'default' | 'error' | 'success'
• prefixIcon / suffixIcon
• label, className, containerClassName 等
• 与原生 <input /> 一样的其余属性（例如 type="password"）

发布

构建完成后即可通过 npm publish --access public 发布。也欢迎在现有样式的基础上继续扩展更多 pageX 输入风格。