Fix AccordionItem interactive docs not showing up (#2600)

reflex/components/radix/primitives/accordion.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 from types import SimpleNamespace
-from typing import Any, Dict, List, Literal
+from typing import Any, Dict, List, Literal, Optional
 
 from reflex.components.component import Component
 from reflex.components.core.match import Match
@@ -468,6 +468,44 @@ class AccordionItem(AccordionComponent):
             }
         )
 
+    @classmethod
+    def create(
+        cls,
+        *children,
+        header: Optional[Component | Var] = None,
+        content: Optional[Component | Var] = None,
+        **props,
+    ) -> Component:
+        """Create an accordion item.
+
+        Args:
+            header: The header of the accordion item.
+            content: The content of the accordion item.
+            *children: The list of children to use if header and content are not provided.
+            **props: Additional properties to apply to the accordion item.
+
+        Returns:
+            The accordion item.
+        """
+        # The item requires a value to toggle (use the header as the default value).
+        value = props.pop("value", header if isinstance(header, Var) else str(header))
+
+        if (header is not None) and (content is not None):
+            children = [
+                AccordionHeader.create(
+                    AccordionTrigger.create(
+                        header,
+                        Icon.create(tag="chevron_down", class_name="AccordionChevron"),
+                        class_name="AccordionTrigger",
+                    ),
+                ),
+                AccordionContent.create(content, class_name="AccordionContent"),
+            ]
+
+        return super().create(
+            *children, value=value, **props, class_name="AccordionItem"
+        )
+
 
 class AccordionHeader(AccordionComponent):
     """An accordion component."""
@@ -540,49 +578,12 @@ to {
 """
 
 
-def accordion_item(
-    header: Component | Var, content: Component | Var, **props
-) -> Component:
-    """Create an accordion item.
-
-    Args:
-        header: The header of the accordion item.
-        content: The content of the accordion item.
-        **props: Additional properties to apply to the accordion item.
-
-    Returns:
-        The accordion item.
-    """
-    # The item requires a value to toggle (use the header as the default value).
-    value = props.pop("value", header if isinstance(header, Var) else str(header))
-
-    return AccordionItem.create(
-        AccordionHeader.create(
-            AccordionTrigger.create(
-                header,
-                Icon.create(
-                    tag="chevron_down",
-                    class_name="AccordionChevron",
-                ),
-                class_name="AccordionTrigger",
-            ),
-        ),
-        AccordionContent.create(
-            content,
-            class_name="AccordionContent",
-        ),
-        value=value,
-        **props,
-        class_name="AccordionItem",
-    )
-
-
 class Accordion(SimpleNamespace):
     """Accordion component."""
 
     content = staticmethod(AccordionContent.create)
     header = staticmethod(AccordionHeader.create)
-    item = staticmethod(accordion_item)
+    item = staticmethod(AccordionItem.create)
     root = staticmethod(AccordionRoot.create)
     trigger = staticmethod(AccordionTrigger.create)
 

reflex/components/radix/primitives/accordion.pyi

@@ -8,7 +8,7 @@ from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from types import SimpleNamespace
-from typing import Any, Dict, List, Literal
+from typing import Any, Dict, List, Literal, Optional
 from reflex.components.component import Component
 from reflex.components.core.match import Match
 from reflex.components.lucide.icon import Icon
@@ -303,6 +303,8 @@ class AccordionItem(AccordionComponent):
     def create(  # type: ignore
         cls,
         *children,
+        header: Optional[Component | Var] = None,
+        content: Optional[Component | Var] = None,
         value: Optional[Union[Var[str], str]] = None,
         disabled: Optional[Union[Var[bool], bool]] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
@@ -359,10 +361,12 @@ class AccordionItem(AccordionComponent):
         ] = None,
         **props
     ) -> "AccordionItem":
-        """Create the component.
+        """Create an accordion item.
 
         Args:
-            *children: The children of the component.
+            header: The header of the accordion item.
+            content: The content of the accordion item.
+            *children: The list of children to use if header and content are not provided.
             value: A unique identifier for the item.
             disabled: When true, prevents the user from interacting with the item.
             as_child: Change the default rendered element for the one passed as a child.
@@ -372,13 +376,10 @@ class AccordionItem(AccordionComponent):
             class_name: The class name for the component.
             autofocus: Whether the component should take the focus once the page is loaded
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: Additional properties to apply to the accordion item.
 
         Returns:
-            The component.
+            The accordion item.
-
-        Raises:
-            TypeError: If an invalid child is passed.
         """
         ...
 
@@ -625,14 +626,10 @@ class AccordionContent(AccordionComponent):
         """
         ...
 
-def accordion_item(
-    header: Component | Var, content: Component | Var, **props
-) -> Component: ...
-
 class Accordion(SimpleNamespace):
     content = staticmethod(AccordionContent.create)
     header = staticmethod(AccordionHeader.create)
-    item = staticmethod(accordion_item)
+    item = staticmethod(AccordionItem.create)
     root = staticmethod(AccordionRoot.create)
     trigger = staticmethod(AccordionTrigger.create)