"use client";
import { jsxs as a, jsx as m } from "react/jsx-runtime";
import { useAppSelector as $ } from "../../hooks/use-app-selector.js";
import { useSettings as v } from "../../hooks/use-settings.js";
import { getCurrentBreakpoint as h } from "../../../../../store/selectors.js";
import { Input as x } from "../shared/input.js";
import { Label as S } from "../shared/label.js";
import { RangeSlider as C } from "../shared/range-slider.js";
import { BreakpointSelector as b } from "../shared/breakpoint-selector.js";
import { classNames as k } from "../../../../../utils.js";
const L = ({
  fieldName: r,
  type: f,
  mode: t,
  label: n,
  responsive: o = !1,
  min: l = 0,
  max: p = 100,
  step: s = 1,
  className: g
}) => {
  const i = $(h), [u, c] = v(
    o && t ? `${r}.${i}.${t}` : o ? `${r}.${i}` : t ? `${r}.${t}` : r,
    f
  );
  return /* @__PURE__ */ a("div", { className: k("mt-4", g), children: [
    n && /* @__PURE__ */ a(S, { className: "mb-1.5 flex items-center gap-1", children: [
      n,
      " ",
      o && /* @__PURE__ */ m(b, {})
    ] }),
    /* @__PURE__ */ a("div", { className: "flex gap-1.5", children: [
      /* @__PURE__ */ m(
        C,
        {
          value: [u ?? 0],
          onValueChange: (e) => {
            c(e[0]);
          },
          max: p,
          step: s,
          min: l
        }
      ),
      /* @__PURE__ */ m(
        x,
        {
          type: "number",
          value: u ?? "",
          onChange: (e) => {
            c(e.target.value === "" ? void 0 : Number(e.target.value));
          },
          min: l,
          max: p,
          step: s,
          className: "w-[60px]"
        }
      )
    ] })
  ] });
};
export {
  L as SliderInputControl
};
//# sourceMappingURL=slider-input.control.js.map
