@zag-js/slider 0.23.0 → 0.25.0

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import * as _zag_js_types from '@zag-js/types';
 import { RequiredBy, PropTypes, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
@@ -7,35 +6,47 @@ import { StateMachine } from '@zag-js/core';
 declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "thumb" | "output" | "track" | "range" | "control" | "markerGroup" | "marker">;
 
 interface ValueChangeDetails {
-    value: number;
+    value: number[];
+}
+interface FocusChangeDetails {
+    focusedIndex: number;
+    value: number[];
 }
 type ElementIds = Partial<{
     root: string;
-    thumb: string;
+    thumb(index: number): string;
     control: string;
     track: string;
     range: string;
     label: string;
     output: string;
-    hiddenInput: string;
+    marker(index: number): string;
 }>;
 interface PublicContext extends DirectionProperty, CommonProperties {
     /**
-     * The ids of the elements in the slider. Useful for composition.
+     * The ids of the elements in the range slider. Useful for composition.
      */
     ids?: ElementIds;
     /**
-     * The value of the slider
+     * The aria-label of each slider thumb. Useful for providing an accessible name to the slider
      */
-    value: number;
+    "aria-label"?: string[];
     /**
-     * The name associated with the slider (when used in a form)
+     * The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider
+     */
+    "aria-labelledby"?: string[];
+    /**
+     * The name associated with each slider thumb (when used in a form)
      */
     name?: string;
     /**
      * The associate form of the underlying input element.
      */
     form?: string;
+    /**
+     * The value of the range slider
+     */
+    value: number[];
     /**
      * Whether the slider is disabled
      */
@@ -45,58 +56,50 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      */
     readOnly?: boolean;
     /**
-     * Whether the slider value is invalid
+     * Whether the slider is invalid
      */
     invalid?: boolean;
     /**
-     * The minimum value of the slider
-     */
-    min: number;
-    /**
-     * The maximum value of the slider
+     * Function invoked when the value of the slider changes
      */
-    max: number;
+    onValueChange?(details: ValueChangeDetails): void;
     /**
-     * The step value of the slider
+     * Function invoked when the slider value change is done
      */
-    step: number;
+    onValueChangeEnd?(details: ValueChangeDetails): void;
     /**
-     * The orientation of the slider
+     * Function invoked when the slider's focused index changes
      */
-    orientation?: "vertical" | "horizontal";
+    onFocusChange?(details: FocusChangeDetails): void;
     /**
-     * - "start": Useful when the value represents an absolute value
-     * - "center": Useful when the value represents an offset (relative)
+     * Function that returns a human readable value for the slider thumb
      */
-    origin?: "start" | "center";
+    getAriaValueText?(value: number, index: number): string;
     /**
-     * The aria-label of the slider. Useful for providing an accessible name to the slider
-     */
-    "aria-label"?: string;
-    /**
-     * The `id` of the element that labels the slider. Useful for providing an accessible name to the slider
+     * The minimum value of the slider
      */
-    "aria-labelledby"?: string;
+    min: number;
     /**
-     * Whether to focus the slider thumb after interaction (scrub and keyboard)
+     * The maximum value of the slider
      */
-    focusThumbOnChange?: boolean;
+    max: number;
     /**
-     * Function that returns a human readable value for the slider
+     * The step value of the slider
      */
-    getAriaValueText?(value: number): string;
+    step: number;
     /**
-     * Function invoked when the value of the slider changes
+     * The minimum permitted steps between multiple thumbs.
      */
-    onValueChange?(details: ValueChangeDetails): void;
+    minStepsBetweenThumbs: number;
     /**
-     * Function invoked when the slider value change is done
+     * The orientation of the slider
      */
-    onValueChangeEnd?(details: ValueChangeDetails): void;
+    orientation: "vertical" | "horizontal";
     /**
-     * Function invoked when the slider value change is started
+     * - "start": Useful when the value represents an absolute value
+     * - "center": Useful when the value represents an offset (relative)
      */
-    onValueChangeStart?(details: ValueChangeDetails): void;
+    origin?: "start" | "center";
     /**
      * The alignment of the slider thumb relative to the track
      * - `center`: the thumb will extend beyond the bounds of the slider track.
@@ -104,32 +107,40 @@ interface PublicContext extends DirectionProperty, CommonProperties {
      */
     thumbAlignment?: "contain" | "center";
     /**
-     * The slider thumb dimensions.If not provided, the thumb size will be measured automatically.
+     * The slider thumbs dimensions
      */
-    thumbSize: Size | null;
+    thumbSize: {
+        width: number;
+        height: number;
+    } | null;
 }
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
     /**
      * @computed
-     * Whether the slider is interactive
+     * Whether the slider thumb has been measured
      */
-    isInteractive: boolean;
+    hasMeasuredThumbSize: boolean;
     /**
      * @computed
-     * Whether the thumb size has been measured
+     * Whether the slider is interactive
      */
-    hasMeasuredThumbSize: boolean;
+    isInteractive: boolean;
     /**
      * @computed
-     * Whether the slider is horizontal
+     * The raw value of the space between each thumb
      */
-    isHorizontal: boolean;
+    spacing: number;
     /**
      * @computed
      * Whether the slider is vertical
      */
     isVertical: boolean;
+    /**
+     * @computed
+     * Whether the slider is horizontal
+     */
+    isHorizontal: boolean;
     /**
      * @computed
      * Whether the slider is in RTL mode
@@ -137,9 +148,9 @@ type ComputedContext = Readonly<{
     isRtl: boolean;
     /**
      * @computed
-     * The value of the slider as a percentage
+     * The percentage of the slider value relative to the slider min/max
      */
-    valuePercent: number;
+    valuePercent: number[];
     /**
      * @computed
      * Whether the slider is disabled
@@ -154,135 +165,87 @@ interface MachineState {
 }
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-interface Point {
-    x: number;
-    y: number;
-}
-interface Size {
-    width: number;
-    height: number;
-}
 interface MarkerProps {
     value: number;
 }
+interface ThumbProps {
+    index: number;
+}
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**
-     * Whether the slider is focused.
+     * The value of the slider.
      */
-    isFocused: boolean;
+    value: number[];
     /**
      * Whether the slider is being dragged.
      */
     isDragging: boolean;
     /**
-     * The value of the slider.
+     * Whether the slider is focused.
      */
-    value: number;
+    isFocused: boolean;
     /**
-     * The value of the slider as a percent.
+     * Function to set the value of the slider.
      */
-    percent: number;
+    setValue(value: number[]): void;
     /**
-     * Function to set the value of the slider.
+     * Returns the value of the thumb at the given index.
      */
-    setValue(value: number): void;
+    getThumbValue(index: number): number;
     /**
-     * Returns the value of the slider at the given percent.
+     * Sets the value of the thumb at the given index.
      */
-    getPercentValue: (percent: number) => number;
+    setThumbValue(index: number, value: number): void;
     /**
-     * Returns the percent of the slider at the given value.
+     * Returns the percent of the thumb at the given index.
      */
     getValuePercent: (value: number) => number;
     /**
-     * Function to focus the slider.
+     * Returns the value of the thumb at the given percent.
      */
-    focus(): void;
+    getPercentValue: (percent: number) => number;
     /**
-     * Function to increment the value of the slider by the step.
+     * Returns the percent of the thumb at the given index.
      */
-    increment(): void;
+    getThumbPercent(index: number): number;
     /**
-     * Function to decrement the value of the slider by the step.
+     * Sets the percent of the thumb at the given index.
      */
-    decrement(): void;
-    rootProps: T["element"];
+    setThumbPercent(index: number, percent: number): void;
+    /**
+     * Returns the min value of the thumb at the given index.
+     */
+    getThumbMin(index: number): number;
+    /**
+     * Returns the max value of the thumb at the given index.
+     */
+    getThumbMax(index: number): number;
+    /**
+     * Function to increment the value of the slider at the given index.
+     */
+    increment(index: number): void;
+    /**
+     * Function to decrement the value of the slider at the given index.
+     */
+    decrement(index: number): void;
+    /**
+     * Function to focus the slider. This focuses the first thumb.
+     */
+    focus(): void;
     labelProps: T["label"];
-    thumbProps: T["element"];
-    hiddenInputProps: T["input"];
+    rootProps: T["element"];
     outputProps: T["output"];
     trackProps: T["element"];
+    getThumbProps(props: ThumbProps): T["element"];
+    getHiddenInputProps(props: ThumbProps): T["input"];
     rangeProps: T["element"];
     controlProps: T["element"];
     markerGroupProps: T["element"];
     getMarkerProps(props: MarkerProps): T["element"];
 }
