Individually Import Chakra Packages (#2405)

* Base lib switch

Co-authored-by: Alek Petuskey <alekpetuskey@aleks-mbp.lan>

.github/workflows/integration_tests.yml

@@ -101,7 +101,6 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        # Show OS combos first in GUI
         os: [ ubuntu-latest, windows-latest, macos-latest ]
         python-version: [ "3.10.10", "3.11.4" ]
         node-version: [ "16.x" ]

reflex/components/chakra/datadisplay/badge.py

@@ -7,6 +7,8 @@ from reflex.vars import Var
 class Badge(ChakraComponent):
     """A badge component."""
 
+    library = "@chakra-ui/layout@2.3.1"
+
     tag = "Badge"
 
     # Variant of the badge ("solid" | "subtle" | "outline")

reflex/components/chakra/datadisplay/code.py

@@ -518,4 +518,6 @@ class CodeBlock(Component):
 class Code(ChakraComponent):
     """Used to display inline code."""
 
+    library = "@chakra-ui/layout@2.3.1"
+
     tag = "Code"

reflex/components/chakra/datadisplay/divider.py

@@ -10,6 +10,8 @@ LiteralLayout = Literal["horizontal", "vertical"]
 class Divider(ChakraComponent):
     """Dividers are used to visually separate content in a list or group."""
 
+    library = "@chakra-ui/layout@2.3.1"
+
     tag = "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.

reflex/components/chakra/datadisplay/keyboard_key.py

@@ -6,4 +6,6 @@ from reflex.components.chakra import ChakraComponent
 class KeyboardKey(ChakraComponent):
     """Display a keyboard key text."""
 
+    library = "@chakra-ui/layout@2.3.1"
+
     tag = "Kbd"

reflex/components/chakra/datadisplay/list.py

@@ -8,7 +8,13 @@ from reflex.components.core.foreach import Foreach
 from reflex.vars import Var
 
 
-class List(ChakraComponent):
+class BaseList(ChakraComponent):
+    """The base class for all Chakra list components."""
+
+    library = "@chakra-ui/layout@2.3.1"
+
+
+class List(BaseList):
     """Display a list of items."""
 
     tag = "List"
@@ -44,7 +50,7 @@ class List(ChakraComponent):
         return super().create(*children, **props)
 
 
-class ListItem(ChakraComponent):
+class ListItem(BaseList):
     """A single list item."""
 
     tag = "ListItem"

reflex/components/chakra/datadisplay/list.pyi

@@ -12,7 +12,86 @@ from reflex.components.component import Component
 from reflex.components.core.foreach import Foreach
 from reflex.vars import Var
 
-class List(ChakraComponent):
+class BaseList(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseList":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class List(BaseList):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -96,7 +175,7 @@ class List(ChakraComponent):
         """
         ...
 
-class ListItem(ChakraComponent):
+class ListItem(BaseList):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/datadisplay/stat.py

@@ -5,7 +5,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class Stat(ChakraComponent):
+class BaseStat(ChakraComponent):
+    """The base class for all stat components."""
+
+    library = "@chakra-ui/stat@2.1.0"
+
+
+class Stat(BaseStat):
     """The Stat component is used to display some statistics. It can take in a label, a number and a help text."""
 
     tag = "Stat"
@@ -47,25 +53,25 @@ class Stat(ChakraComponent):
         return super().create(*children, **props)
 
 
-class StatLabel(ChakraComponent):
+class StatLabel(BaseStat):
     """A stat label component."""
 
     tag = "StatLabel"
 
 
-class StatNumber(ChakraComponent):
+class StatNumber(BaseStat):
     """The stat to display."""
 
     tag = "StatNumber"
 
 
-class StatHelpText(ChakraComponent):
+class StatHelpText(BaseStat):
     """A helper text to display under the stat."""
 
     tag = "StatHelpText"
 
 
-class StatArrow(ChakraComponent):
+class StatArrow(BaseStat):
     """A stat arrow component indicating the direction of change."""
 
     tag = "StatArrow"
@@ -74,7 +80,7 @@ class StatArrow(ChakraComponent):
     type_: Var[str]
 
 
-class StatGroup(ChakraComponent):
+class StatGroup(BaseStat):
     """A stat group component to evenly space out the stats."""
 
     tag = "StatGroup"

reflex/components/chakra/datadisplay/stat.pyi

@@ -11,7 +11,86 @@ from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class Stat(ChakraComponent):
+class BaseStat(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseStat":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Stat(BaseStat):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -95,7 +174,7 @@ class Stat(ChakraComponent):
         """
         ...
 
-class StatLabel(ChakraComponent):
+class StatLabel(BaseStat):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -174,7 +253,7 @@ class StatLabel(ChakraComponent):
         """
         ...
 
-class StatNumber(ChakraComponent):
+class StatNumber(BaseStat):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -253,7 +332,7 @@ class StatNumber(ChakraComponent):
         """
         ...
 
-class StatHelpText(ChakraComponent):
+class StatHelpText(BaseStat):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -332,7 +411,7 @@ class StatHelpText(ChakraComponent):
         """
         ...
 
-class StatArrow(ChakraComponent):
+class StatArrow(BaseStat):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -413,7 +492,7 @@ class StatArrow(ChakraComponent):
         """
         ...
 
-class StatGroup(ChakraComponent):
+class StatGroup(BaseStat):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/datadisplay/table.py

@@ -8,7 +8,13 @@ from reflex.utils import types
 from reflex.vars import Var
 
 
-class Table(ChakraComponent):
+class BaseTable(ChakraComponent):
+    """The base class for all Chakra table components."""
+
+    library = "@chakra-ui/table@2.1.0"
+
+
+class Table(BaseTable):
     """A table component."""
 
     tag = "Table"
@@ -59,7 +65,7 @@ class Table(ChakraComponent):
         return super().create(*children, **props)
 
 
-class Thead(ChakraComponent):
+class Thead(BaseTable):
     """A table header component."""
 
     tag = "Thead"
@@ -111,7 +117,7 @@ class Thead(ChakraComponent):
             raise TypeError("table headers should be a list or tuple")
 
 
-class Tbody(ChakraComponent):
+class Tbody(BaseTable):
     """A table body component."""
 
     tag = "Tbody"
@@ -185,7 +191,7 @@ class Tbody(ChakraComponent):
             )
 
 
-class Tfoot(ChakraComponent):
+class Tfoot(BaseTable):
     """A table footer component."""
 
     tag = "Tfoot"
@@ -234,7 +240,7 @@ class Tfoot(ChakraComponent):
             raise TypeError("table headers should be a list or tuple")
 
 
-class Tr(ChakraComponent):
+class Tr(BaseTable):
     """A table row component."""
 
     tag = "Tr"
@@ -265,7 +271,7 @@ class Tr(ChakraComponent):
         return super().create(*children, **props)
 
 
-class Th(ChakraComponent):
+class Th(BaseTable):
     """A table header cell component."""
 
     tag = "Th"
@@ -277,7 +283,7 @@ class Th(ChakraComponent):
     is_numeric: Var[bool]
 
 
-class Td(ChakraComponent):
+class Td(BaseTable):
     """A table data cell component."""
 
     tag = "Td"
@@ -289,7 +295,7 @@ class Td(ChakraComponent):
     is_numeric: Var[bool]
 
 
-class TableCaption(ChakraComponent):
+class TableCaption(BaseTable):
     """A table caption component."""
 
     tag = "TableCaption"
@@ -298,7 +304,7 @@ class TableCaption(ChakraComponent):
     placement: Var[str]
 
 
-class TableContainer(ChakraComponent):
+class TableContainer(BaseTable):
     """The table container component renders a div that wraps the table component."""
 
     tag = "TableContainer"

reflex/components/chakra/datadisplay/table.pyi

@@ -14,7 +14,86 @@ from reflex.components.core.foreach import Foreach
 from reflex.utils import types
 from reflex.vars import Var
 
-class Table(ChakraComponent):
+class BaseTable(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseTable":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Table(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -106,7 +185,7 @@ class Table(ChakraComponent):
         """
         ...
 
-class Thead(ChakraComponent):
+class Thead(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -187,7 +266,7 @@ class Thead(ChakraComponent):
     @staticmethod
     def validate_headers(headers): ...
 
-class Tbody(ChakraComponent):
+class Tbody(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -267,7 +346,7 @@ class Tbody(ChakraComponent):
     @staticmethod
     def validate_rows(rows): ...
 
-class Tfoot(ChakraComponent):
+class Tfoot(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -347,7 +426,7 @@ class Tfoot(ChakraComponent):
     @staticmethod
     def validate_footers(footers): ...
 
-class Tr(ChakraComponent):
+class Tr(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -427,7 +506,7 @@ class Tr(ChakraComponent):
         """
         ...
 
-class Th(ChakraComponent):
+class Th(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -508,7 +587,7 @@ class Th(ChakraComponent):
         """
         ...
 
-class Td(ChakraComponent):
+class Td(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -589,7 +668,7 @@ class Td(ChakraComponent):
         """
         ...
 
-class TableCaption(ChakraComponent):
+class TableCaption(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -670,7 +749,7 @@ class TableCaption(ChakraComponent):
         """
         ...
 
-class TableContainer(ChakraComponent):
+class TableContainer(BaseTable):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/datadisplay/tag.py

@@ -11,31 +11,37 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class TagLabel(ChakraComponent):
+class BaseTag(ChakraComponent):
+    """The base tag component."""
+
+    library = "@chakra-ui/tag@3.1.1"
+
+
+class TagLabel(BaseTag):
     """The label of the tag."""
 
     tag = "TagLabel"
 
 
-class TagLeftIcon(ChakraComponent):
+class TagLeftIcon(BaseTag):
     """The left icon of the tag."""
 
     tag = "TagLeftIcon"
 
 
-class TagRightIcon(ChakraComponent):
+class TagRightIcon(BaseTag):
     """The right icon of the tag."""
 
     tag = "TagRightIcon"
 
 
-class TagCloseButton(ChakraComponent):
+class TagCloseButton(BaseTag):
     """The close button of the tag."""
 
     tag = "TagCloseButton"
 
 
-class Tag(ChakraComponent):
+class Tag(BaseTag):
     """The parent wrapper that provides context for its children."""
 
     tag = "Tag"

reflex/components/chakra/datadisplay/tag.pyi

@@ -17,7 +17,86 @@ from reflex.components.chakra import (
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class TagLabel(ChakraComponent):
+class BaseTag(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseTag":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class TagLabel(BaseTag):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -96,7 +175,7 @@ class TagLabel(ChakraComponent):
         """
         ...
 
-class TagLeftIcon(ChakraComponent):
+class TagLeftIcon(BaseTag):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -175,7 +254,7 @@ class TagLeftIcon(ChakraComponent):
         """
         ...
 
-class TagRightIcon(ChakraComponent):
+class TagRightIcon(BaseTag):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -254,7 +333,7 @@ class TagRightIcon(ChakraComponent):
         """
         ...
 
-class TagCloseButton(ChakraComponent):
+class TagCloseButton(BaseTag):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -333,7 +412,7 @@ class TagCloseButton(ChakraComponent):
         """
         ...
 
-class Tag(ChakraComponent):
+class Tag(BaseTag):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/disclosure/accordion.py

@@ -7,7 +7,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class Accordion(ChakraComponent):
+class BaseAccordion(ChakraComponent):
+    """The base accordion component."""
+
+    library = "@chakra-ui/accordion@2.3.1"
+
+
+class Accordion(BaseAccordion):
     """The wrapper that uses cloneElement to pass props to AccordionItem children."""
 
     tag = "Accordion"
@@ -77,7 +83,7 @@ class Accordion(ChakraComponent):
         return super().create(*children, **props)
 
 
-class AccordionItem(ChakraComponent):
+class AccordionItem(BaseAccordion):
     """A single accordion item."""
 
     tag = "AccordionItem"
@@ -92,19 +98,19 @@ class AccordionItem(ChakraComponent):
     is_focusable: Var[bool]
 
 
-class AccordionButton(ChakraComponent):
+class AccordionButton(BaseAccordion):
     """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"
 
 
-class AccordionPanel(ChakraComponent):
+class AccordionPanel(BaseAccordion):
     """The container for the details to be revealed."""
 
     tag = "AccordionPanel"
 
 
-class AccordionIcon(ChakraComponent):
+class AccordionIcon(BaseAccordion):
     """A chevron-down icon that rotates based on the expanded/collapsed state."""
 
     tag = "AccordionIcon"

reflex/components/chakra/disclosure/accordion.pyi

@@ -12,7 +12,86 @@ from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class Accordion(ChakraComponent):
+class BaseAccordion(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseAccordion":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Accordion(BaseAccordion):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -106,7 +185,7 @@ class Accordion(ChakraComponent):
         """
         ...
 
-class AccordionItem(ChakraComponent):
+class AccordionItem(BaseAccordion):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -191,7 +270,7 @@ class AccordionItem(ChakraComponent):
         """
         ...
 
-class AccordionButton(ChakraComponent):
+class AccordionButton(BaseAccordion):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -270,7 +349,7 @@ class AccordionButton(ChakraComponent):
         """
         ...
 
-class AccordionPanel(ChakraComponent):
+class AccordionPanel(BaseAccordion):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -349,7 +428,7 @@ class AccordionPanel(ChakraComponent):
         """
         ...
 
-class AccordionIcon(ChakraComponent):
+class AccordionIcon(BaseAccordion):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/disclosure/tabs.py

@@ -12,7 +12,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class Tabs(ChakraComponent):
+class BaseTabs(ChakraComponent):
+    """The base tabs component."""
+
+    library = "@chakra-ui/tabs@3.0.0"
+
+
+class Tabs(BaseTabs):
     """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"
@@ -73,7 +79,7 @@ class Tabs(ChakraComponent):
         return super().create(*children, **props)
 
 
-class Tab(ChakraComponent):
+class Tab(BaseTabs):
     """An element that serves as a label for one of the tab panels and can be activated to display that panel.."""
 
     tag = "Tab"
@@ -91,19 +97,19 @@ class Tab(ChakraComponent):
     panel_id: Var[str]
 
 
-class TabList(ChakraComponent):
+class TabList(BaseTabs):
     """Wrapper for the Tab components."""
 
     tag = "TabList"
 
 
-class TabPanels(ChakraComponent):
+class TabPanels(BaseTabs):
     """Wrapper for the Tab components."""
 
     tag = "TabPanels"
 
 
-class TabPanel(ChakraComponent):
+class TabPanel(BaseTabs):
     """An element that contains the content associated with a tab."""
 
     tag = "TabPanel"

reflex/components/chakra/disclosure/tabs.pyi

@@ -17,7 +17,86 @@ from reflex.components.chakra import (
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class Tabs(ChakraComponent):
+class BaseTabs(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseTabs":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Tabs(BaseTabs):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -188,7 +267,7 @@ class Tabs(ChakraComponent):
         """
         ...
 
-class Tab(ChakraComponent):
+class Tab(BaseTabs):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -275,7 +354,7 @@ class Tab(ChakraComponent):
         """
         ...
 
-class TabList(ChakraComponent):
+class TabList(BaseTabs):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -354,7 +433,7 @@ class TabList(ChakraComponent):
         """
         ...
 
-class TabPanels(ChakraComponent):
+class TabPanels(BaseTabs):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -433,7 +512,7 @@ class TabPanels(ChakraComponent):
         """
         ...
 
-class TabPanel(ChakraComponent):
+class TabPanel(BaseTabs):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/disclosure/transition.py

@@ -5,7 +5,13 @@ from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
 
 
-class Transition(ChakraComponent):
+class BaseTransition(ChakraComponent):
+    """Base componemt of all chakra transitions."""
+
+    library = "@chakra-ui/transition@2.1.0"
+
+
+class Transition(BaseTransition):
     """Base componemt of all transitions."""
 
     # Show the component; triggers when enter or exit states
@@ -15,13 +21,13 @@ class Transition(ChakraComponent):
     unmount_on_exit: Var[bool]
 
 
-class Fade(Transition):
+class Fade(BaseTransition):
     """Fade component cab be used show and hide content of your app."""
 
     tag = "Fade"
 
 
-class ScaleFade(Transition):
+class ScaleFade(BaseTransition):
     """Fade component can be scaled and reverse your app."""
 
     tag = "ScaleFade"
@@ -33,7 +39,7 @@ class ScaleFade(Transition):
     reverse: Var[bool]
 
 
-class Slide(Transition):
+class Slide(BaseTransition):
     """Side can be used show content below your app."""
 
     tag = "Slide"
@@ -42,7 +48,7 @@ class Slide(Transition):
     direction: Var[str]
 
 
-class SlideFade(Transition):
+class SlideFade(BaseTransition):
     """SlideFade component."""
 
     tag = "SlideFade"
@@ -57,7 +63,7 @@ class SlideFade(Transition):
     reverse: Var[bool]
 
 
-class Collapse(Transition):
+class Collapse(BaseTransition):
     """Collapse component can collapse some content."""
 
     tag = "Collapse"

reflex/components/chakra/disclosure/transition.pyi

@@ -11,7 +11,86 @@ from typing import Union
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
 
-class Transition(ChakraComponent):
+class BaseTransition(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseTransition":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Transition(BaseTransition):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -94,14 +173,12 @@ class Transition(ChakraComponent):
         """
         ...
 
-class Fade(Transition):
+class Fade(BaseTransition):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -159,8 +236,6 @@ class Fade(Transition):
 
         Args:
             *children: The children of the component.
-            in_: Show the component; triggers when enter or exit states
-            unmount_on_exit: If true, the element will unmount when `in={false}` and animation is done
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -177,7 +252,7 @@ class Fade(Transition):
         """
         ...
 
-class ScaleFade(Transition):
+class ScaleFade(BaseTransition):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -185,8 +260,6 @@ class ScaleFade(Transition):
         *children,
         initial_scale: Optional[Union[Var[float], float]] = None,
         reverse: Optional[Union[Var[bool], bool]] = None,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -246,8 +319,6 @@ class ScaleFade(Transition):
             *children: The children of the component.
             initial_scale: The initial scale of the element
             reverse: If true, the element will transition back to exit state
-            in_: Show the component; triggers when enter or exit states
-            unmount_on_exit: If true, the element will unmount when `in={false}` and animation is done
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -264,15 +335,13 @@ class ScaleFade(Transition):
         """
         ...
 
-class Slide(Transition):
+class Slide(BaseTransition):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
         direction: Optional[Union[Var[str], str]] = None,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -331,8 +400,6 @@ class Slide(Transition):
         Args:
             *children: The children of the component.
             direction: The direction to slide from
-            in_: Show the component; triggers when enter or exit states
-            unmount_on_exit: If true, the element will unmount when `in={false}` and animation is done
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -349,7 +416,7 @@ class Slide(Transition):
         """
         ...
 
-class SlideFade(Transition):
+class SlideFade(BaseTransition):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -358,8 +425,6 @@ class SlideFade(Transition):
         offsetX: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         offsetY: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         reverse: Optional[Union[Var[bool], bool]] = None,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -420,8 +485,6 @@ class SlideFade(Transition):
             offsetX: The offset on the horizontal or x axis
             offsetY: The offset on the vertical or y axis
             reverse: If true, the element will be transitioned back to the offset when it leaves. Otherwise, it'll only fade out
-            in_: Show the component; triggers when enter or exit states
-            unmount_on_exit: If true, the element will unmount when `in={false}` and animation is done
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -438,7 +501,7 @@ class SlideFade(Transition):
         """
         ...
 
-class Collapse(Transition):
+class Collapse(BaseTransition):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -447,8 +510,6 @@ class Collapse(Transition):
         animateOpacity: Optional[Union[Var[bool], bool]] = None,
         endingHeight: Optional[Union[Var[str], str]] = None,
         startingHeight: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        in_: Optional[Union[Var[bool], bool]] = None,
-        unmount_on_exit: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -509,8 +570,6 @@ class Collapse(Transition):
             animateOpacity: If true, the opacity of the content will be animated
             endingHeight: The height you want the content in its expanded state.
             startingHeight: The height you want the content in its collapsed state.
-            in_: Show the component; triggers when enter or exit states
-            unmount_on_exit: If true, the element will unmount when `in={false}` and animation is done
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/chakra/disclosure/visuallyhidden.py

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

reflex/components/chakra/feedback/alert.py

@@ -9,7 +9,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class Alert(ChakraComponent):
+class BaseAlert(ChakraComponent):
+    """The base class for all alert components."""
+
+    library = "@chakra-ui/alert@2.2.2"
+
+
+class Alert(BaseAlert):
     """An alert feedback box."""
 
     tag = "Alert"
@@ -50,19 +56,19 @@ class Alert(ChakraComponent):
         return super().create(*children, **props)
 
 
-class AlertIcon(ChakraComponent):
+class AlertIcon(BaseAlert):
     """An icon displayed in the alert."""
 
     tag = "AlertIcon"
 
 
-class AlertTitle(ChakraComponent):
+class AlertTitle(BaseAlert):
     """The title of the alert."""
 
     tag = "AlertTitle"
 
 
-class AlertDescription(ChakraComponent):
+class AlertDescription(BaseAlert):
     """AlertDescription composes the Box component."""
 
     tag = "AlertDescription"

reflex/components/chakra/feedback/alert.pyi

@@ -11,7 +11,86 @@ from reflex.components.chakra import ChakraComponent, LiteralAlertVariant, Liter
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class Alert(ChakraComponent):
+class BaseAlert(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseAlert":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Alert(BaseAlert):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -107,7 +186,7 @@ class Alert(ChakraComponent):
         """
         ...
 
-class AlertIcon(ChakraComponent):
+class AlertIcon(BaseAlert):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -186,7 +265,7 @@ class AlertIcon(ChakraComponent):
         """
         ...
 
-class AlertTitle(ChakraComponent):
+class AlertTitle(BaseAlert):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -265,7 +344,7 @@ class AlertTitle(ChakraComponent):
         """
         ...
 
-class AlertDescription(ChakraComponent):
+class AlertDescription(BaseAlert):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/feedback/circularprogress.py

@@ -6,7 +6,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class CircularProgress(ChakraComponent):
+class BaseCircularProgress(ChakraComponent):
+    """The base circular progress component."""
+
+    library = "@chakra-ui/progress@2.2.0"
+
+
+class CircularProgress(BaseCircularProgress):
     """The CircularProgress component is used to indicate the progress for determinate and indeterminate processes."""
 
     tag = "CircularProgress"
@@ -61,7 +67,7 @@ class CircularProgress(ChakraComponent):
         return super().create(*children, **props)
 
 
-class CircularProgressLabel(ChakraComponent):
+class CircularProgressLabel(BaseCircularProgress):
     """Label of CircularProcess."""
 
     tag = "CircularProgressLabel"

reflex/components/chakra/feedback/circularprogress.pyi

@@ -12,7 +12,86 @@ from reflex.components.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class CircularProgress(ChakraComponent):
+class BaseCircularProgress(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseCircularProgress":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class CircularProgress(BaseCircularProgress):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -110,7 +189,7 @@ class CircularProgress(ChakraComponent):
         """
         ...
 
-class CircularProgressLabel(ChakraComponent):
+class CircularProgressLabel(BaseCircularProgress):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/feedback/progress.py

@@ -9,6 +9,8 @@ from reflex.vars import Var
 class Progress(ChakraComponent):
     """A bar to display progress."""
 
+    library = "@chakra-ui/progress@2.2.0"
+
     tag = "Progress"
 
     # If true, the progress bar will show stripe

reflex/components/chakra/feedback/skeleton.py

@@ -4,7 +4,13 @@ from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
 
 
-class Skeleton(ChakraComponent):
+class BaseSkeleton(ChakraComponent):
+    """The base skeleton component."""
+
+    library = "@chakra-ui/skeleton@2.1.0"
+
+
+class Skeleton(BaseSkeleton):
     """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"
@@ -25,7 +31,7 @@ class Skeleton(ChakraComponent):
     start_color: Var[str]
 
 
-class SkeletonCircle(ChakraComponent):
+class SkeletonCircle(BaseSkeleton):
     """SkeletonCircle is used to display the loading state of some components."""
 
     tag = "SkeletonCircle"
@@ -46,7 +52,7 @@ class SkeletonCircle(ChakraComponent):
     start_color: Var[str]
 
 
-class SkeletonText(ChakraComponent):
+class SkeletonText(BaseSkeleton):
     """SkeletonText is used to display the loading state of some components."""
 
     tag = "SkeletonText"

reflex/components/chakra/feedback/skeleton.pyi

@@ -10,7 +10,86 @@ from reflex.style import Style
 from reflex.components.chakra import ChakraComponent
 from reflex.vars import Var
 
-class Skeleton(ChakraComponent):
+class BaseSkeleton(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseSkeleton":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Skeleton(BaseSkeleton):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -99,7 +178,7 @@ class Skeleton(ChakraComponent):
         """
         ...
 
-class SkeletonCircle(ChakraComponent):
+class SkeletonCircle(BaseSkeleton):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -188,7 +267,7 @@ class SkeletonCircle(ChakraComponent):
         """
         ...
 
-class SkeletonText(ChakraComponent):
+class SkeletonText(BaseSkeleton):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/feedback/spinner.py

@@ -7,6 +7,8 @@ from reflex.vars import Var
 class Spinner(ChakraComponent):
     """The component that spins."""
 
+    library = "@chakra-ui/spinner@2.1.0"
+
     tag = "Spinner"
 
     # The color of the empty area in the spinner

reflex/components/chakra/forms/button.py

@@ -11,7 +11,13 @@ from reflex.components.chakra import (
 from reflex.vars import Var
 
 
-class Button(ChakraComponent):
+class BaseButton(ChakraComponent):
+    """Base class for all button components."""
+
+    library = "@chakra-ui/button@2.1.0"
+
+
+class Button(BaseButton):
     """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"
@@ -61,7 +67,7 @@ class Button(ChakraComponent):
     name: Var[str]
 
 
-class ButtonGroup(ChakraComponent):
+class ButtonGroup(BaseButton):
     """A group of buttons."""
 
     tag = "ButtonGroup"

reflex/components/chakra/forms/button.pyi

@@ -17,7 +17,86 @@ from reflex.components.chakra import (
 )
 from reflex.vars import Var
 
-class Button(ChakraComponent):
+class BaseButton(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseButton":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Button(BaseButton):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -176,7 +255,7 @@ class Button(ChakraComponent):
         """
         ...
 
-class ButtonGroup(ChakraComponent):
+class ButtonGroup(BaseButton):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/forms/checkbox.py

@@ -12,7 +12,13 @@ from reflex.constants import EventTriggers
 from reflex.vars import Var
 
 
-class Checkbox(ChakraComponent):
+class BaseCheckbox(ChakraComponent):
+    """The base class for all checkbox components."""
+
+    library = "@chakra-ui/checkbox@2.3.2"
+
+
+class Checkbox(BaseCheckbox):
     """The Checkbox component is used in forms when a user needs to select multiple values from several options."""
 
     tag = "Checkbox"
@@ -68,7 +74,7 @@ class Checkbox(ChakraComponent):
         }
 
 
-class CheckboxGroup(ChakraComponent):
+class CheckboxGroup(BaseCheckbox):
     """A group of checkboxes."""
 
     tag = "CheckboxGroup"

reflex/components/chakra/forms/checkbox.pyi

@@ -12,7 +12,86 @@ from reflex.components.chakra import ChakraComponent, LiteralColorScheme, Litera
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-class Checkbox(ChakraComponent):
+class BaseCheckbox(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseCheckbox":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Checkbox(BaseCheckbox):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -168,7 +247,7 @@ class Checkbox(ChakraComponent):
         """
         ...
 
-class CheckboxGroup(ChakraComponent):
+class CheckboxGroup(BaseCheckbox):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/forms/editable.py

@@ -8,7 +8,13 @@ from reflex.constants import EventTriggers
 from reflex.vars import Var
 
 
-class Editable(ChakraComponent):
+class BaseEditable(ChakraComponent):
+    """The base class for all Chakra editable components."""
+
+    library = "@chakra-ui/editable@3.1.0"
+
+
+class Editable(BaseEditable):
     """The wrapper component that provides context value."""
 
     tag = "Editable"
@@ -52,19 +58,19 @@ class Editable(ChakraComponent):
         }
 
 
-class EditableInput(ChakraComponent):
+class EditableInput(BaseEditable):
     """The edit view of the component. It shows when you click or focus on the text."""
 
     tag = "EditableInput"
 
 
-class EditableTextarea(ChakraComponent):
+class EditableTextarea(BaseEditable):
     """Use the textarea element to handle multi line text input in an editable context."""
 
     tag = "EditableTextarea"
 
 
-class EditablePreview(ChakraComponent):
+class EditablePreview(BaseEditable):
     """The read-only view of the component."""
 
     tag = "EditablePreview"

reflex/components/chakra/forms/editable.pyi

@@ -12,7 +12,86 @@ from reflex.components.chakra import ChakraComponent
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-class Editable(ChakraComponent):
+class BaseEditable(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseEditable":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Editable(BaseEditable):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -120,7 +199,7 @@ class Editable(ChakraComponent):
         """
         ...
 
-class EditableInput(ChakraComponent):
+class EditableInput(BaseEditable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -199,7 +278,7 @@ class EditableInput(ChakraComponent):
         """
         ...
 
-class EditableTextarea(ChakraComponent):
+class EditableTextarea(BaseEditable):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -278,7 +357,7 @@ class EditableTextarea(ChakraComponent):
         """
         ...
 
-class EditablePreview(ChakraComponent):
+class EditablePreview(BaseEditable):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/forms/form.py

@@ -7,6 +7,7 @@ from typing import Any, Dict, Iterator
 from jinja2 import Environment
 
 from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.components.component import Component
 from reflex.components.tags import Tag
 from reflex.constants import Dirs, EventTriggers
@@ -33,7 +34,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
 )
 
 
-class Form(ChakraComponent):
+class Form(ChakraLayoutComponent):
     """A form component."""
 
     tag = "Box"

reflex/components/chakra/forms/form.pyi

@@ -11,6 +11,7 @@ from hashlib import md5
 from typing import Any, Dict, Iterator
 from jinja2 import Environment
 from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.components.component import Component
 from reflex.components.tags import Tag
 from reflex.constants import Dirs, EventTriggers
@@ -24,7 +25,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
     "\n    const handleSubmit_{{ handle_submit_unique_name }} = useCallback((ev) => {\n        const $form = ev.target\n        ev.preventDefault()\n        const {{ form_data }} = {...Object.fromEntries(new FormData($form).entries()), ...{{ field_ref_mapping }}}\n\n        {{ on_submit_event_chain }}\n\n        if ({{ reset_on_submit }}) {\n            $form.reset()\n        }\n    })\n    "
 )
 
-class Form(ChakraComponent):
+class Form(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/forms/input.py

@@ -15,7 +15,13 @@ from reflex.utils import imports
 from reflex.vars import Var
 
 
-class Input(ChakraComponent):
+class BaseInput(ChakraComponent):
+    """The base class for all Chakra input components."""
+
+    library = "@chakra-ui/input@2.1.2"
+
+
+class Input(BaseInput):
     """The Input component is a component that is used to get user input in a text field."""
 
     tag = "Input"
@@ -103,7 +109,7 @@ class Input(ChakraComponent):
         return super().create(*children, **props)
 
 
-class InputGroup(ChakraComponent):
+class InputGroup(BaseInput):
     """The InputGroup component is a component that is used to group a set of inputs."""
 
     tag = "InputGroup"
@@ -111,25 +117,25 @@ class InputGroup(ChakraComponent):
     _memoization_mode = MemoizationMode(recursive=False)
 
 
-class InputLeftAddon(ChakraComponent):
+class InputLeftAddon(BaseInput):
     """The InputLeftAddon component is a component that is used to add an addon to the left of an input."""
 
     tag = "InputLeftAddon"
 
 
-class InputRightAddon(ChakraComponent):
+class InputRightAddon(BaseInput):
     """The InputRightAddon component is a component that is used to add an addon to the right of an input."""
 
     tag = "InputRightAddon"
 
 
-class InputLeftElement(ChakraComponent):
+class InputLeftElement(BaseInput):
     """The InputLeftElement component is a component that is used to add an element to the left of an input."""
 
     tag = "InputLeftElement"
 
 
-class InputRightElement(ChakraComponent):
+class InputRightElement(BaseInput):
     """The InputRightElement component is a component that is used to add an element to the right of an input."""
 
     tag = "InputRightElement"

reflex/components/chakra/forms/input.pyi

@@ -20,7 +20,86 @@ from reflex.constants import EventTriggers, MemoizationMode
 from reflex.utils import imports
 from reflex.vars import Var
 
-class Input(ChakraComponent):
+class BaseInput(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseInput":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Input(BaseInput):
     def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
@@ -192,7 +271,7 @@ class Input(ChakraComponent):
         """
         ...
 
-class InputGroup(ChakraComponent):
+class InputGroup(BaseInput):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -271,7 +350,7 @@ class InputGroup(ChakraComponent):
         """
         ...
 
-class InputLeftAddon(ChakraComponent):
+class InputLeftAddon(BaseInput):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -350,7 +429,7 @@ class InputLeftAddon(ChakraComponent):
         """
         ...
 
-class InputRightAddon(ChakraComponent):
+class InputRightAddon(BaseInput):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -429,7 +508,7 @@ class InputRightAddon(ChakraComponent):
         """
         ...
 
-class InputLeftElement(ChakraComponent):
+class InputLeftElement(BaseInput):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -508,7 +587,7 @@ class InputLeftElement(ChakraComponent):
         """
         ...
 
-class InputRightElement(ChakraComponent):
+class InputRightElement(BaseInput):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/forms/numberinput.py

@@ -13,7 +13,13 @@ from reflex.constants import EventTriggers
 from reflex.vars import Var
 
 
-class NumberInput(ChakraComponent):
+class BaseNumberInput(ChakraComponent):
+    """Base number input component."""
+
+    library = "@chakra-ui/number-input@2.1.2"
+
+
+class NumberInput(BaseNumberInput):
     """The wrapper that provides context and logic to the components."""
 
     tag = "NumberInput"
@@ -113,25 +119,25 @@ class NumberInput(ChakraComponent):
         return super().create(*children, **props)
 
 
-class NumberInputField(ChakraComponent):
+class NumberInputField(BaseNumberInput):
     """The input field itself."""
 
     tag = "NumberInputField"
 
 
-class NumberInputStepper(ChakraComponent):
+class NumberInputStepper(BaseNumberInput):
     """The wrapper for the input's stepper buttons."""
 
     tag = "NumberInputStepper"
 
 
-class NumberIncrementStepper(ChakraComponent):
+class NumberIncrementStepper(BaseNumberInput):
     """The button to increment the value of the input."""
 
     tag = "NumberIncrementStepper"
 
 
-class NumberDecrementStepper(ChakraComponent):
+class NumberDecrementStepper(BaseNumberInput):
     """The button to decrement the value of the input."""
 
     tag = "NumberDecrementStepper"

reflex/components/chakra/forms/numberinput.pyi

@@ -18,7 +18,86 @@ from reflex.components.component import Component
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-class NumberInput(ChakraComponent):
+class BaseNumberInput(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseNumberInput":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class NumberInput(BaseNumberInput):
     def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
@@ -143,7 +222,7 @@ class NumberInput(ChakraComponent):
         """
         ...
 
-class NumberInputField(ChakraComponent):
+class NumberInputField(BaseNumberInput):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -222,7 +301,7 @@ class NumberInputField(ChakraComponent):
         """
         ...
 
-class NumberInputStepper(ChakraComponent):
+class NumberInputStepper(BaseNumberInput):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -301,7 +380,7 @@ class NumberInputStepper(ChakraComponent):
         """
         ...
 
-class NumberIncrementStepper(ChakraComponent):
+class NumberIncrementStepper(BaseNumberInput):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -380,7 +459,7 @@ class NumberIncrementStepper(ChakraComponent):
         """
         ...
 
-class NumberDecrementStepper(ChakraComponent):
+class NumberDecrementStepper(BaseNumberInput):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/forms/pininput.py

@@ -12,7 +12,13 @@ from reflex.utils.imports import ImportDict, merge_imports
 from reflex.vars import Var
 
 
-class PinInput(ChakraComponent):
+class BasePinInput(ChakraComponent):
+    """The base chakra pin input component."""
+
+    library = "@chakra-ui/pin-input@2.1.0"
+
+
+class PinInput(BasePinInput):
     """The component that provides context to all the pin-input fields."""
 
     tag = "PinInput"
@@ -161,7 +167,7 @@ class PinInput(ChakraComponent):
         return super().create(*children, **props)
 
 
-class PinInputField(ChakraComponent):
+class PinInputField(BasePinInput):
     """The text field that user types in - must be a direct child of PinInput."""
 
     tag = "PinInputField"

reflex/components/chakra/forms/pininput.pyi

@@ -16,7 +16,86 @@ from reflex.utils import format
 from reflex.utils.imports import ImportDict, merge_imports
 from reflex.vars import Var
 
-class PinInput(ChakraComponent):
+class BasePinInput(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BasePinInput":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class PinInput(BasePinInput):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     def get_ref(self) -> str | None: ...
     @overload
@@ -138,7 +217,7 @@ class PinInput(ChakraComponent):
         """
         ...
 
-class PinInputField(ChakraComponent):
+class PinInputField(BasePinInput):
     @classmethod
     def for_length(cls, length: Var | int, **props) -> Var: ...
     def get_ref(self): ...

reflex/components/chakra/forms/radio.py

@@ -15,6 +15,8 @@ from reflex.vars import Var
 class RadioGroup(ChakraComponent):
     """A grouping of individual radio options."""
 
+    library = "@chakra-ui/radio@2.1.2"
+
     tag = "RadioGroup"
 
     # State var to bind the the input.
@@ -62,6 +64,8 @@ class RadioGroup(ChakraComponent):
 class Radio(Text):
     """Radios are used when only one choice may be selected in a series of options."""
 
+    library = "@chakra-ui/radio@2.1.2"
+
     tag = "Radio"
 
     # Value of radio.

reflex/components/chakra/forms/rangeslider.py

@@ -10,7 +10,13 @@ from reflex.utils import format
 from reflex.vars import Var
 
 
-class RangeSlider(ChakraComponent):
+class BaseRangeSlider(ChakraComponent):
+    """Base componemt of all chakra range sliders."""
+
+    library = "@chakra-ui/slider@2.1.0"
+
+
+class RangeSlider(BaseRangeSlider):
     """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"
@@ -118,19 +124,19 @@ class RangeSlider(ChakraComponent):
         return super().create(*children, **props)
 
 
-class RangeSliderTrack(ChakraComponent):
+class RangeSliderTrack(BaseRangeSlider):
     """A range slider track."""
 
     tag = "RangeSliderTrack"
 
 
-class RangeSliderFilledTrack(ChakraComponent):
+class RangeSliderFilledTrack(BaseRangeSlider):
     """A filled range slider track."""
 
     tag = "RangeSliderFilledTrack"
 
 
-class RangeSliderThumb(ChakraComponent):
+class RangeSliderThumb(BaseRangeSlider):
     """A range slider thumb."""
 
     tag = "RangeSliderThumb"

reflex/components/chakra/forms/rangeslider.pyi

@@ -14,7 +14,86 @@ from reflex.constants import EventTriggers
 from reflex.utils import format
 from reflex.vars import Var
 
-class RangeSlider(ChakraComponent):
+class BaseRangeSlider(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseRangeSlider":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class RangeSlider(BaseRangeSlider):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     def get_ref(self): ...
     @overload
@@ -127,7 +206,7 @@ class RangeSlider(ChakraComponent):
         """
         ...
 
-class RangeSliderTrack(ChakraComponent):
+class RangeSliderTrack(BaseRangeSlider):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -206,7 +285,7 @@ class RangeSliderTrack(ChakraComponent):
         """
         ...
 
-class RangeSliderFilledTrack(ChakraComponent):
+class RangeSliderFilledTrack(BaseRangeSlider):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -285,7 +364,7 @@ class RangeSliderFilledTrack(ChakraComponent):
         """
         ...
 
-class RangeSliderThumb(ChakraComponent):
+class RangeSliderThumb(BaseRangeSlider):
     def get_ref(self): ...
     @overload
     @classmethod

reflex/components/chakra/forms/select.py

@@ -14,6 +14,8 @@ 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."""
 
+    library = "@chakra-ui/select@2.1.2"
+
     tag = "Select"
 
     # State var to bind the select.

reflex/components/chakra/forms/slider.py

@@ -11,7 +11,13 @@ from reflex.vars import Var
 LiteralLayout = Literal["horizontal", "vertical"]
 
 
-class Slider(ChakraComponent):
+class BaseSlider(ChakraComponent):
+    """Base componemt of all chakra sliders."""
+
+    library = "@chakra-ui/slider@2.1.0"
+
+
+class Slider(BaseSlider):
     """The wrapper that provides context and functionality for all children."""
 
     tag = "Slider"
@@ -106,19 +112,19 @@ class Slider(ChakraComponent):
         return super().create(*children, **props)
 
 
-class SliderTrack(ChakraComponent):
+class SliderTrack(BaseSlider):
     """The empty part of the slider that shows the track."""
 
     tag = "SliderTrack"
 
 
-class SliderFilledTrack(ChakraComponent):
+class SliderFilledTrack(BaseSlider):
     """The filled part of the slider."""
 
     tag = "SliderFilledTrack"
 
 
-class SliderThumb(ChakraComponent):
+class SliderThumb(BaseSlider):
     """The handle that's used to change the slider value."""
 
     tag = "SliderThumb"
@@ -127,7 +133,7 @@ class SliderThumb(ChakraComponent):
     box_size: Var[str]
 
 
-class SliderMark(ChakraComponent):
+class SliderMark(BaseSlider):
     """The label or mark that shows names for specific slider values."""
 
     tag = "SliderMark"

reflex/components/chakra/forms/slider.pyi

@@ -15,7 +15,86 @@ from reflex.vars import Var
 
 LiteralLayout = Literal["horizontal", "vertical"]
 
-class Slider(ChakraComponent):
+class BaseSlider(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseSlider":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Slider(BaseSlider):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -146,7 +225,7 @@ class Slider(ChakraComponent):
         """
         ...
 
-class SliderTrack(ChakraComponent):
+class SliderTrack(BaseSlider):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -225,7 +304,7 @@ class SliderTrack(ChakraComponent):
         """
         ...
 
-class SliderFilledTrack(ChakraComponent):
+class SliderFilledTrack(BaseSlider):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -304,7 +383,7 @@ class SliderFilledTrack(ChakraComponent):
         """
         ...
 
-class SliderThumb(ChakraComponent):
+class SliderThumb(BaseSlider):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -385,7 +464,7 @@ class SliderThumb(ChakraComponent):
         """
         ...
 
-class SliderMark(ChakraComponent):
+class SliderMark(BaseSlider):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/forms/switch.py

@@ -11,6 +11,8 @@ from reflex.vars import Var
 class Switch(ChakraComponent):
     """Toggleable switch component."""
 
+    library = "@chakra-ui/switch@2.1.2"
+
     tag = "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)

reflex/components/chakra/forms/textarea.py

@@ -13,6 +13,8 @@ from reflex.vars import Var
 class TextArea(ChakraComponent):
     """A text area component."""
 
+    library = "@chakra-ui/textarea@2.1.2"
+
     tag = "Textarea"
 
     # State var to bind the input.

reflex/components/chakra/layout/aspect_ratio.py

@@ -1,10 +1,10 @@
 """A AspectRatio component."""
 
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
 
-class AspectRatio(ChakraComponent):
+class AspectRatio(ChakraLayoutComponent):
     """AspectRatio component is used to embed responsive videos and maps, etc."""
 
     tag = "AspectRatio"

reflex/components/chakra/layout/aspect_ratio.pyi

@@ -7,10 +7,10 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
-class AspectRatio(ChakraComponent):
+class AspectRatio(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/base.py

@@ -0,0 +1,9 @@
+"""The base class for all Chakra layout components."""
+
+from reflex.components.chakra import ChakraComponent
+
+
+class ChakraLayoutComponent(ChakraComponent):
+    """A component that wraps a Chakra component."""
+
+    library = "@chakra-ui/layout@2.3.1"

reflex/components/chakra/layout/base.pyi

@@ -0,0 +1,89 @@
+"""Stub file for reflex/components/chakra/layout/base.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from reflex.components.chakra import ChakraComponent
+
+class ChakraLayoutComponent(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ChakraLayoutComponent":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...

reflex/components/chakra/layout/box.py

@@ -1,11 +1,12 @@
 """A box component that can contain other components."""
 
-from reflex.components.chakra import ChakraComponent
+
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.components.tags import Tag
 from reflex.vars import Var
 
 
-class Box(ChakraComponent):
+class Box(ChakraLayoutComponent):
     """A generic container component that can contain other components."""
 
     tag = "Box"

reflex/components/chakra/layout/box.pyi

@@ -7,11 +7,11 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.components.tags import Tag
 from reflex.vars import Var
 
-class Box(ChakraComponent):
+class Box(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/card.py

@@ -12,25 +12,31 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class CardHeader(ChakraComponent):
+class BaseCard(ChakraComponent):
+    """The base class for all Chakra Card components."""
+
+    library = "@chakra-ui/card@2.2.0"
+
+
+class CardHeader(BaseCard):
     """The wrapper that contains a card's header."""
 
     tag = "CardHeader"
 
 
-class CardBody(ChakraComponent):
+class CardBody(BaseCard):
     """The wrapper that houses the card's main content."""
 
     tag = "CardBody"
 
 
-class CardFooter(ChakraComponent):
+class CardFooter(BaseCard):
     """The footer that houses the card actions."""
 
     tag = "CardFooter"
 
 
-class Card(ChakraComponent):
+class Card(BaseCard):
     """The parent wrapper that provides context for its children."""
 
     tag = "Card"

reflex/components/chakra/layout/card.pyi

@@ -17,7 +17,86 @@ from reflex.components.chakra import (
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class CardHeader(ChakraComponent):
+class BaseCard(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseCard":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class CardHeader(BaseCard):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -96,7 +175,7 @@ class CardHeader(ChakraComponent):
         """
         ...
 
-class CardBody(ChakraComponent):
+class CardBody(BaseCard):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -175,7 +254,7 @@ class CardBody(ChakraComponent):
         """
         ...
 
-class CardFooter(ChakraComponent):
+class CardFooter(BaseCard):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -254,7 +333,7 @@ class CardFooter(ChakraComponent):
         """
         ...
 
-class Card(ChakraComponent):
+class Card(BaseCard):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/center.py

@@ -1,21 +1,21 @@
 """A box that centers its contents."""
 
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 
 
-class Center(ChakraComponent):
+class Center(ChakraLayoutComponent):
     """A box that centers its contents."""
 
     tag = "Center"
 
 
-class Square(ChakraComponent):
+class Square(ChakraLayoutComponent):
     """A centered square container."""
 
     tag = "Square"
 
 
-class Circle(ChakraComponent):
+class Circle(ChakraLayoutComponent):
     """A square container with round border-radius."""
 
     tag = "Circle"

reflex/components/chakra/layout/center.pyi

@@ -7,9 +7,9 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 
-class Center(ChakraComponent):
+class Center(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -88,7 +88,7 @@ class Center(ChakraComponent):
         """
         ...
 
-class Square(ChakraComponent):
+class Square(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -167,7 +167,7 @@ class Square(ChakraComponent):
         """
         ...
 
-class Circle(ChakraComponent):
+class Circle(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/container.py

@@ -1,10 +1,11 @@
 """A flexbox container."""
 
-from reflex.components.chakra import ChakraComponent
+
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
 
-class Container(ChakraComponent):
+class Container(ChakraLayoutComponent):
     """A flexbox container that centers its children and sets a max width."""
 
     tag = "Container"

reflex/components/chakra/layout/container.pyi

@@ -7,10 +7,10 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
-class Container(ChakraComponent):
+class Container(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/flex.py

@@ -2,11 +2,11 @@
 
 from typing import List, Union
 
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
 
-class Flex(ChakraComponent):
+class Flex(ChakraLayoutComponent):
     """A reflexive container component."""
 
     tag = "Flex"

reflex/components/chakra/layout/flex.pyi

@@ -8,10 +8,10 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import List, Union
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
-class Flex(ChakraComponent):
+class Flex(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/grid.py

@@ -2,11 +2,11 @@
 
 from typing import List
 
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
 
-class Grid(ChakraComponent):
+class Grid(ChakraLayoutComponent):
     """A grid component."""
 
     tag = "Grid"
@@ -41,7 +41,7 @@ class Grid(ChakraComponent):
     template_rows: Var[str]
 
 
-class GridItem(ChakraComponent):
+class GridItem(ChakraLayoutComponent):
     """Used as a child of Grid to control the span, and start positions within the grid."""
 
     tag = "GridItem"
@@ -71,7 +71,7 @@ class GridItem(ChakraComponent):
     row_span: Var[int]
 
 
-class ResponsiveGrid(ChakraComponent):
+class ResponsiveGrid(ChakraLayoutComponent):
     """A responsive grid component."""
 
     tag = "SimpleGrid"

reflex/components/chakra/layout/grid.pyi

@@ -8,10 +8,10 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import List
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
-class Grid(ChakraComponent):
+class Grid(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -104,7 +104,7 @@ class Grid(ChakraComponent):
         """
         ...
 
-class GridItem(ChakraComponent):
+class GridItem(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -197,7 +197,7 @@ class GridItem(ChakraComponent):
         """
         ...
 
-class ResponsiveGrid(ChakraComponent):
+class ResponsiveGrid(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/spacer.py

@@ -1,9 +1,10 @@
 """A flexible space component."""
 
-from reflex.components.chakra import ChakraComponent
 
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 
-class Spacer(ChakraComponent):
+
+class Spacer(ChakraLayoutComponent):
     """A flexible space component."""
 
     tag = "Spacer"

reflex/components/chakra/layout/spacer.pyi

@@ -7,9 +7,9 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 
-class Spacer(ChakraComponent):
+class Spacer(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/stack.py

@@ -2,11 +2,12 @@
 
 from typing import List, Union
 
-from reflex.components.chakra import ChakraComponent, LiteralStackDirection
+from reflex.components.chakra import LiteralStackDirection
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
 
-class Stack(ChakraComponent):
+class Stack(ChakraLayoutComponent):
     """Container to stack elements with spacing."""
 
     tag = "Stack"

reflex/components/chakra/layout/stack.pyi

@@ -8,10 +8,11 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import List, Union
-from reflex.components.chakra import ChakraComponent, LiteralStackDirection
+from reflex.components.chakra import LiteralStackDirection
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.vars import Var
 
-class Stack(ChakraComponent):
+class Stack(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/layout/wrap.py

@@ -1,11 +1,11 @@
 """Container to stack elements with spacing."""
 
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class Wrap(ChakraComponent):
+class Wrap(ChakraLayoutComponent):
     """Layout component used to add space between elements and wrap automatically if there isn't enough space."""
 
     tag = "Wrap"
@@ -51,7 +51,7 @@ class Wrap(ChakraComponent):
         return super().create(*children, **props)
 
 
-class WrapItem(ChakraComponent):
+class WrapItem(ChakraLayoutComponent):
     """Item of the Wrap component."""
 
     tag = "WrapItem"

reflex/components/chakra/layout/wrap.pyi

@@ -7,11 +7,11 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from reflex.components.chakra import ChakraComponent
+from reflex.components.chakra.layout.base import ChakraLayoutComponent
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class Wrap(ChakraComponent):
+class Wrap(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -103,7 +103,7 @@ class Wrap(ChakraComponent):
         """
         ...
 
-class WrapItem(ChakraComponent):
+class WrapItem(ChakraLayoutComponent):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/media/avatar.py

@@ -7,7 +7,13 @@ from reflex.components.chakra import ChakraComponent, LiteralAvatarSize
 from reflex.vars import Var
 
 
-class Avatar(ChakraComponent):
+class BaseAvatar(ChakraComponent):
+    """Base avatar component."""
+
+    library = "@chakra-ui/avatar@2.1.0"
+
+
+class Avatar(BaseAvatar):
     """The image that represents the user."""
 
     tag = "Avatar"
@@ -48,13 +54,13 @@ class Avatar(ChakraComponent):
         }
 
 
-class AvatarBadge(ChakraComponent):
+class AvatarBadge(BaseAvatar):
     """A wrapper that displays its content on the right corner of the avatar."""
 
     tag = "AvatarBadge"
 
 
-class AvatarGroup(ChakraComponent):
+class AvatarGroup(BaseAvatar):
     """A wrapper to stack multiple Avatars together."""
 
     tag = "AvatarGroup"

reflex/components/chakra/media/avatar.pyi

@@ -11,7 +11,86 @@ from typing import Any, Union
 from reflex.components.chakra import ChakraComponent, LiteralAvatarSize
 from reflex.vars import Var
 
-class Avatar(ChakraComponent):
+class BaseAvatar(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseAvatar":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Avatar(BaseAvatar):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -115,7 +194,7 @@ class Avatar(ChakraComponent):
         """
         ...
 
-class AvatarBadge(ChakraComponent):
+class AvatarBadge(BaseAvatar):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -194,7 +273,7 @@ class AvatarBadge(ChakraComponent):
         """
         ...
 
-class AvatarGroup(ChakraComponent):
+class AvatarGroup(BaseAvatar):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/media/image.py

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

reflex/components/chakra/navigation/breadcrumb.py

@@ -7,7 +7,13 @@ from reflex.components.core.foreach import Foreach
 from reflex.vars import Var
 
 
-class Breadcrumb(ChakraComponent):
+class BaseBreadcrumb(ChakraComponent):
+    """The base class for all Chakra breadcrumb components."""
+
+    library = "@chakra-ui/breadcrumb@2.2.0"
+
+
+class Breadcrumb(BaseBreadcrumb):
     """The parent container for breadcrumbs."""
 
     tag = "Breadcrumb"
@@ -48,7 +54,7 @@ class Breadcrumb(ChakraComponent):
         return super().create(*children, **props)
 
 
-class BreadcrumbItem(ChakraComponent):
+class BreadcrumbItem(BaseBreadcrumb):
     """Individual breadcrumb element containing a link and a divider."""
 
     tag = "BreadcrumbItem"
@@ -83,7 +89,7 @@ class BreadcrumbItem(ChakraComponent):
         return super().create(*children, **props)
 
 
-class BreadcrumbSeparator(ChakraComponent):
+class BreadcrumbSeparator(BaseBreadcrumb):
     """The visual separator between each breadcrumb."""
 
     tag = "BreadcrumbSeparator"
@@ -94,5 +100,7 @@ class BreadcrumbLink(Link):
 
     tag = "BreadcrumbLink"
 
+    library = "@chakra-ui/breadcrumb@2.2.0"
+
     # Is the current page of the breadcrumb.
     is_current_page: Var[bool]

reflex/components/chakra/navigation/breadcrumb.pyi

@@ -13,7 +13,86 @@ from reflex.components.component import Component
 from reflex.components.core.foreach import Foreach
 from reflex.vars import Var
 
-class Breadcrumb(ChakraComponent):
+class BaseBreadcrumb(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseBreadcrumb":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Breadcrumb(BaseBreadcrumb):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -97,7 +176,7 @@ class Breadcrumb(ChakraComponent):
         """
         ...
 
-class BreadcrumbItem(ChakraComponent):
+class BreadcrumbItem(BaseBreadcrumb):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -185,7 +264,7 @@ class BreadcrumbItem(ChakraComponent):
         """
         ...
 
-class BreadcrumbSeparator(ChakraComponent):
+class BreadcrumbSeparator(BaseBreadcrumb):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/navigation/stepper.py

@@ -7,7 +7,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class Stepper(ChakraComponent):
+class BaseStepper(ChakraComponent):
+    """The base class for all Chakra stepper components."""
+
+    library = "@chakra-ui/stepper@2.3.1"
+
+
+class Stepper(BaseStepper):
     """The parent container for a stepper."""
 
     tag = "Stepper"
@@ -55,43 +61,43 @@ class Stepper(ChakraComponent):
         return super().create(*children, **props)
 
 
-class Step(ChakraComponent):
+class Step(BaseStepper):
     """A component for an individual step in the stepper."""
 
     tag = "Step"
 
 
-class StepDescription(ChakraComponent):
+class StepDescription(BaseStepper):
     """The description text for a step component."""
 
     tag = "StepDescription"
 
 
-class StepIcon(ChakraComponent):
+class StepIcon(BaseStepper):
     """The icon displayed in a step indicator component."""
 
     tag = "StepIcon"
 
 
-class StepIndicator(ChakraComponent):
+class StepIndicator(BaseStepper):
     """The component displaying the status of a step."""
 
     tag = "StepIndicator"
 
 
-class StepNumber(ChakraComponent):
+class StepNumber(BaseStepper):
     """The number of a step displayed in a step indicator component."""
 
     tag = "StepNumber"
 
 
-class StepSeparator(ChakraComponent):
+class StepSeparator(BaseStepper):
     """The component separting steps."""
 
     tag = "StepSeparator"
 
 
-class StepStatus(ChakraComponent):
+class StepStatus(BaseStepper):
     """A component that displays a number or icon based on the status of a step."""
 
     # [not working yet]
@@ -107,7 +113,7 @@ class StepStatus(ChakraComponent):
     tag = "StepStatus"
 
 
-class StepTitle(ChakraComponent):
+class StepTitle(BaseStepper):
     """The title text for a step component."""
 
     tag = "StepTitle"

reflex/components/chakra/navigation/stepper.pyi

@@ -12,7 +12,86 @@ from reflex.components.chakra import ChakraComponent, LiteralColorScheme
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class Stepper(ChakraComponent):
+class BaseStepper(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseStepper":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Stepper(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -151,7 +230,7 @@ class Stepper(ChakraComponent):
         """
         ...
 
-class Step(ChakraComponent):
+class Step(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -230,7 +309,7 @@ class Step(ChakraComponent):
         """
         ...
 
-class StepDescription(ChakraComponent):
+class StepDescription(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -309,7 +388,7 @@ class StepDescription(ChakraComponent):
         """
         ...
 
-class StepIcon(ChakraComponent):
+class StepIcon(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -388,7 +467,7 @@ class StepIcon(ChakraComponent):
         """
         ...
 
-class StepIndicator(ChakraComponent):
+class StepIndicator(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -467,7 +546,7 @@ class StepIndicator(ChakraComponent):
         """
         ...
 
-class StepNumber(ChakraComponent):
+class StepNumber(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -546,7 +625,7 @@ class StepNumber(ChakraComponent):
         """
         ...
 
-class StepSeparator(ChakraComponent):
+class StepSeparator(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -625,7 +704,7 @@ class StepSeparator(ChakraComponent):
         """
         ...
 
-class StepStatus(ChakraComponent):
+class StepStatus(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -708,7 +787,7 @@ class StepStatus(ChakraComponent):
         """
         ...
 
-class StepTitle(ChakraComponent):
+class StepTitle(BaseStepper):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/overlay/alertdialog.py

@@ -9,7 +9,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class AlertDialog(ChakraComponent):
+class BaseAlertDialog(ChakraComponent):
+    """The base class for all alert dialog components."""
+
+    library = "@chakra-ui/modal@2.3.1"
+
+
+class AlertDialog(BaseAlertDialog):
     """Provides context and state for the dialog."""
 
     tag = "AlertDialog"
@@ -119,37 +125,37 @@ class AlertDialog(ChakraComponent):
         return super().create(*children, **props)
 
 
-class AlertDialogBody(ChakraComponent):
+class AlertDialogBody(BaseAlertDialog):
     """Should contain the description announced by screen readers."""
 
     tag = "AlertDialogBody"
 
 
-class AlertDialogHeader(ChakraComponent):
+class AlertDialogHeader(BaseAlertDialog):
     """Should contain the title announced by screen readers."""
 
     tag = "AlertDialogHeader"
 
 
-class AlertDialogFooter(ChakraComponent):
+class AlertDialogFooter(BaseAlertDialog):
     """Should contain the events of the dialog."""
 
     tag = "AlertDialogFooter"
 
 
-class AlertDialogContent(ChakraComponent):
+class AlertDialogContent(BaseAlertDialog):
     """The wrapper for the alert dialog's content."""
 
     tag = "AlertDialogContent"
 
 
-class AlertDialogOverlay(ChakraComponent):
+class AlertDialogOverlay(BaseAlertDialog):
     """The dimmed overlay behind the dialog."""
 
     tag = "AlertDialogOverlay"
 
 
-class AlertDialogCloseButton(ChakraComponent):
+class AlertDialogCloseButton(BaseAlertDialog):
     """The button that closes the dialog."""
 
     tag = "AlertDialogCloseButton"

reflex/components/chakra/overlay/alertdialog.pyi

@@ -13,7 +13,86 @@ from reflex.components.chakra.media.icon import Icon
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class AlertDialog(ChakraComponent):
+class BaseAlertDialog(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseAlertDialog":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class AlertDialog(BaseAlertDialog):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -159,7 +238,7 @@ class AlertDialog(ChakraComponent):
         """
         ...
 
-class AlertDialogBody(ChakraComponent):
+class AlertDialogBody(BaseAlertDialog):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -238,7 +317,7 @@ class AlertDialogBody(ChakraComponent):
         """
         ...
 
-class AlertDialogHeader(ChakraComponent):
+class AlertDialogHeader(BaseAlertDialog):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -317,7 +396,7 @@ class AlertDialogHeader(ChakraComponent):
         """
         ...
 
-class AlertDialogFooter(ChakraComponent):
+class AlertDialogFooter(BaseAlertDialog):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -396,7 +475,7 @@ class AlertDialogFooter(ChakraComponent):
         """
         ...
 
-class AlertDialogContent(ChakraComponent):
+class AlertDialogContent(BaseAlertDialog):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -475,7 +554,7 @@ class AlertDialogContent(ChakraComponent):
         """
         ...
 
-class AlertDialogOverlay(ChakraComponent):
+class AlertDialogOverlay(BaseAlertDialog):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -554,7 +633,7 @@ class AlertDialogOverlay(ChakraComponent):
         """
         ...
 
-class AlertDialogCloseButton(ChakraComponent):
+class AlertDialogCloseButton(BaseAlertDialog):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/overlay/menu.py

@@ -14,7 +14,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class Menu(ChakraComponent):
+class BaseMenu(ChakraComponent):
+    """The base class for all Chakra menu components."""
+
+    library = "@chakra-ui/menu@2.2.1"
+
+
+class Menu(BaseMenu):
     """The wrapper component provides context, state, and focus management."""
 
     tag = "Menu"
@@ -112,7 +118,7 @@ class Menu(ChakraComponent):
         return super().create(*children, **props)
 
 
-class MenuButton(ChakraComponent):
+class MenuButton(BaseMenu):
     """The trigger for the menu list. Must be a direct child of Menu."""
 
     tag = "MenuButton"
@@ -127,7 +133,7 @@ class MenuButton(ChakraComponent):
     as_: Var[str]
 
 
-class MenuList(ChakraComponent):
+class MenuList(BaseMenu):
     """The wrapper for the menu items. Must be a direct child of Menu."""
 
     tag = "MenuList"
@@ -154,7 +160,7 @@ class MenuList(ChakraComponent):
         return super().create(*children, **props)
 
 
-class MenuItem(ChakraComponent):
+class MenuItem(BaseMenu):
     """The trigger that handles menu selection. Must be a direct child of a MenuList."""
 
     tag = "MenuItem"
@@ -175,7 +181,7 @@ class MenuItem(ChakraComponent):
     is_focusable: Var[bool]
 
 
-class MenuItemOption(ChakraComponent):
+class MenuItemOption(BaseMenu):
     """The checkable menu item, to be used with MenuOptionGroup."""
 
     tag = "MenuItemOption"
@@ -205,13 +211,13 @@ class MenuItemOption(ChakraComponent):
     value: Var[str]
 
 
-class MenuGroup(ChakraComponent):
+class MenuGroup(BaseMenu):
     """A wrapper to group related menu items."""
 
     tag = "MenuGroup"
 
 
-class MenuOptionGroup(ChakraComponent):
+class MenuOptionGroup(BaseMenu):
     """A wrapper for checkable menu items (radio and checkbox)."""
 
     tag = "MenuOptionGroup"
@@ -223,7 +229,7 @@ class MenuOptionGroup(ChakraComponent):
     value: Var[str]
 
 
-class MenuDivider(ChakraComponent):
+class MenuDivider(BaseMenu):
     """A visual separator for menu items and groups."""
 
     tag = "MenuDivider"

reflex/components/chakra/overlay/menu.pyi

@@ -18,7 +18,86 @@ from reflex.components.chakra.forms.button import Button
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class Menu(ChakraComponent):
+class BaseMenu(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseMenu":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Menu(BaseMenu):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -141,7 +220,7 @@ class Menu(ChakraComponent):
         """
         ...
 
-class MenuButton(ChakraComponent):
+class MenuButton(BaseMenu):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -224,7 +303,7 @@ class MenuButton(ChakraComponent):
         """
         ...
 
-class MenuList(ChakraComponent):
+class MenuList(BaseMenu):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -302,7 +381,7 @@ class MenuList(ChakraComponent):
         """
         ...
 
-class MenuItem(ChakraComponent):
+class MenuItem(BaseMenu):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -391,7 +470,7 @@ class MenuItem(ChakraComponent):
         """
         ...
 
-class MenuItemOption(ChakraComponent):
+class MenuItemOption(BaseMenu):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -488,7 +567,7 @@ class MenuItemOption(ChakraComponent):
         """
         ...
 
-class MenuGroup(ChakraComponent):
+class MenuGroup(BaseMenu):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -567,7 +646,7 @@ class MenuGroup(ChakraComponent):
         """
         ...
 
-class MenuOptionGroup(ChakraComponent):
+class MenuOptionGroup(BaseMenu):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -652,7 +731,7 @@ class MenuOptionGroup(ChakraComponent):
         """
         ...
 
-class MenuDivider(ChakraComponent):
+class MenuDivider(BaseMenu):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/overlay/modal.py

@@ -11,7 +11,13 @@ from reflex.vars import Var
 ModalSizes = Literal["xs", "sm", "md", "lg", "xl", "full"]
 
 
-class Modal(ChakraComponent):
+class BaseModal(ChakraComponent):
+    """The base class for all Chakra modal components."""
+
+    library = "@chakra-ui/modal@2.3.1"
+
+
+class Modal(BaseModal):
     """The wrapper that provides context for its children."""
 
     tag = "Modal"
@@ -130,37 +136,37 @@ class Modal(ChakraComponent):
         return super().create(*children, **props)
 
 
-class ModalOverlay(ChakraComponent):
+class ModalOverlay(BaseModal):
     """The dimmed overlay behind the modal dialog."""
 
     tag = "ModalOverlay"
 
 
-class ModalHeader(ChakraComponent):
+class ModalHeader(BaseModal):
     """The header that labels the modal dialog."""
 
     tag = "ModalHeader"
 
 
-class ModalFooter(ChakraComponent):
+class ModalFooter(BaseModal):
     """The footer that houses the modal events."""
 
     tag = "ModalFooter"
 
 
-class ModalContent(ChakraComponent):
+class ModalContent(BaseModal):
     """The container for the modal dialog's content."""
 
     tag = "ModalContent"
 
 
-class ModalBody(ChakraComponent):
+class ModalBody(BaseModal):
     """The wrapper that houses the modal's main content."""
 
     tag = "ModalBody"
 
 
-class ModalCloseButton(ChakraComponent):
+class ModalCloseButton(BaseModal):
     """The button that closes the modal."""
 
     tag = "ModalCloseButton"

reflex/components/chakra/overlay/modal.pyi

@@ -15,7 +15,86 @@ from reflex.vars import Var
 
 ModalSizes = Literal["xs", "sm", "md", "lg", "xl", "full"]
 
-class Modal(ChakraComponent):
+class BaseModal(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BaseModal":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Modal(BaseModal):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -146,7 +225,7 @@ class Modal(ChakraComponent):
         """
         ...
 
-class ModalOverlay(ChakraComponent):
+class ModalOverlay(BaseModal):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -225,7 +304,7 @@ class ModalOverlay(ChakraComponent):
         """
         ...
 
-class ModalHeader(ChakraComponent):
+class ModalHeader(BaseModal):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -304,7 +383,7 @@ class ModalHeader(ChakraComponent):
         """
         ...
 
-class ModalFooter(ChakraComponent):
+class ModalFooter(BaseModal):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -383,7 +462,7 @@ class ModalFooter(ChakraComponent):
         """
         ...
 
-class ModalContent(ChakraComponent):
+class ModalContent(BaseModal):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -462,7 +541,7 @@ class ModalContent(ChakraComponent):
         """
         ...
 
-class ModalBody(ChakraComponent):
+class ModalBody(BaseModal):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -541,7 +620,7 @@ class ModalBody(ChakraComponent):
         """
         ...
 
-class ModalCloseButton(ChakraComponent):
+class ModalCloseButton(BaseModal):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/overlay/popover.py

@@ -13,7 +13,13 @@ from reflex.components.component import Component
 from reflex.vars import Var
 
 
-class Popover(ChakraComponent):
+class BasePopover(ChakraComponent):
+    """The base class for all Chakra popover components."""
+
+    library = "@chakra-ui/popover@2.2.1"
+
+
+class Popover(BasePopover):
     """The wrapper that provides props, state, and context to its children."""
 
     tag = "Popover"
@@ -141,49 +147,49 @@ class Popover(ChakraComponent):
         return super().create(*children, **props)
 
 
-class PopoverContent(ChakraComponent):
+class PopoverContent(BasePopover):
     """The popover itself."""
 
     tag = "PopoverContent"
 
 
-class PopoverHeader(ChakraComponent):
+class PopoverHeader(BasePopover):
     """The header of the popover."""
 
     tag = "PopoverHeader"
 
 
-class PopoverFooter(ChakraComponent):
+class PopoverFooter(BasePopover):
     """Display a popover footer."""
 
     tag = "PopoverFooter"
 
 
-class PopoverBody(ChakraComponent):
+class PopoverBody(BasePopover):
     """The body of the popover."""
 
     tag = "PopoverBody"
 
 
-class PopoverArrow(ChakraComponent):
+class PopoverArrow(BasePopover):
     """A visual arrow that points to the reference (or trigger)."""
 
     tag = "PopoverArrow"
 
 
-class PopoverCloseButton(ChakraComponent):
+class PopoverCloseButton(BasePopover):
     """A button to close the popover."""
 
     tag = "PopoverCloseButton"
 
 
-class PopoverAnchor(ChakraComponent):
+class PopoverAnchor(BasePopover):
     """Used to wrap the position-reference element."""
 
     tag = "PopoverAnchor"
 
 
-class PopoverTrigger(ChakraComponent):
+class PopoverTrigger(BasePopover):
     """Used to wrap the reference (or trigger) element."""
 
     tag = "PopoverTrigger"

reflex/components/chakra/overlay/popover.pyi

@@ -17,7 +17,86 @@ from reflex.components.chakra import (
 from reflex.components.component import Component
 from reflex.vars import Var
 
-class Popover(ChakraComponent):
+class BasePopover(ChakraComponent):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "BasePopover":
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            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.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class Popover(BasePopover):
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
@@ -154,7 +233,7 @@ class Popover(ChakraComponent):
         """
         ...
 
-class PopoverContent(ChakraComponent):
+class PopoverContent(BasePopover):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -233,7 +312,7 @@ class PopoverContent(ChakraComponent):
         """
         ...
 
-class PopoverHeader(ChakraComponent):
+class PopoverHeader(BasePopover):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -312,7 +391,7 @@ class PopoverHeader(ChakraComponent):
         """
         ...
 
-class PopoverFooter(ChakraComponent):
+class PopoverFooter(BasePopover):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -391,7 +470,7 @@ class PopoverFooter(ChakraComponent):
         """
         ...
 
-class PopoverBody(ChakraComponent):
+class PopoverBody(BasePopover):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -470,7 +549,7 @@ class PopoverBody(ChakraComponent):
         """
         ...
 
-class PopoverArrow(ChakraComponent):
+class PopoverArrow(BasePopover):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -549,7 +628,7 @@ class PopoverArrow(ChakraComponent):
         """
         ...
 
-class PopoverCloseButton(ChakraComponent):
+class PopoverCloseButton(BasePopover):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -628,7 +707,7 @@ class PopoverCloseButton(ChakraComponent):
         """
         ...
 
-class PopoverAnchor(ChakraComponent):
+class PopoverAnchor(BasePopover):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -707,7 +786,7 @@ class PopoverAnchor(ChakraComponent):
         """
         ...
 
-class PopoverTrigger(ChakraComponent):
+class PopoverTrigger(BasePopover):
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/chakra/overlay/tooltip.py

@@ -10,6 +10,8 @@ from reflex.vars import Var
 class Tooltip(ChakraComponent):
     """A tooltip message to appear."""
 
+    library = "@chakra-ui/tooltip@2.3.1"
+
     tag = "Tooltip"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.

reflex/components/chakra/typography/heading.py

@@ -8,6 +8,8 @@ from reflex.vars import Var
 class Heading(ChakraComponent):
     """A page heading."""
 
+    library = "@chakra-ui/layout@2.3.1"
+
     tag = "Heading"
 
     # Override the tag. The default tag is `<h2>`.

reflex/components/chakra/typography/highlight.py

@@ -10,6 +10,8 @@ from reflex.vars import Var
 class Highlight(ChakraComponent):
     """Highlights a specific part of a string."""
 
+    library = "@chakra-ui/layout@2.3.1"
+
     tag = "Highlight"
 
     # A query for the text to highlight. Can be a string or a list of strings.

reflex/components/chakra/typography/span.py

@@ -8,6 +8,8 @@ from reflex.vars import Var
 class Span(ChakraComponent):
     """Render an inline span of text."""
 
+    library = "@chakra-ui/layout@2.3.1"
+
     tag = "Text"
 
     # Override the tag. The default tag is `<span>`.

reflex/components/chakra/typography/text.py

@@ -8,6 +8,8 @@ from reflex.vars import Var
 class Text(ChakraComponent):
     """Render a paragraph of text."""
 
+    library = "@chakra-ui/layout@2.3.1"
+
     tag = "Text"
 
     # Override the tag. The default tag is `<p>`.

tests/test_app.py

@@ -1251,7 +1251,7 @@ def test_app_wrap_priority(compilable_app):
         tag = "Fragment2"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
-            return {(50, "Text"): Text.create()}
+            return {(45, "Text"): Text.create()}
 
     class Fragment3(Component):
         tag = "Fragment3"