clean up hooks and update component to use add_hooks (#3439)

reflex/components/core/client_side_routing.py

@@ -23,13 +23,13 @@ class ClientSideRouting(Component):
     library = "/utils/client_side_routing"
     tag = "useClientSideRouting"
 
-    def _get_hooks(self) -> str:
+    def add_hooks(self) -> list[str]:
         """Get the hooks to render.
 
         Returns:
             The useClientSideRouting hook.
         """
-        return f"const {constants.ROUTE_NOT_FOUND} = {self.tag}()"
+        return [f"const {constants.ROUTE_NOT_FOUND} = {self.tag}()"]
 
     def render(self) -> str:
         """Render the component.

reflex/components/core/client_side_routing.pyi

@@ -15,6 +15,7 @@ from reflex.vars import Var
 route_not_found: Var
 
 class ClientSideRouting(Component):
+    def add_hooks(self) -> list[str]: ...
     def render(self) -> str: ...
     @overload
     @classmethod

reflex/components/datadisplay/dataeditor.py

@@ -252,7 +252,12 @@ class DataEditor(NoSSRComponent):
             "on_column_resize": lambda col, width: [col, width],
         }
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Get the hooks to render.
+
+        Returns:
+            The hooks to render.
+        """
         # Define the id of the component in case multiple are used in the same page.
         editor_id = get_unique_variable_name()
 
@@ -272,7 +277,7 @@ class DataEditor(NoSSRComponent):
             ]
         )
 
-        return "\n".join(code)
+        return ["\n".join(code)]
 
     @classmethod
     def create(cls, *children, **props) -> Component:

reflex/components/datadisplay/dataeditor.pyi

@@ -81,6 +81,7 @@ class DataEditorTheme(Base):
 
 class DataEditor(NoSSRComponent):
     def get_event_triggers(self) -> Dict[str, Callable]: ...
+    def add_hooks(self) -> list[str]: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/el/elements/forms.py

@@ -181,18 +181,25 @@ class Form(BaseHTML):
             },
         )
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Add hooks for the form.
+
+        Returns:
+            The hooks for the form.
+        """
         if EventTriggers.ON_SUBMIT not in self.event_triggers:
-            return
+            return []
-        return HANDLE_SUBMIT_JS_JINJA2.render(
+        return [
-            handle_submit_unique_name=self.handle_submit_unique_name,
+            HANDLE_SUBMIT_JS_JINJA2.render(
-            form_data=FORM_DATA,
+                handle_submit_unique_name=self.handle_submit_unique_name,
-            field_ref_mapping=str(Var.create_safe(self._get_form_refs())),
+                form_data=FORM_DATA,
-            on_submit_event_chain=format_event_chain(
+                field_ref_mapping=str(Var.create_safe(self._get_form_refs())),
-                self.event_triggers[EventTriggers.ON_SUBMIT]
+                on_submit_event_chain=format_event_chain(
-            ),
+                    self.event_triggers[EventTriggers.ON_SUBMIT]
-            reset_on_submit=self.reset_on_submit,
+                ),
-        )
+                reset_on_submit=self.reset_on_submit,
+            )
+        ]
 
     def _render(self) -> Tag:
         render_tag = super()._render()

reflex/components/el/elements/forms.pyi

@@ -581,6 +581,7 @@ class Form(BaseHTML):
             The form component.
         """
         ...
+    def add_hooks(self) -> list[str]: ...
 
 class Input(BaseHTML):
     def get_event_triggers(self) -> Dict[str, Any]: ...

reflex/components/radix/themes/base.py

@@ -257,10 +257,16 @@ class ThemePanel(RadixThemesComponent):
         """
         return {"react": "useEffect"}
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Add a hook on the ThemePanel to clear chakra-ui-color-mode.
+
+        Returns:
+            The hooks to render.
+        """
         # The panel freezes the tab if the user color preference differs from the
         # theme "appearance", so clear it out when theme panel is used.
