implement FormField component — label, input, hint, and error group

[daatsuka]

This PR adds the FormField component in frontend/src/components/ui/FormField.tsx and re-exports it (along with FormFieldProps) from the barrel file index.ts. The FormField function accepts a label, name, optional hint, optional error, and a single child element, then uses React.cloneElement to inject id, aria-describedby, and aria-invalid onto the child so the surrounding label and descriptors are wired up for accessibility without the consumer having to manage those attributes manually. When an error string is present the hint is hidden and a danger-colored error row (with an alert-circle Icon) takes its place; when no error exists but a hint is provided, the hint renders beneath the input. The clsx package was added as a new dependency to handle conditional className merging inside the wrapper <div>.

The design keeps FormField intentionally agnostic about which input component it wraps — it only requires a single React.ReactElement child, and the child's type is declared as React.ReactElement<Record<string, unknown>> to satisfy React 19 / TypeScript strict mode without importing every possible input component type. This means the same FormField works around <InputField>, a plain <input>, or any future select/textarea component with zero coupling. The aria-describedby pointer is computed once at the top of the function (hintId / errorId) and conditionally passed through cloneElement, so there is exactly one source of truth for which descriptor element is visible versus referenced.

I verified this locally by running npm run build inside frontend/ to confirm the TypeScript compilation succeeds with the updated ReactElement generic, checked that clsx resolves correctly in the lockfile, and confirmed no runtime errors when rendering FormField with and without the error and hint props in the dev server.

Closes #31

[ExcelDsigN-tech]

Kindly resolve the merge conflicts