"use client";
import { rem } from "../../../core/utils/units-converters/rem.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { factory } from "../../../core/factory/factory.mjs";
import { ColorSlider } from "../ColorSlider/ColorSlider.mjs";
import { round } from "../converters/parsers.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/ColorPicker/AlphaSlider/AlphaSlider.tsx
const defaultProps = { __staticSelector: "AlphaSlider" };
const AlphaSlider = factory((props) => {
	const { value, onChange, onChangeEnd, color, ...others } = useProps("AlphaSlider", defaultProps, props);
	return /* @__PURE__ */ jsx(ColorSlider, {
		...others,
		value,
		onChange: (val) => onChange?.(round(val, 2)),
		onChangeEnd: (val) => onChangeEnd?.(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: `${rem(8)} ${rem(8)}`,
				backgroundPosition: `0 0, 0 ${rem(4)}, ${rem(4)} ${rem(-4)}, ${rem(-4)} 0`
			},
			{ backgroundImage: `linear-gradient(90deg, transparent, ${color})` },
			{ boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem(4)} inset` }
		]
	});
});
AlphaSlider.displayName = "@mantine/core/AlphaSlider";
AlphaSlider.classes = ColorSlider.classes;
//#endregion
export { AlphaSlider };

//# sourceMappingURL=AlphaSlider.mjs.map