[REF-2821]Improve Dynamic Imports (#3345)

* Improve import times

* add lazy loading to rx.el

* add lazy loading to reflex core components

* minor refactor

* Get imports working with reflex web

* get imports to work with all reflex examples

* refactor to define imports only in the root.

* lint

* deadcode remove

* update poetry deps

* unit tests fix

* app_harness fix

* app_harness fix

* pyi file generate

* pyi file generate

* sort pyi order

* fix pyi

* fix docker ci

* rework pyi-generator

* generate pyi for __init__ files

* test pyright

* test pyright ci

* partial pyright fix

* more pyright fix

* pyright fix

* fix pyi_generator

* add rx.serializer and others

* add future annotation import which fixes container CI, then also load recharts lazily

* add new pyi files

* pyright fix

* minor fixes for reflex-web and flexdown

* forward references for py38

* ruff fix

* pyi fix

* unit tests fix

* reduce coverage to 68%

* reduce coverage to 67%

* reduce coverage to 66%as a workaround to coverage's rounding issue

* reduce coverage to 66%as a workaround to coverage's rounding issue

* exclude lazy_loader dependency review checks.

* its lazy-loader

* Add docstrings and regenerate pyi files

* add link

* address Pr comments

* CI fix

* partially address PR comments.

* edit docstrings and fix integration tests

* fix typo in docstring

* pyi fix

.coveragerc

@@ -11,7 +11,7 @@ omit =
 [report]
 show_missing = true
 # TODO bump back to 79
-fail_under = 70
+fail_under = 66
 precision = 2
 
 # Regexes for lines to exclude from consideration

.github/workflows/dependency-review.yml

@@ -14,3 +14,4 @@ jobs:
         uses: actions/dependency-review-action@v4
         with:
           allow-licenses: Apache-2.0, BSD-2-Clause, BSD-3-Clause, HPND, ISC, MIT, MPL-2.0, PSF-2.0, Unlicense
+          allow-dependencies-licenses: 'pkg:pypi/lazy-loader'

integration/test_tailwind.py

@@ -26,7 +26,6 @@ def TailwindApp(
         paragraph_class_name: Tailwind class_name for the paragraph.
     """
     import reflex as rx
-    import reflex.components.radix.themes as rdxt
 
     class UnusedState(rx.State):
         pass
@@ -35,7 +34,7 @@ def TailwindApp(
         return rx.el.div(
             rx.chakra.text(paragraph_text, class_name=paragraph_class_name),
             rx.el.p(paragraph_text, class_name=paragraph_class_name),
-            rdxt.text(paragraph_text, as_="p", class_name=paragraph_class_name),
+            rx.text(paragraph_text, as_="p", class_name=paragraph_class_name),
             id="p-content",
         )
 

pyproject.toml

@@ -63,6 +63,7 @@ setuptools = ">=69.1.1,<70.0"
 httpx = ">=0.25.1,<1.0"
 twine = ">=4.0.0,<6.0"
 tomlkit = ">=0.12.4,<1.0"
+lazy_loader = ">=0.4"
 
 [tool.poetry.group.dev.dependencies]
 pytest = ">=7.1.2,<8.0"

reflex/__init__.py

@@ -1,141 +1,281 @@
 """Import all classes and functions the end user will need to make an app.
 
 Anything imported here will be available in the default Reflex import as `rx.*`.
-To signal to typecheckers that something should be reexported,
-we use the Flask "import name as name" syntax.
+
+Dynamic Imports
+---------------
+Reflex utilizes dynamic imports, or lazy loading, to reduce startup/import times.
+With this approach, imports are delayed until they are actually needed. We use
+the `lazy_loader` library(https://github.com/scientific-python/lazy_loader) to achieve this.
+
+How it works
+--------------
+`lazy_loader.attach` takes two optional arguments: `submodules` and `submod_attrs`.
+- `submodules` typically points to directories or files to be accessed.
+- `submod_attrs` defines a mapping of directory or file names as keys with a list
+  of attributes or modules to access.
+
+Example directory structure:
+
+reflex/
+    |_ components/
+            |_ radix/
+                |_ themes/
+                    |_ components/
+                        |_ box.py
+
+To add `box` under the `rx` namespace (`rx.box`), add the relative path to `submod_attrs` in
+`reflex/__init__.py` (this file):
+
+```python
+lazy_loader.attach(
+    submodules={"components"},
+    submod_attrs={
+        "components.radix.themes.components.box": ["box"]
+    }
+)
+```
+
+This implies that `box` will be imported from `reflex/components/radix/themes/components/box.py`.
+
+To add box under the `rx.radix` namespace (`rx.radix.box`), add the relative path to the
+submod_attrs argument in `reflex/components/radix/__init__.py`:
+
+```python
+lazy_loader.attach(
+    submodules = {"themes"},
+    submod_attrs = {
+        "themes.components.box": ["box"]
+    }
+)
+```
+
+Note: It is important to specify the immediate submodules of a directory in the submodules
+argument to ensure they are registered at runtime. For example, 'components' for reflex,
+'radix' for components, 'themes' for radix, etc.
+
+
+Pyi_generator
+--------------
+To generate `.pyi` files for `__init__.py` files, we read the `_SUBMODULES` and `_SUBMOD_ATTRS`
+attributes to generate the import statements. It is highly recommended to define these with
+the provided annotations to facilitate their generation.
+
+
+Aliases
+------------
+This is a special case to specify an alias for a component.
+As an example, we use this typically for `rx.list` where defining `list` attribute in the list.py
+overshadows python's list object which messes up the pyi generation for `list.pyi`. As a result, aliases
+should be used for similar cases like this. Note that this logic is employed to fix the pyi generation and alias
+should still be defined or accessible. Check out the __getattr__ logic in `reflex/components/radix/themes/layouts/list.py`
+
+```python
+lazy_loader.attach(
+    submodules={"components"},
+    submod_attrs={
+        "components.radix.themes.layouts": [("list_ns", "list")]
+    }
+)
+```
+
+In the example above, you will be able to do `rx.list`
 """
 
 from __future__ import annotations
 
-import importlib
-from typing import Type
-
-from reflex.page import page as page
-from reflex.utils import console
-from reflex.utils.format import to_snake_case
-
-_ALL_COMPONENTS = [
-    # Core
-    "color",
-    "cond",
-    "foreach",
-    "html",
-    "match",
-    "color_mode_cond",
-    "connection_banner",
-    "connection_modal",
-    "debounce_input",
-    # Base
-    "fragment",
-    "Fragment",
-    "image",
-    "script",
-    # Responsive
-    "desktop_only",
-    "mobile_and_tablet",
-    "mobile_only",
-    "tablet_and_desktop",
-    "tablet_only",
-    # Upload
-    "cancel_upload",
-    "clear_selected_files",
-    "get_upload_dir",
-    "get_upload_url",
-    "selected_files",
-    "upload",
-    # Radix
-    "accordion",
-    "alert_dialog",
-    "aspect_ratio",
-    "avatar",
-    "badge",
-    "blockquote",
-    "box",
-    "button",
-    "callout",
-    "card",
-    "center",
-    "checkbox",
-    "code",
-    "container",
-    "context_menu",
-    "data_list",
-    "dialog",
-    "divider",
-    "drawer",
-    "flex",
-    "form",
-    "grid",
-    "heading",
-    "hover_card",
-    "hstack",
-    "icon_button",
-    "inset",
-    "input",
-    "link",
-    "menu",
-    "popover",
-    "progress",
-    "radio",
-    "scroll_area",
-    "section",
-    "select",
-    "skeleton",
-    "slider",
-    "spacer",
-    "spinner",
-    "stack",
-    "switch",
-    "table",
-    "tabs",
-    "text",
-    "text_area",
-    "theme",
-    "theme_panel",
-    "tooltip",
-    "vstack",
-    # Other
-    "code_block",
-    "data_editor",
-    "data_editor_theme",
-    "data_table",
-    "plotly",
-    "audio",
-    "video",
-    "editor",
-    "EditorButtonList",
-    "EditorOptions",
-    "icon",
-    "markdown",
-    "list",
-    "list_item",
-    "unordered_list",
-    "ordered_list",
-    "moment",
-    "logo",
-    # Toast is in experimental namespace initially
-    # "toast",
-]
-
-_MAPPING = {
-    "reflex.experimental": ["_x"],
-    "reflex.admin": ["admin", "AdminDash"],
-    "reflex.app": ["app", "App", "UploadFile"],
-    "reflex.base": ["base", "Base"],
-    "reflex.compiler": ["compiler"],
-    "reflex.components": _ALL_COMPONENTS,
-    "reflex.components.component": ["Component", "NoSSRComponent", "memo"],
-    "reflex.components.chakra": ["chakra"],
-    "reflex.components.el": ["el"],
-    "reflex.components.lucide": ["lucide"],
-    "reflex.components.next": ["next"],
-    "reflex.components.radix": ["radix", "color_mode"],
-    "reflex.components.recharts": ["recharts"],
-    "reflex.components.moment.moment": ["MomentDelta"],
-    "reflex.config": ["config", "Config", "DBConfig"],
-    "reflex.constants": ["constants", "Env"],
-    "reflex.event": [
-        "event",
+from reflex.utils import lazy_loader
+
+# import this here explicitly to avoid returning the page module since page attr has the
+# same name as page module(page.py)
+from .page import page as page
+
+RADIX_THEMES_MAPPING: dict = {
+    "components.radix.themes.base": ["color_mode", "theme", "theme_panel"],
+    "components.radix.themes.color_mode": ["color_mode"],
+}
+RADIX_THEMES_COMPONENTS_MAPPING: dict = {
+    **{
+        f"components.radix.themes.components.{mod}": [mod]
+        for mod in [
+            "alert_dialog",
+            "aspect_ratio",
+            "avatar",
+            "badge",
+            "button",
+            "callout",
+            "card",
+            "checkbox",
+            "context_menu",
+            "data_list",
+            "dialog",
+            "hover_card",
+            "icon_button",
+            "input",
+            "inset",
+            "popover",
+            "scroll_area",
+            "select",
+            "skeleton",
+            "slider",
+            "spinner",
+            "switch",
+            "table",
+            "tabs",
+            "text_area",
+            "tooltip",
+            "segmented_control",
+            "radio_cards",
+            "checkbox_cards",
+            "checkbox_group",
+        ]
+    },
+    "components.radix.themes.components.text_field": ["text_field", "input"],
+    "components.radix.themes.components.radio_group": ["radio", "radio_group"],
+    "components.radix.themes.components.dropdown_menu": ["menu", "dropdown_menu"],
+    "components.radix.themes.components.separator": ["divider", "separator"],
+}
+
+RADIX_THEMES_LAYOUT_MAPPING: dict = {
+    "components.radix.themes.layout.box": [
+        "box",
+    ],
+    "components.radix.themes.layout.center": [
+        "center",
+    ],
+    "components.radix.themes.layout.container": [
+        "container",
+    ],
+    "components.radix.themes.layout.flex": [
+        "flex",
+    ],
+    "components.radix.themes.layout.grid": [
+        "grid",
+    ],
+    "components.radix.themes.layout.section": [
+        "section",
+    ],
+    "components.radix.themes.layout.spacer": [
+        "spacer",
+    ],
+    "components.radix.themes.layout.stack": [
+        "stack",
+        "hstack",
+        "vstack",
+    ],
+    "components.radix.themes.layout.list": [
+        ("list_ns", "list"),
+        "list_item",
+        "ordered_list",
+        "unordered_list",
+    ],
+}
+
+RADIX_THEMES_TYPOGRAPHY_MAPPING: dict = {
+    "components.radix.themes.typography.blockquote": [
+        "blockquote",
+    ],
+    "components.radix.themes.typography.code": [
+        "code",
+    ],
+    "components.radix.themes.typography.heading": [
+        "heading",
+    ],
+    "components.radix.themes.typography.link": [
+        "link",
+    ],
+    "components.radix.themes.typography.text": [
+        "text",
+    ],
+}
+
+RADIX_PRIMITIVES_MAPPING: dict = {
+    "components.radix.primitives.accordion": [
+        "accordion",
+    ],
+    "components.radix.primitives.drawer": [
+        "drawer",
+    ],
+    "components.radix.primitives.form": [
+        "form",
+    ],
+    "components.radix.primitives.progress": ["progress"],
+}
+
+COMPONENTS_CORE_MAPPING: dict = {
+    "components.core.banner": [
+        "connection_banner",
+        "connection_modal",
+    ],
+    "components.core.cond": ["cond", "color_mode_cond"],
+    "components.core.foreach": ["foreach"],
+    "components.core.debounce": ["debounce_input"],
+    "components.core.html": ["html"],
+    "components.core.match": ["match"],
+    "components.core.colors": ["color"],
+    "components.core.responsive": [
+        "desktop_only",
+        "mobile_and_tablet",
+        "mobile_only",
+        "tablet_and_desktop",
+        "tablet_only",
+    ],
+    "components.core.upload": [
+        "cancel_upload",
+        "clear_selected_files",
+        "get_upload_dir",
+        "get_upload_url",
+        "selected_files",
+        "upload",
+    ],
+}
+
+COMPONENTS_BASE_MAPPING: dict = {
+    "components.base.fragment": ["fragment", "Fragment"],
+    "components.base.script": ["script", "Script"],
+}
+
+RADIX_MAPPING: dict = {
+    **RADIX_THEMES_MAPPING,
+    **RADIX_THEMES_COMPONENTS_MAPPING,
+    **RADIX_THEMES_TYPOGRAPHY_MAPPING,
+    **RADIX_THEMES_LAYOUT_MAPPING,
+    **RADIX_PRIMITIVES_MAPPING,
+}
+
+_MAPPING: dict = {
+    "experimental": ["_x"],
+    "admin": ["AdminDash"],
+    "app": ["App", "UploadFile"],
+    "base": ["Base"],
+    "components.component": ["Component", "NoSSRComponent", "memo"],
+    "components.el.elements.media": ["image"],
+    "components.lucide": ["icon"],
+    **COMPONENTS_BASE_MAPPING,
+    "components.suneditor": [
+        "editor",
+        "EditorButtonList",
+        "EditorOptions",
+    ],
+    "components": ["el", "chakra", "radix", "lucide", "recharts", "next"],
+    "components.markdown": ["markdown"],
+    **RADIX_MAPPING,
+    "components.plotly": ["plotly"],
+    "components.react_player": ["audio", "video"],
+    **COMPONENTS_CORE_MAPPING,
+    "components.datadisplay.code": [
+        "code_block",
+    ],
+    "components.datadisplay.dataeditor": [
+        "data_editor",
+        "data_editor_theme",
+    ],
+    "components.datadisplay.logo": ["logo"],
+    "components.gridjs": ["data_table"],
+    "components.moment": ["MomentDelta", "moment"],
+    "config": ["Config", "DBConfig"],
+    "constants": ["Env"],
+    "event": [
         "EventChain",
         "EventHandler",
         "background",
@@ -155,84 +295,38 @@ _MAPPING = {
         "upload_files",
         "window_alert",
     ],
-    "reflex.middleware": ["middleware", "Middleware"],
-    "reflex.model": ["model", "session", "Model"],
-    "reflex.page": ["page"],
-    "reflex.route": ["route"],
-    "reflex.state": [
-        "state",
+    "middleware": ["middleware", "Middleware"],
+    "model": ["session", "Model"],
+    "state": [
         "var",
         "Cookie",
         "LocalStorage",
         "ComponentState",
         "State",
     ],
-    "reflex.style": ["style", "toggle_color_mode"],
-    "reflex.testing": ["testing"],
-    "reflex.utils": ["utils"],
-    "reflex.utils.imports": ["ImportVar"],
-    "reflex.vars": ["vars", "cached_var", "Var"],
+    "style": ["Style", "toggle_color_mode"],
+    "utils.imports": ["ImportVar"],
+    "utils.serializers": ["serializer"],
+    "vars": ["cached_var", "Var"],
 }
 
-
-def _reverse_mapping(mapping: dict[str, list]) -> dict[str, str]:
-    """Reverse the mapping used to lazy loading, and check for conflicting name.
-
-    Args:
-        mapping: The mapping to reverse.
-
-    Returns:
-        The reversed mapping.
-    """
-    reversed_mapping = {}
-    for key, values in mapping.items():
-        for value in values:
-            if value not in reversed_mapping:
-                reversed_mapping[value] = key
-            else:
-                console.warn(
-                    f"Key {value} is present multiple times in the imports _MAPPING: {key} / {reversed_mapping[value]}"
-                )
-    return reversed_mapping
-
-
-# _MAPPING = {value: key for key, values in _MAPPING.items() for value in values}
-_MAPPING = _reverse_mapping(_MAPPING)
-
-
-def _removeprefix(text, prefix):
-    return text[text.startswith(prefix) and len(prefix) :]
-
-
-__all__ = (_removeprefix(mod, "reflex.") for mod in _MAPPING)
-
-
-def __getattr__(name: str) -> Type:
-    """Lazy load all modules.
-
-    Args:
-        name: name of the module to load.
-
-    Returns:
-        The module or the attribute of the module.
-
-    Raises:
-        AttributeError: If the module or the attribute does not exist.
-    """
-    try:
-        # Check for import of a module that is not in the mapping.
-        if name not in _MAPPING:
-            # If the name does not start with reflex, add it.
-            if not name.startswith("reflex") and name != "__all__":
-                name = f"reflex.{name}"
-            return importlib.import_module(name)
-
-        # Import the module.
-        module = importlib.import_module(_MAPPING[name])
-
-        # Get the attribute from the module if the name is not the module itself.
-        return (
-            getattr(module, name) if name != _MAPPING[name].rsplit(".")[-1] else module
-        )
-    except ModuleNotFoundError:
-        raise AttributeError(f"module 'reflex' has no attribute {name}") from None
+_SUBMODULES: set[str] = {
+    "components",
+    "event",
+    "app",
+    "style",
+    "admin",
+    "base",
+    "model",
+    "testing",
+    "utils",
+    "vars",
+    "config",
+    "compiler",
+}
+_SUBMOD_ATTRS: dict = _MAPPING
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submodules=_SUBMODULES,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/__init__.pyi

@@ -1,157 +1,196 @@
-from reflex.experimental import _x as _x
-from reflex import admin as admin
-from reflex.admin import AdminDash as AdminDash
-from reflex import app as app
-from reflex.app import App as App
-from reflex.app import UploadFile as UploadFile
-from reflex import base as base
-from reflex.base import Base as Base
-from reflex import compiler as compiler
-from reflex.components import color as color
-from reflex.components import cond as cond
-from reflex.components import foreach as foreach
-from reflex.components import html as html
-from reflex.components import match as match
-from reflex.components import color_mode_cond as color_mode_cond
-from reflex.components import connection_banner as connection_banner
-from reflex.components import connection_modal as connection_modal
-from reflex.components import debounce_input as debounce_input
-from reflex.components import fragment as fragment
-from reflex.components import Fragment as Fragment
-from reflex.components import image as image
-from reflex.components import script as script
-from reflex.components import desktop_only as desktop_only
-from reflex.components import mobile_and_tablet as mobile_and_tablet
-from reflex.components import mobile_only as mobile_only
-from reflex.components import tablet_and_desktop as tablet_and_desktop
-from reflex.components import tablet_only as tablet_only
-from reflex.components import cancel_upload as cancel_upload
-from reflex.components import clear_selected_files as clear_selected_files
-from reflex.components import get_upload_dir as get_upload_dir
-from reflex.components import get_upload_url as get_upload_url
-from reflex.components import selected_files as selected_files
-from reflex.components import upload as upload
-from reflex.components import accordion as accordion
-from reflex.components import alert_dialog as alert_dialog
-from reflex.components import aspect_ratio as aspect_ratio
-from reflex.components import avatar as avatar
-from reflex.components import badge as badge
-from reflex.components import blockquote as blockquote
-from reflex.components import box as box
-from reflex.components import button as button
-from reflex.components import callout as callout
-from reflex.components import card as card
-from reflex.components import center as center
-from reflex.components import checkbox as checkbox
-from reflex.components import code as code
-from reflex.components import container as container
-from reflex.components import context_menu as context_menu
-from reflex.components import data_list as data_list
-from reflex.components import dialog as dialog
-from reflex.components import divider as divider
-from reflex.components import drawer as drawer
-from reflex.components import flex as flex
-from reflex.components import form as form
-from reflex.components import grid as grid
-from reflex.components import heading as heading
-from reflex.components import hover_card as hover_card
-from reflex.components import hstack as hstack
-from reflex.components import icon_button as icon_button
-from reflex.components import inset as inset
-from reflex.components import input as input
-from reflex.components import link as link
-from reflex.components import menu as menu
-from reflex.components import popover as popover
-from reflex.components import progress as progress
-from reflex.components import radio as radio
-from reflex.components import scroll_area as scroll_area
-from reflex.components import section as section
-from reflex.components import select as select
-from reflex.components import skeleton as skeleton
-from reflex.components import slider as slider
-from reflex.components import spacer as spacer
-from reflex.components import spinner as spinner
-from reflex.components import stack as stack
-from reflex.components import switch as switch
-from reflex.components import table as table
-from reflex.components import tabs as tabs
-from reflex.components import text as text
-from reflex.components import text_area as text_area
-from reflex.components import theme as theme
-from reflex.components import theme_panel as theme_panel
-from reflex.components import tooltip as tooltip
-from reflex.components import vstack as vstack
-from reflex.components import code_block as code_block
-from reflex.components import data_editor as data_editor
-from reflex.components import data_editor_theme as data_editor_theme
-from reflex.components import data_table as data_table
-from reflex.components import plotly as plotly
-from reflex.components import audio as audio
-from reflex.components import video as video
-from reflex.components import editor as editor
-from reflex.components import EditorButtonList as EditorButtonList
-from reflex.components import EditorOptions as EditorOptions
-from reflex.components import icon as icon
-from reflex.components import markdown as markdown
-from reflex.components import list as list
-from reflex.components import list_item as list_item
-from reflex.components import unordered_list as unordered_list
-from reflex.components import ordered_list as ordered_list
-from reflex.components import moment as moment
-from reflex.components import logo as logo
-from reflex.components.component import Component as Component
-from reflex.components.component import NoSSRComponent as NoSSRComponent
-from reflex.components.component import memo as memo
-from reflex.components import chakra as chakra
-from reflex.components import el as el
-from reflex.components import lucide as lucide
-from reflex.components import next as next
-from reflex.components import radix as radix
-from reflex.components.radix import color_mode as color_mode
-from reflex.components import recharts as recharts
-from reflex.components.moment.moment import MomentDelta as MomentDelta
-from reflex import config as config
-from reflex.config import Config as Config
-from reflex.config import DBConfig as DBConfig
-from reflex import constants as constants
-from reflex.constants import Env as Env
-from reflex import event as event
-from reflex.event import EventChain as EventChain
-from reflex.event import EventHandler as EventHandler
-from reflex.event import background as background
-from reflex.event import call_script as call_script
-from reflex.event import clear_local_storage as clear_local_storage
-from reflex.event import console_log as console_log
-from reflex.event import download as download
-from reflex.event import prevent_default as prevent_default
-from reflex.event import redirect as redirect
-from reflex.event import remove_cookie as remove_cookie
-from reflex.event import remove_local_storage as remove_local_storage
-from reflex.event import set_clipboard as set_clipboard
-from reflex.event import set_focus as set_focus
-from reflex.event import scroll_to as scroll_to
-from reflex.event import set_value as set_value
-from reflex.event import stop_propagation as stop_propagation
-from reflex.event import upload_files as upload_files
-from reflex.event import window_alert as window_alert
-from reflex import middleware as middleware
-from reflex.middleware import Middleware as Middleware
-from reflex import model as model
-from reflex.model import session as session
-from reflex.model import Model as Model
-from reflex.page import page as page
-from reflex import route as route
-from reflex import state as state
-from reflex.state import var as var
-from reflex.state import Cookie as Cookie
-from reflex.state import LocalStorage as LocalStorage
-from reflex.state import ComponentState as ComponentState
-from reflex.state import State as State
-from reflex import style as style
-from reflex.style import toggle_color_mode as toggle_color_mode
-from reflex import testing as testing
-from reflex import utils as utils
-from reflex.utils.imports import ImportVar as ImportVar
-from reflex import vars as vars
-from reflex.vars import cached_var as cached_var
-from reflex.vars import Var as Var
+"""Stub file for reflex/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from . import admin as admin
+from . import app as app
+from . import base as base
+from . import compiler as compiler
+from . import components as components
+from . import config as config
+from . import event as event
+from . import model as model
+from . import style as style
+from . import testing as testing
+from . import utils as utils
+from . import vars as vars
+
+from .experimental import _x as _x
+from .admin import AdminDash as AdminDash
+from .app import App as App
+from .app import UploadFile as UploadFile
+from .base import Base as Base
+from .components.component import Component as Component
+from .components.component import NoSSRComponent as NoSSRComponent
+from .components.component import memo as memo
+from .components.el.elements.media import image as image
+from .components.lucide import icon as icon
+from .components.base.fragment import fragment as fragment
+from .components.base.fragment import Fragment as Fragment
+from .components.base.script import script as script
+from .components.base.script import Script as Script
+from .components.suneditor import editor as editor
+from .components.suneditor import EditorButtonList as EditorButtonList
+from .components.suneditor import EditorOptions as EditorOptions
+from .components import el as el
+from .components import chakra as chakra
+from .components import radix as radix
+from .components import lucide as lucide
+from .components import recharts as recharts
+from .components import next as next
+from .components.markdown import markdown as markdown
+from .components.radix.themes.color_mode import color_mode as color_mode
+from .components.radix.themes.base import theme as theme
+from .components.radix.themes.base import theme_panel as theme_panel
+from .components.radix.themes.components.alert_dialog import (
+    alert_dialog as alert_dialog,
+)
+from .components.radix.themes.components.aspect_ratio import (
+    aspect_ratio as aspect_ratio,
+)
+from .components.radix.themes.components.avatar import avatar as avatar
+from .components.radix.themes.components.badge import badge as badge
+from .components.radix.themes.components.button import button as button
+from .components.radix.themes.components.callout import callout as callout
+from .components.radix.themes.components.card import card as card
+from .components.radix.themes.components.checkbox import checkbox as checkbox
+from .components.radix.themes.components.context_menu import (
+    context_menu as context_menu,
+)
+from .components.radix.themes.components.data_list import data_list as data_list
+from .components.radix.themes.components.dialog import dialog as dialog
+from .components.radix.themes.components.hover_card import hover_card as hover_card
+from .components.radix.themes.components.icon_button import icon_button as icon_button
+from .components.radix.themes.components.text_field import input as input
+from .components.radix.themes.components.inset import inset as inset
+from .components.radix.themes.components.popover import popover as popover
+from .components.radix.themes.components.scroll_area import scroll_area as scroll_area
+from .components.radix.themes.components.select import select as select
+from .components.radix.themes.components.skeleton import skeleton as skeleton
+from .components.radix.themes.components.slider import slider as slider
+from .components.radix.themes.components.spinner import spinner as spinner
+from .components.radix.themes.components.switch import switch as switch
+from .components.radix.themes.components.table import table as table
+from .components.radix.themes.components.tabs import tabs as tabs
+from .components.radix.themes.components.text_area import text_area as text_area
+from .components.radix.themes.components.tooltip import tooltip as tooltip
+from .components.radix.themes.components.segmented_control import (
+    segmented_control as segmented_control,
+)
+from .components.radix.themes.components.radio_cards import radio_cards as radio_cards
+from .components.radix.themes.components.checkbox_cards import (
+    checkbox_cards as checkbox_cards,
+)
+from .components.radix.themes.components.checkbox_group import (
+    checkbox_group as checkbox_group,
+)
+from .components.radix.themes.components.text_field import text_field as text_field
+from .components.radix.themes.components.radio_group import radio as radio
+from .components.radix.themes.components.radio_group import radio_group as radio_group
+from .components.radix.themes.components.dropdown_menu import menu as menu
+from .components.radix.themes.components.dropdown_menu import (
+    dropdown_menu as dropdown_menu,
+)
+from .components.radix.themes.components.separator import divider as divider
+from .components.radix.themes.components.separator import separator as separator
+from .components.radix.themes.typography.blockquote import blockquote as blockquote
+from .components.radix.themes.typography.code import code as code
+from .components.radix.themes.typography.heading import heading as heading
+from .components.radix.themes.typography.link import link as link
+from .components.radix.themes.typography.text import text as text
+from .components.radix.themes.layout.box import box as box
+from .components.radix.themes.layout.center import center as center
+from .components.radix.themes.layout.container import container as container
+from .components.radix.themes.layout.flex import flex as flex
+from .components.radix.themes.layout.grid import grid as grid
+from .components.radix.themes.layout.section import section as section
+from .components.radix.themes.layout.spacer import spacer as spacer
+from .components.radix.themes.layout.stack import stack as stack
+from .components.radix.themes.layout.stack import hstack as hstack
+from .components.radix.themes.layout.stack import vstack as vstack
+from .components.radix.themes.layout.list import list_ns as list
+from .components.radix.themes.layout.list import list_item as list_item
+from .components.radix.themes.layout.list import ordered_list as ordered_list
+from .components.radix.themes.layout.list import unordered_list as unordered_list
+from .components.radix.primitives.accordion import accordion as accordion
+from .components.radix.primitives.drawer import drawer as drawer
+from .components.radix.primitives.form import form as form
+from .components.radix.primitives.progress import progress as progress
+from .components.plotly import plotly as plotly
+from .components.react_player import audio as audio
+from .components.react_player import video as video
+from .components.core.banner import connection_banner as connection_banner
+from .components.core.banner import connection_modal as connection_modal
+from .components.core.cond import cond as cond
+from .components.core.cond import color_mode_cond as color_mode_cond
+from .components.core.foreach import foreach as foreach
+from .components.core.debounce import debounce_input as debounce_input
+from .components.core.html import html as html
+from .components.core.match import match as match
+from .components.core.colors import color as color
+from .components.core.responsive import desktop_only as desktop_only
+from .components.core.responsive import mobile_and_tablet as mobile_and_tablet
+from .components.core.responsive import mobile_only as mobile_only
+from .components.core.responsive import tablet_and_desktop as tablet_and_desktop
+from .components.core.responsive import tablet_only as tablet_only
+from .components.core.upload import cancel_upload as cancel_upload
+from .components.core.upload import clear_selected_files as clear_selected_files
+from .components.core.upload import get_upload_dir as get_upload_dir
+from .components.core.upload import get_upload_url as get_upload_url
+from .components.core.upload import selected_files as selected_files
+from .components.core.upload import upload as upload
+from .components.datadisplay.code import code_block as code_block
+from .components.datadisplay.dataeditor import data_editor as data_editor
+from .components.datadisplay.dataeditor import data_editor_theme as data_editor_theme
+from .components.datadisplay.logo import logo as logo
+from .components.gridjs import data_table as data_table
+from .components.moment import MomentDelta as MomentDelta
+from .components.moment import moment as moment
+from .config import Config as Config
+from .config import DBConfig as DBConfig
+from .constants import Env as Env
+from .event import EventChain as EventChain
+from .event import EventHandler as EventHandler
+from .event import background as background
+from .event import call_script as call_script
+from .event import clear_local_storage as clear_local_storage
+from .event import console_log as console_log
+from .event import download as download
+from .event import prevent_default as prevent_default
+from .event import redirect as redirect
+from .event import remove_cookie as remove_cookie
+from .event import remove_local_storage as remove_local_storage
+from .event import set_clipboard as set_clipboard
+from .event import set_focus as set_focus
+from .event import scroll_to as scroll_to
+from .event import set_value as set_value
+from .event import stop_propagation as stop_propagation
+from .event import upload_files as upload_files
+from .event import window_alert as window_alert
+from .middleware import middleware as middleware
+from .middleware import Middleware as Middleware
+from .model import session as session
+from .model import Model as Model
+from .state import var as var
+from .state import Cookie as Cookie
+from .state import LocalStorage as LocalStorage
+from .state import ComponentState as ComponentState
+from .state import State as State
+from .style import Style as Style
+from .style import toggle_color_mode as toggle_color_mode
+from .utils.imports import ImportVar as ImportVar
+from .utils.serializers import serializer as serializer
+from .vars import cached_var as cached_var
+from .vars import Var as Var
+from reflex.utils import lazy_loader
+from .page import page as page
+
+RADIX_THEMES_MAPPING: dict
+RADIX_THEMES_COMPONENTS_MAPPING: dict
+RADIX_THEMES_LAYOUT_MAPPING: dict
+RADIX_THEMES_TYPOGRAPHY_MAPPING: dict
+RADIX_PRIMITIVES_MAPPING: dict
+COMPONENTS_CORE_MAPPING: dict
+COMPONENTS_BASE_MAPPING: dict
+RADIX_MAPPING: dict

reflex/app.py

@@ -50,7 +50,7 @@ from reflex.components.component import (
     ComponentStyle,
     evaluate_style_namespaces,
 )
-from reflex.components.core import connection_pulser, connection_toaster
+from reflex.components.core.banner import connection_pulser, connection_toaster
 from reflex.components.core.client_side_routing import (
     Default404Page,
     wait_for_client_redirect,

reflex/components/__init__.py

@@ -1,21 +1,35 @@
 """Import all the components."""
 from __future__ import annotations
 
-from . import lucide
-from .base import Fragment, Script, fragment, script
-from .component import Component
-from .component import NoSSRComponent as NoSSRComponent
-from .core import *
-from .datadisplay import *
-from .el import img as image
-from .gridjs import *
-from .markdown import *
-from .moment import *
-from .next import NextLink, next_link
-from .plotly import *
-from .radix import *
-from .react_player import *
-from .sonner import *
-from .suneditor import *
+from reflex.utils import lazy_loader
 
-icon = lucide.icon
+_SUBMODULES: set[str] = {
+    "lucide",
+    "core",
+    "datadisplay",
+    "gridjs",
+    "markdown",
+    "moment",
+    "plotly",
+    "radix",
+    "react_player",
+    "sonner",
+    "suneditor",
+    "chakra",
+    "el",
+    "base",
+    "recharts",
+}
+
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "component": [
+        "Component",
+        "NoSSRComponent",
+    ],
+    "next": ["NextLink", "next_link"],
+}
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submodules=_SUBMODULES,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/__init__.pyi

@@ -0,0 +1,26 @@
+"""Stub file for reflex/components/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from . import base as base
+from . import chakra as chakra
+from . import core as core
+from . import datadisplay as datadisplay
+from . import el as el
+from . import gridjs as gridjs
+from . import lucide as lucide
+from . import markdown as markdown
+from . import moment as moment
+from . import plotly as plotly
+from . import radix as radix
+from . import react_player as react_player
+from . import recharts as recharts
+from . import sonner as sonner
+from . import suneditor as suneditor
+
+from .component import Component as Component
+from .component import NoSSRComponent as NoSSRComponent
+from .next import NextLink as NextLink
+from .next import next_link as next_link
+from reflex.utils import lazy_loader

reflex/components/base/__init__.py

@@ -1,12 +1,28 @@
 """Base components."""
+from __future__ import annotations
 
-from .body import Body
-from .document import DocumentHead, Html, Main, NextScript
-from .fragment import Fragment
-from .head import Head
-from .link import RawLink, ScriptTag
-from .meta import Description, Image, Meta, Title
-from .script import Script
+from reflex.utils import lazy_loader
 
-fragment = Fragment.create
-script = Script.create
+_SUBMODULES: set[str] = {"app_wrap", "bare"}
+
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "body": ["Body"],
+    "document": ["DocumentHead", "Html", "Main", "NextScript"],
+    "fragment": [
+        "Fragment",
+        "fragment",
+    ],
+    "head": [
+        "head",
+        "Head",
+    ],
+    "link": ["RawLink", "ScriptTag"],
+    "meta": ["Description", "Image", "Meta", "Title"],
+    "script": ["Script", "script"],
+}
+
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submodules=_SUBMODULES,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/base/__init__.pyi

@@ -0,0 +1,26 @@
+"""Stub file for reflex/components/base/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from . import app_wrap as app_wrap
+from . import bare as bare
+
+from .body import Body as Body
+from .document import DocumentHead as DocumentHead
+from .document import Html as Html
+from .document import Main as Main
+from .document import NextScript as NextScript
+from .fragment import Fragment as Fragment
+from .fragment import fragment as fragment
+from .head import head as head
+from .head import Head as Head
+from .link import RawLink as RawLink
+from .link import ScriptTag as ScriptTag
+from .meta import Description as Description
+from .meta import Image as Image
+from .meta import Meta as Meta
+from .meta import Title as Title
+from .script import Script as Script
+from .script import script as script
+from reflex.utils import lazy_loader

reflex/components/base/fragment.py

@@ -7,3 +7,6 @@ class Fragment(Component):
 
     library = "react"
     tag = "Fragment"
+
+
+fragment = Fragment.create

reflex/components/base/fragment.pyi

@@ -84,3 +84,5 @@ class Fragment(Component):
             The component.
         """
         ...
+
+fragment = Fragment.create

reflex/components/base/head.py

@@ -15,3 +15,6 @@ class Head(NextHeadLib, MemoizationLeaf):
     tag = "NextHead"
 
     is_default = True
+
+
+head = Head.create

reflex/components/base/head.pyi

@@ -160,3 +160,5 @@ class Head(NextHeadLib, MemoizationLeaf):
             The memoization leaf
         """
         ...
+
+head = Head.create

reflex/components/base/script.py

@@ -70,3 +70,6 @@ class Script(Component):
             "on_ready": lambda: [],
             "on_error": lambda: [],
         }
+
+
+script = Script.create

reflex/components/base/script.pyi

@@ -113,3 +113,5 @@ class Script(Component):
         """
         ...
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
+
+script = Script.create

reflex/components/core/__init__.py

@@ -1,40 +1,54 @@
 """Core Reflex components."""
+from __future__ import annotations
 
-from . import layout as layout
-from .banner import (
-    ConnectionBanner,
-    ConnectionModal,
-    ConnectionPulser,
-    ConnectionToaster,
-)
-from .colors import color
-from .cond import Cond, color_mode_cond, cond
-from .debounce import DebounceInput
-from .foreach import Foreach
-from .html import Html
-from .match import Match
-from .responsive import (
-    desktop_only,
-    mobile_and_tablet,
-    mobile_only,
-    tablet_and_desktop,
-    tablet_only,
-)
-from .upload import (
-    UploadNamespace,
-    cancel_upload,
-    clear_selected_files,
-    get_upload_dir,
-    get_upload_url,
-    selected_files,
-)
+from reflex.utils import lazy_loader
 
-connection_banner = ConnectionBanner.create
-connection_modal = ConnectionModal.create
-connection_toaster = ConnectionToaster.create
-connection_pulser = ConnectionPulser.create
-debounce_input = DebounceInput.create
-foreach = Foreach.create
-html = Html.create
-match = Match.create
-upload = UploadNamespace()
+_SUBMODULES: set[str] = {"layout"}
+
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "banner": [
+        "ConnectionBanner",
+        "ConnectionModal",
+        "ConnectionPulser",
+        "ConnectionToaster",
+        "connection_banner",
+        "connection_modal",
+        "connection_toaster",
+        "connection_pulser",
+    ],
+    "colors": [
+        "color",
+    ],
+    "cond": ["Cond", "color_mode_cond", "cond"],
+    "debounce": ["DebounceInput", "debounce_input"],
+    "foreach": [
+        "foreach",
+        "Foreach",
+    ],
+    "html": ["html", "Html"],
+    "match": [
+        "match",
+        "Match",
+    ],
+    "responsive": [
+        "desktop_only",
+        "mobile_and_tablet",
+        "mobile_only",
+        "tablet_and_desktop",
+        "tablet_only",
+    ],
+    "upload": [
+        "upload",
+        "cancel_upload",
+        "clear_selected_files",
+        "get_upload_dir",
+        "get_upload_url",
+        "selected_files",
+    ],
+}
+
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submodules=_SUBMODULES,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/core/__init__.pyi

@@ -0,0 +1,39 @@
+"""Stub file for reflex/components/core/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from . import layout as layout
+
+from .banner import ConnectionBanner as ConnectionBanner
+from .banner import ConnectionModal as ConnectionModal
+from .banner import ConnectionPulser as ConnectionPulser
+from .banner import ConnectionToaster as ConnectionToaster
+from .banner import connection_banner as connection_banner
+from .banner import connection_modal as connection_modal
+from .banner import connection_toaster as connection_toaster
+from .banner import connection_pulser as connection_pulser
+from .colors import color as color
+from .cond import Cond as Cond
+from .cond import color_mode_cond as color_mode_cond
+from .cond import cond as cond
+from .debounce import DebounceInput as DebounceInput
+from .debounce import debounce_input as debounce_input
+from .foreach import foreach as foreach
+from .foreach import Foreach as Foreach
+from .html import html as html
+from .html import Html as Html
+from .match import match as match
+from .match import Match as Match
+from .responsive import desktop_only as desktop_only
+from .responsive import mobile_and_tablet as mobile_and_tablet
+from .responsive import mobile_only as mobile_only
+from .responsive import tablet_and_desktop as tablet_and_desktop
+from .responsive import tablet_only as tablet_only
+from .upload import upload as upload
+from .upload import cancel_upload as cancel_upload
+from .upload import clear_selected_files as clear_selected_files
+from .upload import get_upload_dir as get_upload_dir
+from .upload import get_upload_url as get_upload_url
+from .upload import selected_files as selected_files
+from reflex.utils import lazy_loader

reflex/components/core/banner.py

@@ -14,7 +14,7 @@ from reflex.components.radix.themes.components.dialog import (
     DialogRoot,
     DialogTitle,
 )
-from reflex.components.radix.themes.layout import Flex
+from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.components.sonner.toast import Toaster, ToastProps
 from reflex.constants import Dirs, Hooks, Imports
@@ -278,3 +278,9 @@ class ConnectionPulser(Div):
             width="100vw",
             height="0",
         )
+
+
+connection_banner = ConnectionBanner.create
+connection_modal = ConnectionModal.create
+connection_toaster = ConnectionToaster.create
+connection_pulser = ConnectionPulser.create

reflex/components/core/banner.pyi

@@ -18,7 +18,7 @@ from reflex.components.radix.themes.components.dialog import (
     DialogRoot,
     DialogTitle,
 )
-from reflex.components.radix.themes.layout import Flex
+from reflex.components.radix.themes.layout.flex import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.components.sonner.toast import Toaster, ToastProps
 from reflex.constants import Dirs, Hooks, Imports
@@ -574,3 +574,8 @@ class ConnectionPulser(Div):
             The connection pulser component.
         """
         ...
+
+connection_banner = ConnectionBanner.create
+connection_modal = ConnectionModal.create
+connection_toaster = ConnectionToaster.create
+connection_pulser = ConnectionPulser.create

reflex/components/core/debounce.py

@@ -136,3 +136,6 @@ class DebounceInput(Component):
 
     def _render(self):
         return super()._render().remove_props("ref")
+
+
+debounce_input = DebounceInput.create

reflex/components/core/debounce.pyi

@@ -106,3 +106,5 @@ class DebounceInput(Component):
         """
         ...
     def get_event_triggers(self) -> dict[str, Any]: ...
+
+debounce_input = DebounceInput.create

reflex/components/core/foreach.py

@@ -139,3 +139,6 @@ class Foreach(Component):
             arg_index=tag.get_index_var_arg(),
             iterable_type=tag.iterable._var_type.mro()[0].__name__,
         )
