use lowercase datatypes typing (#4843)

* use lowercase datatypes typing

* do the same for dict, except for state.py

* do the same for set

* do the same for tuple

* fix tests

* remove weird guy

* do it for most of state

* remove a bunch of union and optional

* removed even more optionals

* remove somehow even more optionals

* remove a bit more unions

* fix pyi

* capture one of few Lists remaining

Co-authored-by: Masen Furer <m_github@0x26.net>

---------

Co-authored-by: Masen Furer <m_github@0x26.net>

reflex/admin.py

@@ -1,7 +1,6 @@
 """The Reflex Admin Dashboard."""
 
 from dataclasses import dataclass, field
-from typing import Optional
 
 from starlette_admin.base import BaseAdmin as Admin
 
@@ -12,4 +11,4 @@ class AdminDash:
 
     models: list = field(default_factory=list)
     view_overrides: dict = field(default_factory=dict)
-    admin: Optional[Admin] = None
+    admin: Admin | None = None

reflex/app.py

@@ -25,12 +25,8 @@ from typing import (
     Callable,
     Coroutine,
     Dict,
-    List,
     MutableMapping,
-    Optional,
-    Set,
     Type,
-    Union,
     get_args,
     get_type_hints,
 )
@@ -167,7 +163,7 @@ def default_backend_exception_handler(exception: Exception) -> EventSpec:
     )
 
 
-def extra_overlay_function() -> Optional[Component]:
+def extra_overlay_function() -> Component | None:
     """Extra overlay function to add to the overlay component.
 
     Returns:
@@ -250,16 +246,16 @@ class UploadFile(StarletteUploadFile):
 
     file: BinaryIO
 
-    path: Optional[Path] = dataclasses.field(default=None)
+    path: Path | None = dataclasses.field(default=None)
 
-    _deprecated_filename: Optional[str] = dataclasses.field(default=None)
+    _deprecated_filename: str | None = dataclasses.field(default=None)
 
-    size: Optional[int] = dataclasses.field(default=None)
+    size: int | None = dataclasses.field(default=None)
 
     headers: Headers = dataclasses.field(default_factory=Headers)
 
     @property
-    def name(self) -> Optional[str]:
+    def name(self) -> str | None:
         """Get the name of the uploaded file.
 
         Returns:
@@ -269,7 +265,7 @@ class UploadFile(StarletteUploadFile):
             return self.path.name
 
     @property
-    def filename(self) -> Optional[str]:
+    def filename(self) -> str | None:
         """Get the filename of the uploaded file.
 
         Returns:
@@ -290,13 +286,13 @@ class UploadFile(StarletteUploadFile):
 class UnevaluatedPage:
     """An uncompiled page."""
 
-    component: Union[Component, ComponentCallable]
+    component: Component | ComponentCallable
     route: str
-    title: Union[Var, str, None]
-    description: Union[Var, str, None]
+    title: Var | str | None
+    description: Var | str | None
     image: str
-    on_load: Union[EventType[()], None]
-    meta: List[Dict[str, str]]
+    on_load: EventType[()] | None
+    meta: list[dict[str, str]]
 
 
 @dataclasses.dataclass()
@@ -322,7 +318,7 @@ class App(MiddlewareMixin, LifespanMixin):
     """
 
     # The global [theme](https://reflex.dev/docs/styling/theming/#theme) for the entire app.
-    theme: Optional[Component] = dataclasses.field(
+    theme: Component | None = dataclasses.field(
         default_factory=lambda: themes.theme(accent_color="blue")
     )
 
@@ -330,18 +326,18 @@ class App(MiddlewareMixin, LifespanMixin):
     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] = dataclasses.field(default_factory=list)
