Props as Literals (#1921)

reflex/components/component.py

@@ -106,6 +106,7 @@ class Component(Base, ABC):
 
         Raises:
             TypeError: If an invalid prop is passed.
+            ValueError: If a prop value is invalid.
         """
         # Set the id and children initially.
         children = kwargs.get("children", [])
@@ -154,9 +155,25 @@ class Component(Base, ABC):
                     if kwargs[key] is None:
                         raise TypeError
 
+                    expected_type = fields[key].outer_type_.__args__[0]
+
+                    if (
+                        types.is_literal(expected_type)
+                        and value not in expected_type.__args__
+                    ):
+                        allowed_values = expected_type.__args__
+                        if value not in allowed_values:
+                            raise ValueError(
+                                f"prop value for {key} of the `{type(self).__name__}` component should be one of the following: {','.join(allowed_values)}. Got '{value}' instead"
+                            )
+
                     # Get the passed type and the var type.
                     passed_type = kwargs[key]._var_type
-                    expected_type = fields[key].outer_type_.__args__[0]
+                    expected_type = (
+                        type(expected_type.__args__[0])
+                        if types.is_literal(expected_type)
+                        else expected_type
+                    )
                 except TypeError:
                     # If it is not a valid var, check the base types.
                     passed_type = type(value)

reflex/components/datadisplay/badge.py

@@ -1,6 +1,6 @@
 """Badge component."""
 
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralVariant
 from reflex.vars import Var
 
 
@@ -10,7 +10,7 @@ class Badge(ChakraComponent):
     tag = "Badge"
 
     # Variant of the badge ("solid" | "subtle" | "outline")
-    variant: Var[str]
+    variant: Var[LiteralVariant]
 
     # The color of the badge
     color_scheme: Var[str]

reflex/components/datadisplay/badge.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Optional, Union, overload
+from typing import Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class Badge(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, variant: Optional[Union[Var[str], str]] = None, color_scheme: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Badge":  # type: ignore
+    def create(cls, *children, variant: Optional[Union[Var[Literal["solid", "subtle", "outline"]], Literal["solid", "subtle", "outline"]]] = None, color_scheme: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Badge":  # type: ignore
         """Create the component.
 
         Args:

reflex/components/datadisplay/code.py

@@ -5,7 +5,7 @@ from typing import Dict, Optional, Union
 from reflex.components.component import Component
 from reflex.components.forms import Button
 from reflex.components.layout import Box
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralTheme
 from reflex.components.media import Icon
 from reflex.event import set_clipboard
 from reflex.style import Style
@@ -24,7 +24,7 @@ class CodeBlock(Component):
     tag = "Prism"
 
     # The theme to use ("light" or "dark").
-    theme: Var[str]
+    theme: Var[LiteralTheme]
 
     # The language to use.
     language: Var[str]
@@ -59,7 +59,7 @@ class CodeBlock(Component):
         *children,
         can_copy: Optional[bool] = False,
         copy_button: Optional[Union[bool, Component]] = None,
-        **props
+        **props,
     ):
         """Create a text component.
 

reflex/components/datadisplay/code.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Dict, Optional, Union, overload
+from typing import Dict, Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -14,7 +14,7 @@ PRISM_STYLES_PATH: str
 class CodeBlock(Component):
     @overload
     @classmethod
-    def create(cls, *children, can_copy: Optional[bool] = None, copy_button: Optional[Union[bool, Component]] = None, theme: Optional[Union[Var[str], str]] = None, language: Optional[Union[Var[str], str]] = None, show_line_numbers: Optional[Union[Var[bool], bool]] = None, starting_line_number: Optional[Union[Var[int], int]] = None, wrap_long_lines: Optional[Union[Var[bool], bool]] = None, custom_style: Optional[Union[Var[Dict[str, str]], Dict[str, str]]] = None, code_tag_props: Optional[Union[Var[Dict[str, str]], Dict[str, str]]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "CodeBlock":  # type: ignore
+    def create(cls, *children, can_copy: Optional[bool] = None, copy_button: Optional[Union[bool, Component]] = None, theme: Optional[Union[Var[Literal["light", "dark"]], Literal["light", "dark"]]] = None, language: Optional[Union[Var[str], str]] = None, show_line_numbers: Optional[Union[Var[bool], bool]] = None, starting_line_number: Optional[Union[Var[int], int]] = None, wrap_long_lines: Optional[Union[Var[bool], bool]] = None, custom_style: Optional[Dict[str, str]] = None, code_tag_props: Optional[Union[Var[Dict[str, str]], Dict[str, str]]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "CodeBlock":  # type: ignore
         """Create a text component.
 
         Args:

reflex/components/datadisplay/divider.py

@@ -1,6 +1,7 @@
 """A line to divide parts of the layout."""
 
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.graphing.recharts.recharts import LiteralLayout
+from reflex.components.libs.chakra import ChakraComponent, LiteralDividerVariant
 from reflex.vars import Var
 
 
@@ -10,7 +11,7 @@ class Divider(ChakraComponent):
     tag = "Divider"
 
     # Pass the orientation prop and set it to either horizontal or vertical. If the vertical orientation is used, make sure that the parent element is assigned a height.
-    orientation: Var[str]
+    orientation: Var[LiteralLayout]
 
     # Variant of the divider ("solid" | "dashed")
-    variant: Var[str]
+    variant: Var[LiteralDividerVariant]

