@primitiv-ui/react 0.1.38 → 0.1.40

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,189 @@
+import type { ReactElement } from "react";
+import type { SliderRangeProps, SliderRootProps, SliderThumbProps, SliderTrackProps } from "./types.js";
+/**
+ * The root of a Slider — a `<span>` that owns the value array, provides
+ * {@link SliderContext} to descendants, and turns pointer interaction on the
+ * track into value changes.
+ *
+ * The value is always an **array of numbers**, one entry per
+ * {@link SliderThumb | `Slider.Thumb`}. A single-thumb slider is `[value]`;
+ * a range slider is `[low, high]`; any number of thumbs is supported.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass {@link SliderRootProps.defaultValue | `defaultValue`}
+ *   (or omit it for a single thumb seeded at `min`). The component owns the
+ *   value internally.
+ * - **Controlled** — pass {@link SliderRootProps.value | `value`} *and*
+ *   {@link SliderRootProps.onValueChange | `onValueChange`} together. The
+ *   parent owns the value; every change defers back through the callback.
+ *
+ * {@link SliderRootProps.onValueCommit | `onValueCommit`} fires once with the
+ * final array when an interaction ends (pointer up, or a keyboard press) —
+ * useful for persisting only the settled value.
+ *
+ * **Form submission.** Pass {@link SliderRootProps.name | `name`} to render a
+ * hidden input per thumb so the values post with a surrounding `<form>`.
+ * Multi-thumb sliders suffix the name with `[]`.
+ *
+ * **Styling hooks.** `data-orientation="horizontal" | "vertical"` and
+ * `data-disabled=""` (when disabled).
+ *
+ * **Reading direction.** `dir` (`"ltr"` / `"rtl"`) sets which end of the
+ * track is the minimum and the arrow-key direction. When omitted, it is
+ * inherited from the nearest {@link DirectionProvider}, falling back to
+ * `"ltr"` when there is no provider.
+ *
+ * **`asChild` prop.** Render any element in place of the default `<span>`.
+ *
+ * @throws if `min` is not less than `max`, or `step` is not greater than 0.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Single-thumb, uncontrolled
+ * ```tsx
+ * <Slider.Root defaultValue={[50]}>
+ *   <Slider.Track><Slider.Range /></Slider.Track>
+ *   <Slider.Thumb />
+ * </Slider.Root>
+ * ```
+ *
+ * @example Range slider, controlled
+ * ```tsx
+ * const [value, setValue] = useState([20, 80]);
+ *
+ * <Slider.Root value={value} onValueChange={setValue}>
+ *   <Slider.Track><Slider.Range /></Slider.Track>
+ *   <Slider.Thumb />
+ *   <Slider.Thumb />
+ * </Slider.Root>
+ * ```
+ */
+export declare function SliderRoot({ min, max, step, minStepsBetweenThumbs, orientation, dir, inverted, disabled, defaultValue, value, onValueChange, onValueCommit, name, asChild, onPointerDown, ref, children, ...rest }: SliderRootProps): ReactElement;
+export declare namespace SliderRoot {
+    var displayName: string;
+}
+/**
+ * The track rail the thumbs travel along. A decorative `<span>` carrying
+ * `data-orientation` and `data-disabled` for CSS. Wrap a
+ * {@link SliderRange | `Slider.Range`} inside it to show the filled portion.
+ *
+ * **`asChild` prop.** Render a consumer element in place of the `<span>`.
+ *
+ * @throws if rendered outside a `Slider.Root`.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example
+ * ```tsx
+ * <Slider.Track>
+ *   <Slider.Range />
+ * </Slider.Track>
+ * ```
+ */
+export declare function SliderTrack({ children, asChild, ...rest }: SliderTrackProps): ReactElement;
+export declare namespace SliderTrack {
+    var displayName: string;
+}
+/**
+ * The filled portion of the track between the lowest and highest thumb (or
+ * from the track start to the single thumb). Its position is set through an
+ * inline `style` computed from the current values, orientation, reading
+ * direction, and `inverted` — consumer `style` is shallow-merged on top.
+ *
+ * **`asChild` prop.** Render a consumer element in place of the `<span>`.
+ *
+ * @throws if rendered outside a `Slider.Root`.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example
+ * ```tsx
+ * <Slider.Track>
+ *   <Slider.Range />
+ * </Slider.Track>
+ * ```
+ */
+export declare function SliderRange({ style, asChild, children, ...rest }: SliderRangeProps): ReactElement;
+export declare namespace SliderRange {
+    var displayName: string;
+}
+/**
+ * A draggable handle — render one `Slider.Thumb` per entry in the value
+ * array, in order. Each is a `<span role="slider">` with `aria-valuemin` /
+ * `aria-valuemax` / `aria-valuenow`, `aria-orientation`, and a `tabIndex` so
+ * it is independently focusable.
+ *
+ * **Keyboard.** Arrow keys move by `step`; `PageUp` / `PageDown` by ten
+ * steps; `Home` / `End` jump to `min` / `max`. Arrow direction follows
+ * orientation, reading direction, and `inverted`. A thumb is clamped between
+ * its neighbours (plus `minStepsBetweenThumbs`).
+ *
+ * **Styling hooks.** `data-orientation` and `data-disabled`. Position is set
+ * via an inline `style` offset; consumer `style` is shallow-merged on top.
+ *
+ * **Accessibility.** Provide an accessible name with `aria-label` /
+ * `aria-labelledby`. `aria-valuenow` always tracks the raw number; when that
+ * number is not self-explanatory to a screen reader (a currency amount, a
+ * date, a named step), pass `aria-valuetext` with the human-readable form
+ * (e.g. `aria-valuetext="$50"`) — it is forwarded straight through to the
+ * element and read in place of the bare number.
+ *
+ * **`asChild` prop.** Render a consumer element in place of the `<span>`;
+ * the slider role, ARIA value attributes, keyboard handler, and ref merge in.
+ *
+ * @throws if rendered outside a `Slider.Root`.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Named value with `aria-valuetext`
+ * ```tsx
+ * <Slider.Thumb aria-label="Price" aria-valuetext={`$${value}`} />
+ * ```
+ */
+export declare function SliderThumb({ style, ref: forwardedRef, onKeyDown, asChild, children, ...rest }: SliderThumbProps): ReactElement;
+export declare namespace SliderThumb {
+    var displayName: string;
+}
+/** Static-property shape of the compound {@link Slider} export: the callable {@link SliderRoot} plus its namespaced sub-components. */
+export type TSliderCompound = typeof SliderRoot & {
+    Root: typeof SliderRoot;
+    Track: typeof SliderTrack;
+    Range: typeof SliderRange;
+    Thumb: typeof SliderThumb;
+};
+/**
+ * Headless, accessible **Slider** — a compound component implementing the
+ * [WAI-ARIA Slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)
+ * (and [Multi-Thumb Slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/)).
+ * The value is always an array, with one thumb per entry. Zero styles ship.
+ *
+ * `Slider` is both callable (an alias of {@link SliderRoot | `Slider.Root`})
+ * and carries its sub-components as static properties.
+ *
+ * - {@link SliderRoot | `Slider.Root`} — value owner, context provider.
+ * - {@link SliderTrack | `Slider.Track`} — the rail the thumbs travel along.
+ * - {@link SliderRange | `Slider.Range`} — the filled portion of the track.
+ * - {@link SliderThumb | `Slider.Thumb`} — a draggable handle; one per value.
+ *
+ * The accessible name belongs on the **Thumb**, which is the `role="slider"`.
+ * The Root renders a plain `<span>` with no role, so an `aria-label` there is
+ * attached to nothing and announced nowhere — a silent failure, because the
+ * slider still looks and behaves correctly. This example used to put it on the
+ * Root.
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from "@primitiv-ui/react";
+ *
+ * <Slider.Root defaultValue={[40]}>
+ *   <Slider.Track><Slider.Range /></Slider.Track>
+ *   <Slider.Thumb aria-label="Volume" />
+ * </Slider.Root>
+ * ```
+ *
+ * @see {@link SliderRoot} for state modes, form submission, and validation.
+ * @see {@link SliderThumb} for keyboard interaction and labelling.
+ */
+declare const SliderCompound: TSliderCompound;
+export { SliderCompound as Slider };