+
+
+foreach = Foreach.create

reflex/components/core/html.py

@@ -43,3 +43,6 @@ class Html(Div):
 
         # Create the component.
         return super().create(**props)
+
+
+html = Html.create

reflex/components/core/html.pyi

@@ -149,3 +149,5 @@ class Html(Div):
             ValueError: If children are not provided or more than one child is provided.
         """
         ...
+
+html = Html.create

reflex/components/core/match.py

@@ -273,3 +273,6 @@ class Match(MemoizationLeaf):
             super()._get_imports(),
             getattr(self.cond._var_data, "imports", {}),
         )
+
+
+match = Match.create

reflex/components/core/responsive.py

@@ -1,6 +1,6 @@
 """Responsive components."""
 
-from reflex.components.radix.themes.layout import Box
+from reflex.components.radix.themes.layout.box import Box
 
 
 # Add responsive styles shortcuts.

reflex/components/core/upload.py

@@ -7,9 +7,9 @@ from pathlib import Path
 from typing import Any, Callable, ClassVar, Dict, List, Optional, Union
 
 from reflex import constants
-from reflex.components.chakra.forms.input import Input
-from reflex.components.chakra.layout.box import Box
 from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
+from reflex.components.el.elements.forms import Input
+from reflex.components.radix.themes.layout.box import Box
 from reflex.constants import Dirs
 from reflex.event import (
     CallableEventSpec,
@@ -339,3 +339,6 @@ class UploadNamespace(ComponentNamespace):
 
     root = Upload.create
     __call__ = StyledUpload.create
+
+
+upload = UploadNamespace()

reflex/components/core/upload.pyi

@@ -11,9 +11,9 @@ import os
 from pathlib import Path
 from typing import Any, Callable, ClassVar, Dict, List, Optional, Union
 from reflex import constants
-from reflex.components.chakra.forms.input import Input
-from reflex.components.chakra.layout.box import Box
 from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
+from reflex.components.el.elements.forms import Input
+from reflex.components.radix.themes.layout.box import Box
 from reflex.constants import Dirs
 from reflex.event import (
     CallableEventSpec,
@@ -417,3 +417,5 @@ class UploadNamespace(ComponentNamespace):
             The styled upload component.
         """
         ...
