@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 } 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", 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),
			...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, variant: variantProp, ...rest }) => {
	const ctx = useAccordionContext();
	const variant = variantProp ?? ctx.variant;
	return /* @__PURE__ */ jsx(Accordion.Header, {
		className: cx(headerVariants({ 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__ */ jsx("span", {
		className: indicatorVariants({ placement }),
		children: placement === "start" ? /* @__PURE__ */ jsx(ChevronRight, { size: 16 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
	});
	return /* @__PURE__ */ jsxs(Accordion.Trigger, {
		className: cx(triggerVariants({ variant }), className),
		...rest,
		children: [
			placement === "start" && indicator,
			children,
			placement === "end" && 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";
	return /* @__PURE__ */ jsx(Accordion.Panel, {
		className: cx(styles.panel, className),
		...rest,
		children: /* @__PURE__ */ jsx("div", {
			className: cx(contentVariants({
				indent,
				variant
			}), contentClassName),
			style: contentStyle,
			children
		})
	});
};
AccordionPanel.displayName = "AccordionPanel";
//#endregion
export { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, styles as accordionStyles, useAccordionContext };

//# sourceMappingURL=atoms.mjs.map