@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/slider/behaviour.jsx

@@ -0,0 +1,492 @@
+// Ported from react-aria `useSlider`, `useSliderThumb`, slider utils (packages/react-aria/src/slider/useSlider.ts,
+// useSliderThumb.ts, utils.ts), Apache-2.0, © Adobe.
+// Rivet:
+// - `useSlider(props, state, trackRef)` → `sliderProps(props, state)` (`{ labelProps, groupProps, trackProps,
+//   outputProps }`), `useSliderThumb(opts, state)` → `sliderThumbProps(opts, state)` (`{ thumbProps, inputProps,
+//   labelProps, isDragging, isFocused, isDisabled }`): attribute bags, changing values as accessors (R2 functions:
+//   this module is `.tsx`). RA's handlers are free functions `sliderTrack<Event>(event, props, state, track)` /
+//   `sliderThumb<Event>(event, opts, state)`; the component binds them from inline arrows and feeds the move
+//   callbacks (`sliderTrackMove*`, `sliderThumbMove*`) into `useMove` (`../interactions/move.tsx`).
+// - `sliderData` (WeakMap keyed by the state) → `state.refs.data` (plain JSON on the state: survives resume).
+// - React refs (`realTimeTrackDraggingIndex`, `currentPosition`, `currentPointer`) → `state.refs.track` /
+//   `state.refs.thumbs[index]` (plain JSON, created on first use); global listeners live in a browser WeakMap.
+// - `trackRef` / `inputRef` → the elements: track = the handler's `currentTarget` / `opts.trackRef()`; inputs are
+//   found by their ids (`getSliderThumbId`).
+// - The thumb's "focus the input when it becomes the focused thumb" effect runs where `setFocusedThumb` is called
+//   (track press), not as an effect.
+// - `setThumbEditable(index, !isDisabled)` ("immediately register editability") runs in `sliderThumbProps`.
+// - Deviation (user decision 2026-10-08, `SliderProps.snap`, default `"release"`): pointer drags (thumb and
+//   track) also record the free pointer position (`setThumbDragPercent`); the thumb style positions with
+//   `getThumbPositionPercent` (the animated position while it snaps to the step after release: `Motion1D` in
+//   `state.ts`, no CSS transition) and carries `data-snapping` meanwhile. Keyboard / programmatic changes are stepped.
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { untrack } from "@rivetjs/reactivity";
+import { clamp } from "../utils/index.js";
+import { setInteractionModality } from "../interactions/focus-visible.jsx";
+import { focusBlur, focusFocus } from "../interactions/focus.jsx";
+import { keyboardKeyDown, keyboardKeyUp } from "../interactions/keyboard.jsx";
+import { focusWithoutScrolling, getEventTarget, getOwnerDocument, getOwnerWindow, read } from "../interactions/utils.js";
+import { labelProps as ariaLabelProps } from "../label/behaviour.js";
+import { onFormReset } from "../form/behaviour.js";
+import { decrementThumb, getPercentValue, getThumbMaxValue, getThumbMinValue, getThumbPercent, getThumbPositionPercent, getThumbValueLabel, incrementThumb, isThumbDragging, isThumbEditable, isSliderDisabled, isThumbSnapping, setFocusedThumb, setThumbDragPercent, setThumbDragging, setThumbEditable, setThumbPercent, setThumbValue, sliderOrientation, sliderPageSize, sliderStep, sliderValues, } from "./state.js";
+const refs = (state) => state.refs;
+const trackDrag = (state) => (refs(state).track ??= { index: null, position: null, pointer: undefined });
+const thumbDrag = (state, index) => ((refs(state).thumbs ??= {})[index] ??= { position: null, pointer: undefined });
+export function getSliderThumbId(state, index) {
+    const data = refs(state).data;
+    if (!data) {
+        throw new Error("Unknown slider state");
+    }
+    return `${data.id}-${index}`;
+}
+// Browser-only: the window listeners of a pending track / thumb press (RA useGlobalListeners).
+const listeners = new WeakMap();
+function addGlobalListeners(owner, win, onUp) {
+    const list = listeners.get(owner) ?? [];
+    listeners.set(owner, list);
+    for (const type of ["mouseup", "touchend", "pointerup"]) {
+        win.addEventListener(type, onUp, false);
+        list.push(() => win.removeEventListener(type, onUp, false));
+    }
+}
+function removeGlobalListeners(owner) {
+    for (const remove of listeners.get(owner)?.splice(0) ?? [])
+        remove();
+}
+// A part's own `orientation` (value or live accessor) wins over the slider's (live: read now).
+const isVertical = (state, orientation) => (read(orientation) ?? sliderOrientation(state)) === "vertical";
+/** `aria-orientation` of a thumb input: its own value, else the slider's (a returned arrow when the slider's is live). */
+function orientationAttr(own, state) {
+    if (own)
+        return own;
+    return state.live?.orientation ? liveOrientation(state) : state.orientation;
+}
+function liveOrientation(state) {
+    return () => sliderOrientation(state);
+}
+/** The thumb input's `step`: the value, or a returned arrow when the slider's `step` is live. */
+function stepAttr(state) {
+    return state.live?.step ? liveStep(state) : state.step;
+}
+function liveStep(state) {
+    return () => sliderStep(state);
+}
+/**
+ * Provides the behavior and accessibility implementation for a slider component representing one or
+ * more values (RA `useSlider`). The track element (handler `currentTarget`) provides the "length" of the
+ * track and accepts click and drag motions: the closest thumb follows them.
+ */
+export function sliderProps(props, state) {
+    const { labelProps, fieldProps } = ariaLabelProps(props);
+    // Attach id of the label to the state so it can be accessed by the thumbs.
+    refs(state).data = {
+        id: (labelProps.id ?? fieldProps.id),
+        "aria-describedby": props["aria-describedby"],
+        "aria-details": props["aria-details"],
+    };
+    let label = labelProps;
+    if (labelProps.for) {
+        // Ideally the `for` attribute should point to the first thumb, but VoiceOver on iOS
+        // causes this to override the `aria-labelledby` on the thumb. This causes the first
+        // thumb to only be announced as the slider label rather than its individual name as well.
+        // See https://bugs.webkit.org/show_bug.cgi?id=172464.
+        // Rivet: the handler is an inline arrow of an object literal (resumable; a closure assigned afterwards is not).
+        const { for: _for, ...rest } = labelProps;
+        label = { ...rest, onClick: (e) => sliderLabelClick(e, state) };
+    }
+    return {
+        labelProps: label,
+        // The root element of the Slider will have role="group" to group together
+        // all the thumb inputs in the Slider.  The label of the Slider will
+        // be used to label the group.
+        groupProps: {
+            role: "group",
+            ...fieldProps,
+        },
+        trackProps: {
+            style: { position: "relative", touchAction: "none" },
+        },
+        outputProps: {
+            for: () => sliderValues(state)
+                .map((_, index) => getSliderThumbId(state, index))
+                .join(" "),
+            "aria-live": "off",
+        },
+    };
+}
+/** RA label `onClick`: Safari does not focus `<input type="range">` on a label click; focus the first thumb (focus ring shown). */
+export function sliderLabelClick(event, state) {
+    getOwnerDocument(getEventTarget(event)).getElementById(getSliderThumbId(state, 0))?.focus();
+    setInteractionModality("keyboard");
+}
+function focusThumb(state, index, from) {
+    const input = getOwnerDocument(from).getElementById(getSliderThumbId(state, index));
+    if (input)
+        focusWithoutScrolling(input);
+}
+function onDownTrack(e, props, state, track, id, clientX, clientY) {
+    // We only trigger track-dragging if the user clicks on the track itself and nothing is currently being dragged.
+    const values = untrack(() => sliderValues(state));
+    if (track && !isSliderDisabled(state) && values.every((_, i) => !untrack(() => isThumbDragging(state, i)))) {
+        const vertical = isVertical(state, props.orientation);
+        const { height, width, top, left } = track.getBoundingClientRect();
+        const size = vertical ? height : width;
+        // Find the closest thumb
+        const trackPosition = vertical ? top : left;
+        const clickPosition = vertical ? clientY : clientX;
+        const offset = clickPosition - trackPosition;
+        let percent = offset / size;
+        if (read(props.direction) === "rtl" || vertical) {
+            percent = 1 - percent;
+        }
+        const value = getPercentValue(state, percent);
+        // to find the closet thumb we split the array based on the first thumb position to the "right/end" of the click.
+        let closestThumb;
+        const split = values.findIndex((v) => value - v < 0);
+        if (split === 0) {
+            // If the index is zero then the closetThumb is the first one
+            closestThumb = split;
+        }
+        else if (split === -1) {
+            // If no index is found they've clicked past all the thumbs
+            closestThumb = values.length - 1;
+        }
+        else {
+            const lastLeft = values[split - 1];
+            const firstRight = values[split];
+            // Pick the last left/start thumb, unless they are stacked on top of each other, then pick the right/end one
+            if (Math.abs(lastLeft - value) < Math.abs(firstRight - value)) {
+                closestThumb = split - 1;
+            }
+            else {
+                closestThumb = split;
+            }
+        }
+        const drag = trackDrag(state);
+        // Confirm that the found closest thumb is editable, not disabled, and move it
+        if (closestThumb >= 0 && isThumbEditable(state, closestThumb)) {
+            // Don't unfocus anything
+            e.preventDefault();
+            drag.index = closestThumb;
+            setFocusedThumb(state, closestThumb);
+            // RA useSliderThumb effect: the focused thumb focuses its input.
+            focusThumb(state, closestThumb, track);
+            drag.pointer = id;
+            setThumbDragging(state, drag.index, true);
+            setThumbValue(state, closestThumb, value);
+            // Rivet (snap: "release"): the thumb jumps to the pointer, not to the step.
+            setThumbDragPercent(state, closestThumb, clamp(percent, 0, 1));
+            removeGlobalListeners(drag);
+            addGlobalListeners(drag, getOwnerWindow(track), (event) => onUpTrack(event, state));
+        }
+        else {
+            drag.index = null;
+        }
+    }
+}
+function onUpTrack(e, state) {
+    const drag = trackDrag(state);
+    const id = e.pointerId ?? e.changedTouches?.[0].identifier;
+    if (id === drag.pointer) {
+        if (drag.index != null) {
+            setThumbDragging(state, drag.index, false);
+            drag.index = null;
+        }
+        removeGlobalListeners(drag);
+    }
+}
+/** RA track `onMouseDown`. */
+export function sliderTrackMouseDown(e, props, state, track) {
+    if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
+        return;
+    }
+    onDownTrack(e, props, state, track, undefined, e.clientX, e.clientY);
+}
+/** RA track `onPointerDown`. */
+export function sliderTrackPointerDown(e, props, state, track) {
+    if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {
+        return;
+    }
+    onDownTrack(e, props, state, track, e.pointerId, e.clientX, e.clientY);
+}
+/** RA track `onTouchStart`. */
+export function sliderTrackTouchStart(e, props, state, track) {
+    onDownTrack(e, props, state, track, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+}
+/** RA track useMove `onMoveStart`. */
+export function sliderTrackMoveStart(_e, state) {
+    trackDrag(state).position = null;
+}
+/** RA track useMove `onMove`. */
+export function sliderTrackMove({ deltaX, deltaY }, props, state, track) {
+    if (!track) {
+        return;
+    }
+    const drag = trackDrag(state);
+    const vertical = isVertical(state, props.orientation);
+    const { height, width } = track.getBoundingClientRect();
+    const size = vertical ? height : width;
+    if (drag.position == null && drag.index != null) {
+        // Rivet: from the free position (track press with snap: "release"), else the stepped one (upstream).
+        drag.position = untrack(() => getThumbPositionPercent(state, drag.index)) * size;
+    }
+    let delta = vertical ? deltaY : deltaX;
+    if (vertical || read(props.direction) === "rtl") {
+        delta = -delta;
+    }
+    drag.position = (drag.position ?? 0) + delta;
+    if (drag.index != null) {
+        const percent = clamp(drag.position / size, 0, 1);
+        setThumbPercent(state, drag.index, percent);
+        setThumbDragPercent(state, drag.index, percent);
+    }
+}
+/** RA track useMove `onMoveEnd`. */
+export function sliderTrackMoveEnd(_e, state) {
+    const drag = trackDrag(state);
+    if (drag.index != null) {
+        setThumbDragging(state, drag.index, false);
+        drag.index = null;
+    }
+}
+/** `data-rk` of the thumb input: every key `sliderThumbKeyDown` / the keyboard `useMove` handles. */
+const THUMB_KEYS = "ArrowLeft ArrowRight ArrowUp ArrowDown PageUp PageDown Home End";
+const thumbIndex = (opts) => opts.index ?? 0;
+const thumbDisabled = (opts, state) => !!read(opts.isDisabled) || isSliderDisabled(state);
+/** Whether the thumb is disabled now (its own or the slider's `isDisabled`, live accessors read). */
+export const isSliderThumbDisabled = thumbDisabled;
+/** Whether the thumb's / slider's `isDisabled` is a live accessor (live props P5): the bags then hold accessors. */
+const liveDisabled = (opts, state) => typeof opts.isDisabled === "function" || !!state.disabled;
+// Returned arrows (resumable symbols): an arrow inside a conditional expression is not R2-wrapped.
+/** `enabled` while the thumb is enabled, else `undefined` (live `isDisabled`). */
+function liveThumbAttr(opts, state, enabled) {
+    return () => (thumbDisabled(opts, state) ? undefined : enabled);
+}
+/** `true` while the thumb is disabled, else `undefined` (live `isDisabled`). */
+function liveThumbDisabledAttr(opts, state) {
+    return () => thumbDisabled(opts, state) || undefined;
+}
+/** Provides behavior and accessibility for a thumb of a slider component (RA `useSliderThumb`). */
+export function sliderThumbProps(opts, state) {
+    const index = thumbIndex(opts);
+    const { isRequired, validationState, isInvalid, name, form } = opts;
+    const ownOrientation = opts.orientation;
+    const isDisabled = untrack(() => thumbDisabled(opts, state));
+    const live = liveDisabled(opts, state);
+    const data = refs(state).data;
+    const { labelProps, fieldProps } = ariaLabelProps({
+        ...opts,
+        id: getSliderThumbId(state, index),
+        "aria-labelledby": `${data.id} ${opts["aria-labelledby"] ?? ""}`.trim(),
+    });
+    // Immediately register editability with the state (Rivet: a live `isDisabled` keeps the thumb editable and
+    // the handlers / state setters check the current value instead).
+    setThumbEditable(state, index, live || !isDisabled);
+    const describedBy = [data["aria-describedby"], opts["aria-describedby"]].filter(Boolean).join(" ");
+    const details = [data["aria-details"], opts["aria-details"]].filter(Boolean).join(" ");
+    // We install mouse handlers for the drag motion on the thumb div, but
+    // not the key handler for moving the thumb with the slider.  Instead,
+    // we focus the range input, and let the browser handle the keyboard
+    // interactions; we then listen to input's onChange to update state.
+    return {
+        inputProps: {
+            ...fieldProps,
+            type: "range",
+            tabIndex: live ? liveThumbAttr(opts, state, 0) : !isDisabled ? 0 : undefined,
+            min: () => getThumbMinValue(state, index),
+            max: () => getThumbMaxValue(state, index),
+            step: stepAttr(state),
+            value: () => sliderValues(state)[index],
+            name,
+            form,
+            disabled: live ? liveThumbDisabledAttr(opts, state) : isDisabled || undefined,
+            autoFocus: opts.autoFocus,
+            "aria-orientation": orientationAttr(ownOrientation, state),
+            // Rivet: keys the thumb handles (shortcuts + useMove arrows): a cold keydown on a resumed page
+            // keeps them from the native range input (which would move by its own page size) while the chunk loads.
+            "data-rk": live ? liveThumbAttr(opts, state, THUMB_KEYS) : isDisabled ? undefined : THUMB_KEYS,
+            "aria-valuetext": () => getThumbValueLabel(state, index),
+            "aria-required": isRequired || undefined,
+            "aria-invalid": isInvalid || validationState === "invalid" || undefined,
+            "aria-errormessage": opts["aria-errormessage"],
+            "aria-describedby": describedBy || undefined,
+            "aria-details": details || undefined,
+        },
+        thumbProps: {
+            style: () => {
+                // Rivet: the free drag position with snap: "release" (= the stepped percent otherwise).
+                let thumbPosition = getThumbPositionPercent(state, index);
+                const vertical = isVertical(state, ownOrientation);
+                if (vertical || read(opts.direction) === "rtl") {
+                    thumbPosition = 1 - thumbPosition;
+                }
+                return {
+                    position: "absolute",
+                    [vertical ? "top" : "left"]: `${thumbPosition * 100}%`,
+                    transform: "translate(-50%, -50%)",
+                    touchAction: "none",
+                };
+            },
+            "data-snapping": () => isThumbSnapping(state, index) || undefined,
+        },
+        labelProps: { ...labelProps },
+        isDragging: () => isThumbDragging(state, index),
+        isDisabled,
+        isFocused: () => state.focusedThumb() === index,
+    };
+}
+function thumbInput(opts, state, from) {
+    return opts.inputRef?.() ?? getOwnerDocument(from).getElementById(getSliderThumbId(state, thumbIndex(opts)));
+}
+function focusInput(opts, state, from) {
+    const input = thumbInput(opts, state, from);
+    if (input)
+        focusWithoutScrolling(input);
+}
+/** keydown of the thumb (RA useKeyboard shortcuts PageUp / PageDown / Home / End; arrows go through useMove). */
+export function sliderThumbKeyDown(e, opts, state) {
+    if (thumbDisabled(opts, state))
+        return;
+    const index = thumbIndex(opts);
+    const keyboardUpdate = (cb) => {
+        // remember to set this so that onChangeEnd is fired
+        setThumbDragging(state, index, true);
+        cb();
+        setThumbDragging(state, index, false);
+    };
+    keyboardKeyDown({
+        shortcuts: {
+            PageUp: () => keyboardUpdate(() => incrementThumb(state, index, untrack(() => sliderPageSize(state)))),
+            PageDown: () => keyboardUpdate(() => decrementThumb(state, index, untrack(() => sliderPageSize(state)))),
+            Home: () => keyboardUpdate(() => setThumbValue(state, index, untrack(() => getThumbMinValue(state, index)))),
+            End: () => keyboardUpdate(() => setThumbValue(state, index, untrack(() => getThumbMaxValue(state, index)))),
+        },
+        allowRepeats: true,
+    }, e);
+}
+/** RA thumb useMove `onMoveStart`. */
+export function sliderThumbMoveStart(_e, opts, state) {
+    if (thumbDisabled(opts, state))
+        return;
+    const index = thumbIndex(opts);
+    thumbDrag(state, index).position = null;
+    setThumbDragging(state, index, true);
+}
+/** RA thumb useMove `onMove` (pointer drag, or arrow keys with `pointerType: 'keyboard'`). */
+export function sliderThumbMove({ deltaX, deltaY, pointerType, shiftKey }, opts, state) {
+    const index = thumbIndex(opts);
+    const track = opts.trackRef();
+    if (!track) {
+        return;
+    }
+    const vertical = untrack(() => isVertical(state, opts.orientation));
+    const reverseX = read(opts.direction) === "rtl";
+    const drag = thumbDrag(state, index);
+    const { width, height } = track.getBoundingClientRect();
+    const size = vertical ? height : width;
+    if (drag.position == null) {
+        drag.position = untrack(() => getThumbPercent(state, index)) * size;
+    }
+    if (pointerType === "keyboard") {
+        if ((deltaX > 0 && reverseX) || (deltaX < 0 && !reverseX) || deltaY > 0) {
+            decrementThumb(state, index, untrack(() => (shiftKey ? sliderPageSize(state) : sliderStep(state))));
+        }
+        else {
+            incrementThumb(state, index, untrack(() => (shiftKey ? sliderPageSize(state) : sliderStep(state))));
+        }
+    }
+    else {
+        let delta = vertical ? deltaY : deltaX;
+        if (vertical || reverseX) {
+            delta = -delta;
+        }
+        drag.position += delta;
+        const percent = clamp(drag.position / size, 0, 1);
+        setThumbPercent(state, index, percent);
+        setThumbDragPercent(state, index, percent);
+    }
+}
+/** RA thumb useMove `onMoveEnd`. */
+export function sliderThumbMoveEnd(_e, opts, state) {
+    setThumbDragging(state, thumbIndex(opts), false);
+}
+function onDown(e, opts, state, id) {
+    const index = thumbIndex(opts);
+    const thumb = e.currentTarget;
+    focusInput(opts, state, thumb);
+    const drag = thumbDrag(state, index);
+    drag.pointer = id;
+    setThumbDragging(state, index, true);
+    removeGlobalListeners(drag);
+    addGlobalListeners(drag, getOwnerWindow(thumb), (event) => {
+        const pointer = event.pointerId ?? event.changedTouches?.[0].identifier;
+        if (pointer === drag.pointer) {
+            focusInput(opts, state, thumb);
+            setThumbDragging(state, index, false);
+            removeGlobalListeners(drag);
+        }
+    });
+}
+/** RA thumb `onMouseDown`. */
+export function sliderThumbMouseDown(e, opts, state) {
+    if (thumbDisabled(opts, state))
+        return;
+    if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
+        return;
+    }
+    onDown(e, opts, state);
+}
+/** RA thumb `onPointerDown`. */
+export function sliderThumbPointerDown(e, opts, state) {
+    if (thumbDisabled(opts, state))
+        return;
+    if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
+        return;
+    }
+    onDown(e, opts, state, e.pointerId);
+}
+/** RA thumb `onTouchStart`. */
+export function sliderThumbTouchStart(e, opts, state) {
+    if (thumbDisabled(opts, state))
+        return;
+    onDown(e, opts, state, e.changedTouches[0].identifier);
+}
+/** `change` / `input` of the range input: the browser moved the value (keyboard, assistive technology). */
+export function sliderThumbInputChange(e, opts, state) {
+    const input = getEventTarget(e);
+    // RA useFormReset(inputRef, state.defaultValues[index], v => state.setThumbValue(index, v))
+    const index = thumbIndex(opts);
+    onFormReset(state.refs, input, () => setThumbValue(state, index, state.defaultValues[index]));
+    setThumbValue(state, index, parseFloat(input.value));
+    // React re-renders the controlled range input with the snapped value.
+    const value = String(untrack(() => sliderValues(state))[index]);
+    if (input.value !== value)
+        input.value = value;
+}
+/** focus of the range input (RA useFocusable: `setFocusedThumb(index)` + user focus events). */
+export function sliderThumbFocus(e, opts, state) {
+    focusFocus({ onFocus: (event) => (setFocusedThumb(state, thumbIndex(opts)), opts.onFocus?.(event)), onFocusChange: opts.onFocusChange }, e);
+}
+/** blur of the range input. */
+export function sliderThumbBlur(e, opts, state) {
+    focusBlur({ onBlur: (event) => (setFocusedThumb(state, undefined), opts.onBlur?.(event)), onFocusChange: opts.onFocusChange }, e);
+}
+/** keydown / keyup of the range input (RA useFocusable → useKeyboard with the user's handlers). */
+export function sliderThumbInputKeyDown(e, opts, _state) {
+    if (opts.onKeyDown)
+        keyboardKeyDown({ onKeyDown: opts.onKeyDown }, e);
+}
+export function sliderThumbInputKeyUp(e, opts, _state) {
+    if (opts.onKeyUp)
+        keyboardKeyUp({ onKeyUp: opts.onKeyUp }, e);
+}

