// packages/components/src/duotone-picker/custom-duotone-bar.tsx
import CustomGradientBar from "../custom-gradient-picker/gradient-bar/index.js";
import { getColorStopsFromColors, getGradientFromCSSColors, getColorsFromColorStops } from "./utils.js";
import { jsx as _jsx } from "react/jsx-runtime";
var PLACEHOLDER_VALUES = ["#333", "#CCC"];
function CustomDuotoneBar({
  value,
  onChange
}) {
  const hasGradient = !!value;
  const values = hasGradient ? value : PLACEHOLDER_VALUES;
  const background = getGradientFromCSSColors(values);
  const controlPoints = getColorStopsFromColors(values);
  return /* @__PURE__ */ _jsx(CustomGradientBar, {
    disableInserter: true,
    background,
    hasGradient,
    value: controlPoints,
    onChange: (newColorStops) => {
      const newValue = getColorsFromColorStops(newColorStops);
      onChange(newValue);
    }
  });
}
export {
  CustomDuotoneBar as default
};
//# sourceMappingURL=custom-duotone-bar.js.map
