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

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

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