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

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

import { cn as s } from "./index.es79.js";
import { useRanger as w } from "@tanstack/react-ranger";
import e from "react";
import { SliderBgColorVariants as a } from "./index.es112.js";
const x = ({ left: t = 0, width: o = 0, index: l = -1 }) => /* @__PURE__ */ e.createElement(
  "div",
  {
    className: s(
      "absolute h-full rounded",
      a({ bgColor: l === 0 ? "success" : "stroke" })
    ),
    style: {
      left: `${t}%`,
      width: `${o}%`
    },
    key: l
  }
), E = ({ width: t = 0, index: o = -1 }) => {
  if (o === 0) {
    const l = t >= 50 ? 50 : t, n = l, m = 50 - l;
    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
      "div",
      {
        className: s(
          "absolute h-full rounded-l",
          a({ bgColor: "stroke" })
        ),
        style: {
          left: "0%",
          width: `${n}%`
        }
      }
    ), /* @__PURE__ */ e.createElement(
      "div",
      {
        className: s(
          "absolute h-full",
          a({ bgColor: "danger" })
        ),
        style: {
          left: `${n}%`,
          width: `${m}%`
        }
      }
    ));
  } else if (o === 1) {
    const l = t >= 50 ? 0 : 50 - t, n = l, m = 50 - l;
    return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
      "div",
      {
        className: s(
          "absolute h-full",
          a({ bgColor: "success" })
        ),
        style: {
          left: "50%",
          width: `${n}%`
        }
      }
    ), /* @__PURE__ */ e.createElement(
      "div",
      {
        className: s(
          "absolute h-full rounded-r",
          a({ bgColor: "stroke" })
        ),
        style: {
          left: `${50 + n}%`,
          width: `${m}%`
        }
      }
    ));
  } else return null;
}, v = ({ show: t = !1 }) => t ? /* @__PURE__ */ e.createElement(
  "div",
  {
    className: s(
      "absolute h-full flex justify-center items-center w-1 left-1/2 right-1/2",
      a({ bgColor: "stroke" })
    )
  },
  /* @__PURE__ */ e.createElement(
    "div",
    {
      className: s(
        "h-3/4 w-1/2",
        a({ bgColor: "stroke" })
      )
    }
  )
) : null, k = ({
  value: t = 0,
  min: o = 0,
  max: l = 100,
  stepSize: n = 10,
  onChange: m,
  id: g
}) => {
  const d = e.useRef(null), u = w({
    getRangerElement: () => d.current,
    values: [t],
    min: o,
    max: l,
    stepSize: n,
    onDrag: (r) => {
      t !== r.sortedValues[0] && m?.(r.sortedValues[0]);
    }
  }), f = o < 0;
  return /* @__PURE__ */ e.createElement(
    "div",
    {
      ref: d,
      className: "relative flex w-full h-2",
      style: {
        // userSelect: 'none',
        boxShadow: "inset 0 1px 2px rgba(0,0,0,.6)"
      },
      id: g
    },
    u.getSteps().map(
      ({ left: r, width: i }, c) => f ? /* @__PURE__ */ e.createElement(E, { width: i, index: c, key: c }) : /* @__PURE__ */ e.createElement(x, { left: r, width: i, index: c, key: c })
    ),
    /* @__PURE__ */ e.createElement(v, { show: f }),
    u.handles().map(
      ({
        value: r,
        onKeyDownHandler: i,
        onMouseDownHandler: c,
        onTouchStart: p,
        isActive: h
      }, b) => /* @__PURE__ */ e.createElement(
        "div",
        {
          key: b,
          onKeyDown: i,
          onMouseDown: c,
          onTouchStart: p,
          role: "slider",
          "aria-valuemin": u.options.min,
          "aria-valuemax": u.options.max,
          "aria-valuenow": r,
          className: "flex absolute justify-center items-center cursor-pointer top-1/2 w-[18px] h-[18px] outline-none bg-white",
          style: {
            left: `${u.getPercentageForValue(r)}%`,
            zIndex: h ? "1" : "0",
            transform: "translate(-50%, -50%)",
            borderRadius: "100%",
            //   background: 'linear-gradient(to bottom, #eee 45%, #ddd 55%)',
            //   border: 'solid 1px #888',
            boxShadow: "0px 0px 15px 0px #0000000D, 0px 4px 4px 0px #0000000D"
          }
        },
        /* @__PURE__ */ e.createElement(
          "div",
          {
            className: s(
              "h-2 w-2 rounded-[50%]",
              a({
                bgColor: r >= 0 ? "success" : "danger"
              })
            )
          }
        )
      )
    )
  );
};
export {
  k as PolarSlider
};
//# sourceMappingURL=index.es23.js.map