bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/slider/slider.svelte.d.ts

@@ -1,11 +1,8 @@
-/**
- * This logic is adapted from the @melt-ui/svelte slider, which was mostly written by
- * Abdelrahman (https://github.com/abdel-17)
- */
+import { type Box, type ReadableBox } from "svelte-toolbelt";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { OnChangeFn, WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
 import type { Direction, Orientation } from "../../shared/index.js";
-type SliderRootStateProps = WithRefProps<ReadableBoxedValues<{
+type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
     min: number;
@@ -13,40 +10,101 @@ type SliderRootStateProps = WithRefProps<ReadableBoxedValues<{
     step: number;
     dir: Direction;
     autoSort: boolean;
-    onValueChangeEnd: OnChangeFn<number[]>;
+}>>;
+declare class SliderBaseRootState {
+    #private;
+    id: SliderBaseRootStateProps["id"];
+    ref: SliderBaseRootStateProps["ref"];
+    disabled: SliderBaseRootStateProps["disabled"];
+    orientation: SliderBaseRootStateProps["orientation"];
+    min: SliderBaseRootStateProps["min"];
+    max: SliderBaseRootStateProps["max"];
+    step: SliderBaseRootStateProps["step"];
+    dir: SliderBaseRootStateProps["dir"];
+    autoSort: SliderBaseRootStateProps["autoSort"];
+    isActive: boolean;
+    direction: "rl" | "lr" | "tb" | "bt";
+    constructor(props: SliderBaseRootStateProps);
+    getAllThumbs: () => HTMLElement[];
+    props: {
+        readonly id: string;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-disabled": "" | undefined;
+        readonly style: {
+            readonly touchAction: string | undefined;
+        };
+        readonly "data-slider-root": "";
+    };
+}
+type SliderSingleRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
+    onValueCommit: OnChangeFn<number>;
+}> & WritableBoxedValues<{
+    value: number;
+}>;
+declare class SliderSingleRootState extends SliderBaseRootState {
+    value: SliderSingleRootStateProps["value"];
+    onValueCommit: SliderSingleRootStateProps["onValueCommit"];
+    isMulti: false;
+    constructor(props: SliderSingleRootStateProps);
+    applyPosition({ clientXY, start, end }: {
+        clientXY: number;
+        start: number;
+        end: number;
+    }): void;
+    updateValue: (newValue: number) => void;
+    handlePointerMove: (e: PointerEvent) => void;
+    handlePointerDown: (e: PointerEvent) => void;
+    handlePointerUp: () => void;
+    getPositionFromValue: (thumbValue: number) => number;
+    thumbsPropsArr: {
+        readonly role: "slider";
+        readonly "aria-valuemin": number;
+        readonly "aria-valuemax": number;
+        readonly "aria-valuenow": number;
+        readonly "aria-disabled": "true" | "false";
+        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "data-value": number;
+        readonly tabindex: 0 | -1;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-thumb": "";
+    }[];
+    thumbsRenderArr: number[];
+    ticksPropsArr: {
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-bounded": "" | undefined;
+        readonly "data-value": number;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-tick": "";
+    }[];
+    ticksRenderArr: number[];
+    snippetProps: {
+        readonly ticks: number[];
+        readonly thumbs: number[];
+    };
+}
+type SliderMultiRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
+    onValueCommit: OnChangeFn<number[]>;
 }> & WritableBoxedValues<{
     value: number[];
-}>>;
-declare class SliderRootState {
-    id: SliderRootStateProps["id"];
-    ref: SliderRootStateProps["ref"];
-    value: SliderRootStateProps["value"];
-    disabled: SliderRootStateProps["disabled"];
-    orientation: SliderRootStateProps["orientation"];
-    min: SliderRootStateProps["min"];
-    max: SliderRootStateProps["max"];
-    step: SliderRootStateProps["step"];
-    dir: SliderRootStateProps["dir"];
-    autoSort: SliderRootStateProps["autoSort"];
+}>;
+declare class SliderMultiRootState extends SliderBaseRootState {
+    #private;
+    value: SliderMultiRootStateProps["value"];
+    isMulti: true;
     activeThumb: {
         node: HTMLElement;
         idx: number;
     } | null;
-    isActive: boolean;
     currentThumbIdx: number;
-    direction: "rl" | "lr" | "tb" | "bt";
-    onValueChangeEnd: SliderRootStateProps["onValueChangeEnd"];
-    constructor(props: SliderRootStateProps);
-    applyPosition: ({ clientXY, activeThumbIdx, start, end, }: {
+    onValueCommit: SliderMultiRootStateProps["onValueCommit"];
+    constructor(props: SliderMultiRootStateProps);
+    applyPosition({ clientXY, activeThumbIdx, start, end, }: {
         clientXY: number;
         activeThumbIdx: number;
         start: number;
         end: number;
-    }) => void;
-    getClosestThumb: (e: PointerEvent) => {
-        node: HTMLElement;
-        idx: number;
-    } | undefined;
+    }): void;
     handlePointerMove: (e: PointerEvent) => void;
     handlePointerDown: (e: PointerEvent) => void;
     handlePointerUp: () => void;
@@ -58,7 +116,7 @@ declare class SliderRootState {
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number | undefined;
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-disabled": "true" | "false";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-value": number | undefined;
         readonly tabindex: 0 | -1;
@@ -79,18 +137,6 @@ declare class SliderRootState {
         readonly ticks: number[];
         readonly thumbs: number[];
     };
-    props: {
-        readonly id: string;
-        readonly "data-orientation": "horizontal" | "vertical";
-        readonly "data-disabled": "" | undefined;
-        readonly style: {
-            readonly touchAction: "pan-x" | "pan-y";
-        };
-        readonly "data-slider-root": "";
-    };
-    createThumb: (props: SliderThumbStateProps) => SliderThumbState;
-    createRange: (props: SliderRangeStateProps) => SliderRangeState;
-    createTick: (props: SliderTickStateProps) => SliderTickState;
 }
 type SliderRangeStateProps = WithRefProps;
 declare class SliderRangeState {
@@ -1764,17 +1810,28 @@ type SliderThumbStateProps = WithRefProps & ReadableBoxedValues<{
 declare class SliderThumbState {
     #private;
     constructor(props: SliderThumbStateProps, root: SliderRootState);
-    updateValue: (newValue: number) => void;
-    moveValue: (thumbValue: number, increment: number) => void;
-    handleArrowKey: (thumbValue: number, isPositiveDirection: boolean, isHorizontal: boolean, e: KeyboardEvent) => void;
+    onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
+        readonly role: "slider";
+        readonly "aria-valuemin": number;
+        readonly "aria-valuemax": number;
+        readonly "aria-valuenow": number;
+        readonly "aria-disabled": "true" | "false";
+        readonly "aria-orientation": "horizontal" | "vertical";
+        readonly "data-value": number;
+        readonly tabindex: 0 | -1;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-thumb": "";
+    } | {
+        readonly id: string;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
         readonly "aria-valuenow": number | undefined;
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-disabled": "true" | "false";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-value": number | undefined;
         readonly tabindex: 0 | -1;
@@ -1796,9 +1853,23 @@ declare class SliderTickState {
         readonly "data-value": number;
         readonly style: import("../../shared/index.js").StyleProperties;
         readonly "data-slider-tick": "";
+    } | {
+        readonly id: string;
+        readonly "data-disabled": "" | undefined;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-bounded": "" | undefined;
+        readonly "data-value": number;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-tick": "";
     };
 }
-export declare function useSliderRoot(props: SliderRootStateProps): SliderRootState;
+type SliderRootState = SliderSingleRootState | SliderMultiRootState;
+type InitSliderRootStateProps = {
+    type: "single" | "multiple";
+    value: Box<number> | Box<number[]>;
+    onValueCommit: ReadableBox<OnChangeFn<number>> | ReadableBox<OnChangeFn<number[]>>;
+} & Omit<SliderBaseRootStateProps, "type">;
+export declare function useSliderRoot(props: InitSliderRootStateProps): SliderRootState;
 export declare function useSliderRange(props: SliderRangeStateProps): SliderRangeState;
 export declare function useSliderThumb(props: SliderThumbStateProps): SliderThumbState;
 export declare function useSliderTick(props: SliderTickStateProps): SliderTickState;