[REF-938] Fix up radix themes issues (#2002)

integration/test_login_flow.py

@@ -31,15 +31,15 @@ def LoginSample():
         return rx.Cond.create(
             State.is_hydrated & State.auth_token,  # type: ignore
             rx.vstack(
-                rx.heading(State.auth_token),
-                rx.button("Logout", on_click=State.logout),
+                rx.heading(State.auth_token, id="auth-token"),
+                rx.button("Logout", on_click=State.logout, id="logout"),
             ),
-            rx.button("Login", on_click=rx.redirect("/login")),
+            rx.button("Login", on_click=rx.redirect("/login"), id="login"),
         )
 
     def login():
         return rx.vstack(
-            rx.button("Do it", on_click=State.login),
+            rx.button("Do it", on_click=State.login, id="doit"),
         )
 
     app = rx.App(state=State)
@@ -112,33 +112,31 @@ def test_login_flow(
     local_storage.clear()
 
     with pytest.raises(NoSuchElementException):
-        driver.find_element(By.TAG_NAME, "h2")
+        driver.find_element(By.ID, "auth-token")
 
-    login_button = driver.find_element(By.TAG_NAME, "button")
-    assert login_button.text == "Login"
+    login_button = driver.find_element(By.ID, "login")
+    login_sample.poll_for_content(login_button)
     with utils.poll_for_navigation(driver):
         login_button.click()
     assert driver.current_url.endswith("/login/")
 
-    do_it_button = driver.find_element(By.TAG_NAME, "button")
-    assert do_it_button.text == "Do it"
+    do_it_button = driver.find_element(By.ID, "doit")
     with utils.poll_for_navigation(driver):
         do_it_button.click()
     assert driver.current_url == login_sample.frontend_url + "/"
 
     def check_auth_token_header():
         try:
-            auth_token_header = driver.find_element(By.TAG_NAME, "h2")
+            auth_token_header = driver.find_element(By.ID, "auth-token")
         except NoSuchElementException:
             return False
         return auth_token_header.text
 
     assert login_sample._poll_for(check_auth_token_header) == "12345"
 
-    logout_button = driver.find_element(By.TAG_NAME, "button")
-    assert logout_button.text == "Logout"
+    logout_button = driver.find_element(By.ID, "logout")
     logout_button.click()
 
     assert login_sample._poll_for(lambda: local_storage["state.auth_token"] == "")
     with pytest.raises(NoSuchElementException):
-        driver.find_element(By.TAG_NAME, "h2")
+        driver.find_element(By.ID, "auth-token")

integration/test_radix_themes.py

@@ -45,6 +45,38 @@ def RadixThemesApp():
                 direction="row",
                 gap="2",
             ),
+            rdxt.button("This is a button", size="4", variant="solid", color="plum"),
+            rdxt.grid(
+                *[
+                    rdxt.box(rdxt.text(f"Cell {i}"), width="10vw", height="10vw")
+                    for i in range(1, 10)
+                ],
+                columns="3",
+            ),
+            rdxt.container(
+                rdxt.section(
+                    rdxt.heading("Section 1"),
+                    rdxt.text(
+                        "text one with ",
+                        rdxt.kbd("K"),
+                        rdxt.kbd("E"),
+                        rdxt.kbd("Y"),
+                        "s",
+                    ),
+                ),
+                rdxt.section(
+                    rdxt.heading("Section 2", size="2"),
+                    rdxt.code("Inline code yo"),
+                ),
+                rdxt.section(
+                    rdxt.heading("Section 3"),
+                    rdxt.link("Link to google", href="https://google.com"),
+                    rdxt.strong("Strong text"),
+                    rdxt.em("Emphasized text"),
+                    rdxt.blockquote("Blockquote text"),
+                    rdxt.quote("Inline quote"),
+                ),
+            ),
             p="5",
         )
 

reflex/components/radix/themes/__init__.py

@@ -1,4 +1,14 @@
 """Namespace for components provided by the @radix-ui/themes library."""
