feat(accordion): split props

packages/components/accordion/src/Accordion.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it } from 'vitest'
 
@@ -40,7 +40,9 @@ describe('Accordion', () => {
     await user.click(screen.getByRole('button', { name: 'Second trigger' }))
 
     // Then first panel has been closed and second panel has been opened
-    expect(screen.getByText('First panel')).not.toBeVisible()
-    expect(screen.getByText('Second panel')).toBeVisible()
+    await waitFor(() => {
+      expect(screen.getByText('First panel')).not.toBeVisible()
+      expect(screen.getByText('Second panel')).toBeVisible()
+    })
   })
 })

packages/components/accordion/src/AccordionItemContent.tsx

@@ -1,4 +1,5 @@
 import { Collapsible } from '@spark-ui/collapsible'
+import { createSplitProps } from '@spark-ui/internal-utils'
 import { mergeProps } from '@zag-js/react'
 import { cx } from 'class-variance-authority'
 import { type ComponentPropsWithoutRef, forwardRef } from 'react'
@@ -10,21 +11,33 @@ export interface AccordionItemContentProps extends ComponentPropsWithoutRef<'div
   asChild?: boolean
 }
 
+const splitVisibilityProps = createSplitProps<{
+  hidden?: boolean
+  'data-state'?: string
+}>()
+
 export const ItemContent = forwardRef<HTMLDivElement, AccordionItemContentProps>(
   ({ asChild = false, className, children, ...props }, ref) => {
     const accordion = useAccordionContext()
     const accordionItem = useAccordionItemContext()
 
     const localProps = {
-      className: cx('p-lg text-body-1 text-on-surface', className),
+      className: cx(
+        'p-lg duration-50 transition-all text-body-1 text-on-surface',
+        'data-[state=closed]:py-none',
+        className
+      ),
       asChild,
       ...props,
     }
     const contentProps = accordion.getItemContentProps({
       value: accordionItem.value,
       ...(accordionItem.disabled && { disabled: accordionItem.disabled }),
     })
-    const mergedProps = mergeProps(contentProps, localProps)
+
+    const [, itemContentProps] = splitVisibilityProps(contentProps, ['hidden', 'data-state'])
+
+    const mergedProps = mergeProps(itemContentProps, localProps)
 
     return (
       <Collapsible.Content ref={ref} data-spark-component="accordion-item-content" {...mergedProps}>