package/dist/Slider/Slider.js

@@ -0,0 +1,253 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDirection } from "../DirectionProvider/index.js";
+import { Slot, composeEventHandlers, composeRefs } from "../Slot/index.js";
+import { SliderContext } from "./SliderContext.js";
+import { useSliderContext, useSliderRoot, useSliderThumb, } from "./hooks/index.js";
+import { getRangeStyle } from "./utils.js";
+/**
+ * The root of a Slider — a `<span>` that owns the value array, provides
+ * {@link SliderContext} to descendants, and turns pointer interaction on the
+ * track into value changes.
+ *
+ * The value is always an **array of numbers**, one entry per
+ * {@link SliderThumb | `Slider.Thumb`}. A single-thumb slider is `[value]`;
+ * a range slider is `[low, high]`; any number of thumbs is supported.
+ *
+ * Supports two state modes, statically discriminated at the type level:
+ *
+ * - **Uncontrolled** — pass {@link SliderRootProps.defaultValue | `defaultValue`}
+ *   (or omit it for a single thumb seeded at `min`). The component owns the
+ *   value internally.
+ * - **Controlled** — pass {@link SliderRootProps.value | `value`} *and*
+ *   {@link SliderRootProps.onValueChange | `onValueChange`} together. The
+ *   parent owns the value; every change defers back through the callback.
+ *
+ * {@link SliderRootProps.onValueCommit | `onValueCommit`} fires once with the
+ * final array when an interaction ends (pointer up, or a keyboard press) —
+ * useful for persisting only the settled value.
+ *
+ * **Form submission.** Pass {@link SliderRootProps.name | `name`} to render a
+ * hidden input per thumb so the values post with a surrounding `<form>`.
+ * Multi-thumb sliders suffix the name with `[]`.
+ *
+ * **Styling hooks.** `data-orientation="horizontal" | "vertical"` and
+ * `data-disabled=""` (when disabled).
+ *
+ * **Reading direction.** `dir` (`"ltr"` / `"rtl"`) sets which end of the
+ * track is the minimum and the arrow-key direction. When omitted, it is
+ * inherited from the nearest {@link DirectionProvider}, falling back to
+ * `"ltr"` when there is no provider.
+ *
+ * **`asChild` prop.** Render any element in place of the default `<span>`.
+ *
+ * @throws if `min` is not less than `max`, or `step` is not greater than 0.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Single-thumb, uncontrolled
+ * ```tsx
+ * <Slider.Root defaultValue={[50]}>
+ *   <Slider.Track><Slider.Range /></Slider.Track>
+ *   <Slider.Thumb />
+ * </Slider.Root>
+ * ```
+ *
+ * @example Range slider, controlled
+ * ```tsx
+ * const [value, setValue] = useState([20, 80]);
+ *
+ * <Slider.Root value={value} onValueChange={setValue}>
+ *   <Slider.Track><Slider.Range /></Slider.Track>
+ *   <Slider.Thumb />
+ *   <Slider.Thumb />
+ * </Slider.Root>
+ * ```
+ */
+export function SliderRoot({ min = 0, max = 100, step = 1, minStepsBetweenThumbs = 0, orientation = "horizontal", dir, inverted = false, disabled = false, defaultValue, value, onValueChange, onValueCommit, name, asChild = false, onPointerDown, ref, children, ...rest }) {
+    const resolvedDir = dir ?? useDirection();
+    const { contextValue, rootRef, onPointerDown: handlePointerDown, } = useSliderRoot({
+        min,
+        max,
+        step,
+        minStepsBetweenThumbs,
+        orientation,
+        dir: resolvedDir,
+        inverted,
+        disabled,
+        defaultValue,
+        value,
+        onValueChange,
+        onValueCommit,
+    });
+    const rootProps = {
+        ...rest,
+        ref: composeRefs(rootRef, ref),
+        dir: resolvedDir,
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "" : undefined,
+        onPointerDown: composeEventHandlers(onPointerDown, handlePointerDown),
+    };
+    return (_jsxs(SliderContext.Provider, { value: contextValue, children: [asChild ? (_jsx(Slot, { ...rootProps, children: children })) : (_jsx("span", { ...rootProps, children: children })), name !== undefined &&
+                contextValue.values.map((thumbValue, index) => (_jsx("input", { type: "hidden", name: contextValue.values.length > 1 ? `${name}[]` : name, value: thumbValue, readOnly: true }, index)))] }));
+}
+/** @internal */
+SliderRoot.displayName = "SliderRoot";
+/**
+ * The track rail the thumbs travel along. A decorative `<span>` carrying
+ * `data-orientation` and `data-disabled` for CSS. Wrap a
+ * {@link SliderRange | `Slider.Range`} inside it to show the filled portion.
+ *
+ * **`asChild` prop.** Render a consumer element in place of the `<span>`.
+ *
+ * @throws if rendered outside a `Slider.Root`.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example
+ * ```tsx
+ * <Slider.Track>
+ *   <Slider.Range />
+ * </Slider.Track>
+ * ```
+ */
+export function SliderTrack({ children, asChild = false, ...rest }) {
+    const { orientation, disabled } = useSliderContext();
+    const trackProps = {
+        ...rest,
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "" : undefined,
+    };
+    return asChild ? (_jsx(Slot, { ...trackProps, children: children })) : (_jsx("span", { ...trackProps, children: children }));
+}
+/** @internal */
+SliderTrack.displayName = "SliderTrack";
+/**
+ * The filled portion of the track between the lowest and highest thumb (or
+ * from the track start to the single thumb). Its position is set through an
+ * inline `style` computed from the current values, orientation, reading
+ * direction, and `inverted` — consumer `style` is shallow-merged on top.
+ *
+ * **`asChild` prop.** Render a consumer element in place of the `<span>`.
+ *
+ * @throws if rendered outside a `Slider.Root`.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example
+ * ```tsx
+ * <Slider.Track>
+ *   <Slider.Range />
+ * </Slider.Track>
+ * ```
+ */
+export function SliderRange({ style, asChild = false, children, ...rest }) {
+    const { values, min, max, orientation, dir, inverted, disabled } = useSliderContext();
+    const rangeProps = {
+        ...rest,
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "" : undefined,
+        style: {
+            ...getRangeStyle(values, min, max, { orientation, dir, inverted }),
+            ...style,
+        },
+    };
+    return asChild ? (_jsx(Slot, { ...rangeProps, children: children })) : (_jsx("span", { ...rangeProps }));
+}
+/** @internal */
+SliderRange.displayName = "SliderRange";
+/**
+ * A draggable handle — render one `Slider.Thumb` per entry in the value
+ * array, in order. Each is a `<span role="slider">` with `aria-valuemin` /
+ * `aria-valuemax` / `aria-valuenow`, `aria-orientation`, and a `tabIndex` so
+ * it is independently focusable.
+ *
+ * **Keyboard.** Arrow keys move by `step`; `PageUp` / `PageDown` by ten
+ * steps; `Home` / `End` jump to `min` / `max`. Arrow direction follows
+ * orientation, reading direction, and `inverted`. A thumb is clamped between
+ * its neighbours (plus `minStepsBetweenThumbs`).
+ *
+ * **Styling hooks.** `data-orientation` and `data-disabled`. Position is set
+ * via an inline `style` offset; consumer `style` is shallow-merged on top.
+ *
+ * **Accessibility.** Provide an accessible name with `aria-label` /
+ * `aria-labelledby`. `aria-valuenow` always tracks the raw number; when that
+ * number is not self-explanatory to a screen reader (a currency amount, a
+ * date, a named step), pass `aria-valuetext` with the human-readable form
+ * (e.g. `aria-valuetext="$50"`) — it is forwarded straight through to the
+ * element and read in place of the bare number.
+ *
+ * **`asChild` prop.** Render a consumer element in place of the `<span>`;
+ * the slider role, ARIA value attributes, keyboard handler, and ref merge in.
+ *
+ * @throws if rendered outside a `Slider.Root`.
+ *
+ * @extends HTMLSpanElement
+ *
+ * @example Named value with `aria-valuetext`
+ * ```tsx
+ * <Slider.Thumb aria-label="Price" aria-valuetext={`$${value}`} />
+ * ```
+ */
+export function SliderThumb({ style, ref: forwardedRef, onKeyDown, asChild = false, children, ...rest }) {
+    const { ref, value, min, max, orientation, disabled, style: positionStyle, onKeyDown: handleKeyDown, } = useSliderThumb();
+    const thumbProps = {
+        ...rest,
+        ref: composeRefs(ref, forwardedRef),
+        role: "slider",
+        tabIndex: disabled ? undefined : 0,
+        "aria-orientation": orientation,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        "aria-disabled": disabled || undefined,
+        "data-orientation": orientation,
+        "data-disabled": disabled ? "" : undefined,
+        onKeyDown: composeEventHandlers(onKeyDown, handleKeyDown),
+        style: { ...positionStyle, ...style },
+    };
+    return asChild ? (_jsx(Slot, { ...thumbProps, children: children })) : (_jsx("span", { ...thumbProps, children: children }));
+}
+/** @internal */
+SliderThumb.displayName = "SliderThumb";
+/**
+ * Headless, accessible **Slider** — a compound component implementing the
+ * [WAI-ARIA Slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)
+ * (and [Multi-Thumb Slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/)).
+ * The value is always an array, with one thumb per entry. Zero styles ship.
+ *
+ * `Slider` is both callable (an alias of {@link SliderRoot | `Slider.Root`})
+ * and carries its sub-components as static properties.
+ *
+ * - {@link SliderRoot | `Slider.Root`} — value owner, context provider.
+ * - {@link SliderTrack | `Slider.Track`} — the rail the thumbs travel along.
+ * - {@link SliderRange | `Slider.Range`} — the filled portion of the track.
+ * - {@link SliderThumb | `Slider.Thumb`} — a draggable handle; one per value.
+ *
+ * The accessible name belongs on the **Thumb**, which is the `role="slider"`.
+ * The Root renders a plain `<span>` with no role, so an `aria-label` there is
+ * attached to nothing and announced nowhere — a silent failure, because the
+ * slider still looks and behaves correctly. This example used to put it on the
+ * Root.
+ *
+ * @example
+ * ```tsx
+ * import { Slider } from "@primitiv-ui/react";
+ *
+ * <Slider.Root defaultValue={[40]}>
+ *   <Slider.Track><Slider.Range /></Slider.Track>
+ *   <Slider.Thumb aria-label="Volume" />
+ * </Slider.Root>
+ * ```
+ *
+ * @see {@link SliderRoot} for state modes, form submission, and validation.
+ * @see {@link SliderThumb} for keyboard interaction and labelling.
+ */
+const SliderCompound = Object.assign(SliderRoot, {
+    Root: SliderRoot,
+    Track: SliderTrack,
+    Range: SliderRange,
+    Thumb: SliderThumb,
+});
+SliderCompound.displayName = "Slider";
+export { SliderCompound as Slider };

