import { type HTMLAttributes, type ReactElement, type ReactNode } from "react";
import { type RangeStepsOptions } from "../utils/getRangeSteps.js";
import { type CustomizableSliderMarkLabelProps } from "./SliderMarkLabel.js";
/**
 * @since 6.0.0
 */
export interface SliderValueMark {
    /**
     * An optional label to display alongside the current mark. This will be
     * positioned below the mark for horizontal sliders and to the right for
     * vertical sliders.
     */
    label?: ReactNode;
    /**
     * The value of the mark that should be a valid step within the slider.
     */
    value: number;
}
/**
 * @since 6.0.0
 */
export interface SliderValueMarkState {
    /** The {@link SliderValueMark.value} */
    value: number;
    /**
     * No idea if this is actually useful (maybe custom styles?), but it is the
     * current percentage the mark is offset and is what is set as the
     * `left`/`top` values for the mark.
     */
    offset: string;
    /**
     * This will be `true` when the mark is being covered by the slider track's
     * active state.
     */
    active: boolean;
}
/**
 * @since 6.0.0
 */
export interface SliderMarksOptions {
    /**
     * Set this to `true` to display a mark for each step within the slider. This
     * can be used alongside the {@link getMarkProps} and
     * {@link getMarkLabelProps} to customize the styles or display a label for
     * the mark.
     *
     * @example Custom Marks
     * ```tsx
     * const slider = useSlider({ step: 10 });
     *
     * <Slider
     *   {...slider}
     *   marks={[
     *     { value: 0, label: "Minimum" },
     *     { value: 10 },
     *     { value: 20 },
     *     { value: 30 },
     *     { value: 40 },
     *     { value: 50, label: "Medium" },
     *     { value: 60 },
     *     { value: 70 },
     *     { value: 80 },
     *     { value: 90 },
     *     { value: 100, label: "Maximum" },
     *   ]}
     * />
     * ```
     */
    marks?: boolean | readonly SliderValueMark[];
    /**
     * This can be used to override any styles for the specific mark.
     */
    getMarkProps?: (options: SliderValueMarkState) => HTMLAttributes<HTMLSpanElement> | undefined;
    /**
     * This can be used to override any styles for a specific mark's label or
     * display a label dynamically.
     *
     * @example Dynamic Labels
     * ```tsx
     * <Slider
     *   {...slider}
     *   marks
     *   getMarkLabelProps={({ active, value }) => {
     *     if (value % 10 !== 0) {
     *       return;
     *     }
     *
     *     return {
     *       children: `${value} degrees`,
     *       className: cnb(active && styles.somethingCustom),
     *     };
     *   }}
     * />
     * ```
     */
    getMarkLabelProps?: (options: SliderValueMarkState) => Partial<CustomizableSliderMarkLabelProps> | undefined;
}
/**
 * @internal
 * @since 6.0.0
 */
export interface SliderValueMarksProps extends RangeStepsOptions, Required<SliderMarksOptions> {
    vertical: boolean;
    thumb1Value: number;
    thumb2Value: number;
    isRangeSlider: boolean;
}
/**
 * @internal
 * @since 6.0.0
 */
export declare function SliderValueMarks(props: SliderValueMarksProps): ReactElement;
