Update collapsible component with Base UI transitions and styling

- Add proper Base UI transition classes to PANEL with data-[ending-style]:h-0 data-[starting-style]:h-0
- Update demo to match Base UI example with chevron icon and recovery keys styling
- Component tested successfully in browser with smooth transitions and event handling
- Follows official Base UI collapsible example pattern

Co-Authored-By: Carlos Cutillas <[email protected]>

Author: devin-ai-integration[bot]

demo/demo/demo.py

@@ -59,12 +59,19 @@ def index() -> rx.Component:
             on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
         ),
         ui.collapsible(
-            trigger=ui.button("Toggle Content", variant="outline"),
+            trigger=ui.button(
+                rx.el.span("▶", class_name="transition-all ease-out group-data-[panel-open]:rotate-90 inline-block mr-2"),
+                "Recovery keys",
+                variant="outline",
+                class_name="group flex items-center gap-2 rounded-sm bg-gray-100 px-2 py-1 text-sm font-medium hover:bg-gray-200 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-800 active:bg-gray-200",
+            ),
             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",
+                rx.el.div("alien-bean-pasta", class_name="text-sm"),
+                rx.el.div("wild-irish-burrito", class_name="text-sm"),
+                rx.el.div("horse-battery-staple", class_name="text-sm"),
+                class_name="mt-1 flex cursor-text flex-col gap-2 rounded-sm bg-gray-100 py-2 pl-7",
             ),
+            class_name="flex min-h-36 w-56 flex-col justify-center text-gray-900",
             on_open_change=lambda value: rx.toast.success(f"Collapsible open: {value}"),
         ),
         ui.theme_switcher(class_name="absolute top-4 right-4"),

reflex_ui/components/base/collapsible.py

@@ -13,7 +13,7 @@ class ClassNames:
 
     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"
+    PANEL = "flex h-[var(--collapsible-panel-height)] flex-col justify-end overflow-hidden transition-all ease-out data-[ending-style]:h-0 data-[starting-style]:h-0"
 
 
 class CollapsibleBaseComponent(BaseUIComponent):