Collapse

1'use client';
2 
3import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
4import { ComponentProps } from 'react';
5 
6import { cn } from '@/lib/utils';
7 
8/** Collapsible root component. */
9function Collapse(props: ComponentProps<typeof CollapsiblePrimitive.Root>) {
10  return <CollapsiblePrimitive.Root {...props} />;
11}
12 
13/** Collapsible trigger button. */
14function CollapseTrigger(props: ComponentProps<typeof CollapsiblePrimitive.Trigger>) {
15  return <CollapsiblePrimitive.Trigger {...props} />;
16}
17 
18/**
19 * Collapsible content panel.
20 * Uses radix-collapsible-content-height (not the accordion height var) so the
21 * animated height matches the actual content; mismatched vars caused the
22 * trigger to jump on toggle.
23 */
24function CollapseContent({
25  className,
26  ...props
27}: ComponentProps<typeof CollapsiblePrimitive.Content>) {
28  return (
29    <CollapsiblePrimitive.Content
30      className={cn(
31        'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden',
32        className,
33      )}
34      {...props}
35    />
36  );
37}
38 
39export { Collapse, CollapseTrigger, CollapseContent };