Add collapsible component wrapper for Base UI

- Implement CollapsibleRoot, CollapsibleTrigger, CollapsiblePanel components
- Add HighLevelCollapsible wrapper with trigger and content props
- Follow existing component patterns from dialog and menu components
- Add to lazy loading system in __init__.py
- Include component in demo app for testing
- All pre-commit hooks pass (ruff, codespell, pyright)

Co-Authored-By: Carlos Cutillas <carlos@reflex.dev>

Author: devin-ai-integration[bot]

demo/demo/demo.py

@@ -58,6 +58,15 @@ def index() -> rx.Component:
             on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
             on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
         ),
+        ui.collapsible(
+            trigger=ui.button("Toggle Content", variant="outline"),
+            content=rx.el.div(
+                "This is the collapsible content! It can contain any components.",
+                rx.el.p("Here's another paragraph inside the collapsible panel."),
+                class_name="p-4 bg-secondary-2 rounded-md mt-2",
+            ),
+            on_open_change=lambda value: rx.toast.success(f"Collapsible open: {value}"),
+        ),
         ui.theme_switcher(class_name="absolute top-4 right-4"),
         class_name=ui.cn(
             "flex flex-col gap-6 items-center justify-center h-screen", "bg-secondary-1"

reflex_ui/__init__.py

@@ -8,6 +8,7 @@
     "components.base.button": ["button"],
     "components.base.card": ["card"],
     "components.base.checkbox": ["checkbox"],
+    "components.base.collapsible": ["collapsible"],
     "components.base.dialog": ["dialog"],
     "components.base.gradient_profile": ["gradient_profile"],
     "components.base.input": ["input"],

reflex_ui/components/base/collapsible.py

@@ -0,0 +1,135 @@
+"""Custom collapsible component."""
+
+from typing import Literal
+
+from reflex.components.component import Component, ComponentNamespace
+from reflex.event import EventHandler, passthrough_event_spec
+from reflex.utils.imports import ImportVar
+from reflex.vars.base import Var
+
+from reflex_ui.components.base_ui import PACKAGE_NAME, BaseUIComponent
+
+
+class ClassNames:
+    """Class names for collapsible components."""
+
+    ROOT = ""
+    TRIGGER = "cursor-pointer focus:outline-none focus-visible:ring-1 focus-visible:ring-primary-4"
+    PANEL = "overflow-hidden transition-all duration-200 data-[state=closed]:animate-collapse-up data-[state=open]:animate-collapse-down"
+
+
+class CollapsibleBaseComponent(BaseUIComponent):
+    """Base component for collapsible components."""
+
+    library = f"{PACKAGE_NAME}/collapsible"
+
+    @property
+    def import_var(self):
+        """Return the import variable for the collapsible component."""
+        return ImportVar(tag="Collapsible", package_path="", install=False)
+
+
+class CollapsibleRoot(CollapsibleBaseComponent):
+    """Groups all parts of the collapsible. Doesn't render its own HTML element."""
+
+    tag = "Collapsible.Root"
+
+    default_open: Var[bool]
+
+    open: Var[bool]
+
+    on_open_change: EventHandler[passthrough_event_spec(bool)]
+
+    # Whether the component should ignore user interaction.
+    disabled: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the collapsible root component."""
+        props["data-slot"] = "collapsible"
+        cls.set_class_name(ClassNames.ROOT, props)
+        return super().create(*children, **props)
+
+
+class CollapsibleTrigger(CollapsibleBaseComponent):
+    """A button that opens and closes the collapsible panel. Renders a <button> element."""
+
+    tag = "Collapsible.Trigger"
+
+    # Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>). Defaults to True.
+    native_button: Var[bool]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the collapsible trigger component."""
+        props["data-slot"] = "collapsible-trigger"
+        cls.set_class_name(ClassNames.TRIGGER, props)
+        return super().create(*children, **props)
+
+
+class CollapsiblePanel(CollapsibleBaseComponent):
+    """A panel with the collapsible contents. Renders a <div> element."""
+
+    tag = "Collapsible.Panel"
+
+    hidden_until_found: Var[bool]
+
+    class_name: Var[str]
+
+    keep_mounted: Var[bool]
+
+    # The render prop.
+    render_: Var[Component]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the collapsible panel component."""
+        props["data-slot"] = "collapsible-panel"
+        cls.set_class_name(ClassNames.PANEL, props)
+        return super().create(*children, **props)
+
+
+class HighLevelCollapsible(CollapsibleRoot):
+    """High level collapsible component."""
+
+    trigger: Var[Component | None]
+    content: Var[str | Component | None]
+
+    @classmethod
+    def create(cls, *children, **props) -> BaseUIComponent:
+        """Create the collapsible component."""
+        trigger = props.pop("trigger", None)
+        content = props.pop("content", None)
+        class_name = props.pop("class_name", "")
+
+        return CollapsibleRoot.create(
+            CollapsibleTrigger.create(render_=trigger) if trigger else None,
+            CollapsiblePanel.create(
+                content,
+                *children,
+                class_name=class_name,
+            ),
+            **props,
+        )
+
+    def _exclude_props(self) -> list[str]:
+        return [
+            *super()._exclude_props(),
+            "trigger",
+            "content",
+        ]
+
+
+class Collapsible(ComponentNamespace):
+    """Namespace for Collapsible components."""
+
+    root = staticmethod(CollapsibleRoot.create)
+    trigger = staticmethod(CollapsibleTrigger.create)
+    panel = staticmethod(CollapsiblePanel.create)
+    __call__ = staticmethod(HighLevelCollapsible.create)
+
+
+collapsible = Collapsible()

reflex_ui/components/base/collapsible.pyi

@@ -0,0 +1,90 @@
+"""Type stubs for collapsible component."""
+
+from typing import Any, Literal
+
+from reflex.components.component import Component, ComponentNamespace
+from reflex.event import EventType
+from reflex.vars.base import Var
+
+from reflex_ui.components.base_ui import BaseUIComponent
+
+class ClassNames:
+    ROOT: str
+    TRIGGER: str
+    PANEL: str
+
+class CollapsibleBaseComponent(BaseUIComponent):
+    library: str
+    @property
+    def import_var(self): ...
+
+class CollapsibleRoot(CollapsibleBaseComponent):
+    tag: str
+    default_open: Var[bool]
+    open: Var[bool]
+    on_open_change: EventType[bool]
+    disabled: Var[bool]
+    @classmethod
+    def create(
+        cls,
+        *children,
+        default_open: bool | Var[bool] | None = None,
+        open: bool | Var[bool] | None = None,
+        on_open_change: EventType[bool] | None = None,
+        disabled: bool | Var[bool] | None = None,
+        **props,
+    ) -> CollapsibleRoot: ...
+
+class CollapsibleTrigger(CollapsibleBaseComponent):
+    tag: str
+    native_button: Var[bool]
+    render_: Var[Component]
+    @classmethod
+    def create(
+        cls,
+        *children,
+        native_button: bool | Var[bool] | None = None,
+        render_: Component | Var[Component] | None = None,
+        **props,
+    ) -> CollapsibleTrigger: ...
+
+class CollapsiblePanel(CollapsibleBaseComponent):
+    tag: str
+    hidden_until_found: Var[bool]
+    class_name: Var[str]
+    keep_mounted: Var[bool]
+    render_: Var[Component]
+    @classmethod
+    def create(
+        cls,
+        *children,
+        hidden_until_found: bool | Var[bool] | None = None,
+        class_name: str | Var[str] | None = None,
+        keep_mounted: bool | Var[bool] | None = None,
+        render_: Component | Var[Component] | None = None,
+        **props,
+    ) -> CollapsiblePanel: ...
+
+class HighLevelCollapsible(CollapsibleRoot):
+    trigger: Var[Component | None]
+    content: Var[str | Component | None]
+    @classmethod
+    def create(
+        cls,
+        *children,
+        trigger: Component | Var[Component] | None = None,
+        content: str | Component | Var[str | Component] | None = None,
+        default_open: bool | Var[bool] | None = None,
+        open: bool | Var[bool] | None = None,
+        on_open_change: EventType[bool] | None = None,
+        disabled: bool | Var[bool] | None = None,
+        **props,
+    ) -> HighLevelCollapsible: ...
+
+class Collapsible(ComponentNamespace):
+    root: staticmethod
+    trigger: staticmethod
+    panel: staticmethod
+    __call__: staticmethod
+
+collapsible: Collapsible