import * as solid_js from 'solid-js'; import { Accessor, ValidComponent, Setter, ComponentProps, JSX } from 'solid-js'; import { ValidationState, Orientation } from '@kobalte/utils'; import { ElementOf, PolymorphicProps } from './polymorphic/index.js'; import { F as FormControlDataSet } from './form-control-description-330657bc.js'; import { c as CollectionItemWithRef } from './types-f8ae18e5.js'; interface SliderState { readonly values: Accessor; getThumbValue(index: number): number; setThumbValue(index: number, value: number): void; getThumbPercent(index: number): number; setThumbPercent(index: number, percent: number): void; isThumbDragging(index: number): boolean; setThumbDragging(index: number, dragging: boolean): void; readonly focusedThumb: Accessor; setFocusedThumb(index: number | undefined): void; getValuePercent(value: number): number; getThumbValueLabel(index: number): string; getFormattedValue(value: number): string; getThumbMinValue(index: number): number; getThumbMaxValue(index: number): number; getPercentValue(percent: number): number; isThumbEditable(index: number): boolean; setThumbEditable(index: number, editable: boolean): void; incrementThumb(index: number, stepSize?: number): void; decrementThumb(index: number, stepSize?: number): void; readonly step: Accessor; readonly pageSize: Accessor; readonly orientation: Accessor<"horizontal" | "vertical">; readonly isDisabled: Accessor; setValues: (next: number[] | ((prev: number[]) => number[])) => void; resetValues: () => void; } interface GetValueLabelParams { values: number[]; min: number; max: number; } interface SliderRootOptions { /** The slider values. */ value?: number[]; /** The value of the slider when initially rendered. */ defaultValue?: number[]; /** Called when the value changes. */ onChange?: (value: number[]) => void; /** Called when the value changes at the end of an interaction. */ onChangeEnd?: (value: number[]) => void; /** * Whether the slider is visually inverted. * @default false */ inverted?: boolean; /** * The minimum slider value. * @default 0 */ minValue?: number; /** * The maximum slider value. * @default 100 */ maxValue?: number; /** * The step amount. * @default 1 */ step?: number; /** * The minimum permitted steps between multiple thumbs. * @default 0 */ minStepsBetweenThumbs?: number; /** * A function to get the accessible label text representing the current value in a human-readable format. * If not provided, the value label will be read as a percentage of the max value. */ getValueLabel?: (params: GetValueLabelParams) => string; /** * The orientation of the slider. * @default horizontal */ orientation?: "horizontal" | "vertical"; /** * A unique identifier for the component. * The id is used to generate id attributes for nested components. * If no id prop is provided, a generated id will be used. */ id?: string; /** * The name of the slider, used when submitting an HTML form. * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */ name?: string; /** Whether the slider should display its "valid" or "invalid" visual styling. */ validationState?: ValidationState; /** Whether the user must fill the slider before the owning form can be submitted. */ required?: boolean; /** Whether the slider is disabled. */ disabled?: boolean; /** Whether the slider is read only. */ readOnly?: boolean; } interface SliderRootCommonProps { id: string; ref: T | ((el: T) => void); } interface SliderRootRenderProps extends SliderRootCommonProps, SliderDataSet { role: "group"; } type SliderRootProps = SliderRootOptions & Partial>>; declare function SliderRoot(props: PolymorphicProps>): solid_js.JSX.Element; interface SliderDataSet extends FormControlDataSet { "data-orientation": "vertical" | "horizontal" | undefined; } type Side = "left" | "top" | "bottom" | "right"; interface SliderContextValue { dataset: Accessor; state: SliderState; thumbs: Accessor; setThumbs: Setter; onSlideStart: ((index: number, value: number) => void) | undefined; onSlideMove: ((deltas: { deltaX: number; deltaY: number; }) => void) | undefined; onSlideEnd: (() => void) | undefined; onStepKeyDown: (event: KeyboardEvent, index: number) => void; isSlidingFromLeft: () => boolean; isSlidingFromBottom: () => boolean; trackRef: Accessor; startEdge: Accessor; endEdge: Accessor; minValue: Accessor; maxValue: Accessor; inverted: Accessor; registerTrack: (ref: HTMLElement) => void; generateId: (part: string) => string; getValueLabel: ((params: GetValueLabelParams) => string) | undefined; } declare function useSliderContext(): SliderContextValue; interface SliderInputProps extends ComponentProps<"input"> { style?: JSX.CSSProperties | string; } /** * The native html input that is visually hidden in the slider thumb. */ declare function SliderInput(props: SliderInputProps): JSX.Element; interface SliderThumbOptions { } interface SliderThumbCommonProps { id: string; ref: T | ((el: T) => void); style?: JSX.CSSProperties | string; onKeyDown: JSX.EventHandlerUnion; onPointerDown: JSX.EventHandlerUnion; onPointerMove: JSX.EventHandlerUnion; onPointerUp: JSX.EventHandlerUnion; onFocus: JSX.EventHandlerUnion; onBlur: JSX.EventHandlerUnion; "aria-label": string | undefined; "aria-labelledby": string | undefined; "aria-describedby": string | undefined; } interface SliderThumbRenderProps extends SliderThumbCommonProps, SliderDataSet { role: "slider"; tabIndex: 0 | undefined; "aria-valuetext": string; "aria-valuemin": number; "aria-valuenow": number | undefined; "aria-valuemax": number; "aria-orientation": Orientation; } type SliderThumbProps = SliderThumbOptions & Partial>>; declare function SliderThumb(props: PolymorphicProps>): JSX.Element; interface SliderTrackOptions { } interface SliderTrackCommonProps { onPointerDown: JSX.EventHandlerUnion; onPointerMove: JSX.EventHandlerUnion; onPointerUp: JSX.EventHandlerUnion; } interface SliderTrackRenderProps extends SliderTrackCommonProps, SliderDataSet { } type SliderTrackProps = SliderTrackOptions & Partial>>; /** * The component that visually represents the slider track. * Act as a container for `Slider.Fill`. */ declare function SliderTrack(props: PolymorphicProps>): JSX.Element; interface SliderValueLabelOptions { } interface SliderValueLabelCommonProps { } interface SliderValueLabelRenderProps extends SliderValueLabelCommonProps, SliderDataSet { children: JSX.Element; } type SliderValueLabelProps = SliderValueLabelOptions & Partial>>; /** * The accessible label text representing the current value in a human-readable format. */ declare function SliderValueLabel(props: PolymorphicProps>): JSX.Element; export { GetValueLabelParams as G, SliderDataSet as S, SliderRoot as a, SliderInput as b, SliderThumb as c, SliderTrack as d, SliderValueLabel as e, SliderContextValue as f, SliderInputProps as g, SliderRootCommonProps as h, SliderRootOptions as i, SliderRootProps as j, SliderRootRenderProps as k, SliderThumbCommonProps as l, SliderThumbOptions as m, SliderThumbProps as n, SliderThumbRenderProps as o, SliderTrackCommonProps as p, SliderTrackOptions as q, SliderTrackProps as r, SliderTrackRenderProps as s, SliderValueLabelCommonProps as t, SliderValueLabelOptions as u, SliderValueLabelProps as v, SliderValueLabelRenderProps as w, useSliderContext as x };