Radix 3.0 (#3159)

README.md

@@ -123,7 +123,7 @@ def index():
             rx.button("Generate Image", on_click=State.get_image, width="25em"),
             rx.cond(
                 State.processing,
-                rx.chakra.circular_progress(is_indeterminate=True),
+                rx.spinner(),
                 rx.cond(
                     State.complete,
                     rx.image(src=State.image_url, width="20em"),

integration/test_navigation.py

@@ -7,7 +7,7 @@
 
 from reflex.testing import AppHarness
 
-from .utils import poll_for_navigation
+from .utils import SessionStorage, poll_for_navigation
 
 
 def NavigationApp():
@@ -66,6 +66,10 @@ async def test_navigation_app(navigation_app: AppHarness):
     assert navigation_app.app_instance is not None, "app is not running"
     driver = navigation_app.frontend()
 
+    ss = SessionStorage(driver)
+    token = AppHarness._poll_for(lambda: ss.get("token") is not None)
+    assert token is not None
+
     internal_link = driver.find_element(By.ID, "internal")
 
     with poll_for_navigation(driver):

reflex/.templates/web/utils/state.js

@@ -691,8 +691,8 @@ export const getRefValue = (ref) => {
   if (ref.current.type == "checkbox") {
     return ref.current.checked; // chakra
   } else if (
-    ref.current.className?.includes("rt-CheckboxButton") ||
-    ref.current.className?.includes("rt-SwitchButton")
+    ref.current.className?.includes("rt-CheckboxRoot") ||
+    ref.current.className?.includes("rt-SwitchRoot")
   ) {
     return ref.current.ariaChecked == "true"; // radix
   } else if (ref.current.className?.includes("rt-SliderRoot")) {

reflex/__init__.py

@@ -81,6 +81,7 @@
     "select",
     "slider",
     "spacer",
+    "spinner",
     "stack",
     "switch",
     "table",

reflex/__init__.pyi

@@ -69,6 +69,7 @@ from reflex.components import section as section
 from reflex.components import select as select
 from reflex.components import slider as slider
 from reflex.components import spacer as spacer
+from reflex.components import spinner as spinner
 from reflex.components import stack as stack
 from reflex.components import switch as switch
 from reflex.components import table as table

reflex/components/radix/primitives/form.py

@@ -6,7 +6,7 @@
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.el.elements.forms import Form as HTMLForm
-from reflex.components.radix.themes.components.text_field import TextFieldInput
+from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.constants.event import EventTriggers
 from reflex.vars import Var
 
@@ -108,9 +108,9 @@ def create(cls, *children, **props):
                 f"FormControl can only have at most one child, got {len(children)} children"
             )
         for child in children:
-            if not isinstance(child, TextFieldInput):
+            if not isinstance(child, TextFieldRoot):
                 raise TypeError(
-                    "Only Radix TextFieldInput is allowed as child of FormControl"
+                    "Only Radix TextFieldRoot is allowed as child of FormControl"
                 )
         return super().create(*children, **props)
 

reflex/components/radix/primitives/form.pyi

@@ -10,7 +10,7 @@ from reflex.style import Style
 from typing import Any, Dict, Literal
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.el.elements.forms import Form as HTMLForm
-from reflex.components.radix.themes.components.text_field import TextFieldInput
+from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.constants.event import EventTriggers
 from reflex.vars import Var
 from .base import RadixPrimitiveComponentWithClassName

reflex/components/radix/themes/base.py

@@ -73,10 +73,17 @@ class CommonMarginProps(Component):
     ml: Var[LiteralSpacing]
 
 
+class RadixLoadingProp(Component):
+    """Base class for components that can be in a loading state."""
+
+    # If set, show an rx.spinner instead of the component children.
+    loading: Var[bool]
+
+
 class RadixThemesComponent(Component):
     """Base class for all @radix-ui/themes components."""
 
-    library = "@radix-ui/themes@^2.0.0"
+    library = "@radix-ui/themes@^3.0.0"
 
     # "Fake" prop color_scheme is used to avoid shadowing CSS prop "color".
     _rename_props: Dict[str, str] = {"colorScheme": "color"}

reflex/components/radix/themes/base.pyi

@@ -176,6 +176,84 @@ class CommonMarginProps(Component):
         """
         ...
 
+class RadixLoadingProp(Component):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        loading: Optional[Union[Var[bool], bool]] = 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,
+        **props
+    ) -> "RadixLoadingProp":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            loading: If set, show an rx.spinner instead of the component children.
+            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: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
 class RadixThemesComponent(Component):
     @overload
     @classmethod

reflex/components/radix/themes/color_mode.pyi

@@ -417,6 +417,7 @@ class ColorModeButton(Button):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
+        loading: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -507,6 +508,7 @@ class ColorModeButton(Button):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
+            loading: If set, show an rx.spinner instead of the component children.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

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

@@ -8,21 +8,29 @@
 from .callout import callout as callout
 from .card import card as card
 from .checkbox import checkbox as checkbox
+from .checkbox_cards import checkbox_cards as checkbox_cards
+from .checkbox_group import checkbox_group as checkbox_group
 from .context_menu import context_menu as context_menu
+from .data_list import data_list as data_list
 from .dialog import dialog as dialog
 from .dropdown_menu import dropdown_menu as dropdown_menu
 from .dropdown_menu import menu as menu
 from .hover_card import hover_card as hover_card
 from .icon_button import icon_button as icon_button
 from .inset import inset as inset
 from .popover import popover as popover
+from .progress import progress as progress
+from .radio_cards import radio_cards as radio_cards
 from .radio_group import radio as radio
 from .radio_group import radio_group as radio_group
 from .scroll_area import scroll_area as scroll_area
+from .segmented_control import segmented_control as segmented_control
 from .select import select as select
 from .separator import divider as divider
 from .separator import separator as separator
+from .skeleton import skeleton as skeleton
 from .slider import slider as slider
+from .spinner import spinner as spinner
 from .switch import switch as switch
 from .table import table as table
 from .tabs import tabs as tabs
@@ -41,7 +49,10 @@
     "callout",
     "card",
     "checkbox",
+    "checkbox_cards",
+    "checkbox_group",
     "context_menu",
+    "data_list",
     "dialog",
     "divider",
     "dropdown_menu",
@@ -51,12 +62,17 @@
     "inset",
     "menu",
     "popover",
+    "progress",
     "radio",
+    "radio_cards",
     "radio_group",
     "scroll_area",
+    "segmented_control",
     "select",
     "separator",
+    "skeleton",
     "slider",
+    "spinner",
     "switch",
     "table",
     "tabs",

reflex/components/radix/themes/components/badge.py

@@ -1,4 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Literal
 
 from reflex import el
@@ -20,7 +21,7 @@ class Badge(el.Span, RadixThemesComponent):
     variant: Var[Literal["solid", "soft", "surface", "outline"]]
 
     # The size of the badge
-    size: Var[Literal["1", "2"]]
+    size: Var[Literal["1", "2", "3"]]
 
     # Color theme of the badge
     color_scheme: Var[LiteralAccentColor]

reflex/components/radix/themes/components/badge.pyi

@@ -24,7 +24,9 @@ class Badge(el.Span, RadixThemesComponent):
                 Literal["solid", "soft", "surface", "outline"],
             ]
         ] = None,
-        size: Optional[Union[Var[Literal["1", "2"]], Literal["1", "2"]]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
         color_scheme: Optional[
             Union[
                 Var[

reflex/components/radix/themes/components/button.py

@@ -1,4 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
+
 from typing import Literal
 
 from reflex import el
@@ -8,13 +9,14 @@
     LiteralAccentColor,
     LiteralRadius,
     LiteralVariant,
+    RadixLoadingProp,
     RadixThemesComponent,
 )
 
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
 
-class Button(el.Button, RadixThemesComponent):
+class Button(el.Button, RadixLoadingProp, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
     tag = "Button"

reflex/components/radix/themes/components/button.pyi

@@ -14,12 +14,13 @@ from ..base import (
     LiteralAccentColor,
     LiteralRadius,
     LiteralVariant,
+    RadixLoadingProp,
     RadixThemesComponent,
 )
 
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
-class Button(el.Button, RadixThemesComponent):
+class Button(el.Button, RadixLoadingProp, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -169,6 +170,7 @@ class Button(el.Button, RadixThemesComponent):
         title: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
+        loading: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -262,6 +264,7 @@ class Button(el.Button, RadixThemesComponent):
             spell_check: Defines whether the element may be checked for spelling errors.
             tab_index: Defines the position of the current element in the tabbing order.
             title: Defines a tooltip for the element.
+            loading: If set, show an rx.spinner instead of the component children.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/checkbox_cards.py

@@ -0,0 +1,48 @@
+"""Components for the Radix CheckboxCards component."""
+
+from types import SimpleNamespace
+from typing import Literal, Union
+
+from reflex.vars import Var
+
+from ..base import LiteralAccentColor, RadixThemesComponent
+
+
+class CheckboxCardsRoot(RadixThemesComponent):
+    """Root element for a CheckboxCards component."""
+
+    tag = "CheckboxCards.Root"
+
+    # The size of the checkbox cards: "1" | "2" | "3"
+    size: Var[Literal["1", "2", "3"]]
+
+    # Variant of button: "classic" | "surface" | "soft"
+    variant: Var[Literal["classic", "surface"]]
+
+    # Override theme color for button
+    color_scheme: Var[LiteralAccentColor]
+
+    # Uses a higher contrast color for the component.
+    high_contrast: Var[bool]
+
+    # The number of columns:
+    columns: Var[Union[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]]]
+
+    # The gap between the checkbox cards:
+    gap: Var[Union[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]]]
+
+
+class CheckboxCardsItem(RadixThemesComponent):
+    """An item in the CheckboxCards component."""
+
+    tag = "CheckboxCards.Item"
+
+
+class CheckboxCards(SimpleNamespace):
+    """CheckboxCards components namespace."""
+
+    root = staticmethod(CheckboxCardsRoot.create)
+    item = staticmethod(CheckboxCardsItem.create)
+
+
+checkbox_cards = CheckboxCards()