import { Value, TNode } from '@tempots/dom';
import { ControlSize } from '../../theme';
import { ThemeColorName } from '../../../tokens';
/**
 * Definition of a tick mark on the slider track.
 */
export interface SliderTick {
    /** The numeric value where this tick appears */
    value: number;
    /** Optional label displayed below the tick mark */
    label?: string;
}
/**
 * Configuration options for the {@link AdvancedSlider} component.
 *
 * Supports single value, range (two thumbs), and multi-point (arbitrary number
 * of thumbs) modes. Features tick marks, value labels, and customizable colors.
 */
export interface AdvancedSliderOptions {
    /** Minimum value of the slider range */
    min?: number;
    /** Maximum value of the slider range */
    max?: number;
    /** Step increment between valid values. @default 1 */
    step?: number;
    /** Whether the slider is disabled. @default false */
    disabled?: Value<boolean>;
    /** Visual size of the slider. @default 'md' */
    size?: Value<ControlSize>;
    /** Theme color for the filled track and thumbs. @default 'primary' */
    color?: Value<ThemeColorName>;
    /**
     * Single value mode: the current slider value.
     * Use this for a simple single-thumb slider.
     */
    value?: Value<number>;
    /** Callback for single-value mode changes */
    onChange?: (value: number) => void;
    /**
     * Range mode: a two-element array `[low, high]`.
     * When provided, two thumbs are rendered.
     */
    range?: Value<[number, number]>;
    /** Callback for range mode changes */
    onRangeChange?: (range: [number, number]) => void;
    /**
     * Multi-point mode: an array of values, each getting its own thumb.
     * When provided, multiple thumbs are rendered at initialization time.
     * The number of points is fixed after component creation.
     */
    points?: Value<number[]>;
    /** Callback for multi-point mode changes */
    onPointsChange?: (points: number[]) => void;
    /**
     * Tick marks along the slider track.
     * Can be `true` for automatic step-based ticks, or an array of custom tick definitions.
     */
    ticks?: boolean | SliderTick[];
    /**
     * Whether to show the current value label(s) above the thumb(s).
     * @default false
     */
    showValue?: Value<boolean>;
    /**
     * Custom formatter for the displayed value labels.
     * @default (v) => String(v)
     */
    formatValue?: (value: number) => string;
    /**
     * Colors for individual segments between consecutive thumbs in multi-point mode.
     * Each entry corresponds to the segment between thumb[i] and thumb[i+1].
     * If fewer colors than segments are provided, remaining segments use the default color.
     * If not provided, a single fill spanning all thumbs is used (existing behavior).
     */
    segmentColors?: ThemeColorName[];
    /**
     * Custom renderer for the thumb element. When provided, replaces the default
     * circular thumb with your custom content. The rendered content is placed
     * inside the thumb container that handles positioning, ARIA attributes,
     * keyboard navigation, and pointer events.
     *
     * @param index - The zero-based index of the thumb
     * @param value - A reactive value holding the current thumb position
     * @returns A TNode to render as the thumb
     */
    renderThumb?: (index: number, value: Value<number>) => TNode;
}
/**
 * An advanced slider component supporting single value, range selection,
 * and multi-point modes with tick marks and value display.
 *
 * - **Single mode**: Pass `value` and `onChange` for a standard single-thumb slider.
 * - **Range mode**: Pass `range` and `onRangeChange` for a two-thumb range selector.
 * - **Multi-point mode**: Pass `points` and `onPointsChange` for arbitrary number of thumbs.
 *
 * Additional features include configurable tick marks (automatic or custom),
 * value labels above the thumbs, step snapping, and theme-aware coloring.
 *
 * @param options - Configuration for the slider
 * @returns A styled slider element
 *
 * @example
 * ```ts
 * // Simple slider with value display
 * const vol = prop(50)
 * AdvancedSlider({
 *   value: vol, onChange: vol.set,
 *   min: 0, max: 100,
 *   showValue: true,
 *   ticks: true,
 * })
 * ```
 *
 * @example
 * ```ts
 * // Range slider
 * const priceRange = prop<[number, number]>([20, 80])
 * AdvancedSlider({
 *   range: priceRange, onRangeChange: priceRange.set,
 *   min: 0, max: 100, step: 5,
 *   ticks: [
 *     { value: 0, label: '$0' },
 *     { value: 50, label: '$50' },
 *     { value: 100, label: '$100' },
 *   ],
 *   showValue: true,
 *   formatValue: v => `$${v}`,
 * })
 * ```
 *
 * @example
 * ```ts
 * // Multi-point slider
 * const pts = prop([10, 40, 70])
 * AdvancedSlider({
 *   points: pts, onPointsChange: pts.set,
 *   min: 0, max: 100,
 *   showValue: true,
 *   color: 'green',
 * })
 * ```
 */
export declare function AdvancedSlider({ min, max, step, disabled, size, color, value, onChange, range, points, onRangeChange, onPointsChange, ticks, showValue, formatValue, segmentColors, renderThumb, }: AdvancedSliderOptions): import("@tempots/dom").Renderable;
