Handle responsivness to avoid flickering of the ui

For our typography components, we want to allow the user to adjust the font size based on the screen size.

NOTE

This should not be used excessively. As you'll see, we use generateSafelist - safelist, which forces Tailwind to recognize all possible CSS class combinations for variants and compoundVariants, ensuring they are included in the final build.

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

type ComposeType = {
  "slots": ["root", "label"],
  variants: {
    variant: ["red", "blue"],
    size: ["sm", "xl"]
  },
  props: { 
    isDisabled: boolean,
  },
  screens: []
}

export const simpleVariants = compose<ComposeType>({
    slots: {
        "root": /** @tw */ "p-4",
        "label": "text-red-500"
    },
    variants: {
        variant: {
            "red": {
                root: "bg-red-500",
                label: "text-white"
            },
            "blue": "bg-blue-500"
        },
        size: {  
            "sm": {  
                label: "text-sm border"
            },  
            "xl": {  
                label: "text-2xl border-2"
            } 
        }
    },
    defaultVariants: {
        variant: "red"
    },
    compoundVariants: [
      {
        conditions: {
          isDisabled: true,
          variant: ["blue", "red"] 
        },
        classes: "bg-purple-500"
      }
    ]
    responsiveVariants: ["size"], 
})

// 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({
        variant: props.variant,
        isDisabled: props.isDisabled || 100 > 0 
    })}>
        <div className={label({
            variant: props.variant,
            size: {  
                // default value like mobile to up those are tailwind breakpoints
                initial: "sm",  
                "lg": "xl"
            } 
        })}>
            Hello
        </div>
    </div>
  );
};