/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-0d43332 | Cube Dev Team */
import { useSlotProps } from "../../utils/react/Slots.js";
import { useCombinedRefs } from "../../utils/react/useCombinedRefs.js";
import { BASE_STYLES, COLOR_STYLES, OUTER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
import { forwardRef, useRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useSeparator } from "react-aria";

//#region src/components/content/Divider.tsx
const DividerElement = tasty({
	styles: {
		gridArea: "divider",
		display: {
			"": "block",
			text: "grid"
		},
		gridColumns: "1fr auto 1fr",
		placeItems: "center stretch",
		gap: "1x",
		preset: "c1",
		height: {
			"": "1bw 1bw",
			text: "auto"
		},
		fill: {
			"": "#border",
			text: "none"
		},
		border: "0",
		margin: "0",
		Line: {
			height: "1bw 1bw",
			fill: "#border"
		}
	},
	styleProps: [
		...OUTER_STYLES,
		...BASE_STYLES,
		...COLOR_STYLES
	]
});
const Divider = forwardRef(function Divider(props, ref) {
	const { mods, children, styles, ...otherProps } = useSlotProps(props, "divider");
	const elementType = children ? "div" : "hr";
	const combinedRef = useCombinedRefs(ref, useRef(null));
	const { separatorProps } = useSeparator({ elementType });
	return /* @__PURE__ */ jsx(DividerElement, {
		...separatorProps,
		as: elementType,
		mods: {
			text: !!children,
			...mods
		},
		...filterBaseProps(otherProps, { eventProps: true }),
		ref: combinedRef,
		styles,
		children: children && /* @__PURE__ */ jsxs(Fragment$1, { children: [
			/* @__PURE__ */ jsx("div", { "data-element": "Line" }),
			/* @__PURE__ */ jsx("div", { children }),
			/* @__PURE__ */ jsx("div", { "data-element": "Line" })
		] })
	});
});

//#endregion
export { Divider };
//# sourceMappingURL=Divider.js.map