add Component.tag str type annotation

integration/test_event_actions.py

@@ -25,7 +25,7 @@ def TestEventAction():
     class EventFiringComponent(rx.Component):
         """A component that fires onClick event without passing DOM event."""
 
-        tag = "EventFiringComponent"
+        tag: str = "EventFiringComponent"
 
         def _get_custom_code(self) -> str | None:
             return """

reflex/components/base/body.py

@@ -6,4 +6,4 @@ from reflex.components.component import Component
 class Body(Component):
     """A body component."""
 
-    tag = "body"
+    tag: str = "body"

reflex/components/base/document.py

@@ -14,7 +14,7 @@ class NextDocumentLib(Component):
 class Html(NextDocumentLib):
     """The document html."""
 
-    tag = "Html"
+    tag: str = "Html"
 
     lang: Optional[str]
 
@@ -22,16 +22,16 @@ class Html(NextDocumentLib):
 class DocumentHead(NextDocumentLib):
     """The document head."""
 
-    tag = "Head"
+    tag: str = "Head"
 
 
 class Main(NextDocumentLib):
     """The document main section."""
 
-    tag = "Main"
+    tag: str = "Main"
 
 
 class NextScript(NextDocumentLib):
     """The document main scripts."""
 
-    tag = "NextScript"
+    tag: str = "NextScript"

reflex/components/base/fragment.py

@@ -6,4 +6,4 @@ class Fragment(Component):
     """A React fragment to return multiple components from a function without wrapping it in a container."""
 
     library = "react"
-    tag = "Fragment"
+    tag: str = "Fragment"

reflex/components/base/head.py

@@ -12,6 +12,6 @@ class NextHeadLib(Component):
 class Head(NextHeadLib, MemoizationLeaf):
     """Head Component."""
 
-    tag = "NextHead"
+    tag: str = "NextHead"
 
     is_default = True

reflex/components/base/link.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class RawLink(Component):
     """A component that displays the title of the current page."""
 
-    tag = "link"
+    tag: str = "link"
 
     # The href.
     href: Optional[Var[str]] = None
@@ -20,7 +20,7 @@ class RawLink(Component):
 class ScriptTag(Component):
     """A script tag with the specified type and source."""
 
-    tag = "script"
+    tag: str = "script"
 
     # The type of script represented.
     type_: Optional[Var[str]] = None

reflex/components/base/meta.py

@@ -11,7 +11,7 @@ from reflex.components.component import Component
 class Title(Component):
     """A component that displays the title of the current page."""
 
-    tag = "title"
+    tag: str = "title"
 
     def render(self) -> dict:
         """Render the title component.
@@ -29,7 +29,7 @@ class Title(Component):
 class Meta(Component):
     """A component that displays metadata for the current page."""
 
-    tag = "meta"
+    tag: str = "meta"
 
     # The description of character encoding.
     char_set: Optional[str] = None

reflex/components/base/script.py