+from .base import LiteralAccentColor as LiteralAccentColor
+from .base import LiteralAlign as LiteralAlign
+from .base import LiteralAppearance as LiteralAppearance
+from .base import LiteralGrayColor as LiteralGrayColor
+from .base import LiteralJustify as LiteralJustify
+from .base import LiteralPanelBackground as LiteralPanelBackground
+from .base import LiteralRadius as LiteralRadius
+from .base import LiteralScaling as LiteralScaling
+from .base import LiteralSize as LiteralSize
+from .base import LiteralVariant as LiteralVariant
 from .base import (
     Theme,
     ThemePanel,
@@ -10,6 +20,8 @@ from .components import (
     TextFieldRoot,
     TextFieldSlot,
 )
+from .components import LiteralButtonSize as LiteralButtonSize
+from .components import LiteralSwitchSize as LiteralSwitchSize
 from .layout import (
     Box,
     Container,
@@ -17,7 +29,30 @@ from .layout import (
     Grid,
     Section,
 )
-from .typography import Blockquote, Code, Em, Heading, Kbd, Link, Quote, Strong, Text
+from .layout import LiteralBoolNumber as LiteralBoolNumber
+from .layout import LiteralContainerSize as LiteralContainerSize
+from .layout import LiteralFlexDirection as LiteralFlexDirection
+from .layout import LiteralFlexDisplay as LiteralFlexDisplay
+from .layout import LiteralFlexWrap as LiteralFlexWrap
+from .layout import LiteralGridDisplay as LiteralGridDisplay
+from .layout import LiteralGridFlow as LiteralGridFlow
+from .layout import LiteralSectionSize as LiteralSectionSize
+from .typography import (
+    Blockquote,
+    Code,
+    Em,
+    Heading,
+    Kbd,
+    Link,
+    Quote,
+    Strong,
+    Text,
+)
+from .typography import LiteralLinkUnderline as LiteralLinkUnderline
+from .typography import LiteralTextAlign as LiteralTextAlign
+from .typography import LiteralTextSize as LiteralTextSize
+from .typography import LiteralTextTrim as LiteralTextTrim
+from .typography import LiteralTextWeight as LiteralTextWeight
 
 blockquote = Blockquote.create
 box = Box.create

reflex/components/radix/themes/base.py

@@ -2,34 +2,41 @@
 
 from __future__ import annotations
 
+from typing import Literal
+
 from reflex.components import Component
 from reflex.utils import imports
 from reflex.vars import ImportVar, Var
 
+LiteralAlign = Literal["start", "center", "end", "baseline", "stretch"]
+LiteralJustify = Literal["start", "center", "end", "between"]
+LiteralSize = Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+LiteralVariant = Literal["solid", "soft", "outline", "ghost"]
+
 
 class CommonMarginProps(Component):
     """Many radix-themes elements accept shorthand margin props."""
 
     # Margin: "0" - "9"
-    m: Var[str]
+    m: Var[LiteralSize]
 
     # Margin horizontal: "0" - "9"
-    mx: Var[str]
+    mx: Var[LiteralSize]
 
     # Margin vertical: "0" - "9"
-    my: Var[str]
+    my: Var[LiteralSize]
 
     # Margin top: "0" - "9"
-    mt: Var[str]
+    mt: Var[LiteralSize]
 
     # Margin right: "0" - "9"
-    mr: Var[str]
+    mr: Var[LiteralSize]
 
     # Margin bottom: "0" - "9"
-    mb: Var[str]
+    mb: Var[LiteralSize]
 
     # Margin left: "0" - "9"
-    ml: Var[str]
+    ml: Var[LiteralSize]
 
 
 class RadixThemesComponent(Component):
@@ -69,6 +76,41 @@ class RadixThemesComponent(Component):
         return {"style": self.style}
 
 
+LiteralAccentColor = Literal[
+    "tomato",
+    "red",
+    "ruby",
+    "crimson",
+    "pink",
+    "plum",
+    "purple",
+    "violet",
+    "iris",
+    "indigo",
+    "blue",
+    "cyan",
+    "teal",
+    "jade",
+    "green",
+    "grass",
+    "brown",
+    "orange",
+    "sky",
+    "mint",
+    "lime",
+    "yellow",
+    "amber",
+    "gold",
+    "bronze",
+    "gray",
+]
+LiteralAppearance = Literal["inherit", "light", "dark"]
+LiteralGrayColor = Literal["gray", "mauve", "slate", "sage", "olive", "sand", "auto"]
+LiteralPanelBackground = Literal["solid", "transparent"]
+LiteralRadius = Literal["none", "small", "medium", "large", "full"]
+LiteralScaling = Literal["90%", "95%", "100%", "105%", "110%"]
+
+
 class Theme(RadixThemesComponent):
     """A theme provider for radix components.
 
@@ -85,22 +127,22 @@ class Theme(RadixThemesComponent):
     has_background: Var[bool]
 
     # Override light or dark mode theme: "inherit" | "light" | "dark"
-    appearance: Var[str]
+    appearance: Var[LiteralAppearance]
 
     # The color used for default buttons, typography, backgrounds, etc
-    accent_color: Var[str]
+    accent_color: Var[LiteralAccentColor]
 
     # The shade of gray
-    gray_color: Var[str]
+    gray_color: Var[LiteralGrayColor]
 
     # Whether panel backgrounds are transparent: "solid" | "transparent" (default)
-    panel_background: Var[str]
+    panel_background: Var[LiteralPanelBackground]
 
     # Element border radius: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[str]
+    radius: Var[LiteralRadius]
 
     # Scale of all theme items: "90%" | "95%" | "100%" | "105%" | "110%"
-    scaling: Var[str]
+    scaling: Var[LiteralScaling]
 
     def _get_imports(self) -> imports.ImportDict:
         return {

reflex/components/radix/themes/base.pyi

@@ -3,25 +3,98 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Any, Dict, List, Optional, Union, overload
+from typing import Any, Dict, List, Literal, Optional, Union, overload
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventHandler, EventChain, EventSpec
 from reflex.style import Style
 
+LiteralAlign = Literal["start", "center", "end", "baseline", "stretch"]
+LiteralJustify = Literal["start", "center", "end", "between"]
+LiteralSize = Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+LiteralVariant = Literal["solid", "soft", "outline", "ghost"]
+LiteralAccentColor = Literal[
+    "tomato",
+    "red",
+    "ruby",
+    "crimson",
+    "pink",
+    "plum",
+    "purple",
+    "violet",
+    "iris",
+    "indigo",
+    "blue",
+    "cyan",
+    "teal",
+    "jade",
+    "green",
+    "grass",
+    "brown",
+    "orange",
+    "sky",
+    "mint",
+    "lime",
+    "yellow",
+    "amber",
+    "gold",
+    "bronze",
+    "gray",
+]
+LiteralAppearance = Literal["inherit", "light", "dark"]
+LiteralGrayColor = Literal["gray", "mauve", "slate", "sage", "olive", "sand", "auto"]
+LiteralPanelBackground = Literal["solid", "transparent"]
+LiteralRadius = Literal["none", "small", "medium", "large", "full"]
+LiteralScaling = Literal["90%", "95%", "100%", "105%", "110%"]
+
 class CommonMarginProps(Component):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -188,12 +261,95 @@ class Theme(RadixThemesComponent):
         cls,
         *children,
         has_background: Optional[Union[Var[bool], bool]] = None,
-        appearance: Optional[Union[Var[str], str]] = None,
-        accent_color: Optional[Union[Var[str], str]] = None,
-        gray_color: Optional[Union[Var[str], str]] = None,
-        panel_background: Optional[Union[Var[str], str]] = None,
-        radius: Optional[Union[Var[str], str]] = None,
-        scaling: Optional[Union[Var[str], str]] = None,
+        appearance: Optional[
+            Union[
+                Var[Literal["inherit", "light", "dark"]],
+                Literal["inherit", "light", "dark"],
+            ]
+        ] = None,
+        accent_color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        gray_color: Optional[
+            Union[
+                Var[Literal["gray", "mauve", "slate", "sage", "olive", "sand", "auto"]],
+                Literal["gray", "mauve", "slate", "sage", "olive", "sand", "auto"],
+            ]
+        ] = None,
+        panel_background: Optional[
+            Union[Var[Literal["solid", "transparent"]], Literal["solid", "transparent"]]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        scaling: Optional[
+            Union[
+                Var[Literal["90%", "95%", "100%", "105%", "110%"]],
+                Literal["90%", "95%", "100%", "105%", "110%"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/radix/themes/components.py

@@ -1,5 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
-from typing import Any, Dict
+from typing import Any, Dict, Literal
 
 from reflex import el
 from reflex.components.component import Component
@@ -7,7 +7,16 @@ from reflex.components.forms.debounce import DebounceInput
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-from .base import CommonMarginProps, RadixThemesComponent
+from .base import (
+    CommonMarginProps,
+    LiteralAccentColor,
+    LiteralRadius,
+    LiteralSize,
+    LiteralVariant,
+    RadixThemesComponent,
+)
+
+LiteralButtonSize = Literal["1", "2", "3", "4"]
 
 
 class Button(CommonMarginProps, RadixThemesComponent):
@@ -19,19 +28,22 @@ class Button(CommonMarginProps, RadixThemesComponent):
     as_child: Var[bool]
 
     # Button size "1" - "4"
-    size: Var[str]
+    size: Var[LiteralButtonSize]
 
     # Variant of button: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[str]
+    variant: Var[LiteralVariant]
 
     # Override theme color for button
-    color: Var[str]
+    color: Var[LiteralAccentColor]
 
     # Whether to render the button with higher contrast color against background
     high_contrast: Var[bool]
 
     # Override theme radius for button: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[str]
+    radius: Var[LiteralRadius]
+
+
+LiteralSwitchSize = Literal["1", "2", "3", "4"]
 
 
 class Switch(CommonMarginProps, RadixThemesComponent):
@@ -61,19 +73,19 @@ class Switch(CommonMarginProps, RadixThemesComponent):
     value: Var[str]
 
     # Switch size "1" - "4"
-    size: Var[str]
+    size: Var[LiteralSwitchSize]
 
     # Variant of switch: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[str]
+    variant: Var[LiteralVariant]
 
     # Override theme color for switch
-    color: Var[str]
+    color: Var[LiteralAccentColor]
 
     # Whether to render the switch with higher contrast color against background
     high_contrast: Var[bool]
 
     # Override theme radius for switch: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[str]
+    radius: Var[LiteralRadius]
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.
@@ -87,22 +99,26 @@ class Switch(CommonMarginProps, RadixThemesComponent):
         }
 
 
+LiteralTextFieldSize = Literal["1", "2", "3"]
+LiteralTextFieldVariant = Literal["classic", "surface", "soft"]
+
+
 class TextFieldRoot(CommonMarginProps, RadixThemesComponent):
     """Captures user input with an optional slot for buttons and icons."""
 
     tag = "TextField.Root"
 
-    # Button size "1" - "3"
-    size: Var[str]
+    # Text field size "1" - "3"
+    size: Var[LiteralTextFieldSize]
 
     # Variant of text field: "classic" | "surface" | "soft"
-    variant: Var[str]
+    variant: Var[LiteralTextFieldVariant]
 
     # Override theme color for text field
-    color: Var[str]
+    color: Var[LiteralAccentColor]
 
     # Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
-    radius: Var[str]
+    radius: Var[LiteralRadius]
 
 
 class TextField(TextFieldRoot, el.Input):
@@ -154,7 +170,7 @@ class TextFieldSlot(RadixThemesComponent):
     tag = "TextField.Slot"
 
     # Override theme color for text field slot
-    color: Var[str]
+    color: Var[LiteralAccentColor]
 
     # Override the gap spacing between slot and input: "1" - "9"
-    gap: Var[str]
+    gap: Var[LiteralSize]

reflex/components/radix/themes/components.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Any, Dict, List, Optional, Union, overload
+from typing import Any, Dict, List, Literal, Optional, Union, overload
 from reflex.components.radix.themes.base import CommonMarginProps
 from reflex.components.component import Component
 from reflex.el.elements import Input
@@ -12,6 +12,11 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventHandler, EventChain, EventSpec
 from reflex.style import Style
 
+LiteralButtonSize = Literal["1", "2", "3", "4"]
+LiteralSwitchSize = Literal["1", "2", "3", "4"]
+LiteralTextFieldSize = Literal["1", "2", "3"]
+LiteralTextFieldVariant = Literal["classic", "surface", "soft"]
+
 class Button(CommonMarginProps, RadixThemesComponent):
     @overload
     @classmethod
@@ -19,18 +24,126 @@ class Button(CommonMarginProps, RadixThemesComponent):
         cls,
         *children,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[Union[Var[str], str]] = None,
-        variant: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["solid", "soft", "outline", "ghost"]],
+                Literal["solid", "soft", "outline", "ghost"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
-        radius: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -130,18 +243,126 @@ class Switch(CommonMarginProps, RadixThemesComponent):
         required: Optional[Union[Var[bool], bool]] = None,
         name: Optional[Union[Var[str], str]] = None,
         value: Optional[Union[Var[str], str]] = None,
-        size: Optional[Union[Var[str], str]] = None,
-        variant: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["solid", "soft", "outline", "ghost"]],
+                Literal["solid", "soft", "outline", "ghost"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
-        radius: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -243,17 +464,125 @@ class TextFieldRoot(CommonMarginProps, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[str], str]] = None,
-        variant: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
-        radius: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -314,7 +643,7 @@ class TextFieldRoot(CommonMarginProps, RadixThemesComponent):
 
         Args:
             *children: Child components.
-            size: Button size "1" - "3"
+            size: Text field size "1" - "3"
             variant: Variant of text field: "classic" | "surface" | "soft"
             color: Override theme color for text field
             radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
@@ -344,17 +673,125 @@ class TextField(TextFieldRoot, Input):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[str], str]] = None,
-        variant: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
-        radius: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["classic", "surface", "soft"]],
+                Literal["classic", "surface", "soft"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        radius: Optional[
+            Union[
+                Var[Literal["none", "small", "medium", "large", "full"]],
+                Literal["none", "small", "medium", "large", "full"],
+            ]
+        ] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         accept: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -542,7 +979,7 @@ class TextField(TextFieldRoot, Input):
 
         Args:
             *children: The children of the component.
-            size: Button size "1" - "3"
+            size: Text field size "1" - "3"
             variant: Variant of text field: "classic" | "surface" | "soft"
             color: Override theme color for text field
             radius: Override theme radius for text field: "none" | "small" | "medium" | "large" | "full"
@@ -572,8 +1009,74 @@ class TextFieldSlot(RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        color: Optional[Union[Var[str], str]] = None,
-        gap: Optional[Union[Var[str], str]] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
+        gap: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/radix/themes/layout.py

@@ -1,9 +1,19 @@
 """Declarative layout and common spacing props."""
 from __future__ import annotations
 
+from typing import Literal
+
 from reflex.vars import Var
 
-from .base import CommonMarginProps, RadixThemesComponent
+from .base import (
+    CommonMarginProps,
+    LiteralAlign,
+    LiteralJustify,
+    LiteralSize,
+    RadixThemesComponent,
+)
+
+LiteralBoolNumber = Literal["0", "1"]
 
 
 class LayoutComponent(CommonMarginProps, RadixThemesComponent):
@@ -13,31 +23,31 @@ class LayoutComponent(CommonMarginProps, RadixThemesComponent):
     """
 
     # Padding: "0" - "9"
-    p: Var[str]
+    p: Var[LiteralSize]
 
     # Padding horizontal: "0" - "9"
-    px: Var[str]
+    px: Var[LiteralSize]
 
     # Padding vertical: "0" - "9"
-    py: Var[str]
+    py: Var[LiteralSize]
 
     # Padding top: "0" - "9"
-    pt: Var[str]
+    pt: Var[LiteralSize]
 
     # Padding right: "0" - "9"
-    pr: Var[str]
+    pr: Var[LiteralSize]
 
     # Padding bottom: "0" - "9"
-    pb: Var[str]
+    pb: Var[LiteralSize]
 
     # Padding left: "0" - "9"
-    pl: Var[str]
+    pl: Var[LiteralSize]
 
     # Whether the element will take up the smallest possible space: "0" | "1"
-    shrink: Var[str]
+    shrink: Var[LiteralBoolNumber]
 
     # Whether the element will take up the largest possible space: "0" | "1"
-    grow: Var[str]
+    grow: Var[LiteralBoolNumber]
 
 
 class Box(LayoutComponent):
@@ -46,6 +56,11 @@ class Box(LayoutComponent):
     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."""
 
@@ -55,32 +70,38 @@ class Flex(LayoutComponent):
     as_child: Var[bool]
 
     # How to display the element: "none" | "inline-flex" | "flex"
-    display: Var[str]
+    display: Var[LiteralFlexDisplay]
 
     # How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
-    direction: Var[str]
+    direction: Var[LiteralFlexDirection]
 
     # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
-    align: Var[str]
+    align: Var[LiteralAlign]
 
     # Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-    justify: Var[str]
+    justify: Var[LiteralJustify]
 
     # Whether children should wrap when they reach the end of their container: "nowrap" | "wrap" | "wrap-reverse"
-    wrap: Var[str]
+    wrap: Var[LiteralFlexWrap]
 
     # Gap between children: "0" - "9"
-    gap: Var[str]
+    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[str]
+    display: Var[LiteralGridDisplay]
 
     # Number of columns
     columns: Var[str]
@@ -89,22 +110,25 @@ class Grid(RadixThemesComponent):
     rows: Var[str]
 
     # How the grid items are layed out: "row" | "column" | "dense" | "row-dense" | "column-dense"
-    flow: Var[str]
+    flow: Var[LiteralGridFlow]
 
     # Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
-    align: Var[str]
+    align: Var[LiteralAlign]
 
     # Alignment of children along the cross axis: "start" | "center" | "end" | "between"
-    justify: Var[str]
+    justify: Var[LiteralJustify]
 
     # Gap between children: "0" - "9"
-    gap: Var[str]
+    gap: Var[LiteralSize]
 
     # Gap between children horizontal: "0" - "9"
-    gap_x: Var[str]
+    gap_x: Var[LiteralSize]
 
     # Gap between children vertical: "0" - "9"
-    gap_x: Var[str]
+    gap_x: Var[LiteralSize]
+
+
+LiteralContainerSize = Literal["1", "2", "3", "4"]
 
 
 class Container(LayoutComponent):
@@ -113,12 +137,19 @@ class Container(LayoutComponent):
     See https://www.radix-ui.com/themes/docs/components/container
     """
 
+    tag = "Container"
+
     # The size of the container: "1" - "4" (default "4")
-    size: Var[str]
+    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[str]
+    size: Var[LiteralSectionSize]

reflex/components/radix/themes/layout.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Any, Dict, List, Optional, Union, overload
+from typing import Any, Dict, List, Literal, Optional, Union, overload
 from reflex.components.radix.themes.base import CommonMarginProps
 from reflex.components.component import Component
 from reflex.components.radix.themes.base import RadixThemesComponent
@@ -11,28 +11,107 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventHandler, EventChain, EventSpec
 from reflex.style import Style
 
+LiteralBoolNumber = Literal["0", "1"]
+LiteralFlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
+LiteralFlexDisplay = Literal["none", "inline-flex", "flex"]
+LiteralFlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
+LiteralGridDisplay = Literal["none", "inline-grid", "grid"]
+LiteralGridFlow = Literal["row", "column", "dense", "row-dense", "column-dense"]
+LiteralContainerSize = Literal["1", "2", "3", "4"]
+LiteralSectionSize = Literal["1", "2", "3"]
+
 class LayoutComponent(CommonMarginProps, RadixThemesComponent):
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        p: Optional[Union[Var[str], str]] = None,
-        px: Optional[Union[Var[str], str]] = None,
-        py: Optional[Union[Var[str], str]] = None,
-        pt: Optional[Union[Var[str], str]] = None,
-        pr: Optional[Union[Var[str], str]] = None,
-        pb: Optional[Union[Var[str], str]] = None,
-        pl: Optional[Union[Var[str], str]] = None,
-        shrink: Optional[Union[Var[str], str]] = None,
-        grow: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        p: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        px: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        py: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pl: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "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["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -128,22 +207,92 @@ class Box(LayoutComponent):
     def create(  # type: ignore
         cls,
         *children,
-        p: Optional[Union[Var[str], str]] = None,
-        px: Optional[Union[Var[str], str]] = None,
-        py: Optional[Union[Var[str], str]] = None,
-        pt: Optional[Union[Var[str], str]] = None,
-        pr: Optional[Union[Var[str], str]] = None,
-        pb: Optional[Union[Var[str], str]] = None,
-        pl: Optional[Union[Var[str], str]] = None,
-        shrink: Optional[Union[Var[str], str]] = None,
-        grow: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        p: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        px: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        py: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pl: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "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["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -240,28 +389,128 @@ class Flex(LayoutComponent):
         cls,
         *children,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[Union[Var[str], str]] = None,
-        direction: Optional[Union[Var[str], str]] = None,
-        align: Optional[Union[Var[str], str]] = None,
-        justify: Optional[Union[Var[str], str]] = None,
-        wrap: Optional[Union[Var[str], str]] = None,
-        gap: Optional[Union[Var[str], str]] = None,
-        p: Optional[Union[Var[str], str]] = None,
-        px: Optional[Union[Var[str], str]] = None,
-        py: Optional[Union[Var[str], str]] = None,
-        pt: Optional[Union[Var[str], str]] = None,
-        pr: Optional[Union[Var[str], str]] = None,
-        pb: Optional[Union[Var[str], str]] = None,
-        pl: Optional[Union[Var[str], str]] = None,
-        shrink: Optional[Union[Var[str], str]] = None,
-        grow: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        display: Optional[
+            Union[
+                Var[Literal["none", "inline-flex", "flex"]],
+                Literal["none", "inline-flex", "flex"],
+            ]
+        ] = None,
+        direction: Optional[
+            Union[
+                Var[Literal["row", "column", "row-reverse", "column-reverse"]],
+                Literal["row", "column", "row-reverse", "column-reverse"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "baseline", "stretch"]],
+                Literal["start", "center", "end", "baseline", "stretch"],
+            ]
+        ] = None,
+        justify: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "between"]],
+                Literal["start", "center", "end", "between"],
+            ]
+        ] = None,
+        wrap: Optional[
+            Union[
+                Var[Literal["nowrap", "wrap", "wrap-reverse"]],
+                Literal["nowrap", "wrap", "wrap-reverse"],
+            ]
+        ] = None,
+        gap: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        p: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        px: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        py: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pl: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "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["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -365,14 +614,44 @@ class Grid(RadixThemesComponent):
         cls,
         *children,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        display: Optional[Union[Var[str], str]] = None,
