reflex 0.4.9a2__py3-none-any.whl → 0.5.0__py3-none-any.whl

reflex/components/radix/primitives/form.py

@@ -4,10 +4,11 @@ from __future__ import annotations
 
 from typing import Any, Dict, Literal
 
-from reflex.components.component import Component, ComponentNamespace
+from reflex.components.component import 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.style import Style
 from reflex.vars import Var
 
 from .base import RadixPrimitiveComponentWithClassName
@@ -37,11 +38,13 @@ class FormRoot(FormComponent, HTMLForm):
             EventTriggers.ON_CLEAR_SERVER_ERRORS: lambda: [],
         }
 
-    def _apply_theme(self, theme: Component):
-        return {
-            "width": "260px",
-            **self.style,
-        }
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style({"width": "100%"})
 
 
 class FormField(FormComponent):
@@ -57,12 +60,13 @@ class FormField(FormComponent):
     # Flag to mark the form field as invalid, for server side validation.
     server_invalid: Var[bool]
 
-    def _apply_theme(self, theme: Component):
-        return {
-            "display": "grid",
-            "margin_bottom": "10px",
-            **self.style,
-        }
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style({"display": "grid", "margin_bottom": "10px"})
 
 
 class FormLabel(FormComponent):
@@ -72,13 +76,13 @@ class FormLabel(FormComponent):
 
     alias = "RadixFormLabel"
 
-    def _apply_theme(self, theme: Component):
-        return {
-            "font_size": "15px",
-            "font_weight": "500",
-            "line_height": "35px",
-            **self.style,
-        }
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style({"font_size": "15px", "font_weight": "500", "line_height": "35px"})
 
 
 class FormControl(FormComponent):
@@ -108,9 +112,9 @@ class FormControl(FormComponent):
                 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)
 
@@ -145,13 +149,13 @@ class FormMessage(FormComponent):
     # Forces the message to be shown. This is useful when using server-side validation.
     force_match: Var[bool]
 
-    def _apply_theme(self, theme: Component):
-        return {
-            "font_size": "13px",
-            "opacity": "0.8",
-            "color": "white",
-            **self.style,
-        }
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style({"font_size": "13px", "opacity": "0.8", "color": "white"})
 
 
 class FormValidityState(FormComponent):

reflex/components/radix/primitives/form.pyi

@@ -8,10 +8,11 @@ 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, ComponentNamespace
+from reflex.components.component import 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.style import Style
 from reflex.vars import Var
 from .base import RadixPrimitiveComponentWithClassName
 
@@ -95,6 +96,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
 
 class FormRoot(FormComponent, HTMLForm):
     def get_event_triggers(self) -> Dict[str, Any]: ...
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -273,6 +275,7 @@ class FormRoot(FormComponent, HTMLForm):
         ...
 
 class FormField(FormComponent):
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -355,6 +358,7 @@ class FormField(FormComponent):
         ...
 
 class FormLabel(FormComponent):
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -528,6 +532,7 @@ LiteralMatcher = Literal[
 ]
 
 class FormMessage(FormComponent):
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/primitives/progress.py

@@ -28,20 +28,24 @@ class ProgressRoot(ProgressComponent):
     # Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
     radius: Var[LiteralRadius]
 
-    def _apply_theme(self, theme: Component):
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
         if self.radius is not None:
             self.custom_attrs["data-radius"] = self.radius
 
