feat: Transitions, spacing, scroll fade, prompt area update (#11168)

Co-authored-by: Github Action <action@github.com>
Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
Co-authored-by: aaroniker <4730431+aaroniker@users.noreply.github.com>

packages/ui/src/components/collapsible.tsx

@@ -1,6 +1,8 @@
 import { Collapsible as Kobalte, CollapsibleRootProps } from "@kobalte/core/collapsible"
-import { ComponentProps, ParentProps, splitProps } from "solid-js"
-import { Icon } from "./icon"
+import { Accessor, ComponentProps, createContext, createSignal, ParentProps, splitProps, useContext } from "solid-js"
+import { MorphChevron } from "./morph-chevron"
+
+const CollapsibleContext = createContext<Accessor<boolean>>()
 
 export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
   class?: string
@@ -9,17 +11,30 @@ export interface CollapsibleProps extends ParentProps<CollapsibleRootProps> {
 }
 
 function CollapsibleRoot(props: CollapsibleProps) {
-  const [local, others] = splitProps(props, ["class", "classList", "variant"])
+  const [local, others] = splitProps(props, ["class", "classList", "variant", "open", "onOpenChange", "children"])
+  const [internalOpen, setInternalOpen] = createSignal(local.open ?? false)
+
+  const handleOpenChange = (open: boolean) => {
+    setInternalOpen(open)
+    local.onOpenChange?.(open)
+  }
+
   return (
-    <Kobalte
-      data-component="collapsible"
-      data-variant={local.variant || "normal"}
-      classList={{
-        ...(local.classList ?? {}),
-        [local.class ?? ""]: !!local.class,
-      }}
-      {...others}
-    />
+    <CollapsibleContext.Provider value={internalOpen}>
+      <Kobalte
+        data-component="collapsible"
+        data-variant={local.variant || "normal"}
+        open={local.open}
+        onOpenChange={handleOpenChange}
+        classList={{
+          ...(local.classList ?? {}),
+          [local.class ?? ""]: !!local.class,
+        }}
+        {...others}
+      >
+        {local.children}
+      </Kobalte>
+    </CollapsibleContext.Provider>
   )
 }
 
@@ -32,9 +47,10 @@ function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
 }
 
 function CollapsibleArrow(props?: ComponentProps<"div">) {
+  const isOpen = useContext(CollapsibleContext)
   return (
     <div data-slot="collapsible-arrow" {...(props || {})}>
-      <Icon name="chevron-grabber-vertical" size="small" />
+      <MorphChevron expanded={isOpen?.() ?? false} />
     </div>
   )
 }