@konstructio/ui/dist/components/Range/Range.js

A set of reusable and customizable React components built for konstruct.io

import { t as e } from "../../utils-COaoD3PI.js";
import { i as v, n as V, r as c, t as R } from "../../dist-BfrkYZKI.js";
import { rangeOutsideVariants as j, rangeVariants as b, thumbVariants as i, trackVariants as k } from "./Range.variants.js";
import { forwardRef as w, useCallback as y, useEffect as C, useImperativeHandle as S, useRef as T, useState as $ } from "react";
import { jsx as a, jsxs as r } from "react/jsx-runtime";
var A = w(({ label: n, labelWrapperClassName: u, defaultValue: m = [0, 100], name: o, theme: f, size: l, showValue: d, ...h }, p) => {
  const t = T(null), [s, x] = $(m);
  S(p, () => t.current, [t]), C(() => {
    t.current && (t.current.value = `[${s.toString()}]`);
  }, [s]);
  const N = y((g) => x(g), []);
  return /* @__PURE__ */ r("div", {
    className: "w-full relative flex flex-col gap-3",
    "data-theme": f,
    children: [
      /* @__PURE__ */ r("div", {
        className: e("flex items-center", n ? "justify-between" : "justify-end", u),
        children: [n ? /* @__PURE__ */ a("label", { children: n }) : null, d ? /* @__PURE__ */ r("span", {
          className: "text-xs",
          children: [
            s[0],
            " - ",
            s[1]
          ]
        }) : null]
      }),
      /* @__PURE__ */ a("input", {
        ref: t,
        name: o,
        className: "hidden",
        type: "text"
      }),
      /* @__PURE__ */ r(V, {
        value: s,
        className: e(b()),
        onValueChange: N,
        ...h,
        children: [
          /* @__PURE__ */ a(v, {
            className: e(k({ size: l })),
            children: /* @__PURE__ */ a(R, { className: e(j()) })
          }),
          /* @__PURE__ */ a(c, { className: e(i({ size: l })) }),
          /* @__PURE__ */ a(c, { className: e(i({ size: l })) })
        ]
      })
    ]
  });
});
export {
  A as Range
};