."""
-
- tag = "Box"
-
-
-LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
-LiteralFlexDisplay = Literal["none", "inline-flex", "flex"]
-LiteralFlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
-
-
-class Flex(LayoutComponent):
- """Component for creating flex layouts."""
-
- tag = "Flex"
-
- # Change the default rendered element for the one passed as a child, merging their props and behavior.
- as_child: Var[bool]
-
- # How to display the element: "none" | "inline-flex" | "flex"
- display: Var[LiteralFlexDisplay]
-
- # How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
- direction: Var[LiteralFlexDirection]
-
- # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
- align: Var[LiteralAlign]
-
- # Alignment of children along the cross axis: "start" | "center" | "end" | "between"
- justify: Var[LiteralJustify]
-
- # Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
- wrap: Var[LiteralFlexWrap]
-
- # Gap between children: "0" - "9"
- gap: Var[LiteralSize]
-
-
-LiteralGridDisplay = Literal["none", "inline-grid", "grid"]
-LiteralGridFlow = Literal["row", "column", "dense", "row-dense", "column-dense"]
-
-
-class Grid(RadixThemesComponent):
- """Component for creating grid layouts."""
-
- tag = "Grid"
-
- # Change the default rendered element for the one passed as a child, merging their props and behavior.
- as_child: Var[bool]
-
- # How to display the element: "none" | "inline-grid" | "grid"
- display: Var[LiteralGridDisplay]
-
- # Number of columns
- columns: Var[str]
-
- # Number of rows
- rows: Var[str]
-
- # How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
- flow: Var[LiteralGridFlow]
-
- # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
- align: Var[LiteralAlign]
-
- # Alignment of children along the cross axis: "start" | "center" | "end" | "between"
- justify: Var[LiteralJustify]
-
- # Gap between children: "0" - "9"
- gap: Var[LiteralSize]
-
- # Gap between children horizontal: "0" - "9"
- gap_x: Var[LiteralSize]
-
- # Gap between children vertical: "0" - "9"
- gap_x: Var[LiteralSize]
-
-
-LiteralContainerSize = Literal["1", "2", "3", "4"]
-
-
-class Container(LayoutComponent):
- """Constrains the maximum width of page content.
-
- See https://www.radix-ui.com/themes/docs/components/container
- """
-
- tag = "Container"
-
- # The size of the container: "1" - "4" (default "4")
- size: Var[LiteralContainerSize]
-
-
-LiteralSectionSize = Literal["1", "2", "3"]
-
-
-class Section(LayoutComponent):
- """Denotes a section of page content."""
-
- tag = "Section"
-
- # The size of the section: "1" - "3" (default "3")
- size: Var[LiteralSectionSize]
diff --git a/reflex/components/radix/themes/layout/__init__.py b/reflex/components/radix/themes/layout/__init__.py
new file mode 100644
index 000000000..ac1f43feb
--- /dev/null
+++ b/reflex/components/radix/themes/layout/__init__.py
@@ -0,0 +1,13 @@
+"""Layout components."""
+
+from .box import Box
+from .container import Container
+from .flex import Flex
+from .grid import Grid
+from .section import Section
+
+box = Box.create
+container = Container.create
+flex = Flex.create
+grid = Grid.create
+section = Section.create
diff --git a/reflex/components/radix/themes/layout/base.py b/reflex/components/radix/themes/layout/base.py
new file mode 100644
index 000000000..cd02a5465
--- /dev/null
+++ b/reflex/components/radix/themes/layout/base.py
@@ -0,0 +1,48 @@
+"""Declarative layout and common spacing props."""
+from __future__ import annotations
+
+from typing import Literal
+
+from reflex.vars import Var
+
+from ..base import (
+ CommonMarginProps,
+ LiteralSize,
+ RadixThemesComponent,
+)
+
+LiteralBoolNumber = Literal["0", "1"]
+
+
+class LayoutComponent(CommonMarginProps, RadixThemesComponent):
+ """Box, Flex and Grid are foundational elements you'll use to construct
+ layouts. Box provides block-level spacing and sizing, while Flex and Grid
+ let you create flexible columns, rows and grids.
+ """
+
+ # Padding: "0" - "9"
+ p: Var[LiteralSize]
+
+ # Padding horizontal: "0" - "9"
+ px: Var[LiteralSize]
+
+ # Padding vertical: "0" - "9"
+ py: Var[LiteralSize]
+
+ # Padding top: "0" - "9"
+ pt: Var[LiteralSize]
+
+ # Padding right: "0" - "9"
+ pr: Var[LiteralSize]
+
+ # Padding bottom: "0" - "9"
+ pb: Var[LiteralSize]
+
+ # Padding left: "0" - "9"
+ pl: Var[LiteralSize]
+
+ # Whether the element will take up the smallest possible space: "0" | "1"
+ shrink: Var[LiteralBoolNumber]
+
+ # Whether the element will take up the largest possible space: "0" | "1"
+ grow: Var[LiteralBoolNumber]
diff --git a/reflex/components/radix/themes/layout/base.pyi b/reflex/components/radix/themes/layout/base.pyi
new file mode 100644
index 000000000..aa88429e2
--- /dev/null
+++ b/reflex/components/radix/themes/layout/base.pyi
@@ -0,0 +1,195 @@
+"""Stub file for reflex/components/radix/themes/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 typing import Literal
+from reflex.vars import Var
+from ..base import CommonMarginProps, LiteralSize, RadixThemesComponent
+
+LiteralBoolNumber = Literal["0", "1"]
+
+class LayoutComponent(CommonMarginProps, RadixThemesComponent):
+ @overload
+ @classmethod
+ def create( # type: ignore
+ cls,
+ *children,
+ p: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ px: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ py: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pt: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pr: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pb: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pl: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+ grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+ m: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mx: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ my: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mt: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mr: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mb: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ ml: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = 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
+ ) -> "LayoutComponent":
+ """Create a new component instance.
+
+ Will prepend "RadixThemes" to the component tag to avoid conflicts with
+ other UI libraries for common names, like Text and Button.
+
+ Args:
+ *children: Child components.
+ p: Padding: "0" - "9"
+ px: Padding horizontal: "0" - "9"
+ py: Padding vertical: "0" - "9"
+ pt: Padding top: "0" - "9"
+ pr: Padding right: "0" - "9"
+ pb: Padding bottom: "0" - "9"
+ pl: Padding left: "0" - "9"
+ shrink: Whether the element will take up the smallest possible space: "0" | "1"
+ grow: Whether the element will take up the largest possible space: "0" | "1"
+ m: Margin: "0" - "9"
+ mx: Margin horizontal: "0" - "9"
+ my: Margin vertical: "0" - "9"
+ mt: Margin top: "0" - "9"
+ mr: Margin right: "0" - "9"
+ mb: Margin bottom: "0" - "9"
+ ml: Margin left: "0" - "9"
+ 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: Component properties.
+
+ Returns:
+ A new component instance.
+ """
+ ...
diff --git a/reflex/components/radix/themes/layout/box.py b/reflex/components/radix/themes/layout/box.py
new file mode 100644
index 000000000..4cf55169d
--- /dev/null
+++ b/reflex/components/radix/themes/layout/box.py
@@ -0,0 +1,12 @@
+"""Declarative layout and common spacing props."""
+from __future__ import annotations
+
+from reflex import el
+
+from .base import LayoutComponent
+
+
+class Box(el.Div, LayoutComponent):
+ """A fundamental layout building block, based on
."""
+
+ tag = "Box"
diff --git a/reflex/components/radix/themes/layout/box.pyi b/reflex/components/radix/themes/layout/box.pyi
new file mode 100644
index 000000000..02d876c65
--- /dev/null
+++ b/reflex/components/radix/themes/layout/box.pyi
@@ -0,0 +1,252 @@
+"""Stub file for reflex/components/radix/themes/layout/box.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 import el
+from .base import LayoutComponent
+
+class Box(el.Div, LayoutComponent):
+ @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,
+ translate: Optional[
+ Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+ ] = None,
+ p: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ px: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ py: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pt: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pr: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pb: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ pl: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ shrink: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+ grow: Optional[Union[Var[Literal["0", "1"]], Literal["0", "1"]]] = None,
+ m: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mx: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ my: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mt: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mr: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ mb: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = None,
+ ml: Optional[
+ Union[
+ Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+ Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+ ]
+ ] = 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
+ ) -> "Box":
+ """Create a new component instance.
+
+ Will prepend "RadixThemes" to the component tag to avoid conflicts with
+ other UI libraries for common names, like Text and Button.
+
+ Args:
+ *children: Child components.
+ access_key: Provides a hint for generating a keyboard shortcut for the current element.
+ auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+ content_editable: Indicates whether the element's content is editable.
+ context_menu: Defines the ID of a