[GTM-345]Define component props in class for doc discoverability (#4183)

* Define component props in class for doc discoverability

* add other files

* fix accordion typing

* add more

* pyright fix

* pyi fix

* pyi fix fr

* resinstate connection banner api

* precommit fix

* fix reflex-web test for select

* exclude props we don't need from compiling.
use regular model fields where necessary

* fix counter tests

* list partial fix

* list fix

* list fix

* precommit fix

* Accept suggestions

* Update reflex/components/radix/primitives/accordion.py

Co-authored-by: Masen Furer <m_github@0x26.net>

* address missed comment

* pyright fix

---------

Co-authored-by: Masen Furer <m_github@0x26.net>

reflex/components/datadisplay/code.py

@@ -391,7 +391,7 @@ class CodeBlock(Component):
     theme: Var[Union[Theme, str]] = Theme.one_light
 
     # The language to use.
-    language: Var[LiteralCodeLanguage] = "python"  # type: ignore
+    language: Var[LiteralCodeLanguage] = Var.create("python")
 
     # The code to display.
     code: Var[str]
@@ -411,6 +411,12 @@ class CodeBlock(Component):
     # Props passed down to the code tag.
     code_tag_props: Var[Dict[str, str]]
 
+    # Whether a copy button should appear.
+    can_copy: Optional[bool] = False
+
+    # A custom copy button to override the default one.
+    copy_button: Optional[Union[bool, Component]] = None
+
     def add_imports(self) -> ImportDict:
         """Add imports for the CodeBlock component.
 
@@ -448,16 +454,12 @@ class CodeBlock(Component):
     def create(
         cls,
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[bool, Component]] = None,
         **props,
     ):
         """Create a text component.
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             **props: The props to pass to the component.
 
         Returns:
@@ -465,6 +467,8 @@ class CodeBlock(Component):
         """
         # This component handles style in a special prop.
         custom_style = props.pop("custom_style", {})
+        can_copy = props.pop("can_copy", False)
+        copy_button = props.pop("copy_button", None)
 
         if "theme" not in props:
             # Default color scheme responds to global color mode.
@@ -536,6 +540,9 @@ class CodeBlock(Component):
 
         return out
 
+    def _exclude_props(self) -> list[str]:
+        return ["can_copy", "copy_button"]
+
 
 class CodeblockNamespace(ComponentNamespace):
     """Namespace for the CodeBlock component."""

reflex/components/datadisplay/code.pyi

@@ -356,8 +356,6 @@ class CodeBlock(Component):
     def create(  # type: ignore
         cls,
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[Component, bool]] = None,
         theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
@@ -933,6 +931,8 @@ class CodeBlock(Component):
         wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
         custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
         code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
+        can_copy: Optional[bool] = None,
+        copy_button: Optional[Union[Component, bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -960,8 +960,6 @@ class CodeBlock(Component):
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             theme: The theme to use ("light" or "dark").
             language: The language to use.
             code: The code to display.
@@ -970,6 +968,8 @@ class CodeBlock(Component):
             wrap_long_lines: Whether to wrap long lines.
             custom_style: A custom style for the code block.
             code_tag_props: Props passed down to the code tag.
+            can_copy: Whether a copy button should appear.
+            copy_button: A custom copy button to override the default one.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -991,8 +991,6 @@ class CodeblockNamespace(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        can_copy: Optional[bool] = False,
-        copy_button: Optional[Union[Component, bool]] = None,
         theme: Optional[Union[Theme, Var[Union[Theme, str]], str]] = None,
         language: Optional[
             Union[
@@ -1568,6 +1566,8 @@ class CodeblockNamespace(ComponentNamespace):
         wrap_long_lines: Optional[Union[Var[bool], bool]] = None,
         custom_style: Optional[Dict[str, Union[str, Var, Color]]] = None,
         code_tag_props: Optional[Union[Dict[str, str], Var[Dict[str, str]]]] = None,
+        can_copy: Optional[bool] = None,
+        copy_button: Optional[Union[Component, bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1595,8 +1595,6 @@ class CodeblockNamespace(ComponentNamespace):
 
         Args:
             *children: The children of the component.
-            can_copy: Whether a copy button should appears.
-            copy_button: A custom copy button to override the default one.
             theme: The theme to use ("light" or "dark").
             language: The language to use.
             code: The code to display.
@@ -1605,6 +1603,8 @@ class CodeblockNamespace(ComponentNamespace):
             wrap_long_lines: Whether to wrap long lines.
             custom_style: A custom style for the code block.
             code_tag_props: Props passed down to the code tag.
+            can_copy: Whether a copy button should appear.
+            copy_button: A custom copy button to override the default one.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/primitives/accordion.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, List, Literal, Optional, Tuple, Union
+from typing import Any, List, Literal, Tuple, Union
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
@@ -193,6 +193,11 @@ class AccordionItem(AccordionComponent):
     # When true, prevents the user from interacting with the item.
     disabled: Var[bool]
 
+    # The header of the accordion item.
+    header: Var[Union[Component, str]]
+    # The content of the accordion item.
+    content: Var[Union[Component, str]] = Var.create(None)
+
     _valid_children: List[str] = [
         "AccordionHeader",
         "AccordionTrigger",
@@ -205,21 +210,20 @@ class AccordionItem(AccordionComponent):
     def create(
         cls,
         *children,
-        header: Optional[Component | Var] = None,
-        content: Optional[Component | Var] = None,
         **props,
     ) -> Component:
         """Create an accordion item.
 
         Args:
             *children: The list of children to use if header and content are not provided.
-            header: The header of the accordion item.
-            content: The content of the accordion item.
             **props: Additional properties to apply to the accordion item.
 
         Returns:
             The accordion item.
         """
+        header = props.pop("header", None)
+        content = props.pop("content", None)
+
         # The item requires a value to toggle (use a random unique name if not provided).
         value = props.pop("value", get_uuid_string_var())
 
@@ -291,6 +295,9 @@ class AccordionItem(AccordionComponent):
             },
         }
 
+    def _exclude_props(self) -> list[str]:
+        return ["header", "content"]
+
 
 class AccordionHeader(AccordionComponent):
     """An accordion component."""

reflex/components/radix/primitives/accordion.pyi

@@ -303,10 +303,10 @@ class AccordionItem(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
-        header: Optional[Union[Component, Var]] = None,
-        content: Optional[Union[Component, Var]] = None,
         value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
+        header: Optional[Union[Component, Var[Union[Component, str]], str]] = None,
+        content: Optional[Union[Component, Var[Union[Component, str]], str]] = None,
         color_scheme: Optional[
             Union[
                 Literal[
@@ -403,10 +403,10 @@ class AccordionItem(AccordionComponent):
 
         Args:
             *children: The list of children to use if header and content are not provided.
-            header: The header of the accordion item.
-            content: The content of the accordion item.
             value: A unique identifier for the item.
             disabled: When true, prevents the user from interacting with the item.
+            header: The header of the accordion item.
+            content: The content of the accordion item.
             color_scheme: The color scheme of the component.
             variant: The variant of the component.
             as_child: Change the default rendered element for the one passed as a child.

reflex/components/radix/themes/color_mode.py

@@ -17,7 +17,7 @@ rx.text(
 
 from __future__ import annotations
 
-from typing import Dict, List, Literal, get_args
+from typing import Dict, List, Literal, Optional, Union, get_args
 
 from reflex.components.component import BaseComponent
 from reflex.components.core.cond import Cond, color_mode_cond, cond
@@ -96,26 +96,31 @@ def _set_static_default(props, position, prop, default):
 class ColorModeIconButton(IconButton):
     """Icon Button for toggling light / dark mode via toggle_color_mode."""
 
+    # The position of the icon button. Follow document flow if None.
+    position: Optional[Union[LiteralPosition, Var[LiteralPosition]]] = None
+
+    # Allow picking the "system" value for the color mode.
+    allow_system: bool = False
+
     @classmethod
     def create(
         cls,
-        position: LiteralPosition | None = None,
-        allow_system: bool = False,
         **props,
     ):
-        """Create a icon button component that calls toggle_color_mode on click.
+        """Create an icon button component that calls toggle_color_mode on click.
 
         Args:
-            position: The position of the icon button. Follow document flow if None.
-            allow_system: Allow picking the "system" value for the color mode.
             **props: The props to pass to the component.
 
         Returns:
             The button component.
         """
+        position = props.pop("position", None)
+        allow_system = props.pop("allow_system", False)
+
         # position is used to set nice defaults for positioning the icon button
         if isinstance(position, Var):
-            _set_var_default(props, position, "position", "fixed", position)
+            _set_var_default(props, position, "position", "fixed", position)  # type: ignore
             _set_var_default(props, position, "bottom", "2rem")
             _set_var_default(props, position, "top", "2rem")
             _set_var_default(props, position, "left", "2rem")
@@ -155,12 +160,15 @@ class ColorModeIconButton(IconButton):
                     color_mode_item("system"),
                 ),
             )
