// packages/components/src/color-picker/input-with-slider.tsx
import { HStack } from "../h-stack/index.js";
import { Text } from "../text/index.js";
import { RangeControl, NumberControlWrapper } from "./styles.js";
import { COLORS } from "../utils/colors-values.js";
import InputControlPrefixWrapper from "../input-control/input-prefix-wrapper.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var InputWithSlider = ({
  min,
  max,
  label,
  abbreviation,
  onChange,
  value
}) => {
  const onNumberControlChange = (newValue) => {
    if (!newValue) {
      onChange(0);
      return;
    }
    if (typeof newValue === "string") {
      onChange(parseInt(newValue, 10));
      return;
    }
    onChange(newValue);
  };
  return /* @__PURE__ */ _jsxs(HStack, {
    spacing: 4,
    children: [/* @__PURE__ */ _jsx(NumberControlWrapper, {
      __next40pxDefaultSize: true,
      min,
      max,
      label,
      hideLabelFromVision: true,
      value,
      onChange: onNumberControlChange,
      prefix: /* @__PURE__ */ _jsx(InputControlPrefixWrapper, {
        children: /* @__PURE__ */ _jsx(Text, {
          color: COLORS.theme.accent,
          lineHeight: 1,
          children: abbreviation
        })
      }),
      spinControls: "none"
    }), /* @__PURE__ */ _jsx(RangeControl, {
      __next40pxDefaultSize: true,
      label,
      hideLabelFromVision: true,
      min,
      max,
      value,
      onChange,
      withInputField: false
    })]
  });
};
export {
  InputWithSlider
};
//# sourceMappingURL=input-with-slider.js.map
