@Composable
fun CircleOtpView() {
    var otpStr by remember {
        mutableStateOf("")
    }
    var isError by remember {
        mutableStateOf(false)
    }
    OtpView(
        modifier = Modifier.width(240.dp),
        otpStr = otpStr,
        isError = isError,
        shape = PinShape.CircleShape,
        numberOfFields = 4
    ) { otp ->
        otpStr = otp
        if (otpStr.length == 4) {
            // Completely filled
            isError = otpStr != "1234"
            if (isError) {
                otpStr = ""
            }
        }

        if (isError && otpStr.isNotEmpty()) {
            isError = false
        }
    }
}

class LineShape(private val strokeWidth: Float): PinShape {
      override fun drawShape(size: Size): Path {
         return Path().apply {
             reset()
             addRect(Rect(0f, size.height - (strokeWidth / 2), size.width, size.height))
             close()
         }
      }
}

@Composable
fun PinField(
    modifier = Modifier,
    shape: PinShape,
    .
    .
    .
) {
    Box(
        modifier = modifier
            .width(width)
            .fillMaxHeight()
            .drawBehind {
                drawPath(
                    path = shape.drawShape(this.size),
                    .
                    .
                )
            }
            .clickable {
                onClick(index)
            },
    ) {
        ....
    }
}