import { _ as _slicedToArray } from '../slicedToArray-BB-AwwkK.js';
import React__default, { useState } from 'react';
import Slider from '../slider/index.js';
import Label from '../label/index.js';
import '../extends-C4cduGrv.js';
import '../typeof-CgC7Bq6K.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import 'classnames';
import 'prop-types';
import '@reach/visually-hidden';

function PixelSlider(_ref) {
  var label = _ref.label,
      name = _ref.name,
      value = _ref.value,
      onChange = _ref.onChange,
      _ref$min = _ref.min,
      min = _ref$min === void 0 ? 0 : _ref$min,
      max = _ref.max,
      step = _ref.step,
      _ref$showUnit = _ref.showUnit,
      showUnit = _ref$showUnit === void 0 ? true : _ref$showUnit;

  var _useState = useState(value),
      _useState2 = _slicedToArray(_useState, 2),
      sliderValue = _useState2[0],
      setSliderValue = _useState2[1];

  function handleChange(e) {
    var newValue = Number(e.target.value);
    if (isNaN(newValue)) return;
    setSliderValue(newValue);
    onChange(newValue);
  }

  return /*#__PURE__*/React__default.createElement("div", null, label && /*#__PURE__*/React__default.createElement(Label, {
    className: "mb-1",
    htmlFor: name
  }, label), /*#__PURE__*/React__default.createElement("div", {
    className: "grid grid-cols-3 gap-4"
  }, /*#__PURE__*/React__default.createElement(Slider, {
    type: "range",
    className: "col-span-2",
    value: sliderValue,
    onChange: handleChange,
    min: min,
    max: max,
    step: step
  }), /*#__PURE__*/React__default.createElement("div", {
    className: "w-full relative"
  }, /*#__PURE__*/React__default.createElement("input", {
    id: name,
    name: name,
    className: "block border rounded w-full p-2 border-gray-200 text-gray-700 text-sm focus:outline-blue",
    value: sliderValue,
    onChange: handleChange,
    min: min,
    max: max,
    style: {
      lineHeight: "22px"
    }
  }), showUnit && /*#__PURE__*/React__default.createElement("span", {
    className: "absolute right-0 top-0 bottom-0 flex items-center p-2 text-gray-700 text-sm pointer-events-none"
  }, "px"))));
}

export { PixelSlider as default };