package/dist/Slider/SliderContext.d.ts

@@ -0,0 +1,48 @@
+import type { Context } from "react";
+import type { SliderDirection, SliderOrientation } from "./types.js";
+/**
+ * Shared state published by {@link SliderRoot | `Slider.Root`} to its
+ * sub-components: the current values, range/step bounds, orientation and
+ * direction, thumb registration, and the value-change / value-commit
+ * callbacks. Read it with {@link useSliderContext}; it throws when a
+ * sub-component is rendered outside a `<Slider.Root>`.
+ */
+export type SliderContextValue = {
+    /** The current value array — one entry per registered thumb, in order. */
+    values: number[];
+    /** Lowest value (track start edge). */
+    min: number;
+    /** Highest value (track end edge). */
+    max: number;
+    /** Granularity; every value snaps to a multiple of this anchored at `min`. */
+    step: number;
+    /** Resolved layout axis; see {@link SliderOrientation}. */
+    orientation: SliderOrientation;
+    /** Resolved reading direction (after inheriting from `DirectionProvider`); see {@link SliderDirection}. */
+    dir: SliderDirection;
+    /** Whether the axis is reversed relative to its natural direction. */
+    inverted: boolean;
+    /** Whether interaction is disabled across every part. */
+    disabled: boolean;
+    /**
+     * Registers (or, with `null`, unregisters) a thumb by its stable id so Root
+     * can order the thumbs and focus them on pointer interaction. Called from
+     * each {@link SliderThumb | `Slider.Thumb`} on mount/unmount.
+     */
+    registerThumb: (id: string, element: HTMLSpanElement | null) => void;
+    /** Registered thumb ids in DOM order; a thumb's index into `values` is its position here. */
+    orderedThumbIds: string[];
+    /**
+     * Sets the thumb at `index` to `value`, clamped between its neighbours (plus
+     * `minStepsBetweenThumbs`) and the `[min, max]` bounds. Returns the next
+     * value array when it changed, or `null` when the clamped value was
+     * unchanged (so callers can skip a redundant commit).
+     */
+    setThumbValue: (index: number, value: number) => number[] | null;
+    /** Fires `onValueCommit` with the settled array at the end of an interaction. */
+    commit: (values: number[]) => void;
+};
+/** React context carrying the {@link SliderContextValue} shared by the slider's sub-components. */
+export declare const SliderContext: Context<SliderContextValue | null>;
+/** Hook returning the {@link SliderContextValue}; throws when used outside a `<Slider.Root>`. */
+export declare const useSliderContext: () => SliderContextValue;

