import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import { rem } from "../../../core/utils/units-converters/rem.mjs";
import "clsx";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { ColorSlider } from "../ColorSlider/ColorSlider.mjs";
const HueSlider = forwardRef((props, ref) => {
  const { value, onChange, onChangeEnd, color, ...others } = useProps("HueSlider", {}, props);
  return /* @__PURE__ */ jsx(
    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(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(
            4
          )} inset`
        }
      ]
    }
  );
});
HueSlider.displayName = "@mantine/core/HueSlider";
export {
  HueSlider
};
