reflex 0.3.9a2__py3-none-any.whl → 0.3.10__py3-none-any.whl

reflex/components/radix/primitives/form.py

@@ -8,6 +8,7 @@ from typing import Any, Dict, Iterator, Literal
 from jinja2 import Environment
 
 from reflex.components.component import Component
+from reflex.components.radix.themes.components.textfield import TextFieldInput
 from reflex.components.tags.tag import Tag
 from reflex.constants.base import Dirs
 from reflex.constants.event import EventTriggers
@@ -52,7 +53,7 @@ class FormRoot(FormComponent):
     # If true, the form will be cleared after submit.
     reset_on_submit: Var[bool] = False  # type: ignore
 
-    # The name used to make this form's submit handler function unique
+    # The name used to make this form's submit handler function unique.
     handle_submit_unique_name: Var[str]
 
     def get_event_triggers(self) -> Dict[str, Any]:
@@ -64,7 +65,7 @@ class FormRoot(FormComponent):
         return {
             **super().get_event_triggers(),
             EventTriggers.ON_SUBMIT: lambda e0: [FORM_DATA],
-            "on_clear_server_errors": lambda: [],
+            EventTriggers.ON_CLEAR_SERVER_ERRORS: lambda: [],
         }
 
     @classmethod
@@ -153,7 +154,7 @@ class FormRoot(FormComponent):
                 )._replace(merge_var_data=ref_var._var_data)
         return form_refs
 
-    def _apply_theme(self, theme: Component | None):
+    def _apply_theme(self, theme: Component):
         return {
             "width": "260px",
             **self.style,
@@ -171,11 +172,13 @@ class FormField(FormComponent):
 
     alias = "RadixFormField"
 
+    # The name of the form field, that is passed down to the control and used to match with validation messages.
     name: Var[str]
 
+    # Flag to mark the form field as invalid, for server side validation.
     server_invalid: Var[bool]
 
-    def _apply_theme(self, theme: Component | None):
+    def _apply_theme(self, theme: Component):
         return {
             "display": "grid",
             "margin_bottom": "10px",
@@ -190,7 +193,7 @@ class FormLabel(FormComponent):
 
     alias = "RadixFormLabel"
 
-    def _apply_theme(self, theme: Component | None):
+    def _apply_theme(self, theme: Component):
         return {
             "font_size": "15px",
             "font_weight": "500",
@@ -206,6 +209,32 @@ class FormControl(FormComponent):
 
     alias = "RadixFormControl"
 
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a Form Control component.
+
+        Args:
+            *children: The children of the form.
+            **props: The properties of the form.
+
+        Raises:
+            ValueError: If the number of children is greater than 1.
+            TypeError: If a child exists but it is not a TextFieldInput.
+
+        Returns:
+            The form control component.
+        """
+        if len(children) > 1:
+            raise ValueError(
+                f"FormControl can only have at most one child, got {len(children)} children"
+            )
+        for child in children:
+            if not isinstance(child, TextFieldInput):
+                raise TypeError(
+                    "Only Radix TextFieldInput is allowed as child of FormControl"
+                )
+        return super().create(*children, **props)
+
 
 LiteralMatcher = Literal[
     "badInput",
@@ -235,9 +264,9 @@ class FormMessage(FormComponent):
     match: Var[LiteralMatcher]
 
     # Forces the message to be shown. This is useful when using server-side validation.
-    forceMatch: Var[bool]
+    force_match: Var[bool]
 
-    def _apply_theme(self, theme: Component | None):
+    def _apply_theme(self, theme: Component):
         return {
             "font_size": "13px",
             "opacity": "0.8",
@@ -260,6 +289,9 @@ class FormSubmit(FormComponent):
     alias = "RadixFormSubmit"
 
 
+# High Level API
+Form = FormRoot
+
 form_root = FormRoot.create
 form_field = FormField.create
 form_label = FormLabel.create
@@ -267,3 +299,4 @@ form_control = FormControl.create
 form_message = FormMessage.create
 form_validity_state = FormValidityState.create
 form_submit = FormSubmit.create
+form = Form.create

reflex/components/radix/primitives/form.pyi

@@ -11,6 +11,7 @@ from hashlib import md5
 from typing import Any, Dict, Iterator, Literal
 from jinja2 import Environment
 from reflex.components.component import Component
+from reflex.components.radix.themes.components.textfield import TextFieldInput
 from reflex.components.tags.tag import Tag
 from reflex.constants.base import Dirs
 from reflex.constants.event import EventTriggers
@@ -37,6 +38,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -95,6 +97,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -121,6 +124,7 @@ class FormRoot(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -180,13 +184,14 @@ class FormRoot(FormComponent):
         Args:
             *children: The children of the form.
             reset_on_submit: If true, the form will be cleared after submit.
-            handle_submit_unique_name: The name used to make this form's submit handler function unique
+            handle_submit_unique_name: The name used to make this form's submit handler function unique.
             as_child: Change the default rendered element for the one passed as a child.
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The properties of the form.
 
@@ -209,6 +214,7 @@ class FormField(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -261,12 +267,15 @@ class FormField(FormComponent):
 
         Args:
             *children: The children of the component.
+            name: The name of the form field, that is passed down to the control and used to match with validation messages.
+            server_invalid: Flag to mark the form field as invalid, for server side validation.
             as_child: Change the default rendered element for the one passed as a child.
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -290,6 +299,7 @@ class FormLabel(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -348,6 +358,7 @@ class FormLabel(FormComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -371,6 +382,7 @@ class FormControl(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -419,24 +431,26 @@ class FormControl(FormComponent):
         ] = None,
         **props
     ) -> "FormControl":
-        """Create the component.
+        """Create a Form Control component.
 
         Args:
-            *children: The children of the component.
+            *children: The children of the form.
             as_child: Change the default rendered element for the one passed as a child.
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
-            **props: The props of the component.
-
-        Returns:
-            The component.
+            **props: The properties of the form.
 
         Raises:
-            TypeError: If an invalid child is passed.
+            ValueError: If the number of children is greater than 1.
+            TypeError: If a child exists but it is not a TextFieldInput.
+
+        Returns:
+            The form control component.
         """
         ...
 
@@ -490,13 +504,14 @@ class FormMessage(FormComponent):
                 ],
             ]
         ] = None,