package/slider/index.d.ts

@@ -0,0 +1,171 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import type { HoverEvents } from "../utils/types.js";
+import { type ContextValue, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import { type Orientation, type SliderState } from "./state.js";
+import { type AriaSliderProps, type AriaSliderThumbProps } from "./behaviour.jsx";
+export * from "./state.js";
+export * from "./behaviour.jsx";
+type Bag = Record<string, unknown>;
+export interface SliderRenderProps {
+    /**
+     * The orientation of the slider.
+     *
+     * @selector [data-orientation="horizontal | vertical"]
+     */
+    orientation: () => Orientation;
+    /**
+     * Whether the slider is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /** State of the slider. */
+    state: SliderState;
+}
+export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, "label" | "direction">, RenderProps<SliderRenderProps>, DOMRenderProps<"div", SliderRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-Slider'
+     */
+    class?: RenderProps<SliderRenderProps>["class"];
+    /** The display format of the value label. */
+    formatOptions?: Intl.NumberFormatOptions;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `SliderContext`. */
+export declare const SliderContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<SliderProps<number | number[]>>, HTMLDivElement>>;
+/** RAC `SliderStateContext`. */
+export declare const SliderStateContext: import("@rivetjs/reactivity").Context<SliderState | null>;
+/** RAC `SliderTrackContext`. */
+export declare const SliderTrackContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<SliderTrackProps> & Bag, HTMLDivElement>>;
+/** RAC `SliderFillContext`. */
+export declare const SliderFillContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<SliderFillProps>, HTMLDivElement>>;
+/** RAC `SliderOutputContext`. */
+export declare const SliderOutputContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<SliderOutputProps> & Bag, HTMLOutputElement>>;
+/**
+ * A slider allows a user to select one or more values within a range.
+ */
+export declare function Slider<T extends number | number[]>(props: SliderProps<T>): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SliderOutputProps extends RenderProps<SliderRenderProps>, DOMRenderProps<"output", SliderRenderProps>, Omit<GlobalDOMAttributes<HTMLOutputElement>, "style"> {
+    /** The element's unique identifier (RAC `filterDOMProps` forwards `id`). */
+    id?: string;
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-SliderOutput'
+     */
+    class?: RenderProps<SliderRenderProps>["class"];
+    ref?: RefValue<HTMLOutputElement>;
+}
+/**
+ * A slider output displays the current value of a slider as text.
+ */
+export declare function SliderOutput(props: SliderOutputProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SliderTrackRenderProps extends SliderRenderProps {
+    /**
+     * Whether the slider track is currently hovered with a mouse.
+     *
+     * @selector [data-hovered]
+     */
+    isHovered: () => boolean;
+}
+export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps>, DOMRenderProps<"div", SliderTrackRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** The element's unique identifier (RAC `filterDOMProps` forwards `id`). */
+    id?: string;
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-SliderTrack'
+     */
+    class?: RenderProps<SliderTrackRenderProps>["class"];
+    ref?: RefValue<HTMLDivElement>;
+}
+/**
+ * A slider track is a container for one or more slider thumbs.
+ */
+export declare function SliderTrack(props: SliderTrackProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SliderThumbRenderProps {
+    /** State of the slider. */
+    state: SliderState;
+    /**
+     * Whether this thumb is currently being dragged.
+     *
+     * @selector [data-dragging]
+     */
+    isDragging: () => boolean;
+    /**
+     * Whether the thumb is currently hovered with a mouse.
+     *
+     * @selector [data-hovered]
+     */
+    isHovered: () => boolean;
+    /**
+     * Whether the thumb is currently focused.
+     *
+     * @selector [data-focused]
+     */
+    isFocused: () => boolean;
+    /**
+     * Whether the thumb is keyboard focused.
+     *
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: () => boolean;
+    /**
+     * Whether the thumb is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /**
+     * Rivet: whether the thumb is animating to its stepped position after a free drag (`snap="release"`).
+     *
+     * @selector [data-snapping]
+     */
+    isSnapping: () => boolean;
+}
+export interface SliderThumbProps extends Omit<AriaSliderThumbProps, "label" | "validationState" | "direction">, HoverEvents, RenderProps<SliderThumbRenderProps>, DOMRenderProps<"div", SliderThumbRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-SliderThumb'
+     */
+    class?: RenderProps<SliderThumbRenderProps>["class"];
+    /** A ref for the HTML input element. */
+    inputRef?: RefValue<HTMLInputElement>;
+    ref?: RefValue<HTMLDivElement>;
+}
+/**
+ * A slider thumb represents an individual value that the user can adjust within a slider track.
+ */
+export declare function SliderThumb(props: SliderThumbProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SliderFillRenderProps extends SliderRenderProps {
+    /**
+     * Whether the slider fill is currently hovered with a mouse.
+     *
+     * @selector [data-hovered]
+     */
+    isHovered: () => boolean;
+}
+export interface SliderFillProps extends HoverEvents, RenderProps<SliderFillRenderProps>, DOMRenderProps<"div", SliderFillRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style"> {
+    /** The element's unique identifier (RAC `filterDOMProps` forwards `id`). */
+    id?: string;
+    /**
+     * The value where the fill starts, for a single-thumb slider. Defaults to the minimum value.
+     * Ignored for multi-thumb sliders, where the fill spans from the first to the last thumb.
+     */
+    offset?: number;
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-SliderFill'
+     */
+    class?: RenderProps<SliderFillRenderProps>["class"];
+    ref?: RefValue<HTMLDivElement>;
+}
+/**
+ * A slider fill shows the selected range of a slider track.
+ */
+export declare function SliderFill(props: SliderFillProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;