"use client";
const require_rem = require("../../../core/utils/units-converters/rem.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_ColorSlider = require("../ColorSlider/ColorSlider.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/ColorPicker/HueSlider/HueSlider.tsx
const defaultProps = { __staticSelector: "HueSlider" };
const HueSlider = require_factory.factory((props) => {
	const { value, onChange, onChangeEnd, color, ...others } = require_use_props.useProps("HueSlider", defaultProps, props);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorSlider.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 ${require_rem.rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${require_rem.rem(4)} inset` }]
	});
});
HueSlider.displayName = "@mantine/core/HueSlider";
HueSlider.classes = require_ColorSlider.ColorSlider.classes;
//#endregion
exports.HueSlider = HueSlider;

//# sourceMappingURL=HueSlider.cjs.map