-        return """
+        return [
+            """
             useEffect(() => {
                 if (typeof window !== 'undefined') {
                     window.onbeforeunload = () => {
@@ -269,6 +275,7 @@ class ThemePanel(RadixThemesComponent):
                     window.onbeforeunload();
                 }
             }, [])"""
+        ]
 
 
 class RadixThemesColorModeProvider(Component):

reflex/components/radix/themes/base.pyi

@@ -584,6 +584,7 @@ class Theme(RadixThemesComponent):
 
 class ThemePanel(RadixThemesComponent):
     def add_imports(self) -> dict[str, str]: ...
+    def add_hooks(self) -> list[str]: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/experimental/hooks.py

@@ -1,24 +1,15 @@
 """Add standard Hooks wrapper for React."""
-
+from __future__ import annotations
-from typing import Optional, Union
 
 from reflex.utils.imports import ImportVar
 from reflex.vars import Var, VarData
 
 
-def _add_react_import(v: Optional[Var], tags: Union[str, list]):
+def _compose_react_imports(tags: list[str]) -> dict[str, list[ImportVar]]:
-    if v is None:
+    return {"react": [ImportVar(tag=tag, install=False) for tag in tags]}
-        return
-
-    if isinstance(tags, str):
-        tags = [tags]
-
-    v._var_data = VarData(  # type: ignore
-        imports={"react": [ImportVar(tag=tag, install=False) for tag in tags]},
-    )
 
 
-def const(name, value) -> Optional[Var]:
+def const(name, value) -> Var:
     """Create a constant Var.
 
     Args:
@@ -29,11 +20,11 @@ def const(name, value) -> Optional[Var]:
         The constant Var.
     """
     if isinstance(name, list):
-        return Var.create(f"const [{', '.join(name)}] = {value}")
+        return Var.create_safe(f"const [{', '.join(name)}] = {value}")
-    return Var.create(f"const {name} = {value}")
+    return Var.create_safe(f"const {name} = {value}")
 
 
-def useCallback(func, deps) -> Optional[Var]:
+def useCallback(func, deps) -> Var:
     """Create a useCallback hook with a function and dependencies.
 
     Args:
@@ -43,15 +34,13 @@ def useCallback(func, deps) -> Optional[Var]:
     Returns:
         The useCallback hook.
     """
-    if deps:
+    return Var.create_safe(
-        v = Var.create(f"useCallback({func}, {deps})")
+        f"useCallback({func}, {deps})" if deps else f"useCallback({func})",
-    else:
+        _var_data=VarData(imports=_compose_react_imports(["useCallback"])),
-        v = Var.create(f"useCallback({func})")
+    )
-    _add_react_import(v, "useCallback")
-    return v
 
 
-def useContext(context) -> Optional[Var]:
+def useContext(context) -> Var:
     """Create a useContext hook with a context.
 
     Args:
@@ -60,12 +49,13 @@ def useContext(context) -> Optional[Var]:
     Returns:
         The useContext hook.
     """
-    v = Var.create(f"useContext({context})")
+    return Var.create_safe(
-    _add_react_import(v, "useContext")
+        f"useContext({context})",
-    return v
+        _var_data=VarData(imports=_compose_react_imports(["useContext"])),
+    )
 
 
-def useRef(default) -> Optional[Var]:
+def useRef(default) -> Var:
     """Create a useRef hook with a default value.
 
     Args:
@@ -74,12 +64,13 @@ def useRef(default) -> Optional[Var]:
     Returns:
         The useRef hook.
     """
-    v = Var.create(f"useRef({default})")
+    return Var.create_safe(
-    _add_react_import(v, "useRef")
+        f"useRef({default})",
-    return v
+        _var_data=VarData(imports=_compose_react_imports(["useRef"])),
+    )
 
 
-def useState(var_name, default=None) -> Optional[Var]:
+def useState(var_name, default=None) -> Var:
     """Create a useState hook with a variable name and setter name.
 
     Args:
@@ -89,7 +80,10 @@ def useState(var_name, default=None) -> Optional[Var]:
     Returns:
         A useState hook.
     """
-    setter_name = f"set{var_name.capitalize()}"
+    return const(
-    v = const([var_name, setter_name], f"useState({default})")
+        [var_name, f"set{var_name.capitalize()}"],
-    _add_react_import(v, "useState")
+        Var.create_safe(
-    return v
+            f"useState({default})",
+            _var_data=VarData(imports=_compose_react_imports(["useState"])),
+        ),
+    )

reflex/experimental/layout.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any
+from typing import Any, List
 
 from reflex import color, cond
 from reflex.components.base.fragment import Fragment
@@ -65,8 +65,13 @@ class Sidebar(Box, MemoizationLeaf):
             }
         )
 
-    def _get_hooks(self) -> Var | None:
+    def add_hooks(self) -> List[Var]:
-        return hooks.useState("open", "true") if not self.State else None
+        """Get the hooks to render.
+
+        Returns:
+            The hooks for the sidebar.
+        """
+        return [hooks.useState("open", "true")] if not self.State else []
 
 
 class StatefulSidebar(ComponentState):

reflex/experimental/layout.pyi

@@ -0,0 +1,536 @@
+"""Stub file for reflex/experimental/layout.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `reflex/utils/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 typing import Any, List
+from reflex import color, cond
+from reflex.components.base.fragment import Fragment
+from reflex.components.component import Component, ComponentNamespace, MemoizationLeaf
+from reflex.components.radix.primitives.drawer import DrawerRoot, drawer
+from reflex.components.radix.themes.components.icon_button import IconButton
+from reflex.components.radix.themes.layout.box import Box
+from reflex.components.radix.themes.layout.container import Container
+from reflex.components.radix.themes.layout.stack import HStack
+from reflex.event import call_script
+from reflex.experimental import hooks
+from reflex.state import ComponentState
+from reflex.style import Style
+from reflex.vars import Var
+
+class Sidebar(Box, MemoizationLeaf):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, 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
+    ) -> "Sidebar":
+        """Create the sidebar component.
+
+        Args:
+            children: The children components.
+            props: The properties of the sidebar.
+
+        Returns:
+            The sidebar component.
+        """
+        ...
+    def add_style(self) -> dict[str, Any] | None: ...
+    def add_hooks(self) -> List[Var]: ...
+
+class StatefulSidebar(ComponentState):
+    open: bool
+
+    def toggle(self): ...
+    @classmethod
+    def get_component(cls, *children, **props): ...
+
+class DrawerSidebar(DrawerRoot):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        open: Optional[Union[Var[bool], bool]] = None,
+        should_scale_background: Optional[Union[Var[bool], bool]] = None,
+        close_threshold: Optional[Union[Var[float], float]] = None,
+        snap_points: Optional[List[Union[str, float]]] = None,
+        fade_from_index: Optional[Union[Var[int], int]] = None,
+        scroll_lock_timeout: Optional[Union[Var[int], int]] = None,
+        modal: Optional[Union[Var[bool], bool]] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["top", "bottom", "left", "right"]],
+                Literal["top", "bottom", "left", "right"],
+            ]
+        ] = None,
+        preventScrollRestoration: Optional[Union[Var[bool], bool]] = None,
+        as_child: Optional[Union[Var[bool], bool]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, 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_open_change: 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
+    ) -> "DrawerSidebar":
+        """Create the sidebar component.
+
+        Args:
+            children: The children components.
+            props: The properties of the sidebar.
+
+        Returns:
+            The drawer sidebar component.
+        """
+        ...
+
+sidebar_trigger_style = {
+    "position": "fixed",
+    "z_index": "15",
+    "color": color("accent", 12),
+    "background_color": "transparent",
+    "padding": "0",
+}
+
+class SidebarTrigger(Fragment):
+    @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
+    ) -> "SidebarTrigger":
+        """Create the sidebar trigger component.
+
+        Args:
+            sidebar: The sidebar component.
+            props: The properties of the sidebar trigger.
+
+        Returns:
+            The sidebar trigger component.
+        """
+        ...
+
+class Layout(Box):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        sidebar: Optional[Component] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, 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
+    ) -> "Layout":
+        """Create the layout component.
+
+        Args:
+            content: The content component.
+            sidebar: The sidebar component.
+            props: The properties of the layout.
+
+        Returns:
+            The layout component.
+        """
+        ...
+
+class LayoutNamespace(ComponentNamespace):
+    drawer_sidebar = staticmethod(DrawerSidebar.create)
+    stateful_sidebar = staticmethod(StatefulSidebar.create)
+    sidebar = staticmethod(Sidebar.create)
+
+    @staticmethod
+    def __call__(
+        *children,
+        sidebar: Optional[Component] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, 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
+    ) -> "Layout":
+        """Create the layout component.
+
+        Args:
+            content: The content component.
+            sidebar: The sidebar component.
+            props: The properties of the layout.
+
+        Returns:
+            The layout component.
+        """
+        ...
+
+layout = LayoutNamespace()