A set of animated accordion components built on top of `@radix-ui/react-accordion`, providing smooth height and opacity transitions using `ResizeObserver` for dynamic content measurement. ## Key Components | Export | Type | Description | |---|---|---| | `SmoothAccordion` | Component | Re-export of `AccordionPrimitive.Root` for convenience | | `SmoothAccordionItem` | `forwardRef` Component | Wrapper around `AccordionPrimitive.Item` with border reset | | `SmoothAccordionTrigger` | `forwardRef` Component | Trigger header with label text and animated `ChevronButton` | | `SmoothAccordionContent` | `forwardRef` Component | Content panel with `ResizeObserver`-driven smooth animation | ### `SmoothAccordionTrigger` Props | Prop | Type | Description | |---|---|---| | `label` | `React.ReactNode` | Content rendered as the accordion header | | `className` | `string?` | Additional CSS classes | ### `SmoothAccordionContent` Animation Uses `ResizeObserver` to measure `scrollHeight` dynamically, animating `max-height` and `opacity` over `0.35s`. Height resets to `0px` after the close transition ends to avoid residual spacing. ## Usage Example ```typescript import { SmoothAccordion, SmoothAccordionItem, SmoothAccordionTrigger, SmoothAccordionContent, } from './smooth-accordion'; export function FAQ() { return ( OpenFrame is a unified AI-driven MSP platform. Mingo AI automates IT support operations across the stack. ); } ``` > **Note:** The `data-state` prop injected by Radix UI controls open/closed animation state. No additional state management is required by the consumer. **Source:** [`smooth-accordion.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/smooth-accordion.tsx)