@@ -20,7 +20,7 @@ class Script(Component):
     """
 
     library = "next/script"
-    tag = "Script"
+    tag: str = "Script"
     is_default = True
 
     # Required unless inline script is used

reflex/components/chakra/base.py

@@ -53,7 +53,7 @@ class ChakraComponent(Component):
 class ChakraProvider(ChakraComponent):
     """Top level Chakra provider must be included in any app using chakra components."""
 
-    tag = "ChakraProvider"
+    tag: str = "ChakraProvider"
 
     theme: Optional[Var[str]] = None
 
@@ -93,7 +93,7 @@ class ChakraColorModeProvider(Component):
     """Next-themes integration for chakra colorModeProvider."""
 
     library = "/components/reflex/chakra_color_mode_provider.js"
-    tag = "ChakraColorModeProvider"
+    tag: str = "ChakraColorModeProvider"
     is_default = True
 
 

reflex/components/chakra/datadisplay/badge.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Badge(ChakraComponent):
     """A badge component."""
 
-    tag = "Badge"
+    tag: str = "Badge"
 
     # Variant of the badge ("solid" | "subtle" | "outline")
     variant: Optional[Var[LiteralVariant]] = None

reflex/components/chakra/datadisplay/code.py

@@ -7,4 +7,4 @@ from reflex.components.chakra import (
 class Code(ChakraComponent):
     """Used to display inline code."""
 
-    tag = "Code"
+    tag: str = "Code"

reflex/components/chakra/datadisplay/divider.py

@@ -10,7 +10,7 @@ LiteralLayout = Literal["horizontal", "vertical"]
 class Divider(ChakraComponent):
     """Dividers are used to visually separate content in a list or group."""
 
-    tag = "Divider"
+    tag: str = "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: Optional[Var[LiteralLayout]] = None

reflex/components/chakra/datadisplay/keyboard_key.py

@@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 class KeyboardKey(ChakraComponent):
     """Display a keyboard key text."""
 
-    tag = "Kbd"
+    tag: str = "Kbd"

reflex/components/chakra/datadisplay/list.py

@@ -14,7 +14,7 @@ T = TypeVar("T")
 class List(ChakraComponent, Generic[T]):
     """Display a list of items."""
 
-    tag = "List"
+    tag: str = "List"
 
     # The space between each list item
     spacing: Optional[Var[str]] = None
@@ -50,16 +50,16 @@ class List(ChakraComponent, Generic[T]):
 class ListItem(ChakraComponent):
     """A single list item."""
 
-    tag = "ListItem"
+    tag: str = "ListItem"
 
 
 class OrderedList(List):
     """An ordered list component with numbers."""
 
-    tag = "OrderedList"
+    tag: str = "OrderedList"
 
 
 class UnorderedList(List):
     """An unordered list component with bullets."""
 
-    tag = "UnorderedList"
+    tag: str = "UnorderedList"

reflex/components/chakra/datadisplay/stat.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Stat(ChakraComponent):
     """The Stat component is used to display some statistics. It can take in a label, a number and a help text."""
 
-    tag = "Stat"
+    tag: str = "Stat"
 
     @classmethod
     def create(
@@ -51,25 +51,25 @@ class Stat(ChakraComponent):
 class StatLabel(ChakraComponent):
     """A stat label component."""
 
-    tag = "StatLabel"
+    tag: str = "StatLabel"
 
 
 class StatNumber(ChakraComponent):
     """The stat to display."""
 
-    tag = "StatNumber"
+    tag: str = "StatNumber"
 
 
 class StatHelpText(ChakraComponent):
     """A helper text to display under the stat."""
 
-    tag = "StatHelpText"
+    tag: str = "StatHelpText"
 
 
 class StatArrow(ChakraComponent):
     """A stat arrow component indicating the direction of change."""
 
-    tag = "StatArrow"
+    tag: str = "StatArrow"
 
     # The type of arrow, either increase or decrease.
     type_: Optional[Var[str]] = None
@@ -78,4 +78,4 @@ class StatArrow(ChakraComponent):
 class StatGroup(ChakraComponent):
     """A stat group component to evenly space out the stats."""
 
-    tag = "StatGroup"
+    tag: str = "StatGroup"

reflex/components/chakra/datadisplay/table.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Table(ChakraComponent):
     """A table component."""
 
-    tag = "Table"
+    tag: str = "Table"
 
     # The color scheme of the table
     color_scheme: Optional[Var[str]] = None
@@ -62,7 +62,7 @@ class Table(ChakraComponent):
 class Thead(ChakraComponent):
     """A table header component."""
 
-    tag = "Thead"
+    tag: str = "Thead"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot"]
@@ -114,7 +114,7 @@ class Thead(ChakraComponent):
 class Tbody(ChakraComponent):
     """A table body component."""
 
-    tag = "Tbody"
+    tag: str = "Tbody"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Td", "Th"]
@@ -188,7 +188,7 @@ class Tbody(ChakraComponent):
 class Tfoot(ChakraComponent):
     """A table footer component."""
 
-    tag = "Tfoot"
+    tag: str = "Tfoot"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Td", "Th", "Tfoot"]
@@ -237,7 +237,7 @@ class Tfoot(ChakraComponent):
 class Tr(ChakraComponent):
     """A table row component."""
 
-    tag = "Tr"
+    tag: str = "Tr"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tfoot", "Tr"]
@@ -268,7 +268,7 @@ class Tr(ChakraComponent):
 class Th(ChakraComponent):
     """A table header cell component."""
 
-    tag = "Th"
+    tag: str = "Th"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead", "Tr", "Td", "Th"]
@@ -280,7 +280,7 @@ class Th(ChakraComponent):
 class Td(ChakraComponent):
     """A table data cell component."""
 
-    tag = "Td"
+    tag: str = "Td"
 
     # invalid children components
     _invalid_children: List[str] = ["Tbody", "Thead"]
@@ -292,7 +292,7 @@ class Td(ChakraComponent):
 class TableCaption(ChakraComponent):
     """A table caption component."""
 
-    tag = "TableCaption"
+    tag: str = "TableCaption"
 
     # The placement of the table caption. This sets the `caption-side` CSS attribute.
     placement: Optional[Var[str]] = None
@@ -301,4 +301,4 @@ class TableCaption(ChakraComponent):
 class TableContainer(ChakraComponent):
     """The table container component renders a div that wraps the table component."""
 
-    tag = "TableContainer"
+    tag: str = "TableContainer"

reflex/components/chakra/datadisplay/tag.py

@@ -14,31 +14,31 @@ from reflex.vars import Var
 class TagLabel(ChakraComponent):
     """The label of the tag."""
 
-    tag = "TagLabel"
+    tag: str = "TagLabel"
 
 
 class TagLeftIcon(ChakraComponent):
     """The left icon of the tag."""
 
-    tag = "TagLeftIcon"
+    tag: str = "TagLeftIcon"
 
 
 class TagRightIcon(ChakraComponent):
     """The right icon of the tag."""
 
-    tag = "TagRightIcon"
+    tag: str = "TagRightIcon"
 
 
 class TagCloseButton(ChakraComponent):
     """The close button of the tag."""
 
-    tag = "TagCloseButton"
+    tag: str = "TagCloseButton"
 
 
 class Tag(ChakraComponent):
     """The parent wrapper that provides context for its children."""
 
-    tag = "Tag"
+    tag: str = "Tag"
 
     # The visual color appearance of the tag.
     # options: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" |

reflex/components/chakra/disclosure/accordion.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Accordion(ChakraComponent):
     """The wrapper that uses cloneElement to pass props to AccordionItem children."""
 
-    tag = "Accordion"
+    tag: str = "Accordion"
 
     # If true, multiple accordion items can be expanded at once.
     allow_multiple: Optional[Var[bool]] = None
@@ -79,7 +79,7 @@ class Accordion(ChakraComponent):
 class AccordionItem(ChakraComponent):
     """A single accordion item."""
 
-    tag = "AccordionItem"
+    tag: str = "AccordionItem"
 
     # A unique id for the accordion item.
     id_: Optional[Var[str]] = None
@@ -94,16 +94,16 @@ class AccordionItem(ChakraComponent):
 class AccordionButton(ChakraComponent):
     """The button that toggles the expand/collapse state of the accordion item. This button must be wrapped in an element with role heading."""
 
-    tag = "AccordionButton"
+    tag: str = "AccordionButton"
 
 
 class AccordionPanel(ChakraComponent):
     """The container for the details to be revealed."""
 
-    tag = "AccordionPanel"
+    tag: str = "AccordionPanel"
 
 
 class AccordionIcon(ChakraComponent):
     """A chevron-down icon that rotates based on the expanded/collapsed state."""
 
-    tag = "AccordionIcon"
+    tag: str = "AccordionIcon"

reflex/components/chakra/disclosure/tabs.py

@@ -14,7 +14,7 @@ from reflex.vars import Var
 class Tabs(ChakraComponent):
     """An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern. Tabs, provides context and state for all components."""
 
-    tag = "Tabs"
+    tag: str = "Tabs"
 
     # The alignment of the tabs ("center" | "end" | "start").
     align: Optional[Var[LiteralTagAlign]] = None
@@ -75,7 +75,7 @@ class Tabs(ChakraComponent):
 class Tab(ChakraComponent):
     """An element that serves as a label for one of the tab panels and can be activated to display that panel.."""
 
-    tag = "Tab"
+    tag: str = "Tab"
 
     # If true, the Tab won't be toggleable.
     is_disabled: Optional[Var[bool]] = None
@@ -95,7 +95,7 @@ class Tab(ChakraComponent):
 class TabList(ChakraComponent):
     """Wrapper for the Tab components."""
 
-    tag = "TabList"
+    tag: str = "TabList"
 
     _valid_parents: List[str] = ["Tabs"]
 
@@ -103,7 +103,7 @@ class TabList(ChakraComponent):
 class TabPanels(ChakraComponent):
     """Wrapper for the Tab components."""
 
-    tag = "TabPanels"
+    tag: str = "TabPanels"
 
     _valid_parents: List[str] = ["Tabs"]
 
@@ -111,6 +111,6 @@ class TabPanels(ChakraComponent):
 class TabPanel(ChakraComponent):
     """An element that contains the content associated with a tab."""
 
-    tag = "TabPanel"
+    tag: str = "TabPanel"
 
     _valid_parents: List[str] = ["TabPanels"]

reflex/components/chakra/disclosure/transition.py

@@ -18,13 +18,13 @@ class Transition(ChakraComponent):
 class Fade(Transition):
     """Fade component cab be used show and hide content of your app."""
 
-    tag = "Fade"
+    tag: str = "Fade"
 
 
 class ScaleFade(Transition):
     """Fade component can be scaled and reverse your app."""
 
-    tag = "ScaleFade"
+    tag: str = "ScaleFade"
 
     # The initial scale of the element
     initial_scale: Optional[Var[float]] = None
@@ -36,7 +36,7 @@ class ScaleFade(Transition):
 class Slide(Transition):
     """Side can be used show content below your app."""
 
-    tag = "Slide"
+    tag: str = "Slide"
 
     # The direction to slide from
     direction: Optional[Var[str]] = None
@@ -45,7 +45,7 @@ class Slide(Transition):
 class SlideFade(Transition):
     """SlideFade component."""
 
-    tag = "SlideFade"
+    tag: str = "SlideFade"
 
     # The offset on the horizontal or x axis
     offsetX: Optional[Var[Union[str, int]]] = None
@@ -60,7 +60,7 @@ class SlideFade(Transition):
 class Collapse(Transition):
     """Collapse component can collapse some content."""
 
-    tag = "Collapse"
+    tag: str = "Collapse"
 
     # If true, the opacity of the content will be animated
     animateOpacity: Optional[Var[bool]] = None

reflex/components/chakra/disclosure/visuallyhidden.py

@@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 class VisuallyHidden(ChakraComponent):
     """A component that visually hides content while still allowing it to be read by screen readers."""
 
-    tag = "VisuallyHidden"
+    tag: str = "VisuallyHidden"

reflex/components/chakra/feedback/alert.py

@@ -13,7 +13,7 @@ from reflex.vars import Var
 class Alert(ChakraComponent):
     """An alert feedback box."""
 
-    tag = "Alert"
+    tag: str = "Alert"
 
     # The status of the alert ("success" | "info" | "warning" | "error")
     status: Optional[Var[LiteralStatus]] = None
@@ -54,16 +54,16 @@ class Alert(ChakraComponent):
 class AlertIcon(ChakraComponent):
     """An icon displayed in the alert."""
 
-    tag = "AlertIcon"
+    tag: str = "AlertIcon"
 
 
 class AlertTitle(ChakraComponent):
     """The title of the alert."""
 
-    tag = "AlertTitle"
+    tag: str = "AlertTitle"
 
 
 class AlertDescription(ChakraComponent):
     """AlertDescription composes the Box component."""
 
-    tag = "AlertDescription"
+    tag: str = "AlertDescription"

reflex/components/chakra/feedback/circularprogress.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class CircularProgress(ChakraComponent):
     """The CircularProgress component is used to indicate the progress for determinate and indeterminate processes."""
 
-    tag = "CircularProgress"
+    tag: str = "CircularProgress"
 
     # If true, the cap of the progress indicator will be rounded.
     cap_is_round: Optional[Var[bool]] = None
@@ -64,4 +64,4 @@ class CircularProgress(ChakraComponent):
 class CircularProgressLabel(ChakraComponent):
     """Label of CircularProcess."""
 
-    tag = "CircularProgressLabel"
+    tag: str = "CircularProgressLabel"

reflex/components/chakra/feedback/progress.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Progress(ChakraComponent):
     """A bar to display progress."""
 
-    tag = "Progress"
+    tag: str = "Progress"
 
     # If true, the progress bar will show stripe
     has_stripe: Optional[Var[bool]] = None

reflex/components/chakra/feedback/skeleton.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Skeleton(ChakraComponent):
     """Skeleton is used to display the loading state of some components. You can use it as a standalone component. Or to wrap another component to take the same height and width."""
 
-    tag = "Skeleton"
+    tag: str = "Skeleton"
 
     # The color at the animation end
     end_color: Optional[Var[str]] = None
@@ -29,7 +29,7 @@ class Skeleton(ChakraComponent):
 class SkeletonCircle(ChakraComponent):
     """SkeletonCircle is used to display the loading state of some components."""
 
-    tag = "SkeletonCircle"
+    tag: str = "SkeletonCircle"
 
     # The color at the animation end
     end_color: Optional[Var[str]] = None
@@ -50,7 +50,7 @@ class SkeletonCircle(ChakraComponent):
 class SkeletonText(ChakraComponent):
     """SkeletonText is used to display the loading state of some components."""
 
-    tag = "SkeletonText"
+    tag: str = "SkeletonText"
 
     # The color at the animation end
     end_color: Optional[Var[str]] = None

reflex/components/chakra/feedback/spinner.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Spinner(ChakraComponent):
     """The component that spins."""
 
-    tag = "Spinner"
+    tag: str = "Spinner"
 
     # The color of the empty area in the spinner
     empty_color: Optional[Var[str]] = None

reflex/components/chakra/forms/button.py

@@ -14,7 +14,7 @@ from reflex.vars import Var
 class Button(ChakraComponent):
     """The Button component is used to trigger an event or event, such as submitting a form, opening a dialog, canceling an event, or performing a delete operation."""
 
-    tag = "Button"
+    tag: str = "Button"
 
     # The space between the button icon and label.
     icon_spacing: Optional[Var[int]] = None
@@ -64,7 +64,7 @@ class Button(ChakraComponent):
 class ButtonGroup(ChakraComponent):
     """A group of buttons."""
 
-    tag = "ButtonGroup"
+    tag: str = "ButtonGroup"
 
     # If true, the borderRadius of button that are direct children will be altered to look flushed together.
     is_attached: Optional[Var[bool]] = None

reflex/components/chakra/forms/checkbox.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class Checkbox(ChakraComponent):
     """The Checkbox component is used in forms when a user needs to select multiple values from several options."""
 
-    tag = "Checkbox"
+    tag: str = "Checkbox"
 
     # Color scheme for checkbox.
     # Options:
@@ -71,7 +71,7 @@ class Checkbox(ChakraComponent):
 class CheckboxGroup(ChakraComponent):
     """A group of checkboxes."""
 
-    tag = "CheckboxGroup"
+    tag: str = "CheckboxGroup"
 
     # The value of the checkbox group
     value: Optional[Var[str]] = None

reflex/components/chakra/forms/colormodeswitch.py

@@ -99,5 +99,5 @@ class ColorModeButton(Button):
 class ColorModeScript(ChakraComponent):
     """Chakra color mode script."""
 
-    tag = "ColorModeScript"
+    tag: str = "ColorModeScript"
     initialColorMode: str = LIGHT_COLOR_MODE

reflex/components/chakra/forms/editable.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Editable(ChakraComponent):
     """The wrapper component that provides context value."""
 
-    tag = "Editable"
+    tag: str = "Editable"
 
     # If true, the Editable will be disabled.
     is_disabled: Optional[Var[bool]] = None
@@ -55,16 +55,16 @@ class Editable(ChakraComponent):
 class EditableInput(ChakraComponent):
     """The edit view of the component. It shows when you click or focus on the text."""
 
-    tag = "EditableInput"
+    tag: str = "EditableInput"
 
 
 class EditableTextarea(ChakraComponent):
     """Use the textarea element to handle multi line text input in an editable context."""
 
-    tag = "EditableTextarea"
+    tag: str = "EditableTextarea"
 
 
 class EditablePreview(ChakraComponent):
     """The read-only view of the component."""
 
-    tag = "EditablePreview"
+    tag: str = "EditablePreview"

reflex/components/chakra/forms/form.py

@@ -36,7 +36,7 @@ HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
 class Form(ChakraComponent):
     """A form component."""
 
-    tag = "Box"
+    tag: str = "Box"
 
     # What the form renders to.
     as_: Var[str] = "form"  # type: ignore
@@ -151,7 +151,7 @@ class Form(ChakraComponent):
 class FormControl(ChakraComponent):
     """Provide context to form components."""
 
-    tag = "FormControl"
+    tag: str = "FormControl"
 
     # If true, the form control will be disabled.
     is_disabled: Optional[Var[bool]] = None
@@ -216,13 +216,13 @@ class FormControl(ChakraComponent):
 class FormHelperText(ChakraComponent):
     """A form helper text component."""
 
-    tag = "FormHelperText"
+    tag: str = "FormHelperText"
 
 
 class FormLabel(ChakraComponent):
     """A form label component."""
 
-    tag = "FormLabel"
+    tag: str = "FormLabel"
 
     # Link
     html_for: Optional[Var[str]] = None
@@ -231,4 +231,4 @@ class FormLabel(ChakraComponent):
 class FormErrorMessage(ChakraComponent):
     """A form error message component."""
 
-    tag = "FormErrorMessage"
+    tag: str = "FormErrorMessage"

reflex/components/chakra/forms/iconbutton.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class IconButton(Text):
     """A button with an icon."""
 
-    tag = "IconButton"
+    tag: str = "IconButton"
     library = "@chakra-ui/button@2.1.0"
 
     # The type of button.

reflex/components/chakra/forms/input.py

@@ -17,7 +17,7 @@ from reflex.vars import Var
 class Input(ChakraComponent):
     """The Input component is a component that is used to get user input in a text field."""
 
-    tag = "Input"
+    tag: str = "Input"
 
     # State var to bind the input.
     value: Optional[Var[str]] = None
@@ -99,7 +99,7 @@ class Input(ChakraComponent):
 class InputGroup(ChakraComponent):
     """The InputGroup component is a component that is used to group a set of inputs."""
 
-    tag = "InputGroup"
+    tag: str = "InputGroup"
 
     _memoization_mode = MemoizationMode(recursive=False)
 
@@ -107,22 +107,22 @@ class InputGroup(ChakraComponent):
 class InputLeftAddon(ChakraComponent):
     """The InputLeftAddon component is a component that is used to add an addon to the left of an input."""
 
-    tag = "InputLeftAddon"
+    tag: str = "InputLeftAddon"
 
 
 class InputRightAddon(ChakraComponent):
     """The InputRightAddon component is a component that is used to add an addon to the right of an input."""
 
-    tag = "InputRightAddon"
+    tag: str = "InputRightAddon"
 
 
 class InputLeftElement(ChakraComponent):
     """The InputLeftElement component is a component that is used to add an element to the left of an input."""
 
-    tag = "InputLeftElement"
+    tag: str = "InputLeftElement"
 
 
 class InputRightElement(ChakraComponent):
     """The InputRightElement component is a component that is used to add an element to the right of an input."""
 
-    tag = "InputRightElement"
+    tag: str = "InputRightElement"

reflex/components/chakra/forms/multiselect.py

@@ -47,7 +47,7 @@ class Select(Component):
     """
 
     library = "chakra-react-select@4.7.5"
