Accordion

1"use client";
2 
3import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
4import { ChevronDownIcon } from "lucide-react";
5 
6import { cn } from "@/lib/utils";
7 
8function Accordion({ ...props }: AccordionPrimitive.Root.Props) {
9  return (
10    <AccordionPrimitive.Root data-slot="accordion" keepMounted {...props} />
11  );
12}
13 
14function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
15  return (
16    <AccordionPrimitive.Item
17      data-slot="accordion-item"
18      className={cn("border-b last:border-b-0", className)}
19      {...props}
20    />
21  );
22}
23 
24function AccordionTrigger({
25  className,
26  children,
27  ...props
28}: AccordionPrimitive.Trigger.Props) {
29  return (
30    <AccordionPrimitive.Header className="flex">
31      <AccordionPrimitive.Trigger
32        data-slot="accordion-trigger"
33        className={cn(
34          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-panel-open]>svg]:rotate-180",
35          className
36        )}
37        {...props}
38      >
39        {children}
40        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
41      </AccordionPrimitive.Trigger>
42    </AccordionPrimitive.Header>
43  );
44}
45 
46function AccordionContent({
47  className,
48  children,
49  ...props
50}: AccordionPrimitive.Panel.Props) {
51  return (
52    <AccordionPrimitive.Panel
53      data-slot="accordion-content"
54      className="data-[closed]:animate-accordion-collapse data-[open]:animate-accordion-expand overflow-hidden text-sm"
55      {...props}
56    >
57      <div className={cn("pt-0 pb-4", className)}>{children}</div>
58    </AccordionPrimitive.Panel>
59  );
60}
61 
62export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };