Accordion

1'use client';
2import {
3  motion,
4  AnimatePresence,
5  Transition,
6  Variants,
7  Variant,
8  MotionConfig,
9} from 'motion/react';
10import { cn } from '@/lib/utils';
11import React, { createContext, useContext, useState, ReactNode } from 'react';
12 
13export type AccordionContextType = {
14  expandedValue: React.Key | null;
15  toggleItem: (value: React.Key) => void;
16  variants?: { expanded: Variant; collapsed: Variant };
17};
18 
19const AccordionContext = createContext<AccordionContextType | undefined>(
20  undefined
21);
22 
23function useAccordion() {
24  const context = useContext(AccordionContext);
25  if (!context) {
26    throw new Error('useAccordion must be used within an AccordionProvider');
27  }
28  return context;
29}
30 
31export type AccordionProviderProps = {
32  children: ReactNode;
33  variants?: { expanded: Variant; collapsed: Variant };
34  expandedValue?: React.Key | null;
35  onValueChange?: (value: React.Key | null) => void;
36};
37 
38function AccordionProvider({
39  children,
40  variants,
41  expandedValue: externalExpandedValue,
42  onValueChange,
43}: AccordionProviderProps) {
44  const [internalExpandedValue, setInternalExpandedValue] =
45    useState<React.Key | null>(null);
46 
47  const expandedValue =
48    externalExpandedValue !== undefined
49      ? externalExpandedValue
50      : internalExpandedValue;
51 
52  const toggleItem = (value: React.Key) => {
53    const newValue = expandedValue === value ? null : value;
54    if (onValueChange) {
55      onValueChange(newValue);
56    } else {
57      setInternalExpandedValue(newValue);
58    }
59  };
60 
61  return (
62    <AccordionContext.Provider value={{ expandedValue, toggleItem, variants }}>
63      {children}
64    </AccordionContext.Provider>
65  );
66}
67 
68export type AccordionProps = {
69  children: ReactNode;
70  className?: string;
71  transition?: Transition;
72  variants?: { expanded: Variant; collapsed: Variant };
73  expandedValue?: React.Key | null;
74  onValueChange?: (value: React.Key | null) => void;
75};
76 
77function Accordion({
78  children,
79  className,
80  transition,
81  variants,
82  expandedValue,
83  onValueChange,
84}: AccordionProps) {
85  return (
86    <MotionConfig transition={transition}>
87      <div className={cn('relative', className)} aria-orientation='vertical'>
88        <AccordionProvider
89          variants={variants}
90          expandedValue={expandedValue}
91          onValueChange={onValueChange}
92        >
93          {children}
94        </AccordionProvider>
95      </div>
96    </MotionConfig>
97  );
98}
99 
100export type AccordionItemProps = {
101  value: React.Key;
102  children: ReactNode;
103// … truncated