Wrap Radix Radio Cards (New Component)

[Alek99]

https://www.radix-ui.com/themes/docs/components/radio-cards

[emmakodes]

I also tried doing a fast one on this component. You can review it before I make a PR:

import reflex as rx
from typing import Literal
from reflex.components.component import ComponentNamespace
from reflex.vars import Var
from reflex.components.radix.themes.base import RadixThemesComponent
from typing import Union

color_literal = Literal["gray", "gold", "bronze", "brown", "yellow", "amber", "orange", "tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "lime", "mint", "sky"]


class RadioCardsRoot(RadixThemesComponent):
    """Contains all the parts of CheckboxGroup.Root."""

    tag = "RadioCards.Root"

    size: Var[Literal["1", "2", "3"]]

    variant: Var[Literal["surface", "classic"]]

    color: Var[color_literal]

    high_contrast: Var[bool]

    columns: Var[Union[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]]]

    gap: Var[Union[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]]]

    default_value: Var[str]

    value: Var[str]

    name:Var[str]

    disabled: Var[bool]

    required: Var[bool]

    orientation: Var[Literal["horizontal", "vertical", "undefined"]]

    dir: Var[Literal["ltr", "rtl"]]

    loop: Var[bool]

    on_value_change: rx.EventHandler[lambda e0: [e0]]

    
class RadioCardsItem(RadixThemesComponent):
    tag = "RadioCards.Item"

    value:Var[str]

    disabled: Var[bool]

    required: Var[bool]

class RadioCards(ComponentNamespace):
    root = staticmethod(RadioCardsRoot.create)
    item = staticmethod(RadioCardsItem.create)


radiocards = RadioCards()

[emmakodes]

and this is how to use the component:

def index() -> rx.Component:
    return rx.flex(
        radiocards.root(
            radiocards.item(
                rx.text(
                    "8-core CPU"
                ),
                value="1",
            ),
            size="1",
            loop=True,
            # color="gold"
        ),
        radiocards.root(
            radiocards.item(
                rx.text(
                    "8-core CPU"
                ),
                value="1",
            ),
            size="2",
        ),
        radiocards.root(
            radiocards.item(
                rx.text(
                    "8-core CPU"
                ),
                value="1",
            ),
            size="3",
        ),
        align="center",
        gap="3"
    )