diff --git a/reflex/components/el/__init__.py b/reflex/components/el/__init__.py
index 750e65dba..9fe1d89cd 100644
--- a/reflex/components/el/__init__.py
+++ b/reflex/components/el/__init__.py
@@ -10,6 +10,7 @@ _SUBMODULES: set[str] = {"elements"}
_SUBMOD_ATTRS: dict[str, list[str]] = {
f"elements.{k}": v for k, v in elements._MAPPING.items()
}
+_PYRIGHT_IGNORE_IMPORTS = elements._PYRIGHT_IGNORE_IMPORTS
__getattr__, __dir__, __all__ = lazy_loader.attach(
__name__,
diff --git a/reflex/components/el/__init__.pyi b/reflex/components/el/__init__.pyi
index 080c9c37c..d312db84e 100644
--- a/reflex/components/el/__init__.pyi
+++ b/reflex/components/el/__init__.pyi
@@ -3,6 +3,7 @@
# This file was generated by `reflex/utils/pyi_generator.py`!
# ------------------------------------------------------
+from . import elements
from .elements.forms import Button as Button
from .elements.forms import Fieldset as Fieldset
from .elements.forms import Form as Form
@@ -91,7 +92,7 @@ from .elements.media import Defs as Defs
from .elements.media import Embed as Embed
from .elements.media import Iframe as Iframe
from .elements.media import Img as Img
-from .elements.media import Lineargradient as Lineargradient
+from .elements.media import LinearGradient as LinearGradient
from .elements.media import Map as Map
from .elements.media import Object as Object
from .elements.media import Path as Path
@@ -104,19 +105,19 @@ from .elements.media import Track as Track
from .elements.media import Video as Video
from .elements.media import area as area
from .elements.media import audio as audio
-from .elements.media import defs as defs
+from .elements.media import defs as defs # type: ignore
from .elements.media import embed as embed
from .elements.media import iframe as iframe
from .elements.media import image as image
from .elements.media import img as img
-from .elements.media import lineargradient as lineargradient
+from .elements.media import lineargradient as lineargradient # type: ignore
from .elements.media import map as map
from .elements.media import object as object
-from .elements.media import path as path
+from .elements.media import path as path # type: ignore
from .elements.media import picture as picture
from .elements.media import portal as portal
from .elements.media import source as source
-from .elements.media import stop as stop
+from .elements.media import stop as stop # type: ignore
from .elements.media import svg as svg
from .elements.media import track as track
from .elements.media import video as video
@@ -230,3 +231,5 @@ from .elements.typography import ol as ol
from .elements.typography import p as p
from .elements.typography import pre as pre
from .elements.typography import ul as ul
+
+_PYRIGHT_IGNORE_IMPORTS = elements._PYRIGHT_IGNORE_IMPORTS
diff --git a/reflex/components/el/elements/__init__.py b/reflex/components/el/elements/__init__.py
index 1c2684f1d..024ae8c3d 100644
--- a/reflex/components/el/elements/__init__.py
+++ b/reflex/components/el/elements/__init__.py
@@ -67,6 +67,7 @@ _MAPPING = {
"svg",
"defs",
"lineargradient",
+ "LinearGradient",
"stop",
"path",
],
@@ -129,12 +130,13 @@ _MAPPING = {
}
-EXCLUDE = ["del_", "Del", "image"]
+EXCLUDE = ["del_", "Del", "image", "lineargradient", "LinearGradient"]
for _, v in _MAPPING.items():
v.extend([mod.capitalize() for mod in v if mod not in EXCLUDE])
_SUBMOD_ATTRS: dict[str, list[str]] = _MAPPING
+_PYRIGHT_IGNORE_IMPORTS = ["stop", "lineargradient", "path", "defs"]
__getattr__, __dir__, __all__ = lazy_loader.attach(
__name__,
submod_attrs=_SUBMOD_ATTRS,
diff --git a/reflex/components/el/elements/__init__.pyi b/reflex/components/el/elements/__init__.pyi
index 8c35756e5..4f218f361 100644
--- a/reflex/components/el/elements/__init__.pyi
+++ b/reflex/components/el/elements/__init__.pyi
@@ -91,7 +91,7 @@ from .media import Defs as Defs
from .media import Embed as Embed
from .media import Iframe as Iframe
from .media import Img as Img
-from .media import Lineargradient as Lineargradient
+from .media import LinearGradient as LinearGradient
from .media import Map as Map
from .media import Object as Object
from .media import Path as Path
@@ -104,19 +104,19 @@ from .media import Track as Track
from .media import Video as Video
from .media import area as area
from .media import audio as audio
-from .media import defs as defs
+from .media import defs as defs # type: ignore
from .media import embed as embed
from .media import iframe as iframe
from .media import image as image
from .media import img as img
-from .media import lineargradient as lineargradient
+from .media import lineargradient as lineargradient # type: ignore
from .media import map as map
from .media import object as object
-from .media import path as path
+from .media import path as path # type: ignore
from .media import picture as picture
from .media import portal as portal
from .media import source as source
-from .media import stop as stop
+from .media import stop as stop # type: ignore
from .media import svg as svg
from .media import track as track
from .media import video as video
@@ -294,6 +294,7 @@ _MAPPING = {
"svg",
"defs",
"lineargradient",
+ "LinearGradient",
"stop",
"path",
],
@@ -347,6 +348,7 @@ _MAPPING = {
"Del",
],
}
-EXCLUDE = ["del_", "Del", "image"]
+EXCLUDE = ["del_", "Del", "image", "lineargradient", "LinearGradient"]
for _, v in _MAPPING.items():
v.extend([mod.capitalize() for mod in v if mod not in EXCLUDE])
+_PYRIGHT_IGNORE_IMPORTS = ["stop", "lineargradient", "path", "defs"]
diff --git a/reflex/components/el/elements/media.py b/reflex/components/el/elements/media.py
index 8d56c78b4..b2bdc9e6f 100644
--- a/reflex/components/el/elements/media.py
+++ b/reflex/components/el/elements/media.py
@@ -2,8 +2,9 @@
from typing import Any, Union
-from reflex import Component
+from reflex import Component, ComponentNamespace
from reflex.constants.colors import Color
+from reflex.utils import console
from reflex.vars import Var as Var
from .base import BaseHTML
@@ -309,6 +310,56 @@ class Svg(BaseHTML):
"""Display the svg element."""
tag = "svg"
+ # The width of the svg.
+ width: Var[Union[str, int]]
+ # The height of the svg.
+ height: Var[Union[str, int]]
+ # The XML namespace declaration.
+ xmlns: Var[str]
+
+
+class Circle(BaseHTML):
+ """The SVG circle component."""
+
+ tag = "circle"
+ # The x-axis coordinate of the center of the circle.
+ cx: Var[Union[str, int]]
+ # The y-axis coordinate of the center of the circle.
+ cy: Var[Union[str, int]]
+ # The radius of the circle.
+ r: Var[Union[str, int]]
+ # The total length for the circle's circumference, in user units.
+ path_length: Var[int]
+
+
+class Rect(BaseHTML):
+ """The SVG rect component."""
+
+ tag = "rect"
+ # The x coordinate of the rect.
+ x: Var[Union[str, int]]
+ # The y coordinate of the rect.
+ y: Var[Union[str, int]]
+ # The width of the rect
+ width: Var[Union[str, int]]
+ # The height of the rect.
+ height: Var[Union[str, int]]
+ # The horizontal corner radius of the rect. Defaults to ry if it is specified.
+ rx: Var[Union[str, int]]
+ # The vertical corner radius of the rect. Defaults to rx if it is specified.
+ ry: Var[Union[str, int]]
+ # The total length of the rectangle's perimeter, in user units.
+ path_length: Var[int]
+
+
+class Polygon(BaseHTML):
+ """The SVG polygon component."""
+
+ tag = "polygon"
+ # defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
+ points: Var[str]
+ # This prop lets specify the total length for the path, in user units.
+ path_length: Var[int]
class Defs(BaseHTML):
@@ -317,30 +368,30 @@ class Defs(BaseHTML):
tag = "defs"
-class Lineargradient(BaseHTML):
+class LinearGradient(BaseHTML):
"""Display the linearGradient element."""
tag = "linearGradient"
- # Units for the gradient
+ # Units for the gradient.
gradient_units: Var[Union[str, bool]]
- # Transform applied to the gradient
+ # Transform applied to the gradient.
gradient_transform: Var[Union[str, bool]]
- # Method used to spread the gradient
+ # Method used to spread the gradient.
spread_method: Var[Union[str, bool]]
- # X coordinate of the starting point of the gradient
+ # X coordinate of the starting point of the gradient.
x1: Var[Union[str, int, bool]]
- # X coordinate of the ending point of the gradient
+ # X coordinate of the ending point of the gradient.
x2: Var[Union[str, int, bool]]
- # Y coordinate of the starting point of the gradient
+ # Y coordinate of the starting point of the gradient.
y1: Var[Union[str, int, bool]]
- # Y coordinate of the ending point of the gradient
+ # Y coordinate of the ending point of the gradient.
y2: Var[Union[str, int, bool]]
@@ -349,13 +400,13 @@ class Stop(BaseHTML):
tag = "stop"
- # Offset of the gradient stop
+ # Offset of the gradient stop.
offset: Var[Union[str, float, int]]
- # Color of the gradient stop
+ # Color of the gradient stop.
stop_color: Var[Union[str, Color, bool]]
- # Opacity of the gradient stop
+ # Opacity of the gradient stop.
stop_opacity: Var[Union[str, float, int, bool]]
@@ -364,10 +415,23 @@ class Path(BaseHTML):
tag = "path"
- # Defines the shape of the path
+ # Defines the shape of the path.
d: Var[Union[str, int, bool]]
+class SVG(ComponentNamespace):
+ """SVG component namespace."""
+
+ circle = staticmethod(Circle.create)
+ rect = staticmethod(Rect.create)
+ polygon = staticmethod(Polygon.create)
+ path = staticmethod(Path.create)
+ stop = staticmethod(Stop.create)
+ linear_gradient = staticmethod(LinearGradient.create)
+ defs = staticmethod(Defs.create)
+ __call__ = staticmethod(Svg.create)
+
+
area = Area.create
audio = Audio.create
image = img = Img.create
@@ -380,8 +444,24 @@ object = Object.create
picture = Picture.create
portal = Portal.create
source = Source.create
-svg = Svg.create
-defs = Defs.create
-lineargradient = Lineargradient.create
-stop = Stop.create
-path = Path.create
+svg = SVG()
+
+
+def __getattr__(name: str):
+ if name in ("defs", "lineargradient", "stop", "path"):
+ console.deprecate(
+ f"`rx.el.{name}`",
+ reason=f"use `rx.el.svg.{'linear_gradient' if name =='lineargradient' else name}`",
+ deprecation_version="0.5.8",
+ removal_version="0.6.0",
+ )
+ return (
+ LinearGradient.create
+ if name == "lineargradient"
+ else globals()[name.capitalize()].create
+ )
+
+ try:
+ return globals()[name]
+ except KeyError:
+ raise AttributeError(f"module '{__name__} has no attribute '{name}'") from None
diff --git a/reflex/components/el/elements/media.pyi b/reflex/components/el/elements/media.pyi
index 7a9a064fb..ba5f14137 100644
--- a/reflex/components/el/elements/media.pyi
+++ b/reflex/components/el/elements/media.pyi
@@ -5,6 +5,7 @@
# ------------------------------------------------------
from typing import Any, Callable, Dict, Optional, Union, overload
+from reflex import ComponentNamespace
from reflex.constants.colors import Color
from reflex.event import EventHandler, EventSpec
from reflex.style import Style
@@ -1563,6 +1564,9 @@ class Svg(BaseHTML):
def create( # type: ignore
cls,
*children,
+ width: Optional[Union[Var[Union[int, str]], str, int]] = None,
+ height: Optional[Union[Var[Union[int, str]], str, int]] = None,
+ xmlns: Optional[Union[Var[str], str]] = None,
access_key: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
auto_capitalize: Optional[
Union[Var[Union[bool, int, str]], str, int, bool]
@@ -1644,6 +1648,383 @@ class Svg(BaseHTML):
Args:
*children: The children of the component.
+ width: The width of the svg.
+ height: The height of the svg.
+ xmlns: The XML namespace declaration.
+ access_key: Provides a hint for generating a keyboard shortcut for the current element.
+ auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+ content_editable: Indicates whether the element's content is editable.
+ context_menu: Defines the ID of a