import { _ as _extends } from '../extends-C4cduGrv.js';
import { _ as _slicedToArray } from '../slicedToArray-BB-AwwkK.js';
import { _ as _typeof } from '../typeof-CgC7Bq6K.js';
import { _ as _objectWithoutProperties } from '../objectWithoutProperties-TXwlfNxG.js';
import React__default, { useEffect, useState } from 'react';
import cx from 'classnames';

var _excluded = ["name", "state", "className", "onInput", "onChange", "value"];
var STATES = {
  "default": "border-gray-200 focus-within:outline-blue",
  error: "border-red-600 outline-red",
  success: "border-green-600 outline-green"
};

function Slider(_ref) {
  var name = _ref.name,
      _ref$state = _ref.state,
      state = _ref$state === void 0 ? "default" : _ref$state,
      className = _ref.className,
      onInput = _ref.onInput,
      onChange = _ref.onChange,
      value = _ref.value,
      props = _objectWithoutProperties(_ref, _excluded);

  className = cx(className, "design-slider px-2 py-2 flex items-center border rounded", STATES[state]);
  useEffect(function () {
    if (_typeof(value) === "object") return;
    setRangeValue(value);
  }, [value]);

  var _useState = useState(typeof value !== "undefined" ? value : props.min || 0),
      _useState2 = _slicedToArray(_useState, 2),
      rangeValue = _useState2[0],
      setRangeValue = _useState2[1];

  function updateProgress(event) {
    setRangeValue(event.target.value);

    if (onInput) {
      onInput(event);
    }
  }

  return /*#__PURE__*/React__default.createElement("div", {
    className: className,
    style: {
      transition: "border-color 0.3s, box-shadow 0.3s",
      "--min": props.min,
      "--max": props.max,
      "--rangeValue": rangeValue
    }
  }, /*#__PURE__*/React__default.createElement("input", _extends({
    name: name,
    type: "range",
    onInput: updateProgress,
    onChange: onChange,
    value: rangeValue
  }, props)));
}

export { Slider as default };