+        display: Optional[
+            Union[
+                Var[Literal["none", "inline-grid", "grid"]],
+                Literal["none", "inline-grid", "grid"],
+            ]
+        ] = None,
         columns: Optional[Union[Var[str], str]] = None,
         rows: Optional[Union[Var[str], str]] = None,
-        flow: Optional[Union[Var[str], str]] = None,
-        align: Optional[Union[Var[str], str]] = None,
-        justify: Optional[Union[Var[str], str]] = None,
-        gap: Optional[Union[Var[str], str]] = None,
-        gap_x: Optional[Union[Var[str], str]] = None,
+        flow: Optional[
+            Union[
+                Var[Literal["row", "column", "dense", "row-dense", "column-dense"]],
+                Literal["row", "column", "dense", "row-dense", "column-dense"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "baseline", "stretch"]],
+                Literal["start", "center", "end", "baseline", "stretch"],
+            ]
+        ] = None,
+        justify: Optional[
+            Union[
+                Var[Literal["start", "center", "end", "between"]],
+                Literal["start", "center", "end", "between"],
+            ]
+        ] = None,
+        gap: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        gap_x: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -461,23 +740,95 @@ class Container(LayoutComponent):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[str], str]] = None,
-        p: Optional[Union[Var[str], str]] = None,
-        px: Optional[Union[Var[str], str]] = None,
-        py: Optional[Union[Var[str], str]] = None,
-        pt: Optional[Union[Var[str], str]] = None,
-        pr: Optional[Union[Var[str], str]] = None,
-        pb: Optional[Union[Var[str], str]] = None,
-        pl: Optional[Union[Var[str], str]] = None,
-        shrink: Optional[Union[Var[str], str]] = None,
-        grow: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3", "4"]], Literal["1", "2", "3", "4"]]
+        ] = None,
+        p: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        px: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        py: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pl: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "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["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -574,23 +925,95 @@ class Section(LayoutComponent):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[str], str]] = None,
-        p: Optional[Union[Var[str], str]] = None,
-        px: Optional[Union[Var[str], str]] = None,
-        py: Optional[Union[Var[str], str]] = None,
-        pt: Optional[Union[Var[str], str]] = None,
-        pr: Optional[Union[Var[str], str]] = None,
-        pb: Optional[Union[Var[str], str]] = None,
-        pl: Optional[Union[Var[str], str]] = None,
-        shrink: Optional[Union[Var[str], str]] = None,
-        grow: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
+        ] = None,
+        p: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        px: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        py: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        pl: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "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["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/components/radix/themes/typography.py

