Controlling Tabs Programmatically

[discoverlance-com]

In the issue, #1105 , it was resolved that we can use the value property and onValueChange function to set control the tabs.

What about programmatically controlling the <TabTrigger>? I have a component that's using steps for a form and I want to use tabs component to organise my form steps. But I am not able to programmatically control the tab trigger to set properties like the disabled. I don't want the trigger to be clickable till say, the user has completed the next step, then I can programmatically set it's disabled to false and also change the value (which we are currently able to do).

For now, I had to use something like this:

const [currentStep] = useStep(3);
...
{steps.map((step) => (
              <TabsTrigger
                key={step.id}
                value={step.id.toString()}
                disabled={
                  step.id === 1
                    ? false
                    : step.id === 2
                    ? currentStep === 1
                      ? true
                      : false
                    : currentStep !== 3
                    ? true
                    : false
                }
              >
                {step.name}
              </TabsTrigger>
            ))}

But this method feels a bit hacky because,
It only works if I know the predefined number of steps and if it were say, 5 or more, I'll have to continually use the ternary till the last step which might end up being messy.