-interface SharedContext {
-    min: number;
-    max: number;
-    step: number;
-    dir?: "ltr" | "rtl";
-    isRtl: boolean;
-    isVertical: boolean;
-    isHorizontal: boolean;
-    value: number;
-    thumbSize: Size | null;
-    thumbAlignment?: "contain" | "center";
-    orientation?: "horizontal" | "vertical";
-    readonly hasMeasuredThumbSize: boolean;
-}
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
-declare const dom: {
-    getRootNode: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
-    }) => Document | ShadowRoot;
-    getDoc: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
-    }) => Document;
-    getWin: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
-    }) => Window & typeof globalThis;
-    getActiveElement: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
-    }) => HTMLElement | null;
-    isActiveElement: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
-    }, elem: HTMLElement | null) => boolean;
-    getById: <T extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
-    }, id: string) => T | null;
-    setValue: <T_1 extends {
-        value: string;
-    }>(elem: T_1 | null, value: string | number | null | undefined) => void;
-} & {
-    getRootId: (ctx: MachineContext) => string;
-    getThumbId: (ctx: MachineContext) => string;
-    getControlId: (ctx: MachineContext) => string;
-    getHiddenInputId: (ctx: MachineContext) => string;
-    getOutputId: (ctx: MachineContext) => string;
-    getTrackId: (ctx: MachineContext) => string;
-    getRangeId: (ctx: MachineContext) => string;
-    getLabelId: (ctx: MachineContext) => string;
-    getMarkerId: (ctx: MachineContext, value: number) => string;
-    getRootEl: (ctx: MachineContext) => HTMLElement | null;
-    getThumbEl: (ctx: MachineContext) => HTMLElement | null;
-    getControlEl: (ctx: MachineContext) => HTMLElement | null;
-    getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
-    getValueFromPoint(ctx: MachineContext, point: Point): number | undefined;
-    dispatchChangeEvent(ctx: MachineContext): void;
-    getThumbOffset: (ctx: SharedContext) => string;
-    getControlStyle: () => _zag_js_types.JSX.CSSProperties;
-    getThumbStyle: (ctx: SharedContext) => _zag_js_types.JSX.CSSProperties;
-    getRangeStyle: (ctx: Pick<SharedContext, "isVertical" | "isRtl">) => _zag_js_types.JSX.CSSProperties;
-    getRootStyle: (ctx: MachineContext) => _zag_js_types.JSX.CSSProperties;
-    getMarkerStyle: (ctx: Pick<SharedContext, "thumbAlignment" | "hasMeasuredThumbSize" | "isHorizontal" | "isRtl">, value: number) => _zag_js_types.JSX.CSSProperties;
-    getLabelStyle: () => _zag_js_types.JSX.CSSProperties;
-    getTrackStyle: () => _zag_js_types.JSX.CSSProperties;
-    getMarkerGroupStyle: () => _zag_js_types.JSX.CSSProperties;
-};
-
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine, dom as unstable__dom };
+export { MachineApi as Api, UserDefinedContext as Context, anatomy, connect, machine };