Split your component into smaller parts

Lets say we want a label where its design react base on parent configuration.

import { compose, VariantProps } from "@busbud/tailwind-buddy";

type ComposeType = {
  "slots": ["root", "label"], 
  variants: {},
  props: {},
  screens: []
}

export const simpleVariants = compose<ComposeType>({
    slots: {
        "root": /** @tw */ "p-4", 
        "label": "text-red-500"
    },
    variants: {},
    defaultVariants: {}
})

// export type so we can use it in the component after
export type SimpleProps = VariantProps<ComposeType["variants"]> & ComposeType["props"];

import { simpleVariants, SimpleProps } from "./Simple.variants.ts"

export const Simple: React.FC<SimpleProps> = (props) => {
  const { slots: { root, label } } = simpleVariants;
  return (
    <div className={root()}>
        <div className={label()}>
            Hello 
        </div>
    </div>
  );
};