Collapsible

1"use client";
2 
3import { Collapsible } from "@base-ui/react/collapsible";
4import { cn } from "@/lib/utils";
5import styles from "./collapsible.module.css";
6 
7function CollapsibleRoot({ className, ...props }: Collapsible.Root.Props) {
8  return <Collapsible.Root className={cn(styles.root, className)} {...props} />;
9}
10 
11function CollapsibleTrigger({ className, children, ...props }: Collapsible.Trigger.Props) {
12  return (
13    <Collapsible.Trigger className={cn(styles.trigger, className)} {...props}>
14      {children}
15      <svg aria-hidden="true" className={styles.chevron} fill="none" height="16" viewBox="0 0 24 24" width="16">
16        <path d="m7 15 5 5 5-5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
17        <path d="m7 9 5-5 5 5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
18      </svg>
19    </Collapsible.Trigger>
20  );
21}
22 
23function CollapsiblePanel({ className, ...props }: Collapsible.Panel.Props) {
24  return <Collapsible.Panel className={cn(styles.panel, className)} data-slot="collapsible-panel" {...props} />;
25}
26 
27export { CollapsibleRoot as Collapsible, CollapsiblePanel, CollapsibleTrigger };