+
+upload = UploadNamespace()

reflex/components/datadisplay/__init__.py

@@ -1,11 +1,20 @@
 """Data grid components."""
+from __future__ import annotations
 
-from .code import CodeBlock
-from .code import LiteralCodeBlockTheme as LiteralCodeBlockTheme
-from .code import LiteralCodeLanguage as LiteralCodeLanguage
-from .dataeditor import DataEditor, DataEditorTheme
-from .logo import logo
+from reflex.utils import lazy_loader
 
-code_block = CodeBlock.create
-data_editor = DataEditor.create
-data_editor_theme = DataEditorTheme
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "code": [
+        "CodeBlock",
+        "code_block",
+        "LiteralCodeBlockTheme",
+        "LiteralCodeLanguage",
+    ],
+    "dataeditor": ["data_editor", "data_editor_theme", "DataEditorTheme"],
+    "logo": ["logo"],
+}
+
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/datadisplay/__init__.pyi

@@ -0,0 +1,14 @@
+"""Stub file for reflex/components/datadisplay/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from .code import CodeBlock as CodeBlock
+from .code import code_block as code_block
+from .code import LiteralCodeBlockTheme as LiteralCodeBlockTheme
+from .code import LiteralCodeLanguage as LiteralCodeLanguage
+from .dataeditor import data_editor as data_editor
+from .dataeditor import data_editor_theme as data_editor_theme
+from .dataeditor import DataEditorTheme as DataEditorTheme
+from .logo import logo as logo
+from reflex.utils import lazy_loader

reflex/components/datadisplay/code.py

@@ -523,3 +523,6 @@ class CodeBlock(Component):
         if theme in ["light", "dark"]:
             return f"one-{theme}"
         return theme
+
+
+code_block = CodeBlock.create

reflex/components/datadisplay/code.pyi

@@ -1114,3 +1114,5 @@ class CodeBlock(Component):
     def add_style(self): ...
     @staticmethod
     def convert_theme_name(theme) -> str: ...
+
+code_block = CodeBlock.create

reflex/components/datadisplay/dataeditor.py

@@ -410,3 +410,7 @@ def serialize_dataeditortheme(theme: DataEditorTheme):
     return format.json_dumps(
         {format.to_camel_case(k): v for k, v in theme.__dict__.items() if v is not None}
     )
+
+
+data_editor = DataEditor.create
+data_editor_theme = DataEditorTheme

reflex/components/datadisplay/dataeditor.pyi

@@ -236,3 +236,6 @@ class DataEditor(NoSSRComponent):
 
 @serializer
 def serialize_dataeditortheme(theme: DataEditorTheme): ...
+
+data_editor = DataEditor.create
+data_editor_theme = DataEditorTheme

reflex/components/el/__init__.py

@@ -1,3 +1,17 @@
 """The el package exports raw HTML elements."""
+from __future__ import annotations
 
-from .elements import *
+from reflex.utils import lazy_loader
+
+from . import elements
+
+_SUBMODULES: set[str] = {"elements"}
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    f"elements.{k}": v for k, v in elements._MAPPING.items()
+}
+
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submodules=_SUBMODULES,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/el/__init__.pyi

@@ -0,0 +1,227 @@
+"""Stub file for reflex/components/el/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from . import elements as elements
+
+from .elements.forms import button as button
+from .elements.forms import fieldset as fieldset
+from .elements.forms import form as form
+from .elements.forms import input as input
+from .elements.forms import label as label
+from .elements.forms import legend as legend
+from .elements.forms import meter as meter
+from .elements.forms import optgroup as optgroup
+from .elements.forms import option as option
+from .elements.forms import output as output
+from .elements.forms import progress as progress
+from .elements.forms import select as select
+from .elements.forms import textarea as textarea
+from .elements.forms import Button as Button
+from .elements.forms import Fieldset as Fieldset
+from .elements.forms import Form as Form
+from .elements.forms import Input as Input
+from .elements.forms import Label as Label
+from .elements.forms import Legend as Legend
+from .elements.forms import Meter as Meter
+from .elements.forms import Optgroup as Optgroup
+from .elements.forms import Option as Option
+from .elements.forms import Output as Output
+from .elements.forms import Progress as Progress
+from .elements.forms import Select as Select
+from .elements.forms import Textarea as Textarea
+from .elements.inline import a as a
+from .elements.inline import abbr as abbr
+from .elements.inline import b as b
+from .elements.inline import bdi as bdi
+from .elements.inline import bdo as bdo
+from .elements.inline import br as br
+from .elements.inline import cite as cite
+from .elements.inline import code as code
+from .elements.inline import data as data
+from .elements.inline import dfn as dfn
+from .elements.inline import em as em
+from .elements.inline import i as i
+from .elements.inline import kbd as kbd
+from .elements.inline import mark as mark
+from .elements.inline import q as q
+from .elements.inline import rp as rp
+from .elements.inline import rt as rt
+from .elements.inline import ruby as ruby
+from .elements.inline import s as s
+from .elements.inline import samp as samp
+from .elements.inline import small as small
+from .elements.inline import span as span
+from .elements.inline import strong as strong
+from .elements.inline import sub as sub
+from .elements.inline import sup as sup
+from .elements.inline import time as time
+from .elements.inline import u as u
+from .elements.inline import wbr as wbr
+from .elements.inline import A as A
+from .elements.inline import Abbr as Abbr
+from .elements.inline import B as B
+from .elements.inline import Bdi as Bdi
+from .elements.inline import Bdo as Bdo
+from .elements.inline import Br as Br
+from .elements.inline import Cite as Cite
+from .elements.inline import Code as Code
+from .elements.inline import Data as Data
+from .elements.inline import Dfn as Dfn
+from .elements.inline import Em as Em
+from .elements.inline import I as I
+from .elements.inline import Kbd as Kbd
+from .elements.inline import Mark as Mark
+from .elements.inline import Q as Q
+from .elements.inline import Rp as Rp
+from .elements.inline import Rt as Rt
+from .elements.inline import Ruby as Ruby
+from .elements.inline import S as S
+from .elements.inline import Samp as Samp
+from .elements.inline import Small as Small
+from .elements.inline import Span as Span
+from .elements.inline import Strong as Strong
+from .elements.inline import Sub as Sub
+from .elements.inline import Sup as Sup
+from .elements.inline import Time as Time
+from .elements.inline import U as U
+from .elements.inline import Wbr as Wbr
+from .elements.media import area as area
+from .elements.media import audio as audio
+from .elements.media import img as img
+from .elements.media import image as image
+from .elements.media import map as map
+from .elements.media import track as track
+from .elements.media import video as video
+from .elements.media import embed as embed
+from .elements.media import iframe as iframe
+from .elements.media import object as object
+from .elements.media import picture as picture
+from .elements.media import portal as portal
+from .elements.media import source as source
+from .elements.media import svg as svg
+from .elements.media import path as path
+from .elements.media import Area as Area
+from .elements.media import Audio as Audio
+from .elements.media import Img as Img
+from .elements.media import Map as Map
+from .elements.media import Track as Track
+from .elements.media import Video as Video
+from .elements.media import Embed as Embed
+from .elements.media import Iframe as Iframe
+from .elements.media import Object as Object
+from .elements.media import Picture as Picture
+from .elements.media import Portal as Portal
+from .elements.media import Source as Source
+from .elements.media import Svg as Svg
+from .elements.media import Path as Path
+from .elements.metadata import base as base
+from .elements.metadata import head as head
+from .elements.metadata import link as link
+from .elements.metadata import meta as meta
+from .elements.metadata import title as title
+from .elements.metadata import Base as Base
+from .elements.metadata import Head as Head
+from .elements.metadata import Link as Link
+from .elements.metadata import Meta as Meta
+from .elements.metadata import Title as Title
+from .elements.other import details as details
+from .elements.other import dialog as dialog
+from .elements.other import summary as summary
+from .elements.other import slot as slot
+from .elements.other import template as template
+from .elements.other import math as math
+from .elements.other import html as html
+from .elements.other import Details as Details
+from .elements.other import Dialog as Dialog
+from .elements.other import Summary as Summary
+from .elements.other import Slot as Slot
+from .elements.other import Template as Template
+from .elements.other import Math as Math
+from .elements.other import Html as Html
+from .elements.scripts import canvas as canvas
+from .elements.scripts import noscript as noscript
+from .elements.scripts import script as script
+from .elements.scripts import Canvas as Canvas
+from .elements.scripts import Noscript as Noscript
+from .elements.scripts import Script as Script
+from .elements.sectioning import address as address
+from .elements.sectioning import article as article
+from .elements.sectioning import aside as aside
+from .elements.sectioning import body as body
+from .elements.sectioning import header as header
+from .elements.sectioning import footer as footer
+from .elements.sectioning import h1 as h1
+from .elements.sectioning import h2 as h2
+from .elements.sectioning import h3 as h3
+from .elements.sectioning import h4 as h4
+from .elements.sectioning import h5 as h5
+from .elements.sectioning import h6 as h6
+from .elements.sectioning import main as main
+from .elements.sectioning import nav as nav
+from .elements.sectioning import section as section
+from .elements.sectioning import Address as Address
+from .elements.sectioning import Article as Article
+from .elements.sectioning import Aside as Aside
+from .elements.sectioning import Body as Body
+from .elements.sectioning import Header as Header
+from .elements.sectioning import Footer as Footer
+from .elements.sectioning import H1 as H1
+from .elements.sectioning import H2 as H2
+from .elements.sectioning import H3 as H3
+from .elements.sectioning import H4 as H4
+from .elements.sectioning import H5 as H5
+from .elements.sectioning import H6 as H6
+from .elements.sectioning import Main as Main
+from .elements.sectioning import Nav as Nav
+from .elements.sectioning import Section as Section
+from .elements.tables import caption as caption
+from .elements.tables import col as col
+from .elements.tables import colgroup as colgroup
+from .elements.tables import table as table
+from .elements.tables import td as td
+from .elements.tables import tfoot as tfoot
+from .elements.tables import th as th
+from .elements.tables import thead as thead
+from .elements.tables import tr as tr
+from .elements.tables import Tbody as Tbody
+from .elements.tables import Caption as Caption
+from .elements.tables import Col as Col
+from .elements.tables import Colgroup as Colgroup
+from .elements.tables import Table as Table
+from .elements.tables import Td as Td
+from .elements.tables import Tfoot as Tfoot
+from .elements.tables import Th as Th
+from .elements.tables import Thead as Thead
+from .elements.tables import Tr as Tr
+from .elements.typography import blockquote as blockquote
+from .elements.typography import dd as dd
+from .elements.typography import div as div
+from .elements.typography import dl as dl
+from .elements.typography import dt as dt
+from .elements.typography import figcaption as figcaption
+from .elements.typography import hr as hr
+from .elements.typography import ol as ol
+from .elements.typography import li as li
+from .elements.typography import p as p
+from .elements.typography import pre as pre
+from .elements.typography import ul as ul
+from .elements.typography import ins as ins
+from .elements.typography import del_ as del_
+from .elements.typography import Del as Del
+from .elements.typography import Blockquote as Blockquote
+from .elements.typography import Dd as Dd
+from .elements.typography import Div as Div
+from .elements.typography import Dl as Dl
+from .elements.typography import Dt as Dt
+from .elements.typography import Figcaption as Figcaption
+from .elements.typography import Hr as Hr
+from .elements.typography import Ol as Ol
+from .elements.typography import Li as Li
+from .elements.typography import P as P
+from .elements.typography import Pre as Pre
+from .elements.typography import Ul as Ul
+from .elements.typography import Ins as Ins
+from reflex.utils import lazy_loader
+from . import elements

