63 lines
1.2 KiB
TypeScript
63 lines
1.2 KiB
TypeScript
/**
|
||
* Input 组件
|
||
*
|
||
* 统一的输入框组件，遵循三层架构设计
|
||
* 支持错误状态、多种尺寸（sm、md、lg）、全宽等
|
||
* 使用 forwardRef 支持 ref 传递
|
||
*
|
||
* @created 2025-11-22
|
||
* @component
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { InputHTMLAttributes, forwardRef } from 'react'
|
||
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
||
|
||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||
error?: boolean
|
||
size?: 'sm' | 'md' | 'lg'
|
||
fullWidth?: boolean
|
||
}
|
||
|
||
const Input = forwardRef<HTMLInputElement, InputProps>(
|
||
(
|
||
{
|
||
error = false,
|
||
size = 'md',
|
||
fullWidth = true,
|
||
className = '',
|
||
...props
|
||
},
|
||
ref
|
||
) => {
|
||
const styles = useThemeStyles()
|
||
|
||
const sizeClasses = {
|
||
sm: styles.inputModifiers.compactXs,
|
||
md: '',
|
||
lg: 'px-5 py-4 text-base',
|
||
}
|
||
|
||
const inputClass = error ? styles.inputStyles.error : styles.inputStyles.base
|
||
|
||
return (
|
||
<input
|
||
ref={ref}
|
||
className={cn(
|
||
inputClass,
|
||
sizeClasses[size],
|
||
!fullWidth && 'w-auto',
|
||
className
|
||
)}
|
||
{...props}
|
||
/>
|
||
)
|
||
}
|
||
)
|
||
|
||
Input.displayName = 'Input'
|
||
|
||
export default Input
|
||
|