Specific responsive variants are not working

[ruijdacd]

Describe the bug Defining a responsive variant for specific variants using the object syntax (described on https://github.com/nextui-org/tailwind-variants/pull/24) isn't returning the correct types nor is it returning the expected classes.

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/p/sandbox/competent-ben-i7mvx9
2. Open components/button.styles.ts file where the responsive variants are configured for the size variant only
3. Open pages/index.tsx file to see usage of component and the types of the variants (extracted using VariantProps on components/button.tsx file)
4. See that the "Responsive button" has type errors on the size prop and that the classes have not been injected into the <button> element.

Expected behavior The types should be correctly asserted based on the configuration the developer has instructed for each variant and the classes should be extracted according to the same configuration.

Additional context It seems that the transformer has this feature working (according to the PR mentioned above), but the tv API does not seem to have this feature implemented just yet.

[jrgarciadev]

Hi @ruijdacd the example has some implementation issues, here's the fixed one: https://codesandbox.io/p/sandbox/competent-ben-i7mvx9?file=README.md

The responsiveVariants prop only accepts true/false or the breakpoints you want to have available for responsive variants:

example:

{
  responsiveVariants: true // ['xs', 'sm', 'md'] specific screens 
}

https://codesandbox.io/p/sandbox/sleepy-greider-ymgtpl?file=%2Fcomponents%2Fbutton.styles.ts&selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A29%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A25%7D%5D

[ruijdacd]

@jrgarciadev Is the object syntax described on #24 not going to be implemented on the tv API? I see that this feature is implemented and tested on the transformer already, along with being showcased on the PR.

Is it not in the plans to finalize the implementation of this feature? I think this would make tailwind-variants the definite package to use for most developers as it would allow for more granular control over responsive variants.

[ruijdacd]

@jrgarciadev would you mind taking another look at this? I think my report was misunderstood.

The feature I'm talking about is already present and tested on the transformer but the tv API does not support it yet.

Could you let me know if that's on purpose or if there are plans to implement it? I would be happy to move forward with my contribution for this to come to life.

[mverissimo]

@jrgarciadev, is there any chance this will be implemented soon? This a handy feature, to reduce bundle and increase DX, sometimes some variants are not responsive.