reflex/components/el/elements/__init__.py

@@ -1,227 +1,136 @@
 """Element classes."""
-from .forms import (
-    Button,
-    Fieldset,
-    Form,
-    Input,
-    Label,
-    Legend,
-    Meter,
-    Optgroup,
-    Option,
-    Output,
-    Progress,
-    Select,
-    Textarea,
-)
-from .inline import (
-    A,
-    Abbr,
-    B,
-    Bdi,
-    Bdo,
-    Br,
-    Cite,
-    Code,
-    Data,
-    Dfn,
-    Em,
-    I,
-    Kbd,
-    Mark,
-    Q,
-    Rp,
-    Rt,
-    Ruby,
-    S,
-    Samp,
-    Small,
-    Span,
-    Strong,
-    Sub,
-    Sup,
-    Time,
-    U,
-    Wbr,
-)
-from .media import (
-    Area,
-    Audio,
-    Embed,
-    Iframe,
-    Img,
-    Map,
-    Object,
-    Path,
-    Picture,
-    Portal,
-    Source,
-    Svg,
-    Track,
-    Video,
-)
-from .metadata import Base, Head, Link, Meta, Title
-from .other import Details, Dialog, Html, Math, Slot, Summary, Template
-from .scripts import Canvas, Noscript, Script
-from .sectioning import (
-    H1,
-    H2,
-    H3,
-    H4,
-    H5,
-    H6,
-    Address,
-    Article,
-    Aside,
-    Body,
-    Footer,
-    Header,
-    Main,
-    Nav,
-    Section,
-)
-from .tables import Caption, Col, Colgroup, Table, Tbody, Td, Tfoot, Th, Thead, Tr
-from .typography import (
-    Blockquote,
-    Dd,
-    Del,
-    Div,
-    Dl,
-    Dt,
-    Figcaption,
-    Hr,
-    Ins,
-    Li,
-    Ol,
-    P,
-    Pre,
-    Ul,
-)
+from __future__ import annotations
 
