import { ReactNode } from 'react'; import { FormValidator } from '@viasat/beam-shared/components/form'; export type MarksSource = 'step' | 'valueAxis' | 'none'; /** * Base props shared between Single and Dual slider modes */ interface BaseSliderProps extends Omit, 'onChange' | 'value' | 'defaultValue'> { /** * Specify the range of the Slider, minimum and maximum values * @default [0, 100] */ range?: [number, number]; /** * Specify the label for the Slider */ label?: string | React.ReactNode; /** * Specify whether the Slider is read-only * @default false */ readOnly?: boolean; /** * Specify whether the Slider is disabled * @default false */ disabled?: boolean; /** * Specify the step value of the Slider * @default 1 */ step?: number; /** * Specify custom className for the Slider container */ className?: string; /** * Specify error text and display error state of Slider */ error?: string; /** * Specify the name of the Slider input, useful for form submission. */ name?: string; /** * Specify the value axis marks & labels */ valueAxis?: { [value: number]: string; }; /** * Show the value axis under the Slider * @default true */ showValueAxisLabels?: boolean; /** * Set the source of the marks. `step` will render marks based on the step value, `valueAxis` based on the `valueAxis` prop and `none` will not render any marks * @default none */ marksSource?: MarksSource; /** * Restrict Slider value to only the provided value axis * @default false */ restrictToValueAxis?: boolean; /** * Specify whether or not the Slider should display the TextField * @default false */ showTextField?: boolean; /** * Specify the width of the TextField * @default 3.625rem */ textFieldWidth?: string; /** * Specify whether the tooltip should be always visible * @default false */ persistentTooltip?: boolean; /** * Specify whether to hide the tooltip on the slider handle * @default false */ disabledTooltip?: boolean; /** * Specify HelperText for Slider */ helperText?: ReactNode; /** * Specify content to display before selection */ contentBefore?: ReactNode; /** * Specify content to display after selection */ contentAfter?: ReactNode; /** * Specify a minimum value for the Slider value */ min?: number; /** * Specify a maximum value for the Slider value */ max?: number; /** * Validation rules for the Slider component */ validationRules?: FormValidator[]; } /** * Props for single-value slider mode */ export interface SingleSliderProps extends BaseSliderProps { /** * The value of the Slider (controlled mode) */ value?: number; /** * Specify the initial value of the Slider */ defaultValue?: number; /** * Callback fired when the value changes */ onChange?: (value: number) => void; } /** * Props for dual-handle slider mode */ export interface DualSliderProps extends BaseSliderProps { /** * The value of the Slider (controlled mode). [min, max] */ value?: [number, number]; /** * Specify the initial value of the Slider. [min, max] */ defaultValue?: [number, number]; /** * Callback fired when the value changes */ onChange?: (value: [number, number]) => void; /** * Minimum gap between the two handles. Defaults to step value */ minGap?: number; } /** * Union type for public API - supports both single and dual modes */ export type SliderProps = SingleSliderProps | DualSliderProps; export {};