Nested Slots Support

[yaman3bd]

I have been using tv for styling typography elements and found it very helpful. However, I noticed that the library only supports one level of slots, which limits its organizational capabilities. As a result, how about adding support for nested slots?
I think it would enhance flexibility and give a better DX.

Nested slots can help keep the typography styles clean and organized, making it easier to reuse styles across different components. For example, I may want to apply the same typography styles to headings and subheadings, but with different sizes. With nested slots, I can create a heading slot that includes h1, h2, h3, and so on, each with its own set of styles.

Here is an example of how the syntax for nested slots could look like:

const typography = tv({
  base: "text-black",
  slots: {
    heading: {
      h1: "text-6.5xl",
      h2: "text-5.5xl",
      h3: "text-4.5xl",
      h4: "text-3xl",
      h5: "text-2xl"
    },
    body: {
      lg: "text-lg",
      base: "text-base",
      md: "text-md",
      sm: "text-sm"
    }
  },
  variants: {
    weight: {
      bold: "font-bold",
      normal: "font-normal",
      light: "font-light",
      medium: "font-medium"
    }
  }
});

This way, I can easily access the h1 style using typography.slots.heading.h1() in my components, making it easier to apply the same styles across the library.

I do not want to make styles for the headings, titles, paragraphs, etc...
like:

const heading = tv({
  base: 'text-black',
  variants: {
    level: {
      h1: 'text-6.5xl',
      h2: 'text-5.5xl',
      h3: 'text-4.5xl',
      h4: 'text-3xl',
      h5: 'text-2xl'
    },
    weight: {
      bold: 'font-bold',
      normal: 'font-normal',
      light: 'font-light',
      medium: 'font-medium'
    }
  }
});

const subheading = tv({
  base: 'text-black',
  variants: {
    size: {
      lg: "text-lg",
      base: "text-base",
      md: "text-md",
      sm: "text-sm"
    },
    weight: {
      bold: 'font-bold',
      normal: 'font-normal',
      light: 'font-light',
      medium: 'font-medium'
    }
  }
});

[sandros94]

Same applies when nesting components in ui libraries. Supporting nested slots would let us expose in one go a child component's configs into the parent component.

This way it would be possible to customize a particular button only when it is inside the login form compared to a checkout form