-# Forms
-button = Button.create
-fieldset = Fieldset.create
-form = Form.create
-input = Input.create
-label = Label.create
-legend = Legend.create
-meter = Meter.create
-optgroup = Optgroup.create
-option = Option.create
-output = Output.create
-progress = Progress.create
-select = Select.create
-textarea = Textarea.create
+from reflex.utils import lazy_loader
 
-# Tables
-caption = Caption.create
-col = Col.create
-colgroup = Colgroup.create
-table = Table.create
-tbody = Tbody.create
-td = Td.create
-tfoot = Tfoot.create
-th = Th.create
-thead = Thead.create
-tr = Tr.create
+_MAPPING = {
+    "forms": [
+        "button",
+        "fieldset",
+        "form",
+        "input",
+        "label",
+        "legend",
+        "meter",
+        "optgroup",
+        "option",
+        "output",
+        "progress",
+        "select",
+        "textarea",
+    ],
+    "inline": [
+        "a",
+        "abbr",
+        "b",
+        "bdi",
+        "bdo",
+        "br",
+        "cite",
+        "code",
+        "data",
+        "dfn",
+        "em",
+        "i",
+        "kbd",
+        "mark",
+        "q",
+        "rp",
+        "rt",
+        "ruby",
+        "s",
+        "samp",
+        "small",
+        "span",
+        "strong",
+        "sub",
+        "sup",
+        "time",
+        "u",
+        "wbr",
+    ],
+    "media": [
+        "area",
+        "audio",
+        "img",
+        "image",
+        "map",
+        "track",
+        "video",
+        "embed",
+        "iframe",
+        "object",
+        "picture",
+        "portal",
+        "source",
+        "svg",
+        "path",
+    ],
+    "metadata": [
+        "base",
+        "head",
+        "link",
+        "meta",
+        "title",
+    ],
+    "other": ["details", "dialog", "summary", "slot", "template", "math", "html"],
+    "scripts": ["canvas", "noscript", "script"],
+    "sectioning": [
+        "address",
+        "article",
+        "aside",
+        "body",
+        "header",
+        "footer",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "main",
+        "nav",
+        "section",
+    ],
+    "tables": [
+        "caption",
+        "col",
+        "colgroup",
+        "table",
+        "td",
+        "tfoot",
+        "th",
+        "thead",
+        "tr",
+        "Tbody",
+    ],
+    "typography": [
+        "blockquote",
+        "dd",
+        "div",
+        "dl",
+        "dt",
+        "figcaption",
+        "hr",
+        "ol",
+        "li",
+        "p",
+        "pre",
+        "ul",
+        "ins",
+        "del_",
+        "Del",
+    ],
+}
 
-# Media
-area = Area.create
-audio = Audio.create
-img = Img.create
-map = Map.create
-track = Track.create
-video = Video.create
-embed = Embed.create
-iframe = Iframe.create
-object = Object.create
-picture = Picture.create
-portal = Portal.create
-source = Source.create
-svg = Svg.create
-path = Path.create
 
-# Sectioning
-address = Address.create
-article = Article.create
-aside = Aside.create
-body = Body.create
-header = Header.create
-footer = Footer.create
+EXCLUDE = ["del_", "Del", "image"]
+for _, v in _MAPPING.items():
+    v.extend([mod.capitalize() for mod in v if mod not in EXCLUDE])
 
-# Typography
-blockquote = Blockquote.create
-dd = Dd.create
-div = Div.create
-dl = Dl.create
-dt = Dt.create
-figcaption = Figcaption.create
-hr = Hr.create
-li = Li.create
-ol = Ol.create
-p = P.create
-pre = Pre.create
-ul = Ul.create
-ins = Ins.create
-del_ = Del.create  # 'del' is a reserved keyword in Python
-h1 = H1.create
-h2 = H2.create
-h3 = H3.create
-h4 = H4.create
-h5 = H5.create
-h6 = H6.create
-main = Main.create
-nav = Nav.create
-section = Section.create
+_SUBMOD_ATTRS: dict[str, list[str]] = _MAPPING
 
-# Inline
-a = A.create
-abbr = Abbr.create
-b = B.create
-bdi = Bdi.create
-bdo = Bdo.create
-br = Br.create
-cite = Cite.create
-code = Code.create
-data = Data.create
-dfn = Dfn.create
-em = Em.create
-i = I.create
-kbd = Kbd.create
-mark = Mark.create
-q = Q.create
-rp = Rp.create
-rt = Rt.create
-ruby = Ruby.create
-s = S.create
-samp = Samp.create
-small = Small.create
-span = Span.create
-strong = Strong.create
-sub = Sub.create
-sup = Sup.create
-time = Time.create
-u = U.create
-wbr = Wbr.create
-
-# Metadata
-base = Base.create
-head = Head.create
-link = Link.create
-meta = Meta.create
-title = Title.create
-
-# Scripts
-canvas = Canvas.create
-noscript = Noscript.create
-script = Script.create
-
-# Other
-details = Details.create
-dialog = Dialog.create
-summary = Summary.create
-slot = Slot.create
-template = Template.create
-svg = Svg.create
-math = Math.create
-html = Html.create
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/el/elements/__init__.pyi

@@ -0,0 +1,341 @@
+"""Stub file for reflex/components/el/elements/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from .forms import button as button
+from .forms import fieldset as fieldset
+from .forms import form as form
+from .forms import input as input
+from .forms import label as label
+from .forms import legend as legend
+from .forms import meter as meter
+from .forms import optgroup as optgroup
+from .forms import option as option
+from .forms import output as output
+from .forms import progress as progress
+from .forms import select as select
+from .forms import textarea as textarea
+from .forms import Button as Button
+from .forms import Fieldset as Fieldset
+from .forms import Form as Form
+from .forms import Input as Input
+from .forms import Label as Label
+from .forms import Legend as Legend
+from .forms import Meter as Meter
+from .forms import Optgroup as Optgroup
+from .forms import Option as Option
+from .forms import Output as Output
+from .forms import Progress as Progress
+from .forms import Select as Select
+from .forms import Textarea as Textarea
+from .inline import a as a
+from .inline import abbr as abbr
+from .inline import b as b
+from .inline import bdi as bdi
+from .inline import bdo as bdo
+from .inline import br as br
+from .inline import cite as cite
+from .inline import code as code
+from .inline import data as data
+from .inline import dfn as dfn
+from .inline import em as em
+from .inline import i as i
+from .inline import kbd as kbd
+from .inline import mark as mark
+from .inline import q as q
+from .inline import rp as rp
+from .inline import rt as rt
+from .inline import ruby as ruby
+from .inline import s as s
+from .inline import samp as samp
+from .inline import small as small
+from .inline import span as span
+from .inline import strong as strong
+from .inline import sub as sub
+from .inline import sup as sup
+from .inline import time as time
+from .inline import u as u
+from .inline import wbr as wbr
+from .inline import A as A
+from .inline import Abbr as Abbr
+from .inline import B as B
+from .inline import Bdi as Bdi
+from .inline import Bdo as Bdo
+from .inline import Br as Br
+from .inline import Cite as Cite
+from .inline import Code as Code
+from .inline import Data as Data
+from .inline import Dfn as Dfn
+from .inline import Em as Em
+from .inline import I as I
+from .inline import Kbd as Kbd
+from .inline import Mark as Mark
+from .inline import Q as Q
+from .inline import Rp as Rp
+from .inline import Rt as Rt
+from .inline import Ruby as Ruby
+from .inline import S as S
+from .inline import Samp as Samp
+from .inline import Small as Small
+from .inline import Span as Span
+from .inline import Strong as Strong
+from .inline import Sub as Sub
+from .inline import Sup as Sup
+from .inline import Time as Time
+from .inline import U as U
+from .inline import Wbr as Wbr
+from .media import area as area
+from .media import audio as audio
+from .media import img as img
+from .media import image as image
+from .media import map as map
+from .media import track as track
+from .media import video as video
+from .media import embed as embed
+from .media import iframe as iframe
+from .media import object as object
+from .media import picture as picture
+from .media import portal as portal
+from .media import source as source
+from .media import svg as svg
+from .media import path as path
+from .media import Area as Area
+from .media import Audio as Audio
+from .media import Img as Img
+from .media import Map as Map
+from .media import Track as Track
+from .media import Video as Video
+from .media import Embed as Embed
+from .media import Iframe as Iframe
+from .media import Object as Object
+from .media import Picture as Picture
+from .media import Portal as Portal
+from .media import Source as Source
+from .media import Svg as Svg
+from .media import Path as Path
+from .metadata import base as base
+from .metadata import head as head
+from .metadata import link as link
+from .metadata import meta as meta
+from .metadata import title as title
+from .metadata import Base as Base
+from .metadata import Head as Head
+from .metadata import Link as Link
+from .metadata import Meta as Meta
+from .metadata import Title as Title
+from .other import details as details
+from .other import dialog as dialog
+from .other import summary as summary
+from .other import slot as slot
+from .other import template as template
+from .other import math as math
+from .other import html as html
+from .other import Details as Details
+from .other import Dialog as Dialog
+from .other import Summary as Summary
+from .other import Slot as Slot
+from .other import Template as Template
+from .other import Math as Math
+from .other import Html as Html
+from .scripts import canvas as canvas
+from .scripts import noscript as noscript
+from .scripts import script as script
+from .scripts import Canvas as Canvas
+from .scripts import Noscript as Noscript
+from .scripts import Script as Script
+from .sectioning import address as address
+from .sectioning import article as article
+from .sectioning import aside as aside
+from .sectioning import body as body
+from .sectioning import header as header
+from .sectioning import footer as footer
+from .sectioning import h1 as h1
+from .sectioning import h2 as h2
+from .sectioning import h3 as h3
+from .sectioning import h4 as h4
+from .sectioning import h5 as h5
+from .sectioning import h6 as h6
+from .sectioning import main as main
+from .sectioning import nav as nav
+from .sectioning import section as section
+from .sectioning import Address as Address
+from .sectioning import Article as Article
+from .sectioning import Aside as Aside
+from .sectioning import Body as Body
+from .sectioning import Header as Header
+from .sectioning import Footer as Footer
+from .sectioning import H1 as H1
+from .sectioning import H2 as H2
+from .sectioning import H3 as H3
+from .sectioning import H4 as H4
+from .sectioning import H5 as H5
+from .sectioning import H6 as H6
+from .sectioning import Main as Main
+from .sectioning import Nav as Nav
+from .sectioning import Section as Section
+from .tables import caption as caption
+from .tables import col as col
+from .tables import colgroup as colgroup
+from .tables import table as table
+from .tables import td as td
+from .tables import tfoot as tfoot
+from .tables import th as th
+from .tables import thead as thead
+from .tables import tr as tr
+from .tables import Tbody as Tbody
+from .tables import Caption as Caption
+from .tables import Col as Col
+from .tables import Colgroup as Colgroup
+from .tables import Table as Table
+from .tables import Td as Td
+from .tables import Tfoot as Tfoot
+from .tables import Th as Th
+from .tables import Thead as Thead
+from .tables import Tr as Tr
+from .typography import blockquote as blockquote
+from .typography import dd as dd
+from .typography import div as div
+from .typography import dl as dl
+from .typography import dt as dt
+from .typography import figcaption as figcaption
+from .typography import hr as hr
+from .typography import ol as ol
+from .typography import li as li
+from .typography import p as p
+from .typography import pre as pre
+from .typography import ul as ul
+from .typography import ins as ins
+from .typography import del_ as del_
+from .typography import Del as Del
+from .typography import Blockquote as Blockquote
+from .typography import Dd as Dd
+from .typography import Div as Div
+from .typography import Dl as Dl
+from .typography import Dt as Dt
+from .typography import Figcaption as Figcaption
+from .typography import Hr as Hr
+from .typography import Ol as Ol
+from .typography import Li as Li
+from .typography import P as P
+from .typography import Pre as Pre
+from .typography import Ul as Ul
+from .typography import Ins as Ins
+from reflex.utils import lazy_loader
+
+_MAPPING = {
+    "forms": [
+        "button",
+        "fieldset",
+        "form",
+        "input",
+        "label",
+        "legend",
+        "meter",
+        "optgroup",
+        "option",
+        "output",
+        "progress",
+        "select",
+        "textarea",
+    ],
+    "inline": [
+        "a",
+        "abbr",
+        "b",
+        "bdi",
+        "bdo",
+        "br",
+        "cite",
+        "code",
+        "data",
+        "dfn",
+        "em",
+        "i",
+        "kbd",
+        "mark",
+        "q",
+        "rp",
+        "rt",
+        "ruby",
+        "s",
+        "samp",
+        "small",
+        "span",
+        "strong",
+        "sub",
+        "sup",
+        "time",
+        "u",
+        "wbr",
+    ],
+    "media": [
+        "area",
+        "audio",
+        "img",
+        "image",
+        "map",
+        "track",
+        "video",
+        "embed",
+        "iframe",
+        "object",
+        "picture",
+        "portal",
+        "source",
+        "svg",
+        "path",
+    ],
+    "metadata": ["base", "head", "link", "meta", "title"],
+    "other": ["details", "dialog", "summary", "slot", "template", "math", "html"],
+    "scripts": ["canvas", "noscript", "script"],
+    "sectioning": [
+        "address",
+        "article",
+        "aside",
+        "body",
+        "header",
+        "footer",
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "main",
+        "nav",
+        "section",
+    ],
+    "tables": [
+        "caption",
+        "col",
+        "colgroup",
+        "table",
+        "td",
+        "tfoot",
+        "th",
+        "thead",
+        "tr",
+        "Tbody",
+    ],
+    "typography": [
+        "blockquote",
+        "dd",
+        "div",
+        "dl",
+        "dt",
+        "figcaption",
+        "hr",
+        "ol",
+        "li",
+        "p",
+        "pre",
+        "ul",
+        "ins",
+        "del_",
+        "Del",
+    ],
+}
+EXCLUDE = ["del_", "Del", "image"]
+for _, v in _MAPPING.items():
+    v.extend([mod.capitalize() for mod in v if mod not in EXCLUDE])

reflex/components/el/elements/forms.py

@@ -650,3 +650,18 @@ class Textarea(BaseHTML):
             EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key],
             EventTriggers.ON_KEY_UP: lambda e0: [e0.key],
         }
+
+
+button = Button.create
+fieldset = Fieldset.create
+form = Form.create
+input = Input.create
+label = Label.create
+legend = Legend.create
+meter = Meter.create
+optgroup = Optgroup.create
+option = Option.create
+output = Output.create
+progress = Progress.create
+select = Select.create
+textarea = Textarea.create

reflex/components/el/elements/forms.pyi

@@ -2180,3 +2180,17 @@ class Textarea(BaseHTML):
             The component.
         """
         ...
