WiP

integration/test_event_actions.py

@@ -25,7 +25,7 @@ def TestEventAction():
     class EventFiringComponent(rx.Component):
         """A component that fires onClick event without passing DOM event."""
 
-        tag = "EventFiringComponent"
+        tag: str = "EventFiringComponent"
 
         def _get_custom_code(self) -> str | None:
             return """

poetry.lock

@@ -21,26 +21,40 @@ typing-extensions = ">=4"
 [package.extras]
 tz = ["backports.zoneinfo"]
 
+[[package]]
+name = "annotated-types"
+version = "0.6.0"
+description = "Reusable constraint types to use with typing.Annotated"
+optional = false
+python-versions = ">=3.8"
+files = [
+    {file = "annotated_types-0.6.0-py3-none-any.whl", hash = "sha256:0641064de18ba7a25dee8f96403ebc39113d0cb953a01429249d5c7564666a43"},
+    {file = "annotated_types-0.6.0.tar.gz", hash = "sha256:563339e807e53ffd9c267e99fc6d9ea23eb8443c08f112651963e24e22f84a5d"},
+]
+
+[package.dependencies]
+typing-extensions = {version = ">=4.0.0", markers = "python_version < \"3.9\""}
+
 [[package]]
 name = "anyio"
-version = "4.1.0"
+version = "3.7.1"
 description = "High level compatibility layer for multiple asynchronous event loop implementations"
 optional = false
-python-versions = ">=3.8"
+python-versions = ">=3.7"
 files = [
-    {file = "anyio-4.1.0-py3-none-any.whl", hash = "sha256:56a415fbc462291813a94528a779597226619c8e78af7de0507333f700011e5f"},
-    {file = "anyio-4.1.0.tar.gz", hash = "sha256:5a0bec7085176715be77df87fc66d6c9d70626bd752fcc85f57cdbee5b3760da"},
+    {file = "anyio-3.7.1-py3-none-any.whl", hash = "sha256:91dee416e570e92c64041bd18b900d1d6fa78dff7048769ce5ac5ddad004fbb5"},
+    {file = "anyio-3.7.1.tar.gz", hash = "sha256:44a3c9aba0f5defa43261a8b3efb97891f2bd7d804e0e1f56419befa1adfc780"},
 ]
 
 [package.dependencies]
-exceptiongroup = {version = ">=1.0.2", markers = "python_version < \"3.11\""}
+exceptiongroup = {version = "*", markers = "python_version < \"3.11\""}
 idna = ">=2.8"
 sniffio = ">=1.1"
 
 [package.extras]
-doc = ["Sphinx (>=7)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme"]
-test = ["anyio[trio]", "coverage[toml] (>=7)", "exceptiongroup (>=1.2.0)", "hypothesis (>=4.0)", "psutil (>=5.9)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "uvloop (>=0.17)"]
-trio = ["trio (>=0.23)"]
+doc = ["Sphinx", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx-rtd-theme (>=1.2.2)", "sphinxcontrib-jquery"]
+test = ["anyio[trio]", "coverage[toml] (>=4.5)", "hypothesis (>=4.0)", "mock (>=4)", "psutil (>=5.9)", "pytest (>=7.0)", "pytest-mock (>=3.6.1)", "trustme", "uvloop (>=0.17)"]
+trio = ["trio (<0.22)"]
 
 [[package]]
 name = "async-timeout"
@@ -480,24 +494,23 @@ test = ["pytest (>=6)"]
 
 [[package]]
 name = "fastapi"
-version = "0.96.1"
+version = "0.105.0"
 description = "FastAPI framework, high performance, easy to learn, fast to code, ready for production"
 optional = false
-python-versions = ">=3.7"
+python-versions = ">=3.8"
 files = [
-    {file = "fastapi-0.96.1-py3-none-any.whl", hash = "sha256:22d773ce95f14f04f8f37a0c8998fc163e67af83b65510d2879de6cbaaa10215"},
-    {file = "fastapi-0.96.1.tar.gz", hash = "sha256:5c1d243030e63089ccfc0aec69c2da6d619943917727e8e82ee502358d5119bf"},
+    {file = "fastapi-0.105.0-py3-none-any.whl", hash = "sha256:f19ebf6fdc82a3281d10f2cb4774bdfa90238e3b40af3525a0c09fd08ad1c480"},
+    {file = "fastapi-0.105.0.tar.gz", hash = "sha256:4d12838819aa52af244580675825e750ad67c9df4614f557a769606af902cf22"},
 ]
 
 [package.dependencies]
-pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0"
+anyio = ">=3.7.1,<4.0.0"
+pydantic = ">=1.7.4,<1.8 || >1.8,<1.8.1 || >1.8.1,<2.0.0 || >2.0.0,<2.0.1 || >2.0.1,<2.1.0 || >2.1.0,<3.0.0"
 starlette = ">=0.27.0,<0.28.0"
+typing-extensions = ">=4.8.0"
 
 [package.extras]
-all = ["email-validator (>=1.1.1)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "python-multipart (>=0.0.5)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]
-dev = ["pre-commit (>=2.17.0,<3.0.0)", "ruff (==0.0.138)", "uvicorn[standard] (>=0.12.0,<0.21.0)"]
-doc = ["mdx-include (>=1.4.1,<2.0.0)", "mkdocs (>=1.1.2,<2.0.0)", "mkdocs-markdownextradata-plugin (>=0.1.7,<0.3.0)", "mkdocs-material (>=8.1.4,<9.0.0)", "pyyaml (>=5.3.1,<7.0.0)", "typer-cli (>=0.0.13,<0.0.14)", "typer[all] (>=0.6.1,<0.8.0)"]
-test = ["anyio[trio] (>=3.2.1,<4.0.0)", "black (==23.1.0)", "coverage[toml] (>=6.5.0,<8.0)", "databases[sqlite] (>=0.3.2,<0.7.0)", "email-validator (>=1.1.1,<2.0.0)", "flask (>=1.1.2,<3.0.0)", "httpx (>=0.23.0,<0.24.0)", "isort (>=5.0.6,<6.0.0)", "mypy (==0.982)", "orjson (>=3.2.1,<4.0.0)", "passlib[bcrypt] (>=1.7.2,<2.0.0)", "peewee (>=3.13.3,<4.0.0)", "pytest (>=7.1.3,<8.0.0)", "python-jose[cryptography] (>=3.3.0,<4.0.0)", "python-multipart (>=0.0.5,<0.0.7)", "pyyaml (>=5.3.1,<7.0.0)", "ruff (==0.0.138)", "sqlalchemy (>=1.3.18,<1.4.43)", "types-orjson (==3.6.2)", "types-ujson (==5.7.0.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0,<6.0.0)"]
+all = ["email-validator (>=2.0.0)", "httpx (>=0.23.0)", "itsdangerous (>=1.1.0)", "jinja2 (>=2.11.2)", "orjson (>=3.2.1)", "pydantic-extra-types (>=2.0.0)", "pydantic-settings (>=2.0.0)", "python-multipart (>=0.0.5)", "pyyaml (>=5.3.1)", "ujson (>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0)", "uvicorn[standard] (>=0.12.0)"]
 
 [[package]]
 name = "filelock"
@@ -1331,55 +1344,139 @@ files = [
 
 [[package]]
 name = "pydantic"
-version = "1.10.13"
-description = "Data validation and settings management using python type hints"
+version = "2.5.2"
+description = "Data validation using Python type hints"
 optional = false
 python-versions = ">=3.7"
 files = [
-    {file = "pydantic-1.10.13-cp310-cp310-macosx_10_9_x86_64.whl", hash = "sha256:efff03cc7a4f29d9009d1c96ceb1e7a70a65cfe86e89d34e4a5f2ab1e5693737"},
-    {file = "pydantic-1.10.13-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:3ecea2b9d80e5333303eeb77e180b90e95eea8f765d08c3d278cd56b00345d01"},
-    {file = "pydantic-1.10.13-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:1740068fd8e2ef6eb27a20e5651df000978edce6da6803c2bef0bc74540f9548"},
-    {file = "pydantic-1.10.13-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:84bafe2e60b5e78bc64a2941b4c071a4b7404c5c907f5f5a99b0139781e69ed8"},
-    {file = "pydantic-1.10.13-cp310-cp310-musllinux_1_1_i686.whl", hash = "sha256:bc0898c12f8e9c97f6cd44c0ed70d55749eaf783716896960b4ecce2edfd2d69"},
-    {file = "pydantic-1.10.13-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:654db58ae399fe6434e55325a2c3e959836bd17a6f6a0b6ca8107ea0571d2e17"},
-    {file = "pydantic-1.10.13-cp310-cp310-win_amd64.whl", hash = "sha256:75ac15385a3534d887a99c713aa3da88a30fbd6204a5cd0dc4dab3d770b9bd2f"},
-    {file = "pydantic-1.10.13-cp311-cp311-macosx_10_9_x86_64.whl", hash = "sha256:c553f6a156deb868ba38a23cf0df886c63492e9257f60a79c0fd8e7173537653"},
-    {file = "pydantic-1.10.13-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:5e08865bc6464df8c7d61439ef4439829e3ab62ab1669cddea8dd00cd74b9ffe"},
-    {file = "pydantic-1.10.13-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:e31647d85a2013d926ce60b84f9dd5300d44535a9941fe825dc349ae1f760df9"},
-    {file = "pydantic-1.10.13-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:210ce042e8f6f7c01168b2d84d4c9eb2b009fe7bf572c2266e235edf14bacd80"},
-    {file = "pydantic-1.10.13-cp311-cp311-musllinux_1_1_i686.whl", hash = "sha256:8ae5dd6b721459bfa30805f4c25880e0dd78fc5b5879f9f7a692196ddcb5a580"},
-    {file = "pydantic-1.10.13-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:f8e81fc5fb17dae698f52bdd1c4f18b6ca674d7068242b2aff075f588301bbb0"},
-    {file = "pydantic-1.10.13-cp311-cp311-win_amd64.whl", hash = "sha256:61d9dce220447fb74f45e73d7ff3b530e25db30192ad8d425166d43c5deb6df0"},
-    {file = "pydantic-1.10.13-cp37-cp37m-macosx_10_9_x86_64.whl", hash = "sha256:4b03e42ec20286f052490423682016fd80fda830d8e4119f8ab13ec7464c0132"},
-    {file = "pydantic-1.10.13-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f59ef915cac80275245824e9d771ee939133be38215555e9dc90c6cb148aaeb5"},
-    {file = "pydantic-1.10.13-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:5a1f9f747851338933942db7af7b6ee8268568ef2ed86c4185c6ef4402e80ba8"},
-    {file = "pydantic-1.10.13-cp37-cp37m-musllinux_1_1_i686.whl", hash = "sha256:97cce3ae7341f7620a0ba5ef6cf043975cd9d2b81f3aa5f4ea37928269bc1b87"},
-    {file = "pydantic-1.10.13-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:854223752ba81e3abf663d685f105c64150873cc6f5d0c01d3e3220bcff7d36f"},
-    {file = "pydantic-1.10.13-cp37-cp37m-win_amd64.whl", hash = "sha256:b97c1fac8c49be29486df85968682b0afa77e1b809aff74b83081cc115e52f33"},
-    {file = "pydantic-1.10.13-cp38-cp38-macosx_10_9_x86_64.whl", hash = "sha256:c958d053453a1c4b1c2062b05cd42d9d5c8eb67537b8d5a7e3c3032943ecd261"},
-    {file = "pydantic-1.10.13-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:4c5370a7edaac06daee3af1c8b1192e305bc102abcbf2a92374b5bc793818599"},
-    {file = "pydantic-1.10.13-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7d6f6e7305244bddb4414ba7094ce910560c907bdfa3501e9db1a7fd7eaea127"},
-    {file = "pydantic-1.10.13-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:d3a3c792a58e1622667a2837512099eac62490cdfd63bd407993aaf200a4cf1f"},
-    {file = "pydantic-1.10.13-cp38-cp38-musllinux_1_1_i686.whl", hash = "sha256:c636925f38b8db208e09d344c7aa4f29a86bb9947495dd6b6d376ad10334fb78"},
-    {file = "pydantic-1.10.13-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:678bcf5591b63cc917100dc50ab6caebe597ac67e8c9ccb75e698f66038ea953"},
-    {file = "pydantic-1.10.13-cp38-cp38-win_amd64.whl", hash = "sha256:6cf25c1a65c27923a17b3da28a0bdb99f62ee04230c931d83e888012851f4e7f"},
-    {file = "pydantic-1.10.13-cp39-cp39-macosx_10_9_x86_64.whl", hash = "sha256:8ef467901d7a41fa0ca6db9ae3ec0021e3f657ce2c208e98cd511f3161c762c6"},
-    {file = "pydantic-1.10.13-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:968ac42970f57b8344ee08837b62f6ee6f53c33f603547a55571c954a4225691"},
-    {file = "pydantic-1.10.13-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:9849f031cf8a2f0a928fe885e5a04b08006d6d41876b8bbd2fc68a18f9f2e3fd"},
-    {file = "pydantic-1.10.13-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:56e3ff861c3b9c6857579de282ce8baabf443f42ffba355bf070770ed63e11e1"},
-    {file = "pydantic-1.10.13-cp39-cp39-musllinux_1_1_i686.whl", hash = "sha256:9f00790179497767aae6bcdc36355792c79e7bbb20b145ff449700eb076c5f96"},
-    {file = "pydantic-1.10.13-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:75b297827b59bc229cac1a23a2f7a4ac0031068e5be0ce385be1462e7e17a35d"},
-    {file = "pydantic-1.10.13-cp39-cp39-win_amd64.whl", hash = "sha256:e70ca129d2053fb8b728ee7d1af8e553a928d7e301a311094b8a0501adc8763d"},
-    {file = "pydantic-1.10.13-py3-none-any.whl", hash = "sha256:b87326822e71bd5f313e7d3bfdc77ac3247035ac10b0c0618bd99dcf95b1e687"},
-    {file = "pydantic-1.10.13.tar.gz", hash = "sha256:32c8b48dcd3b2ac4e78b0ba4af3a2c2eb6048cb75202f0ea7b34feb740efc340"},
+    {file = "pydantic-2.5.2-py3-none-any.whl", hash = "sha256:80c50fb8e3dcecfddae1adbcc00ec5822918490c99ab31f6cf6140ca1c1429f0"},
+    {file = "pydantic-2.5.2.tar.gz", hash = "sha256:ff177ba64c6faf73d7afa2e8cad38fd456c0dbe01c9954e71038001cd15a6edd"},
 ]
 
 [package.dependencies]
-typing-extensions = ">=4.2.0"
+annotated-types = ">=0.4.0"
+pydantic-core = "2.14.5"
+typing-extensions = ">=4.6.1"
 
 [package.extras]
-dotenv = ["python-dotenv (>=0.10.4)"]
-email = ["email-validator (>=1.0.3)"]
+email = ["email-validator (>=2.0.0)"]
+
+[[package]]
+name = "pydantic-core"
+version = "2.14.5"
+description = ""
+optional = false
+python-versions = ">=3.7"
+files = [
+    {file = "pydantic_core-2.14.5-cp310-cp310-macosx_10_7_x86_64.whl", hash = "sha256:7e88f5696153dc516ba6e79f82cc4747e87027205f0e02390c21f7cb3bd8abfd"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-macosx_11_0_arm64.whl", hash = "sha256:4641e8ad4efb697f38a9b64ca0523b557c7931c5f84e0fd377a9a3b05121f0de"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:774de879d212db5ce02dfbf5b0da9a0ea386aeba12b0b95674a4ce0593df3d07"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:ebb4e035e28f49b6f1a7032920bb9a0c064aedbbabe52c543343d39341a5b2a3"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:b53e9ad053cd064f7e473a5f29b37fc4cc9dc6d35f341e6afc0155ea257fc911"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:8aa1768c151cf562a9992462239dfc356b3d1037cc5a3ac829bb7f3bda7cc1f9"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:eac5c82fc632c599f4639a5886f96867ffced74458c7db61bc9a66ccb8ee3113"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:d2ae91f50ccc5810b2f1b6b858257c9ad2e08da70bf890dee02de1775a387c66"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-musllinux_1_1_aarch64.whl", hash = "sha256:6b9ff467ffbab9110e80e8c8de3bcfce8e8b0fd5661ac44a09ae5901668ba997"},
+    {file = "pydantic_core-2.14.5-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:61ea96a78378e3bd5a0be99b0e5ed00057b71f66115f5404d0dae4819f495093"},
+    {file = "pydantic_core-2.14.5-cp310-none-win32.whl", hash = "sha256:bb4c2eda937a5e74c38a41b33d8c77220380a388d689bcdb9b187cf6224c9720"},
+    {file = "pydantic_core-2.14.5-cp310-none-win_amd64.whl", hash = "sha256:b7851992faf25eac90bfcb7bfd19e1f5ffa00afd57daec8a0042e63c74a4551b"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-macosx_10_7_x86_64.whl", hash = "sha256:4e40f2bd0d57dac3feb3a3aed50f17d83436c9e6b09b16af271b6230a2915459"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-macosx_11_0_arm64.whl", hash = "sha256:ab1cdb0f14dc161ebc268c09db04d2c9e6f70027f3b42446fa11c153521c0e88"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:aae7ea3a1c5bb40c93cad361b3e869b180ac174656120c42b9fadebf685d121b"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:60b7607753ba62cf0739177913b858140f11b8af72f22860c28eabb2f0a61937"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:2248485b0322c75aee7565d95ad0e16f1c67403a470d02f94da7344184be770f"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:823fcc638f67035137a5cd3f1584a4542d35a951c3cc68c6ead1df7dac825c26"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:96581cfefa9123accc465a5fd0cc833ac4d75d55cc30b633b402e00e7ced00a6"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:a33324437018bf6ba1bb0f921788788641439e0ed654b233285b9c69704c27b4"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-musllinux_1_1_aarch64.whl", hash = "sha256:9bd18fee0923ca10f9a3ff67d4851c9d3e22b7bc63d1eddc12f439f436f2aada"},
+    {file = "pydantic_core-2.14.5-cp311-cp311-musllinux_1_1_x86_64.whl", hash = "sha256:853a2295c00f1d4429db4c0fb9475958543ee80cfd310814b5c0ef502de24dda"},
+    {file = "pydantic_core-2.14.5-cp311-none-win32.whl", hash = "sha256:cb774298da62aea5c80a89bd58c40205ab4c2abf4834453b5de207d59d2e1651"},
+    {file = "pydantic_core-2.14.5-cp311-none-win_amd64.whl", hash = "sha256:e87fc540c6cac7f29ede02e0f989d4233f88ad439c5cdee56f693cc9c1c78077"},
+    {file = "pydantic_core-2.14.5-cp311-none-win_arm64.whl", hash = "sha256:57d52fa717ff445cb0a5ab5237db502e6be50809b43a596fb569630c665abddf"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-macosx_10_7_x86_64.whl", hash = "sha256:e60f112ac88db9261ad3a52032ea46388378034f3279c643499edb982536a093"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-macosx_11_0_arm64.whl", hash = "sha256:6e227c40c02fd873c2a73a98c1280c10315cbebe26734c196ef4514776120aeb"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f0cbc7fff06a90bbd875cc201f94ef0ee3929dfbd5c55a06674b60857b8b85ed"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:103ef8d5b58596a731b690112819501ba1db7a36f4ee99f7892c40da02c3e189"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:c949f04ecad823f81b1ba94e7d189d9dfb81edbb94ed3f8acfce41e682e48cef"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:c1452a1acdf914d194159439eb21e56b89aa903f2e1c65c60b9d874f9b950e5d"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:cb4679d4c2b089e5ef89756bc73e1926745e995d76e11925e3e96a76d5fa51fc"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:cf9d3fe53b1ee360e2421be95e62ca9b3296bf3f2fb2d3b83ca49ad3f925835e"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-musllinux_1_1_aarch64.whl", hash = "sha256:70f4b4851dbb500129681d04cc955be2a90b2248d69273a787dda120d5cf1f69"},
+    {file = "pydantic_core-2.14.5-cp312-cp312-musllinux_1_1_x86_64.whl", hash = "sha256:59986de5710ad9613ff61dd9b02bdd2f615f1a7052304b79cc8fa2eb4e336d2d"},
+    {file = "pydantic_core-2.14.5-cp312-none-win32.whl", hash = "sha256:699156034181e2ce106c89ddb4b6504c30db8caa86e0c30de47b3e0654543260"},
+    {file = "pydantic_core-2.14.5-cp312-none-win_amd64.whl", hash = "sha256:5baab5455c7a538ac7e8bf1feec4278a66436197592a9bed538160a2e7d11e36"},
+    {file = "pydantic_core-2.14.5-cp312-none-win_arm64.whl", hash = "sha256:e47e9a08bcc04d20975b6434cc50bf82665fbc751bcce739d04a3120428f3e27"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-macosx_10_7_x86_64.whl", hash = "sha256:af36f36538418f3806048f3b242a1777e2540ff9efaa667c27da63d2749dbce0"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-macosx_11_0_arm64.whl", hash = "sha256:45e95333b8418ded64745f14574aa9bfc212cb4fbeed7a687b0c6e53b5e188cd"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4e47a76848f92529879ecfc417ff88a2806438f57be4a6a8bf2961e8f9ca9ec7"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:d81e6987b27bc7d101c8597e1cd2bcaa2fee5e8e0f356735c7ed34368c471550"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:34708cc82c330e303f4ce87758828ef6e457681b58ce0e921b6e97937dd1e2a3"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:652c1988019752138b974c28f43751528116bcceadad85f33a258869e641d753"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:6e4d090e73e0725b2904fdbdd8d73b8802ddd691ef9254577b708d413bf3006e"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:5c7d5b5005f177764e96bd584d7bf28d6e26e96f2a541fdddb934c486e36fd59"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-musllinux_1_1_aarch64.whl", hash = "sha256:a71891847f0a73b1b9eb86d089baee301477abef45f7eaf303495cd1473613e4"},
+    {file = "pydantic_core-2.14.5-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:a717aef6971208f0851a2420b075338e33083111d92041157bbe0e2713b37325"},
+    {file = "pydantic_core-2.14.5-cp37-none-win32.whl", hash = "sha256:de790a3b5aa2124b8b78ae5faa033937a72da8efe74b9231698b5a1dd9be3405"},
+    {file = "pydantic_core-2.14.5-cp37-none-win_amd64.whl", hash = "sha256:6c327e9cd849b564b234da821236e6bcbe4f359a42ee05050dc79d8ed2a91588"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-macosx_10_7_x86_64.whl", hash = "sha256:ef98ca7d5995a82f43ec0ab39c4caf6a9b994cb0b53648ff61716370eadc43cf"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-macosx_11_0_arm64.whl", hash = "sha256:c6eae413494a1c3f89055da7a5515f32e05ebc1a234c27674a6956755fb2236f"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:dcf4e6d85614f7a4956c2de5a56531f44efb973d2fe4a444d7251df5d5c4dcfd"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:6637560562134b0e17de333d18e69e312e0458ee4455bdad12c37100b7cad706"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:77fa384d8e118b3077cccfcaf91bf83c31fe4dc850b5e6ee3dc14dc3d61bdba1"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:16e29bad40bcf97aac682a58861249ca9dcc57c3f6be22f506501833ddb8939c"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:531f4b4252fac6ca476fbe0e6f60f16f5b65d3e6b583bc4d87645e4e5ddde331"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:074f3d86f081ce61414d2dc44901f4f83617329c6f3ab49d2bc6c96948b2c26b"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-musllinux_1_1_aarch64.whl", hash = "sha256:c2adbe22ab4babbca99c75c5d07aaf74f43c3195384ec07ccbd2f9e3bddaecec"},
+    {file = "pydantic_core-2.14.5-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:0f6116a558fd06d1b7c2902d1c4cf64a5bd49d67c3540e61eccca93f41418124"},
+    {file = "pydantic_core-2.14.5-cp38-none-win32.whl", hash = "sha256:fe0a5a1025eb797752136ac8b4fa21aa891e3d74fd340f864ff982d649691867"},
+    {file = "pydantic_core-2.14.5-cp38-none-win_amd64.whl", hash = "sha256:079206491c435b60778cf2b0ee5fd645e61ffd6e70c47806c9ed51fc75af078d"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-macosx_10_7_x86_64.whl", hash = "sha256:a6a16f4a527aae4f49c875da3cdc9508ac7eef26e7977952608610104244e1b7"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-macosx_11_0_arm64.whl", hash = "sha256:abf058be9517dc877227ec3223f0300034bd0e9f53aebd63cf4456c8cb1e0863"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:49b08aae5013640a3bfa25a8eebbd95638ec3f4b2eaf6ed82cf0c7047133f03b"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:c2d97e906b4ff36eb464d52a3bc7d720bd6261f64bc4bcdbcd2c557c02081ed2"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:3128e0bbc8c091ec4375a1828d6118bc20404883169ac95ffa8d983b293611e6"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:88e74ab0cdd84ad0614e2750f903bb0d610cc8af2cc17f72c28163acfcf372a4"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c339dabd8ee15f8259ee0f202679b6324926e5bc9e9a40bf981ce77c038553db"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:3387277f1bf659caf1724e1afe8ee7dbc9952a82d90f858ebb931880216ea955"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-musllinux_1_1_aarch64.whl", hash = "sha256:ba6b6b3846cfc10fdb4c971980a954e49d447cd215ed5a77ec8190bc93dd7bc5"},
+    {file = "pydantic_core-2.14.5-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:ca61d858e4107ce5e1330a74724fe757fc7135190eb5ce5c9d0191729f033209"},
+    {file = "pydantic_core-2.14.5-cp39-none-win32.whl", hash = "sha256:ec1e72d6412f7126eb7b2e3bfca42b15e6e389e1bc88ea0069d0cc1742f477c6"},
+    {file = "pydantic_core-2.14.5-cp39-none-win_amd64.whl", hash = "sha256:c0b97ec434041827935044bbbe52b03d6018c2897349670ff8fe11ed24d1d4ab"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-macosx_10_7_x86_64.whl", hash = "sha256:79e0a2cdbdc7af3f4aee3210b1172ab53d7ddb6a2d8c24119b5706e622b346d0"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-macosx_11_0_arm64.whl", hash = "sha256:678265f7b14e138d9a541ddabbe033012a2953315739f8cfa6d754cc8063e8ca"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:95b15e855ae44f0c6341ceb74df61b606e11f1087e87dcb7482377374aac6abe"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:09b0e985fbaf13e6b06a56d21694d12ebca6ce5414b9211edf6f17738d82b0f8"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:3ad873900297bb36e4b6b3f7029d88ff9829ecdc15d5cf20161775ce12306f8a"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:2d0ae0d8670164e10accbeb31d5ad45adb71292032d0fdb9079912907f0085f4"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:d37f8ec982ead9ba0a22a996129594938138a1503237b87318392a48882d50b7"},
+    {file = "pydantic_core-2.14.5-pp310-pypy310_pp73-win_amd64.whl", hash = "sha256:35613015f0ba7e14c29ac6c2483a657ec740e5ac5758d993fdd5870b07a61d8b"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-macosx_10_7_x86_64.whl", hash = "sha256:ab4ea451082e684198636565224bbb179575efc1658c48281b2c866bfd4ddf04"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:4ce601907e99ea5b4adb807ded3570ea62186b17f88e271569144e8cca4409c7"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:fb2ed8b3fe4bf4506d6dab3b93b83bbc22237e230cba03866d561c3577517d18"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:70f947628e074bb2526ba1b151cee10e4c3b9670af4dbb4d73bc8a89445916b5"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:4bc536201426451f06f044dfbf341c09f540b4ebdb9fd8d2c6164d733de5e634"},
+    {file = "pydantic_core-2.14.5-pp37-pypy37_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:f4791cf0f8c3104ac668797d8c514afb3431bc3305f5638add0ba1a5a37e0d88"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-macosx_10_7_x86_64.whl", hash = "sha256:038c9f763e650712b899f983076ce783175397c848da04985658e7628cbe873b"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-macosx_11_0_arm64.whl", hash = "sha256:27548e16c79702f1e03f5628589c6057c9ae17c95b4c449de3c66b589ead0520"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:c97bee68898f3f4344eb02fec316db93d9700fb1e6a5b760ffa20d71d9a46ce3"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:b9b759b77f5337b4ea024f03abc6464c9f35d9718de01cfe6bae9f2e139c397e"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:439c9afe34638ace43a49bf72d201e0ffc1a800295bed8420c2a9ca8d5e3dbb3"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:ba39688799094c75ea8a16a6b544eb57b5b0f3328697084f3f2790892510d144"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:ccd4d5702bb90b84df13bd491be8d900b92016c5a455b7e14630ad7449eb03f8"},
+    {file = "pydantic_core-2.14.5-pp38-pypy38_pp73-win_amd64.whl", hash = "sha256:81982d78a45d1e5396819bbb4ece1fadfe5f079335dd28c4ab3427cd95389944"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-macosx_10_7_x86_64.whl", hash = "sha256:7f8210297b04e53bc3da35db08b7302a6a1f4889c79173af69b72ec9754796b8"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-macosx_11_0_arm64.whl", hash = "sha256:8c8a8812fe6f43a3a5b054af6ac2d7b8605c7bcab2804a8a7d68b53f3cd86e00"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:206ed23aecd67c71daf5c02c3cd19c0501b01ef3cbf7782db9e4e051426b3d0d"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:c2027d05c8aebe61d898d4cffd774840a9cb82ed356ba47a90d99ad768f39789"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-manylinux_2_5_i686.manylinux1_i686.whl", hash = "sha256:40180930807ce806aa71eda5a5a5447abb6b6a3c0b4b3b1b1962651906484d68"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-musllinux_1_1_aarch64.whl", hash = "sha256:615a0a4bff11c45eb3c1996ceed5bdaa2f7b432425253a7c2eed33bb86d80abc"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-musllinux_1_1_x86_64.whl", hash = "sha256:f5e412d717366e0677ef767eac93566582518fe8be923361a5c204c1a62eaafe"},
+    {file = "pydantic_core-2.14.5-pp39-pypy39_pp73-win_amd64.whl", hash = "sha256:513b07e99c0a267b1d954243845d8a833758a6726a3b5d8948306e3fe14675e3"},
+    {file = "pydantic_core-2.14.5.tar.gz", hash = "sha256:6d30226dfc816dd0fdf120cae611dd2215117e4f9b124af8c60ab9093b6e8e71"},
+]
+
+[package.dependencies]
+typing-extensions = ">=4.6.0,<4.7.0 || >4.7.0"
 
 [[package]]
 name = "pygments"
@@ -1670,24 +1767,26 @@ name = "reflex-hosting-cli"
 version = "0.1.3"
 description = "Reflex Hosting CLI"
 optional = false
-python-versions = ">=3.8,<4.0"
-files = [
-    {file = "reflex_hosting_cli-0.1.3-py3-none-any.whl", hash = "sha256:4e7755f24f7fd5b669dd06414e3a41d50acd008650ba6e5d8387a7f29a4a6f3b"},
-    {file = "reflex_hosting_cli-0.1.3.tar.gz", hash = "sha256:e7e9de2e0abe1df448ad59b9dee17c73da449449ec74fc10ab913f46057ecd8b"},
-]
+python-versions = "^3.8"
+files = []
+develop = true
 
 [package.dependencies]
-coverage = ">=7.3.2,<8.0.0"
-httpx = ">=0.24.0,<0.25.0"
-pipdeptree = ">=2.13.1,<3.0.0"
-pipreqs = ">=0.4.13,<0.5.0"
-platformdirs = ">=3.10.0,<4.0.0"
-pydantic = ">=1.10.2,<2.0.0"
-rich = ">=13.0.0,<14.0.0"
-tabulate = ">=0.9.0,<0.10.0"
+coverage = "^7.3.2"
+httpx = "^0.24.0"
+pipdeptree = "^2.13.1"
+pipreqs = "^0.4.13"
+platformdirs = "^3.10.0"
+pydantic = "^2.5.2"
+rich = "^13.0.0"
+tabulate = "^0.9.0"
 typer = ">=0.4.2,<1"
 websockets = ">=10.4"
 
+[package.source]
+type = "directory"
+url = "../reflex-hosting-cli"
+
 [[package]]
 name = "requests"
 version = "2.31.0"
@@ -2473,4 +2572,4 @@ testing = ["big-O", "jaraco.functools", "jaraco.itertools", "more-itertools", "p
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.8"
-content-hash = "3b45d79329803bc24d8874a6da7af8f6eb6c4677eb100cbe300ad6f9e4bc8c69"
+content-hash = "6745651489e99a444373c56997ed748943106f95cc62131f34bf6751a7870ff0"

pyproject.toml

@@ -28,12 +28,12 @@ packages = [
 [tool.poetry.dependencies]
 python = "^3.8"
 cloudpickle = "^2.2.1"
-fastapi = "^0.96.0"
+fastapi = "^0.105.0"
 gunicorn = "^20.1.0"
 httpx = ">=0.24.0, <0.26.0"
 jinja2 = "^3.1.2"
 psutil = "^5.9.4"
-pydantic = "^1.10.2"
+pydantic = "^2.5.2"
 python-multipart = "^0.0.5"
 python-socketio = "^5.7.0"
 redis = "^4.3.5"
@@ -57,7 +57,7 @@ wrapt = [
 ]
 packaging = "^23.1"
 pipdeptree = "^2.13.0"
-reflex-hosting-cli = ">=0.1.2"
+reflex-hosting-cli = { path = "../reflex-hosting-cli/", develop = true }
 
 [tool.poetry.group.dev.dependencies]
 pytest = "^7.1.2"

reflex/.templates/apps/demo/code/webui/components/loading_icon.py

@@ -4,8 +4,8 @@ import reflex as rx
 class LoadingIcon(rx.Component):
     """A custom loading icon component."""
 
-    library = "react-loading-icons"
-    tag = "SpinningCircles"
+    library: str = "react-loading-icons"
+    tag: str = "SpinningCircles"
     stroke: rx.Var[str]
     stroke_opacity: rx.Var[str]
     fill: rx.Var[str]

reflex/base.py

@@ -6,7 +6,8 @@ from typing import Any, List, Type
 
 import pydantic
 from pydantic import BaseModel
-from pydantic.fields import ModelField
+
+# from pydantic.fields import ModelField
 
 from reflex import constants
 
@@ -61,9 +62,9 @@ class Base(pydantic.BaseModel):
         Returns:
             The object as a json string.
         """