-        forceMatch: Optional[Union[Var[bool], bool]] = None,
+        force_match: Optional[Union[Var[bool], bool]] = None,
         as_child: 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,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -551,13 +566,14 @@ class FormMessage(FormComponent):
             *children: The children of the component.
             name: Used to target a specific field by name when rendering outside of a Field part.
             match: Used to indicate on which condition the message should be visible.
-            forceMatch: Forces the message to be shown. This is useful when using server-side validation.
+            force_match: Forces the message to be shown. This is useful when using server-side validation.
             as_child: Change the default rendered element for the one passed as a child.
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -581,6 +597,7 @@ class FormValidityState(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -639,6 +656,7 @@ class FormValidityState(FormComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -662,6 +680,7 @@ class FormSubmit(FormComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -720,6 +739,7 @@ class FormSubmit(FormComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -731,6 +751,7 @@ class FormSubmit(FormComponent):
         """
         ...
 
+Form = FormRoot
 form_root = FormRoot.create
 form_field = FormField.create
 form_label = FormLabel.create
@@ -738,3 +759,4 @@ form_control = FormControl.create
 form_message = FormMessage.create
 form_validity_state = FormValidityState.create
 form_submit = FormSubmit.create
+form = Form.create

reflex/components/radix/primitives/progress.py

@@ -28,7 +28,7 @@ class ProgressRoot(ProgressComponent):
     # The maximum progress value.
     max: Var[int]
 
-    def _apply_theme(self, theme: Component | None):
+    def _apply_theme(self, theme: Component):
         self.style = Style(
             {
                 "position": "relative",
@@ -52,7 +52,7 @@ class ProgressIndicator(ProgressComponent):
     # The current progress value.
     value: Var[Optional[int]]
 
-    def _apply_theme(self, theme: Component | None):
+    def _apply_theme(self, theme: Component):
         self.style = Style(
             {
                 "background-color": "white",

reflex/components/radix/primitives/progress.pyi

@@ -25,6 +25,7 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -83,6 +84,7 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -108,6 +110,7 @@ class ProgressRoot(ProgressComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -168,6 +171,7 @@ class ProgressRoot(ProgressComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -192,6 +196,7 @@ class ProgressIndicator(ProgressComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -251,6 +256,7 @@ class ProgressIndicator(ProgressComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/radix/primitives/slider.pyi

@@ -28,6 +28,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -86,6 +87,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -126,6 +128,7 @@ class SliderRoot(SliderComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -190,6 +193,7 @@ class SliderRoot(SliderComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -213,6 +217,7 @@ class SliderTrack(SliderComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -271,6 +276,7 @@ class SliderTrack(SliderComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -294,6 +300,7 @@ class SliderRange(SliderComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -352,6 +359,7 @@ class SliderRange(SliderComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 
@@ -375,6 +383,7 @@ class SliderThumb(SliderComponent):
         id: Optional[Any] = None,
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
+        _rename_props: Optional[Dict[str, str]] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
@@ -433,6 +442,7 @@ class SliderThumb(SliderComponent):
             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
+            _rename_props: props to change the name of
             custom_attrs: custom attribute
             **props: The props of the component.
 

reflex/components/radix/themes/base.py

@@ -2,9 +2,10 @@
 
 from __future__ import annotations
 
-from typing import Literal
+from typing import Any, Literal
 
 from reflex.components import Component
+from reflex.components.tags import Tag
 from reflex.utils import imports
 from reflex.vars import Var
 
@@ -14,7 +15,7 @@ LiteralSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
 LiteralVariant = Literal["classic", "solid", "soft", "surface", "outline", "ghost"]
 LiteralAppearance = Literal["inherit", "light", "dark"]
 LiteralGrayColor = Literal["gray", "mauve", "slate", "sage", "olive", "sand", "auto"]
-LiteralPanelBackground = Literal["solid", "transparent"]
+LiteralPanelBackground = Literal["solid", "translucent"]
 LiteralRadius = Literal["none", "small", "medium", "large", "full"]
 LiteralScaling = Literal["90%", "95%", "100%", "105%", "110%"]
 LiteralAccentColor = Literal[
@@ -113,6 +114,21 @@ class RadixThemesComponent(Component):
         )
         return component
 
+    @classmethod
+    def get_fields(cls) -> dict[str, Any]:
+        """Get the pydantic fields for the component.
+
+        Returns:
+            Mapping of field name to ModelField instance.
+        """
+        fields = super().get_fields()
+        if "color_scheme" in fields:
+            # Treat "color" as a direct prop, so the translation of reflex "color_scheme"
+            # to "color" does not put the "color_scheme" value into the "style" prop.
+            fields["color"] = fields.pop("color_scheme")
+            fields["color"].required = False
+        return fields
+
     @staticmethod
     def _get_app_wrap_components() -> dict[tuple[int, str], Component]:
         return {
@@ -132,32 +148,49 @@ class Theme(RadixThemesComponent):
 
     tag = "Theme"
 
-    # Whether to apply the themes background color to the theme node.
+    # Whether to apply the themes background color to the theme node. Defaults to True.
     has_background: Var[bool]
 
-    # Override light or dark mode theme: "inherit" | "light" | "dark"
+    # Override light or dark mode theme: "inherit" | "light" | "dark". Defaults to "inherit".
     appearance: Var[LiteralAppearance]
 
     # The color used for default buttons, typography, backgrounds, etc
     accent_color: Var[LiteralAccentColor]
 
-    # The shade of gray
+    # The shade of gray, defaults to "auto".
     gray_color: Var[LiteralGrayColor]
 
-    # Whether panel backgrounds are transparent: "solid" | "transparent" (default)
+    # Whether panel backgrounds are translucent: "solid" | "translucent" (default)
     panel_background: Var[LiteralPanelBackground]
 
-    # Element border radius: "none" | "small" | "medium" | "large" | "full"
+    # Element border radius: "none" | "small" | "medium" | "large" | "full". Defaults to "medium".
     radius: Var[LiteralRadius]
 
-    # Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%"
+    # Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%". Defaults to "100%"
     scaling: Var[LiteralScaling]
 
     def _get_imports(self) -> imports.ImportDict:
-        return {
-            **super()._get_imports(),
-            "": [imports.ImportVar(tag="@radix-ui/themes/styles.css", install=False)],
-        }
+        return imports.merge_imports(
+            super()._get_imports(),
+            {
+                "": [
+                    imports.ImportVar(tag="@radix-ui/themes/styles.css", install=False)
+                ],
+                "/utils/theme.js": [
+                    imports.ImportVar(tag="theme", is_default=True),
+                ],
+            },
+        )
+
+    def _render(self, props: dict[str, Any] | None = None) -> Tag:
+        tag = super()._render(props)
+        tag.add_props(
+            css=Var.create(
+                "{{...theme.styles.global[':root'], ...theme.styles.global.body}}",
+                _var_is_local=False,
+            ),
+        )
+        return tag
 
 
 class ThemePanel(RadixThemesComponent):
@@ -168,6 +201,7 @@ class ThemePanel(RadixThemesComponent):
 
     tag = "ThemePanel"
 
+    # Whether the panel is open. Defaults to False.
     default_open: Var[bool]