'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function TextField({ label, value = '', onChange, required, maxLength, helpText, error, }) {
    const charCount = value.length;
    const hasError = !!error || (maxLength !== undefined && charCount > maxLength);
    return (_jsxs("div", { children: [_jsxs("label", { className: "mb-1 flex items-baseline justify-between text-sm font-medium", children: [_jsxs("span", { children: [label, required && _jsx("span", { className: "ml-0.5 text-[var(--destructive)]", children: "*" })] }), maxLength !== undefined && (_jsxs("span", { className: `text-xs ${hasError ? 'text-[var(--destructive)]' : 'text-[var(--muted-foreground)]'}`, children: [charCount, "/", maxLength] }))] }), _jsx("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), required: required, maxLength: maxLength, className: `w-full rounded-md border bg-[var(--input-background)] px-3 py-2 text-sm transition-colors outline-none focus:ring-2 focus:ring-[var(--ring)] ${hasError ? 'border-[var(--destructive)]' : 'border-[var(--border)]'}` }), helpText && !error && (_jsx("p", { className: "mt-1 text-xs text-[var(--muted-foreground)]", children: helpText })), error && _jsx("p", { className: "mt-1 text-xs text-[var(--destructive)]", children: error })] }));
}
//# sourceMappingURL=TextField.js.map