-    tag = "Select"
+    tag: str = "Select"
     alias = "MultiSelect"
 
     # Focus the control when it is mounted

reflex/components/chakra/forms/numberinput.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class NumberInput(ChakraComponent):
     """The wrapper that provides context and logic to the components."""
 
-    tag = "NumberInput"
+    tag: str = "NumberInput"
 
     # State var to bind the input.
     value: Optional[Var[Number]] = None
@@ -115,22 +115,22 @@ class NumberInput(ChakraComponent):
 class NumberInputField(ChakraComponent):
     """The input field itself."""
 
-    tag = "NumberInputField"
+    tag: str = "NumberInputField"
 
 
 class NumberInputStepper(ChakraComponent):
     """The wrapper for the input's stepper buttons."""
 
-    tag = "NumberInputStepper"
+    tag: str = "NumberInputStepper"
 
 
 class NumberIncrementStepper(ChakraComponent):
     """The button to increment the value of the input."""
 
-    tag = "NumberIncrementStepper"
+    tag: str = "NumberIncrementStepper"
 
 
 class NumberDecrementStepper(ChakraComponent):
     """The button to decrement the value of the input."""
 
-    tag = "NumberDecrementStepper"
+    tag: str = "NumberDecrementStepper"

reflex/components/chakra/forms/pininput.py

@@ -15,7 +15,7 @@ from reflex.vars import Var
 class PinInput(ChakraComponent):
     """The component that provides context to all the pin-input fields."""
 
-    tag = "PinInput"
+    tag: str = "PinInput"
 
     # State var to bind the the input.
     value: Optional[Var[str]] = None
@@ -164,7 +164,7 @@ class PinInput(ChakraComponent):
 class PinInputField(ChakraComponent):
     """The text field that user types in - must be a direct child of PinInput."""
 
-    tag = "PinInputField"
+    tag: str = "PinInputField"
 
     # the position of the PinInputField inside the PinInput.
     # Default to None because it is assigned by PinInput when created.

reflex/components/chakra/forms/radio.py

@@ -13,7 +13,7 @@ from reflex.vars import Var
 class RadioGroup(ChakraComponent):
     """A grouping of individual radio options."""
 
-    tag = "RadioGroup"
+    tag: str = "RadioGroup"
 
     # State var to bind the the input.
     value: Optional[Var[Any]] = None
@@ -60,7 +60,7 @@ class RadioGroup(ChakraComponent):
 class Radio(Text):
     """Radios are used when only one choice may be selected in a series of options."""
 
-    tag = "Radio"
+    tag: str = "Radio"
 
     # Value of radio.
     value: Optional[Var[Any]] = None

reflex/components/chakra/forms/rangeslider.py

@@ -13,7 +13,7 @@ from reflex.vars import Var
 class RangeSlider(ChakraComponent):
     """The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price."""
 
-    tag = "RangeSlider"
+    tag: str = "RangeSlider"
 
     # State var to bind the the input.
     value: Optional[Var[List[int]]] = None
@@ -121,19 +121,19 @@ class RangeSlider(ChakraComponent):
 class RangeSliderTrack(ChakraComponent):
     """A range slider track."""
 
-    tag = "RangeSliderTrack"
+    tag: str = "RangeSliderTrack"
 
 
 class RangeSliderFilledTrack(ChakraComponent):
     """A filled range slider track."""
 
-    tag = "RangeSliderFilledTrack"
+    tag: str = "RangeSliderFilledTrack"
 
 
 class RangeSliderThumb(ChakraComponent):
     """A range slider thumb."""
 
-    tag = "RangeSliderThumb"
+    tag: str = "RangeSliderThumb"
 
     # The position of the thumb.
     index: Optional[Var[int]] = None

reflex/components/chakra/forms/select.py

@@ -13,7 +13,7 @@ from reflex.vars import Var
 class Select(ChakraComponent):
     """Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead."""
 
-    tag = "Select"
+    tag: str = "Select"
 
     # State var to bind the select.
     value: Optional[Var[str]] = None
@@ -87,7 +87,7 @@ class Select(ChakraComponent):
 class Option(Text):
     """A select option."""
 
-    tag = "option"
+    tag: str = "option"
 
     value: Optional[Var[Any]] = None
 

reflex/components/chakra/forms/slider.py

@@ -14,7 +14,7 @@ LiteralLayout = Literal["horizontal", "vertical"]
 class Slider(ChakraComponent):
     """The wrapper that provides context and functionality for all children."""
 
-    tag = "Slider"
+    tag: str = "Slider"
 
     # State var to bind the input.
     value: Optional[Var[int]] = None
@@ -109,19 +109,19 @@ class Slider(ChakraComponent):
 class SliderTrack(ChakraComponent):
     """The empty part of the slider that shows the track."""
 
-    tag = "SliderTrack"
+    tag: str = "SliderTrack"
 
 
 class SliderFilledTrack(ChakraComponent):
     """The filled part of the slider."""
 
-    tag = "SliderFilledTrack"
+    tag: str = "SliderFilledTrack"
 
 
 class SliderThumb(ChakraComponent):
     """The handle that's used to change the slider value."""
 
-    tag = "SliderThumb"
+    tag: str = "SliderThumb"
 
     # The size of the thumb.
     box_size: Optional[Var[str]] = None
@@ -130,4 +130,4 @@ class SliderThumb(ChakraComponent):
 class SliderMark(ChakraComponent):
     """The label or mark that shows names for specific slider values."""
 
-    tag = "SliderMark"
+    tag: str = "SliderMark"

reflex/components/chakra/forms/switch.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Switch(ChakraComponent):
     """Toggleable switch component."""
 
-    tag = "Switch"
+    tag: str = "Switch"
 
     # If true, the switch will be checked. You'll need to set an on_change event handler to update its value (since it is now controlled)
     is_checked: Optional[Var[bool]] = None

reflex/components/chakra/forms/textarea.py

@@ -13,7 +13,7 @@ from reflex.vars import Var
 class TextArea(ChakraComponent):
     """A text area component."""
 
-    tag = "Textarea"
+    tag: str = "Textarea"
 
     # State var to bind the input.
     value: Optional[Var[str]] = None

reflex/components/chakra/layout/aspect_ratio.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class AspectRatio(ChakraComponent):
     """AspectRatio component is used to embed responsive videos and maps, etc."""
 
-    tag = "AspectRatio"
+    tag: str = "AspectRatio"
 
     # The aspect ratio of the Box
     ratio: Optional[Var[float]] = None

reflex/components/chakra/layout/box.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Box(ChakraComponent):
     """A generic container component that can contain other components."""
 
-    tag = "Box"
+    tag: str = "Box"
 
     # The type element to render. You can specify an image, video, or any other HTML element such as iframe.
     element: Optional[Var[str]] = None

reflex/components/chakra/layout/card.py

@@ -14,25 +14,25 @@ from reflex.vars import Var
 class CardHeader(ChakraComponent):
     """The wrapper that contains a card's header."""
 
-    tag = "CardHeader"
+    tag: str = "CardHeader"
 
 
 class CardBody(ChakraComponent):
     """The wrapper that houses the card's main content."""
 
-    tag = "CardBody"
+    tag: str = "CardBody"
 
 
 class CardFooter(ChakraComponent):
     """The footer that houses the card actions."""
 
-    tag = "CardFooter"
+    tag: str = "CardFooter"
 
 
 class Card(ChakraComponent):
     """The parent wrapper that provides context for its children."""
 
-    tag = "Card"
+    tag: str = "Card"
 
     # [required] The flex alignment of the card
     align: Optional[Var[str]] = None

reflex/components/chakra/layout/center.py

@@ -6,16 +6,16 @@ from reflex.components.chakra import ChakraComponent
 class Center(ChakraComponent):
     """A box that centers its contents."""
 
-    tag = "Center"
+    tag: str = "Center"
 
 
 class Square(ChakraComponent):
     """A centered square container."""
 
-    tag = "Square"
+    tag: str = "Square"
 
 
 class Circle(ChakraComponent):
     """A square container with round border-radius."""
 
-    tag = "Circle"
+    tag: str = "Circle"

reflex/components/chakra/layout/container.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Container(ChakraComponent):
     """A flexbox container that centers its children and sets a max width."""
 
-    tag = "Container"
+    tag: str = "Container"
 
     # If true, container will center its children regardless of their width.
     center_content: Optional[Var[bool]] = None

reflex/components/chakra/layout/flex.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Flex(ChakraComponent):
     """A reflexive container component."""
 
-    tag = "Flex"
+    tag: str = "Flex"
 
     # How to align items in the flex.
     align: Optional[Var[str]] = None

reflex/components/chakra/layout/grid.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Grid(ChakraComponent):
     """A grid component."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
     # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_
@@ -43,7 +43,7 @@ class Grid(ChakraComponent):
 class GridItem(ChakraComponent):
     """Used as a child of Grid to control the span, and start positions within the grid."""
 
-    tag = "GridItem"
+    tag: str = "GridItem"
 
     # Shorthand prop for gridArea
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area)_
@@ -73,7 +73,7 @@ class GridItem(ChakraComponent):
 class ResponsiveGrid(ChakraComponent):
     """A responsive grid component."""
 
-    tag = "SimpleGrid"
+    tag: str = "SimpleGrid"
 
     # Shorthand prop for gridAutoColumns to provide automatic column sizing based on content.
     # Learn more _[here](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns)_

reflex/components/chakra/layout/spacer.py

@@ -6,4 +6,4 @@ from reflex.components.chakra import ChakraComponent
 class Spacer(ChakraComponent):
     """A flexible space component."""
 
-    tag = "Spacer"
+    tag: str = "Spacer"

reflex/components/chakra/layout/stack.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Stack(ChakraComponent):
     """Container to stack elements with spacing."""
 
-    tag = "Stack"
+    tag: str = "Stack"
 
     # Shorthand for alignItems style prop
     align_items: Optional[Var[str]] = None
@@ -38,10 +38,10 @@ class Stack(ChakraComponent):
 class Hstack(Stack):
     """Stack items horizontally."""
 
-    tag = "HStack"
+    tag: str = "HStack"
 
 
 class Vstack(Stack):
     """Stack items vertically."""
 
-    tag = "VStack"
+    tag: str = "VStack"

reflex/components/chakra/layout/wrap.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Wrap(ChakraComponent):
     """Layout component used to add space between elements and wrap automatically if there isn't enough space."""
 
