accordion

1import * as React from "react"
2import { Accordion as BaseAccordion } from "@base-ui/react/accordion"
3import { ChevronDownIcon } from "lucide-react"
4 
5import { cn } from "@/lib/utils"
6 
7function Accordion({
8	...props
9}: React.ComponentProps<typeof BaseAccordion.Root>) {
10	return <BaseAccordion.Root data-slot="accordion" {...props} />
11}
12 
13function AccordionItem({
14	className,
15	...props
16}: React.ComponentProps<typeof BaseAccordion.Item>) {
17	return (
18		<BaseAccordion.Item
19			data-slot="accordion-item"
20			className={cn("border-b last:border-b-0", className)}
21			{...props}
22		/>
23	)
24}
25 
26function AccordionTrigger({
27	children,
28	className,
29	...props
30}: React.ComponentProps<typeof BaseAccordion.Trigger>) {
31	return (
32		<BaseAccordion.Header className="flex">
33			<BaseAccordion.Trigger
34				data-slot="accordion-trigger"
35				className={cn(
36					"focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-3 text-left text-sm font-medium underline-offset-2 outline-none hover:underline focus-visible:ring-[3px] data-disabled:pointer-events-none data-disabled:opacity-50 data-panel-open:[&_*[data-slot=accordion-icon]]:rotate-180",
37					className
38				)}
39				{...props}
40			>
41				{children}
42				<ChevronDownIcon
43					data-slot="accordion-icon"
44					className="text-muted-foreground size-4 shrink-0 transition-transform duration-200"
45				/>
46			</BaseAccordion.Trigger>
47		</BaseAccordion.Header>
48	)
49}
50 
51function AccordionContent({
52	children,
53	className,
54	...props
55}: React.ComponentProps<typeof BaseAccordion.Panel>) {
56	return (
57		<BaseAccordion.Panel
58			data-slot="accordion-content"
59			className="h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 [&[hidden]:not([hidden='until-found'])]:hidden"
60			{...props}
61		>
62			<div className={cn("pb-2.5", className)}>{children}</div>
63		</BaseAccordion.Panel>
64	)
65}
66 
67export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }