import './HorizontalMixer.scss';
export type HorizontalMixerStyles = {
    totalHeight: number;
    trackHeight: number;
    trackPadding: number;
    trackMargin: number;
    trackBorderColor: string;
    trackTextColor: string;
    trackBorderRadius: number;
    thumbSize: number;
    thumbBorderRadius: number;
    thumbBorder: number;
};
export type HorizontalMixerProps = {
    colors: string[] | string[][];
    labels: string[];
    breakValues: number[];
    onChange: (value: number[], index: number) => void;
    onAfterChange?: (value: number[], index: number) => void;
    pearling?: boolean;
    tooltipVisible?: boolean;
    styles: HorizontalMixerStyles;
    isComposite?: boolean;
    renderOnAfterChange?: boolean;
    isSmall?: boolean;
    compositeBreakValues?: number[][];
    colorOverride?: [boolean, string];
};
/**
 * HorizontalMixer component that renders a customizable horizontal slider with color tracks and labels. <br />
 * The break value should be a number array, and the length of breakValues should be one less than colors, since breakValues represent the breakpoints between colors. <br />
 * Also, each number should be larger than the previous one, since they represent the cumulative breakpoints along the slider. <br />
 * For example, if there are 3 breakValues, they could be [20, 50, 80], which means the first track will take up 20% of the slider, the second track will take up 30% (50-20), and the third track will take up 30% (80-50), and the last track will take up 20% (100-80).
 *
 * @param {Object} props - The properties passed to the component.
 * @param {Array<string>} props.colors - An array of colors for each track in the mixer.
 * @param {Array<number>} props.breakValues - An array of values that define the breakpoints of the slider.
 * @param {function(Array<number>, number): void} props.onChange - Callback function called when the slider value changes.
 * @param {function(Array<number>, number): void} [props.onAfterChange] - Callback function called after the slider value change is complete.
 * @param {Array<string>} props.labels - An array of labels corresponding to each track in the mixer.
 * @param {Object} props.styles - The style properties for the mixer and its components.
 * @param {number} props.styles.totalHeight - The total height of the slider.
 * @param {number} props.styles.trackHeight - The height of the track.
 * @param {number} props.styles.trackPadding - The padding of the track.
 * @param {number} props.styles.trackMargin - The margin of the track.
 * @param {string} props.styles.trackBorderColor - The border color of the track.
 * @param {string} props.styles.trackTextColor - The text color used for labels on the track.
 * @param {number} props.styles.trackBorderRadius - The border radius of the track.
 * @param {number} props.styles.thumbSize - The size of the slider's thumb.
 * @param {number} props.styles.thumbBorderRadius - The border radius of the slider's thumb.
 * @param {number} props.styles.thumbBorder - The border size of the slider's thumb.
 * @param {boolean} [props.pearling=false] - If true, the slider handles will not pass each other while moving.
 * @param {boolean} [props.tooltipVisible=false] - If true, tooltips will be shown when hovering over the slider.
 * @param {boolean} [props.isComposite=false] - If true, the slider tracks will be rendered using the CompositeTrack component.
 * And make sure `compositeBreakValues` is passed with an nested number array.
 * @param {boolean} [props.isSmall=false] - If true, the slider tracks will be rendered in a smaller size.
 * @param {Array<Array<number>>} [props.compositeBreakValues] - An array of arrays containing break values for each composite track.
 *
 * @returns {JSX.Element} The rendered HorizontalMixer component with a slider, tracks, and labels.
 */
export declare const HorizontalMixer: (props: HorizontalMixerProps) => import("react/jsx-runtime").JSX.Element;
export default HorizontalMixer;