Accordion

1"use client";
2
3import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
4
5import { cn } from "@/lib/utils";
6import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
7
8function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
9  return (
10    <AccordionPrimitive.Root
11      data-slot="accordion"
12      className={cn("flex w-full flex-col", className)}
13      {...props}
14    />
15  );
16}
17
18function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
19  return (
20    <AccordionPrimitive.Item
21      data-slot="accordion-item"
22      className={cn("not-last:border-b border-border", className)}
23      {...props}
24    />
25  );
26}
27
28function AccordionTrigger({
29  className,
30  children,
31  ...props
32}: AccordionPrimitive.Trigger.Props) {
33  return (
34    <AccordionPrimitive.Header className="flex">
35      <AccordionPrimitive.Trigger
36        data-slot="accordion-trigger"
37        className={cn(
38          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-3 text-left text-base font-semibold transition-all outline-none focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 aria-expanded:text-primary hover:text-primary",
39          className
40        )}
41        {...props}
42      >
43        {children}
44        <ChevronDownIcon
45          data-slot="accordion-trigger-icon"
46          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
47        />
48        <ChevronUpIcon
49          data-slot="accordion-trigger-icon"
50          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
51        />
52      </AccordionPrimitive.Trigger>
53    </AccordionPrimitive.Header>
54  );
55}
56
57function AccordionContent({
58  className,
59  children,
60  ...props
61}: AccordionPrimitive.Panel.Props) {
62  return (
63    <AccordionPrimitive.Panel
64      data-slot="accordion-content"
65      className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-base"
66      {...props}
67    >
68      <div
69        className={cn(
70// … truncated