-        from reflex.utils.serializers import serialize
+        from reflex.utils.format import json_dumps
 
-        return self.__config__.json_dumps(self.dict(), default=serialize)
+        return json_dumps(self.model_dump())
 
     def set(self, **kwargs):
         """Set multiple fields and return the object.
@@ -97,6 +98,7 @@ class Base(pydantic.BaseModel):
             var: The variable to add a pydantic field for.
             default_value: The default value of the field
         """
+        raise RuntimeError("Pydantic V2 does not support adding fields dynamically.")
         new_field = ModelField.infer(
             name=var._var_name,
             value=default_value,

reflex/compiler/utils.py

@@ -5,7 +5,7 @@ import os
 from typing import Any, Type
 from urllib.parse import urlparse
 
-from pydantic.fields import ModelField
+# from pydantic.fields import ModelField
 
 from reflex import constants
 from reflex.components.base import (
@@ -148,7 +148,7 @@ def compile_state(state: Type[BaseState]) -> dict:
 
 
 def _compile_client_storage_field(
-    field: ModelField,
+    field: Any,  # XXX: Pydantic v2
 ) -> tuple[Type[Cookie] | Type[LocalStorage] | None, dict[str, Any] | None]:
     """Compile the given cookie or local_storage field.
 

reflex/components/__init__.py

@@ -124,7 +124,7 @@ kbd = Kbd.create
 link = Link.create
 link_box = LinkBox.create
 link_overlay = LinkOverlay.create
-list = List.create
+list = ChakraList.create
 list_item = ListItem.create
 markdown = Markdown.create
 menu = Menu.create

reflex/components/base/body.py

@@ -6,4 +6,4 @@ from reflex.components.component import Component
 class Body(Component):
     """A body component."""
 
-    tag = "body"
+    tag: str = "body"

reflex/components/base/document.py

@@ -7,35 +7,35 @@ from reflex.components.libs.chakra import ChakraComponent
 class NextDocumentLib(Component):
     """Root document components."""
 
-    library = "next/document"
+    library: str = "next/document"
 
 
 class Html(NextDocumentLib):
     """The document html."""
 
-    tag = "Html"
+    tag: str = "Html"
 
 
 class DocumentHead(NextDocumentLib):
     """The document head."""
 
-    tag = "Head"
+    tag: str = "Head"
 
 
 class Main(NextDocumentLib):
     """The document main section."""
 
-    tag = "Main"
+    tag: str = "Main"
 
 
 class NextScript(NextDocumentLib):
     """The document main scripts."""
 
-    tag = "NextScript"
+    tag: str = "NextScript"
 
 
 class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
-    tag = "ColorModeScript"
-    initialColorMode = "light"
+    tag: str = "ColorModeScript"
+    initialColorMode: str = "light"

reflex/components/base/head.py

@@ -6,12 +6,12 @@ from reflex.components.component import Component, MemoizationLeaf
 class NextHeadLib(Component):
     """Header components."""
 
-    library = "next/head"
+    library: str = "next/head"
 
 
 class Head(NextHeadLib, MemoizationLeaf):
     """Head Component."""
 
-    tag = "NextHead"
+    tag: str = "NextHead"
 
-    is_default = True
+    is_default: bool = True

reflex/components/base/link.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class RawLink(Component):
     """A component that displays the title of the current page."""
 
-    tag = "link"
+    tag: str = "link"
 
     # The href.
     href: Var[str]
@@ -20,7 +20,7 @@ class RawLink(Component):
 class ScriptTag(Component):
     """A script tag with the specified type and source."""
 
-    tag = "script"
+    tag: str = "script"
 
     # The type of script represented.
     type_: Var[str]

reflex/components/base/meta.py

@@ -11,7 +11,7 @@ from reflex.components.component import Component
 class Title(Component):
     """A component that displays the title of the current page."""
 
-    tag = "title"
+    tag: str = "title"
 
     def render(self) -> dict:
         """Render the title component.
@@ -29,7 +29,7 @@ class Title(Component):
 class Meta(Component):
     """A component that displays metadata for the current page."""
 
-    tag = "meta"
+    tag: str = "meta"
 
     # The description of character encoding.
     char_set: Optional[str] = None

reflex/components/base/script.py

@@ -20,9 +20,9 @@ class Script(Component):
     HTML <script> tag which does not work when rendering a component.
     """
 
-    library = "next/script"
-    tag = "Script"
-    is_default = True
+    library: str = "next/script"
+    tag: str = "Script"
+    is_default: bool = True
 
     # Required unless inline script is used
     src: Var[str]

reflex/components/chakra/media/image.py

@@ -11,8 +11,8 @@ from reflex.vars import Var
 class Image(ChakraComponent):
     """Display an image."""
 
-    tag = "Image"
-    alias = "ChakraImage"
+    tag: str = "Image"
+    alias: str = "ChakraImage"
     # How to align the image within its bounds. It maps to css `object-position` property.
     align: Var[str]
 

reflex/components/component.py

@@ -44,7 +44,7 @@ from reflex.style import Style, format_as_emotion
 from reflex.utils import console, format, imports, types
 from reflex.utils.imports import ImportVar
 from reflex.utils.serializers import serializer
-from reflex.vars import BaseVar, Var, VarData
+from reflex.vars import BaseVar, UnspecifiedVar, Var, VarData
 
 
 class BaseComponent(Base, ABC):
@@ -162,25 +162,23 @@ class Component(BaseComponent, ABC):
     _memoization_mode: MemoizationMode = MemoizationMode()
 
     @classmethod
-    def __init_subclass__(cls, **kwargs):
+    def ____pydantic_init_subclass__(cls, **kwargs: Any) -> None:
         """Set default properties.
 
         Args:
             **kwargs: The kwargs to pass to the superclass.
         """
-        super().__init_subclass__(**kwargs)
-
         # Get all the props for the component.
         props = cls.get_props()
 
         # Convert fields to props, setting default values.
-        for field in cls.get_fields().values():
+        for field_name, field in cls.get_fields().items():
             # If the field is not a component prop, skip it.
-            if field.name not in props:
+            if field_name not in props:
                 continue
 
             # Set default values for any props.
-            if types._issubclass(field.type_, Var):
+            if types._issubclass(field.annotation, Var):
                 field.required = False
                 field.default = Var.create(field.default)
 
@@ -197,18 +195,15 @@ class Component(BaseComponent, ABC):
         """
         # Set the id and children initially.
         children = kwargs.get("children", [])
-        initial_kwargs = {
-            "id": kwargs.get("id"),
-            "children": children,
-            **{
-                prop: Var.create(kwargs[prop])
-                for prop in self.get_initial_props()
-                if prop in kwargs
-            },
-        }
-        super().__init__(**initial_kwargs)
-
-        self._validate_component_children(children)
+        # kwargs = {
+        #     **{
+        #        prop: Var.create(None) if field.is_required() and types._issubclass(field.annotation, Var) else field.default
+        #        for prop, field in self.get_fields().items()
+        #     },
+        #     "id": kwargs.get("id"),
+        #     "children": children,
+        # }
+        # super().__init__(**initial_kwargs)
 
         # Get the component fields, triggers, and props.
         fields = self.get_fields()
@@ -227,7 +222,7 @@ class Component(BaseComponent, ABC):
                 field_type = EventChain
             elif key in props:
                 # Set the field type.
-                field_type = fields[key].type_
+                field_type = fields[key].annotation
 
             else:
                 continue
@@ -236,13 +231,13 @@ class Component(BaseComponent, ABC):
             if types._issubclass(field_type, Var):
                 try:
                     # Try to create a var from the value.
-                    kwargs[key] = Var.create(value)
+                    field_var = kwargs[key] = Var.create(value)
 
                     # Check that the var type is not None.
-                    if kwargs[key] is None:
+                    if field_var is None:
                         raise TypeError
 
-                    expected_type = fields[key].outer_type_.__args__[0]
+                    expected_type = fields[key].annotation.__args__[0]
 
                     if (
                         types.is_literal(expected_type)
@@ -255,7 +250,7 @@ class Component(BaseComponent, ABC):
                             )
 
                     # Get the passed type and the var type.
-                    passed_type = kwargs[key]._var_type
+                    passed_type = field_var._var_type
                     expected_type = (
                         type(expected_type.__args__[0])
                         if types.is_literal(expected_type)
@@ -264,7 +259,7 @@ class Component(BaseComponent, ABC):
                 except TypeError:
                     # If it is not a valid var, check the base types.
                     passed_type = type(value)
-                    expected_type = fields[key].outer_type_
+                    expected_type = fields[key].annotation
                 if not types._issubclass(passed_type, expected_type):
                     value_name = value._var_name if isinstance(value, Var) else value
                     raise TypeError(
@@ -301,9 +296,22 @@ class Component(BaseComponent, ABC):
         if isinstance(class_name, (List, tuple)):
             kwargs["class_name"] = " ".join(class_name)
 
+        for field_name, field in self.get_fields().items():
+            if (
+                field_name not in kwargs
+                and field.is_required()
+                and types._issubclass(field.annotation, Var)
+            ):
+                kwargs[field_name] = UnspecifiedVar
+
         # Construct the component.
         super().__init__(*args, **kwargs)
 
+    def __pydantic_post_init__(self):
+        self._validate_component_children(
+            [child for child in self.children if isinstance(child, Component)]
+        )
+
     def _create_event_chain(
         self,
         event_trigger: str,
@@ -486,6 +494,7 @@ class Component(BaseComponent, ABC):
             props = {
                 attr[:-1] if attr.endswith("_") else attr: getattr(self, attr)
                 for attr in self.get_props()
+                if getattr(self, attr) is not UnspecifiedVar
             }
 
             # Add ref to element if `id` is not None.
@@ -1121,7 +1130,7 @@ class CustomComponent(Component):
     """A custom user-defined component."""
 
     # Use the components library.
-    library = f"/{Dirs.COMPONENTS_PATH}"
+    library: str = f"/{Dirs.COMPONENTS_PATH}"
 
     # The function that creates the component.
     component_fn: Callable[..., Component] = Component.create

reflex/components/datadisplay/__init__.py

@@ -8,7 +8,7 @@ from .dataeditor import DataEditor, DataEditorTheme
 from .datatable import DataTable
 from .divider import Divider
 from .keyboard_key import KeyboardKey as Kbd
-from .list import List, ListItem, OrderedList, UnorderedList
+from .list import ChakraList, ListItem, OrderedList, UnorderedList
 from .moment import Moment, MomentDelta
 from .stat import Stat, StatArrow, StatGroup, StatHelpText, StatLabel, StatNumber
 from .table import Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tr

reflex/components/datadisplay/badge.py

@@ -7,7 +7,7 @@ from reflex.vars import Var
 class Badge(ChakraComponent):
     """A badge component."""
 
-    tag = "Badge"
+    tag: str = "Badge"
 
     # Variant of the badge ("solid" | "subtle" | "outline")
     variant: Var[LiteralVariant]

reflex/components/datadisplay/code.py

@@ -350,11 +350,11 @@ LiteralCodeLanguage = Literal[
 class CodeBlock(Component):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.5.0"
+    library: str = "react-syntax-highlighter@15.5.0"
 
-    tag = "PrismAsyncLight"
+    tag: str = "PrismAsyncLight"
 
-    alias = "SyntaxHighlighter"
+    alias: str = "SyntaxHighlighter"
 
     # The theme to use ("light" or "dark").
     theme: Var[LiteralCodeBlockTheme] = "one-light"  # type: ignore
@@ -518,4 +518,4 @@ class CodeBlock(Component):
 class Code(ChakraComponent):
     """Used to display inline code."""
 
-    tag = "Code"
+    tag: str = "Code"

reflex/components/datadisplay/dataeditor.py

@@ -106,8 +106,8 @@ class DataEditorTheme(Base):
 class DataEditor(NoSSRComponent):
     """The DataEditor Component."""
 
-    tag = "DataEditor"
-    is_default = True
+    tag: str = "DataEditor"
+    is_default: bool = True
     library: str = "@glideapps/glide-data-grid@^5.3.0"
     lib_dependencies: List[str] = ["lodash", "marked", "react-responsive-carousel"]
 

reflex/components/datadisplay/datatable.py

@@ -14,7 +14,7 @@ from reflex.vars import BaseVar, ComputedVar, Var
 class Gridjs(Component):
     """A component that wraps a nivo bar component."""
 
-    library = "gridjs-react@6.0.1"
+    library: str = "gridjs-react@6.0.1"
 
     lib_dependencies: List[str] = ["gridjs@6.0.6"]
 
@@ -22,9 +22,9 @@ class Gridjs(Component):
 class DataTable(Gridjs):
     """A data table component."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
-    alias = "DataTableGrid"
+    alias: str = "DataTableGrid"
 
     # The data to display. Either a list of lists or a pandas dataframe.
     data: Any

reflex/components/datadisplay/divider.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Divider(ChakraComponent):
     """Dividers are used to visually separate content in a list or group."""
 
-    tag = "Divider"
+    tag: str = "Divider"
 
     # Pass the orientation prop and set it to either horizontal or vertical. If the vertical orientation is used, make sure that the parent element is assigned a height.
     orientation: Var[LiteralLayout]

reflex/components/datadisplay/keyboard_key.py

@@ -6,4 +6,4 @@ from reflex.components.libs.chakra import ChakraComponent
 class KeyboardKey(ChakraComponent):
     """Display a keyboard key text."""
 
-    tag = "Kbd"
+    tag: str = "Kbd"

reflex/components/datadisplay/list.py

@@ -8,10 +8,10 @@ from reflex.components.libs.chakra import ChakraComponent
 from reflex.vars import Var
 
 
-class List(ChakraComponent):
+class ChakraList(ChakraComponent):
     """Display a list of items."""
 
-    tag = "List"
+    tag: str = "List"
 
     # The space between each list item
     spacing: Var[str]
@@ -47,16 +47,16 @@ class List(ChakraComponent):
 class ListItem(ChakraComponent):
     """A single list item."""
 
-    tag = "ListItem"
+    tag: str = "ListItem"
 
 
-class OrderedList(List):
+class OrderedList(ChakraList):
     """An ordered list component with numbers."""
 
-    tag = "OrderedList"
+    tag: str = "OrderedList"
 
 
-class UnorderedList(List):
+class UnorderedList(ChakraList):
     """An unordered list component with bullets."""
 
-    tag = "UnorderedList"
+    tag: str = "UnorderedList"

reflex/components/datadisplay/moment.py

@@ -26,7 +26,7 @@ class Moment(NoSSRComponent):
     """The Moment component."""
 
     tag: str = "Moment"
-    is_default = True
+    is_default: bool = True
     library: str = "react-moment"
     lib_dependencies: List[str] = ["moment"]
 

reflex/components/datadisplay/stat.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Stat(ChakraComponent):
     """The Stat component is used to display some statistics. It can take in a label, a number and a help text."""
 
-    tag = "Stat"
+    tag: str = "Stat"
 
     @classmethod
     def create(
@@ -50,25 +50,25 @@ class Stat(ChakraComponent):
 class StatLabel(ChakraComponent):
     """A stat label component."""
 
-    tag = "StatLabel"
+    tag: str = "StatLabel"
 
 
 class StatNumber(ChakraComponent):
     """The stat to display."""
 
-    tag = "StatNumber"
+    tag: str = "StatNumber"
 
 
 class StatHelpText(ChakraComponent):
     """A helper text to display under the stat."""
 
-    tag = "StatHelpText"
+    tag: str = "StatHelpText"
 
 
 class StatArrow(ChakraComponent):
     """A stat arrow component indicating the direction of change."""
 
-    tag = "StatArrow"
+    tag: str = "StatArrow"
 
     # The type of arrow, either increase or decrease.
     type_: Var[str]
@@ -77,4 +77,4 @@ class StatArrow(ChakraComponent):
 class StatGroup(ChakraComponent):
     """A stat group component to evenly space out the stats."""
 
-    tag = "StatGroup"
+    tag: str = "StatGroup"

reflex/components/datadisplay/table.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Table(ChakraComponent):
     """A table component."""
 
-    tag = "Table"
+    tag: str = "Table"
 
     # The color scheme of the table
     color_scheme: Var[str]
@@ -62,7 +62,7 @@ class Table(ChakraComponent):
 class Thead(ChakraComponent):
     """A table header component."""
 
-    tag = "Thead"
+    tag: str = "Thead"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot"]
@@ -114,7 +114,7 @@ class Thead(ChakraComponent):
 class Tbody(ChakraComponent):
     """A table body component."""
 
-    tag = "Tbody"
+    tag: str = "Tbody"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Td", "Th"]
@@ -188,7 +188,7 @@ class Tbody(ChakraComponent):
 class Tfoot(ChakraComponent):
     """A table footer component."""
 
-    tag = "Tfoot"
+    tag: str = "Tfoot"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Td", "Th", "Tfoot"]
@@ -237,7 +237,7 @@ class Tfoot(ChakraComponent):
 class Tr(ChakraComponent):
     """A table row component."""
 
-    tag = "Tr"
+    tag: str = "Tr"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Tr"]
@@ -268,7 +268,7 @@ class Tr(ChakraComponent):
 class Th(ChakraComponent):
     """A table header cell component."""
 
-    tag = "Th"
+    tag: str = "Th"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tr", "Td", "Th"]
@@ -280,7 +280,7 @@ class Th(ChakraComponent):
 class Td(ChakraComponent):
     """A table data cell component."""
 
-    tag = "Td"
+    tag: str = "Td"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead"]
@@ -292,7 +292,7 @@ class Td(ChakraComponent):
 class TableCaption(ChakraComponent):
     """A table caption component."""
 
-    tag = "TableCaption"
+    tag: str = "TableCaption"
 
     # The placement of the table caption. This sets the `caption-side` CSS attribute.
     placement: Var[str]
@@ -301,4 +301,4 @@ class TableCaption(ChakraComponent):
 class TableContainer(ChakraComponent):
     """The table container component renders a div that wraps the table component."""
 
-    tag = "TableContainer"
+    tag: str = "TableContainer"

reflex/components/datadisplay/tag.py

@@ -14,31 +14,31 @@ from reflex.vars import Var
 class TagLabel(ChakraComponent):
     """The label of the tag."""
 
-    tag = "TagLabel"
+    tag: str = "TagLabel"
 
 
 class TagLeftIcon(ChakraComponent):
     """The left icon of the tag."""
 
-    tag = "TagLeftIcon"
+    tag: str = "TagLeftIcon"
 
 
 class TagRightIcon(ChakraComponent):
     """The right icon of the tag."""
 
-    tag = "TagRightIcon"
+    tag: str = "TagRightIcon"
 
 
 class TagCloseButton(ChakraComponent):
     """The close button of the tag."""
 
-    tag = "TagCloseButton"
+    tag: str = "TagCloseButton"
 
 
 class Tag(ChakraComponent):
     """The parent wrapper that provides context for its children."""
 
-    tag = "Tag"
+    tag: str = "Tag"
 
     # The visual color appearance of the tag.
     # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" |

reflex/components/disclosure/accordion.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Accordion(ChakraComponent):
     """The wrapper that uses cloneElement to pass props to AccordionItem children."""
 
-    tag = "Accordion"
+    tag: str = "Accordion"
 
     # If true, multiple accordion items can be expanded at once.
     allow_multiple: Var[bool]
@@ -80,7 +80,7 @@ class Accordion(ChakraComponent):
 class AccordionItem(ChakraComponent):
     """A single accordion item."""
 
-    tag = "AccordionItem"
+    tag: str = "AccordionItem"
 
     # A unique id for the accordion item.
     id_: Var[str]
@@ -95,16 +95,16 @@ class AccordionItem(ChakraComponent):
 class AccordionButton(ChakraComponent):
     """The button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading."""
 
-    tag = "AccordionButton"
+    tag: str = "AccordionButton"
 
 
 class AccordionPanel(ChakraComponent):
     """The container for the details to be revealed."""
 
-    tag = "AccordionPanel"
+    tag: str = "AccordionPanel"
 
 
 class AccordionIcon(ChakraComponent):
     """A chevron-down icon that rotates based on the expanded/collapsed state."""
 
-    tag = "AccordionIcon"
+    tag: str = "AccordionIcon"

reflex/components/disclosure/tabs.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class Tabs(ChakraComponent):
     """An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern. Tabs, provides context and state for all components."""
 
-    tag = "Tabs"
+    tag: str = "Tabs"
 
     # The alignment of the tabs ("center" | "end" | "start").
     align: Var[LiteralTagAlign]
@@ -76,7 +76,7 @@ class Tabs(ChakraComponent):
 class Tab(ChakraComponent):
     """An element that serves as a label for one of the tab panels and can be activated to display that panel.."""
 
-    tag = "Tab"
+    tag: str = "Tab"
 
     # If true, the Tab won't be toggleable.
     is_disabled: Var[bool]
@@ -94,16 +94,16 @@ class Tab(ChakraComponent):
 class TabList(ChakraComponent):
     """Wrapper for the Tab components."""
 
-    tag = "TabList"
+    tag: str = "TabList"
 
 
 class TabPanels(ChakraComponent):
     """Wrapper for the Tab components."""
 
-    tag = "TabPanels"
+    tag: str = "TabPanels"
 
 
 class TabPanel(ChakraComponent):
     """An element that contains the content associated with a tab."""
 
-    tag = "TabPanel"
+    tag: str = "TabPanel"

reflex/components/disclosure/transition.py

@@ -18,13 +18,13 @@ class Transition(ChakraComponent):
 class Fade(Transition):
     """Fade component cab be used show and hide content of your app."""
 
-    tag = "Fade"
+    tag: str = "Fade"
 
 
 class ScaleFade(Transition):
     """Fade component can be scaled and reverse your app."""
 
-    tag = "ScaleFade"
+    tag: str = "ScaleFade"
 
     # The initial scale of the element
     initial_scale: Var[float]
@@ -36,7 +36,7 @@ class ScaleFade(Transition):
 class Slide(Transition):
     """Side can be used show content below your app."""
 
-    tag = "Slide"
+    tag: str = "Slide"
 
     # The direction to slide from
     direction: Var[str]
@@ -45,7 +45,7 @@ class Slide(Transition):
 class SlideFade(Transition):
     """SlideFade component."""
 
-    tag = "SlideFade"
+    tag: str = "SlideFade"
 
     # The offset on the horizontal or x axis
     offsetX: Var[Union[str, int]]
@@ -60,7 +60,7 @@ class SlideFade(Transition):
 class Collapse(Transition):
     """Collapse component can collapse some content."""
 
-    tag = "Collapse"
+    tag: str = "Collapse"
 
     # If true, the opacity of the content will be animated
     animateOpacity: Var[bool]

reflex/components/disclosure/visuallyhidden.py

@@ -6,4 +6,4 @@ from reflex.components.libs.chakra import ChakraComponent
 class VisuallyHidden(ChakraComponent):
     """A component that visually hides content while still allowing it to be read by screen readers."""
 
-    tag = "VisuallyHidden"
+    tag: str = "VisuallyHidden"

reflex/components/el/elements/forms.py

@@ -11,7 +11,7 @@ from .base import BaseHTML
 class Button(BaseHTML):
     """Display the button element."""
 
-    tag = "button"
+    tag: str = "button"
 
     # Automatically focuses the button when the page loads
     auto_focus: Var[Union[str, int, bool]]
@@ -50,14 +50,14 @@ class Button(BaseHTML):
 class Datalist(BaseHTML):
     """Display the datalist element."""
 
-    tag = "datalist"
+    tag: str = "datalist"
     # No unique attributes, only common ones are inherited
 
 
 class Fieldset(Element):
     """Display the fieldset element."""
 
-    tag = "fieldset"
+    tag: str = "fieldset"
 
     # Disables all the form control descendants of the fieldset
     disabled: Var[Union[str, int, bool]]
@@ -72,7 +72,7 @@ class Fieldset(Element):
 class Form(BaseHTML):
     """Display the form element."""
 
-    tag = "form"
+    tag: str = "form"
 
     # MIME types the server accepts for file upload
     accept: Var[Union[str, int, bool]]
@@ -105,7 +105,7 @@ class Form(BaseHTML):
 class Input(BaseHTML):
     """Display the input element."""
 
-    tag = "input"
+    tag: str = "input"
 
     # Accepted types of files when the input is file type
     accept: Var[Union[str, int, bool]]
@@ -225,7 +225,7 @@ class Input(BaseHTML):
 class Label(BaseHTML):
     """Display the label element."""
 
-    tag = "label"
+    tag: str = "label"
 
     # ID of a form control with which the label is associated
     html_for: Var[Union[str, int, bool]]
@@ -237,14 +237,14 @@ class Label(BaseHTML):
 class Legend(BaseHTML):
     """Display the legend element."""
 
-    tag = "legend"
+    tag: str = "legend"
     # No unique attributes, only common ones are inherited
 
 
 class Meter(BaseHTML):
     """Display the meter element."""
 
-    tag = "meter"
+    tag: str = "meter"
 
     # Associates the meter with a form (by id)
     form: Var[Union[str, int, bool]]
@@ -271,7 +271,7 @@ class Meter(BaseHTML):
 class Optgroup(BaseHTML):
     """Display the optgroup element."""
 
-    tag = "optgroup"
+    tag: str = "optgroup"
 
     # Disables the optgroup
     disabled: Var[Union[str, int, bool]]
@@ -283,7 +283,7 @@ class Optgroup(BaseHTML):
 class Option(BaseHTML):
     """Display the option element."""
 
-    tag = "option"
+    tag: str = "option"
 
     # Disables the option
     disabled: Var[Union[str, int, bool]]
@@ -301,7 +301,7 @@ class Option(BaseHTML):
 class Output(BaseHTML):
     """Display the output element."""
 
-    tag = "output"
+    tag: str = "output"
 
     # Associates the output with one or more elements (by their IDs)
     html_for: Var[Union[str, int, bool]]
@@ -316,7 +316,7 @@ class Output(BaseHTML):
 class Progress(BaseHTML):
     """Display the progress element."""
 
-    tag = "progress"
+    tag: str = "progress"
 
     # Associates the progress element with a form (by id)
     form: Var[Union[str, int, bool]]
@@ -331,7 +331,7 @@ class Progress(BaseHTML):
 class Select(BaseHTML):
     """Display the select element."""
 
-    tag = "select"
+    tag: str = "select"
 
     # Whether the form control should have autocomplete enabled
     auto_complete: Var[Union[str, int, bool]]
@@ -372,7 +372,7 @@ class Select(BaseHTML):
 class Textarea(BaseHTML):
     """Display the textarea element."""
 
-    tag = "textarea"
+    tag: str = "textarea"
 
     # Whether the form control should have autocomplete enabled
     auto_complete: Var[Union[str, int, bool]]

reflex/components/el/elements/inline.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class A(BaseHTML):  # Inherits common attributes from BaseMeta
     """Display the 'a' element."""
 
-    tag = "a"
+    tag: str = "a"
 
     # Specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
     download: Var[Union[str, int, bool]]
@@ -42,49 +42,49 @@ class A(BaseHTML):  # Inherits common attributes from BaseMeta
 class Abbr(BaseHTML):
     """Display the abbr element."""
 
-    tag = "abbr"
+    tag: str = "abbr"
 
 
 class B(BaseHTML):
     """Display the b element."""
 
-    tag = "b"
+    tag: str = "b"
 
 
 class Bdi(BaseHTML):
     """Display the bdi element."""
 
-    tag = "bdi"
+    tag: str = "bdi"
 
 
 class Bdo(BaseHTML):
     """Display the bdo element."""
 
-    tag = "bdo"
+    tag: str = "bdo"
 
 
 class Br(BaseHTML):
     """Display the br element."""
 
-    tag = "br"
+    tag: str = "br"
 
 
 class Cite(BaseHTML):
     """Display the cite element."""
 
-    tag = "cite"
+    tag: str = "cite"
 
 
 class Code(BaseHTML):
     """Display the code element."""
 
-    tag = "code"
+    tag: str = "code"
 
 
 class Data(BaseHTML):
     """Display the data element."""
 
-    tag = "data"
+    tag: str = "data"
 
     value: Var[Union[str, int, bool]]
 
@@ -92,37 +92,37 @@ class Data(BaseHTML):
 class Dfn(BaseHTML):
     """Display the dfn element."""
 
-    tag = "dfn"
+    tag: str = "dfn"
 
 
 class Em(BaseHTML):
     """Display the em element."""
 
-    tag = "em"
+    tag: str = "em"
 
 
 class I(BaseHTML):  # noqa: E742
     """Display the i element."""
 
-    tag = "i"
+    tag: str = "i"
 
 
 class Kbd(BaseHTML):
     """Display the kbd element."""
 
-    tag = "kbd"
+    tag: str = "kbd"
 
 
 class Mark(BaseHTML):
     """Display the mark element."""
 
-    tag = "mark"
+    tag: str = "mark"
 
 
 class Q(BaseHTML):
     """Display the q element."""
 
-    tag = "q"
+    tag: str = "q"
 
     cite: Var[Union[str, int, bool]]
 
@@ -130,77 +130,77 @@ class Q(BaseHTML):
 class Rp(BaseHTML):
     """Display the rp element."""
 
-    tag = "rp"
+    tag: str = "rp"
 
 
 class Rt(BaseHTML):
     """Display the rt element."""
 
-    tag = "rt"
+    tag: str = "rt"
 
 
 class Ruby(BaseHTML):
     """Display the ruby element."""
 
-    tag = "ruby"
+    tag: str = "ruby"
 
 
 class S(BaseHTML):
     """Display the s element."""
 
-    tag = "s"
+    tag: str = "s"
 
 
 class Samp(BaseHTML):
     """Display the samp element."""
 
-    tag = "samp"
+    tag: str = "samp"
 
 
 class Small(BaseHTML):
     """Display the small element."""
 
-    tag = "small"
+    tag: str = "small"
 
 
 class Span(BaseHTML):
     """Display the span element."""
 
-    tag = "span"
+    tag: str = "span"
 
 
 class Strong(BaseHTML):
     """Display the strong element."""
 
-    tag = "strong"
+    tag: str = "strong"
 
 
 class Sub(BaseHTML):
     """Display the sub element."""
 
-    tag = "sub"
+    tag: str = "sub"
 
 
 class Sup(BaseHTML):
     """Display the sup element."""
 
-    tag = "sup"
+    tag: str = "sup"
 
 
 class Time(BaseHTML):
     """Display the time element."""
 
-    tag = "time"
+    tag: str = "time"
     date_time: Var[Union[str, int, bool]]
 
 
 class U(BaseHTML):
     """Display the u element."""
 
-    tag = "u"
+    tag: str = "u"
 
 
 class Wbr(BaseHTML):
     """Display the wbr element."""
 
-    tag = "wbr"
+    tag: str = "wbr"

reflex/components/el/elements/media.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Area(BaseHTML):
     """Display the area element."""
 
-    tag = "area"
+    tag: str = "area"
 
     # Alternate text for the area, used for accessibility
     alt: Var[Union[str, int, bool]]
@@ -48,7 +48,7 @@ class Area(BaseHTML):
 class Audio(BaseHTML):
     """Display the audio element."""
 
-    tag = "audio"
+    tag: str = "audio"
 
     # Specifies that the audio will start playing as soon as it is ready
     auto_play: Var[Union[str, int, bool]]
@@ -78,7 +78,7 @@ class Audio(BaseHTML):
 class Img(BaseHTML):
     """Display the img element."""
 
-    tag = "img"
+    tag: str = "img"
 
     # Image alignment with respect to its surrounding elements
     align: Var[Union[str, int, bool]]
@@ -129,7 +129,7 @@ class Img(BaseHTML):
 class Map(BaseHTML):
     """Display the map element."""
 
-    tag = "map"
+    tag: str = "map"
 
     # Name of the map, referenced by the 'usemap' attribute in 'img' and 'object' elements
     name: Var[Union[str, int, bool]]
@@ -138,7 +138,7 @@ class Map(BaseHTML):
 class Track(BaseHTML):
     """Display the track element."""
 
-    tag = "track"
+    tag: str = "track"
 
     # Indicates that the track should be enabled unless the user's preferences indicate otherwise
     default: Var[Union[str, int, bool]]
@@ -159,7 +159,7 @@ class Track(BaseHTML):
 class Video(BaseHTML):
     """Display the video element."""
 
-    tag = "video"
+    tag: str = "video"
 
     # Specifies that the video will start playing as soon as it is ready
     auto_play: Var[Union[str, int, bool]]
@@ -201,7 +201,7 @@ class Video(BaseHTML):
 class Embed(BaseHTML):
     """Display the embed element."""
 
-    tag = "embed"
+    tag: str = "embed"
 
     # The intrinsic height of the embedded content
     height: Var[Union[str, int, bool]]
@@ -219,7 +219,7 @@ class Embed(BaseHTML):
 class Iframe(BaseHTML):
     """Display the iframe element."""
 
-    tag = "iframe"
+    tag: str = "iframe"
 
     # Alignment of the iframe within the page or surrounding elements
     align: Var[Union[str, int, bool]]
@@ -258,7 +258,7 @@ class Iframe(BaseHTML):
 class Object(BaseHTML):
     """Display the object element."""
 
-    tag = "object"
+    tag: str = "object"
 
     # Border width around the object
     border: Var[Union[str, int, bool]]
@@ -288,21 +288,21 @@ class Object(BaseHTML):
 class Picture(BaseHTML):
     """Display the picture element."""
 
-    tag = "picture"
+    tag: str = "picture"
     # No unique attributes, only common ones are inherited
 
 
 class Portal(BaseHTML):
     """Display the portal element."""
 
-    tag = "portal"
+    tag: str = "portal"
     # No unique attributes, only common ones are inherited
 
 
 class Source(BaseHTML):
     """Display the source element."""
 
-    tag = "source"
+    tag: str = "source"
 
     # Media query indicating what device the linked resource is optimized for
     media: Var[Union[str, int, bool]]
@@ -323,7 +323,7 @@ class Source(BaseHTML):
 class Svg(BaseHTML):
     """Display the svg element."""
 
-    tag = "svg"
+    tag: str = "svg"
 
     # Specifies the width of the element
     width: Var[Union[str, int, bool]]
@@ -335,7 +335,7 @@ class Svg(BaseHTML):
 class Path(BaseHTML):
     """Display the path element."""
 
-    tag = "path"
+    tag: str = "path"
 
     # Defines the shape of the path
     d: Var[Union[str, int, bool]]

reflex/components/el/elements/metadata.py

@@ -10,9 +10,9 @@ from .base import BaseHTML
 class Base(BaseHTML):  # noqa: E742
     """Display the base element."""
 
-    tag = "base"
+    tag: str = "base"
 
-    tag = "base"
+    tag: str = "base"
     href: Var[Union[str, int, bool]]
     target: Var[Union[str, int, bool]]
 
@@ -20,13 +20,13 @@ class Base(BaseHTML):  # noqa: E742
 class Head(BaseHTML):  # noqa: E742
     """Display the head element."""
 
-    tag = "head"
+    tag: str = "head"
 
 
 class Link(BaseHTML):  # noqa: E742
     """Display the link element."""
 
-    tag = "link"
+    tag: str = "link"
 
     cross_origin: Var[Union[str, int, bool]]
     href: Var[Union[str, int, bool]]
@@ -42,7 +42,7 @@ class Link(BaseHTML):  # noqa: E742
 class Meta(BaseHTML):  # Inherits common attributes from BaseHTML
     """Display the meta element."""
 
-    tag = "meta"
+    tag: str = "meta"
     char_set: Var[Union[str, int, bool]]
     content: Var[Union[str, int, bool]]
     http_equiv: Var[Union[str, int, bool]]
@@ -52,4 +52,4 @@ class Meta(BaseHTML):  # Inherits common attributes from BaseHTML
 class Title(Element):  # noqa: E742
     """Display the title element."""
 
-    tag = "title"
+    tag: str = "title"

reflex/components/el/elements/other.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Details(BaseHTML):
     """Display the details element."""
 
-    tag = "details"
+    tag: str = "details"
 
     # Indicates whether the details will be visible (expanded) to the user
     open: Var[Union[str, int, bool]]
@@ -18,7 +18,7 @@ class Details(BaseHTML):
 class Dialog(BaseHTML):
     """Display the dialog element."""
 
-    tag = "dialog"
+    tag: str = "dialog"
 
     # Indicates whether the dialog is active and can be interacted with
     open: Var[Union[str, int, bool]]
@@ -27,35 +27,35 @@ class Dialog(BaseHTML):
 class Summary(BaseHTML):
     """Display the summary element."""
 
-    tag = "summary"
+    tag: str = "summary"
     # No unique attributes, only common ones are inherited; used as a summary or caption for a <details> element
 
 
 class Slot(BaseHTML):
     """Display the slot element."""
 
-    tag = "slot"
+    tag: str = "slot"
     # No unique attributes, only common ones are inherited; used as a placeholder inside a web component
 
 
 class Template(BaseHTML):
     """Display the template element."""
 
-    tag = "template"
+    tag: str = "template"
     # No unique attributes, only common ones are inherited; used for declaring fragments of HTML that can be cloned and inserted in the document
 
 
 class Math(BaseHTML):
     """Display the math element."""
 
-    tag = "math"
+    tag: str = "math"
     # No unique attributes, only common ones are inherited; used for displaying mathematical expressions
 
 
 class Html(BaseHTML):
     """Display the html element."""
 
-    tag = "html"
+    tag: str = "html"
 
     # Specifies the URL of the document's cache manifest (obsolete in HTML5)
     manifest: Var[Union[str, int, bool]]

reflex/components/el/elements/scripts.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Canvas(BaseHTML):
     """Display the canvas element."""
 
-    tag = "canvas"
+    tag: str = "canvas"
 
     # The height of the canvas in CSS pixels
     height: Var[Union[str, int, bool]]
@@ -21,14 +21,14 @@ class Canvas(BaseHTML):
 class Noscript(BaseHTML):
     """Display the noscript element."""
 
-    tag = "noscript"
+    tag: str = "noscript"
     # No unique attributes, only common ones are inherited
 
 
 class Script(BaseHTML):
     """Display the script element."""
 
-    tag = "script"
+    tag: str = "script"
 
     # Indicates that the script should be executed asynchronously
     async_: Var[Union[str, int, bool]]

reflex/components/el/elements/sectioning.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Body(BaseHTML):  # noqa: E742
     """Display the body element."""
 
-    tag = "body"
+    tag: str = "body"
 
     bgcolor: Var[Union[str, int, bool]]
     background: Var[Union[str, int, bool]]
@@ -18,82 +18,82 @@ class Body(BaseHTML):  # noqa: E742
 class Address(BaseHTML):  # noqa: E742
     """Display the address element."""
 
-    tag = "address"
+    tag: str = "address"
 
 
 class Article(BaseHTML):  # noqa: E742
     """Display the article element."""
 
-    tag = "article"
+    tag: str = "article"
 
 
 class Aside(BaseHTML):  # noqa: E742
     """Display the aside element."""
 
-    tag = "aside"
+    tag: str = "aside"
 
 
 class Footer(BaseHTML):  # noqa: E742
     """Display the footer element."""
 
-    tag = "footer"
+    tag: str = "footer"
 
 
 class Header(BaseHTML):  # noqa: E742
     """Display the header element."""
 
-    tag = "header"
+    tag: str = "header"
 
 
 class H1(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h1"
+    tag: str = "h1"
 
 
 class H2(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h2"
+    tag: str = "h2"
 
 
 class H3(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h3"
+    tag: str = "h3"
 
 
 class H4(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h4"
+    tag: str = "h4"
 
 
 class H5(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h5"
+    tag: str = "h5"
 
 
 class H6(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h6"
+    tag: str = "h6"
 
 
 class Main(BaseHTML):  # noqa: E742
     """Display the main element."""
 
-    tag = "main"
+    tag: str = "main"
 
 
 class Nav(BaseHTML):  # noqa: E742
     """Display the nav element."""
 
-    tag = "nav"
+    tag: str = "nav"
 
 
 class Section(BaseHTML):  # noqa: E742
     """Display the section element."""
 
-    tag = "section"
+    tag: str = "section"

reflex/components/el/elements/tables.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Caption(BaseHTML):
     """Display the caption element."""
 
-    tag = "caption"
+    tag: str = "caption"
 
     # Alignment of the caption
     align: Var[Union[str, int, bool]]
@@ -18,7 +18,7 @@ class Caption(BaseHTML):
 class Col(BaseHTML):
     """Display the col element."""
 
-    tag = "col"
+    tag: str = "col"
 
     # Alignment of the content within the column
     align: Var[Union[str, int, bool]]
@@ -33,7 +33,7 @@ class Col(BaseHTML):
 class Colgroup(BaseHTML):
     """Display the colgroup element."""
 
-    tag = "colgroup"
+    tag: str = "colgroup"
 
     # Alignment of the content within the column group
     align: Var[Union[str, int, bool]]
@@ -48,7 +48,7 @@ class Colgroup(BaseHTML):
 class Table(BaseHTML):
     """Display the table element."""
 
-    tag = "table"
+    tag: str = "table"
 
     # Alignment of the table
     align: Var[Union[str, int, bool]]
@@ -69,7 +69,7 @@ class Table(BaseHTML):
 class Tbody(BaseHTML):
     """Display the tbody element."""
 
-    tag = "tbody"
+    tag: str = "tbody"
 
     # Alignment of the content within the table body
     align: Var[Union[str, int, bool]]
@@ -81,7 +81,7 @@ class Tbody(BaseHTML):
 class Td(BaseHTML):
     """Display the td element."""
 
-    tag = "td"
+    tag: str = "td"
 
     # Alignment of the content within the table cell
     align: Var[Union[str, int, bool]]
@@ -105,7 +105,7 @@ class Td(BaseHTML):
 class Tfoot(BaseHTML):
     """Display the tfoot element."""
 
-    tag = "tfoot"
+    tag: str = "tfoot"
 
     # Alignment of the content within the table footer
     align: Var[Union[str, int, bool]]
@@ -117,7 +117,7 @@ class Tfoot(BaseHTML):
 class Th(BaseHTML):
     """Display the th element."""
 
-    tag = "th"
+    tag: str = "th"
 
     # Alignment of the content within the table header cell
     align: Var[Union[str, int, bool]]
@@ -144,7 +144,7 @@ class Th(BaseHTML):
 class Thead(BaseHTML):
     """Display the thead element."""
 
-    tag = "thead"
+    tag: str = "thead"
 
     # Alignment of the content within the table header
     align: Var[Union[str, int, bool]]
@@ -153,7 +153,7 @@ class Thead(BaseHTML):
 class Tr(BaseHTML):
     """Display the tr element."""
 
-    tag = "tr"
+    tag: str = "tr"
 
     # Alignment of the content within the table row
     align: Var[Union[str, int, bool]]

reflex/components/el/elements/typography.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Blockquote(BaseHTML):
     """Display the blockquote element."""
 
-    tag = "blockquote"
+    tag: str = "blockquote"
 
     # Define the title of a work.
     cite: Var[Union[str, int, bool]]
@@ -18,37 +18,37 @@ class Blockquote(BaseHTML):
 class Dd(BaseHTML):
     """Display the dd element."""
 
-    tag = "dd"
+    tag: str = "dd"
 
 
 class Div(BaseHTML):
     """Display the div element."""
 
-    tag = "div"
+    tag: str = "div"
 
 
 class Dl(BaseHTML):
     """Display the dl element."""
 
-    tag = "dl"
+    tag: str = "dl"
 
 
 class Dt(BaseHTML):
     """Display the dt element."""
 
-    tag = "dt"
+    tag: str = "dt"
 
 
 class Figcaption(BaseHTML):
     """Display the figcaption element."""
 
-    tag = "figcaption"
+    tag: str = "figcaption"
 
 
 class Hr(BaseHTML):
     """Display the hr element."""
 
-    tag = "hr"
+    tag: str = "hr"
 
     # Used to specify the alignment of text content of The Element. this attribute is used in all elements.
     align: Var[Union[str, int, bool]]
@@ -60,13 +60,13 @@ class Hr(BaseHTML):
 class Li(BaseHTML):
     """Display the li element."""
 
-    tag = "li"
+    tag: str = "li"
 
 
 class Menu(BaseHTML):
     """Display the menu element."""
 
-    tag = "menu"
+    tag: str = "menu"
 
     # Specifies that the menu element is a context menu.
     type: Var[Union[str, int, bool]]
@@ -75,7 +75,7 @@ class Menu(BaseHTML):
 class Ol(BaseHTML):
     """Display the ol element."""
 
-    tag = "ol"
+    tag: str = "ol"
 
     # Reverses the order of the list.
     reversed: Var[Union[str, int, bool]]
@@ -90,25 +90,25 @@ class Ol(BaseHTML):
 class P(BaseHTML):
     """Display the p element."""
 
-    tag = "p"
+    tag: str = "p"
 
 
 class Pre(BaseHTML):
     """Display the pre element."""
 
-    tag = "pre"
+    tag: str = "pre"
 
 
 class Ul(BaseHTML):
     """Display the ul element."""
 
-    tag = "ul"
+    tag: str = "ul"
 
 
 class Ins(BaseHTML):
     """Display the ins element."""
 
-    tag = "ins"
+    tag: str = "ins"
 
     # Specifies the URL of the document that explains the reason why the text was inserted/changed.
     cite: Var[Union[str, int, bool]]
@@ -120,7 +120,7 @@ class Ins(BaseHTML):
 class Del(BaseHTML):
     """Display the del element."""
 
-    tag = "del"
+    tag: str = "del"
 
     # Specifies the URL of the document that explains the reason why the text was deleted.
     cite: Var[Union[str, int, bool]]

reflex/components/feedback/alert.py

@@ -12,7 +12,7 @@ from reflex.vars import Var
 class Alert(ChakraComponent):
     """An alert feedback box."""
 
-    tag = "Alert"
+    tag: str = "Alert"
 
     # The status of the alert ("success" | "info" | "warning" | "error")
     status: Var[LiteralStatus]
@@ -53,16 +53,16 @@ class Alert(ChakraComponent):
 class AlertIcon(ChakraComponent):
     """An icon displayed in the alert."""
 
-    tag = "AlertIcon"
+    tag: str = "AlertIcon"
 
 
 class AlertTitle(ChakraComponent):
     """The title of the alert."""
 
-    tag = "AlertTitle"
+    tag: str = "AlertTitle"
 
 
 class AlertDescription(ChakraComponent):
     """AlertDescription composes the Box component."""
 
-    tag = "AlertDescription"
+    tag: str = "AlertDescription"

reflex/components/feedback/circularprogress.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class CircularProgress(ChakraComponent):
     """The CircularProgress component is used to indicate the progress for determinate and indeterminate processes."""
 
-    tag = "CircularProgress"
+    tag: str = "CircularProgress"
 
     # If true, the cap of the progress indicator will be rounded.
     cap_is_round: Var[bool]
@@ -64,4 +64,4 @@ class CircularProgress(ChakraComponent):
 class CircularProgressLabel(ChakraComponent):
     """Label of CircularProcess."""
 
-    tag = "CircularProgressLabel"
+    tag: str = "CircularProgressLabel"

reflex/components/feedback/progress.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Progress(ChakraComponent):
     """A bar to display progress."""
 
-    tag = "Progress"
+    tag: str = "Progress"
 
     # If true, the progress bar will show stripe
     has_stripe: Var[bool]

reflex/components/feedback/skeleton.py

@@ -7,7 +7,7 @@ from reflex.vars import Var
 class Skeleton(ChakraComponent):
     """Skeleton is used to display the loading state of some components. You can use it as a standalone component. Or to wrap another component to take the same height and width."""
 
-    tag = "Skeleton"
+    tag: str = "Skeleton"
 
     # The color at the animation end
     end_color: Var[str]
@@ -28,7 +28,7 @@ class Skeleton(ChakraComponent):
 class SkeletonCircle(ChakraComponent):
     """SkeletonCircle is used to display the loading state of some components."""
 
-    tag = "SkeletonCircle"
+    tag: str = "SkeletonCircle"
 
     # The color at the animation end
     end_color: Var[str]
@@ -49,7 +49,7 @@ class SkeletonCircle(ChakraComponent):
 class SkeletonText(ChakraComponent):
     """SkeletonText is used to display the loading state of some components."""
 
-    tag = "SkeletonText"
+    tag: str = "SkeletonText"
 
     # The color at the animation end
     end_color: Var[str]

reflex/components/feedback/spinner.py

@@ -7,7 +7,7 @@ from reflex.vars import Var
 class Spinner(ChakraComponent):
     """The component that spins."""
 
-    tag = "Spinner"
+    tag: str = "Spinner"
 
     # The color of the empty area in the spinner
     empty_color: Var[str]

reflex/components/forms/button.py

@@ -14,7 +14,7 @@ from reflex.vars import Var
 class Button(ChakraComponent):
     """The Button component is used to trigger an event or event, such as submitting a form, opening a dialog, canceling an event, or performing a delete operation."""
 
-    tag = "Button"
+    tag: str = "Button"
 
     # The space between the button icon and label.
     icon_spacing: Var[int]
@@ -63,7 +63,7 @@ class Button(ChakraComponent):
 class ButtonGroup(ChakraComponent):
     """A group of buttons."""
 
-    tag = "ButtonGroup"
+    tag: str = "ButtonGroup"
 
     # If true, the borderRadius of button that are direct children will be altered to look flushed together.
     is_attached: Var[bool]

reflex/components/forms/checkbox.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class Checkbox(ChakraComponent):
     """The Checkbox component is used in forms when a user needs to select multiple values from several options."""
 
-    tag = "Checkbox"
+    tag: str = "Checkbox"
 
     # Color scheme for checkbox.
     # Options:
@@ -71,7 +71,7 @@ class Checkbox(ChakraComponent):
 class CheckboxGroup(ChakraComponent):
     """A group of checkboxes."""
 
-    tag = "CheckboxGroup"
+    tag: str = "CheckboxGroup"
 
     # The value of the checkbox group
     value: Var[str]

reflex/components/forms/debounce.py

@@ -16,8 +16,8 @@ class DebounceInput(Component):
     is experiencing high latency.
     """
 
-    library = "react-debounce-input@3.3.0"
-    tag = "DebounceInput"
+    library: str = "react-debounce-input@3.3.0"
+    tag: str = "DebounceInput"
 
     # Minimum input characters before triggering the on_change event
     min_length: Var[int]

reflex/components/forms/editable.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Editable(ChakraComponent):
     """The wrapper component that provides context value."""
 
-    tag = "Editable"
+    tag: str = "Editable"
 
     # If true, the Editable will be disabled.
     is_disabled: Var[bool]
@@ -55,16 +55,16 @@ class Editable(ChakraComponent):
 class EditableInput(ChakraComponent):
     """The edit view of the component. It shows when you click or focus on the text."""
 
-    tag = "EditableInput"
+    tag: str = "EditableInput"
 
 
 class EditableTextarea(ChakraComponent):
     """Use the textarea element to handle multi line text input in an editable context."""
 
-    tag = "EditableTextarea"
+    tag: str = "EditableTextarea"
 
 
 class EditablePreview(ChakraComponent):
     """The read-only view of the component."""
 
-    tag = "EditablePreview"
+    tag: str = "EditablePreview"

reflex/components/forms/editor.py

@@ -73,11 +73,11 @@ class Editor(NoSSRComponent):
     refer to the library docs for a complete list.
     """
 
-    library = "suneditor-react"
+    library: str = "suneditor-react"
 
-    tag = "SunEditor"
+    tag: str = "SunEditor"
 
-    is_default = True
+    is_default: bool = True
 
     lib_dependencies: List[str] = ["suneditor"]
 

reflex/components/forms/form.py

@@ -36,7 +36,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
 class Form(ChakraComponent):
     """A form component."""
 
-    tag = "Box"
+    tag: str = "Box"
 
     # What the form renders to.
     as_: Var[str] = "form"  # type: ignore
@@ -151,7 +151,7 @@ class Form(ChakraComponent):
 class FormControl(ChakraComponent):
     """Provide context to form components."""
 
-    tag = "FormControl"
+    tag: str = "FormControl"
 
     # If true, the form control will be disabled.
     is_disabled: Var[bool]
@@ -216,13 +216,13 @@ class FormControl(ChakraComponent):
 class FormHelperText(ChakraComponent):
     """A form helper text component."""
 
-    tag = "FormHelperText"
+    tag: str = "FormHelperText"
 
 
 class FormLabel(ChakraComponent):
     """A form label component."""
 
-    tag = "FormLabel"
+    tag: str = "FormLabel"
 
     # Link
     html_for: Var[str]
@@ -231,4 +231,4 @@ class FormLabel(ChakraComponent):
 class FormErrorMessage(ChakraComponent):
     """A form error message component."""
 
-    tag = "FormErrorMessage"
+    tag: str = "FormErrorMessage"

reflex/components/forms/iconbutton.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class IconButton(Text):
     """A button with an icon."""
 
-    tag = "IconButton"
+    tag: str = "IconButton"
 
     # The type of button.
     type: Var[str]

reflex/components/forms/input.py

@@ -17,7 +17,7 @@ from reflex.vars import Var
 class Input(ChakraComponent):
     """The Input component is a component that is used to get user input in a text field."""
 
-    tag = "Input"
+    tag: str = "Input"
 
     # State var to bind the input.
     value: Var[str]
@@ -105,7 +105,7 @@ class Input(ChakraComponent):
 class InputGroup(ChakraComponent):
     """The InputGroup component is a component that is used to group a set of inputs."""
 
-    tag = "InputGroup"
+    tag: str = "InputGroup"
 
     _memoization_mode = MemoizationMode(recursive=False)
 
@@ -113,22 +113,22 @@ class InputGroup(ChakraComponent):
 class InputLeftAddon(ChakraComponent):
     """The InputLeftAddon component is a component that is used to add an addon to the left of an input."""
 
-    tag = "InputLeftAddon"
+    tag: str = "InputLeftAddon"
 
 
 class InputRightAddon(ChakraComponent):
     """The InputRightAddon component is a component that is used to add an addon to the right of an input."""
 
-    tag = "InputRightAddon"
+    tag: str = "InputRightAddon"
 
 
 class InputLeftElement(ChakraComponent):
     """The InputLeftElement component is a component that is used to add an element to the left of an input."""
 
-    tag = "InputLeftElement"
+    tag: str = "InputLeftElement"
 
 
 class InputRightElement(ChakraComponent):
     """The InputRightElement component is a component that is used to add an element to the right of an input."""
 
-    tag = "InputRightElement"
+    tag: str = "InputRightElement"

reflex/components/forms/multiselect.py

@@ -46,9 +46,9 @@ class Select(Component):
     Props added by chakra-react-select are marked with "[chakra]".
     """
 
-    library = "chakra-react-select@4.7.5"
-    tag = "Select"
-    alias = "MultiSelect"
+    library: str = "chakra-react-select@4.7.5"
+    tag: str = "Select"
+    alias: str = "MultiSelect"
 
     # Focus the control when it is mounted
     auto_focus: Var[bool]

reflex/components/forms/numberinput.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class NumberInput(ChakraComponent):
     """The wrapper that provides context and logic to the components."""
 
-    tag = "NumberInput"
+    tag: str = "NumberInput"
 
     # State var to bind the input.
     value: Var[Number]
@@ -112,22 +112,22 @@ class NumberInput(ChakraComponent):
 class NumberInputField(ChakraComponent):
     """The input field itself."""
 
-    tag = "NumberInputField"
+    tag: str = "NumberInputField"
 
 
 class NumberInputStepper(ChakraComponent):
     """The wrapper for the input's stepper buttons."""
 
-    tag = "NumberInputStepper"
+    tag: str = "NumberInputStepper"
 
 
 class NumberIncrementStepper(ChakraComponent):
     """The button to increment the value of the input."""
 
-    tag = "NumberIncrementStepper"
+    tag: str = "NumberIncrementStepper"
 
 
 class NumberDecrementStepper(ChakraComponent):
     """The button to decrement the value of the input."""
 
-    tag = "NumberDecrementStepper"
+    tag: str = "NumberDecrementStepper"

reflex/components/forms/pininput.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class PinInput(ChakraComponent):
     """The component that provides context to all the pin-input fields."""
 
-    tag = "PinInput"
+    tag: str = "PinInput"
 
     # State var to bind the the input.
     value: Var[str]
@@ -164,7 +164,7 @@ class PinInput(ChakraComponent):
 class PinInputField(ChakraComponent):
     """The text field that user types in - must be a direct child of PinInput."""
 
-    tag = "PinInputField"
+    tag: str = "PinInputField"
 
     # the position of the PinInputField inside the PinInput.
     # Default to None because it is assigned by PinInput when created.

reflex/components/forms/radio.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class RadioGroup(ChakraComponent):
     """A grouping of individual radio options."""
 
-    tag = "RadioGroup"
+    tag: str = "RadioGroup"
 
     # State var to bind the the input.
     value: Var[Any]
@@ -62,7 +62,7 @@ class RadioGroup(ChakraComponent):
 class Radio(Text):
     """Radios are used when only one choice may be selected in a series of options."""
 
-    tag = "Radio"
+    tag: str = "Radio"
 
     # Value of radio.
     value: Var[Any]

reflex/components/forms/rangeslider.py

@@ -13,7 +13,7 @@ from reflex.vars import Var
 class RangeSlider(ChakraComponent):
     """The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price."""
 
-    tag = "RangeSlider"
+    tag: str = "RangeSlider"
 
     # State var to bind the the input.
     value: Var[List[int]]
@@ -121,19 +121,19 @@ class RangeSlider(ChakraComponent):
 class RangeSliderTrack(ChakraComponent):
     """A range slider track."""
 
-    tag = "RangeSliderTrack"
+    tag: str = "RangeSliderTrack"
 
 
 class RangeSliderFilledTrack(ChakraComponent):
     """A filled range slider track."""
 
-    tag = "RangeSliderFilledTrack"
+    tag: str = "RangeSliderFilledTrack"
 
 
 class RangeSliderThumb(ChakraComponent):
     """A range slider thumb."""
 
-    tag = "RangeSliderThumb"
+    tag: str = "RangeSliderThumb"
 
     # The position of the thumb.
     index: Var[int]

reflex/components/forms/select.py

@@ -14,7 +14,7 @@ from reflex.vars import Var
 class Select(ChakraComponent):
     """Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead."""
 
-    tag = "Select"
+    tag: str = "Select"
 
     # State var to bind the select.
     value: Var[str]
@@ -88,7 +88,7 @@ class Select(ChakraComponent):
 class Option(Text):
     """A select option."""
 
-    tag = "option"
+    tag: str = "option"
 
     value: Var[Any]
 

reflex/components/forms/slider.py

@@ -13,7 +13,7 @@ from reflex.vars import Var
 class Slider(ChakraComponent):
     """The wrapper that provides context and functionality for all children."""
 
-    tag = "Slider"
+    tag: str = "Slider"
 
     # State var to bind the input.
     value: Var[int]
@@ -108,19 +108,19 @@ class Slider(ChakraComponent):
 class SliderTrack(ChakraComponent):
     """The empty part of the slider that shows the track."""
 
-    tag = "SliderTrack"
+    tag: str = "SliderTrack"
 
 
 class SliderFilledTrack(ChakraComponent):
     """The filled part of the slider."""
 
-    tag = "SliderFilledTrack"
+    tag: str = "SliderFilledTrack"
 
 
 class SliderThumb(ChakraComponent):
     """The handle that's used to change the slider value."""
 
-    tag = "SliderThumb"
+    tag: str = "SliderThumb"
 
     # The size of the thumb.
     box_size: Var[str]
@@ -129,4 +129,4 @@ class SliderThumb(ChakraComponent):
 class SliderMark(ChakraComponent):
     """The label or mark that shows names for specific slider values."""
 
-    tag = "SliderMark"
+    tag: str = "SliderMark"

reflex/components/forms/switch.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Switch(ChakraComponent):
     """Toggleable switch component."""
 
-    tag = "Switch"
+    tag: str = "Switch"
 
     # If true, the switch will be checked. You'll need to set an on_change event handler to update its value (since it is now controlled)
     is_checked: Var[bool]

reflex/components/forms/textarea.py

@@ -13,7 +13,7 @@ from reflex.vars import Var
 class TextArea(ChakraComponent):
     """A text area component."""
 
-    tag = "Textarea"
+    tag: str = "Textarea"
 
     # State var to bind the input.
     value: Var[str]

reflex/components/forms/upload.py

@@ -95,18 +95,18 @@ def cancel_upload(upload_id: str) -> EventSpec:
 class UploadFilesProvider(Component):
     """AppWrap component that provides a dict of selected files by ID via useContext."""
 
-    library = f"/{Dirs.CONTEXTS_PATH}"
-    tag = "UploadFilesProvider"
+    library: str = f"/{Dirs.CONTEXTS_PATH}"
+    tag: str = "UploadFilesProvider"
 
 
 class Upload(Component):
     """A file upload component."""
 
-    library = "react-dropzone@14.2.3"
+    library: str = "react-dropzone@14.2.3"
 
-    tag = "ReactDropzone"
+    tag: str = "ReactDropzone"
 
-    is_default = True
+    is_default: bool = True
 
     # The list of accepted file types. This should be a dictionary of MIME types as keys and array of file formats as
     # values.

reflex/components/graphing/plotly.py

@@ -14,7 +14,7 @@ except ImportError:
 class PlotlyLib(NoSSRComponent):
     """A component that wraps a plotly lib."""
 
-    library = "react-plotly.js@2.6.0"
+    library: str = "react-plotly.js@2.6.0"
 
     lib_dependencies: List[str] = ["plotly.js@2.22.0"]
 
@@ -22,9 +22,9 @@ class PlotlyLib(NoSSRComponent):
 class Plotly(PlotlyLib):
     """Display a plotly graph."""
 
-    tag = "Plot"
+    tag: str = "Plot"
 
-    is_default = True
+    is_default: bool = True
 
     # The figure to display. This can be a plotly figure or a plotly data json.
     data: Var[Figure]

reflex/components/graphing/recharts/cartesian.py

@@ -87,17 +87,17 @@ class Axis(Recharts):
 class XAxis(Axis):
     """An XAxis component in Recharts."""
 
-    tag = "XAxis"
+    tag: str = "XAxis"
 
-    alias = "RechartsXAxis"
+    alias: str = "RechartsXAxis"
 
 
 class YAxis(Axis):
     """A YAxis component in Recharts."""
 
-    tag = "YAxis"
+    tag: str = "YAxis"
 
-    alias = "RechartsYAxis"
+    alias: str = "RechartsYAxis"
 
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
@@ -106,9 +106,9 @@ class YAxis(Axis):
 class ZAxis(Recharts):
     """A ZAxis component in Recharts."""
 
-    tag = "ZAxis"
+    tag: str = "ZAxis"
 
-    alias = "RechartszAxis"
+    alias: str = "RechartszAxis"
 
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
@@ -129,9 +129,9 @@ class ZAxis(Recharts):
 class Brush(Recharts):
     """A Brush component in Recharts."""
 
-    tag = "Brush"
+    tag: str = "Brush"
 
-    alias = "RechartsBrush"
+    alias: str = "RechartsBrush"
 
     # Stroke color
     stroke: Var[str]
@@ -214,9 +214,9 @@ class Cartesian(Recharts):
 class Area(Cartesian):
     """An Area component in Recharts."""
 
-    tag = "Area"
+    tag: str = "Area"
 
-    alias = "RechartsArea"
+    alias: str = "RechartsArea"
 
     # The color of the line stroke.
     stroke: Var[str]
@@ -249,9 +249,9 @@ class Area(Cartesian):
 class Bar(Cartesian):
     """A Bar component in Recharts."""
 
-    tag = "Bar"
+    tag: str = "Bar"
 
-    alias = "RechartsBar"
+    alias: str = "RechartsBar"
 
     # The color of the line stroke.
     stroke: Var[str]
@@ -284,9 +284,9 @@ class Bar(Cartesian):
 class Line(Cartesian):
     """A Line component in Recharts."""
 
-    tag = "Line"
+    tag: str = "Line"
 
-    alias = "RechartsLine"
+    alias: str = "RechartsLine"
 
     # The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
     type_: Var[LiteralAreaType]
@@ -319,9 +319,9 @@ class Line(Cartesian):
 class Scatter(Cartesian):
     """A Scatter component in Recharts."""
 
-    tag = "Scatter"
+    tag: str = "Scatter"
 
-    alias = "RechartsScatter"
+    alias: str = "RechartsScatter"
 
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
@@ -351,9 +351,9 @@ class Scatter(Cartesian):
 class Funnel(Cartesian):
     """A Funnel component in Recharts."""
 
-    tag = "Funnel"
+    tag: str = "Funnel"
 
-    alias = "RechartsFunnel"
+    alias: str = "RechartsFunnel"
 
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
@@ -374,9 +374,9 @@ class Funnel(Cartesian):
 class ErrorBar(Recharts):
     """An ErrorBar component in Recharts."""
 
-    tag = "ErrorBar"
+    tag: str = "ErrorBar"
 
-    alias = "RechartsErrorBar"
+    alias: str = "RechartsErrorBar"
 
     # The direction of error bar. 'x' | 'y' | 'both'
     direction: Var[LiteralDirection]
@@ -419,9 +419,9 @@ class Reference(Recharts):
 class ReferenceLine(Reference):
     """A ReferenceLine component in Recharts."""
 
-    tag = "ReferenceLine"
+    tag: str = "ReferenceLine"
 
-    alias = "RechartsReferenceLine"
+    alias: str = "RechartsReferenceLine"
 
     # The width of the stroke.
     stroke_width: Var[int]
@@ -433,9 +433,9 @@ class ReferenceLine(Reference):
 class ReferenceDot(Reference):
     """A ReferenceDot component in Recharts."""
 
-    tag = "ReferenceDot"
+    tag: str = "ReferenceDot"
 
-    alias = "RechartsReferenceDot"
+    alias: str = "RechartsReferenceDot"
 
     # Valid children components
     _valid_children: List[str] = ["Label"]
@@ -459,9 +459,9 @@ class ReferenceDot(Reference):
 class ReferenceArea(Recharts):
     """A ReferenceArea component in Recharts."""
 
-    tag = "ReferenceArea"
+    tag: str = "ReferenceArea"
 
-    alias = "RechartsReferenceArea"
+    alias: str = "RechartsReferenceArea"
 
     # Stroke color
     stroke: Var[str]
@@ -519,9 +519,9 @@ class Grid(Recharts):
 class CartesianGrid(Grid):
     """A CartesianGrid component in Recharts."""
 
-    tag = "CartesianGrid"
+    tag: str = "CartesianGrid"
 
-    alias = "RechartsCartesianGrid"
+    alias: str = "RechartsCartesianGrid"
 
     # The horizontal line configuration.
     horizontal: Var[Dict[str, Any]]
@@ -542,9 +542,9 @@ class CartesianGrid(Grid):
 class CartesianAxis(Grid):
     """A CartesianAxis component in Recharts."""
 
-    tag = "CartesianAxis"
+    tag: str = "CartesianAxis"
 
-    alias = "RechartsCartesianAxis"
+    alias: str = "RechartsCartesianAxis"
 
     # The orientation of axis 'top' | 'bottom' | 'left' | 'right'
     orientation: Var[LiteralOrientationTopBottomLeftRight]

reflex/components/graphing/recharts/charts.py

@@ -119,9 +119,9 @@ class ChartBase(RechartsCharts):
 class AreaChart(ChartBase):
     """An Area chart component in Recharts."""
 
-    tag = "AreaChart"
+    tag: str = "AreaChart"
 
-    alias = "RechartsAreaChart"
+    alias: str = "RechartsAreaChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
     base_value: Var[Union[int, LiteralComposedChartBaseValue]]
@@ -147,9 +147,9 @@ class AreaChart(ChartBase):
 class BarChart(ChartBase):
     """A Bar chart component in Recharts."""
 
-    tag = "BarChart"
+    tag: str = "BarChart"
 
-    alias = "RechartsBarChart"
+    alias: str = "RechartsBarChart"
 
     # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
     bar_category_gap: Var[Union[str, int]]  # type: ignore
@@ -187,9 +187,9 @@ class BarChart(ChartBase):
 class LineChart(ChartBase):
     """A Line chart component in Recharts."""
 
-    tag = "LineChart"
+    tag: str = "LineChart"
 
-    alias = "RechartsLineChart"
+    alias: str = "RechartsLineChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -209,9 +209,9 @@ class LineChart(ChartBase):
 class ComposedChart(ChartBase):
     """A Composed chart component in Recharts."""
 
-    tag = "ComposedChart"
+    tag: str = "ComposedChart"
 
-    alias = "RechartsComposedChart"
+    alias: str = "RechartsComposedChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
     base_value: Var[Union[int, LiteralComposedChartBaseValue]]
@@ -248,9 +248,9 @@ class ComposedChart(ChartBase):
 class PieChart(ChartBase):
     """A Pie chart component in Recharts."""
 
-    tag = "PieChart"
+    tag: str = "PieChart"
 
-    alias = "RechartsPieChart"
+    alias: str = "RechartsPieChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -278,9 +278,9 @@ class PieChart(ChartBase):
 class RadarChart(ChartBase):
     """A Radar chart component in Recharts."""
 
-    tag = "RadarChart"
+    tag: str = "RadarChart"
 
-    alias = "RechartsRadarChart"
+    alias: str = "RechartsRadarChart"
 
     # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
     cx: Var[Union[int, str]]
@@ -327,9 +327,9 @@ class RadarChart(ChartBase):
 class RadialBarChart(ChartBase):
     """A RadialBar chart component in Recharts."""
 
-    tag = "RadialBarChart"
+    tag: str = "RadialBarChart"
 
-    alias = "RechartsRadialBarChart"
+    alias: str = "RechartsRadialBarChart"
 
     # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
     cx: Var[Union[int, str]]
@@ -385,9 +385,9 @@ class RadialBarChart(ChartBase):
 class ScatterChart(ChartBase):
     """A Scatter chart component in Recharts."""
 
-    tag = "ScatterChart"
+    tag: str = "ScatterChart"
 
-    alias = "RechartsScatterChart"
+    alias: str = "RechartsScatterChart"
 
     # Valid children components
     _valid_children: List[str] = [
@@ -423,9 +423,9 @@ class ScatterChart(ChartBase):
 class FunnelChart(RechartsCharts):
     """A Funnel chart component in Recharts."""
 
-    tag = "FunnelChart"
+    tag: str = "FunnelChart"
 
-    alias = "RechartsFunnelChart"
+    alias: str = "RechartsFunnelChart"
 
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
@@ -474,9 +474,9 @@ class FunnelChart(RechartsCharts):
 class Treemap(RechartsCharts):
     """A Treemap chart component in Recharts."""
 
-    tag = "Treemap"
+    tag: str = "Treemap"
 
-    alias = "RechartsTreemap"
+    alias: str = "RechartsTreemap"
 
     # The width of chart container. String or Integer
     width: Var[Union[str, int]] = "100%"  # type: ignore

reflex/components/graphing/recharts/general.py

@@ -20,9 +20,9 @@ from .recharts import (
 class ResponsiveContainer(Recharts, MemoizationLeaf):
     """A base class for responsive containers in Recharts."""
 
-    tag = "ResponsiveContainer"
+    tag: str = "ResponsiveContainer"
 
-    alias = "RechartsResponsiveContainer"
+    alias: str = "RechartsResponsiveContainer"
 
     # The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number
     aspect: Var[int]
@@ -59,9 +59,9 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
 class Legend(Recharts):
     """A Legend component in Recharts."""
 
-    tag = "Legend"
+    tag: str = "Legend"
 
-    alias = "RechartsLegend"
+    alias: str = "RechartsLegend"
 
     # The width of legend container. Number
     width: Var[int]
@@ -112,9 +112,9 @@ class Legend(Recharts):
 class GraphingTooltip(Recharts):
     """A Tooltip component in Recharts."""
 
-    tag = "Tooltip"
+    tag: str = "Tooltip"
 
-    alias = "RechartsTooltip"
+    alias: str = "RechartsTooltip"
 
     # The separator between name and value.
     separator: Var[str]
@@ -144,9 +144,9 @@ class GraphingTooltip(Recharts):
 class Label(Recharts):
     """A Label component in Recharts."""
 
-    tag = "Label"
+    tag: str = "Label"
 
-    alias = "RechartsLabel"
+    alias: str = "RechartsLabel"
 
     # The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.
     view_box: Var[Dict[str, Any]]
@@ -164,9 +164,9 @@ class Label(Recharts):
 class LabelList(Recharts):
     """A LabelList component in Recharts."""
 
-    tag = "LabelList"
+    tag: str = "LabelList"
 
-    alias = "RechartsLabelList"
+    alias: str = "RechartsLabelList"
 
     # The key of a group of label values in data.
     data_key: Var[Union[str, int]]

reflex/components/graphing/recharts/polar.py

@@ -18,9 +18,9 @@ from .recharts import (
 class Pie(Recharts):
     """A Pie chart component in Recharts."""
 
-    tag = "Pie"
+    tag: str = "Pie"
 
-    alias = "RechartsPie"
+    alias: str = "RechartsPie"
 
     # data
     data: Var[List[Dict[str, Any]]]
@@ -92,9 +92,9 @@ class Pie(Recharts):
 class Radar(Recharts):
     """A Radar chart component in Recharts."""
 
-    tag = "Radar"
+    tag: str = "Radar"
 
-    alias = "RechartsRadar"
+    alias: str = "RechartsRadar"
 
     # The key of a group of data which should be unique in a radar chart.
     data_key: Var[Union[str, int]]
@@ -136,9 +136,9 @@ class Radar(Recharts):
 class RadialBar(Recharts):
     """A RadialBar chart component in Recharts."""
 
-    tag = "RadialBar"
+    tag: str = "RadialBar"
 
-    alias = "RechartsRadialBar"
+    alias: str = "RechartsRadialBar"
 
     # The source data which each element is an object.
     data: Var[List[Dict[str, Any]]]
@@ -177,9 +177,9 @@ class RadialBar(Recharts):
 class PolarAngleAxis(Recharts):
     """A PolarAngleAxis component in Recharts."""
 
-    tag = "PolarAngleAxis"
+    tag: str = "PolarAngleAxis"
 
-    alias = "RechartsPolarAngleAxis"
+    alias: str = "RechartsPolarAngleAxis"
 
     # The key of a group of data which should be unique to show the meaning of angle axis.
     data_key: Var[Union[str, int]]
@@ -236,9 +236,9 @@ class PolarAngleAxis(Recharts):
 class PolarGrid(Recharts):
     """A PolarGrid component in Recharts."""
 
-    tag = "PolarGrid"
+    tag: str = "PolarGrid"
 
-    alias = "RechartsPolarGrid"
+    alias: str = "RechartsPolarGrid"
 
     # The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of container width.
     cx: Var[Union[int, str]]
@@ -268,9 +268,9 @@ class PolarGrid(Recharts):
 class PolarRadiusAxis(Recharts):
     """A PolarRadiusAxis component in Recharts."""
 
-    tag = "PolarRadiusAxis"
+    tag: str = "PolarRadiusAxis"
 
-    alias = "RechartsPolarRadiusAxis"
+    alias: str = "RechartsPolarRadiusAxis"
 
     # The angle of radial direction line to display axis text.
     angle: Var[int]

reflex/components/graphing/recharts/recharts.py

@@ -7,13 +7,13 @@ from reflex.components.component import Component, MemoizationLeaf, NoSSRCompone
 class Recharts(Component):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@2.8.0"
+    library: str = "recharts@2.8.0"
 
 
 class RechartsCharts(NoSSRComponent, MemoizationLeaf):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@2.8.0"
+    library: str = "recharts@2.8.0"
 
 
 LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]

reflex/components/layout/aspect_ratio.py

@@ -7,7 +7,7 @@ from reflex.vars import Var
 class AspectRatio(ChakraComponent):
     """AspectRatio component is used to embed responsive videos and maps, etc."""
 
-    tag = "AspectRatio"
+    tag: str = "AspectRatio"
 
     # The aspect ratio of the Box
     ratio: Var[float]

reflex/components/layout/box.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Box(ChakraComponent):
     """A generic container component that can contain other components."""
 
-    tag = "Box"
+    tag: str = "Box"
 
     # The type element to render. You can specify an image, video, or any other HTML element such as iframe.
     element: Var[str]

reflex/components/layout/card.py

@@ -15,25 +15,25 @@ from reflex.vars import Var
 class CardHeader(ChakraComponent):
     """The wrapper that contains a card's header."""
 
-    tag = "CardHeader"
+    tag: str = "CardHeader"
 
 
 class CardBody(ChakraComponent):
     """The wrapper that houses the card's main content."""
 
-    tag = "CardBody"
+    tag: str = "CardBody"
 
 
 class CardFooter(ChakraComponent):
     """The footer that houses the card actions."""
 
-    tag = "CardFooter"
+    tag: str = "CardFooter"
 
 
 class Card(ChakraComponent):
     """The parent wrapper that provides context for its children."""
 
-    tag = "Card"
+    tag: str = "Card"
 
     # [required] The flex alignment of the card
     align: Var[str]

reflex/components/layout/center.py

@@ -6,16 +6,16 @@ from reflex.components.libs.chakra import ChakraComponent
 class Center(ChakraComponent):
     """A box that centers its contents."""
 
-    tag = "Center"
+    tag: str = "Center"
 
 
 class Square(ChakraComponent):
     """A centered square container."""
 
-    tag = "Square"
+    tag: str = "Square"
 
 
 class Circle(ChakraComponent):
     """A square container with round border-radius."""
 
-    tag = "Circle"
+    tag: str = "Circle"

reflex/components/layout/container.py

@@ -7,7 +7,7 @@ from reflex.vars import Var
 class Container(ChakraComponent):
     """A flexbox container that centers its children and sets a max width."""
 
-    tag = "Container"
+    tag: str = "Container"
 
     # If true, container will center its children regardless of their width.
     center_content: Var[bool]

reflex/components/layout/flex.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Flex(ChakraComponent):
     """A reflexive container component."""
 
-    tag = "Flex"
+    tag: str = "Flex"
 
     # How to align items in the flex.
     align: Var[str]

reflex/components/layout/fragment.py

@@ -5,5 +5,5 @@ from reflex.components.component import Component
 class Fragment(Component):
     """A React fragment to return multiple components from a function without wrapping it in a container."""
 
-    library = "react"
-    tag = "Fragment"
+    library: str = "react"
+    tag: str = "Fragment"

reflex/components/layout/grid.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Grid(ChakraComponent):
     """A grid component."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
     # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
@@ -44,7 +44,7 @@ class Grid(ChakraComponent):
 class GridItem(ChakraComponent):
     """Used as a child of Grid to control the span, and start positions within the grid."""
 
-    tag = "GridItem"
+    tag: str = "GridItem"
 
     # Shorthand prop for gridArea
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)_
@@ -74,7 +74,7 @@ class GridItem(ChakraComponent):
 class ResponsiveGrid(ChakraComponent):
     """A responsive grid component."""
 
-    tag = "SimpleGrid"
+    tag: str = "SimpleGrid"
 
     # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_

reflex/components/layout/spacer.py

@@ -6,4 +6,4 @@ from reflex.components.libs.chakra import ChakraComponent
 class Spacer(ChakraComponent):
     """A flexible space component."""
 
-    tag = "Spacer"
+    tag: str = "Spacer"

reflex/components/layout/stack.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Stack(ChakraComponent):
     """Container to stack elements with spacing."""
 
-    tag = "Stack"
+    tag: str = "Stack"
 
     # Shorthand for alignItems style prop
     align_items: Var[str]
@@ -39,10 +39,10 @@ class Stack(ChakraComponent):
 class Hstack(Stack):
     """Stack items horizontally."""
 
-    tag = "HStack"
+    tag: str = "HStack"
 
 
 class Vstack(Stack):
     """Stack items vertically."""
 
-    tag = "VStack"
+    tag: str = "VStack"

reflex/components/layout/wrap.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Wrap(ChakraComponent):
     """Layout component used to add space between elements and wrap automatically if there isn't enough space."""
 
-    tag = "Wrap"
+    tag: str = "Wrap"
 
     # How to align the items.
     align: Var[str]
@@ -54,4 +54,4 @@ class Wrap(ChakraComponent):
 class WrapItem(ChakraComponent):
     """Item of the Wrap component."""
 
-    tag = "WrapItem"
+    tag: str = "WrapItem"

reflex/components/libs/chakra.py

@@ -12,7 +12,7 @@ from reflex.vars import Var
 class ChakraComponent(Component):
     """A component that wraps a Chakra component."""
 
-    library = "@chakra-ui/react@2.6.1"
+    library: str = "@chakra-ui/react@2.6.1"
     lib_dependencies: List[str] = [
         "@chakra-ui/system@2.5.7",
         "focus-visible@5.2.0",
@@ -74,12 +74,12 @@ class ChakraComponent(Component):
 class Global(Component):
     """The emotion/react Global styling component."""
 
-    library = "@emotion/react@^11.11.0"
+    library: str = "@emotion/react@^11.11.0"
     lib_dependencies: List[str] = [
         "@emotion/styled@^11.11.0",
     ]
 
-    tag = "Global"
+    tag: str = "Global"
 
     styles: Var[str]
 
@@ -87,7 +87,7 @@ class Global(Component):
 class ChakraProvider(ChakraComponent):
     """Top level Chakra provider must be included in any app using chakra components."""
 
-    tag = "ChakraProvider"
+    tag: str = "ChakraProvider"
 
     theme: Var[str]
 
@@ -141,9 +141,9 @@ chakra_provider = ChakraProvider.create()
 class ChakraColorModeProvider(Component):
     """Next-themes integration for chakra colorModeProvider."""
 
-    library = "/components/reflex/chakra_color_mode_provider.js"
-    tag = "ChakraColorModeProvider"
-    is_default = True
+    library: str = "/components/reflex/chakra_color_mode_provider.js"
+    tag: str = "ChakraColorModeProvider"
+    is_default: bool = True
 
 
 chakra_color_mode_provider = ChakraColorModeProvider.create()

reflex/components/libs/react_player.py

@@ -11,11 +11,11 @@ class ReactPlayerComponent(NoSSRComponent):
     reference: https://github.com/cookpete/react-player.
     """
 
-    library = "react-player@2.12.0"
+    library: str = "react-player@2.12.0"
 
-    tag = "ReactPlayer"
+    tag: str = "ReactPlayer"
 
-    is_default = True
+    is_default: bool = True
 
     # The url of a video or song to play
     url: Var[str]

reflex/components/media/avatar.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Avatar(ChakraComponent):
     """The image that represents the user."""
 
-    tag = "Avatar"
+    tag: str = "Avatar"
 
     # The default avatar used as fallback when name, and src is not specified.
     icon: Var[str]
@@ -51,13 +51,13 @@ class Avatar(ChakraComponent):
 class AvatarBadge(ChakraComponent):
     """A wrapper that displays its content on the right corner of the avatar."""
 
-    tag = "AvatarBadge"
+    tag: str = "AvatarBadge"
 
 
 class AvatarGroup(ChakraComponent):
     """A wrapper to stack multiple Avatars together."""
 
-    tag = "AvatarGroup"
+    tag: str = "AvatarGroup"
 
     # The maximum number of visible avatars.
     max_: Var[int]

reflex/components/media/icon.py

@@ -8,13 +8,13 @@ from reflex.utils import format
 class ChakraIconComponent(ChakraComponent):
     """A component that wraps a Chakra icon component."""
 
-    library = "@chakra-ui/icons@2.0.19"
+    library: str = "@chakra-ui/icons@2.0.19"
 
 
 class Icon(ChakraIconComponent):
     """An image icon."""
 
-    tag = "None"
+    tag: str = "None"
 
     @classmethod
     def create(cls, *children, **props):

reflex/components/navigation/breadcrumb.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Breadcrumb(ChakraComponent):
     """The parent container for breadcrumbs."""
 
-    tag = "Breadcrumb"
+    tag: str = "Breadcrumb"
 
     # The visual separator between each breadcrumb item
     separator: Var[str]
@@ -51,7 +51,7 @@ class Breadcrumb(ChakraComponent):
 class BreadcrumbItem(ChakraComponent):
     """Individual breadcrumb element containing a link and a divider."""
 
-    tag = "BreadcrumbItem"
+    tag: str = "BreadcrumbItem"
 
     # Is the current page of the breadcrumb.
     is_current_page: Var[bool]
@@ -86,13 +86,13 @@ class BreadcrumbItem(ChakraComponent):
 class BreadcrumbSeparator(ChakraComponent):
     """The visual separator between each breadcrumb."""
 
-    tag = "BreadcrumbSeparator"
+    tag: str = "BreadcrumbSeparator"
 
 
 class BreadcrumbLink(Link):
     """The breadcrumb link."""
 
-    tag = "BreadcrumbLink"
+    tag: str = "BreadcrumbLink"
 
     # Is the current page of the breadcrumb.
     is_current_page: Var[bool]

reflex/components/navigation/client_side_routing.py

@@ -20,8 +20,8 @@ route_not_found: Var = Var.create_safe(constants.ROUTE_NOT_FOUND)
 class ClientSideRouting(Component):
     """The client-side routing component."""
 
-    library = "/utils/client_side_routing"
-    tag = "useClientSideRouting"
+    library: str = "/utils/client_side_routing"
+    tag: str = "useClientSideRouting"
 
     def _get_hooks(self) -> str:
         """Get the hooks to render.
@@ -61,8 +61,8 @@ def wait_for_client_redirect(component) -> Component:
 class Default404Page(Component):
     """The NextJS default 404 page."""
 
-    library = "next/error"
-    tag = "Error"
-    is_default = True
+    library: str = "next/error"
+    tag: str = "Error"
+    is_default: bool = True
 
     status_code: Var[int] = 404  # type: ignore

reflex/components/navigation/link.py

@@ -7,13 +7,13 @@ from reflex.components.navigation.nextlink import NextLink
 from reflex.utils import imports
 from reflex.vars import BaseVar, Var
 
-next_link = NextLink.create()
+next_link = NextLink.create(href="")
 
 
 class Link(ChakraComponent):
     """Link to another page."""
 
-    tag = "Link"
+    tag: str = "Link"
 
     # The rel.
     rel: Var[str]

reflex/components/navigation/linkoverlay.py

@@ -7,7 +7,7 @@ from reflex.vars import Var
 class LinkOverlay(ChakraComponent):
     """Wraps child component in a link."""
 
-    tag = "LinkOverlay"
+    tag: str = "LinkOverlay"
 
     # If true, the link will open in new tab
     is_external: Var[bool]
@@ -19,4 +19,4 @@ class LinkOverlay(ChakraComponent):
 class LinkBox(ChakraComponent):
     """The LinkBox lifts any nested links to the top using z-index to ensure proper keyboard navigation between links."""
 
-    tag = "LinkBox"
+    tag: str = "LinkBox"

reflex/components/navigation/nextlink.py

@@ -7,11 +7,11 @@ from reflex.vars import Var
 class NextLink(Component):
     """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""
 
-    library = "next/link"
+    library: str = "next/link"
 
-    tag = "NextLink"
+    tag: str = "NextLink"
 
-    is_default = True
+    is_default: bool = True
 
     # The page to link to.
     href: Var[str]

reflex/components/navigation/stepper.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Stepper(ChakraComponent):
     """The parent container for a stepper."""
 
-    tag = "Stepper"
+    tag: str = "Stepper"
 
     orientation: Var[Literal["vertical", "horizontal"]]
 
@@ -58,37 +58,37 @@ class Stepper(ChakraComponent):
 class Step(ChakraComponent):
     """A component for an individual step in the stepper."""
 
-    tag = "Step"
+    tag: str = "Step"
 
 
 class StepDescription(ChakraComponent):
     """The description text for a step component."""
 
-    tag = "StepDescription"
+    tag: str = "StepDescription"
 
 
 class StepIcon(ChakraComponent):
     """The icon displayed in a step indicator component."""
 
-    tag = "StepIcon"
+    tag: str = "StepIcon"
 
 
 class StepIndicator(ChakraComponent):
     """The component displaying the status of a step."""
 
-    tag = "StepIndicator"
+    tag: str = "StepIndicator"
 
 
 class StepNumber(ChakraComponent):
     """The number of a step displayed in a step indicator component."""
 
-    tag = "StepNumber"
+    tag: str = "StepNumber"
 
 
 class StepSeparator(ChakraComponent):
     """The component separting steps."""
 
-    tag = "StepSeparator"
+    tag: str = "StepSeparator"
 
 
 class StepStatus(ChakraComponent):
@@ -104,10 +104,10 @@ class StepStatus(ChakraComponent):
 
     incomplete: Var[str]
 
-    tag = "StepStatus"
+    tag: str = "StepStatus"
 
 
 class StepTitle(ChakraComponent):
     """The title text for a step component."""
 
-    tag = "StepTitle"
+    tag: str = "StepTitle"

reflex/components/next/image.py

@@ -11,9 +11,9 @@ from .base import NextComponent
 class Image(NextComponent):
     """Display an image."""
 
-    tag = "Image"
-    library = "next/image"
-    is_default = True
+    tag: str = "Image"
+    library: str = "next/image"
+    is_default: bool = True
 
     # This can be either an absolute external URL, or an internal path
     src: Var[Any]

reflex/components/next/video.py

@@ -11,9 +11,9 @@ from .base import NextComponent
 class Video(NextComponent):
     """A video component from NextJS."""
 
-    tag = "Video"
-    library = "next-video"
-    is_default = True
+    tag: str = "Video"
+    library: str = "next-video"
+    is_default: bool = True
     # the URL
     src: Var[str]
 

reflex/components/overlay/alertdialog.py

@@ -12,7 +12,7 @@ from reflex.vars import Var
 class AlertDialog(ChakraComponent):
     """Provides context and state for the dialog."""
 
-    tag = "AlertDialog"
+    tag: str = "AlertDialog"
 
     # If true, the modal will be open.
     is_open: Var[bool]
@@ -122,34 +122,34 @@ class AlertDialog(ChakraComponent):
 class AlertDialogBody(ChakraComponent):
     """Should contain the description announced by screen readers."""
 
-    tag = "AlertDialogBody"
+    tag: str = "AlertDialogBody"
 
 
 class AlertDialogHeader(ChakraComponent):
     """Should contain the title announced by screen readers."""
 
-    tag = "AlertDialogHeader"
+    tag: str = "AlertDialogHeader"
 
 
 class AlertDialogFooter(ChakraComponent):
     """Should contain the events of the dialog."""
 
-    tag = "AlertDialogFooter"
+    tag: str = "AlertDialogFooter"
 
 
 class AlertDialogContent(ChakraComponent):
     """The wrapper for the alert dialog's content."""
 
-    tag = "AlertDialogContent"
+    tag: str = "AlertDialogContent"
 
 
 class AlertDialogOverlay(ChakraComponent):
     """The dimmed overlay behind the dialog."""
 
-    tag = "AlertDialogOverlay"
+    tag: str = "AlertDialogOverlay"
 
 
 class AlertDialogCloseButton(ChakraComponent):
     """The button that closes the dialog."""
 
-    tag = "AlertDialogCloseButton"
+    tag: str = "AlertDialogCloseButton"

reflex/components/overlay/drawer.py

@@ -16,7 +16,7 @@ from reflex.vars import Var
 class Drawer(ChakraComponent):
     """A drawer component."""
 
-    tag = "Drawer"
+    tag: str = "Drawer"
 
     # If true, the modal will be open.
     is_open: Var[bool]
@@ -137,34 +137,34 @@ class Drawer(ChakraComponent):
 class DrawerBody(ChakraComponent):
     """Drawer body."""
 
-    tag = "DrawerBody"
+    tag: str = "DrawerBody"
 
 
 class DrawerHeader(ChakraComponent):
     """Drawer header."""
 
-    tag = "DrawerHeader"
+    tag: str = "DrawerHeader"
 
 
 class DrawerFooter(ChakraComponent):
     """Drawer footer."""
 
-    tag = "DrawerFooter"
+    tag: str = "DrawerFooter"
 
 
 class DrawerOverlay(ChakraComponent):
     """Drawer overlay."""
 
-    tag = "DrawerOverlay"
+    tag: str = "DrawerOverlay"
 
 
 class DrawerContent(ChakraComponent):
     """Drawer content."""
 
-    tag = "DrawerContent"
+    tag: str = "DrawerContent"
 
 
 class DrawerCloseButton(ChakraComponent):
     """Drawer close button."""
 
-    tag = "DrawerCloseButton"
+    tag: str = "DrawerCloseButton"

reflex/components/overlay/menu.py

@@ -17,7 +17,7 @@ from reflex.vars import Var
 class Menu(ChakraComponent):
     """The wrapper component provides context, state, and focus management."""
 
-    tag = "Menu"
+    tag: str = "Menu"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Var[int]
@@ -115,7 +115,7 @@ class Menu(ChakraComponent):
 class MenuButton(ChakraComponent):
     """The trigger for the menu list. Must be a direct child of Menu."""
 
-    tag = "MenuButton"
+    tag: str = "MenuButton"
 
     # The variant of the menu button.
     variant: Var[str]
@@ -130,7 +130,7 @@ class MenuButton(ChakraComponent):
 class MenuList(ChakraComponent):
     """The wrapper for the menu items. Must be a direct child of Menu."""
 
-    tag = "MenuList"
+    tag: str = "MenuList"
 
     @classmethod
     def create(
@@ -159,7 +159,7 @@ class MenuList(ChakraComponent):
 class MenuItem(ChakraComponent):
     """The trigger that handles menu selection. Must be a direct child of a MenuList."""
 
-    tag = "MenuItem"
+    tag: str = "MenuItem"
 
     # Overrides the parent menu's closeOnSelect prop.
     close_on_select: Var[bool]
@@ -180,7 +180,7 @@ class MenuItem(ChakraComponent):
 class MenuItemOption(ChakraComponent):
     """The checkable menu item, to be used with MenuOptionGroup."""
 
-    tag = "MenuItemOption"
+    tag: str = "MenuItemOption"
 
     # Overrides the parent menu's closeOnSelect prop.
     close_on_select: Var[bool]
@@ -210,13 +210,13 @@ class MenuItemOption(ChakraComponent):
 class MenuGroup(ChakraComponent):
     """A wrapper to group related menu items."""
 
-    tag = "MenuGroup"
+    tag: str = "MenuGroup"
 
 
 class MenuOptionGroup(ChakraComponent):
     """A wrapper for checkable menu items (radio and checkbox)."""
 
-    tag = "MenuOptionGroup"
+    tag: str = "MenuOptionGroup"
 
     # "checkbox" | "radio"
     type_: Var[LiteralMenuOption]
@@ -228,4 +228,4 @@ class MenuOptionGroup(ChakraComponent):
 class MenuDivider(ChakraComponent):
     """A visual separator for menu items and groups."""
 
-    tag = "MenuDivider"
+    tag: str = "MenuDivider"

reflex/components/overlay/modal.py

@@ -14,7 +14,7 @@ ModalSizes = Literal["xs", "sm", "md", "lg", "xl", "full"]
 class Modal(ChakraComponent):
     """The wrapper that provides context for its children."""
 
-    tag = "Modal"
+    tag: str = "Modal"
 
     # If true, the modal will be open.
     is_open: Var[bool]
@@ -133,34 +133,34 @@ class Modal(ChakraComponent):
 class ModalOverlay(ChakraComponent):
     """The dimmed overlay behind the modal dialog."""
 
-    tag = "ModalOverlay"
+    tag: str = "ModalOverlay"
 
 
 class ModalHeader(ChakraComponent):
     """The header that labels the modal dialog."""
 
-    tag = "ModalHeader"
+    tag: str = "ModalHeader"
 
 
 class ModalFooter(ChakraComponent):
     """The footer that houses the modal events."""
 
-    tag = "ModalFooter"
+    tag: str = "ModalFooter"
 
 
 class ModalContent(ChakraComponent):
     """The container for the modal dialog's content."""
 
-    tag = "ModalContent"
+    tag: str = "ModalContent"
 
 
 class ModalBody(ChakraComponent):
     """The wrapper that houses the modal's main content."""
 
-    tag = "ModalBody"
+    tag: str = "ModalBody"
 
 
 class ModalCloseButton(ChakraComponent):
     """The button that closes the modal."""
 
-    tag = "ModalCloseButton"
+    tag: str = "ModalCloseButton"

reflex/components/overlay/popover.py

@@ -16,7 +16,7 @@ from reflex.vars import Var
 class Popover(ChakraComponent):
     """The wrapper that provides props, state, and context to its children."""
 
-    tag = "Popover"
+    tag: str = "Popover"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Var[int]
@@ -144,46 +144,46 @@ class Popover(ChakraComponent):
 class PopoverContent(ChakraComponent):
     """The popover itself."""
 
-    tag = "PopoverContent"
+    tag: str = "PopoverContent"
 
 
 class PopoverHeader(ChakraComponent):
     """The header of the popover."""
 
-    tag = "PopoverHeader"
+    tag: str = "PopoverHeader"
 
 
 class PopoverFooter(ChakraComponent):
     """Display a popover footer."""
 
-    tag = "PopoverFooter"
+    tag: str = "PopoverFooter"
 
 
 class PopoverBody(ChakraComponent):
     """The body of the popover."""
 
-    tag = "PopoverBody"
+    tag: str = "PopoverBody"
 
 
 class PopoverArrow(ChakraComponent):
     """A visual arrow that points to the reference (or trigger)."""
 
-    tag = "PopoverArrow"
+    tag: str = "PopoverArrow"
 
 
 class PopoverCloseButton(ChakraComponent):
     """A button to close the popover."""
 
-    tag = "PopoverCloseButton"
+    tag: str = "PopoverCloseButton"
 
 
 class PopoverAnchor(ChakraComponent):
     """Used to wrap the position-reference element."""
 
-    tag = "PopoverAnchor"
+    tag: str = "PopoverAnchor"
 
 
 class PopoverTrigger(ChakraComponent):
     """Used to wrap the reference (or trigger) element."""
 
-    tag = "PopoverTrigger"
+    tag: str = "PopoverTrigger"

reflex/components/overlay/tooltip.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Tooltip(ChakraComponent):
     """A tooltip message to appear."""
 
-    tag = "Tooltip"
+    tag: str = "Tooltip"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Var[int]

reflex/components/radix/primitives/accordion.py

@@ -19,7 +19,7 @@ DEFAULT_ANIMATION_DURATION = 250
 class AccordionComponent(Component):
     """Base class for all @radix-ui/accordion components."""
 
-    library = "@radix-ui/react-accordion@^1.1.2"
+    library: str = "@radix-ui/react-accordion@^1.1.2"
 
     # Change the default rendered element for the one passed as a child.
     as_child: Var[bool]
@@ -39,9 +39,9 @@ class AccordionComponent(Component):
 class AccordionRoot(AccordionComponent):
     """An accordion component."""
 
-    tag = "Root"
+    tag: str = "Root"
 
-    alias = "RadixAccordionRoot"
+    alias: str = "RadixAccordionRoot"
 
     # The type of accordion (single or multiple).
     type_: Var[LiteralAccordionType]
@@ -78,9 +78,9 @@ class AccordionRoot(AccordionComponent):
 class AccordionItem(AccordionComponent):
     """An accordion component."""
 
-    tag = "Item"
+    tag: str = "Item"
 
-    alias = "RadixAccordionItem"
+    alias: str = "RadixAccordionItem"
 
     # A unique identifier for the item.
     value: Var[str]
@@ -115,9 +115,9 @@ class AccordionItem(AccordionComponent):
 class AccordionHeader(AccordionComponent):
     """An accordion component."""
 
-    tag = "Header"
+    tag: str = "Header"
 
-    alias = "RadixAccordionHeader"
+    alias: str = "RadixAccordionHeader"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
@@ -131,9 +131,9 @@ class AccordionHeader(AccordionComponent):
 class AccordionTrigger(AccordionComponent):
     """An accordion component."""
 
-    tag = "Trigger"
+    tag: str = "Trigger"
 
-    alias = "RadixAccordionTrigger"
+    alias: str = "RadixAccordionTrigger"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
@@ -163,9 +163,9 @@ class AccordionTrigger(AccordionComponent):
 class AccordionContent(AccordionComponent):
     """An accordion component."""
 
-    tag = "Content"
+    tag: str = "Content"
 
-    alias = "RadixAccordionContent"
+    alias: str = "RadixAccordionContent"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(
@@ -222,9 +222,9 @@ to {
 class ChevronDownIcon(Component):
     """A chevron down icon."""
 
-    library = "@radix-ui/react-icons"
+    library: str = "@radix-ui/react-icons"
 
-    tag = "ChevronDownIcon"
+    tag: str = "ChevronDownIcon"
 
     def _apply_theme(self, theme: Component):
         self.style = Style(

reflex/components/radix/themes/base.py

@@ -47,7 +47,7 @@ class CommonMarginProps(Component):
 class RadixThemesComponent(Component):
     """Base class for all @radix-ui/themes components."""
 
-    library = "@radix-ui/themes@^2.0.0"
+    library: str = "@radix-ui/themes@^2.0.0"
 
     @classmethod
     def create(cls, *children, **props) -> Component:
@@ -118,7 +118,7 @@ class Theme(RadixThemesComponent):
     child elements as an override of the main theme.
     """
 
-    tag = "Theme"
+    tag: str = "Theme"
 
     # Whether to apply the themes background color to the theme node.
     has_background: Var[bool]
@@ -154,7 +154,7 @@ class ThemePanel(RadixThemesComponent):
     Include as a child component of Theme to use in your app.
     """
 
-    tag = "ThemePanel"
+    tag: str = "ThemePanel"
 
     default_open: Var[bool]
 
@@ -162,6 +162,6 @@ class ThemePanel(RadixThemesComponent):
 class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""
 
-    library = "/components/reflex/radix_themes_color_mode_provider.js"
-    tag = "RadixThemesColorModeProvider"
-    is_default = True
+    library: str = "/components/reflex/radix_themes_color_mode_provider.js"
+    tag: str = "RadixThemesColorModeProvider"
+    is_default: bool = True