-    tag = "Wrap"
+    tag: str = "Wrap"
 
     # How to align the items.
     align: Optional[Var[str]] = None
@@ -55,4 +55,4 @@ class Wrap(ChakraComponent):
 class WrapItem(ChakraComponent):
     """Item of the Wrap component."""
 
-    tag = "WrapItem"
+    tag: str = "WrapItem"

reflex/components/chakra/media/avatar.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Avatar(ChakraComponent):
     """The image that represents the user."""
 
-    tag = "Avatar"
+    tag: str = "Avatar"
 
     # The default avatar used as fallback when name, and src is not specified.
     icon: Optional[Var[str]] = None
@@ -51,13 +51,13 @@ class Avatar(ChakraComponent):
 class AvatarBadge(ChakraComponent):
     """A wrapper that displays its content on the right corner of the avatar."""
 
-    tag = "AvatarBadge"
+    tag: str = "AvatarBadge"
 
 
 class AvatarGroup(ChakraComponent):
     """A wrapper to stack multiple Avatars together."""
 
-    tag = "AvatarGroup"
+    tag: str = "AvatarGroup"
 
     # The maximum number of visible avatars.
     max_: Optional[Var[int]] = None

reflex/components/chakra/media/icon.py

@@ -14,7 +14,7 @@ class ChakraIconComponent(ChakraComponent):
 class Icon(ChakraIconComponent):
     """An image icon."""
 
-    tag = "None"
+    tag: str = "None"
 
     @classmethod
     def create(cls, *children, **props):

reflex/components/chakra/media/image.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Image(ChakraComponent):
     """Display an image."""
 
-    tag = "Image"
+    tag: str = "Image"
     alias = "ChakraImage"
     # How to align the image within its bounds. It maps to css `object-position` property.
     align: Optional[Var[str]] = None

reflex/components/chakra/navigation/breadcrumb.py

@@ -11,7 +11,7 @@ from reflex.vars import Var
 class Breadcrumb(ChakraComponent):
     """The parent container for breadcrumbs."""
 
-    tag = "Breadcrumb"
+    tag: str = "Breadcrumb"
 
     # The visual separator between each breadcrumb item
     separator: Optional[Var[str]] = None
@@ -52,7 +52,7 @@ class Breadcrumb(ChakraComponent):
 class BreadcrumbItem(ChakraComponent):
     """Individual breadcrumb element containing a link and a divider."""
 
-    tag = "BreadcrumbItem"
+    tag: str = "BreadcrumbItem"
 
     # Is the current page of the breadcrumb.
     is_current_page: Optional[Var[bool]] = None
@@ -87,13 +87,13 @@ class BreadcrumbItem(ChakraComponent):
 class BreadcrumbSeparator(ChakraComponent):
     """The visual separator between each breadcrumb."""
 
-    tag = "BreadcrumbSeparator"
+    tag: str = "BreadcrumbSeparator"
 
 
 class BreadcrumbLink(Link):
     """The breadcrumb link."""
 
-    tag = "BreadcrumbLink"
+    tag: str = "BreadcrumbLink"
 
     # Is the current page of the breadcrumb.
     is_current_page: Optional[Var[bool]] = None

reflex/components/chakra/navigation/link.py

@@ -13,7 +13,7 @@ next_link = NextLink.create()
 class Link(ChakraComponent):
     """Link to another page."""
 
-    tag = "Link"
+    tag: str = "Link"
 
     # The rel.
     rel: Optional[Var[str]] = None

reflex/components/chakra/navigation/linkoverlay.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class LinkOverlay(ChakraComponent):
     """Wraps child component in a link."""
 
-    tag = "LinkOverlay"
+    tag: str = "LinkOverlay"
 
     # If true, the link will open in new tab
     is_external: Optional[Var[bool]] = None
@@ -20,4 +20,4 @@ class LinkOverlay(ChakraComponent):
 class LinkBox(ChakraComponent):
     """The LinkBox lifts any nested links to the top using z-index to ensure proper keyboard navigation between links."""
 
-    tag = "LinkBox"
+    tag: str = "LinkBox"

reflex/components/chakra/navigation/stepper.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Stepper(ChakraComponent):
     """The parent container for a stepper."""
 
-    tag = "Stepper"
+    tag: str = "Stepper"
 
     orientation: Optional[Var[Literal["vertical", "horizontal"]]] = None
 
@@ -57,37 +57,37 @@ class Stepper(ChakraComponent):
 class Step(ChakraComponent):
     """A component for an individual step in the stepper."""
 
-    tag = "Step"
+    tag: str = "Step"
 
 
 class StepDescription(ChakraComponent):
     """The description text for a step component."""
 
-    tag = "StepDescription"
+    tag: str = "StepDescription"
 
 
 class StepIcon(ChakraComponent):
     """The icon displayed in a step indicator component."""
 
-    tag = "StepIcon"
+    tag: str = "StepIcon"
 
 
 class StepIndicator(ChakraComponent):
     """The component displaying the status of a step."""
 
-    tag = "StepIndicator"
+    tag: str = "StepIndicator"
 
 
 class StepNumber(ChakraComponent):
     """The number of a step displayed in a step indicator component."""
 
-    tag = "StepNumber"
+    tag: str = "StepNumber"
 
 
 class StepSeparator(ChakraComponent):
     """The component separting steps."""
 
-    tag = "StepSeparator"
+    tag: str = "StepSeparator"
 
 
 class StepStatus(ChakraComponent):
@@ -103,10 +103,10 @@ class StepStatus(ChakraComponent):
 
     incomplete: Optional[Var[str]] = None
 
-    tag = "StepStatus"
+    tag: str = "StepStatus"
 
 
 class StepTitle(ChakraComponent):
     """The title text for a step component."""
 
-    tag = "StepTitle"
+    tag: str = "StepTitle"

reflex/components/chakra/overlay/alertdialog.py

@@ -12,7 +12,7 @@ from reflex.vars import Var
 class AlertDialog(ChakraComponent):
     """Provides context and state for the dialog."""
 
-    tag = "AlertDialog"
+    tag: str = "AlertDialog"
 
     # If true, the modal will be open.
     is_open: Optional[Var[bool]] = None
@@ -122,34 +122,34 @@ class AlertDialog(ChakraComponent):
 class AlertDialogBody(ChakraComponent):
     """Should contain the description announced by screen readers."""
 
-    tag = "AlertDialogBody"
+    tag: str = "AlertDialogBody"
 
 
 class AlertDialogHeader(ChakraComponent):
     """Should contain the title announced by screen readers."""
 
-    tag = "AlertDialogHeader"
+    tag: str = "AlertDialogHeader"
 
 
 class AlertDialogFooter(ChakraComponent):
     """Should contain the events of the dialog."""
 
-    tag = "AlertDialogFooter"
+    tag: str = "AlertDialogFooter"
 
 
 class AlertDialogContent(ChakraComponent):
     """The wrapper for the alert dialog's content."""
 
-    tag = "AlertDialogContent"
+    tag: str = "AlertDialogContent"
 
 
 class AlertDialogOverlay(ChakraComponent):
     """The dimmed overlay behind the dialog."""
 
-    tag = "AlertDialogOverlay"
+    tag: str = "AlertDialogOverlay"
 
 
 class AlertDialogCloseButton(ChakraComponent):
     """The button that closes the dialog."""
 
-    tag = "AlertDialogCloseButton"
+    tag: str = "AlertDialogCloseButton"

reflex/components/chakra/overlay/drawer.py

@@ -16,7 +16,7 @@ from reflex.vars import Var
 class Drawer(ChakraComponent):
     """A drawer component."""
 
-    tag = "Drawer"
+    tag: str = "Drawer"
 
     # If true, the modal will be open.
     is_open: Optional[Var[bool]] = None
@@ -137,34 +137,34 @@ class Drawer(ChakraComponent):
 class DrawerBody(ChakraComponent):
     """Drawer body."""
 
-    tag = "DrawerBody"
+    tag: str = "DrawerBody"
 
 
 class DrawerHeader(ChakraComponent):
     """Drawer header."""
 
-    tag = "DrawerHeader"
+    tag: str = "DrawerHeader"
 
 
 class DrawerFooter(ChakraComponent):
     """Drawer footer."""
 
-    tag = "DrawerFooter"
+    tag: str = "DrawerFooter"
 
 
 class DrawerOverlay(ChakraComponent):
     """Drawer overlay."""
 
-    tag = "DrawerOverlay"
+    tag: str = "DrawerOverlay"
 
 
 class DrawerContent(ChakraComponent):
     """Drawer content."""
 
-    tag = "DrawerContent"
+    tag: str = "DrawerContent"
 
 
 class DrawerCloseButton(ChakraComponent):
     """Drawer close button."""
 
-    tag = "DrawerCloseButton"
+    tag: str = "DrawerCloseButton"

reflex/components/chakra/overlay/menu.py

@@ -17,7 +17,7 @@ from reflex.vars import Var
 class Menu(ChakraComponent):
     """The wrapper component provides context, state, and focus management."""
 
-    tag = "Menu"
+    tag: str = "Menu"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Optional[Var[int]] = None
@@ -115,7 +115,7 @@ class Menu(ChakraComponent):
 class MenuButton(ChakraComponent):
     """The trigger for the menu list. Must be a direct child of Menu."""
 
-    tag = "MenuButton"
+    tag: str = "MenuButton"
 
     # The variant of the menu button.
     variant: Optional[Var[str]] = None
@@ -130,7 +130,7 @@ class MenuButton(ChakraComponent):
 class MenuList(ChakraComponent):
     """The wrapper for the menu items. Must be a direct child of Menu."""
 
-    tag = "MenuList"
+    tag: str = "MenuList"
 
     @classmethod
     def create(cls, *children, items: Optional[list] = None, **props) -> Component:
@@ -157,7 +157,7 @@ class MenuList(ChakraComponent):
 class MenuItem(ChakraComponent):
     """The trigger that handles menu selection. Must be a direct child of a MenuList."""
 
-    tag = "MenuItem"
+    tag: str = "MenuItem"
 
     # Overrides the parent menu's closeOnSelect prop.
     close_on_select: Optional[Var[bool]] = None
@@ -178,7 +178,7 @@ class MenuItem(ChakraComponent):
 class MenuItemOption(ChakraComponent):
     """The checkable menu item, to be used with MenuOptionGroup."""
 
-    tag = "MenuItemOption"
+    tag: str = "MenuItemOption"
 
     # Overrides the parent menu's closeOnSelect prop.
     close_on_select: Optional[Var[bool]] = None
