/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-b859c78 | Cube Dev Team */
import { __Slider } from "./Slider.js";
import { forwardRef, useCallback, useMemo, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/fields/Slider/HueSlider.tsx
const HUE_STOPS = [
	0,
	60,
	120,
	180,
	240,
	300,
	359
];
const HUE_SATURATION = 80;
const HUE_LIGHTNESS = 50;
const HUE_GRADIENT = HUE_STOPS.map((h) => `okhsl(${h} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`).join(", ");
const horizontalTrackStyles = {
	image: `linear-gradient(to right, ${HUE_GRADIENT})`,
	Fill: false
};
const verticalTrackStyles = {
	image: `linear-gradient(to top, ${HUE_GRADIENT})`,
	Fill: false
};
function HueSlider(props, ref) {
	const { value, defaultValue = 0, onChange, orientation = "horizontal", thumbTokens: userThumbTokens, thumbStyles: userThumbStyles, trackStyles: userTrackStyles, ...rest } = props;
	const [internalValue, setInternalValue] = useState(defaultValue);
	const currentHue = value ?? internalValue;
	const handleChange = useCallback((newValue) => {
		if (value === void 0) setInternalValue(newValue);
		onChange?.(newValue);
	}, [value, onChange]);
	const thumbTokens = useMemo(() => ({
		"#slider-thumb": `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS}%)`,
		"#slider-thumb-hovered": `okhsl(${currentHue} ${HUE_SATURATION}% ${HUE_LIGHTNESS - 10}%)`,
		...userThumbTokens
	}), [currentHue, userThumbTokens]);
	return /* @__PURE__ */ jsx(__Slider, {
		ref,
		value,
		defaultValue,
		orientation,
		minValue: 0,
		maxValue: 359,
		step: 1,
		thumbStyles: useMemo(() => ({
			outline: {
				"": "1bw #slider-thumb-hovered.0",
				focused: "1bw #slider-thumb-hovered"
			},
			...userThumbStyles
		}), [userThumbStyles]),
		trackStyles: useMemo(() => ({
			...orientation === "vertical" ? verticalTrackStyles : horizontalTrackStyles,
			...userTrackStyles
		}), [orientation, userTrackStyles]),
		thumbTokens,
		onChange: handleChange,
		...rest
	});
}
const _HueSlider = forwardRef(HueSlider);
const __HueSlider = Object.assign(_HueSlider, {
	cubeInputType: "Number",
	displayName: "HueSlider"
});

//#endregion
export { __HueSlider };
//# sourceMappingURL=HueSlider.js.map