koval-ui/dist/src/lib/InputRange/InputRange.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as N, jsx as e } from "react/jsx-runtime";
import { forwardRef as _, useCallback as S, useMemo as z } from "react";
import G from "classnames";
import { useLocalTheme as H } from "css-vars-hook";
import { ValidationState as J } from "../../internal/inputs/ValidationProps.js";
import { useValidation as K } from "../../internal/inputs/useValidation.js";
import { useRevalidateOnFormChange as Q } from "../../internal/inputs/useRevalidateOnFormChange.js";
import { useExternalValidation as W } from "../../internal/inputs/useExternalValidation.js";
import { useValidationIcon as X } from "../../internal/inputs/useValidationIcon.js";
import { useControllableState as Y } from "../../internal/hooks/useControllableState.js";
import { useInternalId as Z } from "../../internal/hooks/useInternalId.js";
import { useInternalRef as P } from "../../internal/hooks/useInternalRef.js";
import t from "./InputRange.module.css.js";
const U = ({
  min: a,
  max: c,
  bars: r,
  scaleUnit: m
}) => {
  const l = (c - a) / r;
  return new Array(r + 1).fill("").map((I, s) => {
    const n = Math.floor(a + l * s);
    return /* @__PURE__ */ e(
      "option",
      {
        value: n,
        label: `- ${n}${m}`,
        className: t.mark
      },
      s
    );
  });
}, tt = _(
  ({
    prefix: a,
    id: c,
    className: r,
    disabled: m,
    value: u,
    onChange: l = () => {
    },
    onFocus: g = () => {
    },
    onBlur: I = () => {
    },
    onKeyDown: s = () => {
    },
    onKeyUp: n = () => {
    },
    defaultValue: V,
    min: R = 0,
    max: o = 100,
    bars: $ = 5,
    scaleUnit: i = "",
    revalidateOnFormChange: j,
    validation: p,
    errorMessage: k,
    displayScale: F,
    displayIcon: b = !0,
    ...y
  }, L) => {
    const M = !!p || !!y.required, { validateTextual: v, validity: w, setValidity: d } = K({ validation: p, hasValidators: M }), f = P(L);
    Q(f, v, j), W({ errorMessage: k, inputRef: f, setValidity: d, validation: p });
    const O = X(w), [T, C] = Y({
      value: u,
      defaultValue: V
    }), q = S(
      (B) => {
        C(B.target.value), l(B);
      },
      [l, C]
    ), A = S(() => {
      d(J.error);
    }, [d]), h = Z(c), x = `${h}-scale`, { LocalRoot: D } = H(), E = z(
      () => ({
        "output-length": o.toString().length + i.length
      }),
      [o, i]
    );
    return /* @__PURE__ */ N(
      "div",
      {
        className: G(
          t["input-range"],
          { [t.withValidationIcon]: b },
          r
        ),
        children: [
          a && /* @__PURE__ */ e("label", { className: t.prefix, htmlFor: h, children: /* @__PURE__ */ e(a, {}) }),
          /* @__PURE__ */ N("div", { className: t["scale-wrapper"], children: [
            /* @__PURE__ */ e(
              "input",
              {
                ...y,
                id: h,
                type: "range",
                className: t.input,
                ref: f,
                disabled: m,
                value: u,
                defaultValue: V,
                onChange: q,
                onBlur: I,
                onFocus: g,
                onKeyUp: n,
                onKeyDown: s,
                onInvalid: A,
                onInput: v,
                list: x,
                min: R,
                max: o
              }
            ),
            F && /* @__PURE__ */ e("datalist", { id: x, className: t.scale, children: U({ min: Number(R), max: Number(o), bars: $, scaleUnit: i }) })
          ] }),
          /* @__PURE__ */ N(D, { as: "output", theme: E, className: t.output, children: [
            T || Number(o) / 2,
            " ",
            i
          ] }),
          b && w && /* @__PURE__ */ e(O, { className: t.validation })
        ]
      }
    );
  }
);
tt.displayName = "InputRange";
export {
  tt as InputRange
};
//# sourceMappingURL=InputRange.js.map