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

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

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