accordion

1"use client"
2 
3import * as React from "react"
4 
5import { Accordion as AccordionPrimitive } from "@ark-ui/react/accordion"
6import { ChevronDown } from "lucide-react"
7 
8import { cn } from "@/lib/utils"
9 
10const Accordion = AccordionPrimitive.Root
11 
12const AccordionContext = AccordionPrimitive.Context
13 
14const AccordionItem = React.forwardRef<
15  React.ElementRef<typeof AccordionPrimitive.Item>,
16  AccordionPrimitive.ItemProps
17>(({ className, ...props }, ref) => (
18  <AccordionPrimitive.Item
19    ref={ref}
20    className={cn("border-b last:border-b-0", className)}
21    {...props}
22  />
23))
24AccordionItem.displayName = "AccordionItem"
25 
26const AccordionItemContent = React.forwardRef<
27  React.ElementRef<typeof AccordionPrimitive.ItemContent>,
28  AccordionPrimitive.ItemContentProps
29>(({ className, children, ...props }, ref) => (
30  <AccordionPrimitive.ItemContent
31    ref={ref}
32    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
33    {...props}
34  >
35    <div className={cn("pt-0 pb-4", className)}>{children}</div>
36  </AccordionPrimitive.ItemContent>
37))
38AccordionItemContent.displayName = "AccordionItemContent"
39 
40const AccordionItemContext = AccordionPrimitive.ItemContext
41 
42const AccordionItemTrigger = React.forwardRef<
43  React.ElementRef<typeof AccordionPrimitive.ItemTrigger>,
44  AccordionPrimitive.ItemTriggerProps
45>(({ className, children, ...props }, ref) => (
46  <AccordionPrimitive.ItemTrigger
47    ref={ref}
48    className={cn(
49      "flex w-full flex-1 items-center justify-between gap-4 rounded-md py-4 text-left font-semibold text-sm outline-none transition-all hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50",
50      className
51    )}
52    {...props}
53  >
54    {children}
55    <AccordionPrimitive.ItemIndicator className="[&[data-state=open]>svg]:rotate-180">
56      <ChevronDown className="pointer-events-none size-4 shrink-0 opacity-60 transition-transform duration-200" />
57    </AccordionPrimitive.ItemIndicator>
58  </AccordionPrimitive.ItemTrigger>
59))
60AccordionItemTrigger.displayName = "AccordionItemTrigger"
61 
62export {
63  Accordion,
64  AccordionContext,
65  AccordionItem,
66  AccordionItemContent,
67  AccordionItemContext,
68  AccordionItemTrigger,
69}