Blame · input.tsx

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