Radix 3.0 tweaks (#3257)

* radix themes progress: expose `max` prop

It doesn't work yet, but PR filed for radix-ui/themes:
https://github.com/radix-ui/themes/pull/492

* Move `progress` and `toast` to `_x`

[REF-2779] Expose skeleton and data_list in top level namespace.

reflex/__init__.py

@@ -59,6 +59,7 @@ _ALL_COMPONENTS = [
     "code",
     "container",
     "context_menu",
+    "data_list",
     "dialog",
     "divider",
     "drawer",
@@ -79,6 +80,7 @@ _ALL_COMPONENTS = [
     "scroll_area",
     "section",
     "select",
+    "skeleton",
     "slider",
     "spacer",
     "spinner",
@@ -111,7 +113,8 @@ _ALL_COMPONENTS = [
     "ordered_list",
     "moment",
     "logo",
-    "toast",
+    # Toast is in experimental namespace initially
+    # "toast",
 ]
 
 _MAPPING = {

reflex/__init__.pyi

@@ -46,6 +46,7 @@ from reflex.components import checkbox as checkbox
 from reflex.components import code as code
 from reflex.components import container as container
 from reflex.components import context_menu as context_menu
+from reflex.components import data_list as data_list
 from reflex.components import dialog as dialog
 from reflex.components import divider as divider
 from reflex.components import drawer as drawer
@@ -66,6 +67,7 @@ from reflex.components import radio as radio
 from reflex.components import scroll_area as scroll_area
 from reflex.components import section as section
 from reflex.components import select as select
+from reflex.components import skeleton as skeleton
 from reflex.components import slider as slider
 from reflex.components import spacer as spacer
 from reflex.components import spinner as spinner
@@ -97,7 +99,6 @@ from reflex.components import unordered_list as unordered_list
 from reflex.components import ordered_list as ordered_list
 from reflex.components import moment as moment
 from reflex.components import logo as logo
-from reflex.components import toast as toast
 from reflex.components.component import Component as Component
 from reflex.components.component import NoSSRComponent as NoSSRComponent
 from reflex.components.component import memo as memo

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

@@ -62,7 +62,8 @@ __all__ = [
     "inset",
     "menu",
     "popover",
-    "progress",
+    # progress is in experimental namespace until https://github.com/radix-ui/themes/pull/492
+    # "progress",
     "radio",
     "radio_cards",
     "radio_group",

reflex/components/radix/themes/components/progress.py

@@ -2,6 +2,7 @@
 
 from typing import Literal
 
+from reflex.components.component import Component
 from reflex.vars import Var
 
 from ..base import LiteralAccentColor, RadixThemesComponent
@@ -12,9 +13,12 @@ class Progress(RadixThemesComponent):
 
     tag = "Progress"
 
-    # The value of the progress bar: "0" to "100"
+    # The value of the progress bar: 0 to max (default 100)
     value: Var[int]
 
+    # The maximum progress value.
+    max: Var[int]
+
     # The size of the progress bar: "1" | "2" | "3"
     size: Var[Literal["1", "2", "3"]]
 
@@ -33,5 +37,19 @@ class Progress(RadixThemesComponent):
     # The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation.
     duration: Var[str]
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create a Progress component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Progress Component.
+        """
+        props.setdefault("width", "100%")
+        return super().create(*children, **props)
+
 
 progress = Progress.create

reflex/components/radix/themes/components/progress.pyi

@@ -8,6 +8,7 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
+from reflex.components.component import Component
 from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 
@@ -18,6 +19,7 @@ class Progress(RadixThemesComponent):
         cls,
         *children,
         value: Optional[Union[Var[int], int]] = None,
+        max: Optional[Union[Var[int], int]] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
         ] = None,
@@ -150,14 +152,12 @@ class Progress(RadixThemesComponent):
         ] = None,
         **props
     ) -> "Progress":
-        """Create a new component instance.
+        """Create a Progress component.
-
-        Will prepend "RadixThemes" to the component tag to avoid conflicts with
-        other UI libraries for common names, like Text and Button.
 
         Args:
-            *children: Child components.
+            *children: The children of the component.
-            value: The value of the progress bar: "0" to "100"
+            value: The value of the progress bar: 0 to max (default 100)
+            max: The maximum progress value.
             size: The size of the progress bar: "1" | "2" | "3"
             variant: The variant of the progress bar: "classic" | "surface" | "soft"
             color_scheme: The color theme of the progress bar
@@ -170,10 +170,10 @@ class Progress(RadixThemesComponent):
             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: Component properties.
+            **props: The properties of the component.
 
         Returns:
-            A new component instance.
+            The Progress Component.
         """
         ...
 

reflex/experimental/__init__.py

@@ -2,6 +2,9 @@
 
 from types import SimpleNamespace
 
+from reflex.components.radix.themes.components.progress import progress as progress
+from reflex.components.sonner.toast import toast as toast
+
 from ..utils.console import warn
 from . import hooks as hooks
 from .layout import layout as layout
@@ -14,5 +17,7 @@ warn(
 _x = SimpleNamespace(
     hooks=hooks,
     layout=layout,
+    progress=progress,
     run_in_thread=run_in_thread,
+    toast=toast,
 )