diff --git a/reflex/components/markdown/markdown.py b/reflex/components/markdown/markdown.py index 4b9f28f9b..1c2b7746c 100644 --- a/reflex/components/markdown/markdown.py +++ b/reflex/components/markdown/markdown.py @@ -41,6 +41,7 @@ _REHYPE_PLUGINS = Var.create_safe([_REHYPE_KATEX, _REHYPE_RAW]) # These tags do NOT get props passed to them NO_PROPS_TAGS = ("ul", "ol", "li") + # Component Mapping @lru_cache def get_base_component_map() -> dict[str, Callable]: diff --git a/reflex/components/radix/themes/components/__init__.py b/reflex/components/radix/themes/components/__init__.py index cfce5889b..2a088f3bd 100644 --- a/reflex/components/radix/themes/components/__init__.py +++ b/reflex/components/radix/themes/components/__init__.py @@ -15,7 +15,7 @@ from .badge import Badge from .button import Button from .callout import CalloutIcon, CalloutRoot, CalloutText from .card import Card -from .checkbox import Checkbox +from .checkbox import Checkbox, HighLevelCheckbox from .contextmenu import ( ContextMenuContent, ContextMenuItem, @@ -108,6 +108,7 @@ card = Card.create # Checkbox checkbox = Checkbox.create +checkbox_hl = HighLevelCheckbox.create # Context Menu contextmenu_root = ContextMenuRoot.create diff --git a/reflex/components/radix/themes/components/checkbox.py b/reflex/components/radix/themes/components/checkbox.py index 19267bac1..15e48db77 100644 --- a/reflex/components/radix/themes/components/checkbox.py +++ b/reflex/components/radix/themes/components/checkbox.py @@ -1,12 +1,15 @@ """Interactive components provided by @radix-ui/themes.""" from typing import Any, Dict, Literal +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, - LiteralRadius, + LiteralSize, LiteralVariant, RadixThemesComponent, ) @@ -34,9 +37,6 @@ class Checkbox(CommonMarginProps, RadixThemesComponent): # Whether to render the button with higher contrast color against background high_contrast: Var[bool] - # Override theme radius for button: "none" | "small" | "medium" | "large" | "full" - radius: Var[LiteralRadius] - # Whether the checkbox is checked by default default_checked: Var[bool] @@ -65,3 +65,36 @@ class Checkbox(CommonMarginProps, RadixThemesComponent): **super().get_event_triggers(), "on_checked_change": lambda e0: [e0], } + + +class HighLevelCheckbox(Checkbox): + """A checkbox component with a label.""" + + @classmethod + def create( + cls, + text: str = "", + gap: Var[LiteralSize] = Var.create_safe("2"), + size: Var[LiteralCheckboxSize] = Var.create_safe("2"), + **props + ) -> Component: + """Create a checkbox with a label. + + Args: + text: The text of the label. + gap: The gap between the checkbox and the label. + size: The size of the checkbox. + **props: Additional properties to apply to the checkbox item. + + Returns: + The checkbox component with a label. + """ + return Text.create( + Flex.create( + Checkbox.create(size=size, **props), + text, + gap=gap, + ), + as_="label", + size=size, + ) diff --git a/reflex/components/radix/themes/components/checkbox.pyi b/reflex/components/radix/themes/components/checkbox.pyi index b8235d325..daf1d8db6 100644 --- a/reflex/components/radix/themes/components/checkbox.pyi +++ b/reflex/components/radix/themes/components/checkbox.pyi @@ -8,11 +8,14 @@ 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 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, - LiteralRadius, + LiteralSize, LiteralVariant, RadixThemesComponent, ) @@ -100,12 +103,6 @@ class Checkbox(CommonMarginProps, RadixThemesComponent): ] ] = None, high_contrast: Optional[Union[Var[bool], bool]] = None, - radius: Optional[ - Union[ - Var[Literal["none", "small", "medium", "large", "full"]], - Literal["none", "small", "medium", "large", "full"], - ] - ] = None, default_checked: Optional[Union[Var[bool], bool]] = None, checked: Optional[Union[Var[bool], bool]] = None, disabled: Optional[Union[Var[bool], bool]] = None, @@ -223,7 +220,6 @@ class Checkbox(CommonMarginProps, RadixThemesComponent): size: Button size "1" - "3" variant: Variant of button: "solid" | "soft" | "outline" | "ghost" high_contrast: Whether to render the button with higher contrast color against background - radius: Override theme radius for button: "none" | "small" | "medium" | "large" | "full" default_checked: Whether the checkbox is checked by default checked: Whether the checkbox is checked disabled: Whether the checkbox is disabled @@ -249,3 +245,223 @@ class Checkbox(CommonMarginProps, RadixThemesComponent): A new component instance. """ ... + +class HighLevelCheckbox(Checkbox): + @overload + @classmethod + def create( # type: ignore + cls, + *children, + as_child: Optional[Union[Var[bool], bool]] = None, + size: Optional[ + Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]] + ] = None, + variant: Optional[ + Union[ + Var[Literal["classic", "solid", "soft", "surface", "outline", "ghost"]], + Literal["classic", "solid", "soft", "surface", "outline", "ghost"], + ] + ] = 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, + default_checked: Optional[Union[Var[bool], bool]] = None, + checked: Optional[Union[Var[bool], bool]] = None, + disabled: Optional[Union[Var[bool], bool]] = None, + required: Optional[Union[Var[bool], bool]] = None, + name: Optional[Union[Var[str], str]] = None, + value: Optional[Union[Var[str], str]] = 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_checked_change: 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, + **props + ) -> "HighLevelCheckbox": + """Create a checkbox with a label. + + Args: + text: The text of the label. + gap: The gap between the checkbox and the label. + size: The size of the checkbox. + as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. + size: Button size "1" - "3" + variant: Variant of button: "solid" | "soft" | "outline" | "ghost" + color: Override theme color for button + high_contrast: Whether to render the button with higher contrast color against background + default_checked: Whether the checkbox is checked by default + checked: Whether the checkbox is checked + disabled: Whether the checkbox is disabled + required: Whether the checkbox is required + name: The name of the checkbox control when submitting the form. + value: The value of the checkbox control when submitting the form. + 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 checkbox item. + + Returns: + The checkbox component with a label. + """ + ...