@lobehub/ui/es/base-ui/Accordion/atoms.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

"use client";
import { contentVariants, headerVariants, indicatorVariants, itemVariants, rootVariants, styles, triggerVariants } from "./style.mjs";
import { createContext, use, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import { cx } from "antd-style";
import { ChevronDown, ChevronRight, Play } from "lucide-react";
import { Accordion } from "@base-ui/react/accordion";
//#region src/base-ui/Accordion/atoms.tsx
const AccordionContext = createContext({
	hideIndicator: false,
	indicatorPlacement: "start",
	variant: "borderless"
});
const useAccordionContext = () => use(AccordionContext);
const AccordionRoot = ({ children, className, hideIndicator = false, indicatorPlacement = "start", multiple = true, variant = "borderless", ...rest }) => {
	const contextValue = useMemo(() => ({
		hideIndicator,
		indicatorPlacement,
		variant
	}), [
		hideIndicator,
		indicatorPlacement,
		variant
	]);
	return /* @__PURE__ */ jsx(AccordionContext, {
		value: contextValue,
		children: /* @__PURE__ */ jsx(Accordion.Root, {
			className: cx(rootVariants({ variant }), className),
			multiple,
			...rest,
			children
		})
	});
};
AccordionRoot.displayName = "AccordionRoot";
const AccordionItem = ({ className, variant: variantProp, ...rest }) => {
	const ctx = useAccordionContext();
	const variant = variantProp ?? ctx.variant;
	return /* @__PURE__ */ jsx(Accordion.Item, {
		className: cx(itemVariants({ variant }), className),
		...rest
	});
};
AccordionItem.displayName = "AccordionItem";
const AccordionHeader = ({ className, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
	const ctx = useAccordionContext();
	const variant = variantProp ?? ctx.variant;
	const inline = (placementProp ?? ctx.indicatorPlacement) === "inline";
	return /* @__PURE__ */ jsx(Accordion.Header, {
		className: cx(headerVariants({
			inline,
			variant
		}), className),
		...rest
	});
};
AccordionHeader.displayName = "AccordionHeader";
const AccordionTrigger = ({ children, className, hideIndicator: hideIndicatorProp, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
	const ctx = useAccordionContext();
	const variant = variantProp ?? ctx.variant;
	const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;
	const placement = placementProp ?? ctx.indicatorPlacement;
	const indicator = !hideIndicator && /* @__PURE__ */ jsxs("span", {
		className: indicatorVariants({ placement }),
		children: [
			placement === "start" && /* @__PURE__ */ jsx(ChevronRight, { size: 16 }),
			placement === "inline" && /* @__PURE__ */ jsx(Play, {
				fill: "currentColor",
				size: 7,
				strokeWidth: 1
			}),
			placement === "end" && /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
		]
	});
	return /* @__PURE__ */ jsxs(Accordion.Trigger, {
		className: cx(triggerVariants({ variant }), className),
		...rest,
		children: [
			placement === "start" && indicator,
			children,
			placement !== "start" && indicator
		]
	});
};
AccordionTrigger.displayName = "AccordionTrigger";
const AccordionPanel = ({ children, className, contentClassName, contentStyle, hideIndicator: hideIndicatorProp, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
	const ctx = useAccordionContext();
	const variant = variantProp ?? ctx.variant;
	const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;
	const placement = placementProp ?? ctx.indicatorPlacement;
	const indent = !hideIndicator && placement === "start";
	const inline = placement === "inline";
	return /* @__PURE__ */ jsx(Accordion.Panel, {
		className: cx(styles.panel, className),
		...rest,
		children: /* @__PURE__ */ jsx("div", {
			className: cx(contentVariants({
				indent,
				inline,
				variant
			}), contentClassName),
			style: contentStyle,
			children
		})
	});
};
AccordionPanel.displayName = "AccordionPanel";
//#endregion
export { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, styles as accordionStyles, useAccordionContext };

//# sourceMappingURL=atoms.mjs.map