"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const rem = require("../../../core/utils/units-converters/rem.cjs");
require("clsx");
const useProps = require("../../../core/MantineProvider/use-props/use-props.cjs");
const ColorSlider = require("../ColorSlider/ColorSlider.cjs");
const HueSlider = React.forwardRef((props, ref) => {
  const { value, onChange, onChangeEnd, color, ...others } = useProps.useProps("HueSlider", {}, props);
  return /* @__PURE__ */ jsxRuntime.jsx(
    ColorSlider.ColorSlider,
    {
      ...others,
      ref,
      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.rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem.rem(
            4
          )} inset`
        }
      ]
    }
  );
});
HueSlider.displayName = "@mantine/core/HueSlider";
exports.HueSlider = HueSlider;