package/dist/Slider/SliderContext.js

@@ -0,0 +1,7 @@
+"use client";
+import { createStrictContext } from "../utils/index.js";
+const sliderContextPair = createStrictContext("Slider sub-components must be rendered inside a <Slider.Root>.", "SliderContext");
+/** React context carrying the {@link SliderContextValue} shared by the slider's sub-components. */
+export const SliderContext = sliderContextPair[0];
+/** Hook returning the {@link SliderContextValue}; throws when used outside a `<Slider.Root>`. */
+export const useSliderContext = sliderContextPair[1];

package/dist/Slider/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useSliderContext } from "./useSliderContext.js";
+export { useSliderRoot } from "./useSliderRoot.js";
+export { useSliderThumb } from "./useSliderThumb.js";

package/dist/Slider/hooks/index.js

@@ -0,0 +1,3 @@
+export { useSliderContext } from "./useSliderContext.js";
+export { useSliderRoot } from "./useSliderRoot.js";
+export { useSliderThumb } from "./useSliderThumb.js";

package/dist/Slider/hooks/useSliderContext.d.ts

@@ -0,0 +1 @@
+export { useSliderContext } from "../SliderContext.js";

package/dist/Slider/hooks/useSliderContext.js

@@ -0,0 +1 @@
+export { useSliderContext } from "../SliderContext.js";

