From 37508676cf3592a69726d6e07a2aeda6552360a8 Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Tue, 8 Oct 2024 07:16:54 -0700
Subject: [PATCH 01/38] Revert Markdown-related frontend dep bumps (#4088)

* Revert markdown version bumps

* Ignore markdown related dependencies (these are pinned now)
---
 .github/workflows/check_outdated_dependencies.yml |  2 +-
 reflex/components/markdown/markdown.py            | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/check_outdated_dependencies.yml b/.github/workflows/check_outdated_dependencies.yml
index d5b9292f6..fb28bb318 100644
--- a/.github/workflows/check_outdated_dependencies.yml
+++ b/.github/workflows/check_outdated_dependencies.yml
@@ -74,7 +74,7 @@ jobs:
         echo "$outdated"
 
         # Ignore 3rd party dependencies that are not updated.
-        filtered_outdated=$(echo "$outdated" | grep -vE 'Package|@chakra-ui|lucide-react|@splinetool/runtime|ag-grid-react|framer-motion' || true)
+        filtered_outdated=$(echo "$outdated" | grep -vE 'Package|@chakra-ui|lucide-react|@splinetool/runtime|ag-grid-react|framer-motion|react-markdown|remark-math|remark-gfm|rehype-katex|rehype-raw' || true)
         no_extra=$(echo "$filtered_outdated" | grep -vE '\|\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-' || true)
 
 
diff --git a/reflex/components/markdown/markdown.py b/reflex/components/markdown/markdown.py
index d6edca18c..1665144fd 100644
--- a/reflex/components/markdown/markdown.py
+++ b/reflex/components/markdown/markdown.py
@@ -75,7 +75,7 @@ def get_base_component_map() -> dict[str, Callable]:
 class Markdown(Component):
     """A markdown component."""
 
-    library = "react-markdown@9.0.1"
+    library = "react-markdown@8.0.7"
 
     tag = "ReactMarkdown"
 
@@ -157,19 +157,19 @@ class Markdown(Component):
         return [
             {
                 "": "katex/dist/katex.min.css",
-                "remark-math@6.0.0": ImportVar(
+                "remark-math@5.1.1": ImportVar(
                     tag=_REMARK_MATH._js_expr, is_default=True
                 ),
-                "remark-gfm@4.0.0": ImportVar(
+                "remark-gfm@3.0.1": ImportVar(
                     tag=_REMARK_GFM._js_expr, is_default=True
                 ),
                 "remark-unwrap-images@4.0.0": ImportVar(
                     tag=_REMARK_UNWRAP_IMAGES._js_expr, is_default=True
                 ),
-                "rehype-katex@7.0.1": ImportVar(
+                "rehype-katex@6.0.3": ImportVar(
                     tag=_REHYPE_KATEX._js_expr, is_default=True
                 ),
-                "rehype-raw@7.0.0": ImportVar(
+                "rehype-raw@6.1.1": ImportVar(
                     tag=_REHYPE_RAW._js_expr, is_default=True
                 ),
             },

From 876426c581412546c3542a2cf44bb2ac9172f5e6 Mon Sep 17 00:00:00 2001
From: Masen Furer <m_github@0x26.net>
Date: Tue, 8 Oct 2024 09:14:35 -0700
Subject: [PATCH 02/38] test_dynamic_routes: log on_loads and poll for 60
 seconds on order (#4089)

Assert on `list(...order)` so the error message prints actual value instead of
MutableProxy's repr.

Not sure if this fixes it...
---
 tests/integration/test_dynamic_routes.py | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/tests/integration/test_dynamic_routes.py b/tests/integration/test_dynamic_routes.py
index 35b83790f..31b7fa419 100644
--- a/tests/integration/test_dynamic_routes.py
+++ b/tests/integration/test_dynamic_routes.py
@@ -23,11 +23,15 @@ def DynamicRoute():
         order: List[str] = []
 
         def on_load(self):
-            self.order.append(f"{self.router.page.path}-{self.page_id or 'no page id'}")
+            page_data = f"{self.router.page.path}-{self.page_id or 'no page id'}"
+            print(f"on_load: {page_data}")
+            self.order.append(page_data)
 
         def on_load_redir(self):
             query_params = self.router.page.params
-            self.order.append(f"on_load_redir-{query_params}")
+            page_data = f"on_load_redir-{query_params}"
+            print(f"on_load_redir: {page_data}")
+            self.order.append(page_data)
             return rx.redirect(f"/page/{query_params['page_id']}")
 
         @rx.var
@@ -221,8 +225,11 @@ def poll_for_order(
                 dynamic_state_name
             ].order == exp_order
 
-        await AppHarness._poll_for_async(_check)
-        assert (await _backend_state()).substates[dynamic_state_name].order == exp_order
+        await AppHarness._poll_for_async(_check, timeout=60)
+        assert (
+            list((await _backend_state()).substates[dynamic_state_name].order)
+            == exp_order
+        )
 
     return _poll_for_order
 

From 5e3cfecdeab4182e4a405e94fb2d78f7b70eb16a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Brand=C3=A9ho?= <thomas.brandeho@gmail.com>
Date: Tue, 8 Oct 2024 09:15:56 -0700
Subject: [PATCH 03/38] fix custom component init (#4123)

---
 reflex/custom_components/custom_components.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/custom_components/custom_components.py b/reflex/custom_components/custom_components.py
index 146bb12c2..ee24a7cd0 100644
--- a/reflex/custom_components/custom_components.py
+++ b/reflex/custom_components/custom_components.py
@@ -260,7 +260,7 @@ def _validate_library_name(library_name: str | None) -> NameVariants:
     # Module name is the snake case.
     module_name = "_".join(name_parts)
 
-    custom_component_module_dir = f"reflex_{module_name}"
+    custom_component_module_dir = Path(f"reflex_{module_name}")
     console.debug(f"Custom component source directory: {custom_component_module_dir}")
 
     # Use the same name for the directory and the app.

From 02d4428e390c86820124a38c6c60ccf7e510ea81 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Tue, 8 Oct 2024 21:36:19 +0200
Subject: [PATCH 04/38] default props comment for CartesianAxis (#4127)

---
 reflex/components/recharts/cartesian.py  | 23 +++++++++++++----------
 reflex/components/recharts/cartesian.pyi | 20 +++++++++++---------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 06ca80dc5..a2c19df93 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -811,28 +811,31 @@ class CartesianAxis(Grid):
 
     alias = "RechartsCartesianAxis"
 
-    # The orientation of axis 'top' | 'bottom' | 'left' | 'right'
+    # The orientation of axis 'top' | 'bottom' | 'left' | 'right'. Default: "bottom"
     orientation: Var[LiteralOrientationTopBottomLeftRight]
 
-    # If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
+    # The box of viewing area. Default: {"x": 0, "y": 0, "width": 0, "height": 0}
+    view_box: Var[Dict[str, Any]]
+
+    # If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line. Default: True
     axis_line: Var[bool]
 
-    # If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.
+    # If set false, no ticks will be drawn.
+    tick: Var[bool]
+
+    # If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines. Default: True
     tick_line: Var[bool]
 
-    # The length of tick line.
+    # The length of tick line. Default: 6
     tick_size: Var[int]
 
-    # If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
+    # If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically. Default: "preserveEnd"
     interval: Var[LiteralInterval]
 
-    # If set false, no ticks will be drawn.
-    ticks: Var[bool]
-
     # If set a string or a number, default label will be drawn, and the option is content.
-    label: Var[str]
+    label: Var[Union[str, int]]
 
-    # If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
+    # If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside. Default: False
     mirror: Var[bool]
 
     # The margin between tick line and tick.
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index e7b186f6f..354e31db9 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -2179,7 +2179,9 @@ class CartesianAxis(Grid):
                 Var[Literal["bottom", "left", "right", "top"]],
             ]
         ] = None,
+        view_box: Optional[Union[Dict[str, Any], Var[Dict[str, Any]]]] = None,
         axis_line: Optional[Union[Var[bool], bool]] = None,
+        tick: Optional[Union[Var[bool], bool]] = None,
         tick_line: Optional[Union[Var[bool], bool]] = None,
         tick_size: Optional[Union[Var[int], int]] = None,
         interval: Optional[
@@ -2188,8 +2190,7 @@ class CartesianAxis(Grid):
                 Var[Literal["preserveEnd", "preserveStart", "preserveStartEnd"]],
             ]
         ] = None,
-        ticks: Optional[Union[Var[bool], bool]] = None,
-        label: Optional[Union[Var[str], str]] = None,
+        label: Optional[Union[Var[Union[int, str]], int, str]] = None,
         mirror: Optional[Union[Var[bool], bool]] = None,
         tick_margin: Optional[Union[Var[int], int]] = None,
         x: Optional[Union[Var[int], int]] = None,
@@ -2243,14 +2244,15 @@ class CartesianAxis(Grid):
 
         Args:
             *children: The children of the component.
-            orientation: The orientation of axis 'top' | 'bottom' | 'left' | 'right'
-            axis_line: If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
-            tick_line: If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines.
-            tick_size: The length of tick line.
-            interval: If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
-            ticks: If set false, no ticks will be drawn.
+            orientation: The orientation of axis 'top' | 'bottom' | 'left' | 'right'. Default: "bottom"
+            view_box: The box of viewing area. Default: {"x": 0, "y": 0, "width": 0, "height": 0}
+            axis_line: If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line. Default: True
+            tick: If set false, no ticks will be drawn.
+            tick_line: If set false, no axis tick lines will be drawn. If set a object, the option is the configuration of tick lines. Default: True
+            tick_size: The length of tick line. Default: 6
+            interval: If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically. Default: "preserveEnd"
             label: If set a string or a number, default label will be drawn, and the option is content.
-            mirror: If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside.
+            mirror: If set true, flips ticks around the axis line, displaying the labels inside the chart instead of outside. Default: False
             tick_margin: The margin between tick line and tick.
             x: The x-coordinate of grid.
             y: The y-coordinate of grid.

From 4982b450fe6ac63049dc79b78d4154348773cc5f Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Tue, 8 Oct 2024 21:36:27 +0200
Subject: [PATCH 05/38] default props comment for CartesianGrid (#4126)

---
 reflex/components/recharts/cartesian.py  | 14 +++++++-------
 reflex/components/recharts/cartesian.pyi | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index a2c19df93..b44f3b22b 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -779,28 +779,28 @@ class CartesianGrid(Grid):
 
     alias = "RechartsCartesianGrid"
 
-    # The horizontal line configuration.
+    # The horizontal line configuration. Default: True
     horizontal: Var[bool]
 
-    # The vertical line configuration.
+    # The vertical line configuration. Default: True
     vertical: Var[bool]
 
-    # The x-coordinates in pixel values of all vertical lines.
+    # The x-coordinates in pixel values of all vertical lines. Default: []
     vertical_points: Var[List[Union[str, int]]]
 
-    # The x-coordinates in pixel values of all vertical lines.
+    # The x-coordinates in pixel values of all vertical lines. Default: []
     horizontal_points: Var[List[Union[str, int]]]
 
     # The background of grid.
     fill: Var[Union[str, Color]]
 
-    # The opacity of the background used to fill the space between grid lines
+    # The opacity of the background used to fill the space between grid lines.
     fill_opacity: Var[float]
 
-    # The pattern of dashes and gaps used to paint the lines of the grid
+    # The pattern of dashes and gaps used to paint the lines of the grid.
     stroke_dasharray: Var[str]
 
-    # the stroke color of grid
+    # the stroke color of grid. Default: rx.color("gray", 7)
     stroke: Var[Union[str, Color]] = LiteralVar.create(Color("gray", 7))
 
 
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 354e31db9..77d41e2c2 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -2142,14 +2142,14 @@ class CartesianGrid(Grid):
 
         Args:
             *children: The children of the component.
-            horizontal: The horizontal line configuration.
-            vertical: The vertical line configuration.
-            vertical_points: The x-coordinates in pixel values of all vertical lines.
-            horizontal_points: The x-coordinates in pixel values of all vertical lines.
+            horizontal: The horizontal line configuration. Default: True
+            vertical: The vertical line configuration. Default: True
+            vertical_points: The x-coordinates in pixel values of all vertical lines. Default: []
+            horizontal_points: The x-coordinates in pixel values of all vertical lines. Default: []
             fill: The background of grid.
-            fill_opacity: The opacity of the background used to fill the space between grid lines
-            stroke_dasharray: The pattern of dashes and gaps used to paint the lines of the grid
-            stroke: the stroke color of grid
+            fill_opacity: The opacity of the background used to fill the space between grid lines.
+            stroke_dasharray: The pattern of dashes and gaps used to paint the lines of the grid.
+            stroke: the stroke color of grid. Default: rx.color("gray", 7)
             x: The x-coordinate of grid.
             y: The y-coordinate of grid.
             width: The width of grid.

From cb4ff24dc097f738a53c623fa9217dfbe5287ee8 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Tue, 8 Oct 2024 21:37:10 +0200
Subject: [PATCH 06/38] default props comment for ReferenceLine (#4122)

---
 reflex/components/recharts/cartesian.py  | 2 +-
 reflex/components/recharts/cartesian.pyi | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index b44f3b22b..3bec9335f 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -652,7 +652,7 @@ class ReferenceLine(Reference):
     # The color of the reference line.
     stroke: Var[Union[str, Color]]
 
-    # The width of the stroke.
+    # The width of the stroke. Default: 1
     stroke_width: Var[Union[str, int]]
 
     # Valid children components
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 77d41e2c2..e52ac466d 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -1795,7 +1795,7 @@ class ReferenceLine(Reference):
             x: If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
             y: If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
             stroke: The color of the reference line.
-            stroke_width: The width of the stroke.
+            stroke_width: The width of the stroke. Default: 1
             segment: Array of endpoints in { x, y } format. These endpoints would be used to draw the ReferenceLine.
             x_axis_id: The id of x-axis which is corresponding to the data.
             y_axis_id: The id of y-axis which is corresponding to the data.

From c619c722119e4c3033c32b91995262475e8ec6d9 Mon Sep 17 00:00:00 2001
From: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
Date: Tue, 8 Oct 2024 13:25:49 -0700
Subject: [PATCH 07/38] use system npm when REFLEX_USE_SYSTEM_NODE is passed
 (#4133)

---
 reflex/utils/path_ops.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/utils/path_ops.py b/reflex/utils/path_ops.py
index 1de635b88..79596716c 100644
--- a/reflex/utils/path_ops.py
+++ b/reflex/utils/path_ops.py
@@ -196,7 +196,7 @@ def get_npm_path() -> str | None:
         The path to the npm binary file.
     """
     npm_path = Path(constants.Node.NPM_PATH)
-    if not npm_path.exists():
+    if use_system_node() or not npm_path.exists():
         return str(which("npm"))
     return str(npm_path)
 

From 567cf7ea380d45520b3a7c0eabcb6b0633277684 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 00:49:30 +0200
Subject: [PATCH 08/38] default props comment for ReferenceArea (#4124)

---
 reflex/components/recharts/cartesian.py  | 4 ++--
 reflex/components/recharts/cartesian.pyi | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 3bec9335f..108024fa6 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -746,10 +746,10 @@ class ReferenceArea(Recharts):
     # A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.
     y2: Var[Union[str, int]]
 
-    # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+    # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. Default: "discard"
     if_overflow: Var[LiteralIfOverflow]
 
-    # If set true, the line will be rendered in front of bars in BarChart, etc.
+    # If set true, the line will be rendered in front of bars in BarChart, etc. Default: False
     is_front: Var[bool]
 
     # Valid children components
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index e52ac466d..05a7afee1 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -1984,8 +1984,8 @@ class ReferenceArea(Recharts):
             x2: A boundary value of the area. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys. If one of x1 or x2 is invalidate, the area will cover along x-axis.
             y1: A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.
             y2: A boundary value of the area. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys. If one of y1 or y2 is invalidate, the area will cover along y-axis.
-            if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
-            is_front: If set true, the line will be rendered in front of bars in BarChart, etc.
+            if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. Default: "discard"
+            is_front: If set true, the line will be rendered in front of bars in BarChart, etc. Default: False
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From be980c6b1efb68e06c378e739a15d3a03ed9fe86 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 00:54:42 +0200
Subject: [PATCH 09/38] default props comment for Scatter (#4118)

---
 reflex/components/recharts/cartesian.py  | 29 +++++++++++-------------
 reflex/components/recharts/cartesian.pyi | 28 +++++++++++------------
 2 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 108024fa6..627b42ea0 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -459,46 +459,43 @@ class Scatter(Recharts):
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'
+    # The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'. Default: "circle"
     legend_type: Var[LiteralLegendType]
 
-    # The id of x-axis which is corresponding to the data.
+    # The id of x-axis which is corresponding to the data. Default: 0
     x_axis_id: Var[Union[str, int]]
 
-    # The id of y-axis which is corresponding to the data.
+    # The id of y-axis which is corresponding to the data. Default: 0
     y_axis_id: Var[Union[str, int]]
 
-    # The id of z-axis which is corresponding to the data.
-    z_axis_id: Var[str]
+    # The id of z-axis which is corresponding to the data. Default: 0
+    z_axis_id: Var[Union[str, int]]
 
-    # If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally.
+    # If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally. Default: False
     line: Var[bool]
 
-    # If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'
+    # If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'. Default: "circle"
     shape: Var[LiteralShape]
 
-    # If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'
+    # If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'. Default: "joint"
     line_type: Var[LiteralLineType]
 
-    # The fill
+    # The fill color of the scatter. Default: rx.color("accent", 9)
     fill: Var[Union[str, Color]] = LiteralVar.create(Color("accent", 9))
 
-    # the name
-    name: Var[Union[str, int]]
-
     # Valid children components.
     _valid_children: List[str] = ["LabelList", "ErrorBar"]
 
-    # If set false, animation of bar will be disabled.
+    # If set false, animation of bar will be disabled. Default: True in CSR, False in SSR
     is_animation_active: Var[bool]
 
-    # Specifies when the animation should begin, the unit of this option is ms, default 0.
+    # Specifies when the animation should begin, the unit of this option is ms. Default: 0
     animation_begin: Var[int]
 
-    # Specifies the duration of animation, the unit of this option is ms, default 1500.
+    # Specifies the duration of animation, the unit of this option is ms. Default: 1500
     animation_duration: Var[int]
 
-    # The type of easing function, default 'ease'
+    # The type of easing function. Default: "ease"
     animation_easing: Var[LiteralAnimationEasing]
 
     # The customized event handler of click on the component in this group
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 05a7afee1..9b61b46f8 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -1331,7 +1331,7 @@ class Scatter(Recharts):
         ] = None,
         x_axis_id: Optional[Union[Var[Union[int, str]], int, str]] = None,
         y_axis_id: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        z_axis_id: Optional[Union[Var[str], str]] = None,
+        z_axis_id: Optional[Union[Var[Union[int, str]], int, str]] = None,
         line: Optional[Union[Var[bool], bool]] = None,
         shape: Optional[
             Union[
@@ -1355,7 +1355,6 @@ class Scatter(Recharts):
             Union[Literal["fitting", "joint"], Var[Literal["fitting", "joint"]]]
         ] = None,
         fill: Optional[Union[Color, Var[Union[Color, str]], str]] = None,
-        name: Optional[Union[Var[Union[int, str]], int, str]] = None,
         is_animation_active: Optional[Union[Var[bool], bool]] = None,
         animation_begin: Optional[Union[Var[int], int]] = None,
         animation_duration: Optional[Union[Var[int], int]] = None,
@@ -1413,19 +1412,18 @@ class Scatter(Recharts):
         Args:
             *children: The children of the component.
             data: The source data, in which each element is an object.
-            legend_type: The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'
-            x_axis_id: The id of x-axis which is corresponding to the data.
-            y_axis_id: The id of y-axis which is corresponding to the data.
-            z_axis_id: The id of z-axis which is corresponding to the data.
-            line: If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally.
-            shape: If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'
-            line_type: If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'
-            fill: The fill
-            name: the name
-            is_animation_active: If set false, animation of bar will be disabled.
-            animation_begin: Specifies when the animation should begin, the unit of this option is ms, default 0.
-            animation_duration: Specifies the duration of animation, the unit of this option is ms, default 1500.
-            animation_easing: The type of easing function, default 'ease'
+            legend_type: The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'. Default: "circle"
+            x_axis_id: The id of x-axis which is corresponding to the data. Default: 0
+            y_axis_id: The id of y-axis which is corresponding to the data. Default: 0
+            z_axis_id: The id of z-axis which is corresponding to the data. Default: 0
+            line: If false set, line will not be drawn. If true set, line will be drawn which have the props calculated internally. Default: False
+            shape: If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'. Default: "circle"
+            line_type: If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'. Default: "joint"
+            fill: The fill color of the scatter. Default: rx.color("accent", 9)
+            is_animation_active: If set false, animation of bar will be disabled. Default: True in CSR, False in SSR
+            animation_begin: Specifies when the animation should begin, the unit of this option is ms. Default: 0
+            animation_duration: Specifies the duration of animation, the unit of this option is ms. Default: 1500
+            animation_easing: The type of easing function. Default: "ease"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From abf0329cd97f494e1d61cf289f8f9848ed8a3f61 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 00:56:11 +0200
Subject: [PATCH 10/38] default props comment for Area (#4115)

---
 reflex/components/recharts/cartesian.py  | 29 +++++++++++++-----------
 reflex/components/recharts/cartesian.pyi | 26 ++++++++++++---------
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 627b42ea0..d982d1a0e 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -295,22 +295,22 @@ class Area(Cartesian):
 
     alias = "RechartsArea"
 
-    # The color of the line stroke.
+    # The color of the line stroke. Default: rx.color("accent", 9)
     stroke: Var[Union[str, Color]] = LiteralVar.create(Color("accent", 9))
 
-    # The width of the line stroke.
-    stroke_width: Var[int] = LiteralVar.create(1)
+    # The width of the line stroke. Default: 1
+    stroke_width: Var[int]
 
-    # The color of the area fill.
+    # The color of the area fill. Default: rx.color("accent", 5)
     fill: Var[Union[str, Color]] = LiteralVar.create(Color("accent", 5))
 
-    # The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' |
+    # The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter'. Default: "monotone"
     type_: Var[LiteralAreaType] = LiteralVar.create("monotone")
 
-    # If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
+    # If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally. Default: False
     dot: Var[Union[bool, Dict[str, Any]]]
 
-    # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
+    # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {stroke: rx.color("accent", 2), fill: rx.color("accent", 10)}
     active_dot: Var[Union[bool, Dict[str, Any]]] = LiteralVar.create(
         {
             "stroke": Color("accent", 2),
@@ -318,17 +318,20 @@ class Area(Cartesian):
         }
     )
 
-    # If set false, labels will not be drawn. If set true, labels will be drawn which have the props calculated internally.
+    # If set false, labels will not be drawn. If set true, labels will be drawn which have the props calculated internally. Default: False
     label: Var[bool]
 
+    # The value which can describle the line, usually calculated internally.
+    base_line: Var[Union[str, List[Dict[str, Any]]]]
+
+    # The coordinates of all the points in the area, usually calculated internally.
+    points: Var[List[Dict[str, Any]]]
+
     # The stack id of area, when two areas have the same value axis and same stack_id, then the two areas are stacked in order.
     stack_id: Var[Union[str, int]]
 
-    # The unit of data. This option will be used in tooltip.
-    unit: Var[Union[str, int]]
-
-    # The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.
-    name: Var[Union[str, int]]
+    # Whether to connect a graph area across null points. Default: False
+    connect_nulls: Var[bool]
 
     # Valid children components
     _valid_children: List[str] = ["LabelList"]
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 9b61b46f8..94b109531 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -843,9 +843,12 @@ class Area(Cartesian):
             Union[Dict[str, Any], Var[Union[Dict[str, Any], bool]], bool]
         ] = None,
         label: Optional[Union[Var[bool], bool]] = None,
+        base_line: Optional[
+            Union[List[Dict[str, Any]], Var[Union[List[Dict[str, Any]], str]], str]
+        ] = None,
+        points: Optional[Union[List[Dict[str, Any]], Var[List[Dict[str, Any]]]]] = None,
         stack_id: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        unit: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        name: Optional[Union[Var[Union[int, str]], int, str]] = None,
+        connect_nulls: Optional[Union[Var[bool], bool]] = None,
         layout: Optional[
             Union[
                 Literal["horizontal", "vertical"],
@@ -934,16 +937,17 @@ class Area(Cartesian):
 
         Args:
             *children: The children of the component.
-            stroke: The color of the line stroke.
-            stroke_width: The width of the line stroke.
-            fill: The color of the area fill.
-            type_: The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' |
-            dot: If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
-            active_dot: The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
-            label: If set false, labels will not be drawn. If set true, labels will be drawn which have the props calculated internally.
+            stroke: The color of the line stroke. Default: rx.color("accent", 9)
+            stroke_width: The width of the line stroke. Default: 1
+            fill: The color of the area fill. Default: rx.color("accent", 5)
+            type_: The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter'. Default: "monotone"
+            dot: If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally. Default: False
+            active_dot: The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {stroke: rx.color("accent", 2), fill: rx.color("accent", 10)}
+            label: If set false, labels will not be drawn. If set true, labels will be drawn which have the props calculated internally. Default: False
+            base_line: The value which can describle the line, usually calculated internally.
+            points: The coordinates of all the points in the area, usually calculated internally.
             stack_id: The stack id of area, when two areas have the same value axis and same stack_id, then the two areas are stacked in order.
-            unit: The unit of data. This option will be used in tooltip.
-            name: The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.
+            connect_nulls: Whether to connect a graph area across null points. Default: False
             layout: The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
             data_key: The key of a group of data which should be unique in an area chart.
             x_axis_id: The id of x-axis which is corresponding to the data.

From 2652a04be8d7914bf33f657531fbeca346f9787a Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 00:57:11 +0200
Subject: [PATCH 11/38] default props comment for Line (#4117)

---
 reflex/components/recharts/cartesian.py  | 19 +++++++++++--------
 reflex/components/recharts/cartesian.pyi | 18 ++++++++++--------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index d982d1a0e..2d0655866 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -411,13 +411,13 @@ class Line(Cartesian):
     # The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
     type_: Var[LiteralAreaType]
 
-    # The color of the line stroke.
+    # The color of the line stroke. Default: rx.color("accent", 9)
     stroke: Var[Union[str, Color]] = LiteralVar.create(Color("accent", 9))
 
-    # The width of the line stroke.
+    # The width of the line stroke. Default: 1
     stroke_width: Var[int]
 
-    # The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
+    # The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {"stroke": rx.color("accent", 10), "fill": rx.color("accent", 4)}
     dot: Var[Union[bool, Dict[str, Any]]] = LiteralVar.create(
         {
             "stroke": Color("accent", 10),
@@ -425,7 +425,7 @@ class Line(Cartesian):
         }
     )
 
-    # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
+    # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {"stroke": rx.color("accent", 2), "fill": rx.color("accent", 10)}
     active_dot: Var[Union[bool, Dict[str, Any]]] = LiteralVar.create(
         {
             "stroke": Color("accent", 2),
@@ -433,10 +433,10 @@ class Line(Cartesian):
         }
     )
 
-    # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
+    # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. Default: False
     label: Var[bool]
 
-    # Hides the line when true, useful when toggling visibility state via legend.
+    # Hides the line when true, useful when toggling visibility state via legend. Default: False
     hide: Var[bool]
 
     # Whether to connect a graph line across null points.
@@ -445,8 +445,11 @@ class Line(Cartesian):
     # The unit of data. This option will be used in tooltip.
     unit: Var[Union[str, int]]
 
-    # The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
-    name: Var[Union[str, int]]
+    # The coordinates of all the points in the line, usually calculated internally.
+    points: Var[List[Dict[str, Any]]]
+
+    # The pattern of dashes and gaps used to paint the line.
+    stroke_dasharray: Var[str]
 
     # Valid children components
     _valid_children: List[str] = ["LabelList", "ErrorBar"]
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 94b109531..26479b394 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -1177,7 +1177,8 @@ class Line(Cartesian):
         hide: Optional[Union[Var[bool], bool]] = None,
         connect_nulls: Optional[Union[Var[bool], bool]] = None,
         unit: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        name: Optional[Union[Var[Union[int, str]], int, str]] = None,
+        points: Optional[Union[List[Dict[str, Any]], Var[List[Dict[str, Any]]]]] = None,
+        stroke_dasharray: Optional[Union[Var[str], str]] = None,
         layout: Optional[
             Union[
                 Literal["horizontal", "vertical"],
@@ -1267,15 +1268,16 @@ class Line(Cartesian):
         Args:
             *children: The children of the component.
             type_: The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
-            stroke: The color of the line stroke.
-            stroke_width: The width of the line stroke.
-            dot: The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
-            active_dot: The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
-            label: If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
-            hide: Hides the line when true, useful when toggling visibility state via legend.
+            stroke: The color of the line stroke. Default: rx.color("accent", 9)
+            stroke_width: The width of the line stroke. Default: 1
+            dot: The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {"stroke": rx.color("accent", 10), "fill": rx.color("accent", 4)}
+            active_dot: The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally. Default: {"stroke": rx.color("accent", 2), "fill": rx.color("accent", 10)}
+            label: If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. Default: False
+            hide: Hides the line when true, useful when toggling visibility state via legend. Default: False
             connect_nulls: Whether to connect a graph line across null points.
             unit: The unit of data. This option will be used in tooltip.
-            name: The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
+            points: The coordinates of all the points in the line, usually calculated internally.
+            stroke_dasharray: The pattern of dashes and gaps used to paint the line.
             layout: The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
             data_key: The key of a group of data which should be unique in an area chart.
             x_axis_id: The id of x-axis which is corresponding to the data.

From 7b88c54d138003ef9237f38fecaadf7b5fc3fc12 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 00:58:22 +0200
Subject: [PATCH 12/38] default props comment for Bar (#4116)

---
 reflex/components/recharts/cartesian.py  | 28 ++++++------------------
 reflex/components/recharts/cartesian.pyi | 27 +++++------------------
 2 files changed, 12 insertions(+), 43 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 2d0655866..b37c036f4 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -350,12 +350,13 @@ class Bar(Cartesian):
     # The width of the line stroke.
     stroke_width: Var[int]
 
-    # The width of the line stroke.
+    # The width of the line stroke. Default: Color("accent", 9)
     fill: Var[Union[str, Color]] = LiteralVar.create(Color("accent", 9))
-    # If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally.
+
+    # If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. Default: False
     background: Var[bool]
 
-    # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
+    # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. Default: False
     label: Var[bool]
 
     # The stack id of bar, when two bars have the same value axis and same stack_id, then the two bars are stacked in order.
@@ -376,30 +377,15 @@ class Bar(Cartesian):
     # Max size of the bar
     max_bar_size: Var[int]
 
+    # If set a value, the option is the radius of all the rounded corners. If set a array, the option are in turn the radiuses of top-left corner, top-right corner, bottom-right corner, bottom-left corner. Default: 0
+    radius: Var[Union[int, List[int]]]
+
     # The active bar is shown when a user enters a bar chart and this chart has tooltip. If set to false, no active bar will be drawn. If set to true, active bar will be drawn with the props calculated internally. If passed an object, active bar will be drawn, and the internally calculated props will be merged with the key value pairs of the passed object.
     # active_bar: Var[Union[bool, Dict[str, Any]]]
 
     # Valid children components
     _valid_children: List[str] = ["Cell", "LabelList", "ErrorBar"]
 
-    # If set false, animation of bar will be disabled.
-    is_animation_active: Var[bool]
-
-    # Specifies when the animation should begin, the unit of this option is ms, default 0.
-    animation_begin: Var[int]
-
-    # Specifies the duration of animation, the unit of this option is ms, default 1500.
-    animation_duration: Var[int]
-
-    # The type of easing function, default 'ease'
-    animation_easing: Var[LiteralAnimationEasing]
-
-    # The customized event handler of animation start
-    on_animation_start: EventHandler[lambda: []]
-
-    # The customized event handler of animation end
-    on_animation_end: EventHandler[lambda: []]
-
 
 class Line(Cartesian):
     """A Line component in Recharts."""
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 26479b394..9971116df 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -983,15 +983,7 @@ class Bar(Cartesian):
         name: Optional[Union[Var[Union[int, str]], int, str]] = None,
         bar_size: Optional[Union[Var[int], int]] = None,
         max_bar_size: Optional[Union[Var[int], int]] = None,
-        is_animation_active: Optional[Union[Var[bool], bool]] = None,
-        animation_begin: Optional[Union[Var[int], int]] = None,
-        animation_duration: Optional[Union[Var[int], int]] = None,
-        animation_easing: Optional[
-            Union[
-                Literal["ease", "ease-in", "ease-in-out", "ease-out", "linear"],
-                Var[Literal["ease", "ease-in", "ease-in-out", "ease-out", "linear"]],
-            ]
-        ] = None,
+        radius: Optional[Union[List[int], Var[Union[List[int], int]], int]] = None,
         layout: Optional[
             Union[
                 Literal["horizontal", "vertical"],
@@ -1039,12 +1031,6 @@ class Bar(Cartesian):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_animation_end: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_animation_start: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
         on_blur: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
         on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
         on_context_menu: Optional[
@@ -1088,19 +1074,16 @@ class Bar(Cartesian):
             *children: The children of the component.
             stroke: The color of the line stroke.
             stroke_width: The width of the line stroke.
-            fill: The width of the line stroke.
-            background: If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally.
-            label: If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
+            fill: The width of the line stroke. Default: Color("accent", 9)
+            background: If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally. Default: False
+            label: If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally. Default: False
             stack_id: The stack id of bar, when two bars have the same value axis and same stack_id, then the two bars are stacked in order.
             unit: The unit of data. This option will be used in tooltip.
             min_point_size: The minimal height of a bar in a horizontal BarChart, or the minimal width of a bar in a vertical BarChart. By default, 0 values are not shown. To visualize a 0 (or close to zero) point, set the minimal point size to a pixel value like 3. In stacked bar charts, minPointSize might not be respected for tightly packed values. So we strongly recommend not using this prop in stacked BarCharts.
             name: The name of data. This option will be used in tooltip and legend to represent a bar. If no value was set to this option, the value of dataKey will be used alternatively.
             bar_size: Size of the bar (if one bar_size is set then a bar_size must be set for all bars)
             max_bar_size: Max size of the bar
-            is_animation_active: If set false, animation of bar will be disabled.
-            animation_begin: Specifies when the animation should begin, the unit of this option is ms, default 0.
-            animation_duration: Specifies the duration of animation, the unit of this option is ms, default 1500.
-            animation_easing: The type of easing function, default 'ease'
+            radius: If set a value, the option is the radius of all the rounded corners. If set a array, the option are in turn the radiuses of top-left corner, top-right corner, bottom-right corner, bottom-left corner. Default: 0
             layout: The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
             data_key: The key of a group of data which should be unique in an area chart.
             x_axis_id: The id of x-axis which is corresponding to the data.

From 4843081089b45c0d00007996139d201a6ba1d0f0 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:05:22 +0200
Subject: [PATCH 13/38] default props comment for Brush (#4113)

---
 reflex/components/recharts/cartesian.py  | 22 +++++++++++-----------
 reflex/components/recharts/cartesian.pyi | 18 +++++++++---------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index b37c036f4..29b48d800 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -192,40 +192,40 @@ class Brush(Recharts):
 
     alias = "RechartsBrush"
 
-    # Stroke color
+    # Stroke color. Default: rx.color("gray", 9)
     stroke: Var[Union[str, Color]] = LiteralVar.create(Color("gray", 9))
 
-    # The fill color of brush.
+    # The fill color of brush. Default: rx.color("gray", 2)
     fill: Var[Union[str, Color]] = LiteralVar.create(Color("gray", 2))
 
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
 
-    # The x-coordinate of brush.
+    # The x-coordinate of brush. Default: 0
     x: Var[int]
 
-    # The y-coordinate of brush.
+    # The y-coordinate of brush. Default: 0
     y: Var[int]
 
-    # The width of brush.
+    # The width of brush. Default: 0
     width: Var[int]
 
-    # The height of brush.
+    # The height of brush. Default: 40
     height: Var[int]
 
-    # The data domain of brush, [min, max].
+    # The original data of a LineChart, a BarChart or an AreaChart.
     data: Var[List[Any]]
 
-    # The width of each traveller.
+    # The width of each traveller. Default: 5
     traveller_width: Var[int]
 
-    # The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time
+    # The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time. Default: 1
     gap: Var[int]
 
-    # The default start index of brush. If the option is not set, the start index will be 0.
+    # The default start index of brush. If the option is not set, the start index will be 0. Default: 0
     start_index: Var[int]
 
-    # The default end index of brush. If the option is not set, the end index will be 1.
+    # The default end index of brush. If the option is not set, the end index will be calculated by the length of data.
     end_index: Var[int]
 
     # The fill color of brush
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 9971116df..846424331 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -653,15 +653,15 @@ class Brush(Recharts):
             stroke: The stroke color of brush
             fill: The fill color of brush
             data_key: The key of data displayed in the axis.
-            x: The x-coordinate of brush.
-            y: The y-coordinate of brush.
-            width: The width of brush.
-            height: The height of brush.
-            data: The data domain of brush, [min, max].
-            traveller_width: The width of each traveller.
-            gap: The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time
-            start_index: The default start index of brush. If the option is not set, the start index will be 0.
-            end_index: The default end index of brush. If the option is not set, the end index will be 1.
+            x: The x-coordinate of brush. Default: 0
+            y: The y-coordinate of brush. Default: 0
+            width: The width of brush. Default: 0
+            height: The height of brush. Default: 40
+            data: The original data of a LineChart, a BarChart or an AreaChart.
+            traveller_width: The width of each traveller. Default: 5
+            gap: The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time. Default: 1
+            start_index: The default start index of brush. If the option is not set, the start index will be 0. Default: 0
+            end_index: The default end index of brush. If the option is not set, the end index will be calculated by the length of data.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From c3b7caaf13a044211073f8968fbe7131eeee259a Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:06:05 +0200
Subject: [PATCH 14/38] default props comment for ZAxis (#4112)

---
 reflex/components/recharts/cartesian.py  | 7 +++++--
 reflex/components/recharts/cartesian.pyi | 6 ++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 29b48d800..2a6e88e59 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -172,7 +172,10 @@ class ZAxis(Recharts):
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
 
-    # The range of axis.
+    # The unique id of z-axis. Default: 0
+    z_axis_id: Var[Union[str, int]]
+
+    # The range of axis. Default: [10, 10]
     range: Var[List[int]]
 
     # The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
@@ -181,7 +184,7 @@ class ZAxis(Recharts):
     # The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
     name: Var[Union[str, int]]
 
-    # If 'auto' set, the scale function is decided by the type of chart, and the props type.
+    # If 'auto' set, the scale function is decided by the type of chart, and the props type. Default: "auto"
     scale: Var[LiteralScale]
 
 
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 846424331..e8d0dfc5c 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -510,6 +510,7 @@ class ZAxis(Recharts):
         cls,
         *children,
         data_key: Optional[Union[Var[Union[int, str]], int, str]] = None,
+        z_axis_id: Optional[Union[Var[Union[int, str]], int, str]] = None,
         range: Optional[Union[List[int], Var[List[int]]]] = None,
         unit: Optional[Union[Var[Union[int, str]], int, str]] = None,
         name: Optional[Union[Var[Union[int, str]], int, str]] = None,
@@ -601,10 +602,11 @@ class ZAxis(Recharts):
         Args:
             *children: The children of the component.
             data_key: The key of data displayed in the axis.
-            range: The range of axis.
+            z_axis_id: The unique id of z-axis. Default: 0
+            range: The range of axis. Default: [10, 10]
             unit: The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
             name: The name of data displayed in the axis. This option will be used to represent an index in a scatter chart.
-            scale: If 'auto' set, the scale function is decided by the type of chart, and the props type.
+            scale: If 'auto' set, the scale function is decided by the type of chart, and the props type. Default: "auto"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From 19df34d94109fdcb258def604d9eb7e1f59f2650 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:07:24 +0200
Subject: [PATCH 15/38] default props comment for YAxis (#4111)

* default props comment for YAxis

* axis id
---
 reflex/components/recharts/cartesian.py  | 8 ++++----
 reflex/components/recharts/cartesian.pyi | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 2a6e88e59..a0ab1ddf8 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -152,14 +152,14 @@ class YAxis(Axis):
 
     alias = "RechartsYAxis"
 
-    # The orientation of axis 'left' | 'right'
+    # The orientation of axis 'left' | 'right'. Default: "left"
     orientation: Var[LiteralOrientationLeftRight]
 
-    # The id of y-axis which is corresponding to the data.
+    # The id of y-axis which is corresponding to the data. Default: 0
     y_axis_id: Var[Union[str, int]]
 
-    # The range of the axis. Work best in conjuction with allow_data_overflow.
-    domain: Var[List]
+    # Specify the padding of y-axis. Default: {"top": 0, "bottom": 0}
+    padding: Var[Dict[str, int]]
 
 
 class ZAxis(Recharts):
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index e8d0dfc5c..f9d9686dd 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -348,7 +348,7 @@ class YAxis(Axis):
             Union[Literal["left", "right"], Var[Literal["left", "right"]]]
         ] = None,
         y_axis_id: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        domain: Optional[Union[List, Var[List]]] = None,
+        padding: Optional[Union[Dict[str, int], Var[Dict[str, int]]]] = None,
         data_key: Optional[Union[Var[Union[int, str]], int, str]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[int, str]], int, str]] = None,
@@ -464,9 +464,9 @@ class YAxis(Axis):
 
         Args:
             *children: The children of the component.
-            orientation: The orientation of axis 'left' | 'right'
-            y_axis_id: The id of y-axis which is corresponding to the data.
-            domain: The range of the axis. Work best in conjuction with allow_data_overflow.
+            orientation: The orientation of axis 'left' | 'right'. Default: "left"
+            y_axis_id: The id of y-axis which is corresponding to the data. Default: 0
+            padding: Specify the padding of y-axis. Default: {"top": 0, "bottom": 0}
             data_key: The key of data displayed in the axis.
             hide: If set true, the axis do not display in the chart.
             width: The width of axis which is usually calculated internally.

From 9c7de9b1891ac1bd9ea755e4cbc2f98073b07dc3 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:09:03 +0200
Subject: [PATCH 16/38] default props comment for XAxis (#4110)

* default props comment for XAxis

* axis id
---
 reflex/components/recharts/cartesian.py  | 16 ++++++++--------
 reflex/components/recharts/cartesian.pyi | 12 +++++++-----
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index a0ab1ddf8..5515162cc 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -129,20 +129,20 @@ class XAxis(Axis):
 
     alias = "RechartsXAxis"
 
-    # The orientation of axis 'top' | 'bottom'
+    # The orientation of axis 'top' | 'bottom'. Default: "bottom"
     orientation: Var[LiteralOrientationTopBottom]
 
-    # The id of x-axis which is corresponding to the data.
+    # The id of x-axis which is corresponding to the data. Default: 0
     x_axis_id: Var[Union[str, int]]
 
-    # Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden
-    include_hidden: Var[bool] = LiteralVar.create(False)
+    # Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden. Default: False
+    include_hidden: Var[bool]
 
-    # The range of the axis. Work best in conjuction with allow_data_overflow.
-    domain: Var[List]
+    # The angle of axis ticks. Default: 0
+    angle: Var[int]
 
-    # The range of the axis. Work best in conjuction with allow_data_overflow.
-    domain: Var[List]
+    # Specify the padding of x-axis. Default: {"left": 0, "right": 0}
+    padding: Var[Dict[str, int]]
 
 
 class YAxis(Axis):
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index f9d9686dd..30f6a4160 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -182,7 +182,8 @@ class XAxis(Axis):
         ] = None,
         x_axis_id: Optional[Union[Var[Union[int, str]], int, str]] = None,
         include_hidden: Optional[Union[Var[bool], bool]] = None,
-        domain: Optional[Union[List, Var[List]]] = None,
+        angle: Optional[Union[Var[int], int]] = None,
+        padding: Optional[Union[Dict[str, int], Var[Dict[str, int]]]] = None,
         data_key: Optional[Union[Var[Union[int, str]], int, str]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[int, str]], int, str]] = None,
@@ -298,10 +299,11 @@ class XAxis(Axis):
 
         Args:
             *children: The children of the component.
-            orientation: The orientation of axis 'top' | 'bottom'
-            x_axis_id: The id of x-axis which is corresponding to the data.
-            include_hidden: Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden
-            domain: The range of the axis. Work best in conjuction with allow_data_overflow.
+            orientation: The orientation of axis 'top' | 'bottom'. Default: "bottom"
+            x_axis_id: The id of x-axis which is corresponding to the data. Default: 0
+            include_hidden: Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden. Default: False
+            angle: The angle of axis ticks. Default: 0
+            padding: Specify the padding of x-axis. Default: {"left": 0, "right": 0}
             data_key: The key of data displayed in the axis.
             hide: If set true, the axis do not display in the chart.
             width: The width of axis which is usually calculated internally.

From e633cd0385687e86695357b7a734fe729b1c821a Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:11:32 +0200
Subject: [PATCH 17/38] default props comment for Legend (#4100)

---
 reflex/components/recharts/general.py  | 11 +++++++----
 reflex/components/recharts/general.pyi | 14 +++++++++-----
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/reflex/components/recharts/general.py b/reflex/components/recharts/general.py
index cc252de57..25c742227 100644
--- a/reflex/components/recharts/general.py
+++ b/reflex/components/recharts/general.py
@@ -73,21 +73,24 @@ class Legend(Recharts):
     # The height of legend container. Number
     height: Var[int]
 
-    # The layout of legend items. 'horizontal' | 'vertical'
+    # The layout of legend items. 'horizontal' | 'vertical'. Default: "horizontal"
     layout: Var[LiteralLayout]
 
-    # The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'.
+    # The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'. Default: "center"
     align: Var[LiteralLegendAlign]
 
-    # The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'.
+    # The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'. Default: "bottom"
     vertical_align: Var[LiteralVerticalAlign]
 
-    # The size of icon in each legend item.
+    # The size of icon in each legend item. Default: 14
     icon_size: Var[int]
 
     # The type of icon in each legend item. 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'
     icon_type: Var[LiteralIconType]
 
+    # The source data of the content to be displayed in the legend, usually calculated internally. Default: []
+    payload: Var[List[Dict[str, Any]]]
+
     # The width of chart container, usually calculated internally.
     chart_width: Var[int]
 
diff --git a/reflex/components/recharts/general.pyi b/reflex/components/recharts/general.pyi
index 0e21c8b85..3b77e32d0 100644
--- a/reflex/components/recharts/general.pyi
+++ b/reflex/components/recharts/general.pyi
@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Callable, Dict, Literal, Optional, Union, overload
+from typing import Any, Callable, Dict, List, Literal, Optional, Union, overload
 
 from reflex.components.component import MemoizationLeaf
 from reflex.constants.colors import Color
@@ -150,6 +150,9 @@ class Legend(Recharts):
                 ],
             ]
         ] = None,
+        payload: Optional[
+            Union[List[Dict[str, Any]], Var[List[Dict[str, Any]]]]
+        ] = None,
         chart_width: Optional[Union[Var[int], int]] = None,
         chart_height: Optional[Union[Var[int], int]] = None,
         margin: Optional[Union[Dict[str, Any], Var[Dict[str, Any]]]] = None,
@@ -202,11 +205,12 @@ class Legend(Recharts):
             *children: The children of the component.
             width: The width of legend container. Number
             height: The height of legend container. Number
-            layout: The layout of legend items. 'horizontal' | 'vertical'
-            align: The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'.
-            vertical_align: The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'.
-            icon_size: The size of icon in each legend item.
+            layout: The layout of legend items. 'horizontal' | 'vertical'. Default: "horizontal"
+            align: The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'. Default: "center"
+            vertical_align: The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'. Default: "bottom"
+            icon_size: The size of icon in each legend item. Default: 14
             icon_type: The type of icon in each legend item. 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'
+            payload: The source data of the content to be displayed in the legend, usually calculated internally. Default: []
             chart_width: The width of chart container, usually calculated internally.
             chart_height: The height of chart container, usually calculated internally.
             margin: The margin of chart container, usually calculated internally.

From 2718cb51eb29c62d5b1dbde900b6af9328cb371e Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:17:14 +0200
Subject: [PATCH 18/38] default props comment for PolarAgnleAxis (#4106)

---
 reflex/components/recharts/polar.py  | 20 ++++++++++----------
 reflex/components/recharts/polar.pyi | 24 ++++++++++++++----------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/reflex/components/recharts/polar.py b/reflex/components/recharts/polar.py
index adeb0eb91..30def03da 100644
--- a/reflex/components/recharts/polar.py
+++ b/reflex/components/recharts/polar.py
@@ -211,28 +211,28 @@ class PolarAngleAxis(Recharts):
     # The outer radius of circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
     radius: Var[Union[int, str]]
 
-    # If false set, axis line will not be drawn. If true set, axis line will be drawn which have the props calculated internally. If object set, axis line will be drawn which have the props mergered by the internal calculated props and the option.
+    # If false set, axis line will not be drawn. If true set, axis line will be drawn which have the props calculated internally. If object set, axis line will be drawn which have the props mergered by the internal calculated props and the option. Default: True
     axis_line: Var[Union[bool, Dict[str, Any]]]
 
-    # The type of axis line.
-    axis_line_type: Var[str]
+    # The type of axis line. Default: "polygon"
+    axis_line_type: Var[LiteralGridType]
 
-    # If false set, tick lines will not be drawn. If true set, tick lines will be drawn which have the props calculated internally. If object set, tick lines will be drawn which have the props mergered by the internal calculated props and the option.
+    # If false set, tick lines will not be drawn. If true set, tick lines will be drawn which have the props calculated internally. If object set, tick lines will be drawn which have the props mergered by the internal calculated props and the option. Default: False
     tick_line: Var[Union[bool, Dict[str, Any]]] = LiteralVar.create(False)
 
-    # The width or height of tick.
-    tick: Var[Union[int, str]]
+    # If false set, ticks will not be drawn. If true set, ticks will be drawn which have the props calculated internally. If object set, ticks will be drawn which have the props mergered by the internal calculated props and the option. Default: True
+    tick: Var[Union[bool, Dict[str, Any]]]
 
     # The array of every tick's value and angle.
     ticks: Var[List[Dict[str, Any]]]
 
-    # The orientation of axis text.
-    orient: Var[str]
+    # The orientation of axis text. Default: "outer"
+    orientation: Var[str]
 
-    # The stroke color of axis
+    # The stroke color of axis. Default: rx.color("gray", 10)
     stroke: Var[Union[str, Color]] = LiteralVar.create(Color("gray", 10))
 
-    # Allow the axis has duplicated categorys or not when the type of axis is "category".
+    # Allow the axis has duplicated categorys or not when the type of axis is "category". Default: True
     allow_duplicated_category: Var[bool]
 
     # Valid children components.
diff --git a/reflex/components/recharts/polar.pyi b/reflex/components/recharts/polar.pyi
index 9d793f3da..12a330950 100644
--- a/reflex/components/recharts/polar.pyi
+++ b/reflex/components/recharts/polar.pyi
@@ -312,13 +312,17 @@ class PolarAngleAxis(Recharts):
         axis_line: Optional[
             Union[Dict[str, Any], Var[Union[Dict[str, Any], bool]], bool]
         ] = None,
-        axis_line_type: Optional[Union[Var[str], str]] = None,
+        axis_line_type: Optional[
+            Union[Literal["circle", "polygon"], Var[Literal["circle", "polygon"]]]
+        ] = None,
         tick_line: Optional[
             Union[Dict[str, Any], Var[Union[Dict[str, Any], bool]], bool]
         ] = None,
-        tick: Optional[Union[Var[Union[int, str]], int, str]] = None,
+        tick: Optional[
+            Union[Dict[str, Any], Var[Union[Dict[str, Any], bool]], bool]
+        ] = None,
         ticks: Optional[Union[List[Dict[str, Any]], Var[List[Dict[str, Any]]]]] = None,
-        orient: Optional[Union[Var[str], str]] = None,
+        orientation: Optional[Union[Var[str], str]] = None,
         stroke: Optional[Union[Color, Var[Union[Color, str]], str]] = None,
         allow_duplicated_category: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
@@ -372,14 +376,14 @@ class PolarAngleAxis(Recharts):
             cx: The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
             cy: The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
             radius: The outer radius of circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy.
-            axis_line: If false set, axis line will not be drawn. If true set, axis line will be drawn which have the props calculated internally. If object set, axis line will be drawn which have the props mergered by the internal calculated props and the option.
-            axis_line_type: The type of axis line.
-            tick_line: If false set, tick lines will not be drawn. If true set, tick lines will be drawn which have the props calculated internally. If object set, tick lines will be drawn which have the props mergered by the internal calculated props and the option.
-            tick: The width or height of tick.
+            axis_line: If false set, axis line will not be drawn. If true set, axis line will be drawn which have the props calculated internally. If object set, axis line will be drawn which have the props mergered by the internal calculated props and the option. Default: True
+            axis_line_type: The type of axis line. Default: "polygon"
+            tick_line: If false set, tick lines will not be drawn. If true set, tick lines will be drawn which have the props calculated internally. If object set, tick lines will be drawn which have the props mergered by the internal calculated props and the option. Default: False
+            tick: If false set, ticks will not be drawn. If true set, ticks will be drawn which have the props calculated internally. If object set, ticks will be drawn which have the props mergered by the internal calculated props and the option. Default: True
             ticks: The array of every tick's value and angle.
-            orient: The orientation of axis text.
-            stroke: The stroke color of axis
-            allow_duplicated_category: Allow the axis has duplicated categorys or not when the type of axis is "category".
+            orientation: The orientation of axis text. Default: "outer"
+            stroke: The stroke color of axis. Default: rx.color("gray", 10)
+            allow_duplicated_category: Allow the axis has duplicated categorys or not when the type of axis is "category". Default: True
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From f05da7ceadef7e033bea8178489e36cee9a08f9c Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:17:59 +0200
Subject: [PATCH 19/38] default props comment for LabelList (#4102)

---
 reflex/components/recharts/general.py  | 8 ++++----
 reflex/components/recharts/general.pyi | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/reflex/components/recharts/general.py b/reflex/components/recharts/general.py
index 25c742227..559362f69 100644
--- a/reflex/components/recharts/general.py
+++ b/reflex/components/recharts/general.py
@@ -227,16 +227,16 @@ class LabelList(Recharts):
     # The key of a group of label values in data.
     data_key: Var[Union[str, int]]
 
-    # The position of each label relative to it view box。"Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
+    # The position of each label relative to it view box. "Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
     position: Var[LiteralPosition]
 
-    # The offset to the specified "position"
+    # The offset to the specified "position". Default: 5
     offset: Var[int]
 
-    # The fill color of each label
+    # The fill color of each label. Default: rx.color("gray", 10)
     fill: Var[Union[str, Color]] = LiteralVar.create(Color("gray", 10))
 
-    # The stroke color of each label
+    # The stroke color of each label. Default: "none"
     stroke: Var[Union[str, Color]] = LiteralVar.create("none")
 
 
diff --git a/reflex/components/recharts/general.pyi b/reflex/components/recharts/general.pyi
index 3b77e32d0..f9603041e 100644
--- a/reflex/components/recharts/general.pyi
+++ b/reflex/components/recharts/general.pyi
@@ -557,10 +557,10 @@ class LabelList(Recharts):
         Args:
             *children: The children of the component.
             data_key: The key of a group of label values in data.
-            position: The position of each label relative to it view box。"Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
-            offset: The offset to the specified "position"
-            fill: The fill color of each label
-            stroke: The stroke color of each label
+            position: The position of each label relative to it view box. "Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
+            offset: The offset to the specified "position". Default: 5
+            fill: The fill color of each label. Default: rx.color("gray", 10)
+            stroke: The stroke color of each label. Default: "none"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From 9f11b83fa96ac4bd9593848a9d15905457e3cf55 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:25:47 +0200
Subject: [PATCH 20/38] default props comment for treemap (#4098)

---
 reflex/components/recharts/charts.py  | 17 ++++++++++-------
 reflex/components/recharts/charts.pyi | 16 +++++++++-------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index 6f79a70ae..40a99c81a 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -457,31 +457,34 @@ class Treemap(RechartsCharts):
 
     alias = "RechartsTreemap"
 
-    # The width of chart container. String or Integer
+    # The width of chart container. String or Integer. Default: "100%"
     width: Var[Union[str, int]] = "100%"  # type: ignore
 
-    # The height of chart container.
+    # The height of chart container. String or Integer. Default: "100%"
     height: Var[Union[str, int]] = "100%"  # type: ignore
 
     # data of treemap. Array
     data: Var[List[Dict[str, Any]]]
 
-    # The key of a group of data which should be unique in a treemap. String | Number | Function
+    # The key of a group of data which should be unique in a treemap. String | Number. Default: "value"
     data_key: Var[Union[str, int]]
 
+    # The key of each sector's name. String. Default: "name"
+    name_key: Var[str]
+
     # The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. Number
     aspect_ratio: Var[int]
 
-    # If set false, animation of area will be disabled.
+    # If set false, animation of area will be disabled. Default: True
     is_animation_active: Var[bool]
 
-    # Specifies when the animation should begin, the unit of this option is ms.
+    # Specifies when the animation should begin, the unit of this option is ms. Default: 0
     animation_begin: Var[int]
 
-    # Specifies the duration of animation, the unit of this option is ms.
+    # Specifies the duration of animation, the unit of this option is ms. Default: 1500
     animation_duration: Var[int]
 
-    # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+    # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'. Default: "ease"
     animation_easing: Var[LiteralAnimationEasing]
 
     # The customized event handler of animation start
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index 2d5036656..de097bc8e 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -957,6 +957,7 @@ class Treemap(RechartsCharts):
         height: Optional[Union[Var[Union[int, str]], int, str]] = None,
         data: Optional[Union[List[Dict[str, Any]], Var[List[Dict[str, Any]]]]] = None,
         data_key: Optional[Union[Var[Union[int, str]], int, str]] = None,
+        name_key: Optional[Union[Var[str], str]] = None,
         aspect_ratio: Optional[Union[Var[int], int]] = None,
         is_animation_active: Optional[Union[Var[bool], bool]] = None,
         animation_begin: Optional[Union[Var[int], int]] = None,
@@ -1020,15 +1021,16 @@ class Treemap(RechartsCharts):
 
         Args:
             *children: The children of the chart component.
-            width: The width of chart container. String or Integer
-            height: The height of chart container.
+            width: The width of chart container. String or Integer. Default: "100%"
+            height: The height of chart container. String or Integer. Default: "100%"
             data: data of treemap. Array
-            data_key: The key of a group of data which should be unique in a treemap. String | Number | Function
+            data_key: The key of a group of data which should be unique in a treemap. String | Number. Default: "value"
+            name_key: The key of each sector's name. String. Default: "name"
             aspect_ratio: The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. Number
-            is_animation_active: If set false, animation of area will be disabled.
-            animation_begin: Specifies when the animation should begin, the unit of this option is ms.
-            animation_duration: Specifies the duration of animation, the unit of this option is ms.
-            animation_easing: The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+            is_animation_active: If set false, animation of area will be disabled. Default: True
+            animation_begin: Specifies when the animation should begin, the unit of this option is ms. Default: 0
+            animation_duration: Specifies the duration of animation, the unit of this option is ms. Default: 1500
+            animation_easing: The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'. Default: "ease"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From 2f8205216a2b87525d7d8426420689db8667674b Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:28:15 +0200
Subject: [PATCH 21/38] default props comment for ResponsiveContainer (#4099)

---
 reflex/components/recharts/general.py  | 11 +++++++----
 reflex/components/recharts/general.pyi |  9 +++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/reflex/components/recharts/general.py b/reflex/components/recharts/general.py
index 559362f69..270707a82 100644
--- a/reflex/components/recharts/general.py
+++ b/reflex/components/recharts/general.py
@@ -30,21 +30,24 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
     # The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number
     aspect: Var[int]
 
-    # The width of chart container. Can be a number or string
+    # The width of chart container. Can be a number or string. Default: "100%"
     width: Var[Union[int, str]]
 
-    # The height of chart container. Number
+    # The height of chart container. Can be a number or string. Default: "100%"
     height: Var[Union[int, str]]
 
-    # The minimum width of chart container.
+    # The minimum width of chart container. Number
     min_width: Var[int]
 
     # The minimum height of chart container. Number
     min_height: Var[int]
 
-    # If specified a positive number, debounced function will be used to handle the resize event.
+    # If specified a positive number, debounced function will be used to handle the resize event. Default: 0
     debounce: Var[int]
 
+    # If specified provides a callback providing the updated chart width and height values.
+    on_resize: EventHandler[lambda: []]
+
     # Valid children components
     _valid_children: List[str] = [
         "AreaChart",
diff --git a/reflex/components/recharts/general.pyi b/reflex/components/recharts/general.pyi
index f9603041e..9aa88a2d3 100644
--- a/reflex/components/recharts/general.pyi
+++ b/reflex/components/recharts/general.pyi
@@ -64,6 +64,7 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
         on_mouse_up: Optional[
             Union[EventHandler, EventSpec, list, Callable, Var]
         ] = None,
+        on_resize: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
         on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
         on_unmount: Optional[
             Union[EventHandler, EventSpec, list, Callable, Var]
@@ -75,11 +76,11 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
         Args:
             *children: The children of the component.
             aspect: The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number
-            width: The width of chart container. Can be a number or string
-            height: The height of chart container. Number
-            min_width: The minimum width of chart container.
+            width: The width of chart container. Can be a number or string. Default: "100%"
+            height: The height of chart container. Can be a number or string. Default: "100%"
+            min_width: The minimum width of chart container. Number
             min_height: The minimum height of chart container. Number
-            debounce: If specified a positive number, debounced function will be used to handle the resize event.
+            debounce: If specified a positive number, debounced function will be used to handle the resize event. Default: 0
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From b0de28208fe9ef936f66867e3dfaeca342e6508b Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:30:34 +0200
Subject: [PATCH 22/38] default props comment for scatterchart (#4096)

---
 reflex/components/recharts/charts.py  | 2 +-
 reflex/components/recharts/charts.pyi | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index 40a99c81a..e2170d7e8 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -394,7 +394,7 @@ class ScatterChart(ChartBase):
 
     alias = "RechartsScatterChart"
 
-    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
+    # The sizes of whitespace around the chart. Default: {"top": 5, "right": 5, "bottom": 5, "left": 5}
     margin: Var[Dict[str, Any]]
 
     # Valid children components
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index de097bc8e..d39167b4d 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -855,7 +855,7 @@ class ScatterChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
-            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
+            margin: The sizes of whitespace around the chart. Default: {"top": 5, "right": 5, "bottom": 5, "left": 5}
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.

From 32a3cb61c1684fa6bb6022b534e4ccf96c5ed64b Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:41:40 +0200
Subject: [PATCH 23/38] default props comment for radarchart (#4094)

---
 reflex/components/recharts/charts.py  | 14 +++++++-------
 reflex/components/recharts/charts.pyi | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index e2170d7e8..89c3e38fd 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -292,25 +292,25 @@ class RadarChart(ChartBase):
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}. Default: {"top": 0, "right": 0, "left": 0, "bottom": 0}
     margin: Var[Dict[str, Any]]
 
-    # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
+    # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage. Default: "50%"
     cx: Var[Union[int, str]]
 
-    # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
+    # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage. Default: "50%"
     cy: Var[Union[int, str]]
 
-    # The angle of first radial direction line.
+    # The angle of first radial direction line. Default: 90
     start_angle: Var[int]
 
-    # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
+    # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'. Default: -270
     end_angle: Var[int]
 
-    # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+    # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: 0
     inner_radius: Var[Union[int, str]]
 
-    # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+    # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: "80%"
     outer_radius: Var[Union[int, str]]
 
     # Valid children components
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index d39167b4d..d79a8371c 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -697,13 +697,13 @@ class RadarChart(ChartBase):
         Args:
             *children: The children of the chart component.
             data: The source data, in which each element is an object.
-            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
-            cx: The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
-            cy: The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
-            start_angle: The angle of first radial direction line.
-            end_angle: The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
-            inner_radius: The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
-            outer_radius: The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}. Default: {"top": 0, "right": 0, "left": 0, "bottom": 0}
+            cx: The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage. Default: "50%"
+            cy: The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage. Default: "50%"
+            start_angle: The angle of first radial direction line. Default: 90
+            end_angle: The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'. Default: -270
+            inner_radius: The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: 0
+            outer_radius: The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: "80%"
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.

From 1bf8c7728e7f6dca0bf5255d2f1dc5b95cf596c6 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:42:32 +0200
Subject: [PATCH 24/38] default props comment for radialbarchart (#4095)

---
 reflex/components/recharts/charts.py  | 18 +++++++++---------
 reflex/components/recharts/charts.pyi | 18 +++++++++---------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index 89c3e38fd..69325bc11 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -346,31 +346,31 @@ class RadialBarChart(ChartBase):
     # The source data which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
+    # The sizes of whitespace around the chart. Default: {"top": 5, "right": 5, "left": 5 "bottom": 5}
     margin: Var[Dict[str, Any]]
 
-    # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
+    # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage. Default: "50%"
     cx: Var[Union[int, str]]
 
-    # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
+    # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage. Default: "50%"
     cy: Var[Union[int, str]]
 
-    # The angle of first radial direction line.
+    # The angle of first radial direction line. Default: 0
     start_angle: Var[int]
 
-    # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
+    # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'. Default: 360
     end_angle: Var[int]
 
-    # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+    # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: "30%"
     inner_radius: Var[Union[int, str]]
 
-    # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+    # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: "100%"
     outer_radius: Var[Union[int, str]]
 
-    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: "10%"
     bar_category_gap: Var[Union[int, str]]
 
-    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
+    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number. Default: 4
     bar_gap: Var[str]
 
     # The size of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index d79a8371c..8a756f9da 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -786,15 +786,15 @@ class RadialBarChart(ChartBase):
         Args:
             *children: The children of the chart component.
             data: The source data which each element is an object.
-            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
-            cx: The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
-            cy: The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
-            start_angle: The angle of first radial direction line.
-            end_angle: The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
-            inner_radius: The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
-            outer_radius: The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
-            bar_category_gap: The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
-            bar_gap: The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
+            margin: The sizes of whitespace around the chart. Default: {"top": 5, "right": 5, "left": 5 "bottom": 5}
+            cx: The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage. Default: "50%"
+            cy: The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage. Default: "50%"
+            start_angle: The angle of first radial direction line. Default: 0
+            end_angle: The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'. Default: 360
+            inner_radius: The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: "30%"
+            outer_radius: The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage. Default: "100%"
+            bar_category_gap: The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: "10%"
+            bar_gap: The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number. Default: 4
             bar_size: The size of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
             width: The width of chart container. String or Integer
             height: The height of chart container.

From 068b3bab42d6a7343c3619a92ab5f74898193c32 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:42:41 +0200
Subject: [PATCH 25/38] default props comment for barchart (#4092)

---
 reflex/components/recharts/charts.py  | 14 +++++++-------
 reflex/components/recharts/charts.pyi |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index 69325bc11..d86eeae95 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -9,7 +9,7 @@ from reflex.components.recharts.general import ResponsiveContainer
 from reflex.constants import EventTriggers
 from reflex.constants.colors import Color
 from reflex.event import EventHandler
-from reflex.vars.base import LiteralVar, Var
+from reflex.vars.base import Var
 
 from .recharts import (
     LiteralAnimationEasing,
@@ -155,11 +155,11 @@ class BarChart(CategoricalChartBase):
 
     alias = "RechartsBarChart"
 
-    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
-    bar_category_gap: Var[Union[str, int]] = LiteralVar.create("10%")
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: "10%"
+    bar_category_gap: Var[Union[str, int]]
 
-    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
-    bar_gap: Var[Union[str, int]] = LiteralVar.create(4)  # type: ignore
+    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number. Default: 4
+    bar_gap: Var[Union[str, int]]
 
     # The width of all the bars in the chart. Number
     bar_size: Var[int]
@@ -167,10 +167,10 @@ class BarChart(CategoricalChartBase):
     # The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
     max_bar_size: Var[int]
 
-    # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape.
+    # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. Default: "none"
     stack_offset: Var[LiteralStackOffset]
 
-    # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
+    # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.) Default: False
     reverse_stack_order: Var[bool]
 
     # Valid children components
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index 8a756f9da..691d9621f 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -358,12 +358,12 @@ class BarChart(CategoricalChartBase):
 
         Args:
             *children: The children of the chart component.
-            bar_category_gap: The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
-            bar_gap: The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
+            bar_category_gap: The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: "10%"
+            bar_gap: The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number. Default: 4
             bar_size: The width of all the bars in the chart. Number
             max_bar_size: The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
-            reverse_stack_order: If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
+            reverse_stack_order: If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.) Default: False
             data: The source data, in which each element is an object.
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.

From 240b12a7f3dc6028198089069ebe495cbd3121b2 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:45:18 +0200
Subject: [PATCH 26/38] default props comment for composedchart (#4093)

---
 reflex/components/recharts/charts.py  | 14 +++++++-------
 reflex/components/recharts/charts.pyi | 12 ++++++------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index d86eeae95..a9f9b0d16 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -217,19 +217,19 @@ class ComposedChart(CategoricalChartBase):
 
     alias = "RechartsComposedChart"
 
-    # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
+    # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'. Default: "auto"
     base_value: Var[Union[int, LiteralComposedChartBaseValue]]
 
-    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
-    bar_category_gap: Var[Union[str, int]]  # type: ignore
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: "10%"
+    bar_category_gap: Var[Union[str, int]]
 
-    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
-    bar_gap: Var[Union[str, int]]  # type: ignore
+    # The gap between two bars in the same category. Default: 4
+    bar_gap: Var[int]
 
-    # The width of all the bars in the chart. Number
+    # The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
     bar_size: Var[int]
 
-    # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
+    # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position). Default: False
     reverse_stack_order: Var[bool]
 
     # Valid children components
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index 691d9621f..41548aed4 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -492,7 +492,7 @@ class ComposedChart(CategoricalChartBase):
             ]
         ] = None,
         bar_category_gap: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        bar_gap: Optional[Union[Var[Union[int, str]], int, str]] = None,
+        bar_gap: Optional[Union[Var[int], int]] = None,
         bar_size: Optional[Union[Var[int], int]] = None,
         reverse_stack_order: Optional[Union[Var[bool], bool]] = None,
         data: Optional[Union[List[Dict[str, Any]], Var[List[Dict[str, Any]]]]] = None,
@@ -562,11 +562,11 @@ class ComposedChart(CategoricalChartBase):
 
         Args:
             *children: The children of the chart component.
-            base_value: The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
-            bar_category_gap: The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
-            bar_gap: The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
-            bar_size: The width of all the bars in the chart. Number
-            reverse_stack_order: If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
+            base_value: The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'. Default: "auto"
+            bar_category_gap: The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number. Default: "10%"
+            bar_gap: The gap between two bars in the same category. Default: 4
+            bar_size: The width or height of each bar. If the barSize is not specified, the size of the bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
+            reverse_stack_order: If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position). Default: False
             data: The source data, in which each element is an object.
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.

From 65c174ed78e8843340c49a45bc50c978a2bf702c Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:45:29 +0200
Subject: [PATCH 27/38] areachart default value for base_value (#4090)

---
 reflex/components/recharts/charts.py  | 2 +-
 reflex/components/recharts/charts.pyi | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index a9f9b0d16..7aa8ce4dc 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -129,7 +129,7 @@ class AreaChart(CategoricalChartBase):
 
     alias = "RechartsAreaChart"
 
-    # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
+    # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'. Default: "auto"
     base_value: Var[Union[int, LiteralComposedChartBaseValue]]
 
     # Valid children components
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index 41548aed4..fea25a96c 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -258,7 +258,7 @@ class AreaChart(CategoricalChartBase):
 
         Args:
             *children: The children of the chart component.
-            base_value: The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
+            base_value: The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'. Default: "auto"
             data: The source data, in which each element is an object.
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.

From ce8695c14c0c26bc853f46a53bd1f899c0975a8e Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:45:43 +0200
Subject: [PATCH 28/38] default props comment for categoricalchartbase (#4091)

---
 reflex/components/recharts/charts.py  |  4 ++--
 reflex/components/recharts/charts.pyi | 20 ++++++++++----------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index 7aa8ce4dc..bc54eb740 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -112,10 +112,10 @@ class CategoricalChartBase(ChartBase):
     # If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
     sync_id: Var[str]
 
-    # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
+    # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function. Default: "index"
     sync_method: Var[LiteralSyncMethod]
 
-    # The layout of area in the chart. 'horizontal' | 'vertical'
+    # The layout of area in the chart. 'horizontal' | 'vertical'. Default: "horizontal"
     layout: Var[LiteralLayout]
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index fea25a96c..2dab3fe7b 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -160,8 +160,8 @@ class CategoricalChartBase(ChartBase):
             data: The source data, in which each element is an object.
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
+            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function. Default: "index"
+            layout: The layout of area in the chart. 'horizontal' | 'vertical'. Default: "horizontal"
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             width: The width of chart container. String or Integer
             height: The height of chart container.
@@ -262,8 +262,8 @@ class AreaChart(CategoricalChartBase):
             data: The source data, in which each element is an object.
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
+            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function. Default: "index"
+            layout: The layout of area in the chart. 'horizontal' | 'vertical'. Default: "horizontal"
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             width: The width of chart container. String or Integer
             height: The height of chart container.
@@ -367,8 +367,8 @@ class BarChart(CategoricalChartBase):
             data: The source data, in which each element is an object.
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
+            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function. Default: "index"
+            layout: The layout of area in the chart. 'horizontal' | 'vertical'. Default: "horizontal"
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.
@@ -460,8 +460,8 @@ class LineChart(CategoricalChartBase):
             data: The source data, in which each element is an object.
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
+            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function. Default: "index"
+            layout: The layout of area in the chart. 'horizontal' | 'vertical'. Default: "horizontal"
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             width: The width of chart container. String or Integer
             height: The height of chart container.
@@ -570,8 +570,8 @@ class ComposedChart(CategoricalChartBase):
             data: The source data, in which each element is an object.
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
-            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-            layout: The layout of area in the chart. 'horizontal' | 'vertical'
+            sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function. Default: "index"
+            layout: The layout of area in the chart. 'horizontal' | 'vertical'. Default: "horizontal"
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             width: The width of chart container. String or Integer
             height: The height of chart container.

From 4a3fd592e9a0d5dca93cd74e13928405094ec65c Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:51:26 +0200
Subject: [PATCH 29/38] default props comment for PolarGrid (#4107)

---
 reflex/components/recharts/polar.py  | 16 ++++++++--------
 reflex/components/recharts/polar.pyi | 16 ++++++++--------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/reflex/components/recharts/polar.py b/reflex/components/recharts/polar.py
index 30def03da..2451e224f 100644
--- a/reflex/components/recharts/polar.py
+++ b/reflex/components/recharts/polar.py
@@ -270,17 +270,17 @@ class PolarGrid(Recharts):
 
     alias = "RechartsPolarGrid"
 
-    # The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
-    cx: Var[Union[int, str]]
+    # The x-coordinate of center.
+    cx: Var[int]
 
-    # The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
-    cy: Var[Union[int, str]]
+    # The y-coordinate of center.
+    cy: Var[int]
 
     # The radius of the inner polar grid.
-    inner_radius: Var[Union[int, str]]
+    inner_radius: Var[int]
 
     # The radius of the outer polar grid.
-    outer_radius: Var[Union[int, str]]
+    outer_radius: Var[int]
 
     # The array of every line grid's angle.
     polar_angles: Var[List[int]]
@@ -288,10 +288,10 @@ class PolarGrid(Recharts):
     # The array of every line grid's radius.
     polar_radius: Var[List[int]]
 
-    # The type of polar grids. 'polygon' | 'circle'
+    # The type of polar grids. 'polygon' | 'circle'. Default: "polygon"
     grid_type: Var[LiteralGridType]
 
-    # The stroke color of grid
+    # The stroke color of grid. Default: rx.color("gray", 10)
     stroke: Var[Union[str, Color]] = LiteralVar.create(Color("gray", 10))
 
     # Valid children components
diff --git a/reflex/components/recharts/polar.pyi b/reflex/components/recharts/polar.pyi
index 12a330950..0e023f62e 100644
--- a/reflex/components/recharts/polar.pyi
+++ b/reflex/components/recharts/polar.pyi
@@ -403,10 +403,10 @@ class PolarGrid(Recharts):
     def create(  # type: ignore
         cls,
         *children,
-        cx: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        cy: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        inner_radius: Optional[Union[Var[Union[int, str]], int, str]] = None,
-        outer_radius: Optional[Union[Var[Union[int, str]], int, str]] = None,
+        cx: Optional[Union[Var[int], int]] = None,
+        cy: Optional[Union[Var[int], int]] = None,
+        inner_radius: Optional[Union[Var[int], int]] = None,
+        outer_radius: Optional[Union[Var[int], int]] = None,
         polar_angles: Optional[Union[List[int], Var[List[int]]]] = None,
         polar_radius: Optional[Union[List[int], Var[List[int]]]] = None,
         grid_type: Optional[
@@ -460,14 +460,14 @@ class PolarGrid(Recharts):
 
         Args:
             *children: The children of the component.
-            cx: The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
-            cy: The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container height.
+            cx: The x-coordinate of center.
+            cy: The y-coordinate of center.
             inner_radius: The radius of the inner polar grid.
             outer_radius: The radius of the outer polar grid.
             polar_angles: The array of every line grid's angle.
             polar_radius: The array of every line grid's radius.
-            grid_type: The type of polar grids. 'polygon' | 'circle'
-            stroke: The stroke color of grid
+            grid_type: The type of polar grids. 'polygon' | 'circle'. Default: "polygon"
+            stroke: The stroke color of grid. Default: rx.color("gray", 10)
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From c244418aaaeebe9b6a21ac4a803aaf306b707b6e Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:51:36 +0200
Subject: [PATCH 30/38] default props comment for Reference (#4121)

---
 reflex/components/recharts/cartesian.py  |  8 ++++----
 reflex/components/recharts/cartesian.pyi | 24 ++++++++++++------------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 5515162cc..67474126d 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -612,19 +612,19 @@ class ErrorBar(Recharts):
 class Reference(Recharts):
     """A base class for reference components in Reference."""
 
-    # The id of x-axis which is corresponding to the data.
+    # The id of x-axis which is corresponding to the data. Default: 0
     x_axis_id: Var[Union[str, int]]
 
-    # The id of y-axis which is corresponding to the data.
+    # The id of y-axis which is corresponding to the data. Default: 0
     y_axis_id: Var[Union[str, int]]
 
-    # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+    # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. Default: "discard"
     if_overflow: Var[LiteralIfOverflow]
 
     # If set a string or a number, default label will be drawn, and the option is content.
     label: Var[Union[str, int]]
 
-    # If set true, the line will be rendered in front of bars in BarChart, etc.
+    # If set true, the line will be rendered in front of bars in BarChart, etc. Default: False
     is_front: Var[bool]
 
 
diff --git a/reflex/components/recharts/cartesian.pyi b/reflex/components/recharts/cartesian.pyi
index 30f6a4160..dc6965299 100644
--- a/reflex/components/recharts/cartesian.pyi
+++ b/reflex/components/recharts/cartesian.pyi
@@ -1697,11 +1697,11 @@ class Reference(Recharts):
 
         Args:
             *children: The children of the component.
-            x_axis_id: The id of x-axis which is corresponding to the data.
-            y_axis_id: The id of y-axis which is corresponding to the data.
-            if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+            x_axis_id: The id of x-axis which is corresponding to the data. Default: 0
+            y_axis_id: The id of y-axis which is corresponding to the data. Default: 0
+            if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. Default: "discard"
             label: If set a string or a number, default label will be drawn, and the option is content.
-            is_front: If set true, the line will be rendered in front of bars in BarChart, etc.
+            is_front: If set true, the line will be rendered in front of bars in BarChart, etc. Default: False
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1788,11 +1788,11 @@ class ReferenceLine(Reference):
             stroke: The color of the reference line.
             stroke_width: The width of the stroke. Default: 1
             segment: Array of endpoints in { x, y } format. These endpoints would be used to draw the ReferenceLine.
-            x_axis_id: The id of x-axis which is corresponding to the data.
-            y_axis_id: The id of y-axis which is corresponding to the data.
-            if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+            x_axis_id: The id of x-axis which is corresponding to the data. Default: 0
+            y_axis_id: The id of y-axis which is corresponding to the data. Default: 0
+            if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. Default: "discard"
             label: If set a string or a number, default label will be drawn, and the option is content.
-            is_front: If set true, the line will be rendered in front of bars in BarChart, etc.
+            is_front: If set true, the line will be rendered in front of bars in BarChart, etc. Default: False
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1879,11 +1879,11 @@ class ReferenceDot(Reference):
             r: The radius of dot.
             fill: The color of the area fill.
             stroke: The color of the line stroke.
-            x_axis_id: The id of x-axis which is corresponding to the data.
-            y_axis_id: The id of y-axis which is corresponding to the data.
-            if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+            x_axis_id: The id of x-axis which is corresponding to the data. Default: 0
+            y_axis_id: The id of y-axis which is corresponding to the data. Default: 0
+            if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas. Default: "discard"
             label: If set a string or a number, default label will be drawn, and the option is content.
-            is_front: If set true, the line will be rendered in front of bars in BarChart, etc.
+            is_front: If set true, the line will be rendered in front of bars in BarChart, etc. Default: False
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From 535c8f904d2eff8677a4fe752345b49794884d0c Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:54:45 +0200
Subject: [PATCH 31/38] default props comment for funnelchart (#4097)

---
 reflex/components/recharts/charts.py  | 4 ++--
 reflex/components/recharts/charts.pyi | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index bc54eb740..d1fd419a7 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -437,10 +437,10 @@ class FunnelChart(ChartBase):
 
     alias = "RechartsFunnelChart"
 
-    # The layout of bars in the chart. centeric
+    # The layout of bars in the chart. Default: "centric"
     layout: Var[str]
 
-    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
+    # The sizes of whitespace around the chart. Default: {"top": 5, "right": 5, "bottom": 5, "left": 5}
     margin: Var[Dict[str, Any]]
 
     # The stroke color of each bar. String | Object
diff --git a/reflex/components/recharts/charts.pyi b/reflex/components/recharts/charts.pyi
index 2dab3fe7b..cda2c0f04 100644
--- a/reflex/components/recharts/charts.pyi
+++ b/reflex/components/recharts/charts.pyi
@@ -929,8 +929,8 @@ class FunnelChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
-            layout: The layout of bars in the chart. centeric
-            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
+            layout: The layout of bars in the chart. Default: "centric"
+            margin: The sizes of whitespace around the chart. Default: {"top": 5, "right": 5, "bottom": 5, "left": 5}
             stroke: The stroke color of each bar. String | Object
             width: The width of chart container. String or Integer
             height: The height of chart container.

From ffcf87d587da885dbe04bcda8ed5db16435f45e3 Mon Sep 17 00:00:00 2001
From: Carlos <36110765+carlosabadia@users.noreply.github.com>
Date: Wed, 9 Oct 2024 02:00:42 +0200
Subject: [PATCH 32/38] default props comment for Radar (#4104)

---
 reflex/components/recharts/polar.py  | 34 +++++++----
 reflex/components/recharts/polar.pyi | 87 +++++++++++++++-------------
 2 files changed, 70 insertions(+), 51 deletions(-)

diff --git a/reflex/components/recharts/polar.py b/reflex/components/recharts/polar.py
index 2451e224f..5e95fb1cd 100644
--- a/reflex/components/recharts/polar.py
+++ b/reflex/components/recharts/polar.py
@@ -106,36 +106,50 @@ class Radar(Recharts):
     # The coordinates of all the vertexes of the radar shape, like [{ x, y }].
     points: Var[List[Dict[str, Any]]]
 
-    # If false set, dots will not be drawn
+    # If false set, dots will not be drawn. Default: True
     dot: Var[bool]
 
-    # Stoke color
+    # Stoke color. Default: rx.color("accent", 9)
     stroke: Var[Union[str, Color]] = LiteralVar.create(Color("accent", 9))
 
-    # Fill color
+    # Fill color. Default: rx.color("accent", 3)
     fill: Var[str] = LiteralVar.create(Color("accent", 3))
 
-    # opacity
+    # opacity. Default: 0.6
     fill_opacity: Var[float] = LiteralVar.create(0.6)
 
-    # The type of icon in legend. If set to 'none', no legend item will be rendered.
-    legend_type: Var[str]
+    # The type of icon in legend. If set to 'none', no legend item will be rendered. Default: "rect"
+    legend_type: Var[LiteralLegendType]
 
-    # If false set, labels will not be drawn
+    # If false set, labels will not be drawn. Default: True
     label: Var[bool]
 
-    # Specifies when the animation should begin, the unit of this option is ms.
+    # If set false, animation of polygon will be disabled. Default: True in CSR, and False in SSR
+    is_animation_active: Var[bool]
+
+    # Specifies when the animation should begin, the unit of this option is ms. Default: 0
     animation_begin: Var[int]
 
-    # Specifies the duration of animation, the unit of this option is ms.
+    # Specifies the duration of animation, the unit of this option is ms. Default: 1500
     animation_duration: Var[int]
 
-    # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+    # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'. Default: "ease"
     animation_easing: Var[LiteralAnimationEasing]
 
     # Valid children components
     _valid_children: List[str] = ["LabelList"]
 
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            EventTriggers.ON_ANIMATION_START: lambda: [],
+            EventTriggers.ON_ANIMATION_END: lambda: [],
+        }
+
 
 class RadialBar(Recharts):
     """A RadialBar chart component in Recharts."""
diff --git a/reflex/components/recharts/polar.pyi b/reflex/components/recharts/polar.pyi
index 0e023f62e..32e7e5b76 100644
--- a/reflex/components/recharts/polar.pyi
+++ b/reflex/components/recharts/polar.pyi
@@ -126,6 +126,7 @@ class Pie(Recharts):
         ...
 
 class Radar(Recharts):
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -137,8 +138,40 @@ class Radar(Recharts):
         stroke: Optional[Union[Color, Var[Union[Color, str]], str]] = None,
         fill: Optional[Union[Var[str], str]] = None,
         fill_opacity: Optional[Union[Var[float], float]] = None,
-        legend_type: Optional[Union[Var[str], str]] = None,
+        legend_type: Optional[
+            Union[
+                Literal[
+                    "circle",
+                    "cross",
+                    "diamond",
+                    "line",
+                    "none",
+                    "plainline",
+                    "rect",
+                    "square",
+                    "star",
+                    "triangle",
+                    "wye",
+                ],
+                Var[
+                    Literal[
+                        "circle",
+                        "cross",
+                        "diamond",
+                        "line",
+                        "none",
+                        "plainline",
+                        "rect",
+                        "square",
+                        "star",
+                        "triangle",
+                        "wye",
+                    ]
+                ],
+            ]
+        ] = None,
         label: Optional[Union[Var[bool], bool]] = None,
+        is_animation_active: Optional[Union[Var[bool], bool]] = None,
         animation_begin: Optional[Union[Var[int], int]] = None,
         animation_duration: Optional[Union[Var[int], int]] = None,
         animation_easing: Optional[
@@ -153,39 +186,10 @@ class Radar(Recharts):
         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, Callable, Var]] = None,
-        on_click: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_context_menu: Optional[
+        on_animation_end: Optional[
             Union[EventHandler, EventSpec, list, Callable, Var]
         ] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_focus: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_mount: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, Callable, Var]
-        ] = None,
-        on_scroll: Optional[Union[EventHandler, EventSpec, list, Callable, Var]] = None,
-        on_unmount: Optional[
+        on_animation_start: Optional[
             Union[EventHandler, EventSpec, list, Callable, Var]
         ] = None,
         **props,
@@ -196,15 +200,16 @@ class Radar(Recharts):
             *children: The children of the component.
             data_key: The key of a group of data which should be unique in a radar chart.
             points: The coordinates of all the vertexes of the radar shape, like [{ x, y }].
-            dot: If false set, dots will not be drawn
-            stroke: Stoke color
-            fill: Fill color
-            fill_opacity: opacity
-            legend_type: The type of icon in legend. If set to 'none', no legend item will be rendered.
-            label: If false set, labels will not be drawn
-            animation_begin: Specifies when the animation should begin, the unit of this option is ms.
-            animation_duration: Specifies the duration of animation, the unit of this option is ms.
-            animation_easing: The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+            dot: If false set, dots will not be drawn. Default: True
+            stroke: Stoke color. Default: rx.color("accent", 9)
+            fill: Fill color. Default: rx.color("accent", 3)
+            fill_opacity: opacity. Default: 0.6
+            legend_type: The type of icon in legend. If set to 'none', no legend item will be rendered. Default: "rect"
+            label: If false set, labels will not be drawn. Default: True
+            is_animation_active: If set false, animation of polygon will be disabled. Default: True in CSR, and False in SSR
+            animation_begin: Specifies when the animation should begin, the unit of this option is ms. Default: 0
+            animation_duration: Specifies the duration of animation, the unit of this option is ms. Default: 1500
+            animation_easing: The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'. Default: "ease"
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

From 0e7627d1c4b2a19a0bfa1adfb3ae39e859c4f571 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Minh=20Ph=C3=BA?= <nguyenmphu@outlook.com>
Date: Wed, 9 Oct 2024 22:58:08 +0700
Subject: [PATCH 33/38] Add Vietnamese README docs (#4138)

---
 README.md         |   2 +-
 docs/vi/README.md | 267 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 268 insertions(+), 1 deletion(-)
 create mode 100644 docs/vi/README.md

diff --git a/README.md b/README.md
index c249aea9f..9c965b00f 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
 
 ---
 
-[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md)
+[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)
 
 ---
 
diff --git a/docs/vi/README.md b/docs/vi/README.md
new file mode 100644
index 000000000..df7a31530
--- /dev/null
+++ b/docs/vi/README.md
@@ -0,0 +1,267 @@
+```diff
++ Bạn đang tìm kiếm Pynecone? Bạn đã tìm đúng. Pynecone đã được đổi tên thành Reflex. +
+```
+
+<div align="center">
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_dark.svg#gh-light-mode-only" alt="Reflex Logo" width="300px">
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/reflex_light.svg#gh-dark-mode-only" alt="Reflex Logo" width="300px">
+
+<hr>
+
+### **✨ Ứng dụng web hiệu suất cao, tùy chỉnh bằng Python thuần. Deploy trong vài giây. ✨**
+[![PyPI version](https://badge.fury.io/py/reflex.svg)](https://badge.fury.io/py/reflex)
+![versions](https://img.shields.io/pypi/pyversions/reflex.svg)
+[![Documentation](https://img.shields.io/badge/Documentation%20-Introduction%20-%20%23007ec6)](https://reflex.dev/docs/getting-started/introduction)
+[![Discord](https://img.shields.io/discord/1029853095527727165?color=%237289da&label=Discord)](https://discord.gg/T5WSbC2YtQ)
+</div>
+
+---
+
+[English](https://github.com/reflex-dev/reflex/blob/main/README.md) | [简体中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_cn/README.md) | [繁體中文](https://github.com/reflex-dev/reflex/blob/main/docs/zh/zh_tw/README.md) | [Türkçe](https://github.com/reflex-dev/reflex/blob/main/docs/tr/README.md) | [हिंदी](https://github.com/reflex-dev/reflex/blob/main/docs/in/README.md) | [Português (Brasil)](https://github.com/reflex-dev/reflex/blob/main/docs/pt/pt_br/README.md) | [Italiano](https://github.com/reflex-dev/reflex/blob/main/docs/it/README.md) | [Español](https://github.com/reflex-dev/reflex/blob/main/docs/es/README.md) | [한국어](https://github.com/reflex-dev/reflex/blob/main/docs/kr/README.md) | [日本語](https://github.com/reflex-dev/reflex/blob/main/docs/ja/README.md) | [Deutsch](https://github.com/reflex-dev/reflex/blob/main/docs/de/README.md) | [Persian (پارسی)](https://github.com/reflex-dev/reflex/blob/main/docs/pe/README.md) | [Tiếng Việt](https://github.com/reflex-dev/reflex/blob/main/docs/vi/README.md)
+
+---
+
+# Reflex
+
+Reflex là một thư viện để xây dựng ứng dụng web toàn bộ bằng Python thuần.
+
+Các tính năng chính:
+* **Python thuần tuý** - Viết toàn bộ ứng dụng cả backend và frontend hoàn toàn bằng Python, không cần học JavaScript.
+* **Full Flexibility** - Reflex dễ dàng để bắt đầu, nhưng cũng có thể mở rộng lên các ứng dụng phức tạp.
+* **Deploy Instantly** - Sau khi xây dựng ứng dụng, bạn có thể triển khai bằng [một dòng lệnh](https://reflex.dev/docs/hosting/deploy-quick-start/) hoặc triển khai trên server của riêng bạn.
+
+Đọc [bài viết về kiến trúc hệ thống](https://reflex.dev/blog/2024-03-21-reflex-architecture/#the-reflex-architecture) để hiểu rõ các hoạt động của Reflex.
+
+## ⚙️ Cài đặt
+
+Mở cửa sổ lệnh và chạy (Yêu cầu Python phiên bản 3.9+):
+
+```bash
+pip install reflex
+```
+
+## 🥳 Tạo ứng dụng đầu tiên
+
+Cài đặt `reflex` cũng như cài đặt công cụ dòng lệnh `reflex`.
+
+Kiểm tra việc cài đặt đã thành công hay chưa bằng cách tạo mới một ứng dụng. (Thay `my_app_name` bằng tên ứng dụng của bạn):
+
+```bash
+mkdir my_app_name
+cd my_app_name
+reflex init
+```
+
+Lệnh này tạo ra một ứng dụng mẫu trong một thư mục mới. 
+
+Bạn có thể chạy ứng dụng ở chế độ phát triển.
+
+```bash
+reflex run
+```
+
+Bạn có thể xem ứng dụng của bạn ở địa chỉ http://localhost:3000.
+
+Bạn có thể thay đổi mã nguồn ở `my_app_name/my_app_name.py`. Reflex nhanh chóng làm mới và bạn có thể thấy thay đổi trên ứng dụng của bạn ngay lập tức khi bạn lưu file.
+
+
+## 🫧 Ứng dụng ví dụ
+
+Bắt đầu với ví dụ: tạo một ứng dụng tạo ảnh bằng [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). Để cho đơn giản, chúng  ta sẽ sử dụng [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), nhưng bạn có thể sử dụng model của chính bạn được triển khai trên local.
+
+&nbsp;
+
+<div align="center">
+<img src="https://raw.githubusercontent.com/reflex-dev/reflex/main/docs/images/dalle.gif" alt="A frontend wrapper for DALL·E, shown in the process of generating an image." width="550" />
+</div>
+
+&nbsp;
+
+Đây là toàn bộ đoạn mã để xây dựng ứng dụng trên. Nó được viết hoàn toàn trong một file Python!
+
+
+  
+```python
+import reflex as rx
+import openai
+
+openai_client = openai.OpenAI()
+
+
+class State(rx.State):
+    """The app state."""
+
+    prompt = ""
+    image_url = ""
+    processing = False
+    complete = False
+
+    def get_image(self):
+        """Get the image from the prompt."""
+        if self.prompt == "":
+            return rx.window_alert("Prompt Empty")
+
+        self.processing, self.complete = True, False
+        yield
+        response = openai_client.images.generate(
+            prompt=self.prompt, n=1, size="1024x1024"
+        )
+        self.image_url = response.data[0].url
+        self.processing, self.complete = False, True
+
+
+def index():
+    return rx.center(
+        rx.vstack(
+            rx.heading("DALL-E", font_size="1.5em"),
+            rx.input(
+                placeholder="Enter a prompt..",
+                on_blur=State.set_prompt,
+                width="25em",
+            ),
+            rx.button(
+                "Generate Image", 
+                on_click=State.get_image,
+                width="25em",
+                loading=State.processing
+            ),
+            rx.cond(
+                State.complete,
+                rx.image(src=State.image_url, width="20em"),
+            ),
+            align="center",
+        ),
+        width="100%",
+        height="100vh",
+    )
+
+# Add state and page to the app.
+app = rx.App()
+app.add_page(index, title="Reflex:DALL-E")
+```
+
+
+
+
+
+## Hãy phân tích chi tiết.
+
+<div align="center">
+<img src="../images/dalle_colored_code_example.png" alt="Explaining the differences between backend and frontend parts of the DALL-E app." width="900" />
+</div>
+
+
+### **Reflex UI**
+
+Bắt đầu với giao diện chính.
+
+```python
+def index():
+    return rx.center(
+        ...
+    )
+```
+
+Hàm `index` định nghĩa phần giao diện chính của ứng dụng.
+
+Chúng tôi sử dụng các component (thành phần) khác nhau như `center`, `vstack`, `input` và `button` để xây dựng giao diện phía trước.
+Các component có thể được lồng vào nhau để tạo ra các bố cục phức tạp. Và bạn cũng có thể sử dụng từ khoá `args` để tận dụng đầy đủ sức mạnh của CSS.
+
+Reflex có đến hơn [60 component được xây dựng sẵn](https://reflex.dev/docs/library) để giúp bạn bắt đầu. Chúng ta có thể tạo ra một component mới khá dễ dàng, thao khảo: [xây dựng component của riêng bạn](https://reflex.dev/docs/wrapping-react/overview/).
+
+### **State**
+
+Reflex biểu diễn giao diện bằng các hàm của state (trạng thái).
+
+```python
+class State(rx.State):
+    """The app state."""
+    prompt = ""
+    image_url = ""
+    processing = False
+    complete = False
+
+```
+
+Một state định nghĩa các biến (được gọi là vars) có thể thay đổi trong một ứng dụng và cho phép các hàm có thể thay đổi chúng.
+
+Tại đây state được cấu thành từ một `prompt` và `image_url`.
+Có cũng những biến boolean `processing` và `complete`
+để chỉ ra khi nào tắt nút (trong quá trình tạo hình ảnh)
+và khi nào hiển thị hình ảnh kết quả.
+
+### **Event Handlers**
+
+```python
+def get_image(self):
+    """Get the image from the prompt."""
+    if self.prompt == "":
+        return rx.window_alert("Prompt Empty")
+
+    self.processing, self.complete = True, False
+    yield
+    response = openai_client.images.generate(
+        prompt=self.prompt, n=1, size="1024x1024"
+    )
+    self.image_url = response.data[0].url
+    self.processing, self.complete = False, True
+```
+
+Với các state, chúng ta định nghĩa các hàm có thể thay đổi state vars được gọi là event handlers. Event handler là cách chúng ta có thể thay đổi state trong Reflex. Chúng có thể là phản hồi khi người dùng thao tác, chằng hạn khi nhấn vào nút hoặc khi đang nhập trong text box. Các hành động này được gọi là event.
+
+Ứng dụng DALL·E. của chúng ta có một event handler, `get_image` để lấy hình ảnh từ OpenAI API. Sử dụng từ khoá `yield` in ở giữa event handler để cập nhật giao diện. Hoặc giao diện có thể cập nhật ở cuối event handler.
+
+### **Routing**
+
+Cuối cùng, chúng ta định nghĩa một ứng dụng.
+
+```python
+app = rx.App()
+```
+
+Chúng ta thêm một trang ở đầu ứng dụng bằng index component. Chúng ta cũng thêm tiêu đề của ứng dụng để hiển thị lên trình duyệt.
+
+
+```python
+app.add_page(index, title="DALL-E")
+```
+
+Bạn có thể tạo một ứng dụng nhiều trang bằng cách thêm trang.
+
+## 📑 Tài liệu
+
+<div align="center">
+
+📑 [Docs](https://reflex.dev/docs/getting-started/introduction) &nbsp; |  &nbsp; 🗞️ [Blog](https://reflex.dev/blog) &nbsp; |  &nbsp; 📱 [Component Library](https://reflex.dev/docs/library) &nbsp; |  &nbsp; 🖼️ [Gallery](https://reflex.dev/docs/gallery) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
+
+</div>
+
+
+## ✅ Status
+
+Reflex phát hành vào tháng 12/2022 với tên là Pynecone.
+
+Đến tháng 02/2024, chúng tôi tạo ra dịch vụ dưới phiên bản alpha! Trong thời gian này mọi người có thể triển khai ứng dụng hoàn toàn miễn phí. Xem [roadmap](https://github.com/reflex-dev/reflex/issues/2727) để biết thêm chi tiết.
+
+Reflex ra phiên bản mới với các tính năng mới hàng tuần! Hãy :star: star và :eyes: watch repo này để thấy các cập nhật mới nhất.
+
+## Contributing
+
+Chúng tôi chào đón mọi đóng góp dù lớn hay nhỏ. Dưới đây là các cách để bắt đầu với cộng đồng Reflex.
+
+-   **Discord**: [Discord](https://discord.gg/T5WSbC2YtQ) của chúng tôi là nơi tốt nhất để nhờ sự giúp đỡ và thảo luận các bạn có thể đóng góp.
+-   **GitHub Discussions**: Là cách tốt nhất để thảo luận về các tính năng mà bạn có thể đóng góp hoặc những điều bạn chưa rõ.
+-   **GitHub Issues**: [Issues](https://github.com/reflex-dev/reflex/issues) là nơi tốt nhất để thông báo. Ngoài ra bạn có thể sửa chữa các vấn đề bằng cách tạo PR.
+
+Chúng tôi luôn sẵn sàng tìm kiếm các contributor, bất kể kinh nghiệm. Để tham gia đóng góp, xin mời xem 
+[CONTIBUTING.md](https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md)
+
+
+## Xin cảm ơn các Contributors:
+<a href="https://github.com/reflex-dev/reflex/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=reflex-dev/reflex" />
+</a>
+
+## License
+
+Reflex là mã nguồn mở và sử dụng giấy phép [Apache License 2.0](LICENSE).

From f3b8b2e33646c962bc2c5ea3a125e22517c4c412 Mon Sep 17 00:00:00 2001
From: ruhz3 <96fbgudwn@gmail.com>
Date: Thu, 10 Oct 2024 03:36:33 +0900
Subject: [PATCH 34/38] First use environment variable as npm registry (#4082)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* First use environment variable as npm registry

* use NPM_CONFIG_REGISTRY as env variable

---------

Co-authored-by: 류형주/인공지능팀 <hyungju.ryu@ahnlab.com>
---
 reflex/utils/prerequisites.py |  4 ++--
 reflex/utils/registry.py      | 20 +++++++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/reflex/utils/prerequisites.py b/reflex/utils/prerequisites.py
index 3c2875204..34ed5f53f 100644
--- a/reflex/utils/prerequisites.py
+++ b/reflex/utils/prerequisites.py
@@ -37,7 +37,7 @@ from reflex.config import Config, get_config
 from reflex.utils import console, net, path_ops, processes
 from reflex.utils.exceptions import GeneratedCodeHasNoFunctionDefs
 from reflex.utils.format import format_library_name
-from reflex.utils.registry import _get_best_registry
+from reflex.utils.registry import _get_npm_registry
 
 CURRENTLY_INSTALLING_NODE = False
 
@@ -620,7 +620,7 @@ def initialize_package_json():
     code = _compile_package_json()
     output_path.write_text(code)
 
-    best_registry = _get_best_registry()
+    best_registry = _get_npm_registry()
     bun_config_path = get_web_dir() / constants.Bun.CONFIG_PATH
     bun_config_path.write_text(
         f"""
diff --git a/reflex/utils/registry.py b/reflex/utils/registry.py
index 551292f2d..6b87c163d 100644
--- a/reflex/utils/registry.py
+++ b/reflex/utils/registry.py
@@ -1,8 +1,10 @@
 """Utilities for working with registries."""
 
+import os
+
 import httpx
 
-from reflex.utils import console
+from reflex.utils import console, net
 
 
 def latency(registry: str) -> int:
@@ -15,7 +17,7 @@ def latency(registry: str) -> int:
         int: The latency of the registry in microseconds.
     """
     try:
-        return httpx.get(registry).elapsed.microseconds
+        return net.get(registry).elapsed.microseconds
     except httpx.HTTPError:
         console.info(f"Failed to connect to {registry}.")
         return 10_000_000
@@ -34,7 +36,7 @@ def average_latency(registry, attempts: int = 3) -> int:
     return sum(latency(registry) for _ in range(attempts)) // attempts
 
 
-def _get_best_registry() -> str:
+def get_best_registry() -> str:
     """Get the best registry based on latency.
 
     Returns:
@@ -46,3 +48,15 @@ def _get_best_registry() -> str:
     ]
 
     return min(registries, key=average_latency)
+
+
+def _get_npm_registry() -> str:
+    """Get npm registry. If environment variable is set, use it first.
+
+    Returns:
+        str:
+    """
+    if npm_registry := os.environ.get("NPM_CONFIG_REGISTRY", ""):
+        return npm_registry
+    else:
+        return get_best_registry()

From 60b6d4e7f2cab34e12af81f1869a3a8c31433437 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Brand=C3=A9ho?= <thomas.brandeho@gmail.com>
Date: Wed, 9 Oct 2024 13:24:03 -0700
Subject: [PATCH 35/38] only run macOS job on merge (#4139)

* update workflow

* skip more in unit tests

* try something else to prevent adding macos job to pool

* exclude too much

* fix units-text with macOS excluded

* also drop macOS job in integration tests

* readd macos job separately to only run on merge
---
 .github/workflows/integration_tests.yml | 47 +++++++++++++++++++++++--
 .github/workflows/unit_tests.yml        | 31 ++++++++++++++--
 2 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/integration_tests.yml b/.github/workflows/integration_tests.yml
index e9fecc81a..106ac1383 100644
--- a/.github/workflows/integration_tests.yml
+++ b/.github/workflows/integration_tests.yml
@@ -42,7 +42,7 @@ jobs:
       fail-fast: false
       matrix:
         # Show OS combos first in GUI
-        os: [ubuntu-latest, windows-latest, macos-12]
+        os: [ubuntu-latest, windows-latest]
         python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
         exclude:
           - os: windows-latest
@@ -122,7 +122,7 @@ jobs:
       fail-fast: false
       matrix:
         # Show OS combos first in GUI
-        os: [ubuntu-latest, windows-latest, macos-12]
+        os: [ubuntu-latest, windows-latest]
         python-version: ['3.10.11', '3.11.4']
 
     env:
@@ -161,4 +161,45 @@ jobs:
           poetry run python benchmarks/benchmark_web_size.py --os "${{ matrix.os }}"
           --python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
           --pr-id "${{ github.event.pull_request.id }}" --branch-name "${{ github.head_ref || github.ref_name }}"
-          --app-name "reflex-web" --path ./reflex-web/.web
\ No newline at end of file
+          --app-name "reflex-web" --path ./reflex-web/.web
+  
+  reflex-web-macos:
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ['3.11.5', '3.12.0']
+    runs-on: macos-12
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup_build_env
+        with:
+          python-version: ${{ matrix.python-version }}
+          run-poetry-install: true
+          create-venv-at-path: .venv
+      - name: Clone Reflex Website Repo
+        uses: actions/checkout@v4
+        with:
+          repository: reflex-dev/reflex-web
+          ref: main
+          path: reflex-web
+      - name: Install Requirements for reflex-web
+        working-directory: ./reflex-web
+        run: poetry run uv pip install -r requirements.txt
+      - name: Install additional dependencies for DB access
+        run: poetry run uv pip install psycopg2-binary
+      - name: Init Website for reflex-web
+        working-directory: ./reflex-web
+        run: poetry run reflex init
+      - name: Run Website and Check for errors
+        run: |
+          # Check that npm is home
+          npm -v
+          poetry run bash scripts/integration.sh ./reflex-web prod
+      - name: Measure and upload .web size
+        run:
+          poetry run python benchmarks/benchmark_web_size.py --os "${{ matrix.os }}"
+          --python-version "${{ matrix.python-version }}" --commit-sha "${{ github.sha }}"
+          --pr-id "${{ github.event.pull_request.id }}" --branch-name "${{ github.head_ref || github.ref_name }}"
+          --app-name "reflex-web" --path ./reflex-web/.web
+  
\ No newline at end of file
diff --git a/.github/workflows/unit_tests.yml b/.github/workflows/unit_tests.yml
index 09e489949..c76918583 100644
--- a/.github/workflows/unit_tests.yml
+++ b/.github/workflows/unit_tests.yml
@@ -27,7 +27,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-12]
+        os: [ubuntu-latest, windows-latest]
         python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
         # Windows is a bit behind on Python version availability in Github
         exclude:
@@ -41,6 +41,7 @@ jobs:
           - os: windows-latest
             python-version: '3.9.13'
     runs-on: ${{ matrix.os }}
+
     # Service containers to run with `runner-job`
     services:
       # Label used to access the service container
@@ -78,4 +79,30 @@ jobs:
           export PYTHONUNBUFFERED=1
           poetry run uv pip install "pydantic~=1.10"
           poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
-      - run: poetry run coverage html
+      - name: Generate coverage report
+        run: poetry run coverage html
+
+  unit-tests-macos:
+    timeout-minutes: 30
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    strategy:
+      fail-fast: false
+      matrix:
+        python-version: ['3.9.18', '3.10.13', '3.11.5', '3.12.0']
+    runs-on: macos-12
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/setup_build_env
+        with:
+          python-version: ${{ matrix.python-version }}
+          run-poetry-install: true
+          create-venv-at-path: .venv
+      - name: Run unit tests
+        run: |
+          export PYTHONUNBUFFERED=1
+          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
+      - name: Run unit tests w/ pydantic v1
+        run: |
+          export PYTHONUNBUFFERED=1
+          poetry run uv pip install "pydantic~=1.10"
+          poetry run pytest tests/units --cov --no-cov-on-fail --cov-report=
\ No newline at end of file

From 91ab8ac574e9333282e2f564745bd68c788f2c08 Mon Sep 17 00:00:00 2001
From: Khaleel Al-Adhami <khaleel.aladhami@gmail.com>
Date: Wed, 9 Oct 2024 13:25:41 -0700
Subject: [PATCH 36/38] Remove wrong event handlers (#4136)

* remove wrong target value

* add keyboard event

* simplify empty ones

* remove events from text_area

* empty tuples are empty bruh

* dangit darglint
---
 reflex/components/base/script.py              |  8 +-
 reflex/components/datadisplay/dataeditor.py   |  6 +-
 reflex/components/el/elements/forms.py        | 30 ++++---
 reflex/components/next/image.py               |  6 +-
 reflex/components/radix/primitives/drawer.py  | 38 ++++++---
 reflex/components/radix/primitives/form.py    |  4 +-
 .../radix/themes/components/dropdown_menu.py  |  4 +-
 .../radix/themes/components/text_area.py      | 16 ----
 .../radix/themes/components/text_field.py     | 12 +--
 .../radix/themes/components/tooltip.py        |  6 +-
 .../components/react_player/react_player.py   | 24 +++---
 reflex/components/recharts/cartesian.py       | 84 +++++++++----------
 reflex/components/recharts/charts.py          | 22 ++---
 reflex/components/recharts/general.py         | 20 ++---
 reflex/components/recharts/polar.py           | 18 ++--
 reflex/event.py                               | 82 +++++++++++++++---
 tests/units/components/test_component.py      | 14 +++-
 .../test_component_future_annotations.py      |  6 +-
 tests/units/utils/test_format.py              |  4 +-
 19 files changed, 240 insertions(+), 164 deletions(-)

diff --git a/reflex/components/base/script.py b/reflex/components/base/script.py
index 0eba03f49..eb37d53e7 100644
--- a/reflex/components/base/script.py
+++ b/reflex/components/base/script.py
@@ -8,7 +8,7 @@ from __future__ import annotations
 from typing import Literal
 
 from reflex.components.component import Component
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars.base import LiteralVar, Var
 
 
@@ -35,13 +35,13 @@ class Script(Component):
     )
 
     # Triggered when the script is loading
-    on_load: EventHandler[lambda: []]
+    on_load: EventHandler[empty_event]
 
     # Triggered when the script has loaded
-    on_ready: EventHandler[lambda: []]
+    on_ready: EventHandler[empty_event]
 
     # Triggered when the script has errored
-    on_error: EventHandler[lambda: []]
+    on_error: EventHandler[empty_event]
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/datadisplay/dataeditor.py b/reflex/components/datadisplay/dataeditor.py
index 1c778f52a..ab84ad3f7 100644
--- a/reflex/components/datadisplay/dataeditor.py
+++ b/reflex/components/datadisplay/dataeditor.py
@@ -8,7 +8,7 @@ from typing import Any, Dict, List, Literal, Optional, Union
 from reflex.base import Base
 from reflex.components.component import Component, NoSSRComponent
 from reflex.components.literals import LiteralRowMarker
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.utils import console, format, types
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.utils.serializers import serializer
@@ -262,10 +262,10 @@ class DataEditor(NoSSRComponent):
     on_finished_editing: EventHandler[lambda new_value, movement: [new_value, movement]]
 
     # Fired when a row is appended.
-    on_row_appended: EventHandler[lambda: []]
+    on_row_appended: EventHandler[empty_event]
 
     # Fired when the selection is cleared.
-    on_selection_cleared: EventHandler[lambda: []]
+    on_selection_cleared: EventHandler[empty_event]
 
     # Fired when a column is resized.
     on_column_resize: EventHandler[lambda col, width: [col, width]]
diff --git a/reflex/components/el/elements/forms.py b/reflex/components/el/elements/forms.py
index 1963f8b37..05168e66c 100644
--- a/reflex/components/el/elements/forms.py
+++ b/reflex/components/el/elements/forms.py
@@ -10,7 +10,13 @@ from jinja2 import Environment
 from reflex.components.el.element import Element
 from reflex.components.tags.tag import Tag
 from reflex.constants import Dirs, EventTriggers
-from reflex.event import EventChain, EventHandler, prevent_default
+from reflex.event import (
+    EventChain,
+    EventHandler,
+    input_event,
+    key_event,
+    prevent_default,
+)
 from reflex.utils.imports import ImportDict
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
@@ -345,19 +351,19 @@ class Input(BaseHTML):
     value: Var[Union[str, int, float]]
 
     # Fired when the input value changes
-    on_change: EventHandler[lambda e0: [e0.target.value]]
+    on_change: EventHandler[input_event]
 
     # Fired when the input gains focus
-    on_focus: EventHandler[lambda e0: [e0.target.value]]
+    on_focus: EventHandler[input_event]
 
     # Fired when the input loses focus
-    on_blur: EventHandler[lambda e0: [e0.target.value]]
+    on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
 
 
 class Label(BaseHTML):
@@ -496,7 +502,7 @@ class Select(BaseHTML):
     size: Var[Union[str, int, bool]]
 
     # Fired when the select value changes
-    on_change: EventHandler[lambda e0: [e0.target.value]]
+    on_change: EventHandler[input_event]
 
 
 AUTO_HEIGHT_JS = """
@@ -586,19 +592,19 @@ class Textarea(BaseHTML):
     wrap: Var[Union[str, int, bool]]
 
     # Fired when the input value changes
-    on_change: EventHandler[lambda e0: [e0.target.value]]
+    on_change: EventHandler[input_event]
 
     # Fired when the input gains focus
-    on_focus: EventHandler[lambda e0: [e0.target.value]]
+    on_focus: EventHandler[input_event]
 
     # Fired when the input loses focus
-    on_blur: EventHandler[lambda e0: [e0.target.value]]
+    on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
 
     def _exclude_props(self) -> list[str]:
         return super()._exclude_props() + [
diff --git a/reflex/components/next/image.py b/reflex/components/next/image.py
index 9e2f71821..fe74b0935 100644
--- a/reflex/components/next/image.py
+++ b/reflex/components/next/image.py
@@ -2,7 +2,7 @@
 
 from typing import Any, Literal, Optional, Union
 
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.utils import types
 from reflex.vars.base import Var
 
@@ -56,10 +56,10 @@ class Image(NextComponent):
     blurDataURL: Var[str]
 
     # Fires when the image has loaded.
-    on_load: EventHandler[lambda: []]
+    on_load: EventHandler[empty_event]
 
     # Fires when the image has an error.
-    on_error: EventHandler[lambda: []]
+    on_error: EventHandler[empty_event]
 
     @classmethod
     def create(
diff --git a/reflex/components/radix/primitives/drawer.py b/reflex/components/radix/primitives/drawer.py
index b814e878f..f0efa7e18 100644
--- a/reflex/components/radix/primitives/drawer.py
+++ b/reflex/components/radix/primitives/drawer.py
@@ -11,6 +11,7 @@ from reflex.components.radix.primitives.base import RadixPrimitiveComponent
 from reflex.components.radix.themes.base import Theme
 from reflex.components.radix.themes.layout.flex import Flex
 from reflex.event import EventHandler
+from reflex.utils import console
 from reflex.vars.base import Var
 
 
@@ -127,20 +128,20 @@ class DrawerContent(DrawerComponent):
         base_style.update(style)
         return {"css": base_style}
 
-    # Fired when the drawer content is opened.
-    on_open_auto_focus: EventHandler[lambda e0: [e0.target.value]]
+    # Fired when the drawer content is opened. Deprecated.
+    on_open_auto_focus: EventHandler[lambda e0: []]
 
-    # Fired when the drawer content is closed.
-    on_close_auto_focus: EventHandler[lambda e0: [e0.target.value]]
+    # Fired when the drawer content is closed. Deprecated.
+    on_close_auto_focus: EventHandler[lambda e0: []]
 
-    # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[lambda e0: [e0.target.value]]
+    # Fired when the escape key is pressed. Deprecated.
+    on_escape_key_down: EventHandler[lambda e0: []]
 
-    # Fired when the pointer is down outside the drawer content.
-    on_pointer_down_outside: EventHandler[lambda e0: [e0.target.value]]
+    # Fired when the pointer is down outside the drawer content. Deprecated.
+    on_pointer_down_outside: EventHandler[lambda e0: []]
 
-    # Fired when interacting outside the drawer content.
-    on_interact_outside: EventHandler[lambda e0: [e0.target.value]]
+    # Fired when interacting outside the drawer content. Deprecated.
+    on_interact_outside: EventHandler[lambda e0: []]
 
     @classmethod
     def create(cls, *children, **props):
@@ -157,6 +158,23 @@ class DrawerContent(DrawerComponent):
         Returns:
                  The drawer content.
         """
+        deprecated_properties = [
+            "on_open_auto_focus",
+            "on_close_auto_focus",
+            "on_escape_key_down",
+            "on_pointer_down_outside",
+            "on_interact_outside",
+        ]
+
+        for prop in deprecated_properties:
+            if prop in props:
+                console.deprecate(
+                    feature_name="drawer content events",
+                    reason=f"The `{prop}` event is deprecated and will be removed in 0.7.0.",
+                    deprecation_version="0.6.3",
+                    removal_version="0.7.0",
+                )
+
         comp = super().create(*children, **props)
 
         return Theme.create(comp)
diff --git a/reflex/components/radix/primitives/form.py b/reflex/components/radix/primitives/form.py
index 895f6dbeb..4d4be7e40 100644
--- a/reflex/components/radix/primitives/form.py
+++ b/reflex/components/radix/primitives/form.py
@@ -8,7 +8,7 @@ from reflex.components.component import ComponentNamespace
 from reflex.components.core.debounce import DebounceInput
 from reflex.components.el.elements.forms import Form as HTMLForm
 from reflex.components.radix.themes.components.text_field import TextFieldRoot
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars.base import Var
 
 from .base import RadixPrimitiveComponentWithClassName
@@ -28,7 +28,7 @@ class FormRoot(FormComponent, HTMLForm):
     alias = "RadixFormRoot"
 
     # Fired when the errors are cleared.
-    on_clear_server_errors: EventHandler[lambda: []]
+    on_clear_server_errors: EventHandler[empty_event]
 
     def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
diff --git a/reflex/components/radix/themes/components/dropdown_menu.py b/reflex/components/radix/themes/components/dropdown_menu.py
index 5ed1f9f64..c853619dd 100644
--- a/reflex/components/radix/themes/components/dropdown_menu.py
+++ b/reflex/components/radix/themes/components/dropdown_menu.py
@@ -164,7 +164,7 @@ class DropdownMenuSub(RadixThemesComponent):
     default_open: Var[bool]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[lambda e0: [e0.target.value]]
+    on_open_change: EventHandler[lambda e0: [e0]]
 
 
 class DropdownMenuSubContent(RadixThemesComponent):
@@ -240,7 +240,7 @@ class DropdownMenuItem(RadixThemesComponent):
     _valid_parents: List[str] = ["DropdownMenuContent", "DropdownMenuSubContent"]
 
     # Fired when the item is selected.
-    on_select: EventHandler[lambda e0: [e0.target.value]]
+    on_select: EventHandler[lambda e0: []]
 
 
 class DropdownMenuSeparator(RadixThemesComponent):
diff --git a/reflex/components/radix/themes/components/text_area.py b/reflex/components/radix/themes/components/text_area.py
index 8b3b531cb..9f006c2e3 100644
--- a/reflex/components/radix/themes/components/text_area.py
+++ b/reflex/components/radix/themes/components/text_area.py
@@ -6,7 +6,6 @@ from reflex.components.component import Component
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.core.debounce import DebounceInput
 from reflex.components.el import elements
-from reflex.event import EventHandler
 from reflex.vars.base import Var
 
 from ..base import (
@@ -82,21 +81,6 @@ class TextArea(RadixThemesComponent, elements.Textarea):
     # How the text in the textarea is to be wrapped when submitting the form
     wrap: Var[str]
 
-    # Fired when the value of the textarea changes.
-    on_change: EventHandler[lambda e0: [e0.target.value]]
-
-    # Fired when the textarea is focused.
-    on_focus: EventHandler[lambda e0: [e0.target.value]]
-
-    # Fired when the textarea is blurred.
-    on_blur: EventHandler[lambda e0: [e0.target.value]]
-
-    # Fired when a key is pressed down.
-    on_key_down: EventHandler[lambda e0: [e0.key]]
-
-    # Fired when a key is released.
-    on_key_up: EventHandler[lambda e0: [e0.key]]
-
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create an Input component.
diff --git a/reflex/components/radix/themes/components/text_field.py b/reflex/components/radix/themes/components/text_field.py
index 6c3372985..4277e93e0 100644
--- a/reflex/components/radix/themes/components/text_field.py
+++ b/reflex/components/radix/themes/components/text_field.py
@@ -8,7 +8,7 @@ from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.core.debounce import DebounceInput
 from reflex.components.el import elements
-from reflex.event import EventHandler
+from reflex.event import EventHandler, input_event, key_event
 from reflex.vars.base import Var
 
 from ..base import (
@@ -72,19 +72,19 @@ class TextFieldRoot(elements.Div, RadixThemesComponent):
     value: Var[Union[str, int, float]]
 
     # Fired when the value of the textarea changes.
-    on_change: EventHandler[lambda e0: [e0.target.value]]
+    on_change: EventHandler[input_event]
 
     # Fired when the textarea is focused.
-    on_focus: EventHandler[lambda e0: [e0.target.value]]
+    on_focus: EventHandler[input_event]
 
     # Fired when the textarea is blurred.
-    on_blur: EventHandler[lambda e0: [e0.target.value]]
+    on_blur: EventHandler[input_event]
 
     # Fired when a key is pressed down.
-    on_key_down: EventHandler[lambda e0: [e0.key]]
+    on_key_down: EventHandler[key_event]
 
     # Fired when a key is released.
-    on_key_up: EventHandler[lambda e0: [e0.key]]
+    on_key_up: EventHandler[key_event]
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/radix/themes/components/tooltip.py b/reflex/components/radix/themes/components/tooltip.py
index f39de68a8..7fd181465 100644
--- a/reflex/components/radix/themes/components/tooltip.py
+++ b/reflex/components/radix/themes/components/tooltip.py
@@ -85,13 +85,13 @@ class Tooltip(RadixThemesComponent):
     aria_label: Var[str]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[lambda e0: [e0.target.value]]
+    on_open_change: EventHandler[lambda e0: [e0]]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[lambda e0: [e0.target.value]]
+    on_escape_key_down: EventHandler[lambda e0: []]
 
     # Fired when the pointer is down outside the tooltip.
-    on_pointer_down_outside: EventHandler[lambda e0: [e0.target.value]]
+    on_pointer_down_outside: EventHandler[lambda e0: []]
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/react_player/react_player.py b/reflex/components/react_player/react_player.py
index db5d9e77c..9da878b64 100644
--- a/reflex/components/react_player/react_player.py
+++ b/reflex/components/react_player/react_player.py
@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 from reflex.components.component import NoSSRComponent
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars.base import Var
 
 
@@ -46,13 +46,13 @@ class ReactPlayer(NoSSRComponent):
     height: Var[str]
 
     # Called when media is loaded and ready to play. If playing is set to true, media will play immediately.
-    on_ready: EventHandler[lambda: []]
+    on_ready: EventHandler[empty_event]
 
     # Called when media starts playing.
-    on_start: EventHandler[lambda: []]
+    on_start: EventHandler[empty_event]
 
     # Called when media starts or resumes playing after pausing or buffering.
-    on_play: EventHandler[lambda: []]
+    on_play: EventHandler[empty_event]
 
     # Callback containing played and loaded progress as a fraction, and playedSeconds and loadedSeconds in seconds. eg { played: 0.12, playedSeconds: 11.3, loaded: 0.34, loadedSeconds: 16.7 }
     on_progress: EventHandler[lambda progress: [progress]]
@@ -61,13 +61,13 @@ class ReactPlayer(NoSSRComponent):
     on_duration: EventHandler[lambda seconds: [seconds]]
 
     # Called when media is paused.
-    on_pause: EventHandler[lambda: []]
+    on_pause: EventHandler[empty_event]
 
     # Called when media starts buffering.
-    on_buffer: EventHandler[lambda: []]
+    on_buffer: EventHandler[empty_event]
 
     # Called when media has finished buffering. Works for files, YouTube and Facebook.
-    on_buffer_end: EventHandler[lambda: []]
+    on_buffer_end: EventHandler[empty_event]
 
     # Called when media seeks with seconds parameter.
     on_seek: EventHandler[lambda seconds: [seconds]]
@@ -79,16 +79,16 @@ class ReactPlayer(NoSSRComponent):
     on_playback_quality_change: EventHandler[lambda e0: []]
 
     # Called when media finishes playing. Does not fire when loop is set to true.
-    on_ended: EventHandler[lambda: []]
+    on_ended: EventHandler[empty_event]
 
     # Called when an error occurs whilst attempting to play media.
-    on_error: EventHandler[lambda: []]
+    on_error: EventHandler[empty_event]
 
     # Called when user clicks the light mode preview.
-    on_click_preview: EventHandler[lambda: []]
+    on_click_preview: EventHandler[empty_event]
 
     # Called when picture-in-picture mode is enabled.
-    on_enable_pip: EventHandler[lambda: []]
+    on_enable_pip: EventHandler[empty_event]
 
     # Called when picture-in-picture mode is disabled.
-    on_disable_pip: EventHandler[lambda: []]
+    on_disable_pip: EventHandler[empty_event]
diff --git a/reflex/components/recharts/cartesian.py b/reflex/components/recharts/cartesian.py
index 67474126d..e4028053e 100644
--- a/reflex/components/recharts/cartesian.py
+++ b/reflex/components/recharts/cartesian.py
@@ -6,7 +6,7 @@ from typing import Any, Dict, List, Union
 
 from reflex.constants import EventTriggers
 from reflex.constants.colors import Color
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars.base import LiteralVar, Var
 
 from .recharts import (
@@ -101,25 +101,25 @@ class Axis(Recharts):
     text_anchor: Var[str]  # 'start', 'middle', 'end'
 
     # The customized event handler of click on the ticks of this axis
-    on_click: EventHandler[lambda: []]
+    on_click: EventHandler[empty_event]
 
     # The customized event handler of mousedown on the ticks of this axis
-    on_mouse_down: EventHandler[lambda: []]
+    on_mouse_down: EventHandler[empty_event]
 
     # The customized event handler of mouseup on the ticks of this axis
-    on_mouse_up: EventHandler[lambda: []]
+    on_mouse_up: EventHandler[empty_event]
 
     # The customized event handler of mousemove on the ticks of this axis
-    on_mouse_move: EventHandler[lambda: []]
+    on_mouse_move: EventHandler[empty_event]
 
     # The customized event handler of mouseout on the ticks of this axis
-    on_mouse_out: EventHandler[lambda: []]
+    on_mouse_out: EventHandler[empty_event]
 
     # The customized event handler of mouseenter on the ticks of this axis
-    on_mouse_enter: EventHandler[lambda: []]
+    on_mouse_enter: EventHandler[empty_event]
 
     # The customized event handler of mouseleave on the ticks of this axis
-    on_mouse_leave: EventHandler[lambda: []]
+    on_mouse_leave: EventHandler[empty_event]
 
 
 class XAxis(Axis):
@@ -267,28 +267,28 @@ class Cartesian(Recharts):
     legend_type: Var[LiteralLegendType]
 
     # The customized event handler of click on the component in this group
-    on_click: EventHandler[lambda: []]
+    on_click: EventHandler[empty_event]
 
     # The customized event handler of mousedown on the component in this group
-    on_mouse_down: EventHandler[lambda: []]
+    on_mouse_down: EventHandler[empty_event]
 
     # The customized event handler of mouseup on the component in this group
-    on_mouse_up: EventHandler[lambda: []]
+    on_mouse_up: EventHandler[empty_event]
 
     # The customized event handler of mousemove on the component in this group
-    on_mouse_move: EventHandler[lambda: []]
+    on_mouse_move: EventHandler[empty_event]
 
     # The customized event handler of mouseover on the component in this group
-    on_mouse_over: EventHandler[lambda: []]
+    on_mouse_over: EventHandler[empty_event]
 
     # The customized event handler of mouseout on the component in this group
-    on_mouse_out: EventHandler[lambda: []]
+    on_mouse_out: EventHandler[empty_event]
 
     # The customized event handler of mouseenter on the component in this group
-    on_mouse_enter: EventHandler[lambda: []]
+    on_mouse_enter: EventHandler[empty_event]
 
     # The customized event handler of mouseleave on the component in this group
-    on_mouse_leave: EventHandler[lambda: []]
+    on_mouse_leave: EventHandler[empty_event]
 
 
 class Area(Cartesian):
@@ -494,28 +494,28 @@ class Scatter(Recharts):
     animation_easing: Var[LiteralAnimationEasing]
 
     # The customized event handler of click on the component in this group
-    on_click: EventHandler[lambda: []]
+    on_click: EventHandler[empty_event]
 
     # The customized event handler of mousedown on the component in this group
-    on_mouse_down: EventHandler[lambda: []]
+    on_mouse_down: EventHandler[empty_event]
 
     # The customized event handler of mouseup on the component in this group
-    on_mouse_up: EventHandler[lambda: []]
+    on_mouse_up: EventHandler[empty_event]
 
     # The customized event handler of mousemove on the component in this group
-    on_mouse_move: EventHandler[lambda: []]
+    on_mouse_move: EventHandler[empty_event]
 
     # The customized event handler of mouseover on the component in this group
-    on_mouse_over: EventHandler[lambda: []]
+    on_mouse_over: EventHandler[empty_event]
 
     # The customized event handler of mouseout on the component in this group
-    on_mouse_out: EventHandler[lambda: []]
+    on_mouse_out: EventHandler[empty_event]
 
     # The customized event handler of mouseenter on the component in this group
-    on_mouse_enter: EventHandler[lambda: []]
+    on_mouse_enter: EventHandler[empty_event]
 
     # The customized event handler of mouseleave on the component in this group
-    on_mouse_leave: EventHandler[lambda: []]
+    on_mouse_leave: EventHandler[empty_event]
 
 
 class Funnel(Recharts):
@@ -556,34 +556,34 @@ class Funnel(Recharts):
     _valid_children: List[str] = ["LabelList", "Cell"]
 
     # The customized event handler of animation start
-    on_animation_start: EventHandler[lambda: []]
+    on_animation_start: EventHandler[empty_event]
 
     # The customized event handler of animation end
-    on_animation_end: EventHandler[lambda: []]
+    on_animation_end: EventHandler[empty_event]
 
     # The customized event handler of click on the component in this group
-    on_click: EventHandler[lambda: []]
+    on_click: EventHandler[empty_event]
 
     # The customized event handler of mousedown on the component in this group
-    on_mouse_down: EventHandler[lambda: []]
+    on_mouse_down: EventHandler[empty_event]
 
     # The customized event handler of mouseup on the component in this group
-    on_mouse_up: EventHandler[lambda: []]
+    on_mouse_up: EventHandler[empty_event]
 
     # The customized event handler of mousemove on the component in this group
-    on_mouse_move: EventHandler[lambda: []]
+    on_mouse_move: EventHandler[empty_event]
 
     # The customized event handler of mouseover on the component in this group
-    on_mouse_over: EventHandler[lambda: []]
+    on_mouse_over: EventHandler[empty_event]
 
     # The customized event handler of mouseout on the component in this group
-    on_mouse_out: EventHandler[lambda: []]
+    on_mouse_out: EventHandler[empty_event]
 
     # The customized event handler of mouseenter on the component in this group
-    on_mouse_enter: EventHandler[lambda: []]
+    on_mouse_enter: EventHandler[empty_event]
 
     # The customized event handler of mouseleave on the component in this group
-    on_mouse_leave: EventHandler[lambda: []]
+    on_mouse_leave: EventHandler[empty_event]
 
 
 class ErrorBar(Recharts):
@@ -680,28 +680,28 @@ class ReferenceDot(Reference):
     _valid_children: List[str] = ["Label"]
 
     # The customized event handler of click on the component in this chart
-    on_click: EventHandler[lambda: []]
+    on_click: EventHandler[empty_event]
 
     # The customized event handler of mousedown on the component in this chart
-    on_mouse_down: EventHandler[lambda: []]
+    on_mouse_down: EventHandler[empty_event]
 
     # The customized event handler of mouseup on the component in this chart
-    on_mouse_up: EventHandler[lambda: []]
+    on_mouse_up: EventHandler[empty_event]
 
     # The customized event handler of mouseover on the component in this chart
-    on_mouse_over: EventHandler[lambda: []]
+    on_mouse_over: EventHandler[empty_event]
 
     # The customized event handler of mouseout on the component in this chart
-    on_mouse_out: EventHandler[lambda: []]
+    on_mouse_out: EventHandler[empty_event]
 
     # The customized event handler of mouseenter on the component in this chart
-    on_mouse_enter: EventHandler[lambda: []]
+    on_mouse_enter: EventHandler[empty_event]
 
     # The customized event handler of mousemove on the component in this chart
-    on_mouse_move: EventHandler[lambda: []]
+    on_mouse_move: EventHandler[empty_event]
 
     # The customized event handler of mouseleave on the component in this chart
-    on_mouse_leave: EventHandler[lambda: []]
+    on_mouse_leave: EventHandler[empty_event]
 
 
 class ReferenceArea(Recharts):
diff --git a/reflex/components/recharts/charts.py b/reflex/components/recharts/charts.py
index d1fd419a7..d4785f6c4 100644
--- a/reflex/components/recharts/charts.py
+++ b/reflex/components/recharts/charts.py
@@ -8,7 +8,7 @@ from reflex.components.component import Component
 from reflex.components.recharts.general import ResponsiveContainer
 from reflex.constants import EventTriggers
 from reflex.constants.colors import Color
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars.base import Var
 
 from .recharts import (
@@ -31,16 +31,16 @@ class ChartBase(RechartsCharts):
     height: Var[Union[str, int]] = "100%"  # type: ignore
 
     # The customized event handler of click on the component in this chart
-    on_click: EventHandler[lambda: []]
+    on_click: EventHandler[empty_event]
 
     # The customized event handler of mouseenter on the component in this chart
-    on_mouse_enter: EventHandler[lambda: []]
+    on_mouse_enter: EventHandler[empty_event]
 
     # The customized event handler of mousemove on the component in this chart
-    on_mouse_move: EventHandler[lambda: []]
+    on_mouse_move: EventHandler[empty_event]
 
     # The customized event handler of mouseleave on the component in this chart
-    on_mouse_leave: EventHandler[lambda: []]
+    on_mouse_leave: EventHandler[empty_event]
 
     @staticmethod
     def _ensure_valid_dimension(name: str, value: Any) -> None:
@@ -270,16 +270,16 @@ class PieChart(ChartBase):
     ]
 
     # The customized event handler of mousedown on the sectors in this group
-    on_mouse_down: EventHandler[lambda: []]
+    on_mouse_down: EventHandler[empty_event]
 
     # The customized event handler of mouseup on the sectors in this group
-    on_mouse_up: EventHandler[lambda: []]
+    on_mouse_up: EventHandler[empty_event]
 
     # The customized event handler of mouseover on the sectors in this group
-    on_mouse_over: EventHandler[lambda: []]
+    on_mouse_over: EventHandler[empty_event]
 
     # The customized event handler of mouseout on the sectors in this group
-    on_mouse_out: EventHandler[lambda: []]
+    on_mouse_out: EventHandler[empty_event]
 
 
 class RadarChart(ChartBase):
@@ -488,10 +488,10 @@ class Treemap(RechartsCharts):
     animation_easing: Var[LiteralAnimationEasing]
 
     # The customized event handler of animation start
-    on_animation_start: EventHandler[lambda: []]
+    on_animation_start: EventHandler[empty_event]
 
     # The customized event handler of animation end
-    on_animation_end: EventHandler[lambda: []]
+    on_animation_end: EventHandler[empty_event]
 
     @classmethod
     def create(cls, *children, **props) -> Component:
diff --git a/reflex/components/recharts/general.py b/reflex/components/recharts/general.py
index 270707a82..641e1562a 100644
--- a/reflex/components/recharts/general.py
+++ b/reflex/components/recharts/general.py
@@ -6,7 +6,7 @@ from typing import Any, Dict, List, Union
 
 from reflex.components.component import MemoizationLeaf
 from reflex.constants.colors import Color
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars.base import LiteralVar, Var
 
 from .recharts import (
@@ -46,7 +46,7 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
     debounce: Var[int]
 
     # If specified provides a callback providing the updated chart width and height values.
-    on_resize: EventHandler[lambda: []]
+    on_resize: EventHandler[empty_event]
 
     # Valid children components
     _valid_children: List[str] = [
@@ -104,28 +104,28 @@ class Legend(Recharts):
     margin: Var[Dict[str, Any]]
 
     # The customized event handler of click on the items in this group
-    on_click: EventHandler[lambda: []]
+    on_click: EventHandler[empty_event]
 
     # The customized event handler of mousedown on the items in this group
-    on_mouse_down: EventHandler[lambda: []]
+    on_mouse_down: EventHandler[empty_event]
 
     # The customized event handler of mouseup on the items in this group
-    on_mouse_up: EventHandler[lambda: []]
+    on_mouse_up: EventHandler[empty_event]
 
     # The customized event handler of mousemove on the items in this group
-    on_mouse_move: EventHandler[lambda: []]
+    on_mouse_move: EventHandler[empty_event]
 
     # The customized event handler of mouseover on the items in this group
-    on_mouse_over: EventHandler[lambda: []]
+    on_mouse_over: EventHandler[empty_event]
 
     # The customized event handler of mouseout on the items in this group
-    on_mouse_out: EventHandler[lambda: []]
+    on_mouse_out: EventHandler[empty_event]
 
     # The customized event handler of mouseenter on the items in this group
-    on_mouse_enter: EventHandler[lambda: []]
+    on_mouse_enter: EventHandler[empty_event]
 
     # The customized event handler of mouseleave on the items in this group
-    on_mouse_leave: EventHandler[lambda: []]
+    on_mouse_leave: EventHandler[empty_event]
 
 
 class GraphingTooltip(Recharts):
diff --git a/reflex/components/recharts/polar.py b/reflex/components/recharts/polar.py
index 5e95fb1cd..828000447 100644
--- a/reflex/components/recharts/polar.py
+++ b/reflex/components/recharts/polar.py
@@ -6,7 +6,7 @@ from typing import Any, Dict, List, Union
 
 from reflex.constants import EventTriggers
 from reflex.constants.colors import Color
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event
 from reflex.vars.base import LiteralVar, Var
 
 from .recharts import (
@@ -253,28 +253,28 @@ class PolarAngleAxis(Recharts):
     _valid_children: List[str] = ["Label"]
 
     # The customized event handler of click on the ticks of this axis.
-    on_click: EventHandler[lambda: []]
+    on_click: EventHandler[empty_event]
 
     # The customized event handler of mousedown on the the ticks of this axis.
-    on_mouse_down: EventHandler[lambda: []]
+    on_mouse_down: EventHandler[empty_event]
 
     # The customized event handler of mouseup on the ticks of this axis.
-    on_mouse_up: EventHandler[lambda: []]
+    on_mouse_up: EventHandler[empty_event]
 
     # The customized event handler of mousemove on the ticks of this axis.
-    on_mouse_move: EventHandler[lambda: []]
+    on_mouse_move: EventHandler[empty_event]
 
     # The customized event handler of mouseover on the ticks of this axis.
-    on_mouse_over: EventHandler[lambda: []]
+    on_mouse_over: EventHandler[empty_event]
 
     # The customized event handler of mouseout on the ticks of this axis.
-    on_mouse_out: EventHandler[lambda: []]
+    on_mouse_out: EventHandler[empty_event]
 
     # The customized event handler of moustenter on the ticks of this axis.
-    on_mouse_enter: EventHandler[lambda: []]
+    on_mouse_enter: EventHandler[empty_event]
 
     # The customized event handler of mouseleave on the ticks of this axis.
-    on_mouse_leave: EventHandler[lambda: []]
+    on_mouse_leave: EventHandler[empty_event]
 
 
 class PolarGrid(Recharts):
diff --git a/reflex/event.py b/reflex/event.py
index 7384cf5bf..d2bebaa3f 100644
--- a/reflex/event.py
+++ b/reflex/event.py
@@ -24,7 +24,7 @@ from typing import (
 from typing_extensions import get_args, get_origin
 
 from reflex import constants
-from reflex.utils import format
+from reflex.utils import console, format
 from reflex.utils.exceptions import EventFnArgMismatch, EventHandlerArgMismatch
 from reflex.utils.types import ArgsSpec, GenericType
 from reflex.vars import VarData
@@ -399,23 +399,63 @@ prevent_default = EventChain(events=[], args_spec=lambda: []).prevent_default
     init=True,
     frozen=True,
 )
-class Target:
-    """A Javascript event target."""
+class JavascriptHTMLInputElement:
+    """Interface for a Javascript HTMLInputElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement."""
 
-    checked: bool = False
-    value: Any = None
+    value: str = ""
 
 
 @dataclasses.dataclass(
     init=True,
     frozen=True,
 )
-class FrontendEvent:
-    """A Javascript event."""
+class JavascriptInputEvent:
+    """Interface for a Javascript InputEvent https://developer.mozilla.org/en-US/docs/Web/API/InputEvent."""
+
+    target: JavascriptHTMLInputElement = JavascriptHTMLInputElement()
+
+
+@dataclasses.dataclass(
+    init=True,
+    frozen=True,
+)
+class JavasciptKeyboardEvent:
+    """Interface for a Javascript KeyboardEvent https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent."""
 
-    target: Target = Target()
     key: str = ""
-    value: Any = None
+
+
+def input_event(e: Var[JavascriptInputEvent]) -> Tuple[str]:
+    """Get the value from an input event.
+
+    Args:
+        e: The input event.
+
+    Returns:
+        The value from the input event.
+    """
+    return (e.target.value,)
+
+
+def key_event(e: Var[JavasciptKeyboardEvent]) -> Tuple[str]:
+    """Get the key from a keyboard event.
+
+    Args:
+        e: The keyboard event.
+
+    Returns:
+        The key from the keyboard event.
+    """
+    return (e.key,)
+
+
+def empty_event() -> Tuple[()]:
+    """Empty event handler.
+
+    Returns:
+        An empty tuple.
+    """
+    return tuple()  # type: ignore
 
 
 @dataclasses.dataclass(
@@ -946,6 +986,28 @@ def unwrap_var_annotation(annotation: GenericType):
     return annotation
 
 
+def resolve_annotation(annotations: dict[str, Any], arg_name: str):
+    """Resolve the annotation for the given argument name.
+
+    Args:
+        annotations: The annotations.
+        arg_name: The argument name.
+
+    Returns:
+        The resolved annotation.
+    """
+    annotation = annotations.get(arg_name)
+    if annotation is None:
+        console.deprecate(
+            feature_name="Unannotated event handler arguments",
+            reason="Provide type annotations for event handler arguments.",
+            deprecation_version="0.6.3",
+            removal_version="0.7.0",
+        )
+        return JavascriptInputEvent
+    return annotation
+
+
 def parse_args_spec(arg_spec: ArgsSpec):
     """Parse the args provided in the ArgsSpec of an event trigger.
 
@@ -961,7 +1023,7 @@ def parse_args_spec(arg_spec: ArgsSpec):
     return arg_spec(
         *[
             Var(f"_{l_arg}").to(
-                unwrap_var_annotation(annotations.get(l_arg, FrontendEvent))
+                unwrap_var_annotation(resolve_annotation(annotations, l_arg))
             )
             for l_arg in spec.args
         ]
diff --git a/tests/units/components/test_component.py b/tests/units/components/test_component.py
index 5e94db052..b54ce1bbe 100644
--- a/tests/units/components/test_component.py
+++ b/tests/units/components/test_component.py
@@ -16,7 +16,13 @@ from reflex.components.component import (
 )
 from reflex.components.radix.themes.layout.box import Box
 from reflex.constants import EventTriggers
-from reflex.event import EventChain, EventHandler, parse_args_spec
+from reflex.event import (
+    EventChain,
+    EventHandler,
+    empty_event,
+    input_event,
+    parse_args_spec,
+)
 from reflex.state import BaseState
 from reflex.style import Style
 from reflex.utils import imports
@@ -1778,7 +1784,7 @@ def test_custom_component_declare_event_handlers_in_fields():
             return {
                 **super().get_event_triggers(),
                 "on_a": lambda e0: [e0],
-                "on_b": lambda e0: [e0.target.value],
+                "on_b": input_event,
                 "on_c": lambda e0: [],
                 "on_d": lambda: [],
                 "on_e": lambda: [],
@@ -1787,9 +1793,9 @@ def test_custom_component_declare_event_handlers_in_fields():
 
     class TestComponent(Component):
         on_a: EventHandler[lambda e0: [e0]]
-        on_b: EventHandler[lambda e0: [e0.target.value]]
+        on_b: EventHandler[input_event]
         on_c: EventHandler[lambda e0: []]
-        on_d: EventHandler[lambda: []]
+        on_d: EventHandler[empty_event]
         on_e: EventHandler
         on_f: EventHandler[lambda a, b, c: [c, b, a]]
 
diff --git a/tests/units/components/test_component_future_annotations.py b/tests/units/components/test_component_future_annotations.py
index 37aeb813a..791fef7c9 100644
--- a/tests/units/components/test_component_future_annotations.py
+++ b/tests/units/components/test_component_future_annotations.py
@@ -3,7 +3,7 @@ from __future__ import annotations
 from typing import Any
 
 from reflex.components.component import Component
-from reflex.event import EventHandler
+from reflex.event import EventHandler, empty_event, input_event
 
 
 # This is a repeat of its namesake in test_component.py.
@@ -25,9 +25,9 @@ def test_custom_component_declare_event_handlers_in_fields():
 
     class TestComponent(Component):
         on_a: EventHandler[lambda e0: [e0]]
-        on_b: EventHandler[lambda e0: [e0.target.value]]
+        on_b: EventHandler[input_event]
         on_c: EventHandler[lambda e0: []]
-        on_d: EventHandler[lambda: []]
+        on_d: EventHandler[empty_event]
 
     custom_component = ReferenceComponent.create()
     test_component = TestComponent.create()
diff --git a/tests/units/utils/test_format.py b/tests/units/utils/test_format.py
index d7b0c791e..17485d52e 100644
--- a/tests/units/utils/test_format.py
+++ b/tests/units/utils/test_format.py
@@ -8,7 +8,7 @@ import plotly.graph_objects as go
 import pytest
 
 from reflex.components.tags.tag import Tag
-from reflex.event import EventChain, EventHandler, EventSpec, FrontendEvent
+from reflex.event import EventChain, EventHandler, EventSpec, JavascriptInputEvent
 from reflex.style import Style
 from reflex.utils import format
 from reflex.utils.serializers import serialize_figure
@@ -387,7 +387,7 @@ def test_format_match(
                                 Var(
                                     _js_expr="_e",
                                 )
-                                .to(ObjectVar, FrontendEvent)
+                                .to(ObjectVar, JavascriptInputEvent)
                                 .target.value,
                             ),
                         ),

From 7a971e584262238bc91d2a2618cce13dd8744355 Mon Sep 17 00:00:00 2001
From: benedikt-bartscher
 <31854409+benedikt-bartscher@users.noreply.github.com>
Date: Wed, 9 Oct 2024 22:42:44 +0200
Subject: [PATCH 37/38] fix docstring (#4140)

---
 reflex/state.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/reflex/state.py b/reflex/state.py
index 5d1d51b91..0941dfe07 100644
--- a/reflex/state.py
+++ b/reflex/state.py
@@ -2520,7 +2520,7 @@ class StateManager(Base, ABC):
             state: The state class to use.
 
         Returns:
-            The state manager (either memory or redis).
+            The state manager (either disk or redis).
         """
         redis = prerequisites.get_redis()
         if redis is not None:

From 87648af3eed2213552c84c80e11bf16a09b0eef5 Mon Sep 17 00:00:00 2001
From: abulvenz <a.eismann@senbax.de>
Date: Thu, 10 Oct 2024 00:33:34 +0000
Subject: [PATCH 38/38] fix: Determine var type from value. (#4143)

---
 reflex/vars/sequence.py | 5 ++++-
 tests/units/test_var.py | 3 +++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/reflex/vars/sequence.py b/reflex/vars/sequence.py
index 3374ee10f..9b65507b7 100644
--- a/reflex/vars/sequence.py
+++ b/reflex/vars/sequence.py
@@ -545,7 +545,7 @@ class LiteralStringVar(LiteralVar, StringVar):
     def create(
         cls,
         value: str,
-        _var_type: GenericType | None = str,
+        _var_type: GenericType | None = None,
         _var_data: VarData | None = None,
     ) -> StringVar:
         """Create a var from a string value.
@@ -558,6 +558,9 @@ class LiteralStringVar(LiteralVar, StringVar):
         Returns:
             The var.
         """
+        # Determine var type in case the value is inherited from str.
+        _var_type = _var_type or type(value) or str
+
         if REFLEX_VAR_OPENING_TAG in value:
             strings_and_vals: list[Var | str] = []
             offset = 0
diff --git a/tests/units/test_var.py b/tests/units/test_var.py
index 8f907c24a..c02acefe6 100644
--- a/tests/units/test_var.py
+++ b/tests/units/test_var.py
@@ -1809,3 +1809,6 @@ def test_to_string_operation():
 
     assert cast(Var, TestState.email)._var_type == Email
     assert cast(Var, TestState.optional_email)._var_type == Optional[Email]
+
+    single_var = Var.create(Email())
+    assert single_var._var_type == Email