+    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]] = (
-        dataclasses.field(default=None)
+    overlay_component: Component | ComponentCallable | None = dataclasses.field(
+        default=None
     )
 
     # Error boundary component to wrap the app with.
-    error_boundary: Optional[ComponentCallable] = dataclasses.field(default=None)
+    error_boundary: ComponentCallable | None = dataclasses.field(default=None)
 
     # App wraps to be applied to the whole app. Expected to be a dictionary of (order, name) to a function that takes whether the state is enabled and optionally returns a component.
-    app_wraps: Dict[tuple[int, str], Callable[[bool], Optional[Component]]] = (
+    app_wraps: dict[tuple[int, str], Callable[[bool], Component | None]] = (
         dataclasses.field(
             default_factory=lambda: {
                 (55, "ErrorBoundary"): (
@@ -356,24 +352,24 @@ class App(MiddlewareMixin, LifespanMixin):
     )
 
     # Components to add to the head of every page.
-    head_components: List[Component] = dataclasses.field(default_factory=list)
+    head_components: list[Component] = dataclasses.field(default_factory=list)
 
     # The Socket.IO AsyncServer instance.
-    sio: Optional[AsyncServer] = None
+    sio: AsyncServer | None = None
 
     # The language to add to the html root tag of every page.
-    html_lang: Optional[str] = None
+    html_lang: str | None = None
 
     # Attributes to add to the html root tag of every page.
-    html_custom_attrs: Optional[Dict[str, str]] = None
+    html_custom_attrs: dict[str, str] | None = None
 
     # A map from a route to an unevaluated page.
-    _unevaluated_pages: Dict[str, UnevaluatedPage] = dataclasses.field(
+    _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`.
-    _pages: Dict[str, Component] = dataclasses.field(default_factory=dict)
+    _pages: dict[str, Component] = dataclasses.field(default_factory=dict)
 
     # A mapping of pages which created states as they were being evaluated.
     _stateful_pages: Dict[str, None] = dataclasses.field(default_factory=dict)
@@ -382,24 +378,24 @@ class App(MiddlewareMixin, LifespanMixin):
     _api: FastAPI | None = None
 
     # The state class to use for the app.
-    _state: Optional[Type[BaseState]] = None
+    _state: Type[BaseState] | None = None
 
     # Class to manage many client states.
-    _state_manager: Optional[StateManager] = None
+    _state_manager: StateManager | None = None
 
     # Mapping from a route to event handlers to trigger when the page loads.
-    _load_events: Dict[str, List[IndividualEventType[()]]] = dataclasses.field(
+    _load_events: dict[str, list[IndividualEventType[()]]] = dataclasses.field(
         default_factory=dict
     )
 
     # Admin dashboard to view and manage the database.
-    admin_dash: Optional[AdminDash] = None
+    admin_dash: AdminDash | None = None
 
     # The async server name space.
-    _event_namespace: Optional[EventNamespace] = None
+    _event_namespace: EventNamespace | None = None
 
     # Background tasks that are currently running.
-    _background_tasks: Set[asyncio.Task] = dataclasses.field(default_factory=set)
+    _background_tasks: set[asyncio.Task] = dataclasses.field(default_factory=set)
 
     # Frontend Error Handler Function
     frontend_exception_handler: Callable[[Exception], None] = (
@@ -408,7 +404,7 @@ class App(MiddlewareMixin, LifespanMixin):
 
     # Backend Error Handler Function
     backend_exception_handler: Callable[
-        [Exception], Union[EventSpec, List[EventSpec], None]
+        [Exception], EventSpec | list[EventSpec] | None
     ] = default_backend_exception_handler
 
     # Put the toast provider in the app wrap.
@@ -895,7 +891,7 @@ class App(MiddlewareMixin, LifespanMixin):
 
             admin.mount_to(self.api)
 
-    def _get_frontend_packages(self, imports: Dict[str, set[ImportVar]]):
+    def _get_frontend_packages(self, imports: dict[str, set[ImportVar]]):
         """Gets the frontend packages to be installed and filters out the unnecessary ones.
 
         Args:
@@ -1009,9 +1005,7 @@ class App(MiddlewareMixin, LifespanMixin):
         for render, kwargs in DECORATED_PAGES[get_config().app_name]:
             self.add_page(render, **kwargs)
 
-    def _validate_var_dependencies(
-        self, state: Optional[Type[BaseState]] = None
-    ) -> None:
+    def _validate_var_dependencies(self, state: Type[BaseState] | None = None) -> None:
         """Validate the dependencies of the vars in the app.
 
         Args:
@@ -1083,7 +1077,7 @@ class App(MiddlewareMixin, LifespanMixin):
         self.style = evaluate_style_namespaces(self.style)
 
         # Add the app wrappers.
-        app_wrappers: Dict[tuple[int, str], Component] = {
+        app_wrappers: dict[tuple[int, str], Component] = {
             # Default app wrap component renders {children}
             (0, "AppWrap"): AppWrap.create()
         }
@@ -1550,8 +1544,8 @@ class App(MiddlewareMixin, LifespanMixin):
 
                 valid = bool(
                     return_type == EventSpec
-                    or return_type == Optional[EventSpec]
-                    or return_type == List[EventSpec]
+                    or return_type == EventSpec | None
+                    or return_type == list[EventSpec]
                     or return_type == inspect.Signature.empty
                     or return_type is None
                 )
@@ -1559,7 +1553,7 @@ class App(MiddlewareMixin, LifespanMixin):
                 if not valid:
                     raise ValueError(
                         f"Provided custom {handler_domain} exception handler `{_fn_name}` has the wrong return type."
-                        f"Expected `Union[EventSpec, List[EventSpec], None]` but got `{return_type}`"
+                        f"Expected `EventSpec | list[EventSpec] | None` but got `{return_type}`"
                     )
 
 
@@ -1699,7 +1693,7 @@ def upload(app: App):
         The upload function.
     """
 
-    async def upload_file(request: Request, files: List[FastAPIUploadFile]):
+    async def upload_file(request: Request, files: list[FastAPIUploadFile]):
         """Upload a file.
 
         Args:
@@ -1739,7 +1733,7 @@ def upload(app: App):
         # get handler function
         func = getattr(type(current_state), handler.split(".")[-1])
 
-        # check if there exists any handler args with annotation, List[UploadFile]
+        # check if there exists any handler args with annotation, list[UploadFile]
         if isinstance(func, EventHandler):
             if func.is_background:
                 raise UploadTypeError(
@@ -1759,7 +1753,7 @@ def upload(app: App):
         if not handler_upload_param:
             raise UploadValueError(
                 f"`{handler}` handler should have a parameter annotated as "
-                "List[rx.UploadFile]"
+                "list[rx.UploadFile]"
             )
 
         # Make a copy of the files as they are closed after the request.

reflex/app_mixins/lifespan.py

@@ -7,7 +7,7 @@ import contextlib
 import dataclasses
 import functools
 import inspect
-from typing import Callable, Coroutine, Set, Union
+from typing import Callable, Coroutine
 
 from fastapi import FastAPI
 
@@ -22,7 +22,7 @@ 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]] = dataclasses.field(
+    lifespan_tasks: set[asyncio.Task | Callable] = dataclasses.field(
         default_factory=set
     )
 

reflex/app_mixins/middleware.py

@@ -4,7 +4,6 @@ from __future__ import annotations
 
 import asyncio
 import dataclasses
-from typing import List
 
 from reflex.event import Event
 from reflex.middleware import HydrateMiddleware, Middleware
@@ -18,7 +17,7 @@ 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] = dataclasses.field(default_factory=list)
+    middleware: list[Middleware] = dataclasses.field(default_factory=list)
 
     def _init_mixin(self):
         self.middleware.append(HydrateMiddleware())

reflex/assets.py

@@ -2,7 +2,6 @@
 
 import inspect
 from pathlib import Path
-from typing import Optional
 
 from reflex import constants
 from reflex.config import EnvironmentVariables
@@ -11,7 +10,7 @@ from reflex.config import EnvironmentVariables
 def asset(
     path: str,
     shared: bool = False,
-    subfolder: Optional[str] = None,
+    subfolder: str | None = None,
     _stack_level: int = 1,
 ) -> str:
     """Add an asset to the app, either shared as a symlink or local.

reflex/base.py

@@ -3,14 +3,14 @@
 from __future__ import annotations
 
 import os
-from typing import TYPE_CHECKING, Any, List, Type
+from typing import TYPE_CHECKING, Any, Type
 
 import pydantic.v1.main as pydantic_main
 from pydantic.v1 import BaseModel
 from pydantic.v1.fields import ModelField
 
 
-def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None:
+def validate_field_name(bases: list[Type["BaseModel"]], field_name: str) -> None:
     """Ensure that the field's name does not shadow an existing attribute of the model.
 
     Args:

reflex/compiler/compiler.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 
 from datetime import datetime
 from pathlib import Path
-from typing import TYPE_CHECKING, Dict, Iterable, Optional, Sequence, Tuple, Type, Union
+from typing import TYPE_CHECKING, Iterable, Sequence, Type
 
 from reflex import constants
 from reflex.compiler import templates, utils
@@ -94,7 +94,7 @@ def _compile_theme(theme: str) -> str:
     return templates.THEME.render(theme=theme)
 
 
-def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None) -> str:
+def _compile_contexts(state: Type[BaseState] | None, theme: Component | None) -> str:
     """Compile the initial state and contexts.
 
     Args:
@@ -219,7 +219,7 @@ def _compile_component(component: Component | StatefulComponent) -> str:
 
 def _compile_components(
     components: set[CustomComponent],
-) -> tuple[str, Dict[str, list[ImportVar]]]:
+) -> tuple[str, dict[str, list[ImportVar]]]:
     """Compile the components.
 
     Args:
@@ -352,8 +352,8 @@ def _compile_tailwind(
 
 def compile_document_root(
     head_components: list[Component],
-    html_lang: Optional[str] = None,
-    html_custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+    html_lang: str | None = None,
+    html_custom_attrs: dict[str, Var | str] | None = None,
 ) -> tuple[str, str]:
     """Compile the document root.
 
@@ -415,7 +415,7 @@ def compile_theme(style: ComponentStyle) -> tuple[str, str]:
 
 
 def compile_contexts(
-    state: Optional[Type[BaseState]],
+    state: Type[BaseState] | None,
     theme: Component | None,
 ) -> tuple[str, str]:
     """Compile the initial state / context.
@@ -456,7 +456,7 @@ def compile_page(
 
 def compile_components(
     components: set[CustomComponent],
-) -> tuple[str, str, Dict[str, list[ImportVar]]]:
+) -> tuple[str, str, dict[str, list[ImportVar]]]:
     """Compile the custom components.
 
     Args:
@@ -594,7 +594,7 @@ def compile_unevaluated_page(
     state: Type[BaseState] | None = None,
     style: ComponentStyle | None = None,
     theme: Component | None = None,
-) -> Tuple[Component, bool]:
+) -> tuple[Component, bool]:
     """Compiles an uncompiled page into a component and adds meta information.
 
     Args:
@@ -679,9 +679,9 @@ class ExecutorSafeFunctions:
 
     """
 
-    COMPONENTS: Dict[str, BaseComponent] = {}
-    UNCOMPILED_PAGES: Dict[str, UnevaluatedPage] = {}
-    STATE: Optional[Type[BaseState]] = None
+    COMPONENTS: dict[str, BaseComponent] = {}
+    UNCOMPILED_PAGES: dict[str, UnevaluatedPage] = {}
+    STATE: Type[BaseState] | None = None
 
     @classmethod
     def compile_page(cls, route: str) -> tuple[str, str]:

reflex/compiler/utils.py

@@ -7,7 +7,7 @@ import concurrent.futures
 import traceback
 from datetime import datetime
 from pathlib import Path
-from typing import Any, Callable, Dict, Optional, Type, Union
+from typing import Any, Callable, Type
 from urllib.parse import urlparse
 
 from pydantic.v1.fields import ModelField
@@ -336,8 +336,8 @@ def compile_custom_component(
 
 def create_document_root(
     head_components: list[Component] | None = None,
-    html_lang: Optional[str] = None,
-    html_custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+    html_lang: str | None = None,
+    html_custom_attrs: dict[str, Var | str] | None = None,
 ) -> Component:
     """Create the document root.
 

reflex/components/base/app_wrap.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.base.fragment import Fragment
 from reflex.event import EventType
@@ -16,12 +16,12 @@ class AppWrap(Fragment):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/base/body.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,12 +16,12 @@ class Body(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/base/document.py

@@ -1,7 +1,5 @@
 """Document components."""
 
-from typing import Optional
-
 from reflex.components.component import Component
 
 
@@ -16,7 +14,7 @@ class Html(NextDocumentLib):
 
     tag = "Html"
 
-    lang: Optional[str]
+    lang: str | None
 
 
 class DocumentHead(NextDocumentLib):

reflex/components/base/document.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,12 +16,12 @@ class NextDocumentLib(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -62,13 +62,13 @@ class Html(NextDocumentLib):
     def create(  # type: ignore
         cls,
         *children,
-        lang: Optional[str] = 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, Any]]] = None,
+        lang: str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -109,12 +109,12 @@ class DocumentHead(NextDocumentLib):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -155,12 +155,12 @@ class Main(NextDocumentLib):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -201,12 +201,12 @@ class NextScript(NextDocumentLib):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/base/error_boundary.py

@@ -2,8 +2,6 @@
 
 from __future__ import annotations
 
-from typing import Dict, Tuple
-
 from reflex.components.component import Component
 from reflex.components.datadisplay.logo import svg_logo
 from reflex.components.el import a, button, details, div, h2, hr, p, pre, summary
@@ -15,8 +13,8 @@ from reflex.vars.object import ObjectVar
 
 
 def on_error_spec(
-    error: ObjectVar[Dict[str, str]], info: ObjectVar[Dict[str, str]]
-) -> Tuple[Var[str], Var[str]]:
+    error: ObjectVar[dict[str, str]], info: ObjectVar[dict[str, str]]
+) -> tuple[Var[str], Var[str]]:
     """The spec for the on_error event handler.
 
     Args:

reflex/components/base/error_boundary.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Tuple, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -12,8 +12,8 @@ from reflex.vars.base import Var
 from reflex.vars.object import ObjectVar
 
 def on_error_spec(
-    error: ObjectVar[Dict[str, str]], info: ObjectVar[Dict[str, str]]
-) -> Tuple[Var[str], Var[str]]: ...
+    error: ObjectVar[dict[str, str]], info: ObjectVar[dict[str, str]]
+) -> tuple[Var[str], Var[str]]: ...
 
 class ErrorBoundary(Component):
     @overload
@@ -21,20 +21,18 @@ class ErrorBoundary(Component):
     def create(  # type: ignore
         cls,
         *children,
-        fallback_render: Optional[Union[Component, Var[Component]]] = 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, Any]]] = None,
+        fallback_render: Component | Var[Component] | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
-        on_error: Optional[
-            Union[EventType[()], EventType[str], EventType[str, str]]
-        ] = None,
+        on_error: Optional[EventType[()] | EventType[str] | EventType[str, str]] = None,
         on_focus: Optional[EventType[()]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,

reflex/components/base/fragment.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,12 +16,12 @@ class Fragment(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/base/head.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component, MemoizationLeaf
 from reflex.event import EventType
@@ -16,12 +16,12 @@ class NextHeadLib(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -62,12 +62,12 @@ class Head(NextHeadLib, MemoizationLeaf):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/base/link.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,14 +16,14 @@ class RawLink(Component):
     def create(  # type: ignore
         cls,
         *children,
-        href: Optional[Union[Var[str], str]] = None,
-        rel: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        href: Var[str] | str | None = None,
+        rel: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -66,19 +66,19 @@ class ScriptTag(Component):
     def create(  # type: ignore
         cls,
         *children,
-        type_: Optional[Union[Var[str], str]] = None,
-        source: Optional[Union[Var[str], str]] = None,
-        integrity: Optional[Union[Var[str], str]] = None,
-        crossorigin: Optional[Union[Var[str], str]] = None,
-        referrer_policy: Optional[Union[Var[str], str]] = None,
-        is_async: Optional[Union[Var[bool], bool]] = None,
-        defer: 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, Any]]] = None,
+        type_: Var[str] | str | None = None,
+        source: Var[str] | str | None = None,
+        integrity: Var[str] | str | None = None,
+        crossorigin: Var[str] | str | None = None,
+        referrer_policy: Var[str] | str | None = None,
+        is_async: Var[bool] | bool | None = None,
+        defer: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/base/meta.py

@@ -2,8 +2,6 @@
 
 from __future__ import annotations
 
-from typing import Optional
-
 from reflex.components.base.bare import Bare
 from reflex.components.component import Component
 
@@ -34,19 +32,19 @@ class Meta(Component):
     tag = "meta"
 
     # The description of character encoding.
-    char_set: Optional[str] = None
+    char_set: str | None = None
 
     # The value of meta.
-    content: Optional[str] = None
+    content: str | None = None
 
     # The name of metadata.
-    name: Optional[str] = None
+    name: str | None = None
 
     # The type of metadata value.
-    property: Optional[str] = None
+    property: str | None = None
 
     # The type of metadata value.
-    http_equiv: Optional[str] = None
+    http_equiv: str | None = None
 
 
 class Description(Meta):

reflex/components/base/meta.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -17,12 +17,12 @@ class Title(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -63,17 +63,17 @@ class Meta(Component):
     def create(  # type: ignore
         cls,
         *children,
-        char_set: Optional[str] = None,
-        content: Optional[str] = None,
-        name: Optional[str] = None,
-        property: Optional[str] = None,
-        http_equiv: Optional[str] = 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, Any]]] = None,
+        char_set: str | None = None,
+        content: str | None = None,
+        name: str | None = None,
+        property: str | None = None,
+        http_equiv: str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -119,17 +119,17 @@ class Description(Meta):
     def create(  # type: ignore
         cls,
         *children,
-        name: Optional[str] = None,
-        char_set: Optional[str] = None,
-        content: Optional[str] = None,
-        property: Optional[str] = None,
-        http_equiv: Optional[str] = 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, Any]]] = None,
+        name: str | None = None,
+        char_set: str | None = None,
+        content: str | None = None,
+        property: str | None = None,
+        http_equiv: str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -175,17 +175,17 @@ class Image(Meta):
     def create(  # type: ignore
         cls,
         *children,
-        property: Optional[str] = None,
-        char_set: Optional[str] = None,
-        content: Optional[str] = None,
-        name: Optional[str] = None,
-        http_equiv: Optional[str] = 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, Any]]] = None,
+        property: str | None = None,
+        char_set: str | None = None,
+        content: str | None = None,
+        name: str | None = None,
+        http_equiv: str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/base/script.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,19 +16,16 @@ class Script(Component):
     def create(  # type: ignore
         cls,
         *children,
-        src: Optional[Union[Var[str], str]] = None,
-        strategy: Optional[
-            Union[
-                Literal["afterInteractive", "beforeInteractive", "lazyOnload"],
-                Var[Literal["afterInteractive", "beforeInteractive", "lazyOnload"]],
-            ]
-        ] = 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, Any]]] = None,
+        src: Var[str] | str | None = None,
+        strategy: Literal["afterInteractive", "beforeInteractive", "lazyOnload"]
+        | Var[Literal["afterInteractive", "beforeInteractive", "lazyOnload"]]
+        | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/base/strict_mode.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,12 +16,12 @@ class StrictMode(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/component.py

@@ -14,10 +14,8 @@ from typing import (
     Any,
     Callable,
     ClassVar,
-    Dict,
     Iterator,
     List,
-    Optional,
     Sequence,
     Set,
     Type,
@@ -76,19 +74,19 @@ class BaseComponent(Base, ABC):
     """
 
     # The children nested within the component.
-    children: List[BaseComponent] = []
+    children: list[BaseComponent] = []
 
     # The library that the component is based on.
-    library: Optional[str] = None
+    library: str | None = None
 
     # List here the non-react dependency needed by `library`
-    lib_dependencies: List[str] = []
+    lib_dependencies: list[str] = []
 
     # List here the dependencies that need to be transpiled by Next.js
-    transpile_packages: List[str] = []
+    transpile_packages: list[str] = []
 
     # The tag to use when rendering the component.
-    tag: Optional[str] = None
+    tag: str | None = None
 
     @abstractmethod
     def render(self) -> dict:
@@ -175,10 +173,8 @@ def evaluate_style_namespaces(style: ComponentStyle) -> dict:
 
 
 # Map from component to styling.
-ComponentStyle = Dict[
-    Union[str, Type[BaseComponent], Callable, ComponentNamespace], Any
-]
-ComponentChild = Union[types.PrimitiveType, Var, BaseComponent]
+ComponentStyle = dict[str | Type[BaseComponent] | Callable | ComponentNamespace, Any]
+ComponentChild = types.PrimitiveType | Var | BaseComponent
 ComponentChildTypes = (*types.PrimitiveTypes, Var, BaseComponent)
 
 
@@ -221,13 +217,13 @@ class Component(BaseComponent, ABC):
     style: Style = Style()
 
     # A mapping from event triggers to event chains.
-    event_triggers: Dict[str, Union[EventChain, Var]] = {}
+    event_triggers: dict[str, EventChain | Var] = {}
 
     # The alias for the tag.
-    alias: Optional[str] = None
+    alias: str | None = None
 
     # Whether the import is default or named.
-    is_default: Optional[bool] = False
+    is_default: bool | None = False
 
     # A unique key for the component.
     key: Any = None
@@ -239,31 +235,31 @@ class Component(BaseComponent, ABC):
     class_name: Any = None
 
     # Special component props.
-    special_props: List[Var] = []
+    special_props: list[Var] = []
 
     # Whether the component should take the focus once the page is loaded
     autofocus: bool = False
 
     # components that cannot be children
-    _invalid_children: List[str] = []
+    _invalid_children: list[str] = []
 
     # only components that are allowed as children
-    _valid_children: List[str] = []
+    _valid_children: list[str] = []
 
     # only components that are allowed as parent
-    _valid_parents: List[str] = []
+    _valid_parents: list[str] = []
 
     # props to change the name of
-    _rename_props: Dict[str, str] = {}
+    _rename_props: dict[str, str] = {}
 
     # custom attribute
-    custom_attrs: Dict[str, Union[Var, Any]] = {}
+    custom_attrs: dict[str, Var | Any] = {}
 
     # When to memoize this component and its children.
     _memoization_mode: MemoizationMode = MemoizationMode()
 
     # State class associated with this component instance
-    State: Optional[Type[reflex.state.State]] = None
+    State: Type[reflex.state.State] | None = None
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the component.
@@ -550,7 +546,7 @@ class Component(BaseComponent, ABC):
         if isinstance(class_name, (List, tuple)):
             if any(isinstance(c, Var) for c in class_name):
                 kwargs["class_name"] = LiteralArrayVar.create(
-                    class_name, _var_type=List[str]
+                    class_name, _var_type=list[str]
                 ).join(" ")
             else:
                 kwargs["class_name"] = " ".join(class_name)
@@ -560,13 +556,13 @@ class Component(BaseComponent, ABC):
 
     def get_event_triggers(
         self,
-    ) -> Dict[str, types.ArgsSpec | Sequence[types.ArgsSpec]]:
+    ) -> dict[str, types.ArgsSpec | Sequence[types.ArgsSpec]]:
         """Get the event triggers for the component.
 
         Returns:
             The event triggers.
         """
-        default_triggers: Dict[str, types.ArgsSpec | Sequence[types.ArgsSpec]] = {
+        default_triggers: dict[str, types.ArgsSpec | Sequence[types.ArgsSpec]] = {
             EventTriggers.ON_FOCUS: no_args_event_spec,
             EventTriggers.ON_BLUR: no_args_event_spec,
             EventTriggers.ON_CLICK: no_args_event_spec,
@@ -670,7 +666,7 @@ class Component(BaseComponent, ABC):
 
     @classmethod
     @lru_cache(maxsize=None)
-    def get_props(cls) -> Set[str]:
+    def get_props(cls) -> set[str]:
         """Get the unique fields for the component.
 
         Returns:
@@ -680,7 +676,7 @@ class Component(BaseComponent, ABC):
 
     @classmethod
     @lru_cache(maxsize=None)
-    def get_initial_props(cls) -> Set[str]:
+    def get_initial_props(cls) -> set[str]:
         """Get the initial props to set for the component.
 
         Returns:
@@ -829,7 +825,7 @@ class Component(BaseComponent, ABC):
         return component_style
 
     def _add_style_recursive(
-        self, style: ComponentStyle, theme: Optional[Component] = None
+        self, style: ComponentStyle, theme: Component | None = None
     ) -> Component:
         """Add additional style to the component and its children.
 
@@ -928,7 +924,7 @@ class Component(BaseComponent, ABC):
                 if prop.startswith(old_prop):
                     rendered_dict["props"][ix] = prop.replace(old_prop, new_prop, 1)
 
-    def _validate_component_children(self, children: List[Component]):
+    def _validate_component_children(self, children: list[Component]):
         """Validate the children components.
 
         Args:
@@ -1038,7 +1034,7 @@ class Component(BaseComponent, ABC):
             Each var referenced by the component (props, styles, event handlers).
         """
         ignore_ids = ignore_ids or set()
-        vars: List[Var] | None = getattr(self, "__vars", None)
+        vars: list[Var] | None = getattr(self, "__vars", None)
         if vars is not None:
             yield from vars
         vars = self.__vars = []
@@ -1211,7 +1207,7 @@ class Component(BaseComponent, ABC):
         """
         return None
 
-    def _get_all_dynamic_imports(self) -> Set[str]:
+    def _get_all_dynamic_imports(self) -> set[str]:
         """Get dynamic imports for the component and its children.
 
         Returns:
@@ -1578,7 +1574,7 @@ class Component(BaseComponent, ABC):
 
     def _get_all_custom_components(
         self, seen: set[str] | None = None
-    ) -> Set[CustomComponent]:
+    ) -> set[CustomComponent]:
         """Get all the custom components used by the component.
 
         Args:
@@ -1661,7 +1657,7 @@ class CustomComponent(Component):
     component_fn: Callable[..., Component] = Component.create
 
     # The props of the component.
-    props: Dict[str, Any] = {}
+    props: dict[str, Any] = {}
 
     def __init__(self, **kwargs):
         """Initialize the custom component.
@@ -1780,7 +1776,7 @@ class CustomComponent(Component):
         return hash(self.tag)
 
     @classmethod
-    def get_props(cls) -> Set[str]:
+    def get_props(cls) -> set[str]:
         """Get the props for the component.
 
         Returns:
@@ -1790,7 +1786,7 @@ class CustomComponent(Component):
 
     def _get_all_custom_components(
         self, seen: set[str] | None = None
-    ) -> Set[CustomComponent]:
+    ) -> set[CustomComponent]:
         """Get all the custom components used by the component.
 
         Args:
@@ -1942,7 +1938,7 @@ class StatefulComponent(BaseComponent):
     """
 
     # A lookup table to caching memoized component instances.
-    tag_to_stateful_component: ClassVar[Dict[str, StatefulComponent]] = {}
+    tag_to_stateful_component: ClassVar[dict[str, StatefulComponent]] = {}
 
     # Reference to the original component that was memoized into this component.
     component: Component

reflex/components/core/auto_scroll.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.el.elements.typography import Div
 from reflex.event import EventType
@@ -17,217 +17,190 @@ class AutoScroll(Div):
     def create(  # type: ignore
         cls,
         *children,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/core/banner.py

@@ -2,8 +2,6 @@
 
 from __future__ import annotations
 
-from typing import Optional
-
 from reflex import constants
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import Component
@@ -198,7 +196,7 @@ class ConnectionBanner(Component):
     """A connection banner component."""
 
     @classmethod
-    def create(cls, comp: Optional[Component] = None) -> Component:
+    def create(cls, comp: Component | None = None) -> Component:
         """Create a connection banner component.
 
         Args:
@@ -228,7 +226,7 @@ class ConnectionModal(Component):
     """A connection status modal window."""
 
     @classmethod
-    def create(cls, comp: Optional[Component] = None) -> Component:
+    def create(cls, comp: Component | None = None) -> Component:
         """Create a connection banner component.
 
         Args:

reflex/components/core/banner.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import Component
@@ -48,12 +48,12 @@ class ConnectionToaster(Fragment):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -94,12 +94,12 @@ class ConnectionBanner(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -133,12 +133,12 @@ class ConnectionModal(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -172,13 +172,13 @@ class WifiOffPulse(Icon):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[int], int]] = 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, Any]]] = None,
+        size: Var[int] | int | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -222,217 +222,190 @@ class ConnectionPulser(Div):
     def create(  # type: ignore
         cls,
         *children,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -488,217 +461,190 @@ class BackendDisabled(Div):
     def create(  # type: ignore
         cls,
         *children,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/core/breakpoints.py

@@ -2,13 +2,13 @@
 
 from __future__ import annotations
 
-from typing import Dict, Tuple, TypeVar, Union
+from typing import TypeVar
 
 breakpoints_values = ["30em", "48em", "62em", "80em", "96em"]
 breakpoint_names = ["xs", "sm", "md", "lg", "xl"]
 
 
-def set_breakpoints(values: Tuple[str, str, str, str, str]):
+def set_breakpoints(values: tuple[str, str, str, str, str]):
     """Overwrite default breakpoint values.
 
     Args:
@@ -22,7 +22,7 @@ K = TypeVar("K", bound=str)
 V = TypeVar("V")
 
 
-class Breakpoints(Dict[K, V]):
+class Breakpoints(dict[K, V]):
     """A responsive styling helper."""
 
     def factorize(self):
@@ -46,7 +46,7 @@ class Breakpoints(Dict[K, V]):
     @classmethod
     def create(
         cls,
-        custom: Dict[K, V] | None = None,
+        custom: dict[K, V] | None = None,
         initial: V | None = None,
         xs: V | None = None,
         sm: V | None = None,
@@ -94,4 +94,4 @@ breakpoints = Breakpoints.create
 
 T = TypeVar("T")
 
-Responsive = Union[T, Breakpoints[str, T]]
+Responsive = T | Breakpoints[str, T]

reflex/components/core/client_side_routing.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -20,12 +20,12 @@ class ClientSideRouting(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -68,13 +68,13 @@ class Default404Page(Component):
     def create(  # type: ignore
         cls,
         *children,
-        status_code: Optional[Union[Var[int], int]] = 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, Any]]] = None,
+        status_code: Var[int] | int | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/core/clipboard.py

@@ -2,8 +2,6 @@
 
 from __future__ import annotations
 
-from typing import Dict, List, Tuple, Union
-
 from reflex.components.base.fragment import Fragment
 from reflex.components.tags.tag import Tag
 from reflex.constants.compiler import Hooks
@@ -18,13 +16,13 @@ class Clipboard(Fragment):
     """Clipboard component."""
 
     # The element ids to attach the event listener to. Defaults to all child components or the document.
-    targets: Var[List[str]]
+    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[passthrough_event_spec(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]]]
+    on_paste_event_actions: Var[dict[str, bool | int]]
 
     @classmethod
     def create(cls, *children, **props):

reflex/components/core/clipboard.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, List, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.base.fragment import Fragment
 from reflex.event import EventType
@@ -17,16 +17,16 @@ class Clipboard(Fragment):
     def create(  # type: ignore
         cls,
         *children,
-        targets: Optional[Union[List[str], Var[List[str]]]] = None,
-        on_paste_event_actions: Optional[
-            Union[Dict[str, Union[bool, int]], Var[Dict[str, Union[bool, int]]]]
-        ] = 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, Any]]] = None,
+        targets: Var[list[str]] | list[str] | None = None,
+        on_paste_event_actions: Var[dict[str, bool | int]]
+        | dict[str, bool | int]
+        | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -40,9 +40,7 @@ class Clipboard(Fragment):
         on_mouse_out: Optional[EventType[()]] = None,
         on_mouse_over: Optional[EventType[()]] = None,
         on_mouse_up: Optional[EventType[()]] = None,
-        on_paste: Optional[
-            Union[EventType[()], EventType[list[tuple[str, str]]]]
-        ] = None,
+        on_paste: Optional[EventType[()] | EventType[list[tuple[str, str]]]] = None,
         on_scroll: Optional[EventType[()]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,

reflex/components/core/cond.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Dict, Optional, overload
+from typing import Any, Dict, overload
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import BaseComponent, Component, MemoizationLeaf
@@ -35,7 +35,7 @@ class Cond(MemoizationLeaf):
         cls,
         cond: Var,
         comp1: BaseComponent,
-        comp2: Optional[BaseComponent] = None,
+        comp2: BaseComponent | None = None,
     ) -> Component:
         """Create a conditional component.
 

reflex/components/core/debounce.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Type, Union
+from typing import Any, Type
 
 from reflex.components.component import Component
 from reflex.constants import EventTriggers
@@ -37,7 +37,7 @@ class DebounceInput(Component):
     force_notify_on_blur: Var[bool]
 
     # If provided, create a fully-controlled input
-    value: Var[Union[str, int, float]]
+    value: Var[str | int | float]
 
     # The ref to attach to the created input
     input_ref: Var[str]

reflex/components/core/debounce.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Type, Union, overload
+from typing import Any, Optional, Type, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -18,19 +18,19 @@ class DebounceInput(Component):
     def create(  # type: ignore
         cls,
         *children,
-        min_length: Optional[Union[Var[int], int]] = None,
-        debounce_timeout: Optional[Union[Var[int], int]] = None,
-        force_notify_by_enter: Optional[Union[Var[bool], bool]] = None,
-        force_notify_on_blur: Optional[Union[Var[bool], bool]] = None,
-        value: Optional[Union[Var[Union[float, int, str]], float, int, str]] = None,
-        input_ref: Optional[Union[Var[str], str]] = None,
-        element: Optional[Union[Type[Component], Var[Type[Component]]]] = 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, Any]]] = None,
+        min_length: Var[int] | int | None = None,
+        debounce_timeout: Var[int] | int | None = None,
+        force_notify_by_enter: Var[bool] | bool | None = None,
+        force_notify_on_blur: Var[bool] | bool | None = None,
+        value: Var[float | int | str] | float | int | str | None = None,
+        input_ref: Var[str] | str | None = None,
+        element: Type[Component] | Var[Type[Component]] | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_change: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,

reflex/components/core/html.py

@@ -1,7 +1,5 @@
 """A html component."""
 
-from typing import Dict
-
 from reflex.components.el.elements.typography import Div
 from reflex.vars.base import Var
 
@@ -14,7 +12,7 @@ class Html(Div):
     """
 
     # The HTML to render.
-    dangerouslySetInnerHTML: Var[Dict[str, str]]  # noqa: N815
+    dangerouslySetInnerHTML: Var[dict[str, str]]  # noqa: N815
 
     @classmethod
     def create(cls, *children, **props):

reflex/components/core/html.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.el.elements.typography import Div
 from reflex.event import EventType
@@ -16,220 +16,191 @@ class Html(Div):
     def create(  # type: ignore
         cls,
         *children,
-        dangerouslySetInnerHTML: Optional[
-            Union[Dict[str, str], Var[Dict[str, str]]]
-        ] = None,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
+        dangerouslySetInnerHTML: Var[dict[str, str]] | dict[str, str] | None = None,
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/core/match.py

@@ -1,7 +1,7 @@
 """rx.match."""
 
 import textwrap
-from typing import Any, Dict, List, Optional, Tuple, Union
+from typing import Any, Dict, List
 
 from reflex.components.base import Fragment
 from reflex.components.component import BaseComponent, Component, MemoizationLeaf
@@ -21,13 +21,13 @@ class Match(MemoizationLeaf):
     cond: Var[Any]
 
     # The list of match cases to be matched.
-    match_cases: List[Any] = []
+    match_cases: list[Any] = []
 
     # The catchall case to match.
     default: Any
 
     @classmethod
-    def create(cls, cond: Any, *cases) -> Union[Component, Var]:
+    def create(cls, cond: Any, *cases) -> Component | Var:
         """Create a Match Component.
 
         Args:
@@ -75,9 +75,7 @@ class Match(MemoizationLeaf):
         return match_cond_var
 
     @classmethod
-    def _process_cases(
-        cls, cases: List
-    ) -> Tuple[List, Optional[Union[Var, BaseComponent]]]:
+    def _process_cases(cls, cases: list) -> tuple[list, Var | BaseComponent | None]:
         """Process the list of match cases and the catchall default case.
 
         Args:
@@ -125,7 +123,7 @@ class Match(MemoizationLeaf):
         return case_element
 
     @classmethod
-    def _process_match_cases(cls, cases: List) -> List[List[Var]]:
+    def _process_match_cases(cls, cases: List) -> list[list[Var]]:
         """Process the individual match cases.
 
         Args:
@@ -166,7 +164,7 @@ class Match(MemoizationLeaf):
         return match_cases
 
     @classmethod
-    def _validate_return_types(cls, match_cases: List[List[Var]]) -> None:
+    def _validate_return_types(cls, match_cases: list[list[Var]]) -> None:
         """Validate that match cases have the same return types.
 
         Args:
@@ -195,9 +193,9 @@ class Match(MemoizationLeaf):
     def _create_match_cond_var_or_component(
         cls,
         match_cond_var: Var,
-        match_cases: List[List[Var]],
-        default: Optional[Union[Var, BaseComponent]],
-    ) -> Union[Component, Var]:
+        match_cases: list[list[Var]],
+        default: Var | BaseComponent | None,
+    ) -> Component | Var:
         """Create and return the match condition var or component.
 
         Args:

reflex/components/core/upload.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 from pathlib import Path
-from typing import Any, Callable, ClassVar, Dict, List, Optional, Tuple
+from typing import Any, Callable, ClassVar, List
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import (
@@ -86,7 +86,7 @@ def selected_files(id_: str = DEFAULT_UPLOAD_ID) -> Var:
     id_var = LiteralStringVar.create(id_)
     return Var(
         _js_expr=f"(filesById[{id_var!s}] ? filesById[{id_var!s}].map((f) => (f.path || f.name)) : [])",
-        _var_type=List[str],
+        _var_type=list[str],
         _var_data=VarData.merge(
             upload_files_context_var_data, id_var._get_all_var_data()
         ),
@@ -161,7 +161,7 @@ def get_upload_url(file_path: str | Var[str]) -> Var[str]:
     return Var.create(f"{uploaded_files_url_prefix}/{file_path}")
 
 
-def _on_drop_spec(files: Var) -> Tuple[Var[Any]]:
+def _on_drop_spec(files: Var) -> tuple[Var[Any]]:
     """Args spec for the on_drop event trigger.
 
     Args:
@@ -197,7 +197,7 @@ class Upload(MemoizationLeaf):
     # The list of accepted file types. This should be a dictionary of MIME types as keys and array of file formats as
     # values.
     # supported MIME types: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
-    accept: Var[Optional[Dict[str, List]]]
+    accept: Var[dict[str, List] | None]
 
     # Whether the dropzone is disabled.
     disabled: Var[bool]

reflex/components/core/upload.pyi

@@ -4,7 +4,7 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 from pathlib import Path
-from typing import Any, ClassVar, Dict, List, Optional, Union, overload
+from typing import Any, ClassVar, List, Optional, overload
 
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
@@ -43,12 +43,12 @@ class UploadFilesProvider(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -89,17 +89,17 @@ class GhostUpload(Fragment):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
-        on_drop: Optional[Union[EventType[()], EventType[Any]]] = None,
+        on_drop: Optional[EventType[()] | EventType[Any]] = None,
         on_focus: Optional[EventType[()]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
@@ -139,26 +139,26 @@ class Upload(MemoizationLeaf):
     def create(  # type: ignore
         cls,
         *children,
-        accept: Optional[Union[Dict[str, List], Var[Optional[Dict[str, List]]]]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        max_files: Optional[Union[Var[int], int]] = None,
-        max_size: Optional[Union[Var[int], int]] = None,
-        min_size: Optional[Union[Var[int], int]] = None,
-        multiple: Optional[Union[Var[bool], bool]] = None,
-        no_click: Optional[Union[Var[bool], bool]] = None,
-        no_drag: Optional[Union[Var[bool], bool]] = None,
-        no_keyboard: 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, Any]]] = None,
+        accept: Var[dict[str, List] | None] | dict[str, List] | None = None,
+        disabled: Var[bool] | bool | None = None,
+        max_files: Var[int] | int | None = None,
+        max_size: Var[int] | int | None = None,
+        min_size: Var[int] | int | None = None,
+        multiple: Var[bool] | bool | None = None,
+        no_click: Var[bool] | bool | None = None,
+        no_drag: Var[bool] | bool | None = None,
+        no_keyboard: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
-        on_drop: Optional[Union[EventType[()], EventType[Any]]] = None,
+        on_drop: Optional[EventType[()] | EventType[Any]] = None,
         on_focus: Optional[EventType[()]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
@@ -205,26 +205,26 @@ class StyledUpload(Upload):
     def create(  # type: ignore
         cls,
         *children,
-        accept: Optional[Union[Dict[str, List], Var[Optional[Dict[str, List]]]]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        max_files: Optional[Union[Var[int], int]] = None,
-        max_size: Optional[Union[Var[int], int]] = None,
-        min_size: Optional[Union[Var[int], int]] = None,
-        multiple: Optional[Union[Var[bool], bool]] = None,
-        no_click: Optional[Union[Var[bool], bool]] = None,
-        no_drag: Optional[Union[Var[bool], bool]] = None,
-        no_keyboard: 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, Any]]] = None,
+        accept: Var[dict[str, List] | None] | dict[str, List] | None = None,
+        disabled: Var[bool] | bool | None = None,
+        max_files: Var[int] | int | None = None,
+        max_size: Var[int] | int | None = None,
+        min_size: Var[int] | int | None = None,
+        multiple: Var[bool] | bool | None = None,
+        no_click: Var[bool] | bool | None = None,
+        no_drag: Var[bool] | bool | None = None,
+        no_keyboard: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
-        on_drop: Optional[Union[EventType[()], EventType[Any]]] = None,
+        on_drop: Optional[EventType[()] | EventType[Any]] = None,
         on_focus: Optional[EventType[()]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
@@ -271,26 +271,26 @@ class UploadNamespace(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        accept: Optional[Union[Dict[str, List], Var[Optional[Dict[str, List]]]]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        max_files: Optional[Union[Var[int], int]] = None,
-        max_size: Optional[Union[Var[int], int]] = None,
-        min_size: Optional[Union[Var[int], int]] = None,
-        multiple: Optional[Union[Var[bool], bool]] = None,
-        no_click: Optional[Union[Var[bool], bool]] = None,
-        no_drag: Optional[Union[Var[bool], bool]] = None,
-        no_keyboard: 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, Any]]] = None,
+        accept: Var[dict[str, List] | None] | dict[str, List] | None = None,
+        disabled: Var[bool] | bool | None = None,
+        max_files: Var[int] | int | None = None,
+        max_size: Var[int] | int | None = None,
+        min_size: Var[int] | int | None = None,
+        multiple: Var[bool] | bool | None = None,
+        no_click: Var[bool] | bool | None = None,
+        no_drag: Var[bool] | bool | None = None,
+        no_keyboard: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
-        on_drop: Optional[Union[EventType[()], EventType[Any]]] = None,
+        on_drop: Optional[EventType[()] | EventType[Any]] = None,
         on_focus: Optional[EventType[()]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,

reflex/components/datadisplay/code.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 
 import dataclasses
 import typing
-from typing import ClassVar, Dict, Literal, Optional, Union
+from typing import ClassVar, Literal
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.cond import color_mode_cond
@@ -390,7 +390,7 @@ class CodeBlock(Component, MarkdownComponentMap):
     alias = "SyntaxHighlighter"
 
     # The theme to use ("light" or "dark").
-    theme: Var[Union[Theme, str]] = Theme.one_light
+    theme: Var[Theme | str] = Theme.one_light
 
     # The language to use.
     language: Var[LiteralCodeLanguage] = Var.create("python")
@@ -408,16 +408,16 @@ class CodeBlock(Component, MarkdownComponentMap):
     wrap_long_lines: Var[bool]
 
     # A custom style for the code block.
-    custom_style: Dict[str, Union[str, Var, Color]] = {}
+    custom_style: dict[str, str | Var | Color] = {}
 
     # Props passed down to the code tag.
-    code_tag_props: Var[Dict[str, str]]
+    code_tag_props: Var[dict[str, str]]
 
     # Whether a copy button should appear.
-    can_copy: Optional[bool] = False
+    can_copy: bool | None = False
 
     # A custom copy button to override the default one.
-    copy_button: Optional[Union[bool, Component]] = None
+    copy_button: bool | Component | None = None
 
     @classmethod
     def create(

reflex/components/datadisplay/dataeditor.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 from enum import Enum
-from typing import Any, Dict, List, Literal, Optional, Tuple, TypedDict, Union
+from typing import Any, Dict, Literal, TypedDict
 
 from reflex.base import Base
 from reflex.components.component import Component, NoSSRComponent
@@ -52,38 +52,38 @@ class GridColumnIcons(Enum):
 class DataEditorTheme(Base):
     """The theme for the DataEditor component."""
 
-    accent_color: Optional[str] = None
-    accent_fg: Optional[str] = None
-    accent_light: Optional[str] = None
-    base_font_style: Optional[str] = None
-    bg_bubble: Optional[str] = None
-    bg_bubble_selected: Optional[str] = None
-    bg_cell: Optional[str] = None
-    bg_cell_medium: Optional[str] = None
-    bg_header: Optional[str] = None
-    bg_header_has_focus: Optional[str] = None
-    bg_header_hovered: Optional[str] = None
-    bg_icon_header: Optional[str] = None
-    bg_search_result: Optional[str] = None
-    border_color: Optional[str] = None
-    cell_horizontal_padding: Optional[int] = None
-    cell_vertical_padding: Optional[int] = None
-    drilldown_border: Optional[str] = None
-    editor_font_size: Optional[str] = None
-    fg_icon_header: Optional[str] = None
-    font_family: Optional[str] = None
-    header_bottom_border_color: Optional[str] = None
-    header_font_style: Optional[str] = None
-    horizontal_border_color: Optional[str] = None
-    line_height: Optional[int] = None
-    link_color: Optional[str] = None
-    text_bubble: Optional[str] = None
-    text_dark: Optional[str] = None
-    text_group_header: Optional[str] = None
-    text_header: Optional[str] = None
-    text_header_selected: Optional[str] = None
-    text_light: Optional[str] = None
-    text_medium: Optional[str] = None
+    accent_color: str | None = None
+    accent_fg: str | None = None
+    accent_light: str | None = None
+    base_font_style: str | None = None
+    bg_bubble: str | None = None
+    bg_bubble_selected: str | None = None
+    bg_cell: str | None = None
+    bg_cell_medium: str | None = None
+    bg_header: str | None = None
+    bg_header_has_focus: str | None = None
+    bg_header_hovered: str | None = None
+    bg_icon_header: str | None = None
+    bg_search_result: str | None = None
+    border_color: str | None = None
+    cell_horizontal_padding: int | None = None
+    cell_vertical_padding: int | None = None
+    drilldown_border: str | None = None
+    editor_font_size: str | None = None
+    fg_icon_header: str | None = None
+    font_family: str | None = None
+    header_bottom_border_color: str | None = None
+    header_font_style: str | None = None
+    horizontal_border_color: str | None = None
+    line_height: int | None = None
+    link_color: str | None = None
+    text_bubble: str | None = None
+    text_dark: str | None = None
+    text_group_header: str | None = None
+    text_header: str | None = None
+    text_header_selected: str | None = None
+    text_light: str | None = None
+    text_medium: str | None = None
 
 
 class Bounds(TypedDict):
@@ -121,7 +121,7 @@ class GridSelectionCurrent(TypedDict):
 class GridSelection(TypedDict):
     """The grid selection."""
 
-    current: Optional[GridSelectionCurrent]
+    current: GridSelectionCurrent | None
     columns: CompatSelection
     rows: CompatSelection
 
@@ -148,14 +148,14 @@ class GroupHeaderClickedEventArgs(TypedDict):
 class GridCell(TypedDict):
     """The grid cell."""
 
-    span: Optional[List[int]]
+    span: list[int] | None
 
 
 class GridColumn(TypedDict):
     """The grid column."""
 
     title: str
-    group: Optional[str]
+    group: str | None
 
 
 class DataEditor(NoSSRComponent):
@@ -164,7 +164,7 @@ class DataEditor(NoSSRComponent):
     tag = "DataEditor"
     is_default = True
     library: str | None = "@glideapps/glide-data-grid@^6.0.3"
-    lib_dependencies: List[str] = [
+    lib_dependencies: list[str] = [
         "lodash@^4.17.21",
         "react-responsive-carousel@^3.2.7",
     ]
@@ -173,10 +173,10 @@ class DataEditor(NoSSRComponent):
     rows: Var[int]
 
     # Headers of the columns for the data grid.
-    columns: Var[List[Dict[str, Any]]]
+    columns: Var[list[dict[str, Any]]]
 
     # The data.
-    data: Var[List[List[Any]]]
+    data: Var[list[list[Any]]]
 
     # The name of the callback used to find the data to display.
     get_cell_content: Var[str]
@@ -257,23 +257,23 @@ class DataEditor(NoSSRComponent):
     scroll_offset_y: Var[int]
 
     # global theme
-    theme: Var[Union[DataEditorTheme, Dict]]
+    theme: Var[DataEditorTheme | Dict]
 
     # Fired when a cell is activated.
-    on_cell_activated: EventHandler[passthrough_event_spec(Tuple[int, int])]
+    on_cell_activated: EventHandler[passthrough_event_spec(tuple[int, int])]
 
     # Fired when a cell is clicked.
-    on_cell_clicked: EventHandler[passthrough_event_spec(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[passthrough_event_spec(Tuple[int, int])]
+    on_cell_context_menu: EventHandler[passthrough_event_spec(tuple[int, int])]
 
     # Fired when a cell is edited.
-    on_cell_edited: EventHandler[passthrough_event_spec(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[
-        passthrough_event_spec(Tuple[int, int], GridCell)
+        passthrough_event_spec(tuple[int, int], GridCell)
     ]
 
     # Fired when a group header is right-clicked.
@@ -285,23 +285,23 @@ class DataEditor(NoSSRComponent):
     on_group_header_renamed: EventHandler[passthrough_event_spec(str, str)]
 
     # Fired when a header is clicked.
-    on_header_clicked: EventHandler[passthrough_event_spec(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[passthrough_event_spec(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[passthrough_event_spec(int, Rectangle)]
 
     # Fired when an item is hovered.
-    on_item_hovered: EventHandler[passthrough_event_spec(Tuple[int, int])]
+    on_item_hovered: EventHandler[passthrough_event_spec(tuple[int, int])]
 
     # Fired when a selection is deleted.
     on_delete: EventHandler[passthrough_event_spec(GridSelection)]
 
     # Fired when editing is finished.
     on_finished_editing: EventHandler[
-        passthrough_event_spec(Union[GridCell, None], tuple[int, int])
+        passthrough_event_spec(GridCell | None, tuple[int, int])
     ]
 
     # Fired when a row is appended.

reflex/components/datadisplay/dataeditor.pyi

@@ -4,7 +4,7 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 from enum import Enum
-from typing import Any, Dict, List, Literal, Optional, TypedDict, Union, overload
+from typing import Any, Dict, Literal, Optional, TypedDict, Union, overload
 
 from reflex.base import Base
 from reflex.components.component import NoSSRComponent
@@ -43,38 +43,38 @@ class GridColumnIcons(Enum):
     VideoUri = "video_uri"
 
 class DataEditorTheme(Base):
-    accent_color: Optional[str]
-    accent_fg: Optional[str]
-    accent_light: Optional[str]
-    base_font_style: Optional[str]
-    bg_bubble: Optional[str]
-    bg_bubble_selected: Optional[str]
-    bg_cell: Optional[str]
-    bg_cell_medium: Optional[str]
-    bg_header: Optional[str]
-    bg_header_has_focus: Optional[str]
-    bg_header_hovered: Optional[str]
-    bg_icon_header: Optional[str]
-    bg_search_result: Optional[str]
-    border_color: Optional[str]
-    cell_horizontal_padding: Optional[int]
-    cell_vertical_padding: Optional[int]
-    drilldown_border: Optional[str]
-    editor_font_size: Optional[str]
-    fg_icon_header: Optional[str]
-    font_family: Optional[str]
-    header_bottom_border_color: Optional[str]
-    header_font_style: Optional[str]
-    horizontal_border_color: Optional[str]
-    line_height: Optional[int]
-    link_color: Optional[str]
-    text_bubble: Optional[str]
-    text_dark: Optional[str]
-    text_group_header: Optional[str]
-    text_header: Optional[str]
-    text_header_selected: Optional[str]
-    text_light: Optional[str]
-    text_medium: Optional[str]
+    accent_color: str | None
+    accent_fg: str | None
+    accent_light: str | None
+    base_font_style: str | None
+    bg_bubble: str | None
+    bg_bubble_selected: str | None
+    bg_cell: str | None
+    bg_cell_medium: str | None
+    bg_header: str | None
+    bg_header_has_focus: str | None
+    bg_header_hovered: str | None
+    bg_icon_header: str | None
+    bg_search_result: str | None
+    border_color: str | None
+    cell_horizontal_padding: int | None
+    cell_vertical_padding: int | None
+    drilldown_border: str | None
+    editor_font_size: str | None
+    fg_icon_header: str | None
+    font_family: str | None
+    header_bottom_border_color: str | None
+    header_font_style: str | None
+    horizontal_border_color: str | None
+    line_height: int | None
+    link_color: str | None
+    text_bubble: str | None
+    text_dark: str | None
+    text_group_header: str | None
+    text_header: str | None
+    text_header_selected: str | None
+    text_light: str | None
+    text_medium: str | None
 
 class Bounds(TypedDict):
     x: int
@@ -97,7 +97,7 @@ class GridSelectionCurrent(TypedDict):
     rangeStack: list[Rectangle]
 
 class GridSelection(TypedDict):
-    current: Optional[GridSelectionCurrent]
+    current: GridSelectionCurrent | None
     columns: CompatSelection
     rows: CompatSelection
 
@@ -118,11 +118,11 @@ class GroupHeaderClickedEventArgs(TypedDict):
     scrollEdge: tuple[int, int]
 
 class GridCell(TypedDict):
-    span: Optional[List[int]]
+    span: list[int] | None
 
 class GridColumn(TypedDict):
     title: str
-    group: Optional[str]
+    group: str | None
 
 class DataEditor(NoSSRComponent):
     def add_imports(self) -> ImportDict: ...
@@ -132,116 +132,88 @@ class DataEditor(NoSSRComponent):
     def create(  # type: ignore
         cls,
         *children,
-        rows: Optional[Union[Var[int], int]] = None,
-        columns: Optional[
-            Union[List[Dict[str, Any]], Var[List[Dict[str, Any]]]]
-        ] = None,
-        data: Optional[Union[List[List[Any]], Var[List[List[Any]]]]] = None,
-        get_cell_content: Optional[Union[Var[str], str]] = 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,
-        fixed_shadow_y: Optional[Union[Var[bool], bool]] = None,
-        freeze_columns: Optional[Union[Var[int], int]] = None,
-        group_header_height: Optional[Union[Var[int], int]] = None,
-        header_height: Optional[Union[Var[int], int]] = None,
-        max_column_auto_width: Optional[Union[Var[int], int]] = None,
-        max_column_width: Optional[Union[Var[int], int]] = None,
-        min_column_width: Optional[Union[Var[int], int]] = None,
-        row_height: Optional[Union[Var[int], int]] = None,
-        row_markers: Optional[
-            Union[
-                Literal["both", "checkbox", "clickable-number", "none", "number"],
-                Var[Literal["both", "checkbox", "clickable-number", "none", "number"]],
-            ]
-        ] = None,
-        row_marker_start_index: Optional[Union[Var[int], int]] = None,
-        row_marker_width: Optional[Union[Var[int], int]] = None,
-        smooth_scroll_x: Optional[Union[Var[bool], bool]] = None,
-        smooth_scroll_y: Optional[Union[Var[bool], bool]] = None,
-        vertical_border: Optional[Union[Var[bool], bool]] = None,
-        column_select: Optional[
-            Union[
-                Literal["multi", "none", "single"],
-                Var[Literal["multi", "none", "single"]],
-            ]
-        ] = None,
-        prevent_diagonal_scrolling: Optional[Union[Var[bool], bool]] = None,
-        overscroll_x: Optional[Union[Var[int], int]] = None,
-        overscroll_y: Optional[Union[Var[int], int]] = None,
-        scroll_offset_x: Optional[Union[Var[int], int]] = None,
-        scroll_offset_y: Optional[Union[Var[int], int]] = None,
-        theme: Optional[
-            Union[DataEditorTheme, Dict, Var[Union[DataEditorTheme, Dict]]]
-        ] = 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, Any]]] = None,
+        rows: Var[int] | int | None = None,
+        columns: Var[list[dict[str, Any]]] | list[dict[str, Any]] | None = None,
+        data: Var[list[list[Any]]] | list[list[Any]] | None = None,
+        get_cell_content: Var[str] | str | None = None,
+        get_cells_for_selection: Var[bool] | bool | None = None,
+        on_paste: Var[bool] | bool | None = None,
+        draw_focus_ring: Var[bool] | bool | None = None,
+        fixed_shadow_x: Var[bool] | bool | None = None,
+        fixed_shadow_y: Var[bool] | bool | None = None,
+        freeze_columns: Var[int] | int | None = None,
+        group_header_height: Var[int] | int | None = None,
+        header_height: Var[int] | int | None = None,
+        max_column_auto_width: Var[int] | int | None = None,
+        max_column_width: Var[int] | int | None = None,
+        min_column_width: Var[int] | int | None = None,
+        row_height: Var[int] | int | None = None,
+        row_markers: Literal["both", "checkbox", "clickable-number", "none", "number"]
+        | Var[Literal["both", "checkbox", "clickable-number", "none", "number"]]
+        | None = None,
+        row_marker_start_index: Var[int] | int | None = None,
+        row_marker_width: Var[int] | int | None = None,
+        smooth_scroll_x: Var[bool] | bool | None = None,
+        smooth_scroll_y: Var[bool] | bool | None = None,
+        vertical_border: Var[bool] | bool | None = None,
+        column_select: Literal["multi", "none", "single"]
+        | Var[Literal["multi", "none", "single"]]
+        | None = None,
+        prevent_diagonal_scrolling: Var[bool] | bool | None = None,
+        overscroll_x: Var[int] | int | None = None,
+        overscroll_y: Var[int] | int | None = None,
+        scroll_offset_x: Var[int] | int | None = None,
+        scroll_offset_y: Var[int] | int | None = None,
+        theme: DataEditorTheme | Dict | Var[DataEditorTheme | Dict] | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
-        on_cell_activated: Optional[
-            Union[EventType[()], EventType[tuple[int, int]]]
-        ] = None,
-        on_cell_clicked: Optional[
-            Union[EventType[()], EventType[tuple[int, int]]]
-        ] = None,
+        on_cell_activated: Optional[EventType[()] | EventType[tuple[int, int]]] = None,
+        on_cell_clicked: Optional[EventType[()] | EventType[tuple[int, int]]] = None,
         on_cell_context_menu: Optional[
-            Union[EventType[()], EventType[tuple[int, int]]]
+            EventType[()] | EventType[tuple[int, int]]
         ] = None,
         on_cell_edited: Optional[
-            Union[
-                EventType[()],
-                EventType[tuple[int, int]],
-                EventType[tuple[int, int], GridCell],
-            ]
+            EventType[()]
+            | EventType[tuple[int, int]]
+            | EventType[tuple[int, int], GridCell]
         ] = None,
         on_click: Optional[EventType[()]] = None,
         on_column_resize: Optional[
-            Union[EventType[()], EventType[GridColumn], EventType[GridColumn, int]]
+            EventType[()] | EventType[GridColumn] | EventType[GridColumn, int]
         ] = None,
         on_context_menu: Optional[EventType[()]] = None,
-        on_delete: Optional[Union[EventType[()], EventType[GridSelection]]] = None,
+        on_delete: Optional[EventType[()] | EventType[GridSelection]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_finished_editing: Optional[
-            Union[
-                EventType[()],
-                EventType[Union[GridCell, None]],
-                EventType[Union[GridCell, None], tuple[int, int]],
-            ]
+            EventType[()]
+            | EventType[Union[GridCell, None]]
+            | EventType[Union[GridCell, None], tuple[int, int]]
         ] = None,
         on_focus: Optional[EventType[()]] = None,
         on_group_header_clicked: Optional[
-            Union[
-                EventType[()],
-                EventType[tuple[int, int]],
-                EventType[tuple[int, int], GridCell],
-            ]
+            EventType[()]
+            | EventType[tuple[int, int]]
+            | EventType[tuple[int, int], GridCell]
         ] = None,
         on_group_header_context_menu: Optional[
-            Union[
-                EventType[()],
-                EventType[int],
-                EventType[int, GroupHeaderClickedEventArgs],
-            ]
+            EventType[()] | EventType[int] | EventType[int, GroupHeaderClickedEventArgs]
         ] = None,
         on_group_header_renamed: Optional[
-            Union[EventType[()], EventType[str], EventType[str, str]]
-        ] = None,
-        on_header_clicked: Optional[
-            Union[EventType[()], EventType[tuple[int, int]]]
+            EventType[()] | EventType[str] | EventType[str, str]
         ] = None,
+        on_header_clicked: Optional[EventType[()] | EventType[tuple[int, int]]] = None,
         on_header_context_menu: Optional[
-            Union[EventType[()], EventType[tuple[int, int]]]
+            EventType[()] | EventType[tuple[int, int]]
         ] = None,
         on_header_menu_click: Optional[
-            Union[EventType[()], EventType[int], EventType[int, Rectangle]]
-        ] = None,
-        on_item_hovered: Optional[
-            Union[EventType[()], EventType[tuple[int, int]]]
+            EventType[()] | EventType[int] | EventType[int, Rectangle]
         ] = None,
+        on_item_hovered: Optional[EventType[()] | EventType[tuple[int, int]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,

reflex/components/datadisplay/logo.py

@@ -1,12 +1,10 @@
 """A Reflex logo component."""
 
-from typing import Union
-
 import reflex as rx
 
 
 def svg_logo(
-    color: Union[str, rx.Var[str]] = rx.color_mode_cond("#110F1F", "white"),
+    color: str | rx.Var[str] = rx.color_mode_cond("#110F1F", "white"),
     **props,
 ):
     """A Reflex logo SVG.

reflex/components/datadisplay/shiki_code_block.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 
 import re
 from collections import defaultdict
-from typing import Any, Literal, Optional, Union
+from typing import Any, Literal
 
 from reflex.base import Base
 from reflex.components.component import Component, ComponentNamespace
@@ -403,8 +403,8 @@ class Position(NoExtrasAllowedProps):
 class ShikiDecorations(NoExtrasAllowedProps):
     """Decorations for the code block."""
 
-    start: Union[int, Position]
-    end: Union[int, Position]
+    start: int | Position
+    end: int | Position
     tag_name: str = "span"
     properties: dict[str, Any] = {}
     always_wrap: bool = False
@@ -415,7 +415,7 @@ class ShikiBaseTransformers(Base):
 
     library: str
     fns: list[FunctionStringVar]
-    style: Optional[Style]
+    style: Style | None
 
 
 class ShikiJsTransformer(ShikiBaseTransformers):
@@ -425,7 +425,7 @@ class ShikiJsTransformer(ShikiBaseTransformers):
     fns: list[FunctionStringVar] = [
         FunctionStringVar.create(fn) for fn in SHIKIJS_TRANSFORMER_FNS
     ]
-    style: Optional[Style] = Style(
+    style: Style | None = Style(
         {
             "code": {"line-height": "1.7", "font-size": "0.875em", "display": "grid"},
             # Diffs
@@ -547,15 +547,13 @@ class ShikiCodeBlock(Component, MarkdownComponentMap):
     theme: Var[LiteralCodeTheme] = Var.create("one-light")
 
     # The set of themes to use for different modes.
-    themes: Var[Union[list[dict[str, Any]], dict[str, str]]]
+    themes: Var[list[dict[str, Any]] | dict[str, str]]
 
     # The code to display.
     code: Var[str]
 
     # The transformers to use for the syntax highlighter.
-    transformers: Var[list[Union[ShikiBaseTransformers, dict[str, Any]]]] = Var.create(
-        []
-    )
+    transformers: Var[list[ShikiBaseTransformers | dict[str, Any]]] = Var.create([])
 
     # The decorations to use for the syntax highlighter.
     decorations: Var[list[ShikiDecorations]] = Var.create([])
@@ -717,7 +715,7 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
     can_copy: bool = False
 
     # copy_button: A custom copy button to override the default one.
-    copy_button: Optional[Union[Component, bool]] = None
+    copy_button: Component | bool | None = None
 
     @classmethod
     def create(

reflex/components/el/element.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,12 +16,12 @@ class Element(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/el/elements/base.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.el.element import Element
 from reflex.event import EventType
@@ -94,217 +94,190 @@ class BaseHTML(Element):
     def create(  # type: ignore
         cls,
         *children,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/el/elements/forms.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 from hashlib import md5
-from typing import Any, Dict, Iterator, Literal, Set, Tuple, Union
+from typing import Any, Iterator, Literal
 
 from jinja2 import Environment
 
@@ -80,7 +80,7 @@ class Button(BaseHTML):
     type: Var[ButtonType]
 
     # Value of the button, used when sending form data
-    value: Var[Union[str, int, float]]
+    value: Var[str | int | float]
 
 
 class Datalist(BaseHTML):
@@ -104,7 +104,7 @@ class Fieldset(Element):
     name: Var[str]
 
 
-def on_submit_event_spec() -> Tuple[Var[dict[str, Any]]]:
+def on_submit_event_spec() -> tuple[Var[dict[str, Any]]]:
     """Event handler spec for the on_submit event.
 
     Returns:
@@ -113,7 +113,7 @@ def on_submit_event_spec() -> Tuple[Var[dict[str, Any]]]:
     return (FORM_DATA,)
 
 
-def on_submit_string_event_spec() -> Tuple[Var[dict[str, str]]]:
+def on_submit_string_event_spec() -> tuple[Var[dict[str, str]]]:
     """Event handler spec for the on_submit event.
 
     Returns:
@@ -232,7 +232,7 @@ class Form(BaseHTML):
             )
         return render_tag
 
-    def _get_form_refs(self) -> Dict[str, Any]:
+    def _get_form_refs(self) -> dict[str, Any]:
         # Send all the input refs to the handler.
         form_refs = {}
         for ref in self._get_all_refs():
@@ -321,7 +321,7 @@ class Input(BaseHTML):
     default_checked: Var[bool]
 
     # The initial value for a text field
-    default_value: Var[Union[str, int, float]]
+    default_value: Var[str | int | float]
 
     # Disables the input
     disabled: Var[bool]
@@ -348,16 +348,16 @@ class Input(BaseHTML):
     list: Var[str]
 
     # Specifies the maximum value for the input
-    max: Var[Union[str, int, float]]
+    max: Var[str | int | float]
 
     # Specifies the maximum number of characters allowed in the input
-    max_length: Var[Union[int, float]]
+    max_length: Var[int | float]
 
     # Specifies the minimum number of characters required in the input
-    min_length: Var[Union[int, float]]
+    min_length: Var[int | float]
 
     # Specifies the minimum value for the input
-    min: Var[Union[str, int, float]]
+    min: Var[str | int | float]
 
     # Indicates whether multiple values can be entered in an input of the type email or file
     multiple: Var[bool]
@@ -378,19 +378,19 @@ class Input(BaseHTML):
     required: Var[bool]
 
     # Specifies the visible width of a text control
-    size: Var[Union[int, float]]
+    size: Var[int | float]
 
     # URL for image inputs
     src: Var[str]
 
     # Specifies the legal number intervals for an input
-    step: Var[Union[str, int, float]]
+    step: Var[str | int | float]
 
     # Specifies the type of input
     type: Var[HTMLInputTypeAttribute]
 
     # Value of the input
-    value: Var[Union[str, int, float]]
+    value: Var[str | int | float]
 
     # Fired when the input value changes
     on_change: EventHandler[input_event]
@@ -462,22 +462,22 @@ class Meter(BaseHTML):
     form: Var[str]
 
     # High limit of range (above this is considered high value)
-    high: Var[Union[int, float]]
+    high: Var[int | float]
 
     # Low limit of range (below this is considered low value)
-    low: Var[Union[int, float]]
+    low: Var[int | float]
 
     # Maximum value of the range
-    max: Var[Union[int, float]]
+    max: Var[int | float]
 
     # Minimum value of the range
-    min: Var[Union[int, float]]
+    min: Var[int | float]
 
     # Optimum value in the range
-    optimum: Var[Union[int, float]]
+    optimum: Var[int | float]
 
     # Current value of the meter
-    value: Var[Union[int, float]]
+    value: Var[int | float]
 
 
 class Optgroup(BaseHTML):
@@ -507,7 +507,7 @@ class Option(BaseHTML):
     selected: Var[bool]
 
     # Value to be sent as form data
-    value: Var[Union[str, int, float]]
+    value: Var[str | int | float]
 
 
 class Output(BaseHTML):
@@ -534,10 +534,10 @@ class Progress(BaseHTML):
     form: Var[str]
 
     # Maximum value of the progress indicator
-    max: Var[Union[str, int, float]]
+    max: Var[str | int | float]
 
     # Current value of the progress indicator
-    value: Var[Union[str, int, float]]
+    value: Var[str | int | float]
 
 
 class Select(BaseHTML):
@@ -720,7 +720,7 @@ class Textarea(BaseHTML):
             "enter_key_submit",
         ]
 
-    def _get_all_custom_code(self) -> Set[str]:
+    def _get_all_custom_code(self) -> set[str]:
         """Include the custom code for auto_height and enter_key_submit functionality.
 
         Returns:

reflex/components/el/elements/inline.py

@@ -1,6 +1,6 @@
 """Inline classes."""
 
-from typing import Literal, Union
+from typing import Literal
 
 from reflex.vars.base import Var
 
@@ -25,7 +25,7 @@ class A(BaseHTML):  # Inherits common attributes from BaseMeta
     tag = "a"
 
     # Specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
-    download: Var[Union[str, bool]]
+    download: Var[str | bool]
 
     # Specifies the URL of the page the link goes to
     href: Var[str]
@@ -46,7 +46,7 @@ class A(BaseHTML):  # Inherits common attributes from BaseMeta
     rel: Var[str]
 
     # Specifies where to open the linked document
-    target: Var[Union[str, Literal["_self", "_blank", "_parent", "_top"]]]
+    target: Var[str | Literal["_self", "_blank", "_parent", "_top"]]
 
 
 class Abbr(BaseHTML):
@@ -97,7 +97,7 @@ class Data(BaseHTML):
     tag = "data"
 
     # Specifies the machine-readable translation of the data element.
-    value: Var[Union[str, int, float]]
+    value: Var[str | int | float]
 
 
 class Dfn(BaseHTML):

reflex/components/el/elements/media.py

@@ -1,6 +1,6 @@
 """Media classes."""
 
-from typing import Any, Literal, Union
+from typing import Any, Literal
 
 from reflex import Component, ComponentNamespace
 from reflex.components.el.elements.inline import ReferrerPolicy
@@ -22,7 +22,7 @@ class Area(BaseHTML):
     coords: Var[str]
 
     # Specifies that the target will be downloaded when clicked
-    download: Var[Union[str, bool]]
+    download: Var[str | bool]
 
     # Hyperlink reference for the area
     href: Var[str]
@@ -291,9 +291,9 @@ class Svg(BaseHTML):
 
     tag = "svg"
     # The width of the svg.
-    width: Var[Union[str, int]]
+    width: Var[str | int]
     # The height of the svg.
-    height: Var[Union[str, int]]
+    height: Var[str | int]
     # The XML namespace declaration.
     xmlns: Var[str]
 
@@ -303,19 +303,19 @@ class Text(BaseHTML):
 
     tag = "text"
     # The x coordinate of the starting point of the text baseline.
-    x: Var[Union[str, int]]
+    x: Var[str | int]
     # The y coordinate of the starting point of the text baseline.
-    y: Var[Union[str, int]]
+    y: Var[str | int]
     # Shifts the text position horizontally from a previous text element.
-    dx: Var[Union[str, int]]
+    dx: Var[str | int]
     # Shifts the text position vertically from a previous text element.
-    dy: Var[Union[str, int]]
+    dy: Var[str | int]
     # Rotates orientation of each individual glyph.
-    rotate: Var[Union[str, int]]
+    rotate: Var[str | int]
     # How the text is stretched or compressed to fit the width defined by the text_length attribute.
     length_adjust: Var[str]
     # A width that the text should be scaled to fit.
-    text_length: Var[Union[str, int]]
+    text_length: Var[str | int]
 
 
 class Line(BaseHTML):
@@ -323,13 +323,13 @@ class Line(BaseHTML):
 
     tag = "line"
     # The x-axis coordinate of the line starting point.
-    x1: Var[Union[str, int]]
+    x1: Var[str | int]
     # The x-axis coordinate of the the line ending point.
-    x2: Var[Union[str, int]]
+    x2: Var[str | int]
     # The y-axis coordinate of the line starting point.
-    y1: Var[Union[str, int]]
+    y1: Var[str | int]
     # The y-axis coordinate of the the line ending point.
-    y2: Var[Union[str, int]]
+    y2: Var[str | int]
     # The total path length, in user units.
     path_length: Var[int]
 
@@ -339,11 +339,11 @@ class Circle(BaseHTML):
 
     tag = "circle"
     # The x-axis coordinate of the center of the circle.
-    cx: Var[Union[str, int]]
+    cx: Var[str | int]
     # The y-axis coordinate of the center of the circle.
-    cy: Var[Union[str, int]]
+    cy: Var[str | int]
     # The radius of the circle.
-    r: Var[Union[str, int]]
+    r: Var[str | int]
     # The total length for the circle's circumference, in user units.
     path_length: Var[int]
 
@@ -353,13 +353,13 @@ class Ellipse(BaseHTML):
 
     tag = "ellipse"
     # The x position of the center of the ellipse.
-    cx: Var[Union[str, int]]
+    cx: Var[str | int]
     # The y position of the center of the ellipse.
-    cy: Var[Union[str, int]]
+    cy: Var[str | int]
     # The radius of the ellipse on the x axis.
-    rx: Var[Union[str, int]]
+    rx: Var[str | int]
     # The radius of the ellipse on the y axis.
-    ry: Var[Union[str, int]]
+    ry: Var[str | int]
     # The total length for the ellipse's circumference, in user units.
     path_length: Var[int]
 
@@ -369,17 +369,17 @@ class Rect(BaseHTML):
 
     tag = "rect"
     # The x coordinate of the rect.
-    x: Var[Union[str, int]]
+    x: Var[str | int]
     # The y coordinate of the rect.
-    y: Var[Union[str, int]]
+    y: Var[str | int]
     # The width of the rect
-    width: Var[Union[str, int]]
+    width: Var[str | int]
     # The height of the rect.
-    height: Var[Union[str, int]]
+    height: Var[str | int]
     # The horizontal corner radius of the rect. Defaults to ry if it is specified.
-    rx: Var[Union[str, int]]
+    rx: Var[str | int]
     # The vertical corner radius of the rect. Defaults to rx if it is specified.
-    ry: Var[Union[str, int]]
+    ry: Var[str | int]
     # The total length of the rectangle's perimeter, in user units.
     path_length: Var[int]
 
@@ -406,25 +406,25 @@ class LinearGradient(BaseHTML):
     tag = "linearGradient"
 
     # Units for the gradient.
-    gradient_units: Var[Union[str, bool]]
+    gradient_units: Var[str | bool]
 
     # Transform applied to the gradient.
-    gradient_transform: Var[Union[str, bool]]
+    gradient_transform: Var[str | bool]
 
     # Method used to spread the gradient.
-    spread_method: Var[Union[str, bool]]
+    spread_method: Var[str | bool]
 
     # X coordinate of the starting point of the gradient.
-    x1: Var[Union[str, int, float]]
+    x1: Var[str | int | float]
 
     # X coordinate of the ending point of the gradient.
-    x2: Var[Union[str, int, float]]
+    x2: Var[str | int | float]
 
     # Y coordinate of the starting point of the gradient.
-    y1: Var[Union[str, int, float]]
+    y1: Var[str | int | float]
 
     # Y coordinate of the ending point of the gradient.
-    y2: Var[Union[str, int, float]]
+    y2: Var[str | int | float]
 
 
 class RadialGradient(BaseHTML):
@@ -433,31 +433,31 @@ class RadialGradient(BaseHTML):
     tag = "radialGradient"
 
     # The x coordinate of the end circle of the radial gradient.
-    cx: Var[Union[str, int, float]]
+    cx: Var[str | int | float]
 
     # The y coordinate of the end circle of the radial gradient.
-    cy: Var[Union[str, int, float]]
+    cy: Var[str | int | float]
 
     # The radius of the start circle of the radial gradient.
-    fr: Var[Union[str, int, float]]
+    fr: Var[str | int | float]
 
     # The x coordinate of the start circle of the radial gradient.
-    fx: Var[Union[str, int, float]]
+    fx: Var[str | int | float]
 
     # The y coordinate of the start circle of the radial gradient.
-    fy: Var[Union[str, int, float]]
+    fy: Var[str | int | float]
 
     # Units for the gradient.
-    gradient_units: Var[Union[str, bool]]
+    gradient_units: Var[str | bool]
 
     # Transform applied to the gradient.
-    gradient_transform: Var[Union[str, bool]]
+    gradient_transform: Var[str | bool]
 
     # The radius of the end circle of the radial gradient.
-    r: Var[Union[str, int, float]]
+    r: Var[str | int | float]
 
     # Method used to spread the gradient.
-    spread_method: Var[Union[str, bool]]
+    spread_method: Var[str | bool]
 
 
 class Stop(BaseHTML):
@@ -466,13 +466,13 @@ class Stop(BaseHTML):
     tag = "stop"
 
     # Offset of the gradient stop.
-    offset: Var[Union[str, float, int]]
+    offset: Var[str | float | int]
 
     # Color of the gradient stop.
-    stop_color: Var[Union[str, Color, bool]]
+    stop_color: Var[str | Color | bool]
 
     # Opacity of the gradient stop.
-    stop_opacity: Var[Union[str, float, int, bool]]
+    stop_opacity: Var[str | float | int | bool]
 
 
 class Path(BaseHTML):
@@ -481,7 +481,7 @@ class Path(BaseHTML):
     tag = "path"
 
     # Defines the shape of the path.
-    d: Var[Union[str, int, float]]
+    d: Var[str | int | float]
 
 
 class SVG(ComponentNamespace):

reflex/components/el/elements/metadata.py

@@ -1,7 +1,5 @@
 """Metadata classes."""
 
-from typing import List
-
 from reflex.components.el.element import Element
 from reflex.components.el.elements.inline import ReferrerPolicy
 from reflex.components.el.elements.media import CrossOrigin
@@ -91,7 +89,7 @@ class StyleEl(Element):
 
     media: Var[str]
 
-    special_props: List[Var] = [Var(_js_expr="suppressHydrationWarning")]
+    special_props: list[Var] = [Var(_js_expr="suppressHydrationWarning")]
 
 
 base = Base.create

reflex/components/el/elements/scripts.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.event import EventType
 from reflex.style import Style
@@ -17,217 +17,190 @@ class Canvas(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -284,217 +257,190 @@ class Noscript(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -551,257 +497,224 @@ class Script(BaseHTML):
     def create(  # type: ignore
         cls,
         *children,
-        async_: Optional[Union[Var[bool], bool]] = None,
-        char_set: Optional[Union[Var[str], str]] = None,
-        cross_origin: Optional[
-            Union[
-                Literal["", "anonymous", "use-credentials"],
-                Var[Literal["", "anonymous", "use-credentials"]],
-            ]
-        ] = None,
-        defer: Optional[Union[Var[bool], bool]] = None,
-        integrity: Optional[Union[Var[str], str]] = None,
-        referrer_policy: Optional[
-            Union[
-                Literal[
-                    "",
-                    "no-referrer",
-                    "no-referrer-when-downgrade",
-                    "origin",
-                    "origin-when-cross-origin",
-                    "same-origin",
-                    "strict-origin",
-                    "strict-origin-when-cross-origin",
-                    "unsafe-url",
-                ],
-                Var[
-                    Literal[
-                        "",
-                        "no-referrer",
-                        "no-referrer-when-downgrade",
-                        "origin",
-                        "origin-when-cross-origin",
-                        "same-origin",
-                        "strict-origin",
-                        "strict-origin-when-cross-origin",
-                        "unsafe-url",
-                    ]
-                ],
-            ]
-        ] = None,
-        src: Optional[Union[Var[str], str]] = None,
-        type: Optional[Union[Var[str], str]] = None,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
+        async_: Var[bool] | bool | None = None,
+        char_set: Var[str] | str | None = None,
+        cross_origin: Literal["", "anonymous", "use-credentials"]
+        | Var[Literal["", "anonymous", "use-credentials"]]
+        | None = None,
+        defer: Var[bool] | bool | None = None,
+        integrity: Var[str] | str | None = None,
+        referrer_policy: Literal[
+            "",
+            "no-referrer",
+            "no-referrer-when-downgrade",
+            "origin",
+            "origin-when-cross-origin",
+            "same-origin",
+            "strict-origin",
+            "strict-origin-when-cross-origin",
+            "unsafe-url",
+        ]
+        | Var[
+            Literal[
+                "",
+                "no-referrer",
+                "no-referrer-when-downgrade",
+                "origin",
+                "origin-when-cross-origin",
+                "same-origin",
+                "strict-origin",
+                "strict-origin-when-cross-origin",
+                "unsafe-url",
             ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
+        ]
+        | None = None,
+        src: Var[str] | str | None = None,
+        type: Var[str] | str | None = None,
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/gridjs/datatable.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Dict, List, Union
+from typing import Any, Dict, List
 
 from reflex.components.component import Component
 from reflex.components.tags import Tag
@@ -17,7 +17,7 @@ class Gridjs(Component):
 
     library = "gridjs-react@6.1.1"
 
-    lib_dependencies: List[str] = ["gridjs@6.2.0"]
+    lib_dependencies: list[str] = ["gridjs@6.2.0"]
 
 
 class DataTable(Gridjs):
@@ -44,7 +44,7 @@ class DataTable(Gridjs):
     resizable: Var[bool]
 
     # Enable pagination.
-    pagination: Var[Union[bool, Dict]]
+    pagination: Var[bool | Dict]
 
     @classmethod
     def create(cls, *children, **props):
@@ -115,11 +115,11 @@ class DataTable(Gridjs):
         if isinstance(self.data, Var) and types.is_dataframe(self.data._var_type):
             self.columns = self.data._replace(
                 _js_expr=f"{self.data._js_expr}.columns",
-                _var_type=List[Any],
+                _var_type=list[Any],
             )
             self.data = self.data._replace(
                 _js_expr=f"{self.data._js_expr}.data",
-                _var_type=List[List[Any]],
+                _var_type=list[list[Any]],
             )
         if types.is_dataframe(type(self.data)):
             # If given a pandas df break up the data and columns

reflex/components/gridjs/datatable.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, List, Optional, Union, overload
+from typing import Any, Dict, List, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -17,12 +17,12 @@ class Gridjs(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -63,18 +63,18 @@ class DataTable(Gridjs):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Any] = None,
-        columns: Optional[Union[List, Var[List]]] = None,
-        search: Optional[Union[Var[bool], bool]] = None,
-        sort: Optional[Union[Var[bool], bool]] = None,
-        resizable: Optional[Union[Var[bool], bool]] = None,
-        pagination: Optional[Union[Dict, Var[Union[Dict, 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, Any]]] = None,
+        data: Any | None = None,
+        columns: List | Var[List] | None = None,
+        search: Var[bool] | bool | None = None,
+        sort: Var[bool] | bool | None = None,
+        resizable: Var[bool] | bool | None = None,
+        pagination: Dict | Var[Dict | bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/lucide/icon.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,12 +16,12 @@ class LucideIconComponent(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -62,13 +62,13 @@ class Icon(LucideIconComponent):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[int], int]] = 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, Any]]] = None,
+        size: Var[int] | int | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -117,13 +117,13 @@ class DynamicIcon(LucideIconComponent):
     def create(  # type: ignore
         cls,
         *children,
-        name: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        name: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/markdown/markdown.py

@@ -6,7 +6,7 @@ import dataclasses
 import textwrap
 from functools import lru_cache
 from hashlib import md5
-from typing import Any, Callable, Dict, Sequence
+from typing import Any, Callable, Sequence
 
 from reflex.components.component import BaseComponent, Component, CustomComponent
 from reflex.components.tags.tag import Tag
@@ -149,7 +149,7 @@ class Markdown(Component):
     is_default = True
 
     # The component map from a tag to a lambda that creates a component.
-    component_map: Dict[str, Any] = {}
+    component_map: dict[str, Any] = {}
 
     # The hash of the component map, generated at create() time.
     component_map_hash: str = ""

reflex/components/markdown/markdown.pyi

@@ -5,7 +5,7 @@
 # ------------------------------------------------------
 import dataclasses
 from functools import lru_cache
-from typing import Any, Callable, Dict, Optional, Sequence, Union, overload
+from typing import Any, Callable, Optional, Sequence, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -52,14 +52,14 @@ class Markdown(Component):
     def create(  # type: ignore
         cls,
         *children,
-        component_map: Optional[Dict[str, Any]] = None,
-        component_map_hash: Optional[str] = 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, Any]]] = None,
+        component_map: dict[str, Any] | None = None,
+        component_map_hash: str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/moment/moment.py

@@ -2,7 +2,6 @@
 
 import dataclasses
 from datetime import date, datetime, time, timedelta
-from typing import List, Optional, Union
 
 from reflex.components.component import NoSSRComponent
 from reflex.event import EventHandler, passthrough_event_spec
@@ -14,15 +13,15 @@ from reflex.vars.base import LiteralVar, Var
 class MomentDelta:
     """A delta used for add/subtract prop in Moment."""
 
-    years: Optional[int] = dataclasses.field(default=None)
-    quarters: Optional[int] = dataclasses.field(default=None)
-    months: Optional[int] = dataclasses.field(default=None)
-    weeks: Optional[int] = dataclasses.field(default=None)
-    days: Optional[int] = dataclasses.field(default=None)
-    hours: Optional[int] = dataclasses.field(default=None)
-    minutes: Optional[int] = dataclasses.field(default=None)
-    seconds: Optional[int] = dataclasses.field(default=None)
-    milliseconds: Optional[int] = dataclasses.field(default=None)
+    years: int | None = dataclasses.field(default=None)
+    quarters: int | None = dataclasses.field(default=None)
+    months: int | None = dataclasses.field(default=None)
+    weeks: int | None = dataclasses.field(default=None)
+    days: int | None = dataclasses.field(default=None)
+    hours: int | None = dataclasses.field(default=None)
+    minutes: int | None = dataclasses.field(default=None)
+    seconds: int | None = dataclasses.field(default=None)
+    milliseconds: int | None = dataclasses.field(default=None)
 
 
 class Moment(NoSSRComponent):
@@ -31,7 +30,7 @@ class Moment(NoSSRComponent):
     tag: str | None = "Moment"
     is_default = True
     library: str | None = "react-moment"
-    lib_dependencies: List[str] = ["moment"]
+    lib_dependencies: list[str] = ["moment"]
 
     # How often the date update (how often time update / 0 to disable).
     interval: Var[int]
@@ -79,7 +78,7 @@ class Moment(NoSSRComponent):
     duration: Var[str]
 
     # The date to display (also work if passed as children).
-    date: Var[Union[str, datetime, date, time, timedelta]]
+    date: Var[str | datetime | date | time | timedelta]
 
     # Shows the duration (elapsed time) between now and the provided datetime.
     duration_from_now: Var[bool]

reflex/components/moment/moment.pyi

@@ -5,7 +5,7 @@
 # ------------------------------------------------------
 import dataclasses
 from datetime import date, datetime, time, timedelta
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import NoSSRComponent
 from reflex.event import EventType
@@ -15,15 +15,15 @@ from reflex.vars.base import Var
 
 @dataclasses.dataclass(frozen=True)
 class MomentDelta:
-    years: Optional[int]
-    quarters: Optional[int]
-    months: Optional[int]
-    weeks: Optional[int]
-    days: Optional[int]
-    hours: Optional[int]
-    minutes: Optional[int]
-    seconds: Optional[int]
-    milliseconds: Optional[int]
+    years: int | None
+    quarters: int | None
+    months: int | None
+    weeks: int | None
+    days: int | None
+    hours: int | None
+    minutes: int | None
+    seconds: int | None
+    milliseconds: int | None
 
 class Moment(NoSSRComponent):
     def add_imports(self) -> ImportDict: ...
@@ -32,44 +32,41 @@ class Moment(NoSSRComponent):
     def create(  # type: ignore
         cls,
         *children,
-        interval: Optional[Union[Var[int], int]] = None,
-        format: Optional[Union[Var[str], str]] = None,
-        trim: Optional[Union[Var[bool], bool]] = None,
-        parse: Optional[Union[Var[str], str]] = None,
-        add: Optional[Union[MomentDelta, Var[MomentDelta]]] = None,
-        subtract: Optional[Union[MomentDelta, Var[MomentDelta]]] = None,
-        from_now: Optional[Union[Var[bool], bool]] = None,
-        from_now_during: Optional[Union[Var[int], int]] = None,
-        to_now: Optional[Union[Var[bool], bool]] = None,
-        with_title: Optional[Union[Var[bool], bool]] = None,
-        title_format: Optional[Union[Var[str], str]] = None,
-        diff: Optional[Union[Var[str], str]] = None,
-        decimal: Optional[Union[Var[bool], bool]] = None,
-        unit: Optional[Union[Var[str], str]] = None,
-        duration: Optional[Union[Var[str], str]] = None,
-        date: Optional[
-            Union[
-                Var[Union[date, datetime, str, time, timedelta]],
-                date,
-                datetime,
-                str,
-                time,
-                timedelta,
-            ]
-        ] = None,
-        duration_from_now: Optional[Union[Var[bool], bool]] = None,
-        unix: Optional[Union[Var[bool], bool]] = None,
-        local: Optional[Union[Var[bool], bool]] = None,
-        tz: Optional[Union[Var[str], str]] = None,
-        locale: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        interval: Var[int] | int | None = None,
+        format: Var[str] | str | None = None,
+        trim: Var[bool] | bool | None = None,
+        parse: Var[str] | str | None = None,
+        add: MomentDelta | Var[MomentDelta] | None = None,
+        subtract: MomentDelta | Var[MomentDelta] | None = None,
+        from_now: Var[bool] | bool | None = None,
+        from_now_during: Var[int] | int | None = None,
+        to_now: Var[bool] | bool | None = None,
+        with_title: Var[bool] | bool | None = None,
+        title_format: Var[str] | str | None = None,
+        diff: Var[str] | str | None = None,
+        decimal: Var[bool] | bool | None = None,
+        unit: Var[str] | str | None = None,
+        duration: Var[str] | str | None = None,
+        date: Var[date | datetime | str | time | timedelta]
+        | date
+        | datetime
+        | str
+        | time
+        | timedelta
+        | None = None,
+        duration_from_now: Var[bool] | bool | None = None,
+        unix: Var[bool] | bool | None = None,
+        local: Var[bool] | bool | None = None,
+        tz: Var[str] | str | None = None,
+        locale: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
-        on_change: Optional[Union[EventType[()], EventType[str]]] = None,
+        on_change: Optional[EventType[()] | EventType[str]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,

reflex/components/next/base.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -18,12 +18,12 @@ class NextComponent(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/next/image.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Literal, Optional, Union
+from typing import Any, Literal
 
 from reflex.event import EventHandler, no_args_event_spec
 from reflex.utils import console, types
@@ -69,8 +69,8 @@ class Image(NextComponent):
     def create(
         cls,
         *children,
-        width: Optional[Union[int, str]] = None,
-        height: Optional[Union[int, str]] = None,
+        width: int | str | None = None,
+        height: int | str | None = None,
         **props,
     ):
         """Create an Image component from next/image.

reflex/components/next/image.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.event import EventType
 from reflex.style import Style
@@ -19,26 +19,24 @@ class Image(NextComponent):
     def create(  # type: ignore
         cls,
         *children,
-        width: Optional[Union[int, str]] = None,
-        height: Optional[Union[int, str]] = None,
-        src: Optional[Union[Any, Var[Any]]] = None,
-        alt: Optional[Union[Var[str], str]] = None,
-        loader: Optional[Union[Any, Var[Any]]] = None,
-        fill: Optional[Union[Var[bool], bool]] = None,
-        sizes: Optional[Union[Var[str], str]] = None,
-        quality: Optional[Union[Var[int], int]] = None,
-        priority: Optional[Union[Var[bool], bool]] = None,
-        placeholder: Optional[Union[Var[str], str]] = None,
-        loading: Optional[
-            Union[Literal["eager", "lazy"], Var[Literal["eager", "lazy"]]]
-        ] = None,
-        blur_data_url: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        width: int | str | None = None,
+        height: int | str | None = None,
+        src: Any | Var[Any] | None = None,
+        alt: Var[str] | str | None = None,
+        loader: Any | Var[Any] | None = None,
+        fill: Var[bool] | bool | None = None,
+        sizes: Var[str] | str | None = None,
+        quality: Var[int] | int | None = None,
+        priority: Var[bool] | bool | None = None,
+        placeholder: Var[str] | str | None = None,
+        loading: Literal["eager", "lazy"] | Var[Literal["eager", "lazy"]] | None = None,
+        blur_data_url: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/next/link.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,14 +16,14 @@ class NextLink(Component):
     def create(  # type: ignore
         cls,
         *children,
-        href: Optional[Union[Var[str], str]] = None,
-        pass_href: 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, Any]]] = None,
+        href: Var[str] | str | None = None,
+        pass_href: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/next/video.py

@@ -1,7 +1,5 @@
 """Wrapping of the next-video component."""
 
-from typing import Optional
-
 from reflex.components.component import Component
 from reflex.vars.base import Var
 
@@ -17,7 +15,7 @@ class Video(NextComponent):
     # the URL
     src: Var[str]
 
-    as_: Optional[Component]
+    as_: Component | None
 
     @classmethod
     def create(cls, *children, **props) -> NextComponent:

reflex/components/next/video.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -18,14 +18,14 @@ class Video(NextComponent):
     def create(  # type: ignore
         cls,
         *children,
-        src: Optional[Union[Var[str], str]] = None,
-        as_: Optional[Component] = 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, Any]]] = None,
+        src: Var[str] | str | None = None,
+        as_: Component | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/plotly/plotly.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Dict, List, Tuple, TypedDict, TypeVar, Union
+from typing import Any, Dict, TypedDict, TypeVar
 
 from reflex.components.component import Component, NoSSRComponent
 from reflex.components.core.cond import color_mode_cond
@@ -21,7 +21,7 @@ except ImportError:
     Template = Any
 
 
-def _event_points_data_signature(e0: Var) -> Tuple[Var[List[Point]]]:
+def _event_points_data_signature(e0: Var) -> tuple[Var[list[Point]]]:
     """For plotly events with event data containing a point array.
 
     Args:
@@ -35,58 +35,35 @@ def _event_points_data_signature(e0: Var) -> Tuple[Var[List[Point]]]:
 
 T = TypeVar("T")
 
-ItemOrList = Union[T, List[T]]
+ItemOrList = T | list[T]
 
 
 class BBox(TypedDict):
     """Bounding box for a point in a plotly graph."""
 
-    x0: Union[float, int, None]
-    x1: Union[float, int, None]
-    y0: Union[float, int, None]
-    y1: Union[float, int, None]
-    z0: Union[float, int, None]
-    z1: Union[float, int, None]
+    x0: float | int | None
+    x1: float | int | None
+    y0: float | int | None
+    y1: float | int | None
+    z0: float | int | None
+    z1: float | int | None
 
 
 class Point(TypedDict):
     """A point in a plotly graph."""
 
-    x: Union[float, int, None]
-    y: Union[float, int, None]
-    z: Union[float, int, None]
-    lat: Union[float, int, None]
-    lon: Union[float, int, None]
-    curveNumber: Union[int, None]
-    pointNumber: Union[int, None]
-    pointNumbers: Union[List[int], None]
-    pointIndex: Union[int, None]
-    markerColor: Union[
-        ItemOrList[
-            ItemOrList[
-                Union[
-                    float,
-                    int,
-                    str,
-                    None,
-                ]
-            ]
-        ],
-        None,
-    ]
-    markerSize: Union[
-        ItemOrList[
-            ItemOrList[
-                Union[
-                    float,
-                    int,
-                    None,
-                ]
-            ]
-        ],
-        None,
-    ]
-    bbox: Union[BBox, None]
+    x: float | int | None
+    y: float | int | None
+    z: float | int | None
+    lat: float | int | None
+    lon: float | int | None
+    curveNumber: int | None
+    pointNumber: int | None
+    pointNumbers: list[int] | None
+    pointIndex: int | None
+    markerColor: ItemOrList[ItemOrList[float | int | str | None]] | None
+    markerSize: ItemOrList[ItemOrList[float | int | None,]] | None
+    bbox: BBox | None
 
 
 class Plotly(NoSSRComponent):
@@ -94,7 +71,7 @@ class Plotly(NoSSRComponent):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: List[str] = ["plotly.js@2.35.3"]
+    lib_dependencies: list[str] = ["plotly.js@2.35.3"]
 
     tag = "Plot"
 

reflex/components/plotly/plotly.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, List, Optional, TypedDict, TypeVar, Union, overload
+from typing import Any, Dict, Optional, TypedDict, TypeVar, overload
 
 from reflex.components.component import NoSSRComponent
 from reflex.event import EventType
@@ -21,29 +21,29 @@ except ImportError:
     Figure = Any
     Template = Any
 T = TypeVar("T")
-ItemOrList = Union[T, List[T]]
+ItemOrList = T | list[T]
 
 class BBox(TypedDict):
-    x0: Union[float, int, None]
-    x1: Union[float, int, None]
-    y0: Union[float, int, None]
-    y1: Union[float, int, None]
-    z0: Union[float, int, None]
-    z1: Union[float, int, None]
+    x0: float | int | None
+    x1: float | int | None
+    y0: float | int | None
+    y1: float | int | None
+    z0: float | int | None
+    z1: float | int | None
 
 class Point(TypedDict):
-    x: Union[float, int, None]
-    y: Union[float, int, None]
-    z: Union[float, int, None]
-    lat: Union[float, int, None]
-    lon: Union[float, int, None]
-    curveNumber: Union[int, None]
-    pointNumber: Union[int, None]
-    pointNumbers: Union[List[int], None]
-    pointIndex: Union[int, None]
-    markerColor: Union[ItemOrList[ItemOrList[Union[float, int, str, None]]], None]
-    markerSize: Union[ItemOrList[ItemOrList[Union[float, int, None]]], None]
-    bbox: Union[BBox, None]
+    x: float | int | None
+    y: float | int | None
+    z: float | int | None
+    lat: float | int | None
+    lon: float | int | None
+    curveNumber: int | None
+    pointNumber: int | None
+    pointNumbers: list[int] | None
+    pointIndex: int | None
+    markerColor: ItemOrList[ItemOrList[float | int | str | None]] | None
+    markerSize: ItemOrList[ItemOrList[float | int | None,]] | None
+    bbox: BBox | None
 
 class Plotly(NoSSRComponent):
     def add_imports(self) -> dict[str, str]: ...
@@ -53,17 +53,17 @@ class Plotly(NoSSRComponent):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -72,12 +72,12 @@ class Plotly(NoSSRComponent):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -91,11 +91,11 @@ class Plotly(NoSSRComponent):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "Plotly":
@@ -152,17 +152,17 @@ class PlotlyBasic(Plotly):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -171,12 +171,12 @@ class PlotlyBasic(Plotly):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -190,11 +190,11 @@ class PlotlyBasic(Plotly):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "PlotlyBasic":
@@ -247,17 +247,17 @@ class PlotlyCartesian(Plotly):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -266,12 +266,12 @@ class PlotlyCartesian(Plotly):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -285,11 +285,11 @@ class PlotlyCartesian(Plotly):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "PlotlyCartesian":
@@ -342,17 +342,17 @@ class PlotlyGeo(Plotly):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -361,12 +361,12 @@ class PlotlyGeo(Plotly):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -380,11 +380,11 @@ class PlotlyGeo(Plotly):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "PlotlyGeo":
@@ -437,17 +437,17 @@ class PlotlyGl3d(Plotly):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -456,12 +456,12 @@ class PlotlyGl3d(Plotly):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -475,11 +475,11 @@ class PlotlyGl3d(Plotly):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "PlotlyGl3d":
@@ -532,17 +532,17 @@ class PlotlyGl2d(Plotly):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -551,12 +551,12 @@ class PlotlyGl2d(Plotly):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -570,11 +570,11 @@ class PlotlyGl2d(Plotly):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "PlotlyGl2d":
@@ -627,17 +627,17 @@ class PlotlyMapbox(Plotly):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -646,12 +646,12 @@ class PlotlyMapbox(Plotly):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -665,11 +665,11 @@ class PlotlyMapbox(Plotly):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "PlotlyMapbox":
@@ -722,17 +722,17 @@ class PlotlyFinance(Plotly):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -741,12 +741,12 @@ class PlotlyFinance(Plotly):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -760,11 +760,11 @@ class PlotlyFinance(Plotly):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "PlotlyFinance":
@@ -817,17 +817,17 @@ class PlotlyStrict(Plotly):
     def create(  # type: ignore
         cls,
         *children,
-        data: Optional[Union[Figure, Var[Figure]]] = None,  # type: ignore
-        layout: Optional[Union[Dict, Var[Dict]]] = None,
-        template: Optional[Union[Template, Var[Template]]] = None,  # type: ignore
-        config: Optional[Union[Dict, Var[Dict]]] = None,
-        use_resize_handler: 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, Any]]] = None,
+        data: Figure | Var[Figure] | None = None,  # type: ignore
+        layout: Dict | Var[Dict] | None = None,
+        template: Template | Var[Template] | None = None,  # type: ignore
+        config: Dict | Var[Dict] | None = None,
+        use_resize_handler: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_after_plot: Optional[EventType[()]] = None,
         on_animated: Optional[EventType[()]] = None,
         on_animating_frame: Optional[EventType[()]] = None,
@@ -836,12 +836,12 @@ class PlotlyStrict(Plotly):
         on_before_hover: Optional[EventType[()]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_button_clicked: Optional[EventType[()]] = None,
-        on_click: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_click: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_deselect: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
         on_focus: Optional[EventType[()]] = None,
-        on_hover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_hover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_mount: Optional[EventType[()]] = None,
         on_mouse_down: Optional[EventType[()]] = None,
         on_mouse_enter: Optional[EventType[()]] = None,
@@ -855,11 +855,11 @@ class PlotlyStrict(Plotly):
         on_relayouting: Optional[EventType[()]] = None,
         on_restyle: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
-        on_selected: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
-        on_selecting: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_selected: Optional[EventType[()] | EventType[list[Point]]] = None,
+        on_selecting: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_transition_interrupted: Optional[EventType[()]] = None,
         on_transitioning: Optional[EventType[()]] = None,
-        on_unhover: Optional[Union[EventType[()], EventType[List[Point]]]] = None,
+        on_unhover: Optional[EventType[()] | EventType[list[Point]]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
     ) -> "PlotlyStrict":

reflex/components/radix/primitives/accordion.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, List, Literal, Tuple, Union
+from typing import Any, Literal
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
@@ -72,7 +72,7 @@ class AccordionComponent(RadixPrimitiveComponent):
         return ["color_scheme", "variant"]
 
 
-def on_value_change(value: Var[str | List[str]]) -> Tuple[Var[str | List[str]]]:
+def on_value_change(value: Var[str | list[str]]) -> tuple[Var[str | list[str]]]:
     """Handle the on_value_change event.
 
     Args:
@@ -95,10 +95,10 @@ class AccordionRoot(AccordionComponent):
     type: Var[LiteralAccordionType]
 
     # The value of the item to expand.
-    value: Var[Union[str, List[str]]]
+    value: Var[str | list[str]]
 
     # The default value of the item to expand.
-    default_value: Var[Union[str, List[str]]]
+    default_value: Var[str | list[str]]
 
     # Whether or not the accordion is collapsible.
     collapsible: Var[bool]
@@ -124,7 +124,7 @@ class AccordionRoot(AccordionComponent):
     # Whether to show divider lines between items.
     show_dividers: Var[bool]
 
-    _valid_children: List[str] = ["AccordionItem"]
+    _valid_children: list[str] = ["AccordionItem"]
 
     # Fired when the opened the accordions changes.
     on_value_change: EventHandler[on_value_change]
@@ -196,18 +196,18 @@ class AccordionItem(AccordionComponent):
     disabled: Var[bool]
 
     # The header of the accordion item.
-    header: Var[Union[Component, str]]
+    header: Var[Component | str]
 
     # The content of the accordion item.
-    content: Var[Union[Component, str, None]] = Var.create(None)
+    content: Var[Component | str | None] = Var.create(None)
 
-    _valid_children: List[str] = [
+    _valid_children: list[str] = [
         "AccordionHeader",
         "AccordionTrigger",
         "AccordionContent",
     ]
 
-    _valid_parents: List[str] = ["AccordionRoot"]
+    _valid_parents: list[str] = ["AccordionRoot"]
 
     @classmethod
     def create(

reflex/components/radix/primitives/accordion.pyi

@@ -3,7 +3,7 @@
 # ------------------- 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, Literal, Optional, overload
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.lucide.icon import Icon
@@ -26,81 +26,75 @@ class AccordionComponent(RadixPrimitiveComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "outline", "soft", "surface"],
-                Var[Literal["classic", "ghost", "outline", "soft", "surface"]],
-            ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "outline", "soft", "surface"]
+        | Var[Literal["classic", "ghost", "outline", "soft", "surface"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -138,7 +132,7 @@ class AccordionComponent(RadixPrimitiveComponent):
         """
         ...
 
-def on_value_change(value: Var[str | List[str]]) -> Tuple[Var[str | List[str]]]: ...
+def on_value_change(value: Var[str | list[str]]) -> tuple[Var[str | list[str]]]: ...
 
 class AccordionRoot(AccordionComponent):
     def add_style(self): ...
@@ -147,106 +141,92 @@ class AccordionRoot(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        type: Optional[
-            Union[Literal["multiple", "single"], Var[Literal["multiple", "single"]]]
-        ] = None,
-        value: Optional[Union[List[str], Var[Union[List[str], str]], str]] = None,
-        default_value: Optional[
-            Union[List[str], Var[Union[List[str], str]], str]
-        ] = None,
-        collapsible: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        dir: Optional[Union[Literal["ltr", "rtl"], Var[Literal["ltr", "rtl"]]]] = None,
-        orientation: Optional[
-            Union[
-                Literal["horizontal", "vertical"],
-                Var[Literal["horizontal", "vertical"]],
-            ]
-        ] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
-            ]
-        ] = None,
-        duration: Optional[Union[Var[int], int]] = None,
-        easing: Optional[Union[Var[str], str]] = None,
-        show_dividers: Optional[Union[Var[bool], bool]] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "outline", "soft", "surface"],
-                Var[Literal["classic", "ghost", "outline", "soft", "surface"]],
+        type: Literal["multiple", "single"]
+        | Var[Literal["multiple", "single"]]
+        | None = None,
+        value: Var[list[str] | str] | list[str] | str | None = None,
+        default_value: Var[list[str] | str] | list[str] | str | None = None,
+        collapsible: Var[bool] | bool | None = None,
+        disabled: Var[bool] | bool | None = None,
+        dir: Literal["ltr", "rtl"] | Var[Literal["ltr", "rtl"]] | None = None,
+        orientation: Literal["horizontal", "vertical"]
+        | Var[Literal["horizontal", "vertical"]]
+        | None = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        duration: Var[int] | int | None = None,
+        easing: Var[str] | str | None = None,
+        show_dividers: Var[bool] | bool | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "outline", "soft", "surface"]
+        | Var[Literal["classic", "ghost", "outline", "soft", "surface"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -262,9 +242,7 @@ class AccordionRoot(AccordionComponent):
         on_mouse_up: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
         on_unmount: Optional[EventType[()]] = None,
-        on_value_change: Optional[
-            Union[EventType[()], EventType[str | List[str]]]
-        ] = None,
+        on_value_change: Optional[EventType[()] | EventType[str | list[str]]] = None,
         **props,
     ) -> "AccordionRoot":
         """Create the component.
@@ -305,87 +283,79 @@ class AccordionItem(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        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[Optional[Union[Component, str]]], str]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
+        value: Var[str] | str | None = None,
+        disabled: Var[bool] | bool | None = None,
+        header: Component | Var[Component | str] | str | None = None,
+        content: Component | Var[Component | str | None] | str | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "outline", "soft", "surface"],
-                Var[Literal["classic", "ghost", "outline", "soft", "surface"]],
-            ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "outline", "soft", "surface"]
+        | Var[Literal["classic", "ghost", "outline", "soft", "surface"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -435,81 +405,75 @@ class AccordionHeader(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "outline", "soft", "surface"],
-                Var[Literal["classic", "ghost", "outline", "soft", "surface"]],
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "outline", "soft", "surface"]
+        | Var[Literal["classic", "ghost", "outline", "soft", "surface"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -555,81 +519,75 @@ class AccordionTrigger(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "outline", "soft", "surface"],
-                Var[Literal["classic", "ghost", "outline", "soft", "surface"]],
-            ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "outline", "soft", "surface"]
+        | Var[Literal["classic", "ghost", "outline", "soft", "surface"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -675,13 +633,13 @@ class AccordionIcon(Icon):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[int], int]] = 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, Any]]] = None,
+        size: Var[int] | int | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -724,81 +682,75 @@ class AccordionContent(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "outline", "soft", "surface"],
-                Var[Literal["classic", "ghost", "outline", "soft", "surface"]],
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "outline", "soft", "surface"]
+        | Var[Literal["classic", "ghost", "outline", "soft", "surface"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/primitives/base.py

@@ -1,7 +1,5 @@
 """The base component for Radix primitives."""
 
-from typing import List
-
 from reflex.components.component import Component
 from reflex.components.tags.tag import Tag
 from reflex.utils import format
@@ -14,7 +12,7 @@ class RadixPrimitiveComponent(Component):
     # Change the default rendered element for the one passed as a child.
     as_child: Var[bool]
 
-    lib_dependencies: List[str] = ["@emotion/react@^11.11.1"]
+    lib_dependencies: list[str] = ["@emotion/react@^11.11.1"]
 
 
 class RadixPrimitiveComponentWithClassName(RadixPrimitiveComponent):

reflex/components/radix/primitives/base.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.components.component import Component
 from reflex.event import EventType
@@ -16,13 +16,13 @@ class RadixPrimitiveComponent(Component):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -64,13 +64,13 @@ class RadixPrimitiveComponentWithClassName(RadixPrimitiveComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/primitives/drawer.py

@@ -4,7 +4,7 @@
 # Style based on https://ui.shadcn.com/docs/components/drawer
 from __future__ import annotations
 
-from typing import Any, List, Literal, Optional, Union
+from typing import Any, Literal
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.primitives.base import RadixPrimitiveComponent
@@ -20,7 +20,7 @@ class DrawerComponent(RadixPrimitiveComponent):
 
     library = "vaul"
 
-    lib_dependencies: List[str] = ["@radix-ui/react-dialog@^1.0.5"]
+    lib_dependencies: list[str] = ["@radix-ui/react-dialog@^1.0.5"]
 
 
 LiteralDirectionType = Literal["top", "bottom", "left", "right"]
@@ -58,7 +58,7 @@ class DrawerRoot(DrawerComponent):
     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]]]
+    snap_points: list[str | float] | None
 
     # Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
     fade_from_index: Var[int]

reflex/components/radix/primitives/drawer.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, List, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.radix.primitives.base import RadixPrimitiveComponent
@@ -17,13 +17,13 @@ class DrawerComponent(RadixPrimitiveComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -67,31 +67,28 @@ class DrawerRoot(DrawerComponent):
     def create(  # type: ignore
         cls,
         *children,
-        default_open: Optional[Union[Var[bool], bool]] = None,
-        open: Optional[Union[Var[bool], bool]] = None,
-        modal: Optional[Union[Var[bool], bool]] = None,
-        direction: Optional[
-            Union[
-                Literal["bottom", "left", "right", "top"],
-                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,
-        prevent_scroll_restoration: 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,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_animation_end: Optional[Union[EventType[()], EventType[bool]]] = None,
+        default_open: Var[bool] | bool | None = None,
+        open: Var[bool] | bool | None = None,
+        modal: Var[bool] | bool | None = None,
+        direction: Literal["bottom", "left", "right", "top"]
+        | Var[Literal["bottom", "left", "right", "top"]]
+        | None = None,
+        dismissible: Var[bool] | bool | None = None,
+        handle_only: Var[bool] | bool | None = None,
+        snap_points: list[float | str] | None = None,
+        fade_from_index: Var[int] | int | None = None,
+        scroll_lock_timeout: Var[int] | int | None = None,
+        prevent_scroll_restoration: Var[bool] | bool | None = None,
+        should_scale_background: Var[bool] | bool | None = None,
+        close_threshold: Var[float] | float | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_animation_end: Optional[EventType[()] | EventType[bool]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -105,7 +102,7 @@ class DrawerRoot(DrawerComponent):
         on_mouse_out: Optional[EventType[()]] = None,
         on_mouse_over: Optional[EventType[()]] = None,
         on_mouse_up: Optional[EventType[()]] = None,
-        on_open_change: Optional[Union[EventType[()], EventType[bool]]] = None,
+        on_open_change: Optional[EventType[()] | EventType[bool]] = None,
         on_scroll: Optional[EventType[()]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
@@ -148,13 +145,13 @@ class DrawerTrigger(DrawerComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -196,13 +193,13 @@ class DrawerPortal(DrawerComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -244,13 +241,13 @@ class DrawerContent(DrawerComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_close_auto_focus: Optional[EventType[()]] = None,
@@ -301,13 +298,13 @@ class DrawerOverlay(DrawerComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -349,13 +346,13 @@ class DrawerClose(DrawerTrigger):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -397,13 +394,13 @@ class DrawerTitle(DrawerComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -445,13 +442,13 @@ class DrawerDescription(DrawerComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -493,13 +490,13 @@ class DrawerHandle(DrawerComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -549,31 +546,28 @@ class Drawer(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        default_open: Optional[Union[Var[bool], bool]] = None,
-        open: Optional[Union[Var[bool], bool]] = None,
-        modal: Optional[Union[Var[bool], bool]] = None,
-        direction: Optional[
-            Union[
-                Literal["bottom", "left", "right", "top"],
-                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,
-        prevent_scroll_restoration: 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,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
-        on_animation_end: Optional[Union[EventType[()], EventType[bool]]] = None,
+        default_open: Var[bool] | bool | None = None,
+        open: Var[bool] | bool | None = None,
+        modal: Var[bool] | bool | None = None,
+        direction: Literal["bottom", "left", "right", "top"]
+        | Var[Literal["bottom", "left", "right", "top"]]
+        | None = None,
+        dismissible: Var[bool] | bool | None = None,
+        handle_only: Var[bool] | bool | None = None,
+        snap_points: list[float | str] | None = None,
+        fade_from_index: Var[int] | int | None = None,
+        scroll_lock_timeout: Var[int] | int | None = None,
+        prevent_scroll_restoration: Var[bool] | bool | None = None,
+        should_scale_background: Var[bool] | bool | None = None,
+        close_threshold: Var[float] | float | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
+        on_animation_end: Optional[EventType[()] | EventType[bool]] = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -587,7 +581,7 @@ class Drawer(ComponentNamespace):
         on_mouse_out: Optional[EventType[()]] = None,
         on_mouse_over: Optional[EventType[()]] = None,
         on_mouse_up: Optional[EventType[()]] = None,
-        on_open_change: Optional[Union[EventType[()], EventType[bool]]] = None,
+        on_open_change: Optional[EventType[()] | EventType[bool]] = None,
         on_scroll: Optional[EventType[()]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,

reflex/components/radix/primitives/progress.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Optional
+from typing import Any
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
@@ -58,10 +58,10 @@ class ProgressIndicator(ProgressComponent):
     alias = "RadixProgressIndicator"
 
     # The current progress value.
-    value: Var[Optional[int]]
+    value: Var[int | None]
 
     # The maximum progress value.
-    max: Var[Optional[int]]
+    max: Var[int | None]
 
     # The color scheme of the progress indicator.
     color_scheme: Var[LiteralAccentColor]
@@ -98,10 +98,10 @@ class Progress(ProgressRoot):
     color_scheme: Var[LiteralAccentColor]
 
     # The current progress value.
-    value: Var[Optional[int]]
+    value: Var[int | None]
 
     # The maximum progress value.
-    max: Var[Optional[int]]
+    max: Var[int | None]
 
     @classmethod
     def create(cls, **props) -> Component:

reflex/components/radix/primitives/progress.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
@@ -17,13 +17,13 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -66,19 +66,16 @@ class ProgressRoot(ProgressComponent):
     def create(  # type: ignore
         cls,
         *children,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
-            ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -122,77 +119,74 @@ class ProgressIndicator(ProgressComponent):
     def create(  # type: ignore
         cls,
         *children,
-        value: Optional[Union[Var[Optional[int]], int]] = None,
-        max: Optional[Union[Var[Optional[int]], int]] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
+        value: Var[int | None] | int | None = None,
+        max: Var[int | None] | int | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -237,83 +231,77 @@ class Progress(ProgressRoot):
     def create(  # type: ignore
         cls,
         *children,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        value: Optional[Union[Var[Optional[int]], int]] = None,
-        max: Optional[Union[Var[Optional[int]], int]] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        value: Var[int | None] | int | None = None,
+        max: Var[int | None] | int | None = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -359,83 +347,77 @@ class ProgressNamespace(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        value: Optional[Union[Var[Optional[int]], int]] = None,
-        max: Optional[Union[Var[Optional[int]], int]] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        value: Var[int | None] | int | None = None,
+        max: Var[int | None] | int | None = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/primitives/slider.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, List, Literal, Tuple
+from typing import Any, Literal
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
@@ -20,8 +20,8 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
 
 
 def on_value_event_spec(
-    value: Var[List[int]],
-) -> Tuple[Var[List[int]]]:
+    value: Var[list[int]],
+) -> tuple[Var[list[int]]]:
     """Event handler spec for the value event.
 
     Args:
@@ -39,9 +39,9 @@ class SliderRoot(SliderComponent):
     tag = "Root"
     alias = "RadixSliderRoot"
 
-    default_value: Var[List[int]]
+    default_value: Var[list[int]]
 
-    value: Var[List[int]]
+    value: Var[list[int]]
 
     name: Var[str]
 

reflex/components/radix/primitives/slider.pyi

@@ -3,7 +3,7 @@
 # ------------------- 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, Literal, Optional, overload
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
@@ -20,13 +20,13 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -62,7 +62,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
         """
         ...
 
-def on_value_event_spec(value: Var[List[int]]) -> Tuple[Var[List[int]]]: ...
+def on_value_event_spec(value: Var[list[int]]) -> tuple[Var[list[int]]]: ...
 
 class SliderRoot(SliderComponent):
     def add_style(self) -> dict[str, Any] | None: ...
@@ -71,29 +71,26 @@ class SliderRoot(SliderComponent):
     def create(  # type: ignore
         cls,
         *children,
-        default_value: Optional[Union[List[int], Var[List[int]]]] = None,
-        value: Optional[Union[List[int], Var[List[int]]]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        orientation: Optional[
-            Union[
-                Literal["horizontal", "vertical"],
-                Var[Literal["horizontal", "vertical"]],
-            ]
-        ] = None,
-        dir: Optional[Union[Literal["ltr", "rtl"], Var[Literal["ltr", "rtl"]]]] = None,
-        inverted: Optional[Union[Var[bool], bool]] = None,
-        min: Optional[Union[Var[int], int]] = None,
-        max: Optional[Union[Var[int], int]] = None,
-        step: Optional[Union[Var[int], int]] = None,
-        min_steps_between_thumbs: Optional[Union[Var[int], int]] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        default_value: Var[list[int]] | list[int] | None = None,
+        value: Var[list[int]] | list[int] | None = None,
+        name: Var[str] | str | None = None,
+        disabled: Var[bool] | bool | None = None,
+        orientation: Literal["horizontal", "vertical"]
+        | Var[Literal["horizontal", "vertical"]]
+        | None = None,
+        dir: Literal["ltr", "rtl"] | Var[Literal["ltr", "rtl"]] | None = None,
+        inverted: Var[bool] | bool | None = None,
+        min: Var[int] | int | None = None,
+        max: Var[int] | int | None = None,
+        step: Var[int] | int | None = None,
+        min_steps_between_thumbs: Var[int] | int | None = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -109,8 +106,8 @@ class SliderRoot(SliderComponent):
         on_mouse_up: Optional[EventType[()]] = None,
         on_scroll: Optional[EventType[()]] = None,
         on_unmount: Optional[EventType[()]] = None,
-        on_value_change: Optional[Union[EventType[()], EventType[List[int]]]] = None,
-        on_value_commit: Optional[Union[EventType[()], EventType[List[int]]]] = None,
+        on_value_change: Optional[EventType[()] | EventType[list[int]]] = None,
+        on_value_commit: Optional[EventType[()] | EventType[list[int]]] = None,
         **props,
     ) -> "SliderRoot":
         """Create the component.
@@ -140,13 +137,13 @@ class SliderTrack(SliderComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -189,13 +186,13 @@ class SliderRange(SliderComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -238,13 +235,13 @@ class SliderThumb(SliderComponent):
     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, Any]]] = None,
+        as_child: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/themes/base.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Dict, Literal
+from typing import Any, Literal
 
 from reflex.components import Component
 from reflex.components.core.breakpoints import Responsive
@@ -113,7 +113,7 @@ class RadixThemesComponent(Component):
     library = "@radix-ui/themes@^3.0.0"
 
     # "Fake" prop color_scheme is used to avoid shadowing CSS prop "color".
-    _rename_props: Dict[str, str] = {"colorScheme": "color"}
+    _rename_props: dict[str, str] = {"colorScheme": "color"}
 
     @classmethod
     def create(

reflex/components/radix/themes/base.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components import Component
 from reflex.components.core.breakpoints import Breakpoints
@@ -56,54 +56,33 @@ class CommonMarginProps(Component):
     def create(  # type: ignore
         cls,
         *children,
-        m: 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,
-        mx: 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,
-        my: 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,
-        mt: 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,
-        mr: 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,
-        mb: 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,
-        ml: 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,
-        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, Any]]] = None,
+        m: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        mx: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        my: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        mt: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        mr: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        mb: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        ml: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -151,131 +130,61 @@ class CommonPaddingProps(Component):
     def create(  # type: ignore
         cls,
         *children,
-        p: Optional[
-            Union[
-                Breakpoints[
-                    str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-                ],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                Var[
-                    Union[
-                        Breakpoints[
-                            str,
-                            Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                        ],
-                        Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                    ]
-                ],
-            ]
-        ] = None,
-        px: Optional[
-            Union[
-                Breakpoints[
-                    str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-                ],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                Var[
-                    Union[
-                        Breakpoints[
-                            str,
-                            Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                        ],
-                        Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                    ]
-                ],
-            ]
-        ] = None,
-        py: Optional[
-            Union[
-                Breakpoints[
-                    str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-                ],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                Var[
-                    Union[
-                        Breakpoints[
-                            str,
-                            Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                        ],
-                        Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                    ]
-                ],
-            ]
-        ] = None,
-        pt: Optional[
-            Union[
-                Breakpoints[
-                    str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-                ],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                Var[
-                    Union[
-                        Breakpoints[
-                            str,
-                            Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                        ],
-                        Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                    ]
-                ],
-            ]
-        ] = None,
-        pr: Optional[
-            Union[
-                Breakpoints[
-                    str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-                ],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                Var[
-                    Union[
-                        Breakpoints[
-                            str,
-                            Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                        ],
-                        Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                    ]
-                ],
-            ]
-        ] = None,
-        pb: Optional[
-            Union[
-                Breakpoints[
-                    str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-                ],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                Var[
-                    Union[
-                        Breakpoints[
-                            str,
-                            Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                        ],
-                        Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                    ]
-                ],
-            ]
-        ] = None,
-        pl: Optional[
-            Union[
-                Breakpoints[
-                    str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-                ],
-                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                Var[
-                    Union[
-                        Breakpoints[
-                            str,
-                            Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                        ],
-                        Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                    ]
-                ],
-            ]
-        ] = 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, Any]]] = None,
+        p: Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[
+            Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+            | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        ]
+        | None = None,
+        px: Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[
+            Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+            | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        ]
+        | None = None,
+        py: Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[
+            Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+            | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        ]
+        | None = None,
+        pt: Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[
+            Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+            | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        ]
+        | None = None,
+        pr: Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[
+            Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+            | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        ]
+        | None = None,
+        pb: Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[
+            Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+            | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        ]
+        | None = None,
+        pl: Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[
+            Breakpoints[str, Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+            | Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        ]
+        | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -323,13 +232,13 @@ class RadixLoadingProp(Component):
     def create(  # type: ignore
         cls,
         *children,
-        loading: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        loading: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -371,12 +280,12 @@ class RadixThemesComponent(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -420,12 +329,12 @@ class RadixThemesTriggerComponent(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -460,104 +369,89 @@ class Theme(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color_mode: Optional[Literal["dark", "inherit", "light"]] = None,
-        theme_panel: Optional[bool] = False,
-        has_background: Optional[Union[Var[bool], bool]] = None,
-        appearance: Optional[
-            Union[
-                Literal["dark", "inherit", "light"],
-                Var[Literal["dark", "inherit", "light"]],
-            ]
-        ] = None,
-        accent_color: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        gray_color: Optional[
-            Union[
-                Literal["auto", "gray", "mauve", "olive", "sage", "sand", "slate"],
-                Var[Literal["auto", "gray", "mauve", "olive", "sage", "sand", "slate"]],
-            ]
-        ] = None,
-        panel_background: Optional[
-            Union[Literal["solid", "translucent"], Var[Literal["solid", "translucent"]]]
-        ] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
-            ]
-        ] = None,
-        scaling: Optional[
-            Union[
-                Literal["100%", "105%", "110%", "90%", "95%"],
-                Var[Literal["100%", "105%", "110%", "90%", "95%"]],
+        color_mode: Literal["dark", "inherit", "light"] | None = None,
+        theme_panel: bool | None = False,
+        has_background: Var[bool] | bool | None = None,
+        appearance: Literal["dark", "inherit", "light"]
+        | Var[Literal["dark", "inherit", "light"]]
+        | None = None,
+        accent_color: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = 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, Any]]] = None,
+        ]
+        | None = None,
+        gray_color: Literal["auto", "gray", "mauve", "olive", "sage", "sand", "slate"]
+        | Var[Literal["auto", "gray", "mauve", "olive", "sage", "sand", "slate"]]
+        | None = None,
+        panel_background: Literal["solid", "translucent"]
+        | Var[Literal["solid", "translucent"]]
+        | None = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        scaling: Literal["100%", "105%", "110%", "90%", "95%"]
+        | Var[Literal["100%", "105%", "110%", "90%", "95%"]]
+        | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -610,13 +504,13 @@ class ThemePanel(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        default_open: 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, Any]]] = None,
+        default_open: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -661,12 +555,12 @@ class RadixThemesColorModeProvider(Component):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/themes/color_mode.py

@@ -17,7 +17,7 @@ rx.text(
 
 from __future__ import annotations
 
-from typing import Any, Dict, List, Literal, Optional, Union, get_args
+from typing import Any, Literal, get_args
 
 from reflex.components.component import BaseComponent
 from reflex.components.core.cond import Cond, color_mode_cond, cond
@@ -66,9 +66,9 @@ class ColorModeIcon(Cond):
 
 LiteralPosition = Literal["top-left", "top-right", "bottom-left", "bottom-right"]
 
-position_values: List[str] = list(get_args(LiteralPosition))
+position_values: list[str] = list(get_args(LiteralPosition))
 
-position_map: Dict[str, List[str]] = {
+position_map: dict[str, list[str]] = {
     "position": position_values,
     "left": ["top-left", "bottom-left"],
     "right": ["top-right", "bottom-right"],
@@ -78,7 +78,7 @@ position_map: Dict[str, List[str]] = {
 
 
 # needed to inverse contains for find
-def _find(const: List[str], var: Any):
+def _find(const: list[str], var: Any):
     return LiteralArrayVar.create(const).contains(var)
 
 
@@ -99,7 +99,7 @@ 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
+    position: LiteralPosition | Var[LiteralPosition] | None = None
 
     # Allow picking the "system" value for the color mode.
     allow_system: bool = False

reflex/components/radix/themes/color_mode.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, List, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.component import BaseComponent
 from reflex.components.core.breakpoints import Breakpoints
@@ -25,15 +25,15 @@ class ColorModeIcon(Cond):
     def create(  # type: ignore
         cls,
         *children,
-        cond: Optional[Union[Any, Var[Any]]] = None,
-        comp1: Optional[BaseComponent] = None,
-        comp2: Optional[BaseComponent] = 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, Any]]] = None,
+        cond: Any | Var[Any] | None = None,
+        comp1: BaseComponent | None = None,
+        comp2: BaseComponent | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -63,8 +63,8 @@ class ColorModeIcon(Cond):
         ...
 
 LiteralPosition = Literal["top-left", "top-right", "bottom-left", "bottom-right"]
-position_values: List[str]
-position_map: Dict[str, List[str]]
+position_values: list[str]
+position_map: dict[str, list[str]]
 
 class ColorModeIconButton(IconButton):
     @overload
@@ -72,334 +72,282 @@ 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"]
-                    ],
-                ],
+        position: Literal["bottom-left", "bottom-right", "top-left", "top-right"]
+        | Literal["bottom-left", "bottom-right", "top-left", "top-right"]
+        | Var[Literal["bottom-left", "bottom-right", "top-left", "top-right"]]
+        | None = None,
+        allow_system: bool | None = None,
+        as_child: Var[bool] | bool | None = None,
+        size: Breakpoints[str, Literal["1", "2", "3", "4"]]
+        | Literal["1", "2", "3", "4"]
+        | Var[
+            Breakpoints[str, Literal["1", "2", "3", "4"]] | Literal["1", "2", "3", "4"]
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "outline", "soft", "solid", "surface"]
+        | Var[Literal["classic", "ghost", "outline", "soft", "solid", "surface"]]
+        | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        allow_system: Optional[bool] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[
-            Union[
-                Breakpoints[str, Literal["1", "2", "3", "4"]],
-                Literal["1", "2", "3", "4"],
-                Var[
-                    Union[
-                        Breakpoints[str, Literal["1", "2", "3", "4"]],
-                        Literal["1", "2", "3", "4"],
-                    ]
-                ],
+        ]
+        | None = None,
+        high_contrast: Var[bool] | bool | None = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        auto_focus: Var[bool] | bool | None = None,
+        disabled: Var[bool] | bool | None = None,
+        form: Var[str] | str | None = None,
+        form_action: Var[str] | str | None = None,
+        form_enc_type: Var[str] | str | None = None,
+        form_method: Var[str] | str | None = None,
+        form_no_validate: Var[bool] | bool | None = None,
+        form_target: Var[str] | str | None = None,
+        name: Var[str] | str | None = None,
+        type: Literal["button", "reset", "submit"]
+        | Var[Literal["button", "reset", "submit"]]
+        | None = None,
+        value: Var[float | int | str] | float | int | str | None = None,
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "outline", "soft", "solid", "surface"],
-                Var[Literal["classic", "ghost", "outline", "soft", "solid", "surface"]],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
-            ]
-        ] = None,
-        auto_focus: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        form: Optional[Union[Var[str], str]] = None,
-        form_action: Optional[Union[Var[str], str]] = None,
-        form_enc_type: Optional[Union[Var[str], str]] = None,
-        form_method: Optional[Union[Var[str], str]] = None,
-        form_no_validate: Optional[Union[Var[bool], bool]] = None,
-        form_target: Optional[Union[Var[str], str]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        type: Optional[
-            Union[
-                Literal["button", "reset", "submit"],
-                Var[Literal["button", "reset", "submit"]],
-            ]
-        ] = None,
-        value: Optional[Union[Var[Union[float, int, str]], float, int, str]] = None,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = None,
-        loading: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        loading: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -475,106 +423,91 @@ class ColorModeSwitch(Switch):
     def create(  # type: ignore
         cls,
         *children,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        default_checked: Optional[Union[Var[bool], bool]] = None,
-        checked: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = 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,
-        variant: Optional[
-            Union[
-                Literal["classic", "soft", "surface"],
-                Var[Literal["classic", "soft", "surface"]],
-            ]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "none", "small"], Var[Literal["full", "none", "small"]]
+        as_child: Var[bool] | bool | None = None,
+        default_checked: Var[bool] | bool | None = None,
+        checked: Var[bool] | bool | None = None,
+        disabled: Var[bool] | bool | None = None,
+        required: Var[bool] | bool | None = None,
+        name: Var[str] | str | None = None,
+        value: Var[str] | str | None = None,
+        size: Breakpoints[str, Literal["1", "2", "3"]]
+        | Literal["1", "2", "3"]
+        | Var[Breakpoints[str, Literal["1", "2", "3"]] | Literal["1", "2", "3"]]
+        | None = None,
+        variant: Literal["classic", "soft", "surface"]
+        | Var[Literal["classic", "soft", "surface"]]
+        | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = 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, Any]]] = None,
+        ]
+        | None = None,
+        high_contrast: Var[bool] | bool | None = None,
+        radius: Literal["full", "none", "small"]
+        | Var[Literal["full", "none", "small"]]
+        | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
-        on_change: Optional[Union[EventType[()], EventType[bool]]] = None,
+        on_change: Optional[EventType[()] | EventType[bool]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,

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

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Breakpoints
@@ -22,14 +22,14 @@ class AlertDialogRoot(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,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        open: Var[bool] | bool | None = None,
+        default_open: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -43,7 +43,7 @@ class AlertDialogRoot(RadixThemesComponent):
         on_mouse_out: Optional[EventType[()]] = None,
         on_mouse_over: Optional[EventType[()]] = None,
         on_mouse_up: Optional[EventType[()]] = None,
-        on_open_change: Optional[Union[EventType[()], EventType[bool]]] = None,
+        on_open_change: Optional[EventType[()] | EventType[bool]] = None,
         on_scroll: Optional[EventType[()]] = None,
         on_unmount: Optional[EventType[()]] = None,
         **props,
@@ -77,12 +77,12 @@ class AlertDialogTrigger(RadixThemesTriggerComponent):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -117,230 +117,197 @@ class AlertDialogContent(elements.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[
-            Union[
-                Breakpoints[str, Literal["1", "2", "3", "4"]],
-                Literal["1", "2", "3", "4"],
-                Var[
-                    Union[
-                        Breakpoints[str, Literal["1", "2", "3", "4"]],
-                        Literal["1", "2", "3", "4"],
-                    ]
-                ],
+        size: Breakpoints[str, Literal["1", "2", "3", "4"]]
+        | Literal["1", "2", "3", "4"]
+        | Var[
+            Breakpoints[str, Literal["1", "2", "3", "4"]] | Literal["1", "2", "3", "4"]
+        ]
+        | None = None,
+        force_mount: Var[bool] | bool | None = None,
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        force_mount: Optional[Union[Var[bool], bool]] = None,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_close_auto_focus: Optional[EventType[()]] = None,
@@ -408,12 +375,12 @@ class AlertDialogTitle(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -457,12 +424,12 @@ class AlertDialogDescription(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -506,12 +473,12 @@ class AlertDialogAction(RadixThemesTriggerComponent):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
@@ -546,12 +513,12 @@ class AlertDialogCancel(RadixThemesTriggerComponent):
     def create(  # type: ignore
         cls,
         *children,
-        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, Any]]] = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/themes/components/aspect_ratio.py

@@ -1,7 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
 
-from typing import Union
-
 from reflex.vars.base import Var
 
 from ..base import RadixThemesComponent
@@ -13,7 +11,7 @@ class AspectRatio(RadixThemesComponent):
     tag = "AspectRatio"
 
     # The ratio of the width to the height of the element
-    ratio: Var[Union[float, int]]
+    ratio: Var[float | int]
 
 
 aspect_ratio = AspectRatio.create

reflex/components/radix/themes/components/aspect_ratio.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Optional, Union, overload
+from typing import Any, Optional, overload
 
 from reflex.event import EventType
 from reflex.style import Style
@@ -17,13 +17,13 @@ class AspectRatio(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        ratio: Optional[Union[Var[Union[float, int]], float, int]] = 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, Any]]] = None,
+        ratio: Var[float | int] | float | int | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/themes/components/avatar.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.core.breakpoints import Breakpoints
 from reflex.event import EventType
@@ -20,100 +20,85 @@ class Avatar(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        variant: Optional[
-            Union[Literal["soft", "solid"], Var[Literal["soft", "solid"]]]
-        ] = None,
-        size: Optional[
-            Union[
-                Breakpoints[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
-                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                Var[
-                    Union[
-                        Breakpoints[
-                            str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
-                        ],
-                        Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
-                    ]
-                ],
+        variant: Literal["soft", "solid"] | Var[Literal["soft", "solid"]] | None = None,
+        size: Breakpoints[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[
+            Breakpoints[str, Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+            | Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        ]
+        | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
-            ]
-        ] = None,
-        src: Optional[Union[Var[str], str]] = None,
-        fallback: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        high_contrast: Var[bool] | bool | None = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        src: Var[str] | str | None = None,
+        fallback: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/themes/components/badge.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.core.breakpoints import Breakpoints
 from reflex.components.el import elements
@@ -19,303 +19,260 @@ class Badge(elements.Span, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        variant: Optional[
-            Union[
-                Literal["outline", "soft", "solid", "surface"],
-                Var[Literal["outline", "soft", "solid", "surface"]],
+        variant: Literal["outline", "soft", "solid", "surface"]
+        | Var[Literal["outline", "soft", "solid", "surface"]]
+        | None = None,
+        size: Breakpoints[str, Literal["1", "2", "3"]]
+        | Literal["1", "2", "3"]
+        | Var[Breakpoints[str, Literal["1", "2", "3"]] | Literal["1", "2", "3"]]
+        | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = 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 = None,
+        high_contrast: Var[bool] | bool | None = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
-            ]
-        ] = None,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/themes/components/button.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.core.breakpoints import Breakpoints
 from reflex.components.el import elements
@@ -21,322 +21,277 @@ class Button(elements.Button, RadixLoadingProp, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[
-            Union[
-                Breakpoints[str, Literal["1", "2", "3", "4"]],
-                Literal["1", "2", "3", "4"],
-                Var[
-                    Union[
-                        Breakpoints[str, Literal["1", "2", "3", "4"]],
-                        Literal["1", "2", "3", "4"],
-                    ]
-                ],
+        as_child: Var[bool] | bool | None = None,
+        size: Breakpoints[str, Literal["1", "2", "3", "4"]]
+        | Literal["1", "2", "3", "4"]
+        | Var[
+            Breakpoints[str, Literal["1", "2", "3", "4"]] | Literal["1", "2", "3", "4"]
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "outline", "soft", "solid", "surface"]
+        | Var[Literal["classic", "ghost", "outline", "soft", "solid", "surface"]]
+        | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "outline", "soft", "solid", "surface"],
-                Var[Literal["classic", "ghost", "outline", "soft", "solid", "surface"]],
+        ]
+        | None = None,
+        high_contrast: Var[bool] | bool | None = None,
+        radius: Literal["full", "large", "medium", "none", "small"]
+        | Var[Literal["full", "large", "medium", "none", "small"]]
+        | None = None,
+        auto_focus: Var[bool] | bool | None = None,
+        disabled: Var[bool] | bool | None = None,
+        form: Var[str] | str | None = None,
+        form_action: Var[str] | str | None = None,
+        form_enc_type: Var[str] | str | None = None,
+        form_method: Var[str] | str | None = None,
+        form_no_validate: Var[bool] | bool | None = None,
+        form_target: Var[str] | str | None = None,
+        name: Var[str] | str | None = None,
+        type: Literal["button", "reset", "submit"]
+        | Var[Literal["button", "reset", "submit"]]
+        | None = None,
+        value: Var[float | int | str] | float | int | str | None = None,
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
-        radius: Optional[
-            Union[
-                Literal["full", "large", "medium", "none", "small"],
-                Var[Literal["full", "large", "medium", "none", "small"]],
-            ]
-        ] = None,
-        auto_focus: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        form: Optional[Union[Var[str], str]] = None,
-        form_action: Optional[Union[Var[str], str]] = None,
-        form_enc_type: Optional[Union[Var[str], str]] = None,
-        form_method: Optional[Union[Var[str], str]] = None,
-        form_no_validate: Optional[Union[Var[bool], bool]] = None,
-        form_target: Optional[Union[Var[str], str]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        type: Optional[
-            Union[
-                Literal["button", "reset", "submit"],
-                Var[Literal["button", "reset", "submit"]],
-            ]
-        ] = None,
-        value: Optional[Union[Var[Union[float, int, str]], float, int, str]] = None,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = None,
-        loading: Optional[Union[Var[bool], bool]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        loading: Var[bool] | bool | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

reflex/components/radix/themes/components/callout.py

@@ -1,6 +1,6 @@
 """Interactive components provided by @radix-ui/themes."""
 
-from typing import Literal, Union
+from typing import Literal
 
 import reflex as rx
 from reflex.components.component import Component, ComponentNamespace
@@ -57,7 +57,7 @@ class Callout(CalloutRoot):
     icon: Var[str]
 
     @classmethod
-    def create(cls, text: Union[str, Var[str]], **props) -> Component:
+    def create(cls, text: str | Var[str], **props) -> Component:
         """Create a callout component.
 
         Args:

reflex/components/radix/themes/components/card.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.core.breakpoints import Breakpoints
 from reflex.components.el import elements
@@ -19,236 +19,201 @@ class Card(elements.Div, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[
-            Union[
-                Breakpoints[str, Literal["1", "2", "3", "4", "5"]],
-                Literal["1", "2", "3", "4", "5"],
-                Var[
-                    Union[
-                        Breakpoints[str, Literal["1", "2", "3", "4", "5"]],
-                        Literal["1", "2", "3", "4", "5"],
-                    ]
-                ],
+        as_child: Var[bool] | bool | None = None,
+        size: Breakpoints[str, Literal["1", "2", "3", "4", "5"]]
+        | Literal["1", "2", "3", "4", "5"]
+        | Var[
+            Breakpoints[str, Literal["1", "2", "3", "4", "5"]]
+            | Literal["1", "2", "3", "4", "5"]
+        ]
+        | None = None,
+        variant: Literal["classic", "ghost", "surface"]
+        | Var[Literal["classic", "ghost", "surface"]]
+        | None = None,
+        access_key: Var[str] | str | None = None,
+        auto_capitalize: Literal[
+            "characters", "none", "off", "on", "sentences", "words"
+        ]
+        | Var[Literal["characters", "none", "off", "on", "sentences", "words"]]
+        | None = None,
+        content_editable: Literal["inherit", "plaintext-only", False, True]
+        | Var[Literal["inherit", "plaintext-only", False, True]]
+        | None = None,
+        context_menu: Var[str] | str | None = None,
+        dir: Var[str] | str | None = None,
+        draggable: Var[bool] | bool | None = None,
+        enter_key_hint: Literal[
+            "done", "enter", "go", "next", "previous", "search", "send"
+        ]
+        | Var[Literal["done", "enter", "go", "next", "previous", "search", "send"]]
+        | None = None,
+        hidden: Var[bool] | bool | None = None,
+        input_mode: Literal[
+            "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
+        ]
+        | Var[
+            Literal[
+                "decimal", "email", "none", "numeric", "search", "tel", "text", "url"
             ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "ghost", "surface"],
-                Var[Literal["classic", "ghost", "surface"]],
+        ]
+        | None = None,
+        item_prop: Var[str] | str | None = None,
+        lang: Var[str] | str | None = None,
+        role: Literal[
+            "alert",
+            "alertdialog",
+            "application",
+            "article",
+            "banner",
+            "button",
+            "cell",
+            "checkbox",
+            "columnheader",
+            "combobox",
+            "complementary",
+            "contentinfo",
+            "definition",
+            "dialog",
+            "directory",
+            "document",
+            "feed",
+            "figure",
+            "form",
+            "grid",
+            "gridcell",
+            "group",
+            "heading",
+            "img",
+            "link",
+            "list",
+            "listbox",
+            "listitem",
+            "log",
+            "main",
+            "marquee",
+            "math",
+            "menu",
+            "menubar",
+            "menuitem",
+            "menuitemcheckbox",
+            "menuitemradio",
+            "navigation",
+            "none",
+            "note",
+            "option",
+            "presentation",
+            "progressbar",
+            "radio",
+            "radiogroup",
+            "region",
+            "row",
+            "rowgroup",
+            "rowheader",
+            "scrollbar",
+            "search",
+            "searchbox",
+            "separator",
+            "slider",
+            "spinbutton",
+            "status",
+            "switch",
+            "tab",
+            "table",
+            "tablist",
+            "tabpanel",
+            "term",
+            "textbox",
+            "timer",
+            "toolbar",
+            "tooltip",
+            "tree",
+            "treegrid",
+            "treeitem",
+        ]
+        | Var[
+            Literal[
+                "alert",
+                "alertdialog",
+                "application",
+                "article",
+                "banner",
+                "button",
+                "cell",
+                "checkbox",
+                "columnheader",
+                "combobox",
+                "complementary",
+                "contentinfo",
+                "definition",
+                "dialog",
+                "directory",
+                "document",
+                "feed",
+                "figure",
+                "form",
+                "grid",
+                "gridcell",
+                "group",
+                "heading",
+                "img",
+                "link",
+                "list",
+                "listbox",
+                "listitem",
+                "log",
+                "main",
+                "marquee",
+                "math",
+                "menu",
+                "menubar",
+                "menuitem",
+                "menuitemcheckbox",
+                "menuitemradio",
+                "navigation",
+                "none",
+                "note",
+                "option",
+                "presentation",
+                "progressbar",
+                "radio",
+                "radiogroup",
+                "region",
+                "row",
+                "rowgroup",
+                "rowheader",
+                "scrollbar",
+                "search",
+                "searchbox",
+                "separator",
+                "slider",
+                "spinbutton",
+                "status",
+                "switch",
+                "tab",
+                "table",
+                "tablist",
+                "tabpanel",
+                "term",
+                "textbox",
+                "timer",
+                "toolbar",
+                "tooltip",
+                "tree",
+                "treegrid",
+                "treeitem",
             ]
-        ] = None,
-        access_key: Optional[Union[Var[str], str]] = None,
-        auto_capitalize: Optional[
-            Union[
-                Literal["characters", "none", "off", "on", "sentences", "words"],
-                Var[Literal["characters", "none", "off", "on", "sentences", "words"]],
-            ]
-        ] = None,
-        content_editable: Optional[
-            Union[
-                Literal["inherit", "plaintext-only", False, True],
-                Var[Literal["inherit", "plaintext-only", False, True]],
-            ]
-        ] = None,
-        context_menu: Optional[Union[Var[str], str]] = None,
-        dir: Optional[Union[Var[str], str]] = None,
-        draggable: Optional[Union[Var[bool], bool]] = None,
-        enter_key_hint: Optional[
-            Union[
-                Literal["done", "enter", "go", "next", "previous", "search", "send"],
-                Var[
-                    Literal["done", "enter", "go", "next", "previous", "search", "send"]
-                ],
-            ]
-        ] = None,
-        hidden: Optional[Union[Var[bool], bool]] = None,
-        input_mode: Optional[
-            Union[
-                Literal[
-                    "decimal",
-                    "email",
-                    "none",
-                    "numeric",
-                    "search",
-                    "tel",
-                    "text",
-                    "url",
-                ],
-                Var[
-                    Literal[
-                        "decimal",
-                        "email",
-                        "none",
-                        "numeric",
-                        "search",
-                        "tel",
-                        "text",
-                        "url",
-                    ]
-                ],
-            ]
-        ] = None,
-        item_prop: Optional[Union[Var[str], str]] = None,
-        lang: Optional[Union[Var[str], str]] = None,
-        role: Optional[
-            Union[
-                Literal[
-                    "alert",
-                    "alertdialog",
-                    "application",
-                    "article",
-                    "banner",
-                    "button",
-                    "cell",
-                    "checkbox",
-                    "columnheader",
-                    "combobox",
-                    "complementary",
-                    "contentinfo",
-                    "definition",
-                    "dialog",
-                    "directory",
-                    "document",
-                    "feed",
-                    "figure",
-                    "form",
-                    "grid",
-                    "gridcell",
-                    "group",
-                    "heading",
-                    "img",
-                    "link",
-                    "list",
-                    "listbox",
-                    "listitem",
-                    "log",
-                    "main",
-                    "marquee",
-                    "math",
-                    "menu",
-                    "menubar",
-                    "menuitem",
-                    "menuitemcheckbox",
-                    "menuitemradio",
-                    "navigation",
-                    "none",
-                    "note",
-                    "option",
-                    "presentation",
-                    "progressbar",
-                    "radio",
-                    "radiogroup",
-                    "region",
-                    "row",
-                    "rowgroup",
-                    "rowheader",
-                    "scrollbar",
-                    "search",
-                    "searchbox",
-                    "separator",
-                    "slider",
-                    "spinbutton",
-                    "status",
-                    "switch",
-                    "tab",
-                    "table",
-                    "tablist",
-                    "tabpanel",
-                    "term",
-                    "textbox",
-                    "timer",
-                    "toolbar",
-                    "tooltip",
-                    "tree",
-                    "treegrid",
-                    "treeitem",
-                ],
-                Var[
-                    Literal[
-                        "alert",
-                        "alertdialog",
-                        "application",
-                        "article",
-                        "banner",
-                        "button",
-                        "cell",
-                        "checkbox",
-                        "columnheader",
-                        "combobox",
-                        "complementary",
-                        "contentinfo",
-                        "definition",
-                        "dialog",
-                        "directory",
-                        "document",
-                        "feed",
-                        "figure",
-                        "form",
-                        "grid",
-                        "gridcell",
-                        "group",
-                        "heading",
-                        "img",
-                        "link",
-                        "list",
-                        "listbox",
-                        "listitem",
-                        "log",
-                        "main",
-                        "marquee",
-                        "math",
-                        "menu",
-                        "menubar",
-                        "menuitem",
-                        "menuitemcheckbox",
-                        "menuitemradio",
-                        "navigation",
-                        "none",
-                        "note",
-                        "option",
-                        "presentation",
-                        "progressbar",
-                        "radio",
-                        "radiogroup",
-                        "region",
-                        "row",
-                        "rowgroup",
-                        "rowheader",
-                        "scrollbar",
-                        "search",
-                        "searchbox",
-                        "separator",
-                        "slider",
-                        "spinbutton",
-                        "status",
-                        "switch",
-                        "tab",
-                        "table",
-                        "tablist",
-                        "tabpanel",
-                        "term",
-                        "textbox",
-                        "timer",
-                        "toolbar",
-                        "tooltip",
-                        "tree",
-                        "treegrid",
-                        "treeitem",
-                    ]
-                ],
-            ]
-        ] = None,
-        slot: Optional[Union[Var[str], str]] = None,
-        spell_check: Optional[Union[Var[bool], bool]] = None,
-        tab_index: Optional[Union[Var[int], int]] = None,
-        title: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        slot: Var[str] | str | None = None,
+        spell_check: Var[bool] | bool | None = None,
+        tab_index: Var[int] | int | None = None,
+        title: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,

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

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, Literal, Optional, Union, overload
+from typing import Any, Literal, Optional, overload
 
 from reflex.components.component import ComponentNamespace
 from reflex.components.core.breakpoints import Breakpoints
@@ -22,101 +22,88 @@ class Checkbox(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        as_child: 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"]
-                    ]
-                ],
+        as_child: Var[bool] | bool | None = None,
+        size: Breakpoints[str, Literal["1", "2", "3"]]
+        | Literal["1", "2", "3"]
+        | Var[Breakpoints[str, Literal["1", "2", "3"]] | Literal["1", "2", "3"]]
+        | None = None,
+        variant: Literal["classic", "soft", "surface"]
+        | Var[Literal["classic", "soft", "surface"]]
+        | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "soft", "surface"],
-                Var[Literal["classic", "soft", "surface"]],
-            ]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
-        default_checked: Optional[Union[Var[bool], bool]] = None,
-        checked: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        high_contrast: Var[bool] | bool | None = None,
+        default_checked: Var[bool] | bool | None = None,
+        checked: Var[bool] | bool | None = None,
+        disabled: Var[bool] | bool | None = None,
+        required: Var[bool] | bool | None = None,
+        name: Var[str] | str | None = None,
+        value: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
-        on_change: Optional[Union[EventType[()], EventType[bool]]] = None,
+        on_change: Optional[EventType[()] | EventType[bool]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
@@ -171,100 +158,89 @@ class HighLevelCheckbox(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        text: Optional[Union[Var[str], str]] = 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,
-        size: Optional[
-            Union[Literal["1", "2", "3"], Var[Literal["1", "2", "3"]]]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "soft", "surface"],
-                Var[Literal["classic", "soft", "surface"]],
+        text: Var[str] | str | None = None,
+        spacing: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        size: Literal["1", "2", "3"] | Var[Literal["1", "2", "3"]] | None = None,
+        as_child: Var[bool] | bool | None = None,
+        variant: Literal["classic", "soft", "surface"]
+        | Var[Literal["classic", "soft", "surface"]]
+        | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
-            ]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
-        default_checked: Optional[Union[Var[bool], bool]] = None,
-        checked: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        high_contrast: Var[bool] | bool | None = None,
+        default_checked: Var[bool] | bool | None = None,
+        checked: Var[bool] | bool | None = None,
+        disabled: Var[bool] | bool | None = None,
+        required: Var[bool] | bool | None = None,
+        name: Var[str] | str | None = None,
+        value: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
-        on_change: Optional[Union[EventType[()], EventType[bool]]] = None,
+        on_change: Optional[EventType[()] | EventType[bool]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,
@@ -316,100 +292,89 @@ class CheckboxNamespace(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        text: Optional[Union[Var[str], str]] = 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,
-        size: Optional[
-            Union[Literal["1", "2", "3"], Var[Literal["1", "2", "3"]]]
-        ] = None,
-        as_child: Optional[Union[Var[bool], bool]] = None,
-        variant: Optional[
-            Union[
-                Literal["classic", "soft", "surface"],
-                Var[Literal["classic", "soft", "surface"]],
-            ]
-        ] = None,
-        color_scheme: Optional[
-            Union[
-                Literal[
-                    "amber",
-                    "blue",
-                    "bronze",
-                    "brown",
-                    "crimson",
-                    "cyan",
-                    "gold",
-                    "grass",
-                    "gray",
-                    "green",
-                    "indigo",
-                    "iris",
-                    "jade",
-                    "lime",
-                    "mint",
-                    "orange",
-                    "pink",
-                    "plum",
-                    "purple",
-                    "red",
-                    "ruby",
-                    "sky",
-                    "teal",
-                    "tomato",
-                    "violet",
-                    "yellow",
-                ],
-                Var[
-                    Literal[
-                        "amber",
-                        "blue",
-                        "bronze",
-                        "brown",
-                        "crimson",
-                        "cyan",
-                        "gold",
-                        "grass",
-                        "gray",
-                        "green",
-                        "indigo",
-                        "iris",
-                        "jade",
-                        "lime",
-                        "mint",
-                        "orange",
-                        "pink",
-                        "plum",
-                        "purple",
-                        "red",
-                        "ruby",
-                        "sky",
-                        "teal",
-                        "tomato",
-                        "violet",
-                        "yellow",
-                    ]
-                ],
+        text: Var[str] | str | None = None,
+        spacing: Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+        | Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]]
+        | None = None,
+        size: Literal["1", "2", "3"] | Var[Literal["1", "2", "3"]] | None = None,
+        as_child: Var[bool] | bool | None = None,
+        variant: Literal["classic", "soft", "surface"]
+        | Var[Literal["classic", "soft", "surface"]]
+        | None = None,
+        color_scheme: Literal[
+            "amber",
+            "blue",
+            "bronze",
+            "brown",
+            "crimson",
+            "cyan",
+            "gold",
+            "grass",
+            "gray",
+            "green",
+            "indigo",
+            "iris",
+            "jade",
+            "lime",
+            "mint",
+            "orange",
+            "pink",
+            "plum",
+            "purple",
+            "red",
+            "ruby",
+            "sky",
+            "teal",
+            "tomato",
+            "violet",
+            "yellow",
+        ]
+        | Var[
+            Literal[
+                "amber",
+                "blue",
+                "bronze",
+                "brown",
+                "crimson",
+                "cyan",
+                "gold",
+                "grass",
+                "gray",
+                "green",
+                "indigo",
+                "iris",
+                "jade",
+                "lime",
+                "mint",
+                "orange",
+                "pink",
+                "plum",
+                "purple",
+                "red",
+                "ruby",
+                "sky",
+                "teal",
+                "tomato",
+                "violet",
+                "yellow",
             ]
-        ] = None,
-        high_contrast: Optional[Union[Var[bool], bool]] = None,
-        default_checked: Optional[Union[Var[bool], bool]] = None,
-        checked: Optional[Union[Var[bool], bool]] = None,
-        disabled: Optional[Union[Var[bool], bool]] = None,
-        required: Optional[Union[Var[bool], bool]] = None,
-        name: Optional[Union[Var[str], str]] = None,
-        value: Optional[Union[Var[str], str]] = 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, Any]]] = None,
+        ]
+        | None = None,
+        high_contrast: Var[bool] | bool | None = None,
+        default_checked: Var[bool] | bool | None = None,
+        checked: Var[bool] | bool | None = None,
+        disabled: Var[bool] | bool | None = None,
+        required: Var[bool] | bool | None = None,
+        name: Var[str] | str | None = None,
+        value: Var[str] | str | None = None,
+        style: Style | None = None,
+        key: Any | None = None,
+        id: Any | None = None,
+        class_name: Any | None = None,
+        autofocus: bool | None = None,
+        custom_attrs: dict[str, Var | Any] | None = None,
         on_blur: Optional[EventType[()]] = None,
-        on_change: Optional[Union[EventType[()], EventType[bool]]] = None,
+        on_change: Optional[EventType[()] | EventType[bool]] = None,
         on_click: Optional[EventType[()]] = None,
         on_context_menu: Optional[EventType[()]] = None,
         on_double_click: Optional[EventType[()]] = None,