| 1 | import { forwardRef } from "react"; |
| 2 | |
| 3 | export interface InputProps |
| 4 | extends React.InputHTMLAttributes<HTMLInputElement> { |
| 5 | label?: string; |
| 6 | hint?: string; |
| 7 | error?: string; |
| 8 | optional?: boolean; |
| 9 | } |
| 10 | |
| 11 | export const Input = forwardRef<HTMLInputElement, InputProps>( |
| 12 | function Input( |
| 13 | { label, hint, error, optional, className = "", style, ...props }, |
| 14 | ref |
| 15 | ) { |
| 16 | return ( |
| 17 | <div> |
| 18 | {label && ( |
| 19 | <label |
| 20 | className="block text-xs mb-1" |
| 21 | style={{ color: "var(--text-muted)" }} |
| 22 | > |
| 23 | {label} |
| 24 | {optional && ( |
| 25 | <span style={{ color: "var(--text-faint)" }}> (optional)</span> |
| 26 | )} |
| 27 | </label> |
| 28 | )} |
| 29 | <input |
| 30 | ref={ref} |
| 31 | className={`w-full px-2 py-1 text-sm focus:outline-none ${className}`} |
| 32 | style={{ |
| 33 | backgroundColor: "var(--bg-input)", |
| 34 | border: "1px solid var(--border)", |
| 35 | color: "var(--text-primary)", |
| 36 | ...style, |
| 37 | }} |
| 38 | {...props} |
| 39 | /> |
| 40 | {hint && !error && ( |
| 41 | <p className="text-xs mt-1" style={{ color: "var(--text-faint)" }}> |
| 42 | {hint} |
| 43 | </p> |
| 44 | )} |
| 45 | {error && ( |
| 46 | <p className="text-xs mt-1" style={{ color: "var(--error-text)" }}> |
| 47 | {error} |
| 48 | </p> |
| 49 | )} |
| 50 | </div> |
| 51 | ); |
| 52 | } |
| 53 | ); |
| 54 | |