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

package/slider/index.jsx

@@ -0,0 +1,392 @@
+// Ported from react-aria-components `Slider`, `SliderOutput`, `SliderTrack`, `SliderFill`, `SliderThumb`
+// (packages/react-aria-components/src/Slider.tsx), Apache-2.0, © Adobe.
+// A slider allows a user to select one or more values within a range.
+// Rivet:
+// - composed from parts like RAC: `<Slider><Label/><SliderOutput/><SliderTrack><SliderFill/><SliderThumb/></SliderTrack></Slider>`;
+//   the slider provides `SliderStateContext`, `SliderTrackContext` (track bag + `ref()`), `SliderOutputContext`,
+//   `LabelContext`.
+// - state = `createSliderState` (`./state.ts`: plain signals + JSON); behaviour = `./behaviour.tsx` (`sliderProps`,
+//   `sliderThumbProps` + free handlers bound from inline arrows here, so drag / keys resume with no code before the
+//   first interaction); `moveProps` from `../interactions/move.tsx`.
+// - locale / direction from `useLocale()` (`I18nProvider`); `formatOptions` + locale replace `numberFormatter`.
+// - render props are accessors (`isDisabled()`, `orientation()`, `isDragging()`, …); `state` is the state object.
+// - the thumb input renders inside a visually hidden `<div>` (RA `VisuallyHidden`).
+// `render` (RAC DOMRenderProps) on Slider / SliderOutput / SliderTrack / SliderThumb / SliderFill: given, the attributes go to `render(attrs, <part>RenderProps)` instead of the default element (the thumb's hidden input stays inside `children`). Deviations: `SliderOutput` / fill / thumb style are bindings (no re-render). The label slot:
+// RA re-renders with `label: false` when no `<Label>` renders; here the group's `aria-labelledby` follows the slot
+// (accessor) while the thumbs keep the label id in theirs.
+// - Deviation (user decision 2026-10-08): `snap` prop (default `"release"`): stepped thumbs follow the pointer
+//   freely during a drag and animate to the closest step on release (`data-snapping` on SliderThumb /
+//   SliderFill; the animation is `@rivetjs/cdk/motion` `Motion1D` driving the position, no CSS transition);
+//   `snap="drag"` = RAC behaviour. Thumb and fill position with `getThumbPositionPercent`.
+/*
+ * Copyright 2022 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 { createContext, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { ref as createRef } from "@rivetjs/runtime/dom";
+import { isSlot, renderSlot } from "@rivetjs/runtime/slot";
+import { useLocale } from "../i18n/index.js";
+import { visuallyHidden } from "../a11y/index.js";
+import { useFocusRing } from "../focus/focus-ring.jsx";
+import { hoverProps } from "../interactions/hover.jsx";
+import { mergeProps } from "../interactions/merge-props.jsx";
+import { moveProps } from "../interactions/move.jsx";
+import { clamp } from "../utils/index.js";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { LabelContext } from "../label/index.jsx";
+import { hasLive, liveAt, liveOmit, liveOptions, liveView, readOnce } from "../utils/live.jsx";
+import { liveRenderProps } from "../slots/index.jsx";
+import { Provider, contextProps, createSlot, mergeRefValues, renderProps, resumableContext, slottedContext, } from "../slots/index.jsx";
+import { createSliderState, getFormattedValue, getThumbMaxValue, getThumbMinValue, getThumbPositionPercent, getValuePercent, isSliderDisabled, isThumbSnapping, sliderOrientation, sliderValues, } from "./state.js";
+import { sliderProps, sliderThumbBlur, sliderThumbFocus, sliderThumbInputChange, sliderThumbInputKeyDown, sliderThumbInputKeyUp, sliderThumbKeyDown, sliderThumbMouseDown, sliderThumbMove, sliderThumbMoveEnd, sliderThumbMoveStart, sliderThumbPointerDown, sliderThumbProps, isSliderThumbDisabled, sliderThumbTouchStart, sliderTrackMouseDown, sliderTrackMove, sliderTrackMoveEnd, sliderTrackMoveStart, sliderTrackPointerDown, sliderTrackTouchStart, } from "./behaviour.jsx";
+export * from "./state.js";
+export * from "./behaviour.jsx";
+/** RAC `SliderContext`. */
+export const SliderContext = resumableContext(createContext(null, { id: "rv-slider" }));
+/** RAC `SliderStateContext`. */
+export const SliderStateContext = resumableContext(createContext(null, { id: "rv-slider-state" }));
+/** RAC `SliderTrackContext`. */
+export const SliderTrackContext = resumableContext(createContext(null, { id: "rv-slider-track" }));
+/** RAC `SliderFillContext`. */
+export const SliderFillContext = resumableContext(createContext(null, { id: "rv-slider-fill" }));
+/** RAC `SliderOutputContext`. */
+export const SliderOutputContext = resumableContext(createContext(null, { id: "rv-slider-output" }));
+const OWNED = ["style", "id", "render"];
+// Live props (P5): `data-disabled` goes through the spread bag, so a live `isDisabled` (`state.disabled`) is an
+// accessor there and a static one stays a value. Returned arrows = resumable symbols.
+function liveDisabledAttr(state) {
+    return () => isSliderDisabled(state) || undefined;
+}
+function disabledAttrs(state) {
+    return { "data-disabled": state.disabled ? liveDisabledAttr(state) : state.isDisabled || undefined };
+}
+/** `data-orientation` for a spread / render bag: the slider's orientation, a returned arrow when it is live. */
+function orientationOf(state) {
+    return state.live?.orientation ? liveOrientationOf(state) : state.orientation;
+}
+function liveOrientationOf(state) {
+    return () => sliderOrientation(state);
+}
+/**
+ * A slider allows a user to select one or more values within a range.
+ */
+export function Slider(props) {
+    const [ctxMerged, ref] = contextProps(props, props.ref, SliderContext);
+    // Live props (P5, LIVE-SWEEP): `isDisabled`, the range / orientation / format props and `value` (controlled) become
+    // accessors at the boundary (the state keeps them: `sliderMin` / `sliderOrientation` / … read them); body reads untracked.
+    const merged = hasLive(ctxMerged) ? liveOptions(ctxMerged, LIVE_KEYS, ["value"]) : ctxMerged;
+    return untrack(() => slider(merged, ref, hasLive(merged)));
+}
+/** Live by default (LIVE-SWEEP); read once: `id`, `name`, `aria-label` / `aria-labelledby`, `defaultValue`, `snap`, handlers. */
+const LIVE_KEYS = ["isDisabled", "minValue", "maxValue", "step", "orientation", "formatOptions"];
+function slider(merged, ref, live) {
+    const trackRef = createRef();
+    const { locale, direction } = useLocale();
+    const state = createSliderState({ ...merged, locale, formatOptions: merged.formatOptions });
+    const initialLabel = !merged["aria-label"] && !merged["aria-labelledby"];
+    const [labelRef, hasLabel] = createSlot(initialLabel);
+    // PROPS-CAPTURE: handlers capture `aria`; component-only keys (children / class / style / ref) stay out of it.
+    const { children: _children, class: _class, style: _style, ref: _ref, slot: _slot, render: _render, ...hookProps } = merged;
+    const aria = { ...hookProps, label: initialLabel, direction };
+    const { groupProps, trackProps, labelProps, outputProps } = sliderProps(aria, state);
+    // RA re-renders with `label: false` when no Label renders: the group is then labelled by its own props only.
+    const labelledBy = groupProps["aria-labelledby"];
+    const ownLabelledBy = merged["aria-labelledby"];
+    const group = {
+        ...groupProps,
+        ...disabledAttrs(state),
+        // Inline arrow in the literal (R2-wrapped; an arrow inside a conditional expression is not).
+        "aria-labelledby": () => (!initialLabel || hasLabel() ? labelledBy : ownLabelledBy),
+    };
+    const { moveProps: move } = moveProps({
+        onMoveStart: (e) => sliderTrackMoveStart(e, state),
+        onMove: (e) => sliderTrackMove(e, aria, state, trackRef() ?? null),
+        onMoveEnd: (e) => sliderTrackMoveEnd(e, state),
+    });
+    const track = mergeProps({
+        ...trackProps,
+        onMouseDown: (e) => sliderTrackMouseDown(e, aria, state, e.currentTarget),
+        onPointerDown: (e) => sliderTrackPointerDown(e, aria, state, e.currentTarget),
+        onTouchStart: (e) => sliderTrackTouchStart(e, aria, state, e.currentTarget),
+    }, move);
+    const values = { orientation: () => sliderOrientation(state), isDisabled: () => isSliderDisabled(state), state };
+    const rp = renderProps({ ...merged, defaultClassName: "rv-Slider", values }, live ? liveRenderProps(merged) : undefined);
+    const dom = globalDOMProps(merged, OWNED);
+    const slot = merged.slot || undefined;
+    const orientation = orientationOf(state);
+    const providers = [
+        [SliderStateContext, state],
+        [SliderTrackContext, { ...track, ref: trackRef }],
+        [SliderOutputContext, outputProps],
+        [LabelContext, { ...labelProps, ref: labelRef }],
+    ];
+    if (merged.render)
+        return merged.render({
+            ...dom,
+            ...group,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            slot,
+            "data-orientation": orientation,
+            children: () => <Provider values={providers}>{rp.children()}</Provider>,
+        }, values);
+    return (<div {...dom} {...group} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-orientation={sliderOrientation(state)}>
+      <Provider values={providers}>{rp.children()}</Provider>
+    </div>);
+}
+/**
+ * A slider output displays the current value of a slider as text.
+ */
+export function SliderOutput(props) {
+    const [merged, ref] = contextProps(props, props.ref, SliderOutputContext);
+    const state = useContext(SliderStateContext);
+    const { children, style, class: className, render } = readOnce(merged, ["children", "style", "class", "render"]);
+    const rest = liveOmit(merged, ["children", "style", "class", "slot", "render"]);
+    const liveFrom = hasLive(merged) ? liveRenderProps(merged) : undefined;
+    const values = { orientation: () => sliderOrientation(state), isDisabled: () => isSliderDisabled(state), state };
+    const rp = renderProps({ class: className, style, defaultClassName: "rv-SliderOutput", values }, liveFrom);
+    // RAC `defaultChildren: state.getFormattedValue()`: resolved inside the binding so it follows the value.
+    const content = () => typeof children === "function" && !isSlot(children)
+        ? children({ ...values, defaultChildren: getFormattedValue(state) })
+        : children != null
+            ? renderSlot(children)
+            : getFormattedValue(state);
+    const htmlFor = untrack(() => rest.for);
+    const attrs = liveOmit(rest, ["for"]);
+    const orientation = orientationOf(state);
+    const dis = disabledAttrs(state);
+    if (render)
+        return render({
+            ...attrs,
+            ...dis,
+            ...{ for: typeof htmlFor === "function" ? htmlFor() : htmlFor },
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-orientation": orientation || undefined,
+            children: () => content(),
+        }, values);
+    return (<output {...attrs} {...dis} {...{ for: typeof htmlFor === "function" ? htmlFor() : htmlFor }} ref={ref} class={rp.class()} style={rp.style()} data-orientation={sliderOrientation(state) || undefined}>
+      {content()}
+    </output>);
+}
+/**
+ * A slider track is a container for one or more slider thumbs.
+ */
+export function SliderTrack(props) {
+    const [merged, ref] = contextProps(props, props.ref, SliderTrackContext);
+    const state = useContext(SliderStateContext);
+    const { onHoverStart, onHoverEnd, onHoverChange, children, class: className, style, render, } = readOnce(merged, ["onHoverStart", "onHoverEnd", "onHoverChange", "children", "class", "style", "render"]);
+    const rest = liveOmit(merged, ["onHoverStart", "onHoverEnd", "onHoverChange", "children", "class", "style", "slot", "render"]);
+    const liveFrom = hasLive(merged) ? liveRenderProps(merged) : undefined;
+    const { hoverProps: hover, isHovered } = hoverProps({ onHoverStart, onHoverEnd, onHoverChange }, props);
+    const values = { orientation: () => sliderOrientation(state), isDisabled: () => isSliderDisabled(state), isHovered, state };
+    const rp = renderProps({ class: className, style, children, defaultClassName: "rv-SliderTrack", values }, liveFrom);
+    const attrs = mergeProps(rest, hover);
+    const orientation = orientationOf(state);
+    const dis = disabledAttrs(state);
+    if (render)
+        return render({
+            ...attrs,
+            ...dis,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => rp.style(),
+            "data-hovered": () => isHovered() || undefined,
+            "data-orientation": orientation || undefined,
+            children: () => rp.children(),
+        }, values);
+    return (<div {...attrs} {...dis} ref={ref} class={rp.class()} style={rp.style()} data-hovered={isHovered() || undefined} data-orientation={sliderOrientation(state) || undefined}>
+      {rp.children()}
+    </div>);
+}
+const THUMB_OWNED = ["render", "style", "id", "onPointerDown", "onMouseDown", "onTouchStart", "onKeyDown", "onKeyUp", "onFocus", "onBlur"];
+/**
+ * A slider thumb represents an individual value that the user can adjust within a slider track.
+ */
+export function SliderThumb(props) {
+    // Live props (P5): body reads are read once (untracked); `isDisabled` / class / children stay live.
+    return untrack(() => sliderThumb(props));
+}
+function thumbDisabledAttr(opts, state) {
+    return () => isSliderThumbDisabled(opts, state) || undefined;
+}
+function sliderThumb(props) {
+    const state = useContext(SliderStateContext);
+    const trackRef = slottedContext(SliderTrackContext)?.ref;
+    const index = props.index ?? 0;
+    const { direction } = useLocale();
+    const userInputRef = props.inputRef;
+    const inputRef = createRef();
+    const initialLabel = !props["aria-label"] && !props["aria-labelledby"];
+    const [labelRef] = createSlot(initialLabel);
+    const opts = {
+        index,
+        orientation: props.orientation,
+        isDisabled: liveAt(liveView(props, ["isDisabled"]), "isDisabled"),
+        isRequired: props.isRequired,
+        isInvalid: props.isInvalid,
+        autoFocus: props.autoFocus,
+        name: props.name,
+        form: props.form,
+        label: initialLabel,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-details": props["aria-details"],
+        "aria-errormessage": props["aria-errormessage"],
+        onFocus: props.onFocus,
+        onBlur: props.onBlur,
+        onFocusChange: props.onFocusChange,
+        onKeyDown: props.onKeyDown,
+        onKeyUp: props.onKeyUp,
+        direction,
+        trackRef: () => trackRef?.() ?? null,
+        inputRef: () => inputRef() ?? null,
+    };
+    const { thumbProps, inputProps, labelProps, isDragging, isFocused, isDisabled } = sliderThumbProps(opts, state);
+    const { moveProps: move } = moveProps({
+        onMoveStart: (e) => sliderThumbMoveStart(e, opts, state),
+        onMove: (e) => sliderThumbMove(e, opts, state),
+        onMoveEnd: (e) => sliderThumbMoveEnd(e, opts, state),
+    });
+    // A live `isDisabled` (own or the slider's) keeps the handlers: they check the current value.
+    const live = typeof opts.isDisabled === "function" || !!state.disabled;
+    const interactions = live || !isDisabled
+        ? mergeProps({ onKeyDown: (e) => sliderThumbKeyDown(e, opts, state) }, move, {
+            onMouseDown: (e) => sliderThumbMouseDown(e, opts, state),
+            onPointerDown: (e) => sliderThumbPointerDown(e, opts, state),
+            onTouchStart: (e) => sliderThumbTouchStart(e, opts, state),
+        })
+        : {};
+    const { focusProps, isFocusVisible } = useFocusRing();
+    const { hoverProps: hover, isHovered } = hoverProps({ onHoverStart: props.onHoverStart, onHoverEnd: props.onHoverEnd, onHoverChange: props.onHoverChange }, props);
+    const isSnapping = () => isThumbSnapping(state, index);
+    const values = {
+        state,
+        isHovered,
+        isDragging,
+        isFocused,
+        isFocusVisible,
+        isDisabled: () => isSliderThumbDisabled(opts, state),
+        isSnapping,
+    };
+    const rp = renderProps({ class: props.class, children: props.children, defaultClassName: "rv-SliderThumb", values }, hasLive(props) ? liveRenderProps(props, ["class", "children"]) : undefined);
+    const thumbStyle = thumbProps.style;
+    const ownStyle = props.style;
+    const style = () => {
+        const defaultStyle = thumbStyle();
+        const computed = typeof ownStyle === "function" ? ownStyle({ ...values, defaultStyle }) : ownStyle;
+        return { ...defaultStyle, ...computed };
+    };
+    const dom = globalDOMProps(props, THUMB_OWNED);
+    const attrs = mergeProps(dom, interactions, hover, { "data-disabled": live ? thumbDisabledAttr(opts, state) : isDisabled || undefined });
+    const { min, max, value, "aria-valuetext": valueText, "aria-labelledby": inputLabelledBy, ...inputStatic } = inputProps;
+    // RA re-renders with `label: false` when no thumb Label renders (useSlot): the input is then labelled by the
+    // slider's label (+ its own aria-labelledby) only, never by a thumb label id no element has. Rivet: the thumb
+    // label id goes into LabelContext as a slot id that starts unrendered; a `<Label>` consuming it marks it rendered
+    // during its render, which on the server precedes the input's spread attribute writes, so SSR markup is right too.
+    const thumbLabelId = labelProps.id;
+    const thumbLabel = { id: thumbLabelId ?? "", rendered: signal(false) };
+    const unlabelledBy = thumbLabelId
+        ? inputLabelledBy
+            ?.split(" ")
+            .filter((part) => part !== thumbLabelId)
+            .join(" ") || undefined
+        : inputLabelledBy;
+    const labelContext = thumbLabelId ? { ...labelProps, id: thumbLabel, ref: labelRef } : { ...labelProps, ref: labelRef };
+    const input = mergeProps(inputStatic, focusProps, {
+        // Inline arrow in the literal (R2-wrapped; an arrow inside a conditional expression is not).
+        "aria-labelledby": () => (thumbLabel.rendered() ? inputLabelledBy : unlabelledBy),
+        onFocus: (e) => sliderThumbFocus(e, opts, state),
+        onBlur: (e) => sliderThumbBlur(e, opts, state),
+        onKeyDown: (e) => sliderThumbInputKeyDown(e, opts, state),
+        onKeyUp: (e) => sliderThumbInputKeyUp(e, opts, state),
+        onInput: (e) => sliderThumbInputChange(e, opts, state),
+    });
+    const inputRefs = mergeRefValues(inputRef, userInputRef);
+    if (props.render)
+        return props.render({
+            ...attrs,
+            ref: props.ref,
+            class: () => rp.class(),
+            style: () => style(),
+            "data-hovered": () => isHovered() || undefined,
+            "data-dragging": () => isDragging() || undefined,
+            "data-snapping": () => isSnapping() || undefined,
+            "data-focused": () => isFocused() || undefined,
+            "data-focus-visible": () => isFocusVisible() || undefined,
+            children: () => (<>
+            <div style={visuallyHidden}>
+              <input {...input} ref={inputRefs} min={min()} max={max()} value={value()} aria-valuetext={valueText()}/>
+            </div>
+            <Provider values={[[LabelContext, labelContext]]}>{rp.children()}</Provider>
+          </>),
+        }, values);
+    // The thumb's children (its <Label>) render before the input's attributes are written (server: in order).
+    const content = <Provider values={[[LabelContext, labelContext]]}>{rp.children()}</Provider>;
+    return (<div {...attrs} ref={props.ref} class={rp.class()} style={style()} data-hovered={isHovered() || undefined} data-dragging={isDragging() || undefined} data-snapping={isSnapping() || undefined} data-focused={isFocused() || undefined} data-focus-visible={isFocusVisible() || undefined}>
+      <div style={visuallyHidden}>
+        <input {...input} ref={inputRefs} min={min()} max={max()} value={value()} aria-valuetext={valueText()}/>
+      </div>
+      {content}
+    </div>);
+}
+/**
+ * A slider fill shows the selected range of a slider track.
+ */
+export function SliderFill(props) {
+    const [merged, ref] = contextProps(props, props.ref, SliderFillContext);
+    const state = useContext(SliderStateContext);
+    const { onHoverStart, onHoverEnd, onHoverChange, children, class: className, style: ownStyle, offset, render, } = readOnce(merged, ["onHoverStart", "onHoverEnd", "onHoverChange", "children", "class", "style", "offset", "render"]);
+    const rest = liveOmit(merged, ["onHoverStart", "onHoverEnd", "onHoverChange", "children", "class", "style", "offset", "slot", "render"]);
+    const liveFrom = hasLive(merged) ? liveRenderProps(merged) : undefined;
+    const { hoverProps: hover, isHovered } = hoverProps({ onHoverStart, onHoverEnd, onHoverChange }, props);
+    const values = { orientation: () => sliderOrientation(state), isDisabled: () => isSliderDisabled(state), isHovered, state };
+    const rp = renderProps({ class: className, children, defaultClassName: "rv-SliderFill", values }, liveFrom);
+    // Rivet (snap="release"): any thumb animating to its step after a free drag.
+    const isSnapping = () => state.snappings().some(Boolean);
+    const style = () => {
+        const count = sliderValues(state).length;
+        const from = offset != null ? clamp(offset, getThumbMinValue(state, 0), getThumbMaxValue(state, 0)) : getThumbMinValue(state, 0);
+        // Rivet: thumb positions (free during a pointer drag with snap="release").
+        const start = count > 1 ? getThumbPositionPercent(state, 0) * 100 : getValuePercent(state, from) * 100;
+        const end = count > 0 ? getThumbPositionPercent(state, count - 1) * 100 : 0;
+        const startPercent = Math.min(start, end);
+        const endPercent = Math.max(start, end);
+        const vertical = sliderOrientation(state) === "vertical";
+        const sizePercent = Math.max(0, endPercent - startPercent);
+        const defaultStyle = vertical
+            ? { position: "absolute", bottom: `${startPercent}%`, height: `${sizePercent}%`, width: "100%" }
+            : { position: "absolute", insetInlineStart: `${startPercent}%`, width: `${sizePercent}%`, height: "100%" };
+        const computed = typeof ownStyle === "function" ? ownStyle({ ...values, defaultStyle }) : ownStyle;
+        return { ...defaultStyle, ...computed };
+    };
+    const attrs = mergeProps(rest, hover);
+    const orientation = orientationOf(state);
+    const dis = disabledAttrs(state);
+    if (render)
+        return render({
+            ...attrs,
+            ...dis,
+            ref: ref,
+            class: () => rp.class(),
+            style: () => style(),
+            "data-hovered": () => isHovered() || undefined,
+            "data-snapping": () => isSnapping() || undefined,
+            "data-orientation": orientation || undefined,
+            children: () => rp.children(),
+        }, values);
+    return (<div {...attrs} {...dis} ref={ref} class={rp.class()} style={style()} data-hovered={isHovered() || undefined} data-snapping={isSnapping() || undefined} data-orientation={sliderOrientation(state) || undefined}>
+      {rp.children()}
+    </div>);
+}