@@ -4,9 +4,21 @@ https://www.radix-ui.com/themes/docs/theme/typography
 """
 from __future__ import annotations
 
+from typing import Literal
+
 from reflex.vars import Var
 
-from .base import CommonMarginProps, RadixThemesComponent
+from .base import (
+    CommonMarginProps,
+    LiteralAccentColor,
+    LiteralVariant,
+    RadixThemesComponent,
+)
+
+LiteralTextWeight = Literal["light", "regular", "medium", "bold"]
+LiteralTextAlign = Literal["left", "center", "right"]
+LiteralTextSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
+LiteralTextTrim = Literal["normal", "start", "end", "both"]
 
 
 class Text(CommonMarginProps, RadixThemesComponent):
@@ -21,19 +33,19 @@ class Text(CommonMarginProps, RadixThemesComponent):
     as_: Var[str]
 
     # Text size: "1" - "9"
-    size: Var[str]
+    size: Var[LiteralTextSize]
 
     # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[str]
+    weight: Var[LiteralTextWeight]
 
     # Alignment of text in element: "left" | "center" | "right"
-    align: Var[str]
+    align: Var[LiteralTextAlign]
 
     # Removes the leading trim space: "normal" | "start" | "end" | "both"
-    trim: Var[str]
+    trim: Var[LiteralTextTrim]
 
     # Overrides the accent color inherited from the Theme.
-    color: Var[str]
+    color: Var[LiteralAccentColor]
 
     # Whether to render the text with higher contrast color
     high_contrast: Var[bool]
@@ -51,13 +63,13 @@ class Blockquote(CommonMarginProps, RadixThemesComponent):
     tag = "Blockquote"
 
     # Text size: "1" - "9"
-    size: Var[str]
+    size: Var[LiteralTextSize]
 
     # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[str]
+    weight: Var[LiteralTextWeight]
 
     # Overrides the accent color inherited from the Theme.
-    color: Var[str]
+    color: Var[LiteralAccentColor]
 
     # Whether to render the text with higher contrast color
     high_contrast: Var[bool]
@@ -69,7 +81,7 @@ class Code(Blockquote):
     tag = "Code"
 
     # The visual variant to apply: "solid" | "soft" | "outline" | "ghost"
-    variant: Var[str]
+    variant: Var[LiteralVariant]
 
 
 class Em(CommonMarginProps, RadixThemesComponent):
@@ -84,7 +96,10 @@ class Kbd(CommonMarginProps, RadixThemesComponent):
     tag = "Kbd"
 
     # Text size: "1" - "9"
-    size: Var[str]
+    size: Var[LiteralTextSize]
+
+
+LiteralLinkUnderline = Literal["auto", "hover", "always"]
 
 
 class Link(CommonMarginProps, RadixThemesComponent):
@@ -96,19 +111,19 @@ class Link(CommonMarginProps, RadixThemesComponent):
     as_child: Var[bool]
 
     # Text size: "1" - "9"
-    size: Var[str]
+    size: Var[LiteralTextSize]
 
     # Thickness of text: "light" | "regular" | "medium" | "bold"
-    weight: Var[str]
+    weight: Var[LiteralTextWeight]
 
     # Removes the leading trim space: "normal" | "start" | "end" | "both"
-    trim: Var[str]
+    trim: Var[LiteralTextTrim]
 
     # Sets the visibility of the underline affordance: "auto" | "hover" | "always"
-    underline: Var[str]
+    underline: Var[LiteralLinkUnderline]
 
     # Overrides the accent color inherited from the Theme.
-    color: Var[str]
+    color: Var[LiteralAccentColor]
 
     # Whether to render the text with higher contrast color
     high_contrast: Var[bool]

reflex/components/radix/themes/typography.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Any, Dict, List, Optional, Union, overload
+from typing import Any, Dict, List, Literal, Optional, Union, overload
 from reflex.components.radix.themes.base import CommonMarginProps
 from reflex.components.component import Component
 from reflex.components.radix.themes.base import RadixThemesComponent
@@ -11,6 +11,12 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventHandler, EventChain, EventSpec
 from reflex.style import Style
 
+LiteralTextWeight = Literal["light", "regular", "medium", "bold"]
+LiteralTextAlign = Literal["left", "center", "right"]
+LiteralTextSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
+LiteralTextTrim = Literal["normal", "start", "end", "both"]
+LiteralLinkUnderline = Literal["auto", "hover", "always"]
+
 class Text(CommonMarginProps, RadixThemesComponent):
     @overload
     @classmethod
@@ -19,19 +25,135 @@ class Text(CommonMarginProps, RadixThemesComponent):
         *children,
         as_child: Optional[Union[Var[bool], bool]] = None,
         as_: Optional[Union[Var[str], str]] = None,
-        size: Optional[Union[Var[str], str]] = None,
-        weight: Optional[Union[Var[str], str]] = None,
-        align: Optional[Union[Var[str], str]] = None,
-        trim: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["left", "center", "right"]],
+                Literal["left", "center", "right"],
+            ]
+        ] = None,
+        trim: Optional[
+            Union[
+                Var[Literal["normal", "start", "end", "both"]],
+                Literal["normal", "start", "end", "both"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -128,19 +250,135 @@ class Heading(Text):
         *children,
         as_child: Optional[Union[Var[bool], bool]] = None,
         as_: Optional[Union[Var[str], str]] = None,
-        size: Optional[Union[Var[str], str]] = None,
-        weight: Optional[Union[Var[str], str]] = None,
-        align: Optional[Union[Var[str], str]] = None,
-        trim: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        align: Optional[
+            Union[
+                Var[Literal["left", "center", "right"]],
+                Literal["left", "center", "right"],
+            ]
+        ] = None,
+        trim: Optional[
+            Union[
+                Var[Literal["normal", "start", "end", "both"]],
+                Literal["normal", "start", "end", "both"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -235,17 +473,123 @@ class Blockquote(CommonMarginProps, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[str], str]] = None,
-        weight: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -336,18 +680,129 @@ class Code(Blockquote):
     def create(  # type: ignore
         cls,
         *children,
-        variant: Optional[Union[Var[str], str]] = None,
-        size: Optional[Union[Var[str], str]] = None,
-        weight: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
+        variant: Optional[
+            Union[
+                Var[Literal["solid", "soft", "outline", "ghost"]],
+                Literal["solid", "soft", "outline", "ghost"],
+            ]
+        ] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -439,13 +894,48 @@ class Em(CommonMarginProps, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -532,14 +1022,54 @@ class Kbd(CommonMarginProps, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        size: Optional[Union[Var[str], str]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -628,19 +1158,135 @@ class Link(CommonMarginProps, RadixThemesComponent):
         cls,
         *children,
         as_child: Optional[Union[Var[bool], bool]] = None,
-        size: Optional[Union[Var[str], str]] = None,
-        weight: Optional[Union[Var[str], str]] = None,
-        trim: Optional[Union[Var[str], str]] = None,
-        underline: Optional[Union[Var[str], str]] = None,
-        color: Optional[Union[Var[str], str]] = None,
+        size: Optional[
+            Union[
+                Var[Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        weight: Optional[
+            Union[
+                Var[Literal["light", "regular", "medium", "bold"]],
+                Literal["light", "regular", "medium", "bold"],
+            ]
+        ] = None,
+        trim: Optional[
+            Union[
+                Var[Literal["normal", "start", "end", "both"]],
+                Literal["normal", "start", "end", "both"],
+            ]
+        ] = None,
+        underline: Optional[
+            Union[
+                Var[Literal["auto", "hover", "always"]],
+                Literal["auto", "hover", "always"],
+            ]
+        ] = None,
+        color: Optional[
+            Union[
+                Var[
+                    Literal[
+                        "tomato",
+                        "red",
+                        "ruby",
+                        "crimson",
+                        "pink",
+                        "plum",
+                        "purple",
+                        "violet",
+                        "iris",
+                        "indigo",
+                        "blue",
+                        "cyan",
+                        "teal",
+                        "jade",
+                        "green",
+                        "grass",
+                        "brown",
+                        "orange",
+                        "sky",
+                        "mint",
+                        "lime",
+                        "yellow",
+                        "amber",
+                        "gold",
+                        "bronze",
+                        "gray",
+                    ]
+                ],
+                Literal[
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+            ]
+        ] = None,
         high_contrast: Optional[Union[Var[bool], bool]] = None,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -734,13 +1380,48 @@ class Quote(CommonMarginProps, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -827,13 +1508,48 @@ class Strong(CommonMarginProps, RadixThemesComponent):
     def create(  # type: ignore
         cls,
         *children,
-        m: Optional[Union[Var[str], str]] = None,
-        mx: Optional[Union[Var[str], str]] = None,
-        my: Optional[Union[Var[str], str]] = None,
-        mt: Optional[Union[Var[str], str]] = None,
-        mr: Optional[Union[Var[str], str]] = None,
-        mb: Optional[Union[Var[str], str]] = None,
-        ml: Optional[Union[Var[str], str]] = None,
+        m: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mx: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        my: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mt: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mr: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        mb: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
+        ml: Optional[
+            Union[
+                Var[Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]],
+                Literal["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+            ]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,

reflex/state.py

@@ -566,10 +566,11 @@ class State(Base, ABC, extra=pydantic.Extra.allow):
         """
         # Get the pydantic field for the var.
         field = cls.get_fields()[prop._var_name]
