diff --git a/reflex/components/radix/themes/components/__init__.py b/reflex/components/radix/themes/components/__init__.py index 794dee274..36a32a761 100644 --- a/reflex/components/radix/themes/components/__init__.py +++ b/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 diff --git a/reflex/components/radix/themes/components/radiogroup.py b/reflex/components/radix/themes/components/radiogroup.py index 78c29c070..889e40fb1 100644 --- a/reflex/components/radix/themes/components/radiogroup.py +++ b/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, + ) diff --git a/reflex/components/radix/themes/components/radiogroup.pyi b/reflex/components/radix/themes/components/radiogroup.pyi index 658c228c6..67693570d 100644 --- a/reflex/components/radix/themes/components/radiogroup.pyi +++ b/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. + """ + ...