+
+button = Button.create
+fieldset = Fieldset.create
+form = Form.create
+input = Input.create
+label = Label.create
+legend = Legend.create
+meter = Meter.create
+optgroup = Optgroup.create
+option = Option.create
+output = Output.create
+progress = Progress.create
+select = Select.create
+textarea = Textarea.create

reflex/components/el/elements/inline.py

@@ -208,3 +208,33 @@ class Wbr(BaseHTML):
     """Display the wbr element."""
 
     tag = "wbr"
+
+
+a = A.create
+abbr = Abbr.create
+b = B.create
+bdi = Bdi.create
+bdo = Bdo.create
+br = Br.create
+cite = Cite.create
+code = Code.create
+data = Data.create
+dfn = Dfn.create
+em = Em.create
+i = I.create
+kbd = Kbd.create
+mark = Mark.create
+q = Q.create
+rp = Rp.create
+rt = Rt.create
+ruby = Ruby.create
+s = S.create
+samp = Samp.create
+small = Small.create
+span = Span.create
+strong = Strong.create
+sub = Sub.create
+sup = Sup.create
+time = Time.create
+u = U.create
+wbr = Wbr.create

reflex/components/el/elements/inline.pyi

@@ -3746,3 +3746,32 @@ class Wbr(BaseHTML):
             The component.
         """
         ...
+
+a = A.create
+abbr = Abbr.create
+b = B.create
+bdi = Bdi.create
+bdo = Bdo.create
+br = Br.create
+cite = Cite.create
+code = Code.create
+data = Data.create
+dfn = Dfn.create
+em = Em.create
+i = I.create
+kbd = Kbd.create
+mark = Mark.create
+q = Q.create
+rp = Rp.create
+rt = Rt.create
+ruby = Ruby.create
+s = S.create
+samp = Samp.create
+small = Small.create
+span = Span.create
+strong = Strong.create
+sub = Sub.create
+sup = Sup.create
+time = Time.create
+u = U.create
+wbr = Wbr.create

reflex/components/el/elements/media.py

@@ -316,3 +316,19 @@ class Path(BaseHTML):
 
     # Defines the shape of the path
     d: Var[Union[str, int, bool]]
+
+
+area = Area.create
+audio = Audio.create
+image = img = Img.create
+map = Map.create
+track = Track.create
+video = Video.create
+embed = Embed.create
+iframe = Iframe.create
+object = Object.create
+picture = Picture.create
+portal = Portal.create
+source = Source.create
+svg = Svg.create
+path = Path.create

reflex/components/el/elements/media.pyi

@@ -2086,3 +2086,18 @@ class Path(BaseHTML):
             The component.
         """
         ...
+
+area = Area.create
+audio = Audio.create
+image = img = Img.create
+map = Map.create
+track = Track.create
+video = Video.create
+embed = Embed.create
+iframe = Iframe.create
+object = Object.create
+picture = Picture.create
+portal = Portal.create
+source = Source.create
+svg = Svg.create
+path = Path.create

reflex/components/el/elements/metadata.py

@@ -53,3 +53,10 @@ class Title(Element):  # noqa: E742
     """Display the title element."""
 
     tag = "title"
+
+
+base = Base.create
+head = Head.create
+link = Link.create
+meta = Meta.create
+title = Title.create

reflex/components/el/elements/metadata.pyi

@@ -650,3 +650,9 @@ class Title(Element):
             The component.
         """
         ...
+
+base = Base.create
+head = Head.create
+link = Link.create
+meta = Meta.create
+title = Title.create

reflex/components/el/elements/other.py

@@ -59,3 +59,12 @@ class Html(BaseHTML):
 
     # Specifies the URL of the document's cache manifest (obsolete in HTML5)
     manifest: Var[Union[str, int, bool]]
+
+
+details = Details.create
+dialog = Dialog.create
+summary = Summary.create
+slot = Slot.create
+template = Template.create
+math = Math.create
+html = Html.create

reflex/components/el/elements/other.pyi

@@ -942,3 +942,11 @@ class Html(BaseHTML):
             The component.
         """
         ...
+
+details = Details.create
+dialog = Dialog.create
+summary = Summary.create
+slot = Slot.create
+template = Template.create
+math = Math.create
+html = Html.create

reflex/components/el/elements/scripts.py

@@ -50,3 +50,8 @@ class Script(BaseHTML):
 
     # Specifies the MIME type of the script
     type: Var[Union[str, int, bool]]
+
+
+canvas = Canvas.create
+noscript = Noscript.create
+script = Script.create

reflex/components/el/elements/scripts.pyi

@@ -438,3 +438,7 @@ class Script(BaseHTML):
             The component.
         """
         ...
+
+canvas = Canvas.create
+noscript = Noscript.create
+script = Script.create

reflex/components/el/elements/sectioning.py

@@ -93,3 +93,20 @@ class Section(BaseHTML):  # noqa: E742
     """Display the section element."""
 
     tag = "section"
+
+
+address = Address.create
+article = Article.create
+aside = Aside.create
+body = Body.create
+header = Header.create
+footer = Footer.create
+h1 = H1.create
+h2 = H2.create
+h3 = H3.create
+h4 = H4.create
+h5 = H5.create
+h6 = H6.create
+main = Main.create
+nav = Nav.create
+section = Section.create

reflex/components/el/elements/sectioning.pyi

@@ -1989,3 +1989,19 @@ class Section(BaseHTML):
             The component.
         """
         ...
+
+address = Address.create
+article = Article.create
+aside = Aside.create
+body = Body.create
+header = Header.create
+footer = Footer.create
+h1 = H1.create
+h2 = H2.create
+h3 = H3.create
+h4 = H4.create
+h5 = H5.create
+h6 = H6.create
+main = Main.create
+nav = Nav.create
+section = Section.create

reflex/components/el/elements/tables.py

@@ -124,3 +124,15 @@ class Tr(BaseHTML):
 
     # Alignment of the content within the table row
     align: Var[Union[str, int, bool]]
+
+
+caption = Caption.create
+col = Col.create
+colgroup = Colgroup.create
+table = Table.create
+tbody = Tbody.create
+td = Td.create
+tfoot = Tfoot.create
+th = Th.create
+thead = Thead.create
+tr = Tr.create

reflex/components/el/elements/tables.pyi

@@ -1406,3 +1406,14 @@ class Tr(BaseHTML):
             The component.
         """
         ...
+
+caption = Caption.create
+col = Col.create
+colgroup = Colgroup.create
+table = Table.create
+tbody = Tbody.create
+td = Td.create
+tfoot = Tfoot.create
+th = Th.create
+thead = Thead.create
+tr = Tr.create

reflex/components/el/elements/typography.py

@@ -124,3 +124,19 @@ class Del(BaseHTML):
 
     # Specifies the date and time of when the text was deleted.
     date_time: Var[Union[str, int, bool]]
+
+
+blockquote = Blockquote.create
+dd = Dd.create
+div = Div.create
+dl = Dl.create
+dt = Dt.create
+figcaption = Figcaption.create
+hr = Hr.create
+li = Li.create
+ol = Ol.create
+p = P.create
+pre = Pre.create
+ul = Ul.create
+ins = Ins.create
+del_ = Del.create  # 'del' is a reserved keyword in Python

reflex/components/el/elements/typography.pyi

@@ -2020,3 +2020,18 @@ class Del(BaseHTML):
             The component.
         """
         ...
+
+blockquote = Blockquote.create
+dd = Dd.create
+div = Div.create
+dl = Dl.create
+dt = Dt.create
+figcaption = Figcaption.create
+hr = Hr.create
+li = Li.create
+ol = Ol.create
+p = P.create
+pre = Pre.create
+ul = Ul.create
+ins = Ins.create
+del_ = Del.create

reflex/components/moment/__init__.py

@@ -1,5 +1,5 @@
 """Moment.js component."""
 
-from .moment import Moment
+from .moment import Moment, MomentDelta
 
 moment = Moment.create

reflex/components/radix/__init__.py

@@ -1,4 +1,16 @@
 """Namespace for components provided by @radix-ui packages."""
+from __future__ import annotations
 
-from .primitives import *
-from .themes import *
+from reflex import RADIX_MAPPING
+from reflex.utils import lazy_loader
+
+_SUBMODULES: set[str] = {"themes", "primitives"}
+
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "".join(k.split("components.radix.")[-1]): v for k, v in RADIX_MAPPING.items()
+}
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submodules=_SUBMODULES,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/radix/__init__.pyi

