✨ Extractable prop types

[itsezc]

Description

Given the following:

const Button = style.button(
    'font:semibold rounded',
    {
        intent: {
            // <Button $intent="primary">
            primary: 'bg:blue-50 fg:white bg:blue-60:hover',
            // <Button $intent="secondary">
            secondary: 'bg:white fg:gray-80 b:gray-40 bg:gray-50:hover',
        },
        size: {
            // <Button $size="sm">
            sm: 'font:20 py:1 px:2',
            // <Button $size="md">
            md: 'font:16 py:2 px:4'
        }
    },
    // <Button $intent="primary" $size="md"> -> <button class="uppercase">
    { intent: 'primary', size: 'md', $: 'uppercase' },
    // <Button $color="blue"> -> <button class="bg:blue-40 bg:blue-50:hover">
    ({ $color }) => `bg:${$color}-40 bg:${$color}-50:hover`
)

I'd like the following to be extractable from my declaration:

interface ButtonProps {
     intent: 'primary' | 'secondary';
     size: 'sm' | 'md';
}

This is required when using Master style element alongside Storybook, React Aria as well as other tools / libs, where the underlying style components props need to be passed (as in CVA with their VariantProps feature). See: https://github.com/joe-bell/cva/issues/44#issuecomment-1280198067 - this is the recommend approach.

So the API could perhaps be similar

Example:

import { element, VariantProps } from '@master/style-element.react';

const CoreButton = element.button(...);

interface IButtonProps extends VariantProps<typeof CoreButton> {
    label: string;
}