web/packages/design-system/lib/components/Form/FormInput/input.ts

import type { RegisterOptions } from 'react-hook-form'
import type { IntlShape } from 'react-intl'

import type { MaterialIconProps } from '../../Icons/MaterialIcon'
import type { InputProps } from '../../Input/types'

export interface FormInputProps extends InputProps {
  /** Helper text displayed below the input (hidden when there's an error) */
  description?: string
  /** Icon to display with the description text. Defaults to 'info' */
  descriptionIcon?: MaterialIconProps['icon']
  /** Field name for react-hook-form registration */
  name: string
  /** react-hook-form validation rules */
  registerOptions?: RegisterOptions
  /** Hide the error message (useful when showing errors elsewhere) */
  hideError?: boolean
  /** Custom formatter for error messages with i18n support */
  errorFormatter?: (intl: IntlShape, errorMessage?: string) => string
  /**
   * Visual validation state for the input.
   * - 'warning': Shows warning styling (yellow background, focus ring)
   * - Note: Error state is automatically derived from form validation
   */
  validationState?: 'warning'
}