import { type CSSProperties, type ComponentProps, type FC } from "react";
import { Box } from "../Box/Box";
import { Tooltip } from "../Tooltip";
import { useAdaptiveTicks } from "./hooks/use-adaptive-ticks.hook";
type Color = string | readonly [string, string];
interface RangeCoverageSection {
    from: number;
    to: number;
    color: Color;
    /**
     * Associates this section with a `legendSwatches` entry that has the same
     * `label`. When set, the segment's `aria-describedby` will point to that
     * legend swatch, so assistive technology announces the two as related.
     */
    legendLabel?: string;
}
export interface RangeCoverageHighlightedRange {
    from: number;
    to: number;
    /**
     * Describes what this range represents (e.g. "Current value"). When set,
     * the ring's accessible name becomes `"{label} ({from} - {to})"` instead
     * of just `"{from} - {to}"`.
     */
    label?: string;
}
export interface RangeCoverageSectionWithBackground extends RangeCoverageSection {
    background?: CSSProperties["background"];
}
export interface Props extends React.ComponentPropsWithoutRef<typeof Box<"div">> {
    /**
     * Each section defines a colored range within the overall start-end range.
     */
    sections: RangeCoverageSection[];
    /**
     * Highlights an arbitrary range of the bar with a ring, independent of the
     * defined `sections`. Unlike `sections`, this range doesn't need to align
     * with any section boundary and doesn't render a fill color.
     */
    highlightedRange?: RangeCoverageHighlightedRange;
    /**
     * Optional custom tick marks to display along the range bar, between the
     * start and end values.
     */
    ticks?: number[];
    /**
     * Optional function to format tick values for display.
     */
    tickFormatter?: (value: number) => string;
    /**
     * Controls whether the vertical tick mark is shown for the first tick
     * (`start`) and the last tick (`end`), independently. Their labels are
     * always shown regardless of these settings.
     * @default { start: true, end: true }
     */
    showEdgeTickMarks?: {
        start?: boolean;
        end?: boolean;
    };
    /**
     * The start of the range, which will be shown at the left side of the bar.
     */
    start: number;
    /**
     * The end of the range, which will be shown at the right side of the bar.
     */
    end: number;
    title?: string;
    className?: string;
    legendSwatches?: Array<{
        label: string;
        /**
         * @example "red" // single color
         * @example ["green", "lightgreen"]  // striped
         */
        color: Color;
    }>;
    onSectionFocus?: (section: RangeCoverageSection | null) => void;
    translations: {
        /**
         * This component doesn't support overlapping sections. If you cannot guarantee that
         * sections won't overlap, you can show this message to the user when the component
         * detects overlapping sections.
         */
        sectionOverlapsMessage: string;
    };
    slots?: {
        /**
         * Return `null` to render the default segment without a tooltip.
         */
        tooltipContent?: {
            /**
             * The DOM element to portal tooltip content into.
             *
             * Defaults to `document.body`. Pass the containing `<dialog>` element when
             * rendering inside a modal so the tooltip appears in the browser's top layer
             * instead of behind the dialog's backdrop.
             */
            container?: ComponentProps<(typeof Tooltip)["Content"]>["container"];
            /**
             * The duration from when the pointer enters the trigger until the tooltip gets opened.
             * Setting it to `0` will make the tooltip open immediately.
             * @default 100
             */
            delayDuration?: number;
            render?: (section: RangeCoverageSectionWithBackground) => React.ReactNode;
        };
    };
}
export declare const COLOR_GREY_LIGHT = "var(--ui-color-background-info-secondary-hovered)";
export declare const COLOR_GREY_DARK = "var(--ui-color-border-info-secondary-hovered)";
export declare const COLOR_RED = "var(--ui-color-border-error-primary-default)";
export declare const COLOR_AMBER = "var(--ui-color-icon-warning-secondary-default)";
export declare const COLOR_BLUE = "var(--ui-color-background-info-secondary-hovered)";
export declare const RangeCoverage: FC<Props> & {
    Colors: {
        RED: string;
        AMBER: string;
        GREY_DARK: string;
        GREY_LIGHT: string;
        BLUE: string;
        FILL: string;
        GAP: string;
        OVERLAP: readonly [string, string];
        ALERT: {
            HIGH: {
                DEFAULT: string;
                SALMON: string;
                CRIMSON: string;
                RED: string;
            };
            MEDIUM: {
                DEFAULT: string;
                SUN: string;
                OAK: string;
                AMBER: string;
            };
            LOW: {
                DEFAULT: string;
                MINT: string;
                LEAF: string;
                GREEN: string;
            };
            NONE: {
                DEFAULT: string;
                FOG: string;
                NEUTRAL: string;
                GRAPHITE: string;
            };
        };
    };
    useAdaptiveTicks: typeof useAdaptiveTicks;
};
export {};