Move core components to radix namespace (#2506)

.coveragerc

@@ -5,7 +5,7 @@ branch = true
 [report]
 show_missing = true
 # TODO bump back to 79
-fail_under = 70
+fail_under = 69
 precision = 2
 
 # Regexes for lines to exclude from consideration
@@ -28,4 +28,4 @@ exclude_also =
 ignore_errors = True
 
 [html]
-directory = coverage_html_report
+directory = coverage_html_report

integration/test_background_task.py

@@ -59,11 +59,11 @@ def BackgroundTask():
 
     def index() -> rx.Component:
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=State.router.session.client_token, is_read_only=True
             ),
             rx.heading(State.counter, id="counter"),
-            rx.input(
+            rx.chakra.input(
                 id="iterations",
                 placeholder="Iterations",
                 value=State.iterations.to_string(),  # type: ignore

integration/test_call_script.py

@@ -142,17 +142,17 @@ def CallScript():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.inline_counter.to(str),  # type: ignore
                 id="inline_counter",
                 is_read_only=True,
             ),
-            rx.input(
+            rx.chakra.input(
                 value=CallScriptState.external_counter.to(str),  # type: ignore
                 id="external_counter",
                 is_read_only=True,

integration/test_client_storage.py

@@ -55,18 +55,18 @@ def ClientSide():
 
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=ClientSideState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(
+            rx.chakra.input(
                 placeholder="state var",
                 value=ClientSideState.state_var,
                 on_change=ClientSideState.set_state_var,  # type: ignore
                 id="state_var",
             ),
-            rx.input(
+            rx.chakra.input(
                 placeholder="input value",
                 value=ClientSideState.input_value,
                 on_change=ClientSideState.set_input_value,  # type: ignore

integration/test_dynamic_routes.py

@@ -35,13 +35,15 @@ def DynamicRoute():
 
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=DynamicState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.input(value=DynamicState.page_id, is_read_only=True, id="page_id"),
-            rx.input(
+            rx.chakra.input(
+                value=DynamicState.page_id, is_read_only=True, id="page_id"
+            ),
+            rx.chakra.input(
                 value=DynamicState.router.page.raw_path,
                 is_read_only=True,
                 id="raw_path",
@@ -52,8 +54,8 @@ def DynamicRoute():
                 "next", href="/page/" + DynamicState.next_page, id="link_page_next"  # type: ignore
             ),
             rx.link("missing", href="/missing", id="link_missing"),
-            rx.list(
-                rx.foreach(DynamicState.order, lambda i: rx.list_item(rx.text(i))),  # type: ignore
+            rx.chakra.list(
+                rx.foreach(DynamicState.order, lambda i: rx.chakra.list_item(rx.text(i))),  # type: ignore
             ),
         )
 

integration/test_event_actions.py

@@ -42,7 +42,7 @@ def TestEventAction():
 
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=EventActionState.router.session.client_token,
                 is_read_only=True,
                 id="token",
@@ -121,10 +121,10 @@ def TestEventAction():
                     "custom-prevent-default"
                 ).prevent_default,
             ),
-            rx.list(
+            rx.chakra.list(
                 rx.foreach(
                     EventActionState.order,  # type: ignore
-                    rx.list_item,
+                    rx.chakra.list_item,
                 ),
             ),
             on_click=EventActionState.on_click("outer"),  # type: ignore

integration/test_event_chain.py

@@ -124,7 +124,7 @@ def EventChain():
 
     app = rx.App(state=rx.State)
 
-    token_input = rx.input(
+    token_input = rx.chakra.input(
         value=State.router.session.client_token, is_read_only=True, id="token"
     )
 
@@ -132,7 +132,9 @@ def EventChain():
     def index():
         return rx.fragment(
             token_input,
-            rx.input(value=State.interim_value, is_read_only=True, id="interim_value"),
+            rx.chakra.input(
+                value=State.interim_value, is_read_only=True, id="interim_value"
+            ),
             rx.button(
                 "Return Event",
                 id="return_event",

integration/test_form_submit.py

@@ -27,28 +27,28 @@ def FormSubmit():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.form(
+            rx.form.root(
                 rx.vstack(
-                    rx.input(id="name_input"),
-                    rx.hstack(rx.pin_input(length=4, id="pin_input")),
-                    rx.number_input(id="number_input"),
+                    rx.chakra.input(id="name_input"),
+                    rx.hstack(rx.chakra.pin_input(length=4, id="pin_input")),
+                    rx.chakra.number_input(id="number_input"),
                     rx.checkbox(id="bool_input"),
                     rx.switch(id="bool_input2"),
                     rx.checkbox(id="bool_input3"),
                     rx.switch(id="bool_input4"),
-                    rx.slider(id="slider_input"),
-                    rx.range_slider(id="range_input"),
+                    rx.slider(id="slider_input", default_value=[50], width="100%"),
+                    rx.chakra.range_slider(id="range_input"),
                     rx.radio_group(["option1", "option2"], id="radio_input"),
                     rx.radio_group(FormState.var_options, id="radio_input_var"),
-                    rx.select(["option1", "option2"], id="select_input"),
-                    rx.select(FormState.var_options, id="select_input_var"),
+                    rx.chakra.select(["option1", "option2"], id="select_input"),
+                    rx.chakra.select(FormState.var_options, id="select_input_var"),
                     rx.text_area(id="text_area_input"),
-                    rx.input(
+                    rx.chakra.input(
                         id="debounce_input",
                         debounce_timeout=0,
                         on_change=rx.console_log,
@@ -80,37 +80,41 @@ def FormSubmitName():
     @app.add_page
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.form(
+            rx.form.root(
                 rx.vstack(
-                    rx.input(name="name_input"),
-                    rx.hstack(rx.pin_input(length=4, name="pin_input")),
-                    rx.number_input(name="number_input"),
+                    rx.chakra.input(name="name_input"),
+                    rx.hstack(rx.chakra.pin_input(length=4, name="pin_input")),
+                    rx.chakra.number_input(name="number_input"),
                     rx.checkbox(name="bool_input"),
                     rx.switch(name="bool_input2"),
                     rx.checkbox(name="bool_input3"),
                     rx.switch(name="bool_input4"),
-                    rx.slider(name="slider_input"),
-                    rx.range_slider(name="range_input"),
+                    rx.slider(name="slider_input", default_value=[50], width="100%"),
+                    rx.chakra.range_slider(name="range_input"),
                     rx.radio_group(FormState.options, name="radio_input"),
-                    rx.select(FormState.options, name="select_input"),
+                    rx.select(
+                        FormState.options,
+                        name="select_input",
+                        default_value=FormState.options[0],
+                    ),
                     rx.text_area(name="text_area_input"),
-                    rx.input_group(
-                        rx.input_left_element(rx.icon(tag="chevron_right")),
-                        rx.input(
+                    rx.chakra.input_group(
+                        rx.chakra.input_left_element(rx.icon(tag="chevron_right")),
+                        rx.chakra.input(
                             name="debounce_input",
                             debounce_timeout=0,
                             on_change=rx.console_log,
                         ),
-                        rx.input_right_element(rx.icon(tag="chevron_left")),
+                        rx.chakra.input_right_element(rx.icon(tag="chevron_left")),
                     ),
-                    rx.button_group(
+                    rx.chakra.button_group(
                         rx.button("Submit", type_="submit"),
-                        rx.icon_button(FormState.val, icon=rx.icon(tag="add")),
+                        rx.icon_button(FormState.val, icon=rx.icon(tag="plus")),
                         variant="outline",
                         is_attached=True,
                     ),
@@ -194,16 +198,16 @@ async def test_submit(driver, form_submit: AppHarness):
     for _ in range(3):
         buttons[1].click()
 
-    checkbox_input = driver.find_element(By.CLASS_NAME, "chakra-checkbox__control")
+    checkbox_input = driver.find_element(By.XPATH, "//button[@role='checkbox']")
     checkbox_input.click()
 
-    switch_input = driver.find_element(By.CLASS_NAME, "chakra-switch__track")
+    switch_input = driver.find_element(By.XPATH, "//button[@role='switch']")
     switch_input.click()
 
-    radio_buttons = driver.find_elements(By.CLASS_NAME, "chakra-radio__control")
+    radio_buttons = driver.find_elements(By.XPATH, "//button[@role='radio']")
     radio_buttons[1].click()
 
-    textarea_input = driver.find_element(By.CLASS_NAME, "chakra-textarea")
+    textarea_input = driver.find_element(By.TAG_NAME, "textarea")
     textarea_input.send_keys("Some", Keys.ENTER, "Text")
 
     debounce_input = driver.find_element(by, "debounce_input")
@@ -213,7 +217,7 @@ async def test_submit(driver, form_submit: AppHarness):
 
     prev_url = driver.current_url
 
-    submit_input = driver.find_element(By.CLASS_NAME, "chakra-button")
+    submit_input = driver.find_element(By.CLASS_NAME, "rt-Button")
     submit_input.click()
 
     async def get_form_data():

integration/test_input.py

@@ -21,16 +21,16 @@ def FullyControlledInput():
     @app.add_page
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 value=State.router.session.client_token, is_read_only=True, id="token"
             ),
-            rx.input(
+            rx.chakra.input(
                 id="debounce_input_input",
                 on_change=State.set_text,  # type: ignore
                 value=State.text,
             ),
-            rx.input(value=State.text, id="value_input", is_read_only=True),
-            rx.input(on_change=State.set_text, id="on_change_input"),  # type: ignore
+            rx.chakra.input(value=State.text, id="value_input", is_read_only=True),
+            rx.chakra.input(on_change=State.set_text, id="on_change_input"),  # type: ignore
             rx.el.input(
                 value=State.text,
                 id="plain_value_input",

integration/test_login_flow.py

@@ -28,7 +28,7 @@ def LoginSample():
             yield rx.redirect("/")
 
     def index():
-        return rx.Cond.create(
+        return rx.cond(
             State.is_hydrated & State.auth_token,  # type: ignore
             rx.vstack(
                 rx.heading(State.auth_token, id="auth-token"),

integration/test_server_side_event.py

@@ -38,12 +38,12 @@ def ServerSideEvent():
     @app.add_page
     def index():
         return rx.fragment(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=SSState.router.session.client_token, is_read_only=True
             ),
-            rx.input(default_value="a", id="a"),
-            rx.input(default_value="b", id="b"),
-            rx.input(default_value="c", id="c"),
+            rx.chakra.input(default_value="a", id="a"),
+            rx.chakra.input(default_value="b", id="b"),
+            rx.chakra.input(default_value="c", id="c"),
             rx.button(
                 "Clear Immediate",
                 id="clear_immediate",

integration/test_state_inheritance.py

@@ -62,7 +62,7 @@ def StateInheritance():
 
     def index() -> rx.Component:
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 id="token", value=Base1.router.session.client_token, is_read_only=True
             ),
             rx.heading(Base1.computed_mixin, id="base1-computed_mixin"),

integration/test_table.py

@@ -31,13 +31,13 @@ def Table():
     @app.add_page
     def index():
         return rx.center(
-            rx.input(
+            rx.chakra.input(
                 id="token",
                 value=TableState.router.session.client_token,
                 is_read_only=True,
             ),
-            rx.table_container(
-                rx.table(
+            rx.chakra.table_container(
+                rx.chakra.table(
                     headers=TableState.headers,
                     rows=TableState.rows,
                     footers=TableState.footers,
@@ -52,36 +52,36 @@ def Table():
     @app.add_page
     def another():
         return rx.center(
-            rx.table_container(
-                rx.table(  # type: ignore
-                    rx.thead(  # type: ignore
-                        rx.tr(  # type: ignore
-                            rx.th("Name"),
-                            rx.th("Age"),
-                            rx.th("Location"),
+            rx.chakra.table_container(
+                rx.chakra.table(  # type: ignore
+                    rx.chakra.thead(  # type: ignore
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.th("Name"),
+                            rx.chakra.th("Age"),
+                            rx.chakra.th("Location"),
                         )
                     ),
-                    rx.tbody(  # type: ignore
-                        rx.tr(  # type: ignore
-                            rx.td("John"),
-                            rx.td(30),
-                            rx.td("New York"),
+                    rx.chakra.tbody(  # type: ignore
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("John"),
+                            rx.chakra.td(30),
+                            rx.chakra.td("New York"),
                         ),
-                        rx.tr(  # type: ignore
-                            rx.td("Jane"),
-                            rx.td(31),
-                            rx.td("San Francisco"),
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("Jane"),
+                            rx.chakra.td(31),
+                            rx.chakra.td("San Francisco"),
                         ),
-                        rx.tr(  # type: ignore
-                            rx.td("Joe"),
-                            rx.td(32),
-                            rx.td("Los Angeles"),
+                        rx.chakra.tr(  # type: ignore
+                            rx.chakra.td("Joe"),
+                            rx.chakra.td(32),
+                            rx.chakra.td("Los Angeles"),
                         ),
                     ),
-                    rx.tfoot(  # type: ignore
-                        rx.tr(rx.td("footer1"), rx.td("footer2"), rx.td("footer3"))  # type: ignore
+                    rx.chakra.tfoot(  # type: ignore
+                        rx.chakra.tr(rx.chakra.td("footer1"), rx.chakra.td("footer2"), rx.chakra.td("footer3"))  # type: ignore
                     ),
-                    rx.table_caption("random caption"),
+                    rx.chakra.table_caption("random caption"),
                     variant="striped",
                     color_scheme="teal",
                 )

integration/test_tailwind.py

@@ -30,7 +30,7 @@ def TailwindApp(
 
     def index():
         return rx.el.div(
-            rx.text(paragraph_text, class_name=paragraph_class_name),
+            rx.chakra.text(paragraph_text, class_name=paragraph_class_name),
             rx.el.p(paragraph_text, class_name=paragraph_class_name),
             rdxt.text(paragraph_text, as_="p", class_name=paragraph_class_name),
             id="p-content",

integration/test_upload.py

@@ -41,7 +41,7 @@ def UploadFile():
 
     def index():
         return rx.vstack(
-            rx.input(
+            rx.chakra.input(
                 value=UploadState.router.session.client_token,
                 is_read_only=True,
                 id="token",
@@ -61,7 +61,7 @@ def UploadFile():
             rx.box(
                 rx.foreach(
                     rx.selected_files,
-                    lambda f: rx.text(f),
+                    lambda f: rx.text(f, as_="p"),
                 ),
                 id="selected_files",
             ),
@@ -91,7 +91,7 @@ def UploadFile():
             rx.box(
                 rx.foreach(
                     rx.selected_files("secondary"),
-                    lambda f: rx.text(f),
+                    lambda f: rx.text(f, as_="p"),
                 ),
                 id="selected_files_secondary",
             ),

integration/test_var_operations.py

@@ -532,7 +532,7 @@ def VarOperations():
                 VarOperationState.html_str,
                 id="html_str",
             ),
-            rx.highlight(
+            rx.chakra.highlight(
                 "second",
                 query=[VarOperationState.str_var2],
             ),
@@ -542,14 +542,15 @@ def VarOperations():
             rx.text(rx.Var.range(0, 3).join(","), id="list_join_range4"),
             rx.box(
                 rx.foreach(
-                    rx.Var.range(0, 2), lambda x: rx.text(VarOperationState.list1[x])
+                    rx.Var.range(0, 2),
+                    lambda x: rx.text(VarOperationState.list1[x], as_="p"),
                 ),
                 id="foreach_list_arg",
             ),
             rx.box(
                 rx.foreach(
                     rx.Var.range(0, 2),
-                    lambda x, ix: rx.text(VarOperationState.list1[ix]),
+                    lambda x, ix: rx.text(VarOperationState.list1[ix], as_="p"),
                 ),
                 id="foreach_list_ix",
             ),
@@ -558,7 +559,7 @@ def VarOperations():
                     rx.Var.create_safe(list(range(0, 3))).to(list[int]),
                     lambda x: rx.foreach(
                         rx.Var.range(x),
-                        lambda y: rx.text(VarOperationState.list1[y]),
+                        lambda y: rx.text(VarOperationState.list1[y], as_="p"),
                     ),
                 ),
                 id="foreach_list_nested",

reflex/.templates/web/utils/state.js

@@ -594,7 +594,12 @@ export const getRefValue = (ref) => {
     return;
   }
   if (ref.current.type == "checkbox") {
-    return ref.current.checked;
+    return ref.current.checked;  // chakra
+  } else if (ref.current.className.includes("rt-CheckboxButton") || ref.current.className.includes("rt-SwitchButton")) {
+    return ref.current.ariaChecked == "true";  // radix
+  } else if (ref.current.className.includes("rt-SliderRoot")) {
+    // find the actual slider
+    return ref.current.querySelector(".rt-SliderThumb").ariaValueNow;
   } else {
     //querySelector(":checked") is needed to get value from radio_group
     return ref.current.value || (ref.current.querySelector(':checked') && ref.current.querySelector(':checked').value);

reflex/__init__.py

@@ -15,235 +15,93 @@ from reflex.utils import console
 from reflex.utils.format import to_snake_case
 
 _ALL_COMPONENTS = [
-    "Accordion",
-    "AccordionButton",
-    "AccordionIcon",
-    "AccordionItem",
-    "AccordionPanel",
-    "Alert",
-    "AlertDescription",
-    "AlertDialog",
-    "AlertDialogBody",
-    "AlertDialogContent",
-    "AlertDialogFooter",
-    "AlertDialogHeader",
-    "AlertDialogOverlay",
-    "AlertIcon",
-    "AlertTitle",
-    "AspectRatio",
-    "Audio",
-    "Avatar",
-    "AvatarBadge",
-    "AvatarGroup",
-    "Badge",
-    "Box",
-    "Breadcrumb",
-    "BreadcrumbItem",
-    "BreadcrumbLink",
-    "BreadcrumbSeparator",
-    "Button",
-    "ButtonGroup",
-    "Card",
-    "CardBody",
-    "CardFooter",
-    "CardHeader",
-    "Center",
-    "Checkbox",
-    "CheckboxGroup",
-    "CircularProgress",
-    "CircularProgressLabel",
-    "Circle",
-    "Code",
-    "CodeBlock",
-    "Collapse",
-    "ColorModeButton",
-    "ColorModeIcon",
-    "ColorModeSwitch",
-    "Component",
-    "Cond",
-    "ConnectionBanner",
-    "ConnectionModal",
-    "Container",
-    "DataTable",
-    "DataEditor",
-    "DataEditorTheme",
-    "DatePicker",
-    "DateTimePicker",
-    "DebounceInput",
-    "Divider",
-    "Drawer",
-    "DrawerBody",
-    "DrawerCloseButton",
-    "DrawerContent",
-    "DrawerFooter",
-    "DrawerHeader",
-    "DrawerOverlay",
-    "Editable",
-    "EditableInput",
-    "EditablePreview",
-    "EditableTextarea",
-    "Editor",
-    "Email",
-    "Fade",
-    "Flex",
-    "Foreach",
-    "Form",
-    "FormControl",
-    "FormErrorMessage",
-    "FormHelperText",
-    "FormLabel",
-    "Fragment",
-    "Grid",
-    "GridItem",
-    "Heading",
-    "Highlight",
-    "Hstack",
-    "Html",
-    "Icon",
-    "IconButton",
-    "Image",
-    "Input",
-    "InputGroup",
-    "InputLeftAddon",
-    "InputLeftElement",
-    "InputRightAddon",
-    "InputRightElement",
-    "Kbd",
-    "Link",
-    "LinkBox",
-    "LinkOverlay",
-    "List",
-    "ListItem",
-    "Markdown",
-    "Match",
-    "Menu",
-    "MenuButton",
-    "MenuDivider",
-    "MenuGroup",
-    "MenuItem",
-    "MenuItemOption",
-    "MenuList",
-    "MenuOptionGroup",
-    "Modal",
-    "ModalBody",
-    "ModalCloseButton",
-    "ModalContent",
-    "ModalFooter",
-    "ModalHeader",
-    "ModalOverlay",
-    "Moment",
-    "MultiSelect",
-    "MultiSelectOption",
-    "NextLink",
-    "NumberDecrementStepper",
-    "NumberIncrementStepper",
-    "NumberInput",
-    "NumberInputField",
-    "NumberInputStepper",
-    "Option",
-    "OrderedList",
-    "Password",
-    "PinInput",
-    "PinInputField",
-    "Plotly",
-    "Popover",
-    "PopoverAnchor",
-    "PopoverArrow",
-    "PopoverBody",
-    "PopoverCloseButton",
-    "PopoverContent",
-    "PopoverFooter",
-    "PopoverHeader",
-    "PopoverTrigger",
-    "Progress",
-    "Radio",
-    "RadioGroup",
-    "RangeSlider",
-    "RangeSliderFilledTrack",
-    "RangeSliderThumb",
-    "RangeSliderTrack",
-    "ResponsiveGrid",
-    "ScaleFade",
-    "Script",
-    "Select",
-    "Skeleton",
-    "SkeletonCircle",
-    "SkeletonText",
-    "Slide",
-    "SlideFade",
-    "Slider",
-    "SliderFilledTrack",
-    "SliderMark",
-    "SliderThumb",
-    "SliderTrack",
-    "Spacer",
-    "Span",
-    "Spinner",
-    "Square",
-    "Stack",
-    "Stat",
-    "StatArrow",
-    "StatGroup",
-    "StatHelpText",
-    "StatLabel",
-    "StatNumber",
-    "Step",
-    "StepDescription",
-    "StepIcon",
-    "StepIndicator",
-    "StepNumber",
-    "StepSeparator",
-    "StepStatus",
-    "StepTitle",
-    "Stepper",
-    "Switch",
-    "Tab",
-    "TabList",
-    "TabPanel",
-    "TabPanels",
-    "Table",
-    "TableCaption",
-    "TableContainer",
-    "Tabs",
-    "Tag",
-    "TagCloseButton",
-    "TagLabel",
-    "TagLeftIcon",
-    "TagRightIcon",
-    "Tbody",
-    "Td",
-    "Text",
-    "TextArea",
-    "Tfoot",
-    "Th",
-    "Thead",
-    "TimePicker",
-    "Tooltip",
-    "Tr",
-    "UnorderedList",
-    "Upload",
-    "Video",
-    "VisuallyHidden",
-    "Vstack",
-    "Wrap",
-    "WrapItem",
-]
-
-_ALL_COMPONENTS += [to_snake_case(component) for component in _ALL_COMPONENTS]
-_ALL_COMPONENTS += [
-    "cancel_upload",
-    "components",
-    "color_mode_cond",
+    # Core
+    "cond",
+    "foreach",
+    "html",
+    "match",
+    # "color_mode_cond",
+    "connection_banner",
+    "connection_modal",
+    "debounce_input",
+    # Base
+    "fragment",
+    "image",
+    "script",
+    # Responsive
     "desktop_only",
-    "mobile_only",
-    "tablet_only",
     "mobile_and_tablet",
+    "mobile_only",
     "tablet_and_desktop",
-    "selected_files",
+    "tablet_only",
+    # Upload
+    "cancel_upload",
     "clear_selected_files",
+    "selected_files",
+    "upload",
+    # Radix
+    "accordion",
+    "alert_dialog",
+    "aspect_ratio",
+    "avatar",
+    "badge",
+    "blockquote",
+    "box",
+    "button",
+    "callout",
+    "card",
+    "center",
+    "checkbox",
+    "code",
+    "container",
+    "context_menu",
+    "dialog",
+    "drawer",
+    "dropdown_menu",
+    # "bold" (em)
+    "flex",
+    "form",
+    "grid",
+    "heading",
+    "hover_card",
+    "hstack",
+    # "icon" (lucide)
+    "icon_button",
+    "inset",
+    "kbd",
+    "link",
+    "popover",
+    "progress",
+    # "quote",
+    "radio_group",
+    "scroll_area",
+    "section",
+    "select",
+    "separator",
+    # "separator" (divider?),
+    "slider",
+    "spacer",
+    # "strong" (bold?)
+    "switch",
+    "table",
+    "tabs",
+    "text",
+    "text_area",
+    # "text_field" (input)
+    "theme",
+    "theme_panel",
+    "tooltip",
+    "vstack",
+    # Other
+    "data_editor",
+    "data_editor_theme",
+    "plotly",
+    "audio",
+    "video",
+    "editor",
     "EditorButtonList",
     "EditorOptions",
-    "NoSSRComponent",
+    "icon",
 ]
 
 _MAPPING = {
@@ -252,10 +110,10 @@ _MAPPING = {
     "reflex.base": ["base", "Base"],
     "reflex.compiler": ["compiler"],
     "reflex.compiler.utils": ["get_asset_path"],
-    "reflex.components": _ALL_COMPONENTS + ["chakra", "next"],
-    "reflex.components.component": ["memo"],
+    "reflex.components": _ALL_COMPONENTS,
+    "reflex.components.component": ["Component", "NoSSRComponent", "memo"],
+    "reflex.components.chakra": ["chakra"],
     "reflex.components.el": ["el"],
-    "reflex.components.lucide": ["lucide"],
     "reflex.components.radix": ["radix"],
     "reflex.components.recharts": ["recharts"],
     "reflex.components.moment.moment": ["MomentDelta"],

reflex/__init__.pyi

@@ -7,448 +7,85 @@ from reflex import base as base
 from reflex.base import Base as Base
 from reflex import compiler as compiler
 from reflex.compiler.utils import get_asset_path as get_asset_path
-from reflex.components import Accordion as Accordion
-from reflex.components import AccordionButton as AccordionButton
-from reflex.components import AccordionIcon as AccordionIcon
-from reflex.components import AccordionItem as AccordionItem
-from reflex.components import AccordionPanel as AccordionPanel
-from reflex.components import Alert as Alert
-from reflex.components import AlertDescription as AlertDescription
-from reflex.components import AlertDialog as AlertDialog
-from reflex.components import AlertDialogBody as AlertDialogBody
-from reflex.components import AlertDialogContent as AlertDialogContent
-from reflex.components import AlertDialogFooter as AlertDialogFooter
-from reflex.components import AlertDialogHeader as AlertDialogHeader
-from reflex.components import AlertDialogOverlay as AlertDialogOverlay
-from reflex.components import AlertIcon as AlertIcon
-from reflex.components import AlertTitle as AlertTitle
-from reflex.components import AspectRatio as AspectRatio
-from reflex.components import Audio as Audio
-from reflex.components import Avatar as Avatar
-from reflex.components import AvatarBadge as AvatarBadge
-from reflex.components import AvatarGroup as AvatarGroup
-from reflex.components import Badge as Badge
-from reflex.components import Box as Box
-from reflex.components import Breadcrumb as Breadcrumb
-from reflex.components import BreadcrumbItem as BreadcrumbItem
-from reflex.components import BreadcrumbLink as BreadcrumbLink
-from reflex.components import BreadcrumbSeparator as BreadcrumbSeparator
-from reflex.components import Button as Button
-from reflex.components import ButtonGroup as ButtonGroup
-from reflex.components import Card as Card
-from reflex.components import CardBody as CardBody
-from reflex.components import CardFooter as CardFooter
-from reflex.components import CardHeader as CardHeader
-from reflex.components import Center as Center
-from reflex.components import Checkbox as Checkbox
-from reflex.components import CheckboxGroup as CheckboxGroup
-from reflex.components import CircularProgress as CircularProgress
-from reflex.components import CircularProgressLabel as CircularProgressLabel
-from reflex.components import Circle as Circle
-from reflex.components import Code as Code
-from reflex.components import CodeBlock as CodeBlock
-from reflex.components import Collapse as Collapse
-from reflex.components import ColorModeButton as ColorModeButton
-from reflex.components import ColorModeIcon as ColorModeIcon
-from reflex.components import ColorModeSwitch as ColorModeSwitch
-from reflex.components import Component as Component
-from reflex.components import Cond as Cond
-from reflex.components import ConnectionBanner as ConnectionBanner
-from reflex.components import ConnectionModal as ConnectionModal
-from reflex.components import Container as Container
-from reflex.components import DataTable as DataTable
-from reflex.components import DataEditor as DataEditor
-from reflex.components import DataEditorTheme as DataEditorTheme
-from reflex.components import DatePicker as DatePicker
-from reflex.components import DateTimePicker as DateTimePicker
-from reflex.components import DebounceInput as DebounceInput
-from reflex.components import Divider as Divider
-from reflex.components import Drawer as Drawer
-from reflex.components import DrawerBody as DrawerBody
-from reflex.components import DrawerCloseButton as DrawerCloseButton
-from reflex.components import DrawerContent as DrawerContent
-from reflex.components import DrawerFooter as DrawerFooter
-from reflex.components import DrawerHeader as DrawerHeader
-from reflex.components import DrawerOverlay as DrawerOverlay
-from reflex.components import Editable as Editable
-from reflex.components import EditableInput as EditableInput
-from reflex.components import EditablePreview as EditablePreview
-from reflex.components import EditableTextarea as EditableTextarea
-from reflex.components import Editor as Editor
-from reflex.components import Email as Email
-from reflex.components import Fade as Fade
-from reflex.components import Flex as Flex
-from reflex.components import Foreach as Foreach
-from reflex.components import Form as Form
-from reflex.components import FormControl as FormControl
-from reflex.components import FormErrorMessage as FormErrorMessage
-from reflex.components import FormHelperText as FormHelperText
-from reflex.components import FormLabel as FormLabel
-from reflex.components import Fragment as Fragment
-from reflex.components import Grid as Grid
-from reflex.components import GridItem as GridItem
-from reflex.components import Heading as Heading
-from reflex.components import Highlight as Highlight
-from reflex.components import Hstack as Hstack
-from reflex.components import Html as Html
-from reflex.components import Icon as Icon
-from reflex.components import IconButton as IconButton
-from reflex.components import Image as Image
-from reflex.components import Input as Input
-from reflex.components import InputGroup as InputGroup
-from reflex.components import InputLeftAddon as InputLeftAddon
-from reflex.components import InputLeftElement as InputLeftElement
-from reflex.components import InputRightAddon as InputRightAddon
-from reflex.components import InputRightElement as InputRightElement
-from reflex.components import Kbd as Kbd
-from reflex.components import Link as Link
-from reflex.components import LinkBox as LinkBox
-from reflex.components import LinkOverlay as LinkOverlay
-from reflex.components import List as List
-from reflex.components import ListItem as ListItem
-from reflex.components import Markdown as Markdown
-from reflex.components import Match as Match
-from reflex.components import Menu as Menu
-from reflex.components import MenuButton as MenuButton
-from reflex.components import MenuDivider as MenuDivider
-from reflex.components import MenuGroup as MenuGroup
-from reflex.components import MenuItem as MenuItem
-from reflex.components import MenuItemOption as MenuItemOption
-from reflex.components import MenuList as MenuList
-from reflex.components import MenuOptionGroup as MenuOptionGroup
-from reflex.components import Modal as Modal
-from reflex.components import ModalBody as ModalBody
-from reflex.components import ModalCloseButton as ModalCloseButton
-from reflex.components import ModalContent as ModalContent
-from reflex.components import ModalFooter as ModalFooter
-from reflex.components import ModalHeader as ModalHeader
-from reflex.components import ModalOverlay as ModalOverlay
-from reflex.components import Moment as Moment
-from reflex.components import MultiSelect as MultiSelect
-from reflex.components import MultiSelectOption as MultiSelectOption
-from reflex.components import NextLink as NextLink
-from reflex.components import NumberDecrementStepper as NumberDecrementStepper
-from reflex.components import NumberIncrementStepper as NumberIncrementStepper
-from reflex.components import NumberInput as NumberInput
-from reflex.components import NumberInputField as NumberInputField
-from reflex.components import NumberInputStepper as NumberInputStepper
-from reflex.components import Option as Option
-from reflex.components import OrderedList as OrderedList
-from reflex.components import Password as Password
-from reflex.components import PinInput as PinInput
-from reflex.components import PinInputField as PinInputField
-from reflex.components import Plotly as Plotly
-from reflex.components import Popover as Popover
-from reflex.components import PopoverAnchor as PopoverAnchor
-from reflex.components import PopoverArrow as PopoverArrow
-from reflex.components import PopoverBody as PopoverBody
-from reflex.components import PopoverCloseButton as PopoverCloseButton
-from reflex.components import PopoverContent as PopoverContent
-from reflex.components import PopoverFooter as PopoverFooter
-from reflex.components import PopoverHeader as PopoverHeader
-from reflex.components import PopoverTrigger as PopoverTrigger
-from reflex.components import Progress as Progress
-from reflex.components import Radio as Radio
-from reflex.components import RadioGroup as RadioGroup
-from reflex.components import RangeSlider as RangeSlider
-from reflex.components import RangeSliderFilledTrack as RangeSliderFilledTrack
-from reflex.components import RangeSliderThumb as RangeSliderThumb
-from reflex.components import RangeSliderTrack as RangeSliderTrack
-from reflex.components import ResponsiveGrid as ResponsiveGrid
-from reflex.components import ScaleFade as ScaleFade
-from reflex.components import Script as Script
-from reflex.components import Select as Select
-from reflex.components import Skeleton as Skeleton
-from reflex.components import SkeletonCircle as SkeletonCircle
-from reflex.components import SkeletonText as SkeletonText
-from reflex.components import Slide as Slide
-from reflex.components import SlideFade as SlideFade
-from reflex.components import Slider as Slider
-from reflex.components import SliderFilledTrack as SliderFilledTrack
-from reflex.components import SliderMark as SliderMark
-from reflex.components import SliderThumb as SliderThumb
-from reflex.components import SliderTrack as SliderTrack
-from reflex.components import Spacer as Spacer
-from reflex.components import Span as Span
-from reflex.components import Spinner as Spinner
-from reflex.components import Square as Square
-from reflex.components import Stack as Stack
-from reflex.components import Stat as Stat
-from reflex.components import StatArrow as StatArrow
-from reflex.components import StatGroup as StatGroup
-from reflex.components import StatHelpText as StatHelpText
-from reflex.components import StatLabel as StatLabel
-from reflex.components import StatNumber as StatNumber
-from reflex.components import Step as Step
-from reflex.components import StepDescription as StepDescription
-from reflex.components import StepIcon as StepIcon
-from reflex.components import StepIndicator as StepIndicator
-from reflex.components import StepNumber as StepNumber
-from reflex.components import StepSeparator as StepSeparator
-from reflex.components import StepStatus as StepStatus
-from reflex.components import StepTitle as StepTitle
-from reflex.components import Stepper as Stepper
-from reflex.components import Switch as Switch
-from reflex.components import Tab as Tab
-from reflex.components import TabList as TabList
-from reflex.components import TabPanel as TabPanel
-from reflex.components import TabPanels as TabPanels
-from reflex.components import Table as Table
-from reflex.components import TableCaption as TableCaption
-from reflex.components import TableContainer as TableContainer
-from reflex.components import Tabs as Tabs
-from reflex.components import Tag as Tag
-from reflex.components import TagCloseButton as TagCloseButton
-from reflex.components import TagLabel as TagLabel
-from reflex.components import TagLeftIcon as TagLeftIcon
-from reflex.components import TagRightIcon as TagRightIcon
-from reflex.components import Tbody as Tbody
-from reflex.components import Td as Td
-from reflex.components import Text as Text
-from reflex.components import TextArea as TextArea
-from reflex.components import Tfoot as Tfoot
-from reflex.components import Th as Th
-from reflex.components import Thead as Thead
-from reflex.components import TimePicker as TimePicker
-from reflex.components import Tooltip as Tooltip
-from reflex.components import Tr as Tr
-from reflex.components import UnorderedList as UnorderedList
-from reflex.components import Upload as Upload
-from reflex.components import Video as Video
-from reflex.components import VisuallyHidden as VisuallyHidden
-from reflex.components import Vstack as Vstack
-from reflex.components import Wrap as Wrap
-from reflex.components import WrapItem as WrapItem
+from reflex.components import cond as cond
+from reflex.components import foreach as foreach
+from reflex.components import html as html
+from reflex.components import match as match
+from reflex.components import connection_banner as connection_banner
+from reflex.components import connection_modal as connection_modal
+from reflex.components import debounce_input as debounce_input
+from reflex.components import fragment as fragment
+from reflex.components import image as image
+from reflex.components import script as script
+from reflex.components import desktop_only as desktop_only
+from reflex.components import mobile_and_tablet as mobile_and_tablet
+from reflex.components import mobile_only as mobile_only
+from reflex.components import tablet_and_desktop as tablet_and_desktop
+from reflex.components import tablet_only as tablet_only
+from reflex.components import cancel_upload as cancel_upload
+from reflex.components import clear_selected_files as clear_selected_files
+from reflex.components import selected_files as selected_files
+from reflex.components import upload as upload
 from reflex.components import accordion as accordion
-from reflex.components import accordion_button as accordion_button
-from reflex.components import accordion_icon as accordion_icon
-from reflex.components import accordion_item as accordion_item
-from reflex.components import accordion_panel as accordion_panel
-from reflex.components import alert as alert
-from reflex.components import alert_description as alert_description
 from reflex.components import alert_dialog as alert_dialog
-from reflex.components import alert_dialog_body as alert_dialog_body
-from reflex.components import alert_dialog_content as alert_dialog_content
-from reflex.components import alert_dialog_footer as alert_dialog_footer
-from reflex.components import alert_dialog_header as alert_dialog_header
-from reflex.components import alert_dialog_overlay as alert_dialog_overlay
-from reflex.components import alert_icon as alert_icon
-from reflex.components import alert_title as alert_title
 from reflex.components import aspect_ratio as aspect_ratio
-from reflex.components import audio as audio
 from reflex.components import avatar as avatar
-from reflex.components import avatar_badge as avatar_badge
-from reflex.components import avatar_group as avatar_group
 from reflex.components import badge as badge
+from reflex.components import blockquote as blockquote
 from reflex.components import box as box
-from reflex.components import breadcrumb as breadcrumb
-from reflex.components import breadcrumb_item as breadcrumb_item
-from reflex.components import breadcrumb_link as breadcrumb_link
-from reflex.components import breadcrumb_separator as breadcrumb_separator
 from reflex.components import button as button
-from reflex.components import button_group as button_group
+from reflex.components import callout as callout
 from reflex.components import card as card
-from reflex.components import card_body as card_body
-from reflex.components import card_footer as card_footer
-from reflex.components import card_header as card_header
 from reflex.components import center as center
 from reflex.components import checkbox as checkbox
-from reflex.components import checkbox_group as checkbox_group
-from reflex.components import circular_progress as circular_progress
-from reflex.components import circular_progress_label as circular_progress_label
-from reflex.components import circle as circle
 from reflex.components import code as code
-from reflex.components import code_block as code_block
-from reflex.components import collapse as collapse
-from reflex.components import color_mode_button as color_mode_button
-from reflex.components import color_mode_icon as color_mode_icon
-from reflex.components import color_mode_switch as color_mode_switch
-from reflex.components import component as component
-from reflex.components import cond as cond
-from reflex.components import connection_banner as connection_banner
-from reflex.components import connection_modal as connection_modal
 from reflex.components import container as container
-from reflex.components import data_table as data_table
-from reflex.components import data_editor as data_editor
-from reflex.components import data_editor_theme as data_editor_theme
-from reflex.components import date_picker as date_picker
-from reflex.components import date_time_picker as date_time_picker
-from reflex.components import debounce_input as debounce_input
-from reflex.components import divider as divider
+from reflex.components import context_menu as context_menu
+from reflex.components import dialog as dialog
 from reflex.components import drawer as drawer
-from reflex.components import drawer_body as drawer_body
-from reflex.components import drawer_close_button as drawer_close_button
-from reflex.components import drawer_content as drawer_content
-from reflex.components import drawer_footer as drawer_footer
-from reflex.components import drawer_header as drawer_header
-from reflex.components import drawer_overlay as drawer_overlay
-from reflex.components import editable as editable
-from reflex.components import editable_input as editable_input
-from reflex.components import editable_preview as editable_preview
-from reflex.components import editable_textarea as editable_textarea
-from reflex.components import editor as editor
-from reflex.components import email as email
-from reflex.components import fade as fade
+from reflex.components import dropdown_menu as dropdown_menu
 from reflex.components import flex as flex
-from reflex.components import foreach as foreach
 from reflex.components import form as form
-from reflex.components import form_control as form_control
-from reflex.components import form_error_message as form_error_message
-from reflex.components import form_helper_text as form_helper_text
-from reflex.components import form_label as form_label
-from reflex.components import fragment as fragment
 from reflex.components import grid as grid
-from reflex.components import grid_item as grid_item
 from reflex.components import heading as heading
-from reflex.components import highlight as highlight
+from reflex.components import hover_card as hover_card
 from reflex.components import hstack as hstack
-from reflex.components import html as html
-from reflex.components import icon as icon
 from reflex.components import icon_button as icon_button
-from reflex.components import image as image
-from reflex.components import input as input
-from reflex.components import input_group as input_group
-from reflex.components import input_left_addon as input_left_addon
-from reflex.components import input_left_element as input_left_element
-from reflex.components import input_right_addon as input_right_addon
-from reflex.components import input_right_element as input_right_element
+from reflex.components import inset as inset
 from reflex.components import kbd as kbd
 from reflex.components import link as link
-from reflex.components import link_box as link_box
-from reflex.components import link_overlay as link_overlay
-from reflex.components import list as list
-from reflex.components import list_item as list_item
-from reflex.components import markdown as markdown
-from reflex.components import match as match
-from reflex.components import menu as menu
-from reflex.components import menu_button as menu_button
-from reflex.components import menu_divider as menu_divider
-from reflex.components import menu_group as menu_group
-from reflex.components import menu_item as menu_item
-from reflex.components import menu_item_option as menu_item_option
-from reflex.components import menu_list as menu_list
-from reflex.components import menu_option_group as menu_option_group
-from reflex.components import modal as modal
-from reflex.components import modal_body as modal_body
-from reflex.components import modal_close_button as modal_close_button
-from reflex.components import modal_content as modal_content
-from reflex.components import modal_footer as modal_footer
-from reflex.components import modal_header as modal_header
-from reflex.components import modal_overlay as modal_overlay
-from reflex.components import moment as moment
-from reflex.components import multi_select as multi_select
-from reflex.components import multi_select_option as multi_select_option
-from reflex.components import next_link as next_link
-from reflex.components import number_decrement_stepper as number_decrement_stepper
-from reflex.components import number_increment_stepper as number_increment_stepper
-from reflex.components import number_input as number_input
-from reflex.components import number_input_field as number_input_field
-from reflex.components import number_input_stepper as number_input_stepper
-from reflex.components import option as option
-from reflex.components import ordered_list as ordered_list
-from reflex.components import password as password
-from reflex.components import pin_input as pin_input
-from reflex.components import pin_input_field as pin_input_field
-from reflex.components import plotly as plotly
 from reflex.components import popover as popover
-from reflex.components import popover_anchor as popover_anchor
-from reflex.components import popover_arrow as popover_arrow
-from reflex.components import popover_body as popover_body
-from reflex.components import popover_close_button as popover_close_button
-from reflex.components import popover_content as popover_content
-from reflex.components import popover_footer as popover_footer
-from reflex.components import popover_header as popover_header
-from reflex.components import popover_trigger as popover_trigger
 from reflex.components import progress as progress
-from reflex.components import radio as radio
 from reflex.components import radio_group as radio_group
-from reflex.components import range_slider as range_slider
-from reflex.components import range_slider_filled_track as range_slider_filled_track
-from reflex.components import range_slider_thumb as range_slider_thumb
-from reflex.components import range_slider_track as range_slider_track
-from reflex.components import responsive_grid as responsive_grid
-from reflex.components import scale_fade as scale_fade
-from reflex.components import script as script
+from reflex.components import scroll_area as scroll_area
+from reflex.components import section as section
 from reflex.components import select as select
-from reflex.components import skeleton as skeleton
-from reflex.components import skeleton_circle as skeleton_circle
-from reflex.components import skeleton_text as skeleton_text
-from reflex.components import slide as slide
-from reflex.components import slide_fade as slide_fade
+from reflex.components import separator as separator
 from reflex.components import slider as slider
-from reflex.components import slider_filled_track as slider_filled_track
-from reflex.components import slider_mark as slider_mark
-from reflex.components import slider_thumb as slider_thumb
-from reflex.components import slider_track as slider_track
 from reflex.components import spacer as spacer
-from reflex.components import span as span
-from reflex.components import spinner as spinner
-from reflex.components import square as square
-from reflex.components import stack as stack
-from reflex.components import stat as stat
-from reflex.components import stat_arrow as stat_arrow
-from reflex.components import stat_group as stat_group
-from reflex.components import stat_help_text as stat_help_text
-from reflex.components import stat_label as stat_label
-from reflex.components import stat_number as stat_number
-from reflex.components import step as step
-from reflex.components import step_description as step_description
-from reflex.components import step_icon as step_icon
-from reflex.components import step_indicator as step_indicator
-from reflex.components import step_number as step_number
-from reflex.components import step_separator as step_separator
-from reflex.components import step_status as step_status
-from reflex.components import step_title as step_title
-from reflex.components import stepper as stepper
 from reflex.components import switch as switch
-from reflex.components import tab as tab
-from reflex.components import tab_list as tab_list
-from reflex.components import tab_panel as tab_panel
-from reflex.components import tab_panels as tab_panels
 from reflex.components import table as table
-from reflex.components import table_caption as table_caption
-from reflex.components import table_container as table_container
 from reflex.components import tabs as tabs
-from reflex.components import tag as tag
-from reflex.components import tag_close_button as tag_close_button
-from reflex.components import tag_label as tag_label
-from reflex.components import tag_left_icon as tag_left_icon
-from reflex.components import tag_right_icon as tag_right_icon
-from reflex.components import tbody as tbody
-from reflex.components import td as td
 from reflex.components import text as text
 from reflex.components import text_area as text_area
-from reflex.components import tfoot as tfoot
-from reflex.components import th as th
-from reflex.components import thead as thead
-from reflex.components import time_picker as time_picker
+from reflex.components import theme as theme
+from reflex.components import theme_panel as theme_panel
 from reflex.components import tooltip as tooltip
-from reflex.components import tr as tr
-from reflex.components import unordered_list as unordered_list
-from reflex.components import upload as upload
-from reflex.components import video as video
-from reflex.components import visually_hidden as visually_hidden
 from reflex.components import vstack as vstack
-from reflex.components import wrap as wrap
-from reflex.components import wrap_item as wrap_item
-from reflex.components import cancel_upload as cancel_upload
-from reflex import components as components
-from reflex.components import color_mode_cond as color_mode_cond
-from reflex.components import desktop_only as desktop_only
-from reflex.components import mobile_only as mobile_only
-from reflex.components import tablet_only as tablet_only
-from reflex.components import mobile_and_tablet as mobile_and_tablet
-from reflex.components import tablet_and_desktop as tablet_and_desktop
-from reflex.components import selected_files as selected_files
-from reflex.components import clear_selected_files as clear_selected_files
+from reflex.components import data_editor as data_editor
+from reflex.components import data_editor_theme as data_editor_theme
+from reflex.components import plotly as plotly
+from reflex.components import audio as audio
+from reflex.components import video as video
+from reflex.components import editor as editor
 from reflex.components import EditorButtonList as EditorButtonList
 from reflex.components import EditorOptions as EditorOptions
-from reflex.components import NoSSRComponent as NoSSRComponent
-from reflex.components import chakra as chakra
-from reflex.components import next as next
+from reflex.components import icon as icon
+from reflex.components.component import Component as Component
+from reflex.components.component import NoSSRComponent as NoSSRComponent
 from reflex.components.component import memo as memo
+from reflex.components import chakra as chakra
 from reflex.components import el as el
-from reflex.components import lucide as lucide
 from reflex.components import radix as radix
 from reflex.components import recharts as recharts
 from reflex.components.moment.moment import MomentDelta as MomentDelta

reflex/components/__init__.py

@@ -2,15 +2,16 @@
 from __future__ import annotations
 
 from .base import Fragment, Script, fragment, script
-from .chakra import *
 from .component import Component
 from .component import NoSSRComponent as NoSSRComponent
 from .core import *
 from .datadisplay import *
 from .gridjs import *
+from .lucide import icon
 from .markdown import *
 from .moment import *
-from .next import NextLink, next_link
+from .next import NextLink, image, next_link
 from .plotly import *
+from .radix import *
 from .react_player import *
 from .suneditor import *

reflex/components/chakra/__init__.py

@@ -83,7 +83,6 @@ grid_item = GridItem.create
 heading = Heading.create
 highlight = Highlight.create
 hstack = Hstack.create
-html = Html.create
 icon = Icon.create
 icon_button = IconButton.create
 image = Image.create

reflex/components/chakra/layout/__init__.py

@@ -7,7 +7,6 @@ from .center import Center, Circle, Square
 from .container import Container
 from .flex import Flex
 from .grid import Grid, GridItem, ResponsiveGrid
-from .html import Html
 from .spacer import Spacer
 from .stack import Hstack, Stack, Vstack
 from .wrap import Wrap, WrapItem

reflex/components/core/__init__.py

@@ -5,6 +5,7 @@ from .banner import ConnectionBanner, ConnectionModal
 from .cond import Cond, cond
 from .debounce import DebounceInput
 from .foreach import Foreach
+from .html import Html
 from .match import Match
 from .responsive import (
     desktop_only,
@@ -19,5 +20,6 @@ connection_banner = ConnectionBanner.create
 connection_modal = ConnectionModal.create
 debounce_input = DebounceInput.create
 foreach = Foreach.create
+html = Html.create
 match = Match.create
 upload = Upload.create

reflex/components/chakra/layout/html.py → reflex/components/core/html.py

@@ -1,11 +1,11 @@
 """A html component."""
 from typing import Dict
 
-from reflex.components.chakra.layout.box import Box
+from reflex.components.el.elements.typography import Div
 from reflex.vars import Var
 
 
-class Html(Box):
+class Html(Div):
     """Render the html.
 
     Returns:

reflex/components/chakra/layout/html.pyi → reflex/components/core/html.pyi

@@ -1,4 +1,4 @@
-"""Stub file for reflex/components/chakra/layout/html.py"""
+"""Stub file for reflex/components/core/html.py"""
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `scripts/pyi_generator.py`!
 # ------------------------------------------------------
@@ -8,10 +8,10 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Dict
-from reflex.components.chakra.layout.box import Box
+from reflex.components.el.elements.typography import Div
 from reflex.vars import Var
 
-class Html(Box):
+class Html(Div):
     @overload
     @classmethod
     def create(  # type: ignore
@@ -20,9 +20,49 @@ class Html(Box):
         dangerouslySetInnerHTML: Optional[
             Union[Var[Dict[str, str]], Dict[str, str]]
         ] = None,
-        element: Optional[Union[Var[str], str]] = None,
-        src: Optional[Union[Var[str], str]] = None,
-        alt: Optional[Union[Var[str], str]] = None,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        translate: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -82,9 +122,23 @@ class Html(Box):
         Args:
             *children: The children of the component.
             dangerouslySetInnerHTML: The HTML to render.
-            element: The type element to render. You can specify an image, video, or any other HTML element such as iframe.
-            src: The source of the content.
-            alt: The alt text of the content.
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            translate: Specifies whether the content of an element should be translated or not.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

tests/components/forms/test_debounce.py

@@ -43,7 +43,7 @@ class S(BaseState):
 def test_render_child_props():
     """DebounceInput should render props from child component."""
     tag = rx.debounce_input(
-        rx.input(
+        rx.chakra.input(
             foo="bar",
             baz="quuc",
             value="real",
@@ -71,7 +71,7 @@ def test_render_child_props_recursive():
         rx.debounce_input(
             rx.debounce_input(
                 rx.debounce_input(
-                    rx.input(
+                    rx.chakra.input(
                         foo="bar",
                         baz="quuc",
                         value="real",
@@ -103,7 +103,7 @@ def test_render_child_props_recursive():
 
 def test_full_control_implicit_debounce():
     """DebounceInput is used when value and on_change are used together."""
-    tag = rx.input(
+    tag = rx.chakra.input(
         value=S.value,
         on_change=S.on_change,
     )._render()

tests/components/forms/test_uploads.py

@@ -72,10 +72,10 @@ def test_upload_component_render(upload_component):
     assert input["name"] == "Input"
     assert input["props"] == ["type={`file`}", "{...getInputProps()}"]
 
-    assert button["name"] == "Button"
+    assert button["name"] == "RadixThemesButton"
     assert button["children"][0]["contents"] == "{`select file`}"
 
-    assert text["name"] == "Text"
+    assert text["name"] == "RadixThemesText"
     assert (
         text["children"][0]["contents"]
         == "{`Drag and drop files here or click to select files`}"

tests/components/layout/test_match.py

@@ -43,7 +43,7 @@ def test_match_components():
     assert match_cases[0][0]._var_name == "1"
     assert match_cases[0][0]._var_type == int
     first_return_value_render = match_cases[0][1].render()
-    assert first_return_value_render["name"] == "Text"
+    assert first_return_value_render["name"] == "RadixThemesText"
     assert first_return_value_render["children"][0]["contents"] == "{`first value`}"
 
     assert match_cases[1][0]._var_name == "2"
@@ -51,36 +51,36 @@ def test_match_components():
     assert match_cases[1][1]._var_name == "3"
     assert match_cases[1][1]._var_type == int
     second_return_value_render = match_cases[1][2].render()
-    assert second_return_value_render["name"] == "Text"
+    assert second_return_value_render["name"] == "RadixThemesText"
     assert second_return_value_render["children"][0]["contents"] == "{`second value`}"
 
     assert match_cases[2][0]._var_name == "[1, 2]"
     assert match_cases[2][0]._var_type == list
     third_return_value_render = match_cases[2][1].render()
-    assert third_return_value_render["name"] == "Text"
+    assert third_return_value_render["name"] == "RadixThemesText"
     assert third_return_value_render["children"][0]["contents"] == "{`third value`}"
 
     assert match_cases[3][0]._var_name == "random"
     assert match_cases[3][0]._var_type == str
     fourth_return_value_render = match_cases[3][1].render()
-    assert fourth_return_value_render["name"] == "Text"
+    assert fourth_return_value_render["name"] == "RadixThemesText"
     assert fourth_return_value_render["children"][0]["contents"] == "{`fourth value`}"
 
     assert match_cases[4][0]._var_name == '{"foo": "bar"}'
     assert match_cases[4][0]._var_type == dict
     fifth_return_value_render = match_cases[4][1].render()
-    assert fifth_return_value_render["name"] == "Text"
+    assert fifth_return_value_render["name"] == "RadixThemesText"
     assert fifth_return_value_render["children"][0]["contents"] == "{`fifth value`}"
 
     assert match_cases[5][0]._var_name == "(match_state.num + 1)"
     assert match_cases[5][0]._var_type == int
     fifth_return_value_render = match_cases[5][1].render()
-    assert fifth_return_value_render["name"] == "Text"
+    assert fifth_return_value_render["name"] == "RadixThemesText"
     assert fifth_return_value_render["children"][0]["contents"] == "{`sixth value`}"
 
     default = match_child["default"].render()
 
-    assert default["name"] == "Text"
+    assert default["name"] == "RadixThemesText"
     assert default["children"][0]["contents"] == "{`default value`}"
 
 
@@ -143,6 +143,8 @@ def test_match_on_component_without_default():
     """Test that matching cases with return values as components returns a Fragment
     as the default case if not provided.
     """
+    from reflex.components.base.fragment import Fragment
+
     match_case_tuples = (
         (1, rx.text("first value")),
         (2, 3, rx.text("second value")),
@@ -151,7 +153,7 @@ def test_match_on_component_without_default():
     match_comp = Match.create(MatchState.value, *match_case_tuples)
     default = match_comp.render()["children"][0]["default"]  # type: ignore
 
-    assert isinstance(default, rx.Fragment)
+    assert isinstance(default, Fragment)
 
 
 def test_match_on_var_no_default():
@@ -258,8 +260,8 @@ def test_match_case_tuple_elements(match_case):
                 ([1, 2], rx.text("third value")),
                 rx.text("default value"),
             ),
-            "Match cases should have the same return types. Case 3 with return value `<Text> {`first value`} </Text>` "
-            "of type <class 'reflex.components.chakra.typography.text.Text'> is not <class 'reflex.vars.BaseVar'>",
+            "Match cases should have the same return types. Case 3 with return value `<RadixThemesText> {`first value`} </RadixThemesText>` "
+            "of type <class 'reflex.components.radix.themes.typography.text.Text'> is not <class 'reflex.vars.BaseVar'>",
         ),
     ],
 )

tests/components/test_component.py

@@ -488,12 +488,14 @@ def test_custom_component_wrapper():
             color=color,
         )
 
+    from reflex.components.radix.themes.typography.text import Text
+
     ccomponent = my_component(
         rx.text("child"), width=Var.create(1), color=Var.create("red")
     )
     assert isinstance(ccomponent, CustomComponent)
     assert len(ccomponent.children) == 1
-    assert isinstance(ccomponent.children[0], rx.Text)
+    assert isinstance(ccomponent.children[0], Text)
 
     component = ccomponent.get_component(ccomponent)
     assert isinstance(component, Box)
@@ -595,7 +597,7 @@ def test_unsupported_parent_components(component5):
         component5: component with valid parent of "Text" only
     """
     with pytest.raises(ValueError) as err:
-        rx.Box(children=[component5.create()])
+        rx.box(component5.create())
     assert (
         err.value.args[0]
         == f"The component `{component5.__name__}` can only be a child of the components: `{component5._valid_parents[0]}`. Got `Box` instead."
@@ -625,10 +627,10 @@ def test_component_with_only_valid_children(fixture, request):
 @pytest.mark.parametrize(
     "component,rendered",
     [
-        (rx.text("hi"), "<Text>\n  {`hi`}\n</Text>"),
+        (rx.text("hi"), "<RadixThemesText>\n  {`hi`}\n</RadixThemesText>"),
         (
-            rx.box(rx.heading("test", size="md")),
-            "<Box>\n  <Heading size={`md`}>\n  {`test`}\n</Heading>\n</Box>",
+            rx.box(rx.chakra.heading("test", size="md")),
+            "<RadixThemesBox>\n  <Heading size={`md`}>\n  {`test`}\n</Heading>\n</RadixThemesBox>",
         ),
     ],
 )

tests/components/typography/test_markdown.py

@@ -37,7 +37,7 @@ def test_set_component_map():
     """Test setting the component map."""
     component_map = {
         "h1": lambda value: rx.box(
-            rx.heading(value, as_="h1", size="2xl"), padding="1em"
+            rx.chakra.heading(value, as_="h1", size="2xl"), padding="1em"
         ),
         "p": lambda value: rx.box(rx.text(value), padding="1em"),
     }

tests/test_app.py

@@ -15,7 +15,7 @@ from starlette_admin.auth import AuthProvider
 from starlette_admin.contrib.sqla.admin import Admin
 from starlette_admin.contrib.sqla.view import ModelView
 
-import reflex.components.radix.themes as rdxt
+import reflex as rx
 from reflex import AdminDash, constants
 from reflex.app import (
     App,
@@ -24,7 +24,8 @@ from reflex.app import (
     process,
     upload,
 )
-from reflex.components import Box, Component, Cond, Fragment, Text
+from reflex.components import Component, Cond, Fragment
+from reflex.components.radix.themes.typography.text import Text
 from reflex.event import Event
 from reflex.middleware import HydrateMiddleware
 from reflex.model import Model
@@ -58,7 +59,7 @@ def index_page():
     """
 
     def index():
-        return Box.create("Index")
+        return rx.box("Index")
 
     return index
 
@@ -72,7 +73,7 @@ def about_page():
     """
 
     def about():
-        return Box.create("About")
+        return rx.box("About")
 
     return about
 
@@ -1172,7 +1173,7 @@ def test_overlay_component(
             exp_page_child,
         )
 
-    app.add_page(Box.create("Index"), route="/test")
+    app.add_page(rx.box("Index"), route="/test")
     page = app.pages["test"]
     if exp_page_child is not None:
         assert len(page.children) == 3
@@ -1212,7 +1213,7 @@ def test_app_wrap_compile_theme(compilable_app):
         compilable_app: compilable_app fixture.
     """
     app, web_dir = compilable_app
-    app.theme = rdxt.theme(accent_color="plum")
+    app.theme = rx.theme(accent_color="plum")
     app.compile_()
     app_js_contents = (web_dir / "pages" / "_app.js").read_text()
     app_js_lines = [
@@ -1245,13 +1246,13 @@ def test_app_wrap_priority(compilable_app):
         tag = "Fragment1"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
-            return {(99, "Box"): Box.create()}
+            return {(99, "Box"): rx.chakra.box()}
 
     class Fragment2(Component):
         tag = "Fragment2"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
-            return {(50, "Text"): Text.create()}
+            return {(50, "Text"): rx.chakra.text()}
 
     class Fragment3(Component):
         tag = "Fragment3"