@@ -0,0 +1,73 @@
+"""Stub file for reflex/components/radix/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from . import primitives as primitives
+from . import themes as themes
+
+from .themes.color_mode import color_mode as color_mode
+from .themes.base import theme as theme
+from .themes.base import theme_panel as theme_panel
+from .themes.components.alert_dialog import alert_dialog as alert_dialog
+from .themes.components.aspect_ratio import aspect_ratio as aspect_ratio
+from .themes.components.avatar import avatar as avatar
+from .themes.components.badge import badge as badge
+from .themes.components.button import button as button
+from .themes.components.callout import callout as callout
+from .themes.components.card import card as card
+from .themes.components.checkbox import checkbox as checkbox
+from .themes.components.context_menu import context_menu as context_menu
+from .themes.components.data_list import data_list as data_list
+from .themes.components.dialog import dialog as dialog
+from .themes.components.hover_card import hover_card as hover_card
+from .themes.components.icon_button import icon_button as icon_button
+from .themes.components.text_field import input as input
+from .themes.components.inset import inset as inset
+from .themes.components.popover import popover as popover
+from .themes.components.scroll_area import scroll_area as scroll_area
+from .themes.components.select import select as select
+from .themes.components.skeleton import skeleton as skeleton
+from .themes.components.slider import slider as slider
+from .themes.components.spinner import spinner as spinner
+from .themes.components.switch import switch as switch
+from .themes.components.table import table as table
+from .themes.components.tabs import tabs as tabs
+from .themes.components.text_area import text_area as text_area
+from .themes.components.tooltip import tooltip as tooltip
+from .themes.components.segmented_control import segmented_control as segmented_control
+from .themes.components.radio_cards import radio_cards as radio_cards
+from .themes.components.checkbox_cards import checkbox_cards as checkbox_cards
+from .themes.components.checkbox_group import checkbox_group as checkbox_group
+from .themes.components.text_field import text_field as text_field
+from .themes.components.radio_group import radio as radio
+from .themes.components.radio_group import radio_group as radio_group
+from .themes.components.dropdown_menu import menu as menu
+from .themes.components.dropdown_menu import dropdown_menu as dropdown_menu
+from .themes.components.separator import divider as divider
+from .themes.components.separator import separator as separator
+from .themes.typography.blockquote import blockquote as blockquote
+from .themes.typography.code import code as code
+from .themes.typography.heading import heading as heading
+from .themes.typography.link import link as link
+from .themes.typography.text import text as text
+from .themes.layout.box import box as box
+from .themes.layout.center import center as center
+from .themes.layout.container import container as container
+from .themes.layout.flex import flex as flex
+from .themes.layout.grid import grid as grid
+from .themes.layout.section import section as section
+from .themes.layout.spacer import spacer as spacer
+from .themes.layout.stack import stack as stack
+from .themes.layout.stack import hstack as hstack
+from .themes.layout.stack import vstack as vstack
+from .themes.layout.list import list_ns as list
+from .themes.layout.list import list_item as list_item
+from .themes.layout.list import ordered_list as ordered_list
+from .themes.layout.list import unordered_list as unordered_list
+from .primitives.accordion import accordion as accordion
+from .primitives.drawer import drawer as drawer
+from .primitives.form import form as form
+from .primitives.progress import progress as progress
+from reflex import RADIX_MAPPING
+from reflex.utils import lazy_loader

reflex/components/radix/primitives/__init__.py

@@ -1,7 +1,15 @@
 """Radix primitive components (https://www.radix-ui.com/primitives)."""
+from __future__ import annotations
 
-from .accordion import accordion
-from .drawer import drawer
-from .form import form
-from .progress import progress
-from .slider import slider
+from reflex import RADIX_PRIMITIVES_MAPPING
+from reflex.utils import lazy_loader
+
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "".join(k.split("components.radix.primitives.")[-1]): v
+    for k, v in RADIX_PRIMITIVES_MAPPING.items()
+}
+
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/radix/primitives/__init__.pyi

@@ -0,0 +1,11 @@
+"""Stub file for reflex/components/radix/primitives/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from .accordion import accordion as accordion
+from .drawer import drawer as drawer
+from .form import form as form
+from .progress import progress as progress
+from reflex import RADIX_PRIMITIVES_MAPPING
+from reflex.utils import lazy_loader

reflex/components/radix/themes/__init__.py

@@ -1,7 +1,21 @@
 """Namespace for components provided by the @radix-ui/themes library."""
-from .base import theme as theme
-from .base import theme_panel as theme_panel
-from .color_mode import color_mode_var_and_namespace as color_mode
-from .components import *
-from .layout import *
-from .typography import *
+from __future__ import annotations
+
+from reflex.utils import lazy_loader
+
+_SUBMODULES: set[str] = {"components", "layout", "typography"}
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "base": [
+        "theme",
+        "theme_panel",
+    ],
+    "color_mode": [
+        "color_mode",
+    ],
+}
+
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submodules=_SUBMODULES,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/radix/themes/__init__.pyi

@@ -0,0 +1,13 @@
+"""Stub file for reflex/components/radix/themes/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from . import components as components
+from . import layout as layout
+from . import typography as typography
+
+from .base import theme as theme
+from .base import theme_panel as theme_panel
+from .color_mode import color_mode as color_mode
+from reflex.utils import lazy_loader

reflex/components/radix/themes/color_mode.py

@@ -174,4 +174,6 @@ class ColorModeNamespace(BaseVar):
     switch = staticmethod(ColorModeSwitch.create)
 
 
-color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))
+color_mode = color_mode_var_and_namespace = ColorModeNamespace(
+    **dataclasses.asdict(color_mode)
+)

reflex/components/radix/themes/color_mode.pyi

@@ -543,4 +543,6 @@ class ColorModeNamespace(BaseVar):
     button = staticmethod(ColorModeIconButton.create)
     switch = staticmethod(ColorModeSwitch.create)
 
-color_mode_var_and_namespace = ColorModeNamespace(**dataclasses.asdict(color_mode))
+color_mode = color_mode_var_and_namespace = ColorModeNamespace(
+    **dataclasses.asdict(color_mode)
+)

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

@@ -1,83 +1,15 @@
 """Radix themes components."""
+from __future__ import annotations
 
-from .alert_dialog import alert_dialog as alert_dialog
-from .aspect_ratio import aspect_ratio as aspect_ratio
-from .avatar import avatar as avatar
-from .badge import badge as badge
-from .button import button as button
-from .callout import callout as callout
-from .card import card as card
-from .checkbox import checkbox as checkbox
-from .checkbox_cards import checkbox_cards as checkbox_cards
-from .checkbox_group import checkbox_group as checkbox_group
-from .context_menu import context_menu as context_menu
-from .data_list import data_list as data_list
-from .dialog import dialog as dialog
-from .dropdown_menu import dropdown_menu as dropdown_menu
-from .dropdown_menu import menu as menu
-from .hover_card import hover_card as hover_card
-from .icon_button import icon_button as icon_button
-from .inset import inset as inset
-from .popover import popover as popover
-from .progress import progress as progress
-from .radio_cards import radio_cards as radio_cards
-from .radio_group import radio as radio
-from .radio_group import radio_group as radio_group
-from .scroll_area import scroll_area as scroll_area
-from .segmented_control import segmented_control as segmented_control
-from .select import select as select
-from .separator import divider as divider
-from .separator import separator as separator
-from .skeleton import skeleton as skeleton
-from .slider import slider as slider
-from .spinner import spinner as spinner
-from .switch import switch as switch
-from .table import table as table
-from .tabs import tabs as tabs
-from .text_area import text_area as text_area
-from .text_field import text_field as text_field
-from .tooltip import tooltip as tooltip
+from reflex import RADIX_THEMES_COMPONENTS_MAPPING
+from reflex.utils import lazy_loader
 
-input = text_field
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "".join(k.split("components.radix.themes.components.")[-1]): v
+    for k, v in RADIX_THEMES_COMPONENTS_MAPPING.items()
+}
 
-__all__ = [
-    "alert_dialog",
-    "aspect_ratio",
-    "avatar",
-    "badge",
-    "button",
-    "callout",
-    "card",
-    "checkbox",
-    "checkbox_cards",
-    "checkbox_group",
-    "context_menu",
-    "data_list",
-    "dialog",
-    "divider",
-    "dropdown_menu",
-    "hover_card",
-    "icon_button",
-    "input",
-    "inset",
-    "menu",
-    "popover",
-    # progress is in experimental namespace until https://github.com/radix-ui/themes/pull/492
-    # "progress",
-    "radio",
-    "radio_cards",
-    "radio_group",
-    "scroll_area",
-    "segmented_control",
-    "select",
-    "separator",
-    "skeleton",
-    "slider",
-    "spinner",
-    "switch",
-    "table",
-    "tabs",
-    "text_area",
-    "text_field",
-    "tooltip",
-]
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submod_attrs=_SUBMOD_ATTRS,
+)

reflex/components/radix/themes/components/__init__.pyi

@@ -0,0 +1,44 @@
+"""Stub file for reflex/components/radix/themes/components/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from .alert_dialog import alert_dialog as alert_dialog
+from .aspect_ratio import aspect_ratio as aspect_ratio
+from .avatar import avatar as avatar
+from .badge import badge as badge
+from .button import button as button
+from .callout import callout as callout
+from .card import card as card
+from .checkbox import checkbox as checkbox
+from .context_menu import context_menu as context_menu
+from .data_list import data_list as data_list
+from .dialog import dialog as dialog
+from .hover_card import hover_card as hover_card
+from .icon_button import icon_button as icon_button
+from .text_field import input as input
+from .inset import inset as inset
+from .popover import popover as popover
+from .scroll_area import scroll_area as scroll_area
+from .select import select as select
+from .skeleton import skeleton as skeleton
+from .slider import slider as slider
+from .spinner import spinner as spinner
+from .switch import switch as switch
+from .table import table as table
+from .tabs import tabs as tabs
+from .text_area import text_area as text_area
+from .tooltip import tooltip as tooltip
+from .segmented_control import segmented_control as segmented_control
+from .radio_cards import radio_cards as radio_cards
+from .checkbox_cards import checkbox_cards as checkbox_cards
+from .checkbox_group import checkbox_group as checkbox_group
+from .text_field import text_field as text_field
+from .radio_group import radio as radio
+from .radio_group import radio_group as radio_group
+from .dropdown_menu import menu as menu
+from .dropdown_menu import dropdown_menu as dropdown_menu
+from .separator import divider as divider
+from .separator import separator as separator
+from reflex import RADIX_THEMES_COMPONENTS_MAPPING
+from reflex.utils import lazy_loader

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

@@ -1,8 +1,8 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Any, Dict, Literal
 
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -37,7 +37,7 @@ class AlertDialogTrigger(RadixThemesTriggerComponent):
     tag = "AlertDialog.Trigger"
 
 
-class AlertDialogContent(el.Div, RadixThemesComponent):
+class AlertDialogContent(elements.Div, RadixThemesComponent):
     """Contains the content of the dialog. This component is based on the div element."""
 
     tag = "AlertDialog.Content"

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

@@ -8,8 +8,8 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import RadixThemesComponent, RadixThemesTriggerComponent
@@ -171,7 +171,7 @@ class AlertDialogTrigger(RadixThemesTriggerComponent):
         """
         ...
 
