What is the reason behind the two different APIs returned by tv depending if there are slots or not?

[sebald]

Hey,

I just stumpled over this. TypeScript warned me, but I was still confused why there is a difference between the tv result when usind slots or not.

Without slots:

const button = tv({
  base: "...",
  variants: {
    color: {
      primary: "...",
      secondary: "...",
      success: "...",
    },
  },
});

button({ color: "secondary" }); // returns a string

Using slots:

const list = tv({
  slots: {
    base: "...",
    item: "...",
  },
  variants: {
    style: {
      none: {
        base: "...",
        item: "...",
      },
      disc: {
        base: "...",
        item: "...",
      },
    },
  },
});

const {
  base,
  item
} = list({ style: "none" }); // `base` and `item` are functions

Why does the second example not return a object in the form of { [name:string]: string }? In the above case something like:

{
  base: "<list of classnames>"
  item: "<list of classnames>"
}

Is it to have a similar usage behavior when applying it to a className?

<div className={button()}/>
<div className={base()}/>

The difference is that you can pass variants to the first, but not to the second one 🤔

---

PS: Thanks for creating this awesome library ❤️

[jrgarciadev]

Hey @sebald the difference is intended since the idea when you use slots is to control all the slots on top of the same variants that's why you can only pass the variants to the main tv function and not to the returned ones.

you can see more information about slots here

https://www.tailwind-variants.org/docs/slots

https://www.tailwind-variants.org/docs/api-reference

Edit:

Regarding why we return functions when using slots instead of the string result is because the idea is that you can still modify the slot by passing a custom class/className to the slot function

Here's an example

https://github.com/nextui-org/nextui/blob/feat/v2/packages/components/avatar/src/use-avatar.ts#L185

[sebald]

Ah! Makes perfect sense, thanks!