Accordion

1"use client";
2 
3import * as React from "react";
4import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
5import { AnimatePresence, motion } from "motion/react";
6import { ChevronDownIcon } from "lucide-react";
7 
8import { getStrictContext } from "@/registry/optics/lib/get-strict-context";
9import { useControlledState } from "@/registry/optics/hooks/use-controlled-state";
10import { cn } from "@/registry/optics/lib/utils";
11 
12// --- Internal Primitive Logic ---
13 
14const [AccordionProvider, useAccordion] = getStrictContext("AccordionContext");
15 
16const [AccordionItemProvider, useAccordionItem] = getStrictContext(
17	"AccordionItemContext",
18);
19 
20function PrimitiveAccordion({ collapsible = false, ...props } = {}) {
21	const [value, setValue] = useControlledState({
22		value: props?.value,
23		defaultValue: props?.defaultValue,
24		onChange: props?.onValueChange,
25	});
26 
27	return (
28		<AccordionProvider value={{ value, setValue }}>
29			<BaseAccordion.Root
30				data-slot="accordion"
31				{...props}
32				onValueChange={setValue}
33			/>
34		</AccordionProvider>
35	);
36}
37 
38function PrimitiveAccordionItem(props = {}) {
39	const { value } = useAccordion();
40	const [isOpen, setIsOpen] = React.useState(
41		value?.includes(props?.value) ?? false,
42	);
43 
44	React.useEffect(() => {
45		setIsOpen(value?.includes(props?.value) ?? false);
46	}, [value, props?.value]);
47 
48	return (
49		<AccordionItemProvider value={{ isOpen, setIsOpen }}>
50			<BaseAccordion.Item data-slot="accordion-item" {...props} />
51		</AccordionItemProvider>
52	);
53}
54 
55function PrimitiveAccordionHeader(props = {}) {
56	return <BaseAccordion.Header data-slot="accordion-header" {...props} />;
57}
58 
59function PrimitiveAccordionTrigger(props = {}) {
60	return <BaseAccordion.Trigger data-slot="accordion-trigger" {...props} />;
61}
62 
63function PrimitiveAccordionPanel({
64	transition = { duration: 0.35, ease: "easeInOut" },
65	hiddenUntilFound,
66	keepRendered = false,
67	...props
68} = {}) {
69	const { isOpen } = useAccordionItem();
70 
71	return (
72		<AnimatePresence>
73			{keepRendered ? (
74				<BaseAccordion.Panel
75					hidden={false}
76					hiddenUntilFound={hiddenUntilFound}
77					keepMounted
78					render={
79						<motion.div
80							key="accordion-panel"
81							data-slot="accordion-panel"
82							initial={{ height: 0, opacity: 0, "--mask-stop": "0%", y: 20 }}
83							animate={
84								isOpen
85									? { height: "auto", opacity: 1, "--mask-stop": "100%", y: 0 }
86									: { height: 0, opacity: 0, "--mask-stop": "0%", y: 20 }
87							}
88							transition={transition}
89							style={{
90// … truncated