import * as React from "react";
import { type ReactNode } from "react";
export interface IDistributionSegment {
    name: string;
    value: number;
    color?: string;
}
export interface IDistributionSliderProps {
    /**
     * Label for the distribution slider
     */
    label?: string | ReactNode;
    /**
     * Array of segments with names and values
     */
    segments: IDistributionSegment[];
    /**
     * Callback function called when segments change
     */
    onChange?: (segments: IDistributionSegment[]) => void;
    /**
     * Mode of the distribution slider
     * - 'percentage': Values sum to 100, displayed as percentages (e.g., 33%)
     * - 'absolute': Values sum to targetTotal, displayed as raw numbers (e.g., 40)
     * @default 'percentage'
     */
    mode?: "percentage" | "absolute";
    /**
     * Target total value for absolute mode (ignored in percentage mode)
     * @default 100
     */
    targetTotal?: number;
    /**
     * Prefix to display before values in absolute mode
     * Ignored in percentage mode
     */
    valuePrefix?: ReactNode;
    /**
     * Additional information or guidance displayed below the slider
     */
    helperText?: ReactNode;
    /**
     * Pass a boolean value to indicate if the component is in an error state
     */
    error?: boolean;
    /**
     * Whether the component is disabled
     */
    disabled?: boolean;
    /**
     * Pass space separated class names to override the DistributionSlider styles
     */
    className?: string;
    /**
     * Size of the slider
     * @default 'md'
     */
    size?: "md" | "lg";
    /**
     * Step size for keyboard navigation (percentage of target total)
     * @default 1
     */
    keyboardStep?: number;
}
export declare const DEFAULT_SEGMENT_COLORS: readonly ["rgb(6 118 215)", "rgb(61 180 115)", "rgb(245 154 32)", "rgb(231 73 58)", "rgb(89 100 121)", "rgb(152 162 179)"];
/**
 * DistributionSlider component for adjusting proportional values across multiple segments.
 * Supports drag-and-drop interaction and keyboard navigation to redistribute values while maintaining total.
 *
 * @example
 * // Basic usage with level distribution
 * <DistributionSlider
 *   segments={[
 *     {name: 'Easy', value: 33},
 *     {name: 'Medium', value: 34},
 *     {name: 'Hard', value: 33}
 *   ]}
 *   onChange={setSegments}
 * />
 */
export declare const DistributionSlider: React.ForwardRefExoticComponent<IDistributionSliderProps & React.RefAttributes<HTMLDivElement>>;