@@ -208,13 +208,13 @@ class MenuItemOption(ChakraComponent):
 class MenuGroup(ChakraComponent):
     """A wrapper to group related menu items."""
 
-    tag = "MenuGroup"
+    tag: str = "MenuGroup"
 
 
 class MenuOptionGroup(ChakraComponent):
     """A wrapper for checkable menu items (radio and checkbox)."""
 
-    tag = "MenuOptionGroup"
+    tag: str = "MenuOptionGroup"
 
     # "checkbox" | "radio"
     type_: Optional[Var[LiteralMenuOption]] = None
@@ -226,4 +226,4 @@ class MenuOptionGroup(ChakraComponent):
 class MenuDivider(ChakraComponent):
     """A visual separator for menu items and groups."""
 
-    tag = "MenuDivider"
+    tag: str = "MenuDivider"

reflex/components/chakra/overlay/modal.py

@@ -14,7 +14,7 @@ ModalSizes = Literal["xs", "sm", "md", "lg", "xl", "full"]
 class Modal(ChakraComponent):
     """The wrapper that provides context for its children."""
 
-    tag = "Modal"
+    tag: str = "Modal"
 
     # If true, the modal will be open.
     is_open: Optional[Var[bool]] = None
@@ -133,34 +133,34 @@ class Modal(ChakraComponent):
 class ModalOverlay(ChakraComponent):
     """The dimmed overlay behind the modal dialog."""
 
-    tag = "ModalOverlay"
+    tag: str = "ModalOverlay"
 
 
 class ModalHeader(ChakraComponent):
     """The header that labels the modal dialog."""
 
-    tag = "ModalHeader"
+    tag: str = "ModalHeader"
 
 
 class ModalFooter(ChakraComponent):
     """The footer that houses the modal events."""
 
-    tag = "ModalFooter"
+    tag: str = "ModalFooter"
 
 
 class ModalContent(ChakraComponent):
     """The container for the modal dialog's content."""
 
-    tag = "ModalContent"
+    tag: str = "ModalContent"
 
 
 class ModalBody(ChakraComponent):
     """The wrapper that houses the modal's main content."""
 
-    tag = "ModalBody"
+    tag: str = "ModalBody"
 
 
 class ModalCloseButton(ChakraComponent):
     """The button that closes the modal."""
 
-    tag = "ModalCloseButton"
+    tag: str = "ModalCloseButton"

reflex/components/chakra/overlay/popover.py

@@ -16,7 +16,7 @@ from reflex.vars import Var
 class Popover(ChakraComponent):
     """The wrapper that provides props, state, and context to its children."""
 
-    tag = "Popover"
+    tag: str = "Popover"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Optional[Var[int]] = None
@@ -144,46 +144,46 @@ class Popover(ChakraComponent):
 class PopoverContent(ChakraComponent):
     """The popover itself."""
 
-    tag = "PopoverContent"
+    tag: str = "PopoverContent"
 
 
 class PopoverHeader(ChakraComponent):
     """The header of the popover."""
 
-    tag = "PopoverHeader"
+    tag: str = "PopoverHeader"
 
 
 class PopoverFooter(ChakraComponent):
     """Display a popover footer."""
 
-    tag = "PopoverFooter"
+    tag: str = "PopoverFooter"
 
 
 class PopoverBody(ChakraComponent):
     """The body of the popover."""
 
-    tag = "PopoverBody"
+    tag: str = "PopoverBody"
 
 
 class PopoverArrow(ChakraComponent):
     """A visual arrow that points to the reference (or trigger)."""
 
-    tag = "PopoverArrow"
+    tag: str = "PopoverArrow"
 
 
 class PopoverCloseButton(ChakraComponent):
     """A button to close the popover."""
 
-    tag = "PopoverCloseButton"
+    tag: str = "PopoverCloseButton"
 
 
 class PopoverAnchor(ChakraComponent):
     """Used to wrap the position-reference element."""
 
-    tag = "PopoverAnchor"
+    tag: str = "PopoverAnchor"
 
 
 class PopoverTrigger(ChakraComponent):
     """Used to wrap the reference (or trigger) element."""
 
-    tag = "PopoverTrigger"
+    tag: str = "PopoverTrigger"

reflex/components/chakra/overlay/tooltip.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Tooltip(ChakraComponent):
     """A tooltip message to appear."""
 
-    tag = "Tooltip"
+    tag: str = "Tooltip"
 
     # The padding required to prevent the arrow from reaching the very edge of the popper.
     arrow_padding: Optional[Var[int]] = None

reflex/components/chakra/typography/heading.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Heading(ChakraComponent):
     """A page heading."""
 
-    tag = "Heading"
+    tag: str = "Heading"
 
     # Override the tag. The default tag is `<h2>`.
     as_: Optional[Var[str]] = None

reflex/components/chakra/typography/highlight.py

@@ -9,7 +9,7 @@ from reflex.vars import Var
 class Highlight(ChakraComponent):
     """Highlights a specific part of a string."""
 
-    tag = "Highlight"
+    tag: str = "Highlight"
 
     # A query for the text to highlight. Can be a string or a list of strings.
     query: Optional[Var[List[str]]] = None

reflex/components/chakra/typography/span.py

@@ -8,7 +8,7 @@ from reflex.vars import Var
 class Span(ChakraComponent):
     """Render an inline span of text."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Override the tag. The default tag is `<span>`.
     as_: Var[str] = "span"  # type: ignore

reflex/components/chakra/typography/text.py

@@ -10,7 +10,7 @@ from reflex.vars import Var
 class Text(ChakraComponent):
     """Render a paragraph of text."""
 
-    tag = "Text"
+    tag: str = "Text"
 
     # Override the tag. The default tag is `<p>`.
     as_: Optional[Var[str]] = None

reflex/components/core/client_side_routing.py

@@ -21,7 +21,7 @@ class ClientSideRouting(Component):
     """The client-side routing component."""
 
     library = "/utils/client_side_routing"
-    tag = "useClientSideRouting"
+    tag: str = "useClientSideRouting"
 
     def _get_hooks(self) -> str:
         """Get the hooks to render.
@@ -62,7 +62,7 @@ class Default404Page(Component):
     """The NextJS default 404 page."""
 
     library = "next/error"
-    tag = "Error"
+    tag: str = "Error"
     is_default = True
 
     status_code: Var[int] = 404  # type: ignore

reflex/components/core/debounce.py

