Disclosure

1'use client';
2import * as React from 'react';
3import {
4  AnimatePresence,
5  motion,
6  MotionConfig,
7  Transition,
8  Variant,
9  Variants,
10} from 'motion/react';
11import { createContext, useContext, useState, useId, useEffect } from 'react';
12import { cn } from '@/lib/utils';
13 
14export type DisclosureContextType = {
15  open: boolean;
16  toggle: () => void;
17  variants?: { expanded: Variant; collapsed: Variant };
18};
19 
20const DisclosureContext = createContext<DisclosureContextType | undefined>(
21  undefined
22);
23 
24export type DisclosureProviderProps = {
25  children: React.ReactNode;
26  open: boolean;
27  onOpenChange?: (open: boolean) => void;
28  variants?: { expanded: Variant; collapsed: Variant };
29};
30 
31function DisclosureProvider({
32  children,
33  open: openProp,
34  onOpenChange,
35  variants,
36}: DisclosureProviderProps) {
37  const [internalOpenValue, setInternalOpenValue] = useState<boolean>(openProp);
38 
39  useEffect(() => {
40    setInternalOpenValue(openProp);
41  }, [openProp]);
42 
43  const toggle = () => {
44    const newOpen = !internalOpenValue;
45    setInternalOpenValue(newOpen);
46    if (onOpenChange) {
47      onOpenChange(newOpen);
48    }
49  };
50 
51  return (
52    <DisclosureContext.Provider
53      value={{
54        open: internalOpenValue,
55        toggle,
56        variants,
57      }}
58    >
59      {children}
60    </DisclosureContext.Provider>
61  );
62}
63 
64function useDisclosure() {
65  const context = useContext(DisclosureContext);
66  if (!context) {
67    throw new Error('useDisclosure must be used within a DisclosureProvider');
68  }
69  return context;
70}
71 
72export type DisclosureProps = {
73  open?: boolean;
74  onOpenChange?: (open: boolean) => void;
75  children: React.ReactNode;
76  className?: string;
77  variants?: { expanded: Variant; collapsed: Variant };
78  transition?: Transition;
79};
80 
81export function Disclosure({
82  open: openProp = false,
83  onOpenChange,
84  children,
85  className,
86  transition,
87  variants,
88}: DisclosureProps) {
89  return (
90    <MotionConfig transition={transition}>
91      <div className={className}>
92        <DisclosureProvider
93          open={openProp}
94          onOpenChange={onOpenChange}
95          variants={variants}
96        >
97          {React.Children.toArray(children)[0]}
98          {React.Children.toArray(children)[1]}
99        </DisclosureProvider>
100      </div>
101    </MotionConfig>
102  );
103}
104 
105export function DisclosureTrigger({
106  children,
107  className,
108}: {
109  children: React.ReactNode;
110  className?: string;
111}) {
112  const { toggle, open } = useDisclosure();
113 
114  return (
115    <>
116// … truncated