Accordion

1import * as React from 'react';
2import { ChevronDownIcon } from 'lucide-react';
3 
4import {
5  Accordion as AccordionPrimitive,
6  AccordionItem as AccordionItemPrimitive,
7  AccordionHeader as AccordionHeaderPrimitive,
8  AccordionTrigger as AccordionTriggerPrimitive,
9  AccordionPanel as AccordionPanelPrimitive,
10  type AccordionProps as AccordionPrimitiveProps,
11  type AccordionItemProps as AccordionItemPrimitiveProps,
12  type AccordionTriggerProps as AccordionTriggerPrimitiveProps,
13  type AccordionPanelProps as AccordionPanelPrimitiveProps,
14} from '@/components/animate-ui/primitives/base/accordion';
15import { cn } from '@/lib/utils';
16 
17type AccordionProps = AccordionPrimitiveProps;
18 
19function Accordion(props: AccordionProps) {
20  return <AccordionPrimitive {...props} />;
21}
22 
23type AccordionItemProps = AccordionItemPrimitiveProps;
24 
25function AccordionItem({ className, ...props }: AccordionItemProps) {
26  return (
27    <AccordionItemPrimitive
28      className={cn('border-b last:border-b-0', className)}
29      {...props}
30    />
31  );
32}
33 
34type AccordionTriggerProps = AccordionTriggerPrimitiveProps & {
35  showArrow?: boolean;
36};
37 
38function AccordionTrigger({
39  className,
40  children,
41  showArrow = true,
42  ...props
43}: AccordionTriggerProps) {
44  return (
45    <AccordionHeaderPrimitive className="flex">
46      <AccordionTriggerPrimitive
47        className={cn(
48          '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',
49          className,
50        )}
51        {...props}
52      >
53        {children}
54        {showArrow && (
55          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
56        )}
57      </AccordionTriggerPrimitive>
58    </AccordionHeaderPrimitive>
59  );
60}
61 
62type AccordionPanelProps = AccordionPanelPrimitiveProps & {
63  children: React.ReactNode;
64};
65 
66function AccordionPanel({
67  className,
68  children,
69  ...props
70}: AccordionPanelProps) {
71  return (
72    <AccordionPanelPrimitive {...props}>
73      <div className={cn('text-sm pt-0 pb-4', className)}>{children}</div>
74    </AccordionPanelPrimitive>
75  );
76}
77 
78export {
79  Accordion,
80  AccordionItem,
81  AccordionTrigger,
82  AccordionPanel,
83  type AccordionProps,
84  type AccordionItemProps,
85// … truncated