Add a generic to useMultiStyleConfig theme helper

[isBatak]

Description

Developer should be able do define multi-style parts types for the custom components.

For example:

export type AccordionMultiStyleConfig = Record<typeof accordionAnatomy.__type, SystemStyleObject>;

const styles = useMultiStyleConfig('Accordion', props) as AccordionMultiStyleConfig;

<chakra.div __css={styles.container} />

styles.container is autocompleted.

Problem Statement/Justification

Right now we have to assert the type.

const styles = useMultiStyleConfig('Accordion', props) as AccordionMultiStyleConfig;

This is not safe.

Proposed Solution or API

Add support for generic like this:

const styles = useMultiStyleConfig<AccordionMultiStyleConfig>('Accordion', props);

or create a type with all of the multi-style types and use it internally.

type MultiStyleConfig = {
 'Accordion':  typeof accordionAnatomy.__type;
}

export function useMultiStyleConfig<ThemeKey extends keyof MultiStyleConfig>(
  themeKey: ThemeKey,
) {
  return {} as Record<
    MultiStyleConfig[ThemeKey],
    string
  >
}

Alternatives

No response

Additional Information

No response