-class AlertDialogContent(el.Div, RadixThemesComponent):
+class AlertDialogContent(elements.Div, RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod

reflex/components/radix/themes/components/badge.py

@@ -2,7 +2,7 @@
 
 from typing import Literal
 
-from reflex import el
+from reflex.components.el import elements
 from reflex.vars import Var
 
 from ..base import (
@@ -12,7 +12,7 @@ from ..base import (
 )
 
 
-class Badge(el.Span, RadixThemesComponent):
+class Badge(elements.Span, RadixThemesComponent):
     """A stylized badge element."""
 
     tag = "Badge"

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

@@ -8,11 +8,11 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
-from reflex import el
+from reflex.components.el import elements
 from reflex.vars import Var
 from ..base import LiteralAccentColor, LiteralRadius, RadixThemesComponent
 
-class Badge(el.Span, RadixThemesComponent):
+class Badge(elements.Span, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/components/button.py

@@ -2,7 +2,7 @@
 
 from typing import Literal
 
-from reflex import el
+from reflex.components.el import elements
 from reflex.vars import Var
 
 from ..base import (
@@ -16,7 +16,7 @@ from ..base import (
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
 
-class Button(el.Button, RadixLoadingProp, RadixThemesComponent):
+class Button(elements.Button, RadixLoadingProp, RadixThemesComponent):
     """Trigger an action or event, such as submitting a form or displaying a dialog."""
 
     tag = "Button"

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

@@ -8,7 +8,7 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
-from reflex import el
+from reflex.components.el import elements
 from reflex.vars import Var
 from ..base import (
     LiteralAccentColor,
@@ -20,7 +20,7 @@ from ..base import (
 
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
-class Button(el.Button, RadixLoadingProp, RadixThemesComponent):
+class Button(elements.Button, RadixLoadingProp, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore

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

@@ -3,8 +3,8 @@
 from typing import Literal, Union
 
 import reflex as rx
-from reflex import el
 from reflex.components.component import Component, ComponentNamespace
+from reflex.components.el import elements
 from reflex.components.lucide.icon import Icon
 from reflex.vars import Var
 
@@ -16,7 +16,7 @@ from ..base import (
 CalloutVariant = Literal["soft", "surface", "outline"]
 
 
-class CalloutRoot(el.Div, RadixThemesComponent):
+class CalloutRoot(elements.Div, RadixThemesComponent):
     """Groups Icon and Text parts of a Callout."""
 
     tag = "Callout.Root"
@@ -37,13 +37,13 @@ class CalloutRoot(el.Div, RadixThemesComponent):
     high_contrast: Var[bool]
 
 
-class CalloutIcon(el.Div, RadixThemesComponent):
+class CalloutIcon(elements.Div, RadixThemesComponent):
     """Provides width and height for the icon associated with the callout."""
 
     tag = "Callout.Icon"
 
 
-class CalloutText(el.P, RadixThemesComponent):
+class CalloutText(elements.P, RadixThemesComponent):
     """Renders the callout text. This component is based on the p element."""
 
     tag = "Callout.Text"

reflex/components/radix/themes/components/callout.pyi

@@ -9,15 +9,15 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal, Union
 import reflex as rx
-from reflex import el
 from reflex.components.component import Component, ComponentNamespace
+from reflex.components.el import elements
 from reflex.components.lucide.icon import Icon
 from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 
 CalloutVariant = Literal["soft", "surface", "outline"]
 
-class CalloutRoot(el.Div, RadixThemesComponent):
+class CalloutRoot(elements.Div, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -230,7 +230,7 @@ class CalloutRoot(el.Div, RadixThemesComponent):
         """
         ...
 
-class CalloutIcon(el.Div, RadixThemesComponent):
+class CalloutIcon(elements.Div, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -365,7 +365,7 @@ class CalloutIcon(el.Div, RadixThemesComponent):
         """
         ...
 
-class CalloutText(el.P, RadixThemesComponent):
+class CalloutText(elements.P, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/components/card.py

@@ -1,7 +1,7 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Literal
 
-from reflex import el
+from reflex.components.el import elements
 from reflex.vars import Var
 
 from ..base import (
@@ -9,7 +9,7 @@ from ..base import (
 )
 
 
-class Card(el.Div, RadixThemesComponent):
+class Card(elements.Div, RadixThemesComponent):
     """Container that groups related content and actions."""
 
     tag = "Card"

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

@@ -8,11 +8,11 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
-from reflex import el
+from reflex.components.el import elements
 from reflex.vars import Var
 from ..base import RadixThemesComponent
 
-class Card(el.Div, RadixThemesComponent):
+class Card(elements.Div, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore

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

@@ -2,8 +2,8 @@
 
 from typing import Any, Dict, Literal
 
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -45,7 +45,7 @@ class DialogTitle(RadixThemesComponent):
     tag = "Dialog.Title"
 
 
-class DialogContent(el.Div, RadixThemesComponent):
+class DialogContent(elements.Div, RadixThemesComponent):
     """Content component to display inside a Dialog modal."""
 
     tag = "Dialog.Content"

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

@@ -8,8 +8,8 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import RadixThemesComponent, RadixThemesTriggerComponent
@@ -248,7 +248,7 @@ class DialogTitle(RadixThemesComponent):
         """
         ...
 
-class DialogContent(el.Div, RadixThemesComponent):
+class DialogContent(elements.Div, RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod

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

@@ -1,8 +1,8 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Any, Dict, Literal
 
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -47,7 +47,7 @@ class HoverCardTrigger(RadixThemesTriggerComponent):
     tag = "HoverCard.Trigger"
 
 
-class HoverCardContent(el.Div, RadixThemesComponent):
+class HoverCardContent(elements.Div, RadixThemesComponent):
     """Contains the content of the open hover card."""
 
     tag = "HoverCard.Content"

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

@@ -8,8 +8,8 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import RadixThemesComponent, RadixThemesTriggerComponent
@@ -175,7 +175,7 @@ class HoverCardTrigger(RadixThemesTriggerComponent):
         """
         ...
 
-class HoverCardContent(el.Div, RadixThemesComponent):
+class HoverCardContent(elements.Div, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/components/icon_button.py

@@ -3,9 +3,9 @@ from __future__ import annotations
 
 from typing import Literal
 
-from reflex import el
 from reflex.components.component import Component
 from reflex.components.core.match import Match
+from reflex.components.el import elements
 from reflex.components.lucide import Icon
 from reflex.style import Style
 from reflex.vars import Var
@@ -21,7 +21,7 @@ from ..base import (
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
 
-class IconButton(el.Button, RadixLoadingProp, RadixThemesComponent):
+class IconButton(elements.Button, RadixLoadingProp, RadixThemesComponent):
     """A button designed specifically for usage with a single icon."""
 
     tag = "IconButton"

reflex/components/radix/themes/components/icon_button.pyi

@@ -8,9 +8,9 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal
-from reflex import el
 from reflex.components.component import Component
 from reflex.components.core.match import Match
+from reflex.components.el import elements
 from reflex.components.lucide import Icon
 from reflex.style import Style
 from reflex.vars import Var
@@ -24,7 +24,7 @@ from ..base import (
 
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
-class IconButton(el.Button, RadixLoadingProp, RadixThemesComponent):
+class IconButton(elements.Button, RadixLoadingProp, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/components/inset.py

@@ -1,7 +1,7 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Literal, Union
 
-from reflex import el
+from reflex.components.el import elements
 from reflex.vars import Var
 
 from ..base import (
@@ -11,7 +11,7 @@ from ..base import (
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
 
-class Inset(el.Div, RadixThemesComponent):
+class Inset(elements.Div, RadixThemesComponent):
     """Applies a negative margin to allow content to bleed into the surrounding container."""
 
     tag = "Inset"

reflex/components/radix/themes/components/inset.pyi

@@ -8,13 +8,13 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Literal, Union
-from reflex import el
+from reflex.components.el import elements
 from reflex.vars import Var
 from ..base import RadixThemesComponent
 
 LiteralButtonSize = Literal["1", "2", "3", "4"]
 
-class Inset(el.Div, RadixThemesComponent):
+class Inset(elements.Div, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore

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

@@ -1,8 +1,8 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Any, Dict, Literal
 
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -41,7 +41,7 @@ class PopoverTrigger(RadixThemesTriggerComponent):
     tag = "Popover.Trigger"
 
 
-class PopoverContent(el.Div, RadixThemesComponent):
+class PopoverContent(elements.Div, RadixThemesComponent):
     """Contains content to be rendered in the open popover."""
 
     tag = "Popover.Content"

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

@@ -8,8 +8,8 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import RadixThemesComponent, RadixThemesTriggerComponent
@@ -171,7 +171,7 @@ class PopoverTrigger(RadixThemesTriggerComponent):
         """
         ...
 
-class PopoverContent(el.Div, RadixThemesComponent):
+class PopoverContent(elements.Div, RadixThemesComponent):
     def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod

reflex/components/radix/themes/components/table.py

@@ -1,8 +1,8 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import List, Literal
 
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.vars import Var
 
 from ..base import (
@@ -10,7 +10,7 @@ from ..base import (
 )
 
 
-class TableRoot(el.Table, RadixThemesComponent):
+class TableRoot(elements.Table, RadixThemesComponent):
     """A semantic table for presenting tabular data."""
 
     tag = "Table.Root"
@@ -22,7 +22,7 @@ class TableRoot(el.Table, RadixThemesComponent):
     variant: Var[Literal["surface", "ghost"]]
 
 
-class TableHeader(el.Thead, RadixThemesComponent):
+class TableHeader(elements.Thead, RadixThemesComponent):
     """The header of the table defines column names and other non-data elements."""
 
     tag = "Table.Header"
@@ -32,7 +32,7 @@ class TableHeader(el.Thead, RadixThemesComponent):
     _valid_parents: List[str] = ["TableRoot"]
 
 
-class TableRow(el.Tr, RadixThemesComponent):
+class TableRow(elements.Tr, RadixThemesComponent):
     """A row containing table cells."""
 
     tag = "Table.Row"
@@ -43,7 +43,7 @@ class TableRow(el.Tr, RadixThemesComponent):
     _invalid_children: List[str] = ["TableBody", "TableHeader", "TableRow"]
 
 
-class TableColumnHeaderCell(el.Th, RadixThemesComponent):
+class TableColumnHeaderCell(elements.Th, RadixThemesComponent):
     """A table cell that is semantically treated as a column header."""
 
     tag = "Table.ColumnHeaderCell"
@@ -61,7 +61,7 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
     ]
 
 
-class TableBody(el.Tbody, RadixThemesComponent):
+class TableBody(elements.Tbody, RadixThemesComponent):
     """The body of the table contains the data rows."""
 
     tag = "Table.Body"
@@ -76,7 +76,7 @@ class TableBody(el.Tbody, RadixThemesComponent):
     _valid_parents: List[str] = ["TableRoot"]
 
 
-class TableCell(el.Td, RadixThemesComponent):
+class TableCell(elements.Td, RadixThemesComponent):
     """A cell containing data."""
 
     tag = "Table.Cell"
@@ -93,7 +93,7 @@ class TableCell(el.Td, RadixThemesComponent):
     ]
 
 
-class TableRowHeaderCell(el.Th, RadixThemesComponent):
+class TableRowHeaderCell(elements.Th, RadixThemesComponent):
     """A table cell that is semantically treated as a row header."""
 
     tag = "Table.RowHeaderCell"

reflex/components/radix/themes/components/table.pyi

@@ -8,12 +8,12 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import List, Literal
-from reflex import el
 from reflex.components.component import ComponentNamespace
+from reflex.components.el import elements
 from reflex.vars import Var
 from ..base import RadixThemesComponent
 
-class TableRoot(el.Table, RadixThemesComponent):
+class TableRoot(elements.Table, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -164,7 +164,7 @@ class TableRoot(el.Table, RadixThemesComponent):
         """
         ...
 
-class TableHeader(el.Thead, RadixThemesComponent):
+class TableHeader(elements.Thead, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -303,7 +303,7 @@ class TableHeader(el.Thead, RadixThemesComponent):
         """
         ...
 
-class TableRow(el.Tr, RadixThemesComponent):
+class TableRow(elements.Tr, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -445,7 +445,7 @@ class TableRow(el.Tr, RadixThemesComponent):
         """
         ...
 
-class TableColumnHeaderCell(el.Th, RadixThemesComponent):
+class TableColumnHeaderCell(elements.Th, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -607,7 +607,7 @@ class TableColumnHeaderCell(el.Th, RadixThemesComponent):
         """
         ...
 
-class TableBody(el.Tbody, RadixThemesComponent):
+class TableBody(elements.Tbody, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -746,7 +746,7 @@ class TableBody(el.Tbody, RadixThemesComponent):
         """
         ...
 
-class TableCell(el.Td, RadixThemesComponent):
+class TableCell(elements.Td, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -904,7 +904,7 @@ class TableCell(el.Td, RadixThemesComponent):
         """
         ...
 
-class TableRowHeaderCell(el.Th, RadixThemesComponent):
+class TableRowHeaderCell(elements.Th, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/components/text_area.py

@@ -1,9 +1,9 @@
 """Interactive components provided by @radix-ui/themes."""
 from typing import Any, Dict, Literal, Union
 
-from reflex import el
 from reflex.components.component import Component
 from reflex.components.core.debounce import DebounceInput
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -15,7 +15,7 @@ from ..base import (
 LiteralTextAreaSize = Literal["1", "2", "3"]
 
 
-class TextArea(RadixThemesComponent, el.Textarea):
+class TextArea(RadixThemesComponent, elements.Textarea):
     """The input part of a TextArea, may be used by itself."""
 
     tag = "TextArea"

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

@@ -8,16 +8,16 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal, Union
-from reflex import el
 from reflex.components.component import Component
 from reflex.components.core.debounce import DebounceInput
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 from ..base import LiteralAccentColor, RadixThemesComponent
 
 LiteralTextAreaSize = Literal["1", "2", "3"]
 
-class TextArea(RadixThemesComponent, el.Textarea):
+class TextArea(RadixThemesComponent, elements.Textarea):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/components/text_field.py

@@ -3,10 +3,10 @@ from __future__ import annotations
 
 from typing import Any, Dict, Literal, Union
 
-from reflex.components import el
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.debounce import DebounceInput
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.style import Style, format_as_emotion
 from reflex.utils import console
@@ -22,7 +22,7 @@ LiteralTextFieldSize = Literal["1", "2", "3"]
 LiteralTextFieldVariant = Literal["classic", "surface", "soft"]
 
 
-class TextFieldRoot(el.Div, RadixThemesComponent):
+class TextFieldRoot(elements.Div, RadixThemesComponent):
     """Captures user input with an optional slot for buttons and icons."""
 
     tag = "TextField.Root"
@@ -197,4 +197,4 @@ class TextField(ComponentNamespace):
     __call__ = staticmethod(TextFieldRoot.create)
 
 
-text_field = TextField()
+input = text_field = TextField()

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

@@ -8,10 +8,10 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, Literal, Union
-from reflex.components import el
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.debounce import DebounceInput
+from reflex.components.el import elements
 from reflex.constants import EventTriggers
 from reflex.style import Style, format_as_emotion
 from reflex.utils import console
@@ -21,7 +21,7 @@ from ..base import LiteralAccentColor, LiteralRadius, RadixThemesComponent
 LiteralTextFieldSize = Literal["1", "2", "3"]
 LiteralTextFieldVariant = Literal["classic", "surface", "soft"]
 
-class TextFieldRoot(el.Div, RadixThemesComponent):
+class TextFieldRoot(elements.Div, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -662,4 +662,4 @@ class TextField(ComponentNamespace):
         """
         ...
 
-text_field = TextField()
+input = text_field = TextField()

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

@@ -1,42 +1,16 @@
 """Layout components."""
+from __future__ import annotations
 
-from .box import Box
-from .center import Center
-from .container import Container
-from .flex import Flex
-from .grid import Grid
-from .list import list_ns as list
-from .section import Section
-from .spacer import Spacer
-from .stack import HStack, Stack, VStack
+from reflex import RADIX_THEMES_LAYOUT_MAPPING
+from reflex.utils import lazy_loader
 
-box = Box.create
-center = Center.create
-container = Container.create
-flex = Flex.create
-grid = Grid.create
-section = Section.create
-spacer = Spacer.create
-stack = Stack.create
-hstack = HStack.create
-vstack = VStack.create
-list_item = list.item
-ordered_list = list.ordered
-unordered_list = list.unordered
+_SUBMOD_ATTRS: dict[str, list[str]] = {
+    "".join(k.split("components.radix.themes.layout.")[-1]): v
+    for k, v in RADIX_THEMES_LAYOUT_MAPPING.items()
+}
 
-__all__ = [
-    "box",
-    "center",
-    "container",
-    "flex",
-    "grid",
-    "section",
-    "spacer",
-    "stack",
-    "hstack",
-    "vstack",
-    "list",
-    "list_item",
-    "ordered_list",
-    "unordered_list",
-]
+
+__getattr__, __dir__, __all__ = lazy_loader.attach(
+    __name__,
+    submod_attrs=_SUBMOD_ATTRS,
+)

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

@@ -0,0 +1,21 @@
+"""Stub file for reflex/components/radix/themes/layout/__init__.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/pyi_generator.py`!
+# ------------------------------------------------------
+
+from .box import box as box
+from .center import center as center
+from .container import container as container
+from .flex import flex as flex
+from .grid import grid as grid
+from .section import section as section
+from .spacer import spacer as spacer
+from .stack import stack as stack
+from .stack import hstack as hstack
+from .stack import vstack as vstack
+from .list import list_ns as list
+from .list import list_item as list_item
+from .list import ordered_list as ordered_list
+from .list import unordered_list as unordered_list
+from reflex import RADIX_THEMES_LAYOUT_MAPPING
+from reflex.utils import lazy_loader

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

@@ -1,12 +1,15 @@
 """Declarative layout and common spacing props."""
 from __future__ import annotations
 
-from reflex import el
+from reflex.components.el import elements
 
 from ..base import RadixThemesComponent
 
 
-class Box(el.Div, RadixThemesComponent):
+class Box(elements.Div, RadixThemesComponent):
     """A fundamental layout building block, based on `div` element."""
 
     tag = "Box"
+
+
+box = Box.create

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

@@ -7,10 +7,10 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from reflex import el
+from reflex.components.el import elements
 from ..base import RadixThemesComponent
 
-class Box(el.Div, RadixThemesComponent):
+class Box(elements.Div, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -144,3 +144,5 @@ class Box(el.Div, RadixThemesComponent):
             A new component instance.
         """
         ...
+
+box = Box.create