-        self.style = Style(
+        return Style(
             {
                 "position": "relative",
                 "overflow": "hidden",
-                "background": "var(--gray-a3)",
+                "background": color("gray", 3, alpha=True),
                 "border_radius": "max(var(--radius-2), var(--radius-full))",
                 "width": "100%",
                 "height": "20px",
-                "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
-                **self.style,
+                "boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}",
             }
         )
 
@@ -65,22 +69,26 @@ class ProgressIndicator(ProgressComponent):
     # The color scheme of the progress indicator.
     color_scheme: Var[LiteralAccentColor]
 
-    def _apply_theme(self, theme: Component):
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
         if self.color_scheme is not None:
             self.custom_attrs["data-accent-color"] = self.color_scheme
 
-        self.style = Style(
+        return Style(
             {
                 "background_color": color("accent", 9),
                 "width": "100%",
                 "height": "100%",
-                f"transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
+                "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
                 "&[data_state='loading']": {
                     "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
                 },
                 "transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))",  # type: ignore
                 "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
-                **self.style,
             }
         )
 

reflex/components/radix/primitives/progress.pyi

@@ -95,6 +95,7 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
         ...
 
 class ProgressRoot(ProgressComponent):
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -180,6 +181,7 @@ class ProgressRoot(ProgressComponent):
         ...
 
 class ProgressIndicator(ProgressComponent):
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/primitives/slider.py

@@ -59,8 +59,13 @@ class SliderRoot(SliderComponent):
             "on_value_commit": lambda e0: [e0],  # trigger when thumb is released
         }
 
-    def _apply_theme(self, theme: Component):
-        self.style = Style(
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style(
             {
                 "position": "relative",
                 "display": "flex",
@@ -74,7 +79,6 @@ class SliderRoot(SliderComponent):
                     "width": "20px",
                     "height": "100px",
                 },
-                **self.style,
             }
         )
 
@@ -85,18 +89,20 @@ class SliderTrack(SliderComponent):
     tag = "Track"
     alias = "RadixSliderTrack"
 
-    def _apply_theme(self, theme: Component):
-        self.style = Style(
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style(
             {
                 "position": "relative",
                 "flex_grow": "1",
                 "background_color": "black",
                 "border_radius": "9999px",
                 "height": "3px",
-                "&[data-orientation='vertical']": {
-                    "width": "3px",
-                },
-                **self.style,
+                "&[data-orientation='vertical']": {"width": "3px"},
             }
         )
 
@@ -107,16 +113,18 @@ class SliderRange(SliderComponent):
     tag = "Range"
     alias = "RadixSliderRange"
 
-    def _apply_theme(self, theme: Component):
-        self.style = Style(
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style(
             {
                 "position": "absolute",
                 "background_color": "white",
                 "height": "100%",
-                "&[data-orientation='vertical']": {
-                    "width": "100%",
-                },
-                **self.style,
+                "&[data-orientation='vertical']": {"width": "100%"},
             }
         )
 
@@ -127,8 +135,13 @@ class SliderThumb(SliderComponent):
     tag = "Thumb"
     alias = "RadixSliderThumb"
 
-    def _apply_theme(self, theme: Component):
-        self.style = Style(
+    def add_style(self) -> Style | None:
+        """Add style to the component.
+
+        Returns:
+            The style of the component.
+        """
+        return Style(
             {
                 "display": "block",
                 "width": "20px",
@@ -143,7 +156,6 @@ class SliderThumb(SliderComponent):
                     "outline": "none",
                     "box_shadow": "0 0 0 4px gray",
                 },
-                **self.style,
             }
         )
 

reflex/components/radix/primitives/slider.pyi

@@ -96,6 +96,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
 
 class SliderRoot(SliderComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -196,6 +197,7 @@ class SliderRoot(SliderComponent):
         ...
 
 class SliderTrack(SliderComponent):
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -274,6 +276,7 @@ class SliderTrack(SliderComponent):
         ...
 
 class SliderRange(SliderComponent):
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -352,6 +355,7 @@ class SliderRange(SliderComponent):
         ...
 
 class SliderThumb(SliderComponent):
+    def add_style(self) -> Style | None: ...
     @overload
     @classmethod
     def create(  # type: ignore

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
@@ -331,7 +409,7 @@ class Theme(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color_mode: Optional[LiteralAppearance | None] = None,
+        color_mode: Optional[Literal["inherit", "light", "dark"]] = None,
         theme_panel: Optional[bool] = False,
         has_background: Optional[Union[Var[bool], bool]] = None,
         appearance: Optional[

reflex/components/radix/themes/color_mode.py

@@ -14,18 +14,21 @@ rx.text(
 )
 ```
 """
+
 from __future__ import annotations
 
 import dataclasses
+from typing import Literal, get_args
 
 from reflex.components.component import BaseComponent
-from reflex.components.core.cond import Cond, color_mode_cond
+from reflex.components.core.cond import Cond, color_mode_cond, cond
 from reflex.components.lucide.icon import Icon
+from reflex.components.radix.themes.components.switch import Switch
 from reflex.style import LIGHT_COLOR_MODE, color_mode, toggle_color_mode
-from reflex.vars import BaseVar
+from reflex.utils import console
+from reflex.vars import BaseVar, Var
 
-from .components.button import Button
-from .components.switch import Switch
+from .components.icon_button import IconButton
 
 DEFAULT_LIGHT_ICON: Icon = Icon.create(tag="sun")
 DEFAULT_DARK_ICON: Icon = Icon.create(tag="moon")
@@ -55,45 +58,110 @@ class ColorModeIcon(Cond):
         )
 
 
-class ColorModeSwitch(Switch):
-    """Switch for toggling light / dark mode via toggle_color_mode."""
+LiteralPosition = Literal["top-left", "top-right", "bottom-left", "bottom-right"]
+
+position_values = get_args(LiteralPosition)
+
+position_map = {
+    "position": position_values,
+    "left": ["top-left", "bottom-left"],
+    "right": ["top-right", "bottom-right"],
+    "top": ["top-left", "top-right"],
+    "bottom": ["bottom-left", "bottom-right"],
+}
+
+
+# needed to inverse contains for find
+def _find(const, var):
+    return Var.create_safe(const).contains(var)
+
+
+def _set_var_default(props, position, prop, default1, default2=""):
+    props.setdefault(
+        prop, cond(_find(position_map[prop], position), default1, default2)
+    )
+
+
+def _set_static_default(props, position, prop, default):
+    if prop in position:
+        props.setdefault(prop, default)
+
+
+class ColorModeIconButton(IconButton):
+    """Icon Button for toggling light / dark mode via toggle_color_mode."""
 
     @classmethod
-    def create(cls, *children, **props):
-        """Create a switch component bound to color_mode.
+    def create(
+        cls,
+        *children,
+        position: LiteralPosition | None = None,
+        **props,
+    ):
+        """Create a icon button component that calls toggle_color_mode on click.
 
         Args:
             *children: The children of the component.
+            position: The position of the icon button. Follow document flow if None.
             **props: The props to pass to the component.
 
         Returns:
-            The switch component.
+            The button component.
         """
-        return Switch.create(
-            *children,
-            checked=color_mode != LIGHT_COLOR_MODE,
-            on_change=toggle_color_mode,
+        if children:
+            console.deprecate(
+                feature_name="passing children to color_mode.button",
+                reason=", use color_mode_cond and toggle_color_mode instead to build a custom color_mode component",
+                deprecation_version="0.5.0",
+                removal_version="0.6.0",
+            )
+
+        # position is used to set nice defaults for positioning the icon button
+        if isinstance(position, Var):
+            _set_var_default(props, position, "position", "fixed", position)
+            _set_var_default(props, position, "bottom", "2rem")
+            _set_var_default(props, position, "top", "2rem")
+            _set_var_default(props, position, "left", "2rem")
+            _set_var_default(props, position, "right", "2rem")
+        elif position is not None:
+            if position in position_values:
+                props.setdefault("position", "fixed")
+                _set_static_default(props, position, "bottom", "2rem")
+                _set_static_default(props, position, "top", "2rem")
+                _set_static_default(props, position, "left", "2rem")
+                _set_static_default(props, position, "right", "2rem")
+            else:
+                props["position"] = position
+
+        props.setdefault("background", "transparent")
+        props.setdefault("color", "inherit")
+        props.setdefault("z_index", "20")
+        props.setdefault(":hover", {"cursor": "pointer"})
+
+        return super().create(
+            ColorModeIcon.create(),
+            on_click=toggle_color_mode,
             **props,
         )
 
 
-class ColorModeButton(Button):
-    """Button for toggling chakra light / dark mode via toggle_color_mode."""
+class ColorModeSwitch(Switch):
+    """Switch for toggling light / dark mode via toggle_color_mode."""
 
     @classmethod
     def create(cls, *children, **props):
-        """Create a button component that calls toggle_color_mode on click.
+        """Create a switch component bound to color_mode.
 
         Args:
             *children: The children of the component.
             **props: The props to pass to the component.
 
         Returns:
-            The button component.
+            The switch component.
         """
-        return Button.create(
+        return Switch.create(
             *children,
-            on_click=toggle_color_mode,
+            checked=color_mode != LIGHT_COLOR_MODE,
+            on_change=toggle_color_mode,
             **props,
         )
 
@@ -102,8 +170,8 @@ class ColorModeNamespace(BaseVar):
     """Namespace for color mode components."""
 
     icon = staticmethod(ColorModeIcon.create)
+    button = staticmethod(ColorModeIconButton.create)
     switch = staticmethod(ColorModeSwitch.create)
-    button = staticmethod(ColorModeButton.create)
 
 
 color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))