bits-ui 1.7.0 → 2.1.0

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

@@ -1,21 +1,26 @@
 import { type Box, type ReadableBox } from "svelte-toolbelt";
+import { Context } from "runed";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
-import type { Direction, Orientation } from "../../shared/index.js";
+import type { Direction, Orientation, SliderThumbPositioning } from "../../shared/index.js";
+import type { SliderLabelPosition } from "./types.js";
 type SliderBaseRootStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
     orientation: Orientation;
     min: number;
     max: number;
-    step: number;
+    step: number | number[];
     dir: Direction;
     autoSort: boolean;
+    thumbPositioning: SliderThumbPositioning;
+    trackPadding?: number;
 }>>;
 declare class SliderBaseRootState {
     #private;
     readonly opts: SliderBaseRootStateProps;
     isActive: boolean;
     direction: "rl" | "lr" | "tb" | "bt";
+    normalizedSteps: number[];
     constructor(opts: SliderBaseRootStateProps);
     isThumbActive(_index: number): boolean;
     getAllThumbs: () => HTMLElement[];
@@ -40,6 +45,7 @@ declare class SliderSingleRootState extends SliderBaseRootState {
     readonly opts: SliderSingleRootStateProps;
     isMulti: false;
     constructor(opts: SliderSingleRootStateProps);
+    isTickValueSelected: (tickValue: number) => boolean;
     applyPosition({ clientXY, start, end }: {
         clientXY: number;
         start: number;
@@ -57,7 +63,7 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         readonly "aria-disabled": "true" | "false";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-value": number;
-        readonly tabindex: 0 | -1;
+        readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
         readonly "data-slider-thumb": "";
     }[];
@@ -67,13 +73,30 @@ declare class SliderSingleRootState extends SliderBaseRootState {
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
+        readonly "data-selected": "" | undefined;
         readonly style: import("../../shared/index.js").StyleProperties;
         readonly "data-slider-tick": "";
     }[];
     ticksRenderArr: number[];
+    tickItemsArr: {
+        value: number;
+        index: number;
+    }[];
+    thumbItemsArr: {
+        value: number;
+        index: number;
+    }[];
     snippetProps: {
         readonly ticks: number[];
         readonly thumbs: number[];
+        readonly tickItems: {
+            value: number;
+            index: number;
+        }[];
+        readonly thumbItems: {
+            value: number;
+            index: number;
+        }[];
     };
 }
 type SliderMultiRootStateProps = SliderBaseRootStateProps & ReadableBoxedValues<{
@@ -91,6 +114,7 @@ declare class SliderMultiRootState extends SliderBaseRootState {
     } | null;
     currentThumbIdx: number;
     constructor(opts: SliderMultiRootStateProps);
+    isTickValueSelected: (tickValue: number) => boolean;
     isThumbActive(index: number): boolean;
     applyPosition({ clientXY, activeThumbIdx, start, end, }: {
         clientXY: number;
@@ -111,7 +135,7 @@ declare class SliderMultiRootState extends SliderBaseRootState {
         readonly "aria-disabled": "true" | "false";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-value": number | undefined;
-        readonly tabindex: 0 | -1;
+        readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
         readonly "data-slider-thumb": "";
     }[];
@@ -125,9 +149,25 @@ declare class SliderMultiRootState extends SliderBaseRootState {
         readonly "data-slider-tick": "";
     }[];
     ticksRenderArr: number[];
+    tickItemsArr: {
+        value: number;
+        index: number;
+    }[];
+    thumbItemsArr: {
+        value: number;
+        index: number;
+    }[];
     snippetProps: {
         readonly ticks: number[];
         readonly thumbs: number[];
+        readonly tickItems: {
+            value: number;
+            index: number;
+        }[];
+        readonly thumbItems: {
+            value: number;
+            index: number;
+        }[];
     };
 }
 type SliderRangeStateProps = WithRefProps;
@@ -1810,6 +1850,8 @@ declare class SliderThumbState {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly "data-active": "" | undefined;
+        readonly "data-disabled": "" | undefined;
+        readonly tabindex: 0 | -1;
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
@@ -1817,13 +1859,15 @@ declare class SliderThumbState {
         readonly "aria-disabled": "true" | "false";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-value": number;
-        readonly tabindex: 0 | -1;
+        readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
         readonly "data-slider-thumb": "";
     } | {
         readonly id: string;
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly "data-active": "" | undefined;
+        readonly "data-disabled": "" | undefined;
+        readonly tabindex: 0 | -1;
         readonly role: "slider";
         readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
@@ -1831,7 +1875,7 @@ declare class SliderThumbState {
         readonly "aria-disabled": "true" | "false";
         readonly "aria-orientation": "horizontal" | "vertical";
         readonly "data-value": number | undefined;
-        readonly tabindex: 0 | -1;
+        readonly "data-orientation": "horizontal" | "vertical";
         readonly style: import("../../shared/index.js").StyleProperties;
         readonly "data-slider-thumb": "";
     };
@@ -1849,6 +1893,7 @@ declare class SliderTickState {
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-bounded": "" | undefined;
         readonly "data-value": number;
+        readonly "data-selected": "" | undefined;
         readonly style: import("../../shared/index.js").StyleProperties;
         readonly "data-slider-tick": "";
     } | {
@@ -1861,14 +1906,56 @@ declare class SliderTickState {
         readonly "data-slider-tick": "";
     };
 }
+type SliderTickLabelStateProps = WithRefProps & ReadableBoxedValues<{
+    index: number;
+    position?: SliderLabelPosition;
+}>;
+declare class SliderTickLabelState {
+    readonly opts: SliderTickLabelStateProps;
+    readonly root: SliderRootState;
+    constructor(opts: SliderTickLabelStateProps, root: SliderRootState);
+    props: {
+        readonly id: string;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-bounded": "" | undefined;
+        readonly "data-value": number;
+        readonly "data-selected": "" | undefined;
+        readonly "data-position": SliderLabelPosition;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-tick-label": "";
+    };
+}
+type SliderThumbLabelStateProps = WithRefProps & ReadableBoxedValues<{
+    index: number;
+    position?: SliderLabelPosition;
+}>;
+declare class SliderThumbLabelState {
+    readonly opts: SliderThumbLabelStateProps;
+    readonly root: SliderRootState;
+    constructor(opts: SliderThumbLabelStateProps, root: SliderRootState);
+    props: {
+        readonly id: string;
+        readonly "data-orientation": "horizontal" | "vertical";
+        readonly "data-disabled": "" | undefined;
+        readonly "data-value": number;
+        readonly "data-active": "" | undefined;
+        readonly "data-position": SliderLabelPosition;
+        readonly style: import("../../shared/index.js").StyleProperties;
+        readonly "data-slider-thumb-label": "";
+    };
+}
 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 const SliderRootContext: Context<SliderRootState>;
 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;
+export declare function useSliderTickLabel(props: SliderTickLabelStateProps): SliderTickLabelState;
+export declare function useSliderThumbLabel(props: SliderThumbLabelStateProps): SliderThumbLabelState;
 export {};