Making variants optional or required based on presence in defaultVariants

[nayaabkhan]

Hi! Thanks for a great tool-set.

I've been deep into exploring the APIs and stumbled upon something that kinda feels abnormal.

Say:

export const heading = recipe({
  variants: {
    weight: {
      bold: atoms({ fontWeight: 'bold' }),
      semibold: atoms({ fontWeight: 'semibold' }),
    },
    size: {
      '1': atoms({ fontSize: 36 }),
      '2': atoms({ fontSize: 28 }),
      '3': atoms({ fontSize: 24 }),
    },
  },

  defaultVariants: {
    weight: 'bold',
  },
})

export type HeadingVariants = RecipeVariants<typeof heading>

I expected HeadingVariants to have weight as optional because a default is provided, but size to be required:

type HeadingVariants = {
  weight?: 'bold' | 'semibold'
  size: '1' | '2' | '3'
};

But we have all fields optional:

type HeadingVariants = {
  weight?: 'bold' | 'semibold'
  size?: '1' | '2' | '3'
};

• Is it something by design or not trivial to do with TypeScript?
• Is there a workaround/recommendation on how to achieve the expected outcome?

Thank a lot, in advance.

[graup]

It seems to me that this is by design. Variants are always optional – if not set, simply no extra style is added. If you want to make it required, just change the variants type, e.g. something like this (untested):

type OptionalHeadingVariants = RecipeVariants<typeof heading>;
export type HeadingVariants = OptionalHeadingVariants & Required<Pick<OptionalHeadingVariants, 'size'>>;

[HeartSquared]

Just tested this and the suggestion actually doesn't work:

[graup]

@HeartSquared coule you show the rest of your code? Maybe as a Typescript Playground link?