package/slider/state.d.ts

@@ -0,0 +1,203 @@
+import { type Signal } from "@rivetjs/reactivity";
+export type Orientation = "horizontal" | "vertical";
+/**
+ * Rivet deviation: when a stepped thumb snaps during a pointer drag. `"release"` (default): the thumb
+ * follows the pointer freely and animates to the closest step on release; `"drag"`: React Aria behaviour
+ * (the thumb jumps from step to step during the drag).
+ */
+export type SliderSnap = "release" | "drag";
+/** Controlled value: two-way signal, plain value, or an accessor (controlled by the caller's state, live; live props P5). */
+export type SliderValueInput<T> = T | Signal<T> | (() => T);
+export interface SliderProps<T = number | number[]> {
+    /** The current value (controlled): a two-way signal, a fixed value or an accessor. */
+    value?: SliderValueInput<T>;
+    /** The default value (uncontrolled). */
+    defaultValue?: T;
+    /** Handler that is called when the value changes. */
+    onChange?: (value: T) => void;
+    /**
+     * The orientation of the Slider. Live: a value-form prop is read in the bindings and at pointer / key time.
+     *
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /** Whether the whole Slider is disabled (a value, or an accessor that stays live). */
+    isDisabled?: boolean | (() => boolean | undefined);
+    /** Fired when the slider stops moving, due to being let go. */
+    onChangeEnd?: (value: T) => void;
+    /**
+     * The slider's minimum value.
+     * Live: a value-form prop (`minValue={m()}`) is read on every use (clamping, page size, thumb positions).
+     *
+     * @default 0
+     */
+    minValue?: number;
+    /**
+     * The slider's maximum value.
+     * Live: a value-form prop (`minValue={m()}`) is read on every use (clamping, page size, thumb positions).
+     *
+     * @default 100
+     */
+    maxValue?: number;
+    /**
+     * The slider's step value.
+     * Live: a value-form prop (`minValue={m()}`) is read on every use (clamping, page size, thumb positions).
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Rivet deviation: when the thumb snaps to a step during a pointer drag. `"release"`: free drag, the thumb
+     * animates to the closest step on release (`@rivetjs/cdk/motion` `Motion1D`, `data-snapping`); `"drag"`: React
+     * Aria behaviour (snaps during the drag). The value, `aria-valuenow` and `onChange` are stepped either way.
+     *
+     * @default 'release'
+     */
+    snap?: SliderSnap;
+}
+export interface SliderStateOptions<T> extends SliderProps<T> {
+    /** Rivet (upstream `numberFormatter`): locale of the value labels, default `en-US`. */
+    locale?: string;
+    /** Rivet: number format options of the value labels (live: read by every label). */
+    formatOptions?: Intl.NumberFormatOptions;
+}
+export interface SliderState {
+    /** Value source (see `SliderProps.value`; an accessor only in transient views); read through `sliderValues(state)`. */
+    readonly value: Signal<number | number[]> | (() => number | number[]);
+    /** Whether the state writes `value` (uncontrolled or two-way signal). */
+    readonly writable: boolean;
+    /** `onChange` / `onChangeEnd` receive a number (value or defaultValue was a number) instead of an array. */
+    readonly scalar: boolean;
+    /** The default values for each thumb. */
+    readonly defaultValues: number[];
+    readonly minValue: number;
+    readonly maxValue: number;
+    /** The step amount for the slider. */
+    readonly step: number;
+    /** The page size for the slider, used to do a bigger step. */
+    readonly pageSize: number;
+    /** The orientation of the slider. */
+    readonly orientation: Orientation;
+    /** Whether the slider is disabled (at creation; read `isSliderDisabled(state)` for the current value). */
+    readonly isDisabled: boolean;
+    /** Rivet: the caller's `isDisabled` accessor (live props), when it passed one. */
+    readonly disabled?: () => boolean | undefined;
+    /** Whether each thumb is being dragged. */
+    readonly draggings: Signal<boolean[]>;
+    /** Currently-focused thumb index. */
+    readonly focusedThumb: Signal<number | undefined>;
+    /** Rivet: when the thumb snaps during a pointer drag (`SliderProps.snap`). */
+    readonly snap: SliderSnap;
+    /**
+     * Rivet: free (unstepped) position of each thumb during a pointer drag, 0–1 (null = not free-dragging;
+     * always null on the server). Read through `getThumbPositionPercent`.
+     */
+    readonly dragPercents: Signal<(number | null)[]>;
+    /** Rivet: whether each thumb is animating from its free position to its stepped one (after release). */
+    readonly snappings: Signal<boolean[]>;
+    readonly onChange: ((value: any) => void) | undefined;
+    readonly onChangeEnd: ((value: any) => void) | undefined;
+    readonly locale: string;
+    readonly formatOptions: Intl.NumberFormatOptions | undefined;
+    /** Upstream refs: last values set, dragging flags, editable flags. */
+    readonly refs: {
+        values: number[];
+        draggings: boolean[];
+        editables: boolean[];
+    };
+    /**
+     * Rivet (live props): accessors of the live range / orientation / format props (the number fields above hold
+     * their creation values); read through `sliderMin` / `sliderMax` / `sliderStep` / `sliderPageSize` /
+     * `sliderOrientation` / `sliderFormatOptions`. Absent on the static path.
+     */
+    readonly live?: SliderLive;
+    /**
+     * Rivet: label override of a derived state (RA ColorSliderState overrides `getThumbValueLabel` /
+     * `getFormattedValue`): `getFormattedValue(state)` (no value) and `getThumbValueLabel` return these.
+     */
+    readonly format?: {
+        formattedValue: () => string;
+        thumbValueLabel: (index: number) => string;
+    };
+}
+/** Live range / orientation / format accessors of a slider state (live props). */
+export interface SliderLive {
+    readonly minValue?: () => number | undefined;
+    readonly maxValue?: () => number | undefined;
+    readonly step?: () => number | undefined;
+    readonly orientation?: () => Orientation | undefined;
+    readonly formatOptions?: () => Intl.NumberFormatOptions | undefined;
+}
+/**
+ * Provides state management for a slider component. Stores values for all thumbs,
+ * formats values for localization, and provides methods to update the position
+ * of any thumbs.
+ */
+export declare function createSliderState<T extends number | number[]>(props: SliderStateOptions<T>): SliderState;
+/** The slider's current minimum (its live `minValue`, else the creation value). */
+export declare function sliderMin(state: SliderState): number;
+/** The slider's current maximum. */
+export declare function sliderMax(state: SliderState): number;
+/** The slider's current step. */
+export declare function sliderStep(state: SliderState): number;
+/** The slider's current page size (derived from the current range and step when one of them is live). */
+export declare function sliderPageSize(state: SliderState): number;
+/** The slider's current orientation. */
+export declare function sliderOrientation(state: SliderState): Orientation;
+/** The slider's current number format options. */
+export declare function sliderFormatOptions(state: SliderState): Intl.NumberFormatOptions | undefined;
+/** Values managed by the slider by thumb index (upstream `state.values`). */
+export declare function sliderValues(state: SliderState): number[];
+/** Get the value for the specified thumb. */
+export declare const getThumbValue: (state: SliderState, index: number) => number;
+/** Returns the value as a percent between the min and max of the slider. */
+export declare function getValuePercent(state: SliderState, value: number): number;
+/** Returns the specified thumb's value as a percentage from 0 to 1. */
+export declare const getThumbPercent: (state: SliderState, index: number) => number;
+/** Returns the min allowed value for the specified thumb. */
+export declare function getThumbMinValue(state: SliderState, index: number): number;
+/** Returns the max allowed value for the specified thumb. */
+export declare function getThumbMaxValue(state: SliderState, index: number): number;
+/** Returns if the specified thumb is editable. */
+export declare function isThumbEditable(state: SliderState, index: number): boolean;
+/** Set the specified thumb's editable state. */
+export declare function setThumbEditable(state: SliderState, index: number, editable: boolean): void;
+/**
+ * Sets the value for the specified thumb.
+ * The actual value set will be clamped and rounded according to min/max/step.
+ */
+export declare function setThumbValue(state: SliderState, index: number, value: number): void;
+/** Whether the slider is disabled now (its live `isDisabled` accessor, else the creation value). */
+export declare const isSliderDisabled: (state: SliderState) => boolean;
+/** Whether the specific thumb is being dragged. */
+export declare const isThumbDragging: (state: SliderState, index: number) => boolean;
+/** Set is dragging on the specified thumb. */
+export declare function setThumbDragging(state: SliderState, index: number, dragging: boolean): void;
+/**
+ * Rivet: the thumb's visual position, 0–1: the free pointer position during a pointer drag (`snap: "release"`),
+ * else the stepped value's percent (`getThumbPercent`). Position thumbs / fills with it.
+ */
+export declare function getThumbPositionPercent(state: SliderState, index: number): number;
+/**
+ * Rivet: sets the free position (0–1) of a thumb being dragged by a pointer, clamped to the track and to the
+ * neighbouring thumbs' values. No-op with `snap: "drag"`, disabled or not editable. Cancels a running snap.
+ */
+export declare function setThumbDragPercent(state: SliderState, index: number, percent: number): void;
+/** Rivet: whether the thumb is animating to its stepped position after a free drag (`data-snapping`). */
+export declare const isThumbSnapping: (state: SliderState, index: number) => boolean;
+/** Rivet: ends the snap animation of a thumb: stops it and puts the thumb on its stepped position. */
+export declare function endThumbSnap(state: SliderState, index: number): void;
+/** Set focused true on specified thumb. This will remove focus from any thumb that had it before. */
+export declare function setFocusedThumb(state: SliderState, index: number | undefined): void;
+/** Returns the string label for the value, per props.formatOptions. */
+export declare function getFormattedValue(state: SliderState, valueParam?: number | number[]): string;
+/** Returns the string label for the specified thumb's value, per props.formatOptions. */
+export declare const getThumbValueLabel: (state: SliderState, index: number) => string;
+/** Converts a percent along track (between 0 and 1) to the corresponding value. */
+export declare function getPercentValue(state: SliderState, percent: number): number;
+/** Sets value for the specified thumb by percent offset (between 0 and 1). */
+export declare function setThumbPercent(state: SliderState, index: number, percent: number): void;
+/** Increments the value of the thumb by the step or page amount. */
+export declare function incrementThumb(state: SliderState, index: number, stepSize?: number): void;
+/** Decrements the value of the thumb by the step or page amount. */
+export declare function decrementThumb(state: SliderState, index: number, stepSize?: number): void;