"use client";
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.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_ColorSwatch = require("../ColorSwatch/ColorSwatch.cjs");
const require_ColorPicker_context = require("./ColorPicker.context.cjs");
const require_ColorPicker_module = require("./ColorPicker.module.cjs");
const require_parsers = require("./converters/parsers.cjs");
const require_AlphaSlider = require("./AlphaSlider/AlphaSlider.cjs");
const require_converters = require("./converters/converters.cjs");
const require_HueSlider = require("./HueSlider/HueSlider.cjs");
const require_Saturation = require("./Saturation/Saturation.cjs");
const require_Swatches = require("./Swatches/Swatches.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/ColorPicker.tsx
const defaultProps = {
	swatchesPerRow: 7,
	withPicker: true,
	focusable: true,
	size: "md",
	__staticSelector: "ColorPicker"
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { size, swatchesPerRow }) => ({ wrapper: {
	"--cp-preview-size": require_get_size.getSize(size, "cp-preview-size"),
	"--cp-width": require_get_size.getSize(size, "cp-width"),
	"--cp-body-spacing": require_get_size.getSpacing(size),
	"--cp-swatch-size": `${100 / swatchesPerRow}%`,
	"--cp-thumb-size": require_get_size.getSize(size, "cp-thumb-size"),
	"--cp-saturation-height": require_get_size.getSize(size, "cp-saturation-height")
} }));
const ColorPicker = require_factory.factory((_props) => {
	const props = require_use_props.useProps("ColorPicker", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, format = "hex", value, defaultValue, onChange, onChangeEnd, withPicker, size, saturationLabel, hueLabel, alphaLabel, focusable, swatches, swatchesPerRow, fullWidth, onColorSwatchClick, __staticSelector, mod, attributes, name, hiddenInputProps, ...others } = props;
	const getStyles = require_use_styles.useStyles({
		name: __staticSelector,
		props,
		classes: require_ColorPicker_module.default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		rootSelector: "wrapper",
		vars,
		varsResolver
	});
	const formatRef = (0, react.useRef)(format || "hex");
	const valueRef = (0, react.useRef)("");
	const scrubTimeoutRef = (0, react.useRef)(-1);
	const isScrubbingRef = (0, react.useRef)(false);
	const withAlpha = format === "hexa" || format === "rgba" || format === "hsla";
	const [_value, setValue, controlled] = (0, _mantine_hooks.useUncontrolled)({
		value,
		defaultValue,
		finalValue: "#FFFFFF",
		onChange
	});
	const [parsed, setParsed] = (0, react.useState)(require_parsers.parseColor(_value));
	const startScrubbing = () => {
		window.clearTimeout(scrubTimeoutRef.current);
		isScrubbingRef.current = true;
	};
	const stopScrubbing = () => {
		window.clearTimeout(scrubTimeoutRef.current);
		scrubTimeoutRef.current = window.setTimeout(() => {
			isScrubbingRef.current = false;
		}, 200);
	};
	const handleChange = (color) => {
		setParsed((current) => {
			const next = {
				...current,
				...color
			};
			valueRef.current = require_converters.convertHsvaTo(formatRef.current, next);
			return next;
		});
		setValue(valueRef.current);
	};
	(0, _mantine_hooks.useDidUpdate)(() => {
		if (typeof value === "string" && require_parsers.isColorValid(value) && !isScrubbingRef.current) setParsed(require_parsers.parseColor(value));
	}, [value]);
	(0, _mantine_hooks.useDidUpdate)(() => {
		formatRef.current = format || "hex";
		setValue(require_converters.convertHsvaTo(formatRef.current, parsed));
	}, [format]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorPicker_context.ColorPickerContext, {
		value: {
			getStyles,
			unstyled
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
			...getStyles("wrapper"),
			size,
			mod: [{ "full-width": fullWidth }, mod],
			...others,
			children: [
				name && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
					type: "hidden",
					name,
					value: _value,
					...hiddenInputProps
				}),
				withPicker && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Saturation.Saturation, {
					value: parsed,
					onChange: handleChange,
					onChangeEnd: ({ s, v }) => onChangeEnd?.(require_converters.convertHsvaTo(formatRef.current, {
						...parsed,
						s,
						v
					})),
					color: _value,
					size,
					focusable,
					saturationLabel,
					onScrubStart: startScrubbing,
					onScrubEnd: stopScrubbing
				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
					...getStyles("body"),
					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
						...getStyles("sliders"),
						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_HueSlider.HueSlider, {
							value: parsed.h,
							onChange: (h) => handleChange({ h }),
							onChangeEnd: (h) => onChangeEnd?.(require_converters.convertHsvaTo(formatRef.current, {
								...parsed,
								h
							})),
							size,
							focusable,
							"aria-label": hueLabel,
							onScrubStart: startScrubbing,
							onScrubEnd: stopScrubbing
						}), withAlpha && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AlphaSlider.AlphaSlider, {
							value: parsed.a,
							onChange: (a) => handleChange({ a }),
							onChangeEnd: (a) => {
								onChangeEnd?.(require_converters.convertHsvaTo(formatRef.current, {
									...parsed,
									a
								}));
							},
							size,
							color: require_converters.convertHsvaTo("hex", parsed),
							focusable,
							"aria-label": alphaLabel,
							onScrubStart: startScrubbing,
							onScrubEnd: stopScrubbing
						})]
					}), withAlpha && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorSwatch.ColorSwatch, {
						color: _value,
						radius: "sm",
						size: "var(--cp-preview-size)",
						...getStyles("preview")
					})]
				})] }),
				Array.isArray(swatches) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Swatches.Swatches, {
					data: swatches,
					swatchesPerRow,
					focusable,
					setValue,
					value: _value,
					onChangeEnd: (color) => {
						const convertedColor = require_converters.convertHsvaTo(format, require_parsers.parseColor(color));
						onColorSwatchClick?.(convertedColor);
						onChangeEnd?.(convertedColor);
						if (!controlled) setParsed(require_parsers.parseColor(color));
					}
				})
			]
		})
	});
});
ColorPicker.classes = require_ColorPicker_module.default;
ColorPicker.varsResolver = varsResolver;
ColorPicker.displayName = "@mantine/core/ColorPicker";
//#endregion
exports.ColorPicker = ColorPicker;

//# sourceMappingURL=ColorPicker.cjs.map