bits-ui 1.8.0 → 2.2.0

package/dist/bits/slider/helpers.js

@@ -64,3 +64,125 @@ export function getTickStyles(direction, tickPosition, offsetPercentage) {
     }
     return style;
 }
+export function getTickLabelStyles(direction, tickPosition, labelPosition = "top") {
+    const style = {
+        position: "absolute",
+    };
+    if (direction === "lr" || direction === "rl") {
+        // Horizontal slider
+        style.left = direction === "lr" ? `${tickPosition}%` : undefined;
+        style.right = direction === "rl" ? `${tickPosition}%` : undefined;
+        style.translate = "-50% 0";
+        if (labelPosition === "top") {
+            style.bottom = "100%";
+        }
+        else if (labelPosition === "bottom") {
+            style.top = "100%";
+        }
+    }
+    else {
+        // Vertical slider - use same positioning as ticks
+        if (direction === "tb") {
+            style.top = `${tickPosition}%`;
+        }
+        else {
+            style.bottom = `${tickPosition}%`;
+        }
+        style.translate = "0 50%";
+        if (labelPosition === "left") {
+            style.right = "100%";
+        }
+        else if (labelPosition === "right") {
+            style.left = "100%";
+        }
+    }
+    return style;
+}
+export function getThumbLabelStyles(direction, thumbPosition, labelPosition = "top") {
+    const style = {
+        position: "absolute",
+    };
+    if (direction === "lr" || direction === "rl") {
+        // Horizontal slider
+        style.left = direction === "lr" ? `${thumbPosition}%` : undefined;
+        style.right = direction === "rl" ? `${thumbPosition}%` : undefined;
+        style.translate = "-50% 0";
+        if (labelPosition === "top") {
+            style.bottom = "100%";
+        }
+        else if (labelPosition === "bottom") {
+            style.top = "100%";
+        }
+    }
+    else {
+        // Vertical slider
+        if (direction === "tb") {
+            style.top = `${thumbPosition}%`;
+        }
+        else {
+            style.bottom = `${thumbPosition}%`;
+        }
+        style.translate = "0 -50%";
+        if (labelPosition === "left") {
+            style.right = "100%";
+        }
+        else if (labelPosition === "right") {
+            style.left = "100%";
+        }
+    }
+    return style;
+}
+/**
+ * Normalizes step to always be a sorted array of valid values within min/max range
+ */
+export function normalizeSteps(step, min, max) {
+    if (typeof step === "number") {
+        // generate regular steps - match original behavior exactly
+        const difference = max - min;
+        let count = Math.ceil(difference / step);
+        if (difference % step === 0) {
+            count++;
+        }
+        const steps = [];
+        for (let i = 0; i < count; i++) {
+            const value = min + i * step;
+            steps.push(value);
+        }
+        return steps;
+    }
+    return [...new Set(step)].filter((value) => value >= min && value <= max).sort((a, b) => a - b);
+}
+/**
+ * Snaps a value to the nearest step in a custom steps array
+ */
+export function snapValueToCustomSteps(value, steps) {
+    if (steps.length === 0)
+        return value;
+    // Find the closest step
+    let closest = steps[0];
+    let minDistance = Math.abs(value - closest);
+    for (const step of steps) {
+        const distance = Math.abs(value - step);
+        if (distance < minDistance) {
+            minDistance = distance;
+            closest = step;
+        }
+    }
+    return closest;
+}
+/**
+ * Gets the next/previous step value for keyboard navigation
+ */
+export function getAdjacentStepValue(currentValue, steps, direction) {
+    const currentIndex = steps.indexOf(currentValue);
+    if (currentIndex === -1) {
+        // current value is not in steps, snap to nearest
+        return snapValueToCustomSteps(currentValue, steps);
+    }
+    if (direction === "next") {
+        return currentIndex < steps.length - 1 ? steps[currentIndex + 1] : currentValue;
+    }
+    else {
+        return currentIndex > 0 ? steps[currentIndex - 1] : currentValue;
+    }
+}

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

@@ -1,22 +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, 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[];
@@ -41,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;
@@ -58,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": "";
     }[];
@@ -68,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<{
@@ -92,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;
@@ -112,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": "";
     }[];
@@ -126,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;
@@ -1811,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;
@@ -1818,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;
@@ -1832,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": "";
     };
@@ -1850,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": "";
     } | {
@@ -1862,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 {};