| 'use client' |
|
|
| import { forwardRef, InputHTMLAttributes, LabelHTMLAttributes } from 'react' |
| import { cn } from '@/utils/helpers' |
|
|
| export interface InputProps extends InputHTMLAttributes<HTMLInputElement> { |
| label?: string |
| error?: string |
| helperText?: string |
| } |
|
|
| export const Input = forwardRef<HTMLInputElement, InputProps>( |
| ({ className, label, error, helperText, id, ...props }, ref) => { |
| const inputId = id || label?.toLowerCase().replace(/\s+/g, '-') |
|
|
| return ( |
| <div className="w-full"> |
| {label && ( |
| <label |
| htmlFor={inputId} |
| className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" |
| > |
| {label} |
| </label> |
| )} |
| <input |
| ref={ref} |
| id={inputId} |
| className={cn( |
| 'flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm', |
| 'placeholder:text-gray-400', |
| 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent', |
| 'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-gray-100', |
| 'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500', |
| error && 'border-red-500 focus:ring-red-500', |
| className |
| )} |
| aria-invalid={error ? 'true' : 'false'} |
| aria-describedby={error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined} |
| {...props} |
| /> |
| {error && ( |
| <p id={`${inputId}-error`} className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert"> |
| {error} |
| </p> |
| )} |
| {helperText && !error && ( |
| <p id={`${inputId}-helper`} className="mt-1 text-sm text-gray-500 dark:text-gray-400"> |
| {helperText} |
| </p> |
| )} |
| </div> |
| ) |
| } |
| ) |
|
|
| Input.displayName = 'Input' |
|
|
| |
