Accordion

1'use client';
2 
3import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
4import { cva } from 'class-variance-authority';
5import * as React from 'react';
6 
7import { Icon } from '@/components/ui/icon';
8import { IconShell } from '@/components/ui/icon-shell';
9import { cn } from '@/lib/utils';
10 
11type AccordionSize = 'default' | 'lg';
12type AccordionExpandAlign = 'left' | 'right';
13 
14// Two contexts bridge values to consumer-composed descendants (the trigger/icon)
15// that a prop can't reach: root-level config (size) and per-item state (disabled).
16// IconShell owns the size→dimensions and disabled→opacity mappings; the accordion
17// just says which. Layout it owns (padding, gap, typography) stays in CSS.
18const AccordionSizeContext = React.createContext<AccordionSize>('default');
19const AccordionItemContext = React.createContext<{ disabled: boolean }>({
20  disabled: false,
21});
22 
23const accordionItemVariants = cva(['group/accordion-item flex flex-col']);
24 
25const accordionTriggerVariants = cva([
26  'group/accordion-trigger relative flex w-full flex-1 items-center outline-none',
27  'focus-visible:ring-stroke-status-focus focus-visible:ring-2',
28  'cursor-pointer text-left text-fg-secondary transition-colors duration-200 ease-out',
29  'group-data-open/accordion-item:text-fg-primary',
30  'group-data-disabled/accordion-item:cursor-not-allowed group-data-disabled/accordion-item:text-fg-disabled',
31  'group-data-[expand-align=left]/accordion:px-1',
32  'group-data-[expand-align=right]/accordion:pr-1',
33  'group-data-[expand-align=left]/accordion:group-data-[size=default]/accordion:gap-2',
34  'group-data-[expand-align=left]/accordion:group-data-[size=lg]/accordion:gap-3',
35  'group-data-[expand-align=right]/accordion:group-data-[size=default]/accordion:gap-3',
36  'group-data-[expand-align=right]/accordion:group-data-[size=lg]/accordion:gap-4',
37  'group-data-[size=default]/accordion:py-3 group-data-[size=default]/accordion:headings-h4-regular',
38  'group-data-[size=lg]/accordion:py-4 group-data-[size=lg]/accordion:headings-h3-regular',
39  '**:data-[slot=accordion-trigger-icon]:shrink-0',
40  'group-data-[expand-align=right]/accordion:**:data-[slot=accordion-trigger-icon]:ml-auto',
41  'group-data-[expand-align=left]/accordion:**:data-[slot=accordion-trigger-icon]:order-first',
42]);
43 
44const accordionTriggerIconVariants = cva(['pointer-events-none']);
45 
46const accordionContentPanelVariants = cva([
47  'h-(--accordion-panel-height) overflow-hidden',
48// … truncated