import { type ReactNode } from "react";
import { View, type ColorTokens, type ViewStyle, type TextStyle, type LayoutStyle, type MeasureProps } from "../../style/index.js";
export interface SliderProps extends MeasureProps {
    /** Controlled value; omit for uncontrolled use. The thumb sits at this value (clamped to [min, max]). */
    value?: number;
    /** Initial value for uncontrolled use (a bare <Slider/> drags out of the box). Default `min`. */
    defaultValue?: number;
    /** Lower bound of the range. Default 0. */
    min?: number;
    /** Upper bound of the range. Default 100. */
    max?: number;
    /** Snap increment. Default 1. Set to a fraction for finer control. */
    step?: number;
    /** Fired with the next (clamped, snapped) value as the thumb is dragged or the track tapped (both modes). */
    onChange?: (value: number) => void;
    /** E2E hook forwarded to the slider container. */
    testID?: string;
    /**
     * The title line, rendered ABOVE the track (a slider's label sits above the rail,
     * not beside it). Supplying it builds the component-owned header so the caller
     * never hand-composes a Column + Typography above a bare slider, and the visible
     * title also names the control for assistive tech (see `accessibilityLabel`).
     */
    children?: ReactNode;
    /** Optional muted secondary line rendered under the title, for a hint or unit note. */
    description?: ReactNode;
    /**
     * Render the live current value (the same value the thumb sits at) as a trailing
     * readout on the title line, right-aligned. With no title it still renders the
     * value as a standalone trailing readout above the track. The number tracks the
     * drag in real time and uses tabular figures so it does not jitter.
     */
    showValue?: boolean;
    /**
     * The value is a percentage: the `showValue` readout prints it with a percent sign
     * ("62%") and assistive tech hears it so. Pair with the default 0 to 100 range.
     */
    percent?: boolean;
    /**
     * A scale under the track: the minimum, the middle and the maximum, spread across the
     * track's width in the small mono meta type, 8 px below the rail.
     */
    scale?: boolean;
    small?: boolean;
    large?: boolean;
    disabled?: boolean;
    /** Accessible name for the slider (e.g. "Volume"). */
    accessibilityLabel?: string;
    /** Extra style on the slider container, applied last. */
    style?: LayoutStyle;
}
export type Size = "small" | "base" | "large";
export declare function sizeOf(p: SliderProps): Size;
export interface SliderSkin {
    /** Track height for a size, used by the shell for hit geometry and to center the segments. */
    trackHeight: (size: Size) => number;
    /** Thumb width along the travel axis (the diameter for round thumbs, the bar/capsule width otherwise). */
    thumbWidth: (size: Size) => number;
    /** Thumb height (the diameter for round thumbs), used by the shell to center the thumb. */
    thumbHeight: (size: Size) => number;
    /**
     * Gap between the handle and BOTH track segments (M3 Expressive anatomy). When
     * set (> 0) the shell renders the track as two absolutely-positioned segments
     * (active | gap | handle | gap | inactive) and `track`/`fill` supply only the
     * segment colors + per-corner radii; when 0/omitted the shell nests `fill`
     * inside the full-width `track` rail (the continuous-rail anatomy).
     */
    trackGap?: number;
    /** Floor for the interactive row height (iOS HIG 44pt / Android M3 48dp minimum touch target). */
    minRowHeight?: number;
    /** Touch padding around the taller of the thumb and track in the interactive row (default 16). */
    rowPadding?: number;
    /** The space between the header and the rail. */
    headerGap: number;
    /** The space between the title row and the description under it. */
    descriptionGap: number;
    /** The whole control's opacity when disabled (solid mode). */
    disabledOpacity: number;
    /** Render the M3 stop indicator dot in the inactive track end (requires `tick`). */
    endStop?: boolean;
    /** Stop/tick indicator dot diameter (default 4). */
    tickSize?: number;
    /** The inactive track: the full-width rounded rail (continuous anatomy) or the inactive segment (gap anatomy). */
    track: (tokens: ColorTokens, size: Size, disabled: boolean) => ViewStyle;
    /** The active range: the filled overlay from min to the value (continuous) or the active segment (gap anatomy). */
    fill: (tokens: ColorTokens, size: Size, disabled: boolean) => ViewStyle;
    /** The draggable thumb (its left/top offset is set by the shell). `active` while a pointer hovers the control or a press holds it. */
    thumb: (tokens: ColorTokens, size: Size, disabled: boolean, active: boolean) => ViewStyle;
    /**
     * The bright translucent under-fill for the glass knob (passed to `GlassSurface`'s
     * `tint`), so the handle reads as a light glass puck on both schemes instead of a
     * popover-tinted blob. The per-platform shape remains the skin's responsibility.
     */
    glassTint?: (tokens: ColorTokens) => string;
    /**
     * Stop/tick dot fill for stepped sliders (and the M3 end stop). The shell sizes
     * and positions the dot; `onActive` says the dot sits on the active (filled)
     * side, for the M3 on-primary vs on-secondary-container roles. Omit to render
     * no ticks (the web look).
     */
    tick?: (tokens: ColorTokens, size: Size, disabled: boolean, onActive: boolean) => ViewStyle;
    /** The title line above the track (component-owned label type; brand, not a platform face). */
    label: (tokens: ColorTokens, size: Size) => TextStyle;
    /** The muted secondary description line under the title. */
    description: (tokens: ColorTokens, size: Size) => TextStyle;
    /** The live value readout trailing the title line (muted, tabular figures). */
    value: (tokens: ColorTokens, size: Size) => TextStyle;
    /** The `scale` labels under the track (the small mono meta type). */
    scale: (tokens: ColorTokens) => TextStyle;
}
/** Build a Slider component from a platform skin.
 * @ref Ref to the interactive adjustable track, including when a header is shown. Typed as a React Native View. On web, React Native Web exposes its DOM host; focus() and blur() move browser focus. Native host behavior depends on the platform and React Native version. Calling focus() does not activate the control or call accessibility focus APIs.
 */
export declare function createSlider(skin: SliderSkin): import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<View>>;
//# sourceMappingURL=slider.shared.d.ts.map