"use client";
const require_rem = require("../../../core/utils/units-converters/rem.cjs");
const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_Box = require("../../../core/Box/Box.cjs");
const require_ColorPicker_context = require("../ColorPicker.context.cjs");
const require_Thumb = require("../Thumb/Thumb.cjs");
const require_ColorPicker_module = require("../ColorPicker.module.cjs");
let react = require("react");
let _mantine_hooks = require("@mantine/hooks");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/ColorPicker/ColorSlider/ColorSlider.tsx
const ColorSlider = require_factory.factory((_props) => {
	const props = require_use_props.useProps("ColorSlider", null, _props);
	const { classNames, className, style, styles, unstyled, vars, onChange, onChangeEnd, maxValue, round, size = "md", focusable = true, value, overlays, thumbColor = "transparent", onScrubStart, onScrubEnd, __staticSelector = "ColorPicker", attributes, ref, ...others } = props;
	const _getStyles = require_use_styles.useStyles({
		name: __staticSelector,
		classes: require_ColorPicker_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		rootSelector: "slider"
	});
	const getStyles = (0, react.use)(require_ColorPicker_context.ColorPickerContext)?.getStyles || _getStyles;
	const theme = require_MantineThemeProvider.useMantineTheme();
	const [position, setPosition] = (0, react.useState)({
		y: 0,
		x: value / maxValue
	});
	const positionRef = (0, react.useRef)(position);
	const getChangeValue = (val) => round ? Math.round(val * maxValue) : val * maxValue;
	const { ref: sliderRef } = (0, _mantine_hooks.useMove)(({ x, y }) => {
		positionRef.current = {
			x,
			y
		};
		onChange?.(getChangeValue(x));
	}, {
		onScrubEnd: () => {
			const { x } = positionRef.current;
			onChangeEnd?.(getChangeValue(x));
			onScrubEnd?.();
		},
		onScrubStart
	});
	(0, _mantine_hooks.useDidUpdate)(() => {
		setPosition({
			y: 0,
			x: value / maxValue
		});
	}, [value]);
	const handleArrow = (event, pos) => {
		event.preventDefault();
		const _position = (0, _mantine_hooks.clampUseMovePosition)(pos);
		onChange?.(getChangeValue(_position.x));
		onChangeEnd?.(getChangeValue(_position.x));
	};
	const handleKeyDown = (event) => {
		switch (event.key) {
			case "ArrowRight":
				handleArrow(event, {
					x: position.x + .05,
					y: position.y
				});
				break;
			case "ArrowLeft":
				handleArrow(event, {
					x: position.x - .05,
					y: position.y
				});
				break;
		}
	};
	const layers = overlays.map((overlay, index) => /* @__PURE__ */ (0, react.createElement)("div", {
		...getStyles("sliderOverlay"),
		style: overlay,
		key: index
	}));
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
		...others,
		ref: (0, _mantine_hooks.useMergedRef)(sliderRef, ref),
		...getStyles("slider"),
		size,
		role: "slider",
		"aria-valuenow": value,
		"aria-valuemax": maxValue,
		"aria-valuemin": 0,
		tabIndex: focusable ? 0 : -1,
		onKeyDown: handleKeyDown,
		"data-focus-ring": theme.focusRing,
		__vars: { "--cp-thumb-size": `var(--cp-thumb-size-${size})` },
		children: [layers, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Thumb.Thumb, {
			position,
			...getStyles("thumb", { style: {
				top: require_rem.rem(1),
				background: thumbColor
			} })
		})]
	});
});
ColorSlider.displayName = "@mantine/core/ColorSlider";
ColorSlider.classes = require_ColorPicker_module.default;
//#endregion
exports.ColorSlider = ColorSlider;

//# sourceMappingURL=ColorSlider.cjs.map