Animated FAQ

1// Built using Hyperiux Vault: https://vault.hyperiux.com
2 
3"use client";
4 
5import React, {
6  createContext,
7  useCallback,
8  useContext,
9  useEffect,
10  useId,
11  useLayoutEffect,
12  useMemo,
13  useRef,
14  useState,
15} from "react";
16 
17import gsap from "gsap";
18import { ChevronDown, ChevronRight } from "lucide-react";
19 
20const useIsomorphicLayoutEffect =
21  typeof window !== "undefined" ? useLayoutEffect : useEffect;
22 
23const FAQContext = createContext(null);
24const FAQGroupContext = createContext(null);
25 
26const useFAQContext = () => {
27  const context = useContext(FAQContext);
28 
29  if (!context) {
30    throw new Error("FAQTitle and FAQContent must be used inside FAQWrapper.");
31  }
32 
33  return context;
34};
35 
36export function FAQGroup({
37  children,
38  allowMultiple = false,
39  defaultOpenItems = [],
40  value,
41  onChange,
42}) {
43  const isControlled = Array.isArray(value);
44  const [internalOpenItems, setInternalOpenItems] = useState(defaultOpenItems);
45 
46  const openItems = isControlled ? value : internalOpenItems;
47 
48  const toggleItem = useCallback(
49    (itemId) => {
50      const next = (() => {
51        const isOpen = openItems.includes(itemId);
52 
53        if (allowMultiple) {
54          return isOpen
55            ? openItems.filter((id) => id !== itemId)
56            : [...openItems, itemId];
57        }
58 
59        return isOpen ? [] : [itemId];
60      })();
61 
62      if (!isControlled) {
63        setInternalOpenItems(next);
64      }
65 
66      onChange?.(next);
67    },
68    [allowMultiple, isControlled, onChange, openItems]
69  );
70 
71  const contextValue = useMemo(
72    () => ({
73      allowMultiple,
74      openItems,
75      toggleItem,
76    }),
77    [allowMultiple, openItems, toggleItem]
78  );
79 
80  return (
81    <FAQGroupContext.Provider value={contextValue}>
82      {children}
83    </FAQGroupContext.Provider>
84  );
85}
86 
87export function FAQWrapper({
88  children,
89  className = "",
90  titleClassName = "",
91  contentClassName = "",
92  iconClassName = "",
93  iconSize = 18,
94  iconStrokeWidth = 2,
95  duration = 0.45,
96  defaultOpen = false,
97  controlledOpen,
98  onToggle,
99  itemId,
100}) {
101  const group = useContext(FAQGroupContext);
102 
103  const generatedId = useId();
104  const resolvedItemId = itemId ?? generatedId;
105 
106  const isStandaloneControlled = typeof controlledOpen === "boolean";
107  const [internalOpen, setInternalOpen] = useState(defaultOpen);
108 
109  const isOpen = group
110    ? group.openItems.includes(resolvedItemId)
111    : isStandaloneControlled
112      ? controlledOpen
113      : internalOpen;
114 
115  const contentOuterRef = useRef(null);
116// … truncated