-        default_value = prop.get_default_value()
-        if field.required and default_value is not None:
-            field.required = False
-            field.default = default_value
+        if field.required:
+            default_value = prop.get_default_value()
+            if default_value is not None:
+                field.required = False
+                field.default = default_value
 
     @staticmethod
     def _get_base_functions() -> dict[str, FunctionType]:

reflex/vars.py

@@ -15,12 +15,15 @@ from typing import (
     Callable,
     Dict,
     List,
+    Literal,
     Optional,
     Tuple,
     Type,
     Union,
     _GenericAlias,  # type: ignore
     cast,
+    get_args,
+    get_origin,
     get_type_hints,
 )
 
@@ -1233,10 +1236,13 @@ class BaseVar(Var):
             ImportError: If the var is a dataframe and pandas is not installed.
         """
         type_ = (
-            self._var_type.__origin__
+            get_origin(self._var_type)
             if types.is_generic_alias(self._var_type)
             else self._var_type
         )
+        if type_ is Literal:
+            args = get_args(self._var_type)
+            return args[0] if args else None
         if issubclass(type_, str):
             return ""
         if issubclass(type_, types.get_args(Union[int, float])):

scripts/pyi_generator.py

@@ -1,5 +1,6 @@
 """The pyi generator module."""
 
+import ast
 import importlib
 import inspect
 import os
@@ -48,6 +49,39 @@ from reflex.components.libs.chakra import (
     LiteralMenuStrategy,
     LiteralTagSize,
 )
+from reflex.components.radix.themes.base import (
+    LiteralAccentColor,
+    LiteralAlign,
+    LiteralAppearance,
+    LiteralGrayColor,
+    LiteralJustify,
+    LiteralPanelBackground,
+    LiteralRadius,
+    LiteralScaling,
+    LiteralSize,
+    LiteralVariant,
+)
+from reflex.components.radix.themes.components import (
+    LiteralButtonSize,
+    LiteralSwitchSize,
+)
+from reflex.components.radix.themes.layout import (
+    LiteralBoolNumber,
+    LiteralContainerSize,
+    LiteralFlexDirection,
+    LiteralFlexDisplay,
+    LiteralFlexWrap,
+    LiteralGridDisplay,
+    LiteralGridFlow,
+    LiteralSectionSize,
+)
+from reflex.components.radix.themes.typography import (
+    LiteralLinkUnderline,
+    LiteralTextAlign,
+    LiteralTextSize,
+    LiteralTextTrim,
+    LiteralTextWeight,
+)
 
 # NOQA
 from reflex.event import EventChain
@@ -93,6 +127,31 @@ ruff_dont_remove = [
     LiteralVerticalAlign,
     LiteralIconType,
     LiteralPosition,
+    LiteralAccentColor,
+    LiteralAlign,
+    LiteralAppearance,
+    LiteralBoolNumber,
+    LiteralButtonSize,
+    LiteralContainerSize,
+    LiteralFlexDirection,
+    LiteralFlexDisplay,
+    LiteralFlexWrap,
+    LiteralGrayColor,
+    LiteralGridDisplay,
+    LiteralGridFlow,
+    LiteralJustify,
+    LiteralLinkUnderline,
+    LiteralPanelBackground,
+    LiteralRadius,
+    LiteralScaling,
+    LiteralSectionSize,
+    LiteralSize,
+    LiteralSwitchSize,
+    LiteralTextAlign,
+    LiteralTextSize,
+    LiteralTextTrim,
+    LiteralTextWeight,
+    LiteralVariant,
 ]
 
 EXCLUDED_FILES = [
@@ -167,11 +226,12 @@ def _get_typing_import(_module):
 
 
 def _get_var_definition(_module, _var_name):
-    return [
-        line.split(" = ")[0]
-        for line in inspect.getsource(_module).splitlines()
-        if line.startswith(_var_name)
-    ]
+    for node in ast.parse(inspect.getsource(_module)).body:
+        if isinstance(node, ast.Assign) and _var_name in [
+            t.id for t in node.targets if isinstance(t, ast.Name)
+        ]:
+            return ast.unparse(node)
+    raise Exception(f"Could not find var {_var_name} in module {_module}")
 
 
 class PyiGenerator:
@@ -318,7 +378,7 @@ class PyiGenerator:
         pyi_content.extend(self._generate_imports(variables, classes))
 
         for _name, _var in variables:
-            pyi_content.extend(self._generate_pyi_variable(_name, _var))
+            pyi_content.append(self._generate_pyi_variable(_name, _var))
 
         for _fname, _func in functions:
             pyi_content.extend(self._generate_function(_fname, _func))
@@ -346,13 +406,20 @@ class PyiGenerator:
 
         self.current_module = importlib.import_module(module_import)
 
-        local_variables = [
-            (name, obj)
-            for name, obj in vars(self.current_module).items()
-            if not name.startswith("_")
-            and not inspect.isclass(obj)
-            and not inspect.isfunction(obj)
-        ]
+        local_variables = []
+        for node in ast.parse(inspect.getsource(self.current_module)).body:
+            if isinstance(node, ast.Assign):
+                for t in node.targets:
+                    if not isinstance(t, ast.Name):
+                        # Skip non-var assignment statements
+                        continue
+                    if t.id.startswith("_"):
+                        # Skip private vars
+                        continue
+                    obj = getattr(self.current_module, t.id, None)
+                    if inspect.isclass(obj) or inspect.isfunction(obj):
+                        continue
+                    local_variables.append((t.id, obj))
 
         functions = [
             (name, obj)