[REF-3273] Add SVG circle, polygon and rect components (#3684)

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__,

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

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,

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"]

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
+svg = SVG()
-defs = Defs.create
+
-lineargradient = Lineargradient.create
+
-stop = Stop.create
+def __getattr__(name: str):
-path = Path.create
+    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

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 <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
+class Circle(BaseHTML):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        cx: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        cy: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        r: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        path_length: Optional[Union[Var[int], int]] = 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]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        draggable: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        hidden: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        input_mode: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        item_prop: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        lang: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        role: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        slot: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        spell_check: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        tab_index: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        title: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        **props,
+    ) -> "Circle":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            cx: The x-axis coordinate of the center of the circle.
+            cy: The y-axis coordinate of the center of the circle.
+            r: The radius of the circle.
+            path_length: The total length for the circle's circumference, in user units.
+            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 <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
+class Rect(BaseHTML):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        x: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        y: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        width: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        height: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        rx: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        ry: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        path_length: Optional[Union[Var[int], int]] = 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]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        draggable: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        hidden: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        input_mode: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        item_prop: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        lang: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        role: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        slot: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        spell_check: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        tab_index: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        title: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        **props,
+    ) -> "Rect":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            x: The x coordinate of the rect.
+            y: The y coordinate of the rect.
+            width: The width of the rect
+            height: The height of the rect.
+            rx: The horizontal corner radius of the rect. Defaults to ry if it is specified.
+            ry: The vertical corner radius of the rect. Defaults to rx if it is specified.
+            path_length: The total length of the rectangle's perimeter, in user units.
+            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 <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
+class Polygon(BaseHTML):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        points: Optional[Union[Var[str], str]] = None,
+        path_length: Optional[Union[Var[int], int]] = 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]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        draggable: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        hidden: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        input_mode: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        item_prop: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        lang: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        role: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        slot: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        spell_check: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        tab_index: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        title: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        **props,
+    ) -> "Polygon":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            points: defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
+            path_length: This prop lets specify the total length for the path, in user units.
             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.
@@ -1789,7 +2170,7 @@ class Defs(BaseHTML):
         """
         ...
 
-class Lineargradient(BaseHTML):
+class LinearGradient(BaseHTML):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -1878,18 +2259,18 @@ class Lineargradient(BaseHTML):
             Union[EventHandler, EventSpec, list, Callable, BaseVar]
         ] = None,
         **props,
-    ) -> "Lineargradient":
+    ) -> "LinearGradient":
         """Create the component.
 
         Args:
             *children: The children of the component.
-            gradient_units: Units for the gradient
+            gradient_units: Units for the gradient.
-            gradient_transform: Transform applied to the gradient
+            gradient_transform: Transform applied to the gradient.
-            spread_method: Method used to spread the gradient
+            spread_method: Method used to spread the gradient.
-            x1: X coordinate of the starting point of the gradient
+            x1: X coordinate of the starting point of the gradient.
-            x2: X coordinate of the ending point of the gradient
+            x2: X coordinate of the ending point of the gradient.
-            y1: Y coordinate of the starting point of the gradient
+            y1: Y coordinate of the starting point of the gradient.
-            y2: Y coordinate of the ending point of the gradient
+            y2: Y coordinate of the ending point of the gradient.
             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.
@@ -2013,9 +2394,9 @@ class Stop(BaseHTML):
 
         Args:
             *children: The children of the component.
-            offset: Offset of the gradient stop
+            offset: Offset of the gradient stop.
-            stop_color: Color of the gradient stop
+            stop_color: Color of the gradient stop.
-            stop_opacity: Opacity of the gradient stop
+            stop_opacity: Opacity of the gradient stop.
             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.
@@ -2133,7 +2514,135 @@ class Path(BaseHTML):
 
         Args:
             *children: The children of the component.
-            d: Defines the shape of the path
+            d: Defines the shape of the path.
+            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 <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The props of the component.
+
+        Returns:
+            The component.
+        """
+        ...
+
+class SVG(ComponentNamespace):
+    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)
+
+    @staticmethod
+    def __call__(
+        *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]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        dir: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        draggable: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[bool, int, str]], str, int, bool]
+        ] = None,
+        hidden: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        input_mode: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        item_prop: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        lang: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        role: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        slot: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        spell_check: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        tab_index: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        title: Optional[Union[Var[Union[bool, int, str]], str, int, bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, Callable, BaseVar]
+        ] = None,
+        **props,
+    ) -> "Svg":
+        """Create the component.
+
+        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.
@@ -2175,8 +2684,4 @@ object = Object.create
 picture = Picture.create
 portal = Portal.create
 source = Source.create
-svg = Svg.create
+svg = SVG()
-defs = Defs.create
-lineargradient = Lineargradient.create
-stop = Stop.create
-path = Path.create

reflex/utils/pyi_generator.py

@@ -882,6 +882,7 @@ class PyiGenerator:
         # retrieve the _SUBMODULES and _SUBMOD_ATTRS from an init file if present.
         sub_mods = getattr(mod, "_SUBMODULES", None)
         sub_mod_attrs = getattr(mod, "_SUBMOD_ATTRS", None)
+        pyright_ignore_imports = getattr(mod, "_PYRIGHT_IGNORE_IMPORTS", [])
 
         if not sub_mods and not sub_mod_attrs:
             return
@@ -901,6 +902,7 @@ class PyiGenerator:
             # construct the import statement and handle special cases for aliases
             sub_mod_attrs_imports = [
                 f"from .{path} import {mod if not isinstance(mod, tuple) else mod[0]} as {mod if not isinstance(mod, tuple) else mod[1]}"
+                + ("  # type: ignore" if mod in pyright_ignore_imports else "")
                 for mod, path in sub_mod_attrs.items()
             ]
             sub_mod_attrs_imports.append("")