@@ -19,7 +19,7 @@ class DebounceInput(Component):
     """
 
     library = "react-debounce-input@3.3.0"
-    tag = "DebounceInput"
+    tag: str = "DebounceInput"
 
     # Minimum input characters before triggering the on_change event
     min_length: Optional[Var[int]] = None

reflex/components/core/upload.py

@@ -158,7 +158,7 @@ class UploadFilesProvider(Component):
     """AppWrap component that provides a dict of selected files by ID via useContext."""
 
     library = f"/{Dirs.CONTEXTS_PATH}"
-    tag = "UploadFilesProvider"
+    tag: str = "UploadFilesProvider"
 
 
 class Upload(MemoizationLeaf):
@@ -166,7 +166,7 @@ class Upload(MemoizationLeaf):
 
     library = "react-dropzone@14.2.3"
 
-    tag = "ReactDropzone"
+    tag: str = "ReactDropzone"
 
     is_default = True
 

reflex/components/datadisplay/code.py

@@ -350,7 +350,7 @@ class CodeBlock(Component):
 
     library = "react-syntax-highlighter@15.5.0"
 
-    tag = "PrismAsyncLight"
+    tag: str = "PrismAsyncLight"
 
     alias = "SyntaxHighlighter"
 

reflex/components/datadisplay/dataeditor.py

@@ -106,7 +106,7 @@ class DataEditorTheme(Base):
 class DataEditor(NoSSRComponent):
     """The DataEditor Component."""
 
-    tag = "DataEditor"
+    tag: str = "DataEditor"
     is_default = True
     library: str = "@glideapps/glide-data-grid@^5.3.0"
     lib_dependencies: List[str] = [

reflex/components/el/elements/forms.py

@@ -11,7 +11,7 @@ from .base import BaseHTML
 class Button(BaseHTML):
     """Display the button element."""
 
-    tag = "button"
+    tag: str = "button"
 
     # Automatically focuses the button when the page loads
     auto_focus: Optional[Var[Union[str, int, bool]]] = None
@@ -50,14 +50,14 @@ class Button(BaseHTML):
 class Datalist(BaseHTML):
     """Display the datalist element."""
 
-    tag = "datalist"
+    tag: str = "datalist"
     # No unique attributes, only common ones are inherited
 
 
 class Fieldset(Element):
     """Display the fieldset element."""
 
-    tag = "fieldset"
+    tag: str = "fieldset"
 
     # Disables all the form control descendants of the fieldset
     disabled: Optional[Var[Union[str, int, bool]]] = None
@@ -72,7 +72,7 @@ class Fieldset(Element):
 class Form(BaseHTML):
     """Display the form element."""
 
-    tag = "form"
+    tag: str = "form"
 
     # MIME types the server accepts for file upload
     accept: Optional[Var[Union[str, int, bool]]] = None
@@ -105,7 +105,7 @@ class Form(BaseHTML):
 class Input(BaseHTML):
     """Display the input element."""
 
-    tag = "input"
+    tag: str = "input"
 
     # Accepted types of files when the input is file type
     accept: Optional[Var[Union[str, int, bool]]] = None
@@ -225,7 +225,7 @@ class Input(BaseHTML):
 class Label(BaseHTML):
     """Display the label element."""
 
-    tag = "label"
+    tag: str = "label"
 
     # ID of a form control with which the label is associated
     html_for: Optional[Var[Union[str, int, bool]]] = None
@@ -237,14 +237,14 @@ class Label(BaseHTML):
 class Legend(BaseHTML):
     """Display the legend element."""
 
-    tag = "legend"
+    tag: str = "legend"
     # No unique attributes, only common ones are inherited
 
 
 class Meter(BaseHTML):
     """Display the meter element."""
 
-    tag = "meter"
+    tag: str = "meter"
 
     # Associates the meter with a form (by id)
     form: Optional[Var[Union[str, int, bool]]] = None
@@ -271,7 +271,7 @@ class Meter(BaseHTML):
 class Optgroup(BaseHTML):
     """Display the optgroup element."""
 
-    tag = "optgroup"
+    tag: str = "optgroup"
 
     # Disables the optgroup
     disabled: Optional[Var[Union[str, int, bool]]] = None
@@ -283,7 +283,7 @@ class Optgroup(BaseHTML):
 class Option(BaseHTML):
     """Display the option element."""
 
-    tag = "option"
+    tag: str = "option"
 
     # Disables the option
     disabled: Optional[Var[Union[str, int, bool]]] = None
@@ -301,7 +301,7 @@ class Option(BaseHTML):
 class Output(BaseHTML):
     """Display the output element."""
 
-    tag = "output"
+    tag: str = "output"
 
     # Associates the output with one or more elements (by their IDs)
     html_for: Optional[Var[Union[str, int, bool]]] = None
@@ -316,7 +316,7 @@ class Output(BaseHTML):
 class Progress(BaseHTML):
     """Display the progress element."""
 
-    tag = "progress"
+    tag: str = "progress"
 
     # Associates the progress element with a form (by id)
     form: Optional[Var[Union[str, int, bool]]] = None
@@ -331,7 +331,7 @@ class Progress(BaseHTML):
 class Select(BaseHTML):
     """Display the select element."""
 
-    tag = "select"
+    tag: str = "select"
 
     # Whether the form control should have autocomplete enabled
     auto_complete: Optional[Var[Union[str, int, bool]]] = None
@@ -372,7 +372,7 @@ class Select(BaseHTML):
 class Textarea(BaseHTML):
     """Display the textarea element."""
 
-    tag = "textarea"
+    tag: str = "textarea"
 
     # Whether the form control should have autocomplete enabled
     auto_complete: Optional[Var[Union[str, int, bool]]] = None

reflex/components/el/elements/inline.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class A(BaseHTML):  # Inherits common attributes from BaseMeta
     """Display the 'a' element."""
 
-    tag = "a"
+    tag: str = "a"
 
     # Specifies that the target (the file specified in the href attribute) will be downloaded when a user clicks on the hyperlink.
     download: Optional[Var[Union[str, int, bool]]] = None
@@ -42,49 +42,49 @@ class A(BaseHTML):  # Inherits common attributes from BaseMeta
 class Abbr(BaseHTML):
     """Display the abbr element."""
 
-    tag = "abbr"
+    tag: str = "abbr"
 
 
 class B(BaseHTML):
     """Display the b element."""
 
-    tag = "b"
+    tag: str = "b"
 
 
 class Bdi(BaseHTML):
     """Display the bdi element."""
 
-    tag = "bdi"
+    tag: str = "bdi"
 
 
 class Bdo(BaseHTML):
     """Display the bdo element."""
 
-    tag = "bdo"
+    tag: str = "bdo"
 
 
 class Br(BaseHTML):
     """Display the br element."""
 
-    tag = "br"
+    tag: str = "br"
 
 
 class Cite(BaseHTML):
     """Display the cite element."""
 
-    tag = "cite"
+    tag: str = "cite"
 
 
 class Code(BaseHTML):
     """Display the code element."""
 
-    tag = "code"
+    tag: str = "code"
 
 
 class Data(BaseHTML):
     """Display the data element."""
 
-    tag = "data"
+    tag: str = "data"
 
     # Specifies the machine-readable translation of the data element.
     value: Optional[Var[Union[str, int, bool]]] = None
@@ -93,37 +93,37 @@ class Data(BaseHTML):
 class Dfn(BaseHTML):
     """Display the dfn element."""
 
-    tag = "dfn"
+    tag: str = "dfn"
 
 
 class Em(BaseHTML):
     """Display the em element."""
 
-    tag = "em"
+    tag: str = "em"
 
 
 class I(BaseHTML):  # noqa: E742
     """Display the i element."""
 
-    tag = "i"
+    tag: str = "i"
 
 
 class Kbd(BaseHTML):
     """Display the kbd element."""
 
-    tag = "kbd"
+    tag: str = "kbd"
 
 
 class Mark(BaseHTML):
     """Display the mark element."""
 
-    tag = "mark"
+    tag: str = "mark"
 
 
 class Q(BaseHTML):
     """Display the q element."""
 
-    tag = "q"
+    tag: str = "q"
 
     # Specifies the source URL of the quote.
     cite: Optional[Var[Union[str, int, bool]]] = None
@@ -132,67 +132,67 @@ class Q(BaseHTML):
 class Rp(BaseHTML):
     """Display the rp element."""
 
-    tag = "rp"
+    tag: str = "rp"
 
 
 class Rt(BaseHTML):
     """Display the rt element."""
 
-    tag = "rt"
+    tag: str = "rt"
 
 
 class Ruby(BaseHTML):
     """Display the ruby element."""
 
-    tag = "ruby"
+    tag: str = "ruby"
 
 
 class S(BaseHTML):
     """Display the s element."""
 
-    tag = "s"
+    tag: str = "s"
 
 
 class Samp(BaseHTML):
     """Display the samp element."""
 
-    tag = "samp"
+    tag: str = "samp"
 
 
 class Small(BaseHTML):
     """Display the small element."""
 
-    tag = "small"
+    tag: str = "small"
 
 
 class Span(BaseHTML):
     """Display the span element."""
 
-    tag = "span"
+    tag: str = "span"
 
 
 class Strong(BaseHTML):
     """Display the strong element."""
 
-    tag = "strong"
+    tag: str = "strong"
 
 
 class Sub(BaseHTML):
     """Display the sub element."""
 
-    tag = "sub"
+    tag: str = "sub"
 
 
 class Sup(BaseHTML):
     """Display the sup element."""
 
-    tag = "sup"
+    tag: str = "sup"
 
 
 class Time(BaseHTML):
     """Display the time element."""
 
-    tag = "time"
+    tag: str = "time"
 
     # Specifies the date and/or time of the element.
     date_time: Optional[Var[Union[str, int, bool]]] = None
@@ -201,10 +201,10 @@ class Time(BaseHTML):
 class U(BaseHTML):
     """Display the u element."""
 
-    tag = "u"
+    tag: str = "u"
 
 
 class Wbr(BaseHTML):
     """Display the wbr element."""
 
-    tag = "wbr"
+    tag: str = "wbr"

reflex/components/el/elements/media.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Area(BaseHTML):
     """Display the area element."""
 
-    tag = "area"
+    tag: str = "area"
 
     # Alternate text for the area, used for accessibility
     alt: Optional[Var[Union[str, int, bool]]] = None
@@ -48,7 +48,7 @@ class Area(BaseHTML):
 class Audio(BaseHTML):
     """Display the audio element."""
 
-    tag = "audio"
+    tag: str = "audio"
 
     # Specifies that the audio will start playing as soon as it is ready
     auto_play: Optional[Var[Union[str, int, bool]]] = None
@@ -78,7 +78,7 @@ class Audio(BaseHTML):
 class Img(BaseHTML):
     """Display the img element."""
 
-    tag = "img"
+    tag: str = "img"
 
     # Image alignment with respect to its surrounding elements
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -120,7 +120,7 @@ class Img(BaseHTML):
 class Map(BaseHTML):
     """Display the map element."""
 
-    tag = "map"
+    tag: str = "map"
 
     # Name of the map, referenced by the 'usemap' attribute in 'img' and 'object' elements
     name: Optional[Var[Union[str, int, bool]]] = None
@@ -129,7 +129,7 @@ class Map(BaseHTML):
 class Track(BaseHTML):
     """Display the track element."""
 
-    tag = "track"
+    tag: str = "track"
 
     # Indicates that the track should be enabled unless the user's preferences indicate otherwise
     default: Optional[Var[Union[str, int, bool]]] = None
@@ -150,7 +150,7 @@ class Track(BaseHTML):
 class Video(BaseHTML):
     """Display the video element."""
 
-    tag = "video"
+    tag: str = "video"
 
     # Specifies that the video will start playing as soon as it is ready
     auto_play: Optional[Var[Union[str, int, bool]]] = None
@@ -186,7 +186,7 @@ class Video(BaseHTML):
 class Embed(BaseHTML):
     """Display the embed element."""
 
-    tag = "embed"
+    tag: str = "embed"
 
     # URL of the embedded content
     src: Optional[Var[Union[str, int, bool]]] = None
@@ -198,7 +198,7 @@ class Embed(BaseHTML):
 class Iframe(BaseHTML):
     """Display the iframe element."""
 
-    tag = "iframe"
+    tag: str = "iframe"
 
     # Alignment of the iframe within the page or surrounding elements
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -231,7 +231,7 @@ class Iframe(BaseHTML):
 class Object(BaseHTML):
     """Display the object element."""
 
-    tag = "object"
+    tag: str = "object"
 
     # URL of the data to be used by the object
     data: Optional[Var[Union[str, int, bool]]] = None
@@ -252,21 +252,21 @@ class Object(BaseHTML):
 class Picture(BaseHTML):
     """Display the picture element."""
 
-    tag = "picture"
+    tag: str = "picture"
     # No unique attributes, only common ones are inherited
 
 
 class Portal(BaseHTML):
     """Display the portal element."""
 
-    tag = "portal"
+    tag: str = "portal"
     # No unique attributes, only common ones are inherited
 
 
 class Source(BaseHTML):
     """Display the source element."""
 
-    tag = "source"
+    tag: str = "source"
 
     # Media query indicating what device the linked resource is optimized for
     media: Optional[Var[Union[str, int, bool]]] = None
@@ -287,13 +287,13 @@ class Source(BaseHTML):
 class Svg(BaseHTML):
     """Display the svg element."""
 
-    tag = "svg"
+    tag: str = "svg"
 
 
 class Path(BaseHTML):
     """Display the path element."""
 
-    tag = "path"
+    tag: str = "path"
 
     # Defines the shape of the path
     d: Optional[Var[Union[str, int, bool]]] = None

reflex/components/el/elements/metadata.py

@@ -10,9 +10,9 @@ from .base import BaseHTML
 class Base(BaseHTML):  # noqa: E742
     """Display the base element."""
 
-    tag = "base"
+    tag: str = "base"
 
-    tag = "base"
+    tag: str = "base"
     href: Optional[Var[Union[str, int, bool]]] = None
     target: Optional[Var[Union[str, int, bool]]] = None
 
@@ -20,13 +20,13 @@ class Base(BaseHTML):  # noqa: E742
 class Head(BaseHTML):  # noqa: E742
     """Display the head element."""
 
-    tag = "head"
+    tag: str = "head"
 
 
 class Link(BaseHTML):  # noqa: E742
     """Display the link element."""
 
-    tag = "link"
+    tag: str = "link"
 
     cross_origin: Optional[Var[Union[str, int, bool]]] = None
     href: Optional[Var[Union[str, int, bool]]] = None
@@ -42,7 +42,7 @@ class Link(BaseHTML):  # noqa: E742
 class Meta(BaseHTML):  # Inherits common attributes from BaseHTML
     """Display the meta element."""
 
-    tag = "meta"
+    tag: str = "meta"
     char_set: Optional[Var[Union[str, int, bool]]] = None
     content: Optional[Var[Union[str, int, bool]]] = None
     http_equiv: Optional[Var[Union[str, int, bool]]] = None
@@ -52,4 +52,4 @@ class Meta(BaseHTML):  # Inherits common attributes from BaseHTML
 class Title(Element):  # noqa: E742
     """Display the title element."""
 
-    tag = "title"
+    tag: str = "title"

reflex/components/el/elements/other.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Details(BaseHTML):
     """Display the details element."""
 
-    tag = "details"
+    tag: str = "details"
 
     # Indicates whether the details will be visible (expanded) to the user
     open: Optional[Var[Union[str, int, bool]]] = None
@@ -18,7 +18,7 @@ class Details(BaseHTML):
 class Dialog(BaseHTML):
     """Display the dialog element."""
 
-    tag = "dialog"
+    tag: str = "dialog"
 
     # Indicates whether the dialog is active and can be interacted with
     open: Optional[Var[Union[str, int, bool]]] = None
@@ -27,35 +27,35 @@ class Dialog(BaseHTML):
 class Summary(BaseHTML):
     """Display the summary element."""
 
-    tag = "summary"
+    tag: str = "summary"
     # No unique attributes, only common ones are inherited; used as a summary or caption for a <details> element
 
 
 class Slot(BaseHTML):
     """Display the slot element."""
 
-    tag = "slot"
+    tag: str = "slot"
     # No unique attributes, only common ones are inherited; used as a placeholder inside a web component
 
 
 class Template(BaseHTML):
     """Display the template element."""
 
-    tag = "template"
+    tag: str = "template"
     # No unique attributes, only common ones are inherited; used for declaring fragments of HTML that can be cloned and inserted in the document
 
 
 class Math(BaseHTML):
     """Display the math element."""
 
-    tag = "math"
+    tag: str = "math"
     # No unique attributes, only common ones are inherited; used for displaying mathematical expressions
 
 
 class Html(BaseHTML):
     """Display the html element."""
 
-    tag = "html"
+    tag: str = "html"
 
     # Specifies the URL of the document's cache manifest (obsolete in HTML5)
     manifest: Optional[Var[Union[str, int, bool]]] = None

reflex/components/el/elements/scripts.py

@@ -9,20 +9,20 @@ from .base import BaseHTML
 class Canvas(BaseHTML):
     """Display the canvas element."""
 
-    tag = "canvas"
+    tag: str = "canvas"
 
 
 class Noscript(BaseHTML):
     """Display the noscript element."""
 
-    tag = "noscript"
+    tag: str = "noscript"
     # No unique attributes, only common ones are inherited
 
 
 class Script(BaseHTML):
     """Display the script element."""
 
-    tag = "script"
+    tag: str = "script"
 
     # Indicates that the script should be executed asynchronously
     async_: Optional[Var[Union[str, int, bool]]] = None

reflex/components/el/elements/sectioning.py

@@ -8,88 +8,88 @@ from .base import BaseHTML
 class Body(BaseHTML):  # noqa: E742
     """Display the body element."""
 
-    tag = "body"
+    tag: str = "body"
 
 
 class Address(BaseHTML):  # noqa: E742
     """Display the address element."""
 
-    tag = "address"
+    tag: str = "address"
 
 
 class Article(BaseHTML):  # noqa: E742
     """Display the article element."""
 
-    tag = "article"
+    tag: str = "article"
 
 
 class Aside(BaseHTML):  # noqa: E742
     """Display the aside element."""
 
-    tag = "aside"
+    tag: str = "aside"
 
 
 class Footer(BaseHTML):  # noqa: E742
     """Display the footer element."""
 
-    tag = "footer"
+    tag: str = "footer"
 
 
 class Header(BaseHTML):  # noqa: E742
     """Display the header element."""
 
-    tag = "header"
+    tag: str = "header"
 
 
 class H1(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h1"
+    tag: str = "h1"
 
 
 class H2(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h2"
+    tag: str = "h2"
 
 
 class H3(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h3"
+    tag: str = "h3"
 
 
 class H4(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h4"
+    tag: str = "h4"
 
 
 class H5(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h5"
+    tag: str = "h5"
 
 
 class H6(BaseHTML):  # noqa: E742
     """Display the h1 element."""
 
-    tag = "h6"
+    tag: str = "h6"
 
 
 class Main(BaseHTML):  # noqa: E742
     """Display the main element."""
 
-    tag = "main"
+    tag: str = "main"
 
 
 class Nav(BaseHTML):  # noqa: E742
     """Display the nav element."""
 
-    tag = "nav"
+    tag: str = "nav"
 
 
 class Section(BaseHTML):  # noqa: E742
     """Display the section element."""
 
-    tag = "section"
+    tag: str = "section"

reflex/components/el/elements/tables.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Caption(BaseHTML):
     """Display the caption element."""
 
-    tag = "caption"
+    tag: str = "caption"
 
     # Alignment of the caption
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -18,7 +18,7 @@ class Caption(BaseHTML):
 class Col(BaseHTML):
     """Display the col element."""
 
-    tag = "col"
+    tag: str = "col"
 
     # Alignment of the content within the column
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -30,7 +30,7 @@ class Col(BaseHTML):
 class Colgroup(BaseHTML):
     """Display the colgroup element."""
 
-    tag = "colgroup"
+    tag: str = "colgroup"
 
     # Alignment of the content within the column group
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -42,7 +42,7 @@ class Colgroup(BaseHTML):
 class Table(BaseHTML):
     """Display the table element."""
 
-    tag = "table"
+    tag: str = "table"
 
     # Alignment of the table
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -54,7 +54,7 @@ class Table(BaseHTML):
 class Tbody(BaseHTML):
     """Display the tbody element."""
 
-    tag = "tbody"
+    tag: str = "tbody"
 
     # Alignment of the content within the table body
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -63,7 +63,7 @@ class Tbody(BaseHTML):
 class Td(BaseHTML):
     """Display the td element."""
 
-    tag = "td"
+    tag: str = "td"
 
     # Alignment of the content within the table cell
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -81,7 +81,7 @@ class Td(BaseHTML):
 class Tfoot(BaseHTML):
     """Display the tfoot element."""
 
-    tag = "tfoot"
+    tag: str = "tfoot"
 
     # Alignment of the content within the table footer
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -90,7 +90,7 @@ class Tfoot(BaseHTML):
 class Th(BaseHTML):
     """Display the th element."""
 
-    tag = "th"
+    tag: str = "th"
 
     # Alignment of the content within the table header cell
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -111,7 +111,7 @@ class Th(BaseHTML):
 class Thead(BaseHTML):
     """Display the thead element."""
 
-    tag = "thead"
+    tag: str = "thead"
 
     # Alignment of the content within the table header
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -120,7 +120,7 @@ class Thead(BaseHTML):
 class Tr(BaseHTML):
     """Display the tr element."""
 
-    tag = "tr"
+    tag: str = "tr"
 
     # Alignment of the content within the table row
     align: Optional[Var[Union[str, int, bool]]] = None

reflex/components/el/elements/typography.py

@@ -9,7 +9,7 @@ from .base import BaseHTML
 class Blockquote(BaseHTML):
     """Display the blockquote element."""
 
-    tag = "blockquote"
+    tag: str = "blockquote"
 
     # Define the title of a work.
     cite: Optional[Var[Union[str, int, bool]]] = None
@@ -18,37 +18,37 @@ class Blockquote(BaseHTML):
 class Dd(BaseHTML):
     """Display the dd element."""
 
-    tag = "dd"
+    tag: str = "dd"
 
 
 class Div(BaseHTML):
     """Display the div element."""
 
-    tag = "div"
+    tag: str = "div"
 
 
 class Dl(BaseHTML):
     """Display the dl element."""
 
-    tag = "dl"
+    tag: str = "dl"
 
 
 class Dt(BaseHTML):
     """Display the dt element."""
 
-    tag = "dt"
+    tag: str = "dt"
 
 
 class Figcaption(BaseHTML):
     """Display the figcaption element."""
 
-    tag = "figcaption"
+    tag: str = "figcaption"
 
 
 class Hr(BaseHTML):
     """Display the hr element."""
 
-    tag = "hr"
+    tag: str = "hr"
 
     # Used to specify the alignment of text content of The Element. this attribute is used in all elements.
     align: Optional[Var[Union[str, int, bool]]] = None
@@ -57,13 +57,13 @@ class Hr(BaseHTML):
 class Li(BaseHTML):
     """Display the li element."""
 
-    tag = "li"
+    tag: str = "li"
 
 
 class Menu(BaseHTML):
     """Display the menu element."""
 
-    tag = "menu"
+    tag: str = "menu"
 
     # Specifies that the menu element is a context menu.
     type: Optional[Var[Union[str, int, bool]]] = None
@@ -72,7 +72,7 @@ class Menu(BaseHTML):
 class Ol(BaseHTML):
     """Display the ol element."""
 
-    tag = "ol"
+    tag: str = "ol"
 
     # Reverses the order of the list.
     reversed: Optional[Var[Union[str, int, bool]]] = None
@@ -87,25 +87,25 @@ class Ol(BaseHTML):
 class P(BaseHTML):
     """Display the p element."""
 
-    tag = "p"
+    tag: str = "p"
 
 
 class Pre(BaseHTML):
     """Display the pre element."""
 
-    tag = "pre"
+    tag: str = "pre"
 
 
 class Ul(BaseHTML):
     """Display the ul element."""
 
-    tag = "ul"
+    tag: str = "ul"
 
 
 class Ins(BaseHTML):
     """Display the ins element."""
 
-    tag = "ins"
+    tag: str = "ins"
 
     # Specifies the URL of the document that explains the reason why the text was inserted/changed.
     cite: Optional[Var[Union[str, int, bool]]] = None
@@ -117,7 +117,7 @@ class Ins(BaseHTML):
 class Del(BaseHTML):
     """Display the del element."""
 
-    tag = "del"
+    tag: str = "del"
 
     # Specifies the URL of the document that explains the reason why the text was deleted.
     cite: Optional[Var[Union[str, int, bool]]] = None

reflex/components/gridjs/datatable.py

@@ -21,7 +21,7 @@ class Gridjs(Component):
 class DataTable(Gridjs):
     """A data table component."""
 
-    tag = "Grid"
+    tag: str = "Grid"
 
     alias = "DataTableGrid"
 

reflex/components/lucide/icon.py

@@ -17,7 +17,7 @@ class LucideIconComponent(Component):
 class Icon(LucideIconComponent):
     """An Icon component."""
 
-    tag = "None"
+    tag: str = "None"
 
     # The size of the icon in pixels.
     size: Optional[Var[int]] = None

reflex/components/markdown/markdown.py

@@ -77,7 +77,7 @@ class Markdown(Component):
 
     library = "react-markdown@8.0.7"
 
-    tag = "ReactMarkdown"
+    tag: str = "ReactMarkdown"
 
     is_default = True
 

reflex/components/next/image.py

@@ -10,7 +10,7 @@ from .base import NextComponent
 class Image(NextComponent):
     """Display an image."""
 
-    tag = "Image"
+    tag: str = "Image"
     library = "next/image"
     is_default = True
 

reflex/components/next/link.py

@@ -11,7 +11,7 @@ class NextLink(Component):
 
     library = "next/link"
 
-    tag = "NextLink"
+    tag: str = "NextLink"
 
     is_default = True
 

reflex/components/next/video.py

@@ -10,7 +10,7 @@ from .base import NextComponent
 class Video(NextComponent):
     """A video component from NextJS."""
 
-    tag = "Video"
+    tag: str = "Video"
     library = "next-video"
     is_default = True
     # the URL

reflex/components/plotly/plotly.py

@@ -21,7 +21,7 @@ class PlotlyLib(NoSSRComponent):
 class Plotly(PlotlyLib):
     """Display a plotly graph."""
 
-    tag = "Plot"
+    tag: str = "Plot"
 
     is_default = True
 

reflex/components/radix/primitives/accordion.py

@@ -305,7 +305,7 @@ class AccordionComponent(RadixPrimitiveComponent):
 class AccordionRoot(AccordionComponent):
     """An accordion component."""
 
-    tag = "Root"
+    tag: str = "Root"
 
     alias = "RadixAccordionRoot"
 
@@ -469,7 +469,7 @@ to {
 class AccordionItem(AccordionComponent):
     """An accordion component."""
 
-    tag = "Item"
+    tag: str = "Item"
 
     alias = "RadixAccordionItem"
 
@@ -538,7 +538,7 @@ class AccordionItem(AccordionComponent):
 class AccordionHeader(AccordionComponent):
     """An accordion component."""
 
-    tag = "Header"
+    tag: str = "Header"
 
     alias = "RadixAccordionHeader"
 
@@ -567,7 +567,7 @@ class AccordionHeader(AccordionComponent):
 class AccordionTrigger(AccordionComponent):
     """An accordion component."""
 
-    tag = "Trigger"
+    tag: str = "Trigger"
 
     alias = "RadixAccordionTrigger"
 
@@ -618,7 +618,7 @@ class AccordionIcon(Icon):
 class AccordionContent(AccordionComponent):
     """An accordion component."""
 
-    tag = "Content"
+    tag: str = "Content"
 
     alias = "RadixAccordionContent"
 

reflex/components/radix/primitives/drawer.py

@@ -27,7 +27,7 @@ LiteralDirectionType = Literal["top", "bottom", "left", "right"]
 class DrawerRoot(DrawerComponent):
     """The Root component of a Drawer, contains all parts of a drawer."""
 
-    tag = "Drawer.Root"
+    tag: str = "Drawer.Root"
 
     alias = "Vaul" + tag
 
@@ -73,7 +73,7 @@ class DrawerRoot(DrawerComponent):
 class DrawerTrigger(DrawerComponent):
     """The button that opens the dialog."""
 
-    tag = "Drawer.Trigger"
+    tag: str = "Drawer.Trigger"
 
     alias = "Vaul" + tag
 
@@ -84,7 +84,7 @@ class DrawerTrigger(DrawerComponent):
 class DrawerPortal(DrawerComponent):
     """Portals your drawer into the body."""
 
-    tag = "Drawer.Portal"
+    tag: str = "Drawer.Portal"
 
     alias = "Vaul" + tag
 
@@ -93,7 +93,7 @@ class DrawerPortal(DrawerComponent):
 class DrawerContent(DrawerComponent):
     """Content that should be rendered in the drawer."""
 
-    tag = "Drawer.Content"
+    tag: str = "Drawer.Content"
 
     alias = "Vaul" + tag
 
@@ -157,7 +157,7 @@ class DrawerContent(DrawerComponent):
 class DrawerOverlay(DrawerComponent):
     """A layer that covers the inert portion of the view when the dialog is open."""
 
-    tag = "Drawer.Overlay"
+    tag: str = "Drawer.Overlay"
 
     alias = "Vaul" + tag
 
@@ -185,7 +185,7 @@ class DrawerOverlay(DrawerComponent):
 class DrawerClose(DrawerComponent):
     """A button that closes the drawer."""
 
-    tag = "Drawer.Close"
+    tag: str = "Drawer.Close"
 
     alias = "Vaul" + tag
 
@@ -193,7 +193,7 @@ class DrawerClose(DrawerComponent):
 class DrawerTitle(DrawerComponent):
     """A title for the drawer."""
 
-    tag = "Drawer.Title"
+    tag: str = "Drawer.Title"
 
     alias = "Vaul" + tag
 
@@ -218,7 +218,7 @@ class DrawerTitle(DrawerComponent):
 class DrawerDescription(DrawerComponent):
     """A description for the drawer."""
 
-    tag = "Drawer.Description"
+    tag: str = "Drawer.Description"
 
     alias = "Vaul" + tag
 

reflex/components/radix/primitives/form.py

@@ -45,7 +45,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
 class FormRoot(FormComponent):
     """The root component of a radix form."""
 
-    tag = "Root"
+    tag: str = "Root"
 
     alias = "RadixFormRoot"
 
@@ -167,7 +167,7 @@ class FormRoot(FormComponent):
 class FormField(FormComponent):
     """A form field component."""
 
-    tag = "Field"
+    tag: str = "Field"
 
     alias = "RadixFormField"
 
@@ -188,7 +188,7 @@ class FormField(FormComponent):
 class FormLabel(FormComponent):
     """A form label component."""
 
-    tag = "Label"
+    tag: str = "Label"
 
     alias = "RadixFormLabel"
 
@@ -204,7 +204,7 @@ class FormLabel(FormComponent):
 class FormControl(FormComponent):
     """A form control component."""
 
-    tag = "Control"
+    tag: str = "Control"
 
     alias = "RadixFormControl"
 
@@ -252,7 +252,7 @@ LiteralMatcher = Literal[
 class FormMessage(FormComponent):
     """A form message component."""
 
-    tag = "Message"
+    tag: str = "Message"
 
     alias = "RadixFormMessage"
 
@@ -277,14 +277,14 @@ class FormMessage(FormComponent):
 class FormValidityState(FormComponent):
     """A form validity state component."""
 
-    tag = "ValidityState"
+    tag: str = "ValidityState"
     alias = "RadixFormValidityState"
 
 
 class FormSubmit(FormComponent):
     """A form submit component."""
 
-    tag = "Submit"
+    tag: str = "Submit"
     alias = "RadixFormSubmit"
 
 

reflex/components/radix/primitives/progress.py

@@ -21,7 +21,7 @@ class ProgressComponent(RadixPrimitiveComponentWithClassName):
 class ProgressRoot(ProgressComponent):
     """The Progress Root component."""
 
-    tag = "Root"
+    tag: str = "Root"
     alias = "RadixProgressRoot"
 
     # Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
@@ -51,7 +51,7 @@ class ProgressRoot(ProgressComponent):
 class ProgressIndicator(ProgressComponent):
     """The Progress bar indicator."""
 
-    tag = "Indicator"
+    tag: str = "Indicator"
 
     alias = "RadixProgressIndicator"
 

reflex/components/radix/primitives/slider.py

@@ -21,7 +21,7 @@ class SliderComponent(RadixPrimitiveComponentWithClassName):
 class SliderRoot(SliderComponent):
     """The Slider component comtaining all slider parts."""
 
-    tag = "Root"
+    tag: str = "Root"
     alias = "RadixSliderRoot"
 
     default_value: Optional[Var[List[int]]] = None
@@ -81,7 +81,7 @@ class SliderRoot(SliderComponent):
 class SliderTrack(SliderComponent):
     """A Slider Track component."""
 
-    tag = "Track"
+    tag: str = "Track"
     alias = "RadixSliderTrack"
 
     def _apply_theme(self, theme: Component):
@@ -103,7 +103,7 @@ class SliderTrack(SliderComponent):
 class SliderRange(SliderComponent):
     """A SliderRange component."""
 
-    tag = "Range"
+    tag: str = "Range"
     alias = "RadixSliderRange"
 
     def _apply_theme(self, theme: Component):
@@ -123,7 +123,7 @@ class SliderRange(SliderComponent):
 class SliderThumb(SliderComponent):
     """A SliderThumb component."""
 
-    tag = "Thumb"
+    tag: str = "Thumb"
     alias = "RadixSliderThumb"
 
     def _apply_theme(self, theme: Component):

reflex/components/radix/themes/base.py

@@ -125,7 +125,7 @@ class Theme(RadixThemesComponent):
     child elements as an override of the main theme.
     """
 