-        return super().create(
+        return IconButton.create(
             ColorModeIcon.create(),
             on_click=toggle_color_mode,
             **props,
         )
 
+    def _exclude_props(self) -> list[str]:
+        return ["position", "allow_system"]
+
 
 class ColorModeSwitch(Switch):
     """Switch for toggling light / dark mode via toggle_color_mode."""

reflex/components/radix/themes/color_mode.pyi

@@ -75,6 +75,18 @@ class ColorModeIconButton(IconButton):
     def create(  # type: ignore
         cls,
         *children,
+        position: Optional[
+            Union[
+                Literal["bottom-left", "bottom-right", "top-left", "top-right"],
+                Union[
+                    Literal["bottom-left", "bottom-right", "top-left", "top-right"],
+                    Var[
+                        Literal["bottom-left", "bottom-right", "top-left", "top-right"]
+                    ],
+                ],
+            ]
+        ] = None,
+        allow_system: Optional[bool] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         size: Optional[
             Union[
@@ -226,7 +238,7 @@ class ColorModeIconButton(IconButton):
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "ColorModeIconButton":
-        """Create a icon button component that calls toggle_color_mode on click.
+        """Create an icon button component that calls toggle_color_mode on click.
 
         Args:
             position: The position of the icon button. Follow document flow if None.

reflex/components/radix/themes/components/slider.py

@@ -53,6 +53,9 @@ class Slider(RadixThemesComponent):
     # The name of the slider. Submitted with its owning form as part of a name/value pair.
     name: Var[str]
 
+    # The width of the slider.
+    width: Var[Optional[str]] = Var.create("100%")
+
     # The minimum value of the slider.
     min: Var[Union[float, int]]
 
@@ -81,20 +84,19 @@ class Slider(RadixThemesComponent):
     def create(
         cls,
         *children,
-        width: Optional[str] = "100%",
         **props,
     ) -> Component:
         """Create a Slider component.
 
         Args:
             *children: The children of the component.
-            width: The width of the slider.
             **props: The properties of the component.
 
         Returns:
             The component.
         """
         default_value = props.pop("default_value", [50])
+        width = props.pop("width", "100%")
 
         if isinstance(default_value, Var):
             if issubclass(default_value._var_type, (int, float)):

reflex/components/radix/themes/components/slider.pyi

@@ -24,7 +24,6 @@ class Slider(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        width: Optional[str] = "100%",
         as_child: Optional[Union[Var[bool], bool]] = None,
         size: Optional[
             Union[
@@ -123,6 +122,7 @@ class Slider(RadixThemesComponent):
             Union[List[Union[float, int]], Var[List[Union[float, int]]]]
         ] = None,
         name: Optional[Union[Var[str], str]] = None,
+        width: Optional[Union[Var[Optional[str]], str]] = None,
         min: Optional[Union[Var[Union[float, int]], float, int]] = None,
         max: Optional[Union[Var[Union[float, int]], float, int]] = None,
         step: Optional[Union[Var[Union[float, int]], float, int]] = None,
@@ -174,7 +174,6 @@ class Slider(RadixThemesComponent):
 
         Args:
             *children: The children of the component.
-            width: The width of the slider.
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             size: Button size "1" - "3"
             variant: Variant of button
@@ -184,6 +183,7 @@ class Slider(RadixThemesComponent):
             default_value: The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
             value: The controlled value of the slider. Must be used in conjunction with onValueChange.
             name: The name of the slider. Submitted with its owning form as part of a name/value pair.
+            width: The width of the slider.
             min: The minimum value of the slider.
             max: The maximum value of the slider.
             step: The step value of the slider.

reflex/components/radix/themes/layout/list.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, Iterable, Literal, Optional, Union
+from typing import Any, Iterable, Literal, Union
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.foreach import Foreach
@@ -44,27 +44,30 @@ class BaseList(Component):
     # The style of the list. Default to "none".
     list_style_type: Var[
         Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered]
-    ]
+    ] = Var.create("none")
+
+    # A list of items to add to the list.
+    items: Var[Iterable] = Var.create([])
 
     @classmethod
     def create(
         cls,
         *children,
-        items: Optional[Var[Iterable]] = None,
         **props,
     ):
         """Create a list component.
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
             **props: The properties of the component.
 
         Returns:
             The list component.
 
         """
+        items = props.pop("items", None)
         list_style_type = props.pop("list_style_type", "none")
+
         if not children and items is not None:
             if isinstance(items, Var):
                 children = [Foreach.create(items, ListItem.create)]
@@ -87,6 +90,9 @@ class BaseList(Component):
             "direction": "column",
         }
 
+    def _exclude_props(self) -> list[str]:
+        return ["items", "list_style_type"]
+
 
 class UnorderedList(BaseList, Ul):
     """Display an unordered list."""
@@ -97,22 +103,21 @@ class UnorderedList(BaseList, Ul):
     def create(
         cls,
         *children,
-        items: Optional[Var[Iterable]] = None,
-        list_style_type: LiteralListStyleTypeUnordered = "disc",
         **props,
     ):
-        """Create a unordered list component.
+        """Create an unordered list component.
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
-            list_style_type: The style of the list.
             **props: The properties of the component.
 
         Returns:
             The list component.
 
         """
+        items = props.pop("items", None)
+        list_style_type = props.pop("list_style_type", "disc")
+
         props["margin_left"] = props.get("margin_left", "1.5rem")
         return super().create(
             *children, items=items, list_style_type=list_style_type, **props
@@ -128,22 +133,21 @@ class OrderedList(BaseList, Ol):
     def create(
         cls,
         *children,
-        items: Optional[Var[Iterable]] = None,
-        list_style_type: LiteralListStyleTypeOrdered = "decimal",
         **props,
     ):
         """Create an ordered list component.
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
-            list_style_type: The style of the list.
             **props: The properties of the component.
 
         Returns:
             The list component.
 
         """
+        items = props.pop("items", None)
+        list_style_type = props.pop("list_style_type", "decimal")
+
         props["margin_left"] = props.get("margin_left", "1.5rem")
         return super().create(
             *children, items=items, list_style_type=list_style_type, **props

reflex/components/radix/themes/layout/list.pyi

@@ -35,7 +35,6 @@ class BaseList(Component):
     def create(  # type: ignore
         cls,
         *children,
-        items: Optional[Union[Iterable, Var[Iterable]]] = None,
         list_style_type: Optional[
             Union[
                 Literal[
@@ -78,6 +77,7 @@ class BaseList(Component):
                 ],
             ]
         ] = None,
+        items: Optional[Union[Iterable, Var[Iterable]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -105,8 +105,8 @@ class BaseList(Component):
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
             list_style_type: The style of the list. Default to "none".
+            items: A list of items to add to the list.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -129,8 +129,49 @@ class UnorderedList(BaseList, Ul):
     def create(  # type: ignore
         cls,
         *children,
+        list_style_type: Optional[
+            Union[
+                Literal[
+                    "armenian",
+                    "decimal",
+                    "decimal-leading-zero",
+                    "georgian",
+                    "hiragana",
+                    "katakana",
+                    "lower-alpha",
+                    "lower-greek",
+                    "lower-latin",
+                    "lower-roman",
+                    "none",
+                    "upper-alpha",
+                    "upper-latin",
+                    "upper-roman",
+                ],
+                Literal["circle", "disc", "none", "square"],
+                Var[
+                    Union[
+                        Literal[
+                            "armenian",
+                            "decimal",
+                            "decimal-leading-zero",
+                            "georgian",
+                            "hiragana",
+                            "katakana",
+                            "lower-alpha",
+                            "lower-greek",
+                            "lower-latin",
+                            "lower-roman",
+                            "none",
+                            "upper-alpha",
+                            "upper-latin",
+                            "upper-roman",
+                        ],
+                        Literal["circle", "disc", "none", "square"],
+                    ]
+                ],
+            ]
+        ] = None,
         items: Optional[Union[Iterable, Var[Iterable]]] = None,
-        list_style_type: Optional[LiteralListStyleTypeUnordered] = "disc",
         access_key: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         auto_capitalize: Optional[
             Union[Var[Union[bool, int, str]], bool, int, str]
@@ -178,12 +219,12 @@ class UnorderedList(BaseList, Ul):
         on_unmount: Optional[EventType[[]]] = None,
         **props,
     ) -> "UnorderedList":
-        """Create a unordered list component.
+        """Create an unordered list component.
 
         Args:
             *children: The children of the component.
+            list_style_type: The style of the list. Default to "none".
             items: A list of items to add to the list.
-            list_style_type: The style of the list.
             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.
@@ -220,8 +261,49 @@ class OrderedList(BaseList, Ol):
     def create(  # type: ignore
         cls,
         *children,
+        list_style_type: Optional[
+            Union[
+                Literal[
+                    "armenian",
+                    "decimal",
+                    "decimal-leading-zero",
+                    "georgian",
+                    "hiragana",
+                    "katakana",
+                    "lower-alpha",
+                    "lower-greek",
+                    "lower-latin",
+                    "lower-roman",
+                    "none",
+                    "upper-alpha",
+                    "upper-latin",
+                    "upper-roman",
+                ],
+                Literal["circle", "disc", "none", "square"],
+                Var[
+                    Union[
+                        Literal[
+                            "armenian",
+                            "decimal",
+                            "decimal-leading-zero",
+                            "georgian",
+                            "hiragana",
+                            "katakana",
+                            "lower-alpha",
+                            "lower-greek",
+                            "lower-latin",
+                            "lower-roman",
+                            "none",
+                            "upper-alpha",
+                            "upper-latin",
+                            "upper-roman",
+                        ],
+                        Literal["circle", "disc", "none", "square"],
+                    ]
+                ],
+            ]
+        ] = None,
         items: Optional[Union[Iterable, Var[Iterable]]] = None,
-        list_style_type: Optional[LiteralListStyleTypeOrdered] = "decimal",
         reversed: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         start: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
         type: Optional[Union[Var[Union[bool, int, str]], bool, int, str]] = None,
@@ -276,8 +358,8 @@ class OrderedList(BaseList, Ol):
 
         Args:
             *children: The children of the component.
+            list_style_type: The style of the list. Default to "none".
             items: A list of items to add to the list.
-            list_style_type: The style of the list.
             reversed: Reverses the order of the list.
             start: Specifies the start value of the first list item in an ordered list.
             type: Specifies the kind of marker to use in the list (letters or numbers).
@@ -406,7 +488,6 @@ class List(ComponentNamespace):
     @staticmethod
     def __call__(
         *children,
-        items: Optional[Union[Iterable, Var[Iterable]]] = None,
         list_style_type: Optional[
             Union[
                 Literal[
@@ -449,6 +530,7 @@ class List(ComponentNamespace):
                 ],
             ]
         ] = None,
+        items: Optional[Union[Iterable, Var[Iterable]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -476,8 +558,8 @@ class List(ComponentNamespace):
 
         Args:
             *children: The children of the component.
-            items: A list of items to add to the list.
             list_style_type: The style of the list. Default to "none".
+            items: A list of items to add to the list.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/layout/stack.py

@@ -12,20 +12,22 @@ from .flex import Flex, LiteralFlexDirection
 class Stack(Flex):
     """A stack component."""
 
+    # The spacing between each stack item.
+    spacing: Var[LiteralSpacing] = Var.create("3")
+
+    # The alignment of the stack items.
+    align: Var[LiteralAlign] = Var.create("start")
+
     @classmethod
     def create(
         cls,
         *children,
-        spacing: LiteralSpacing = "3",
-        align: LiteralAlign = "start",
         **props,
     ) -> Component:
         """Create a new instance of the component.
 
         Args:
             *children: The children of the stack.
-            spacing: The spacing between each stack item.
-            align: The alignment of the stack items.
             **props: The properties of the stack.
 
         Returns:
@@ -39,8 +41,6 @@ class Stack(Flex):
 
         return super().create(
             *children,
-            spacing=spacing,
-            align=align,
             **props,
         )
 

reflex/components/radix/themes/layout/stack.pyi

@@ -10,7 +10,6 @@ from reflex.event import EventType
 from reflex.style import Style
 from reflex.vars.base import Var
 
-from ..base import LiteralAlign, LiteralSpacing
 from .flex import Flex
 
 class Stack(Flex):
@@ -19,8 +18,18 @@ class Stack(Flex):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "3",
-        align: Optional[LiteralAlign] = "start",
+        spacing: Optional[
+            Union[
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Literal["baseline", "center", "end", "start", "stretch"],
+                Var[Literal["baseline", "center", "end", "start", "stretch"]],
+            ]
+        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         direction: Optional[
             Union[
@@ -114,8 +123,8 @@ class Stack(Flex):
 
         Args:
             *children: The children of the stack.
-            spacing: The spacing between each stack item.
-            align: The alignment of the stack items.
+            spacing: Gap between children: "0" - "9"
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
@@ -155,14 +164,24 @@ class VStack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "3",
-        align: Optional[LiteralAlign] = "start",
         direction: Optional[
             Union[
                 Literal["column", "column-reverse", "row", "row-reverse"],
                 Var[Literal["column", "column-reverse", "row", "row-reverse"]],
             ]
         ] = None,
+        spacing: Optional[
+            Union[
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Literal["baseline", "center", "end", "start", "stretch"],
+                Var[Literal["baseline", "center", "end", "start", "stretch"]],
+            ]
+        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         justify: Optional[
             Union[
@@ -239,9 +258,9 @@ class VStack(Stack):
 
         Args:
             *children: The children of the stack.
-            spacing: The spacing between each stack item.
-            align: The alignment of the stack items.
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            spacing: Gap between children: "0" - "9"
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
@@ -280,14 +299,24 @@ class HStack(Stack):
     def create(  # type: ignore
         cls,
         *children,
-        spacing: Optional[LiteralSpacing] = "3",
-        align: Optional[LiteralAlign] = "start",
         direction: Optional[
             Union[
                 Literal["column", "column-reverse", "row", "row-reverse"],
                 Var[Literal["column", "column-reverse", "row", "row-reverse"]],
             ]
         ] = None,
+        spacing: Optional[
+            Union[
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Literal["baseline", "center", "end", "start", "stretch"],
+                Var[Literal["baseline", "center", "end", "start", "stretch"]],
+            ]
+        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         justify: Optional[
             Union[
@@ -364,9 +393,9 @@ class HStack(Stack):
 
         Args:
             *children: The children of the stack.
-            spacing: The spacing between each stack item.
-            align: The alignment of the stack items.
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
+            spacing: Gap between children: "0" - "9"
+            align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             justify: Alignment of children along the cross axis: "start" | "center" | "end" | "between"
             wrap: Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"