Merge branch 'main' into lendemor/use_custom_bunfig_toml

README.md

@@ -228,7 +228,7 @@ You can create a multi-page app by adding more pages.
 
 <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;   
+📑 [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; 🖼️ [Templates](https://reflex.dev/templates/) &nbsp; |  &nbsp; 🛸 [Deployment](https://reflex.dev/docs/hosting/deploy-quick-start)  &nbsp;   
 
 </div>
 

benchmarks/benchmark_lighthouse.py

@@ -42,8 +42,7 @@ def get_lighthouse_scores(directory_path: str | Path) -> dict:
     try:
         for filename in directory_path.iterdir():
             if filename.suffix == ".json" and filename.stem != "manifest":
-                file_path = directory_path / filename
+                data = json.loads(filename.read_text())
-                data = json.loads(file_path.read_text())
                 # Extract scores and add them to the dictionary with the filename as key
                 scores[data["finalUrl"].replace("http://localhost:3000/", "/")] = {
                     "performance_score": data["categories"]["performance"]["score"],

reflex/.templates/jinja/web/pages/utils.js.jinja2

@@ -36,14 +36,10 @@
 {#     component: component dictionary #}
 {% macro render_tag(component) %}
 <{{component.name}} {{- render_props(component.props) }}>
-{%- if component.args is not none -%}
+{{ component.contents }}
-  {{- render_arg_content(component) }}
+{% for child in component.children %}
-{%- else -%}
+{{ render(child) }}
-  {{ component.contents }}
+{% endfor %}
-  {% for child in component.children %}
-  {{ render(child) }}
-  {% endfor %}
-{%- endif -%}
 </{{component.name}}>
 {%- endmacro %}
 

reflex/.templates/web/components/shiki/code.js

@@ -1,26 +1,31 @@
 import { useEffect, useState } from "react"
 import { codeToHtml} from "shiki"
 
-export function Code ({code, theme, language, transformers, ...divProps}) {
+/**
+ * Code component that uses Shiki to convert code to HTML and render it.
+ *
+ * @param code - The code to be highlighted.
+ * @param theme - The theme to be used for highlighting.
+ * @param language - The language of the code.
+ * @param transformers - The transformers to be applied to the code.
+ * @param decorations - The decorations to be applied to the code.
+ * @param divProps - Additional properties to be passed to the div element.
+ * @returns The rendered code block.
+ */
+export function Code ({code, theme, language, transformers, decorations, ...divProps}) {
     const [codeResult, setCodeResult] = useState("")
     useEffect(() => {
         async function fetchCode() {
-          let final_code;
+          const result = await codeToHtml(code, {
-
-          if (Array.isArray(code)) {
-            final_code = code[0];
-          } else {
-            final_code = code;
-          }
-          const result = await codeToHtml(final_code, {
             lang: language,
             theme,
-            transformers
+            transformers,
+            decorations
           });
           setCodeResult(result);
         }
         fetchCode();
-      }, [code, language, theme, transformers]
+      }, [code, language, theme, transformers, decorations]
 
     )
     return (

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

@@ -15,7 +15,6 @@ import {
 } from "$/utils/context.js";
 import debounce from "$/utils/helpers/debounce";
 import throttle from "$/utils/helpers/throttle";
-import * as Babel from "@babel/standalone";
 
 // Endpoint URLs.
 const EVENTURL = env.EVENT;
@@ -139,8 +138,7 @@ export const evalReactComponent = async (component) => {
   if (!window.React && window.__reflex) {
     window.React = window.__reflex.react;
   }
-  const output = Babel.transform(component, { presets: ["react"] }).code;
+  const encodedJs = encodeURIComponent(component);
-  const encodedJs = encodeURIComponent(output);
   const dataUri = "data:text/javascript;charset=utf-8," + encodedJs;
   const module = await eval(`import(dataUri)`);
   return module.default;
@@ -180,11 +178,6 @@ export const applyEvent = async (event, socket) => {
     return false;
   }
 
-  if (event.name == "_console") {
-    console.log(event.payload.message);
-    return false;
-  }
-
   if (event.name == "_remove_cookie") {
     cookies.remove(event.payload.key, { ...event.payload.options });
     queueEventIfSocketExists(initialEvents(), socket);
@@ -215,12 +208,6 @@ export const applyEvent = async (event, socket) => {
     return false;
   }
 
-  if (event.name == "_set_clipboard") {
-    const content = event.payload.content;
-    navigator.clipboard.writeText(content);
-    return false;
-  }
-
   if (event.name == "_download") {
     const a = document.createElement("a");
     a.hidden = true;
@@ -235,11 +222,6 @@ export const applyEvent = async (event, socket) => {
     return false;
   }
 
-  if (event.name == "_alert") {
-    alert(event.payload.message);
-    return false;
-  }
-
   if (event.name == "_set_focus") {
     const ref =
       event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;
@@ -256,6 +238,25 @@ export const applyEvent = async (event, socket) => {
     return false;
   }
 
+  if (event.name == "_call_function") {
+    try {
+      const eval_result = event.payload.function();
+      if (event.payload.callback) {
+        if (!!eval_result && typeof eval_result.then === "function") {
+          event.payload.callback(await eval_result);
+        } else {
+          event.payload.callback(eval_result);
+        }
+      }
+    } catch (e) {
+      console.log("_call_function", e);
+      if (window && window?.onerror) {
+        window.onerror(e.message, null, null, null, e);
+      }
+    }
+    return false;
+  }
+
   if (event.name == "_call_script") {
     try {
       const eval_result = eval(event.payload.javascript_code);

reflex/__init__.py

@@ -303,10 +303,13 @@ _MAPPING: dict = {
         "EventHandler",
         "background",
         "call_script",
+        "call_function",
+        "run_script",
         "clear_local_storage",
         "clear_session_storage",
         "console_log",
         "download",
+        "noop",
         "prevent_default",
         "redirect",
         "remove_cookie",

reflex/__init__.pyi

@@ -155,17 +155,20 @@ from .constants import Env as Env
 from .event import EventChain as EventChain
 from .event import EventHandler as EventHandler
 from .event import background as background
+from .event import call_function as call_function
 from .event import call_script as call_script
 from .event import clear_local_storage as clear_local_storage
 from .event import clear_session_storage as clear_session_storage
 from .event import console_log as console_log
 from .event import download as download
 from .event import event as event
+from .event import noop as noop
 from .event import prevent_default as prevent_default
 from .event import redirect as redirect
 from .event import remove_cookie as remove_cookie
 from .event import remove_local_storage as remove_local_storage
 from .event import remove_session_storage as remove_session_storage
+from .event import run_script as run_script
 from .event import scroll_to as scroll_to
 from .event import set_clipboard as set_clipboard
 from .event import set_focus as set_focus

reflex/app.py

@@ -46,7 +46,6 @@ from starlette_admin.contrib.sqla.view import ModelView
 from reflex import constants
 from reflex.admin import AdminDash
 from reflex.app_mixins import AppMixin, LifespanMixin, MiddlewareMixin
-from reflex.base import Base
 from reflex.compiler import compiler
 from reflex.compiler import utils as compiler_utils
 from reflex.compiler.compiler import (
@@ -70,7 +69,14 @@ from reflex.components.core.client_side_routing import (
 from reflex.components.core.upload import Upload, get_upload_dir
 from reflex.components.radix import themes
 from reflex.config import environment, get_config
-from reflex.event import Event, EventHandler, EventSpec, window_alert
+from reflex.event import (
+    Event,
+    EventHandler,
+    EventSpec,
+    EventType,
+    IndividualEventType,
+    window_alert,
+)
 from reflex.model import Model, get_db_status
 from reflex.page import (
     DECORATED_PAGES,
@@ -189,11 +195,12 @@ class UnevaluatedPage:
     title: Union[Var, str, None]
     description: Union[Var, str, None]
     image: str
-    on_load: Union[EventHandler, EventSpec, List[Union[EventHandler, EventSpec]], None]
+    on_load: Union[EventType[[]], None]
     meta: List[Dict[str, str]]
 
 
-class App(MiddlewareMixin, LifespanMixin, Base):
+@dataclasses.dataclass()
+class App(MiddlewareMixin, LifespanMixin):
     """The main Reflex app that encapsulates the backend and frontend.
 
     Every Reflex app needs an app defined in its main module.
@@ -215,24 +222,26 @@ class App(MiddlewareMixin, LifespanMixin, Base):
     """
 
     # The global [theme](https://reflex.dev/docs/styling/theming/#theme) for the entire app.
-    theme: Optional[Component] = themes.theme(accent_color="blue")
+    theme: Optional[Component] = dataclasses.field(
+        default_factory=lambda: themes.theme(accent_color="blue")
+    )
 
     # The [global style](https://reflex.dev/docs/styling/overview/#global-styles}) for the app.
-    style: ComponentStyle = {}
+    style: ComponentStyle = dataclasses.field(default_factory=dict)
 
     # A list of URLs to [stylesheets](https://reflex.dev/docs/styling/custom-stylesheets/) to include in the app.
-    stylesheets: List[str] = []
+    stylesheets: List[str] = dataclasses.field(default_factory=list)
 
     # A component that is present on every page (defaults to the Connection Error banner).
     overlay_component: Optional[Union[Component, ComponentCallable]] = (
-        default_overlay_component()
+        dataclasses.field(default_factory=default_overlay_component)
     )
 
     # Error boundary component to wrap the app with.
     error_boundary: Optional[ComponentCallable] = default_error_boundary
 
     # Components to add to the head of every page.
-    head_components: List[Component] = []
+    head_components: List[Component] = dataclasses.field(default_factory=list)
 
     # The Socket.IO AsyncServer instance.
     sio: Optional[AsyncServer] = None
@@ -244,10 +253,12 @@ class App(MiddlewareMixin, LifespanMixin, Base):
     html_custom_attrs: Optional[Dict[str, str]] = None
 
     # A map from a route to an unevaluated page. PRIVATE.
-    unevaluated_pages: Dict[str, UnevaluatedPage] = {}
+    unevaluated_pages: Dict[str, UnevaluatedPage] = dataclasses.field(
+        default_factory=dict
+    )
 
     # A map from a page route to the component to render. Users should use `add_page`. PRIVATE.
-    pages: Dict[str, Component] = {}
+    pages: Dict[str, Component] = dataclasses.field(default_factory=dict)
 
     # The backend API object. PRIVATE.
     api: FastAPI = None  # type: ignore
@@ -259,7 +270,9 @@ class App(MiddlewareMixin, LifespanMixin, Base):
     _state_manager: Optional[StateManager] = None
 
     # Mapping from a route to event handlers to trigger when the page loads. PRIVATE.
-    load_events: Dict[str, List[Union[EventHandler, EventSpec]]] = {}
+    load_events: Dict[str, List[IndividualEventType[[]]]] = dataclasses.field(
+        default_factory=dict
+    )
 
     # Admin dashboard to view and manage the database. PRIVATE.
     admin_dash: Optional[AdminDash] = None
@@ -268,7 +281,7 @@ class App(MiddlewareMixin, LifespanMixin, Base):
     event_namespace: Optional[EventNamespace] = None
 
     # Background tasks that are currently running. PRIVATE.
-    background_tasks: Set[asyncio.Task] = set()
+    background_tasks: Set[asyncio.Task] = dataclasses.field(default_factory=set)
 
     # Frontend Error Handler Function
     frontend_exception_handler: Callable[[Exception], None] = (
@@ -280,23 +293,14 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         [Exception], Union[EventSpec, List[EventSpec], None]
     ] = default_backend_exception_handler
 
-    def __init__(self, **kwargs):
+    def __post_init__(self):
         """Initialize the app.
 
-        Args:
-            **kwargs: Kwargs to initialize the app with.
-
         Raises:
             ValueError: If the event namespace is not provided in the config.
                         Also, if there are multiple client subclasses of rx.BaseState(Subclasses of rx.BaseState should consist
                         of the DefaultState and the client app state).
         """
-        if "connect_error_component" in kwargs:
-            raise ValueError(
-                "`connect_error_component` is deprecated, use `overlay_component` instead"
-            )
-        super().__init__(**kwargs)
-
         # Special case to allow test cases have multiple subclasses of rx.BaseState.
         if not is_testing_env() and BaseState.__subclasses__() != [State]:
             # Only rx.State is allowed as Base State subclass.
@@ -471,9 +475,7 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         title: str | Var | None = None,
         description: str | Var | None = None,
         image: str = constants.DefaultPage.IMAGE,
-        on_load: (
+        on_load: EventType[[]] | None = None,
-            EventHandler | EventSpec | list[EventHandler | EventSpec] | None
-        ) = None,
         meta: list[dict[str, str]] = constants.DefaultPage.META_LIST,
     ):
         """Add a page to the app.
@@ -559,7 +561,7 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         self._check_routes_conflict(route)
         self.pages[route] = component
 
-    def get_load_events(self, route: str) -> list[EventHandler | EventSpec]:
+    def get_load_events(self, route: str) -> list[IndividualEventType[[]]]:
         """Get the load events for a route.
 
         Args:
@@ -618,9 +620,7 @@ class App(MiddlewareMixin, LifespanMixin, Base):
         title: str = constants.Page404.TITLE,
         image: str = constants.Page404.IMAGE,
         description: str = constants.Page404.DESCRIPTION,
-        on_load: (
+        on_load: EventType[[]] | None = None,
-            EventHandler | EventSpec | list[EventHandler | EventSpec] | None
-        ) = None,
         meta: list[dict[str, str]] = constants.DefaultPage.META_LIST,
     ):
         """Define a custom 404 page for any url having no match.
@@ -929,6 +929,8 @@ class App(MiddlewareMixin, LifespanMixin, Base):
             )
         compile_results.append((stateful_components_path, stateful_components_code))
 
+        progress.advance(task)
+
         # Compile the root document before fork.
         compile_results.append(
             compiler.compile_document_root(
@@ -1389,7 +1391,7 @@ def upload(app: App):
         if isinstance(func, EventHandler):
             if func.is_background:
                 raise UploadTypeError(
-                    f"@rx.background is not supported for upload handler `{handler}`.",
+                    f"@rx.event(background=True) is not supported for upload handler `{handler}`.",
                 )
             func = func.fn
         if isinstance(func, functools.partial):

reflex/app_mixins/lifespan.py

@@ -4,6 +4,7 @@ from __future__ import annotations
 
 import asyncio
 import contextlib
+import dataclasses
 import functools
 import inspect
 from typing import Callable, Coroutine, Set, Union
@@ -16,11 +17,14 @@ from reflex.utils.exceptions import InvalidLifespanTaskType
 from .mixin import AppMixin
 
 
+@dataclasses.dataclass
 class LifespanMixin(AppMixin):
     """A Mixin that allow tasks to run during the whole app lifespan."""
 
     # Lifespan tasks that are planned to run.
-    lifespan_tasks: Set[Union[asyncio.Task, Callable]] = set()
+    lifespan_tasks: Set[Union[asyncio.Task, Callable]] = dataclasses.field(
+        default_factory=set
+    )
 
     @contextlib.asynccontextmanager
     async def _run_lifespan_tasks(self, app: FastAPI):

reflex/app_mixins/middleware.py

@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 import asyncio
+import dataclasses
 from typing import List
 
 from reflex.event import Event
@@ -12,11 +13,12 @@ from reflex.state import BaseState, StateUpdate
 from .mixin import AppMixin
 
 
+@dataclasses.dataclass
 class MiddlewareMixin(AppMixin):
     """Middleware Mixin that allow to add middleware to the app."""
 
     # Middleware to add to the app. Users should use `add_middleware`. PRIVATE.
-    middleware: List[Middleware] = []
+    middleware: List[Middleware] = dataclasses.field(default_factory=list)
 
     def _init_mixin(self):
         self.middleware.append(HydrateMiddleware())

reflex/app_mixins/mixin.py

@@ -1,9 +1,10 @@
 """Default mixin for all app mixins."""
 
-from reflex.base import Base
+import dataclasses
 
 
-class AppMixin(Base):
+@dataclasses.dataclass
+class AppMixin:
     """Define the base class for all app mixins."""
 
     def _init_mixin(self):

reflex/components/base/bare.py

@@ -4,10 +4,11 @@ from __future__ import annotations
 
 from typing import Any, Iterator
 
-from reflex.components.component import Component
+from reflex.components.component import Component, LiteralComponentVar
 from reflex.components.tags import Tag
 from reflex.components.tags.tagless import Tagless
-from reflex.vars import ArrayVar, BooleanVar, ObjectVar, Var
+from reflex.utils.imports import ParsedImportDict
+from reflex.vars import BooleanVar, ObjectVar, Var
 
 
 class Bare(Component):
@@ -31,9 +32,77 @@ class Bare(Component):
             contents = str(contents) if contents is not None else ""
         return cls(contents=contents)  # type: ignore
 
+    def _get_all_hooks_internal(self) -> dict[str, None]:
+        """Include the hooks for the component.
+
+        Returns:
+            The hooks for the component.
+        """
+        hooks = super()._get_all_hooks_internal()
+        if isinstance(self.contents, LiteralComponentVar):
+            hooks |= self.contents._var_value._get_all_hooks_internal()
+        return hooks
+
+    def _get_all_hooks(self) -> dict[str, None]:
+        """Include the hooks for the component.
+
+        Returns:
+            The hooks for the component.
+        """
+        hooks = super()._get_all_hooks()
+        if isinstance(self.contents, LiteralComponentVar):
+            hooks |= self.contents._var_value._get_all_hooks()
+        return hooks
+
+    def _get_all_imports(self) -> ParsedImportDict:
+        """Include the imports for the component.
+
+        Returns:
+            The imports for the component.
+        """
+        imports = super()._get_all_imports()
+        if isinstance(self.contents, LiteralComponentVar):
+            var_data = self.contents._get_all_var_data()
+            if var_data:
+                imports |= {k: list(v) for k, v in var_data.imports}
+        return imports
+
+    def _get_all_dynamic_imports(self) -> set[str]:
+        """Get dynamic imports for the component.
+
+        Returns:
+            The dynamic imports.
+        """
+        dynamic_imports = super()._get_all_dynamic_imports()
+        if isinstance(self.contents, LiteralComponentVar):
+            dynamic_imports |= self.contents._var_value._get_all_dynamic_imports()
+        return dynamic_imports
+
+    def _get_all_custom_code(self) -> set[str]:
+        """Get custom code for the component.
+
+        Returns:
+            The custom code.
+        """
+        custom_code = super()._get_all_custom_code()
+        if isinstance(self.contents, LiteralComponentVar):
+            custom_code |= self.contents._var_value._get_all_custom_code()
+        return custom_code
+
+    def _get_all_refs(self) -> set[str]:
+        """Get the refs for the children of the component.
+
+        Returns:
+            The refs for the children.
+        """
+        refs = super()._get_all_refs()
+        if isinstance(self.contents, LiteralComponentVar):
+            refs |= self.contents._var_value._get_all_refs()
+        return refs
+
     def _render(self) -> Tag:
         if isinstance(self.contents, Var):
-            if isinstance(self.contents, (BooleanVar, ObjectVar, ArrayVar)):
+            if isinstance(self.contents, (BooleanVar, ObjectVar)):
                 return Tagless(contents=f"{{{str(self.contents.to_string())}}}")
             return Tagless(contents=f"{{{str(self.contents)}}}")
         return Tagless(contents=str(self.contents))

reflex/components/base/error_boundary.pyi

@@ -50,6 +50,7 @@ class ErrorBoundary(Component):
 
         Args:
             *children: The children of the component.
+            on_error: Fired when the boundary catches an error.
             Fallback_component: Rendered instead of the children when an error is caught.
             style: The style of the component.
             key: A unique key for the component.

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, empty_event
+from reflex.event import EventHandler, no_args_event_spec
 from reflex.vars.base import LiteralVar, Var
 
 
@@ -35,13 +35,13 @@ class Script(Component):
     )
 
     # Triggered when the script is loading
-    on_load: EventHandler[empty_event]
+    on_load: EventHandler[no_args_event_spec]
 
     # Triggered when the script has loaded
-    on_ready: EventHandler[empty_event]
+    on_ready: EventHandler[no_args_event_spec]
 
     # Triggered when the script has errored
-    on_error: EventHandler[empty_event]
+    on_error: EventHandler[no_args_event_spec]
 
     @classmethod
     def create(cls, *children, **props) -> Component:

reflex/components/base/script.pyi

@@ -65,6 +65,9 @@ class Script(Component):
             *children: The children of the component.
             src: Required unless inline script is used
             strategy: When the script will execute: afterInteractive (defer-like behavior) | beforeInteractive | lazyOnload (async-like behavior)
+            on_load: Triggered when the script is loading
+            on_ready: Triggered when the script has loaded
+            on_error: Triggered when the script has errored
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/component.py

@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 import copy
+import dataclasses
 import typing
 from abc import ABC, abstractmethod
 from functools import lru_cache, wraps
@@ -46,8 +47,8 @@ from reflex.event import (
     EventVar,
     call_event_fn,
     call_event_handler,
-    empty_event,
     get_handler_args,
+    no_args_event_spec,
 )
 from reflex.style import Style, format_as_emotion
 from reflex.utils import format, imports, types
@@ -59,7 +60,15 @@ from reflex.utils.imports import (
     parse_imports,
 )
 from reflex.vars import VarData
-from reflex.vars.base import LiteralVar, Var
+from reflex.vars.base import (
+    CachedVarOperation,
+    LiteralVar,
+    Var,
+    cached_property_no_lock,
+)
+from reflex.vars.function import ArgsFunctionOperation, FunctionStringVar
+from reflex.vars.number import ternary_operation
+from reflex.vars.object import ObjectVar
 from reflex.vars.sequence import LiteralArrayVar
 
 
@@ -471,6 +480,7 @@ class Component(BaseComponent, ABC):
                 kwargs["event_triggers"][key] = self._create_event_chain(
                     value=value,  # type: ignore
                     args_spec=component_specific_triggers[key],
+                    key=key,
                 )
 
         # Remove any keys that were added as events.
@@ -531,12 +541,14 @@ class Component(BaseComponent, ABC):
             List[Union[EventHandler, EventSpec, EventVar]],
             Callable,
         ],
+        key: Optional[str] = None,
     ) -> Union[EventChain, Var]:
         """Create an event chain from a variety of input types.
 
         Args:
             args_spec: The args_spec of the event trigger being bound.
             value: The value to create the event chain from.
+            key: The key of the event trigger being bound.
 
         Returns:
             The event chain.
@@ -551,7 +563,7 @@ class Component(BaseComponent, ABC):
             elif isinstance(value, EventVar):
                 value = [value]
             elif issubclass(value._var_type, (EventChain, EventSpec)):
-                return self._create_event_chain(args_spec, value.guess_type())
+                return self._create_event_chain(args_spec, value.guess_type(), key=key)
             else:
                 raise ValueError(
                     f"Invalid event chain: {str(value)} of type {value._var_type}"
@@ -570,10 +582,10 @@ class Component(BaseComponent, ABC):
             for v in value:
                 if isinstance(v, (EventHandler, EventSpec)):
                     # Call the event handler to get the event.
-                    events.append(call_event_handler(v, args_spec))
+                    events.append(call_event_handler(v, args_spec, key=key))
                 elif isinstance(v, Callable):
                     # Call the lambda to get the event chain.
-                    result = call_event_fn(v, args_spec)
+                    result = call_event_fn(v, args_spec, key=key)
                     if isinstance(result, Var):
                         raise ValueError(
                             f"Invalid event chain: {v}. Cannot use a Var-returning "
@@ -590,7 +602,7 @@ class Component(BaseComponent, ABC):
             result = call_event_fn(value, args_spec)
             if isinstance(result, Var):
                 # Recursively call this function if the lambda returned an EventChain Var.
-                return self._create_event_chain(args_spec, result)
+                return self._create_event_chain(args_spec, result, key=key)
             events = [*result]
 
         # Otherwise, raise an error.
@@ -625,21 +637,21 @@ class Component(BaseComponent, ABC):
 
         """
         default_triggers = {
-            EventTriggers.ON_FOCUS: empty_event,
+            EventTriggers.ON_FOCUS: no_args_event_spec,
-            EventTriggers.ON_BLUR: empty_event,
+            EventTriggers.ON_BLUR: no_args_event_spec,
-            EventTriggers.ON_CLICK: empty_event,
+            EventTriggers.ON_CLICK: no_args_event_spec,
-            EventTriggers.ON_CONTEXT_MENU: empty_event,
+            EventTriggers.ON_CONTEXT_MENU: no_args_event_spec,
-            EventTriggers.ON_DOUBLE_CLICK: empty_event,
+            EventTriggers.ON_DOUBLE_CLICK: no_args_event_spec,
-            EventTriggers.ON_MOUSE_DOWN: empty_event,
+            EventTriggers.ON_MOUSE_DOWN: no_args_event_spec,
-            EventTriggers.ON_MOUSE_ENTER: empty_event,
+            EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_LEAVE: empty_event,
+            EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,
-            EventTriggers.ON_MOUSE_MOVE: empty_event,
+            EventTriggers.ON_MOUSE_MOVE: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OUT: empty_event,
+            EventTriggers.ON_MOUSE_OUT: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OVER: empty_event,
+            EventTriggers.ON_MOUSE_OVER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_UP: empty_event,
+            EventTriggers.ON_MOUSE_UP: no_args_event_spec,
-            EventTriggers.ON_SCROLL: empty_event,
+            EventTriggers.ON_SCROLL: no_args_event_spec,
-            EventTriggers.ON_MOUNT: empty_event,
+            EventTriggers.ON_MOUNT: no_args_event_spec,
-            EventTriggers.ON_UNMOUNT: empty_event,
+            EventTriggers.ON_UNMOUNT: no_args_event_spec,
         }
 
         # Look for component specific triggers,
@@ -650,7 +662,7 @@ class Component(BaseComponent, ABC):
                 annotation = field.annotation
                 if (metadata := getattr(annotation, "__metadata__", None)) is not None:
                     args_spec = metadata[0]
-                default_triggers[field.name] = args_spec or (empty_event)  # type: ignore
+                default_triggers[field.name] = args_spec or (no_args_event_spec)  # type: ignore
         return default_triggers
 
     def __repr__(self) -> str:
@@ -1711,8 +1723,9 @@ class CustomComponent(Component):
                 value = self._create_event_chain(
                     value=value,
                     args_spec=event_triggers_in_component_declaration.get(
-                        key, empty_event
+                        key, no_args_event_spec
                     ),
+                    key=key,
                 )
                 self.props[format.to_camel_case(key)] = value
                 continue
@@ -2345,3 +2358,203 @@ class MemoizationLeaf(Component):
 
 
 load_dynamic_serializer()
+
+
+class ComponentVar(Var[Component], python_types=BaseComponent):
+    """A Var that represents a Component."""
+
+
+def empty_component() -> Component:
+    """Create an empty component.
+
+    Returns:
+        An empty component.
+    """
+    from reflex.components.base.bare import Bare
+
+    return Bare.create("")
+
+
+def render_dict_to_var(tag: dict | Component | str, imported_names: set[str]) -> Var:
+    """Convert a render dict to a Var.
+
+    Args:
+        tag: The render dict.
+        imported_names: The names of the imported components.
+
+    Returns:
+        The Var.
+    """
+    if not isinstance(tag, dict):
+        if isinstance(tag, Component):
+            return render_dict_to_var(tag.render(), imported_names)
+        return Var.create(tag)
+
+    if "iterable" in tag:
+        function_return = Var.create(
+            [
+                render_dict_to_var(child.render(), imported_names)
+                for child in tag["children"]
+            ]
+        )
+
+        func = ArgsFunctionOperation.create(
+            (tag["arg_var_name"], tag["index_var_name"]),
+            function_return,
+        )
+
+        return FunctionStringVar.create("Array.prototype.map.call").call(
+            tag["iterable"]
+            if not isinstance(tag["iterable"], ObjectVar)
+            else tag["iterable"].items(),
+            func,
+        )
+
+    if tag["name"] == "match":
+        element = tag["cond"]
+
+        conditionals = tag["default"]
+
+        for case in tag["match_cases"][::-1]:
+            condition = case[0].to_string() == element.to_string()
+            for pattern in case[1:-1]:
+                condition = condition | (pattern.to_string() == element.to_string())
+
+            conditionals = ternary_operation(
+                condition,
+                case[-1],
+                conditionals,
+            )
+
+        return conditionals
+
+    if "cond" in tag:
+        return ternary_operation(
+            tag["cond"],
+            render_dict_to_var(tag["true_value"], imported_names),
+            render_dict_to_var(tag["false_value"], imported_names)
+            if tag["false_value"] is not None
+            else Var.create(None),
+        )
+
+    props = {}
+
+    special_props = []
+
+    for prop_str in tag["props"]:
+        if "=" not in prop_str:
+            special_props.append(Var(prop_str).to(ObjectVar))
+            continue
+        prop = prop_str.index("=")
+        key = prop_str[:prop]
+        value = prop_str[prop + 2 : -1]
+        props[key] = value
+
+    props = Var.create({Var.create(k): Var(v) for k, v in props.items()})
+
+    for prop in special_props:
+        props = props.merge(prop)
+
+    contents = tag["contents"][1:-1] if tag["contents"] else None
+
+    raw_tag_name = tag.get("name")
+    tag_name = Var(raw_tag_name or "Fragment")
+
+    tag_name = (
+        Var.create(raw_tag_name)
+        if raw_tag_name
+        and raw_tag_name.split(".")[0] not in imported_names
+        and raw_tag_name.lower() == raw_tag_name
+        else tag_name
+    )
+
+    return FunctionStringVar.create(
+        "jsx",
+    ).call(
+        tag_name,
+        props,
+        *([Var(contents)] if contents is not None else []),
+        *[render_dict_to_var(child, imported_names) for child in tag["children"]],
+    )
+
+
+@dataclasses.dataclass(
+    eq=False,
+    frozen=True,
+)
+class LiteralComponentVar(CachedVarOperation, LiteralVar, ComponentVar):
+    """A Var that represents a Component."""
+
+    _var_value: BaseComponent = dataclasses.field(default_factory=empty_component)
+
+    @cached_property_no_lock
+    def _cached_var_name(self) -> str:
+        """Get the name of the var.
+
+        Returns:
+            The name of the var.
+        """
+        var_data = self._get_all_var_data()
+        if var_data is not None:
+            # flatten imports
+            imported_names = {j.alias or j.name for i in var_data.imports for j in i[1]}
+        else:
+            imported_names = set()
+        return str(render_dict_to_var(self._var_value.render(), imported_names))
+
+    @cached_property_no_lock
+    def _cached_get_all_var_data(self) -> VarData | None:
+        """Get the VarData for the var.
+
+        Returns:
+            The VarData for the var.
+        """
+        return VarData.merge(
+            VarData(
+                imports={
+                    "@emotion/react": [
+                        ImportVar(tag="jsx"),
+                    ],
+                }
+            ),
+            VarData(
+                imports=self._var_value._get_all_imports(),
+            ),
+            VarData(
+                imports={
+                    "react": [
+                        ImportVar(tag="Fragment"),
+                    ],
+                }
+            ),
+        )
+
+    def __hash__(self) -> int:
+        """Get the hash of the var.
+
+        Returns:
+            The hash of the var.
+        """
+        return hash((self.__class__.__name__, self._js_expr))
+
+    @classmethod
+    def create(
+        cls,
+        value: Component,
+        _var_data: VarData | None = None,
+    ):
+        """Create a var from a value.
+
+        Args:
+            value: The value of the var.
+            _var_data: Additional hooks and imports associated with the Var.
+
+        Returns:
+            The var.
+        """
+        return LiteralComponentVar(
+            _js_expr="",
+            _var_type=type(value),
+            _var_data=_var_data,
+            _var_value=value,
+        )

reflex/components/core/clipboard.py

@@ -6,7 +6,7 @@ from typing import Dict, List, Tuple, Union
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.tags.tag import Tag
-from reflex.event import EventChain, EventHandler, identity_event
+from reflex.event import EventChain, EventHandler, passthrough_event_spec
 from reflex.utils.format import format_prop, wrap
 from reflex.utils.imports import ImportVar
 from reflex.vars import get_unique_variable_name
@@ -20,7 +20,7 @@ class Clipboard(Fragment):
     targets: Var[List[str]]
 
     # Called when the user pastes data into the document. Data is a list of tuples of (mime_type, data). Binary types will be base64 encoded as a data uri.
-    on_paste: EventHandler[identity_event(List[Tuple[str, str]])]
+    on_paste: EventHandler[passthrough_event_spec(List[Tuple[str, str]])]
 
     # Save the original event actions for the on_paste event.
     on_paste_event_actions: Var[Dict[str, Union[bool, int]]]

reflex/components/core/clipboard.pyi

@@ -6,7 +6,9 @@
 from typing import Any, Dict, List, Optional, Union, overload
 
 from reflex.components.base.fragment import Fragment
-from reflex.event import EventType
+from reflex.event import (
+    EventType,
+)
 from reflex.style import Style
 from reflex.utils.imports import ImportVar
 from reflex.vars.base import Var
@@ -50,6 +52,7 @@ class Clipboard(Fragment):
         Args:
             *children: The children of the component.
             targets: The element ids to attach the event listener to. Defaults to all child components or the document.
+            on_paste: Called when the user pastes data into the document. Data is a list of tuples of (mime_type, data). Binary types will be base64 encoded as a data uri.
             on_paste_event_actions: Save the original event actions for the on_paste event.
             style: The style of the component.
             key: A unique key for the component.

reflex/components/core/debounce.py

@@ -6,7 +6,7 @@ from typing import Any, Type, Union
 
 from reflex.components.component import Component
 from reflex.constants import EventTriggers
-from reflex.event import EventHandler, empty_event
+from reflex.event import EventHandler, no_args_event_spec
 from reflex.vars import VarData
 from reflex.vars.base import Var
 
@@ -46,7 +46,7 @@ class DebounceInput(Component):
     element: Var[Type[Component]]
 
     # Fired when the input value changes
-    on_change: EventHandler[empty_event]
+    on_change: EventHandler[no_args_event_spec]
 
     @classmethod
     def create(cls, *children: Component, **props: Any) -> Component:

reflex/components/core/upload.py

@@ -5,23 +5,30 @@ from __future__ import annotations
 from pathlib import Path
 from typing import Any, Callable, ClassVar, Dict, List, Optional, Tuple
 
-from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
+from reflex.components.component import (
+    Component,
+    ComponentNamespace,
+    MemoizationLeaf,
+    StatefulComponent,
+)
 from reflex.components.el.elements.forms import Input
 from reflex.components.radix.themes.layout.box import Box
 from reflex.config import environment
 from reflex.constants import Dirs
+from reflex.constants.compiler import Hooks, Imports
 from reflex.event import (
     CallableEventSpec,
     EventChain,
     EventHandler,
     EventSpec,
     call_event_fn,
-    call_script,
     parse_args_spec,
+    run_script,
 )
+from reflex.utils import format
 from reflex.utils.imports import ImportVar
 from reflex.vars import VarData
-from reflex.vars.base import CallableVar, LiteralVar, Var
+from reflex.vars.base import CallableVar, LiteralVar, Var, get_unique_variable_name
 from reflex.vars.sequence import LiteralStringVar
 
 DEFAULT_UPLOAD_ID: str = "default"
@@ -99,8 +106,8 @@ def clear_selected_files(id_: str = DEFAULT_UPLOAD_ID) -> EventSpec:
     """
     # UploadFilesProvider assigns a special function to clear selected files
     # into the shared global refs object to make it accessible outside a React
-    # component via `call_script` (otherwise backend could never clear files).
+    # component via `run_script` (otherwise backend could never clear files).
-    return call_script(f"refs['__clear_selected_files']({id_!r})")
+    return run_script(f"refs['__clear_selected_files']({id_!r})")
 
 
 def cancel_upload(upload_id: str) -> EventSpec:
@@ -112,7 +119,7 @@ def cancel_upload(upload_id: str) -> EventSpec:
     Returns:
         An event spec that cancels the upload when triggered.
     """
-    return call_script(
+    return run_script(
         f"upload_controllers[{str(LiteralVar.create(upload_id))}]?.abort()"
     )
 
@@ -179,9 +186,7 @@ class Upload(MemoizationLeaf):
 
     library = "react-dropzone@14.2.10"
 
-    tag = "ReactDropzone"
+    tag = ""
-
-    is_default = True
 
     # The list of accepted file types. This should be a dictionary of MIME types as keys and array of file formats as
     # values.
@@ -201,7 +206,7 @@ class Upload(MemoizationLeaf):
     min_size: Var[int]
 
     # Whether to allow multiple files to be uploaded.
-    multiple: Var[bool] = True  # type: ignore
+    multiple: Var[bool]
 
     # Whether to disable click to upload.
     no_click: Var[bool]
@@ -232,6 +237,8 @@ class Upload(MemoizationLeaf):
         # Mark the Upload component as used in the app.
         cls.is_used = True
 
+        props.setdefault("multiple", True)
+
         # Apply the default classname
         given_class_name = props.pop("class_name", [])
         if isinstance(given_class_name, str):
@@ -243,17 +250,6 @@ class Upload(MemoizationLeaf):
         upload_props = {
             key: value for key, value in props.items() if key in supported_props
         }
-        # The file input to use.
-        upload = Input.create(type="file")
-        upload.special_props = [Var(_js_expr="{...getInputProps()}", _var_type=None)]
-
-        # The dropzone to use.
-        zone = Box.create(
-            upload,
-            *children,
-            **{k: v for k, v in props.items() if k not in supported_props},
-        )
-        zone.special_props = [Var(_js_expr="{...getRootProps()}", _var_type=None)]
 
         # Create the component.
         upload_props["id"] = props.get("id", DEFAULT_UPLOAD_ID)
@@ -275,9 +271,72 @@ class Upload(MemoizationLeaf):
                     ),
                 )
             upload_props["on_drop"] = on_drop
+
+        input_props_unique_name = get_unique_variable_name()
+        root_props_unique_name = get_unique_variable_name()
+
+        event_var, callback_str = StatefulComponent._get_memoized_event_triggers(
+            Box.create(on_click=upload_props["on_drop"])  # type: ignore
+        )["on_click"]
+
+        upload_props["on_drop"] = event_var
+
+        upload_props = {
+            format.to_camel_case(key): value for key, value in upload_props.items()
+        }
+
+        use_dropzone_arguments = {
+            "onDrop": event_var,
+            **upload_props,
+        }
+
+        left_side = f"const {{getRootProps: {root_props_unique_name}, getInputProps: {input_props_unique_name}}} "
+        right_side = f"useDropzone({str(Var.create(use_dropzone_arguments))})"
+
+        var_data = VarData.merge(
+            VarData(
+                imports=Imports.EVENTS,
+                hooks={Hooks.EVENTS: None},
+            ),
+            event_var._get_all_var_data(),
+            VarData(
+                hooks={
+                    callback_str: None,
+                    f"{left_side} = {right_side};": None,
+                },
+                imports={
+                    "react-dropzone": "useDropzone",
+                    **Imports.EVENTS,
+                },
+            ),
+        )
+
+        # The file input to use.
+        upload = Input.create(type="file")
+        upload.special_props = [
+            Var(
+                _js_expr=f"{{...{input_props_unique_name}()}}",
+                _var_type=None,
+                _var_data=var_data,
+            )
+        ]
+
+        # The dropzone to use.
+        zone = Box.create(
+            upload,
+            *children,
+            **{k: v for k, v in props.items() if k not in supported_props},
+        )
+        zone.special_props = [
+            Var(
+                _js_expr=f"{{...{root_props_unique_name}()}}",
+                _var_type=None,
+                _var_data=var_data,
+            )
+        ]
+
         return super().create(
             zone,
-            **upload_props,
         )
 
     @classmethod
@@ -295,11 +354,6 @@ class Upload(MemoizationLeaf):
             return (arg_value[0], placeholder)
         return arg_value
 
-    def _render(self):
-        out = super()._render()
-        out.args = ("getRootProps", "getInputProps")
-        return out
-
     @staticmethod
     def _get_app_wrap_components() -> dict[tuple[int, str], Component]:
         return {

reflex/components/core/upload.pyi

@@ -6,7 +6,11 @@
 from pathlib import Path
 from typing import Any, ClassVar, Dict, List, Optional, Union, overload
 
-from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
+from reflex.components.component import (
+    Component,
+    ComponentNamespace,
+    MemoizationLeaf,
+)
 from reflex.constants import Dirs
 from reflex.event import (
     CallableEventSpec,
@@ -142,6 +146,7 @@ class Upload(MemoizationLeaf):
             no_click: Whether to disable click to upload.
             no_drag: Whether to disable drag and drop.
             no_keyboard: Whether to disable using the space/enter keys to upload.
+            on_drop: Fired when files are dropped.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -207,6 +212,7 @@ class StyledUpload(Upload):
             no_click: Whether to disable click to upload.
             no_drag: Whether to disable drag and drop.
             no_keyboard: Whether to disable using the space/enter keys to upload.
+            on_drop: Fired when files are dropped.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -272,6 +278,7 @@ class UploadNamespace(ComponentNamespace):
             no_click: Whether to disable click to upload.
             no_drag: Whether to disable drag and drop.
             no_keyboard: Whether to disable using the space/enter keys to upload.
+            on_drop: Fired when files are dropped.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/datadisplay/code.py

@@ -391,7 +391,7 @@ class CodeBlock(Component):
     theme: Var[Union[Theme, str]] = Theme.one_light
 
     # The language to use.
-    language: Var[LiteralCodeLanguage] = "python"  # type: ignore
+    language: Var[LiteralCodeLanguage] = Var.create("python")
 
     # The code to display.
     code: Var[str]
@@ -411,6 +411,12 @@ class CodeBlock(Component):
     # Props passed down to the code tag.
     code_tag_props: Var[Dict[str, str]]
 
+    # Whether a copy button should appear.
+    can_copy: Optional[bool] = False
+
+    # A custom copy button to override the default one.
+    copy_button: Optional[Union[bool, Component]] = None
+
     def add_imports(self) -> ImportDict:
         """Add imports for the CodeBlock component.
 
@@ -448,16 +454,12 @@ class CodeBlock(Component):
     def create(
         cls,
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[bool, Component]] = None,
         **props,
     ):
         """Create a text component.
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             **props: The props to pass to the component.
 
         Returns:
@@ -465,6 +467,8 @@ class CodeBlock(Component):
         """
         # This component handles style in a special prop.
         custom_style = props.pop("custom_style", {})
+        can_copy = props.pop("can_copy", False)
+        copy_button = props.pop("copy_button", None)
 
         if "theme" not in props:
             # Default color scheme responds to global color mode.
@@ -536,6 +540,9 @@ class CodeBlock(Component):
 
         return out
 
+    def _exclude_props(self) -> list[str]:
+        return ["can_copy", "copy_button"]
+
 
 class CodeblockNamespace(ComponentNamespace):
     """Namespace for the CodeBlock component."""

reflex/components/datadisplay/code.pyi

@@ -356,8 +356,6 @@ class CodeBlock(Component):
     def create(  # type: ignore
         cls,
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[Component, bool]] = None,
         theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
@@ -933,6 +931,8 @@ class CodeBlock(Component):
         wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
         custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
         code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
+        can_copy: Optional[bool] = None,
+        copy_button: Optional[Union[Component, bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -960,8 +960,6 @@ class CodeBlock(Component):
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             theme: The theme to use ("light" or "dark").
             language: The language to use.
             code: The code to display.
@@ -970,6 +968,8 @@ class CodeBlock(Component):
             wrap_long_lines: Whether to wrap long lines.
             custom_style: A custom style for the code block.
             code_tag_props: Props passed down to the code tag.
+            can_copy: Whether a copy button should appear.
+            copy_button: A custom copy button to override the default one.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -991,8 +991,6 @@ class CodeblockNamespace(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[Component, bool]] = None,
         theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
@@ -1568,6 +1566,8 @@ class CodeblockNamespace(ComponentNamespace):
         wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
         custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
         code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
+        can_copy: Optional[bool] = None,
+        copy_button: Optional[Union[Component, bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1595,8 +1595,6 @@ class CodeblockNamespace(ComponentNamespace):
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             theme: The theme to use ("light" or "dark").
             language: The language to use.
             code: The code to display.
@@ -1605,6 +1603,8 @@ class CodeblockNamespace(ComponentNamespace):
             wrap_long_lines: Whether to wrap long lines.
             custom_style: A custom style for the code block.
             code_tag_props: Props passed down to the code tag.
+            can_copy: Whether a copy button should appear.
+            copy_button: A custom copy button to override the default one.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/datadisplay/dataeditor.py

@@ -10,7 +10,7 @@ from typing_extensions import TypedDict
 from reflex.base import Base
 from reflex.components.component import Component, NoSSRComponent
 from reflex.components.literals import LiteralRowMarker
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.utils import console, format, types
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.utils.serializers import serializer
@@ -206,7 +206,7 @@ class DataEditor(NoSSRComponent):
     get_cell_content: Var[str]
 
     # Allow selection for copying.
-    get_cell_for_selection: Var[bool]
+    get_cells_for_selection: Var[bool]
 
     # Allow paste.
     on_paste: Var[bool]
@@ -284,56 +284,58 @@ class DataEditor(NoSSRComponent):
     theme: Var[Union[DataEditorTheme, Dict]]
 
     # Fired when a cell is activated.
-    on_cell_activated: EventHandler[identity_event(Tuple[int, int])]
+    on_cell_activated: EventHandler[passthrough_event_spec(Tuple[int, int])]
 
     # Fired when a cell is clicked.
-    on_cell_clicked: EventHandler[identity_event(Tuple[int, int])]
+    on_cell_clicked: EventHandler[passthrough_event_spec(Tuple[int, int])]
 
     # Fired when a cell is right-clicked.
-    on_cell_context_menu: EventHandler[identity_event(Tuple[int, int])]
+    on_cell_context_menu: EventHandler[passthrough_event_spec(Tuple[int, int])]
 
     # Fired when a cell is edited.
-    on_cell_edited: EventHandler[identity_event(Tuple[int, int], GridCell)]
+    on_cell_edited: EventHandler[passthrough_event_spec(Tuple[int, int], GridCell)]
 
     # Fired when a group header is clicked.
-    on_group_header_clicked: EventHandler[identity_event(Tuple[int, int], GridCell)]
+    on_group_header_clicked: EventHandler[
+        passthrough_event_spec(Tuple[int, int], GridCell)
+    ]
 
     # Fired when a group header is right-clicked.
     on_group_header_context_menu: EventHandler[
-        identity_event(int, GroupHeaderClickedEventArgs)
+        passthrough_event_spec(int, GroupHeaderClickedEventArgs)
     ]
 
     # Fired when a group header is renamed.
-    on_group_header_renamed: EventHandler[identity_event(str, str)]
+    on_group_header_renamed: EventHandler[passthrough_event_spec(str, str)]
 
     # Fired when a header is clicked.
-    on_header_clicked: EventHandler[identity_event(Tuple[int, int])]
+    on_header_clicked: EventHandler[passthrough_event_spec(Tuple[int, int])]
 
     # Fired when a header is right-clicked.
-    on_header_context_menu: EventHandler[identity_event(Tuple[int, int])]
+    on_header_context_menu: EventHandler[passthrough_event_spec(Tuple[int, int])]
 
     # Fired when a header menu item is clicked.
-    on_header_menu_click: EventHandler[identity_event(int, Rectangle)]
+    on_header_menu_click: EventHandler[passthrough_event_spec(int, Rectangle)]
 
     # Fired when an item is hovered.
-    on_item_hovered: EventHandler[identity_event(Tuple[int, int])]
+    on_item_hovered: EventHandler[passthrough_event_spec(Tuple[int, int])]
 
     # Fired when a selection is deleted.
-    on_delete: EventHandler[identity_event(GridSelection)]
+    on_delete: EventHandler[passthrough_event_spec(GridSelection)]
 
     # Fired when editing is finished.
     on_finished_editing: EventHandler[
-        identity_event(Union[GridCell, None], tuple[int, int])
+        passthrough_event_spec(Union[GridCell, None], tuple[int, int])
     ]
 
     # Fired when a row is appended.
-    on_row_appended: EventHandler[empty_event]
+    on_row_appended: EventHandler[no_args_event_spec]
 
     # Fired when the selection is cleared.
-    on_selection_cleared: EventHandler[empty_event]
+    on_selection_cleared: EventHandler[no_args_event_spec]
 
     # Fired when a column is resized.
-    on_column_resize: EventHandler[identity_event(GridColumn, int)]
+    on_column_resize: EventHandler[passthrough_event_spec(GridColumn, int)]
 
     def add_imports(self) -> ImportDict:
         """Add imports for the component.
@@ -424,7 +426,7 @@ class DataEditor(NoSSRComponent):
                 props["theme"] = DataEditorTheme(**theme)
 
         # Allow by default to select a region of cells in the grid.
-        props.setdefault("get_cell_for_selection", True)
+        props.setdefault("get_cells_for_selection", True)
 
         # Disable on_paste by default if not provided.
         props.setdefault("on_paste", False)

reflex/components/datadisplay/dataeditor.pyi

@@ -140,7 +140,7 @@ class DataEditor(NoSSRComponent):
         ] = None,
         data: Optional[Union[List[List[Any]], Var[List[List[Any]]]]] = None,
         get_cell_content: Optional[Union[Var[str], str]] = None,
-        get_cell_for_selection: Optional[Union[Var[bool], bool]] = None,
+        get_cells_for_selection: Optional[Union[Var[bool], bool]] = None,
         on_paste: Optional[Union[Var[bool], bool]] = None,
         draw_focus_ring: Optional[Union[Var[bool], bool]] = None,
         fixed_shadow_x: Optional[Union[Var[bool], bool]] = None,
@@ -228,7 +228,7 @@ class DataEditor(NoSSRComponent):
             columns: Headers of the columns for the data grid.
             data: The data.
             get_cell_content: The name of the callback used to find the data to display.
-            get_cell_for_selection: Allow selection for copying.
+            get_cells_for_selection: Allow selection for copying.
             on_paste: Allow paste.
             draw_focus_ring: Controls the drawing of the focus ring.
             fixed_shadow_x: Enables or disables the overlay shadow when scrolling horizontally.
@@ -253,6 +253,22 @@ class DataEditor(NoSSRComponent):
             scroll_offset_x: Initial scroll offset on the horizontal axis.
             scroll_offset_y: Initial scroll offset on the vertical axis.
             theme: global theme
+            on_cell_activated: Fired when a cell is activated.
+            on_cell_clicked: Fired when a cell is clicked.
+            on_cell_context_menu: Fired when a cell is right-clicked.
+            on_cell_edited: Fired when a cell is edited.
+            on_group_header_clicked: Fired when a group header is clicked.
+            on_group_header_context_menu: Fired when a group header is right-clicked.
+            on_group_header_renamed: Fired when a group header is renamed.
+            on_header_clicked: Fired when a header is clicked.
+            on_header_context_menu: Fired when a header is right-clicked.
+            on_header_menu_click: Fired when a header menu item is clicked.
+            on_item_hovered: Fired when an item is hovered.
+            on_delete: Fired when a selection is deleted.
+            on_finished_editing: Fired when editing is finished.
+            on_row_appended: Fired when a row is appended.
+            on_selection_cleared: Fired when the selection is cleared.
+            on_column_resize: Fired when a column is resized.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/datadisplay/shiki_code_block.py

@@ -12,8 +12,9 @@ from reflex.components.core.colors import color
 from reflex.components.core.cond import color_mode_cond
 from reflex.components.el.elements.forms import Button
 from reflex.components.lucide.icon import Icon
+from reflex.components.props import NoExtrasAllowedProps
 from reflex.components.radix.themes.layout.box import Box
-from reflex.event import call_script, set_clipboard
+from reflex.event import run_script, set_clipboard
 from reflex.style import Style
 from reflex.utils.exceptions import VarTypeError
 from reflex.utils.imports import ImportVar
@@ -29,7 +30,7 @@ def copy_script() -> Any:
     Returns:
         Any: The result of calling the script.
     """
-    return call_script(
+    return run_script(
         f"""
 // Event listener for the parent click
 document.addEventListener('click', function(event) {{
@@ -67,7 +68,7 @@ document.addEventListener('click', function(event) {{
     }} else {{
         // console.error('Parent element not found.');
     }}
-}});
+}})
 """
     )
 
@@ -253,6 +254,7 @@ LiteralCodeLanguage = Literal[
     "pascal",
     "perl",
     "php",
+    "plain",
     "plsql",
     "po",
     "postcss",
@@ -369,10 +371,11 @@ LiteralCodeTheme = Literal[
     "nord",
     "one-dark-pro",
     "one-light",
-    "plain",
     "plastic",
     "poimandres",
     "red",
+    # rose-pine themes dont work with the current version of shikijs transformers
+    # https://github.com/shikijs/shiki/issues/730
     "rose-pine",
     "rose-pine-dawn",
     "rose-pine-moon",
@@ -390,6 +393,23 @@ LiteralCodeTheme = Literal[
 ]
 
 
+class Position(NoExtrasAllowedProps):
+    """Position of the decoration."""
+
+    line: int
+    character: int
+
+
+class ShikiDecorations(NoExtrasAllowedProps):
+    """Decorations for the code block."""
+
+    start: Union[int, Position]
+    end: Union[int, Position]
+    tag_name: str = "span"
+    properties: dict[str, Any] = {}
+    always_wrap: bool = False
+
+
 class ShikiBaseTransformers(Base):
     """Base for creating transformers."""
 
@@ -537,6 +557,9 @@ class ShikiCodeBlock(Component):
         []
     )
 
+    # The decorations to use for the syntax highlighter.
+    decorations: Var[list[ShikiDecorations]] = Var.create([])
+
     @classmethod
     def create(
         cls,
@@ -555,6 +578,7 @@ class ShikiCodeBlock(Component):
         # Separate props for the code block and the wrapper
         code_block_props = {}
         code_wrapper_props = {}
+        decorations = props.pop("decorations", [])
 
         class_props = cls.get_props()
 
@@ -564,6 +588,15 @@ class ShikiCodeBlock(Component):
                 value
             )
 
+        # cast decorations into ShikiDecorations.
+        decorations = [
+            ShikiDecorations(**decoration)
+            if not isinstance(decoration, ShikiDecorations)
+            else decoration
+            for decoration in decorations
+        ]
+        code_block_props["decorations"] = decorations
+
         code_block_props["code"] = children[0]
         code_block = super().create(**code_block_props)
 
@@ -676,10 +709,10 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
     show_line_numbers: Var[bool]
 
     # Whether a copy button should appear.
-    can_copy: Var[bool] = Var.create(False)
+    can_copy: bool = False
 
     # copy_button: A custom copy button to override the default one.
-    copy_button: Var[Optional[Union[Component, bool]]] = Var.create(None)
+    copy_button: Optional[Union[Component, bool]] = None
 
     @classmethod
     def create(

reflex/components/datadisplay/shiki_code_block.pyi

@@ -7,6 +7,7 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 
 from reflex.base import Base
 from reflex.components.component import Component, ComponentNamespace
+from reflex.components.props import NoExtrasAllowedProps
 from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
@@ -192,6 +193,7 @@ LiteralCodeLanguage = Literal[
     "pascal",
     "perl",
     "php",
+    "plain",
     "plsql",
     "po",
     "postcss",
@@ -308,7 +310,6 @@ LiteralCodeTheme = Literal[
     "nord",
     "one-dark-pro",
     "one-light",
-    "plain",
     "plastic",
     "poimandres",
     "red",
@@ -328,6 +329,17 @@ LiteralCodeTheme = Literal[
     "vitesse-light",
 ]
 
+class Position(NoExtrasAllowedProps):
+    line: int
+    character: int
+
+class ShikiDecorations(NoExtrasAllowedProps):
+    start: Union[int, Position]
+    end: Union[int, Position]
+    tag_name: str
+    properties: dict[str, Any]
+    always_wrap: bool
+
 class ShikiBaseTransformers(Base):
     library: str
     fns: list[FunctionStringVar]
@@ -479,6 +491,7 @@ class ShikiCodeBlock(Component):
                     "pascal",
                     "perl",
                     "php",
+                    "plain",
                     "plsql",
                     "po",
                     "postcss",
@@ -694,6 +707,7 @@ class ShikiCodeBlock(Component):
                         "pascal",
                         "perl",
                         "php",
+                        "plain",
                         "plsql",
                         "po",
                         "postcss",
@@ -815,7 +829,6 @@ class ShikiCodeBlock(Component):
                     "nord",
                     "one-dark-pro",
                     "one-light",
-                    "plain",
                     "plastic",
                     "poimandres",
                     "red",
@@ -870,7 +883,6 @@ class ShikiCodeBlock(Component):
                         "nord",
                         "one-dark-pro",
                         "one-light",
-                        "plain",
                         "plastic",
                         "poimandres",
                         "red",
@@ -906,6 +918,9 @@ class ShikiCodeBlock(Component):
                 list[Union[ShikiBaseTransformers, dict[str, Any]]],
             ]
         ] = None,
+        decorations: Optional[
+            Union[Var[list[ShikiDecorations]], list[ShikiDecorations]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -938,6 +953,7 @@ class ShikiCodeBlock(Component):
             themes: The set of themes to use for different modes.
             code: The code to display.
             transformers: The transformers to use for the syntax highlighter.
+            decorations: The decorations to use for the syntax highlighter.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -965,10 +981,8 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
         *children,
         use_transformers: Optional[Union[Var[bool], bool]] = None,
         show_line_numbers: Optional[Union[Var[bool], bool]] = None,
-        can_copy: Optional[Union[Var[bool], bool]] = None,
+        can_copy: Optional[bool] = None,
-        copy_button: Optional[
+        copy_button: Optional[Union[Component, bool]] = None,
-            Union[Component, Var[Optional[Union[Component, bool]]], bool]
-        ] = None,
         language: Optional[
             Union[
                 Literal[
@@ -1104,6 +1118,7 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
                     "pascal",
                     "perl",
                     "php",
+                    "plain",
                     "plsql",
                     "po",
                     "postcss",
@@ -1319,6 +1334,7 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
                         "pascal",
                         "perl",
                         "php",
+                        "plain",
                         "plsql",
                         "po",
                         "postcss",
@@ -1440,7 +1456,6 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
                     "nord",
                     "one-dark-pro",
                     "one-light",
-                    "plain",
                     "plastic",
                     "poimandres",
                     "red",
@@ -1495,7 +1510,6 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
                         "nord",
                         "one-dark-pro",
                         "one-light",
-                        "plain",
                         "plastic",
                         "poimandres",
                         "red",
@@ -1531,6 +1545,9 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
                 list[Union[ShikiBaseTransformers, dict[str, Any]]],
             ]
         ] = None,
+        decorations: Optional[
+            Union[Var[list[ShikiDecorations]], list[ShikiDecorations]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1567,6 +1584,7 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
             themes: The set of themes to use for different modes.
             code: The code to display.
             transformers: The transformers to use for the syntax highlighter.
+            decorations: The decorations to use for the syntax highlighter.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1593,10 +1611,8 @@ class CodeblockNamespace(ComponentNamespace):
         *children,
         use_transformers: Optional[Union[Var[bool], bool]] = None,
         show_line_numbers: Optional[Union[Var[bool], bool]] = None,
-        can_copy: Optional[Union[Var[bool], bool]] = None,
+        can_copy: Optional[bool] = None,
-        copy_button: Optional[
+        copy_button: Optional[Union[Component, bool]] = None,
-            Union[Component, Var[Optional[Union[Component, bool]]], bool]
-        ] = None,
         language: Optional[
             Union[
                 Literal[
@@ -1732,6 +1748,7 @@ class CodeblockNamespace(ComponentNamespace):
                     "pascal",
                     "perl",
                     "php",
+                    "plain",
                     "plsql",
                     "po",
                     "postcss",
@@ -1947,6 +1964,7 @@ class CodeblockNamespace(ComponentNamespace):
                         "pascal",
                         "perl",
                         "php",
+                        "plain",
                         "plsql",
                         "po",
                         "postcss",
@@ -2068,7 +2086,6 @@ class CodeblockNamespace(ComponentNamespace):
                     "nord",
                     "one-dark-pro",
                     "one-light",
-                    "plain",
                     "plastic",
                     "poimandres",
                     "red",
@@ -2123,7 +2140,6 @@ class CodeblockNamespace(ComponentNamespace):
                         "nord",
                         "one-dark-pro",
                         "one-light",
-                        "plain",
                         "plastic",
                         "poimandres",
                         "red",
@@ -2159,6 +2175,9 @@ class CodeblockNamespace(ComponentNamespace):
                 list[Union[ShikiBaseTransformers, dict[str, Any]]],
             ]
         ] = None,
+        decorations: Optional[
+            Union[Var[list[ShikiDecorations]], list[ShikiDecorations]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -2195,6 +2214,7 @@ class CodeblockNamespace(ComponentNamespace):
             themes: The set of themes to use for different modes.
             code: The code to display.
             transformers: The transformers to use for the syntax highlighter.
+            decorations: The decorations to use for the syntax highlighter.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/dynamic.py

@@ -63,6 +63,9 @@ def load_dynamic_serializer():
         """
         # Causes a circular import, so we import here.
         from reflex.compiler import templates, utils
+        from reflex.components.base.bare import Bare
+
+        component = Bare.create(Var.create(component))
 
         rendered_components = {}
         # Include dynamic imports in the shared component.
@@ -127,14 +130,15 @@ def load_dynamic_serializer():
                 module_code_lines[ix] = line.replace(
                     "export function", "export default function", 1
                 )
+            line_stripped = line.strip()
+            if line_stripped.startswith("{") and line_stripped.endswith("}"):
+                module_code_lines[ix] = line_stripped[1:-1]
 
         module_code_lines.insert(0, "const React = window.__reflex.react;")
 
         return "\n".join(
             [
                 "//__reflex_evaluate",
-                "/** @jsx jsx */",
-                "const { jsx } = window.__reflex['@emotion/react']",
                 *module_code_lines,
             ]
         )

reflex/components/el/elements/forms.py

@@ -111,6 +111,15 @@ def on_submit_event_spec() -> Tuple[Var[Dict[str, Any]]]:
     return (FORM_DATA,)
 
 
+def on_submit_string_event_spec() -> Tuple[Var[Dict[str, str]]]:
+    """Event handler spec for the on_submit event.
+
+    Returns:
+        The event handler spec.
+    """
+    return (FORM_DATA,)
+
+
 class Form(BaseHTML):
     """Display the form element."""
 
@@ -150,7 +159,7 @@ class Form(BaseHTML):
     handle_submit_unique_name: Var[str]
 
     # Fired when the form is submitted
-    on_submit: EventHandler[on_submit_event_spec]
+    on_submit: EventHandler[on_submit_event_spec, on_submit_string_event_spec]
 
     @classmethod
     def create(cls, *children, **props):

reflex/components/el/elements/forms.pyi

@@ -271,6 +271,7 @@ class Fieldset(Element):
         ...
 
 def on_submit_event_spec() -> Tuple[Var[Dict[str, Any]]]: ...
+def on_submit_string_event_spec() -> Tuple[Var[Dict[str, str]]]: ...
 
 class Form(BaseHTML):
     @overload
@@ -337,7 +338,9 @@ class Form(BaseHTML):
         on_mouse_over: Optional[EventType[[]]] = None,
         on_mouse_up: Optional[EventType[[]]] = None,
         on_scroll: Optional[EventType[[]]] = None,
-        on_submit: Optional[EventType[Dict[str, Any]]] = None,
+        on_submit: Optional[
+            Union[EventType[Dict[str, Any]], EventType[Dict[str, str]]]
+        ] = None,
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "Form":
@@ -356,6 +359,7 @@ class Form(BaseHTML):
             target: Where to display the response after submitting the form
             reset_on_submit: If true, the form will be cleared after submit.
             handle_submit_unique_name: The name used to make this form's submit handler function unique.
+            on_submit: Fired when the form is submitted
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -520,6 +524,11 @@ class Input(BaseHTML):
             type: Specifies the type of input
             use_map: Name of the image map used with the input
             value: Value of the input
+            on_change: Fired when the input value changes
+            on_focus: Fired when the input gains focus
+            on_blur: Fired when the input loses focus
+            on_key_down: Fired when a key is pressed down
+            on_key_up: Fired when a key is released
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1269,6 +1278,7 @@ class Select(BaseHTML):
             name: Name of the select, used when submitting the form
             required: Indicates that the select control must have a selected option
             size: Number of visible options in a drop-down list
+            on_change: Fired when the select value changes
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -1397,6 +1407,11 @@ class Textarea(BaseHTML):
             rows: Visible number of lines in the text control
             value: The controlled value of the textarea, read only unless used with on_change
             wrap: How the text in the textarea is to be wrapped when submitting the form
+            on_change: Fired when the input value changes
+            on_focus: Fired when the input gains focus
+            on_blur: Fired when the input loses focus
+            on_key_down: Fired when a key is pressed down
+            on_key_up: Fired when a key is released
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.

reflex/components/moment/moment.py

@@ -4,7 +4,7 @@ import dataclasses
 from typing import List, Optional
 
 from reflex.components.component import NoSSRComponent
-from reflex.event import EventHandler, identity_event
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.utils.imports import ImportDict
 from reflex.vars.base import LiteralVar, Var
 
@@ -96,7 +96,7 @@ class Moment(NoSSRComponent):
     locale: Var[str]
 
     # Fires when the date changes.
-    on_change: EventHandler[identity_event(str)]
+    on_change: EventHandler[passthrough_event_spec(str)]
 
     def add_imports(self) -> ImportDict:
         """Add the imports for the Moment component.

reflex/components/moment/moment.pyi

@@ -101,6 +101,7 @@ class Moment(NoSSRComponent):
             local: Outputs the result in local time.
             tz: Display the date in the given timezone.
             locale: The locale to use when rendering.
+            on_change: Fires when the date changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/next/image.py

@@ -2,7 +2,7 @@
 
 from typing import Any, Literal, Optional, Union
 
-from reflex.event import EventHandler, empty_event
+from reflex.event import EventHandler, no_args_event_spec
 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[empty_event]
+    on_load: EventHandler[no_args_event_spec]
 
     # Fires when the image has an error.
-    on_error: EventHandler[empty_event]
+    on_error: EventHandler[no_args_event_spec]
 
     @classmethod
     def create(

reflex/components/next/image.pyi

@@ -72,6 +72,8 @@ class Image(NextComponent):
             placeholder: A placeholder to use while the image is loading. Possible values are blur, empty, or data:image/.... Defaults to empty.
             loading: Allows passing CSS styles to the underlying image element.  style: Var[Any]  The loading behavior of the image. Defaults to lazy. Can hurt performance, recommended to use `priority` instead.
             blurDataURL: A Data URL to be used as a placeholder image before the src image successfully loads. Only takes effect when combined with placeholder="blur".
+            on_load: Fires when the image has loaded.
+            on_error: Fires when the image has an error.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/plotly/plotly.pyi

@@ -89,6 +89,26 @@ class Plotly(NoSSRComponent):
             template: The template for visual appearance of the graph.
             config: The config of the graph.
             use_resize_handler: If true, the graph will resize when the window is resized.
+            on_after_plot: Fired after the plot is redrawn.
+            on_animated: Fired after the plot was animated.
+            on_animating_frame: Fired while animating a single frame (does not currently pass data through).
+            on_animation_interrupted: Fired when an animation is interrupted (to start a new animation for example).
+            on_autosize: Fired when the plot is responsively sized.
+            on_before_hover: Fired whenever mouse moves over a plot.
+            on_button_clicked: Fired when a plotly UI button is clicked.
+            on_click: Fired when the plot is clicked.
+            on_deselect: Fired when a selection is cleared (via double click).
+            on_double_click: Fired when the plot is double clicked.
+            on_hover: Fired when a plot element is hovered over.
+            on_relayout: Fired after the plot is layed out (zoom, pan, etc).
+            on_relayouting: Fired while the plot is being layed out.
+            on_restyle: Fired after the plot style is changed.
+            on_redraw: Fired after the plot is redrawn.
+            on_selected: Fired after selecting plot elements.
+            on_selecting: Fired while dragging a selection.
+            on_transitioning: Fired while an animation is occuring.
+            on_transition_interrupted: Fired when a transition is stopped early.
+            on_unhover: Fired when a hovered element is no longer hovered.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/props.py

@@ -2,8 +2,11 @@
 
 from __future__ import annotations
 
+from pydantic import ValidationError
+
 from reflex.base import Base
 from reflex.utils import format
+from reflex.utils.exceptions import InvalidPropValueError
 from reflex.vars.object import LiteralObjectVar
 
 
@@ -40,3 +43,34 @@ class PropsBase(Base):
             format.to_camel_case(key): value
             for key, value in super().dict(*args, **kwargs).items()
         }
+
+
+class NoExtrasAllowedProps(Base):
+    """A class that holds props to be passed or applied to a component with no extra props allowed."""
+
+    def __init__(self, component_name=None, **kwargs):
+        """Initialize the props.
+
+        Args:
+            component_name: The custom name of the component.
+            kwargs: Kwargs to initialize the props.
+
+        Raises:
+            InvalidPropValueError: If invalid props are passed on instantiation.
+        """
+        component_name = component_name or type(self).__name__
+        try:
+            super().__init__(**kwargs)
+        except ValidationError as e:
+            invalid_fields = ", ".join([error["loc"][0] for error in e.errors()])  # type: ignore
+            supported_props_str = ", ".join(f'"{field}"' for field in self.get_fields())
+            raise InvalidPropValueError(
+                f"Invalid prop(s) {invalid_fields} for {component_name!r}. Supported props are {supported_props_str}"
+            ) from None
+
+    class Config:
+        """Pydantic config."""
+
+        arbitrary_types_allowed = True
+        use_enum_values = True
+        extra = "forbid"

reflex/components/radix/primitives/accordion.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, List, Literal, Optional, Tuple, Union
+from typing import Any, List, Literal, Tuple, Union
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
@@ -193,6 +193,11 @@ class AccordionItem(AccordionComponent):
     # When true, prevents the user from interacting with the item.
     disabled: Var[bool]
 
+    # The header of the accordion item.
+    header: Var[Union[Component, str]]
+    # The content of the accordion item.
+    content: Var[Union[Component, str]] = Var.create(None)
+
     _valid_children: List[str] = [
         "AccordionHeader",
         "AccordionTrigger",
@@ -205,21 +210,20 @@ class AccordionItem(AccordionComponent):
     def create(
         cls,
         *children,
-        header: Optional[Component | Var] = None,
-        content: Optional[Component | Var] = None,
         **props,
     ) -> Component:
         """Create an accordion item.
 
         Args:
             *children: The list of children to use if header and content are not provided.
-            header: The header of the accordion item.
-            content: The content of the accordion item.
             **props: Additional properties to apply to the accordion item.
 
         Returns:
             The accordion item.
         """
+        header = props.pop("header", None)
+        content = props.pop("content", None)
+
         # The item requires a value to toggle (use a random unique name if not provided).
         value = props.pop("value", get_uuid_string_var())
 
@@ -291,6 +295,9 @@ class AccordionItem(AccordionComponent):
             },
         }
 
+    def _exclude_props(self) -> list[str]:
+        return ["header", "content"]
+
 
 class AccordionHeader(AccordionComponent):
     """An accordion component."""

reflex/components/radix/primitives/accordion.pyi

@@ -280,6 +280,7 @@ class AccordionRoot(AccordionComponent):
             duration: The time in milliseconds to animate open and close
             easing: The easing function to use for the animation.
             show_dividers: Whether to show divider lines between items.
+            on_value_change: Fired when the opened the accordions changes.
             color_scheme: The color scheme of the component.
             variant: The variant of the component.
             as_child: Change the default rendered element for the one passed as a child.
@@ -302,10 +303,10 @@ class AccordionItem(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        header: Optional[Union[Component, Var]] = None,
-        content: Optional[Union[Component, Var]] = None,
         value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
+        header: Optional[Union[Component, Var[Union[Component, str]], str]] = None,
+        content: Optional[Union[Component, Var[Union[Component, str]], str]] = None,
         color_scheme: Optional[
             Union[
                 Literal[
@@ -402,10 +403,10 @@ class AccordionItem(AccordionComponent):
 
         Args:
             *children: The list of children to use if header and content are not provided.
-            header: The header of the accordion item.
-            content: The content of the accordion item.
             value: A unique identifier for the item.
             disabled: When true, prevents the user from interacting with the item.
+            header: The header of the accordion item.
+            content: The content of the accordion item.
             color_scheme: The color scheme of the component.
             variant: The variant of the component.
             as_child: Change the default rendered element for the one passed as a child.

reflex/components/radix/primitives/drawer.py

@@ -10,7 +10,7 @@ from reflex.components.component import Component, ComponentNamespace
 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, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.utils import console
 from reflex.vars.base import Var
 
@@ -33,14 +33,29 @@ class DrawerRoot(DrawerComponent):
 
     alias = "Vaul" + tag
 
+    # The open state of the drawer when it is initially rendered. Use when you do not need to control its open state.
+    default_open: Var[bool]
+
     # Whether the drawer is open or not.
     open: Var[bool]
 
-    # Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+    # Fires when the drawer is opened or closed.
-    should_scale_background: Var[bool]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
 
-    # Number between 0 and 1 that determines when the drawer should be closed.
+    # When `False`, it allows interaction with elements outside of the drawer without closing it. Defaults to `True`.
-    close_threshold: Var[float]
+    modal: Var[bool]
+
+    # Direction of the drawer. This adjusts the animations and the drag direction. Defaults to `"bottom"`
+    direction: Var[LiteralDirectionType]
+
+    # Gets triggered after the open or close animation ends, it receives an open argument with the open state of the drawer by the time the function was triggered.
+    on_animation_end: EventHandler[passthrough_event_spec(bool)]
+
+    # When `False`, dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in combination with the open prop, otherwise you won't be able to open/close the drawer.
+    dismissible: Var[bool]
+
+    # When `True`, dragging will only be possible by the handle.
+    handle_only: Var[bool]
 
     # Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
     snap_points: Optional[List[Union[str, float]]]
@@ -51,17 +66,14 @@ class DrawerRoot(DrawerComponent):
     # Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
     scroll_lock_timeout: Var[int]
 
-    # When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
-    modal: Var[bool]
-
-    # Direction of the drawer. Defaults to `"bottom"`
-    direction: Var[LiteralDirectionType]
-
     # When `True`, it prevents scroll restoration. Defaults to `True`.
     preventScrollRestoration: Var[bool]
 
-    # Fires when the drawer is opened.
+    # Enable background scaling, it requires container element with `vaul-drawer-wrapper` attribute to scale its background.
-    on_open_change: EventHandler[identity_event(bool)]
+    should_scale_background: Var[bool]
+
+    # Number between 0 and 1 that determines when the drawer should be closed.
+    close_threshold: Var[float]
 
 
 class DrawerTrigger(DrawerComponent):
@@ -79,8 +91,8 @@ class DrawerTrigger(DrawerComponent):
         """Create a new DrawerTrigger instance.
 
         Args:
-            children: The children of the element.
+            *children: The children of the element.
-            props: The properties of the element.
+            **props: The properties of the element.
 
         Returns:
             The new DrawerTrigger instance.
@@ -129,19 +141,19 @@ class DrawerContent(DrawerComponent):
         return {"css": base_style}
 
     # Fired when the drawer content is opened. Deprecated.
-    on_open_auto_focus: EventHandler[empty_event]
+    on_open_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the drawer content is closed. Deprecated.
-    on_close_auto_focus: EventHandler[empty_event]
+    on_close_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the escape key is pressed. Deprecated.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
     # Fired when the pointer is down outside the drawer content. Deprecated.
-    on_pointer_down_outside: EventHandler[empty_event]
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
 
     # Fired when interacting outside the drawer content. Deprecated.
-    on_interact_outside: EventHandler[empty_event]
+    on_interact_outside: EventHandler[no_args_event_spec]
 
     @classmethod
     def create(cls, *children, **props):
@@ -263,6 +275,14 @@ class DrawerDescription(DrawerComponent):
         return {"css": base_style}
 
 
+class DrawerHandle(DrawerComponent):
+    """A description for the drawer."""
+
+    tag = "Drawer.Handle"
+
+    alias = "Vaul" + tag
+
+
 class Drawer(ComponentNamespace):
     """A namespace for Drawer components."""
 
@@ -274,6 +294,7 @@ class Drawer(ComponentNamespace):
     close = staticmethod(DrawerClose.create)
     title = staticmethod(DrawerTitle.create)
     description = staticmethod(DrawerDescription.create)
+    handle = staticmethod(DrawerHandle.create)
 
 
 drawer = Drawer()

reflex/components/radix/primitives/drawer.pyi

@@ -67,12 +67,8 @@ class DrawerRoot(DrawerComponent):
     def create(  # type: ignore
         cls,
         *children,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         open: Optional[Union[Var[bool], bool]] = None,
-        should_scale_background: Optional[Union[Var[bool], bool]] = None,
-        close_threshold: Optional[Union[Var[float], float]] = None,
-        snap_points: Optional[List[Union[float, str]]] = None,
-        fade_from_index: Optional[Union[Var[int], int]] = None,
-        scroll_lock_timeout: Optional[Union[Var[int], int]] = None,
         modal: Optional[Union[Var[bool], bool]] = None,
         direction: Optional[
             Union[
@@ -80,7 +76,14 @@ class DrawerRoot(DrawerComponent):
                 Var[Literal["bottom", "left", "right", "top"]],
             ]
         ] = None,
+        dismissible: Optional[Union[Var[bool], bool]] = None,
+        handle_only: Optional[Union[Var[bool], bool]] = None,
+        snap_points: Optional[List[Union[float, str]]] = None,
+        fade_from_index: Optional[Union[Var[int], int]] = None,
+        scroll_lock_timeout: Optional[Union[Var[int], int]] = None,
         preventScrollRestoration: Optional[Union[Var[bool], bool]] = None,
+        should_scale_background: Optional[Union[Var[bool], bool]] = None,
+        close_threshold: Optional[Union[Var[float], float]] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -88,6 +91,7 @@ class DrawerRoot(DrawerComponent):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_animation_end: Optional[EventType[bool]] = None,
         on_blur: Optional[EventType[[]]] = None,
         on_click: Optional[EventType[[]]] = None,
         on_context_menu: Optional[EventType[[]]] = None,
@@ -110,15 +114,20 @@ class DrawerRoot(DrawerComponent):
 
         Args:
             *children: The children of the component.
+            default_open: The open state of the drawer when it is initially rendered. Use when you do not need to control its open state.
             open: Whether the drawer is open or not.
-            should_scale_background: Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+            on_open_change: Fires when the drawer is opened or closed.
-            close_threshold: Number between 0 and 1 that determines when the drawer should be closed.
+            modal: When `False`, it allows interaction with elements outside of the drawer without closing it. Defaults to `True`.
+            direction: Direction of the drawer. This adjusts the animations and the drag direction. Defaults to `"bottom"`
+            on_animation_end: Gets triggered after the open or close animation ends, it receives an open argument with the open state of the drawer by the time the function was triggered.
+            dismissible: When `False`, dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in combination with the open prop, otherwise you won't be able to open/close the drawer.
+            handle_only: When `True`, dragging will only be possible by the handle.
             snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
             fade_from_index: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
             scroll_lock_timeout: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
-            modal: When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
-            direction: Direction of the drawer. Defaults to `"bottom"`
             preventScrollRestoration: When `True`, it prevents scroll restoration. Defaults to `True`.
+            should_scale_background: Enable background scaling, it requires container element with `vaul-drawer-wrapper` attribute to scale its background.
+            close_threshold: Number between 0 and 1 that determines when the drawer should be closed.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.
@@ -166,8 +175,15 @@ class DrawerTrigger(DrawerComponent):
         """Create a new DrawerTrigger instance.
 
         Args:
-            children: The children of the element.
+            *children: The children of the element.
-            props: The properties of the element.
+            as_child: Change the default rendered element for the one passed as a child.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the element.
 
         Returns:
             The new DrawerTrigger instance.
@@ -360,8 +376,15 @@ class DrawerClose(DrawerTrigger):
         """Create a new DrawerTrigger instance.
 
         Args:
-            children: The children of the element.
+            *children: The children of the element.
-            props: The properties of the element.
+            as_child: Change the default rendered element for the one passed as a child.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the element.
 
         Returns:
             The new DrawerTrigger instance.
@@ -464,6 +487,54 @@ class DrawerDescription(DrawerComponent):
         """
         ...
 
+class DrawerHandle(DrawerComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[EventType[[]]] = None,
+        on_click: Optional[EventType[[]]] = None,
+        on_context_menu: Optional[EventType[[]]] = None,
+        on_double_click: Optional[EventType[[]]] = None,
+        on_focus: Optional[EventType[[]]] = None,
+        on_mount: Optional[EventType[[]]] = None,
+        on_mouse_down: Optional[EventType[[]]] = None,
+        on_mouse_enter: Optional[EventType[[]]] = None,
+        on_mouse_leave: Optional[EventType[[]]] = None,
+        on_mouse_move: Optional[EventType[[]]] = None,
+        on_mouse_out: Optional[EventType[[]]] = None,
+        on_mouse_over: Optional[EventType[[]]] = None,
+        on_mouse_up: Optional[EventType[[]]] = None,
+        on_scroll: Optional[EventType[[]]] = None,
+        on_unmount: Optional[EventType[[]]] = None,
+        **props,
+    ) -> "DrawerHandle":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            as_child: Change the default rendered element for the one passed as a child.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
 class Drawer(ComponentNamespace):
     root = staticmethod(DrawerRoot.create)
     trigger = staticmethod(DrawerTrigger.create)
@@ -473,16 +544,13 @@ class Drawer(ComponentNamespace):
     close = staticmethod(DrawerClose.create)
     title = staticmethod(DrawerTitle.create)
     description = staticmethod(DrawerDescription.create)
+    handle = staticmethod(DrawerHandle.create)
 
     @staticmethod
     def __call__(
         *children,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         open: Optional[Union[Var[bool], bool]] = None,
-        should_scale_background: Optional[Union[Var[bool], bool]] = None,
-        close_threshold: Optional[Union[Var[float], float]] = None,
-        snap_points: Optional[List[Union[float, str]]] = None,
-        fade_from_index: Optional[Union[Var[int], int]] = None,
-        scroll_lock_timeout: Optional[Union[Var[int], int]] = None,
         modal: Optional[Union[Var[bool], bool]] = None,
         direction: Optional[
             Union[
@@ -490,7 +558,14 @@ class Drawer(ComponentNamespace):
                 Var[Literal["bottom", "left", "right", "top"]],
             ]
         ] = None,
+        dismissible: Optional[Union[Var[bool], bool]] = None,
+        handle_only: Optional[Union[Var[bool], bool]] = None,
+        snap_points: Optional[List[Union[float, str]]] = None,
+        fade_from_index: Optional[Union[Var[int], int]] = None,
+        scroll_lock_timeout: Optional[Union[Var[int], int]] = None,
         preventScrollRestoration: Optional[Union[Var[bool], bool]] = None,
+        should_scale_background: Optional[Union[Var[bool], bool]] = None,
+        close_threshold: Optional[Union[Var[float], float]] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -498,6 +573,7 @@ class Drawer(ComponentNamespace):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_animation_end: Optional[EventType[bool]] = None,
         on_blur: Optional[EventType[[]]] = None,
         on_click: Optional[EventType[[]]] = None,
         on_context_menu: Optional[EventType[[]]] = None,
@@ -520,15 +596,20 @@ class Drawer(ComponentNamespace):
 
         Args:
             *children: The children of the component.
+            default_open: The open state of the drawer when it is initially rendered. Use when you do not need to control its open state.
             open: Whether the drawer is open or not.
-            should_scale_background: Enable background scaling, it requires an element with [vaul-drawer-wrapper] data attribute to scale its background.
+            on_open_change: Fires when the drawer is opened or closed.
-            close_threshold: Number between 0 and 1 that determines when the drawer should be closed.
+            modal: When `False`, it allows interaction with elements outside of the drawer without closing it. Defaults to `True`.
+            direction: Direction of the drawer. This adjusts the animations and the drag direction. Defaults to `"bottom"`
+            on_animation_end: Gets triggered after the open or close animation ends, it receives an open argument with the open state of the drawer by the time the function was triggered.
+            dismissible: When `False`, dragging, clicking outside, pressing esc, etc. will not close the drawer. Use this in combination with the open prop, otherwise you won't be able to open/close the drawer.
+            handle_only: When `True`, dragging will only be possible by the handle.
             snap_points: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Also Accept px values, which doesn't take screen height into account.
             fade_from_index: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
             scroll_lock_timeout: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
-            modal: When `False`, it allows to interact with elements outside of the drawer without closing it. Defaults to `True`.
-            direction: Direction of the drawer. Defaults to `"bottom"`
             preventScrollRestoration: When `True`, it prevents scroll restoration. Defaults to `True`.
+            should_scale_background: Enable background scaling, it requires container element with `vaul-drawer-wrapper` attribute to scale its background.
+            close_threshold: Number between 0 and 1 that determines when the drawer should be closed.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.

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, empty_event
+from reflex.event import EventHandler, no_args_event_spec
 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[empty_event]
+    on_clear_server_errors: EventHandler[no_args_event_spec]
 
     def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.

reflex/components/radix/primitives/form.pyi

@@ -129,7 +129,9 @@ class FormRoot(FormComponent, HTMLForm):
         on_mouse_over: Optional[EventType[[]]] = None,
         on_mouse_up: Optional[EventType[[]]] = None,
         on_scroll: Optional[EventType[[]]] = None,
-        on_submit: Optional[EventType[Dict[str, Any]]] = None,
+        on_submit: Optional[
+            Union[EventType[Dict[str, Any]], EventType[Dict[str, str]]]
+        ] = None,
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "FormRoot":
@@ -137,6 +139,7 @@ class FormRoot(FormComponent, HTMLForm):
 
         Args:
             *children: The children of the form.
+            on_clear_server_errors: Fired when the errors are cleared.
             as_child: Change the default rendered element for the one passed as a child.
             accept: MIME types the server accepts for file upload
             accept_charset: Character encodings to be used for form submission
@@ -149,6 +152,7 @@ class FormRoot(FormComponent, HTMLForm):
             target: Where to display the response after submitting the form
             reset_on_submit: If true, the form will be cleared after submit.
             handle_submit_unique_name: The name used to make this form's submit handler function unique.
+            on_submit: Fired when the form is submitted
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -594,7 +598,9 @@ class Form(FormRoot):
         on_mouse_over: Optional[EventType[[]]] = None,
         on_mouse_up: Optional[EventType[[]]] = None,
         on_scroll: Optional[EventType[[]]] = None,
-        on_submit: Optional[EventType[Dict[str, Any]]] = None,
+        on_submit: Optional[
+            Union[EventType[Dict[str, Any]], EventType[Dict[str, str]]]
+        ] = None,
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "Form":
@@ -602,6 +608,7 @@ class Form(FormRoot):
 
         Args:
             *children: The children of the form.
+            on_clear_server_errors: Fired when the errors are cleared.
             as_child: Change the default rendered element for the one passed as a child.
             accept: MIME types the server accepts for file upload
             accept_charset: Character encodings to be used for form submission
@@ -614,6 +621,7 @@ class Form(FormRoot):
             target: Where to display the response after submitting the form
             reset_on_submit: If true, the form will be cleared after submit.
             handle_submit_unique_name: The name used to make this form's submit handler function unique.
+            on_submit: Fired when the form is submitted
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -716,7 +724,9 @@ class FormNamespace(ComponentNamespace):
         on_mouse_over: Optional[EventType[[]]] = None,
         on_mouse_up: Optional[EventType[[]]] = None,
         on_scroll: Optional[EventType[[]]] = None,
-        on_submit: Optional[EventType[Dict[str, Any]]] = None,
+        on_submit: Optional[
+            Union[EventType[Dict[str, Any]], EventType[Dict[str, str]]]
+        ] = None,
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "Form":
@@ -724,6 +734,7 @@ class FormNamespace(ComponentNamespace):
 
         Args:
             *children: The children of the form.
+            on_clear_server_errors: Fired when the errors are cleared.
             as_child: Change the default rendered element for the one passed as a child.
             accept: MIME types the server accepts for file upload
             accept_charset: Character encodings to be used for form submission
@@ -736,6 +747,7 @@ class FormNamespace(ComponentNamespace):
             target: Where to display the response after submitting the form
             reset_on_submit: If true, the form will be cleared after submit.
             handle_submit_unique_name: The name used to make this form's submit handler function unique.
+            on_submit: Fired when the form is submitted
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.

reflex/components/radix/primitives/slider.pyi

@@ -117,6 +117,8 @@ class SliderRoot(SliderComponent):
 
         Args:
             *children: The children of the component.
+            on_value_change: Fired when the value of a thumb changes.
+            on_value_commit: Fired when a thumb is released.
             as_child: Change the default rendered element for the one passed as a child.
             style: The style of the component.
             key: A unique key for the component.

reflex/components/radix/themes/color_mode.py

@@ -17,7 +17,7 @@ rx.text(
 
 from __future__ import annotations
 
-from typing import Dict, List, Literal, get_args
+from typing import Dict, List, Literal, Optional, Union, get_args
 
 from reflex.components.component import BaseComponent
 from reflex.components.core.cond import Cond, color_mode_cond, cond
@@ -96,26 +96,31 @@ def _set_static_default(props, position, prop, default):
 class ColorModeIconButton(IconButton):
     """Icon Button for toggling light / dark mode via toggle_color_mode."""
 
+    # The position of the icon button. Follow document flow if None.
+    position: Optional[Union[LiteralPosition, Var[LiteralPosition]]] = None
+
+    # Allow picking the "system" value for the color mode.
+    allow_system: bool = False
+
     @classmethod
     def create(
         cls,
-        position: LiteralPosition | None = None,
-        allow_system: bool = False,
         **props,
     ):
-        """Create a icon button component that calls toggle_color_mode on click.
+        """Create an icon button component that calls toggle_color_mode on click.
 
         Args:
-            position: The position of the icon button. Follow document flow if None.
-            allow_system: Allow picking the "system" value for the color mode.
             **props: The props to pass to the component.
 
         Returns:
             The button component.
         """
+        position = props.pop("position", None)
+        allow_system = props.pop("allow_system", False)
+
         # position is used to set nice defaults for positioning the icon button
         if isinstance(position, Var):
-            _set_var_default(props, position, "position", "fixed", position)
+            _set_var_default(props, position, "position", "fixed", position)  # type: ignore
             _set_var_default(props, position, "bottom", "2rem")
             _set_var_default(props, position, "top", "2rem")
             _set_var_default(props, position, "left", "2rem")
@@ -155,12 +160,15 @@ class ColorModeIconButton(IconButton):
                     color_mode_item("system"),
                 ),
             )
-        return super().create(
+        return IconButton.create(
             ColorModeIcon.create(),
             on_click=toggle_color_mode,
             **props,
         )
 
+    def _exclude_props(self) -> list[str]:
+        return ["position", "allow_system"]
+
 
 class ColorModeSwitch(Switch):
     """Switch for toggling light / dark mode via toggle_color_mode."""

reflex/components/radix/themes/color_mode.pyi

@@ -75,6 +75,18 @@ class ColorModeIconButton(IconButton):
     def create(  # type: ignore
         cls,
         *children,
+        position: Optional[
+            Union[
+                Literal["bottom-left", "bottom-right", "top-left", "top-right"],
+                Union[
+                    Literal["bottom-left", "bottom-right", "top-left", "top-right"],
+                    Var[
+                        Literal["bottom-left", "bottom-right", "top-left", "top-right"]
+                    ],
+                ],
+            ]
+        ] = None,
+        allow_system: Optional[bool] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         size: Optional[
             Union[
@@ -226,7 +238,7 @@ class ColorModeIconButton(IconButton):
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "ColorModeIconButton":
-        """Create a icon button component that calls toggle_color_mode on click.
+        """Create an icon button component that calls toggle_color_mode on click.
 
         Args:
             position: The position of the icon button. Follow document flow if None.
@@ -416,6 +428,7 @@ class ColorModeSwitch(Switch):
             color_scheme: Override theme color for switch
             high_contrast: Whether to render the switch with higher contrast color against background
             radius: Override theme radius for switch: "none" | "small" | "full"
+            on_change: Props to rename  Fired when the value of the switch changes
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/alert_dialog.py

@@ -5,7 +5,7 @@ from typing import Literal
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.el import elements
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import RadixThemesComponent, RadixThemesTriggerComponent
@@ -22,7 +22,10 @@ class AlertDialogRoot(RadixThemesComponent):
     open: Var[bool]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[identity_event(bool)]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
+    # The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
+    default_open: Var[bool]
 
 
 class AlertDialogTrigger(RadixThemesTriggerComponent):
@@ -43,13 +46,13 @@ class AlertDialogContent(elements.Div, RadixThemesComponent):
     force_mount: Var[bool]
 
     # Fired when the dialog is opened.
-    on_open_auto_focus: EventHandler[empty_event]
+    on_open_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the dialog is closed.
-    on_close_auto_focus: EventHandler[empty_event]
+    on_close_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
 
 class AlertDialogTitle(RadixThemesComponent):

reflex/components/radix/themes/components/alert_dialog.pyi

@@ -23,6 +23,7 @@ class AlertDialogRoot(RadixThemesComponent):
         cls,
         *children,
         open: Optional[Union[Var[bool], bool]] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -55,6 +56,8 @@ class AlertDialogRoot(RadixThemesComponent):
         Args:
             *children: Child components.
             open: The controlled open state of the dialog.
+            on_open_change: Fired when the open state changes.
+            default_open: The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -186,6 +189,9 @@ class AlertDialogContent(elements.Div, RadixThemesComponent):
             *children: Child components.
             size: The size of the content.
             force_mount: Whether to force mount the content on open.
+            on_open_auto_focus: Fired when the dialog is opened.
+            on_close_auto_focus: Fired when the dialog is closed.
+            on_escape_key_down: Fired when the escape key is pressed.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.

reflex/components/radix/themes/components/checkbox.py

@@ -6,7 +6,7 @@ from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
-from reflex.event import EventHandler, identity_event
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.vars.base import LiteralVar, Var
 
 from ..base import (
@@ -61,7 +61,7 @@ class Checkbox(RadixThemesComponent):
     _rename_props = {"onChange": "onCheckedChange"}
 
     # Fired when the checkbox is checked or unchecked.
-    on_change: EventHandler[identity_event(bool)]
+    on_change: EventHandler[passthrough_event_spec(bool)]
 
 
 class HighLevelCheckbox(RadixThemesComponent):
@@ -112,7 +112,7 @@ class HighLevelCheckbox(RadixThemesComponent):
     _rename_props = {"onChange": "onCheckedChange"}
 
     # Fired when the checkbox is checked or unchecked.
-    on_change: EventHandler[identity_event(bool)]
+    on_change: EventHandler[passthrough_event_spec(bool)]
 
     @classmethod
     def create(cls, text: Var[str] = LiteralVar.create(""), **props) -> Component:

reflex/components/radix/themes/components/checkbox.pyi

@@ -151,6 +151,7 @@ class Checkbox(RadixThemesComponent):
             required: Whether the checkbox is required
             name: The name of the checkbox control when submitting the form.
             value: The value of the checkbox control when submitting the form.
+            on_change: Props to rename  Fired when the checkbox is checked or unchecked.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -297,6 +298,7 @@ class HighLevelCheckbox(RadixThemesComponent):
             required: Whether the checkbox is required
             name: The name of the checkbox control when submitting the form.
             value: The value of the checkbox control when submitting the form.
+            on_change: Props to rename  Fired when the checkbox is checked or unchecked.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -441,6 +443,7 @@ class CheckboxNamespace(ComponentNamespace):
             required: Whether the checkbox is required
             name: The name of the checkbox control when submitting the form.
             value: The value of the checkbox control when submitting the form.
+            on_change: Props to rename  Fired when the checkbox is checked or unchecked.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/context_menu.py

@@ -1,10 +1,10 @@
 """Interactive components provided by @radix-ui/themes."""
 
-from typing import List, Literal
+from typing import Dict, List, Literal, Union
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -12,6 +12,21 @@ from ..base import (
     RadixThemesComponent,
 )
 
+LiteralDirType = Literal["ltr", "rtl"]
+
+LiteralSizeType = Literal["1", "2"]
+
+LiteralVariantType = Literal["solid", "soft"]
+
+LiteralSideType = Literal["top", "right", "bottom", "left"]
+
+LiteralAlignType = Literal["start", "center", "end"]
+
+LiteralStickyType = Literal[
+    "partial",
+    "always",
+]
+
 
 class ContextMenuRoot(RadixThemesComponent):
     """Menu representing a set of actions, displayed at the origin of a pointer right-click or long-press."""
@@ -24,7 +39,10 @@ class ContextMenuRoot(RadixThemesComponent):
     _invalid_children: List[str] = ["ContextMenuItem"]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[identity_event(bool)]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
+    # The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
+    dir: Var[LiteralDirType]
 
 
 class ContextMenuTrigger(RadixThemesComponent):
@@ -45,38 +63,65 @@ class ContextMenuContent(RadixThemesComponent):
 
     tag = "ContextMenu.Content"
 
-    # Button size "1" - "4"
+    # Dropdown Menu Content size "1" - "2"
-    size: Var[Responsive[Literal["1", "2"]]]
+    size: Var[Responsive[LiteralSizeType]]
 
-    # Variant of button: "solid" | "soft" | "outline" | "ghost"
+    # Variant of Dropdown Menu Content: "solid" | "soft"
-    variant: Var[Literal["solid", "soft"]]
+    variant: Var[LiteralVariantType]
 
-    # Override theme color for button
+    # Override theme color for Dropdown Menu Content
     color_scheme: Var[LiteralAccentColor]
 
-    # Whether to render the button with higher contrast color against background
+    # Renders the Dropdown Menu Content in higher contrast
     high_contrast: Var[bool]
 
-    # The vertical distance in pixels from the anchor.
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
-    align_offset: Var[int]
+    as_child: Var[bool]
 
-    # When true, overrides the side and aligns preferences to prevent collisions with boundary edges.
+    # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+    loop: Var[bool]
+
+    # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+    force_mount: Var[bool]
+
+    # The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
+    side: Var[LiteralSideType]
+
+    # The distance in pixels from the trigger. Defaults to 0.
+    side_offset: Var[Union[float, int]]
+
+    # The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
+    align: Var[LiteralAlignType]
+
+    # An offset in pixels from the "start" or "end" alignment options.
+    align_offset: Var[Union[float, int]]
+
+    # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
     avoid_collisions: Var[bool]
 
-    # Fired when the context menu is closed.
+    # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-    on_close_auto_focus: EventHandler[empty_event]
+    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+
+    # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+    sticky: Var[LiteralStickyType]
+
+    # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+    hide_when_detached: Var[bool]
+
+    # Fired when focus moves back after closing.
+    on_close_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
     # Fired when a pointer down event happens outside the context menu.
-    on_pointer_down_outside: EventHandler[empty_event]
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
 
     # Fired when focus moves outside the context menu.
-    on_focus_outside: EventHandler[empty_event]
+    on_focus_outside: EventHandler[no_args_event_spec]
 
-    # Fired when interacting outside the context menu.
+    # Fired when the pointer interacts outside the context menu.
-    on_interact_outside: EventHandler[empty_event]
+    on_interact_outside: EventHandler[no_args_event_spec]
 
 
 class ContextMenuSub(RadixThemesComponent):
@@ -84,15 +129,30 @@ class ContextMenuSub(RadixThemesComponent):
 
     tag = "ContextMenu.Sub"
 
+    # The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
+    open: Var[bool]
+
+    # The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
+    default_open: Var[bool]
+
+    # Fired when the open state changes.
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
 
 class ContextMenuSubTrigger(RadixThemesComponent):
     """An item that opens a submenu."""
 
     tag = "ContextMenu.SubTrigger"
 
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
     # Whether the trigger is disabled
     disabled: Var[bool]
 
+    # Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
+    text_value: Var[str]
+
     _valid_parents: List[str] = ["ContextMenuContent", "ContextMenuSub"]
 
 
@@ -101,22 +161,46 @@ class ContextMenuSubContent(RadixThemesComponent):
 
     tag = "ContextMenu.SubContent"
 
-    # When true, keyboard navigation will loop from last item to first, and vice versa.
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    # When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
     loop: Var[bool]
 
+    # Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+    force_mount: Var[bool]
+
+    # The distance in pixels from the trigger. Defaults to 0.
+    side_offset: Var[Union[float, int]]
+
+    # An offset in pixels from the "start" or "end" alignment options.
+    align_offset: Var[Union[float, int]]
+
+    # When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+    avoid_collisions: Var[bool]
+
+    # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+
+    # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+    sticky: Var[LiteralStickyType]
+
+    # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+    hide_when_detached: Var[bool]
+
     _valid_parents: List[str] = ["ContextMenuSub"]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
     # Fired when a pointer down event happens outside the context menu.
-    on_pointer_down_outside: EventHandler[empty_event]
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
 
     # Fired when focus moves outside the context menu.
-    on_focus_outside: EventHandler[empty_event]
+    on_focus_outside: EventHandler[no_args_event_spec]
 
     # Fired when interacting outside the context menu.
-    on_interact_outside: EventHandler[empty_event]
+    on_interact_outside: EventHandler[no_args_event_spec]
 
 
 class ContextMenuItem(RadixThemesComponent):
@@ -130,8 +214,20 @@ class ContextMenuItem(RadixThemesComponent):
     # Shortcut to render a menu item as a link
     shortcut: Var[str]
 
+    # Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+    as_child: Var[bool]
+
+    # When true, prevents the user from interacting with the item.
+    disabled: Var[bool]
+
+    # Optional text used for typeahead purposes. By default the typeahead behavior will use the content of the item. Use this when the content is complex, or you have non-textual content inside.
+    text_value: Var[str]
+
     _valid_parents: List[str] = ["ContextMenuContent", "ContextMenuSubContent"]
 
+    # Fired when the item is selected.
+    on_select: EventHandler[no_args_event_spec]
+
 
 class ContextMenuSeparator(RadixThemesComponent):
     """Separates items in a context menu."""

reflex/components/radix/themes/components/context_menu.pyi

@@ -13,6 +13,13 @@ from reflex.vars.base import Var
 
 from ..base import RadixThemesComponent
 
+LiteralDirType = Literal["ltr", "rtl"]
+LiteralSizeType = Literal["1", "2"]
+LiteralVariantType = Literal["solid", "soft"]
+LiteralSideType = Literal["top", "right", "bottom", "left"]
+LiteralAlignType = Literal["start", "center", "end"]
+LiteralStickyType = Literal["partial", "always"]
+
 class ContextMenuRoot(RadixThemesComponent):
     @overload
     @classmethod
@@ -20,6 +27,7 @@ class ContextMenuRoot(RadixThemesComponent):
         cls,
         *children,
         modal: Optional[Union[Var[bool], bool]] = None,
+        dir: Optional[Union[Literal["ltr", "rtl"], Var[Literal["ltr", "rtl"]]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -52,6 +60,8 @@ class ContextMenuRoot(RadixThemesComponent):
         Args:
             *children: Child components.
             modal: The modality of the context menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
+            on_open_change: Fired when the open state changes.
+            dir: The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -195,8 +205,36 @@ class ContextMenuContent(RadixThemesComponent):
             ]
         ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
-        align_offset: Optional[Union[Var[int], int]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        loop: Optional[Union[Var[bool], bool]] = None,
+        force_mount: Optional[Union[Var[bool], bool]] = None,
+        side: Optional[
+            Union[
+                Literal["bottom", "left", "right", "top"],
+                Var[Literal["bottom", "left", "right", "top"]],
+            ]
+        ] = None,
+        side_offset: Optional[Union[Var[Union[float, int]], float, int]] = None,
+        align: Optional[
+            Union[
+                Literal["center", "end", "start"],
+                Var[Literal["center", "end", "start"]],
+            ]
+        ] = None,
+        align_offset: Optional[Union[Var[Union[float, int]], float, int]] = None,
         avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        collision_padding: Optional[
+            Union[
+                Dict[str, Union[float, int]],
+                Var[Union[Dict[str, Union[float, int]], float, int]],
+                float,
+                int,
+            ]
+        ] = None,
+        sticky: Optional[
+            Union[Literal["always", "partial"], Var[Literal["always", "partial"]]]
+        ] = None,
+        hide_when_detached: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -232,12 +270,26 @@ class ContextMenuContent(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            size: Button size "1" - "4"
+            size: Dropdown Menu Content size "1" - "2"
-            variant: Variant of button: "solid" | "soft" | "outline" | "ghost"
+            variant: Variant of Dropdown Menu Content: "solid" | "soft"
-            color_scheme: Override theme color for button
+            color_scheme: Override theme color for Dropdown Menu Content
-            high_contrast: Whether to render the button with higher contrast color against background
+            high_contrast: Renders the Dropdown Menu Content in higher contrast
-            align_offset: The vertical distance in pixels from the anchor.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
-            avoid_collisions: When true, overrides the side and aligns preferences to prevent collisions with boundary edges.
+            loop: When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+            force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+            side: The preferred side of the trigger to render against when open. Will be reversed when collisions occur and `avoid_collisions` is enabled.The position of the tooltip. Defaults to "top".
+            side_offset: The distance in pixels from the trigger. Defaults to 0.
+            align: The preferred alignment against the trigger. May change when collisions occur. Defaults to "center".
+            align_offset: An offset in pixels from the "start" or "end" alignment options.
+            avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+            collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+            sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+            hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+            on_close_auto_focus: Fired when focus moves back after closing.
+            on_escape_key_down: Fired when the escape key is pressed.
+            on_pointer_down_outside: Fired when a pointer down event happens outside the context menu.
+            on_focus_outside: Fired when focus moves outside the context menu.
+            on_interact_outside: Fired when the pointer interacts outside the context menu.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -257,6 +309,8 @@ class ContextMenuSub(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
+        open: Optional[Union[Var[bool], bool]] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -276,6 +330,7 @@ class ContextMenuSub(RadixThemesComponent):
         on_mouse_out: Optional[EventType[[]]] = None,
         on_mouse_over: Optional[EventType[[]]] = None,
         on_mouse_up: Optional[EventType[[]]] = None,
+        on_open_change: Optional[EventType[bool]] = None,
         on_scroll: Optional[EventType[[]]] = None,
         on_unmount: Optional[EventType[[]]] = None,
         **props,
@@ -287,6 +342,9 @@ class ContextMenuSub(RadixThemesComponent):
 
         Args:
             *children: Child components.
+            open: The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
+            default_open: The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
+            on_open_change: Fired when the open state changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -306,7 +364,9 @@ class ContextMenuSubTrigger(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
+        text_value: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -337,7 +397,9 @@ class ContextMenuSubTrigger(RadixThemesComponent):
 
         Args:
             *children: Child components.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
             disabled: Whether the trigger is disabled
+            text_value: Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -357,7 +419,24 @@ class ContextMenuSubContent(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
+        as_child: Optional[Union[Var[bool], bool]] = None,
         loop: Optional[Union[Var[bool], bool]] = None,
+        force_mount: Optional[Union[Var[bool], bool]] = None,
+        side_offset: Optional[Union[Var[Union[float, int]], float, int]] = None,
+        align_offset: Optional[Union[Var[Union[float, int]], float, int]] = None,
+        avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        collision_padding: Optional[
+            Union[
+                Dict[str, Union[float, int]],
+                Var[Union[Dict[str, Union[float, int]], float, int]],
+                float,
+                int,
+            ]
+        ] = None,
+        sticky: Optional[
+            Union[Literal["always", "partial"], Var[Literal["always", "partial"]]]
+        ] = None,
+        hide_when_detached: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -392,7 +471,19 @@ class ContextMenuSubContent(RadixThemesComponent):
 
         Args:
             *children: Child components.
-            loop: When true, keyboard navigation will loop from last item to first, and vice versa.
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            loop: When True, keyboard navigation will loop from last item to first, and vice versa. Defaults to False.
+            force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+            side_offset: The distance in pixels from the trigger. Defaults to 0.
+            align_offset: An offset in pixels from the "start" or "end" alignment options.
+            avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
+            collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+            sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+            hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+            on_escape_key_down: Fired when the escape key is pressed.
+            on_pointer_down_outside: Fired when a pointer down event happens outside the context menu.
+            on_focus_outside: Fired when focus moves outside the context menu.
+            on_interact_outside: Fired when interacting outside the context menu.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -475,6 +566,9 @@ class ContextMenuItem(RadixThemesComponent):
             ]
         ] = None,
         shortcut: Optional[Union[Var[str], str]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        disabled: Optional[Union[Var[bool], bool]] = None,
+        text_value: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -495,6 +589,7 @@ class ContextMenuItem(RadixThemesComponent):
         on_mouse_over: Optional[EventType[[]]] = None,
         on_mouse_up: Optional[EventType[[]]] = None,
         on_scroll: Optional[EventType[[]]] = None,
+        on_select: Optional[EventType[[]]] = None,
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "ContextMenuItem":
@@ -507,6 +602,10 @@ class ContextMenuItem(RadixThemesComponent):
             *children: Child components.
             color_scheme: Override theme color for button
             shortcut: Shortcut to render a menu item as a link
+            as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
+            disabled: When true, prevents the user from interacting with the item.
+            text_value: Optional text used for typeahead purposes. By default the typeahead behavior will use the content of the item. Use this when the content is complex, or you have non-textual content inside.
+            on_select: Fired when the item is selected.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/dialog.py

@@ -5,7 +5,7 @@ from typing import Literal
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.el import elements
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -23,7 +23,10 @@ class DialogRoot(RadixThemesComponent):
     open: Var[bool]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[identity_event(bool)]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
+    # The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
+    default_open: Var[bool]
 
 
 class DialogTrigger(RadixThemesTriggerComponent):
@@ -47,19 +50,19 @@ class DialogContent(elements.Div, RadixThemesComponent):
     size: Var[Responsive[Literal["1", "2", "3", "4"]]]
 
     # Fired when the dialog is opened.
-    on_open_auto_focus: EventHandler[empty_event]
+    on_open_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the dialog is closed.
-    on_close_auto_focus: EventHandler[empty_event]
+    on_close_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
     # Fired when the pointer is down outside the dialog.
-    on_pointer_down_outside: EventHandler[empty_event]
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
 
     # Fired when the pointer interacts outside the dialog.
-    on_interact_outside: EventHandler[empty_event]
+    on_interact_outside: EventHandler[no_args_event_spec]
 
 
 class DialogDescription(RadixThemesComponent):

reflex/components/radix/themes/components/dialog.pyi

@@ -21,6 +21,7 @@ class DialogRoot(RadixThemesComponent):
         cls,
         *children,
         open: Optional[Union[Var[bool], bool]] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -53,6 +54,8 @@ class DialogRoot(RadixThemesComponent):
         Args:
             *children: Child components.
             open: The controlled open state of the dialog.
+            on_open_change: Fired when the open state changes.
+            default_open: The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -233,6 +236,11 @@ class DialogContent(elements.Div, RadixThemesComponent):
         Args:
             *children: Child components.
             size: DialogContent size "1" - "4"
+            on_open_auto_focus: Fired when the dialog is opened.
+            on_close_auto_focus: Fired when the dialog is closed.
+            on_escape_key_down: Fired when the escape key is pressed.
+            on_pointer_down_outside: Fired when the pointer is down outside the dialog.
+            on_interact_outside: Fired when the pointer interacts outside the dialog.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -363,6 +371,7 @@ class Dialog(ComponentNamespace):
     def __call__(
         *children,
         open: Optional[Union[Var[bool], bool]] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -395,6 +404,8 @@ class Dialog(ComponentNamespace):
         Args:
             *children: Child components.
             open: The controlled open state of the dialog.
+            on_open_change: Fired when the open state changes.
+            default_open: The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/dropdown_menu.py

@@ -4,7 +4,7 @@ from typing import Dict, List, Literal, Union
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -23,7 +23,6 @@ LiteralSideType = Literal["top", "right", "bottom", "left"]
 
 LiteralAlignType = Literal["start", "center", "end"]
 
-
 LiteralStickyType = Literal[
     "partial",
     "always",
@@ -50,7 +49,7 @@ class DropdownMenuRoot(RadixThemesComponent):
     _invalid_children: List[str] = ["DropdownMenuItem"]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[identity_event(bool)]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
 
 
 class DropdownMenuTrigger(RadixThemesTriggerComponent):
@@ -110,9 +109,6 @@ class DropdownMenuContent(RadixThemesComponent):
     # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
     collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
 
-    # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
-    arrow_padding: Var[Union[float, int]]
-
     # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
     sticky: Var[LiteralStickyType]
 
@@ -120,19 +116,19 @@ class DropdownMenuContent(RadixThemesComponent):
     hide_when_detached: Var[bool]
 
     # Fired when the dialog is closed.
-    on_close_auto_focus: EventHandler[empty_event]
+    on_close_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
     # Fired when the pointer is down outside the dialog.
-    on_pointer_down_outside: EventHandler[empty_event]
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
 
     # Fired when focus moves outside the dialog.
-    on_focus_outside: EventHandler[empty_event]
+    on_focus_outside: EventHandler[no_args_event_spec]
 
     # Fired when the pointer interacts outside the dialog.
-    on_interact_outside: EventHandler[empty_event]
+    on_interact_outside: EventHandler[no_args_event_spec]
 
 
 class DropdownMenuSubTrigger(RadixThemesTriggerComponent):
@@ -164,7 +160,7 @@ class DropdownMenuSub(RadixThemesComponent):
     default_open: Var[bool]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[identity_event(bool)]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
 
 
 class DropdownMenuSubContent(RadixThemesComponent):
@@ -193,9 +189,6 @@ class DropdownMenuSubContent(RadixThemesComponent):
     # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
     collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
 
-    # The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
-    arrow_padding: Var[Union[float, int]]
-
     # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
     sticky: Var[LiteralStickyType]
 
@@ -205,16 +198,16 @@ class DropdownMenuSubContent(RadixThemesComponent):
     _valid_parents: List[str] = ["DropdownMenuSub"]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
     # Fired when the pointer is down outside the dialog.
-    on_pointer_down_outside: EventHandler[empty_event]
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
 
     # Fired when focus moves outside the dialog.
-    on_focus_outside: EventHandler[empty_event]
+    on_focus_outside: EventHandler[no_args_event_spec]
 
     # Fired when the pointer interacts outside the dialog.
-    on_interact_outside: EventHandler[empty_event]
+    on_interact_outside: EventHandler[no_args_event_spec]
 
 
 class DropdownMenuItem(RadixThemesComponent):
@@ -240,7 +233,7 @@ class DropdownMenuItem(RadixThemesComponent):
     _valid_parents: List[str] = ["DropdownMenuContent", "DropdownMenuSubContent"]
 
     # Fired when the item is selected.
-    on_select: EventHandler[empty_event]
+    on_select: EventHandler[no_args_event_spec]
 
 
 class DropdownMenuSeparator(RadixThemesComponent):

reflex/components/radix/themes/components/dropdown_menu.pyi

@@ -65,6 +65,7 @@ class DropdownMenuRoot(RadixThemesComponent):
             open: The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.
             modal: The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers. Defaults to True.
             dir: The reading direction of submenus when applicable. If omitted, inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
+            on_open_change: Fired when the open state changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -224,7 +225,6 @@ class DropdownMenuContent(RadixThemesComponent):
                 int,
             ]
         ] = None,
-        arrow_padding: Optional[Union[Var[Union[float, int]], float, int]] = None,
         sticky: Optional[
             Union[Literal["always", "partial"], Var[Literal["always", "partial"]]]
         ] = None,
@@ -277,9 +277,13 @@ class DropdownMenuContent(RadixThemesComponent):
             align_offset: An offset in pixels from the "start" or "end" alignment options.
             avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
             collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-            arrow_padding: The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
             sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
             hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+            on_close_auto_focus: Fired when the dialog is closed.
+            on_escape_key_down: Fired when the escape key is pressed.
+            on_pointer_down_outside: Fired when the pointer is down outside the dialog.
+            on_focus_outside: Fired when focus moves outside the dialog.
+            on_interact_outside: Fired when the pointer interacts outside the dialog.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -377,6 +381,7 @@ class DropdownMenuSub(RadixThemesComponent):
             *children: Child components.
             open: The controlled open state of the submenu. Must be used in conjunction with `on_open_change`.
             default_open: The open state of the submenu when it is initially rendered. Use when you do not need to control its open state.
+            on_open_change: Fired when the open state changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -410,7 +415,6 @@ class DropdownMenuSubContent(RadixThemesComponent):
                 int,
             ]
         ] = None,
-        arrow_padding: Optional[Union[Var[Union[float, int]], float, int]] = None,
         sticky: Optional[
             Union[Literal["always", "partial"], Var[Literal["always", "partial"]]]
         ] = None,
@@ -456,9 +460,12 @@ class DropdownMenuSubContent(RadixThemesComponent):
             align_offset: An offset in pixels from the "start" or "end" alignment options.
             avoid_collisions: When true, overrides the side and align preferences to prevent collisions with boundary edges. Defaults to True.
             collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
-            arrow_padding: The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it from overflowing the corners. Defaults to 0.
             sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
             hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+            on_escape_key_down: Fired when the escape key is pressed.
+            on_pointer_down_outside: Fired when the pointer is down outside the dialog.
+            on_focus_outside: Fired when focus moves outside the dialog.
+            on_interact_outside: Fired when the pointer interacts outside the dialog.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -580,6 +587,7 @@ class DropdownMenuItem(RadixThemesComponent):
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior. Defaults to False.
             disabled: When true, prevents the user from interacting with the item.
             text_value: Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item. Use this when the content is complex, or you have non-textual content inside.
+            on_select: Fired when the item is selected.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/hover_card.py

@@ -1,11 +1,11 @@
 """Interactive components provided by @radix-ui/themes."""
 
-from typing import Literal
+from typing import Dict, Literal, Union
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.el import elements
-from reflex.event import EventHandler, identity_event
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -32,7 +32,7 @@ class HoverCardRoot(RadixThemesComponent):
     close_delay: Var[int]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[identity_event(bool)]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
 
 
 class HoverCardTrigger(RadixThemesTriggerComponent):
@@ -55,9 +55,24 @@ class HoverCardContent(elements.Div, RadixThemesComponent):
     # The preferred alignment against the trigger. May change when collisions occur.
     align: Var[Literal["start", "center", "end"]]
 
+    # An offset in pixels from the "start" or "end" alignment options.
+    align_offset: Var[int]
+
     # Whether or not the hover card should avoid collisions with its trigger.
     avoid_collisions: Var[bool]
 
+    # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
+    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+
+    # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless
+    sticky: Var[Literal["partial", "always"]]
+
+    # Whether to hide the content when the trigger becomes fully occluded.
+    hide_when_detached: Var[bool]
+
+    # Hovercard size "1" - "3"
+    size: Var[Responsive[Literal["1", "2", "3"]]]
+
 
 class HoverCard(ComponentNamespace):
     """For sighted users to preview content available behind a link."""

reflex/components/radix/themes/components/hover_card.pyi

@@ -59,6 +59,7 @@ class HoverCardRoot(RadixThemesComponent):
             open: The controlled open state of the hover card. Must be used in conjunction with onOpenChange.
             open_delay: The duration from when the mouse enters the trigger until the hover card opens.
             close_delay: The duration from when the mouse leaves the trigger until the hover card closes.
+            on_open_change: Fired when the open state changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -137,7 +138,31 @@ class HoverCardContent(elements.Div, RadixThemesComponent):
                 Var[Literal["center", "end", "start"]],
             ]
         ] = None,
+        align_offset: Optional[Union[Var[int], int]] = None,
         avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        collision_padding: Optional[
+            Union[
+                Dict[str, Union[float, int]],
+                Var[Union[Dict[str, Union[float, int]], float, int]],
+                float,
+                int,
+            ]
+        ] = None,
+        sticky: Optional[
+            Union[Literal["always", "partial"], Var[Literal["always", "partial"]]]
+        ] = None,
+        hide_when_detached: Optional[Union[Var[bool], bool]] = None,
+        size: Optional[
+            Union[
+                Breakpoints[str, Literal["1", "2", "3"]],
+                Literal["1", "2", "3"],
+                Var[
+                    Union[
+                        Breakpoints[str, Literal["1", "2", "3"]], Literal["1", "2", "3"]
+                    ]
+                ],
+            ]
+        ] = None,
         access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         auto_capitalize: Optional[
             Union[Var[Union[bool, int, str]], bool, int, str]
@@ -195,7 +220,12 @@ class HoverCardContent(elements.Div, RadixThemesComponent):
             side: The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.
             side_offset: The distance in pixels from the trigger.
             align: The preferred alignment against the trigger. May change when collisions occur.
+            align_offset: An offset in pixels from the "start" or "end" alignment options.
             avoid_collisions: Whether or not the hover card should avoid collisions with its trigger.
+            collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { top: 20, left: 20 }.
+            sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless
+            hide_when_detached: Whether to hide the content when the trigger becomes fully occluded.
+            size: Hovercard size "1" - "3"
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -272,6 +302,7 @@ class HoverCard(ComponentNamespace):
             open: The controlled open state of the hover card. Must be used in conjunction with onOpenChange.
             open_delay: The duration from when the mouse enters the trigger until the hover card opens.
             close_delay: The duration from when the mouse leaves the trigger until the hover card closes.
+            on_open_change: Fired when the open state changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/popover.py

@@ -1,11 +1,11 @@
 """Interactive components provided by @radix-ui/themes."""
 
-from typing import Literal
+from typing import Dict, Literal, Union
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.el import elements
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -26,7 +26,10 @@ class PopoverRoot(RadixThemesComponent):
     modal: Var[bool]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[identity_event(bool)]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
+    # The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+    default_open: Var[bool]
 
 
 class PopoverTrigger(RadixThemesTriggerComponent):
@@ -58,23 +61,32 @@ class PopoverContent(elements.Div, RadixThemesComponent):
     # When true, overrides the side andalign preferences to prevent collisions with boundary edges.
     avoid_collisions: Var[bool]
 
+    # The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+    collision_padding: Var[Union[float, int, Dict[str, Union[float, int]]]]
+
+    # The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+    sticky: Var[Literal["partial", "always"]]
+
+    # Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+    hide_when_detached: Var[bool]
+
     # Fired when the dialog is opened.
-    on_open_auto_focus: EventHandler[empty_event]
+    on_open_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the dialog is closed.
-    on_close_auto_focus: EventHandler[empty_event]
+    on_close_auto_focus: EventHandler[no_args_event_spec]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
     # Fired when the pointer is down outside the dialog.
-    on_pointer_down_outside: EventHandler[empty_event]
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
 
     # Fired when focus moves outside the dialog.
-    on_focus_outside: EventHandler[empty_event]
+    on_focus_outside: EventHandler[no_args_event_spec]
 
     # Fired when the pointer interacts outside the dialog.
-    on_interact_outside: EventHandler[empty_event]
+    on_interact_outside: EventHandler[no_args_event_spec]
 
 
 class PopoverClose(RadixThemesTriggerComponent):

reflex/components/radix/themes/components/popover.pyi

@@ -22,6 +22,7 @@ class PopoverRoot(RadixThemesComponent):
         *children,
         open: Optional[Union[Var[bool], bool]] = None,
         modal: Optional[Union[Var[bool], bool]] = None,
+        default_open: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -55,6 +56,8 @@ class PopoverRoot(RadixThemesComponent):
             *children: Child components.
             open: The controlled open state of the popover.
             modal: The modality of the popover. When set to true, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
+            on_open_change: Fired when the open state changes.
+            default_open: The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -141,6 +144,18 @@ class PopoverContent(elements.Div, RadixThemesComponent):
         ] = None,
         align_offset: Optional[Union[Var[int], int]] = None,
         avoid_collisions: Optional[Union[Var[bool], bool]] = None,
+        collision_padding: Optional[
+            Union[
+                Dict[str, Union[float, int]],
+                Var[Union[Dict[str, Union[float, int]], float, int]],
+                float,
+                int,
+            ]
+        ] = None,
+        sticky: Optional[
+            Union[Literal["always", "partial"], Var[Literal["always", "partial"]]]
+        ] = None,
+        hide_when_detached: Optional[Union[Var[bool], bool]] = None,
         access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         auto_capitalize: Optional[
             Union[Var[Union[bool, int, str]], bool, int, str]
@@ -207,6 +222,15 @@ class PopoverContent(elements.Div, RadixThemesComponent):
             align: The preferred alignment against the anchor. May change when collisions occur.
             align_offset: The vertical distance in pixels from the anchor.
             avoid_collisions: When true, overrides the side andalign preferences to prevent collisions with boundary edges.
+            collision_padding: The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for all sides), or a partial padding object, for example: { "top": 20, "left": 20 }. Defaults to 0.
+            sticky: The sticky behavior on the align axis. "partial" will keep the content in the boundary as long as the trigger is at least partially in the boundary whilst "always" will keep the content in the boundary regardless. Defaults to "partial".
+            hide_when_detached: Whether to hide the content when the trigger becomes fully occluded. Defaults to False.
+            on_open_auto_focus: Fired when the dialog is opened.
+            on_close_auto_focus: Fired when the dialog is closed.
+            on_escape_key_down: Fired when the escape key is pressed.
+            on_pointer_down_outside: Fired when the pointer is down outside the dialog.
+            on_focus_outside: Fired when focus moves outside the dialog.
+            on_interact_outside: Fired when the pointer interacts outside the dialog.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.

reflex/components/radix/themes/components/radio_cards.py

@@ -4,7 +4,7 @@ from types import SimpleNamespace
 from typing import Literal, Union
 
 from reflex.components.core.breakpoints import Responsive
-from reflex.event import EventHandler, identity_event
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import LiteralAccentColor, RadixThemesComponent
@@ -65,7 +65,7 @@ class RadioCardsRoot(RadixThemesComponent):
     loop: Var[bool]
 
     # Event handler called when the value changes.
-    on_value_change: EventHandler[identity_event(str)]
+    on_value_change: EventHandler[passthrough_event_spec(str)]
 
 
 class RadioCardsItem(RadixThemesComponent):

reflex/components/radix/themes/components/radio_cards.pyi

@@ -201,6 +201,7 @@ class RadioCardsRoot(RadixThemesComponent):
             orientation: The orientation of the component.
             dir: The reading direction of the radio group. If omitted,  inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.
             loop: When true, keyboard navigation will loop from last item to first, and vice versa.
+            on_value_change: Event handler called when the value changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/radio_group.py

@@ -9,7 +9,7 @@ from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
-from reflex.event import EventHandler, identity_event
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.utils import types
 from reflex.vars.base import LiteralVar, Var
 from reflex.vars.sequence import StringVar
@@ -59,7 +59,7 @@ class RadioGroupRoot(RadixThemesComponent):
     _rename_props = {"onChange": "onValueChange"}
 
     # Fired when the value of the radio group changes.
-    on_change: EventHandler[identity_event(str)]
+    on_change: EventHandler[passthrough_event_spec(str)]
 
 
 class RadioGroupItem(RadixThemesComponent):

reflex/components/radix/themes/components/radio_group.pyi

@@ -146,6 +146,7 @@ class RadioGroupRoot(RadixThemesComponent):
             disabled: Whether the radio group is disabled
             name: The name of the group. Submitted with its owning form as part of a name/value pair.
             required: Whether the radio group is required
+            on_change: Props to rename  Fired when the value of the radio group changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/segmented_control.pyi

@@ -148,6 +148,7 @@ class SegmentedControlRoot(RadixThemesComponent):
             radius: The radius of the segmented control: "none" | "small" | "medium" | "large" | "full"
             default_value: The default value of the segmented control.
             value: The current value of the segmented control.
+            on_change: Handles the `onChange` event for the SegmentedControl component.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/select.py

@@ -5,7 +5,7 @@ from typing import List, Literal, Union
 import reflex as rx
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
-from reflex.event import empty_event, identity_event
+from reflex.event import no_args_event_spec, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -48,10 +48,10 @@ class SelectRoot(RadixThemesComponent):
     _rename_props = {"onChange": "onValueChange"}
 
     # Fired when the value of the select changes.
-    on_change: rx.EventHandler[identity_event(str)]
+    on_change: rx.EventHandler[passthrough_event_spec(str)]
 
     # Fired when the select is opened or closed.
-    on_open_change: rx.EventHandler[identity_event(bool)]
+    on_open_change: rx.EventHandler[passthrough_event_spec(bool)]
 
 
 class SelectTrigger(RadixThemesComponent):
@@ -104,13 +104,13 @@ class SelectContent(RadixThemesComponent):
     align_offset: Var[int]
 
     # Fired when the select content is closed.
-    on_close_auto_focus: rx.EventHandler[empty_event]
+    on_close_auto_focus: rx.EventHandler[no_args_event_spec]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: rx.EventHandler[empty_event]
+    on_escape_key_down: rx.EventHandler[no_args_event_spec]
 
     # Fired when a pointer down event happens outside the select content.
-    on_pointer_down_outside: rx.EventHandler[empty_event]
+    on_pointer_down_outside: rx.EventHandler[no_args_event_spec]
 
 
 class SelectGroup(RadixThemesComponent):

reflex/components/radix/themes/components/select.pyi

@@ -77,6 +77,8 @@ class SelectRoot(RadixThemesComponent):
             name: The name of the select control when submitting the form.
             disabled: When True, prevents the user from interacting with select.
             required: When True, indicates that the user must select a value before the owning form can be submitted.
+            on_change: Props to rename  Fired when the value of the select changes.
+            on_open_change: Fired when the select is opened or closed.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -351,6 +353,9 @@ class SelectContent(RadixThemesComponent):
             side_offset: The distance in pixels from the anchor. Only available when position is set to popper.
             align: The preferred alignment against the anchor. May change when collisions occur. Only available when position is set to popper.
             align_offset: The vertical distance in pixels from the anchor. Only available when position is set to popper.
+            on_close_auto_focus: Fired when the select content is closed.
+            on_escape_key_down: Fired when the escape key is pressed.
+            on_pointer_down_outside: Fired when a pointer down event happens outside the select content.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -719,6 +724,8 @@ class HighLevelSelect(SelectRoot):
             name: The name of the select control when submitting the form.
             disabled: When True, prevents the user from interacting with select.
             required: When True, indicates that the user must select a value before the owning form can be submitted.
+            on_change: Props to rename  Fired when the value of the select changes.
+            on_open_change: Fired when the select is opened or closed.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -893,6 +900,8 @@ class Select(ComponentNamespace):
             name: The name of the select control when submitting the form.
             disabled: When True, prevents the user from interacting with select.
             required: When True, indicates that the user must select a value before the owning form can be submitted.
+            on_change: Props to rename  Fired when the value of the select changes.
+            on_open_change: Fired when the select is opened or closed.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/slider.py

@@ -2,11 +2,11 @@
 
 from __future__ import annotations
 
-from typing import List, Literal, Optional, Tuple, Union
+from typing import List, Literal, Optional, Union
 
 from reflex.components.component import Component
 from reflex.components.core.breakpoints import Responsive
-from reflex.event import EventHandler
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -14,19 +14,11 @@ from ..base import (
     RadixThemesComponent,
 )
 
-
+on_value_event_spec = (
-def on_value_event_spec(
+    passthrough_event_spec(list[Union[int, float]]),
-    value: Var[List[int | float]],
+    passthrough_event_spec(list[int]),
-) -> Tuple[Var[List[int | float]]]:
+    passthrough_event_spec(list[float]),
-    """Event handler spec for the value event.
+)
-
-    Args:
-        value: The value of the event.
-
-    Returns:
-        The event handler spec.
-    """
-    return (value,)  # type: ignore
 
 
 class Slider(RadixThemesComponent):
@@ -61,6 +53,9 @@ class Slider(RadixThemesComponent):
     # The name of the slider. Submitted with its owning form as part of a name/value pair.
     name: Var[str]
 
+    # The width of the slider.
+    width: Var[Optional[str]] = Var.create("100%")
+
     # The minimum value of the slider.
     min: Var[Union[float, int]]
 
@@ -89,20 +84,19 @@ class Slider(RadixThemesComponent):
     def create(
         cls,
         *children,
-        width: Optional[str] = "100%",
         **props,
     ) -> Component:
         """Create a Slider component.
 
         Args:
             *children: The children of the component.
-            width: The width of the slider.
             **props: The properties of the component.
 
         Returns:
             The component.
         """
         default_value = props.pop("default_value", [50])
+        width = props.pop("width", "100%")
 
         if isinstance(default_value, Var):
             if issubclass(default_value._var_type, (int, float)):

reflex/components/radix/themes/components/slider.pyi

@@ -3,18 +3,20 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, List, Literal, Optional, Tuple, Union, overload
+from typing import Any, Dict, List, Literal, Optional, Union, overload
 
 from reflex.components.core.breakpoints import Breakpoints
-from reflex.event import EventType
+from reflex.event import EventType, passthrough_event_spec
 from reflex.style import Style
 from reflex.vars.base import Var
 
 from ..base import RadixThemesComponent
 
-def on_value_event_spec(
+on_value_event_spec = (
-    value: Var[List[int | float]],
+    passthrough_event_spec(list[Union[int, float]]),
-) -> Tuple[Var[List[int | float]]]: ...
+    passthrough_event_spec(list[int]),
+    passthrough_event_spec(list[float]),
+)
 
 class Slider(RadixThemesComponent):
     @overload
@@ -22,7 +24,6 @@ class Slider(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        width: Optional[str] = "100%",
         as_child: Optional[Union[Var[bool], bool]] = None,
         size: Optional[
             Union[
@@ -121,6 +122,7 @@ class Slider(RadixThemesComponent):
             Union[List[Union[float, int]], Var[List[Union[float, int]]]]
         ] = None,
         name: Optional[Union[Var[str], str]] = None,
+        width: Optional[Union[Var[Optional[str]], str]] = None,
         min: Optional[Union[Var[Union[float, int]], float, int]] = None,
         max: Optional[Union[Var[Union[float, int]], float, int]] = None,
         step: Optional[Union[Var[Union[float, int]], float, int]] = None,
@@ -138,7 +140,13 @@ class Slider(RadixThemesComponent):
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
         on_blur: Optional[EventType[[]]] = None,
-        on_change: Optional[EventType[List[int | float]]] = None,
+        on_change: Optional[
+            Union[
+                EventType[list[Union[int, float]]],
+                EventType[list[int]],
+                EventType[list[float]],
+            ]
+        ] = None,
         on_click: Optional[EventType[[]]] = None,
         on_context_menu: Optional[EventType[[]]] = None,
         on_double_click: Optional[EventType[[]]] = None,
@@ -153,14 +161,19 @@ class Slider(RadixThemesComponent):
         on_mouse_up: Optional[EventType[[]]] = None,
         on_scroll: Optional[EventType[[]]] = None,
         on_unmount: Optional[EventType[[]]] = None,
-        on_value_commit: Optional[EventType[List[int | float]]] = None,
+        on_value_commit: Optional[
+            Union[
+                EventType[list[Union[int, float]]],
+                EventType[list[int]],
+                EventType[list[float]],
+            ]
+        ] = None,
         **props,
     ) -> "Slider":
         """Create a Slider component.
 
         Args:
             *children: The children of the component.
-            width: The width of the slider.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             size: Button size "1" - "3"
             variant: Variant of button
@@ -170,11 +183,14 @@ class Slider(RadixThemesComponent):
             default_value: The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
             value: The controlled value of the slider. Must be used in conjunction with onValueChange.
             name: The name of the slider. Submitted with its owning form as part of a name/value pair.
+            width: The width of the slider.
             min: The minimum value of the slider.
             max: The maximum value of the slider.
             step: The step value of the slider.
             disabled: Whether the slider is disabled
             orientation: The orientation of the slider.
+            on_change: Props to rename  Fired when the value of the slider changes.
+            on_value_commit: Fired when a thumb is released after being dragged.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/switch.py

@@ -3,7 +3,7 @@
 from typing import Literal
 
 from reflex.components.core.breakpoints import Responsive
-from reflex.event import EventHandler, identity_event
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -59,7 +59,7 @@ class Switch(RadixThemesComponent):
     _rename_props = {"onChange": "onCheckedChange"}
 
     # Fired when the value of the switch changes
-    on_change: EventHandler[identity_event(bool)]
+    on_change: EventHandler[passthrough_event_spec(bool)]
 
 
 switch = Switch.create

reflex/components/radix/themes/components/switch.pyi

@@ -155,6 +155,7 @@ class Switch(RadixThemesComponent):
             color_scheme: Override theme color for switch
             high_contrast: Whether to render the switch with higher contrast color against background
             radius: Override theme radius for switch: "none" | "small" | "full"
+            on_change: Props to rename  Fired when the value of the switch changes
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/tabs.py

@@ -7,7 +7,7 @@ from typing import Any, Dict, List, Literal
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.breakpoints import Responsive
 from reflex.components.core.colors import color
-from reflex.event import EventHandler, identity_event
+from reflex.event import EventHandler, passthrough_event_spec
 from reflex.vars.base import Var
 
 from ..base import (
@@ -42,7 +42,7 @@ class TabsRoot(RadixThemesComponent):
     _rename_props = {"onChange": "onValueChange"}
 
     # Fired when the value of the tabs changes.
-    on_change: EventHandler[identity_event(str)]
+    on_change: EventHandler[passthrough_event_spec(str)]
 
     def add_style(self) -> Dict[str, Any] | None:
         """Add style for the component.

reflex/components/radix/themes/components/tabs.pyi

@@ -70,6 +70,7 @@ class TabsRoot(RadixThemesComponent):
             orientation: The orientation of the tabs.
             dir: Reading direction of the tabs.
             activation_mode: The mode of activation for the tabs. "automatic" will activate the tab when focused. "manual" will activate the tab when clicked.
+            on_change: Props to rename  Fired when the value of the tabs changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -369,6 +370,7 @@ class Tabs(ComponentNamespace):
             orientation: The orientation of the tabs.
             dir: Reading direction of the tabs.
             activation_mode: The mode of activation for the tabs. "automatic" will activate the tab when focused. "manual" will activate the tab when clicked.
+            on_change: Props to rename  Fired when the value of the tabs changes.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/text_area.pyi

@@ -214,6 +214,11 @@ class TextArea(RadixThemesComponent, elements.Textarea):
             auto_height: Automatically fit the content height to the text (use min-height with this prop)
             cols: Visible width of the text control, in average character widths
             enter_key_submit: Enter key submits form (shift-enter adds new line)
+            on_change: Fired when the input value changes
+            on_focus: Fired when the input gains focus
+            on_blur: Fired when the input loses focus
+            on_key_down: Fired when a key is pressed down
+            on_key_up: Fired when a key is released
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.

reflex/components/radix/themes/components/text_field.pyi

@@ -188,6 +188,11 @@ class TextFieldRoot(elements.Div, RadixThemesComponent):
             required: Indicates that the input is required
             type: Specifies the type of input
             value: Value of the input
+            on_change: Fired when the value of the textarea changes.
+            on_focus: Fired when the textarea is focused.
+            on_blur: Fired when the textarea is blurred.
+            on_key_down: Fired when a key is pressed down.
+            on_key_up: Fired when a key is released.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -500,6 +505,11 @@ class TextField(ComponentNamespace):
             required: Indicates that the input is required
             type: Specifies the type of input
             value: Value of the input
+            on_change: Fired when the value of the textarea changes.
+            on_focus: Fired when the textarea is focused.
+            on_blur: Fired when the textarea is blurred.
+            on_key_down: Fired when a key is pressed down.
+            on_key_up: Fired when a key is released.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.

reflex/components/radix/themes/components/tooltip.py

@@ -3,7 +3,7 @@
 from typing import Dict, Literal, Union
 
 from reflex.components.component import Component
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.utils import format
 from reflex.vars.base import Var
 
@@ -85,13 +85,13 @@ class Tooltip(RadixThemesComponent):
     aria_label: Var[str]
 
     # Fired when the open state changes.
-    on_open_change: EventHandler[identity_event(bool)]
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
 
     # Fired when the escape key is pressed.
-    on_escape_key_down: EventHandler[empty_event]
+    on_escape_key_down: EventHandler[no_args_event_spec]
 
     # Fired when the pointer is down outside the tooltip.
-    on_pointer_down_outside: EventHandler[empty_event]
+    on_pointer_down_outside: EventHandler[no_args_event_spec]
 
     @classmethod
     def create(cls, *children, **props) -> Component:

reflex/components/radix/themes/components/tooltip.pyi

@@ -106,6 +106,9 @@ class Tooltip(RadixThemesComponent):
             disable_hoverable_content: Prevents Tooltip content from remaining open when hovering.
             force_mount: Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
             aria_label: By default, screenreaders will announce the content inside the component. If this is not descriptive enough, or you have content that cannot be announced, use aria-label as a more descriptive label.
+            on_open_change: Fired when the open state changes.
+            on_escape_key_down: Fired when the escape key is pressed.
+            on_pointer_down_outside: Fired when the pointer is down outside the tooltip.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/layout/list.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Iterable, Literal, Optional, Union
+from typing import Any, Iterable, Literal, Union
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.foreach import Foreach
@@ -44,27 +44,30 @@ class BaseList(Component):
     # The style of the list. Default to "none".
     list_style_type: Var[
         Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered]
-    ]
+    ] = Var.create("none")
+
+    # A list of items to add to the list.
+    items: Var[Iterable] = Var.create([])
 
     @classmethod
     def create(
         cls,
         *children,
-        items: Optional[Var[Iterable]] = None,
         **props,
     ):
         """Create a list component.
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
             **props: The properties of the component.
 
         Returns:
             The list component.
 
         """
+        items = props.pop("items", None)
         list_style_type = props.pop("list_style_type", "none")
+
         if not children and items is not None:
             if isinstance(items, Var):
                 children = [Foreach.create(items, ListItem.create)]
@@ -87,6 +90,9 @@ class BaseList(Component):
             "direction": "column",
         }
 
+    def _exclude_props(self) -> list[str]:
+        return ["items", "list_style_type"]
+
 
 class UnorderedList(BaseList, Ul):
     """Display an unordered list."""
@@ -97,22 +103,21 @@ class UnorderedList(BaseList, Ul):
     def create(
         cls,
         *children,
-        items: Optional[Var[Iterable]] = None,
-        list_style_type: LiteralListStyleTypeUnordered = "disc",
         **props,
     ):
-        """Create a unordered list component.
+        """Create an unordered list component.
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
-            list_style_type: The style of the list.
             **props: The properties of the component.
 
         Returns:
             The list component.
 
         """
+        items = props.pop("items", None)
+        list_style_type = props.pop("list_style_type", "disc")
+
         props["margin_left"] = props.get("margin_left", "1.5rem")
         return super().create(
             *children, items=items, list_style_type=list_style_type, **props
@@ -128,22 +133,21 @@ class OrderedList(BaseList, Ol):
     def create(
         cls,
         *children,
-        items: Optional[Var[Iterable]] = None,
-        list_style_type: LiteralListStyleTypeOrdered = "decimal",
         **props,
     ):
         """Create an ordered list component.
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
-            list_style_type: The style of the list.
             **props: The properties of the component.
 
         Returns:
             The list component.
 
         """
+        items = props.pop("items", None)
+        list_style_type = props.pop("list_style_type", "decimal")
+
         props["margin_left"] = props.get("margin_left", "1.5rem")
         return super().create(
             *children, items=items, list_style_type=list_style_type, **props

reflex/components/radix/themes/layout/list.pyi

@@ -35,7 +35,6 @@ class BaseList(Component):
     def create(  # type: ignore
         cls,
         *children,
-        items: Optional[Union[Iterable, Var[Iterable]]] = None,
         list_style_type: Optional[
             Union[
                 Literal[
@@ -78,6 +77,7 @@ class BaseList(Component):
                 ],
             ]
         ] = None,
+        items: Optional[Union[Iterable, Var[Iterable]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -105,8 +105,8 @@ class BaseList(Component):
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
             list_style_type: The style of the list. Default to "none".
+            items: A list of items to add to the list.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -129,8 +129,49 @@ class UnorderedList(BaseList, Ul):
     def create(  # type: ignore
         cls,
         *children,
+        list_style_type: Optional[
+            Union[
+                Literal[
+                    "armenian",
+                    "decimal",
+                    "decimal-leading-zero",
+                    "georgian",
+                    "hiragana",
+                    "katakana",
+                    "lower-alpha",
+                    "lower-greek",
+                    "lower-latin",
+                    "lower-roman",
+                    "none",
+                    "upper-alpha",
+                    "upper-latin",
+                    "upper-roman",
+                ],
+                Literal["circle", "disc", "none", "square"],
+                Var[
+                    Union[
+                        Literal[
+                            "armenian",
+                            "decimal",
+                            "decimal-leading-zero",
+                            "georgian",
+                            "hiragana",
+                            "katakana",
+                            "lower-alpha",
+                            "lower-greek",
+                            "lower-latin",
+                            "lower-roman",
+                            "none",
+                            "upper-alpha",
+                            "upper-latin",
+                            "upper-roman",
+                        ],
+                        Literal["circle", "disc", "none", "square"],
+                    ]
+                ],
+            ]
+        ] = None,
         items: Optional[Union[Iterable, Var[Iterable]]] = None,
-        list_style_type: Optional[LiteralListStyleTypeUnordered] = "disc",
         access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         auto_capitalize: Optional[
             Union[Var[Union[bool, int, str]], bool, int, str]
@@ -178,12 +219,12 @@ class UnorderedList(BaseList, Ul):
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "UnorderedList":
-        """Create a unordered list component.
+        """Create an unordered list component.
 
         Args:
             *children: The children of the component.
+            list_style_type: The style of the list. Default to "none".
             items: A list of items to add to the list.
-            list_style_type: The style of the list.
             access_key:  Provides a hint for generating a keyboard shortcut for the current element.
             auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
             content_editable: Indicates whether the element's content is editable.
@@ -220,8 +261,49 @@ class OrderedList(BaseList, Ol):
     def create(  # type: ignore
         cls,
         *children,
+        list_style_type: Optional[
+            Union[
+                Literal[
+                    "armenian",
+                    "decimal",
+                    "decimal-leading-zero",
+                    "georgian",
+                    "hiragana",
+                    "katakana",
+                    "lower-alpha",
+                    "lower-greek",
+                    "lower-latin",
+                    "lower-roman",
+                    "none",
+                    "upper-alpha",
+                    "upper-latin",
+                    "upper-roman",
+                ],
+                Literal["circle", "disc", "none", "square"],
+                Var[
+                    Union[
+                        Literal[
+                            "armenian",
+                            "decimal",
+                            "decimal-leading-zero",
+                            "georgian",
+                            "hiragana",
+                            "katakana",
+                            "lower-alpha",
+                            "lower-greek",
+                            "lower-latin",
+                            "lower-roman",
+                            "none",
+                            "upper-alpha",
+                            "upper-latin",
+                            "upper-roman",
+                        ],
+                        Literal["circle", "disc", "none", "square"],
+                    ]
+                ],
+            ]
+        ] = None,
         items: Optional[Union[Iterable, Var[Iterable]]] = None,
-        list_style_type: Optional[LiteralListStyleTypeOrdered] = "decimal",
         reversed: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         start: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         type: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
@@ -276,8 +358,8 @@ class OrderedList(BaseList, Ol):
 
         Args:
             *children: The children of the component.
+            list_style_type: The style of the list. Default to "none".
             items: A list of items to add to the list.
-            list_style_type: The style of the list.
             reversed: Reverses the order of the list.
             start: Specifies the start value of the first list item in an ordered list.
             type: Specifies the kind of marker to use in the list (letters or numbers).
@@ -406,7 +488,6 @@ class List(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        items: Optional[Union[Iterable, Var[Iterable]]] = None,
         list_style_type: Optional[
             Union[
                 Literal[
@@ -449,6 +530,7 @@ class List(ComponentNamespace):
                 ],
             ]
         ] = None,
+        items: Optional[Union[Iterable, Var[Iterable]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -476,8 +558,8 @@ class List(ComponentNamespace):
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
             list_style_type: The style of the list. Default to "none".
+            items: A list of items to add to the list.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/layout/stack.py

@@ -12,20 +12,22 @@ from .flex import Flex, LiteralFlexDirection
 class Stack(Flex):
     """A stack component."""
 
+    # The spacing between each stack item.
+    spacing: Var[LiteralSpacing] = Var.create("3")
+
+    # The alignment of the stack items.
+    align: Var[LiteralAlign] = Var.create("start")
+
     @classmethod
     def create(
         cls,
         *children,
-        spacing: LiteralSpacing = "3",
-        align: LiteralAlign = "start",
         **props,
     ) -> Component:
         """Create a new instance of the component.
 
         Args:
             *children: The children of the stack.
-            spacing: The spacing between each stack item.
-            align: The alignment of the stack items.
             **props: The properties of the stack.
 
         Returns:
@@ -39,8 +41,6 @@ class Stack(Flex):
 
         return super().create(
             *children,
-            spacing=spacing,
-            align=align,
             **props,
         )
 

reflex/components/radix/themes/layout/stack.pyi

@@ -10,7 +10,6 @@ from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
-from ..base import LiteralAlign, LiteralSpacing
 from .flex import Flex
 
 class Stack(Flex):
@@ -19,8 +18,18 @@ class Stack(Flex):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "3",
+        spacing: Optional[
-        align: Optional[LiteralAlign] = "start",
+            Union[
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Literal["baseline", "center", "end", "start", "stretch"],
+                Var[Literal["baseline", "center", "end", "start", "stretch"]],
+            ]
+        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         direction: Optional[
             Union[
@@ -114,8 +123,8 @@ class Stack(Flex):
 
         Args:
             *children: The children of the stack.
-            spacing: The spacing between each stack item.
+            spacing: Gap between children: "0" - "9"
-            align: The alignment of the stack items.
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
@@ -155,14 +164,24 @@ class VStack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "3",
-        align: Optional[LiteralAlign] = "start",
         direction: Optional[
             Union[
                 Literal["column", "column-reverse", "row", "row-reverse"],
                 Var[Literal["column", "column-reverse", "row", "row-reverse"]],
             ]
         ] = None,
+        spacing: Optional[
+            Union[
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Literal["baseline", "center", "end", "start", "stretch"],
+                Var[Literal["baseline", "center", "end", "start", "stretch"]],
+            ]
+        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         justify: Optional[
             Union[
@@ -239,9 +258,9 @@ class VStack(Stack):
 
         Args:
             *children: The children of the stack.
-            spacing: The spacing between each stack item.
-            align: The alignment of the stack items.
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            spacing: Gap between children: "0" - "9"
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
@@ -280,14 +299,24 @@ class HStack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "3",
-        align: Optional[LiteralAlign] = "start",
         direction: Optional[
             Union[
                 Literal["column", "column-reverse", "row", "row-reverse"],
                 Var[Literal["column", "column-reverse", "row", "row-reverse"]],
             ]
         ] = None,
+        spacing: Optional[
+            Union[
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Literal["baseline", "center", "end", "start", "stretch"],
+                Var[Literal["baseline", "center", "end", "start", "stretch"]],
+            ]
+        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         justify: Optional[
             Union[
@@ -364,9 +393,9 @@ class HStack(Stack):
 
         Args:
             *children: The children of the stack.
-            spacing: The spacing between each stack item.
-            align: The alignment of the stack items.
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            spacing: Gap between children: "0" - "9"
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"

reflex/components/react_player/audio.pyi

@@ -82,6 +82,22 @@ class Audio(ReactPlayer):
             muted: Mutes the player
             width: Set the width of the player: ex:640px
             height: Set the height of the player: ex:640px
+            on_ready: Called when media is loaded and ready to play. If playing is set to true, media will play immediately.
+            on_start: Called when media starts playing.
+            on_play: Called when media starts or resumes playing after pausing or buffering.
+            on_progress: 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_duration: Callback containing duration of the media, in seconds.
+            on_pause: Called when media is paused.
+            on_buffer: Called when media starts buffering.
+            on_buffer_end: Called when media has finished buffering. Works for files, YouTube and Facebook.
+            on_seek: Called when media seeks with seconds parameter.
+            on_playback_rate_change: Called when playback rate of the player changed. Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths.
+            on_playback_quality_change: Called when playback quality of the player changed. Only supported by YouTube (if enabled).
+            on_ended: Called when media finishes playing. Does not fire when loop is set to true.
+            on_error: Called when an error occurs whilst attempting to play media.
+            on_click_preview: Called when user clicks the light mode preview.
+            on_enable_pip: Called when picture-in-picture mode is enabled.
+            on_disable_pip: Called when picture-in-picture mode is disabled.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/react_player/react_player.py

@@ -5,7 +5,7 @@ from __future__ import annotations
 from typing_extensions import TypedDict
 
 from reflex.components.component import NoSSRComponent
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.vars.base import Var
 
 
@@ -57,49 +57,49 @@ 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[empty_event]
+    on_ready: EventHandler[no_args_event_spec]
 
     # Called when media starts playing.
-    on_start: EventHandler[empty_event]
+    on_start: EventHandler[no_args_event_spec]
 
     # Called when media starts or resumes playing after pausing or buffering.
-    on_play: EventHandler[empty_event]
+    on_play: EventHandler[no_args_event_spec]
 
     # 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[identity_event(Progress)]
+    on_progress: EventHandler[passthrough_event_spec(Progress)]
 
     # Callback containing duration of the media, in seconds.
-    on_duration: EventHandler[identity_event(float)]
+    on_duration: EventHandler[passthrough_event_spec(float)]
 
     # Called when media is paused.
-    on_pause: EventHandler[empty_event]
+    on_pause: EventHandler[no_args_event_spec]
 
     # Called when media starts buffering.
-    on_buffer: EventHandler[empty_event]
+    on_buffer: EventHandler[no_args_event_spec]
 
     # Called when media has finished buffering. Works for files, YouTube and Facebook.
-    on_buffer_end: EventHandler[empty_event]
+    on_buffer_end: EventHandler[no_args_event_spec]
 
     # Called when media seeks with seconds parameter.
-    on_seek: EventHandler[identity_event(float)]
+    on_seek: EventHandler[passthrough_event_spec(float)]
 
     # Called when playback rate of the player changed. Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths.
-    on_playback_rate_change: EventHandler[empty_event]
+    on_playback_rate_change: EventHandler[no_args_event_spec]
 
     # Called when playback quality of the player changed. Only supported by YouTube (if enabled).
-    on_playback_quality_change: EventHandler[empty_event]
+    on_playback_quality_change: EventHandler[no_args_event_spec]
 
     # Called when media finishes playing. Does not fire when loop is set to true.
-    on_ended: EventHandler[empty_event]
+    on_ended: EventHandler[no_args_event_spec]
 
     # Called when an error occurs whilst attempting to play media.
-    on_error: EventHandler[empty_event]
+    on_error: EventHandler[no_args_event_spec]
 
     # Called when user clicks the light mode preview.
-    on_click_preview: EventHandler[empty_event]
+    on_click_preview: EventHandler[no_args_event_spec]
 
     # Called when picture-in-picture mode is enabled.
-    on_enable_pip: EventHandler[empty_event]
+    on_enable_pip: EventHandler[no_args_event_spec]
 
     # Called when picture-in-picture mode is disabled.
-    on_disable_pip: EventHandler[empty_event]
+    on_disable_pip: EventHandler[no_args_event_spec]

reflex/components/react_player/react_player.pyi

@@ -85,6 +85,22 @@ class ReactPlayer(NoSSRComponent):
             muted: Mutes the player
             width: Set the width of the player: ex:640px
             height: Set the height of the player: ex:640px
+            on_ready: Called when media is loaded and ready to play. If playing is set to true, media will play immediately.
+            on_start: Called when media starts playing.
+            on_play: Called when media starts or resumes playing after pausing or buffering.
+            on_progress: 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_duration: Callback containing duration of the media, in seconds.
+            on_pause: Called when media is paused.
+            on_buffer: Called when media starts buffering.
+            on_buffer_end: Called when media has finished buffering. Works for files, YouTube and Facebook.
+            on_seek: Called when media seeks with seconds parameter.
+            on_playback_rate_change: Called when playback rate of the player changed. Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths.
+            on_playback_quality_change: Called when playback quality of the player changed. Only supported by YouTube (if enabled).
+            on_ended: Called when media finishes playing. Does not fire when loop is set to true.
+            on_error: Called when an error occurs whilst attempting to play media.
+            on_click_preview: Called when user clicks the light mode preview.
+            on_enable_pip: Called when picture-in-picture mode is enabled.
+            on_disable_pip: Called when picture-in-picture mode is disabled.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/react_player/video.pyi

@@ -82,6 +82,22 @@ class Video(ReactPlayer):
             muted: Mutes the player
             width: Set the width of the player: ex:640px
             height: Set the height of the player: ex:640px
+            on_ready: Called when media is loaded and ready to play. If playing is set to true, media will play immediately.
+            on_start: Called when media starts playing.
+            on_play: Called when media starts or resumes playing after pausing or buffering.
+            on_progress: 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_duration: Callback containing duration of the media, in seconds.
+            on_pause: Called when media is paused.
+            on_buffer: Called when media starts buffering.
+            on_buffer_end: Called when media has finished buffering. Works for files, YouTube and Facebook.
+            on_seek: Called when media seeks with seconds parameter.
+            on_playback_rate_change: Called when playback rate of the player changed. Only supported by YouTube, Vimeo (if enabled), Wistia, and file paths.
+            on_playback_quality_change: Called when playback quality of the player changed. Only supported by YouTube (if enabled).
+            on_ended: Called when media finishes playing. Does not fire when loop is set to true.
+            on_error: Called when an error occurs whilst attempting to play media.
+            on_click_preview: Called when user clicks the light mode preview.
+            on_enable_pip: Called when picture-in-picture mode is enabled.
+            on_disable_pip: Called when picture-in-picture mode is disabled.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

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, empty_event
+from reflex.event import EventHandler, no_args_event_spec
 from reflex.vars.base import LiteralVar, Var
 
 from .recharts import (
@@ -109,25 +109,25 @@ class Axis(Recharts):
     text_anchor: Var[LiteralTextAnchor]
 
     # The customized event handler of click on the ticks of this axis
-    on_click: EventHandler[empty_event]
+    on_click: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousedown on the ticks of this axis
-    on_mouse_down: EventHandler[empty_event]
+    on_mouse_down: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseup on the ticks of this axis
-    on_mouse_up: EventHandler[empty_event]
+    on_mouse_up: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousemove on the ticks of this axis
-    on_mouse_move: EventHandler[empty_event]
+    on_mouse_move: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseout on the ticks of this axis
-    on_mouse_out: EventHandler[empty_event]
+    on_mouse_out: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseenter on the ticks of this axis
-    on_mouse_enter: EventHandler[empty_event]
+    on_mouse_enter: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseleave on the ticks of this axis
-    on_mouse_leave: EventHandler[empty_event]
+    on_mouse_leave: EventHandler[no_args_event_spec]
 
 
 class XAxis(Axis):
@@ -252,7 +252,7 @@ class Brush(Recharts):
             A dict mapping the event trigger to the var that is passed to the handler.
         """
         return {
-            EventTriggers.ON_CHANGE: empty_event,
+            EventTriggers.ON_CHANGE: no_args_event_spec,
         }
 
 
@@ -293,34 +293,34 @@ class Cartesian(Recharts):
     name: Var[Union[str, int]]
 
     # The customized event handler of animation start
-    on_animation_start: EventHandler[empty_event]
+    on_animation_start: EventHandler[no_args_event_spec]
 
     # The customized event handler of animation end
-    on_animation_end: EventHandler[empty_event]
+    on_animation_end: EventHandler[no_args_event_spec]
 
     # The customized event handler of click on the component in this group
-    on_click: EventHandler[empty_event]
+    on_click: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousedown on the component in this group
-    on_mouse_down: EventHandler[empty_event]
+    on_mouse_down: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseup on the component in this group
-    on_mouse_up: EventHandler[empty_event]
+    on_mouse_up: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousemove on the component in this group
-    on_mouse_move: EventHandler[empty_event]
+    on_mouse_move: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseover on the component in this group
-    on_mouse_over: EventHandler[empty_event]
+    on_mouse_over: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseout on the component in this group
-    on_mouse_out: EventHandler[empty_event]
+    on_mouse_out: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseenter on the component in this group
-    on_mouse_enter: EventHandler[empty_event]
+    on_mouse_enter: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseleave on the component in this group
-    on_mouse_leave: EventHandler[empty_event]
+    on_mouse_leave: EventHandler[no_args_event_spec]
 
 
 class Area(Cartesian):
@@ -526,28 +526,28 @@ class Scatter(Recharts):
     animation_easing: Var[LiteralAnimationEasing]
 
     # The customized event handler of click on the component in this group
-    on_click: EventHandler[empty_event]
+    on_click: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousedown on the component in this group
-    on_mouse_down: EventHandler[empty_event]
+    on_mouse_down: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseup on the component in this group
-    on_mouse_up: EventHandler[empty_event]
+    on_mouse_up: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousemove on the component in this group
-    on_mouse_move: EventHandler[empty_event]
+    on_mouse_move: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseover on the component in this group
-    on_mouse_over: EventHandler[empty_event]
+    on_mouse_over: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseout on the component in this group
-    on_mouse_out: EventHandler[empty_event]
+    on_mouse_out: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseenter on the component in this group
-    on_mouse_enter: EventHandler[empty_event]
+    on_mouse_enter: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseleave on the component in this group
-    on_mouse_leave: EventHandler[empty_event]
+    on_mouse_leave: EventHandler[no_args_event_spec]
 
 
 class Funnel(Recharts):
@@ -591,34 +591,34 @@ class Funnel(Recharts):
     _valid_children: List[str] = ["LabelList", "Cell"]
 
     # The customized event handler of animation start
-    on_animation_start: EventHandler[empty_event]
+    on_animation_start: EventHandler[no_args_event_spec]
 
     # The customized event handler of animation end
-    on_animation_end: EventHandler[empty_event]
+    on_animation_end: EventHandler[no_args_event_spec]
 
     # The customized event handler of click on the component in this group
-    on_click: EventHandler[empty_event]
+    on_click: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousedown on the component in this group
-    on_mouse_down: EventHandler[empty_event]
+    on_mouse_down: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseup on the component in this group
-    on_mouse_up: EventHandler[empty_event]
+    on_mouse_up: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousemove on the component in this group
-    on_mouse_move: EventHandler[empty_event]
+    on_mouse_move: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseover on the component in this group
-    on_mouse_over: EventHandler[empty_event]
+    on_mouse_over: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseout on the component in this group
-    on_mouse_out: EventHandler[empty_event]
+    on_mouse_out: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseenter on the component in this group
-    on_mouse_enter: EventHandler[empty_event]
+    on_mouse_enter: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseleave on the component in this group
-    on_mouse_leave: EventHandler[empty_event]
+    on_mouse_leave: EventHandler[no_args_event_spec]
 
 
 class ErrorBar(Recharts):
@@ -715,28 +715,28 @@ class ReferenceDot(Reference):
     _valid_children: List[str] = ["Label"]
 
     # The customized event handler of click on the component in this chart
-    on_click: EventHandler[empty_event]
+    on_click: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousedown on the component in this chart
-    on_mouse_down: EventHandler[empty_event]
+    on_mouse_down: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseup on the component in this chart
-    on_mouse_up: EventHandler[empty_event]
+    on_mouse_up: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseover on the component in this chart
-    on_mouse_over: EventHandler[empty_event]
+    on_mouse_over: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseout on the component in this chart
-    on_mouse_out: EventHandler[empty_event]
+    on_mouse_out: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseenter on the component in this chart
-    on_mouse_enter: EventHandler[empty_event]
+    on_mouse_enter: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousemove on the component in this chart
-    on_mouse_move: EventHandler[empty_event]
+    on_mouse_move: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseleave on the component in this chart
-    on_mouse_leave: EventHandler[empty_event]
+    on_mouse_leave: EventHandler[no_args_event_spec]
 
 
 class ReferenceArea(Recharts):

reflex/components/recharts/cartesian.pyi

@@ -168,6 +168,13 @@ class Axis(Recharts):
             min_tick_gap: The minimum gap between two adjacent labels. Default: 5
             stroke: The stroke color of axis. Default: rx.color("gray", 9)
             text_anchor: The text anchor of axis. Default: "middle"
+            on_click: The customized event handler of click on the ticks of this axis
+            on_mouse_down: The customized event handler of mousedown on the ticks of this axis
+            on_mouse_up: The customized event handler of mouseup on the ticks of this axis
+            on_mouse_move: The customized event handler of mousemove on the ticks of this axis
+            on_mouse_out: The customized event handler of mouseout on the ticks of this axis
+            on_mouse_enter: The customized event handler of mouseenter on the ticks of this axis
+            on_mouse_leave: The customized event handler of mouseleave on the ticks of this axis
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -347,6 +354,13 @@ class XAxis(Axis):
             min_tick_gap: The minimum gap between two adjacent labels. Default: 5
             stroke: The stroke color of axis. Default: rx.color("gray", 9)
             text_anchor: The text anchor of axis. Default: "middle"
+            on_click: The customized event handler of click on the ticks of this axis
+            on_mouse_down: The customized event handler of mousedown on the ticks of this axis
+            on_mouse_up: The customized event handler of mouseup on the ticks of this axis
+            on_mouse_move: The customized event handler of mousemove on the ticks of this axis
+            on_mouse_out: The customized event handler of mouseout on the ticks of this axis
+            on_mouse_enter: The customized event handler of mouseenter on the ticks of this axis
+            on_mouse_leave: The customized event handler of mouseleave on the ticks of this axis
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -522,6 +536,13 @@ class YAxis(Axis):
             min_tick_gap: The minimum gap between two adjacent labels. Default: 5
             stroke: The stroke color of axis. Default: rx.color("gray", 9)
             text_anchor: The text anchor of axis. Default: "middle"
+            on_click: The customized event handler of click on the ticks of this axis
+            on_mouse_down: The customized event handler of mousedown on the ticks of this axis
+            on_mouse_up: The customized event handler of mouseup on the ticks of this axis
+            on_mouse_move: The customized event handler of mousemove on the ticks of this axis
+            on_mouse_out: The customized event handler of mouseout on the ticks of this axis
+            on_mouse_enter: The customized event handler of mouseenter on the ticks of this axis
+            on_mouse_leave: The customized event handler of mouseleave on the ticks of this axis
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -787,6 +808,16 @@ class Cartesian(Recharts):
             animation_easing: The type of easing function. Default: "ease"
             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 the component. If no value was set to this option, the value of dataKey will be used alternatively.
+            on_animation_start: The customized event handler of animation start
+            on_animation_end: The customized event handler of animation end
+            on_click: The customized event handler of click on the component in this group
+            on_mouse_down: The customized event handler of mousedown on the component in this group
+            on_mouse_up: The customized event handler of mouseup on the component in this group
+            on_mouse_move: The customized event handler of mousemove on the component in this group
+            on_mouse_over: The customized event handler of mouseover on the component in this group
+            on_mouse_out: The customized event handler of mouseout on the component in this group
+            on_mouse_enter: The customized event handler of mouseenter on the component in this group
+            on_mouse_leave: The customized event handler of mouseleave on the component in this group
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -965,6 +996,16 @@ class Area(Cartesian):
             animation_easing: The type of easing function. Default: "ease"
             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 the component. If no value was set to this option, the value of dataKey will be used alternatively.
+            on_animation_start: The customized event handler of animation start
+            on_animation_end: The customized event handler of animation end
+            on_click: The customized event handler of click on the component in this group
+            on_mouse_down: The customized event handler of mousedown on the component in this group
+            on_mouse_up: The customized event handler of mouseup on the component in this group
+            on_mouse_move: The customized event handler of mousemove on the component in this group
+            on_mouse_over: The customized event handler of mouseover on the component in this group
+            on_mouse_out: The customized event handler of mouseout on the component in this group
+            on_mouse_enter: The customized event handler of mouseenter on the component in this group
+            on_mouse_leave: The customized event handler of mouseleave on the component in this group
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1096,6 +1137,16 @@ class Bar(Cartesian):
             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"
+            on_animation_start: The customized event handler of animation start
+            on_animation_end: The customized event handler of animation end
+            on_click: The customized event handler of click on the component in this group
+            on_mouse_down: The customized event handler of mousedown on the component in this group
+            on_mouse_up: The customized event handler of mouseup on the component in this group
+            on_mouse_move: The customized event handler of mousemove on the component in this group
+            on_mouse_over: The customized event handler of mouseover on the component in this group
+            on_mouse_out: The customized event handler of mouseout on the component in this group
+            on_mouse_enter: The customized event handler of mouseenter on the component in this group
+            on_mouse_leave: The customized event handler of mouseleave on the component in this group
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1270,6 +1321,16 @@ class Line(Cartesian):
             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"
             name: The name of data. This option will be used in tooltip and legend to represent the component. If no value was set to this option, the value of dataKey will be used alternatively.
+            on_animation_start: The customized event handler of animation start
+            on_animation_end: The customized event handler of animation end
+            on_click: The customized event handler of click on the component in this group
+            on_mouse_down: The customized event handler of mousedown on the component in this group
+            on_mouse_up: The customized event handler of mouseup on the component in this group
+            on_mouse_move: The customized event handler of mousemove on the component in this group
+            on_mouse_over: The customized event handler of mouseover on the component in this group
+            on_mouse_out: The customized event handler of mouseout on the component in this group
+            on_mouse_enter: The customized event handler of mouseenter on the component in this group
+            on_mouse_leave: The customized event handler of mouseleave on the component in this group
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1397,6 +1458,14 @@ class Scatter(Recharts):
             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"
+            on_click: The customized event handler of click on the component in this group
+            on_mouse_down: The customized event handler of mousedown on the component in this group
+            on_mouse_up: The customized event handler of mouseup on the component in this group
+            on_mouse_move: The customized event handler of mousemove on the component in this group
+            on_mouse_over: The customized event handler of mouseover on the component in this group
+            on_mouse_out: The customized event handler of mouseout on the component in this group
+            on_mouse_enter: The customized event handler of mouseenter on the component in this group
+            on_mouse_leave: The customized event handler of mouseleave on the component in this group
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1503,6 +1572,16 @@ class Funnel(Recharts):
             animation_easing: The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'. Default "ease"
             stroke: Stroke color. Default: rx.color("gray", 3)
             trapezoids: The coordinates of all the trapezoids in the funnel, usually calculated internally.
+            on_animation_start: The customized event handler of animation start
+            on_animation_end: The customized event handler of animation end
+            on_click: The customized event handler of click on the component in this group
+            on_mouse_down: The customized event handler of mousedown on the component in this group
+            on_mouse_up: The customized event handler of mouseup on the component in this group
+            on_mouse_move: The customized event handler of mousemove on the component in this group
+            on_mouse_over: The customized event handler of mouseover on the component in this group
+            on_mouse_out: The customized event handler of mouseout on the component in this group
+            on_mouse_enter: The customized event handler of mouseenter on the component in this group
+            on_mouse_leave: The customized event handler of mouseleave on the component in this group
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -1757,6 +1836,14 @@ class ReferenceDot(Reference):
             r: The radius of dot.
             fill: The color of the area fill.
             stroke: The color of the line stroke.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_down: The customized event handler of mousedown on the component in this chart
+            on_mouse_up: The customized event handler of mouseup on the component in this chart
+            on_mouse_over: The customized event handler of mouseover on the component in this chart
+            on_mouse_out: The customized event handler of mouseout on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             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"

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, empty_event
+from reflex.event import EventHandler, no_args_event_spec
 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[empty_event]
+    on_click: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseenter on the component in this chart
-    on_mouse_enter: EventHandler[empty_event]
+    on_mouse_enter: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousemove on the component in this chart
-    on_mouse_move: EventHandler[empty_event]
+    on_mouse_move: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseleave on the component in this chart
-    on_mouse_leave: EventHandler[empty_event]
+    on_mouse_leave: EventHandler[no_args_event_spec]
 
     @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[empty_event]
+    on_mouse_down: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseup on the sectors in this group
-    on_mouse_up: EventHandler[empty_event]
+    on_mouse_up: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseover on the sectors in this group
-    on_mouse_over: EventHandler[empty_event]
+    on_mouse_over: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseout on the sectors in this group
-    on_mouse_out: EventHandler[empty_event]
+    on_mouse_out: EventHandler[no_args_event_spec]
 
 
 class RadarChart(ChartBase):
@@ -330,9 +330,9 @@ class RadarChart(ChartBase):
             A dict mapping the event trigger to the var that is passed to the handler.
         """
         return {
-            EventTriggers.ON_CLICK: empty_event,
+            EventTriggers.ON_CLICK: no_args_event_spec,
-            EventTriggers.ON_MOUSE_ENTER: empty_event,
+            EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_LEAVE: empty_event,
+            EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,
         }
 
 
@@ -419,14 +419,14 @@ class ScatterChart(ChartBase):
             A dict mapping the event trigger to the var that is passed to the handler.
         """
         return {
-            EventTriggers.ON_CLICK: empty_event,
+            EventTriggers.ON_CLICK: no_args_event_spec,
-            EventTriggers.ON_MOUSE_DOWN: empty_event,
+            EventTriggers.ON_MOUSE_DOWN: no_args_event_spec,
-            EventTriggers.ON_MOUSE_UP: empty_event,
+            EventTriggers.ON_MOUSE_UP: no_args_event_spec,
-            EventTriggers.ON_MOUSE_MOVE: empty_event,
+            EventTriggers.ON_MOUSE_MOVE: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OVER: empty_event,
+            EventTriggers.ON_MOUSE_OVER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OUT: empty_event,
+            EventTriggers.ON_MOUSE_OUT: no_args_event_spec,
-            EventTriggers.ON_MOUSE_ENTER: empty_event,
+            EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_LEAVE: empty_event,
+            EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,
         }
 
 
@@ -488,10 +488,10 @@ class Treemap(RechartsCharts):
     animation_easing: Var[LiteralAnimationEasing]
 
     # The customized event handler of animation start
-    on_animation_start: EventHandler[empty_event]
+    on_animation_start: EventHandler[no_args_event_spec]
 
     # The customized event handler of animation end
-    on_animation_end: EventHandler[empty_event]
+    on_animation_end: EventHandler[no_args_event_spec]
 
     @classmethod
     def create(cls, *children, **props) -> Component:

reflex/components/recharts/charts.pyi

@@ -51,6 +51,10 @@ class ChartBase(RechartsCharts):
             *children: The children of the chart component.
             width: The width of chart container. String or Integer
             height: The height of chart container.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -125,6 +129,10 @@ class CategoricalChartBase(ChartBase):
             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.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -207,6 +215,10 @@ class AreaChart(CategoricalChartBase):
             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.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -291,6 +303,10 @@ class BarChart(CategoricalChartBase):
             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.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -365,6 +381,10 @@ class LineChart(CategoricalChartBase):
             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.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -455,6 +475,10 @@ class ComposedChart(CategoricalChartBase):
             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.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -505,8 +529,16 @@ class PieChart(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}.
+            on_mouse_down: The customized event handler of mousedown on the sectors in this group
+            on_mouse_up: The customized event handler of mouseup on the sectors in this group
+            on_mouse_over: The customized event handler of mouseover on the sectors in this group
+            on_mouse_out: The customized event handler of mouseout on the sectors in this group
             width: The width of chart container. String or Integer
             height: The height of chart container.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -562,6 +594,9 @@ class RadarChart(ChartBase):
             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.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -634,6 +669,10 @@ class RadialBarChart(ChartBase):
             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.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -680,6 +719,10 @@ class ScatterChart(ChartBase):
             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.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -736,6 +779,10 @@ class FunnelChart(ChartBase):
             stroke: The stroke color of each bar. String | Object
             width: The width of chart container. String or Integer
             height: The height of chart container.
+            on_click: The customized event handler of click on the component in this chart
+            on_mouse_enter: The customized event handler of mouseenter on the component in this chart
+            on_mouse_move: The customized event handler of mousemove on the component in this chart
+            on_mouse_leave: The customized event handler of mouseleave on the component in this chart
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -809,6 +856,8 @@ class Treemap(RechartsCharts):
             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"
+            on_animation_start: The customized event handler of animation start
+            on_animation_end: The customized event handler of animation end
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

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, empty_event
+from reflex.event import EventHandler, no_args_event_spec
 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[empty_event]
+    on_resize: EventHandler[no_args_event_spec]
 
     # 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[empty_event]
+    on_click: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousedown on the items in this group
-    on_mouse_down: EventHandler[empty_event]
+    on_mouse_down: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseup on the items in this group
-    on_mouse_up: EventHandler[empty_event]
+    on_mouse_up: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousemove on the items in this group
-    on_mouse_move: EventHandler[empty_event]
+    on_mouse_move: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseover on the items in this group
-    on_mouse_over: EventHandler[empty_event]
+    on_mouse_over: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseout on the items in this group
-    on_mouse_out: EventHandler[empty_event]
+    on_mouse_out: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseenter on the items in this group
-    on_mouse_enter: EventHandler[empty_event]
+    on_mouse_enter: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseleave on the items in this group
-    on_mouse_leave: EventHandler[empty_event]
+    on_mouse_leave: EventHandler[no_args_event_spec]
 
 
 class GraphingTooltip(Recharts):

reflex/components/recharts/general.pyi

@@ -61,6 +61,7 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
             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. Default: 0
+            on_resize: If specified provides a callback providing the updated chart width and height values.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -175,6 +176,14 @@ class Legend(Recharts):
             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.
+            on_click: The customized event handler of click on the items in this group
+            on_mouse_down: The customized event handler of mousedown on the items in this group
+            on_mouse_up: The customized event handler of mouseup on the items in this group
+            on_mouse_move: The customized event handler of mousemove on the items in this group
+            on_mouse_over: The customized event handler of mouseover on the items in this group
+            on_mouse_out: The customized event handler of mouseout on the items in this group
+            on_mouse_enter: The customized event handler of mouseenter on the items in this group
+            on_mouse_leave: The customized event handler of mouseleave on the items in this group
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

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, empty_event
+from reflex.event import EventHandler, no_args_event_spec
 from reflex.vars.base import LiteralVar, Var
 
 from .recharts import (
@@ -103,14 +103,14 @@ class Pie(Recharts):
             A dict mapping the event trigger to the var that is passed to the handler.
         """
         return {
-            EventTriggers.ON_ANIMATION_START: empty_event,
+            EventTriggers.ON_ANIMATION_START: no_args_event_spec,
-            EventTriggers.ON_ANIMATION_END: empty_event,
+            EventTriggers.ON_ANIMATION_END: no_args_event_spec,
-            EventTriggers.ON_CLICK: empty_event,
+            EventTriggers.ON_CLICK: no_args_event_spec,
-            EventTriggers.ON_MOUSE_MOVE: empty_event,
+            EventTriggers.ON_MOUSE_MOVE: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OVER: empty_event,
+            EventTriggers.ON_MOUSE_OVER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OUT: empty_event,
+            EventTriggers.ON_MOUSE_OUT: no_args_event_spec,
-            EventTriggers.ON_MOUSE_ENTER: empty_event,
+            EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_LEAVE: empty_event,
+            EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,
         }
 
 
@@ -167,8 +167,8 @@ class Radar(Recharts):
             A dict mapping the event trigger to the var that is passed to the handler.
         """
         return {
-            EventTriggers.ON_ANIMATION_START: empty_event,
+            EventTriggers.ON_ANIMATION_START: no_args_event_spec,
-            EventTriggers.ON_ANIMATION_END: empty_event,
+            EventTriggers.ON_ANIMATION_END: no_args_event_spec,
         }
 
 
@@ -219,14 +219,14 @@ class RadialBar(Recharts):
             A dict mapping the event trigger to the var that is passed to the handler.
         """
         return {
-            EventTriggers.ON_CLICK: empty_event,
+            EventTriggers.ON_CLICK: no_args_event_spec,
-            EventTriggers.ON_MOUSE_MOVE: empty_event,
+            EventTriggers.ON_MOUSE_MOVE: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OVER: empty_event,
+            EventTriggers.ON_MOUSE_OVER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OUT: empty_event,
+            EventTriggers.ON_MOUSE_OUT: no_args_event_spec,
-            EventTriggers.ON_MOUSE_ENTER: empty_event,
+            EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_LEAVE: empty_event,
+            EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,
-            EventTriggers.ON_ANIMATION_START: empty_event,
+            EventTriggers.ON_ANIMATION_START: no_args_event_spec,
-            EventTriggers.ON_ANIMATION_END: empty_event,
+            EventTriggers.ON_ANIMATION_END: no_args_event_spec,
         }
 
 
@@ -277,28 +277,28 @@ class PolarAngleAxis(Recharts):
     _valid_children: List[str] = ["Label"]
 
     # The customized event handler of click on the ticks of this axis.
-    on_click: EventHandler[empty_event]
+    on_click: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousedown on the the ticks of this axis.
-    on_mouse_down: EventHandler[empty_event]
+    on_mouse_down: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseup on the ticks of this axis.
-    on_mouse_up: EventHandler[empty_event]
+    on_mouse_up: EventHandler[no_args_event_spec]
 
     # The customized event handler of mousemove on the ticks of this axis.
-    on_mouse_move: EventHandler[empty_event]
+    on_mouse_move: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseover on the ticks of this axis.
-    on_mouse_over: EventHandler[empty_event]
+    on_mouse_over: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseout on the ticks of this axis.
-    on_mouse_out: EventHandler[empty_event]
+    on_mouse_out: EventHandler[no_args_event_spec]
 
     # The customized event handler of moustenter on the ticks of this axis.
-    on_mouse_enter: EventHandler[empty_event]
+    on_mouse_enter: EventHandler[no_args_event_spec]
 
     # The customized event handler of mouseleave on the ticks of this axis.
-    on_mouse_leave: EventHandler[empty_event]
+    on_mouse_leave: EventHandler[no_args_event_spec]
 
 
 class PolarGrid(Recharts):
@@ -392,12 +392,12 @@ class PolarRadiusAxis(Recharts):
             A dict mapping the event trigger to the var that is passed to the handler.
         """
         return {
-            EventTriggers.ON_CLICK: empty_event,
+            EventTriggers.ON_CLICK: no_args_event_spec,
-            EventTriggers.ON_MOUSE_MOVE: empty_event,
+            EventTriggers.ON_MOUSE_MOVE: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OVER: empty_event,
+            EventTriggers.ON_MOUSE_OVER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_OUT: empty_event,
+            EventTriggers.ON_MOUSE_OUT: no_args_event_spec,
-            EventTriggers.ON_MOUSE_ENTER: empty_event,
+            EventTriggers.ON_MOUSE_ENTER: no_args_event_spec,
-            EventTriggers.ON_MOUSE_LEAVE: empty_event,
+            EventTriggers.ON_MOUSE_LEAVE: no_args_event_spec,
         }
 
 

reflex/components/recharts/polar.pyi

@@ -391,6 +391,14 @@ class PolarAngleAxis(Recharts):
             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
+            on_click: The customized event handler of click on the ticks of this axis.
+            on_mouse_down: The customized event handler of mousedown on the the ticks of this axis.
+            on_mouse_up: The customized event handler of mouseup on the ticks of this axis.
+            on_mouse_move: The customized event handler of mousemove on the ticks of this axis.
+            on_mouse_over: The customized event handler of mouseover on the ticks of this axis.
+            on_mouse_out: The customized event handler of mouseout on the ticks of this axis.
+            on_mouse_enter: The customized event handler of moustenter on the ticks of this axis.
+            on_mouse_leave: The customized event handler of mouseleave on the ticks of this axis.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/sonner/toast.py

@@ -4,16 +4,11 @@ from __future__ import annotations
 
 from typing import Any, ClassVar, Literal, Optional, Union
 
-from pydantic import ValidationError
-
 from reflex.base import Base
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.lucide.icon import Icon
-from reflex.components.props import PropsBase
+from reflex.components.props import NoExtrasAllowedProps, PropsBase
-from reflex.event import (
+from reflex.event import EventSpec, run_script
-    EventSpec,
-    call_script,
-)
 from reflex.style import Style, resolved_color_mode
 from reflex.utils import format
 from reflex.utils.imports import ImportVar
@@ -72,7 +67,7 @@ def _toast_callback_signature(toast: Var) -> list[Var]:
     ]
 
 
-class ToastProps(PropsBase):
+class ToastProps(PropsBase, NoExtrasAllowedProps):
     """Props for the toast component."""
 
     # Toast's title, renders above the description.
@@ -132,24 +127,6 @@ class ToastProps(PropsBase):
     # Function that gets called when the toast disappears automatically after it's timeout (duration` prop).
     on_auto_close: Optional[Any]
 
-    def __init__(self, **kwargs):
-        """Initialize the props.
-
-        Args:
-            kwargs: Kwargs to initialize the props.
-
-        Raises:
-            ValueError: If invalid props are passed on instantiation.
-        """
-        try:
-            super().__init__(**kwargs)
-        except ValidationError as e:
-            invalid_fields = ", ".join([error["loc"][0] for error in e.errors()])  # type: ignore
-            supported_props_str = ", ".join(f'"{field}"' for field in self.get_fields())
-            raise ValueError(
-                f"Invalid prop(s) {invalid_fields} for rx.toast. Supported props are {supported_props_str}"
-            ) from None
-
     def dict(self, *args, **kwargs) -> dict[str, Any]:
         """Convert the object to a dictionary.
 
@@ -181,13 +158,6 @@ class ToastProps(PropsBase):
             )
         return d
 
-    class Config:
-        """Pydantic config."""
-
-        arbitrary_types_allowed = True
-        use_enum_values = True
-        extra = "forbid"
-
 
 class Toaster(Component):
     """A Toaster Component for displaying toast notifications."""
@@ -281,13 +251,13 @@ class Toaster(Component):
         if message == "" and ("title" not in props or "description" not in props):
             raise ValueError("Toast message or title or description must be provided.")
         if props:
-            args = LiteralVar.create(ToastProps(**props))
+            args = LiteralVar.create(ToastProps(component_name="rx.toast", **props))  # type: ignore
             toast = f"{toast_command}(`{message}`, {str(args)})"
         else:
             toast = f"{toast_command}(`{message}`)"
 
         toast_action = Var(_js_expr=toast)
-        return call_script(toast_action)
+        return run_script(toast_action)
 
     @staticmethod
     def toast_info(message: str = "", **kwargs):
@@ -363,7 +333,7 @@ class Toaster(Component):
         dismiss_action = Var(
             _js_expr=dismiss, _var_data=VarData.merge(dismiss_var_data)
         )
-        return call_script(dismiss_action)
+        return run_script(dismiss_action)
 
     @classmethod
     def create(cls, *children, **props) -> Component:

reflex/components/sonner/toast.pyi

@@ -8,7 +8,7 @@ from typing import Any, ClassVar, Dict, Literal, Optional, Union, overload
 from reflex.base import Base
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.lucide.icon import Icon
-from reflex.components.props import PropsBase
+from reflex.components.props import NoExtrasAllowedProps, PropsBase
 from reflex.event import EventSpec, EventType
 from reflex.style import Style
 from reflex.utils.serializers import serializer
@@ -31,7 +31,7 @@ class ToastAction(Base):
 @serializer
 def serialize_action(action: ToastAction) -> dict: ...
 
-class ToastProps(PropsBase):
+class ToastProps(PropsBase, NoExtrasAllowedProps):
     title: Optional[Union[str, Var]]
     description: Optional[Union[str, Var]]
     close_button: Optional[bool]
@@ -52,11 +52,6 @@ class ToastProps(PropsBase):
 
     def dict(self, *args, **kwargs) -> dict[str, Any]: ...
 
-    class Config:
-        arbitrary_types_allowed = True
-        use_enum_values = True
-        extra = "forbid"
-
 class Toaster(Component):
     is_used: ClassVar[bool] = False
 

reflex/components/suneditor/editor.py

@@ -7,7 +7,7 @@ from typing import Dict, List, Literal, Optional, Tuple, Union
 
 from reflex.base import Base
 from reflex.components.component import Component, NoSSRComponent
-from reflex.event import EventHandler, empty_event, identity_event
+from reflex.event import EventHandler, no_args_event_spec, passthrough_event_spec
 from reflex.utils.format import to_camel_case
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.vars.base import Var
@@ -207,31 +207,31 @@ class Editor(NoSSRComponent):
     disable_toolbar: Var[bool]
 
     # Fired when the editor content changes.
-    on_change: EventHandler[identity_event(str)]
+    on_change: EventHandler[passthrough_event_spec(str)]
 
     # Fired when the something is inputted in the editor.
-    on_input: EventHandler[empty_event]
+    on_input: EventHandler[no_args_event_spec]
 
     # Fired when the editor loses focus.
     on_blur: EventHandler[on_blur_spec]
 
     # Fired when the editor is loaded.
-    on_load: EventHandler[identity_event(bool)]
+    on_load: EventHandler[passthrough_event_spec(bool)]
 
     # Fired when the editor content is copied.
-    on_copy: EventHandler[empty_event]
+    on_copy: EventHandler[no_args_event_spec]
 
     # Fired when the editor content is cut.
-    on_cut: EventHandler[empty_event]
+    on_cut: EventHandler[no_args_event_spec]
 
     # Fired when the editor content is pasted.
     on_paste: EventHandler[on_paste_spec]
 
     # Fired when the code view is toggled.
-    toggle_code_view: EventHandler[identity_event(bool)]
+    toggle_code_view: EventHandler[passthrough_event_spec(bool)]
 
     # Fired when the full screen mode is toggled.
-    toggle_full_screen: EventHandler[identity_event(bool)]
+    toggle_full_screen: EventHandler[passthrough_event_spec(bool)]
 
     def add_imports(self) -> ImportDict:
         """Add imports for the Editor component.

reflex/components/suneditor/editor.pyi

@@ -172,6 +172,15 @@ class Editor(NoSSRComponent):
             hide: Hide the editor  default: False
             hide_toolbar: Hide the editor toolbar  default: False
             disable_toolbar: Disable the editor toolbar  default: False
+            on_change: Fired when the editor content changes.
+            on_input: Fired when the something is inputted in the editor.
+            on_blur: Fired when the editor loses focus.
+            on_load: Fired when the editor is loaded.
+            on_copy: Fired when the editor content is copied.
+            on_cut: Fired when the editor content is cut.
+            on_paste: Fired when the editor content is pasted.
+            toggle_code_view: Fired when the code view is toggled.
+            toggle_full_screen: Fired when the full screen mode is toggled.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/tags/tag.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 import dataclasses
-from typing import Any, Dict, List, Optional, Tuple, Union
+from typing import Any, Dict, List, Optional, Union
 
 from reflex.event import EventChain
 from reflex.utils import format, types
@@ -23,9 +23,6 @@ class Tag:
     # The inner contents of the tag.
     contents: str = ""
 
-    # Args to pass to the tag.
-    args: Optional[Tuple[str, ...]] = None
-
     # Special props that aren't key value pairs.
     special_props: List[Var] = dataclasses.field(default_factory=list)
 

reflex/event.py

@@ -29,8 +29,12 @@ from typing_extensions import ParamSpec, Protocol, get_args, get_origin
 
 from reflex import constants
 from reflex.utils import console, format
-from reflex.utils.exceptions import EventFnArgMismatch, EventHandlerArgMismatch
+from reflex.utils.exceptions import (
-from reflex.utils.types import ArgsSpec, GenericType
+    EventFnArgMismatch,
+    EventHandlerArgMismatch,
+    EventHandlerArgTypeMismatch,
+)
+from reflex.utils.types import ArgsSpec, GenericType, typehint_issubclass
 from reflex.vars import VarData
 from reflex.vars.base import (
     LiteralVar,
@@ -83,7 +87,7 @@ class Event:
 BACKGROUND_TASK_MARKER = "_reflex_background_task"
 
 
-def background(fn):
+def background(fn, *, __internal_reflex_call: bool = False):
     """Decorator to mark event handler as running in the background.
 
     Args:
@@ -96,6 +100,13 @@ def background(fn):
     Raises:
         TypeError: If the function is not a coroutine function or async generator.
     """
+    if not __internal_reflex_call:
+        console.deprecate(
+            "background-decorator",
+            "Use `rx.event(background=True)` instead.",
+            "0.6.5",
+            "0.7.0",
+        )
     if not inspect.iscoroutinefunction(fn) and not inspect.isasyncgenfunction(fn):
         raise TypeError("Background task must be async function or generator.")
     setattr(fn, BACKGROUND_TASK_MARKER, True)
@@ -394,7 +405,9 @@ class EventChain(EventActionsMixin):
         default_factory=list
     )
 
-    args_spec: Optional[Callable] = dataclasses.field(default=None)
+    args_spec: Optional[Union[Callable, Sequence[Callable]]] = dataclasses.field(
+        default=None
+    )
 
     invocation: Optional[Var] = dataclasses.field(default=None)
 
@@ -453,7 +466,7 @@ def key_event(e: Var[JavasciptKeyboardEvent]) -> Tuple[Var[str]]:
     return (e.key,)
 
 
-def empty_event() -> Tuple[()]:
+def no_args_event_spec() -> Tuple[()]:
     """Empty event handler.
 
     Returns:
@@ -463,43 +476,14 @@ def empty_event() -> Tuple[()]:
 
 
 # These chains can be used for their side effects when no other events are desired.
-stop_propagation = EventChain(events=[], args_spec=empty_event).stop_propagation
+stop_propagation = EventChain(events=[], args_spec=no_args_event_spec).stop_propagation
-prevent_default = EventChain(events=[], args_spec=empty_event).prevent_default
+prevent_default = EventChain(events=[], args_spec=no_args_event_spec).prevent_default
 
 
 T = TypeVar("T")
 U = TypeVar("U")
 
 
-# def identity_event(event_type: Type[T]) -> Callable[[Var[T]], Tuple[Var[T]]]:
-#     """A helper function that returns the input event as output.
-
-#     Args:
-#         event_type: The type of the event.
-
-#     Returns:
-#         A function that returns the input event as output.
-#     """
-
-#     def inner(ev: Var[T]) -> Tuple[Var[T]]:
-#         return (ev,)
-
-#     inner.__signature__ = inspect.signature(inner).replace(  # type: ignore
-#         parameters=[
-#             inspect.Parameter(
-#                 "ev",
-#                 kind=inspect.Parameter.POSITIONAL_OR_KEYWORD,
-#                 annotation=Var[event_type],
-#             )
-#         ],
-#         return_annotation=Tuple[Var[event_type]],
-#     )
-#     inner.__annotations__["ev"] = Var[event_type]
-#     inner.__annotations__["return"] = Tuple[Var[event_type]]
-
-#     return inner
-
-
 class IdentityEventReturn(Generic[T], Protocol):
     """Protocol for an identity event return."""
 
@@ -516,20 +500,22 @@ class IdentityEventReturn(Generic[T], Protocol):
 
 
 @overload
-def identity_event(event_type: Type[T], /) -> Callable[[Var[T]], Tuple[Var[T]]]: ...  # type: ignore
+def passthrough_event_spec(
+    event_type: Type[T], /
+) -> Callable[[Var[T]], Tuple[Var[T]]]: ...  # type: ignore
 
 
 @overload
-def identity_event(
+def passthrough_event_spec(
     event_type_1: Type[T], event_type2: Type[U], /
 ) -> Callable[[Var[T], Var[U]], Tuple[Var[T], Var[U]]]: ...
 
 
 @overload
-def identity_event(*event_types: Type[T]) -> IdentityEventReturn[T]: ...
+def passthrough_event_spec(*event_types: Type[T]) -> IdentityEventReturn[T]: ...
 
 
-def identity_event(*event_types: Type[T]) -> IdentityEventReturn[T]:  # type: ignore
+def passthrough_event_spec(*event_types: Type[T]) -> IdentityEventReturn[T]:  # type: ignore
     """A helper function that returns the input event as output.
 
     Args:
@@ -720,7 +706,16 @@ def console_log(message: str | Var[str]) -> EventSpec:
     Returns:
         An event to log the message.
     """
-    return server_side("_console", get_fn_signature(console_log), message=message)
+    return run_script(Var("console").to(dict).log.to(FunctionVar).call(message))
+
+
+def noop() -> EventSpec:
+    """Do nothing.
+
+    Returns:
+        An event to do nothing.
+    """
+    return run_script(Var.create(None))
 
 
 def back() -> EventSpec:
@@ -729,7 +724,9 @@ def back() -> EventSpec:
     Returns:
         An event to go back one page.
     """
-    return call_script("window.history.back()")
+    return run_script(
+        Var("window").to(dict).history.to(dict).back.to(FunctionVar).call()
+    )
 
 
 def window_alert(message: str | Var[str]) -> EventSpec:
@@ -741,7 +738,7 @@ def window_alert(message: str | Var[str]) -> EventSpec:
     Returns:
         An event to alert the message.
     """
-    return server_side("_alert", get_fn_signature(window_alert), message=message)
+    return run_script(Var("window").to(dict).alert.to(FunctionVar).call(message))
 
 
 def set_focus(ref: str) -> EventSpec:
@@ -760,18 +757,25 @@ def set_focus(ref: str) -> EventSpec:
     )
 
 
-def scroll_to(elem_id: str) -> EventSpec:
+def scroll_to(elem_id: str, align_to_top: bool | Var[bool] = True) -> EventSpec:
     """Select the id of a html element for scrolling into view.
 
     Args:
-        elem_id: the id of the element
+        elem_id: The id of the element to scroll to.
+        align_to_top: Whether to scroll to the top (True) or bottom (False) of the element.
 
     Returns:
         An EventSpec to scroll the page to the selected element.
     """
-    js_code = f"document.getElementById('{elem_id}').scrollIntoView();"
+    get_element_by_id = FunctionStringVar.create("document.getElementById")
 
-    return call_script(js_code)
+    return run_script(
+        get_element_by_id(elem_id)
+        .call(elem_id)
+        .to(ObjectVar)
+        .scrollIntoView.to(FunctionVar)
+        .call(align_to_top),
+    )
 
 
 def set_value(ref: str, value: Any) -> EventSpec:
@@ -877,10 +881,12 @@ def set_clipboard(content: str) -> EventSpec:
     Returns:
         EventSpec: An event to set some content in the clipboard.
     """
-    return server_side(
+    return run_script(
-        "_set_clipboard",
+        Var("navigator")
-        get_fn_signature(set_clipboard),
+        .to(dict)
-        content=content,
+        .clipboard.to(dict)
+        .writeText.to(FunctionVar)
+        .call(content)
     )
 
 
@@ -967,13 +973,7 @@ def _callback_arg_spec(eval_result):
 
 def call_script(
     javascript_code: str | Var[str],
-    callback: (
+    callback: EventType | None = None,
-        EventSpec
-        | EventHandler
-        | Callable
-        | List[EventSpec | EventHandler | Callable]
-        | None
-    ) = None,
 ) -> EventSpec:
     """Create an event handler that executes arbitrary javascript code.
 
@@ -987,12 +987,10 @@ def call_script(
     callback_kwargs = {}
     if callback is not None:
         callback_kwargs = {
-            "callback": str(
+            "callback": format.format_queue_events(
-                format.format_queue_events(
                 callback,
                 args_spec=lambda result: [result],
-                ),
+            )._js_expr,
-            ),
         }
     if isinstance(javascript_code, str):
         # When there is VarData, include it and eval the JS code inline on the client.
@@ -1012,6 +1010,62 @@ def call_script(
     )
 
 
+def call_function(
+    javascript_code: str | Var,
+    callback: EventType | None = None,
+) -> EventSpec:
+    """Create an event handler that executes arbitrary javascript code.
+
+    Args:
+        javascript_code: The code to execute.
+        callback: EventHandler that will receive the result of evaluating the javascript code.
+
+    Returns:
+        EventSpec: An event that will execute the client side javascript.
+    """
+    callback_kwargs = {}
+    if callback is not None:
+        callback_kwargs = {
+            "callback": format.format_queue_events(
+                callback,
+                args_spec=lambda result: [result],
+            ),
+        }
+
+    javascript_code = (
+        Var(javascript_code) if isinstance(javascript_code, str) else javascript_code
+    )
+
+    return server_side(
+        "_call_function",
+        get_fn_signature(call_function),
+        function=javascript_code,
+        **callback_kwargs,
+    )
+
+
+def run_script(
+    javascript_code: str | Var,
+    callback: EventType | None = None,
+) -> EventSpec:
+    """Create an event handler that executes arbitrary javascript code.
+
+    Args:
+        javascript_code: The code to execute.
+        callback: EventHandler that will receive the result of evaluating the javascript code.
+
+    Returns:
+        EventSpec: An event that will execute the client side javascript.
+    """
+    javascript_code = (
+        Var(javascript_code) if isinstance(javascript_code, str) else javascript_code
+    )
+
+    return call_function(
+        ArgsFunctionOperation.create(tuple(), javascript_code), callback
+    )
+
+
 def get_event(state, event):
     """Get the event from the given state.
 
@@ -1039,7 +1093,8 @@ def get_hydrate_event(state) -> str:
 
 def call_event_handler(
     event_handler: EventHandler | EventSpec,
-    arg_spec: ArgsSpec,
+    arg_spec: ArgsSpec | Sequence[ArgsSpec],
+    key: Optional[str] = None,
 ) -> EventSpec:
     """Call an event handler to get the event spec.
 
@@ -1050,12 +1105,16 @@ def call_event_handler(
     Args:
         event_handler: The event handler.
         arg_spec: The lambda that define the argument(s) to pass to the event handler.
+        key: The key to pass to the event handler.
 
     Raises:
         EventHandlerArgMismatch: if number of arguments expected by event_handler doesn't match the spec.
 
     Returns:
         The event spec from calling the event handler.
+
+    # noqa: DAR401 failure
+
     """
     parsed_args = parse_args_spec(arg_spec)  # type: ignore
 
@@ -1063,19 +1122,113 @@ def call_event_handler(
         # Handle partial application of EventSpec args
         return event_handler.add_args(*parsed_args)
 
-    args = inspect.getfullargspec(event_handler.fn).args
+    provided_callback_fullspec = inspect.getfullargspec(event_handler.fn)
-    n_args = len(args) - 1  # subtract 1 for bound self arg
+
-    if n_args == len(parsed_args):
+    provided_callback_n_args = (
-        return event_handler(*parsed_args)  # type: ignore
+        len(provided_callback_fullspec.args) - 1
-    else:
+    )  # subtract 1 for bound self arg
+
+    if provided_callback_n_args != len(parsed_args):
         raise EventHandlerArgMismatch(
             "The number of arguments accepted by "
-            f"{event_handler.fn.__qualname__} ({n_args}) "
+            f"{event_handler.fn.__qualname__} ({provided_callback_n_args}) "
             "does not match the arguments passed by the event trigger: "
             f"{[str(v) for v in parsed_args]}\n"
             "See https://reflex.dev/docs/events/event-arguments/"
         )
 
+    all_arg_spec = [arg_spec] if not isinstance(arg_spec, Sequence) else arg_spec
+
+    event_spec_return_types = list(
+        filter(
+            lambda event_spec_return_type: event_spec_return_type is not None
+            and get_origin(event_spec_return_type) is tuple,
+            (get_type_hints(arg_spec).get("return", None) for arg_spec in all_arg_spec),
+        )
+    )
+
+    if event_spec_return_types:
+        failures = []
+
+        for event_spec_index, event_spec_return_type in enumerate(
+            event_spec_return_types
+        ):
+            args = get_args(event_spec_return_type)
+
+            args_types_without_vars = [
+                arg if get_origin(arg) is not Var else get_args(arg)[0] for arg in args
+            ]
+
+            try:
+                type_hints_of_provided_callback = get_type_hints(event_handler.fn)
+            except NameError:
+                type_hints_of_provided_callback = {}
+
+            failed_type_check = False
+
+            # check that args of event handler are matching the spec if type hints are provided
+            for i, arg in enumerate(provided_callback_fullspec.args[1:]):
+                if arg not in type_hints_of_provided_callback:
+                    continue
+
+                try:
+                    compare_result = typehint_issubclass(
+                        args_types_without_vars[i], type_hints_of_provided_callback[arg]
+                    )
+                except TypeError:
+                    # TODO: In 0.7.0, remove this block and raise the exception
+                    # raise TypeError(
+                    #     f"Could not compare types {args_types_without_vars[i]} and {type_hints_of_provided_callback[arg]} for argument {arg} of {event_handler.fn.__qualname__} provided for {key}."
+                    # ) from e
+                    console.warn(
+                        f"Could not compare types {args_types_without_vars[i]} and {type_hints_of_provided_callback[arg]} for argument {arg} of {event_handler.fn.__qualname__} provided for {key}."
+                    )
+                    compare_result = False
+
+                if compare_result:
+                    continue
+                else:
+                    failure = EventHandlerArgTypeMismatch(
+                        f"Event handler {key} expects {args_types_without_vars[i]} for argument {arg} but got {type_hints_of_provided_callback[arg]} as annotated in {event_handler.fn.__qualname__} instead."
+                    )
+                    failures.append(failure)
+                    failed_type_check = True
+                    break
+
+            if not failed_type_check:
+                if event_spec_index:
+                    args = get_args(event_spec_return_types[0])
+
+                    args_types_without_vars = [
+                        arg if get_origin(arg) is not Var else get_args(arg)[0]
+                        for arg in args
+                    ]
+
+                    expect_string = ", ".join(
+                        repr(arg) for arg in args_types_without_vars
+                    ).replace("[", "\\[")
+
+                    given_string = ", ".join(
+                        repr(type_hints_of_provided_callback.get(arg, Any))
+                        for arg in provided_callback_fullspec.args[1:]
+                    ).replace("[", "\\[")
+
+                    console.warn(
+                        f"Event handler {key} expects ({expect_string}) -> () but got ({given_string}) -> () as annotated in {event_handler.fn.__qualname__} instead. "
+                        f"This may lead to unexpected behavior but is intentionally ignored for {key}."
+                    )
+                return event_handler(*parsed_args)
+
+        if failures:
+            console.deprecate(
+                "Mismatched event handler argument types",
+                "\n".join([str(f) for f in failures]),
+                "0.6.5",
+                "0.7.0",
+            )
+
+    return event_handler(*parsed_args)  # type: ignore
+
 
 def unwrap_var_annotation(annotation: GenericType):
     """Unwrap a Var annotation or return it as is if it's not Var[X].
@@ -1114,7 +1267,7 @@ def resolve_annotation(annotations: dict[str, Any], arg_name: str):
     return annotation
 
 
-def parse_args_spec(arg_spec: ArgsSpec):
+def parse_args_spec(arg_spec: ArgsSpec | Sequence[ArgsSpec]):
     """Parse the args provided in the ArgsSpec of an event trigger.
 
     Args:
@@ -1123,6 +1276,8 @@ def parse_args_spec(arg_spec: ArgsSpec):
     Returns:
         The parsed args.
     """
+    # if there's multiple, the first is the default
+    arg_spec = arg_spec[0] if isinstance(arg_spec, Sequence) else arg_spec
     spec = inspect.getfullargspec(arg_spec)
     annotations = get_type_hints(arg_spec)
 
@@ -1138,13 +1293,18 @@ def parse_args_spec(arg_spec: ArgsSpec):
     )
 
 
-def check_fn_match_arg_spec(fn: Callable, arg_spec: ArgsSpec) -> List[Var]:
+def check_fn_match_arg_spec(
+    fn: Callable,
+    arg_spec: ArgsSpec,
+    key: Optional[str] = None,
+) -> List[Var]:
     """Ensures that the function signature matches the passed argument specification
     or raises an EventFnArgMismatch if they do not.
 
     Args:
         fn: The function to be validated.
         arg_spec: The argument specification for the event trigger.
+        key: The key to pass to the event handler.
 
     Returns:
         The parsed arguments from the argument specification.
@@ -1170,7 +1330,11 @@ def check_fn_match_arg_spec(fn: Callable, arg_spec: ArgsSpec) -> List[Var]:
     return parsed_args
 
 
-def call_event_fn(fn: Callable, arg_spec: ArgsSpec) -> list[EventSpec] | Var:
+def call_event_fn(
+    fn: Callable,
+    arg_spec: ArgsSpec,
+    key: Optional[str] = None,
+) -> list[EventSpec] | Var:
     """Call a function to a list of event specs.
 
     The function should return a single EventSpec, a list of EventSpecs, or a
@@ -1179,6 +1343,7 @@ def call_event_fn(fn: Callable, arg_spec: ArgsSpec) -> list[EventSpec] | Var:
     Args:
         fn: The function to call.
         arg_spec: The argument spec for the event trigger.
+        key: The key to pass to the event handler.
 
     Returns:
         The event specs from calling the function or a Var.
@@ -1191,7 +1356,7 @@ def call_event_fn(fn: Callable, arg_spec: ArgsSpec) -> list[EventSpec] | Var:
     from reflex.utils.exceptions import EventHandlerValueError
 
     # Check that fn signature matches arg_spec
-    parsed_args = check_fn_match_arg_spec(fn, arg_spec)
+    parsed_args = check_fn_match_arg_spec(fn, arg_spec, key=key)
 
     # Call the function with the parsed args.
     out = fn(*parsed_args)
@@ -1209,7 +1374,7 @@ def call_event_fn(fn: Callable, arg_spec: ArgsSpec) -> list[EventSpec] | Var:
     for e in out:
         if isinstance(e, EventHandler):
             # An un-called EventHandler gets all of the args of the event trigger.
-            e = call_event_handler(e, arg_spec)
+            e = call_event_handler(e, arg_spec, key=key)
 
         # Make sure the event spec is valid.
         if not isinstance(e, EventSpec):
@@ -1419,7 +1584,12 @@ class LiteralEventChainVar(ArgsFunctionOperation, LiteralVar, EventChainVar):
         Returns:
             The created LiteralEventChainVar instance.
         """
-        sig = inspect.signature(value.args_spec)  # type: ignore
+        arg_spec = (
+            value.args_spec[0]
+            if isinstance(value.args_spec, Sequence)
+            else value.args_spec
+        )
+        sig = inspect.signature(arg_spec)  # type: ignore
         if sig.parameters:
             arg_def = tuple((f"_{p}" for p in sig.parameters))
             arg_def_expr = LiteralVar.create([Var(_js_expr=arg) for arg in arg_def])
@@ -1457,6 +1627,8 @@ V3 = TypeVar("V3")
 V4 = TypeVar("V4")
 V5 = TypeVar("V5")
 
+background_event_decorator = background
+
 if sys.version_info >= (3, 10):
     from typing import Concatenate
 
@@ -1557,32 +1729,12 @@ if sys.version_info >= (3, 10):
 
             return partial(self.func, instance)  # type: ignore
 
-    def event_handler(func: Callable[Concatenate[Any, P], T]) -> EventCallback[P, T]:
-        """Wrap a function to be used as an event.
 
-        Args:
-            func: The function to wrap.
-
-        Returns:
-            The wrapped function.
-        """
-        return func  # type: ignore
 else:
 
     class EventCallback(Generic[P, T]):
         """A descriptor that wraps a function to be used as an event."""
 
-    def event_handler(func: Callable[P, T]) -> Callable[P, T]:
-        """Wrap a function to be used as an event.
-
-        Args:
-            func: The function to wrap.
-
-        Returns:
-            The wrapped function.
-        """
-        return func
-
 
 G = ParamSpec("G")
 
@@ -1608,8 +1760,93 @@ class EventNamespace(types.SimpleNamespace):
     EventChainVar = EventChainVar
     LiteralEventChainVar = LiteralEventChainVar
     EventType = EventType
+    EventCallback = EventCallback
+
+    if sys.version_info >= (3, 10):
+
+        @overload
+        @staticmethod
+        def __call__(
+            func: None = None, *, background: bool | None = None
+        ) -> Callable[[Callable[Concatenate[Any, P], T]], EventCallback[P, T]]: ...
+
+        @overload
+        @staticmethod
+        def __call__(
+            func: Callable[Concatenate[Any, P], T],
+            *,
+            background: bool | None = None,
+        ) -> EventCallback[P, T]: ...
+
+        @staticmethod
+        def __call__(
+            func: Callable[Concatenate[Any, P], T] | None = None,
+            *,
+            background: bool | None = None,
+        ) -> Union[
+            EventCallback[P, T],
+            Callable[[Callable[Concatenate[Any, P], T]], EventCallback[P, T]],
+        ]:
+            """Wrap a function to be used as an event.
+
+            Args:
+                func: The function to wrap.
+                background: Whether the event should be run in the background. Defaults to False.
+
+            Returns:
+                The wrapped function.
+            """
+
+            def wrapper(func: Callable[Concatenate[Any, P], T]) -> EventCallback[P, T]:
+                if background is True:
+                    return background_event_decorator(func, __internal_reflex_call=True)  # type: ignore
+                return func  # type: ignore
+
+            if func is not None:
+                return wrapper(func)
+            return wrapper
+    else:
+
+        @overload
+        @staticmethod
+        def __call__(
+            func: None = None, *, background: bool | None = None
+        ) -> Callable[[Callable[P, T]], Callable[P, T]]: ...
+
+        @overload
+        @staticmethod
+        def __call__(
+            func: Callable[P, T], *, background: bool | None = None
+        ) -> Callable[P, T]: ...
+
+        @staticmethod
+        def __call__(
+            func: Callable[P, T] | None = None,
+            *,
+            background: bool | None = None,
+        ) -> Union[
+            Callable[P, T],
+            Callable[[Callable[P, T]], Callable[P, T]],
+        ]:
+            """Wrap a function to be used as an event.
+
+            Args:
+                func: The function to wrap.
+                background: Whether the event should be run in the background. Defaults to False.
+
+            Returns:
+                The wrapped function.
+            """
+
+            def wrapper(func: Callable[P, T]) -> Callable[P, T]:
+                if background is True:
+                    return background_event_decorator(func, __internal_reflex_call=True)  # type: ignore
+                return func  # type: ignore
+
+            if func is not None:
+                return wrapper(func)
+            return wrapper
 
-    __call__ = staticmethod(event_handler)
     get_event = staticmethod(get_event)
     get_hydrate_event = staticmethod(get_hydrate_event)
     fix_events = staticmethod(fix_events)
@@ -1619,13 +1856,14 @@ class EventNamespace(types.SimpleNamespace):
     check_fn_match_arg_spec = staticmethod(check_fn_match_arg_spec)
     resolve_annotation = staticmethod(resolve_annotation)
     parse_args_spec = staticmethod(parse_args_spec)
-    identity_event = staticmethod(identity_event)
+    passthrough_event_spec = staticmethod(passthrough_event_spec)
     input_event = staticmethod(input_event)
     key_event = staticmethod(key_event)
-    empty_event = staticmethod(empty_event)
+    no_args_event_spec = staticmethod(no_args_event_spec)
     server_side = staticmethod(server_side)
     redirect = staticmethod(redirect)
     console_log = staticmethod(console_log)
+    noop = staticmethod(noop)
     back = staticmethod(back)
     window_alert = staticmethod(window_alert)
     set_focus = staticmethod(set_focus)
@@ -1639,6 +1877,8 @@ class EventNamespace(types.SimpleNamespace):
     set_clipboard = staticmethod(set_clipboard)
     download = staticmethod(download)
     call_script = staticmethod(call_script)
+    call_function = staticmethod(call_function)
+    run_script = staticmethod(run_script)
 
 
 event = EventNamespace()

reflex/experimental/client_state.py

@@ -8,7 +8,7 @@ import sys
 from typing import Any, Callable, Union
 
 from reflex import constants
-from reflex.event import EventChain, EventHandler, EventSpec, call_script
+from reflex.event import EventChain, EventHandler, EventSpec, run_script
 from reflex.utils.imports import ImportVar
 from reflex.vars import (
     VarData,
@@ -227,7 +227,7 @@ class ClientStateVar(Var):
         """
         if not self._global_ref:
             raise ValueError("ClientStateVar must be global to retrieve the value.")
-        return call_script(_client_state_ref(self._getter_name), callback=callback)
+        return run_script(_client_state_ref(self._getter_name), callback=callback)
 
     def push(self, value: Any) -> EventSpec:
         """Push a value to the client state variable from the backend.
@@ -245,4 +245,4 @@ class ClientStateVar(Var):
         """
         if not self._global_ref:
             raise ValueError("ClientStateVar must be global to push the value.")
-        return call_script(f"{_client_state_ref(self._setter_name)}({value})")
+        return run_script(f"{_client_state_ref(self._setter_name)}({value})")

reflex/experimental/layout.py

@@ -12,7 +12,7 @@ from reflex.components.radix.themes.components.icon_button import IconButton
 from reflex.components.radix.themes.layout.box import Box
 from reflex.components.radix.themes.layout.container import Container
 from reflex.components.radix.themes.layout.stack import HStack
-from reflex.event import call_script
+from reflex.event import run_script
 from reflex.experimental import hooks
 from reflex.state import ComponentState
 from reflex.style import Style
@@ -173,7 +173,7 @@ class SidebarTrigger(Fragment):
         else:
             open, toggle = (
                 Var(_js_expr="open"),
-                call_script(Var(_js_expr="setOpen(!open)")),
+                run_script("setOpen(!open)"),
             )
 
         trigger_props["left"] = cond(open, f"calc({sidebar_width} - 32px)", "0")