@mantine/core/esm/components/Slider/Marks/Marks.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { Box } from "../../../core/Box/Box.mjs";
import { useSliderContext } from "../Slider.context.mjs";
import { getPosition } from "../utils/get-position/get-position.mjs";
import { isMarkFilled } from "./is-mark-filled.mjs";
import { createElement } from "react";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Slider/Marks/Marks.tsx
function Marks({ marks, min, max, disabled, value, offset, inverted }) {
	const { getStyles } = useSliderContext();
	if (!marks) return null;
	return /* @__PURE__ */ jsx("div", { children: marks.map((mark, index) => {
		if (mark.hidden) return null;
		return /* @__PURE__ */ createElement(Box, {
			...getStyles("markWrapper"),
			__vars: { "--mark-offset": `${getPosition({
				value: mark.value,
				min,
				max
			})}%` },
			key: index
		}, /* @__PURE__ */ jsx(Box, {
			...getStyles("mark"),
			mod: {
				filled: isMarkFilled({
					mark,
					value,
					offset,
					inverted
				}),
				disabled
			}
		}), mark.label && /* @__PURE__ */ jsx("div", {
			...getStyles("markLabel"),
			children: mark.label
		}));
	}) });
}
Marks.displayName = "@mantine/core/SliderMarks";
//#endregion
export { Marks };

//# sourceMappingURL=Marks.mjs.map