| '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-current mb-1" |
| > |
| {label} |
| </label> |
| )} |
| <input |
| ref={ref} |
| id={inputId} |
| className={cn( |
| 'clay-input clay-number', |
| 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-current/70"> |
| {helperText} |
| </p> |
| )} |
| </div> |
| ) |
| } |
| ) |
|
|
| Input.displayName = 'Input' |
