Accordion

1'use client'
2 
3import {
4  createContext,
5  forwardRef,
6  useCallback,
7  useContext,
8  useId,
9  useMemo,
10  useState,
11  type HTMLAttributes,
12  type ReactNode,
13} from 'react'
14import { useReducedMotion } from 'motion/react'
15import { cn } from '@/lib/utils'
16 
17interface AccordionContextValue {
18  type: 'single' | 'multiple'
19  collapsible: boolean
20  expandedValues: string[]
21  toggle: (value: string) => void
22  reducedMotion: boolean
23}
24 
25const AccordionContext = createContext<AccordionContextValue | null>(null)
26 
27function useAccordionCtx(componentName: string) {
28  const ctx = useContext(AccordionContext)
29  if (!ctx) throw new Error(`${componentName} must be used within <Accordion>`)
30  return ctx
31}
32 
33interface AccordionItemContextValue {
34  value: string
35  isExpanded: boolean
36  disabled: boolean
37  triggerId: string
38  contentId: string
39}
40 
41const AccordionItemContext = createContext<AccordionItemContextValue | null>(null)
42 
43function useAccordionItemCtx(componentName: string) {
44  const ctx = useContext(AccordionItemContext)
45  if (!ctx) throw new Error(`${componentName} must be used within <AccordionItem>`)
46  return ctx
47}
48 
49export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
50  type: 'single' | 'multiple'
51  collapsible?: boolean
52  value?: string | string[]
53  defaultValue?: string | string[]
54  onValueChange?: (value: string | string[]) => void
55  className?: string
56  children?: ReactNode
57}
58 
59export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
60  (
61    {
62      type,
63      collapsible = false,
64      value: valueProp,
65      defaultValue,
66      onValueChange,
67      className,
68      children,
69      ...props
70    },
71    ref,
72  ) => {
73    const isControlled = valueProp !== undefined
74    const reducedMotion = useReducedMotion() ?? false
75 
76    const normalizeValue = useCallback((v: string | string[] | undefined): string[] => {
77      if (v === undefined) return []
78      if (Array.isArray(v)) return v
79      return v ? [v] : []
80    }, [])
81 
82    const [internal, setInternal] = useState<string[]>(() => normalizeValue(defaultValue))
83    const expandedValues = isControlled ? normalizeValue(valueProp) : internal
84 
85    const toggle = useCallback(
86      (itemValue: string) => {
87        const isExpanded = expandedValues.includes(itemValue)
88 
89        let next: string[]
90 
91        if (type === 'single') {
92          if (isExpanded) {
93            next = collapsible ? [] : expandedValues
94          } else {
95            next = [itemValue]
96          }
97// … truncated