package/dist/Slider/hooks/useSliderRoot.d.ts

@@ -0,0 +1,23 @@
+import type { PointerEvent as ReactPointerEvent } from "react";
+import type { SliderContextValue } from "../SliderContext.js";
+import type { SliderDirection, SliderOrientation } from "../types.js";
+type UseSliderRootArgs = {
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetweenThumbs: number;
+    orientation: SliderOrientation;
+    dir: SliderDirection;
+    inverted: boolean;
+    disabled: boolean;
+    defaultValue?: number[];
+    value?: number[];
+    onValueChange?: (value: number[]) => void;
+    onValueCommit?: (value: number[]) => void;
+};
+export declare function useSliderRoot({ min, max, step, minStepsBetweenThumbs, orientation, dir, inverted, disabled, defaultValue, value, onValueChange, onValueCommit, }: UseSliderRootArgs): {
+    contextValue: SliderContextValue;
+    rootRef: import("react").RefObject<HTMLSpanElement | null>;
+    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => void;
+};
+export {};

package/dist/Slider/hooks/useSliderRoot.js

@@ -0,0 +1,123 @@
+"use client";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCollection, useControllableState } from "../../hooks/index.js";
+import { clamp, getClosestThumbIndex, getPointerValue } from "../utils.js";
+export function useSliderRoot({ min, max, step, minStepsBetweenThumbs, orientation, dir, inverted, disabled, defaultValue, value, onValueChange, onValueCommit, }) {
+    const [values, setValues] = useControllableState(value, defaultValue ?? [min], onValueChange);
+    const valuesRef = useRef(values);
+    valuesRef.current = values;
+    const rootRef = useRef(null);
+    const { register: registerThumb, itemsRef, keys: orderedThumbIds, } = useCollection();
+    const setThumbValue = useCallback((index, nextValue) => {
+        const current = valuesRef.current;
+        const gap = minStepsBetweenThumbs * step;
+        const lowerBound = index > 0 ? current[index - 1] + gap : min;
+        const upperBound = index < current.length - 1 ? current[index + 1] - gap : max;
+        const clamped = clamp(nextValue, lowerBound, upperBound);
+        if (current[index] === clamped) {
+            return null;
+        }
+        const next = current.map((entry, i) => (i === index ? clamped : entry));
+        setValues(next);
+        return next;
+    }, [min, max, step, minStepsBetweenThumbs, setValues]);
+    const commit = useCallback((committed) => {
+        onValueCommit?.(committed);
+    }, [onValueCommit]);
+    const dragRef = useRef(null);
+    const onPointerDown = useCallback((event) => {
+        if (disabled) {
+            return;
+        }
+        const rect = rootRef.current.getBoundingClientRect();
+        const pointerValue = getPointerValue(event.clientX, event.clientY, rect, {
+            min,
+            max,
+            step,
+            orientation,
+            dir,
+            inverted,
+        });
+        const index = getClosestThumbIndex(pointerValue, valuesRef.current);
+        let pendingCommit = setThumbValue(index, pointerValue);
+        itemsRef.current.get(orderedThumbIds[index])?.focus();
+        const move = (moveEvent) => {
+            const moveRect = rootRef.current.getBoundingClientRect();
+            const next = setThumbValue(index, getPointerValue(moveEvent.clientX, moveEvent.clientY, moveRect, {
+                min,
+                max,
+                step,
+                orientation,
+                dir,
+                inverted,
+            }));
+            if (next) {
+                pendingCommit = next;
+            }
+        };
+        const up = () => {
+            document.removeEventListener("pointermove", move);
+            document.removeEventListener("pointerup", up);
+            dragRef.current = null;
+            if (pendingCommit) {
+                commit(pendingCommit);
+            }
+        };
+        dragRef.current = { move, up };
+        document.addEventListener("pointermove", move);
+        document.addEventListener("pointerup", up);
+        event.preventDefault();
+    }, [
+        min,
+        max,
+        step,
+        orientation,
+        dir,
+        inverted,
+        disabled,
+        setThumbValue,
+        commit,
+        orderedThumbIds,
+        itemsRef,
+    ]);
+    useEffect(() => () => {
+        if (dragRef.current) {
+            document.removeEventListener("pointermove", dragRef.current.move);
+            document.removeEventListener("pointerup", dragRef.current.up);
+        }
+    }, []);
+    const contextValue = useMemo(() => ({
+        values,
+        min,
+        max,
+        step,
+        orientation,
+        dir,
+        inverted,
+        disabled,
+        registerThumb,
+        orderedThumbIds,
+        setThumbValue,
+        commit,
+    }), [
+        values,
+        min,
+        max,
+        step,
+        orientation,
+        dir,
+        inverted,
+        disabled,
+        registerThumb,
+        orderedThumbIds,
+        setThumbValue,
+        commit,
+    ]);
+    if (min >= max) {
+        throw new Error(`Slider: \`min\` (${min}) must be less than \`max\` (${max}).`);
+    }
+    if (step <= 0) {
+        throw new Error(`Slider: \`step\` (${step}) must be greater than 0.`);
+    }
+    return { contextValue, rootRef, onPointerDown };
+}

package/dist/Slider/hooks/useSliderThumb.d.ts

@@ -0,0 +1,11 @@
+import type { KeyboardEvent } from "react";
+export declare function useSliderThumb(): {
+    ref: import("react").RefObject<HTMLSpanElement | null>;
+    value: number;
+    min: number;
+    max: number;
+    orientation: import("..").SliderOrientation;
+    disabled: boolean;
+    style: import("react").CSSProperties;
+    onKeyDown: (event: KeyboardEvent<HTMLSpanElement>) => void;
+};