[Feature Request] Support slot customizing within compoundVariants

[kurateh]

Is your feature request related to a problem? Please describe.

related issue: #1692

Ex) I want to add xl size for Input. So...

import { Input as _Input, extendVariants } from "@nextui-org/react";

export const Input = extendVariants(_Input, {
  variants: {
    size: {
      xl: {
        inputWrapper: "h-unit-14 min-h-unit-14 rounded-large",
        input: "text-large",
        clearButton: "text-large",
      },
    },
  },
});

After looking at style source of Input, I realized that I needed to set multiple compountVariants to get the input to look right.

So I tried:

import { Input as _Input, extendVariants } from "@nextui-org/react";

export const Input = extendVariants(_Input, {
  variants: {
    size: {
      xl: {
        inputWrapper: "h-unit-14 min-h-unit-14 rounded-large",
        input: "text-large",
        clearButton: "text-large",
      },
    },
  },
compoundVariants: [
    {
      radius: "full",
      size: "xl",
      class: {
        inputWrapper: "px-6", // ERROR: Type '{ inputWrapper: string; }' is not assignable to type 'ClassNameValue'.
      },
    }
  ]
});

But type of compoundVariants[number]["class"] cannot be object, I encountered a type error.

In the example above, the px of inputRapper may be trivial, but for the label, the UI is significantly warped.

It would be nice to be able to customize slots within compoundVariants.

Or is there another way to do this that I'm not aware of?

Describe the solution you'd like

import { Input as _Input, extendVariants } from "@nextui-org/react";

export const Input = extendVariants(_Input, {
  variants: {
    size: {
      xl: {
        inputWrapper: "h-unit-14 min-h-unit-14 rounded-large",
        input: "text-large",
        clearButton: "text-large",
      },
    },
  },
compoundVariants: [
    {
      radius: "full",
      size: "xl",
      class: {
        inputWrapper: "px-6", // <--
      },
    }
  ]
});

I expect to be able to customize the slot within compoundVariants.

Describe alternatives you've considered

I can do this:

<Input
  classNames={{
    inputWrapper: "px-6"
  }}
/>

But in my case, I think it's better to use extendVariants.

Screenshots or Videos

No response

[linear[bot]]

ENG-597 [Feature Request] Support slot customizing for compoundVariants

[rettimo]

I have the same problem with any compoundVariants. It just doesn't apply the styles. Any updates on this?

[slimshreydy]

Same issue here -- at least make a note in the docs saying this isn't supported@

[klyecony]

Is it being worked on here?