radiogroup high level api (#2401)

reflex/components/radix/themes/components/__init__.py

@@ -49,7 +49,7 @@ from .iconbutton import IconButton
 from .icons import Icon
 from .inset import Inset
 from .popover import PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger
-from .radiogroup import RadioGroupItem, RadioGroupRoot
+from .radiogroup import HighLevelRadioGroup, RadioGroupItem, RadioGroupRoot
 from .scrollarea import ScrollArea
 from .select import (
     HighLevelSelect,
@@ -163,6 +163,7 @@ popover_close = PopoverClose.create
 # Radio Group
 radio_group_root = RadioGroupRoot.create
 radio_group_item = RadioGroupItem.create
+radio_group = HighLevelRadioGroup.create
 
 # Scroll Area
 scroll_area = ScrollArea.create

reflex/components/radix/themes/components/radiogroup.py

@@ -1,14 +1,21 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict, Literal
+from typing import Any, Dict, List, Literal
 
+import reflex as rx
+from reflex.components.component import Component
+from reflex.components.radix.themes.layout.flex import Flex
+from reflex.components.radix.themes.typography.text import Text
 from reflex.vars import Var
 
 from ..base import (
     CommonMarginProps,
     LiteralAccentColor,
+    LiteralSize,
     RadixThemesComponent,
 )
 
+LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
+
 
 class RadioGroupRoot(CommonMarginProps, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
@@ -73,3 +80,60 @@ class RadioGroupItem(CommonMarginProps, RadixThemesComponent):
 
     # When true, indicates that the user must check the radio item before the owning form can be submitted.
     required: Var[bool]
+
+
+class HighLevelRadioGroup(RadioGroupRoot):
+    """High level wrapper for the RadioGroup component."""
+
+    # The items of the radio group.
+    items: Var[List[str]]
+
+    # The direction of the radio group.
+    direction: Var[LiteralFlexDirection] = Var.create_safe("column")
+
+    # The gap between the items of the radio group.
+    gap: Var[LiteralSize] = Var.create_safe("2")
+
+    # The size of the radio group.
+    size: Var[Literal["1", "2", "3"]] = Var.create_safe("2")
+
+    @classmethod
+    def create(cls, items: Var[List[str]], **props) -> Component:
+        """Create a radio group component.
+
+        Args:
+            items: The items of the radio group.
+            **props: Additional properties to apply to the accordion item.
+
+        Returns:
+            The created radio group component.
+        """
+        direction = props.pop("direction", "column")
+        gap = props.pop("gap", "2")
+        size = props.pop("size", "2")
+
+        def radio_group_item(value: str) -> Component:
+            return Text.create(
+                Flex.create(
+                    RadioGroupItem.create(value=value),
+                    value,
+                    gap="2",
+                ),
+                size=size,
+                as_="label",
+            )
+
+        if isinstance(items, Var):
+            child = [rx.foreach(items, radio_group_item)]
+        else:
+            child = [radio_group_item(value) for value in items]  #  type: ignore
+
+        return RadioGroupRoot.create(
+            Flex.create(
+                *child,
+                direction=direction,
+                gap=gap,
+            ),
+            size=size,
+            **props,
+        )

reflex/components/radix/themes/components/radiogroup.pyi

@@ -7,9 +7,20 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Any, Dict, Literal
+from typing import Any, Dict, List, Literal
+import reflex as rx
+from reflex.components.component import Component
+from reflex.components.radix.themes.layout.flex import Flex
+from reflex.components.radix.themes.typography.text import Text
 from reflex.vars import Var
-from ..base import CommonMarginProps, LiteralAccentColor, RadixThemesComponent
+from ..base import (
+    CommonMarginProps,
+    LiteralAccentColor,
+    LiteralSize,
+    RadixThemesComponent,
+)
+
+LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
 
 class RadioGroupRoot(CommonMarginProps, RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
@@ -438,3 +449,242 @@ class RadioGroupItem(CommonMarginProps, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+class HighLevelRadioGroup(RadioGroupRoot):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        items: Optional[Union[Var[List[str]], List[str]]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+                Literal["row", "column", "row-reverse", "column-reverse"],
+            ]
+        ] = None,
+        gap: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        high_contrast: Optional[Union[Var[bool], bool]] = None,
+        value: Optional[Union[Var[str], str]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        name: Optional[Union[Var[str], str]] = None,
+        required: Optional[Union[Var[bool], bool]] = None,
+        orientation: Optional[
+            Union[
+                Var[Literal["horizontal", "vertical"]],
+                Literal["horizontal", "vertical"],
+            ]
+        ] = None,
+        loop: Optional[Union[Var[bool], bool]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_value_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "HighLevelRadioGroup":
+        """Create a radio group component.
+
+        Args:
+            items: The items of the radio group.
+            items: The items of the radio group.
+            direction: The direction of the radio group.
+            gap: The gap between the items of the radio group.
+            size: The size of the radio group: "1" | "2" | "3"
+            variant: The variant of the radio group
+            color: The color of the radio group
+            high_contrast: Whether to render the radio group with higher contrast color against background
+            value: The controlled value of the radio item to check. Should be used in conjunction with onValueChange.
+            default_value: The initial value of checked radio item. Should be used in conjunction with onValueChange.
+            disabled: Whether the radio group is disabled
+            name: The name of the group. Submitted with its owning form as part of a name/value pair.
+            required: Whether the radio group is required
+            orientation: The orientation of the component.
+            loop: When true, keyboard navigation will loop from last item to first, and vice versa.
+            m: Margin: "0" - "9"
+            mx: Margin horizontal: "0" - "9"
+            my: Margin vertical: "0" - "9"
+            mt: Margin top: "0" - "9"
+            mr: Margin right: "0" - "9"
+            mb: Margin bottom: "0" - "9"
+            ml: Margin left: "0" - "9"
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: Additional properties to apply to the accordion item.
+
+        Returns:
+            The created radio group component.
+        """
+        ...