import type { ReactNode } from "react"; import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes"; import type { SliderScale } from "./rangeSliderMath"; export type { SliderScale }; /** A single tick drawn along the track. */ export type RangeSliderMark = { /** Value this tick sits at; positions along min–max the same way a thumb value does. */ value: number; /** Content shown under the tick. Omit for an unlabelled tick mark. */ label?: ReactNode; }; /** Props shared by both the single-thumb and dual-thumb shapes. */ interface RangeSliderSharedProps { /** Lower bound of the range. Required — there is no implicit floor. */ min: number; /** Upper bound of the range. Required and must be greater than min. */ max: number; /** Value increment for drag, keyboard and snapping. Defaults to 1. */ step?: number; /** Disables pointer and keyboard interaction. */ isDisabled?: boolean; /** "linear" spaces values evenly; "log" spaces by ratio for a range spanning orders of magnitude. Requires min > 0. Defaults to "linear". */ scale?: SliderScale; /** Formats a raw value for display — value labels, tooltip and aria-valuetext. Defaults to String. */ formatValue?: (value: number) => string; /** Track thickness and thumb size, keyed by ControlSize name — its own values, not the field or button scale. Defaults to "sm". */ size?: ControlSize; /** Heading shown above the track. Pass "" to render none. Defaults to "Range". */ label?: string; /** Shows the formatted current value(s) above the track. Defaults to true. */ showValueLabels?: boolean; /** Shows a floating tooltip with the live value while a thumb is being dragged. Defaults to true. */ showTooltip?: boolean; /** Tick marks along the track: an explicit list, or true to draw one at every step. */ marks?: RangeSliderMark[] | boolean; /** Prefix for data-testid on the track and thumb(s). */ testId?: string; /** Fires once when a drag begins (not on a keyboard change) — pairs with onChangeEnd to tell drag and keyboard commits apart. */ onChangeStart?: () => void; } /** Single-thumb shape: a plain number value, the drop-in replacement for a Chakra Slider. */ export interface RangeSliderSingleProps extends RangeSliderSharedProps { /** Controlled value. Omit and use defaultValue for uncontrolled use. */ value?: number; /** Initial value when uncontrolled. Defaults to min. */ defaultValue?: number; /** Fires on every change — during a drag and on each keypress. */ onChange?: (value: number) => void; /** Fires once when an interaction commits (pointer release, or immediately on a keypress). */ onChangeEnd?: (value: number) => void; /** Accessible name for the thumb. Defaults to label, or "Value". */ "aria-label"?: string; /** Minimum allowed gap between thumbs — meaningless with one thumb, so it isn't accepted here. */ minDistance?: never; } /** Dual-thumb shape: a [min, max] tuple value — the generic range slider this component started as. */ export interface RangeSliderRangeProps extends RangeSliderSharedProps { /** Controlled [min, max] value. Omit and use defaultValue for uncontrolled use. */ value?: [number, number]; /** Initial [min, max] value when uncontrolled. Defaults to [min, max]. */ defaultValue?: [number, number]; /** Fires on every change — during a drag and on each keypress. */ onChange?: (value: [number, number]) => void; /** Fires once when an interaction commits (pointer release, or immediately on a keypress). */ onChangeEnd?: (value: [number, number]) => void; /** Minimum allowed gap between the two thumbs, in value units. Defaults to 0. */ minDistance?: number; /** Accessible name for the lower thumb. Defaults to "Minimum". */ minThumbLabel?: string; /** Accessible name for the upper thumb. Defaults to "Maximum". */ maxThumbLabel?: string; } /** Discriminated by the shape of value/defaultValue — pass a number for one thumb, a [number, number] tuple for two. */ export type RangeSliderProps = RangeSliderSingleProps | RangeSliderRangeProps;