fumadocs-ui/dist/components/accordion.js

The Radix UI version of Fumadocs UI

'use client';

import { buttonVariants } from "./ui/button.js";
import { Accordion as Accordion$1, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from "./ui/accordion.js";
import { cn } from "@fumadocs/ui/cn";
import { jsx, jsxs } from "react/jsx-runtime";
import { Check, Link } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useCopyButton } from "@fumadocs/ui/hooks/use-copy-button";
import { mergeRefs } from "@fumadocs/ui/merge-refs";

//#region src/components/accordion.tsx
function Accordions({ type = "single", ref, className, defaultValue, ...props }) {
	const rootRef = useRef(null);
	const composedRef = mergeRefs(ref, rootRef);
	const [value, setValue] = useState(() => type === "single" ? defaultValue ?? "" : defaultValue ?? []);
	useEffect(() => {
		const id = window.location.hash.substring(1);
		const element = rootRef.current;
		if (!element || id.length === 0) return;
		const selected = document.getElementById(id);
		if (!selected || !element.contains(selected)) return;
		const value$1 = selected.getAttribute("data-accordion-value");
		if (value$1) setValue((prev) => typeof prev === "string" ? value$1 : [value$1, ...prev]);
	}, []);
	return /* @__PURE__ */ jsx(Accordion$1, {
		type,
		ref: composedRef,
		value,
		onValueChange: setValue,
		collapsible: type === "single" ? true : void 0,
		className: cn("divide-y divide-fd-border overflow-hidden rounded-lg border bg-fd-card", className),
		...props
	});
}
function Accordion({ title, id, value = String(title), children, ...props }) {
	return /* @__PURE__ */ jsxs(AccordionItem, {
		value,
		...props,
		children: [/* @__PURE__ */ jsxs(AccordionHeader, {
			id,
			"data-accordion-value": value,
			children: [/* @__PURE__ */ jsx(AccordionTrigger, { children: title }), id ? /* @__PURE__ */ jsx(CopyButton, { id }) : null]
		}), /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", {
			className: "px-4 pb-2 text-[0.9375rem] prose-no-margin",
			children
		}) })]
	});
}
function CopyButton({ id }) {
	const [checked, onClick] = useCopyButton(() => {
		const url = new URL(window.location.href);
		url.hash = id;
		return navigator.clipboard.writeText(url.toString());
	});
	return /* @__PURE__ */ jsx("button", {
		type: "button",
		"aria-label": "Copy Link",
		className: cn(buttonVariants({
			color: "ghost",
			className: "text-fd-muted-foreground me-2"
		})),
		onClick,
		children: checked ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Link, { className: "size-3.5" })
	});
}

//#endregion
export { Accordion, Accordions };
//# sourceMappingURL=accordion.js.map