geoiq-frontend-ui-kit/dist/index.es26.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import r from "react";
import { useRanger as p } from "@tanstack/react-ranger";
import { cn as f } from "./index.es85.js";
const b = ({
  value: e = [0, 100],
  // Default min & max values
  min: n = 0,
  max: o = 100,
  stepSize: c = 5,
  onChange: s,
  id: i
}) => {
  const u = r.useRef(null), a = p({
    getRangerElement: () => u.current,
    values: e,
    min: n,
    max: o,
    stepSize: c,
    onChange: (t) => {
      s?.(t.sortedValues);
    },
    onDrag: (t) => {
      const l = t.sortedValues;
      (l[0] !== e[0] || l[1] !== e[1]) && s?.(l);
    }
  });
  return /* @__PURE__ */ r.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ r.createElement(
    "div",
    {
      ref: u,
      className: "relative flex w-full h-2 rounded bg-light-4",
      id: i
    },
    /* @__PURE__ */ r.createElement(
      "div",
      {
        className: f("absolute h-full rounded bg-rest-p1"),
        style: {
          left: `${a.getPercentageForValue(e[0])}%`,
          width: `${Math.max(
            0,
            a.getPercentageForValue(e[1]) - a.getPercentageForValue(e[0])
          )}%`
        }
      }
    ),
    a.handles().map(
      ({ value: t, onKeyDownHandler: l, onMouseDownHandler: m, onTouchStart: d }, g) => /* @__PURE__ */ r.createElement(
        "button",
        {
          key: g,
          onKeyDown: l,
          onMouseDown: m,
          onTouchStart: d,
          role: "slider",
          "aria-valuemin": n,
          "aria-valuemax": o,
          "aria-valuenow": t,
          className: "flex absolute justify-center items-center cursor-pointer top-1/2 w-[20px] h-[20px] outline-none bg-white",
          style: {
            left: `${a.getPercentageForValue(t)}%`,
            transform: "translate(-50%, -50%)",
            borderRadius: "100%",
            boxShadow: "0px 0px 15px 0px #0000000D, 0px 4px 4px 0px #0000000D"
          }
        },
        /* @__PURE__ */ r.createElement("div", { className: "w-2 h-2 rounded-full bg-rest-p1" })
      )
    )
  ));
};
export {
  b as RangeSlider
};
//# sourceMappingURL=index.es26.js.map