"use client";
const require_rem = require("../../../core/utils/units-converters/rem.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_factory = require("../../../core/factory/factory.cjs");
const require_ColorSlider = require("../ColorSlider/ColorSlider.cjs");
const require_parsers = require("../converters/parsers.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx
const defaultProps = { __staticSelector: "AlphaSlider" };
const AlphaSlider = require_factory.factory((props) => {
	const { value, onChange, onChangeEnd, color, ...others } = require_use_props.useProps("AlphaSlider", defaultProps, props);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ColorSlider.ColorSlider, {
		...others,
		value,
		onChange: (val) => onChange?.(require_parsers.round(val, 2)),
		onChangeEnd: (val) => onChangeEnd?.(require_parsers.round(val, 2)),
		maxValue: 1,
		round: false,
		"data-alpha": true,
		overlays: [
			{
				backgroundImage: "linear-gradient(45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(-45deg, var(--slider-checkers) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--slider-checkers) 75%), linear-gradient(-45deg, var(--mantine-color-body) 75%, var(--slider-checkers) 75%)",
				backgroundSize: `${require_rem.rem(8)} ${require_rem.rem(8)}`,
				backgroundPosition: `0 0, 0 ${require_rem.rem(4)}, ${require_rem.rem(4)} ${require_rem.rem(-4)}, ${require_rem.rem(-4)} 0`
			},
			{ backgroundImage: `linear-gradient(90deg, transparent, ${color})` },
			{ boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${require_rem.rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${require_rem.rem(4)} inset` }
		]
	});
});
AlphaSlider.displayName = "@mantine/core/AlphaSlider";
AlphaSlider.classes = require_ColorSlider.ColorSlider.classes;
//#endregion
exports.AlphaSlider = AlphaSlider;

//# sourceMappingURL=AlphaSlider.cjs.map