Accordion

1"use client";
2 
3import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
4import { DirectionProvider, useDirection } from "@base-ui/react/direction-provider";
5import { mergeProps } from "@base-ui/react/merge-props";
6import * as React from "react";
7 
8import { cn } from "@/lib/utils";
9import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
10 
11type AccordionBaseProps = Omit<
12  AccordionPrimitive.Root.Props<string>,
13  "defaultValue" | "loopFocus" | "multiple" | "onValueChange" | "value"
14> & {
15  asChild?: boolean;
16  children?: React.ReactNode;
17  loop?: boolean;
18  loopFocus?: boolean;
19};
20 
21type AccordionSingleProps = AccordionBaseProps & {
22  collapsible?: boolean;
23  defaultValue?: string;
24  onValueChange?: (value: string, eventDetails: AccordionPrimitive.Root.ChangeEventDetails) => void;
25  type: "single";
26  value?: string;
27};
28 
29type AccordionMultipleProps = AccordionBaseProps & {
30  collapsible?: never;
31  defaultValue?: string[];
32  onValueChange?: (
33    value: string[],
34    eventDetails: AccordionPrimitive.Root.ChangeEventDetails,
35  ) => void;
36  type: "multiple";
37  value?: string[];
38};
39 
40type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
41type AccordionKeyDownHandler = NonNullable<AccordionPrimitive.Root.Props<string>["onKeyDown"]>;
42type RenderProps = React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLElement> };
43type AccordionContentStyle = React.CSSProperties & {
44  "--radix-accordion-content-height"?: string;
45  "--radix-accordion-content-width"?: string;
46};
47 
48const accordionContentCssVariables: AccordionContentStyle = {
49  "--radix-accordion-content-height": "var(--accordion-panel-height)",
50  "--radix-accordion-content-width": "var(--accordion-panel-width)",
51};
52 
53function mergeContentStyle(
54  style: AccordionPrimitive.Panel.Props["style"],
55): AccordionPrimitive.Panel.Props["style"] {
56  if (typeof style === "function") {
57    return (state) => ({ ...accordionContentCssVariables, ...style(state) });
58  }
59 
60  return { ...accordionContentCssVariables, ...style };
61}
62 
63function mergeRefs(...refs: (React.Ref<HTMLElement> | undefined)[]) {
64  return (element: HTMLElement | null) => {
65    refs.forEach((ref) => {
66      if (typeof ref === "function") {
67        ref(element);
68      } else if (ref) {
69        ref.current = element;
70      }
71    });
72  };
73}
74 
75function preserveRadixEventCancellation(
76  child: React.ReactElement<{ [key: string]: unknown; children?: React.ReactNode }>,
77) {
78  const eventProps: Record<string, unknown> = {};
79 
80// … truncated