-    tag = "Theme"
+    tag: str = "Theme"
 
     # Whether to apply the themes background color to the theme node. Defaults to True.
     has_background: Optional[Var[bool]] = None
@@ -207,7 +207,7 @@ class ThemePanel(RadixThemesComponent):
     Include as a child component of Theme to use in your app.
     """
 
-    tag = "ThemePanel"
+    tag: str = "ThemePanel"
 
     # Whether the panel is open. Defaults to False.
     default_open: Optional[Var[bool]] = None
@@ -217,7 +217,7 @@ class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""
 
     library = "/components/reflex/radix_themes_color_mode_provider.js"
-    tag = "RadixThemesColorModeProvider"
+    tag: str = "RadixThemesColorModeProvider"
     is_default = True
 
 

reflex/components/radix/themes/components/alert_dialog.py

@@ -14,7 +14,7 @@ LiteralContentSize = Literal["1", "2", "3", "4"]
 class AlertDialogRoot(RadixThemesComponent):
     """Contains all the parts of the dialog."""
 
-    tag = "AlertDialog.Root"
+    tag: str = "AlertDialog.Root"
 
     # The controlled open state of the dialog.
     open: Optional[Var[bool]] = None
@@ -34,13 +34,13 @@ class AlertDialogRoot(RadixThemesComponent):
 class AlertDialogTrigger(RadixThemesComponent):
     """Wraps the control that will open the dialog."""
 
-    tag = "AlertDialog.Trigger"
+    tag: str = "AlertDialog.Trigger"
 
 
 class AlertDialogContent(el.Div, RadixThemesComponent):
     """Contains the content of the dialog. This component is based on the div element."""
 
-    tag = "AlertDialog.Content"
+    tag: str = "AlertDialog.Content"
 
     # The size of the content.
     size: Optional[Var[LiteralContentSize]] = None
@@ -68,7 +68,7 @@ class AlertDialogTitle(RadixThemesComponent):
     leading trim on top.
     """
 
