"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const rem = require("../../../core/utils/units-converters/rem.cjs");
require("clsx");
const useProps = require("../../../core/MantineProvider/use-props/use-props.cjs");
const ColorSlider = require("../ColorSlider/ColorSlider.cjs");
const parsers = require("../converters/parsers.cjs");
const defaultProps = {};
const AlphaSlider = React.forwardRef((props, ref) => {
  const { value, onChange, onChangeEnd, color, ...others } = useProps.useProps(
    "AlphaSlider",
    defaultProps,
    props
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    ColorSlider.ColorSlider,
    {
      ...others,
      ref,
      value,
      onChange: (val) => onChange == null ? void 0 : onChange(parsers.round(val, 2)),
      onChangeEnd: (val) => onChangeEnd == null ? void 0 : onChangeEnd(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: `${rem.rem(8)} ${rem.rem(8)}`,
          backgroundPosition: `0 0, 0 ${rem.rem(4)}, ${rem.rem(4)} ${rem.rem(-4)}, ${rem.rem(-4)} 0`
        },
        {
          backgroundImage: `linear-gradient(90deg, transparent, ${color})`
        },
        {
          boxShadow: `rgba(0, 0, 0, .1) 0 0 0 ${rem.rem(1)} inset, rgb(0, 0, 0, .15) 0 0 ${rem.rem(
            4
          )} inset`
        }
      ]
    }
  );
});
AlphaSlider.displayName = "@mantine/core/AlphaSlider";
exports.AlphaSlider = AlphaSlider;