reflex/components/datadisplay/divider.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Optional, Union, overload
+from typing import Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class Divider(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, orientation: Optional[Union[Var[str], str]] = None, variant: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Divider":  # type: ignore
+    def create(cls, *children, orientation: Optional[Union[Var[Literal["horizontal", "vertical"]], Literal["horizontal", "vertical"]]] = None, variant: Optional[Union[Var[Literal["solid", "dashed"]], Literal["solid", "dashed"]]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Divider":  # type: ignore
         """Create the component.
 
         Args:

reflex/components/datadisplay/table.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import List, Optional, Union, overload
+from typing import List, Optional, Tuple, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -46,6 +46,7 @@ class Thead(ChakraComponent):
 
         Returns:
             The table header component.
+
         """
         ...
 
@@ -62,7 +63,7 @@ class Tbody(ChakraComponent):
             **props: The properties of the component.
 
         Returns:
-            Component: _description_
+            Component: The table body component
         """
         ...
 

reflex/components/datadisplay/tag.py

@@ -2,7 +2,12 @@
 from typing import Optional
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralTagColorScheme,
+    LiteralTagSize,
+    LiteralVariant,
+)
 from reflex.vars import Var
 
 
@@ -39,17 +44,17 @@ class Tag(ChakraComponent):
     # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" |
     #  "cyan" | "purple" | "pink"
     # default: "gray"
-    color_scheme: Var[str]
+    color_scheme: Var[LiteralTagColorScheme]
 
     # The size of the tag
     # options: "sm" | "md" | "lg"
     # default: "md"
-    size: Var[str]
+    size: Var[LiteralTagSize]
 
     # The variant of the tag
     # options: "solid" | "subtle" | "outline"
     # default: "solid"
-    variant: Var[str]
+    variant: Var[LiteralVariant]
 
     @classmethod
     def create(
@@ -59,7 +64,7 @@ class Tag(ChakraComponent):
         left_icon: Optional[Component] = None,
         right_icon: Optional[Component] = None,
         close_button: Optional[Component] = None,
-        **props
+        **props,
     ) -> Component:
         """Creates a Chakra Tag with a label and optionally left_icon, right_icon, and close_button, and returns it.
 

reflex/components/datadisplay/tag.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Optional, Union, overload
+from typing import Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -84,7 +84,7 @@ class TagCloseButton(ChakraComponent):
 class Tag(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, left_icon: Optional[Component] = None, right_icon: Optional[Component] = None, close_button: Optional[Component] = None, color_scheme: Optional[Union[Var[str], str]] = None, size: Optional[Union[Var[str], str]] = None, variant: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Tag":  # type: ignore
+    def create(cls, *children, left_icon: Optional[Component] = None, right_icon: Optional[Component] = None, close_button: Optional[Component] = None, color_scheme: Optional[Union[Var[Literal["gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"]], Literal["gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"]]] = None, size: Optional[Union[Var[Literal["sm", "md", "lg"]], Literal["sm", "md", "lg"]]] = None, variant: Optional[Union[Var[Literal["solid", "subtle", "outline"]], Literal["solid", "subtle", "outline"]]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Tag":  # type: ignore
         """Creates a Chakra Tag with a label and optionally left_icon, right_icon, and close_button, and returns it.
 
         Args:

reflex/components/disclosure/tabs.py

@@ -3,7 +3,12 @@
 from typing import List, Optional, Tuple
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralColorScheme,
+    LiteralTabsVariant,
+    LiteralTagAlign,
+)
 from reflex.vars import Var
 
 
@@ -13,7 +18,7 @@ class Tabs(ChakraComponent):
     tag = "Tabs"
 
     # The alignment of the tabs ("center" | "end" | "start").
-    align: Var[str]
+    align: Var[LiteralTagAlign]
 
     # The initial index of the selected tab (in uncontrolled mode).
     default_index: Var[int]
@@ -34,10 +39,10 @@ class Tabs(ChakraComponent):
     orientation: Var[str]
 
     # "line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"
-    variant: Var[str]
+    variant: Var[LiteralTabsVariant]
 
     # The color scheme of the tabs.
-    color_scheme: Var[str]
+    color_scheme: Var[LiteralColorScheme]
 
     @classmethod
     def create(

reflex/components/feedback/alert.py

@@ -1,7 +1,11 @@
 """Alert components."""
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralAlertVariant,
+    LiteralStatus,
+)
 from reflex.vars import Var
 
 
@@ -11,10 +15,10 @@ class Alert(ChakraComponent):
     tag = "Alert"
 
     # The status of the alert ("success" | "info" | "warning" | "error")
-    status: Var[str]
+    status: Var[LiteralStatus]
 
     # "subtle" | "left-accent" | "top-accent" | "solid"
-    variant: Var[str]
+    variant: Var[LiteralAlertVariant]
 
     @classmethod
     def create(

reflex/components/feedback/alert.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Optional, Union, overload
+from typing import Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class Alert(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, icon, title, desc, status: Optional[Union[Var[str], str]] = None, variant: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Alert":  # type: ignore
+    def create(cls, *children, icon, title, desc, status: Optional[Union[Var[Literal["success", "info", "warning", "error"]], Literal["success", "info", "warning", "error"]]] = None, variant: Optional[Union[Var[Literal["subtle", "left-accent", "top-accent", "solid"]], Literal["subtle", "left-accent", "top-accent", "solid"]]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Alert":  # type: ignore
         """Create an alert component.
 
         Args:

reflex/components/feedback/circularprogress.py

@@ -1,4 +1,5 @@
 """Container to stack elements with spacing."""
+from typing import Union
 
 from reflex.components.component import Component
 from reflex.components.libs.chakra import ChakraComponent
@@ -23,7 +24,7 @@ class CircularProgress(ChakraComponent):
     min_: Var[int]
 
     # This defines the stroke width of the svg circle.
-    thickness: Var[str]
+    thickness: Var[Union[str, int]]
 
     # The color name of the progress track. Use a color key in the theme object
     track_color: Var[str]

reflex/components/feedback/circularprogress.pyi

@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class CircularProgress(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, label, cap_is_round: Optional[Union[Var[bool], bool]] = None, is_indeterminate: Optional[Union[Var[bool], bool]] = None, max_: Optional[Union[Var[int], int]] = None, min_: Optional[Union[Var[int], int]] = None, thickness: Optional[Union[Var[int], int]] = None, track_color: Optional[Union[Var[str], str]] = None, value: Optional[Union[Var[int], int]] = None, value_text: Optional[Union[Var[str], str]] = None, color: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "CircularProgress":  # type: ignore
+    def create(cls, *children, label, cap_is_round: Optional[Union[Var[bool], bool]] = None, is_indeterminate: Optional[Union[Var[bool], bool]] = None, max_: Optional[Union[Var[int], int]] = None, min_: Optional[Union[Var[int], int]] = None, thickness: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None, track_color: Optional[Union[Var[str], str]] = None, value: Optional[Union[Var[int], int]] = None, value_text: Optional[Union[Var[str], str]] = None, color: Optional[Union[Var[str], str]] = None, size: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "CircularProgress":  # type: ignore
         """Create a circular progress component.
 
         Args:
@@ -26,6 +26,7 @@ class CircularProgress(ChakraComponent):
             value: Current progress (must be between min/max).
             value_text: The desired valueText to use in place of the value.
             color: The color name of the progress bar
+            size: The size of the circular progress
             label: A label to add in the circular progress. Defaults to None.
             **props: the props of the component.
 

reflex/components/feedback/progress.py

@@ -14,7 +14,7 @@ class Progress(ChakraComponent):
     # If true, the progress bar will show stripe
     has_stripe: Var[bool]
 
-    # If true, and hasStripe is true, the stripes will be animated
+    # If true, and has_stripe is true, the stripes will be animated
     is_animated: Var[bool]
 
     # If true, the progress will be indeterminate and the value prop will be ignored

reflex/components/feedback/progress.pyi

@@ -18,7 +18,7 @@ class Progress(ChakraComponent):
         Args:
             *children: The children of the component.
             has_stripe: If true, the progress bar will show stripe
-            is_animated: If true, and hasStripe is true, the stripes will be animated
+            is_animated: If true, and has_stripe is true, the stripes will be animated
             is_indeterminate: If true, the progress will be indeterminate and the value prop will be ignored
             max_: The maximum value of the progress
             min_: The minimum value of the progress

reflex/components/feedback/spinner.py

@@ -1,6 +1,6 @@
 """Container to stack elements with spacing."""
 
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralSpinnerSize
 from reflex.vars import Var
 
 
@@ -22,4 +22,4 @@ class Spinner(ChakraComponent):
     thickness: Var[int]
 
     # "xs" | "sm" | "md" | "lg" | "xl"
-    size: Var[str]
+    size: Var[LiteralSpinnerSize]

reflex/components/feedback/spinner.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Optional, Union, overload
+from typing import Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class Spinner(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, empty_color: Optional[Union[Var[str], str]] = None, label: Optional[Union[Var[str], str]] = None, speed: Optional[Union[Var[str], str]] = None, thickness: Optional[Union[Var[int], int]] = None, size: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Spinner":  # type: ignore
+    def create(cls, *children, empty_color: Optional[Union[Var[str], str]] = None, label: Optional[Union[Var[str], str]] = None, speed: Optional[Union[Var[str], str]] = None, thickness: Optional[Union[Var[int], int]] = None, size: Optional[Union[Var[Literal["sm", "md", "lg", "xs"]], Literal["sm", "md", "lg", "xs"]]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Spinner":  # type: ignore
         """Create the component.
 
         Args:

reflex/components/forms/button.py

@@ -1,7 +1,13 @@
 """A button component."""
 from typing import List
 
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralButtonSize,
+    LiteralButtonVariant,
+    LiteralColorScheme,
+    LiteralSpinnerPlacement,
+)
 from reflex.vars import Var
 
 
@@ -29,21 +35,20 @@ class Button(ChakraComponent):
     loading_text: Var[str]
 
     # "lg" | "md" | "sm" | "xs"
-    size: Var[str]
-
+    size: Var[LiteralButtonSize]
     # "ghost" | "outline" | "solid" | "link" | "unstyled"
-    variant: Var[str]
+    variant: Var[LiteralButtonVariant]
 
     # Built in color scheme for ease of use.
     # Options:
     # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
     # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
-    color_scheme: Var[str]
+    color_scheme: Var[LiteralColorScheme]
 
     # Position of the loading spinner.
     # Options:
     # "start" | "end"
-    spinner_placement: Var[str]
+    spinner_placement: Var[LiteralSpinnerPlacement]
 
     # The type of button.
     type_: Var[str]
@@ -67,7 +72,6 @@ class ButtonGroup(ChakraComponent):
     spacing: Var[int]
 
     # "lg" | "md" | "sm" | "xs"
-    size: Var[str]
-
+    size: Var[LiteralButtonSize]
     # "ghost" | "outline" | "solid" | "link" | "unstyled"
-    variant: Var[str]
+    variant: Var[LiteralButtonVariant]

reflex/components/forms/checkbox.py

@@ -3,7 +3,11 @@ from __future__ import annotations
 
 from typing import Any, Union
 
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralColorScheme,
+    LiteralTagSize,
+)
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -17,10 +21,10 @@ class Checkbox(ChakraComponent):
     # Options:
     # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
     # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
-    color_scheme: Var[str]
+    color_scheme: Var[LiteralColorScheme]
 
     # "sm" | "md" | "lg"
-    size: Var[str]
+    size: Var[LiteralTagSize]
 
     # If true, the checkbox will be checked.
     is_checked: Var[bool]

reflex/components/forms/editor.py

@@ -2,7 +2,7 @@
 from __future__ import annotations
 
 import enum
-from typing import Any, Dict, List, Optional, Union
+from typing import Any, Dict, List, Literal, Optional, Union
 
 from reflex.base import Base
 from reflex.components.component import Component, NoSSRComponent
@@ -86,7 +86,31 @@ class Editor(NoSSRComponent):
     # options: "en" | "da" | "de" | "es" | "fr" | "ja" | "ko" | "pt_br" |
     #  "ru" | "zh_cn" | "ro" | "pl" | "ckb" | "lv" | "se" | "ua" | "he" | "it"
     # default : "en"
-    lang: Var[Union[str, dict]]
+    lang: Var[
+        Union[
+            Literal[
+                "en",
+                "da",
+                "de",
+                "es",
+                "fr",
+                "ja",
+                "ko",
+                "pt_br",
+                "ru",
+                "zh_cn",
+                "ro",
+                "pl",
+                "ckb",
+                "lv",
+                "se",
+                "ua",
+                "he",
+                "it",
+            ],
+            dict,
+        ]
+    ]
 
     # This is used to set the HTML form name of the editor.
     # This means on HTML form submission,

reflex/components/forms/input.py

@@ -4,7 +4,11 @@ from typing import Any, Dict
 
 from reflex.components.component import Component
 from reflex.components.forms.debounce import DebounceInput
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralButtonSize,
+    LiteralInputVariant,
+)
 from reflex.constants import EventTriggers
 from reflex.utils import imports
 from reflex.vars import ImportVar, Var
@@ -46,10 +50,10 @@ class Input(ChakraComponent):
     is_required: Var[bool]
 
     # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[str]
+    variant: Var[LiteralInputVariant]
 
     # "lg" | "md" | "sm" | "xs"
-    size: Var[str]
+    size: Var[LiteralButtonSize]
 
     def _get_imports(self) -> imports.ImportDict:
         return imports.merge_imports(

reflex/components/forms/numberinput.py

@@ -4,7 +4,10 @@ from numbers import Number
 from typing import Any, Dict
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralInputVariant,
+)
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -36,7 +39,7 @@ class NumberInput(ChakraComponent):
     focus_input_on_change: Var[bool]
 
     # Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices ("text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal")
-    input_mode: Var[str]
+    # input_mode: Var[LiteralInputNumberMode]
 
     # Whether the input should be disabled.
     is_disabled: Var[bool]
@@ -63,7 +66,7 @@ class NumberInput(ChakraComponent):
     min_: Var[Number]
 
     # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[str]
+    variant: Var[LiteralInputVariant]
 
     def get_event_triggers(self) -> Dict[str, Any]:
         """Get the event triggers that pass the component's value to the handler.

reflex/components/forms/pininput.py

@@ -5,7 +5,7 @@ from typing import Any, Optional, Union
 
 from reflex.components.component import Component
 from reflex.components.layout import Foreach
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralInputVariant
 from reflex.constants import EventTriggers
 from reflex.utils import format
 from reflex.vars import Var
@@ -56,7 +56,7 @@ class PinInput(ChakraComponent):
     type_: Var[str]
 
     # "outline" | "flushed" | "filled" | "unstyled"
-    variant: Var[str]
+    variant: Var[LiteralInputVariant]
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.

reflex/components/forms/rangeslider.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 from typing import Any, List, Optional, Union
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralChakraDirection
 from reflex.constants import EventTriggers
 from reflex.utils import format
 from reflex.vars import Var
@@ -22,7 +22,7 @@ class RangeSlider(ChakraComponent):
     default_value: Var[List[int]]
 
     # The writing mode ("ltr" | "rtl")
-    direction: Var[str]
+    direction: Var[LiteralChakraDirection]
 
     # If false, the slider handle will not capture focus when value changes.
     focus_thumb_on_change: Var[bool]

reflex/components/forms/select.py

@@ -4,7 +4,7 @@ from typing import Any, Dict, List, Union
 
 from reflex.components.component import Component
 from reflex.components.layout.foreach import Foreach
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralInputVariant
 from reflex.components.typography.text import Text
 from reflex.constants import EventTriggers
 from reflex.utils.types import _issubclass
@@ -41,7 +41,7 @@ class Select(ChakraComponent):
     is_required: Var[bool]
 
     # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[str]
+    variant: Var[LiteralInputVariant]
 
     # The size of the select.
     size: Var[str]

reflex/components/forms/slider.py

@@ -4,7 +4,8 @@ from __future__ import annotations
 from typing import Any, Union
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.graphing.recharts.recharts import LiteralLayout
+from reflex.components.libs.chakra import ChakraComponent, LiteralChakraDirection
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -24,7 +25,7 @@ class Slider(ChakraComponent):
     default_value: Var[int]
 
     # The writing mode ("ltr" | "rtl")
-    direction: Var[str]
+    direction: Var[LiteralChakraDirection]
 
     # If false, the slider handle will not capture focus when value changes.
     focus_thumb_on_change: Var[bool]
@@ -51,7 +52,7 @@ class Slider(ChakraComponent):
     min_steps_between_thumbs: Var[int]
 
     # Oreintation of the slider vertical | horizontal.
-    orientation: Var[str]
+    orientation: Var[LiteralLayout]
 
     # Minimum height of the slider.
     min_h: Var[str]

reflex/components/forms/switch.py

@@ -3,7 +3,7 @@ from __future__ import annotations
 
 from typing import Any, Union
 
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralColorScheme
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -41,7 +41,7 @@ class Switch(ChakraComponent):
     placeholder: Var[str]
 
     # The color scheme of the switch (e.g. "blue", "green", "red", etc.)
-    color_scheme: Var[str]
+    color_scheme: Var[LiteralColorScheme]
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.

reflex/components/forms/textarea.py

@@ -5,7 +5,7 @@ from typing import Any, Union
 
 from reflex.components.component import Component
 from reflex.components.forms.debounce import DebounceInput
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralInputVariant
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
@@ -43,7 +43,7 @@ class TextArea(ChakraComponent):
     is_required: Var[bool]
 
     # "outline" | "filled" | "flushed" | "unstyled"
-    variant: Var[str]
+    variant: Var[LiteralInputVariant]
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.

reflex/components/graphing/recharts/__init__.py

@@ -39,6 +39,32 @@ from .polar import (
     Radar,
     RadialBar,
 )
+from .recharts import (
+    LiteralAnimationEasing,
+    LiteralAreaType,
+    LiteralAxisType,
+    LiteralBarChartStackOffset,
+    LiteralComposedChartBaseValue,
+    LiteralDirection,
+    LiteralGridType,
+    LiteralIconType,
+    LiteralIfOverflow,
+    LiteralInterval,
+    LiteralLayout,
+    LiteralLegendAlign,
+    LiteralLegendType,
+    LiteralLineType,
+    LiteralOrientation,
+    LiteralOrientationLeftRightMiddle,
+    LiteralOrientationTopBottom,
+    LiteralOrientationTopBottomLeftRight,
+    LiteralPolarRadiusType,
+    LiteralScale,
+    LiteralShape,
+    LiteralStackOffset,
+    LiteralSyncMethod,
+    LiteralVerticalAlign,
+)
 
 area_chart = AreaChart.create
 bar_chart = BarChart.create

reflex/components/graphing/recharts/cartesian.py

@@ -6,7 +6,21 @@ from typing import Any, Dict, List, Union
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-from .recharts import Recharts
+from .recharts import (
+    LiteralAnimationEasing,
+    LiteralAreaType,
+    LiteralDirection,
+    LiteralIfOverflow,
+    LiteralInterval,
+    LiteralLayout,
+    LiteralLineType,
+    LiteralOrientationTopBottom,
+    LiteralOrientationTopBottomLeftRight,
+    LiteralPolarRadiusType,
+    LiteralScale,
+    LiteralShape,
+    Recharts,
+)
 
 
 class Axis(Recharts):
@@ -19,10 +33,10 @@ class Axis(Recharts):
     hide: Var[bool]
 
     # The orientation of axis 'top' | 'bottom'
-    orientation: Var[str]
+    orientation: Var[LiteralOrientationTopBottom]
 
     # The type of axis 'number' | 'category'
-    type_: Var[str]
+    type_: Var[LiteralPolarRadiusType]
 
     # Allow the ticks of XAxis to be decimals or not.
     allow_decimals: Var[bool]
@@ -46,7 +60,7 @@ class Axis(Recharts):
     reversed: Var[bool]
 
     # If 'auto' set, the scale function is decided by the type of chart, and the props type. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold' | Function
-    scale: Var[str]
+    scale: Var[LiteralScale]
 
     # The unit of data displayed in the axis. This option will be used to represent an index unit in a scatter chart.
     unit: Var[Union[str, int]]
@@ -109,7 +123,7 @@ class ZAxis(Recharts):
     name: Var[Union[str, int]]
 
     # If 'auto' set, the scale function is decided by the type of chart, and the props type.
-    scale: Var[str]
+    scale: Var[LiteralScale]
 
 
 class Brush(Recharts):
@@ -167,7 +181,7 @@ class Cartesian(Recharts):
     """A base class for cartesian charts in Recharts."""
 
     # The layout of bar in the chart, usually inherited from parent. 'horizontal' | 'vertical'
-    layout: Var[str]
+    layout: Var[LiteralLayout]
 
     # The key of a group of data which should be unique in an area chart.
     data_key: Var[Union[str, int]]
@@ -178,8 +192,8 @@ class Cartesian(Recharts):
     # The id of y-axis which is corresponding to the data.
     y_axis_id: Var[Union[str, int]]
 
-    # The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye' | 'none'optional
-    legend_type: Var[str]
+    # The type of icon in legend. If set to 'none', no legend item will be rendered. 'line' | 'plainline' | 'square' | 'rect'| 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye' | 'none'optional
+    # legend_type: Var[LiteralLegendType]
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -214,7 +228,7 @@ class Area(Cartesian):
     fill: Var[str]
 
     # The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' |
-    type_: Var[str]
+    type_: Var[LiteralAreaType]
 
     # If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
     dot: Var[bool]
@@ -275,7 +289,7 @@ class Line(Cartesian):
     alias = "RechartsLine"
 
     # The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
-    type_: Var[str]
+    type_: Var[LiteralAreaType]
 
     # The color of the line stroke.
     stroke: Var[str]
@@ -319,10 +333,10 @@ class Scatter(Cartesian):
     line: Var[bool]
 
     # If a string set, specified symbol will be used to show scatter item. 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye'
-    shape: Var[str]
+    shape: Var[LiteralShape]
 
     # If 'joint' set, line will generated by just jointing all the points. If 'fitting' set, line will be generated by fitting algorithm. 'joint' | 'fitting'
-    line_type: Var[str]
+    line_type: Var[LiteralLineType]
 
     # The fill
     fill: Var[str]
@@ -351,7 +365,7 @@ class Funnel(Cartesian):
     animation_duration: Var[int]
 
     # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
-    animation_easing: Var[str]
+    animation_easing: Var[LiteralAnimationEasing]
 
     # Valid children components
     valid_children: List[str] = ["LabelList", "Cell"]
@@ -365,7 +379,7 @@ class ErrorBar(Recharts):
     alias = "RechartsErrorBar"
 
     # The direction of error bar. 'x' | 'y' | 'both'
-    direction: Var[str]
+    direction: Var[LiteralDirection]
 
     # The key of a group of data which should be unique in an area chart.
     data_key: Var[Union[str, int]]
@@ -396,7 +410,7 @@ class Reference(Recharts):
     y: Var[str]
 
     # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
-    if_overflow: Var[str]
+    if_overflow: Var[LiteralIfOverflow]
 
     # If set true, the line will be rendered in front of bars in BarChart, etc.
     is_front: Var[bool]
@@ -477,7 +491,7 @@ class ReferenceArea(Recharts):
     y2: Var[Union[str, int]]
 
     # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
-    if_overflow: Var[str]
+    if_overflow: Var[LiteralIfOverflow]
 
     # If set true, the line will be rendered in front of bars in BarChart, etc.
     is_front: Var[bool]
@@ -533,7 +547,7 @@ class CartesianAxis(Grid):
     alias = "RechartsCartesianAxis"
 
     # The orientation of axis 'top' | 'bottom' | 'left' | 'right'
-    orientation: Var[str]
+    orientation: Var[LiteralOrientationTopBottomLeftRight]
 
     # If set false, no axis line will be drawn. If set a object, the option is the configuration of axis line.
     axis_line: Var[bool]
@@ -545,7 +559,7 @@ class CartesianAxis(Grid):
     tick_size: Var[int]
 
     # If set 0, all the ticks will be shown. If set preserveStart", "preserveEnd" or "preserveStartEnd", the ticks which is to be shown or hidden will be calculated automatically.
-    interval: Var[str]
+    interval: Var[LiteralInterval]
 
     # If set false, no ticks will be drawn.
     ticks: Var[bool]

reflex/components/graphing/recharts/charts.py

@@ -8,7 +8,14 @@ from reflex.components.graphing.recharts.general import ResponsiveContainer
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-from .recharts import RechartsCharts
+from .recharts import (
+    LiteralAnimationEasing,
+    LiteralComposedChartBaseValue,
+    LiteralLayout,
+    LiteralStackOffset,
+    LiteralSyncMethod,
+    RechartsCharts,
+)
 
 
 class ChartBase(RechartsCharts):
@@ -21,7 +28,7 @@ class ChartBase(RechartsCharts):
     sync_id: Var[str]
 
     # When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
-    sync_method: Var[str]
+    sync_method: Var[LiteralSyncMethod]
 
     # The width of chart container. String or Integer
     width: Var[Union[str, int]] = "100%"  # type: ignore
@@ -30,13 +37,13 @@ class ChartBase(RechartsCharts):
     height: Var[Union[str, int]] = "100%"  # type: ignore
 
     # The layout of area in the chart. 'horizontal' | 'vertical'
-    layout: Var[str]
+    layout: Var[LiteralLayout]
 
     # The sizes of whitespace around the chart.
     margin: Var[Dict[str, Any]]
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
-    stack_offset: Var[str]
+    stack_offset: Var[LiteralStackOffset]
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers that pass the component's value to the handler.
@@ -77,10 +84,10 @@ class AreaChart(ChartBase):
     alias = "RechartsAreaChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
-    base_value: Var[Union[int, str]]
+    base_value: Var[Union[int, LiteralComposedChartBaseValue]]
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape.
-    stack_offset: Var[str]
+    stack_offset: Var[LiteralStackOffset]
 
     # Valid children components
     valid_children: List[str] = [
@@ -117,7 +124,7 @@ class BarChart(ChartBase):
     max_bar_size: Var[int]
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape.
-    stack_offset: Var[str]
+    stack_offset: Var[LiteralStackOffset]
 
     # If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
     reverse_stack_order: Var[bool]
@@ -167,7 +174,7 @@ class ComposedChart(ChartBase):
     alias = "RechartsComposedChart"
 
     # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
-    base_value: Var[Union[int, str]]
+    base_value: Var[Union[int, LiteralComposedChartBaseValue]]
 
     # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
     bar_category_gap: Var[Union[str, int]]  # type: ignore
@@ -396,13 +403,13 @@ class FunnelChart(RechartsCharts):
     height: Var[Union[str, int]] = "100%"  # type: ignore
 
     # The layout of area in the chart. 'horizontal' | 'vertical'
-    layout: Var[str]
+    layout: Var[LiteralLayout]
 
     # The sizes of whitespace around the chart.
     margin: Var[Dict[str, Any]]
 
     # The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
-    stack_offset: Var[str]
+    stack_offset: Var[LiteralStackOffset]
 
     # The layout of bars in the chart. centeric
     layout: Var[str]
@@ -456,7 +463,7 @@ class Treemap(RechartsCharts):
     animation_duration: Var[int]
 
     # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
-    animation_easing: Var[str]
+    animation_easing: Var[LiteralAnimationEasing]
 
     @classmethod
     def create(cls, *children, **props) -> Component:

reflex/components/graphing/recharts/general.py

@@ -6,7 +6,14 @@ from typing import Any, Dict, List, Union
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-from .recharts import Recharts
+from .recharts import (
+    LiteralIconType,
+    LiteralLayout,
+    LiteralLegendAlign,
+    LiteralPosition,
+    LiteralVerticalAlign,
+    Recharts,
+)
 
 
 class ResponsiveContainer(Recharts):
@@ -62,19 +69,19 @@ class Legend(Recharts):
     height: Var[int]
 
     # The layout of legend items. 'horizontal' | 'vertical'
-    layout: Var[str]
+    layout: Var[LiteralLayout]
 
     # The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'.
-    align: Var[str]
+    align: Var[LiteralLegendAlign]
 
     # The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'.
-    vertical_align: Var[str]
+    vertical_align: Var[LiteralVerticalAlign]
 
     # The size of icon in each legend item.
     icon_size: Var[int]
 
     # The type of icon in each legend item. 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'
-    icon_type: Var[str]
+    icon_type: Var[LiteralIconType]
 
     # The width of chart container, usually calculated internally.
     chart_width: Var[int]
@@ -150,7 +157,7 @@ class Label(Recharts):
     offset: Var[int]
 
     # The position of label which can be specified by this props or the children of <Label />
-    position: Var[str]
+    position: Var[LiteralPosition]
 
 
 class LabelList(Recharts):
@@ -163,8 +170,8 @@ class LabelList(Recharts):
     # The key of a group of label values in data.
     data_key: Var[Union[str, int]]
 
-    # The position of each label relative to it view box。op" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
-    position: Var[str]
+    # The position of each label relative to it view box。"Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
+    position: Var[LiteralPosition]
 
     # The offset to the specified "position"
     offset: Var[int]

reflex/components/graphing/recharts/polar.py

@@ -6,7 +6,13 @@ from typing import Any, Dict, List, Union
 from reflex.constants import EventTriggers
 from reflex.vars import Var
 
-from .recharts import Recharts
+from .recharts import (
+    LiteralAnimationEasing,
+    LiteralGridType,
+    LiteralPolarRadiusType,
+    LiteralScale,
+    Recharts,
+)
 
 
 class Pie(Recharts):
@@ -121,7 +127,7 @@ class Radar(Recharts):
     animation_duration: Var[int]
 
     # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
-    animation_easing: Var[str]
+    animation_easing: Var[LiteralAnimationEasing]
 
     # Valid children components
     valid_children: List[str] = ["LabelList"]
@@ -253,7 +259,7 @@ class PolarGrid(Recharts):
     polar_radius: Var[List[int]]
 
     # The type of polar grids. 'polygon' | 'circle'
-    grid_type: Var[str]
+    grid_type: Var[LiteralGridType]
 
     # Valid children components
     valid_children: List[str] = ["RadarChart", "RadiarBarChart"]
@@ -270,7 +276,7 @@ class PolarRadiusAxis(Recharts):
     angle: Var[int]
 
     # The type of axis line. 'number' | 'category'
-    type_: Var[str]
+    type_: Var[LiteralPolarRadiusType]
 
     # Allow the axis has duplicated categorys or not when the type of axis is "category".
     allow_duplicated_category: Var[bool]
@@ -297,7 +303,7 @@ class PolarRadiusAxis(Recharts):
     tick_count: Var[int]
 
     # If 'auto' set, the scale funtion is linear scale. 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold'
-    scale: Var[str]
+    scale: Var[LiteralScale]
 
     # Valid children components
     valid_children: List[str] = ["Label"]

reflex/components/graphing/recharts/recharts.py

@@ -1,5 +1,5 @@
 """A component that wraps a recharts lib."""
-
+from typing import Literal
 
 from reflex.components.component import Component, NoSSRComponent
 
@@ -14,3 +14,106 @@ class RechartsCharts(NoSSRComponent):
     """A component that wraps a victory lib."""
 
     library = "recharts@2.8.0"
+
+
+LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]
+LiteralIfOverflow = Literal["discard", "hidden", "visible", "extendDomain"]
+LiteralShape = Literal[
+    "square", "circle", "cross", "diamond", "star", "triangle", "wye"
+]
+LiteralLineType = Literal["joint", "fitting"]
+LiteralOrientation = Literal["top", "bottom", "left", "right", "middle"]
+LiteralOrientationLeftRightMiddle = Literal["left", "right", "middle"]
+LiteralOrientationTopBottom = Literal["top", "bottom"]
+LiteralOrientationTopBottomLeftRight = Literal["top", "bottom", "left", "right"]
+LiteralScale = Literal[
+    "auto",
+    "linear",
+    "pow",
+    "sqrt",
+    "log",
+    "identity",
+    "time",
+    "band",
+    "point",
+    "ordinal",
+    "quantile",
+    "quantize",
+    "utc",
+    "sequential",
+    "threshold",
+]
+LiteralLayout = Literal["horizontal", "vertical"]
+LiteralPolarRadiusType = Literal["number", "category"]
+LiteralGridType = Literal["polygon", "circle"]
+LiteralPosition = Literal[
+    "top",
+    "left",
+    "right",
+    "bottom",
+    "inside",
+    "outside",
+    "insideLeft",
+    "insideRight",
+    "insideTop",
+    "insideBottom",
+    "insideTopLeft",
+    "insideBottomLeft",
+    "insideTopRight",
+    "insideBottomRight",
+    "insideStart",
+    "insideEnd",
+    "end",
+    "center",
+]
+LiteralIconType = Literal[
+    "line",
+    "plainline",
+    "square",
+    "rect",
+    "circle",
+    "cross",
+    "diamond",
+    "star",
+    "triangle",
+    "wye",
+]
+LiteralLegendType = [
+    "line",
+    "plainline",
+    "square",
+    "rect",
+    "circle",
+    "cross",
+    "diamond",
+    "star",
+    "triangle",
+    "wye",
+    "none",
+]
+LiteralLegendAlign = Literal["left", "center", "right"]
+LiteralVerticalAlign = Literal["top", "middle", "bottom"]
+LiteralStackOffset = Literal["expand", "none", "wiggle", "silhouette"]
+LiteralBarChartStackOffset = Literal["expand", "none", "wiggle", "silhouette", "sign"]
+LiteralComposedChartBaseValue = Literal["dataMin", "dataMax", "auto"]
+LiteralAxisType = Literal["number", "category"]
+LiteralAreaType = Literal[
+    "basis",
+    "basisClosed",
+    "basisOpen",
+    "bumpX",
+    "bumpY",
+    "bump",
+    "linear",
+    "linearClosed",
+    "natural",
+    "monotoneX",
+    "monotoneY",
+    "monotone",
+    "step",
+    "stepBefore",
+    "stepAfter",
+]
+LiteralDirection = Literal["x", "y", "both"]
+LiteralInterval = Literal["preserveStart", "preserveEnd", "preserveStartEnd"]
+LiteralSyncMethod = Literal["index", "value"]

reflex/components/graphing/recharts/recharts.pyi

@@ -0,0 +1,148 @@
+"""Stub file for recharts.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Literal, Optional, Union, overload
+from reflex.components.component import Component
+from reflex.components.component import NoSSRComponent
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventHandler, EventChain, EventSpec
+
+LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]
+LiteralIfOverflow = Literal["discard", "hidden", "visible", "extendDomain"]
+LiteralShape = Literal[
+    "square", "circle", "cross", "diamond", "star", "triangle", "wye"
+]
+LiteralLineType = Literal["joint", "fitting"]
+LiteralOrientation = Literal["top", "bottom", "left", "right", "middle"]
+LiteralOrientationLeftRightMiddle = Literal["left", "right", "middle"]
+LiteralOrientationTopBottom = Literal["top", "bottom"]
+LiteralOrientationTopBottomLeftRight = Literal["top", "bottom", "left", "right"]
+LiteralScale = Literal[
+    "auto",
+    "linear",
+    "pow",
+    "sqrt",
+    "log",
+    "identity",
+    "time",
+    "band",
+    "point",
+    "ordinal",
+    "quantile",
+    "quantize",
+    "utc",
+    "sequential",
+    "threshold",
+]
+LiteralLayout = Literal["horizontal", "vertical"]
+LiteralPolarRadiusType = Literal["number", "category"]
+LiteralGridType = Literal["polygon", "circle"]
+LiteralPosition = Literal[
+    "top",
+    "left",
+    "right",
+    "bottom",
+    "inside",
+    "outside",
+    "insideLeft",
+    "insideRight",
+    "insideTop",
+    "insideBottom",
+    "insideTopLeft",
+    "insideBottomLeft",
+    "insideTopRight",
+    "insideBottomRight",
+    "insideStart",
+    "insideEnd",
+    "end",
+    "center",
+]
+LiteralIconType = Literal[
+    "line",
+    "plainline",
+    "square",
+    "rect",
+    "circle",
+    "cross",
+    "diamond",
+    "star",
+    "triangle",
+    "wye",
+]
+LiteralLegendType = [
+    "line",
+    "plainline",
+    "square",
+    "rect",
+    "circle",
+    "cross",
+    "diamond",
+    "star",
+    "triangle",
+    "wye",
+    "none",
+]
+LiteralLegendAlign = Literal["left", "center", "right"]
+LiteralVerticalAlign = Literal["top", "middle", "bottom"]
+LiteralStackOffset = Literal["expand", "none", "wiggle", "silhouette"]
+LiteralBarChartStackOffset = Literal["expand", "none", "wiggle", "silhouette", "sign"]
+LiteralComposedChartBaseValue = Literal["dataMin", "dataMax", "auto"]
+LiteralAxisType = Literal["number", "category"]
+LiteralAreaType = Literal[
+    "basis",
+    "basisClosed",
+    "basisOpen",
+    "bumpX",
+    "bumpY",
+    "bump",
+    "linear",
+    "linearClosed",
+    "natural",
+    "monotoneX",
+    "monotoneY",
+    "monotone",
+    "step",
+    "stepBefore",
+    "stepAfter",
+]
+LiteralDirection = Literal["x", "y", "both"]
+LiteralInterval = Literal["preserveStart", "preserveEnd", "preserveStartEnd"]
+LiteralSyncMethod = Literal["index", "value"]
+
+class Recharts(Component):
+    @overload
+    @classmethod
+    def create(cls, *children, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Recharts":  # type: ignore
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            **props: The props of the component.
+
+        Returns:
+            The component.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...
+
+class RechartsCharts(NoSSRComponent):
+    @overload
+    @classmethod
+    def create(cls, *children, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "RechartsCharts":  # type: ignore
+        """Create the component.
+
+        Args:
+            *children: The children of the component.
+            **props: The props of the component.
+
+        Returns:
+            The component.
+
+        Raises:
+            TypeError: If an invalid child is passed.
+        """
+        ...

reflex/components/layout/card.py

@@ -3,7 +3,12 @@
 from typing import Optional
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralCardVariant,
+    LiteralColorScheme,
+    LiteralTagSize,
+)
 from reflex.vars import Var
 
 
@@ -44,17 +49,17 @@ class Card(ChakraComponent):
     #  "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" |
     #  "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
     # default: "gray"
-    color_scheme: Var[str]
+    color_scheme: Var[LiteralColorScheme]
 
     # The size of the Card
     # options: "sm" | "md" | "lg"
     # default: "md"
-    size: Var[str]
+    size: Var[LiteralTagSize]
 
     # The variant of the Card
     # options: "elevated" | "outline" | "filled" | "unstyled"
     # default: "elevated"
-    variant: Var[str]
+    variant: Var[LiteralCardVariant]
 
     @classmethod
     def create(
@@ -63,7 +68,7 @@ class Card(ChakraComponent):
         *,
         header: Optional[Component] = None,
         footer: Optional[Component] = None,
-        **props
+        **props,
     ) -> Component:
         """Creates a Chakra Card with a body and optionally header and/or footer, and returns it.
         If header, body or footer are not already instances of Chead, Cbody or Cfoot respectively,

reflex/components/layout/stack.py

@@ -1,6 +1,8 @@
 """Container to stack elements with spacing."""
 
-from reflex.components.libs.chakra import ChakraComponent
+from typing import List, Union
+
+from reflex.components.libs.chakra import ChakraComponent, LiteralStackDirection
 from reflex.vars import Var
 
 
@@ -13,7 +15,7 @@ class Stack(ChakraComponent):
     align_items: Var[str]
 
     # The direction to stack the items.
-    direction: Var[str]
+    direction: Var[Union[LiteralStackDirection, List[str]]]
 
     # If true the items will be stacked horizontally.
     is_inline: Var[bool]

reflex/components/layout/stack.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Optional, Union, overload
+from typing import List, Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class Stack(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, align_items: Optional[Union[Var[str], str]] = None, direction: Optional[Union[Var[str], str]] = None, is_inline: Optional[Union[Var[bool], bool]] = None, justify_content: Optional[Union[Var[str], str]] = None, should_wrap_children: Optional[Union[Var[bool], bool]] = None, spacing: Optional[Union[Var[str], str]] = None, wrap: Optional[Union[Var[str], str]] = None, justify: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Stack":  # type: ignore
+    def create(cls, *children, align_items: Optional[Union[Var[str], str]] = None, direction: Optional[Union[Var[Union[Literal["row", "column"], List[str]]], Union[Literal["row", "column"], List[str]]]] = None, is_inline: Optional[Union[Var[bool], bool]] = None, justify_content: Optional[Union[Var[str], str]] = None, should_wrap_children: Optional[Union[Var[bool], bool]] = None, spacing: Optional[Union[Var[str], str]] = None, wrap: Optional[Union[Var[str], str]] = None, justify: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Stack":  # type: ignore
         """Create the component.
 
         Args:

reflex/components/libs/__init__.py

@@ -1 +1,31 @@
 """React component libraries."""
+from .chakra import (
+    LiteralAlertDialogSize,
+    LiteralAlertVariant,
+    LiteralAvatarSize,
+    LiteralButtonSize,
+    LiteralButtonVariant,
+    LiteralCardVariant,
+    LiteralChakraDirection,
+    LiteralColorScheme,
+    LiteralDividerVariant,
+    LiteralDrawerSize,
+    LiteralHeadingSize,
+    LiteralImageLoading,
+    LiteralInputNumberMode,
+    LiteralInputVariant,
+    LiteralLanguage,
+    LiteralMenuOption,
+    LiteralMenuStrategy,
+    LiteralPopOverTrigger,
+    LiteralSpinnerPlacement,
+    LiteralSpinnerSize,
+    LiteralStackDirection,
+    LiteralStatus,
+    LiteralTabsVariant,
+    LiteralTagAlign,
+    LiteralTagColorScheme,
+    LiteralTagSize,
+    LiteralTheme,
+    LiteralVariant,
+)

reflex/components/libs/chakra.py

@@ -1,5 +1,7 @@
 """Components that are based on Chakra-UI."""
 
+from typing import Literal
+
 from reflex.components.component import Component
 
 
@@ -7,3 +9,106 @@ class ChakraComponent(Component):
     """A component that wraps a Chakra component."""
 
     library = "@chakra-ui/react"
+
+
+LiteralColorScheme = Literal[
+    "gray",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "blue",
+    "cyan",
+    "purple",
+    "pink",
+    "whiteAlpha",
+    "blackAlpha",
+    "linkedin",
+    "facebook",
+    "messenger",
+    "whatsapp",
+    "twitter",
+    "telegram",
+]
+
+
+LiteralVariant = Literal["solid", "subtle", "outline"]
+LiteralDividerVariant = Literal["solid", "dashed"]
+LiteralTheme = Literal["light", "dark"]
+LiteralTagColorScheme = Literal[
+    "gray",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "blue",
+    "cyan",
+    "purple",
+    "pink",
+]
+LiteralTagAlign = Literal["center", "end", "start"]
+LiteralTabsVariant = Literal[
+    "line",
+    "enclosed",
+    "enclosed-colored",
+    "soft-rounded",
+    "solid-rounded",
+    "unstyled",
+]
+
+LiteralStatus = Literal["success", "info", "warning", "error"]
+LiteralAlertVariant = Literal["subtle", "left-accent", "top-accent", "solid"]
+LiteralButtonVariant = Literal["ghost", "outline", "solid", "link", "unstyled"]
+LiteralSpinnerPlacement = Literal["start", "end"]
+LiteralLanguage = Literal[
+    "en",
+    "da",
+    "de",
+    "es",
+    "fr",
+    "ja",
+    "ko",
+    "pt_br",
+    "ru",
+    "zh_cn",
+    "ro",
+    "pl",
+    "ckb",
+    "lv",
+    "se",
+    "ua",
+    "he",
+    "it",
+]
+LiteralInputVariant = Literal["outline", "filled", "flushed", "unstyled"]
+LiteralInputNumberMode = [
+    "text",
+    "search",
+    "none",
+    "tel",
+    "url",
+    "email",
+    "numeric",
+    "decimal",
+]
+LiteralChakraDirection = Literal["ltr", "rtl"]
+LiteralCardVariant = Literal["outline", "filled", "elevated", "unstyled"]
+LiteralStackDirection = Literal["row", "column"]
+LiteralImageLoading = Literal["eager", "lazy"]
+LiteralTagSize = Literal["sm", "md", "lg"]
+LiteralSpinnerSize = Literal[Literal[LiteralTagSize], "xs", "xl"]
+LiteralAvatarSize = Literal[Literal[LiteralTagSize], "xl", "xs", "2xl", "full", "2xs"]
+LiteralButtonSize = Literal["sm", "md", "lg", "xs"]
+# Applies to AlertDialog and Modal
+LiteralAlertDialogSize = Literal[
+    "sm", "md", "lg", "xs", "2xl", "full", "3xl", "4xl", "5xl", "6xl"
+]
+LiteralDrawerSize = Literal[Literal[LiteralSpinnerSize], "xl", "full"]
+
+LiteralMenuStrategy = Literal["fixed", "absolute"]
+LiteralMenuOption = Literal["checkbox", "radio"]
+LiteralPopOverTrigger = Literal["click", "hover"]
+
+LiteralHeadingSize = Literal["lg", "md", "sm", "xs", "xl", "2xl", "3xl", "4xl"]

reflex/components/libs/chakra.pyi

@@ -3,11 +3,112 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Optional, Union, overload
+from typing import Literal, Optional, Union, overload
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventHandler, EventChain, EventSpec
 
+LiteralColorScheme = Literal[
+    "gray",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "blue",
+    "cyan",
+    "purple",
+    "pink",
+    "whiteAlpha",
+    "blackAlpha",
+    "linkedin",
+    "facebook",
+    "messenger",
+    "whatsapp",
+    "twitter",
+    "telegram",
+]
+
+LiteralVariant = Literal["solid", "subtle", "outline"]
+LiteralDividerVariant = Literal["solid", "dashed"]
+LiteralTheme = Literal["light", "dark"]
+LiteralTagColorScheme = Literal[
+    "gray",
+    "red",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "blue",
+    "cyan",
+    "purple",
+    "pink",
+]
+LiteralTagAlign = Literal["center", "end", "start"]
+LiteralTabsVariant = Literal[
+    "line",
+    "enclosed",
+    "enclosed-colored",
+    "soft-rounded",
+    "solid-rounded",
+    "unstyled",
+]
+
+LiteralStatus = Literal["success", "info", "warning", "error"]
+LiteralAlertVariant = Literal["subtle", "left-accent", "top-accent", "solid"]
+LiteralButtonVariant = Literal["ghost", "outline", "solid", "link", "unstyled"]
+LiteralSpinnerPlacement = Literal["start", "end"]
+LiteralLanguage = Literal[
+    "en",
+    "da",
+    "de",
+    "es",
+    "fr",
+    "ja",
+    "ko",
+    "pt_br",
+    "ru",
+    "zh_cn",
+    "ro",
+    "pl",
+    "ckb",
+    "lv",
+    "se",
+    "ua",
+    "he",
+    "it",
+]
+LiteralInputVariant = Literal["outline", "filled", "flushed", "unstyled"]
+LiteralInputNumberMode = [
+    "text",
+    "search",
+    "none",
+    "tel",
+    "url",
+    "email",
+    "numeric",
+    "decimal",
+]
+LiteralChakraDirection = Literal["ltr", "rtl"]
+LiteralCardVariant = Literal["outline", "filled", "elevated", "unstyled"]
+LiteralStackDirection = Literal["row", "column"]
+LiteralImageLoading = Literal["eager", "lazy"]
+LiteralTagSize = Literal["sm", "md", "lg"]
+LiteralSpinnerSize = Literal[Literal[LiteralTagSize], "xs"]
+LiteralAvatarSize = Literal[Literal[LiteralTagSize], "xs", "2xl", "full", "2xs"]
+LiteralButtonSize = Literal["sm", "md", "lg", "xs"]
+# Applies to AlertDialog and Modal
+LiteralAlertDialogSize = Literal[
+    "sm", "md", "lg", "xs", "2xl", "full", "3xl", "4xl", "5xl", "6xl"
+]
+LiteralDrawerSize = Literal[Literal[LiteralSpinnerSize], "xl", "full"]
+
+LiteralMenuStrategy = Literal["fixed", "absolute"]
+LiteralMenuOption = Literal["checkbox", "radio"]
+LiteralPopOverTrigger = Literal["click", "hover"]
+
+LiteralHeadingSize = Literal["lg", "md", "sm", "xs", "xl", "2xl", "3xl", "4xl"]
+
 class ChakraComponent(Component):
     @overload
     @classmethod

reflex/components/media/avatar.py

@@ -3,7 +3,7 @@ from __future__ import annotations
 
 from typing import Any, Union
 
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralAvatarSize
 from reflex.vars import Var
 
 
@@ -34,7 +34,7 @@ class Avatar(ChakraComponent):
     src_set: Var[str]
 
     # "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full"
-    size: Var[str]
+    size: Var[LiteralAvatarSize]
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.

reflex/components/media/avatar.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Any, Optional, Union, overload
+from typing import Any, Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class Avatar(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, icon: Optional[Union[Var[str], str]] = None, icon_label: Optional[Union[Var[str], str]] = None, ignore_fallback: Optional[Union[Var[bool], bool]] = None, name: Optional[Union[Var[str], str]] = None, show_border: Optional[Union[Var[bool], bool]] = None, src: Optional[Union[Var[str], str]] = None, src_set: Optional[Union[Var[str], str]] = None, size: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_error: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Avatar":  # type: ignore
+    def create(cls, *children, icon: Optional[Union[Var[str], str]] = None, icon_label: Optional[Union[Var[str], str]] = None, ignore_fallback: Optional[Union[Var[bool], bool]] = None, name: Optional[Union[Var[str], str]] = None, show_border: Optional[Union[Var[bool], bool]] = None, src: Optional[Union[Var[str], str]] = None, src_set: Optional[Union[Var[str], str]] = None, size: Optional[Union[Var[Literal["sm", "md", "lg", "xs", "2xl", "full", "2xs"]], Literal["sm", "md", "lg", "xs", "2xl", "full", "2xs"]]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_error: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Avatar":  # type: ignore
         """Create the component.
 
         Args:

reflex/components/media/image.py

@@ -6,7 +6,7 @@ import io
 from typing import Any, Optional, Union
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralImageLoading
 from reflex.utils.serializers import serializer
 from reflex.vars import Var
 
@@ -38,7 +38,7 @@ class Image(ChakraComponent):
     ignore_fallback: Var[bool]
 
     # "eager" | "lazy"
-    loading: Var[str]
+    loading: Var[LiteralImageLoading]
 
     # The path/url to the image or PIL image object.
     src: Var[Any]

reflex/components/navigation/stepper.py

@@ -3,7 +3,7 @@
 from typing import List, Optional, Tuple
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralColorScheme
 from reflex.vars import Var
 
 
@@ -13,7 +13,7 @@ class Stepper(ChakraComponent):
     tag = "Stepper"
 
     # The color scheme to use for the stepper; default is blue.
-    colorScheme: Var[str]
+    colorScheme: Var[LiteralColorScheme]
 
     # Chakra provides a useSteps hook to control the stepper.
     # Instead, use an integer state value to set progress in the stepper.

reflex/components/navigation/stepper.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import List, Optional, Tuple, Union, overload
+from typing import List, Literal, Optional, Tuple, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class Stepper(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, items: Optional[List[Tuple]] = None, colorScheme: Optional[Union[Var[str], str]] = None, index: Optional[Union[Var[int], int]] = None, size: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Stepper":  # type: ignore
+    def create(cls, *children, items: Optional[List[Tuple]] = None, colorScheme: Optional[Union[Var[Literal["gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "whiteAlpha", "blackAlpha", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"]], Literal["gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink", "whiteAlpha", "blackAlpha", "linkedin", "facebook", "messenger", "whatsapp", "twitter", "telegram"]]] = None, index: Optional[Union[Var[int], int]] = None, size: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Stepper":  # type: ignore
         """Create a Stepper component.
 
                If the kw-args `items` is provided and is a list, they will be added as children.

reflex/components/overlay/alertdialog.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 from typing import Any, Union
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralAlertDialogSize
 from reflex.components.media.icon import Icon
 from reflex.vars import Var
 
@@ -48,7 +48,7 @@ class AlertDialog(ChakraComponent):
     return_focus_on_close: Var[bool]
 
     # "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"
-    size: Var[str]
+    size: Var[LiteralAlertDialogSize]
 
     # If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
     use_inert: Var[bool]

reflex/components/overlay/drawer.py

@@ -4,7 +4,11 @@ from __future__ import annotations
 from typing import Any, Union
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralColorScheme,
+    LiteralDrawerSize,
+)
 from reflex.components.media.icon import Icon
 from reflex.vars import Var
 
@@ -51,7 +55,7 @@ class Drawer(ChakraComponent):
     return_focus_on_close: Var[bool]
 
     # "xs" | "sm" | "md" | "lg" | "xl" | "full"
-    size: Var[str]
+    size: Var[LiteralDrawerSize]
 
     # A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
     use_inert: Var[bool]
@@ -59,6 +63,12 @@ class Drawer(ChakraComponent):
     # Variant of drawer
     variant: Var[str]
 
+    # Color scheme of the Drawer
+    # Options:
+    # "whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan"
+    # | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
+    color_scheme: Var[LiteralColorScheme]
+
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
 

reflex/components/overlay/menu.py

@@ -5,7 +5,12 @@ from typing import Any, List, Optional, Union
 
 from reflex.components.component import Component
 from reflex.components.forms.button import Button
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralChakraDirection,
+    LiteralMenuOption,
+    LiteralMenuStrategy,
+)
 from reflex.vars import Var
 
 
@@ -33,7 +38,7 @@ class Menu(ChakraComponent):
     default_is_open: Var[bool]
 
     # If rtl, popper placement positions will be flipped i.e. 'top-right' will become 'top-left' and vice-verse ("ltr" | "rtl")
-    direction: Var[str]
+    direction: Var[LiteralChakraDirection]
 
     # If true, the popper will change its placement and flip when it's about to overflow its boundary area.
     flip: Var[bool]
@@ -60,7 +65,7 @@ class Menu(ChakraComponent):
     prevent_overflow: Var[bool]
 
     # The CSS positioning strategy to use. ("fixed" | "absolute")
-    strategy: Var[str]
+    strategy: Var[LiteralMenuStrategy]
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.
@@ -196,7 +201,7 @@ class MenuItemOption(ChakraComponent):
     is_focusable: Var[bool]
 
     # "checkbox" | "radio"
-    type_: Var[str]
+    type_: Var[LiteralMenuOption]
 
     # Value of the menu item.
     value: Var[str]
@@ -214,7 +219,7 @@ class MenuOptionGroup(ChakraComponent):
     tag = "MenuOptionGroup"
 
     # "checkbox" | "radio"
-    type_: Var[str]
+    type_: Var[LiteralMenuOption]
 
     # Value of the option group.
     value: Var[str]

reflex/components/overlay/modal.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 from typing import Any, Optional, Union
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralAlertDialogSize
 from reflex.components.media import Icon
 from reflex.vars import Var
 
@@ -48,7 +48,7 @@ class Modal(ChakraComponent):
     return_focus_on_close: Var[bool]
 
     # "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"
-    size: Var[str]
+    size: Var[LiteralAlertDialogSize]
 
     # A11y: If true, the siblings of the modal will have `aria-hidden` set to true so that screen readers can only see the modal. This is commonly known as making the other elements **inert**
     use_inert: Var[bool]

reflex/components/overlay/popover.py

@@ -4,7 +4,12 @@ from __future__ import annotations
 from typing import Any, Union
 
 from reflex.components.component import Component
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import (
+    ChakraComponent,
+    LiteralChakraDirection,
+    LiteralMenuStrategy,
+    LiteralPopOverTrigger,
+)
 from reflex.vars import Var
 
 
@@ -38,7 +43,7 @@ class Popover(ChakraComponent):
     default_is_open: Var[bool]
 
     # Theme direction ltr or rtl. Popper's placement will be set accordingly
-    direction: Var[str]
+    direction: Var[LiteralChakraDirection]
 
     # If true, the popper will change its placement and flip when it's about to overflow its boundary area.
     flip: Var[bool]
@@ -71,10 +76,10 @@ class Popover(ChakraComponent):
     return_focus_on_close: Var[bool]
 
     # The CSS positioning strategy to use. ("fixed" | "absolute")
-    strategy: Var[str]
+    strategy: Var[LiteralMenuStrategy]
 
     # The interaction that triggers the popover. hover - means the popover will open when you hover with mouse or focus with keyboard on the popover trigger click - means the popover will open on click or press Enter to Space on keyboard ("click" | "hover")
-    trigger: Var[str]
+    trigger: Var[LiteralPopOverTrigger]
 
     def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
         """Get the event triggers for the component.

reflex/components/overlay/tooltip.py

@@ -3,7 +3,7 @@ from __future__ import annotations
 
 from typing import Any, Union
 
-from reflex.components.libs.chakra import ChakraComponent
+from reflex.components.libs.chakra import ChakraComponent, LiteralChakraDirection
 from reflex.vars import Var
 
 
@@ -37,7 +37,7 @@ class Tooltip(ChakraComponent):
     default_is_open: Var[bool]
 
     # Theme direction ltr or rtl. Popper's placement will be set accordingly
-    direction: Var[str]
+    direction: Var[LiteralChakraDirection]
 
     # The distance or margin between the reference and popper. It is used internally to create an offset modifier. NB: If you define offset prop, it'll override the gutter.
     gutter: Var[int]

reflex/components/typography/heading.py

@@ -1,6 +1,7 @@
 """A heading component."""
 
-from reflex.components.libs.chakra import ChakraComponent
+
+from reflex.components.libs.chakra import ChakraComponent, LiteralHeadingSize
 from reflex.vars import Var
 
 
@@ -13,4 +14,4 @@ class Heading(ChakraComponent):
     as_: Var[str]
 
     # "4xl" | "3xl" | "2xl" | "xl" | "lg" | "md" | "sm" | "xs"
-    size: Var[str]
+    size: Var[LiteralHeadingSize]

reflex/components/typography/heading.pyi

@@ -3,7 +3,7 @@
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
 
-from typing import Optional, Union, overload
+from typing import Literal, Optional, Union, overload
 from reflex.components.libs.chakra import ChakraComponent
 from reflex.components.component import Component
 from reflex.vars import Var, BaseVar, ComputedVar
@@ -12,7 +12,7 @@ from reflex.event import EventHandler, EventChain, EventSpec
 class Heading(ChakraComponent):
     @overload
     @classmethod
-    def create(cls, *children, as_: Optional[Union[Var[str], str]] = None, size: Optional[Union[Var[str], str]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Heading":  # type: ignore
+    def create(cls, *children, as_: Optional[Union[Var[str], str]] = None, size: Optional[Union[Var[Literal["lg", "md", "sm", "xs", "xl", "2xl", "3xl", "4xl"]], Literal["lg", "md", "sm", "xs", "xl", "2xl", "3xl", "4xl"]]] = None, on_blur: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_context_menu: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_double_click: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_focus: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_down: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_enter: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_leave: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_move: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_out: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_over: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_mouse_up: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_scroll: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, on_unmount: Optional[Union[EventHandler, EventSpec, List, function, BaseVar]] = None, **props) -> "Heading":  # type: ignore
         """Create the component.
 
         Args:

reflex/utils/types.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 
 import contextlib
 import typing
-from typing import Any, Callable, Type, Union, _GenericAlias  # type: ignore
+from typing import Any, Callable, Literal, Type, Union, _GenericAlias  # type: ignore
 
 from reflex.base import Base
 from reflex.utils import serializers
@@ -76,6 +76,18 @@ def is_union(cls: GenericType) -> bool:
     return cls.__origin__ == Union if is_generic_alias(cls) else False
 
 
+def is_literal(cls: GenericType) -> bool:
+    """Check if a class is a Literal.
+
+    Args:
+        cls: The class to check.
+
+    Returns:
+        Whether the class is a literal.
+    """
+    return hasattr(cls, "__origin__") and cls.__origin__ is Literal
+
+
 def get_base_class(cls: GenericType) -> Type:
     """Get the base class of a class.
 
@@ -84,7 +96,17 @@ def get_base_class(cls: GenericType) -> Type:
 
     Returns:
         The base class of the class.
+
+    Raises:
+        TypeError: If a literal has multiple types.
     """
+    if is_literal(cls):
+        # only literals of the same type are supported.
+        arg_type = type(get_args(cls)[0])
+        if not all(type(arg) == arg_type for arg in get_args(cls)):
+            raise TypeError("only literals of the same type are supported")
+        return type(get_args(cls)[0])
+
     if is_union(cls):
         return tuple(get_base_class(arg) for arg in get_args(cls))
 

scripts/pyi_generator.py

@@ -7,14 +7,89 @@ import re
 import sys
 from inspect import getfullargspec
 from pathlib import Path
-from typing import Any, Dict, List, Optional, Union, get_args  # NOQA
+from typing import Any, Dict, List, Literal, Optional, Union, get_args  # NOQA
 
 import black
 
 from reflex.components.component import Component
+
+# NOQA
+from reflex.components.graphing.recharts.recharts import (
+    LiteralAnimationEasing,
+    LiteralAreaType,
+    LiteralComposedChartBaseValue,
+    LiteralDirection,
+    LiteralGridType,
+    LiteralIconType,
+    LiteralIfOverflow,
+    LiteralInterval,
+    LiteralLayout,
+    LiteralLegendAlign,
+    LiteralLineType,
+    LiteralOrientationTopBottom,
+    LiteralOrientationTopBottomLeftRight,
+    LiteralPolarRadiusType,
+    LiteralPosition,
+    LiteralScale,
+    LiteralShape,
+    LiteralStackOffset,
+    LiteralSyncMethod,
+    LiteralVerticalAlign,
+)
+from reflex.components.libs.chakra import (
+    LiteralAlertDialogSize,
+    LiteralAvatarSize,
+    LiteralChakraDirection,
+    LiteralColorScheme,
+    LiteralDrawerSize,
+    LiteralImageLoading,
+    LiteralInputVariant,
+    LiteralMenuOption,
+    LiteralMenuStrategy,
+    LiteralTagSize,
+)
+
+# NOQA
+from reflex.utils import format
+from reflex.utils import types as rx_types
 from reflex.vars import Var
 
-ruff_dont_remove = [Var, Optional, Dict, List]
+ruff_dont_remove = [
+    Var,
+    Optional,
+    Dict,
+    List,
+    LiteralInputVariant,
+    LiteralColorScheme,
+    LiteralChakraDirection,
+    LiteralTagSize,
+    LiteralDrawerSize,
+    LiteralMenuStrategy,
+    LiteralMenuOption,
+    LiteralAlertDialogSize,
+    LiteralAvatarSize,
+    LiteralImageLoading,
+    LiteralLayout,
+    LiteralAnimationEasing,
+    LiteralGridType,
+    LiteralPolarRadiusType,
+    LiteralScale,
+    LiteralSyncMethod,
+    LiteralStackOffset,
+    LiteralComposedChartBaseValue,
+    LiteralOrientationTopBottom,
+    LiteralAreaType,
+    LiteralShape,
+    LiteralLineType,
+    LiteralDirection,
+    LiteralIfOverflow,
+    LiteralOrientationTopBottomLeftRight,
+    LiteralInterval,
+    LiteralLegendAlign,
+    LiteralVerticalAlign,
+    LiteralIconType,
+    LiteralPosition,
+]
 
 EXCLUDED_FILES = [
     "__init__.py",
@@ -32,7 +107,16 @@ def _get_type_hint(value, top_level=True, no_union=False):
     res = ""
     args = get_args(value)
     if args:
-        res = f"{value.__name__}[{', '.join([_get_type_hint(arg, top_level=False) for arg in args if arg is not type(None)])}]"
+        inner_container_type_args = (
+            [format.wrap(arg, '"') for arg in args]
+            if rx_types.is_literal(value)
+            else [
+                _get_type_hint(arg, top_level=False)
+                for arg in args
+                if arg is not type(None)
+            ]
+        )
+        res = f"{value.__name__}[{', '.join(inner_container_type_args)}]"
 
         if value.__name__ == "Var":
             types = [res] + [
@@ -259,7 +343,7 @@ class PyiGenerator:
         ]
         if not class_names:
             return
-        print(f"Parsed {file}: Found {[n for n,_ in class_names]}")
+        print(f"Parsed {file}: Found {[n for n, _ in class_names]}")
         self._write_pyi_file(local_variables, functions, class_names)
 
     def _scan_folder(self, folder):

tests/utils/test_utils.py

@@ -1,7 +1,7 @@
 import os
 import typing
 from pathlib import Path
-from typing import Any, List, Union
+from typing import Any, List, Literal, Union
 
 import pytest
 import typer
@@ -182,12 +182,22 @@ def test_is_backend_variable(input, output):
         (int, Any, True),
         (Any, Any, True),
         (Union[int, float], Any, True),
+        (str, Union[Literal["test", "value"], int], True),
+        (int, Union[Literal["test", "value"], int], True),
+        (str, Literal["test", "value"], True),
+        (int, Literal["test", "value"], False),
     ],
 )
 def test_issubclass(cls: type, cls_check: type, expected: bool):
     assert types._issubclass(cls, cls_check) == expected
 
 
+@pytest.mark.parametrize("cls", [Literal["test", 1], Literal[1, "test"]])
+def test_unsupported_literals(cls: type):
+    with pytest.raises(TypeError):
+        types.get_base_class(cls)
+
+
 @pytest.mark.parametrize(
     "app_name,expected_config_name",
     [