Accordion

1'use client';
2 
3import * as AccordionPrimitive from '@radix-ui/react-accordion';
4import { ChevronDown } from 'lucide-react';
5import { ComponentProps } from 'react';
6 
7import { cn } from '@/lib/utils';
8 
9/*
10 * UX4G accordion:
11 * - item: border-top/bottom neutral-200, first no top, last no bottom
12 * - trigger padding: 1rem 1.25rem, font-size 1rem
13 * - open: border primary + shadow-focus-primary, rounded
14 * - focus: same as open (primary border + focus shadow)
15 * - body padding: 1rem 1.25rem
16 * - chevron: 1.25rem, rotates 180deg when open
17 */
18 
19/** Accordion root component. */
20function Accordion({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Root>) {
21  return <AccordionPrimitive.Root className={cn('w-full', className)} {...props} />;
22}
23 
24/** Single collapsible accordion item. */
25function AccordionItem({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>) {
26  return (
27    <AccordionPrimitive.Item
28      className={cn(
29        'border-t border-b border-neutral-200 first:border-t-0 last:border-b-0',
30        className,
31      )}
32      {...props}
33    />
34  );
35}
36 
37/** Clickable trigger that toggles an accordion item. */
38function AccordionTrigger({
39  className,
40  children,
41  ...props
42}: ComponentProps<typeof AccordionPrimitive.Trigger>) {
43  return (
44    <AccordionPrimitive.Header className='flex'>
45      <AccordionPrimitive.Trigger
46        className={cn(
47          'text-neutral flex flex-1 items-center justify-between px-5 py-4 text-base transition-all',
48          'focus-visible:border-primary focus-visible:shadow-focus-primary focus-visible:z-3 focus-visible:rounded-lg focus-visible:border focus-visible:outline-none',
49          'data-[state=open]:border-primary data-[state=open]:shadow-focus-primary data-[state=open]:rounded-lg data-[state=open]:border',
50          '[&[data-state=open]>svg]:rotate-180',
51          className,
52        )}
53        {...props}
54      >
55        {children}
56        <ChevronDown className='size-5 shrink-0 text-neutral-500 transition-transform duration-200' />
57      </AccordionPrimitive.Trigger>
58    </AccordionPrimitive.Header>
59  );
60}
61 
62/** Collapsible content panel for an accordion item. */
63function AccordionContent({
64  className,
65  children,
66  ...props
67}: ComponentProps<typeof AccordionPrimitive.Content>) {
68  return (
69    <AccordionPrimitive.Content
70      className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
71      {...props}
72    >
73// … truncated