glchat/web/src/components/ui/Field.tsx

import {
  useId,
  type InputHTMLAttributes,
  type ReactNode,
  type TextareaHTMLAttributes,
} from 'react';

interface FieldShellProps {
  label: string;
  hint?: string | undefined;
  error?: string | null | undefined;
  children: (ids: { id: string; describedBy: string | undefined }) => ReactNode;
}

/** Общая обёртка поля: label, подсказка и сообщение об ошибке. */
function FieldShell({ label, hint, error, children }: FieldShellProps) {
  const id = useId();
  const hintId = `${id}-hint`;
  const errorId = `${id}-error`;
  const describedBy =
    [hint === undefined ? null : hintId, error === null || error === undefined ? null : errorId]
      .filter((value): value is string => value !== null)
      .join(' ') || undefined;

  return (
    <div className="flex flex-col gap-1">
      <label className="text-sm font-medium text-fg" htmlFor={id}>
        {label}
      </label>
      {children({ id, describedBy })}
      {hint === undefined ? null : (
        <p id={hintId} className="text-xs text-fg-muted">
          {hint}
        </p>
      )}
      {error === null || error === undefined ? null : (
        <p id={errorId} className="text-xs text-danger" role="alert">
          {error}
        </p>
      )}
    </div>
  );
}

const controlClass =
  'w-full rounded-[var(--radius-md)] border border-border/60 bg-surface-2 px-3 py-2 text-fg placeholder:text-fg-muted/70 disabled:opacity-60';

export type InputFieldProps = {
  label: string;
  hint?: string | undefined;
  error?: string | null | undefined;
} & InputHTMLAttributes<HTMLInputElement>;

export function Field({ label, hint, error, className = '', ...rest }: InputFieldProps) {
  return (
    <FieldShell label={label} hint={hint} error={error}>
      {({ id, describedBy }) => (
        <input
          id={id}
          aria-describedby={describedBy}
          aria-invalid={error === null || error === undefined ? undefined : true}
          className={`${controlClass} ${className}`}
          {...rest}
        />
      )}
    </FieldShell>
  );
}

export type TextAreaFieldProps = {
  label: string;
  hint?: string | undefined;
  error?: string | null | undefined;
} & TextareaHTMLAttributes<HTMLTextAreaElement>;

export function TextAreaField({ label, hint, error, className = '', ...rest }: TextAreaFieldProps) {
  return (
    <FieldShell label={label} hint={hint} error={error}>
      {({ id, describedBy }) => (
        <textarea
          id={id}
          aria-describedby={describedBy}
          aria-invalid={error === null || error === undefined ? undefined : true}
          className={`${controlClass} ${className}`}
          {...rest}
        />
      )}
    </FieldShell>
  );
}

interface SelectFieldProps {
  label: string;
  hint?: string | undefined;
  value: string;
  onChange: (value: string) => void;
  options: { value: string; label: string }[];
  className?: string;
}

export function SelectField({
  label,
  hint,
  value,
  onChange,
  options,
  className = '',
}: SelectFieldProps) {
  return (
    <FieldShell label={label} hint={hint}>
      {({ id, describedBy }) => (
        <select
          id={id}
          aria-describedby={describedBy}
          className={`${controlClass} ${className}`}
          value={value}
          onChange={(event) => onChange(event.target.value)}
        >
          {options.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      )}
    </FieldShell>
  );
}