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/accordion.tsx

@@ -1,6 +1,7 @@
 import { Accordion as Kobalte } from "@kobalte/core/accordion"
-import { splitProps } from "solid-js"
+import { Accessor, createContext, splitProps, useContext } from "solid-js"
 import type { ComponentProps, ParentProps } from "solid-js"
+import { MorphChevron } from "./morph-chevron"
 
 export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
 export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
@@ -8,6 +9,8 @@ export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Head
 export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
 export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
 
+const AccordionItemContext = createContext<Accessor<boolean>>()
+
 function AccordionRoot(props: AccordionProps) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
@@ -22,17 +25,19 @@ function AccordionRoot(props: AccordionProps) {
   )
 }
 
-function AccordionItem(props: AccordionItemProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
+function AccordionItem(props: AccordionItemProps & { expanded?: boolean }) {
+  const [split, rest] = splitProps(props, ["class", "classList", "expanded"])
   return (
-    <Kobalte.Item
-      {...rest}
-      data-slot="accordion-item"
-      classList={{
-        ...(split.classList ?? {}),
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
+    <AccordionItemContext.Provider value={() => split.expanded ?? false}>
+      <Kobalte.Item
+        {...rest}
+        data-slot="accordion-item"
+        classList={{
+          ...(split.classList ?? {}),
+          [split.class ?? ""]: !!split.class,
+        }}
+      />
+    </AccordionItemContext.Provider>
   )
 }
 
@@ -84,9 +89,25 @@ function AccordionContent(props: ParentProps<AccordionContentProps>) {
   )
 }
 
+export interface AccordionArrowProps extends ComponentProps<"div"> {
+  expanded?: boolean
+}
+
+function AccordionArrow(props: AccordionArrowProps = {}) {
+  const [local, rest] = splitProps(props, ["expanded"])
+  const contextExpanded = useContext(AccordionItemContext)
+  const isExpanded = () => local.expanded ?? contextExpanded?.() ?? false
+  return (
+    <div data-slot="accordion-arrow" {...rest}>
+      <MorphChevron expanded={isExpanded()} />
+    </div>
+  )
+}
+
 export const Accordion = Object.assign(AccordionRoot, {
   Item: AccordionItem,
   Header: AccordionHeader,
   Trigger: AccordionTrigger,
   Content: AccordionContent,
+  Arrow: AccordionArrow,
 })