Narrowing DeepKeys to only allow boolean values

[LeCarbonator]

Hello! I'm currently refactoring to move to tanstack form, and I'm loving it so far.

However, I've encountered a lot of trouble while trying to create a template input to use for my forms.

This is what is currently there (with Bootstrap):

<myForm.Field name={`fooProp.${props.fooId}.someBool`} validators={ /* ... */ }>
        {field => (
          <Form.Group>
            <Form.Check
              onBlur={field.handleBlur}
              onChange={e => field.handleChange(e.target.checked)}
              label="someBool"
              checked={field.state.value}
            />
          </Form.Group>
        )}
      </myForm.Field>

There will be even more to this, such as error alerts for invalid selections etc. I would like to have a template that I can wrap it in, and it does all the styling. Best case scenario, it would look something like:

// Main.tsx
<MyCheckbox form={myForm} name={`fooProp.${props.fooId}.someBool`} validators={ /* ... */ }/>

// MyCheckbox.tsx
<props.form.Field name={props.name} validators={props.validators}>
    {field => { /* ... */ return <></>;}}
</props.form.Field>

However, there is a type constraint I would like to add to this: only name of type boolean should be allowed when creating a MyCheckbox. I have not been able to figure it out yet, but here's my attempt:

// Main.tsx
<myForm.Field name={`fooProp.${props.fooId}.someBool`} validators={ /* ... */ }>
    {MyCheckbox}
</myForm.Field>

// MyCheckbox.tsx
export function MyCheckbox<
  TParentData,
  TName extends DeepKeys<TParentData>,
  TValue extends DeepValue<TParentData, TName> extends boolean ? DeepValue<TParentData, TName> : never,
>(field: FieldApi<TParentData, TName, undefined, undefined, TValue>) {
  return (
    <Form.Group>
      <Form.Check
        onBlur={field.handleBlur}
        onChange={e => field.handleChange(e.target.checked as Updater<TValue>)}
        label="someBool"
        checked={field.state.value}
      />
    </Form.Group>
  );
}

As you can probably tell, this is very rigid and doesn't really allow for more expansion and additional props, as it cannot be passed as <MyCheckbox/>.

The main issue is that TValue is inferred when it should actually narrow the other two values. How could I achieve this?

Thanks in advance.

[LeCarbonator]

After checking on the Discord, there is an answer provided by Leonardo that references PR #825

The type narrowing the keys

A component utilizing it