-    tag = "AlertDialog.Title"
+    tag: str = "AlertDialog.Title"
 
 
 class AlertDialogDescription(RadixThemesComponent):
@@ -76,7 +76,7 @@ class AlertDialogDescription(RadixThemesComponent):
     This part is based on the Text component with a pre-defined font size.
     """
 
-    tag = "AlertDialog.Description"
+    tag: str = "AlertDialog.Description"
 
 
 class AlertDialogAction(RadixThemesComponent):
@@ -84,7 +84,7 @@ class AlertDialogAction(RadixThemesComponent):
     visually from the Cancel control.
     """
 
-    tag = "AlertDialog.Action"
+    tag: str = "AlertDialog.Action"
 
 
 class AlertDialogCancel(RadixThemesComponent):
@@ -92,7 +92,7 @@ class AlertDialogCancel(RadixThemesComponent):
     visually from the Action control.
     """
 
-    tag = "AlertDialog.Cancel"
+    tag: str = "AlertDialog.Cancel"
 
 
 class AlertDialog(ComponentNamespace):

reflex/components/radix/themes/components/aspect_ratio.py

@@ -9,7 +9,7 @@ from ..base import RadixThemesComponent
 class AspectRatio(RadixThemesComponent):
     """Displays content with a desired ratio."""
 
-    tag = "AspectRatio"
+    tag: str = "AspectRatio"
 
     # The ratio of the width to the height of the element
     ratio: Optional[Var[Union[float, int]]] = None

reflex/components/radix/themes/components/avatar.py

@@ -15,7 +15,7 @@ LiteralSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
 class Avatar(RadixThemesComponent):
     """An image element with a fallback for representing the user."""
 
-    tag = "Avatar"
+    tag: str = "Avatar"
 
     # The variant of the avatar
     variant: Optional[Var[Literal["solid", "soft"]]] = None

reflex/components/radix/themes/components/badge.py

@@ -14,7 +14,7 @@ from ..base import (
 class Badge(el.Span, RadixThemesComponent):
     """A stylized badge element."""
 
-    tag = "Badge"
+    tag: str = "Badge"
 
     # The variant of the badge
     variant: Optional[Var[Literal["solid", "soft", "surface", "outline"]]] = None