@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
63 lines (62 loc) • 1.93 kB
JavaScript
import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { R as g, T as R, a as V, b as c } from "../../index-DpW9ExsS.js";
import { forwardRef as v, useRef as b, useState as j, useImperativeHandle as k, useEffect as w, useCallback as y } from "react";
import { cn as a } from "../../utils/index.js";
import { rangeOutsideVariants as C, trackVariants as T, thumbVariants as i, rangeVariants as S } from "./Range.variants.js";
const q = v(
({
label: n,
defaultValue: u = [0, 100],
name: m,
theme: o,
size: l,
showValue: f,
...d
}, h) => {
const t = b(null), [s, p] = j(u);
k(h, () => t.current, [t]), w(() => {
t.current && (t.current.value = `[${s.toString()}]`);
}, [s]);
const x = y(
(N) => p(N),
[]
);
return /* @__PURE__ */ r("div", { className: "w-full relative flex flex-col gap-3", "data-theme": o, children: [
/* @__PURE__ */ r(
"div",
{
className: a(
"flex items-center",
n ? "justify-between" : "justify-end"
),
children: [
n ? /* @__PURE__ */ e("label", { children: n }) : null,
f ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
s[0],
" - ",
s[1]
] }) : null
]
}
),
/* @__PURE__ */ e("input", { ref: t, name: m, className: "hidden", type: "text" }),
/* @__PURE__ */ r(
g,
{
value: s,
className: a(S()),
onValueChange: x,
...d,
children: [
/* @__PURE__ */ e(R, { className: a(T({ size: l })), children: /* @__PURE__ */ e(V, { className: a(C()) }) }),
/* @__PURE__ */ e(c, { className: a(i({ size: l })) }),
/* @__PURE__ */ e(c, { className: a(i({ size: l })) })
]
}
)
] });
}
);
export {
q as Range
};