"use client";
import { rem } from "../../../core/utils/units-converters/rem.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { ColorSlider } from "../ColorSlider/ColorSlider.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ColorPicker/HueSlider/HueSlider.tsx
const defaultProps = { __staticSelector: "HueSlider" };
const HueSlider = factory((props) => {
	const { value, onChange, onChangeEnd, color, ...others } = useProps("HueSlider", defaultProps, props);
	return /* @__PURE__ */ jsx(ColorSlider, {
		...others,
		value,
		onChange,
		onChangeEnd,
		maxValue: 360,
		thumbColor: `hsl(${value}, 100%, 50%)`,
		round: true,
		"data-hue": true,
		overlays: [{ backgroundImage: "linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(170,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))" }, { boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(4)} inset` }]
	});
});
HueSlider.displayName = "@mantine/core/HueSlider";
HueSlider.classes = ColorSlider.classes;
//#endregion
export { HueSlider };

//# sourceMappingURL=HueSlider.mjs.map